Apprenez à organiser, gérer et transformer différents objets dans Adobe Muse. Lisez la suite pour savoir comment optimiser des images pour 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.

Les objets d’Adobe Muse comprennent des éléments de conception créés dans le programme ou importés depuis des sources externes. Les images, textes, blocs d’images, etc. peuvent être ajoutés à la page web, puis être traités à l’aide de divers outils dans Adobe Muse.

Un des workflows les plus courants consiste à créer et importer un bouton à partir d’Adobe Photoshop. A cette fin, Adobe Muse reconnaît les calques et compositions de calques créés dans Photoshop. Adobe Muse permet de définir ces calques en tant qu’Etats du bouton dans votre site web.

Pour les objets placés sur la zone de travail de la page web, vous pouvez leur ajouter des transformations selon les besoins de conception du site web. Vous pouvez également isoler un objet pour ajouter les propriétés appropriées de marge et de gouttière afin de gérer l’espacement des éléments imbriqués.

Utilisation d’images dans les projets Adobe Muse

Positionnement des cadres d’image dans des projets Adobe Muse

Vous pouvez positionner des cadres d’image directement dans les projets Adobe Muse en cliquant sur l’outil Cadre d’image. Dans le panneau Outils, cliquez sur l’outil Cadre d’image, puis sur l’emplacement de votre choix dans le projet.

  1. Dans le panneau Outils, cliquez sur l’outil Cadre rectangulaire ou l’outil Cadre ellipse.

    Outil Cadre d’image dans Adobe Muse
    Glissez et déposez des cadres d’image rectangulaires et elliptiques dans Adobe Muse.

  2. Cliquez sur l’outil Cadre d’image puis faites glisser la souris pour le positionner dans le projet.

    Vous pouvez continuer à cliquer et définir plusieurs cadres d’image dans le projet. Vous pouvez également redimensionner et déplacer des cadres d’image en fonction de vos besoins de conception.

    Vous pouvez remplir le cadre de couleur ou y placer une image. Pour placer une image, déplacez une image sur le cadre. L’image se redimensionne pour s’insérer dans le cadre.

    Cadres d’image rectangles et elliptiques
    Cadres d’image rectangles et elliptiques

Importation d’une seule image sur la page

L’espace de travail Muse fonctionne comme Illustrator et InDesign ; vous chargez l’image importée en premier, puis vous cliquez sur l’emplacement de destination sur la page. Pour ajouter un fichier d’image en le plaçant directement sur la page, procédez comme suit :

  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 made-with-muse.png dans le dossier des fichiers d’exemple. Cliquez sur Ouvrir pour le choisir et fermez la boîte de dialogue d’importation.

Cliquez une fois dans la partie inférieure de la page pour importer l’image. Dans ce cas, vous voulez importer l’image dans sa taille réelle ; par conséquent, cliquez simplement une fois. Toutefois, si vous souhaitez redimensionner l’image importée, vous pouvez cliquer et faire glisser la souris pour donner à l’image une taille spécifique. 

Avec l’outil Sélection, faites glisser l’image vers le centre vertical du rectangle de pied de page mosaïque ; notez que des repères rouges et des zones de mesures turquoise apparaissent brièvement pour vous aider à l’aligner sur le centre.

Après avoir effectué ces modifications, la section du pied de page est presque terminée.

Insertion d’une image dans Adobe Muse
Le pied de page est constitué d’un seul rectangle avec une image d’arrière-plan mosaïque avec une image importée centrée dans la partie supérieure.

Comment Muse optimise les images lorsque vous publiez ou exportez un site

Vous pouvez également importer dans Adobe Muse des images prêtes à imprimer. Elles sont ainsi converties en un format adapté au web. Toutefois, créer des images adaptées au web implique souvent leur compression avec un certain compromis au niveau de la qualité. Placer dans Muse des images qui ne sont pas prêtes pour le web aboutit à leur compression automatique. Si vous publiez ou exportez un site et n’êtes pas satisfait des résultats automatisés, essayez de créer et d’optimiser manuellement vos propres images adaptées au web dans Photoshop ou dans le logiciel Adobe Fireworks®. Supprimez les images d’origine et importez les nouvelles images optimisées dans les pages, puis publiez ou exportez à nouveau votre site.

Notez que lorsque vous apportez d’autres modifications à une image dans Muse, comme un recadrage, un redimensionnement ou l’ajout de biseaux, d’ombres et de lueurs, Muse recrée alors pour vous l’image et la compresse automatiquement. Pour maîtriser davantage le processus d’optimisation, vous pouvez ajouter des effets aux images à l’aide de Photoshop ou de Fireworks, optimiser le fichier dans un programme d’édition d’image, puis l’importer dans Muse pour définir vous-même le niveau de compression. Vous pouvez importer des fichiers PSD de Photoshop directement dans Muse, plutôt que d’exporter des fichiers PNG, JPG ou GIF, mais Muse génère alors également automatiquement un nouveau fichier image à l’aide de ses propres algorithmes de compression automatique.

Optimisation d’images pour un affichage sur le web

Des erreurs d’exportation peuvent se produire, ainsi qu’un ralentissement des opérations d’exportation, lorsqu’un fichier lié a été importé à une résolution très élevée, puis redimensionné sur la page, à une échelle beaucoup plus petite. Cette procédure n’est pas recommandée. Les incidents sont plus fréquents lorsque des images de taille réelle (plus de 2 000 pixels) sont plusieurs fois importées, puis redimensionnées pour être adaptées à la conception.

Si vous importez un fichier d’image très volumineux, Muse limite automatiquement la taille et redimensionne la largeur de l’image à 2048. Si vous placez le pointeur de la souris sur le nom d’une ressource dans le panneau Ressources, une info-bulle affiche la taille d’origine de l’image importée par rapport à celle de l’image rééchantillonnée (mise à l’échelle pour tenir dans la limite de taille maximale).

Il est conseillé de redimensionner et d’optimiser les graphiques web destinés à un site à l’aide d’un programme d’édition d’image avant de les importer sur les pages. L’importation d’images extrêmement volumineuses peut entraîner une augmentation de la taille du fichier .muse, au-delà de ce qui est nécessaire. Le fichier .muse doit traiter des données de pixel supplémentaires qui ne sont pas nécessaires pour afficher l’image sur le web. Cela peut entraîner une période de traitement plus longue lors de l’exportation et de la publication de sites. Dans certains cas, un fichier .muse très volumineux peut dépasser le délai en tentant de redimensionner et d’optimiser l’ensemble des fichiers lors de l’exportation ou de la publication. Des erreurs d’expiration peuvent se produire.

Pour résoudre ce problème, vous pouvez cliquer sur les noms de ressource avec le bouton droit de la souris et choisir Optimiser la taille de la ressource afin de supprimer les données inutiles pour afficher l’image redimensionnée.

Si vous redimensionnez une image optimisée pour qu’elle apparaisse plus grande dans une conception, l’erreur liée à une ressource suréchantillonnée Plus peut s’afficher. Pour résoudre ce problème, vous pouvez choisir l’option Importer une taille supérieure pour récupérer les données d’image supplémentaires nécessaires à l’affichage de l’image redimensionnée, dans une qualité acceptable.

Dessin d’espaces réservés

