Pages Web : Dreamweaver et quelques conseils généraux DreamWb2.

doc

Création de pages web

De nombreux documents existent sur le Web, pour vous guider dans la conception et la
réalisation de pages Web en général, et de sites d'établissement en particulier. Voici
une petite liste d'adresses utiles. Le présent document résume les quelques points
principaux, mais ne dispense en aucun cas de consulter ces divers liens…..
________________________________________________________________________
"Créer un site web d'établissement" http://www.crdp.ac-grenoble.fr/utiliser/reseaux/technique/siteweb.htm
"Construire son site web" http://www.uqtr.uquebec.ca/~lamyd/partage/construire_son_site_web/
"Créer et maintenir un site Web éducatif" http://db.ntic.org/nouvelles/nouvelles_vitrine_veille_frame.htf?q_id=279
"Guide de conception péda. et graphique d'un site éducatif" http://www.cpm.ulaval.ca/GUIDEW3EDUCATIF/
"Guide de la home page à l'usage de l'enseignant" http://members.tripod.com/~educaweb
"Construire un site web à l'école, c'est possible !" http://www.cemis-saglac.qc.ca/cemis/webecole/webeco.htm

Pour des conseils plus techniques d'ordre général :

"Site AllHTML : cours complet de HTML, avec des conseils de créations de pages" http://www.allhtml.com/
"Site technosphère : son but est de faire comprendre les technologies du web" http://www.technosphere.tm.fr/
"Ecrire pour le Web, Jakob Nielsen" http://www.useit.com (et plus précisément "Writing for the web - be
succinct" http://www.useit.com/alertbox/9703b.html, qui résume un article plus étoffé du même auteur,
référence en matière de conception de sites Web, consultable à http://www.sun.com/980713/webwriting/)
''Site Mémoclic des conseils et méthodes pour la création de site’’ http://www.memoclic.com/site/
_________________________________________________________________

Avant de vous jeter sur votre éditeur HTML, vous devez savoir répondre aux questions
suivantes :

• Pourquoi créer des pages web ? Quel est le but ?

• Quel est votre public cible (vous ne ferez pas du tout les mêmes pages selon que
votre cible sera des élèves, des enseignants, des parents d'élèves… ou des
entreprises privées équipées d'ordinateurs dernier cri !).
• Comment allez-vous découper et organiser les informations à diffuser ? Sur une
feuille de papier, dessinez l'arborescence de vos pages : à partir de votre page
d'accueil, à quelle(s) autre(s) page(s) le visiteur va-t-il avoir accès ? et comment ?
• Que contiendra chacune des pages en termes de textes, d'images, de photos,… et
bien sûr en termes de navigation ? Ici, interviennent les notions de "charte graphique"
du site et "d'ergonomie" de la consultation.
• Qui maintiendra le site à jour, répondra aux mails ? Un site qui ne "vit" pas est très
vite inutile.

De manière générale, voici en vrac quelques règles d'usages à connaître :

1) La page d'accueil du site doit permettre au visiteur d'identifier "instantanément"

l'identité du site, son contenu, ses nouveautés, ses auteurs… Elle doit donc comporter
une date de mise à jour (au moins pour les rubriques nouvelles, qui doivent être
clairement mises en avant), les références des auteurs (leur statut, leur mail, leurs
objectifs…) ainsi que les principaux boutons de navigation pour se rendre aux
différentes parties. Elle devrait se charger rapidement (en moins de 20 secondes, sous

cecilia.carriere@grenoble.iufm.fr page 1 caroline.schreiber@grenoble.iufm.fr

Pages Web : Dreamweaver et quelques conseils généraux DreamWb2.doc

peine de voir le visiteur cliquer ailleurs) et donc ne pas dépasser un poids de 70 Ko (ce
qui interdit les grosses images, typiques des premiers sites d'école…).

2) La navigation doit être homogène, simple et claire : les mêmes boutons devront
toujours se trouver aux même endroits, les pages devront toujours avoir le même "look"
(d'où l'importance d'avoir réfléchi avant à une charte graphique du site). L'organisation
de l'information doit avoir été pensée pour respecter la règle des 4 clics ("on ne doit
pas avoir besoin de plus de 4 clics pour accéder à l'information recherchée"). Evitez
également le soulignement (il est réservé aux hyperliens).

3) Le visiteur ne doit pas avoir le sentiment d'être perdu : il doit savoir où il se trouve à
chaque instant, quels sont les moyens de "passer" à une autre partie. De même, les
hyperliens doivent annoncer où ils envoient le visiteur avant que celui-ci n'ait cliqué
(pas d'hyperliens ambigus, sans commentaires, …). Une carte du site, accessible
depuis toutes les pages, s'impose souvent lorsque le site "grossit".

4) Les pages doivent être légères, tant sur le plan du poids que sur celui de l'esthétique.
L'important est avant tout la lisibilité (éviter les fonds "moquettes", les contrastes
texte/fonds trop faibles). La lisibilité dépend de la taille des caractères (attention, sous
Mac, les polices sont affichées plus petites), du bon découpage du texte en
paragraphes aérés, de la mise en relief des idées importantes (par le gras, la couleur,
l'indentation…). Pour qu'une page reste lisible, le texte ne devrait pas en occuper plus
25% de la surface.

5) Une page Web n'est pas un document papier ! La lecture écran est 25% plus lente que
la lecture papier : on ne lit pas à l'écran, on scanne. D'où l'importance à accorder
• Aux titres et aux sous-titres
• A la brièveté des textes (50% en moins par rapport à un équivalent papier)
• A l'utilisation des listes à puces
• A une syntaxe simple des phrases
• A l'efficacité d'une écriture en pyramide inversée : donner en premier lieu l'idée
principale (le résumé ou la conclusion) et ne détailler qu'ensuite
• Au bon principe : pas plus d'une idée forte par paragraphe

6) L'hyper-textualité est un bon moyen de raccourcir, d'aller à l'essentiel, de découper et

d'organiser un texte, mais il ne faut pas en abuser (sous peine de perdre l'utilisateur en
quelques clics). Il faut penser à découper le contenu en fonction d'unités
sémantiques, et ne pas "saucissonner" à l'aveugle (pensez aussi que le visiteur aura
peut-être envie d'imprimer "une unité", sans être obligé de charger 10 petites pages
web distinctes).

7) Sur le plan graphique, attention à :

• Ne pas surcharger la page avec des graphiques inutiles (Gifs animés, photo du
boss….)
• Conserver une unité de couleur, de mise en page
• Ne pas utiliser des images "lourdes" (ou prévenir le visiteur de leur poids avant
qu'il ne clique dessus ; utiliser comme hyperliens des vignettes réduites, par
exemple, pointant sur l'image "en grand" contenue dans un autre fichier)
• Pour préserver l'unité visuelle, ne pas utiliser plus de 2 ou 3 polices différentes
(idem pour les couleurs, les images de fond, …)

cecilia.carriere@grenoble.iufm.fr page 2 caroline.schreiber@grenoble.iufm.fr

Pages Web : Dreamweaver et quelques conseils généraux DreamWb2.doc

8) Attention au Copyright : contrairement à une idée assez répandue, les médias

disponibles sur le web ne sont pas libres de droit (sauf quelques rares exceptions) ! En
général, les sites qui "permettent" une utilisation pédagogique non commerciale de leur
contenu le mentionnent explicitement dès la page d'accueil (pensez à le faire aussi,
si c'est le cas du vôtre).

9) Sur le plan technique, utilisez des tableaux pour construire une mise en page
cohérente.
• Préférez les tableaux aux "cadres" (ou frames, en anglais) car ces derniers
désorientent facilement le visiteur (lorsqu'il veut imprimer, créer un signet, …).
• De même, préférez encore les tableaux aux "calques" (ou layers, en anglais)
pour positionner vos objets correctement. Les calques ne sont en effet reconnus
que par les navigateurs de version 4 ou supérieure, et engendrent de toute
façon, même pour les navigateurs récents, des problèmes insurmontables
lorsqu'on les mélange avec du texte (surtout si l'on veut être "lu" par un Mac et
par un PC) ou lorsqu'on redimensionne la fenêtre de Netscape 4 (Bug !).

10) Dernier conseil technique : pensez à la machine qu'utilise votre visiteur (son écran,
sa plateforme, Mac ou PC, et son navigateur).

• L'affichage de votre page va dépendre de la taille du moniteur du visiteur. Il y

a deux ans, il fallait tabler sur des écrans 14 pouces, donc travailler la mise en
page pour des écrans de taille 640x480 pixels (en décomptant les boutons de
navigation, les barres du navigateur,… il fallait considérer une surface utile de
630x420 pixels). Depuis cette année et la hausse des ventes d'ordinateurs avec
écran 15 pouces (800x600), on peut augmenter "raisonnablement" la taille des
pages web jusqu'à une résolution maximum de 760 x 420 pixels.
• Les navigateurs n'ont pas exactement la même manière d'interpréter le langage
HTML (et le Javascript), et votre visiteur n'a peut-être pas la dernière version
même si vous l'avez (Internet Explorer 5 ou Netscape 4.7). Une seule règle : si
vous voulez toucher une cible large, faites des tests de vos pages sur plusieurs
navigateurs, de plusieurs générations, et sur plusieurs plateformes !

Rappel sur la notion de "page web"

Est-ce que c'est ce qui est contenu dans un fichier ? Non, puisque qu'une page web
peut contenir du texte et des images, et les images constituent toujours un fichier
informatique séparé du fichier "source".

Une page web, c'est ce qui se charge sur votre écran en 1 clic de souris (1 page =
1 nœud d'info). On peut la consulter en utilisant les ascenseurs horizontaux et
verticaux. A l'impression, 1 page web peut équivaloir à 15 pages papier. D'où une
difficulté : savoir calibrer une page web, car il ne faut pas en mettre trop ni trop peu.

Dans le domaine de la formation, on peut considérer qu'un bon "dosage" correspond à

ce qu'un utilisateur aimerait avoir comme information en lançant une impression. Rien
de plus énervant en effet que de devoir lancer 15 impressions à partir de 15 pages web
pour obtenir une information suffisamment complète. Pour éviter ce problème, on peut
aussi proposer de télécharger un seul fichier contenant toute l'information découpée
sur plusieurs pages web (ce fichier est généralement au format .rtf, .doc, .pdf).

cecilia.carriere@grenoble.iufm.fr page 3 caroline.schreiber@grenoble.iufm.fr

Pages Web : Dreamweaver et quelques conseils généraux DreamWb2.doc

MACROMEDIA DREAMWEAVER
(version 2.0)

Dreamweaver est un éditeur de pages HTML WYSIWYG (What You See Is What You
Get), c'est-à-dire qu'il est censé retranscrire directement en HTML ce que vous mettez en
page (via une interface très simple, ressemblant à celle d'un traitement de texte). Vous
n'avez donc pas à connaître la signification des balises HTML (HyperText Markup
Language) pour créer le code source de votre page Web. Dreamweaver, comme
beaucoup d'éditeurs aujourd'hui, construit le code à votre place !

NB. En fait, ceci est vrai dans la majorité des cas… mais il existe quand même des cas où
l'on a besoin d'aller regarder le code source lorsque ce que l'on voit ne nous convient pas !

Dreamweaver est aujourd'hui considéré comme l'un des meilleurs (le meilleur, souvent)
éditeurs HTML. Il est utilisé par des professionnels de tout type et possède de
nombreuses fonctions avancées (création d'animations, de calques, d'interactivité assez
sophistiquée, possibilité d'intégrer soi-même ses propres commandes, …). L'intérêt pour
nous, aujourd'hui, ne réside pas dans ces "fonctions avancées", mais dans trois
caractéristiques intéressantes du logiciel : il est existe sous Mac et sous PC, et il
produit, toujours à votre place, du code HTML "propre", ceci via une "interface simple"
(ce qui n'est pas le cas, par exemple, du convertisseur de format HTML intégré dans
Word).

Nous allons donc uniquement apprendre de Dreamweaver ses fonctions de base. Mais
rassurez-vous, elles sont largement suffisantes pour produire un bon site Web !

Pour toutes les informations complémentaires à ce document, n'hésitez pas, comme

toujours, à consulter les aides en ligne : dans le menu général, allez sur [?] et
choisissez "Rubriques d'aides de Dreamweaver" (ou taper simplement la touche F1).
Ceci ouvrira un fichier d'aide dans votre navigateur Web, avec le "Sommaire" de l'aide
dans le cadre violet (à gauche). Vous pouvez, au lieu de rechercher la rubrique qui vous
intéresse dans le Sommaire, la rechercher également par Index (ou par mot-clé) : il suffit
alors de cliquer en haut et à gauche du cadre violet sur le lien "Index" (ou "Rechercher").

Avant toute production, il faut créer

• un dossier pour le projet contenant tous les fichiers que vous allez créer.
• un sous-dossier "cahierch" contenant les éléments de votre cahier des charges
(l'équipe, le but du projet, l'utilisation prévue du produit, les étapes de réalisation, la
charte graphique, le type de contenu et son arborescence...)
• un sous-dossier "ressbrut", pour y sauvegarder les ressources "brutes" (images,
textes, sons, ...) à partir desquels vous allez travailler.
• un sous-dossier "ressfini", pour y sauvegarder ces ressources une fois re-travaillées
(mises au bon format, à la bonne taille, ...).
• un sous-dossier "prodfini" contenant les fichiers "intégrés" que vous allez diffuser
auprès de votre cible

cecilia.carriere@grenoble.iufm.fr page 4 caroline.schreiber@grenoble.iufm.fr

Pages Web : Dreamweaver et quelques conseils généraux DreamWb2.doc

• Créez en plus dans le sous-dossier "prodfini", un sous-dossier intitulé "images" dans

lequel vous mettrez toutes les images utilisées dans votre site.

Attention : il est essentiel que vous soyez très rigoureux dans les noms de fichiers
que vous allez créer. Respectez les principes suivants : pas plus de 8
caractères, pas d'espaces, pas d'accents, pas de majuscules. Ces contraintes
sont importantes car la plupart des serveurs (qui hébergeront peut-être un jour
vos pages ?) ne supportent pas les espaces, les accents, et sont sensibles à
la différence Majuscule/Minuscule.

cecilia.carriere@grenoble.iufm.fr page 5 caroline.schreiber@grenoble.iufm.fr

Pages Web : Dreamweaver et quelques conseils généraux DreamWb2.doc

Présentation de la fenêtre et des palettes de Dreamweaver

Lorsque vous lancez le logiciel (Macromedia -> Dreamweaver), vous arrivez sur la fenêtre
principale (dans laquelle vous allez composer votre page), avec en supplément une ou
plusieurs fenêtres flottantes déjà ouvertes : la palette d'objets, l'inspecteur de propriétés
et/ou le lanceur. Ces palettes contiennent en fait des raccourcis, bien utiles pour ne pas
avoir à parcourir le contenu des menus lorsque l'on travaille. Pour les ouvrir ou les fermer,
il suffit d'aller dans le menu [Fenêtre] et de les cocher ou les décocher.

menus déroulants

fenêtre principale

palette
d'objets

inspecteur de
propriétés

lanceur

• La fenêtre principale : identique à celle de votre traitement de texte préféré, avec des
menus déroulants en haut et un espace de saisie.

• les palettes (fenêtres flottantes, dites flottantes car déplaçables sur l'espace de travail)
! L'inspecteur de propriétés : permet de choisir la police, la taille, le style, la
couleur, l'alignement, … (cf. traitement de texte Word) ainsi que des tas de
propriétés propres à l'objet sélectionné sur la fenêtre principale. Il permet aussi de
définir les liens dans une même page ou vers une autre page. L'icône [?] en haut
à droite de cette fenêtre permet d'obtenir de l'aide contextuelle.
! La palette d'objets : permet d'insérer des images, de créer des tableaux, des
lignes de séparation,…
! Le lanceur : permet d'ouvrir et de fermer d'autres palettes (par ex. l'accès au code
source HTML par l'icône de droite). S'il est ouvert, fermez-le pour l'instant.

Création d'un site local

Un site local requiert un nom et un répertoire racine local indiquant à Dreamweaver

l'emplacement où vous souhaitez conserver les fichiers du site. Vous devez créer un site
local pour chaque site Web sur lequel vous travaillez. Plus tard, lorsque vous serez prêt à

cecilia.carriere@grenoble.iufm.fr page 6 caroline.schreiber@grenoble.iufm.fr

Pages Web : Dreamweaver et quelques conseils généraux DreamWb2.doc

publier et tester le site sur un serveur distant, vous pourrez ajouter des informations sur le
site.

Pour créer un site local :

1. Dans la barre de menu, dans le menu [Fichier] choisissez [Nouveau site].

2. Dans la boîte de dialogue "Définition du site", sélectionnez l'option "Infos locales"

dans la liste "Catégorie".

3. Entrez les options suivantes :

Nom du site : Il s’agit du nom qui sera donné au site sur votre machine. Dans notre
exemple le site a pour nom : site web projet iufm

Dossier racine local spécifie le dossier du disque dur où seront stockés les fichiers,
modèles et éléments de bibliothèque du site. Dans notre exemple, les fichiers du site sont
stockés dans un répertoire appelé «prodfini» (il s’agit du répertoire de travail créé
précédemment) situé dans le dossier «C:\Mes documents\projet\». Lorsque Dreamweaver
résout des liens relatifs à la racine, c'est par rapport à ce dossier qu'il le fait. Tapez un
chemin d'accès ou cliquez sur l'icône de répertoire pour naviguer vers le dossier et le
sélectionner.

Cache crée un cache local pour améliorer la vitesse des tâches de gestion des liens et du
site. Si vous ne sélectionnez pas cette option, Dreamweaver vous demandera de nouveau
de créer un cache avant de créer le site.

cecilia.carriere@grenoble.iufm.fr page 7 caroline.schreiber@grenoble.iufm.fr

Pages Web : Dreamweaver et quelques conseils généraux DreamWb2.doc

Lorsque vous avez cliqué sur [OK], la fenêtre suivante apparaît :

Cette fenêtre présente la carte du site que vous venez de créer avec dans la partie droite
les répertoires et fichiers contenus dans votre site web local et dans la partie gauche la
navigation dans le site

Retrouver votre site web

Vous avez précédemment créé un site web local en utilisant la démarche décrite dans le
volet création d’un site web local, et vous souhaitez travailler à nouveau sur votre site.
Pour que tout fonctionne correctement en particulier la gestion des liens, il faut indiquer à
Dreamweaver sur quel site vous souhaiter travailler.
Pour cela dans le menu [Fichier] sélectionnez [Ouvrir site] et choisissez votre site. Dans
notre exemple nous avons sélectionné le site «site web projet iufm».

Vous pouvez maintenant travailler sur votre site.

cecilia.carriere@grenoble.iufm.fr page 8 caroline.schreiber@grenoble.iufm.fr

Pages Web : Dreamweaver et quelques conseils généraux DreamWb2.doc

Création de la première page

Votre page web est composée de 2 couches :

• l'arrière plan ("background") : peut être uni, une photo, une image
• le texte et les images

1ère étape : création, enregistrement, et visualisation du code source

• Créez une nouvelle page ("untitled-2") par le menu [Fichier -> Nouveau] ou
travaillez sur la page ("untitled-1") ouverte automatiquement au lancement de DW.

• Allez dans le menu [Modifier], cliquez sur Propriétés de la page :

! Donnez un titre à la page : il est important que ce titre résume bien votre
contenu parce que les robots des moteurs de recherche se servent des titres
pour indexer les pages web, et aussi parce que ce titre constituera l'intitulé de
la fenêtre qui s'ouvrira sur le navigateur de votre visiteur (ainsi que l'intitulé par
défaut de son "Favori" s'il en crée un sur votre page… veinard !). Ne pas
confondre titre de la page et nom du fichier HTML.
! Pour l'arrière plan : vous pouvez indiquer une image de votre choix en
cliquant sur [Parcourir] : cette image devrait se trouver dans le sous-dossier
[images] créé précédemment. Mais vous pouvez aussi choisir simplement une
couleur unie (le blanc, c'est finalement pas mal pour la lecture sur écran…). En
HTML, le codage des couleurs se fait en base "hexadécimale", c'est à dire en
base 16, sachant que l'intensité de chaque composante de la couleur (RVB) est
codée de 00 à FF. Par exemple, un fond vert "pétant" sera codé #00FF00.
Heureusement, vous n'avez pas à connaître le codage hexadécimal, et il vous
suffit de cliquer sur la petite flèche noire qui se trouve en bas du petit carré
gris clair, pour que votre curseur se transforme automatiquement en pipette !
! Choisissez la couleur du texte : par la même procédure que précédemment.
Attention, il faut un contraste suffisant texte/fond ! Cette couleur sera celle du
texte "courant" que vous taperez, mais rien ne vous empêchera localement de
changer la couleur d'un mot ou d'une phrase (on passera alors par la palette
flottante "Inspecteur de propriétés").
! Choisissez la couleur des liens : toujours par la même procédure. Attention :
l'affichage final des liens (couleur, soulignement) peut parfois aussi être
décidée par le navigateur du visiteur. Soit il laisse vos paramètres de couleur
s'afficher, soit il décide d'utiliser ses propres préférences. Si vous décidez de
laisser le "client" imposer ses propres paramètres, laissez cette valeur "par
défaut", c'est-à-dire ne choisissez pas de couleurs de liens (laisser la case
vide). Un autre conseil : la différence de couleur entre les liens déjà visités et
les liens non encore visités, qui existe par défaut dans tous les navigateurs, est
un indice important pour que le visiteur n'ait pas l'impression d'être perdu dans
votre site. Il s'en sert pour naviguer ! N'enlevez cet indice de navigation que
pour de bonnes raisons !

• Cliquez sur [OK] ou si vous voulez en savoir plus, cliquez sur [Aide]

cecilia.carriere@grenoble.iufm.fr page 9 caroline.schreiber@grenoble.iufm.fr

Pages Web : Dreamweaver et quelques conseils généraux DreamWb2.doc

• Enregistrez votre travail par le menu [Fichier ->Enregistrer] : le nom de fichier

pour la première page d'un site (dite encore HomePage ou page d'accueil) est très
souvent de type "index.htm" ou "default.htm" (ou .html ; c'est en fait le serveur sur
lequel vous mettrez votre site en ligne qui vous l'imposera, pour "automatiser" le
lancement de la page d'accueil, et interdire la visualisation de l'arborescence du
répertoire). Le nom des autres fichiers est libre, mais vous devez respecter
certaines règles : pas plus de 8 caractères avant l'extension, pas d'accents, pas de
majuscules, pas d'espaces. De plus, il ne faut pas changer en cours de route la
dénomination d'un fichier, au risque de rompre le lien qui pointait sur lui !

• Pour les curieux, allez voir le code HTML que Dreamweaver a généré
automatiquement pour tenir compte de vos choix. Il suffit de cliquer en bas de la
fenêtre principale, ICI

Le HTML est un langage de description de page Web à l'aide de balises, symbolisées par
<balise>. Tout document HTML commence et se termine par les balises <HTML> et
</HTML>. Entre ces deux balises, il y a deux grandes parties :

1. Celle encadrée par les balises <HEAD>….</HEAD> est appelée l'en-tête. Elle
contient le titre de la page, le type du fichier, les balises dites "méta" pour définir
les mots-clés pour les moteurs de recherche, …

2. Celle encadrée par les balises <BODY>…</BODY> est appelée le corps. Elle
contient tout le contenu visible de votre page (donc pour l'instant encore rien).
Remarquons que la balise <BODY> a été complétée par les propriétés que vous
avez définies : la couleur de fond (bgcolor="…."), la couleur du texte (text="…").

cecilia.carriere@grenoble.iufm.fr page 10 caroline.schreiber@grenoble.iufm.fr

Pages Web : Dreamweaver et quelques conseils généraux DreamWb2.doc

• Refermez cette fenêtre de code. Vous pouvez taper directement du code

HTML dans cette fenêtre… à condition de connaître la syntaxe des balises ! Et
rien ne vous empêche, si vous prenez un petit manuel de HTML, de vous passer
complètement d'un éditeur tel que Dreamweaver. Il vous suffit alors d'ouvrir un
simple traitement de texte (comme le bloc-note ou simple-text), de tapez vos
balises et le contenu de vos pages, et de sauver le tout en format "texte" (avec
l'extension .htm ou .html).

Remarquons qu'un fichier HTML est un simple fichier texte, qui contient entre
autres des balises de description. C'est ce fichier qui est "téléchargé" sur
l'ordinateur de votre visiteur (ainsi que les fichiers images auxquels il renvoie par la
balise <IMG>). Le rôle d'un navigateur est simplement ensuite d'interpréter
correctement l'ensemble des balises qui lui arrive pour afficher sur l'écran les
éléments décrits dans le code de la page. Si vous ne l'avez pas encore fait,
amusez-vous à regarder le "Source" qui est "derrière" les pages web que vous
consultez régulièrement ! Il suffit, dans votre navigateur favori, d'aller dans le menu
[Affichage -> Source].

2ème étape : mettre du contenu textuel

Tapez du texte (ou coller du texte en provenance d'un autre fichier). Puis, sélectionnez
les parties du texte que vous voulez mettre en forme, et dans "l'Inspecteur de
propriétés", choisissez votre mise en page : gras, italique, police, liste à puce… (vous
n'êtes pas obligé de passer par l'inspecteur : vous pouvez tout aussi bien, mais c'est
plus long, passer par le menu [Texte -> …] en haut de la page principale).

Attention : si le texte que vous avez collé comportait des puces ou des gras,… il faut
les refaire sous Dreamweaver. De même pour les tableaux (cf. prochain §).

Astuce : si vous voulez faire un simple saut de ligne dans un paragraphe, et non un
changement de paragraphe, tapez les touches [Majuscule + Entrée] simultanément au
lieu de [Entrée] tout court.

Enregistrez votre travail. Prenez garde à l'endroit où vous sauvez vos fichiers. Vu
l'organisation proposée au départ, ils doivent se trouver à la racine du dossier web
(au moins pour le fichier de la page d'accueil… pour les autres pages, vous pouvez
créer d'autres sous-dossiers dans le dossier web).

3ème étape : texte + images = tableaux

Vous allez maintenant combiner texte et image.

Il est toujours possible d'insérer une image dans un paragraphe et de formater ce

paragraphe à l'aide des outils classiques d'alignement textuel : menu [Texte ->
Alignement -> …]. Les images ont également des paramètres d'alignement par rapport
au texte qui leur sont propres (cf. les options d'alignement dans l'Inspecteur de
propriétés, après avoir sélectionné une image). Mais, dès que l'on veut effectuer une
mise en page un peu plus sophistiquée et stable, le plus efficace est de se servir
de tableaux.

cecilia.carriere@grenoble.iufm.fr page 11 caroline.schreiber@grenoble.iufm.fr

Pages Web : Dreamweaver et quelques conseils généraux DreamWb2.doc

Pour que la mise en page soit à peu près correcte, il faut donc que vous effectuiez
votre mise en page à l'aide de tableaux (reportez-vous au chapitre des conseils
généraux, point 9 p. 3, pour comprendre pourquoi il vaut mieux utiliser des tableaux
que des "calques").

Pour créer un tableau, cliquez sur l'icône de la palette d'objets (ou dans le menu
[Insérer -> Tableau]).

Indiquez le nombre de colonnes et de lignes dont vous aurez besoin (vous pourrez
toujours apporter des modifications ultérieurement). Pour comprendre la fonction des
autres options de cette boîte de dialogue (comme le remplissage, l'espacement…),
cliquez sur [Aide].

Insérez du texte dans les cellules de votre choix. Vous devriez avoir un résultat dans
ce style :

Pour rendre les bordures du tableau invisible, pour mettre des couleurs de cellules
différentes, etc, sélectionnez le tableau (en cliquant légèrement à l'extérieur d'un
de ses bords lorsque le curseur prend la forme d'une étoile à 4 flèches, comme pour
la sélection des objets sous Word) et utilisez l'Inspecteur de propriétés :

Vous pouvez, par exemple, obtenir le genre de résultat ci-dessous en modifiant le

paramètre Bordure (mettre 0 au lieu de 1) : des pointillés remplacent les bordures ;
ces pointillés seront invisibles sur le navigateur.

Pour insérer maintenant des images dans d'autres cellules :

• placez votre curseur dans la cellule où vous souhaitez insérer l'image

• dans la palette d'objets, cliquez sur la première icône
• dans la boîte de dialogue qui s'ouvre, cliquez sur "parcourir" pour accéder au
dossier [images] et au nom du fichier image. Insérez l'image de votre choix
(obligatoirement au format .gif ou .jpg ou .png, pour qu'elle soit affichable sur le
navigateur).
• La rubrique [Src], pour Source, de l'Inspecteur de propriétés vous indique
alors le nom de l'image insérée (et son chemin). Attention, l'image est insérée

cecilia.carriere@grenoble.iufm.fr page 12 caroline.schreiber@grenoble.iufm.fr

Pages Web : Dreamweaver et quelques conseils généraux DreamWb2.doc

visuellement dans la page, mais à la différence de ce que vous avez l'habitude

de faire sous Word ou Powerpoint, elle constitue réellement un fichier
indépendant du fichier HTML (le fichier n'est pas incorporé au fichier HTML). Il
ne faudra donc pas oublier, si vous copiez votre fichier HTML ailleurs, de copier
aussi le fichier image sur lequel il pointe.

Remarque : vous devez avoir enregistré votre fichier HTML au moins une fois sur
le disque pour que Dreamweaver accepte de créer un "chemin relatif" entre votre
fichier image et votre fichier HTML. Un "chemin relatif" est un chemin qui précise
où se situe le fichier image par rapport au fichier HTML, alors qu'un "chemin
absolu" précise où se trouve "réellement" votre fichier image sur le disque, avec
toute son arborescence depuis sa racine. Les chemins relatifs (créés par défaut
dans Dreamweaver si le fichier HTML a été enregistré au moins une fois) sont
préférables car ils permettent ensuite de copier tout le dossier web ailleurs (par
exemple sur une disquette) pour l'emporter chez soi, sans avoir à refaire les liens.
Si vous voulez en savoir plus, tapez [F1]…

Une fois un tableau créé, on peut le modifier dans tous les sens (ajouter des
colonnes, fusionner des cellules, modifier le fond d'une cellule en particulier, …). Vous
pouvez aller dans le menu [Modifier > Tableau] et choisir la modification désirée
(après avoir bien sûr cliqué à l'endroit de votre tableau que vous souhaitez modifier).
Le même menu de modification est encore plus rapidement accessible en faisant un
simple clic-droit sur l'endroit du tableau à modifier, … comme d'habitude !

Avez-vous pensé à enregistrer votre travail ?

Création de la deuxième page

Créez maintenant une deuxième page de contenu.

Enregistrez-la dans le même dossier que la première page web.

Déterminez dans cette page quel est l'élément qui va permettre de retourner à la première
page que vous avez créée : est-ce une image, un mot, l'expression "retour à l'accueil",… ?

Création de liens de la 2ème à la 1ère page, et vice versa

Dans la deuxième page que vous venez de créer, sélectionnez l'élément qui va servir
d'hyperlien et, dans la case "lien" de l'Inspecteur de propriétés, indiquez simplement le
nom du fichier auquel ce lien va renvoyer (c'est-à-dire en fait le nom du fichier de
destination, lorsque le visiteur cliquera sur ce lien).

Le plus simple, pour choisir ce fichier de destination, est de cliquer sur le petit dossier
jaune qui se trouve à droite de la case "lien". Ceci vous ouvrira une boîte de dialogue
dans laquelle il suffira de pointer sur le fichier de destination.

cecilia.carriere@grenoble.iufm.fr page 13 caroline.schreiber@grenoble.iufm.fr

Pages Web : Dreamweaver et quelques conseils généraux DreamWb2.doc

Un clic sur le petit dossier jaune permet de remplir automatiquement la case "lien" en
cliquant ensuite manuellement sur l'endroit où se trouve le fichier de destination (dans
votre cas, il devrait y avoir inscrit quelque chose du style : default.htm ou index.htm).

Ce petit dossier jaune est bien utile, mais on ne peut pas toujours s'en servir… car parfois,
les pages sur lesquelles on veut pointer ne font pas partie de notre environnement
informatique : c'est le cas par exemple de tous nos liens externes, qui pointent sur des
pages hébergées par d'autres serveurs. Il faut alors "se palucher à la main" le contenu de
la case "lien", en prenant bien garde de taper toute l'adresse de la page de destination,
c'est à dire en fait son adresse absolue ou URL (http://…………).

La case "Cible" sert, quant à elle, à décider si la page web de destination va s'ouvrir dans
la même fenêtre du navigateur que la page web d'appel, et donc la remplacer (par
défaut, c'est toujours le cas, ce qui correspond à l'option "_self") ou dans une nouvelle
fenêtre (choisir alors l'option "_blank" dans le menu déroulant). Il vaut mieux ne pas ouvrir
de nouvelle fenêtre, et laisser le visiteur le décider lui-même si ça l'arrange (grâce à
son fameux clic-droit à lui), sauf si on a réellement une bonne raison (si, par exemple,
l'hyperlien pointe sur une page web externe à notre site, comme http://www.education.gouv.fr).

Réitérez la même opération avec la première page, de manière à ce qu'elle possède

également un hyperlien permettant de pointer sur la seconde page.

Si vous voulez vous rendre compte du résultat, lisez d'abord le paragraphe intitulé "testez
votre travail", page suivante !

Création d'ancres dans une même page

Lorsqu'une page est longue (les informations données ne peuvent pas toujours être
dispersées sur plusieurs fichiers HTML… pensez à celui qui veut imprimer !), vous pouvez
créer des "ancres nommées", c'est-à-dire des repères posés à certains endroits à
l'intérieur votre longue page. L'intérêt de ces ancres c'est qu'elles seront accessibles par
un clic sur un hyperlien dans ce document (ou à partir d'un autre document d'ailleurs !).

Le cas le plus typique de l'utilisation des ancres est le suivant : votre page étant longue,
vous décidez de créer une table des matières en son sommet, chacun des titres de ce
sommaire permettant d'aller directement au contenu correspondant (grâce justement à la
présence d'hyperliens dans la table des matières, hyperliens qui pointent sur les ancres
nommées posées au début de chaque chapitre). Pour faire cela :

• Rédigez une longue page, puis un sommaire en

haut de la page (reprenant les titres des chapitres)
• Placez le curseur au début d'un chapitre dans le
corps du texte
• Dans la palette d'objets, ouvrez le menu
"invisibles", par un clic sur la petite flèche noire

cecilia.carriere@grenoble.iufm.fr page 14 caroline.schreiber@grenoble.iufm.fr

Pages Web : Dreamweaver et quelques conseils généraux DreamWb2.doc

• Cliquez sur l'icône qui représente une ancre (la première icône)
• Donnez lui un nom (sans espaces !) en rapport avec le sujet
• Cliquez sur [OK]

N.B. Si vous trouvez trop long de passer par la palette d'objets pour insérer une ancre
nommée à un endroit du texte, vous pouvez aussi aller directement dans le menu
[Insertion -> Ancre Nommée].

Recommencez l'opération pour chacun des chapitres de votre document : cliquez avec le
curseur au début de chaque chapitre dans le corps du texte, et insérez à chaque fois
une ancre nommée (en changeant le nom de l'ancre !).

Maintenant que vous avez défini les ancres, nous allons les relier au sommaire, c'est-à-
dire faire en sorte que chaque titre du sommaire pointe sur l'ancre qui lui correspond dans
le corps du texte :
• Sélectionnez le 1er titre du sommaire
• Dans le champ "lien" de l'Inspecteur de propriétés, tapez : #nomdel'ancre1
• Sélectionnez le 2ème titre du sommaire, …..

Remarques : le caractère #collé devant le nom de l'ancre est indispensable, car cela
permet au navigateur de comprendre que votre lien pointe sur une ancre et non sur un
fichier. De plus, lorsque l'on envoie le visiteur se promener vers des ancres dans notre
longue page, il est de bon ton de créer, dans le corps du texte, des liens de retour (par
exemple, retour vers le sommaire) à la fin de chaque chapitre. Il suffit alors de créer une
ancre au début de notre sommaire (nommée par exemple : debut) et de faire un hyperlien
à la fin de chaque chapitre avec comme valeur du lien : #debut.

La procédure décrite ici peut aussi s'appliquer lorsque vous souhaitez qu'un lien pointe sur
un autre fichier (fichier2), mais à un point donné de ce dernier (et non simplement au
début du fichier2). Il faut alors créer un lien entre les deux fichiers comme d'habitude, mais
ajouter, collé à la suite de ce lien, le # et le nom de l'ancre à atteindre dans le second
fichier. Par exemple, la case "lien" pourrait avoir la forme : fichier2.htm#nomdel'ancre.

Testez votre travail dans le navigateur

Lorsque vous créez dans l'éditeur, vous ne pouvez pas accéder au mode simulation pour
voir si vos liens fonctionnent, ou pour voir réellement ce que donne votre mise en page.
Pour voir "en vrai" ce que vous avez fait, appuyez sur [F12]. Votre page va s'ouvrir dans
la fenêtre d'un navigateur. Vous pourrez ainsi tester votre travail. Une autre manière de
voir le fichier est de le sauver, d'ouvrir un navigateur quelconque, d'aller dans son menu
[Fichier -> Ouvrir] et de cliquer sur [Parcourir] pour lui indiquer où se trouve votre fichier.

Insérer un lien pour l'E-mail

La première règle de l'interactivité est de permettre au visiteur d'échanger avec vous.

Mettez donc toujours un lien vers votre adresse E-Mail sur vos pages (et même deux, si
les adresses sont différentes pour parler des problèmes techniques ou du contenu).

Tapez dans le champ "lien" : mailto:prenom.nom@grenoble.iufm.fr (aucun espace !).

cecilia.carriere@grenoble.iufm.fr page 15 caroline.schreiber@grenoble.iufm.fr