Integrer un HTML/CSS existant

  pour le transformer en squelette SPIP

Quand le gestionnaire de site a retenu une maquette graphique, place à l’intégration pour transformer ces dessins (PDF, gif et png) en squelettes SPIP, en supposant dans notre cas que l’intégration en HTML/CSS simple est déjà réalisée (avec DreamWeaver, Blue).Fish ou tout autre éditeur

Article publié le 26 mai 2015, et actualisé en mai 2015

 
 
 
 
 
 
 
 
 
 
 
 
 
 

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 :

  1. <ul>
  2. <BOUCLE_sommaire(ARTICLES){0,3}>
  3. <li>.......
  4. ..............</li>
  5. </BOUCLE_sommaire>
  6. </ul>

(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.


Merci de nous signaler les coquilles, imprécisions ou erreurs qui figureraient dans cette page.

[1La page principale d’un espaceWeb pour un site est appelée automatiquement index pour être proposée directement par le serveur..

[2Dans Maintenance/Vider le cache

[3Les puristes trouveront que dupliquer un code inutile est lourd (mais sans effet négatif), mais si vous débutez, vous apprécierez de pouvoir encore manipuler votre page HTML avec tout outil natif, DreamWeaver ou BlueGriffon sans souci, en respectant l’apparence donnée par les feuilles de styles !

[4Vous pourrez aussi déplacer immédiatement tous ces fichiers .jpg .png .gif dans un sous dossier ./images ; cela vous aidera a concentrer l’attention sur les fichiers squelettes... car vous pourriez bientot en avoir beaucoup : à titre indicatif (et non exemplaire), le dossier squelette de SPN compte 190 fichiers...

[5Ne dupliquez pas les lignes d’appels aux images, qui afficheraient une marque blanche, à l’inverse des feuilles de style (simplement ignorées si non trouvées) !


Liens A2A visibles seulement pour les inscrits.
Liens visibles seulement pour les inscrits.

Article publié le 26 mai 2015, et actualisé en mai 2015 .

Répondre à cet article