Lisez cet article pour savoir comment appliquer les options de fond du navigateur et de remplissage d’arrière-plan dans Adobe Muse.

Remarque :

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

Fonds de navigateur et images d’arrière-plan dans Adobe Muse

Lorsque vous réfléchissez à la conception de votre site web, les remplissages d’arrière-plan en constituent une partie importante. Le remplissage d’arrière-plan dans Adobe Muse vous permet d’ajouter une couleur d’arrière-plan ou une image à votre site web. Vous pouvez utiliser des images d’arrière-plan pour transmettre la valeur de la marque d’un produit ou d’un service. De même, vous pouvez utiliser des remplissages d’arrière-plan pour ajouter de la valeur à votre conception ou assortir la couleur du fond au thème de votre site.

Lorsque vous ajoutez un remplissage d’arrière-plan et que vous visualisez votre site dans un navigateur, l’image ou la couleur sélectionnée s’affiche en arrière-plan dans la fenêtre du navigateur. Pour rendre la conception uniforme et cohérente, appliquez le remplissage d’arrière-plan à la page Gabarit.

Lisez l’article suivant pour savoir comment appliquer les options de remplissage d’arrière-plan dans Adobe Muse. Vous pouvez effectuer l’une des opérations suivantes :

Application d’une couleur d’arrière-plan au navigateur

  1. Dans la vue Plan, double-cliquez sur la vignette de la page Gabarit A pour l’ouvrir en mode Conception.

    La page Gabarit A s’ouvre dans son propre onglet le long de la partie supérieure de l’espace de travail.

    Remarque : l’indicateur de sélection se trouve dans l’angle supérieur droit du panneau Contrôle. Lorsqu’aucun élément de page n’est sélectionné, l’indicateur de sélection affiche le mot : Page. Si vous sélectionnez un objet dans la page, par exemple une image, le mot Cadre de l’image s’affiche dans l’indicateur de sélection.

    Utilisez l’indicateur de sélection pour vérifier l’élément que vous souhaitez contrôler. Si vous sélectionnez un autre élément de la page, vous pouvez sélectionner à nouveau la page en cliquant sur la zone grise en dehors de la page.

    Lorsque la page est sélectionnée, vous pouvez utiliser les menus de la barre Contrôle pour mettre à jour la couleur de remplissage et les paramètres de contour.

  2. Dans le panneau de configuration, cliquez sur Fond du navigateur. Sélectionnez la couleur souhaitée dans le champ Couleur. Pour choisir la couleur de remplissage, vous pouvez effectuer l’une des opérations suivantes :

    • Sélectionner une couleur avec le sélecteur de couleurs.
    • Entrer la valeur RVB.
    • Saisir le code hexadécimal dans le champ Hex#.
    • Sélectionner une couleur dans les nuances déjà enregistrées.
    Définissez une couleur d’arrière-plan
    Définissez une couleur d’arrière-plan
  3. Pour appliquer une couleur de fond unie ou dégradée, dans le panneau Fond du navigateur, sélectionnez Unie ou Dégradée. Utilisez le bouton radio pour sélectionner des couleurs unies ou dégradées.

  4. Pour appliquer un dégradé, définissez le type de fond sur Dégradé.Définissez les nuances de couleur pour sélectionner la première et la dernière couleur du dégradé.

    Définissez l’option de fond dégradé
    Définissez l’option de fond dégradé
  5. Définissez l’orientation du dégradé en configurant la direction sur Horizontal ou Vertical.

  6. Dans le panneau de configuration, cliquez sur Fond. Assurez-vous que la couleur de fond de la page est définie sur Aucune. Le menu Fond affiche un échantillon blanc avec une diagonale rouge.

    Définir le fond sur Aucun dans Adobe Muse
    Définissez le fond sur Aucun

Remplissage du fond avec une image

L’utilisation d’images comme remplissage d’arrière-plan est une pratique commune dans les conceptions de sites web. Adobe Muse vous permet de remplir l’arrière-plan avec des images répétées, ou une seule image. De plus, il est possible de choisir la position et les propriétés de défilement d’une image d’arrière-plan.

