Tutoriel Complet — Construire un site avec l'Éditeur unifié

Avant de commencer

Ce tutoriel suit, dans l'ordre exact où elles ont été faites, toutes les étapes qui ont permis de construire le site test « Edelweiss Test » — 3 Rubriques, 6 Sous-Rubriques, 12 pages de contenu, plus l'Accueil et Contact. Chaque étape indique précisément quel onglet utiliser, quel champ remplir, et avec quelle valeur. Un seul exemple complet est détaillé pour chaque type d'opération répétitive (une page de contenu, un sommaire de Rubrique, un sommaire de Sous-rubrique) — les autres se font exactement de la même façon, seuls les intitulés changent.

Un point capital, à lire avant tout le reste : ce chantier a permis de découvrir une vraie source d'erreur, expliquée en détail à l'étape 7 — la construisez pas une page de sommaire n'importe comment, il existe une seule bonne méthode.

Étape 1 — Renseigner l'identité du site

Dans l'onglet « Construire une Page », section « 0. Menu & Rubriques du site », sous-section « Identité du site » :

Ces trois champs se retrouvent automatiquement partout — en-tête, pied de page, onglet du navigateur — sur toutes les pages du site, sans avoir à les ressaisir ailleurs.

Étape 2 — Créer les 3 Rubriques

Direction l'onglet « Gérer le Menu, les Rubriques et Sous-Rubriques », tiroir « ➕ Créer une nouvelle Rubrique ou Sous-rubrique ».

Pour chacune des 3 Rubriques, la manœuvre est identique :

1. Type : cocher « Une nouvelle Rubrique (apparaît directement dans le menu) ».
2. Titre : saisir le libellé voulu.
3. Nom du dossier : laissé tel quel — il se calcule automatiquement à partir du titre.
4. Cliquer « ➕ Créer ».

Les 3 Rubriques créées, dans l'ordre :

Étape 3 — Créer les 6 Sous-Rubriques

Toujours dans le même tiroir, sans le refermer :

1. Type : cocher « Une nouvelle Sous-rubrique (à l'intérieur d'une Rubrique existante) ».
2. Rubrique parente : choisir dans la liste déroulante.
3. Titre : saisir le libellé voulu.
4. Cliquer « ➕ Créer ».

Les 6 Sous-Rubriques créées :

Étape 4 — Enregistrer le Plan du Site

Cliquer, en haut de page, « 💾 Enregistrer mon Plan du Site ». Le fichier plan-du-site.json se télécharge — c'est la mémoire centrale qui contient déjà, à ce stade, les 3 Rubriques et les 6 Sous-Rubriques.

Étape 5 — Construire une page de contenu (exemple complet)

Retour dans l'onglet « Construire une Page ». Exemple détaillé avec la toute première page, « Bienvenue » :

Un bloc Paragraphe est ensuite ajouté, avec le texte de présentation de la page. La page est construite via « Télécharger la page », sous le nom bienvenue.html, à déposer dans decouverte/premiers-pas/.

Les 12 pages de contenu suivent exactement cette même méthode — seuls le titre, la Rubrique/Sous-rubrique, et le nom de fichier changent :

Étape 6 — Enregistrer chaque page dans le Plan du Site

Une page téléchargée ne suffit pas : pour qu'elle apparaisse dans le sommaire de sa Sous-rubrique, elle doit aussi être ajoutée au Plan du Site. Dans l'onglet « Gérer le Menu » :

1. Choisir la Rubrique ou Sous-rubrique concernée, dans la liste « Étape 1 — Choisissez la rubrique ».
2. Renseigner le titre et le nom du fichier de la page, dans « Étape 3 — Ajouter une nouvelle page ».
3. Cliquer « ➕ Ajouter ».

Répété pour chacune des 12 pages, dans sa Sous-rubrique correspondante.

Étape 7 — Construire une page de sommaire de Rubrique — LA méthode correcte

C'est le point le plus important de tout ce tutoriel. Une page de sommaire de Rubrique doit lister automatiquement ses Sous-rubriques. Il existe deux façons d'essayer de la construire — une seule fonctionne vraiment.

❌ À ne surtout pas faire : construire une page vide depuis l'onglet « Construire une Page », sans aucun bloc de contenu. Le résultat s'affiche, mais reste désespérément vide — aucune Sous-rubrique n'apparaît, parce que ce mécanisme ne sait pas les lister tout seul.

✅ La bonne méthode, dans l'onglet « Gérer le Menu » :

1. Dans « Étape 1 — Choisissez la rubrique », cocher le bouton radio de la Rubrique voulue (ex. « Découverte »).
2. Descendre jusqu'à « Étape 4 — Générer les fichiers mis à jour ».
3. Cliquer « ⚙️ Générer les fichiers ».
4. Télécharger le fichier produit — il s'appelle temporairement index--decouverte.html — puis le renommer en index.html avant de le déposer dans le dossier decouverte/.

Ce mécanisme construit une vraie page de sommaire, avec un bouton pour chacune des Sous-rubriques trouvées dans le Plan du Site. Répété pour les 3 Rubriques :

Étape 8 — Construire une page de sommaire de Sous-rubrique

Exactement la même méthode que l'étape précédente, en cochant cette fois le bouton radio de la Sous-rubrique (et non de la Rubrique) à l'étape 1 :

Cette fois, chaque sommaire liste les 2 pages de contenu déjà enregistrées à l'étape 6, avec leur badge « En ligne ».

Étape 9 — La page d'Accueil et la page Contact

Deux pages ordinaires, construites depuis l'onglet « Construire une Page », sans Rubrique ni Sous-rubrique sélectionnée (champ Rubrique de navigation laissé sur « Aucune »), avec un Emplacement laissé vide (racine du site) :

Étape 10 — Vérifications avant de publier

Avant de déposer quoi que ce soit sur l'hébergement, trois contrôles simples, sur un échantillon de pages :

1. Le menu du haut propose bien les 3 Rubriques, sur n'importe quelle page.
2. Le fil d'Ariane (juste sous le bandeau) affiche le bon chemin — deux niveaux pour une page de Rubrique (Accueil › Découverte), trois niveaux pour une page de contenu (Accueil › Découverte › Premiers Pas › Bienvenue), jamais de nom répété deux fois de suite.
3. Chaque sommaire liste bien ce qu'il doit lister — les Sous-rubriques pour un sommaire de Rubrique, les pages pour un sommaire de Sous-rubrique.

Étape 11 — Déposer sur l'hébergement

Le plan-du-site.json, réenregistré une dernière fois après toutes ces étapes (il contient désormais les 12 pages), se dépose à la racine du site. Chacune des 23 pages HTML se dépose dans son propre dossier, selon l'arborescence construite au fil des étapes précédentes.

Récapitulatif — l'arborescence complète du site

• index.html — Accueil
• contact.html — Contact
• plan-du-site.json — la mémoire centrale
• decouverte/index.html — sommaire de la Rubrique Découverte
• decouverte/premiers-pas/index.html — sommaire de la Sous-rubrique
• decouverte/premiers-pas/bienvenue.html
• decouverte/premiers-pas/comment-ca-marche.html
• decouverte/astuces/index.html — sommaire de la Sous-rubrique
• decouverte/astuces/astuce-du-mois.html
• decouverte/astuces/questions-frequentes.html
• ressources/index.html — sommaire de la Rubrique Ressources
• ressources/documents/index.html — sommaire de la Sous-rubrique
• ressources/documents/guide-pdf.html
• ressources/documents/modele-a-telecharger.html
• ressources/liens-utiles/index.html — sommaire de la Sous-rubrique
• ressources/liens-utiles/nos-partenaires.html
• ressources/liens-utiles/sites-recommandes.html
• galerie/index.html — sommaire de la Rubrique Galerie
• galerie/photos/index.html — sommaire de la Sous-rubrique
• galerie/photos/album-2026.html
• galerie/photos/souvenirs.html
• galerie/videos/index.html — sommaire de la Sous-rubrique
• galerie/videos/video-de-presentation.html
• galerie/videos/interviews.html

Soit 23 fichiers HTML au total, plus le plan-du-site.json central — l'intégralité construite en suivant, dans l'ordre, les onze étapes de ce tutoriel.

---

© ÉDITEUR DE SITES WEB EDELWEISS CP510956 – JUILLET 2026 – PATRICE CHAUVEAU