3 |
david |
1 |
***************************************************************
|
|
|
2 |
* SQUELETTES EXIBIT POUR SPIP *
|
|
|
3 |
* version 1.3 *
|
|
|
4 |
* last update : 06/01/2008 *
|
|
|
5 |
* Licensed under the MIT *
|
|
|
6 |
* http://www.opensource.org/licenses/mit-license.php *
|
|
|
7 |
* *
|
|
|
8 |
* Copyright 2009 Benoît Vrins {benoit@exibit.be} *
|
|
|
9 |
***************************************************************
|
|
|
10 |
1. Présentation
|
|
|
11 |
---------------
|
|
|
12 |
Les "Squelettes Exibit" ont été spécialement développés comme une base stable, à la structure sémantique et respectueuse des standards.
|
|
|
13 |
Ils possèdent de nombreux atouts de base laissant aux auteurs de SPIP une grande souplesse dans la mise en page de leurs contenus
|
|
|
14 |
Les "Squelettes Exibit" disposent d'un système de CSS qui permet aux graphistes de développer un look & feel laissant libre champ à leur créativité (pour autant qu'on maitrise le CSS)
|
|
|
15 |
|
|
|
16 |
Ces squelettes SPIP possèdent les caractéristiques suivantes :
|
|
|
17 |
- valides XHTML 1.0 Transitional
|
|
|
18 |
- librairie JS "FACEBOX" permettant l'ouverture de contenu dans des fenêtres (la galerie photos fonctionne avec cette librairie)
|
|
|
19 |
- mise en page des rubriques par mots-clés
|
|
|
20 |
- galerie photos avec création automatique d'onglets et visionneuse
|
|
|
21 |
- Squelettes fonctionnels
|
|
|
22 |
- 404 (page d'erreur en cas de contenu non trouvé)
|
|
|
23 |
- article : visite du site par article
|
|
|
24 |
- rubrique : visite du site par rubrique (menu)
|
|
|
25 |
- recherche : page de résultats de la recherche
|
|
|
26 |
- plan : plan du site
|
|
|
27 |
- sommaire : page d'accueil du site
|
|
|
28 |
- toutes les zones de la pages sont stockées dans un sous-répertoire "include" (menu à 3 niveaux, footer, header, ...)
|
|
|
29 |
- Une CSS générale et des CSS particulières pour les navigateurs capricieux :
|
|
|
30 |
- Internet Explorer 7
|
|
|
31 |
- Internet Explorer 6
|
|
|
32 |
|
|
|
33 |
2. Configuration
|
|
|
34 |
----------------
|
|
|
35 |
|
|
|
36 |
2.1. MISE EN PAGE PAR MOT CLE
|
|
|
37 |
-----------------------------
|
|
|
38 |
Par défaut, quand on visite le site avec le squelette "rubrique", les articles s'affichent en entier l'un en dessosu de l'autre par numéro d'article.
|
|
|
39 |
Vous pouvez changer la mise en page des rubriques selon 3 mises en page :
|
|
|
40 |
- "affichage par numéro d'articles du titre + introduction + lien 'lire plus'"
|
|
|
41 |
- "affichage par date du titre + introduction + + date + lien 'lire plus'"
|
|
|
42 |
- "affichage par numéro d'articles desarticles en entier+ affichage des onglets des images contenues dans l'article avec lien vers visionneuse"
|
|
|
43 |
Pour configurer ce système, veuillez suivre la procédure suivante :
|
|
|
44 |
- créez un groupe de mot clé dans SPIP intitulé par exemple "mise en page de rubrique" et cochez uniquement "associés aux rubriques"
|
|
|
45 |
- créez 3 mots clés dans ce groupes avec les intitulés suivant
|
|
|
46 |
- "introduction"
|
|
|
47 |
- "introduction + date"
|
|
|
48 |
- "galerie photo"
|
|
|
49 |
- par défaut le système fonctionne avec ces numéros (ID_MOT)
|
|
|
50 |
- "introduction" -> 1
|
|
|
51 |
- "introduction + date" -> 2
|
|
|
52 |
- "galerie photo" -> 3
|
|
|
53 |
- Si vos mots-clés créés ci-dessous possèdent d'autres numéros, vous devez éditer manuellement le fichier "include/article-contenu.html"
|
|
|
54 |
- Vous devez ensuite associer aux rubriques pour lequel vous voulez une mise en page particulière le mot-clé désiré. Les articles de cette rubrique s'afficheront alors selon les critères définis.
|
|
|
55 |
- Exception: pour la mise en page sur deux colonnes, il faut également créer un nouveau groupe de mot-clés intitulé par exemple "mise en page articles" dans lequel vous créer un mot-clé appelé "colonne de droite" (dans le squelette, le n° de mot-clé défini est le "5").
|
|
|
56 |
La procédure est donc
|
|
|
57 |
1. Associer le mot-clé "2 colonnes" à la rubrique,
|
|
|
58 |
2. Associer le mot-clé "colonne de droite" aux articles qui doivent figurer dans la colonne de droite (par défaut il sont dans la colonne de gauche ou colonne principale).
|
|
|
59 |
|
|
|
60 |
2.2. GALERIE PHOTO
|
|
|
61 |
------------------
|
|
|
62 |
- Si ce n'est pas encore fait dans la console de configuration de "SPIP", vous devez activer dans "fonctions avancées" une des méthodes de fabrication des vignettes (GD2 recommandée)
|
|
|
63 |
- le création des vignettes fonctionne avec un masque PNG placé à la racine du répertoire principal "masque.png". Vous pouvez en modifier la taille via un logiciel d'édition image au besoin
|
|
|
64 |
- la visionneuse fonctionne avec la librairie JS "FACEBOX" (http://famspam.com/facebox) basée sur JQUERY (natif sur la version 2 de SPIP, il faut donc bien placer la balise #INSERT_HEAD entre les balises "head", OK dans les squelettes Exibit). Vous pouvez éditer les styles graphiques de celle-ci dans le fichier "css/facebox.css"
|
|
|
65 |
- Pensez à donner un titre à vos images ainsi qu'une description, iles apparaitront dans la visionneuse
|
|
|
66 |
- Dans les rubriques qui fonctionnent avec le mot clé "galerie photo", ils nest pas nécessaire de positionner les images importées dans les articles au moyen des balises SPIP "<imgxxx>".
|
|
|
67 |
Sinon les images vont apparaitre deux fois (une fois là où vous l'avez positionnée et une autre fois en bas dans la liste des onglets)
|
|
|
68 |
|
|
|
69 |
2.3. CSS
|
|
|
70 |
--------
|
|
|
71 |
- La CSS mise à dispo est ultra basique. Les zones de mises en pages principales sont entourées d'une bordure grise afin que vous puissiez clairement visualiser celles-ci.
|
|
|
72 |
- L'objectif est bien entendu que les graphistes puissent développer sur cette base un CSS enrichie laissant libre champ à leur créativité
|
|
|
73 |
- Les images nécessaires au look and feel du site seront idéalement stockés dans le répertoire "images"
|
|
|
74 |
|
|
|
75 |
2.4. DIVERS
|
|
|
76 |
-----------
|
|
|
77 |
- Le lien "mentions légales" (obligatoires dans de nombreux pays) dans le footer est à activer (vers l'article que vous créerez)
|
|
|
78 |
- Des styles dans la CSS sont prévus pour certains plugins comme par exemple "Forms & Tables"
|
|
|
79 |
- Fonctionne avec SPIP 1.9.2 (la galerie photo non vérifiée) et SPIP 2.0
|