maquetacion (capas)

[FUNDAMENTOS DE PROGRAMACION WEB] HTML

DOCENTE: Salinas Encinas, Aldo [email protected] Página 1

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.



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:



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.



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



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.



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.



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.



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.



- 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.



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.



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).



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.



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:



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.

maquetacion (capas)

Documents