Avant de lancer Dreamweaver, créez un dossier qui sera le dossier racine de votre site.

Au lancement le logiciel ouvre une page vierge. Enregistrez-la dans votre dossier par "Fichier" puis "Enregistrer sous" sous le nom de index.htm ou de default.htm . Elle sera la page d'accueil de votre site.

Il faut maintenant penser à créer un fichier de site pour que Dreamweaver puisse écrire les liens correctement

Dans le coin inférieur droit un série d'icône permet de lancer le mode site (première icône à gauche)

Une fenêtre permet de visualiser les sites. En cliquant sur "Sites" puis "Nouveau site", vous accédez à une fenêtre qui permet de définir la localisation d'un site et la page d'accueil du site. Ces informations sont indispensables pour que les liens soient établis, vérifiés et éventuellement mis à jour. Cette fenêtre sera aussi utilisée pour le téléchargement sur un serveur distant.

Dans la catégorie "infos locales" donnez un nom au site puis indiquez le chemin du dossier. L'icône "dossier" permet de le faire par navigation dans l'arborescence.

Dans "Mise en forme de la carte du site" indiquez le nom du fichier d'accueil du site. vous aurez maintenant la possibilité de visualiser dans l'une des fenêtres la carte du site et dans l'autre l'arborescence à partir du fichier d'accueil en utilisant ces icônes.

La fenêtre "Document" présente une barre de menus déroulants classique où vous retrouverez toutes les commandes du logiciel.

Il n'y a pas de barre d'outils classique mais la commande "fenêtre" puis "objet" permet d'afficher une boîte à outils flottante présentant quatre aspects suivant la tâche à réaliser. Le passage de l'un à l'autre se fait en pointant la petite flèche en haut à droite. Un survol de souris sur chaque icône permet de découvrir sa fonction.

La commande "propriétés" du menu "Fenêtre" déclenche l'affichage de l'inspecteur de propriété. Cet inspecteur est contextuel. Il changera selon que l'objet mis en surbrillance est du texte, une image ou un tableau.

La frappe du texte se fait comme dans un traitement de texte classique et toute les commandes de format, de couleur, etc... sont réglables dans cet inspecteur de propriétés

La commande "Éléments invisibles" du menu "Affichage" conduit à l'affichage d'icône dans une barre spéciale au dessus de la plage de saisie.

Un clic sur l'un de ces objets modifie l'inspecteur. vous pouvez alors changer les caractéristiques de l'objet.

La fenêtre d'objet "En-tête" permet de rajouter les objets nécessaires tel que les "meta" et les mots clés. N'oubliez pas de séparer ces derniers par le signe ";".

L'outil "image" de la fenêtre d'objets "commun" permet de choisir l'image dans une fenêtre du genre "explorateur".

Une prévisualisation est présentée ainsi qu'un affichage des propriétés de l'image.

Une fois affichée l'image est sélectionnable par un simple clic. Dans ce cas l'inspecteur de propriétés change d'aspect.

Il est fortement conseillé de ne pas changer les valeurs L et H pour que l'affichage soit correct.

Cliquez sur l'icône tableau de la fenêtre d'objets "commun". Une boîte de paramétrage s'affiche pour définir les caractéristiques du tableau.

Après validation le tableau est inséré dans la page.

L'inspecteur de propriété du tableau s'affiche en cliquant sur les bords droits ou inférieurs du tableau ainsi que sur les limites séparatives (sauf les bords supérieurs et gauche).

L'inspecteur change si le curseur est dans une cellule du tableau. Cela permet d'accéder à d'autres propriétés

La modification de ce tableau se fait en plaçant la surbrillance dans le tableau et en cliquant à droite.

Le passage de la souris sur les bordures gauche ou supérieure ou un balayage sur les cellules sélectionne la ligne, la colonne ou les cellules concernées. Les commandes passées alors ne s'appliqueront qu'à la sélection qui est encadrée.

Dreamweaver offre de nombreuses méthodes pour instaurer des liens. Pour toutes ces méthodes il faut au préalable mettre en surbrillance le texte ou l'image qui seront le point de départ du lien.

La fenêtre lien permet d'écrire directement le nom du fichier lié.

La petite icône "viseur" peut être prise avec la souris et traînée vers un fichier ouvert à côté du fichier de travail lorsqu'on travaille en mode "multifenêtre"

La petite flèche à droite permet de choisir directement le fichier dans la liste des fichiers déjà ouverts sur le bureau.

L'icône dossier ouvre un explorateur ordinaire pour parcourir l'arborescence.

Pour une bonne rédaction du lien il est impératif de choisir un fichier déjà situé à l'intérieur du site que l'on a déclaré au début. Sinon le lien est construit de façon absolue avec une adresse du genre "file c: \\....." il ne fonctionnera pas sur un serveur à distance.

Si le document doit être affiché dans une fenêtre particulière n'oubliez pas de le préciser en renseignant la case "Cible".

La réalisation d'un lien interne à la page nécessite la pose d'une ancre.

Mettez le mot devant servir d'ancre en surbrillance et sélectionnez l'outil "ancre" dans les objets invisibles. Nommez l'ancre dans le cadre "ad hoc" en n'utilisant qu'une chaîne de caractères minuscules sans aucun caractère spécial ni d'espace.

Retournez au mot devant servir de point de départ au lien et utilisez le petit viseur en le traînant sur le signe d'ancre. Le nom de l'ancre précédé du signe "#" s'affiche dans la fenêtre "Lien". Si cette ancre est loin, faites défiler la page en mettant le viseur sur les flèches de l'ascenceur.

La vérification d'un lien est une tentation fréquente. Un clic droit sur un lien affiche un menu contextuel avec la commande "Afficher la page liée". Une nouvelle fenêtre s'ouvre alors avec le fichier demandé.

Sélectionnez l'image par un simple clic. Elle apparaît encadrée.

En utilisant le bouton "Carte" on déclenche l'affichage d'un éditeur de carte graphique.

Il suffit de donner un nom à la carte, de choisir un outil graphique puis de tracer la forme sur l'image. Dans la boîte "lien" on choisira le nom du fichier à lier. Dans la boite "Cible" éventuellement le cadre d'affichage. La boite "Secondaire" permet d'écrire quelques mots de commentaires qui s'afficheront lors du balayage de la zone sensible par la souris.

Lorsque toutes les zones et tous les liens sont créés, cliquez sur OK. La carte et les liens sont créés dans la page html (côté client) mais vous ne pouvez pas les faire fonctionner en mode création. Pour cela il va falloir apprendre à vérifier l'affichage dans un navigateur.

Dans le menu "Fichier" utilisez la commande "Aperçu dans le navigateur" et choisissez le navigateur.

La commande "Vérifier navigateur cible" vous permet de faire une analyse ligne par ligne de la page écrite et de voir ainsi quelles seront les versions de navigateurs qui poseront des problèmes pour afficher votre page.

L'utilisateur de Dreamweaver peut très bien faire toutes ses pages en indiquant les formats au fur et à mesure de la composition. Cela sera un peu fastidieux s'il a envie de sortir des sentiers battus en matière de police, de taille, de couleur, d'alignement. L'utilisation d'une feuille de style permet de définir par avance les styles à appliquer au différentes parties d'un document ou d'un ensemble de document. Deux modalités sont possibles :

- l'une incorpore la feuille de style au document,

- l'autre utilise une feuille de style externe liée au document ce qui permet d'utiliser la même feuille de style pour un ensemble de page, voir pour tout un site.

Pour une feuille de style incorporée au document, la commande style du menu "fenêtre" permet de d'afficher une nouvelle fenêtre dédiée aux style. Par un "glissé déposé" elle peut être superposée à la fenêtre "objets"

Au départ la feuille de style est vide. Si l'on clique sur "Nouveau", une nouvelle fenêtre permet de créer un nouveau style. Ce style pourra ensuite être "Edité" afin de le modifier.

La première boîte demande de sélectionner le type (gardez le premier choix) et de lui donner un nom. Ce nom doit commencer par un point et ne comporte que des caractères minuscules ordinaires et des chiffres sans espaces ni accents.

La fenêtre de définition des styles offre la possibilité de définir un grand nombre de paramètres. Activez les catégories utiles et faites tous les réglages avant de valider.

Pour appliquer le style à un objet, placez le pointeur à l'intérieur et cliquez sur le style dans la boîte de style. Vous pouvez généralement voir l'effet à l'écran. Pour certains styles il faudra passer par un aperçu dans le navigateur. Vous pourrez à tout moment changer le style en l'éditant. Tous les objets auxquels vous aurez appliqué ce style se conformeront à la nouvelle définition.

