Dans la première partie de ce tutoriel, vous apprendrez à configurer un site Dreamweaver et à définir l'emplacement local des fichiers et dossiers.
5496-create-first-website_1408x792

Introduction

Dreamweaver est le programme idéal pour concevoir des sites web de manière visuelle. Toutefois, l'interface peut sembler complexe de prime abord, compte tenu de la multitude de fonctionnalités disponibles.

Ce tutoriel en huit parties a été conçu pour vous guider tout au long du processus de création d'un site web à la fois simple et élégant dans Dreamweaver CC 2015. Vous apprendrez à configurer un site, à définir sa structure à l'aide d'éléments HTML (Hypertext Markup Language), à ajouter du texte et des images et à mettre en forme les pages avec des feuilles de style CSS (Cascading Style Sheets).

Par souci de concision, vous créerez seulement deux pages. Toutefois, à la fin de ce tutoriel, vous disposerez des connaissances suffisantes pour créer d'autres pages de manière autonome.


Remarque
 : aucune expérience préalable de Dreamweaver n'est requise pour suivre ce tutoriel. En revanche, des connaissances générales du langage HTML et des feuilles de style CSS vous aideront à mieux comprendre la plupart des points abordés. Les standards web HTML et CSS étant ouverts, de nombreuses ressources sont disponibles pour apprendre à maîtriser ces technologies. Nous vous recommandons notamment le tutoriel Définition de la structure de page en HTML, le tutoriel Comprendre les feuilles de style CSS et la formation HTML & CSS.

Ce que vous allez créer

Vous allez tout d'abord télécharger les fichiers d'exemple et examiner le projet finalisé.

  1. Téléchargez les fichiers d'exemple en cliquant sur le lien correspondant en haut de cette page.

  2. Les fichiers sont regroupés dans un fichier ZIP. Décompressez-les dans un emplacement approprié, sur votre bureau par exemple.  
    • Sous Mac OS X, cliquez sur l'archive ZIP dans le Finder pour extraire automatiquement les fichiers.
    • Sous Windows, cliquez avec le bouton droit sur l'archive ZIP, puis choisissez Extraire tout dans le menu contextuel. Enregistrez les fichiers à l’emplacement souhaité et cliquez sur Extraire.
       
  3. Les fichiers extraits incluent un dossier nommé bayside. Celui-ci contient neuf sous-dossiers, comme illustré en Figure 1.
fig01
Figure 1. Les fichiers d'exemple contiennent le projet à chaque étape du développement.

    Le dossier content inclut le texte des pages web, et le dossier js un fichier JavaScript qui servira à contrôler le menu de navigation sur les terminaux mobiles. Les autres dossiers contiennent une version complète du projet à la fin de chaque partie du tutoriel. Vous pouvez vous en servir pour comparer les éventuelles différences avec votre propre code. Aucun dossier n'est prévu pour la huitième et dernière partie, celle-ci ayant pour objectif de vous expliquer comment transférer le projet finalisé sur un serveur web.

  1. Ouvrez le dossier part7, puis déposez le fichier index.html dans une fenêtre du navigateur pour l'afficher. La page d'accueil du projet finalisé est présentée en Figure 2.
fig02
Figure 2. La page d'accueil du projet finalisé est répartie sur deux colonnes.
  1. Redimensionnez la fenêtre du navigateur en faisant glisser l'un de ses bords vers l'intérieur. Lorsque la largeur est inférieure à 700 pixels, la mise en page change, et le contenu apparaît sur une seule colonne. La barre de navigation est remplacée par le terme MENU sur un fond noir. Le texte en blanc dans l'encadré sur l'image du Golden Gate Bridge apparaît en rose foncé en dessous de l'image, comme illustré en Figure 3.
fig03
Figure 3. Sur un écran moins large, la page s'affiche sur une seule colonne.
  1. Cliquez sur MENU. Le menu de navigation se développe en toute fluidité et se présente sur un fond noir semi-transparent (voir Figure 4).
fig04
Figure 4. Le menu de navigation se développe à l'écran.
  1. Cliquez de nouveau sur MENU. Le menu de navigation se réduit et disparaît.

  2. Développez de nouveau le menu, puis cliquez sur SIGHTS pour afficher la deuxième page (les autres éléments de menu sont des liens fictifs).

Voilà ce que vous allez créer dans Dreamweaver CC 2015 tout au long de ce tutoriel. À cette occasion, vous apprendrez à :

  • Définir un site dans Dreamweaver

  • Créer la structure d'une page web à l'aide d'éléments HTML5

  • Utiliser le panneau DOM pour accéder aux différents éléments de page et en ajouter de nouveaux

  • Ajouter du texte et des images sur la page

  • Télécharger et rééchantillonner des images à partir d'une Bibliothèque Creative Cloud

  • Mettre en forme la page avec CSS Designer

  • Créer une seconde page web reprenant la mise en forme de la première

  • Contrôler les différentes mises en page via la barre de requêtes multimédias visuelles

  • Transférer les pages finalisées sur un serveur web

Au fil de ce tutoriel, vous vous familiariserez avec les principaux composants de l'interface de Dreamweaver.

Prévoyez suffisamment de temps pour suivre ce tutoriel approfondi. Chaque partie a été divisée en courtes sections qui vous expliquent quoi faire, mais surtout pourquoi. Avant de passer à une nouvelle section, vérifiez que vous avez bien compris les différentes techniques abordées.

Remarque : ce tutoriel a été conçu pour Dreamweaver CC 2015.2. Il fait appel à des fonctionnalités non disponibles dans les versions antérieures. Bien qu'il soit possible de créer le même site à partir d'une version précédente du logiciel, nous vous recommandons d'utiliser Dreamweaver CC 2015.2. Si vous n'êtes pas abonné à Creative Cloud, vous pouvez télécharger la version d'essai gratuite.

Sélection de l'espace de travail de Dreamweaver

Commencez par activer l'espace de travail Création. Vous aurez ainsi accès à tous les panneaux nécessaires pour ce tutoriel. Sous Windows, utilisez le menu déroulant en haut à droite de l'écran pour changer d'espace de travail (voir Figure 5).

fig05
Figure 5. Sélectionnez l'espace de travail Création.

Sous Mac OS X, le menu de sélection de l'espace de travail est situé par défaut au même endroit. Si vous avez désactivé le cadre de l'application, vous trouverez ce menu sur la gauche. S'il n'est pas visible, c'est que vous avez également désactivé la barre de l'application. Dans ce cas, sélectionnez Fenêtre > Présentation de l'espace de travail > Création.

Configuration d'un site dans Dreamweaver

Lorsque l'on débute dans Dreamweaver, on a souvent tendance à oublier de configurer un site et à commencer à travailler directement sur les pages web. Dans ce cas, les ressources comme les images et les feuilles de style renvoient à un emplacement sur l'ordinateur local. Tout fonctionne correctement jusqu'au transfert du site sur un serveur distant. Les liens sont alors rompus et doivent être corrigés. Pour éviter ce problème, commencez toujours par configurer un site. Cette opération est rapide et simple.

Dans Dreamweaver, un site permet d'organiser tous les documents sur l'ordinateur local qui lui est associé, mais aussi de gérer les liens et fichiers et de transférer l'ensemble sur un serveur web. En général, un site Dreamweaver comporte au moins deux parties :

  • Dossier local : il s'agit de votre répertoire de travail — généralement un dossier sur votre disque dur. Dreamweaver considère ce dossier comme la racine du site local.

  • Dossier distant : il s'agit de l'emplacement de stockage des fichiers sur l'ordinateur exécutant le serveur web. En général, le serveur web correspond à l'ordinateur qui rend votre site publiquement accessible sur le web.

Conseil : si vous prévoyez de travailler sur plusieurs sites, nous vous recommandons de créer un dossier sur votre disque dur local pour les stocker. Sous Mac OS X, votre dossier utilisateur (illustré par une maison) inclut déjà un dossier nommé Sites. Sous Windows, créez un dossier nommé Sites à la racine du disque C. Bien que les captures d'écran de ce tutoriel aient été réalisées sous Windows, les instructions sont identiques sous Mac OS X, à l'exception des raccourcis clavier et du nom de certains boutons (les deux versions sont indiquées).

Configuration du dossier local du site Bayside Beat

Pour commencer, vous allez nommer votre site et spécifier l'emplacement de stockage des fichiers sur votre ordinateur. Il est inutile de configurer le dossier distant tant que le site n'est pas prêt à être transféré sur un serveur web.

  1. Ouvrez Dreamweaver et sélectionnez Site > Nouveau site. La boîte de dialogue Configuration de site s’affiche.

  2. Dans le champ Nom du site, saisissez Bayside Responsive. Ce nom est utilisé en interne par Dreamweaver pour identifier le site. Il peut comporter des espaces ou non.

  3. Cliquez sur l’icône de dossier en regard du champ Dossier local du site, puis sélectionnez le dossier bayside dans les fichiers d’exemple téléchargés. La boîte de dialogue Configuration de site doit à présent être identique à celle présentée en Figure 6, sachant que le chemin d'accès au dossier local du site varie en fonction de l'emplacement du dossier bayside sur votre disque dur.
fig06
Figure 6. Définissez le dossier local du site Bayside Responsive.
  1. Développez la section Paramètres avancés dans le volet de gauche de la boîte de dialogue Configuration de site, puis sélectionnez Infos locales.

  2. Cliquez sur l'icône de dossier à droite du champ Dossier des images par défaut pour afficher la boîte de dialogue Choisir le dossier des images.

  3. Cliquez sur Nouveau dossier (cette option est située en haut de la boîte de dialogue sous Windows, et en bas sous Mac OS). Nommez le nouveau dossier « images », puis cliquez sur Sélectionner un dossier (Windows) ou Choisir (Mac). La boîte de dialogue Configuration de site doit à présent avoir la même apparence qu'en Figure 7.
fig07
Figure 7. Définissez le dossier des images par défaut.
  1. Conservez les valeurs par défaut pour les autres options. Il n'est pas nécessaire de renseigner le champ URL Web, étant donné que nous allons uniquement utiliser des liens pointant vers le document.

  2. Cliquez sur Enregistrer

Le panneau Fichiers de Dreamweaver affiche le nouveau dossier racine local du site (voir Figure 8). Vous pouvez l'utiliser pour copier, coller, supprimer, déplacer et ouvrir des fichiers, comme vous le feriez sur le poste de travail.

fig08
Figure 8. Le dossier des fichiers et images d'exemple dans le panneau Fichiers.

Vous avez maintenant configuré un dossier local pour le site Bayside Beat. Les copies de travail des pages web seront stockées ici sur votre ordinateur. Vous avez également spécifié le dossier par défaut pour le stockage des images. Dreamweaver y copiera automatiquement les images importées depuis un emplacement extérieur au dossier racine du site.

Meilleures pratiques pour la dénomination des fichiers et dossiers d'un site web

Un site web contient généralement un grand nombre de fichiers et de dossiers. Il est donc important de les organiser de façon logique. Créez des dossiers distincts et explicites pour les images, les vidéos, les feuilles de style et les fichiers JavaScript externes. Rappelez-vous également les points suivants :

  • Les noms de fichier et de dossier ne doivent jamais contenir d'espace, ni les caractères suivants : /\?%*:|”<>.

  • Bien que d'autres caractères spéciaux soient admis, mieux vaut s'en tenir aux caractères alphanumériques, aux tirets et aux caractères de soulignement.

  • Les noms de fichier et de dossier sont souvent repris dans les URL de pages web. Il est donc recommandé d'opter pour des noms à la fois succincts et explicites. Les URL longues sont difficiles à mémoriser et à saisir dans les navigateurs des terminaux mobiles.

  • La grande majorité des sites web sont hébergés sur des serveurs Linux, qui sont sensibles à la casse. En utilisant uniquement des minuscules dans les noms de vos fichiers et dossiers, vous n'aurez aucun mal à les retrouver.

Enregistrement des ressources du projet dans une Bibliothèque Creative Cloud

