Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Faire une mise en page grâce aux CSS

Compatible Dreamweaver. Cliquer pour en savoir plus sur les compatibilités.Le 28 juillet 2008

L'objectif est de créer un canevas de page web entièrement en CSS et qui s'adapte automatiquement à la taille du navigateur et de l'écran, tout cela sans utiliser de tableaux (voir un aperçu - voir une variante)

Introduction :

Les feuilles de style (CSS) sont des outils très puissants, qui ne se résument pas à modifier la couleur des liens, comme on le croit parfois. Vous trouverez une introduction à l'utilisation des CSS dans ce tutoriel. En fait, les feuilles de style prennent de plus en plus d'importance avec l'évolution du web et il est possible de construire des sites entiers uniquement à l'aide de CSS, car l'utilisation de Tableaux commence petit à petit à être dépréciée (documentation Macromédia sur le sujet).

Techniquement, il existe trois sortes de design pour le web : Le design ICY : la largeur du site est fixée en pixel (en général 760px) et le site est placé à gauche du navigateurLe design JELLY : la largeur est toujours fixe, mais le site est centré dans l'écranLe design FLUID : le site s'adapte automatiquement à la largeur de l'écran. C'est ce que nous allons faire dans ce tutoriel.

Avantages, inconvénients et compatibilité :

Les CSS ont de nombreux avantages, notamment celui d'alléger le code et le poids de la page web, mais aussi de permettre des choses irréalisables en html ou en javascript (construire des encadrés arrondis, faire des images réactives universelles, des ombres, des contours de texte, des lettrines,…) De plus, les CSS facilitent la mise à jour de gros sites : avec une feuille de style séparée, il suffira de modifier une ligne pour changer l'aspect de tout le site. Un aspect très intéressant des CSS est de pouvoir changer en un claquement de doigt tout l'aspect physique de la page. Vous pouvez vous en apercevoir avec le choix des designs sur le site de référence en la matière, un véritable caméléon : le fameux CSS Zen Garden. Enfin, les CSS permettent le respect des standards du web, de la sémantique des balises et facilitent l'Accessibilité. (voir sur le site de référence français : OpenWeb)

Du côté des inconvénients, il faut admettre que les éditeurs visuels html, comme Dreamweaver, ont encore du mal à suivre ces techniques et se limitent généralement à l'utilisation de tableaux pour construire les pages, ou alors à une mauvaise utilisation de calques. En clair, même si l'exercice de ce tutoriel pourra être réalisé grâce aux outils de CSS intégrés de Dreamweaver, il est probable que vous ayez à mettre les mains dans le cambouis du code pour passer aux étapes supérieures et aux techniques plus évoluées.

Pour ce qui est de la compatibilité navigateurs, il faut savoir que les CSS étaient intégrées en partie dès Internet Explorer 3 et qu'à l'heure actuelle tous les navigateurs récents gèrent très bien les feuilles de styles évoluées. Cependant, vous devez savoir que les anciens navigateurs, comme Netscape 4, gèrent très mal (voir pas du tout) les positionnements en CSS que nous allons utiliser dans ce tutoriel. C'est un parti pris : il faut bien bouger les choses si l'on veut que ces dinosaures disparaissent un jour.

Démarche :

Nous n'utiliserons aucun tableau ni cellules pour construire notre canevas, mais uniquement des balises DIV pour délimiter nos “zones”, nos blocs.

NOTE : Les balises <div> sont des balises neutres servant de conteneurs, de blocs. Elles représentent une sorte de boite rectangulaire invisible. Généralement, la balise <div> est assimilée au concept de “calque” (surtout sur les éditeurs html comme Dreamweaver). Un calque est un <div> qui a été positionné avec la propriété “position: absolute” ou “position: relative”. Mais rien ne nous oblige à imposer cette propriété de position, on peut souvent s'en passer en plaçant les div les uns par rapport aux autres grâce à la propriété “margin” la plupart du temps.

Afin de définir et différencier chaque bloc div, nous leur appliquerons une classe différente. Par exemple, le div class=“gauche” (celui qui servira de menu) sera un bloc placé à gauche de la page et aura une largeur définie à 200 pixels.

Voici comment nous allons procéder :

  1. Nous commencerons par délimiter 4 parties sur notre page : un entête, un menu, une partie centrale et un pied-de-page. Chaque partie sera un bloc (div) que nous définierons (taille, position, couleur, …) grâce au CSS et que nous distinguerons par une classe différente.
  2. Nous placerons le code HTML dans la partie BODY de la page. Le code HTML sera très court et ne contiendra que des balises div.
  3. Nous construirons ensuite le code CSS à placer en partie HEAD de la page. C'est ce que l'on appelle une feuille de style interne, mais vous pouvez bien sûr faire de même en utilisant une feuille externe (explications dans ce tutoriel)

Note : tous les attributs CSS utilisés ne seront pas expliqués en détail, parce qu'en général leur signification sera suffisamment explicite. Si toutefois certaines balises ou attributs vous paraîtraient obscurs, vous pouvez consulter la documentation css de dreamweaver-forum.

Réalisation générale :

Code HTML

La structure générale (le code HTML que vous placerez au sein de vos balises <body>), est celle-ci :

<div class="entete"></div>
<div class="contenu">
   <div class="menu"></div>
   <div class="centre"></div>
</div>
<div class="pied"></div>

