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.

Utilisation de la hiérarchie des gabarits

Muse vous permet de créer des gabarits qui peuvent être appliqués à d’autres gabarits. La hiérarchie des gabarits fonctionne d’une manière similaire à l’application des gabarits à une page dans la vue Plan. Dans les versions précédentes de Muse, vous pouviez créer plusieurs gabarits, mais vous ne pouviez appliquer qu’un seul gabarit avec un seul jeu d’éléments de page à la fois à une page Web.

Auparavant, si vous vouliez créer un site avec deux sections similaires, mais ayant chacune une apparence unique, vous pouviez dupliquer un gabarit, le modifier légèrement, et l’appliquer à des pages spécifiques. Par conséquent, les deux gabarits contenaient généralement des éléments identiques. Ainsi, lorsque vous mettiez à jour le site, vous deviez modifier le contenu dans les deux gabarits pour maintenir tous les éléments synchronisés.

Depuis Muse 4.0 et les versions suivantes, vous pouvez créer un gabarit qui contient les éléments partagés s’affichant dans plusieurs gabarits (ajout de l’arrière-plan et du pied de page, par exemple, comme indiqué dans les sections précédentes), puis créer d’autres gabarits qui héritent de tous les éléments du gabarit A et contiennent également les éléments uniques de la première section. Si vous deviez créer un troisième gabarit, ce dernier pourrait utiliser les éléments du Gabarit A, ainsi que les éléments uniques de la seconde section.

Une hiérarchie de gabarits offre l’avantage de pouvoir limiter l’occurrence d’un élément à une instance. En reconcevant un site, vous n’avez qu’à modifier chaque élément une fois, et toutes ses instances sont mises à jour automatiquement sur le site.

Vous pouvez gérer et appliquer les gabarits dans la vue Plan. Si vous pouvez cliquer et faire glisser une vignette de gabarit vers une vignette de page pour appliquer le gabarit à une page, de la même manière, vous pouvez créer plusieurs gabarits, puis cliquer et faire glisser un gabarit sur un autre gabarit. Ou bien, si vous préférez, cliquez avec le bouton droit sur un gabarit ou une vignette de gabarit dans la vue Plan et utilisez l’option Gabarits du menu contextuel qui s’affiche pour définir le gabarit.

Notez que lorsque vous placez le pointeur de la souris sur un nom de page ou de gabarit, une info-bulle affiche la hiérarchie des gabarits appliqués de la page ou du gabarit.

Pour l’instant, vous avez créé le Gabarit A avec l’arrière-plan mosaïque du navigateur et le contenu du pied de page. Dans la section suivante, vous allez créer un gabarit qui hérite du contenu du gabarit, A et ajouter l’en-tête pour l’appliquer aux pages du site. Procédez comme suit :

  1. Lorsque vous visualisez la carte du site dans la vue Plan, placez le curseur sur la vignette de la page du gabarit A pour afficher les boutons du signe Plus sur les deux côtés. Cliquez sur le signe Plus situé à droite du gabarit pur créer un tout nouveau gabarit. Par défaut, le nouveau gabarit s’appelle Gabarit B.
  2. Double-cliquez sur le champ de texte Gabarit B sous la vignette pour le modifier. Saisissez un nom plus descriptif pour le nouveau gabarit que vous venez de créer : Principal.
  3. Cliquez avec le bouton droit sur la vignette de page du gabarit Principal et choisissez Gabarits > Gabarit A dans le menu contextuel qui s’affiche.
Dans ce tutoriel, vous allez vous familiariser avec l’espace de travail d’Adobe Muse et apprendre à créer un site web complet sans écrire de code. Vous apprendrez également à créer un plan de site, à utiliser des gabarits et à comprendre les options de remplissage du navigateur dans Muse.
Choisissez le gabarit A dans le menu pour l’appliquer au gabarit Principal.

Note qu’après l’application du gabarit A au gabarit principal, la vignette de page du gabarit principal change pour afficher la même apparence. Le libellé bleu sous la vignette du gabarit principal indique [Gabarit A], car vous l’avez appliqué au gabarit principal au cours de l’étape 3.

Il est important de savoir que le gabarit principal ne contient pas en fait les éléments du gabarit A ; vous n’avez pas simplement dupliqué le gabarit A. En fait, vous définissez le gabarit principal pour lier le gabarit A, ce qui implique que lorsque vous ajoutez du contenu au gabarit A, le contenu apparaît systématiquement dans le gabarit principal.

Comme indiqué précédemment, l’élément remarquable concernant une hiérarchie de gabarit réside dans le fait que le pied de page, le menu et l’arrière-plan continuent d’exister uniquement dans le gabarit A. Ainsi, si un client demande ensuite d’utiliser un arrière-plan mosaïque différent, vous pouvez mettre à jour le gabarit  A, et le gabarit principal est mis à jour automatiquement.

