🏔️ Éditeur de Sites Internet Professionnel « Edelweiss » - Lot 2 V5.07 Poste de travail 2 🔵 Bleu

🧩 Construire la page

Reprenez une page ou commencez-en une nouvelle, puis remplissez ses blocs ci-dessous.

📂 Reprendre ou commencer une page
Choisissez un fichier HTML créé avec ce générateur pour le modifier, ou videz le formulaire pour en commencer une nouvelle — le Plan du Site déjà chargé ci-dessous reste en mémoire dans les deux cas.

🧱 Les blocs de votre page

Votre page n'a encore aucun bloc.Cliquez sur l'onglet « Contenu Page », puis sur le bloc de votre choix : il s'ajoutera ici, prêt à être rempli.

🗂 Menu, Éléments de Menu et Thématiques

L'identité de votre site et le menu du haut, puis vos Éléments de Menu, Thématiques et pages.

0. Le Menu et ses Éléments

Le menu du haut de vos pages, et la liste des Éléments de Menu disponibles ci-dessous, viennent de votre « Plan du Site ». Vous pouvez le modifier librement — aucune ligne de code à toucher.

🪪 Identité du site

Utilisée quand la page n'a pas de photo. Sinon, c'est la première photo de la page qui sert d'aperçu.

Une image carrée de préférence (PNG, JPG, SVG…). Elle est réduite automatiquement et rangée dans votre Plan du Site : aucun fichier à déposer à part. Laissez vide pour garder l'icône 🏔.

PNG avec fond transparent conseillé. Le logo s'affiche au-dessus du nom du site. Il est rangé dans votre Plan du Site, comme le favicon. Laissez vide pour ne pas afficher de logo.

C'est vous qui choisissez le média — tant qu'aucun n'est choisi, l'Accueil garde son bandeau actuel, inchangé.

Ces trois champs sont enregistrés dans votre plan-du-site.json (bouton « Enregistrer » ci-dessous). Pour un nouveau sous-domaine : changez-les ici, enregistrez le Plan, et déposez-le à la racine du nouveau site. Le nom et la devise des pages déjà publiées se mettent à jour automatiquement (comme le menu) ; seul le nom du copyright demande de régénérer les pages.

Comment ça marche : ① choisissez l'Élément de Menu ; ② saisissez le titre et le nom de fichier de votre nouvelle page ; ③ cliquez sur « Générer ». L'outil vous livre les fichiers mis à jour, prêts à déposer sur votre hébergement.

📋 Votre Menu actuel — Éléments de Menu et Thématiques

➕ Créer un nouvel Élément de Menu ou une Thématique
Type

Toujours en minuscules, sans accent, sans espace — calculé pour vous à partir du titre, pour éviter toute erreur.

Étape 1 — Choisissez l'Élément de Menu

Élément de Menu du site
🖼️ Bandeau de cet Élément de Menu (photo ou vidéo en fond)

C'est vous qui choisissez le média — tant qu'aucun n'est choisi, cet Élément de Menu garde son bandeau actuel, inchangé. Toutes les pages de cet Élément de Menu partagent le même bandeau ; les Thématiques reprennent automatiquement celui de leur Élément de Menu parent. Pensez à « 💾 Enregistrer mon Plan du Site » après un changement.

Étape 2 — Pages déjà dans cet Élément de Menu

Liste actuelle

Étape 3 — Ajoutez une nouvelle page

Nouvelle page

Sans accents ni espaces — utilisez des tirets.

Facultatif : pour regrouper vos pages sous des titres, comme « Éducation Populaire » ou « Économie Sociale et Solidaire ».

L'Élément de Menu et la Thématique de cette page sont déjà pris en compte automatiquement — inutile de les répéter ici. Ce champ ne sert que si la page se trouve encore plus profond, dans un dossier créé exprès à l'intérieur de la Thématique (ex. un classement par année). Dans le doute, laissez-le vide.

Étape 4 — Générer les fichiers mis à jour

✅ Fichiers prêts à télécharger

