TP Dream Weaver

19
Une production [ C ] unéiforme Création d’un site ouèbe avec DreamWeaver 2

Transcript of TP Dream Weaver

Page 1: TP Dream Weaver

Une production [C]unéiforme™

Création d’un site ouèbe

avec

DreamWeaver 2

Page 2: TP Dream Weaver

Création d’un site ouèbe avec DreamWeaver

Page 2 / 19

Table des matières

1 Création du site11 Le dossier du site

111 Organisation du dossier du site112 Création d’un site vierge113 Importation d’un site existant

12 Biographie – Texte et habillage d’image13 Dessins divers – Tableaux

131 Réalisation du tableau132 Définition des liens

14 Voyage en Islande – Image cliquable141 Mise en page142 Définition des zones sensibles

15 Contact – Lien vers adresse électronique – Tableaux16 Menu de gauche - Rollovers17 Page principale – Le cadre18 Page d’accueil – Les calques

181 Création de la page d’accueil182 Définition du lien vers la page de cadre

2 Vérification et gestion du site21 Compatibilité avec les différents navigateurs22 Vérification des orphelins23 Vérification des liens

231 Méthode 1232 Méthode 2

24 Référencement du site241 Les balises META242 Référencement en ligne243 Logiciels de référencement

25 Transfert du site sur le serveur251 Transfert local252 Mise à jour253 Transfert sur Internet ou Intranet

Page 3: TP Dream Weaver

Création d’un site ouèbe avec DreamWeaver

Page 3 / 19

1 Création du sitePour qu’un site puisse être publié sur l’Internet, il faut le transférer sur un serveur distant. Générale-

ment, il s’agit du fournisseur d’accès. Afin que l’intégralité des fichiers soient transférés, on les rassemble dans undossier unique que l’on télécharge sur le serveur.

11 Le dossier du site111 Organisation du dossier du site

Dans tous les cas, la page d’accueil doit être placée au premier niveau de ce dossier. Pour des raisonsliées à la configuration des serveurs, on l’intitule généralement index.html ou encore default.html, mais cen’est pas une obligation.

Pour le reste, ce dossier peut être organisé librement en incluant autant de sous-dossiers que l’onveut. Néanmoins, quatre organisations sont souvent rencontrées.

• Tous les fichiers dans un seul dossierSi cette solution est la plus simple, elle devient rapidement difficile à gérer si le site est important.• Un dossier par pageCette organisation rationnelle a la faveur de certains puristes qui prétendent que le chargementdes pages est alors plus rapide. Elle pose néanmoins un problème pour la gestion des fichierspartagés par plusieurs pages.• Un sous-dossier imagesC’est l’organisation la plus classique. Les pages HTML sont toutes placées au premier niveau dudossier et toutes les images et autres médias (sons, séquences vidéo, etc.) sont regroupés dans unmême sous-dossier.• Deux sous-dossiers : pages HTML et imagesCette solution très pratique a le mérite de la clarté.

112 Création d’un site vierge

• Créer un nouveau dossier à la ra-cine du disque dur. Lui donner unnom. Placer le dossier Images à l’in-térieur.

• Créer ou non un dossierpages_html.

• Dans DreamWeaver, menu Fichier–> Nouveau site.

• Dans la fenêtre de dialogue, don-ner un nom au site, cliquer sur et localiser le dossier qui vient d’êtrecréé.

Page 4: TP Dream Weaver

Création d’un site ouèbe avec DreamWeaver

Page 4 / 19

• Il est possible de changer la paged’accueil : faire un clic droit de lasouris sur une page HTML. Dans lemenu contextuel, choisir Définircomme page d’accueil.

• Lancer DreamWeaver. Menu Fichier–> Ouvrir site –> Définir les sites.

• Dans la fenêtre Définir les sites, cli-quer sur Nouveau.

• Dans la fenêtre Définition du site,donner un nom au site et cliquersur pour localiser le dossier con-tenant le site à importer.

• Dans la fenêtre de gauche Catégo-rie, cliquer sur Mise en forme de lacarte du site. Procéder comme pré-cédemment pour localiser la paged’accueil du site à importer.

• Cliquer sur OK, puis sur Terminer.La fenêtre de gestion du site appa-raît.

• Désormais, il suffit de double-cli-quer les pages dans la fenêtre Ré-pertoire local pour les ouvrir et lesmodifier.

Cette procédure offrel’avantage de pouvoir im-porter plusieurs sites ce qui,dans le cadre de créationd’un site d’établissementcomposés de plusieurs sec-tions, s’avère très pratique.

