Retour à la page principale | A propos du site

Tutoriel Kompozer, étape 6 : Les feuilles de style

Voici 3 méthodes permettant de modifier l'apparence des éléments de vos pages (Titres, paragraphes, ... ) avec le logiciel Kompozer. 

Méthode 1 : Modification de l'apparence du texte et des images au cas par cas avec Kompozer.

Avantages : Cette méthode permet de modifier simplement l'apparence des titres, sous-titres et images au cas par cas sans avoir à s'y connaître en css.

Inconvénients : Il faut changer au cas par cas l'apparence de tous les éléments que l'on veut modifier ce qui peut s'avérer très long pour peu que le site compte un nombre de pages assez important.
Cette méthode alourdit aussi beaucoup les pages. 
En bref, c'est la méthode la plus simple mais la moins pratique.

Application : Avec cette méthode, iI suffit juste de procéder comme vous le feriez avec un éditeur de texte standard. 
Vous sélectionnez l'élément dont vous souhaitez changer la couleur, le style d'écriture ou la police et vous cliquez sur le bouton correspondant présent dans la barre de menu. 
Faites de même pour tous les éléments que vous souhaitez modifier.  

Méthode 2 : Modifier l'apparence du texte et des images à partir d'une "zone" css

Avantages : Cette méthode permet de changer l'apparence d'une page html très rapidement.

Inconvénients : il faut s'y connaître un peu en css et cette méthode alourdit un peu les pages étant donné que la zone css est insérée dans toutes les pages du site.

Application : 
Dans Kompozer, cliquez sur le bouton "KaZcadeS". 
Ensuite, dans la fenêtre qui vient de s'ouvrir, cliquez sur la palette de couleur pour créer une feuille de style interne. 
Cette feuille de style apparaîtra dans l'espace blanc situé sur la gauche de la fenêtre (voir image ci-dessous). 

Lorsque que vous aurez créé votre feuille de style, il ne restera plus qu'à donner des règles de style aux différents types d'éléments présents sur votre page.

C'est ce que nous allons voir maintenant : 

Toujours dans la même fenêtre, entrez la lettre "a" dans l'espace blanc situé sur la droite de la fenêtre (voir image au dessus" et cliquez sur "Créer la règle de style". 
Note : "a" est l'abréviation du terme "adresse" et signifie "lien" donc vous êtes en train de créer une règle de style qui s'appliquera à tous les liens présents sur votre page.

Lorsque vous avez créé cette nouvelle règle de style qui s'appliquera à tous les liens de votre page, vous remarquerez que dans l'espace gauche de la fenêtre, la feuille de style interne comporte une sous-section "a". Positionnez vous dessus à l'aide de la souris. 
Maintenant, allez à l'onglet "Texte", choisissez la couleur "Blanc" et cliquez sur "OK". 
Les liens de la barre de navigation devraient à présent être écrits en blanc alors qu'auparavant ils étaient bleus. 

Pour créer d'autres règles à ajouter à votre feuille de style, ouvrez KaZcadeS et séléctionnez votre feuille de style dans la fenêtre de gauche, ensuite, cliquez sur l'icône représentant une palette de couleur et entrez la nouvelle règle de style souhaitée. 

Note : La liste des abréviations des différents éléments est donnée en bas de la page, après la méthode 3. 

Méthode 3 : Modifier l'apparence du texte et des images à partir d'un fichier css externe.

Avantages : Cette méthode permet de changer l'apparence d'un site entier très rapidement en insérant un lien vers un fihcier css où se trouvent toutes les données relative à l'apparence du site.

Inconvénients : Il faut s'y connaître un peu en css.

Application : La procédure est similaire à la méthode 2 sauf qu'après avoir créé une feuille de style interne avec KaZcades, il faudra l'exporter dans un fichier css et utiliser ce fichier à la place.

Lorsque vous cliquez sur "Exporter la feuille de style et utiliser la version exportée", cela équivaut à enregistrer votre feuille de style interne dans un nouveau fichier qui n'existe pas encore et auquel il faudra donner un nom. 
Donnez lui le nom que vous voulez suivi de l'extension ".css". 
Pour créer de nouvelles règles de style, c'est la même chose que pour la méthode 2, allez à l'onglet "GENERAL" de la fenêtre KaZcades et entrez les abréviations des éléments correspondants tels qu'ils sont listés ci-dessous (en plus de la règle "a" que vous avez normalement déjà créé). 

Abréviations des principaux éléments se trouvant dans une page html

Cette partie est utile uniquement si vous avez choisi les méthodes 2 et 3 pour modifier l'apparence de vos pages.

h1 : Titre 1
h2 : Titre 2 h3 : Titre 3
h4 : Titre 4
h5 : Titre 5
h6 : Titre 6
p : Paragraphe
a : Adresse (Lien)