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

Dreamweaver permite el uso de imágenes como alternativa al color de fondo de las páginas. Al insertar una imagen en un documento, el programa genera automáticamente una referencia al archivo de imagen en el código HTML. Para asegurarse de que esta referencia es correcta, el archivo de imagen deberá estar en el sitio actual. En el caso de haber seleccionado una carpeta como predeterminada del sitio para el almacenado de imágenes, el programa automáticamente efectúa una copia del documento original en la mencionada carpeta. Si la imagen utilizada no ocupa toda la ventana del navegador, Dreamweaver forma un mosaico, a menos que sean utilizados estilos CSS. En todo caso debe seleccionar una imagen que se ajuste correctamente a esta función. Así deben evitarse los documentos de imagen de tamaño elevado, ya que aumentan el tiempo de descarga de la página, y es recomendable seleccionar fondos de imagen que permitan visualizar correctamente los contenidos de la página. Por último, debe saber que el uso de imágenes como fondo es incompatible con el coloreado del mismo.

1 En la práctica anterior cambiamos el color de fondo de los documentos index.html _y texto. html mediante las opciones del cuadro de diálogo Propiedades de la página. En esta lección aprenderemos a utilizar una imagen como fondo de un documento Web. Esta imagen puede descargarla desde nuestra página web, con el nombre fondo.jpg, y guardarla en la carpeta de imágenes en su equipo. Empezaremos la práctica creando una copia de la página texto.html, ya que nos interesa conservar este documento en su estado actual. Vamos allá. Muestre el panel Archivos y seleccione con un clic el archivo texto.htm.

2 Seguidamente, despliegue el menú de opciones del panel, haga clic sobre el comando Edición y seleccione la opción Duplicar. (1)

Si prefiere trabajar desde el teclado, pulse la combinación de teclas Ctrl D para obtener el duplicado de la página seleccionada.

El menú contextual que aparece el pulsar con el botón derecho del ratón sobre cualquier elemento del panel Archivos también contiene el comando Edición con la opción Duplicar.

3 La copia se sitúa en el mismo directorio que el original, es decir, en la carpeta documentos del sitio elemental, y el programa le asigna el nombre texto-Copia.html. Seleccione el nuevo archivo pulsando sobre su icono en el panel Archivos. (2)

4 Asignaremos un nombre a la página que describa mejor su contenido. Tenemos varias opciones para cambiar el nombre de un documento, tras su selección en el panel Archivos. Una opción consiste en seleccionar el comando Cambiar nombre, bien en el menú de opciones del panel, bien en el menú contextual del documento. La pulsación de la tecla F2 selecciona el nombre del documento de forma directa, posibilitando su variación, y lo mismo ocurre con la pulsación con el ratón sobre el nombre. Pulse de nuevo sobre el nombre del documento texto-Copia.html, escriba la palabra foto y pulse dos veces la tecla Retorno, la primera para confirmar el nombre y la segunda para abrir el archivo. (3)

Recuerde que también puede acceder al cuadro de diálogo Propiedades de la página mediante el comando del mismo nombre del menú Modificar.

5 Vamos a iniciar el proceso para suprimir el color de fondo y aplicar la imagen en cuestión. Pulse el botón Propiedades de la página del panel Propiedades.

6 Se abre el cuadro de diálogo Propiedades de la página, con el cual trabajamos en la lección anterior. En este cuadro, pulse sobre la categoría Apariencia (HTML).

7 Para utilizar una imagen como fondo es necesario indicar al programa la ubicación del documento en cuestión. Haga clic en el botón Examinar, situado a la derecha del campo Imagen de fondo. (4)

8 Aparece el cuadro de diálogo Seleccionar origen de imagen. Sus opciones se dividen en diversos apartados. La parte superior queda reservada a la selección del tipo de archivo de imagen que va a ser utilizado. Esto es debido a que Dreamweaver permite la inserción de imágenes dinámicas, es decir, que cambian de contenido. De momento nos limitaremos a insertar documentos de imagen estáticos en nuestras páginas, por lo que dejaremos seleccionada la opción establecida por defecto, Sistema de archivos. De este modo el cuadro de diálogo muestra en su parte central las opciones relacionadas con la búsqueda y selección del documento de imagen. Lo que debemos hacer ahora es localizar la carpeta Imágenes del equipo, en la que usted habrá guardado el archivo de ejemplo fondo.jpg. Pulse el botón Subir un nivel, que muestra el dibujo de una carpeta y una flecha de color verde. (5)

9 La carpeta de imágenes se encuentra entre las bibliotecas del equipo. Localice el directorio Bibliotecas, haga doble clic sobre él y haga doble clic también en la biblioteca Imágenes. (6)

La opción Fuentes de datos, que permite la inserción de imágenes dinámicas, requiere la configuración de un sitio de prueba que utilice una tecnología que permita el control de datos.

10 En la carpeta de imágenes, seleccione con un clic el archivo fondo.jpg pulsando en su icono. (7)

El tamaño en disco de una imagen depende de diversos factores, siendo sus dimensiones uno de los principales. Debe saber que el tamaño en disco guarda relación directa con el tiempo de descarga de la imagen y, por tanto, siempre es aconsejable utilizar archivos de tamaño reducido.

11 En lecciones posteriores trataremos con mayor detenimiento las opciones que presenta la sección inferior del cuadro de diálogo. De momento cabe destacar que entre éstas se encuentra la que activa la vista previa del documento de imagen en la sección derecha del cuadro de diálogo. Bajo esta vista preliminar se muestran las propiedades básicas del archivo seleccionado: dimensiones, formato, tamaño en disco y tiempo de descarga estimado. Haga clic en Aceptar.

12 Tras la selección del archivo, el campo Imagen de fondo pasa a contener la ruta del mismo, su situación dentro del sistema de archivos empezando por el nivel jerárquico superior. Sin embargo, observe que no aparece la carpeta Imágenes, a la que hemos accedido para seleccionar el archivo, sino el nombre de la configurada como predeterminada en lecciones anteriores, images, para contener las imágenes del sitio local. Pulse el botón Aceptar del cuadro de diálogo Propiedades de la página para aplicar como fondo la imagen seleccionada. (8)

13 Al mismo tiempo que se inserta la imagen como fondo, Dreamweaver realiza automáticamente una copia del documento original en la carpeta images. El programa se asegura de este modo que el documento utilizado se encuentra dentro del sitio local y utiliza la carpeta predeterminada para ubicarlo. Muestre el panel Archivos y en él haga clic en el botón + que precede a la carpeta images para comprobarlo. (9)

14 Efectivamente la carpeta images del sitio contiene la imagen aplicada como fondo. Pulse el botón de aspa de la pestaña del documento foto.html y, en el cuadro de diálogo en el cual se solicita confirmación para almacenar los cambios, pulse en Sí para finalizar este ejemplo práctico. (10)

Debe saber que si decide no almacenar los cambios en la página actual, el archivo correspondiente a la imagen insertada como fondo permanecería en la carpeta images del sitio local.