Définissez les zones d’en-tête et de pieds de page de votre site web pour ajouter des menus, des logos, des mentions de copyright et plus encore dans Adobe Muse.

Remarque :

Aucune nouvelle fonctionnalité n’est plus ajoutée à Adobe Muse et le support prendra fin le 26 mars 2020. Pour plus d’informations et pour obtenir de l’aide, reportez-vous à la page de fin de service Adobe Muse.

Adobe Muse vous permet de créer facilement des en-têtes et des pieds de page web. En utilisant des en-têtes et des pieds de page à la présentation identique, vous assurez ainsi l’homogénéité de votre site web. Pour ce faire, dans Adobe Muse, il vous suffit de définir les éléments de l’en-tête et du pied de page dans le gabarit de la page web. La mise à jour du gabarit permet d’appliquer les modifications à toutes les pages de votre site web.

Lors de la création d’un site web avec HTML et CSS, les pages individuelles ont souvent des hauteurs différentes en fonction du contenu unique qui s’affiche sur chaque page. Muse contient des fonctions qui permettent d’afficher des pages de site de différentes longueurs en fonction du contenu unique de chaque page. Vous pouvez définir des zones pour que l’en-tête reste toujours en place en haut et que le contenu du pied de page s’affiche toujours directement au-dessous du contenu de la page, quelle que soit la largeur de la page.

Ajout d’en-tête et de pied de page pour une page

Avant de définir les zones d’en-tête et de pied de page, assurez-vous que les repères d’en-tête et de pied de page sont affichés. Si tel n’est pas le cas, choisissez Affichage > Afficher l’en-tête et le pied de page.

Vous pouvez également utiliser le menu Affichage du panneau Contrôle pour activer les repères En-tête et pied de page.

Vérifiez que les repères En-tête et Pied de page sont activés.
Vérifiez que les repères En-tête et Pied de page sont activés.

Si vous préférez, vous pouvez également cliquer avec le bouton droit de la souris sur le côté gauche de l’espace de travail, juste en dehors de la zone de la fenêtre du navigateur. Activez l’option pour afficher l’en-tête et le pied de page dans le menu contextuel qui s’affiche.

Utilisation des repères et des règles

La règle doit être activée pour repositionner les repères d’en-tête et de pied de page. La règle permet de définir les repères sur une position exacte en pixels. Par défaut, les repères standard (qui affichent le nombre de colonnes que vous avez défini lorsque vous avez créé le site) sont également affichés.

Cinq repères horizontaux bleus s’étendent sur la largeur de la page. En partant du haut, ces cinq repères permettent de définir le haut de la page, le bord inférieur de l’en-tête, le bord supérieur du pied de page, le bas de la page web et le bas de la fenêtre du navigateur. Lorsque vous faites glisser les repères pour définir ces zones, une info-bulle décrit chaque repère et son emplacement actuel. Il peut être utile d’augmenter l’agrandissement de la page pour effectuer un zoom et positionner ainsi les repères avec plus de précision.

Les trois repères du milieu définissent le contenu qui s’affiche dans les zones d’en-tête et de pied de page. La zone centrale restante est la zone dans laquelle vous ajoutez le contenu de page unique ; cette zone centrale s’étend pour s’adapter à la hauteur des éléments placés sur chaque page.

Vous pouvez également sélectionner les rectangles et les éléments sur la page. Les cadres de sélection des éléments sélectionnés s’avèrent pratiques pour aligner les repères lors de la définition des zones d’en-tête et de pied de page.

Remarque :

la partie inférieure de la fenêtre de navigateur détermine la partie inférieure de la zone d’affichage lorsqu’un internaute affiche le site dans un navigateur. En fonction de la conception, vous pouvez définir une couleur d’arrière-plan ou une image d’arrière-plan pour le navigateur lui-même et définir le repère pour la partie inférieure de la page au-dessus de la partie inférieure du repère du navigateur pour que cette couleur ou image d’arrière-plan s’affiche en dessous du contenu de la page.

Définition des éléments d’en-tête et de pied de page

Pour définir les éléments d’en-tête et de pied de page, procédez comme suit :

  1. Faites glisser les repères Bas de la page et Bas du navigateur pour les amener au même emplacement dans le bas de la page, juste en dessous du rectangle de pied de page, comme indiqué dans l’image ci-dessous.
Définissez les éléments d’en-tête et de pied de page dans Adobe Muse.
Définissez les éléments d’en-tête et de pied de page dans Adobe Muse.

  1. Sélectionnez le rectangle dans le pied de page qui contient l’image mosaïque d’arrière-plan. Faites glisser le repère de pied de page pour l’aligner sur la partie supérieure du rectangle du pied de page.
  2. Conservez le repère Haut de la page tout en haut (position Y : 0 px). Faites glisser le repère d’en-tête vers le niveau souhaité.

Le contenu de l’en-tête s’affiche dans la zone entre le haut de la page et le repère d’en-tête.

Faites glisser le repère d’en-tête pour définir la zone d’en-tête
Faites glisser le repère d’en-tête pour définir la zone d’en-tête

