Aller au contenu

Structure : pages, mise en page et navigation

Dans cette section, nous allons créer trois pages, concevoir un modèle de mise en page avec header et footer, et construire une navigation qui fonctionne sur toutes les pages.

Créer les pages

Par défaut, Silex crée une page index (la page d'accueil). Ajoutons-en deux autres.

Dans le panneau Pages (barre latérale gauche) :

  1. Cliquez sur le bouton + pour ajouter une nouvelle page
  2. Nommez-la about
  3. Cliquez à nouveau sur + et nommez la seconde nouvelle page contact

Vous avez maintenant trois pages : index, about et contact.

(Silex crée automatiquement index.html, about.html et contact.html lors de la publication.)

Construire le modèle de mise en page

Les trois pages auront le même header et footer. Nous allons les construire une seule fois en utilisant des Symboles pour que les modifications se synchronisent sur toutes les pages.

Commencez par la page index (assurez-vous d'y être). La structure générale est :

Header (Symbole)
Contenu principal
Footer (Symbole)

Étape 1 : Ajouter la structure principale de la page

  1. Sur le canvas, cliquez pour sélectionner l'élément racine de la page (l'arrière-plan)
  2. Dans le panneau Blocs, ajoutez un Div — ce sera notre conteneur principal de page
  3. Définissez ce Div sur Display : Flex, Flex-direction : Column (empile les sections verticalement)
  4. Définissez Width à 100% et ajoutez un Max-width (par ex. 1200px) et margin : auto pour le centrer (voir Flexbox pour plus de détails)

Étape 2 : Créer le header

À l'intérieur du conteneur principal :

  1. Ajoutez un Div — ce sera le header
  2. Nommez-le « header » en ajoutant une classe (dans les Element settings (icône engrenage), ajoutez la classe agency-header)
  3. À l'intérieur du header, ajoutez deux éléments côte à côte :
  4. Image — le logo (pour l'instant, utilisez un placeholder ou trouvez une image de logo d'agence)

  5. Élément Nav — pour les liens de navigation

  6. Stylisez le header :

  7. Display : Flex
  8. Justify-content : space-between (logo à gauche, navigation à droite)
  9. Align-items : center
  10. Ajoutez du Padding (par ex. 20px)
  11. Ajoutez une bordure inférieure ou une couleur de fond pour une séparation visuelle

Étape 3 : Construire la navigation

À l'intérieur de l'élément Nav :

  1. Ajoutez un Div — appelez-le agency-nav-links
  2. Définissez-le sur Display : Flex
  3. Ajoutez trois Liens (la balise <a>) à l'intérieur, un pour chaque page :
  4. Texte du lien : « Accueil », Href : ./index.html (chemin relatif)
  5. Texte du lien : « À propos », Href : ./about.html

  6. Texte du lien : « Contact », Href : ./contact.html

  7. Ajoutez un Column-gap au Div nav-links (par ex. 24px) pour espacer les liens

  8. Stylisez les liens : définissez Font-size, Font-weight, Color. Optionnellement ajoutez du padding ou du margin

Étape 4 : Créer la zone de contenu principal

Après le header, à l'intérieur du conteneur de page :

  1. Ajoutez un Div avec la classe agency-content (ou agency-main)
  2. C'est ici que le contenu spécifique à chaque page ira (section hero, cartes, formulaires, etc.)
  3. Définissez Flex-grow : 1 pour qu'il s'étende et remplisse l'espace disponible
  4. Ajoutez du Padding (par ex. 60px 20px) pour de l'espace de respiration

Après le contenu principal :

  1. Ajoutez un Div avec la classe agency-footer
  2. À l'intérieur, ajoutez un Paragraphe (pour le texte de copyright) ou plusieurs éléments pour les liens du footer
  3. Stylisez le footer :
  4. Bordure supérieure ou couleur de fond pour la séparation
  5. Ajoutez du Padding
  6. Définissez une Font-size plus petite (par ex. 14px)
  7. Centrez le texte avec Text-align : center

Nous allons maintenant convertir le header et le footer en Symboles pour qu'ils se synchronisent sur toutes les pages.

Faire du header un Symbole

  1. Sélectionnez le Div du header (avec la classe agency-header)
  2. Clic droit → Create Symbol (ou utilisez le panneau Symboles)
  3. Nommez-le Header
  4. Une boîte de dialogue apparaît demandant de confirmer. Cliquez sur OK

Le header est maintenant un Symbole. Toute modification que vous y apportez se met à jour automatiquement sur les trois pages.

  1. Sélectionnez le Div du footer
  2. Clic droit → Create Symbol
  3. Nommez-le Footer

Les deux sont maintenant des Symboles. Vous pouvez les modifier depuis n'importe quelle page et les changements s'appliquent partout.

Copier la mise en page sur les autres pages

La page index est maintenant complète avec le modèle. Copions cette mise en page sur les pages about et contact.

Option A : La plus rapide — Dupliquer et personnaliser

  1. Sur la page index, sélectionnez tout le contenu (Ctrl+A ou Cmd+A)
  2. Copiez-le (Ctrl+C ou Cmd+C)
  3. Passez à la page about
  4. Collez (Ctrl+V ou Cmd+V)
  5. Supprimez le placeholder de la zone de contenu principal et ajoutez le vôtre
  6. Répétez pour contact

Les Symboles (header et footer) se synchroniseront automatiquement sur toutes les pages.

Option B : Plus lente mais explicite — Reconstruire

  1. Passez à about
  2. Recréez manuellement la structure de la page
  3. Ajoutez le conteneur principal de page avec flexbox
  4. Depuis le panneau Symboles, glissez le Symbole Header sur la page
  5. Glissez le Symbole Footer en bas
  6. Ajoutez la zone de contenu principal entre les deux

Définir la page d'accueil

La page d'accueil doit être nommée index. Silex le fait automatiquement, donc c'est déjà en place.

Lors de la publication, index.html est votre page d'accueil et est servie à la racine de votre domaine (par ex. monsite.com/ charge index.html).

Tester les liens internes

Avant de passer à la suite, vérifiez que la navigation interne fonctionne :

  1. Dans l'éditeur, cliquez sur un des liens de navigation
  2. Dans les Element settings (icône engrenage), vérifiez que le href commence par ./ (chemin relatif)
  3. Publiez le site sur GitLab Pages (voir Publication ou Publier sur GitLab)
  4. Sur le site en ligne, cliquez sur un lien. Vous devriez naviguer vers cette page

Si les liens ne fonctionnent pas, vérifiez :

  • Le Href utilise des chemins relatifs (./about.html, pas /about.html ni des URL absolues)
  • Vous cliquez sur des Liens, pas du texte brut
  • Les noms de pages correspondent exactement (sensible à la casse : about.html pas About.html)

Prochaines étapes

Vos trois pages sont maintenant connectées avec un header et un footer cohérents. Rendez-vous sur Style pour construire un système de design avec des variables CSS et un espacement cohérent.

Pages connexes

  • Pages — créer et gérer des pages
  • Flexbox — mise en page avec flex
  • Symboles — composants réutilisables synchronisés
  • L'éditeur — aperçu de l'interface de l'éditeur
Éditer cette page sur GitLab