Document de travail de la Mission Informatique des CIO de l'académie de Créteil. Conception et réalisation: JF CASTELL et l'équipe des COP chargés de

Transcription

1 Document de travail de la Mission Informatique des CIO de l'académie de Créteil. Conception et réalisation: JF CASTELL et l'équipe des COP chargés de mission en informatique.

2 Sommaire: CHAPITRE 1: DÉCOUVERTE DE L ÉCRAN DE TRAVAIL DE DREAMWEAVER... 3 CHAPITRE 2 : OBJECTIFS DU MANUEL DESSINEZ L ARCHITECTURE DE VOTRE SITE SUR PAPIER INSTALLEZ TOUS LES ÉLÉMENTS LOGICIELS ET MATÉRIELS NÉCESSAIRES À LA GESTION DE VOTRE SITE... 4 L environnement logiciel... 4 L environnement matériel PRÉPAREZ TOUS LES ÉLÉMENTS DE VOTRE SITE... 4 Le texte... 5 Les dessins... 5 Les images... 5 CHAPITRE 3 : DÉFINITION DE LA STRUCTURE DU SITE : LA «PAGE D ACCUEIL» LA «HOME-PAGE» OU PAGE D ACCUEIL L ÉLÉMENT CLÉ DE DREAMWEAVER CRÉATION DU DOSSIER LOCAL CRÉATION DE LA PAGE D ACCUEIL AJOUT D ÉLÉMENTS À NOTRE «HOME PAGE»... 8 CHAPITRE 4 : MISE EN PAGE.(TEXTE, TABLEAU, IMAGE ) LE TEXTE LES TABLEAUX LES IMAGES CHAPITRE 5 : CRÉATION DE LIENS LE POSITIONNEMENT DE LA PAGE Les chemins absolus Les chemins relatifs à la racine Les chemins relatifs au document ÉTABLISSEMENT D'UN LIEN VERS UN DOCUMENT ÉTABLISSEMENT D'UN LIEN VERS UNE ANCRE NOMMÉE ÉTABLISSEMENT D'UN LIEN AVEC UNE PAGE HÉBERGÉE SUR UN AUTRE SITE UN LIEN SPÉCIFIQUE : POUR ENVOYER UN MESSAGE DIRECTEMENT AU CIO VÉRIFIER LA COHÉRENCE DES LIENS CHAPITRE 6 : AGRÉMENTER VOTRE PAGE INSÉRER ET CRÉER UN LOGO ANIMÉ INSÉRER UN «ROLL-OVER» (EFFET DE SURVOL) INSÉRER UNE «IMAGE MAP» (IMAGE CLIQUABLE) SUR LA CARTE DU DISTRICT CHAPITRE 7 : TESTER VOTRE SITE ET LE METTRE EN LIGNE TESTER LE SITE LE METTRE EN LIGNE (INITIATION AU FILE TRANSFERT PROTOCOL FTP) LES ÉVENTUELLES ERREURS DE MISE EN LIGNE CHAPITRE 8 : RÉFÉRENCER LE SITE POUR QU IL SOIT ACCESSIBLE LE TITRE DE LA PAGE LES ÉLÉMENTS DE RÉFÉRENCEMENT LES MOTEURS DE RECHERCHES ET ANNUAIRES CHAPITRE 9 : LES PLUS POUR ALLER PLUS LOIN ANIMATION EN DHTML AVEC LES CALQUES INSERTION D UN COMPOSANT VECTORIEL ANIMÉ RÉALISÉ AVEC FLASH UN TEXTE PERSONNALISÉ DANS LA BARRE D ÉTAT /23

3 Chapitre 1: Découverte de l écran de travail de Dreamweaver Dreamweaver est un éditeur visuel professionnel pour la création et la gestion de pages web qui permet de créer aisément des pages compatibles avec toute une série de platesformes et de navigateurs. L écran de travail de Dreamweaver est composé au démarrage de 4 zones principales. En premier nous travaillerons sur la fenêtre de document (1) actif, celle-ci affiche le document Web à peu de choses près comme il apparaîtra dans le navigateur. Elle fonctionne pratiquement comme un traitement de texte. Lorsque vous saisissez du texte, le logiciel génère automatiquement le code HTML correspondant sans avoir à connaître une seule règle. Le deuxième élément est composé par la palette des objets (2). C est une sorte de centre de commande par où l on doit passer pour insérer rapidement toute une sorte d objets qui viendront constituer notre page Web (images, tableaux mais aussi composants javasripts, ou java voire Flash. Vient ensuite l Inspecteur des propriétés (3) qui permet à tout moment de 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 ). Enfin nous terminerons notre visite guidée dans l environnement de travail de Dreamweaver 2 en détaillant la dernière palette qui se nomme le lanceur (4). Sa fonction permet d afficher et / ou masquer les palettes et inspecteurs différents. Figure 1 : La fenêtre de travail et l environnement de Dreamweaver. Chapitre 2 : Objectifs du manuel 3/23

