Lo primero que debes saber acerca de una Div es que el término se aplica específicamente a Adobe Dreamweaver. El concepto, sin embargo, se refiere a un componente universal de codificación HTML y es una parte integral de la estructura de la mayoría de los diseños web. PA, o el posicionamiento absoluto, se refiere a un método de diseño de HTML que permite el mayor control sobre los elementos que aparecen en una página, independientemente del navegador utilizado para abrir el sitio.

Puede crear diseños de página insertando manualmente etiquetas div y aplicando a estas estilos de posición CSS. Una etiqueta div es una etiqueta que define las divisiones lógicas existentes en el contenido de una página Web. Puede utilizar etiquetas div para centrar bloques de contenido, crear efectos de columna y crear diferentes áreas de color, entre otras posibilidades.Si no está familiarizado con el uso de etiquetas div y de hojas de estilos en cascada (CSS) para crear páginas Web, puede crear un diseño CSS basado en uno de los diseños predefinidos que se suministran con Dreamweaver.

Inserción y edición de etiquetas div

Puede utilizar etiquetas div para crear bloques de diseño CSS y colocarlos en el documento. Esto resulta útil si ha adjuntado al documento una hoja de estilos CSS con estilos de posición. Dreamweaver le permite insertar rápidamente una etiqueta div y aplicar a ésta estilos existentes.

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

Siga uno de estos procedimientos:

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

En la categoría Diseño del panel Insertar, haga clic en el botón Insertar etiqueta Div

Defina cualquiera de las opciones siguientes:

Insertar

Permite seleccionar la ubicación de la etiqueta div y el nombre de la etiqueta si no es una etiqueta nueva.

Clase

Muestra el estilo de la clase aplicado actualmente a la etiqueta. Si ha adjuntado una hoja de estilos, las clases de la hoja de estilos aparecerán en la lista. Utilice este menú emergente para seleccionar el estilo que desea aplicar a la etiqueta.

ID

Permite modificar el nombre utilizado para identificar la etiqueta div. Si ha adjuntado una hoja de estilos, aparecerán en la lista los ID definidos en la hoja de estilos. No aparecen en la lista los ID de bloques que ya están en el documento.

Edición de etiquetas div

Cuando se asignan bordes a etiquetas div, o cuando se selecciona Contornos de diseño CSS, las etiquetas div tienen bordes visibles. (La opción Contornos de diseño CSS está seleccionada de forma predeterminada en el menú Ver > Ayudas visuales.) Cuando se pasa el puntero por encima de una etiqueta div, Dreamweaver la resalta. Puede cambiar el color de resaltado o desactivar el resaltado.

Cuando se selecciona una etiqueta div, puede ver y editar sus reglas en el panel Estilos CSS. Para añadir contenido a la etiqueta div también puede situar el punto de inserción dentro de la etiqueta div y, a continuación, añadir el contenido como lo haría en una página.

Visualización y edición de reglas aplicadas a una etiqueta div

Siga uno de estos procedimientos para seleccionar la etiqueta div:

Haga clic en el borde de la etiqueta div.

Busque el resaltado para ver el borde.

Haga clic dentro de la etiqueta div y presione las teclas Control + A (Windows) o Comando + A (Macintosh) dos veces.

Haga clic en el interior de la etiqueta div y seleccione la etiqueta div del selector de etiqueta en la parte inferior de la ventana de documento.

Seleccione Ventana > Estilos CSS para abrir el panel Estilos CSS si aún no está abierto.

Las reglas que se aplican a la etiqueta div aparecen en el panel.

Lleve a cabo los cambios necesarios.

Código HTML para elementos Div

Dreamweaver crea elementos PA utilizando la etiqueta div. Al dibujar un elemento PA con laherramienta Dibujar Div PA, Dreamweaver inserta una etiqueta div en el documento y asigna a la etiqueta div un valor de ID (de forma predeterminada, apDiv1 para la primera div dibujada, apDiv2 para la segunda, etc.). Más adelante es posible cambiar el nombre de la Div PA por el que desee mediante el panel Elementos PA o el inspector de propiedades. Dreamweaver también utiliza código CSS incrustado en el encabezado del documento para colocar la Div asignar sus dimensiones exactas.

Puede cambiar las propiedades de colocación de las etiquetas Div PA (o de cualquier elemento PA) en la página, incluidas las coordenadas x e y, el índice z (también denominado orden de apilamiento) y la visibilidad.

Dreamweaver permite crear Div PA y colocarlas en la página fácilmente. También puede crear Div PA anidadas

Introducción Web - Ana Pardo