Cómo hacer menús desplegables creativos en Dreamweaver

miércoles, 13 de agosto de 2014

Tal menú desplegable recibe la denominación por la forma en que se desempeña. Cuando el usuario mueve su cursor sobre el elemento del mismo, aparecerá un submenú de opciones .Al submenú se lo nombra "desplegable". Los mismos pueden tener submenús desplegables que, a su vez, pueden tener otros submenús desplegables. En Adobe Dreamweaver, el programa líder en páginas y desarrollo web, puedes crear menús desplegables con la barra de menús Spry incorporada a tal programa.





Instrucciones

Insertar un menú desplegable en una página web

  1. Abre una página HTML  en Dreamweaver en la que desees inventar tu menú desplegable. 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 haces clic en "Crear".
 

2.       Haz clic en el área de la página web donde desees inventar tu  menú desplegable para insertar el cursor. Si se trata de una nueva página, Dreamweaver te pedirá que lo guardes. Haz clic en "Aceptar". Esto muestra el cuadro de diálogo Guardar como. Ponle un nombre que desees  y guarda la página. Se mostrará el cuadro de diálogo de la barra de menús Spry.



3.       Oprima 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 la apariencia del menú desplegable

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

2.       Ve hacia el panel de Propiedades, situado en la parte inferior de la ventana de documento, y haz clic en "Editar regla". Esto abriría  el cuadro de diálogo Definición de regla CSS. Utiliza tal cuadro de diálogo para cambiar el tipo de letra, de  fondo, de forma de caja, borde y muchas otras opciones del elemento de menú.

3.       Selecciona la propiedad color de fuente, color de fondo, estilo de borde de la caja y así sucesivamente cual tal  desees cambiar en la lista del lado izquierdo del cuadro de diálogo.

4.       Arrastra el cursor y haz clic en "Aplicar" para aplicar el cambio. Sigue este paso para realizar cambios de aspecto adicionales y haz clic en "Aceptar" cuando hayas terminado de realizarlos.



No hay comentarios.:

Publicar un comentario