Dominio 5 – Organizar el contenido usando Dreamwevaer CS5
¿Qué aprenderemos al final de este dominio?
Configurar y modificar las propiedades del documento
Organizar el layout de la página web con posición relativa y absoluta, con etiquetas y estilo.
Modificar texto y propiedades de texto
Modificar imágenes y propiedades de texto
Crear una plantilla de página web.
Usar CSS para implementar un diseño reusable
Modificar texto y propiedades de texto.
Vocabulario
Posición absoluta
CSS
AP div etiqueta
Listas ordenadas
Posición relativa
Posición relativa
Plantillas y Listas
Dominio 5
Se centra en organizar el contenido de su sitio web.
Configurar y modificar las propiedades del documento*
El cuadro de diálogo de propiedades de página permite configurar las propiedades del documento, que afecta globalmente el documento activo.
Podemos acceder al cuadro de diálogo de propiedades de página haciendo clic en las propiedades de página en el menú-modificar, o haciendo clic en el botón de propiedades de página en el inspector de propiedades.
Podemos modificar ambos HTML y propiedades CSS en el cuadro de diálogo de propiedades de página.
CSS es el método preferido para formatos de página web, pero Dreamwevaer también permite usar HTML.
Si el documento tiene un estilo de hoja externa, este no anulará las configuras de su hoja de estilo.
Pasos:
Inicie Dreamwevaer y seleccione el espacio de trabajo diseñador
En el inspector de propiedades, hacemos clic en el botón Propiedades de página
En este cuadro, verificamos la apariencia CSS este seleccionada, hacemos clic en fuente de página,
Hacemos clic en Georgia, Times New Roman o Times, serif,
Hacemos clic en el menú emergente de tamaño y hacemos clic en médium, en el color de texto, por ultimo clic en el color azul #00F, y en color de fondo y seleccionamos blanco.
Organizar el layout de la página web con posición absoluta yrelativa Div Tags y estilos CSS
Una div tag <div>es una etiqueta HTML usada como la fundación del layout de la página CSS para organizar contenido en una página web definiendo áreas y secciones.
Los Div tags son más flexibles para trabajar con más que tablas porque usted puede colocar estos en cualquier parte de la página.
Opciones de trabajo:
En código en vivo, insertar div tags manualmente en el código HTML.
En vista de diseño, sobre el punto objetos de diseño, en el menú insertar, y luego clic en el comando Div tag
Usar con una plantilla Dreamwevaer
Para insertar un etiqueta div en una posición absoluta, haga clic en objetos de imagen en el menú insertar y luego en Div Pa.
Modificar texto y propiedades de texto
Cuando seleccionamos una fuente para NUESTRO sitio web, es importante proveer de una familia de fuentes
Una familia de fuentes provee una lista de fuentes alternativas si la primera fuente no está disponible; debemos tratar con la siguiente.
Modificar imágenes y propiedades de imagen
Dreamwevaer ofrece opciones para editar y modificar imágenes sin tener que abrir una aplicación externa como Fireworks o Photoshop.
Cuenta con varias funciones y herramientas para brindar una mejor experiecnia
Crear plantila
Es una página master usada para crear múltiples páginas desde un mismo layout
Una plantilla es creada en la carpeta de ruta loca del sitio y por defecto cualquier plantilla creada es grabada aquí
Usted puede crear una plantilla desde una página haciendo clic en el comando guardar como "plantilla" en el menú archivo o haciendo clic en plantillas
Etiquetas básicas HTML para configurar un documento HTML
Formato de texto, añadir enlaces, crear tablas y construir listas
HTML se encuentra para Hypertext Marup Language y usa etiquetas de marca para crear páginas web, la página web es guardad con la extensión del archivo .htm o .html
<a href> </a>Crea un vínculo a otra página o documento; es un atributo específico a ladestinación del enlace.
<table> </table> Define una tabla
<ol> </ol>Define una lista ordenada; una lista ordenada es una lista que estánumerada.
<ul> </ul>Define una lista sin orden, una lista sin orden es una lista que se muestracon viñetas
