En la ventana Documento, coloque el punto de inserción
donde quiera que aparezca la etiqueta div.
Última actualización el
25-09-2023
Aprenda a utilizar etiquetas div para centrar bloques de contenido, crear efectos de columna y crear diferentes áreas de color, entre otras posibilidades.
Puede crear diseños de página insertando manualmente etiquetas div y aplicándoles estilos de posicionamiento CSS. Una etiqueta div es una etiqueta que define divisiones lógicas dentro del contenido de una página web. Puede usar etiquetas div para centrar bloques de contenido, crear efectos de columna, crear diferentes áreas de color y mucho más.
Si no estás familiarizado con el uso de etiquetas div y hojas de estilo en cascada (CSS) para crear páginas web, puedes crear un diseño CSS basado en uno de los diseños prediseñados que vienen con Dreamweaver.Si no te sientes cómodo trabajando con CSS, pero estás familiarizado con el uso de tablas, también puedes intentar usar tablas.
Inserción de etiquetas div
Puedes usar etiquetas div para crear bloques de diseño CSS y posicionarlos en tu documento.Esto es útil si tienes una hoja de estilo CSS existente con estilos de posicionamiento adjuntos a tu documento.Dreamweaver le permite insertar rápidamente una etiqueta div y aplicarle estilos existentes.
Siga uno de estos procedimientos:
Seleccione Insertar > HTML > Div.
En la categoría HTML del panel Insertar, haga clic en Div.
Defina cualquiera de las opciones siguientes:
Insertar
Le 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 adjuntó una hoja de estilo, las clases definidas en esa hoja de estilo aparecen en la lista. Use este menú emergente para seleccionar el estilo que quiere 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. Los ID de bloques que ya están en tu documento no se enumeran.
Nota
Dreamweaver te avisa si introduces el mismo ID que otra etiqueta en tu documento.
Nueva regla CSS
Abre el cuadro de diálogo Nueva regla CSS.
Haga clic en Aceptar.
La etiqueta div tendrá el aspecto de un cuadro en el documento con texto de marcador de posición. Cuando mueve el puntero sobre el borde de la caja, Dreamweaver la resalta.
Si la etiqueta div se sitúa con una posición absoluta, se convierte en un elemento PA. (Puede editar las etiquetas div que no tengan una posición absoluta).
Edición de etiquetas div
Después de insertar una etiqueta div, puede manipularla o agregarle contenido.
Nota
Las etiquetas div que están posicionadas de forma absoluta se convierten en elementos AP.
Cuando se asignan bordes a etiquetas div, o cuando se selecciona Contornos de diseño CSS, las etiquetas div tienen bordes visibles. (La opción Contornos de diseño CSS está seleccionada de forma predeterminada en el menú Ver > Ayudas visuales). Cuando se pasa el puntero por encima de una etiqueta div, Dreamweaver la resalta. Puede cambiar el color de resaltado o desactivar el resaltado.
Cuando se selecciona una etiqueta div, puede ver y editar sus reglas con el Diseñador de CSS. Para añadir contenido a la etiqueta div también puede situar el punto de inserción dentro de la etiqueta div y, a continuación, añadir el contenido como lo haría en una página.
Siga uno de estos procedimientos para seleccionar la etiqueta div:
- Haga clic en el borde de la etiqueta div.
Nota
Busque el resaltado para ver el borde.
Haga clic dentro de la etiqueta div y presione las teclas Control + A (Windows) o Comando + A (Macintosh) dos veces.
Haga clic en el interior de la etiqueta div y seleccione la etiqueta div del selector de etiquetas en la parte inferior de la ventana de documento.
Seleccione Ventana > Diseñador CSS para abrir el panel Diseñador CSS si no está ya abierto.
Las reglas aplicadas a la etiqueta div aparecen en el panel.
Lleve a cabo los cambios necesarios.
Cambiar el color de resaltado de las etiquetas div
Cuando mueve el puntero sobre el borde de una etiqueta div en la vista Diseño, Dreamweaver resalta los bordes de la etiqueta. Puede activar o desactivar el resaltado según sea necesario, o cambiar el color de resaltado en el cuadro de diálogo Preferencias.
Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).
Seleccione Resaltado en la lista de categorías de la izquierda.
Lleve a cabo uno de los cambios siguientes y haga clic en Aceptar:
Para cambiar el color de resaltado de las etiquetas div, haga clic en el cuadro Color al pasar el ratón por encima y seleccione un color de resaltado con el selector de color (o bien escriba el valor hexadecimal del color de resaltado en el cuadro de texto).
Para activar o desactivar el resaltado de las etiquetas div, active o desactive la selección de la casilla Mostrar correspondiente a Ratón por encima.
Nota
Estas opciones afectan a todos los objetos, como las tablas, que Dreamweaver resalta cuando mueves el puntero sobre ellos.
Bloques de diseño CSS
Puedes visualizar bloques de diseño CSS mientras trabajas en la vista de diseño. Un bloque de diseño CSS es un elemento de página HTML que puedes colocar en cualquier lugar de tu página.Más específicamente, un bloque de diseño CSS es una etiqueta div sin display:inline, o cualquier otro elemento de página que incluya las declaraciones CSS display:block, position:absolute, o position:relative. A continuación se muestran algunos ejemplos de elementos que se consideran bloques de diseño CSS en Dreamweaver:
Una etiqueta div
Una imagen con una posición absoluta o relativa asignada
Una etiqueta a con el estilo display:block asignado
Un párrafo con una posición absoluta o relativa asignada
Nota
Para fines de renderizado visual, los bloques de diseño CSS no incluyen elementos en línea (es decir, elementos cuyo código está dentro de una línea de texto), o elementos de bloque simples como párrafos.
Dreamweaver proporciona una serie de ayudas visuales para ver bloques de diseño CSS. Por ejemplo, puedes habilitar contornos, fondos y el modelo de caja para bloques de diseño CSS mientras diseñas. También puedes ver ayudas contextuales que muestran propiedades de un bloque de diseño CSS seleccionado cuando mueves el puntero del ratón sobre el bloque de diseño.
La siguiente lista de ayudas visuales de bloques de diseño CSS describe lo que Dreamweaver muestra como visible para cada uno:
Contornos de diseño CSS
Muestra los contornos de todos los bloques de diseño CSS de la página.
Fondos de diseño CSS
Muestra colores de fondo temporalmente asignados para bloques de diseño CSS individuales, y oculta cualquier otro color de fondo o imagen que normalmente aparece en la página.
Siempre que habilitas la ayuda visual para ver fondos de bloques de diseño CSS, Dreamweaver automáticamente asigna a cada bloque de diseño CSS un color de fondo distintivo. (Dreamweaver selecciona los colores usando un proceso algorítmico: no hay forma de que asignes los colores tú mismo.) Los colores asignados son visualmente distintivos y están diseñados para ayudarte a diferenciar entre bloques de diseño CSS.
Modelo de cuadro de diseño CSS
Muestra el modelo de caja (es decir, relleno y márgenes) del bloque de diseño CSS seleccionado.
Visualización de bloques de diseño CSS
Puede activar o desactivar las ayudas visuales de los bloques de diseño CSS si lo estima oportuno. Para ver todos los bloques de diseño CSS, selecciona Ver > Opciones de vista de diseño > Ayudas visuales.
Puedes habilitar o deshabilitar Fondos de diseño CSS, Modelo de caja de diseño CSS y Contornos de diseño CSS.
Crear sitios web atractivos en Dreamweaver
Diseña, codifica y gestiona sitios web dinámicos en una potente herramienta todo en uno.
