Читать книгу Manual de Dreamweaver CS5 - MEDIAactive - Страница 33

Tanto desde el cuadro de diálogo Propiedades de la página como desde el panel Propiedades es posible crear nuevas reglas CSS obteniendo, como asistencia, sencillas explicaciones acerca del lugar que corresponde a las propiedades en la cascada de estilos y sin necesidad de escribir código.

1 En esta lección aprenderemos a definir las propiedades de una página Web; en concreto, aplicaremos un color de fondo y asignaremos un título a nuestra página principal. Para empezar, muestre el panel Archivos y, en él, haga doble clic sobre la página index.htm para abrirla en el área de trabajo del programa. (1)

2 Una vez hemos abierto la página que deseamos modificar, vamos a acceder al cuadro de diálogo Propiedades de la página desde el cual es posible especificar las propiedades de diseño y formato. Para ello, despliegue el menú Modificar y seleccione el comando Propiedades de la página. (2)

Además de utilizar el doble clic para abrir un archivo, también puede pulsar sobre el comando Abrir del menú contextual del elemento en cuestión.

También puede acceder al cuadro de diálogo Propiedades de la página mediante el botón del mismo nombre del panel Propiedades o bien utilizando la combinación de teclas Ctrl + J.

3 El cuadro de diálogo Propiedades de la página se muestra ordenado por categorías, siendo la llamada Apariencia (CSS) la activa por defecto. De forma predeterminada, Dreamweaver utiliza estilos CSS en lugar de etiquetas HTML para definir las propiedades de las páginas. Esto hace que el cuadro de diálogo Propiedades de la página presente opciones complementarias, ya que el uso de estilos ofrece mayores posibilidades de control de propiedades que la simple introducción de código HTML. Como aún no hemos trabajado con los estilos CSS, modificaremos la apariencia de la página HTML. Haga clic en la categoría Apariencia (HTML) del panel de la izquierda.

4 Desde la categoría Apariencia (HTML) es posible asignar una imagen de fondo, así como un color tanto para el fondo como para el texto y los enlaces de la página. Además, también es posible especificar los márgenes izquierdo y superior de la página y la anchura y la altura del margen. En este caso, pulse sobre la punta de flecha de la muestra de color del campo Fondo y seleccione con un clic la última muestra de la octava columna de la paleta emergente. (3)

5 Si utiliza para su página web una apariencia basada en estilos CSS, puede definir la fuente predeterminada, el tamaño de la fuente y los colores de los vínculos, los vínculos visitados y los vínculos activos basados en estos estilos. Para ello, pulse sobre la categoría Vínculos (CSS) para consultar su contenido. (4)

Al seleccionar un color de la paleta emergente, se refleja en el campo Fondo, junto a la muestra, el código correspondiente.

6 Desde el cuadro de propiedades también puede definir el formato que deben presentar los encabezados de la página. En este caso, acceda a la categoría Encabezados (CSS) pulsando sobre su nombre.

7 Pero en este ejemplo práctico, nos interesa modificar únicamente aspectos definibles mediante etiquetas HTML. Haga clic en la categoría Título/Codificación para acceder al contenido de esta categoría. (5)

8 En esta categoría puede consultar en todo momento la ubicación de la carpeta en la que se encuentra el documento que se está modificando (carpeta de documentos) y la ubicación de la carpeta del sitio. El título de una página queda definido mediante una etiqueta HTML de la cabecera. Pero, como sabemos, no es necesario cambiar directamente la etiqueta desde la vista Código para variar el título que el programa preestablece para la página, Documento sin título; en una lección anterior conocimos el modo de introducir el título de una página en el campo correspondiente del panel de propiedades y también en la barra de herramientas Documento. Indicaremos en este caso que la página index.html es la principal del sitio. En el campo Título escriba la palabra principal y pulse el botón Aceptar. (6)

9 Los cambios se reflejan en la página index.htm, en concreto en el color de fondo y en el título de la página. (7) Muestre de nuevo el panel Archivos y haga doble clic ahora sobre la página texto.html para abrirla. (8)

La categoría Imagen de rastreo permite insertar un archivo de imagen para utilizarlo como guía al diseñar la página. En una lección posterior nos ocuparemos con detalle de la inserción de imágenes de rastreo en una página web.

10 Como las propiedades asignadas sólo se aplican a la página activa, el fondo del documento texto.html sigue presentando el color blanco predeterminado. Para armonizar el fondo de esta página con el de la página principal, accederemos de nuevo al cuadro de propiedades. Para ello, haga clic en el botón Propiedades de la página del panel Propiedades.

11 En el cuadro de diálogo Propiedades de la página, haga clic en la categoría Apariencia (HTML), despliegue el campo Fondo y seleccione el mismo tono azul que en la ocasión anterior.

12 Haga clic en la categoría Título/Codificación para acceder a su contenido.

13 En el campo Título, escriba la palabra secundaria y pulse el botón Aceptar para confirmar los cambios realizados. (9)

14 El título y el color de fondo se aplican correctamente. En la próxima lección veremos el modo de utilizar una imagen como fondo de la página. Para finalizar la presente, guardaremos simultáneamente los cambios realizados en los documentos index.htm y texto.htm. En la barra de herramientas Estándar, pulse sobre el comando Guardar todo, que muestra, como ya sabe, la imagen de dos disquetes. (10)

Recuerde que si no dispone de esta barra visible en el área de trabajo, puede utilizar el comando Guardar todo del menú Archivo.