Création d’un site Web d’une page pour petite entreprise avec Adobe Muse

Adobe Muse est un outil puissant qui a rendu la conception Web étonnamment plus facile et intéressante. Plus facile en termes d’absence d’exigence de code pour créer des sites Web professionnels et intéressant en termes de contrôle total sur la conception contrairement à d’autres applications de glisser-déposer.

L’une des caractéristiques les plus impressionnantes de cette application WYSIWYG (What You See Is What You Get) est qu’elle fournit un flux de travail approprié pour aider le concepteur dans le développement étape par étape du site Web.

Après avoir terminé ce didacticiel, vous allez :

• Avoir une compréhension claire de tous les aspects techniques et de conception de Muse.
• Sachez comment concevoir de manière professionnelle en moins de temps.
• Découvrez quelques ressources gratuites où vous pouvez trouver des graphismes époustouflants pour votre site Web.
• Créez un site Web d’une page entièrement fonctionnel en un rien de temps.

Exigences de ce tutoriel

Vous aurez besoin de télécharger certaines images, vecteurs et polices afin de créer ce site. Mais vous pouvez toujours suivre sans ces atouts. Pour organiser correctement le contenu, créez un dossier séparé pour votre site.

• Rendez-vous sur pexels.com et téléchargez :

  • 4 images de taille 1160 x 480 pour diaporama. Voici une capture d’écran de pexels. Vous pouvez mettre cette taille dans la case « taille personnalisée » sur ce site.

  • 6 images de taille 271 x 208 pour la section ‘services’.

  • 1 image de taille 1160 x 692 pour la section ‘Contactez-nous’.

• Rendez-vous sur freepik.com et téléchargez :

  • Une icône en forme de croix (vous pouvez modifier cette icône dans l’illustrateur ou simplement télécharger le fichier png à partir de feepik).
  • 6 images de visage pour la section ‘Témoignages’.

• Allez sur subtilpatterns.com et téléchargez le motif ‘brickwall’ pour la section ‘Testimonials’.

• Au fur et à mesure que vous avancerez dans ce didacticiel, je vous expliquerai comment télécharger les polices requises (cela peut être fait dans Muse).

• Utilisez le texte factice de lipsum.com.

COMMENÇONS!

Préparation de l’espace de travail et configuration de l’en-tête

1 Créez un nouveau site en allant dans Fichier > Nouveau site (Ctrl+N) et mettez les valeurs comme indiqué ci-dessous. N’oubliez pas de cocher la case « Sticky Footer ». Cliquez sur OK et vous aurez le mode PLAN. Double-cliquez sur A-Master situé en bas dans une zone grise. Vous allez tout créer sur cette page maître.

2 Choisissez l’outil de texte dans la boîte à outils située sur le côté gauche de la fenêtre de l’application. Cliquez et faites glisser sur le canevas ou la page pour créer une zone de texte. Accédez au panneau de texte (Ctrl + T), sous la liste déroulante des polices, recherchez les polices Web et choisissez « Ajouter des polices Web » et téléchargez les polices suivantes :

• Rametto One
• Tronçon
• Questionnaire
• Voie ferrée
• noble
• PT Sans
• Ubuntu
• Homard

Après avoir téléchargé ces polices, supprimez cette zone de texte.

3 Accédez au panneau Calques situé à droite de la fenêtre de l’application. S’il n’y est pas, allez dans le menu Fenêtre > Calques. Vous y verrez un calque nommé Calque 1 (couleur bleue). Il s’agit du calque par défaut et tout ce que vous créez ou placez sur le canevas y va. Double-cliquez sur ce calque et nommez-le « En-tête ».

4 À l’intérieur du panneau des calques, cliquez sur la petite icône de papier à bord plié située dans le coin inférieur droit. Cliquer dessus créera un nouveau calque de couleur rouge. Encore une fois, double-cliquez sur ce calque et renommez-le en « Contenu ».

5 Cliquez et faites glisser ce calque de contenu et placez-le sous le calque d’en-tête. Nous avons fait cela parce que nous voulons que notre en-tête soit au-dessus de tout.

6 Sélectionnez le calque d’en-tête et réduisez le panneau des calques.

7 Sélectionnez l’outil Rectangle dans la boîte à outils ou appuyez sur « m » sur le clavier.

8 Dessinez un petit rectangle sur le canevas et assurez-vous que sa couleur de bordure est bleue, ce qui indique que cet objet se trouve à l’intérieur du calque d’en-tête.

9 Accédez au panneau Transform situé en haut à droite de la fenêtre de l’application. Laissez la largeur (W) et mettez 50 à l’intérieur du champ de hauteur (H) et appuyez sur Entrée. (Ne vous souciez pas des valeurs X et Y.)

