Internet, el instrumento esencial de la diplomacia del siglo XXI

TRABAJAR CON CAPAS EN DREAMWEAVER MX

1 Propiedades de las capas Las capas tienen su buen uso para DHTML, es decir, HTML dinmico, pero tambin las podemos usar para la organizacin del HTML. Son un instrumento muy til para organizar la pgina, jugar con efectos o construir mens sin conocer programacin ni ms tecnologa. Lo primero que hacemos para comenzar a trabajar con capas es abrir el documento HTML en el que queremos aadir la capa. En nuestro caso vamos a abrir el documento llamado ejemplocapa. Una vez abierto se selecciona el icono Capa (Draw Layer) que se encuentra al lado derecho del icono Tabla (Insert Table). Tenga en cuenta que las capas siempre hay que trabajarlas en las vistas Diseo y Cdigo (Show Code and Design Views) o Diseo (Show Design View). Otra forma de insertar la capa en una pgina es a travs del botn Insertar (Insert) del men principal y cuando nos aparecen diversas opciones escogemos Capa (Layer). Con el cursor dibujamos el tamao de la capa como queramos verla a primera vista. No es necesario ser muy exactos porque luego podremos modificar el tamao cambiando los atributos pero, para ello, deberemos haber seleccionado la capa previamente.

Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el smbolo , pero esto no resulta til cuando existen muchas capas en un mismo documento, ya que todas las capas tienen asociada una imagen igual a sta ( ), y no es fcil acertar con la deseada a la primera. Lo mejor es pulsar con el cursor sobre el icono correspondiente a capa de la barra de men y as activaremos el panel de propiedades de la capa (que aparecer resaltada con un borde negro y algn nos sirve para controlar la capa y si deseamos eliminarla cuadrito negro a su alrededor). El smbolo deberemos situarnos encima de l y borrar normalmente.

Trabajar con capas en Dreamweaver MX

-1-

Internet, el instrumento esencial de la diplomacia del siglo XXI

Debemos saber que una de las principales ventajas de las capas es su versatilidad, ya que pueden moverse de una posicin a otra de la ventana pulsando sobre el recuadro en el margen superior izquierdo de cada una de ellas, donde tenemos un cuadradito, y desde ah con el ratn podemos moverlas a donde queramos con todo lo que contengan. Tambin pueden ser redimensionadas pulsando sobre los recuadros negros, y arrastrndolos hasta conseguir el tamao deseado.

Podemos dibujar cuantas capas queramos. En esta ocasin vamos a dibujar dos, una junto a la otra y en distintos tamaos para jugar con su posicin y movimiento.

Trabajar con capas en Dreamweaver MX

-2-

Internet, el instrumento esencial de la diplomacia del siglo XXI

Cuando existen varias capas en un mismo documento, es preferible seleccionarlas. Para ello, a travs del panel Diseo (Design) elegimos la pestaa capas (Layer). Si no tenemos el panel Diseo a la vista podemos ir a Ventana (Window) y a continuacin seleccionar Mostrar capas (Layers), que se encuentra agrupado bajo Otros (Others). Tambin se puede abrir el panel de capas directamente pulsando F2. En dicho panel aparecen las capas que hemos creado. Por defecto, vienen numeradas en ingls pero les podemos dar los nombres que queramos como si fueran un archivo corriente. Es importante escoger nombres significativos del contenido de cada capa para luego poder trabajar ms fcilmente con ellas. (En el ejemplo se denominan Edificio UN y bandera porque tenemos una idea muy clara del contenido que van a llevar. Si en principio slo quiere jugar con la distribucin de su pgina podra ponerles nmeros o letras).

Junto a las capas, hay un espacio en blanco pero que est activo para pulsar. Si lo hacemos, aparecer un ojo en diferentes posiciones segn el nmero de veces que pulsemos sobre l. Este ojo nos va a indicar si la capa est visible por defecto o no. Aunque suene complicado es una herramienta muy til para trabajar con capas. Si nos interesa cambiar slo una, le dejaremos a sta el ojo abierto, mientras que el resto lo podrn tener cerrado. Cuando lancemos la ventana al explorador, las capas aparecern al cargar la pgina o no, dependiendo de cmo hayamos dejado el ojo. Como veremos ms adelante, si lo que queremos es jugar con las capas para que stas aparezcan y desaparezcan, lo mejor ser dejar siempre el ojo cerrado por defecto.

Trabajar con capas en Dreamweaver MX

-3-

Internet, el instrumento esencial de la diplomacia del siglo XXI

El panel de propiedades de capas es un poco ms complicado que el habitual y nos conviene saber qu es lo que cambia cada uno de los atributos que podemos variar en este panel.

