Création de pages web

Transcription

1 Création de pages web I. Démarrage du logiciel 2 1. La Barre d'état La palette objets Les autres palettes et inspecteurs La fenêtre de site...3 II. Créer des pages avec DreamWeaver 4 A. Création de la page monuments... 4 B. Création de la page équipements...5 C. Créer la page Soarns...6 D. Créer la page menu... 6 E. Créer la page orgues... 6 (1) Exercice : créez le lien... 6 F. Créer la page Plan Insérer des signets (ancres nommées) Créer des zones réactives... 7 G. Créer un site Préparation du site....7 III. Préparation des cadres. 9 IV. Liens entre les pages avec les cadres. 11 V. Annexe : les calques 12 VI. Annexe : Créer des calques interactifs 14 Stage Création de pages Web DD/03/YYYYYY 1

2 I.Démarrage du logiciel Lorsque vous lancez DREAMWEAVER pour la première fois, quatre éléments s'affichent à l'écran : La fenêtre principale : la fenêtre de document. Trois palettes flottantes. La palette objets Le lanceur permet d'ouvrir et de fermer d'autres palettes et fenêtres. A chacun des boutons correspond une palette. Fenêtre de document : La fenêtre de document est celle où vous créez vos pages Web. Elle ressemble à celle de la plupart des autres logiciels : elle comprend en haut une barre de titre, une barre de menus, un espace vide réservé à vos créations; et en bas une barre d'état. L'inspecteur de propriétés : il affiche les paramètres de l'élément sélectionné dans la fenêtre de document, et permet également de les modifier. Vous en aurez constamment besoin, placez-le sur votre écran de sorte à pouvoir y accéder facilement. Son contenu change en fonction de l'élément sélectionné. 1. La Barre d'état. Elle affiche différentes informations et permet de masquer différentes palettes. De gauche à droite, on y trouve : Le sélecteur de balise. La dimension de la fenêtre en pixels. Le volume total du document en Kilo-octets et le temps de téléchargement estimé. Le mini-lanceur qui permet d'afficher ou de masquer diverses palettes et fenêtres La palette objets. Cette palette comprend une série de boutons représentant différents éléments que vous pouvez insérer dans vos pages Web. La palette objet contient plusieurs "volets" qui regroupent les objets de même type. Le volet afficher par défaut est le volet "commun". Les autres volets sont : En-tête Formulaire Invisible 3. Les autres palettes et inspecteurs. Dreamweaver propose une série impressionnante de palettes et inspecteurs. Certaines sont accessibles directement à partir du lanceur, d'autres à partir du menu Fenêtre. Les palettes flottantes de Dreamweaver sont : Bibliothèque : permet de stocker et de réutiliser des parties de site fréquemment employées. Style : permet de gérer les feuilles de styles. Comportements : permet de créer des scripts interactifs en quelques clics. Scénarios : permet d'insérer des animations dans une page. Calques : permet de gérer les calques. Cadres : permet de visualiser et de modifier des cadres. Modèle : permet de gérer les modèles de documents. Stage Création de pages Web DD/03/YYYYYY 2

3 4. La fenêtre de site La fenêtre de site permet de gérer le contenu d'un site en affichant les différentes pages qui le composent et leurs liens; elle permet aussi d'ajouter ou de supprimer des fichiers d'un serveur Web. Pour accéder à cette fenêtre il faut cliquer sur le bouton "site" du lanceur. Stage Création de pages Web DD/03/YYYYYY 3

