[FUNDAMENTOS DE PROGRAMACION WEB] HTML

Capítulo: CREANDO CAPAS (Maquetación 2)

1 ¿Qué es una capa?

Las capas son bloques con contenido HTML que pueden

posicionarse de manera dinámica y organizables en 3D.
Realmente tienen sentido dentro de los estilos CSS, de hecho
sus ventajas solo se pueden aprovechar al cien por cien
utilizando estilos CSS. Es la mejor ilustración de lo que significa
separar contenido de presentación.

El nombre de capas proviene de Netscape, que estos

elementos los implementaba como <layers>, en castellano
capas. Las versiones modernas de Netscape (de la 6 en
adelante) ya no usan esta etiqueta si no que se han decidido
por la más estándar <div> .

Las capas pueden guardar contenidos como imágenes, animaciones Web (Flash, gifs animados, etc), tablas,
formularios, etc.

2 ¿Porqué son importantes las capas?

Las capas hoy por hoy son una pieza importante en la maquetación de una página Web, seguro nos preguntaremos y
donde quedan las tablas, bueno la respuesta es: las capas son más fáciles de mover, organizar, ser lo más sencillo a la
hora de organizar en un espacio definido.

Una de las formas de maquetación, composición de una página, compaginación de diferentes elementos. Son sin
duda alguna las capas, a diferencia de las tablas son mas fijas “duras” de poder modificar, pero son más estables en
los navegadores, por lo que a la hora de maquetar podemos hacer una mezcla de ambos contendores.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 1

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

3 ¿Creación de capas en Dreamweaver?

Para crear una capa en Dreamweaver CS5, debemos identificar donde podemos encontrarlo veamos entonces

Hacemos clic en uno de ellos, por ejemplo el primero crea una capa en la posición donde se hizo clic, se llama
capa de posición, este tipo de capas no son desplazables.

Al hacer clic obtenemos el siguiente código:

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 2

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Ahora podemos, agregar una imagen o algún otro objeto

Ahora podemos utilizar la segunda opción (Div PA), el cual creara una capa también pero esta vez lo crearemos
haciendo clic y arrastrando formando un rectángulo imaginario el cual servirá de delimitación del área de la capa.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 3

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

El código generado será un código HTML más un código CSS.

Al igual que el caso anterior también podemos agregar objetos pero la diferencia está en qué la segunda opción al
generarse código CSS, podemos manipular dicha capa de manera sencilla utilizando los estilos CSS.

Podemos modificar dichas propiedades de la capa utilizando el panel de propiedades

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 4

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Como también podemos modificarlo a partir del código CSS, o más aun de la vista diseño con solo redimensionar o
arrastrar.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 5

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

4 Atributos para capas

Como se menciona en la imagen anterior una capa tiene algunas propiedades que puede ser modificada desde ese
panel, pero también tienes otros atributos que puede ser modificado conociendo otros atributos, sin explicaremos a
continuación algunos atributos de una capa.

4.1 Atributo top

Indica la distancia en vertical donde se colocará la capa. Si el atributo position es absolute, top indica la
distancia del borde superior de la capa con respecto al borde superior de la página.

4.2 Atributo left

Básicamente funciona igual que el atributo top, con la diferencia que el atributo left indica la distancia en
horizontal a la que estará situada la capa.

4.3 Atributo height

Sirve para indicar el tamaño de la capa en vertical, es decir, su altura.

4.4 Atributo width

Indica la anchura de la capa

4.5 Atributo position

Indica el tipo de posicionamiento de la capa. Puede tener los siguientes valores:

 absolute, indica que la posición de la capa y se calcula con respecto al punto superior izquierdo de la página,
es decir, toda capa que tenga position:absolute se ubicara de acuerdo a esa posición.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 6

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

 fixed, este atributo sirve para posicionar una capa con posicionamiento absoluto, pero su posición final será
siempre fija, es decir, aunque se desplace el documento con las barras de desplazamiento del navegador,
siempre aparecerá en la misma posición. El lugar donde se "anclará" la capa siempre es relativo al cuerpo (el
espacio disponible del navegador para la página). Si utilizamos top y left, estaremos marcando su posición
con respecto a la esquina superior izquierda y si utilizamos bottom y right su posición será relativa a la
esquina inferior derecha.

 inherit, este valor indica que el valor de position tiene que heredarse del elemento padre. No funciona