Vous pouvez dessiner un espace réservé en forme d’ellipse, de rectangle ou de polygone et le remplir d’une image, de texte ou de couleur.

  1. Dans le panneau Outils, sélectionnez l’outil Rectangle ou Ellipse.

    Dessin d’espaces réservés dans Adobe Muse
    Sélection de l’outil Rectangle ou de l’outil Ellipse dans la barre d’outils

  2. Déplacez la forme rectangulaire ou elliptique pour la positionner dans le projet Adobe Muse.

    • Pour créer des carrés, maintenez la touche Maj enfoncée et cliquez sur l’outil Rectangle.
    • Pour créer des cercles, maintenez la touche Maj enfoncée et cliquez sur l’outil Ellipse.

    Vous pouvez remplir les formes de graphiques, de texte ou de couleur.

  3. Pour définir les propriétés d’ajustement d’objet, choisissez le rectangle ou l’ellipse, puis cliquez sur Objet > Ajustement.

    Vous pouvez choisir l’une des options d’ajustement suivantes :

    • Ajuster le contenu proportionnellement : ajuste le contenu aux dimensions d’un cadre tout en conservant les proportions du contenu. Les dimensions du cadre ne sont pas modifiées. Si le contenu et le cadre sont de proportions différentes, un espace vide apparaît.
    • Ajuster le cadre proportionnellement : ajuste le contenu aux dimensions du cadre entier tout en préservant les proportions du contenu. Les dimensions du bloc ne sont pas modifiées. Si le contenu et le bloc ont des proportions différentes, une partie du contenu est recadrée par le cadre de sélection du bloc.
    Ajustement du contenu proportionnellement pour les objets dans Adobe Muse
    Ajustement du contenu proportionnellement dans les objets

    Ajustement du cadre proportionnellement dans les objets (Adobe Muse)
    Ajustement du cadre proportionnellement dans les objets

Importation d’un fichier Photoshop sous la forme d’un bouton de survol

  1. Choisissez Fichier > Importer un bouton Photoshop. Dans la boîte de dialogue d’importation de Photoshop qui s’affiche, localisez le fichier PSD. Cliquez sur Sélectionner (Mac) ou Ouvrir (Windows) pour choisir le fichier.

  2. La boîte de dialogue Options d’importation Photoshop s’affiche. Prenez un moment pour examiner comment les paramètres sont appliqués. Vous pouvez utiliser les menus pour spécifier le calque du fichier Photoshop qui sera affiché comme l’état normal du bouton (l’apparence du bouton au chargement de la page), l’état Survol (l’apparence du bouton lorsque les visiteurs font passer leur curseur au-dessus de celui-ci), et l’état Clic (l’apparence du bouton lorsque les visiteurs cliquent dessus). Les trois menus d’état affichent les noms des calques de Photoshop, et les vignettes affichées illustrent l’apparence que chaque calque sélectionné prendra.

  3. Dans cet exemple, les calques de Photoshop ont déjà été correctement classés pour afficher les états du bouton. Il est inutile de modifier les paramètres de menu. Cliquez sur OK pour accepter les états tels qu’ils sont organisés par défaut.

    Utilisez la boîte de dialogue Options d’importation Photoshop pour associer les calques Photoshop existants aux états de bouton souhaités.
    Utilisez la boîte de dialogue des options d’importation de Photoshop pour associer les calques Photoshop existants avec les états de bouton souhaités.

  4. Cliquez une fois dans la zone supérieure droite de l’en-tête de la page Gabarit A pour importer le fichier Photoshop à sa taille d’origine.

  5. Cliquez sur le lien d’aperçu pour utiliser l’émulateur de rendu basé sur WebKit. Vérifiez l’affichage de la page Gabarit A. Lorsque vous affichez la page pour la première fois, l’état normal du bouton apparaît. Si vous placez le curseur sur le bouton, l’aspect change légèrement (la couleur de l’écoulement marron devient plus claire), et si vous cliquez sur le bouton, le texte blanc devient marron clair tant que vous appuyez sur le bouton de la souris et que vous le maintenez enfoncé.

  6. Cliquez sur Conception pour revenir à l’édition de la page Gabarit A en mode Conception.

Le bouton Partager affiche les états comme prévu. Dans la section suivante, vous apprendrez à aligner le bouton Partager avec l’image d’écoulement située sur le côté droit de la barre de navigation du site.

Dans la section suivante, vous allez apprendre à définir les zones d’en-tête et de pied de page du gabarit.

