Este es un gran truco de CSS para convertir una lista con viñetas en una barra de navegación en Dreamweaver con un simple efecto de»rollover». El uso de una lista con viñetas para las barras de navegación es una convención bien aceptada por los sitios web que cumplen con los estándares de accesibilidad actuales.
Los mismos enlaces todavía están contenidos en la lista desordenada, pero la aplicación de los estilos cambia su apariencia dramáticamente.
Para crear una barra de navegación utilizando CSS para redefinir la lista desordenada y las etiquetas de enlace, siga estos pasos:
Haga clic para colocar el cursor donde desea crear la barra de navegación en la página.
Para formatear los enlaces como una lista no ordenada, separe cada línea de texto que desee enlazar con una etiqueta <p>.
Cree vínculos seleccionando cada fragmento de texto por separado, haciendo clic en el icono Hipervínculo del panel Insertar común y, a continuación, seleccionando la página a la que desea enlazar o introduciendo una URL.
Arrastre para seleccionar el conjunto completo de enlaces y, a continuación, haga clic en el icono Lista no ordenada del inspector de propiedades. Si algún enlace no se activa con una viñeta separada, haga clic para eliminar el espacio entre éste y el enlace anterior y, a continuación, pulse Intro o Intro para separar los enlaces con un retorno de párrafo.
Para añadir una etiqueta <div> alrededor de una lista de enlaces (o cualquier otro contenido que ya esté en una página), seleccione el contenido y haga clic en el icono Div en el panel Insertar Común.
Para un control más preciso sobre dónde añadir una nueva etiqueta <div>, puede elegir las opciones de la lista desplegable Insertar en la parte superior del cuadro de diálogo Insertar Div.
Introduzca un nombre en el campo Clase o en el campo ID. Una etiqueta <div> con el nombre de clase o ID que ha introducido se añade automáticamente a la página que rodea la lista de enlaces.
En la parte inferior del cuadro de diálogo Insertar Div, haga clic en el botón Nueva regla CSS El nuevo nombre de la regla CSS se añade a la lista de nombres de estilo en el panel de selectores de CSS Designer.
El formato de estilo se aplica automáticamente al contenido de la etiqueta <div> porque aplicó el estilo tal como lo creó en los pasos 5-7.
Para crear un estilo compuesto que formatee la lista desordenada sólo cuando se utilice en la barra de navegación, cree un estilo compuesto que incluya el nombre de clase .navbar: En el campo Nombre del selector, asegúrese de que Dreamweaver haya introducido automáticamente .navbar ul como el nombre de un nuevo estilo en el panel de selectores.
Cree un estilo compuesto para redefinir las etiquetas de los elementos de la lista: coloque el cursor en cualquier lugar de la lista con viñetas, haga clic en el signo más en la parte superior del panel de selectores, en el campo Nombre del selector, asegúrese de que Dreamweaver introdujo automáticamente.navbar ul li como el nombre de un nuevo estilo en el panel de selectores, en el panel Propiedades, establezca la opción Mostrar en línea, cambie el tipo de estilo de la lista a Ninguno y elimine la viñeta, y establezca los márgenes izquierdo y derecho a 20 píxeles. Puede cambiar la configuración para crear la cantidad de espacio entre los enlaces que mejor se adapte a su diseño.
Cree un estilo para redefinir la etiqueta de enlace: Haga clic para colocar el cursor dentro de un enlace en la barra de navegación, haga clic en el signo más en la parte superior del panel de selectores, si desea cambiar el nombre del estilo, haga doble clic en el nombre en el panel de selectores e introduzca el nombre que desee utilizar.En la sección Texto, elige un color del color para especificar el color de los enlaces cuando se cargan en una página.
Cree un nuevo estilo para redefinir la etiqueta hover-link de modo que el color del enlace cambie cuando un usuario pasa el cursor por encima del enlace: haga clic en el signo más en la parte superior del panel de selectores. en el campo Nombre del selector, introduzca .navbar a:hover. en la sección Texto del panel Propiedades, establezca Text-Decoration en Ninguno. aún en la sección Texto, seleccione un color del color para especificar el color del enlace cuando los usuarios pasen el cursor por encima del enlace.
Cree un nuevo estilo para redefinir la etiqueta de enlace visitado de modo que el color del enlace cambie después de que el usuario haga clic en un enlace: haga clic en el signo más en la parte superior del panel de selectores En el campo Nombre del selector, introduzca .navbar a:visitado En la sección Texto del panel Propiedades, establezca Decoración de texto en Ninguno.
Haga clic en el botón En vivo en la parte superior del espacio de trabajo o haga clic en el botón Vista previa para ver la página en un navegador y ver el efecto de los estilos de enlace.