Découvrez comment utiliser les images comme arrière-plans dans Adobe Muse.

  1. Ouvrez le gabarit de votre fichier .muse.

    Il est possible d’ajouter une image d’arrière-plan à une page en particulier. Cependant, si vous souhaitez que l’image d’arrière-plan apparaisse sur chaque page de votre conception, rendez-vous sur la page Gabarit.

  2. Dans le panneau de configuration, cliquez sur Fond du navigateur. Vérifiez que le Type de fond est défini sur Uni.

    Définissez une image d’arrière-plan qui s’affiche dans la fenêtre du navigateur.
    Définissez une image d’arrière-plan qui s’affiche dans la fenêtre du navigateur.

    Remarque :

    Si vous définissez le type de fond sur Dégradé, vous ne pouvez pas définir une image comme remplissage d’arrière-plan.

  3. Pour sélectionner une image comme remplissage d’arrière-plan, cliquez sur le lien Ajouter une image. Parcourez les fichiers d’images et sélectionnez le fichier sur votre ordinateur. Cliquez sur Ouvrir pour définir l’image d’arrière-plan.

  4. Définissez l’ajustement de l’image d’arrière-plan. Vous pouvez définir l’une des options suivantes :

    • Ajuster au fond : l’image d’arrière-plan s’ajuste en taille. L’image s’adapte en taille et en position, selon les paramètres que vous spécifiez.
    • Ajuster : l’image est ajustée.
    • Taille originale : l’image est appliquée sous forme de remplissage d’arrière-plan dans sa taille d’origine.
    • Mosaïque : l’image est répétée dans l’ensemble de l’arrière-plan. L’option de mosaïque vous permet de créer une image plus petite qui se répète pour s’étendre sur la totalité de la fenêtre du navigateur, et ce, quelle que soit la taille de l’écran du visiteur.
    • Mosaïque horizontale : les images de la mosaïque sont répétées dans le sens horizontal.
    • Mosaïque verticale : les images de la mosaïque sont répétées dans le sens vertical.

    Les mosaïques d’images d’arrière-plan sont couramment utilisées dans les conceptions web. Lorsque vous publiez le site, la petite image d’origine que vous avez définie comme mosaïque d’arrière-plan charge seulement une fois dans le navigateur. Les mosaïques d’images d’arrière-plan vous permettent de couvrir de vastes zones de la page, sans incidence sur la vitesse de téléchargement ou les performances de votre site.

  5. Pour définir la position de l’image d’arrière-plan, sélectionnez la position souhaitée dans les neuf positions de la grille. Par exemple, si vous cliquez sur le carré central, l’image s’affiche au centre de la fenêtre du navigateur.

    Remarque :

    Pour supprimer un arrière-plan, cliquez sur l’icône de la corbeille, à côté de l’icône du dossier.

  6. Cliquez n’importe où en dehors du panneau Fond du navigateur pour le fermer.

  7. Pour visualiser l’image de fond, affichez l’aperçu du site dans Adobe Muse ou dans un navigateur.

Application de 100 % à la largeur des éléments de la page

Les éléments qui sont définis avec une largeur de 100 % remplissent le navigateur horizontalement, quelle que soit la largeur de la fenêtre de navigation de l’internaute. Si vous définissez un élément de page pour l’aligner sur le haut et le bas de la fenêtre du navigateur, un objet contenant une couleur unie ou une ressource mosaïque est étendu pour occuper l’espace disponible.

  1. Ouvrez la page sur laquelle vous souhaitez définir la largeur sur 100 % pour un élément de page. Sélectionnez l’élément de page requis. Par exemple, sélectionnez un rectangle qui s’étend sur la largeur de la page et qui est d’une hauteur de 250 pixels, dans le bas de la page.

  2. Le rectangle étant sélectionné, définissez la valeur 0 comme largeur de contour. Vous pouvez déterminer si le rectangle est sélectionné, car l’indicateur de sélection dans l’angle supérieur gauche affiche le mot Rectangle.

    Utilisez le champ Contour pour définir 0 comme contour du rectangle sélectionné.
    Utilisez le champ Contour pour définir 0 comme contour du rectangle sélectionné.
  3. Dans le panneau de configuration, cliquez sur Fond. Assurez-vous que le menu Fond est défini sur Aucun. Vous pouvez voir un échantillon blanc avec une ligne diagonale rouge.

    Utilisez le menu Fond pour sélectionner l’arrière-plan du rectangle
    Utilisez le menu Fond pour sélectionner l’arrière-plan du rectangle
  4. Cliquez sur le lien Ajouter une image dans le panneau Fond. Accédez à l’image souhaitée, sélectionnez l’image et cliquez sur Ouvrir.

  5. Dans la liste déroulante Ajustement, sélectionnez Mosaïque horizontale. Cette option répète l’image en mosaïque de gauche à droite, sur l’ensemble de l’axe X.

    Définissez le rectangle avec l’image sur une largeur de 100 %
    Définissez le rectangle avec l’image sur une largeur de 100 %
  6. Faites glisser les poignées de transformation du rectangle pour le positionner dans le bas de la zone visible. Ajustez la largeur pour qu’elle coupe les côtés gauche, inférieur et droit de la page.

    Une bordure rouge s’affiche temporairement pour indiquer que le rectangle est en mode de largeur 100 %.

Modification de l’opacité et de la transparence des arrière-plans

En plus d’ajouter une image comme arrière-plan pour votre site web, Adobe Muse vous permet également de modifier l’opacité du fond. Vous pouvez régler la couleur de fond d’une page pour la rendre partiellement transparente. Par défaut, Adobe Muse utilise un fond blanc pour la page de gabarit. Vous pouvez contrôler la couleur et la transparence de la page.

  1. Dans le panneau de configuration, cliquez sur Fond du navigateur pour développer le menu. Pour sélectionner une image à ajouter en tant qu’arrière-plan, cliquez sur le lien Ajouter une image.

  2. Dans le panneau de configuration, cliquez sur Fond pour développer le menu de Fond.

  3. Définissez l’opacité sur 80 %. Ce paramètre signifie que la page est principalement encore opaque, avec une transparence de 20 %. Vous pouvez continuer à modifier la page pour ajouter une bordure ou appliquer d’autres effets graphiques.

    Réglez l’opacité du remplissage de l’arrière-plan
    Réglez l’opacité du remplissage de l’arrière-plan

Effets de défilement et de remplissage de l’arrière-plan

Adobe Muse vous permet d’ajouter aux images des mouvements de défilement, qui sont appliqués comme remplissages d’arrière-plan. Pour savoir comment configurer les propriétés de défilement des images d’arrière-plan, consultez la section Appliquer des mouvements de défilement à une image d’arrière-plan.

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