|
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
|
