Ejemplo de Dreamweaver MX: habilidades de aplicación de imágenes

Acelerar las descargas de imágenes

Si hay demasiadas imágenes en la página web, afectará la velocidad de navegación. Dreamweaver puede configurar fácilmente imágenes precargadas para acelerar la descarga de imágenes, permitiendo que el sitio aparezca frente a los usuarios lo más rápido posible.

La descripción del efecto es crear un archivo y precargar la imagen primero para que la imagen se descargue en el caché con anticipación para acelerar la velocidad de descarga de la imagen. Para conocer el efecto real, busque el archivo "Ejemplo 36: Acelerar la velocidad de descarga de imágenes" en el directorio "100 ejemplos de Dreamweaver MX 2004" en el CD que viene con el libro.

Pensamientos creativos Abra la nueva página del software Dreamweaver MX 2004, luego abra el panel de etiquetas y seleccione la opción [Precargar imagen] en [Comportamiento] para acelerar la descarga de imágenes.

Pasos de operación

(1) Cree un nuevo archivo; la operación se muestra en la Figura 36-1.



(2) Guarde la página e inserte la imagen. Para no solicitar rutas relativas al insertar imágenes, primero guarde la página como "36.htm". Luego inserte la imagen que se va a precargar, como se muestra en la Figura 36-2.


Figura 36-2 Insertar imagen

(3) Agregue la función "precargar imagen". Utilice el panel de comportamiento de Dreamweaver para agregar la función "precargar imagen", como se muestra en la Figura 36-3.

(4) Seleccione la imagen que se va a precargar y la operación se muestra en la Figura 36-4.

Consejo: Si hay varias imágenes grandes en el sitio, puede hacer clic en el icono [+] encima de [Precargar imagen] para agregar varias imágenes precargadas. La operación específica es la misma que se muestra en la Figura 36-4.

(5) Guarde el archivo para completar la operación. De esta manera, se puede acelerar la velocidad de descarga de imágenes, de modo que los usuarios no esperen demasiado mientras navegan por la web, lo cual es de gran importancia para mejorar el rendimiento del sitio web.

Imágenes publicitarias aleatorias

Al navegar por una página web, los espectadores pueden encontrar que las imágenes publicitarias actualizadas dinámicamente en la página web son más dinámicas y atractivas que las imágenes estáticas y fijas. Cómo crear imágenes publicitarias aleatorias en páginas web es el tema que se estudiará en este ejemplo.

Descripción del efecto Al navegar por una página web, aparecerá una imagen publicitaria en el área del banner de la página web, como se muestra en la Figura 38-1. Posteriormente, la imagen publicitaria se actualiza cada dos segundos y aparece de forma aleatoria, como se muestra en la Figura 38-2.

Ideas creativas Al utilizar el complemento de extensión Advance_Random_Images de Macromedia, puede crear fácilmente imágenes publicitarias aleatorias en páginas web.

Pasos de operación

(1) Instale el complemento. Utilice el comando [Comando] | [Administración de extensiones] en la barra de menú para abrir el cuadro de diálogo [Macromedia Extension Manager] e instalar la extensión Advance_Random_Images, como se muestra en la Figura 38-3.

(2) Llame al comando. Abra el archivo banner.htm en la carpeta de origen de este ejemplo, coloque el cursor en la ubicación donde desea insertar el anuncio y ejecute el comando [AdvancedRandomImages], como se muestra en la Figura 38-4.

(3) Configure la imagen. Configure las propiedades de transformación de la imagen en el cuadro de diálogo [RandomImages] que aparece, como se muestra en la Figura 38-5.

(4) Agregar imágenes. Agregue la primera imagen publicitaria, como se muestra en la Figura 38-6.

Consejo: Las imágenes utilizadas en este ejemplo se colocan en la carpeta de banner en la carpeta de materiales de este ejemplo.

(5) Luego use el mismo método para agregar otras imágenes. Una vez completada la adición, haga clic en el botón [Aceptar] para confirmar la operación, como se muestra en la Figura 38-7.

(6) Luego guarde el archivo de la página y obtenga una vista previa, y se creará el efecto de la imagen publicitaria aleatoria. Los lectores pueden consultar el archivo de efectos bannerok.htm en la carpeta de materiales de este ejemplo para ver si el resultado de producción es correcto. En este punto, este ejemplo está completo.

La tecnología descrita en este ejemplo se usa comúnmente en varios sitios web, por ejemplo, en varios sitios web de portales nacionales grandes, estos anuncios de transformación se pueden ver en casi todas las páginas.