Ancrage d’objets à la fenêtre du navigateur

Lorsque vous placez une image ou ajoutez une illustration à une page par d’autres biais, vous utilisez l’outil de sélection et des touches fléchées pour la repositionner. Lorsque vous déplacez l’image, celle-ci se déplace en liaison avec les autres éléments (images, texte et support) également présents sur la page. Vous pouvez aussi déplacer les autres éléments, mais la page dans son ensemble se comporte comme une brochure ou une affiche. Les éléments de la page existent sur un seul plan. Si une page est longue (contient beaucoup de contenu vertical) et que le visiteur en fait défiler le contenu, celui-ci ne voit plus les images situées en haut de la page.

Il est fort probable que vous avez déjà vu des objets ancrés en consultant des sites web ; il s’agit des éléments « persistants » qui s’affichent toujours à un emplacement donné. Ils semblent flotter au-dessus des autres éléments de la page.

Lorsque vous utilisez l’outil d’ancrage, vous ne faites que supprimer une image du flux de la page. Au lieu de la placer par rapport aux autres éléments de la page, vous la définissez à un emplacement spécifique par rapport au navigateur. Les images ancrées semblent être « scotchées », toujours placées au même endroit (comme l’angle supérieur droit ou flottant vers le bas) indépendamment des autres éléments de la page qui défilent. Si le visiteur redimensionne le navigateur, les images ancrées restent toujours à l’emplacement où elles sont épinglées par rapport à la fenêtre du navigateur.

Vous pouvez considérer l’ancrage comme un moyen d’« extraire l’image » de la conception d’une page pour la fixer sur le navigateur, comme on épingle une note sur un panneau d’affichage. L’élément ancré se déplace pour conserver sa position d’ancrage par rapport au navigateur si le visiteur redimensionne la fenêtre du navigateur, mais il ne se déplace pas si le visiteur fait défiler le contenu de la page horizontalement ou verticalement.

Pour utiliser l’outil d’ancrage, procédez comme suit :

  1. La page Gabarit A étant ouverte dans la vue Conception, sélectionnez l’icône Facebook à l’aide de l’outil de sélection.
  2. Cliquez sur la position d’ancrage en haut à droite dans l’interface d’ancrage du panneau de configuration. Ce paramètre « ancre » l’élément à partir de l’emplacement actuel de son angle supérieur droit.
  1. Répétez les étapes 1 et 2 pour ancrer les boutons d’icône Google+ et Twitter à leurs positions supérieures sur la droite, afin qu’ils ne se déplacent pas dans la fenêtre du navigateur lorsque le reste de la page défile.
  2. Cliquez sur Plan pour voir les vignettes de la page. Notez que toutes les pages incluent désormais les trois icônes des réseaux sociaux, car vous les avez ajoutées au gabarit.
  3. Dans la vue Plan, double-cliquez sur la page des aliments pour l’ouvrir en mode Conception. Ou, si elle est déjà ouverte, cliquez sur l’onglet de la page des aliments pour la rendre active. Choisissez Fichier > Prévisualiser la page dans le navigateur pour afficher la page dans un navigateur.
  4. Cliquez sur l’élément de menu Desserts pour accéder au bas de la longue page, à la section contenant la carte des desserts. Notez que si les autres éléments de la page défilent, les trois icônes des réseaux sociaux restent en place sur le côté droit de la page, car elles sont ancrées.
Ancrage d’objets dans la fenêtre du navigateur dans les sites Adobe Muse
Ancrage d’objets à la fenêtre du navigateur

Poursuivez par le tutoriel Création de votre premier site web avec Muse - Chapitre 6, où vous allez apprendre à regrouper des ensembles d’objets afin qu’ils se comportent comme un seul élément. Vous allez également terminer la page de visite en ajoutant une carte Google intégrée qui permet aux visiteurs de localiser le Katie’s Café. Une fois le site finalisé, vous allez découvrir comme il est facile de le télécharger vers un serveur d’hébergement (optimisé par Business Catalyst) pour le publier en ligne, ce qui vous permettra de partager le travail en cours avec vos clients et vos collègues.

