|
|||||
|
|
|
|
|
|
|
|
||||
|
|
||||
|
|||||
Frames flotantes (II)
Nestcape Navigator 3.0 y superiores implementa las etiquetas
<ILAYER>...</ILAYER>, 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:
* 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.
* NAME=" nombre ", donde nombre va a ser la referencia que vamos a tener para cargar luego otras paginas web dentro del marco mediante enlaces con el atributo TARGET.
* PAGEX= " x ", con x = nº de píxeles. Define la posición horizontal de la esquina superior izquierda del ILAYER respecto a la ventana del navegador.
* PAGEY= " y ", con y = nº de píxeles. Define la posición vertical de la esquina superior izquierda del ILAYER respecto a la ventana del navegador.
* LEFT= " x ", donde x = nº píxeles. Es analogo a PAGEX en lo que respecta al elemento ILAYER.
* TOP= " x ", donde x = nº píxeles. Es analogo a PAGEY en lo que respecta al elemento ILAYER.
* 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.
* CLIP= " h,v ", Nos va a permitir " recortar "
el marco, de tal forma que sólo va a ser visible del mismo h píxeles de ancho y v píxeles de alto.
Esta operación va a ser necesaria hacerla siempre, ya que si no "recortamos" el marco flotante Nestcape
va a mostrar sólo aquella parte del mismo necesaria para mostrar la pagina, la imagen o el texto que
contenga.
Ejemplos.- (Sólo paraNestcape)
<html>
<head>
</head>
<body>
<ilayer src="a.html></ilayer>
</body>
</html>
ver resultado.
<html>
<head>
</head>
<body>
<ilayer src="a.html" clip="300,200"></ilayer>
</body>
</html>
ver resultado.
* BACKGROUND= " ruta imagen ", que
nos permite definir una imagen de fondo para el marco flotante, especificando su ruta completa.
La pagina cargada dentro del marco se mostrara encima de este fondo de imagen.
Ejemplo.- (Sólo para Nestcape)
<html>
<head>
</head>
<body>
<ilayer background="images/fondo.jpg" width="200" height="150" clip="200,150"></ilayer>
</html>
ver resultado.
* BGCOLOR= " color ", donde color viene
expresado por su nombre web en inglés o por su código hexadecimal, y que nos permite definir un
color de fondo para el marco flotante. La pagina cargada dentro del marco se mostrara encima de este color
de fondo.
Ejemplo.- (Sólo para Nestcape)
<html>
<head>
</head>
<body>
<ilayer bgcolor="#0099ff" width="200" height="150" clip="200,150"></ilayer>
</html>
ver resultado.
* VISIBILITY= " hide / show / inherit ", que nos va a determinar si el marco flotante sera oculto, se vera o si heredara esta propiedad del elemento que lo contiene.
* Z-INDEX= " n ", que nos da una coordenada de profundidad del marco, y que sera la que determine cual marco se va a ver en el caso de que varios se superpongan. Se vera el marco que tenga mayor valor de Z-INDEX. Esta etiqueta es dificultosa de usar en los marcos flotantes, ya que Nestcape tiende a situarlos " a su aire" cuando hay varios definidos en la misma pagina. Esto es debido a que una vez que asigna un espacio de pantalla para el primer ILAYER, se resiste a situar otro en ese espacio reservado. Este paramero, Z-INDEX, adquiere todo su significado en el tratamiento de capas generadas con las etiquetas <DIV> y <SPAN>.
* ABOVE. Indica que el ILAYER debe situarse encima de otro especificado.
* BELOW. Indica que el ILAYER debe situarse debajo de otro especificado.
Con todo esto podría parecer que Nestcape posee mas facilidades para crear marcos flotantes, pero no debemos dejarnos engañar por las apariencias, pués Explorer nos permite definir muchas propiedades del marco mediante CSS, cosa que no admite Nestcape.
Tanto la etiqueta <FRAME> de Explorer como la <ILAYER> de Nestcape estan en dehuso, ya que lo correcto es crear código útil para ambos navegadores.
Un truco para conseguir esto sería introducir dentro de un <IFRAME> un <ILAYER>.
así, Explorer entendería la primera etiqueta e ignoraría la segunda, y con Nestcape ocurriría al revés.
Ejemplo.- (ambos navegadores)
<head>
</head>
<body>
<iframe src="a.html" width="300" height="150" vspace="75" hspace="150">
<ilayer src="a.html" width="300" height="150" clip="300,150" top="75" left="150">
</ilayer>
</iframe>
</html>
ver resultado.
El problema vendría a la hora de referenciar una nueva pagina para el conjunto obtenido, y nos haría falta una función de JavaScript que fuera cargar la pagina en los dos marcos a la vez.
De todas formas, ya hemos dicho que estas etiquetas estan en dehuso, siendo sustituidas por " capas " definidas mediante CSS-P, es decir, mediante posicionamiento por Hojas de Estilo en Cascada.
 |
 |