Métodos Avanzados / Márgenes de Marcos 

Hasta este punto solo hemos subido páginas de HTML bastante simples dentro de marcos en nuestro varios ejemplos de conjuntos de marcos: casi todos los archivos tenían un solo color sólido de fondo y un pedazo pequeño de texto (Frame 1, Frame 2, etc.). Ahora vamos a ver un ejemplo donde uno de los marcos contiene nada mas que una imagen: Example 11.

    
<frameset rows="20%,80%" border="0">       
  <frame src="file1.html">      
  <frame src="x3clockt.jpg">      
</frameset>      

Example 11 abre el conjunto de marcos en una ventana nuevas del navegador que otra vez es 400 pixels por  400. Para ilustrar nuestros siguientes puntos, hemos especificado a la ventana que no sea ajustable en tamaño. El marco superior ocupa 20% de la altura disponible, así que es 80 pixels de alto. El marco inferior ocupa 80% de su altura disponible; es 320 pixels de alto. (Hemos usado marcos sin bordes, especificando border=0 arriba, para asegurar que ningun espacio en el conjunto de marcos sea consumido por el borde entre los marcos. Esto es para garantizar que nosotros sabemos con seguridad cuán alto el marco inferior es en este caso.)

La imagen subida en el marco inferior es 263 pixels de ancho y 300 pixels de alto. Así que la imagen debe caber dentro del marco inferior, verdad? Bueno, puede que sí como puede que no. Eso dependerá de que navegador estés usando. En Netscape la imagen cabe dentro de la ventana inferior, pero en Internet Explorer no: existe una barra desplegable vertical en el marco inferior. (Pudiera ser que la parte inferior de la imagen quede un poco sobre o debajo de la orilla - dependiendo de la versión de IE.) (La imagen inferior puede ser reducida a 50% de su tamaño actual mostrado en el conjunto de marcos.)

Netscape Internet Explorer

En ambos casos notamos algo curioso: la imagen no cabe ajustada sobre el inferior ni superior del marco inferior. En vez hay márgenes entre éstas orillas de la imagen y el marco inferior. (La imagen es solo la foto rectangular de la torre de reloj. El fondo blanco alrededor de la foto no es parte de la imagen, es solo el fondo por omisión del navegadore.) Si observas bien, también notarás que tienen diferentes margenes superiores e inferiores en Netscape y en IE. De hecho, es porque IE tiene mucho mas acojinamiento vertical para las imágenes que Netscape es que nos da la barra desplegable en la parte inferior del conjunto de marcos con Explorer.

Qué está causando éste acojinamiento adicional? Por qué la cantidad de acojinamiento depende del navegador? Existe una manera de controlar la cantidad de acojinamiento, y hasta eliminarlo por completo?

Las cantidades de acojinamiento son diferentes para los navegadores.  Pero podemos pasar por encima de los valores de omisión con simplemente especificar los atributos de la (altura de margen) marginheight y (anchura de margen) (marginwidth) de las etiquetas de los marcos. Esto es lo que sucede si preparamos la altura de margen a cero: Example 11a.El HTML que crea el conjunto de marcos es:

<frameset rows="20%,80%" border="0">      
  <frame src="file1.html">      
  <frame src="x3clockt.jpg" marginheight="0">      
</frameset>    

Nota que aunque solo especificamos (altura de margen) marginheight="0", nos deshicimos del acojinamiento de la parte izquierda y al igual que el de la parte superior de la imagen.  Lo mismo sucede si solo especificamos marginwidth="0": Example 11b; o si tu preparas ambos márgenes a cero: Example 11c. (Si observas bien de cerca, puedes ver una diferencia muy sutil en éstos tres casos -11a, 11b, 11c - con Netscape. Cuál es? No ves este efecto con Explorer.)

También podemos prepara cualquiera de los dos la altura del margen o la anchura del margen o (hasta ambos) a cualquier valor numérico positivo deseado, si se deseara para cualquier caso en particular. Por ejemeplo, podríamos desear un offset mas largo : Example 11d o Example 11e.

Un Experimento (An Experiment): Si estás usando Explorer, deberás ver una barra desplegable en la parte inferior del marco aún cuando la imagen este completamente sobre la orilla inferior de la ventana del navegador ej., sobre la parte inferior del marco inferior). Por qué sucederá eso? Podemos entender porque sí vermos el conjunto de marcos nuevamente con los márgenes por omisión, pero esta vez abre el conjunto en una ventana ajustable de tamaño: Example 11f.

Como notaste anteriormente, si estás usando Explorer el marco inferior tiene una barra desplegable, pero si estás usando Netscape no la tiene.  Si tu navegador es Netscape, arrastra la orilla inferior de la ventana del ejemplo hacia arriba media pulgada para que puedas hacer el resto del ejercicio.  Cuando sueltes el botón del ratón te debe de aparecer una barra desplegable en el marco inferior. (No verás la barra desplegable mientras estés arrastrando la parte inferior de la ventana verticalmente; tienes que soltar el botón o arrastrar el cursor horizontalmente a lo largo de la parte inferior de la orilla de la ventana antes de que aparezca la barra desplegable en Netscape.)

Irremediablemente de tu navegador, debes de tener una barra desplegable en el marco inferior de Example 11. Coloca tu cursor en la orilla inferior de la ventana del ejemplo, mantén oprimido el botón del ratón y arrastra la orilla inferior de la ventana hacia abajo con mucho cuidado. Arrástrala hasta que la barra desplegable desaparezca. (Con Netscape tendrás que arrastrar un poco mas y después soltar el botón del ratón para ver si la barra desplegable ya ha despaparecido. Si aún está ahí, arrástrala un poco mas y después suéltalo nuevamente, etc. hasta que la barra desplegable desaparezca. Con Explorer debes ver la barra desplegable tomar tamaño y finalmente desaparecer mientras la arrastras.) Cuándo desaparece la barra desplegable? Será cuando el botón de la orilla del marco inferior (la parte inferior de la ventana)  está justo en la parte inferior de la imagen? O tendrás que arrastrar la parte inferior del marco mas abajo de eso

De hecho, la barra desplegable no desaparece tan pronto la parte inferior del marco está nivel con la parte inferior de la imagen. Tienes que continuar arrastrando la parte inferior del marco hacia abajo.  Si observas de cerca, verás que la barra desplegable finalmente desaparece cuando el marco está a una distancia debajo de la imagen que es egual al del acojinado de la altura del margen que ha sido entrado en el marco de arriba.

Ahora trata de arrastrar la lorilla derecha de la ventana del Example 11 hacia la izquierda hasta que aparezca una barra desplegable horizontal a lo largo de la orilla inferior del marco. Después arrastra la orilla derecha hacia la derechas hasta la barra desplegable desaparezca. El resultado de este experimento, cómo compara con el que tu acabas de hacer con la orilla de la parte inferior del marco? Como has descubierto, el valor de la altura y anchura del margen no son solo debido al acojinamiento entre una imagen y las orillas superiores e izquierda de un marco. Estas cantidades también especifican los márgenes inferior y derecha del contenido del marco. (Aunque creo que tu ya lo habías adivinado ?)

A riesgo de redundar en lo obvio, nota que la altura del margen y la anchura del margen especifican los márgenes de un marco irremediablemente del contenido del marco. Estos márgenes no solo aparecen cuando un marco contiene una sola imagen como en nuestros ejemplos anteriores. Ilustramos estas especificaciones de margen usando un marco aguantando una sola imagen por un par de razones. 1) La imagen fue arreglada en tamaño y no "se reformatearía" "reformat" cuando la ventana del navegador (y el conjunto de marcos) hayan sido cambiados de tamaños; así podíamos evitar complicar el ejemplo con texto de HTML que fluiría para acomodarse a la ventana mientras cambiaba de tamaño. Consecuentemente, siempre supimos la altura del contenido de los marcos,  y podíamos determinar si parecía razonable o no que el contenido debería acomodarse sin la barra desplegable. 2) Es poco probable que escojas cero como tamaño de márgenes para el marco que contendrá texto si tal margen causaría que el texto se amotinara a la orilla del marco.