El ID de capa (Layer ID) es el nombre de la capa. Tambin puede ser cambiado a travs del panel Capas (Layers), haciendo doble clic sobre el mismo. Iz (L) y Sup (T) indican la distancia en pxeles que hay entre los lmites izquierdo y superior del documento y la capa. Este dato es muy importante, ya que le estamos diciendo a la capa dnde debe anclarse dentro del lugar donde la hemos insertado. An (W) y Al (H) indican la anchura y la altura de la capa. ndice-Z (Z-Index) es el nmero de orden de colocacin de las capas. Este valor tambin puede cambiarse a travs del panel Capas (Layers). Una capa ser solapada por aquellas capas cuyo ndice-Z sea mayor que el suyo. Vis (Vis) indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos: Default (visibilidad segn el navegador) Inherit (se muestra la capa mientras la pgina a la que pertenece tambin se est mostrando) Visible (muestra la capa, aunque la pgina no se est viendo) Hidden (la capa est oculta)

Estos atributos cambian segn la posicin en la que tengamos el ojo junto a la capa. El atributo Default es el que marca que, una vez que la pgina est en Internet, la capa conserve la propiedad que el ojo le est marcando. Aunque cambiando estos comandos podemos controlar la posicin de nuestras capas en la pgina, en principio utilizaremos el sistema de tablas para estructurar su posicin dentro de la pgina. La razn es que no todos los navegadores de los usuarios de Internet en el mundo tienen versiones actualizadas y todava existen versiones 4 o inferiores y no todos los navegadores, como Netscape, por ejemplo, reconocen en versiones antiguas la ubicacin precisa de las capas. Pueden leerlas, pero no reconocen su situacin. Por tanto, si no queremos tener este tipo de inconvenientes, directamente, convertimos todo a una gran tabla asegurndonos, de esa manera, que todos van a poder visualizar tranquilamente nuestra pgina Web. Lo cierto es que si lo que queremos es jugar libremente con las capas, podemos moverlas, cambiarlas de tamao y situarlas en la pgina a nuestro gusto simplemente utilizando el cursor y nuestra imaginacin.

Trabajar con capas en Dreamweaver MX

-4-

Internet, el instrumento esencial de la diplomacia del siglo XXI

Se puede seguir agregando capas como pueden ver en el ejemplo y se pueden colocar las capas como se desee, pero sin superponerlas, pues lo que queremos hacer es convertir a una gran tabla esta disposicin de elementos y no podemos convertir capas a tabla si hay capas superpuestas.

1.1 - Insertar imgenes desde archivos en una capa Una capa nos sirve como elemento bsico para colocar cualquier objeto como texto, imagen, tabla, etc. dentro de la pgina Web en la ubicacin que nos guste sin estar sujetos al editor de texto. Para insertar una imagen, lo nico que debemos hacer es activar la capa en la que queremos insertar la imagen, y una vez activada sta, situaremos el cursor dentro de la misma y pulsaremos el icono de insertar imagen. Seguidamente, el programa nos dar la opcin de escoger un archivo de imagen, y una vez escogido el mismo, le damos a Aceptar (OK).

Podemos repetir esta operacin en cuantas capas deseemos, tal y como se aprecia en la prxima pgina y con las imgenes que gustemos. Sin embargo, hay que tener presente que esta posibilidad no nos da derecho a sobrecargar la pgina de imgenes. Recuerde que muchas imgenes juntas darn una sensacin de pesadez a la pgina, adems de que tardar mucho en cargar.

Trabajar con capas en Dreamweaver MX

-5-

Internet, el instrumento esencial de la diplomacia del siglo XXI

1.3 - Ordenar las capas con tablas Como apuntbamos ms arriba, es ms eficiente ordenar las capas con tablas para que puedan ser visualizadas en todos los navegadores. Una vez agregadas las capas necesarias y las ubicamos como deseamos, vamos al men Modificar (Modify), escogemos Convertir (Convert) y seleccionamos Capas a tablas (Layers to Table).

Trabajar con capas en Dreamweaver MX

-6-

Internet, el instrumento esencial de la diplomacia del siglo XXI

Nos aparece la siguiente ventana:

Aqu le indicaremos que convierta las capas a tablas con la mayor precisin posible (Most Accurate) y que utilice imgenes GIF transparentes (Use Transparent GIFs). En el caso de que ms adelant tengamos que mover algo de lugar y retocarlo, volveremos al men Modificar (Modify), escogeremos Convertir (Convert) y esta vez seleccionaremos el proceso contrario, convertir la tabla a capas (Tables to Layers). Despus podemos volver al estado anterior regresando al men modificar (Modify) seleccionando convertir (Convert) y escogiendo capas a tablas (Layers to Tables).

