jueves, 20 de octubre de 2011

07.- Diseño de estructuras web con capas y CSS: layouts

Para diseñar la estructura de una página web, existen diversos métodos:
  • Uso de marcos o frames para separar los distintos espacios del sitio web. Implica el uso de las etiquetas <frameset>, véase tabla1. Este modelo muy popular en los primeros desarrollos de la web, posteriormente ha sido desechado debido a las dificultades de accesibilidad que presentaba y a los problemas de redimensionamiento y correcta visualización en los navegadores. No es aconsejable utilizar este modelo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Estructura con frames</title>
</head>
<frameset cols="30%, 70%">
  <frameset rows="100, 200">
      <frame src="contenido1.html">
      <frame src="contenido2.html">
  </frameset>
  <noframe>
  <ul>
  <li><a href="content1.html">contenido primero</a></li>
  <li><a href="content2.html">contenido segundo</a></li>
  </ul>
  </noframe>
</frameset>
</html>
Tabla1. Estructura web basada en marcos o frames.
  • Uso de capas <div> con estilos CSS para definir distintas áreas, se puede considerar el método de mayor éxito y que mejor resuelve los problemas de accesibilidad y estructuración de un sitio web, véase tabla2. La estructura puede ser perfectamente redimensionable y totalmente adaptable a cualquier caso. El estilo definido siempre es interpretado por todos los navegadores web.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Estructura con capas y CSS</title>

<style>
.capa1 {width: 30%;
    height: 500px;
    float: left;
    background-color: #800000;}

.capa2 {width: 70%;
    height: 500px;
    float: left;
    background-color: #273a53;}
</style>

</head>
<body>

<div class='capa1'></div>
<div class='capa2'></div>

</body>
</html>
Tabla2. Estructura web basada en capas.
  • Uso de <iframe> y capas <div>. Puede ocurrir que se utilice un método mixto para estructurar los contenidos. Los iframes son marcos parecidos a los frames, con la diferencia de que no dividen la pantalla vertical u horizontalmente. Lo que se obtiene es una ventana dentro de la capa <div> que la soporta, permitiendo en todo caso un mayor control de accesibilidad y redimensionamiento que el primer caso expuesto. Otras ventajas derivadas es la posibilidad de cargar contenidos direccionados desde los enlaces de los distintos menús de forma sencilla, véase tabla3.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>

<style>
.capa1 {width: 100%;
    height: 150px;
    clear: both;
    background-color: #364d35;}

.capa2 {width: 30%;
    height: 500px;
    float: left;
    background-color: #800000;}

.capa3 {width: 70%;
    height: 500px;
    float: left;
    background-color: #273a53;}
</style>

</head>
<body>

<div class='capa1'>Encabezamiento</div>
<div class='capa2'>
<ul>
  <li><a href='contenido1.html' target='hud'>enlace1</a></li>
  <li><a href='contenido2.html' target='hud'>enlace2</a></li>
  <li><a href='contenido3.html' target='hud'>enlace3</a></li>
</ul>
</div>

<div class='capa3'>
<iframe src='contenido0.html' name='hud' id='hud'></iframe>
</div>

</body>
</html>
Tabla3. Estructura web basada en capas e iframe.

Estructuras o disposiciones de sitios web

Modelo1. Descargar página

Modelo2. Descargar página

Modelo3. Descargar página

Modelo4. Descargar página

Modelo5. Descargar página

Modelo6. Descargar página

Modelo7. Descargar página

1 comentario: