Dreamweaver - mode d'emploi

Dreamweaver est un éditeur visuel pour la création et la gestion de pages web qui permet de créer des pages compatibles avec une majorité de plateformes et de navigateurs.
L'écran de travail de Dreamweaver est composé au démarrage de 4 fenêtres principales.
La fenêtre de document (1) actif, l'éditeur fonctionne comme un traitement de texte. Lorsque vous saisissez du texte, le logiciel génère automatiquement le code HTML correspondant sans en connaître la syntaxe.
La palette des objets (2), utilisée pour insérer les 'objets qui viendront constituer la page Web (images, tableaux mais aussi composants javasripts, Flash)
L'Inspecteur des propriétés (3) pour visualiser (et donc modifier ou attribuer) les propriétés d'un objet. Pour modifier il suffit de sélectionner et de regarder dans l'inspecteur de propriétés les choix qui ont été opérés (couleurs, taille de police, fonte, alignement).
Le lanceur (4) qui permet d'afficher et / ou masquer les palettes et inspecteurs différents.

F4 : affiche/masque tous les panneaux.
F5 : actualiser mode Création.
F8 : affiche/masque la fenêtre Site.
F10 : affiche/masque l'inspecteur de code HTML.
F12 : visualise la page courante dans le butineur principal.
Ctrl-F2 : affiche/masque le panneau Objets .
Ctrl-F3 : affiche/masque le panneau Propriétés .
Ctrl-F12 : visualise la page courante dans le butineur secondaire.
Ctrl-S : enregistre le document courant.
Maj-F11 : affiche/masque le panneau Styles CSS

Chapitre 2 : La préparation

1. L'architecture du site sur papier

Le site Web comporte une page d'accueil, d'autres pages toutes liées entre-elles par des liens "hypertexte" et des liens vers des pages web externes.

2. Tous les éléments logiciels et matériels nécessaires à la gestion du site

Pour construire un site Web, il faut:

1. Un éditeur de pages Web et un gestionnaire de site Web
2. Un logiciel de retouches d'images
3. Un logiciel de traitement du son et un logiciel de traitement vidéo
4. Un logiciel d'animation graphique (type Flash ou de création de Gif animés).

Pour l'environnement matériel: on peut disposer

1. d'un scanner
2. d'un appareil photo numérique
3. d'un camescope numérique

3. Préparation de tous les éléments du site

Une fois l'architecture du site arrêtée, et une fois le contenu détaillé selon des grandes directives, il faut préparer tous les éléments qui composeront le site.
Textes, photos, dessins et éventuellement sons et vidéo..., chacun de ces éléments doit subir des modifications afin d'être optimisé pour le Web.

Le texte: deux techniques, soit la récupération par copier coller, soit la ressaisie directe dans Dreamweaver. Attention toutefois, les possibilités de formatage du texte pour la publication en ligne sont nettement en dessous de celles offertes par un traitement de texte.

Les dessins sont numérisés avec un scanner en conservant des paramètres optimisés pour le Web, c'est à dire avec une résolution faible (72 ppp).

Les images: il faut diminuer le poids des images en abaissant le nombre de couleurs utilisées, en réduisant la résolution et la taille de vos images, en les enregistrant dans les formats les plus adaptés au Web, le GIF, le JPG et le PNG. Le Gif ne peut afficher que 256 couleurs mais permet la transparence et l'animation d'images. Le JPG permet l'affichage en millions de couleurs, mais compresse davantage l'image, il est à privilégier pour les images à tons continus (les paysages par exemple).

Chapitre 3 : Définition de la structure du site : la « page d'accueil »

1. La page d'accueil

Tout site commence par la création d'une page d'accueil, celle-ci doit se nommer précisément selon le serveur Web de l'hébergeur. Cette page d'accueil une fois définie, va s'articuler avec d'autres pages qui composeront notre site. Avec Dreamweaver, cette création s'accompagne d'un préalable de base qui est la création d'un dossier racine local. Ce dossier particulier sert à accueillir le site lui même. De plus, son nom et sa structure doivent être identiques à celle du disque distant qui hébergera les pages diffusées.

2. Création du dossier local

Sur son disque dur il faut commencer par créer un dossier comme indiqué dans la figure ci-dessous, puis des sous-dossiers dont un qui s'appellera images.

Lancez Dreamweaver, puis cliquez sur Fichier, Nouveau site. La boite de dialogue ci-dessous apparaît :

Cliquez dans la zone de droite sur la catégorie « Infos locales », puis remplissez comme sur la figure, les zones « Nom du site » puis indiquez le nom du dossier racine local directement dans la zone de texte ou en cliquant sur l'icône et en parcourant le disque dur.

Cliquez sur la case à cocher « Utiliser le cache mise à jour des liens », et terminez en cliquant sur OK.

Un message va vous indiquer que le cache sera bien créé, cliquez sur OK, puis immédiatement vous vous trouvez devant une nouvelle fenêtre qui est la fenêtre de gestion du site.

La partie gauche est intitulée « Site distant », elle représente la structure du site qui sera accessible depuis tout navigateur connecté à Internet. On oppose la notion de disque distant à celle de disque local, représenté ici par la fenêtre de droite et nommé « Répertoire local ». Le répertoire local doit avoir la même structure que le distant pour faciliter les mises à jour.

3. Création de la page d'accueil

Depuis la fenêtre de gestion de site nous allons créer directement le fichier de notre page d'accueil, nous indiquerons ensuite à Dreamweaver qu'il faut considérer cette page comme une page particulière : une page d'accueil.

1. Dans la partie locale de la fenêtre de gestion de site, cliquez sur le dossier du site
2. Dans le menu Fichier, choisissez Nouveau fichier.
3. Le logiciel crée alors un nouveau fichier dont le nom apparaît en surbrillance, saisissez son nom: index.htm

4. Validez par « Entrée » au clavier, le fichier est alors créé.
5. Pour définir cette page en tant que page d'accueil, c'est très simple, il suffit d'un clic droit sur son nom depuis la fenêtre de gestion de site, et de choisir l'option « Définir comme page d'accueil ».

La page d'accueil est vide, il faut maintenant la remplir.

On peut déjà créer de la même manière (points 1 à 4) les autres pages qui viendront constituer le contenu du futur site. Donnez un nom significatif à chacune des pages, le plus court possible, sans espace, majuscule, ni caractère accentué.

4. Ajout d'éléments à la page d'accueil

Pour ce faire, il faut garder présent à l'esprit l'architecture du site. Globalement, toutes les pages du site doivent être accessibles depuis la page d'accueil.
Pour commencer, il convient de donner un titre à la page d'accueil. Pour nommer une page :

1. Réduisez la fenêtre de gestion de site de façon à voir l'environnement de travail de Dreamweaver qui affiche notre page index.htm sans titre.
2. Faites un clic droit sur la page dans le corps de la fenêtre de document, puis choisissez « propriétés de la page».

3. Dans la zone Titre : saisissez le titre de ce qui va s'afficher dans la barre bleue en haut de la fenêtre du navigateur qui consultera la page (par exemple « Bienvenue sur le site »).
4. Il est possible d'intégrer une image d'arrière plan qui constituera un pavage automatiquement redimensionné en fonction de la taille la fenêtre du navigateur et la définition de l'écran.
5. Cliquez sur OK pour effectuer vos modifications, la fenêtre de document affiche maintenant ce que vous venez de saisir dans la barre de titre, vous pouvez également le tester dans le navigateur en appuyant sur F12.

Chapitre 4 : Mise en page (texte, tableau, image)

1. Le texte

L'élément texte est saisi, ou récupéré par collage (menu Edition, Coller). Pour formater du texte vous devez utiliser l'Inspecteur de propriétés

1. Saisissez le texte adéquat dans la fenêtre du document (par exemple « Bienvenue au lycée de ...»). Validez la ligne pour changer de paragraphe.

2. Changez la police (Times New Roman), la taille (+3) et le style du texte (gras), centrez le paragraphe pour terminer. Vous pouvez changer la couleur du texte en cliquant sur l'icône couleur de la bordure.

