Página Web con Multimedia
Las películas Flash son animaciones,
cuyo archivo tiene la extensión
SWF. Es frecuente verlas en las
páginas iniciales
de los sitios web, a modo de presentación hacia los usuarios,
como banners publicitarios, como botones... Flash es el elemento
multimedia más empleado en las páginas web
Al hablar de cómo
contruir una página básica
ya comentamos como incluir una imagen estática. Dreamweaver
permite insertar otro tipo de elementos gráficos más
dinámicos, como:
Los mapas de imagen
Las barras de exploración
IMAGEN DE SUSTITUCIÓN
|
Una imagen
de sustitución consta en realidad de dos imágenes:
- La imagen principal (la que aparece al cargarse inicialmente la página) y
- La imagen de sustitución (la que aparece al pasar el cursor sobre la imagen principal).
Al crear una imagen
de sustitución, ambas imágenes deben tener el mismo tamaño.
Si las imágenes tienen tamaños distintos, Dreamweaver cambiará automáticamente el tamaño de la segunda imagen para que se ajuste a las propiedades de la primera imagen.
Para crear una imagen de sustitución:
1. En la ventana
de documento, colocar el punto de inserción en el
lugar en el que se desea que aparezca la imagen de sustitución.
2. Introducir
la imagen de sustitución
mediante uno de estos métodos:
Abrir la
paleta de objetos. elegir
Menú
Ventana > Objetos y, al seleccionar Común
hacer clic en el botón>Sustitución ,
Elegir
en Menú Insertar
> Imagen de sustitución.
3. En el cuadro
de diálogo que aparece.
Introducir la
información en los distintos campos:
MAPAS DE IMAGEN
Para crear un mapa de imagen
- Nombre de la imagen: escribir el que queremos que tenga
- Imagen original: Localizar y seleccionar una imagen, o bien escribir la ruta de acceso y el nombre del archivo de imagen original
- Imagen de sustitución: Localizar y seleccionar una imagen de sustitución, o bien escribir la ruta de acceso y el nombre del archivo de imagen de sustitución en el campo.
- Al hacer clic, ir a URL: Para crear un vínculo, localizar y seleccionar un archivo, o bien en paleta de propiedades de la imagen de sustitución, sustituir la almohadilla (#) del campo Vínculo por una ruta de acceso y un nombre de archivo.
- Carga previa de imágenes: seleccionar la opción para hacer que Dreamweaver cargue previamente las imágenes en la caché del explorador.
MAPAS DE IMAGEN
| Un mapa de imagen es una imagen que ha sido dividida en regiones o "zonas interactivas"; cuando se hace clic en la "zona interactiva", se ejecuta un vínculo. |
Para crear un mapa de imagen
En
Dreamwever los mapas de imagen
se configuran en el propio Inspector de propiedades:
1. Seleccionar
la imagen a la que queremos añadir el "mapa sensible"
2. Hacer clic
en la flecha de ampliación del Inspector
de propiedades, para ver todas las propiedades.
3. Escribir el
nombre del mapa en el campo Mapa.
Si se utilizan varios mapas de imagen en el mismo
documento, asegurarse de que se asigna un nombre exclusivo a
cada mapa.
4. Para definir
las áreas sensibles,
emplear las tres herramientas de trazado: rectangular,
elíptica o poligonal.
El icono en forma de flecha es el cursor para seleccionar mapas
ya creados y modificar su forma o tamaño.Cuando se selecciona una zona interactiva, aparece
el Inspector de Zonas Interactivas
en lugar del Inspector de propiedades.
5. En el Inspector
de Zonas Interactivas, se puede configurar un vínculo
para cada una de las zonas sensibles que hayamos introducido en
la imagen y una etiqueta alternativa.
Una barra de exploración puede constar de varias imágenes -con sus respectivos estados interactivos- o de sólo una. En este último caso estaríamos hablando de la creación de un
Botón Interactivo.
Antes de empezar a construir la barra de exploración, es conveniente crear el conjunto de imágenes para los diferentes estados de la imagen que se desea mostrar.
Una imagen puede tener cuatro estados:
Llevar a cabo una de estas operaciones:
- Cuando se copia una determinada imagen de un documento a otro, las zonas interactivas asociadas a dicha imagen tambien se copiarán
- Se pueden utilizar las teclas de flecha para mover una, o varias, zonas interactivas a la vez.
- Se puede elegir menú Modificar> Capas y zonas interactivas para dimensionar o alinear varias zonas interactivas entre sí (de modo similar a las capas). Si hay dos zonas interactivas solapadas, la zona interactiva situada delante será la dominante.
| Una barra de exploración se compone de una imagen, o un conjunto de imágenes, cuya visualización cambia según las acciones que realice el usuario sobre ellas. |
Una barra de exploración puede constar de varias imágenes -con sus respectivos estados interactivos- o de sólo una. En este último caso estaríamos hablando de la creación de un
Botón Interactivo.
Antes de empezar a construir la barra de exploración, es conveniente crear el conjunto de imágenes para los diferentes estados de la imagen que se desea mostrar.
Una imagen puede tener cuatro estados:
- Arriba: la imagen que se desea mostrar cuando la página se carga inicialmente.
- Sobre imagen: la imagen que se desea mostrar cuando el usuario mueva el cursor sobre la imagen
- Abajo: la imagen que se desea mostrar cuando el usuario haga clic en la imagen.
- Sobre y Abajo: la imagen que desea mostrar cuando el cursor pasa sobre una imagen después de haber hecho clic en ella.
PARA CREAR UNA BARRA DE EXPLORACIÓN:
Llevar a cabo una de estas operaciones:
- Elegir en Menú Insertar > Barra de exploración.
- En el panel Común de la paleta de objetos, seleccionar el botón : Insertar barra de exploración.
Aparecerá
el cuadro de diálogo Insertar barra
de exploración.
1. En la lista
superior se irán añadiendo tantos elementos como imágenes
queramos incorporar a nuestra barra de exploración.
Los
nombres de elemento aparecen en la lista Elementos de barra de
exploración. Se puede utilizar el botón de flecha
arriba, o abajo, para disponer los elementos en la barra de exploración.
Con el icono (+) podemos añadir items a la
lista; con el icono (-) eliminaremos los items seleccionados.
2. Los campos que aparecen a continuación sirven para establecer las características de cada uno de los elementos de la lista anterior:
2. Los campos que aparecen a continuación sirven para establecer las características de cada uno de los elementos de la lista anterior:
- Nombre de elemento: introducir un nombre para el elemento de la barra de exploración.
- Estados de imagen: Disponemos de 4 posibles estados, cada uno asociado a un archivo de imagen
- En el campo Imagen arriba, hacer clic en Examinar para seleccionar la imagen que se desea mostrar cuando la página se carga inicialmente.
- En el campo Sobre imagen, hacer clic en Examinar para seleccionar la imagen que se desea mostrar cuando el usuario mueva el cursor sobre la imagen.
- En el campo Imagen abajo, hacer clic en Examinar para seleccionar la imagen que se desea mostrar cuando el usuario haga clic en la imagen.
- En el campo Sobre imagen mientras imagen abajo, hacer clic en Examinar para seleccionar la imagen que desea mostrar cuando el usuario haga clic en la imagen y, a continuación, mueva el cursor sobre ella.
En el campo
Al hacer clic, ir a URL:
seleccionar una ubicación en la que se abrirá el archivo
al pulsar sobre la imagen. El documento de destino
se visualizará en la Ventana Principal o en alguno de los
marcos que aparezcan en la lista al uso. Para ello, llevar a cabo
uno de estos procedimientos:
- Seleccionar Ventana principal para abrir el archivo en la misma ventana:
- Seleccionar un marco en el que se abrirá el archivo. (siempre que se haya definido marcos en la página actual)
- Si el marco deseado no aparece en el menú emergente Destino, salir del cuadro de diálogo Insertar barra de exploración y asignar un nombre al marco.
3. Seleccionar
las opciones para cargar la imagen
- La opción Carga previa de imágenes: transfiere las imágenes cuando se carga la página. Si esta opción no está seleccionada, es posible que se produzca una demora cuando el usuario mueva el cursor sobre la imagen de sustitución.
- Seleccionar Mostrar "Imagen abajo" inicialmente para mostrar el elemento seleccionado en su estado abajo cuando se muestra la página.
- Cuando esta opción está seleccionada, aparece un asterisco después del elemento en la lista
ELEMENTOS DE BARRA DE EXPLORACIÓN.
4. La sección
Insertar ofrece las opciones
siguientes:
- Para insertar los elementos de barra de exploración -vertical u horizontalmente- en el documento, utilizar el menú emergente Insertar.
- Para insertar los elementos de barra de exploración en una tabla, activar la casilla de verificación Usar tablas.
5. Hacer clic
en el botón más (+)
para agregar otro elemento a la barra de exploración y, a continuación,
seguir los pasos 2 a 4 para establecer el estado del elemento.
6. Haga clic en Aceptar.
6. Haga clic en Aceptar.
