Читать книгу Aprender Dreamweaver CS4 con 100 ejercicios prácticos - MEDIAactive - Страница 17

011	Aplicar una imagen de fondo

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.

3 Haga clic en el botón Propiedades de la página del Inspector de propiedades y pulse en la categoría Apariencia HTML.

4 Para usar una imagen como fondo es necesario indicar al programa la ubicación del documento en cuestión. Pulse el botón Examinar, situado a la derecha del campo Imagen de fondo. El uso de imágenes como fondo es incompatible con el coloreado del mismo.

5 Aparece el cuadro Seleccionar origen de imagen. Mantenga seleccionada la opción Sistema de archivos y pulse el botón Subir un nivel, que muestra una carpeta y una flecha verde. La opción Fuentes de datos, requiere la configuración de un sitio de prueba que utilice una tecnología que permita el control de datos.

6 Le recomendamos que cree una carpeta en el Escritorio que contenga todos los documentos e imágenes con los que va a trabajar en estos ejercicios. Puede llamarla Dreamweaver CS4 y almacenar en ella los documentos necesarios que encontrará en nuestra página de descargas. Abra la carpeta en cuestión con un doble clic, seleccione el archivo Roca verde y pulse Aceptar.

7 El campo Imagen de fondo pasa a contener la ruta de la misma. Pulse el botón Aceptar del cuadro Propiedades de la página.

8 El segundo icono del panel Archivos, Actualizar , permite actualizar su contenido. Púlselo y, para acceder al contenido de la carpeta imágenes, pulse el signo + situado a su izquierda.Dreamweaver crea automáticamente una copia de las imágenes en la carpeta del sitio correspondiente.

9 Esta carpeta contiene la imagen aplicada como fondo, Roca verde. jpg. Ésta se presenta en la página en forma de mosaico, repitiéndose las veces necesarias para ocupar todo el fondo. Utilizaremos otro archivo que nos permita diferenciar el efecto de mosaico con más claridad. Pulse el botón Propiedades de la página, active la categoría Apariencia HTML y pulse el botón Examinar.

10 Seleccione esta vez el documento casa.jpg, pulse el botón Aceptar y repita la acción para cambiar la imagen de fondo.

11 Pulse la tecla F5 para actualizar el panel Archivos y compruebe que la nueva imagen se ha guardado correctamente en el sitio.

12 Abra el menú Archivo, seleccione el comando Restituir y, en el cuadro de confirmación que advierte que se perderán los cambios realizados, pulse el botón Sí para recuperar el aspecto inicial del documento.