113 Importation d’un site existantIl suffit d’indiquer à DreamWeaver le dossier contenant le site et sa page d’accueil.

Le champ Infos sur serveurweb comporte l’adresse FTPdu serveur sur lequel le sitesera transféré.

Page 5: TP Dream Weaver

Création d’un site ouèbe avec DreamWeaver

Page 5 / 19

12 Biographie – Texte et habillage d’image

• Créer une nouvelle page en cliquantdans la fenêtre Répertoire local dela fenêtre Site, la double-cliquerpour l’ouvrir, l’appeler biographie.

• Taper le titre (Boudoul ou autre),le centrer, lui appliquer la taille Ti-tre 1.

• Mettre ou non un séparateur • Ouvrir le document Bio-texte.html,

le copier, le coller dans la page.• Appliquer le corps Normal à ce

texte.

Remarquer que les styles necorrespondent pas à ceuxd’un traitement de texte. Lecorps normal correspond àla taille par défaut du navi-gateur définie par l'utilisa-teur. C’est la raison pour la-quelle les autres corps sontappelés +1, +2, etc. C’est àdire 1corps de plus que lecorps par défaut, 2 corps deplus, etc.

Certains navigateurs ne re-connaissent pas les espacesentre les lignes. Il faut doncinsérer un saut de ligneforcé qui place une balisespéciale (<BR>) reconnue.

• Cliquer sur le bouton Image pour placer la photo identite.gif. Sil’on désire l'habiller, placer le pointd'insertion juste au début du texteet insérer l'image, la sélectionner etchoisir ensuite Gauche dans lemenu Aligner de l’Inspecteur.

• Expérimenter les différentes op-tions du menu Aligner.

• Vérifier l’orthographe. Menu Texte–> Orthographe.

• Enregistrer les modifications avantde prévisualiser la page dans unnavigateur.

Les Gif permettent de ren-dre transparente une cou-leur de l'image.

Remarquer que le pointd’insertion de l’image esttoujours situé à gauche dutexte. Le positionnement del’image est défini unique-ment par les option dumenu Aligner.

• Séparer les paragraphes par un sautde ligne forcé (Menu Insertion –>Saut de ligne).

• Sélectionner la liste des albums deBoudoul et appliquer le style Liste.

• Appliquer un fond à la page (menuModifier –> Propriétés –> imaged’arrière-plan), modifier la couleurdu texte.

Page 6: TP Dream Weaver

Création d’un site ouèbe avec DreamWeaver

Page 6 / 19

13 Dessins divers – Tableaux131 Réalisation du tableau

La présentation des images par vignettes (que l’on appelle aussi onglets) permet d’offrir un aperçu sansavoir à télécharger toutes les images. On adopte généralement une présentation en tableau qui permet de lesdisposer de façon ordonnée.

• Créer une nouvelle page en faisantun clic droit dans la fenêtre Réper-toire local de la fenêtre Site. L’appe-ler dessins, la double-cliquer pourl’ouvrir.

• Cliquer sur l’icône pour insé-rer un tableau de 3 colonnes et 4rangées. L’Inspecteur se transforme.

En laissant les champs lar-geur et hauteur vides, letableau épouse les vignet-tes au plus près.On peut, bien entendu,fixer des dimensions préci-ses en pourcentage ou enpixels.

• Cliquer dans une cellule, cliquer sur

, insérer une vignette (leur nom

commence par v ), la centrer.• Cliquer dans la cellule inférieure,

taper le titre de la vignette (corpsnormal), lui attribuer une couleurdans l’Inspecteur.

• Procéder de même pour les autrescellules.

Les bordures peuvent êtretransparentes (bordure =0). Espac. des cellules déter-mine l'espace entre les cel-lules, Remplissage, l'espaceentre le contenu de la cel-lule et ses bords .

Expérimenter différentes présentations en jouant sur l’épaisseur des bordures, la couleur de fonddes cellules, les marges, etc.

Page 7: TP Dream Weaver

Création d’un site ouèbe avec DreamWeaver

Page 7 / 19

132 Définition des liensDans DreamWeaver, il existe deux façons de définir les liens. La première, classique, consiste à cliquer

sur un icône, lequel ouvre une fenêtre de dialogue qui permet de localiser le fichier cible. La deuxième, empruntéeà Golive Cyberstudio, consiste à cliquer sur en face du champ lien et à pointer-tirer le fichier cible dans lafenêtre Site, un lien visible reliant les deux documents !

• Cliquer sur une vignette pour lasélectionner.

• Dans la palette Inspecteur, cliquersur en face du champ Liens afinde localiser le Gif de grande taillecorrespondant.

