Cómo hacer barras de exploración Web

Un método de navegación es un requisito para cualquier sitio web con más de una página. La forma más sencilla de dar a los visitantes el acceso a todas las páginas de su sitio es para insertar etiquetas de anclaje en el código HTML de cada página. Sin embargo, este método puede confundir a los visitantes que esperan encontrar un menú de navegación estándar en lugar de una colección de enlaces aleatorios. La colocación de estos enlaces en un bar es un proceso simple que le da a su sitio un aspecto más profesional y reduce la confusión potencial visitante.

Instrucciones

1 Crear una hoja de estilo para su barra de navegación. En la sección de "cabeza" de su código HTML, escriba:

<Style type = "text / css">

2 Asignar el nombre "nav" al estilo de la barra y definir las características de la barra. En este caso, la barra se extiende por la parte superior de la ventana completa del navegador. Los elementos del menú están impresas en azul sobre un fondo gris claro con bordes de color gris oscuro. elementos de menú individuales se pondrán en rojo cuando el puntero del ratón pasa sobre ellos. Esto se logra con este código:

{nav

width: 100%;
flotador izquierdo;
margin: 0 0 0 3em;
padding: 0;
list-style: none;
background-color: # f2f2f2;
border-bottom: 1px #ccc sólida;
border-top: 1px #ccc sólida; }

li {nav

flotador izquierdo; }

nav li a {

bloqueo de pantalla;
padding: 15px 8 píxeles;
text-decoration: none;
font-weight: bold;
color: # 069;
border-right: #ccc sólido 1px; }

nav li a: hover {

color: # c00;
background-color: #fff; }

3 Cierre la hoja de estilo con la etiqueta de cierre:

</ Style>

4 Crear una lista desordenada en la sección "cuerpo" de su código HTML. Asignar el estilo "nav" a la lista con esta declaración:

<Ul id = "nav">

5 Entrar en la lista de elementos de menú. Definir cada elemento como un enlace a una página en su sitio. En este caso, incluir enlaces a su Acerca de, Contacto, Preguntas y páginas de inicio con este código:

<Li> <a href="about.html"> Sobre Nosotros </a> </ li>
<Li> <a href="contact.html"> Contacto </a> </ li>
<Li> <a Preguntas más frecuentes href="faq.html"> </a> </ li>
<Li> <a href="index.html"> principal </a> </ li>

Consejos y advertencias

• Esta hoja de estilo le permite añadir y eliminar elementos de menú en la en la sección "cuerpo" del código sin la necesidad de cambiar la hoja de estilo en sí. Los nuevos artículos se añaden al final del menú y los elementos existentes se mueven a la izquierda cuando se elimina una selección.