miércoles, 5 de febrero de 2014

Etiquetas DIV PA

http://macprovid.vo.llnwd.net/o43/hub/media/1090/6800/Pic_2.png
Inserción y edición de etiquetas div
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. Si no se siente cómodo utilizando código CSS pero sí con el uso de tablas, también puede probar a utilizar tablas.

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.

Inserción de una Div PA
Dreamweaver permite crear Div PA y colocarlas en la página fácilmente. También puede crear Div PA anidadas.
Al insertar una Div PA, Dreamweaver muestra el contorno de la Div PA en la vista Diseño de forma predeterminada y resalta el bloque al desplazar el puntero sobre él. Puede activar los bordes de la Div PA (o de cualquier elemento PA) desactivando Contornos de elementos PA y Contornos de diseño CSS en el menú Ver > Ayudas visuales. También puede activar los fondos y el modelo de cuadro para los elementos PA como ayuda visual durante el diseño.

Después de crear una Div PA, puede añadirle contenido situando el punto de inserción en la Div PA; a continuación, añada contenido cómo lo haría en una página.

Dibujo de una Div PA o de varias Div PA consecutivamente
En la categoría Diseño del panel Insertar, haga clic en el botón Dibujar Div PA .
En la vista de diseño de la ventana de documento, siga uno de estos procedimientos:

Arrastre para crear una sola Div PA.
Arrastre el ratón mientras presiona la tecla Control (Windows) o Comando (Macintosh) para dibujar varias Div PA consecutivamente.
Podrá continuar dibujando nuevas Div PA mientras no suelte la tecla Control o Comando.

Inserción de una Div PA en un lugar concreto del documento
Sitúe el punto de inserción en la ventana de documento y seleccione Insertar > Objetos de diseño > Div PA.
Nota: Mediante este procedimiento, la etiqueta de la Div PA se inserta en el lugar seleccionado de la ventana de documento. La representación visual de la Div PA puede, por tanto, afectar a otros elementos de la página (por ejemplo, al texto).

Colocación del punto de inserción en una Div PA
Haga clic en cualquier lugar dentro de los bordes de la Div PA.
Se resaltarán los bordes de la Div PA y aparecerá el manejador de selección, pero la Div PA propiamente dicha no quedará seleccionada.

Bibliografia:
http://macprovid.vo.llnwd.net/o43/hub/media/1090/6800/Pic_2.png
http://help.adobe.com/es_ES/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7deda.html#WScbb6b82af5544594822510a94ae8d65-7df4a

No hay comentarios:

Publicar un comentario