4 1. Dessinez l architecture de votre site sur papier Il s agit de préciser où nous voulons aller. En l occurrence, nous voulons créer un site Web comportant une page d accueil (la home page), et deux ou trois autres pages toutes liées entre-elles. En outre il conviendra de lier notre page avec la page d accueil du SAIO et éventuellement de l académie. De plus, on insèrera des images du centre ainsi qu une carte du district avec les coordonnées des établissements et éventuellement des liens vers ceux-ci directement depuis l image (image map). 2. Installez tous les éléments logiciels et matériels nécessaires à la gestion de votre site L environnement logiciel Pour construire un site Web, il vous faut différents éléments logiciels qui peuvent être soit payants, soit gratuits, soit utilisables pendant une durée limitée de temps (en général un mois). Il n est donc pas nécessaire de prévoir un budget extraordinaire pour s afficher sur le réseau des réseaux. Vous devez posséder : 1. Un logiciel de construction Web (on supposera que vous avez fait l acquisition de Dreamweaver lorsque vos CCMI vous ont signalé l opportunité d en faire l acquisition à un prix défiant toute concurrence). 2. Un logiciel de dessin type Paint Shop Pro. 3. Un logiciel de mise en ligne des pages, (mais Dreamweaver le fait très bien tout seul) type Ws_FTP (LE). 4. Un logiciel de traitement du son si vous voulez disposer des éléments sonores en ligne (attention au volume de données). Eventuellement, un logiciel de traitement vidéo (même remarque). 5. Un logiciel d animation graphique (type Flash ou de création de Gif animés). Tous ces produits sont disponibles sur le CD de la mission volume 1 à 3, n hésitez pas à les installer pour vous familiariser. L environnement matériel En fait, il faut un ordinateur, bien sûr, équipé d un modem pour l installation du site en ligne. Cette étape ne se faisant qu au dernier moment. Éventuellement vous pouvez disposer d un scanner si vous voulez utiliser des photos ou récupérer des textes sans avoir à les ressaisir. Enfin, vous avez la possibilité d utiliser directement un appareil photo numérique disponible sur simple demande auprès de la délégation régionale de l ONISEP pour tous les CIO de l académie de Créteil (Francois.Crevelle@onisep.fr). 3. Préparez tous les éléments de votre site Une fois l architecture du site arrêtée, et une fois le contenu détaillé selon des grandes directives, il est temps d attaquer l étape suivante : préparer tous les éléments qui viendront nourrir notre site. Nous l avons vu, textes, photos, dessins et éventuellement sons et vidéo sont les principaux acteurs de la page. Même si ces derniers doivent être traités à part en raison de leur plus grande complexité à être manipulés et à leur plus gros volume de données. Textes, photos et dessins, ne sont pas directement utilisables dans la construction de pages. A partir d une matière brute, chacun de ces éléments doit subir des modifications afin d être optimisé pour le Web. Détaillons. 4/23

