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 Source 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 Source de cette page.
  • Colle le contenu du presse-papiers dans l'en-tête de la page.
  • Visualise le résultat dans l'onglet Normal.

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 Feuille de style interne, dans l'arborescence de gauche.
  • Complète les informations des zones Liste des média 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 Exporter la feuille de style et utiliser la version exportée.

Exporter la feuille de style

  • 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 !

nom du fichier

  • Mes stylesClique sur le bouton Enregistrer.

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.

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.

Lien vers le fichier .css

Stooop, on arrête tout. Ce n'est pas du tout ce que j'obtiens, moi. Regardez le machin que je me paie...

Chemin absolu

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.

  • Nettoyeur de  balisesDans le menu Outils de KompoZer sélectionne la commande Nettoyeur de balises.
  • Accepte toutes les options de la boîte de dialogue qui apparaît.
  • Clique sur le bouton Nettoyer.
Relativiser les URL locales

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 Page suivante

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