Dans la fenêtre Document, placez le point d'insertion là où vous voulez que la balise div apparaisse.
Dernière mise à jour le
25 sept. 2023
Apprenez comment utiliser des balises div pour centrer des blocs de contenu, créer des effets de colonne, créer différentes zones de couleur, etc.
Vous pouvez créer des mises en page en insérant manuellement des balises div et en leur appliquant des styles de positionnement CSS. Une balise div est une balise qui définit des divisions logiques dans le contenu d'une page web.Vous pouvez utiliser les balises div pour centrer des blocs de contenu, créer des effets de colonne, créer différentes zones de couleur, et bien plus encore.
Si vous n'êtes pas familier avec l'utilisation des balises div et des feuilles de style en cascade (CSS) pour créer des pages web, vous pouvez créer une mise en page CSS basée sur l'une des mises en page pré-conçues fournies avec Dreamweaver. Si vous n'êtes pas à l'aise avec le CSS, mais que vous maîtrisez les tableaux, vous pouvez également essayer de les utiliser.
Insertion de balises div
Vous pouvez utiliser les balises div pour créer des blocs de mise en page CSS et les positionner dans votre document. C'est utile si vous avez une feuille de style CSS existante avec des styles de positionnement attachés à votre document. Dreamweaver vous permet d'insérer rapidement une balise div et de lui appliquer des styles existants.
Effectuez l’une des tâches suivantes :
Sélectionnez Insertion > HTML > Div.
Dans la catégorie HTML du panneau Insertion, cliquez sur Div.
Parmi les options suivantes, définissez celles de votre choix :
Insérer
Vous permet de sélectionner l'emplacement de la balise div et le nom de la balise s'il ne s'agit pas d'une nouvelle balise.
Classe
Affiche le style de classe actuellement appliqué à la balise. Si vous avez attaché une feuille de style, les classes définies dans cette feuille de style apparaissent dans la liste. Utilisez ce menu contextuel pour sélectionner le style que vous voulez appliquer à la balise.
ID
Permet de modifier le nom utilisé pour identifier la balise div. Si vous avez associé une feuille de style, les ID qui y sont définis s’affichent dans la liste. Les ID des blocs qui sont déjà dans votre document ne sont pas répertoriés.
Annotation
Dreamweaver vous alerte si vous saisissez le même ID qu'une autre balise dans votre document.
Nouvelle règle CSS
Ouvre la boîte de dialogue Nouvelle règle CSS.
Cliquez sur OK.
La balise div s’affiche dans votre document sous la forme d’une zone contenant du texte d’espace réservé. Lorsque vous déplacez le pointeur sur le bord de la boîte, Dreamweaver la met en surbrillance.
Si la balise div est placée de manière absolue, elle devient un élément AP. Vous pouvez modifier les balises div qui ne sont pas à positionnement absolu.
Modification de balises div
Après avoir inséré une balise div, vous pouvez la manipuler ou y ajouter du contenu.
Annotation
Les balises div qui sont positionnées de manière absolue deviennent des éléments AP.
Les balises div ont des bordures visibles lorsque vous leur attribuez des bordures ou lorsque vous avez sélectionné Contours en feuille CSS. (L’option Contours en feuille CSS est sélectionnée par défaut dans le menu Affichage > Assistances visuelles.) Lorsque vous placez le pointeur sur une balise div, Dreamweaver la met en surbrillance. Vous pouvez modifier la couleur de la mise en surbrillance ou désactiver la mise en surbrillance.
Lorsque vous sélectionnez une balise div, vous pouvez afficher et modifier les règles correspondantes à l’aide de CSS Designer. Vous pouvez aussi ajouter du contenu à la balise div : placez simplement le point d’insertion à l’intérieur de la balise div, puis procédez à l’ajout du contenu comme vous le feriez pour celui d’une page.
Procédez de l’une des manières suivantes pour sélectionner la balise div :
- Cliquez sur la bordure de la balise div.
Annotation
Recherchez la surbrillance afin de voir les bordures.
Cliquez à l'intérieur de la balise div et appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh) à deux reprises.
Cliquez à l'intérieur de la balise div, puis sélectionnez-la à partir du sélecteur de balises figurant au bas de la fenêtre du document.
Sélectionnez Fenêtre > CSS Designer pour ouvrir le panneau CSS Designer s'il n'est pas déjà ouvert.
Les règles appliquées à la balise div apparaissent dans le panneau.
Effectuez les modifications nécessaires.
Modifier la couleur de surbrillance des balises div
Lorsque vous déplacez le pointeur sur le bord d'une balise div en mode Création, Dreamweaver met en surbrillance les bordures de la balise. Vous pouvez activer ou désactiver la surbrillance selon les besoins, ou modifier la couleur de surbrillance dans la boîte de dialogue Préférences.
Cliquez sur Édition > Préférences (Windows)
ou Dreamweaver > Préférences (Mac).
Sélectionnez la catégorie Surbrillance dans la liste de gauche.
Effectuez l’une des modifications suivantes, puis cliquez sur OK :
Pour modifier la couleur de surbrillance des balises div, cliquez dans la case de couleur Survol et sélectionnez une couleur de surbrillance à l'aide du sélecteur de couleur (ou tapez la valeur hexadécimale correspondant à la couleur de surbrillance dans la zone de texte).
Pour activer ou désactiver la surbrillance des balises div, activez ou désactivez la case à cocher Afficher de l'option Survol.
Annotation
Ces options affectent tous les objets, tels que les tableaux, que Dreamweaver met en surbrillance lorsque vous déplacez le pointeur sur eux.
Blocs de mise en forme CSS
Vous pouvez visualiser les blocs de mise en page CSS pendant que vous travaillez en mode Création. Un bloc de mise en page CSS est un élément de page HTML que vous pouvez positionner n'importe où sur votre page. Plus précisément, un bloc de mise en page CSS est soit une balise div sans display:inline, soit tout autre élément de page qui inclut les déclarations CSS display:block, position:absolute, ou position:relative. Voici quelques exemples d'éléments considérés comme des blocs de mise en page CSS dans Dreamweaver :
Une balise div
Une image avec une position absolue ou relative qui lui est assignée
Une balise a avec le style display:block qui lui est assigné
Un paragraphe avec une position absolue ou relative qui lui est assignée
Annotation
Aux fins du rendu visuel, les blocs de mise en page CSS n'incluent pas les éléments en ligne (c'est-à-dire les éléments dont le code s'inscrit dans une ligne de texte), ni les éléments de bloc simples comme les paragraphes.
Dreamweaver fournit un certain nombre d'aides visuelles pour afficher les blocs de mise en page CSS. Par exemple, vous pouvez activer les contours, les arrière-plans et le modèle de zone pour les blocs de mise en page CSS pendant que vous concevez. Vous pouvez également afficher des infobulles qui montrent les propriétés d'un bloc de mise en page CSS sélectionné lorsque vous placez le pointeur de la souris sur le bloc de mise en page.
La liste suivante des aides visuelles pour les blocs de mise en page CSS décrit ce que Dreamweaver rend visible pour chacune :
Contours en feuille CSS
Affiche les contours de tous les blocs de mise en forme CSS sur la page.
Arrière-plans des blocs de mise en forme CSS
Affiche des couleurs d'arrière-plan temporairement assignées pour les blocs de mise en page CSS individuels, et masque toutes les autres couleurs d'arrière-plan ou images qui apparaissent normalement sur la page.
Chaque fois que vous activez l'aide visuelle pour afficher les arrière-plans des blocs de mise en page CSS, Dreamweaver assigne automatiquement à chaque bloc de mise en page CSS une couleur d'arrière-plan distincte. (Dreamweaver sélectionne les couleurs à l'aide d'un processus algorithmique - il n'y a aucun moyen pour vous d'assigner les couleurs vous-même.) Les couleurs assignées sont visuellement distinctives et sont conçues pour vous aider à différencier les blocs de mise en page CSS.
Modèle d’encadré de mise en forme CSS
Affiche le modèle de zone (c'est-à-dire le remplissage et les marges) du bloc de mise en page CSS sélectionné.
Affichage des blocs de mise en forme CSS
Vous pouvez activer ou désactiver les assistances visuelles des blocs de calques CSS en fonction des besoins. Pour afficher tous les blocs de mise en page CSS, sélectionnez Affichage > Options du mode Création > Aides visuelles.
Vous pouvez activer ou désactiver les arrière-plans de mise en page CSS, le modèle de zone de mise en page CSS et les contours de mise en page CSS.
Créez de magnifiques sites web dans Dreamweaver
Concevez, codez et gérez des sites web dynamiques dans un puissant outil tout-en-un.
