Página inicial  

trans_770 trans_160

Ejercicio paso a paso. Unidad 16. Crear un menú emergente

Google

Objetivo.

 

Practicar las operaciones para crear un menú emergente.

 

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

2 Crea una nueva carpeta llamada libreria en tu carpeta de ejercicios y defínela como un nuevo sitio (Sitio → Nuevo Sitio).

3 Crea una nueva plantilla PHP (Archivo → Nuevo → Página de plantilla → Plantilla PHP).

4 Guárdala como libreria (Archivo → Guardar).

5 En la primera línea y sin insertar un párrafo escribe Mostrar Ofertas Catálogo Críticas Buscar:.

6 Selecciona el texto Mostrar y en Vínculo escribe #.

7 Selecciona el texto Ofertas y en Vínculo escribe ../ofertas.php.

8 Selecciona el texto Catálogo y en Vínculo escribe ../catalogo.php. Selecciona el texto Críticas y en Vínculo escribe ../criticas.php.

9 Selecciona el texto Buscar y en Vínculo escribe ../buscar.php.

Más adelante rellenaremos los enlaces con nuevas páginas que crearemos.

10 Selecciona el enlace Mostrar, vamos a asociarle un menú emergente.

11 Abre el panel Comportamientos (Mayus+F4).

12 Haz clic en el botón añadir comportamiento y selecciona la opción Mostrar menú emergente.

Se mostrará el siguiente cuadro de diálogo:

menu emergente

13 En Texto escribe Nuevos.

14 En Destino selecciona _self para que se abra en la misma ventana.

15 En Vínculo escribe nuevos.php, lo modificaremos más adelante.

16 Pulsa el botón más para añadir un nuevo elemento al menú.

17 En Texto escribe Usados.

18 En Destino selecciona _self para que se abra en la misma ventana.

19 En Vínculo escribe usados.php, lo modificaremos más adelante.

20 Haz clic en la pestaña Aspecto para seguir configurando el menú.

Verás las siguientes opciones:

menu emergente

21 Aquí podremos seleccionar entre menú vertical u horizontal. Dejaremos el Vertical para que los elementos se coloquen en un listado vertical.

22 En Fuente selecciona el tipo de fuente de la familia Verdana.

23 En Tamaño selecciona 12.

24 Los colores de las celdas que debes aplicar son los siguientes:

Estado Arriba

Texto: #33333

Celda: #E35331

Estado Sobre

Texto: #33333

Celda: #C2FCF3

25 Haz clic sobre la pestaña Avanzado para seguir configurando el menú.

Verás estas opciones:

menu emergente

Aquí estableceremos el aspecto de las celdas.

26 En Ancho de celda selecciona Píxeles y escribe 76.

27 En Relleno de celda escribe 5.

28 En Espacio entre celdas escribe 5.

29 Demora de menú es el tiempo que tardará el menú en esconderse una vez hayamos dejado de mantener el ratón sobre él, escribe 200 milisegundos.

30 Marca la casilla Bordes de ventana emergente para mostrar los bordes.

31 Dale el valor 1 al Ancho del borde.

32 Los colores que deberás aplicar en el resto de opciones son los siguientes:

Color del borde: #E35331

Sombra: #E35331

Resaltado: #E35331

33 Haz clic en la pestaña Posición para terminar de configurar el menú.

Verás las siguientes opciones:

menu emergente

Aquí podremos seleccionar una posición inicial para el menú predeterminada haciendo clic en los 4 botones en la parte superior, o escribir una posición personalizada en los cuadros siguientes.

34 En X escribiremos -12, es la distancia horizontal desde el borde izquierdo del elemento que muestra el menú (en nuestro caso el enlace).

35 En Y escribe 26, es la distancia vertical desde el borde inferior del elemento que muestra el menú.

No te preocupes porque el menú parezca ahora un poco desplazado hacia la izquierda y hacia abajo. En el tema siguiente verás cómo aplicándole unos cambios cogerá forma

36 No olvides marcar la opción Ocultar menú con evento onMouseOut para que cuando se retire el ratón del enlace el menú desaparezca.

37 Pulsa Aceptar y el menú estará terminado.

38 Guarda los cambios.

 

 

  Índice del curso  
Aviso legal: este curso es gratuito siempre que se visualice desde la página web de aulaClic. No está permitido descargar el curso y utilizarlo en academias o centros de enseñanza privados sin estar conectado a Internet.
© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Agosto - 2006.