• Choisir d'appliquer ou non un con-tour aux vignettes. Pour un contourtransparent, taper 0 dans le champBordure.

• Il est également possible de modi-fier la couleur du contour. MenuModifier –> Propriétés et changerla couleur des liens.

Lien standard = la couleurdu lien quand on affiche lapage.Lien activé = la couleur dulien quand on clique.Lien visité = la couleur dulien après le clic.

• Dans le champ Cible, sélectionner_blank dans le menu déroulant afinque le lien s’ouvre dans une nou-velle fenêtre.

• Procéder de même pour les autresvignettes.

• Enregistrer la page, tester les liensdans un navigateur.

Pour information, ouvrir lelien dans une nouvelle fe-nêtre est un usage de laNetiquette lorsque le lienpointe vers un autre site.

• Méthode du pointer-tirer

• Cliquer sur une vignette pour lasélectionner.

• Dans la palette Inspecteur, cliquer

sur l’icône en face du champLiens et maintenir le bouton de lasouris enfoncé.

• Tirer le pointeur en direction dufichier cible dans la fenêtre Réper-toire local de la fenêtre Site.

On peut également utiliserle pointer-tirer pour modi-fier la source d’une image,réparer un lien rompu, etc.

• Méthode classique

Page 8: TP Dream Weaver

Création d’un site ouèbe avec DreamWeaver

Page 8 / 19

14 Voyage en Islande – Image cliquable141 Mise en page

L’utilisation de l’image cliquable que vous allez réaliser est assez courante. Ces images à liens multiplessont également très utilisées dans les barres de navigation ou les menus fantômes. Les principes sont identiques etpeuvent être aisément transférés.

• Créer une nouvelle page en cliquantdans la fenêtre Répertoire local dela fenêtre Site. L’appeler voyage, ladouble-cliquer pour l’ouvrir.

• Taper le titre Le Voyage en Islande,le centrer, le formater.

• Placer l'image carte.gif, la centrer.• Taper une ligne de consigne pour

avertir l'utilisateur qu'il doit cliquersur certaines zones de l'image pourafficher les dessins.

Les Images cliquables défi-nissent des zones sensiblesà l'intérieur d'une imageauxquelles sont associés desliens. C’est la raison pour la-quelle on les appelle égale-ment Images à liens multi-ples.

• Cliquer sur l'image pour la sélec-tionner. Dans la palette Inspecteur,cliquer sur Carte. Une fenêtre ap-paraît. Donner un nom à la carte.

• Au moyen de l'outil rectangle oucercle, tracer des formes pour défi-nir des zones sensibles

• En face du champ Liens, pointer-ti-rer ou cliquer sur l’icône de dossierafin de sélectionner le dessin cor-respondant à la zone géographique.

• En face du champ Cible, taper droit.

• Procéder de même pour les autresliens, cliquer sur OK pour refermerla fenêtre, enregistrer les modifica-tions, prévisualiser et tester les liensdans un navigateur.

Si le fond blanc (Explorer)ou gris (Netscape) des des-sins ne semble pas adapté,il faudrait créer de nouvel-les pages avec un fond et yplacer les dessins. Les liens,au lieu de cibler l'image, ci-bleraient la page HTML.

142 Définition des zones sensibles

Page 9: TP Dream Weaver

Création d’un site ouèbe avec DreamWeaver

Page 9 / 19

15 Contact – Adresse électronique – Tableaux• Créer une nouvelle page en cli-

quant dans la fenêtre Répertoirelocal de la fenêtre Site. L’appelercontact, la double-cliquer pourl’ouvrir.

• Taper un titre, appliquer un fond.• Insérer un tableau de 2 colonnes

et 2 rangées. Laisser les valeurs pardéfaut. Centrer le tableau : dansl’Inspecteur, choisir Centrer dans lemenu déroulant Aligner, en haut àdroite de l’Inspecteur.

• Cliquer dans la 1ère cellule et choi-sir gauche et milieu dans les menusdéroulants en bas à gauche de l’Ins-pecteur. Insérer l'image fenêtre.jpg.

• Cliquer dans la 2e cellule et choisirgauche et milieu dans les menusdéroulants Cellule - Horz et Vert enbas à gauche de l’Inspecteur.

• Taper l’adresse de Boudoul. Dansles attributs de paragraphe en hautà droite de l’Inspecteur, centrer lepremier paragraphe l’adresse.

• Cliquer dans la 3e cellule, choisirles même attributs que la première.Taper une ligne pour inviter les uti-lisateurs à envoyer un courrierélectronique à Boudoul.