Les images et la palette chromatique de ce projet sont stockées en ligne dans une Bibliothèque Creative Cloud partagée. Les Bibliothèques CC vous permettent d'accéder à vos ressources visuelles en tout lieu. Elles sont particulièrement utiles lorsque vous collaborez avec d'autres personnes. Par exemple, quelqu'un peut être responsable de la création des ressources visuelles, tandis que vous vous chargez de la construction du site. Consultez la documentation en ligne pour en savoir plus sur l'utilisation des Bibliothèques CC dans Dreamweaver.

Vous devez enregistrer les ressources de la bibliothèque partagée dans l'une de vos bibliothèques.

  1. Utilisez les ressources de la bibliothèque Bayside Beat.

  2. Cliquez sur Enregistrer dans Creative Cloud en haut à droite de la fenêtre du navigateur, puis enregistrez les ressources partagées dans votre bibliothèque Bayside si ce n'est pas déjà fait.

  3. Sélectionnez la bibliothèque Bayside dans le panneau Bibliothèques CC de Dreamweaver. Quatre images et six couleurs doivent s'afficher, comme illustré en Figure 9.
fig09
Figure 9. Les ressources partagées de la Bibliothèque CC Bayside.

Création des pages web

Vous allez créer le site web Bayside Beat de A à Z. Les fichiers d'exemple que vous avez téléchargés contiennent des documents Microsoft Word et RTF, un fichier JavaScript et une copie du projet à chaque étape du développement. Vous pourrez ainsi effectuer une comparaison avec vos propres fichiers de travail.

Commençons par créer deux pages HTML pour le site.

  1. Si l'écran de démarrage de Dreamweaver est visible, cliquez sur HTML dans la section Créer. Sinon, choisissez Fichier > Nouveau > dans le menu principal. Dans les deux cas, la boîte de dialogue Nouveau document s'affiche (voir Figure 10).
fig10
Figure 10. La boîte de dialogue Nouveau document permet de créer différents types de fichiers.
  1. Vérifiez que l'option Nouveau document est sélectionnée dans la colonne de gauche, que le format HTML est sélectionné sous Type de document et que l'onglet Aucun est affiché sous Structure.

  2. Saisissez Bayside Beat: Cable Cars dans le champ Titre.

  3. Vérifiez que la liste Type de document est définie sur la valeur par défaut HTML5 et que le champ Joindre un CSS est vide. Si ce champ comporte des éléments, sélectionnez-les, puis cliquez sur l'icône de corbeille à droite.

  4. Cliquez sur Créer. Dreamweaver crée alors une page HTML vierge dans la fenêtre Document.

  5. Si nécessaire, cliquez sur le bouton Fractionner (voir Figure 11) en haut à gauche de la fenêtre Document pour afficher le balisage HTML sous-jacent.
fig11
Figure 11. Cliquez sur Fractionner pour afficher le code sous-jacent dans la fenêtre Document.
  1. La fenêtre Document (ou le mode En direct) est vide, mais la structure HTML de base apparaît en mode Code, comme illustré en Figure 12.
fig12
Figure 12. Dreamweaver crée automatiquement la structure HTML de base.

    La ligne 1 contient la déclaration du type de document (doctype), indiquant au navigateur qu'il s'agit d'un fichier HTML.

    Le langage HTML repose sur l'utilisation de balises entourées de chevrons. La plupart des balises vont par paires, la balise fermante étant signalée par une barre oblique située après le chevron ouvrant.

    La page est délimitée par une paire de balises <html> (lignes 2 et 10). La section <head> située entre les lignes 2 et 6 contient des informations destinées au navigateur. Le contenu de la page est placé entre les balises <body> ouvrante et fermante.

    La plupart du temps, Dreamweaver crée tout le code nécessaire lorsque vous utilisez son interface graphique et ses boîtes de dialogue. Vous devez toutefois faire attention lorsque vous copiez et collez du code extérieur. À l'image des hommes, les pages HTML ne peuvent avoir qu'une seule tête (head) et qu'un seul corps (body). Si le contenu ne s'affiche pas dans le mode En direct ou dans le navigateur, il y a de fortes chances pour que vous l'ayez copié en dehors du corps de la page.

  1. Enregistrez le fichier en sélectionnant Fichier > Enregistrer ou en utilisant le raccourci clavier Ctrl + S (Windows) ou Cmd + S (Mac OS).

  2. Dans la boîte de dialogue Enregistrer sous, vérifiez que vous êtes bien dans le dossier local bayside, nommez le fichier index.html, puis cliquez sur Enregistrer.
  3. Le fichier est maintenant répertorié dans le panneau Fichiers, et son nom apparaît dans l'onglet en haut à gauche de la fenêtre Document.

    Conseil : pour accéder au dossier local du site actuel, cliquez sur le bouton Racine du site au bas de la boîte de dialogue Enregistrer sous.

  4. Créez un autre fichier HTML. L'écran de bienvenue ayant disparu, choisissez Fichier > Nouveau pour afficher la boîte de dialogue Nouveau document. Vous pouvez aussi utiliser le raccourci clavier Ctrl + N (Windows) ou Cmd + N (Mac OS).

  5. Sélectionnez les mêmes options qu'à l'étape 2, mais cette fois-ci, laissez le champ Titre vide, puis cliquez sur Créer.

  6. Nommez le fichier sights.html, puis enregistrez-le dans le dossier racine du site.

  7. En mode Fractionner, la valeur spécifiée entre les balises <title> à la ligne 5 est Document sans nom.

    Il s'agit du texte qui apparaîtra dans l'onglet ou la barre de titre du navigateur et qui sera utilisé par les moteurs de recherche. Les débutants ont souvent tendance à oublier de le modifier.

    Pour modifier cette mention, deux possibilités :

    • Remplacez-la directement dans la fenêtre de code, en veillant à ne pas toucher aux balises HTML ouvrante et fermante.

    • Utilisez l'inspecteur Propriétés de Dreamweaver, comme nous allons le faire ici.
  8. L'inspecteur Propriétés est le grand panneau horizontal situé au bas de la fenêtre Document dans l'espace de travail Création. S'il n'est pas visible, cliquez sur l'onglet Propriétés pour l'afficher (il est initialement masqué par le panneau Sortie).
  9. Dans le champ Titre du document, remplacez Document sans nom par Bayside Beat: Sightseeing. Lors de la saisie, le code HTML sous-jacent n'est pas modifié.

  10. Pour confirmer la modification, appuyez sur la touche Tab ou Entrée/Retour. La valeur saisie dans le champ Titre du document remplace la mention Document sans nom dans le code HTML à la ligne 5 (voir Figure 13).
fig13
Figure 13. Utilisez l'inspecteur Propriétés pour définir le titre du document.
  1. Enregistrez le fichier sights.html.

Bien que Dreamweaver crée automtatiquement le balisage HTML, nous vous recommandons, de manière générale, de rester en mode Fractionner lorsque vous créez des pages web. Cela vous permettra de vérifier que les modifications effectuées sont correctement appliquées. Évidemment, cela ne veut pas dire que Dreamweaver manque de fiabilité. Sauf cas exceptionnels, l'application fera exactement ce que vous lui demanderez, mais il est important de savoir se situer dans le document. En effet, le code est toujours ajouté au point d'insertion. Donc si vous ne faites pas attention à l'emplacement de ce dernier, vous risquez de vous retrouver dans des situations difficiles à résoudre. Le panneau DOM, que nous utiliserons dans la prochaine partie de ce tutoriel, est lui aussi très utile pour garder un œil sur la structure de la page.

Conseil : si vous préférez afficher le code sous-jacent en regard de la représentation graphique de la page, sélectionnez Affichage > Fractionner verticalement. Pour repasser à un affichage horizontal, sélectionnez de nouveau la même option. Le menu Affichage vous permet aussi de choisir de quel côté afficher le mode En direct. Déplacez la barre séparant les modes Code et En direct pour ajuster la taille des deux fenêtres. Dreamweaver mémorise automatiquement vos préférences.

Pour aller plus loin

Maintenant que vous avez configuré votre site et créé deux pages web vierges, vous allez pouvoir y ajouter du contenu. Passez à la suite du tutoriel, Partie 2 : ajout et mise en forme de texte.

04/13/2018

Contributeurs : David PowersTom Alex Buch

Cette page vous a-t-elle été utile ?