Índice

La parte central de la página

1. Los elementos

En la parte central de la página, tenemos dos zonas: el contenido de la página y la columna lateral derecha. Vamos a usar ahora los elementos <article> y <aside>.

2. Insertar el elemento <article>

Con el modo Dividir activo, haga clic a la derecha de la etiqueta de cierre </nav> del elemento de navegación.

Inserte el elemento de estructura Article.

En la ventana de inserción, deje la opción En punto inserción.

Borre el texto que Dreamweaver inserte automáticamente e introduzca en su lugar su texto estructurado.

En este ejemplo, tenemos un título <h2> y texto en un párrafo <p>.

images/21OWT-21.png

3. El diseño del elemento <article>

Aplicaremos a este elemento un ancho fijo, un relleno y un borde derecho con una vista como celda de tabla.

En el panel Diseñador de CSS, añada el selector article.

Aplíquele estas propiedades: ancho de 709 píxeles (width: 709px), vista como celda de tabla (display: table-cell) para facilitar el diseño, un relleno a la derecha de 10 píxeles (padding-right: 10px) y un borde derecho de un píxel, con trazo completo y de color gris (border-right: 1px solid #4A4A4A).

images/21OWT-22.PNG

4. Insertar el elemento <aside>

Con el modo Dividir activo, haga clic a la derecha de la etiqueta de cierre </article> del elemento de contenido.

Inserte el elemento de estructura Aside.

En la ventana de inserción, deje ...