Créez le site web Katie’s Café sans aucune programmation.

Dans cette première vidéo, nous allons créer un fichier et découvrir le mode Plan de Muse, qui permet d’établir le plan du site.  Vous allez apprendre à structurer le site et à nommer les pages à créer, puis à ajouter des informations telles que le titre des pages à l’aide de métadonnées. Notez qu’après avoir créé un fichier Muse au début de cette première vidéo, vous devrez ouvrir lors des étapes suivantes un fichier de projet préparé. Ce didacticiel et le projet correspondant ont été créés par Danielle Beaumont.

Définir le plan du site
  • Créer un nouveau fichier (1:14)
  • Ajouter vos pages (2:10)
  • Les propriétés de la page (3:35)

Créez votre gabarit.

Créer une page gabarit
  • Ajouter une image d’arrière-plan (1:55)
  • Créer votre en-tête (2:36)
  • Ajouter une zone de pied de page (8:00)

Remarque : ouvrez le fichier 02_Gabarit.muse dans Adobe Muse pour suivre cette vidéo.

Le gabarit contient les éléments utilisés sur chaque page du site web. À cette étape, nous allons ajouter au gabarit les éléments communs tels que l’en-tête, le pied de page, l’arrière-plan de la page et le logo. Les autres pages du site reposant sur ce gabarit, ces éléments s’afficheront au même emplacement sur toutes les pages.

Création aisée grâce aux widgets.

Utiliser les widgets
  • Ajouter un menu (0:40)
  • Créer un diaporama (6:27)
  • Importer des images (8:19)

Remarque : ouvrez les fichiers 03_Menu.muse et 04_Diaporama.muse pour suivre cette vidéo.

Dans cette section, nous allons faire appel à la puissance des widgets.  Ces éléments effectuent un travail considérable en arrière-plan ; ils vont vous faciliter grandement la tâche. Nous allons utiliser la bibliothèque de widgets pour ajouter un menu qui servira pour la navigation générale sur le site.  Une fois le menu ajouté, nous personnaliserons son apparence. Pour finir, nous insérerons un panneau à onglets et un diaporama.

Création de la page Visit.

Travailler avec la typographie
  • Importer du texte (2:36)
  • Travailler avec les polices (3:35)
  • Mettre en forme le texte (5:20)

Remarque : ouvrez le fichier 05_Texte.muse pour suivre cette vidéo.

À présent, nous allons créer la page Visit du site et nous initier à l’utilisation du texte et des polices web dans Muse.

Ajoutez une carte Google interactive.

HTML incorporé
  • Générer le code (0:34)
  • Incorporer la carte (2:41)

Remarque : ouvrez le fichier 06_Carte.muse pour suivre cette vidéo

Le site web d’un restaurant doit bien évidemment indiquer ses coordonnées. Nous allons créer du code pour une carte interactive à incorporer sur le site.

Mettez votre site en ligne !

Publier votre site
  • Sites d’essai hébergés gratuitement (0:12)
  • Publier le site (2:01)
  • Options supplémentaires (3:25)

Remarque : ouvrez le fichier 07_Final.muse pour suivre cette vidéo.

Notre projet est maintenant quasiment terminé. Dans cette dernière partie, nous allons étudier les différentes options de publication disponibles dans Muse, puis vous pourrez mettre votre site en ligne en quelques clics afin de présenter votre travail.