10 En haut de la page, vous verrez deux lignes de couleur bleue (illustrées dans la capture d’écran ci-dessous). Ceux-ci sont appelés « guides ». Lorsque vous survolez le premier guide, il indique « Haut de la page, faites glisser pour ajuster le rembourrage au-dessus de la page » et l’autre indique « En-tête, faites glisser pour ajuster la position ». La mise en place de ces guides au tout début est très importante.

11 Maintenant, comme nous avons créé un rectangle de H=50, cliquez, maintenez et faites glisser le guide « haut de page » jusqu’à ce que la boîte qui apparaîtra en dessous une fois que vous commencerez à faire glisser indiquera Y=50.

12 De même, faites glisser le guide d’en-tête ci-dessus vers le haut du guide de page jusqu’à ce qu’il indique Y=0. Nous avons fait cela pour configurer notre zone d’en-tête. (Vous voudrez peut-être expérimenter en plaçant ces guides à différentes positions pour différents résultats, mais c’est bon pour le moment.)

13 Sélectionnez le rectangle que nous venons de créer, faites-le glisser vers la zone d’en-tête afin qu’il s’adapte correctement.

14 Maintenant, nous devons augmenter la largeur du rectangle et la rendre à 100 % afin que l’en-tête soit parfait sur toutes les tailles d’écran. Développez le rectangle sur les deux bords et assurez-vous qu’il s’enclenche avec les bords. Un guide orange apparaîtra qui garantit que l’objet a été capturé. Au fur et à mesure que vous augmentez la largeur du rectangle, la fenêtre contextuelle indiquera W = 100% ou W = 1160 lorsque vous atteindrez le bord.

15 Gardez le rectangle sélectionné, cliquez sur le mot Remplir sous le menu de l’application et définissez les options comme suit. Choisissez la première couleur comme noir et la deuxième couleur: R=37, G=37, B=37.

16 Allez dans Fichier > Enregistrer le site. Enregistrez votre site chaque fois que vous apportez une modification.

17 Créez une zone de texte et tapez – ‘example.com’ et modifiez sa mise en forme comme indiqué ci-dessous.

18 Ajustez la taille de la zone de texte afin que tout le texte apparaisse sur une seule ligne. Sélectionnez cette zone de texte et faites-la glisser sur le rectangle noir. Alignez-le sur le centre vertical du rectangle (une ligne bleue vous indiquera quand il est centré) et accrochez-le à la bordure gauche comme indiqué ci-dessous.

19 Créez une zone de texte et saisissez – ‘Accueil’. Modifiez sa mise en forme comme suit. Ajustez la largeur et la hauteur de la zone de texte en conséquence. Vous pouvez également le faire à partir du panneau de transformation. Le mien est W=52, H=17.

20 Copiez et collez cette zone de texte et saisissez « Services » dans la nouvelle. Ajustez la largeur. Faites glisser et placez cette zone de texte à côté de la maison avec très peu de différence entre les deux. Encore une fois, les guides vous aideront à bien vous aligner.

21 Copiez et collez cette zone de texte pour quatre fois plus et tapez – Pourquoi nous, Témoignages, Contactez-nous et Newsletter. Placez ces zones de texte une par une à espacement égal à côté de « services ».

22 Avec l’outil de sélection sélectionné et la touche Maj enfoncée, sélectionnez toutes ces zones de texte une par une. Allez dans le panneau de texte, changez la couleur en blanc. Choisissez le groupe de ces cases et placez-le sur le rectangle d’en-tête. (Centré verticalement et aligné avec la bordure droite de la page). Ceci est notre menu.

23 Encore une fois, avec l’outil de sélection sélectionné et la touche Maj enfoncée, sélectionnez ces zones de texte, le rectangle et la zone de texte example.com. En haut à droite, vous verrez une option appelée Épingler. Cliquez sur sa case centrale supérieure pour épingler ces éléments. Cela signifie que lorsque l’utilisateur fera défiler votre site, cet en-tête restera fixe en haut. C’est très utile car l’utilisateur n’aura pas à faire défiler tout le chemin juste pour choisir une autre option.

24 Accédez au panneau Calques et verrouillez le calque d’en-tête. Cela peut être fait en cliquant à l’intérieur de la case à gauche du nom de la couche. Lorsque vous verrouillez un calque ou un objet, cela n’affectera pas son apparence, mais vous ne pourrez pas sélectionner ces éléments à moins de les déverrouiller. Nous avons fait cela afin d’éliminer complètement les risques de déplacer accidentellement les objets.

25 Sélectionnez le calque de contenu et réduisez le panneau des calques.

Établir un diaporama