• Cliquer dans la 4e cellule, choisirles mêmes attributs que dans la 2e.Placer l'icône ecrivez-moi.gif.

• Sélectionner l'icône, lui appliquerun contour de 0.

• Dans la palette Inspecteur, tapermailto:[email protected] le champ Liens.

• Sélectionner le tableau en doublecliquant son cadre. Régler la bor-dure à 0 dans l’Inspecteur.

• Enregistrer la page. Tester le liendans un navigateur.

Un lien Mailto appelle unlogiciel de courrier électro-nique et insère automati-quement l'adresse du desti-nataire dans le message.

Attention ! Un tableau estcomposé de 3 éléments : letableau lui-même (le cadre),les cellules qui le composentet les objets insérés dans lescellules (images ou texte).Chacun de ces éléments ades attributs d’alignementindépendants. Prendregarde à ne pas appliquerdes attributs contradictoiresqui sont à l’origine de dys-fonctionnement incompré-hensibles des tableaux.

En alignant les 2 cellules aumilieu, on offre la possibi-lité au texte de se dilaterverticalement. La présenta-tion est ainsi acceptable surMac et Pécé, quelle que soitla taille de police sélection-née dans la navigateur.

Page 10: TP Dream Weaver

Création d’un site ouèbe avec DreamWeaver

Page 10 / 19

16 Menu de gauche - RolloversLes Rollovers, ou permutations d’images, sont écrits en JavaScript. Ce langage de programmation déve-

loppé par Netscape à partir de la version 2 de son navigateur permet, notamment, de déclencher des actions enréponse à certains évènements. En l’occurrence, le survol d’une image par le curseur de la souris déclenche sonremplacement par une autre. Les Rollovers sont devenus des classiques du ouèbe et on ne trouve plus guère desites qui ne les utilisent. Les 2 images qui composent le Rollover doivent avoir exactement les mêmes dimensions.

• Créer une nouvelle page en cli-quant dans la fenêtre Répertoirelocal de la fenêtre Site. L’appelermenu.html.

• Insérer un tableau de 6 rangéeset 1 colonne. Effacer 75% afin delaisser le champ Largeur vide.Laisser pour le moment 1 dans lechamp bordure. Le tableau seraainsi plus facile à manipuler.

• Cliquer dans la première celluleet taper le titre Sommaire.

Comme chaque fois quel’on veut placer des élé-ments avec précision, on arecours à un tableau.

En laissant le champ Lar-geur vide, le tableau épouseles images au plus près.

• Cliquer dans la deuxième cellulepuis, menu Insérer –> Image re-tournée. Dans la fenêtre de dialo-gue, cliquer sur parcourir afin delocaliser l’image originale(ro_biographie1.gif), l’image quiapparaîtra au survol de la souris(ro_biographie2.gif) et la pagevers laquelle pointe le lien(biographie.html).

• Vérifier que la case Précharger lesimages est bien cochée.

• Procéder de même pour les autrescellules.

Par défaut, la page necharge les images retour-nées qu’au moment où lasouris survole le lien. Pourque le Rollover soit immé-diatement opérationnel, ilfaut donc forcer le naviga-teur à précharger ces ima-ges .

• Dans le menu, cliquer sur l’imageAccueil. Dans l’inspecteur, choisir_top dans le champ Cible.

• Pour les autres images, procéder demême mais taper droit dans lechamp Cible.

• Régler ensuite les bordures du tableauà 0 afin de le rendre invisible.

• Donner le titre Menu à la page(menu Modifier –> Propriétés de lapage), lui appliquer unfond,l’enregistrer, tester lesRollovers dans un navigateur.

Pour que les navigateurs sa-chent où afficher les diffé-rentes pages, chaque cadredoit porter un nom distinc-tif que l’on désigne commecible des liens. Dans ce sited’exemple, le Menu restetoujours visible et tous lesliens s’ouvrent dans le cadrede droite ou dans une nou-velle fenêtre.En revanche, le retour à lapage d’accueil doit s’effec-tuer sans cadres, ce que per-met la cible _top.

Page 11: TP Dream Weaver

Création d’un site ouèbe avec DreamWeaver

Page 11 / 19

17 Page principale – Les cadresLe mot cadre est une traduction paresseuse du mot anglais frame, lequel évoque plus une structure, une

armature, qu'un encadrement. Les cadres permettent d'afficher simultanément plusieurs pages HTML .Pour prendre une comparaison picturale, le cadre correspond plus au châssis du tableau qu'à son enca-

