Pour le webmestre, pour les gestionnaires de contenu qui connaissent déjà le langage "html pour les nuls et et les CSS.

Les Horadrim, des sorciers, sont ceux à qui on attribue l'exploit d'avoir débarassé le monde de Diablo et de sa corruption (dans Diablo I, de Blizzard Interactive). Parmi les apports remarquables qu'ils ont fait à la collectivité, on note leur invention du cube Horadrim: c'est un cube magique tout petit, donc facile à porter, mais qui est plus grand à l'intérieur qu'à l'extérieur, donc à grande contenance. C'est un objet bien pratique car il contient beaucoup d'objets volumineux et lourds. On voit à gauche un guerrier (Warrior class) de Diablo I, un de ceux qui ont assisté les sorciers Horadrims dans la lutte contre Diablo.

Pourquoi utiliser un cube Horadrim sur le site web Abeille ?

Le cube Horadrim Abeille est une représentation fidèle de la structure des fichiers du site Abeille-Cyclotourisme. Il sert donc de simulateur du site (inaccessible, lui) pour celui qui veut créer ou améliorer une page (ou plus). Il est téléchargeable depuis la page des formulaires du club. Téléchargeons-le.

son dossier extérieur, on l'imaginera appelé "abeille-cyclotourisme.fr", (il se nomme cube_horadrim mais il est conseille de le rerbaptiser abeille-cyclotourisme.fr (cube horadrim). Il contient une copie de la feuille de style générale du site (styles.css), de la page d'index générale du site (index.htm), du dossier "images" qui contient les images des pages "Accueil" (index.htm), "Organisations" (organisations/organisations.html), "Programmes" (programmes/programmes.html), "Souvenirs" (souvenirs/souvenirs.html), "Annonces" (annonces/annonces.html) et "Pratique" (pratique/pratique.html). Il est le reflet du dossier du serveur de l'hébergeur de site contenant le site Abeille.

On y trouve, en premier niveau, un sous_dossier intérieur nommé sous_dossier, qui représentera, pour l'usage qu'on va en faire, in'importe lequel des cinq sous-dossiers de 1er nivau présentés plus haut (de Organisations, à Pratique). On va le renommmer (pas nécessaire mais didactique) du nom du dossier qui va contenir la page qu'on va créer (par exemple programmes si on veut créer une page de programmes mensuels). Volà. Il contient déjà les pages de tous les onglets du site Abeille dans leur disposition normale (sauf les pages de l'onglet "Accueil") et le sous-dossier "images" qui contiendra les images qui leur sont associées.

Si on crée des pages dans un cube Horadrim, tous les liens relatifs créés, soit entre pages soit vers des images, fonctionneront aussi bien dans le cube Horadrim que quand ces pages seront placées sur le site réel Abeille. C'est là toute la magie de la chose. Il faut donc toujours travailler en mode "création de page" (wysiwyg) : c'est plus simple pour la suite.

1. Dupliquer ce cube Horadrim et son contenu. Ce cube représente, globalement, l'ensemble de l'environnement du site Abeille à sa date de mise à jour visible en haut à droite de la page index,
2. Ouvrir le sous_dossier, y choisir le modèle de page adéquat et lui donner le nom de la page qu'on veut créer. Notons que pour l'essentiel des cas où un créateur de contenu est nécesaire, le cube horadrim dédié existe certainement déjà. Si notre modèle de pages est plein de micromodèles détaillés (cas du modèle de compte-rendus), on peut en enlever tous ces éléments de mode d'emploi qui y sont contenus, entre la fin du premier marqueur "--" (faits pour être visibles dans un éditeur WYSIWIG html) jusqu'au début du dernier marqueur "--". Ensuite, dans un bon éditeur WYSIWIG html, on crée notre page. Quand la page est terminée, se mettre en mode affichage des codes ("html" dans Dreamweaver) et supprimer les dernières balises <p>--</p> contenant ces marqueurs "--". Nettoyer le code (pour ceux qui savent comment faire) d'un coup de Tidy (du W3C)..
3. Pour les compte-rendus, dénommer les fichiers de compte rendus "200x_nom_du_compte_rendu.html", dénommer le fichier images associé "images_200x" suivant le millésime du compte-rendu et le dossier de photos associé "photos_200x" suivant le millésime du compte rendu. Pas de lettres majuscules, de caractères spéciaux ou accentués ni de blancs svp.
4. Pour les photos, les préfixer d'un bigramme explicatif, afin que ces photos se regroupent ensemble alphabétiquement dans le dossier "photos_200x".
5. Mettre la (les) page(s) .html dans le sous-dossier, et à chaque création de lien vers une image ou une photo:
6. Mettre les images dans le sous-dossier images_200x contenu dans de dossier "sous_dossier",
7. Mettre les photos dans le sous-dossier "photos_200x" contenu dans le dossier "sous_dossier".,
8. Et créer ce lien à ce moment (mais pas avant). Les liens seront alors corrects.

Question ?