ModuloXI

8/3/2019 ModuloXI

http://slidepdf.com/reader/full/moduloxi 1/12

Internet, el instrumento esencial de la diplomacia del siglo XXI

Trabajar con capas en Dreamweaver MX - 1 -

TRABAJAR CON CAPAS EN DREAMWEAVER MX

1 – Propiedades de las capas

Las capas tienen su buen uso para DHTML, es decir, HTML dinámico, pero también las podemos usar para la organización del HTML. Son un instrumento muy útil para organizar la página, jugar con efectos o construir menús sin conocer programación ni más tecnología.

Lo primero que hacemos para comenzar a trabajar con capas es abrir el documento HTML en elque queremos añadir la capa. En nuestro caso vamos a abrir el documento llamado “ejemplocapa”. Unavez abierto se selecciona el icono Capa ( Draw Layer ) que se encuentra al lado derecho del iconoTabla ( Insert Table). Tenga en cuenta que las capas siempre hay que trabajarlas en las vistas Diseño y Código (Show Code and Design Views) o Diseño (Show Design View).

Otra forma de insertar la capa en una página es a través del botón Insertar ( Insert ) del menú principal y cuando nos aparecen diversas opciones escogemos Capa ( Layer ). Con el cursor dibujamosel tamaño de la capa como queramos verla a primera vista. No es necesario ser muy exactos porqueluego podremos modificar el tamaño 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 símbolo , 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 fácil acertar con la deseada a la primera. Lomejor 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 algún

cuadrito negro a su alrededor). El símbolo nos sirve para controlar la capa y si deseamos eliminarladeberemos situarnos encima de él y borrar normalmente.

8/3/2019 ModuloXI




Debemos saber que una de las principales ventajas de las capas es su versatilidad, ya que pueden moverse de una posición 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 ratón podemosmoverlas a donde queramos con todo lo que contengan. También pueden ser redimensionadas

pulsando sobre los recuadros negros, y arrastrándolos hasta conseguir el tamaño deseado.

Podemos dibujar cuantas capas queramos. En esta ocasión vamos a dibujar dos, una junto a laotra y en distintos tamaños para jugar con su posición y movimiento.

8/3/2019 ModuloXI




Cuando existen varias capas en un mismo documento, es preferible seleccionarlas. Para ello, através del panel Diseño ( Design) elegimos la pestaña capas ( Layer ). Si no tenemos el panel Diseño ala vista podemos ir a Ventana (Window) y a continuación seleccionar Mostrar capas ( Layers), que seencuentra agrupado bajo Otros (Others). También se puede abrir el panel de capas directamente

pulsando F2.En dicho panel aparecen las capas que hemos creado. Por defecto, vienen numeradas en inglés

