Creacin de un men desplegable en Dreamweaver

http://www.desarrolloweb.com/articulos/968.php

Por David Marn

15 de noviem br e de 2002

62 Com entarios

DHTML, Dr eam weaver

Explicacin det allada sobre la creacin de un m en desplegable en

Dream w eaver, en el que poniendo el rat n en las diferent es opciones se
m uest ran unas capas con opciones secundar ias.
Muchas veces, nuestras pginas tienen tantos contenidos
que si quisiramos que apareciesen todos estos en un
determinado lugar de nuestra pgina, en un men, este
abarcara casi la totalidad del espacio que tenemos para
nuestra web. En estos casos es muy til insertar uno o
varios de estos mens desplegables, apareciendo por
encima del propio contenido de la pgina para mostrar
todas sus partes y desapareciendo posteriormente.
A lo largo de este artculo vamos a desarrollar la forma de
crear uno de estos mens con DreamWeaver de una
manera genrica para que cada uno lo ample a su gusto.
En primer lugar, tenemos que saber que este men est construido casi en su totalidad por capas, a
las cuales les atribuiremos unos comportamientos especcos para que aparezcan y desaparezcan a
nuestro gusto.
Otra cosa que debemos tener en cuenta es la condicin de capa absoluta o capa relativa, ya que a las
capas absolutas se les tiene que dar unas coordenadas de posicionamiento a raz de la esquina
superior izquierda de nuestra web, coordenadas que no nos sirven para nada en el caso de que
nuestra pgina tenga los contenidos centrados, ya que la posicin en la que va a aparecer esta,
depender de la conguracin del monitor desde el que se visualice dicha pgina.

1 de 20

22-04-2016 10:19

Creacin de un men desplegable en Dreamweaver

http://www.desarrolloweb.com/articulos/968.php

El primer paso que tenemos que dar es desarrollar mentalmente un esquema del men que
queremos realizar, o mejor, sobre papel. Nosotros nos hemos decantado por hacer un men
principal compuesto por 5 partes en posicin horizontal, para lo cual crearemos una tabla con 5
celdas y les daremos a cada una de ellas un determinado el tamao de pxel, en nuestro caso 100px 20px. A continuacin haremos clic en el icono de capa y dibujaremos una en cualquier lado,
seguidamente arrastraremos el smbolo de capa (que determina el lugar donde el programa
introducir la lnea de cdigo HTML, que por defecto crear dentro de la etiqueta "Body") dentro una
de las celdas de la tabla que hemos generado y a continuacin modicaremos en la ventana
propiedades, los campos "Iz" (izquierda) y "Sup" (superior) dejndolos en blanco, al hacer esto el
programa engancha la capa en la esquina superior izquierda del recipiente en el que se encuentra,
en este caso, la celda en la que hemos introducido la capa. Despus daremos un valor a los campos
de "An" (ancho) y "Al" (alto) En el ejemplo que estamos creando sern 100px y 20px respectivamente,
este paso lo tenemos que repetir para cada una de las 5 celdas (en nuestro caso), de las que se
compone nuestro men principal.
Una vez terminado con este paso procederemos a crear otras capas dentro de las que ya hemos
establecido, a estas capas tendremos que darles unos valores de tamao dependiendo de las
distintas partes que queramos introducir dependientes de cada men (nosotros daremos 100px 80px en el primer desplegable, 100px - 140px en el segundo, 100px - 100px en el tercero, 100px 80px en el cuarto y 100px - 140px en el quinto). Para colocar una capa dentro de otra podemos
hacerlo: 1, arrastrando como hemos hecho anteriormente esta nueva capa dentro de la anterior, o
2, presionando la tecla F2 nos aparecer la ventana "capas" donde podremos ver un esquema de las
capas que tenemos en nuestra web, cogiendo una de las capas que aparecen y arrastrndola encima
de otra mientras que presionamos la tecla "ctrl", introduciremos la capa arrastrada dentro de la que
hayamos seleccionado.
Estas subcapas que hemos creado, que dependen de las principales, por defecto tienen la propiedad
"default" que deja la capa visible en todo momento y nos viene bien para trabajar, pero antes de
darles un comportamiento a estas, cuando tengamos terminado por completo la estructura de
nuestro men, deberemos cambiar este tributo "default" de las capas secundarias (las que se
encuentran dentro de las 5 capas principales) por "hidden", que las hace invisibles, dndonos la
posibilidad de trabajar con los comportamientos hacindolas aparecer y desaparecer a nuestro
gusto.
Dentro de estas capas secundarias introduciremos tablas con el numero de celdas que hayamos
calculado con el tamao de cada capa. Una vez hecho esto en todas las capas deberamos colocar las
imgenes o las palabras de nuestro men para poder congurar los comportamientos, ya que si no
2 de 20

