Maquetar página web
Solo trataremos el aspecto que tendrá la web no el contenido. Es necesario antes de empezar a escribir cualquier linea de código html la estructura básica que tendrá la página (maquetación). Existen varios tipos, aquí las más usadas en websites:
Este modelo se encuentra dividido en 3 bloques horizontales. La mayoria de webs utilízan esta estructura.
- Header: también llamada cabecera se utiliza normalmente para visualizar el menú para navegar por nuestro sitio web. Muchos sitios utilizan éste para mostrar publicidad en forma de banner.
- Body: es el cuerpo de la página, aquí se vuelca todo el contenido que tendrá esta página en concreto. Dentro se puede definir columnas para separar la información a visualizar.
- Footer: es el pie de la página. En este apartado lo más normal es visualizar links de sitios amigos, los derechos y condiciones de uso del sito web. En blogs aquí se suele visualizar mucha más información como comentarios de usuarios, ultimas imágenes o videos publicados, etc.
Analizaremos más de cerca el body o cuerpo de la página ya que es el más importante. Aqui tendrémos que ser capáz de acuerdo de la información que querremos mostrar, que tipo de formato es el más adecuado.
Formatos más utilizados
por número de columnas
- 1 Columna: se utilizan sobre todo en páginas angostas y/o con mucho texto (tutoriales, noticias).
- 2 Columnas: es el más utilizado, sobre todo en blogs.
- 3 Columnas: es más popular este formato en páginas de noticias como periódicos y revistas(no recomendado para páginas con una ancho menor a 900px).
Distribución de las columnas
1 columna
En la página de tutoriales.com solo emplea una columna.
http://www.mundotutoriales.com/
2 columnas
En la página de yahoo noticias, la primera columna ocupa el contenido de las noticias y la columna derecha contiene publicidad, titulares, videos cuyo contenido no sea muy ancho.
http://es.noticias.yahoo.com/mundo.html
3 columnas
En este ejemplo se puede ver las tres columnas en el body de la página. Se puede observar que las columnas laterales visualizan links y promociones de productos. La central visualiza el contenido y descripción.
http://www.microsoft.com/Windows/explore/Maquetar con divs o tablas ?
Durante mucho tiempo los diseños de las páginas web se maquetaban con tablas, pero con el avance en el lenguaje HTML y que hoy en día los navegadores de internet se actualizan rapidamente y siguen el standar (excepto IE, aunque sus últimas versiones van en ese camino). El diseño deberá realizarse en divs, y porque en divs y no en tablas. Basicamente por dos motivos, las etiquetas divs son más ligeras que las tablas, además los buscadores como google rastraen mejor a los sitios diseñados en divs.
Elementos necesarios para crear una web respetando standares
- Hoja de estilo: El estilo de los elementos html serán definidos en un archivo aparte del html, este archivo contiene los elementos y clases donde se dará la apariencia estética de la página
- Página html: La página html en sí
- Archivo javascript: No es obligatorio este archivo, pero si se usara javascript, y si las funciones serán común para otras páginas es mejor tenerlas en un archivo independiente.
Página básica con una maquetación simple con 2 columnas
CSS Code
(estilo.css)*{ margin:0; padding:0;}
body{
background-color:#DDD;
color:#222222;
}
.header, .body, .footer{
width:960px;
padding:10px;
}
.header{
height:115px;
margin:auto;
background:#8AA6B9;
}
.body{
margin:auto;
background:#F9F9F9;
}
.footer{
margin:auto;
background-color:#8AA6B9;
clear:both;
}
.sidebarLeft, .sidebarRight{float:left;}
.sidebarRight{ width:330px;}
.sidebarLeft{ width:630px;}HTML Code
(index.html)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="estilo.css"/>
</head>
<body>
<div class="header">Header</div>
<div class="body">
<div class="sidebarLeft">sidebarLeft</div>
<div class="sidebarRight">sidebarright</div>
<br clear="all" />
</div>
<div class="footer">Footer</div>
</body>
</html>El código anterior crea un ejemplo como el de la imágen de abajo, el esqueleto de una web con una cabecera (header) un cuerpo (body) con dos columnas y un pie de la página (footer).
