CURSO COMPLETO DE DREAMWEAVER 8

--MEDIOS--



07 - CAPAS


Ahora es cuando empieza lo más divertido con dreamweaver, el manejo de capas, los comportamientos, etc... vamos a comenzar a conocer un poquito las capas.

Las capas en dreamweaver, se usan normalmente para mover contenido por la pantalla, es decir, animando nuestra página web, aunque también pueden usarse para maquetar contenidos.

En cada capa, podemos incluir información, y tratar esa información de forma individual, con unas propiedades independientes al resto de los elementos, sobre todo el posicionamiento de nuestra capa.

Para insertar una capa, podemos hacerlo con la herramienta de Diseño > Dibujar capa



Ahora damos click en una parte de nuestro documento y arrastramos hasta el lugar donde queramos que finalice la capa:



En el panel de capas podemos manejar cada una de ellas, hacer que sean visibles o no, etc.



Ojo: Si el ojo está abierto, significa que la capa es visible, si por lo contrario, está cerrado, la capa no es visible, para cambiar de un modo a otro, tan solo hay que seleccionar una capa y hacer click en el ojo.

Nombre: Podemos dar un nombre a nuestra capa, y desde aquí podemos arrastrar las capas hace una posición superior o inferior.

Z: Desde aquí podemos cambiar el orden de las capas, para ello basta hacer doble click sobre el número de la capa y ponemos un número mayor o menor a la capa existente.

Algo muy útil con las capas, es la posibilidad de anidarlas. Al anidar las capas, creamos una capa dentro de otra, eso significa que al mover la capa padre, las capas anidadas a él, se moverán también con él.

Anidar capas es muy sencillo, tan solo tienes que dibujar dos capas y arrastrar la capa que quieras anidar, dentro de la otra:



Podemos configurar Dreamweaver para que anide las capas automáticamente:

Edición > Preferencias > Capas

Y seleccionamos la casilla de anidar.

Podemos modificar las capas desde la paleta de propiedades:


Id capa: Nombre que le queramos dar  a nuestra capa

Iz y Sup: Posición de la capa en relación con el margen izquierdo y superior

An y Al: Tamaño de la capa

Indice Z: Posición de la capa

Im fondo: Podemos seleccionar un fondo para nuestra capa

Vis: Determina la visibilidad de la capa, cuando:

Default: visible de forma predeterminada

Inherit: La capa anidada toma la visibilidad de la capa padre

Visible: Pues eso visible :p

Hidden: Oculta la capa

Color de fondo: Establece un color de fondo a la capa

Rec (recorte): Introduciendo unos valores en los campos, crea un área cuadrada dentro de la capa, haciendo visible solo el contenido que esté dentro del área.

Des (desbordamiento): Si el contenido de la capa, sobrepasa al tamaño de la capa, ofrece los siguientes valores:

- Visible: El contenido siempre estará visible

- Hidden: El contenido que se desborda, estará oculto.

- Scroll: Crea un scroll en el margen derecho e inferior, que te permite visualizar el contenido completo de la capa.

- Auto: Crea solo un scroll, donde desborde el contenido, por ej, solo en el margen derecho.


El siguiente documento lo he creado con diferentes capas, algunas de ellas con algunos efectos:

Haz click aquí, para ver un ejemplo.

 

2007©By Almaweb.es

subir

Ir al menú de tutoriales de DREAMWEAVER

Todos los tutoriales son de mi completa autoría,

cualquier parecido con otros, es pura coincidencia.

Queda totalmente prohibida su reproducción, total o parcial.

Si quieres enlazar mis tutoriales, no hay problema,

solo mandame un e-mail, para comunicarmelo.

Cualquier duda o sugerencia:

Tutoriales registrados

 

Alma Web

Design Sensation by almaweb.es

Foro Design Sensation