MEDIAactive - Manual de Dreamweaver CS5

Recuerde que si no dispone de esta barra visible en el área de trabajo, puede utilizar el comando Guardar tododel menú Archivo.

La codificación, también incluida en el encabezado, adapta la página al idioma utilizado. En principio, los navegadores de Internet están configurados para el idioma del país al que pertenecen. Si la intención del usuario es que las páginas contengan caracteres específicos de un idioma, puede seleccionarlo en el campo Codificaciónde la categoría Título/ Codificacióndel cuadro de propiedades.

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.

1En la práctica anterior cambiamos el color de fondo de los documentos index.html y texto. htmlmediante 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 Archivosy seleccione con un clic el archivo texto.htm.

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

Si prefiere trabajar desde el teclado, pulse la combinación de teclas Ctrl Dpara 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 Archivostambién contiene el comando Edicióncon la opción Duplicar.

3La copia se sitúa en el mismo directorio que el original, es decir, en la carpeta documentosdel 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)

4Asignaremos 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 F2selecciona 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 fotoy 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áginamediante el comando del mismo nombre del menú Modificar.

5Vamos 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áginadel panel Propiedades.

6Se 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).

7Para 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)

8Aparece 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ágenesdel 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)

9La 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.

10En la carpeta de imágenes, seleccione con un clic el archivo fondo.jpgpulsando 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.