Pour une feuille de style externe qui correspond à un fichier ".css" la démarche est différente au début. En cliquant sur "lien", vous ouvrez la boîte "Ajouter une feuille de style externe". Pour rechercher une feuille existante cliquez sur "parcourir".

Pour en créer une nouvelle, entrez un nom de fichier qui n'existe pas encore en terminant par ".css". Vous pourrez ensuite l'editer et créer ou modifier des styles.

Au moment de la mise en place sur le serveur n'oubliez pas de joindre votre feuille de style à vos fichiers textes et images.

La fenêtre "code source" est affichable à tout moment par un clic sur la sixième icône de cette barre.

Les changements opérés dans le code sont, pour les choses les plus simples, immédiatement répercutée dans la fenêtre de document. Pour les comportements plus compliqués il faudra aussi passer par un aperçu dans le navigateur de son choix. Si des incohérences apparaissent à la suite de ces modifications, des surlignages de couleurs vous rappellent à l'ordre.

Lorsque l'on importe du code issu d'un autre logiciel d'édition html. Il peut être très intéressant de nettoyer les fichiers des balises inutiles. Choisir pour cela "commandes" puis "nettoyer l'HTML"

La création d'un jeu de cadres est toujours un peu difficile. Il faut avoir créé à l'avance les pages qui seront positionnées dans ces cadres. Un fois que cela est fait, ouvrez une nouvelle page et sélectionnez "Jeu de cadres" dans le menu "modifier". Choisissez le mode de fractionnement et observez la mise en place d'une bordure que vous pouvez déplacer avec la souris. Avant d'aller plus loin enregistrez votre jeu de cadre par "Fichier" et "Enregistrer le jeu de cadres sous". N'oubliez pas que ce fichier est indépendant des fichiers qu'il est appelé à accueillir.

Un inspecteur de propriété "cadre" permet de régler les paramètres du jeu de cadres.

Pour sélectionner un cadre particulier appuyez sur la touche <alt> en cliquant dans ce cadre avec la souris. Un nouvel inspecteur de propriétés s'affiche. Il permet de régler les caractéristiques du cadre et en particulier le nom du fichier à afficher dans le cadre. N'oubliez pas que la première chose à faire est de nommer ce cadre.

Ici le cadre appelé "gauche" est réglé pour empêcher le redimensionnement et l'affichage des barres de défilement. Les marges et les bordures sont à zéro.

Si vous voulez faire un lien d'un cadre à son voisin n'oubliez de sélectionner le nom du cadre dans le champ "cible" de l'inspecteur de propriétés de lien.

Lors de la fermeture du jeu de cadre un message demandera si vous voulez enregistrer aussi bien les modifications du jeu de cadre que celles affectant les fichiers affichés dans les cadres.

A partir des navigateurs 4, les calques offrent des possibilités graphiques nouvelles. Ce sont en effet des objets positionnés de façon absolue dans la page. Ils sont doués de toutes les propriétés d'une page mais sur une portion limitée de la page. Une icône de la fenêtre d'objet permet de le tracer sur la page. Le calque est un objet redimensionnable par ses poignées.

Un inspecteur de propriété spécial est affecté aux calques. Attention au choix de la balise. Pour IE il faut utiliser "DIV" et pour Netscape "LAYER". Les deux systèmes ne sont pas compatibles. Vérifiez le résultat en faisant un aperçu dans le navigateur de votre choix et avertissez les clients.

Par prudence ne mélangez pas les calques avec des textes et des tableaux classiques. Le résultat risque d'être illisible.

En choisissant "Fenêtre" puis "comportement" une fenêtre spéciale s'ouvre. Elle permet de choisir le type de navigateur cible. Gardez l'option par défaut "navigateurs 4.0"

L'étape suivante consiste à mettre en surbrillance un objet (texte ou image) pour lui associer un comportement. Ensuite un clic sur le "+" affiche une liste d'actions. Suivant l'objet et le navigateur choisi, la liste est différente.

Après avoir choisi l'action il faut choisir l'événement qui la déclenche. Sélectionnez-la dans la liste. Enregistrez votre fichier.

Vérifiez dans le navigateur que tout marche comme prévu.

Pour retirer une action sélectionnez-la et cliquez sur "-"

Des exemples plus précis de comportements sont données en fin de page.