Nous avons donc nos quatre blocs (entete, menu, centre et pied de page). Nous remarquons que les blocs “menu” et “centre” sont eux-même contenus dans un bloc nommé “contenu”, ceci afin que nos deux parties centrales soit au diapason (même hauteur et positionnement l'une par rapport à l'autre par exemple)

A présent que la partie html est faite, il nous suffit de nous occuper de la partie CSS !

Important : par défaut, les blocs DIV se placent automatiquement les uns en-dessous des autres et prennent toute la largeur de l'écran. A nous donc de nous servir de cet avantage à bon escient.

Code CSS

Voilà donc le code CSS de notre mise en page, à placer entre les balises HEAD de la page html. Vous trouverez les explications détaillées en-dessous du code :

<style type="text/css">
<!--
html, body {
	margin:0;
        height: 100%;
}
.entete {
	background-color: #3333CC;
	height: 10%;
}
.contenu {
	height: 80%;
	background-color: #66CCFF;
}
.menu {
	background-color: #330066;
	float: left;
	width: 200px;
	height: 100%;
	color: #ffffff;
}
.centre {
	margin-left: 200px;
}
.pied {
	background-color: #336699;
	height: 10%;
}
-->
</style>

Explication du code CSS et réalisation :

  1. Commençons par supprimer les marges de la page en cliquant sur l'ajout d'un nouveau style avec Dreamweaver (Maj+F11). Cochez l'option “redéfinir la balise HTML” et sélectionnez la balise BODY dans la liste déroulante.

Dans la catégorie “boite”, donnez la valeur 0 (zéro) à toutes les marges (gardez cochée la case “idem pour tous”).

  1. Ensuite, on va définir notre entête (div class=“entete”) en cliquant sur l'ajout d'un nouveau style. Nommons notre style .entete (ne pas oublier le point avant le nom).

Dans la catégorie “arrière-plan”, choisissons une couleur de fond pour l'entête (j'ai choisi la couleur #3333CC). Dans la catégorie “boite”, nous allons lui donner une hauteur de 10% (c'est un exemple que vous pouvez modifier). Voilà tout pour notre entête : pas besoin de lui indiquer une position car il sera automatiquement placé en haut à gauche. Inutile de lui indiquer une largeur : il occupera toute la largeur de l'écran.

  1. Continuons de la même manière à définir notre bloc de contenu (div class=“contenu” ) qui s'appellera .contenu et qui va contenir les blocs de menu et central.

Donnez à ce bloc une hauteur de 80% et une couleur de fond (#66CCFF chez moi). Inutile de donner une position à ce bloc “contenu” : il sera automatiquement placé à la suite du bloc “entête”

  1. Passons au bloc de menu (div class=“menu”). Ce bloc sera le seul à posséder une valeur de largeur car il ne doit pas s'étaler sur toute la page. Il sera également différent des autres car il devra être placé à gauche et non en-dessous du bloc central, comme c'est le cas par défaut.

Créez donc cette classe en cliquant sur l'ajout d'un nouveau style. Appelez-la ”.menu” et donnez-lui une couleur de fond. Dans la catégorie “boite”, vous allez lui spécifier une largeur (200px), vous allez également lui donner la valeur “flottante: gauche” pour lui indiquer de se placer à gauche dans son conteneur. Enfin, vous lui spécifierez une hauteur de 100%, ce qui veut dire qu'elle utilisera toute la hauteur de son conteneur, c'est à dire le bloc “contenu”.

  1. Au tour du bloc central (div class=“centre”), celui qui contiendra le contenu de la page. Ce bloc aura simplement à être positionné par rapport au menu, c'est à dire avec une marge gauche de 200 pixels.

Créez cette classe en cliquant sur l'ajout d'un nouveau style. Appelez-la ”.centre”, inutile de lui donner une couleur de fond : elle aura celle de son conteneur c'est à dire “contenu”. Dans la catégorie “boite”, vous allez lui spécifier une marge à gauche de 200px. Il faut décocher l'option “idem pour tous”, sinon la marge va s'appliquer pour les 4 cotés. Inutile de donner une largeur à ce bloc “centre” : il prendra automatiquement la largeur qui reste dans l'écran.

  1. On termine en définissant notre pied de page (div class=“pied”) en cliquant sur l'ajout d'un nouveau style. Nommons notre style .pied.

Dans la catégorie “arrière-plan”, choisissons une couleur de fond pour l'entête (j'ai choisi la couleur #336699). Dans la catégorie “boite”, nous allons lui donner une hauteur de 10% (c'est un exemple que vous pouvez modifier). Voilà tout pour notre pied : pas besoin de lui indiquer une position car il sera automatiquement placé en dessous des autres. Inutile de lui indiquer une largeur : il occupera toute la largeur de l'écran.

A vous de jouer !

Ce tutoriel est basique, il permet de créer un canevas-type simple. Vous pouvez très bien vous approprier cet exercice pour réaliser des structures beaucoup plus complexes, par exemple en remplaçant les couleurs de fond par des images. (Voir cet exercice)

Les CSS permettent également de faire des menus évolués : verticaux, déroulants, animés,…

Pour finir, et c'est important de le souligner, le positionnement CSS permet de suivre l'évolution des standards du Web proposés par le W3C.

Note finale : pour aller plus loin dans le positionnement CSS, n'hésitez pas à suivre les explications sur le site de référence, OpenWeb.