Herramientas básicas Del Dreamweaver

Acerca de las capas en Dreamweaver

Una capa es un elemento de página HTML que se puede colocar en cualquier lugar del

documento. Las capas pueden contener texto, imágenes u otros contenidos que se pueden situar

en el cuerpo de un documento HTML.

Nota: en Dreamweaver, una capa es una etiqueta div con una posición absoluta o relativa. Las

capas, tal y como se describen en este capítulo, se refieren al concepto de diseño de Dreamweaver, y

no a la etiqueta layer.

Aspectos básicos de las capas

Con Dreamweaver puede emplear capas para diseñar la página. Puede colocar unas capas delante

o detrás de otras, ocultar algunas capas mientras muestra otras y mover capas por la pantalla.

Puede colocar una imagen de fondo en una capa y, a continuación, insertar una segunda capa, con

texto y un fondo transparente, delante de la primera.

Las capas proporcionan una gran flexibilidad a la hora de colocar contenido. Sin embargo, los

navegadores Web anteriores a Microsoft Internet Explorer 4.0 y Netscape Navigator 4.0 no

pueden mostrar capas y los navegadores de la versión 4 no muestran las capas de una forma

totalmente coherente.

Si desea asegurarse de que todos los usuarios pueden ver su página Web, diséñela utilizando capas

y, posteriormente, convierta las capas en tablas. Para más información, consulte “Conversión de

capas en tablas” en la página 165. Si cree que los visitantes de la página van a usar navegadores

más recientes, puede realizar el diseño con capas, sin convertirlas en tablas.

Temas relacionados

• “Administración de capas” en la página 159

Código HTML para capas

Al insertar una capa en un documento, Dreamweaver inserta la etiqueta HTML de dicha capa en

el código. Puede configurar Dreamweaver para que utilice la etiqueta div o span para las capas.

Dreamweaver crea las capas utilizando de forma predeterminada la etiqueta div. Para cambiar la

etiqueta predeterminada, véase “Configuración de las preferencias de capa” en la página 158.

Nota: puede utilizar otras dos etiquetas para crear capas: layer e ilayer. Sin embargo, estas

etiquetas sólo son compatibles con Netscape Navigator 4; Internet Explorer no las reconoce y

Netscape dejó de ofrecer soporte a éstas en las versiones posteriores del navegador. Dreamweaver

reconoce las etiquetas layer e ilayer, pero no las utiliza para crear capas.

La diferencia entre la etiqueta div y la etiqueta span estriba en que los navegadores que no

admiten capas introducen saltos de línea adicionales antes y después de la etiqueta div. Es decir,

la etiqueta div es un elemento de nivel de bloque, mientras que la etiqueta span es un elemento

en línea. En la mayoría de los casos es más conveniente que el contenido de la capa aparezca en un

párrafo independiente en los navegadores que no admiten capas. Por tanto, la mayoría de las veces

será preferible usar div en lugar de span.

Inserción de bloques de contenido para diseño 153

Para facilitar la lectura en navegadores antiguos, tenga cuidado dónde inserta el código de una

capa. El código que define una capa puede situarse en cualquier lugar del cuerpo de un archivo

HTML. Cuando dibuja una capa en Dreamweaver, ésta se muestra donde la ha dibujado, pero

Dreamweaver inserta su código al principio de la página, inmediatamente después de la etiqueta

body. Si utiliza el comando Insertar capa en lugar de dibujar una capa, el código se colocará en el

punto de inserción. Si crea una capa anidada, Dreamweaver insertará el código dentro de la

etiqueta que define la capa padre.

Nota: independientemente de la etiqueta que utilice, las versiones de Internet Explorer y Netscape

Navigator anteriores a la 4.0 muestran el contenido de la capa, pero no la capa. El contenido de la

capa aparecerá en el punto de la página donde se encuentre el código de la capa. Por ejemplo, si el

código de la capa se encuentra al principio de la página, su contenido aparecerá al principio de la

página en los navegadores que no admiten capas.

A continuación se ofrece un ejemplo de código HTML de una capa:

<div id="Layer1" style="position:absolute; visibility:inherit; width:200px;

height:115px; z-index:1">

</div>

A continuación se ofrece un ejemplo de código HTML de una capa anidada en otra:

<div id="Parent" style="position:absolute; left:56px; top:54px; width:124px;

height:158px; z-index:1;">

Contenido situado en el interior de la capa padre.

<div id="Nested" style="position:absolute; left:97px; top:114px; width:54px;

height:69px; z-index:1;">

Contenido situado en el interior de la capa anidada.

</div>

</div>

...