PDF (adobe.com)

Visualisation des blocs de mise en forme CSS

Vous pouvez visualiser les blocs de mise en forme CSS pendant que vous travaillez en mode Création. Un bloc de mise en forme CSS est un élément de page HTML que vous pouvez positionner n'importe où sur votre page. Un bloc de mise en forme CSS est plus précisément soit une balise div sans display:inline, soit un autre élément de page qui inclut les déclarations CSS display:block, position:absolute ou position:relative. Les éléments suivants, par exemple, sont considérés comme des blocs de mise en forme CSS dans Dreamweaver:

  • Une balise div

  • Une image à laquelle est affectée une position relative ou absolue

  • Une balise a à laquelle le style display:block est affecté.

  • Un paragraphe auquel une position relative ou absolue est affectée

Remarque : Pour des raisons de rendu visuel, les blocs de mise en forme CSS n'incluent pas d'éléments en ligne (c'est-à-dire d'éléments dont le code est défini dans une ligne de texte) ni d'éléments de blocs simples tels que des paragraphes.

Dreamweaver fournit de nombreuses assistances visuelles pour afficher les blocs de mise en forme CSS. Vous pouvez par exemple activer des contours, des arrière-plans et le modèle de boîte pour les blocs de mise en forme CSS en mode Création. Vous pouvez aussi afficher des info-bulles qui indiquent les propriétés du bloc de mise en forme CSS sélectionné lorsque vous placez le pointeur dessus.

La liste suivante d'assistances visuelles de bloc de mise en forme CSS décrit ce que Dreamweaver rend visible pour chacune d'elles :

Contours en feuille CSS
Affiche les contours de tous les blocs de mise en forme CSS sur la page.

Arrière-plans de mise en forme CSS
Affiche les couleurs d'arrière-plan affectées temporairement de chaque bloc de mise en forme CSS et masque toutes les autres couleurs d'arrière-plan ou images qui apparaissent normalement sur la page.

Lorsque vous activez les assistances visuelles pour afficher les arrière-plans de blocs de mise en forme CSS, Dreamweaver affecte automatiquement une couleur d'arrière-plan distincte à chaque bloc de mise en forme CSS. ((Dreamweaver sélectionne les couleurs à l'aide d'un processus algorithmique. Vous n'avez aucun moyen d'attribuer vous-même les couleurs.) Les couleurs attribuées sont visuellement différentes et sont conçues pour vous aider à distinguer les blocs de mise en forme CSS les uns des autres.

Modèle de boîte de mise en forme CSS
Affiche le modèle de boîte (remplissages et marges) du bloc de mise en forme CSS sélectionné.