Les feuilles de style avec KompoZer
Recycler des styles existants
Ca y est, je tiens un ensemble de styles du tonnerre ! J'ai vraiment réussi un coup de maître. Mais mon site web compte plusieurs pages. Je dois vraiment recommencer toutes les manoeuvres sur chacune des pages ? N'auriez pas quelque chose de plus court ?
Certainement ! Il y a même plusieurs solutions...
Recopier les styles avec le presse-papiers
La solution la plus simple, pour reproduire les mêmes mises en formes sur plusieurs pages, est probablement de recopier tout le contenu de la zone <style>...</style> d'une page à l'autre en utilisant le presse-papiers.
- Ouvre l'onglet de la page index.html.
- Sélectionne l'ensemble de la zone <style>...</style> contenant les styles définis, y compris les deux balises.
- Ouvre chaque page dans laquelle les mêmes mises en formes doivent être appliquées.
- Ouvre l'onglet de cette page.
- Colle le contenu du presse-papiers dans l'en-tête de la page.
- Visualise le résultat dans l'onglet .
Bouarf! C'est complètement bourrin votre truc.
Il est vrai que ce n'est pas de la grande subtilité. Voyons une bien plus belle solution.
Sauvegarder les styles
La solution précédente a l'avantage d'être simple. Mais elle demande de recopier exactement les mêmes informations dans toutes les pages du site web, si l'on veut obtenir une présentation homogène.
Il serait plus intéressant de pouvoir sauvegarder tous ces styles dans un seul endroit.
- Ouvre la page index.html du site web Archimède telle que tu l'as améliorée avec des styles internes.
- Ouvre l'éditeur CasCadeS.
- Sélectionne la , dans l'arborescence de gauche.
- Complète les informations des zones dans la partie centrale de la boîte de dialogue comme tu l'avais fait à la page précédente pour la feuille de style interne.
- Clique sur le bouton .
- C'est une erreur classique d'oublier d'indiquer l'extension du fichier .css
Toutefois, cela n'empêchera pas le navigateur de bien interpréter la feuille de style.Dans la boîte de dialogue d'enregistrement de fichier, indique un nom de fichier pour la feuille de style. Il portera obligatoirement l'extension .css qu'il faut indiquer explicitement !
Clique sur le bouton .
Dans l'éditeur CasCadeS, il ne reste que la référence au fichier mestyles.css.
La boîte de dialogue des styles peut maintenant être fermée. L'ensemble des styles a été exporté vers le fichier .css qui a été désigné.
Exporté ? Cela veut dire qu'ils ne sont plus dans la page ? La mise en forme est toujours là, pourtant...
Effectivement, la mise en forme est toujours là, mais il n'y a plus qu'un lien vers le fichier .css. Vérifions cela.
- Ouvre l'onglet du document en cours.
- Recherche la zone <style>...</style>.
A la place de la zone contenant les directives de style, on ne trouve plus qu'un lien (link) vers le fichier .css contenant les styles.
Stooop, on arrête tout. Ce n'est pas du tout ce que j'obtiens, moi. Regardez le machin que je me paie...
C'est simplement que KompoZer a, par défaut, indiqué le chemin complet vers le fichier .css. Mais la solution est simple.
Le nettoyeur de balises
Le chemin tel qu'indiqué dans la notation ci-dessus (file:///Z:archimede/mestyles.css) est encore appelé chemin absolu vers le fichier. Il faut le transformer en chemin relatif.
Dans le menu Outils de KompoZer sélectionne la commande
.- Accepte toutes les options de la boîte de dialogue qui apparaît.
- Clique sur le bouton .
A la fin de l'opération, la boîte de dialogue doit se présenter comme ci-dessus.
- Vérifie que le lien est maintenant relatif dans le code HTML.
- Si nécessaire, applique le nettoyeur de balises jusqu'au moment où le résultat est 0 action pour toutes les lignes.
Quand la feuille de styles est exportée et le lien vers le fichier .css est relatif, passe à la page suivante.
Vers la page suivante
Dernière modification 01/09/2016 Test dans /info ...
Cette création est mise à disposition sous un contrat Creative Commons.