Cuando el diseñador se sienta a pensar en el diagrama de su sitio web, divide los espacios generando distintas áreas que en el maquetado se traducen generalmente en divs contenedores. Estos divs son necesarios para ordenar el contenido de la página.
Los frames son otra opción para diagramar una página. La diferencia con respecto a los divs es que cada frame contiene un HTML independiente. El resultado es una página compuesta por varios archivos HTML. A este tipo de documentos se les llama frameset.
Composición de un frameset
En un HTML común y corriente vamos a encontrarnos con un HEAD y un BODY:
<!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=utf-8″ />
<title>TÃtulo del documento</title>
</head>
  <body>
<div>Contenido del documento</div>
</body>
</html>
En un HTML con frameset tenemos un HEAD y un FRAMESET:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
“http://www.w3.org/TR/html4/frameset.dtd”>
<HTML>
<HEAD>
<TITLE>TÃtulo del documento</TITLE>
</HEAD>
<FRAMESET cols=”30%, 70%”>
<FRAMESET rows=”200, 400″>
<FRAME src=”archivo_frameset1.html”>
<FRAME src=”archivo_frameset2.gif”>
</FRAMESET>
<FRAME src=”archivo_frameset3.html”>
<NOFRAMES>
<P>Este frameset contiene:
<UL>
<LI><A href=”archivo_frameset1.html”>Contenido</A>
        <LI><IMG src="archivo_frameset2.gif" alt="Una imagen">
        <LI><A href="archivo_frameset3.html">Otro contenido</A>
     </UL>
</NOFRAMES>
</FRAMESET>
</HTML>
En el primer frameset se especifica la diagramación general de los frames. Además, el frameset puede contener elementos noframes que proveen información alternativa al contenido del sitio en caso de que los usuarios tengan desactivados los frames.
Cualquier elemento fuera de un frameset debe aparecer después de la primer etiqueta <FRAMESET>, de lo contrario la esta etiqueta es ignorada.
Filas y columnas
En los framesets se dan especificaciones de rows (filas) y cols (columnas), para indicar las dimensiones de los frames dentro del frameset.
En cols se debe indicar el tamaño en ancho de uno o varios frames (si son varios, las dimensiones se separan con comas). En nuestro código tenemos <FRAMESET cols="30%, 70%">. Esto significa que el primer frame va a tener un ancho del 30% de la página y el segundo frame un 70%. Si un frame ocupa todo el ancho de la página se indica con un 100%.
En rows indicamos el tamaño en altura de las celdas de uno o varios frames. Tal como escribimos arriba: <FRAMESET rows="200, 400">.
Estas dimensiones se pueden expresar en porcentaje, pÃxeles o anchos relativos (relative lenghts).
Se puede especificar todo dentro de la misma etiqueta de frameset:
<FRAMESET rows="30%,70%" cols="20%,30%,50%">
El resto de los atributos y definiciones…
</FRAMESET>
Framesets anidados
Tal como existen tablas anidadas (tablas dentro de tablas), existen también framesets anidados. ¿Cómo? Creamos la estructura de un frameset principal y dentro de ese frameset incluimos otro frameset con sus propios frames:
<FRAMESET cols="20%, 35%, 45%">
Contenido del primer frame…
<FRAMESET rows=”40%, 60%”>
Contenido del segundo frame y primera celda…
Contenido del segundo frame y segunda celda…
</FRAMESET>
Contenido del tercer frame…
</FRAMESET>
Cuándo usar frameset
La ventaja de usar framesets se ve más que nada en sitios donde una porción siempre se mantiene igual. Se puede tener una barra latera y un header en frames distintos y el contenido principal en otro. Pero no hay nada que no se pueda lograr con un poco de CSS y algunos divs.
La razón actual para utilizar framesets es cuando necesitamos mostrar contenido de dos sitios diferentes. Si pensaron que los framesets estaban pasados de moda, fÃjense en sitios de búsqueda. Al ingresar una búsqueda de imágenes en Google.com, podrás ver el sitio fuente debajo y la información tu búsqueda arriba.
Esto se hace con framesets, sino miremos el código…
<html><head><meta http-equiv=”content-type” content=”text/html; charset=UTF-8″><title> Google Image Result for http://www.elwebmaster.com/wp-content/uploads/2007/12/3d-pack-online-elwebmaster.jpg</title><script>function checkTopFrame() {if (frames && frames[0] && frames[0].document) {try {frames[0].document.domain;} catch(e) {location = “/error”;}self.setTimeout(’checkTopFrame()’, 3000);}}self.setTimeout(’checkTopFrame()’, 3000);</script></head><frameset rows="137,*"><frame src="/imgres?imgurl=http://www.elwebmaster.com/wp-content/uploads/2007/12/3d-pack-online-elwebmaster.jpg&imgrefurl=http://www.elwebmaster.com/2007/12/03&h=125&w=125&sz=35&tbnid=Nr08p1hm5R62YM:&tbnh=90&tbnw=90&hl=en&um=1&prev=/images%3Fq%3Delwebmaster%26um%3D1%26hl%3Den%26sa%3DN&frame=small" scrolling=no marginwidth=0 marginheight=0 onload="var d = frames[0].document;var l = d.links[0];if (d.getElementById &&d.getElementById(’logo’)) {l = d.getElementById(’logo’);}l.target=’_top’;”><frame src="http://www.elwebmaster.com/2007/12/03"><noframes>Your browser does not support frames. Google uses frames to display image results. You can view the <a href=http://www.elwebmaster.com/2007/12/03>referring page</a> for this image.</noframes></frameset></html>
El código que está encerrado entre las etiquetas frameset indican la diagramación del frameset. En este caso hay únicamente dos frames:
- En azul se ve el contenido de Google, con la imagen pequeña.
- El código rojo muestra la página de elWebmaster.com donde fue publicada la imagen que el usuario busca.
El sitio de viajes en español Viajeros.com utiliza framesets en su sección en Links interesantes. La idea es que cada vez que vez un enlace que está publicado en Viajeros.com, tengas la posibilidad de votarlo. Por eso, al igual que Google, muestra los links con un frame propio en la parte superior desde donde se puede votar. También puedes eliminar el frame seleccionando “Quitar marco”.
CreativeCommons hace exactamente lo mismo en su búsqueda de archivos con derechos de copyright menos limitados. Elige la fuente del archivo, en este caso buscaremos una imagen en Flickr… Cuando tengas los resultados de la búsqueda verás el sitio fuente encerrado en un frame dentro del sitio de CreativeCommons. También tenemos la posibilidad de sacar el frame exterior de CC seleccionando “Remove Frame”:
W3Schools es una web muy completa de recursos HTML, allà podrán profundizar un poco más sobre el armado, uso y aplicación de frames. Ver página >>
Bueno, eso es todo. Espero haberlos ayudado con esto de los framesets. ¿Dudas? ¿Preguntas? Déjalas en los comentarios e intentaré responderlas en breve.
| << CLASE ANTERIOR |
Martes, 29 de Julio de 2008 a las 09.51
Estoy montando una página y quedé atrancado durante bastante tiempo. Descubrà el curso cuando está a punto de acabar y me lo he estudiado a toda prisa. Me ha solucionado varias cosas. Muy claro y en plan sencillo. ¡¡¡Muchas gracias por poner vuestro trabajo al alcance de todos!!! Si me surgen nuevas dificultades, antes de que acabe el curso, te haré preguntas.
Un saludo.
Antonio