Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

10. La barra de enlaces (I)

10.1. configurar la barra

La lista de enlaces

La barra de navegación o de enlaces es una barra que va debajo de la cabecera y que sirve de guía para ir a las principales secciones de un sitio Web. Nosotros la pondremos dentro del div "navegación". Lo primero que debemos hacer es una lista con los enlaces que queremos que aparezcan.

Abrimos el archivo plantilla.html con el HTML-Kit y tal como hicimos con la cabecera, borramos el texto provisional que hemos puesto (borrar texto en rojo):

......
<div id="navegacion">
   Esta será la barra de navegación
</div>
......

En su lugar pondremos una lista de enlaces que nos llevarán tanto a la página principal como a otras secciones de la web.

Donde estaba el texto anterior, es decir, dentro del div "navegacion" escribiremos la siguiente lista:(texto en azul)

......
<div id="navegacion">
   <ul>
      <li><a href="index.html">Página Principal</a></li>
      <li><a href="#">Enlace a Sección 1</a></li>
      <li><a href="#">Enlace a Sección 2</a></li>
      <li><a href="#">Enlace a Sección 3</a></li>
      <li><a href="#">Enlace a Sección 4</a></li>
      <li><a href="#">Enlace a Sección 5</a></li>
      <li><a href="#">Enlace a Sección 6</a></li>
      <li><a href="#">Enlace a Sección 7</a></li>
   </ul>
</div>
......

Después de escribir las líneas anteriores, guardamos el archivo, y abrimos el archivo plantilla.html con el navegador para ver los cambios.

La página plantilla quedará así: Ver mi página

Tenemos la lista de enlaces, pero hay que buscar la forma de poner los enlaces en línea, quitar el punto de la viñeta, y dar un poco de estilo.

Para ello abrimos el archivo general.css con el HTML-Kit y al final de lo que hay escrito escribimos la siguiente línea:(texto en verde)

.....
h6  { font-size: 0.9em; }
		 
#navegacion ul li { display: inline; float: left; }

La propiedad display: inline transforma la etiqueta <li> de manera que no ocupe toda una línea entera, sino sólo el trozo que tiene escrito. A su vez la etiqueta float: left posiciona unos elementos detrás de otros, siempre que haya espacio en la misma línea.

Tras escribir la línea anterior, guardamos el archivo y abrimos el archivo plantilla.html con el navegador para ver el resultado.

La página quedará así: Ver mi página

Como ves ahora los elementos de la lista están en la misma línea uno detrás de otro. Ahora tenemos que separarlos, pues están demasiadco juntos, y cambiarles el aspecto; pero eso será en el proximo paso:

Ir al siguiente paso: posición de enlaces

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com