Entendido.

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

Logo

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++


logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 24

Visitas el mes pasado: 18

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




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







Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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