Vida

Cómo hacer creativos menús desplegables en Dreamweaver

Escrito por william harrel | Traducido por analia moranchel
Cómo hacer creativos menús desplegables en Dreamweaver

Crear menús desplegables con Dreamweaver.

Justin Sullivan/Getty Images News/Getty Images

Un menú desplegable recibe su nombre de 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". El submenú se lo denomina "desplegable". Los mismos pueden tener submenúes desplegables y que a su vez pueden tener otros submenúes desplegables. En Adobe Dreamweaver, una página principal y programa de desarrollo de web, puedes crear menús desplegables con la barra de menús Spry incorporada al programa.

Nivel de dificultad:
Moderada

Otras personas están leyendo

Necesitarás

  • Adobe Dreamweaver CS4 o posterior

Lista completaMinimizar

Instrucciones

    Insertar un menú desplegable en una página web

  1. 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".

  2. 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 t 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.

  3. 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

  1. 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.

  2. 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: <ul id="MenuBar1" class="MenuBarVertical"> <li><a class="MenuBarItemSubmenu" href="#">Item 1</a> <ul> <li><a href="#"> artículo 1.1</a></li> <li><a href="#"> artículo 1.2</a></li> <li><a href="#"> artículo 1.3</a></li> </ul> </li>

  3. 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 corresponder con el menú de nivel superior. Por ejemplo, las etiquetas de submenú para el Artículo 2 del menú principal están etiquetadas "Artículo 2.1", "Artículo 2.2" y así sucesivamente.

    Cambiar la apariencia del menú desplegable

  1. 1

    Haz clic en el elemento de menú que desees cambiar para insertar el cursor.

  2. 2

    Ve al panel de Propiedades, situado debajo de la ventana de documento, y haa 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ú.

  3. 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. Esto muestra opciones para cambiar las propiedades de fuente.

  4. 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 realizar cambios.

Consejos y advertencias

  • 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í:
  • artículo 2.1
  • artículo 2.1.1
  • artículo 2.1.2
  • Para añadir otro elemento, simplemente inserta otro elemento de la lista, así:
  • artículo 2.1
  • artículo 2.1.1
  • artículo 2.1.2
  • artículo 2.1.3
  • Para vincular los elementos de menú a las URL, sustituye el signo de libra (#) entre las comillas con la URL deseada, de esta manera: artículo 3.1.2.

Más galerías de fotos

comentarios

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles

Copyright © 1999-2014 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media