Comment utiliser adobe Dreamweaver en 5 étapes ?

Adobe Dreamweaver est un programme d’édition de sites internet aux nombreuses fonctionnalités, qui est utilisé aussi bien par les professionnels que par les débutants. Développé à l’origine par Macromedia, il est maintenant développé et édité par la firme Adobe Systems (qui a racheté Macromedia fin 2005). Les dernières versions de Dreamweaver intègrent le développement avec des technologies telles que CSS, JavaScript, et des langages et frameworks tels que ColdFusion, ASP et PHP. Le succès de Dreamweaver repose pour beaucoup sur la possibilité qu’il offre aux concepteurs de sites internet d’avoir un aperçu en temps réel dans leur navigateur de l’aspect du site conçu. Dans cet article, nous vous présentons, en cinq étapes, comment utiliser Adobe Dreamweaver pour concevoir un site web, en toute simplicité.

Etape 1 : Comprendre les possibilités de Dreamweaver pour concevoir un site web

Adobe Dreamweaver vous offre la possibilité de créer tous les types de site internet : un site vitrine pour exposer des services, un site marchand (e-commerce) avec des milliers de références, un site pour un journal sportif … Malgré l’impressionnant nombre de langages de développement pris en charge, sa prise en main est déconcertante de simplicité. D’abord, Adobe Dreamweaver repose sur le principe du « What you see is what you get » (WYSWIG) : vous obtenez ce que vous voyez. Qu’est-ce que cela veut dire ? Supposons que vous écriviez un texte de bienvenue sur votre site, vous mettez en forme le titre de votre texte pour qu’il apparaisse en grand. Pas besoin de coder : il vous suffit de sélectionner le texte, et de le mettre en forme via une barre à outils. Même chose si vous souhaitez insérer un album photo sous le texte, insérer un lien vers une vidéo YouTube, une barre de défilement … prenez le temps de découvrir et explorer les possibilités offertes par l’éditeur de Dreamweaver pour produire des résultats spectaculaires. Adobe Dreamweaver peut bien sûr être acheté à titre individuel, mais il est préférable d’acquérir la suite Adobe CS Suite pour basculer d’un logiciel de retouche, à un programme de conception vidéo : concevez une maquette sur Adobe Photoshop et Illustrator, créez une petite animation sous Adobe Flash, et intégrez le tout dans Adobe Dreamweaver ! Grâce à Adobe Contribute et Dreamweaver, vous pouvez par exemple modifier un contenu sur votre site distant. Pratique quand vous identifiez après coup une faute de frappe dans un texte déjà mis en ligne …

Etape 2 : Configurer Adobe Dreamweaver

Avant de commencer à insérer du contenu HTML dans votre projet de site web, la première étape consiste à configurer Adobe Dreamweaver. Pour résumer, vous indiquez où se trouvent les composants du projet (page .html, contenue.css, images, vidéos …), qu’ils soient sur votre disque dur (on dira en « local ») ou sur les serveurs de votre prestataire en hébergement (on dira en « distant »). Commencez par spécifier un répertoire de référence, où ces composants seront regroupés. Utiliser l’onglet GERER LE SITE. Impératif, pour que Dreamweaver crée correctement les liens URL pour chaque page de votre site. Des liens mal configurés vous donneront du fil à retordre au moment de la publication (nous y reviendrons). Le code produit avec Dreamweaver est, sachez-le, conforme aux standards posés par le W3C (World Wide Web Consortium), l’organisme qui contrôle internet. Comme indiqué précédemment, l’approche WISWYG de Dreamweaver vous permet d’enrichir rapidement vos pages avec les éléments qu’il vous faut : texte, images avec habillage carré, vidéo, lien vers un tweet, lien de téléchargement. Donc, si vous décidez de créer des styles CSS, le logiciel les intègre pour vous dans les pages du site. A contrario, si vous décidez de vous plonger dans un codage en ColdFusion, ASP ou Python, l’éditeur Dreamweaver vous aidera en surlignant d’éventuelles erreurs de code. Donc, pour cette étape, résumons la marche à suivre : - Fenêtre Dreamweaver, - FICHIER > GERER LES SITES pour le répertoire de référence, - Fenêtre des informations locales, permettant de définir un nom pour votre site et choisir un emplacement en local, - Fenêtre Hébergement du site, permettant de renseigner les informations sur l’hébergeur de votre site : INFOS DISTANTES > Accès FTP Ce dernier point, celui des informations distantes, est parfois délicat. Quatre informations doivent être renseignées : le type d’accès (FTP), l’hôte FTP (par exemple : ftp.siteweb.fr), le répertoire de l’hôte (par exemple : /sitepublic/www) et les infos d’utilisateur (nom et mot de passe).

