MEDIAactive - Manual de Dreamweaver CS5

Tanto desde el cuadro de diálogo Propiedades de la páginacomo desde el panel Propiedadeses 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.

1En 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 Archivosy, en él, haga doble clic sobre la página index.htmpara abrirla en el área de trabajo del programa. (1)

2Una vez hemos abierto la página que deseamos modificar, vamos a acceder al cuadro de diálogo Propiedades de la páginadesde el cual es posible especificar las propiedades de diseño y formato. Para ello, despliegue el menú Modificary 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 Abrirdel menú contextual del elemento en cuestión.

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

3El cuadro de diálogo Propiedades de la páginase 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áginapresente 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.

4Desde 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 Fondoy seleccione con un clic la última muestra de la octava columna de la paleta emergente. (3)

5Si 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.

6Desde 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.

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

8En 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ódigopara 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.htmles la principal del sitio. En el campo Títuloescriba la palabra principaly pulse el botón Aceptar. (6)

9Los 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 Archivosy haga doble clic ahora sobre la página texto.htmlpara abrirla. (8)

La categoría Imagen de rastreopermite 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.

10Como las propiedades asignadas sólo se aplican a la página activa, el fondo del documento texto.htmlsigue 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áginadel panel Propiedades.

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

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

13En el campo Título, escriba la palabra secundariay pulse el botón Aceptarpara confirmar los cambios realizados. (9)

14El 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.htmy 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)