Les éléments flash et shokwave sont des animations conçues par des logiciels spécifiques de macromédia. Vous devez avoir construit ces fichiers avant toute incorporation dans une page. Pour l'incorporation utilisez l'outil de la palette objets communs. Après avoir choisi le fichier correspondant dans la boîte de dialogue, l'objet apparaît sous la forme d'une icône.

Un inspecteur de comportement est associé à cette icône et permet de paramétrer l'objet. Il faudra visualiser la page dans un navigateur pour vérifier son fonctionnement.

La fenêtre spéciale de gestion des sites s'ouvre en cliquant la première icône de la barre d'outil appropriée.

Deux fenêtres s'affichent sous barre barre d'outils. La plus facile à utiliser est une sorte d'explorateur. Vous pouvez ainsi ouvrir les fichiers pour vérifier le contenu.

Cette fenêtre est aussi très utile pour renommer les fichiers. Il vous sera automatiquement proposé de mettre à jour tous les liens qui aboutissent à ce fichier.

Cette fonction connaît cependant une limite : le simple remplacement d'une majuscule par une minuscule ne provoque pas la mise à jour. Il faudra donc faire un changement plus important pour qu'il soit pris en compte.

De même les fichiers appellés par des java scripts ou des applets java ne bénéficient pas de la mise à jour des liens.

Le second écran est affiché par le bouton situé à droite.

Il montre l'arborisation du site et permet les actualisations et les contrôles

A condition de saisir les caractéristiques du serveur d'hébergement du site, il est possible de faire le téléchargement des pages sur le serveur. L'utilisation de ce module est cependant pleine d'aléas. Mieux vaut utiliser les logiciels ftp spécialisés.

Le menu "Fichier" contient les fonctions de vérification des liens pour les pages ou le site entier.

La fenêtre du vérificateur permet de pointer les liens brisés, les liens externes et les fichiers orphelins. Opérez les modifications et vous verrez la liste diminuer de longueur. Après un tel contrôle plus besoin de brosse à reluire pour présenter un site "nickel".

La fabrication d'un lexique sous la forme d'une page html spécialement dédiée à cette fonction peut paraître a première vue satisfaisante. Elle l'est beaucoup moins à l'usage car si l'appel de la page par un lien ne pose aucun problème, le retour à la page d'appel n'est pas simple sauf pour les familliers du bouton "précédent". nous proposons donc une alternative sous la forme d'une petite fenêtre surgissant lors du clic et ne renfermant que la définition du mot cliqué

Les fichiers de définition doivent bien entendu exister avant toute création de lien.

Cette manoeuvre reposant sur l'insertion d'un Javascript dans la page, afficher la fenêtre comportement (elle peut s'intégrer comme un onglet à la fenêtre "Style et objet")

Dans la page d'appel mettez en surbrillance le mot qui servira de lien (ce peut être une image)

Au lieu d'indiquer un nom de fichier comme lien frappez seulement le caractère #

Dans la barre d'outil de la fenêtre "Comportements" choisissez les types de navigateurs pour lesquels vous travaillez. Dans l'état actuel des choses, préférez les navigateurs 4 aux versions ultérieures qui ne sont pas compatibles entre elles.

Cliquez ensuite sur le signe + de la fenêtre "Comportements" et choisissez "Ouvrir fenêtre navigateur"

Dans la boîte de dialogue suivante vous pouvez paramétrer la nouvelle fenêtre de navigateur dont l'ouverture sera l'action voulue.

En mettant la ligne en surbrillance vous pourrez choisir le type d'action qui détermine l'évènement.

N'oubliez pas d'enregistrer puis de vérifier dans le navigateur de votre choix.

L'interversion d'image est l'une des manoeuvres interactives les plus courantes. Elle permet de faire apparaître une image légendée ou un schéma à la place de l'image originale. Cette interversion est le plus souvent déclenché par le passage de la souris sur l'image.

Il est bien entendu indispensable que les deux images à intervertir existent au préalable et qu'elles aient les mêmes dimensions. Elles doivent se trouver dans le répertoire qui contient le site.

Insérez la version d'origine de l'image (celle qui s'affichera lors du chargement de la page) et mettez la en surbrillance (cadre avec poignées de redimensionnement). Dans la fenêtre de comportements choisissez le type de navigateur compatible (ici navigateurs 4) et cliquez sur le signe "+". Choisissez "intervertir"

Dans cette boîte de dialogue parcourez le disque pour trouver la source de l'image alternante. Conservez le préchargement des images pour accélérer l'affichage et conservez la restauration "onMouseOut" qui permet à la première image de revenir lorsque le pointeur en sort.

Désormais les deux comportements sont affichés lorsque l'image est sélectionnée. Il est possible de modifier les évènements à son goût en mettant l'évènement en surbrillance et en activant le menu déroulant.

Pour tester le javascript, enregistrez votre fichier et vérifiez dans le navigateur de votre choix.

Les calques sont pris en charge à partir des versions 4 des navigateurs. Pour montrer des images ou des textes de façon permanente, ils sont superflus et posent des problèmes de recouvrement des textes et tableaux préexistants car l'auteur ne maîtrise pas le paramétrage du navigateur par l'utilisateur. Les calques cachés ne présentent pas cet inconvénient si l'on prend la précaution de bien les positionner et de les faire disparaître lors de l'événement suivant.

On peut ainsi faire apparaître une image ou une légende de façon contextuelle par un simple survol du lien. Dans la version 2 de Dreamweaver il n'est pas possible d'associer un comportement à une zone de lien dans une image (image map). La version 4 le permet

Placez d'abord sur le document en construction les éléments qui ne feront pas partie du calque.

Appelez la boîte de dialogue "calques" dans le menu "Fenêtre". Elle est normalement vide.

Choisissez l'icône "calque" dans la fenêtre "Objets" et tirez le cadre sur la page par un "glissé" de souris. Remplissez-le avec du texte, une image, un fond à volonté. Redimmensionnez-le et déplacez-le pour qu'il occupe la place désirée.

En exécutant un clic droit sur le coin supérieur droit du calque, vous affichez un menu contextuel dans le lequel il faut choisir "Visibilité" puis "Hidden".

Le calque n'apparaît plus mais il est à tout moment rappelable soit par un clic sur sa petite icône "C" soit en mettant en surbrillance la ligne correspondante dans la fenêtre de calque et en cliquant pour ouvrir "l'oeil"

Placez la surbrillance sur le mot ou l'image qui doit servir de lien pour le calque. frappez un "#" à la place du nom de fichier.

Maintenez la surbrillance à la même place et affichez la fenêtre de comportement. cliquez sur le signe "+" pour dérouler la liste et cliquez sur "Afficher-masquer calques"

La boîte de dialogue suivante permet de préciser s'il faut afficher ou masquer. Choisir "Afficher" et valider.

Cet événement étant créé, changez l'action en choisissant "onMouseOver"

A la suite de cette manoeuvre le calque apparaîtra au survol mais ne disparaîtra pas après. pour cela il faut créer un second événement en gardant toujour le même lien en cliquant sur le "+" en choisissant aussi "Afficher-masquer le calque" mais cliquant cette fois "Masquer" dans la boîte de dialogue puis l'action "onMouseOut" dans la liste.

Enregistrez puis vérifiez dans les navigateurs que cela fonctionne.

L'utilisation des javascripts permet d'obtenir une véritable interactivité dans la page. Nous allons utiliser un calque pour faire rechercher la position d'une légende dans la page. Pour une bonne fiabilité il est souhaitable de placer ce genre d'exercice le plus haut possible dans une page qui ne comporte que très peu ou pas de texte ou de tableaux à moins qu'ils soient eux-même inclus dans des calques fixes.

Après avoir créé le calque assurez-vous qu'il est visible en permanence.

Positionnez-le à l'endroit qui constitue la solution (c'est à dire l'endroit ou le client doit amener le calque). cliquez sur le symbole en haut à gauche du calque et notez dans l'inspecteur de propriétés les valeurs de G et S.

Placez ensuite le calque à l'endroit de départ (celui où il doit être au chargement de la page)

Pour que le calque soit mobile dès l'ouverture de la page il faut l'associer à la balise <body>

utilisez ce bouton en bas à gauche de l'écran pour afficher le code source. Recherchez et mettez en surbrillance la balise <Body>.

Dans la fenêtre de comportement cliquez sur "+" et choisissez "déplacer calque"

La boîte de dialogue ci-dessous permet de paramétrer le déplacement. Pour la cible de dépôt utilisez la valeur G pour Gauche et S pour Haut.

La valeur "aligner si" réglée à 50 pixels permet de créer un effet d'aimantation si la calque est lâché à moins de 50 pixels du but. Validez pour teminer.

La fenêtre de comportement comporte une nouvelle ligne.

Enregistrez votre travail et vérifiez que cela fonctionne dans le navigateur.