Téléchargez ces fichiers et déposez-les sur votre hébergement à la place des anciens, dans les mêmes dossiers.

📝 Mémo — l'essentiel

  1. Chargez votre Plan du Site à jour en tout début de session, si ce n'est pas déjà fait.
  2. Choisissez l'Élément de Menu dans laquelle vous avez créé votre page.
  3. Vérifiez la liste actuelle — supprimez si besoin.
  4. Ajoutez votre nouvelle page : titre + nom du fichier HTML (ex. ma-page.html).
  5. Cliquez sur « Générer les fichiers ».
  6. Téléchargez les fichiers livrés (dont le Plan du Site à jour) et déposez-les sur votre hébergement à la place des anciens.
  7. Le badge « En ligne » = page publiée. « En préparation » = à venir. « Nouveau » = récemment ajoutée.

📝 Informations de la page

Titre, sous-titre, description pour Google, nom du fichier, Élément de Menu, emplacement et mot de passe.

1. Informations de la page

0 caractère — idéal : entre 120 et 160.

Sert à l'adresse officielle de la page et à l'aperçu de partage. Il est retrouvé tout seul quand le titre figure dans le Plan du Site ; il sert aussi de nom au fichier téléchargé.

La liste se remplit selon l'« Élément de Menu de navigation » choisi ci-dessous — plus de risque de faute de frappe, et l'Emplacement se règle alors avec certitude.

Si vous choisissez un Élément de Menu, un rappel s'affichera pour vous inviter à ajouter cette page dans l'onglet « Menu / Éléments de Menu / Thématiques » après téléchargement.

