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

Escrito por william harrel | Traducido por daniela laura arjones
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo crear una barra de navegación en Dreamweaver CS5
Crea una barra de navegación en Dreamweaver. (Getty Images/Getty Images News/Getty Images)

Las barras de navegación son, en efecto, menús. Por lo general, abarcan la parte superior de una página Web en horizontal o en el lado izquierdo en vertical. Dreamweaver, un programa de diseño web líder, ofrece muchas maneras de crear barras de navegación. Uno de los métodos más sencillos y más comunes es usar barras de menús Spry incorporadas en Dreamweaver, que crean automáticamente la barra de navegación para ti. Todo lo que tienes que hacer es agregar las etiquetas y modificar la apariencia de la barra de navegación para satisfacer tus necesidades.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Abre una página HTML de Dreamweaver ya existente en la que deseas agregar una barra de navegación, o iniciar una nueva página: Haz clic en el menú "Archivo" y selecciona "Nuevo" para abrir el cuadro de diálogo Nuevo Documento. Selecciona la opción "HTML" como Tipo de Página y el diseño deseado en la columna Diseño y haz clic en "Aceptar".

  2. 2

    Haz clic en el área de la página donde deseas colocar la barra de navegación para insertar el cursor.

  3. 3

    Haz clic en el menú "Insertar", elige "Spry", y luego selecciona "Barra de Menú Spry" en el menú desplegable. Si se trata de un nuevo documento, Dreamweaver te pide que guardes el archivo. Haz clic en "Aceptar". Esto muestra el cuadro de diálogo Guardar Como. Nombra y guarda el archivo. Esto abre el cuadro de diálogo de Barra de Menú Spry, que ofrece dos opciones: Horizontal y Vertical.

  4. 4

    Elige el tipo de barra de navegación que deseas y luego haz clic en "Aceptar". Dreamweaver inserta la barra de navegación en el documento.

  5. 5

    Ve al panel Propiedades y selecciona "Artículo 1" en la primera columna de los elementos del menú, selecciona el texto en el campo "Texto" y escribe la etiqueta para tu primera opción del menú.

  6. 6

    Selecciona el símbolo numeral (#) en el campo "Enlace" y escribe la dirección URL de tu primer elemento del menú.

  7. 7

    Repite los pasos 4 y 5 para cada elemento del menú. Puedes 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. Puedes agregar elementos de submenú haciendo clic en el signo más (+) situado sobre el submenú, o segunda columna, en el panel Propiedades.

  8. 8

    Haz clic en un cuadro de elemento de menú en la página para insertar el cursor, luego ve al panel Propiedades y haz clic en "Editar regla." Esto abre el cuadro de diálogo de Definición de Reglas CSS. Desde aquí puedes modificar la apariencia de tu menú. Para cambiar la apariencia de las etiquetas de menú, por ejemplo, haz clic en "Tipo" en la lista Categoría. Esto muestra opciones para cambiar el tipo de letra, tamaño de fuente, y el peso de la fuente. Puedes cambiar el aspecto de las cajas de los elementos del menú desde las opciones de fondo, cuadro y borde.

  9. 9

    Realiza los cambios deseados y haga clic en "Aceptar".

  10. 10

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

Consejos y advertencias

  • Puedes agregar elementos de tercer nivel o sub-submenú mediante la adición de etiquetas a la tercera columna en el panel Propiedades. Haz clic en la pequeña caja azul con la etiqueta "Menu Spry barras: MenuBar1" por encima de la barra de navegación para seleccionar el menú entero. Haz clic en el elemento de submenú en la segunda columna del panel Propiedades en la que deseas agregar un elemento de menú de tercer nivel y, a continuación, haz clic en el signo más (+) por encima de la tercera columna. Escribe 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 soporte y archivos gráficos y los guarda en una carpeta denominada Activos Spry. Cuando cargas la página Web en el servidor Web, asegúrate de que también subas la carpeta Activos de Spry. De lo contrario, la barra de navegación no se mostrará correctamente.

No dejes de ver

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