- 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>
<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>
<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>
<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
Que bien. Código muy claro
ResponderEliminar