Etape 3 : Récupérer une page web distante

Par principe, avant de procéder à la modification d’une page, restez ordonné en récupérant la page sur le site (c’est-à-dire sur le site de l’hébergeur), afin de ne pas écraser une version récente de la page. Pour cela, utilisez le client FTP d’Adobe Dreamweaver. Cliquez sur DEVELOPPEUR, pour afficher la liste des fichiers distants et des fichiers en local. Ensuite, sélectionnez SE CONNECTER A UN HOTE DISTANT pour que Dreamweaver affiche tous les fichiers disponibles chez votre hébergeur et qui vous sont accessibles. Utilisez un simple Cliquer-Glisser pour déplacer la page dans la partie de gauche (celles des fichiers distants) vers le panneau de droite (celle des fichiers en local). Voilà, vous pouvez commencer vos modifications en toute sécurité.

Etape 4 : Modifier un document HTML

Maintenant que vous êtes certain d’avoir la version la plus récente de la page à modifier, commencez vos modifications. A nouveau, utilisez le bouton DEVELOPPEUR pour afficher de nouveau les fichiers en local et naviguez vers la page nouvellement importée (par exemple : accueil.htm, index.php …). Double-cliquez pour ouvrir le fichier. Les modifications faites, vous pouvez utiliser la touche F12 pour visualiser un aperçu de votre page dans le navigateur. Dreamweaver reste en quelque sorte « à l’écoute » : au fur et à mesure que vous saisissez votre code, des indicateurs et des conseils de code s’affichent pour vous aider à corriger d’éventuelles fautes. De la documentation est même disponible pour les différents langages, grâce à la fonction DOCUMNTATION RAPIDE. Dreamweaver va encore plus loin en vous permettant d’insérer des fragments de code prêts à l’emploi ! Pour cela, vous disposez d’un panneau FRAGMENTS DE CODE lorsque vous saisissez du code. Le mode Curseurs multiples vous autorise également à créer et modifier plusieurs morceaux de code simultanément. L’éditeur de code de Dreamweaver fourmille d’outils pour vous permettre de modifier le code de manière rapide, fiable et réversible : - Fonction RECHERCHER et REMPLACER : pour rechercher du texte, des attributs et des balises dans le code de votre page, - Fonction NAVIGATION : utile lorsque vous souhaitez accéder à du code sans forcément ouvrir un fichier, - Menu contextuel : liste de commandes accessible depuis un clic droit, - Fonction ENVELOPPER AVEC BALISE : pour envelopper des groupes de lignes de code avec des balises,

Etape 5 : Mettre en ligne le site

A l’issue de toutes vos modifications, et lorsque vous êtes satisfait du résultat (rappel : touche F12 pour visualiser un aperçu dans votre navigateur), il ne vous reste plus qu’à mettre en ligne votre page (ou votre site). Cela se fait toujours via le client FTP de Dreamweaver. Comme dans l’étape 2, celle qui consistait à récupérer une page, vous cliquez sur le bouton DEVELOPPEUR pour faire apparaître les listes, côte à côte, des fichiers en distant et des fichiers en local. Vous l’avez deviné, c’est l’opération inverse qu’il vous faudra réaliser : un copier-glisser du panneau droit vers le panneau gauche. Le reste relève de la navigation telle qu’elle se ferait par un visiteur lambda de votre site internet. Saisissez l’URL dans la barre de navigation de votre navigateur et vérifiez le résultat.