Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de Muse CC 2015

Créer un site web

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Apprenez à créer un nouveau site web avec Muse CC. Faites le tour des propriétés générales d'un site et découvrez le format de fichier associé au logiciel.

Transcription

Dans cette vidéo, nous allons procéder à la création initiale de notre site, alors quand vous ouvrirez Muse pour la toute première fois et bien vous tomberez sur un écran qui ressemblera à celui que vous avez devant les yeux, et créer un nouveau site sur tel écran est très très facile, puisqu'il y a un gros bouton Nouveau qui est en plein milieu de l'écran, et pour ceux qui n'aiment pas les gros boutons Nouveau, il y a aussi le menu Fichier Nouveau site ou encore le raccourci clavier Commande N si vous êtes sur Mac ou Contrôle N si vous êtes sur Windows, dans tous les cas, vous allez finir sur cette petite boite de dialogue qui vous permet de définir les options principales de votre nouveau site. Alors la première d'entre elles, c'est de savoir si votre nouveau site a une largeur fluide ou une largeur fixe et vous voyez que Muse par défaut vous propose de faire des sites en largeur fluide, c'est à dire des sites des sites qui respectent l'approche du Responsive Web Design, de la conception réactive comme on l'a vu dans le chapitre précédent. Alors le deuxième réglage, c'est la largeur de page maximale, c'est ici défini à 960 pixels, en effet dans Muse la plupart des valeurs sont exprimées en pixels et au niveau du web il n'y a d'ailleurs quasiment que le pixel qui compte donc si vous travaillez en In Design avec d'autres unités de mesure comme le pica, le point et les choses comme ça, et bien vous pouvez oublier tout ça, ici dans Muse et sur le Web c'est quasiment tout le temps des pixels. Alors ça veut dire quoi cette largeur de page maximale de 960 pixels, et bien ça veut dire que si jamais un internaute vient visiter mon site avec un écran d'une largeur supérieure à 960 pixels, ce qui est le cas de la plupart des écrans d'ordinateurs de bureau ou d'ordinateur portable, et bien mon site sera limité à une largeur de 960 pixels de large donc, et ne profitera pas de l'ensemble de l'espace disponible sur l'écran. Ce qui est le cas sur la plupart des sites d'ailleurs. Alors ensuite vous avez ici le nombre de colonnes, pour le moment j'ai une colonne, mais je pourrais augmenter le nombre de colonnes et définir une gouttière. Vous voyez que par défaut, une gouttière de 20 pixels. la gouttière c'est l'espacement qu'il y a entre chacune des colonnes. Alors ces réglages vont tout simplement permettre à Muse de générer des guides. Des guides qui sont là pour vous aider, pour vous aider à placer du contenu sur vos pages en 3 colonnes, rien ne vous empêche de ne pas respecter ces guides et de faire autre chose que 3 colonnes sur certaines pages de votre site donc tout ça c'est simplement pour vous aider, pour accélérer votre travail. Moi je vais garder le défaut d'une colonne et donc forcement, si j'ai une colonne, je n'ai pas de gouttière. Alors je vais aller voir maintenant sur les réglages avancés qui sont ici avec le petit triangle, voyez que j'ai aussi un réglage sur la largeur minimale de la page, ça, ça veut dire quoi, ça veut dire que si un internaute vient visiter mon site avec un écran d'une largeur inférieure à 320 pixels, donc se sera un petit smartphone par exemple, et bien mon site occupera quand même 320 pixels de large, et donc sur un tel écran, et bien on générerait une barre de défilement horizontale. Je dis générerait parce que c'est un cas tout à fait théorique, dans la pratique, il n'y a quasiment pas d'écran dont la largeur est inférieure à 320 pixels. Vous avez également aussi la hauteur minimale de votre site, ça, ça concerne les pages où il n'y a pas beaucoup de contenu donc si vous avez des pages avec très très peu de contenu, et donc que ce contenu générerait une toute petite page et bien on va quand même forcer la page a avoir au minimum 500 pixels de haut. Alors vous remarquez ces petites bulles jaunes également. Ces petites bulles jaunes, c'est Muse qui vous aide, en effet quand vous mettez la souris sur un contrôle sans cliquer, et bien Muse vous envoie cette petite bulle pour dire à quoi sert ce contrôle et puis comment s'en servir. Alors vous pouvez également définir des marges, et des marges intérieures sur votre site, moi je vais garder les valeurs par défaut dans ce cas ci, la langue je vais laisser le français bien sûr, et puis il y a aussi la résolution. Vous avez deux valeurs, Standard ou Hidpi, alors l'option Hidpi vous permet de profiter pleinement des écrans à haute densité de pixels comme par exemple les écrans Rétina de chez Apple. Si vous choisissez l'option Hidpi, et bien cela signifie 3 chose, premièrement, toutes les images que vous allez utiliser dans votre site devront être 2 fois plus grandes que nécessaire. Donc si vous avez besoin par exemple d'une image de 400 pixels de large par 300 pixels de haut mettons, et bien dans Photoshop ou dans n'importe quel autre éditeur vous devrez générer une image de 800 pixels de large par 600 pixels de haut, c'est à dire 2 fois plus que ce que vous n'avez réellement besoin, attention, l'image sera aussi 2 fois plus lourde. Alors deuxièmement cela signifie également que lors de l'export du site, donc ça c'est une opération dont nous parlerons dans le dernier chapitre de ce cours, et bien Muse va générer 2 versions de chaque image, une version à haute densité de pixels pour les écrans qui le supporte, et une version standard pour les autres écrans. Et puis cela signifie enfin que Muse va automatiquement choisir la bonne version de l'image à servir en fonction du type d'écran détecté, et pour ça Muse va tout simplement générer un petit java script supplémentaire. Alors dernier petit réglage ici, c'est le pied de page rémanent, ça, ça concerne également les pages avec très très peu de contenu donc si vous avez une toute petite page avec un grand écran qui vient visiter votre site et bien il se peut que votre pied de page apparaisse en plein milieu de la fenêtre du navigateur, et ça c'est pas très beau, donc en cochant cette petite case, et bien le pied de page sera toujours dans le fond du navigateur et puis si la page a suffisamment de contenu pour pousser le pied de page plus bas et bien alors la le pied de page sera dans le fond de la page bien sûr. Donc ça concerne uniquement ici le pied de page rémanent, les pages avec très très peu de contenu et ça forcerait donc le pied de page a être dans le fond du navigateur. Alors je vais garder les réglages par défaut ici, cliquer sur ok, et voila j'ai donc généré mon site web, je suis dans le mode plan de Muse, ça vous le voyez dans la partie supérieure droite de l'écran, vous avez 4 modes dans Muse, Plan, Conception, Aperçu et Publier, vous êtes pour le moment dans le mode plan, Muse a déjà crée une première page dans la page de votre site qui est la page d'accueil, et ça c'est logique un site doit au moins avoir une page d'accueil donc vous ne pouvez pas supprimer cette page, et puis il nous a également généré un premier gabarit. Alors je vais sauvegarder ce site donc : Fichier, Enregistrer le site, voila, je vais choisir l'emplacement où mettre ce site, je vais lui donner un nom je vais l'appeler par exemple : Chemin vert, voila chemin, avec un i, et puis je clique sur Enregistrer pour enregistrer ce site. Alors rien de ce que vous venez de faire n'est définitif. En effet en cours de travail vous pouvez toujours revenir dans la boite de dialogue que nous venons de quitter et modifier ces paramètres. Pour cela vous allez dans Fichier et vous allez prendre les Propriétés du site. Vous allez voir que cette page est un petit peu différente puisqu'elle a trois onglets ici au-dessus dont Contenu et Avancé, mais dans l'onglet Mise en page et bien vous retrouvez tous les réglages, tous les contrôles que l'on avait dans la boite Nouveau site, donc vous pouvez modifier tout ça en cours de route, pas de panique. Dernière petite chose, je vais me rendre dans Fichier, Enregistrer le site sous pour vous montrer le fichier qui a été généré, ça s'appelle cheminvert.muse en effet l'extension de fichier qui est réservée à Muse donc c'est le .muse et tout votre site se trouvera à l'intérieur de ce fichier .muse Donc si vous êtes habitués à créerdes sites avec d'autres éditeurs, comme Dreamweaver par exemple et bien dans ces autres éditeurs, à chaque fois que vous utilisez une image et bien ça fait un nouveau fichier, a chaque fois que vous faites une nouvelle page, ça fait un nouveau fichier également et donc vous vous retrouvez avec plein plein de fichiers qui sont liés entre eux, rien de tout ça dans Muse tout se trouve à l'intérieur de cet unique fichier .muse ce qui facilite considérablement la gestion de votre site et de vos fichiers. Voila, le site existe, il est temps pour nous de continuer.

L'essentiel de Muse CC 2015

Créez des sites web riches et dynamiques sans aucune compétence en programmation avec Muse. Gérez les plans et les calques, mettez en place une navigation entre vos pages, etc.

3h50 (44 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :21 juil. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !