Responsive web design dans Adobe Muse

Apprenez à créer un site web en responsive design dans Adobe Muse.

Explorez le site web que vous pouvez réaliser en responsive design dans ce tutoriel. Examinez la page web et observez comment les éléments réactifs s'adaptent aux différents écrans (poste de travail, tablette et smartphone).

Si vous souhaitez recréer le site web en responsive design, ouvrez la bibliothèque Responsive Web Design (Muse). Cliquez sur Enregistrer dans Creative Cloud pour en créer une copie sur votre compte. Si vous souhaitez utiliser les fichiers de démarrage, téléchargez le fichier responsive-web-design.zip sur votre ordinateur.

Remarque : vous devez vous connecter à votre compte Creative Cloud pour enregistrer la bibliothèque. Si vous n'avez pas d'Adobe ID, créez-en un.

Exploration du site en responsive design (1:18) ; Accès aux fichiers du projet (2:48)

Création d'un plan du site

Créez un site, explorez le mode Plan et établissez le plan du site. Structurez et nommez les pages à créer, puis ajoutez-leur des titres.

Mise en page pour le web et l'impression (00:20) ; Visualisation de la page finalisée (2:10) ; Ajout de pages dans le plan du site (2:27)

Configuration d'un gabarit

Créez un gabarit qui contiendra les éléments utilisés sur chaque page du site web. Ajoutez les styles graphiques et de paragraphe que vous utiliserez dans l'ensemble du site.

Ouverture du gabarit et exploration des modules (00:18) ; Exploration des éléments du gabarit (00:55) ; Création du gabarit (1:25) ; Astuces pour gagner du temps (2:24)

Création d'un pied de page

Créez et mettez en forme le pied de page du site web à l'aide de propriétés réactives. Ajoutez des icônes pour les médias sociaux et définissez les états qu'elles doivent prendre au survol de la souris. Associez les icônes du pied de page à des hyperliens qui permettront d'accéder à d'autres pages web depuis votre site. Utilisez le widget de menu pour définir la navigation de votre site. Enfin, ajoutez un formulaire dans le pied de page à l'aide d'un autre widget.

Définition de la zone de pied de page (00:09) ; Ajout d'éléments dans le pied de page (00:39) ; Définition des états de survol (2:32) ; Ajout d'hyperliens (4:03) ; Ajout d'un menu de navigation dans le pied de page (5:30) ; Ajout d'un formulaire dans le pied de page (7:02)

Création d'un en-tête

Créez et mettez en forme l'en-tête du site web à l'aide de propriétés réactives. Ajoutez le logo du site et un bouton, puis ajustez la mise en page à l'aide des fonctionnalités d'alignement. Ajoutez dans l'en-tête un menu de navigation, et personnalisez son apparence.

Définition de la zone d'en-tête (00:12) ; Ajout d'éléments dans l'en-tête (00:31) ; Personnalisation du menu de navigation de page (1:42)

Ajout d'éléments réactifs dans le gabarit

Utilisez des paramètres de responsive design comme l'option d'épinglage pour garantir l'affichage correct des éléments sur les écrans de toute taille. Ajoutez des points d'arrêt dans votre maquette pour gérer la transition entre les différentes mises en page prévues pour chaque format d'écran. Utilisez les outils de responsive design pour prévisualiser les différentes mises en page de votre site. Ajustez les éléments de page pour un affichage optimal à différents points d'arrêt.

Épinglage d'éléments pour une mise en page réactive (1:18) ; Prévisualisation du site dans un navigateur (3:34) ; Ajout de points d'arrêt (4:19) ; Repositionnement d'éléments pour différents points d'arrêt (7:27)

Ajout d'un menu réactif

Créez et agencez un menu qui s'adapte aux différents formats d'écran (poste de travail, tablette et smartphone). Apprenez à structurer les éléments de l'en-tête et du pied de page de sorte qu'ils s'adaptent automatiquement à chaque format d'écran.

Ajout d'un menu tactile (00:52) ; Création de calques pour structurer les éléments de page (3:32) ; Affichage du menu réactif uniquement sur les tablettes et smartphones (5:29)

Création d'une mise en page pour les écrans mobiles

Ajoutez un point d'arrêt pour la mise en page destinée aux smartphones. Agencez les éléments dans une mise en page verticale pour un affichage optimal sur les smartphones, dont les écrans sont moins larges que ceux des tablettes et ordinateurs.

Optimisation du contenu du pied de page pour les écrans de petite taille (1:02) ; Ajout d'un point d'arrêt (3:00)

Création de la page d'accueil

Finalisez la page d'accueil du site web. Apportez les réglages nécessaires au texte et aux images pour assurer leur redimensionnement et leur mise à l'échelle dans les différents navigateurs. Définissez des états de survol supplémentaires pour optimiser l'expérience de l'utilisateur dans les différentes parties de la page.

Définition de points d'arrêts distincts pour l'en-tête et le pied de page (00:52) ; Ajout et exploration des éléments réactifs de la page d'accueil (2:14) ; Vérification des paramètres d'état de survol et de mise à l'échelle (7:19)

Finalisation et publication du site web

Finalisez le site web et voyez s'il est nécessaire d'ajouter sur chaque page des points d'arrêt différents de ceux du gabarit. Découvrez d'autres techniques de responsive design. Apprenez notamment à masquer et afficher du contenu pour un affichage optimal dans toutes les mises en page, à mettre le texte à l'échelle pour les petits écrans et à copier la mise en forme et la mise en page sur tous les points d'arrêt.

Enfin, apprenez à partager votre site à des fins de révision ou à le publier en ligne.

Vérification des points d'arrêt (1:00) ; Ajustement des images pour le responsive design (2:36) ; Mise en forme du texte pour tous les points d'arrêt (4:26) ; Options de publication (6:42)

Création d'un site web en responsive design