26 Accédez à la bibliothèque de widgets située sur le côté droit de la fenêtre de l’application. Si ce n’est pas là, allez dans le menu Fenêtre> choisissez Bibliothèque de widgets. Développez la section « diaporamas » et sélectionnez « Vide ». Cliquez et faites glisser cet objet sur le canevas. Une fenêtre noire avec des options de diaporama apparaîtra.

27 Assurez-vous que les options sont définies comme indiqué dans l’image ci-dessous. Sous la section des pièces en bas, décochez les cases indiquant Précédent, Suivant, Légendes et Compteur. Nous n’avons besoin d’aucun de ces éléments.

28 Cliquez n’importe où sur le canevas pour faire disparaître cette fenêtre contextuelle. Maintenant, cliquez soigneusement à l’intérieur du diaporama. En cliquant dessus une fois, vous verrez que ‘Diaporama’ a été écrit dans ‘le type de zone de sélection actuelle’. Il est situé dans le coin supérieur gauche sous le menu de l’application. Cette zone vous permet de voir ce que vous avez sélectionné. C’est une fonctionnalité très utile lorsque la mise en page devient compliquée. Cliquez à nouveau et vous remarquerez que la description indique « Hero Image ».

29 Augmentez manuellement la largeur de l’image du héros en l’agrandissant à partir du milieu. Accrochez-le à la fois aux bords de la page (pour lui donner une largeur de 100 %) et au bas du rectangle d’en-tête, comme indiqué ci-dessous.

30 Allez dans le panneau de transformation et mettez H=500.

31 Ouvrez à nouveau les options du diaporama en cliquant sur le petit cercle bleu avec un rectangle blanc à l’intérieur (il est situé dans le coin supérieur droit du diaporama).

32 Cliquez sur l’icône du dossier à côté de l’option ‘Ajouter des images…’, recherchez les images que nous avons téléchargées pour le diaporama. Sélectionnez les quatre et cliquez sur Ouvrir.

33 Allez dans Fichier > choisissez « Aperçu de la page dans le navigateur » ou Ctrl+Maj+E et voyez comment votre diaporama fonctionnera une fois le site en ligne. Je vous recommande de mémoriser les raccourcis clavier que j’utilise dans ce tutoriel. Cela vous aidera à accélérer votre processus de conception.

Création de la rubrique « Services »

34 Maintenant que nous avons configuré notre en-tête et notre diaporama, il est temps de créer des sections pour chaque élément que nous avons ajouté à notre menu. Commençons par les « services ». Créez une zone de texte et saisissez-y services (toutes les lettres en minuscules) et modifiez sa mise en forme comme suit.

35 Double-cliquez à l’intérieur de cette zone de texte et sélectionnez uniquement la lettre ‘I’. Changez sa police en ‘Chunk’ et laissez tout pareil. Ajustez la hauteur de cette zone de texte. Lorsque vous réduisez sa hauteur, une ligne pointillée apparaît à un certain point et la boîte ne se raccourcit pas. Ne réduisez pas la taille après cela. Il s’agit de la hauteur la plus basse possible avec cette taille de police.

36 Avec la zone de texte sélectionnée, accédez au panneau de transformation et définissez l’angle de rotation sur -90 degrés (90 degrés négatifs).

37 Déplacez la zone de texte vers la gauche du canevas, comme indiqué ci-dessous.

38 Vous voudrez peut-être faire un petit zoom arrière pour voir tout le contenu à la fois ou pour ajuster les objets correctement. Pour ce faire, essayez de saisir différentes valeurs (moins de 100 %) dans la section Niveau de zoom en haut. Après avoir saisi la valeur, appuyez sur Entrée.

39 Allez dans Fichier > choisissez ‘Placer’. Sélectionnez la première image que nous avons téléchargée pour notre section de services. Cliquez sur ouvrir.

40 Le curseur changera d’apparence en un pistolet de lieu chargé d’une image. Cliquez sur la toile pour la placer. Déplacez-le et placez-le de sorte qu’il soit aligné avec le haut de la zone de texte « services ».

41 Copiez cette image et collez-la deux fois. Sélectionnez ces images collées une par une et alignez-les à espacement égal avec la première image.

42 Sélectionnez la deuxième image, faites un clic droit dessus et choisissez ‘remplacer l’image’ (c’est la dernière option). Recherchez la deuxième image et cliquez sur Ouvrir. Remplacez également la troisième image.

43 Créez des zones de texte pour les informations sur les services et appliquez la mise en forme des titres et des paragraphes comme indiqué ci-dessous. Les guides vous aideront à les aligner correctement.

• Pour les titres : Police: Raleway Bold, Taille = 20, Couleur: Noir, aligné à gauche et interligne à 100 %.
• Pour les paragraphes : Police : Questrial, Taille=15, Couleur : R=67 G=67 B=67, Aligné à gauche et 120 % d’interligne.