5 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 banal traitement de texte. Les dessins De jolis dessins peuvent conférer un très joli cachet, d autant plus que certains logiciels permettent d animer les images. Par exemple, avec quelques efforts vous pouvez rendre une flèche clignotante qui sera du plus bel effet sur votre page. Si vous ne voulez pas vous compliquer l existence, un beau dessin sur papier fera parfaitement l affaire à condition de le traiter comme une image. Il suffit ensuite de le numériser 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 Eléments incontournables d une page, les images doivent généralement subir une cure d amaigrissement drastique pour pouvoir être utilisées correctement. L obsession doit être celle du poids, c est à dire de la vitesse d affichage de votre page pour tout surfeur qui visite votre page. Pour cela : 1. Abaissez le nombre de couleurs utilisées. 2. Réduisez la résolution et la taille de vos images. Le poids de celle-ci devrait alors fondre. 3. Prenez l habitude de travailler vos images en pixel et non en centimètres. 4. Les format les plus adaptés au Web sont 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 agresse l image par une compression très forte, 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 «home-page» ou page d accueil l élément clé de Dreamweaver Tout site commence par la création d une page d accueil, la fameuse «home page», et selon l hébergeur choisi, celle-ci doit se nommer précisément. Sur ac-creteil.fr le webmaster de l académie a fixé le nom, qui doit être welcome.htm (ou html) et peut éventuellement s appeler bienvenue.htm. 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, et pour des raison de commodité, on conseille que celui ci soit fixé à la racine du disque dur (général C). De plus, son nom et sa structure doivent être identiques à celle du disque distant qui contiendra vos pages visibles depuis le reste du monde. 2. Création du dossier local Sur votre disque dur commencez par créer un dossier comme indiqué dans la figure ci dessous. 1. Ouvrez l Explorateur Windows et positionnez vous sur le disque C : 2. Une fois le contenu du disque affiché, cliquez dans le menu fichier, puis choisissez Nouveau, puis Dossier, saisissez le nom de votre CIO (exemple tremblay prenez 5/23

6 contact avec votre CCMI pour connaître le nom des dossier distant sur le serveur de Créteil). 3. Lorsque vous avez nommé le dossier positionnez vous à l intérieur, puis recommencez la procédure de création de dossier, pour créer un nouveau dossier qui s appellera images : La structure du site local est alors la suivante c:\nom_du_cio\images\. 4. Lancez Dreamweaver, puis cliquez sur Fichier, Nouveau site. La boite de dialogue ci-dessous apparaît : Figure 2 : Définition du site local du CIO. 5. Cliquez dans la zone de droite sur la catégorie «Infos locales», puis remplissez comme dans la figure précédente, 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. 6. Cliquez sur la case à cocher «Utiliser le cache ( ) mise à jour des liens», et terminez en cliquant sur OK. Nous reviendrons ultérieurement sur ce que signifie l option de gestion des liens. 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. Figure 3 : Fenêtre de gestion de site de Dreamweaver 6/23

7 Détaillons cette fenêtre pour mieux comprendre le problème 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 CIO. 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 : welcome.htm (figure 4). Figure 4 : La création de la page d accueil depuis la gestion de site 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». Vous voici maintenant l heureux propriétaire d une page d accueil flambant neuve, certes vide, mais bien réelle. Il ne reste plus maintenant qu à la nourrir, avant d aller plus loin, vous pouvez dores et déjà créer de la même manière (points 1 à 4) les autres pages qui viendront épauler le contenu de votre futur site. Donnez un nom significatif à chacune de vos pages (local pour localisation, etab pour établissements, service pour services ). La page sur les services du centre devrait alors être nommée services.htm. Dans notre exemple nous allons créer un site comportant 3 pages comme le reproduit le croquis ci dessous. Figure 5 : La création de l architecture du site est à faire au préalable. 7/23

8 4. Ajout d éléments à notre «home page» Pour ce faire, il faut garder présent à l esprit l architecture de notre site. Globalement, toutes les pages de notre site doivent être accessibles depuis la page d accueil. Pour commencer, il convient de donner un titre à la «home page». 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 welcome.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». Figure 5 bis : La modification des propriétés de la page 3. Dans la zone Titre : saisissez le titre de ce qui va s afficher dans le navigateur qui consultera votre page (par exemple «Bienvenue sur notre site»). 4. Nous reviendrons ultérieurement sur la façon d intégrer des images, mais le principe reste le même pour une image d arrière plan. 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 votre navigateur en appuyant sur F12. Chapitre 4 : Mise en page.(texte, tableau, image ) 1. Le texte L élément texte, ne nécessite aucun soin particulier. Nous l avons dit plus haut, il suffit de le saisir, ou de le récupérer par collage (menu Edition, Coller). Les options de formatages et d alignement sont très réduites par rapport au traitement de texte. Pour formater du texte vous devez utiliser l Inspecteur de propriétés (figure 6). 1. Saisissez le texte adéquat dans la fenêtre du document (par exemple «Bienvenue au CIO de XXX»). 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. 8/23

9 Figure 6 : Les effets disponibles pour le texte de la page Nous avons maintenant un tableau qui va contenir deux cellules dans lesquelles nous viendrons placer une image (le logo du CIO) et un texte (un texte d état qui informe des nouveautés en cours ou à venir). Compte tenu des médiocres possibilités de mise en page du langage html, la solution la plus simple 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. Aussitôt une boite de dialogue vous permet d en définir les attributs. Dans notre exemple elle fera 2 colonnes et 1 ligne. Sa largeur sera de 140 pixels et la taille de la bordure sera de 0. Figure 7 : L insertion d un tableau et quelques unes des options possibles Lignes et colonnes déterminent le nombre de lignes et de colonnes du tableau. 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 (cf. remarque). Bordure détermine la largeur de bordure du tableau. Remarque : vous avez la possibilité de choisir l unité de dimensionnement du tableau de 2 façons (encadré). En cliquant sur la boite combo (cerclé en rouge) Le logiciel vous laisse le choix entre une dimension en pixel et une dimension en pourcentage. Comment 9/23

10 se décider. Si cela vous est égal choisissez plutôt le pourcentage, c est plus simple à gérer. L inconvénient de cette méthode est d être 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 (au début en fait), mais les objets ne changent plus de taille par la suite. Figure 8 : Le tableau dans la page en construction Maintenant que notre tableau de 2 x 1 est créé nous allons y placer un texte dans la colonne de droite et une image dans celle de gauche. 3. Les images Dreamweaver, comme la plupart des navigateurs, peut afficher les images JPEG et GIF. Dreamweaver, Microsoft Internet Explorer 4.0 et plus récent, ainsi que Netscape Navigator 4.04 et plus récent prennent également en charge les images PNG. 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 GIF, 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 de votre CIO dans le dossier image de votre site web local (cf. page 6). Pour insérer une image : 1. Placez le curseur là où vous voulez que l'image apparaîsse sur la page (dans le cadre 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 (figure 9). 10/23

11 Figure 9 : L insertion de l image du logo qui va arriver dans la page. 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 (étudié au chapitre 7). 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 ou dans le champ URL de la boîte de dialogue Sélectionner fichier HTML (accessible depuis l'inspecteur de propriétés. 1. Les chemins absolus Il s'agit de chemins complets comprenant le protocole du serveur (ordinairement pour les pages Web). Par exemple, 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. 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. Par exemple, le chemin /maio/welcome.html crée un lien avec un document nommé Welcome.html dans le répertoire, 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. 11/23

12 3. Les chemins relatifs au document Ils sont relatifs au répertoire contenant le document en cours. Par exemple, document.htm désigne un document du répertoire courant ;../ document.htm désigne un document du répertoire au-dessus du répertoire courant ; et docshtml/document.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. 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 accessibles au CIO. 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) et exécutez les opérations suivantes : 3. Cliquez sur l'icône de répertoire (cf. figure 6) pour naviguer jusqu'à un fichier et le sélectionner. Figure 10 : L insertion de la liaison entre les deux pages Web. 4. Cliquez sur le bouton Sélectionner. Figure 11 : La liaison affichée dans le document et l inspecteur de propriétés. 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 12/23

13 racine. Pour créer un lien vers un document situé en dehors du site, entrez un chemin absolu (voir ci après). 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. 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é : Les services offerts par le CIO. 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. Figure 12 : Création de l ancre dans le document 4. Cliquez sur OK. L inspecteur de propriétés change d aspect. Figure 12 bis : L ancre placée dans le document 5. Créez maintenant un lien vers cette ancre nommée : 6. Sélectionnez une image (ou à défaut 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 "haut" du fichier en cours, tapez #haut. 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 13/23

14 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 (figure 13)dans la zone Liens de l inspecteur de propriétés (clic droit puis coller) Figure 13 :Collez les liens vers des pages extérieures directement d un clic droit de souris. 5. Un lien spécifique : pour envoyer un message directement au CIO 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 : 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 dans le champ Lien. 3. Appuyez sur Entrée. Figure 14 :Un lien de type envoi de message depuis la page de navigation. 6. 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. 2. Ou cliquez directement sur 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) 14/23

15 Figure 15 :La vérification des liens du site entier. 3. Dans la zone Afficher, cliquez sur ce que vous souhaitez vérifier(liens brisés, liens externes et fichiers orphelins). Chapitre 6 : Agrémenter votre page 1. Insérer et créer un logo animé Vous devez pour cela utiliser un logiciel de dessin. C est un complément idéal de Dreamweaver 2, vous en trouverez une version sur le CD de la mission volume 2. Dans le dossier Outils, cherchez le dossier PSP, puis lancez le fichier d installation. Une fois celle-ci réalisée, nous allons nous mettre au travail. Remarque : 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 votre éditeur d'image préféré. 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 au CIO». 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. 15/23

