Volver a la portada de Duiops
Volver al
Web de Duiops

Google 
 
En Internet En duiops.net

Portada | Fundamentos del HTML | Marcos

Marcos

Atrás Arriba Siguiente

(contenido antiguo)

Frames normales | Frames flotantes

 

Los frames o marcos digamos que no es más que dividir la pantalla en partes de forma que se pueda navegar de una forma más cómoda por la página. Se suele utilizar un frame estrecho donde están los enlaces y un frame más ancho donde se cargan los mismos.

 

Siempre los WEB que poseen frames siempre constan de:
bulletUna página donde se definen los frames
bulletLas páginas independientes de cada frame

En la página donde hemos de definir los frames diremos el número de los mismos que queremos que haya, su tamaño y la página que van a contener.

Las etiquetas a tener en cuenta son:
bullet<FRAMESET> con </FRAMESET> para decidir el tipo y forma del frame. Veamos sus parámetros:
bulletCOLS="x, y" para las columnas y ROWS="x, y" para las filas (sustituyendo x e y por el tamaño de cada frame en píxels o porcentaje). Recomendamos usar porcentaje si por ejemplo optimizamos nuestra página para 800x600 y queremos que se muestre bien en resoluciones menores, y es mejor utilizar píxels si queremos que se veabien en resoluciones mayores. De todas formas es posible que con nuestro navegador se vean muy bien distribuidos y que en las pantallas de otras personas se vean descolocados. También es posible poner * en el tamaño, de forma que con COLS="20%, *" habría una columna que ocupa el 20% de la pantalla y la otra columna ocuparía el resto. Se recomienda mucho usar el asterisco si decimos el tamaño con píxels. Se puede hacer múltiples combinaciones con él, con COLS="20%, *, *" tendríamos tres columnas, una que ocupa el 20% y las otras dos que ocuparían el resto divido entre ellas, es decir, 40% cada uno; y también podríamos usar COLS="*, 2*", de forma que tendríamos 2 columnas y la segunda con doble espacio que la primera, es decir, la que tiene * ocuparía el 33% y la que tiene 2* ocuparía el 66%.
bullet

Frames sin bordes. Se hace mediante la etiqueta FRAMEBORDER=0 dentro de la etiqueta FRAMESET. Si además no se quiere que se vea el hueco hay que añadir FRAMESPACING=0 para Explorer y BORDER=0 para Netscape, es decir: <FRAMESET FRAMEBORDER=0 FRAMESPACING=0 BORDER=0 COLS="xx, yy">

bullet<FRAME>. Indica las características de cada frame y siempre irá colocada dentro de <FRAMESET> y </FRAMESET>, y habrá tanto número de ellas como el número de tamaños indicados por COLS y/o ROWS, como por ejemplo:

<FRAMESET COLS="30%, 40% *">
<FRAME SRC="columna1.html">
<FRAME SRC="columna2.html">
<FRAME SRC="columna3.html">
</FRAMESET>

Sus parámetros son:
bulletSRC="xxxx.html". Sirve para decidir la página que habrá en el frame, sustituyendo xxx por el nombre de un documento HTML o una URL completa.
bulletNAME="xxx". Es para decidir el nombre del frame (sustituyendo xxx por el nombre del mismo), y así poder hacer que los enlaces de los otros frames se carguen en el frame que contenga dicho nombre. Para hacer esto también hay que introducir en cada enlace (la etiqueta <A HREF> y </A>) un parámetro que diremos más tarde: TARGET.
bulletMARGINWIDTH="x". Es para los márgenes en anchura dentro de los frames, siendo x el número de píxels.
bulletMARGINHEIGHT="x". Como el anterior, pero con la diferencia de que dirá los márgenes en altura.
bulletSCROLLING="yes/no/auto". Es para decidir si tendrá o no barra deslizadora: con "yes" la tendrá siempre, con "no" no la tendrá nunca y con "auto" (por defecto) la tendrá sólo si se necesita.
bulletNORESIZE. Es para impedir que se redimensionen los frames.
bulletFRAMEBORDER="no". Es para quitar el borde, y habrá que introducirla en las etiquetas de los dos frames que lo comparten. Si se quieren quitar todos es mejor usarlo en FRAMESET.

bulletNOFRAMES. Indica lo que verán los navegadores que no soportan frames. Quedaría colocada así:

<HTML>
<FRAMESET...>
<FRAME...>
<FRAME...>
<NOFRAMES>
<body>
Tu navegador no soporta frames. Pulsa <A HREF="index.html">aquí<A> para acceder a la página de contenidos.
</body>
</NOFRAMES>
</FRAMESET>
</HTML>

bulletEl parámetro TARGET. Todo lo relacionado con esta etiqueta trata de pulsar enlaces en un frame y que se carguen en otro.

Con TARGET="xxx" introducido en un enlace <A HREF><A> tendremos que sustituir xxx por el nombre de otro frame. Ese nombre fue el que colocamos en NAME="xxx". Por ejemplo, al pulsar el enlace de:

<A HREF="ayuda.html" TARGET="Contenido"<Ayuda<A>