44 Placez trois autres images comme nous l’avons fait dans les étapes précédentes et créez de la même manière un texte de description pour elles. Vous devriez avoir le résultat suivant.

Résultat final de la section ‘Services’

Création de la section « Pourquoi nous »

45 Vient ensuite la section « Pourquoi nous ». Celui-ci est un peu compliqué. Soyez prudent dans la sélection des objets. Tout d’abord, créez un rectangle de 100 % de largeur et H=996. Remplissez-le avec une couleur (R=47, G=48, B=55). Faites un clic droit sur ce rectangle> Organiser> choisissez « envoyer à l’arrière » (pas envoyer à l’arrière).

46 Développez votre zone de travail en cliquant et en faisant glisser le guide « bas de page » afin d’avoir suffisamment d’espace pour créer du contenu qui sera placé sur ce rectangle que nous venons de créer.

47 Faites défiler vers le bas jusqu’à l’espace vide blanc et faites un autre rectangle de L=351 et H=351. Remplissez-le de couleur blanche et sans trait.

48 Allez à l’option ‘rayon d’angle’ (elle se trouve à côté du trait sous le menu de l’application). Cliquez sur tous les coins pour les arrondir et mettez 500 dans la case à côté.

49 Vous aurez un cercle. Faites glisser ce cercle sur le rectangle et ajustez-le comme suit. À côté du rayon d’angle, il existe une option appelée « Opacité ». Avec le cercle sélectionné, mettez 14 dans cette case.

50 Créez une zone de texte et saisissez – pourquoi nous (tout petit). Changez sa police en Rammetto One, taille = 100, Couleur R = 241 G = 244 B = 247, en tête 100% et alignez-la au centre. Placez cette zone de texte à l’intérieur du cercle et alignez-la correctement.

51 Nous allons maintenant créer les lignes pointillées. Faites un rectangle de W=9 et H=9, pas de remplissage. Cliquez sur le mot ‘trait’ à côté de remplir. Choisissez la couleur R=241 G=244 B=247. Cliquez sur l’icône de la chaîne pour la casser et mettre ‘1’ dans l’épaisseur du trait inférieur.

52 Copiez ce rectangle de trait d’un côté et collez-le plusieurs fois. Disposez-les sur une seule ligne (zoomez un peu avec l’outil de zoom si vous avez du mal à voir ces rectangles). Une fois que vous avez obtenu la longueur souhaitée de votre ligne pointillée, sélectionnez tous ces rectangles, faites un clic droit et choisissez « Grouper ». Copiez et collez ce groupe pour les autres lignes en pointillés.

53 Pour les lignes pointillées inclinées, essayez de mettre différents angles de rotation dans le panneau de transformation. J’ai utilisé 150 et 30 degrés. Vous devrez supprimer certains rectangles de ce groupe afin d’avoir des longueurs plus courtes. Ajustez ces lignes près du cercle comme indiqué ci-dessous.

54 Nous allons maintenant ajouter du texte pour les numéros, les titres et les descriptions. Utilisez les paramètres suivants pour chacun d’eux et ajustez ces zones de texte comme indiqué ci-dessous.

• Pour les nombres : Police=Rammetto One, Couleur: R=196 G=214 B=193, centré et 100 % interligne, taille: 200 (pour le numéro ‘1’), 160 (pour les nombres ‘2’ et ‘3’) et 120 (pour les numéros ‘4’ et ‘5’).
• Pour les titres : Police=Raleway Bold, Taille=18, Couleur :Blanc, Aligné au centre et 100 % en tête.
• Pour les paragraphes : Police=Questrial, Taille=16, Couleur: R=241 G=244 B=247, Centré et 120 % d’interligne.

Résultat final de la section « Pourquoi nous »

Création de la section « Témoignages »

55 Encore une fois, créez de l’espace pour travailler en faisant glisser vers le bas le guide de la page. Faites un rectangle de 100% de largeur et H=486.

56 Avec le rectangle sélectionné, cliquez sur le mot « Remplir » et cliquez sur « Ajouter une image » à côté de l’option d’image. Recherchez l’image de modèle de mur de briques que nous avons téléchargée. Sous l’option Ajustement, choisissez « Carrelage » pour remplir tout le rectangle avec cette texture.

57 Faites défiler jusqu’à l’espace vide et créez une zone de texte de taille W = 406, H = 289 à l’aide du panneau de transformation. Tapez – ‘ce que les autres ont à dire’ (tout petit). Changez sa police en Rammetto One, taille = 70, alignez-la à gauche, valeurs de couleur R = 37 G = 37 B = 37 et interlignage = 100%.

58 Avec cette zone de texte sélectionnée, cliquez sur le trait de mot, appliquez-lui un trait droit de poids un et de couleur noire. Faites glisser cette zone de texte et placez-la sur le rectangle avec un motif de mur de briques.