drement. Dans le cas d'un polyptyque, l'espace est divisé en différentes parties, chacune recevant un tableaudifférent. Le châssis est le cadre, les toiles sont les pages ouèbes.

• Menu Fichier –>Nouveau. Unenouvelle fenêtre vierge apparaît.

• Menu Affichage –> Bordures decadre. La fenêtre se dote de bor-dures.

• En maintenant la touche Alt en-foncée, tirer la bordure gauchevers le centre de la page.

• Remarquer la modification del’Inspecteur au bas de la fenêtre.

• Dans l’inspecteur, régler l’unitésur Pourcentages et rentrer 20%pour le cadre gauche et 80% pourle droit.

Le fait d'afficher les dimen-sions en pourcentage per-met de garder les mêmesproportions quelle que soitla résolution du moniteurutilisé.

Pour que les navigateurs sa-chent où afficher les diffé-rentes pages, chaque cadredoit porter un nom distinc-tif que l’on désigneracomme cible des liens.

• Il faut maintenant donner unnom distinctif à chaque cadre.

• Cliquer dans le cadre gauche enmaintenant la touche alt enfon-cée.

• Dans le champ Cadre de l’Inspec-teur, rentrer gauche.

• Enregistrer le cadre. Menu Fichier–> Enregistrer le jeu de cadres sous.L’appeler cadre.

On peut afficher une pa-lette pour les cadres. MenuFenêtre –> Cadres.

• Il faut maintenant placer les pa-ges à l’intérieur des cadres. Cli-quer dans le cadre gauche. MenuFichier –> Ouvrir dans un cadre.Sélectionner menu.htm.

• Procéder de la même façon pourle cadre droit en sélectionnantbiographie.html.

• Enregistrer le jeu de cadre (menuFichier).

Prendre le temps d’expérimenter les différentes options disponibles dans l’Inspecteur. On peut, parexemple, ajouter des bordures visibles aux cadres, en modifier la couleur, etc. Pour faire des cadres invisibles,régler la largeur de bordure à 0. On peut également paramètrer le comportement des ascenseurs qui appa-raissent lorsque la page est trop grande pour être affichée dans le moniteur. Champs Défiler et Ne pasredimensionner.

Page 12: TP Dream Weaver

Création d’un site ouèbe avec DreamWeaver

Page 12 / 19

18 Page d’accueil – Les calques

• Créer une nouvelle page en cliquantdans la fenêtre Répertoire local dela fenêtre Site. L’appeler index.html.Faire un clic droit dessus et choisirDéfinir comme page d’accueil. Ladouble-cliquer pour l’ouvrir.

• Menu Insertion –> Calque. Uneboîte flottante apparaît.

• Cliquer sur et insérer l’imageac_boudoul.gif dans la boîte.Redimensionner cette dernièrepour qu’elle épouse l’image au plusprès.

• Placer librement le calque sur lapage en le prenant par les bords.

Les calques sont l’une des fonctions les plus puissantes de DreamWeaver. Ils permettent, par l’utilisationdes boîtes flottantes du DHTML, de superposer plusieurs couches indépendantes, chacune portant un objet diffé-rent. On peut ainsi empiler des éléments et les placer au pixel près. Il est également possible de transformer lescalques en tableaux sophistiqués, les rendant ainsi compatibles avec toutes les générations de navigateurs.

Les symboles de calque enhaut de la page doivent êtredisposés de la façon sui-vante . Si un cal-que est imbriqué dans uneboîte, la page ne sera pascompatible avec les naviga-teurs de 3e génération et onne pourra pas disposer leséléments comme sur le mo-dèle.

• Menu Modifier –> Mise en forme–> Convertir les calques en tableau.Dans la fenêtre de dialogue, cocherEmpêcher le chevauchement des cal-ques et centrer . Choisir les autresoptions en fonction de l’effet désiré.

• Prévisualiser dans un navigateur.• Si le résultat n’est pas satisfaisant, il

est possible de revenir en arrière enconvertissant le tableau en calques.Menu Fichier –> Convertir –>Tableaux en calques.

Les boîtes flottantes ne sontpas reconnues par les navi-gateurs de 3e génération.Lorsque l’on veut les mettreen mouvement sur la pageafin de produire une anima-tion, on construit sciem-ment la page pour des na-vigateurs plus récents.Comme cet effet n’est pasrecherché dans cette page,les calques seront conver-tis en tableau, ce qui assu-rera une compatibilitémaximum.

Parfois, le tableau n’est pascentré dans Explorer. Sélec-tionner le tableau en dou-ble cliquant un de ses bordset appliquer à nouveau l’at-tribut centrer dans l’Inspec-teur. Si ça ne suffit pas, cou-per le tableau, placer le cur-seur au centre de la page etcoller.