4 II.Créer des pages avec DreamWeaver A.Création de la page monuments On a un dossier «Site_Orthez où seront enregistrées les pages Web. On a 1 sous dossier médias contenant les images et les sons. Vous allez créer une page Web contenant un titre et une suite de lignes horizontales et de tableaux à 1 ligne et 2 colonnes (colonne de gauche l image d un monument, colonne de droite un texte concernant ce monument). Cliquez dans la page avec le bouton droit et choisir propriétés de la page (bouton gauche). Titre de la page : monuments. Lancer DW. Apparaît une page vierge : Ecrire le texte : Quelques monuments d Orthez. Sélectionnez avec la souris. Enregistrez la sous le nom monuments.htm dans le dossier site Orthez (à créer s il n existe pas) Dans la fenêtre propriétés choisir police Arial, couleur rouge taille 5 gras italique Dans la palette objets cliquez sur ligne horizontale Dans la palette objets cliquez sur tableau. Insérez un tableau d une ligne et de 2 colonne (bordure à 0) Ouvrez le texte Orthez.doc pour pouvoir copierdu texte et le coller dans la page monuments. Dans la colonne de gauche insérez l image pv1.jpg (palette objets). Cliquez dans la barre des tâches sur le document Orthez.doc. Sélectionnez et copiez le texte concernant la tour Moncade. Collez le dans la colonne de droite. Répétez cette même opération pour la tour Moncade Pont Vieux, la maison Jeanne d Albret, l église St Pierre, la Maison Commune, le temple protestant Stage Création de pages Web DD/03/YYYYYY 4

5 B.Création de la page équipements Fichier Nouveau pour créer une nouvelle page. Enregistrez la sous le nom de équipements.htm Tapez le texte» La Mairie et la Moutète» et mettez le en forme. Insérez 2 calques avec la palette Objets. Dans chacun des calques insérez un tableau d une ligne et de 2 colonnes sans bordure. Insérez l image mairie.jpg dans la colonne de gauche dutableau du premier calque et tapez le texte correspondant dans la collone de droite. Répéter l opération pour le second calque (image moutete.jpg). Disposez les calques à votre convenance. Stage Création de pages Web DD/03/YYYYYY 5

6 C.Créer la page Soarns Fichier Nouveau pour créer une nouvelle page. Enregistrez la sous le nom de soarns.htm. Tapez le texte Les Soarns et mettez le en forme. Insérez par copier coller le texte du document soarns.doc. Titre : soarns.enregistrez soarns.htm. D.Créer la page menu On crée une page d accueil qui va permettre de visualiser les pages déjà créées. Fichier Nouveau pour créer une nouvelle page. Enregistrez la sous le nom de menu.htm. Titre de la page :accueil. Tapez les textes Les monuments Les équipements publics. Quartiers : les Soarns Pour créer les liens : Pour chaque texte : sélectionnez le puis choisir Modifier Hyperlien Créer un lien et choisir la page Web correspondante E.Créer la page orgues Fichier Nouveau pour créer une nouvelle page. Enregistrez la sous le nom de orgues.htm. Tapez le texte L orgue du temple et mettez le en forme.insérez un tableau d une ligne et de 2 colonnes sans bordure. Insérez l image orgues.jpg dans la colonne de gauche du tableau et le texte correspondant à l orgue depuis le document Orthez.doc par copier coller. Mettre un fond sonore : cliquez dans la barre d état de Dreamweaver sur le bouton html(celui de droite). Après la balise <body> rajouter la balise <bgsound> comme ci-dessous : <body bgcolor="#ffffff" > <bgsound src="medias\magnificat.mid"> La page orgue sera affichée lorsque l on cliquera sur le mot orgue dans la page monument dans le texte sur le temple. (1)Exercice : créez le lien F.Créer la page Plan On veut créer une page Plan d Orthez qui affiche l image du plan d orthez. Cette image sera réactive. Lorsque l on clique sur une zone réactive (sur le pont vieux) s affiche la page monuments au niveau du pont vieux etc. On pourra ainsi naviguer avec le plan. 1.Insérer des signets (ancres nommées) Il faut d abord insérer des signets dans la page monuments : au début dechaque texte de la page monument insérez une «ancre nommée» (pont, tour, maison, jeanne, temple, eglise) Stage Création de pages Web DD/03/YYYYYY 6

7 2.Créer des zones réactives Insérez dans la page Plan l image plan.gif. Sélectionnez la en cliquant dessus. Puis clic droit et choisir carte graphique. Donnez lui un nom et dessinez des zones réactives avec les outils. Pour chaque zone vous remplissez le lien avec le nom de la page monuments suivi de # et le nom de l ancre (ou du signet) correspondant. Dans Secondaire écrivez le texte qui apparaîtra dans un rectangle jaune lorsque la souris survolera la zone réactive. G.Créer un site Nous allons organiser les pages créées à l intérieur d un site 1.Préparation du site. Cliquez sur l onglet Site. Allez dans Site/Nouveau site. A partir de l option Infos locales donnez un nom au site (Orthez par exemple). Sélectionnez le répertoire de travail (contenant la page d accueil du site : Site_Orthez). Stage Création de pages Web DD/03/YYYYYY 7

