3.- LAYERS.
3.1.- DOCUMENTOS EN CAPAS.
Al pensar en un documento HTML podemos hacerlo en una serie de estratos o capas (layers) que conforman el contenido tal y como lo vemos.
En un documento HTML típico, podemos entender que sólo hay una capa, que es el documento en sí mismo. Ahora bien, con las nuevas herramientas (CSS posicionables y layers), podemos tener en un mismo documento HTML diversas capas con sus colores o imágenes de fondo, haciendo de sustento a los elementos HTML, y que podrán colocarse en cualquier lugar del documento.
La posición de esos layers se puede definir de forma exacta y puede variar en cualquier momento, además, éstos pueden solaparse o superponerse.
Un layer puede contener a otros, y esos a otros, siendo los más "altos" en la jerarquía los contenedores, y las acciones sobre éstos le afectarán a aquellos, ya que entre layers existe una relación de herencia.
Ver ejemplo de varios layers en capas: Documentos en capas.
3.2.- POSICIÓN EXACTA: CONTROL PIXEL A PIXEL.
Ahora es posible acceder a nivel de pixel al documento, colocando cada elemento en la posición exacta en la que queremos que aparezca.
Esto podemos hacerlo de dos maneras:
- Utilizando posición absoluta de layers: con estilos CSS o el tag <LAYER>
- Utilizando posición (de layers) relativa al layer contenedor: con estilos CSS o el tag <ILAYER>
-
El estilo CSS para definir un layer posicionado de forma absoluta siempre incluye la propiedad
position con el valor absolute, que indica una posición absoluta del layer contenedor dentro del layer (o documento) que lo contiene.
Si optamos por utilizar el tag <LAYER>, debemos tener en cuenta que se creará un layer con posición absoluta, y NO es compatible con el Internet Explorer.
-
El estilo CSS para definir un layer posicionado de forma relativa siempre incluye la propiedad
position con el valor relative, que indica una posición relativa del layer contenedor dentro del layer (o documento) que lo contiene.
Si optamos por utilizar el tag <ILAYER>, debemos tener en cuenta que se creará un layer con posición relativa, y NO es compatible con el Internet Explorer.
Ahora tenemos dos tipos de elementos, los pertenicientes al flujo HTML y los independientes de dicho flujo.
Al construir una página HTML, los elementos son visualizados segun el orden en que han sido definidos, y siempre siguiendo ese orden: elementos que han sido definidos antes que otros apareceran antes que aquellos. Estos son los elementos pertenecientes al flujo HTML. Entre estos elementos no se puede dar una situación de solapamiento.
Los elementos independientes del flujo son aquellos a los que le podemos definir su posicion de forma absoluta, con lo cual podemos situarlos en cualquier zona de la ventana del navegador, sin que ocupen sitio en el flujo normal. De esta forma, en una pagina HTML podremos tener bloques de contenidos solapandose entre si (aquellos a los que se les establezcan las propiedades left, top podrán situarse sobre otros).
Dentro del primer tipo, podremos controlar su posición, pero siempre relativa al flujo normal. El segundo tipo, quedará siempre definido por una posición dada, por lo que puede aparecer en cualquier parte del documento.
3.3.- POSICIÓN ABSOLUTA.
Si un layer tiene posición absoluta, podemos especificar su posición en su layer contenedor o en el documento, si no está definido dentro de otro layer. Podemos definir la posición exacta, estableciendo la coordenada superior izquierda, dada por left y top.
Un layer de este tipo se considera fuera del flujo HTML, en cuanto a que puede aparecer en cualquier sitio en un documento HTML: no ocupa espacio en el flujo del documento.
Para crear un layer con posición absoluta, podemos usar el tag <LAYER> o bien un estilo CSS que haga uso de la propiedad position con valor absolute. Por ejemplo:
Layer creado con el tag <LAYER>:
<LAYER ID=layer1 TOP=200 LEFT=260>
<P>contenido del layer1,
cuya coordenada izq es (200,260)</P>
</LAYER>
Layer creado con un estilo CSS:
<HEAD>
.....
<STYLE type="text/css"> <!--
#layer1 {
position: absolute;
top:200px; left:260px;
}
--> </STYLE>
.....
</HEAD>
<BODY ......
.....
<!--
Usamos el estilo definido anteriormente en la parte de la cabecera(head)
-->
<DIV ID=layer1>
<P>contenido del layer1,
cuya coordenada izq es (200,260)</P>
</DIV>
.....
O también podemos crear el Layer con CSS de la siguiente forma:
<DIV ID=layer1 STYLE="position:absolute; top:250px; left:260px">
<P>contenido del layer1,
cuya coordenada izq es (200,260)</P>
</DIV>
Ver ejemplo de layers con posición absoluta creados con estilos CSS: Layers CSS.
Ver ejemplo de layers con posición absoluta creados con el tag LAYER: Layers LAYER.
3.4.- POSICIÓN RELATIVA.
Un layer con posición relativa es un layer que ocupa espacio en el flujo HTML del documento, y aparece en el sitio natural que le corresponde en dicho flujo.
Para crear un layer con posición relativa, podemos usar el tag <ILAYER> o bien un estilo CSS que haga uso de la propiedad position con valor relative. Por ejemplo:
Layer creado con el tag <ILAYER>:
<ILAYER ID=layer2>
<P>contenido del layer2,
cuya posicion es relativa</P>
</LAYER>
Layer creado con un estilo CSS:
<HEAD>
.....
<STYLE type="text/css"> <!--
#layer2 {
position: relative;
}
--> </STYLE>
.....
</HEAD>
<BODY ......
.....
<!--
Usamos el estilo definido anteriormente en la parte de la cabecera(head)
-->
<DIV ID=layer2>
<P>contenido del layer2,
cuya posición es relativa</P>
</DIV>
.....
O también podemos crear el Layer con CSS de la siguiente forma:
<DIV ID=layer2 STYLE="position:relative; ">
<P>contenido del layer2,
cuya posición es relativa</P>
</DIV>
La posición de un layer se indica a través de los parámetros LEFT y TOP. En el caso de CSS, será necesario especificar sus unidades, pero con la etiqueta <LAYER> se entiende que se trata de píxeles. En layers con posición absoluta, se toma como origen de coordenadas la esquina superior izquierda del documento; si el layer depende directamente del mismo, o del layer contenedor, si se trata de un layer "hijo". En layers con posición relativa, el origen de coordenadas es la posición que ocuparían en el flujo HTML. Los atributos LEFT y TOP pueden tomar valores negativos. Por ejemplo:
Esta <SPAN STYLE="position:relative; top:-5pt;">
palabra</SPAN> está desplazada hacia arriba 5 píxeles.
O bien:
Esta <ILAYER TOP=-5pt>palabra</ILAYER>
está desplazada hacia arriba 5 píxeles.
Ver ejemplo de layers con posición relativa: Posicion relativa.
3.5.- ATRIBUTOS Y PROPIEDADES DEL TAG <LAYER>.
Más arriba hicimos referencia a los tags <LAYER> y <ILAYER>, pues bien, ahora pasaremos a examinar en profundidad todas sus propiedades y las equivalentes en CSS, y veremos cómo definir layers con sintaxis CSS o con el tag <LAYER> más complejos que los definidos hasta ahora.
En este punto sólo incluiremos las propiedades relevantes para los layers. Por supuesto, una definición de un layer como CSS, puede incluir cualquier propiedad CSS.
NAME: Se usa para dar un nombre identificativo del layer para acceder después a sus propiedades desde JS. ID: Se usa como un nombre para referenciar al layer desde un lenguaje de script.Por defecto, los layers no tienen nombre. <LAYER ID=layer1>
#layer1 {position:absolute;}
LEFT y TOP: Especifican la posición horizontal y vertical de la esquina superior izquierda del layer dentro de su layer contenedor, o del documento si está en nivel superior. Son parámetros opcionales. Los valores por defecto son la posición que ocuparía el contenido del layer si no estuviera incluido en el layer.Las unidades por defecto, si se utiliza el tag <LAYER> son pixels. Si ha sido definido como un estilo, debemos especificar las unidades.
Para layers con posición absoluta, el origen de coordenadas es la esquina superior izquierda del documento o del layer contenedor. Las coordenadas se incrementan hacia abajo y hacia la derecha.
Con LAYER:
<LAYER BGCOLOR="yellow" TOP=300 LEFT=70 WIDTH=400 HEIGHT=200>
<P>Párrafo en un layer con posición absoluta</P>
<LAYER BGCOLOR="red" TOP=50 LEFT=20 WIDTH=200 HEIGHT=100>
<P>Párrafo en el layer hijo con posición absoluta</P>
</LAYER>
</LAYER>
Con CSS:
<DIV STYLE=" position:absolute; background-color:yellow;
top:300px; left:70px; width:200px; height:200px;
border-width:1px;">
<P>Párrafo en un layer con posición absoluta</P>
<DIV STYLE=" position:absolute; background-color:red;
top:50px; left:20px; width:150px; height:120px;
border-width:1px;">
<P>Párrafo en el layer hijo con
posición absoluta</P>
</DIV>
</DIV>
Ver ejemplo de layers con posición absoluta creados con estilos CSS: Layers CSS.
Ver ejemplo de layers con posición absoluta creados con el tag LAYER: Layers LAYER.
Para layers con posición relativa, el origen de coordenadas es la posición "natural" del layer en el flujo HTML del documento, en lugar de la esquina del layer contenedor en la página. Podemos usar estos parámetros para desplazar un layer con posición relativa de su posición "natural".
Con LAYER:
<ILAYER LEFT=20>
Este layer con posición relativa está desplazado 20
pixels a la DERECHA de su posición normal en la página.
</ILAYER>
<ILAYER TOP=10>
Este layer con posición relativa está desplazado 10
pixels hacia ABAJO de su posición normal en la página.
</ILAYER>
Con CSS:
<P STYLE=" position:relative; left:20px;">
Este layer con posición relativa está desplazado 20
pixels a la DERECHA de su posición normal en la página.
</P>
<STYLE="text/css"><!--
UP{position:relative; top:-10pt;}
DOWN{position:relative; top:10pt;}
--></STYLE>
...
...
<P>
Este texto <SPAN CLASS=UP>sube</SPAN> y
<SPAN CLASS=DOWN>baja</SPAN>.
</P>
Ver ejemplo de layers con posición relativa: Posicion relativa.
PAGEX y PAGEY: Son atributos del tag <LAYER>; no hay equivalentes para CSS.Especifican las posiciones horizontal y vertical en pixels de la esquina superior izquierda del layer, con relación al documento, y no al layer contenedor. SRC y Source-include: Especifican un fichero externo que contiene codigo HTML que será visualizado en el layer.El fichero puede contener codigo JS, y los layers que defina serán tratados como hijos del layer para el que estamos especificando el contenido.
Con LAYER:
<LAYER TOP:50 LEFT:25 WIDTH:175 SRC="content1.htm">
</LAYER>
Con CSS:
<STYLE="text/css"><!--
#layer1{
position:absolute; top:50pt; left:25pt; width:175pt;
include-source:url("content1.htm");
background-color: purple;
color: yellow; border-width:1pt;}
--></STYLE>
...
...
<DIV ID=layer1>
</DIV>
La propiedad include-source de CSS es válida sólo en N4, con lo cual E4 la ignora. Sin embargo, E4 también nos permite la inclusión de documentos HTML en layers, mediante el tag (que sólo E4 reconoce) <IFRAME>, del siguiente modo:
<IFRAME SRC="inc1.htm" NAME="textframe" SCROLLING="No"
WIDTH="300" HEIGHT="200" MARGINWIDTH=0 MARGINHEIGHT=0
FRAMEBORDER="No">
</IFRAME>
estas diferencias entre N4 y E4 serán analizadas en profundidad en el tema de INCOMPATIBILIDADES.
WIDTH: Determina la anchura del layer, en valor absoluto o porcentual respecto al layer contenedor, a la que los contenidos se deben ajustar (como siempre hemos visto que se hace en una página HTML). Si los contenidos no pueden ajustarse porque son demasiado grandes, automáticamente se modifica la anchura del layer para adaptarse a la del elemento que no cabe.Si no se indica este atributo, la anchura del layer se adaptará a la anchura de los elementos. HEIGHT: Determina la altura del layer, en valor absoluto o porcentual respecto al layer contenedor, a la que los contenidos se deben ajustar. Si los contenidos no pueden ajustarse porque son demasiado grandes, automáticamente se modifica la altura del layer para adaptarse a la del elemento que no cabe.Si no se indica este atributo, la altura del layer se adaptará a la de los elementos. CLIP: Cuando un layer es visible, podemos establecer un área de visibilidad de su contenido. Todo lo que quede fuera de ese área rectangular quedará "cortado".Para definir esa área de visibilidad se utiliza este parámetro, que viene determinado por cuatro parámetros que indican los límites izquierdo, superior, derecho e inferior. El valor se da como un conjunto de cuatro números separados por comas y entre comillas. Si se omiten las comillas, debemos tener cuidado de no incluir espacios entre los números y las comas. En CSS, el área se da como rect(sup,der,inf,izq), mientras que en LAYER se especifica como CLIP="izq,sup,der,inf". Si se omite este parámetro, el área de visibilidad vendrá determinada por los valores de WIDTH y HEIGHT.
Con LAYER:
<LAYER CLIP="20,20,50,100">
Con CSS:
clip:rect(0,100,100,0);
Si sólo especificamos un par de valores, se entiende que la primera coordenada es la (0,0) :
CLIP="10,20"
equivale a:
CLIP="0,0,10,20"
Z-INDEX, ABOVE, BELOW: Los dos últimos son aplicables sólo al tag <LAYER> y no hay correspondientes en CSS.Estos parámetros especifican el z-orden de los layers, esto es, el orden de apilamiento de los layers del documento. Los layers con mayor Z-INDEX son colocados encima de los que tengan menor Z-INDEX, quedando estos últimos tapados por los primeros. Sólo se permiten valores enteros positivos para este parámetro.
El atributo ABOVE especifica el layer inmediatamente encima del recien creado, esto es, el nuevo layer es creado justo por debajo del layer especificado.
El atributo BELOW especifica el layer inmediatamente debajo del recien creado, esto es, el nuevo layer es creado justo por encima del layer especificado.
Los layers especificados para quedar por encima o por debajo deben existir previamente.
Ver ejemplo de Z-INDEX: z-index.
VISIBILITY. Este parámetro determina si un layer es visible o invisible y puede tomar los siguientes valores: SHOW, que hace visible la capa; HIDE, que la hace invisible; INHERIT, que hace que herede esta propiedad del layer contenedor, y es el valor por defecto.Un layer con posición relativa ocupa espacio en el flujo HTML, tanto si es visible como si es invisible (queda un hueco vacío). Un layer visible, será mostrado sólo si no hay otro opaco encima de él.
Ver ejemplo de VISIBILITY: visibility.
BGCOLOR y BACKGROUND-COLOR: El atributo del tag <LAYER> BGCOLOR y la propiedad de CSS BACKGROUND-COLOR determinan el color sólido de fondo de un bloque HTML. Los colores se indican como en CSS (un nombre válido o una codificación RGB hexadecimal).
Por defecto los layers son transparentes, esto es, se puede ver lo que queda debajo a través de las zonas del layer que no están ocupadas por contenido HTML.
Si un layer se define usando el tag <LAYER>, su color de fondo es aplicado a toda la zona rectangular del layer.
Cuando se asigna un color sólido de fondo a un layer definido como estilo CSS, el color de fondo sólo se aplica a aquellas zonas del layer con contenido, las opacas, por lo que seguirán existiendo zonas transparentes. Si el estilo tiene bordes, entonces sí dejarán de existir zonas transparentes y el color sólido se extenderá a todo el layer; aunque aún por los bordes habrá un margen transparente. Esto sólo se puede evitar utilizando la propiedad CSS Layer-background-color (sólo soportada por el Navigator 4).
Ver ejemplo de uso del color de fondo en layers: BGCOLOR.
BACKGROUND y BACKGROUND-IMAGE: El atributo del tag <LAYER> BACKGROUND y la propiedad de CSS BACKGROUND-IMAGE especifican una imagen a colocar de fondo del layer.El valor asignado es el URL de una imagen. Aquí se presentan los mismos casos que con el punto anterior, existiendo la propiedad CSS Layer-background-image (sólo soportada por el Navigator 4) para evitar dichos problemas.
Ver ejemplo de uso de las imágenes color de fondo en layers: BACKGROUND.
Position: Aplicable sólo a layers definidos como estilos CSS. Puede tomar los valores absolute o relative.
#layer1 {position:absolute;}
#layer2 {position:relative;}
3.6.- ELEMENTO <NOLAYER>.
Este elemento viene a solucionar un problema que se nos puede plantear si estamos diseñando páginas que serán visualizadas en otros navegadores distintos del Navigator 4.x y aún así deseamos hacer uso del tag <LAYER>. En ese caso, el tag <NOLAYER> hace posible añadir contenido a la página que será visualizado por navegadores antiguos (o el Explorer 4) que no soportan el <LAYER>.
Navigator 4.x ignora cualquier contenido entre <NOLAYER> y </NOLAYER>. Los navegadores antiguos y el IE ignoran los tags en sí, con lo cual, hacemos que estos navegadores visualicen lo que hay entre esos tags, y no lo que hay en el <LAYER>.
Esto viene a ser lo mismo que pasa con <FRAME> y <NOFRAMES>: los navegadores que no soportan frames, ignoran lo que hay entre los tags <FRAME> y </FRAME>, y visualizan lo que hay entre los tags <NOFRAMES> y </NOFRAMES>. Por otro lado, los navegadores que si soportan frames, visualizan lo que hay entre los tags <FRAME> y </FRAME>, e ignoran lo que hay entre los tags <NOFRAMES> y </NOFRAMES>.
Este punto lo hemos nombrado para terminar de hablar del <LAYER>, <ILAYER> y <NOLAYER>, pero será en el capítulo dedicado a las incompatibilidades entre navegadores y a cómo hacer páginas lo más compatibles y "visualizables" posible en todos ellos, donde tratemos a fondo esta etiqueta alternativa.
3.7.- Ejercicios.
Para hacer los ejercicios de este tema pulsa aquí
|
