TEMA 13: Controlando los marcos (atributos)

MARCOS SIN BORDES

El problema para establecer los marcos sin bordes es que cada navegador implementa esta característica un poco como le da la gana. Y así nos encontramos con varios atributos posibles para lograr el mismo efecto y que no siempre funcionan bien. ¿Qué hay que hacer? Pues poner los atributos necesarios para que todos los navegadores muestren los marcos sin bordes, aunque sean redundantes.

En Netscape: border=”0″ en el primer frameset. (también funciona en las últimas versiones de Explorer).

En Explorer: frameborder=”0″ y framespacing=”0″, también en el primer frame set.

Sólo utilizando los tres atributos a la vez estaremos seguros de que los marcos se muestran sin bordes, al menos en estos dos navegadores.

<html>
<head>
<title>pagina con dos filas</title>
</head>
<frameset rows="20%, *" border="0" frameborder="0" y framespacing="0">
<frame src="superior.html" name="superior">
<frameset cols="15%, *">
<frame src="izqda.html" name="izqda">
<frame src="dcha.html" name="dcha">
</frameset>
</frameset>
<noframes>
</html>

Aquí está el resultado.

ATRIBUTOS DE LA ETIQUETA FRAMESET

La etiqueta FRAMESET, como hemos visto, es la que define la distribución, el número y tamaño de los frames. Además de los atributos: COLS (columnas) y ROWS (filas), podemos establecer otros.

border=”número de pixels”: te permite establecer el número de pixels que deben tener los bordes de los marcos, de todos a la vez. Si defines el borde en el primer frameset, todos los bordes de los marcos tomarán ese valor. Si defines el borde en un frameset anidado, sólo ese frameset y los anidados dentro de él tomarán ese valor, pero no los frameset “padres”. Veamos un ejemplo

<html>
<head>
<title>pagina con dos filas</title>
</head>
<frameset rows="20%, *" border="15">
<frame src="superior.html" name="superior">
<frameset cols="15%, *">
<frame src="izqda.html" name="izqda">
<frame src="dcha.html" name="dcha">
</frameset>
</frameset>
<noframes>
</html>

En este ejemplo, hemos definido un borde de 15 píxeles en el primer frameset y nada en el frameset anidado, este es el resultado.

<html>
<head>
<title>pagina con dos filas</title>
</head>
<frameset rows="20%, *">
<frame src="superior.html" name="superior">
<frameset cols="15%, *" border="15">
<frame src="izqda.html" name="izqda">
<frame src="dcha.html" name="dcha">
</frameset>
</frameset>
<noframes>
</html>

En este otro ejemplo, hemos definido un borde de 15 píxeles en el frameset anidado y nada en el frameset principal, este es el resultado.

<html>
<head>
<title>pagina con dos filas</title>
</head>
<frameset rows="20%, *"  border="5">
<frame src="superior.html" name="superior">
<frameset cols="15%, *"  border="25">
<frame src="izqda.html" name="izqda">
<frame src="dcha.html" name="dcha">
</frameset>
</frameset>
<noframes>
</html>

En este tercer ejemplo hemos definido un borde en el primer frameset y otro, mucho más ancho en el frameset anidado, este es el resultado; como podéis ver, el frame anidado tiene el mismo borde que el frameset principal, a pesar de que le hemos asignado un valor diferente.

bordercolor=”#rrggbb” Nos permite definir un color para los bordes, su comportamiento respecto a dónde definimos el color, es el mismo que en el caso anterior para la anchura del borde.

<html>
<head>
<title>pagina con dos filas</title>
</head>
<frameset rows="20%, *"  border="15" bordercolor="#ffcc00" >
<frame src="superior.html" name="superior">
<frameset cols="15%, *">
<frame src="izqda.html" name="izqda">
<frame src="dcha.html" name="dcha">
</frameset>
</frameset>
<noframes>
</html>

En este ejemplo, hemos definido un borde de 15 píxeles en el primer frameset con un color mostaza para el borde, este es el resultado.

ATRIBUTOS DE LA ETIQUETA FRAME

scrolling=”yes|no|auto” Sirve para determinar si queremos que haya barra de desplazamiento o que no la haya. La barra de desplazamiento aparece por defecto cuando es necesaria. Veamos los tres posibles valores:

    yes: Aparece siempre, haga falta o no.

    auto: Aparece sólo si es necesaria (es el valor por defecto si no establecemos nada.

    No: No aparece en ningún caso, aunque parte del contenido se quede fuera de la pantalla.

¿Os acordáis de la biblioteca virtual que veíamos en el tema anterior? En nuestro menú de autores no aparecía una barra de scroll porque no era necesario. Ahora vamos a modificar ese archivo para que la barra de scroll aparezca pese a no ser necesaria.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>mi pagina con frames</title>
</head>
<frameset cols="20%, 80%" scrolling="yes" >
<frame src="menu.html" name="menu" scrolling="yes">
<frame src="presentacion.html" name="principal">
</frameset>
<noframes>
Nuestra página no puede verse con el navegador que usted está utilizando, póngase en contacto con nuestro servicio de atención al cliente en clientes@empresa.com y le daremos toda la información que precise.
</noframes>
</html>

Este es el resultado.

marginwidth=”número de pixels”: Establecemos un margen para nuestro marco. Este margen se aplica al contenido de la página que aparece en ese marco. Si lo ponemos a 0 aparecerá pegado al borde del marco.
marginheight=”número de pixels” : Igual que el anterior, pero para el margen vertical.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>mi pagina con frames</title>
</head>
<frameset cols="20%, 80%" scrolling="yes">
<frame src="menu.html" name="menu" scrolling="yes" marginwidth="30"  marginwidth="0">
<frame src="presentacion.html" name="principal" marginheight="40">
</frameset>
<noframes>
Nuestra página no puede verse con el navegador que usted está utilizando, póngase en contacto con nuestro servicio de atención al cliente en clientes@empresa.com y le daremos toda la información que precise.
</noframes>
</html>

Ver el resultado

noresize: Es posible que os hayáis fijado (y si no hacedlo ahora) en que los bordes de los marcos se pueden mover. Simplemente hay que hacer click sobre el borde el marco y arrastrarlo hacia donde queramos. Con el atributo noresize se elimina esta posibilidad y los marcos quedan fijos en su sitio.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>mi pagina con frames</title>
</head>
<frameset cols="20%, 80%">
<frame src="menu.html" name="menu" noresize>
<frame src="presentacion.html" name="principal" noresize>
</frameset>
<noframes>
Nuestra página no puede verse con el navegador que usted está utilizando, póngase en contacto con nuestro servicio de atención al cliente en clientes@empresa.com y le daremos toda la información que precise.
</noframes>
</html>

Ver el resultado

bordercolor=”#rrggbb”: Nos perrmite especificar individualmente el color del borde de cada marco.

<html>
<head>
<title>pagina con dos filas</title>
</head>
<frameset rows="20%, *">
<frame src="superior.html" name="superior" bordercolor="#CC00FF">
<frameset cols="15%, *">
<frame src="izqda.html" name="izqda" bordercolor="#ffcc00" >
<frame src="dcha.html" name="dcha">
</frameset>
</frameset>
<noframes>
</html>

Ver el resultado

12 Marcos –  Indice –  14 Inline frames

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s