Dans le chapitre 4 du tutoriel Création de votre premier site web avec Muse, vous avez appris à ajouter des balises d’ancrage et à les lier à des éléments de menu dans un widget Menu horizontal manuel. Vous avez également appris à ancrer des éléments sur la page afin d’empêcher leur défilement. Enfin, vous avez découvert comment ajouter des liens aux fichiers pour que les visiteurs puissent les télécharger.

Vous allez également apprendre à regrouper des objets et à utiliser ces groupes pour coller des ensembles de contenu sur les pages. Vous allez également travailler davantage avec le code HTML intégré : cette fois-ci, vous allez ajouter une carte Google interactive à la page de visite. Enfin, vous allez apprendre à apporter la touche finale à votre site par l’ajout d’un Favicon, puis la publication du site d’essai sur les serveurs d’hébergement inclus.

Groupement d’objets et collage de groupes comme un seul objet

Comme dans InDesign et d’autres logiciels de conception, vous pouvez combiner plusieurs objets au sein d’un groupe pour qu’ils soient traités comme un seul objet. Dans cette section, vous allez créer une conception composée de plusieurs éléments (blocs de texte et images importés), puis apprendre à les regrouper afin de les positionner ou les coller plus facilement comme un seul élément. Procédez comme suit :

  1. Dans la vue Plan, double cliquez sur la vignette de la page d’accueil pour l’ouvrir en mode Conception.
  2. Choisissez la commande Fichier > Importer. Parcourez l’arborescence pour accéder au dossier des fichiers d’exemples et sélectionnez le fichier panel-open-bottom.png. Cliquez sur Ouvrir pour fermer la boîte de dialogue d’importation, puis cliquez une fois dans la partie inférieure de la page d’accueil (en dessous du widget Composition du cadre lumineux et au-dessus du pied de page) pour importer l’image à la taille réelle.

Le fichier PNG a été défini sur une opacité plus faible, la conception semi-transparente de la fleur permettant ainsi à l’image d’arrière-plan mosaïque d’apparaître au travers.

  1. Choisissez la commande Fichier > Importer à nouveau. Cette fois-ci, parcourez l’arborescence pour sélectionner l’image nommée spoon-map.png. Cliquez sur Ouvrir, puis cliquez une fois sur le pétale central pour l’importer.
  2. L’image de la cuillère étant sélectionnée, appuyez sur la touche Option (Mac) ou Alt (Windows) et maintenez-la enfoncée pour dupliquer cette image, puis faites-la glisser vers le pétale immédiatement à droite du pétale central. Répétez une nouvelle fois cette action, pour dupliquer l’image de la cuillère centrale et faire glisser la copie vers le pétale de gauche. Utilisez l’outil de sélection pour positionner les trois cuillères, comme illustré dans l’image ci-dessous.
Placez les trois images de cuillère dans les trois premiers pétales de la conception.
Placez les trois images de cuillère dans les trois premiers pétales de la conception.

  1. A l’aide de l’outil Texte, dessinez un bloc de texte dans le pétale central et saisissez ce qui suit :

Katie’s Café

Noe Valley

123 Elizabeth Street

LUN-VEN 6:00-22:00

