TP 1 Dreamweawer saison.pub

INFORMATIQUE
CRÉER UN SITE INTERNET
FICHE
GUIDE
Ph. Calvisi / 3ème / Informatique /TP dreamweaver / saison
CRÉER UN SITE INTERNET
FICHE
GUIDE
INFORMATIQUE
OBJECTIF :
après ce travail tu
dois être capable :
Gérer des fichiers, des dossiers sur le disque dur et à travers le réseau
Utiliser le logiciel Dreamweaver pour créer un mini site internet comportant ; des
liens hypertextes, des images
Ta tâche 1. Copier les image dans ton dossier personnel
sera de : 2. Créer 5 pages WEB (internet)
CONDITIONS DE TRAVAIL :
90 minutes
MATERIEL / DOCUMENTS FOURNIS
• matériel d’écriture habituel
•
Méthode de travail :
Individuel
Lieu : espace Informatique
MATERIEL / DOCUMENTS PERSONNELS :
• 3 fiches guides
•
As-tu lu les tableaux précédents ? Ton matériel est-il prêt ?
au travail !...
ON DEMANDE
Réaliser un site internet sur le thème des saisons. Le site sera composé de cinq pages (voir organigramme cidessous), la page principale que vous enregistrerez sous le nom saison comportera quatre liens hypertextes vers
les quatre sous pages que vous enregistrerez sous les noms printemps, ete, automne, hiver. Les sous pages comporteront un lien hypertexte vers la page saison
SAISON
Image
Printemps
Eté
Automne
Hiver
PRINTEMPS
Printemps.gif
ETE
Eté.gif
Retour
Lien hypertexte
AUTOMNE
Automne.gif
HIVER
Hiver.gif
Retour
Retour
1. CREER UN DOSSIER COPIER ET Y LE DOSSIER IMAGES SAISONS
Ouvrir le poste de travail ; Ouvrir le lecteur réseau pa_eleves (V:) ; 3eme ; 3° X puis Ouvrir votre dossier personnel
Menu [Fichier, Nouveau, dossier] saisir site saison , puis réduire la fenetre
Ouvrir le poste de travail ; Ouvrir le lecteur réseau pa_prof (W:) ; M CALVISI ; Prof 4° 3°
Sélectionner le dossier Images_saisons ; puis Menu [Edition, copier]
Retourner dans votre dossier personnel
Menu [Edition, coller] ; Une fenêtre vous indique que les photos sont copiés dans votre dossier
Ph. Calvisi / 3ème / Informatique /TP dreamweaver / saison
ORGANIGRAMME DU SITE
CRÉER UN SITE INTERNET
INFORMATIQUE
FICHE
GUIDE
2. CRÉER UN SITE WEB
Lancer Dreamweawer 4
3. COMPOSER LA PAGE SAISON
Saisir le texte comme sur le modèle ci contre
Régler les propriétés de la page
Menu [Modifier, Propriétés de la page….]
Titre : TP 01
Couleur d’arrière plan : Jaune
Couleur du texte : Bleu marine
Couleur du lien : mauve
Enregistrer votre page : Menu [Fichier, Enregistrer sous….]…
Dossiers [Mes documents] [3°] [3èmeX] [votre nom] [tp saison] :
Nom du fichier : Saison
4. COMPOSER LA PAGE : PRINTEMPS
Menu [ fichier ] [nouveau document]
Menu [Insertion] [Image] Sélectionner dans le dossier [images
saisons] le fichier : printemps.gif
Enregistrer votre page : Menu [Fichier, Enregistrer sous]
Nom du fichier : printemps
Saisir le titre ; sauter 5 lignes
Ajouter en bas à droite la rubrique : Retour
Choisir la couleur de fond de votre choix
Sur cette page vous placerez l’image Printemps.gif
5. COMPOSER LA PAGE : ÉTÉ
Menu [ fichier ] [nouveau document]
Saisir le titre ; sauter 5 lignes
Ajouter en bas à droite la rubrique : Retour
Choisir une image d’arrière plan : Menu [Modifier, Propriétés de
la page….]
Cliquer sur [parcourir] [tp saison] fond_ete.gif
placer l’image été.gif
Enregistrer votre page : nom du fichier : ete
6. COMPOSER LA PAGE : AUTOMNE
Choisir comme image automne.gif et pour l’arrière plan : fond_automne.gif
Enregistrer votre page : nom du fichier : automne
7. COMPOSER ET ENREGISTRER LA PAGE : HIVER
Idem ci-dessus
Ph. Calvisi / 3ème / Informatique /TP dreamweaver / saison
CRÉER UN SITE INTERNET
INFORMATIQUE
FICHE
GUIDE
6. CRÉER DES LIENS HYPERTEXTE ENTRE LA PAGE SAISON ET LES 4 SOUS PAGES.
A présent que vos pages sont réalisées et enregistrées, vous devez les relier par des liens hypertextes.
Se placer dans la page SAISONS Menu [fenêtre] saison
Sélectionner le texte qui sera le lien (Printemps)
Menu [modifier] [créer le lien] ;
Cliquer sur la page printemps.htm, puis [sélectionner].Le lien hypertexte est créé, le texte printemps
apparaît souligné et d’une autre couleur
Retourner dans la page saison, et créer des liens vers les pages été, automne, hiver
La carte du site se complète au fur et à mesure de la création des liens
7. CRÉER DES LIENS HYPERTEXTE ENTRE LES 4 SOUS PAGES ET LA PAGE SAISON .
Se placer dans la page printemps Menu [fenêtre] printemps
Sélectionner le texte qui sera le lien (retour)
Menu [modifier] [créer le lien] ; Cliquer sur la page saison.htm, puis [sélectionner].Le lien hypertexte est
créé, le texte retour apparaît souligné et d’une autre couleur
créer le lien de retour des pages été automne, hiver vers la pages saison
Enregistrer successivement les 5 pages
8. VISUALISER LE RESULTAT AVEC LE NAVIGATEUR INTERNET EXPLORER
Menu [fichier] [Aperçu dans le navigateur] [iexplore] ou utiliser la touche F12
Cliquer sur les liens hypertextes pour contrôler votre travail
9. COMPLÉTER LE SITE
La structure du site étant créé , vous allez le compléter en ajoutant des images animées, et d’autres liens .
Retourner dans dreamweaver en cliquant sur la fenêtre réduite
Enregistrer successivement les 5 pages
insérer une image (saison, printemps1, été1, automne1, hivers1) à gauche du titre sur les 5 pages
insérer à droite de la photo l’image flèchedroite.gif sur les 4 pages (printemps, été, automne, hivers)
Créer des liens hypertextes à partir de ces 4 images permettant de passer à la saison suivante
(printemps—>été ; été —>automne …..)
Visualiser le résultat avec la touche F12 (la page s’affiche dans le navigateur)
Ph. Calvisi / 3ème / Informatique /TP dreamweaver / saison
Visualiser le résultat avec la touche F12 (la page s’affiche dans le navigateur)