Nous avons maintenant un tableau qui va contenir deux cellules dans lesquelles nous viendrons placer une image (le logo de l'établissement) et un texte (un texte qui informe des nouveautés en cours ou à venir). La mise en page du langage html passe par l'utilisation des tableaux.

2. Les tableaux

Les tableaux sont utilisés pour présenter des données. Ils peuvent également être utilisés pour contrôler l'endroit où le texte et les éléments graphiques apparaîssent sur la page. Lorsque vous créez un tableau, vous pouvez ajouter du contenu, modifier des cellules et des propriétés de lignes, de même que copier et coller plusieurs cellules. Pour créer un tableau, vous devez procéder comme il suit :

1. Rendez-vous dans le menu Insertion, et choisissez l'option Tableau.

2. Une boite de dialogue vous permet d'en définir les attributs, par exemple 2 colonnes et 1 ligne. Sa largeur sera de 140 pixels, la taille de la bordure sera de 0.

Remplissage de cellule détermine l'espace qu'il doit y avoir entre le contenu d'une cellule et son contour.
Espacement des cellules détermine l'espacement qu'il doit y avoir entre chaque cellule d'un tableau, sans compter la bordure.
Largeur détermine la largeur du tableau exprimée en pixels ou comme pourcentage de la fenêtre du navigateur.
Bordure détermine la largeur de bordure du tableau.

Si vous choisissez de déterminer la taille du tableau en pourcentage,sa taille sera proportionnelle à la taille de la fenêtre affichée, c'est à dire que si le visiteur de votre site possède le même écran que vous, pas de problème dans le cas d'un écran plus grand, il peut y avoir des surprises. Le dimensionnement en pixel est plus contraignant, mais les objets ne changent plus de taille par la suite.

3. Les images

Dreamweaver affiche les images JPEG et GIF. En général, JPEG est le format optimum pour les images photographiques ou à tons continus, et GIF est préférable pour les images en demi-tons, ou celles qui ont une surface importante de couleurs en aplat. Le format PNG constitue un remplacement non breveté de GI, incluant la prise en charge des images en niveaux de gris, de couleurs indexées ou de couleur réelle.

Remarque : Pour que les images apparaissent dans un document de Dreamweaver, les fichiers d'images doivent se trouver à l'intérieur du site local défini. Si vous choisissez un fichier externe, Dreamweaver vous demandera si vous voulez que le fichier soit copié dans un dossier à l'intérieur du site local. Pour notre exemple on partira du principe que vous avez déjà placé le logo dans le dossier image du site web local.

Pour insérer une image :

1. Placez le curseur là où vous voulez que l'image apparaîsse sur la page (dans la cellule de gauche).
2. Choisissez Insertion, Image, ou cliquez sur le bouton Insérer une image dans le volet Commun de la palette Objet (le premier en forme d'arbre).
3. Une fenêtre de dialogue apparaît, double-cliquez sur le dossier image.
4. Recherchez le fichier d'image qui vous intéresse en cliquant sur son icône, puis sur Sélectionner.
5. Le logo est inséré dans votre page, mais vous pouvez définir les propriétés de l'image dans l'inspecteur des propriétés.

Chapitre 5 : Création de liens

1. Le positionnement de la page

Il y a trois types de chemins d'accès : chemins absolus, chemins relatifs à la racine et chemins relatifs au document.
Les chemins sont entrés dans le champ Lien de l'inspecteur de propriétés.

1. Les chemins absolus
Il s'agit de chemins complets comprenant le protocole du serveur.Les chemins absolus restent précis, quel que soit l'emplacement du document source. En revanche, ils ne lient pas correctement le document cible en cas de déplacement de ce dernier. Vous devez utiliser un chemin absolu lorsque vous créez un lien vers un fichier situé en dehors du site courant. http://webmaster.voizytoo.com/www/dossier/sous-dossier/document1.htm

2. Les chemins relatifs à la racine
Ils commencent toujours à la racine du site courant. Tous les fichiers du site visibles pour le public sont contenus dans la racine du site. Les chemins relatifs à la racine commencent par une barre oblique, indiquant au serveur de commencer à partir de la racine. /www/dossier/document2.htm crée un lien avec un document nommé "document.htm" dans le répertoire "dossier", qui se trouve au niveau de la racine du site. Un chemin relatif à la racine est ordinairement la meilleure manière de lier des fichiers dans un environnement dont le contenu doit être fréquemment déplacé. Lorsque vous utilisez des chemins relatifs à la racine, les liens continuent à fonctionner même si le document à partir duquel vous établissez le lien est déplacé à l'intérieur du site. Les chemins relatifs à la racine ne conviennent pas pour les sites à consulter localement (tels que les présentations). À leur place, utilisez des chemins relatifs au document.

3. Les chemins relatifs au document
Ils sont relatifs au répertoire contenant le document en cours. Par exemple:
document3.htm désigne un document du répertoire courant
../document4.htm désigne un document du répertoire au-dessus du répertoire courant
docshtml/document5.htm désigne un document situé dans un répertoire nommé docshtml à l'intérieur du répertoire courant. Les chemins relatifs au document sont souvent les plus simples à utiliser pour créer des liens vers des fichiers qui seront toujours placés dans le même répertoire que le document courant.

Voir la mise en application

2. Établissement d'un lien vers un document

Utilisez l'inspecteur de propriétés pour lier une image ou une partie du texte du document en cours à un autre document. Dans l'exemple qui suit nous allons lier un texte qui ouvrira dans la fenêtre du navigateur la page des services

Pour créer des liens entre documents :

1. Sélectionnez du texte ou une image dans la fenêtre Document.
2. Ouvrez l'inspecteur de propriétés (Fenêtre, Propriétés)
3. Cliquez sur l'icône de répertoire pour naviguer jusqu'à un fichier et le sélectionner.

4. Cliquez sur le bouton Sélectionner.

Remarque : Vous pouvez taper directement un chemin dans le champ Lien. Pour créer un lien vers un document de votre site, entrez un chemin relatif au document ou à la racine. Pour créer un lien vers un document situé en dehors du site, entrez un chemin absolu. Pour faire en sorte que le document lié s'affiche ailleurs que dans la fenêtre en cours, sélectionnez un nom de cadre dans le menu déroulant Cible et choisissez la cible réservée _blank qui chargera le document lié dans une nouvelle fenêtre de navigateur.
Figure 11

Le lien est maintenant affiché dans la fenêtre du document vous pouvez à tout moment tester son allure réelle dans le navigateur en appuyant sur la touche F12. Par défaut un lien est formaté en bleu souligné : Création d'un lien

3. Établissement d'un lien vers une ancre nommée

Les ancres nommées marquent des positions spécifiques dans un document. Utilisez des ancres nommées pour sauter à une position marquée dans le document en cours ou pour créer un lien vers une position marquée dans un autre document. Par exemple, si votre page est longue ou comporte différents chapitres, utilisez l'ancre nommée pour passer rapidement du début à la fin ou d'un chapitre à un autre. Dans l'exemple qui suit, nous allons créer une ancre nommée associée à une flèche nous permettant de remonter en haut de page d'un clic de souris.

1. Dans la fenêtre Document, placez le curseur là où vous voulez insérer l'ancre nommée.
2. Choisissez Insertion, Ancre nommée.
3. Dans la boîte de dialogue qui s'affiche, tapez un nom pour l'ancre.
4. Cliquez sur OK. L'inspecteur de propriétés change d'aspect.
Figure 12
5. Créez maintenant un lien vers cette ancre nommée.
6. Sélectionnez une image ou du texte dans la fenêtre Document.
7. Dans l'inspecteur de propriétés, tapez le signe dièse (#) et le nom de l'ancre dans le champ Lien. Par exemple : Pour créer un lien vers notre ancre nommée "lienautresite" du fichier en cours, tapez #lienautresite:
Figure 12bis

8. Pour créer un lien vers une ancre nommée "haut" dans un autre fichier figurant dans le même répertoire, tapez NomDuFichier.html#haut.

4. Établissement d'un lien avec une page hébergée sur un autre site

Il arrive fréquemment que vous désiriez renvoyer vos visiteurs vers une ressource externe à votre site. Par exemple, vous permettre l'accès aux établissements de votre district depuis une de vos pages. Vous devez dans ce cas créer un lien de type absolu. La procédure est la même que pour la création de liens, simplement les adresses Internet étant parfois complexes pensez à les copier (CTRL + C), puis à les coller dans la zone Liens de l'inspecteur de propriétés (clic droit puis coller)

5. Un lien spécifique : pour envoyer un message

Les liens de messagerie ouvrent de nouvelles fenêtres de message (à l'aide du programme de messagerie associé au navigateur de l'utilisateur) chaque fois que l'utilisateur clique dessus. Le champ A: de la fenêtre du message est automatiquement complété par l'adresse spécifiée dans le lien. Pour créer un lien de courrier électronique : écrire au formateur

1. Sélectionnez du texte ou une image dans la fenêtre Document.
2. Dans l'inspecteur de propriétés, tapez mailto: suivi par une adresse e-mail dans le champ Lien.
Figure 14

6. Utilisation d'un formulaire pour envoyer des renseignements par courrier

Insérez un formulaire et compléter la fenêtre des propriétés:

Insérez un objet de formulaire, champ de texte:

Insérez un objet de formulaire, bouton:

Il faudrait maintenant contrôler la validation de l'adresse mail avant l'expédition, à l'aide d'un javascript,
Testez

Il est possible d'enrichir le formulaire en insérant d'autres champs de textes

7. Vérifier la cohérence des liens

Certains liens ne sont pas actifs dans la fenêtre Document (c'est-à-dire que le fait de cliquer dessus ne fait pas accéder au document lié) parce que vous devez être en mesure de cliquer sur un lien pour modifier le texte ou les images qui y sont associés. Vous pouvez ouvrir le fichier associé à un lien dans Dreamweaver si vous voulez le modifier mais vous devez tester les liens dans un navigateur. Pour tester les liens dans un navigateur, faites comme il suit :

1. Choisissez Fichier, Aperçu dans le navigateur ou utilisez la touche F12, cependant vous pouvez directement depuis la fenêtre de gestion de site tester automatiquement l'ensemble des liens sans avoir à cliquer dessus.

1. Choisissez simplement Fichier, Vérifier les liens, puis Site entier. Le logiciel se charge de tout
2. Vous êtes devant une boite de dialogue qui vous indique l'état de tous les liens (y compris les images)
3. Dans la zone Afficher, cliquez sur ce que vous souhaitez vérifier (liens brisés, liens externes et fichiers orphelins).

Chapitre 6 : Enrichir votre page

1. Insérer et créer un logo animé

Vous pouvez ouvrir une image sélectionnée dans un éditeur d'image externe directement à partir de Dreamweaver. Lorsque vous revenez dans Dreamweaver après avoir enregistré le fichier de l'image, toutes les modifications de l'image sont visibles dans la fenêtre Document. Pour cela, il suffit de paramétrer votre logiciel de composition Web de manière opérationnelle. Pour choisir un éditeur d'image externe :

1. Choisissez Édition > Préférences.
2. Sélectionnez Éditeurs externes à partir de la liste des catégories qui se trouve à gauche.
3. Cliquez sur Parcourir à côté de la zone Images et sélectionnez un éditeur d'image.

Pour lancer l'éditeur d'image externe, Cliquez avec le bouton droit de la souris tout en cliquant sur l'image que vous voulez éditer et choisissez Éditer image à partir du menu de raccourci. Sélectionnez l'image que vous voulez éditer et cliquez sur Éditer image dans l'inspecteur des propriétés.

4. Lancez le logiciel de dessin, puis cliquez sur le menu Fichier, et sélectionnez Nouveau.
5. Dans la boite de dialogue qui apparaît choisissez 300 x 100 pour les dimensions. Fixez la résolution à 72 points par pouce, dans la rubrique caractéristiques de l'image, affectez la valeur « couleur d'arrière plan » à la couleur d'arrière plan et choisissez 256 couleurs pour le type d'image.
6. Nous allons écrire un texte court : « Bienvenue sur le site». Cliquez sur l'outils texte (le A en grand), puis sur la zone de dessin. Dans la boîte de dialogue qui s'ouvre, attribuez- lui une police, une taille et une couleur à votre convenance, puis cliquez sur OK.
7. Cliquez sur Fichier, puis enregistrez en choisissant Computer Graphic Interchange (GIF) dans le type de fichier et logo1.gif dans le nom.
8. Répétez la même procédure de création de l'image que précédemment en changeant juste l'aspect du texte (nous ne changerons que la couleur en cliquant sur une couleur dans l'outils couleurs avant de cliquer sur la zone de texte).
9. Positionnez le texte exactement sur l'ancien à l'aide de la souris, puis cliquez sur Fichier, Enregistrer sous et choisissez logo2.gif.
10. Faites une dernière fois cette opération en choisissant une troisième couleur pour votre texte. Vous voilà face à trois objets différents. Vérifiez que vos trois images sont dans le dossier images et qu'elles sont nommées logo1.gif, logo2.gif, logo3.gif

Nous allons maintenant assembler les objets à l'aide d'un outil d'animation, le principe est celui du cinéma, c'est à dire une succession d'image dans un intervalle de temps.

11. Démarrez le logiciel d'animation et y déposer les 3 images.
12. Effectuez les réglages proposés.
13. Enregistrez l'animation dans le dossier images en la nommant logo.gif, Insérez l'animation comme une image. Vous pouvez visualiser l'animation en utilisant la touche F12.

2. Insérer un « Roll-over » (effet de survol)
Un effet de survol est une image qui change lorsque le curseur se déplace au-dessus d'elle. Un effet de survol est constitué de deux images : l'image principale (celle affichée lorsque la page se charge) et l'image de survol (celle qui apparaît lorsque le curseur se déplace au-dessus de l'image principale). Pour créer un effet de survol:
1. Placez le curseur dans la fenêtre Document, là où vous souhaitez que l'effet de survol apparaisse.
2. Choisissez Fenêtre > Objets pour ouvrir la palette Objet et cliquez sur le bouton Image retournée ou choisissez Insertion > Image retounée.
3. Dans la boîte de dialogue qui apparaît, entrez les informations suivantes : tapez le chemin et le nom de fichier de l'image originale dans le champ Image originale ( logo1.gif dans le dossier images), tapez le chemin et le nom de fichier de l'image de zone sensible dans le champ Image renouvelée. Pour créer un lien, remplacez le signe # du champ Lien par un chemin et un nom de fichier, ou recherchez et sélectionnez un fichier.

4 Cliquez sur OK. En appuyant sur F12, on vérifie que le passage de la souris au dessus du logo affiche un changement d'état de l'image.

3. Insérer une image cliquable (image de la couverture d'un numéro de Compétence Micro, consacré à Dreamweaver)

Une image cliquable est une image unique à laquelle sont affectés différents hyperliens, pour définir les régions de l'image vous devez utiliser l'éditeur de carte graphique. En fait cet éditeur affiche l'image et permet d'utiliser des outils de dessins de formes cercles, carrés, polygones qui permettront de créer des zones et d'y affecter des liens. Nous voulons affecter des liens accessibles en cliquant sur chacune des zones de l'image.
1. Sélectionnez l'image et cliquez sur le bouton Carte dans l'inspecteur de propriétés (pour voir le bouton Carte, vous devrez peut-être cliquer sur la flèche d'agrandissement dans le coin inférieur droit de l'inspecteur de propriétés).
2. Tapez le nom de la carte dans le champ approprié (ce nom apparaît comme l'attribut NAME de la balise MAP et comme l'attribut USEMAP de la balise IMG.

3. Sélectionnez l'outil rectangle et faites-le glisser au-dessus de l'image pour créer une zone sensible de la forme d'un rectangle, ou sélectionnez l'outil de polygone et définissez une zone sensible de forme irrégulière en cliquant une fois pour chaque coin et deux fois pour fermer la forme.
4. Tapez le chemin de l'URL de la zone sensible dans la boîte Lien, ou cliquez sur l'icône de dossier pour rechercher et sélectionner un fichier. Si l'établissement possède un site Web, saisissez son URL, sinon entrez l'adresse de votre page qui le décrit (on supposera qu'une telle page existe).

5. Validez en cliquant sur OK, puis testez votre carte en appuyant sur F12.

Chapitre 7 : Tester votre site et le mettre en ligne

1. Tester le site

Utilisez la fonction Vérifier liens pour rechercher les liens brisés et les fichiers non référencés dans un fichier ouvert du site local, ou dans le site local tout entier.

Dreamweaver vérifie uniquement les liens et les références relatifs aux documents du site. Dreamweaver dresse une liste des liens externes apparaissant dans le(s) document(s) sélectionné(s), mais ne les vérifie pas.

1. Choisissez Fichier, Vérifier liens, Site entier.
2. Lorsque Dreamweaver a fini de vérifier les liens dans les fichiers spécifiés, il ouvre la boîte de dialogue Vérificateur de lien, cette boîte de dialogue affiche la liste des liens brisés, des liens externes (ceux qu'il ne peut pas vérifier parce qu'ils renvoient à des pages ne faisant pas partie du site) et des fichiers orphelins (fichiers auxquels aucun autre document ne renvoie).
3. Pour basculer entre Liens brisés, Liens externes et Fichiers orphelins, sélectionnez la rubrique appropriée dans le menu déroulant Afficher.
4. Pour enregistrer tout le rapport comme fichier texte délimité par des tabulations, cliquez sur Enregistrer.

Le site fonctionne maintenant parfaitement en local, on peut le mettre sur le web. C'est la dernière étape, il faut se munir des noms de logins et mots de passe qui ont été transmis par l'administrateur réseau.

2. Le mettre en ligne (initiation au File Transfert Protocol FTP)

Pour mettre en ligne le site, il faut transférer les fichiers et dossiers qui constituent l'intégralité du site du disque dur sur celui de l'hébergeur distant. Le navigateur ne sachant pas réaliser de telles tâches, il faut utiliser un logiciel de FTP (pour File Transfert Protocol). Dreamweaver en possède un tel outil intégré à son fonctionnement qui permet de réaliser ce transfert. Il faut au préalable renseigner différentes rubriques.

1. Dans la fenêtre de gestion de site, cliquez sur Site, puis sur Définir des sites.
2. Sélectionnez le vôtre, puis cliquez sur le bouton Modifier.
3. La fenêtre de définition de site comporte 4 catégories sur la gauche. Cliquez sur la seconde : Infos du serveur Web. Son contenu apparaît.
4. La zone Accès au serveur affiche pour l'instant « Aucun », il faut la modifier d'un clic de souris pour sélectionner l'option FTP.

5. Saisissez maintenant les informations, qui vous ont été communiquées par l'hébergeur, concernant votre espace disque sur le serveur académique.
6. Cliquez sur Enregistrer, ne cochez pas « Utiliser le pare-feu ».
7. Cliquez sur OK, puis sur Terminer. Le transfert de fichier peut alors commencer.
8. Cliquez sur le bouton Connecter, qui va alors lancer l'assistant de connexion pour accéder au Net. Après quelques messages qui apparaissent sur votre écran, la connexion est établie (le bouton Connecter est devenu Déconnecter en affichant une lumière verte), et le cadre de gauche de la fenêtre de gestion de site, liste le contenu de votre disque distant. Dans le volet droit figure l'arborescence de votre disque dur. Comme il s'agit d'un espace disque qu'on vous attribue, vous allez immédiatement vous retrouver à la racine de votre site. Ne tentez pas d'aller plus haut, vous n'obtiendriez rien de plus qu'une liste de dossiers dont le contenu vous serait inaccessible.
9. Vous pouvez créer autant de dossier que vous désirez à partir de la racine de votre disque distant. Pour cela, cliquez sur la partie gauche et sélectionnez Fichier, Nouveau dossier.
10. Lorsque vos dossiers sont créés (à l'identique de votre site local) sur le serveur, deux méthodes s'offrent à vous pour transférer vos fichiers. La première consiste à sélectionner le fichier à transférer puis à cliquer sur le bouton Placer sur la petite flèche orientée vers le haut. La seconde consiste tout simplement à utiliser votre souris pour effectuer un Glisser-Déplacer du fichier vers le répertoire de destination. Tout comme dans l'interface d'Explorer, vous pouvez sélectionner plusieurs fichiers à transférer.

3. Les éventuelles erreurs de mise en ligne

Le transfert terminé, c'est le moment d'effectuer un test en ligne pour savoir si tout s'est bien passé. Pour cela, tentez de vous connecter à votre page Web en utilisant votre navigateur. Si des messages d'erreurs s'affichent, voici les cas de problèmes les plus fréquents ainsi que leurs causes probables.

1. Si le message: « Erreur 404 » apparaît lorsque vous tentez d'atteindre votre page d'accueil, il est possible que vous n'ayez pas respecté la casse ou la même orthographe dans les noms de vos fichiers. Rappelez-vous: l'orthographe et la concordance majuscules - minuscules doit être identique dans le nom d'un fichier et sa mention dans le code HTML de vos pages.

2. Le navigateur affiche le message « Index of/login ». Il peut y avoir deux raisons à un tel message. Sur tous les serveurs, on accède à un site Web par la page d'accueil. De même, sur tous les serveurs, cette dernière porte un nom précis qu'il convient de respecter. Si le serveur ne peut l'identifier, il affiche un message. Si vous êtes certain que la syntaxe est bien respectée, vérifiez que le fichier HTML correspondant à la pâge d'accueil est bien situé à la racine de votre compte. La racine de votre compte est l'endroit situé directement à l'entrée de votre espace disque hébergé, là où vous accédez lorsque vous vous connectez avec votre logiciel de FTP.

Chapitre 8 : Référencer le site pour qu'il soit accessible

1. Le titre de la page

Le titre est l'élément qui s'affiche dans la barre de titre de la fenêtre Document dans Dreamweaver de même que dans la barre de titre du navigateur dans lequel vous affichez la page. Vous devez tapez le titre de la page dans le champ étiqueté Titre en cliquant sur les propriétés de la page (clic droit sur la page). L'insertion d'un titre est la première chose à faire pour permettre un bon référencement par les moteurs de recherche. Pensez à nommer toutes vos pages pour faciliter le référencement.

2. Les éléments de référencement

Les robots de quelques moteurs de recherche extraient le titre des pages et les premiers mots de leur contenu : ces données sont utilisées pour décrire le site. Il est possible de fournir des indications plus précises, détectées par certains robots: les Meta Tags. Il s'agit d'une balise HTML qui doit obligatoirement être située dans la section <head> de chaque page de votre site. Deux paramètres sont absolument nécessaires:
NAME= "description" qui décrit en quelques mots le contenu de la page
NAME="keywords" qui fournit les mots-clés pour l'indexation.
Pratiquement, ces deux Meta Tags se présentent comme ceci
<META NAME="description" CONTENT="Visitez le Site de notre établissement">
<META NAME="keywords" CONTENT= "orientation, éducation, conseil, options, enseignement">
Chaque page doit contenir ses propres Meta Tags car les robots exploreront votre site en entier. Pratiquement, Dreamweaver le fait directement il suffit simplement de suivre la procédure ci après.

1. Dans le menu Insertion, cliquez sur En-têtes, sélectionnez celui que l'on souhaite travailler, par exemple Mots-clés.
2. Tapez les mots-clés, séparés par des virgules, dans le champ étiqueté Mots-clés.
3. Cliquez sur OK.

Remarque : on peut accéder directement à tous les éléments en cliquant sur la petite flèche située dans le coin supérieur droit de la palette des objets et en choisissant « En-têtes ».

3. Les moteurs de recherches et annuaires

Il est nécessaire d'être présent dans tous les moteurs de recherche, afin d'être visible, et trouvé par tous. Chaque moteur possède ses propres règles de fonctionnement internes, qui facilitent ou rendent plus délicates les inscriptions de vos sites dans ces derniers. Nous prendrons l'exemple de l'inscription d'un site sur Yahoo et sur Altavista.

Chez Yahoo l'inscription se fait en cliquant sur un lien en bas de la page d'accueil. Ensuite, il faut suivre une succession d'écrans expliquant comment est structuré l'arborescence des catégories Yahoo et comment se fait une inscription. Il faudra détailler le contenu du site, y mettre le titre, les mots clés.

Sur Altavista, l'inscription de son site est des plus sommaire, il suffit juste de donner son URL et sous 48 heures le site est visité puis indexé.

Chapitre 9 : Création avancée

1. Animation en DHTML avec les calques

Les calques sont utilisés pour positionner les éléments avec précision dans la fenêtre du navigateur. Les calques peuvent contenir du texte, des images, des plug-ins et même d'autres calques. Les calques sont particulièrement utiles pour la superposition de certaines parties de votre page. Vous pouvez afficher et masquer des calques avec des comportements afin de créer des pages au chargement rapide, qui sont modifiées sans devoir charger le contenu supplémentaire à partir des fichiers source. Grâce au scénario, vous pouvez déplacer ou changer les calques selon une ligne de temps.

Le seul problème avec les calques vient du fait que leur conception récente nécessite pour le surfeur de posséder un navigateur de génération 4. Dans le cas contraire, le site n'est pas visible correctement.

2. Insertion d'un composant vectoriel animé réalisé avec Flash

Le logiciel Flash permet d'animer des éléments, transformés pour l'occasion en vecteurs, composant une page Web. Un des avantages de Flash est la rapidité d'exécution lors du chargement de la page. En effet, une animation en Flash se joue au fur et à mesure de son chargement. Cela permet une certaine fluidité des mouvements. ce logiciel permet la synchronisation du son avec l'animation.

La seule petite restriction pour visualiser une animation en Flash est de posséder le plugin Shockwave Flash Player. Ce plug-in est dorénavant présent sur la majorité des navigateurs. Il est possible de le télécharger à partir du site de Macromedia http://www.macromedia.com.

3. Un texte personnalisé dans la barre d'état

0n voit souvent de courts textes dans la barre d'état de son navigateur. Les JavaScripts permettent de personnaliser un site par un message de bienvenue, d'avertissement ou d'explications. Reste qu'ils sont particulièrement simples à rédiger et à mettre en pratique... à condition de bien placer ces quelques lignes entre les parties <HEAD> et </HEAD> de la page HTML. Voici comment afficher un texte dans la barre d'état.

<SCRIPT LANGUAGE="JavaScript">
window.defaultStatus="création d'un site web avec Dreamweaver";
</SCRIPT>

4. Utilisation de modèles

On peut créer un modèle à partir d'un document HTML existant, puis le modifier pour qu'il réponde à ses besoins, ou créer un modèle à partir d'un document HTML vierge. Dreamweaver enregistre les modèles portant l'extension de fichier .dwt dans un dossier appelé Templates, situé dans le dossier racine local du site. Si ce dossier n'existe pas, Dreamweaver le crée au moment de l'enregistrement d'un nouveau modèle.

Dans un modèle, les régions modifiables sont les parties de la page pouvant être modifiées dans les fichiers créés à partir du modèle. Par exemple, si le texte d'un article d'un bulletin d'informations apparaît dans une région modifiable, chaque article peut contenir un texte différent. Les régions verrouillées (non modifiables) sont les parties de la mise en forme de la page qui restent constantes d'une page à une autre. Toutes les régions d'un nouveau modèle sont verrouillées lorsque vous créez le modèle. Aussi, pour que le modèle soit utile, il faut rendre certaines régions modifiables (les déverrouiller).

Lorsqu'on modifie le fichier de modèle, on peut apporter des modifications aux régions modifiables comme aux verrouillées. En revanche, dans un document créé à partir d'un modèle, on ne peut modifier que les régions modifiables : les régions verrouillées ne peuvent pas être changées.

On peut utiliser un modèle comme point de départ d'un nouveau document ou l'appliquer à un document existant. Lorsqu'on modifie un modèle, un document basé sur ce modèle est mis à jour.

Aide en ligne: http://www.memoclic.com/data/creation_de_/index.php