en Explorer, al menos hasta la versión 8.

 relative, indica que la posición de la capa es relativa a el lugar donde se estaba escribiendo en la página en el
momento de escribir la capa con su etiqueta.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 7

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

 static, es el valor predefinido por defecto de todos los elementos HTML. Los elementos posicionados
estáticamente se van colocando uno a continuación de otro, según el flujo HTML.

4.6 Atributo visibility

Sirve para indicar si la capa se puede ver en la página o permanece oculta al usuario. Este atributo puede
tener los valores:

- collapse, Si se emplea este valor en cualquier elemento que no sea una fila, grupo de filas, columna o
grupo de columnas, tiene el mismo efecto que el valor hidden.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 8

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

- hidden, indicará que la capa está oculta.

- inherit, es el valor por defecto, que quiere decir que hereda la visibilidad de la capa donde está metida
la capa en cuestión. Si la capa no está metida dentro de ninguna otra se supone que está metida en la
capa documento, que es toda la página y que siempre está visible.

- visible, sirve para indicar que la capa se podrá ver.

4.7 Atributo z-index

Sirve para indicar la posición sobre el eje z que tendrán las distintas capas de la página. Dicho de otra forma,
con z-index podemos decir qué capas se verán encima o debajo de otras, en caso de que estén superpuestas.
El atributo z-index toma valores numéricos y a mayor z-index, más arriba se verá la página.

5 Algunas propiedades para capas

5.1 Propiedad float

En simples palabras es una propiedad de CSS que nos permite “hacer flotar” un elemento a una posición relativa
rompiendo el esquema normal de la pagina.
Nos permitirá con facilidad paginas con 2 o más columnas, entre muchas otras cosas.

Esta propiedad tiene 3 valores importantes:

 left: Flota el elemento a la Izquierda.

 right: Flota el elemento a la Derecha
 none: Que el elemento no Flota.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 9

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

5.2 Propiedad overflow

Permite gestionar, mediante el uso de scroller, los contenidos de los documentos que sobrepasan el área con height y width.
Para ello, es necesario que la propiedad overflow. En este caso, vamos a buscar que el ejemplo anterior se redefina el ancho y el
alto de la capa contenedor.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 10

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

5.3 Propiedad clear

El estilo "clear" se utiliza conjuntamente con float. Utilizamos este estilo cuándo queremos que elementos
que tienen cerca un elemento flotante (mediante "float") dejen de alinearse junto a él.

Sus posibles valores son left (el elemento no permite flotantes a su izquierda ), right (el elemento no
permite flotantes a su derecha ) o both (el elemento no permite flotantes a ningún lado).

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 11

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

5.4 Propiedad clip

Es un atributo un poco difícil de explicar. En concreto sirve para recortar determinadas áreas de la capa y que no se
puedan ver. Una capa que está visible se puede recortar para que se vea, pero que no se vea algún trozo de esta. El
cliping se indica por medio de 4 valores, con esta sintaxis.

rect (top, right, bottom,left);

6 Algunos efectos para las capas

6.1 Redondeo de capas

En muchas ocasiones debemos colocar nuestras capas redondeadas para tener una mejor presentación, para lo cual
tenemos el siguiente código CSS para colocar.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 12

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Pero hay un pequeño problema este código solo funcionara en Mozilla, Google chrome o afines, mas no en internet
Explorer.
Ahora podemos utilizar el siguiente código el cual servirá para crear dicho efecto, pero servirá para cualquier
navegador, veamos:

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 13

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

6.2 Opacidad de capas

El efecto es muy fácil de aplicar, el único problema es que se consigue de forma diferente en los distintos
navegadores, por lo que tendremos que colocar un buen código si queremos que nuestro efecto sorprenda a los
usuarios de todos los navegadores (o al menos de los 3 principales). El ejemplo que vamos a ver funciona en Internet
Explorer, Opera y Firefox , google Chrome(al menos en sus últimas versiones). A mí se me ocurren bastantes
aplicaciones muy vistosas de este efecto de transparencia pero eso ya les dejo a su imaginación de ustedes.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 14