Abrégé du logiciel Dreamweaver 4 - 1S2

Transcription

Manuel de l’élève
INF-5065
INTRODUCTION À LA CRÉATION DE SITES WEB
Abrégé du logiciel Dreamweaver 4
Regroupement 9
CSDM
Juin 2002
DREAMWEAVER 4
Table des matières
01
Introduction ............................................................................................................................................. 4
01.01
01.02
01.03
01.04
02
La création d’une page d’accueil personnelle......................................................................................... 7
02.01
02.02
03
03.04
Table des matières
Le document Utilisation de Dreamweaver.............................................................................. 10
L’utilisation de l’aide de Dreamweaver ................................................................................... 10
Le menu Aide de Dreamweaver ..............................................................................................11
Le sommaire............................................................................................................................11
L’index .................................................................................................................................... 12
La recherche .......................................................................................................................... 12
Les autres moyens d’accéder à l’aide de Dreamweaver........................................................ 13
L’accès à l’aide à partir des fenêtres de Dreamweaver.......................................................... 13
L’accès à l’aide à partir du pointeur ........................................................................................ 14
L’accès à l’aide à partir des boîtes de dialogue...................................................................... 14
L’interface de Dreamweaver ................................................................................................................. 15
04.01
04.02
05
L’objectif du premier exercice ................................................................................................... 7
Présentation de la page personnelle d’Eva Laudée ................................................................. 7
L’objectif du premier exercice ................................................................................................... 7
La planification de la page........................................................................................................ 8
Le texte de présentation ........................................................................................................... 8
L’image ..................................................................................................................................... 8
La mise en forme...................................................................................................................... 9
L’acquisition d’une adresse de courriel .................................................................................... 9
La documentation de Dreamweaver ..................................................................................................... 10
03.01
03.02
03.03
04
L’objectif du cours..................................................................................................................... 4
La méthodologie et l’évaluation ................................................................................................ 4
Qu’est-ce qu’un site Web? ....................................................................................................... 4
Pourquoi faire un site Web? ..................................................................................................... 5
Le HTML................................................................................................................................... 6
Exploration des composantes du logiciel (première partie).................................................... 15
Exploration des éléments de base de Dreamweaver ............................................................. 15
La barre d’outils ...................................................................................................................... 15
Le panneau Objet ................................................................................................................... 15
L’inspecteur de propriétés ...................................................................................................... 15
Exploration des composantes du logiciel (deuxième partie) .................................................. 17
Les panneaux ......................................................................................................................... 17
Les étapes préliminaires ....................................................................................................................... 18
05.01
05.02
05.03
05.04
La création du site local.......................................................................................................... 18
La création du dossier du site local ........................................................................................ 18
La création de la page d’accueil ............................................................................................. 18
Le nom du document.............................................................................................................. 19
Remarque au sujet des caractères spéciaux ......................................................................... 19
La définition du site ................................................................................................................ 19
La fenêtre Site ........................................................................................................................ 20
page 2
DREAMWEAVER 4
06
L’édition de la page d’accueil ................................................................................................................ 21
06.01
06.02
06.03
06.04
06.05
07
L’édition de la deuxième page .............................................................................................................. 28
07.01
07.02
07.03
07.04
07.05
08
La création de la deuxième page et l’insertion d’un lien......................................................... 28
La création de la deuxième page ........................................................................................... 28
L’insertion d’un lien ................................................................................................................. 28
L’aperçu dans un navigateur .................................................................................................. 30
Pour visualiser une page Web à partir d’un navigateur.......................................................... 30
La publication ......................................................................................................................... 30
La connexion .......................................................................................................................... 31
Procédure à suivre pour configurer votre site ........................................................................ 31
Enregistrer les fichiers sur le site distant ................................................................................ 32
Placer un fichier...................................................................................................................... 33
Le projet ................................................................................................................................................ 34
08.01
08.02
08.03
08.04
08.05
08.06
Table des matières
Les tableaux et les cellules de mise en forme........................................................................ 21
Le concept de mise en forme ................................................................................................. 21
La création d’une cellule de mise en forme ............................................................................ 21
Les images ............................................................................................................................. 22
L’insertion d’une image........................................................................................................... 22
Le texte................................................................................................................................... 23
Les propriétés de la page ....................................................................................................... 24
Les liens ................................................................................................................................. 26
L’insertion d’un courriel........................................................................................................... 26
L’insertion d’un lien de courriel dans un texte ........................................................................ 27
08.07
08.08
08.09
08.10
08.11
08.12
Les objectifs du projet ............................................................................................................ 34
La préparation et la méthode de travail .................................................................................. 34
L’élaboration du projet et de son contenu .............................................................................. 35
La préparation des médias ..................................................................................................... 35
L’arborescence ....................................................................................................................... 36
La planification de la mise en forme ....................................................................................... 37
La présentation du projet par écrit.......................................................................................... 37
Les éléments à intégrer dans la deuxième page.................................................................... 38
Les éléments optionnels......................................................................................................... 38
La création et le regroupement des actifs .............................................................................. 39
L’image survolée .................................................................................................................... 39
Les cadres .............................................................................................................................. 41
Le jeu de cadres ..................................................................................................................... 41
Les liens et les cibles ............................................................................................................. 43
Les tableaux ........................................................................................................................... 44
Annexe : Inscription à cyberquebec.com .............................................................................................. 47
page 3
DREAMWEAVER 4
01
Introduction
01.01 L’objectif du cours
Ce cours vise à vous initier à la création de sites Web. Vous aurez donc à créer vous-même
un site contenant du texte, des images, des dessins vectoriels ou des photos matricielles
(bitmap en anglais), voire même du son ou de la vidéo numérique. Pour ce faire, vous
aurez recours au logiciel le plus utilisé chez les professionnels : Dreamweaver, version 4,
de Macromedia.
Le but du cours n’est pas de connaître à fond le logiciel, ce qui nécessiterait des centaines
d’heures d’études et d’exercices, le but est de vous donner les rudiments de base de la
création de sites Web et de vous rendre autonome dans l’utilisation du logiciel par le biais
de son aide en ligne.
La méthodologie et l’évaluation
La méthodologie retenue pour ce cours est connue sous le nom de pédagogie par projet.
Ce qui signifie que les apprentissages que vous aurez à faire dans Dreaweaver sont ceux
qui sont reliés à votre projet de site. Il n’y a donc pas de séries d’exercices obligatoires et
il n’y a pas d’examen.
Après une initiation à la création de sites Web, vous aurez à présenter par écrit un projet de
site à votre enseignant. Celui-ci évaluera si votre idée est trop ambitieuse (ou pas assez).
Il peut aussi vous guider dans l’élaboration de votre projet, que ce soit au niveau de l’idée,
du contenu à y mettre, du design, et ce, afin de vous éviter de vous lancer dans un projet
qui se révélera trop complexe dans le cadre de ce cours qui ne dispose que de 50 heures
(2 unités).
Vous aurez atteint les objectifs du cours lorsque vous aurez réalisé votre site et que votre
enseignant l’aura accepté. Il pourra alors le télécharger sur le serveur Web de la CSDM,
afin qu’il soit en ligne et visible de n’importe quel ordinateur branché sur Internet.
Introduction
01.02 Qu’est-ce qu’un site Web?
Depuis quelques années déjà, les lettres WWW se trouvent un peu partout. L’omniprésence
des adresses Internet, ou URL (Universal Remote Locator) nous fait presque oublier la
véritable signification de ces symboles.
Une adresse Internet, c’est essentiellement un chemin d’accès qui nous mène vers des
fichiers numériques. Ces fichiers sont accessibles à partir du réseau que l’on appelle le
World Wide Web, ou simplement «la toile». Sa structure est totalement décentralisée,
c’est-à-dire que plusieurs trajets sont possibles à partir d’un point donné pour se rendre à
page 4
DREAMWEAVER 4
un autre point. On appelle cela un réseau distribué.
Ces points, ce sont des ordinateurs qui sont branchés au réseau. Il y a l’ordinateur client,
qui demande à voir ou à recevoir les fichiers, puis il y a l’ordinateur hôte, celui sur lequel
les informations voulues se trouvent. On l’appelle le serveur Web. On peut transiter par
plusieurs serveurs avant d’atteindre le serveur désiré.
Pour accéder aux données, les navigateurs Internet doivent analyser ces adresses, la
plupart du temps selon le protocole HTTP (HyperText Transfer Protocol). Prenons par
exemple l’adresse de la Commission scolaire de Montréal : http://www.csdm.qc.ca.
Premièrement, l’URL identifie le réseau (habituellement www. qui est le plus vaste),
ensuite le serveur comme tel (.csdm), puis le nom de domaine (.qc.ca) qui désigne le type
ou la nationalité du serveur.
Il est ainsi possible d’avoir accès à pratiquement tous les serveurs Web branchés sur le
réseau Internet et à leur contenu. Au début de l’an 2000,
c’est plus de 350 millions de
pages Web que l’on trouve sur le réseau, et la croissance est exponentielle!
01.03 Pourquoi faire un site Web?
Cela nous amènes à nous demander pourquoi en rajouter? Il existe certainement plusieurs
millions de pages Web laissées à l’abandon. Cela complique les recherches, ainsi que
l’accès à des sujets, les pages trouvées étant parfois trop désuètes pour être pertinentes
à nos besoins.
Il existe aussi des pages qui, sans être mises à jour, reste très intéressantes et agréables à
consulter. Tout dépend du sujet choisi et de son traitement, un peu comme pour n’importe
quel travail.
Introduction
En concevant un site Web, il est important de réfléchir à la pertinence du projet ainsi
qu’à la durée de vie du sujet. N’oubliez pas que ce site sera accessible par la totalité de
la communauté Internet mondiale (s’ils trouvent votre page!). Bien évidemment, en tant
qu’auteur, on a la possibilité de publier n’importe quoi. C’est pourquoi il est important de
respecter une éthique de respect où les propos haineux, le plagiat, la propagation de
contenu diffamatoire, etc., ne sont pas les bienvenus.
Un site Web devrait plutôt viser à être agréable, dans l’optique d’informer le visiteur de
son contenu, à l’intéresser à aller plus loin dans le document, puis à l’intriguer et le divertir.
L’objectif est de le faire revenir! Toutes les méthodes sont bonnes… et malgré le nombre
de pages qui existe déjà, il est encore possible d’innover! Une fois les connaissances
acquises, l’imagination est votre seule limite (ainsi que le poids de vos fichiers!).
page 5
DREAMWEAVER 4
01.04 Le HTML
Le HTML (HyperText Makup Langage) est un langage interprété (non-compilé), c’est-àdire qu’il est lu en continu par un autre logiciel, votre navigateur en l’occurrence.
Ce langage est constitué de balises et d’ancrages (markup) permettant au navigateur
de comprendre quoi mettre dans la page qu’il affiche ainsi que l’endroit où les éléments
doivent être affichés.
L’hypertexte (Hypertext) est une méthode de présentation de l’information adaptée aux
documents informatiques, où le lecteur peut agir, en cliquant par exemple, sur certains
mots du texte pour déclencher l’affichage d’informations supplémentaires relatives au mot
sélectionné.
La relation entre le mot sélectionné et l’information supplémentaire s’appelle un lien. Les
liens fonctionnent d’un ordinateur hôte à un autre par le réseau grâce au protocole de
communication HTTP (Hypertext Transfer Protocol).
En l’an 2001, c’est la version HTML 4.01 qui à cours. Mais bientôt, on verra apparaître un
nouveau langage : le XHTML 1.1 (et suivant) qui sera sans doute le prochain standard du
Web.
Introduction
Le World Wide Web Consortium est l’organisme qui établi les normes de ces langages
(http ://www.w3.org/).
page 6
La création d’une page d’accueil personnelle DREAMWEAVER 4
02
La création d’une page d’accueil personnelle
02.01 L’objectif du premier exercice
Présentation de la page personnelle d’Eva Laudée
À l’aide de votre navigateur, visualisez la page d’accueil d’Eva Laudée. Seulement les
deux premières pages nous intéresse pour l’instant.
Votre professeur vous indiquera comment trouver le site d’Eva (www.csdm.qc.ca/fgainf/evalaudee).
Ces deux premières pages sont un exemple de ce que vous devrez faire comme premier
exercice. On trouve dans ces deux pages les éléments de base d’une page Web :
—
Du texte;
—
Une image;
—
Une mise en forme (image à droite, titre en gras, etc.);
—
Des couleurs (couleur du fond et couleur du texte);
—
Une adresse de courriel;
—
Un lien vers une autre page.
L’objectif du premier exercice
L’objectif du premier exercice est donc de créer votre propre page d’accueil personnelle,
ainsi qu’une page supplémentaire, tel qu’illustré dans les deux premières pages du site
d’Eva. Dans ces pages, vous aurez la possibilité de vous présenter, de mettre une photo
de vous et d’y associer votre adresse de courriel.
Votre page personnelle devra contenir les éléments suivants :
1.
Un texte de présentation;
2.
Une image vous représentant;
3.
Un travail de mise en forme des couleurs du texte;
4.
Votre adresse de courriel active;
5.
Un lien vers une deuxième page, où vous ferez une présentation de votre projet
lorsqu’il sera défini.
page 7
02.02 La planification de la page
Avant de commencer, il est important d’accorder une attention particulière à la planification
de la page. Dans un logiciel d’intégration comme Dreamweaver, on ne peut pas créer les
éléments nécessaires à l’élaboration d’un site, et la plupart du travail de création se fait à
l’extérieur de Dreamweaver. C’est pourquoi il est essentiel de bien se préparer avant de
démarrer le logiciel.
Nous parlerons des méthodes de travail un peu plus loin dans le processus, au moment où
nous aurons à planifier le site dans son ensemble.
Voir la section 08.01 du présent document (Les objectifs du projet).
Voici tout de même une approche de planification simplifiée pour votre première page :
Le texte de présentation
Eh oui. Il faut écrire. Idéalement dans un logiciel de traitement de texte qui pourrait nous
aider à ne pas faire de fautes!
Inutile de faire de la mise en page maintenant. C’est un des aspects que Dreamweaver
prend en charge car le HTML est très capricieux. Nous allons copier ce texte plus tard dans
notre page. Vous pourrez le retravailler dans Dreamweaver si nécessaire.
L’image
Il nous faut aussi une image. Le format devrait être GIF (Graphic Interchange Format),
JPEG (Joint Photographic Experts Group) ou bien PNG (Portable Network Graphics
Format).
Pour plus d’information sur les formats d’images dans Dreamweaver, veuillez consulter le
document Utilisation de Dreamweaver, section Insertion d’images > Images - Présentation
(p.281).
Voir la section 03.01 du présent document (Le document Utilisation de Dreamweaver) pour
l’utilisation de l’aide.
La taille importe peu, mais pour cet exercice, votre image devrait être inférieure à 500
pixels par 300 pixels, à une résolution de 72 points par pouce. Aussi, surveillez le poids
de votre image. Au-delà de 100 Ko (kilo-octets) par exemple, c’est lourd, donc plus long à
télécharger pour les connexion de modems traditionnels.
On peut utiliser n’importe quel logiciel de traitement d’image, tant que ce dernier peut
faire une sauvegarde de l’image selon la compression voulue (GIF, JPEG ou PNG). Des
logiciels comme Photoshop, Photoshop Element, Image Ready, Graphic Converter ou
autre, peuvent très bien faire l’affaire.
Une fois terminée, vous placerez cette image dans le dossier image de votre site local.
page 8
Voir la section 04 du présent document (L’interface de Dreamweaver).
La mise en forme
Prévoir la mise en forme est un exercice simple, qui permet de gagner du temps. Dans
votre premier exercice, vous aurez à créer une grille dans laquelle vous devrez intégrer
votre image et vos textes. Il s’agit de visualiser cette grille en plaçant les éléments de la
page (image, texte, courriel, etc.) selon une disposition qui vous plaît. Vous pouvez faire
des croquis, des dessins ou collages, etc. C’est à vous de déterminer la méthode qui vous
convient.
C’est un petit exercice qui peut s’avérer anodin, mais pour la planification d’un site plus
complet, cela devient essentiel.
Premier croquis de la page personnelle d’Eva.
Elle prévoit une image et de courts textes qu’elle
n’a qu’à insérer au moment de l’assemblage
dans Dreamweaver. Elle sait même où elle
devra insérer son courriel!
L’acquisition d’une adresse de courriel
Si vous avez déjà une adresse de courriel, vous êtes prêt! Sinon voilà une belle occasion
de vous en procurer une. C’est très simple. Il existe sur la toile des fournisseurs de courriel
gratuit tel que hotmail.com, entre autres. Suivez les consignes sur le site pour créer votre
compte courriel. Après cela, nous pourrons démarrer Dreamweaver pour se familiariser
avec l’interface.
page 9
DREAMWEAVER 4
03
La documentation de Dreamweaver
03.01 Le document Utilisation de Dreamweaver
Le document Utilisation de Dreamweaver est l’ouvrage de référence du logiciel. Il constitue
une ressource inépuisable d’informations et de conseils. Il pourra répondre pratiquement
à toutes vos questions, parce qu’il couvre tous les aspects de production d’un site Web
avec Dreamweaver.
Ce document est écrit pour la version Macintosh et pour la version Windows (PC), mais les
images de captures d’écran ont été prises sur la version Windows du logiciel. Les versions
Mac et Windows sont pratiquement identiques. Ils diffèrent seulement aux niveaux de
l’esthétique et de quelques raccourcis clavier.
Votre enseignant dispose de cet ouvrage, et il peut le mettre à votre disposition pour
consultation sur place. Il s’agit d’un volume de 622 pages. C’est en quelque sorte le
dictionnaire encyclopédique de Dreamweaver. Généralement, on le consulte seulement.
On ne le lit pas de la première à la dernière page!
Bien sûr, la version HTML de ce document est accessible à partir de Dreamweaver. Il s’agit
de l’aide en ligne du logiciel et conserve le même titre : Utilisation de Dreamweaver.
La version HTML (en ligne) et la version imprimée offrent le même contenu, mais il est
préférable d’utiliser l’aide en ligne, afin de pouvoir faire des recherches et pour bénéficier
de l’efficacité de l’hypertexte. Étant de format HTML, ce fichier d’aide sera donc lu par un
navigateur Web, comme Netscape ou Explorer.
03.02 L’utilisation de l’aide de Dreamweaver
Il est important de bien comprendre le fonctionnement de l’aide, car vous y serez
constamment renvoyé tout au long de cet abrégé. Vous découvrirez aussi qu’avec
l’expérience, il vous sera de plus en plus facile de trouver rapidement l’information dont
vous avez besoin.
Nous accédons à cet aide en ligne directement à partir de Dreamweaver.
Il y a un raccourci clavier pour accéder au
document Utilisation de Dreamweaver, il est
affiché dans le menu déroulant (touche F1). Ainsi,
en appuyant sur la touche F1 du clavier, l’aide
s’ouvre automatiquement. Il est recommandé
de mémoriser les raccourcis. Ils sont toujours
indiqués dans les menus déroulant, s’il y a lieu.
1.
Si ce n’est déjà fait, démarrez Dreamweaver. L’application devrait normalement se
trouver à cet endroit : Disque dur / Applications / Macromedia Dreamweaver 4 /
Dreamweaver 4
2.
Double-cliquez sur l’application. C’est parti!
3.
Dans Dreamweaver, cliquez sur le menu Aide, à droite dans la barre des menus;
4.
Ensuite, sélectionnez le document Utilisation de Dreamweaver dans le menu
page 1 0
DREAMWEAVER 4
déroulant. Ceci aura pour effet de faire démarrer automatiquement le navigateur Web
(Netscape ou Explorer) qui affichera la page d’accueil du document d’aide en ligne.
03.03 Le menu Aide de Dreamweaver
Le menu Aide de Dreamweaver est votre principal allié. C’est un cadre HTML qui se trouve
dans la partie gauche de la fenêtre de votre navigateur. Il offre trois modes de navigations
dans l’utilisation de Dreamweaver :
1.
Le sommaire (mode de base);
2.
L’index (mode par ordre alphabétique);
3.
La recherche (mode avancé).
Le sommaire
Le sommaire vous offre le contenu de l’aide par section. C’est dans ce mode que nous
allons vous référer à l’aide dans cet abrégé.
Chaque section contient plusieurs rubriques. En cliquant sur un titre de section dans le
sommaire (en gras), les titres de rubriques apparaîtrons juste en dessous, légèrement en
retrait, ou en caractères maigres pour les sous-rubriques. C’est seulement lorsque que l’on
clique sur la rubrique désirée que l’aide affiche les explications dans la partie droite de la
page (le cadre de droite).
L’aide est construite de manière à n’afficher que le contenu d’une rubrique à la fois, et
jamais une section au complet.
Tout au long de cet abrégé, nous ferons souvent référence à ce document en utilisant la
convention suivante (où le numéro de page réfère au document imprimé) :
Sommaire > Section > Rubrique > Sous-rubrique (page #)
Par exemple, voici la procédure à suivre pour accéder à la section Planification et
configuration de votre site > A propos de la planification et de la création du site >
Organisation de la structure du site.
Vous n’avez pas à lire cette page de l’aide comme tel. Ce n’est qu’un exemple :
1.
Accédez à l’aide en ligne en sélectionnant Utilisation de Dreamweaver dans le menu
Aide du logiciel (ou appuyez sur la touche F1);
2.
Dans la fenêtre du navigateur Web, choisissez le mode Sommaire dans le cadre de
gauche;
3.
Trouvez et cliquez sur la section Planification et configuration de votre site (en
gras);
page 11
DREAMWEAVER 4
4.
Trouvez À propos de la planification et de la création du site, sans cliquer (caractères
gras, en retrait);
5.
Puis, cliquez sur Organisation de la structure du site (caractères maigres, en
retrait).
Dans chaque page, les flèches (ßà) permettent de passer dans l’ordre normal du texte
à la rubrique précédente ou à la rubrique suivante. Aussi, comme pour la navigation sur
Internet, il est possible de revenir sur les pages visitées en cliquant sur les boutons Page
précédente et Page suivante de votre navigateur, et ce sans tenir compte de l’ordre du
texte.
Notez également l’utilisation, à l’intérieur de la plupart des rubriques, de liens hypertextes
conduisant directement à d’autres rubriques connexes.
L’index
L’index vous permet de faire des recherches structurées autour de mots-clés, classés
par ordre alphabétique. Ce mode correspond à l’index de tout bon ouvrage de référence,
comme dans un livre, où il se situe à la fin.
C’est un mode très pratique pour chercher rapidement de l’information à propos d’un
élément ou d’un aspect du logiciel dont on connaît le nom. Il suffit de cliquer sur une lettre
et l’aide affiche tous les mots-clés commençant par cette lettre, et lorsque pertinent, il
affiche aussi, légèrement en retrait sous le mot-clé, la liste des éléments qui réfère à ce
mot-clé. Tous les mots-clés et leurs éléments associés sont cliquables et renvoient à une
rubrique.
Précisons que ce mode de recherche s’adresse plus particulièrement aux utilisateurs
intermédiaires du logiciel, parce qu’il suppose une certaine connaissance des concepts
inhérents au logiciel.
La recherche
Le mode recherche est un moteur de recherche avancé pour la consultation du document
Utilisation de Dreamweaver. Il est utile aux initiés pour trouver une information précise et
déjà bien cernée. Ce n’est pas une bonne manière d’aborder un thème plutôt général.
On y inscrit les mots clés en les séparant par le signe +, et on clique sur le bouton Afficher
les rubriques. L’aide affiche alors dans le cadre de gauche tous les titres des rubriques
qui contiennent ces mots. On sélectionne alors la rubrique que l’on croit pertinente à notre
recherche et on clique sur le bouton Afficher pour qu’elle apparaisse dans le cadre de
droite.
page 1 2
L’accès à l’aide à partir des fenêtres de Dreamweaver
L’icône (?) se trouve dans le coin supérieur droit de plusieurs fenêtres de Dreamweaver. En
cliquant sur cet icône, sur une fenêtre donnée, l’aide en ligne démarre votre navigateur (si
ce n’est déjà fait), et affiche automatiquement la rubrique concernant le titre de la fenêtre.
Remarquez que certaines fenêtres peuvent changer de contenu, et de titre, selon leur
fonction. C’est le cas notamment de l’inspecteur de propriétés, que nous verrons au
chapitre suivant.
Attention aussi aux fenêtres contenant les panneaux de Dreamweaver qui peuvent
changer de nom selon le panneau sélectionné. L’icône (?) conduit toujours l’aide en ligne
à afficher la rubrique concernant le titre qui figure dans l’en-tête de la fenêtre.
DREAMWEAVER 4
03.04 Les autres moyens d’accéder à l’aide de Dreamweaver
page 1 3
En plaçant le pointeur sur un bouton pendant une seconde, la fonction du bouton (ainsi que
son raccourci, s’il y a lieu), sera inscrite dans une info-bulle de couleur jaune. C’est une
façon très simple de connaître ou de se remémorer l’usage d’un bouton.
L’accès à l’aide à partir des boîtes de dialogue
Lorsque vous deviendrez plus aventureux, vous remarquerez que certaines actions vont
faire apparaître des boîtes de dialogue (ou d’alerte), où vous aurez généralement le choix
entre l’option OK ou l’option Annuler. Avant d’effectuer un choix, lisez bien le contenu de
ces fenêtres car elles renferment beaucoup d’informations utiles.
D’autre part, certaines de ces boîtes contiennent parfois un bouton Aide, qui vous mènera
directement à la rubrique correspondante dans l’aide lorsque cliqué. N’hésitez pas à aller
y jeter un coup d’oeil si vous en sentez le besoin. Cela n’interrompra aucunement votre
travail sur votre document. Rappelez-vous que c’est votre navigateur qui affiche l’aide, et
non Dreamweaver.
DREAMWEAVER 4
L’accès à l’aide à partir du pointeur
page 1 4
DREAMWEAVER 4
04
L’interface de Dreamweaver
04.01 Exploration des composantes du logiciel (première partie)
Exploration des éléments de base de Dreamweaver
Pour nous initier au logiciel, nous allons commencer par en explorer les éléments de base
nous permettant d’accomplir le premier exercice. Veuillez lire les références à l’aide pour
une description complète.
Voir la section Sommaire > Les bases de Dreamweaver > À propos de l’espace de travail
de Dreamweaver (p.72).
La barre d’outils
La barre d’outils de la fenêtre du document comporte les éléments d’affichage de la fenêtre
du document.
Voir la section Sommaire > Les bases de Dreamweaver > À propos des différents modes
de Dreamweaver > Utilisation de la barre d’outils (p.78).
Le panneau Objet
Le panneau objet contient les boutons nécessaires pour insérer différents éléments dans
une page dont les images et les liens de courriel. Nous utiliserons essentiellement les
objets de la catégorie Commun.
de Dreamweaver > Panneau Objets (p.80).
L’inspecteur de propriétés
L’inspecteur de propriétés est très utile. Vous remarquerez, que cette fenêtre est
contextuelle, c’est-à-dire que le contenu change selon les éléments qui sont sélectionnés
dans votre page.
page 1 5
DREAMWEAVER 4
de Dreamweaver > L’inspecteur de propriétés (p.82).
À chaque fois que vous cliquez sur le symbole d’aide (?) dans cette fenêtre, vous serez
amené à la page concernant la nature de la sélection que l’inspecteur affiche (soit
l’inspecteur de texte, d’image ou de tableau, etc.).
N’oubliez pas d’abaisser la portion Option de cette fenêtre en cliquant sur le petit triangle
dans le coin inférieur droit de la fenêtre. Cette section referme les options des éléments,
s’il y a lieu. Il n’y parfois aucunes options.
Nous n’utiliserons pas le Quick Tag Editor de cette fenêtre.
C’est à partir de cette fenêtre que la majorité des manipulations sur le contenu de votre
page se fera.
page 1 6
DREAMWEAVER 4
04.02 Exploration des composantes du logiciel (deuxième partie)
Les panneaux
Les fenêtres à onglet contiennent des panneaux. Ces fenêtre changent en fonction des
panneaux qui y sont sélectionnés.
Voir la section Les bases de Dreamweaver > À propos des différents modes de
Dreamweaver > Panneaux flottants ancrables (p.83).
Une icône d’aide (?) dans chaque panneau vous mènera directement à la page du
document Utilisation de Dreamweaver concernant ce panneau.
On y trouve, entre autres, les panneaux suivants :
—
Les actifs (la liste des éléments qui composent votre site);
—
L’historique (la liste chronologique des actions posées sur un document);
—
Les cadres (le gestionnaire des cadres d’une page).
Les autres, c’est-à-dire les calques, les références, les comportements, les styles CSS, les
styles HTML et le scénario, réfèrent à des fonctions plus avancées de Dreamweaver que
nous n’aborderons pas dans cet abrégé.
Il y a souvent plusieurs manières d’ouvrir ou d’accéder à une fenêtre du logiciel. Toutes les
fenêtres et les panneaux sont accessibles à partir du menu Fenêtre de la barre de menu.
Aussi, les raccourcis, lorsqu’ils sont disponibles, sont un moyen pratique et rapide
d’accéder aux fenêtres les plus couramment utilisées.
Voir la section Raccourcis clavier > Ouverture et fermeture des panneaux (p.579).
Le menu contextuel peut être une bonne alternative d’accès au éléments, mais il s’adresse
aux initiés.
Dreamweaver > Menus contextuels (p.79).
Nous aborderons le reste des éléments de Dreamweaver au fur et à mesure de
l’apprentissage.
page 1 7
DREAMWEAVER 4
05
Les étapes préliminaires
05.01 La création du site local
Nous allons maintenant procéder à la création de votre site local. L’organisation de ce
dossier et des documents qu’il contiendra est très importante, car tout votre site en dépend.
En effet, les liens créés entre chacune des pages, ainsi qu’avec les images, correspondent
à des chemins d’accès hiérarchisés ou des adresses.
Le HTML, et par extension Dreamweaver, utilisent ces chemins d’accès pour accéder
aux éléments d’une page et pour créer des liens hypertextes. Les images insérées dans
une page sont en fait liées à cette page par le chemin d’accès, et le HTML ne fait que les
«appeler» pour qu’elles s’affichent.
C’est pourquoi, si vous devez changer l’emplacement ou le nom d’un fichier, vous devrez
le faire à partir de Dreamweaver (grâce à la fenêtre Site) et non pas à partir du système
d’exploitation (Windows ou Mac OS). Ainsi, lors de la modification d’un fichier HTML,
Dreamweaver pourra mettre à jour automatiquement les hyperliens qui se trouve dans le
document.
La création du dossier du site local
La première étape consiste à créer un dossier dans lequel seront enregistrés tous les
fichiers qui composeront le site local.
Il est important de bien gérer tous les fichiers
dont est composé votre site. Il est recommandé
de classer les éléments par type de fichiers (les
images, les textes, les sons, etc.).
1.
À partir du Bureau, veuillez créer un dossier, et donnez-lui le nom de site local. Ce
dossier contiendra tous les fichiers de votre site. Ce sera le dossier de votre site
local;
2.
Ensuite, à l’intérieur de celui-ci, créez un deuxième dossier que vous nommerez
«images». Vous y mettrez toutes vos images pour les isoler des autres fichiers;
3.
Démarrez Dreamweaver, si ce n’est déjà fait.
05.02 La création de la page d’accueil
Avant de continuer, il nous faut créer et définir la page d’accueil du site sur lequel nous
allons travailler. Dreamweaver pourra ainsi gérer tous les liens à partir de cet index, qui se
trouve dans le dossier du site local et créer la carte du site (voir plus loin).
1.
En démarrant Dreamweaver, une nouvelle page apparaît par défaut et qui a pour titre
«Untitled-1».
2.
Faites immédiatement une sauvegarde de cette page dans votre dossier du site
page 1 8
DREAMWEAVER 4
local. Nommez ce fichier «index.html»;
3.
Donnez un titre à votre page en cliquant dans la case Titre localisée dans la barre
d’outils de la fenêtre du document.
4.
Sauvegardez à nouveau.
Le nom du document
Vous remarquerez que le titre de votre document comporte plusieurs informations. On y
trouve le titre de la page, et entre parenthèses, le nom du dossier suivi du nom du fichier.
Si votre document n’a pas été enregistré après y avoir fait des modifications, un astérisque
apparaîtra à la droite du nom du fichier.
Voilà. Maintenant nous sommes prêts à définir notre site.
Remarque au sujet des caractères spéciaux
Les caractères spéciaux, c’est-à-dire les lettres avec des accents ( à, é, ù, etc.), les
symboles ( : / @ \ ), ainsi que les espaces, ne sont pas compris par les navigateurs et ne
doivent pas être utilisés pour nommer les fichiers. Attention aux caractères en majuscules
qui peuvent aussi parfois poser problème avec certains navigateurs.
05.03 La définition du site
Tout au long du logiciel, le symbole du dossier
bleu vous indiquera la possibilité d’assigner des
chemins de fichiers hiérarchisés. Ces chemins
relient vos fichiers ou éléments à votre site.
1.
Dans la barre des menus, cliquez sur le menu Site et sur le sous-menu Nouveau site,
afin de faire apparaître la fenêtre de Définition du site;
2.
Dans le champ Nom du site de la section Infos locales, entrez le nom de votre site.
Dans cet exercice nous allons l’appeler «site_eva_laudee».
3.
Dans le champ Dossier racine locale, sélectionnez le dossier du site local, en cliquant
sur l’icône du dossier bleu;
4.
Toujours dans la fenêtre Définition du site, sélectionnez la catégorie Mise en forme
de la carte du site, puis cliquez sur le dossier bleu pour aller choisir dans le dossier
du site local la page index.html que vous venez de créer. C’est à partir de votre page
d’accueil que le logiciel génère la carte du site.
page 1 9
DREAMWEAVER 4
Pour plus de détails, voir la section Planification et configuration de votre site > Configuration
d’un nouveau site à l’aide de Dreamweaver (p.103).
La page d’accueil est le point de départ pour construire la carte du site.
05.04 La fenêtre Site
1.
Pour ouvrir la fenêtre Site cliquez sur le menu Fenêtre, puis sur le sous-menu Fichiers
du site (touche F8).
Voir la section Gestion des sites et collaboration > La fenêtre Site (p.110).
2.
Pour voir la carte du site, cliquez sur l’icône Carte du site dans le coin supérieur droit
de la fenêtre.
Voir la section Gestion des sites et collaboration > Utilisation de la carte du site (p.111).
La fenêtre Site vous permet de gérer votre site dans son ensemble. C’est à partir de cette
fenêtre que vous devez effectuer les changements de nom ou les déplacements de vos
fichiers, lorsque c’est nécessaire.
C’est aussi à partir de cette fenêtre que vous pouvez obtenir un aperçu des liens entre vos
documents. La carte du site vous permet de visualiser l’ensemble des documents de votre
site et leur disposition logique, c’est-à-dire l’arborescence (voir plus loin).
Nous reviendrons plus en détails sur les autres fonctions de la fenêtre Site dans la section
07.02 (La publication).
page 2 0
DREAMWEAVER 4
06
L’édition de la page d’accueil
06.01 Les tableaux et les cellules de mise en forme
Dans ce premier exercice, vous découvrirez les éléments de base nécessaires à la création
de pages Web. Vous devez créer votre propre page personnelle en suivant l’exemple de
la page d’Eva Laudée, que vous avez vu précédemment. N’hésitez pas à retourner voir la
page en cas de besoin!
Vous voici maintenant face à une page blanche. Évidemment vous avez déjà tout prévu
(le texte, la photo, une idée de mise en page…) et c’est ce qui va vous permettre de bien
démarrer.
Vous pourrez revenir sur tous ces concepts par la suite. Aussi n’ayez pas peur de faire
des erreurs et tâchez plutôt de bien saisir ces concepts de base pour être en mesure de
pouvoir jouer avec ceux-ci plus tard.
Le concept de mise en forme
En se basant sur les tableaux HTML, la mise en forme vous permet de placer vos images
et vos textes comme vous le désirez et ce, avec beaucoup moins de difficultés qu’avec des
tableaux ordinaires.
Tout d’abord, prenez connaissance de ces textes pour vous familiariser avec le concept
de mise en forme :
Voir la section Conception de la mise en forme d’une page > Mise en forme - Présentation
(p.173).
Voir la section Conception de la mise en forme d’une page > Cellules et tableaux de mise
en forme (p.175).
En utilisant la conception de mise en forme que vous avez déjà préparé, nous allons former
les cellules qui contiendront votre image et vos textes, (le titre, le texte de présentation,
la légende, la photo, etc.) sur votre page d’accueil. Nous allons commencer par créer la
cellule qui contiendra la photo d’Eva.
La création d’une cellule de mise en forme
1.
À partir de Dreamweaver, en passant par la fenêtre Site, ouvrez votre page d’accueil
(le fichier index.html);
2.
Dans le panneau Objet, dans la section Afficher (en bas du panneau), activez le
Mode de mise en forme;
3.
Sélectionnez Dessiner la cellule de mise en forme;
page 2 1
DREAMWEAVER 4
4.
Placez le pointeur en forme de croix sur votre page blanche, à l’endroit où vous
voulez placer votre image, puis en maintenant le bouton de votre souris enfoncé,
tracez un carré de la grandeur désirée. Vous pourrez déplacer et redimensionner
cette cellule par la suite.
Voir la section Conception de la mise en forme d’une page > Dessin de cellules et de
tableaux de mise en forme (p.176).
Vous remarquerez l’ajout automatique d’un tableau de mise en forme de la taille de votre
page. Insérez vos prochaines cellules à l’intérieur de ce tableau.
Observez aussi les changements de contenu
dans l’inspecteur de propriétés lorsque que
vous cliquez sur les différents ingrédients qui se
trouvent maintenant sur votre page.
Vous pouvez continuer à créer les cellules nécessaires à l’insertion du texte, selon votre
croquis de mise en forme. Nous placerons bientôt l’image et les textes. La cellule s’ajustera
automatiquement si le contenu occupe plus de place que celle-ci.
Veuillez consulter le document Utilisation de Dreamweaver si vous avez de la difficulté à
déplacer ou à redimensionner les cellules.
Voir la section Conception de la mise en forme d’une page > Déplacement et
redimensionnement de cellules et de tableaux de mise en forme (p.182).
06.02 Les images
Et maintenant, la pièce maîtresse, c’est-à-dire l’image! En fait rien de plus simple.
Vous aurez sans doute eu plus de problèmes à compresser l’image qu’à l’insérer dans
Dreamweaver.
Voici comment procéder pour insérer une image dans votre page :
L’insertion d’une image
1.
Toujours dans le mode de mise en forme, sélectionnez la cellule dans laquelle vous
désirez insérer votre image;
2.
Dans le panneau Objets, cliquez sur le menu Insérer une image;
3.
Dans la boîte de dialogue, sélectionnez votre fichier image de format GIF, JPEG ou
PNG que vous désirez intégrer à votre page.
4.
Cliquez sur Sélectionner.
Si ce document ne se trouve pas déjà à l’intérieur de votre dossier de site local, une boîte
de dialogue vous demandera si vous désirez copier le document en question dans votre
dossier. Il est préférable de le faire pour être certain d’avoir tous les éléments nécessaires
à l’intérieur du dossier de votre site local lors de la publication.
L’image apparaît dans la cellule. Vous pouvez redimensionner la cellule si elle est plus
grande que l’image.
page 2 2
DREAMWEAVER 4
Encore une fois, remarquez la réaction de l’inspecteur de propriétés lorsque vous
sélectionnez les différents éléments de votre page et particulièrement l’image.
Voir la section Insertion d’images> Propriétés d’une image (p.283).
Sachez cependant que l’image ne se trouve pas dans la page HTML, mais qu’elle y est
appelée, d’où l’importance de garder les chemins d’accès (ou adresses) intactes dans le
système d’exploitation. Et pour vous le prouver, vous n’avez qu’à sélectionner l’image pour
ensuite aller voir dans le code HTML.
Dans la barre d’outils de la fenêtre, cliquer sur Afficher les modes Code et Création
Dreamweaver > Utilisation de la barre d’outils (p.78).
Dans la partie supérieure de la fenêtre (la portion Code) vous pouvez voir la ligne
correspondante à votre image qui est sélectionnée également.
Comme vous pouvez le constater, l’attribut image (<img src=»images/...) correspond en
fait à l’endroit où le fichier image se trouve dans le dossier de votre site local, normalement
dans le dossier images. La balise HTML src signifie en fait «source». On peut aussi y lire
la hauteur et la largeur de votre image.
Même si vous n’utiliserez pas le mode Code dans cet abrégé, n’hésitez pas à observer les
correspondances entre vos sélections dans le mode Création et les lignes de code. Plus
tard, vous vous rendrez peut-être compte que c’est de cette manière que vous avez fini
par comprendre le HTML!
06.03 Le texte
Continuons notre page en insérant le texte que vous avez écrit :
1.
Sans quitter Dreamweaver, ouvrez votre fichier texte (Word ou autre);
2.
Faites-en une sélection complète, en cliquant sur le menu Édition et sur le sousmenu Tout sélectionner (touches z A);
3.
Copiez-le intégralement en cliquant sur le menu Édition et sur le sous-menu Copier
(touches z C);
4.
Changez d’application en sélectionnant Dreamweaver, dans la barre des tâches;
5.
Dans Dreamweaver, insérez votre curseur dans la cellule devant contenir votre
texte;
6.
Collez votre texte en cliquant sur le menu Édition et sur le sous-menu Coller (touches
z V).
Le texte s’insère dans la cellule désirée. Si vous désirez compartimenter votre texte,
page 2 3
DREAMWEAVER 4
vous pouvez procéder de la même manière à l’intérieur même de Dreamweaver, ceci en
coupant et en collant les éléments. Vous pourriez placer votre titre dans une cellule à part
et la description de votre image dans une autre cellule, par exemple.
Observez les propriétés du texte dans l’inspecteur de propriétés.
Voir la section Insertion et mise en forme de texte > Définition de polices, de styles, de
couleurs et d’alignement > Propriétés du texte (p.249).
Vous pouvez déterminer le style de police, son alignement (à gauche, centré ou à droite),
la taille et la couleur du texte (voir un peu plus bas sur l’utilisation des couleurs). C’est aussi
à partir de cette fenêtre que nous pourrons établir des liens, mais réservons-nous cette
étape pour plus tard.
En attendant, il serait peut-être temps d’ajouter des couleurs à votre page! Nous en
profiterons pour explorer les propriétés d’une page Web. C’est grâce à la fenêtre Propriétés
de la page que nous pouvons ajuster l’ensemble des propriétés.
06.04 Les propriétés de la page
Pour accéder à la fenêtre Propriétés de la page, procédez comme suit :
Cliquez sur le menu Modifier, et sur le sous-menu Propriétés de la page… (touches z J).
Pour obtenir plus de détails sur cette fenêtre, l’option aide au bas de la fenêtre vous mènera
directement à cette page de l’aide, c’est-à-dire la section Configuration d’un document >
Définition des propriétés du document > Propriétés de la page (p.156).
Nous n’utiliserons pas tous les paramètres de la fenêtre Propriétés de la page dans cet
abrégé. L’encodage du document, le tracé de l’image ainsi que la transparence sont des
fonctions plus avancées. Nous allons nous concentrer plutôt sur les couleurs.
Il est possible de modifier la couleur d’arrière-plan en cliquant sur le carré situé à droite de
la rubrique et en sélectionnant la couleur désirée avec le pointeur. En quittant la fenêtre
Propriété de la page, on obtient le changement de couleur d’arrière-plan. La procédure est
page 2 4
En plus d’avoir la possibilité de choisir une couleur pour le texte, vous pouvez définir les
couleurs pour les différents états des liens (non-visités, visités ou actifs). Ces couleurs
sont appliquées par défaut. C’est-à-dire que si vous ne spécifiez aucune couleur de texte
par l’entremise de l’inspecteur de propriétés, la couleur par défaut choisie dans la fenêtre
Propriété de la page sera appliquée.
Pour en savoir plus sur les couleurs dans Dreamweaver, visitez les sections suivantes :
Les bases de Dreamweaver > Utilisation des couleurs (p.88). Les bases de Dreamweaver
> Les couleurs sécurisées pour le Web (p.89)
Vous pouvez aussi spécifier l’image d’arrière-plan. Si vous décidez de placer une image
d’arrière plan, assurez-vous que votre image ne sois pas trop grande, ni trop lourde, pour
qu’elle puisse être disposée en mosaïque. Cette image sera répétée sur toute la surface
de la fenêtre du navigateur qui visualisera votre page. Il est préférable de tester cette
fonctionnalité avec plusieurs exemples pour bien comprendre ses effets.
DREAMWEAVER 4
exactement la même pour modifier la couleur du texte et des liens.
page 2 5
DREAMWEAVER 4
06.05 Les liens
Vous voilà déjà avec une page Web! Il ne vous restes plus qu’à y ajouter des liens, en faire
une publication et vous voilà branché sur le cyberespace!
Dans cette partie, nous allons commencer par introduire un lien actif de courriel dans votre
page. Puis après avoir créé une deuxième page, vous allez la relier avec votre première
page en créant un hyperlien.
Un courriel actif (ou lien de messagerie électronique) à pour effet de faire démarrer
l’application de courriel pour laquelle l’ordinateur de l’usagé est configuré, puis d’ouvrir un
nouveau message vierge dans lequel votre adresse sera inscrite comme destinataire.
L’inconvénient c’est qu’il faut qu’une application de courriel se trouve sur l’ordinateur,
sinon le lien actif n’aura aucun effet. Au cas où le texte (ou l’image) contenant votre lien de
courriel n’affiche pas votre adresse à proprement dite, le seul moyen pour l’usager de la
connaître sera de placer le curseur sur le lien et de voir au bas de la fenêtre du navigateur
ce qui est inscrit.
L’insertion d’un courriel
Vous pouvez faire en sorte que quelques mot ou une phrase contiennent votre adresse
courriel active. Cela pourrait être votre adresse comme telle. Cela peut aussi être une
image.
Dans le cas d’une image, il est recommandé d’utiliser de petites images faisant référence
au courriel pour ne pas porter à confusion.
page 2 6
DREAMWEAVER 4
L’insertion d’un lien de courriel dans un texte
1.
Dans votre document, sélectionnez la cellule qui devra contenir votre lien de
messagerie électronique et placez le curseur à l’endroit voulu;
ou
Dans votre document, sélectionnez le texte devant contenir votre lien de messagerie
électronique;
2.
Dans la palette d’objets, cliquez sur Insérer lien message électronique;
3.
Dans la boîte de dialogue, s’il n’est pas déjà là, tapez le texte qui contiendra votre
adresse («Écrivez-moi!» ou votre adresse);
4.
Ensuite inscrivez-y votre adresse de courriel ([email protected]);
5.
Cliquez sur OK.
Pour inscrire votre lien de courriel à partir de l’inspecteur de propriétés (comme pour une
image), consultez la deuxième partie de la section Liens et navigation > Création de liens
> Création d’un lien de messagerie électronique (p.386).
page 2 7
DREAMWEAVER 4
07
L’édition de la deuxième page
Pour créer un lien vers une autre page, celle-ci doit préalablement exister. Nous allons
maintenant créer la deuxième page de votre site, dans laquelle, plus tard, vous devrez
décrire votre projet de site dans son ensemble. Nous y reviendrons. En attendant, cette
page n’a pas besoin d’être terminée.
07.01 La création de la deuxième page et l’insertion d’un lien
La création de la deuxième page
1.
Cliquez sur le menu Fichier, et sur le sous-menu Nouveau (touches z N);
2.
Sauvegardez le fichier nouvellement créé. Pour ce faire, cliquez sur le menu Fichier,
et sur le sous-menu Enregistrer sous (touches z S). Si le dossier de votre site local
n’est pas automatiquement choisi, faites-le.
3.
Nommez le fichier «descrip_projet.html»;
4.
Cliquez sur Enregistrer.
C’est le minimum à faire avec cette nouvelle page pour l’instant. Créons le lien entre vos
deux pages maintenant.
L’insertion d’un lien
Pour sélectionner votre page d’accueil :
1.
Cliquez sur le menu Fenêtre puis dirigez votre pointeur jusqu’en bas, où une liste des
documents ouverts vous permet d’en appeler un à l’avant plan;
ou
En utilisant la fenêtre Site, double-cliquez sur le fichier désiré;
2.
Une fois votre document en avant plan, saisissez le texte devant contenir votre lien à
l’endroit voulu et sélectionnez-le;
ou
Sélectionnez une portion de texte (ou un mot habituellement) devant contenir le lien
vers votre deuxième page;
3.
Dans l’Inspecteur de propriétés (qui devrait maintenant afficher les propriétés du
texte) faites dérouler la liste des éléments disponibles en cliquant sur le bouton du
champ Lien.
ou
page 2 8
ou
Cliquez sur l’icône du dossier, dans l’Inspecteur de propriétés.
4.
Voilà!
Si vous placez votre curseur dans le lien que vous venez de créer, le lien s’affichera dans
le champ Lien de l’Inspecteur de propriétés.
DREAMWEAVER 4
Vous pouvez aussi cliquer sur le menu Modifier et sur le sous-menu Créer le lien
(touches z L), puis sélectionner le fichier désiré.
page 2 9
DREAMWEAVER 4
07.02 L’aperçu dans un navigateur
Maintenant la récompense! Regardons de quoi votre page à l’air et comment elle réagit
dans l’environnement d’un navigateur. Habituellement vous avez le choix entre Netscape
ou Explorer. Idéalement les deux. Certains éléments HTML ne sont pas affichés de la
même manière d’un navigateur à l’autre. Il est alors intéressant de faire des comparaisons.
De toutes façons, vous pouvez maintenant visualiser votre page et la voir comment elle
pourra être vue sur le Web.
Pour visualiser une page Web à partir d’un navigateur
1.
Cliquez sur le menu Fichier puis sélectionnez Aperçu dans le navigateur. Choisissez
un des navigateurs offerts.
ou
Appuyez sur la touche F12 pour le navigateur principal ou sur les touches z F12 pour
le navigateur secondaire.
2.
Tadaaa!
C’est de cette manière que vous pourrez voir si votre page ou votre site Web fonctionne
bien, si tous les liens et les images survolées fonctionnent correctement.
Vous pouvez maintenant retravailler tous les aspects de vos deux pages. Cet exercice était
une étape préliminaire au développement d’un site Web plus élaboré.
L’objectif est surtout de bien saisir les concepts de base et particulièrement de faire en
sorte que vous soyez à l’aise avec la manipulation de ce logiciel. N’hésitez pas à revenir
sur des concepts qui vous semblent obscurs ou à explorer plus à fond le logiciel. Vos
pouvez même lire des sections de l’aide, connexes aux concepts que nous avons déjà vus,
pour en approfondir un aspect qui vous intéresse.
07.03 La publication
La publication est une étape cruciale dans l’élaboration d’un site Web. C’est aussi
l’opération la plus délicate. Il faut être bien préparé pour ne rien oublier… ni en mettre de
trop!
Vous avez en annexe de cet abrégé, une adresse et la procédure à suivre pour s’ouvrir
un compte gratuit, vous fournissant l’espace nécessaire pour y télécharger votre site Web.
Lorsque que vous aurez testé votre page dans un navigateur et que vous serez certain de
l’avoir terminée, ouvrez votre compte (voir en annexe).
page 3 0
DREAMWEAVER 4
La connexion
Une fois votre compte actif, prenez en note les informations qui vous sont données, c’està-dire le nom d’utilisateur, le mot de passe, le nom du site FTP ou adresse FTP, l’URL de
votre site (ou adresse HTTP), etc. Suivez cette procédure pour configurer les fonctions
FTP (File Transfer Protocol) de Dreamweaver. Dreamweaver est à la fois un créateur et un
intégrateur HTML, ainsi qu’une application FTP.
Voir la section Gestion des sites et collaboration > Configuration d’un site distant >
Association d’un serveur distant à un site local (p.127).
07.04 Procédure à suivre pour configurer votre site
1.
À partir de la fenêtre Site, choisissez Définir les sites…
2.
Choisissez votre site dans la liste et cliquez sur Modifier...
3.
Dans la fenêtre Définition du site pour « Votre Site », choisissez la Catégorie Infos
distantes;
4.
Dans le menu Accès, cliquez sur FTP;
5.
Dans le champ Hôte FTP, entrez le nom du site FTP qui vous a été attribué. Faites
attention à entrer les données correctement :
Correct : ftp.nomdesite.com
Incorrect : ftp ://ftp. nomdesite.com
Incorrect : nomdesite.com
6.
N’entrez rien dans le champ Répertoire de l’hôte. Si votre site FTP vous oblige à
entrer une information, consultez l’aide pour plus de détails;
Voir la section Gestion des sites et collaboration > Configuration d’un site distant >
Définition du répertoire hôte du site distant (FTP seulement) (p.130).
7.
Entrez votre nom d’utilisateur dans le champ correspondant;
8.
Entrez votre mot de passe. Ne cliquez pas sur Enregistrer si vous êtes sur un
ordinateur publique (à l’école par exemple). Vous aurez à entrer votre mot de passe
à chaque fois que Dreamweaver accèdera au site distant, cependant;
9.
Laissez les autre boutons dessélectionnés;
10.
Choisissez maintenant la catégorie : Infos locales;
Pour obtenir plus de détails voir la section Planification et configuration de votre site >
Configuration d’un nouveau site à l’aide de Dreamweaver (p.103).
11.
Entrez votre nouvelle adresse HTTP (ou URL) dans le champ correspondant;
page 3 1
DREAMWEAVER 4
12.
Cliquez sur Activer la cache;
13.
Cliquez sur OK.
Une fois les données inscrites dans votre définition de site, vous pouvez accéder au site
distant, toujours par l’entremise de la fenêtre Site, en cliquant sur Connecter à un hôte
distant. Entrez votre mot de passe si nécessaire.
07.05 Enregistrer les fichiers sur le site distant
Par défaut, la partie gauche de la fenêtre Site représente les fichiers contenu dans l’espace
qui vous est alloué sur le site FTP (site distant). Vous n’avez qu’à déposer les pages à
publier sur votre site en les sélectionnant dans la partie droite, qui affiche les fichiers de
votre site local se trouvant sur le disque dur de votre ordinateur (répertoire local).
Vous pouvez aussi publier l’ensemble de votre site local en cliquant sur le bouton Placer
les fichiers de la fenêtre Site, tout en ayant sélectionné l’ensemble des fichiers. Il vaut
mieux pour cela enlever tout fichier inutilisé par votre site. Il faut souvent faire le ménage!
Assurez-vous également de faire en sorte que le fichier de départ (index.html) soit au
premier niveau. Évitez pour cela de placer le dossier de votre site local comme tel. Placez
page 3 2
DREAMWEAVER 4
plutôt son contenu.
Voir la section Gestion des sites et collaboration > La fenêtre Site > Utilisation des contrôles
de la fenêtre Site (p.111).
Placer un fichier
1.
Dans la fenêtre Site, à partir de la section Répertoire local (partie gauche),
sélectionnez le ou les fichiers que vous voulez publier;
2.
Cliquez sur Placer les fichiers;
3.
Une boîte de dialogue vous demandera d’inclure les fichiers dépendant du ou des
fichiers que vous voulez placer. Cliquez sur Oui pour inclure tous les éléments reliés
(images, etc.).
Voir la section Gestion des sites et collaboration > Acquérir et placer des fichiers >
Placement de fichiers sur un serveur distant (p.148).
4.
Si le fichier est déjà présent sur le Site distant (ou si un fichier à le même nom) il sera
écrasé et remplacé par celui que vous placez. C’est de cette manière que l’on peut
apporter des modifications à un fichier déjà publié.
On ne peut pas effacer des fichiers sur un site distant, on ne peut que les écraser par un
fichier du même nom. C’est de cette façon que l’on modifie un site déjà placé.
Si on ne veut plus utiliser un fichier, il faut l’abandonner sur le serveur FTP en coupant les
liens vers ce fichier.
page 3 3
DREAMWEAVER 4
08
Le projet
En tant que citoyen du cyberespace, il vous faut maintenant songer à offrir au monde votre
point de vue! On trouve de tout sur Internet, alors n’hésitez pas à dire ce que vous pensez,
dans la mesure des règles fondamentales du respect d’autrui et de soi-même.
Mais avant toute chose, il vous faudra bien planifier tout ça. Après avoir compris les
principes de base de Dreamweaver, vous serez plus en mesure de comprendre et donc
d’assimiler les prochaines étapes. Sachant comment faire une page Web (et même deux!),
la planification de votre site devrait donc être plus facile à faire.
Mais en attendant, commencez par aller visiter le reste du site d’Eva Laudée, à partir de
la troisième page (cliquez sur Continuer). Mais attention, dites-vous bien qu’Eva à déjà
passablement d’expérience avec Dreamweaver. Pourtant, après la lecture de cet abrégé,
vous devriez être en mesure de pouvoir intégrer tous les éléments de son exemple dans
votre site.
08.01 Les objectifs du projet
Comme vous l’aurez remarqué, il y a déjà plusieurs éléments intéressants dans ces
nouvelles pages Web. Voici la liste des ingrédients dont vous aurez besoin en plus de
ceux que vous connaissez déjà :
1.
Des images survolées (réactives) : Cette méthode exige deux images de taille
identique. Lorsque le curseur passe sur la première image, la deuxième est
immédiatement affichée;
2.
L’utilisation des cadres : Les cadres permettent de gérer plusieurs pages dans une
même fenêtre. Vous aurez besoin d’un menu puis d’une page de départ (la mosaïque
dans le site d’Eva), accompagnant le menu;
3.
La création d’un menu : Un menu est une page Web insérée dans un cadre ayant
comme fonction de contenir tous les liens du site et de pouvoir les appeler dans
d’autres cadres;
4.
Au moins 3 à 5 pages supplémentaires : Des pages pour remplir votre site de
bonnes idées.
Le projet
La préparation et la méthode de travail
La règle d’or à suivre lors de la création de sites Web, c’est la planification. Il peut s’avéré
très ardu de créer un site en improvisant. Les logiciels d’intégration HTML (comme
Dreamweaver) ne sont pas vraiment conçus pour ça.
En fait la grande majorité du travail se fait à l’extérieur du logiciel d’intégration. D’ailleurs
on dit «logiciel d’intégration» car ils intègrent et assemblent des éléments qui on été conçu
page 3 4
DREAMWEAVER 4
préalablement, et c’est ce qui normalement prend le plus de temps.
Pour ce cours, nous allons aborder une méthode de travail simple. Avec le temps et
l’expérience, vous vous sentirez plus à l’aise avec le logiciel et vous serez plus en mesure
de préparer votre site selon votre méthode. Cela dépend de chacun. En attendant voici
comment nous allons procéder.
08.02 L’élaboration du projet et de son contenu
Bon ben… maintenant ça prend une idée! Ahhhhrgh! La malédiction de la page blanche
rôde aussi sur la Toile!
Si vous en n’avez pas déjà un, dites-vous qu’en général, un sujet de site Web est approprié
lorsqu’on peut le diviser en sections. Vous aurez sans doute une recherche à faire pour
compléter vos informations et pour trouver ou créer les images qu’il vous faut. Discutez de
vos idées avec vos proches et votre professeur. Visitez des sites Web qui vous intéressent.
Inspirez-vous de ce que vous voyez (et ne voyez pas!) dans le cyberespace. Le sujet qui
nous convient est souvent celui que l’on connaît le mieux. Mais on peut parfois découvrir
une tonne d’informations en abordant un sujet que l’on connaît moins…Tout ça est un
processus normal de création.
Et une fois que vous avez un sujet qui vous convient, il vous faut déterminer la manière
dont vous aurez à le traiter. Peut-on le diviser en différentes sections? Sinon, comment
délimiter les pages? Et comment le traiter? Quel point de vue prendre? Académique?
Humoristique? Toutes les options peuvent être bonnes.
Voir la section Planification et configuration de votre site > À propos de la planification et
de la création du site (p.98).
Avant d’aller plus loin, discutez de votre choix de sujet avec votre professeur qui pourra
vous aider à en déterminer le degré de difficulté. C’est aussi le moment de voir quel angle
(ou quel point de vue) prendra votre site par rapport à votre sujet, et d’en parler avec votre
professeur.
08.03 La préparation des médias
Le projet
Si vous comptez utiliser des photos ou des images, vous devez vous assurer qu’elles
soient de la bonne taille et du bon format. Il faut faire attention au poids si vous comptez
insérer plusieurs images (on peut dire qu’en moyenne 50 Ko, ça commence à être lourd).
Classer vos médias soigneusement dans des dossiers spécifiques pour vos grandes
catégories (images, images du menu, etc.). Placer tout ce dont vous avez besoin dans le
dossier de votre site local.
Quand vous aurez préparé votre mise en forme et votre arborescence (voir plus bas),
page 3 5
DREAMWEAVER 4
Le projet
vous aurez aussi à construire les éléments constituants votre menu. Aussi, tâchez de bien
comprendre les principes des images réactives.
08.04 L’arborescence
L’arborescence (ou la carte du site) est une représentation organisationnelle des idées
ayant la logique d’un arbre : une idée principale (le tronc), des niveaux hiérarchiques
(les branches) et des idées secondaires (les feuilles). La fenêtre Carte du site dans
Dreamweaver, utilise une arborescence pour illustrer la carte du site.
Voir la section Gestion des sites et collaboration > Utilisation de la carte du site (p.283).
Vous pouvez vous servir de cette méthode pour organiser vos idées, mais surtout pour
prévoir l’orientation d’un site. À partir de votre deuxième page (Mon projet), quels sont
les chemins possibles pour avoir accès à une page de votre site? Le principal avantage
de faire une carte du site est de facilité la navigation à travers les concepts élaborés par le
page 3 6
DREAMWEAVER 4
site. Certains sites mettent même la carte du site à la disposition de l’internaute, parfois,
dans un menu, on peut voir «carte du site». L’arborescence vous permet de vous y trouver
plus facilement.
Attention de ne pas faire un site linéaire, où il faudrait voir toutes les pages pour se rendre
à la «dernière». Remarquez que tous les sites Web, par définition, on une page de départ
(bien sûr) mais jamais de page de fin!
Vous pouvez la dessiner sur papier ou dans un logiciel de dessin comme Appleworks, ou
ClarisWorks. Il existe même des logiciels fait pour créer des organigrammes, entre autres,
le logiciel Inspiration 6 (www.inspiration.com)!
Voir la section Planification et configuration de votre site > A propos de la planification et
de la création du site > Organisation de la structure du site (p.100).
08.05 La planification de la mise en forme
Vous avez déjà planifié une mise en forme de page Web lors de la préparation pour le
premier objectifs. Sans doute vous êtes-vous rendu compte que cela aurait été d’autant
plus facile si vous aviez su en quoi consistait la mise en forme avant de la planifier! Eh bien
maintenant que vous savez, rien de plus facile… n’est-ce pas :-)
Sans blagues, vous avez maintenant tous les atouts pour faire en sorte d’arriver bien
préparé lors de l’intégration de vos éléments dans Dreamweaver.
C’est aussi la seule manière de prévoir la préparation de vos médias (les images pour le
menu par exemple). Et si vous avez déjà une idée de la disposition de vos cadres, vous
n’aurez aucune difficulté à vous y trouver lors de l’intégration. Vous devriez faire un croquis
de Mise en Forme pour chaque page différente. Cela vous donneras une idée de tout ce
que vous avez besoin pour votre site. Peut-être en avez-vous trop à faire? Tâcher de rester
simple et de partager équitablement l’information sur toutes vos pages.
Le projet
La présentation du projet par écrit
Vous devez, avant de vous lancer dans Dreamweaver, faire approuver votre projet de site
Web par votre professeur. Vous utiliserez votre deuxième page pour y inscrire les détails
de votre projet. Votre professeur pourra la consulter sans problème à partir d’Internet s’il
le faut. Vous pourrez intégrer un lien à la fin de la page, vers votre site une fois qu’il sera
complété. Il sera intéressant pour vous de voir comment le projet planifié en mots et en
croquis s’est finalement concrétisé dans Dreamweaver.
page 3 7
DREAMWEAVER 4
08.06 Les éléments à intégrer dans la deuxième page
Voici les éléments de vous aurez besoin pour présenter votre projet dans la deuxième
page :
—
Le choix du sujet : Le choix du sujet tel que discuté avec votre professeur. Apportez
le plus de précision possible à votre sujet;
—
La description du site : Décrivez de quoi sera composé votre site. Combien y
aura-t-il de pages et quel sera leur titre (provisoire)? Combien d’images y aura t-il?
Utiliserez-vous des tableaux pour y insérer des données?
—
Les textes : Vous devez préparer une liste des textes de votre site, s’il y a lieu. Un
peu comme une table des matières.
Décrivez aussi vos références pour votre recherche (la bibliographie sommaire). Quels
sont les livres et les liens que vous avez consultés pour élaborer votre sujet? Quelles sont
vos sources pour les images?
Les éléments optionnels
Ces documents sont optionnels pour la deuxième page. Vous n’êtes pas obligés de les
intégrer dans votre page Description de projet de votre site, mais vous devez tout de même
les présenter à votre professeur avant de commencer votre site.
—
L’arborescence : C’est la carte de votre futur site. C’est un plan de la navigation à
travers votre site. Si possible, on peut y indiquer les points de passage (il faut cliquer
sur telle image ou tel mot pour passer à une autre page…).
de la création du site > Conception du plan de navigation (p.102).
—
Le croquis de mise en forme et le jeu de cadre : Un aperçu visuel de vos différentes
pages. Dans l’aide, on appelle cela faire une maquette.
de la création du site > Création de l’aspect de votre conception (p.102).
C’est aussi l’occasion de voir comment s’articulerons vos cadres. Observez bien l’exemple
du site d’Eva pour comprendre le fonctionnement des cadres.
Le projet
Rapportez-vous aussi à la section 08.09 du présent document (Les cadres).
Vous devez avoir un jeu de cadre comprenant au moins deux cadres : Un cadre pour le
menu, puis un cadre dynamique où s’afficherons les pages HTML sélectionnées par le
menu. Le meilleur exemple d’un tel jeu de cadres se trouve à être l’aide en ligne que vous
consultez depuis le début de cet abrégé!
page 3 8
DREAMWEAVER 4
08.07 La création et le regroupement des actifs
de la création du site > Planification et regroupement des actifs (p.102).
Aussi, vous aurez à préparer les éléments qui composerons votre site, dont par exemple,
les couples d’images pour faire des effets de survol (rollover) : les images réactives. On
appelle l’ensemble de ces éléments les Actifs. Dans Dreamweaver, la palette Actifs créer
la liste complète de tous les éléments qui sont déjà intégrés dans votre site. Voir le menu
Fenêtre, le sous-menu Actifs (F11).
Vous n’avez pas à préparer tous les actifs avant de montrer à votre professeur votre
description de projet, mais vous devrez au moins lui en présenter une sélection ainsi que
les éléments réactifs du menu.
08.08 L’image survolée
Comme vous l’avez vu dans l’exemple de site d’Eva, l’image survolée (rollover) donne un
aspect dynamique et plus vivant à un site Web. L’usager à l’impression de participer au
site. Et c’est tellement simple à faire! Tout ce dont vous avez besoin ce sont deux images
un peu différentes et de taille identique.
Le projet
Voici comment les intégrer à votre page Web, une fois qu’elles ont été crées et placées
dans le dossier de votre site local :
1.
À partir de Dreamweaver, soit dans le mode mise en forme ou le mode standard,
sélectionnez l’endroit où vous voulez insérer votre image réactive et placez-y votre
curseur;
2.
Dans la palette d’Objets communs, cliquez sur Insérer une image survolée;
3.
Dans la boîte de dialogue, commencez par donner un nom à votre couple d’images;
4.
Dans le champ Image originale, cliquez sur Parcourir… pour choisir la première
page 3 9
5.
Ensuite, dans le champ Image survolée, choisissez la deuxième image; celle qui
apparaîtra lorsque le curseur touchera la première;
6.
Si vous avez déjà créé la page de destination, choisissez-la dans le champ Si
cliquée… Sinon, vous pourrez toujours faire le lien plus tard, de la façon habituelle, à
partir de l’Inspecteur de propriétés
Revoir la section 06.05 (Les liens).
Le projet
DREAMWEAVER 4
image. C’est l’image qui sera chargée en premier. C’est celle qui sera affichée par
défaut, tant que le curseur ne la survolera pas;
page 4 0
DREAMWEAVER 4
7.
Cliquez sur OK.
Pour plus de détails, consultez la section de l’aide Insertion d’images > Création de cartes
graphiques > Création d’un effet de survol (p.291).
Vous pouvez visualiser l’effet dans votre navigateur en cliquant sur le menu Fichier, et sur
le sous-menu Aperçu dans le navigateur (F12).
08.09 Les cadres
L’utilisation de cadres dans un site Web est une excellente manière de présenter
l’information. C’est aussi une méthode de mise en forme. On peut forcer un élément à
toujours rester au bas de la page (par exemple) à l’aide de cadres. C’est le cas de la main
dans le site d’Eva, qui une page HTML indépendante, insérée dans un petit cadre dans le
bas du cadre Menu.
Le principe est simple : vous pouvez, à l’intérieur d’une page Web, ouvrir d’autres pages
dans un espace donné. Cet espace est appelé Cadre. Et la page contenant les cadres
est appelée Jeu de cadre (Frameset). Chacun des cadres correspond à une page HTML
indépendante.
Voir la section Cadres > Cadres – Présentation (p.283).
Les jeux de cadre sont aussi sauvegardés comme des pages HTML indépendantes.
Lors de la création d’un site Web basé sur des cadres, il est important d’avoir une bonne
planification. Dans votre cas, vous devrez avoir au moins deux cadre dans le jeu de cadre :
un cadre contenant le menu puis un cadre dynamique, affichant les choix faits à partir du
menu. C’est le cas de l’aide en ligne et du site d’Eva, par exemple. Vous pouvez aussi
ajouter plus de cadres à votre jeu de cadres si vous le désirer (un cadre statique, par
exemple, pour afficher un élément en continu, comme La main du site d’Eva).
08.10 Le jeu de cadres
Ainsi, avant de commencer à créer votre jeu de cadre vous devez être prêt à assembler
la page HTML du menu (menu.html), ainsi que la page de départ (page.de.depart.html).
Une troisième page est nécessaire pour apprendre à créer des liens assignés aux cadres
à partir du menu.
Le projet
Pour créer votre jeu de cadres, vous pouvez sélectionner un jeu prédéfini.
Voir la section Cadres > Création de cadres > Insertion d’un jeu de cadres prédéfini
(p.216).
1.
Dans Dreamweaver, créez un nouveau document (z N);
2.
Dans la palette d’objets, sélectionnez la section Cadre, en cliquant sur la petite flèche
page 4 1
DREAMWEAVER 4
dans le haut de la palette;
3.
Choisissez le modèle qui vous convient;
4.
Pour bien contrôler votre jeu de cadres, utilisez la palette Cadre, en cliquant sur le
menu Fenêtre et sur le sous-menu Cadre (touches majuscule et F2);
Voir la section Cadres > Sélection d’un cadre ou d’un jeu de cadres > Panneau Cadres
(p.218).
La sélection du jeu de cadres au complet est illustrée par une bordure plus large, tandis
que la sélection des cadres comme tel est illustrée par une bordure simple.
Pour être certain de savoir si vous avez
sélectionné votre jeu de cadre ou un cadre en
particulier, vérifiez le nom dans le haut de la
page du document ou vérifiez la sélection dans
le panneau Cadre.
5.
Pour manipuler les cadres, affichez les bordures de cadres dans la fenêtre de
document. Cliquez sur le menu Affichage, sur le sous-menu Assistances visuelles,
et sur le sous-menu Bordures du cadre. Les éléments déjà actifs sont précédés d’un
crochet [ √ ]. Ajustez la grandeur des cadres avec votre curseur;
6.
Faites une sauvegarde de votre jeu de cadres;
Voir la section Cadres > Enregistrement des fichiers du cadre et du jeu de cadres
(p.220).
7.
Nommez votre document «jeu.de.cadre.html»;
8.
À l’aide du panneau Cadre, sélectionnez le cadre devant contenir votre menu. Cliquez
sur le menu Fichier, et sur le sous-menu Ouvrir dans un cadre… puis sélectionnez
votre document menu.html;
9.
Sélectionnez le deuxième cadre en cliquant sur le menu Fichier et sur le sous-menu
Ouvrir dans un cadre… puis sélectionnez votre document page.de.depart.html.
C’est cette page qui sera ouverte en même temps que le menu. Elle est directement
associée à votre jeu de cadre;
10.
Définissez les caractéristiques des bordures de chaque cadre à partir de l’Inspecteur
de propriétés.
Voir la section Cadres > À propos des propriétés des cadres et des jeux de cadres >
Définition des propriétés des jeux de cadres (p.224).
Le projet
11.
Définissez le nom de vos cadres en les sélectionnant, puis en les nommant par
l’entremise de l’Inspecteur de propriétés. Vous pourrez ainsi assigner les liens faits à
partir du cadre menu vers d’autres cadres. Vous pouvez donner le nom cadre.menu
au cadre contenant le menu et cadre.dynamique au cadre qui doit afficher les pages
HTML.
Voir la section Cadres > À propos des propriétés des cadres et des jeux de cadres >
Définition des propriétés des cadres (p.222).
Si vous deviez créer un jeu de cadres à partir d’une page HTML déjà existante, la petite
page 4 2
DREAMWEAVER 4
section bleue dans les jeux de cadres correspondrait à cette page.
Jouer avec des cadres peut être assez fastidieux si on n’est pas attentif à la sélection. En
effet, il est possible de faire plusieurs sélection dans un document avec des cadres. Pour
bien vous trouver, vous devez vous servir du panneau Cadre, situé dans le menu Fenêtre
et sous-menu Cadre (touches majuscule et F2), ainsi que de l’inspecteur de propriétés.
N’oubliez pas de consulter l’aide à partir de l’Inspecteur de propriétés (?) à chaque fois que
vous sélectionnez un élément nouveau. En vous servant de ces deux outils, vous pourrez
vous repérer aisément.
08.11 Les liens et les cibles
Il vous faut maintenant assigner à votre menu les liens qui vous permettrons d’ouvrir des
pages HTML dans le cadre dynamique.
1.
Sélectionnez l’élément (une image…) dans le cadre contenant votre menu que
l’usager devra cliquer pour ouvrir la page correspondante dans le cadre dynamique.
2.
À partir de l’inspecteur de propriétés, remplissez le champ Lien en sélectionnant
la page qui devra s’ouvrir dans le cadre dynamique. Si votre image est une image
survolée, vous remarquerez le symbole # déjà présent dans le champ Lien. Il sera
remplacé par votre lien.
Il faut maintenant spécifier où devra s’ouvrir la page. Par défaut, une page appelée s’ouvre
toujours par-dessus celle qui l’a appelée (cible : .self). Mais lorsqu’il y a plusieurs cadres,
on peut préférer cibler la page vers un autre cadre.
Voir la section Cadres > Définition des contenus de cadre avec liens (p.228).
Toujours dans l’Inspecteur de propriétés, avec le lien (l’image) sélectionné, faites
dérouler le petit menu où son listées les cibles possibles, vis-à-vis le champs Cible.
Le projet
3.
page 4 3
DREAMWEAVER 4
4.
Choisissez le cadre où devra apparaître la page appelée par le lien (dans votre cas il
devrait s’agir de «cadre.dynamique»).
5.
Visualisez dans votre navigateur [F12]!
_blank
ouvre le document lié dans une nouvelle fenêtre du navigateur tout en
conservant la fenêtre en cours disponible.
_parent
ouvre le document lié dans le jeu de cadres parent du lien.
_self
ouvre le lien dans le cadre en cours, en remplaçant le contenu de ce cadre.
_top
ouvre le lien dans le jeu de cadres ultra périphérique du document en cours, en
remplaçant tous les cadres.
Vous pouvez maintenant créer le reste de vos pages, si ce n’est déjà fait. Ensuite vous
pourrez terminer l’ensemble de vos liens en ouvrant votre document «jeu.de.cadre.html»
où votre menu et votre page par défaut (ou de départ) se trouveront. De là, assignez le
reste des liens du menu aux pages correspondantes vers le (ou les) cadre voulu.
08.12 Les tableaux
Le projet
Vous l’avez déjà vu, le mode mise en forme se base sur la structure des tableaux. En
créant une mise en forme (en se servant du mode Mise en Forme), vous créez en fait un
ensemble complexe de tableaux (que vous pouvez voir dans le mode Standard).
Vous pouvez aussi créer vous même un tableau, pour y insérer une information simple.
Bien sûr la manipulation de tableaux n’est pas aussi aisé que dans la mode Mise en Forme,
mais cela peut être utile dans le cas où vous voulez centrer une image, par exemple.
C’est le cas de la Mosaïque dans l’exemple du site d’Eva. Peu importe la dimension de la
fenêtre, la mosaïque se trouve toujours au centre de la page (dans la mesure où la page
est plus grande que l’image comme telle).
Comme pour la Mise en Forme, un tableau peut être invisible. Il suffit d’entrer zéro (0) dans
page 4 4
Voir la section Utilisation de tableaux pour présenter du contenu > Insertion d’un tableau
(p.192).
Voici comment créer un tableau pour centrer une image (ou un texte) en plein milieu de la
page :
1.
Cliquez dans votre page vide pour y insérer le curseur.
Le projet
DREAMWEAVER 4
le champs Bordure de l’Inspecteur de propriétés (le tableau étant sélectionné).
page 4 5
DREAMWEAVER 4
Le projet
2.
Dans la palette d’Objets, cliquez sur Insérer un Tableau
3.
Dans la boîte de dialogue, entrez 1 pour le champ Lignes et 1 pour le champ
Colonnes. Cela aura pour effet de créer un tableau sans aucune division.
4.
Toujours dans la boîte de dialogue, entrez 100 dans le champ Largeur, puis
sélectionnez Pourcent dans le choix à droite du champ. Les données pixels créer
des tableau fixes. À 100 %, la largeur du tableau sera toujours la même que celle de
la fenêtre. Nous déterminerons la hauteur à partir de l’Inspecteur de propriétés.
5.
Dans le champ, Bordure entrez zéro (0). Cela à pour effet de rendre invisible le
tableau.
6.
Laissez vide les champs de Remplissage et d’Espacement de cellule.
7.
Cliquez OK.
8.
Votre tableau sélectionné, insérez 100% dans le Champ H (hauteur) de l’Inspecteur
de propriétés, puis choisissez % dans le menu déroulant du champ. Cela aura pour
effet d’étendre la tableau sur toute la hauteur de la page.
9.
Par principe, choisissez Centrer dans le menu du champ Aligner, toujours dans
l’Inspecteur.
10.
Insérez, dans votre tableau, l’élément (image ou texte) que vous désirez centrer dans
la page.
11.
L’intérieur du tableau étant ainsi sélectionné, l’Inspecteur de propriétés affichera les
propriétés de Texte et de Cellule. Choisissez Centrer pour le champ H (horizontal) et
Milieu pour le champ V (Vertical). Vous pouvez aussi cliquer dans le petit carré Entête de l’Inspecteur qui produit sensiblement le même effet.
Voilà. Si vous prévisualisez dans votre navigateur vous verrez que le contenu de votre
page est toujours au centre de la fenêtre. Il existe plusieurs autres façons de faire des
tableaux. Vous en avez un exemple dans la page d’exemple Les Tableaux du site d’Eva.
page 4 6
DREAMWEAVER 4
Annexe : Inscription à cyberquebec.com
Annexe : Inscription à cyberquebec.com
Pour avoir accès à l’espace qui vous est offert, vous devez vous inscrire. Entrez toutes les
informations nécessaires pour valider votre inscription. Par la suite on vous donnera un
nom d’usager, un mot de passe puis l’adresse Internet (l’URL) où se trouvera votre site.
On vous donnera aussi une adresse FTP (File Transfert Protocol) vous permettant de
télécharger vos fichier sur les disques du serveur qui vous héberge. C’est avec cette
adresse que vous pourrez configurer Dreamweaver.
1.
À partir de votre navigateur rendez-vous à l’adresse suivante :
wwwcyberquebe.ccom
2.
Cliquez sur Devenir citoyen!
3.
Entrez un nom d’usager. C’est aussi à partir de ce nom que votre adresse Internet
(URL) sera composée. Cliquez sur Continuer.
4.
Vous devriez lire les conditions d’engagement avant d’accepter.
5.
Entrez un votre mot de passe.
6.
Choisissez un voisinage en fonction du sujet sur lequel vous désirez faire un site
Web. Il ne semble pas possible de le changer plus tard.
7.
Donner un titre à votre site.
8.
Vous pouvez entrer une description (facultatif). Cliquez sur continuer.
9.
Entrez toutes les informations personnelles nécessaires. Cliquez sur continuer
10.
Connectez-vous en cliquant sur OK.
11.
Dans la page qui suit, cliquez sur Avancé : Logiciel de FTP
12.
Prenez en note les information nécessaires (Hôte FTP : citoyen.cyberquebec.com
(ajoutez ftp. avant l’adresse pour configurer Dreamweaver).
Vous voilà Citoyen de CyberQuébec! Il vous suffit de configurer Dreamweaver pour publier
votre page et/ou votre site!
Lorper sequis nonullummod mod diam aut alisl ing eugait wis digna facillam inci el erci tat
vel utet alis nim ing eu feuis alis acidunt adignim enissisl ut utat dunt am, vero con volore
modip et velissent wismodionse min velit la alit alit aut vulla consequi ex eriusto con erat
wisit nulput la ad diamet, quisim aut iriurer sum numsandrer auguera secte exeril ullandit
wis nullan hendion lputat adiam nonullam zzril et luptationsed ex ea aut ip et praesecte
volobore faccum quamet nulputpate tie deliquam, vel esendipsusci tat lorem iriliquissi.
Loreet la am dolortin utpat adiatum andrem ipis nit accum dolobor iniscil init, conseniatie
vulput lobore conulluptat ullute magnit do od euismolum ip elessed delisi tet, sustrud diat,
quat aut dolessismod modolore et at la faccumsan utat elessi.
page 4 7

Abrégé du logiciel Dreamweaver 4 - 1S2

Transcription

Documents pareils

CREATION SITE INTERNET

Formation Dreamweaver Initiation

Programme de formation DreamWeaver initiation

dreamweaver mx

Créez un site avec Dreamweaver (exercice)

Voir le plan d`étude de cette formation

Programme de formation Dreamweaver Initiation

Comment mieux s`organiser dans son travail

develop web

Dreamweaver - Websites12