Captulo 10 Capas

Captulo 10. Capas

Captulo 10. CAPAS

Una capa en Dreamweaver MX no es ms que un elemento HTML que puede colocarse en cualquier parte del documento que estemos creando. En dichas capas se puede colocar texto, imgenes,... y , en general, cualquier contenido HTML. Es posible realizar operaciones muy variadas con las capas adems de insertar elementos dentro de ellas: podemos superponer varias capas, hacer que algunas de ellas aparezcan o desaparezcan, moverlas desde una parte de la pgina a otra, redimensionarlas,... con lo cual disponemos de una gran cantidad de opciones de diseo. Los navegadores ms antiguos (anteriores a Microsoft Internet Explorer 4.0 y Netscape Navigator 4.0) no son compatibles con el uso de capas en HTML, no las visualizan correctamente o, en ocasiones, directamente no las muestran. Por este motivo si pensamos que los usuarios de nuestra pgina dispondrn de dichos navegadores deberemos especificar un contenido alternativo para que la visualicen correctamente, si por el contrario pensamos que este caso no se va a dar podemos trabajar tranquilamente con capas en nuestra pgina web.

10.1. Crear capas

Capas en HTML
En cdigo HTML una capa se representa mediante las etiquetas <div> y </div> de inicio y fin de capa respectivamente. Es posible utilizar tambin las etiquetas de inicio y fin <span> y </span> para delimitar el comienzo y el fin de una capa aunque es ms conveniente que usemos <div> porque proporciona una mayor compatibilidad con aquellos navegadores que no admiten capas. Un ejemplo de cmo quedara el cdigo HTML de una capa sera el siguiente:
<div id="Micapa" style="position:absolute; left:182px; width:153px; height:138px; z-index:1"> Ejemplo </div> top:33px;

Opciones predeterminadas de las capas

Dentro de las preferencias establecidas en Dreamweaver MX existe un apartado dedicado a las capas, en el cual podemos especificar las opciones predeterminadas que tendrn las capas en el momento que las creemos. Para llegar a estas preferencias hacemos clic en el men Edicin>Preferencias y seleccionamos la categora Capas.

Dreamweaver MX 2004

255

Captulo 10. Capas

Figura 10.1. Seleccionando las preferencias. Nos aparece el cuadro de dilogo Preferencias, en la seccin Categoras seleccionamos Capas.

Figura 10.2. Opciones predeterminadas de las capas. Una vez que hemos seleccionado la categora Capas disponemos de varios valores para configurarlos: Visibilidad: indicamos cul ser la visibilidad predeterminada de las capas: o Default: (predeterminada) la visibilidad depende del navegador que est accediendo a la pgina.

256

Dreamweaver MX 2004

Captulo 10. Capas

o Inherit: (heredada) para que la capa que se cree herede la visibilidad de la capa padre. o Visible: (visible) para que la capa se muestre en cualquier caso. o Hidden: (oculta) para que la capa se oculte en cualquier caso. Ancho: especificamos el ancho por defecto de la capa en pxeles. Alto: especificamos el altura predeterminada de la capa en pxeles. Color de fondo: podemos escoger el color de fondo que tendr la capa mediante el selector de colores ( ) o indicando en este campo su valor hexadecimal. Imagen de fondo: desde aqu podemos indicar el nombre del archivo de la imagen de fondo en todas las capa que creemos. Anidar: permitimos el anidamiento de una capa en otra al crearla en un punto interior de la capa padre. Compatibilidad con Netscape 4: activamos las opciones de compatibilidad con el navegador Netscape 4.

Insertar capas
En Dreamweaver MX podemos aadir una capa a travs de los mens de la aplicacin siguiendo la ruta Insertar>Objetos de diseo>Capa.

Figura 10.3. Insertando una capa. Tambin podemos aadir una capa haciendo clic en el botn Dibujar capa ( ) en la categora Diseo de la barra Insertar.

Dreamweaver MX 2004

257

Captulo 10. Capas

Una vez aadida la capa el aspecto que mostrara el documento actual que estemos creando en Dreamweaver sera el siguiente:

Figura 10.4. Documento HTML con una capa. A medida que vamos aadiendo capas a nuestro documento HTML, se hace ms difcil poder seleccionar cada una de ellas individualmente. Para poder seleccionar una capa, podemos seguir cualquiera de los siguientes procedimientos: Desde el manejador de seleccin de capa ( ). Este se hace visible sobre la capa cuando colocamos el cursor en su interior. Haciendo clic sobre el borde de la capa, cuando al acercar el cursor del ratn, ste cambia de forma ( ). Manteniendo pulsadas las teclas Control y Maysculas, hacemos clic en el interior de la capa. Haciendo clic en el nombre de la capa en el panel Capas dentro del grupo de paneles Diseo. Para activar dicho panel debemos hacer clic en Ventana>Capas (o bien presionando la tecla F2).

258

Dreamweaver MX 2004

Captulo 10. Capas

Figura 10.5. Activar el panel Capas. Una vez activado dicho panel, aparecer en l un listado con el nombre de todas las capas que forman parte de nuestro documento, pudiendo seleccionar individualmente cada una de ellas. La primera capa que hayamos creado ser la que aparezca la ltima en esta lista.

Figura 10.6. Aspecto del panel Capas. Adems, en este panel podemos indicar si queremos que una capa est visible o no haciendo clic al lado de cada una de las capas: el icono indica que dicha nos indica que dicha capa no es capa est visible, por el contrario el icono visible. Las capas anidadas se mostrarn de forma que aquella que se encuentre en el interior de otra, se situar inmediatamente debajo de sta y adems con una lnea vertical indicando de qu capa depende. Tambin es posible Evitar solapamiento entre capas si activamos la casilla de verificacin con ese ttulo que se encuentra en el mismo panel Capas. RECOMENDACIN. Si queremos seleccionar varias capas, deberemos mantener presionada la tecla Maysculas mientras hacemos clic en el borde o dentro de las capas que vayamos a seleccionar. Tambin podemos seleccionar varias capas desde el panel Capas, manteniendo presionada la tecla Maysculas mientras hacemos clic en los nombres de las capas.

Dreamweaver MX 2004

259

Captulo 10. Capas

10.2. Propiedades de las capas

Para modificar las propiedades de la capa que acabamos de crear, debemos tenerla seleccionada previamente. Las caractersticas de la capa seleccionada se especifican en el Inspector de Propiedades.

Figura 10.7. Inspector de propiedades de una capa. ID de capa: asignamos un nombre a la capa que estamos creando. Tambin es posible modificar el nombre de dicha capa haciendo doble clic sobre la misma en el panel Capas. Iz: (izquierda) indicamos la distancia en pxeles entre el lmite izquierdo del documento y la capa. Sup: (superior) indicamos la distancia en pxeles entre el borde superior del documento y la capa que se est modificando. An: (anchura) especificamos la anchura de la capa medida en pxeles. Al: (altura) especificamos la altura de la capa en pxeles. ndice Z: es el identificador nico para cada capa que indica el orden en el que se visualizar cada capa (orden de apilamiento). Las capas con un ndice Z mayor se superponen a aquellas con un ndice menor y viceversa. Este valor lo podemos modificar tambin en el panel Capas. Vis: (visibilidad) de la misma forma que podemos hacer en el panel Capas, tambin es posible desde aqu modificar la visibilidad de las capas, segn los siguientes valores: o Default: (predeterminado) la visibilidad depende del navegador que est accediendo a la pgina. La mayora de los navegadores utilizan la propiedad Heredada como predeterminada. o Inherit: (heredado) la capa se muestra o no segn el valor que se hay especificado para la capa padre. o Visible: (visible) hace visible la capa independientemente del valor que tenga asignada la capa padre. o Hidden: (oculto) la capa se oculta y no se mostrar.

260

Dreamweaver MX 2004

Captulo 10. Capas

Im. fondo: (imagen de fondo) situamos una imagen de fondo en la capa si as lo deseamos. Slo tenemos que hacer clic en el icono que representa una carpeta ( ) y seleccionar la imagen en nuestro disco duro. Col. fondo: (color de fondo) si en lugar de una imagen lo que queremos situar como fondo de una capa es un color, podremos seleccionarlo desde aqu, bien escribiendo su valor hexadecimal, o bien seleccionndolo desde la paleta de colores. Clase: nos permite dar un formato determinado a la capa al seleccionar una hoja de estilo de esta lista desplegable. Desb: (desbordamiento) controlamos cmo van a aparecer las capas en el navegador cuando el contenido en su interior supera los lmites especificados para ella. Existen cuatro posibles valores para controlar el desbordamiento: o Visible: (visible) se ampla el tamao de la capa para hacer visible todo el contenido. o Hidden: (oculto) el contenido adicional no se va a mostrar en la capa. o Scroll: (desplazamiento) el navegador mostrar barras de desplazamiento en la capa tanto si son necesarias como si no. o Auto: (automtico) las barras de desplazamiento aparecern slo cuando sean necesarias en la capa.

