MEDIAactive - Aprender Dreamweaver CS4 con 100 ejercicios prácticos

IMPORTANTE

Como novedad en CS4, el panel Propiedades permite crear nuevas reglas CSSobteniendo, 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 este ejercicio aprenderemos a definir las propiedades de las páginas web. En el panel Archivos, haga doble clic en el icono de la página index.htm.

2 Haga clic en el botón Propiedades de la página del Inspector de propiedades. Recuerde que puede acceder al cuadro Propiedades de la página usando el botón del mismo nombre del Inspector de propiedades, esa opción del menú Modificar o la combinacón de teclas Ctrl.+J.

3 Como aún no hemos trabajado con los estilos CSS, modificaremos la apariencia de la página HTML. Haga clic en la opción Apariencia HTML del panel de la izquierda.

4 El color de fondo de la página es una de las propiedades definidas mediante etiquetas HTML. Pulse en la punta de flecha del cuadro de color de la opción Fondo.

5 En Dreamweaver, muchos de los cuadros de diálogo contienen un cuadro que da paso a una paleta emergente. Elija la penúltima muestra de la última columna de la paleta, por ejemplo. Pulse la rueda de color de la paleta para acceder al cuadro Color y poder agregar así muestras a los colores personalizados.

6 Haga clic en la opción Título/Codificación para acceder al contenido de esta categoría.

7 El título de una página queda definido mediante una etiqueta HTML de la cabecera. Pero, como sabe, 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. En el campo Título escriba la palabra principal y pulse Aceptar. Recuerde que puede cambiar el título de la página desde el cuadro de propiedades o desde la Barra de herramientas Documento.

8 En el panel Archivos, haga doble clic sobre el icono de la página texto.htm para abrirla.

9 Para armonizar el fondo con el del documento index.htm, acceda de nuevo al cuadro de diálogo Propiedades de la página pulsando en ese botón del Inspector de propiedades.

10 Seleccione la categoría Apariencia HTML , pulse en la punta de flecha del cuadro de color de la opción Fondo y seleccione el mismo tono amarillo que en la ocasión anterior.

11 Haga clic en la opción Título/Codificación para acceder al contenido de esta categoría, en el campo Título, escriba la palabra secundaria y pulse el botón Aceptar.

12 El título y el color de fondo se aplican correctamente. En el próximo ejercicio veremos cómo aplicar una imagen como fondo de la página. Para acabar éste, 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 la imagen de dos disquetes. La opción Guardar todo permite almacenar en un solo paso los cambios realizados en todos los documentos abiertos. Puede encontrarla también en el menú Archivo.

IMPORTANTE

Los estilos CSS permiten definir gran número de aspectos. Así el cuadro de diálogo Propiedades de la página presenta una categoría específica para la definición del aspecto de los enlacesy otra que permite la definición del formato que deben presentar los encabezadosde la página.

DREAMWEAVER PERMITE USAR IMÁGENES como fondo de las páginas. Al insertar una imagen en un documento, el programa genera automáticamente una referencia al archivo en el código HTML. Para asegurarse de que esta referencia es correcta, el archivo de imagen deberá estar en el sitio actual. Si ha seleccionado una carpeta como predeterminada del sitio para el almacenado de imágenes, el programa automáticamente añade una copia del documento original en ella.

IMPORTANTE

Deben evitarse los documentos de imagen de gran tamaño, ya que aumentan el tiempo de descarga de la página y es recomendable seleccionar fondos de imagen de tamaño reducido que permitan visualizar correctamente los contenidos de la página.

1 En primer lugar realizaremos una copia de la página texto.htm, ya que nos interesa conservar este documento en su estado actual. Con ese archivo seleccionado en el panel Archivos, abra el menú de opciones del panel, haga clic sobre la opción Edición y seleccione el comando Duplicar. Para conservar el documento original sin cambios, cree un duplicado a través de las opciones del panel Archivos.

2 La copia aparece en el mismo directorio que el original con el nombre Copia de texto.htm. Haga clic dos veces sobre el documento Copia de texto.htm, escriba foto.htm y pulse dos veces Retorno, una para confirmar el nombre y otra para abrir el archivo.Para cambiar el nombre de un documento puede usar la función Cambiar nombre de las opciones del panel Archivos o del menú contextual del documento o pulsar la tecla F2 o dos veces sobre él para mostrarlo en modo de edición.