But de la leçon

Dans la façon actuelle de la concevoir 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.

Menu à gauche

2. Menu à droite et contenu à gauche.

Menu à droite

3. Menu horizontal en haut de la page

Menu en haut

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.

Dans le cadre de cette leçon, nous allons :
Concevoir plusieurs pages de présentation différente à partir du même code HTML
Construire trois pages basées sur un code HTML différent
Construire trois pages identiques basées sur un code HTML différent
Dans le texte du code HTML de la page, les différentes zones (en-tête, menu, substance, pied) sont délimitées par
Des blocs <div>
Des pargraphes <p>
Des titres <hx>, où x est un chiffre

Quand tu as répondu aux questions et bien compris les réponses, passe à la page suivante.Vers la page suivante Page suivante


Dernière modification 01/09/2016 Test dans /info ...