Translate

martes, 9 de abril de 2013

Creación de 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.
  1. En la ventana de documento, sitúe el punto de inserción en el lugar donde desea que aparezca la etiqueta div.
  2. Seleccione Insertar > Objetos de diseño > Etiqueta Div.
  3. 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.
  4. La etiqueta div tendrá el aspecto de un cuadro en el documento con texto de marcador de posición. Al desplazar el puntero sobre el borde del cuadro, Dreamweaver lo resaltará.
    Si la etiqueta div se sitúa con una posición absoluta, se convierte en un elemento PA. (Puedes editar las etiquetas div que no tengan una posición absoluta.)

    Div PA
    - 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, arrastra para crear una sola Div PA.

    Un elemento PA (elemento con posición absoluta) es un elemento de página HTML (en concreto, una etiqueta div o cualquier otra etiqueta) que tiene una posición absoluta asignada. Los elementos PA pueden contener texto, imágenes u otros contenidos que se pueden situar en el cuerpo de un documento HTML.
    Con Dreamweaver, puede emplear elementos PA para diseñar la página. Puede colocar elementos PA delante o detrás de otros elementos PA, ocultar algunos elementos PA mientras muestra otros y mover elementos PA por la pantalla. Puede colocar una imagen de fondo en un elemento PA y, a continuación, insertar un segundo elemento PA, con texto y un fondo transparente, delante del primero.
    Los elementos PA suelen ser etiquetas div con posición absoluta. (Estos son los tipos de elementos PA que Dreamweaver inserta de manera predeterminada.) Recuerde, no obstante, que puede clasificar cualquier elemento HTML (por ejemplo, una imagen) como elemento PA asignándole una posición absoluta. Todos los elementos PA (no sólo las etiquetas div con posición absoluta) aparecen en el panel Elementos PA.

    Ejemplo de código html div pa:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Sample AP Div Page</title>
    <style type="text/css">
    <!--
        #apDiv1 {
            position:absolute;
            left:62px;
            top:67px;
            width:421px;
            height:188px;
            z-index:1;
        }
    -->
    </style>
    </head>
    <body>
        <div id="apDiv1">
        </div>
    </body>
    </html>


    Div pa anidada:

    Una Div PA anidada es una Div PA que contiene código entre las etiquetas de otra Div PA. Por ejemplo, el siguiente código muestra dos Div PA que no están anidadas y dos Div PA que sí están anidadas:
    1
    2
    3
    4
    5
    <div id="apDiv1"></div>
    <div id="apDiv2"></div>
    <div id="apDiv3">
        <div id="apDiv4"></div>
    </div>



No hay comentarios:

Publicar un comentario