| Las capas no son más
que unos recuadros, que pueden situarse en cualquier parte de la página,
en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse
y solaparse entre sí, lo que proporciona grandes posibilidades
de diseño.
Podemos insertar una capa a través
de las etiquetas <div> y </div>,
que como ya vimos, sirven para agrupar bloques de texto.
A través del atributo id
se le da un nombre a la capa, y a través del atributo style
se establecen el resto de propiedades de la capa.
A través de las propiedades left
(izquierda) y top (superior) se establece
la posición de la capa respecto a los márgenes izquierdo
y superior de la página. Pueden tomar un número como valor,
acompañado de px cuando haga referencia a píxeles,
y acompañado de % cuando haga referencia a un
porcentaje.
Para que la capa aparezca en la posición
establecida, es necesario incluir también la propiedad position
con el valor absolute. Si no se estableciera
este valor, la capa se mostraría pegada al margen izquierdo, en
la posición en la que hubiera sido insertada dentro del código.
A través de las propiedades width
(anchura) y height (altura) se establece
el tamaño de la capa. Pueden tomar un número como valor,
acompañado de px cuando haga referencia a píxeles,
y acompañado de % cuando haga referencia a un
porcentaje.
A través de la propiedad z-index
puede establecerse el índice de la capa dentro de la página.
Una capa podrá ser solapada por aquellas capas cuyo índice
sea mayor. Siempre es un valor numérico.
A través de la propiedad visibility
puede establecerse la visibilidad de la capa. Puede tomar los valores
inherit (se muestra la capa mientras
la capa a la que pertenece también se esté mostrando), visible
(muestra la capa, aunque la capa a la que pertenece no se esté
viendo) y hidden (la capa está
oculta).
A través de las propiedades layer-background-image
y background-image se puede establecer
una imagen de fondo para la capa. La ruta y el nombre de la imagen han
de aparecer entre paréntesis, después de la palabra url.
A través de las propiedades layer-background-color
y background-color se puede establecer
un color de fondo para la capa. Ha de ser un número hexadecimal.
A través de la propiedad overflow
puede establecerse si se mostrará o no el contenido de la capa
cuando no pueda ser visualizado en su totalidad, por ser la capa demasiado
pequeña. Puede tomar los valores visible
(se muestra todo el contenido de la capa, aunque esto implique hacer que
la capa sea más grande), hidden
(no es posible visualizar el contenido de la capa que no quepa en ella),
scroll (se muestra la barra de desplazamiento,
aunque el contenido de la capa pueda ser visualizado totalmente) y auto
(se muestra la barra de desplazamiento cuando sea necesario).
A través de la propiedad clip
puede establecerse el área de la capa que podrá ser visualizado.
Lo que hace es recortar la capa, haciendo que partes de ella no sean visibles.
Ha de especificarse la distancia de los márgenes de la capa entre
paréntesis, después de la palabra url.
El primer valor ha de ser la distancia (se
asume que está en píxeles) del margen superior,
hasta la que no se visualizará el contenido de
la capa.
El segundo valor ha de ser la distancia
del margen izquierdo, hasta la que no se visualizará
el contenido de la capa.
El tercer valor ha de ser la distancia del
margen superior, hasta la que se visualizará
el contenido de la capa.
El cuarto valor ha de ser la distancia
del margen izquierdo, hasta la que se visualizará
el contenido de la capa.
También es posible incluir auto
como valor de alguna de estas distancias, lo que indica que la distancia
se corresponderá con los bordes de la capa.
Todas estas propiedades se especifican a
través del atributo style, y
deben aparecer entre comillas dobles, con un punto y coma detrás
de cada una. Para asignar los valores a las propiedades no se utiliza
el símbolo = (igual), sino que se utiliza
el símbolo : (dos puntos).
Por ejemplo, podríamos insertar una
capa escribiendo el siguiente código:
<div id="capa"
style="position:absolute;
width:200px;
height:115px;
z-index:3;
visibility:
visible;
background-color:
#0099CC;
layer-background-color:
#0099CC; background-image:
url(imagenes/fondocapa.gif); layer-background-image:
url(imagenes/fondocapa.gif); clip:
rect(1 auto auto 3);">
Este texto está dentro de una
capa.
</div>
Otra forma de insertar capas es utilizando
las etiquetas <span> y </span>,
en lugar de las etiquetas <div>
y </div>.
La etiqueta <span>
se utiliza del mismo modo que la etiqueta <div>,
y es compatible con un mayor número de navegadores.
También existen las etiquetas <layer>
y </layer>, pero solamente son
reconocidas por el navegador Netscape.
La principal diferencia de la etiqueta <layer>,
en lo que se refiere a las otras dos, es que las propiedades de la capa
se especifican como atributos independientes, y no como valores dentro
del atributo style.
Por ejemplo, podríamos insertar una
capa escribiendo el siguiente código:
<layer name="capa"
width="200px"
height="115px"
z-index="3"
visibility="show"
bgcolor="#0099CC"
background="imagenes/fondocapa.gif">
Este texto está dentro de una
capa.
</layer>
|
