Mise en page CSS avec KompoZer
But de la leçon
Dans la conception actuelle de la conception des pages web, il est indispensable de séparer clairement le contenu d'un document de l'ensemble des directives qui permettent sa mise en forme.
C'est ce que permettent les feuilles de styles qui font l'objet d'une autre leçon.
Dans le cadre de cette leçon, nous allons apprendre à réaliser entièrement la mise en forme d'une page web à l'aide des CSS.
Nous allons mettre en place une page web type simple contenant les zones habituelles :
- Une zone d'entête qui indique l'objet général de la page ;
- Une zone de menu qui permet d'accéder aux autres pages du site web ;
- Une zone de contenu qui présente les informations essentielles de la page ;
- Une zone de pied-de-page sur laquelle on trouvera, par exemple,des informations techniques (adresse de la page, date de mise à jour, adresse de l'auteur,...).
Nous allons montrer que cette page type peut, avec le même contenu, se présenter de différentes façons, selon les directives de styles qui lui sont appliquées.
Exemples de mises en forme possibles
1. Menu à gauche et contenu à droite.
2. Menu à droite et contenu à gauche.
3. Menu horizontal en haut de la page
Le document de base
Chacune des illustrations ci-dessus correspond à une mise en forme différente du même texte de base indiqué ci-dessous.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Mise en forme CSS</title>
</head>
<body>
<div id="entete">
<h1>Entête</h1>
</div>
<div id="menu">
<h1>Détails</h1>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
<div id="texte">
<h1>Contenu</h1>
<h2>Le titre</h2>
Le texte
</div>
<div id="pied"> Pied
</div>
</body>
</html>
- Démarre la rédaction d'une nouvelle page dans KompoZer.
- Ouvre l'onglet Source
- Remplace tout son contenu par le texte du code HTML présenté ci-dessus.
- Visualise le document dans l'onglet Normal.
Mais vous racontez n'importe quoi ! Le texte n'a absolument aucune présentation digne de ce nom. C'est même très laid.
Effectivement, dans l'état actuel, il n'y a aucune présentation définie pour cette page. Nous allons la construire petit à petit.
Le document ne doit pas être enregistré.
Un exemple impressionnant
L'idée de réaliser plusieurs présentations différentes sur le même code HTML est développée à l'extrême sur le site web Zen Garden.
Différents concepteurs ont utilisé exactement le même code HTML
pour produire des mises en forme totalement différentes. Le secret
tient dans l'utilisation de feuilles de styles et d'images différentes.
Nous ne tenterons pas d'arriver au niveau atteint par les
professionnels qui ont construit les multiples versions de la page web
Zen Garden.
Si le concept de Feuille de style CSS ne t'est pas encore familier, il vaudrait mieux d'abord te pencher sur la leçon précédente dans ce cours.
Quand tu as répondu aux questions et bien compris les réponses,
passe à la page suivante.
Dernière modification 15/10/2007
