CURSO COMPLETO DE DREAMWEAVER 8

--BÁSICOS--

 

06 - MENÚ DESPLEGABLE


Creamos un nuevo documento, le damos un estilo css, a nuestro gusto, y comenzamos a trabjara en él.

Lo primero que tenemos que crear es una capa base, con un color de fondo acorde al resto del documento,



las dimensiones de mi capa quedaron ási:



Ahora vamos a crear una nueva capa, exactamente igual que la anterior, pero con un distinto color de fondo, un tono más clarito a nuestra elección, la vamos a situar justo debajo de la anterior, debería quedarnos así:



Para asegurarnos que nos quedan bien alineadas, lo mejor es usar la cuadrícula, para activarla, nos vamos a Ver > Cuadrícula > Mostrar cuadrícula



En el caso de que nos nos fuera bien, la configuración de la cuadrícula que viene por defecto, la podemos modificar a nuestro gusto, en Ver > Cuadrícula > Configurar cuadrícula



Ahora creamos tantas capas como vinculos vaya a tener nuestro menú, todas exactamente iguales que la última que hemos creado, y las dispondremos todas, una bajo otra, bien alineadas, de forma que al terminar, tendremos algo así:



Ahora vamos a introducir el texto, dentro de cada una de las capas:



Y ahora llega la parte divertida, vamos a animarlo :p

Primero de todo vamos a arrastrar todas las capas una a una y por orden desde arriba hacia abajo, excepto la primera capa, la del menú principal, esa es la única que no vamos a llevar a la línea de tiempo, las iremos colocando una detrás de otra:



Ahora vamos a ocultar todas las capas, desde la paleta de capas:



Nos aseguraremos, que no estén activadas, las casillas de reprodución automática ni la de bucle.

Llega la parte del comportamiento, nos situamos encima de la capa del menú principal, y nos vamos a la paleta de capas, le damos a añadir un nuevo comportamiento, y seleccionamos línea de tiempo > Reproducir línea de tiempo



Seleccionamos la timeline y aceptamos:



Ahora nos vamos a los eventos y ponemos onClick, para que al hacer click se abra nuestro menú desplegable.



Ya tan solo nos queda guardar nuestro documento y visualizarlo en nuestro explorador.



2007 ©By Almaweb.es

subir

Ir al menú de tutoriales de DREAMWEAVER

Todos los tutoriales son de mi completa autoría,

cualquier parecido con otros, es pura coincidencia.

Queda totalmente prohibida su reproduccion, total o parcial.

Si quieres enlazar mis tutoriales, no hay problema,

solo mandame un e-mail, para comunicarmelo.

Cualquier duda o sugerencia:

Tutoriales registrados

 

Alma Web

Design Sensation by almaweb.es

Foro Design Sensation