Tecnología

Inicio

Cómo crear una barra de navegación en Dreamweaver CS5

Cómo crear una barra de navegación en Dreamweaver CS5


Las barras de navegación son, en efecto, los menús. Típicamente, abarcan la parte superior de una página Web en horizontal o en el lado izquierdo de la página verticalmente. Dreamweaver, un programa cuyo diseño Web, ofrece muchas maneras de crear barras de navegación. Uno de los métodos más sencillos y más comunes es el uso de Dreamweaver barra de menús de Spry incorporados, que crea automáticamente la barra de navegación para usted. Todo lo que tiene que hacer es añadir las etiquetas y modificar la apariencia de la barra de navegación para satisfacer sus necesidades.

Instrucciones

1 Abrir una página HTML de Dreamweaver existente en la que desea agregar una barra de navegación, o iniciar una nueva página: Haga clic en el menú "Archivo" y seleccione "Nuevo" para abrir el cuadro de diálogo Nuevo documento. Seleccione la opción "HTML" como un tipo de página y el diseño deseado en la columna Diseño y haga clic en "Aceptar".

2 Haga clic en el área de la página donde desea colocar la barra de navegación para insertar el cursor.

3 Haga clic en el menú "Insertar", seleccione "Spry," y luego seleccione "Barra de menús de Spry" del menú flotante. Si se trata de un nuevo documento, Dreamweaver le pide que guarde el archivo. Haga clic en Aceptar." Esto muestra el cuadro de diálogo Guardar como. Un nombre y guardar el archivo. Esto abre el cuadro de diálogo Barra de menús de Spry, que ofrece dos opciones: Horizontal y Vertical.

4 Elija el tipo de barra de navegación que desea y luego haga clic en "Aceptar". Dreamweaver inserta la barra de navegación en el documento.

5 Vaya al panel Propiedades y seleccione "Artículo 1" en la primera columna de elementos de menú, seleccionar el texto en el campo "Texto" y escriba la etiqueta para su primer elemento del menú.

6 Seleccione el signo de número (#) en el campo "Enlace" y escriba la dirección URL de su primer elemento del menú.

7 Repita los pasos 4 y 5 para cada elemento del menú. Puede crear elementos de menú adicionales haciendo clic en el signo más (+) situado sobre la columna de la opción de menú en el panel Propiedades. Puede agregar elementos de submenú haciendo clic en el signo más (+) encima del submenú, o segunda columna, en el panel Propiedades.

8 Haga clic en un cuadro de elemento de menú en la página para insertar el cursor, y luego ir al panel de Propiedades y haga clic en "Editar regla." Esto abre el cuadro de diálogo de definición de reglas CSS. Desde aquí se puede editar el aspecto de su menú. Para cambiar el aspecto de las etiquetas de menú ', por ejemplo, haga clic en "Tipo" en la lista Categoría. Esta muestra opciones para cambiar el tipo de letra, tamaño de fuente, y el peso de la fuente. Puede cambiar la apariencia de las cajas de objetos de menú desde el fondo, y las opciones del cuadro de la frontera.

9 Realice los cambios deseados y haga clic en "Aceptar".

10 Haga clic en el menú "Archivo" y selecciona "Guardar" para guardar el archivo.

Consejos y advertencias

  • Puede añadir un tercer nivel, o elementos de sub-submenú mediante la adición de etiquetas a la tercera columna en el panel Propiedades. Haga clic en la pequeña caja azul con la etiqueta "barra de menús de Spry: MenuBar1" por encima de la barra de navegación para seleccionar el menú completo. Haga clic en el elemento de submenú en la segunda columna del panel Propiedades en la que desea añadir un elemento de menú de tercer nivel y, a continuación, haga clic en el signo más (+) por encima de la tercera columna. Escriba la nueva etiqueta de menú en el campo "Texto" y la dirección del nuevo elemento de menú en el campo "Enlace".
  • Al guardar la página Web, Dreamweaver crea varios guiones de apoyo y archivos de gráficos y los guarda en una carpeta denominada Activos Spry. Cuando se carga la página Web en el servidor Web, asegúrese de que también cargar la carpeta Activos Spry. De lo contrario, la barra de navegación no se mostrará correctamente.

Artículos relacionados