Teoría
Teoría

La distribución y el diseño de referencia

Ya conocemos las cajas y comprobamos que podemos modificar el flujo. Al aprender a cambiar cómo se comportan las cajas dentro del flujo, podremos crear distribuciones de cualquier complejidad.

La distribución general de una página organiza sus cajas principales: el encabezado, el pie de página, el contenido principal (<main>), el contenido complementario (<aside>) y las distintas secciones. Por lo general, la cantidad de estas cajas no cambia y sus dimensiones se ajustan a un diseño de referencia.

El diseño de referencia es una imagen de la página web. La crea una persona dedicada al diseño y se usa como guía al desarrollar la página. Se puede preparar en un editor gráfico o en programas especializados.

Este es el diseño de la página que vamos a crear:

El marcado y los estilos decorativos ya están listos. Solo falta distribuir correctamente las cajas. Los estilos decorativos están en un archivo aparte. Muchas de sus propiedades ya las usamos en «Introducción a HTML y CSS». No suele hacerse así en un proyecto real, pero nos facilitará aprender a crear la distribución.

Primero conectaremos tres hojas de estilos: la de estilos decorativos, la que resalta las cajas principales y una hoja vacía donde escribiremos los estilos de distribución.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8">  <title>Comida sana a domicilio</title> </head> <body> <header class="page-header"> <a class="logo"> <img src="img/food_logo.svg" alt="Logotipo de comida sana a domicilio" width="160" height="160"> </a> <h1 class="header-title">Comida sana a domicilio</h1> </header> <main class="page-main"> <ul class="features-list"> <li class="feature"> <h2>A diario</h2> <p>Entregamos menús todos los días de 6:00 a 22:00, incluidos fines de semana y días festivos.</p> </li> <li class="feature"> <h2>Variedad</h2> <p>Los platos no se repiten en seis meses. Nuestro creativo chef sabe sorprender.</p> </li> <li class="feature"> <h2>Saludable</h2> <p>Cada plato tiene el equilibrio ideal de vitaminas, minerales y micronutrientes.</p> </li> <li class="feature"> <h2>Seguridad</h2> <p>Tratamos los alimentos y los envases con todo cuidado.</p> </li> <li class="feature"> <h2>Suficiente</h2> <p>Elige entre menús de 1200, 2000 y 2800 kcal. Nadie se ha quedado con hambre.</p> </li> <li class="feature"> <h2>Económico</h2> <p>Cuesta la mitad que cocinar en casa.*</p> <p class="disclaimer">* Aunque no es seguro.</p> </li> </ul> </main> <footer class="page-footer"> <span class="copyright">© 2020 Todos los derechos reservados</span> </footer> </body> </html>

CSS

ObjetivosRealizado

En la línea 5, conecta la hoja de estilos decorativos: <link rel="stylesheet" href="food-decorative.css">.
En la siguiente línea, conecta la hoja que resalta las cajas: food-outline.css.
Observa las cajas principales que componen la página.
Debajo, conecta la hoja donde escribiremos los estilos de distribución: style.css.