Sie sind auf Seite 1von 35

1er cycle

Année universitaire : 2002-2003

Design d’applications Internet

CODEX
HTML et Dreamweaver

Auteur : Dr. Milton Campos


Édition: Jorge Zeledon

Faculté des arts et des sciences


Département de Communication
Les réseaux, la navigation Internet, le langage et la
mise en page HTML
Apprendre à comprendre comment le contenu des
pages voyage par Internet
Qu’est-ce qu’un réseau? Un réseau informatique est un ensemble
d’ordinateurs liés pour permettre le partage rapide, fiable et précis des
données. Pour que cela soit possible, le réseau doit être capable de
livrer l’information d’un ordinateur à l’autre avec fiabilité, de déterminer la
destination des données, et de garantir que les ordinateurs soient capables
de s’identifier à travers le réseau grâce à des codages qui nomment leurs
composantes et les identifient (Hayden, 1999). Il y a plusieurs types de
réseaux, qui structurent la communication entre ordinateurs de façon dif-
férente (c’est ne pas notre but d’étudier les différents types de réseaux).
Les réseaux s’interconnectent par :
une structure physique – le matériel de connexion (ordinateurs, câbles, etc. )
un modèle physique – la façon dont les ordinateurs sont liés entre eux
une logique – les logiciels réseaux capables de permettre aux ordinateurs
de lire les composantes du système (les autres ordinateurs, les impriman-
tes, les données partagées, etc.) et aux utilisateurs de voir cette lecture
dans leurs écrans.
Les réseaux internes forment les réseaux INTRANET domestiques ou
TAN – Tiny Area Network (deux ou trois ordinateurs liés dans les maisons),
locales ou LAN – Local Area Network (par exemple, les réseaux Macintosh
et PC de la FAS, etc.), intra locales comme le MAN – Metropolitan Area
Network ou le CAN – Campus Area Network (le réseau de l’Université
de Montréal), distantes ou WAN – Wide Area Network (le réseau d’un
ministère). Un réseau EXTRANET est un réseau qui utilise Internet pour
relier plusieurs réseaux entre eux (Hayden, 1999).
Qu’est que l’Internet ? C’est un réseau des réseaux LAN, MAN, WAN, CAN
et TAN, reliés. La vitesse du partage des données dans cet ensemble de
réseaux qu’est Internet, dépend de la configuration physique de chaque
réseau particulier et de la structure physique de connexion. Par téléphone,
la vitesse maximale est de 56 Kbites. Il y a aussi des connexions interur-
baines plus rapides comme les T1, E1 et T3, et des câbles de fibre optique
capables de transporter plus de 622 Mbps (Hayden, 1999).

Les navigateurs pour Internet et le langage HTML


L’avènement des réseaux et d’Internet a créé le besoin d’avoir un espace
commun de navigation, accessible à tous les ordinateurs. Les réseaux

2
WAN, par exemple, permettent le partage des données par plusieurs
ordinateurs dans un environnement logiciel comme Windows NT. Par
contre, Internet permet le partage universel des documents dans un
espace commun connu comme la toile (web). La communication Internet
est possible grâce à :
• des réseaux reliés par câbles (on commence à structurer des réseaux
sans câbles !)
• des logiciels de navigation (browsers)
• des langages de navigation (HTML, DHTML, XML, etc.)
Nous avons déjà parlé des réseaux. Maintenant, il s’agit des logiciels de
navigation. Le design Internet dépend des considérations communication-
nelles mais surtout d’une connaissance technique du fonctionnement des
réseaux, des logiciels et des langages de navigation.

La navigation
Les logiciels de navigation sont des programmes capables de lire des
informations écrites dans un langage suffisamment flexible pour transporter
rapidement les données à travers les réseaux reliés par Internet. Ce
langage est le HTML (Hypertext Markup Language).
Le HTML a été créé à partir d’un autre langage (en fait un métalangage)
appelé SGML (Standard General Markup Language). Ce dernier langage,
le SGML, a été créé avant l’avènement d’Internet. C’est un langage
versatile qui comprend un ensemble des règles syntaxiques capables de
marquer des documents et des données. On avait besoin d’un langage
capable de dire (donc, de marquer les documents) à des programmes
de navigation comment présenter sur l’écran des données numériques.
Des développeurs ont travaillé à partir des lignes directrices du SGML
pour créer ce langage. Le HTML est, donc, un langage exclusif à la toile
(Niederst, 1999).
Le HTML est, pourtant, le langage web par excellence. Il définit une
syntaxe selon laquelle des instructions sont données pour permettre au
logiciel de navigation de les interpréter et de les afficher sur l’écran. Ces
instructions sont de balises (tags) qui ne sont pas affichées mais qui sont
suffisamment claires pour permettre au navigateur de les lire et d’afficher
correctement les contenus dans des pages web, les documents de transfert
des données sur Internet.
Comme nous l’avons vu, il est fondamental de comprendre les rapports
entre forme et contenu pour avoir une idée de ce moyen de communication
qu’est l’ordinateur. Le HTML est un langage qui mélange une syntaxe
(les balises ou tags) et un contenu (les textes, les images, les sons, etc.).
Alors, pour naviguer sur les câbles, les ordinateurs transforment dans un

3
codage binaire, avec l’aide des logiciels des systèmes d’exploitation et
des applications, cette syntaxe et les contenus qui lui sont associés. Il y
a un processus complexe de codage, de re-codage et de re-re codage
dans la circulation des contenus.
Apprendre à faire du design Internet implique une connaissance de base du
HTML. L’enseignement de ce langage n’est pas compris dans le cours, mais
il faut, au moins, comprendre sa logique, et son mode de fonctionnement.
Les étudiantes et les étudiants intéressé-e-s par un apprentissage plus
approfondi du HTML peuvent lire des livres spécialisés (il y a quelques
suggestions dans la bibliographie du cours et du codex) ou chercher des
ressources Internet. Dans le site http://www.fas.umontreal.ca/COM/
com2580/Index.htm, cliquez sur Cours, puis sur COM-1560 pour avoir
accès à quelques ressources Internet sur le HTML.

Les éditeurs HTML


Le HTML est un langage qui s’écrit tout simplement en texte pur (ASCII).
Tous les logiciels d’écriture de texte (comme WordPad ou NotePad) sont,
pourtant, des logiciels HTML par excellence. Cependant, à chaque jour,
de nouveaux logiciels générateurs de codes HTML apparaîssent. Ces
logiciels sont appelés WYSIWYG (what-you-see-is-what-you-get ou ce
que vous voyez, c’est ce que vous obtenez). Avec ces logiciels, vous
pouvez préparer vos pages web sans avoir besoin de savoir le HTML.
Pour une production artisanale, ça marche. Mais pour la production
professionnelle, il faut absolument savoir nettoyer le HTML généré par
un éditeur WYSIWYG. La raison est simple : un codage généré par un
logiciel donné peut être mauvais ou pas très pure. Malheureusement, la
nature du HTML permet la composition d’un codage écrit à la main ou
générée automatiquement sans rigueur qui marche bien dans la plupart
des cas, mais pas toujours.
Les développeurs s’éfforcent de créer de logiciels capables de générer un
codage HTML propre. Ce n’est malheureusement pas le cas de la plupart
de ces logiciels. Ces logiciels HTML génèrent le codage mais créent
d’autres formes (balises) à l’intérieur de l’écriture syntaxique. Le résultat
est que, dépendant de la machine, des logiciels installés, de la version et
du type de navigateur, l’affichage de la page peut présenter des erreurs.
Si vous préparez un site complexe, le nettoyage peut se transformer en
grave problème. Il y a aussi des logiciels de nettoyage faits pour faciliter
la vie des producteurs, mais ils ne sont pas capables de tout nettoyer.
Cependant, il faut souligner que rien ne remplace le besoin absolu de
maîtriser le HTML pour devenir un vrai professionnel.
Le meilleur éditeur HTML est, sans doute Dreamweaver parce que c’est
le logiciel de construction des sites complexes qui génère le code le plus
propre. Par contre, l’apprentissage est difficile, requiert de la bonne volonté
et beaucoup des essais. Les autres éditeurs respectables sont : Adobe

4
PageMill, FileMaker Claris Home Page, Microsoft FrontPage, et GoLive
CyberStudio (pour les Macs). Vous allez apprendre à faire des pages web
avec Dreamweaver, mais aussi avec d’autres logiciels simples comme
Word et Netscape. Le but c’est de comprendre la logique à l’arrière de
la génération du codage, et bien sûr, de faire les premiers pas dans le
chemin de l’apprentissage du design Internet.

La structure du HTML
En informatique, il n’a rien plus facile que d’apprendre comment le HTML
fonctionne. Cependant, maîtriser le langage (comme tous les langages
informatiques) demande une pratique suivi et beaucoup, beaucoup de
patience !
Voici la structure de base d’un document HTLM :
<HTML>
<HEAD>
<TITLE> L’écrasement du Concorde </TITLE>
</HEAD>
<BODY>
Le Concorde de la compagnie Air France….
</BODY>
</HTML>

Chaque ensemble <> X </> correspond a une balise (tag) qui dit au
navigateur comment il doit traiter la donnée entre le <> et le </> . Tout
document HTML est divisé en deux parties : le HEAD (informations sur le
document) et le BODY (le contenu que nous voyons affiché dans l’écran).
À l’intérieur du BODY, d’autres balises doivent être écrites pour que le
contenu soit affiché de la façon recherchée.
Il y a des tags spécifiques pour formater le texte (pour déterminer la couleur,
la taille, le type, l’alignement, etc. des polices et de paragraphes), pour
faire la mise en page, pour insérer des images, des sons, des comporte-
ments, etc. Par exemple, pour écrire « la lune est blanche », le code est
le suivant :
<BODY>
La lune est <I> blanche </I>.
</BODY>

La balise <I> indique l’italique (I : italics, en anglais). Tous les tags utilisent
des dénominations prises de l’anglais.

5
Les balises peuvent être mises entre d’autres balises. Par exemple,
pour écrire « la lune est blanche » (italique plus gras), la syntaxe est la
suivante :
<BODY>
La lune est <B><I> blanche </I></B>.
</BODY>

La balise <B> indique gras (B : bold, en anglais). Et ainsi de suite. Bien


sûr, les pages web complexes ont un codage aussi complexe. Le HTML
a des balises (tags) et aussi des attributs des balises. Par exemple, la
balise <TABLE> (Tableau) a plusieurs attributs, comme CELLSPACING
(espace entre les cellules) qui aidera à définir l’affichage du tableau parmi
d’autres attributs.
Normalement, toutes les balises ont besoin d’une fermeture, mais il y a
quelques-unes qui n’en ont pas. Elles sont appelées des balises solitaires
ou standalone tags. Par exemple, la balise <img> (correspondant au terme
anglais image), n’a pas besoin d’une fermeture </img>. Les navigateurs
savent quelles sont les balises qui ont besoin de fermeture. Les naviga-
teurs ignorent la répétition des balises comme les <p> (paragraphe) et
<br> (line break), et souvent les fermetures. Cependant, écrire le HTML
correctement, indépendamment de l’affichage correct des navigateurs,
doit être la norme si vous voulez éviter des problèmes.
Pour mieux comprendre et apprendre le HTML, veillez rechercher des
informations dans les sites web fournis dans les ressources du cours et
lire des livres spécialisés.

Dreamweaver
Nous allons faire la mise en page avec Dreamweaver 4 en même temps
que nous apprenions à travailler avec les menus principaux du logiciel.
Cependant, des explications plus détaillées concernant ce logiciel seront
fournies parce que nous allons utiliser Dreamweaver pour la préparation
des sites web.
Quand vous démarrez Dreamweaver, le logiciel ouvre automatiquement
une page blanche. Si vous voulez en ouvrir une autre, il faut travailler
avec le menu fichier.
Dreamweaver a deux ensembles complets de menus complètement
différents : un pour la création de pages, et un autre pour la gestion des
sites. Pour le moment, nous allons apprendre seulement les menus qui
concernent les pages web.

6
1. Le menu Fichier
Contrairement aux autres logiciels, le sens de « fichier » (le titre du menu)
n’est pas précis car il est utilisé pour des opérations qui concernent
des fichiers, bien sûr, mais aussi d’autres qui concernent les sites (des
ensembles de fichiers de plusieurs variétés de compression). De plus, le
menu a aussi des fonctions de vérification d’affichage des fichiers.
Voici les fonctions :
New (Nouveau) ouvre un nouveau document html.
New from template… (Nouveau à partir d’un modèle…) ouvre une nouvelle
page html structurée selon un modèle de conception déjà préparé. Après
avoir cliqué sur la fonction, une fenêtre s’ouvrira pour vous demander à
partir duquel modèle vous voulez ouvrir la page.
Open… (Ouvrir…) ouvre un fichier déjà créé. Vous pouvez le démarrer
depuis le disque dur, une disquette ou un disque zip, un cédérom, etc.
Le fichier doit absolument être compatible avec HTLM ou XML pour qu’il
puisse être ouvert.
Open in frame… (Ouvrir dans un cadre…) ouvre un fichier déjà créé dans
un fichier-cadre. Il faut que le fichier-cadre soit ouvert avant d’utiliser
cette fonction.
Close (Fermer) ferme un fichier ou un site ouvert.
Save (Enregistrer) enregistre le fichier déjà ouvert. Le fichier doit
absolument être compatible avec HTLM ou XML pour qu’il puisse être
enregistré.
Save as… (Enregistrer sous…) enregistre un nouveau fichier. Le fichier
doit absolument être compatible avec HTLM ou XML pour qu’il puisse
être enregistré.
Save as template… (Enregistrer comme modèle…) enregistre un nouveau
modèle. Le modèle est un fichier compatible avec HTLM et XML.
Save frameset (Enregistrer le jeu de cadres) enregistre un jeu de cadres déjà
ouvert. Le cadre est une configuration d’un document HTLM et XML.
Save frameset as… (Enregistrer le jeu de cadres sous…) enregistre un
nouveau jeu de cadres.
Save All (Enregistrer tout) enregistre toutes les pages ouvertes à la fois.
Revert (Rétablir) permet le retour à la dernière version enregistrée.
Design Notes (Annotations de design) permet l’annotation des informations
importantes sur un fichier donné.
Import (Importer) insère un fichier XML choisi dans un modèle.
Export (Exporter) vous permet d’enregistrer le fichier ou les régions
éditables comme XML ou les CSS (feuilles de style) comme XML.

7
Convert (Convertir) permet de convertir un fichier préparé pour le naviga-
teurs 4 et 5 d’être correctement affiché dans un navigateur 3.
Preview in browser (Aperçu dans le navigateur) affiche la page dans le
navigateur choisi. La fonction vous permet de gérer la liste de navigateurs
disponibles dans la fonction préférences.
Check links (Vérifier liens) vous permet de voir si les liens de la page ou
du site entier sont actifs.
Check target browsers (Vérifier les navigateurs cibles) vous permet de
vérifier l’affichage de la page avec l’utilisation d’un navigateur choisi.
Exit (Quitter) ferme l’application.

Les options suivies des points de suspension indiquent que de nouvelles


fenêtres apparaîtront si vous cliquez sur elles. Les options suivies d’une
flèche indiquent que des sous-menus apparaîtront si vous cliquez sur eux.

Voici l’ouverture d’une page avec le menu fichier :

Figure 1 - Ouvrir une page avec le menu fichier.

2. Le menu Texte

Vous avez deux options pour insérer un texte dans Dreamweaver. La


première c’est de l’écrire directement avec les paramètres automatiques
et puis de le formater. La deuxième, c’est de le préparer dans un éditeur
de texte comme Word, de le copier comme texte, et puis de le formater.
Parce que Dreamweaver n’est pas un éditeur de texte, si vous voulez
faire des formatages plus compliqués, il faut enregistrer les pages
comme HTML dans l’éditeur de texte choisi, et puis nettoyer l’HTML avec
Dreamweaver.

8
Voici comment formater un texte après qu’il est déjà écrit dans une page,
avec l’aide du menu fichier. Le texte « Le saule » sera écrit avec la police
Verdana, style normal. Vous verrez que ce n’est pas évident d’avoir la taille
18 parce que dans l’HTML le codage de tailles n’obéit pas aux normes
typographiques usuelles. La taille plus proche est 5. Puis, on ira définir
la couleur (51, 153, 102), et l’alignement (centralisé).

Figure 2 - Formater type, taille, alignement et couleur d’un texte.

Voici les fonctions du menu Texte :


Indent (Retrait) permet d’établir un retrait positif du texte (à droite).
Outdent (Retrait négatif) permet d’établir un retrait négatif du texte (à gauche).
Format… (Format…) permet de formater le texte selon un attribut de style.
List… (Liste…) crée des listes numérotées, à puces ou avec des retraits
de texte.
Alignment (Alignement) offre trois options d’alignement du texte : gauche,
droite et centrée.
Font (Police) permet de définir le type de police.
Style (Style) permet de définir le style de la police parmi plusieurs options.
HTML styles (Styles HTML) offre des options de style HTML.
CSS Styles (Feuilles de style) permet l’édition d’un modèle de style avec toutes
les normes d’affichage, en incluant le texte, mais pas seulement du texte.
Size (Taille) permet de définir la taille de la police.
Size increase (Augmenter la taille) permet d’augmenter la taille de la
police.

9
Size decrease (Réduire la taille) permet de diminuer la taille de la police.
Check spelling (Vérifier orthographe) vérifie l’orthographe en anglais.

3. Le menu Insertion
Les fonctions du menu insertion sont simples (il faut seulement insérer).
Cependant, comprendre ce que nous insérons, c’est toute une autre chose.
Nous allons vous montrer toutes les choses que vous pouvez insérer. Mais
ne vous attendez pas à tout comprendre pour le moment.

Figure 3 - La fonction image du menu insertion.

Figure 3 - Le choix de l’image avec la fenêtre de sélection de la source de l’image.

10
Figure 4 - Le résultat final..

Voici les fonctions du menu Insertion :


Image (Image) insère une image.
Rollover image insère un comportement quand la souris passe sur une
région donnée d’une page web.
Table (Tableau) insère un tableau. Après avooir cliqué sur la fonction, une
fenêtre vous demandera de définir le nombre de colonnes et de lignes.
Tabular Data (Données d’un tableau) permet d’insérer les données dans
un tableau.
Horizontal Rule (Barre horizontale) insère une ligne horizontale.
Navigation Bar (Barre de navigation) permet la création d’une barre de
navigation avec plusieurs images.
Layer (Calque) insère un calque. Le calque en Dreamweaver n’est pas du
tout ce que vous trouvez dans les autres logiciels. Dans ce cas, le calque
concerne un espace virtuel où des objets seront insérés. Par exemple,
avant d’insérer une image, pour avoir un contrôle sur le design de la page,
il faut insérer d’abord un calque, et puis l’image à l’intérieur du calque.
Form (Formulaire) insère un formulaire. Les formulaires sont des éléments
préparés pour recueillir des informations.
Form object (Objet de formulaire) insère les objets trouvés dans les
formulaires.
Frames (Cadres) insère un jeu de cadres dans la page. Il y a plusieurs
options d’organisation des cadres.

11
Line Break (Saut de ligne) insère un saut de ligne.
E-mail Link (Lien de courriel) permet la création d’un link entre un texte
et une adresse de courriel.
Media (Média) insère des objets multimédia.
Flash insère un objet Flash. Un objet flash est un fichier généré par le
logiciel Flash, qui permet la production des animations.
Shockwave insère un objet Shockwave. Un objet shockwave est un
fichier audio, vidéo ou animé généré par le logiciel Director, qui permet la
production multimédia.
Generator insère un objet Generator. Les objets Generator peuvent être
créés à partir de Flash 4.
Fireworks HTML insère un objet Fireworks HTML.
Applet insère un applet Java. L’applet Java est un petit programme
fermé en lui-même, capable de créer des comportements sur la page web.
Consultez les ressources dans le site du professeur (cadre « cours »).
ActiveX insère un objet qui sera intégré (embedded in) à la page web.
Plugin insère un programme logiciel qui permet d’un fichier généré par
lui d’être lu par les personnes qui accèdent la page web. Par exemple :
vous préparez un fichier vidéo avec RealAudio, et vous installez le plugin
ou un lien pour le téléchargement du plugin qui permettra à la personne
qui accède votre page de voir la vidéo sur son ordinateur.

Head insère des informations dans la partie <head/> de votre document


HTML. Elles ne sont pas incluses dans l’affichage de la page, mais servent
à plusieurs finalités. Par exemple : renseigner une ancienne version d’un
navigateur sur l’impossibilité d’afficher un objet préparé pour un navigateur
plus récent ou renseigner les moteurs de recherche sur le contenu de
votre page, etc.

Characters (Caractères) insère des caractères spéciaux.


Server-side Include insère un espace réservé pour des insertions de
données faites par le serveur. Par exemple, vous voulez que le serveur
inclut toujours l’heure d’affichage d’une page. Vous n’avez pas besoin de
gérer cela. Vous insérez tout simplement un SSI avec un ordre spécifique
au serveur qui, lui, fera le service. SSI’s ont des avantages et de désavan-
tages. Parmi ces dernières, nous trouvons une augmentation du temps
pour afficher une page, des problèmes de sécurité, et le besoin d’avoir un
administrateur capable de travailler avec vous pour faire l’adéquation du
serveur aux besoins de votre site.

Named Anchor (Ancre nommée) permet l’insertion d’une ancre et de


la nommer.

12
Comment (Commentaire) permet l’insertion d’un commentaire dans le
code HTLM.

Script insère un script. Les scripts sont des petits programmes Java
ou Visual Basic (Microsoft). Ces scripts doivent être lus par un navigateur
capable de le faire. Un script peut aussi être inséré comme un lien. Dans
ce cas, la fonction script n’est pas utilisée et le script doit rester sur le
serveur, et répondre à la demande de l’URL. Ce genre de script s’appelle
CGI (Common Gateway Interface).

Non-breaking space (Espace insécable) insère un espace.

Est-ce que la technique suffit pour l’élaboration des


pages web ?

Non ! La maîtrise de la technique est importante pour une personne


responsable de maintenir, d’organiser et de gérer un site. Cependant,
nous ne pouvons pas oublier qu’un site est un moyen de communication
médiatisé par ordinateurs. Un communicateur (soit un coordonnateur de
production, un gestionnaire de communication, un responsable de commu-
nication dans une entreprise publique ou privée) a besoin de comprendre
toutes les dimensions du contenu.
Internet, comme les autres moyens de communication présente trois dif-
férentes dimensions du contenu. Ces dimensions sont la logique (liée à
la syntaxe), l’éthique (liée à la sémantique), et l’esthétique (aussi liée à la
sémantique). L’articulation de ces trois dimensions sera responsable de
la qualité pragmatique du contenu à communiquer.

Conclusion
Nous avons vu dans ce chapitre la matière d’un réseau et la façon selon
les réseaux sont structurés. Nous avons aussi étudié la navigation Internet
et les bases conceptuelles du langage HTML. Ensuite, nous avons décrit
le processus de mise en page web avec trois logiciels différents, et les
conséquences pour le codage. Les menus fichier, texte et insertion du
logiciel Dreamweaver 4 ont été présentés.
Nous avons aussi exposé les limites du savoir technique pour la produc-
tion multimédia et Internet, et le besoin de prendre en considération les
dimensions du contenu.

13
La génération automatique des codes de navigation
et la structuration des sites web
La nature flexible de la toile
Comme nous avons déjà expliqué, l’HTML est un langage créé pour la
toile, à partir du SGML - Standard General Markup Language (page 12,
Chapitre 1). Cependant, avec le perfectionnement des réseaux à travers
des systèmes d’adressage comme le TCP/IP, l’avènement de processeurs
plus rapides et de câbles plus adéquats pour le transport de données, et
le développement de navigateurs plus sophistiqués, le langage HTML est
maintenant dépassé.
Vers l’interactivité totale !
Des codages plus sophistiqués étaient nécessaires pour actualiser la pos-
sibilité d’une plus grande interactivité, résultant du progrès technologique.
Pour satisfaire des besoins urgents, des avances technologiques parallèles
ont été faites.
Le résultat de ces avances fut la création du JavaScript, des feuilles de
styles en cascade (CSS – Cascade Style Sheets), et des modèles de
document-objet (DOM – Document Object Model). L’utilisation conjointe
de ces trois avances technologiques et de la version HTML 3.2 correspond
au codage DHTML ou HTML dynamique. Une autre avance correspond
au codage XML. Nous allons vous expliquer la logique de ces langages
de navigation qui permettent une plus grande flexibilité dans l’affichage
des éléments interactifs.

La génération de codes dynamiques


Le DHTML
L’HTML dynamique correspond au codage des pages qui ont des fonc-
tionnalités interactives. Ces fonctionnalités sont les pages qui bougent,
contiennent des animations, et répondent aux usagers après leur té-
léchargement par le navigateur. Le JavaScript, les feuilles de styles, et les
modèles de document-objet, en combinaison avec l’HTML 3.2 forment le
DHTML ou HTML dynamique. L’utilisation séparée de ces techniques peut
fournir, bien sûr, des éléments dynamiques aux pages web, mais ceux-ci
seront considérés DHTML seulement lorsqu’ils sont utilisés ensemble.
Les logiciels de production Internet, comme Dreamweaver, génèrent
automatiquement le codage DHTML.

1. JavaScript
Pour comprendre le JavaScript, il faut d’abord connaître la signification
de la lecture du côté du serveur ou du côté du « client ». Le serveur est

14
un ordinateur qui utilise un logiciel capable de répondre aux demandes
de documents concernant d’autres types de données. « Client » ici a un
autre sens que, celui, était utilisé dans le premier chapitre. Un « client »
est un programme capable de demander et d’afficher des documents dans
un ordinateur branché à un serveur.
Pour la communication Internet il faut absolument que l’ordinateur soit
branché à un réseau. À l’université, chaque ordinateur du laboratoire doit
recevoir une sous-adresse TCP/IP du serveur de l’université. Le TCP/IP
est un ensemble de protocoles de transmission de données qui permet
à chaque ordinateur de recevoir une adresse. C’est comme les lignes
téléphoniques : chaque maison en a une. Et dans les organisations, on
trouve aussi des extensions d’un numéro général. La sous-adresse est
comme une extension d’un numéro de téléphone. De plus, il faut que des
logiciels de navigation soient installés. À la maison, si nous achetons les
services de Vidéotron, par exemple, il faut installer sur notre ordinateur
des données à partir d’un cédérom. Le cédérom configure le système
de communication de l’ordinateur en lui donnant une sous-adresse de
l’adresse TCP/IP du serveur, et installe aussi un navigateur. Ainsi, à
chaque appel téléphonique, le programme du serveur ira reconnaître son
« client » avant de lui permettre d’utiliser son adresse pour aller chercher
d’autres adresses sur le réseau des réseaux qu’est Internet.
En informatique, nous utilisons le terme « côté serveur » ou « coté
client »pour nous référer à la machine qui lit une fonction déterminée :
si c’est le programme installé sur l’ordinateur à la tête du réseau (le
serveur) ou si c’est le programme installé sur l’ordinateur qui est branché
au serveur.
Prenons l’exemple de la page du saule « inconsolable » J… Elle contient
deux éléments : le texte et l’image du saule. Si nous voulons publier
cette page sur la toile, il faut que le fichier HTML de la page et le fichier
GIF du saule soient, les deux, sous un dossier dans la structure d’arbre
(l’arborescence de l’ordinateur) d’un serveur quelconque. Le navigateur
de notre ordinateur cherche l’adresse TCP/IP du serveur où les fichiers de
la page sont installés. Avant d’afficher la page, il demande au serveur de
chercher ces deux éléments et de les envoyer à l’adresse de l’ordinateur
où le navigateur est installé. Nous parlons ici d’une réponse du serveur à
la requête du client parce que l’affichage de la page et de l’image dépendra
de la réquisition du serveur. Cependant, le codage DHTML de la page peut
contenir des petits programmes avec, par exemple, des comportements
animés qui ne sont pas écrits pour être lus par le serveur (disons, un petit
programme qui fait l’image bouger). Quand le client affiche la page et
l’image à partir du serveur (côté serveur), il lit le programme (côté client)
qui permettra de faire bouger dans l’ordinateur du client l’image liée au
serveur.
Le JavaScript est un langage « côté client » capable de fournir aux pages
web des petits programmes qui insèrent des comportements animés et

15
d’interactivité. Les « mouse rollovers » sont générés par JavaScript. Il
faut préciser que le langage informatique Java n’a RIEN à voir avec le
JavaScript. Le premier est un langage de systèmes. Le deuxième, un
langage complémentaire de navigation. Les JavaScripts sont insérés
dans les pages web comme les balises HTML. Il fonctionne de la façon
suivante :
<SCRIPT LANGUAGE = «JavaScript»>
Le script doit être écrit ici
</SCRIPT>

2. Feuilles de styles en cascade (CCS – Cascade


Style Sheets)
Les feuilles de styles sont des règles capables de décrire l’affichage d’une
page. Chaque règle a deux composantes : le sélecteur et la déclaration.
Le sélecteur correspond à la partie de la règle capable d’identifier l’élément
qui sera affecté. Par exemple, un paragraphe. La déclaration correspond
à la partie de la règle qui définit le style ou les instructions à être imposées
à l’élément. La déclaration est composée de deux parties : la propriété
et la valeur. La propriété définit les paramètres du style (par exemple,
couleur), et la valeur définit la qualité du paramètre (disons, bleu cobalt).
Voici une règle de style :
Selector{property:value}

La caractéristique fondamentale des CSS, c’est d’être « en cascade ».


Cela veut dire qu’on applique un style partout dans le site. Cependant,
les feuilles de styles ont des désavantages. La plus sérieuse vient des
navigateurs. Seulement les versions plus récentes de Navigator et Internet
Explorer supportent les feuilles de styles. De plus, l’affichage des feuilles
de styles obéit à des critères différents selon le navigateur utilisé. Cela
cause des cauchemars aux designers parce qu’un style peut être bien af-
fiché dans un navigateur et pas de tout dans un autre. Et le codage DHTML
pour permettre l’affichage dans les deux navigateurs demande plus que
des logiciels de génération automatique des codes, comme Dreamweaver.
Souvent, il faut que le designer sache corriger tout à main, un travail non
négligeable qui demande de l’expertise en DHTML.
Les avantages sont évidents : avoir un plus grande contrôle de la mise en
page, séparer les commandes de style des commandes DHTML struc-
turales, diminuer la taille des fichiers (on écrit le code des commandes
une seule fois), et permettre une manutention plus facile du site. Un site
géant, avec des centaines de pages, doit utiliser absolument des feuilles
de style pour réaliser sa performance.

16
3. Modèles de document-objet
(DOM – Document Object Model)
Chaque navigateur a un modèle de document-objet particulier. Ce modèle
a une base qui est la fenêtre. Les objets du document sont inscrits dans
l’espace de la fenêtre. Cela inclut l’HTML de la page et les objets liés
comme les images. Pour les pages simples, il n’y a pas de conflits. Pour
les pages compliquées, chaque navigateur ira afficher les objets selon
des logiques structurales différentes. Cette caractéristique affecte les
propriétés des objets, comme le placement, la visibilité, et l’ordre.
Le résultat du problème concernant les différents affichages des modèles
de document-objet, c’est le besoin d’écrire le code DHTML pour les deux
principaux navigateurs : Internet Explorer et Navigator. Les logiciels de
production Internet offrent cette fonctionnalité. Mais souvent des sites
préparés avec eux présentent des problèmes incontournables qui peuvent
seulement être résolus par une intervention manuelle dans l’écriture du
codage DHTML.

Le XML
Le XML (Extensible Markup Language) est un nouveau langage, cousin
du HTML. L’origine du XML est la même que celle du HTML. Il y a des
personnes qui croient que le XML est un dérivé du HTML. En fait, c’est ne
pas le cas. XML dérive du SGML (Standard General Markup Language),
le même langage qui a donné naissance au HTML.
Au contraire du HTML, qui est un langage créé pour l’envoi de contenu aux
navigateurs mais pas aux autres périphériques comme les imprimantes,
le XML permet l’envoi des ordres complexes. Ce langage vise des com-
mandes d’opérations informationnelles complexes, capables d’aller au-delà
du standard HTML. L’HTML est un langage fixe - on pourrait même dire
universel - qui a des balises applicables à plusieurs situations lisibles par
tous les navigateurs sans aucun problème.
Pour qu’ils puissent être utilisés, les documents XML doivent s’appuyer
sur des documents XML spécialement codés et placés sur le serveur. De
plus, ces documents peuvent être convertis dans de documents HTML
capables d’être lus par les navigateurs.
Le grand avantage du XML est sa capacité de gérer des balises (tags)
spécifiques, créées pour des documents aussi spécifiques. Au contraire
du HTML qui a des balises passibles de reconnaissance par tous les navi-
gateurs, chaque document XML contient des balises que lui sont propres.
En fait, nous ne pouvons pas parler du XML mais des XMLs. Des codages

17
XML faits pour un petit réseau ou pour une communauté en utilisant un
réseau peuvent être spécialement développés. Un langage XML, par
exemple, est le SMIL (Synchronized Multimedia Integration Language),
développé avec le but de garantir la synchronie parfaite des textes, vidéo,
audio, et des images graphiques. Le XML est aussi très adéquat pour la
préparation des documents qui utilisent des graphiques vectoriels (voir le
Chapitre 2 du CODEX du cours Communication Informatisée I dans le site
du professeur pour des explications sur ce qu’est un vecteur).
Transformer un document HTML dans un document XML est très facile
parce que les deux langages ont la même origine. D’abord, il faut que
l’écriture HTML soit propre, avec tous les marquages correctement placés.
Ensuite, il faut remplacer certains marquages. Le développement du XLM
pourra, dans le futur, remplacer le langage HTML et DHTML parce qu’il est
flexible comme la toile. Les nouvelles versions des logiciels de production
Internet sont capables de générer des documents XML. Cependant, il faut
être prudent dans son utilisation parce que, comme on le dit plus haut, il
faut que l’HTML soit bien formé, et cette technologie demande encore un
plus grand développement.

L’interface de Dreamweaver
Nous avons déjà pris connaissance de trois menus de l’interface de
Dreamweaver dans le chapitre 2 (pages 37 à 48). Nous allons dans ce
chapitre entrer en contact avec les autres menus et les palettes, et puis,
apprendre à ouvrir un site.

Une question de temps…

Apprendre à connaître les fonctions d’un logiciel n’est pas évident. Mais
ce n’est pas de tout un mystère. Vous avez déjà réussi à comprendre
Illustrator et PhotoShop… Dreamweaver est seulement un autre logiciel,
avec des fonctions différentes, conçu pour assister les personnes à créer et
maintenir des sites web. Il n’y a pas une grande différence entre ce logiciel
de production Internet et les autres. La raison est simple : tous génèrent
des balises spécifiques à partir d’une fonction du menu. L’organisation
des fonctions dans les menus peut être différente, ainsi que le titre donné
à ces fonctions. Mais la logique reste la même : la génération cachée du
codage HTML. Si vous comprenez la logique du HTML, vous comprendrez
aussi la logique de tous les logiciels de production Internet.

18
Figure 1 - L’interface de Dreamweaver.

Les menus de Dreamweaver 4.0


Nous avons déjà vu les menus fichier, insertion et texte, et appris que
Dreamweaver a deux ensembles de menus : un pour la préparation des
pages web, et l’autre pour la gestion des sites. Il y a plusieurs fonctions dans
les deux menus qui sont les mêmes, mais il faut s’habituer aux deux pour
bien comprendre le logiciel. Nous verrons brièvement les autres menus.

4. Le menu Édition
Le menu édition permet la modification des documents. Voici les
fonctions :
Undo (Annuler) annule la dernière action.
Repeat (Rétablir) rétablit la dernière action.
Cut (Couper) coupe l’objet.
Copy (Copier) copie l’objet.
Paste (Coller) colle l’objet.
Clear (Effacer) efface l’objet.
Copy text only (Copier comme texte) copie seulement le texte, en ignorant
le code HTML à l’arrière.
Paste as text (Coller comme texte) colle seulement le texte, en ignorant
le code HTML à l’arrière.

19
Figure 2 - Le menu édition.

Select All (Sélectionner tout) sélectionne tous les objets du document.


Select Parent Tag (Sélectionner balise parente) sélectionne la balise
parente (supérieure) de l’objet choisi. Cette fonction est utilisée avec
l’Éditeur rapide de balises (Quick Editor Tag), un outil de Dreamweaver
pour les personnes qui maîtrisent le langage HTML.
Select Child (Sélectionner enfant) sélectionne la balise dépendante (in-
férieure) de l’objet choisi. Cette fonction est aussi utilisée avec l’Éditeur
rapide de balises (Quick Editor Tag).
Find… (Rechercher…) recherche des textes, des balises, et d’autres
textes HTML.
Find Next (Rechercher à nouveau) recherche des textes, des balises, et
d’autres textes HTML.
Replace… (Remplacer…) remplace des textes, des balises, et d’autres
textes HTML.
Launch External Editor (Lancer éditeur externe) permet qu’un éditeur
externe HTML puisse être utilisé à l’intérieur de Dreamweaver.
Preferences… (Préférences…) définit les préférences concernant la
programmation par défaut des fonctions de base de Dreamweaver.

20
Figure 3 - La fenêtre Préférences et ses fonctions.

5. Le menu Affichage
Le menu affichage permet le choix des fonctions que vous voulez voir
affichées sur l’écran.

Figure 4 - Le menu affichage.

Voici les fonctions :


Head Content (Contenu de l’en tête) affiche une barre qui permet de
contrôler les fonctions de la section HTML «<head>
Invisible Elements (Éléments invisibles) permet de voir des éléments qui
ne sont pas affichés dans l’écran mais qui sont importants pour avoir un
contrôle sur la page (comme les ancres)

21
Layer Borders (Bordures de calque) affiche la bordure du calque où un
élément donné était inséré.
Table Borders (Bordure de tableau) affiche la bordure d’un tableau inséré
sur la page.
Frame Borders (Bordure de cadre) affiche la bordure qui sépare les
différentes fenêtres d’un jeu de cadres.
Image Maps (Cartes graphiques), une fonction nouvelle en Dreamweaver,
affiche les éléments d’une image map d’une page.
Rulers (Règles) permet d’afficher les règles de contrôle des pages par
pixels, par pouces ou par centimètres.
Grid (Grille) permet d’afficher la grille, de la personnaliser et de prévoir de
magnétisme à l’égard des objets insérés dans la page.
Prevent Layer Overlaps (Empêcher le chevauchement des calques) est
une fonction utilisée pour garantir qu’il n’y a pas de calques cachés à
l’arrière des autres.
Tracing Images (Tracé de l’image) est une fonction qui permet l’affichage
d’une image JPEG dans le document en tant qu’un guide de composition.
Cela veut dire que l’image ne sera jamais lue par le navigateur, et donc,
jamais vue par l’usager.
Plugins (Plug-ins) permet un aperçu des objets qui ont besoin de plug-ins
comme des vidéos, des animations, etc.
Status Bar (Barre d’état) affiche des informations concernant la partie
HTML du document où nous travaillons (si <head>, <body>, etc.), la taille
de la fenêtre, le temps d’affichage de la page et la taille du fichier. La barre
affiche aussi une version miniaturisée du lanceur.

6. Le menu Modifier
Le menu modifier affiche les mêmes fonctions que nous trouvons dans
la palette objets. Il offre les objets disponibles pour insertion et aussi les
fonctions de modification des attributs des pages web liées à ces objets.
Voici les fonctions :
Page Properties… (Propriétés de la page…) affiche une fenêtre qui donne
accès aux contrôles de configuration des pages web.
Selection Properties (Propriétés de la sélection) affiche la fenêtre de l’inspecteur
de propriétés qui permet la sélection et la modification de textes.
Quick Tag Editor est un éditeur qui insère et modifie des tags dans le
codage HTML.

22
Make Link / Change Link (Créer un lien / Modifier le lien) permet de lier
des images à d’autres pages ou de changer ces liens.
Remove Link (Supprimer un lien) supprime un lien déjà inséré.
Open Linked Page… (Ouvrir la page liée…) permet d’ouvrir la page liée
à un lien trouvé dans une image.
Link Target (Cible du lien) permet la définition de l’affichage du lien (si la
page liée occupe le même espace que la page source ou si une nouvelle
fenêtre du navigateur s’ouvre, par exemple).
Table (Tableau) affiche un menu spécifique qui concerne les fonctions de
modification des tableaux, comme insertion et suppression de colonnes, etc.

Figure 5 - Le menu modifier.

Layers and Hotspots (Calques et zones réactives) permet la sélection


et modification des propriétés des calques et des zones réactives des
“image maps”.
Frameset (Jeu de cadres) permet la création ou la modification d’un jeu
de cadres.
Navigation Bar (Barre de navigation) sert à la modification des images
insérées dans une barre de navigation.
Layout Mode (Mode de mise en forme) permet la conversion de calques
en tableaux et de tableaux en calques.
Library (Bibliothèque) permet l’insertion des objets d’une page dans la
base de données de la bibliothèque.
Templates (Modèles) sert à la création et modification de modèles de
pages web.

23
Timeline (Scénario) permet l’édition et la modification des animations faites
avec la palette scénario.
Translate (Traduire) permet la modification des insertions des objets côté
serveur et des dates.

7. Le menu Commandes
Le menu commande offre plusieurs commandes automatiques. Avec
ces commandes, nous pouvons enregistrer des actions faites à plusieurs
reprises de façon automatisée, nettoyer les codages HTLM originaux
de différentes sources, travailler directement avec Fireworks, un logiciel
de production graphique et des animations simples, créer automatique-
ment des albums de photos, formater des tableaux, et ajuster la palette
de couleurs. On trouve d’autres commandes dans la version pour les
ordinateurs Macintosh.

Figure 6 Le menu commandes.

Voici les fonctions :


Start Recording (Démarrer l’enregistrement) démarre l’enregistrement d’un
ensemble d’actions qui pourront être appliquées automatiquement.
Play Recorded Command… (Réproduire la commande enregistrée…)
ordonne à l’ordinateur de démarrer la commande enregistrée.
Edit Command List… (Modifier la liste de commandes) permet la gestion
de plusieurs commandes.
Get More Commands… (Télécharger d’autres commandes…) permet

24
de lier notre ordinateur au site web de Macromedia où des commandes
gratuites sont disponibles pour les usagers inscrits.
Clean Up HTML… (Nettoyer HTML…) déclenche une opération de nettoy-
age des balises propriétaires et d’autres balises et codages inutiles pour
le bon fonctionnement de l’HTML.
Clean Up Word HTML… (Nettoyer HTML Word…) permet un nettoyage
spécifique de l’HTML généré par le logiciel Word.
Add / Remove Netscape Resize Fix… (Ajouter / Supprimer correction
pour redim. Dans Netscape) permet la correction d’un bogue du naviga-
teur Netscape qui empêche le bon affichage de la page quand elle est
redimensionnée.
Optimize Image in Fireworks… (Optimiser l’image dans Fireworks…)
ajuste la qualité des images produites avec le logiciel Fireworks pour
l’affichage web.
Create Web Photo Album… (Créer un album photos pour le web…) permet
la création automatique d’un album de photos.
Apply Source Formatting (Appliquer le formatage de la source) dé-
termine l’application du formatage de la source HTML défini dans les
préférences.
Format Table… (Formater le tableau…) permet le formatage de plusieurs
caractères des tableaux.
Sort Table… (Trier le tableau…) permet l’application d’une commande de
triage des éléments d’un tableau.
Set Color Scheme… (Définir la palette de couleurs…) permet le choix
d’un système de couleurs pour les liens des pages web ou la définition
d’un système nouveau.

8. Le menu Sites
Le menu site permet la gestion du site web créé avec Dreamweaver. Cette
gestion permettre aux producteurs de partager, modifier, éditer et manipuler
les fichiers du site à partir de la machine utilisée par la production sur le
serveur où le site est installé.
Voici les fonctions :
Site Files (Archives du Site) affiche tous les archives du site.
Site Map (Carte du site) affiche la carte structurale du site.
New Site… (Nouveau site…) permet l’ouverture d’un nouveau site et
l’administration de tous ses réglages.

25
Open Site… (Ouvrir site…) permet l’ouverture d’un site déjà ouvert
Define Sites… (Définir sites…) permet la modification des réglages d’un
site déjà ouvert.

Figure 7 - Le menu sites.

Get (Acquérir) permet d’acquérir une copie du fichier qui est sur le serveur
sans le retirer pour travailler sur elle et puis remplacer la version modifiée
par celle qui est resté dans le serveur.
Check Out (Extraire) permet de travailler sur un fichier de la même façon
que « get » avec la seule différence que, dans ce cas, plusieurs personnes
(et non seulement une) ont le privilège de procéder à des modifications
(chacune à la fois).
Put (Placer) permet de transférer un fichier modifié du site local au
serveur.
Check In (Archiver) permet de travailler sur un fichier de la même façon que
« put » avec la seule différence que, dans ce cas, plusieurs personnes (et
non seulement une) ont des privilèges de modification (chacune à la fois).
Undo Check Out (Annuler extration) permet l’annulation de l’opération
d’extraction.
Check Links Sitewide (Vérifier les liens sur tout le site) vérifie automatique-
ment tous les liens internes et externes d’un site en offrant un bilan des
problèmes pour qu’ils puissent êtres résolus.
Locate in Local Site (Retrouver sur le site local) trouve le fichier dans
l’arbre du site local et l’affiche.
Locate in Remote Site (Retrouver sur le site distant) trouve le fichier dans
l’arbre du site distant.

26
9. Le menu Fenêtre
Le menu fenêtre affiche les différentes palettes et fenêtres de Dream-
weaver:

Figure 8 - Le menu fenêtre.

Voici les fonctions :


Objects (Objets) affiche la palette objets.
Properties (Propriétés) affiche l’inspecteur de propriétés.
Launcher (Lanceur) affiche le lanceur.
Site Files (Fichiers du site) affiche la fenêtre du site avec l’arbre des
fichiers.
Site Map (Carte du site) affiche la fenêtre du site avec la carte.
Library (Bibliothèque) affiche la palette bibliothèque
CSS Styles (Styles CSS) affiche la palette de feuilles des styles
HTML Styles (Styles HTML) affiche la palette de styles HTML.
Behaviors (Comportements) affiche la palette comportements.
History (Historique) affiche la palette historique.
Timelines (Scénario) affiche la palette scénario.
HTML Source (Source HTML) affiche la fenêtre de la source HTML du
document.

27
Frames (Cadres) affiche la palette cadres.
Layers (Calques) affiche la palette calques.
Templates (Modèles) affiche la palette modèles.
Arrange Floating Palettes (Réorganiser les palettes flotantes) organise
les palettes dans l’écran.
Hide Floating Palettes (Masquer palettes flotantes) cache les palettes.

10. Le menu Aide


Le menu aide affiche les options d’aide disponibles, comme un tutoriel et
une assistance en ligne Macromedia.

Figure 9 - Le menu aide.

28
Les menus de création et gestion des sites
Nous avons vu les menus qui sont affichés quand nous travaillons sur un
document. Cependant, quand nous administrons le site, il y a un autre
environnement dans l’interface de Dreamweaver. Voici l’interface de
création et de gestion des sites.

Figure 10 - Modalité site

1. Le menu fichier
Voici les fonctions :
New Window (Nouvelle fenêtre) ouvre un nouveau document HTML.
New from template… (Nouveau à partir d’un modèle…) ouvre une nouvelle
page HTML structurée selon un modèle de conception déjà préparé.
New file (Nouveau fichier) ouvre une nouvelle page HTML dans la structure
de l’arbre du site.
New folder (Nouveau dossier) ouvre un nouveau dossier dans la structure
de l’arbre du site.
Open… (Ouvrir…) ouvre un fichier déjà créé.
Open Selection (Ouvrir sélection) ouvre un fichier sélectionné dans l’arbre
du site.
Close (Fermer) ferme un fichier ou un site ouvert.

29
Save Site Map (Enregistrer carte du site) enregistre la carte du site.
Rename (Renommer) permet qu’un fichier soit renommé.
Delete (Supprimer) supprime le fichier sélectionné.
Turn Off Read Only (Arrêter option de lecture) permet d’activer un fichier
ouvert pour la lecture.
Design Notes… (Notes de design) affiche la fenêtre de notes de design.
Preview in browser (Aperçu dans le navigateur) affiche la page dans le
navigateur choisi. La fonction vous permet de gérer la liste de navigateurs
disponibles dans la fonction préférences.

Figure 11 - Menu fichiers des sites.

Check links (Vérifier liens) vous permet de voir si les liens de la page ou
du site entier sont actifs.
Check target browsers (Vérifier les navigateurs cibles) vous permet de
vérifier l’affichage de la page avec l’utilisation d’un navigateur choisi.
Quitter (Exit) ferme l’application.

2. Le menu Édition
Voici les fonctions :
Cut (Couper) coupe le fichier.
Copy (Copier) copie le fichier.
Paste (Coller) colle le fichier.

30
Select All (Sélectionner tout) sélectionne tous les fichiers.
Select Newer Local (Sélectionner les nouveaux fichiers du site en local)
permet le vérifier quels fichiers du site en local ont été modifiés.
Select Newer Remote (Sélectionner les nouveaux fichiers du site distant)
permet le vérifier quels fichiers du site distant ont été modifiés.

Figure 12 - Menu édition des sites.

Invert Selection (Sélection inversée) permet l’inversion d’une sélection


de fichier.
Locate in Local Site (Trouver dans site en local) permet la localisation d’un
fichier du site en local.
Locate in Remote Site (Trouver dans le site distant) permet la localisation
d’un fichier dans le site distant.
Find… (Rechercher…) recherche des fichiers et des dossiers.
Replace… (Remplacer…) remplace des fichiers et des dossiers.
Preferences… (Préférences…) définit les préférences concernant la
programmation par défaut des fonctions de base de Dreamweaver.

3. Le menu Affichage
Voici les fonctions :
Refresh Local (Recharger site en local) recharge la structure du site en local.
Refresh Remote (Recharger site distant) recharge la structure du site
distant.

31
Figure 13 - Le menu affichage des sites.

Show / Hide Link (Afficher / Masquer lien) affiche ou masque le lien d’une
page.
View as Root (Afficher comme racine) permet d’afficher une page comme
racine.
Show Files Marked as Hidden (Afficher les fichiers caches) permet de voir
les fichiers cachés d’un site.
Show Dependent Files (Afficher fichiers dépendants) permet d’afficher les
fichiers qui sont dépendants des autres.
Show Page Titles (Afficher titre des pages) affiche, dans la carte, les pages
avec les titres.
Layout... permet de régler les commandes d’affichage.
Tool Tips (Astuces des outils) affiche dans la barre d’état des informations
sur les fichiers.

4. Le menu Sites
Voici les fonctions :
New Site… (Nouveau site…) permet l’ouverture d’un nouveau site et
l’administration de tous ses réglages.
Open Site… (Ouvrir site…) permet l’ouverture d’un site déjà ouvert.
Define Sites… (Définir sites…) permet la modification des réglages d’un
site déjà ouvert.

32
Connect (Connecter) établit une connexion avec le serveur.
Get (Acquérir) permet d’acquérir une copie du fichier qui est sur le serveur
sans retirer ce dernier. On travaille sur la copie (côté client) et puis on
remplace le fichier (côté serveur) par la version modifiée.
Check Out (Extraire) permet de travailler sur un fichier de la même façon
que « get » avec la seule différence que, dans ce cas, plusieurs personnes
(et non seulement une) ont le privilège de procéder à des modifications
(chacune à la fois).

Figure 14 - Le menu sites.

Put (Placer) permet de transférer un fichier modifié du site local au serveur.


Check In (Archiver) permet de travailler sur un fichier de la même façon
que « put » avec la seule différence que, dans ce cas, plusieurs personnes
(et non seulement une) ont le privilège de procéder à des modifications
(chacune à la fois).
Undo Check Out (Annuler extration) permet l’annulation de l’opération
d’extraction.
Check Links Sitewide (Vérifier les liens sur tout le site) vérifie automatique-
ment tous les liens internes et externes d’un site en offrant un bilan des
problèmes pour qu’ils puissent êtres résolus.
Change Links Sitewide (Changer les liens sur tout le site) permet de faire
un changement général avec un seul réglage.
Synchronize (Synchroniser) permet de synchroniser tout le site qui est
dans le serveur avec le site local.
Recreate Site Cache (Recréer le cache du site) recrée le fichier
« cache »du site. Le « cache » améliore la vitesse des liens et les tâches
d’administration du site.

33
Link to New File… (Lier à un nouveau fichier) permet de lier un fichier déjà
créé à un nouveau fichier.
Link to Existing File… (Lier à un fichier existant) permet de lier un fichier
déjà créé à un autre fichier.
Change Link… (Changer le lien…) permet de changer le lien d’une page.
Remove Link… (Supprimer le lien…) permet de supprimer le lien d’une page.
Open Source of Link… (Ouvrir la source du lien) permet que la source
HTML du lien soit ouverte.
New Home Page (Ouvrir une page d’accueil) ouvre une page d’accueil
nouvelle. FAITES ATTENTION À CELA : N’OUVREZ JAMAIS
UNE NOUVELLE PAGE D’ACCUEIL DANS UN SITE DÉJÀ
CONSTRUIT !
Set as Home Page (Définir une page d’accueil) définit une page en tant
que page d’accueil.

5. Le menu Fenêtre

Figure 15 - Le menu fenêtre des sites.

Voici les fonctions :


Site Files (Fichiers du site) affiche la structure des dossiers et de fichiers
du site.
Site Map (Carte du site) affiche la carte du site.
Site FTP Log (Lanceur) ouvre la fenêtre de configuration du log FTP.

34
6. Le menu Aide
Le menu aide des sites est exactement le même que celui des documents.

Structuration: le secret des sites web bien faits

Nous allons voir dans le prochain chapitre, les diverses structurations


possibles des sites web. Cependant, pour le moment, il est suffisant de
bien comprendre une exigence de base du travail de production Internet.
Comme pour tout travail en multimédia : il faut être absolument organisé,
et l’organisation doit transparaître dans la structure du site. Un site mal
structuré est un site destiné au fracas.
Structurer un site veut dire structurer l’arbre de fichiers dans le disque
dur de l’ordinateur. La façon la plus simple de structurer un site est de
mettre tous les fichiers dans un seul dossier. Cependant, cela ne marche
seulement que pour des sites très petits, pour des essais. Un site régulier
demande la production de dizaines des fichiers de plusieurs types. Donc,
il faut les organiser. Normalement, nous ouvrons des dossiers différents
pour grouper des fichiers du même type. Par exemple, un dossier avec
des images, d’autre avec des vidéos, et ainsi de suite. Normalement, les
pages du site restent hors de ces sous-dossiers, dans le même dossier
qui classe les sous-dossiers (la racine). Les sites complexes demandent
des structures encore plus complexes, mais il n’y a pas de règle générale.
La seule règle c’est l’exigence absolue d’ordre, d’une structure qui bien
classifie tous ces éléments et sous-éléments.

Conclusion

Nous avons expliqué dans ce chapitre pourquoi la nature de la toile est flex-
ible, à travers la description du fonctionnement des éléments dynamiques
du HTLM : le JavaScript, les feuilles des styles en cascade, et les modèles
des documents-objets. Nous avons aussi vu comment le XML fonctionne
et les contributions dynamiques de ce nouveau codage.
Ensuite, nous avons présenté l’interface de Dreamweaver côté document
et côté site. Nous avons expliqué sommairement toutes les fonctions
incluses dans les menus, et nous avons exposé une vision générale du
fonctionnement du logiciel.
Finalement, nous avons montré l’importance de la structuration pour
la construction des sites web. Dans le prochain chapitre, nous allons
étudier plusieurs formes de construction des sites, étudier des ques-
tions ergonomiques de base, et le rôle des significations dans l’échange
communicationnel avec les interfaces des ordinateurs.

35