Diseño Web CSS

Un sitio web a menudo se divide en encabezados, menús, contenido y pie de página.

Hay muchas plantillas a elegir para diseñar sitios web. Sin embargo, la siguiente estructura es una de las más comunes y vamos a dar un vistazo de cerca en este tutorial:

Encabezado

Un encabezado es normalmente localizado en lo alto de la página o justo debajo del menú de navegación y regularmente contiene el logotipo o el nombre del sitio.

En el nuevo estándar HTML5 se agrego la etiqueta <header> que es de nivel de bloque, y que se utiliza para declarar el encabezado:

header {
  background-color: #f1f1f1;
  text-align: center;
  padding: 20px;
}

Menú de Navegación

Un menú de navegación contiene la lista de enlaces para ayudar al visitante con la navegación del sitio web.

En el nuevo estándar HTML5 se agrego la etiqueta <nav> que es de nivel de bloque, y que su utiliza para declarar un contenedor de enlaces:

nav {
  overflow: hidden;
  background-color: #333;
}
nav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
nav a:hover {
  background-color: #ddd;
  color: black;
}

Contenido

El diseño en esta sección depende de el dispositivo del visitante, es decir, de la resolución de pantalla en que se este visualizando el sitio:

• 1 columna : usado a menudo por los navegadores web de teléfonos inteligentes.
• 2 columnas : usado a menudo por navegadores web de tabletas.
• 3 columnas : usado a menudo por navegadores web de equipos de escritorio.

En el siguiente ejemplo, se declara el diseño de 3 columnas de igual tamaño, una al lado de otra. Pero que cambia a 1 columna apilando una sobre otra para dispositivos con resolución de pantalla menor o igual a 600px de ancho:

.columna {
  float: left;
  width: 33.33%;
}
.fila:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 600px) {
  .columna {
    width: 100%;
  }
}

El contenido HTML se declara de la siguiente manera:

<div class="fila">
  <div class="columna">
    <h2>Columna 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  </div>
  <div class="columna">
    <h2>Columna 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  </div>
  <div class="columna">
    <h2>Columna 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  </div>
</div> 

Contenido Principal

El contenido principal es la parte más grande e importante de la página. Es común especificarle un ancho mayor que los demás contenidos. Si hay contenido lateral regularmente se muestra contenido alterno o enlaces para navegar por el sitio por ejemplo. Pueden variar el ancho a las necesidades pero la suma de las columnas debe ser el 100%.

.columna {
  float: left;
}
.columna.lateral {
  width: 25%;
}
.columna.principal {
  width: 50%;
}
@media screen and (max-width: 600px) {
  .columna.lateral, .columna.principal {
    width: 100%;
  }
}

El contenido HTML se declara de la siguiente manera:

<div class="fila">
  <div class="columna lateral">
    <h2>Columna 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  </div>
  <div class="columna principal">
    <h2>Columna 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  </div>
  <div class="columna lateral">
    <h2>Columna 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  </div>
</div>

Pie de Página

El pie de página es localizado en la parte inferior de la página. Comúnmente contiene información como los derechos reservados e información de contacto.

En el nuevo estándar HTML5 se agrego la etiqueta <footer> que es de nivel de bloque, y que su utiliza para declarar el pie de pagina o pie de una caja:

footer {
  background-color: #f1f1f1;
  text-align: center;
  padding: 10px;
}