PDF (adobe.com)

Visualización de bloques de diseño CSS

Puede visualizar los bloques de diseño CSS mientras trabaja en la vista Diseño. Un bloque de diseño CSS es un elemento de página HTML que puede situar en cualquier lugar de la página. Más concretamente, un bloque de diseño CSS es una etiqueta div sin display:inline u otro elemento de página que incluye las declaraciones CSS display:block, position:absolute o position:relative. A continuación se incluyen ejemplos de elementos que se consideran bloques de diseño CSS en Dreamweaver:

  • Una etiqueta div

  • Una imagen que tenga asignada una posición absoluta o relativa

  • Una etiqueta a que tenga asignado el estilo display:block

  • Un párrafo que tenga asignada una posición absoluta o relativa

Nota: Para fines de representación visual, los bloques de diseño CSS no incluyen elementos en línea (es decir, elementos cuyo código queda en una línea de texto) ni elementos de bloques simples como párrafos.

Dreamweaver ofrece una serie de ayudas visuales para visualizar los bloques de diseño CSS. Por ejemplo, puede activar contornos, fondos y el modelo de cuadro para los bloques de diseño CSS mientras realiza el diseño. También puede visualizar información sobre herramientas que muestra las propiedades de un bloque de diseño CSS seleccionado cuando pasa el puntero del ratón por encima del bloque de diseño.

En la siguiente lista de ayudas visuales para bloques de diseño CSS se describe lo que Dreamweaver representa como visible en cada caso:

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 los colores de fondo asignados temporalmente a los distintos bloques de diseño CSS y oculta los demás colores de fondo o imágenes que normalmente aparecen en la página.

Al activar las ayudas visuales para ver bloques de diseño CSS, Dreamweaver asigna automáticamente a cada bloque de diseño CSS un color de fondo diferenciador. (Dreamweaver selecciona los colores mediante un proceso algorítmico, es decir, que no puede asignar los colores que desee.) Los colores asignados se distinguen visualmente y están pensados para ayudarle a diferenciar los bloques de diseño CSS.

Modelo de cuadro de diseño CSS
Muestra el modelo de cuadro (es decir, los rellenos y márgenes) del bloque de diseño CSS seleccionado.