SAM-DIM 7:00-22:00

  1. Dans le panneau Texte, appliquez les paramètres suivants pour formater le texte :
    • Police : Droid Serif (ou n’importe quelle police avec empattement)
    • Corps de la police : 14
    • Couleur de la police : #222222 (dans la partie 5, vous avez renommé cette couleur katieblack)
    • Alignement de la police : centré
    • Interligne : 120 %
  1. Puis, sélectionnez simplement les deux dernières lignes (qui commencent par les jours de la semaine) et définissez la couleur de la police sur rouge (#A6342A).
  2. Sélectionnez le bloc de texte à l’aide de l’outil de sélection. Appuyez sur la touche Option (Mac) ou Alt (Windows) et maintenez-la enfoncée pour dupliquer le bloc de texte et le faire glisser vers le pétale situé immédiatement à droite, au-dessus de l’image de la cuillère. Répétez une nouvelle fois cette action, pour dupliquer le bloc de texte central et faire glisser la copie vers le pétale de gauche. Utilisez l’outil de sélection pour positionner les trois blocs de texte de sorte qu’ils soient alignés au-dessus des trois cuillères, comme dans l’image ci-dessous.
Groupement d’objets dans Adobe Muse
Repositionnez les trois adresses à afficher au-dessus des trois cuillères dans les trois pétales situés au centre de la conception.

  1. Basculez vers l’outil Texte. Sélectionnez le texte de l’adresse de gauche et modifiez-le comme suit :

Katie’s Café

Laurel Heights

800 Spruce Street

LUN-VEN 5:00-12:00

SAM-DIM 9:00-13:00

  1. Sélectionnez le texte dans l’adresse de droite à l’aide de l’outil Texte et modifiez-le comme suit :

Katie’s Café

Cole Valley

301 Carmel Street

LUN-VEN 7:00-22:00

SAM-DIM 9:00-22:00

Maintenant que la conception est terminée, vous allez sélectionner les éléments et les regrouper.

  1. Utilisez l’outil de sélection pour cliquer et faire glisser le pointeur de la souris sur toute la fleur, en veillant à sélectionner l’image de fleur importée, les trois images de cuillère et les trois blocs de texte. Cliquez avec le bouton droit de la souris et choisissez Associer dans le menu qui s’affiche. Si vous préférez, vous pouvez également choisir Objet > Associer.

Notez qu’une fois les objets regroupés, l’indicateur de sélection situé dans l’angle supérieur gauche du panneau de configuration affiche le mot : Groupe.

  1. Copiez le groupe sélectionné. Cliquez sur Plan pour revenir à la vue Plan, puis double-cliquez sur la vignette de la page de visite pour l’ouvrir en mode Conception. Choisissez Edition > Coller sur place, pour placer l’ensemble du groupe d’éléments au même emplacement.

Comme vous pouvez le constater à partir de ce petit exemple, les groupes sont utiles lorsque vous avez terminé une conception et que vous souhaitez l’utiliser comme un seul élément, pour la repositionner sur une page ou la copier/coller sur une autre page.

Outre le regroupement, les fonctions de verrouillage vous sembleront également très utiles une fois la conception finalisée. Cliquez avec le bouton droit sur un groupe ou un ensemble d’éléments sélectionné et choisissez Verrouiller dans le menu contextuel qui apparaît pour les verrouiller. (Vous pouvez également choisir Objet > Verrouiller). Le verrouillage évite tout déplacement ou suppression non intentionnelle de l’un des éléments finalisés sur une page, car ceux-ci ne sont plus sélectionnables. Si, par la suite, vous devez mettre à jour les éléments verrouillés, choisissez Objet> Tout déverrouiller sur la page.

Une fois la conception de fleur collée au bas de la page de visite, le contenu de la page est partiellement terminé. Dans la section suivante, vous allez poursuivre l’édition de la page de visite pour ajouter une interface de carte interactive permettant aux clients de localiser le café le plus proche.

Incorporation de contenu multimédia pour ajouter une animation

  1. Dans la vue Plan, double-cliquez sur la vignette MasterFlash pour l’ouvrir en vue Conception. Notez que puisque que vous avez précédemment dupliqué le gabarit A-Master, l’image statique du logo est toujours présente. Le recours à l’image statique est utile pour que l’emplacement gardé corresponde au rectangle d’animation. Veillez cependant à bien supprimer cette image statique du logo une fois que vous aurez incorporé l’élément multimédia.

  2. Choisissez Fichier > Importer. Dans la boîte de dialogue d’importation, naviguez jusqu’au dossier Kevins_Koffee_Kart et sélectionnez le fichier nommé logo.swf.

  3. Placez ce fichier SWF dans le coin supérieur gauche en prenant soin de faire correspondre l’emplacement du fichier image existant.

  4. Une fois que vous avez aligné avec le logo statique antérieur la nouvelle fenêtre SWF que vous venez d’importer, supprimez le logo statique en le sélectionnant et en appuyant sur la touche Suppr.

  5. Pour voir comment le site entier s’affiche une fois les nouvelles modifications apportées à la page d’accueil, choisissez Fichier > Prévisualiser le site dans le navigateur pour tester l’affichage du logo sur différentes pages. Sans publier le site, vous pouvez travailler localement sur votre ordinateur, puis prévisualiser le site dans un navigateur et cliquer sur toutes les pages dans la navigation du site. Vous remarquerez que l’animation (fichier SWF) s’affiche une fois, puis s’arrête sur la page d’accueil. Si vous cliquez sur d’autres pages, seul le logo statique s’affiche.

    Remarque :

    Si vous choisissez la commande Fichier > Prévisualiser la page dans le navigateur, la nouvelle fenêtre du navigateur se charge plus rapidement pour afficher la page d’accueil, mais le navigateur ne prévisualise que la page active (la page d’accueil). Choisissez cette option si vous souhaitez vérifier une seule page du site et non le site web entier.

Utilisation du panneau Espacement

Le panneau Espacement permet de profiter de la marge de CSS et des propriétés de gouttière. La marge efface une zone autour du contenu (à l’intérieur de la bordure) d’un élément. La marge est affectée par la couleur d’arrière-plan de l’élément.

Les marges haute, droite, basse et gauche sont modifiables indépendamment à l’aide de propriétés distinctes. Vous pouvez également égaliser toutes les propriétés de marge en choisissant de les modifier uniformément.

  1. Dans Adobe Muse, sélectionnez Fenêtre > Espacement pour afficher le panneau Espacement.
Ouverture du panneau Espacements d’Adobe Muse
Ouverture du panneau Espacements d’Adobe Muse

  1. Spécifiez les valeurs pour les propriétés des marges Gauche, Droite, Haut et Bas. Pour entrer des valeurs différentes, désélectionnez le bouton .
Configurez les paramètres de marge et de gouttière du panneau Espacements.
Configurez les paramètres de marge et de gouttière du panneau Espacements.

  1. Vous pouvez également choisir de spécifier les propriétés des gouttières horizontales et verticales.

Mise à l’échelle et rotation d’objets à l’aide du panneau Transformation

Adobe Muse permet d’appliquer aux objets la transformation 2D. Vous pouvez positionner, redimensionner et faire pivoter des objets sur les axes X et Y.

L’option à bascule Largeur 100 % du panneau Transformation permet de placer des objets sur une largeur de 100 %. Vous pouvez également définir des objets extensibles qui s’étendent sur toute la largeur du navigateur et s’adaptent à l’écran de votre ordinateur.

Pour appliquer des transformations à un objet sélectionné, procédez comme suit :

  1. Dans Adobe Muse, sélectionnez Fenêtre > Transformation.
Ouvrez le panneau Transformation d’Adobe Muse.
Ouvrez le panneau Transformation d’Adobe Muse.

  1. L’objet étant sélectionné, appliquez l’une des transformations suivantes :
    • Position : saisissez des valeurs X et Y pour placer l’objet à l’emplacement de votre choix sur la page web.
    • Echelle : saisissez des valeurs de largeur et de hauteur pour l’objet. Vous pouvez également choisir de mettre l’objet à l’échelle avec une largeur et une hauteur uniformes en cliquant sur le bouton .
    • Rotation () : saisissez l’angle de rotation de l’objet.
    • Largeur 100 % () : vous pouvez définir l’objet sur une largeur de 100 % pour qu’il s’étende et s’adapte à la largeur du navigateur.

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