Le but de ce second cours de tutoriel est de préparer sereinement l’intégration des boucles SPIP dans notre gabarit de page pour créer notre premier squelette.

Nous allons donc créer tout ce qui sera nécessaire pour le travail qui suivra.

Quels logiciels utiliser

Avant toute chose, nous aurons besoin d’un bon navigateur internet qui ne nous fera pas de mauvaises surprise. Nous choisirons donc Firefox que nous augmenterons de l’extension Web Developer.

Puis nous aurons besoin d’un bon logiciel d’édition. Sous GNU-Linux on utilisera BlueFish ou Quanta+ (ou tout autre éditeur de son choix). Sous MS Windows il en existe également de bons qui proposent la coloration syntaxique évitant bien des erreurs de saisie : http://www.framasoft.net/rubrique15... et http://www.framasoft.net/rubrique32....

Nous aurons également besoin d’un logiciel de traitement d’images qui est cité dans le chapitre suivant (The Gimp).

Mise en place de DIV supplémentaires

Les DIV sont des blocs dans lesquels nous pourrons placer du texte, des images... Chaque DIV délimite une zone sur l’écran.

Comme l’a déjà expliqué (entre autres) Raphaël Goetter dans son livre sur les CSS : Trop de DIV tue les DIV !

Mais nous serons bien obligé de rajouter quelques DIV afin d’obtenir le design que nous recherchions dans le précédent cours : Construire ses propres squelettes SPIP (cours n°1).

Nous allons également attribuer une couleur à chacune des DIV pour pouvoir mieux visualiser nos transformations.

À propos des couleurs...

Dans les CSS nous utiliserons préférentiellement les couleurs nommés par leur code hexadécimal. Il existe des générateurs de codes couleur sur le web : http://www.informatiquegifs.com/ser.... De manière plus générale, tous les logiciels de traitement d’image donnent les valeurs hexadécimales des couleurs. Je ne peux que vous conseiller d’installer un logiciel du genre The Gimp que nous utiliserons d’ailleurs dans un autre tutoriel.

Nous obtenons donc le résultat suivant (je vous laisse éditer le code pour noter les changements effectués dans ce dernier) :

Truc CSS

Pour éviter bien des problèmes de différences de mise en page entre navigateurs, le code suivant a été saisi au début des CSS :

* {
margin:0;
padding: 0;
}

Ce dernier mets les valeurs des marges et écarts intra-blocs à zéro : http://blog.alsacreations.com/2004/...

Préparer l’accueil du futur squelette

À cette étape de notre tutoriel, nous devons avoir déjà compris comment installer SPIP ainsi que son arborescence de fichiers.

Pré-requis concernant SPIP

– Installation de SPIP ;
– SPIP pas à pas.

Nous verrons dans un autre tutoriel comment transformer nos squelettes en plugins. Pour l’instant, nous allons placer nos squelettes dans le répertoire /squelettes à la racine de notre site SPIP. Le répertoire /squelettes n’existe pas par défaut dans SPIP, il va vous falloir le créer si besoin.

Dans ce répertoire /squelettes nous allons créer un sous-répertoire /squelettes/css qui nous permettra de placer les feuilles de styles. Un autre sous-répertoire /squelettes/images nous sera également utile pour placer les images du design du site.

Pour finir notre préparation à l’intégration des boucles SPIP à notre squelette, nous allons séparer le code CSS du code XHTML de notre fichier sommaire.html :
– le code CSS se retrouvera dans le fichier /squelettes/css/bio_habillage.css
– le code XHTML restera dans le fichier /squelettes/sommaire.html

Dans le fichier sommaire.html nous ferons tout simplement un appel au fichier de code CSS :

<link rel="stylesheet" href="#URL_SITE_SPIP/[(#CHEMIN{css/bio_habillage.css}|direction_css)]" type="text/css" media="projection, screen, tv" />

Dans le morceau de code précédent, des balises SPIP ont déjà été intégrées. Pour plus de détail sur ces balises, veuillez vous référer à la documentation en ligne : http://www.spip.net/fr_rubrique143.html.

Dorénavant, lorsque vous allez sur votre site SPIP vous avez une page d’accueil ressemblant à cela :