Rec: (recorte) con esta propiedad podemos especificar qu parte de toda la capa queremos que sea visible. Con las coordenadas que se muestran a continuacin es posible representar un rectngulo que ser la seccin que ser visible de toda la capa (comenzando desde la esquina superior izquierda de la pgina). o Iz: (izquierda) coordenada izquierda. o Sup: (superior) coordenada superior. o Dc: (derecha) coordenada derecha. o Inf: (inferior) coordenada inferior.

Ejercicio
El objetivo de este ejercicio ser la creacin de dos capas con distintas propiedades. Crea una pgina bsica de HTML (Archivo>Nuevo).

Dreamweaver MX 2004

261

Captulo 10. Capas

Para trabajar con capas en Dreamweaver MX ser necesario activar el panel lateral Capas. Para hacerlo selecciona la opcin del men Ventana > Capas o pulsa la tecla F2.

Figura 10.8. Panel de capas. Aade una capa a travs de la barra Insertar en la categora Diseo, haciendo clic en el botn Dibujar capa ( ). Dibuja la capa haciendo clic con el botn izquierdo del ratn y arrastrando el ratn, en la ventana del documento, hasta que tenga el tamao deseado. Selecciona la capa haciendo clic con el botn izquierdo del ratn sobre el recuadro situado en la parte superior izquierda de la capa . En el Inspector de Propiedades de la capa establece los siguientes valores para dicha capa: Nombre: inferior. Anchura y Altura: 300 pxeles. Distancia a los bordes superior e izquierdo: 50 pxeles. Visibilidad: default. Color de fondo: #00FF33. Desbordamiento: auto.

Figura 10.9. Inspector de propiedades. Por ltimo aade el texto Capa inferior dentro de la capa, centrndolo dentro de ella y ponindolo en negrita.

La capa final debera quedar as:

262

Dreamweaver MX 2004

Captulo 10. Capas

Figura 10.10. Capa inferior finalizada. A continuacin crea una segunda capa de la misma forma que has hecho con la primera y con las siguientes propiedades: Nombre: superior. Anchura y Altura: 350 pxeles y 190 pxeles respectivamente. Distancia a los bordes superior e izquierdo: 130 pxeles y 180 pxeles respectivamente. Visibilidad: default. Color de fondo: #FFFF00. Desbordamiento: visible.

Figura 10.11. Propiedades de la capa superior. Guarda la pgina con el nombre capas1.htm (Archivo>Guardar).

La pgina HTML final quedara aproximadamente de la siguiente forma:

Dreamweaver MX 2004

263

Captulo 10. Capas

Figura 10.12. Pgina HTML con dos capas insertadas. Pulsa la tecla F12 para ver como queda la pgina en el navegador.

Aproximadamente el aspecto de nuestra pgina sera el que se muestra en la figura siguiente:

Figura 10.13. Aspecto de las capas en un navegador.

264

Dreamweaver MX 2004

Captulo 10. Capas

10.3. Operaciones con capas

Anidar capas
Podramos definir una capa anidada como una capa que se encuentra dentro de otra capa. Normalmente las capas anidadas se utilizan para mover ambas capas de una sola vez, quedando agrupadas cuando se anidan. Para dibujar una capa anidada disponemos de varios procedimientos: Sobre una capa ya creada, hacemos clic en el interior de la misma e insertamos una nueva capa a travs de los mens Insertar>Objetos de diseo>Capa. Haciendo clic en el interior de una capa ya creada y, a continuacin, hacemos clic en el botn correspondiente de la barra Insertar ( ). Si la opcin Anidar est desactivada en las preferencias de Capas, figura 10.2, debemos mantener pulsada la tecla Alt mientras arrastramos el ratn al anidar una capa dentro de otra existente.

El aspecto que mostraran dos capas anidadas en el documento actual sera el que se muestra a continuacin:

Figura 10.14. Capas anidadas en la ventana de diseo de Dreamweaver MX. En el panel Capas, dentro del grupo de paneles de Diseo, tambin se aprecia la anidacin de las capas:

Dreamweaver MX 2004

265

Captulo 10. Capas

Figura 10.15. Capas anidadas en el panel Diseo. Es posible anidar capas existentes. Para anidar una capa ya existente dentro de otra, slo hay que seleccionarla en el panel Capas con el botn izquierdo del ratn y arrastrarla, manteniendo pulsada la tecla Ctrl, hasta la capa que queremos que la contenga.

