Menu Desplegable
Como puedo crear un menu desplegable con dreamweaver mx para mi página web.
He oído que se puede hacer con fireworks, me das una idea de como se hace o alguna página donde se explique.
Gracias
He oído que se puede hacer con fireworks, me das una idea de como se hace o alguna página donde se explique.
Gracias
1 Respuesta
Respuesta de karmichael
1
Parece ser que este servidor tiene el Timeout muy corto, y necesita las cookies. Pero tanto la seguridad de ellos es importante, como la mía, por eso mis cookies están deshabilitadas.-
Ya es la tercera vez que intento responder a esta pregunta, las anteriores me echaba para atrás, me hacia volver a introducir user y pass, y por lo tanto perdía mi respuesta.
----------------
Bien, pasemos al tema.
En cierto sentido voy a decir como hacíamos esto en Dreamweaver 3, hace algo más de dos años, cuando no estaban disponibles las extensiones de Dreamweaver.
Necesitaremos lo siguiente:
- Dreamweaver
- 1 gif transparente de 5 por 5 pixeles ( podría ser de 1X1 incluso).
- Botón gráfico que activa el menu y botones del menu desplegable, si quieres hacerlo con gráficos.
El gif transparente se puede hacer en Fireworks haciendo un documento de 5 X 5 y exportandolo directamente como gif de tranparencia alfa. Sin nada más que el lienzo. Llamaremos este gráfico transparente.gif .
Sigamos, el método consiste en dos capas dos de ellas ocultas. Una contiene el gif transparente y la otra el submenú.
1.- Inserta tu botón en dreamweaver.
2. - Creas una nueva capa a la que llamaremos menu.
3.- En esta capa vamos a insertar el menu desplegable. Este menu lo puedes hacer con gráficos o con texto, dentro de tablas de 1 columna y varias filas. Tantas filas como vaya a tener el menu desplegable.
4.- Ahora cogemos esa capa y la colocamos en el lugar exacto donde vaya a aparecer, debe de ser lo más cerca posible del botón. En el inspector de propiedades le indicamos que será una capa oculta ( Vis= hidden).
5.- Ahora vamos a crear una capa que llamaremos control. Recuerda que el nombre se lo das a la izquierda del inspector de propiedades, en el campo de texto donde suele poner Layer1, Layer2, etc...
6.- En esta capa llamada control, vamos a aumentar de tamaño de manera que quede rodeando completamente a la capa del menu desplegable. Imaginate que el menu desplegable es una isla y la capa control es el mar que la rodea.
7.- Inserta dentro de la capa control el gif transparente, y aumenta el tamaño del gif de manera que tenga el mismo tamaño que la capa control que lo contiene.
8.- Ahora abrirás un panel que es el panel de capas en Menu Ventana>Capas. Arrastra la capa control debajo de la capa menu.
9. - Ya tenemos hecho lo principal. Ahora selecciona tu botón y abre el panel de comportamientos.
10. - Con tu botón seleccionado, pulsa el botón + del panel de comportamientos.
11. - Seleccionas el comportamiento Mostrar y Ocultar capas.
12. - En este cuadro de dialogo que aparecerá, señalas la capa menú y pulsas el botón de Mostrar. Lo mismo haces con la capa control.
13. En el panel de comportamientos asegurate de haber puesto el evento deseado puedes dejar el OnMouseOver. Mira los eventos, están a la izquierda en el panel de comportamientos cuando añades una acción y cuando pulsas sobre ellos te sale una lista
14,- Ahora seleccionamos el gráfico transparente de la capa. Vamos a hacer lo mismo, insertarle un comportamiento esta vez para que sea ONMouseOver.
15.- Añades el comportamiento al gráfico transparente de Mostrar y Ocultar capas y esta vez las ocultas todas.
16.- Para finalizar activa selecciona la capa control y en el inspector de propiedades la pones como oculta ( Vis=hidden ).
Ya esta listo tu menu.
La capa control es una capa que capta cuando el usuario sale del menu y entonces oculta todas las capas entre entre ellas las del propio menu.
Este es el planteamiento general. Puedes hacer modificaciones, si metes más botones y más menús entonces la capa control debe rodear a todos los menús y botones .
Puedes meter los botones en otra capa siempre visible, pero esta debe de estar por encima de la capa control siempre. Recuerda que eso lo haces en el panel de comportamientos ( Behaviors en ingles ).
También tienes la opción de bajarte algunas extensiones de Dreamweaver como:
- Collapsible Menu.
- Jump Menu Magic Pack by PVII
- MFX_SlideMenu
- Menu Magic 1 by PVII
Y más...
Todas ellas se pueden descargar de la zona de extensiones de Dreamweaver aquí:
http://www.macromedia.com/exchange/
Necesitarás una Macromedia ID para descargatelas, eso es gratuito y no necesitas comprar nada. Solo es darte de alta.
Ya es la tercera vez que intento responder a esta pregunta, las anteriores me echaba para atrás, me hacia volver a introducir user y pass, y por lo tanto perdía mi respuesta.
----------------
Bien, pasemos al tema.
En cierto sentido voy a decir como hacíamos esto en Dreamweaver 3, hace algo más de dos años, cuando no estaban disponibles las extensiones de Dreamweaver.
Necesitaremos lo siguiente:
- Dreamweaver
- 1 gif transparente de 5 por 5 pixeles ( podría ser de 1X1 incluso).
- Botón gráfico que activa el menu y botones del menu desplegable, si quieres hacerlo con gráficos.
El gif transparente se puede hacer en Fireworks haciendo un documento de 5 X 5 y exportandolo directamente como gif de tranparencia alfa. Sin nada más que el lienzo. Llamaremos este gráfico transparente.gif .
Sigamos, el método consiste en dos capas dos de ellas ocultas. Una contiene el gif transparente y la otra el submenú.
1.- Inserta tu botón en dreamweaver.
2. - Creas una nueva capa a la que llamaremos menu.
3.- En esta capa vamos a insertar el menu desplegable. Este menu lo puedes hacer con gráficos o con texto, dentro de tablas de 1 columna y varias filas. Tantas filas como vaya a tener el menu desplegable.
4.- Ahora cogemos esa capa y la colocamos en el lugar exacto donde vaya a aparecer, debe de ser lo más cerca posible del botón. En el inspector de propiedades le indicamos que será una capa oculta ( Vis= hidden).
5.- Ahora vamos a crear una capa que llamaremos control. Recuerda que el nombre se lo das a la izquierda del inspector de propiedades, en el campo de texto donde suele poner Layer1, Layer2, etc...
6.- En esta capa llamada control, vamos a aumentar de tamaño de manera que quede rodeando completamente a la capa del menu desplegable. Imaginate que el menu desplegable es una isla y la capa control es el mar que la rodea.
7.- Inserta dentro de la capa control el gif transparente, y aumenta el tamaño del gif de manera que tenga el mismo tamaño que la capa control que lo contiene.
8.- Ahora abrirás un panel que es el panel de capas en Menu Ventana>Capas. Arrastra la capa control debajo de la capa menu.
9. - Ya tenemos hecho lo principal. Ahora selecciona tu botón y abre el panel de comportamientos.
10. - Con tu botón seleccionado, pulsa el botón + del panel de comportamientos.
11. - Seleccionas el comportamiento Mostrar y Ocultar capas.
12. - En este cuadro de dialogo que aparecerá, señalas la capa menú y pulsas el botón de Mostrar. Lo mismo haces con la capa control.
13. En el panel de comportamientos asegurate de haber puesto el evento deseado puedes dejar el OnMouseOver. Mira los eventos, están a la izquierda en el panel de comportamientos cuando añades una acción y cuando pulsas sobre ellos te sale una lista
14,- Ahora seleccionamos el gráfico transparente de la capa. Vamos a hacer lo mismo, insertarle un comportamiento esta vez para que sea ONMouseOver.
15.- Añades el comportamiento al gráfico transparente de Mostrar y Ocultar capas y esta vez las ocultas todas.
16.- Para finalizar activa selecciona la capa control y en el inspector de propiedades la pones como oculta ( Vis=hidden ).
Ya esta listo tu menu.
La capa control es una capa que capta cuando el usuario sale del menu y entonces oculta todas las capas entre entre ellas las del propio menu.
Este es el planteamiento general. Puedes hacer modificaciones, si metes más botones y más menús entonces la capa control debe rodear a todos los menús y botones .
Puedes meter los botones en otra capa siempre visible, pero esta debe de estar por encima de la capa control siempre. Recuerda que eso lo haces en el panel de comportamientos ( Behaviors en ingles ).
También tienes la opción de bajarte algunas extensiones de Dreamweaver como:
- Collapsible Menu.
- Jump Menu Magic Pack by PVII
- MFX_SlideMenu
- Menu Magic 1 by PVII
Y más...
Todas ellas se pueden descargar de la zona de extensiones de Dreamweaver aquí:
http://www.macromedia.com/exchange/
Necesitarás una Macromedia ID para descargatelas, eso es gratuito y no necesitas comprar nada. Solo es darte de alta.