16 Figure 16 :La création du logo animé. 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, etc Nous allons maintenant assembler les objets à l aide de l outils d animation livré avec Paint Shop Pro, Animation Shop. Le principe est celui du cinéma, c est à dire une succession d image dans un intervalle de temps. 11. Démarrez l assistant d animation, Fichier, Assistant d animation, en vérifiant que l option Même taille que la première image est active. Cliquez sur 4 fois sur Suivant. 12. Sélectionnez les 3 images en cliquant sur le bouton Ajouter l image et en indiquant le bon dossier, cliquez sur Suivant, puis sur Terminer. 13. Enregistrez votre travail dans le dossier images en acceptant les réglages par défaut. C est fini. Insérez votre animation comme indiqué au chapitre 4. Vous pouvez visualiser votre animation en cliquant sur Afficher, puis Animation. 2. Insérer un «Roll-over» (effet de survol) Nous allons utiliser les logos précédents pour nous servir d exemple. 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 retournée. 3. Dans la boîte de dialogue qui apparaît (figure 17), entrez les informations suivantes : Vous devez taper le chemin et le nom de fichier de l'image originale dans le champ Image originale (ici image logo1.gif dans le dossier cio\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. 16/23

17 Figure 17 :La création de l image retournée. 4 Cliquez sur OK. On notera qu'il est possible d'appeler un aperçu de votre rollover qui s'ouvrira directement dans votre navigateur. Testez-le. En appuyant sur F12, le passage de la souris au dessus du logo affiche un changement d état de l image. c est un premier jet, à vous de réaliser quelque chose de plus sophistiqué. 3. Insérer une «image map» (image cliquable) sur la carte du district Une carte graphique 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 la carte 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 chacun des établissements de la carte du district du CIO. Figure 18 :Un extrait de la carte du district avec les établissements sous forme de ronds. Pour créer la carte graphique: 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 cercle ou carré et faites-le glisser au-dessus de l'image pour créer une zone sensible de la forme d'un cercle ou d'un carré, 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. 17/23

18 Figure 19 :L éditeur «d image map» fourni avec Dreamweaver. 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 (cf. figure 15 chapitre 6). 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. Votre site fonctionne maintenant parfaitement en local, vous allez pouvoir le mettre à disposition du monde entier. C est la dernière étape, vous devez simplement vous munir des noms de logins et mots de passe qui vous ont été transmis par votre administrateur réseau. 18/23

19 2. Le mettre en ligne (initiation au File Transfert Protocol FTP) Pour placer votre réalisation sur le serveur Web, il faut pratiquer la manipulation inverse d un téléchargement (en anglais, il s agit d un upload). Vous allez donc transférer les fichiers et dossiers qui constituent l intégralité de votre site de votre disque dur sur celui de l hébergeur distant. Le navigateur ne sachant pas réaliser de telles tâches, il faut se tourner vers un outils spécialisé dit de FTP (pour File Transfert Protocol). Inutile de vous précipiter sur le CD de la mission, Dreamweaver en possède un intégré à son fonctionnement qui permet de réaliser la manœuvre sûrement et simplement. Vous devez 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. Vous êtes devant la fenêtre de définition de site qui comporte 4 catégories sur la gauche. Cliquez sur la seconde : Infos du serveur Web. Son contenu apparaît. Figure 20 :La mise en ligne du site le paramétrage de l accès au serveur. 4. La zone Accès au serveur affiche pour l instant «Aucun», vous allez la modifier d un clic de souris pour sélectionner l option FTP (figure ci-dessus). 5. Saisissez maintenant les informations qui vous ont été communiquées par la MATICE de Créteil, concernant votre espace disque sur le serveur académique. Hôte FTP : Répertoire de l hôte : Nom d utilisateur Mot de passe ftpw.ac-creteil.fr /saio/cio93/non-du-cio (ex. /saio/cio93/epinay) nom-du-cio (ex. cioepinay) qui vous a été communiqué 6. Cliquez sur Enregistrer, ne cochez pas «Utiliser le pare-feu». 7. Cliquez sur OK, puis sur Terminer, c est tout. 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 19/23