Redimensionar capas
Si la operacin que queremos realizar es cambiar el tamao de una capa, tenemos varias vas para hacerlo: Asignando los valores oportunos en los campos referidos a la anchura y a la altura dentro del Inspector de Propiedades. Seleccionando la capa (mediante cualquiera de los mtodos antes mencionados) y arrastrar con el ratn cualquiera de manejadores de tamao que aparecen en el contorno de la capa cuando est seleccionada, hasta conseguir el tamao deseado. Manteniendo pulsada la tecla Ctrl y pulsando las teclas de flecha tantas veces como sea necesario, podemos cambiar el tamao de la capa pxel a pxel.

Para modificar el tamao de varias capas simultneamente, deben seleccionarse todas a la vez y, a continuacin, hacer clic en la opcin Modificar>Alinear>Asignar mismo ancho o Modificar>Alinear>Asignar mismo alto, en funcin de que queramos que todas las capas seleccionadas sean iguales en anchura o en altura. Tambin podemos modificar el tamao de varias capas, una vez seleccionadas todas, desde el Inspector de Propiedades de varias capas, introduciendo los valores de ancho y alto que deseemos.

Mover capas
La forma de mover una capa dentro del documento HTML que estamos creando, es muy sencilla. El primer paso es seleccionar la capa a mover, para ello basta con hacer clic en el contorno de dicha capa dentro de la ventana

266

Dreamweaver MX 2004

Captulo 10. Capas

principal, o bien seleccionarla en el panel Capas del grupo de paneles de Diseo. Una vez seleccionada la capa es posible moverla: Pxel a pxel utilizando las teclas de direccin del teclado. El espacio deseado, haciendo clic en el manejador de seleccin que aparece en la esquina superior izquierda de la capa ( ) y arrastrndola con el ratn a la posicin que deseemos.

Cambiar orden de apilamiento de las capas

En ocasiones necesitaremos cambiar el orden en el que se encuentran apiladas las capas para hacer que unas aparezcan por delante de las otras. Para llevar a cabo esta tarea es necesario modificar el valor del campo ndice Z. Esto lo podemos realizar desde el Inspector de Propiedades, o bien desde el panel Capas: Una vez seleccionada una capa, desde el Inspector de Propiedades es posible modificar el valor del campo ndice Z, asignando valores altos para las capas que deseamos que aparezcan en los niveles superiores y valores ms bajos para las capas que queramos que aparezcan en niveles inferiores. Desde el panel Capas tambin es posible modificar este valor. Se puede seleccionar una capa haciendo clic con el ratn sobre su nombre y arrastrndola arriba o abajo de la lista en funcin de la posicin donde la queramos colocar. Tambin haciendo clic en la columna situada bajo el ttulo Z en la capa de la cual queramos modificar dicho ndice.

Propiedades de mltiples capas

En un apartado anterior vimos cmo modificar las propiedades de una capa utilizando el Inspector de Propiedades. Hay que apuntar que tambin es posible modificar las propiedades de varias capas de forma simultnea. Seleccionamos aquellas capas de las cuales queramos modificar dichos valores y, a continuacin, modificamos los valores deseados en el Inspector de Propiedades. El aspecto de ste ahora, es diferente al que apareca cuando modificbamos una sola capa.

Figura 10.16. Inspector de propiedades de varias capas.

Dreamweaver MX 2004

267

Captulo 10. Capas

En este nuevo Inspector de Propiedades como vemos aparecen nuevas propiedades, principalmente referidas al formato de fuentes de texto, al estilo, a la justificacin del texto dentro la capa, todo sto lo podemos ver en la parte superior de este panel. En la parte inferior del mismo aparece nicamente una nueva propiedad Etiq (Etiqueta), para que indiquemos la etiqueta HTML utilizada para dibujar las capas. El resto de propiedades son las mismas que tratamos en el apartado dedicado a las propiedades de una capa, pero lgicamente con la particularidad de que los cambios que apliquemos a cada una de las propiedades que aqu aparecen afectarn a todas y cada una de las capas seleccionadas.

Convertir las capas en tablas

Es posible que una vez que hemos diseado nuestra pgina web utilizando capas, comprobemos para decepcin nuestra que los navegadores antiguos (anteriores a Microsoft Internet Explorer 4.0 y a Netscape Navigator 4.0) no muestran las capas de forma correcta. Si estamos seguros de que los usuarios de nuestra pgina estn a la ltima y no se van a encontrar este problema, no hay necesidad de llevar a cabo la tarea que vamos a ver a continuacin, pero en el caso de que sto no sea as deberemos llevar a cabo una conversin de capas en tablas como veremos ahora. En Dreamweaver MX existe una herramienta denominada Convertir capas en tablas que nos va a permitir realizar esta operacin de forma sencilla e intuitiva. Nosotros disearemos nuestra pgina web utilizando capas, tal y como hemos visto en este captulo y para asegurar la compatibilidad con los navegadores ms antiguos utilizaremos esta herramienta para transformar estas capas en tablas. Esta herramienta la encontramos en el men Modificar>Convertir>Capas a tabla...

