Principes de base sur l’espace de travail Adobe Muse

L’espace de travail Adobe Muse se compose de plusieurs éléments, comme des panneaux, barres d’outils et fenêtres. Un espace de travail désigne l’organisation de ces éléments. Adobe Muse permet de personnaliser l’espace de travail en fonction de vos besoins de conception. Vous pouvez détacher et réorganiser les panneaux, et ouvrir plusieurs fenêtres du mode Conception pour une conception côte à côte. Vous pouvez également glisser-déposer des éléments de conception dans plusieurs fenêtres ou mises en page. Cela peut s’avérer utile lorsque vous travaillez sur des mises en page pour poste de travail et appareils mobiles simultanément, afin de réutiliser du contenu commun dans plusieurs mises en page.

L’interface utilisateur d’Adobe Muse est optimisée pour l’affichage haute résolution sur les appareils qui prennent en charge HiDPI. L’aspect HiDPI d’Adobe Muse rend les panneaux, outils et autres éléments de l’interface utilisateur plus vifs et plus nets.

Bien que la disposition de l’espace de travail par défaut varie selon les applications Creative Cloud, la manipulation des éléments est pratiquement identique dans chacune d’elles.

Les outils et autres éléments de l’espace de travail Adobe Muse sont activés selon l’affichage en cours. Lorsque vous travaillez avec Adobe Muse, vous devez basculer entre les différentes vues. Adobe Muse dispose des vues Plan, Conception, Aperçu, Publication et Gérer pour faciliter les différentes étapes de la conception web.

Adobe Muse affiche la vue Plan lors de la création d’un site ou de l’ouverture d’un site existant. La vue Plan vous permet de créer des plans de site pour vos sites web en définissant la structure hiérarchique de votre page. Vous pouvez également utiliser la vue Plan pour associer des pages individuelles de votre site web aux gabarits.

• (A) Fenêtres de document sous forme d’onglets : la fenêtre de document affiche le fichier sur lequel vous travaillez. Les fenêtres de document peuvent se présenter sous forme d’onglets ou être juxtaposées pour faciliter l’accès et permettre une conception côte à côte.
• (B) Affichage horizontal de la carte de site : affiche la carte de site horizontalement. Il s’agit du comportement par défaut dans Adobe Muse.
• (C) Affichage vertical sitemap de la carte du site : affiche la carte de site verticalement. Ceci s’avère particulièrement utile avec les sites comportant un grand nombre de pages et des pages enfant.
  
• (D) Dispositions de l’espace de travail : basculez entre les différentes dispositions de l’espace de travail (modes) lorsque vous travaillez avec Adobe Muse.
• (E) Carte du site : zone permettant de créer une carte de site pour votre site web. Ajoutez ou supprimez des pages, et définissez la hiérarchie de votre site web.
• (F) Gabarits : utilisez cette zone pour créer des gabarits supplémentaires pour votre site ou actualiser les gabarits existants.
• (G) Panneau Outils : le panneau Outils vous permet de sélectionner et de travailler avec différents outils. Le panneau Contrôle affiche des options relatives à l’outil sélectionné.

Le mode Conception est la vue la plus importante et est essentielle pour travailler avec Adobe Muse. Le mode Conception propose des outils, des widgets et des fonctionnalités permettant de concevoir des sites web riches et complexes sans avoir à écrire de code.

Il contient la zone de travail de la page web sur laquelle vous pouvez concevoir vos pages à l’aide de divers outils, widgets, ainsi que d’autres fonctionnalités de conception proposées par Adobe Muse. La zone de travail de la page web contient des repères et des règles pour vous aider à utiliser les emplacements de votre page web de manière optimale.

Par défaut, les panneaux sont organisés à l’extrémité droite du mode Conception. Toutefois, Adobe Muse permet d’ancrer et de détacher les panneaux, et de les réorganiser selon vos besoins.

La barre d’outils propose des outils que vous pouvez sélectionner pour appliquer le style de votre page, comme par exemple Arrière-plan, Fond du navigateur, Contour et Effets. La barre d’outils se compose également d’outils supplémentaires selon le panneau sélectionné.

La barre d’application contient également des options pour contrôler la vue dans Adobe Muse.

• (A) Indicateur de sélection : affiche la sélection actuelle sur la zone de travail de la page web. 
• (B) Menus déroulants : la barre d’application occupe la partie supérieure et contient un sélecteur de mode, des menus, ainsi que des commandes de vue.
• (C) Panneau de configuration : contient les outils qui vous permettent d’appliquer le style et modifier l’aspect de votre site web comme les contours, les fonds et les effets.
• (D) Dispositions de l’espace de travail : basculez entre les différentes dispositions d’espace de travail lorsque vous travaillez avec Adobe Muse.
• (E) Panneaux : permettent d’accéder et d’utiliser les fonctionnalités clés dans Adobe Muse.
• (F) Règles : permet de définir des repères et des positions appropriées. 
• (G) Guides : indique le haut et le bas de la page web et des navigateurs. Vous pouvez utiliser des repères efficacement pour définir les zones d’en-tête et de pied de page de votre site web.
• (H) Panneau Outils : permet d’accéder et de travailler avec différents outils tels que Sélection, Rectangle, Main, etc.

Vous pouvez utiliser le mode Aperçu pour tester votre site web. L’aspect de votre site web en mode Aperçu ressemble fortement à l’aspect qu’il aura dans les dernières versions de navigateurs. Le mode Aperçu s’affiche comme une fenêtre de document et peut être flottant ou juxtaposé dans l’espace de travail Adobe Muse. Vous pouvez actualiser l’aperçu pour afficher les modifications apportées à votre site web.

• (A) Dispositions de l’espace de travail : basculez entre différentes dispositions de l’espace de travail (modes) lorsque vous travaillez avec Adobe Muse.
• (B) Actualisation : cliquez sur le bouton Actualiser pour recharger l’aperçu de votre site web.
• (C) Aperçu : la zone d’aperçu affiche la dernière modification mise à jour de votre site web.

Le mode Publication vous permet de publier votre site web sur Business Catalyst. La sélection du mode Publication affiche la boîte de dialogue Publication. Dans la boîte de dialogue Paramètres de publication, spécifiez ce qui suit :

• Nom du site : donnez un nom significatif à votre site. Adobe Muse propose un nom de domaine pour votre site web basé sur le nom du site. Toutefois, vous pouvez choisir d’ignorer la suggestion.
• Publier vers : vous pouvez sélectionner un site web existant dans la liste déroulante Publier vers. Cela vous permet de publier un site web existant sur Business Catalyst.
• URL : indiquez une adresse URL unique pour votre site web.
• Centre de données : Adobe Muse détecte l’emplacement actuel de l’ordinateur et sélectionne automatiquement le centre de données le plus proche où les fichiers de votre site vont être hébergés. Toutefois, si votre client se trouve dans un autre pays, vous pouvez choisir le centre de données le plus proche de l’emplacement de votre client.
  

Le menu Partager dans Adobe Muse vous permet de facilement partager l’URL de votre site publié. Vous pouvez partager l’URL de votre site web mis en service ou l’URL utilisée pour In-Browser Editing à l’aide du menu Partager.  

Après avoir publié votre site web, cliquez sur Partager. Une boîte de dialogue avec le lien vers le site mis en service et In-Browser Editing apparaît.

Pour chaque site web, deux URL distinctes sont générées : l’une pour le site mis en service, l’autre pour In-Browser Editing.

Selon l’URL que vous souhaitez partager, cliquez sur l’option Copier le lien appropriée. L’URL est copiée dans le presse-papiers. Vous pouvez ensuite envoyer ces URL par courrier électronique ou d’autres voies afin de les partager avec les autres personnes concernées.

Le mode Gérer vous permet de gérer et mettre à jour des sites web sur Business Catalyst. Vous pouvez utiliser le mode Gérer si vous utilisez Adobe Business Catalyst comme fournisseur de services d’hébergement tiers. Lorsque vous sélectionnez le mode Gérer, Adobe Muse vous renvoie vers http://businesscatalyst.com/. Connectez-vous à l’aide de vos informations d’identification Creative Cloud pour modifier votre site web. Pour plus d’informations, voir Aide de Business Catalyst.

Lorsque vous travaillez avec des pages web et plusieurs sites, Adobe Muse crée des onglets pour toutes les fenêtres ouvertes. Vous pouvez accéder aux pages proposées en sélectionnant simplement la fenêtre.

• Pour modifier l’ordre des onglets de la fenêtre de document, faites glisser un onglet de la fenêtre à l’emplacement voulu dans le groupe.
• Pour détacher une fenêtre de document d’un groupe de fenêtres, faites glisser l’onglet de cette fenêtre hors du groupe ou cliquez avec le bouton droit sur l’onglet et sélectionnez Fenêtre flottante.
• Pour juxtaposer les fenêtres de document pour une conception côte à côte, sélectionnez Fenêtre > Disposition > Mosaïque.
• Pour ancrer une fenêtre de document à un groupe de fenêtres de document distinct, faites glisser cette fenêtre dans le groupe.
• Pour créer des groupes de documents empilés ou juxtaposés, faites glisser la fenêtre vers l’une des zones de largage situées en haut, en bas ou sur les côtés d’une autre fenêtre.
• Dans un groupe à onglets, pour passer à un autre document lors du glissement d’une sélection, faites glisser et maintenez cette sélection sur l’onglet du document souhaité pendant un moment.

Adobe Muse permet de réorganiser les fenêtres de document en les juxtaposant dans l’espace de travail. La juxtaposition des fenêtres de document est un moyen simple de travailler avec plusieurs mises en page pour la comparaison et la conception côte à côte. Vous pouvez également copier le contenu d’une page sur plusieurs fenêtres de document juxtaposées. La juxtaposition des fenêtres de document est particulièrement utile lorsque vous travaillez sur plusieurs mises en page. Vous pouvez concevoir une fois, puis copiez simplement le contenu dans les mises en page.

Pour juxtaposer les fenêtres de document, sélectionnez Fenêtre > Disposition > Mosaïque.

Pour réinitialiser les fenêtres de document à leur vue par défaut, sélectionnez Fenêtre > Disposition >Tout regrouper sur le site.

Adobe Muse permet de réutiliser facilement du contenu commun à plusieurs pages et dispositions. Lorsque vous utilisez Adobe Muse, il est courant d’utiliser l’affichage en mosaïque ou de faire flotter les fenêtres de document avec onglets. Une pratique courante de conception web consiste à réutiliser des éléments de conception sur plusieurs pages web et dispositions afin de maintenir un aspect uniforme du site web. Adobe Muse permet de faire glisser les éléments de conception communs tels que des logos, du texte, des en-têtes, des images d’arrière-plan, etc. sur plusieurs pages et dispositions. 

Un dock est un ensemble de panneaux ou de groupes de panneaux affichés ensemble en position verticale. Pour ancrer et détacher des panneaux, insérez-les dans le dock et déplacez-les hors du dock.

• Pour ancrer un panneau, cliquez sur l’onglet correspondant et faites-le glisser dans le dock, au-dessus, sous ou entre d’autres panneaux.

• Pour ancrer un groupe de panneaux, cliquez sur sa barre de titre (barre vide de couleur unie située au-dessus des onglets) et faites-le glisser dans le dock.

• Pour supprimer un panneau ou un groupe de panneaux, faites-le glisser en dehors du dock en cliquant sur l’onglet ou la barre de titre. Vous pouvez faire glisser l’élément vers un autre dock ou le rendre flottant.

Lorsque vous déplacez des panneaux, des zones de largage en surbrillance bleue apparaissent : il s’agit des zones dans lesquelles vous pouvez déplacer le panneau. Vous pouvez, par exemple, déplacer un panneau vers le haut ou vers le bas en le faisant glisser sur la fine zone de largage bleue située au-dessus ou sous un autre panneau. Si vous faites glisser le panneau vers un emplacement autre qu’une zone de largage, ce dernier flotte dans l’espace de travail.

• Pour déplacer un panneau, faites-le glisser en cliquant sur son onglet.

• Pour déplacer un groupe de panneaux, faites glisser la barre de titre.

Lorsque vous supprimez tous les panneaux d’un dock, ce dernier disparaît. Vous pouvez créer un dock en déplaçant les panneaux vers le bord droit de l’espace de travail jusqu’à ce qu’une zone de largage soit visible.

• Pour supprimer un panneau, cliquez sur son onglet avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrôle (Mac), puis sélectionnez l’option Fermer ; vous pouvez également le désélectionner dans le menu Fenêtre.

• Pour ajouter un panneau, sélectionnez-le dans le menu Fenêtre et ancrez-le à l’emplacement de votre choix.

• Pour déplacer un panneau dans un groupe, faites glisser son onglet vers la zone de largage en surbrillance située dans le groupe.

• Pour réorganiser les panneaux d’un groupe, faites glisser l’onglet du panneau de votre choix vers son nouvel emplacement. 
• Pour rendre un panneau flottant, faites-le glisser en dehors du groupe au moyen de son onglet.
• Pour déplacer un groupe, faites glisser la barre de titre (zone située au-dessus des onglets).
• Pour fermer un groupe de panneaux, cliquez sur la barre de titre du groupe de panneaux et choisissez Fermer le groupe d’onglets.

Lorsque vous faites sortir un panneau de son dock et que vous le placez en dehors de toute zone de largage, ce panneau flotte dans l’espace de travail. Un panneau flottant peut être placé à n’importe quel endroit dans l’espace de travail. Vous pouvez empiler des panneaux ou groupes de panneaux flottants de sorte qu’ils se comportent comme une seule entité lorsque vous faites glisser à l’aide de la barre de titre supérieure.

• Pour empiler des panneaux flottants, cliquez sur un onglet pour faire glisser le panneau correspondant vers la zone de largage située au bas d’un autre panneau.

• Pour modifier l’ordre d’empilage, cliquez sur un onglet afin de faire glisser le panneau correspondant vers le haut ou vers le bas.

• Pour rendre un panneau ou groupe de panneaux de la pile flottant, déplacez-le hors de la pile au moyen de son onglet ou de sa barre de titre.

• Pour réduire ou agrandir un panneau, un groupe de panneaux ou une pile de panneaux, cliquez deux fois sur un onglet. Vous pouvez également double-cliquer sur la zone d’onglets (l’espace vide situé à côté des onglets).

• Pour redimensionner un panneau, faites glisser l’un de ses côtés. Cette méthode de redimensionnement ne fonctionne pas toujours, notamment avec le panneau Couleur de Photoshop.

Vous pouvez réduire des panneaux à la taille d’icônes afin de limiter l’encombrement de l’espace de travail. Dans certains cas, les panneaux sont réduits de la sorte dans l’espace de travail par défaut.

• Pour réduire ou développer toutes les icônes de panneau d’une colonne, cliquez sur la double flèche située dans la partie supérieure du dock.
• Pour développer une seule icône de panneau, cliquez sur cette dernière.
• Pour redimensionner les icônes de panneau afin de voir les icônes uniquement (et non les libellés), réglez la largeur du dock jusqu’à ce que le texte ne soit plus visible. Pour afficher à nouveau le texte, augmentez la largeur du dock.
• Pour réduire à la taille d’une icône un panneau qui a été développé, cliquez sur son onglet, sur son icône ou sur la double flèche affichée dans sa barre de titre.