2 Comportamientos de las capas Las posibilidades de aplicar determinados efectos a las capas ofrece numerosas posibilidades. Al igual que sucede con las imgenes, las pueden comportarse de la manera que decidamos. Uno de los recursos ms tiles parea jugar con las capas ser el de hacer que una capa aparezca y desaparezca cuando pongamos el cursor sobre la misma. Esto nos permitir crear mens desplegables y vistosos efectos en la pgina Web. 2.1 Dar un comportamiento a la capa Lo primero que hay que hacer es seleccionar el objeto sobre el que se ha de aplicar el comportamiento, en este caso una capa, utilizando cualquiera de las formas de seleccionar capas que hemos visto en los apartados anteriores. Al desplegar el botn + del panel Comportamientos (Behaviours) aparecen diversas opciones. En la imagen que mostramos a continuacin podemos apreciar las distintas opciones que se nos presentan. De momento, la que nos interesa es Mostrar-ocultar capas, (Show-Hide Layers).

Trabajar con capas en Dreamweaver MX

-7-

Internet, el instrumento esencial de la diplomacia del siglo XXI

El comportamiento que elijamos actuar sobre la capa que tenemos seleccionada, es decir, enviar la orden al programa cuando algo vare en esa capa, pero el comportamiento resultante puede influir en otras capas que no tengamos seleccionadas en este momento. Lo veremos mejor en un ejemplo. Si tenamos seleccionada la primera capa, edificio UN, y hemos seleccionado sobre ella el comportamiento Mostrar-ocultar capas (Show-Hide Layers) nos preguntar cmo, y en qu momento debe tener lugar la accin. Queremos que, cuando el ratn pase por encima de la imagen del edificio de la ONU, inmediatamente salte la bandera de Naciones Unidas. Pero una vez que el ratn est fuera de la imagen, queremos tambin que la bandera desaparezca. Para ello, marcamos en la ventana los casilleros que correspondan para que ambas capas estn visibles (Show) y luego elegimos la opcin onMouseOver. Esto har que la capa de la bandera salte segn nuestra preferencia. Como tambin queremos que desaparezca despus, debemos aadir otro comportamiento. Para ello pulsamos de nuevo el smbolo + y le decimos al programa que cuando el ratn est fuera de la capa (lo cual se hace seleccionando onMouseOut) queremos que la primera capa siga visible (Show), pero que la segunda permanezca oculta (Hide).

Trabajar con capas en Dreamweaver MX

-8-

Internet, el instrumento esencial de la diplomacia del siglo XXI

Por ltimo, debemos asegurarnos de que la primera capa est oculta cuando abramos nuestra pgina. Si la hemos dejado por defecto oculta (Hide) no debera de aparecer pero, para curarnos en salud de esos despistes, le aadimos tambin un comportamiento. ste consistir en que cuando la pgina se cargue (onLoad), la capa bandera est oculta.

Este efecto se puede repetir cuantas veces queramos tanto con imgenes como con enlaces. No obstante, conviene no abusar de l, ya que una sorpresa puede ser grata en ocasiones pero tampoco deseamos que nuestro visitante est continuamente sobresaltado.

2.2 - Crear un men con varios niveles de profundidad empleando capas Muchas veces, nuestras pginas tienen tantos contenidos que si quisiramos que todos ellos apareciesen todos en un determinado lugar de nuestra pgina, en un men, ste abarcara casi la totalidad del espacio que tenemos para nuestra pgina Web. En estos casos es muy til insertar uno o varios mens desplegables, que aparecen por encima del propio contenido de la pgina para mostrar todas sus partes y posteriormente desaparecen. En primer lugar, tenemos que saber que este tipo de men est construido casi en su totalidad por capas, a las cuales les atribuiremos unos comportamientos especficos para que aparezcan y desaparezcan a nuestro gusto.

Trabajar con capas en Dreamweaver MX

-9-

Internet, el instrumento esencial de la diplomacia del siglo XXI

Otro aspecto que debemos tener en cuenta es la condicin de capa absoluta o capa relativa, ya que a las capas absolutas se les tiene que dar unas coordenadas de posicionamiento a raz de la esquina superior izquierda de nuestra pgina Web, coordenadas que no nos sirven para nada en el caso de que nuestra pgina tenga los contenidos centrados, ya que la posicin en la que va a aparecer sta, depender de la configuracin del monitor desde el que se visualice dicha pgina. El primer paso que tenemos que dar es desarrollar mentalmente un esquema del men que queremos crear, o mejor, hacerlo sobre papel. Nuestro ejemplo est compuesto por 5 partes en posicin horizontal, para lo cual crearemos una tabla con 5 celdas y le daremos a cada una de ellas un determinado tamao en pxeles, que en nuestro caso ser de 160px - 20px, aunque al introducir texto el tamao puede ir variando.

