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 :
 Créer plusieurs pages et mettre des liens entre elles
 Améliorer leurs mises en forme
 Insérer une vidéo

Matériel (support) didactique :

 Manuel de l’élève (Niveau 2) : pages 39 à 45

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

Plan de la séance :

Séquence Contenu Durée

 Créer le site " clonage "
 Créer le fichier ‘’index.html’’
 Créer les fichiers ‘’techniques.html’’ et
‘’debat.html’’
 Affecter les titres aux pages web
Je m’entraine  Etablir les liens entre les 3 pages 2H
 Ajouter du contenu texte et images
 Insérer une vidéo dans la page
"Index.html"
 Tester le site dans un navigateur
Séquence Etape Situation d’enseignement et d’apprentissage

Je Créer le site " clonage " Pour créer le site " clonage "
m’entraine 1. Lance Dreamweaver
2. Ouvre le menu “Site” puis clique sur “Nouveau site”
3. Pour configurer ton site, suis les instructions suivantes :
 Nomme ton site "Le clonage" puis clique sur “Suivant”
 Sélectionne ''Non, je ne veux pas utiliser de technologie
de serveur'' puis clique sur “Suivant”
 Utilise l’emplacement par défaut pour l’enregistrement
de tes fichiers
 Sélectionne “Aucun”, pour la connexion au serveur
distant, puis clique sur “Suivant”
 Clique sur “Terminé”.
Créer le fichier Pour créer le fichier ‘’index.html’’
‘’index.html’’ 1. Ouvre le menu “Fichier” puis clique sur “Nouveau”
2. Dans la catégorie “Page vierge” de la boite de dialogue,
choisis “HTML” puis clique sur “Créer”
3. Ouvre le menu “Modifier” puis clique sur” Propriétés de la
page”
4. Sélectionne “Aspect” puis clique sur “Parcourir” pour
importer l’image d’arrière-plan
5. Recherche l’image “fond2.jpeg”
6. Dreamweaver te demandera si tu veux que le fichier soit
copié dans le dossier de ton site. Réponds par “Oui”.
7. Dans la catégorie “Liens” choisis des couleurs pour :
 “Couleur des liens”
 “Liens visités”
 “Liens de survol”
8. Sélectionne le style “Jamais souligné”
9. Valide en cliquant sur “Appliquer”
10. Clique sur “OK”
Pour insérer un tableau
1. Clique sur le bouton “Insérer un Tableau” et lui définis les
attributs demandés
2. Saisis le texte suivant : “Le clonage”; “ Techniques”; et
“Débat”, respectivement dans la 1ère, la 2ème et la 3ème cellule.
3. Ajuste la largeur des colonnes à l'aide des poignées du
tableau
4. Sélectionne le texte et mets-le en forme : Police : Arial, Taille
: 18 pixels, couleur du texte : #0000FF, Gras, Italique et Centré.
5. Sous le menu “Fichier”, clique sur “Enregistrer-sous” et
affecte le nom "index'' au fichier
Créer les fichiers Pour créer les fichiers ‘’techniques.html’’ et ‘’debat.html’’
‘’techniques.html’’ et  Le fichier ''index'' étant ouvert,
‘’debat.html’’ 1. Sous le menu “Fichier”, clique sur “Enregistrer-sous” et
affecte le nom ''techniques'' au deuxième fichier.
2. Sous le menu “Fichier”, clique une seconde fois sur
“Enregistrer-sous” et affecte le nom "débat’’ au troisième
fichier.
3. Vérifie dans le Panneau “Fichiers locaux” la présence de 3
 fichiers html qui composent le site.
Affecter les titres aux Pour affecter les titres aux pages web
pages web 1- Dans le Panneau “Fichiers”, double-clique sur “index.html”
2- Saisis le titre : "le clonage", dans la barre d’outils du
document
3- Ouvre le fichier ''techniques'' et saisis son titre : "les
techniques de clonage"
4- Ouvre le fichier ''débat'' et saisis son titre : " débat "
Etablir les liens entre Pour établir les liens entre les 3 pages :
les 3 pages 1. Clique sur l’onglet “index.html”
2. Sélectionne le texte "Techniques"
3. Clique sur l’icône “Pointer vers un fichier” et pointe-tire vers
le fichier "techniques.html''
4. Sélectionne le texte " Débat "
5. Clique sur l’icône “Pointer vers un fichier” et pointe-tire vers
le fichier ''debat.html"
6. Ouvre le fichier ''techniques.html'
7. Sélectionne le texte "Le clonage" et Pointe-tire vers le fichier
« index.html »
8. Sélectionne le texte "Débat" et Pointe-tire vers le fichier
''debat.html’’
9. Ouvre le fichier ''debat.html''
10. Sélectionne le texte "Le clonage" et pointe-tire vers le
fichier ''index.html’’
11. Sélectionne le texte "Techniques" et pointe-tire vers le
fichier ''techniques.html''
12. Sous le menu “Fichier” clique sur “Enregistrer tout”
Ajouter du contenu Pour ajouter du contenu texte et images
texte et images  Ajout du contenu à la page ''Le clonage'' :
1. Ouvre le fichier ''index.html''
2. Insère un nouveau Tableau au dessous du “Tableau 1” (1
ligne et 2 colonnes)
3. Ouvre le fichier Ms-Word ''clonage.doc''
4. Copie le 1er paragraphe et colle-le dans la cellule gauche du
“Tableau 2”

Insérer une vidéo dans Pour insérer une vidéo dans la page "Index.html"
la page "Index.html" 1. Place le point d’insertion en bas du “Tableau 3”
2. Dans la catégorie “Commun” du menu “Insertion”, clique sur
la flèche à côté de “Médias”
3. Choisis “Flash vidéo”
4. Clique sur “Parcourir” pour insérer le fichier vidéo
“clonage.flv”
5. Clique sur “Détecter la taille”
6. Décoche la case “Respecter les proportions”
7. Saisis les valeurs : Largeur=240 et Hauteur=180
8. Clique enfin sur “OK”
9. Sélectionne la vidéo et centre-la
10. Sous le menu “Fichier” clique sur “Enregistrer”
Tester le site dans un Pour tester le site dans un navigateur
navigateur Appuie sur la touche "F12"