Réalisation de quelques pages Web / Les natures mortes au CM1 1

Iufm Champagne Ardenne - J.Bresson - Réaliser ses premières pages Web avec Word page 1/1
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.
Structure de navigation :
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
De la photo…
Nous
écrire
Notre petit
musée
Les travaux
pratiques
Quelques
sites
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.
Index.htm
musee.htm tp.htm sites.htm
Pour éviter l'espacement
vertical important entre deux
paragraphe, procéder par un
retour à la ligne
<Maj> + <Entrée>
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 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é.
( [e-mail])
( [e-mail])

Iufm Champagne Ardenne - J.Bresson - Réaliser ses premières pages Web avec Word page 2/2
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é)
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.
tp.htm
Travaux d'élèves Natures mortes

Iufm Champagne Ardenne - J.Bresson - Réaliser ses premières pages Web avec Word page 3/3
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)
Enregistrer la page sous le nom de fichier musee.htm
Notre petit musée
La Raie (Chardin 1728) Pommes vertes (Cezanne 1873)
Nature morte (Morandi 1926) Crâne de chèvre bouteille et bougie
(Picasso 1952)
musee.htm
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

Iufm Champagne Ardenne - J.Bresson - Réaliser ses premières pages Web avec Word page 4/4
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.)
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
 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
Nous avons sélectionné pour vous
quelques sites
.
Fondation Bemberg L'art en s'amusant
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://www.bemberg-educatif.org/index.html
http://www.apte.asso.fr
http:// bips.cndp.fr
sites.htm
http://www.mylinea.com/jeandif

Iufm Champagne Ardenne - J.Bresson - Réaliser ses premières pages Web avec Word page 5/5
Annexe : Aperçu de la page tp.htm
Les travaux pratiques...
Nous avons composé des « vraies » natures
mortes
Ensuite nous les avons photographiées
Puis nous avons dessiné et peint à partir des
photographies
tp.htm