Bonjour.
Dans cette vidéo, nous allons voir comment définir un site dans Dreamweaver.
Voici la première chose à faire lorsque vous démarrez un projet dans Dreamweaver.
Quel que soit votre site web, tous les fichiers doivent être gérés depuis un emplacement unique, comme on va le voir avec cet exemple de définition de site web.
Là, je suis en vue Standard mais si vous êtes en mode Développeur, le menu Fichier se trouve ici.
En mode Standard, il se situe à droite.
Et s'il est introuvable, ouvrez le menu Fenêtre et activez l'option Fichiers.
Voici donc une définition de site que j'ai créée précédemment.
Tout est regroupé dans un même dossier intitulé Rendered, sur le Bureau.
Ce dossier contient un fichier HTML, un fichier CSS et des sous-dossiers pour le Javascript, les images et les vidéos.
Je vais aller sur le Bureau pour vous montrer.
Vous voyez, l'arborescence est strictement identique.
J'ai mon HTML, mon CSS et mon dossier d'images.
La définition de site va donc permettre de lier le tout.
C'est parti !
Dans le menu supérieur de Dreamweaver, cliquez sur Site et Nouveau site.
Dans le champ Nom du site, saisissez le nom de votre site.
C'est juste à titre de référence ; vous pouvez taper ce que vous voulez.
Je vais appeler celui-ci « My Portfolio ».
Notez que les espaces sont acceptés.
J'attire maintenant votre attention sur le champ Dossier local du site.
Il indique à Dreamweaver où le site web va être stocké.
Dans le cas présent, je vais cliquer sur le bouton Parcourir, sélectionner le Bureau et créer un nouveau dossier que je vais appeler « my_portfolio ».
Veillez à ne pas insérer d'espaces dans le nom du dossier.
Vous pouvez utiliser des tirets ou des caractères de soulignement à la place.
Cliquez sur Créer, puis sur Choisir.
Dreamweaver sait désormais où se trouveront tous les fichiers.
On va maintenant lui indiquer où placer toutes les images.
Pour cela, je clique sur Paramètres avancés, Infos locales, et, en regard du champ Dossier des images par défaut, je clique sur le bouton Parcourir, puis sur Nouveau dossier.
Je tape « images » et je clique sur Créer, puis sur Choisir.
Ce sera bien pratique quand on commencera à ajouter des images sur le site.
Si on utilise des images provenant de différents dossiers sur le disque dur, Dreamweaver saura qu'il faut les placer dans le dossier d'images.
Car, souvenez-vous, pour que ça fonctionne, tout doit être regroupé dans un même dossier.
Parfait, on a donc défini un site.
Reste à cliquer sur Enregistrer.
Jetons un œil au dossier créé sur le Bureau pour bien comprendre ce qu'il se passe.
Le dossier my_portfolio est donc ici.
En l'ouvrant, on a bien un dossier d'images.
C'est d'ailleurs à peu près tout ce qu'on a pour l'instant.
Mais ce dossier contiendra bientôt tout ce que je vais mettre sur mon site web.
Je vais à présent revenir dans Dreamweaver pour créer un fichier d'exemple.
Bien, on a à droite le site local et le dossier d'images.
Je crée ici un document HTML, en laissant la page telle quelle, et je clique sur Enregistrer.
Je vais l'appeler index.html.
Je clique sur Enregistrer.
Dreamweaver place alors le fichier dans ce dossier.
Et si je vais sur le Bureau, je retrouve bien mon fichier index.
On crée donc bien une définition de site web pour que tout soit placé au bon endroit.
L'utilisation d'une définition de site dans Dreamweaver présente des avantages.
Je vous propose d'en voir quelques-uns.
Je reviens dans Dreamweaver.
On a donc ici une définition de site, avec un fichier HTML, un certain nombre d'images, une feuille de style CSS, etc.
Je l'ouvre en double-cliquant sur le fichier index.html.
Le fichier apparaît à gauche.
Peu importe la vue (Code, Fractionner ou En direct) et le mode — vous pourriez être en mode Développeur.
J'ai mon fichier index.html et mon dossier d'images.
Ce site fait pas mal référence à ce dossier d'images.
Par exemple, ici, on a images/menu-hamburger.png.
Les images de ce dossier sont utilisées à plusieurs endroits sur le site.
On a des images ici, ou encore ici.
Ce site en utilise un certain nombre.
Je vais maintenant afficher un aperçu du site dans un navigateur.
Je choisis Fichier, Aperçu en temps réel, puis l'application Google Chrome.
Voici le site avec une superbe vidéo en arrière-plan.
On a une image en haut à gauche.
Elle n'est pas bien grande, mais le site en contient tellement !
Il y en a une ici par exemple, une autre là, et ainsi de suite.
Le site fait donc beaucoup référence au dossier d'images.
Revenons dans Dreamweaver.
Imaginons qu'on doive renommer un fichier.
Je peux le faire depuis le Bureau : je renomme par exemple ce dossier « img », une abréviation couramment utilisée pour les images.
Seulement, en procédant de la sorte, j'agis un peu « derrière le dos » de Dreamweaver, qui fait toujours référence au dossier « images ».
Du coup, quand on affiche l'aperçu, on voit qu'aucune image n'a été chargée.
Donc, à chaque fois que vous modifiez un fichier ou un nom de fichier ou de dossier, pensez bien à passer par le panneau Fichiers.
Je vais rétablir le nom d'origine.
Dans Dreamweaver, je vais refaire exactement la même chose en cliquant avec le bouton droit et en choisissant Édition et Renommer.
Je nomme le dossier « img ».
Voilà, et cette sympathique fenêtre apparaît pour me demander si je veux mettre à jour l'ensemble du code afin qu'il pointe vers ce nouveau dossier.
J'accepte, bien sûr.
Observez maintenant le résultat : le nom du dossier est modifié partout.
Si je lance l'aperçu...
Toutes les images apparaissent !
Alors même que j'ai changé le nom du dossier !
Et c'est valable, quel que soit l'élément à renommer.
Que vous ayez besoin de renommer votre menu Styles ou toute autre page, utilisez le panneau Fichiers.
Dreamweaver actualisera le code en conséquence pour vous simplifier la tâche.
Nous venons de voir les bases de la création d'un site web et allons maintenant aller un peu plus loin.
Supposons que j'aie besoin d'affiner ma définition de site.
Je clique sur Site, puis, au lieu de sélectionner Nouveau site, j'opte pour Gérer les sites.
Voici toutes mes définitions de site.
J'ouvre celle que nous avons créée précédemment et intitulée My Portfolio.
Je double-clique dessus.
C'est là que vous pouvez modifier le nom du site ou le dossier local du site si vous l'avez déplacé.
L'onglet Serveurs est particulièrement important car c'est ici que vous allez établir la connexion avec votre site d'hébergement distant ou votre site de test.
En gros, c'est comme cela que vous allez mettre votre site en ligne.
Cliquez sur le signe plus (+) pour renseigner les données d'hébergement que votre hébergeur vous aura probablement envoyées par e-mail.
Vous les indiquez dans ces champs.
Je ne vais pas exécuter toute la procédure maintenant car la configuration d'une définition de serveur fait l'objet d'une autre vidéo.
Je clique donc tout simplement sur Enregistrer deux fois de suite, puis sur OK.
Intéressons-nous à présent à une autre fonctionnalité de l'outil Gérer les sites.
J'ai créé une définition de site ici pour mon site My Portfolio, ainsi que son dossier local.
J'ai également défini le site distant et la connexion avec mon compte d'hébergement.
Supposons que je veuille le partager avec quelqu'un qui a besoin de se connecter au site ou que je veuille changer d'ordinateur, et passer de mon ordinateur portable à mon poste de travail.
Au lieu de ressaisir toutes les informations, il suffit de cliquer sur le site, sur Exporter, puis sur OK.
J'obtiens alors un fichier STE que je pourrai partager par e-mail ou tout autre moyen.
Pour le destinataire, (je clique sur Annuler) il suffira d'ouvrir la même fenêtre (Site > Gérer les sites) et de cliquer sur Importer pour importer le site.
Toutes les informations seront incluses.
Vous pouvez également le supprimer en cliquant sur ce signe moins (-).
Voici ce qu'il se passe : je clique sur le signe moins pour supprimer cette définition de site et je valide le message qui m'informe que l'action ne pourra pas être annulée.
Ne vous inquiétez pas, le site est toujours présent sur le Bureau.
Les fichiers que j'ai créés sont toujours là.
Le site n'est donc pas réellement supprimé de l'ordinateur.
Seule la définition est supprimée.
On a donc défini le site local que l'on a connecté à un serveur, et on a passé en revue certains des avantages du panneau Fichiers.
Avant de vous laisser, je vais vous montrer comment les premières pages fonctionnent.
Nous avons créé la page index.html.
Il faut savoir que lorsque vous créez la toute première page de votre tout premier site web, vous aurez besoin d'au moins une page nommée index.html.
Pourquoi ?
Parce que c'est la page que votre navigateur ira chercher.
Il ne l'affichera pas mais elle constitue la page d'accueil.
Tous les sites doivent comporter une page d'accueil.
Vous pouvez nommer toutes les autres pages comme vous le souhaitez, mais celle-ci doit absolument s'appeler « index ».
On va vérifier ça rapidement dans le navigateur.
Je tape par exemple « Adobe.com » dans la barre d'adresse, suivi de « index.html », et j'appuie sur Entrée.
Le navigateur ouvre alors une page sans montrer réellement le fichier index.html.
Il le garde bien précieusement dans un coin de sa mémoire.
Si votre site contient plusieurs centaines de pages mais aucune nommée index, il ne se chargera pas et une belle erreur sera générée.
Une dernière information concernant votre site et ses fichiers : lorsque vous ajoutez des fichiers en dehors de Dreamweaver, il se peut que vous deviez actualiser l'affichage.
Si j'ouvre le dossier d'images ici, on voit qu'il contient un grand nombre d'images.
Je vais en ajouter une en quittant l'interface de Dreamweaver.
J'ouvre donc le Finder, où je retrouve le dossier d'images.
Voici le fichier que je vais ajouter.
Je me contente de le faire glisser ici.
En règle générale, le panneau Fichiers s'actualise rapidement sans que vous ayez besoin de le rafraîchir.
Comme ici.
Ça va assez vite.
Mais si le panneau ne s'actualise pas, cliquez en bas sur Actualiser pour forcer son rafraîchissement.
Parfait.
Nous venons de voir ce qu'était une définition de site.
Nous savons qu'elle permet de connecter le site à un dossier sur le Bureau et que tous les fichiers du site doivent figurer dans un seul et même dossier.
Une définition de site permet également de connecter le site au serveur distant, c'est-à-dire notre hébergeur la plupart du temps.
Et pour bien faire, on renomme les fichiers et dossiers via le menu Fichiers afin que Dreamweaver actualise automatiquement le code.
Enfin et surtout, on veille à créer une page index.html, sinon...
C'est la catastrophe assurée, et votre page ne se chargera pas.
Eh oui !
Voilà, vous savez maintenant comment créer une définition de site dans Dreamweaver.