20 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. Figure 21 :La mise en ligne du site l accès au site distant. 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 Votre transfert terminé, c'est le moment d'effectuer un test grandeur nature pour savoir si tout s'est bien passé. Pour cela, tentez de vous connecter à votre page Web en utilisant votre navigateur. Si tout apparaît en ordre, cela signifie que vous avez suivi la marche à suivre à la lettre. Dans le cas contraire, examinons les cas de problèmes les plus fréquents ainsi que leurs causes probables. 1. Le tragique message: «Erreur 404». Si ce message apparaît lorsque vous tentez d'atteindre votre page d'accueil, il y a de fortes chances pour 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. Normalement, si vous avez suivi notre conseil et vérifié vos pages avant de les transférer sur le serveur, vous ne devriez pas avoir un tel message. 2. Votre 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. Sur ac-creteil.fr, votre page d'accueil doit se nommer welcome.htm (ou html). Si le serveur ne peut l'identifier, il affiche un message. Si vous êtes certain que la syntaxe est bien respectée, vérifiez tout de même que ce fichier welcome.html 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. En cas d'erreur, rectifiez le tir et tout rentrera dans l'ordre. 20/23

21 Chapitre 8 : Référencer le site pour qu il soit accessible 1. Le titre de la page Nous l avons vu plus tôt, le titre est un é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 en outre à nommer toutes vos pages pour augmenter vos chances de référencement et donc d accès. 2. Les éléments de référencement Quelques moteurs de recherche (par exemple Excite, AltaVista, Lycos, InfoSeek) demandent le strict nécessaire, c'est-à-dire le titre du site et son adresse. Le référencement dans leur base de données est pris en charge par un robot qui explore les différentes pages de votre site afin de les indexer. Les robots extraient le titre des pages et les premiers mots de leur contenu : ces données sont utilisées pour décrire votre site. Vous pouvez cependant fournir des indications plus précises, détectées par certains robots (qui vous en seront reconnaissants): 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 et NAME="keywords" qui fournit les m ots-clés pour l'indexation. Pratiquement, ces deux Meta Tags se présentent comme ceci <META NAME="description" CONTENT=" Site du CIO de Villejuif Comment faire pour venir nous voir"> <META NAME="keywords" CONTENT= "orientation, éducation, conseil, conseiller d orientation-psychologue, enseignement, profession, métier"> 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 vous souhaitez 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 : vous pouvez 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». Figure 22 :La palette des objets en version insertion d 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 21/23

22 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 (figure 23). Figure 23 :L accès au référencement dans Yahoo!. Ensuite, on va vous expliquer par une succession d écran 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 Figure 24 :L écran de référencement avec Yahoo!. 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é. Figure 25 :L écran de référencement avec Altavista. Chapitre 9 : Les plus pour aller plus loin 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 p lug-ins et même d'autres calques tout ce que vous pouvez mettre dans le corps d'un document HTML 22/23

23 peut être mis dans un calque. 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. Les sites de la mission et celui du SAIO font appel à un jeu de calques pour afficher le contenu de pages lors du survol d un lien par la souris. 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 L'animation Flash, vous en avez certainement déjà entendu parler. Pour les néophytes, sachez que Flash 5 (nom du logiciel) permet d'animer les é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é du ou des mouvements et tient en haleine le surfer qui écarquille tout grand ses yeux. Une chose est sûre, le Flash, ça en jette! Un autre atout non négligeable de ce logiciel est la synchronisation possible du son avec l'animation. Le son et l'image réunis, on se croirait presque au cinéma. La seule petite restriction pour visualiser une animation en Flash est de posséder le p lugin Shockwave Flash Player. Ce plug-in est dorénavant présent sur la majorité des navigateurs. Communicator 4.Xx, Windows 98, et Explorer 5 en sont équipés, pour les versions antérieures, vous pouvez télécharger le plug-in à partir du site de Macromedia N'hésitez pas, il est très léger, à peine 170K. 3. Un texte personnalisé dans la barre d état 0n voit souvent de courts textes dans la barre d'état de son navigateur. Très légers, ces JavaScripts ont le mérite 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 votre page HTML. Voici tout d'abord comment afficher un texte fixe. <SCRIPT LANGUAGE="JavaScript"> <! window.defaultstatus="bienvenue sur notre site Web!"; // --> </SCRIPT> Mais vous pouvez aussi pencher pour la variante qui suit, et qui fera s'afficher deux textes alternativement. Là encore, il est impératif de placer ces quelques lignes entre les parties <HEAD> et </HEAD> de votre page HTML. <SCRIPT LANGUAGE="JavaScript"> <! var rotatemsg = true; function MsgStatus() { if(rotatemsg) { window.status = ' ; window.defaultstatus = 'Bienvenue au CIO!'; } if(!rotatemsg) { window.status = ' ; window.defaultstatus = 'Un site pour s orienter sur la toile!'; } settimeout("msgstatus();rotatemsg=! rotatemsg", 900); } MsgStatus(); // --> </script> 23/23