Réalisation de quelques pages Web / Les natures mortes au CM1 1
publicité
Réalisation de quelques pages Web / Les natures mortes au CM1 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 Structure de navigation : Notre petit musée tp.htm sites.htm Les travaux pratiques Quelques sites Index.htm De la photo… 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. Nous écrire 1. Mise en page, c'est parti... Création d’un nouveau document « page Web » Fichier Nouveau Onglet « pages Web » Nouvelle page Web Composition du texte de la première page Pour éviter l'espacement vertical important entre deux paragraphe, procéder par un retour à la ligne <Maj> + <Entrée> [email protected]) (([email protected]) 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. Iufm Champagne Ardenne Fenêtre des objets, elle offre des boutons permettant d'insérer des images, un tableau etc. Fenêtre des propriétés, elle affiche les propriétés de l'objet sélectionné. - J.Bresson - Réaliser ses premières pages Web avec Word page 1/1 Enregistrement de la page Cette page constitue la page d'accueil du site et sera nommée index.htm Veiller à enregistrer l'ensemble de vos pages dans le même dossier de travail Respecter la règle des trois pas : pas d'accents, pas d'espaces, pas de majuscules. Choix d’un arrière plan (couleur, trame ou texture) pour la page Format Arrière-plan En fait, on choisira une image existante dans le dossier de travail "crepi.gif" Donner un titre et des mots-cles pour cette page Fichier Propriétés (onglet résumé) Travaux d'élèves Natures mortes Le titre apparaît dans la barre de titre du navigateur, on peut mettre des accents, le titre est différent du nom de fichier. Enregistrer de nouveau le document. Mise en place d'un lien hypertexte vers la page travaux pratiques… Cette page existe déjà dans le dossier de travail elle est nommée tp.htm, inutile de l'ouvrir pour mettre en place le lien hypertexte. Se positionner dans la page index.htm et sélectionner le texte qui constituera le support du lien à savoir " quelques exemples", puis activer la commande « Lien hypertexte » du menu insertion ou de la barre d’outils : rechercher avec le bouton parcourir la page de destination pour ce lien : ici tp.htm sinon, pour une adresse de page sur un site web, saisir l'adresse de la page La zone de saisie inférieure ne sera pas utilisée, elle permet d'atteindre d'autres endroits d'une même page web. Iufm Champagne Ardenne tp.htm - J.Bresson - Réaliser ses premières pages Web avec Word page 2/2 Plus généralement, pour les liens entre différentes pages Html Sélectionner le texte ou l’image qui sera support du lien Activer la commande « Lien hypertexte » du menu insertion ou de la barre d’outils. Saisir le nom de la page de destination pour le lien ou la rechercher avec le bouton parcourir Le nom 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) Mettre en place le lien permettant le retour de la page "tp.htm" (on choisira la flèche comme support de lien) vers la page index.htm (un aperçu de la page tp.htm figure en annexe du présent document). Tester ces liens sous Word. Enregistrer les modifications réalisées sur ces deux pages. Il est également possible de visualiser les pages sous un navigateur Le bouton dans la barre d’outils « standard » permet de provoquer l’affichage de la page Html générée dans le navigateur par défaut. Réalisation de la page "musee.htm" 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 Puis la commande Insertion > image > à partir du fichier (parcourir pour recherchée l'image) Notre petit musée La Raie (Chardin 1728) Pommes vertes (Cezanne 1873) musee.htm Nature morte (Morandi 1926) Crâne de chèvre bouteille et bougie (Picasso 1952) Ecrivez en jaune sur fond noir pour mettre en valeur les images. Pas de bordure pour les tableaux. Insérer l'image flech_g.gif Enregistrer la page sous le nom de fichier musee.htm Iufm Champagne Ardenne - J.Bresson - Réaliser ses premières pages Web avec Word page 3/3 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) Afficher les propriétés de la page "musee.htm" et lui donner un titre "Notre petit musée" Enregistrer de nouveau la page musee.htm 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 ne faut pas les tester depuis Word car ces pages contiennent du code plus élaboré que Word ne sait pas interpréter, il est donc nécessaire de lire ces pages depuis un navigateur (Internet Explorer, Netscape etc.) sites.htm Nous avons sélectionné pour vous quelques sites. http://www.bemberg-educatif.org/index.html Fondation Bemberg L'art en s'amusant http://www.apte.asso.fr Le site de l'éducation à l'image et aux médias... Bips Banque d'images et de scénarios pédagogiques Annuaire de sites artistiques http:// bips.cndp.fr 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 Word un document dont l''extension est .htm, il est donc nécessaire de lancer préalablement Word 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 Documents disponibles Création de pages Html avec Frontpage dans le module de FOAD : Création de pages html avec Dreamweaver Construction de pages web Iufm Champagne Ardenne - J.Bresson - Réaliser ses premières pages Web avec Word page 4/4 Annexe : Aperçu de la page tp.htm Les travaux pratiques... Nous avons composé des « vraies » natures mortes Ensuite nous les avons photographiées tp.htm Puis nous avons dessiné et peint à partir des photographies Iufm Champagne Ardenne - J.Bresson - Réaliser ses premières pages Web avec Word page 5/5
