1er Pas Avec Dreamweaver

Published on January 2017 | Categories: Documents | Downloads: 52 | Comments: 0 | Views: 386
of 27
Download PDF   Embed   Report

Comments

Content

Premiers pas avec Dreamweaver
Dreamweaver est un éditeur visuel professionnel pour la création et la gestion de pages web.
Dreamweaver permet de créer aisément des pages compatibles avec toute une série de plates-formes
et de navigateurs.
Dreamweaver permet également d'utiliser certaines fonctions du format HTML dynamique, telles que
les calques et les comportements animés, sans devoir écrire la moindre ligne de code.

1 Création d'une page ou d'un nouveau site ?
1.1

Création d'une page html

Par défaut, à l'ouverture de Dreamweaver, l'écran présente une page « blanche » et vide, sans titre.

Insertion d’images, de
tableaux, de barres
horizontales, etc.
Pour modifier les
propriétés d’un
objet sélectionné
Suivant les options cochées
du menu fenêtre, un certain
nombre de palettes (flottantes,
elles peuvent être déplacées
sur l’écran) d’outils sont
présentes à l’écran.

Le lanceur (ou le mini-lanceur présent dans la barre d’état de la fenêtre)
donne accès à 6 fenêtres de Dreamweaver utiles pour maintenir le site, le
publier retrouver des éléments souvent utilisés dans les pages
(bibliothèque), gérer les styles, les comportements javascript, les
animations dimages ou voir le code Html généré.

(mini-lanceur présent dans la barre d'état)

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 1/27

La saisie de texte s’opère comme dans un éditeur de texte :

Le bouton Html de la fenêtre du lanceur permet d'afficher le code html de la page. On prend alors
conscience que la page n'est pas vide et contient déjà la structure d'une page html :

Balise de début de page Html
L’en-tête contient des
informations non affichées dans
la page qui sont utilisées par les
navigateur (titre de la page) ou
les moteurs (mots-clés)

Le corps de la page contient le
texte informatif, les images
affichés dans la page
Les accents ont
été “traduits”

Balise de fin de page Html

Fermer alors la fenêtre de l’éditeur Html, puis fermer le premier document Html sans l’enregistrer.
On pourra consulter en annexe quelques éléments de code Html.
De la page au site…
Dreamweaver permet donc de créer ponctuellement une page html. Mais il permet également de créer un
site complet dans un dossier préalablement créé. Dreamweaver offrira alors un ensemble d'outils de gestion
de site qui faciliteront sa mise à jour notamment à l'occasion de déplacement de fichiers, lorsque l'on
renomme les pages ou les images, le code html des pages prendra en compte ces modifications.

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 2/27

1.2

Définition d'un site local

Pour travailler avec Dreamweaver, si l’on souhaite créer une “grappe de pages”, il est souhaitable de
commencer par créer un site local.
Un site est un emplacement où l'on stocke l'ensemble des documents et des fichiers appartenant à un site
web. Un site local requiert un nom et un répertoire racine local indiquant à Dreamweaver l'emplacement où
l'on conservera les fichiers du site. On devra créer un site local pour chaque site web sur lequel on
travaillera.
Pour créer un site local :
1. Dans Dreamweaver, ouvrez la boîte de dialogue Définition du site en procédant comme suit :
Fichier > Nouveau Site.
2. Dans la boîte de dialogue Définition du site, vérifier si l'option « Infos locales » est sélectionnée dans la
liste Catégorie.
3. Nommer le site Initiation_html en tapant ce nom dans le champ Nom du site (le nom du site local est un
surnom qui renvoie directement au répertoire défini comme site local).
4. Cliquer sur l'icône de répertoire à droite du champ Dossier racine local et naviguer jusqu'au répertoire
désiré, puis cliquer sur Enregistrer (attention, le répertoire d’accueil doit être créé avant).

5. Les options de gestion des liens peuvent être ignorées dans un premier temps.
6. Cliquer à droite de la boîte de dialogue dans la catégorie “mise en forme de la carte du site" pour préciser
le nom de la première page du site :

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 3/27

7. Cliquer sur OK, puis sur Créer lorsque Dreamweaver demande si l'on souhaite créer un fichier cache pour
le site (même si l’on n’a pas coché l’option correspondante dans la boîte de dialogue). L'option de
création d'un fichier cache dans le répertoire permet de créer un enregistrement des fichiers existants de
manière à ce que Dreamweaver puisse rapidement mettre les liens à jour lorsque l'on déplacera,
renommera ou supprimera un fichier.

8. Si le dossier stage, contient déjà des fichiers créés par ailleurs, la fenêtre du site les affiche. La liste fera
également office de gestionnaire de fichiers, en vous permettant de copier, coller, supprimer, déplacer et
ouvrir des fichiers exactement comme dans le sélecteur de fichier ou l'explorateur de l'ordinateur.
9. L’utilisateur accède alors à une nouvelle fenêtre, c’est la fenêtre de site, elle permet la maintenance de
base des fichiers du site (renommer, supprimer) et leur publication vers un site distant.

2 Composition de la page d’accueil
Depuis la fenêtre de site, un double-clic sur le nom du fichier “index.htm” permet d’ouvrir celui-ci dans la
fenêtre document.

2.1

Un titre et un arrière-plan pour la page index.htm

Choisir Modifier > Propriétés de la page pour ouvrir la boîte de dialogue Propriétés de la page.

Saisir un titre pour cette page, c'est le titre qui sera affiché dans la barre de titre des navigateurs, ce titre
peut comprendre des caractères accentués et des espaces, il est relativement explicite.
Remarque : Il est également possible d’insérer des mots-clés dans l’en-tête de la page, ces mots-clés non
affichés dans la fenêtre du navigateur peuvent être utilisés par les utilisateurs de moteurs de recherche dans
le cadre d’une recherche précise de documents.
Pour insérer des mots-clés : Insertion > en-tête > mots-clés.

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 4/27

Pour définir une couleur d'arrière-plan pour la page :
§ Choisir une couleur dans la palette ou utiliser le compte-gouttes pour sélectionner une couleur d'un
objet de la page ou encore saisir le code de couleur par exemple #CCCCCC pour du gris dans le champ
Couleur d'arrière-plan.
§ Cliquer sur Appliquer pour appliquer la couleur à l'arrière-plan.
Remarque : Une couleur est codée sur trois paires (correspondant au rouge, vert bleu) de caractères
hexadécimaux (dont la valeur exprime l'intensité de la couleur) ; le signe # précède les trois paires.
Rouge
#FF0000
Vert
#00FF00
Bleu
#0000FF
Magenta
#FF00FF
Cyan
#00FFFF
Jaune
#FFFF00
Blanc
#FFFFFF
Noir
#000000
Gris
#C0C0C0
Pour définir une image d'arrière-plan pour la page :
§ Cliquer sur Parcourir (Windows) à côté du champ Image d'arrière-plan.
§ Sélectionner une image, si l'image n'a pas été stockée préalablement dans le dossier de travail
(E:\stage par ex : l’image d’arrière-plan crepi.gif se trouve dans un dossier E :\image), Dreamweaver
propose d'en faire une copie dans le site en cours :

§
§

On acceptera cette duplication pour ramener tous les éléments composant la page dans le même
dossier
Cliquer ensuite sur Appliquer pour ajouter l'image d'arrière-plan à la page.

2.2
2.2.1

Noms de fichiers et titres des pages, quelles différences ?
Le nom de fichier de la page d'accueil

La page doit être enregistrée dans le dossier de travail. Si elle a vocation a devenir la page d'accueil du futur
site, elle devra avoir pour nom index.htm ou index.html, voire default.htm, default.shtml. En fait tout dépend
du serveur Web qui servira les pages html au niveau de l'espace d'hébergement qui recevra les pages.
Supposons l'hébergement sur Internet soit à l'adresse « perso.truc.fr », on vous a accordé un répertoire
nommé « soleil » sur cette machine pour stocker vos fichiers, les pages seront donc envoyées sur l'URL
« perso.truc.fr/soleil/ ».
Si les pages index.htm, p1.htm, p2.htm ont été stockées sur cet espace, un utilisateur pourra depuis son
navigateur taper www.perso.truc.fr/soleil/p1.htm , il verra s'afficher la page p1.htm dans la fenêtre de son
navigateur. Cependant, si vous surfez, vous avez du remarquer que lorsque vous tapez une adresse de site,
généralement vous ne tapez pas le nom de la page et pourtant une page d'accueil vous est envoyée par le
serveur. C'est que le serveur est paramétré (par son administrateur), pour servir par défaut une page bien
précise ; en général l'administrateur imposera au serveur d'envoyer la page « index.htm » en dehors de toute
précision fournie par l'utilisateur. Ainsi conviendra-t-il de se renseigner auprès de l'hébergeur de votre site
pour vous savoir comment nommer sa page d'accueil. En général donc index.htm...
2.2.2

Et les noms de fichiers des autres pages...

Pour ce qui concerne les autres pages du site, leur nom importe peu... ou presque ! En effet, nombreux
sont les serveurs à faire la différence entre majuscules et minuscules dans des noms de page, la plupart
refusent les caractères accentués, tous détestent les espaces... d'où la règle des trois pas :




pas d'accents,
pas d'espaces,
pas de majuscules.

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 5/27

2.2.3

Les titres des pages

Les titres des pages quant à eux peuvent être composés avec des majuscules, des espaces des accents.
Le titre de la page est affiché dans la barre de titre du navigateur pendant la consultation de la page. Les
mots composant le titre devront cependant être judicieusement choisis. En effet de nombreux moteurs de
recherche savent rechercher les mots-clés saisis par l’utilisateur dans le titre des pages (dans Altavista, il
suffit de faire précéder le mot-clé de “title :”, dans Ecila, on peut affiner la recherche en choisissant l’option
de recherche des mots-clés dans le titre seulement…). Le titre doit donc rendre compte assez précisément
du contenu de la page.

2.3

La mise en page du contenu informatif

Pour obtenir une mise en page permettant de placer du texte à côté d'une image, comme avec tous les
éditeurs Html, il convient d'utiliser un tableau. On utilisera soit la commande Insertion > tableau, soit
l'icône appropriée de la fenêtre d'objets.
2.3.1

Insertion d'un tableau
La largeur d’un tableau peut être exprimée
en pourcentage de la largeur de la fenêtre
de visualisation du navigateur (le contenu
textuel des cellules sera recomposé pour
éviter d’avoir à utiliser l’asenceur).
Cette largeur de tableau peut être
exprimée en pixel si l’on souhaite éviter
une désorganisation de la page quand
l’utilisateur final visualise la page avec une
fenêtre trop étroite, notamment par
exemple lorsque des légendes figurent au
côté d’images insérées dans un tableau.

Si le tableau n’est utilisé que pour faciliter
le placement d’objets, on ne matérialisera
pas la bordure

Lorsque le tableau est sélectionné, l'inspecteur de propriétés nous renseigne sur les propriétés du tableau :

2.3.2





Insertion d'une image dans la cellule de gauche du tableau

Placer le point d'insertion dans la cellule gauche du tableau
Commande Insertion > image ou icône image de la fenêtre des objets
(image sigle_iufm.gif)
Redimensionner l'image (en faisant glisser une poignée d'angle ou en
saisissant les nouvelles valeurs dans l'inspecteur de propriétés)
Déplacer la double barre pointillée symbolisant la limite entre cellules pour la
ramener contre l'image.

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 6/27

Rappel : Si l’image n’avait pas été stockée préalablement dans le répertoire de travail, Dreamweaver
propose de dupliquer ce fichier afin qu’il se trouve dans le même dossier que la page Html. Il est prudent
d’accepter.
En effet, à la différence d’un fichier Word, lorsqu’une image est insérée, elle n’est pas insérée dans le fichier
Html généré. Elle a une existence propre sur le disque dur.
Ma_page.html

Img1.gi
f
Img2.gif

Ma_page.doc

Page Html ne
contenant que
du texte et un
lien vers les
images qui sont
stockées
séparément.

Une page Html ne contient que du texte, ce dernier contient des « appel » à des images dont les fichiers
sont distincts de la page, les balises Html assurant leur positionnement au moment de l’affichage dans un
navigateur.
Par exemple voici le code Html qui décrit le placement de deux images :

<p><img src="file:///C:/Gifs%20animées/ani_cat.gif"
width="100"
height="60"><img src="aniheart.gif" width="40"
height="40"></p>
L’image ani_cat.gif est située dans le dossier Gifs animés du disque dur C, le chemin est précisé dans le
code de la page html. Lorsque la page sera stockée sur une machine hôte (un serveur distant), au moment
de l’affichage de la page, l’image en question sera recherchée dans le répertoire C:/Gifs%20animées/.
Aura-t-on pris soin de publier également ces images dans un répertoire de même nom sur le serveur ? Si
oui tout se passe bien, sinon l’image ne sera pas trouvée et donc pas affichée.
L’image aniheart.gif quant à elle est recherchée dans le répertoire courant, elle sera trouvée sans problème
si tous les fichiers du répertoire courant sont copiés vers le serveur.

Il conviendra donc de créer un répertoire qui contiendra tous les éléments du
site (images, sons, pages html) pour être sur de ne pas en oublier au
moment du transfert vers le site d’hébergement.
Si l’on souhaite travailler plus proprement encore on pourra créer un
répertoire qui contiendra à la fois les pages et un autre répertoire qui
contiendra lui-même les images.
C’est l’ensemble du répertoire « mon site » qui sera transféré, le texte des
pages contiendra alors des chemins relatifs pour indiquer l’emplacement
des images dans le sous répertoire

2.3.3

c:\mon_site
page1.htm
page2.htm
page3.htm
c:\monsite\mes_images
img1.gif
img2.jpg
img3.jpg
img4.gi

Saisie du texte dans la cellule de droite

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 7/27

La liste déroulante « taille » de l'inspecteur de propriétés permet de choisir une police et une taille (ici 7)
pour le texte.
Remarques :
§ Les tailles de police HTML sont relatives ; ce ne sont pas des tailles de points spécifiques. Les
utilisateurs définissent le corps de la police par défaut pour leur navigateur ; il s'agit du corps affiché
lorsque Par défaut ou 3 est sélectionné dans l'inspecteur des propriétés ou à partir du menu Texte >
Taille. Les tailles 1 ou 2 apparaîtront plus petites que celle de la police par défaut ; les tailles de 4 à 7
apparaîtront plus grandes. Pour que le texte s'affiche constamment dans une taille de point particulière,
utilisez les feuilles de style.
§ Lors de la saisie de texte, c'est la police par défaut de l'éditeur qui est utilisée. Mais c'est la police par
défaut du navigateur qui permettra de visualiser la page affichée ! Il est donc important de sélectionner
une police dans la liste déroulante pour la spécifier afin de “l’imposer” au navigateur de l’utilisateur final.
Attention, les polices fantaisies ne sont pas forcément présentes sur les postes de travail de la majorité
des "internautes", à défaut de trouver la police choisie par le concepteur de la page, c'est la police par
défaut du navigateur de la machine hôte qui est mobilisée.
§ Les espaces entre les paragraphes sont importants, on pourra judicieusement remplacer certaines
marques de paragraphes par des retours à la ligne (<Maj>+<Entrée>).

2.3.4

Visualiser de temps en temps la page réalisée dans un navigateur

Bien que la fenêtre document de Dreamweaver offre une vue de la page telle peut apparaître dans un
navigateur, il est préférable de visualiser celle-ci dans un ou plusieurs navigateurs afin de s’assurer du rendu
de la page. On utilisera la commande Fichier > Aperçu dans le navigateur.
Compléter la page d’accueil avec des rubriques qui serviront de support à la mise en place de liens.
Faire en sorte que l’ensemble des rubriques soit visible dans une fenêtre de navigateur sans avoir à
utiliser la barre de défilement.

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 8/27

bout_vert.gif

lettre.gif
Visualiser la page dans un navigateur et constater que l’image lettre.gif est une image animée.

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 9/27

3 Création d’une nouvelle page et mise en place des hyperliens
Pour créer une nouvelle page :
Depuis la fenêtre document : Fichier > Nouveau
Depuis la fenêtre du site : Fichier > Nouveau Fichier
Créer la page sites.htm
On pourra utiliser les adresses de sites utiles à la construction de pages Web fournies en annexe
Nom de fichier sites.htm (Attention aux règles relatives au nom de fichier !)
Titre de la page : Adresses utiles Html
Œil.gif

Grib_r.gif

Ajouter une police
(voir infra)

Créer un style
(voir infra)

3.1

Ajouter une police

Lorsque l’on souhaite utiliser fréquemment une police spécifique et que celle-ci n’apparaît pas dans la liste
déroulante de l’inspecteur de propriétés, il suffit de personnaliser la liste

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 10/27

3.2

Créer un style de paragraphe

Création du style “items” (police Comic sans ms, rouge, taille 12)

Choix des propriétés du style

Application du style à un paragraphe sélectionné

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 11/27

3.3

Mise en place d’hyperliens

3.3.1

Hyperlien menant à une page du même site

Depuis la page index.htm (on y revient par l’intermédiaire du menu fenêtre qui contient les pages en cours
de traitement), mettre en place un lien vers la page sites.htm
Sélectionner le texte du lien et saisir l’adresse à
atteindre (ici une page html) dans la zone “liens” de
l’inspecteur de propriétés, ou encore, choisir de
rechercher la page dans un dossier (ce qui évitera les
erreurs de saisie, la saisie de caractères en
majuscule etc…) :

Sur la page sites.htm, mettre en place un lien sur une image qui permettra le retour sur la page d’accueil

§

Insérer l’image flech_g.gif en pied de tableau (pour obtenir un
alignement vertical correct avec le texte “retour à la page d’accueil”,
l’image étant sélectionnée, choisir l’alignement “milieu absolu” dans
l’inspecteur de propriétés)

§

Sélectionner ensuite l’image et mettre en
place le lien vers Index.htm

Remarque : pour tester les liens, un clic droit sur le texte du lien permet d’atteindre le menu contextuel, on
choisira la commande “ouvrir la page liée”
Mettre en place le lien vers la page glossaire.htm qui existe déjà et qui aura été préalablement copiée dans
le répertoire de travail e :\stage.

3.3.2

Mise en place de liens vers une adresse de site ou page sur Internet

Mettre en place quelques liens depuis la page sites.htm
vers les sites en question

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 12/27

3.3.3

Mise en place de liens internes à une page

La page glossaire.htm contient une série de
définitions rangées en ordre alphabétique. Il serait
donc opportun d’accéder aux définitions via des
hyperliens figurant sur un sommaire.
Ouvrir la page "glossaire.htm" et insérer des
“ancres nommées” (au début de chaque nouveau
groupe de mots commençant par la même lettre) et
des liens pour permettre un va et vient entre le
répertoire du haut de la page et les différentes
définitions.
Insertion > Ancre Nommée ou <Ctrl> +<Alt> +A
Il faudra nommer l’ancre, par exemple pour le
début de la rubrique des B :

Remarque : l’ancre permet d'identifier un endroit
précis du texte (cet endroit peut être constitué par
une image), l'hyperlien peut pointer sur l’ancre.

ABCDEF
G
___________
A~~
~~ ~
È
B~~
~~ ~
È
C~~
~~ ~
È
D~~
~~ ~
È
E~~

~ ~~
~ ~~ ~
~ ~~
~ ~~ ~
~ ~~
~ ~~ ~
~ ~~
~ ~~ ~

Lien permettant
le retour au
sommaire

~ ~~

Z~~ ~ ~~
~ ~ ~ ~ ~~ ~
È
Accueil

Lien vers la page
index.htm

Depuis le répertoire figurant en sommaire de la page, il convient de mettre en
place un hyperlien vers l’ancre ainsi définie : faire précéder le nom de l’ancre du
symbole #

Insérer un lien en bas de page pour le retour à la page d'accueil du site (index.htm)
puis un lien de la page d’accueil (index.htm) vers la page glossaire.htm

Remarque : le principe des ancres (appelées signets dans le “monde” Microsoft, cibles dans le monde
Netscape) est très utilisé pour générer des aides contextuelles dans un document pointant vers une zone
précise d’un second document. Un lien mis en place dans une page de texte utilisant des termes
techniques peut pointer vers une zone précise de la page glossaire.htm, pour cela il suffira de désigner le
lien en donnant l’adresse de la page suivie de # puis du nom du signet :

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 13/27

3.3.4

Visualiser la carte du site

La commande “site” de la fenêtre du lanceur permet d’atteindre la fenêtre du site :

Un clic sur le bouton “carte du site” permet
de visualiser graphiquement la grappe de
page ainsi constituée :

3.3.5

La mise en place d’un lien vers une adresse électronique

Comprenons-nous bien, il ne s’agit pas de créer un lien qui permettra d’ouvrir une boîte aux lettres
électronique, mais simplement de générer un nouveau message en complétant automatiquement l’adresse
du destinataire. Cette procédure permet de faciliter l’envoi d’un message par l’utilisateur (par ouverture
automatique de la fenêtre “nouveau message” du logiciel de messagerie installé sur sa machine), tout en
évitant les erreurs de libellé d’adresses.
Sélectionner le texte “Ecrivez-nous” de la page d’accueil, puis dans la zone de lien de l’inspecteur de
propriétés de faire précéder l’adresse électronique du destinataire de “mailto :”

L’image animée de l’enveloppe étant suggestive, il est judicieux de placer le lien également sur celle-ci.

3.3.6

Création d’un hyperlien en direction d’un fichier Word, Excel ou pdf

La page d’accueil propose une information relative à la réglementation en matière de construction de site.
Afin de permettre à tout utilisateur de pouvoir lire le fichier (regle_site.pdf), il a été préalablement enregistré
dans le format pdf (portable document format) d’Acrobat. Ce format permet à l’utilisateur de lire le document
dans sa pagination d’origine, avec Acrobat Reader (gratuit) sans avoir besoin de disposer de la version
adéquate de Word, Excel ou autre application. Lorsque le lien est activé, le navigateur provoque l’ouverture
d’Acrobat reader qui permet de lire le fichier rapatrié. La réalisation d’un fichier Acrobat nécessite de
disposer de la version payante cette fois d’Acrobat Writer (voir le document Production d’un fichier Acrobat Iufm de reims- Jacques Bresson)
Attention, la version reader d’Acrobat ne propose pas d’enregistrement du fichier téléchargé. Par ailleurs
certains fichiers pdf n’affichent que des pages blanches (c’est un bogue reconnu par Adobe qui diffuse

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 14/27

Acrobat). Pour éviter ces deux problèmes, l’utilisateur final fera un clic droit sur le lien menant à un fichier
acrobat et choisira la commande “enregistrer la cible sous” du menu contextuel.
Création de la page telechargement.htm qui contient les liens vers les divers documents
Créer une page Html, y insérer des liens en direction des trois documents ci-dessous.
Tester l'effet de l'activation des liens sous un navigateur.

Construire une page de documents à proposer en téléchargement qui sera reliée à la rubrique
“téléchargement de documents” de la page index.htm.
Les différents documents devront être éventuellement transformés dans un format spécifique ou compressé.
Attention : Prendre soin de stocker ces fichiers dans le même dossier (que celui qui contient vos pages, à
défaut dans un sous dossier), pour que le chemin d'accès au document contenu dans le lien soit le même
après téléchargement du site dans un dossier de pages personnelles sur un site d'hébergement.
Nature

Nom de fichier à proposer au Taille
téléchargement
mots_croises.xls
53Ko

Une grille de mots croisés avec dispositif d'aide
sous Excel 97 (aucune manipulation à faire sur ce
document, l'ouvrir sous Excel pour constater son
fonctionnement)
Création de pages Html avec Word 97 : nécessite doc_html_word.exe
de compresser le fichier "doc_html_word.doc"
125Ko avec Winzip, puis en faire un fichier
autodécompactable
Création de pages Html avec Frontpage Express : doc_html_fpex.pdf
nécessite de convertir en pdf pour lecture à l'écran
le fichier "fp_express.doc" de 95ko

Comparer la taille du
fichier compressé
obtenu avec le
fichier Word
d'origine.
Comparer la taille du
fichier compressé
obtenu avec le
fichier Word
d'origine.

Test des liens
Si la machine de l'utilisateur est correctement configurée, les documents sont automatiquement ouverts
avec Word, Excel, ou Acrobat Reader (si ces logiciels sont présents sur la machine).

Si les logiciels ne sont pas installés, ou que
l'association entre l'extension du nom de fichier et
l'application à ouvrir n'est pas réalisée, une fenêtre
d'enregistrement s'ouvre.

Si l'on souhaite pouvoir stocker immédiatement les
documents sur son disque dur à un endroit précis
sans les ouvrir, il suffit, depuis le navigateur, de faire
un "clic droit" sur le lien et de choisir la commande
"enregistrer sous" dans le menu contextuel.
3.3.7

La création de zones réactives sur une

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 15/27

image
Cette fonctionnalité de Dreamweaver permet de générer différentes zones réactives sur une image, chaque
zone pointant grâce à un hyperlien vers une information spécifique (autre page du site, autre site…). On
retrouve cette fonctionnalité sous les éditeurs évolués comme FrontPage mais généralement pas dans les
éditeurs de type graticiels (il en est de même pour l’affichage en wysiwyg des pages de cadres –voir infra-).
Créer une nouvelle page :
Titre : tourisme Région Champagne – Ardenne
Nom de fichier : region.htm (attention, pas d’accent au mot region).
Insérer le texte suivant en haut de page : Promenade en Champagne Ardennes
Insérer l’image : champ-ard.jpg
Arrière-plan : image blanc.gif
Texte du titre en taille 7 couleur : vert
Saisir ensuite les textes et insérer les images suivantes :
Promenade en champage- Ardenne
Champ-ard.jpg

La place ducale à charleville-Mézières
Ducale.jpg

Mettre en place des ancres
nommées sur les
paragraphes précédant les
titres de la page

Pour mieux voir le positionnement
des ancres :

La cathédrale de reims
Cathedrale.jp
g

Le vignoble d’Epernay
Vignes.jpg

Créer les zones réactives sur la carte de la région :
Sélectionner l’image de la région et activer le bouton “carte” de l’inspecteur de propriétés

Le bouton “Carte” permet d’ouvrir
une fenêtre dotée d’outils de
tracés afin de délimiter des zones
réactives.

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 16/27

L’éditeur de carte permet alors de définir
les zones réactives de l’image avec les
outils de tracé et de définir les liens (ici
vers les ancres nommées).
Enregistrer les modifications et visualiser la
page dans un navigateur.

Tester les liens dans un navigateur (rappel
: Fichier > Aperçu dans le navigateur)

Insérer une flèche de retour flech_h.jpg pour permettre la création d’un lien affichant le haut de page (il
faudra donc insérer préalablement une ancre en haut de page).
Enregistrer la page et mettre en place un lien vers cette
page depuis la page d’accueil (index.htm)

4 Redéfinition des styles des hyperliens
La définition d’un style de paragraphe a été abordée au chapitre 3.2
Il est possible de redéfinir le style de certaines balises, notamment celle des hyperliens qui sont toujours
présentés de manière soulignée, mais que l’on peut souhaiter d’une couleur particulière et non souligné pour
tenir compte d’une charte graphique pour le site.

4.1

Création d’un style incorporé dans la page

Pour la page index, définissons des liens en vert gras et non soulignés
Depuis le lanceur : style > Editer > Nouveau

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 17/27

Il s’agit de redéfinir la balise a href qui
permet de générer le lien hypertexte

Remarque : lors de la définition de la couleur, on dispose d’une pipette qui permet de prendre un
échantillon de couleur sur un autre élément de la page au besoin.
Enregistrer le document.

4.2

Création d’une feuille de style externe

Le style d’hyperlien est propre à cette feuille. Il est cependant possible de créer une feuille de style externe
qui contient la définition des différents styles, sur laquelle “pointeraient les différentes pages du site. Ainsi,
en modifiant une seule fois le style dans la feuille de style externe, les textes des différentes pages
comportant ce style seraient modifiés en une seule opération.
Depuis la page Index.htm, activer la commande Style > Editer et cliquer sur le bouton
“lien” de la boîte de dialogue
Nommer la feuille de style externe (ce nom n’existe
pas au départ), cela donnera naissance à une feuille
commun.css stockée sur le disque.

Créer alors les styles comme aux chapitres 3.2
et 4.1
Enregistrer

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 18/27

Ouvrir les autres pages html (sites.htm par exemple) et mettre en place le lien vers la feuille de style
Style > Editer > Lien et pointer la feuille de style commun.css
Les styles de la feuille sont pris en compte dans le document.
Enregistrer
Remarque : De la même manière, il est possible de modifier la balise body pour préciser la couleur
d’arrière-plan.

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 19/27

5 Les animations
De nombreuses images Gif animées sont disponibles sur Internet (voir adresses en annexe). Il est
également possible de créer de telles animations avec un logiciel du type de GifAnimator (qui ne fait que
cela) ou avec PaintShopPro (qui fait bien d’autres choses).
Il est possible d’insérer du code javascript ou des appliquettes Java. De nombreux sites présentent des
exemples de code et la manière de l’insérer par copier coller dans une page html (voir les adresses en
annexe).
Dreamweaver propose en standard des animations de texte et d’images

5.1

Les calques et les scénarios

Avec plupart des éditeurs Html, il est nécessaire de recourir aux tableaux (Html 2 et amélioré en version 3.3
avec les cartes réactives) pour positionner correctement textes et images dans une page Html. Avec le
principe des feuilles de styles en cascade (CSS), il est désormais possible de positionner des cadres
contenant des images ou du texte à un endroit précis d’une page et ceci dans trois dimensions. Attention
cependant, le code inséré dans la page n’est lu correctement que par les navigateurs de version 4
ou supérieure !
5.1.1
§

Insertion de calques dans une page

Créer une nouvelle page : nom « journee.htm », titre « La journée en images », enregistrer la page

ou bien
§

Insérer dans le calque l’image « autocar.gif » et redimensionner le calque au besoin pour l’ajuster à la
taille de l’image.

Poignée de déplacement du
calque.

Nom du calque du calque.
Plus l’index Z est élev plus le
calque est placé au premier plan.
§
§
§

Insérer successivement deux autres calques qui contiendront l’image
« roue_av.gif » pour l’un et « roue_ar .gif » pour l’autre.
Positionner les cadres en haut et à droite de la page et placer les roues
au bon endroit sous l’autocar.
Enregistrer

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 20/27

5.1.2

Insertion d’un scénario

§

Pour déplacer l’autocar, il est nécessaire d’utiliser scénario qui va
décrire comment les différents calques vont se déplacer dans la
page.

§

C’est la fenêtre de scénario qu doit être ouverte via la commande du
lanceur.

§

Sélectionner le calque de l’autocar, il est situé en ahut et à droite de
la page à l’endroit où commencera l’animation.

§

Insérer cet objet calque dans le scénario, soit par la
commande Modifier > Ajouter un objet au scénario soit en
faisant glisser le calque vers la fenêtre de scénario sur la
première ligne de la barre d’enchaînement des séquences.

§

Cliquer alors sur
l’extrémité droite de
la zone grisée qui
représente le calque
dans la barre des
temps et déplacer le
calque à sa position
finale (haut gauche
de la page) pour
indiquer qu’elle devra
se situer à cet
endroit en “fin de
course”.

§

Un trait horizontal
symbolise la trajectoire du
calque sur la page

Recommencer l’opération pour les
deux roues qui viendront s’ajuster
sous l’autocar “avec un temps de
retard” : pour cela les zones
grisées relatives aux deux roues
seront situées chronologiquement
après dans la barre des temps de
la fenêtre de scénario.

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 21/27

§

Veiller à ce que l’option “lecture Automatique” soit cochée dans la fenêtre des scénarios pour que ce
scénario soit joué à l’ouverture de la page

§

Enregistrer la page et visualiser l’effet obtenu dans le navigateur.

§

Recommencer l’opération avec un calque qui contiendra le titre de la page “La journée en images”, le
calque partira du bas de la page et viendra s’ajuster en haut de la page à côté de l’autocar…
Puis insérer un claque qui contiendra un tableau permettant la mise en page des photographies
La première rangée de cellule fera l’objet d’une fusion de cellules (clic droit > tableau > fusionner) et
recevra l’image haut_photos.jpg ; le pied du tableau recevra l’image bas_photos.jpg.
L’image flech_d.gif recevra le lien qui renvoie à la page index.htm.

§
§
§

5.2
5.2.1

Les comportements
Du son à l’ouverture de la page

On souhaite qu’un son soit joué à l’ouverture de la page index.htm
Pour associer un comportement à l'ensemble de la page, cliquer sur la balise <body> dans le sélecteur de
balises situé au coin inférieur gauche de la fenêtre du document.
Choisir Fenêtre > Comportements
pour ouvrir l'inspecteur de
comportements, ou cliquer sur le
bouton Comportement du Lanceur.
La balise HTML de l'objet sélectionné apparaît dans la barre de titre.
Cliquer sur le bouton + (signe plus) et effectuez un choix parmi les actions du
menu contextuel.
Choisir le fichier ouverture.wav et choisissez OK.

Toutes les actions proposées fonctionnent dans les navigateurs 4.0 ou plus récents. Certaines actions sont
refusées pas les navigateurs moins récents.
Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 22/27

L'événement par défaut de l'action apparaît dans la colonne Événements ici “onload” pour le lancement du
son à l’ouverture de la page.

Enregistrer la page index.htm

5.2.2

Du son au survol d’une image

Supprimer le logo de l’Iufm dans la page index.htm, il s’agit d’y insérer ce même logo qui se transformera en
une photographie sépia du siège de l’Iufm lors d’un survol de la souris.
Une commande du menu insertion permet d’éviter de paramétrer le comportement dans la fenêtre de
comportement
Insertion > Image retournée

Le comportement est désormais défini pour cette image.
Remarque : on procèderait de la
même manière pour provoquer
l’exécution d’un son au passage de la
souris sur une image.

Enregistrer la page index.htm et la tester sous un navigateur.
5.2.3

Insertion d’une appliquette java dans une page

Créer une nouvelle page jeu.htm

Aligne 4

Saisir le texte de la page :

Exercez-vous contre l'ordinateur
Puis insérer une apliquette java :
Insertion > Apliquette
Choisir le fichier java : “connect4.class”
Modifier la taille réservée à l’affichage de l’apliquette
Le code inséré peut être visualisé par la commande <Html> du
lanceur :

Enregistrer la
page et la tester

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 23/27

sous un navigateur.

6 Les pages de cadres
En général, on utilise une page de cadres pour une présentation de type suivant :
Titre du site ou titre courant
de la partie de site visitée,
en génral avec un logo.
Sommaire
contenant des
liens affichant les
pages dans la
partie informative

Partie informative du site.

Cette organisation des cadres peut être modifiée, on peut ajouter d’autres cadres, modifier leur taille…
Attention :
§
§
§
§

6.1

Une page de cadres décrit les propriétés des différents cadres et leur positionnement relatif.
Chaque cadre est identifié par un nom et spécifie la page html qu’il affiche par défaut.
La page de cadres ne contient donc pas les informations lues par l’utilisateur final, ces informations
sont donc contenues dans les pages html affichées dans les cadres.
Ne pas confondre les cadres (encore appelés « frames ») et les claques (voir supra).

Création d’un jeu de cadres dans une nouvelle page

§

Créer une nouvelle page

§

Création du jeu de cadre
Affichage > bordures de cadres
Déplacer la bordure apparue en haut de la page en maintenant la touche
<Alt> enfoncée

Remarque : un cadre une fois créé, peut être subdivisé en
plusieurs cadres avec la même procédure.
§
§

Ouvrir la fenêtre de cadres fenêtre > cadres
Cliquer dans le cadre inférieur de la fenêtre de propriétés
de la page de cadre pour activer le cadre inférieur et
déplacer la bordure de gauche comme précédemment en
maintenant la touche <Alt>

Le positionnement des trois cadres est maintenant réalisé
Enregistrer les modifications réalisées dans la page
c_infos.htm

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 24/27

6.2

Identification des pages à afficher dans les cadres

Il faut alors définir quelle page sera affichée par défaut dans chacun des cadres.
Pour cet exercice cinq pages ont été créées rapidement dont on pourra par la suite modifier le contenu :
titre.htm, menu.htm ,Info1.htm, Info2.htm, info3.htm

§

Pour modifier les propriétés du cadre « du haut », appuyer sur <Alt> et cliquer dans le cadre supérieur

On précise s l’on souhaite
ou non une bordure.
On donne un nom au cadre
qui sera enregsitré comme
toute page html .

On choisit la page qu’e le
cadre affichera par défaut
On précise si les barres de
défilement doivent être
apparentes .

Cadre supérieur : nom « banniere » affichera la page « titre.htm »
Cadre de gauche : nom « sommaire » affichera la page « menu.htm »
Cadre principal : nom « principal » affichera la page « info1.htm »
Enregistrer le jeu de cadres :
Fichier > Enregistrer le jeu de cadres
Donner le nom c_infos.htm

6.3

Mise en place des liens

§

Sélectionner « générales » dans le menu et depuis l’inspecteur de propriétés, générer un lien en
direction de la page info1.htm en précisant le cadre de destination :

§

Recommencer l’opération pour les liens suivants
Formateurs pointe vers info2.htm, Stagiaires pointe vers info3.htm

Pour ce qui concerne le retour vers la
page d’accueil, la page « index.htm »
ne doit pas être affichée dans le cadre
principal mais en pleine fenêtre, pour

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 25/27

cela il convient de choisir comme cible « _top ».

7 La publication du site sur un serveur local ou distant
Dans le cadre d’un réseau local d’établissement, un serveur Web personnel peut avoir été installé sur une
machine « PWS serveur de Frontpage par exemple sur un Windows 95 ou 98, IIS sur une machine NT,
apache sur un serveur Linux etc.
Le logiciel serveur guette sur le port 80 de la machine une demande qui s’adresse à lui par l’intermédiaire
d’un navigateur dans lequel on aurait saisi dans la barre d’adresse : http://nom_de_serveur.
Lorsqu’il est sollicité le serveur envoie la première page du site (en général index.htm, mais ce nom de page
est paramétrable et certains serveurs envoient par défaut une page de nom default.htm ou encore
index.shtml …).
Si l’on souhaite être vu depuis l’Internet, il convient de demander un espace d’hébergement, en général
gratuit pour de « petits espaces » disque (20, 50 voire 100 à 200 Mo). L’hébergeur fournit alors :
§ Un identifiant : jacques Bresson
§ Un mot de passe FTP (File Transfert Protocol) : ************ (pour pouvoir écrire sur sa machine dans
un répertoire créé pour l’utilisateur à l’exclusion de tout autre)
§ Il indique le nom du serveur ftp qui recevra les pages : perso.libertysurf.fr
§ Il indique que les pages pourront être vues depuis l’adresse suivante : perso.libertysurf.fr/monrep et
que si aucun nom de page n’est spécifié c’est par exemple la page index.htm qui sera envoyée par
le serveur.
Attention, avant tout envoi, vérifier :
§

Que tous les fichiers ont étés enregistrés avec leurs dernières modifications.

§

Que les noms de pages vérifient les « 3 pas » (Cf. page 5), pas d’accents, pas d’espaces, pas de
capitales. Si ce n’est pas le cas, modifiez depuis la fenêtre « carte du site » (et non depuis l’explorateur
de Windows) le nom des fichiers (en effet Dreamweaver, modifie en conséquence le code Html figurant
dans les pages qui contiennent un appel à ces fichiers, liens, images par exemple)

§

Que les liens mis en place pointent correctement vers des fichiers existant (commande Fichier >
vérifier les liens > site entier).

Pour envoyer les pages composées, un logiciel FTP du type de FTP explorer (gratuit) suffit, mais
Dreamweaver comprend une application FTp qui permet cet envoi.
Utiliser la fenêtre site accessible depuis le lanceur :
Puis depuis cette fenêtre : site > définir les sites

De retour sur la fenêtre de site, cliquer
sur le bouton « connecter »
Pour provoquer une connexion et
démarrer le transfert des fichiers.

Monrep

Pour la mise à jour d’un site déjà transféré, la commande Affichage >
Sélectionner local plus récent permet de comparer la date de dernière modification des fichiers sur le
disque dur local et le serveur distant pour ne transférer que les fichiers mis à jour.

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 26/27

Table des matières

1

CRÉATION D'UNE PAGE OU D'UN NOUVEAU SITE ? ............................................................................................... 1
1.1
1.2

2

CRÉATION D'UNE PAGE HTML......................................................................................................................................1
DÉFINITION D'UN SITE LOCAL......................................................................................................................................3

COMPOSITION DE LA PAGE D’ACCUEIL..................................................................................................................... 4
2.1
UN TITRE ET UN ARRIÈRE -PLAN POUR LA PAGE INDEX.HTM ...............................................................................4
2.2
NOMS DE FICHIERS ET TITRES DES PAGES, QUELLES DIFFÉRENCES ?...................................................................5
2.2.1
Le nom de fichier de la page d'accueil............................................................................................................. 5
2.2.2
Et les noms de fichiers des autres pages........................................................................................................... 5
2.2.3
Les titres des pages............................................................................................................................................... 6
2.3
LA MISE EN PAGE DU CONTENU INFORMATIF ...........................................................................................................6
2.3.1
Insertion d'un tableau ......................................................................................................................................... 6
2.3.2
Insertion d'une image dans la cellule de gauche du tableau ...................................................................... 6
2.3.3
Saisie du texte dans la cellule de droite .......................................................................................................... 7
2.3.4
Visualiser de temps en temps la page réalisée dans un navigateur............................................................ 8

3

CRÉATION D’UNE NOUVELLE PAGE ET MISE EN PLACE DES HYPERLIENS.................................................10
3.1
A JOUTER UNE POLICE .................................................................................................................................................10
3.2
CRÉER UN STYLE DE PARAGRAPHE ...........................................................................................................................11
3.3
M ISE EN PLACE D’HYPERLIENS..................................................................................................................................12
3.3.1
Hyperlien menant à une page du même site...................................................................................................12
Mise en place de liens vers une adresse de site ou page sur Internet..................................................12
Mise en place de liens internes à une page...............................................................................................13
3.3.4
Visualiser la carte du site .................................................................................................................................14
3.3.5
La mise en place d’un lien vers une adresse électronique..........................................................................14
3.3.6
Création d’un hyperlien en direction d’un fichier Word, Excel ou pdf....................................................14
3.3.7
La création de zones réactives sur une image...............................................................................................15

4

REDÉFINITION DES STYLES DES HYPERLIENS ......................................................................................................17
4.1
4.2

5

CRÉATION D’UN STYLE INCORPORÉ DANS LA PAGE ..............................................................................................17
CRÉATION D’UNE FEUILLE DE STYLE EXTERNE ....................................................................................................18

LES ANIMATIONS..............................................................................................................................................................20
5.1
LES CALQUES ET LES SCÉNARIOS................................................................................................................................20
5.1.1
Insertion de calques dans une page................................................................................................................20
5.1.2
Insertion d’un scénario .....................................................................................................................................21
5.2
LES COMPORTEMENTS.................................................................................................................................................22
5.2.1
Du son à l’ouverture de la page.......................................................................................................................22
5.2.2
Du son au survol d’une image..........................................................................................................................23
5.3
INSERTION D’UNE APPLIQUETTE JAVA DANS UNE PAGE ......................................................................................23

6

LES PAGES DE CADRES...................................................................................................................................................24
6.1
6.2
6.3

7

CRÉATION D’UN JEU DE CADRES DANS UNE NOUVELLE PAGE .............................................................................24
IDENTIFICATION DES PAGES À AFFICHER DANS LES CADRES................................................................................25
M ISE EN PLACE DES LIENS ..........................................................................................................................................25

LA PUBLICATION DU SITE SUR UN SERVEUR LOCAL OU DISTANT ...............................................................26

Iufm de reims – Jacques bresson – Premiers pas avec Dreamweaver

page 27/27

Sponsor Documents

Or use your account on DocShare.tips

Hide

Forgot your password?

Or register your new account on DocShare.tips

Hide

Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in

Close