Alejandra 22 de julio de 2008 a las 15.59
   Imprimir artículo
elWebmaster.com

Taller de Adobe Dreamweaver: Frames o cuadros


Adobe DreamweaverCuando 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>

&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;P&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Este frameset contiene:&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;UL&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;LI&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;A href=&#8221;archivo_frameset1.html&#8221;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Contenido&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/A&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;LI&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;IMG src=&#8221;archivo_frameset2.gif&#8221; alt=&#8221;Una imagen&#8221;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;LI&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;A href=&#8221;archivo_frameset3.html&#8221;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Otro contenido&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/A&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;nbsp; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/UL&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

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.

framesetEn 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.

Frameset de Google

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”.

Frameset de Viajeros.com

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”:

Frameset de CreativeCommons

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  

CLASE SIGUIENTE >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (4)

  1. Antonio Gutiérrez dice:

    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

  2. Diego dice:

    Amigo… tengo una duda con los marcos.
    En mi pagina puse unos marcos flotantes () sin borde ni scrollbar ni nada. Lo que quiero es que cuando me cargue una pagina, se ajuste al largo de ésta, pero no se como hacerlo.
    es posible hacer que cambie el tama√Īa del marco, dando clic en un hipervinculo o algo… necesito ayuda!!
    De antemano gracias por publicar el curso, yo he estado usano el Expression Web de Microsoft, pero creo que ya me est√° empezando a gustar el DW ūüėÄ
    Saludos.

  3. Omega dice:

    es un aporte impresionante, muchisimas gracias por la informaci√≥n… lo pondre en practica pronto ūüėÄ

  4. Tatiana dice:

    Tengo una duda. He visto algunos portales divididos en “bloques” donde se puede interactuar con uno de ellos sin que se actualice toda la p√°gina, tipo encuestas y dem√°s. Realmente no observo √≠ndices de frames. Quisiera saber c√≥mo est√°n hechos. Muchas gracias.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder