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.
- Vérifie que la page index.html est active.
- Ouvre l'éditeur CasCadeS en cliquant sur
le bouton
de
la barre d'outils. -
- Clique sur le bouton qui ouvre une liste déroulante, sous
l'icône
dans la
partie gauche de la boîte de dialogues. - Clique sur la ligne .
- Dans la partie droite de la boîte de dialogues, complète les informations demandées selon le modèle ci-dessous.
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 .
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 http://info.sio2.be/kpz/2/6.php.
Tout à fait bien vu. Cependant, nous allons essayer d'aller un peu plus loin maintenant. Je tiens donc beaucoup à ce que la notion de Feuille incorporée soit bien assimilée.
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
-
Nous
utiliserons les onglets , et de la
boîte de dialogue de l'éditeur CasCadeS.
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
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 
de la
barre
d'outils.
Pour la mise en forme de l'image, nous utiliserons une nouvelle ressource: l'onglet de l'éditeur CasCadeS.
- Dans l'éditeur CasCadeS, crée une règle pour les éléments img.
- Dans l'onglet , définis une bordure pour les éléments de ce type.
En passant, verrais-tu comment utiliser les bordures pour tracer une ligne horizontale au-dessus, à gauche, à droite ou au-dessous d'un élément?
-
Dans
l'onglet , définis un espacement de 10px
autour de l'élément image.
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 CasCadeS.
N'hésite pas à examiner le code présenté dans l'onglet . 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.
Dernière modification 14/10/2007
