Mise en page CSS avec KompoZer

Concevoir la structure principale du document

Structure du documentNotre page web contiendra:

  • Un en-tête
  • Un menu
  • Un bloc pour le texte du document
  • Un pied de page
  • Ouvre un nouveau document dans KompoZer.
  • Dans ce document, note sur quatre lignes différentes, comme sur l'illustration ci-contre.
  • Enregistre ce document sous le nom modele.html, le titre est Modèle de document avec CSS.

La structure du document final est en place.

Oh la! Vous voulez rire ou bien? Quatre mots sur la page et la structure serait en place. Non, vous vous moquez.

C'est peut-être un tout petit peu optimiste, mais l'essentiel est là, pourtant.

Aucune des quatre lignes présentes sur la page n'est entourée de balises HTML (H1, P, BODY, IMG,...) qui nous permettraient de leur attribuer des styles.

Nous allons donc introduire chacune des lignes dans une paire de balises.

Ah ouiche? Et bien, j'aimerais savoir lesquelles. Parce que, mettre l'entête en H1, je peux comprendre. Mais les 10 pages de texte que je me sens prêt à pondre, Je les mets entre des balises de titre <Hx> ou des balises d'images <IMG>? Bref, n'importe quoi.

Vous avez parfaitement raison. Impossible d'utiliser les balises déjà connues qui sont réservées à l'usage que nous connaissons bien.
A la place, nous utiliserons des balises "génériques", des balises qui n'ont aucun sens pour la structure du document.

Baliser l'en-tête

  • Conteneur générique
  • Sélectionne la première ligne contenant le texte "En-tête".
  • Dans la liste déroulante des styles de la barre d'outils de mise en forme, choisis le dernier item Conteneur générique (div).

La création d'un bloc <div> sur l'en-tête est visible de trois façons.

  1. Dans la barre d'état, au bas de l'écran, la balise <div> apparaît
    Balise <div>
  2. Le bloc "En-tête" est maintenant entouré d'un fin cadre rouge
    Liseré rouge
  3. Dans l'onglet "Source", on peut voir les balises qui entourent le texte
    balises <div></div>

Mais tout cela est très ennuyeux. Je ne veux pas de ce cadre rouge moi. L'entête sera entourée d'un beau cadre vert apaisant.

Ne vous en faites pas. Ce cadre est là pour indiquer la présence du bloc. Mais il n'apparaîtra jamais sur la page web finale.

Identifier le bloc d'en-tête

Ce bloc <div> de l'entête est actuellement tout à fait anonyme. Nous allons nous donner une possibilité de l'identifier de manière claire.

  • Propriétés avancées
  • Clique droit sur cette balise et choisis la commande Propriétés avancées.

Une boîte de dialogue à plusieurs onglets apparaît.

Editeur de propriétés avancées

  • Dans l'onglet Attributs HTML, choisir l'attribut id et lui donner la valeur entete. Attention, les caractères accentués ne sont pas recommandés.
  • Clique sur le bouton OK.
  • Enregistre ton travail sous le nom modele.html.

A retenirEn CSS, l'id permet d'identifier un bloc de manière unique. Il ne peut pas y avoir deux blocs munis du même id dans une page.

Identifier les autres blocs

  • Réalise le même travail d'identification pour les blocs menu, texte et pied.

Vérifions le travail

La disposition des quatre blocs que nous venons de créer peut être visualisée par un petit coup d'oeil dans l'onglet Source.

  • Dans l'onglet Normal, clique dans la ligne Menu.
  • Vérifie que dans la barre d'état, le bloc <div> est maintenant identifié
    <div id="menu">
  • Blocs
  • Fais la même vérification pour les autres blocs.
  • Clique sur l'onglet Source.
  • Repère les lignes illustrées ci-contre : elles contiennent les quatre blocs. La présentation et les numéros des lignes pourraient être différents chez toi.
  • Enregistre ton travail.

Quand les quatre blocs sont balisés et identifiés, passe à la page suivante. Page suivante


Dernière modification 15/10/2007
Ecrire