Una vez que hemos visto cómo colocar el título dentro del "header" de la página, hoy voy a enseñarte la forma de añadir una simple barrita bajo este, la cual aunque sencilla, da un toque interesante al diseño de nuestra página; es una forma de separar la cabecera, del resto de contenido. Esta barrita puede contener además (según verás en esta lección) algo de texto, e incluso no existe inconveniente en colocar unos enlaces, como si de un menú se tratase...
Clic ahora sobre el botón "Aceptar", para irnos directamente al panel de configuraciones:
Habrá que "Examinar" para buscar la imagen que colocaremos en el apartado "Background-image:":
Evidentemente, esa imagen debemos tenerla ya creada y guardada en nuestro Pc. (Recuerda cómo realizábamos todos los pasos, ya que ahora son idénticos, en las lecciones 09 y 10 donde veíamos la forma de crear una imagen con Photoshop, y luego usarla para la cabecera de la página). Clic en el botón "Aceptar" y ahora le damos el ancho necesario (recuerda: 1024 píxeles):
>>> Subir al inicio de esta página ...
Finalmente, tenemos que "Aceptar", según te indico en esta imagen:
La barrita ya estará lista, pero vamos a hacer que el texto que quiero colocarle, quede centrado:
Así que en los "Estilos CSS" buscamos el que hemos creado para la barrita (llamado #barrabajohead) y doble clic sobre él:
Simplemente en el apartado "Borde", he ido a "Text-align" y le coloqué "center", como puedes ver en la imagen de arriba. Si ahora vamos a echar un vistado a la página con uno de los nacegadores que tengamos predefinidos, esta es la apariencia de nuestra página del curso, de momento:
Sencillo ¿no crees?; bien, pues seguiremos en próxima lección. Desde este botón azul de abajo puedes subir al menú con las lecciones del curso.
[