Índice

El encabezado de la página

1. Insertar el elemento <header>

Para el encabezado de la página vamos a usar el elemento HTML5 <header>. Está diseñado con ese propósito.

En la página, haga clic en el elemento <main> insertado previamente. Puede usar el modo Dividir para mayor comodidad.

En el menú Insertar o en el panel Insertar, seleccione HTML y Header.

En la ventana Insertar Header, lista desplegable Insertar, deje En punto inserción.

No complete los campos Class y ID.

images/21OWT-05.PNG

Haga clic en Aceptar.

Dreamweaver inserta el elemento <header>.

Elimine el texto insertado automáticamente por Dreamweaver.

2. Insertar un título en el encabezamiento

En el elemento <header> vamos a insertar un elemento <h1> para colocar en él el título de la página.

Haga clic en el elemento <header> insertado antes.

En el menú Insertar o en el panel Insertar, seleccione HTML, y después en la lista desplegable Heading, seleccione H1.

images/21OWT-10.png

Dreamweaver inserta el elemento <h1> y coloca en él un texto predeterminado.

Escriba su texto en sustitución.

Ahora tenemos esta estructura:

<main> <header> <h1>...</h1> </header> </main>

La estructura puede verse en la barra de estado.

images/18C21-011.png

Y también en el panel DOM:

images/18C21-012.png

3. El diseño del encabezado

Para darle forma al encabezado bastará con utilizar el selector header.

En el panel Diseñador ...