Es muy importante que las páginas web cuenten dentro de sus primeras líneas aquellos contenidos que resulten más relevantes.
Sin embargo, esto que parece sencillo, muchas veces choca con la intención de los diseñadores de maquetar la página siguiendo cierto orden.
Por ejemplo, si un diseñador desea que la página tenga una cabecera, dos columnas a la izquierda y el cuerpo principal con el contenido a la derecha, podría parecer que es imposible hacer que el contenido principal aparezca entre las primeras líneas del código HTML. Sin embargo, empleando algunas características de CSS, esto es posible.
Cómo maquetar una página para que el contenido importante aparezca primero
A continuación mostraremos como es posible hacer que los contenidos más relevantes de la página aparezcan en los primeros lugares del código HTML, empleando para ello el float de CSS.
Sin entrar en demasiados detalles, ya que no es la finalidad de este artículo explicar como funciona la propiedad float, podemos resumir que esta propiedad hace que el elemento salga del flujo del HTML para posicionarse a la izquierda o derecha de otros elementos adyacentes, alterando el orden en que se encuentran escritos en el código HTML.
Para poder explicarlo de mejor forma, escribiremos un código de ejemplo y su resultado visual, que podrán probarlo utilizando el mismo código escrito en bloc de notas, guardando el archivo como .html o .htm y abrirlo en su navegador para visualizar los resultados.
Código básico
Lo primero que haremos será ordenar los contenidos dentro del HTML en el orden que deseamos. Luego, empleando CSS le daremos el orden visual.
El código de ejemplo es el siguiente:
<html> <head> <title>Página de ejemplo</title> <!-- Vínculo al archivo CSS --> <link rel="stylesheet" type="text/css" href="estilo.css" /> </head> <body> <div id="contenedor"> <div id="cabecera"> <h3>Cabecera</h3> </div> <div id="contenido"> <div id="caja"> <div id="primero"> Contenido principal </div> <div id="segundo"> Contenido de segundo orden </div> </div> <div id="tercero"> Contenido de tercer orden </div> </div> <div id="pie"> Pie de página </div> </div> </body> </html>
Como se puede apreciar, además del código HTML, deberemos escribir, en otro archivo aparte, una hoja de estilo independiente, a la que llamaremos estilo.css y que contendrá el código CSS.
En este código HTML podemos ver que el contenido principal de la página, se encuentra inmediatamente después de la cabecera, es decir, en los primeros lugares del código.
En el archivo CSS, daremos los primeros atributos a los diferentes div’s, de forma que la página adquiera una forma visible y donde los contenidos aparezcan separados.
El siguiente código es el que aparecerá en el archivo estilo.css:
/* Archivo base css de ejemplo *//* Lo siguiente se emplea para resetear los valores por defecto de los navegadores */html, body { margin:0; padding:0; border:none; }
/* Definición de los estilos básicos *//* Contenedor general. Se determina el ancho y los márgenes automáticos */#contenedor {
width:80%;
margin: auto;
}
/* Estilo de los otros contenedores */#cabecera, #pie {
background: #cbcbcb;
}
#pie {
clear: both;
}
#primero {
background: #fb9f9f;
}
#segundo {
background: #fdc08b;
}
#tercero {
background: #fdeb8b;
}
#cabecera, #pie, #primero, #segundo, #tercero {
padding: 1.25em 2%;
margin: 0.4em 0;
}
#cabecera{ margin-bottom: 0; }
#contenido { padding: 0; }
Con esto, ya es posible visualizar la página, la que encontraremos que se encuentra diagramada en una única columna y los diferentes contenidos aparecen alineados en forma vertical.
Esto se debe a que el proceso de maquetación aún no ha comenzado, y la página se verá de la siguiente manera:
Empleando el ejemplo anterior, si deseáramos maquetar la página con una columna a la izquierda y el contenido principal a la derecha, deberíamos dejar el tercer contenedor debajo de los anteriores y ocupando todo el ancho.
Por tanto, debajo del CSS básico que ya hemos escrito, irían las siguientes líneas de código (debe observarse que en cada uno de los ejemplos que daremos, el código HTML no será modificado).
/* Diseño a dos columnas con el contenido principal a la derecha */#primero {
float: right;
width: 65%;
margin-left: 1%;
display: block;
height: 190px;
}
#segundo {
float: left;
width: 26%;
display: block;
height: 190px;
}
#tercero {
clear: both;
width: 96%;
}
La siguiente imagen es el resultado del código descrito. En la caja de color rosa aparece el contenido principal, aunque visualmente no ocupe esa posición, ya que la columna de la izquierda aparece antes.
A continuación veremos un ejemplo donde la columna aparece a la derecha y el contenido principal de la página estará a la izquierda:
/* Diseño a dos columnas con el contenido principal a la izquierda */#primero {
float: left;
width: 65%;
margin-right: 1%;
display: block;
height: 190px;
}
#segundo {
float: right;
width: 26%;
display: block;
height: 190px;
}
#tercero {
clear: both;
width: 96%;
}
Teniendo en cuenta que los contenidos se encuentran jerarquizados en tres escalas diferentes, es posible organizarlos en tres columnas, como en los dos casos que exponemos a continuación, donde las dos columnas se colocan sobre uno de los lados (en un ejemplo a la derecha y en el otro a la izquierda) y el contenido principal en el opuesto:
/* Diseño a tres columnas con el contenido principal a la izquierda */#primero {
float: left;
width: 50%;
margin-right: 1%;
display: block;
height: 260px;
}
#segundo {
float: left;
width: 18%;
margin-right: 1%;
display: block;
height: 260px;
}
#tercero {
float: left;
width: 18%;
display: block;
height: 260px;
}
/* Diseño a tres columnas con el contenido principal a la derecha */#primero {
float: right;
width: 50%;
margin-left: 1%;
display: block;
height: 260px;
}
#segundo {
float: right;
width: 18%;
margin-left: 1%;
display: block;
height: 260px;
}
#tercero {
float: right;
width: 18%;
display: block;
height: 260px;
}
La forma en que se decida maquetar la página, no impide en modo alguno que podamos colocar los contenidos en el orden que creamos más conveniente.
Empleando adecuadamente las propiedades CSS, es posible establecer el diseño deseado sin necesidad de realizar grandes modificaciones en el código HTML.
modificado el 10 marzo, 2018 0:14
Ver comentarios (3)
Exactamente lo que quería, una estructura básica con la cual se pudiera tratar las cajas, jugando con los porcentajes del ancho. Gracias
Hola, saludos cordiales.
Gracias por poner a nuestro alcance sus extraordinarios articulos publicados en su pagina. No habia entendido la maquetacion y otros aspectos hasta que logre conocer su publicacion, me agrada la forma tan didactica de presentar los diferentes temas..Ahora ya puedo empezar a construir mis primeras paginas web de muestra. Abrazos.
Me encantó. Muy clara la explicación.