1. Software
  2. Adobe
  3. Dreamweaver
  4. Cómo crear divisiones en posición absoluta (AP) en Adobe Dreamweaver CS6

Libro Relacionado

Por Jennifer Smith, Christopher Smith, Fred Gerantabee

Adobe Dreamweaver CS6 utiliza contenedores o cajas virtuales controlados por CSS, creados por la etiqueta DIV para colocar libremente el contenido en una página. La etiqueta DIV es una etiqueta básica utilizada para crear áreas de contenido en su página.

Puede crear etiquetas DIV desde varios lugares en Dreamweaver, incluida la sección Diseño del panel Insertar. Cada etiqueta DIV puede tener un estilo de identificación único asignado para controlar su posición, apariencia y tamaño. El proceso de colocar el contenido a menudo requiere dos pasos: crear la etiqueta DIV y luego crear el estilo correspondiente.

Dreamweaver facilita esta tarea con la herramienta AP Div, que le permite dibujar cajas libremente en la página y colocar contenido dentro.

CSS trata la mayoría de los elementos de un contenedor de una página como cajas; este enfoque, conocido como el modelo CSS Box, permite que estos elementos compartan propiedades uniformes como el relleno, los márgenes, el ancho, la altura y los bordes.

Aunque CSS puede considerar la mayoría de los elementos que contienen una página como una caja (como una tabla o una lista), las etiquetas DIV se utilizan más comúnmente para crear cajas virtuales que se pueden utilizar para colocar texto, imágenes e incluso cajas anidadas.

Cada caja puede tener su propio ancho, altura, posición (a través de las propiedades superior e izquierda), borde, márgenes y relleno; cada una se establece utilizando las propiedades CSS apropiadas.

Para crear Divs AP (Absoluto-Posicionado), siga estos pasos:

  1. Cree una nueva página o abra una página existente de su sitio.
  2. En el panel Insertar, seleccione la categoría Diseño.
  3. Seleccione la herramienta Dibujar AP Div. El cursor aparece en forma de cruz cuando lo mueve hacia atrás sobre la página.
  4. Haz clic en cualquier parte de la página y arrastra para dibujar un nuevo AP Div; suelta el botón del ratón.
  5. Mueva el puntero del ratón sobre el borde del cuadro hasta que se convierta en una flecha de 4 direcciones; haga clic una vez y aparecerán las manijas en todos los lados.
  6. Haga clic y arrastre cualquiera de estos controles para cambiar el tamaño de la caja vertical u horizontalmente.
  7. Para mover el cuadro, haga clic y arrástrelo por la pestaña que se encuentra en el borde superior izquierdo y coloque el cuadro en el lugar que desee en la página.
  8. Si el panel Estilos CSS no está abierto, elija Window→CSS Estilos para abrirlo; en el panel Todos, haga clic a la izquierda de la hoja de estilo (<estilos>) para expandirlo. Por cada nuevo DIV creado, Dreamweaver asigna a apDiv un número correspondiente en el orden de creación.
  9. Haga clic dentro de la nueva casilla para escribir, pegar o insertar nuevo contenido.

Cuando dibujas un AP Div en la página, ocurren dos cosas: Dreamweaver inserta una etiqueta para crear la caja y crea un selector de ID de CSS que almacena la posición, ancho, alto y otras propiedades del DIV.

Después de crear un AP Div, puedes escribir, pegar o insertar contenido directamente dentro de él. También puede asignar una regla de clase a cualquier DIV del inspector de propiedades, la mayoría de las veces para manejar el formato del contenido, dejando que el selector de ID controle la posición y las dimensiones.