Integrer un HTML/CSS existant

Votre infographiste préféré vous a fourni une magnifique maquette, avec toutes les images extraites, et il a même poussé l’amabilité jusqu’a vous en fournir une intégration HTML/CSS opérationnelle, affichable dans vote navigateur : c’est à dire que vous disposez :
 d’une page HTML : index.html [1]
 du fichier CSS lié : perso.css
 d’un sous-dossier ./images/ contenant tous les images et enrichissements graphiques

 Implanter les fichiers en SPIP

Vous avez déjà compris que SPIP s’appuie sur une arborescence de dossiers bien structurée : les dossiers utilisateurs de SPIP. Vous ajouterez bien sur à votre SPIP installé, le plugin SkelEditor et vous utiliserez intensivement FireBug et/ou DragonFly...sans oublier de désactiver le cache SPIP [2].
La première étape va être de reprendre les fichiers disponibles pour les inscrire dans cette structure, au départ de ./squelettes.

Donc, sur votre espace SPIP bien créé, vous déposez votre ensemble de fichiers dans le dossier ./squelettes (et le sous-dossier ./images). Vous pouvez maintenant visualiser le résultat par l’appel à l’URL ?page=index...
Plus rien n’apparait, sauf des textes de votre pages, et.... les deux boutons d’administration en haut : donc SPIP intervient !
Mais pourquoi plus rien ne s’affiche correctement ? Parce que SPIP appelle (depuis sa racine /.) votre page HTML dans un sous-dossier (./squelettes), et que les chemins relatifs ne sont plus corrects : il suffit d’y rajouter la balise #CHEMIN.

 Préciser les #CHEMIN

Une page HTML utilise souvent d’autres fichiers, ses images, et le plus souvent déjà une feuille de style (ou plusieures !) ; initialement posés "à-coté" de la page HTML principale, il faut maintenant donner à SPIP les moyens de retrouver ces fichiers en tenant compte du chemin relatif entre la racine du site, et les sous-dossiers de squelettes, ce qui est la fonction de Balise SPIP dont vous devriez revoir la syntaxe.. avant d’utiliser #CHEMIN :
 Par exemple, votre appel au fichier CSS lié était sans doute écrit en :
  <link rel="stylesheet" href="./perso.css">
Vous devrez le corriger (je vous dirais bien de dupliquer la ligne [3]) en :
 [ <link rel="stylesheet" href="(#CHEMIN{./perso.css})"> ]
 Pour vos fichiers images, le même processus est à appliquer [4] :
ainsi <src img="mon_logo.png"> pourrait devenir [5]
 [ <src img="(#CHEMIN{images/mon_logo.png})"> ]

Vous pouvez vérifier la complète acceptation en rappelant votre page squelettisée sous SPIP, avec la commande d’URL ?page=index.

 Obtenir les contenus réels : boucles

Votre page doit présenter un contenu fictif -espérons réaliste- qu’il serait plus intéressant de sortir de votre site ; bien sur il est nécessaire que vous ayez rédigé quelques rubriques et articles pour continuer, pour pouvoir afficher par exemple les trois derniers articles publiés dans la liste prévue...

 il faut d’abord identifier le bloc HTML prévu pour l’affichage : pour une liste, c’est normalement un groupe de plusieurs paragraphes <li>.......</li>, le tout encadré d’une paire <ul>...</ul>,
 la paire de balises ul va directement encadrer La boucle ARTICLES et ses balises de champs à introduire -la plus complexe- donnant donc quelque chose comme :

(reste à bien définir les critères...) !
 il suffit maintenant de remplacer les textes proposés, par les contenus générés par chaque balise de champ d’articles : #TITRE , #TEXTE , #PS... pour vérifier l’affichage et le bon fonctionnement du squelette.