Manual de Dreamweaver CS5. MEDIAactive

el icono del documento texto.html. (15)

      19 La página en blanco se abre en el área de trabajo del programa, lista para ser editada. (16) Iremos conociendo ésta y otras funciones del panel Archivos en el transcurso de las siguientes lecciones. Para finalizar este ejemplo práctico, pulse el botón de aspa del documento abierto para cerrarlo sin realizar en él ningún cambio.

Lección 11. Aplicar un color de fondo a una página

      Entre los muchos aspectos configurables mediante etiquetas HTML se encuentran el color de fondo, el título y la codificación de las páginas. Estas propiedades son incluidas en la cabecera de la página automáticamente por Dreamweaver durante la generación de los documentos. Posteriormente pueden ser modificados en el cuadro de diálogo Propiedades de la página, que presenta sus opciones diferenciadas en categorías. El campo Fondo de la categoría Apariencia (HTML) da acceso a una paleta emergente, en la que es posible seleccionar una de las muestras para aplicar la tonalidad seleccionada al fondo de la página. La categoría Título/Codificación, por su parte, permite cambiar el título preestablecido durante la generación del programa, sustituyéndolo en el cuadro de texto propuesto a tal efecto. El título de una página HTML ayuda a los visitantes del sitio a realizar un seguimiento mientras navegan, al tiempo que identifica la página en listas de historial y de marcadores. Por último, las opciones del desplegable Codificación permiten la correcta visualización de páginas cuyos textos estén escritos en idiomas que presenten caracteres especiales.

       RECUERDE

      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