• Anuncio

Tutorial menu desplegable en Dreamweaver

Tutoriales, manuales y ayuda con HTML

Tutorial menu desplegable en Dreamweaver

Notapor Jakk » 31 Ene 2010, 06:48

Paso 1: Creando una tabla para las casillas

Lo primero que necesitamos es una tabla donde estén encapsuladas, por decirlo de una manera, todas las casillas o secciones de nuestro menú.

Haz clic en la herramienta Tabla de la pestaña Común en la sección de Insertar.
Imagen
*También puedes hacer clic en INSERTAR>>TABLA o tecleando CTRL +ALT+T

En la pantalla que te aparece a continuación coloca en la casilla Columnas cuantas secciones tenga tu menú principal (no el emergente), voy a colocar 5 columnas para cinco secciones, el resto modifícalo como en la imagen.
Imagen
Lo que necesitamos hacer ahora es darle un ancho y un alto a cada celda para que almacene nuestras imágenes del menú.

Para hacerlo haz clic dentro de la primera columna y en la sección de Propiedades (CTRL+F3), configura el ancho y el alto de la primera celda. Cada celda mía va a tener 100px de ancho y 20 de alto.
Imagen
Repite el paso anterior con cada celda de tu menú, hasta que veas en la sección de diseño algo como lo que muestro
Imagen

Paso 2: Insertar capas dentro de celdas
Vamos ahora a insertar una capa dentro de cada celda, no importa el tamaño, en este primer caso lo que nos importa es que el código de la capa quede dentro de la primera celda.

Selecciona Insertar>>Objeto de diseño>>Capa
Imagen
Arrastra la capa que creaste hasta la primera celda, para asegurarte que está dentro de la celda ve a la pestaña Código y verifica que tengas algo como esto:
Imagen
Teniendo seleccionada la capa, ve nuevamente a las Propiedades (CTRL+F3) y configúrala de la siguiente manera:
Imagen
Importante que las casillas Iz y Sup estén vacías, así como An y Al correspondan al ancho y alto de la celda respectivamente.

Repite este paso hasta que insertes capas en el resto de las celdas, recuerda que por seguridad verifica el código para asegurarte que estén insertadas dentro de las celdas.

Hasta ahora tu código se debe ver algo así:
Imagen
Y en la pestaña diseño debes ver algo como esto:
Imagen
*Obvia los espacios superiores que se ven entre las celdas y las capas puesto que se eliminan en la vista desde el explorador.

Paso 3: Insertando las capas que van a ser desplegadas
Lo que necesitamos ahora es crear las capas que van a contener las secciones que serán desplegadas al pasar el mouse sobre la primera celda.

Crea una nueva capa (Insertar>>Objeto de diseño>>Capa) y dibújala debajo de la primera celda que creaste, nuevamente no importa el tamaño ni la colocación exacta que tenga la misma.

Presiona F2 y va a salir una sección llamada Capas. La última capa que creaste debe ser “Layer6″, selecciona y dejando la tecla CTRL presionada, colócala sobre “Layer 1“, debes tener algo como esto:
Imagen
Mientras tienes seleccionado tu “Layer 6” modifica sus propiedades (CTRL+F3) de la siguiente manera:
Imagen
*Importante que Iz este vacío, que Sup contenta el valor del alto de tu celda principal, que An contenga el ancho de tu celda principal y que Al contenga el número de celdas que se van a expandir multiplicado por el valor del alto de tu menú principal, en este caso, voy a hacer que se desplieguen dos secciones, y sería 2 celdas x 20px= 40px. Si en el tuyo se despliegan 6 secciones, sería: 6 celdas x 20px= 120px.

Repite el paso 3 hasta que tengas todas las secciones que van a ser desplegadas, tu pestaña de capas se debe ver así:
Imagen
Y tu sección de diseño se debe ver así:
Imagen

Paso 4: Insertando tablas dentro de las secciones desplegables
Lo que necesitamos hacer ahora es insertar tantas tablas como configuramos el alto de las capas, recuerden que dentro de la primera capa lo configuramos para 2 secciones, entonces insertamos una tabla dentro de la capa desplegable 1, configurándola de la siguiente forma.
Imagen
Seleccionamos en la primera celda que insertamos y en la pestaña propiedades (CTRL+F3) la vamos a configurar de la siguiente forma:
Imagen
Hacemos lo mismo con la segunda celda.

Insertamos el resto de las tablas en las siguientes capas desplegables, dándoles la misma propiedad que coloque anteriormente, nuestro diseño nos quedaría así:
Imagen

Paso 5: Insertando el contenido de las secciones
Lo que falta ahora es colocar el nombre de las secciones para que lo usuarios sepan cual va a ser cada sección del menu, pueden hacerlo con imágenes o con texto.

Yo lo voy a hacer con una imagen para todas las secciones, puedes crear tantas como necesites, aquí mi imagen:
Imagen
Voy a insertar esta imagen para todas las secciones, así debería quedar mi espacio de diseño.
Imagen

Paso 6: Ocultando capas desplegables
Ahora debemos ocultar las capas que van a se desplegadas, para eso selecciona la primera desplegable (Asegúrate que esta seleccionado el borde azul) y en las propiedades coloca lo siguiente:
Imagen
Al hacer eso, la capa desplegable 1 debió desaparecer de tu espacio de diseño. Has lo mismo con las otras 4 secciones desplegables de manera que tu espacio de diseño quede así:
Imagen

Paso 7: Añadiendo links a las imagenes principales
Selecciona la primera imagen del menú y en el espacio de las propiedades añade en la sección vínculos un numeral “#” que representa un link blanco (No re direcciona a ninguna página).
Imagen
*Haz lo mismo con las otras 4 secciones del menú

Paso 8: Añadiendo los comportamientos
Lo que debemos hacer ahora es agregar los comportamientos que muestren u oculten las capas desplegables.

Selecciona la primera imagen del menú y en la parte de abajo de tu diseño vas a tener una ruta que indica que sección HTML estas seleccionando, haz clic en <a>.
Imagen
Haz clic en Ventana>>Comportamientos para abrir la pestaña de comportamientos.
Imagen
Haz clic en el botón + de la pestaña de comportamientos y selecciona Mostrar/Ocultar capas
Imagen
Lo que debes hacer ahora es configurar el recuadro que se abre de la siguiente manera

Capa “Layer1″

Capa “Layer6″ en capa “Layer1″ (Mostrar)

Capa “Layer 2″

Capa “Layer7″ en capa “Layer2″ (Ocultar)

Capa “Layer 3″

Capa “Layer8″ en capa “Layer3″ (Ocultar)

Capa “Layer 4″

Capa “Layer9″ en capa “Layer4″ (Ocultar)

Capa “Layer 5″

Capa “Layer10″ en capa “Layer5″ (Ocultar)

*Lo que estamos haciendo es mostrando la capa correspondiente al primer link y ocultando el resto.

En la pestaña comportamientos debes tener una nueva línea de comportamiento, selecciona donde dice <A> onClick y cámbialo a <A> onMouseOver.
Imagen
Selecciona la segunda imagen y donde esta la ruta HTML selecciona la etiqueta <a>, ve a Comportamientos>>+>>Mostrar/Ocultar Capas y configúralo así:

Capa “Layer1″

Capa “Layer6″ en capa “Layer1″ (Ocultar)

Capa “Layer 2″

Capa “Layer7″ en capa “Layer2″ (Mostrar)

Capa “Layer 3″

Capa “Layer8″ en capa “Layer3″ (Ocultar)

Capa “Layer 4″

Capa “Layer9″ en capa “Layer4″ (Ocultar)

Capa “Layer 5″

Capa “Layer10″ en capa “Layer5″ (Ocultar)

En la pestaña comportamientos debes tener una nueva línea de comportamiento, selecciona donde dice <A> onClick y cámbialo a <A> onMouseOver.

Haz lo mismo con las capas desplegables 3, 4 y 5, Mostrando y ocultando según sea el caso.

Paso 9: Ocultando las capas despues de abiertas
Hasta ahora las capas no se van a cerrar a menos que pases tu mouse sobre otra sección del menú, para permitir que se cierren con un click vamos a hacer lo siguiente:

En la ruta de dirección HTML selecciona la etiqueta <body>
Imagen
Ve a la sección Comportamientos>>+>>Mostrar/Ocultar Capas y modifícalo de la siguiente manera:

Capa “Layer1″

Capa “Layer6″ en capa “Layer1″ (Ocultar)

Capa “Layer 2″

Capa “Layer7″ en capa “Layer2″ (Ocultar)

Capa “Layer 3″

Capa “Layer8″ en capa “Layer3″ (Ocultar)

Capa “Layer 4″

Capa “Layer9″ en capa “Layer4″ (Ocultar)

Capa “Layer 5″

Capa “Layer10″ en capa “Layer5″ (Ocultar)

En la pestaña comportamientos debes tener una nueva línea de comportamiento, selecciona donde dice onLoad y cámbialo a onClick.
Imagen

Paso 10: Modificaciones
Si necesitas hacer modificaciones al menú desplegable, como por ejemplo, añadir links a las secciones, ve a la pestaña Capas (F2) y haz clic en el ojo que tienen los “Layers” para Mostrar/Ocultar las capas.
Imagen
*Recuerda que al finalizar las modificaciones, deben estar todas las sub-capas ocultas

Vamos ahora a quitar un molesto borde punteado que sale al hacer clic sobre las secciones del menú. Para eso ve a la pestaña Código y sube hasta donde está el css y agrega lo siguiente:
Imagen


Autor: Mijael166
Fuente: http://www.skyandstars.net/menu-despleg ... eamweaver/
SI QUEREIS DIVERTIROS,HACER AMIGOS,JUGAR ONLINE...ENTRAR EN http://www.mundoforeros.com OS ESPERAMOS!!!
Avatar de Usuario
Jakk
Administrador
Administrador
 
Mensajes: 1160
Registrado: 17 Ago 2009, 17:28

Anuncio

Re: Tutorial menu desplegable en Dreamweaver

Notapor engendro666 » 08 May 2010, 06:44

buen tutorial, yo uso extensiones de dreamweaver para hacer estos menues pero de todos modos lo voy a probar ya que manualmente (segun veo en el tuto) puedo usar a mi gusto los atributos OnClick, etc y justamente ahora estoy quemandome un poco con un menu de la extension que no me deja cambiar estos atributos.
Avatar de Usuario
engendro666
Miembro VIP
Miembro VIP
 
Mensajes: 6
Registrado: 07 Mar 2010, 17:24

Re: Tutorial menu desplegable en Dreamweaver

Notapor johnny patino » 30 Jul 2011, 23:49

Este tutorial resolvió un problema que tuve por muchos dias con los menús de Dreamweaver CS5, son mas faciles de aplicar que el spry "Menú desplegable" con el cual tuve un problema al tener 2 menus en una misma pagina, me resultaba muy complicado tratar de que tengan estilos diferentes ya que dreamweaver los uniformiza para todos igualmente. Estoy muy agradecido por este aporte.

Saludos
Avatar de Usuario
johnny patino
Recien llegado
Recien llegado
 
Mensajes: 1
Registrado: 30 Jul 2011, 23:45


Volver a HTML

 


  • Temas Relacionados
    Respuestas
    Vistas
    Último mensaje

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 0 invitados

  • Anuncio