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 del cuadro de diálogo.

4 Haga clic en Aceptar.

La etiqueta div tendrá el aspecto de un cuadro en el documento con texto de marcador de

posición. Al desplazar el puntero sobre el cuadro, Dreamweaver lo resaltará.

Si la etiqueta div se sitúa absolutamente o relativamente, actúa como una capa de Dreamweaver.

Para información sobre el uso de capas, véase “Configuración de preferencias y propiedades de

capa” en la página 158, “Administración de capas” en la página 159 o “Manipulación de capas” en

la página 162.

Para información acerca del trabajo con etiquetas div que no tengan una posición absoluta o

relativa, véase “Utilización de bloques de contenido para diseño” en la página 155.

Temas relacionados

• “Utilización de bloques de contenido para diseño” en la página 155

Cambio del color de resaltado de los bloques de contenido

Cuando se desplaza el puntero sobre un bloque de contenido, Dreamweaver lo resalta.

Dreamweaver resalta los bloques que tengan una clase, un identificador o un estilo asociado.

Puede activar o desactivar el resaltado según sea necesario y cambiar su color en las preferencias.

Para cambiar las preferencias de resaltado de los bloques de contenido:

1 Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).

Aparece el cuadro de diálogo Preferencias.

2 Seleccione Resaltando en la lista de categorías de la izquierda.

3 Realice uno de estos cambios:

■ Para cambiar el color de resaltado de los bloques de contenido, haga clic en el cuadro Color

al pasar el ratón por encima y seleccione un color mediante el selector de color (o bien

escriba el valor hexadecimal del color de resaltado en el cuadro de texto).

Para información sobre cómo utilizar el selector de color, véase “Utilización de colores” en

la página 267.

■ Para activar o desactivar el resaltado de los bloques de contenido, active o desactive la

selección de la casilla Mostrar correspondiente a Ratón por encima.

Nota: estas opciones afectan a todos los objetos, como tablas, que Dreamweaver resalta cuando

pasa el puntero del ratón sobre ellos.

4 Haga clic en Aceptar.

Utilización de bloques de contenido para diseño 155

Utilización de bloques

...