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>

Puede definir las propiedades de colocación de las capas en la página, incluidas las coordenadas x e

y, índice z (también denominado orden de apilamiento) y visibilidad. Para más información,

consulte “Configuración de preferencias y propiedades de capa” en la página 158.

Temas relacionados

• “Aspectos básicos de las capas” en la página 152

Inserción de bloques de contenido para diseño

Puede utilizar etiquetas div para situar bloques de contenido en el documento. Esto es

especialmente útil si ya tiene una hoja de estilo CSS con estilos de posición adjunta al documento.

Dreamweaver le permite insertar rápidamente una etiqueta div y aplicarle estilos existentes.

Nota: puede utilizar un archivo de diseño de Dreamweaver como punto de partida para el diseño de

CSS. Seleccione un archivo en la categoría Diseños de páginas (CSS) del cuadro de diálogo Nuevo

documento (véase “Creación de un documento basado en un archivo de diseño de Dreamweaver”

en la página 74).

Para insertar una etiqueta div:

1 En la ventana de documento, sitúe el punto de inserción en el lugar donde desea que aparezca

la etiqueta div.

2 Siga uno de estos procedimientos:

■ Seleccione Insertar > Objetos de diseño > Etiqueta Div.

■ En la categoría Diseño de la barra Insertar, haga clic en el botón Etiqueta Div.

154 Capítulo 7: Diseño de páginas con CSS

Aparece el cuadro de diálogo Insertar etiqueta Div.

3 Complete este cuadro de diálogo.

Para más información, haga clic en el botón Ayuda

...