59 La prochaine étape consiste à ajouter des témoignages de clients. Pour cela, nous utiliserons les images vectorielles de visage rond que nous avons téléchargées sur freepik.com. Encore une fois, descendez dans un espace vide blanc afin de pouvoir personnaliser correctement votre composition.

60 Accédez à la bibliothèque Widgets et faites glisser « Vide » de la section des compositions sur le canevas. Cliquez sur le signe plus pour ajouter trois autres déclencheurs. Sélectionnez soigneusement le premier déclencheur et assurez-vous de votre sélection à l’aide de la zone de sélection actuelle qui indique le déclencheur. Et juste à côté, il y a une option appelée « Active ». Cliquez dessus pour développer. Sélectionnez l’état « Normal » et choisissez « pas de remplissage » et « pas de contour » pour cet état. Répétez cette opération pour chaque état qui est Rollover, Mouse Down et Active. Accédez au panneau de transformation avec le premier déclencheur sélectionné et mettez W = 10, H = 10.

61 Répétez l’étape précédente pour chaque déclencheur que nous avons. Cela signifie, n’appliquez aucun remplissage et aucun trait pour chaque état et transformez les déclencheurs en taille 10 x 10. Rapprochez les déclencheurs les uns des autres.

62 Maintenant. Nous personnaliserons les cibles pour chacun de ces déclencheurs. Le grand rectangle que vous voyez est la cible. Sélectionnez le premier déclencheur et sélectionnez son état normal dans le panneau des états. Après cela, sélectionnez la cible de ce déclencheur et n’appliquez aucun remplissage ni trait pour chaque état. Ensuite, allez dans le panneau de transformation et définissez la cible de W = 360, H = 370.

63 Répétez l’étape précédente pour chaque cible. Assurez-vous simplement de sélectionner d’abord le déclencheur, de le rendre à l’état normal, puis de sélectionner la cible respective avec l’état normal, puis d’appliquer aucun remplissage ni trait. Vous n’aurez pas besoin de modifier la taille de chaque cible. Faites-le pour un seul et cela s’appliquera à tous.

64 Maintenant, nous allons commencer à ajouter du contenu à cette composition. Allez dans Fichier> Placer et ouvrez la première image de visage et placez-la en dehors de la composition. Faites glisser cette image et placez-la maintenant dans la composition. Vous verrez qu’un cercle bleu apparaîtra dans son coin supérieur droit, ce qui indique que cette image fait maintenant partie de la composition.

65 Créez trois zones de texte – une pour le nom de la personne, une pour sa désignation et une pour la déclaration ou l’examen. Appliquez la mise en forme comme indiqué ci-dessous et placez ces zones de texte dans la composition. Assurez-vous simplement que chacun d’eux a un cercle bleu dans le coin.

• Pour le nom de la personne : Police: Nobile Medium Italic, taille = 18, Couleur: R = 37 G = 37 B = 37, aligné au centre et 100 % en tête.
• Pour la désignation : police : Nobile, taille = 15, couleur : R = 37 G = 37 B = 37, aligné au centre et 100 % d’interlignage.
• Pour les déclarations (avec virgules inversées) : Police : PT Sans italique, taille = 18, couleur : R = 69 G = 64 B = 68, aligné au centre et interligne à 100 %.

66 Avec l’image du visage sélectionnée, appliquez un trait de poids 4 de chaque côté, couleur: blanc, arrondissez tous les coins et augmentez le rayon jusqu’à ce qu’il s’enroule autour de l’image. J’ai utilisé 100 comme rayons d’angle.

67 Allez dans ‘Effets’ (situé à côté de l’option coins arrondis) et cochez la case ‘ombre’. Mettez les valeurs comme ; Couleur=Noir, Opacité=37%, Flou=12, Angle=78 et Distance=5.

68 Répétez les étapes précédentes (de 64 à 67) pour ajouter du contenu à chaque cible et enregistrez les modifications (Ctrl+S). Placez cette composition sur le rectangle avec un motif de mur de briques.

69 Maintenant, sélectionnez la composition entière (assurez-vous avec la zone de sélection actuelle) et développez ses options en cliquant sur le petit cercle bleu. Définissez les options comme indiqué ci-dessous. Appuyez sur Ctrl + Maj + E et voyez si cela fonctionne bien.

70 Vous devriez avoir le résultat suivant.

Résultat final de la section ‘Témoignages’

Création de la section « Contactez-nous »

71 La section suivante est Contactez-nous. Nous ajouterons une image d’arrière-plan, un formulaire et quelques zones de texte dans cette section. Tout d’abord, faites un rectangle de 100% de largeur et H=692. Remplissez-le avec une image que nous avons téléchargée pour cette section et choisissez « échelle à remplir » sous Ajustement. Changez son opacité à 72%.

72 Faites un autre rectangle de même largeur et hauteur et remplissez-le avec un dégradé. Mettez les valeurs de gradient comme ; Opacité=90% à 46%, Couleur: Noir à R=69 G=64 B=68, Point focal=66%, Direction: Horizontale et Taille: automatique. Placez ce rectangle sur l’image et assurez-vous qu’il s’enclenche avec chaque bord.

73 Accédez à la bibliothèque de widgets. Sous formulaires, sélectionnez « contact simple » et faites-le glisser sur le canevas. Une fenêtre avec des options de formulaire apparaîtra. Indiquez le nom du formulaire : Formulaire de contact, Envoyez un e-mail à : indiquez votre adresse e-mail dans laquelle vous souhaitez recevoir les informations saisies par les visiteurs. Après l’envoi : sélectionnez ‘rester sur la page actuelle’. La dernière option est « Modifier ensemble ». Assurez-vous qu’il est coché. De cette façon, vous devrez apporter des modifications à un seul champ et elles seront appliquées à tous. Cliquez n’importe où sur le canevas pour faire disparaître la boîte d’options.

74 Sélectionnez le formulaire. Cliquez sur l’étiquette ‘Nom’ et cliquez à nouveau jusqu’à ce que vous voyiez ‘Étiquette’ écrit dans la zone de sélection actuelle. Appuyez sur supprimer. Répétez cette opération pour les étiquettes d’e-mail et de message et supprimez-les.

75 Sélectionnez à nouveau le formulaire et sélectionnez le premier champ de formulaire indiquant « Entrer le nom » jusqu’à ce que vous voyiez « Entrée de texte » dans la zone de sélection actuelle. N’appliquez aucun remplissage et contour inférieur (poids un et couleur blanche) pour chaque état, c’est-à-dire de Vide à Focus. Pour l’état d’erreur, sélectionnez aucun remplissage et trait inférieur de couleur rouge avec un poids de 1.

76 Après cela, avec le champ e-mail sélectionné> choisissez à nouveau son état vide et personnalisez la police et la couleur du texte pour chaque état comme indiqué ci-dessous.

• Pour les états vide, non vide et focus : Police: Questrial, taille=14, couleur: blanc, aligné à gauche, interligne 100 % et pas d’italique.
• Pour l’état de survol : changez simplement la couleur du texte en R = 196 G = 196 B = 196 et pas d’italique.
• Pour l’état d’erreur : modifiez la couleur du texte en rouge et sans italique.

77 Cliquez et sélectionnez le bouton Soumettre. Choisissez son état normal, arrondissez tous les coins avec 40 rayons et augmentez sa largeur comme indiqué dans la capture d’écran ci-dessous. Changez sa police en Raleway Bold, taille = 20, aligné au centre, couleur : R = 241 G = 244 B = 247, interlignage : ajustez le texte « soumettre » au centre du bouton en augmentant cette valeur (j’ai utilisé 130 %) .

78 Pour ses états de survol et de souris enfoncée, changez la couleur du trait et la couleur du texte en gris (R=127 G=127 B=127). Enfin, pour son état « soumission en cours », changez la couleur du trait et du texte en bleu ciel (R = 41 G = 171 B = 226).

79 Lorsque vous sélectionnez l’état ‘soumission en cours’ pour ce bouton de soumission, vous verrez qu’il y a une autre zone de texte qui dit ‘soumission du formulaire…’. Cochez cette case et choisissez son état ‘soumission en cours’. Changez la police en Questrial, taille=14, couleur: gris, centré et pas d’italique. Choisissez son état « soumettre avec succès » et changez la couleur du texte en bleu ciel (pas d’italique). Choisissez son état « soumettre l’erreur » et changez la couleur du texte en rouge (pas d’italique). Le formulaire de contact est prêt.

80 Créez deux zones de texte. Tapez – contactez-nous et dans sa deuxième ligne, tapez « tous les champs sont obligatoires ». Pour le texte contactez-nous, utilisez la police: Rammetto One, taille=60, couleur: R=241 G=244 B=247, interlignage=100% et aligné à gauche. Pour le texte « tous les champs sont obligatoires », utilisez la police : Nobile italic, taille=26, couleur : R=241 G=244 B=247, interlignage=100 % et aligné à gauche. Pour cette zone de texte, appliquez le contour inférieur de poids 1 et de couleur blanche.

81 Tapez un paragraphe dans la deuxième zone de texte que nous avons créée. Utilisez la police : PT Sans Italic, taille = 14, couleur : R = 241 G = 244 B = 247, interlignage = 120 %, aligné à gauche et espace avant = 15.

82 Placez ces zones de texte et le formulaire sur l’image que nous avons placée. Ajustez-les comme suit.

