Guide d'utilisation Annuler

À propos de l’utilisation de CSS pour mise en forme de votre page

Rechercher

Dernière mise à jour le 1 mai 2021

Découvrez la structure de base d’une mise en forme CSS et comment concevoir des pages et leur contenu à l’aide de CSS sous Dreamweaver.

À propos de la mise en page CSS

Une mise en page CSS utilise le format de feuilles de style CSS, au lieu de tables ou de cadres HTML traditionnels, pour organiser le contenu d’une page web. L’élément de base de la mise en forme CSS est la balise div : il s’agit d’une balise HTML qui, la plupart du temps, sert de conteneur pour du texte, des images et d’autres éléments de page. Lorsque vous créez une mise en forme CSS, vous placez des balises div dans la page, leur ajoutez du contenu et les positionnez en différents endroits. À la différence des cellules de tableau, qui ne peuvent exister qu’à l’intérieur de lignes et de colonnes d’un tableau, les balises div peuvent figurer n’importe où sur une page web. Vous pouvez positionner des balises div de façon absolue (en indiquant des coordonnées x et y) ou de façon relative (en spécifiant leur emplacement par rapport à leur position actuelle). Vous pouvez également placer des balises div afin de définir des éléments flottants, des marges intérieures et des marges. Cette méthode est privilégiée dans les normes web modernes.

À propos de la structure de mise en page CSS

Avant de lire cette section, vous devez vous être familiarisé avec les concepts CSS de base.

L’élément de base de la mise en forme CSS est la balise div : il s’agit d’une balise HTML qui, la plupart du temps, sert de conteneur pour du texte, des images et d’autres éléments de page. L’exemple ci-dessous montre une page HTML qui contient trois balises div distinctes : une balise container de grande taille, et deux autres balises (une balise sidebar et une balise main content) situées à l’intérieur de la balise container.

A. Div Container B. Div sidebar C. Div Main Content

Voici le code correspondant à ces trois balises div dans le code HTML :

<!--container div tag--> 
<div id="container"> 
<!--sidebar div tag--> 
    <div id="sidebar"> 
    <h3>Sidebar Content</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p> 
      </div> 
     
<!--mainContent div tag--> 
    <div id="mainContent"> 
    <h1> Main Content </h1> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum.</p> 
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <h2>H2 level heading </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p> 
    </div> 
</div>

Dans l’exemple ci-dessus, aucun style n’est associé aux balises div. Si aucune règle CSS n’est définie, chaque balise div et son contenu prend un emplacement par défaut sur la page. Toutefois, si chaque balise div possède un ID unique (comme dans l’exemple ci-dessus), vous pouvez utiliser ces identificateurs pour créer des règles CSS qui, une fois appliquées, modifient le style et le positionnement des balises div.

La règle CSS suivante, qui peut résider dans la section head du document ou dans un fichier CSS externe, crée des règles de style pour la première balise div (container) de la page :

#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
}

La règle #container applique un style à la balise div container qui lui donne une largeur de 780 pixels, un arrière-plan blanc, aucune marge (depuis la gauche de la page), une bordure noire continue de 1 pixel et un texte aligné à gauche. Les résultats de l’application de la règle à la balise div container sont les suivants :

A. Texte aligné à gauche B. Arrière-plan blanc C. Bordure noire pleine d’un pixel

La règle CSS suivante crée des règles de style pour la balise div sidebar :

#sidebar { 
    float: left; 
    width: 200px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
}

La règle #sidebar applique un style à la balise div sidebar qui lui donne une largeur de 200 pixels, un arrière-plan gris, un remplissage haut et bas de 15 pixels, un remplissage droite de 10 pixels et un remplissage gauche de 20 pixels. L’ordre de remplissage par défaut est le suivant : haut, droite, bas, gauche. En outre, la règle positionne la balise div sidebar avec float: left, propriété qui pousse la balise div sidebar vers le côté gauche de la balise div container. Les résultats de l’application de la règle à la balise div sidebar sont les suivants :

A. Largeur de 200 pixels B. Remplissage haut et bas de 15 pixels

Enfin, la règle CSS pour la balise div container principale termine la mise en forme :

#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
}

La règle #mainContent applique un style à la balise div main qui lui donne une marge gauche de 250 pixels, ce qui correspond à un espace de 250 pixels entre le côté gauche de la balise div container et le côté gauche de la balise div main content. En outre, la règle prévoit 20 pixels d’espacement sur les côtés droit, bas et gauche de la balise div main content. Les résultats de l’application de la règle à la balise div mainContent sont les suivants :

Le code complet ressemble à ce qui suit :

Div main content, marge gauche de 250 pixels

A. Remplissage gauche de 20 pixels B. Remplissage droit de 20 pixels C. Remplissage bas de 20 pixels

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
} 
#sidebar { 
    float: left; 
    width: 200px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
} 
#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
} 
</style> 
</head> 
<body> 
<!--container div tag--> 
<div id="container"> 
    <!--sidebar div tag--> 
    <div id="sidebar"> 
    <h3>Sidebar Content</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p> 
      </div> 
     <!--mainContent div tag--> 
    <div id="mainContent"> 
    <h1> Main Content </h1> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum.</p> 
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <h2>H2 level heading </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p> 
    </div> 
</div> 
</body>

Remarque :

l’exemple de code ci-dessus est une version simplifiée du code qui crée la mise en forme à deux colonnes avec encadré à gauche fixe lorsque vous créez un nouveau document à l’aide des mises en forme prédéfinies fournies avec Dreamweaver.

Création d’une page avec une mise en forme CSS

Lors de la création d’une nouvelle page sous Dreamweaver, vous pouvez en créer une qui contient déjà une mise en forme CSS. Dreamweaver permet de choisir parmi 16 mises en forme CSS. En outre, vous pouvez créer vos propres mises en forme CSS et les ajouter au dossier de configuration pour qu’elles figurent parmi les choix de mise en forme dans la boîte de dialogue Nouveau Document.

Création d’une page avec une mise en forme CSS

Choisissez Fichier > Nouveau.
Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Modèle vierge. Il s’agit de la sélection par défaut.
Pour Type de page, sélectionnez le type de page à créer.

Remarque :

vous devez sélectionner un type de page HTML pour la mise en forme. Par exemple, vous pouvez sélectionner HTML, ColdFusion®, PHP, etc. Vous ne pouvez pas créer de page ActionScript™, CSS, Library Item, JavaScript, XML, XSLT ou ColdFusion Component avec une mise en forme CSS. Les types de page de la catégorie Autre dans la boîte de dialogue Nouveau document ne peuvent pas non plus inclure de mises en page CSS.
Pour Mise en forme, sélectionnez la mise en forme CSS à utiliser. Vous pouvez choisir parmi 16 mises en forme différentes. La fenêtre Aperçu montre la mise en forme sélectionnée et en donne une brève description.

Les mises en forme CSS prédéfinies fournissent les types de colonnes suivants :

Fixe

La largeur de colonne est définie en pixels. La colonne n’est pas redimensionnée selon la taille du navigateur ou des paramètres de texte du visiteur du site.

Liquide

La largeur de colonne est définie en tant que pourcentage de la largeur du navigateur du visiteur du site. La mise en page s’adapte si le visiteur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des paramètres de texte définis par le visiteur.
Sélectionnez un type de document dans le menu DocType.
Sélectionnez un emplacement pour le fichier CSS de la mise en forme dans le menu déroulant CSS de mise en forme dans.

Ajouter à l’en-tête

Ajoute le code CSS de mise en forme à l’en-tête de la page que vous créez.

Créer un nouveau fichier

Ajoute le code CSS de mise en forme à une nouvelle feuille de style CSS externe et associe la nouvelle feuille de style à la page que vous créez.

Lier au fichier existant

