GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Diseño Web
Un sitio web se divide a menudo en las cabeceras, menús, contenido y un pie de página:

Encabezamiento o Cabecera

Menú de Navegación

Contenido Contenido Principal Contenido

Pié de Página

Existe una infinidad de diferentes esquemas de trazado para elegir. Sin embargo, la estructura
anterior, es uno de los más comunes, y vamos a estudiar más de cerca este caso.

Encabezamiento
Un encabezado normalmente se encuentra en la parte superior de la página web (o justo debajo
de un menú de navegación superior). A menudo contiene un logotipo o el nombre del sitio web:

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

Ver: Código 224.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Barra de navegación
Una barra de navegación contiene una lista de enlaces para ayudar a los visitantes que navegan a
través de la página web:
/* contenedor */
.topnav {
overflow: hidden;
background-color: #333;
}
/* enlaces */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* hover en enlaces */
.topnav a:hover {
background-color: #ddd;
color: black;
}

Ver: Código 225.html

Contenido
La disposición en esta sección, a menudo depende de los objetivos. La disposición más común es
una de las siguientes:
 1-columna (a menudo utilizado para navegadores en dispositivos móviles).
 2-columna (a menudo utilizado para las tabletas y ordenadores portátiles).
 Diseño de 3 columnas (sólo se utiliza para equipos desktop).

1 columna 2 columnas 3 columnas

1 2 2 3 3 3

Vamos a crear un diseño de 3 columnas, y el cambio a una presentación de 1 columna en pantallas

más pequeñas:
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

/* tres columnas flotando una tras otra */

.column {
float: left;
width: 33.33%;
}
/* limpiando flotación */
.row:after {
content: "";
display: table;
clear: both;
}
/* resolviendo resolución */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Ver: Código 226.html

Contenido en columnas desiguales

El contenido principal es la parte más grande y más importante de su sitio. Es común tratarla
con columnas de ancho desigual, de modo que la mayor parte del espacio está reservado para la
página principal. El contenido de lado (si lo hay) se utiliza a menudo como una alternativa de
navegación o para especificar la información pertinente a la página principal. Cambiar el ancho
que desee, sólo recuerdo que debe sumar el 100% en total:

.column {
float: left;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle {
width: 50%;
}
/* diseño responsivo */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}

Ver: Código 227.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Pie de página
El pie de página se coloca en la parte inferior de la página. A menudo contiene información como
los derechos de autor e información de contacto:

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

Ver: Código 228.html

Disposición responsiva
Mediante el uso de una parte del código CSS anterior, hemos creado un diseño de página web de
respuesta, que varía entre dos columnas y columnas de ancho completo en función de la anchura
de la pantalla:
Ver: Código 229.html