...se cargaría la página ayuda.html dentro del frame que contenga en su etiqueta FRAME SRC="xxx.html" NAME="Contenido".

TARGET tiene otros parámetros también muy útiles. Han de estar siempre en minúsculas:

bulletTARGET="_blank". Abre una nueva ventana del navegador con el enlace activado cargado a pantalla completa. Habrá dos ventanas del mismo navegador funcionando a la vez.
bulletTARGET="_self". Con él el enlace se carga dentro del propio frame. Si se elimina la etiqueta y no ponemos nada de TARGET conseguiremos lo mismo, por lo que no tiene mucha utilidad.
bulletTARGET="_top". El enlace se carga a pantalla completa dentro de la misma ventana del navegador. Esto es muy útil, y se suele olvidar ponerlo. Si no se pone, al cargar páginas ajenas a las nuestras se cargarían dentro del frame, y si tienen frames también el problema empeora. Hemos de introducirlo SIEMPRE cuando hagamos enlaces con URL completas de WEB ajenos al nuestro.

 

Recuerda que pueden colocarse frames dentro de otros frames. Por ejemplo, podemos decidir que un frame con forma de columna se divida en otros dos con forma de fila.

Si queremos una distribución así:


-----------------
| 1 |           |
|   |           |
|---|     3     |
|   |           |
| 2 |           |
|   |           |
-----------------
  

...tendremos que introducir un código similar al siguiente (hemos llamado a las tres páginas dentro de los frames 1, 2 y 3):

<HTML>
<HEAD><TITLE>Página con dos columnas y una de ellas divida en dos filas</TITLE></HEAD>
<FRAMESET COLS="25%, *">
<FRAMESET ROWS="40%, *">
<FRAME SRC="1.html">
<FRAME SRC="2.html">
</FRAMESET>
<FRAME SRC="3.html" NAME="Contenido">
<NOFRAMES>
<body>
Tu navegador no soporta frames. Pulsa <A HREF="index.html">aquí<A> para acceder a la página de contenidos.
</body>
</NOFRAMES>
</FRAMESET>
</HTML>


Ya para terminar veremos los frames flotantes. Son totalmente desconocidos para la mayor parte de los navegantes y/o creadores de páginas WEB. Sólamente funcionan con Microsoft Internet Explorer 3.0 o superior, y no es más que un recuadro con una página WEB que está contenido a su vez en otra. Se hace mediante la etiqueta <IFRAME> y </FRAME> además de una serie de parámetros más: NAME="xxx" es análogo al comando del mismo nombre de <FRAME>, es decir, para poder mediante TARGET cargar enlaces en el frame flotante. HEIGHT="x" y WIDTH="x" son los números de píxels en altura y anchura del hueco destinado para el frame flotante. SCROLLING="yes/no/auto". Con una de estas tres palabras decidimos si queremos poner barras de desplazamiento o bien que se coloquen automáticamente sólo si se necesitan. SRC="xxx.html". Es el nombre de la página WEB contenida dentro del frame flotante.

Aquí tenéis un único ejemplo que había antes en el WEB de Duiops. Mira cómo pulsando con el botón derecho del ratón sobre el frame flotante puedes ver el código fuente, ya que es una página totalmente independiente:

<IFRAME NAME="Copyright" HEIGHT="300" WIDTH="500" SCROLLING="NO" SRC="copyrigh.html">
</IFRAME>

 

 

Si se usa un navegador no compatible con este tipo de frames no podrán leerse. Para evitarlo conviene colocar entre <FRAME> y </FRAME> un código alternativo al mismo. Pondremos un ejemplo con el código exacto y más abajo lo incluiremos pero forzado para que se vea con todos los navegadores incluido el IE 3.0 o superior:

<IFRAME NAME="Copyright" HEIGHT="300" WIDTH="500" SCROLLING="NO" SRC="copyrigh.html">
<CENTER>
<P><FONT COLOR="#008080" SIZE="4"><B>© Duiops 1997</B></FONT>
</CENTER>
<BR><P>
<P><FONT COLOR="#008080">El diseño y código de las páginas, los gráficos de la barra de herramientas superior y gran parte del texto de los contenidos temáticos es propiedad del autor. Está prohibido su uso y/o reproducción del contenido del WEB antes mencionado sin permiso del mismo.
<P>Todas las marcas aquí mencionadas son propiedad de sus respectivos fabricantes y/o diseñadores.</FONT>
</IFRAME>

 

© Duiops 1997

El diseño y código de las páginas, los gráficos de la barra de herramientas superior y gran parte del texto de los contenidos temáticos es propiedad del autor. Está prohibido su uso y/o reproducción del contenido del WEB antes mencionado sin permiso del mismo.

Todas las marcas aquí mencionadas son propiedad de sus respectivos fabricantes y/o diseñadores.

 

Atrás Arriba Siguiente


 © 1997-2009 Duiops (http://www.duiops.net)
 Prohibida la reproducción parcial o total de los textos o las imágenes.

 Para comentarios, usar las direcciones e-mail de contacto