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

À 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 procéder à cette section, vous devez être familiarisé avec les concepts de base de CSS.

L'élément de base de la mise en page CSS est la balise div—une balise HTML qui, dans la plupart des cas, agit comme un conteneur pour le texte, les images et d'autres éléments de page. L'exemple suivant montre une page HTML qui contient trois balises div distinctes : une grande balise « conteneur », et deux autres balises—une balise barre latérale et une balise contenu principal—à l'intérieur de la balise conteneur.

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

<!--balise div conteneur-->

<div id="container">

<!--balise div barre latérale-->

<div id="sidebar">

<h3>Contenu de la barre latérale</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

      </div> 

<!--balise div contenu principal-->

<div id="mainContent">

<h1> Contenu principal </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>Titre de niveau H2 </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 attaché à aucune des balises div. Sans règles CSS définies, chaque balise div et son contenu tombent dans un emplacement par défaut sur la page. Cependant, si chaque balise div a un identifiant unique (comme dans l'exemple ci-dessus), vous pouvez utiliser les identifiants pour créer des règles CSS qui, une fois appliquées, changent le style et le positionnement des balises div.

La règle CSS suivante, qui peut résider dans l'en-tête du document ou dans un fichier CSS externe, crée des règles de style pour la première, ou balise div « conteneur » sur la page :

#container {

width: 780px;

background: #FFFFFF;

    margin: 0 auto; 

border: 1px solid #000000;

text-align: left;

}

La règle #container stylise la balise div container pour qu'elle ait une Largeur de 780 pixel, un Arrière-plan blanc, aucune marge (depuis le côté gauche de la page), une bordure noire et pleine 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 :

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 stylise la balise div sidebar pour qu'elle ait une Largeur de 200 pixel, un Arrière-plan gris, un espacement en haut et en bas de 15 pixel, un espacement à droite de 10 pixel et un espacement à gauche de 20 pixel. L’ordre de remplissage par défaut est le suivant : haut, droite, bas, gauche. De plus, la règle positionne la balise div sidebar en lui appliquant float: left—une propriété qui pousse la balise div sidebar vers le côté gauche de la balise div conteneur.Les résultats de l'application de la règle à la balise div sidebar sont les suivants :

Pour finir, la règle CSS pour la balise div du conteneur principal termine la mise en page :

#mainContent {

margin: 0 0 0 250px;

padding: 0 20px 20px 20px;

}

La règle #mainContent stylise le div de Contenu principal avec une marge gauche de 250 pixel, ce qui signifie qu'elle place 250 pixel d'espace entre le côté gauche du div container et le côté gauche du div de Contenu principal. De plus, la règle prévoit 20 pixel d'espacement sur les côtés droit, bas et gauche du div de Contenu principal. Les résultats de l'application de la règle au div mainContent sont les suivants :

Le code complet ressemble à ce qui suit :

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Document sans titre</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> 

<!--balise div de conteneur-->

<div id="container">

<!--balise div de barre latérale-->

<div id="sidebar">

<h3>Contenu de la barre latérale</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

      </div> 

<!--balise div mainContent-->

<div id="mainContent">

<h1> Contenu principal </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>En-tête de niveau H2</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>

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

Ajouter des mises en page CSS personnalisées à la liste des choix

Articles connexes

• Description des feuilles de style en cascade
• Création d’une page vierge
• Définition du type et du codage par défaut d’un document
• Etablissement d’un lien vers une feuille de style CSS externe