A tout moment au cours du processus de conception, vous pouvez revenir dans la page Gabarit A pour ajuster les repères pour qu’ils correspondent au contenu de l’en-tête et du pied de page.

Cliquez sur le lien Plan ou sur l’onglet katiesCafe pour revenir à la vue Plan.

Notez que toutes les vignettes des pages dans le site affichent maintenant les éléments de conception que vous avez ajoutés à la page Gabarit A.

Notez l’en-tête et le pied de page spécifiés dans toutes les pages liées au Gabarit A.
La conception Gabarit A s’affiche sur toutes les vignettes des pages liées dans la vue Plan.

Les modifications que vous effectuez dans le gabarit sont reportées automatiquement dans les pages liées au cours de la conception du site. Les gabarits facilitent la mise à jour et la gestion d’un site, car vous pouvez mettre à jour un gabarit pour changer l’apparence du site.

Importation d’une image pour remplir le contenu de l’en-tête

Etant donné que le logo du site s’affiche sur chaque page du site, il constitue un candidat parfait pour être inséré dans l’en-tête sur le gabarit.

  1. Choisissez Fichier > Importer. Ou si vous préférez, utilisez le raccourci clavier Ctrl+D (Windows) ou Commande+D (Mac) pour importer une image.

  2. Dans la boîte de dialogue d’importation qui apparaît, naviguez jusqu’au fichier Logo.png du dossier Kevins_Koffee_Kart pour le sélectionner. Cliquez sur Sélectionner

  3. Utilisez l’outil Sélection pour faire glisser le logo vers le haut, près du sommet de la zone de l’en-tête que vous avez défini précédemment.

Importez ensuite une autre image qui va servir d’arrière-plan au widget de la barre de menus que vous ajouterez dans la section suivante.

  1. Choisissez Fichier > Importer ou utilisez le raccourci clavier correspondant à votre système d’exploitation : Ctrl+D (Windows) ou Commande+D (Mac).

  2. Naviguez jusqu’au dossier Kevins_Koffee_Kart et sélectionnez le fichier top-nav.png.

  3. Cliquez une fois dans la partie supérieure de la page, dans la zone que vous avez précédemment définie comme en-tête. Assurez-vous de placer l’image au-dessus de la marque de l’en-tête, de sorte qu’elle s’affiche au même endroit, au-dessus du contenu principal de la page, sur chaque page.

  4. Utilisez l’outil Sélection pour faire glisser le graphique de ruban marron que vous venez d’importer, de sorte que les pneus rouges du vélo du logo viennent simplement toucher le bord supérieur du ruban marron. Cette opération donne l’illusion que le vélo roule sur le ruban marron.

  5. Choisissez Fichier > Importer à nouveau. Parcourez l’arborescence pour sélectionner le fichier nommé thedrip.png. Cliquez une fois dans la partie inférieure droite du graphique de ruban marron pour importer l’image à sa taille originale.

  6. Utilisez l’outil Sélection pour repositionner l’image d’écoulement, de façon à l’aligner avec le ruban marron et pour que le café semble couler goutte à goutte sur le côté droit.

    Le contenu de l’en-tête tel qu’il apparaît après avoir ajouté le logo et l’arrière-plan pour la navigation du site.
    Le contenu de l’en-tête tel qu’il apparaît après avoir ajouté le logo et l’arrière-plan pour la navigation du site.

    Vous pouvez vérifier l’exemple de site en direct pour voir le positionnement correct du logo et la navigation dans la partie supérieure.

    Dans la section suivante, vous allez apprendre à ajouter des widgets après une brève présentation de l’utilisation des conteneurs widget.

Utilisation de l’option Pied de page rémanent

L’option Pied de page rémanent permet d’ajouter un élément de pied de page sur une page web. L’option Pied de page rémanent a été spécialement conçue pour les visiteurs avec des écrans de poste de travail plus grands. Lorsque l’option Pied de page rémanent est activée, le pied de page reste à l’emplacement souhaité, même si la fenêtre du navigateur est beaucoup plus grande que la conception de la page web.

L’option Pied de page rémanent est disponible sur la boîte de dialogue Nouveau site (Fichier > Nouveau site) lorsque vous créez un site dans Muse. Vous pouvez également accéder à l’option Pied de page rémanent sur les boîtes de dialogue Propriétés de la page (Page > Propriétés de la page) et Propriétés du site (Fichier > Propriétés du site)

L’option Pied de page rémanent est activée par défaut. En règle générale, il est préférable d’utiliser la fonction Pied de page rémanent lorsque vous créez des sites. Cependant, si vous notez que les pages qui s’affichent sont plus longues que prévu (car les pages du site ont moins de contenu et sont relativement courtes), vous pouvez toujours désactiver cette option en désélectionnant la case à cocher dans la boîte de dialogue Propriétés de la page.

Toutefois, si vous souhaitez désactiver l’option pour la totalité du site web, vous pouvez le faire en la désélectionnant dans la boîte de dialogue Propriétés du site.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne