Prise en main d’Adobe Muse. Comprendre les fichiers .muse, savoir configurer les propriétés de page, ajouter des Favicons et bien plus encore.

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.

Prise en main d’Adobe Muse

L’espace de travail d’Adobe Muse se lance dès que vous êtes connecté. Vous pouvez voir l’écran de bienvenue d’Adobe Muse. Effectuez l’une des actions suivantes :

  • Cliquez sur Créer pour créer un nouveau site.
  • Cliquez sur Ouvrir, puis recherchez un fichier .muse existant sur votre ordinateur.
Ecran de bienvenue d’Adobe Muse
Utilisez l’écran de bienvenue pour créer un nouveau site.

Lorsque vous créez un nouveau site, la boîte de dialogue Nouveau site s’affiche. Sélectionnez Largeur fluide pour activer la mise en page adaptative, ou Largeur fixe pour choisir une variante de mise en page. Elle contient des champs qui vous permettent de définir la largeur de page maximale, les colonnes et la valeur de gouttière.

Boîte de dialogue Nouveau site pour créer un nouveau site web.
Sélectionnez Fichier > Nouveau site pour créer un nouveau site.

Cliquez sur Paramètres avancés pour définir les dimensions, les marges et les colonnes, ainsi que les valeurs des marges intérieures pour votre site (numériquement, en pixels). Vous pouvez également choisir la résolution et la langue à partir de cette fenêtre.

Vous pouvez toujours mettre à jour ces paramètres plus tard en choisissant la commande Fichier > Propriétés du site.

Boîte de dialogue Propriétés du site pour définir les propriétés du site.
Définissez les propriétés du site dans la boîte de dialogue Nouveau site.

Cliquez sur OK pour fermer la boîte de dialogue lorsque vous avez terminé.

Par défaut, la vue Plan s’ouvre avec deux éléments déjà créés. La page d’accueil dans le coin supérieur gauche est la page qui se charge en premier lorsqu’un utilisateur visite votre site en direct. La page Gabarit-A ci-dessous est comme un modèle. Placez sur la page Gabarit-A tous les éléments que vous souhaitez afficher sur toutes les pages du site. De cette façon, les éléments communs de site peuvent être mis à jour à partir d’un seul emplacement central.

NewWebsite
Adobe Muse génère automatiquement une page d’accueil et un gabarit.

Le long de la partie supérieure, des liens indiquent les différentes sections de l’interface : Plan, Conception et Publication.

Pour en savoir plus sur l’utilisation de l’interface et sur la conception d’un site à l’aide d’Adobe Muse, reportez-vous aux sections Prise en main d’Adobe Muse et Création de votre premier site web à l’aide d’Adobe Muse.

Présentation des fichiers .muse

Lors de la conception de sites web dans d’autres programmes, comme Dreamweaver par exemple, vous créez un dossier contenant les sous-dossiers et les fichiers de tout le contenu de votre site sur votre ordinateur. Il peut être difficile de gérer un ensemble d’éléments et de vous assurer qu’aucun lien n’est rompu dans le site.

Lorsque vous créez un nouveau site dans Adobe Muse et choisissez Fichier > Enregistrer, vous créez un seul fichier .muse. Ce processus est similaire à la création d’un fichier PSD dans Photoshop, qui peut contenir n’importe quel nombre de calques, de graphiques et de ressources liées. Ce fichier .muse unique est le seul fichier dont vous avez besoin pour concevoir un site, car il contient l’ensemble des images, des liens, du code et des fichiers du site. Si vous souhaitez travailler avec quelqu’un d’autre sur la conception du site, vous pouvez envoyer à votre collègue une copie du fichier .muse que vous avez créé, de sorte qu’il puisse l’ouvrir, le modifier et publier les modifications qu’il a apportées.

En général, il est préférable d’autoriser une seule personne à travailler sur le fichier .muse à la fois. Une fois que vous avez terminé d’ajouter votre contenu dans ce site, vous pouvez le publier et envoyer à vos collègues le fichier .muse, pour leur permettre de le modifier et d’y ajouter du contenu supplémentaire. Lorsqu’ils ont terminé, ils peuvent vous renvoyer le fichier .muse mis à jour (qui inclut leurs modifications). Ainsi, vous prenez soin de ne pas écraser le travail des autres.

Vous pouvez également créer un fichier .muse et publier un site temporaire. Puis, vous pouvez partager le fichier .muse avec vos collègues. Ils peuvent l’ouvrir, choisir Fichier > Enregistrer sous, puis apporter les modifications nécessaires à la copie qu’ils ont, alors que vous continuez à travailler sur votre copie, en étant conscient qu’ils vont publier leurs propres nouveaux sites temporaires. Toutefois, si vous utilisez ce workflow, les deux itérations du site ne sont pas synchronisées : votre version du fichier .muse n’est pas mise à jour pour refléter les modifications que vos collègues ont apportées, et vice-versa.

Chaque fois que vous souhaitez apporter d’importantes modifications à un site web, il est fortement recommandé de toujours ouvrir le fichier .muse, puis de choisir la commande Fichier > Enregistrer sous. Créez un nouveau fichier .muse avec un nom légèrement différent, puis conservez tous vos fichiers .muse dans un seul dossier sur votre ordinateur. Ainsi, si le client préfère la version d’origine de ce site, vous pouvez toujours ouvrir la version précédente du fichier .muse qui comprend une ancienne conception et la publier de nouveau, pour rétablir la version antérieure du site.

Il est également recommandé d’enregistrer régulièrement votre fichier .muse. Au cas où Adobe Muse se bloque, la version restaurée du fichier .muse avec vos dernières modifications est généralement présentée lorsque vous relancez Adobe Muse. Si cela se produit, enregistrez immédiatement la version restaurée du fichier .muse, puis recommencez à le travailler. Assurez-vous d’enregistrer les fichiers .muse que vous créez dans un endroit sûr et sauvegardez-les, car chaque fichier contient un site web entier. Si vous perdez le fichier .muse et que vous ne disposez pas d’une copie de sauvegarde, vous ne pouvez pas reconstruire un fichier .muse en téléchargeant les fichiers de site qui sont hébergés sur le serveur.

De nombreux concepteurs web préfèrent enregistrer leurs fichiers .muse sous des noms descriptifs, tels que mon_site_v1.muse et mon_site_v2.muse. Vous pouvez également ajouter la date au nom du fichier .muse pour vous permettre de facilement identifier la version antérieure, par exemple mon_site_13-4-2012.muse et mon_site_30-4-2012.muse. Nommez les fichiers de la manière qui vous convient le mieux.

Définition des propriétés du site lors de la création d’un nouveau site dans Adobe Muse

Procédez comme suit pour créer un nouveau site et définir ses propriétés :

  1. Dans l’écran de bienvenue, choisissez Créer > Site. Cliquez sur Largeur fluide pour une mise en page adaptative, ou sur Largeur fixe pour une variante de mise en page.

  2. Dans la boîte de dialogue Nouveau site qui s’affiche, définissez la largeur de la page à 950 et la hauteur à 800. Définissez les colonnes à 3 et la gouttière à 20. Dans la zone Marges, définissez les quatre valeurs à 50. Définissez les valeurs de marge intérieure sur 36.

    Définissez les attributs du site de la boîte de dialogue Propriétés du site.
    Définissez les attributs du site en saisissant les valeurs directement dans les champs ou en cliquant sur les flèches pour chaque paramètre.

    Remarque :

    Si votre site est destiné aux téléphones portables et aux tablettes, l’option « Rediriger depuis Bureau » vous permet d’activer ou de désactiver la redirection vers la mise en page optimisée pour les appareils mobiles. Cette fonction peut être utilisée lorsque la mise en page n’est pas prête et qu’il est préférable de ne pas rediriger l’utilisateur vers une page affichant « Site en cours d’élaboration ». Notez que la mise en page est exportée même si l’option de redirection est désactivée. Toutefois, les navigateurs de l’appareil mobile ne redirigeront pas les utilisateurs vers les pages optimisées pour les appareils mobiles, et les fichiers exportés ne seront pas inclus dans le fichier sitemap.xml tant que cette option n’est pas activée dans la boîte de dialogue Propriétés de site de votre site.

  3. Cliquez sur OK pour enregistrer vos paramètres et fermer la boîte de dialogue.

  4. Choisissez la commande Fichier > Propriétés du site. Cliquez sur l’icône de dossier en regard de l’image Favicon. Accédez au dossier des fichiers d’exemples Kevins_Koffee_Kart et sélectionnez le fichier nommé favicon.png. Cliquez sur OK.

    fig_07
    Les Favicons sont les icônes qui s’affichent à côté de l’URL de votre site dans la barre d’adresse d’un navigateur.

  5. Choisissez Fichier > Enregistrer. Donnez un nom unique à votre nouveau site, par exemple VotreNomKoffeeKart.muse. (L’exemple de site dans ce tutoriel est appelé 01KevinsKoffeeKart.muse.)

Ajout d’une favicon dans le panneau Propriétés du site

Une image Favicon est une petite image carrée que vous créez, ajoutez à un site et téléchargez afin de personnaliser des signets et des URL. Bien que son comportement varie selon le navigateur utilisé, l’image Favicon est généralement affichée dans la barre d’adresse du navigateur, en regard de l’URL du site lorsqu’il est affiché. Dans de nombreux cas, elle s’affiche également à côté du nom d’une page lorsque celle-ci est enregistrée dans les favoris, ou dans un onglet qui contient une page de site chargée. Vous pouvez utiliser n’importe quel programme de retouche d’images, tels que Photoshop ou Illustrator, pour créer un fichier d’image carrée (uniformément proportionnée) qui sera utilisé comme fichier d’image Favicon. Pour ce tutoriel, un fichier PNG est fourni.

Pour ajouter une image Favicon au site, procédez comme suit :

  1. Choisissez la commande Fichier > Propriétés du site. Le panneau Propriétés du site s’affiche.

  2. Dans l’onglet Contenu, cliquez sur l’icône de dossier située à droite de la section Favicon. Utilisez la boîte de dialogue Sélectionner une image Favicon qui apparaît pour accéder au dossier des fichiers d’exemples, puis sélectionnez le fichier nommé favicon.png.

    Favicon
    Définissez le fichier favicon.png dans le panneau Propriétés du site.

    Remarque :

    Si vous utilisez Adobe Muse 2015.0.2 ou une version antérieure, vous pouvez ajouter une favicon à votre site en cliquant sur Fichier > Propriétés du site > onglet Mise en page.

  3. Cliquez sur Ouvrir pour fermer la boîte de dialogue Sélectionner une image Favicon et sélectionnez le fichier. Cliquez sur OK pour fermer la boîte de dialogue Propriétés du site.

  4. Choisissez Fichier > Prévisualiser le site dans le navigateur. Observez le haut de la fenêtre du navigateur, pour voir l’image Favicon apparaître dans la barre d’adresse. Si le site est chargé dans un onglet, vous pouvez également le voir affiché ici. Essayez également d’enregistrer la page dans vos favoris, afin de voir comment l’icône s’affiche en regard du nom de la page dans la liste des signets.

    Maintenant que le site est finalisé, l’étape suivante consiste à télécharger le site vers les serveurs d’hébergement Adobe Business Catalyst fournis.

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