Créer un site web avec Dreamweaver CC

Développer l'architecture du site

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Avant de commencer, appréhendez la structure et l'organisation de votre arborescence. Puis, dans les premières étapes de la mise en place d'un site, créez un site Dreamweaver.
05:43

Transcription

Nous avons deux, trois paramètres à effectuer avant de commencer la mise en place de notre site. Premièrement ici de venir dans les « Préférences ». Alors si vous êtes sur Windows Edition Préférences. Si vous êtes sur Macintosh, Dreamweaver Préférences directement. La première chose à mettre en place va être au niveau de l'interface, de choisir un thème de coloration. Donc pour ma part je vais opter pour le thème Dark en espérant que cela ne vous gêne pas. Vous optez pour la coloration que vous souhaitez et puis pour la partie du code, je vais utiliser le Dark également et vous là vous êtes aussi amené à régler. Donc j'applique et je reste sur ce réglage-là pour l'instant. Ensuite, la deuxième chose à faire, et donc la première chose à faire lorsqu'on crée un site c'est de gérer un espace de site pour Dreamweaver et de ne pas travailler sans venir paramètrer ici la gestion du site. Donc ici ce que je vous propose de faire c'est de gérer le site et de venir créer un nouveau site ici que l'on va appeler « Festival » si vous voulez puisque ça va être un Festival de Rock et on va venir le positionner dans un dossier que l'on pourrait appeler par exemple « site » tout court ici. Donc je vous invite à sélectionner ce dossier et d'enregistrer. On n'a rien d'autre à faire. C'est terminé, notre site est paramétré. Maintenant on sait que dès qu'on va travailler sur quelque fichier que ce soit Dreamweaver va pouvoir venir travailler avec ce dossier-là, n'aura pas de soucis de synchronisation, de chemin d'accès ou de mise en relation des fichiers les uns avec les autres. Maintenant commencons à préparer le terrain au niveau des dossiers de l'arborescence que l'on va avoir besoin. Donc on va créer un nouveau dossier que l'on va appeler « docs », « docs » pour document, vous pouvez l'appeler comme vous le souhaitez, ça pourrait s'appeler matière, originaux, fichier source comme vous voulez. L'essentiel c'est que dans ce dossier on va pouvoir venir y rapatrier l'ensemble des documents dont on pourra se servir pour construire notre site. Première chose à faire ici c'est de le voiler directement pour demander à ne pas le placer sur le serveur, c'est un dossier qui nous sera propre, qui va être local pour nous mais qu'on n'aura pas à synchroniser avec les serveurs. Deuxième dossier à créer va être un dossier HTML. Donc ce dossier vous pouvez l'appeler tout en minuscule. Pour ma part j'ai pris par habitude et par convention de l'appeler HTML en majuscule. Donc ici ce dossier va contenir l'ensemble des fichiers HTML que l'on va construire, que l'on va préparer pour notre page. Même si on a une seule et unique page, on aura plusieurs versions, version 1, 2, 3 le faisant évoluer tout au long de cette formation. Ensuite je vous propose que l'on crée un dossier qui va s'appeler « CSS » pour pouvoir placer toutes les feuilles de styles. Alors là par contre je l'écris en minuscule, à vous de voir aussi également, si vous préférez l'écrire en majuscule ou en minuscule. Pour ma part je l'écris en minuscule parce que beaucoup de librairie qu'on utilise peuvent utiliser cette abréviation là sous forme de minuscule, donc pour avoir une meilleure compatibilité côté serveur j'utilise du minuscule. Le dossier « images » maintenant, « images » au pluriel, il va y en avoir plusieurs là, pareil j'utilise la minuscule. Et ce que je vous propose de faire c'est de venir double cliquer ici sur le dossier Festival pour réouvrir les propriétés et venir dans les Paramètres avancés ici sur les Infos locales à dire que le dossier images par défaut va être ce dossier image. De cette façon ici on sait que maintenant toutes les images si on doit importer Dreamweaver ira le mettre dans ce dossier par défaut de manière naturelle. Enfin le dernier dossier que l'on va créer ici ça va être le dossiers des Fonts que l'on va pouvoir intégrer dans notre site. Alors là pareil. Double cliquez sur le dossier Festival et si vous regardez dans les Paramètres avancés vous avez les Polices Web. Ici Dreamweaver vous propose d'avoir un dossier qui va s'appeler webfonts. Moi ça me va très bien, donc après si vous souhaitez l'appeler Font typo c'est à vous de voir. Pour ma part je vais utiliser ce dossier donc je vais dire qu'il va pointer ici sur un nouveau dossier qui s'appelle « webfonts ». Je rentre à l'intérieur, je sélection le dossier, je l'enregistre voilà et là ici ça m'a créé mon dossier « webfonts » pour pouvoir recevoir l'ensemble des typos que l'on va utiliser dans notre site. N'hésitez pas à cliquer sur l'actualisation ici, histoire de pouvoir réorganiser par ordre alphabétique. Ici il y a une petite flèche simplement qui est inutile puisque le dossier ne contient rien. Les deux dernières vérifications que l'on pourrait faire éventuellement se place également ici au niveau des « Infos locales » c'est-à-dire de s'assurer qu'on ait un lien relatif aux documents. On va très peu travailler sur du serveur avec éventuellement des include php on ne va pas en faire du tout. Ici il n'y a pas nécessité de travailler avec la racine du site. L'URL pour l'instant on n'en a pas d'utilité. On verra si on a besoin de la régler un peu plus tard. Par contre cochez la case, « Vérification des liens sensibles à la casse » de façon de vous assurer à ce que les liens respectent vraiment la convention de l'écriture qui sera utilisée, donc si vous écrivez des minuscules, que ce soit minuscule, majuscule en majuscule parce beaucoup de serveurs sont très sensibles à ce genre de détail. On n'utiliserait pas de JQuery, ni de Java script, mais si vous serez amené à utiliser du JQuery je vous conseille de faire exactement la même chose que ce qu'on a fait pour les webfonts c'est-à-dire de venir redéfinir éventuellement un dossier que vous appellerez JavaScript ou JS et sur lequel vous ferez pointer ce document JQuery de façon à pouvoir centraliser l'ensemble des JavaScript dans un seul et unique dossier. Voilà donc notre site maintenant est préparé. Tout est en place pour pouvoir commencer je vous invite donc à ce que l'on commence à appréhender HTML, CSS et structure de notre site.

Créer un site web avec Dreamweaver CC

Réalisez votre premier site web avec Dreamweaver. Abordez les principales étapes de conception, telles que la création d’une page web, l’ajout de contenu multimédia, etc.

3h04 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :25 janv. 2017

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 !