Premiers pas avec Dreamweaver

Transcription

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 platesformes 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.
Le langage HTML (HyperText Markup Language) permet de décrire un document à l'aide d'un certain
nombre de codes qui sont insérés dans le texte (on parle de "balises") qui sont interprétés par les
navigateurs (encore appelés navigateurs, ou butineurs par exemple : Internet Explorer, Mozilla FireFox,
Opera). Une collection de pages, stockées sur un disque dur et reliées entre elles par des liens
hypertextes constitue un site.
Lorsque l'on crée des pages Web il faut ordre et méthode…
Prenons un exemple : un document Word avec deux images intégrées ne constitue qu'un seul fichier,
mais une page Web ne contient que du texte qui "appelle" les images et les positionne dans la page…
Ainsi pour un texte avec deux images, il y a trois fichier : la page html et les deux fichiers images.
Ma_page.html
Img1.gif
Img2.gif
Page Html ne
contenant que
du texte et un
lien vers les
images qui sont
stockées
séparément.
Ma_page.doc
C'est pourquoi il est vivement souhaitable de créer un dossier spécifique (vide au départ) et qui
recevra toutes les pages créées et leurs images au cours de l'avancement du site. Cela permettra
de ne pas oublier un fichier (pages html ou images) lors d’un éventuel déplacement du site web généré.
Dreamweaver contient deux outils bien
distincts :
Le gestionnaire de site : ensemble
d'outils de gestion du site qui faciliteront sa
mise à jour (visualisation de la carte du
site, mise à jour des liens entre les pages
lorsque l'on renomme certaines d'entreelles, publication des pages etc). Une fois
défini le dossier de travail dans le
gestionnaire de site, celui-ci va surveiller
que tout les éléments du site (et
notamment les images) y sont bien
stockés.
Un éditeur de pages Html qui permet de créer
des pages Web en saisissant du texte, en
insérant des images. On travaille comme dans
un traitement de texte et le code Html est
généré automatiquement (on n'a pas à
apprendre le langage HT ML).
Iufm Champagne - Ardenne – Jacques Bresson – Utiliser Dreamweaver
page 1/24
1 Création d'un site
Pour travailler avec Dreamweaver, si l’on souhaite créer une “grappe de pages”, il est souhaitable,
comme on vient de le comprendre, 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.
Lancement du logiciel Démarrer > programmes > Dreamweaver ou plus simplement
depuis l'icône présente sur le bureau.
C'est alors soit le gestionnaire de site qui s'affiche, soit l'éditeur de page…
Quel outil voyez-vous lorsque vous lancez Dreaweaver ?
Si vous êtes sous le gestionnaire de
site le titre de la fenêtre le précise.
Si vous êtes sous l'éditeur, la barre de menu est
légèrement différente :
Création d'un
nouveau site
Dossier de travail où sont
stockés les fichiers du site
Ouvrir un site préexistant
Création d'un nouveau site ou
ouverture d'un site existant.
Pour créer un site local :
1. Dans Dreamweaver, ouvrir la boîte de dialogue Définition du site en procédant comme suit :
Depuis le gestionnaire de site : Site > Nouveau site (ou depuis l'éditeur de pages : 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.
Le nom donné ici est utile lorsque l'on génère
plusieurs sites sur un même ordinateur. Il
permet d'identifier facilement le site sur lequel
on souhaite travailler à l'ouverture de
Dreamweaver.
Saisir le chemin menant
au dossier d'accueil du
site.
L'option de création d'un fichier
cache pour le site permet de
faciliter la gestion des fichiers. Il
faut la cocher.
X
Les options de gestion des
liens peuvent être
ignorées.
3. Nommer le site Initiation 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).
page 2/24
5. 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. Nommer
cette page
index.htm
(pourquoi ce
nom de fichier ?
nous le verrons
ensuite…)
6. Si le dossier d'accueil du site 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.
Cliquer ici pour voir 's'afficher petit à petit la carte du site
Liste des fichiers présents dans le dossier d'accueil du site.
Depuis le gestionnaire de site, un double-clic sur un fichier permet d'ouvrir celui-ci dans une fenêtre de
l'éditeur et de le modifier.
page 3/24
2 L'écran de l'éditeur de pages
Voici l'écran de l'éditeur et ses palettes d'outils :
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)
Ce bouton permet également
d'ouvrir le gestionnaire de site
Composition de la page d’accueil sous l'éditeur de pages
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.
Il est
fréquent
de trouver
un logo en
haut et à
gauche.
page 4/24
2.1
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.1.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.1.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
(ici 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.
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.
Seules les images compressées, au
format GIF ou JPEG ou PNG,
peuvent être insérées dans des
pages Web..
Pour décrire le plus simplement possible le
chemin qui conduit de la page à l'image (donc le
plus court chemin), il faut veiller à choisir l'option
"relatif à : document" dans la boîte de dialogue.
page 5/24
Sur ce dernier point et sur les chemins décrivant les liens en direction des images voir le document
"Repères pages Web.doc" J. Bresson - Iufm de Reims.
2.1.3
Saisie du texte dans la cellule de droite
Insérer un saut de ligne
<Maj>+<Entrée> pour éviter l'espace
vertical après chaque paragraphe.
Spécifier la police
Choisir une taille. 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 du
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 tailles de police HTML sont notées de 1
à 7 accessibles également via le menu
Texte > Taille. La taille 2 offre l'aspect
visuel d'une police de corps 10 points à
l'écran et ceci dès lors que le navigateur qui
lit les pages soit réglé sur une taille
moyenne d'affichage des polices.. La taille
3 est un peu plus grosse et correspond au
corps affiché lorsque "par défaut" est
sélectionné.
Remarques :
Pour personnaliser l'affichage du texte, à la manière de ce qui se fait dans les traitements de texte, il
faudra utiliser les feuilles de style (voir infra)
Les espaces entre les paragraphes sont importants, on pourra judicieusement remplacer
certaines marques de paragraphes par des retours à la ligne (<Maj>+<Entrée>).
2.1.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 (ou touche F12).
2.1.5
Pour créer une nouvelle page :
Depuis la fenêtre document : Fichier > Nouveau
Depuis la fenêtre du site : Fichier > Nouveau Fichier
2.2
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.
Image ou couleur d'arrière-plan
page 6/24
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.
Pour définir une image d'arrière-plan pour la page :
Supprimer la couleur d'arrière-plan devenue inutile
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.
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.
2.3
2.3.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.
2.3.2
Et les noms de fichiers des autres pages et des images...
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 ni signes de ponctuation / pas de majuscules
2.3.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.
Sur ce point (noms de fichiers, titres des pages, voir le document "Repères pages Web.doc" Jacques
Bresson - Iufm de Reims.
page 7/24
2.4
Ajouter une police
Œil.gif
Grib_r.gif
Si vous ne disposez pas
d'une police dans la liste
déroulante de la fenêtre de
propriétés, ajoutez une police
(voir infra)
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.
page 8/24
3 Mise en place des hyperliens
3.1
Mise en place de liens vers une adresse de site ou page sur Internet
Le lien peut conduire à une autre page web du site local (fichier à choisir dans le dossier de travail)
Sélectiondu texte qui constituera le support du lien à savoir "quelques exemples", puis clic sur le dossier
jaune figurant à droite de la rubrique "lien" dans la fenêtre de propriétés.
Après sélection du fichier destination du lien, le nom du fichier vient
s'inscrire, inutile de le saisir ce qui est une source d'erreurs (problème
d'orthographe, majuscules au lieu de minuscules etc.)
Le texte qui permet le lien change de couleur et est souligné.
La zone sensible peut également être située sur une image
Ici l'image flech_g.gif a été insérée 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)
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”
Lien vers un site externe
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…) :
page 9/24
3.2
Création d’un hyperlien en direction d’un fichier Word, Excel ou pdf
Afin de permettre à tout utilisateur de pouvoir lire un fichier, il est préférable de l'enregistrer au 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, OpenOffice ou autre application. Lorsque le lien est activé, le navigateur provoque
l’ouverture d’Acrobat reader qui permet de lire le fichier rapatrié. L'imprimante virtuelle PdfCreator
(téléchargeable gratuitement sur le net permet de générer de tels fichiers.
Il peut être utile de compresser les fichiers afin qu'ils soient moins volumineux, ce qui accélèrera le temps
de téléchargement de l'utilisateur final.
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 sur votre espace d'hébergement en ligne.
3.3
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 par exemple le texte “Ecrivez-nous” sur la page d’accueil de votre site , 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 :”
Animail.gif
L’image animée de l’enveloppe étant suggestive, il est judicieux de placer le lien également sur celle-ci.
3.4
Mise en place de liens internes à une page
Exemple d'une page glossaire.htm contient une série de définitions rangées en ordre alphabétique. Il est
opportun d’accéder aux définitions via des hyperliens
figurant sur un sommaire.
ABCDEF
Comment faire ?
3.4.1
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
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.
G
___________
A~~ ~ ~~~
~ ~ ~ ~~ ~
B~~ ~ ~~~
~ ~ ~ ~~ ~
C~~ ~ ~~~
~ ~ ~ ~~ ~
D~~ ~ ~~~
~ ~ ~ ~~ ~
E~~ ~ ~~~
~ ~ ~ ~~ ~
Z~~ ~ ~~~
~ ~ ~ ~~ ~
Accueil
Lien permettant
le retour au
sommaire
Lien vers la
page index.htm
page 10/24
Pour mieux voir le positionnement
des ancres :
3.4.2
Mettre en place l'hyperlien pointant vers l'ancre
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 #
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 :
Cas particulier (et en fait assez courant dans le cas d'un glossaire)
page1.htm
Si des liens figurant sur plusieurs pages
permettent d'atteindre la même page de
glossaire, comment depuis un lien présent sur
cette page, revenir à la page précédemment
consultée ?
Le bouton "revenir à la page précédemment
consultée" doit donc conduire non pas
systématiquement à une page précise mais à la
dernière page consultée dans le navigateur.
Glossaire
Ancre1
Ancre 2
page2.htm
?
Ancre3
Il convient de choisir comme lien une instruction
javascript :
Javascript:history.go(-1)
Revenir
Cette commande indique au navigateur de revenir
à la dernière page consultée c'est à dire de revenir d'une page en arrière dans l'historique des pages
consultées (ceci ne fonctionne que si l'on utilise un navigateur Internet pour lire les pages de votre site).
page 11/24
3.5
La création de zones réactives sur une 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.
Exemple à partir d'une image " carteacademies.gif" insérée dans une page Web. On souhaite
accéder à différents sites académiques disciplinaires en cliquant sur les académies.
Il convient de cliquer sur la
carte de cliquer ensuite dans
la palette flottante de
propriétés sur le bouton
"carte"
Donner un nom à la carte
Mettre en place des
zones cliquables pour
quelques académies.
Pour une liste des sites
académiques, voir par
exemple : http://wwwpeda.acmartinique.fr/eps/siteps.
shtm
Dessinez le contour,
puis un double-clic
pour fermer le tracé
Secondaire = Texte
affiché au passage de la
souris.
Ouverture dans une nouvelle fenêtre
Tester quelques liens mis en place, dans le navigateur.
page 12/24
4 Mise en place d'une page de cadres
Objectif : disposer d'un menu à gauche qui permet de visualiser différentes pages dans la partie
informative (par exemple pour présenter différentes étapes ou phases d'un processus, différents points
de vue sur un débat, des photographies sous différents angles…)
4.1
Principe
En général, on utilise une page de cadres pour une présentation de type suivant :
Cadre "Bannière"
Titre du site ou titre courant
de la partie de site visitée,
en général avec un logo.
Cadre "Sommaire"
contenant des liens
affichant les pages
dans la partie
informative
Cadre "Principal"
Partie informative du site.
Cette organisation des cadres peut être modifiée, on peut ajouter d’autres cadres, modifier leur taille…
Attention :
4.2
Un cadre affiche le contenu d'une page html
Chaque cadre est identifié par un nom et spécifie la page html qu’il affiche par défaut.
Dans notre exemple on a donc quatre objets : page de cadres.
La page de cadres qui décrit les propriétés des différents cadres et leur positionnement relatif.
Elle ne contient donc pas les informations lues par l’utilisateur final,
Trois pages Html affichant les informations.
Ne pas confondre les cadres (encore appelés « frames ») et les claques (voir infra).
Comment procéder ?
Créer une nouvelle page
Créer 3 cadres (un cadre "Bannière", un cadre "Sommaire",
un cadre "Principal")
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
Ou encore (suivant les versions de Dreamweaver) Modifier >
Jeu de cadre > Fractionner le cadre vers le haut
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é.
page 13/24
Enregistrer le jeu de cadre (la page html qui les contient et les décrit) sous le nom :
cadre_rip.htm
Nommer les cadres et identifier les pages à afficher dans les
cadres
Remarques :
Pour voir les propriétés des cadres, activer la commande du
menu Fenêtre > Cadres et sélectionner un cadre dans cette
fenêtre, l’inspecteur de propriétés affiche les informations
relatives au cadre
Autre possibilité : pour modifier les propriétés du cadre « du
haut », appuyer sur <Alt> et cliquer dans le cadre supérieur
Remarque : pour voir les propriétés des cadres, activer la fenêtre de cadres et sélectionner un cadre
dans cette fenêtre, l’inspecteur de propriétés affiche les informations relatives au cadre
principal
On précise s l’on souhaite
ou non une bordure.
On donne un nom au cadre
On précise si les barres de
défilement doivent être
apparentes.
On choisit la page que le
cadre affichera par défaut
Enregistrer de nouveau le jeu de cadre
Dans la page html vierge du cadre
« bannière » saisir le titre
Le point d'insertion étant dans cette
page, enregistrer cette page
"Fichier > Enregistrer sous" le
nom « rip-banniere.htm »
Dans le cadre « sommaire », saisir
le texte des hyperliens qui
afficheront les pages dans le cadre
principal. Voir la copie d'écran cicontre
Enregistrer cette page sous le nom
« rip-sommaire.htm »
Dans les propriétés du cadre
principal, choisir d’afficher la page
par défaut « rip-accueil.htm » qui a
déjà été réalisée
Mettre en place les liens depuis les libellés du sommaire (affichage dans le cadre principal) :
Enregistrer le jeu de cadres et les modifications apportées dans les pages : Fichier >
Enregistrer tout
Visualiser les pages sous un navigateur.
Remarque : En cas de problème avec la largeur des bordures, un clic sur une bordure permet de
spécifier sa taille.
page 14/24
5 Animations
5.1
La création d’une image « retournée » dans la page index.htm
Dans la première cellule du tableau, l’idée est d’insérer deux images du logo de façon à ce que l'image
affichée change au survol de la souris.
Une commande du menu insertion permet d’éviter de paramétrer manuellement ce comportement.
Activer la commande : Insertion > Image retournée (ou "image survolée" suivant les
versions de Dreamweaver) ici "mini-iufm.gif" et "siege.gif"
Enregistrer le page modifiée, la tester dans un navigateur (Fichier aperçu dans le
navigateur ou touche <F12>)
Un comportement est attaché à un objet,
il associe un événement (un clic de
souris, un passage de la souris au
dessus de l’objet par exemple) et une
action. L’évènement déclenche l’action.
Remarque : On utilisera la fenêtre des
comportements de la même manière
pour provoquer l’exécution d’un son au
passage de la souris sur une image.
Un comportement est désormais défini pour cette image
(fenêtre comportements, pour voir
la fenêtre de comportements)
5.2
Mise en place d’animation dans les pages
De nombreuses images Gif animées sont disponibles sur Internet. 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).
Mais Dreamweaver permet d’animer des objets de la page html. Ces objets (textes ou images) doivent
être insérés dans des claques, chaque calque peut être visible ou invisible par défaut et cette propriété
peut être modifiée par un comportement qu'on lui associe. Un cadre peut également être déplacé dans la
page web grâce à un scénario.
5.2.1
Création de calques
On souhaite par exemple faire apparaître une
information contextuelle au passage de la
souris sur un bouton présent dans un textee
partie de texte…
page 15/24
On insère un calque qui contiendra l'information contextuelle.
ou bien
Le calque est vide au départ et la fenêtre des calques permet de voir (et modifier si besoin sson nom)
Renseigner le contenu du
calque (il contient ici une
image et du texte sur fond
grisé.
On modifiera sa propriété de
visibilité par défaut (pour qu'il
soit caché)
On souhaite que ce calque non visible par défaut, soit visible en passant le pointeur de souris au dessus
d'une puce du texte de la page. Il convient d'associer un comportement à cette puce
Un comportement permet d'associer une action (ici modification de propriété de calque) à un événement
(ici le survol du pointeur de la souris).
Sélectionner la puce puis : Fenêtre Comportements
Par défaut l'action associée à la modification de
visibilité du calque est "onMouseDown".
Si l'on souhaite que le calque apparaîsse au
survom de la souris, il conveint de modifier cette
action en : 'OnMouseOver'
Tester cette mise en place. Le calque apparaît au
survol de la souris sur le bouton en question, mais
ne disparaît pas ensuite. Il faut donc ajouter un
second comportement à ce bouton :
Evénement : "OnMouseOut"
Action : Masquer claque
page 16/24
5.2.2
déplacement de claques dans une page
Nous allons faire en sorte qu'un autocar se déplace de droite à gauche à l'ouverture d'une page
Dans l'espace ménagé sous le tableau, insérer un calque Attention, ce calque sera situé à droite de
la page
Insérer dans le calque l’image « autocar.gif » et redimensionner le calque si nécessaire pour l’ajuster
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
à la taille de l’image.
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 la page
5.2.3
Insertion d’un scénario
Pour déplacer l’autocar, il est nécessaire d’utiliser un 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 (ou via le menu fenêtre).
Sélectionner le calque de l’autocar, il est situé en haut 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.
page 17/24
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.
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 les modifications de la page et visualiser l’effet obtenu
dans le navigateur
Modification du scénario : il serait préférable que, à l'instar des
dessins animés, les roues partent avant l'autocar : déplacer les barres
pour les amener par exemple dans la position présentée ci-contre.
Visualiser l'effet obtenu dans le navigateur.
page 18/24
6 La gestion des styles sous-Dreamweaver
6.1
Créer un style de paragraphe
Exemple de création du style “item” Attributs : Police Comic sans ms, rouge, taille 12
Choix des propriétés du style
Choix des propriétés du style
Application du style à un paragraphe sélectionné
6.2
Redéfinition des styles des hyperliens
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.
page 19/24
6.2.1
Création d’un style incorporé dans la page
Définissons le style des hyperliens afin qu'ils apparaissent en vert gras et non soulignés
Depuis le lanceur : style > Editer >
Nouveau
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.
6.2.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 une page html quelconque, 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.
commun.css
page 20/24
Créer alors les styles puis
Enregistrer
Ouvrir les autres pages html du site en cours de
construction 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
commun.css
Remarque : De la même manière, il est possible de modifier d'autres balises, ainsi la balise body pour
préciser la couleur ou l'image d’arrière-plan etc.
Intérêt : Il suffira ensuite de modifier l'image d'arrière plan du style "body" dans la feuille de style
pour que toutes les pages liées à cette feuille changent d'aspect… Pratique n'est-ce pas ?
7 Le gestionnaire de site
7.1
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 :
7.2
Renommer un fichier sous le gestionnaire
Prenons un exemple: on souhaite renommer le fichier voyage.htm et lui donner le nom colloque.htm
Si on réalise cette opération sous l'explorateur de Windows, les liens qui pointaient depuis les autres
pages vers la page voyage.htm (par exemple celui figurant dans la page index.htm) seront inopérants.
page 21/24
Tenter de renommer cette page, mais depuis le gestionnaire de site de Dreamweaver :
Le gestionnaire vous propose de
mettre à jour les liens, il faut
accepter.
8 Le transfert des pages html (+ images et fichiers associés) vers un
site d’hébergement
Une simple recherche sur Internet permet de trouver des sites accueillant vos pages gratuitement (mots
clés : +site +hébergement +gratuit).
Le site vous accueillant (ex : perso.free.fr)
vous octroie un nom de login (d’utilisateur dirons-nous) (ex : machin)
un mot de passe indispensable pour y accéder en écriture (ex : **********)
et un dossier (ex : machin le même que votre nom de login le plus souvent)
L’hébergeur vous indique le nom que devra avoir votre page d’accueil en général : index.htm pour
que le serveur puisse la proposer automatiquement (sans qu’il soit nécessaire de la mentionner dans
l’adresse du navigateur pour un visiteur)
L’herbergeur vous indique que le site sera visible en saisissant une adresse précise (dans notre
exemple : http://machin.free.fr)
L’hébergeur vous indique enfin le nom du serveur FTP1 à contacter pour envoyer pages et fichiers
(ex : ftpperso.free.fr)
Pour envoyer les pages il est possible :
D’utiliser un simple navigateur :
Exemple d’adresse à saisir :
ftp://[email protected]
Dès lors que le site est contacté, votre mot de passe
vous est demandé et la fenêtre du navigateur montre le dossier qui vous est attribué qui est vide au
départ. Il suffit d’y faire glisser ou d’y copier les fichiers à transférer comme on le ferait entre deux
disques durs distincts d’une même machine.
D’utiliser un logiciel FTP spécialisé (qui peut être téléchargé gratuitement sur internet FileZilla ,
ftp_expert par exemple ou Wsn_ftp)
1
- FTP signifie File Transfert Protocol
page 22/24
D’utiliser votre gestionnaire de site Frontpage ou Dreamweaver
Pour Dreamweaver, il convient de renseigner la boîte de dialogue de définition du site…
…puis d’activer le bouton de
connexion de la fenêtre du
gestionnaire de site, dès lors l’écran
est divisé en deux fenêtres, à gauche
le répertoire d’hébergement distant et
à droite les fichiers à transférer par
« glisser-lâcher » ou en utilisant le
bouton « placer »
L'utilisateur fait glisser les fichiers du répertroire local (à droite) vers le site disatnt (à gauche).
Après quelques modifiactions de fichiers locaux, il est ensuite possible de mettre à jour les seuls fichiers
qui ont été modifiés et d'ajouter les nouveaux fichiers, la commande Site Synchoniser le fait
efficacement.
page 23/24
Table des matières
1
Création d'un site...............................................................................................................................2
2
L'écran de l'éditeur de pages ...........................................................................................................4
2.1
La mise en page du contenu informatif ........................................................................................5
2.1.1
Insertion d'un tableau ............................................................................................................5
2.1.2
Insertion d'une image dans la cellule de gauche du tableau ................................................5
2.1.3
Saisie du texte dans la cellule de droite................................................................................6
2.1.4
Visualiser de temps en temps la page réalisée dans un navigateur.....................................6
2.1.5
Pour créer une nouvelle page : ............................................................................................6
2.2
Un titre et un arrière-plan pour la page index.htm........................................................................6
2.3
Noms de fichiers et titres des pages, quelles différences ? ........................................................7
2.3.1
Le nom de fichier de la page d'accueil ..................................................................................7
2.3.2
Et les noms de fichiers des autres pages et des images......................................................7
2.3.3
Les titres des pages ..............................................................................................................7
2.4
Ajouter une police .........................................................................................................................8
3
Mise en place des hyperliens ...........................................................................................................9
3.1
Mise en place de liens vers une adresse de site ou page sur Internet ........................................9
3.2
Création d’un hyperlien en direction d’un fichier Word, Excel ou pdf.........................................10
3.3
La mise en place d’un lien vers une adresse électronique ........................................................10
3.4
Mise en place de liens internes à une page ...............................................................................10
3.4.1
Insérer des “ancres nommées” ...........................................................................................10
3.4.2
Mettre en place l'hyperlien pointant vers l'ancre .................................................................11
3.5
La création de zones réactives sur une image...........................................................................12
4
Mise en place d'une page de cadres..............................................................................................13
4.1
4.2
5
Principe.......................................................................................................................................13
Comment procéder ?..................................................................................................................13
Animations .......................................................................................................................................15
5.1
La création d’une image « retournée » dans la page index.htm ................................................15
5.2
Mise en place d’animation dans les pages.................................................................................15
5.2.1
Création de calques ............................................................................................................15
5.2.2
déplacement de claques dans une page ............................................................................17
5.2.3
Insertion d’un scénario ........................................................................................................17
6
La gestion des styles sous-Dreamweaver ....................................................................................19
6.1
Créer un style de paragraphe.....................................................................................................19
6.2
Redéfinition des styles des hyperliens .......................................................................................19
6.2.1
Création d’un style incorporé dans la page.........................................................................20
6.2.2
Création d’une feuille de style externe ................................................................................20
7
Le gestionnaire de site ....................................................................................................................21
7.1
7.2
8
Visualiser la carte du site............................................................................................................21
Renommer un fichier sous le gestionnaire .................................................................................21
Le transfert des pages html vers un site d’hébergement...................................................................22
page 24/24

Premiers pas avec Dreamweaver

Transcription

Documents pareils

Programme Formation Dreamweaver Perfectionnement

DREAMWEAVER Perfectionnement

DreamWeaver Dynamiser un site

Programme de formation DreamWeaver perfectionnement

Utiliser Dreamweaver pour produire un iste web en économie gestion

Créer son site Web avec DREAMWEAVER

PROGRAMME DE FORMATION Création de sites internet

27270018 - Bonnes pratiques et objets métiers

Dreamweaver Perfectionnement