• Procéder de la même façon avec lesfichiers ac_bo.gif, ac_doul.gif,ac_dessins.gif et ac_cheval_rouge.gif.Prendre soin de bien cliquer sur lefond de page avant l’insertion dechaque calque afin de ne pas lesimbriquer.

181 Création de la page d’accueil

Page 13: TP Dream Weaver

Création d’un site ouèbe avec DreamWeaver

Page 13 / 19

182 Définition du lien vers la page de cadres

• Cliquer dans la première cellule enhaut à gauche du tableau et tirer lepointeur pour les sélectionner tou-tes.

• Dans l’Inspecteur, pointer-tirerpour définir le lien vers la page decadres.

• Tester la page et le lien dans un na-vigateur.

• On remarque que les images se do-tent de très vilaines bordures bleuesqui indiquent que ce sont des liens.Pour les supprimer, cliquer les ima-ges l’une après l’autre et rentrer 0dans le champ bordure de l’Inspec-teur.

Le pointer-tirer n’est pasune obligation, mais c’esttellement plus pratique !

• Il ne reste plus qu’à donner un nomà la page et à lui appliquer un fond.Menu Modifier –> Propriétés de lapage. Dans la fenêtre qui apparaît,l’appeler index. Cliquer ensuite surImage d’arrière plan - Choisir, loca-liser fond_jaune_vert.gif ou toutautre motif. Enregistrer la page. Lavisualiser dans un navigateur.

Il est également possible demodifier la couleur des liensdans les propriétés de lapage (menu Modifier).

Page 14: TP Dream Weaver

Création d’un site ouèbe avec DreamWeaver

Page 14 / 19

2 Vérification et gestion du siteOutre la vérification de la compatibilité des pages avec les différents navigateurs, il est impératif de

s’assurer que tous les liens fonctionnent correctement et qu’aucun document n’est absent du dossier à publier surle serveur. Il est plus commode de mener ces vérifications depuis la fenêtre Site.

21 Compatibilité avec les différents navigateurs

• Afficher la fenêtre Site en cli-quant sur dans le Lanceur.

• Cliquer sur , en haut à gau-che de cette fenêtre, afin d’afficherla carte du site. Dans le menu dé-roulant adjacent, sélectionnerCarte et fichiers. Le site est pré-senté sous forme d’arborescence.

• Par défaut, seules les pages HTMLsont affichées. Pour voir les ima-ges associées –> menu Affichage–> Afficher les fichiers dépendants.

Par défaut, les noms des pa-ges sont leur nom de fichier.Pour afficher leur titreHTML –> Menu Affichage –>Afficher les titres des pages.

• Menu Fichier –> Vérifier naviga-teurs cibles.

• Dans la fenêtre de dialogue, co-cher le ou les navigateurs pourlesquels on désire vérifier la com-patibilité.

• Le rapport s’affiche dans le navi-gateur par défaut.

Il faut accepter l’idée qu’unsite ne peut pas être parfai-tement compatible avectous les navigateurs. Lesseules solutions sont, soitd’accepter de sacrifier le na-vigateur incriminé, soit deproduire des pages pluscomplexes comportant desscripts de détection du na-vigateur et de redirection.

22 Vérification des orphelinsSelon la documentation consultée, on appelle orphelins, soit des fichiers inclus dans le site mais qui

se trouvent hors du dossier à transférer, soit des fichiers présents dans ce dossier, mais vers lesquels ne poin-tent aucuns liens. Seul le premier cas est vraiment dommageable puisque le fichier absent ne serait pastransféré sur le serveur distant et ne s’afficherait donc pas dans le navigateur du visiteur. Il est à noter que lefait de tester le site localement dans un navigateur ne préserve en rien contre ce type d’orphelins.

Les exercices suivants ont pour objectif de mettre en évidences ces différentes situations et de dé-couvrir la façon dont DreamWeaver les gère et permet d’y remédier.

Page 15: TP Dream Weaver

Création d’un site ouèbe avec DreamWeaver

Page 15 / 19

• Situation 1• Lancer l’Explorateur de Windows

et sortir une image du dossier dusite à publier.

• Dans la fenêtre Site, menu Site–> Recréer le cache du site. Dansla carte du Site, le nom du docu-ment absent est maintenant enrouge.

• Double-cliquer la page HTML as-sociée et redéfinir la source del’image dans l’Inspecteur.

• Situation 2• Créer une nouvelle page HTML

