Ce tutoriel montre comment créer ses propres squelettes 100% personnalisés en utilisant les boucles de SPIP et le langage CSS de mise en page.

Imaginer un design

Je conseille toujours à tous les webmestres qui utilisent SPIP depuis peu de temps de toujours utiliser les squelettes par défaut (installés d’office dès l’installation de SPIP) puis de réfléchir aux orientations que l’on souhaite prendre une fois que le site est véritablement lancé et qu’il possède du contenu.

Le site pris en exemple est le site de Biotechno pour les Profs (www.biotechno.fr). Ce site est déjà bien rôdé et à déjà eu pas mal de liftings les années précédentes. Dorénavant, nous avons besoin de clarifier la navigation sur ce site afin de permettre un accès facile à tous les articles et publications proposés.

L’équipe d’administration du site à donc soumis plusieurs remarques importantes comme la mise en évidence des mises à jours d’articles qui sont quasiment aussi importantes que les publications de nouveaux articles...

Pour cette première étape, rien de tel que de griffoner sur un bout de papier ce que l’on cherche à avoir pour son site :

Rechercher des exemples de mise en page

Il est très pratique de se référer au site Alsacreation qui renferme des tas d’informations et de tutoriels sur le design Web.

Pour commencer rabattons-nous sur la page Modeles de mise en page en CSS. Le modèle se rapprochant le plus de notre schéma précédent serait le n°16 :

Premières adaptations du gabarit de mise en page choisi

On va commencer par recopier le fichier html de gabarit sous un autre nom de manière à toujours garder le modèle original au cas où. Pour tout de suite correspondre aux exigences de SPIP, on va dénommer ce fichier sommaire.html.

Peu importe où nous recopions ce fichier, l’essentiel c’est de savoir le retrouver facilement. Le premier travail d’adaptation concerne uniquement le fichier en question (sommaire.html) et ne nécessite pas d’utiliser ni d’installer SPIP (pour l’instant).

En ouvrant notre fichier sommaire.html avec notre navigateur préféré (Firefox évidemment) on peut lire le code source (Affichage/Code source de la page).

Tout ce code représente la mise en page (partie CSS au début du fichier) et le contenu (code HTML). Nous verrons par la suite qu’il sera important de séparer le CSS du HTML en deux fichiers.

Dans mon schéma il n’était pas question d’une colonne de gauche. Je vais donc alléger mon code HTML et modifier le code CSS pour obtenir ce que je recherche :
– Je retire toute la div de la colonne gauche :

 <div id="gauche">
        <p>
          menu gauche
        </p>
        <p>
          largeur fixe : 150px avec utilisation de la propriété float:left;
        </p>
        <ul id="menugauche">
          <li>
            <a href="#">Menu 1</a>
          </li>
          <li>
            <a href="#">Menu 2</a>
          </li>
          <li>
            <a href="#">Menu 3</a>
          </li>
          <li>
            <a href="#">Menu 4</a>
          </li>
        </ul>
      </div>

– et je retire tous les bouts de CSS qui s’y rapportent :

#gauche {
float:left;
width: 150px;
}
#menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
#menugauche li {
margin-bottom: 5px;
}
#menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menugauche a:hover {
text-decoration: none;
}

J’ai donc le résultat suivant :

La colonne de gauche est toujours virtuellement présente. Il nous faut procéder à quelques rectifications du code CSS :

– on retire le margin-left: 150px; de la partie #centre du code CSS et l’affaire est dans le sac :

Il ne reste plus qu’à faire passer la colonne de droite sur toute la hauteur. Pour cela, je déplace uniquement le code HTML suivant :

      <div id="header">
        header <a
        href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">
        (voir tous les mod&egrave;les)</a>
      </div>
      <div id="haut">
        <ul id="menuhaut">
          <li>
            <a href="#">Menu 1</a>
          </li>
          <li>
            <a href="#">Menu 2</a>
          </li>
          <li>
            <a href="#">Menu 3</a>
          </li>
          <li>
            <a href="#">Menu 4</a>
          </li>
        </ul>
      </div>

Et je le mets juste après le <div id="centre"> :

Approfondissements de la mise en page générale

Je souhaite avoir le bas de la colonne principale scindé en deux sous-colonnes de taille identique.

Pour cela j’ajoute le code suivant dans la partie CSS de la page (avant le /*]]>*/) :

div#moitie_gauche {
	width:50%;
	float:left;
	position: relative;
}

div#moitie_droite{
	width:50%;
	float:right;
	position: relative;
}		

Puis j’ajoute les blocs correspondants dans la page, juste après <p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p>

<div id="moitie_gauche">Et quoniam apud eos ut in capite mundi morborum acerbitates celsius dominantur, ad quos vel sedandos omnis professio medendi torpescit, excogitatum est adminiculum sospitale nequi amicum perferentem similia videat, additumque est cautionibus paucis remedium aliud satis validum, ut famulos percontatum missos quem ad modum valeant noti hac aegritudine colligati, non ante recipiant domum quam lavacro purgaverint corpus. ita etiam alienis oculis visa metuitur labes.</div>
<div id="moitie_droite">Et quia Montius inter dilancinantium manus spiritum efflaturus Epigonum et Eusebium nec professionem nec dignitatem ostendens aliquotiens increpabat, qui sint hi magna quaerebatur industria, et nequid intepesceret, Epigonus e Lycia philosophus ducitur et Eusebius ab Emissa Pittacas cognomento, concitatus orator, cum quaestor non hos sed tribunos fabricarum insimulasset promittentes armorum si novas res agitari conperissent.</div>

(NOTE : le texte aléatoire inséré dans l’exemple ci-dessus a été généré automatiquement par http://lorem.game-on-net.com/).

Le résultat obtenu se rapproche beaucoup du schéma rapide de départ :

Pour terminer sur ce premier tutoriel, nous allons simplement déjà élargir la colonne de droite qui n’est pas assez grande à notre goût pour pouvoir y intégrer un menu SPIP convenable.

On modifie donc la partie CSS comme suit :

#centre {
background-color:#9999CC;
margin-right: 260px;
}

#droite {
float:right;
width: 260px;
}

Ce qui donne le résultat final suivant :

On a maintenant une bonne trame (gabarit) pour notre site ou, au moins, pour notre première page "sommaire". Il ne reste plus qu’à préparer ce design à recevoir les boucles SPIP.