Creación de Rollovers y Botones1. Creación de un rollover 2. Creación de botones generación de menús

emergentes3. Editor de menús emergentes4. Exportación de Archivos

1. Creación de un rollover

Existen dos clases de rollovers: rollovers simples, rollovers des unidos.Un rollover simple muestra una imagen diferente cuando el puntero se coloca sobre él en un navegador web y un rollover desunido provoca el cambio de imagen en otro lugar de la pantalla cuando el puntero se coloca sobre él.

A continuación vamos a ver los pasos para la creación de un rollover

1. Dividir área del documento con herramienta dividir documento 2. Seleccionar la división que contiene la zona donde queremos la

interactividad3. Pulsar el símbolo de comportamiento4. Tenemos los siguientes:

Comportamiento de rollover simple Comportamiento de intercambiar imagen Mensaje de barra de estado Barra de Navegación Menú emergente

5. Podemos realizar un rollover de forma muy sencilla:

Arrastrar el símbolo de comportamiento a la división donde queremos que se intercambie la imagen

Soltar el botón, aparece el cuadro de diálogo Intercambiar Imagen.

Escoger el fotograma donde se encuentre la imagen a intercambiar. Si tenemos sólo uno, escoger Fotograma 2.

Panel Fotogramas. Ventana>Fotogramas. Haga clic en el botón Fotograma nuevo/duplicado

Tenemos un segundo fotograma con las mismas divisiones del anterior

Importamos en la zona donde queremos el intercambio la imagen a intercambiar.

2. Creación y edición de botones para generar una barra de navegaciónLos botones son objetos web que conducen a otras páginas web. Su aspecto suele variar según el movimiento del ratón u otras acciones del usuario, como un clic.

Una barra de navegación (o Bar Nav) es un conjunto de botones que aparece en una o varias páginas de un sitio Web.

1. Crear el símbolo que será base del botón.

Modificar > Símbolo > Convertir en símbolo Se abre el cuadro de diálogo Propiedades de símbolo

Dar nombre al símbolo y pulsar la opción de Botón El símbolo aparece en la biblioteca.Ventana>Biblioteca

2. Creación de estados del botón (los estados de botón son los diferentes modos en que aparece un botón cuando el puntero se desplaza sobre él o cuando se hace clic en él en un navegador web). Doble click en la instancia de botón creada o en la vista previa del botón en el panel Biblioteca y modificar los estados.

Crear los distintos estados: Arriba Sobre Abajo Sobre y Abajo Área activa Hacer clic en Listo

3. Copiar el botón y probar los efectos.

4. Creación de varias instancias de botón

Seleccionar el botón. Editar > Clonar. Aparece una nueva instancia de botón. Desplazarla al sitio deseado.

5. En el Inspector de propiedades se pone el nuevo texto.

Asignamos valores URL a los botones en el campo Vínculo del Inspector de propiedades.

Alinearlo con cuidado: Modificar> Alinear

3. Creación y edición de un menú emergente1. Mmenú emergente es el menú que aparece al desplazar el puntero sobre

una imagen de activación en un navegador. Contiene una lista de opciones que conducen a otras páginas web.

2. Creación de las opciones del menú emergente.

Modificar>Menú emergente>Añadir menú emergente Doble clic en el cuadro de Texto para insertar el nombre Doble clic en el cuadro de Vínculo para insertar la dirección

URL o el enlace a otra página. Doble clic en el cuadro Destino para insertar cómo se va a

abrir la página del enlace o URL especificada. Pulsar Listo

3. Comprobar el menú emergente. Archivo>Vista previa en el navegador>Navegador

4. Personalización del menú emergente.

Doble clic en el contorno del menú emergente. Clic en Siguiente. Patilla Aspecto. Cambia las fuentes y los

colores utilizados en menús emergentes. Clic en Siguiente. Patilla Avanzado. Cambia varias

propiedades de celda y borde. Clic en Siguiente. Patilla Posición. Especifica la posición de

la pantalla donde debe aparecer el menú emergente.

5. Edición del menú emergente Doble clic en el contorno del menú emergente. Patilla

Contenido. Clic el botón Añadir menú. Añade una línea en blanco. Seleccionar una entrada y hacer clic en el botón Sangrar

menú. La opción sangrada emergerá de la entrada anterior Desplazar de posición las entradas desplazándolas con el

ratón.

4. Optimización del documento y Exportación de archivos

1. Antes de exportar un documento, primero siempre hay que optimizarlo2. Panel Optimizar.Ventana>Optimizar

Escoger las opciones más convenientes

Ventana de documento ficha 2-arriba, permite ver los resultados de los parámetros de optimización y compararlos con el original

Exportación de HTML

3. Definición de las preferencias en HTML Archivo>Configuración de HTML Se abre el cuadro de diálogo Configuración de HTML. Las

opciones que se definan afectarán a todos los documentos que creemos en el futuro, excepto a las opciones de la ficha Específico del documento.

Ficha General, elegimos un estilo de HTMLFicha Tabla, cambia las propiedades de tablas HTMLFicha Específico del documento, permite elegir varias preferencias para cada documento.

4. Exportación del documento. Archivo>Exportar Tipo HTML e Imágenes Exportar divisiones Sólo divisiones seleccionadas

PRACTICA CALIFICADA

1. Realizar la siguiente pagina con rollovera) Crear un documento 1024x800

b) Ir al menú ventana –biblioteca

–

c)click en formas

Click en cubo y arrastrarlo al lienzo

Ir—Archivo—Importar

Darle la ruta de las imágenes de los gatos

Seleccionar una imagen y abrirHacer click sobre el lienzoClick en la herramienta escala—DistorsionarArrastro de las esquinas o puntos y los acoplo al cubo

Sigo el mismo procedimiento para los costados del cuboHacer click en el puntero para seleccionar otro objeto

Insertar un titulo con la herramienta texto

CLICK EN LA HERRAMIENTA RECTANGULO—RECTANGULO REDONDEADODIBUJAR ARRASTRANDO Y CLICK EN ESTILOS Y ESCOGER UN COLOR PARA EL RECTANGULO

Importar una imagen en el centro

Click en texto sobre los rectángulos y escribir los nombres

Clic en web—herramienta divisiónDibujo un cuadrado sobre la imagen

Queda de esta maneraClick en la herramienta zona interactiva rectangular

Dibujo un rectángulo sobre cada botón

Click flecha (herramienta seleccion)Arrastro el centro hacia la imagen central

Click en mas opciones

Click en la carpeta amarillaEscoger el gato que corresponde según la razaAceptarPresionar F12 para visualizar la paginaY al pasar el puntero del mouse sobre el boton cambiara de foto central

Crear un menú emergente sobre el botón accesoriosIr al menú archivo—exportar

Exportar activando las casillas colocar imágenes en subcarpeta y lo envían comprimido.