en faisant un clic droit dans la fe-nêtre de droite Répertoire local. Ladouble-cliquer pour l’ouvrir.

• Y placer une image située hors dudossier du site et refuser l’invitede DreamWeaver à la copier dansle dossier approprié. Enregistrerla page.

• Menu Fichier -> Vérifier liens –>Site entier. Dans la fenêtre Vérifi-cateur de lien, sélectionner Liensexternes dans le menu déroulantAfficher. La page HTML apparaîtdans la liste. Le chemin d’accès del’image manquante est affiché àdroite, permettant de la localiser.

• Double-cliquer la page dans la fe-nêtre Répertoire local et apporterla correction nécessaire. Vérifierà nouveau les liens pour s’assu-rer que le problème est résolu et,sans refermer la fenêtre, enchaî-ner sur la situation 3.

On peut également remet-tre le document à sa placepar un glisser-déposer dansl’Explorateur de Windows.

• Situation 3• Dans la fenêtre Vérificateur de

liens, sélectionner Fichiers orphe-lins dans le menu Afficher.

• La page créée précédemment estprésente dans la liste.

• Comme ce document n’est reliéà aucun autre du site, le suppri-mer.

Page 16: TP Dream Weaver

Création d’un site ouèbe avec DreamWeaver

Page 16 / 19

23 Vérification des liensVous allez rompre volontairement des liens afin de découvrir la façon dont DreamWeaver les gère et

permet de les réparer. Deux méthodes sont possibles.

231 Méthode 1• Ouvrir la page dessins.html (ou

toute autre page). Sélectionnerune vignette et, dans l’Inspecteur,modifier le champ Liens en sup-primant une lettre afin de le rom-pre.

• Lancer le vérificateur de liens :menu Fichier –> Vérifier liens –>Ce document. Le fichier concernéapparaît dans la fenêtre vérifica-teur de liens.

• Sélectionner ce fichier dans la co-lonne Liens brisés et cliquer sur pour appeler une fenêtre de dia-logue.

• Localiser le fichier incriminé, cli-quer sur OK. Il disparaît aussitôtde la fenêtre Vérificateur de liens.

232 Méthode 2• Rompre un lien comme précé-

demment et lancer la vérification.• Dans la fenêtre du vérificateur,

double-cliquer l’icône de la pageHTML dans la colonne Fichierspour l’ouvrir.

• Dans la page HTML qui s’ouvre,le lien rompu est contrasté.

• Dans la palette Inspecteur, faire unpointer-tirer pour le réparer.

Page 17: TP Dream Weaver

Création d’un site ouèbe avec DreamWeaver

Page 17 / 19

24 Référencement du siteLa complexité grandissante de l’ Internet rend le référencement des sites de plus en plus difficile. La

tendance actuelle est une professionnalisation du secteur, avec l’apparition de sociétés spécialisées dans cette acti-vité.

L’efficacité du référencement est directement liée au fonctionnement des moteurs de recherche, qui sontde deux types :

• Les annuaires (Yahoo, annuaire de Voila, Nomade, Looksmart, etc.)Les sites sont visités par des humains qui les jugent dignes ou non de figurer dans leur annuaire. La seulefaçon de figurer dans ces pages est de soumettre le site à ces organismes. Il faut parfois renouveler cetteopération de nombreuses fois avant d’obtenir satisfaction, ce qui n’est jamais garanti.• Les moteurs de type araignée (AltaVista, Lycos, Voila, Hotbot, Infoseek, Excite, Ecila, Lokace, etc.)Des robots (que l’on appelle Spiders (araignées))scannent le ouèbe en permanence et indexent le con-tenu de certaines balises, qu’on appelle balises META, placées dans l’en-tête des pages.

Certains types de pages sont impitoyablement exclues des moteurs. On peut citer notamment : lescadres, les pages comportant des animations Flash, des liens JavaScripts, des scripts cgi sur la page d’accueil(comme un simple compteur), les adresses avec des points d’interrogations, etc.

Si la page d’accueil comporte de telles techniques, on peut utiliser un subterfuge consistant à créer unepage simple, conforme au fonctionnement des moteurs, et lui associer un JavaScript de redirection automatiquevers la page d’accueil.

241 Les balises METAElles sont composées de 3 champs :• AttributSpécifie si la balise META contient des informations descriptives sur la page (NAME) ou des infor-mations relatives au protocole HTTP (HTTP-EQUIV).• ValeurSpécifie le type d'information. tel que mot clef, description, auteur, etc.• ContenuC’est l'information elle-même. Par exemple la liste des mots clés ou le nom de l’auteur.

