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. Depuis le panneau Blocs, glissez un Container sur la page — ce sera notre conteneur principal de page
  2. Définissez ce Container sur Display : Flex, Flex-direction : Column (empile les sections verticalement)
  3. 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 Container — ce sera le header. Dans les réglages de l'élément (icône engrenage en haut du panneau de droite), mettez son Tag name à header
  2. Donnez-lui une classe : dans le Style Manager (icône pinceau), cliquez sur + dans la zone du sélecteur en haut, tapez agency-header et appuyez sur Entrée
  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. Container avec le Tag name 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 du Container nav :

  1. Ajoutez un Container avec la classe agency-nav-links
  2. Définissez-le sur Display : Flex
  3. Ajoutez trois éléments Text à l'intérieur, un pour chaque page. Double-cliquez sur chacun et tapez le texte du lien, puis dans les réglages de l'élément (icône engrenage) mettez Link Type à URL et l'URL vers la page (chaque Text devient un <a>) :
  4. « Accueil », URL : ./index.html (chemin relatif)
  5. « À propos », URL : ./about.html

  6. « Contact », URL : ./contact.html

  7. Ajoutez un Column-gap au Container agency-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 Container avec la classe agency-content (ou agency-main), et mettez son Tag name à 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 Container avec la classe agency-footer, et mettez son Tag name à footer
  2. À l'intérieur, ajoutez un Text (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 restent identiques sur toutes les pages.

Faire du header un Symbole

  1. Sélectionnez le Container du header (avec la classe agency-header)
  2. Ouvrez le panneau Symboles (barre latérale gauche, Shift+S) et cliquez sur +
  3. Tapez Header et validez

Le header est maintenant un Symbole. Toute modification que vous y apportez se répercute partout où il est utilisé.

  1. Sélectionnez le Container du footer
  2. Dans le panneau Symboles, cliquez sur +
  3. Tapez Footer et validez

Copier la mise en page sur les autres pages

La page index est maintenant complète. Ajoutons le header et le footer aux pages about et contact.

  1. Dans le panneau Pages, passez à about
  2. Depuis le panneau Symboles, glissez le symbole Header sur la page, puis le symbole Footer en dessous
  3. Entre les deux, ajoutez la zone de contenu principal : un Container dont le Tag name est main
  4. Répétez pour contact

Les modifications du symbole Header ou Footer s'appliquent maintenant sur les trois pages.

Partir d'une page existante

Le bouton Clone page du panneau Pages copie une page avec tout son contenu. La copie garde les symboles : le header et le footer restent synchronisés.

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 réglages de l'élément (icône engrenage), vérifiez que l'URL de son Link 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 :

  • L'URL utilise des chemins relatifs (./about.html, pas /about.html ni des URL absolues)
  • Le texte sur lequel vous cliquez a bien un Link dans les réglages de l'élément (icône engrenage)
  • 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 — éléments réutilisables synchronisés
  • L'éditeur — aperçu de l'interface de l'éditeur
Éditer cette page sur GitLab