Réalisation de quelques pages Web / Activités et travaux d'élèves Principe : Il s'agit de réaliser avec Dreamweaver qautre pages web (donc au format Html, hypertexte Markup Language) et les lier entre elles. musee.htm tp.htm sites.htm Structure de navigation : Notre petit musée Les travaux pratiques Quelques sites Index.htm De la photo Nous écrire Attention, un logiciel de messagerie doit être installé sur l'ordinateur. En cliquant ici, il est activé, un nouveau message est créé comportant l'adresse du destinataire. 1. Mise en page, c'est parti... Un double-clic sur le raccourci Dreamweaver du bureau permet d'accéder à l'éditeur de pages. Saisissez le texte de la première page du site. Pour éviter l'espacement vertical important entre deux paragraphe, procéder par un retour à la ligne <Maj> + <Entrée> ( etablisst.machin@truc.fr) ( etablisst.machin@truc.fr) Sélectionnez les différentes parties du texte et appliquez une police Arial ou Comic sans MS, en taille 3 pour les Titres et 2 pour le contenu informatif de la page. Fenêtre des propriétés, elle affiche les propriétés de l'objet sélectionné. Fenêtre des objets, elle offre des boutons permettant d'insérer des images, un tableau etc. Iufm Champagne Ardenne - J.Bresson - Réaliser ses premières pages Web avec Word page 1/1
Remarque : si les barres d'outils flottantes n'apparaissent pas, activez-les via le menu Fenêtre > Proriétés ou Fenêtre > Objets Enregistrement de la page Fichier Enregistrer Cette page constitue la page d'accueil du site et sera nommée index.htm Remarque : Veiller à enregistrer l'ensemble de vos pages dans le même dossier de travail qui contient uniquement les fichiers utiles pour votre site (uniquement images et pages web le plus souvent) Pour les noms de fichiers, respectez la règle des trois pas : pas d'accents, pas d'espaces, pas de majuscules 2. Donner un titre et choisir un arrière-plan pour cette page Le titre apparaît dans la barre de titre du navigateur, on peut mettre des accents, le titre peut être très différent du nom de fichier. Travaux pratiques Pour l'arrière-plan, on peut choisir une couleur ou une image, ici on choisira une image existante dans le dossier de travail "crepi.gif" Enregistrer de nouveau le document. 3. Mise en place de liens hypertextes Vous allez mettre en place un lien depuis l'expression "quelques exemples" de la page index.htm vers la "tp.htm" présente dans votre dossier de travail (cette page a déjà été réalisée). Positionnez-vous dans la page index.htm et sélectionnez le texte qui constituera le support du lien à savoir " quelques exemples", puis cliquez sur le dossier jaune figurant à droite de la rubrique "lien" dans la fenêtre de propriétés. Après sélection du fichier destination du lien, le nom du fichier vient s'inscrire, inutile de la saisir ce qui est une source d'erreurs (problème d'orthographe, majuscules au lieu de minuscules etc.) Iufm Champagne Ardenne - J.Bresson - Réaliser ses premières pages Web avec Word page 2/2
Le texte qui permet le lien change de couleur et est souligné. La destination du lien peut être : Une adresse de page sur Internet du type www.truc.fr Une autre page déjà réalisée et stockée sur le disque dur (choisir parcourir) Une adresse électronique (saisir l'adresse précédée de mailto: c'est le cas par exemple pour le lien vers l'adresse électronique de l'établissement sur la page index.htm)) Enregistrez la page index.htm On remarque que le lien n'est pas actif. En fait il y a deux moyens de savoir si ce qui a été réalisé fonctionne : Soit on procède par un clic-droit sur le texte du lie et choisir la commande "ouvrir la page liée" Soit on regarde notre page ainsi créée dans un navigateur Fichier > aperçu dans le navigateur (ou <touche de fonction <F12>) Attention : dans ce dernier cas, veillez à refermer cette fenêtre de navigateur pour revenir à l'éditeur de Dreamweaver. On sait désormais atteindre la tp.htm Comment revenir à la page index.htm? Il est possible d'utiliser le bouton "précédent de la barre d'outils du navigateur, mais une image de flèche insérée dans la page va servir de support à un lie hypertexte pour revenir à la page index.htm Depuis Dreamweaver, ouvrir la "tp.htm" et mettre en place le lien permettant le retour à la page index.htm (on choisira la flèche comme support de lien). Voici l'aspect de la "tp.htm" Sélectionnez l'image de flèche et utilisez comme précédemment la rubrique "lien" de la fenêtre de propriétés pour mettre en place le lien. Iufm Champagne Ardenne - J.Bresson - Réaliser ses premières pages Web avec Word page 3/3
Enregistrez les modifications réalisées sur cette page. Testez ces liens sous Dreamweaver ou sous le navigateur (<F12>). Fermez les fenêtres des pages ouvertes, sans quitter Dreamweaver. L'éditeur de pages, offre une nouvelle page vide pour saisie et mise en forme. 4. Les tableaux et l'insertion d'images Remarque : Le positionnement des images dans les pages Html Hormis les cas où l image est «mise en vedette» (pas de texte à gauche et à droite de l image), une image ne pourra être positionnée avec précision par rapport à du texte, que si elle est insérée dans une cellule d un tableau. Utiliser l'outil tableau pour insérer un tableau Réalisez la page musee.htm Dans une nouvelle page offerte par l'éditeur, saisir le contenu de ce qui deviendra la "musee.htm". saisissez le texte puis insérez le tableau : musee.htm à créer Cliquez ici puis activez l'outil tableau La largeur peut être exprimée en pourcentage de la largeur du navigateur ou en nombre de pixels, on choisira ici 600 pixels Saisir les intitulés dans les cellules Iufm Champagne Ardenne - J.Bresson - Réaliser ses premières pages Web avec Word page 4/4
Puis, insertion des images : commande Insertion > image (ou bouton correspondant de la fenêtre des objets) L'image étant plus large que la cellule qui la reçoit, la cellule est ajustée au détriment de la seconde colonne. Il convient de redimensionner l'image en lieu donnant une largeur de 270 pixel (le tableau comprend 2 colonne et 600 pixels en largeur). Ne rien mettre pour que l'image conserve ses proportions L'image étant sélectionnée, modifiez sa largeur : 270 et supprimez la valeur située dans la case de hauteur (sinon l'image perdrait ses proportions initiales. Complétez le tableau en insérant les images des autres oeuvres. Insérez ensuite en pied de tableau (dernière cellule du tableau en bas à droite) l'image flech_g.gif Mettre en place le lien permettant le retour de la page "musee.htm vers la page "index.htm" (on choisira la flèche comme support de lien) Sélectionnez le tableau en cliquant sur son pourtour (ou clic-droit dans le tableau et choisir la commande "tableau > sélectionner tableau") et choisissez 0 dans les propriétés de la bordure Iufm Champagne Ardenne - J.Bresson - Réaliser ses premières pages Web avec Word page 5/5
Sélectionnez l'ensemble du texte et appliquez la police "Comic sans Ms" et donnez-lui la couleur Jaune Donnez un titre à cette page "notre petit musée" (modifier > propriétés de la page) et appliquez une couleur d'arrière-plan noire pour faire ressortir les œuvres Centrez le contenu de l'ensemble des cellules contenant textes et œuvres. Enregistrer la page sous le nom de fichier musee.htm Attention : pas d'accent sur le é de musee (pas d'accent dans les noms de pages web)! Mettre en place les liens de la page index.htm vers la page musee.htm Enregistrer les modifications réalisées sur cette page index.htm Réalisation de la page "sites.htm" Cette page contiendra des liens vers des sites web. Attention, dès lors que les hyperliens ont été mis en place, il faut les tester depuis un navigateur (Internet Explorer, Netscape etc.) et non depuis Dreamweaver. Nous avons sélectionné pour vous quelques sites. http://www.bemberg-educatif.org/index.html Fondation Bemberg L'art en s'amusant Le site de l'éducation à l'image et aux médias... http://www.apte.asso.fr sites.htm Bips Banque d'images et de scénarios pédagogiques http://bips.cndp.fr Annuaire de sites artistiques http://www.mylinea.com/jeandif/ Remarque : lorsque l'on souhaite ouvrir un document Word, on peut le faire depuis Word avec "Fichier > Ouvrir" ou encore depuis un dossier ouvert en double-cliquant sur un fichier dont l'extension est.doc Lorsque l'on procède par un double-clic sur un document dont l'extension est ".htm" Windows considère que l'utilisateur demande à consulter la page Web et non qu'il désire la modifier, il demande donc au navigateur Web d'ouvrir le document en question. Si l'on souhaite modifier avec Dreamweaver un document dont l'extension est.htm, il est donc nécessaire - Soit de procéder par clic-droit et choisir l'option "ouvrir avec" ou "modifier avec" puis choisir Dreamweaver - Soit de lancer préalablement Dreamweaver et de procéder par la commande "Fichier > Ouvrir" Pour en savoir plus (fonctions avancées), consultez les documents de formation : Création de pages Html avec Word Création de pages Html avec Publisher Création de pages Html avec Frontpage Création de pages html avec Dreamweaver Documents disponibles dans le module de FOAD : Construction de pages web Iufm Champagne Ardenne - J.Bresson - Réaliser ses premières pages Web avec Word page 6/6