Creación de AP Divs en Adobe CS5 Dreamweaver

  1. Software
  2. Adobe
  3. Dreamweaver
  4. Creación de AP Divs en Adobe CS5 Dreamweaver

Libro Relacionado

Por Jennifer Smith, Christopher Smith, Fred Gerantabee

Adobe Creative Suite 5 (Adobe CS5) Dreamweaver utiliza contenedores o cajas virtuales en posición 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. 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. La herramienta AP Div le permite dibujar cajas libremente en la página y colocar contenido dentro.

AP Div es la abreviatura de DIV en posición absoluta; un elemento con una posición absoluta se fija en una ubicación específica de la página. Cuando dibuja una AP Div, su posición se establece normalmente utilizando las propiedades CSS superior e izquierda, con la esquina superior izquierda de la página como punto de referencia.

CSS trata cada elemento de una página como una caja que contiene contenido; se le conoce como el modelo CSS Box. Aunque CSS puede considerar que una caja es casi cualquier elemento que contenga un elemento en una página (como una tabla o una lista), las etiquetas DIV se utilizan más comúnmente para crear cajas virtuales que se pueden utilizar para posicionar texto, imágenes e incluso otras cajas.

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 reglas CSS.

  1. En el panel Insertar, seleccione la categoría Diseño.
  2. Seleccione la herramienta Dibujar AP Div. El cursor aparece en forma de cruz cuando lo mueve hacia atrás sobre la página.
  3. Haz clic en cualquier parte de la página y arrastra para dibujar un nuevo AP Div; suelta el botón del ratón, haz clic y arrastra la página con la herramienta Dibujar AP Div para crear un cuadro.
  4. Mueva el puntero del ratón sobre el borde del cuadro hasta que se convierta en una mano; haga clic una vez y las manijas aparecerán en todos los lados.
  5. Haga clic y arrastre cualquiera de estos controles para cambiar el tamaño de la caja vertical u horizontalmente.
  6. 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.
  7. 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.
  8. Haga clic dentro de la nueva casilla para escribir, pegar o insertar nuevo contenido.

Cuando dibujas un AP Div en la página, Dreamweaver inserta una etiqueta para crear el cuadro y crea un selector de ID que almacena la posición, el ancho, la altura 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.

Cada Div de AP que dibuje aparece automáticamente en el panel Elementos de AP (seleccione Window→AP Elements para mostrarlo). El panel Elementos AP puede ayudarte a seleccionar, ocultar y mostrar cualquier Divs AP en la página.

Utilice el panel Elementos AP para seleccionar, ocultar y reorganizar las Divisiones AP en su página.

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *