Cration de pages Web avec Dreamweaver 3

FELSI
2010
Conception de pages Web avec Dreamweaver CS3
Y. Mine
1
Préambule
1 Introduction
2 Eléments fondamentaux de Dreamweaver CS3
2.1 les menus
2.2 la fenêtre document
l’espace de travail
les règles
la grille
les ascenseurs
la barre d’état
le menu préférences
2.3 le menu contextuel
2.4 la palette des objets
2.5 l’inspecteur des propriétés
2.6 l’inspecteur HTML
3 Environnement de travail
3.1 la carte du site
4 Création d’un site
4.1 construction d’une page
4.1.1 l’arrière-plan
4.1.2 les liens
4.1.3 l’encodage
4.1.4 les polices de caractères
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 prévisualisation
4.4. la gestion des sites
5 Options graphiques
5.1 les images survolées
5.2 les cartes graphiques
5.3 l’affichage des pages
5.4 insertion de tableaux
5.5 les données 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 d’envoi
6 Les feuilles de style
7 L’aide en ligne
8 Les comportements
9 Conception de frames dans Dreamweaver
2
Avant de commencer à réaliser les pages …
Créer un site Web à caractère professionnel est un geste technique final, qui doit être précédé
d’une réflexion et d’une préparation minutieuse du travail à réaliser.
Marche à suivre :
1/ Préparation
•
Choisir un thème à développer – ou – répondre à une demande
•
Définir avec exactitude les objectifs poursuivis (promotion commerciale, présence
sur la toile, présentation d’un hobby,…)
•
Déterminer le public cible : adulte, adolescent, enfants, …
En fonction de ces 3 points : délimitation de la matière première qui sera exploitée pour le site.
2/ Réunir la matière première
•
documentation écrite (livres, revues,…) et virtuelle (fichiers)
•
illustrations (photos, dessins, graphiques,…)
•
Créations personnelles
3/ En fonction du volume et du contenu de la documentation rassemblée, faire la découpe en
pages et en niveaux.
•
•
•
•
Chaque page signifie un fichier html, les niveaux représentant la hiérarchie
d’organisation de l’information.
Le niveau 1, qui est représenté par la page d’accueil, est le plus général, tandis que les
niveaux 2 et 3 vont donner accès à de l’information de plus en plus détaillée.
Dessiner les pages en indiquant les liens prévus. (exemple)
Attribuer un nom significatif à chaque fichier html
Niveau 1 : accueil
Accueil
B
A
A1
A2
A3
B1
Niveau 2 : premier niveau de détail
C
B2
C1
C2
C3
Niveau 3 : deuxième niveau de détail
Les liens sont toujours (ou presque) verticaux. Le besoin de liens horizontaux implique très
souvent une mauvaise découpe de l’information.
3
Nommer les fichiers (html, jpeg, gif,…) de manière évocatrice et rationnelle : p ;ex ; en français,
maximum 8 caractères, pas de caractère accentué ni de caractère spécial ( ‘ « ç é à …), pas
de majuscule.
Toujours raisonner et travailler en fonction des objectifs déterminés au préalable. Si une
modification des objectifs est nécessaire, il faut alors recommencer toute la réflexion.
4/ Quand le schéma rencontre les objectifs, on peut commencer à créer les pages html selon les
critères définis plus haut.
•
•
•
•
•
•
Créer une directory dans laquelle seront placés tous les fichiers relatifs au site
Créer toutes les pages, les nommer et les sauver
Y insérer tous les hyperliens
Vérifier le bon fonctionnement de ce « squelette »
Garnir les pages avec l’information voulue : texte, photos, dessins, animations
diverses,…
Tester le site sur les différents navigateurs et en différentes résolutions
Attention :
Les étapes 1 à 3 doivent faire l’objet d’un document papier, qui sera la base de
travail ainsi que le « story book » du site. Ce n’est que quand il sera terminé,
corrigé et approuvé que la conception des fichiers pourra commencer.
Les effets spéciaux (Flash, Java, JavaScript, ActiveX,…)
Ils sont destinés à embellir les pages et à y attirer l’attention. Ils ne doivent pas nuire à leur
lisibilité ni aux temps de chargement. En conséquence, utilisez-les seulement quand ils
apportent un réel « plus » aux pages et pas dans le seul but de garnir. C’est le fond de votre site
et lui seul qui fera revenir les visiteurs.
Propriété intellectuelle (copyright)
Il faut proscrire la copie de textes, photos et autres objets graphiques sauf si ils sont
expressément déclarés libres de droits ou si vous disposez de l’autorisation pour le faire. En
bref, pas de copier-coller sauvage.
L’idéal est de réaliser soi-même les photos et objets graphiques que l’on met en ligne et d’écrire
le texte. Dans le cas d’un 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 réaliser des pages web (html) et qui donne directement
une idée de ce que sera la page, mais qui impose la visualisation du résultat dans un navigateur
(via la touche F12).
Il permet en outre de gérer un site et de le mettre sur le réseau, même si il existe des outils plus
appropriés à cet effet.
Un site est un ensemble de fichiers html, d’objets graphiques (jpeg, gif, png), de fichiers divers,
de codes javaScript, d’Applets Java, … liés entre eux par des liens hypertexte.
Le fichier correspondant à la page de départ (ou page d’accueil (home page)) sera nommé par
convention index.htm (ou html). Cette pratique permet de simplifier l’adresse du site : taper
http://www.yes.com/index.htm ou http://www.yes.com/ fera charger automatiquement cette
même page index.htm dans le navigateur.
Très important,
en HTML, on n’a jamais la maîtrise totale de ses documents
Internet Explorer, Chrome et Netscape coexistent dans l’environnement. Des différences de
réaction et d’affichage sont systématiques suivant l’emploi de l’un ou l’autre de ces navigateurs.
Certains sites affichent un avertissement qui informe le visiteur qu’il a été optimisé pour l’un ou
l’autre de ces programmes. Vu que nous allons développer des pages pour tout le monde et pas
seulement pour les utilisateurs d’un programme spécifique, on veillera toujours à créer des
pages également lisibles par ces 3 principaux browsers et à les tester soigneusement dans les
différents environnements et sur différentes versions.
5
2 - Eléments fondamentaux de Dreamweaver
•
•
•
•
•
•
Les menus
La fenêtre document
Le menu contextuel
La palette des objets
L’inspecteur des propriétés
L’inspecteur HTML
2.1 Les menus
Comme tout logiciel, Dreamweaver comporte une série de menus, classiques (Fichier, Edition,
Affichage, …), ou propres à la conception web.
6
7
8
9
10
2. 2 La fenêtre document
Il s’agit de l’espace de travail principal du logiciel. C’est dans cet espace que s’insèrent les
différents éléments en mode WISIWIG.
Les différents composants de la fenêtre document sont :
•
•
•
•
•
•
L’espace de travail
Les règles
La grille
Les ascenseurs
La barre d’état
Les préférences
L’espace de travail (en blanc sur l’exemple ci-dessous) est le seul élément de la fenêtre
document qui sera visible dans un navigateur
11
Les 3 boutons « code », « fractionner » et « création » (cerclés de rouge) permettent de choisir
l’affichage html, combiné (comme sur cet exemple) ou wysiwyg. Combiné signifie que l’on a
sous les yeux les 2 « versions » de la page, celle wysiwyg et celle en code html. Le volet qui les
sépare est mobile.
12
Les règles
Les paramètres en sont spécifiés via les sous-commandes de « Affichage : Règles ». Afficher
permet de rendre les règles visibles.
Rétablir origine permet de replacer l’origine des règles (0,0) dans le coin supérieur gauche de la
page.
Pixel, Pouce et Centimètre permettent de définir l’unité employée par les règles. La plupart du
temps, les règles sont échelonnées en pixel qui est l’unité de base du web.
Les règles sont affichées sur notre exemple.
La grille
Les paramètres de grille sont spécifiés via
les sous-commandes de « Affichage : Grille
».
« Afficher » permet de rendre la grille visible
« Aligner sur » permet de forcer
l’alignement des calques sur la grille
« Modifier » permet de régler la grille
(espacement, couleur,…)
Les cases « Grille visible » et « Alignement
» ont respectivement le même effet que «
Affichage :Grille : Afficher » et « Affichage :Grille :Aligner sur ».
La grille n’est pas affichée sur notre exemple.
Les ascenseurs permettent la navigation verticale et horizontale à l’intérieur de la fenêtre. La
présence d’un ascenseur horizontal est à proscrire. Organisez vos pages (via des tableaux ou
des div) de manière à ce qu’ils ne soient jamais nécessaires.
La barre d’état de la fenêtre document comprend, de gauche à droite :
•
Mini-laceur : Il représente les palettes du logiciel sous forme d’icônes.
•
La liste dimension de fenêtre : elle permet de donner une dimension précise à l’espace de
travail de la fenêtre document afin de simuler l’affichage sur différents écrans. Il est possible
de préciser d’autres dimensions que celles pré-installées dans la liste via la commande «
Modifier les tailles » de cette même liste qui ouvre la barre d’état des préférences du logiciel.
•
Indicateur de téléchargement : il affiche deux valeurs. La première détermine la taille de la
page (y compris les éléments graphiques ou interactifs), la seconde le temps de
téléchargement évalué en fonction de la vitesse de modem spécifiée dans la zone d’entrée
Vitesse de connexion de la catégorie Barre d’état du logiciel.
13
Le menu « préférences »
Ce menu permet de régler de très nombreuses options de réaction du programme.
2.3 Le menu contextuel
Un menu contextuel apparaît lors d’un Ctrl-Clic (Mac) ou clic
droit (Windows) sur un élément présent dans l’espace de travail
de la fenêtre document. Il permet un accès plus rapide aux
fonctions.
14
2.4 La palette des objets
Elle regroupe la majorité des éléments à insérer, groupés par catégorie sous 7 onglets.
Les catégories sont :
•
•
•
•
•
•
•
Commun qui gère les objets de base (insérer tableau, photo, roll-over, ligne,…)
Mise en forme des tableaux, cadres et div
Formulaire qui gère les éléments de formulaires
Données, qui gère les relations avec les bases de données
Spry – voir l’encadré ci-dessous
Texte, qui gère la mise en forme des textes
Favoris – rubrique à garnir soi-même selon ses besoins et ses habitudes de travail 
Présentation des effets Spry
Les effets Spry sont des améliorations visuelles applicables à pratiquement
n'importe quel élément d'une page HTML à l'aide de JavaScript. Ces effets
sont souvent utilisés pour surligner des informations, créer des transitions
animées ou modifier visuellement un élément de page pendant un certain
délai.
15
Remarque : pour appliquer un effet à un élément, il doit être sélectionné ou
posséder un ID. Si, par exemple, vous surlignez une balise div qui n'est pas
sélectionnée, elle doit posséder 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 propriétés d'opacité, d'échelle, de position et
de style d'un élément, comme sa couleur d'arrière-plan. Vous pouvez créer
d'intéressants effets visuels en combinant plusieurs propriétés.
Ces effets sont basés sur Spry. Dès lors, lorsqu'un utilisateur clique sur un
objet possédant un effet, seul l'objet est mis à jour de manière dynamique.
La page HTML n'est pas entièrement actualisée.
Spry comporte les effets suivants :
•
Apparition/Fondu Fait apparaître ou disparaître lentement un élément.
•
Surligner Modifie la couleur d'arrière-plan d'un élément.
•
Store monté/Store baissé Simule l'effet d'un store qui monte ou descend
pour afficher ou masquer l'élément.
•
Glisser vers le haut/Glisser vers le bas Fait monter ou descendre l'élément.
•
Agrandissement/Réduction Augmente ou diminue la taille de l'élément.
•
Secouer Donne l'impression que l'élément est secoué de gauche à droite.
•
Ecraser Fait disparaître l'élément dans le coin supérieur gauche de la page.
Important : lorsque vous utilisez un effet, diverses lignes de code sont
ajoutées au fichier en mode Code. Une ligne identifie le fichier SpryEffects.js,
qui est nécessaire à l'inclusion des effets. Ne supprimez pas cette ligne du
code, faute de quoi les effets ne fonctionneront pas.
2.5 L’inspecteur de propriétés
Cet outil, qui se trouve au bas de l’espace de travail, donne accès aux propriétés de l’objet
sélectionné dans l’espace de travail. Le contenu de la palette varie donc en fonction de l’objet
sélectionné.
Cas du texte
16
Cas d’une image
Cas d’un formulaire
Cas d’un tableau
C’est dans cette barre que vous devez réaliser les différents réglages à apporter aux éléments
sélectionnés :
•
•
•
•
Texte : gras, italique, alignement, taille et police de caractères, couleur, retraits, puces
Tableau : épaisseur de bordure, couleurs ou motifs des fonds et des cadres, alignement,
taille, unités, composition
Objets graphiques : dimensions, alignement
Liens : cible
17
2.6 L’inspecteur HTML
Affiché via la commande Fenêtre : Inspecteur de code ou la touche F10, cette fenêtre 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 entraîne une modification du code. Inversement, toute modification du
code HTML entraîne, à condition que ce code soit conforme, une modification dans la fenêtre
document.
L’affinage d’une page passant obligatoirement par la lecture et la correction du code, il est
indispensable d’ouvrir fréquemment cette fenêtre afin de vérifier le code source. Il faut connaître
un minimum le langage html pour arriver à un bon résultat
Afin de faciliter la lecture du code, la catégorie « Coloration du code » des Préférences permet
de colorer les balises, ainsi que le contenu des balises. Il est intéressant de regrouper toutes les
balises d’un même objet sous une couleur unique. Par exemple, les balises <table>, <th>, <tr>,
et <td> étant colorées en rouge, c’est l’ensemble du code des tableaux qui serait affiché en
rouge.
18
3 Environnement de travail
3.1 La carte du site
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 icônes liées 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 présente la structure du site sur deux niveaux en partant de la page d'accueil.
Les pages sont présentées sous la forme d'icônes et les liens sont affichés dans l'ordre où ils
apparaissent dans le code source.
Vous devez définir la page d'accueil du site avant de pouvoir en afficher la carte. La page
d'accueil du site est le point de départ 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,
préciser si les étiquettes des icônes doivent afficher le nom du fichier ou le titre de la page et
indiquer si les fichiers dépendants et masqués doivent être affichés. (Un fichier dépendant est
une image ou tout autre élément de contenu non HTML que le navigateur charge en même
temps que la page principale.)
Lorsque vous travaillez dans la carte d'un site, vous pouvez sélectionner des pages, ouvrir une
page pour la modifier, ajouter des pages au site, créer des liens entre les fichiers et modifier le
titre des pages.
La carte du site est idéale pour agencer la structure d'un site. Vous pouvez définir rapidement la
structure d'ensemble du site, puis créer une image graphique de la carte du site.
Remarque : l'option de carte du site n'est disponible que pour les sites locaux. Pour créer la
carte d'un site distant, copiez le contenu de ce site dans un dossier de votre disque local, puis
utilisez la commande Gérer les sites pour définir le site en tant que site local.
Affichage d'une carte de site
Dans le panneau Fichiers (Fenêtre > Fichiers), effectuez l'une des opérations suivantes :
Dans le panneau Fichiers affiché sous sa forme réduite, sélectionnez Affichage de la
carte dans le menu Vue du site.
Dans le panneau Fichiers affiché sous sa forme développée, cliquez sur le bouton Carte
du site dans la barre d'outils, puis sélectionnez 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é définie
ou si Dreamweaver ne trouve pas de page intitulée
index.html ou index.htm dans le site actuel (qu'il
utilise alors comme page d'accueil), Dreamweaver
vous invite à sélectionner une page d'accueil.
20
4 Création d’un site
La bonne utilisation de Dreamweaver suppose qu’on lui indique d’emblée les caractéristiques de
base du site en cours de construction. Cette procédure ne sert qu’au programme lui-même. Cela
lui permet de contrôler plus facilement la cohérence des liens entre les éléments et de gérer la
synchronisation des fichiers se trouvant sur la machine locale avec ceux du site du serveur.
La définition du site s’obtient via le menu site en optant pour l’option « nouveau site ».
21
Remplissez obligatoirement les deux premiers champs « nom du site » et « dossier racine local
». Les autres champs ne sont nécessaires que si vous comptez utiliser Dreamweaver pour
placer en ligne votre site. Des programmes de FTP pur sont mieux indiqués à cet effet.
4.1 Construction d’une page
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 apparaîtra dans la barre supérieure du navigateur lors
de la visualisation de la page. Exemple :
22
Par contre, c’est le nom de fichier présent 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 l’option
« Propriétés de la page ». Dans cette fenêtre, vous pouvez modifier d’autres paramètres que le
titre de la page : image d’arrière plan, couleur d’arrière 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 Arrière-plan
Pour le fond de la page, vous pouvez choisir soit une image de fond, soit une couleur de fond.
Pour les images d’arrière-plan, on utilise généralement une petite image au format gif
représentant un motif. Celui-ci se répète automatiquement pour former un fond de page.
23
Il faut à tout prix éviter d’insérer directement une image trop grande car cela alourdirait la page
et en allongerait considérablement le temps de chargement. De plus, elle ne s’adapterait pas
bien à la mise en page suivant les résolutions utilisées par les visiteurs. En outre, veillez à
choisir judicieusement votre motif de fond pour ne pas gêner la lisibilité du texte de la page.
La couleur d’arrière-plan offre comme avantage par rapport à l’image d’arrière-plan de ne pas
ralentir le chargement de la page. Par contre, on ne dispose que de fonds de couleurs
uniformes. Ne négligez pas les fonds blancs (sans image ni couleur) qui, dans certain cas,
présentent une solution particulièrement nette.
Ces paramètres sont réglables dans le menu « propriétés de la page ».
4.1.2 Liens
La couleur des liens peut aussi être redéfinie. Par défaut, les liens s’affichent en gris. Quand il
s’agit de texte, le bloc est souligné quels que soient ses attributs de départ.
Quand on utilise une image, elle est entourée d’un cadre bleu. Une fois que le lien a déjà été
utilisé, il apparaît dans une couleur bordeaux. Il est conseillé de changer ces couleurs si on
risque un problème de lisibilité dû à l’utilisation d’un fond coloré ou d’une image de fond – ou
selon les règles de la charte graphique.
24
4.1.3 Encodage
L’encodage du texte s’effectue comme dans un logiciel de traitement de texte avec la plupart
des facilités classiques :
•
•
•
•
•
•
•
•
Flèche gauche : déplacement du curseur d’un caractère vers la gauche ;
Flèche droite : déplacement du curseur d’un caractère vers la droite ;
Flèche haut : déplacement du curseur d’une ligne vers le haut ;
Flèche bas : déplacement du curseur d’une ligne vers le bas ;
CTRL-Flèche gauche : déplacement du curseur d’un mot vers la gauche ;
CTRL-Flèche droite : déplacement du curseur d’un mot vers la droite ;
CTRL-Flèche haut : déplacement du curseur d’un paragraphe vers le haut ;
CTRL-Flèche bas : déplacement du curseur d’un paragraphe vers le bas ;
Les touches de début et fin de page, début et fin d’écran fonctionnent également.
La pression sur la touche majuscule associée au déplacement (flèche, CTRL-flèche, …) permet
une sélection équivalente au déplacement du curseur.
Le texte entré est balisé par <p></p>. Chaque retour ou pression sur la touche « Enter » crée
une nouvelle paire de balises qui définit une nouvelle ligne. Seule la touche de tabulation n’est
pas équivalente à celle des traitements de texte. L’alignement de texte ne s’effectuant pas par
des tabulations, mais par tableau, liste ou retrait.
On ne peut insérer qu’un seul caractère blanc de séparation (space bar) entre deux lettres ou
mots.
25
Le déplacement de texte ou d’objet graphique est possible par cliquer-glisser.
4.1.4 Polices de caractères
Le choix de la police de caractère doit se faire de manière judicieuse : comme le texte peut être
visualisé par de visiteurs n’ayant pas nécessairement la même plate-forme que celle qui a servi
au développement de la page, ni les même polices de caractères, Dreamweaver propose en
standard un jeu de fonts (groupées par équivalence d’aspect) et qui sont normalement présent
d’office sur tous les systèmes.
Le choix de la police par défaut se fait en ouvrant la palette des Propriétés, onglet aspect.
La taille des caractères est donnée en points, en centimètres, en pixels,…
Si vous désirez utiliser des polices de caractères différentes ou plus grandes, vous devez les
éditer dans un logiciel graphique et en faire un gif que vous positionnerez à l’endroit adéquat.
Ainsi, il sera lu de manière égale par tous les browsers.
4.1.5 Couleur
La couleur globale du texte est gérée par les propriétés de la page mais peut être modifiée
localement par la commande Texte : Couleur qui ouvre le nuancier ou encore par l’inspecteur
des propriétés.
4.1.6 Styles
Style : vous disposez en standard de
gras (B enfoncé) et d’italique (I
enfoncé) et, par combinaison, du
gras-italique (B et I enfoncés). De
plus, vous pouvez colorer votre texte
(carré coloré à coté de la taille).
N’utilisez qu’avec parcimonie le
souligné (qui n’est d’ailleurs pas
proposé en standard) car il est
réservé au marquage de liens.
Néanmoins, on peut y recourir si cela
ne crée pas d’ambiguïté mais il faut
alors éviter de mettre le texte dans la
couleur des liens. Pour obtenir tous
les styles non-standards, il faut aller
dans le menu « Texte » et choisir
l’option « Style ». On obtient alors la
fenêtre suivante :
26
4.1.7 Alignements
Alignement du texte : Dreamweaver propose en standard l’alignement à gauche, l’alignement à
droite, le centrage et la justification gauche/droite.
Le retrait de texte ne s’effectue pas à l’aide de taquets de tabulations comme dans les logiciels
de traitement de texte ou de mise en page. Seuls les retraits ou les tableaux permettent
d’aligner le texte à une distance donnée de la marge gauche.
4.1.8 Retraits
La création de retraits se fait via l’inspecteur des propriétés, les commandes « Retrait » et «
Retrait négatif » du menu « Texte », ou encore les commandes « Liste : Retrait » et « Liste :
Retrait négatif » du menu contextuel.
Chaque retrait positif crée une paire de balises <blockquote></blockquote>.
Ces balises, utilisées en HTML pour signifier une citation, correspondent approximativement à
un retrait de 5 caractères en corps 3 et peuvent être imbriquées.
Les icônes
sélectionné.
le permettent également dans l’inspecteur de propriétés, quand du texte est
4.1.9 Listes
Pour créer une liste ou une énumération, il suffit d’effectuer l’une des commandes suivantes :
•
•
•
La commande « Texte : Liste », un choix est à effectuer parmi les différentes listes
proposées, la commande « Propriété de la liste » permet d’affiner ce choix ;
Les icônes de la « Liste simple» et « Liste numérotée » de l’inspecteur des propriétés, le
bouton « Eléments de liste » donne accès aux propriétés 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-ordonnées, et <ol></ol> pour les listes ordonnées.
Les listes non-ordonnées sont des listes précédées d’un rond (puce), d’un cercle ou d’un carré,
tandis que les listes ordonnées débutent 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 réservé aux photos et aux images exigeant un grand nombre de couleurs.
Le GIF (maximum 216 couleurs) sera réservé aux images présentant de nombreux aplats
(grandes zones d’une seule couleur) tels que les logos. Le GIF permet aussi de créer des
animations (gifs animés) et des images dont une couleur est déterminée comme transparente.
Le Portable Network Graphics (PNG) est un format ouvert d’images numériques, qui a été créé
pour remplacer le format GIF, à l’époque propriétaire et dont la compression était soumise à un
27
brevet. Le PNG est un format non destructeur spécialement adapté pour publier des images
simples comprenant des aplats de couleurs.
Pour les images synthétiques
PNG est particulièrement approprié lorsqu’il s’agit d’enregistrer des images synthétiques
destinées au Web comme des graphiques, des icônes, des images représentant du texte
(bonne conservation de la lisibilité), ou des images avec des dégradés. Le PNG surpasse
régulièrement le format GIF en ce qui concerne la taille (avec une palette de couleurs bien
choisie) ou la qualité (puisqu’il n’est pas limité à 256 couleurs).
Pour les photos
Les caractéristiques de PNG lui permettent d’enregistrer des photographies sans perte de
données, mais au détriment de la
taille du fichier résultant qui reste la
plupart du temps très supérieure à
celle de formats spécifiques aux
photographies comme JPEG (ou
JPEG 2000).
L’insertion d’une image se fait soit via
la palette des objets, soit via le menu
«Insertion » avec l’option « Image ».
On obtient alors la fenêtre suivante :
28
Bien qu’il soit possible de modifier dans Dreamweaver la taille d’affichage d’une image, c’est à
déconseiller car cela oblige en pratique le navigateur de votre visiteur à recalculer à chaque fois
la taille d’affichage à partir de la taille réelle de l’image en question.
Cela a pour résultat de dégrader l’image et risque d’allonger le temps de chargement. Il convient
de réaliser pour chaque image une version directement à la taille souhaitée et de les utiliser
pour garnir les pages. Il est aussi possible d’y ajouter un lien vers l’image en taille réelle.
4.2 Les liens
Il existe 5 types de liens :
•
•
•
•
•
vers une autre page du site
vers une page externe à votre site
vers un endroit précis de la page locale (ancre)
pour permettre un contact mail
pour permettre un téléchargement de fichier
Dans tous les cas, le départ du lien peut être du texte, une image ou une partie d’image.
Pour créer un lien, il faut d’abord créer la cible, puis dans la page de départ, sélectionner le bloc
de texte ou l’image et aller dans la fenêtre des Propriétés et créer le lien.
•
pour lier une autre page de votre site, soit vous utilisez l’icône « Dossier » pour parcourir les
répertoires et choisir le fichier adéquat, soit vous utilisez le pointeur pour sélectionner votre
fichier dans la carte du site.
•
pour lier une page extérieure à votre site, il faut encoder l’URL (http://www.fundp.ac.be) dans
la case du lien dans la fenêtre des Propriétés.
•
pour un lien vers une ancre de la page elle-même, il faut d’abord créer l’ancre en allant à
l’endroit cible puis dans le menu « Insertion », choisir l’option « Ancre nommée ». On peut
aussi utiliser la « palette des Objets » où dans le menu « Commun » on retrouve l’icône de
l’ancre. On retourne ensuite à l’endroit où doit se faire le lien et dans la case lien de la «
palette des Propriétés », on tape « # » suivi du nom de l’ancre (sans espace).
L’utilisation d’ancres est utile dans deux cas : pour développer un menu et pour proposer un
retour direct au-dessus d’une page très longue (nb : il faut, dans la mesure du possible, éviter
les pages très longues et leur privilégier un ensemble de pages courtes liées entre elles).
•
pour lancer un contact email, sélectionner le texte, puis dans la palette de Propriétés, 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 l’icône «
Lien de messagerie ».
29
•
•
pour permettre le téléchargement d’un fichier, il faut procéder de la même manière que pour
un lien vers une page de votre site et choisir le fichier (non-HTML).
Lors de l’établissement d’un lien vers une autre page html, il faut également veiller à indiquer
dans l’onglet « Cible » l’endroit ou la nouvelle page doit s’ouvrir (parent = même écran, blank
= nouvelle fenêtre)
4.3 Enregistrer un document.
Il existe trois enregistrements possibles dans Dreamweaver.
Les commandes « Fichier : Enregistrer » et « Fichier : Enregistrer sous » sont identiques à
celles des autres logiciels. Enregistrer tout permet de sauver en une seule opération tous les
fichiers html ouverts à ce moment.
La commande « Fichier :Enregistrer comme modèle » permet d’enregistrer une page en tant
que modèle, autrement dit, toutes les pages ouvertes d’après ce modèle partageront les mêmes
propriétés de la page (couleur d’arrière-plan, marges, …).
4.3.1 Prévisualisation
Bien que les documents Dreamweaver donnent une bonne idée de ce que donnera la page
affichée, il y a cependant de grandes différences qui peuvent apparaître selon le navigateur
utilisé ainsi que la version de ces navigateurs et il est nécessaire d’y visualiser les pages avant
de les utiliser.
Il est possible d’enregistrer sa page, de lancer le navigateur et de l’y ouvrir, mais ceci représente
une perte de temps considérable.
Pour cette raison, Dreamweaver a introduit une fonction de Prévisualisation qui ouvrira
automatiquement la page dans le navigateur désiré. Il est possible de préciser un navigateur
principal et des navigateurs secondaires. Pour pouvoir utiliser cette fonction, il est indispensable
de préciser au logiciel où se trouvent les navigateurs à l’aide de la sous-commande « Edition :
Préférences : Aperçu dans le navigateur». Les boutons + et – servent à ajouter ou supprimer
des navigateurs qui peuvent être définis comme principal (F12) ou secondaire (CTRL-F12)
grâce aux cases à cocher.
30
4.4 Gestion des sites
La gestion du site se fait à l’aide de la fenêtre « Fichier du site » et « carte du site ».
Comme très souvent le nombre de pages du site augmente avec le temps, on est tenté de
supprimer ou renommer certaines pages, en dehors de Dreamweaver, et cela finit par créer des
liens brisés.
Parmi les problèmes qui perturbent les liens, on trouve très souvent celui de la casse
(minuscules/majuscules). Il faut savoir que sous Windows ou sous Macintosh, le système ne
verra pas de différences entre un fichier nommé Toto.htm ou TOTO.htm ou encore TOTO.HTM.
Sur le réseau, on a plus souvent affaire au système d’exploitation Unix et ce dernier fait lui la
distinction entre majuscules et minuscules. Pour lui, il s’agira 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é
réellement monfichier.HTML, tout sera OK sur ma machine locale mais sur le réseau, le lien
sera déclaré inexistant.
C’est particulièrement courant avec les images, leur extension étant très souvent réécrite en
majuscules lorsqu’on les retouche dans un programme de dessin.
31
5 les options graphiques
5.1 Les images survolées (roll over)
Lorsqu’une image est survolée par le pointeur, une autre image apparaît (roll-over). C’est le cas
des boutons qui donnent l’impression d’être
en relief, puis en creux lorsqu’on clique
dessus, à la nuance près que la réaction se
déroule lors du passage de la souris et non
pas du clic. La seconde image peut être
porteuse d’un lien (pas la première).
L’insertion d’une image survolée se fait soit
via la palette des objets, soit via le menu
« commun » avec l’option « Image
survolée».
On obtient alors la fenêtre suivante :
« Nom de l’image » permet de préciser un nom à l’objet image survolé, par défaut, elle portera le
nom imagex, x étant le nombre actuel d’images insérés dans la page depuis son ouverture.
« Image originale » permet de préciser le chemin et le nom du fichier de l’image lors du
chargement de la page.
« Image survolée » permet de préciser le chemin et le nom de fichier de l’image qui remplacera
l’image originale lors du survol.
La case à cocher « Précharger l’image survolée » permet de précharger d’office, et en tâche de
fond, l’image survolée lors du chargement de la page. Cette option permet ainsi d’obtenir des
effets de roll-over immédiats. Si cette case n’est pas cochée, l’image survolée sera chargée au
moment du survol, avec un décalage temporel.
32
Le texte secondaire sera la légende du roll-over – il n’est pas obligatoire.
« Si cliquée, aller à l’URL » permet de préciser la destination du lien. Il est toutefois possible de
la préciser par la suite via la zone d’entrée lien de l’inspecteur des propriétés de l’image
survolée sélectionnée.
N.B. Il est important que les deux images aient les mêmes dimensions.
5.2 Carte graphique ou image map
Une carte graphique ou image map est une image qui possède un ou des liens attribués
nonepas à l’ensemble de l’image, mais à des zones très précises, choisies en fonction de la
nature de l’image.
Les zones sensibles sont attribuées à l’aide des trois Outils zones réactives présent à gauche
de l’inspecteur des propriétés de l’image sélectionnée.
Ils permettent de définir des zones rectangulaires, rondes ou polygonales libres. Les zones
réactives sont marquées par des formes bleues translucides superposées à l’image, elles
possèdent des points d’ancrage et leur contour est invariablement noir.
La sélection et le déplacement de telle ou telle zone réactive s’effectue à l’aide de la flèche
noire. Cette dernière se transforme en flèche blanche à l’approche des points d’ancrage,
permettant ainsi la modification de la forme des zones réactives.
Le nom de la carte, les noms et les liens des zones réactives ainsi qu’un nom alternatif se
définissent respectivement dans la zone d’entrée « Carte », « Liens » et « Sec. » de l’inspecteur
des propriétés de la zone réactive sélectionnée.
Par défaut, la couleur d’un texte portant un lien est bleu et souligné. Lorsqu’on clique sur un lien,
il devient noir par défaut et violet une fois visité. Il est possible de modifier les couleurs
d’affichage des liens via la fenêtre des propriétés de la page (« Modifier : Propriétés de la page
»).
33
La zone « Couleur du lien » permet de définir la couleur du lien avant toute visite. La zone « Lien
actif » permet de déterminer la couleur du lien lors du clic et la zone « Lien visité » détermine la
couleur du lien mémorisé.
Si l’on ne désire pas obtenir une couleur différente lors du clic ou après une visite, il suffit
d’encoder les mêmes valeurs de couleurs dans chaque zone d’entrée. De fait, si aucune couleur
n’est entrée, les valeurs seront celles par défaut. Les couleurs étant déterminées par les
attributs de <body> : link, vlink, alink, elles sont invariables pour l’entièreté de la page.
5.3 Affichage des pages
Par défaut, tout lien, qu’il soit basé sur un texte, une image ou un élément extérieur (Shockwave
Flash, …) ouvre son fichier de destination dans la fenêtre en cours. Il est possible de modifier la
fenêtre cible des liens grâce aux attributs « _blank », « _self », « _parent » et « _top ». ces
attributs se définissent via la liste « Cible » accompagnant la zone d’entrée « Lien ». Notez que
cette zone est inactive tant qu’aucun élément, texte, ou image n’a été sélectionné.
5.4 Insertion de tableaux
Deux méthodes sont possibles :
•
•
 via le menu « Insertion » avec l’option « Tableau »
 via la « palette des objets », section « commun »
On obtient alors la fenêtre suivante qui permet le paramétrage du tableau
34
dans laquelle on détermine le nombre de lignes, de colonnes, le type de bordure (0= pas de
bordure), l’espace entre les cellules, ….
La taille peut être donnée
•
•
 en pourcentage de la taille d’écran (le tableau s’adaptera à la résolution du visiteur)
 en pixels (la taille du tableau sera fixe).
«Bordure» permet de préciser l’épaisseur en pixels du contour du tableau. La bordure peut
également avoir une couleur. Pour cela, il suffit d’aller dans la « Palette de Propriétés » et de
définir la couleur de la bordure dans la case « Brdre ».
Par défaut, la bordure d’un tableau est de 1 pixel.
La case « Marge intérieure des cellules » détermine l’espace entre le contenu et le bord du
cadre.
La case « Espacement des cellules » permet de préciser la quantité d’espace entre deux
cellules.
Par défaut, le remplissage et l’espacement des cellules est de deux pixels.
Il existe deux moyens d’ajouter 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
méthode d’ajout est à choisir en fonction du besoin.
L’ajout de ligne au-dessus et de colonne à gauche de l’élément actif est possible via la
commande «Insertion », « objet du tableau : Insérer (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 sélectionnant et en activant la commande clavier
« delete ».
5.5 Données tabulaires
Si les données qui devront être mises en page dans un tableau sont déjà encodées dans un
logiciel de traitement de texte ou un tableur, il est inutile de les encoder à nouveau, on peut
importer des données tabulaires via le menu « Insertion », « objets du tableau », « importer les
données tabulaires ». Lors du placement de données tabulaires importées, la boîte de dialogue
« Insérer des données tabulaires » s’ouvre et permet le paramétrage de l’import :
35
•
•
•
•
•
•
•
« Fichier de données » permet de localiser le fichier source, éventuellement à l’aide du
bouton « Parcourir » ;
« Délimiteur » permet de choisir le séparateur de données entre tabulation, virgule, pointvirgule, deux points ou un autre séparateur à préciser ;
« Adapter au contenu » permet d’adapter la largeur des colonnes et donc du tableau au
contenu du fichier importé ;
« Marge intérieure des cellules » permet de préciser le remplissage des cellules ;
« Espacement des cellules » permet de préciser la distance séparant deux cellules ;
« Formatage ligne supérieure » permet de préciser les attributs gras, italique ou gras italique
de la première ligne du tableau ;
« Bordure » permet de préciser l’épaisseur en pixel de la bordure du tableau.
5.6 Formulaires
Les formulaires servent à créer un écran contenant des champs que les visiteurs des pages
peuvent garnir avec leurs données et envoyer ensuite via une liaison avec une base de données
résidente sur un serveur (pas nécessairement celui où les pages se trouvent)
Tout formulaire, du plus simple au plus complexe, passe obligatoirement par l’insertion d’un
objet-formulaire au sein de la page. Cet objet n’est qu’un conteneur, il ne possède aucune
réalité visible lors de l’affichage dans le navigateur.
Dans Dreamweaver, l’objet-formulaire est représenté par un rectangle pointillé rouge.
36
L’insertion d’un objet-formulaire s’effectue via le menu « Insertion » avec l’option « Formulaire ».
N.B. Contrairement aux tableaux, il est impossible d’imbriquer des formulaires ou d’en modifier
la taille (ils s’agrandissent en fonction de leur contenu).
Les éléments du formulaire (boutons, champ de texte, liste, menu,...) doivent ensuite être
insérés dans l’espace délimité par « l’Insertion du formulaire ». Soit ils sont introduits à l’aide de
la « palette des Objets », soit ils sont introduits à partir du menu « Insertion » avec l’option «
Objet de formulaire ». Les différents éléments pouvant être insérés dans un formulaire et leurs
icônes respectives sont :
Dreamweaver regroupe trois réalités sous un même objet nommé « Insérer un champ de
texte »
•
•
•
Le champ de texte ligne simple
Le champ de texte multi-lignes
Le champ masqué
5.6.1 Champ de texte ligne unique
Les paramètres d’un « champ de texte ligne unique », réglables dans l’inspecteur des propriétés
du champ de texte sélectionné, sont :
37
•
•
•
Son nom, encodé dans la zone d’entrée « Champ de texte »
La largeur du champ en nombre de caractères introductibles dans le champ, encodée dans
la zone d ‘entrée « Nbre caract. max. »
Le texte présent dans le champ dès son affichage, encodé dans la zone d’entrée « Val. Init.
»
5.6.2 Champ de texte multi-lignes
Les paramètres d’un « champ de texte multi-lignes », réglables dans l’inspecteur des propriétés
du champ de texte sélectionné, sont :
•
•
•
•
•
Son nom, encodé dans la zone d’entrée « Champ de texte »
La largeur du champ en nombre de caractères visibles, encodée dans la zone d ‘entrée «
Larg. De caract.. »
Le nombre de lignes affichées, encodé dans la zone d’entrée « Nbre de ligne »
Le texte présent dans le champ dès son affichage, encodé dans la zone d’entrée « Val. Init.
»
Le mode de retour à la ligne lorsque le texte introduit par l’usager arrive à la limite droite du
champ :
o Désactivé, aucun retour à la ligne forcé ne s’opère
o Virtuel, un retour à la ligne forcé s’opère à l’écran mais pas dans les données
envoyées
o Physique, un retour à la ligne forcé s’opère à l’écran et dans les données
envoyées
o Par défaut, utilise les préférence du navigateur (à éviter).
5.6.3 Champ masqué
Les paramètres d’un champ masqué, réglables dans l’inspecteur des propriétés du champ de
texte sélectionné, sont :
38
•
Son sens, encodé dans la zone d’entrée «Valeur »
Les champs masqués permettent de conserver et transmettre des informations qui ne sont pas
saisies par l’utilisateur. Ces informations sont masquées afin que l'utilisateur ne puisse pas les
voir.
Remarque : cette amélioration n’est disponible que si vous pouvez accéder à un ordinateur
exécutant ColdFusion MX 7 ou une version ultérieure
5.6.4 Case à cocher
La case à cocher est l’élément qui permet à l’usager de choisir une ou plusieurs occurrences
dans une liste.
Les paramètres sont :
•
•
•
•
Son état
Sa valeur
Son état initial, à savoir : actif (coché) ou inactif (décoché)
Sa classe
5.6.5 Bouton radio
Un bouton radio permet de ne choisir qu’une occurrence de cette liste.
Les paramètres d’un bouton radio sont :
•
•
•
•
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 possédant une petite flèche ouvrant une liste
lorsqu’on clique dessus.
Les paramètres d’un menu, réglables dans l’inspecteur des propriétés du champ menu
sélectionné, sont :
•
•
•
•
•
Son nom
Son type
Les éléments contenus (valeur de la liste)
L’élément initialement sélectionné (attribut selected)
Sa classe
N.B. Après avoir cliqué sur le bouton « Valeur de la liste », l’ajout et la suppression d’éléments
de la liste s’effectuent à l’aide des boutons + et -. La modification s’effectue en cliquant à
nouveau sur « Valeur de la liste ».
5.6.7 Boutons d’envoi
Les éléments finaux d’un formulaire sont les boutons qui permettent à l’usager de valider et
d’envoyer ou non son formulaire.
Dreamweaver regroupe trois réalités sous un même objet :
•
•
•
Le bouton d’envoi des données du formulaire
Le bouton d’effacement des données du formulaire
Le bouton type pour l’attribution de commandes.
40
Les paramètres d’un bouton, réglables dans l’inspecteur des propriétés du champ bouton
sélectionné, sont :
•
•
•
Sa valeur (Action : envoyer le formulaire, rétablir le formulaire, aucune)
Son nom qui spécifie le texte apparaissant sur le bouton
Sa classe
6 Utilisation des feuilles de style
Un style est un groupe d'attributs de mise en forme qui contrôlent l'apparence d'un texte dans un
document. Une feuille de style CSS peut être utilisée pour contrôler la mise en forme de
plusieurs documents en même 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 modifiée, la mise en forme de tous les
documents qui y font appel est automatiquement modifiée en conséquence.
Les styles CSS sont identifiés 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é refléter
instantanément ce changement.
Dans les documents HTML, les styles CSS peuvent contrôler 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 spécifier des attributs HTML uniques, dont le positionnement, des effets
spéciaux et la réaction à un survol de la souris.
Pour créer une feuille de style CSS, il faut :
•
Ouvrir le menu « Fenêtre » option « Styles CSS ». Clic droit sur « aucun style défini » et
choisir « nouveau ». Vous avez alors la fenêtre suivante :
•
Cliquer bouton droit sur « aucun » et choisir « nouveau style » dans le menu contextuel
41
•
•
•
Sauver la css à l’endroit approprié
Encoder les choix voulus dans les différents menus – faire « appliquer »
Dans le « head » de la ou des pages html qui doivent exploiter la css, écrire :
<link rel="stylesheet" type="text/css" href="nom.css" />

42
7 l’aide en ligne
Une pression sur la touche F1 ouvre l’aide en ligne de Dreamweaver. On y trouve la réponse à
la plupart des questions qui peuvent se poser. N’hésitez pas à la consulter en cas de besoin.
La fonction de recherche ainsi que l’index permettent de spécifier les questions.
43
8 Les comportements
La fenêtre des comportements s’affiche via la clé Maj-F4. Son intérêt principal réside dans la
possibilité d’ajouter facilement des événements dans le code de la page. Cet ajout se réalise en
cliquant le bouton + et en choisissant l’option désirée dans la liste.
•
…Ouvrir la fenêtre navigateur permet d’ouvrir une nouvelle fenêtre, nantie des paramètres
souhaités et pointant vers une adresse au choix.
44
•
Précharger les images indique au browser qu’il doit commencer immédiatement à charger
les images indiquées (par exemple, celles se trouvant sur la page logiquement suivante),
ceci afin de réduire le temps de chargement quand le lien sera vraiment actionné.
45
9 Conception de frames dans Dreamweaver
Une page découpée en frames comprend :
• le jeu de frames (frameset), entité dans laquelle on n’écrira rien, dont la seule utilité est de
contenir les autres frames. Néanmoins, il faudra lui donner un nom.
• Les frames proprement dites, sorte de découpage réglable de la surface de la page. Chaque
frame va afficher un fichier html différent.
46
Chaque frame porte un nom.
Sauver immédiatement les fichiers via la commande « fichier » « enregistrer tout » : pour une
découpe en 3 frames, on sauvera 4 fichiers html ; 3 nommés frame_nom et 1 nommé librement
qui est le frameset. Veillez à nommer les 3 fichiers « frame » en fonction de la position qu’ils
occupent réellement sur la page. Dans l’hypothèse d’une découpe 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 d’afficher des pages dans
MAIN_FRAME. Après avoir lié un fichier sur l’item « menu » du menu (ici, index2), il faut
également régler l’endroit où il va apparaître.
Cette opération se réalise dans la boîte « Cible » de l’inspecteur de propriétés.
On trouve dans ce menu les options suivantes
Item
Affiche la nouvelle page dans…
Blank
Une nouvelle page - browser ouvert 2x
Parent
Une nouvelle page - browser ouvert 1x
Self
Dans le frame local
Top
Une nouvelle page
Rightframe
Le frame principal
Mainframe
Le frame gauche
Topframe
Le frame du dessus
47
Dans notre hypothèse, nous allons choisir « mainframe » dans le menu « cible ». Quand l’item
du menu sera activé, index2.php s’affichera dans le mainframe.
Quand vous construisez les pages destinées à garnir les frames top et left, tenez compte du peu
de place disponible pour l’affichage. Il faut essayer de se passer d’ascenseur.
La fenêtre « cadre » (maj F2) permet de nommer les cadres (fenêtre « Cadre »). Cette opération
est nécessaire pour pouvoir adresser l’affichage d’une page dans le frame voulu.
48