Dans les sections suivantes du didacticiel, vous allez créer deux gabarits différents pour des apparences différentes sur les deux sections de site. Toutefois, pour le moment, vous pouvez mettre à jour les pages dans la vue Plan pour qu’elles utilisent toutes le gabarit principal et non pas le gabarit A.

  1. Cliquez et faites glisser le gabarit principal vers la vignette de la page aliments dans l’angle supérieur gauche. Notez que lorsque vous faites glisser la souris et déposez la vignette de page du gabarit principal sur la vignette de la page aliments, dans le texte bleu sous la vignette de la page alimentation, le [gabarit A] est remplacé par le gabarit [principal].

Il s’agit de la méthode générale pour appliquer des gabarits à des pages dans la vue Plan, mais vous pouvez également les appliquer en utilisant le menu contextuel :

  1. Cliquez avec le bouton droit sur la vignette de la page des événements, puis choisissez Gabarits > Principal dans le menu contextuel qui s’affiche.
Dans ce tutoriel, vous allez vous familiariser avec l’espace de travail d’Adobe Muse et apprendre à créer un site web complet sans écrire de code. Vous apprendrez également à créer un plan de site, à utiliser des gabarits et à comprendre les options de remplissage du navigateur dans Muse.
Utilisez le menu contextuel pour définir Principal comme gabarit de la page des événements.

  1. En utilisant votre méthode préférée (décrite dans les étapes 4 et 5), définissez Principal comme gabarit pour les trois pages restantes, à savoir Accueil, A propos et Visite.

Après avoir effectué cette modification, le texte bleu sous chaque vignette de page doit indiquer [Principal]. Si vous placez le curseur de la souris sur un texte bleu, une info-bulle apparaît pour afficher la hiérarchie des gabarits appliqués.

Dans ce tutoriel, vous allez vous familiariser avec l’espace de travail d’Adobe Muse et apprendre à créer un site web complet sans écrire de code. Vous apprendrez également à créer un plan de site, à utiliser des gabarits et à comprendre les options de remplissage du navigateur dans Muse.
Une info-bulle décrivant la hiérarchie s’affiche lorsque vous placez le pointeur de la souris sur le texte.

Dans cet exemple, la hiérarchie n’a qu’un seul niveau. En d’autres termes, le gabarit principal hérite du contenu du gabarit A. Mais sachez que vous pouvez créer une chaîne de gabarits, si nécessaire. Vous pouvez, par exemple, créer le gabarit En-tête qui ne contient que le contenu d’en-tête, puis créez un autre gabarit Pied de page qui hérite du contenu du gabarit En-tête, ainsi qu’un autre gabarit Principal qui hérite de tous les éléments qui figurent sur le gabarit Pied de page (qui contient également l’en-tête). Selon la conception du site et la modification éventuelle de certains éléments, vous pouvez créer les niveaux d’héritage pour le configurer dans plusieurs niveaux inférieurs. Compartimenter la conception de cette façon revient en quelque sorte à créer des symboles, car vous pouvez isoler certaines parties d’une conception, puis rechercher et modifier cette partie plus tard, en fonction des besoins.

Passez au didacticiel suivant, Création de votre premier site Web avec Muse - Partie 2, dans lequel vous allez apprendre à utiliser les widgets (fonctions de site interactives pré-intégrées que vous pouvez faire glisser sur vos pages). Les widgets permettent d’ajouter rapidement une fonctionnalité avancée à des pages sans écrire du code. Vous allez apprendre à modifier le fonctionnement et l’apparence des widgets pour personnaliser leur affichage dans la conception du site.

Ajout du contenu d’en-tête au gabarit principal

Maintenant que vous avez finalisé le pied de page en ajoutant un widget Menu au gabarit principal, vous allez ajouter la navigation de niveau supérieur. Suivez les étapes ci-dessous pour ajouter du contenu dans la zone d’en-tête.

  1. Dans le mode Plan, double-cliquez sur la vignette du gabarit principal pour ouvrir la page et commencer à la modifier dans le mode Conception (si elle n’est pas déjà ouverte).
  2. Utilisez l’outil Rectangle pour tracer un rectangle qui commence dans le coin supérieur gauche de la zone visible du navigateur et s’étend sur toute la largeur, vers le coin supérieur droit. Utilisez l’outil Sélection pour faire glisser les poignées situées au-dessus, à gauche et à droite du rectangle jusqu’à ce que le bord rouge s’affiche brièvement, indiquant que le rectangle est défini sur 100 % de la largeur, de la même façon que vous avez créé le pied de page.
fig_30_building
Tracez un rectangle qui s’étend sur toute la partie supérieure de la fenêtre de navigateur.

 

