|
|||||
|
|
|
|
|
|
|
|
||||
|
|
||||
|
|||||
Frames flotantes (I)
Es posible situar en nuestras paginas web una especie de frames o marcos "flotantes", queriendo decir con esto que son como frames pero que podemos situarlos en la posición que queramos dentro de nuestra pagina, situando mediante coordenadas su vértice superior izquierdo. Estas ventanas son configurables, pudiendo definir ademas de su posición su tamaño y otra serie de propiedades.
El mayor inconveniente que encontramos con estas ventanas flotantes es que su implementación es diferente en Internet Explorer y en Nestcape. Cada navegador posse una etiqueta y atributos diferentes para crear este tipo de marcos, no reconociendo uno las marcas del otro. Esta es otra de las consecuencias de la lucha entre ambas compañías, que como siempre hemos de pagar los creadores web.
Internet Explorer 3.0 y superiores implementa las etiquetas
<IFRAME>...</IFRAME>, que van a definir el
principio y fin del marco flotante. Estas etiquetas deben situarse dentro del cuerpo de la pagina que contiene
al marco, es decir, entre <BODY> y </BODY>.
Los principales atributos de la etiqueta <IFRAME> son:
* NAME=" nombre ", analogo al atributo de <FRAME>, sirve para identificar unívocamente al marco flotante, con vistas a referenciar su contenido mediante un enlace por medio del parametro TARGET.
* WIDTH= " x ", donde x = nº píxeles. Con este atributo definimos la anchura que va a tener el marco flotante.
* HEIGHT= " x ", donde x = nº píxeles. Con este atributo definimos la altura que va a tener el marco flotante.
* ALIGN= " left / center / right ", Va a definir si
el marco va a estar alineado a la izquieda en la ventana del navegador, centrado o a la derecha.
Ejemplo.- (Sólo para I.Explorer)
<html>
<head>
</head>
<body>
<iframe align="left" src="a.html"></iframe>
<iframe align="center" src="b.html"></iframe>
</html>
ver resultado.
* FRAMEBORDER= " 0 / 1 ", Este atributo
hace que el marco aparezca sin borde o con borde (valor por defecto) respectivamente.
Ejemplo.- (Sólo para I.Explorer)
<html>
<head>
</head>
<body>
<iframe src="a.html" frameborder="0" align="center" ></iframe>
</html>
ver resultado.
* VSPACE= " x ", donde x = nº píxeles. Nos sirve para posicionar el marco, y define la distancia entre el borde superior del marco y el límite superior de la ventana del navegador.
* HSPACE= " x ", donde x = nº píxeles.
Nos sirve para posicionar el marco, y define la distancia entre el borde izquierdo del marco y el límite
izquierdo de la ventana del navegador.
Ejemplo.- (Sólo para I.Explorer)
<html>
<head>
</head>
<body>
<iframe src="a.html" hspace="100" vspace="20"></iframe>
</html>
ver resultado.
* MARGINHEIGHT= " x ", donde x = nº píxeles. Nos define el espacio en píxeles que va a haber entre el borde superior del marco y su contenido.
* MARGINWIDTH= " x ", donde x = nº píxeles.
Nos define el espacio en píxeles que va a haber entre el borde izquierdo del marco y su contenido.
Ejemplo.- (Sólo para I.Explorer)
<html>
<head>
</head>
<body>
<iframe src="a.html" frameborder="1" marginwidth="60" marginheight="30"></iframe>
</html>
ver resultado.
* SCROLLING= " yes / no / auto ", que nos va a definir si el marco va a tener barra deslizadora siempre, nunca o sólo cuando sea necesario por exceder el contenido al tamaño del mismo. Su valor por defecto es auto.
* SRC= " ruta pagina html ", que nos va a definir la pagina web que se va a cargar dentro del marco flotante. Podemos especificar bien la ruta completa de la pagina en el directorio de nuestro servidor web o bien una URL completa de Internet.
* STYLE= " parametro-valor / parametro-valor / … ",
Este atributo es una aplicación directa de las Hojas de Estilo en Cascada (CSS), y nos permiten definir
la posición y tamaño del marco en la ventana del navegador. Si el frame flotante no contiene una pagina
web referenciada mediante SRC y contiene texto, también es posible aplicar estilos a este texto, como
color, fuente, tamaño, etc.
Ejemplo.- (Sólo para I.Explorer)
<html>
<head>
</head>
<body>
<iframe src="a.html" style="position:absolute;
left:100px;top:140px;width:400px;height:150px;"
>
</iframe>
</html>
ver resultado.
* CLASS= " clase ". analogo al anterior, pero ahora refiriendo el estilo del marco flotante (posición y tamaño) de acuerdo con una clase de estilos definida en la sección
de la pagina que contiene al marco o en un archivo externo de extensión ".css"* ID= " identificador ". En todo semejante al anterior, pero con la diferencia que ahora el nombre de identificador asignado debe ser único para cada marco en concreto. También posibilita cambiar dinamicamente las propiedades del marco usando un lenguaje de script, como JavaScript.
Si queremos, podemos colocar un texto alternativo entre las etiquetas <IFRAME>> e </IFRAME>, con el objeto de que aquellas personas cuyo navegador no soporte los marcos flotantes puedan contemplar un mensaje alternativo.
 |
 |