Niveau : 2 Séquence : Je m’entraine

Chapitre : Création de site web Durée : 2H

Compétences visées :

 Configuration d’un site

 Création d’un fichier
 Insertion d’un tableau
 Ajout du contenu
 Insertion d’image survolée.
 Insertion de bouton Flash
 Etablissement des Liens
 Création d’ancre
 Insertion des médias
 Test du site web

Objectifs opérationnels :
 Se familiariser avec l’interface de Dreamweaver CS3
 Configurer un site web
 Créer une page web
 Insérer et mettre en forme des contenus (texte et image).

Matériels (support) didactiques :

 Manuel de l’élève (Niveau 2) : pages 31 à 38

 Ordinateur équipé de Dreamweaver CS3
 Vidéo projecteur.

Plan de la séance :

Séquence Contenu Durée

o Configurer le site
o Créer un fichier HTML
o Modifier les propriétés de ta page
o Insérer un tableau
Je m’entraine o Insérer un texte 2H
o Insérer une image
o Enregistrer le fichier
o Tester la page dans un navigateur
Séquence Etapes Situation d’enseignement et d’apprentissage

Je Configurer le site Pour configurer le site

m’entraine 1. Lance "Dreamweaver"
P : 31-38 2. Ouvre le menu “Site” et clique sur “Nouveau site”
3. Affecte le titre : "Mon premier site" comme nom du site puis
clique sur “Suivant”
4. Laisse vide le champ réservé à l’adresse
5. Sélectionne ‘’Non, je ne veux pas utiliser de technologie de
serveur’’ puis clique sur "suivant"
6. Utilise l’emplacement par défaut pour l’enregistrement de
tes fichiers
7. Pour la connexion au serveur distant, sélectionne "Aucun"
puis clique sur "Suivant"
8. Enfin clique sur “Terminé”.
Créer un fichier HTML Pour créer un fichier HTML
1. Ouvre le menu “Fichier” et clique sur “Nouveau”
2. Dans la catégorie "Page vierge" de la boîte de dialogue
“Nouveau document” choisis le
type “HTML”
3. Clique sur le bouton “Créer”
Modifier les propriétés Pour modifier les propriétés de ta page
de ta page 1. Ouvre le menu “Modifier” et clique sur “Propriétés de la
page...”
2. Choisis une couleur du texte
3. Clique sur “Parcourir” pour importer l’image d’arrière-plan
4. Recherche l’image "fond1.jpeg" sur ton CD-ROM
5. L’image sélectionnée étant en dehors du dossier de ton site,
Dreamweaver te demandera si tu veux que le fichier y soit
copié. Réponds par "Oui"
6. Sélectionne la catégorie “Titre/codage”
7. Saisis le titre “Page Personnelle” devant "Titre"
Insérer un tableau Pour insérer un tableau
1. Passe en mode création
2. Clique sur le bouton “Insérer un Tableau” de la barre
“Insertion" / "Commun”
3. Définis les attributs du tableau dans la boîte de dialogue
"Tableau" :
 4 lignes et 1 colonne
 Largeur du tableau 100% (afin qu’il s’adapte à toutes les
tailles d’écrans)
 Largeur de la bordure 0 (afin que le cadre n’apparaisse
pas sur la page)
4. Clique sur "Ok".
Insérer un texte Pour insérer un texte
1. Place le point d’insertion dans la 1ère ligne du tableau
2. Saisis le texte : "Bienvenue sur ma page personnelle"
3. Sélectionne le texte et effectue sa mise en forme à partir de
l’Inspecteur des Propriétés
4. Place le point d’insertion dans la 4ème ligne et saisis le texte
 5. Procède à sa mise en forme à partir de l’Inspecteur des
Propriétés
Insérer une image Pour insérer une image
1. Place le point d’insertion dans la 2ème ligne du tableau
2. Clique sur la flèche à côté du bouton “Insérer image” et
choisis "Image"
3. Insère l’image animée "ligne.gif"
4. Dreamweaver te demandera si tu veux que le fichier soit
copié dans le dossier du site.
 Réponds par “Oui”
5. Une boîte de dialogue “Attributs d’accessibilité des balises
d’image” s’affiche. Clique simplement sur “OK”
6. Sélectionne l’image et clique sur l’icône “Centrer” de
l’Inspecteur des Propriétés
7. Place le point d’insertion à droite de l’image et appuie sur la
touche Entrée
8. Place le point d’insertion dans la 3ème ligne du tableau
9. Insère l’image “portrait.jpeg”
11. Sélectionne l’image et agis sur la poignée de l’angle pour
modifier sa taille
12. Clique sur "Centrer"
13. Saisis les valeurs L=130 et H=170
Enregistrer le fichier Pour enregistrer le fichier
1. Ouvre le menu “Fichier” et clique sur “Enregistrer-sous”
2. Saisis ''index'' pour le nom du fichier
3. Clique sur “OK”
Tester la page dans un Pour tester la page dans un navigateur
navigateur 1. Clique sur le bouton “Aperçu”, (ou simplement appuie sur la
touche "F12")