Dreamweaver 2 Exercices Préambule dw20 : Claude Monet

Webdesign
FAD Réseau Pyramide
13/03/2012
Dreamweaver 2
Exercices
Jean-François Ramiara
Préambule
1. Chaque exercice sera isolé dans un sous-dossier (dw20 par exemple pour
l'exercice suivant).
2. Tous les exercices doivent se faire avec Dreamweaver. L'encodage est UTF8.
3. Le navigateur cible est Firefox. Si ce n'est pas déjà fait, vous devez aussi installer
l'extension « Firebug ».
4. Toutes les pages doivent être « valides » XHTML1 strict et UTF8 avec le W3C.
5. Pour l'exercice dw21, vous devez avoir un hébergeur. Vous pouvez utiliser celui de
votre fournisseur d'accès à Internet ou celui du CRP :
Serveur : ns37802.ovh.net
Répertoire : /public_html/webdesign/<votre nom>
Utilisateur : crpforma
Mot de passe : <envoyé par mail>
L'URL de votre site est : http://ns37802.ovh.net/~crpforma/webdesign/<votre nom>
dw20 : Claude Monet
1. Vous devez faire un petit site sur le peintre « Claude Monet ».
2. Le site doit contenir 4 pages qui ont l'aspect des fichiers « dw20-renduX.pdf ».
index.html : page d'accueil. Un courte introduction sur Claude Monet.
biographie.html : la biographie de Claude Monet
famille.html : la famille de Claude Monet
tableaux.html : une sélection de 3 tableaux de Claude Monet
Les textes sont à copier du site Wikipédia (fr.wikipedia.org/wiki/Claude_Monet).
3. Créez un dossier « dw20 ». Ajoutez des sous-dossiers « img » et « css ».
4. Créez un site « dw20 » dans Dreamweaver et faites le pointer sur ce dossier.
5. Créez une nouvelle page en utilisant la mise en forme « 2 colonnes fixes, encadré
à gauche, en-tête et pied de page ». Sélectionnez en même temps « XHTML1.0
strict » et « Créez un nouveau fichier » pour le CSS comme ci-dessous.
www.fenetresurtoile.com
Page 1
CRP-Consulting
Webdesign
FAD Réseau Pyramide
13/03/2012
6. Sauvegardez cette page sous « index.html ». Elle doit ressembler à cela.
7. Personnalisez l'entête. Le portrait provient de Wikipédia.
8. Modifiez la « sidebar » pour inclure le menu du site.
www.fenetresurtoile.com
Page 2
CRP-Consulting
Webdesign
FAD Réseau Pyramide
13/03/2012
9. Personnalisez le « footer ». Ajoutez un lien permettant de revenir en haut de page.
10. Remplacez le fond de page par une illustration de votre choix. Pour cela, vous
pouvez modifier à la main le fichier CSS depuis la barre d'applications.
Vous pouvez créer par exemple, une petite image qui se répétera sur toute la page.
11. Personnalisez la balise <title>. Ajoutez des balises meta « keywords » et
« description ».
12. Remplacez le contenu de la page par une introduction de votre choix. La page doit
maintenant ressembler à cela.
13. Enregistrez la page index puis utilisez là comme modèle pour les autres pages.
www.fenetresurtoile.com
Page 3
CRP-Consulting
Webdesign
FAD Réseau Pyramide
13/03/2012
14. Page « biographie » : Utilisez Wikipédia pour le texte.
Mettez en valeur la citation de Clemenceau.
15. Page « famille » : Utilisez les listes <ul> pour mettre en valeur les enfants de
Monet.
www.fenetresurtoile.com
Page 4
CRP-Consulting
Webdesign
FAD Réseau Pyramide
13/03/2012
16. Page « tableaux » : Choisissez trois tableaux de Monet et présentez-les avec une
petite référence.
17. Validez avec le W3C.
NOTE : pour copier-coller de Wikipédia sans emporter les liens, procédez en deux
étapes :
1°) Copiez de Wikipédia dans un éditeur de texte (notepad++ par exemple).
2°) Copiez depuis l'éditeur de texte vers Dreamweaver (dans la partie « rendu »).
Ainsi le texte est débarrassé des liens.
dw21 : site distant
Vous devez installer un site chez un hébergeur et le tester.
1. Récupérez le dossier « dw21 » dans «031-dw02-exercices.zip » . Installez-le sur
votre poste.
2. Créez un « site » dans Dreamweaver qui pointe sur ce dossier « dw21».
3. Créez le « site distant » sur Dreamweaver. Si vous utilisez le serveur du CRP, vous
devez avoir quelque chose comme ça.
www.fenetresurtoile.com
Page 5
CRP-Consulting
Webdesign
FAD Réseau Pyramide
13/03/2012
4. Testez le site en local puis transférez le sur le site distant avec Dreamweaver.
5. Testez le à nouveau sur le site distant. Si vous utilisez le CRP, l'URL doit
ressembler à cela :
http://ns37802.ovh.net/~crpforma/webdesign/ramiara/dw20/tableaux.html
6. Validez avec le W3C. Vous pouvez maintenant soumettre directement l'URL.
NOTE :
Le ~ s'obtient avec [alt Gr] 2 [espace] sur un clavier de PC.
www.fenetresurtoile.com
Page 6
CRP-Consulting