IUFM Aix Marseille UTILISER LES TICE EN HISTOIRE GEOGRAPHIE

CREATION DE PAGES WEB SIMPLES AVEC DREAMWEAVER 2

Prparation : Choisir un thme pour le mini-site Constituer un dossier "site". comprenant un sous-dossier images Rechercher et placer dans ce sous-dossier 2 images correspondant au thme choisi. Renommer les images (si leur nom dorigine nest pas explicite ou comporte plus de 8 caractres.) Ralisation Dfinir une charte graphique (ensemble de polices, tailles, couleurs qui sharmonisent), une arborescence simple (liens) ; organiser son travail (faire sur papier un plan avec mention des liens, respecter les contraintes de mise en ligne : fichiers nomms avec 8 caractres simples,.). Crer une premire page en enregistrant dans le dossier site la page vierge douverture propose par Dreamweaver sous le nom de index (remplacer Untitled1 par index, laisser lextension .htm) Ouvrir une seconde page par le menu Fichier => Nouveau, et lenregistrer de mme sous le nom de page2.htm Revenir la page index.htm par le menu Fentre ; avoir lcran les fentres Objets et Proprits (les faire apparatre le cas chant en cliquant sur leur nom en haut du menu droulant propos par le menu Fentre ) y placer un titre en jouant sur les polices, couleurs, tailles disponibles dans la fentre Proprits . Ouvrir le menu Modifier , cliquer sur Proprits de la page ; lui donner un nom (qui peut tre diffrent de celui sous lequel elle est enregistre dans le site, mais qui sera celui quelle portera laffichage en haut de la barre de menus du navigateur ; la nommer Accueil par exemple), choisir une image ou une couleur pour larrire-plan (limage pourra tre un fond emprunt une page web existante, ou se dmultipliera pour occuper toute la page qui sera affiche), les diverses couleurs de liens en fonction de la charte graphique dfinie au dpart, et cliquer sur Appliquer puis OK. Sous le titre dans la page, ouvrir par la fentre Objets un tableau de 2 colonnes et 1 ligne, taille de bordure 0 (afin que le cadre napparaisse pas sur la page) et de taille 100% (afin quil sadapte toutes les tailles dcrans). Y placer gauche un texte (tap ou obtenu par Copier Coller), et droite une image (insre par licne image larbre- de la fentre Objets et choisie dans le sous-dossier image du dossier site ). Redimensionner le texte et limage de manire harmonieuse. Sous le tableau, taper le texte vers page 2 , le placer droite, le slectionner et crer partir de lui un lien vers ladite page 2 : dans la fentre Proprits , cliquer sur

Fiches pratiques

IUFM Aix Marseille UTILISER LES TICE EN HISTOIRE GEOGRAPHIE

la valisette jaune ct de du champ Lien , et rechercher la page page2.htm => Slectionner. Valider le choix du lien par un clic sur la touche Entre du clavier. Enregistrer son travail (Ctrl + S), et le contrler dans le navigateur : utiliser pour cela la touche de fonction F12. Ceci est passible tout moment ; on peut actualiser les modifications par la touche F5. Fermer la fentre du navigateur si OK. Ouvrir la page 2 par le menu Fentre ; par le menu Modifier => Proprits de la page, la nommer Page 2 ; la travailler sa guise, en y plaant au moins une image sur laquelle on crera un lien vers une page web externe (existante ou fictive) dont on tapera ou collera lURL complte dans le champ Lien de la fentre Proprits aprs avoir mis limage en surbrillance ; on choisira alors loption _blank dans le champ Cible afin que la page souvre dans une nouvelle fentre de lexplorateur. Si le logiciel dit quil faut que soit cr un chemin , cliquer su OK. On pourra mme crer une tiquette informative qui souvrira lorsque la souris survolera cette image en tapant un petit texte dans le champ sec. De la fentre de proprits de limage. Crer un lien vers une adresse de courrier , en tapant par exemple Contact (ou en choisissant une image ou un gif anim que lon aura copi partir dun site web dans le sous-dossier image du dossier site ). Slectionner cet lment, et dans le champ Lien de la fentre Proprits, taper une adresse dE.Mail prcde (sans espace) de mailto: Crer un lien de retour vers la page daccueil partir dun bouton emprunt une page web existante, comme une flche vers la gauche ou une porte qui se referme (voir mthode ci-dessus). Enregistrer son travail, et faire tourner son mini-site en utilisant la touche de fonction F12.

Mission accomplie ;-) Un modle vous attend dans le dossier TP Dreamweaver dans le sousdossier Site, ainsi que quelques images complmentaires pour personnaliser lexercice dans le sous dossier Pour site Pour amliorer et approfondir tout cela, voyez sur le CD ROM le diaporama Power Point prsentant la cration de site et Dreamweaver (Dreamweaver. ppt), ou / et reportez-vous des sites, tels Oketto, qui proposent des didacticiels pour Dreamweaver.

Fiches pratiques