Suggéré automatiquement selon vos champs Élément de Menu de navigation et Thématique ci-dessus — vérifiez toujours qu'il correspond à l'endroit réel où vous allez déposer ce fichier, modifiable si besoin. Ce choix règle les liens de la page (menu, fil d'Ariane) et les chemins vers vos photos.

🧱 Contenu de la page : les 47 blocs

Cliquez sur un bloc : il s'ajoute à votre page, et l'Éditeur vous y emmène aussitôt pour le remplir.

Ci-dessous, les 47 blocs de l'Éditeur Unifié de Sites Internet, qui servent à construire les pages HTML. Un mémo des 47 blocs, à imprimer, se trouve dans l'onglet « Mémo Blocs ».

2. Contenu de la page

Ajoutez autant de blocs que vous voulez, dans l'ordre souhaité (flèches ↑↓ pour réordonner, ✕ pour supprimer).

👁 Voir le résultat

L'aperçu de votre page, telle qu'elle sera sur le site. Il se met à jour chaque fois que vous ouvrez cet onglet.

3. Voir le résultat

📝 Mémo Essentiel

L'essentiel pour construire une page, en quelques lignes.

📝 Mémo — l'essentiel en quelques lignes

  1. Remplir le titre, puis ajouter vos blocs de contenu (paragraphes, photos, vidéos…).
  2. Mettre un mot en gras : entourez-le de deux astérisques. Exemple : un mot **important** deviendra « un mot important ».
  3. Mettre un mot en italique : entourez-le d'une seule étoile. Exemple : un mot *discret* deviendra « un mot discret ».
  4. Insérer un sous-titre au milieu d'un paragraphe : commencez une ligne par ## (avec un espace après) pour un titre qui apparaîtra aussi dans la table des matières, ou par ### pour un titre plus discret qui n'y apparaîtra pas.
  5. Rendre un mot cliquable (lien Internet) : sélectionnez le mot dans votre texte, cliquez sur le bouton 🔗 Insérer un lien, collez l'adresse — c'est tout. La formule [[mot => adresse]] s'écrit toute seule, et le lien s'ouvrira dans un nouvel onglet. Vous pouvez aussi taper la formule à la main si vous préférez.
  6. Ajouter une photo : ① réduisez son poids (voir le topo « blocs médias ») ; ② déposez le fichier dans le dossier medias/photos/ de votre site ; ③ dans le bloc Photo, écrivez seulement le nom du fichier (ex. colo-1968.jpg).
  7. Vidéo : déposez-la sur YouTube ou dans votre pCloud Public Folder (fichier .mp4), puis collez son adresse dans le bloc Vidéo.
  8. Page protégée : cochez « 🔒 Protéger cette page » (onglet « Information Page ») et choisissez un mot de passe de 12 caractères minimum. Le contenu est réellement chiffré : sans le mot de passe, impossible de le lire. Conservez-le précieusement — il n'est enregistré nulle part.
  9. Diaporama : une photo par ligne, format nom-fichier.jpg | Ma légende. Flèches, pastilles, clic pour agrandir — tout est automatique.
  10. Aperçu pour vérifier, puis Télécharger la page. Déposez le fichier HTML sur votre hébergement — c'est tout. Rien d'autre à faire, pas de style.css à gérer.
  11. La table des matières se fabrique toute seule dès qu'il y a au moins deux sous-titres.
  12. Code HTML (iFrame) : pour intégrer un formulaire Google, une vidéo Canva ou tout autre contenu d'un site de confiance. Sur ce site, cliquez sur son bouton « Intégrer » ou « Partager », copiez le code proposé, et collez-le tel quel dans ce bloc — sans le modifier. Ce bloc est le seul qui accepte du vrai code : tous les autres blocs protègent votre texte en l'affichant tel quel, celui-ci fait confiance à ce que vous collez, donc ne l'utilisez qu'avec du code venant d'un site que vous connaissez.

🧩 Mémo des 47 blocs

Tous les blocs, rangés par famille, avec un petit mot pour chacun.

🧩 Mémo — les 47 blocs en un coup d'œil (v4.11)

Tous les blocs de l'Éditeur, rangés par famille, avec un petit mot pour chacun.

✍️ Textes (11 blocs)

  1. Sommaire Sticky — Le sommaire fixe sur le côté ; peut lister les vidéos (v4.09).
  2. Paragraphe — Le bloc de base : texte, gras, italique, couleurs, intertitres, listes, liens.
  3. Sous-titre — Un grand titre de partie ; il alimente le sommaire de la page.
  4. Citation — Un texte mis en valeur dans un encadré, en italique.
  5. Actualité datée — Une annonce précédée de sa date : événement, sortie, nouveauté.
  6. Liste de slogans — Des phrases courtes, une par ligne, mises en avant.
  7. Grille de réflexions — Des cartes « titre + texte » rangées en grille.
  8. Onglets — Plusieurs textes dans le même espace, un clic par onglet.
  9. Texte qui défile — Un bandeau de texte qui défile, comme une enseigne.
  10. 2 colonnes : texte fluide — Un seul texte réparti tout seul sur deux colonnes, comme un journal.
  11. Tableau — Lignes et colonnes ; en-tête fixe, fiches sur téléphone, format A4 (v4.08).

🧱 Mise en page (13 blocs)

  1. 2 colonnes : texte | photo — Le texte à gauche, la photo à droite.
  2. 2 colonnes : photo | texte — La photo à gauche, le texte à droite.
  3. 2 colonnes : texte | vidéo — Le texte à gauche, la vidéo à droite.
  4. 2 colonnes : vidéo | texte — La vidéo à gauche, le texte à droite.
  5. 2 colonnes : photo | vidéo — Une photo et une vidéo côte à côte.
  6. 2 colonnes : vidéo | photo — Une vidéo et une photo côte à côte.
  7. 1/3 Image | 2/3 Texte — Une petite image, un texte large et un bouton.
  8. 2/3 Texte | 1/3 Image — Un texte large, une petite image et un bouton.
  9. 1/3 Code | 2/3 Texte — Un contenu intégré (carte, agenda…) à côté d'un texte.
  10. 2/3 Texte | 1/3 Code — Un texte à côté d'un contenu intégré.
  11. Photo + Programme — Une photo et un programme horaire, pour une sortie ou une fête.
  12. Séparateur décoratif — Un trait entre deux parties : filet, vague, crête de montagne.
  13. Espaceur Horizontal — Un espace vide, petit ou grand, pour aérer la page.

📷 Photos (5 blocs)

  1. Photo — Une photo avec sa légende ; un clic l'agrandit.
  2. Galerie de photos — Plusieurs photos en grille, à agrandir une par une.
  3. Mosaïque Photos & Texte — Des cases mêlant photos et textes colorés.
  4. Diaporama — Photos, textes ou vidéos qui défilent, avec musique de fond possible.
  5. Section épinglée — Une image fixe pendant que des légendes défilent par-dessus.

🎬 Vidéo et son (6 blocs)

  1. Vidéo — Une vidéo YouTube ou un fichier .mp4 / .mov (pCloud…).
  2. Vidéo double — Deux vidéos côte à côte (l'une sous l'autre sur téléphone).
  3. Mur de Vidéo — Une vidéothèque sur deux colonnes ; signale les doublons (v4.10).
  4. Jukebox (pur audio) — Une grille de morceaux .mp3 à écouter.
  5. Jukebox YouTube — Morceaux audio et vidéos mélangés dans la même grille.
  6. Podcast — Un lecteur audio pour un enregistrement, avec son titre.

🔗 Liens et outils (8 blocs)

  1. Groupe de boutons ronds — Une rangée de boutons vers d'autres pages ou parties.
  2. Lien commenté — Des boutons vers des sites extérieurs, ouverts dans un nouvel onglet.
  3. Listing YouTube / Facebook / Sites Web — Une liste de liens triée, avec recherche et repérage des doublons.
  4. Document PDF — Un PDF affiché dans la page, avec un lien pour l'ouvrir.
  5. Code HTML — Un contenu fourni par un autre site, collé tel quel.
  6. Lien protégé par code — Un téléchargement réservé, ouvert avec un code à 6 chiffres.
  7. Formulaire — Messages, avis ou témoignages reçus par e-mail, sans adresse visible.
  8. Recherche sur le site — Une case pour chercher un mot dans toutes les pages.

⚙️ Automatiques (4 blocs)

  1. Plan du site — L'arbre complet des Éléments de Menu et des pages, tiré du Plan.
  2. Page d'Information — La liste des seules pages « En ligne ».
  3. Date de mise à jour du site — « Site mis à jour le… », à la date du téléchargement.
  4. Date de mise à jour de la page — « Page mise à jour le… », à la date du téléchargement.

🔎 Doublons de vidéos

L'Éditeur lit toutes les pages de votre site et liste les vidéos placées plusieurs fois. Rien n'est envoyé sur Internet.

Comment faire ?

Cliquez sur « 📁 Choisir le dossier de mon site », puis choisissez, sur votre ordinateur, le dossier qui contient toutes les pages de votre site. Le résultat s'affiche ci-dessous.

🎬 Tableau des Vidéos

Toutes les vidéos de votre site, page par page. Cliquez sur le titre d'une colonne pour classer le tableau.

Choisissez, sur votre ordinateur, le dossier qui contient toutes les pages de votre site. Rien n'est envoyé sur Internet. Chargez d'abord votre Plan du Site, pour que les noms des Éléments de Menu s'affichent en clair.

🖼️ Outil Images

Le format, le poids et les dimensions de vos images, et la réduction des images trop lourdes. Tout se passe sur votre ordinateur.

✂️ Réduire les images

Chaque image garde son nom et son format : les liens de vos pages restent bons. Une image n'est jamais agrandie.

🧰 Mes Outils

Vos 6 outils de travail, chacun dans son onglet.

ℹ️ Mode d'emploi des outils

Cliquez sur un outil dans la ligne « 🧰 Mes Outils ». Chaque outil fonctionne exactement comme avant, avec ses propres boutons, sa synchronisation avec son fichier, ses exports et ses imports. L'Éditeur se souvient du dernier outil ouvert.

Première ouverture : un outil peut s'ouvrir vide, car ses données sont gardées par le navigateur selon l'adresse où il est ouvert. Pour les retrouver : cliquez sur le bouton de connexion à son fichier et choisissez le même fichier qu'avant, ou bien Exportez depuis l'ancienne adresse, puis Importez ici.