Saltar la navegación

Puesta en práctica

Maquetando una página web

Partiendo del siguiente HTML:

<div id="pagina">

    <div id="cabecera">
        <p><a href="/"><span>Mi sitio web</span></a></p>
    </div>

    <div class="autoclear">

        <div id="menu">
            <ul>
                <li><a href="#">Apartado A</a></li>
                <li><a href="#">Apartado B</a></li>
                <li class="actual"><a href="#">Apartado C</a></li>
                <li><a href="#">Apartado D</a></li>
                <li><a href="#">Apartado E</a></li>
            </ul>
        </div>

        <div id="contenido">
            <h1>Apartado C</h1>
            <p>Contenido principal de mi página.</p>
        </div>

        <div id="extra">
            <p>Contenido de la capa "contenido-extra".</p>
        </div>

    </div>

    <div id="pie">
        <p>Pie de página de mi sitio web.</p>
    </div>

</div>

Intenta conseguir las siguientes apariencias:

Tres columnas, menú a la izquierda

Dos columnas, menú superior

Tres columnas, menú a la derecha

Intenta que se vea bien en diferentes navegadores y, en la medida de lo posible, mejorar la plantilla:

  • Que tenga alguna imagen decorativa (una imagen de fondo, una cabecera, un logotipo, tal vez una imagen a pie de página...).
  • Que la columna "extra" no tenga el texto pegado a sus bordes.
  • Añade nuevos elementos al contenido: imágenes, una tabla, un vídeo...
  • Si añades una tabla, intenta controlar su apariencia: bordes, colores de las filas y encabezados...
  • Incluso puedes intentar colocar el menú en la parte final del HTML (antes del pie de página) y hacer que se vea en diferentes lugares mediante CSS.
  • También puedes hacer que la página se vea de otra forma al imprimirla (que sólo se vea el contenido central, por ejemplo).
  • Puedes añadir un formulario.
  • Etc.

Puedes descargar los tres ejemplos (zip) para revisar tu trabajo.

Responsive design

Cuando hayas comprendido lo anterior, y tengas una página de ejemplo, intenta hacerla compatible con dispositivos móviles.

Puedes hacerlo utilizando CSS Media Queries. Ejemplo:

@media only screen and (max-width: 768px) {
    ...
}

En el apartado Responsive design correspondiente al bloque de CSS de la primera parte de este curso (Desarrollo web con estándares I) encontrarás la información que necesitas para poder hacerlo.