Figura 10.17. Seleccionando la opcin convertir capas a tablas.

268

Dreamweaver MX 2004

Captulo 10. Capas

Al elegir esta opcin del men se abrir un cuadro de dilogo con las diferentes opciones para configurar esta conversin.

Figura 10.18. Cuadro de dilogo para convertir capas en tablas. Las distintas opciones de las que disponemos a la hora de convertir las capas de nuestra pgina en tablas son las siguientes: Ms preciso: va a crear para cada una de las capas existentes una celda, adems de insertar celdas intermedias para conservar el espacio entre capas. Mnimo (contraer celdas vacas): indica que para aquellas capas que estn situadas a menor distancia de la especificada en el campo Menor que... pxeles los bordes se van a alinear (es posible que el resultado final no coincida con el diseo original). Usar GIF transparentes: Dreamweaver MX utiliza esta opcin para rellenar la ltima fila de la tabla con imgenes GIF transparentes con el fin de asegurar que las tablas aparezcan con la misma anchura en cualquier navegador. Centrar en pgina: muestra la tabla resultante centrada en la pgina. Herr. De: con esta opcin podremos indicar otra serie de operaciones relativas a la conversin que se est realizando como Evitar la superposicin de capas, Mostrar el panel capas o la cuadrcula o Ajustar la tabla resultante a la cuadrcula.

NOTA. Si hay ms de una capa en el documento y stas se encuentran anidadas o superpuestas, esta conversin no se permitir.

Ejercicio
El objetivo de este ejercicio ser la creacin de capas anidadas. Crea una pgina bsica de HTML (Archivo>Nuevo).

Dreamweaver MX 2004

269

Captulo 10. Capas

Aade una capa a travs de la barra Insertar en la categora Diseo, haciendo clic en el botn Dibujar capa ( ). Dibuja la capa haciendo clic con el botn izquierdo del ratn y arrastrando el ratn, en la ventana del documento, hasta que tenga el tamao deseado. Selecciona la capa haciendo clic con el botn izquierdo del ratn sobre el recuadro situado en la parte superior izquierda de la capa . En el Inspector de Propiedades de la capa establece los siguientes valores: Nombre: primera. Anchura y Altura: 300 pxeles y 250 pxeles respectivamente. Distancia a los bordes superior e izquierdo: 40 pxeles y 225 pxeles respectivamente. Visibilidad: visible. Imagen de fondo: el logotipo del aula Mentor. Recuerda que si no lo tienes, puedes acceder a http://www.mentor.mec.es/ y hacer clic con el botn derecho del ratn sobre l. Selecciona Guardar imagen como... y guarda la imagen en tu carpeta de imgenes. Desbordamiento: visible.

Figura 10.19. Inspector de Propiedades de la capa creada. El aspecto de la capa dentro del documento HTML debe ser el siguiente:

270

Dreamweaver MX 2004

Captulo 10. Capas

Figura 10.20. Aspecto de la capa insertada en el documento. Inserta una capa anidada dentro de esta primera. Para ello haz clic en el botn Dibujar capa ( ) de la barra Insertar en la categora Diseo y con la tecla Alt pulsada crea la capa en el interior de la que has creado anteriormente. Las propiedades que debe tener esta segunda capa son: Nombre: segunda. Anchura y Altura: 215 pxeles y 165 pxeles respectivamente. Distancia a los bordes superior e izquierdo: 75 pxeles y 75 pxeles respectivamente. Visibilidad: visible. Color de fondo: #FF3300. Desbordamiento: visible.

Figura 10.21. Inspector de propiedades de la capa anidada. La nueva capa creada tendra el siguiente aspecto:

Dreamweaver MX 2004

271

Captulo 10. Capas

Figura 10.22. Aspecto de la capa anidada. El Panel Capas debe ser el siguiente mostrando las capas anidadas:

Figura 10.23. Panel Capas con las dos capas anidadas. Guarda la pgina HTML creada con el nombre capas2.html y pulsa la tecla F12 para ver el resultado obtenido en un navegador.

272

Dreamweaver MX 2004