Índice

El encabezado de la página

1. Las cajas de vista

Esta es la estructura de las cajas <div> para la vista del encabezado de la plantilla.

images/C03-006N.png

2. La imagen de fondo del encabezado

El fondo del encabezado, <header>, es una imagen situada en la carpeta images de la carpeta templatesimple de nuestra plantilla. Esta imagen tiene el nombre de banner.jpg.

images/C04-004.png

La imagen está situada con esta regla CSS. La imagen se sitúa arriba a la izquierda de su caja, que tiene un alto y un ancho fijos.

En el archivo template.css, introduzca la siguiente regla:

header {  
  width: 960px;  
  height: 200px;  
  background: #f5f5f5 url(’../images/banner.jpg’) no-repeat 
left top;  
}

3. El logo

El logo es un archivo llamado logo.png y se encuentra en la carpeta images de la carpeta de nuestra plantilla templatesimple.

images/C04-005.png

La vista del logo se hace con la caja <div id="logo">. Es una caja flotante a la izquierda de la caja padre.

En el archivo template.css, introduzca la regla:

#logo {  
  float: left;  
  margin: 50px 0 50px 20px;  
}

Además, como suele ocurrir, si el usuario hace clic en el logo, volverá a la página de inicio.  Vamos a modificar el archivo index.php: vamos a colocar el logo en la posición llamada position-0 e insertarlo en un enlace <a>.

En el archivo index.php, en la caja <div id="logo">, introduzca el código:

<div id="logo">  
   ...