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

• background-color: #ccffff : cambia el color de fondo al mismo que el de la cabecera.
• font-size: 0.8em : Define el tamaño de letra.
• font-weight: bold : Pone el texto en negrita.
• padding: 0.1em 0em : define un pequeño margen interno superior e inferior.

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

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