Creación de Un Menú Desplegable en Dreamweaver
-
Upload
luis-e-molina-bustamante -
Category
Documents
-
view
217 -
download
0
Transcript of Creación de Un Menú Desplegable en Dreamweaver
-
8/18/2019 Creación de Un Menú Desplegable en Dreamweaver
1/20
Por David Marín
15 de noviembre de 2002 62 Comentar ios DHTML, Dreamweaver
Explicación detallada sobre la creación de un m enú desplegable en
Dreamweaver, en el que poniendo el ratón en las diferentes opciones se
muestran unas capas con opciones secundar ias.
Muchas veces, nuestras páginas tienen tantos contenido
que si quisiéramos que apareciesen todos estos en un
determinado lugar de nuestra página, en un menú, este
abarcaría casi la totalidad del espacio que tenemos para
nuestra web. En estos casos es muy út il insertar uno o
varios de estos menús desplegables, apareciendo por
encima del propio contenido de la página para mostrar
todas sus partes y desapareciendo posteriormente.
A lo largo de este art ículo vamos a desarrollar la forma d
crear uno de estos menús con DreamWeaver de una
manera genérica para que cada uno lo amplíe a su gusto.
En prim er lugar, tenemos que saber que este menú está construido casi en su totalidad por capas, a
las cuales les atribuiremos unos comportamientos especíÚcos para que aparezcan y desaparezcan a
nuestro gusto.
Otra cosa que debemos tener en cuenta es la cond ición de capa absoluta o capa relativa, ya que a la
capas absolutas se les tiene que dar unas coordenadas de posicionamiento a raíz de la esqu ina
superior izquierda de nuestra web, coordenadas que no nos sirven para nada en el caso de que
nuestra página tenga los contenidos centrados, ya que la posición en la que va a aparecer esta,
dependerá de la conÚguración del monitor desde el que se visualice dicha página.
ión de un menú desplegable en Dreamweaver http://www.desarrolloweb.com/articulo
20 22-04-20
-
8/18/2019 Creación de Un Menú Desplegable en Dreamweaver
2/20
El pr imer 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ú
pr incipal compuesto por 5 partes en posición horizontal, para lo cual crearemos una tabla con 5
celdas y les daremos a cada una de ellas un determinado el tamaño de píxel, en nuestro caso 100px
20px. A cont inuación haremos clic en el icono de capa y dibujaremos una en cualquier lado,seguidamente arrastraremos el símbolo de capa (que determina el lugar donde el programa
introducirá la línea de código HTML, que por defecto creará dentro de la etiqueta "Body") dentro un
de las celdas de la tabla que hemos generado y a cont inuación modiÚcaremos en la ventana
pr opiedades, los campos "Iz" (izqu ierda) y "Sup" (superior ) dejándolos en b lanco, al hacer esto el
pr ograma engancha la capa en la esquina superior izqu ierda del recipiente en el que se encuentra,
en este caso, la celda en la que hemos introducido la capa. Después daremos un valor a los campos
de "An" (ancho) y "Al" (alto) En el ejemplo que estamos creando serán 100px y 20px respectivament
este paso lo tenemos que repetir para cada una de las 5 celdas (en nuestro caso), de las que secompone nuestro menú pr incipal.
Una vez terminado con este paso procederemos a crear otras capas dentr o de las que ya hemos
establecido, a estas capas tendremos que darles unos valores de tamaño dependiendo de las
distintas partes que queramos introducir dependientes de cada menú (nosotros daremos 100px -
80px en el pr imer desplegable, 100px - 140px en el segundo, 100px - 100px en el tercero, 100px -
80px en el cuarto y 100px - 140px en el quin to). Para colocar una capa dentr o de otra podemos
hacerlo: 1º, arrastrando como hemos hecho anterior mente esta nueva capa dentro de la anterior , o2º, presionando la tecla F2 nos aparecerá la ventana "capas" donde podremos ver un esquema de la
capas que tenemos en nuestra web, cogiendo una de las capas que aparecen y arrastrándola encim
de otra mientras que presionamos la tecla "ctr l", introduciremos la capa arr astrada dentro de la que
hayamos seleccionado.
Estas subcapas que hemos creado, que dependen de las pr incipales, por defecto tienen la propieda
"default" que deja la capa visible en todo momento y nos viene bien para trabajar, pero antes de
darles un compor tamiento a estas, cuando tengamos terminado por completo la estructura de
nuestro menú, deberemos cambiar este tr ibu to "default " de las capas secundarias (las que se
encuentran dentro de las 5 capas pr incipales) por "h idden", que las hace invisibles, dándonos la
posibilidad de trabajar con los compor tamientos haciéndolas aparecer y desaparecer a nuestro
gusto.
Dentro de estas capas secundarias int roduciremos tablas con el numero de celdas que hayamos
calculado con el tamaño de cada capa. Una vez hecho esto en todas las capas deber íamos colocar la
imágenes o las palabras de nuestro menú para poder conÚgurar los compor tamientos, ya que si no
ión de un menú desplegable en Dreamweaver http://www.desarrolloweb.com/articulo
20 22-04-20
-
8/18/2019 Creación de Un Menú Desplegable en Dreamweaver
3/20
imágenes o las palabras de nuestro menú para poder conÚgurar los compor tamientos, ya que si no
colocamos nada dentro de las capas, estas no se verán cuando aparecen o desaparecen por ser
transparentes. Otra solución es darles un color de fondo.
El últim o 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 compor tamientos de "mostrar u ocultar capa" debemos trabajacon un vinculo (estos vínculos serán las imágenes que hemos colocado dentro de las celdas y en su
defecto las palabras, para hacer este vinculo introduciremos en el espacio reservado para los vínculo
de la ventana propiedades el símbolo "#" creando así un vínculo en blanco, a cont inuación
pr esionaremos el vinculo creado (en la parte inferior de la página pr incipal aparecerá el símbolo de
vínculo "" en negrita) después iremos a la ventana compor tamiento y pr esionaremos el símbolo
"+" y pincharemos en "Mostrar - Ocultar capas" y nos aparecerá una ventana con un listado de toda
las capas que tenemos creadas, lo que tenemos que hacer es pr esionar la capa que se tendría que
desplegar cuando pasásemos el ratón por encima del vinculo que estamos modiÚcando y apretar elbotón "Mostrar" y las demás capas pincharlas y ocultarlas de la misma forma que hemos hecho ante
pero en este caso apretando el botón de "Ocultar".
Este paso lo repetiremos para cada una de los cinco vínculos pr incipales de los que se nos
desplegarán los correspondientes submenús.
ión de un menú desplegable en Dreamweaver http://www.desarrolloweb.com/articulo
20 22-04-20
-
8/18/2019 Creación de Un Menú Desplegable en Dreamweaver
4/20
ión de un menú desplegable en Dreamweaver http://www.desarrolloweb.com/articulo
20 22-04-20
-
8/18/2019 Creación de Un Menú Desplegable en Dreamweaver
5/20
ión de un menú desplegable en Dreamweaver http://www.desarrolloweb.com/articulo
20 22-04-20
-
8/18/2019 Creación de Un Menú Desplegable en Dreamweaver
6/20
ión de un menú desplegable en Dreamweaver http://www.desarrolloweb.com/articulo
20 22-04-20
-
8/18/2019 Creación de Un Menú Desplegable en Dreamweaver
7/20
ión de un menú desplegable en Dreamweaver http://www.desarrolloweb.com/articulo
20 22-04-20
-
8/18/2019 Creación de Un Menú Desplegable en Dreamweaver
8/20
ión de un menú desplegable en Dreamweaver http://www.desarrolloweb.com/articulo
20 22-04-20
-
8/18/2019 Creación de Un Menú Desplegable en Dreamweaver
9/20
ión de un menú desplegable en Dreamweaver http://www.desarrolloweb.com/articulo
20 22-04-20
-
8/18/2019 Creación de Un Menú Desplegable en Dreamweaver
10/20
ión de un menú desplegable en Dreamweaver http://www.desarrolloweb.com/articulo
20 22-04-20
-
8/18/2019 Creación de Un Menú Desplegable en Dreamweaver
11/20
ión de un menú desplegable en Dreamweaver http://www.desarrolloweb.com/articulo
20 22-04-20
-
8/18/2019 Creación de Un Menú Desplegable en Dreamweaver
12/20
ión de un menú desplegable en Dreamweaver http://www.desarrolloweb.com/articulo
20 22-04-20
-
8/18/2019 Creación de Un Menú Desplegable en Dreamweaver
13/20
ión de un menú desplegable en Dreamweaver http://www.desarrolloweb.com/articulo
20 22-04-20
-
8/18/2019 Creación de Un Menú Desplegable en Dreamweaver
14/20
ión de un menú desplegable en Dreamweaver http://www.desarrolloweb.com/articulo
20 22-04-20
-
8/18/2019 Creación de Un Menú Desplegable en Dreamweaver
15/20
ión de un menú desplegable en Dreamweaver http://www.desarrolloweb.com/articulo
20 22-04-20
-
8/18/2019 Creación de Un Menú Desplegable en Dreamweaver
16/20
ión de un menú desplegable en Dreamweaver http://www.desarrolloweb.com/articulo
20 22-04-20
-
8/18/2019 Creación de Un Menú Desplegable en Dreamweaver
17/20
ión de un menú desplegable en Dreamweaver http://www.desarrolloweb.com/articulo
20 22-04-20
-
8/18/2019 Creación de Un Menú Desplegable en Dreamweaver
18/20
ión de un menú desplegable en Dreamweaver http://www.desarrolloweb.com/articulo
20 22-04-20
-
8/18/2019 Creación de Un Menú Desplegable en Dreamweaver
19/20
ión de un menú desplegable en Dreamweaver http://www.desarrolloweb.com/articulo
20 22-04-20
-
8/18/2019 Creación de Un Menú Desplegable en Dreamweaver
20/20
ión de un menú desplegable en Dreamweaver http://www.desarrolloweb.com/articulo