Permet d’indiquer un fichier CSS existant qui contient déjà les règles CSS requises pour la mise en forme. Cette option est particulièrement utile si vous voulez utiliser la même mise en forme CSS (les règles CSS figurant dans un fichier) dans plusieurs documents.
Effectuez l’une des opérations suivantes :
- Si vous avez sélectionné Ajouter à l’en-tête dans le menu déroulant CSS de mise en forme dans (l’option par défaut), cliquez sur Créer.
- Si vous avez sélectionné Créer un nouveau fichier dans le menu déroulant CSS de mise en forme, cliquez sur Créer, puis spécifiez un nouveau nom pour le nouveau fichier externe dans la boîte de dialogue Enregistrer la feuille de style sous.
- Si vous avez sélectionné Lier au fichier existant dans le menu déroulant CSS de mise en forme dans, ajoutez le fichier externe dans la zone de texte Lier le fichier CSS en cliquant sur l’icône d’ajout de feuille de style, en renseignant la boîte de dialogue Associer feuille de style externe et en cliquant sur OK. Une fois que vous avez terminé, cliquez sur Créer dans la boîte de dialogue Nouveau document.
Remarque :

lorsque vous sélectionnez l’option Lier au fichier existant, le fichier que vous spécifiez doit déjà contenir les règles correspondant au fichier CSS.

Lorsque vous placez le CSS de mise en forme dans un nouveau fichier ou lorsque vous le liez à un fichier existant, Dreamweaver lie immédiatement le fichier à la page HTML que vous créez.

Remarque :

les commentaires conditionnels (CC) pour Internet Explorer, qui permettent de contourner les problèmes de rendu dans IE, restent incorporés dans l’en-tête du nouveau document de mise en forme CSS, même si vous sélectionnez « Nouveau fichier externe » ou « Fichier externe existant » en tant qu’emplacement pour votre fichier CSS de mise en forme.
(Facultatif) Vous pouvez également lier des feuilles de style CSS à la nouvelle page (sans rapport avec la mise en forme CSS) lors de la création de cette page. Pour ce faire, cliquez sur l’icône Ajouter une feuille de style au-dessus du volet Lier le fichier CSS, puis sélectionnez une feuille de style CSS.

Vous trouverez une description détaillée de ce processus dans l’article de David Powers, Automatically attaching a style sheet to new documents (en anglais).

Ajout de mises en forme CSS personnalisées à la liste de choix

Créez une page HTML contenant la mise en forme CSS que vous souhaitez ajouter à la liste de choix de la boîte de dialogue Nouveau document. Le fichier CSS correspondant à la mise en forme doit résider dans la section head de la page HTML.

Remarque :

Pour uniformiser votre mise en forme CSS personnalisée avec les autres mises en forme fournies avec Dreamweaver, vous devez enregistrer votre fichier HTML avec une extension .htm.
Ajoutez la page HTML au dossier Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts.
(Facultatif) Ajoutez une image d’aperçu de votre mise en forme (par exemple, un fichier .gif ou .png) au dossier Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. Les images par défaut fournies avec Dreamweaver sont des fichiers PNG de 227 pixels de large x 193 pixels de haut.

Remarque :

Donnez à votre image d’aperçu le même nom de fichier que votre fichier de façon à pouvoir l’identifier facilement. Par exemple, si votre fichier HTML est nommé myCustomLayout.htm, appelez votre image d’aperçu myCustomLayout.png.
(Facultatif) Créez un fichier de notes pour votre mise en forme personnalisée en ouvrant le dossier Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes, en copiant et en collant les fichiers de notes existants dans le même dossier, et en renommant la copie en fonction de votre mise en forme personnalisée. Par exemple, vous pouvez copier le fichier oneColElsCtr.htm.mno et le renommer myCustomLayout.htm.mno.
(Facultatif) Après avoir créé un fichier de notes pour votre mise en forme personnalisée, vous pouvez ouvrir le fichier et spécifier le nom de la mise en forme, sa description et une image d’aperçu.