A continuacin haremos clic en el icono de Capa (Draw Layer) y dibujaremos una en cualquier lado. Seguidamente arrastraremos el smbolo de capa (que determina el lugar donde el programa introducir la lnea de cdigo HTML, que por defecto crear dentro de la etiqueta Body) dentro una de las celdas de la tabla que hemos generado y a continuacin realizaremos las modificaciones en la ventana Propiedades (Properties).

En el panel de propiedades, que se muestra en la prxima pgina, dejaremos vaco el campo Iz (L), relativo al lmite izquierdo de la capa, y as el programa enganchar la capa en la esquina izquierda pero en el campo Sup (T), referente al extremo superior, le daremos una medida de 60 para
Trabajar con capas en Dreamweaver MX - 10 -

Internet, el instrumento esencial de la diplomacia del siglo XXI

que se enganche en la esquina de debajo de la tabla. Despus daremos un valor a los campos An (W) y Al (H), relativos al ancho y al alto, respectivamente. En el ejemplo que estamos creando los valores sern 160px y 115px respectivamente. Este paso lo tenemos que repetir, en nuestro caso, para cada una de las 5 celdas de las que se compone nuestro men principal.

Una vez terminado este paso procederemos a crear otras capas dentro de las que ya hemos establecido. A estas ltimas tendremos que darles unos u otros valores de tamao dependiendo del nmero de elementos que queramos que dependan de cada men. Podemos colocar una capa dentro de otra de distintas formas: 1, arrastrando, como hemos hecho anteriormente, esta nueva capa dentro de la anterior, o 2, presionando la tecla F2, en cuyo caso nos aparecer la ventana Capas (Layers) donde podremos ver un esquema de las capas que tenemos en nuestra pgina Web. Si cogemos una de las capas que aparecen y la arrastramos encima de otra mientras que presionamos la tecla Control (Ctrl), introduciremos la capa arrastrada dentro de la que hayamos seleccionado. Estas subcapas que hemos creado, que dependen de las principales, por defecto tienen la propiedad default que deja la capa visible en todo momento. Esta opcin nos viene bien para trabajar, pero antes de darles un comportamiento, cuando tengamos terminado por completo la estructura de nuestro men, deberemos cambiar este atributo default de las capas secundarias (las que se encuentran dentro de las 5 capas principales) por hidden, que las hace invisibles, dndonos la posibilidad de trabajar con los comportamientos de manera que las podamos hacerlas aparecer y desaparecer a nuestro gusto. Dentro de estas capas secundarias introduciremos tablas con el nmero de celdas que hayamos calculado segn el tamao de cada capa. Una vez hecho esto en todas las capas deberamos insertar las imgenes o las palabras de nuestro men para poder configurar los comportamientos, ya que si no colocamos nada dentro de las capas, stas no se vern cuando aparecen o desaparecen por ser transparentes. Otra solucin es darles un color de fondo.

Trabajar con capas en Dreamweaver MX

- 11 -

Internet, el instrumento esencial de la diplomacia del siglo XXI

En el ejemplo hemos creado una tercera subcapa para crear un men de tres profundidades. Como se puede apreciar, lo nico que hay que hacer es enganchar una capa dentro de la anterior en el lugar que deseemos y as sucesivamente.

El ltimo paso para terminar nuestro men ser dar un comportamiento a cada capa. Para eso necesitamos la ventana Comportamiento (Behaviour) que, si no la tenemos ya a la vista, aparecer presionando la tecla F3. Para poder jugar con los comportamientos de Mostrar-ocultar capa (ShowHide Layer) debemos trabajar con un enlace, ya que es el elemento que se puede someter a una accin. Estos enlaces sern las imgenes que hemos colocado dentro de las celdas y en su defecto, las palabras. Engaamos al programa creando un falso enlace mediante la introduccin del smbolo # , en el espacio correspondiente a Enlace (Link) de la ventana Propiedades (Properties), originando as un enlace en blanco.

A continuacin haremos clic en el enlace creado (en la parte inferior de la pgina principal aparecer el smbolo de vnculo <a> en negrita) e iremos a la ventana Comportamiento (Behaviour) y presionaremos el smbolo +. Del men de opciones escogeremos Mostrar-Ocultar capa (ShowHide Layer) y nos aparecer una ventana con un listado de todas las capas que tenemos creadas. En primer lugar, debemos seleccionar la capa en la que hemos creado el men desplegable que queremos que aparezca al pasar el ratn por encima del vnculo que estamos modificando. Despus tendremos que desapretar el botn Mostrar (Show). A continuacin procederemos a seleccionar el resto de las capas y tambin las ocultaremos, pero esta vez apretando el botn Ocultar (Hide). Como vemos, el procedimiento es muy similar al que hemos empleado anteriormente con las imgenes. Este paso lo repetiremos para cada una de los cinco vnculos principales de los que se nos desplegarn los correspondientes submens.

Trabajar con capas en Dreamweaver MX

- 12 -