Comment faire…
Les calques
avec
Dreamweaver
Vous souhaitez mettre de Dans un premier article publié dans Médialog 40, nous vous avons
l’animation dans vos pages proposé une initiation à l’édition HTML. Dans un deuxième article,
publié dans le n°42, nous avons complété cette initiation en exploitant
Web ? Utilisez les calques ! les tableaux avec Dreamweaver dans sa version 2. Nous vous proposons
Vous ne souhaitez pas vous aujourd’hui d’aller plus loin dans la connaissance de la création de
plonger dans le code HTML pages HTML, avec le même logiciel(1), en découvrant l’univers des
ou JavaScript ?… Nous vous calques et des pages animées.
Les calques sont utilisés pour positionner les éléments avec précision
proposons un pas à pas dans la fenêtre du navigateur. Ils peuvent contenir du texte, des images,
réalisé avec Dreamweaver 2 des tableaux et même d’autres calques, en fait tout ce que l’on peut
qui vous fera découvrir l’uni- mettre dans le corps d’un document HTML. Ils sont particulièrement
vers des calques et des pages utiles pour la superposition de certaines parties d’une page (ce que ne
permettent pas les tableaux) et facilitent la conception des pages. Ils
animées.
peuvent être utilisés pour rendre la page dynamique : faire apparaître,
disparaître ou même déplacer des objets sur la page. Toutes ces opéra-
tions sont réalisées sans avoir à rédiger de code JavaScript ou HTML.
Nous vous proposons de construire un ensemble de trois pages pour
découvrir pas à pas l’utilisation des calques. Notre réalisation est prévue
pour un affichage avec Internet Explorer 4 (ou au-delà) et dans une réso-
lution d’écran de 800x600. En effet, les calques présentent d’indé-
niables avantages mais ont l’inconvénient d’une part de ne pas être
gérés par les navigateurs de l’ancienne génération et, d’autre part, d’être
affichés de façon parfois surprenante par certains navigateurs.
Les images et les textes nécessaires à la réalisation de ce Comment
faire… sont téléchargeables sur le site de Médialog : (1) Dreamweaver, dans sa version 2, a fait l’objet d’une assez large diffusion à très bas prix, notamment par l‘intermédiaire de revues
[Link]/medialog/archive45/[Link] d’informatique. Bien que déjà ancienne, cette version du logiciel intègre des fonctionnalités qui facilitent la création de pages animées.
Dreamweaver, dans sa version 4, est un logiciel reconnu d’intérêt pédagogique (RIP).
28 MÉDIALOG N°45 — DÉCEMBRE 2002
Comment faire…
1
2
Ci-dessus les trois pages qui composeront votre site. La
première situe la France en Europe. La deuxième présente les
I – PRÉPARATION régions de France. La troisième ses métropoles. C’est cette troi-
sième page qui fait l’objet d’une animation : un clic sur le
En préalable à la création de vos pages, il est nécessaire de prévoir bouton d’aide affiche une fenêtre d’aide en Pop-up ; le passage
l’emplacement où elles seront rangées sur votre disque dur. Vos pages du pointeur de souris sur l’étiquette d’une ville (ici Lyon)
permet de la localiser sur la carte ; un clic sur cette étiquette
seront composées de plusieurs fichiers : la page elle-même et les
affiche un texte de présentation de cette métropole. La compo-
images affichées sur cette page. En effet, toutes les images affichées
sition de chacune de ces page est faite à l’aide de calques.
sur votre page sont autant de fichiers graphiques distincts. Vous allez
créer, à la racine de votre disque dur, un dossier pour y ranger vos
pages, nommez-le par exemple calques. Dans ce dossier, vous créez un
sous-dossier images dans lequel vous rangerez toutes vos images et un
sous-dossier textes dans lequel vous rangerez tous vos textes.
II – LANCEMENT DU LOGICIEL
Au lancement de Dreamweaver, le logiciel s’affiche avec trois palettes
d’outils disponibles : Objets – Propriétés – Lanceur
La palette Lanceur contient, en particulier, la Gestion de site. Cette Lanceur
fonctionnalité est très utile pour automatiser un certain nombre
tâches : chercher et remplacer un élément dans tous les fichiers du Objets
site, obtenir la répercussion automatique d’une modification sur tous
les fichiers du site, faire la mise à jour du site distant lorsqu’il est Propriétés
publié sur la Toile…
Pour utiliser la Gestion de site, il faut indiquer le dossier contenant le
site sur votre ordinateur.
MÉDIALOG N°45 — DÉCEMBRE 2002 29
Comment faire…
Dans la palette Lanceur, cliquez sur le bouton Site
Dans la fenêtre Gestion de site qui apparaît, choisissez Site –
Nouveau Site
Dans le champ Nom du site, tapez France
Pour définir le Dossier racine local, cliquez sur l’icône Parcourir
pour choisir le dossier calques (les autres renseignements ne seront
utiles que dans le cas d’une publication sur la Toile)
Validez par OK
Dans la fenêtre de dialogue qui apparaît Créer un fichier cache
pour ce site, cliquez sur Créer.
Réduisez la fenêtre Gestion de site dans la Barre des tâches puis fermez la
palette Lanceur. Conservez la palette Propriétés dont vous aurez besoin.
III – CRÉATION DE LA PREMIÈRE PAGE
Vous allez définir les propriétés de votre page en lui donnant un titre.
Ce titre n'apparaîtra pas sur la page elle-même, mais dans le bandeau
supérieur de la fenêtre du navigateur. Il est à considérer comme un
champ d'indexation de votre document et à renseigner avec soin.
Choisissez Modifier – Propriétés de la page
Dans le champ Titre, tapez, par exemple La France en Europe
Cliquez sur OK.
Afin de positionner facilement les calques sur la page, faites apparaître les
règles et la grille qui s’affichera en pointillés avec un pas de 10 pixels.
Choisissez Affichage – Règles – Afficher
Puis Affichage – Grille – Afficher
Choisissez Affichage – Grille – Paramètres
Dans la fenêtre de dialogue, définissez les paramètres souhaités
Validez par OK
Enregistrez dès maintenant votre page sous le nom [Link].
Choisissez Fichier – Enregistrer sous
Nommez votre fichier France
Cliquez sur le bouton Enregistrer.
Insérez un calque pour le titre de la page : LA FRANCE EN EUROPE.
Choisissez Insertion – Calque
Tapez le titre : LA FRANCE EN EUROPE
Mettez en forme le titre en choisissant la police Arial Gras et la taille 5.
Calque Titre Sélectionnez le texte La France en Europe
Dans la palette Propriétés, cliquez sur le bouton B (Bold pour Gras)
Sélectionnez la liste déroulante des polices, choisissez Arial
Sélectionnez la liste déroulante des tailles, choisissez 5.
Vous allez positionner le calque, que vous allez nommer Titre, à 250
pixels du bord gauche (G) et à 10 pixels du bord supérieur (S) et définir
sa taille avec une largeur de 300 pixels et une hauteur de 60 pixels.
Sélectionnez le calque en cliquant sur sa bordure
Dans la palette Propriétés, à la place de Layer1, tapez Titre
Dans le champ G, tapez 250, dans le champ S, tapez 10
Dans le champ L, tapez 300, dans le champ H tapez 60
Cliquez en dehors de la palette pour valider vos choix.
Insérez un deuxième calque destiné à contenir la carte de l’Europe que
vous nommerez Image, qui sera placé en G : 250 S : 90 et qui aura pour
dimensions L : 300 H : 300.
30 MÉDIALOG N°45 — DÉCEMBRE 2002
Comment faire…
Dans le calque Image, placez la carte de l’Europe.
Cliquez à l’intérieur du calque
Choisissez Insertion – Image
Dans la fenêtre de dialogue, ouvrez le dossier images
Sélectionnez le fichier [Link] et cliquez sur Sélectionner.
L’image a pour dimensions 510 x 480. Réduisez-la de moitié.
Dans la palette Propriétés, dans le champ L, tapez 255 et dans le
Calque Image
champ H, tapez 240 (respectez bien les proportions).
Sélectionnez le calque et ramener ses dimensions aux dimensions de
l’image (255 x 240).
Insérez un troisième calque destiné à recevoir le texte de présentation.
Nommez-le Texte. Ses caractéristiques sont G : 10 – S : 90 – L : 200 –
H : 300
Insérez le texte de présentation dans ce calque.
Lancez votre traitement de texte
Ouvrez le fichier [Link] du sous-dossier textes
Sélectionnez tout le texte et copiez-le
Dans Dreamweaver, placez le curseur dans le calque Texte et collez
Sélectionnez tout le texte (Ctrl-A)
Définissez la police et la taille du texte : Arial 2.
Calque Texte
Pour terminer la présentation de la France en Europe, insérez un Calque Vignette
quatrième calque, que vous nommerez Vignette et dans lequel vous
taperez le texte suivant : « Comprise entre l'océan Arctique au nord, l'océan Atlantique
à l'ouest, la Méditerranée et la chaîne du Caucase au sud, la mer Caspienne et les monts Oural
à l'est, l'Europe est un des cinq continents ». Définissez la police et la taille du
texte : Arial 2 Italique. Choisissez une couleur bleue.
Les caractéristiques de ce calque sont : G : 420 – S : 150 – L : 200 – H : 80.
Vous allez créer en bas de page un bandeau de navigation permettant
d’accéder aux différentes pages de votre site.
Créez un calque, nommé Menu, positionné en G 220 et S 350 et de
dimensions L 400 et H 40. Choisissez une couleur d’arrière-plan (par
exemple un vieux rose comme #FFCCCC).
Dans ce calque, insérez un tableau d’une ligne et quatre colonnes.
Choisissez Insertion – Tableau
Dans le champ Lignes, tapez 1
Dans le champ Colonnes tapez 4
Cliquez sur OK.
Vous allez modifier les propriétés de ce tableau en définissant sa largeur
à 100% (du calque), sa hauteur à 100%, un espacement de cellules de
2 pixels et des bordures de 2 pixels également. Pour cela, complétez les
champs correspondants de la palette Propriétés.
Dans la première cellule, tapez Sommaire et centrez ce texte (Bouton
Centrer de la palette Propriétés)
Dans la deuxième cellule, tapez Régions et centrez.
Vous allez, dès maintenant, définir les quatre boutons et la navigation
en créant les liens vers les pages [Link] et [Link] que vous allez
créer ultérieurement.
Calque Menu
Sélectionner le mot Régions
Dans le champ Lien de la palette Propriétés, tapez [Link]
Dans la troisième cellule, tapez Métropoles et centrez
Sélectionnez le mot et définissez le lien vers un fichier [Link]
(la troisième page que vous allez créer)
Dans la quatrième cellule, tapez Aide et centrez.
MÉDIALOG N°45 — DÉCEMBRE 2002 31
Comment faire…
Sauvegardez votre page. Visualisez le résultat.
Choisissez Fichier – Aperçu dans le navigateur puis le navigateur
par défaut ou appuyez sur la touche de fonction F12.
IV – CRÉATION DE LA DEUXIÈME PAGE
Pour créer la deuxième page qui présente les régions françaises et qui a la
même structure que cette première page, le plus simple est de partir de la
page actuelle et de la sauvegarder sous un nouveau nom : [Link].
Choisissez Fichier – Enregistrer sous
Tapez regions
Cliquez sur Enregistrer.
Dans les Propriétés de la page, modifiez le titre La France et ses régions.
Supprimez le calque Vignette.
Modifiez le contenu du calque Titre : LA FRANCE ET SES REGIONS.
Dans le calque Image, remplacez la carte de l’Europe par la carte de la
France et ses régions.
Sélectionnez l’image en cliquant dessus
Appuyez sur la touche Suppr
Choisissez Insertion – Image
Choisissez le fichier [Link]
Cliquez sur Sélectionner.
Cette image a pour dimension 304 x 238 pixels. Redimensionnez le
calque à ces dimensions.
Dans le calque Texte, supprimez le texte qui s’y trouve (sélection de tout
le texte par Crtl-A et touche Retour arrière pour effacer le texte sans
supprimer le calque).
Dans votre traitement de texte, ouvrez le fichier [Link] du sous-
dossier textes. Sélectionnez tout le texte et copiez-le.
Pour conserver les passages à la ligne du texte d’origine, il est indispen-
Ci-dessus, avant d’insérer la liste des régions dans le sable d’indiquer à Dreamweaver de conserver la mise en forme.
calque Texte, il est nécessaire de choisir le style Pré-
Placez le curseur dans le calque Texte
formaté pour que les passages à la ligne du texte d’ori-
Dans la palette Propriétés, dans la liste déroulante Format, choi-
gine soient conservés.
sissez Préformaté.
Ci-dessous, pour que le calque Texte conserve ses
Vous pouvez alors coller le texte. Choisissez la police Arial 2.
dimensions d’origine et que l’on puisse lire le texte qui
déborde, il faut que le calque soit doté d’ascenseurs Ce long texte déborde largement du calque. Il faut choisir l’option
(option Scroll). permettant d’utiliser les ascenseurs (option Scroll).
Dans les Propriétés du calque, choisissez Scroll dans le champ
Débord.
Modifiez maintenant les liens du bandeau de navigation : le bouton
Sommaire doit renvoyer à la page [Link], le bouton Régions doit être, pour sa
part, inactif (puisque c’est la page sur laquelle on se trouve). Pour cela,
procédez comme vous l’avez fait lors de la création de la première page.
Sauvegardez la page. Visualisez le résultat.
V – CRÉATION DE LA TROISIÈME PAGE
La troisième page, La France et ses métropoles, a une structure identique à la
page actuelle. Comme vous l’avez fait précédemment, sauvegardez la
page en cours sous le nom [Link] avant d’en modifier les princi-
paux éléments.
Modifiez les propriétés de la page et le calque Titre avec le texte : LA
FRANCE ET SES METROPOLES
Dans le calque Image, remplacez la carte de la France et ses régions par
l’image [Link].
Modifiez le bandeau de navigation pour définir de nouveaux liens :
créer un lien actif vers la page [Link] et supprimer le lien vers la page
en cours.
32 MÉDIALOG N°45 — DÉCEMBRE 2002
Comment faire…
Dans le calque Texte, supprimez le texte qui s’y trouve.
Dans les Propriétés du calque, désactivez l’option Scroll (champ Débord).
Vous allez ajouter, dans cette page, quatre vignettes comportant les noms
des métropoles françaises : Lille, Lyon, Marseille et Paris.
Insérez un nouveau calque que vous nommerez Lille. Placez-le en G 600 et
S 90. Donnez-lui une largeur de 100 pixels et une hauteur de 20.
Choisissez une couleur de fond mauve (par exemple #9999FF).
Dans ce calque tapez Lille. Centrez le texte et choisissez la police Arial 3.
Copiez ce calque. Cliquez hors du calque sur le fond de la page. Collez-
le. Le nouveau calque est superposé au calque d’origine. Déplacez-le.
Nommez-le Lyon. Dans ce calque, tapez Lyon (à la place de Lille). Placez ce
calque aux coordonnées 600, 130.
Procédez de la même façon (en répétant le Coller) pour placer un calque
Marseille en 600, 170 et un calque Paris en 600, 210. Sauvegardez la page.
Vous allez maintenant créer une page animée : un passage du pointeur de
souris sur la vignette d’une des quatre métropoles permettra de localiser
son emplacement sur la carte (une puce rouge apparaîtra)(2).
Un clic de souris sur la vignette affichera le texte de présentation de la
métropole. La sortie du pointeur de souris hors de la vignette effacera ces
informations (localisation et texte). Cette animation de la page est possible
grâce aux Comportements qui permettent aux utilisateurs d’interagir avec Ci-dessus, le passage du pointeur de souris sur la
vignette Lille provoque l’apparition d’une puce localisant
une page Web pour la modifier ou pour effectuer certaines tâches.
la ville sur la carte (en fait, l’affichage d’un autre calque
Un Comportement est la combinaison d’une action et d’un événement.
contenant une carte avec une puce rouge à l’emplace-
Une action c’est, par exemple, l’ouverture d’une fenêtre du navigateur,
ment de Lille). Ci-dessous, un clic sur la vignette Lille
la lecture d’un son… Des actions simples concernent les calques : on affiche un texte de présentation de la métropole (en fait,
peut les rendre visibles ou invisibles (hidden). l’affichage d’un calque invisible à l’ouverture de la
Un événement est un message généré par les navigateurs indiquant page).
qu’un utilisateur a fait quelque chose sur la page. Par exemple, il
déplace le pointeur sur un lien (c’est l’événement OnmouseOver) ou
clique sur un lien (c’est l’événement OnClick).
Premier comportement
Vous allez définir un premier comportement : lorsque l’utilisateur de
votre page déplacera le pointeur de souris sur la vignette Lille, le calque
contenant la carte de France (calque Image) deviendra invisible et un
calque contenant la carte localisant la ville de Lille deviendra visible.
Insérez un nouveau calque de dimensions 304 x 238. Nommez-le pucelille.
Dans ce calque, insérez l’image [Link]. Placez-le aux coordonnées G
250 et S 90 de façon à le superposer exactement sur le calque Image.
Création du comportement
À l’ouverture de la page, seule la carte de France sans indication des villes
([Link]) doit être visible. Il faut, pour cela, rendre invisible (masqué) le
calque comportant la carte localisant cette ville (calque pucelille).
Une palette des calques, sorte de carte des calques de la page, permet
notamment, de modifier leur visibilité.
Pour rendre un calque visible ou invisible, il suffit de sélectionner le
nom du calque et de cliquer sur la colonne de gauche jusqu’à ce que
l’état de l’œil (fermé, ouvert ou absent) reflète l’état de visibilité voulu.
Choisissez Fenêtre - Calques
Sélectionnez le calque pucelille
Cliquez dans la colonne de gauche pour obtenir un œil fermé (posi-
tion masqué).
À l’ouverture de la page, la carte de France nue (sans puce) apparaîtra.
(2) Une carte différente a été préparée pour chaque métropole : sur le même fond, elle contient une puce rouge localisant la ville en ques-
tion. L’animation de la page nécessite donc 5 cartes : une carte de France sans aucune puce et les 4 cartes localisant chacune une ville.
MÉDIALOG N°45 — DÉCEMBRE 2002 33
Comment faire…
Vous allez définir le Comportement qui, au passage du pointeur sur le
mot Lille, masquera le calque Image et rendra visible le calque pucelille.
Avant de définir le comportement, il est nécessaire de remplir le champ
Lien dans les Propriétés de l’objet Lille. Par convention, on utilise le
caractère #.
Sélectionnez le mot Lille
Dans la zone Lien, tapez #
Dans la Palette des calques, cliquez sur l’onglet Comportements
Apparaît alors l’Inspecteur des comportements.
Cliquez sur le bouton +
Choisissez l’option Afficher-masquer calques
Dans la fenêtre de dialogue, sélectionnez le calque pucelille, cliquez
sur le bouton Afficher
sélectionnez le calque Image, cliquez sur le bouton Masquer
Cliquez sur OK.
Par défaut, l’événement OnClick est choisi, ce qui signifie que l’action
se déclenche lorsque l’on clique sur le mot Lille. Vous allez modifiez
l’événement de telle sorte que l’action se déclenche lorsque le pointeur
de souris passe sur le mot Lille, en choisissant l’événement
OnMouseOver. Pour cela :
Ouvrez la fenêtre des événements en cliquant sur la flèche située
entre Événements et Actions et sélectionnez OnMouseOver.
Sauvegardez la page. Testez l’animation.
Deuxième comportement
Vous allez créer le deuxième comportement : lorsque l’on clique sur le
mot Lille le texte de présentation de la ville apparaît.
Commencez par créer le calque contenant le texte de présentation de
Lille en utilisant le calque Texte existant.
Sélectionnez le calque Texte. Renommez-le textelille. Insérez dans ce calque
le texte de présentation de la ville ([Link]). Choisissez pour ce texte la
police Arial 2.
Ce calque doit être invisible à l’ouverture de la page.
Affichez la Palette des calques
Sélectionnez le calque textelille
Dans la colonne de gauche, faites apparaître l’œil fermé.
Créez le comportement qui affichera le texte lorsque l’utilisateur
cliquera sur le mot Lille.
Sélectionnez le mot Lille
Dans l’Inspecteur des comportements, cliquez sur +
Choisissez l’option Afficher-masquer calques
Dans la fenêtre de dialogue, sélectionner le calque textelille, cliquez
sur le bouton Afficher puis sur OK.
C’est l’événement désiré (onClick) qui est proposé par défaut.
Sauvegardez la page. Testez.
Troisième comportement
Créez maintenant le troisième événement : lorsque le pointeur de
souris quitte la vignette Lille, le texte de présentation et la localisation de
la ville sur la carte s’effacent. Il faut donc créer un nouvel événement
OnMOuseOut.
Sélectionnez le mot Lille
Dans l’Inspecteur des comportements, cliquez sur +
Choisissez l’option Afficher–masquer calques
Dans la fenêtre de dialogue, sélectionnez le calque textelille, cliquez sur
le bouton Masquer. Sélectionnez le calque pucelille, cliquez sur le bouton
Masquer. Sélectionnez le calque Image, cliquez sur le bouton Afficher
Cliquez sur OK.
34 MÉDIALOG N°45 — DÉCEMBRE 2002
Comment faire…
Par défaut, l’événement OnClick est choisi. On va modifier l’événement
et choisir OnMouseOut. Pour cela, ouvrez la fenêtre des événements en
cliquant sur la flèche située entre Événements et Actions et choisissez
OnMouseOut.
Sauvegardez. Testez.
Compléter l’animation
Pour créer la même animation pour la ville de Lyon :
1. Créez un nouveau calque aux propriétés suivantes :
Nom : pucelyon G : 250 – S : 90 – L : 304 – H : 238
Placez dans ce calque l’image [Link].
2. Créez un deuxième calque aux propriétés suivantes :
Nom : textelyon G : 10 – S : 90 – L : 200 – H : 300
Placez dans ce calque le texte issu du fichier [Link] (police Arial 2).
3. Ces deux calques ne doivent pas être visibles à l’ouverture de la
page. Masquez-les.
4. Créez les trois comportements sur le mot Lyon
a. Premier comportement : afficher, au passage du pointeur, le
calque pucelyon (et masquer le calque Image).
b. Deuxième comportement : afficher, lorsque l’on clique sur le
mot Lyon, le calque textelyon.
c. Troisième comportement : masquer, lorsque le pointeur quitte
la vignette Lyon, les calques pucelyon et textelyon et afficher le calque
Image.
Pour compléter les animations de la page, procédez de la même façon
pour Marseille et Paris (les fichiers nécessaires sont [Link] et [Link],
[Link] et [Link]).
Activer le bouton Aide
Pour terminer cette page, vous allez rendre actif le bouton d’aide. Il
s’agira simplement d’afficher dans une fenêtre du navigateur un court
texte expliquant à l’utilisateur comment animer la page. Le texte de
cette aide est le suivant : « En passant la souris sur le nom d'une ville, vous affichez sa
position sur la carte. En cliquant sur son nom, vous affichez un texte de présentation. Pour
fermer cette fenêtre, cliquez sur le bouton Fermer de la Barre de titre ».
Créez une nouvelle page [Link] contenant ce texte.
Dans la page [Link], définissez un nouveau comportement pour
le mot Aide du bandeau de navigation.
Sélectionnez le mot Aide
Dans le champ Lien de la Palette de propriétés, tapez un #
Dans l’Inspecteur des comportements, cliquez sur +
Choisissez Ouvrir Fenêtre navigateur
Dans la fenêtre de dialogue qui s’ouvre :
Dans le champ URL tapez [Link]
Dans le champ Largeur de fenêtre, tapez 220
Dans le champ Hauteur de fenêtre, tapez 200
Dans le champ Nom de la fenêtre tapez Aide
Cliquez sur OK.
Sauvegardez. Testez l’animation dans la page et la navigation dans
votre site.
Christian MAILLOT et Michel NARCY
Remerciements à
Jérôme TRINSSOUTROP et Dominique FAZILLEAU
Pôle d’expertise Internet – MATICE – Académie de Créteil
MÉDIALOG N°45 — DÉCEMBRE 2002 35