22-04-2016 10:19

Creacin de un men desplegable en Dreamweaver

http://www.desarrolloweb.com/articulos/968.php

calculado con el tamao de cada capa. Una vez hecho esto en todas las capas deberamos colocar las
imgenes o las palabras de nuestro men para poder congurar los comportamientos, ya que si no
colocamos nada dentro de las capas, estas no se vern cuando aparecen o desaparecen por ser
transparentes. Otra solucin es darles un color de fondo.

El ltimo paso para terminar nuestro men ser dar a cada capa un comportamiento. Para eso
necesitamos la ventana comportamiento que, si no la tenemos ya a la vista, presionando la tecla F3
aparecer. Para poder jugar con los comportamientos de "mostrar u ocultar capa" debemos trabajar
con un vinculo (estos vnculos sern las imgenes que hemos colocado dentro de las celdas y en su
defecto las palabras, para hacer este vinculo introduciremos en el espacio reservado para los vnculos
de la ventana propiedades el smbolo "# " creando as un vnculo en blanco, a continuacin
presionaremos el vinculo creado (en la parte inferior de la pgina principal aparecer el smbolo de
vnculo "<a>" en negrita) despus iremos a la ventana comportamiento y presionaremos el smbolo
"+" y pincharemos en "Mostrar - Ocultar capas" y nos aparecer una ventana con un listado de todas
las capas que tenemos creadas, lo que tenemos que hacer es presionar la capa que se tendra que
desplegar cuando passemos el ratn por encima del vinculo que estamos modicando y apretar el
botn "Mostrar" y las dems capas pincharlas y ocultarlas de la misma forma que hemos hecho antes
pero en este caso apretando el botn de "Ocultar".
Este paso lo repetiremos para cada una de los cinco vnculos principales de los que se nos
desplegarn los correspondientes submens.

3 de 20

22-04-2016 10:19

Creacin de un men desplegable en Dreamweaver

4 de 20

http://www.desarrolloweb.com/articulos/968.php

22-04-2016 10:19

Creacin de un men desplegable en Dreamweaver

5 de 20

http://www.desarrolloweb.com/articulos/968.php

22-04-2016 10:19

Creacin de un men desplegable en Dreamweaver

6 de 20

http://www.desarrolloweb.com/articulos/968.php

22-04-2016 10:19

Creacin de un men desplegable en Dreamweaver

7 de 20

http://www.desarrolloweb.com/articulos/968.php

22-04-2016 10:19

Creacin de un men desplegable en Dreamweaver

8 de 20

http://www.desarrolloweb.com/articulos/968.php

22-04-2016 10:19

Creacin de un men desplegable en Dreamweaver

9 de 20

http://www.desarrolloweb.com/articulos/968.php

22-04-2016 10:19

Creacin de un men desplegable en Dreamweaver

10 de 20

http://www.desarrolloweb.com/articulos/968.php

22-04-2016 10:19

Creacin de un men desplegable en Dreamweaver

11 de 20

http://www.desarrolloweb.com/articulos/968.php

22-04-2016 10:19

Creacin de un men desplegable en Dreamweaver

12 de 20

http://www.desarrolloweb.com/articulos/968.php

22-04-2016 10:19

Creacin de un men desplegable en Dreamweaver

13 de 20

http://www.desarrolloweb.com/articulos/968.php

22-04-2016 10:19

Creacin de un men desplegable en Dreamweaver

14 de 20

http://www.desarrolloweb.com/articulos/968.php

22-04-2016 10:19

Creacin de un men desplegable en Dreamweaver

15 de 20

http://www.desarrolloweb.com/articulos/968.php

22-04-2016 10:19

Creacin de un men desplegable en Dreamweaver

16 de 20

http://www.desarrolloweb.com/articulos/968.php

22-04-2016 10:19

Creacin de un men desplegable en Dreamweaver

17 de 20

http://www.desarrolloweb.com/articulos/968.php

22-04-2016 10:19

Creacin de un men desplegable en Dreamweaver

18 de 20

http://www.desarrolloweb.com/articulos/968.php

22-04-2016 10:19

Creacin de un men desplegable en Dreamweaver

19 de 20

http://www.desarrolloweb.com/articulos/968.php

22-04-2016 10:19

Creacin de un men desplegable en Dreamweaver

20 de 20

http://www.desarrolloweb.com/articulos/968.php

22-04-2016 10:19