Dreamweaver - CS3

Lección 34: La pestaña de Diseño (2

34/58 Lecciones 

Etiquetas AP div

La diferencia entre una etiqueta Div y una AP Div es que la etiqueta AP div da una absoluta posición en la página.
La ventaja es que, no importante el tamaño del monitor del visitante de tu sitio, la etiqueta AP div se posiciona donde lo has colocado.
La desventaja es que las etiquetas AP div sucede cuando quieres centarlo en la página, ésto es virtualmente imposible. Entonces usas las etiquetas AP div cuando estás seguro de la posición.

Para añadir una etiqueta AP div a tu página, haz click en el botón “Dibujar Etiqueta AP” en la barra de herramientas.
Haz click y arrastrálo al lugar en tu documento donde lo quieras tener.
Siempre puedes cambiar las dimensiones en las propiedades de ventana o haciendo click y arrastrando los bloques al filo de las etiquetas AP div.
Para cambiar la posición, haz click y arrastra el ícono en la parte superior izquierda de la etiqueta AP div, o usa los encabezados “L” y “T” en la ventana de propiedades.

Para insertar una imagen en la etiqueta AP div, coloca el cursor en la etiqueta div y haz click en la barra de menu “Insertar”. Seleciona “Imagen” en el menu desplegable y navega a la imagen de tu disco duro. Seleccionala y haz click en el botón Aceptar.
Si tu imagen ya está en la carpeta de tu sitio, puedes hacer click y arrastrarla a la etiqueta AP Div.
Para añadir texto, coloca el cursor en la etiqueta AP Div y empieza a escribir.

Cuando trabajes con diferentes etiquetas AP Div en tu documento, todas ellas tienen un valor Z.
Esto puede ser visto en el panel de Elementos AP.
El valor Z determina la posición de la etiqueta AP Div en profundidad.
Compárala con las capas en Photoshop. De hecho, esas son también llamadas capas en versiones anteriores de Dreamweaver.

Para cambiar éste valor, cambiamos la posición (por ejemplo profundidad) de la etiqueta AP Div).
Un segundo modo de cambiar la profundidad de la etiqueta AP Div es haciendo click y arrastrando al panel de Elementos AP a la posición que quieras.

Absolutas a Relativas

Centrando una etiqueta AP Div en nuestras páginas es imposible.
Lo que hacemos es colocar una etiqueta div absoluta relativamente al centro de la etiqueta div.

Para esto necesitamos dos cosas.
La primera, una etiqueta div absoluta, (<div id=”absolutely”></div>) en nuestro código fuente en la etiqueta div centrada (<div id=”container”></div>). Después doble click en la etiqueta div absoluta en el panel de Estilos CSS.

Esto abre la ventana de diálogo “Definición Regla CSS”.
Escoge la categoría “Posicionamiento” y en “Tipo:” selecciona la opción “relativa”.
Para completar la sección del “Posicionamiento” necesitas una pequeña aritmética si deseas obtener la etiqueta absoluta a la mitad de tu página.
Esto es porque la etiqueta div absoluta no está posicionada en la página, pero si en el “contenedor” de etiqueta.
Haz click en el botón Aceptar cuando termines. No te preocupes, si después no aparece donde la querías, puedes siempre cambiar la etiqueta div absoluta, o también la etiqueta div relativa, haciendo doble click en el panel.


Como puedes ver en la imagen de abajo, la “posición” en el panel “Propiedades para # absoluto” ha cambiado a “relative”.

Ve ésta página en tu ventana de navegador ahora, verás que la etiqueta AP div, ha cambiando en una etiqueta div relativa y será desplegada al centro.

Increíble! Has completado Lección 34 INICIAR EL PROXIMO LECCIÓN