19 febrero 2008

Dreamweaver: Sepultado entre capas

Las capas son elementos que te pueden ayudar mucho en diseñar una página güev son las capas. Las capas son cuadros que puedes poner en cualquier parte de tu página que puede contener cosas (como imágenes, texto, tablas, animaciones flash, etc.), similar a los cuadros de texto de Microsoft Word, pero más interesantes (digo, en Word no puedes meter una animación de flash y que se vea de forma decente). Las capas se pueden ocultar, mostrar o encimarse entre ellos, lo cual te da grandes posibilidades de diseño que solo son limitados por tu imaginación (bueno, tal vez seas demasiado imaginativo, pero ese es otro rollo).

Aquí te explicaré lo mejor que pueda la manera de incluir capas en tu página. Para empezar, haz clic en el menú Insert, luego Layout object y luego Layer, como puedes ver en esta imagen:


Al tener esto, aparece la capa dibujada sobre la página como se ve aquí:


Puedo manipular la posición o el tamaño de la capa se hace arrastrando el cuadrito que está sobre la esquina superior izquierda de la capa (para mover la capa) o arrastrando los cuadritos azules que están alrededor de la capa (para cambiar su tamaño). En la siguiente imagen puse el cursor del mouse sobre el cuadro y me marcó sus propiedades. También puedes ver los cuadritos azules que te permiten cambiar el tamaño.


Aquí hay un ejemplo de esta capa con texto y una imagen adentro. Para hacerlo, simplemente haz clic adentro de la capa y comienza a escribir o insertar imagen o lo que sea, tal y como lo harías en la página:


Cuando se tienen muchas capas en un mismo documento, se pueden seleccionar de manera más sencilla usando el panel Layers que está en el menú Window y luego Layers como puedes ver en esta figura:


Cuando lo seleccionas aparece una palomita a un lado indicando que el panel está visible (o sea que si no lo ves, saca tus lentes o acércate al monitor). El panel se ve así:


En este caso, solo se ve una capa (el Layer1) porque solo he incluido una capa en la página. Si tuviera más capas, desde aquí puedo decir el orden en que aparecen.

Siguiendo con la onda capeada pero pasando a otras cosas, Así se ve el inspector de propiedades cuando tienes una capa seleccionada. Voy a tratar de describir lo que hace cada parte, pero primero, ahi va la imagen:

  1. El nombre de la capa. Por default se llama Layer1, Layer2, etc.
  2. Posición de la capa. Es el número de pixeles desde la izquierda (Left) y desde la parte superior (Top) de la página y la esquina superior izquierda de la capa.
  3. El ancho (Width) y alto (Height) de la página.
  4. Es el orden en que se ponen las capas en el documento. Determina cual va enfrente y cual atrás.
  5. Indica la visibilidad inicial de la capa. Puede ser de 4 tipos: default, dará visibilidad según lo que crea conveniente el navegador, inherit muestra la capa mientras se la página sea visible, visible muestra la capa independientemente si la página se esté mostrando o no, y hidden es una capa oculta.
  6. Se encarga de controlar la manera en que aparecen las capas en el navegador cuando el contenido sea más grande de lo que cabe en la capa. Hay cuatro tipos: visible le dice que el contenido extra aparece en la capa, hidden que oculta el contenido "sobrante", scroll le permite al usuario moverse en la capa usando barras de scroll, auto hace que el navegador muestre las barra de scroll solo cuando se necesiten.
Espero que esto les aclare dudas y sirva de referencia. Si tienes dudas, déjame un mensaje. ¡Hasta la próxima!
Publicar un comentario
Related Posts Plugin for WordPress, Blogger...