Crear Capas en la Web

Una capa es un contenedor en la pgina Web que contiene elementos de

pgina HTML. El uso de capas en la pgina proporciona mayor control y
flexibilidad, lo que la hace ms dinmica. Las capas se crearon para el diseo
Web con el fin de proporcionar a los diseadores un control y una
flexibilidad similares a los que tenan en el diseo tradicional para
impresin.
Las capas pueden apilarse una encima de otra, ocultar unas y mostrar
otras, o mover una capa por la pantalla con una lnea de tiempo. Todo esto
se puede hacer utilizando capas, sin necesidad de escribir cdigo
JavaScript o HTML.
Para crear una capa pulsamos Insertar, hacemos clic en Objetos de diseo y
seleccionamos Capa; o bien pulsamos en el botn Dibujar capa de la Ficha
Comn de la barra de herramientas Insertar. Marcamos la zona de pgina
Web donde queremos que empiece la capa y arrastramos con el ratn
mientras se pulsa el botn principal, hasta donde deseamos que termine.
Las capas se pueden anidar. Una capa anidada es aquella que se ha
creado dentro de otra capa. Usando las tcnicas de insercin, arrastrar y
soltar, se pueden crear capas anidadas. Una capa anidada se mueve junto
con su capa padre y puede configurarse para que herede la visibilidad de
sta.
Para crear una capa anidada, hacemos clic dentro de una capa existente
para activarla. Pulsamos en el men Insertar, hacemos clic en Objetos de
diseo y seleccionamos Capa. Tambin podemos crear capas anidadas
simplemente manteniendo pulsada la tecla Alt a la vez que dibujamos una
nueva capa en el interior de la que hayamos seleccionado. Al hacer esto,
Dreamweaver, relaciona la posicin de las capas anidadas en
correspondencia con la capa que la contiene. Es decir, podemos mover la
capa exterior y la capa interior se mover con ella, comportndose como una
nica capa.
Podemos anidar tantas capas como deseemos, sin ninguna restriccin de
tamao o de nmero. Para quitar el anidamiento de una capa respecto a otra,
simplemente tenemos que arrastrar la capa interior (la capa anidada) y
sacarla, situndola en cualquier otra posicin de la ventana documento.
Podemos asignar una definicin de estilo a cada capa, al igual que
podemos especificar la forma y dnde queremos que ese elemento en
concreto aparezca en la pgina, y el navegador se encargara por si solo de
interpretarlo y visualizarlo de forma correcta.
Trabajar con Capas
Las capas se pueden seleccionar, activar o cambiar su tamao. Cambiar el
tamao permite modificar las dimensiones de una sola capa o aplicar a dos
o ms capas las mismas dimensiones de alto y ancho. La activacin de las
capas permite colocar contenido dentro de ellas.
El panel Capas permite manejar las capas del documento. Se usa para evitar
solapamientos, cambiar la visibilidad, anidar o apilar capas y para
seleccionar una o ms capas. Para abrir el Panel Capas pulsamos en
Ventana y seleccionamos Capas.
Las capas se muestran como una lista de nombres siguiendo un orden de
ndice Z. La primera capa creada (Z=1) aparece al final de la lista y la ms
reciente (Z>1) aparece al principio.
Podemos cambiar el ndice Z de una capa para cambiar el lugar que
ocupa. Para ello pulsamos sobre el orden de apilamiento Z de la capa a
cambiar e introducimos el nuevo valor. Pulsamos Intro.
Podemos seleccionar una o varias capas para manipularlas o cambiar sus
propiedades. Para ello, pulsamos el men Ventana, hacemos clic en Capas.
Seleccionamos en el panel Capas la capa deseada.
Para seleccionar mltiples capas, en el panel Capas, presionamos la tecla
mayscula y hacemos clic en dos o ms nombres de capa. Tambin
podemos hacerlo en la ventana Documento. Para ello pulsamos la tecla
mayscula y hacemos clic en la parte interior o el borde de dos o ms
capas.
Mientras trabajamos con un documento, podemos mostrar y ocultar capas
manualmente utilizando el panel Capas para ver qu aspecto tendr la pgina
en distintas condiciones.
Al seleccionar una capa se hace visible y aparece delante de las otras. Para
cambiar la visibilidad de las capas, pulsamos debajo de la columna con el
icono del ojo en el panel capas para cambiar su visibilidad.
Si el ojo est abierto indica que la capa es visible; si est cerrado, la capa es
invisible y si no hay icono de ojo, generalmente la capa hereda la visibilidad
de su padre. Asimismo, el icono de ojo no aparece cuando no se especifica
visibilidad.
Podemos seleccionar una o varias capas para manipularlas o cambiar sus
propiedades. Para ello, pulsamos el men Ventana, hacemos clic en Capas.
Seleccionamos en el panel Capas la capa deseada.
Para seleccionar mltiples capas, en el panel Capas, presionamos la tecla
mayscula y hacemos clic en dos o ms nombres de capa. Tambin
podemos hacerlo en la ventana Documento. Para ello pulsamos la tecla
mayscula y hacemos clic en la parte interior o el borde de dos o ms
capas.
Mientras trabajamos con un documento, podemos mostrar y ocultar capas
manualmente utilizando el panel Capas para ver qu aspecto tendr la pgina
en distintas condiciones.
Al seleccionar una capa se hace visible y aparece delante de las otras. Para
cambiar la visibilidad de las capas, pulsamos debajo de la columna con el
icono del ojo en el panel capas para cambiar su visibilidad.
Si el ojo est abierto indica que la capa es visible; si est cerrado, la capa es
invisible y si no hay icono de ojo, generalmente la capa hereda la visibilidad
de su padre. Asimismo, el icono de ojo no aparece cuando no se especifica
visibilidad.
Dado que las celdas de las tablas no se pueden solapar, Dreamweaver no
puede crear una tabla a partir de capas solapadas. Si queremos convertir
las capas de un documento en tablas, usamos la opcin Evitar solapamiento
a fin de limitar el movimiento y la ubicacin de las capas y evitar su
solapamiento.
Cuando se activa esta opcin, no podremos solapar, mover, cambiar el
tamao o anidar capas. Si activamos esta opcin despus de crear las capas
solapadas, debemos separar las capas manualmente. Dreamweaver no
arregla de forma automtica las capas solapadas existentes.
Para evitar el solapamiento de capas, pulsamos en Evitar solapamiento en el
panel Capas, o bien pulsamos en la ventana Documento, seleccionamos
Modificar, hacemos clic en Organizar y pulsamos en la opcin Evitar
solapamiento de capas.
Podemos cambiar el tamao de una capa individual o de varias capas
simultneamente para asignarles la misma anchura y altura. Si est activa la
opcin Evitar solapamiento, no podremos cambiar el tamao de una capa para
que se superponga con otra. Para cambiar el tamao de una capa
seleccionamos la capa a la que se desea cambiar el tamao y cambiamos
los valores Anchura y Altura en el inspector de propiedades.
Para mover una o varias capas, seleccionamos la capa que deseamos
mover, arrastramos el manejador de seleccin con el botn principal del
ratn, o bien usamos los cursores desde el teclado.
Para alinear dos o ms capas, seleccionamos las capas que se desean
alinear. Desplegamos el men Modificar pulsamos en Organizar y elegimos
una de las opciones de alineacin.
Antes de colocar objetos en una capa, hay que activarla. Al activar una
capa, se coloca en ella el punto de insercin, se resalta el borde y aparece
el manejador de seleccin, pero no se selecciona la capa. Para activar una
capa hacemos clic en cualquier zona dentro de ella.
Para colocar objetos y contenido en una capa activamos la capa en la que
se va a introducir el contenido o el objeto. Hacemos clic en el icono Imagen de
la solapa Comn de la barra de herramientas Insertar y seleccionamos la
imagen deseada de la carpeta imgenes del Sitio Web.
En el caso de aadir texto en una capa, tecleamos el texto deseado y
cambiamos el formato del mismo si es necesario.
Propiedades de Capas
Las propiedades de las capas son accesibles desde el inspector de
propiedades, simplemente con seleccionar la capa.
En el inspector de propiedades encontramos:
ID de capa: Permite especificar un nombre para identificar la capa en el
panel Capas y en las secuencias de comandos.
Iz y Sup (izquierda y superior): Especifica la posicin de la capa con
respecto al ngulo superior izquierdo de la pgina o capa padre.
An y Al: Indica la anchura y altura de la capa. Si el contenido de la capa
excede del tamao especificado, estos valores son anulados.
La anchura y altura se mide en pxeles (px).
ndice Z: Determina el ndice z, u orden de apilamiento de la capa.
Vis: Es el estado inicial de visualizacin de la capa. Puede ser:
Default, el navegador del usuario decide la configuracin; Inherit, hace
que la capa tenga la misma propiedad que la capa que la contenga;
Visible, obliga a los navegadores a mostrar la capa y Hidden, oculta la
capa cuando la pgina es mostrada.
Im. Fondo: Especifica una imagen de fondo para la capa.
Col. Fondo: Determina un color de fondo para la capa. Si se deja en
blanco indica color transparente para la capa.
Etiqueta: Especifica la etiqueta HTML que se usar.
Desb. o desbordamiento: Indica lo que ocurre si el contenido de una
capa excede de su tamao. Las opciones son: Visible, obliga al
navegador a extender las dimensiones de la capa para ajustarla a su
contenido; Hidden, oculta el contenido que desborde los lmites de la
capa; Scroll, muestra barras de desplazamiento en la capa; Auto, slo
muestra las barras de desplazamiento cuando sea necesario.
Rec: Define el rea visible de una capa y se puede usar para cortar
contenido de los bordes de la capa especificando valores que
representen la distancia en pxeles desde los lmites de la capa.
Conversin entre Capas y Tablas
Podemos disear una pgina Web utilizando capas y, posteriormente,
convertir las capas en tablas para que el diseo pueda verse en los
navegadores antiguos.
Antes de la conversin de las capas en tablas, debemos asegurarnos de que
las capas no se solapen.
Para convertir las capas en una tabla, pulsamos en Modificar hacemos clic
en Convertir y seleccionamos la opcin Capas a tabla. Se mostrar el cuadro
de dilogo Convertir capas en tablas. En la ventana Convertir capas en tablas,
encontramos:
Ms preciso: Crea una celda para cada capa, junto con las celdas
adicionales necesarias para conservar el espacio entre capas.
Mnimo: Contraer celdas vacas. Especifica que los bordes de las
capas deben alinearse si se sitan a la distancia especificada en pxeles.
La tabla tendr menos filas y columnas vacas, pero puede no
coincidir exactamente con su diseo.
Utilizar GIF transparentes. Rellena la ltima fila de la tabla con GIF
transparentes. As se garantiza que la tabla aparezca con las mismas
anchuras de columnas en todos los navegadores. Si est activada, no
se puede editar la tabla resultante arrastrando sus columnas. Si est
desactiva, la tabla no contendr GIF transparentes, y los anchos de
columnas pueden variar segn el navegador.
Centrar en pgina. Centra la tabla resultante en la pgina. Si esta
opcin est desactivada, la tabla comienza en el borde izquierdo de la
pgina.
Seleccionamos las herramientas de diseo y las opciones de
cuadrcula deseadas.
Las capas ofrecen gran flexibilidad a la hora de colocar contenido. Pero los
visitantes que usen navegadores antiguos pueden experimentar problemas
al visualizarlas. Si deseamos asegurarnos de que todos los usuarios puedan
ver las pgina, debemos disearlas usando capas y, posteriormente,
convertir las capas en tablas.
Para convertir tablas en capas hacemos clic en Modificar, pulsamos en
Convertir y seleccionamos Tablas en capas. Se mostrar el cuadro de
dilogo Convertir tablas a capas. Seleccionamos las opciones deseadas y
pulsamos en Aceptar.
Las tablas se convertirn en capas. Las celdas vacas no se convierten en
capas a menos que tengan colores de fondo. Los elementos de la pgina
que estaban situados fuera de las tablas tambin se colocarn en capas.
Capas y Animacin
Se conoce por HTML dinmico, o DHTML, el lenguaje HTML capaz de
cambiar las propiedades de estilo o de ubicacin de elementos HTML con
un lenguaje de secuencias de comando.
Las lneas de tiempo, usan HTML dinmico para poder cambiar las
propiedades de las capas e imgenes, en una serie de fotogramas con el
transcurso del tiempo.
Las lneas de tiempo se pueden utilizar para crear animaciones sin
controles ActiveX, Plug-ins, ni Applets de Java. Las lneas de tiempo
crean la animacin al cambiar la posicin, el tamao, la visibilidad y el
orden de apilamiento de una capa con el transcurso del tiempo.
El panel Lneas de tiempo representa las propiedades de las capas e
imgenes en el transcurso del tiempo. Para activar el panel Lneas de
tiempo, pulsamos en el men Ventana y hacemos clic en Lneas de tiempo.
En el panel Lneas de tiempo encontramos las siguientes opciones:
El men desplegable de lnea de tiempo especifica qu lneas de
tiempo del documento se visualizan en el panel Lneas de tiempo.
El indicador de reproduccin muestra qu marco de la lnea de
tiempo se visualiza actualmente en la ventana de documento.
Los nmeros de marco indican la numeracin secuencial de los
marcos.
El nmero entre los botones de avance y retroceso representa el
nmero del marco (frame) actual. Es posible controlar la duracin de la
animacin definiendo el nmero total de marcos y el nmero de marcos
por segundo (fps).
La configuracin predeterminada de 15 marcos por segundo
representa una buena velocidad media para la mayora de los
navegadores que se ejecutan bajo Windows.
El men contextual contiene comandos relacionados con la lnea de
tiempo.
El canal de comportamientos representa el canal de los
comportamientos que se deben ejecutar en un marco especfico de la
lnea de tiempo.
Las barras de animacin muestran la duracin de la animacin de
cada objeto. Una sola fila puede incluir varias barras que representen a
distintos objetos. Las distintas barras no pueden controlar el mismo
objeto del mismo marco.
Los cuadros clave son marcos de una barra en la que ha especificado
propiedades para el objeto. Dreamweaver calcula valores intermedios
para los marcos que se encuentran entre los cuadros clave. Estos
cuadros se identifican mediante pequeos crculos.
Los canales de animacin muestran barras para las capas y las
imgenes animadas.
Adems encontramos las siguientes opciones de reproduccin: Botn
de rebobinado, desplaza el indicador de reproduccin hasta el primer
marco de la lnea de tiempo; Botn de retroceso, desplaza el indicador
de reproduccin un marco a la izquierda (mantener presionado el botn
del ratn para reproducir la lnea de tiempo hacia atrs); Botn de
reproduccin, desplaza el indicador de reproduccin un marco a la
derecha (mantener presionado el botn del ratn para reproducir la lnea
de tiempo hacia delante); Opcin Reprod. autom. (reproduccin
automtica), hace que la lnea de tiempo comience a reproducirse
automticamente cuando la pgina actual se carga en un navegador y
Opcin Bucle, genera un bucle indefinido de la lnea de tiempo actual
mientras la pgina est abierta en un navegador.
Para crear una animacin de lneas de tiempo, seleccionamos la capa a
animar. Pulsamos en Modificar, marcamos Lnea de tiempo y activamos
Registrar ruta de capa. Seleccionamos el manejador de capa para
desplazarla hasta la posicin en que aparecer al finalizar la animacin.
Dreamweaver aade una barra de animacin a la lnea de tiempo.
Hacemos clic sobre Aceptar en la ventana de informacin del Inspector de
las lneas de tiempo. Pulsamos en Reprod. automtica y mantenemos
pulsado el botn Reproducir para ver el resultado.
Una vez definidos los componentes bsicos de la lnea de tiempo, podemos
realizar cambios como agregar o quitar marcos, cambiar la hora de inicio
de la animacin, etc. A continuacin veremos algunas modificaciones en una
lnea de tiempo:
Para que la animacin se reproduzca durante ms
tiempo, arrastramos el marcador del marco final hacia la derecha.
Los cuadros clave de la animacin cambian para que las posiciones
relativas permanezcan constantes. Para evitar que se desplacen
otros cuadros clave, seleccionamos el marcador del marco y
arrastramos el ratn mientras presiona la tecla Control.
Para que la capa llegue a una posicin del cuadro clave antes o
despus, desplazamos el marcador del cuadro clave a derecha
o izquierda en la barra.
Para cambiar la hora de inicio de una animacin, seleccionamos una o
varias de las barras asociadas a la animacin y arrastramos a la
derecha o a la izquierda.
Para cambiar la ubicacin de una ruta completa de animacin,
seleccionamos toda la barra y, a continuacin, arrastramos el objeto a
la pgina.
Dreamweaver ajusta la posicin de todos los cuadros clave.
Cualquier cambio realizado en una barra completa seleccionada afecta a
todos los cuadros clave.
Para que la lnea de tiempo se reproduzca automticamente al abrir
la pgina, marcamos Reprod. autom. Esta opcin adjunta un
comportamiento a la pgina que ejecuta la accin de reproduccin de la
lnea de tiempo cuando se carga la pgina.
Para que la lnea de tiempo se reproduzca constantemente en un
bucle, marcamos Bucle. El bucle inserta la accin Ir a fotograma de
lnea de tiempo en el canal de comportamientos despus del ltimo
fotograma de la animacin.
Para aadir/quitar fotogramas de la lnea de tiempo: pulsamos en
Modificar hacemos clic en Lnea de tiempo y seleccionamos Agregar
marco o Quitar marco.
Cuando hayamos conseguido la secuencia de animacin deseada,
podemos copiarla y pegarla en otra zona de la lnea de tiempo actual,
en otra lnea de tiempo del mismo documento o en una lnea de
tiempo de otro documento.
Para cortar, copiar y pegar secuencias de animacin, seleccionamos
una barra de animacin. Para seleccionar varias secuencias,
presionamos la tecla mayscula y pulsamos en varias barras de
animacin; para seleccionar todas las secuencias, presionamos las
teclas Control + A.
A continuacin copiamos o cortamos la seleccin y seguimos uno de
estos procedimientos: desplazamos el indicador de reproduccin
hasta otro lugar de la lnea de tiempo actual; seleccionamos otra
lnea de tiempo en el men desplegable que muestra las lneas de
tiempo o abrimos otro documento o creamos uno nuevo y, a
continuacin, pulsamos en el panel Lneas de tiempo y pegamos la
seleccin.
Las barras de animacin para un mismo objeto no pueden
solaparse, ya que una capa no puede estar en dos sitios a la vez.
Si la barra de animacin que estamos pegando se solapa con otra para
el mismo objeto, Dreamweaver cambia automticamente la seleccin
al primer marco que no se solape.