Exercice - Dreamweaver CS4

Exercice - Dreamweaver CS4
Cours 3
Premier exercice
1. Faites l’exercice du chapitre 2 de votre livre qui débute à la page 24 et qui se termine à
la page 38
2. Vous aurez besoin des documents qui se trouvent sur le site sous le nom
Exercice Chapitre 2. Enregistrez les documents dans « Mes documents »
Deuxième exercice
1. Allez chercher le matériel nécessaire sur le site Internet sous le nom
Exercice Chapitre 2-1 et enregistrez-le dans « Mes documents »
2. Crées vous un nouveau site dans DW et nommez le « Travel »
3. Ouvrez « Mes documents » et allez dans le fichier Exercice Chapitre 2-1
4. Faites glisser la page « about-start.html » dans le dossier de votre site Web, comme vue
dans le cours, et renommez la « index.html »
5. Faites la même chose avec le dossier « images » et le dossier « css »
6. Dans le panneau Style CSS, cliquez sur le bouton Attacher une feuille de style,
représenté par une icône de chaîne en bas du panneau
7. Lorsque la boîte de dialogue « Ajouter une feuille de style externe » apparait, cliquez sur
« Parcourir » et sélectionnez « mystyles.css »
8. Ouvrez le fichier « about.html » en double-cliquant sur son nom dans le panneau
« Fichier ». Trouvez pourquoi les images n’apparaissent pas. (indice : regardez le code de
la page)
9. Dans la fenêtre de document, placez votre curseur dans le texte d’en-tête « Meet Our
Friendly Staff ». À l’aide du sélecteur de balises situé en bas de la fenêtre de document,
sélectionnez
10. Cliquez sur le bouton « Nouvelle règle de CSS » en
bas du panneau « Style CSS »
11. Dans la boîte de dialogue « Nouvelle règle de CSS »,
cliquez deux fois sur le bouton « Moins spécifique »
pour choisir le sélecteur « #mainContent h1 ».
Cliquez sur OK.
12. Dans la boîte de dialogue « Définition des règles de
CSS pour #maintContent h1 dans mystyles.css».
Sélectionnez la catégorie « Type »
13. Dans la liste « Font-family », choisissez « Georgia,
Times New Roman, Times, serif »

14. Dans le champ « Color », utilisez le sélecteur de couleur pour aller chercher le bleu de
l’en-tête ou sinon choisissez une autre teinte de bleu. Cliquez sur OK
15. Positionnez votre curseur dans le paragraphe « The view from our offices in New York
City » et sélectionnez, dans le bas de la fenêtre de document,
16. Cliquez sur le bouton « Nouvelle règle de CSS »
17. Assurez-vous de cliquez deux fois sur « Moins spécifique pour choisir le sélecteur
« #sidebar1 p ». Cliquez sur OK.
18. Dans la boîte de dialogue qui s’ouvre, dans la propriété « Font-size » écrivez 80 et
sélectionnez le « % » dans la liste à côté du champ « Font-size »
19. Dans la propriété « Font-style » sélectionnez « Italic »
20. Dans la catégorie « Boîte », dans la section « Margin »,
décochez la case « idem pour tous » et dans le champ « Top »
écrivez 0
21. Enregistrez toutes les modifications que vous avez faites et appuyez
sur la touche [F12] pour visualiser votre travail jusqu’à maintenant
22. Cliquez sur le bouton « Nouvelle règle CSS »
23. Dans le menu déroulant de la boîte de dialogue, sélectionnez
l’option « Classe ».
24. Dans le champ « Nom » tapez « .name ». Cliquez sur OK
25. Dans la boîte de dialogue qui s’ouvre, dans la liste déroulante à coté de « Font-variant »
sélectionnez l’option « small-caps ». Cliquez sur OK
26. Dans le paragraphe sur Elaine, sélectionnez son nom dans la première ligne.
27. Dans la liste « Règle cible » du panneau « Propriétés » choisissez « name »
28. Faites la même chose pour tous les autres employés. Sélectionnez leur nom sur la
première ligne de leur paragraphe et appliquez-lui la classe « name »
29. Enregistrez les modifications
30. Sélectionnez l’image d’Elaine ainsi que les deux paragraphes qui suivent
31. Dans le panneau « Insertion », choisissez « Mise en forme » puis cliquez sur « Insérer la
balise Div »
32. Dans la boîte de dialogue, sélectionnez « Envelopper la
sélection »
33. Dans le champ « Classe » tapez « .profile » et cliquez sur
le bouton « Nouvelle règle de CSS »
34. Dans le champ « Nom du sélecteur » tapez « .profil »
35. Dans la boite de dialogue, sélectionnez la catégorie «
Boîte »
36. Dans le menu déroulant « Clear » sélectionnez « right »
37. Choisissez ensuite la catégorie « Positionnement ».
38. Dans le menu déroulant « Overflow » sélectionnez « auto ». Cliquez sur OK. Dans la
fenêtre qui apparait cliquez encore sur OK

39. Refaites les opérations à partir de 31, pour les autres employés, à l’exception que vous
n’êtes pas obligé de créez une nouvelle règle CSS, elle existe déjà, vous n’avez qu’à
écrire le nom de la classe (.profile) et cliquer sur OK
40. Sélectionnez l’image d’Elaine. Dans le sélecteur de balise, sélectionnez
41. Dans le panneau « Propriétés » sélectionnez la classe « fltrt »
42. Allez regarder la classe .fltrt dans la feuille de style pour voir ce qu’il y a à l’intérieur
43. Sélectionnez la photo de Linda et appliquez-lui la classe « fltlft »
44. Ensuite, faites les mêmes opérations pour les autres photos d’employé, donc vous devez
leur appliquer la bonne classe pour donner le résultat suivant :
a. Jason à droite
b. Lin à gauche
c. Charlie à droite
45. Enregistrez votre page web et visualisez-la dans un navigateur Internet