Carrefour de l information Université de Sherbrooke Création de sites Web à l aide de Dreamweaver CS3 Par : Josée Martin Édition revue et augmentée par Marc-André Dulude Édition revue et augmentée par Lauréanne Marceau Édition revue et augmentée par Émilie Chacon Sherbrooke Hiver 2011
Table des matières Introduction à Dreamweaver MX 2004 1 À quoi sert Dreamweaver? 1 Qu est-ce que le HTML? 1 Avant de commencer 2 Présentation des fenêtres et des panneaux 9 La page de démarrage 9 La barre Insérer 9 La barre d outils Document 10 L Inspecteur de propriétés 10 Les groupes de panneaux 11 Enregistrez votre page 11 Qu est-ce que le fichier index.html? 12 Régler les propriétés d une page 13 Les cadres 15 Insérer un tableau 16 La section Taille du tableau 18 La section En-tête 18 La section Accessibilité 18 Insérer des images 19 Créer un bouton Flash 20 Insérer des liens hypertextes 22 Créer un hyperlien vers une page de votre site (relatif) 22 Créer un hyperlien vers un autre site (absolu) 23 Créer un hyperlien vers une ancre nommée 23 Les feuilles de style 25 Quelques petits trucs pour réussir vos sites Web 27 Quelques définitions à retenir 28 À quoi sert le logiciel FTP? 28 Qu est-ce qu un serveur? 29 Qu est-ce que le Javascript? 29 Qu est-ce que le JAVA? 29
1 Introduction à Dreamweaver CS3 À quoi sert Dreamweaver? Dreamweaver est l'un des éditeurs HTML les plus utilisés. Il vous permet de créer vos pages dans un environnement WYSIWYG (What You See Is What You Get) tout en rédigeant un code HTML propre. En effet il : rédige un code HTML économique (pas de codes inutiles, ce qui allège la page); utilise le HTML à 100 % (ce qui n'est pas le cas de FrontPage qui possède ses propres composants). Qu est-ce que le HTML? On se rappellera que le rôle de l éditeur, tel que Dreamweaver, est de coder en langage HTML (Hyper Text Markup Language) ce que l on insère dans nos pages Web. En résumé, on pourrait dire que le HTML, qui tire son origine du langage SGML (Standard Generalized Markup Language), est un type particulier d annotation destiné au WWW (World Wide Web) et qui correspond à une collection de styles reconnaissables par les navigateurs. Les navigateurs (dont Internet Explorer, Firefox Mozilla et Safari) sont des logiciels qui interprètent à l écran les commandes HTML contenues dans un document accessible sur le WWW. Bref, ils convertissent les codes HTML en textes et graphiques de pages Web, afin que le fureteur les affiche à l écran.
2 Avant de commencer Avant de commencer à créer votre site Web, il importe, dans un premier temps, que vous planifiiez votre projet. Tout bon site Web possède une structure. La plus simple correspond à une hiérarchisation des thèmes, qui sont divisés par page. Une bonne façon de faire serait de dessiner, sur une feuille de papier, la page portail ainsi que les pages annexes. Page d accueil : Les sports d équipe 1- Le soccer 2- Le hockey 3- Le volleyball Le soccer - Les origines - Les règlements Le volleyball - Les origines - Les règlements Le hockey - Les origines - Les règlements
9 Présentation des fenêtres et des panneaux La page de démarrage Cette page vous permet d ouvrir un document récent ou de créer un nouveau document. Elle contient également des informations complémentaires sur Dreamweaver (visite de Dreamweaver et didacticiel). Vous n avez donc qu à cliquer sur l icône représentant le type de document que vous voulez créer. La barre Insérer Cette barre contient des boutons qui sont regroupés par catégories. Vous y retrouvez la catégorie Commun, Texte, Mise en forme, HTML, etc. Cette barre
10 vous permet entre autres d insérer divers types d objets tels que des hyperliens, des images, des tableaux, des calques, etc. La barre d outils Document Elle contient des boutons et des menus déroulants permettant d accéder aux différents modes d affichage de la fenêtre du document (tels que le mode Code, Création ou Code et Création) et d effectuer certaines opérations courantes, telles que la prévisualisation dans un navigateur. L Inspecteur de propriétés L Inspecteur de propriétés vous permet d afficher les propriétés de l élément sélectionné dans la page et ainsi de le modifier.
11 Les groupes de panneaux Les groupes de panneaux sont des ensembles de panneaux associés et regroupés selon leurs fonctions. Pour développer un groupe de panneaux, cliquez sur la flèche d agrandissement située à gauche du nom du groupe. Pour détacher un groupe de panneaux, faites glisser la poignée d ancrage sur le côté gauche de la barre de titre du groupe. Bien sûr, il existe beaucoup d autres panneaux, inspecteurs ainsi que des fenêtres qui ne sont pas affichés. Afin de les faire apparaître, utilisez le menu Fenêtre. Enregistrez votre page N oubliez pas d enregistrer votre projet! Pour ce faire, cliquez sur Fichier / Enregistrer sous Il est également très important que tous les fichiers que vous allez utiliser pour la création de votre site Web soient enregistrés dans le même répertoire. (images, boutons, etc.)
12 On recommande de nommer la page d accueil, ou la page portail, index.html. Ensuite, on nomme les autres pages d'un nom significatif. Toutefois, vous devrez respecter certaines règles lorsque vous écrirez vos noms de fichiers, spécialement si vous utilisez un serveur de type Unix : 1. Pas d accents 2. Pas d espaces 3. Pas de majuscules 4. Pas de signe diacritique sauf «_» Qu est-ce que le fichier index.html? Le fichier index.html est très important. C'est votre fichier par défaut qui se trouvera sur la racine de votre site Web (l'équivalent de C: pour votre disque dur). Également, c est ce fichier qui s'affiche par défaut en l'absence de spécification d'un nom de fichier. En effet, lorsque vous accédez à un site, vous tapez son adresse comme suit : http://www.monsite.com. En réalité, le fichier qui est ouvert lorsque vous appelez cette adresse est index.html, c'est-à-dire http://www.monsite.com/index.html. Vous ne voyez pas le fichier index.html dans la barre d'adresses, car c'est le fichier pris par défaut par votre serveur d'hébergement. Souvent, c est la page d accueil qui porte le nom index.html. À vérifier : selon les hébergements, ce fichier par défaut peut différer. Il peut donc porter les noms suivants : index.htm index.html
13 default.htm (serveurs anglophones) default.html (serveurs anglophones) Note Lorsque vous mettez en ligne votre site en téléversant vos fichiers sur le serveur, vous devez savoir qu il est très important de ne pas oublier de téléverser le fichier index.html. En effet, l'absence du fichier index.html permet d'accéder à la liste des fichiers contenus dans un site (arborescence) et donc, de les copies! Régler les propriétés d une page Afin de régler les propriétés de votre page, vous pouvez faire un clic droit de la souris sur l espace de travail. Un menu contextuel apparaît. Cliquez ensuite sur Propriétés de la page. Vous pouvez aussi cliquer le bouton Propriétés de la page dans l inspecteur de propriétés situé au bas de l interface de travail.
14 La boîte de dialogue Propriétés de la page apparaît ensuite : Cette boîte de dialogue permet de spécifier la famille et la taille par défaut de la police, la couleur d arrière-plan, les marges, le style des liens ainsi que d autres aspects de la conception de pages. Vous pouvez attribuer de nouvelles propriétés à chaque nouvelle page que vous créez et modifier celles des pages existantes. Note Si vous changez la police d un texte, choisissez des polices courantes, car seules les polices présentes sur l ordinateur de l internaute peuvent être affichées. Il existe sept polices dites «standardisées» dont Arial, Arial Black, Comic Sans Ms, Courrier New, Impact, Times New Roman et Verdana. Si vous désirez utiliser une police qui n est pas dans la liste, deux choix s offrent à vous. 1. Vous pouvez mettre un lien sur votre page pour télécharger la police manquante, ce qui peut être désagréable pour certains utilisateurs;
15 2. vous transformez votre texte en image, ce qui alourdit considérablement la charge d information à télécharger. En ce qui concerne le titre de votre page, il est important de noter que ce dernier est indépendant du nom que vous donnerez à votre fichier HTML au moment de la première sauvegarde de cette nouvelle page. Puisque c est ce nom de fichier qui apparaîtra dans la barre de navigation des navigateurs ainsi que dans les signets, il importe donc de lui donner un nom significatif. Note N oubliez pas que vous pouvez utiliser l inspecteur de propriétés afin de modifier les propriétés les plus fréquentes. Les cadres Afin d améliorer l organisation de votre site Web, vous pouvez créer votre site en cadres. Les cadres sont des emplacements destinés à accueillir un fichier HTML. Créer des cadres Vous pouvez créer des cadres à l aide :
16 1) De la barre Insérer en cliquant sur le bouton Cadres : Vous pouvez aussi modifier la grandeur de vos cadres en déplaçant les côtés de ces cadres. Il est également possible d ajouter des cadres par la suite. Dans le menu Modifier / jeu de cadres. Enregistrer les cadres Puisqu il s agit d un site construit en cadres, vous ne devez pas oublier qu il vous faut enregistrer chaque cadre individuellement et comme jeu de cadres. Pour ce faire : 1) Positionnez-vous dans chacun des cadres et cliquez sur Fichier / Enregistrer le cadre. 2) Pour enregistrer le jeu de cadres, cliquez sur la bordure entourant tous les cadres, puis cliquez sur Fichier / Enregistrer le jeu de cadres. Note Dans un site construit en cadres, le jeu de cadres (le métafichier) contient toutes informations concernant l affichage (quel fichier, leur disposition et leurs dimensions). C est donc vers ce fichier que doit pointer l adresse de votre site. Pour être certain d enregistrer tous les fichiers, vous pouvez aller dans Fichier / Enregistrer tout. Insérer un tableau
17 Afin de faciliter la mise en page de votre document, les tableaux vous seront d une aide bien précieuse. Ils vous permettront de structurer votre information et ils pourront vous servir de modèles pour l ensemble de votre site Web. Pour insérer un tableau, cliquez sur Insertion / Tableau. La boîte de dialogue Tableau apparaît.
18 La section Taille du tableau Lignes : détermine le nombre de lignes du tableau. Colonnes : détermine le nombre de colonnes du tableau. Largeur du tableau : indique la largeur du tableau en pixels ou en pourcentage. Largeur de la bordure : indique l épaisseur, en pixels, de la bordure de la cellule du tableau. Marge intérieure des cellules : indique le nombre de pixels qui séparent la bordure d une cellule et son contenu. Espacement entre les cellules : détermine l espacement (en pixels) entre les cellules contiguës d un tableau. La section En-tête Aucun : n autorise pas les en-têtes de colonne ou de ligne pour le tableau. Gauche : transforme la première colonne du tableau en colonne d entêtes pour vous permettre d entrer un en-tête pour chaque ligne du tableau. Haut : transforme la première ligne du tableau en ligne d en-têtes pour vous permettre d entrer un en-tête pour chaque colonne du tableau. Les deux : vous permet d entrer des en-têtes de colonne et de ligne dans le tableau. La section Accessibilité Légende : fournit un titre de tableau qui s affiche en dehors du tableau. Aligner la légende : indique où la légende du tableau apparaît par rapport au tableau. Résumé : fournit une description du tableau.
19 Lorsque vous avez inséré votre tableau, vous pouvez ensuite modifier ses propriétés à l aide de l Inspecteur de propriétés. Insérer des images Vous pouvez insérer des images à l intérieur du tableau que vous venez de créer. Il vous suffit de cliquer à l intérieur de la cellule du tableau. Ensuite, pour insérer une image, cliquez sur insertion / image ou encore sur le bouton d insertion dans la barre d outils insérer. Une boîte de dialogue apparaît. Il vous suffit maintenant de sélectionner l image désirée et de cliquer sur OK.
20 Note Assurez-vous que l image sélectionnée se retrouve dans le même dossier que votre site. Si, lors du téléchargement de votre site vers le serveur, vous n intégrez pas toutes les images, elles ne s afficheront pas. Ceci est dû au fait que le code HTML généré crée un code de référence. Si le fichier auquel le code fait référence ne se retrouve pas à l endroit indiqué, il ne s affichera pas. Créer un bouton Flash Pour les personnes qui ne possèdent pas le logiciel Flash, sachez qu il est possible de créer des boutons Flash directement dans Dreamweaver. Pour ce faire : 1) Dans le menu Commun, cliquez sur le bouton Support, puis sur Bouton Flash. 2) La boîte de dialogue Insérer le bouton Flash apparaît. Vous pouvez alors choisir le style de votre bouton et sous Texte de bouton, taper le texte qui doit s afficher sur le bouton dans le navigateur.
21 3) Dans la zone Enregistrer sous, indiquez le nom de fichier de votre bouton. 4) Enfin, sous Lien, vous pouvez indiquer l adresse du lien Flash. Cliquez sur Ok pour fermer la boîte de dialogue. Vous pouvez remarquer, dans le panneau Fichiers, la présence d un fichier portant le nom de votre bouton accompagné de l extension.swf.
22 Insérer des liens hypertextes Note Vous devez savoir qu il existe deux types d hyperliens : les hyperliens à adresse absolue et les hyperliens à adresse relative. La distinction entre ces deux types d hyperliens se fait sur la manière dont l adresse, vers un fichier HTML, est saisie. Par exemple, un lien absolu est constitué du chemin complet vers un fichier, tandis qu un lien relatif ne comprend que les noms du fichier et du dossier qui le contient. Vous devez donc utiliser un chemin absolu quand vous créez un lien vers une page ou un fichier qui ne se trouve pas dans votre site (on parle alors de lien externe). Quant aux chemins relatifs, ils sont recommandés pour lier des fichiers au sein du même site. Créer un hyperlien vers une page de votre site (relatif) Pour créer un lien vers une page de votre site, sélectionnez le texte ou l image qui deviendra votre lien. Ensuite, dans l inspecteur de propriétés, dans la section Lien, saisissez directement le nom du fichier. (ex. : soccer.html) Il ne vous reste plus qu à définir la cible, c est-à-dire l emplacement dans lequel le contenu appelé s affichera. Vous avez alors le choix entre :
23 _blank _parent _self _top Ouvre le document lié dans une nouvelle fenêtre du navigateur tout en conservant la fenêtre en cour disponible. Le contenu est affiché dans le premier cadre parent (ceci réfère à une hiérarchie de cadres). Ouvre le lien dans la page ou le cadre en cours, en remplaçant le contenu de cette page ou de ce cadre. Lien vers une pleine page pour sortir des cadres (remplace tous les cadres). Créer un hyperlien vers un autre site (absolu) Pour créer un lien vers un autre site, sélectionnez le texte ou l image qui deviendra votre lien. Ensuite, dans l inspecteur de propriétés, dans la section Lien, entrez l adresse complète du fichier HTML. (ex. : http://www.canadiens.com) Il ne vous reste plus qu à définir la cible. Créer un hyperlien vers une ancre nommée Les ancres nommées permettent de définir des marqueurs dans un document et sont souvent placées au niveau d une rubrique spécifique ou en haut d un document. Vous pouvez ensuite créer des liens vers ces ancres nommées, qui amènent rapidement le visiteur à la position spécifiée. Pour créer une ancre, passez en mode Création. Ensuite, placez le curseur à l endroit où vous désirez insérer l ancre nommée.
24 Ensuite, cliquez sur Insertion, Ancre nommée. La boîte de dialogue Ancre nommée apparaît. Entrez ensuite le nom de l ancre puis cliquez sur Ok. Pour créer votre lien, sélectionnez le texte ou l image à partir desquels créer le lien. Cliquez ensuite sur l icône du pointeur à droite de la zone Lien de l inspecteur de propriétés et faites-la glisser sur l ancre vers laquelle vous souhaitez créer un lien, dans le même document ou dans tout autre document ouvert.
25 Les feuilles de style Avec Dreamweaver, vous pouvez modifier rapidement l apparence de vos pages à l aide des feuilles de style. En effet, les feuilles de style ressemblent étrangement à des modèles et elles vous seront d une aide précieuse afin de mettre en forme divers éléments de vos pages tels que des tableaux, du texte ou des calques. Parfois, il arrive que les feuilles de style portent le nom de «feuilles de style en cascade» ou CSS (Cascading Style Sheets). Créer une feuille de style interne Les feuilles de style internes sont enregistrées dans une page Web et elles peuvent être appliquées uniquement à la page dans laquelle elles sont incorporées. Pour créer une feuille de style interne : 1) Dans l onglet Styles CSS du panneau Création, cliquez sur le bouton Nouveau style CSS. 2) La boîte de dialogue Nouveau style CSS apparaît. Attribuez ensuite un nom à votre nouveau style (sans caractère ni symbole spécial).
26 3) Sous Définir dans, assurez-vous que Seulement ce document est coché et cliquez sur Ok. 4) La boîte de dialogue Définition de style apparaît. Elle vous permet alors de régler vos paramètres. 5) Afin de visualiser les définitions du style que vous venez de créer, vous n avez qu à double-cliquer sur le style dans le panneau Styles CSS. Le
27 panneau Règle s affiche ensuite et vous pouvez apercevoir les définitions du style. Appliquer un style Pour appliquer le style que vous venez de créer, tapez un mot sur la page. Ensuite, dans l Inspecteur de propriétés, déroulez la liste Style et choisissez un style. Quelques petits trucs pour réussir vos sites Web 1. L important, c est le contenu, le message que vous voulez faire passer ou l information que vous voulez livrer à l Internaute. 2. Attention à ne pas trop détourner l attention des lecteurs avec des animations ou des couleurs criardes! Pensez à la lisibilité du texte. L idéal est de se limiter à 3 ou 4 couleurs et à 2 ou 3 polices de caractères. 3. Il importe que le visiteur puisse trouver rapidement ce qu il cherche et revenir tout aussi rapidement au sommaire.
28 4. Évitez la surcharge des pages en y incluant trop d images, d animations, etc. Des pages légères se chargeront beaucoup plus rapidement, ce qui risque de moins exaspérer les Internautes ou de les faire fuir! 5. Attention aux sites construits en cadres, puisqu ils sont très sensibles aux différences de résolution à l affichage. On risque d avoir des barres de défilement un peu partout sur la page en 640 x 480 alors que c est impeccable en 800 x 600. Il est donc important de faire des tests. 6. N oubliez pas de tester votre site une fois qu il a été téléchargé afin de vous assurer que tout fonctionne correctement, dont la fonctionnalité des liens, et que la vitesse est acceptable. 7. Vous devez garder en tête 2 choses en créant votre site : a. Vous devez vous assurer que le site Internet puisse être vu rapidement de tous (souciez-vous de la vitesse de connetion de l internaute) b. Vous devez penser à la résolution de l écran de l internaute. En temps normal, la résolution est de 600 x 800, donnez donc une largeur maximum de 760 pixel de largeur. Quelques définitions à retenir À quoi sert le logiciel FTP? «FTP» signifie File Transfert Protocole. C'est à l'aide de ce logiciel, qui se présente souvent comme un explorateur de fichiers, que vous enverrez vos pages vers votre serveur. Filezilla est un bon exemple de gratuiciel FTP.
29 Qu est-ce qu un serveur? Ce n'est ni plus ni moins un ordinateur dont la fonction principale est de vous envoyer des données (pages, images, programmes, etc.). Qu est-ce que le Javascript? Le Javascript a été créé par Netscape pour développer des applications Internet et, par la même occasion, pour étendre les possibilités du HTML. Il s'agit d'un langage léger et orienté objet, permettant d'écrire des scripts. Il est très souvent utilisé pour ajouter de petites fonctionnalités aux sites Web. Attention! Il ne faut pas confondre JAVA et Javascript! Qu est-ce que le JAVA? Le JAVA est un langage de programmation complet développé par SUN et non un langage de script comme Javascript. Il est dérivé du C++ en plus d être exécutable sous diverses plates-formes telles que Windows et Macintosh. JAVA est devenu un des langages incontournables du Web. Les applets, très souvent rencontrés sur Internet, sont là pour témoigner de la puissance de ce langage. Voici donc les différences en le langage JAVA et le langage Javascript : JAVA Code non intégré dans la page HTML (applet). Code source compilé avant son exécution. Langage de programmation complexe mais illimité (presque). Javascript Code intégré dans la page HTML. Code interprété par le navigateur au moment de l'exécution. Code de programmation simple mais limité.
30 Pas d'accès aux objets du navigateur. Accès aux objets du navigateur.