Les pré-requis
quelques notions d’HTML (la syntaxe générale des balises HTML)
connaitre le principe d’organisation des squelettes de SPIP (URL-page,squelette et Environnement d’un squelette)
connaissance de la rubrique Zpip sur Contrib (en particulier typologie..)
Cahier des Charges
Vous avez trouvé un jeu de squelettes SPIP sur le Net, son apparence vous plait, et vous avez vérifié que ces fichiers (en particulier le design graphique) sont bien libres de droits [1] : vous partirez des fichiers .html récupérés.
La démarche serait la meme pour convertir un jeu de squelettes natif en Z.....
Outils
Vous aurez sans doute bâti votre panoplie de travail avec OUTILLAGE Webmestre SPIP, et -par facilité, et sécurité- prévu de travailler d’abord sur une installation locale : INSTALLER SPIP...
Il vous faudra par exemple :
un logiciel éditeur du type Notepad++ pour modifier les fichiers
un logiciel SERVEUR Web de test : COMMENT ? LAMP/WAMP de type Easyphp ou WampServer pour faire des essais de votre squelette chez vous (installation locale)
un logiciel de transfert FTP comme Filezilla pour mettre vos fichiers en ligne
installer votre spip de travail en local (cela permet une modification-visualisation directe des squelettes [2]
et cela est quasi-indispensable pour travailler à partir d’un site déjà publié...
La démarche
A partir de pages HTML reçues [3], le premier travail consiste à re-structurer les blocs dans les pages proposées.
On suppose que vous trouverez dans vos différentes maquettes de pages, une modélisation du type Les Gabarits/Layout de pages , telle que modélisée depuis longtemps déjà en partie dans la dist.
Une premiere page
Prenons une page typique du contenu du site, par exemple la page d’accueil : ce sera le sommaire
en SPIP..
Vous identifiez donc des blocs de code, qui doivent remplir les zones de ./inclure/pied
et ./inclure/entete
: on supposera dans un premier temps que ces zones sont fixes dans toutes les pages...
Ces deux blocs de codes vont être extraits d’une page html correcte pour être simplement copié-collé dans deux fichiers nommés ./inclure/entete.html
et ./inclure/pied.html
; leur positionnement sera reporté à l’indication donnée en feuille de style sur les deux identifieurs de blocs <div id=..>
[4] , nommés respectivement... #entete
et #pied
!
Vous effectuerez la même démarche au niveau du code head
de vos pages, à recopier dans un
./inclure/head.html
.
En fait, si vous partiez d’un jeu de squelettes bâti autour de Squelettes de la "dist" d’origine, cela reviendra à extraire-ré-utiliser les trois noisettes déjà existantes dans ./inclure
!
Normalement, il ne vous reste plus qu’à traiter la conversion en Z de chacun de vos contenus de pages de squelettes :
commençons par nous intéresser au contenu du cœur de chaque page :
il faut pareillement extraire le contenu principal du squelette nommé xxx [5], à mettre dans un fichier squelette nommé ./contenu/
page-
xxx
.html
, et pareillement son positionnement sera défini par le CSS...
Les autres pages sont plus simples
Améliorations de style
Comme rappelé par ailleurs, il existe aussi une typologie des styles CSS utilisés par SPIP dans Squelettes de la "dist" et dans Z, qu’il faut prendre en compte pour éviter des conflits avec vos sélecteurs CSS maison...
Article publié le 1er mars 2014, et actualisé en juillet 2016 .
Répondre à cet article