8 Sélectionnez la page d entrée dans le site (menu.htm) Dans le site cliquez bouton droit sur la page menu.htm et choisissez définir comme page d accueil. Vous pouvez ensuite fgaire afficher la carte du site (fenêtre carte du site). Stage Création de pages Web DD/03/YYYYYY 8

9 III.Préparation des cadres. Cliquez sur l onglet Document. Nous allons créer une page qui contiendra deux zones, l une destinée au menu du site, l autre à son contenu. Ces zones sont appelées cadres (frame). Cette page s appellera index2.htm. Enregistrer le document vierge sous le nom index2.htm, à la racine du site. Aller dans Modifier/jeux de cadres/fractionner le cadre à gauche, deux cadres verticaux apparaissent : Cliquer sur Fenêtre / Cadres pour faire apparaître la fenêtre «Cadres» qui vous permettra de définir aisément les propriétés de vos deux cadres. Cliquer sur le cadre de gauche, les propriétés de ce cadre sont données dans la fenêtre ci-dessous : Nom du cadre Page s affichant dans le cadre lors de son ouverture Barre de défilement Caractéristiques des bordures de ce cadre Le premier cadre s appellera menu et aura pour page source menu.htm Cliquer sur le cadre de droite pour définir ses propriétés : Le second s appellera principal et aura pour source plan.htm On supprimera les bordures, et les cadres ne seront pas redimensionnables. En cliquant sur la bordure extérieure des cadres dans la fenêtre «Cadres», définir les propriétés du jeu de cadres : Enregistrez votre page de cadre sous le nom index.htm. Ce sera la nouvelle page d accueil. Stage Création de pages Web Dans le fichier site définissez DD/03/YYYYYY index.htm comme 9 nouvelle page d accueil. Vérifier la carte du site

10 Stage Création de pages Web DD/03/YYYYYY 10

11 IV.Liens entre les pages avec les cadres. Sélectionnez le mot «les monuments d Orthez» de la page menu. Cliquez droit dessus et choisissez l option créer le lien (modifier le lien s il existe déjà). Vous obtenez la fenêtre de propriétés ci-dessous : Page pointée par le lien Cadre dans lequel il va s afficher En utilisant cette méthode, faites tous les liens entre les mots de la page menu affichée dans le cadre menu et les pages devant s afficher dans le cadre principal. Remarque : vous pouvez modifier les couleurs des mots hypertextes en ouvrant la fenêtre de propriété de la page : Dans cette configuration, le lien correspondant à la page visitée sera vert, les autres seront jaunes (différent dans Netscape). Stage Création de pages Web DD/03/YYYYYY 11

12 V.Annexe : les calques Savoir tracer les calques La procédure d'insertion d'un calque est enfantine : Cliquez sur icône Calque dans la palette Objets. Le curseur de la souris se transforme en croix. Cliquez à l'endroit de votre page où se situera la coin supérieur gauche de votre calque, puis tout en en maintenant le bouton enfoncé, faites glisser la souris. Lâchez le bouton une fois atteint le coin inférieur droit. Un contour noir est affiché autour de l'emplacement de votre calque. Stage Création de pages Web DD/03/YYYYYY 12

13 Ajuster les calques Il est peu probable que vos calques soient parfaitement alignés et aux bonnes dimensions lorsque vous aurez fini de les remplir. Il vous reste donc à ajuster précisément l'ensemble des calques. La solution la plus simple consiste à utiliser les poignées de dimension des différents calques : Cliquez sur le calque que vous souhaitez ajuster. La poignée de sélection (une petite case carrée) apparaît dans son coin supérieur. Pour déplacer le calque, cliquez sur cette poignée, glissez la souris et relâchez à l'endroit voulu. Si vous cliquez simplement sur la poignée de sélection, huit petites poignées apparaissent sur les coins et sur les côtés du calque. Ce sont les poignées de dimension. Pour agrandir ou réduire un calque, faites simplement glisser ces poignées. Un calque au pixel près : Pour plus de précision, utilisez l'inspecteur de propriétés. Vous pourrez ainsi définir au pixel près la position et la taille de vos calques. Stage Création de pages Web DD/03/YYYYYY 13

