Créer et modifier les feuilles de style d'un site SPIP
(→Eléments html de type bloc ou de type en ligne) |
(Réorg pour une plus grande lisibilité de l'ensemble) |
||
| Ligne 5 : | Ligne 5 : | ||
* On peut insérer la balise Spip #EXPOSE dans une feuille de style (voir ci-dessous "utiliser la balise #EXPOSE en lien avec une feuille de style"). | * On peut insérer la balise Spip #EXPOSE dans une feuille de style (voir ci-dessous "utiliser la balise #EXPOSE en lien avec une feuille de style"). | ||
| − | + | == Généralités == | |
| − | == Ce qu’est une feuille de style CSS == | + | === Ce qu’est une feuille de style CSS === |
| Ligne 29 : | Ligne 29 : | ||
Ces feuilles de style par défaut se trouvent dans le dossier /dist. | Ces feuilles de style par défaut se trouvent dans le dossier /dist. | ||
| − | == A quoi reconnaît-on qu’une page Web travaille avec une feuille de style ? == | + | === A quoi reconnaît-on qu’une page Web travaille avec une feuille de style ? === |
* A l’existence de l’instruction "class" dans le fil du code html de la page, qui appelle à chaque fois une "classe" particulière de style décrite dans la (les) feuille(s) de style, | * A l’existence de l’instruction "class" dans le fil du code html de la page, qui appelle à chaque fois une "classe" particulière de style décrite dans la (les) feuille(s) de style, | ||
* ou au fait que la ou les feuilles de style sont appelées par des instructions du type link rel="stylesheet" href="habillage.css" type="text/css" placées entre les HEAD en début de la page Web. Si les attributs de classe figurent à la suite dans la page (toujours entre les HEAD en début de page), il s’agit d’une feuille de style "interne" (l’instruction ressemble alors plus à style type="text/css") ; sinon, comme c’est le cas avec SPIP, il s’agit de feuilles de style "externes". | * ou au fait que la ou les feuilles de style sont appelées par des instructions du type link rel="stylesheet" href="habillage.css" type="text/css" placées entre les HEAD en début de la page Web. Si les attributs de classe figurent à la suite dans la page (toujours entre les HEAD en début de page), il s’agit d’une feuille de style "interne" (l’instruction ressemble alors plus à style type="text/css") ; sinon, comme c’est le cas avec SPIP, il s’agit de feuilles de style "externes". | ||
| − | == Quel est l’intérêt de travailler avec une feuille de style ? == | + | === Quel est l’intérêt de travailler avec une feuille de style ? === |
Les avantages sont nombreux, par rapport à l'indication des données de style dans le fil du html. | Les avantages sont nombreux, par rapport à l'indication des données de style dans le fil du html. | ||
| Ligne 49 : | Ligne 49 : | ||
A la place de aural, on peut avoir print (pour impression), braille (pour lecteur au toucher), all (pour tous medias), tv (pour un affichage sur écran tv), handheld (pour ordinateurs de poche), etc. Reste bien sûr à élaborer le contenu de ces feuilles de style par médias. | A la place de aural, on peut avoir print (pour impression), braille (pour lecteur au toucher), all (pour tous medias), tv (pour un affichage sur écran tv), handheld (pour ordinateurs de poche), etc. Reste bien sûr à élaborer le contenu de ces feuilles de style par médias. | ||
| − | == Comment créer une feuille de style ? == | + | === Comment créer une feuille de style ? === |
* Dans Dreamweaver, aller dans "fenêtre" et "style css" ; | * Dans Dreamweaver, aller dans "fenêtre" et "style css" ; | ||
| Ligne 140 : | Ligne 140 : | ||
== Positionnement des blocs dans une page html == | == Positionnement des blocs dans une page html == | ||
| + | === Trois grands styles graphiques pour un site Web === | ||
| + | |||
| + | Les pros parlent du : | ||
| + | * design ICY : la largeur du site est fixe (en général 760px) et le site est placé sur la partie gauche de l’écran, | ||
| + | * design JELLY : la largeur est fixe, mais le site est centré dans l’écran, | ||
| + | * design FLUID : le site s’adapte automatiquement à la largeur de l’écran. Les positions et dimensions des calques, tableaux et caractères sont définis de façon relative, sous de forme de pourcentages. | ||
| + | |||
=== Principe général=== | === Principe général=== | ||
A la création de la structure d'une page html (et donc d'un squelette Spip), il s'agit de créer des blocs ''div'' délimitant les contours des différentes zones de la page : | A la création de la structure d'une page html (et donc d'un squelette Spip), il s'agit de créer des blocs ''div'' délimitant les contours des différentes zones de la page : | ||
| Ligne 169 : | Ligne 176 : | ||
* éviter d’attribuer une largeur width à un bloc qui comporte un padding left ou right ou un border left ou right. Utilisez plutôt les margin-left et margin-right, | * éviter d’attribuer une largeur width à un bloc qui comporte un padding left ou right ou un border left ou right. Utilisez plutôt les margin-left et margin-right, | ||
* éviter d’attribuer une hauteur height à un bloc qui comporte un padding top ou bottom ou un border top ou bottom. Utilisez plutôt les margin-top et margin-bottom. | * éviter d’attribuer une hauteur height à un bloc qui comporte un padding top ou bottom ou un border top ou bottom. Utilisez plutôt les margin-top et margin-bottom. | ||
| + | |||
| + | === Notions de marge, bordure, espacement === | ||
| + | |||
| + | La bordure est un encadré en général de couleur qui peut atteindre plusieurs pixels de large. L’espacement (padding) est la marge entre le contenu (texte et/ou images) et la bordure. Margin caractérise la marge à l’extérieur de la bordure. | ||
| + | |||
| + | Ces trois instructions peuvent prendre des valeurs différentes pour le haut, le côté droit, le bas et le côté gauche. | ||
| + | L’espacement peut par exemple prendre des valeurs comme padding-top : 15px ; padding-right : 20px ; padding-bottom : 15px ; padding-left : 20px ; On peut aussi écrire directement dans la feuille de style : padding15px, 20px, 15px, 20px ; Les valeurs sont attribuées à partir du haut, dans le sens des aiguilles d’une montre. | ||
== Héritage des caractéristiques de style == | == Héritage des caractéristiques de style == | ||
| Ligne 222 : | Ligne 236 : | ||
| − | == | + | == Quelques spécificités de SPIP == |
| − | + | === Les caractéristiques de style générées par SPIP === | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | = | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | == Les caractéristiques de style générées par SPIP == | + | |
| − | + | ||
SPIP possède dans le fichier spip_style.css des attributs de style qui sont automatiquement associés aux "raccourcis typographiques" saisis par les rédacteurs et administrateurs du site lors de la création des articles. Si l’on modifie les feuilles de style de son site SPIP, il faut donc veiller à y reporter les attributs de spip_style.css. | SPIP possède dans le fichier spip_style.css des attributs de style qui sont automatiquement associés aux "raccourcis typographiques" saisis par les rédacteurs et administrateurs du site lors de la création des articles. Si l’on modifie les feuilles de style de son site SPIP, il faut donc veiller à y reporter les attributs de spip_style.css. | ||
| Ligne 253 : | Ligne 250 : | ||
| − | == Utiliser la balise #EXPOSE en lien avec une feuille de style == | + | === Utiliser la balise #EXPOSE en lien avec une feuille de style === |
La balise Spip #EXPOSE permet de mettre en évidence, dans un menu ou dans une liste, l’objet principal de la page où l’on se trouve (voir http://www.spip.net/fr_article2319.html). | La balise Spip #EXPOSE permet de mettre en évidence, dans un menu ou dans une liste, l’objet principal de la page où l’on se trouve (voir http://www.spip.net/fr_article2319.html). | ||
| Ligne 261 : | Ligne 258 : | ||
Il suffit donc de créer dans la feuille de style un style "on" pour qu’il s’applique quand l’objet correspond au contexte. | Il suffit donc de créer dans la feuille de style un style "on" pour qu’il s’applique quand l’objet correspond au contexte. | ||
| − | + | Exemple : dans chaque page affichant un article du site, l’on veut que les liens vers les articles de la rubrique en cours soient de couleur bleue, sauf le lien vers l’article affiché dans la page, qui sera en caractères gras et de couleur rouge. | |
| − | + | ||
====Première écriture==== | ====Première écriture==== | ||