83 Créez une zone de texte supplémentaire pour certaines informations de contact telles que l’adresse du bureau, l’e-mail et les numéros de téléphone. Placez cette zone de texte sur l’image. Vous devriez avoir le résultat suivant.

Résultat final de la section « Contactez-nous »

Création d’un pied de page

84 La dernière section est le pied de page. Il y a trois guides en bas, à savoir le bas de la page, le pied de page et le bas du navigateur. Ce que vous devez faire maintenant est de vous assurer que le guide ‘bas de page’ s’aligne avec le bas de la section contactez-nous et que le guide ‘pied de page’ coïncide avec le guide ‘bas de page’. Après cela, vous pouvez faire glisser le guide « en bas du navigateur » vers le bas pour ajuster l’espace dont vous avez besoin pour le pied de page.

85 Créez deux rectangles de 100% de largeur et H=168 pour le premier et H=37 pour l’autre. Changez la couleur de remplissage du grand rectangle en blanc et utilisez R = 47, G = 48, B = 55 pour le plus court.

86 Sélectionnez le premier rectangle et essayez de le placer dans la zone de pied de page. Il n’ira pas là-bas. Au lieu de cela, le guide de bas de page commencera à s’étendre vers le bas. Pour faire de ce rectangle un élément de pied de page, cochez la case « Pied de page » située en haut à droite de la fenêtre de l’application. Faites-le également pour le deuxième rectangle.

87 Placez maintenant ces rectangles dans la zone de pied de page et assurez-vous que le grand rectangle se trouve légèrement au-dessus du guide de pied de page. Le bas du rectangle coloré doit s’aligner avec le bas du guide du navigateur. Sinon, vous verrez un petit espace blanc après le pied de page, ce qui n’est pas joli.

88 Créez des zones de texte pour le pied de page et saisissez ce que vous voulez. Cochez simplement la case « pied de page » pour les zones de texte que vous ajouterez. J’ai ajouté du texte contenant des informations sur la clause de non-responsabilité et le droit d’auteur.

89 Le badge « Made with Adobe Muse CC » peut être ajouté à partir de la bibliothèque de widgets dans la section sociale. Vous pouvez également ajouter des liens vers votre page facebook, twitter, google+, LinkedIn, Pinterest, chaîne YouTube ou lien vimeo.

90 Le symbole de copyright et de nombreux autres symboles que vous voyez à côté du texte Tous droits réservés peuvent être ajoutés à partir du panneau « Glyphes » situé sur le côté droit de la fenêtre de l’application. Si ce n’est pas là, allez dans le menu Fenêtre> choisissez Glyphes.

Création de la rubrique « Newsletter »

91 Jusqu’à présent, nous avons conçu des sections pour tous les éléments de menu sauf un et c’est ‘Newsletter’. Faisons quelque chose d’intéressant avec ça. Rappelez-vous le symbole de la croix que nous avons téléchargé, il sera utilisé ici (ça va si vous ne l’avez pas téléchargé, vous pouvez toujours suivre). Tout d’abord, sélectionnez la zone de texte Newsletter et notez sa largeur et sa hauteur à partir du panneau de transformation. Le mien fait 81 x 17.

92 Maintenant, ouvrez la bibliothèque de widgets et faites glisser « Lightbox Display » de la section des compositions. Supprimez les deux premiers déclencheurs (situés en haut) et supprimez toutes les légendes (situées en bas). Faites en sorte que la taille du troisième déclencheur soit la même que celle de la zone de texte Newsletter qui est de 81 x 17. Modifiez son remplissage et son trait sur aucun pour tous les états.

93 Faites glisser la zone de texte de la newsletter et placez-la à l’intérieur de ce déclencheur de manière à ce que tous les bords de la zone de texte coïncident avec les bords du déclencheur. Faites maintenant glisser ce groupe et remettez-le dans le menu où il était placé précédemment. Ce que nous avons fait, c’est que nous avons appliqué un lien vers la zone de texte Newsletter. Lorsque l’utilisateur cliquera dessus, le site Web disparaîtra et la cible apparaîtra.

94 La prochaine étape consiste à personnaliser notre cible. Sélectionnez la zone grise et assurez-vous que la zone de sélection actuelle indique « Cible ». Vous devrez cliquer trois fois pour le sélectionner. Modifiez le remplissage et le trait sur aucun pour tous ses états.

95 Ajoutez deux zones de texte et un formulaire de contact simple (supprimez ses champs de nom et de message et conservez uniquement le champ de l’e-mail). Faites-les glisser à l’intérieur de cette composition et assurez-vous qu’ils ont tous un cercle bleu à leurs coins.

