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: 21

Visitas el mes pasado: 25

logo

Donativos

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




10. La barra de enlaces (IV)

10.4 Barra de situación

Texto de la barra

En el paso anterior hemos acabado la barra de navegación, pero debajo de ésta, pondremos una pequeña barra, de una línea, que indique la página de la Web en la que estamos.

Para ello abre el archivo plantilla.html con el HTML-Kit y entre el div "navegación" y el div "menu" escribimos lo siguiente (texto en azul)


.....
      <li><a href="#">Enlace a Sección 7</a></li>
   </ul>
</div>
<p class="situacion">Estás en: Mi Primera Web / Seccion x / Apartado y.</p>
<div id="menu">
.......

Fíjate que le hemos puesto una etiqueta de clase para poder darle un trato de estilo distinto a los demás párrafos.

Después de escribir el texto anterior, guardamos el archivo y abrimos el archivo plantilla,html con el navegador para ver los cambios.

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


Como ves el texto aparece debajo del menú navegación, pero deberemos darle estilo y cambiar el fondo para que se parezca a una barra.

Aplicar estilo al texto

Para apicar estilo al texto abrimos el archivo general.css con el HTML-Kit y después de la última línea escribimos esta otra: (texto en verde)


......
#navegacion a:active { color:#990099; background-color: #ffffcc;  }
		
.situacion { background-color: #ccffff; font-size: 0.8em; 
        font-weight: bold; padding: 0.1em 0em; }


El selector .situacion indica que las propiedaddes deben aplicarse a esa clase. Fíjate que todos los selectores de clase empiezan por un punto seguido del nombre de la clase.

Veamos las propiedades que hemos aplicado

Despùés de haber copiado el texto, guardamos el archivo y abrimos el archivo plantilla.html con el navegador para ver los resultados.

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


Ahora que ya tenemos la cabecera y las barras de navegación y de situación, el próximo paso es configurar el menú. pero eso ya lo haremos en el siguiente tema.


Ir al siguiente tema: Menú 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