Exemples de balises<meta name=“Author” content=’’[C]uneiforme™’’><meta http-equiv=“content-language” content=“fr”><meta name=“Description” content=“Biographie et dessins du célèbre Boudoul”><meta name=“Keywords” content=“Boudoul, bande dessinée, BD, dessins”><meta name=“Creation_Date”content=“6 mai 2000”>

• Ouvrir la page index.html. MenuAffichage –> Contenu de l’en-tête.Les balises, symbolisées par des icô-nes, apparaissent.

• Afficher la barre d’outils des bali-ses en déroulant le menu situé ausommet de la barre d’outils.

Page 18: TP Dream Weaver

Création d’un site ouèbe avec DreamWeaver

Page 18 / 19

• Cliquer dans l’en-tête de la pagepour placer le curseur. Cliquer

ensuite sur pour insérer une

balise mot clef. Dans la fenêtre quiapparaît, taper Boudoul, bandedessinée, BD, dessins. Cliquer surOK.

• Ouvrir le code source de la pageafin de visualiser le code de labalise en cliquant dans le lanceursur

• Insérer une balise Description en

cliquant sur et procéder

comme précédemment.

• Pour les balises Auteur, Langue etDate de création, placer une ba-

lise générique en cliquant sur

et remplir les champ en recopiantle modèle des exemples de la pageprécédente.

La longueur de la liste desmots clés est limitée par lesmoteurs. Il faut donc s’entenir à quelques mots bienchoisis.

242 Référencement en ligneCertains site sont spécialisés dans l’automatisation des procédure de déclaration. Par exemple :• http://www.weboutils.com/referenceur/assistant-metas.html• http://www.referenceur.com/annonce_gratuite.html• http://www.annonceur.net/stepbystep• http://www.cybermaster.org/html/promot/fr/referenc.htm• http://www.webmasterplan.com/fr

243 Logiciels de référencementCertains logiciels sont également spécialisés dans cette tâche. On peut citer TopDog, AddWeb et

DumpTRUCK pour pécé, DumpTRUCK et Metagenerator pour Macintosh.

Même remarque que précé-demment. S’en tenir à unephrase courte d’une cen-taine de caractères maxi-mum.

• Si l’on désire réaliser une page deredirection automatique, cliquer

sur , localiser la page cible en

cliquant sur Parcourir dans la fe-nêtre de dialogue et fixer le délaiavant redirection.

Page 19: TP Dream Weaver

Création d’un site ouèbe avec DreamWeaver

Page 19 / 19

25 Transfert du site sur le serveurLes éditeurs HTML récents permettent d’effectuer le transfert FTP directement depuis le logiciel. Il

suffit d’indiquer à ce dernier l’adresse, l’identifiant et le mot de passe communiqués par l’hébergeur, puis d’établirla connexion Internet.

DreamWeaver offre également la possibilité d’effectuer un transfert local sur un réseau poste à poste ou,ce que vous allez faire pour découvrir la procédure, dans un dossier de votre propre machine.

• Créer un dossier à la racine dudisque dur. L’appeler, par exem-ple, Essai transfert.

• Dans la fenêtre Site, menu Site–> Définir les site. Cliquer sur Mo-difier. Dans la fenêtre gauche,choisir Infos sur serveur Web puisLocal/Réseau dans Accès au ser-veur. Cliquer sur et localiser ledossier précédemment créé. Cli-quer sur OK, Terminé.

• Dans la fenêtre Site, cliquer surPlacer. Le site est transféré dansle dossier indiqué.

• La fenêtre est divisée en 2 avec, àgauche le site distant et à droitele dossier local. Les deux sont bienentendu identiques.

• Double-cliquer n’importe quellepage HTML et modifier une pe-tite bricole.

• Cliquer sur Actualiser.

251 Transfert local

253 Transfert sur Internet ou Intranet• La procédure est exactement

identique. Lors du paramètrage,choisir simplement FTP dans Ac-cès au serveur Web et rentrer lesinformations communiquées parle fournisseur d’accès.

Quel que soit le type detransfert (dans un autredossier, sur une autre ma-chine du même réseau ousur un serveur distant), lebut est toujours le même :indiquer le chemin d’accèsdu dossier dans lequel le sitesera copié.

On peut également glisser-déposer les fichiers d’unefenêtre à l’autre.

En ce qui concerne la duréedu transfert, compter unemoyenne de 20 Mo/heureavec une ligne Numéris à64 ko.

252 Mise à jourDans l’hypothèse d’unemise à jour, seuls les docu-ments modifiés sont trans-férés.