Faire son site et le publier

Kompozer et CSS

Feuille de style interne : Exportation et récupération

Nous venons de voir que la balise style encadre et définit, dans le head, l'ensemble des styles d'une page.

Si nous voulons une présentation homogène du site il est possible de reproduire les mêmes mises en forme sur les autres pages en recopiant tout le contenu de la zone <style>...</style> d'une page à l'autre en utilisant le presse-papiers.

Il est plus intéressant de sauvegarder les styles dans un seul endroit, une page texte ayant l'extension .css, placée à la racine du site, ou dans un dossier dédié aux feuilles de style. On peut le faire avec CaScadeS.

1 - Exportation des stylesExporter la feuille de style dans Cascades

A gauche :
Sélectionner Feuille de style interne
A droite :
Compléter si besoin Liste des média : all
Cliquer sur le grand bouton :
Exporter la feuille de style et utiliser la version exportée

Dans la fenête d'enregistrement

Donner le nom du fichier :
monStyle.css (sans oublier l'extension  ".css") qu'il faut penser à rajouter manuellement (Attention : oubli classique)
Parcourir pour placer ce fichier à la racine du site ou dans un dossier spécial
Cliquer sur le bouton Enregistrer

Enregistrer la feuille de style avec l'extension .css
Dans Cascades 

Il ne reste que la référence au fichier monStyle.css avec le chemin absolu dans le champ URL

Dans Cascades : chemin absolu pour la feuille de style

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é.

Dans l'éditeur

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.
Dans le code nous voyons que le chemin du lien est bien de type relatif  href="monStyle.css" ou bien href="../monStyle.css"
S'il était de type absolu, il ne fonctionnerait pas sur le site distant.
C'était un bug des versions précédentes de Kompozer.
Il fallait transformer l'URL absolu en URL relative avec le Nettoyeur de balises / Relativiser les URL locales.

Dans l'éditeur l'URL est bien relative grâce au nettoyeur de balises

2 - Récupération des styles

                              la commande Feuille liée permet d'appliquer la feuille externe à d'autres pages                           Dans Cascades apparaît la feuille de style externe

Nous allons appliquer la feuille de style sauvegardée à toutes les pages du site.

Faire de même pour toutes les pages du site. Visionner l'ensemble du site.  La charte du site est homogène.

Enregistrer-sous à partir d'un modèle

La feuille de style n'intervient pas sur le contenu html de la page.
Pour avoir toutes les pages avec les mêmes blocs, en-tête et pied de page :

Ainsi, les blocs sont tous créés, la feuille de style est déjà liée. 
A titre d'exercice faire de cette façon une nouvelle page "Archimède : sa mort". 
Prendre le texte dans Wikipédia. http://fr.wikipedia.org/wiki/Archim%C3%A8de
Pour éviter de coller l'arrière plan et tous les liens du texte de la page web, il convient de supprimer la mise en forme d'origine en passant par un collage spécial dans word ou un collage dans le bloc-notes.

Modification du code HTML avec l'Editeur : adressage

Si nous avons enregistré la feuille de style et la page modèle à la racine du site et que nous voulons Enregistrer-sous une page dans un dossier, il faudra penser, dans l'éditeur, à modifier le chemin du lien relatif.
Vérifier aussi le chemin de la source des images que nous voulons garder sur cette page, comme par exemple le logo ou un arrière plan.
Nous ajouterons ../ pour dire au navigateur qu'il doit remonter d'un cran afin atteindre la feuille de style (ou l'image), à partir de cette page placée dans un dossier. Pour que la feuille de style soit bien liée, nous devrons avoir le code  :

chemin relatif du lien
Accepter les modifications

NB : Cette procédure marche également avec une page php et des "include" (voir la page Faire des menus avec php). Dans la page de base, il faut faire  déjà tous les "include" et il faut enregistrer la page de base en modele.php. Les nouvelles pages seront également enregistrées en .php.

arborescence avec sous dossier

A titre d'exercice ajouter un sous-dossier nommé "traites" contenant 2 pages parabole.html et spirale.html.
Il sera nécessaire de modifier le chemin de la feuille de style liée pour voir apparaître les styles.

 <head>
 <meta name="generator" content="HTML Tidy for Windows (vers 18 June 2008), see www.w3.org">
 <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
 <title>Archim&egrave;de - La spirale</title>
 <link rel="stylesheet" href="../monStyle.css" type="text/css">
 </head>

Ces 2 nouvelles pages n'étant pas accessibles à partir du menu, il faudra penser à placer des liens sur une page du site (par exemple la page geometre.html) afin de pouvoir les visionner dans le navigateur. Pour revenir dans le site nous aurons la solution de cliquer sur le bouton "page précédente" du navigateur.

3 - Organisation et modification de la feuille de style dans Cascades

Une feuille de style est souvent constituée de plusieurs centaines de lignes. Il est donc important de rendre sa lecture facile en l'organisant de façon logique. A droite de la barre d'outils, deux flèches bleues permettent de faire monter ou descendre les styles sélectionnés.

Si nous voulons modifier un style dans la feuille liée

4 - Ajout d'une feuille de style incorporée

Nous serons parfois amenés à rajouter, à la feuille de style externe, une feuille de style incorporée dont les styles ne seront valables que pour cette page.
Si cette page se trouve dans un dossier et que nous avons choisi de mettre une image d'arrière plan à un titre h3, le chemin de cette image sera différent, puisqu'il faudra indiquer au navigateur qu'il doit remonter d'un niveau avant d'aller chercher l'image dans le dossier "images".
Dans la feuille interne nous aurons :  background-image: url(../images/gageasf3.png);
Dans la feuille externe nous aurons : background-image: url(images/gageasf3.png); C'est dans le chemin de la feuille de style que ../ indiquera au navigateur de remonter d'un cran.


Page à visiter :  http://marcarea.com/tuto/cssconseils.php#nav
Haut de page
Jos Argaud - Mise à jour 12/09/2009  Pour m'écrire  Document made with KompoZer  D'après le cours d'Yves Mairesse et avec son consentement