Utilizando Layers

>> //seccion/webmaster/ -- 2 comentario /// Agregado el 2003-09-08 @ Por kaioken

Dreamweaver implementa los layers como una poderosa herramienta de los CSS-P, intuitivo, amigo de los diseñadores, compatible con los diseños. Como su nombre lo dice, los layers ofrecen muchas más que un posicionamiento perfecto de pixels. Uno puede poner un layer sobre otro layer, esconder uno mientras muestra otro, moverlo por la pantalla o mover varios layers simultáneamente por la pantalla.

Dreamweaver implementa los layers como una poderosa herramienta de los CSS-P, intuitivo, amigo de los diseñadores, compatible con los diseños. Como su nombre lo dice, los layers ofrecen muchas más que un posicionamiento perfecto de pixels. Uno puede poner un layer sobre otro layer, esconder uno mientras muestra otro, moverlo por la pantalla o mover varios layers simultáneamente por la pantalla.

Los layers agregan una nueva dimensión al panel de un diseñador, ya que le da tan grande flexibilidades de organización. La gran ventaja es que puedes agregar tanto imagenes, texto, tablas, implementarlos con scripts, etc.

Dreamweaver nos deja crear páginas con layers y luego transformar estas en tablas, para que sean visibles en otro browsers.

Medidas de Posición


El posicionamiento de un layer es determinado por las alineaciones de los elementos X y Y. En CSS X (se define como izquierda) comenzando en el lado izquierdo de la pagina y Y (definido como Top) es medido desde el tope de la pagina. Como en las otras opciones de CSS, uno tiene la opción de cambiar el sistema de medida de Izquierda a Tope. Todas las medidas son dadas por dreamweaver como numero seguido por abreviaciones de la medida.

Unidades
Pixel :: px
Point :: pt
Pulgadas :: in
Centímentro :: cm
Milímetros :: mm
Picas :: pc
EMS :: em
Porcentaje :: %


Con los Pixel y % los pixels se mueven dependiendo de la resolucion de la pantalla y el browser, por eso algunos tienen problemas con ellos


Los layers se presentaron como una nueva adición a los Cascading Style Sheets, como un recurso de posicionamiento absoluto para una página Web.

Un layer en codigo html se ve así:
Code:

 <di vid='layer1' style='position:abosolute, visiblility:inherit: width:200px: height:115px: z-index:1'>
 


Insertando un Layer


Dreamweaver nos deja crear layers con facilidad y precisión. Podemos dibujar un layer, colocarlos donde queramos, aumentarle su tamaño con precisión o a medida de ojo.

User posted image.


1- Icono del layer
2- Layer Seleccionado
3- Dibujar Layer
4- Propiedades de los Layers

Propiedades de un Layer


Uno puede modificar casi todo los atributos de los Layers con la opción properties.

User posted image.


Descripción

1- Bg Color :: Fondo del Layer
2- Bg Image :: Imagen de fondo para el layer
3- Clip :: Región de Visibilidad
4- H (Altura) :: Medida Vertical de Layer
5- L (Izq) :: Medida del Origen Izquierdo
6- T (Top) :: Medida del Tope
7- W (Ancho) :: Medida Horizontal
8- Z- Index :: Orden de layer dependiendo de lo que existen
9- Name :: Nombre usado para ser identificado por scripts
10- Overflow :: Determina como se utilizan las imagenes o textos mas grandes que el layer
11- Tag :: Tipo de tag html que se puede utilizar
12- Vis :: Determina se se ve el Layer