Cómo hacer menús desplegables creativos en Dreamweaver
Justin Sullivan/Getty Images News/Getty Images
Un menú desplegable recibe su nombre por la forma en que se comporta. Cuando un usuario desplaza su cursor del ratón sobre un elemento del mismo, un submenú de opciones "sale despedido". Al submenú se lo denomina "desplegable". Los mismos pueden tener submenúes desplegables que, a su vez, pueden tener otros submenúes desplegables. En Adobe Dreamweaver, un programa líder en páginas web y desarrollo web, puedes crear menús desplegables con la barra de menús Spry incorporada al programa.
Insertar un menú desplegable en una página web
Step 1
Abre una página HTML existente en Dreamweaver en la que desees crear un menú desplegable o iniciar uno nuevo. Haz clic en el menú "Archivo" y selecciona "Nuevo". Esto abrirá el cuadro de diálogo de Nuevo documento. Elige el tipo de página y diseño que desees y haz clic en "Crear".
Step 2
Haz clic en el área de la página web donde desees crear un menú desplegable para insertar el cursor. Si se trata de una nueva página, Dreamweaver te pedirá que guardes la misma. Haz clic en "Aceptar". Esto muestra el cuadro de diálogo Guardar como. Ponle un nombre y guarda la página. Se mostrará el cuadro de diálogo de la barra de menús Spry.
Step 3
Selecciona el botón de Radio junto a "Vertical" y haz clic en "Aceptar". Dreamweaver insertará un menú desplegable vertical en la página web.
Cambiar las etiquetas de menú desplegable
Step 1
Selecciona el texto de la etiqueta del menú ("Artículo 1" "Artículo 2" y así sucesivamente) y escribe la nueva etiqueta. Este paso permite cambiar las etiquetas de menú de nivel superior. Puedes cambiar las etiquetas de submenú editando el código.
Step 2
Haz clic en el botón "Dividir" en la esquina superior izquierda, debajo de la barra de menú. Esto coloca a Dreamweaver en modo de edición de código, lo que te permitirá editar el código HTML. Las etiquetas de elemento de submenú se encuentran en listas HTML sin ordenar. Antes de cambiar las etiquetas de menú, el código lee como sigue:
- Item 1
Step 3
Selecciona la etiqueta que desees cambiar (como "Artículo 1.1", o "Artículo 1.2") y escribe la nueva etiqueta. Los elementos de submenú asociados con los de menú de nivel superior están etiquetados para corresponderse con el menú de nivel superior. Por ejemplo, las etiquetas de submenú para el Artículo 2 del menú principal están etiquetadas como "Artículo 2.1", "Artículo 2.2" y así sucesivamente.
Cambiar la apariencia del menú desplegable
Step 1
Haz clic en el elemento de menú que desees cambiar para insertar el cursor.
Step 2
Ve al panel Propiedades, situado debajo de la ventana de documento, y haz clic en "Editar regla". Esto abrirá el cuadro de diálogo Definición de regla CSS. Utiliza este cuadro de diálogo para cambiar el tipo de letra, fondo, forma de caja, borde y muchas otras opciones del elemento de menú.
Step 3
Selecciona la propiedad (color de fuente, color de fondo, estilo de borde de la caja y así sucesivamente) que desees cambiar en la lista del lado izquierdo del cuadro de diálogo. Por ejemplo, si deseas cambiar el estilo de fuente y tamaño, haz clic en "Tipo" en la lista Categoría. Esta muestra opciones para cambiar las propiedades de fuente.
Step 4
Haz clic en "Aplicar" para aplicar el cambio. Sigue este procedimiento para realizar cambios de aspecto adicionales y haz clic en "Aceptar" cuando hayas terminado de realizarlos.
Referencias
Consejos
- Puedes añadir y eliminar elementos de menú mediante la adición de elementos de lista a listas sin ordenar. Si deseas agregar un elemento al submenú artículo 2, por ejemplo, edita esa lista. De forma predeterminada, la lista se ve así:
- <li><a class="MenuBarItemSubmenu" href="#">artículo 2.1</a>
- <ul>
- <li><a href="#"> artículo 2.1.1</a></li>
- <li><a href="#"> artículo 2.1.2</a></li>
- </ul>
- </li>
- Para añadir otro elemento, simplemente inserta otro elemento de la lista, así:
- <li><a class="MenuBarItemSubmenu" href="#"> artículo 2.1</a>
- <ul>
- <li><a href="#"> artículo 2.1.1</a></li>
- <li><a href="#"> artículo 2.1.2</a></li>
- <li><a href="#"> artículo 2.1.3</a></li>
- </ul>
- </li>
- Para vincular los elementos de menú a las URL, sustituye el signo de libra (#) entre las comillas con la URL deseada, de esta manera: <li><a href="http://misitioweb.com/mipagina.html"> artículo 3.1.2</a></li>.
Sobre el autor
A writer for more than 20 years, William Harrel has authored 19 books, including two titles in the "For Dummies" series. He has also contributed articles to magazines such as "Computer Shopper," "PC World," "Home Office Computing," "Windows Magazine," "MacWorld," "Compute!" and many others.
Créditos fotográficos
Justin Sullivan/Getty Images News/Getty Images