Curso de diseño web - Apuntes
Capas (en Dream 8) o elementos PA (en Dream CS3):
Dreamweaver ofrece las capas como otra alternativa para el armado de las páginas web. Su uso es sencillo debido a que pueden seleccionarse y arrastrarse con el mouse a la posición deseada y redimensionarse arrastrando desde sus bordes.
Una capa de Dreamweaver es una porción de HTML delimitada por las etiquetas <div>, y su posición en la pantalla es independiente del lugar donde esté escrito el código.
Las propiedades de la capa: dimensiones, posición, color de fondo, visibilidad, etc, se definen por medio de un estilo CSS que automáticamente crea el Dreamweaver y guarda en la cabecera del documento HTML.
Las capas pueden contener textos, imágenes, tablas, formularios, flash, etc. También pueden ocultarse y definir su posición delante o detrás de otra. Estos atributos se modifican desde la ventana Propiedades o desde la ventana Capas (de los paneles de la derecha).
Las capas tienen la propiedad de anidarse igual que las tablas. Para dibujar capas anidadas es necesario tildar la opción Anidar al crear en una capa desde Edición/Preferencias/Capas. Una capa anidada hereda de la capa que la contiene algunos de los atributos como posición, visibilidad, etc.
Capas y tabla centrada horizontalmente:
Las capas que dibuja Dreamweaver tienen por defecto posición absoluta. Esto significa que su ubicación se mide en píxeles desde la izquierda de la pantalla. Si el diseño del sitio está resuelto en tablas y la tabla principal está marginada a la izquierda, todo funciona bien. El problema aparece cuando queremos centrar el diseño. Si el diseño de la página se basa en una tabla centrada y en la misma página hay una o más capas, lo que ocurre es que la tabla tiene una posición relativa que varía según el ancho del monitor y las capas no, por lo tanto, cuando la resolución del monitor varía, se desarma el diseño. Para solucionar este problema hay dos opciones:
Opción 1: capa con posición relativa dentro de una celda
La desventaja de esta opción es que se desaprovecha la posibilidad de ubicarse por arriba de otros elementos, necesita lugar en una celda vacía. Pero puede ser útil cuando lo que se busca es que un párrafo de texto haga scroll.
1 - Dibujar una capa y desde el HTML copiar el código que por defecto Dreamweaver escribe debajo de la etiqueta <body> e insertarlo dentro del código de una celda. Quedaría asi:
<td><div id="capa1"></div></td>
2- desde el panel Estilos CSS modificar el estilo de la capa #capa1 en la categoría Posición/Tipo:Relativa.
3- ajustar la posición nuevamente desde el estilo o desde la ventana Propiedades. Esta modificación hace que Dreamweaver deje de considerarla capa, por lo tanto, ya no estará accesible desde el panel capas (Elementos PA en Dream CS3) y en adelante deberá editarse como etiqueta DIV.
Opción 2: insertar una etiqueta div que contenga todo el diseño
Esto hace que las capas queden anidadas en la etiqueta div que tendrá el mismo ancho de la tabla y por lo tanto tomarán ese punto como origen para determinar la ubicación en la pantalla.
1- Armar la página y dibujar las capas
2- Desde la vista diseño, seleccionar la etiqueta <body>
3- Desde las herramientas del grupo diseño, insertar etiqueta div. Definir el ID de la etiqueta que servirá para asociar con el estilo CSS, por ejemplo"capagrande" (sin las comillas)
4- Crear nueva regla CSS. Se puede hacer desde ese mismo botón o aceptar y crear estilo nuevo desde el panel CSS. El estilo se deberá llamar en este caso #capagrande y tendrá los siguientes atributos:
En la categoría Cuadro, Ancho (el mismo ancho de la tabla, por ejemplo: 780), Margen: igual para todo: auto. En la categoría Posición: indicar Tipo: relativa, Colocación: ningún valor.
Si se dibuja una nueva capa deberá estar tildada la opción Anidar al crear en una capa en Preferencias, porque si esto no está activado, el código de la nueva capa quedará fuera del código de la capa grande y no se centrará.
Links recomendados:
Propiedades de capas:
http://www.aulaclic.es/dreamweavercs3/t_14_1.htm
Mostrar ocultar capas:
http://www.webtaller.com/construccion/programas/edito-res/dreamweaver/lecciones/capas.php
Menu desplegable con capas:
http://www.desarrolloweb.com/articulos/968.php
Centrar capas:
http://www.tierradenomadas.com/tw003.phtml