pero les podemos dar los nombres que queramos como si fueran un archivo corriente. Es importanteescoger nombres significativos del contenido de cada capa para luego poder trabajar más fácilmentecon ellas. (En el ejemplo se denominan “Edificio UN” y “bandera” porque tenemos una idea muy claradel contenido que van a llevar. Si en principio sólo quiere jugar con la distribución de su página podría ponerles números 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 según el número 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 herramientamuy útil para trabajar con capas. Si nos interesa cambiar sólo una, le dejaremos a ésta el ojo abierto,mientras que el resto lo podrán tener cerrado. Cuando lancemos la ventana al explorador, las capasaparecerán al cargar la página o no, dependiendo de cómo hayamos dejado el ojo. Como veremos másadelante, 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.

8/3/2019 ModuloXI




El panel de propiedades de capas es un poco más complicado que el habitual y nos convienesaber 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. También puede ser cambiado a través del panel Capas (Layers), haciendo doble clic sobre el mismo.

Iz ( L) y Sup (T) indican la distancia en píxeles que hay entre los límites izquierdo y superior del documento y la capa. Este dato es muy importante, ya que le estamos diciendo a la capa dóndedebe 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 número de orden de colocación de las capas. Este valor también puedecambiarse a través del panel Capas ( Layers). Una capa será solapada por aquellas capas cuyo índice-Zsea mayor que el suyo.

Vis (Vis) indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos:

- Default (visibilidad según el navegador)- Inherit (se muestra la capa mientras la página a la que pertenece también se esté

mostrando)- Visible (muestra la capa, aunque la página no se esté viendo)

- Hidden (la capa está oculta)

Estos atributos cambian según la posición en la que tengamos el ojo junto a la capa. El atributo Default es el que marca que, una vez que la página esté en Internet, la capa conserve la propiedad queel ojo le está marcando.

Aunque cambiando estos comandos podemos controlar la posición de nuestras capas en la página, en principio utilizaremos el sistema de tablas para estructurar su posición dentro de la página.La razón es que no todos los navegadores de los usuarios de Internet en el mundo tienen versionesactualizadas y todavía existen versiones 4 o inferiores y no todos los navegadores, como Netscape, por ejemplo, reconocen en versiones antiguas la ubicación precisa de las capas. Pueden leerlas, pero no

reconocen su situación. Por tanto, si no queremos tener este tipo de inconvenientes, directamente,convertimos todo a una gran tabla asegurándonos, de esa manera, que todos van a poder visualizar tranquilamente nuestra página Web.

Lo cierto es que si lo que queremos es jugar libremente con las capas, podemos moverlas,cambiarlas de tamaño y situarlas en la página a nuestro gusto simplemente utilizando el cursor ynuestra imaginación.

8/3/2019 ModuloXI




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

1.1 - Insertar imágenes desde archivos en una capa

Una capa nos sirve como elemento básico para colocar cualquier objeto como texto, imagen,tabla, etc. dentro de la página Web en la ubicación 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 laimagen, y una vez activada ésta, situaremos el cursor dentro de la misma y pulsaremos el icono deinsertar imagen. Seguidamente, el programa nos dará la opción de escoger un archivo de imagen, yuna vez escogido el mismo, le damos a Aceptar (OK).

Podemos repetir esta operación en cuantas capas deseemos, tal y como se aprecia en la próxima página y con las imágenes que gustemos. Sin embargo, hay que tener presente que esta posibilidad nonos da derecho a sobrecargar la página de imágenes. Recuerde que muchas imágenes juntas darán unasensación de pesadez a la página, además de que tardará mucho en cargar.

8/3/2019 ModuloXI




1.3 - Ordenar las capas con tablas

Como apuntábamos más arriba, es más eficiente ordenar las capas con tablas para que puedanser visualizadas en todos los navegadores. Una vez agregadas las capas necesarias y las ubicamos

como deseamos, vamos al menú Modificar (Modify), escogemos Convertir (Convert ) yseleccionamos Capas a tablas ( Layers to Table).

8/3/2019 ModuloXI




Nos aparece la siguiente ventana:

Aquí le indicaremos que convierta las capas a tablas con la mayor precisión posible (Most Accurate) y que utilice imágenes GIF transparentes (Use Transparent GIFs).

En el caso de que más adelant tengamos que mover algo de lugar y retocarlo, volveremos almenú Modificar (Modify), escogeremos Convertir (Convert) y esta vez seleccionaremos el procesocontrario, convertir la tabla a capas (Tables to Layers). Después podemos volver al estado anterior regresando al menú modificar (Modify) seleccionando convertir (Convert) y escogiendo capas atablas (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 imágenes, las pueden “comportarse” de la manera que decidamos. Uno delos recursos más útiles parea jugar con las capas será el de hacer que una capa aparezca y desaparezcacuando pongamos el cursor sobre la misma. Esto nos permitirá crear menús desplegables y vistososefectos en la página 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 elcomportamiento, en este caso una capa, utilizando cualquiera de las formas de seleccionar capas quehemos visto en los apartados anteriores.

Al desplegar el botón “+” del panel Comportamientos ( Behaviours) aparecen diversasopciones. En la imagen que mostramos a continuación podemos apreciar las distintas opciones que senos presentan. De momento, la que nos interesa es Mostrar-ocultar capas, (Show-Hide Layers).

8/3/2019 ModuloXI




El comportamiento que elijamos actuará sobre la capa que tenemos seleccionada, es decir,enviará la orden al programa cuando algo varíe en esa capa, pero el comportamiento resultante puedeinfluir en otras capas que no tengamos seleccionadas en este momento.

Lo veremos mejor en un ejemplo. Si teníamos seleccionada la primera capa, “edificio UN”, yhemos seleccionado sobre ella el comportamiento Mostrar-ocultar capas (Show-Hide Layers) nos preguntará cómo, y en qué momento debe tener lugar la acción.

Queremos que, cuando el ratón pase por encima de la imagen del edificio de la ONU,inmediatamente salte la bandera de Naciones Unidas. Pero una vez que el ratón esté fuera de laimagen, queremos también que la bandera desaparezca. Para ello, marcamos en la ventana los

casilleros que correspondan para que ambas capas estén visibles (Show) y luego elegimos la opciónonMouseOver. Esto hará que la capa de la bandera salte según nuestra preferencia.

Como también queremos que desaparezca después, debemos añadir otro comportamiento. Paraello pulsamos de nuevo el símbolo “+” y le decimos al programa que cuando el ratón esté fuera de lacapa (lo cual se hace seleccionando onMouseOut) queremos que la primera capa siga visible (Show), pero que la segunda permanezca oculta ( Hide).

8/3/2019 ModuloXI




Por último, debemos asegurarnos de que la primera capa está oculta cuando abramos nuestra página. Si la hemos dejado por defecto oculta ( Hide) no debería de aparecer pero, para curarnos ensalud de esos despistes, le añadimos también un comportamiento. Éste consistirá en que cuando la página se cargue (onLoad), la capa “bandera” esté oculta.

Este efecto se puede repetir cuantas veces queramos tanto con imágenes como con enlaces. Noobstante, conviene no abusar de él, ya que una sorpresa puede ser grata en ocasiones pero tampocodeseamos que nuestro visitante esté continuamente sobresaltado.

2.2 - Crear un menú con varios niveles de profundidad empleando capas

Muchas veces, nuestras páginas tienen tantos contenidos que si quisiéramos que todos ellosapareciesen todos en un determinado lugar de nuestra página, en un menú, éste abarcaría casi latotalidad del espacio que tenemos para nuestra página Web. En estos casos es muy útil insertar uno ovarios menús desplegables, que aparecen por encima del propio contenido de la página 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 específicos para que aparezcan ydesaparezcan a nuestro gusto.

8/3/2019 ModuloXI




Otro aspecto que debemos tener en cuenta es la condición de capa absoluta o capa relativa,ya que a las capas absolutas se les tiene que dar unas coordenadas de posicionamiento a raíz de laesquina superior izquierda de nuestra página Web, coordenadas que no nos sirven para nada en el casode que nuestra página tenga los contenidos centrados, ya que la posición en la que va a aparecer ésta,dependerá de la configuración del monitor desde el que se visualice dicha página.

El primer paso que tenemos que dar es desarrollar mentalmente un esquema del menú quequeremos crear, o mejor, hacerlo sobre papel. Nuestro ejemplo está compuesto por 5 partes en posiciónhorizontal, para lo cual crearemos una tabla con 5 celdas y le daremos a cada una de ellas undeterminado tamaño en píxeles, que en nuestro caso será de 160px - 20px, aunque al introducir texto eltamaño puede ir variando.

A continuación haremos clic en el icono de Capa (Draw Layer) y dibujaremos una en

cualquier lado. Seguidamente arrastraremos el símbolo de capa (que determina el lugar donde el programa introducirá la línea de código HTML, que por defecto creará dentro de la etiqueta Body)dentro una de las celdas de la tabla que hemos generado y a continuación realizaremos lasmodificaciones en la ventana Propiedades ( Properties).

En el panel de propiedades, que se muestra en la próxima página, dejaremos vacío el campoIz ( L), relativo al límite izquierdo de la capa, y así el programa enganchará la capa en la esquinaizquierda pero en el campo Sup (T ), referente al extremo superior, le daremos una medida de 60 para

8/3/2019 ModuloXI




que se enganche en la esquina de debajo de la tabla. Después daremos un valor a los campos An (W ) yAl (H), relativos al ancho y al alto, respectivamente. En el ejemplo que estamos creando los valoresserán 160px y 115px respectivamente. Este paso lo tenemos que repetir, en nuestro caso, para cada unade 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 hemosestablecido. A estas últimas tendremos que darles unos u otros valores de tamaño dependiendo delnúmero de elementos que queramos que dependan de cada menú. Podemos colocar una capa dentro deotra 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 página Web. Si cogemos una de lascapas 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 opción nos viene bien para trabajar, pero antes de darles un comportamiento, cuando tengamos terminado por completo la estructura denuestro menú, deberemos cambiar este atributo default de las capas secundarias (las que se encuentrandentro de las 5 capas principales) por hidden, que las hace invisibles, dándonos la posibilidad detrabajar con los comportamientos de manera que las podamos hacerlas aparecer y desaparecer a

nuestro gusto.

Dentro de estas capas secundarias introduciremos tablas con el número de celdas que hayamoscalculado según el tamaño de cada capa. Una vez hecho esto en todas las capas deberíamos insertar lasimágenes o las palabras de nuestro menú para poder configurar los comportamientos, ya que si nocolocamos nada dentro de las capas, éstas no se verán cuando aparecen o desaparecen por ser transparentes. Otra solución es darles un color de fondo.

8/3/2019 ModuloXI




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 ellugar que deseemos y así sucesivamente.

El último paso para terminar nuestro menú será dar un comportamiento a cada capa. Para esonecesitamos 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 (Show- Hide Layer) debemos trabajar con un enlace, ya que es el elemento que se puede someter a una acción.Estos enlaces serán las imágenes que hemos colocado dentro de las celdas y en su defecto, las palabras.Engañamos al programa creando un falso enlace mediante la introducción del símbolo “# ”, en elespacio correspondiente a Enlace ( Link) de la ventana Propiedades ( Properties), originando así unenlace en blanco.

A continuación haremos clic en el enlace creado (en la parte inferior de la página principalaparecerá el símbolo de vínculo <a> en negrita) e iremos a la ventana Comportamiento ( Behaviour ) y presionaremos el símbolo “+”. Del menú de opciones escogeremos Mostrar-Ocultar capa (Show-

Hide 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 queremosque aparezca al pasar el ratón por encima del vínculo que estamos modificando. Después tendremosque desapretar el botón Mostrar (Show). A continuación procederemos a seleccionar el resto de lascapas y también las ocultaremos, pero esta vez apretando el botón Ocultar ( Hide). Como vemos, el

procedimiento es muy similar al que hemos empleado anteriormente con las imágenes.Este paso lo repetiremos para cada una de los cinco vínculos principales de los que se nos

desplegarán los correspondientes submenús.

Documents

ModuloXI