Tutoriales de Diseño de Páginas Web por FerCyborg

Con este manual completo y gratuito podrás aprender cómo usar DreamWeaver y HTML para crear páginas y sitios web.

Diseño web responsivo desde Salamanca

Las Capas del DHTML

Introducción a las capas

Una capa es una zona rectangular que puede contener texto, imágenes, animaciones u otros elementos web. A continuación podemos ver una capa aún vacía tal y como se muestra en DreamWeaver nada más crearla:

Mientras está seleccionada, se observan los cuadrados negros para estirar la capa, y el doble cuadrado para moverla, pero al des-seleccionarla (o al mostrar la página en un navegador), sólo podremos ver su contenido:

Los navegadores más antiguos (IE 3, p.ej) no pueden mostrar capas.

Se pueden colocar en cualquier parte de la página (quedan almacenadas las coordenadas X e Y), e incluso, mediante programas en JavaScript, se pueden ocultar y mostrar, desplazar por la pantalla, o colocar encima de otras capas, tablas u otros contenidos, de forma interactiva.

También se puede crear una capa dentro de otra (capas anidadas). Su mayor ventaja es que al mostrar u ocultar la capa "madre", lo mismo le ocurre a las capas "hijas".

Si usamos capas, el proceso de diseño de una página web se asemeja más al diseño gráfico tradicional. El método alternativo es usar tablas, pero cuanto más compleja es la estructura visual de la página, menos "domesticables" se vuelven las tablas, lo que causa bastantes quebraderos de cabeza a los diseñadores web principiantes. DreamWeaver proporciona un sistema intermedio, la "Vista de Disposición", que permite diseñar de un modo más cómodo, y obteniendo como resultado una tabla tan compleja como sea necesario.

En esta misma web encontrarás un tutorial sobre la Vista de Disposición de DreamWeaver.

En DreamWeaver, también se puede diseñar el aspecto de la página usando capas y luego convertirlas en celdas de una tabla (de modo similar a la Vista de Disposición).

El panel de Capas permite mostarlas, ocultarlas, cambiarles el nombre y el orden de colocación (valor Z). El panel se puede mostar pulsando F2 o bien el menú "Ventana-Otros-Capas". Aparece en el panel "Disposición Avanzada".

Podemos cambiar el nombre de una capa haciendole doble clic al nombre actual, y tecleando uno nuevo que describa mejor su contenido o utilidad.

Si activamos la opción "Evitar Solapamiento", DreamWeaver impide que las capas tengan intersección con otras, lo que es necesario si deseamos convertirlas en tabla.

Crear y usar una capa en DreamWeaver

Para crear una capa, usaremos el botón del panel Insertar (común), y arrastraremos una diagonal. En la pantalla aparece el símbolo , que no saldrá en el navegador, pero podemos ocultarlo mediante el menú "Ver-Ayudas Visuales-Elementos invisibles".

Si deseamos ocultar una capa, podemos usar el botón del ojo del panel de capas. Cuando aparece el icono nos indica que la capa estará oculta. Si aparece el ojo abierto o en blanco, la capa estará visible. Pinchando sobre el ojo de nuevo, podemos vover a mostrarla. En el ejemplo siguiente, la capa "Layer2" está visible, y la capa "Layer1" está oculta:

La utilidad de ocultar una capa reside en la posibilidad de volver a mostrarla mediante un programa en JavaScript; por ejemplo, al pulsar un botón o pasar el ratón por encima de un objeto. Esto nos permite crear menús desplegables, autoexplicativos, presentaciones temporizadas y otras posibilidades.

Se puede seleccionar una capa haciendo clic en su contorno, o bien en su nombre dentro del panel de capas.

En el inspector de propiedades podemos cambiar las coordenadas (izquierda y superior), el tamaño (ancho y alto), orden de colocación (índice Z), color e imagen de fondo, visibilidad, etc.

Para cambiar el tamaño de una capa, debemos seleccionarla y arrastrar los cuadrados negros que hay en el contorno.

Para mover una capa, una vez seleccionada, arrastraremos el doble cuadrado de su parte superior izquierda .

Características de una capa

Al seleccionar una capa, en el "Inspector de Propiedades" podemos ver sus características:

• ID de capa: es el nombre de la capa. Podemos dejar el que propone DreamWeaver (Layer y un número correlativo), pero si queremos gestionarlas desde JavaScript, será mejor asignarles nombres más descriptivos.
• Posición de la capa: Las coordenadas X e Y de la esquina superior de la capa vienen marcadas respectivamente como Iz (izquierda) y Sup (superior), ambas medidas en píxeles desde el borde del papel. Podemos teclear nuevos valores o arrastrala por la pantalla como vimos anteriormente.
• Tamaño de la capa: El ancho y alto de la capa se puede cambiar con los parámetros An y Al, respectivamente.
• El índice Z indica el "orden de apilamiento" de la capa en el eje Z (perpendicular a la pantalla). Si colocamos una encima de otra, la que tenga un índice Z mayor tapará a la otra (ver ejemplo más abajo).
• Visibilidad (Vis) puede tener varios valores:
  • visible: está visible (lo normal)
  • hidden: está oculta (no se verá en el navegador)
  • inherit: tendrá la misma visibilidad que la capa "madre" (en la que esté anidada)
  • default: por defecto, que será visible.
• Imagen y color de fondo: Im. Fondo y Col. Fondo, respectivamente, permiten "rellenar" la capa de una textura o color plano, que aparecerá "por debajo" de su contenido.
• Etiqueta determina qué tag se usará para definir la capa en el código HTML. Se puede dejar DIV sin perder opciones.
• Desbordamiento (Desb.)indica cómo se gestiona el contenido de una capa que no cabe en el tamaño fijado:
  • visible: todo el contenido de la capa será visible, por lo que el tamaño de la capa será mayor automáticamente de ser necesario.
  • hidden: la capa mantiene su tamaño especificado, y quedará oculto el contenido que no quepa.
  • scroll: aparecerán siempre unas barras de desplazamiento, aunque no hagan falta.
  • auto: aparecerán las barras de desplazamiento, sólo si son imprescindibles, es decir, si el tamaño de la capa no es suficiente para mostrar todo su contenido (es la opción más recomendable)
• Recorte: Rec dispone de 4 posibles valores (izquierda, derecha, superior e inferior), que serán el número de píxeles del contenido que no serán visibles a cada uno de dichos lados, pero yo no le encuentro utilidad práctica.

El siguiente ejemplo muestra el uso del parámetro Índice Z:

En el siguiente ejemplo, podemos ver el resultado del valor "auto" en el parámetro Desbordamiento, cuando la capa es menos que su contenido:

Cambiar las propiedades de una capa en tiempo real

Mediante programas en Javascript podemos cambiar los parámetros de una capa en tiempo de ejecución, de manera temporizada, o interactiva, respondiendo a las indicaciones del visitante.

Por ejemplo, podemos mostrar u ocultar una capa cuando el visitante haga clic en un enlace o pase el ratón por encima (desplegar menús, por ejemplo), cambiar su color de fondo, posición, tamaño, índice Z, etc...

Si no sabemos programar, podemos usar las facilidades que nos ofrece DreamWeaver, medinete los Comportamientos Javascript.