96 Personnalisez le formulaire comme nous l’avons fait dans la section contactez-nous. Vous devriez avoir le résultat suivant. Pour le champ de texte « Rester en contact », utilisez la police : Homard, taille=40, couleur :blanc, centré et interligne à 100 %. Pour le texte de description en dessous, utilisez la police: Ubuntu Light Italic, taille=14, couleur: blanc, centré et interligne à 120 %. Remplacez le texte du bouton d’envoi par « S’abonner ».

97 Maintenant, sélectionnez le bouton de fermeture, déplacez-le et placez-le dans le coin supérieur droit de cet affichage lightbox, comme indiqué ci-dessous. Cliquez à l’intérieur jusqu’à ce que vous voyiez ‘Label’ écrit dans la zone de sélection actuelle. Supprimer l’étiquette.

98 Modifiez le remplissage et le trait de ce bouton de fermeture sur aucun pour tous les états et faites en sorte que ses W=40 et H=40. Allez dans Remplir> ajouter une image et recherchez l’image croisée. Choisissez ‘scale to fit’ sous l’option de montage.

99 Cliquez sur Newsletter et vous verrez un cercle bleu à son coin. Cliquez dessus et assurez-vous que les options sont définies comme suit.

Résultat final de la section ‘Newsletter’

Création d’hyperliens

100 La dernière tâche qui reste est d’appliquer des liens à chaque section. Pour ce faire, choisissez l’option ‘ancrer le lien’ située en haut au milieu ou appuyez sur la lettre ‘a’ de votre clavier. Vous verrez que le curseur change d’apparence en un pistolet de lieu chargé d’une ancre de lien.

101 Lorsque vous cliquez sur le canevas pour le placer, une boîte de dialogue apparaîtra qui vous permettra de renommer une ancre.

102 Créez des ancres de lien pour chaque section que nous avons conçue, c’est-à-dire Accueil, Services, Pourquoi nous, Témoignages et Contactez-nous. Placez les ancres en haut de chaque section. L’ancre d’origine est illustrée ci-dessous à titre d’exemple. La mise en place de ces ancres est une étape importante et doit être effectuée avec soin. Lorsque l’utilisateur cliquera sur un lien particulier, le site Web défilera jusqu’à la position où l’ancre a été placée.

103 Nous allons maintenant appliquer les liens. Pour ce faire, sélectionnez la zone de texte « Accueil ». Allez dans l’option ‘Hyperliens’ (située en haut), cliquez sur la petite flèche vers le bas pour développer la liste. Ici vous pouvez voir toutes les ancres que nous venons de placer. Liez-le à l’ancre « Accueil ». Répétez cette étape pour les autres zones de texte, à l’exception de Newsletter, car nous lui avons appliqué un affichage lightbox.

Résultat final après la création d’hyperliens

Touches finales – Modification des propriétés de la page et ajout de favicon

104 Dans le mode Plan, faites un clic droit sur la page d’accueil et choisissez « Propriétés de la page ». Une boîte de dialogue apparaîtra. Choisissez l’onglet « Options » et sous le nom de la page, mettez – « Bienvenue sur example.com » et cliquez sur OK. C’est le texte qui apparaîtra en haut de la fenêtre du navigateur.

105 Allez dans Fichier > Propriétés du site. Sous l’onglet Disposition, la dernière option est ‘Favicon’. Lorsque vous passez la souris dessus, une fenêtre contextuelle apparaîtra décrivant ce qu’est un favicon et quelle devrait être la taille optimale. Il est bon d’ajouter un favicon car cela aide à faire ressortir votre marque et sert également à aider les utilisateurs à identifier facilement votre site s’ils l’ont mis en signet.

Test et exportation

106 Testez votre site en allant dans Fichier > Aperçu du site dans le navigateur ou Ctrl+Alt+E. Ne choisissez pas « Aperçu de la page dans le navigateur » cette fois car les liens ne fonctionnent pas dans l’aperçu de la page. Vous voudrez peut-être essayer de placer les ancres à différents endroits afin de vous assurer que lorsque l’utilisateur cliquera sur un lien, le site défilera vers la bonne section et la bonne position.

107 Enfin, allez dans Fichier > Exporter au format HTML (Ctrl+E). Sous l’URL du site, mettez n’importe quel nom comme ‘example.com’ et choisissez l’emplacement. Cliquez sur OK. Le site Web est prêt.

Résultat final de chaque page

Page de garde

Rubrique ‘Services’

Rubrique « Pourquoi nous »

Rubrique « Témoignages »

Rubrique ‘Contactez-nous’

Section de pied de page

Rubrique « Newsletter »

CONCLUSION

Je suis sûr que vous avez tout ce que je vous ai promis après avoir suivi ce tutoriel. C’est juste un exemple. Jouez un peu avec cet outil génial et concevez des sites Web époustouflants et professionnels tout en explorant des possibilités créatives infinies en cours de route. Merci.