Les feuilles de style avec KompoZer

Mise à neuf de la page d'accueil du site web "Archimède"

Les pages relatives à Archimède sont, à l'état actuel, exemptes de toute mise en forme. Nous allons les améliorer à l'aide de directives de styles.

Visite du chantier

  • Dans KompoZer, ouvre la page d'accueil (index.html) du site web "Archimède".
  • Dans le code source de la page, recherche les balises déjà bien connues contenues dans le corps du document (<body>). Tu trouveras aisément la balise <h1>.
  • Toujours dans le corps du document, recherche d'autres balises pas encore vues durant cette leçon. Note le résultat de tes recherches dans la zone de texte ci-contre.
  • Ouvre ensuite chacune des autres pages et recherches-y les autres balises découvertes. Il n'est pas nécessaire de noter plusieurs fois la même balise.

Montre le résultat de ta recherche au professeur.

  • Finalement, ferme toutes les pages sauf index.html qui restera ouverte.

Construction de la feuille de style

Nous allons construire la feuille de style pour la page d'accueil. Nous nous occuperons des autres pages bien plus simplement ensuite.

Liste déroulante
  • Vérifie que la page index.html est active.
  • Ouvre l'éditeur de styles en cliquant sur le bouton CasCadeS de la barre d'outils ou par la touche F11 au clavier.
  • Ouvre la liste déroulante, sous l'icône  KZ dans la partie gauche de la boîte de dialogues.
  • Clique sur la ligne Feuille incorporée.
  • Dans la partie droite de la boîte de dialogues, complète les informations demandées selon le modèle ci-dessous.
Feuille de style incorporée

Dans le champs Liste des médias, on peut indiquer " screen " si l'on souhaite que les styles ne s'appliquent qu'à la présentation à l'écran, " print " si l'on souhaite que les styles ne s'appliquent qu'à la présentation à l'impression,...
L'indication " all " permet d'adopter les directives pour... tous les périphériques de sortie.
Il n'est pas obligatoire de fournir un titre pour une zone de styles.

  • Clique sur le bouton OK.

La manipulation ci-dessus a pour effet de créer la zone qui contiendra les directives de styles, dans la page HTML.

  <style title="MesStyles" media="all" type="text/css">
  </style>

Elle ne contient encore aucune directive.

Pas pour vous embêter, mais il me semble que nous avions fait tout ça bien plus simplement, il y a quelques minutes. Tenez, relisez ce que vous mettiez à la page 6.

Tout à fait bien vu. Cependant, nous allons essayer d'aller un peu plus loin maintenant. D'autant que KompoZer travaille de manière un peu plus soigneuse que nous dans la version de la page 6.

Page d'acceuil mise en forme Reconstruction de la page

Sans utiliser les outils de mises en forme disponibles dans la barre d'outils, nous allons reconstruire la page d'accueil. L'illustration ci-contre présente un modèle possible pour le résultat final. Aucune modification n'est apportée au texte.

Mise en forme du texte


  • Texte, Fond, BorduresNous utiliserons les onglets Texte, Fond et Bordures de la boîte de dialogue de l'éditeur de styles.

L'usage des autres onglets est sans objet ici ou sera étudié dans la prochaine leçon.

En utilisant tes connaissances acquises dans les pages précédentes, crée des styles pour les différents éléments de ta page index.html. Il faut imposer des styles pour:

  • Le titre de niveau 1 (h1).
  • Les titres de niveau 2 (h2).
  • Les liens (a).
  • Le corps du document (body).
  • La référence du document (blockquote)

Introduis, par exemple, des couleurs de texte, des couleurs de fond, des alignements de texte, des tailles de caractères, une image de fond, une police de caractères,...

  • Enregistre fréquemment le document index.html durant la mise en forme.

Les images de fond, dans une page web, seront généralement très discrètes. Trop apparentes, elles rendent le texte peu lisible.

Les polices de caractères "exotiques" seront utilisées avec beaucoup de prudence. Si le visiteur du site web ne dispose pas de la police sur son ordinateur, elle sera remplacée par une autre police, sans aucune garantie sur le résultat final.

Mise en forme de l'image

Quelle est la balise HTML qui caractérise les images?
La balise <image>
La balise <img>
La balise <photo>
Aucune balise n'est prévue pour les images

Le centrage de l'image sur la page pourrait être obtenu à l'aide d'une règle de style. La méthode n'est cependant pas évidente. Nous nous contenterons de centrer l'image à l'aide du bouton Centrer de la barre d'outils.

Pour la mise en forme de l'image, nous utiliserons une nouvelle ressource: l'onglet Boîte de l'éditeur CasCadeS.

  • Dans l'éditeur de styles, crée une règle pour les éléments img.
  • Dans l'onglet Bordure, définis une bordure pour les éléments de ce type.
Bordure rouge

En passant, verrais-tu comment utiliser les bordures pour tracer une ligne horizontale au-dessus, à gauche, à droite ou au-dessous d'un élément?

  • Espacement: 10pxDans l'onglet Boîte, définis un espacement de 10px autour de l'élément img.

Observe l'image sur la page pendant la définition des espacements.

  • Enregistre le document index.html.
  • Si nécessaire, revois les différents styles de ta page. Note qu'il est possible d'apporter des modifications manuellement dans l'onglet Général de l'éditeur de styles.
Onglet Général

N'hésite pas à examiner le code présenté dans l'onglet Général. C'est le même qui se trouve dans la zone de définition de styles du code HTML.

Quand la page d'accueil est mise en forme à l'aide de styles, soumets le code au professeur puis passe à la page suivante. Vers la page suivante Page suivante


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