Après avoir fait glisser les poignées, la taille du rectangle doit correspondre à environ 1160 pixels de large sur 253 pixels de haut. La valeur X horizontale est -100, ce qui signifie que le coin supérieur gauche du rectangle est situé à 100 pixels de l’angle supérieur gauche de la page. La valeur Y est 0 (ce qui signifie que le coin supérieur gauche du rectangle correspond à l’angle supérieur gauche de la page verticalement). Si vous souhaitez définir ces valeurs avec précision, vous pouvez vérifier les champs dans le panneau Transformation ou dans le panneau de configuration, tandis que le rectangle est sélectionné.

  1. Définissez la largeur du contour à 0 et utilisez le menu Fond pour définir la couleur de fond sur Sans. Cliquez sur le dossier à droite de la section Image et parcourez l’arborescence pour sélectionner l’image nommée tile-header.png. Définissez le menu Ajustement sur Mosaïque horizontale.
fig_31_building
Utilisez le menu Ajustement pour étendre horizontalement l’image d’arrière-plan.

 

Bien que l’en-tête soit constitué d’un simple rectangle, l’image d’arrière-plan mosaïque horizontale qui le remplit crée l’impression qu’un rectangle gris existe au-dessus d’un rectangle noir.

  1. Choisissez Fichier > Importer, ou utilisez le raccourci clavier Commande-D (Mac) ou Ctrl-D (Windows) pour ouvrir la boîte de dialogue d’importation.
  2. Parcourez l’arborescence pour sélectionner le fichier nommé bg-ribbon.png situé dans le dossier des fichiers d’exemples. Cliquez sur Ouvrir pour le choisir et fermez la boîte de dialogue d’importation.
  3. Cliquez une fois dans le centre du rectangle d’en-tête, près du haut de la page. Ceci place une seule occurrence du fichier bg-ribbon.png avec ses dimensions d’origine.
  4. Utilisez l’outil de sélection pour aligner l’image de ruban orange afin qu’elle soit centrée à la verticale dans la partie supérieure de l’en-tête et s’étende sur toute la largeur de la page.
fig_32_building
L’image de ruban orange est positionnée de façon à être centrée dans l’en-tête.

 

L’image de ruban orange constituera l’arrière-plan du menu de niveau supérieur que vous allez ajouter dans la section suivante.

Duplication d’un gabarit

Le contenu de l’en-tête du gabarit principal est terminé. Même si vous pouvez simplement utiliser le gabarit principal pour chaque page du site, cette conception de site dispose de deux sections. La conception du gabarit principal sera finalement utilisée pour les pages d’accueil et de consultation. Un second gabarit, légèrement différent, sera utilisé pour les pages d’à propos, des événements et des aliments.

Pour dupliquer le gabarit principal, procédez comme suit :

  1. Dans le mode Plan, cliquez avec le bouton droit de la souris sur la vignette du gabarit principal.
  2. Dans le menu contextuel qui apparaît, choisissez Dupliquer la page.
fig_38_building
Utilisez le menu pour dupliquer le gabarit principal existant.

 

Un nouveau gabarit s’affiche à droite du gabarit principal, doté du nom par défaut : Copie principale. Puisque vous dupliquez le gabarit principal, le nouveau gabarit est aussi déjà basé sur la page Gabarit A.

  1. Cliquez deux fois sur le champ de nom au-dessous du gabarit principal que vous venez de créer et renommez-le : Premier plan.

Dans la section suivante, vous allez apprendre à définir la disposition des éléments dans un gabarit, de sorte qu’au lieu de toujours afficher les éléments au-dessous, ceux-ci puissent être affichés au-dessus des éléments de la page. A ce stade, il est temps d’enregistrer votre travail.

  1. Choisissez Fichier > Enregistrer le site.

La création d’une copie de gabarit présente plusieurs avantages. Vous pouvez notamment définir une partie du contenu pour qu’elle s’affiche au-dessus d’un autre contenu de page, comme si vous aviez sélectionné Disposition > Premier plan. Ce comportement de type « Premier plan » est souhaité pour les pages aliments et événements.

La possibilité de définir l’ordre de superposition des éléments du gabarit est une nouvelle fonctionnalité, disponible dans Muse 4.0. Auparavant, pour calquer des éléments communs du site au-dessus d’un autre contenu dans la mise en page, vous deviez placer des éléments d’en-tête ou de pied de page sur chaque page plutôt que sur un gabarit.

Définition des éléments de gabarit à afficher au premier plan

Dans Muse, l’interface du mode Conception vous permet de sélectionner un élément de page et de choisir l’option Objet > Premier plan, En avant, Arrière-plan ou En arrière pour qu’un élément s’affiche au-dessus ou au-dessous d’un autre élément de la page. (Vous pouvez également cliquer avec le bouton droit de la souris sur un élément ou sur un groupe, puis choisir Disposition > Premier plan, En avant, Arrière-plan ou En arrière pour définir l’ordre de superposition).

Lorsque vous créez un site avec une version précédente de Muse, par défaut, les éléments d’un gabarit s’affichent toujours derrière tous les éléments d’une page lorsque celle-ci est affichée. Cette accumulation d’arrière-plan était parfois problématique (selon la conception du site) car la seule manière de contourner ce problème consistait à copier et à coller des éléments, que vous auriez placés normalement sur un gabarit, sur toutes les pages du site où vous souhaitiez les voir s’afficher au-dessus.

La version de Muse permet de gérer la disposition des éléments sur les gabarits. Maintenant, au lieu de toujours tout afficher sur un gabarit derrière les éléments de page, vous pouvez sélectionner des éléments sur des gabarits et les configurer afin qu’ils s’affichent comme des éléments de premier plan. Les éléments situés sur un gabarit et configurés en tant qu’éléments de premier plan s’affichent au-dessus de tous les éléments de la page.

Cette nouvelle option est disponible via Objet > Déplacer vers > Gabarit de premier plan. Vous pouvez également cliquer avec le bouton droit de la souris sur n’importe quel élément du mode Conception lors de la modification d’un gabarit et choisir Déplacer vers > Gabarit de premier plan dans le menu contextuel qui s’affiche.

Dans cet exemple de projet, la conception nécessite que le contenu des pages d’accueil et de consultation utilise l’ordre de superposition par défaut (les éléments de page sont affichés au-dessus de l’en-tête dans le gabarit principal), alors que les pages d’à propos, des événements et des aliments ne l’utilisent pas.

Pour les pages aliments et consultation, vous devrez mettre à jour le gabarit de premier plan de sorte que le contenu de l’en-tête s’affiche au premier plan, au-dessus du contenu des pages lorsque celles-ci défilent. Procédez comme suit :

  1. Dans le mode Plan, double-cliquez sur la vignette du gabarit de premier plan pour ouvrir la page et commencer à la modifier dans le mode Conception (si elle n’est pas déjà ouverte).
  2. Utilisez l’outil de sélection pour sélectionner l’ensemble du contenu de l’en-tête, y compris le rectangle avec l’arrière-plan mosaïque, l’image de ruban orange positionnée, le widget de menu et le logo GIF animé au centre.
  3. L’ensemble du contenu de l’en-tête étant sélectionné, cliquez avec le bouton droit de la souris et choisissez Déplacer vers > Gabarit de premier plan. Remarquez que contrairement à la bordure bleue qui apparaît habituellement pour les objets sélectionnés, les éléments définis pour s’afficher au premier plan apparaissent avec une bordure rouge lorsqu’ils sont sélectionnés.
fig_39_building
Déplacez le contenu de l’en-tête vers le premier plan à l’aide du menu contextuel.

Ceci garantit que l’en-tête s’affiche au-dessus des éléments de page sur les pages où le gabarit de premier plan est appliqué.

  1. L’en-tête étant encore entièrement sélectionné, ancrez-le en haut de la page de sorte que même si la page défile, l’en-tête, lui, reste en place. Vous en apprendrez davantage sur l’ancrage des objets dans la partie 7, mais pour le moment cliquez sur la position d’ancrage souhaitée, au centre de la partie supérieure du panneau de configuration pour ancrer l’en-tête à cet endroit.
fig_40_building
Ancrez l’en-tête choisi en sélectionnant la position souhaitée, au centre de la partie supérieure.

  1. Cliquez sur le gabarit de premier plan et faites-le glisser sur la page des aliments, pour l’appliquer. Répétez deux fois cette étape, pour appliquer le gabarit de premier plan à la page des événements, puis à la page d’à propos.

Une fois cette modification effectuée, le texte bleu de l’étiquette affiche les mots [Premier plan], indiquant ainsi que les pages des aliments, des événements et d’à propos utilisent désormais le gabarit de premier plan. Si vous placez le pointeur de la souris sur l’étiquette [Premier plan], une info-bulle indique que le gabarit de premier plan est basé sur la page Gabarit A.

Lorsque vous créerez vos propres projets de site, vous pourrez faire des essais avec la nouvelle fonction Déplacer vers le premier plan pour définir sur les gabarits les éléments à afficher au-dessus. Plus loin, dans cette série de didacticiels, vous finaliserez la conception des pages aliments et événements et vous découvrirez comment le paramètre de premier plan permet d’afficher l’en-tête au-dessus des autres contenus de la page.

Dans la section suivante de ce didacticiel, Création de votre premier site Web avec Muse - Partie 4, vous découvrirez comment utiliser du code HTML intégré pour afficher un code copié depuis d’autres sites Web. Vous découvrirez également comment ajouter un widget Composition de cadre lumineux pour créer la page d’accueil.

Utilisation de plusieurs gabarits et incorporation d’animation

Dans cette section, vous allez apprendre à utiliser des gabarits et à afficher du contenu de site commun dans plusieurs gabarits pour assurer la cohérence entre les différentes sections d’un site. Vous allez également découvrir des stratégies pour déplacer des éléments depuis les gabarits, parce que dans certaines conceptions de site, il peut s’avérer utile de créer plusieurs gabarits contenant chacun des graphiques spécifiques (par exemple, un site avec quatre secteurs de couleurs différentes). Vous allez également découvrir comment déplacer des éléments qui sont généralement sur un gabarit vers une page individuelle spécifique, afin de créer des effets de conception, comme par exemple des éléments de calque superposés.

Modification du contenu du gabarit

Les objets placés sur un gabarit s’affichent en couches superposées, en-dessous de tout contenu importé sur une page individuelle. Par exemple, tout objet que vous importez dans l’en-tête ou le pied de page de la page d’accueil s’affiche en couches superposées au-dessus des arrière-plans placés dans l’en-tête et le pied de page du gabarit. Pour cette raison, vous pouvez rencontrer des situations dans lesquelles vous avez besoin de déplacer des éléments d’un gabarit pour les placer sur des pages individuelles, afin qu’ils s’affichent au-dessus d’autres éléments sur la page.

Le contenu ajouté à tout gabarit doit être modifié ultérieurement en ouvrant le gabarit. Si vous ouvrez une page qui est associée à un gabarit et essayez de modifier l’en-tête, le pied de page ou un autre contenu du gabarit, il semble être verrouillé. Pour modifier le contenu d’un gabarit, deux différentes stratégies s’offrent à vous :

  1. Double-cliquez sur la vignette de la page de gabarit dans la vue Plan, puis modifiez-en le contenu dans la vue Conception.

  2. Double-cliquez sur la vignette du gabarit dans la vue Plan pour ouvrir le gabarit dans la vue Conception. Sélectionnez les éléments à modifier (mais assurez-vous qu’ils se trouvent au-dessus des autres éléments en les plaçant sur une page du site) et choisissez la commande Edition > Couper ou utilisez les raccourcis clavier : Commande-X (Mac) ou Ctrl-X (Windows).

  3. Revenez sur la vue Plan et double-cliquez sur la page qui affiche désormais le contenu (qui figurait auparavant dans le gabarit). Choisissez la commande Edition > Coller sur place. Ceci garantit que le ou les élément(s) que vous coupez dans le gabarit sont positionnés au même emplacement sur une page normale. Si vous le souhaitez, vous pouvez ouvrir plusieurs pages et choisir Edition > Coller sur place pour répartir sur différentes pages de votre site du contenu qui était auparavant sur le gabarit.

Le cas échéant, vous pouvez aussi dupliquer un gabarit existant. Vous pouvez configurer votre site, pour que la plupart des pages utilisent un gabarit, alors qu’une page spéciale utilise une version similaire, dupliquée du gabarit (avec des éléments spécifiques copiés à partir de ce gabarit dupliqué sur la page spéciale du site). Pour en savoir plus sur la duplication de gabarits, consultez la sous-section suivante.

Une fois que l’objet figure sur vos pages individuelles et non sur le gabarit, vous pouvez modifier l’objet page par page, selon les besoins, et vous assurer qu’il s’affiche sur le dessus.

Dans cet exemple de projet, le site affiche actuellement le logo de Kevin’s Koffee Kart (une bicyclette rouge avec une bannière) directement au-dessus de la navigation du site dans l’en-tête. Le contenu de l’en-tête et du pied de page s’affiche automatiquement sur chaque page car, par défaut, la page d’accueil, ainsi que toutes les autres pages que vous créez, sont liées à la page Gabarit A, qui contient ce contenu. Dans la plupart des cas, vous pouvez choisir de construire des sites Web qui utilisent tous le même gabarit pour assurer la cohérence au sein du site.

Toutefois, ce site comporte un logo animé unique qui s’affiche uniquement sur la page d’accueil. Si vous examinez l’exemple du site Kevin’s Koffee Kart, vous remarquerez que sur la page d’accueil, le logo de bicyclette rouge s’anime une fois au chargement de la page, comme si la bicyclette roulait sur la page en venant de la gauche. Lorsque vous cliquez sur les autres pages, vous remarquez que l’animation ne se produit que sur la page d’accueil ; tous les logos sur les autres pages du site sont statiques.

Dans la sous-section suivante, vous allez apprendre à créer un double de gabarit et découvrir comment affecter des pages pour qu’elles utilisent un gabarit spécifique dans la vue Plan.

Duplication et suppression de gabarits

  1. Cliquez sur le lien Plan pour accéder à la vue Plan. Localisez la vignette Gabarit A située dans la partie inférieure de la vue Plan.

  2. Avec le curseur, survolez la vignette A-Master : vous pouvez alors voir les mêmes icônes plus (+) que celles affichées lors de l’ajout de nouvelles pages au plan du site. Cliquez sur le signe plus (+) à droite de la vignette A-Master. Vous pouvez utiliser cette technique chaque fois que vous souhaitez créer un nouveau gabarit à partir de zéro. Notez que la vignette est vide, ce qui signifie que le contenu ajouté à la page A-Master ne s’y trouve pas. Le nouveau gabarit est par défaut nommé B-Master, mais vous pouvez cliquer dans le champ au-dessous de la vignette pour le renommer à votre gré.

    Dans ce cas, plutôt que de créer un nouveau gabarit vierge, vous allez créer une copie du gabarit existant.

  3. Cliquez sur l’icône X dans le coin supérieur droit du gabarit B-Master pour le supprimer. (Si vous avez accidentellement supprimé un gabarit existant avec cette méthode, choisissez Edition > Annuler la suppression du gabarit pour le restaurer.)

  4. Cliquez avec le bouton droit de la souris sur la vignette Gabarit A, puis choisissez Dupliquer la page dans le menu contextuel qui apparaît. Une nouvelle vignette affichant une copie du gabarit apparaît, nommée A-Master Copie.

    fig_59_getting
    Dupliquer le gabarit Gabarit A dans la vue Plan.

  5. Cliquez sur le champ situé au-dessous de la vignette de la copie A-Master et renommez le gabarit dupliqué : MasterFlash. Vous allez utiliser cette page pour ajouter du contenu multimédia qui s’anime exclusivement sur la page d’accueil, tandis que toutes les autres pages continuent de pointer vers la page A-Master, qui affiche une version statique du logo dans l’en-tête.

  6. Cliquez avec le bouton droit de la souris sur la vignette de la page d’accueil. Dans le menu qui s’affiche, choisissez Gabarits > MasterFlash. Cette opération associe le gabarit MasterFlash à la page d’accueil.

    Remarque :

    Vous pouvez également faire glisser la vignette MasterFlash en haut de la vignette de la page d’accueil pour l’appliquer.

Une fois appliqué, le nom du gabarit MasterFlash s’affiche dans des crochets au-dessous de la vignette de la page d’accueil en vue Plan.

Si vous cliquez sur le bouton de prévisualisation, vous ne remarquez aucune différence dans la page d’accueil. Etant donné que MasterFlash est une copie du fichier Gabarit A, la page d’accueil s’affiche comme auparavant et le logo statique est affiché. Toutefois, dans la sous-section suivante, vous allez modifier le contenu du gabarit MasterFlash pour ajouter l’animation qui va se produire uniquement sur la page d’accueil.

Utiliser des gabarits dupliqués, quasi similaires (mais légèrement différents), est un excellent moyen de distinguer une section spécifique d’un site Web, ainsi que de créer une page d’accueil unique comme celle décrite pour ce projet.

Dans ce didacticiel, vous allez apprendre à utiliser les gabarits. Nous allons examiner et décomposer les mises en page de trois sites et découvrir comment vous pouvez obtenir des effets intéressants et établir la cohérence du site à l’aide d’éléments communs dans un gabarit.

Tout d’abord, qu’est-ce qu’un gabarit ? Un gabarit vous permet d’ajouter des éléments tels que des en-têtes, des pieds de page, des logos et des outils de navigation à plusieurs pages de vote site. Vous pouvez utiliser un gabarit pour votre site ou configurer plusieurs gabarits pour appliquer rapidement et systématiquement des styles uniques à différentes sections de votre site.

Par défaut, Muse crée pour vous une page d’accueil vierge, ainsi qu’un gabarit vierge lorsque vous créez un nouveau site. Ces pages sont le point de départ de tout site Web. Vous pouvez planifier le plan du site à l’aide de pages vierges, puis leur appliquer les gabarits ultérieurement, ou vous pouvez créer votre site Web en commençant par le gabarit et en l’appliquant à une seule page (la page d’accueil), puis en créant de nouvelles pages basées sur cette conception.

Décomposition de mises en page de site

Un excellent moyen d’apprendre de nouvelles stratégies de conception de site consiste à réviser les mises en page de différents gabarits. Dans cet article, nous allons examiner les mises en page de trois sites créés dans Muse et étudier leur construction.

Si vous souhaitez suivre l’explication en ayant les ressources de ces exemples de site sous les yeux, téléchargez les fichiers d’exemple, décompressez le fichier ZIP et cliquez deux fois sur chaque fichier .muse pour les ouvrir.

Alors que vous vérifiez chacun de ces exemples de sites, remarquez les fonctions utilisées pour créer des conceptions de sites facilitant la navigation et la découverte de leur contenu :

  • Configurer les propriétés du site pour définir les dimensions de toutes les pages
  • Utiliser des repères pour définir les zones d’en-tête et de pied de page dans le gabarit
  • Verrouiller des objets sur la fenêtre du navigateur, pour les positionner à l’extérieur de la mise en page
  • Définir les images d’arrière-plan des fonds pour le défilement ou les positions fixes pour créer des effets intéressants
  • Elargir les rectangles pour qu’ils s’affichent sur une largeur de 100 % et s’étendent sur la largeur du navigateur
  • Ajouter des widgets accordéon et des widgets de diaporama pour afficher du contenu de page interactif
  • Personnaliser et styliser les widgets de menu pour faciliter la navigation dans le site
  • Créer des liens de point d’ancrage pour accéder verticalement ou horizontalement à des sections spécifiques de la page
  • Coller du code depuis des sites tiers (code HTML incorporé) pour ajouter des fonctionnalités aux pages

Alors que vous visitez chacun des exemples de sites, essayez de faire défiler et de redimensionner la fenêtre de votre navigateur pour étudier le fonctionnement de l’exemple en direct. Ouvrez ensuite chaque fichier .muse dans Muse pour voir comment les gabarits sont utilisés pour standardiser les mises en page des sites et pour créer une expérience en ligne plus homogène.

Exemple 1 : Happy Valley Adventure

fig01.master.b720

Dans le premier exemple, les graphiques de pied de page sont verrouillés en bas de la fenêtre du navigateur. De plus, l’arrière-plan de pied de page est défini sur une largeur de 100 % pour s’étendre horizontalement sur toute la largeur au bas de la page. Le contenu de page le plus long défile en arrière-plan du pied de page pour créer un effet de dégradé de ciel. Lorsque vous cliquez sur les liens de point d’ancrage sur le côté gauche, la page se déplace verticalement jusqu’à la section correspondante. Des éléments graphiques semi-transparents et un ordre d’empilement stratégique aident à émuler une expérience semblable à un vol à bord d’un ballon dirigeable.

Lorsque vous consultez le fichier .muse de ce site, remarquez les points suivants :

Dans le gabarit, une série de rectangles remplis de dégradés fournissent la toile de fond du contenu plus long de la page.

  • La page d’accueil comporte un graphique de pied de page dont l’image d’arrière-plan en mosaïque horizontale est définie pour s’étendre sur une largeur de 100 % et est fixée au bas de la fenêtre du navigateur. Un deuxième graphique de pied de page (la montagne) est centré et verrouillé au bas du navigateur. Grâce à l’option Disposition > Premier plan, ce graphique s’affiche devant l’autre graphique en mosaïque. Cette stratégie convient à toute taille de moniteur.
  • Les liens de navigation sur le côté gauche permettent d’accéder à des balises d’ancrage qui sont ajoutées à la longue page orientée verticalement. Lorsque les visiteurs cliquent sur les liens, la page défile pour afficher le contenu correspondant. La conception paraît équilibrée et unifiée lorsque les nouvelles sections du site sont révélées.
  • La section des informations de contact de la page d’accueil comprend du code HTML incorporé affichant des éléments de formulaire de contact pour faciliter la communication avec les visiteurs, ainsi que la planification des prochaines aventures.

Exemple 2 : Kevin’s Koffee·Kart

fig02.master.b720
Ce site multiniveau utilise un widget de menu et des fonctionnalités de code HTML incorporé.

La page d’accueil du site de Kevin’s Koffee Kart comprend de l’animation Flash dans l’en-tête et des représentations graphiques de nuages verrouillées. Lorsque vous utilisez les barres de défilement pour parcourir la page, vous remarquez que l’image d’arrière-plan est fixe et ne défile pas, mais que le contenu de la page défile au-dessus de celle-ci. Un diaporama s’exécute automatiquement, en parcourant les images sous un flux Twitter au format HTML incorporé.

La barre de menu dans l’en-tête a été créée à l’aide d’un widget de menu horizontal pour permettre des boutons de navigation de site permanents qui sont automatiquement mis à jour lorsque vous ajoutez de nouvelles pages. Dans cet exemple, le widget de menu est configuré pour afficher à la fois le niveau supérieur et les sous-niveaux des pages.

En interagissant avec le menu, vous pouvez observer le chargement de chaque page alors que vous cliquez sur les boutons. L’en-tête et le pied de page sont standard sur toutes les pages, mais les hauteurs des pages varient en fonction du contenu. Le pied de page marron est composé de deux rectangles dont la largeur est définie sur 100 % pour s’étendre sur toute la largeur de la fenêtre du navigateur, ce qui renforce la conformité de chaque page.

Les conventions de conception suivantes ont été utilisées pour créer le site Kevin’s Koffee Kart :

  • Ce site intègre deux gabarits similaires : celui sans le média Flash est appliqué à la plupart des pages du site, tandis que le deuxième gabarit comportant l’animation Flash n’est appliqué qu’à la page d’accueil. Les deux gabarits comportent des pieds de page dont la largeur est définie à 100 %, ils sont en outre ornés de bordures décoratives transparentes et utilisent le même widget de menu à des fins de cohérence. Après la création du premier gabarit, les éléments sont copiés puis collés en place dans le deuxième gabarit pour assurer que tous les éléments sont parfaitement alignés.
  • Les pages sont organisées en vue Plan pour créer les sections du site de niveau supérieur et de sous-niveaux, ce qui est reflété dans les éléments déroulants du widget de menu.
  • L’image de carte en arrière-plan utilisée comme fond du navigateur est définie pour s’afficher à sa taille originale et non en mosaïque. Elle est centrée et définie pour ne pas défiler sous le contenu de la page.
  • Le fond d’arrière-plan de la page est de couleur blanc uni avec un léger effet de transparence pour rendre visible l’image de la carte d’arrière-plan.
  • La page d’accueil contient deux images de nuages semi-transparents qui sont verrouillées sur le navigateur. Faites défiler la page verticalement pour observer que les éléments verrouillés ne se déplacent pas et restent dans leurs positions lorsque vous redimensionnez la fenêtre du navigateur.
  • La page d’accueil utilise du code HTML incorporé pour afficher le contenu du flux Twitter en direct.
  • La page The Koffee comporte un widget accordéon qui développe et réduit les panneaux lorsque l’utilisateur clique dessus pour afficher davantage de contenu dans une zone compacte de la page.
  • La page Origins (« Origines ») comporte un widget de diaporama à vignettes pour afficher une galerie de photos interactive. La page Preparation (« Préparation ») utilise la navigation de la balise d’ancrage pour accéder à chaque section de la page, et la page Kart Map inclut du code HTML incorporé pour afficher une carte Google Latitude en direct, basée sur l’emplacement actuel du téléphone mobile utilisé pour ce compte.

Exemple 3 : More than Square

fig03.master.b720
Une superposition de grands graphiques verrouillés encadre le contenu défilant de la page.

Lorsque vous affichez l’exemple final, remarquez que les graphiques des bâtiments sont verrouillés dans les coins supérieur droit et inférieur gauche pour encadrer le contenu de la page. Le bâtiment dans le coin supérieur droit est structuré en avant pour chevaucher le contenu de la page, tandis que le bâtiment dans le coin inférieur gauche s’affiche sous la page.

Le contenu de la page est centré, semi-transparent et se distingue des éléments architecturaux grâce à ses coins arrondis. Le contenu de page défile verticalement et la hauteur varie alors que vous cliquez sur les pages. Les liens de réseaux sociaux (Twitter, Facebook et YouTube) demeurent en permanence sur le côté gauche de la page pour promouvoir la liaison croisée et transmettent une conception asymétrique homogène à l’ensemble du site.

La page d’accueil présente une galerie de photos avec des boutons de navigation de type Suivant et Précédent, mais qui est également configurée pour afficher lentement les diapositives si le visiteur choisit de ne pas cliquer sur les boutons. La page How to Get Here (« Comment nous trouver ») comprend une carte interactive créée à l’aide de code HTML incorporé qui est copié depuis Google Maps.

Lorsque vous étudiez le fichier .muse source de cet exemple, notez les points suivants :

Dans cet exemple, presque tous les éléments de page communs figurent dans le gabarit. Cette stratégie facilite la mise à jour du site et la modification du contenu des pages individuelles.

Le gabarit contient en guise d’image de pied de page, un graphique d’arrière-plan qui ne défile pas et qui est verrouillé dans la partie inférieure gauche du navigateur. Le gabarit contient également la conception de page semi-transparente et à coins arrondis avec la navigation de site.

Toutes les pages du site présentent un graphique verrouillé dans le coin supérieur droit qui est organisé pour s’afficher au-dessus du contenu de la page afin de créer l’illusion de perspective réalisée grâce à l’orientation en contre-plongée des images des bâtiments.

Muse est un outil de conception intuitif qui vous permet de transmettre vos conceptions au Web. Le positionnement créatif des éléments dans le gabarit et l’affichage unique de contenu sur chaque page vous permettent des mises en formes saisissantes. En matière de création innovatrice de sites pour vos clients, vous n’êtes limité que par votre imagination.

Pour plus de conseils sur l’utilisation de Muse, rendez-vous sur la page Aide et didacticiels ou sur la page Muse Events (Evénements Muse) pour accéder à des webinaires en temps réel ou enregistrés.

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