• Pour ajouter un panneau flottant ou un groupe de panneaux à un dock d’icônes, faites-le glisser au moyen de son onglet ou de sa barre de titre (les panneaux sont réduits automatiquement à la taille d’icônes lorsque vous les ajoutez à un dock d’icônes).

• Pour déplacer une icône de panneau (ou un groupe d’icônes de panneau), faites-la glisser. Vous pouvez déplacer des icônes de panneau vers le haut et vers le bas dans le dock, dans d’autres docks (elles apparaissent dans le style du panneau de ce dock) ou en dehors du dock (elles apparaissent sous la forme d’icônes flottantes).

Adobe Muse permet de définir des thèmes de couleur pour l’espace de travail. Vous pouvez utiliser parmi 4 thèmes de couleur disponibles dans Adobe Muse.

Les thèmes de l’interface utilisateur foncée permettent de se concentrer uniquement sur la conception, en raison du contraste entre l’interface utilisateur et la zone de travail de la page web.

Pour sélectionner un thème de couleur, procédez comme suit :

1. Dans Adobe Muse, sélectionnez Edition > Préférences.
2. Dans la boîte de dialogue Préférences, sélectionnez un thème de couleur.

3. Cliquez sur Ok.

Adobe Muse permet de rechercher et de remplacer du texte dans une page ou sur le site entier.

1. Dans Adobe Muse, sélectionnez Edition > Rechercher et remplacer.
2. Dans la boîte de dialogue Rechercher et remplacer, spécifiez :
   • Rechercher : entrez le texte à rechercher dans une page ou un site.
   • Remplacer : entrez le texte de remplacement du texte saisi dans la zone de texte Rechercher.
   • Parcourir : choisissez de rechercher sur une page ou sur le site entier.
   • Respecter la casse : si l’option Respecter la casse est sélectionnée, Adobe Muse recherche uniquement les mots qui correspondent à la casse du mot ou de l’expression entrée dans la zone de texte Rechercher.
   • Mot entier : si l’option Mot entier est sélectionnée, Adobe Muse recherche le mot entier ou l’expression complète saisie dans la zone de texte Rechercher.
   • En arrière : si l’option En arrière est sélectionnée, Adobe Muse inverse le sens de la recherche.
3. Cliquez sur Rechercher.

1. Dans Adobe Muse, sélectionnez Edition > Rechercher et remplacer.
2. Dans la boîte de dialogue Rechercher et remplacer, spécifiez :
   • Rechercher : entrez le texte à rechercher dans une page ou un site.
   • Remplacer : entrez le texte de remplacement du texte saisi dans la zone de texte Rechercher.
   • Parcourir : choisissez de rechercher sur une page ou sur le site entier.
   • Respecter la casse : si l’option Respecter la casse est sélectionnée, Adobe Muse recherche uniquement les mots qui correspondent à la casse du mot ou de l’expression entrée dans la zone de texte Rechercher.
   • Mot entier : si l’option Mot entier est sélectionnée, Adobe Muse recherche le mot entier ou l’expression complète saisi dans la zone de texte Rechercher.
   • En arrière : si l’option En arrière est sélectionnée, Adobe Muse inverse le sens de la recherche.
3. Cliquez sur Remplacer. Cliquez sur Remplacer/Rechercher pour remplacer une occurrence immédiate du texte et poursuivre la recherche. Cliquez sur Tout remplacer pour remplacer toutes les occurrences du texte dans une page ou l’ensemble du site.

Lorsque vous travaillez avec Adobe Muse, des avertissements sont générés pour les tâches potentiellement incorrectes ou qui ne donneront pas les résultats attendus. Ces avertissements sont répertoriés dans le panneau Avertissements. Lors de la conception de votre site web, il est recommandé d’avoir le panneau Avertissements ouvert.

Pour afficher le panneau Avertissements, sélectionnez Fenêtres > Avertissements.