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