Académique Documents
Professionnel Documents
Culture Documents
2010
Y. Mine
1
Prambule
1 Introduction
2 Elments fondamentaux de Dreamweaver CS3
2.1 les menus
2.2 la fentre document
lespace de travail
les rgles
la grille
les ascenseurs
la barre dtat
le menu prfrences
2.3 le menu contextuel
2.4 la palette des objets
2.5 linspecteur des proprits
2.6 linspecteur HTML
3 Environnement de travail
3.1 la carte du site
4 Cration dun site
4.1 construction dune page
4.1.1 larrire-plan
4.1.2 les liens
4.1.3 lencodage
4.1.4 les polices de caractres
4.1.5 les couleurs
4.1.6 les styles
4.1.7 les alignements
4.1.8 les retraits
4.1.9 les listes
4.1.10 les images
4.2 les liens
4.3 enregistrement des documents
4.3.1 prvisualisation
4.4. la gestion des sites
5 Options graphiques
5.1 les images survoles
5.2 les cartes graphiques
5.3 laffichage des pages
5.4 insertion de tableaux
5.5 les donnes tabulaires
5.6 les formulaires
5.6.1 champ de texte ligne unique
5.6.2 champ de texte multi-lignes
5.6.3 champ masqu
5.6.4 case cocher
5.6.5 bouton radio
5.6.6 menu contextuel
5.6.7 boutons denvoi
6 Les feuilles de style
7 Laide en ligne
8 Les comportements
9 Conception de frames dans Dreamweaver
2
Avant de commencer raliser les pages
Crer un site Web caractre professionnel est un geste technique final, qui doit tre prcd
dune rflexion et dune prparation minutieuse du travail raliser.
Marche suivre :
1/ Prparation
En fonction de ces 3 points : dlimitation de la matire premire qui sera exploite pour le site.
Crations personnelles
Les liens sont toujours (ou presque) verticaux. Le besoin de liens horizontaux implique trs
souvent une mauvaise dcoupe de linformation.
3
Nommer les fichiers (html, jpeg, gif,) de manire vocatrice et rationnelle : p ;ex ; en franais,
maximum 8 caractres, pas de caractre accentu ni de caractre spcial ( ), pas
de majuscule.
4/ Quand le schma rencontre les objectifs, on peut commencer crer les pages html selon les
critres dfinis plus haut.
Crer une directory dans laquelle seront placs tous les fichiers relatifs au site
Crer toutes les pages, les nommer et les sauver
Y insrer tous les hyperliens
Vrifier le bon fonctionnement de ce squelette
Garnir les pages avec linformation voulue : texte, photos, dessins, animations
diverses,
Tester le site sur les diffrents navigateurs et en diffrentes rsolutions
Attention :
Les tapes 1 3 doivent faire lobjet dun document papier, qui sera la base de
travail ainsi que le story book du site. Ce nest que quand il sera termin,
corrig et approuv que la conception des fichiers pourra commencer.
Ils sont destins embellir les pages et y attirer lattention. Ils ne doivent pas nuire leur
lisibilit ni aux temps de chargement. En consquence, utilisez-les seulement quand ils
apportent un rel plus aux pages et pas dans le seul but de garnir. Cest le fond de votre site
et lui seul qui fera revenir les visiteurs.
Il faut proscrire la copie de textes, photos et autres objets graphiques sauf si ils sont
expressment dclars libres de droits ou si vous disposez de lautorisation pour le faire. En
bref, pas de copier-coller sauvage.
Lidal est de raliser soi-mme les photos et objets graphiques que lon met en ligne et dcrire
le texte. Dans le cas dun site command, le contenu pourra tre celui apport par le client. Il ne
pourra servir alors que pour ce seul travail.
4
1 - Introduction
Dreamweaver est un diteur HTML: Hyper Text Markup Language en mode WySIWyG (What
you see is what you get); qui permet de raliser des pages web (html) et qui donne directement
une ide de ce que sera la page, mais qui impose la visualisation du rsultat dans un navigateur
(via la touche F12).
Il permet en outre de grer un site et de le mettre sur le rseau, mme si il existe des outils plus
appropris cet effet.
Un site est un ensemble de fichiers html, dobjets graphiques (jpeg, gif, png), de fichiers divers,
de codes javaScript, dApplets Java, lis entre eux par des liens hypertexte.
Le fichier correspondant la page de dpart (ou page daccueil (home page)) sera nomm par
convention index.htm (ou html). Cette pratique permet de simplifier ladresse du site : taper
http://www.yes.com/index.htm ou http://www.yes.com/ fera charger automatiquement cette
mme page index.htm dans le navigateur.
Trs important,
en HTML, on na jamais la matrise totale de ses documents
Certains sites affichent un avertissement qui informe le visiteur quil a t optimis pour lun ou
lautre de ces programmes. Vu que nous allons dvelopper des pages pour tout le monde et pas
seulement pour les utilisateurs dun programme spcifique, on veillera toujours crer des
pages galement lisibles par ces 3 principaux browsers et les tester soigneusement dans les
diffrents environnements et sur diffrentes versions.
5
2 - Elments fondamentaux de Dreamweaver
Les menus
La fentre document
Le menu contextuel
La palette des objets
Linspecteur des proprits
Linspecteur HTML
Comme tout logiciel, Dreamweaver comporte une srie de menus, classiques (Fichier, Edition,
Affichage, ), ou propres la conception web.
6
7
8
9
10
2. 2 La fentre document
Il sagit de lespace de travail principal du logiciel. Cest dans cet espace que sinsrent les
diffrents lments en mode WISIWIG.
Lespace de travail
Les rgles
La grille
Les ascenseurs
La barre dtat
Les prfrences
Lespace de travail (en blanc sur lexemple ci-dessous) est le seul lment de la fentre
document qui sera visible dans un navigateur
11
Les 3 boutons code , fractionner et cration (cercls de rouge) permettent de choisir
laffichage html, combin (comme sur cet exemple) ou wysiwyg. Combin signifie que lon a
sous les yeux les 2 versions de la page, celle wysiwyg et celle en code html. Le volet qui les
spare est mobile.
12
Les rgles
Les paramtres en sont spcifis via les sous-commandes de Affichage : Rgles . Afficher
permet de rendre les rgles visibles.
Rtablir origine permet de replacer lorigine des rgles (0,0) dans le coin suprieur gauche de la
page.
Pixel, Pouce et Centimtre permettent de dfinir lunit employe par les rgles. La plupart du
temps, les rgles sont chelonnes en pixel qui est lunit de base du web.
Les rgles sont affiches sur notre exemple.
La grille
La liste dimension de fentre : elle permet de donner une dimension prcise lespace de
travail de la fentre document afin de simuler laffichage sur diffrents crans. Il est possible
de prciser dautres dimensions que celles pr-installes dans la liste via la commande
Modifier les tailles de cette mme liste qui ouvre la barre dtat des prfrences du logiciel.
13
Le menu prfrences
14
2.4 La palette des objets
Elle regroupe la majorit des lments insrer, groups par catgorie sous 7 onglets.
Commun qui gre les objets de base (insrer tableau, photo, roll-over, ligne,)
Mise en forme des tableaux, cadres et div
Formulaire qui gre les lments de formulaires
Donnes, qui gre les relations avec les bases de donnes
Spry voir lencadr ci-dessous
Texte, qui gre la mise en forme des textes
Favoris rubrique garnir soi-mme selon ses besoins et ses habitudes de travail
15
Remarque : pour appliquer un effet un lment, il doit tre slectionn ou
possder un ID. Si, par exemple, vous surlignez une balise div qui n'est pas
slectionne, elle doit possder une valeur ID valide. Si ce n'est pas encore
le cas, vous devez en ajouter un au code HTML.
Les effets peuvent modifier les proprits d'opacit, d'chelle, de position et
de style d'un lment, comme sa couleur d'arrire-plan. Vous pouvez crer
d'intressants effets visuels en combinant plusieurs proprits.
Ces effets sont bass sur Spry. Ds lors, lorsqu'un utilisateur clique sur un
objet possdant un effet, seul l'objet est mis jour de manire dynamique.
La page HTML n'est pas entirement actualise.
Store mont/Store baiss Simule l'effet d'un store qui monte ou descend
pour afficher ou masquer l'lment.
Cet outil, qui se trouve au bas de lespace de travail, donne accs aux proprits de lobjet
slectionn dans lespace de travail. Le contenu de la palette varie donc en fonction de lobjet
slectionn.
Cas du texte
16
Cas dune image
Cest dans cette barre que vous devez raliser les diffrents rglages apporter aux lments
slectionns :
Texte : gras, italique, alignement, taille et police de caractres, couleur, retraits, puces
Tableau : paisseur de bordure, couleurs ou motifs des fonds et des cadres, alignement,
taille, units, composition
Objets graphiques : dimensions, alignement
Liens : cible
17
2.6 Linspecteur HTML
Affich via la commande Fentre : Inspecteur de code ou la touche F10, cette fentre montre le
code source de la page en cours.
Dreamweaver tant une interface graphique transformant des objets en code HTML, toute
modification de la page entrane une modification du code. Inversement, toute modification du
code HTML entrane, condition que ce code soit conforme, une modification dans la fentre
document.
Laffinage dune page passant obligatoirement par la lecture et la correction du code, il est
indispensable douvrir frquemment cette fentre afin de vrifier le code source. Il faut connatre
un minimum le langage html pour arriver un bon rsultat
Afin de faciliter la lecture du code, la catgorie Coloration du code des Prfrences permet
de colorer les balises, ainsi que le contenu des balises. Il est intressant de regrouper toutes les
balises dun mme objet sous une couleur unique. Par exemple, les balises <table>, <th>, <tr>,
et <td> tant colores en rouge, cest lensemble du code des tableaux qui serait affich en
rouge.
18
3 Environnement de travail
Carte du site : ouvre la palette de gestion du site pour faciliter la gestion des liens.
Vous pouvez afficher un fichier local pour un site Dreamweaver sous la forme d'une carte
d'arborescence contenant des icnes lies et que l'on appelle carte de site. Utilisez cette carte
pour ajouter de nouveaux fichiers un site Dreamweaver ou pour ajouter, modifier ou supprimer
des liens.
La carte du site prsente la structure du site sur deux niveaux en partant de la page d'accueil.
Les pages sont prsentes sous la forme d'icnes et les liens sont affichs dans l'ordre o ils
apparaissent dans le code source.
Vous devez dfinir la page d'accueil du site avant de pouvoir en afficher la carte. La page
d'accueil du site est le point de dpart de la carte ; il peut s'agir de n'importe quelle page de
votre site. Vous pouvez changer de page d'accueil, indiquer le nombre de colonnes afficher,
prciser si les tiquettes des icnes doivent afficher le nom du fichier ou le titre de la page et
indiquer si les fichiers dpendants et masqus doivent tre affichs. (Un fichier dpendant est
une image ou tout autre lment de contenu non HTML que le navigateur charge en mme
temps que la page principale.)
Lorsque vous travaillez dans la carte d'un site, vous pouvez slectionner des pages, ouvrir une
page pour la modifier, ajouter des pages au site, crer des liens entre les fichiers et modifier le
titre des pages.
La carte du site est idale pour agencer la structure d'un site. Vous pouvez dfinir rapidement la
structure d'ensemble du site, puis crer une image graphique de la carte du site.
Remarque : l'option de carte du site n'est disponible que pour les sites locaux. Pour crer la
carte d'un site distant, copiez le contenu de ce site dans un dossier de votre disque local, puis
utilisez la commande Grer les sites pour dfinir le site en tant que site local.
Dans le panneau Fichiers (Fentre > Fichiers), effectuez l'une des oprations suivantes :
Dans le panneau Fichiers affich sous sa forme rduite, slectionnez Affichage de la
carte dans le menu Vue du site.
Dans le panneau Fichiers affich sous sa forme dveloppe, cliquez sur le bouton Carte
du site dans la barre d'outils, puis slectionnez Carte seulement (la carte du site sans la
structure des fichiers locaux) ou Carte et fichiers (la carte du site avec cette structure).
19
Remarque : Si aucune page d'accueil n'a t dfinie
ou si Dreamweaver ne trouve pas de page intitule
index.html ou index.htm dans le site actuel (qu'il
utilise alors comme page d'accueil), Dreamweaver
vous invite slectionner une page d'accueil.
20
4 Cration dun site
La bonne utilisation de Dreamweaver suppose quon lui indique demble les caractristiques de
base du site en cours de construction. Cette procdure ne sert quau programme lui-mme. Cela
lui permet de contrler plus facilement la cohrence des liens entre les lments et de grer la
synchronisation des fichiers se trouvant sur la machine locale avec ceux du site du serveur.
La dfinition du site sobtient via le menu site en optant pour loption nouveau site .
21
Remplissez obligatoirement les deux premiers champs nom du site et dossier racine local
. Les autres champs ne sont ncessaires que si vous comptez utiliser Dreamweaver pour
placer en ligne votre site. Des programmes de FTP pur sont mieux indiqus cet effet.
Il ne faut pas confondre le titre donn la page avec le nom de fichier sous lequel vous allez la
sauver. Le titre sera le nom convivial qui apparatra dans la barre suprieure du navigateur lors
de la visualisation de la page. Exemple :
22
Par contre, cest le nom de fichier prsent physiquement sur le disque dur qui sera utilis pour
tablir les liens.
Le titre de la page peut tre modifi en allant dans le menu Modifier et en choisissant loption
Proprits de la page . Dans cette fentre, vous pouvez modifier dautres paramtres que le
titre de la page : image darrire plan, couleur darrire plan, couleur du texte, couleur du lien,
marges,
Il est galement possible de modifier le titre de la page directement dans le code, entre les
balises <title> : <title>titre de la page</title>
4.1.1 Arrire-plan
Pour le fond de la page, vous pouvez choisir soit une image de fond, soit une couleur de fond.
Pour les images darrire-plan, on utilise gnralement une petite image au format gif
reprsentant un motif. Celui-ci se rpte automatiquement pour former un fond de page.
23
Il faut tout prix viter dinsrer directement une image trop grande car cela alourdirait la page
et en allongerait considrablement le temps de chargement. De plus, elle ne sadapterait pas
bien la mise en page suivant les rsolutions utilises par les visiteurs. En outre, veillez
choisir judicieusement votre motif de fond pour ne pas gner la lisibilit du texte de la page.
La couleur darrire-plan offre comme avantage par rapport limage darrire-plan de ne pas
ralentir le chargement de la page. Par contre, on ne dispose que de fonds de couleurs
uniformes. Ne ngligez pas les fonds blancs (sans image ni couleur) qui, dans certain cas,
prsentent une solution particulirement nette.
4.1.2 Liens
La couleur des liens peut aussi tre redfinie. Par dfaut, les liens saffichent en gris. Quand il
sagit de texte, le bloc est soulign quels que soient ses attributs de dpart.
Quand on utilise une image, elle est entoure dun cadre bleu. Une fois que le lien a dj t
utilis, il apparat dans une couleur bordeaux. Il est conseill de changer ces couleurs si on
risque un problme de lisibilit d lutilisation dun fond color ou dune image de fond ou
selon les rgles de la charte graphique.
24
4.1.3 Encodage
Lencodage du texte seffectue comme dans un logiciel de traitement de texte avec la plupart
des facilits classiques :
Les touches de dbut et fin de page, dbut et fin dcran fonctionnent galement.
Le texte entr est balis par <p></p>. Chaque retour ou pression sur la touche Enter cre
une nouvelle paire de balises qui dfinit une nouvelle ligne. Seule la touche de tabulation nest
pas quivalente celle des traitements de texte. Lalignement de texte ne seffectuant pas par
des tabulations, mais par tableau, liste ou retrait.
On ne peut insrer quun seul caractre blanc de sparation (space bar) entre deux lettres ou
mots.
25
Le dplacement de texte ou dobjet graphique est possible par cliquer-glisser.
Le choix de la police de caractre doit se faire de manire judicieuse : comme le texte peut tre
visualis par de visiteurs nayant pas ncessairement la mme plate-forme que celle qui a servi
au dveloppement de la page, ni les mme polices de caractres, Dreamweaver propose en
standard un jeu de fonts (groupes par quivalence daspect) et qui sont normalement prsent
doffice sur tous les systmes.
Le choix de la police par dfaut se fait en ouvrant la palette des Proprits, onglet aspect.
Si vous dsirez utiliser des polices de caractres diffrentes ou plus grandes, vous devez les
diter dans un logiciel graphique et en faire un gif que vous positionnerez lendroit adquat.
Ainsi, il sera lu de manire gale par tous les browsers.
4.1.5 Couleur
La couleur globale du texte est gre par les proprits de la page mais peut tre modifie
localement par la commande Texte : Couleur qui ouvre le nuancier ou encore par linspecteur
des proprits.
4.1.6 Styles
26
4.1.7 Alignements
Le retrait de texte ne seffectue pas laide de taquets de tabulations comme dans les logiciels
de traitement de texte ou de mise en page. Seuls les retraits ou les tableaux permettent
daligner le texte une distance donne de la marge gauche.
4.1.8 Retraits
La cration de retraits se fait via linspecteur des proprits, les commandes Retrait et
Retrait ngatif du menu Texte , ou encore les commandes Liste : Retrait et Liste :
Retrait ngatif du menu contextuel.
Les icnes le permettent galement dans linspecteur de proprits, quand du texte est
slectionn.
4.1.9 Listes
Pour crer une liste ou une numration, il suffit deffectuer lune des commandes suivantes :
La commande Texte : Liste , un choix est effectuer parmi les diffrentes listes
proposes, la commande Proprit de la liste permet daffiner ce choix ;
Les icnes de la Liste simple et Liste numrote de linspecteur des proprits, le
bouton Elments de liste donne accs aux proprits de la liste
La commande Liste du menu contextuel.
Tout texte converti en liste garde ses attributs de corps, couleur, et est imbriqu dans la paire
de balises <ul></ul> pour les listes non-ordonnes, et <ol></ol> pour les listes ordonnes.
Les listes non-ordonnes sont des listes prcdes dun rond (puce), dun cercle ou dun carr,
tandis que les listes ordonnes dbutent par un chiffre ou une lettre.
4.1.10 Images
Pour mettre des images sur le web, on utilise exclusivement les formats, JPEG, GIF et PNG.
Le JPEG sera rserv aux photos et aux images exigeant un grand nombre de couleurs.
Le GIF (maximum 216 couleurs) sera rserv aux images prsentant de nombreux aplats
(grandes zones dune seule couleur) tels que les logos. Le GIF permet aussi de crer des
animations (gifs anims) et des images dont une couleur est dtermine comme transparente.
Le Portable Network Graphics (PNG) est un format ouvert dimages numriques, qui a t cr
pour remplacer le format GIF, lpoque propritaire et dont la compression tait soumise un
27
brevet. Le PNG est un format non destructeur spcialement adapt pour publier des images
simples comprenant des aplats de couleurs.
28
Bien quil soit possible de modifier dans Dreamweaver la taille daffichage dune image, cest
dconseiller car cela oblige en pratique le navigateur de votre visiteur recalculer chaque fois
la taille daffichage partir de la taille relle de limage en question.
Cela a pour rsultat de dgrader limage et risque dallonger le temps de chargement. Il convient
de raliser pour chaque image une version directement la taille souhaite et de les utiliser
pour garnir les pages. Il est aussi possible dy ajouter un lien vers limage en taille relle.
Dans tous les cas, le dpart du lien peut tre du texte, une image ou une partie dimage.
Pour crer un lien, il faut dabord crer la cible, puis dans la page de dpart, slectionner le bloc
de texte ou limage et aller dans la fentre des Proprits et crer le lien.
pour lier une autre page de votre site, soit vous utilisez licne Dossier pour parcourir les
rpertoires et choisir le fichier adquat, soit vous utilisez le pointeur pour slectionner votre
fichier dans la carte du site.
pour lier une page extrieure votre site, il faut encoder lURL (http://www.fundp.ac.be) dans
la case du lien dans la fentre des Proprits.
pour un lien vers une ancre de la page elle-mme, il faut dabord crer lancre en allant
lendroit cible puis dans le menu Insertion , choisir loption Ancre nomme . On peut
aussi utiliser la palette des Objets o dans le menu Commun on retrouve licne de
lancre. On retourne ensuite lendroit o doit se faire le lien et dans la case lien de la
palette des Proprits , on tape # suivi du nom de lancre (sans espace).
Lutilisation dancres est utile dans deux cas : pour dvelopper un menu et pour proposer un
retour direct au-dessus dune page trs longue (nb : il faut, dans la mesure du possible, viter
les pages trs longues et leur privilgier un ensemble de pages courtes lies entre elles).
pour lancer un contact email, slectionner le texte, puis dans la palette de Proprits, dans
la case lien, taper mailto : suivi de votre adresse email (sans blanc). Vous pouvez
galement utiliser la palette des Objets, o dans le menu Commun se trouve licne
Lien de messagerie .
29
pour permettre le tlchargement dun fichier, il faut procder de la mme manire que pour
un lien vers une page de votre site et choisir le fichier (non-HTML).
Lors de ltablissement dun lien vers une autre page html, il faut galement veiller indiquer
dans longlet Cible lendroit ou la nouvelle page doit souvrir (parent = mme cran, blank
= nouvelle fentre)
La commande Fichier :Enregistrer comme modle permet denregistrer une page en tant
que modle, autrement dit, toutes les pages ouvertes daprs ce modle partageront les mmes
proprits de la page (couleur darrire-plan, marges, ).
4.3.1 Prvisualisation
Bien que les documents Dreamweaver donnent une bonne ide de ce que donnera la page
affiche, il y a cependant de grandes diffrences qui peuvent apparatre selon le navigateur
utilis ainsi que la version de ces navigateurs et il est ncessaire dy visualiser les pages avant
de les utiliser.
Il est possible denregistrer sa page, de lancer le navigateur et de ly ouvrir, mais ceci reprsente
une perte de temps considrable.
Pour cette raison, Dreamweaver a introduit une fonction de Prvisualisation qui ouvrira
automatiquement la page dans le navigateur dsir. Il est possible de prciser un navigateur
principal et des navigateurs secondaires. Pour pouvoir utiliser cette fonction, il est indispensable
de prciser au logiciel o se trouvent les navigateurs laide de la sous-commande Edition :
Prfrences : Aperu dans le navigateur. Les boutons + et servent ajouter ou supprimer
des navigateurs qui peuvent tre dfinis comme principal (F12) ou secondaire (CTRL-F12)
grce aux cases cocher.
30
4.4 Gestion des sites
Parmi les problmes qui perturbent les liens, on trouve trs souvent celui de la casse
(minuscules/majuscules). Il faut savoir que sous Windows ou sous Macintosh, le systme ne
verra pas de diffrences entre un fichier nomm Toto.htm ou TOTO.htm ou encore TOTO.HTM.
Sur le rseau, on a plus souvent affaire au systme dexploitation Unix et ce dernier fait lui la
distinction entre majuscules et minuscules. Pour lui, il sagira de trois fichiers distincts. Ainsi, si
dans le code HTML de ma page, je fais un lien vers monfichier.html et que le fichier est nomm
rellement monfichier.HTML, tout sera OK sur ma machine locale mais sur le rseau, le lien
sera dclar inexistant.
Cest particulirement courant avec les images, leur extension tant trs souvent rcrite en
majuscules lorsquon les retouche dans un programme de dessin.
31
5 les options graphiques
Lorsquune image est survole par le pointeur, une autre image apparat (roll-over). Cest le cas
des boutons qui donnent limpression dtre
en relief, puis en creux lorsquon clique
dessus, la nuance prs que la raction se
droule lors du passage de la souris et non
pas du clic. La seconde image peut tre
porteuse dun lien (pas la premire).
Nom de limage permet de prciser un nom lobjet image survol, par dfaut, elle portera le
nom imagex, x tant le nombre actuel dimages insrs dans la page depuis son ouverture.
Image survole permet de prciser le chemin et le nom de fichier de limage qui remplacera
limage originale lors du survol.
32
Le texte secondaire sera la lgende du roll-over il nest pas obligatoire.
Si clique, aller lURL permet de prciser la destination du lien. Il est toutefois possible de
la prciser par la suite via la zone dentre lien de linspecteur des proprits de limage
survole slectionne.
N.B. Il est important que les deux images aient les mmes dimensions.
Une carte graphique ou image map est une image qui possde un ou des liens attribus
nonepas lensemble de limage, mais des zones trs prcises, choisies en fonction de la
nature de limage.
Les zones sensibles sont attribues laide des trois Outils zones ractives prsent gauche
de linspecteur des proprits de limage slectionne.
Ils permettent de dfinir des zones rectangulaires, rondes ou polygonales libres. Les zones
ractives sont marques par des formes bleues translucides superposes limage, elles
possdent des points dancrage et leur contour est invariablement noir.
Le nom de la carte, les noms et les liens des zones ractives ainsi quun nom alternatif se
dfinissent respectivement dans la zone dentre Carte , Liens et Sec. de linspecteur
des proprits de la zone ractive slectionne.
Par dfaut, la couleur dun texte portant un lien est bleu et soulign. Lorsquon clique sur un lien,
il devient noir par dfaut et violet une fois visit. Il est possible de modifier les couleurs
daffichage des liens via la fentre des proprits de la page ( Modifier : Proprits de la page
).
33
La zone Couleur du lien permet de dfinir la couleur du lien avant toute visite. La zone Lien
actif permet de dterminer la couleur du lien lors du clic et la zone Lien visit dtermine la
couleur du lien mmoris.
Si lon ne dsire pas obtenir une couleur diffrente lors du clic ou aprs une visite, il suffit
dencoder les mmes valeurs de couleurs dans chaque zone dentre. De fait, si aucune couleur
nest entre, les valeurs seront celles par dfaut. Les couleurs tant dtermines par les
attributs de <body> : link, vlink, alink, elles sont invariables pour lentiret de la page.
Par dfaut, tout lien, quil soit bas sur un texte, une image ou un lment extrieur (Shockwave
Flash, ) ouvre son fichier de destination dans la fentre en cours. Il est possible de modifier la
fentre cible des liens grce aux attributs _blank , _self , _parent et _top . ces
attributs se dfinissent via la liste Cible accompagnant la zone dentre Lien . Notez que
cette zone est inactive tant quaucun lment, texte, ou image na t slectionn.
34
dans laquelle on dtermine le nombre de lignes, de colonnes, le type de bordure (0= pas de
bordure), lespace entre les cellules, .
La case Marge intrieure des cellules dtermine lespace entre le contenu et le bord du
cadre.
La case Espacement des cellules permet de prciser la quantit despace entre deux
cellules.
Il existe deux moyens dajouter des lignes et des colonnes un tableau. Le premier ajoute les
lignes en haut de la ligne active et les colonnes gauche de la colonne active, le second ajoute
les lignes et les colonnes respectivement en bas et droite de celles qui sont actives. La
mthode dajout est choisir en fonction du besoin.
Lajout de ligne au-dessus et de colonne gauche de llment actif est possible via la
commande Insertion , objet du tableau : Insrer (une ligne/colonne), par le menu contextuel
obtenu par clic droit (Windows) ou CTRL-clic (Mac) sur le tableau. On peut aussi ajouter une
ligne en dessous du tableau en positionnant le pointeur dans la cellule du bas droite et en
pressant la touche tabulation.
La suppression de lignes et de colonnes est possible via les commandes Tableau : Supprimer
(ligne/colonne) du menu contextuel ou en les slectionnant et en activant la commande clavier
delete .
Si les donnes qui devront tre mises en page dans un tableau sont dj encodes dans un
logiciel de traitement de texte ou un tableur, il est inutile de les encoder nouveau, on peut
importer des donnes tabulaires via le menu Insertion , objets du tableau , importer les
donnes tabulaires . Lors du placement de donnes tabulaires importes, la bote de dialogue
Insrer des donnes tabulaires souvre et permet le paramtrage de limport :
35
Fichier de donnes permet de localiser le fichier source, ventuellement laide du
bouton Parcourir ;
Dlimiteur permet de choisir le sparateur de donnes entre tabulation, virgule, point-
virgule, deux points ou un autre sparateur prciser ;
Adapter au contenu permet dadapter la largeur des colonnes et donc du tableau au
contenu du fichier import ;
Marge intrieure des cellules permet de prciser le remplissage des cellules ;
Espacement des cellules permet de prciser la distance sparant deux cellules ;
Formatage ligne suprieure permet de prciser les attributs gras, italique ou gras italique
de la premire ligne du tableau ;
Bordure permet de prciser lpaisseur en pixel de la bordure du tableau.
5.6 Formulaires
Les formulaires servent crer un cran contenant des champs que les visiteurs des pages
peuvent garnir avec leurs donnes et envoyer ensuite via une liaison avec une base de donnes
rsidente sur un serveur (pas ncessairement celui o les pages se trouvent)
Tout formulaire, du plus simple au plus complexe, passe obligatoirement par linsertion dun
objet-formulaire au sein de la page. Cet objet nest quun conteneur, il ne possde aucune
ralit visible lors de laffichage dans le navigateur.
36
Linsertion dun objet-formulaire seffectue via le menu Insertion avec loption Formulaire .
N.B. Contrairement aux tableaux, il est impossible dimbriquer des formulaires ou den modifier
la taille (ils sagrandissent en fonction de leur contenu).
Les lments du formulaire (boutons, champ de texte, liste, menu,...) doivent ensuite tre
insrs dans lespace dlimit par lInsertion du formulaire . Soit ils sont introduits laide de
la palette des Objets , soit ils sont introduits partir du menu Insertion avec loption
Objet de formulaire . Les diffrents lments pouvant tre insrs dans un formulaire et leurs
icnes respectives sont :
Dreamweaver regroupe trois ralits sous un mme objet nomm Insrer un champ de
texte
Les paramtres dun champ de texte ligne unique , rglables dans linspecteur des proprits
du champ de texte slectionn, sont :
37
Son nom, encod dans la zone dentre Champ de texte
La largeur du champ en nombre de caractres introductibles dans le champ, encode dans
la zone d entre Nbre caract. max.
Le texte prsent dans le champ ds son affichage, encod dans la zone dentre Val. Init.
Les paramtres dun champ de texte multi-lignes , rglables dans linspecteur des proprits
du champ de texte slectionn, sont :
Les paramtres dun champ masqu, rglables dans linspecteur des proprits du champ de
texte slectionn, sont :
38
Son sens, encod dans la zone dentre Valeur
Les champs masqus permettent de conserver et transmettre des informations qui ne sont pas
saisies par lutilisateur. Ces informations sont masques afin que l'utilisateur ne puisse pas les
voir.
Remarque : cette amlioration nest disponible que si vous pouvez accder un ordinateur
excutant ColdFusion MX 7 ou une version ultrieure
La case cocher est llment qui permet lusager de choisir une ou plusieurs occurrences
dans une liste.
Son tat
Sa valeur
Son tat initial, savoir : actif (coch) ou inactif (dcoch)
Sa classe
Son nom
Sa valeur
Son tat initial (actif ou inactif)
Sa classe
39
5.6.6 Menu contextuel
Un menu contextuel est un champ de texte possdant une petite flche ouvrant une liste
lorsquon clique dessus.
Les paramtres dun menu, rglables dans linspecteur des proprits du champ menu
slectionn, sont :
Son nom
Son type
Les lments contenus (valeur de la liste)
Llment initialement slectionn (attribut selected)
Sa classe
N.B. Aprs avoir cliqu sur le bouton Valeur de la liste , lajout et la suppression dlments
de la liste seffectuent laide des boutons + et -. La modification seffectue en cliquant
nouveau sur Valeur de la liste .
Les lments finaux dun formulaire sont les boutons qui permettent lusager de valider et
denvoyer ou non son formulaire.
40
Les paramtres dun bouton, rglables dans linspecteur des proprits du champ bouton
slectionn, sont :
Un style est un groupe d'attributs de mise en forme qui contrlent l'apparence d'un texte dans un
document. Une feuille de style CSS peut tre utilise pour contrler la mise en forme de
plusieurs documents en mme temps, et elle peut inclure tous les styles d'un document.
L'avantage d'une feuille de style CSS sur un style HTML est double : la feuille de style CSS peut
affecter plusieurs documents la fois et, lorsqu'elle est modifie, la mise en forme de tous les
documents qui y font appel est automatiquement modifie en consquence.
Les styles CSS sont identifis par des noms ou par des balises HTML, ce qui vous permet de
modifier l'un des attributs d'un style et de voir tout le texte auquel ce style est appliqu reflter
instantanment ce changement.
Dans les documents HTML, les styles CSS peuvent contrler la plupart des attributs de mise en
forme traditionnels, par exemple la police, la taille et l'alignement. Mais les styles CSS
permettent aussi de spcifier des attributs HTML uniques, dont le positionnement, des effets
spciaux et la raction un survol de la souris.
Ouvrir le menu Fentre option Styles CSS . Clic droit sur aucun style dfini et
choisir nouveau . Vous avez alors la fentre suivante :
Cliquer bouton droit sur aucun et choisir nouveau style dans le menu contextuel
41
Sauver la css lendroit appropri
Encoder les choix voulus dans les diffrents menus faire appliquer
Dans le head de la ou des pages html qui doivent exploiter la css, crire :
42
7 laide en ligne
Une pression sur la touche F1 ouvre laide en ligne de Dreamweaver. On y trouve la rponse
la plupart des questions qui peuvent se poser. Nhsitez pas la consulter en cas de besoin.
La fonction de recherche ainsi que lindex permettent de spcifier les questions.
43
8 Les comportements
La fentre des comportements saffiche via la cl Maj-F4. Son intrt principal rside dans la
possibilit dajouter facilement des vnements dans le code de la page. Cet ajout se ralise en
cliquant le bouton + et en choisissant loption dsire dans la liste.
Ouvrir la fentre navigateur permet douvrir une nouvelle fentre, nantie des paramtres
souhaits et pointant vers une adresse au choix.
44
Prcharger les images indique au browser quil doit commencer immdiatement charger
les images indiques (par exemple, celles se trouvant sur la page logiquement suivante),
ceci afin de rduire le temps de chargement quand le lien sera vraiment actionn.
45
9 Conception de frames dans Dreamweaver
46
Chaque frame porte un nom.
Sauver immdiatement les fichiers via la commande fichier enregistrer tout : pour une
dcoupe en 3 frames, on sauvera 4 fichiers html ; 3 nomms frame_nom et 1 nomm librement
qui est le frameset. Veillez nommer les 3 fichiers frame en fonction de la position quils
occupent rellement sur la page. Dans lhypothse dune dcoupe comme ci-dessus, il y a un
frame_top ou top_frame , un right ( droite) et un main (le plus grand).
Nous allons faire un menu dans le right_frame. Son but est dafficher des pages dans
MAIN_FRAME. Aprs avoir li un fichier sur litem menu du menu (ici, index2), il faut
galement rgler lendroit o il va apparatre.
47
Dans notre hypothse, nous allons choisir mainframe dans le menu cible . Quand litem
du menu sera activ, index2.php saffichera dans le mainframe.
Quand vous construisez les pages destines garnir les frames top et left, tenez compte du peu
de place disponible pour laffichage. Il faut essayer de se passer dascenseur.
La fentre cadre (maj F2) permet de nommer les cadres (fentre Cadre ). Cette opration
est ncessaire pour pouvoir adresser laffichage dune page dans le frame voulu.
48