14 VI.Annexe : Créer des calques interactifs Objectif : créer une page Web contenant un tableau d images des monuments d Orthez. Le nom du monument s affichera en rouge et en grande taille à droite du tableau lorsque la souris en survolera l image. Créer le tableau contenant les images des 6 monuments : tableau de 2 lignes et de 3 colonnes. Il nous faudra 6 calques qui serviront d'"étiquettes" afin de voir les noms des monuments à mémoriser. Sélectionnez l'outil Dessiner un calque dans la palette Objets. Tracez un calque. Insérez à l'intérieur de votre calque le texte adapté (La tour Moncade, Le Pont Vieux. Au format police Arial 4 rouge) Placez ce calque à son emplacement final : à droite du tableau. Répétez ces opérations pour l'ensemble des 5 autres étiquettes et surtout nommez vos calques (tour, gaulois, maison, eglise, temple, pont) lors de leur création dans la fenêtre propriétés. Vous les retrouverez d'autant plus facilement Les effets de survol Ils consistent à faire apparaître les différents noms des calques "étiquettes" lorsque le curseur de la souris se trouve au-dessus d'un des lieux à identifier et à apprendre par l'élève. A/ Affichage des Etiquettes Les Etiquettes s'afficheront lorsque le pointeur de la souris survolera l image qui leur correspond. Il nous faut donc associer à chacune des images un comportement Afficher calque : Sélectionnez l image Cliquez sur le bouton "+" de l'inspecteur de comportements. Sélectionnez l'action Afficher-Masquer le calque. Choisissez le calque correspondant dans la liste des calques. ex : "tour" Cliquez sur le bouton Afficher. L'action Afficher s'inscrit à côté du nom du calque choisi. Retournez dans l'inspecteur de comportements. Cliquez sur la flèche descendante, au milieu de la ligne apparue dans l'inspecteur de comportements, et choisissez l'événement (onmouseover) dans le menu qui s'affiche. De cette façon, l'affichage du calque est lié au survol de l'image par la souris. B/Masquage des Etiquettes Désormais, à chaque survol de la zone réactive, l'étiquette correspondant apparaît. Il nous faut maintenant la faire disparaître lorsque l'élève quitte la zone réactive. Après vous êtes assuré que l image tour est bien sélectionnée : Stage Création de pages Web DD/03/YYYYYY 14

15 Cliquez sur le bouton "+" de l'inspecteur de comportements et choisissez l'action Afficher-Masquer le calque. Sélectionnez le calque tour dans la liste des calques. Cliquez sur le bouton Masquer. La mention (Masquer) apparaît dans la liste des calques. Retournez à l'inspecteur de comportements et associez cette action à l'événement onmouseout. Il s'agit de l'événement détecté lorsque le pointeur de la souris quitte la zone sélectionnée. L'étiquette s'affiche et disparaît automatiquement lors du survol de la zone qui lui correspond.il faut répéter cette opération pour chaque Étiquette avec l image qui lui est associée 7/Finitions Pour que notre travail soit complètement opérationnel, il faut masquer les calques dès le chargement de la page. Pour cela, affichez la palette Calques (Fenêtre > Calques) : Cliquez une fois sur la colonne correspondant à la visibilité du calque (symbolisée par un œil ouvert) pour chacun des calques Menu. Un œil fermé apparaît dans la colonne, et le masque disparaît de la fenêtre. (Naturellement le calque "fond" sera toujours visible!) Le calque sera masqué à l'ouverture de la page dans votre navigateur. Il s'affichera lorsque le curseur de la souris survolera le bouton qui lui correspond. Stage Création de pages Web DD/03/YYYYYY 15