Dreamweaver CS4

Dreamweaver CS4
Styles CSS Composants Spry-XML Comportements JavaScript Comportements serveur PHP-MySQL
Thierry
Audoux Defrance
Jean-Marie
Dreamweaver
CS4
Styles CSS Composants Spry-XML
Comportements JavaScript Comportements serveur PHP-MySQL
CHEZ LE MME DITEUR Du mme auteur T. Audoux, J.-M. defrAnce. Dreamweaver CS3. N12234, 2008, 572 pages. J.-M. defrAnce. PHP/MySQL avec Dreamweaver 8. N11771, 2006, 632 pages. J.-M. defrAnce. PHP/MySQL avec Flash 8. N11971, 2006, 752 pages. J.-M. defrAnce. Premires applications Web 2.0 avec Ajax et PHP. N12090, 2008, 450 pages. Autres ouvrages sur le dveloppement Web M. LAvAnt. Cahier Dreamweaver. Spcial dbutants. N12364, 2008, 128 pages + CD-Rom. R. Goetter. CSS 2(3e dition). Pratique du design web. N12461, 2009, 318 pages. A. cLArke. Transcender CSS. N12107, 2007, 370 pages. J. ZeLdmAn. Design web : utiliser les standards. CSS et XHTML. N11548, 2005, 414 pages. m. nebrA. Russir son site web avec XHTML et CSS (2e dition). N12307, 2008, 316 pages. C. Porteneuve. Bien dvelopper pour le Web 2.0 (2e dition). N12391, 2008, 674 pages. O. Andrieu. Russir son rfrencement web. N12264, 2008, 302 pages. A. Boucher. Ergonomie web (2e dition). Pour des sites web efficaces. N12479, 2009, 426 pages. D. mercer. Russir son site e-commerce avec osCommerce. N11932, 2007, 446 pages. E. SLom. Mmento Sites web. Les bonnes pratiques. N12101, 2007, 14 pages. N. Chu. Russir un projet de site Web (5e dition). N12400, 2008, 246 pages. S. BordAGe. Conduite de projet Web (4e dition). N12325, 2008, 430 pages. C. BerG. Je cre mon site Internet avec Dreamweaver 8 et Flash 8. N11977, 2006, 144 pages + CD-Rom vido.
Dreamweaver
CS4
Styles CSS Composants Spry-XML Comportements JavaScript Comportements serveur PHP-MySQL
Thierry Jean-Marie Audoux Defrance
DITIONS EYROLLES 61, bd Saint-Germain 75240 Paris Cedex 05 www.editions-eyrolles.com
Le code de la proprit intellectuelle du 1er juillet 1992 interdit en effet expressment la photocopie usage collectif sans autorisation des ayants droit. Or, cette pratique sest gnralise notamment dans les tablissements denseignement, provoquant une baisse brutale des achats de livres, au point que la possibilit mme pour les auteurs de crer des uvres nouvelles et de les faire diter correctement est aujourdhui menace. En application de la loi du 11 mars 1957, il est interdit de reproduire intgralement ou partiellement le prsent ouvrage, sur quelque support que ce soit, sans autorisation de lditeur ou du Centre Franais dExploitation du Droit de Copie, 20, rue des Grands-Augustins, 75006 Paris. Groupe Eyrolles, 2009, ISBN : 978-2-212-12462-0
Table des matires

Avant-propos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XIX
Objectif de louvrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Contenu de louvrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Fichiers source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
XIX XIX XX
PARTIE I
Les bases de Dreamweaver CS4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 1
Prsentation de Dreamweaver CS4 . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Les nouveauts de Dreamweaver CS4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Une nouvelle interface utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Un nouveau panneau des proprits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Un accs aux styles plus rapide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Une prvisualisation facilite avec lafchage en direct . . . . . . . . . . . . . . . . . Une meilleure intgration des autres logiciels Adobe . . . . . . . . . . . . . . . . . . . Le framework Spry pour Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Lespace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Congurer lespace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Prsentation de lespace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3 3 3 3 4 4 4 4 6 6 6
VI
Dreamweaver CS4
CHAPITRE 2
Raliser un premier document avec Dreamweaver . . . . . . . . . . . .

Prparer un site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dnir un site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dnir un nouveau site avec longlet Elmentaire . . . . . . . . . . . . . . . . . . . . . Dnir un nouveau site avec longlet Avanc . . . . . . . . . . . . . . . . . . . . . . . . . Crer un nouveau document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La fentre Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le panneau Insertion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les prfrences pour les nouveaux documents . . . . . . . . . . . . . . . . . . . . . . . . Choisir la DTD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Saisir du texte et le mettre en forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Copier-coller un texte depuis une autre application . . . . . . . . . . . . . . . . . . . . Ouvrir un document texte dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . Copier-coller un texte dun document Dreamweaver dans un autre . . . . . . . . Copier du code et coller du texte format . . . . . . . . . . . . . . . . . . . . . . . . . . . . Copier-coller du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mettre en forme du texte avec le panneau Proprits . . . . . . . . . . . . . . . . . . . Aperu dans un navigateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 3
9 9 10 11 14 18 26 31 44 45 47 47 48 48 49 49 50 52 53
Insrer et traiter les images dans Dreamweaver . . . . . . . . . . . . . . .

Insrer une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Insrer une image depuis Adobe Photoshop . . . . . . . . . . . . . . . . . . . . . . . . Copier-coller depuis Adobe Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Insrer une image PSD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Modier un objet dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les proprits dune image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . diter une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Choisir le logiciel ddition des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Optimiser une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Optimiser un document GIF ou PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Optimiser un GIF anim . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Recadrer une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
55 56 58 58 59 60 60 62 63 63 66 67 68
Table des matires
VII
69 69 69
Modier la luminosit, le contraste et la nettet dune image . . . . . . . . . Rchantillonner une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 4
Crer des hyperliens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Comprendre les liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer un lien relatif sur un texte ou une image . . . . . . . . . . . . . . . . . . . . . . Lien par saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Lien par pointage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Lien par recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer un lien absolu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer un lien daccessibilit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer des liens avec des ancres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer des liens de messagerie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer des liens nuls ou vides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer des liens sur une image (image map) . . . . . . . . . . . . . . . . . . . . . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 5
71 71 72 72 73 74 74 75 77 79 82 82 84
Mise en page avec des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Crer un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dnir un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer un tableau partir dlments PA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La bote de cration de tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Insrer du contenu dans un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Modier la mise en page du tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le mode Dvelopp et les assistances visuelles . . . . . . . . . . . . . . . . . . . . . . . Ajouter des lments au tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Fusionner des cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Modier laspect du tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les proprits des tableaux et des cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . Importer des donnes tabulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
85 85 85 88 90 90 92 92 92 93 95 96 98 100 100
VIII
Dreamweaver CS4
CHAPITRE 6
Les jeux de cadres et les cadres ottants . . . . . . . . . . . . . . . . . . . . . .

Principe des jeux de cadres et des cadres ottants . . . . . . . . . . . . . . . . . . . Structure dun jeu de deux cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Structure dun cadre ottant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer un jeu de cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Congurer les liens dun jeu de cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Congurer du contenu sans cadre (noframe) . . . . . . . . . . . . . . . . . . . . . . . Crer un cadre ottant (iframe) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les inconvnients des jeux de cadres et des cadres ottants . . . . . . . . . . . Le rfrencement des structures de cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . Lenregistrement dans les Favoris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 7
103 103 104 105 105 112 113 115 118 118 119 119
Les formulaires et leur validation Spry . . . . . . . . . . . . . . . . . . . . . . . . .

Principe dun formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dlimiter les frontires dun formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les mthodes GET ou POST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La cible du formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La zone de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Lindispensable balise de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les attributs de la balise de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Insrer et congurer une balise de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . Laccessibilit pour les formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Regrouper des lments de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Associer une tiquette chaque lment de formulaire . . . . . . . . . . . . . . . . . Aide la navigation dans les lments de formulaire . . . . . . . . . . . . . . . . . . . Utiliser la fonction loupe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les lments standards dun formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . La catgorie Formulaires du panneau Insertion . . . . . . . . . . . . . . . . . . . . . . . . Mettre en forme un formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Insrer et congurer un champ de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Insrer et congurer des boutons radio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Insrer et congurer des cases cocher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Insrer et congurer une liste ou un menu . . . . . . . . . . . . . . . . . . . . . . . . . . . .
121 121 121 121 122 122 122 122 123 125 125 126 126 127 127 128 131 131 134 136 137
Table des matires
IX
140 142 144 148 150 151 152 154 155 155 159 161 163 164 168 170 172
Insrer et congurer un bouton de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . Insrer et congurer une zone de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Insrer et congurer un ensemble de champs . . . . . . . . . . . . . . . . . . . . . . . . . Insrer et congurer un champ de chier . . . . . . . . . . . . . . . . . . . . . . . . . . . . Insrer et congurer un champ dimage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Insrer et congurer un champ masqu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Insrer et congurer un menu de reroutage . . . . . . . . . . . . . . . . . . . . . . . . . . . Insrer et congurer une tiquette . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Les lments de validation Spry dun formulaire . . . . . . . . . . . . . . . . . . . . Insrer et congurer une validation Spry de champ de texte . . . . . . . . . . . . . Insrer et congurer une validation Spry de zone de texte . . . . . . . . . . . . . . . Insrer et congurer une validation Spry de case cocher . . . . . . . . . . . . . . . Insrer et congurer une validation Spry de slection . . . . . . . . . . . . . . . . . . Insrer et congurer une validation Spry de mot de passe . . . . . . . . . . . . . . . Insrer et congurer une validation Spry de conrmation . . . . . . . . . . . . . . . Insrer et congurer une validation Spry de groupe de boutons radio . . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
PARTIE II
Les CSS avec Dreamweaver CS4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 8
175
Introduction la conception XHTML/CSS . . . . . . . . . . . . . . . . . . . . . .

La conception smantique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Introduction au XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le modle des botes CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les rgles XHTML conformit 1.0 Strict . . . . . . . . . . . . . . . . . . . . . . . . . . Vrier votre code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Introduction aux styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Placer les styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Comprendre les CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La grammaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer un nouveau style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les slecteurs de balise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les slecteurs de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
177 178 181 183 184 185 187 187 188 189 190 192 192
Dreamweaver CS4
Les slecteurs dID . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les slecteurs de pseudo-classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Autres syntaxes des rgles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les units de mesure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
193 194 195 197 199 201
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 9
Les rgles de styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Le panneau Styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les diffrents modes dafchage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Prsentation des proprits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Travailler avec le panneau Styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les outils de gestion du panneau Styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . diter un style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Supprimer un style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Lier une feuille de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Externaliser des styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La palette des Proprits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Prsentation des catgories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La catgorie Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La catgorie Arrire-plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La catgorie Bloc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La catgorie Bote . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La catgorie Bordure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La catgorie Liste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La catgorie Positionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La catgorie Extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Vrier les styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Vrier les styles avec le W3C . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Attribuer un style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Attribuer un ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Attribuer une classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Attribuer une classe ou un ID un lment de la page avec linspecteur de balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
203 204 204 206 209 209 210 210 211 212 213 214 214 216 218 220 222 223 225 227 228 230 230 231 232 233 234
Table des matires
XI
CHAPITRE 10
Le positionnement avec les CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Le ux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le positionnement relatif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le positionnement relatif dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . Le positionnement absolu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le bloc conteneur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le positionnement absolu dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . Le positionnement xe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le positionnement xe dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . Le ottement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le ottement dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Annuler le ottement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les lments PA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La fentre Elments PA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les proprits des lments PA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Utiliser un lment PA pour une composition simple . . . . . . . . . . . . . . . . . . . Imbriquer des lments PA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Transformer un lment en lment PA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Transformer un lment PA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Grer le positionnement Index Z . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les balises div . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Insrer une balise div . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les assistances visuelles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 11
235 235 237 238 239 240 241 242 243 243 243 244 246 247 248 250 254 255 256 256 257 258 263 265
Mise en forme des liens, des tableaux et des formulaires . . . . .

Mettre en forme des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mettre en forme des liens texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mettre en forme des liens image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer des liens ractifs avec des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mettre en forme des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Modier les bordures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Autres mises en forme dun tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
267 267 267 269 269 272 275 280
XII
Dreamweaver CS4
Mettre en forme des formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Saisir le formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

CHAPITRE 12
280 281 283
Mise en forme des listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Crer des listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les listes de dnitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Listes non ordonnes et listes ordonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les listes et les CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer des menus avec les listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Menu texte vertical . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Menu texte horizontal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Menu dimages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 13
285 285 286 287 288 290 290 291 292 296
Pratique de la mise en page CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Centrer une mise en page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Centrer une mise en page horizontalement . . . . . . . . . . . . . . . . . . . . . . . . . . . Centrer une mise en page verticalement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mise en page de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mettre en page avec des lments ottants . . . . . . . . . . . . . . . . . . . . . . . . . . Mise en page liquide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mise en page lastique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
297 297 297 299 300 305 311 314 317
PARTIE III
Fonctionnalits avances de Dreamweaver CS4 . . . . . . . . . . . . . . . .
CHAPITRE 14
319
Les comportements JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Principe des comportements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
321 321
Table des matires
XIII
322 325 327 328 329 329 329 332 333 335 337 338 343 345 345 347 348 351 351 351 353 355 357 357 358 361 363
Les vnements et les actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le panneau Comportements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Modier un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Supprimer un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les comportements du panneau Comportements . . . . . . . . . . . . . . . . . . . Le comportement Afcher-Masquer les lments . . . . . . . . . . . . . . . . . . . . . . Le comportement Appel JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le comportement Atteindre lURL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le comportement Changer la proprit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le comportement Dnir image barre de navigation . . . . . . . . . . . . . . . . . . . Le comportement Dplacer llment PA . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les comportements de la catgorie Effets . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le comportement Menu de reroutage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le comportement Message contextuel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le comportement Ouvrir la fentre Navigateur . . . . . . . . . . . . . . . . . . . . . . . Le comportement Permuter une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le comportement Prcharger les images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le comportement Restaurer limage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les comportements de la catgorie Texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le comportement Valider le formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le comportement Vrier le Plug-in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les comportements du panneau Insertion . . . . . . . . . . . . . . . . . . . . . . . . . . Le comportement Image survole . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le comportement Barre de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le comportement Menu de reroutage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 15
Les widgets Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Le Widget Barre de menus Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le Widget Panneaux onglet Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le Widget Accordon Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le Widget Panneau rductible Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
365 366 370 372 374 376
XIV
Dreamweaver CS4
CHAPITRE 16
Bibliothque et modles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
La fentre Actifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Utiliser les Actifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les favoris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La bibliothque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer un lment de bibliothque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Utiliser les modles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les modles simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Appliquer un modle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Changer un modle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les modles imbriqus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les modles rgion rpte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les modles tableau rpt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les modles rgion facultative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mettre en ligne des pages issues de modles . . . . . . . . . . . . . . . . . . . . . . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 17
377 377 377 379 382 383 384 386 386 388 389 390 391 392 394 396 396
Intgration des vidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Les technologies vidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La technologie QuickTime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La technologie RealMedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La technologie Windows Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Raliser des vidos pour le Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les codecs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La bande passante . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Obtenir des vidos QuickTime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Obtenir des vidos RealVideo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Obtenir des vidos Windows Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Lire une vido depuis une page Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Lire une vido depuis un lien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Lire une vido en streaming depuis un lien . . . . . . . . . . . . . . . . . . . . . . . . . . .
397 397 398 398 398 398 399 399 400 402 404 406 406 407
Table des matires
XV
409 409 414 414
Lire une vido intgre la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Intgrer une vido avec les balises <object> et <embed> . . . . . . . . . . . . . . . . Intgrer une vido en streaming dans la page . . . . . . . . . . . . . . . . . . . . . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 18
Intgration des lments sonores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Le son numrique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les formats sonores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer des documents sonores formats pour le Web . . . . . . . . . . . . . . . . . Enregistrer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Convertir . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Intgrer des sons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Lire un son depuis un lien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Lire un son en streaming depuis un lien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Intgrer un son dans une page HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Raliser un podcast pour iTunes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Enregistrer un podcast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mettre en ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 19
415 415 417 417 418 418 419 419 419 420 421 421 422 424
Intgration des lments Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Crer une vido au format .v . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Adobe Media Encoder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Incorporer une vido .v dans une page HTML . . . . . . . . . . . . . . . . . . . . . Incorporer un document .swf dans une page HTML . . . . . . . . . . . . . . . . . Les vidos fond transparent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Incorporer un document FlashPaper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
425 425 426 430 431 434 434 435
XVI
Dreamweaver CS4
PARTIE IV
Gestion de donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 20
437
Cration de pages dynamiques avec PHP/MySQL . . . . . . . . . . . . .

Environnement de dveloppement PHP/MySQL . . . . . . . . . . . . . . . . . . . . Choisir linfrastructure serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mettre en uvre une infrastructure serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . Tester le serveur local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Grer des extensions PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer et grer une base de donnes MySQL . . . . . . . . . . . . . . . . . . . . . . . . Notion de base de donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Cahier des charges de la rubrique Randonnes . . . . . . . . . . . . . . . . . . . . . . . . Structure de la base de donnes montagne_db . . . . . . . . . . . . . . . . . . . . . . . . PhpMyAdmin, un gestionnaire de bases de donnes convivial . . . . . . . . . . . . Crer une base de donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Insrer des enregistrements avec phpMyAdmin . . . . . . . . . . . . . . . . . . . . . . . Modier un enregistrement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Modier les proprits dune table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Congurer les droits dun utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Sauvegarder et restaurer une base de donnes . . . . . . . . . . . . . . . . . . . . . . . . . Interface des fonctions dynamiques dans Dreamweaver . . . . . . . . . . . . . . Les panneaux des fonctions dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le panneau Insertion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Congurer un site dynamique dans Dreamweaver . . . . . . . . . . . . . . . . . . . Dnir un nouveau site laide de lassistant . . . . . . . . . . . . . . . . . . . . . . . . . Crer une connexion une base de donnes . . . . . . . . . . . . . . . . . . . . . . . . Le concept de la connexion la base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer une connexion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer un jeu denregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le concept du jeu denregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La fentre Jeu denregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Paramtrer un jeu denregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Copier un jeu denregistrements dune page une autre . . . . . . . . . . . . . . . . . Modier ou supprimer un jeu denregistrements . . . . . . . . . . . . . . . . . . . . . . . Utiliser un jeu denregistrements et le mode Afchage en direct . . . . . . . . . .
439 439 439 441 444 446 447 447 448 449 450 452 458 460 461 464 467 469 469 472 475 476 479 479 480 482 482 483 484 488 489 489
Table des matires
XVII
491 492 496 500 504 516 521
Crer des pages dynamiques avec des comportements de serveur . . . . . Page dafchage dune liste denregistrements avec images . . . . . . . . . . . . . Page de liste avec barre et tat de navigation . . . . . . . . . . . . . . . . . . . . . . . . . Pages dafchage Principale-Dtails . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Pages de gestion des donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Pages dauthentication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 21
Gestion de donnes XML avec Spry . . . . . . . . . . . . . . . . . . . . . . . . . . .

Prsentation du XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dnition du XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Avantages du XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Structure dun document XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Rgles dcriture dun document XML bien form . . . . . . . . . . . . . . . . . . . . Crer un schma de donnes Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer une structure de donnes avec les outils Spry . . . . . . . . . . . . . . . . . Afcher une simple donne dynamique Spry . . . . . . . . . . . . . . . . . . . . . . . . . Afcher une rgion rpte en bloc de donnes dynamiques Spry . . . . . . . . . Afcher une rgion rpte inline de donnes dynamiques Spry . . . . . . . . . . Afcher une liste de donnes dynamiques Spry . . . . . . . . . . . . . . . . . . . . . . . Crer des structures de donnes avec les options dafchage du schma Afcher un tableau de donnes dynamiques Spry . . . . . . . . . . . . . . . . . . . . . Crer une liste-dtails XML Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer un bloc dafchage principal/dtaill . . . . . . . . . . . . . . . . . . . . . . . . . . Crer des conteneurs empils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer des conteneurs empils avec zone focalisable . . . . . . . . . . . . . . . . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ANNEXE A
523 523 524 524 524 527 529 531 531 533 534 536 538 538 539 539 541 543 545
Prparer son site pour le rfrencement . . . . . . . . . . . . . . . . . . . . . . .

Arborescence et contenu des pages Web . . . . . . . . . . . . . . . . . . . . . . . . . . . Choisir larborescence et le nom des pages Web . . . . . . . . . . . . . . . . . . . . . . Optimiser le contenu des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Congurer le titre et les mtatags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Afcher les contenus de len-tte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
547 547 547 548 548 549
XVIII
Dreamweaver CS4
Congurer le titre de la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Congurer le mtatag description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Congurer le mtatag keywords . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Congurer un mtatag gnrique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ANNEXE B
549 551 552 553
Mise en ligne dun site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Dnir les infos distantes dun site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Congurer les paramtres du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Publier un site sur Internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Publier la page active . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Publier des pages depuis le panneau Fichiers . . . . . . . . . . . . . . . . . . . . . . . . . Publier des pages depuis la fentre de transfert . . . . . . . . . . . . . . . . . . . . . . . . Installer la base de donnes sur le site distant . . . . . . . . . . . . . . . . . . . . . . . Modier les paramtres de connexion la base de donnes . . . . . . . . . . . . . . Transfrer le contenu de la base de donnes . . . . . . . . . . . . . . . . . . . . . . . . . .
ANNEXE C
555 555 558 559 559 560 561 564 564 564
Raliser des lments graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Prparer une image pour le Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Changer le mode couleur dune image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Changer la taille dune image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Enregistrer pour le Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La fentre Enregistrer pour le Web et les priphriques . . . . . . . . . . . . . . . . . Optimiser une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le dcoupage en tranches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer des tranches depuis des repres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer des tranches manuellement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les options des tranches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Optimiser les tranches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Enregistrer les tranches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ANNEXE D
567 567 567 568 570 570 572 576 577 577 578 579 579 580
Couleurs nominatives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
581 587
Avant-propos
Objectif de louvrage
Ce livre dcrit les diffrentes fonctionnalits de Dreamweaver en sattardant sur les nouveauts de la version CS4. Il est destin la fois aux professionnels qui dsirent perfectionner leurs connaissances et aux dbutants qui souhaitent crer leur premier site Web.
Contenu de louvrage
Le prsent ouvrage est dcoup en quatre grandes parties. La premire partie est consacre aux principales fonctionnalits de Dreamweaver en concordance avec le langage XHTML. Notre souci principal est de vous permettre de raliser des pages Web qui seront conformes aux spcications du W3C et notamment aux DTD 1.0 Transitional et Strict. Il est ncessaire de comprendre les balises XHTML, la structure dune page, le concept des blocs, etc., pour raliser une page avec Dreamweaver. Les techniques de mise en forme laide de tableaux et lusage des jeux de cadres sont galement prsents dans cette partie, mme sils ne sont plus conseills aujourdhui dans la conception de pages Web. Les formulaires, et surtout les nouveaux types de validation Spry de ses lments, seront aussi dtaills dans cette partie. La deuxime partie rappelle les connaissances de base en matire de rgles de CSS et dtaille leur usage avec linterface visuelle de Dreamweaver. Toutes les proprits CSS intgres Dreamweaver sont dtailles ici. Le chapitre 9 servira de rfrence car il prsente toutes les proprits des styles accessibles depuis la bote de dialogue Dnition des rgles de CSS de Dreamweaver. La conception de pages XHTML/ CSS relevant souvent dune bonne connaissance des rgles de styles et plus particulirement des positionnements, nous avons consacr le chapitre 10 ces notions. Les chapitres 11, 12 et 13 dtaillent la mise en pratique des notions dveloppes au cours des chapitres prcdents. Ils abordent notamment la conception dune page, la mise en forme des tableaux et des formulaires, ainsi que la cration de menus verticaux et horizontaux avec et sans image darrire-plan.
XX
Avant-propos
La troisime partie concerne les fonctionnalits avances de Dreamweaver CS4, particulirement les nombreux comportements JavaScript et effets Spry qui permettent de crer des pages interactives sans avoir saisir la moindre ligne de code JavaScript. Lintgration des diffrents types de mdias (animation Flash, vido, son) est aussi dtaille dans cette partie. La quatrime partie aborde la gestion des donnes dynamiques ct serveur avec les comportements serveur PHP/MySQL. Ces derniers permettent de grer des informations stockes dans une base de donnes, galement ct client, laide des outils XML Spry avec lesquels on peut traiter en local des donnes issues dun chier XML. Malgr la puissance des fonctionnalits gnres, les diffrentes ralisations proposes ne ncessitent aucune connaissance en programmation car elles seront entirement ralises en mode visuel.
Fichiers source
Tous les chiers des exercices de cet ouvrage sont disponibles en tlchargement sur le site Internet de lditeur ladresse suivante : http://www.editions-eyrolles.com. Sur lcran daccueil du site, saisissez le nom de lun des deux auteurs de cet ouvrage dans le champ de recherche situ en haut gauche. Dans la liste des rsultats proposs, cliquez ensuite sur le lien correspondant ce livre pour visualiser sa che. Une fois cette dernire afche lcran, cliquez sur le lien de tlchargement (dans la colonne de droite) pour accder aux chiers source mentionns dans cet ouvrage.
Partie I
Les bases de Dreamweaver CS4
1
Prsentation de Dreamweaver CS4
Les nouveauts de Dreamweaver CS4
Dune version lautre, Dreamweaver complte et optimise sa palette doutils visuels de conception et de mise en forme de pages Web an de mieux rpondre aux attentes des crateurs de sites Web et dexploiter pleinement les apports des nouvelles technologies Internet. Parmi les nombreuses nouveauts de la version CS4, nous vous en avons slectionn quelques-unes qui devraient vous convaincre quant lintrt de cet outil dans vos futures crations.
Une nouvelle interface utilisateur

Linterface utilisateur est similaire aux autres produits de la gamme CS4 et permet une meilleure adaptation de vos besoins et une ergonomie remarquable. Plusieurs environnements de travail sont disponibles auxquels sajouteront vos propres dispositions des fentres et des panneaux. Dans le cadre de cet ouvrage, nous utiliserons lespace de travail Designer qui est la conguration du logiciel par dfaut.
Un nouveau panneau des proprits

Le panneau des proprits a t totalement revu et offre prsent une parfaite compatibilit avec les styles CSS. Les diffrentes options permettent de crer facilement des slecteurs de style de balise, de classe, didentiant ou des slecteurs plus complexes. Le panneau a t divis en deux parties. Lune est rserve la conception de la structure
Les bases de Dreamweaver CS4 PARTIE I
HTML de la page ; elle permet dy insrer des balises. Lautre permet de crer des styles pour les diffrents lments ou bien pour une partie slectionne. Lusage du site CSS Advisor, accessible depuis linterface de Dreamweaver, permettra aux dveloppeurs novices et chevronns damliorer leurs connaissances des navigateurs et de leurs bogues. Crer un site avec Dreamweaver CS4 garantit dsormais une bonne conformit aux recommandations du W3C.
Un accs aux styles plus rapide

La fentre Navigation vers le code permet de visualiser rapidement les proprits de style appliques un lment slectionn dans la page en mode Cration. Cette fentre afchant les diffrentes rgles de style, laccs la rgle dans la feuille de style est dautant plus rapide.
Une prvisualisation facilite avec lafchage en direct

Ce nouveau mode dafchage de la page permet de simuler le rendu de la page courante dans un navigateur en mode Cration (ce nouveau mode remplace en partie le mode appel Live Data de la version CS3). Vous ne pourrez pas interagir avec les fonctionnalits de la page comme dans un vritable navigateur, mais ce mode vous rendra de grands services et vous vitera la prvisualisation systmatique dans un navigateur. Une option supplmentaire, lafchage du code en direct, vous permet de visualiser le code de la page en temps rel, cest--dire en tenant compte des ventuelles modications lors dvnements JavaScript ou gnrs par une technologie serveur (comme PHP par exemple).
Une meilleure intgration des autres logiciels Adobe

Dreamweaver CS4 est totalement intgr la suite Adobe CS4 et a subi des modications notoires permettant par exemple dintgrer des documents au format natif Photoshop, le format PSD. Dreamweaver transforme ces documents issus de Photoshop en chiers JPEG, GIF ou PNG et conserve un lien vers le document original. Ces images sont des objets dynamiques qui permettent de modier limage intgre partir du chier original. Dreamweaver CS4 conserve en outre toutes les fonctionnalits de la version prcdente de copier-coller des images ou des portions dimage depuis leur application de traitement ainsi que les fonctionnalits de modication intgres (modication du cadrage, de luminosit/contraste ou de la nettet).
Le framework Spry pour Ajax

Spry est une bibliothque JavaScript qui permet de crer des interfaces enrichies, dexploiter des ux de donnes XML dans une page XHTML, de crer des contrles de formulaire instantans ou encore dactualiser certaines parties dune page XHTML sans avoir recharger toute la page (comme le fait Ajax).
Prsentation de Dreamweaver CS4 CHAPITRE 1
Dreamweaver, depuis la version CS3, exploite cette bibliothque (ou framework) Spry dans plusieurs modules qui offrent la possibilit de crer des interfaces enrichies avec des barres de menus droulants ou des panneaux onglets, par exemple, sans avoir dvelopper de programmes complexes qui ncessitent des connaissances avances de JavaScript et des technologies associes (DOM, CSS, XML). Avec la nouvelle version CS4, dautres applications viennent enrichir les bibliothques Spry de Dreamweaver. Voici un petit aperu des diffrentes bibliothques Spry pour lesquels nous prciserons les nouveaux composants de la version CS4 : Crer dimpressionnants effets visuels Spry Ces effets vous permettront dappliquer des transitions visuelles certains objets de vos pages pour les agrandir, les rtrcir, les faire disparatre ou encore les surligner pour les mettre en vidence. Raliser rapidement des lments dinterfaces enrichies Spry Les widgets du framework Spry vous permettront dinsrer rapidement des lments dinterfaces enrichies dans les pages Web. De nombreux widgets sont disponibles. Citons, en guise dexemples, les barres de menus droulants, les panneaux onglet, les zones rductibles ou accordons, etc. Valider dynamiquement les formulaires Spry Les lments de validation Spry permettent de contrler si un champ de formulaire a bien t renseign, ou encore sil sagit dun champ destin un e-mail et si la structure du mail est correcte. Si la validation nest pas possible, un message rappelant les donnes attendues apparatra ct du champ concern. La procdure de validation pourra tre dclenche lors de la soumission nale du formulaire ou au l de la saisie des donnes. Trois nouveaux composants de validation Spry sont disponibles dans la nouvelle version CS4 : validation Spry de mot de passe ; validation Spry de conrmation ; validation Spry de groupe de boutons radio. Grer les donnes XML Spry Avec les outils de gestion des donnes dynamiques Spry, il est dsormais trs facile dincorporer dans une page Web du contenu issu dun chier XML. En effet, il suft pour cela de crer un schma de donnes issu dun chier XML ou encore dun l RSS pour que Dreamweaver puisse grer son contenu. Vous pouvez ensuite les afcher dans de nombreux types de listes ou dans des tableaux qui permettront de trier le contenu sans le moindre problme. Dsormais, avec Dreamweaver CS4, la cration de tableaux de donnes issues dun chier XML ou HTML peut tre programme ds la cration du schma de donnes par le choix doptions dinsertion. Voici les quatre nouvelles options dinsertion disponibles depuis CS4 : insrer un tableau ; insrer un bloc dafchage principal/dtail ; insrer des conteneurs empils ; insrer des conteneurs empils avec colonne focalisable.
Lespace de travail
Congurer lespace de travail
Comme nous vous lavons annonc dans les nouveauts de la version CS4, dsormais plusieurs environnements de travail sont prcongurs (menu Fentre>Prsentation de lespace de travail). Vous pourrez aussi dnir vos propres dispositions de fentres et de panneaux et les enregistrer dans la liste des environnements. Pour cet ouvrage, nous avons choisi dutiliser la conguration de lespace de travail par dfaut : lespace de travail Designer.
Prsentation de lespace de travail

Au dmarrage de Dreamweaver CS4, un cran daccueil safche, compos de trois menus regroupant diffrents liens : Le premier menu permet daccder rapidement aux derniers documents utiliss (voir repre de la gure 1-1).
Figure 1-1
cran daccueil de Dreamweaver
Prsentation de Dreamweaver CS4 CHAPITRE 1
Le deuxime menu vous invite crer une nouvelle page vierge en slectionnant son type (voir repre de la gure 1-1). Le troisime menu permet daccder de nombreuses dmonstrations vido (voir repre de la gure 1-1) sur lusage de Dreamweaver, disponibles depuis un site Internet du canal TV dAdobe (http://tv.adobe.com). Si vous cliquez, par exemple, sur le lien HTML de la rubrique Crer (voir repre de la gure 1-1), une page vierge souvre alors dans Dreamweaver (si cette page safche en mode Code, cliquez sur le bouton Cration pour basculer en mode Cration, voir repre de la gure 1-2), elle correspond la fentre Document. Lespace de travail de Dreamweaver CS4 (voir gure 1-2) est dot de nombreux panneaux que vous pouvez regrouper votre convenance (voir repre de la gure 1-2). Pour dplacer un panneau, cliquez sur son onglet (zone blanche de longlet de chaque panneau, voir repre de la gure 1-3) et dplacez-le lendroit souhait tout en maintenant le bouton gauche de la souris enfonc.
Figure 1-2
Espace de travail de Dreamweaver
Figure 1-3
Pour dplacer rapidement un panneau, il suft de cliquer dans la zone blanche de son onglet, puis de faire un glisser-dplacer vers lendroit dsir.
Les panneaux sont regroups dans des blocs selon leur fonction. Pour passer dun panneau lautre, cliquez simplement sur longlet du panneau souhait. Pour dplier/ replier un panneau an dafcher/masquer son contenu, faites un double clic sur longlet du panneau. Pour fermer dnitivement les diffrents panneaux dun mme bloc et les faire disparatre de lespace de travail, cliquez sur le menu local situ droite du bloc et slectionnez loption Fermer le groupe donglets. Pour lafcher de nouveau, slectionnez le menu Fentre et choisissez le panneau souhait. Linterface de Dreamweaver CS4 est compose dune fentre Document (voir repre de la gure 1-2), surmonte de deux barres doutils et de trois boutons de slection du mode dafchage (Code, Fractionner et Cration). Dans le cadre de cet ouvrage, nous travaillerons trs souvent en mode Cration (voir repre de la gure 1-2). En haut de linterface, on retrouve une barre de menus (voir repre de la gure 1-2) et droite un panneau Insertion dans lequel il est possible de slectionner plusieurs catgories laide dune liste droulante (voir repre de la gure 1-2). Chacune de ces catgories donne accs des boutons qui permettront dinsrer rapidement de nombreux objets dans la fentre Document. En bas de lcran, le panneau Proprits est ancr par dfaut (voir repre de la gure 1-2), alors que tous les autres panneaux visibles sont regroups dans la partie droite de linterface (voir repre de la gure 1-2).
Prsentation des barres doutils et des panneaux Les diffrentes barres doutils qui composent lespace de travail de Dreamweaver CS4 seront dtailles au chapitre 2 de cet ouvrage, quant aux nombreux panneaux, ils seront prsents au cours des diffrents chapitres lors de leur utilisation.
2
Raliser un premier document avec Dreamweaver
Dreamweaver permet de raliser aussi bien une simple page Web quun site complet pouvant intgrer des bases de donnes, des pages XML, des scripts JavaScript, PHP ou encore ColdFusion. La cration dune page Web seule sera facilite par lutilisation des proprits de cration de page, de slection ainsi que le recours aux modles prdnis. La facilit de conception et de gestion dun projet comprenant de nombreuses pages savre aussi un atout majeur de Dreamweaver. Il est donc essentiel de dnir un site, au sens Dreamweaver du terme, ds le dmarrage. La cration de documents de base, de mises en page identiques, lautomatisation de lcriture des entits HTML et les outils de la fentre Document, permettront de raliser, trs rapidement, des sites de qualit professionnelle.
Prparer un site
Crer un site Web est une tche qui ncessite de nombreux types de ressources et qui gnre des pages lies dont le contenu lest galement. Il est donc trs important dorganiser votre travail ds le dbut du projet. Vous devez imprativement distinguer les documents de travail des documents du site. Pour cela, crez un premier rpertoire portant le nom du site Web ; celui-ci contiendra deux dossiers : le premier sera nomm, par exemple, Documents de travail ou Brut, et le deuxime, Site. Dans ce dossier, crez enn un sousdossier images. crivez le nom de ce rpertoire en minuscule, cela vitera de nombreuses erreurs par la suite. Plus tard, vous pourrez tre amen crer dautres dossiers portant des noms gnraux, tels que videos ou documents, ou bien des noms plus explicites,
10
comme randonnees, flore, faune, restaurants, etc. Cela vous permettra dorganiser facilement votre site Web, mais aussi de lindexer efcacement en spciant explicitement son arborescence aux moteurs de recherche.
Figure 2-1
Lorganisation des chiers de travail et des documents dun site
Dans la suite de votre travail, vous devrez toujours placer les documents destins au Web, cest--dire les documents termins, dans le dossier Site ou dans lun de ses sousrpertoires. Voici les diffrents formats de documents que lon pourra y trouver : .htm, .html, .jpeg, .gif, .png, .swf, .css, .js, .mp3 et .flv. Les documents de base, en cours de travail, seront placs dans le dossier Documents de travail. Voici les diffrents formats de documents que lon devra y placer : .psd, .ai, .jpeg, .mov, les chiers provenant de logiciels tels que Microsoft Word ou Excel, Adobe InDesign, Quark Xpress, les documents de travail des montages vido ou des extraits sonores. Les documents Flash, ayant pour extension .fla, seront, quant eux, placs dans lun des dossiers du site. En effet, pour tre lisibles sur le Web, ces chiers doivent tre publis. Le document cr lors de la publication porte lextension .swf et doit tre plac ct du chier original. Ainsi, en plaant les chiers .fla dans le mme dossier que les chiers du site, le rsultat de chaque publication sera dj dans le bon dossier. La technique du voilage , prsente dans ce chapitre, section Dnir un nouveau site avec longlet Avanc Voilage , permettra de masquer les chiers .fla lors de la mise en ligne et, ainsi, de ne pas les transfrer sur le serveur distant.
Dnir un site
Quel que soit le travail effectuer, il est recommand de toujours dnir un site. Il sera ainsi trs facile de placer lensemble des lments sur un serveur Web, de les renommer tout en conservant les liens entre les pages ou encore de remplacer automatiquement une chane de caractres sur lensemble des pages. Bien dautres possibilits vous seront offertes grce la dnition du site et notamment lenregistrement des pages directement dans le dossier choisi. Pour dnir un nouveau site, Dreamweaver propose plusieurs possibilits an douvrir la fentre de dnition de site. Depuis lcran de dmarrage, cliquez sur le bouton Site Dreamweaver, plac dans la partie centrale nomme Crer.
Raliser un premier document avec Dreamweaver CHAPITRE 2
11
Figure 2-2
Le bouton Site Dreamweaver... permettant de dnir un nouveau site depuis lcran de dmarrage
Si un document est dj ouvert, slectionnez le menu Site>Nouveau site ou Site>Grer les sites (voir repre de la gure 2-3) et cliquez sur le bouton Nouveau site pour dnir un site.
Figure 2-3
Les menus de dnition dun nouveau site
Vous pouvez aussi cliquer sur licne reprsentant une arborescence (voir repre de la gure 2-3) pour accder aux commandes de cration et de gestion de sites.
Dnir un nouveau site avec longlet Elmentaire

La fentre de dnition de site prsente deux onglets nomms respectivement Elmentaire et Avanc. Longlet Elmentaire permet la dnition du site de manire assiste. Le passage dun cran lautre se fait en cliquant sur le bouton Suivant. Les lignes qui suivent proposent un paramtrage de base. Ces options aident dmarrer un site simplement.
12
Toutes les diffrentes options seront dtailles la section suivante, Dnir un nouveau site avec longlet Avanc .
Figure 2-4
Fentre Dnition du site
Dans le premier cran, indiquez le nom que vous souhaitez donner votre site pour le retrouver facilement parmi ceux qui sont grs dans Dreamweaver (gure 2-4). Ce nom peut tre quelconque, il ny a pas de restriction particulire. Si vous ne connaissez pas ladresse URL de votre futur site, ne remplissez pas le champ dadresse HTTP et cliquez sur le bouton Suivant. Lcran suivant permet de choisir une technologie de serveur particulire. Si aucun de ces langages ou technologies ne sont employs dans le site, slectionnez Non, je ne veux pas utiliser de technologie serveur et cliquez sur Suivant. Le troisime cran vous demande dindiquer la mthode denregistrement des chiers pendant le dveloppement du site. La premire option est gnralement toujours choisie car une version du site est alors conserve sur lordinateur de travail et, de plus, elle ne ncessite pas dtre connect en permanence un serveur. Choisissez ensuite lemplacement du dossier de travail sur votre machine en saisissant manuellement le chemin ou en slectionnant le dossier grce licne situe droite du champ. Ce choix est trs important car il permettra dautomatiser de nombreuses tches par la suite.
13
Figure 2-5
Slection du mode denregistrement des chiers au cours du dveloppement du site
Le quatrime cran permet de choisir la mthode de transfert des chiers sur le serveur Web. Pour un site ne ncessitant aucune technologie particulire, choisissez FTP et renseignez ensuite les diffrents champs qui sont alors proposs. Les renseignements demands vous ont t fournis par votre hbergeur.
Figure 2-6
Slection du mode de transfert des chiers sur le serveur Web
Le dernier cran prsente un rcapitulatif des paramtres choisis. Vriez-les attentivement et cliquez, ventuellement, sur le bouton Prcdent pour modier un choix. Lorsque toutes les options sont correctes, cliquez sur le bouton Termin.
14
Dnir un nouveau site avec longlet Avanc

Depuis la fentre de dnition de site, cliquez sur longlet Avanc. Vous accdez alors une fentre prsentant simultanment toutes les options. Les diffrentes rubriques de larborescence Catgorie permettent de paramtrer lensemble du site (gure 2-7).
Figure 2-7
Longlet Avanc de la fentre de dnition de site
Voici une description dtaille des diffrentes catgories.

La catgorie Infos locales
Cette catgorie concerne uniquement les informations locales. Dans les deux premiers champs, indiquez le nom du site et lemplacement du rpertoire (sur votre ordinateur) dans lequel sont stocks les chiers du site. En cliquant sur licne de dossier place
15
ct du champ Dossier racine local, vous indiquez Dreamweaver lemplacement de ce dossier. Ces deux renseignements sont indispensables. Le champ suivant, nomm Dossier des images par dfaut, permet de dnir lemplacement des images. Ce champ nest pas obligatoire, mais il est utile car les commandes dinsertion dimages de Dreamweaver en autoriseront laccs automatique. Le champ Liens relatifs facilite lautomatisation de lcriture de liens relatifs la racine du site. Si vous cochez loption La racine du site, vous devrez renseigner ladresse HTTP du site. Vous devrez aussi insrer une balise <base> dans len-tte du document. Voici un exemple de lien relatif au document. Nous considrons que les deux pages sont places dans le mme rpertoire, nomm monts. Le lien est plac sur la page A et afche la page B.
<a href="B.html">Lien vers la page B</a>
Voici le mme exemple avec un lien relatif la racine du site. Ladresse HTTP du site est http://www.montagne-65.com. Le lien relatif commence aprs le nom de domaine du site.
<a href="/monts/B.html">Lien vers la page B</a>
Ladresse HTTP permettra galement Dreamweaver de vrier la validit des hyperliens intgrs dans le site.
Remarque Pour afcher les liens raliss avec loption Liens relatifs la racine du site en utilisant le menu Fichier>Aperu dans le navigateur, vous devez cocher loption Aperu laide dun chier temporaire, situe dans le menu Prfrences>Aperu du navigateur. Si cette option nest pas coche, les documents lis, notamment les limages, ne safcheront pas.
La case Liens sensibles la casse fait que Dreamweaver vrie que la casse des liens correspond celle des noms des documents. Cette vrication seffectue en lanant la commande de vrication de liens. La case Cache permet de mmoriser les informations du site et dacclrer ainsi les diffrents traitements.
La catgorie Infos distantes
Dans cette catgorie, sont renseigns la mthode et les codes associs pour le transfert des pages et de tous les lments du site sur le serveur Web. Les codes de connexion sont dlivrs par votre hbergeur. Choisissez un type daccs depuis le menu local Accs. La fentre propose alors les champs spciques loption choisie. Aucun Aucun serveur nest spci. Cest loption par dfaut. FTP Il sagit de loption la plus courante. Elle permet de transfrer facilement lensemble des lments dun site. Voici le dtail des paramtres renseigner. Hte FTP Adresse Web du serveur FTP, par exemple ftp.monsite.net ou 217.194.194.174.
16
Rpertoire de lhte Ce champ est optionnel. Il spcie le rpertoire dans lequel charger les lments du site, par exemple /web/. Nom dutilisateur Ce nom est donn par lhbergeur du site. Tester Ce bouton permet de tester les paramtres de connexion. Si les paramtres sont corrects, le message suivant apparat : Adobe Dreamweaver sest connect avec succs votre serveur web . Mot de passe Le mot de passe est fourni par lhbergeur du site. Enregistrer Dcochez cette case si vous souhaitez que Dreamweaver vous demande votre mot de passe chaque connexion au serveur FTP. Utiliser FTP Passif En mode FTP Passif, cest le client FTP (donc Dreamweaver) qui congure la connexion la place du serveur distant. Le FTP Passif est trs souvent utilis en prsence dun pare-feu. Cette option doit gnralement tre coche. Utiliser le mode de transfert IPV6 Permet demployer un serveur FTP compatible IPV6. lheure actuelle, trs peu de FAI (Fournisseur daccs Internet) proposent ce protocole. Utiliser un pare-feu Choisissez cette option si le serveur distant est protg par un pare-feu. Si tel est le cas, lhbergeur ou ladministrateur vous en informera. Vous devrez alors cliquer sur le bouton Paramtres du pare-feu pour entrer ladresse de lhte du pare-feu ainsi que son port. Utiliser Secure FTP (SFTP) Permet de se connecter en mode FTP scuris si le serveur distant a t congur ainsi. Conserver les informations de synchronisation Pour synchroniser automatiquement les chiers locaux et distants. Cette option est coche par dfaut. Tlcharger autom. les chiers vers le serveur lors de lenregistrement Place les chiers enregistrs directement sur le serveur Web. Cette option ncessite une connexion permanente. Activer larchivage et lextraction de chier Permet de travailler en quipe sur le mme serveur distant. Si vous cochez cette case, vous devez renseigner les deux champs qui apparaissent, savoir votre identiant et votre adresse e-mail. Local/rseau Spcie le dossier du site sur le rseau lorsque lon excute un serveur dvaluation depuis son ordinateur. WebDav Permet de se connecter un serveur en utilisant le protocole WebDav (Web-based Distributed Authoring and Versoning). RDS Pour se connecter un serveur Web par RDS (Remote Development Services). Lordinateur serveur doit excuter Macromedia ColdFusion. Microsoft Visual SourceSafe Permet de se connecter un serveur Web par Microsoft Visual SourceSafe.
17
La catgorie Serveur dvaluation
Cette catgorie permet de choisir une technologie de serveur ainsi que son accs. Elle doit tre renseigne lors de lutilisation du couple PHP/MySQL. Pour plus de renseignements, reportez-vous au chapitre 20.
La catgorie Contrle de version
Le contrle de version autorise un travail collaboratif en employant un serveur distant Subversion (abrg svn). Si vous avez un tel serveur disposition, renseignez les diffrents champs. Linstallation dun serveur Subversion demande de bonnes connaissances informatiques et rseau.
La catgorie Voilage
Le voilage consiste spcier un dossier ou bien un ou plusieurs types de chiers qui seront exclus de toute opration sur le site. Depuis cette catgorie, vous pouvez spcier les types de chiers voiler, par exemple les chiers ayant pour extension .fla. Ainsi, lors du transfert des chiers sur le serveur Web, ces chiers ne seront pas pris en compte.
La catgorie Design Notes
Cette catgorie est relative la gestion du comportement des notes crites dans un document. Les notes seront utiles dans le cas dun travail collectif ou pour la conservation de messages.
La catgorie Colonnes en mode Fichier
Cette catgorie gre lafchage des colonnes dans la fentre Fichiers. Pour afcher/ masquer une colonne, cliquez sur son nom, puis cochez/dcochez loption Afcher. Pour ajouter un type de colonne, cliquez sur le bouton Plus. Les modications sappliqueront dans les deux fentres Fichiers locaux et Site distant.
La catgorie Contribute
Concerne la compatibilit avec le logiciel Contribute, qui doit tre install sur lordinateur de travail.
La catgorie Modles
Cette catgorie vise conserver le comportement des liens de modles des anciennes versions de Dreamweaver. Lorsque cette option est coche, Dreamweaver ne met pas jour les liens vers les chiers situs dans le dossier Template.
La catgorie Spry
Cette catgorie permet de spcier le nom et lemplacement du dossier dans lequel seront placs les documents de script Spry. Par dfaut, ce dossier se nomme SpryAssets et se situe la racine du site.
18
Crer un nouveau document

Pour crer un nouveau document, allez dans le menu Fichier>Nouveau. Dans la fentre dinvite, choisissez Page vierge, puis HTML comme type de page et <aucun(e)> pour la mise en forme. La fentre de document souvre alors sur une page vierge avec les caractristiques choisies dans les prfrences des nouveaux documents. Une autre mthode de cration de document consiste utiliser le raccourci clavier Ctrl + N (Cmd + N sur Mac). Dans ce cas, selon les prfrences choisies, cest un nouveau document vierge qui souvre, ou alors la fentre dinvite, pour choisir un type de page et sa mise en forme. Pour activer/dsactiver la fentre dinvite lors de lutilisation du raccourci clavier de cration de nouveau document, slectionnez le menu Edition> Prfrences. Choisissez alors la catgorie Nouveau document, puis cochez/dcochez loption Afcher la bote de dialogue Nouveau document si Ctrl + N est utilis. Depuis la page dinvite de nouveau document, Dreamweaver CS4 propose de nombreuses mises en forme pour les documents HTML. Elles peuvent constituer un bon point de dpart pour la cration de pages valides XHTML/CSS. Cliquez sur chacune des mises en forme pour en afcher un modle et une courte description (gure 2-8, repre ) dans la partie droite de la fentre. La zone Type de document (gure 2-8, repre ), permet de choisir une DTD particulire (voir plus loin dans ce chapitre).
Figure 2-8
Les options dun nouveau document
19
Le champ CSS de mise en forme est actif uniquement lorsque lon choisit un modle de mise en forme. Il propose de placer les styles dans la page. Il faut pour cela choisir loption Ajouter len-tte. La deuxime option, Crer un nouveau chier, place les styles dans une page externe. Lier au chier existant permettra dinsrer les styles dans un document CSS dj cr. Pour ce dernier choix, cliquez sur licne de lien an douvrir la bote de dialogue de slection du chier lier cette nouvelle page. Une fois le chier souhait slectionn, cliquez sur le bouton Crer. Enregistrez le nouveau document cr dans le dossier Site via le menu Fichier>Enregistrer. Lenregistrement de ce document est trs important car il permet, dune part, de le conserver en cas de dysfonctionnement de la machine et, dautre part, dautoriser Dreamweaver crer des liens par rapport la position de ce document dans larborescence du site.
Liquide ou lastique ?
Lorsque lon souhaite utiliser lun des modles de pages proposs par Dreamweaver, quatre dnominations permettent didentier le comportement des gabarits : xe, liquide, lastique et hybride. Les pages xes ont des structures dtermines en pixels. Leurs tailles sont donc xes. Les blocs des pages liquides sont exprims en pourcentage. Ces pages ont des tailles modiables. Les pages lastiques sagrandissent ou se rduisent par une combinaison de touches du clavier. Les tailles des blocs des pages lastiques sont exprimes en unit em . Les pages hybrides sont la fois liquides et lastiques. Les paragraphes suivants donnent une dnition plus prcise de ces deux derniers termes. Le terme liquide signie que la taille de la colonne sera modie en fonction de la taille de la fentre du navigateur. La taille de la colonne est spcie en pourcentage (%). Le texte plac dans cette colonne coule vers le bas ou la droite selon la taille de la fentre. Lexemple de la gure 2-9 prsente la mme page, dans le navigateur Firefox, afche avec des tailles de fentre diffrentes. Les tailles des colonnes se sont adaptes la taille de la fentre du navigateur.
Figure 2-9
Deux aspects dune fentre liquide en fonction de la taille de la fentre du navigateur
Lexemple de la gure 2-10 prsente la mme page, dans le navigateur Firefox, afche avec des tailles de caractres diffrentes. La taille des colonnes est reste xe. En cas de forts grossissements, le texte ne safchera pas dans sa totalit.
20
Figure 2-10
Deux aspects dune fentre liquide en fonction de la taille de la police de caractres
Le terme lastique signie que la taille de la colonne dpend de la taille des caractres du texte. La taille de la colonne est dnie en unit em. Ces types de pages sont particulirement adapts aux personnes dcience visuelle. Elles permettent de modier la taille des caractres tout en conservant la mise en page. Lexemple de la gure 2-11 prsente la mme page que prcdemment, dans le navigateur Firefox, afche avec des tailles de fentre diffrentes. Les tailles des colonnes sont restes xes, masquant une partie du texte car la taille de fentre a t rduite.
Figure 2-11
Deux aspects dune fentre lastique en fonction de la taille de la fentre du navigateur
Lexemple de la gure 2-12 prsente la mme page, dans le navigateur Firefox, afche avec des tailles de caractres diffrentes. Dans ce cas, nous avons un bon exemple de lutilisation de llasticit des colonnes. Elles se sont adaptes la taille demande.
Note Pour modier la taille du texte dans Internet Explorer ou Firefox, choisissez le menu Afchage>Taille du texte et slectionnez lune des options proposes.
21
Figure 2-12
Deux aspects dune fentre lastique en fonction de la taille de la police de caractres
Les proprits de la page
Les proprits de la page rassemblent les styles disponibles pour lensemble du document. Ces proprits permettent de choisir laspect des textes, avec deux possibilits (HTML ou CSS), laspect de larrire-plan, des liens et dautres attributs spciques la page. Pour accder aux proprits de la page, slectionnez le menu Modier>Proprits de la page ou cliquez, selon la slection active, sur le bouton Proprits de la page situ dans la palette Proprits. La bote de dialogue de la gure 2-13 apparat.
Figure 2-13
Les proprits de la page
22
Cliquez sur les catgories situes gauche de la fentre pour en afcher les proprits.
La catgorie Aspect (CSS)
La catgorie Aspect (CSS) permet de dnir laspect par dfaut des textes et de la page, ainsi que sa couleur ou son image darrire-plan. Les aspects seront dnis en tant que styles CSS internes la page. Ces styles pourront, ultrieurement devenir externes. Choisissez la police par dfaut parmi celles qui vous sont proposes. La liste est universelle et sapplique toutes les plateformes. Lemploi dune police particulire implique que cette dernire soit installe sur lordinateur de lutilisateur nal, cest pourquoi il est fortement dconseill de choisir loption Modier la liste des polices. Dans le champ Taille, spciez une valeur. Une valeur de 12 ou 14 pixels est gnralement un bon compromis. Il sagit ici de la taille par dfaut des textes. Choisissez la couleur du texte laide de la palette de couleurs ou saisissez son code hexadcimal prcd du caractre # (dise). De la mme manire que pour le texte, choisissez la couleur de larrire-plan de la page (facultatif). Si vous ne prcisez aucune couleur, larrire-plan sera blanc. Dans la zone Image darrire-plan, spciez un chemin vers une image pour lafcher en arrire-plan (facultatif). Cliquez sur le bouton Parcourir pour slectionner une image enregistre sur votre ordinateur. La rptition spcie la mthode dafchage de limage darrire-plan lorsque ses dimensions sont infrieures celles de la page. La liste droulante de ce champ propose quatre options : No-repeat Limage ne sera pas rpte. Si sa taille est infrieure la taille de la fentre du navigateur, elle ne couvrira pas tout larrire-plan de la page. Repeat Limage se rpte pour remplir toute la page. Repeat-y Limage se rpte uniquement sur la ligne verticale. Repeat-x Limage se rpte uniquement sur la ligne horizontale.
Figure 2-14
Les diffrents modes de rptition dune image en arrire-plan
Les marges spcient la distance entre le bord de la fentre du navigateur et le dbut du document. La gure 2-15 prsente une image insre dans une page. Sur la gure suprieure, les marges nont pas t renseignes, une bordure de la couleur darrire-plan
23
apparat entre le navigateur et les bords de limage place dans la page. Sur la gure infrieure, les marges sont gales zro.
Figure 2-15
Exemple de spcication des marges pour une image
La catgorie Aspect (HTML)
Cette catgorie permet de dnir laspect par dfaut des textes et de la page, ainsi que sa couleur ou son image darrire-plan. La couleur des liens est galement dtermine ici. Les aspects seront prciss en tant quattributs de la balise body. Nutilisez pas cette catgorie si vous souhaitez raliser des pages aux standards du XHTML 1.0 Strict. Dans la zone Image darrire-plan, spciez un chemin vers une image pour lafcher en arrire-plan (facultatif). Cliquez sur le bouton Parcourir pour slectionner une image enregistre sur votre ordinateur. La zone Arrire-plan concerne la couleur darrire-plan de la page Texte, Liens, Liens visits, Liens actifs permettent successivement de choisir la couleur des textes, des liens, des liens dont la page a dj t visionne, de laspect des liens au moment du clic. Les valeurs de marge prcisent la marge entre le bord de la page et le dbut de son contenu. Le code gnr par cette catgorie est le suivant :
<body bgcolor="#CCCCCC" text="#000000" link="#FF9900" vlink="#FFCC66" alink="#FF3333" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
24
La catgorie Liens (CSS)
La gure 2-16 prsente les proprits de la catgorie Liens qui dnit la police et la couleur par dfaut des liens de la page. Choisissez une police dans la liste droulante correspondante et une taille pour les textes prsentant des liens. Les autres options de cette fentre concernent la couleur des diffrents tats des liens. Cette catgorie cre des styles CSS internes la page. Ces styles pourront, ultrieurement devenir externes.
Figure 2-16
La catgorie Liens des proprits de la page
Couleur des liens Il sagit de la couleur des liens qui nont pas encore t visits. Liens de survol Il sagit de la couleur des liens lorsque le curseur de la souris les survole. Liens visits Spcie la couleur des liens visits. Liens actifs Prcise la couleur du lien lorsque linternaute clique dessus.
La catgorie Titres (CSS)
La catgorie Titres (CSS) spcie la police, la taille et les couleurs des titres dnis comme en-ttes (voir chapitre 8). Les aspects de cette catgorie seront dnis en tant que styles CSS internes la page. Ces styles pourront, ultrieurement devenir externes. La gure 2-17 prsente cette catgorie.
25
Figure 2-17
La catgorie Titres des proprits de la page
La catgorie Titre/codage
Cette catgorie des proprits de la page autorise de modier la DTD du document courant, ainsi que son codage (voir section Choisir la DTD dans ce chapitre).
Figure 2-18
La catgorie Titre/codage des proprits
26
Elle permet aussi de saisir le titre de la page mme si celui-ci est gnralement crit depuis la fentre du document. Le titre est un lment indispensable la page. Pour plus de renseignement sur les diffrentes options de cette page, consultez la section Les prfrences pour les nouveaux documents , dans ce chapitre.
La catgorie Trac de limage
Cette catgorie permet dinsrer dans la page une image qui sassimile un calque de positionnement des lments. Cette image napparatra pas lors de laperu de la page dans un navigateur. Elle est uniquement visible dans un document Dreamweaver. Lchelle de transparence dnit son opacit. Une application de lutilisation dune image en arrire-plan est donne au chapitre 10, dans la section Utiliser un lment PA pour une composition simple .
La fentre Document
La fentre Document est votre principale fentre de travail car elle afche les pages sur lesquelles vous travaillez. Elle est compose de plusieurs barres doutils, accessibles depuis le menu Afchage>Barres doutils. Par dfaut, celles-ci sont situes en haut de la fentre Document, mais il est possible de les dplacer. Pour cela, cliquez sur la partie grise en pointills, situe sur la gauche de la barre, et dplacez-la tout en maintenant le bouton de la souris enfonc. La gure 2-19 illustre le dplacement dune barre doutils. Pour replacer la barre doutils en haut de la fentre Document, procdez de la mme manire.
Figure 2-19
Dplacement dune barre doutils
Les barres doutils disponibles sont les suivantes : Rendu du style ; Document ; Standard ; Codage.
La barre doutils Rendu du style
La barre doutils Rendu du style souvre depuis le menu Afchage>Barres doutils> Rendu du style. Elle vous sera utile lorsque vous crerez une ou plusieurs feuilles de style dpendantes dun mdia particulier. Les choix proposs ici permettent dafcher la page en cours de travail dans un rendu adapt diffrents types de mdias auxquels vos
27
feuilles de style font rfrence impression, tlphone mobile, cran, navigateurs Web. Ces utilisations sont gnriques et ne retent pas les diffrences possibles entre les logiciels qui afchent ces mdias. La liste des types de mdias propose ici nest pas exhaustive car certains dentre eux, comme les mdias prvus pour le braille, ne peuvent pas safcher dans Dreamweaver.
Figure 2-20
La barre doutils Rendu du style
Voici une courte description des diffrentes icnes de la barre doutils Rendu du style : Rendu pour le type de support cran (voir repre de la gure 2-20) Rendu pour les feuilles de style importes ou lies au document courant et spcies pour lcran (media="screen"). Rendu pour le type de support Impression (voir repre de la gure 2-20) Rendu pour les feuilles de style importes ou lies au document courant et spcies pour limpression (media="print"). Rendu pour le type de support Tlphone mobile (voir repre de la gure 2-20) Rendu pour les feuilles de style importes ou lies au document courant et spcies pour les tlphones mobiles (media="handheld"). Rendu pour le type de support Projection (voir repre de la gure 2-20) Rendu pour les feuilles de style importes ou lies au document courant et spcies pour la projection (media="projection"). Rendu pour le type de support TTY (voir repre de la gure 2-20) Rendu pour les feuilles de style importes ou lies au document courant et spcies pour les appareils tltypes (media="TTY"). Rendu pour le type de support TV (voir repre de la gure 2-20) Rendu pour les feuilles de style importes ou lies au document courant et spcies pour les crans de tlvision (media="TV"). Intervertir lafchage des Styles CSS (voir repre de la gure 2-20) Permet de dsactiver toutes les feuilles de style de la page. Feuilles de style la conception (voir repre de la gure 2-20) Ouvre une bote de dialogue o est spcie une feuille de style dont les effets seront visibles uniquement pendant la cration de la page. Une feuille de style la conception na aucun effet dans un navigateur.
28
La barre doutils Document
La barre doutils Document souvre depuis le menu Afchage>Barres doutils>Document. Nous vous recommandons de lafcher en permanence car elle est essentielle. En effet, elle permet, par exemple, de passer facilement du mode Code au mode Cration ou encore de fractionner lcran pour afcher ces deux modes simultanment. Cette barre doutils propose galement un champ Titre que vous devrez toujours renseigner car il sagit du titre de votre page HTML, lment essentiel pour le rfrencement. Licne Vrier la compatibilit avec les navigateurs vous permettra de visualiser le rendu de votre page dans les diffrents navigateurs slectionns.
Figure 2-21
La barre doutils Document
Voici une courte description des diffrentes icnes de la barre doutils Document : Code Bascule lafchage de la page en mode Code. Fractionner Afche le mode Code et le mode Cration sur la mme page. Le code est afch par dfaut dans la partie suprieure. Cette position peut tre inverse en cochant loption Mode Cration en haut, accessible en cliquant sur licne Afcher les options de cette mme barre doutils. Cration Bascule lafchage en mode Cration. Afchage en direct Le mode Afchage en direct permet dafcher la page courante selon un rendu de navigateur. Ce mode ne remplace pas son afchage dans un navigateur, mais il aide se faire une ide rapide et plus prcise du rendu, et notamment du bon fonctionnement des lments interactifs comme les boutons survols (rollover),
29
quils soient raliss en JavaScript ou en CSS. Le mode Afchage en direct nadmet pas que lon travaille dans la fentre de cration. En outre, il autorise la modication du code, depuis la fentre Code, et une actualisation pour afcher directement le rsultat dans la fentre Cration. Lactualisation avec le bouton Actualiser nest pas toujours efcace. Dsactivez et ractivez lAfchage en direct. Lactivation du mode Afchage direct activera le mode Code en direct. Code en direct Ce mode prsente le code qui afche la page en cours. Par exemple, dans le cas du survol dune image ralis en JavaScript, le code afche rellement le changement dimage. Cela permet de trouver rapidement lorigine dun dysfonctionnement. Le code nest pas modiable en mode Code en direct. Titre Permet de saisir le titre de la page HTML. Ce renseignement est indispensable pour son rfrencement. Gestion des chiers Pour raliser diffrentes oprations sur le site distant, notamment y placer le document courant. Le paramtrage des dnitions de site doit tre correct. Aperu/Dbogage dans le navigateur Permet de choisir un navigateur parmi ceux que vous avez indiqu par le menu Edition>Prfrences>Aperu dans le navigateur. Actualiser le mode Cration (F5) Cette icne est similaire au bouton Actualiser qui apparat lorsque lon modie une page dans le code. Elle force lafchage en mode Cration. Afcher les options Ce menu local se prsente de diffrentes manires suivant le mode de travail choisi (Code, Fractionner ou Cration). Il permet dafcher les options visuelles pour ces diffrents modes. La gure 2-21 prsente lafchage en mode Fractionner, qui savre tre le plus complet. Assistances visuelles Cette icne correspond au menu Afchage>Assistances visuelles. Elle afche de nombreux assistants en mode Cration. Valider le marqueur Permet de vrier la validit du document selon la DTD choisie. Les menus de cette icne lancent la commande dexcution de vrication de la fentre Validation. Vrier la compatibilit avec les navigateurs Vrie la compatibilit du document avec les navigateurs. Les menus de cette icne lancent la commande dexcution de vrication de la fentre Vrication de la compatibilit avec les navigateurs.
La barre doutils Standard
La barre doutils Standard souvre depuis le menu Afchage>Barres doutils>Standard. Elle offre les outils classiques ddition de chier (Nouveau, Ouvrir, Parcourir dans Bridge, Enregistrer, Enregistrer tout, Imprimer le code, Couper, Copier, Coller, Annuler et Rpter).
30
Figure 2-22
La barre doutils Standard
Les diffrents modes dafchage de la fentre Document
La fentre Document safche de trois manires diffrentes en fonction du mode de travail slectionn : Le mode Code Accessible en cliquant sur le bouton Code ou via le menu Afchage>Code. Ce mode permet de travailler directement dans le code de la page. Le Mode Cration Accessible en cliquant sur le bouton Cration ou via le menu Afchage>Cration. Il permet de travailler sans crire de code et de crer facilement des textes, des tableaux ou encore des formulaires. Le mode Fractionner Accessible en cliquant sur le bouton Fractionner ou via le menu Afchage>Fractionner. Il permet dafcher simultanment les deux modes prcdents. Le mode Afchage en direct Accessible depuis la barre de document ou bien depuis le menu Afchage>Afchage en direct. Il permet de visualiser la page avec le rendu dun navigateur. Le mode Code en direct Accessible depuis la barre de document ou bien depuis le menu Afchage>Code en direct lorsque le mode Afchage en direct est actif. Il permet de visualiser le code en cours dafchage, comme, par exemple, la modication dun code lors dun vnement JavaScript ou un vnement serveur.
Le slecteur de balise
Lafchage en mode Cration ou Fractionner permet de travailler directement dans la page HTML. Il est souvent ncessaire de vrier la balise sur laquelle on travaille ou de slectionner une balise sans pour autant ouvrir le mode Code. Le slecteur de balise, situ en bas de la fentre de Cration, vous indique le nom de la balise slectionne et savre fort utile pour en slectionner facilement le contenu. La gure 2-23 reprsente le slecteur de balise.
Figure 2-23
Le slecteur de balise
Sur la gure 2-23, la dernire balise est <p>. Il sagit de la balise que nous avons slectionne en cliquant dessus. La navigation dune balise une autre dans le slecteur de
31
balise seffectue en appuyant sur les ches de direction du clavier. Ainsi, si lon appuyait sur la che gauche, cest la balise <div#contenu> qui serait slectionne et si lon appuyait sur la che droite, alors que la balise <p> serait slectionne, on placerait le curseur de la souris lextrieur de <p>.
La fentre Navigation vers le code
Licne douverture de la fentre Navigation vers le code safche lorsque le pointeur survole un lment li un style CSS ou bien dautres codes. Un clic sur cette icne ouvre la fentre Navigation vers le code. Licne apparat ou bout de deux secondes, lorsque le pointeur de la souris est plac au-dessus dun lment.
Figure 2-24
Licne douverture de la fentre Navigation vers le code
La fentre Navigation vers le code peut aussi souvrir en cliquant sur un lment tout en appuyant sur la touche Alt (Windows) ou Commande + Option (Macintosh). Lorsque la fentre est ouverte, un clic (voir repre de la gure 2-25) sur lun des lments de code permet dy accder (voir repre de la gure 2-25).
Figure 2-25
La fentre Navigation vers le code
Le panneau Insertion
Le panneau peut souvrir depuis le menu Fentre. Il propose de nombreux outils et son afchage est indispensable car il permet daccder aux commandes essentielles de Dreamweaver. Le panneau Insertion est compos de huit catgories (dtailles ci-aprs)
32
sur lesquelles vous reviendrez tout au long de cet ouvrage. Les catgories du panneau Insertion sont dynamiques. Lorsque vous choisissez une option une premire fois, elle apparat ensuite au premier plan. Le panneau Insertion peut safcher sous forme donglets ou lorsque lon choisit lenvironnement de travail Classique, par exemple, Afch sous la forme donglets. Ce panneau peut aussi prendre laspect dune autre forme de menu. Lorsque vous tes dans lenvironnement Classique, pour passer dun afchage onglet un afchage menu, cliquez sur le mot Insertion avec le bouton droit de la souris (ou Ctrl + clic sur Mac), puis slectionnez Afcher en tant que menu, ou bien, lorsque lafchage est sous forme de menus, slectionnez Afcher en tant quonglets dans le menu de la barre dinsertion. Dans la suite de cet ouvrage, nous resterons dans lenvironnement Designer.
Figure 2-26
Deux aspects du panneau Insertion
33
Le menu Commun
Ce menu regroupe les outils HTML les plus courants que nous allons dtailler en partant du haut.
Figure 2-27
Les outils du menu Commun
Hyperlien Permet de raliser un hyperlien en prcisant des options daccessibilit. Lien de messagerie Permet de crer un lien qui ouvre le logiciel de messagerie lectronique de linternaute. Ancre nomme Pour crer une ancre nomme. Cela permettra, par la suite, de crer des liens internes la page ou bien de cibler prcisment lafchage dune page. Tableau Ouvre la bote de dialogue de cration de tableaux. Insrer la balise div Ouvre une bote de dialogue pour linsertion dun lment div. Images Ouvre la bote de dialogue dinsertion dune image. Cette commande ouvre galement le sous-menu du repre de la gure 2-27. Mdias Permet lintgration dobjets multimdias. Cette commande ouvre galement le sous-menu du repre de la gure 2-27.
34
Date Pour insrer la date courante dans la page. Attention, il ne sagit pas dun script dafchage de la date. Vous pouvez cocher la case Mettre jour lors de lenregistrement pour que cette date se modie chaque modication de la page. Server-side Include Permet dinsrer un code dinclusion de script plac sur un serveur. Commentaire Insertion dun commentaire HTML dans les deux modes de travail, Code et Cration. Le code ci-dessous prsente un commentaire HTML :

En-tte Propose les diffrents lments placer dans len-tte du document. Cette commande ouvre galement le sous-menu du repre de la gure 2-27. Script Permet de lier une feuille de script au document courant. Cette commande place le lien du script lendroit o se trouve le curseur dans le code. Il est prfrable dutiliser ici le mode Code et de placer le pointeur de la souris dans la zone den-tte du document. Cette commande ouvre galement le sous-menu du repre de la gure 2-27. Modle Donne accs aux diffrents outils de cration de modles. Cette commande ouvre aussi le sous-menu du repre de la gure 2-27. Slecteur de balise Ouvre le slecteur de balise pour insrer une balise en mode Cration ou Code.
Le menu Mise en forme
Ce menu regroupe tous les lments permettant de crer la structure dune page Web. Seront disponibles ici les lments div et les lments div en position absolue, les tableaux et leurs outils de modication, les cadres, les lments frame et iframe. Vous remarquerez la prsence dune toile sur quatre des icnes de cet onglet. Ceci indique quil sagit de composants Spry qui ajoutent de nombreuses fonctionnalits aux pages. Ces quatre icnes sont galement prsentes dans longlet Spry. Voici une courte description des diffrents outils du menu Mise en forme : Standard Ce bouton est actif uniquement en mode Cration. Lafchage des tableaux seffectue normalement. Dvelopp Ce bouton est actif uniquement en mode Cration. Il permet dafcher le contour des cellules des tableaux et de visualiser un tableau dont les contours sont rduits zro. Ce mode de travail nest pas recommand car on ne peut pas visualiser rellement la mise en forme du tableau. Insrer la balise div Ouvre une bote de dialogue pour insrer un lment div. Cette icne est la mme que celle du menu Commun. Tracer un div pour un lment PA Permet de dessiner les lments en mode Cration. Cette icne correspond la cration de calques dans les versions prcdentes de Dreamweaver.
35
Figure 2-28
Les outils du menu Mise en forme
Barre de menus Spry Insre un composant Spry pour crer une barre de menus. Panneaux onglet Spry Insre un composant Spry an de crer un panneau onglets. Accordon Spry Insre un composant Spry pour crer un ensemble de panneaux rtractables. Panneau rductible Spry Insre un composant Spry pour crer un panneau rtractable. Tableau Ouvre la bote de dialogue de cration de tableaux. Cette icne est la mme que celle du menu Commun. Insrer une ligne au-dessus/Insrer une ligne en dessous/Insrer une colonne gauche/ Insrer une colonne droite Pour ajouter une ligne au tableau la position prcise. IFRAME Pour la cration de cadres incorpors. Les cadres incorpors afchent, dans une partie de la page, des documents extrieurs lis. Cette icne ouvre la zone Code de la fentre Document. Vous devez y spcier le lien vers le chier externe. Cadres Ce menu local permet de transformer une page simple en une page divise. De nombreuses possibilits de mise en page sont offertes par ces diffrentes options.
36
Le menu Formulaires
Ce menu regroupe tous les outils ncessaires la ralisation de formulaires. Suivant les prfrences choisies dans Dreamweaver, la majorit de ces boutons ouvre une bote de dialogue o lon peut crire les attributs daccessibilit.
Figure 2-29
Les outils du menu Formulaires
37
Voici une courte description des diffrents outils du menu Formulaires : Formulaire Cre un conteneur de formulaire. Champ de texte Insre un champ de texte. Champ masqu Insre un champ de texte invisible. Zone de texte Insre une zone de texte. Case cocher Insre un lment case cocher. Groupe de case cocher Ouvre une bote de dialogue permettant linsertion de plusieurs cases cocher, formant un groupe. Bouton radio Insre un bouton radio seul. Groupe de boutons radio Ouvre une bote de dialogue pour insrer des boutons radio groups. Les boutons groups nautorisent quun seul choix parmi plusieurs propositions. Liste/Menu Cre des listes ou des menus de choix. Menu de reroutage Ouvre la bote de dialogue de cration dun menu de reroutage. Champ dimage Insre un bouton reprsent par une image que vous choisirez sur votre poste de travail. Champ de chier Insre un champ de texte et un bouton Parcourir permettant linternaute de choisir un chier sur son poste de travail. Cet lment ne saccompagne pas du script de gestion du chier. Bouton Insre un bouton pour envoyer ou effacer le formulaire en cours. Etiquette Insre une balise dtiquette <label>. Cet outil sutilise de deux manires : si vous cliquez simplement dessus, le mode Code souvrira, alors que si vous cliquez dessus en ayant au pralable slectionn un lment de formulaire, une tiquette sera ajoute cet lment. Ensemble de champs Regroupe des champs et ainsi de crer des zones plus lisibles pour lutilisateur. Ce bouton gnre la balise <fieldset>. Validation Spry de champ texte Cre un champ de texte, similaire au champ de texte courant, avec un script de vrication des types de donnes crites par lutilisateur. Validation Spry de zone de texte Cration dune zone de texte, similaire une zone de texte courante, avec un script de vrication des types de donnes crites par lutilisateur. Validation Spry de case cocher Permet de crer une ou plusieurs cases cocher, similaires aux cases cocher courantes, ceci avec un script de vrication pour le nombre de cases que lutilisateur doit cocher. Validation Spry de slection Pour crer une liste ou un menu de choix, similaires aux listes ou aux menus courants, avec un script de vrication. Ce script Spry ne vrie pas les listes slection multiple.
38
Validation Spry de mot de passe Insre un champ de type mot de passe. Le texte crit par dinternaute est ainsi masqu, il scrit avec des petits points. Ce Spry mot de passe possde de nombreuses options de vrication. Validation Spry de conrmation Permet la vrication du mot de passe crit dans le champ Spry de mot de passe. Validation Spry de groupe de bouton Insre un groupe de bouton radio. Ce Spry permettra, par exemple de spcier un nombre minimum de cases devant tre coches.
Le menu Donnes
Le menu Donnes de la barre du panneau Insertion vise la cration de sites dynamiques.
Figure 2-30
Les outils du menu Donnes
39
Voici une courte description des diffrents outils du menu Donnes : Importer les donnes tabulaires Permet dimporter dans une page des donnes issues dun document Excel ou directement dune base de donnes. Ensemble de donnes Spry Permet de lier un chier XML ou HTML une page Web an den exploiter les donnes. Les lments de donnes seront ensuite disponibles dans le panneau Liaisons (pour dcouvrir des applications Spry utilisant cette fonctionnalit, reportez-vous au chapitre 21). Rgion Spry Une rgion Spry doit tre cre avant dajouter un lment de donnes Spry dans la page (pour dcouvrir des applications Spry utilisant cette fonctionnalit, reportez-vous au chapitre 22). Rptition Spry Permet de rpter des lments de donnes Spry (pour dcouvrir des applications Spry utilisant cette fonctionnalit, reportez-vous au chapitre 21). Liste de rptition Spry Permet dafcher des lments de donnes Spry dans une liste ordonne, puces ou droulante (pour dcouvrir des applications Spry utilisant cette fonctionnalit, reportez-vous au chapitre 21). Jeu denregistrements Permet de crer un jeu denregistrements issu dune base de donnes. Les lments dynamiques ainsi crs seront ensuite disponibles depuis le panneau Liaisons (pour dcouvrir des applications PHP utilisant cette fonctionnalit, reportez-vous au chapitre 20). Procdure stocke Permet de crer une requte SQL de base de donnes rutilisable. Cette fonctionnalit nest disponible que si vous utilisez des technologies serveur ASP ou JSP. Donnes dynamiques Permet dinsrer diffrents types dlments HTML dynamiques (exploitant des donnes issues dune base de donnes). Il est ainsi possible de crer des lments dynamiques, tels que des tableaux, des textes, des champs de texte, des cases cocher, des groupes de boutons radio ou encore des listes de slection (pour dcouvrir des applications PHP utilisant cette fonctionnalit, reportez-vous au chapitre 20). Rgion rpte Permet de rpter automatiquement un lment de la page (ou une partie de celui-ci) en se rfrant un jeu denregistrements disponible dans le panneau Liaisons (pour dcouvrir des applications PHP utilisant cette fonctionnalit, reportezvous au chapitre 20). Afcher la rgion Permet de conditionner lafchage dune rgion particulire de la page. La condition peut tester si un jeu denregistrements est vide ou non ou sil sagit de la premire ou dernire page dans le cas dun afchage de donnes pagin (pour dcouvrir des applications PHP utilisant cette fonctionnalit, reportez-vous au chapitre 20).
40
Pagination du jeu denregistrements Permet dinsrer une barre de navigation pour un jeu denregistrements (pagination des donnes) ou un de ses lments (pour dcouvrir des applications PHP utilisant cette fonctionnalit, reportez-vous au chapitre 20). Aller la page dinformations dtailles Permet douvrir une page associe en lui transmettant des paramtres existants. Cette fonctionnalit nest disponible que si vous utilisez des technologies serveur ASP ou JSP. Afcher le nombre denregistrements Permet daccder un menu droulant an dinsrer une barre dtat de navigation pour afcher la pagination (texte dynamique qui indique les numros denregistrements afchs). Ensemble des pages Principale-Dtails Permet de crer rapidement une structure de pages comprenant une page principale (afchant en gnral une liste des enregistrements) lie une page de dtails correspondant lenregistrement slectionn (pour dcouvrir des applications PHP utilisant cette fonctionnalit, reportez-vous au chapitre 20). Insrer un enregistrement Permet de crer une page dinsertion dun enregistrement dans une base de donnes. Pour cela, il est possible dutiliser un assistant qui prendra en charge la cration du formulaire ou un simple comportement qui ncessitera davoir cr le formulaire au pralable (pour dcouvrir des applications PHP utilisant cette fonctionnalit, reportez-vous au chapitre 20). Mettre jour lenregistrement Permet de crer une page de mise jour dun enregistrement dans une base de donnes. Pour cela, il est possible dutiliser un assistant qui prendra en charge la cration du formulaire ou un simple comportement qui ncessitera davoir cr le formulaire au pralable (pour dcouvrir des applications PHP utilisant cette fonctionnalit, reportez-vous au chapitre 20). Supprimer lenregistrement Permet de crer un systme de suppression dun enregistrement dans la base de donnes (pour dcouvrir des applications PHP utilisant cette fonctionnalit, reportez-vous au chapitre 20). Authentication de lutilisateur Permet de crer les diffrentes fonctionnalits qui permettront de mettre en uvre un systme complet dauthentication dun utilisateur par login et mot de passe (pour dcouvrir des applications PHP utilisant cette fonctionnalit, reportez-vous au chapitre 20). Transformation XSL Permet de crer un programme de transformation des donnes issues dun document XML.
Le menu Spry
Ce menu regroupe tous les widgets Spry proposs dans Dreamweaver CS4. Vous retrouverez ici les mmes widgets que dans les menus Mise en forme, Formulaires et Donnes. Reportez-vous aux dnitions de ces diffrentes catgories.
41
Figure 2-31
Les menu du panneau Spry
Le menu InContext Editing
InContext Editing est un service (gratuit pour le moment) qui permet de modier certaines parties de page dun site Internet, sans connaissances particulires du HTML ou des CSS. Linternaute se connecte sur le site InContext Editing, entre un identiant et un mot de passe, puis se connecte sur son site qui est rfrenc InContext Editing. Il peut alors modier les rgions des pages qui ont ts conues avec les diffrents outils InContext Editing dans Dreamweaver CS4.
Figure 2-32
Les outils du menu InContext Editing
42
Voici une courte description des diffrents outils du menu InContext Editing : Crer une rgion rpte Permet de crer une rgion rpter. Crer une rgion modiable Permet de crer une rgion modiable. Grer les classes CSS disponibles Permet de rendre disponibles des classes de proprits CSS pour la modication des rgions modiables.
Le menu Texte
Ce menu regroupe les outils permettant dorganiser la structure des textes.
Figure 2-33
Les outils du menu Texte
Voici une courte description des diffrents outils du menu Texte : Les quatre premires icnes permettent, de gauche droite, de mettre le texte slectionn en gras, en italique, de lui appliquer une forte accentuation ou une accentuation.
43
Paragraphe Permet de crer ou de transformer une slection en paragraphe. Citation de paragraphe Permet de crer ou de transformer une slection en citation. Texte pr-format Permet de crer un paragraphe pr-format qui conservera les espaces, tabulations et sauts de ligne inclus dans le texte (voir chapitre 8). En-tte 1, En-tte 2, En-tte 3 Permettent de crer ou de transformer une slection en niveaux de titre. Liste non ordonne et Liste numrote Permettent respectivement de crer des listes non ordonnes et ordonnes. Elment de liste Cre ou transforme une slection en lment de liste. Liste des dnitions, Terme de dnition et Description de dnition Permettent de crer une liste de dnitions. Abrviation Ouvre une bote de dialogue permettant dentrer une forme complte du mot slectionn. Cet outil sutilise avec les mots abrgs. Icne Acronyme Ouvre une bote de dialogue permettant dentrer une forme complte du mot slectionn. Cet outil sutilise avec les mots crits sous forme dacronymes. Caractres Ouvre un sous-menu pour linsertion de caractres particuliers (euros, yen, guillemets, copyright).
Diffrence entre un mot abrg et un acronyme Un mot abrg est un mot qui nest pas crit compltement ou qui est crit au moyen de quelques lettres, par exemple px pour pixel ou ppp pour point par pouce . Un acronyme est un mot abrg qui peut se prononcer, par exemple Ajax pour Asynchronous JavaScript and XML .
Le menu Favoris
Ce menu est vide par dfaut car cest vous qui le remplirez par la suite en y ajoutant les outils dont vous vous servez le plus. Il est vivement conseill, aprs la prise en main du logiciel, de placer ici les objets de mise en page que vous utilisez frquemment. Voici la marche suivre pour ajouter un outil dans le menu Favoris. 1. Cliquez sur licne de loutil souhait avec le bouton droit de la souris ou slectionnezle via le menu Insertion>Personnaliser les favoris. 2. Dans la bote de dialogue qui souvre, gauche, slectionnez les outils disponibles et dplacez-les droite laide du bouton reprsentant deux chevrons (>>), situ entre les deux cadres de la bote de dialogue. 3. Pour supprimer un lment des Favoris, slectionnez-le dans le cadre Objets favoris, puis cliquez sur licne reprsentant une corbeille situe au-dessus du cadre.
44
Figure 2-34
La bote de dialogue pour personnaliser les objets favoris
Les prfrences pour les nouveaux documents

Les prfrences de nouveaux documents permettent dobtenir automatiquement des documents de base homognes. Pour accder ces prfrences, slectionnez le menu Edition>Prfrences (ou Dreamweaver>Prfrences sur Mac) et cliquez sur la catgorie Nouveau document, situe gauche de la fentre Prfrences. Depuis cette fentre, vous pourrez choisir le type de document par dfaut (document HTML ou tout autre format reconnu par Dreamweaver), ainsi que son extension. Pour de nombreux types de documents, ce champ ne sera pas modiable. Dans le cas dun document HTML, vous pourrez choisir entre lextension .html ou .htm. Spciez la DTD (Dnition de Type de Document) des nouveau documents. Pour les documents HTML, ce choix est trs important car il dtermine le langage et la grammaire utilise. Consultez la section suivante pour dterminer la meilleure DTD en fonction de vos documents. Le codage par dfaut du document est aussi un choix dterminant pour la parfaite compatibilit de la page sur les diffrentes plateformes et navigateurs. Le choix du codage permet de spcier au navigateur les caractres utiliss dans la page. Ainsi, le codage Japonais (dcalage JIS) permettra lafchage des caractres japonais, moyennant le tlchargement dun module linguistique. La page sera ainsi parfaitement lisible. Si le codage nest pas indiqu, un navigateur en langue franaise afchera de nombreux points dinterrogations la place des caractres japonais. Le codage le plus courant pour un document crit en langue franaise est Unicode (UTF-8). Ce codage par dfaut tant trs universel (au moins pour les langues occidentales), vous pouvez lutiliser pour louverture de page ne spciant aucun codage. Un autre codage peut nanmoins tre utilis cest le codage Europe de louest. Si vous le choisissez, Dreamweaver transformera tous les accents et autres caractres particuliers en entits HTML. Le code ci-dessous montre un texte crit avec des entits html remplaant les caractres accentus.
Un été à la montagne
45
Les formulaires de normalisation, spciques au format Unicode, permettent dafner davantage lencodage des caractres. En effet, le caractre peut tre crit au moyen dun unique codage de lettre : la lettre ou par la combinaison des caractres a et ^. Le formulaire de normalisation permet dcrire tous les caractres dune mme page de manire identique. Choisissez les types Aucun ou C (Dcomposition canonique suivie dune composition canonique) car ce sont les plus couramment utiliss pour les pages Web. La signature Unicode (BOM) reprsente lordre de codage des caractres, BOM signiant Bytes Order Mark. Cette signature nest pas toujours prise en compte, notamment lors de lutilisation du langage PHP. Dcochez cette option car elle pose trs souvent des problmes dafchage de caractres.
Choisir la DTD
La DTD, cest--dire la dnition ou dclaration de type de document, dnit la structure dun document. Pour un document HTML, il sagit de son dictionnaire et de sa grammaire. La DTD dnit les lments (balises) et les attributs autoriss, et donc ce que le navigateur est en droit dattendre. Pour une mme DTD, les diffrents navigateurs devraient idalement se comporter de manire identique, mais cela nest malheureusement pas encore le cas aujourdhui. Quoiquil en soit, vous devez spcier une DTD pour vos documents. La DTD est un document plac sur le Web auquel les pages font rfrence. Une DTD peut tre cre pour une utilisation spcique, cest le cas lorsque lon travaille avec des chiers XML. Lorsque vous travaillez avec des pages HTML, les DTD sont dj cres et vous devez simplement y faire rfrence. Elles sont places sur le site du W3C et vous devrez choisir la DTD qui conviendra le mieux vos pages. Dans une page HTML, le lien vers la DTD se prsente de la manire suivante :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
La liste droulante situe droite de loption Type de document par dfaut (DTD) propose plusieurs DTD. La prfrence pour telle ou telle DTD dpendra dune part dun souci de compatibilit entre les navigateurs et de bonne tenue dans le temps, et dautre part dun souci de lisibilit de votre code. Lutilisation dune DTD particulire vous autorisera ou vous interdira certaines critures. Le choix dune DTD, et son respect, dpendra uniquement des contraintes que vous vous imposez. Voici la liste des DTD proposes dans Dreamweaver avec leurs principales caractristiques : HTML 4.01 transitionnel Cette DTD autorise tous les lments prsents dans les spcications du langage HTML. HTML 4.01 Strict Cest la DTD du langage HTML avec quelques restrictions supplmentaires.
46
XHTML 1.0 transitionnel Cette DTD possde pratiquement les mmes caractristiques que le HTML 4.01 transitionnel ceci prs quelle doit respecter la syntaxe grammaticale du XHTML. XHTML 1.0 Strict Cest la DTD la plus courante aujourdhui, avec la DTD XHTML 1.0 transitionnel. Choisissez-la par dfaut et modiez ventuellement les pages qui ne peuvent pas la respecter. XHTML 1.1 Cette DTD est encore peu utilise aujourdhui car de nombreux navigateurs (dont IE 6) nen reconnaissent pas certaines caractristiques (les pages du W3C sont encore en XHTML 1.0 Strict). XHTML Mobile 1.0 Cette DTD est spcique aux tlphones mobiles. XHTML 1.0 Frameset Cette DTD est utilise pour le document de dnition de cadres. Dreamweaver la propose automatiquement lors de la cration dun jeu de cadre.
Congurer Dreamweaver pour la DTD XHTML 1.0 Strict
Pour ceux qui le souhaitent, voici une liste dactions entreprendre dans les diffrentes catgories des prfrences pour se conformer aux recommandations de la DTD XHTML 1.0 Strict. De nombreuses options sont dj actives par dfaut et il nest pas ncessaire de les dsactiver si cela nest pas prcis. Dans la catgorie Gnral, cochez les prfrences suivantes : Utiliser <strong> et <em> au lieu de <b> et <i> ; Centrage Utiliser une balise <div>. Cette option nest apparemment plus utilise par Dreamweaver CS4. La palette des proprits nayant plus doption de centrage HTML. Dans la catgorie Correction du code, choisissez les prfrences suivantes : Corriger le code Corriger les balises incorrectement imbriques et non fermes et Renommer les lments de formulaire lors du collage ; Caractres spciaux Coder <, >, & et " dans les valeurs dattributs laide de & ; Codage URL Ne pas coder les caractres spciaux ; Dans la catgorie Format de code, choisissez les prfrences suivantes : Casse de balise par dfaut <minuscules> ; Casse dattribut par dfaut minuscules="valeur" ; Remplacer la casse de, cochez les deux options. Dans la catgorie Nouveau document, choisissez les prfrences suivantes : Document par dfaut HTML ; Extension par dfaut .html ;
47
Type de document par dfaut (DTD) XHTML 1.0 Strict ; Codage par dfaut Unicode (UTF-8) ; Cochez la case Utiliser louverture de chiers ne spciant pas de codage ; Formulaire de normalisation Unicode C ; Dcochez la case Inclure une signature Unicode (BOM). Dans la catgorie Programme de validation, cochez la case XHTML 1.0 Strict.
Saisir du texte et le mettre en forme

Vous allez prsent apprendre crer un premier document contenant du texte. Dreamweaver tant un diteur avanc, il possde de nombreuses fonctionnalits permettant de grer des ux de production importants. Vous verrez tout dabord comment saisir et insrer du texte par copier-coller, puis vous mettrez ce texte en forme grce la palette des proprits. Dreamweaver permet de saisir du texte de plusieurs manires diffrentes. En effet, vous pouvez le rdiger directement dans la page ou utiliser la technique du copier-coller depuis un autre document Dreamweaver ou depuis un chier ouvert dans un logiciel de traitement de texte.
Copier-coller un texte depuis une autre application

Voici la marche suivre pour copier-coller un texte depuis un document ouvert dans une autre application : 1. Ouvrez le document dans son application dorigine. 2. Slectionnez le texte, puis copiez-le via le menu Edition>Copier ou le raccourci clavier Ctrl + C (Cmd + C sur Mac). 3. Ouvrez un nouveau document HTML dans Dreamweaver ou un document existant. 4. Placez le pointeur de la souris lendroit o vous souhaitez insrer le texte prcdemment copi. 5. Collez le texte via le menu Edition>Coller ou le raccourci clavier Ctrl + V (Cmd + V sur Mac). Le format de chier texte le plus correct pour raliser un copier coller de texte vers Dreamweaver est le format .txt.
Utilisation avec OpenOfce Le copier-coller depuis lapplication OpenOfce Writer insre du code html impropre. Il ajoute des balises Doctype, html et body qui sont inutiles. Nutilisez pas cette mthode depuis cette application.
48
Ouvrir un document texte dans Dreamweaver

Une solution trs simple consiste enregistrer tous les documents texte au format .txt. Tous les logiciels, de traitement de texte propose ce format. Depuis Dreamweaver, choisissez alors le menu Fichier>Ouvrir et ouvrez le document texte. Vous pouvez copier ce texte et le coller dans une page HTML ouverte dans Dreamweaver en mode Cration.
Copier-coller un texte dun document Dreamweaver dans un autre

Voici la marche suivre pour copier-coller un texte issu dun document Dreamweaver dans un autre document Dreamweaver : 1. En mode Cration, slectionnez une portion de texte dj format. 2. Copiez le texte via le menu Edition>Copier ou le raccourci clavier Ctrl + C (Cmd + C sur Mac). 3. Ouvrez un nouveau document ou un document existant et placez le curseur de la souris lendroit o vous souhaitez coller le texte prcdemment slectionn. 4. Collez le texte via le menu Edition>Collage spcial... ou le raccourci clavier Ctrl + Maj + V (Cmd + Maj + V sur Mac). La bote de dialogue de la gure 2-35 apparat.
Figure 2-35
La bote de dialogue Collage spcial
Celle-ci permet de choisir le mode de collage : Texte seul Colle le texte sans aucun formatage. Texte structur (paragraphes, listes, tableaux, etc.) Colle le texte et sa structure, cest--dire les balises HTML, telles que <p>, <div> ou <br />.
49
Texte structur avec formatage de base (gras, italique) Colle le texte et sa structure, ainsi que les balises <b>, <strong> ou <i>. Texte structur avec formatage complet (gras, italique, styles) Colle tout le code HTML copi. Attention, le formatage complet ne prend pas en compte les feuilles de style externes.
Copier du code et coller du texte format

Voici la marche suivre pour copier du code et coller du texte format dans un document Dreamweaver : 1. En mode Code, slectionnez le texte souhait et copiez-le (Ctrl + C, Cmd + C sur Mac). 2. Placez le curseur lendroit de la page o vous souhaitez coller le texte. 3. Collez le texte (Ctrl + V, Cmd + V sur Mac ). 4. Cliquez sur le bouton Actualiser situ dans le panneau Proprits en bas de lcran. En mode Cration, le texte apparat dj format.
Figure 2-36
Actualisation de la fentre de cration lorsque lon travaille en mode Code.
Copier-coller du code
Voici la marche suivre pour copier-coller du code dans un document Dreamweaver : 1. Afcher le document Dreamweaver en mode Code via le menu Afchage>Code ou Afchage>Code et cration. 2. Slectionnez le code souhait et copiez-le (Ctrl + C, Cmd + C sur Mac). 3. Passez en mode Cration via le menu Afchage>Cration ou en cliquant sur le bouton Cration. 4. Collez le code (Ctrl + V, Cmd + V sur Mac) prcdemment copi lendroit souhait. 5. Dans la page, tout le code apparat et Dreamweaver se charge du codage des caractres spciaux (< et >). Vous avez ainsi coll les balises HTML dans votre page.
50
Mettre en forme du texte avec le panneau Proprits

Le panneau Proprits permet de mettre en forme un texte slectionn. Voici la marche suivre : 1. Slectionnez le texte formater. 2. Appliquez-lui le formatage souhait grce au panneau Proprits. 3. Cliquez en dehors du panneau Proprits ou appuyez sur la touche Entre pour valider vos choix.
Le panneau des proprits des textes
La gure 2-37 montre le panneau des proprits tel quil se prsente pour formater les textes avec des balises HTML. Laspect et lutilisation de ce panneau ont beaucoup chang par rapport aux versions prcdentes de Dreamweaver. Les outils de ce panneau sont maintenant parfaitement utiles et fonctionnels pour raliser des pages aux standards XHTML 1.0 Strict. Dans ce chapitre, nous abordons les outils de la catgorie HTML. Consultez le chapitre 8 pour la partie CSS. Sur la gauche de ce panneau, au niveau du repre de la gure 2-37, sont placs deux boutons HTML et CSS. Ils permettent dafcher les outils du panneau pour travailler sur les balises HTML ou bien pour crer des styles CSS. Voici une description des diffrents outils avec leur usage courant.
Figure 2-37
Le panneau des proprits des textes
Format Permet de slectionner le format appliquer au texte slectionn. Les diffrents formats proposs gnrent tous des balises de type bloc (voir chapitre 8). Le format Paragraphe permet dinsrer le texte dans un paragraphe de type <p></p>. Ce formatage vous permettra de lisoler physiquement dun autre bloc de texte. Vous pouvez galement gnrer des sauts de paragraphe en appuyant sur la touche Entre de votre clavier avant, aprs ou entre deux textes. Les formats En-tte 1 En-tte 6 permettent de transformer un paragraphe ou bloc de texte continu (pas simplement la slection) en un titre de niveau 1 6. Les balises gnres sont <h1> <h6>. Le format Pr-format introduit llment <pre> et permet de conserver la saisie des espaces de la ligne. Cette option est afche dans une police espacement xe.
51
Pour utiliser ce format Pr-format, dans le mode Cration, vous devez modier les prfrences par dfaut de Dreamweaver. Choisissez Prfrences > Gnral et cochez la case Autoriser plusieurs espaces conscutifs. Crez ensuite un nouveau document qui intgrera ces modications. Dans cette page, avant de crer le texte pr-format, choisissez loption Pr-format depuis le menu format. Vous pourrez ainsi crire des textes, des mots ou des lettres avec plusieurs espaces ou tabulations. ID Permet dattribuer un identiant une balise. La marche suivre est la suivante. Cliquez dans le texte contenu dans la balise que vous souhaitez nommer. Slectionnez lensemble de la balise en cliquant sur celle-ci dans le slecteur de balise. crivez ensuite le nom de lidentiant dans la zone ID. Classe Permet dattribuer une classe dj cre ou bien dajouter une feuille de style externe. Les balises de formatage Ces deux boutons fonctionnent comme des interrupteurs. Un clic sur lun deux formate le texte avec la balise choisie, un autre clic supprime le format. Pour les utiliser, slectionner la portion de texte ou bien le mot cliquez sur lun des boutons. Dreamweaver ajoute alors, dans le texte, la balise correspondante votre choix. Nhsitez pas les utiliser pour renforcer certain mot. Le bouton B entoure le mot ou le groupe de mot avec la balise <strong></strong>, le bouton I entoure avec la balise <em></em>. Liste simple Permet de crer une liste dite simple ( puce). Pour cela, rdigez tout dabord votre texte, soit les lments de la future liste, en les sparant dun saut de paragraphe (appuyez sur la touche Entre entre chaque lment de la liste). Slectionnez ensuite toutes les lignes inclure dans la liste et cliquez sur licne pour convertir la slection en liste. Liste numros Permet de crer une liste numrote par ordre croissant. La procdure est la mme que pour la cration dune liste simple. Vous pouvez imbriquer les listes autant que vous le souhaitez. Retrait du texte Permet de crer une marge gauche du bloc actif. Ce bouton insre la balise <blockquote></blockquote>. Vous pouvez modier cette marge laide dune feuille de style pour la balise <blockquote>. Retrait ngatif du texte Permet de soustraire le retrait effectu sur un bloc. Cette option ne peut tre applique que si loption Retrait du texte a pralablement t active. Lien Permet de crer un lien sur la portion de texte slectionn (voir chapitre 4). Titre crivez un texte dans cette zone se rapportant laction du lien. Linternaute qui approchera le pointeur de la souris sur le lien comportant cet attribut en aura une description plus prcise dans une info bulle. Cet attribut est galement utile pour les utilisateurs de navigateur non graphique Cible Permet de choisir une zone dun systme de frames (voir chapitre 6). Cette option nest pas compatible XHTML 1.0 Strict.
52
Proprits de la page Permet daccder aux proprits de la page en cours (voir les Proprits de la page dans ce mme chapitre).
Aperu dans un navigateur

Lorsque vous ralisez une page dans Dreamweaver, celui-ci gnre du code HTML et des styles CSS, visibles en mode Code, Fractionner ou en Afchage en direct. Linternaute visionnera cette page avec Internet Explorer, Firefox, Safari, Opera ou tout autre navigateur. Il existe souvent des diffrences dinterprtation du code selon le navigateur utilis, sa version et la plateforme sur laquelle il est install. Le concepteur du site doit donc sassurer de la compatibilit de ses pages avec les principaux navigateurs dans leurs versions les plus courantes. Cest pourquoi Dreamweaver offre la possibilit de vrier facilement le bon afchage des pages dans les diffrents navigateurs. Avant de congurer Dreamweaver pour quil ouvre tel ou tel navigateur, vous devez au pralable installer ces diffrents navigateurs sur votre ordinateur. Une fois cela fait, cliquez sur la catgorie Aperu dans le navigateur de la fentre Prfrences (menu Edition>Prfrences). La gure 2-38 prsente les options de la catgorie Aperu dans le navigateur.
Figure 2-38
Les options de la catgorie Aperu dans le navigateur
53
Cliquez sur le bouton + situ en haut de la fentre et droite de Navigateurs pour ajouter un nouveau navigateur. Dans la fentre qui souvre, donnez-lui un nom et cliquez sur le bouton Parcourir pour dterminer son emplacement. Dterminez ventuellement ce navigateur comme navigateur principal, il souvrira en appuyant sur la touche F12 du clavier, ou comme navigateur secondaire, il souvrira alors en appuyant sur la combinaison de touches Ctrl + F12 (Cmd + F12 sur Mac). Les autres navigateurs seront accessibles depuis la barre doutils Document de la fentre Document (voir la section La fentre Document , dans ce chapitre).
Conclusion
Dreamweaver est un logiciel simple et efcace si vous respectez bien quelques rgles dorganisation avant de commencer votre travail et lors de la cration dune nouvelle page ou dun nouveau site. Nomettez pas de placer vos lments prts lintgration dans un rpertoire prvu cet usage et noubliez pas de dnir un nouveau site dans Dreamweaver. Lors de la cration dune nouvelle page, choisissez avec soin le DOCTYPE et lencodage des textes. Dnissez ensuite ses prfrences en utilisant les proprits de la page dans la palette Proprits. Enregistrez vos pages et testez-les souvent, dans diffrents navigateurs. Dreamweaver CS4 facilite lusage de la palette des proprits en par lajout de balise lintrieur mme du code.
3
Insrer et traiter les images dans Dreamweaver
Tous les mdias prsentent des images et le Web ne droge pas la rgle. Depuis sa premire version, Dreamweaver permet une intgration simple des images et les versions rcentes du logiciel se sont dotes doutils de plus en plus performants pour modier et optimiser les images. Avec la version CS4, lintgration se ralise encore plus facilement, par simple copier-coller depuis le logiciel Adobe Photoshop. Une nouveaut dans cette version CS4 permet lintgration dun document au format psd qui sera li au document dorigine. Une modication dans Photoshop se rpercutera automatiquement dans la page HTML. Dans ce chapitre, vous aborderez les points suivants : insrer une image dj enregistre ; insrer une image depuis Adobe Photoshop ; insrer une image dynamique ; modier les proprits dune image ; diter une image ; optimiser une image ; recadrer une image depuis Dreamweaver ; modier la luminosit, le contraste et la nettet dune image ; rchantillonner une image.
56
Insrer une image

Un document dans lequel on insre une image ne contient pas physiquement cette image. Dreamweaver, et par la suite le navigateur Internet, ne fait que reprsenter limage qui est physiquement stocke indpendamment du document lui-mme. Cette dernire est gnralement place dans un dossier images pralablement cr (voir chapitre 2). La mthode dinsertion dune image est trs simple. Il suft, en effet, de cliquer dans un document lendroit o vous souhaitez linsrer, en mode Cration, puis de slectionner le menu Insertion>Image. Vous pouvez galement cliquer sur licne Images, reprsente par un arbre, de la catgorie Commun du panneau Insertion et slectionner Image dans le menu contextuel qui safche. Une fentre souvre alors, vous invitant choisir le chier image. Aprs validation, limage est insre lendroit slectionn pralablement. Notez que vous ne pourrez pas choisir prcisment la position de limage : dans un document vierge, elle se placera toujours en haut et gauche du document. En pratique, si vous avez choisi de travailler avec un DOCTYPE XHTML 1.0 Strict, vous devrez toujours placer vos images dans un bloc. Pour plus de renseignements sur les lments, les types et les spcications XHTML 1.0 Strict/CSS, reportez-vous au chapitre 8. Voici les diffrentes tapes suivre pas pas pour insrer une image. 1. Crez un nouveau document. 2. Enregistrez ce document. Cela permettra Dreamweaver de reprer sa place dans larborescence du site et ainsi de crer un chemin correct pour limage que vous allez insrer. 3. Cliquez dans le document ou appuyez sur la touche Entre pour revenir la ligne. Cette action permet de crer, dans la page, une balise <p> de type bloc. Cliquez ensuite sur licne Images de la catgorie Commun du panneau Insertion. La fentre de la gure 3-1 souvre pour vous permettre de choisir limage. 4. Cochez loption Systme de chiers (propose par dfaut). 5. Naviguez lintrieur de larborescence de votre site et slectionnez une image. Attention, celles-ci doivent imprativement tre places dans votre site an que Dreamweaver puisse crer correctement le chemin liant votre page votre image. Dans le cas contraire, lorsque vous validerez, un message dalerte vous demandera de copier limage dans votre site ; acceptez. 6. Si loption Prvisualiser les images, situe en bas de la fentre, est coche, un aperu de limage slectionne safchera droite de la fentre, avec ses proprits (dimensions, format denregistrement, poids et temps de tlchargement). 7. Cliquez sur OK pour valider le choix de limage.
Insrer et traiter les images dans Dreamweaver CHAPITRE 3
57
Figure 3-1
Slection de la source de limage
8. La bote de dialogue Attributs daccessibilit des balises dimage souvre alors (gure 3-2). Renseignez le champ nomm Texte secondaire car cest lui qui fournira une description de limage dans les navigateurs ne les afchant pas. Il offrira une meilleure accessibilit de ce contenu aux personnes malvoyantes. Le champ Description longue permet de spcier lURL dun document contenant une description complte de limage. Les navigateurs actuels nintgrent pas cette fonctionnalit.
Figure 3-2
Les attributs daccessibilit des balises dimage
58
Insrer une image depuis Adobe Photoshop

La version CS4 de Dreamweaver offre une meilleure souplesse avec le logiciel Adobe Photoshop. Il est dsormais possible de copier un ou plusieurs calques de Photoshop pour les insrer dans Dreamweaver, ou bien de choisir un chier au format .psd et de lintgrer directement dans la page HTML, aprs avoir prcis son format denregistrement dans la fentre doptimisation des images. Le document ainsi intgr sera reli dynamiquement au document psd. Son dition ouvrira le chier Photoshop original.
Copier-coller depuis Adobe Photoshop

1. Ouvrez votre image dans Photoshop. Si votre document comporte des calques, afchez/masquez les calques copier. Sur la gure 3-3, les calques nomms titre 2 et bandeau sont masqus. Ils napparatront donc pas sur limage nale. Vous allez prsent copier tous les calques visibles de limage.
Figure 3-3
Les calques copier depuis Adobe Photoshop
2. Toujours dans Photoshop, cliquez sur lun des calques visibles pour le rendre actif. Cette action est trs importante car il est impossible de copier une srie de calques si le calque actif est masqu. 3. Depuis le menu Edition, choisissez Copier avec fusion. Cette action permet de copier le contenu de plusieurs calques.
59
4. Dans Dreamweaver, activez le document dans lequel vous souhaitez coller le(s) calque(s). 5. Placez le curseur de la souris lendroit o limage doit tre insre. 6. Collez limage via le menu Edition>Coller ou le raccourci clavier Ctrl + V. La fentre Aperu de limage souvre, vous permettant de choisir un format denregistrement de cette image. Aprs validation, Dreamweaver vous invite enregistrer limage dans le dossier des images du site. Aprs lenregistrement du chier, limage apparat dans le document.
Insrer une image PSD

La version CS4 de Dreamweaver permet dinsrer des documents au format psd dans une page HTML. Au moment de lintgration, Dreamweaver cre un chier au format que vous aurez choisi dans la fentre Aperu de limage. Il insre cette image dans le document HTML et cre un lien vers le chier Photoshop (.psd) original. Cela cre ainsi un objet dynamique qui peut tre dit sans crainte de perte de qualit puisque cest le document psd qui souvrira. 1. Cliquez sur licne Images de la catgorie Commun du panneau Insertion ou choisissez le menu Insertion>Image. 2. Dans la fentre de slection de limage, slectionnez le document .psd insrer. 3. La fentre Aperu de limage souvre. Choisissez le format denregistrement souhait. Aprs validation, Dreamweaver vous invite enregistrer limage dans le dossier des images du site. Enregistrez limage en prenant bien soin dajouter lextension du format du chier car cette bote de dialogue ne la propose pas par dfaut. 4. Lorsque la fentre daccessibilit souvre, renseignez au moins le champ Texte secondaire. 5. Aprs lenregistrement du chier, limage apparat dans le document. Elle est dote dune icne de double che place en haut et gauche.
Figure 3-4
Un objet dynamique insr dans Dreamweaver
60
Modier un objet dynamique

Pour modier une image dynamique insre dans Dreamweaver, slectionnez-la, puis cliquez sur licne Photoshop place dans la palette des proprits. Limage souvre dans lditeur (pour changer dditeur, voir, dans ce chapitre, la section Choisir le logiciel ddition des images ). Modiez, puis enregistrez cette image. Pour une image au format Photoshop, enregistrez-la en psd. Revenez alors sous Dreamweaver. Licne de double che de limage a chang. La che infrieure est maintenant de couleur rouge. Dreamweaver vous indique ainsi que limage a t modie. Pour mettre jour cette modication, cliquez sur licne Mettre jour depuis loriginal. Dreamweaver enregistre nouveau limage qui est insre dans le document et conserve le lien vers le document psd, original.
Figure 3-5
Licne de mise jour dune image dynamique
Les proprits dune image

Lorsquune image est place dans le document, un clic sur celle-ci la slectionne et le panneau Proprits en afche les caractristiques. La gure 3-6 prsente ce panneau.
Figure 3-6
Les proprits des images
Cliquez sur le triangle pour agrandir ou rduire le panneau Proprits. Cette zone permet dobtenir des renseignements sur limage. Elle prsente une vignette daperu, le poids de limage et un champ permettant de lui donner un nom. Ce champ, galement appel ID de llment, sera particulirement employ lors de compositions utilisant le langage JavaScript ou bien pour crer un style particulier pour cette image. Les champs L et H indiquent les dimensions de limage en largeur et en hauteur. Une che circulaire apparat droite de ces champs dans deux cas (gure 3-7) : si les dimensions ne sont pas renseignes ou si les dimensions de limage originale ont t
61
modies. Dans ce cas, lune des valeurs, ou les deux, apparaissent en gras. Un clic sur la che permet, dans le premier cas, dafcher les dimensions de limage et dans le second cas, de rtablir les dimensions originales.
Figure 3-7
Absence de dimensions ou dimensions modies
Le champ Src correspond au chemin de limage. Vous pouvez changer ici laccs limage si elle a t dplace. Cette manipulation est rserve aux utilisateurs avertis. Le champ Lien permet daffecter un lien limage pour quelle soit cliquable (voir chapitre 4) et permettre douvrir une nouvelle page. Le champ Sec. correspond au champ Texte secondaire de la fentre Attributs daccessibilit des balises dimage. Vous pouvez donc modier vos choix ici. La zone Modier donne accs aux outils de modication de limage (voir plus loin dans ce chapitre). Choisissez ici une classe pour le style de limage (voir chapitre 8). Cette zone permet de dnir une carte dimage (voir la section Crer des liens sur une image , au chapitre 4). Les espaces V et H crent une marge entre limage et le contenu suivant. La gure 3-8 illustre cela : sur limage de gauche, les marges sont gales zro et sur celle de droite, elles sont de 20 pixels. Lutilisation de ces attributs nest pas valide en XHTML 1.0 Strict, prfrez la cration dun style (voir chapitre 8).
Figure 3-8
Lespace vertical et horizontal dune image
Le champ Cible est actif lorsquun lien est indiqu dans le champ Lien. Ce champ permet de cibler un cadre lorsquon utilise des pages avec un systme de cadres (voir chapitre 6). Cette zone regroupe des proprits visibles de limage, savoir sa bordure et son alignement. Ces caractristiques ne sont pas valides en XHTML 1.0 Strict, prfrez la cration dun style (voir chapitre 8). Voici nanmoins leurs descriptions.
62
Le champ Bordure permet de crer un let autour de limage de la taille indique en pixels. Limage de la gure 3-9 prsente une bordure de 12 pixels. La couleur par dfaut est le noir. Le champ Aligner permet daligner limage par rapport un texte. Slectionnez les options Gauche ou Droite dans la liste droulante pour obtenir un texte plac ct de limage.
Figure 3-9
Une image centre avec une bordure noire de 12 pixels
diter une image

Ldition dune image permet de la modier dans un logiciel spcialement conu pour cela, comme Photoshop, Fireworks, Gimp ou tout autre logiciel ddition dimages de votre choix. Lenregistrement du chier modi est alors immdiatement pris en compte dans Dreamweaver. Cette pratique nest pas trs recommande pour la qualit de limage modie, surtout dans le cas dun format destructeur comme le JPEG. Pour diter une image : 1. Slectionnez limage sur le document Dreamweaver. 2. Choisissez le menu Modier>Image>Modier avec >Photoshop (ou Fireworks si ce logiciel est install sur votre ordinateur) ou Parcourir. Vous pouvez galement cliquer sur les icnes Ps ou fw situes du panneau des proprits de limage. Ces icnes changent daspect suivant le type dimage sur laquelle vous avez cliqu et les prfrences ddition associes son extension. 3. Le logiciel de traitement dimages souvre alors. Modiez limage, puis enregistrezla. 4. Retournez dans Dreamweaver et activez le document contenant limage. Les modications sont immdiatement prises en compte.
63
Choisir le logiciel ddition des images

Pour choisir le logiciel ddition des images, slectionnez le menu Edition>Prfrences et cliquez sur la catgorie Types de chiers/Editeurs. Dans le cadre Extensions, slectionnez le type de chier associer un diteur puis, dans le cadre Editeurs, cliquez sur lditeur dsir. Sil nest pas prsent dans la liste, cliquez sur le bouton + situ au-dessus du cadre pour lajouter dans la liste. La bote de dialogue permettant de choisir un nouvel diteur externe souvre alors. Slectionnez le programme ajouter et validez. Il apparat ensuite dans la liste. Pour le dsigner comme diteur par dfaut, cliquez sur le bouton Rendre Principal. Cette prfrence permet de choisir tous les diteurs associs aux lments placs dans une page de Dreamweaver.
Figure 3-10
Les prfrences Types de chiers/Editeurs
Optimiser une image

La fentre Aperu de limage permet deffectuer de multiples modications sur limage, notamment son optimisation. Cette fentre apparat automatiquement lors de linsertion dune image au format .psd ou lors dun copier-coller depuis Photoshop. Lorsquune image est place dans la page, vous pouvez ouvrir cette fentre en slectionnant limage et en cliquant sur licne Modier les paramtres de limage, situe droite de licne
64
de Photoshop ou de Fireworks dans le panneau Proprits. Lorsquune image est dj insre dans la page, loptimisation affecte le chier li. La fentre Aperu de limage (gure 3-11) prsente deux onglets dans sa partie gauche : Options et Fichier.
Figure 3-11
La fentre Aperu de limage
Longlet Options permet de choisir le format denregistrement de limage. Cliquez sur la liste droulante du champ Format pour choisir le format de limage parmi ceux proposs : PNG, GIF ou JPEG. Suivant le format choisi, diffrentes options sont disponibles. La zone daperu droite de la fentre permet destimer immdiatement le rendu des paramtres choisis. Comme dans Photoshop et Fireworks, vous pouvez afcher simultanment plusieurs fentres daperu. Cliquez sur lune des icnes situes en bas de la fentre (voir gure 3-12) pour afcher plusieurs vues diffrentes de limage. Trois options sont disponibles : Aperu : 1 fentre, Aperu : 2 fentres et Aperu : 4 fentres.
65
Figure 3-12
Les outils de la fentre Aperu de limage
Vous pouvez comparer diffrentes optimisations en choisissant des rglages diffrents depuis le menu local de chacune des fentres. Cliquez sur lune des vues pour en afcher les paramtres dans la zone de gauche et pouvoir ainsi les modier. Conservez la vignette slectionne et validez votre choix. Les outils (gure 3-12) permettent de slectionner une vignette (icne Pointeur) ou de grossir/rduire la visualisation des vignettes. La loupe utilise avec la touche Alt enfonce rduit la taille des vignettes. Loutil de recadrage permet de raliser un recadrage sur une vignette. Cet outil ntant pas dune utilisation aise, prfrez-lui celui du panneau des proprits. Vous pouvez aussi recadrer limage via longlet Fichier.
Figure 3-13
Longlet Fichier de la fentre Aperu de limage
Longlet Fichier permet de modier la taille du document en pixels ou bien en pourcentages. Pour cela, on entre des valeurs dans la zone Mise lchelle. On peut aussi modier le cadrage de limage en entrant de nouvelles valeurs dans la partie Zone dexportation. Vous pouvez galement changer le cadrage directement sur limage en agissant sur le let pointill qui apparat ds que lon coche la case Zone dexportation. Lorsque tous les paramtres sont choisis, cliquez sur le bouton OK. Vous tes alors invit enregistrer votre image dans le dossier images du site.
66
Optimiser un document GIF ou PNG

Les formats GIF et PNG 8 optimisent les images par rapport une palette comprenant 256 couleurs. Pour convertir une image en tons continus (depuis le format JPEG par exemple) au format GIF, vous devez choisir quelles seront les couleurs de limage. La majorit des images en tons continus nest pas exploitable au format GIF. Le format GIF ou PNG 8 tant slectionn, choisissez une palette de couleurs qui sadaptera le mieux limage grce la liste droulante Palette. Voici les diffrentes palettes de couleurs disponibles : Adaptative Adapte la palette aux couleurs de limage. La palette contiendra au maximum 256 couleurs. WebSnap Adaptative Transforme les couleurs de limage dans la palette de couleurs Web scurise la plus proche. Web 216 Transforme les couleurs de limage dans la palette de couleurs Web scurise. Exacte Essaie de conserver chacune des couleurs de limage. Macintosh Transforme les couleurs de limage dans la palette de couleurs Macintosh. Windows Transforme les couleurs de limage dans la palette de couleurs Windows. Niveaux de gris Utilise une palette en niveaux de gris. Limage rsultante sera en niveaux de gris. Noir et blanc Utilise une palette Noir et blanc. Limage sera convertie dans ces deux couleurs. Loption de tramage peut ici tre utile. Palette Uniforme Cette palette est cre partir des trois composantes : rouge, vert et bleu. Le logiciel prlve 6 niveaux de chacune des couleurs dans limage et les combine pour crer une palette ayant au plus 216 couleurs. Personnalise Permet de choisir une palette personnelle sur votre ordinateur. Les outils de la gure 3-14 se trouvent sous la palette des couleurs de limage. Ils sactivent lorsquune couleur est slectionne. Voici une description de ces icnes, de gauche droite : Licne Modier une couleur permet de transformer une couleur. Licne Transparent permet de transformer la couleur slectionne en couleur transparente. Licne Magntisme des couleurs scuris change la couleur slectionne dans la couleur Web scurise la plus proche. Licne Verrouiller la couleur verrouille la couleur (retrouvez les principes de loptimisation des images dans Photoshop lannexe C).
67
Figure 3-14
Les outils doptimisation des images au format GIF
Les icnes Ajouter une couleur et Supprimer une couleur permettent respectivement de crer une nouvelle couleur et de supprimer une couleur de la palette. Les trois outils pipettes permettent de transformer des couleurs en couleurs transparentes directement sur limage. La pipette + ajoute une couleur de transparence et la pipette la supprime. La liste droulante permet de choisir des transparences : Pas de transparence, Transparence dindex et Transparence Alpha. La transparence dindex reprsente la transparence des couleurs slectionnes avec la pipette. La transparence Alpha utilise la couche alpha des images au format PNG 8 ce qui permet dobtenir des images ayant une transparence dgrade (consultez lannexe C pour plus de renseignements sur les images PNG). Loption Matage permet dattribuer une couleur de fond aux images PNG 32 et PNG 8 ayant une couche alpha de transparence. Supprimer les couleurs non utilises retranche les couleurs qui ne sont pas dans limage. Cette situation peut se prsenter lorsque lon choisit dajouter des couleurs la palette ou bien lorsque lon importe une palette personnalise. Afchage entrelac du navigateur. Dans un navigateur, limage safchera dabord en dnition trs basse, puis sa dnition samliorera progressivement. Cela permet un afchage plus rapide puisque, au dpart, limage nest pas prsente dans sa qualit optimale. Assistant doptimisation la taille. Un clic sur cette icne situe en bas droite permet de spcier un poids cible pour loptimisation de limage. De cette manire, vous matriserez parfaitement le poids du chier image, mais vous nen contrlerez pas la qualit.
Optimiser un GIF anim

Lorsque vous ouvrez une image au format GIF anim dans la fentre daperu, utilisez les outils situs sur la droite de la fentre qui permettent de commander la lecture ou
68
larrt de lanimation (voir gure 3-15). Ils permettent aussi de naviguer dune image une autre. Vous pouvez optimiser la palette de chacune des images dune animation.
Figure 3-15
Les commandes de lecture dun GIF anim
Recadrer une image

Dans Dreamweaver, loutil Recadrer est symbolis par la mme icne que dans Photoshop : deux moitis dun mme carr qui sentrecroisent. Pour recadrer une image : 1. Slectionnez une image. 2. Cliquez sur loutil Recadrer situ droite de la zone Bordure dans le panneau Proprits. 3. Une bote davertissement vous met en garde des modications apportes avec cet outil. En effet, celles-ci affecteront le chier image li limage reprsente dans la page. (Dreamweaver, comme le navigateur Internet, nintgre pas les images mais en donne une reprsentation). Aprs le recadrage, il sera impossible de revenir en arrire. Toutefois, vous pourrez annuler une action tant que le recadrage nest pas valid. Pour cela, appuyez sur la touche Echap du clavier ou cliquez lextrieur de limage. 4. Des poignes de recadrage apparaissent autour de limage. Dplacez-les pour modier son cadrage (voir gure 3-16).
Figure 3-16
Recadrage dune image
69
Modier la luminosit, le contraste et la nettet dune image

Le panneau des proprits de limage prsente deux icnes permettant de modier la luminosit, le contraste (icne Luminosit et contraste) et la nettet (icne Accentuer) de limage slectionne (gure 3-17). Comme pour loutil Recadrer, lutilisation de ces rglages affecte de manire permanente votre chier original.
Figure 3-17
Les icnes Luminosit et contraste et Accentuer
Pour modier ces proprits : 1. Slectionnez limage. 2. Cliquez sur licne souhaite. 3. Une fentre dalerte apparat, cliquez sur OK. 4. La bote de dialogue de rglages de loutil choisi apparat. Effectuez les modications souhaites et validez. 5. Sur le document Dreamweaver, limage est automatiquement modie.
Rchantillonner une image

Loutil Rchantillonner (gure 3-18) est actif uniquement lorsque la taille de limage a t modie. Pour modier la taille dune image, saisissez de nouvelles dimensions dans les champs L et H du panneau des proprits ou dplacer lune des poignes de limage, directement sur le document.
Figure 3-18
Loutil Rchantillonner
Aprs modication de la taille de limage sur le document Dreamweaver, cliquez sur cet outil pour transformer la taille du chier li et ainsi obtenir une image lie qui correspond bien la taille souhaite. Cette opration affecte le chier li et est irrversible.
Conclusion
Lintgration des images dans une page HTML se ralise, avec Dreamweaver, plus simplement et plus rapidement que si vous deviez crire le code HTML ncessaire, directement
70
dans la page. De nombreux outils permettent dafner cette intgration, notamment le calcul automatique de la taille des images et lafchage dun avertissement si limage t modie. Dreamweaver propose aussi de nombreux outils de traitement des images qui vous serviront en complment de votre logiciel de traitement dimages. Soyez prudent lorsque vous utilisez les outils de modication des images et lisez attentivement les messages dalerte afchs lors dactions irrversibles.
4
Crer des hyperliens
Les pages dun site Web sont relies par des hyperliens placs sur des textes ou des images. Les hyperliens constituent la base de toute interactivit. Dans ce chapitre, vous apprendrez, travers linterface de Dreamweaver, crer tous les liens de base. Voici les principaux thmes abords dans ce chapitre : comprendre les hyperliens ; crer un lien relatif sur un texte ou une image ; crer un lien absolu ; crer un lien daccessibilit ; crer des liens avec des ancres ; crer des liens de messagerie ; crer des liens nuls ou vides ; crer des liens sur une image (image map).
Comprendre les liens

Dans le chapitre 2, vous avez appris organiser votre site sur votre ordinateur. Si ce nest pas encore fait, reportez-vous, dans ce chapitre, la section Prparer un site . Pour la cration des liens, comme pour linsertion des images, lemplacement des documents est trs important. En effet, un lien reprsente ladresse du document charger ou ouvrir.
72
Si ladresse change au cours du dveloppement du site, le document est introuvable. Pour viter cela, tout document doit tre enregistr dans son rpertoire dnitif. Par exemple, vous devez placer les images dans le dossier nomm images et les pages HTML dans le rpertoire Site. Un lien reprsente le chemin entre deux documents. Ce chemin peut tre relatif, il correspondra alors au cheminement entre le premier document et le second. Prenons pour exemple le dossier dun site lintrieur duquel se trouvent deux documents HTML : A.html et B.html. Pour crer un lien relatif dans la page A.html vers le document B.html, il sufra dcrire B.html pour le lien dun texte ou dune image de la page A. Le chemin peut galement tre absolu. Dans ce cas, le point de dpart nest plus le premier document mais tout simplement le Web et vous crirez ladresse complte du document sur le Web. Si vous reprenez lexemple prcdent, pour crer un lien dans la page A.html vers le document B.html, il faudra crire : http://www.eyrolles.fr/B.html. Dans ce cas, la page B.html doit tre place au premier niveau (galement dit racine) dans le site dont le nom de domaine est eyrolles.fr.
Crer un lien relatif sur un texte ou une image

Pour un texte ou une image, le principe de cration dun lien reste toujours le mme. Tout dabord, on crit le texte ou on insre limage dans la page, on slectionne ensuite cet lment et on crit le lien. En pratique, voici tape par tape les diffrentes mises en uvres dans Dreamweaver.
Lien par saisie

1. Ouvrez un document Dreamweaver en mode Cration et saisissez un ou plusieurs mots. Vous pouvez aussi crire une phrase complte. 2. Enregistrez le document son emplacement dnitif. Cela permettra Dreamweaver de reprer la position du document. 3. Slectionnez un ou plusieurs mots (voire une phrase complte). Dans le cas dune image, cliquez dessus pour la slectionner. Tout ce qui est slectionn deviendra actif et sera cliquable par la suite. 4. Si le panneau des proprits nest pas visible lcran, slectionnez le menu Fentre> Proprits pour lafcher. Si vous avez slectionn un texte, cliquez sur le bouton HTML situ sur la gauche de la palette pour activer ce mode de travail. 5. Dans le champ Lien du panneau Proprits, indiquez le chemin entre le document actuel et le document charger. Dans la majorit des cas, vous crirez un lien relatif (gure 4-1).
Crer des hyperliens CHAPITRE 4
73
Figure 4-1
Cration dun lien par saisie
Lien par pointage

Voici une autre mthode, propose par Dreamweaver, pour raliser un lien. Elle impose la dnition dun site (voir chapitre 2) car ici le lien se fait par pointage sur un chier. 1. Slectionnez le menu Fentre>Fichiers pour afcher le panneau des chiers et des documents du site. 2. Sur le document de travail, slectionnez un ou plusieurs mots ou encore une image. 3. Si vous avez slectionn un texte, cliquez sur le bouton HTML situ sur la gauche de la palette Proprit pour activer ce mode de travail. Cliquez sur licne Pointer vers un chier, situe droite du champ Lien dans le panneau Proprits. Tout en maintenant le bouton de la souris enfonc, dplacez le curseur sur le chier lier dans le panneau Fichiers. Une che apparat. Relchez le bouton de la souris lorsque la che pointe sur le document dsir (gure 4-2). Le lien vers le chier slectionn sinscrit automatiquement dans le champ Lien du panneau des Proprits.
Figure 4-2
Cration dun lien par pointage
74
Lien par recherche

La mthode de cration de lien par recherche permet de choisir un document nimporte o sur le disque dur ou sur le rseau. 1. Sur le document de travail, slectionnez un ou plusieurs mots ou encore une image. 2. Si vous avez slectionn un texte, cliquez sur le bouton HTML situ sur la gauche de la palette pour activer ce mode de travail. Cliquez sur licne Rechercher le chier situe droite du champ Lien dans le panneau Proprits. La fentre Slectionner un chier souvre (gure 4-3). 3. Slectionnez le document dsir et cliquez sur le bouton OK. Le lien sinscrit automatiquement dans le champ Lien du panneau Proprits.
Figure 4-3
Cration dun lien par recherche
Crer un lien absolu

Pour la cration dun lien absolu, seule la mthode de cration de lien par saisie est vraiment adapte. Vous devez connatre ladresse Web o sera hberge la page et crire ladresse complte qui comprend le protocole HTPP et le nom de serveur du domaine, par convention www. Voici la marche suivre :
75
1. Ouvrez un document en mode Cration et saisissez un ou plusieurs mots. Vous pouvez aussi crire une phrase complte. 2. Slectionnez un ou plusieurs mots ou encore une image. 3. Si vous avez slectionn un texte, cliquez sur le bouton HTML situ sur la gauche de la palette pour activer ce mode de travail. Dans le champ Lien du panneau Proprits, saisissez ladresse complte de la page (gure 4-4), par exemple http:// www.montagne-65.com/randos/gavarnie.html. La page que vous recherchez est la page nomme gavarnie.html, place dans le dossier randos faisant partie du site de nom de domaine montagne-65.com, lui-mme hberg sur un serveur Web (www).
Figure 4-4
Cration dun lien absolu
Crer un lien daccessibilit

Dreamweaver propose une bote de dialogue permettant de dnir des options supplmentaires pour les liens crer. Les liens accessibles sont dots de plusieurs attributs supplmentaires qui leur donnent une meilleure ergonomie, notamment auprs des personnes ayant une dcience visuelle. Ces liens comporteront une description, un raccourci clavier et un ordre de tabulation. Voici la marche suivre pour mettre en uvre des liens daccessibilit. 1. Afchez la fentre Document en mode Cration. 2. Placez le curseur de la souris lendroit o vous souhaitez saisir le texte du lien accessible. Si le texte est dj crit, slectionnez le texte du lien. Dans le cas prsent, il nest pas ncessaire dcrire le texte au pralable. 3. Slectionnez le menu Insertion>Hyperlien ou cliquez sur licne Hyperlien de la catgorie Commun du panneau Insertion. La bote de dialogue Hyperlien apparat (gure 4-5). Renseignez les diffrents champs de cette bote de dialogue selon les indications suivantes : Dans le champ Texte, conservez le texte slectionn ou saisissez le texte de votre choix. Dans le champ Lien, indiquez le lien relatif ou absolu. Le champ Cible permet de choisir lemplacement dafchage du document appel. Cet emplacement est surtout utilis lorsque le site est bas sur un jeu de cadres. Vous pouvez nanmoins choisir loption _blank, qui permet douvrir le document dans une nouvelle fentre du navigateur. Cependant, cette option utilise lattribut target qui nest pas autoris pour la cration dun site valide XHTML 1.0 Strict. On prfrera donc la solution qui consiste ne spcier aucune cible.
76
Figure 4-5
La bote de dialogue Hyperlien
Dans le champ Titre, saisissez le texte qui sera restitu sous plusieurs formes selon le navigateur. Dans un navigateur standard, ce texte apparatra dans une infobulle lors du passage de la souris. Dans un navigateur vocal, ce texte sera lu. Ce champ Titre est donc trs important. Le champ Cl daccs permet dcrire une lettre qui servira de raccourci clavier lorsque la page sera afche dans un navigateur. Dans Firefox, le raccourci clavier sera accessible via la combinaison de touches Alt + Maj + lettre_cl. Dans Internet Explorer, le raccourci clavier sera accessible via la combinaison de touches Alt + lettre_cl et la pression sur la touche Entre permettra lafchage du document. Dans le champ Ordre des tabulations, indiquez un chiffre. Lorsque la page sera afche dans un navigateur, la pression de la touche Tab permettra de passer dun lien un autre dans lordre inscrit dans ce champ. Si aucun ordre de tabulation nest indiqu, lordre des liens correspondra par dfaut lordre dapparition des liens dans la page. 4. Cliquez sur OK pour valider. 5. Pour modier lune de ces options, il est malheureusement impossible douvrir nouveau la bote de dialogue Hyperlien. Celle-ci afche uniquement le texte et non les options. Deux mthodes sont alors possibles : soit vous recommencez la saisie complte dans la bote de dialogue Hyperlien, soit vous slectionnez le texte en mode Cration, puis vous passez en mode Fractionner. Le code est ainsi surlign et vous pouvez apporter facilement de petites modications. Cliquez sur le bouton Actualiser du panneau Proprits pour valider les changements.
77
Crer des liens avec des ancres

Les liens courants permettent dafcher une nouvelle page dans la fentre du navigateur. Cette page safche partir de son bord suprieur et ne laisse pas voir les contenus infrieurs lorsque la page stend sur une grande hauteur. Pour rsoudre ce problme, vous pouvez recourir aux ancres nommes. En effet, un lien comportant une ancre nomme permet dafcher la page partir dun endroit prcis. Ainsi, lorsque la page stend sur une grande hauteur, le contenu demand est directement afch. Ceci est donc trs utile pour cibler un endroit prcis de la page en cours et aussi dune page nouvelle. Voici les diffrentes tapes pour crer un lien vers une ancre nomme. 1. Les ancres sont des repres dans la page qui seront ensuite appels depuis le lien. Il sagit dlments invisibles, reprables dans la page par des petites icnes (voir gure 4-7) reprsentant une ancre. Pour les afcher, slectionnez le menu Afchage>Assistances visuelles>lments invisibles. 2. Vous allez maintenant pouvoir dnir les ancres nommes. Pour cela, placez le curseur de la souris lendroit o vous souhaitez insrer une ancre. 3. Choisissez le menu Insertion>Ancre nomme. La bote de dialogue Ancre nomme souvre. Vous pouvez aussi cliquer sur licne dancre de la catgorie Commun du panneau Insertion. 4. Indiquez le nom de lancre (gure 4-6). Saisissez un mot simple, sans espace, sans accent et sufsamment explicite pour symboliser le contenu adjacent. Cliquez sur OK pour valider.
Figure 4-6
La bote de dialogue de cration dune ancre
5. En mode Cration, lancre nomme est symbolise par une icne jaune reprsentant une ancre. Elle est place lendroit o vous avez prcdemment positionn le curseur de la souris (gure 4-7). 6. Si vous souhaitez insrer plusieurs ancres nommes, recommencez cette opration autant de fois que ncessaire.
78
Figure 4-7
Lancre nomme insre dans le document en mode Cration
7. Vous devez prsent crer le lien qui appellera cette ancre. Deux mthodes pour cela : La premire mthode utilise le champ Lien du panneau Proprits. En mode Cration, slectionnez dans la page le texte qui servira de lien vers lancre (repre de la gure 4-8). Attention, ne confondez pas le texte slectionner et lancre, il sagit de deux lments distincts qui ne sont normalement pas situs au mme endroit dans la page. Aprs avoir slectionn le texte (ou limage), saisissez le nom de lancre dans le champ Lien (repre de la gure 4-8) du panneau des proprits en le faisant prcder du caractre # (dise). La seconde mthode utilise la technique du pointage. En mode Cration, slectionnez le texte du lien. Utilisez lascenseur horizontal ou vertical pour vous dplacer dans la page et faire apparatre lancre souhaite. Cliquez sur licne Pointer vers un chier situe droite du champ Lien dans le panneau Proprits. Tout en maintenant le bouton de la souris enfonc, glissez la cible du lien sur lancre puis relchez le bouton de la souris. Le nom de lancre sinscrit automatiquement dans le champ Lien prcd du caractre # (dise). 8. Enregistrez la page et testez-la dans un navigateur.
79
Figure 4-8
Le texte du lien, lancre nomme et le lien
Crer des liens de messagerie

Un lien de messagerie permettra vos visiteurs douvrir, par un simple clic sur un texte ou une image, lapplication de messagerie prsente sur leur ordinateur. La fentre de nouveau message qui souvrira comportera automatiquement ladresse du destinataire, vitant ainsi sa saisie par linternaute. Voici en dtail les diffrentes tapes pour crer un lien de messagerie sadressant au webmaster du site montagne-65.com. 1. Ouvrez un document en mode Cration et saisissez le texte Contacter le Webmaster. 2. Enregistrez le document son emplacement dnitif. Cela permettra Dreamweaver de reprer la position du document. 3. Slectionnez ce groupe de mots laide de la souris. Vous pouvez galement cliquer sur une image pour la slectionner. Tout ce qui est slectionn deviendra actif et sera cliquable. 4. Si le panneau Proprits nest pas visible lcran, slectionnez le menu Fentre> Proprits. 5. Dans le champ Lien du panneau Proprits, saisissez mailto:, sans espace entre mailto et les deux points. Indiquez ensuite ladresse e-mail, par exemple webmaster@montagne-65.com. La gure 4-9 prsente le lien saisi dans le champ Lien.
80
Figure 4-9
Saisie dun lien de messagerie
Lorsque linternaute cliquera sur ce lien, le logiciel de messagerie install sur son ordinateur souvrira sur un nouveau message. La gure 4-10 prsente le nouveau message dans Outlook Express.
Figure 4-10
Le nouveau message dans Outlook Express
Une mme adresse lectronique reoit gnralement de nombreux e-mails. Pour sparer les messages, il est utile, voire obligatoire, dindiquer lobjet de votre message. Lorsque vous crez un lien de messagerie, vous pouvez aussi imposer lobjet de le-mail. Cela vitera linternaute la saisie de lobjet et vous permettra de connatre immdiatement la provenance du message. Pour cela, ajoutez lexpression ?subject=objetdumessage en remplaant le terme objetdumessage par votre propre objet. Pour notre exemple prcdent, vous obtenez alors dans le champ Lien : webmaster @montagne-65.com?subject= renseignements randos. Pour aider la gestion des messages, vous pouvez aussi adresser votre message dautres destinataires. Pour cela, ajoutez lexpression ?cc=autrecontact@montagne-65.com. Remplacez autrecontact@montagne-65.com par une adresse valide. Le message sera envoy aux deux destinataires, le webmaster et autrecontact. Pour notre exemple, vous obtenez
81
webmaster@montagne-65.com?cc=autrecontact@montagne-65.com dans le champ Lien du
panneau Proprits. Vous pouvez aussi aider linternaute dans la saisie du corps du message en lui proposant un texte. Pour cela, saisissez ?body=letexte. Remplacez letexte par le texte crire cet emplacement. Vous obtenez alors dans le champ Lien : webmaster@montagne-65.com?body= Envoyez moi le catalogue des randonn%E9es en montagne. Si vous souhaitez ajouter deux lments ou tous les lments prcdemment cits en mme temps, vous devez les sparer par le signe & et supprimer les signes ? lexception du premier qui doit tre conserv. Pour tre compatible avec les spcications du W3C XHTML 1.0 Strict, vous devez saisir le caractre & sous la forme &. Vous obtenez alors dans le champ Lien : mailto:webmaster@montagne.com?subject=renseignements
randos&cc=autrecontact@montagne-65.com&body=Envoyez moi le catalogue des randonn%E9es en montagne.
La gure 4-11 prsente la fentre de Outlook Express avec tous les lments cits.
Figure 4-11
La fentre du logiciel de messagerie avec tous les lments
Vous avez certainement remarqu lcriture particulire du caractre du mot randonnes. Les lettres accentues et les caractres particuliers doivent tre cods avec le codage URL pour tre correctement interprts par les logiciels de messagerie. Le tableau ci-dessous prsente les principaux caractres spciaux. De nombreux sites proposent des tables de codage, consultez la liste de ces sites Internet en n douvrage.
82
Les bases de Dreamweaver CS4 PARTIE I Tableau 4-1 Codage URL

Caractre

Codage URL
%E9 %E8 %E0 %EA %E2 %EE %F4 %F9
Caractre
% < >
Codage URL
%C9 %C8 %C0 %CA %C2 %25 %3C %3E
Crer des liens nuls ou vides

Les liens nuls ou vides sont des liens qui ne pointent sur aucun document. Les textes ou les images qui comportent un lien vide ont laspect dun lien. Le curseur de la souris se transforme lorsque lon passe au-dessus deux, mais si vous les cliquez, il ne se passe rien. Ces liens sont principalement employs avec des vnements JavaScript car ces derniers nappliquent gnralement pas les modications courantes des liens, savoir le changement du curseur de la souris et ventuellement celui de laspect du texte. Pour crer un lien vide, slectionnez tout dabord un texte ou une image. Dans le champ Lien du panneau Proprits, saisissez uniquement le signe # (dise). La gure 4-12 prsente le lien vide cr dans le champ Lien.
Figure 4-12
Un lien vide
Crer des liens sur une image (image map)

Une image peut trs facilement tre transforme en lien en utilisant les mmes mthodes que pour les textes : slection de limage, puis dnition du lien dans le champ Lien du panneau Proprits. Une image possde cependant une autre caractristique. En effet, vous pouvez y dnir des zones cliquables sans la dcouper. Lorsque vous passez le curseur de la souris sur une image traite de la sorte, le lien est diffrent selon lendroit survol. Avec cette technique, vous raliserez, par exemple, des menus avec une seule image. Son dcoupage en zones permettra de crer des liens diffrents. Vous pourrez aussi crer des liens dont le contour sadaptera prcisment une forme de limage, crant ainsi un lien dtour.
83
Le dcoupage dune image en diffrentes zones cliquables seffectue via le panneau Proprits (cliquez ventuellement sur la che situe en bas droite de ce panneau si sa partie infrieure nest pas visible). Lorsquune image est slectionne, ce panneau prsente, dans sa partie gauche, des outils de forme ractive (rectangulaire, ronde et polygonale) sur lesquels vous cliquerez pour dcouper limage (gure 4-13).
Figure 4-13
Les outils de zone ractive pour crer une carte dimage
Carte Ce champ permet didentier les descriptions des zones de limage. Vous pouvez lui attribuer un nom. Si aucun nom nest donn, Dreamweaver en propose un que vous pouvez conserver ou modier. Icne Outil Zone ractive pointeur Cette icne permet de slectionner les zones dj cres pour modier le lien. Le pointeur permet galement la modication dun trac. Icne Outil Zone ractive rectangulaire Cet outil permet de tracer des zones ractives rectangulaires. Pour cela, cliquez sur son icne et placez le curseur de la souris sur limage. Appuyez sur le bouton gauche de la souris et, tout en le maintenant enfonc, dplacez le curseur jusqu obtenir le rectangle souhait.
Figure 4-14
La cration dune zone ractive rectangulaire sur limage
84
Pour crer un vritable lien sur cette zone, saisissez-le dans le champ Lien du panneau des proprits qui safche pour la zone ractive (gure 4-15).
Figure 4-15
Le panneau Proprits dune zone ractive
Icne Outil Zone ractive ovale Cet outil permet de crer des zones ractives ovales. Pour cela, cliquez sur licne pour slectionner loutil et placez le curseur de la souris sur limage. Appuyez sur le bouton gauche de la souris et, tout en le maintenant enfonc, dplacez le curseur jusqu obtenir la zone souhaite. Pour crer un vritable lien sur cette zone, saisissez le lien dans le champ Lien du panneau des proprits qui safche pour la zone ractive. Icne Outil Zone ractive polygone Cet outil permet de crer des zones ractives polygonales. Pour cela, cliquez sur licne pour slectionner loutil et placez le curseur de la souris sur limage. Cliquez sur limage en diffrents points pour dessiner une forme polygonale. Pour crer un vritable lien sur cette zone, saisissez-le dans le champ Lien du panneau des proprits qui safche pour la zone ractive. Pour chacun des outils de traage de zone ractive, une bote de dialogue apparat pour vous rappeler de placer une description du lien dans le champ Sec.
Conclusion
La lecture de ce chapitre vous a permis de comprendre et dlaborer tous les types de liens hypertextes qui sont la base de linteractivit. Ces liens constituent une base indispensable matriser pour raliser vos pages et votre site Internet. Dautres syntaxes de liens sont prsentes dans ce livre, notamment au chapitre 14, avec la prsentation des vnements des comportements et au chapitre 20 avec la cration de pages dynamiques avec PHP/MySQL.
5
Mise en page avec des tableaux
Pendant de nombreuses annes, la mise en page au moyen de tableaux fut la rgle. Lapprentissage de la conception dune page Web passait immanquablement par de longues heures de manipulation des cellules des tableaux car les mises en page graphiques taient ralises laide dun ou plusieurs tableaux. Mais une meilleure implmentation dans les navigateurs des rgles du W3C, concernant les DTD, et une sensibilisation des concepteurs aux problmes daccessibilit ont rapidement rendues obsoltes les mises en page graphiques tabulaires. Aussi, ce chapitre sattachera vous prsenter les diffrentes structures de tableaux, les diffrentes mthodes de conception et de modication en vue de crer des tableaux destins recevoir des donnes. Il ne sagit pas de bannir les tableaux, mais seulement de les utiliser dans leur fonction premire : la prsentation de donnes, chiffres ou non. Dans ce chapitre, vous aborderez les points suivants : crer un tableau ; modier la mise en page dun tableau ; importer des donnes tabulaires.
Crer un tableau
Dnir un tableau
De manire gnrale, un tableau est constitu de lignes et de colonnes. Lintersection dune ligne et dune colonne constitue une cellule. En HTML, un tableau est constitu de lignes dans lesquelles se trouvent des cellules. Le positionnement de plusieurs lignes les
86
unes au-dessus des autres, comportant un nombre gal de cellules, cre des colonnes. Un tableau est une structure rigide. Les diffrentes cellules quil contient ne peuvent pas tre places nimporte o. Par exemple, une cellule ne peut pas se superposer au-dessus dune autre. Chaque cellule doit sinscrire par rapport aux cellules environnantes. Ainsi, les cellules de chaque ligne dun tableau dpendront des cellules des autres lignes.
Thorie de conception
Concevoir un tableau est une tche trs simple car il suft de dterminer un nombre de lignes et de cellules dans ces lignes. Dans la suite de ce chapitre, on assimilera les cellules de lignes des colonnes. Ainsi, pour raliser un tableau qui prsente les horaires des trains Paris-Tarbes, il sufra de crer un tableau deux colonnes : la premire afchera les horaires des trains au dpart de Paris et la seconde, les horaires darrive Tarbes. Le nombre de lignes sera dtermin par le nombre dhoraires y inscrire. Pour ce type de donnes, il est courant dutiliser une base de donnes, le tableau est alors cr dynamiquement. La gure 5-1 prsente ce tableau.
Figure 5-1
Exemple de tableau de donnes
Le problme devient plus complexe dans le cas dun tableau tel que celui prsent la gure 5-2. En effet, nous avons ici deux types de donnes dans chaque entre ainsi quun titre de cellule. Il faudra crer un tableau comportant quatre lignes et quatre colonnes, puis fusionner certaines cellules pour obtenir la prsentation souhaite.
Figure 5-2
Un tableau avec des cellules fusionnes
Enn, un tableau tel que celui prsent par la gure 5-3 sera ralis avec deux, voire trois tableaux si lon souhaite que la structure se maintienne, quel que soit le navigateur et la taille de la fentre.
Mise en page avec des tableaux CHAPITRE 5
87
Figure 5-3
Tableaux imbriqus
Le tableau XHTML
Dreamweaver transforme toutes les mises en page cres en mode graphique en code XHTML. Lafchage de la fentre en mode Fractionner vous aidera dans lapprentissage des diffrentes balises. Un tableau XHTML se dnit avec la balise <table> et se termine par </table>. La balise <caption> permet de dnir le titre du tableau et doit tre insre immdiatement aprs la balise de dbut de llment <table>. Cette balise nest pas obligatoire. Un tableau est constitu de lignes et de colonnes. En XHTML, on dnit dabord les lignes, puis les colonnes. Chaque ligne du tableau est introduite par llment <tr> et chaque cellule de la ligne peut tre assimile une colonne, amene par llment <td>. Il existe une exception cette rgle : les cellules de la premire ligne ou de la premire colonne peuvent tre diffrentes, <th> pour signier des titres de colonnes ou de lignes. Voici le code correspondant au tableau dcrit ci-dessus, prsentant les horaires des trains Paris-Tarbes.
<table summary="Ce tableau présente les horaires des trains du matin." width="30%" border="1" cellspacing="0" cellpadding="0"> <Caption>Horaires des trains Paris-Tarbes</caption> <tr><th>Paris</th><th>Tarbes</th></tr> <tr><td>9h20</td><td>19h</td></tr> <tr><td>10h05</td><td>19h15</td></tr> </table>
88
Ce tableau prsente cinq attributs dans la balise <table>. Lattribut summary permet aux navigateurs vocaux et braille de lire et dinterprter le sujet du tableau. Lattribut "width", de valeur 30 %, permet de donner une taille au tableau, proportionnelle la largeur de la fentre du navigateur. Lattribut border, de valeur 1, entoure le tableau et les cellules dun let de 1 pixel. Les attributs cellspacing et cellpadding permettent respectivement de crer ou de supprimer des espaces entre les cellules ou dans les cellules. La mise en forme plus graphique de ce tableau sera ralise en utilisant des styles CSS (voir chapitre 11). Voici les principales balises dnissant les tableaux simples : <table></table> Introduit un tableau. <caption></caption> Afche le titre du tableau. <tr></tr> Introduit une ligne. <th></th> Introduit une cellule den-tte de ligne ou de colonne. Cette balise remplace la balise<tr>. <td></td> Introduit une cellule.
Crer un tableau
Avec Dreamweaver, il nest pas utile, dans un premier temps, de connatre les codes XHTML pour raliser un tableau. Il suft de suivre une procdure simple et de savoir interprter les options proposes dans les botes de dialogue. Pour illustrer cette procdure, nous allons raliser le tableau prsentant les horaires des trains Paris-Tarbes (gure 5-1). 1. Commencez par choisir les options dafchage des tableaux. Pour cela, cliquez sur la catgorie Mise en forme du panneau Insertion, puis sur le bouton Standard. En principe, cette option devrait dj tre active. Slectionnez ensuite le menu Afchage> Assistances visuelles>Largeur tableaux. 2. Cliquez ensuite sur licne Tableau de la catgorie Mise en forme du panneau Insertion. La bote de dialogue de cration de tableau souvre (gure 5-4). 3. Renseignez les diffrents champs, puis validez. Pour plus de prcisions concernant cette bote de dialogue, consultez la section La bote de cration de tableau de ce chapitre. 4. Le tableau safche dans la page selon les caractristiques choisies. Son titre apparat et ses cellules sont vides (gure 5-5).
89
Figure 5-4
La cration dun tableau
Figure 5-5
Afchage du tableau dans la page
5. Cliquez dans chacune des cellules et saisissez le contenu. Les cellules de la premire ligne ont un aspect diffrent de celles de la deuxime ligne car loption den-tte a t slectionne.
Figure 5-6
Le tableau termin
90
Crer un tableau partir dlments PA

Une autre mthode pour crer un tableau consiste dessiner les cellules laide de loutil Tracer un div pour un lment PA , puis les convertir en tableau. Dreamweaver interprtera les cellules et leur emplacement et ajoutera, au besoin, des cellules supplmentaires pour constituer un tableau rectangulaire. Cette technique tait utilise par Macromedia pour simplier la construction des mises en page graphiques. Elle est aujourdhui un peu dsute pour la cration de tableaux contenant des donnes et les tableaux quelle gnre ne respectent pas les spcications XHTML 1.0 Strict. Voici nanmoins la procdure : 1. Depuis la catgorie Mise en forme du panneau Insertion, activez loutil Tracer un div pour un lment PA . 2. Placez le curseur de la souris lendroit souhait sur la page. Cliquez et, tout en maintenant le bouton de la souris enfonc, dplacez le curseur de manire dessiner un rectangle correspondant une cellule de tableau. Relchez le bouton de la souris. 3. Pour dessiner une autre cellule, cliquez de nouveau sur loutil Tracer un div pour un lment PA et tracez un autre rectangle. 4. Une fois toutes les cellules cres, choisissez le menu Modier>Convertir> Divs PA en tableau. La bote de dialogue de conversion souvre. Appliquez les options suivantes : La plus prcise dessine un tableau identique aux cellules dessines. La plus petite ne prend pas en compte les cellules et les espaces infrieurs au chiffre indiqu. Cette option est utile pour supprimer les espaces laisss entre les cellules. Loption Utiliser Gifs transparents insre, pour chaque colonne, une ligne supplmentaire de 1 pixel dans laquelle est place une image GIF transparente permettant de conserver la taille du tableau. Loption Centrer dans la page, centre le tableau. Les autres options proposes afchent des assistances visuelles.
La bote de cration de tableau

Voici le dtail de la bote de dialogue Tableau. Dans la zone Taille du tableau (gure 5-4), entrez les caractristiques physiques du tableau : Lignes Indique le nombre de lignes du tableau sans tenir compte de la ligne de lgende (voir ci-dessous). Colonnes Indique le nombre de colonnes du tableau. Largeur du tableau Dnit la largeur du tableau qui peut tre exprime en pixels ou en pourcentage. Ces deux approches donnent un rsultat bien diffrent. Une taille exprime en pixels est xe, alors quune taille exprime en pourcentage dpend de la
91
taille de la fentre du navigateur. Dans ce cas, les cellules du tableau sagrandissent ou se rduisent proportionnellement. Largeur de la bordure Dtermine lpaisseur en pixels de la bordure extrieure du tableau. Les bordures intrieures resteront une taille de 1 pixel. En revanche, attribuer la valeur zro la largeur de bordure annulera la taille des bordures extrieure et intrieure. Marge intrieure des cellules Correspond lespace entre le bord de la cellule et le dbut de son contenu. En XHTML, la marge intrieure correspond lattribut cellpadding. Dans le tableau de la gure 5-6, les marges intrieures ont t dnies zro. La gure 5-7 prsente une cellule de ce tableau avec une marge intrieure de 10 pixels. Dans de nombreux cas, la marge intrieure est gale zro.
Figure 5-7
Marge intrieure dune cellule
Espacement entre les cellules Indique lespace entre deux cellules. En XHTML, lespacement entre les cellules correspond lattribut cellspacing. La gure 5-8 prsente une cellule de ce tableau avec un espacement des cellules de 10 pixels. Dans de nombreux cas, lespacement entre les cellules est gal zro.
Figure 5-8
Espacement entre les cellules
Dans la zone En-tte, cliquez sur lune des reprsentations pour en choisir une qui correspond lorganisation de votre tableau. Les cellules grises de chacune de ces vignettes reprsentent lemplacement des titres de lignes ou de colonnes. Renseignez la zone Accessibilit : Lgende Correspond au titre du tableau. Indiquez dans ce champ le nom de votre tableau. Par dfaut, le titre au-dessus du tableau. La lgende correspond la balise <caption>. Rsum Saisissez un bref rsum du contenu du tableau pour permettre une meilleure accessibilit aux navigateurs vocaux et braille. Cette option correspond lattribut summary de la balise <table>.
92
Insrer du contenu dans un tableau

Une fois le tableau cr, vous allez pouvoir ajouter du contenu dans ses cellules. Pour cela, slectionnez une cellule en cliquant lintrieur et saisissez le contenu. Vous pouvez aussi insrer une image en cliquant sur licne Images de la catgorie Commun du panneau Insertion. Si la taille de limage est plus grande que celle de la cellule, celleci sadaptera pour prsenter lensemble de limage. Vous pouvez aussi insrer un autre tableau dans lune des cellules. Lusage des tableaux imbriqus est courant car il vite des manipulations de fusion de cellules qui sont parfois instables avec certains navigateurs. Aprs avoir cliqu dans la cellule, insrez un nouveau tableau en utilisant les procdures dcrites prcdemment.
Modier la mise en page du tableau

Lorsquun tableau est cr dans la page, il est gnralement indispensable de lui apporter des modications de taille ou de mise en forme. La mise en forme CSS des tableaux est aussi traite au chapitre 11 de cet ouvrage.
Le mode Dvelopp et les assistances visuelles

Les options prsentes ci-dessous permettront une meilleure apprciation des modications des tableaux.
Le mode Dvelopp
Pour activer le mode Dvelopp, cliquez sur le bouton Dvelopp de la catgorie Mise en forme du panneau Insertion. Vous devez, au pralable, avoir cliqu dans la page en mode Cration. Le mode Dvelopp agrandit les marges des cellules pour une meilleure manipulation des lignes et des colonnes. Les navigateurs nafchent pas le tableau tel quil est prsent dans ce mode, mais uniquement les modications des lignes et des colonnes. Ce mode peut tre utile dans le cas de tableaux imbriqus qui ont des marges, des espaces entre cellules et des bords dont les valeurs sont gales zro.
Les assistances visuelles Largeur tableaux et Bordures du tableau
Depuis le menu Afchage>Assistances visuelles, vous pourrez accder deux options visuelles pour les tableaux : Largeur tableaux et Bordures du tableau. Lassistance Largeur tableaux ajoute des indications de largeur concernant le tableau et ses colonnes dans une zone semi-transparente situe sous le tableau. La gure 5-9 prsente cette option. Vous remarquerez que deux chiffres sont placs au niveau des colonnes. Ce tableau a subi une modication de taille (voir plus loin dans ce chapitre). Lorsque lon modie la taille dun tableau, Dreamweaver ne met pas jour les tailles des colonnes dans le code HTML. Lassistant afche entre parenthse les nouvelles valeurs des colonnes.
93
Figure 5-9
Lassistant Largeur tableaux
Pour mettre jour les nouvelles valeurs, cliquez sur licne Convertir largeurs de tableau en pixels situe dans le panneau Proprits. Attention, la modication de la hauteur du tableau entrane la cration de lattribut height qui nexiste pas en DTD XHTML 1.0 Strict.
Figure 5-10
Conversion des valeurs du tableau
Lassistant Bordures du tableau est actif par dfaut. Il afche les bordures du tableau en pointills lorsquelles ont pour valeur zro. La gure 5-11 prsente laspect du tableau avec cet assistant. Sans lassistant, le tableau serait entirement blanc car il ne contient aucune valeur.
Figure 5-11
Lassistant Bordures du tableau
Ajouter des lments au tableau

Lorsquun tableau est cr, vous pouvez facilement slectionner ses lignes et ses colonnes et en ajouter ou en supprimer.
94
Slectionner le tableau ou une cellule
Pour slectionner une ligne ou une colonne dun tableau, placez le curseur de la souris sur la gauche de la ligne ou bien en haut de la colonne. Lorsquune che, pointe vers la ligne ou la colonne apparat, cliquez. La ligne ou la colonne est alors slectionne.
Figure 5-12
Slection dune ligne ou dune colonne de tableau
Vous pouvez aussi slectionner une ligne en cliquant dans une cellule de cette ligne puis en cliquant sur la balise <tr> place dans le slecteur de balise de la fentre Document (gure 5-13). Les colonnes ne peuvent pas tre slectionnes de cette manire car elles nont pas de balises HTML.
Figure 5-13
Slection dune ligne depuis le slecteur de balise
Pour slectionner lensemble du tableau, cliquez sur le bord droit ou infrieur du tableau, ou dans lune des cellules, puis cliquez sur la balise <table> place dans le slecteur de balise de la fentre Document.
Ajouter des lignes et des colonnes
Il existe plusieurs mthodes pour ajouter des lignes ou des colonnes en fonction de ce que vous souhaitez obtenir et des lments slectionns. Si aucune mise en forme particulire nest applique au tableau : 1. Slectionnez le tableau en cliquant sur la balise <table> dans le slecteur de balise. 2. Spciez le nombre de lignes ou de colonnes dans les champs Lignes et Cols du panneau Proprits.
95
3. Appuyez sur la touche Entre du clavier pour valider. Les lignes sajouteront en bas du tableau, les colonnes sur la droite. Si une mise en forme est applique au tableau : 1. Slectionnez une cellule dans une ligne ou une colonne. 2. Choisissez le menu Modier>Tableau>Insrer une ligne/Insrer une colonne ou Insrer des lignes ou des colonnes. Insrer une ligne Ajoute une ligne au-dessus de la ligne slectionne. Insrer une colonne Ajoute une colonne gauche de la colonne slectionne. Insrer des lignes ou des colonnes Ouvre une fentre qui vous permet dinsrer autant de lignes que de colonnes souhaites (gure 5-14).
Figure 5-14
Insrer des lignes ou des colonnes
Fusionner des cellules

Pour raliser le tableau de la gure 5-15, il est ncessaire de transformer certaines cellules. Le tableau de dpart est compos de 4 lignes et de 4 colonnes.
Figure 5-15
Tableau prsentant des cellules fusionnes
Pour fusionner les cellules de deux lignes, slectionnez les cellules en question, puis cliquez sur licne Combiner la slection rectangulaire des cellules du panneau Proprits (gure 5-16). Les cellules doivent tre adjacentes et slectionnes sur une seule ligne ou une seule colonne. Vous ne pouvez pas raliser de fusion avec une slection en forme de L.
96
Figure 5-16
Fusionner des cellules
Modier laspect du tableau

Couleurs darrire-plan
Pour amliorer la lisibilit de certains tableaux ou en augmenter lattrait, vous pouvez attribuer une couleur darrire-plan une ou plusieurs cellules du tableau. Nutilisez pas cette possibilit si vous souhaitez rester compatible XHTML 1.0 Strict car lattribution dune couleur ajoute lattribut bgcolor la cellule. Cet attribut ne gure pas dans la spcication. Dans ce cas, prfrez lusage dune feuille de style. Pour attribuer une couleur une cellule. Slectionnez cette cellule en cliquant dessus. Dans le panneau Proprits, indiquez une couleur darrire-plan dans le champ Ar-pl.
Figure 5-17
Slection dune couleur darrire-plan pour une cellule
Vous pourrez amliorer laspect du tableau par lajout de rgles de style pour les balises <table>, <th>, <td>. Pour cela consultez le chapitre 11.
Bordure
Par dfaut, les tableaux ont une valeur de bordure, qui est gnralement de 1 pixel. Si vous ne spciez aucune valeur dans le champ Bordure du panneau Proprits, cest cette
97
valeur qui sera afche. Il est prudent de spcier une valeur, mme 1 pixel, car certains navigateurs peuvent afcher des valeurs par dfaut diffrentes. Lajout de bordures au tableau et ses cellules en amliore galement la lisibilit. Pour ajouter une bordure extrieure au tableau, cliquez nimporte o dans ce dernier, slectionnez la balise <table> dans le slecteur de balise du document ou cliquez le bord gauche ou droit du tableau. Indiquez une taille pour la bordure dans le champ Bordure. La bordure cre entourera le tableau et afchera aussi un let de 1 pixel autour des cellules. Si vous spciez une taille de bordure gale 0, cest toutes les bordures du tableau qui seront supprimes. La gure 5-18 prsente, gauche, un tableau avec une bordure sur la balise <table> de 5 pixels, ses cellules ont une bordure de 1 pixel. Sur la droite, la bordure de la balise <table> est de 0 pixel. Les cellules nont plus de bordures. Lattribut border de la balise <table> gure dans les spcications XHTML 1.0 Strict.
Figure 5-18
Les bordures dun tableau
Espaces entre et dans les cellules
Par dfaut, les tableaux ont une valeur despace et de remplissage entre les cellules. Cette valeur est gnralement de 1 pixel. Si vous ne spciez aucune valeur, lespace entre et dans les cellules sera de 1 pixel. Il est prudent de spcier une valeur pour ces paramtres car certains navigateurs peuvent afcher des valeurs par dfaut diffrentes. Les valeurs de remplissage et despace entre les cellules sont applicables lensemble du tableau. Vous ne pourrez donc pas spcier une valeur particulire pour une seule cellule. Le remplissage reprsente une marge lintrieur de la cellule. La gure 5-19 prsente deux tableaux : la valeur de remplissage du tableau suprieur est de 10 pixels, celle du tableau infrieur est de 0 pixel.
Figure 5-19
Valeurs de remplissage des cellules
98
Pour attribuer une valeur de remplissage un tableau, slectionnez-le en cliquant nimporte o lintrieur de ce dernier, slectionnez la balise <table> dans le slecteur de balise du document ou cliquez sur lun des bords du tableau. Saisissez une valeur dans le champ Remplissage (gure 5-20) du panneau Proprits.
Figure 5-20
Les champs Remplissage et Espac. de cellule
Pour spcier lespacement des cellules, saisissez un chiffre dans le champ Espac. de cellule du panneau Proprits (voir gure 5-20). La gure 5-21 prsente lespacement des cellules des deux tableaux prcdents ; il est de 10 pixels pour le tableau suprieur et de 0 pixel pour le tableau infrieur.
Figure 5-21
Lespace entre les cellules
Les proprits des tableaux et des cellules

Au cours des sections prcdentes, nous vous avons prsent de nombreuses proprits relatives aux tableaux et aux cellules. Voici cependant un rcapitulatif des diffrentes proprits proposes dans Dreamweaver. Celles-ci safcheront diffremment en fonction de llment slectionn dans la page, savoir le tableau entier ou une ou plusieurs cellules.
Les proprits des tableaux
Figure 5-22
Les proprits des tableaux
99
Le champ ID de tableau permet de donner un nom au tableau. Cette option est particulirement utile lors de lutilisation dune feuille de style. Les champs Lignes, Cols et L permettent dindiquer le nombre de lignes et de colonnes composant le tableau ainsi que la largeur de ce dernier (en pixels ou pourcentage). Le champ Remplissage permet dattribuer une valeur de remplissage dans les cellules du tableau. Si vous ne souhaitez aucun remplissage, saisissez 0. Le champ Espac. de cellule permet dattribuer une valeur despacement des cellules. Si vous ne souhaitez aucun espacement, saisissez 0. La liste droulante Aligner spcie lalignement du tableau (Par dfaut, Gauche, Centrer ou Droite). Cet attribut nest pas conforme aux spcications XHTML 1.0 Strict. Le champ Bordure permet de spcier lpaisseur de la bordure du tableau. Si vous ne souhaitez aucune bordure, saisissez 0. Ces quatre icnes permettent de grer les valeurs de taille du tableau : effacer les largeurs de colonne ; convertir les largeurs de tableau en pixels ; convertir les largeurs de tableau en pourcentage ; effacer les hauteurs de ligne. La liste droulante Classe permet de choisir une classe (Aucun, Renommer ou Joindre la feuille de style) pour le style du tableau (voir chapitre 8).
Les proprits des cellules de tableaux
Figure 5-23
Les proprits des cellules de tableaux
Lorsque lon slectionne une cellule de tableau, la palette des Proprits peut se prsenter sous deux aspects suivant que lon active loption HTML ou bien loption CSS. Ces diffrences se situent dans la partie suprieure de la palette. Loption HTML permettra de choisir les proprits HTML du texte plac dans la cellule. Ces proprits insrent des balises pour donner un nouveau caractre au contenu de la cellule. Loption CSS permettra de choisir ou de crer de nouvelles rgles de style pour le contenu de la cellule. Voici la liste des diffrentes proprits des cellules de tableaux. Dans cette description nous nous attacherons prsenter la partie infrieure de la palette des Proprits des cellules de tableaux.
100
La partie suprieure du panneau Proprits comporte les diffrents attributs des textes. Ces deux icnes permettent respectivement de fusionner des cellules ou de les sparer. Les listes droulantes Horiz et Vert spcient respectivement lalignement horizontal et vertical des lments dans la cellule. Notez que les attributs align et valign sont compatibles XHTML 1.0 Strict. Les champs L et H permettent de spcier la hauteur et la largeur de la cellule. Ces attributs ne sont pas compatibles XHTML 1.0 Strict. La case cocher Pas de retour la ligne auto permet dafcher ou non les textes sur une seule ligne, sans retour la ligne. Lattribut nowrap nest pas compatible XHTML 1.0 Strict. La case cocher En-tte spcie que la cellule est une cellule den-tte dont la balise sera <th> (au lieu de <td>). Le contenu de cette cellule sera, par dfaut, centr et en gras. Cet aspect peut tre facilement modi en utilisant une feuille de style. Le champ Ar-pl permet de spcier la couleur darrire-plan de la cellule. Cet attribut nest pas compatible XHTML 1.0 Strict.
Importer des donnes tabulaires

Dreamweaver propose une commande permettant dimporter des donnes issues de logiciels tels que Microsoft Excel. Depuis ces logiciels tableurs, enregistrez le document au format Excel ou bien exportez les donnes au format texte seul tabuls. Ce genre dexportation existe gnralement dans le menu denregistrement. Pour importer ensuite les donnes, choisissez le menu Fichier>Importer>Donnes tabulaires ou bien Document Excel. Le tableau est alors cr automatiquement.
Figure 5-24
Les commandes dimportation de donnes Excel et textes tabuls
Conclusion
La cration de tableaux ft, depuis la cration de Dreamweaver, un moyen de mise en page trs usit. Les outils intgrs dans Dreamweaver ont t crs pour faciliter la tche de lintgrateur. La tendance actuelle prconise lusage des blocs pour la mise en page,
101
les tableaux tant utiliss uniquement pour la prsentation de donnes. Dreamweaver a conserv lensemble des outils dvelopps pour la cration de tableaux complexes, ce qui vous permettra de concevoir et de raliser trs facilement des tableaux prsentant de nombreuses donnes.
6
Les jeux de cadres et les cadres ottants
Les jeux de cadres et les cadres ottants permettent dintgrer des contenus de diffrentes pages HTML dans un seul et mme cran et dviter ainsi le rechargement de certaines de ces pages chaque transition. Ils ont t trs utiliss dans les annes passes comme mthode de mise en page, mais les inconvnients inhrents leur structure, lvolution de linfrastructure dInternet (haut dbit) et la gnralisation de la mise en page laide de feuilles de style, ont incit les crateurs de pages Web les dlaisser de plus en plus. Cependant, on les utilise toujours, surtout les cadres ottants, pour certaines applications, et cest la raison pour laquelle nous leur avons consacr ce chapitre.
Principe des jeux de cadres et des cadres ottants

Les jeux de cadres permettent de diviser la fentre du navigateur en plusieurs cadres ayant chacun un fonctionnement indpendant. Chaque cadre peut afcher une page diffrente possdant sa propre URL. En gnral, un jeu de cadres dnit une zone de navigation et une zone de contenu. Ainsi, vous pourrez par exemple dcouper la surface de lcran du navigateur en deux cadres : le premier (cadre du haut ou latral), afche un menu contenant des liens permettant daccder aux diffrents contenus du site, alors que le second afche les diffrentes pages de contenu correspondant aux cibles de ces liens. Lavantage dune pareille structure vite le rechargement du menu chaque changement de page, seule la page Web de contenu est recharge.
104
Structure dun jeu de deux cadres

Pour crer une structure minimale dun jeu de deux cadres, vous devez disposer dau moins trois chiers. Le premier reprsente le jeu de cadres proprement dit. Il ne comporte pas de balise <body>, mais une balise <frameset> qui dnit le nombre, lemplacement et la taille de chaque cadre, ainsi que lURL de la page qui sy afche initialement. Cest aussi dans ce chier que les noms des cadres seront nomms an de pouvoir ensuite sy rfrer pour cibler les pages de contenu. Les deux autres chiers correspondent des pages Web traditionnelles (avec des balises <body>) qui seront afches lintrieur des cadres et qui matrialisent la partie visible du systme. Lune de ces pages peut tre, par exemple, un menu dans lequel nous aurions intgr des liens vers des pages de contenu qui safcheraient dans le second cadre, alors que la seconde page peut tre la page Web de contenu par dfaut (voir la gure 6-1).
Figure 6-1
Organisation dun systme de jeu de cadres minimaliste
Les jeux de cadres et les cadres flottants CHAPITRE 6
105
Structure dun cadre ottant

La structure dun jeu de cadres ncessite que le chier comportant la balise <frameset> soit prvu initialement dans lorganisation des chiers du site. Il est donc souvent difcile dajouter une structure de ce type dans un site existant. Dautre part, le dcoupage en cadres de la fentre du navigateur doit tre ralis sur toute la largeur ou sur toute la hauteur de lcran. La structure dun cadre ottant (iframe) permet de dpasser ces limites. En effet, si la gestion du contenu afch dans liframe peut tre contrle de la mme manire quavec un jeu de cadres. Le cadre ottant est inclus dans une page HTML classique (avec une balise <body>) ce qui permet ainsi dinsrer un cadre dans une page Web existante. Dautre part, le cadre tant ottant, le dcoupage de la fentre du navigateur peut tre partiel, contrairement aux jeux de cadres traditionnels (voir la gure 6-2).
Figure 6-2
Organisation dun systme de cadre ottant (iframe)
Crer un jeu de cadres

Pour illustrer la cration dun jeu de cadres, nous allons recrer le site Montagne-65 et ses diffrentes rubriques (Histoires, Randonnes, Flore et Nous contacter). Le jeu de cadres sera constitu de deux cadres : un cadre suprieur dans lequel sera plac limage
106
den-tte des pages et le menu de navigation, et un cadre infrieur dans lequel viendront safcher les contenus des diffrentes pages du site accessibles depuis le menu.
La DTD des jeux de cadres Un jeu de cadres se compose de deux types de documents : les documents constituant les pages HTML afches dans le navigateur et un ou plusieurs documents qui dnissent les cadres de la page. Les pages de documents peuvent tre ralises en utilisant un DOCTYPE XHTML 1.0 Strict puisquelles contiennent les mmes lments HTML quune page classique. En revanche, la page dnissant les cadres ne peut pas utiliser un DOCTYPE XHTML 1.0 Strict puisquelle ne comporte pas de balise <body>. Soyez rassur, lorsque vous crez un jeu de cadres avec Dreamweaver, le chier contenant la dnition du jeu de cadres, transforme automatiquement son DOCTYPE en DTD HTML 4.01 Frameset ou bien en DTD XHTML 1.0 Frameset, suivant quil est issu dun document avec un DOCTYPE en 4.01 ou en XHTML 1.0 Strict ; vous navez donc pas vous soucier du DOCTYPE de votre jeu de cadres. Cependant, il est intressant de noter quan de rendre vos mises en forme plus agrables, Dreamweaver autorise certains attributs de la balise <frameset>, qui ne font pourtant pas partie des spcications de la W3C des deux DOCTYPE de frameset cites plus haut. Ainsi, pour votre information, sachez que les attributs frameborder, framespacing et border de <frameset>, crs automatiquement par Dreamweaver, ne sont pas compatibles avec ces spcications, de mme que lcriture de la valeur "No" de lattribut scrolling de la balise frame nest pas conforme car cette valeur devrait apparatre en lettres minuscules ("no").
Pour crer la structure du jeu de cadres, nous vous proposons de partir dun document HTML existant dans lequel nous aurons pralablement intgr limage den-tte et le menu (vous trouverez ce document dans les ressources en ligne du chapitre 6). 1. Ouvrez la page frameset-menu_base.html et enregistrez-la sous le nom framesetmenu.html. 2. Ouvrez la catgorie Mise en forme dans le panneau Insertion (voir repre de la gure 6-3), puis cliquez sur la petite che situe droite de licne Cadres en bas de la liste (voir repre de la gure 6-3). 3. Slectionnez Cadre infrieur (voir repre de la gure 6-3) parmi les diffrents choix proposs an que le contenu de la page courante conserve sa place dans le cadre suprieur et quun nouveau cadre sajoute dans la partie basse de la page (la partie bleue des dcoupes prdnies correspond la page en cours alors que les parties blanches reprsentent les nouveaux cadres qui seront ajouts). 4. La bote de dialogue Attributs daccessibilit des balises de cadre souvre alors, vous invitant renseigner le titre de chacun des cadres. Slectionnez bottomFrame (cadre infrieur) dans la liste droulante Cadre et saisissez Contenu de la page (voir repre de la gure 6-3) dans le champ Titre. Slectionnez ensuite mainFrame (cadre suprieur) dans la liste droulante Cadre et renseignez le champ Titre avec Menu de navigation. Cliquez sur OK pour valider vos choix.
107
Figure 6-3
Cration dun jeu de cadres prdni
5. Dans le panneau Proprits du jeu de cadres (les informations du jeu doivent safcher ds la validation de la bote de dialogue, sinon cliquez sur la bordure du cadre pour les faire apparatre), slectionnez Non dans la liste droulante Bordures. Le jeu nayant pas de bordure, il est donc inutile de renseigner la couleur de bordure, ainsi que sa largeur, pour laquelle nous conserverons la valeur par dfaut, soit 0 (voir repre de la gure 6-4).
Figure 6-4
Conguration du panneau Proprits dun jeu de cadres
6. Assurez-vous que la partie basse du panneau Proprits est bien visible. Dans le cas contraire, cliquez sur la che situe en bas droite du panneau (voir repre de la gure 6-4) pour pouvoir accder au slecteur de cadre. Cliquez sur le cadre infrieur dans le slecteur (la zone grise doit safcher en bas, voir repre de la gure 6-4), puis slectionnez loption Relatif dans la liste droulante Units (voir repre de la gure 6-4). Le cadre infrieur sajustera ainsi la zone qui sera encore disponible dans lcran du navigateur une fois que la taille du cadre suprieur sera dnie.
108
Bordures de cadre Vous pouvez choisir dafcher ou de masquer les bordures dun cadre. Si vous souhaitez quelles soient visibles, vous devrez alors prciser de quelle faon elles le seront (taille, couleur). Pour cela, renseignez les proprits Bordures, Larg. de bordure et Couleur de bordure du panneau Proprits du jeu de cadres ou paramtrez ces options au niveau de chaque cadre. En cas de conit, ce sont les choix de la bordure du cadre qui seront prioritaires et les paramtres de bordures du jeu de cadres seront ignors. Paramtres des bordures dun jeu de cadres Pour paramtrer les bordures dun jeu de cadres, vous devez avoir pralablement slectionn le jeu de cadres en cliquant sur la bordure dun cadre dans la fentre Document ou sur la bordure qui entoure les cadres dans la fentre Cadres, accessible depuis le menu Fentre>Cadres (voir gure 6-5). Dans le panneau Proprits dun jeu de cadres, trois paramtres peuvent tre congurs : Liste droulante Bordures Permet de congurer le type de bordure du jeu de cadres. Trois choix sont disponibles : Oui La bordure sera afche en 3D et en couleur ; Non Les cadres seront afchs en 2D et en niveaux de gris ; Par dfaut Le choix du type de bordure sera con au paramtrage du navigateur (en gnral, Oui). Champ Couleur de bordure Permet de dnir la couleur de toutes les bordures du cadre concern. Si une autre couleur de bordure est spcie dans un des cadres du jeu, elle sera prioritaire. Champ Larg. de bordure Permet de prciser la largeur des bordures du jeu de cadres concern. Pour nafcher aucune bordure, conservez la valeur par dfaut, soit 0. Paramtres des bordures dun cadre particulier Pour paramtrer les bordures dun cadre particulier, vous devez au pralable le slectionner en cliquant sur le cadre en rapport dans la fentre Cadres (voir gure 6-5, si la fentre Cadres nest pas visible, vous pouvez lafcher depuis le menu Fentre>Cadre ou encore avec le raccourci clavier Maj + F12). Dans le panneau Proprits dun cadre, deux paramtres peuvent tre congurs : Liste droulante Bordures Permet de paramtrer le type de bordure pour un cadre particulier. Les options sont les mmes que pour le jeu de cadres (Oui, Non et Par dfaut). noter que pour dsactiver une bordure, tous les autres cadres adjacents doivent tre paramtrs sur Non. Champ Couleur de bordure Permet de dnir une couleur de bordure spcique pour toutes les bordures du cadre concern.
7. Slectionnez le cadre du haut dans le slecteur et choisissez cette fois Pixels dans la liste droulante Units. Si vous connaissez la valeur de limage den-tte et de son menu, saisissez-la dans le champ Ligne, sinon indiquez une valeur approximative dans un premier temps (par exemple, 200) avant dajuster sa taille laide de la souris en suivant la procdure ci-aprs. Dans la fentre Document, cliquez sur la barre de sparation des deux cadres et, tout en maintenant le bouton de la souris enfonc, dplacez-la sur le bas du menu. Lunit Pixels que nous avons slectionn dnit la taille de la ligne (soit la hauteur du cadre sil sagit dun cadre horizontal) ou la taille de la colonne (soit la largeur du cadre sil sagit dun cadre vertical) suivant une valeur absolue.
109
Units de la taille des cadres Pour paramtrer la taille des diffrents cadres et leur allouer ainsi un espace rserv, vous devez renseigner les proprits Units et Valeur du panneau Proprits du jeu de cadres. Pour cela, vous devez pralablement slectionner le jeu de cadres en cliquant sur la bordure dun cadre dans la fentre Document ou sur la bordure qui entoure les cadres dans la fentre Cadres (voir gure 6-5). Trois units diffrentes sont disponibles : Pixels Permet de paramtrer la taille du cadre (colonne ou ligne) avec une valeur absolue en pixels. Cette option est bien adapte pour un cadre dont la taille ne doit pas varier en fonction de la dimension totale du jeu de cadres (correspond en gnral celle de la fentre du navigateur). Ce choix est souvent associ avec un autre cadre congur en Relatif an que ce dernier puisse combler la diffrence entre la taille totale du jeu de cadres et la taille du cadre congur en pixels. Pourcentage Permet de paramtrer la taille du cadre (colonne ou ligne) avec une valeur relative la taille totale du jeu de cadres. En gnral, les autres cadres du mme jeu doivent aussi tre congurs en pourcentage an que la somme des valeurs soit gale 100 %. Cependant, si des valeurs en pixels sont attribues aux autres cadres, elles seront prioritaires aux valeurs en pourcentage. Relatif Permet de paramtrer la taille dun cadre (colonne ou ligne) an de combler lespace encore disponible par rapport la dimension totale du jeu de cadres (correspond en gnral celle de la fentre du navigateur). Si vous choisissez cette unit, Dreamweaver indiquera automatiquement la valeur 1 dans le champ Valeur. Cette valeur sera ensuite traduite dans le code source du jeu de cadres par un caractre * en lieu et place de la valeur correspondante.
Figure 6-5
Slection du jeu de cadres en cliquant sur le contour des cadres dans la fentre Cadres
8. Vous allez prsent utiliser la fentre Cadre pour congurer notre jeu de cadres. Si elle nest pas visible, afchez la via le menu Fentre>Cadres ou laide du raccourci clavier Maj + F2 (ou Shift + F2 sur Mac). Dans cette fentre, cliquez alors dans le cadre suprieur mainFrame (voir repre de la gure 6-6), puis renseignez son nom dans le panneau Proprits, soit menu pour notre exemple (voir repre de la gure 6-6). 9. Slectionnez Non dans la liste droulante Bordures et ne spciez aucune valeur dans le champ Couleur de bordure (voir repre de la gure 6-6) de manire conrmer le choix que nous avons pris pour le paramtrage du jeu de cadres (ne pas afcher les barres de sparation des cadres). 10. Choisissez Non dans la liste droulante Dler de manire masquer la barre de dlement du cadre quelle que soit la taille du contenu. Cochez loption Ne pas redimens. an que lutilisateur ne puisse pas redimensionner le cadre depuis le navigateur (voir repre de la gure 6-6).
110
11. En bas du panneau Proprits, deux champs vous permettent de congurer les marges internes du cadre slectionn (voir repre de la gure 6-6) : Champ Largeur de marge Permet de congurer la taille en pixels dune marge intrieure du cadre, de manire que le contenu du cadre puisse tre dcal par rapport son bord gauche. Champ Hauteur de marge Permet de congurer la taille en pixels qui sparera le contenu du cadre du bord haut du cadre. Pour notre exemple, il nest pas utile de renseigner ces champs car ces informations sont gres par un style appliqu aux pages qui safcheront dans les cadres. Dans un tout autre contexte, il pourra tre intressant de contrler directement ces marges depuis le panneau Proprits du cadre concern, notamment si lon dsire appliquer les mmes marges internes quelle que soit la page afche dans le cadre.
Paramtrage dun cadre Pour accder aux paramtres dun cadre, vous devez au pralable le slectionner dans la fentre Cadres ou en cliquant dessus tout en maintenant la touche Alt enfonce depuis la fentre Document. En plus du paramtrage de la bordure et de sa couleur (voir encadr prcdent Bordures de cadre ), le panneau Proprits dun cadre propose dautres paramtres : Champ Nom du cadre Permet de renseigner le nom du cadre. Mme si celui-ci nest pas obligatoire, il est cependant recommand de lindiquer car il peut tre repris comme rfrence dans un script ou comme cible dans un lien hypertexte (attribut target). Le nom du cadre ne doit comporter quun seul mot, tre constitu exclusivement de caractres alphanumriques sans accent ou du caractre de soulignement (_) et commencer par une lettre. Champ Src Permet dindiquer lURL de la page Web qui sera afche par dfaut dans le cadre lors de lappel initial du jeu de cadres. Pour cela, il suft de cliquer sur licne Rechercher le chier et de slectionner la page correspondante. noter que lURL renseigne dans ce champ peut tre relative par rapport lemplacement du jeu de cadres ou absolue (par exemple, http://www.eyrolles.com) si vous dsirez afcher dans la page de votre site un contenu situ dans un autre site. Liste droulante Dler Permet dindiquer si la barre de dlement doit apparatre ou non. Plusieurs options sont proposes : Oui Permet de forcer lapparition ; Non Permet de bloquer son apparition ; Auto Permet de conditionner son apparition si la taille du contenu est suprieure celle du cadre ; Par dfaut Permet dutiliser la valeur par dfaut du navigateur (en gnral, Auto). Case cocher Ne pas redimens. Permet dempcher lutilisateur de redimensionner lui-mme la taille dun cadre depuis le navigateur. Champ Largeur de marge Permet de congurer la marge latrale qui sparera le contenu de la page afche dans le cadre du bord gauche du jeu de cadres. Champ Hauteur de marge Permet de congurer la marge verticale qui sparera le contenu de la page afche dans le cadre du bord haut du jeu de cadres.
111
Figure 6-6
Conguration du panneau Proprits dun cadre
12. Cliquez prsent sur le cadre infrieur dans la fentre Cadres et saisissez contenu dans le champ Nom du cadre du panneau Proprits. Attribuez-lui les mmes paramtres que le cadre menu pour les proprits Bordures, Couleur de bordure et Ne pas redimens. Slectionnez cette fois Auto dans la liste droulante Dler an que la barre de dlement apparaisse automatiquement si le contenu de la page est plus important que la taille du cadre. 13. Vous avez certainement remarqu que le cadre menu tait dj li avec la page du menu (frameset-menu.html) ouverte au dbut de la procdure (voir repre de la gure 6-6). Il nen est pas de mme pour le cadre contenu dont la proprit src est associe une valeur provisoire attribue automatiquement par Dreamweaver. Il convient donc maintenant de relier une page Web avec le contenu du cadre par dfaut contenu. Pour cela, cliquez sur licne Rechercher le chier et slectionnez la page frameset-contenu1.html. Le jeu de cadres ntant pas encore enregistr, un message dalerte vous avertit que Dreamweaver utilisera un chemin provisoire pour ce chier en attendant lenregistrement dnitif du jeu de cadres. Cliquez sur OK. 14. Avant denregistrer le jeu de cadres, activez-le en cliquant sur la bordure dun cadre dans la fentre Document ou sur la bordure qui entoure les cadres dans la fentre Cadres (le panneau Proprits du jeu de cadres doit alors apparatre en bas de la fentre Document, voir gure 6-5). Slectionnez ensuite le menu Fichier>Enregistrer le jeu de cadres et enregistrez le jeu de cadres sous le nom frameset-jeu.html.
Enregistrement dun cadre et dun jeu de cadres Vous pouvez enregistrer un jeu de cadres et ses cadres de faon individuelle (un cadre la fois) ou groupe : Enregistrement individuel dun jeu de cadres Assurez-vous que le jeu de cadres est bien slectionn et choisissez le menu Fichier>Enregistrer le jeu de cadres. Pour lenregistrer dans un nouveau chier, choisissez Fichier>Enregistrer le jeu de cadres sous. Enregistrement individuel dun cadre Assurez-vous que le cadre est bien slectionn et choisissez le menu Fichier>Enregistrer le cadre ou Fichier>Enregistrer le cadre sous pour le sauvegarder dans un nouveau chier. Enregistrement de lensemble du jeu de cadres et de ses cadres Pour effectuer cette opration, il est recommand de fermer au pralable les autres chiers et de ne laisser ouvert que les chiers appartenant au jeu de cadres. Slectionnez ensuite le menu Fichier>Enregistrer tout. chaque enregistrement, une zone grise apparatra autour de llment (cadres ou jeu de cadres) en cours denregistrement. Observez bien cette assistance visuelle avant de nommer vos chiers en consquence.
112
15. Tous les chiers du jeu de cadres sont maintenant enregistrs. Appuyez sur la touche F12 (ou Option + F12 sur Mac) pour tester le jeu de cadres dans le navigateur. Le menu doit safcher correctement dans le cadre suprieur et la page de contenu par dfaut (frameset-contenu1.html) doit apparatre dans le cadre infrieur. Les liens du menu ne fonctionnent pas car ils nont pas encore t congurs pour grer le contenu du cadre infrieur. La section suivante prsente la marche suivre pour paramtrer les liens.
Congurer les liens dun jeu de cadres

La page cible par un lien hypertexte safche par dfaut dans le cadre en cours. Dans la majorit des cas, les liens hypertextes intgrs dans un jeu de cadres doivent interagir (en changeant le contenu du cadre, par exemple) dans un cadre diffrent de celui dans lequel ils sont placs. Il convient donc de congurer la cible (attribut target de la balise <a>) de chaque lien hypertexte an de spcier dans quel cadre la page correspondante lURL du lien devra souvrir. Pour notre exemple, nous dsirons afcher les diffrentes pages Web correspondant aux rubriques du site Montagne-65 dans le cadre contenu (cadre infrieur du jeu de cadres). Il convient donc de congurer la cible des liens hypertextes du menu de sorte que la page paramtre dans lURL de chaque lien hypertexte safche dans le cadre contenu. 1. Ouvrez le jeu de cadres frameset-jeu.html ralis prcdemment.
Figure 6-7
Conguration dun lien hypertexte dun jeu de cadres
2. Dans le cadre suprieur, slectionnez le premier lien du menu, soit Histoires, pour notre exemple (voir repre de la gure 6-7). Dans le panneau Proprits, cliquez
113
sur licne Rechercher le chier et slectionnez la page correspondante cette rubrique, soit frameset-contenu1.html pour notre exemple. 3. Slectionnez ensuite le cadre contenu dans la liste droulante Cible, il sagit du cadre que nous avions attribu au cadre infrieur lors de la cration du jeu de cadres (voir repre de la gure 6-7). 4. Procdez de la mme manire pour les autres liens du menu en choisissant toujours le cadre contenu, mais en slectionnant pour chaque lien la page correspondante (pour notre exemple, frameset-contenu2.html, frameset-contenu3.html). 5. Assurez-vous que le cadre menu est bien slectionn (dans le cas contraire, cliquez dessus) et enregistrez la page frameset-menu.html via le menu Fichier>Enregistrer le cadre ou laide du raccourci clavier Ctrl + S (Cmd + S sur Mac). Testez ensuite le jeu de cadres dans le navigateur en appuyant sur la touche F12 (ou Option + F12 sur Mac). Vous devriez dsormais pouvoir changer le contenu du cadre infrieur en cliquant sur le lien hypertexte de chaque rubrique depuis le menu du cadre suprieur.
Cibles gnriques La cible dun lien hypertexte (attribut target) correspond au cadre dans lequel va souvrir le chier congur dans le lien. Les diffrents noms de cadre renseigns lors de la cration du jeu de cadres sont automatiquement ajouts la liste droulante Cible dun lien plac dans un cadre. Il existe cependant quatre cibles gnriques qui seront toujours prsentes dans la liste droulante Cible : _blank Permet douvrir le chier dans une nouvelle fentre du navigateur, la fentre en cours restant ouverte en arrire-plan. _parent Permet douvrir le chier dans le jeu de cadres parent du lien en remplaant le jeu de cadres par le nouveau chier. _self Permet douvrir le chier dans le mme cadre que celui o se trouve le lien en remplaant le contenu en cours par le nouveau chier (comportement par dfaut en labsence de cible). _top Permet douvrir le chier dans le jeu de cadres le plus haut dans la hirarchie du cadre courant en remplaant tous les cadres et jeux de cadres en cours (cette option est surtout utilise en prsence de cadres imbriqus).
Congurer du contenu sans cadre (noframe)

Lorsque les jeux de cadres ont t crs, certains navigateurs ne pouvaient pas les interprter et la solution tait alors dajouter une balise <noframe> contenant le code HTML dune page alternative. Dsormais, tous les navigateurs rcents sont capables dinterprter les jeux de cadres. Cependant, certains robots de moteur de recherche (dont le comportement est semblable celui des anciens navigateurs) ne peuvent toujours pas interprter correctement les contenus des jeux de cadres (ou ne le font que partiellement). Il est donc recommand de continuer de renseigner le contenu de la balise <noframe> en y insrant des mots-cls et des liens hypertextes menant aux diffrentes pages de contenu an damliorer la visibilit de votre jeu de cadres sur Internet.
114
Dans Dreamweaver, lorsque vous crez un jeu de cadres, cette balise <noframe> est automatiquement insre entre les balises </frameset> et </html> de la page du jeu de cadres (pour sen convaincre il suft dafcher le code du jeu de cadres cr prcdemment dans Dreamweaver). Le contenu de cette balise <noframe> tant destin initialement tre afch comme une page Web alternative au jeu de cadres, il sera structur comme le corps dune page HTML traditionnelle et sera donc plac, comme il se doit, dans une balise <body>. Bien entendu, vous pourriez crer le contenu de la page alternative en mode Code, mais Dreamweaver dispose dune fonctionnalit qui vous permettra de le faire en mode Cration. Voici la marche suivre pour cela : 1. Slectionnez le jeu de cadres et enregistrez-le dans un nouveau chier via le menu Fichier>Enregistrer le jeu de cadres sous. Pour notre exemple, nommez ce chier frameset-jeu2.html pour le dissocier du prcdent qui naura pas de contenu alternatif. 2. Slectionnez le menu Modier>Jeu de cadres>Modier le contenu sans cadres (voir repres , et de la gure 6-8). 3. Une page blanche doit alors safcher dans la fentre Document. Il suft maintenant dy ajouter le contenu de la page alternative de la mme manire que pour une page Web traditionnelle. Vous pourriez, par ailleurs, mettre en forme ce contenu avec des rgles CSS, mais tant donn que cette page est principalement destine aux robots, une structure HTML contenant une hirarchie de balises <h> (<h1>, <h2>, etc., voir repres et de la gure 6-8) et des liens hypertextes pointant sur les pages des diffrentes rubriques (voir repre de la gure 6-8) devrait sufre pour que les robots puissent recueillir les mots-cls ncessaires lindexation de la page et accder aux autres pages de contenu an de les indexer leur tour.
Figure 6-8
Conguration du contenu de la balise <noframe>
115
4. Enregistrez la nouvelle page du jeu de cadres via le menu Fichier>Enregistrer le jeu de cadres ou laide du raccourci clavier Ctlr + S (Cmd + S sur Mac) et testez-la dans le navigateur en appuyant sur la touche F12 (ou Option + F12 sur Mac) (pour votre test, afchez le code source du chier du jeu de cadres an de vous assurer de la prsence de la balise <noframe> et de son contenu).
Crer un cadre ottant (iframe)

Comme nous lavons dj indiqu prcdemment, les cadres ottants (iframes) peuvent tre intgrs dans une page HTML traditionnelle (contenant une balise <body>) et permettent dinsrer facilement dans une page Web le contenu dune autre page du mme site ou dun site diffrent (il faudra utiliser dans ce cas un lien absolu, par exemple http:// www.eyrolles.com/mapage.html). Si le cadre ottant est correctement nomm, il est possible de congurer un menu plac dans la page Web parent de la mme manire que pour un jeu de cadres traditionnel an de commander lafchage de diffrentes pages de contenu dans la fentre du cadre ottant. Pour insrer un cadre ottant dans une page Web, Dreamweaver met votre disposition loutil IFRAME, accessible depuis la catgorie Mise en forme de la barre Insertion. Pour illustrer son utilisation, nous vous proposons de crer une page dans laquelle nous intgrerons deux images cliquables qui permettront dafcher le titre et le descriptif de chaque image dans un cadre ottant (les informations des images doivent au pralable tre enregistres dans deux pages Web qui seront appeles dans le cadre ottant). 1. Crez tout dabord les deux pages de contenu qui contiendront le titre et le descriptif des deux images (pour notre exemple, nous nommerons les pages iframe-contenu1.html et iframe-contenu2.html). 2. Ouvrez une troisime page HTML standard (avec une balise <body>), enregistrez-la sous le nom iframe-page.html et insrez deux images cliquables gauche (voir repres et de la gure 6-9). Pour disposer les lments dans la page, vous pouvez utiliser la mise en forme de votre choix ( laide des tableaux ou des rgles de CSS), cela naura aucune incidence sur le fonctionnement du systme. Si vous utilisez une mise en forme laide de tableaux, placez le curseur de la souris dans la cellule du tableau destine recevoir le cadre ottant. Si vous utilisez une mise en forme laide des rgles de CSS, placez-le dans le coin suprieur gauche de la page (vous associerez ensuite un style de positionnement la balise <iframe> une fois quelle sera en place dans le code de la page). 3. Une fois le curseur en place au point dinsertion du cadre ottant dans la page, cliquez sur licne IFRAME de longlet Mise en forme du panneau Insertion (voir repre de la gure 6-9). Dreamweaver ajoute automatiquement la balise <iframe> au point dinsertion et lafchage bascule en mode Code.
116
Figure 6-9
Conguration dune balise <iframe>
4. Placez le curseur de la souris dans la balise <iframe> (juste avant le caractre >) et saisissez les attributs du code suivant en vous aidant de lassistant la saisie (Ctrl + Espace).
<iframe id="iframe1" name="info" src="iframe-contenu1.html" width="327" height="150" scrolling="auto" frameborder="0" >Votre navigateur ne supporte pas les iframes </iframe>
Principales proprits dun cadre ottant (iframe) Hormis les attributs height et width qui permettent de dnir la hauteur et la largeur du cadre ottant, les proprits de la balise <iframe> sont semblables celles des jeux de cadres : Attribut src Chemin conduisant la page Web (URL) qui sera afche par dfaut dans le cadre ottant. Attribut name Nom attribu au cadre ottant et qui pourra tre repris ensuite par des programmes JavaScript et comme valeur de lattribut target dun lien hypertexte plac dans la page parent pour cibler le cadre concern. Attribut frameborder Permet de contrler lafchage de la bordure du cadre ottant. Cette proprit peut tre congure avec la valeur 1 an dafcher une bordure autour du cadre ou avec la valeur 0 pour masquer la bordure. Attribut scrolling Permet de contrler lafchage des barres de dlement dans le cadre ottant. La valeur yes force lafchage dune barre de dlement horizontale et verticale, la valeur no le bloque. Quant la valeur auto, elle permet dafcher une barre de dlement uniquement si la taille de la page afche lintrieur du cadre est suprieure la taille de ce dernier. Attribut height Hauteur du cadre en pixels. Attribut witdh Largeur du cadre en pixels. noter que si le navigateur ne peut par interprter les cadres ottants, ce sont les informations saisies entre les balises <iframe> et </iframe> qui seront afches dans la page Web.
117
5. Une fois la saisie du code termine, revenez en mode Cration et slectionnez la premire image (voir repre de la gure 6-10). Dans le panneau Proprits, cliquez ensuite sur licne Rechercher le chier et slectionnez le chier iframecontenu1.htm ralis prcdemment (voir repre de la gure 6-10).
Figure 6-10
Conguration des liens vers le cadre ottant
6. Dans le champ Cible, saisissez la valeur de lattribut name que nous avons congur dans le code de la balise <iframe>, soit info pour notre exemple. 7. Slectionnez la seconde image et paramtrez galement la proprit Cible avec la valeur info mais, cette fois, slectionnez le chier iframe-contenu2.htm dans le champ Lien. 8. Enregistrez la page et testez-la dans le navigateur en appuyant sur la touche F12 (ou Option + F12 sur Mac). Lors du premier afchage, le cadre ottant doit afcher le contenu de la page par dfaut correspondant la premire image, soit iframecontenu1.htm. Cliquez ensuite sur la seconde image (voir repre de la gure 6-11) an de vrier que la page Web afche dans le cadre ottant change bien et afche dsormais la seconde page de contenu, soit iframe-contenu2.htm (voir repre de la gure 6-11).
118
Figure 6-11
Test du cadre ottant dans le navigateur
Les inconvnients des jeux de cadres et des cadres ottants

Le rfrencement des structures de cadres
Les jeux de cadres, un frein au rfrencement
Les jeux de cadres sont souvent mal interprts par les robots des moteurs de recherche et constituent un frein au rfrencement. Si vous utilisez une structure de jeu de cadres pour la page dindex dun site, il est alors vivement conseill dajouter une balise <noframe> contenant les diffrents liens hypertextes vers les pages de contenu, sans quoi vous risquez de bloquer lindexation de toutes les autres pages du site.
Le problme de lindexation isole dune page de contenu
Dans une structure de jeu de cadres ou de cadres ottants dont le contenu est gr par un menu, lindexation isole des pages de contenu peut poser des problmes lors de leur afchage dans un navigateur. En effet, si une page de contenu isole est rappele depuis les rsultats dun moteur de recherche, elle safchera alors dans le navigateur sans son cadre parent (et donc sans son menu de navigation dans le cas prsent) ce qui peut tre trs droutant pour linternaute, bloquant du mme coup laccs aux autres pages de contenu du site.
119
Il existe cependant un moyen pour quune page de contenu safche avec son cadre parent. En effet, il suft pour cela dinsrer dans chaque page de contenu le code JavaScript ci-dessous (remplacez page-parent.html par le nom du jeu de cadres ou de la page Web contenant liframe dans le cas dun cadre ottant). Ainsi, si lon appelle une page de contenu isole, son jeu de cadres parent rappelant le menu de navigation safchera automatiquement et permettra ainsi linternaute daccder aux autres pages du site (en guise de dmonstration, vous pouvez appeler la page iframe-contenu1.html dans laquelle a t intgr ce script).
<SCRIPT LANGUAGE="JavaScript"> if (parent.frames.length < 1) { document.location.href = 'page-parent.html'; } </SCRIPT>
Lenregistrement dans les Favoris

Lenregistrement des pages afches dans une structure jeux de cadres dans les Favoris dun navigateur peut aussi poser des problmes car cest URL du jeu de cadres (ou celle de la page parent de liframe) avec sa page de contenu par dfaut qui sera enregistre dans les signets du navigateur, et non le contenu visible au moment de lenregistrement. Ainsi, par la suite, lorsque linternaute dsirera afcher de nouveau la page mmorise dans ses favoris, il afchera la page du jeu de cadres avec le contenu du cadre par dfaut et non celui afch lors de lenregistrement dans ses favoris.
Conclusion
Mme si les jeux de cadres sont de moins en moins utiliss aujourdhui, cette technique reste nanmoins incontournable pour quelques applications. Dans ce cas, il convient de bien connatre leurs inconvnients et de mettre en place des solutions adaptes pour y remdier. Ainsi, il est recommand de renseigner la balise <noframe> avec du contenu HTML alternatif et des liens hypertextes (qui permettront aux robots daccder toutes les pages du site). De mme, si une page HTML destine safcher dans un cadre spcique vient tre appele seule dans le navigateur (cest--dire lorsque lURL de cette page est saisie directement), et cela au risque de priver linternaute du menu de navigation, il faut alors ajouter un code JavaScript pour le conteneur parent soit appel automatiquement.
7
Les formulaires et leur validation Spry
Principe dun formulaire
Les formulaires publis sur le Web prsentent beaucoup de similitudes avec ceux au format papier. Leur objectif commun est de recueillir des informations en vue de les analyser, puis de les traiter. Sur le Web, le traitement sera ralis par un programme serveur vers lequel sera dirig le ux dinformations issu de la saisie de linternaute. Ce programme peut tre ralis par un script CGI ou avec une technologie serveur telle que PHP, par exemple. Les informations que le formulaire rcuprera doivent tre mticuleusement organises et chaque donne doit tre lie un intitul qui la caractrise (en gnral, il sagit du nom attribu au champ de saisie concern).
Dlimiter les frontires dun formulaire

Au mme titre quun formulaire papier est souvent dlimit par un cadre, ou dfaut par la feuille de papier sur lequel il est imprim, les frontires dun formulaire Web doivent tre, elles aussi, prcisment dnies. Ainsi, chaque lment qui le constitue doit se trouver lintrieur de ses frontires, matrialises par une balise spcique, nomme <form>.
Les mthodes GET ou POST

Comme pour la plupart des applications Web, le transfert des diffrents couples intitul/ valeur issus du formulaire vers le programme serveur qui en assurera le traitement, utilise
122
le protocole HTTP (HyperText Transfer Protocol). Lenvoi de cette requte serveur peut tre ralis selon deux mthodes : La premire mthode, GET, ajoutera les couples dinformations la suite du nom du programme de traitement selon le format dURL (par exemple : contact.php?nom= Toto&prenom=jean). Linconvnient de cette mthode est que les informations sont visibles de tous, dans la barre dadresse du navigateur, et que le nombre total de caractres dans lURL est limit 255. La seconde mthode, POST, regroupera les mmes couples dinformations dans une variable denvironnement place dans le corps de la requte. Les donnes envoyes sont ainsi invisibles pour lutilisateur et leur nombre nest plus limit comme avec la mthode GET. En pratique, le type de mthode utilise doit tre dclar dans tous les formulaires Web. cet effet, un attribut spcique nomm method est congur dans chaque balise <form>.
La cible du formulaire
Le destinataire dun questionnaire papier doit tre clairement identi, notamment si le formulaire doit lui tre envoy par courrier. Il en est de mme pour le formulaire Web, pour lequel le chemin menant au programme charg de traiter les informations doit tre clairement spci. En pratique, lURL du programme destinataire des informations est dclare dans un attribut spcique nomm action de la balise <form> du formulaire.
La zone de formulaire
Lindispensable balise de formulaire
La premire action mener pour crer un formulaire consiste matrialiser la zone du formulaire en crant une balise <form>. Celle-ci dlimitera les bornes au-del desquelles linsertion dlments de formulaire ne sera pas possible. En dautres termes, un lment de formulaire doit tre obligatoirement intgr lintrieur dune balise <form>. Si vous tentez dajouter un lment de formulaire avant davoir dni la zone du formulaire, une bote de dialogue safchera dans Dreamweaver, vous rappelant lordre et vous invitant ajouter au pralable une balise <form>.
Les attributs de la balise de formulaire

Nous avons vu prcdemment que deux attributs de la balise <form> sont ncessaires son usage, mais il en existe dautres dont voici la description : Le champ Nom du formulaire congure lattribut id et permet didentier prcisment le formulaire. Mme sil nest pas frquent que plusieurs formulaires partagent
Les formulaires et leur validation Spry CHAPITRE 7
123
la mme page Web, ceci est cependant possible et lidentiant du formulaire permettra dans ce cas de les distinguer. Le champ Action congure lattribut action et permet de spcier lURL du programme qui prendra en charge le traitement des donnes. LURL peut tre relative ou absolue, dans le second cas, le chemin devra commencer par http:// (exemple : http://www.eyrolles.fr ). La liste droulante Cible congure lattribut target et permet de prciser dans quelle fentre doit tre appel le programme de traitement. Par dfaut, celui-ci souvrira dans la fentre active, mais si vous travaillez avec un jeu de cadres, il vous sera alors possible de prciser le nom dun cadre spcique. La liste droulante Mthode congure lattribut method et permet de transfrer les donnes vers le programme de traitement. Vous pouvez choisir dutiliser soit la mthode GET, soit la mthode POST (voir la section Mthodes GET ou POST dans ce chapitre). Le champ Mthode (voir repre de la gure 7-1) permet de dnir loption choisie. La liste droulante Enctype congure lattribut enctype et permet de dnir le type MIME qui sera utilis pour encoder les donnes envoyes au programme de traitement. Par dfaut, le type application/x-www-form-urlencoded est utilis, mais si vous dsirez joindre des chiers lenvoi de vos donnes, il faudra alors choisir le type multipart/form-data. noter que Dreamweaver congure automatiquement ce champ ds que vous ajoutez un champ de chier dans le formulaire. La liste droulante Classe congure lattribut class et permet dappliquer une classe tout le formulaire.
Figure 7-1
Panneau Proprits dune balise de formulaire
Insrer et congurer une balise de formulaire

Pour insrer une balise de formulaire dans une page, cliquez sur de la catgorie Formulaires du Panneau Insertion, puis sur le bouton Formulaire. En mode Cration, ds que la balise de formulaire est ajoute la page, elle est matrialise par un cadre en pointills rouges. Slectionnez-la an dafcher ses caractristiques dans le panneau Proprits (sil nest pas visible, activez-le depuis le menu Fentre>Proprits ou via le raccourci clavier Ctrl + F3). Pour illustrer notre propos, nous vous proposons de crer un formulaire de contact pour le site Montagne-65.
124
Figure 7-2
Cration et conguration dune balise de formulaire
1. Ouvrez la page contact.html du site Montagne-65 et enregistrez-la sous formulairecontact1.html. Supprimez ensuite le contenu actuel de la page et changez son titre en Nous contacter. 2. Placez votre curseur dans la page, en dessous du titre (voir repre ), puis slectionnez la catgorie Formulaires dans le menu plac en haut du panneau Insertion (voir repre de la gure 7-2), enn cliquez sur le bouton Formulaire (voir repres et de la gure 7-2). 3. Assurez-vous que le formulaire est bien slectionn et, si besoin, cliquez sur la balise du formulaire dans le slecteur de balise (voir repre de la gure 7-2) pour afcher les caractristiques du formulaire dans le panneau Proprits (voir repre de la gure 7-2). 4. Renseignez lidentiant du formulaire en saisissant formcontact dans le champ Nom du formulaire (voir repre de la gure 7-2). 5. Slectionnez la mthode GET pour cette premire application, cela permettra de vrier que les informations saisies sont bien envoyes au format dURL dans la barre dadresse. noter quen production, le choix de la mthode doit sappuyer sur les exigences du programme de traitement vers lequel seront envoyes les donnes et quen pratique, la mthode POST est souvent utilise pour des formulaires de ce genre.
125
6. Pour notre dmonstration (comme nous ne disposons pas de programme de traitement serveur), nous nous contenterons denvoyer les informations dans la page mme o se trouve le formulaire. Pour cela, cliquez sur licne Rechercher le chier, situe droite du champ Action, an de slectionner le chier formulaire-contact1.html. En pratique, la valeur du champ Action doit correspondre une page contenant un programme serveur capable de traiter les informations saisies. Celui-ci peut tre intgr dans la mme page que celle du formulaire ou tre disponible dans un chier serveur spcique, par exemple une page PHP dans laquelle nous aurions insr un script dajout de donnes dans une base. Pour plus de dtails sur ce type de programme, reportez-vous au chapitre 21 de cet ouvrage. 7. Pour cette premire application, il est inutile de renseigner les autres champs du panneau Proprits, mais sachez quils pourront tre modis ultrieurement si besoin.
Laccessibilit pour les formulaires

Pour favoriser lutilisation dun formulaire par des personnes souffrant dun handicap, il est important de respecter certaines contraintes. En effet, certains internautes ne voient pas ou mal les intituls des diffrents champs dun formulaire et utilisent des loupes dcran, des synthtiseurs vocaux ou dautres outils daide la navigation (lecteur braille). Dans ce cas, le contrle de linterface se fait souvent par le biais des touches du clavier et il convient alors daider linternaute dans sa navigation pour passer dun champ lautre ou de linformer de lintitul de chacun des champs par un message sonore. Pour cela, nous devons construire le formulaire logiquement (en regroupant les lments par thmes, encadrs par des balises <fieldset>) ou associer une tiquette (balise <label>) chaque lment du formulaire. Les tiquettes seront ensuite interprtes par les outils daide la navigation.
Regrouper des lments de formulaire

Un formulaire conforme aux contraintes de laccessibilit doit tre dcoup en diffrentes parties selon des thmes en rapport avec le contexte. Ces parties doivent tre dlimites par des balises <fieldset>. lintrieur de cette premire balise, une seconde balise <legend> doit encadrer un texte indiquant le thme du regroupement (voir exemple cidessous).
<fieldset> <legend> Coordonnes du contact </legend><br /> Nom : <input type="text" name="nomcontact" id="nomcontact" /> Adresse : <input type="text" name="adrcontact" id="adrcontact" /> </fieldset>
126
Associer une tiquette chaque lment de formulaire

Pour informer linternaute de lintitul de chaque champ, une balise <label> doit tre ajoute et contenir un texte explicatif. Cette information est bien plus quun simple texte, elle sera reprise par les systmes lecture vocale et permettra aux personnes malvoyantes de connatre lintitul du champ. Par ailleurs, avec la balise <label>, le texte explicatif devient actif avec les cases cocher et les boutons radio. Ainsi, pour slectionner une option, linternaute pourra cliquer un endroit quelconque de ce texte au lieu de devoir cliquer exactement dans la case ou le bouton radio correspondant. Il existe deux alternatives pour mettre en place cette balise : par enveloppement ou par jointure laide dun attribut for.
Enveloppement par la balise dtiquette
La premire mthode consiste placer la balise <label> comme conteneur de llment de formulaire et de son texte explicatif. Cette premire alternative prsente cependant un inconvnient car elle contraint llment de formulaire et son texte explicatif tre accols. Ainsi, il ne sera pas possible de sparer les deux lments par une balise div ou par une cellule de tableau, interdisant du mme coup la mise en page par tableaux et certaines structures de mise en page CSS.
<label>Nom : <input type="text" name="nomcontact" id="nomcontact" accesskey="n" tabindex="1" /></label>
Balise dtiquette jointe par lattribut for
La seconde mthode est plus souple car elle permet de dissocier le texte explicatif de llment de formulaire auquel il se rapporte. Pour cela, un attribut for dont la valeur fait rfrence lidentiant de llment de formulaire est ajout la balise <label>. Cette dernire peut ainsi envelopper sparment le texte explicatif li llment de formulaire sans tre pour autant accole.
<label for="nomcontact">Nom : </label> <input type="text" name="nomcontact" id="nomcontact" accesskey="n" tabindex="1" />
Aide la navigation dans les lments de formulaire

Pour les internautes dont la navigation dans un formulaire est rduite lutilisation du clavier, il est peut tre utile de pouvoir accder rapidement un lment de formulaire particulier ou encore de passer dun lment un autre laide de la touche Tab du clavier. La mise en place de ces assistants est trs simple car il suft dajouter des attributs spciques dans la balise de llment de formulaire.
127
Ainsi, pour accder directement un lment particulier, lattribut accesskey doit tre ajout la balise de llment avec pour valeur une lettre qui permettra dy accder. Cette lettre devra ensuite tre combine avec la touche Alt (ou Control sur Mac) pour accder directement llment de formulaire concern mais permettra aussi de valider une option directement si la lettre est rattache une case cocher ou un bouton radio. Pour grer la navigation inter-lment, il faut ajouter lattribut tabindex avec pour valeur un numro dordre qui permettra de passer dun lment lautre laide de la touche Tab (voir exemple de code ci-dessous). Avec ce systme, il est ainsi possible de spcier lordre du parcours des lments, ce qui peut tre apprciable si vous dsirez que lutilisateur suive un chemin diffrent de celui par dfaut.
<input type="text" name="nomcontact" id="nomcontact" accesskey="n" tabindex="1" />
Crer un formulaire accessible avec Dreamweaver Pour vous faciliter la tche, Dreamweaver vous accompagne dans la mise en place de ces balises. Ainsi, pour chaque cration dlment de formulaire, Dreamweaver afchera une bote de dialogue Attributs daccessibilit dans laquelle il sufra de choisir loption dassociation dtiquette que vous dsirez mettre en place (voir repre de la gure 7-4) ou encore de renseigner le nom de la touche daccs direct et le numro dordre de tabulation (voir repre de la gure 7-4). De la mme manire, il est aussi possible de dnir un regroupement dlments de formulaire laide du bouton Ensemble de champs dans la catgorie Formulaires du panneau Insertion.
Utiliser la fonction loupe

La fonction loupe dcran permet, sur la plupart des navigateurs, daugmenter ou de diminuer la taille des textes de la page avec les touches Ctrl et +/ ou encore Ctrl + molette (pour revenir la taille par dfaut du navigateur, il suft ensuite dutiliser la combinaison de touches Ctrl + 0). Mme si cette fonction loupe nest pas propre aux formulaires, elle doit pouvoir tre exploite par linternaute sur toutes les pages du site, formulaire compris. Pour que cette fonction puisse tre correctement exploite par linternaute, il conviendra dutiliser lunit du cadratin em (et non px ou pt) pour dnir la taille des textes du formulaire. En effet, cette unit permet de dnir la taille dun texte de manire relative. Un em correspond la taille du texte de llment parent (par exemple, font-size:0.8em correspondra une taille de texte de 80 % de celle du texte de llment parent).
Les lments standards dun formulaire

Une fois la balise de formulaire insre et congure dans la page, vous pouvez commencer ajouter les lments de formulaire lintrieur de cette balise.
128
La catgorie Formulaires du panneau Insertion

Vous trouverez ci-aprs les fonctions des diffrentes icnes de la catgorie Formulaires du panneau Insertion (voir gure 7-3).
Figure 7-3
Les diffrentes icnes de la catgorie Formulaires du panneau Insertion
129
Icne Formulaire Permet dajouter une balise de formulaire dans la page. Cest la premire chose quil faut faire avant de commencer ajouter des lments de formulaire. Icne Champ de texte Permet dajouter un lment de formulaire de type Champ de texte, le plus couramment utilis dans les formulaires. Le champ de texte est constitu dune seule ligne. Il existe nanmoins une option multiligne accessible depuis son panneau Proprits, mais, si cette option est active, le champ de texte se transformera en Zone de texte (voir descriptif ci-aprs). noter quil existe aussi une autre option, nomme Mot de passe, qui remplace les caractres saisis par des toiles. Icne Champ masqu Permet dajouter un lment de formulaire de type Champ masqu. Contrairement aux autres lments, le champ masqu ne sera pas visible (et donc non modiable par linternaute). Ce type de champ est souvent utilis dans les sites dynamiques pour envoyer lidentiant de lenregistrement qui doit tre mis jour dans une base de donnes. Icne Zone de texte Permet dajouter un lment de formulaire de type Zone de texte. Le nombre de lignes et le nombre de caractres par ligne peuvent tre congurs an de redimensionner la zone de saisie en fonction des besoins. Icne Case cocher Permet dajouter un lment de formulaire de type Case cocher. Les cases cocher permettent de choisir une ou plusieurs options dans une liste (contrairement aux boutons radio pour lesquels le choix sera toujours unique). Icne Groupe de cases cocher Permet dajouter un groupe dlments de formulaire de type Case cocher en une seule action. Icne Bouton radio Permet dajouter un lment de formulaire de type Bouton radio. Les boutons radio permettent de choisir une option unique parmi une liste de choix. Une fois les boutons radio ajouts dans le formulaire, il faudra nommer les diffrents boutons appartenant un mme groupe avec un nom identique. Icne Groupe de boutons radio Permet dajouter un groupe dlments de formulaire de type Bouton radio en une seule action. Une fois les boutons radio ajouts dans le formulaire, il faudra ajouter manuellement les attributs daccessibilit accesskey et tabindex chaque bouton (voir gure 7-8). Icne Liste/Menu Permet dajouter un lment de formulaire de type Liste ou Menu selon la conguration effectue dans le panneau Proprits une fois llment en place dans le formulaire. La liste permet de slectionner une ou plusieurs options dans une fentre alors que le menu permet de choisir une seule option dans un menu droulant. Icne Menu de reroutage Permet dajouter un lment de formulaire de type Menu de reroutage. Contrairement un menu droulant traditionnel, le menu de reroutage permet de rediriger automatiquement lutilisateur (ds la slection dune option) vers une URL relative ou absolue.
130
Icne Champ dimage Permet dajouter un lment de formulaire de type Champ dimage. Les champs dimage permettent de crer des boutons de formulaire personnaliss. Icne Champ de chier Permet dajouter un lment de formulaire de type Champ de chier. Les champs de chier permettent de crer un champ coupl avec un bouton Parcourir an de slectionner un chier en vue de son tlchargement sur le serveur. Icne Bouton Permet dajouter un bouton de formulaire. Selon leur conguration, les boutons permettent de soumettre le formulaire ou de le rinitialiser. Icne Etiquette Permet dajouter la balise daccessibilit <label> qui englobera automatiquement le texte pralablement slectionn. Icne Ensemble de champs Permet dajouter la balise daccessibilit <fieldset> an de regrouper plusieurs lments de formulaire sous une mme thmatique (revoir si besoin la section prcdente Regrouper des lments de formulaire ). Une balise <legend> sera aussi ajoute an dindiquer le nom du thme commun. Icne Validation Spry de champ de texte Permet dajouter un widget Spry qui afchera les tats de validation dun champ de texte (format non valide, valeur obligatoire) lors de la saisie de lutilisateur. Icne Validation Spry de zone de texte Permet dajouter un widget Spry qui afchera les tats de validation dune zone de texte (nombre maximal de caractres dpass, valeur obligatoire) lors de la saisie de lutilisateur. Icne Validation Spry de case cocher Permet dajouter un widget Spry qui afchera les tats de validation dune case cocher (ou dun groupe de cases cocher) lors du choix de lutilisateur (nombre minimal de slection, veuillez effectuer une slection). Icne Validation Spry de slection Permet dajouter un widget Spry qui afchera les tats de validation dun menu droulant (veuillez slectionner un lment, veuillez slectionner un tat valide) lors de la slection par lutilisateur dune option dans le menu droulant. Icne Validation Spry de mot de passe Permet dappliquer des rgles de saisie sur la prsence et le format du mot de passe. Icne Validation Spry de conrmation Permet de sassurer que lutilisateur a bien saisi des informations identiques dans deux champs texte similaires (pour la conrmation de saisie dun mot de passe ou dun e-mail par exemple). Icne Validation Spry de groupe de boutons radio Permet de grer la validation de leur slection (tat obligatoire, invalide)
131
Mettre en forme un formulaire

Pour placer les lments de formulaire dans la page, vous pouvez opter pour une mise en forme par tableaux ou par CSS. Pour ce premier exemple de formulaire, nous utiliserons une mise en forme traditionnelle laide des tableaux (voir chapitre 5). Nous prsenterons ensuite dautres formulaires dont la mise en forme sera ralise par CSS (la structure ne sera pas dtaille ici car la mise en forme laide des CSS sera aborde au chapitre 11).
Insrer et congurer un champ de texte

Le champ de texte est llment de formulaire le plus couramment utilis. Il permet de saisir un texte sur une seule ligne et correspond la majorit des informations demandes dans un formulaire (Nom, E-mail). Si le champ de texte est utilis pour saisir un mot de passe (dans un formulaire de login, par exemple), il faut alors valider loption Mot de passe an que les caractres saisis dans le champ soient masqus (dans ce cas, les caractres sont transforms en toiles). Voici la marche suivre pour insrer et congurer un champ de texte dans un formulaire : 1. Positionnez le curseur lendroit o vous souhaitez insrer le champ de texte (voir repre de la gure 7-4) et cliquez sur le bouton Champ de texte de la catgorie Formulaires du panneau Insertion (voir repre de la gure 7-4).
Figure 7-4
Insertion dun champ de texte dans le formulaire et conguration de ses paramtres daccessibilit
132
2. Dans la bote de dialogue Attributs daccessibilit des balises dentre, renseignez lidentiant (valeur attribue lattribut id et name de la balise dentre), puis ltiquette (texte explicatif qui sera plac ct de llment du formulaire, voir repre de la gure 7-4). Comme nous lavons vu dans la section prcdente, ltiquette dun lment de formulaire peut tre lie ce dernier grce une balise <label> qui englobera ltiquette et llment, ou avec une balise <label> lie llment avec un attribut for (revoir si besoin la section prcdente Laccessibilit pour les formulaires ). Dans notre exemple, nous choisirons la seconde solution an de pouvoir ensuite les sparer et ainsi placer ltiquette dans une autre cellule que celle de llment (voir repre de la gure 7-4). 3. La rubrique Position de la bote de dialogue permet de placer ltiquette avant ou aprs llment de formulaire. Pour notre exemple, nous conserverons loption par dfaut car nous serons amens dplacer ltiquette par la suite. 4. Les champs Cl daccs et Ordre des tabulations permettent respectivement de choisir la touche qui permettra daccder directement llment et lordre de tabulation de llment. Dans notre exemple, nous choisirons la lettre n pour accder au champ de saisie du nom et nous attribuerons lordre 1 an de commencer la saisie par ce champ (voir repre de la gure 7-4). 5. Une fois le paramtrage effectu, cliquez sur le bouton OK pour valider vos choix. Le champ de saisie, prcd de son tiquette, doit alors apparatre au point dinsertion dans la colonne de droite du tableau. 6. An que les diffrents champs soient aligns, nous allons dplacer ltiquette du champ dans la colonne de gauche. Pour cela, cliquez nimporte o dans le texte de ltiquette et slectionnez la balise <label> dans le slecteur de balise (voir repre de la gure 7-5) an de bien slectionner lensemble de la balise daccessibilit et le texte quelle contient. Faites ensuite glisser la slection dans la premire colonne (voir repre de la gure 7-5). 7. Procdez de la mme manire pour ajouter un second champ de texte destin la saisie de le-mail de linternaute. Pour ce second champ, lidentiant sera mailcontact, ltiquette E-mail :, la cl daccs m et lordre de tabulation 2.
Figure 7-5
Dplacement de ltiquette du champ de texte
133
8. Une fois le champ intgr, il est possible daccder au panneau Proprits pour en modier la taille (champ Larg. de caract.) ou congurer un nombre maximal de caractres pour la saisie (champ Nb max. de caract.). noter que la taille du champ est quantie en nombre de caractres de la mme manire que le nombre maximal de caractres saisis. La valeur de ce dernier peut dailleurs tre suprieure celle de la taille du champ et permettre ainsi de conserver une prsentation des champs de texte homogne en acceptant, pour certains dentre eux, un nombre de caractres suprieur celui du champ visible. 9. Nous allons prsent augmenter la taille du champ destin la saisie de ladresse e-mail 50 caractres (voir repre de la gure 7-6). Pour cela, slectionnez le champ en question dans la fentre Document (voir repres et de la gure 7-6), puis saisissez la valeur 50 dans le champ Larg. de caract. (voir repre de la gure 7-6).
Figure 7-6
Conguration du champ de texte destin la saisie de ladresse e-mail
10. Le champ Val. init. permet de mmoriser un texte qui sera afch par dfaut directement dans le champ de saisie lors de lappel du formulaire dans un navigateur (vous pourriez, par exemple, le congurer avec le texte Saisissez votre nom). Lutilisateur devra ensuite supprimer ce texte du champ pour le remplacer par son nom. 11. Le panneau Proprits vous permet aussi de choisir un type. Par dfaut, il est congur en ligne simple et correspond aux champs de texte les plus courants. Si vous dsirez utiliser ce champ pour saisir un mot de passe, vous pouvez masquer la saisie de ce dernier en slectionnant le type Mot de passe. Le type Multi lignes permet, quant lui, de convertir llment de formulaire Champ de texte en un lment de formulaire Zone de texte, que nous prsenterons par la suite. La case Dsactiv permet de bloquer compltement laccs la zone de texte si elle est coche, alors que la case Lecture seule permet de transformer la zone de texte en une zone lecture seule, mais en permettant toutefois dy accder avec le curseur (ces deux dernires options peuvent tre notamment utilises lorsque vous crez un formulaire de modication de donnes et que vous ne dsirez pas que certaines dentre elles soient changes).
134
Insrer et congurer des boutons radio

Les boutons radio permettent de slectionner un lment unique parmi les choix proposs. Ils se caractrisent par le fait que chaque lment dune mme srie porte le mme nom (contrairement aux autres lments de formulaire). Ainsi, lorsque lutilisateur choisit un lment dune srie, cest la valeur de llment slectionn qui est associ au nom de la srie. Pour insrer une srie de boutons radio dans un formulaire, Dreamweaver propose deux alternatives. La premire consiste ajouter individuellement chacun des boutons, alors que la seconde permet dajouter la srie complte en une seule et mme action. Avec la premire mthode, tous les paramtres daccessibilit seront congurs dans la bote de dialogue de chaque bouton, mais il faudra modier individuellement leur nom en les remplaant par le nom commun de la srie. linverse, avec la seconde mthode, le nom commun de la srie sera automatiquement congur pour chaque lment, mais il faudra, en revanche, rgler manuellement leurs paramtres daccessibilit. Pour illustrer linsertion de boutons radio, nous allons ajouter une srie de deux boutons an que linternaute puisse indiquer son niveau de randonneur. Pour cela, nous utiliserons la seconde mthode (insertion dun groupe de boutons). 1. Positionnez le curseur lendroit o vous souhaitez insrer les boutons radio et cliquez sur licne Groupe de boutons radio de la catgorie Formulaires du panneau Insertion (voir repre de la gure 7-3). 2. Dans la bote de dialogue Groupe de boutons radio, saisissez le nom qui sera attribu chaque bouton de cette mme srie, soit niveau dans notre exemple (voir gure 7-7). 3. Dans le cadre Bouton radio de cette bote de dialogue, cliquez sur chacune des tiquettes par dfaut et renommez-les Dbutant et Expriment (voir repre de la gure 7-7). noter que ces noms seront ensuite afchs droite de chaque bouton. Procdez de la mme manire pour modier les valeurs correspondantes ces deux boutons en remplaant les valeurs par dfaut en debutant et experimente (voir repre de la gure 7-7). Il est important de noter que, contrairement aux tiquettes pour lesquelles vous pouvez saisir le texte de votre choix sans contrainte, la valeur du bouton ne doit pas comporter de caractres accentus ni despace, de manire permettre leur traitement par le programme destinataire du formulaire. 4. Cochez ensuite loption Sauts de ligne (Balises <br>) pour la mthode de mise en forme utiliser an de disposer les boutons de la srie sur des lignes diffrentes sans recourir un tableau (voir repre de la gure 7-7). 5. Si vous dsirez ajouter dautres boutons radio, cliquez simplement sur le bouton + situ au-dessus du cadre central de la bote de dialogue. Pour supprimer des boutons, cliquez sur le bouton . Enn, utilisez les ches situes droite de ces deux boutons pour classer les boutons radio dans un ordre spcique. Une fois la conguration termine, cliquez sur OK pour valider vos choix.
135
Figure 7-7
Conguration dun groupe de boutons radio
6. Les deux boutons radio doivent dsormais tre ajouts au point dinsertion. Cependant, en ce qui concerne laccessibilit de chaque bouton radio, si la balise <label> et son tiquette ont bien t ajoutes automatiquement, il nen est pas de mme de la conguration des attributs accesskey et tabindex qui permettent daccder directement llment concern laide dun raccourci clavier et de passer dun lment lautre selon un ordre dtermin. Pour ajouter ces deux attributs, slectionnez le premier bouton de la srie, puis appuyez sur Ctrl + T (ou Cmd + T sur Mac) pour ouvrir lditeur de balise rapide (voir repre de la gure 7-8). Placez ensuite le curseur juste avant les caractres de fermeture de la balise (/>) et saisissez le code accesskey="d" tabindex="3" (voir repres et de la gure 7-8). Appuyez sur la touche Entre pour valider votre modication. Procdez de la mme manire pour le second bouton radio du groupe en choisissant une autre lettre et un ordre suprieur au prcdent.
Figure 7-8
Conguration des attributs daccessibilit accesskey et tabindex dun bouton radio
Les boutons radio sont dsormais oprationnels. Si vous dsirez congurer lun dentre eux pour quil soit activ par dfaut, slectionnez-le dans la fentre Document (voir repre de la gure 7-9) avant de cocher la case Activ dans le panneau Proprits de llment (voir repre de la gure 7-9).
136
Figure 7-9
Conguration de ltat initial dun bouton radio dans le panneau Proprits
Insrer et congurer des cases cocher

Les cases cocher permettent de slectionner un ou plusieurs lments parmi les choix proposs. Contrairement aux boutons radio, chaque case cocher doit avoir son propre nom. Ainsi, lorsque lutilisateur coche une ou plusieurs cases cocher, les informations envoyes seront composes dautant de couples nom/valeur quil y aura de cases coches. Depuis la version CS4, Dreamweaver propose aussi la cration groupe de plusieurs cases cocher (voir le repre de la gure 7-3). La dmarche pour crer un groupe de cases cocher est similaire celle des boutons radio que nous venons de prsenter, hormis le fait quil faudra ensuite personnaliser individuellement la valeur de chaque attribut name des diffrentes cases cres de cette manire. Pour illustrer leur insertion, nous allons ajouter une case cocher an que linternaute puisse indiquer sil aimerait recevoir les dates des prochaines randonnes. 1. Reprenez la page prcdente et positionnez le curseur dans la cellule situe en dessous de celle contenant les boutons radio. Cliquez sur licne Case cocher de la catgorie Formulaires du panneau Insertion (voir repre de la gure 7-3). 2. Dans la bote de dialogue Attributs daccessibilit des balises dentre qui souvre alors, saisissez comme identiant randonnees et comme tiquette Je dsire recevoir la liste des prochaines randonnes (voir repre de la gure 7-10). 3. Dans la rubrique Style, cochez loption Joindre une balise dtiquette laide de lattribut 'for', mais sachez que nous aurions galement pu choisir la premire option (Envelopper avec une balise dtiquette) car nous ne dplacerons pas ltiquette par la suite (voir repre de la gure 7-10). 4. Dans la rubrique Position, cochez loption Aprs llment de formulaire an de placer le texte explicatif droite de la case cocher (voir repre de la gure 7-10). 5. Saisissez la lettre r dans le champ Cl daccs et la valeur 5 dans le champ Ordre des tabulations (voir repre de la gure 7-10).
137
Figure 7-10
Conguration des paramtres daccessibilit de la case cocher
6. Cliquez sur OK pour valider vos paramtres daccessibilit. La case cocher, accompagne de son texte explicatif, doit alors apparatre au point dinsertion pralablement choisi (voir repre de la gure 7-11). 7. Slectionnez-la en la cliquant dans la fentre Document ou en slectionnant la balise <input> en rapport dans le slecteur de balise. Dans le panneau Proprits, assurez-vous que lidentiant de la case est bien randonnees et saisissez oui dans le champ Valeur (voir repre de la gure 7-11). noter que dans le panneau Proprits, vous pourriez aussi congurer votre case pour quelle soit prcoche par dfaut en validant loption Activ.
Figure 7-11
Conguration de la valeur de la case cocher dans le panneau Proprits
Insrer et congurer une liste ou un menu

Le menu droulant de formulaire permet de slectionner une option unique parmi celles proposes et matrialise le mme type de slection que celui dune srie de boutons radio, mais en saccaparant moins despace, notamment dans le cas dun grand nombre doptions.
138
Ce mme lment de formulaire peut aussi tre prsent sous forme de liste (fentre de plusieurs lignes dans laquelle la slection dune option est ralise par un clic). Dans ce cas, si loption Autoriser plusieurs du panneau Proprits de llment est active, il sera alors possible de slectionner la fois plusieurs des options proposes. Pour illustrer lajout dun menu droulant, nous demanderons linternaute dindiquer comment il a dcouvert le site (sites partenaires, moteur de recherche ou par un ami). 1. Reprenez la page prcdente et positionnez le curseur dans la cellule situe en dessous de celle contenant les cases cocher. Cliquez ensuite sur licne Liste/Menu de la catgorie Formulaires du panneau Insertion (voir repre de la gure 7-3 et repres et de la gure 7-12). 2. Dans la bote de dialogue Attributs daccessibilit des balises dentre qui souvre alors, saisissez comme identiant origine et comme tiquette Comment avez-vous connu ce site ? (voir repre de la gure 7-12). 3. Dans la rubrique Style de cette bote de dialogue, slectionnez loption Joindre une balise dtiquette laide de lattribut for (voir repre de la gure 7-12). 4. Dans la rubrique Position, cochez loption Avant llment de formulaire, bien que nous allons tre amen dplacer le texte explicatif par la suite (voir repre de la gure 7-12).
Figure 7-12
Conguration des paramtres daccessibilit dun menu droulant
139
5. Saisissez la lettre o dans le champ Cl daccs et la valeur 6 pour le champ Ordre des tabulations (voir repre de la gure 7-12). 6. Cliquez sur OK pour valider vos paramtres daccessibilit. Le menu droulant, accompagn de son texte explicatif, doit alors apparatre lendroit du point dinsertion choisi au pralable. 7. Cliquez dans le texte explicatif situ pour linstant gauche du menu droulant et slectionnez la balise <label> dans le slecteur de balise. Dplacez ensuite le texte dans la cellule de gauche par un simple glisser-dplacer. 8. Slectionnez prsent le menu droulant en cliquant dessus dans la fentre Document (voir repre de la gure 7-13) ou en slectionnant la balise <select> en rapport dans le slecteur de balise. Dans le panneau Proprits, assurez-vous que lidentiant du menu est bien origine et que le type est bien Menu. noter que dans le cas dune conguration de llment de formulaire en liste, il faudrait slectionner loption Liste et en renseigner la hauteur (loption Autoriser plusieurs peut tre coche ou non selon que lon dsire autoriser les slections multiples doptions). 9. Cliquez sur le bouton Valeurs de la liste (voir repre de la gure 7-13). Dans la fentre qui souvre alors, cliquez sur le bouton + an dajouter une premire option dans la liste (voir repre de la gure 7-13). Saisissez ltiquette qui apparatra dans le menu droulant, ainsi que la valeur en rapport qui sera envoye au programme de traitement. Appuyez ensuite sur la touche Tab de votre clavier (ou de nouveau sur le bouton +) an de saisir la deuxime option. Procdez de la mme manire pour la troisime option et cliquez sur OK pour valider vos choix. 10. Les diffrentes options doivent ensuite apparatre dans une fentre situe en bas du panneau Proprits qui permet de choisir loption qui sera initialement slectionne lors du premier afchage du menu. Pour cela, il suft simplement de cliquer sur loption dsire dans cette liste.
Figure 7-13
Conguration des diffrentes options dun menu droulant
140
Insrer et congurer un bouton de formulaire

Une fois que linternaute a termin de renseigner le formulaire, il doit disposer dun bouton de soumission pour pouvoir lenvoyer au programme de traitement. Un formulaire peut aussi comporter un bouton Rinitialiser an quil puisse tre de nouveau afch avec toutes ses valeurs initiales. Quel que soit le type de bouton dsir, la dmarche est la mme : il sufra simplement de congurer loption Action selon lusage que lon dsire faire du bouton (Envoyer ou Rtablir le formulaire). Pour illustrer linsertion dun bouton, nous allons maintenant ajouter un bouton de soumission pour terminer ce premier formulaire. 1. Reprenez la page prcdente et positionnez le curseur dans la cellule situe en dessous de celle contenant le menu droulant. Cliquez ensuite sur licne Bouton de la catgorie Formulaire du panneau Insertion (voir repre de la gure 7-3 et repre de la gure 7-14). 2. Dans la bote de dialogue Attributs daccessibilit des balises dentre qui souvre alors, saisissez comme identiant valider et comme tiquette Envoyer vos informations (voir repre de la gure 7-14). 3. Dans la rubrique Style de cette bote de dialogue, slectionnez loption Joindre une balise dtiquette laide de lattribut for (voir repre de la gure 7-14). 4. Dans la rubrique Position, cochez loption Avant llment de formulaire (voir repre de la gure 7-14).
Figure 7-14
Conguration des paramtres daccessibilit et de laction dun bouton de formulaire
141
5. Saisissez la lettre v dans le champ Cl daccs et la valeur 7 dans le champ Ordre des tabulations (voir repre de la gure 7-14). 6. Cliquez sur OK pour valider vos paramtres daccessibilit. Le bouton, accompagn de son texte explicatif, doit alors apparatre au point dinsertion pralablement choisi. 7. Cliquez dans le texte explicatif situ pour linstant gauche du bouton et slectionnez la balise <label> dans le slecteur de balise. Dplacez le texte dans la cellule de gauche par un simple glisser-dplacer. 8. Slectionnez le bouton en le cliquant depuis la fentre Document (voir repre de la gure 7-14) ou en slectionnant la balise <input> en rapport dans le slecteur de balise. Dans le panneau Proprits, assurez-vous que lidentiant du bouton est bien valider et que sa valeur est Envoyer. Slectionnez ensuite lune des deux options proposes pour le type daction du bouton : soumission ou rinitialisation (voir repre de la gure 7-14). Pour cet exemple, nous garderons loption par dfaut, Envoyer le formulaire. 9. Le formulaire est dsormais oprationnel et nous allons pouvoir le tester dans un navigateur. Pour cela, appuyez sur la touche F12 de votre clavier an douvrir le navigateur congur par dfaut dans Dreamweaver pour les tests dafchage. Dans le navigateur, remplissez les diffrents champs du formulaire et cliquez sur le bouton de soumission Envoyer (voir gure 7-15). Comme nous avons congur le formulaire avec la mthode GET, les diffrents couples intitul/valeur doivent apparatre dans la barre dadresse du navigateur, la suite du nom du programme de traitement des informations (qui est aussi le nom du formulaire dans notre exemple).
Figure 7-15
Test du formulaire dans un navigateur
142
Insrer et congurer une zone de texte

Llment de formulaire Zone de texte permet de saisir un texte complet sur plusieurs lignes. Le nombre de caractres par ligne et le nombre de lignes de la zone pouvant tre congurs depuis le panneau Proprits, la taille de la zone de saisie peut ainsi tre facilement adapte au contexte. Depuis linterface de Dreamweaver en mode Cration, le panneau Proprits dune zone de texte nest ni plus ni moins le mme que celui dun champ de texte pour lequel nous aurions choisi le type Multi lignes. Cependant, en mode Code, il est intressant de remarquer que les noms de balises de ces deux lments de formulaire sont diffrents (le champ de texte correspond la balise <input>, alors que la zone de texte correspond la balise <textarea>). Pour illustrer linsertion dune zone de texte, nous allons crer un nouveau formulaire. la diffrence du prcdent, la mise en forme de ce formulaire sera ralise par CSS et la mthode choisie sera POST. La prsentation des CSS tant aborde au chapitre 11, nous ne dtaillerons pas les diffrents styles utiliss ici pour mettre en forme les lments du formulaire. Nous vous invitons vous reporter au chapitre 11 pour plus de prcisions sur les CSS appliqus aux formulaires. 1. Ouvrez la page contact.html du site Montagne-65 et enregistrez-la sous formulairecontact2.html. Supprimez ensuite le contenu actuel de la page et renommez le titre en Nous contacter, comme nous lavions fait pour le premier formulaire. 2. Insrez une balise de formulaire dans la page en cliquant sur licne Formulaire de la catgorie Formulaires du panneau Insertion. Congurez cette fois le champ Mthode avec POST (le champ Action est congur ici aussi avec le nom de la page dans laquelle se trouve le formulaire, soit : formulaire-contact2.html). 3. Placez le curseur lintrieur de la zone de formulaire et ajoutez un conteneur div an de respecter les contraintes de la DTD XHTML 1.0 Strict. En effet, en mode Strict, un lment HTML de type inline, un champ de texte par exemple, ne peut pas tre inclus directement dans la zone de formulaire. Il faut donc crer un premier conteneur (de type bloc) lintrieur de la zone de formulaire (ce conteneur peut tre une balise div ou une balise de regroupement fieldset) avant dy ajouter les lments de formulaire. Insrez ensuite les deux champs texte Nom et E-mail dans ce conteneur, avec le mme paramtrage que pour le premier formulaire. Appliquez un style au formulaire an de positionner correctement ses lments dans la page. Dans notre exemple, nous avons appliqu la classe champ pralablement dni aux deux champs de texte (voir le rsultat du positionnement de ces deux champs dans la gure 7-16). 4. Placez le curseur aprs le champ de texte E-mail et avant la balise de n du conteneur div que nous avons ajout prcdemment. Cliquez sur licne Zone de texte de la catgorie Formulaires du panneau Insertion (voir repre de la gure 7-3 et
143
repre de la gure 7-16), puis compltez les paramtres daccessibilit en vous rfrant la gure 7-16 (repres , et ). Validez vos choix en cliquant sur OK.
Figure 7-16
Insertion dune zone de texte dans un formulaire
5. Slectionnez la zone de texte et assurez-vous que le nouvel lment est bien insr lintrieur de la balise div grce au slecteur de balise (voir repre de la gure 7-16). Si besoin, dplacez la balise de llment en mode Code pour la positionner lintrieur de la balise conteneur. Dans le panneau Proprits, vriez que lidentiant de la zone est bien adresse, puis modiez le nombre de caractres par ligne en le rduisant 30 pour ladapter au formulaire (voir repre de la gure 7-16). Le champ Nbre de lignes permet de paramtrer le nombre de lignes afches par la zone de texte. Le champ Val. init. (valeur initiale) permet, quant lui, de paramtrer un texte qui safchera par dfaut dans la zone de texte lorsque le formulaire sera appel dans un navigateur. 6. Les deux cases cocher places en bas du panneau Proprits permettent de dsactiver le champ de texte ou de lui attribuer ltat Lecture seule qui aura pour effet dinterdire la modication du contenu du champ par lutilisateur.
Mise en forme de formulaire avec les CSS La mise en forme de ce nouveau formulaire est ralise laide des CSS. Pour cela, nous avons cr des styles spciques et attribu des classes certains lments. Si vous connaissez dj les mises en forme par CSS, vous pouvez alors rcuprer ces styles dans les codes source mis votre disposition sur le site de lditeur, mais sachez que tous les exemples que nous prsenterons dans ce chapitre peuvent aussi tre mis en forme laide de tableaux.
144
Insrer et congurer un ensemble de champs

Comme nous lavons dj indiqu la section Laccessibilit pour les formulaires de ce chapitre, il est possible de regrouper ensemble diffrents champs en leur attribuant une tiquette commune (exemple : Coordonnes, Questions). Lintrt dune telle organisation est quelle permet de renseigner les synthtiseurs vocaux et autres outils daide la navigation. Ainsi, lutilisateur pourra parcourir le formulaire en passant dun ensemble de champs lautre, tout en tant inform sur leur contenu grce leur tiquette. Pour dlimiter les diffrents champs regrouper, il faut utiliser la balise <fieldset> laquelle viendra se joindre la balise <legend> ayant pour fonction dindiquer ltiquette qui dnira le regroupement. Si vous afchez le formulaire dans un navigateur, une fois ces balises en place, vous constaterez quun cadre entoure dsormais les champs inclus dans la balise <fieldset> et que ltiquette de la balise <legend> safche sur le bord suprieur du cadre (voir gure 7-21). Pour illustrer une utilisation des ensembles de champs, nous allons regrouper dans un ensemble, nomm Coordonnes, les trois lments de formulaire dj prsents dans notre page (Nom, E-mail et Adresse). Nous ajouterons ensuite un second ensemble de champs, nomm Questions, la suite du premier an dy inclure une srie de questions matrialises par des cases cocher. 1. Thoriquement, un ensemble de champs doit tre cr avant les lments de formulaire quil doit contenir. Nanmoins, nous vous proposons ici une mthode simple qui permet dajouter un ensemble de champs dans un formulaire dj cr. Pour cela, nous allons devoir passer en mode Code pour slectionner le contenu complet du formulaire actuel (voir repre de la gure 7-17) an que le dbut de la balise <fieldset> vienne se placer juste aprs le div didentiant formulaire. 2. Une fois ce contenu du formulaire slectionn, cliquez sur licne Ensemble de champs de la catgorie Formulaires du panneau Insertion (voir repre de la gure 7-3 et repre de la gure 7-17). Renseignez le champ Lgende de la bote de dialogue qui souvre avec la valeur Coordonnes. Cliquez sur OK pour valider (voir repre de la gure 7-17). Un cadre et son tiquette Coordonnes doivent alors apparatre au-dessus du champ Nom, en mode Cration (voir repre de la gure 7-18). 3. Nous allons maintenant ajouter le second ensemble de champs en dessous du premier. La mise en place de ce second ensemble sera plus facile car, contrairement au cas prcdent, nous commencerons par crer lensemble de champs, pour ensuite y inclure les champs. Nous naurons donc pas passer en mode Code pour agir directement sur les balises. Avant dajouter ce nouvel lment, il faut commencer par se positionner au point dinsertion du futur ensemble de champs. Ce positionnement peut tre facilement ralis en mode Code (en plaant le curseur juste avant la balise de fermeture du div didentiant formulaire), mais nous vous proposons ci-dessous de leffectuer en mode Cration. Commencez par cliquer aprs la zone de texte
145
Adresse dans le formulaire puis slectionnez la balise <fieldset> en cliquant dessus dans le slecteur de balise (voir repre de la gure 7-18). Appuyez ensuite sur la che droite de dplacement de votre clavier, vous devez alors tre au mme endroit que si vous laviez fait en mode Code.
Figure 7-17
Slection du contenu du formulaire et cration de lensemble de champs Coordonnes
Figure 7-18
Reprsentation du document en mode Cration aprs linsertion de lensemble de champs Coordonnes dans le formulaire
146
4. Maintenant que le curseur est correctement plac dans le document, cliquez sur licne Ensemble de champs de la catgorie Formulaires (voir repre de la gure 7-19). Saisissez Questions dans le champ Lgende et cliquez sur OK (voir repre de la gure 7-19).
Figure 7-19
Cration de lensemble de champs Questions
5. Le cadre et son tiquette doivent alors apparatre dans la fentre Document de Dreamweaver. Placez le curseur lintrieur du cadre, puis insrez deux cases cocher en suivant la mme procdure que dans lexemple du premier formulaire (voir repre de la gure 7-20).
Figure 7-20
Formulaire organis avec deux ensembles de champs, Coordonnes et Questions
6. Il ne reste plus maintenant qu insrer un bouton de soumission dans le formulaire. Pour cela, placez votre curseur en dessous du prcdent ensemble de champs et
147
cliquez sur licne Bouton de la catgorie Formulaires. Renseignez ensuite les paramtres daccessibilit, comme nous lavons dj fait dans le prcdent formulaire (revoir si besoin la gure 7-14), puis cliquez sur le bouton OK. Le bouton doit ensuite prendre place en bas du formulaire. Le formulaire est maintenant termin. Enregistrez-le et appuyez sur la touche F12 an de le tester dans un navigateur (voir repre de la gure 7-21).
Ensembles de champs avec une mise en forme par tableaux Si vous dsirez utiliser une mise en forme par tableaux tout en intgrant des ensembles de champs, il suft de crer un tableau lintrieur de chaque ensemble de champs. La structure globale du formulaire pourra tre assure par un troisime tableau parent.
Figure 7-21
Test du formulaire dans le navigateur
148
Insrer et congurer un champ de chier

Le champ de chier permet denvoyer un chier au programme de traitement du formulaire. En gnral, lors de la rception du formulaire, le programme de traitement sauvegarde le chier envoy dans un rpertoire de tlchargement ct serveur et enregistre le nom du chier dans une base de donnes. Le type et la taille maximum du chier peuvent tre imposs par le programme de traitement et, dans ce cas, il est judicieux dindiquer ces contraintes dans le formulaire pour en informer lutilisateur. Pour insrer un champ de chier dans un formulaire, celui-ci doit tre congur avec la mthode POST. Le type dencodage MIME (champ Enctype du panneau Proprits du formulaire) doit avoir la valeur multipart/form-data. Dans Dreamweaver, vous naurez pas vous en proccuper car le type dencodage MIME sera automatiquement congur avec la bonne valeur ds que vous ajouterez un champ de chier dans le formulaire. Pour illustrer lutilisation dun champ de chier dans un formulaire, nous vous proposons de remplacer les cases cocher du prcdent formulaire par un champ de chier qui permettra linternaute de tlcharger un document. 1. Ouvrez le formulaire prcdent et enregistrez-le sous le nom formulaire-contact3.html. 2. Renommez ltiquette de lensemble de champs Questions par Fichier joint, puis supprimez les deux cases cocher an de librer la place pour le champ de chier. 3. Placez le curseur lintrieur de lensemble de champs Fichier joint puis cliquez sur licne Champ de chier de la catgorie Formulaires du panneau Insertion (voir repre de la gure 7-3 et repre de la gure 7-22).
Figure 7-22
Insertion dun champ de chier dans un formulaire
149
4. Renseignez les paramtres daccessibilit en vous rfrant la gure 7-22 (repres , et ), puis cliquez sur OK pour valider vos choix. 5. Le champ de chier et son tiquette doivent alors apparatre au point dinsertion pralablement choisi. Cliquez sur le champ de chier pour le slectionner. Le panneau Proprits doit alors afcher les paramtres du champ. Son identiant ayant dj t congur dans la bote de dialogue Attributs daccessibilit des balises dentre, vous naurez pas le resaisir dans le champ Champ chier (voir repre de la gure 7-22). Les champs Largeur de caractre et Nb. max. de caract. permettent de congurer la largeur du champ et le nombre maximum de caractres comme pour un champ de texte traditionnel. 6. Enregistrez le nouveau formulaire et appuyez sur la touche F12 pour le tester dans un navigateur. Dans ce dernier, cliquez sur le bouton Parcourir du champ de chier (voir repre de la gure 7-23), puis slectionnez un chier de votre choix sur votre ordinateur. Aprs validation, le chemin menant votre chier doit tre copi dans le champ de chier (voir repre de la gure 7-23). Le chier ainsi localis sur votre ordinateur grce son chemin pourra ensuite tre envoy au programme de traitement ds la soumission du formulaire.
Figure 7-23
Test du champ de chier dans un formulaire
150
Insrer et congurer un champ dimage

Pour adapter vos formulaires la charte graphique de votre site, il peut tre intressant de pouvoir remplacer le bouton standard de validation par une image spcialement cre pour cet usage. Pour cela, Dreamweaver met votre disposition le champ dimage. Il ne sagit pas dune balise dinsertion dimage, mais dun lment de formulaire (semblable au bouton) qui permet de remplacer le visuel du traditionnel bouton par une image de votre choix tout en conservant la fonction de soumission du formulaire. Pour illustrer lutilisation de ce champ, nous vous proposons de remplacer le bouton de soumission de notre formulaire actuel par un champ dimage. Vous devez avoir prpar au pralable le visuel qui matrialisera le bouton. 1. Ouvrez la page du formulaire prcdent, soit le chier formulaire-contact3.html. 2. Supprimez le bouton actuel et son tiquette. 3. Placez le curseur lemplacement de lancien bouton et cliquez sur licne Champ dimage de la catgorie Formulaires du panneau Insertion (voir repre de la gure 7-3 et repre de la gure 7-24).
Figure 7-24
Insertion dun champ dimage dans un formulaire
4. Slectionnez le visuel qui fera fonction de bouton de soumission et validez votre choix (voir gure 7-24). 5. Remplissez les paramtres daccessibilit en vous rfrant la gure 7-24 (repres , et ), puis cliquez sur OK pour valider vos choix. 6. Limage bouton et son tiquette doivent alors apparatre au point dinsertion pralablement choisi (voir repre de la gure 7-24).
151
7. Slectionnez limage et vriez ses paramtres dans le panneau Proprits. Lidentiant de llment de formulaire doit dj tre congur car il a t renseign dans la bote de dialogue Attributs daccessibilit des balises dentre (voir repre de la gure 7-24). Renseignez le champ Sec. correspondant au texte secondaire, cest--dire le texte qui sera afch la place de limage si celle-ci nest pas visible ou est dsactive (voir repre de la gure 7-24). 8. Enregistrez la page et appuyez sur la touche F12 pour tester le nouveau bouton de soumission dans un navigateur.
Insrer et congurer un champ masqu

Le champ masqu est inclus dans la zone de formulaire comme tous les autres lments de formulaire sans pour autant tre visible lorsque linternaute consultera la page dans un navigateur. Ce champ permet denvoyer au programme de traitement du formulaire des informations ncessaires, mais qui ne seront pas renseignes par linternaute. Il est souvent utilis dans les formulaires de mise jour dun jeu denregistrements an de communiquer lidentiant du jeu actualiser. On le retrouve aussi frquemment dans les formulaires de contact dont les informations doivent tre envoyes par e-mail au webmaster. Dans ce cas, le champ masqu est utilis pour communiquer ladresse du destinataire an de paramtrer le programme denvoi de-mail.
Figure 7-25
Insertion dun champ masqu dans un formulaire
152
Pour illustrer lutilisation dun champ masqu, nous vous proposons den ajouter un dans le formulaire prcdent an de communiquer ladresse e-mail de la personne qui devra rceptionner les messages envoys par le biais du formulaire. 1. Ouvrez la page du formulaire prcdent, soit le chier formulaire-contact3.html. 2. Placez le curseur lintrieur de la zone de formulaire lendroit de votre choix, puis cliquez sur licne Champ masqu de la catgorie Formulaires du panneau Insertion (voir repre de la gure 7-3 et repre de la gure 7-25). 3. Le champ masqu doit alors apparatre lendroit souhait. Cliquez dessus pour le slectionner (voir repre de la gure 7-25). Dans le panneau Proprits, saisissez destinataire dans le champ Champ masqu et info@montagne-65.com dans le champ Valeur (voir repres et de la gure 7-25). Ainsi, lors des prochaines soumissions du formulaire, ce couple intitul/valeur sera envoy avec les autres informations renseignes par linternaute.
Insrer et congurer un menu de reroutage

Le menu de reroutage permet de rediriger lutilisateur vers une URL relative ou absolue ds quune option du menu est slectionne. Il peut tre utilis sur la page daccueil dun site pour choisir la langue, orienter le visiteur vers une page spcique en fonction de ce quil recherche, tablir un lien de messagerie (mailto:) vers linterlocuteur que lon dsire contacter ou encore slectionner des photos. Pour illustrer lutilisation dun menu de reroutage, nous allons lemployer pour diriger linternaute vers le formulaire adapt ses besoins. 1. Ouvrez le formulaire prcdent et enregistrez-le sous le nom formulaire-contact4.html. 2. Slectionnez tout le formulaire en vous aidant du slecteur de balise et supprimez-le. Saisissez la place un texte explicatif introduisant le menu de reroutage que nous allons insrer dans la page. 3. Placez le curseur en dessous de ce texte et cliquez sur licne Menu de reroutage de la catgorie Formulaires sans ajouter pralablement de zone de formulaire (voir repre de la gure 7-3 et repre de la gure 7-26). 4. Dans la bote de dialogue Insrer menu de reroutage, remplacez litem par dfaut dans le champ Texte par un texte invitant linternaute choisir une option du menu. Lajout de cette invite de slection est important dans le cas dun menu de reroutage car la redirection ne sera dclenche que si le menu change dtat. Par consquent, si nous avions ajout directement la premire redirection en premire position, il ne serait pas possible dy accder car, dans ce cas, le menu ne changerait pas dtat. 5. Cliquez ensuite sur le bouton + situ au-dessus du cadre Elments du menu (voir repre de la gure 7-26) an dajouter une seconde entre dans le menu. Cette fois, saisissez dans le champ Texte un descriptif de cette option, puis cliquez sur le bouton Parcourir pour slectionner la page vers laquelle sera redirig linternaute
153
sil slectionne cette option (voir repre de la gure 7-26). Procdez de la mme manire pour ajouter la seconde redirection.
Figure 7-26
Insertion dun menu de reroutage dans un formulaire
6. Si nous avions voulu insrer le menu de reroutage sur les pages vers lesquelles linternaute sera redirig, il aurait fallu cocher loption Slectionner le premier lment aprs le changement dURL (voir repre de la gure 7-26) an que linvite de slection du menu que nous avons ajout prcdemment soit toujours slectionne par dfaut. Voici un bref descriptif des autres options de cette bote de dialogue : Ouvrir les URL dans Cette option est intressante si on travaille dans un systme de jeu de cadres car elle permet de choisir dans quel cadre safchera la page de lURL slectionne. Insrer bouton Aller Permet dajouter un bouton de validation manuel du choix effectu dans le menu. Cela peut tre une autre alternative lajout de linvite pour rsoudre le problme de la slection de la premire option ou encore si le code JavaScript, qui gre la validation automatique, nest pas activ dans le navigateur (ce qui est de moins en moins frquent). ID de menu Permet de congurer lidentiant qui sera li au menu de reroutage. 7. Cliquez sur OK pour valider vos choix. Le menu de reroutage entour dune zone de formulaire doit alors apparatre dans la fentre Document (voir repre de la gure 7-26). Enregistrez la page et appuyez sur la touche F12 pour tester son fonctionnement dans un navigateur (voir gure 7-27).
154
Figure 7-27
Test du menu de reroutage dans un navigateur
Insrer et congurer une tiquette

Ltiquette permet denglober une valeur saisie pralablement dans la fentre Document avec une balise <label>. Mme si la plupart des lments de formulaire prsents prcdemment disposent dj de cette balise daccessibilit (si la conguration de la bote de dialogue Attributs daccessibilit des balises dentre a t correctement effectue), il est quelquefois ncessaire dajouter des balises <label> danciens formulaires ou un lment qui ne possde pas de paramtrage daccessibilit, comme le menu de reroutage que nous venons de mettre en place. Pour illustrer lajout dune tiquette, nous vous proposons de reprendre le formulaire de reroutage prcdent an de le rendre compatible avec les normes daccessibilit. 1. Ouvrez la page du formulaire prcdent, soit le chier formulaire-contact4.html. 2. Placez le curseur juste devant le menu droulant et saisissez un texte descriptif de cet lment de formulaire, par exemple, Choix du type de formulaire (voir repre de la gure 7-28).
Figure 7-28
Insertion dune tiquette pour le menu de reroutage
155
3. Slectionnez ensuite le texte et le menu droulant puis cliquez sur licne Etiquette de la catgorie Formulaires du panneau Insertion (voir repre de la gure 7-3 et repre de la gure 7-28). 4. La balise <label> doit alors tre automatiquement ajoute (voir repre de la gure 7-28). Passez ventuellement en mode Code pour vous assurer quelle englobe bien le texte descriptif et le menu droulant.
Les lments de validation Spry dun formulaire

Nous venons de vous prsenter les lments de formulaire standards, mais depuis la version CS3 de Dreamweaver, des composants Spry destins aux formulaires sont aussi disponibles. Chaque composant Spry contient un lment de formulaire standard (un champ de texte, par exemple) et un composant Spry qui assurera la validation de llment. Il existe sept lments de formulaire disposant dune version de validation Spry, savoir Champ de texte, Zone de texte, Case cocher, Menu/Liste, Champ de mot de passe, Champ de conrmation et Groupe de boutons radio. La procdure dinsertion dun lment de validation Spry dans le formulaire est semblable celle de llment standard partir duquel il a t dclin. Une fois en place dans le formulaire, les fonctionnalits de validation Spry doivent tre paramtres depuis le panneau Proprits du composant Spry (pour accder ce panneau, survolez llment avec la souris et cliquez sur la catgorie bleu du composant Spry en rapport). Ces lments de validation Spry permettront de contrler si le champ a bien t renseign ou, sil sagit dun champ destin un e-mail, si la structure de le-mail est correcte. Si la validation nest pas possible, un message rappelant les donnes attendues apparatra ct du champ concern. De mme, la procdure de validation pourra tre dclenche lors de la soumission nale du formulaire (onSubmit), au l de la saisie des donnes (onChange) ou lorsque lutilisateur sort de lobjet du formulaire concern (onBlur).
Comportement JavaScript Valider le formulaire Il existe aussi un systme de contrle des donnes dun formulaire laide dun comportement JavaScript nomm Valider le formulaire. Ce comportement JavaScript est prsent dans la partie concernant les comportements JavaScript dans ce mme ouvrage. la diffrence des validations Spry qui sont appliques localement chaque lment du formulaire et qui permettent dafcher un message derreur contextuel, le comportement JavaScript Valider le formulaire sera appliqu globalement au niveau du formulaire et les messages seront tous regroups dans une petite fentre.
Insrer et congurer une validation Spry de champ de texte

La validation Spry de champ de texte permet de contrler la prsence dune donne dans le champ lors de la soumission du formulaire, mais aussi de vrier son type au cours de la saisie des donnes. Le composant Spry propose de nombreux types de donnes contrler : nombre, date, heure, e-mail, URL, code postal, tlphone, carte de crdit
156
Pour mettre en uvre un composant Spry pour champ de texte, plusieurs tats devront tre congurs : Initial tat du champ de texte lors du chargement initial de la page. Obligatoire tat du champ de texte si lutilisateur na saisi aucun texte lors de la validation. Format non valide tat du champ de texte lorsque lutilisateur a saisi des informations dont le type est incorrect. Valide tat du champ de texte lorsque lutilisateur a saisi des informations dont le type est correct (si celui-ci est dni).
Validation Spry de champ de texte obligatoire
Dans un premier temps, nous allons utiliser une validation Spry de champ de texte an de sassurer quune donne a bien t saisie dans le champ Nom (et donc sans contrle du type). Le contrle de type sera prsent dans un second exemple sur le champ E-mail du mme formulaire. 1. Ouvrez le formulaire formulaire-contact2.html et enregistrez-le sous le nom formulaire-contact5.html. 2. Supprimez le premier champ de texte et son tiquette en haut du formulaire. Placez le curseur au mme emplacement et cliquez sur licne Validation Spry de champ de texte de la catgorie Formulaires du panneau Insertion (voir repre de la gure 7-3 et repre de la gure 7-29). 3. Renseignez les paramtres daccessibilit et cliquez sur OK pour valider vos choix (voir repre de la gure 7-29). Le nouveau champ de texte doit alors apparatre au mme endroit que celui que nous venons de supprimer (voir repre de la gure 7-29). 4. Pour le moment, le champ de texte standard ne prsente aucune diffrence avec celui de sa version avec validation Spry que nous venons de mettre en place. Cest lors du test dans le navigateur que nous apprcierons les fonctionnalits de la validation Spry, mais, avant cela, il faut commencer par congurer le composant Spry. Pour accder au panneau de conguration du composant, survolez le champ de texte avec la souris pour faire apparatre un onglet bleu au-dessus du champ nomm Champ de texte Spry. Cliquez ensuite dans cet onglet bleu pour afcher le panneau Proprits du composant Spry (voir repre de la gure 7-29). 5. Dans le panneau Proprits, saisissez un texte de recommandation qui apparatra dans le champ lui-mme (voir repre de la gure 7-29). Dans ce premier exemple, nous dsirons simplement que le champ Nom soit obligatoire et nous y indiquerons le message suivant Nom obligatoire. Assurez-vous que loption Obligatoire est bien coche (voir repre de la gure 7-29).
157
6. Dans la liste droulante Aperu des tats, slectionnez Obligatoire (voir repre de la gure 7-29). Dans la fentre Document, le champ de texte doit prendre maintenant lapparence quil aurait si le champ Nom restait vide lors de la soumission du formulaire. Le champ doit tre rouge et un message par dfaut doit safcher sa droite. Slectionnez ce message et remplacez-le par celui qui vous semble le plus pertinent (dans notre exemple, nous avons indiqu Votre nom est obligatoire). 7. Revenez dans le panneau Proprits et slectionnez maintenant Valide dans la liste droulante Aperu des tats. Vous constatez alors que le champ de texte est maintenant de couleur verte. Cela illustre, ici aussi, lapparence que prendra le champ si, lors du contrle, un nom a t pralablement saisi dans llment de formulaire concern. Cependant, le contrle seffectue par dfaut lors de la soumission du formulaire et vous ne verrez donc pas cet tat Valide (sauf si dautres donnes sont incorrectes) car en gnral linternaute est redirig vers une page de remerciement lors de lenvoi dun formulaire. Il existe nanmoins une solution pour que le contrle se fasse au l de la saisie. Pour cela, il suft de cocher la case onBlur de loption Valider si (voir repre de la gure 7-29). Ainsi, ds que linternaute quittera le champ (en appuyant sur la touche Tab ou en cliquant lextrieur du champ), le processus de contrle Spry se dclenchera et, si vous avez saisi un nom dans le champ, il deviendra alors vert. 8. Enregistrez la page et testez-la dans un navigateur (touche F12) pour vous initier au fonctionnement des validations Spry. Lors de lenregistrement de la page, une fentre Copier les chiers dpendants safchera avec le chemin des chiers ncessaires au bon fonctionnement du composant Spry. Validez cette bote de dialogue, mais il faudra vous rappeler que lorsque vous mettrez votre page en ligne, il faudra aussi y copier ces chiers en conservant la mme structure pour les rpertoires.
Figure 7-29
Insertion dune validation Spry de champ de texte
158
Validation Spry de champ de texte obligatoire avec contrle du type
Dans ce premier exemple, nous avons uniquement vri si le champ ntait pas vide. Cependant, les composants Spry de formulaire permettent galement de contrler le type dinformations saisies (code postal, e-mail). Aussi, pour illustrer cette fonctionnalit, nous allons lappliquer au second champ du formulaire (E-mail). 1. Comme prcdemment, commencez par supprimer le champ E-mail et son tiquette. Placez le curseur au mme endroit et cliquez sur licne Validation Spry de champ de texte de la catgorie Formulaires. Remplissez les paramtres daccessibilit et cliquez sur OK pour valider vos choix. 2. Pour accder au panneau de conguration du composant Spry, survolez le champ de texte avec la souris pour faire apparatre un onglet bleu au-dessus du champ nomm Champ de texte Spry. Cliquez dans cet onglet bleu pour afcher le panneau Proprits du composant Spry. 3. Renseignez le champ Conseil en saisissant, par exemple, Saisir un mail valide. Vriez que loption Obligatoire est bien coche et activez loption onBlur. 4. Slectionnez ensuite Obligatoire dans la liste droulante Aperu des tats, puis modiez le message par dfaut dans la fentre Document, comme dans lexemple prcdent.
Figure 7-30
Insertion dune validation Spry de champ de texte avec contrle du type des donnes
5. Pour ce champ destin accueillir des e-mails, nous allons slectionner loption Adresse lectronique dans la liste droulante Type du panneau Proprits (voir repre de la gure 7-30). De ce fait, un nouvel tat nomm Format non valide devient disponible dans la liste Aperu des tats. Slectionnez-le (voir repre de la gure 7-30) et passez dans la fentre Document pour en modier le message derreur
159
comme nous lavons fait prcdemment pour ltat Obligatoire. Remplacez par exemple le texte par dfaut par E-mail non valide (voir repre de la gure 7-30). 6. La conguration du composant Spry est maintenant termine. Enregistrez votre page et testez-la dans un navigateur en appuyant sur la touche F12 de votre clavier. Saisissez une adresse invalide puis une autre, valide cette fois, an de vrier le bon afchage des messages derreur (voir gure 7-31).
Figure 7-31
Test dune validation Spry de champ de texte avec contrle du type, Adresse lectronique pour cet exemple
Insrer et congurer une validation Spry de zone de texte

Le fonctionnement de la validation Spry de zone de texte est semblable celui du composant Spry pour champ de texte que nous venons de prsenter. Cependant, avec une zone de texte, le nombre dtats congurer sera plus important en raison de la gestion des nombres de caractres minimaux et maximaux pralablement congurs dans le composant Spry (pour mmoire, ces tats sont visibles dans la liste droulante Aperu des tats du panneau Proprits du composant Spry). Voici la liste des diffrents tats possibles : Initial tat de la zone de texte lors du chargement initial de la page. Obligatoire tat de la zone de texte si lutilisateur na saisi aucun texte lors du contrle. Nombre minimal de caractres tat de la zone de texte lorsque lutilisateur a saisi un nombre de caractres infrieur celui du minimum congur dans le panneau Proprits du composant Spry (champ Nbre min. de caract.). Nombre maximum de caractres tat de la zone de texte lorsque lutilisateur a saisi un nombre de caractres suprieur celui du maximum congur dans le panneau Proprits du composant Spry (champ Nbre max. de caract.). Valide tat de la zone de texte lorsque lutilisateur a saisi des informations correspondantes aux contraintes de la zone de texte (prsence de donnes, nombre de caractres minimal dpass, nombre de caractres maximal non dpass) Pour illustrer la conguration dune validation Spry de zone de texte, nous allons lajouter dans le formulaire prcdent en remplacement de la zone dadresse actuelle.
160
1. Supprimez la zone de texte actuelle et son tiquette. Placez le curseur au mme endroit et cliquez sur licne Validation Spry de zone de texte de la catgorie Formulaires (voir repre de la gure 7-3 et repre de la gure 7-32). Renseignez les paramtres daccessibilit (voir repre de la gure 7-32) et cliquez sur OK pour valider vos choix. 2. Pour accder au panneau de conguration du composant Spry, survolez la zone de texte avec la souris pour faire apparatre un onglet bleu, nomm Zone de texte Spry. Cliquez dans cet onglet pour afcher le panneau Proprits du composant Spry en rapport (voir repre de la gure 7-32). 3. Renseignez le champ Conseil du panneau Proprits en indiquant, par exemple, Saisir votre adresse complte. Vriez que loption Obligatoire est bien coche par dfaut. En ce qui concerne le dclenchement du processus de validation, nous cocherons cette fois onChange pour loption Valider si (voir repre de la gure 7-32) an que celui-ci soit relanc chaque nouveau caractre saisi. 4. Slectionnez ensuite Obligatoire dans la liste droulante Aperu des tats, puis modiez le message par dfaut dans la fentre Document (saisissez, par exemple, Adresse obligatoire). 5. Comme indiqu prcdemment, la zone de texte vous permet de grer un nombre de caractres minimum et maximum. Dans notre exemple, nous congurerons ces deux paramtres avec 5 pour le minimum et 50 pour le maximum (voir repre de la gure 7-32).
Figure 7-32
Insertion dune validation Spry de zone de texte
6. Il est aussi possible dafcher un compteur de caractres droite de la zone de texte. Celui-ci peut tre congur pour afcher le nombre de caractres dj saisis (mode compteur) ou le nombre de caractres restant saisir (mode dcompteur). Dans notre
161
exemple, nous opterons pour le mode dcompteur et nous cocherons pour cela loption Car. restant (voir repre de la gure 7-32). 7. Une fois ces premiers rglages effectus, il faut maintenant congurer les messages derreur des tats Nombre minimal de caractres et Nombre maximal de caractres qui sont dsormais disponibles dans la liste droulante Aperu des tats. La procdure est semblable la conguration des messages derreur des tats prcdents. Slectionnez ltat Nombre minimal de caractres dans la liste Aperu des tats et modiez le texte du message par dfaut dans la fentre Document. Procdez de la mme manire pour ltat Nombre maximal de caractres (dans notre exemple, nous avons saisi les textes Pas assez de caractres et Trop de caractres pour ces deux tats). 8. La conguration du composant Spry de zone de texte est maintenant termine. Enregistrez votre page, puis conrmez la bote de dialogue Copier les chiers dpendants qui vous rappelle que des chiers sont ncessaires au bon fonctionnement de ce composant Spry. Appuyez sur la touche F12 pour afcher le formulaire dans un navigateur, puis testez les diffrents tats de la zone de texte an de vous assurer quils sont conformes la conguration que vous venez de raliser (voir gure 7-33).
Figure 7-33
Test dune validation Spry de zone de texte avec dcomptage du nombre de caractres
Insrer et congurer une validation Spry de case cocher

La validation Spry de case cocher permet de contrler quune case isole est bien coche. Dans le cas dun groupe de plusieurs cases, il est aussi possible de contrler si un nombre minimum de cases a bien t coch et si le nombre maximum de cases cocher na pas t atteint. Dans notre exemple, nous allons utiliser le comportement Spry pour vrier quune case conrmant que linternaute a bien consult les conditions de vente a t pralablement coche lors de la soumission du formulaire. 1. Supprimez les deux cases cocher actuelles. Placez le curseur au mme endroit et cliquez sur licne Validation Spry de case cocher de la catgorie Formulaires (voir
162
repre de la gure 7-3 et repre de la gure 7-34). Renseignez les paramtres daccessibilit (voir repre de la gure 7-34) et cliquez sur OK pour valider vos choix. 2. Pour accder au panneau de conguration du composant Spry, survolez la case cocher avec la souris pour faire apparatre un onglet bleu au-dessus de llment de formulaire nomm Case cocher Spry. Cliquez dans cet onglet pour afcher le panneau Proprits du composant Spry en rapport (voir repre de la gure 7-34).
Figure 7-34
Insertion dune validation Spry de case cocher
3. Vriez que loption Obligatoire est bien coche par dfaut. En ce qui concerne le dclenchement du processus de validation, nous laisserons cette fois le paramtrage par dfaut pour loption Valider si, soit onSubmit, an que celui-ci soit dclench lors de la soumission du formulaire. 4. Slectionnez Obligatoire dans la liste droulante Aperu des tats (voir repre de la gure 7-34), puis dans la fentre Document, modiez le message derreur par dfaut en le remplaant par Vous devez cocher cette case. 5. La programmation de votre composant Spry est maintenant termine. Vous pouvez enregistrer votre page, puis conrmer la bote de dialogue Copier les chiers dpendants qui vous rappelle que des chiers sont ncessaires au bon fonctionnement de ce composant Spry. Appuyez ensuite sur la touche F12 pour visualiser le formulaire dans le navigateur. Assurez-vous que si la case nest pas coche lors de la soumission du formulaire, le message derreur prcdemment congur safche correctement droite du texte descriptif de la case cocher.
163
Figure 7-35
Test dune validation Spry de case cocher obligatoire
Insrer et congurer une validation Spry de slection

La validation Spry de slection permet de contrler quune option du menu a bien t slectionne ou que loption slectionne est bien valide. Pour pouvoir dtecter quune option a t slectionne, il faut que le menu dispose dune premire entre dinvite dont le champ Valeur nest pas renseign (voir gure 7-36 en guise dexemple). Ainsi, si lutilisateur ne slectionne aucune option dans le menu, cest cette invite du menu qui restera slectionne par dfaut et le composant Spry dtectera alors labsence de valeur, ce qui entranera lafchage dun message derreur.
Figure 7-36
Conguration des informations du menu droulant
1. Placez le curseur aprs la zone de texte et cliquez sur licne Validation Spry de slection (voir repre de la gure 7-3 et repre de la gure 7-37). Renseignez les paramtres daccessibilit (voir repre de la gure 7-37) et cliquez sur OK pour valider vos choix. 2. Avant de congurer le composant Spry, nous allons cette fois devoir renseigner les informations qui seront visibles dans le menu droulant. Pour cela, cliquez sur le menu (et non sur la catgorie bleu pour linstant) an dafcher le panneau Proprits correspondant cet lment. Cliquez ensuite sur le bouton Valeurs de liste et saisissez une invite pour commencer, Slectionnez une randonne par exemple, sans lui adjoindre de valeur, puis deux noms de randonne de votre choix dans la bote de
164
dialogue du mme nom (par exemple, Randonne du pont dEspagne et Randonne des cascades, voir gure 7-36). Cliquez sur OK pour valider. 3. Le contenu du menu tant dsormais paramtr, nous allons pouvoir accder au panneau de conguration du composant Spry. Pour cela, survolez le menu droulant avec la souris pour faire apparatre un onglet bleu au-dessus de llment de formulaire nomm Slection Spry. Cliquez dans cet onglet pour afcher le panneau Proprits du composant Spry en rapport (voir repre de la gure 7-37). 4. Assurez-vous que loption Valeur vide est bien coche par dfaut. Pour le dclenchement du processus de validation, slectionnez onChange pour loption Valider si, an que celui-ci soit dclench lors de la modication du menu. noter que loption onSubmit reste active bien que onChange soit coche. Ainsi, le composant Spry de validation pourra tre dclench lorsque lutilisateur choisira une valeur dans le menu, mais aussi lors de la soumission nale du formulaire. 5. Slectionnez Obligatoire dans la liste droulante Aperu des tats (voir repre de la gure 7-37) puis dans la fentre Document, modiez le message derreur par dfaut en le remplaant par Vous devez choisir une randonne (voir repre de la gure 7-37). 6. La programmation de votre composant Spry est maintenant termine. Vous pouvez enregistrer votre page, puis conrmer la bote de dialogue Copier les chiers dpendants qui vous rappelle que des chiers sont ncessaires au bon fonctionnement de ce composant Spry. Appuyez ensuite sur la touche F12 pour visualiser le formulaire dans le navigateur. Assurez-vous que si lutilisateur ne slectionne pas de randonne dans le menu droulant, le message derreur prcdemment congur safche correctement droite du menu droulant.
Figure 7-37
Insertion dune validation Spry de slection
Insrer et congurer une validation Spry de mot de passe

La validation Spry de mot de passe sapplique un champ texte de mot de passe et permet dappliquer des rgles de saisie sur la prsence et le format du mot de passe.
165
Ainsi, il est possible de contrler la prsence du mot de passe, un nombre de caractres minimaux et maximaux ou encore le type de ces caractres (nombre, lettre, majuscule ou minuscule) et dafcher un message en rapport avec cet tat. Comme pour les autres validations Spry prsentes prcdemment, ces tats doivent tre pralablement congurs dans le composant Spry (pour mmoire, ils sont visibles dans la liste droulante Aperu des tats du panneau Proprits du composant Spry). Voici la liste des diffrents tats possibles : Initial tat du champ de mot de passe lors du chargement initial de la page. Actif tat du champ de mot de passe lorsque lutilisateur place son curseur dans le champ de saisie. Obligatoire tat du champ de mot de passe si lutilisateur na saisi aucun mot de passe. Nombre minimal de caractres tat du champ de mot de passe lorsque lutilisateur a saisi un nombre de caractres infrieur celui du minimum congur dans le panneau Proprits du composant Spry (champ Nbre min. de caract.). Nombre maximal de caractres tat du champ de mot de passe lorsque lutilisateur a saisi un nombre de caractres suprieur celui du maximum congur dans le panneau Proprits du composant Spry (champ Nbre max. de caract.). tat de rsistance non valide tat du champ de mot de passe lorsque lutilisateur a saisi une information qui ne correspond pas aux critres de rsistance du champ de mot de passe (prsence minimum dun nombre de majuscule par exemple). Valide tat du champ de mot de passe lorsque lutilisateur a saisi des informations correspondantes aux contraintes du champ de mot de passe. Pour illustrer la conguration dune validation Spry de mot de passe, nous allons lintgrer dans un nouveau formulaire destin la connexion de lutilisateur dans une page soumise un contrle daccs. Cependant, nous attirons votre attention sur le fait que, dans cette section, nous ne traiterons que la validation du format du mot de passe en local. Par la suite, vous devrez ajouter un comportement serveur dauthentication pour que ce formulaire soit oprationnel (le chapitre 20 explique comment faire). 1. Ouvrez le formulaire formulaire-connexion1.html ou crez un formulaire de connexion contenant un premier champ destin lidentiant de lutilisateur (identifiant). 2. Positionnez ensuite le curseur au point dinsertion du champ destin au mot de passe, puis cliquez sur licne Validation Spry de mot de passe dans la catgorie Spry du panneau Insertion (voir repre de la gure 7-38). Compltez la fentre Attributs daccessibilit des balises dentre en saisissant motdepasse dans le champ ID (voir repre de la gure 7-38) et cliquez sur OK pour valider vos choix. 3. Pour congurer le composant Spry survolez le champ de texte avec la souris pour faire apparatre un onglet bleu au-dessus du champ nomm Mot de passe Spry (voir repre de la gure 7-38). Cliquez ensuite dans cet onglet bleu pour afcher le panneau Proprits du composant Spry (voir repre de la gure 7-38).
166
Figure 7-38
Insertion dune validation Spry de mot de passe
4. Dans le panneau Proprits, saisissez le chiffre 3 dans le champ Nbre min. de caract. et 20 dans le champ Nbre max. de caract. (voir repre de la gure 7-38). Saisissez ensuite le chiffre 2 dans le champ Nbre min. de majuscules (voir repre de la gure 7-38). Assurez-vous que loption Obligatoire est bien coche (voir repre de la gure 7-38) et cochez la case onChange (voir repre de la gure 7-38) an que le contrle se fasse au l de la saisie du mot de passe. 6. Dans la liste droulante Aperu des tats, slectionnez Obligatoire (voir repre de la gure 7-39). Dans la fentre Document, le champ de texte doit prendre maintenant lapparence quil aurait si le champ de mot de passe restait vide lors de la soumission du formulaire. Le champ doit tre rouge et un message par dfaut doit safcher droite ou en dessous du champ (voir repre de la gure 7-39). Slectionnez ce message et remplacez-le par celui qui vous semble le plus pertinent (dans notre exemple, nous avons indiqu Pass obligatoire). 7. Revenez dans le panneau Proprits et slectionnez maintenant Niveau de complexit non valide dans la liste droulante Aperu des tats. Vous constatez alors que le texte rouge situ droite du champ de mot de passe est maintenant diffrent. Slectionnezle et remplacez-le par 2 majuscules obligatoires pour signaler lutilisateur que le mot de passe doit comporter au moins 2 majuscules. Dans la liste droulante Aperu des tats, slectionnez maintenant loption Nombre min. de caractres non atteint, passez de nouveau dans la fentre Document et modier le texte rouge droite du champ de mot de passe par 3 caractres min. Procdez de la mme manire avec ltat Nombre max. de caractres dpass et saisir cette fois 20 caractres max la place du texte en rouge. 8. La conguration du composant Spry de mot de passe est maintenant termine. Enregistrez votre page, puis conrmez la bote de dialogue Copier les chiers dpendants
167
qui vous rappelle que des chiers sont ncessaires au bon fonctionnement de ce composant Spry. Appuyez sur la touche F12 pour afcher le formulaire de connexion dans un navigateur an de vrier lafchage des diffrents messages dalerte. Commencez par saisir un premier mot de passe de 2 caractres et assurez-vous que le message 3 caractres min safche bien ct du champ. Continuez votre saisie avec des chiffres ou des lettres minuscules et assurez-vous que le message 2 majuscules obligatoires safche bien ds que le mot de passe dpasse 3 caractres. Saisissez maintenant 2 majuscules pour vrier que le message prcdent sefface et continuer la saisie jusqu 20 caractres pour voir apparatre le dernier message 20 caractres max (voir repre la gure 7-40).
Figure 7-39
Conguration des tats de validation Spry de mot de passe
Figure 7-40
Test dune validation Spry de mot de passe
168
Insrer et congurer une validation Spry de conrmation

Le fonctionnement de la validation Spry de conrmation est souvent utilis en complment du prcdent Spry de mot de passe. En effet, la validation Spry de conrmation permet de sassurer que lutilisateur a bien saisi des informations identiques dans deux champs texte similaires. Si ce dernier ne parvient pas saisir exactement la mme information dans le second champ, un message derreur sera alors afch proximit des champs. Lapplication pratique de cette fonction est dviter des erreurs de frappe lorsque lutilisateur saisit son e-mail ou encore lorsquil renseigne son mot de passe dans un formulaire de cration de compte utilisateur, par exemple. Comme pour les autres validations Spry prsentes prcdemment, les messages correspondants aux diffrents tats doivent tre pralablement congurs dans le composant Spry (pour mmoire, ces tats sont visibles dans la liste droulante Aperu des tats du panneau Proprits du composant Spry). Voici la liste des diffrents tats possibles : Initial tat de la validation Spry lors du chargement initial de la page. Obligatoire tat de la validation Spry si lutilisateur na saisi aucun texte dans le champ de conrmation. Actif tat de la validation Spry lorsque lutilisateur place son curseur dans le champ de conrmation. Etat non valide tat de la validation Spry lorsque lutilisateur a saisi dans le champ de conrmation un texte qui ne correspond pas exactement celui saisi dans le premier champ. Valide tat de la validation Spry lorsque lutilisateur a saisi dans le champ de conrmation la mme information que dans le premier champ. Pour illustrer la conguration dune validation Spry de conrmation, nous allons lintgrer dans un formulaire de cration dun compte utilisateur en demandant linternaute de saisir une seconde fois son mot de passe an de sassurer quil na pas effectu derreur de frappe. 1. Ouvrez le formulaire prcdent destin la connexion formulaire-connexion1.html et enregistrez le sous formulaire-compte1.html ou recrez un formulaire de cration de compte utilisateur contenant un premier champ destin lidentiant de lutilisateur suggr (identifiant) et un second pour la premire saisie de son mot de passe (motdepasse). 2. Positionnez ensuite le curseur au point dinsertion du champ destin la conrmation du mot de passe puis cliquez sur licne Validation Spry de conrmation dans la catgorie Spry du panneau Insertion (voir repre de la gure 7-41). Compltez la fentre Attributs daccessibilit des balises dentre en saisissant confirmation dans le champ ID (voir repre de la gure 7-41) et cliquez sur OK pour valider vos choix. 3. Pour congurer le composant Spry, survolez le champ de texte avec la souris pour faire apparatre un onglet bleu au-dessus du champ nomm Mot de passe Spry (voir
169
repre de la gure 7-41). Cliquez ensuite dans cet onglet bleu pour afcher le panneau Proprits du composant Spry (voir repre de la gure 7-41).
Figure 7-41
Insertion dune validation Spry de conrmation
4. Dans le panneau Proprits, slectionnez le champ motdepasse an dindiquer que le contenu du champ de conrmation devra tre identique celui du premier champ de mot de passe (voir repre de la gure 7-41). Assurez-vous que loption Obligatoire est bien coche (voir repre de la gure 7-41) et cochez la case onChange (voir repre de la gure 7-41) an que le contrle se fasse au l de la saisie du second mot de passe. 6. Dans la liste droulante Aperu des tats, slectionnez Obligatoire. Dans la fentre Document, slectionnez le message et remplacez-le par celui qui vous semble le plus pertinent (dans notre exemple, nous avons indiqu Confirmation obligatoire). 7. Revenez dans le panneau Proprits et slectionnez maintenant Non valide dans la liste droulante Aperu des tats. Slectionnez le texte dans la fentre Document et remplacez-le par Le mot de passe est diffrent pour signaler lutilisateur que le second mot de passe doit tre identique celui du premier champ. 8. La conguration du composant Spry de conrmation est maintenant termine. Enregistrez votre page, puis conrmez la bote de dialogue Copier les chiers dpendants qui vous rappelle que des chiers sont ncessaires au bon fonctionnement de ce composant Spry. Appuyez sur la touche F12 pour afcher le formulaire de cration de compte utilisateur dans un navigateur an de vrier le fonctionnement du Spry de conrmation. Commencez par saisir un premier mot de passe dans le premier champ Votre mot de passe. Saisissez ensuite le second mot de passe et assurez-vous que le
170
message derreur safche tant que le texte nest pas exactement identique au premier mot de passe saisi (voir repre la gure 7-42).
Figure 7-42
Test dune validation Spry de conrmation
Insrer et congurer une validation Spry de groupe de boutons radio

La validation Spry de groupe de boutons radio permet dintgrer rapidement un groupe de boutons radio et de grer la validation de leur slection. Rappelons quavec les boutons radio, lutilisateur ne peut slectionner quun seul choix lors de la soumission, contrairement aux cases cocher qui permettent de slectionner autant doptions que dsir. Comme pour les autres validations Spry prsentes prcdemment, ces tats doivent tre pralablement congurs dans le composant Spry (pour mmoire, ils sont visibles dans la liste droulante Aperu des tats du panneau Proprits du composant Spry). Voici la liste des diffrents tats possibles : Initial tat du groupe de boutons radio lors du chargement initial de la page. Obligatoire tat du groupe de boutons radio si lutilisateur na pas effectu de slection. Etat non valide tat du groupe de boutons radio lorsque lutilisateur slectionne un bouton radio non valide. Valide tat du groupe de boutons radio lorsque lutilisateur a slectionn un bouton radio valide qui permet lenvoi du formulaire. Dans notre exemple, nous allons utiliser la validation Spry de groupe de boutons radio pour permettre linternaute dindiquer le moyen qui lui permis de trouver le site Internet
171
sur lequel se trouve le formulaire de contact. Il pourra ainsi choisir entre trois alternatives : par un journal, par Internet ou par des amis (le choix dune de ces options tant obligatoire). 1. Ouvrez le formulaire de contact prcdent destin la prsentation des cases cocher formulaire-contact2.html et enregistrez le sous formulaire-contact6.html. Supprimer les deux cases cocher et placez votre curseur ce mme endroit. 2. Cliquez sur licne Validation Spry de groupe de boutons radio dans la catgorie Spry du panneau Insertion (voir repre de la gure 7-43). Compltez la fentre Groupe de boutons radio Validation Spry en saisissant referant dans le champ Nom an dattribuer un nom au groupe de boutons radio (voir repre de la gure 7-43). Cliquez ensuite sur le bouton + de la zone Boutons radio pour insrer une troisime ligne et slectionnez ensuite dans la fentre les tiquettes et les valeurs provisoires an de les remplacer par les informations suggres dans la gure 7-43 (voir repre de la gure 7-43). Deux mises en forme des boutons radio sont disponibles ; par saut de ligne ou laide dun tableau. Dans notre exemple, nous conserverons la mise en forme par dfaut (soit le saut de ligne, voir repre de la gure 7-43). Cliquez sur OK pour valider vos choix et faire apparatre les trois boutons radio au point dinsertion (voir repre de la gure 7-43).
Figure 7-43
Insertion dune validation Spry de groupe de boutons radio
3. Pour accder au panneau de conguration du composant Spry, survolez le groupe de boutons radio avec la souris pour faire apparatre un onglet bleu au-dessus de llment de formulaire nomm Groupe de boutons radio Spry. Cliquez dans cet onglet
172
pour afcher le panneau Proprits du composant Spry en rapport (voir repre de la gure 7-43). 4. Dans le panneau Proprits, vriez que loption Obligatoire est bien coche par dfaut. En ce qui concerne le dclenchement du processus de validation, le groupe de boutons radio tant le dernier lment du formulaire, nous laisserons cette fois le paramtrage par dfaut pour loption Valider si, soit onSubmit, an que celui-ci soit dclench lors de la soumission du formulaire. 5. Slectionnez Obligatoire dans la liste droulante Aperu des tats (voir repre de la gure 7-43), puis dans la fentre Document, modiez le message derreur par dfaut en le remplaant par Vous devez slectionner un bouton (voir repre de la gure 7-43). 6. noter quil est aussi possible de grer les tats Valeur vide et Valeur non valide pour chaque bouton. Dans ce cas, il convient de commencer par attribuer aux boutons concerns lune de ces deux valeurs optionnelles (vous pouvez par exemple, saisir comme valeur de bouton aucune et non valide). Il faudra ensuite reporter ces mmes valeurs dans les deux champs Valeur manquante et Valeur non valide placs en bas du panneau des Proprits du composant Spry. Ainsi, si lutilisateur slectionne ensuite un bouton dont la valeur est aucune, le message derreur Vous devez effectuer une slection safchera, de mme sil slectionne un bouton dont la valeur est non valide, cest le message Vous devez slectionner une valeur valide qui safchera son tour. Dans le cadre de cet exemple, nous naurons pas de bouton de ce type et nous laisserons donc vides les deux champs en rapport du panneau Proprits (voir repre de la gure 7-43). 7. La programmation de votre composant Spry est maintenant termine. Vous pouvez enregistrer votre page puis conrmer la bote de dialogue Copier les chiers dpendants qui vous rappelle que des chiers sont ncessaires au bon fonctionnement de ce composant Spry. Appuyez ensuite sur la touche F12 pour visualiser le formulaire dans le navigateur. Assurez-vous que si aucun bouton nest valid lors de la soumission du formulaire, le message derreur prcdemment congur safche correctement droite du groupe de boutons radio.
Conclusion
Dans les versions antrieures, Dreamweaver disposait dj du comportement JavaScript Valider le formulaire , qui permettait de contrler la prsence et le type dinformations saisies lors de la soumission du formulaire en indiquant les ventuelles erreurs dans une fentre pop-up. Avec la version CS4, des lments de formulaire Spry peuvent dsormais tre intgrs dans les formulaires pour valider progressivement la saisie des informations. En cas de problme, les lments de formulaire concerns deviendront rouges et un avertissement sera ajout proximit pour rappeler les contraintes de saisie lies llment.
173
Figure 7-44
Test dune validation Spry de groupe de boutons radio
Partie II
Les CSS avec Dreamweaver CS4
8
Introduction la conception XHTML/CSS
Dans un document XHTML/CSS bien conu, la mise en forme doit tre spare du fond. On a ainsi dun ct la page XHTML, comportant les donnes, les textes et les images, et de lautre, la feuille de mise en forme. Cette organisation est ncessaire pour permettre une meilleure lisibilit du code pour le programmeur, une plus grande facilit de modication (toutes les caractristiques de mise en forme tant regroupes en un seul document), ainsi quun meilleur rfrencement car les moteurs de recherche seront moins perturbs par du code parasite. De plus, si la page est correctement conue en blocs smantiquement corrects, elle sera accessible au plus grand nombre. Cette introduction la conception XHTML/CSS a pour but de vous faire dcouvrir lenvers du dcor. Pour concevoir des pages XHTML/CSS vraiment performantes, vous devrez connatre un peu de code car Dreamweaver ne ralise que ce que vous lui demandez. Un logiciel ne peut dterminer si un texte est un titre ou un paragraphe, il ne peut choisir lui-mme lordre des balises ou encore le nom des styles ou des identiants. Dans ce chapitre, vous aborderez les points suivants : la conception smantique ; introduction au XHTML ; introduction aux styles. comprendre les CSS.
178
Les CSS avec Dreamweaver CS4 PARTIE II
La conception smantique
Sous ce terme un peu abstrait se cache tout simplement le plan de votre page. Une fois rdig sur papier, vous devrez le traduire en balises XHTML. La conception smantique consiste slectionner ces balises en fonction de ce quelles contiendront. Une bonne conception smantique permettra un meilleur rfrencement auprs des moteurs de recherche. En effet, le titre La ore des montagnes , format en tant que titre de premier niveau, est fortement vocateur, alors que ces quatre mots placs dans un paragraphe peuvent faire partie dune phrase qui compare rapidement la ore des montagnes et celle des plaines. Dans ce dernier cas, ces mots sont beaucoup moins importants. Une bonne conception smantique permettra un code clair. Il est courant de voir dans le code des pages Web des titres formats en tant que paragraphes auxquels on a ajout une mise forme CSS adquate. Ces pratiques sont totalement errones car il nest alors plus possible pour un moteur de recherche, un navigateur vocal ou braille, ou mme un programmeur, de rellement faire la diffrence entre un vritable titre et un petit paragraphe. La conception smantique en XHTML/CSS2 est essentiellement base sur le sens des balises contenant du texte. Cest la raison pour laquelle nous allons dcrire ces balises. Les autres contenus sont gnralement placs dans des balises ayant peu de sens. La balise div est celle qui est la plus souvent utilise pour dcrire des blocs dans la page et la balise span sert modier une partie de texte pour lequel laspect visuel apporte peu de sens. Pour la conception smantique du texte, vous devrez choisir les balises qui correspondront aux types dexplications que vous souhaitez afcher dans la page. Un titre devra toujours tre plac dans lune des balises En-tte 1, En-tte 2, un paragraphe dans une balise de paragraphe. Les diffrentes balises sont accessibles via la liste droulante Format du panneau Proprits et grce aux diffrentes icnes permettant de crer des listes. Pour plus de dtails sur ces options, reportez-vous au chapitre 2. Les types de formatage disponibles sont : Formatage des diffrents niveaux de titres Il sagit des six niveaux den-tte de la liste droulante Format. Un en-tte de niveau 1 correspond un titre de premier niveau ou un titre de page. Les en-ttes de niveau 2 6 reprsentent des sous-titres. Vos pages doivent contenir au moins un titre identi comme tel. Certains moteurs de recherche attribuent une valeur particulire ces diffrents niveaux de titres. En XHTML, ces formats correspondent respectivement aux lments : <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5> et <h6></h6>. Pour que ces lments conservent tout leur sens, vous ne devez pas utiliser un lment <h3></h3>, sil ny a pas dlment <h2></h2> ni <h1></h1> dans la page. La gure 8-1 prsente les trois premiers niveaux de titres ainsi quun paragraphe. Chaque niveau possde un style par dfaut quil sera ais de modier par lusage dune feuille de style. Formatage des paragraphes Selon la dnition donne dans le dictionnaire du Petit Robert, un paragraphe consiste en une division dun crit en prose, offrant une certaine unit de pense ou de composition. Les paragraphes seront donc de grands blocs de texte portant sur une mme ide.
Introduction la conception XHTML/CSS CHAPITRE 8
179
Figure 8-1
Les trois premiers niveaux den-tte
En XHTML, ils sont dnis par llment <p></p>. La n dun paragraphe est toujours suivie dun saut de ligne. La gure 8-2 prsente deux paragraphes ainsi spars.
Figure 8-2
Deux paragraphes spars par un saut de ligne
Formatage des listes numrotes, puces ou de dnitions Les listes sont de trois types. Les listes numrotes permettent dnumrer des lments ordonns. Ces lments seront crits les uns au-dessous des autres et seront prcds dun chiffre. Les listes puces servent crire des lments les uns audessous des autres de manire non ordonne. Enn, les listes de dnitions permettent de raliser des paires comportant le mot et sa dnition. En outre, les listes permettent aussi de raliser des menus et plus gnralement des lments de navigation. En effet, cliquer sur un lment de menu revient choisir parmi une liste. Pour plus de dtails sur la mise en page des listes en CSS, reportez-vous au chapitre 12. En XHTML, les trois types de listes sont dnies par des balises diffrentes : Les listes non numrotes sont cres par llment <ul></ul>. Chacun des items de la liste est cr avec llment <li></li>. Les listes numrotes sont cres par llment <ol></ol>. Chacun des items de la liste est cr avec llment <li></li>. Les listes de dnitions sont cres par llment <dl></dl>. Chacun des titres de dnition est cr avec llment <dt></dt> et les dnitions sont, quant elles, cres avec llment <dd><dd>.
180
Formatage des textes prformats Il sagit dlments qui conservent tous les espaces et toutes les indentations crites dans la page. On les utilise gnralement dans le cas de tableaux formats avec des tabulations. Pour crire plusieurs espaces dans la fentre Document en mode Cration, vous devez cocher loption Autoriser plusieurs espaces conscutifs des prfrences gnrales (menu Edition>Prfrences, catgorie Gnrale). En XHTML, un bloc de texte prformat est introduit par llment <pre></pre> (voir gure 8-3). Il y a conservation des espaces entre le code et le rendu visuel.
Figure 8-3
Code dun texte prformat et son rendu visuel
Formatage des citations Ces blocs permettent de dnir une zone de texte en tant que citation. Par dfaut, les blocs de citation sont dcals sur la droite par rapport au texte, mais il sera facile de modier cette mise en page par lusage dune feuille de style. En XHTML, les citations sont introduites par llment <blockquote></blockquote>. Dans Dreamweaver, vous insrez la balise blockquote en choisissant le menu Insertion>HTML>Objets de texte>Citation de paragraphe, ou bien en cliquant sur licne de retrait de texte place dans la palette Proprits (voir chapitre 2, section Mettre en forme du texte avec le panneau Proprits ). Formatage des adresses e-mail ou postales Ces blocs permettent de dnir des adresses postales ou e-mail. En XHTML, les adresses sont introduites par llment <address></address>. Dreamweaver ne propose cet lment quen mode Code. Pour insrer un bloc dadresse, cliquez lendroit o vous souhaitez insrer cet lment et saisissez ladresse entre les balises <address> </address>. Le mode code propose gnralement la balise ds que vous commencez son criture.
181
Introduction au XHTML
Une page XHTML est constitue de balise qui la structurent. Ces balises, galement appeles tags, sont toujours encadres par les signes < et > (<body> par exemple). On trouve des balises douverture ou de fermeture. La balise de fermeture est identique celle douverture, mais elle est prcde dune barre oblique (/), par exemple </body>. Dans une balise, on crit parfois des mots, appels attributs, qui permettent dajouter des informations supplmentaires au comportement de la balise. De nombreux attributs ne sont plus utiliss en XHTML, et principalement en XHTML 1.0 Strict, car ils donnent la balise un caractre spcique. Voici un exemple dattribut employ en XHTML, lattribut class : <div class="engras">. La structure gnrale dun document XHTML est dnie par les balises de type bloc ; la structure des textes est dtermine par les balises de type en ligne , aussi nommes balises inline.
Les balises blocs
Les balises de type bloc permettent de structurer la page XHTML en plusieurs grandes parties. Elles peuvent contenir dautres balises de type bloc et des balises dites en ligne (inline). Ainsi, on pourra par exemple facilement sparer une zone de menu dune zone de contenu en utilisant deux lments <div> correctement positionns. La zone de contenu pourra elle aussi tre subdivise en dautres blocs. Il est par ailleurs possible de spcier une largeur et une hauteur pour les balises de type bloc. noter galement quelles gnrent toutes au minimum un retour la ligne auquel sajoutera parfois une marge. Le tableau ci-dessous rsume les diffrentes balises disponibles pour crer des blocs dans la page.
Tableau 8-1 Les balises de type bloc
Balise Utilisation
Pour crer un bloc dadresse (postale ou e-mail). Pour crer un bloc de citation. Pour crer un bloc neutre de sparation. Pour crer une liste de dnitions. Pour crer un bloc avec un let de contour par dfaut. Cette balise est principalement utilise pour les formulaires. Pour crer un formulaire. Pour crer des titres de six niveaux diffrents (indispensable). Pour introduire une ligne horizontale. Pour crer une liste ordonne. Pour crer un bloc de paragraphe. Pour crer un bloc de texte prformat. Cette balise est peu utilise. Pour crer un tableau. Pour crer une liste non ordonne.
<address> <blockquote> <div> <dl> <fieldset> <form> <h1> <h6> <hr> <ol> <p> <pre> <table> <ul>
182
Dnition dune balise inline
Les balises de type en ligne (inline) sutilisent pour ajouter ou renforcer des textes. Elles ne peuvent pas contenir de balises bloc, mais uniquement des balises du mme type quelles. Le style de ces balises peut tre entirement modi par les feuilles de style. Dans un texte, la bonne attribution de ces balises amliore considrablement la maintenance du site, chaque lment de mme type tant identi par une balise. Les balises inline ne pourront pas avoir de taille en largeur et en hauteur et elles ne gnrent aucun retour la ligne. Le tableau ci-dessous prsente les principales balises en ligne.
Tableau 8-2 Les balises inline
Balise Utilisation
Pour crer une ancre ou un lien. Pour crer une abrviation. Pour crer un acronyme.
Balise
Utilisation
Pour barrer un texte, semblable la balise <strike>. Pour introduire un exemple dans le texte. Pour crer un champ de formulaire de type <select>. Cette balise doit tre dans une balise <form>. Pour crire des caractres plus petits. Balise neutre, semblable la balise <div> pour les lments inline. Pour barrer un texte. Pour mettre un texte en gras. Pour crire un texte en indice. Pour crire un texte en exposant. Pour crer un champ de formulaire de type texte multi lignes. Pour crire un texte en tltype.
<a> <abbr> <acronym>
<s> <samp> <select>
<b> <br> <cite> <code> <em> <i> <img> <input>
Pour mettre un texte en gras. Prfrez la balise <strong>. Pour insrer un retour la ligne. Pour crer une courte citation dans le texte. Pour insrer une ligne de code dans le texte. Pour mettre en valeur du texte. Pour mettre un texte en italique. Prfrez la balise <em>. Pour introduire une image. Pour crer un champ de formulaire de type input. Cette balise doit tre dans une balise <form>. Pour crire en caractres clavier. utiliser avec la balise <fieldset>. Pour introduire une courte citation dans le texte, semblable la balise <cite>.
<small> <span> <strike> <strong> <sub> <sup> <textarea> <tt>
<kbd> <label> <q>
<u> <var>
Pour souligner un texte. Pour introduire un texte de type variable.
183
Le modle des botes CSS

En CSS, les balises de types bloc et inline sont dnies comme des botes. Elles prsentent un contenu, une bordure, une marge entre le contenu et la bordure et sont espaces entres elles. Une bote possde quatre bords : haut, bas, droit et gauche. La gure 8-4 prsente le modle des botes CSS.
Figure 8-4
Le modle de bote CSS
La diffrence entre une bote de type bloc et une bote en ligne est la possibilit de donner une largeur et une hauteur aux blocs, ce qui constitue le principal travail du dveloppeur. En effet ce que nous dterminons comme la largeur et la hauteur ne reprsente en fait que la taille du contenu, sans tenir compte des marges, des bordures et de lespacement. Pour connatre lencombrement total, il faut additionner toutes les dimensions attribues. Pour connatre la taille gnrale de la bote, il faut additionner toutes les dimensions, sauf la marge qui reste toujours transparente mais qui contribue malgr tout lencombrement gnral. Voici un exemple pratique qui vous permettra de mieux aborder ce sujet. Nous voulons raliser un menu vertical qui sinscrira dans un bloc de type <div>. Ce bloc aura une largeur de contenu de 150 pixels. Pour que les intituls du menu soient correctement positionns, nous attribuons un remplissage intrieur de 20 pixels gauche et de
184
10 pixels droite. Une bordure de 1 pixel entourera le menu et une marge droite de 20 pixels vitera que les lments adjacents ne collent le menu, enn nous avons ajout un arrire-plan de couleur gris. La gure 8-5 prsente ce menu dans un navigateur, ainsi quune zone de texte ajoute sur la droite.
Figure 8-5
Encombrement dune bote
On calculera la largeur totale du menu en additionnant la largeur de la bote, les deux remplissages les bordures droite et gauche et la marge de droite. La taille de cette bote sera donc de 202 pixels. Si cette bote possde un style qui lui attribue un remplissage, la marge droite ne sera pas prise ne compte pour le remplissage car elle est toujours transparente. Un cas particulier doit cependant tre prsent. En effet, Internet Explorer 5.0 et 5.5 nafchent pas les botes de la mme manire. Pour notre exemple, la taille totale de la bote serait gale 150 pixels et la largeur du contenu serait de 118 pixels. Dans ces deux versions dInternet Explorer, la taille totale de lencombrement est la taille spcie en largeur (et en hauteur) et la taille disponible pour le contenu est rduite. Cest ce que lon appelle le mode Quirks, mode de calcul propre IE 5.0 et 5.5. Attention toutefois, IE 6 et les versions plus rcentes peuvent passer en mode Quirks dans les cas suivants : la page HTML est sans DOCTYPE (donc non valide) ; la page HTML possde un DOCTYPE incomplet ; la page HTML contient des caractres avant la DTD ou elle est prcde du prologue XML ; la page HTML possde une DTD dont la version est infrieure la version 4.
Les rgles XHTML conformit 1.0 Strict

Le XHTML tant un langage, il suit certaines rgles dcriture. Avec Dreamweaver, vous naurez normalement pas vrier les rgles dorthographe et de syntaxe de vos pages.
185
Cependant, certaines manipulations insrent des attributs qui ne sont pas conformes aux rgles XHTML 1.0 Strict. Voici les principales rgles de syntaxe du XHTML : Tout en minuscule Les balises et attributs doivent tre saisis en bas de casse (minuscule). Guillemets pour les valeurs dattributs La valeur des attributs doit tre indique entre guillemets. Exemple : <img src="dossier/image1.jpg" />. Pas dattributs sans valeur Alors quen HTML il existe des attributs minimiss (sans valeur), cela nest pas concevable en XHTML. Il faut donc doubler le codage mme si cela parat trange. Exemple : <input checked="checked"/> et non <input checked>. Toutes les balises doivent tre fermes En HTML, il est parfois tolr de ne pas fermer une balise. En XHTML, mme les balises dinsertion (<br>, <meta>, <img>, etc.) doivent avoir une syntaxe de fermeture (<br/>). Encodage des caractres < et & Les signes <, > et & tant porteurs de sens en XHTML, il faut les coder respectivement avec les entits <, > et & (ne pas oublier le point-virgule la n de lentit). En plus de ces rgles ofcielles , vous devez toujours garder lesprit que la balise utilise doit tre la plus gnrique possible. Son style sera donn par la feuille de style et non par un attribut interne. Voici un exemple de code XHTML non valide :
<p align="center" id="relief">En relief</p>
Lcriture de cette balise a t ralise dans Dreamweaver. Lattribut dalignement align= "center" a t obtenu en choisissant le menu Format>Aligner>Centrer. Avec cette commande, Dreamweaver a incorpor lattribut de centrage de llment. Lcriture
align="center" est errone car elle donne un caractre spcique de centrage llment.
La modication, pour un alignement gauche, obligera le concepteur modier le code de la page. Une rgle de style, plus adapte, ne modiera pas le code XHTML. Lusage de la palette des Proprits de style est, pour cela, recommande avec Dreamweaver CS4.
Vrier votre code

Pour vous aider dans lcriture des balises et des attributs, Dreamweaver dispose dun outil permettant de vrier la bonne syntaxe du code, ainsi que le bon respect des rgles XHTML et notamment lusage dattributs non conformes. 1. Slectionnez le menu Fentre>Rsultats>Validation an dafcher le panneau Rsultats en bas de lcran.. 2. Pour paramtrer la validation, cliquez droit dans le panneau Rsultats pour afcher le menu contextuel et slectionnez Paramtres Vous pouvez galement cliquer sur la che verte situe gauche de ce panneau et choisir Paramtres 3. Dans la fentre Prfrences qui souvre alors, cochez la case XHTML 1.0 Strict, ou ventuellement, un autre DOCTYPE. Cliquez sur OK pour valider vos choix.
186
Figure 8-6
Longlet Validation du panneau Rsultats permettant de valider le code XHTML
4. Pour lancer la vrication, cliquez ensuite sur la che verte du panneau Rsultats et choisissez Valider le document actuel ou lune des deux autres options concernant les pages du site. Le rsultat de la vrication safche alors dans le panneau Rsultats. La gure 8-7 prsente une vrication comportant une erreur : la balise <p> comporte un attribut align= "center" non valide.
Figure 8-7
Le rsultat de la vrication du code dans Dreamweaver
Vrier votre code avec le W3C
Pour valider le code de vos pages, vous pouvez galement utiliser loutil mis disposition gratuitement par le consortium W3C ladresse suivante : http://validator.w3.org/. Cet outil permet de valider vos documents de trois manires : Onglet Validate by URL Indiquez lURL dune page Web ou dun site mis en ligne. Onglet Validate by File Upload Permet de tlcharger une page Web depuis votre machine en vue de sa validation. Onglet Validate by Direct Input Permet de copier le code valider dans le champ prvu cet effet. Une fois votre choix effectu, cliquez sur le bouton Check. Le rsultat (en anglais) est pratiquement immdiat.
187
Introduction aux styles CSS

Une page XHTML bien conue doit tre lisible par tous les navigateurs graphiques, vocaux, braille, en mode texte, mais galement par les tlphones portables. Lafchage des textes doit tre le plus propre possible. La majorit des internautes utilise des navigateurs graphiques, aussi, cest sur ce mode de prsentation que se portent gnralement les efforts. Les feuilles de style ont considrablement amlior le travail graphique, en dehors du graphisme pur des images, bien entendu. Elles vous aideront pour la mise en page de vos documents et leur rendu graphique. Elles vous permettront galement, avec les mmes pages XHTML, de crer des mises en page pour limpression, pour les tlphones portables, ainsi que dautres mdias. Si votre document XHTML est bien conu, vous pourrez ainsi le diffuser sur de nombreux mdias.
Placer les styles

Les styles peuvent se placer diffrents endroits : dans la zone den-tte du document, lintrieur des balises en tant quattributs ou encore dans un document externe. Dans la suite de ce chapitre, nous ne dtaillerons que deux mthodes de placement des styles : dans la zone den-tte du document et dans un document externe. La troisime mthode est peu vidente mettre en uvre et gnre un code en contradiction avec la sparation du fond et de la forme.
Les styles placs dans la zone den-tte
Lorsque le style est utilis uniquement sur une seule page, il est possible de placer sa dnition dans la page elle-mme. Ceci permet didentier rapidement le style dun lment et de le modier facilement. Il est dusage de placer les styles lintrieur de commentaires  an de les masquer pour les (trs) anciens navigateurs. Les styles sont placs dans la balise <style type="text/css">. Lattribut type="text/css" permet de prciser la page HTML quels type de styles seront crit ici. Cet attribut est obligatoire. Lexemple suivant vous permettra de dcouvrir deux styles, en mode Code, placs dans la zone den-tte dun document XHTML.
<head><title>Page dexemple</title> <style type="text/css"> <!-h1{ font-size:20pt; font-family:"times"; } body{ background-color:yellow; }--> </style> </head>
188
Les styles placs dans une feuille externe
En gnral, les styles que vous allez crer devront sappliquer plusieurs pages XHTML. Pour simplier la gestion des styles de vos pages, vous pouvez donc les regrouper dans un document unique qui sera appel par chacune des pages XHTML. Pour lier un chier externe CSS une page XHTML, vous pouvez : utiliser la balise <link/>, place dans len-tte de la page, laquelle sera ajout lattribut href pour crer le lien vers la feuille de style ; utiliser la balise <style> accompagne de la directive @import. Voici une illustration de ces deux mthodes dappel de feuille de style externe : Avec la directive @import:
<style type="text/css"> @import url(dossierStyle/style1.css)screen; @import url(dossierStyle/styleImpression.css)print; </style>
Avec la balise <link> place dans len-tte de la page :

<head><title>Page dexemple</title> <style type="text/css"> <!-<link rel="stylesheet" type="text/css" href=" dossierStyle/style1.css" media="screen"> <link rel="stylesheet" type="text/css" href=" dossierStyle/styleImpression.css" media="print"> </style> </head>
Ces deux exemples font tous les deux appel deux feuilles de style : lune pour le mdia screen, lautre pour le mdia print. Cette mthode de sparation des feuilles de style selon les mdias est couramment utilise car elle permet dobtenir des mises en page diffrentes selon le mdia courant. La feuille de style print est appele ds que lon choisit la commande Impression de la page. Lemploi de ces deux mthodes est assez semblable lorsque lon souhaite lier une feuille de style une page XHTML pour une utilisation cran. La diffrence se fait surtout lorsque lon souhaite spcier des mdias diffrents. Dans ce cas, la mthode qui recourt la balise <link> savre la plus universelle pour tous les navigateurs.
Comprendre les CSS

Une page XHTML est organise grce aux balises qui permettent de diffrencier, par exemple, les titres de paragraphes et les listes du texte courant. Chaque balise tant diffrente, il est ais de lui appliquer un style propre. Les premires rgles de styles, facilement ralisables, seront donc les rgles applicables directement aux balises. Ce seront les slecteurs de balise qui permettent donc de rednir laspect du contenu dune balise,
189
telle que la balise <p>, par exemple. Ainsi, dans la page, tous les blocs <p> auront un aspect identique. Si votre page XHTML est trs grande, vous souhaiterez sans doute appliquer des styles diffrents aux balises an de structurer la page. Ainsi, vous pourrez, par exemple, appliquer des styles diffrents aux textes placs dans des balises <p>. Cela permettra de diffrencier les paragraphes entre eux. Pour raliser cela, il vous sufra dajouter un attribut ID ces balises. Les balises <p> porteront ainsi un signe distinctif et vous pourrez choisir des proprits diffrentes pour chacun des paragraphes. Les attributs ID doivent tre uniques et scrivent en un seul mot, sans caractre particulier. Lusage de ces attributs sera donc la deuxime possibilit dattribuer un style un lment de la page. Ce seront les slecteurs dID. Les attributs ID tant uniques, il ne sera pas facile dappliquer un mme style plusieurs balises diffrentes. Ainsi, si nous souhaitons attribuer temporairement le mme style une balise <h4> et un paragraphe, nous devrons crer un mme style, attribu des ID diffrents pour chacune des balises. Lutilisation dune classe permet dattribuer un mme style plusieurs lments de la page. Une classe peut tre attribue nimporte quel lment de la page. Ce seront les slecteurs de classe. Enn, la grammaire des feuilles de style tant assez riche, il existe dautres slecteurs et dautres combinaisons de slecteurs qui permettront, par exemple, de sadresser toutes les balises de la page, plusieurs balises ou identiants simultanment ou encore des lments imbriqus dans dautres lments. Les paragraphes suivants dtaillent les principaux slecteurs, ainsi que les bases de la grammaire dnissant les styles.
La grammaire
Les feuilles de style, quelles soient internes la page ou externes, suivent des rgles dcriture trs strictes. Toute erreur dcriture entranera la non-reconnaissance de linstruction. Si vous utilisez Dreamweaver pour crer vos pages Web, vous naurez pas besoin de connatre ces rgles par cur, mais elles vous seront utiles pour vrier la syntaxe de certains documents (en mode Code). Dans une page XHTML, un style est cr dans llment <style type="text/css"></style>. Dans une feuille de style externe, le style est directement crit dans la page. Dans une page HTML ou une feuille externe, un style scrit de la manire suivante :
Selecteur{ Proprit:valeur; }
On crit le slecteur, puis on ouvre une accolade. La premire instruction est crite avec une paire proprit:valeur, suivie dun point-virgule. Lorsque toutes les instructions sont crites, on ferme laccolade.
190
Un slecteur de classe doit tre prcd dun point (.). Un slecteur dID doit tre prcd dun caractre dise (#).
Crer un nouveau style

Dans Dreamweaver CS4, la cration dun nouveau style seffectue de deux manires : depuis la palette des styles CSS et depuis la palette des Proprits en activant le bouton CSS lorsque cela est possible.
Crer un style avec le panneau des Styles CSS
Pour afcher le panneau des styles, slectionnez le menu Fentre>Styles CSS. Cliquez ensuite sur le bouton Tous (voir le chapitre 9 pour une description de la palette des Styles CSS). Voici la marche suivre pour crer un nouveau style : 1. Depuis le panneau des Styles CSS, cliquez sur licne Nouvelle rgle de CSS situe en bas de la palette (voir gure 8-8).
Figure 8-8
Icne Nouvelle rgle de style CSS
La bote de dialogue Nouvelle rgle de CSS souvre alors (voir gure 8-9), permettant de choisir le slecteur qui dnira le style. 2. Loption Dnition de rgle, place dans la partie infrieure de la bote, vous permet dindiquer lemplacement du nouveau style. Par dfaut, Dreamweaver vous propose denregistrer cette nouvelle rgle dans le document courant. Cest loption Ce document uniquement. Si vous slectionnez loption Nouveau chier Feuille de style, aprs avoir cliqu sur le bouton OK, une bote de dialogue souvrira vous demandant de choisir un nom et un emplacement pour la nouvelle feuille de style. Enregistrez-la avec lextension .css. Elle sera ensuite automatiquement lie au document en cours, mais vous devrez en revanche la lier tous les nouveaux documents, comme aux anciens. Si vous choisissez Seulement ce document, les rgles de styles se placeront dans la zone den-tte du document, dans la balise <style>. 3. Vous devez prsent choisir un type de slecteur et, le cas chant lui attribuer un nom. Consultez la suite de ce chapitre et le chapitre 9. 4. Cliquez sur OK pour valider vos choix. La fentre de dnition des rgles de CSS souvre alors. Reportez-vous au chapitre 9 pour de plus amples informations sur les rgles CSS.
191
Figure 8-9
Choix du slecteur
Crer un style avec la palette des Proprits
Pour afcher la palette des Proprits, slectionnez le menu Fentre>Proprits. Voici la marche suivre pour crer un nouveau style : 1. Depuis la palette des Proprits, cliquez sur licne du bouton CSS. Dans la zone Rgle cible, choisissez <Nouvelle rgle de CSS>. 2. Cliquez ensuite sur le bouton Modier la rgle. La bote de dialogue Nouvelle rgle de CSS souvre alors (voir gure 8-9), permettant de choisir le slecteur qui dnira le style.
Figure 8-10
Menu cible Nouvelle rgle de CSS
192
Les slecteurs de balise

Les slecteurs de balise portent le nom dune balise. Ainsi, on pourra, par exemple, rednir la balise <body> reprsentant la page visible dans le navigateur. On pourra spcier une couleur darrire-plan, un style et une couleur pour tous les textes. Pour dnir le style dune balise, il sufra dcrire son nom dans la zone rserve aux styles, suivi de la syntaxe courante des styles. Voici un exemple de rednition de la balise <body> :
<style type="text/css"> body { background-color: #CCCCCC; font-family: Times New Roman, Times, serif; color: #FF0000; } </style>
Pour rednir une balise dans Dreamweaver, crez un nouveau style (voir la section prcdente Crer un nouveau style ), choisissez le type de slecteur Balise dans loption Type de slecteur de la bote de dialogue Nouvelle rgle de CSS, puis slectionnez le nom de la balise dnir dans le champ Balise :
Figure 8-11
Slection dune balise en vue de sa rednition
Les slecteurs de classe

Les slecteurs de classe permettent dattribuer leurs rgles de styles tous les lments prsentant un attribut class de la valeur du slecteur. Ils scrivent avec un point (.) suivi du nom du slecteur. Ce nom peut tre quelconque et doit tre crit en un seul mot, sans caractre particulier. Voici un exemple de classe dnie dans les styles de la page :
<style type="text/css"> .texteEncadre {
193
font-family: "Times New Roman", Times, serif; font-size: 18px; color: #003399; border: 1px solid #006699; }</style>
Voici un exemple de cette classe affecte une balise <p>:

<p class="texteEncadre">Le texte plac ici est encadr</p>
Pour gnrer un slecteur de classe dans Dreamweaver, crez un nouveau style (voir la section prcdente Crer un nouveau style ), choisissez le type de slecteur Classe dans loption Type de slecteur de la bote de dialogue Nouvelle rgle de CSS et indiquez le nom du slecteur dans le champ Nom du slecteur. Il est inutile de faire prcder le nom de la classe dun point (.) car celui-ci sera automatiquement ajout.
Figure 8-12
Cration dun slecteur de classe
Les slecteurs dID

Un attribut ID permet didentier un lment unique dans la page. Un slecteur dID sadressera donc un seul lment de la page. Il scrit avec le caractre dise (#) suivi du nom du slecteur. Ce nom peut tre quelconque et doit tre crit en un seul mot, sans caractre particulier. Voici un exemple de slecteur dID dni dans les styles de la page :
<style type="text/css"> #texteEncadreVert { font-size: 18px; color: #00FFFF; border: 1px solid #00FF00; } </style>
194
Voici un exemple de cet identiant plac dans une balise <p>:

<p id="texteEncadreVert">Ce texte est encadr en vert</p>
Pour crer un slecteur dID dans Dreamweaver, crez un nouveau style (voir la section prcdente Crer un nouveau style ), choisissez loption ID dans loption Type de slecteur de la bote de dialogue Nouvelle rgle de CSS, et indiquez le nom du slecteur dans le champ Nom du slecteur. Il nest pas utile dajouter le caractre # car Dreamweaver CS4 lajoute automatiquement.
Figure 8-13
Cration dun slecteur dID
Les slecteurs de pseudo-classe

Le concept des pseudo-classes permet aux CSS de crer une mise en forme partir dinformations absentes de la structure du document. Les pseudo-classes les plus courantes sont : :link, :visited, :hover et :active. Elles ajoutent des fonctionnalits llment dhyperlien <a>. En principe, ces pseudo-classes pourraient tre ajoutes dautres lments, mais Internet Explorer ne le supporte pas. Voici un exemple de deux slecteurs de pseudo-classe :
<style type="text/css"> <!-a:link { color: #FF0000; } a:visited { color: #CC9900; } --> </style>
195
Dans le cas prsent, rien nest prcis dans la page car le slecteur sadresse en fait la balise <a>. Pour crer un slecteur de pseudo-classe dans Dreamweaver, crez un nouveau style (voir la section prcdente Crer un nouveau style ), choisissez loption Compos (selon votre slection) dans la bote de dialogue Nouvelle rgle de CSS et indiquez le nom de la pseudo-classe dans le champ Nom du slecteur (voir gure 8-14).
Figure 8-14
Cration dun slecteur de pseudo-classe
a:link Dnit laspect des liens. a:visited Dnit laspect des liens visits. a:hover Dnit laspect des liens lorsquils sont survols par le curseur . a:active Dnit laspect des liens cliqus.
Autres syntaxes des rgles CSS

Dnir une mme rgle pour plusieurs slecteurs
Si vous souhaitez attribuer le mme style plusieurs slecteurs, vous devrez les crire les uns la suite des autres en les sparant par une virgule (,). Pour dnir une mme rgle pour plusieurs slecteurs dans Dreamweaver, crez un nouveau style, choisissez loption Compos de la bote de dialogue Nouvelle rgle de CSS et saisissez les diffrentes balises, spares par une virgule, dans le champ Nom du slecteur. Cliquez sur OK pour valider vos choix et dnissez les rgles de CSS.
196
Figure 8-15
Attribution dune mme rgle de style plusieurs slecteurs
Voici un exemple du rsultat obtenu dans la balise <style> de la page HTML :

<style type="text/css"> <!-h1, h2, h3, p, #contenu { font-family: "Courier New", Courier, monospace; font-size: 18px; color: #0000FF; } --> </style>
Slecteur contextuel parent-descendant
Un slecteur contextuel parent-descendant permet datteindre un lment plac dans un autre lment. Voici un exemple de code XHTML :
<p>consectetuer <em>adipiscing</em> elit, <strong>sed <em>diam</em></strong> nonummy <strong>nibh</strong> euismod</p>
En utilisant un slecteur parent-descendant, nous allons pouvoir atteindre uniquement le mot diam, plac dans un lment <em>, lui-mme plac dans un lment <strong>. La syntaxe dun slecteur parent-descendant est la suivante : les slecteurs sont spars par un caractre blanc et sont de la forme A B. Le code pour atteindre le contenu dun lment <em> plac dans un lment <strong> sera :
strong em { color: #FF0000; }
Pour crer un slecteur contextuel parent-descendant dans Dreamweaver, crez un nouveau style, choisissez loption Avanc dans la bote de dialogue Nouvelle rgle de CSS et indiquez le nom du slecteur parent-descendant dans le champ Nom du slecteur (voir gure 8-16).
197
Figure 8-16
Cration dun slecteur parent-descendant
Slecteur universel
Pour appliquer un style tous les lments, vous utiliserez le slecteur universel * (toile). Pour crer un slecteur universel dans Dreamweaver, crez un nouveau style, cochez loption Avanc dans la bote de dialogue Nouvelle rgle de CSS et saisissez le caractre * dans le champ Nom du slecteur. Cliquez sur OK pour valider vos choix et dnissez les rgles de CSS. Dans lexemple suivant, tous les lments seront crits en police Arial :
*{font-family:"arial";}
Lorsquun tel style est cr, vous pouvez attribuer un autre style un lment particulier et utiliser le phnomne de cascade. Dans lexemple prcdent, tous les textes inclus dans toutes les balises de cette page safcheront en Arial, sauf si vous spciez une autre police pour une balise particulire. Le code ci-aprs prsente cet exemple auquel nous avons ajout une rgle de style pour les balises p. Ainsi, les paragraphes safcheront en Times.
*{font-family:"arial";} p{font-family:"times";}
Les units de mesure

La fentre de dnition des rgles CSS (voir chapitre 9) vous propose systmatiquement une unit de mesure lorsque cela est ncessaire. La valeur par dfaut dans Dreamweaver est le pixel, mais vous pouvez galement choisir une autre unit de mesure. Si vous souhaitez modier des valeurs en mode Code, vous devrez toujours indiquer lunit,
198
faute de quoi la rgle ne sappliquera pas. Une exception cependant : le zro. Lorsque vous attribuez cette valeur, il nest pas utile de prciser lunit car 0 est toujours 0, quelle que soit lunit choisie. Les units peuvent tre ngatives ou positives. Les units dcimales scrivent avec un point (.), mme lorsquil sagit de cm ou de mm. Par exemple : 0.5 cm. Les units proposes en CSS se classent en deux catgories : les units absolues et les units relatives.
Les units absolues
Les units absolues sont des units connues . Elles ne dpendent pas de la rsolution de lcran, de la taille de la police ou encore de la taille de la fentre du navigateur. La valeur 1 dans une unit absolue aura toujours la mme valeur. Lutilisation des units absolues nest pas prconise car elles sont mal restitues lcran. Elles sont nanmoins utiles si les proprits physiques du mdia de sortie sont connues. On pourra utiliser les units absolues, comme le cm, dans une feuille de style destine au mdia print.
Les units relatives
Les units relatives dpendent dautres proprits et sont donc relatives puisquune mme valeur aura une reprsentation diffrente suivant la valeur de sa proprit de rfrence. Elles sont trs utilises en multimdia car il nest pas possible de connatre lavance la rsolution de lcran de lutilisateur. Lunit la plus connue est le pixel.
Description des units proposes dans Dreamweaver
Voici une courte description des diffrentes units de mesure disponibles dans Dreamweaver : Pixels (px) Le pixel est une unit relative, cest lunit de base en multimdia. Les dveloppeurs lutilisent pratiquement comme une unit absolue. On dnit la taille des pages et des images en pixels. Lunit est relative car elle dpend de la rsolution du systme de restitution : cran, imprimante Point (pt) Le point est une unit de mesure absolue, cest une mesure typographique que lon utilise pour limpression (ne lutilisez pas en multimdia). 1 point vaut 1/72 pouces. Vous pourrez, par ailleurs, utiliser cette unit pour une feuille de style destine limpression. Pouce (in) Le pouce est une unit de mesure absolue de longueur anglo-saxonne. Elle ne signie rien en multimdia, ne lutilisez pas. 1 pouce vaut 2,54 cm. Vous pourrez, par ailleurs, utiliser cette unit pour une feuille de style destine limpression.
199
Centimtre (cm) Le centimtre est une unit de mesure absolue. Elle nest pas utilise en multimdia car elle ne reprsente rien lcran, lequel est constitu de pixels de tailles variables. Vous pourrez, en revanche, utiliser cette unit pour une feuille de style destine limpression. Millimtre (mm) Le millimtre est une unit de mesure absolue, cest une division du cm. Pica (pc) Le pica est une unit de mesure absolue de mesure typographique. 1 pica vaut 12 points. Cadratin (em) Cette unit de mesure est relative. Elle correspond la valeur calcule pour la proprit font-size de llment. Lorsque cette unit est spcie dans la proprit font-size, elle se rfre la taille de la police de llment parent. Lorsque lon utilise cette unit dans une page, on xe gnralement la balise <body> avec un font-size de 100 % ou 62,5 %, ou bien on ne xe pas de taille. Dans ce dernier cas, le navigateur utilise soit ses prfrences par dfaut, soit la feuille de style de lutilisateur. Cette unit permet de raliser des documents uides. Exs (ex) Cette unit de mesure est relative. Elle est dnie par rapport la valeur de la proprit x-height. Cette valeur correspond la hauteur du caractre x minuscule. Elle est dnie mme pour les polices qui nen contiennent pas. Cette unit est similaire lunit em. Pourcentage (%) Le pourcentage est une unit de mesure relative la taille de llment ou celui de son parent. Il est courant dutiliser le pourcentage pour positionner ou rgler la taille dun lment.
Les couleurs
Dans les feuilles de style, comme dans tout le document XHTML, les couleurs ont trois syntaxes possibles : avec le nom de la couleur en anglais ; en code hexadcimal ; en RVB (Rouge, Vert, Bleu). Parmi ces trois systmes, le code hexadcimal reste le plus employ par les concepteurs. Le code nominatif est facilement utilisable pour les couleurs courantes.
Les couleurs nominatives
Ofciellement, seules 16 couleurs nominatives sont dnies pour les feuilles de style CSS2 bien que de nombreuses couleurs soient implmentes dans les navigateurs (voir annexe D). Voici les 16 couleurs qui pourront tre utilises sans problme de compatibilit entre navigateurs : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow.
200
Les couleurs hexadcimales
La mthode la plus utilise, et qui offre une palette de couleurs complte, est lutilisation du code hexadcimal. Dans cette notation, la couleur est dnie par deux chiffres hexadcimaux pour chacune des composantes rouge, vert et bleu. Le code couleur est prcd du caractre dise (#). En mode hexadcimal, la notation des chiffres schelonne de 0 9, puis de A F. Nous obtenons ainsi 16 caractres, on dispose donc de 256 possibilits de codage pour chacune des composantes. Voici des exemples de couleurs hexadcimales : blanc : #FFFFFF ; noir : #000000 ; vert : #00FF00 ; bleu : #0000FF ; gris : #666666 ; orange : #FF6600 ; rose : #F25EA8. Les couleurs hexadcimales peuvent se dnir par trois chiffres hexadcimaux, ce qui rduit le choix de la palette de couleurs, mais qui est plus rapide crire. Cette criture revient crire deux fois le mme chiffre en notation hexadcimale complte. Voici des exemples de couleurs hexadcimales crites avec trois chiffres. blanc : #FFF ; noir : #000 ; vert : #0F0 ; rouge : #F00.
Les couleurs RGB
La mthode RGB utilise aussi une dnition des trois composantes avec, cette fois, des valeurs allant de 0 255 (similaire la notation hexadcimale). Le code couleur doit tre de la forme suivante : rgb(r,v,b). Voici des exemples de couleurs crites en mode RGB : blanc : rgb(255,255,255) ; noir : rgb(0,0,0) ; rouge : rgb(255,0,0) ; gris : rgb(128,128,128) ; vert fonc : rgb(0,100,0).
201
Conclusion
Lutilisation dun logiciel dintgration tel que Dreamweaver ne doit pas se substituer une bonne connaissance des rgles permettant de raliser des pages en XHTML/CSS. Dreamweaver est un logiciel efcace et performant, mais il ne peut deviner quelle rgle de style doit sappliquer un paragraphe, ni quel style donner des lments particuliers.
9
Les rgles de styles
Il est ncessaire de bien connatre les rgles de styles, mais, pour un usage performant de Dreamweaver, il est aussi utile de bien connatre leurs possibilits, la manire de les crer, de les modier et de les supprimer. Ce chapitre prsente dans le dtail les diffrentes proprits des styles, ainsi que les moyens en permettant la cration et la gestion : le panneau Styles CSS. Dans ce chapitre, vous aborderez les points suivants : le panneau Styles CSS ; la palette des Proprits ; travailler avec le panneau Styles CSS ; les rgles de styles ; vrier la compatibilit des styles ; attribuer un style un lment.
204
Le panneau Styles CSS

Dans Dreamweaver, la cration de styles peut seffectuer au moyen du panneau Styles CSS. Pour lafcher, slectionnez le menu Fentre>Styles CSS (voir gure 9-1).
Figure 9-1
La fentre Styles CSS
Les boutons Tous et Actuel de longlet Styles CSS de cette fentre permettent den choisir lafchage.
Les diffrents modes dafchage

Le mode dafchage Tous
Ce mode afche tous les styles de la page. Le panneau Styles CSS est alors divis en deux cadres (voir gure 9-1) : Cadre Toutes les rgles Safchent ici toutes les rgles de styles utilises dans la page, y compris les rgles places dans une feuille externe. Les rgles situes dans la page sont sous le repre <style>, les rgles places dans une feuille de style externe
Les rgles de styles CHAPITRE 9
205
sont sous le nom de la feuille de style. La gure 9-1 prsente dans le cadre Toutes les rgles les deux types de documents. La feuille de style externe se nomme feuille1.css. Cadre Proprits Safchent ici les proprits du style slectionn. Sur la gure 9-1, le slecteur slectionn est #conteneur.
Le mode dafchage Actuel
Ce mode afche les proprits qui affectent un lment slectionn dans la page. Dans la page en cours de cration, nous avons slectionn une balise <h2> et son contenu. La gure 9-2 prsente la fentre Styles CSS en mode Actuel. La zone Rsum de la slection afche toutes les proprits qui affectent la slection courante. Il sagit ici du type de police et de marges gales 0. La zone Rgles afche quatre slecteurs dont les rgles affectent la slection car ces diffrentes rgles sont places dans les lments parents de notre slection ou bien dans notre slection elle-mme. Les slecteurs sont classs par ordre croissant dimportance. Celui qui est plac en bas est plus proche de llment slectionn que celui qui est plac en haut. Certaines proprits sont barres car elles naffectent pas la slection courante, mais font partie de la hirarchie des styles.
Figure 9-2
Le mode Actuel de la fentre Styles CSS afch en cascade
206
Grce aux deux icnes situes droite du mot Rgles , vous pourrez choisir dafcher dans cette zone les informations sur la proprit slectionne ou dafcher une cascade de rgles pour cette mme proprit. Sur la gure 9-2, nous avons slectionn la cascade de rgles, contrairement la gure 9-3 pour laquelle nous avons choisi dafcher les informations sur la proprit slectionne dans la zone Rsum de la slection.
Figure 9-3
Le mode Actuel de la fentre Styles CSS afchant les informations sur la proprit slectionne
Prsentation des proprits

Les modes dafchage Tous et Actuel peuvent prsenter leurs proprits de trois manires diffrentes correspondant aux trois icnes situes en bas gauche de la fentre Styles CSS : Afcher la vue par catgorie Permet dafcher toutes les proprits existantes en CSS par catgorie. Cliquez sur le bouton + dune catgorie pour en afcher toutes les proprits. Les proprits faisant partie du style slectionn se trouvent en haut de la zone Proprits et sont crites en bleu. Les catgories prsentes ici sont les mmes que celles de la fentre Dnitions des rgles de CSS, avec toutefois une catgorie supplmentaire : Tableaux, Contenu, Guillemets. Notez que cette prsentation des proprits, tout comme la prsentation sous forme de liste, propose toutes les proprits spcies par le consortium W3C. Cliquez dans la cellule situe droite de la proprit choisie pour lajouter au style slectionn en haut de la fentre (ici #conteneur). Suivant le type de proprit, Dreamveaver vous proposera des valeurs particulires, ou une zone dans laquelle vous crirez un chiffre, par exemple. La gure 9-5 prsente deux aspects de ces choix.
207
Figure 9-4
Les proprits de la fentre Styles CSS prsentes par catgorie
Figure 9-5
La slection dune proprit de style
208
Afcher la vue sous forme de liste Permet dafcher toutes les proprits existantes en CSS par ordre alphabtique et sous forme de liste. Notez que cette prsentation des proprits, comme la prsentation par catgorie, prsente toutes les proprits dnies par le consortium W3C.
Figure 9-6
Les proprits de la fentre Styles CSS prsentes sous forme de liste
Pour spcier une proprit, cliquez dans la cellule situe sa droite. Afcher uniquement les proprits dnies Permet dafcher toutes les proprits du style slectionn dans la zone suprieure. Avec ce type de prsentation, seules les
209
proprits dj spcies sont afches. Pour en ajouter, cliquez sur le lien Ajouter une proprit. Dans ce cas, il faudra connatre la proprit car aucune aide nest disponible. La gure 9-7 prsente la fentre Styles CSS selon ce mode dafchage. Dautres mthodes, plus simples, permettront dajouter une proprit un style existant, notamment ldition dun style depuis la fentre Styles CSS pour ouvrir la fentre des rgles de styles CSS.
Figure 9-7
La fentre Styles CSS nafchant que les proprits dnies
Si vous ne parvenez pas afcher les proprits, cliquez sur la ligne situe au-dessus du mot Proprits et faites-la glisser vers le haut pour ouvrir la zone dafchage.
Travailler avec le panneau Styles CSS

La cration dun nouveau style a t traite au chapitre prcdent, nous vous invitons vous y reporter si vous souhaitez en connatre les principes. Dans cette section, nous aborderons les outils de gestion de la fentre Styles CSS permettant dditer ou de supprimer un style, de lier une feuille de style et dexternaliser des styles.
Les outils de gestion du panneau Styles CSS

Le panneau Styles CSS prsente quatre icnes, situes en bas droite, permettant de lier une feuille de style au document, de crer une nouvelle rgle CSS, dditer ou de supprimer un style (voir gure 9-8).
210
Figure 9-8
Les boutons de gestion des styles de la fentre Styles CSS
Vous pouvez galement utiliser le menu local situ en haut droite de la fentre (voir gure 9-9) pour grer les styles CSS.
Figure 9-9
Le menu local de la fentre Styles CSS
diter un style
Pour diter un style, choisissez lune des mthodes suivantes depuis la fentre Styles CSS : Slectionnez le style, puis cliquez sur licne Modier le style symbolise par un crayon. Double-cliquez sur le style. Faites un clic droit (Ctrl + clic sur Mac) pour ouvrir le menu contextuel et choisissez Edition. Quelle que soit la mthode choisie, la fentre de dnition des rgles CSS souvrira, vous permettant ainsi de modier le style slectionn. Attention, un style modi est automatiquement appliqu la page HTML.
Supprimer un style
Pour supprimer un style, choisissez lune des mthodes suivantes depuis la fentre Styles CSS : Slectionnez le style et cliquez sur licne Supprimer rgle de CSS symbolise par une corbeille. Slectionnez le style, puis appuyez sur la touche Suppr du clavier. Faites un clic droit (Ctrl + clic sur Mac) pour ouvrir le menu contextuel et choisissez Effacer.
211
Lorsquun style est supprim, llment auquel il sadressait est automatiquement remis dans le style par dfaut de la page ou bien dans le style de son lment parent.
Lier une feuille de style

Dreamweaver tant l pour vous aider dans la cration de vos pages Web, vous naurez pas crire le code pour insrer une feuille de style. Voici la marche suivre pour attacher une feuille de style externe (document .css) une page XHTML ouverte.
Dans un document ouvert
1. Ouvrez la fentre Styles CSS via le menu Fentre>Styles CSS. 2. Cliquez sur licne Attacher une feuille de style an douvrir la bote de dialogue Ajouter une feuille de style externe .
Figure 9-10
Licne Attacher une feuille de style
Cette fentre vous permettra de renseigner un certain nombre de paramtres pour la feuille de style lier au document : Saisissez manuellement le nom de la feuille de style lier dans le champ Fichier/URL ou cliquez sur le bouton Parcourir pour la slectionner sur votre ordinateur (voir gure 9-11).
Figure 9-11
La fentre Ajouter une feuille de style externe
212
Choisissez la mthode du lien grce loption Ajouter sous : Lien, utilise la balise <link> ; Importer, utilise la directive @import (voir chapitre 8). Slectionnez le type de mdia correspondant la feuille de style. Ce choix devient essentiel ds lors que des feuilles de style spciques ont t cres pour diffrents mdias. La gure 9-11 prsente les diffrents mdias proposs. Certaines proprits sont spciques certains mdias. all Feuille de style destine tous les systmes de visualisation. oral Feuille de style destine aux synthtiseurs de parole. braille Feuille de style destine aux appareils braille retour tactile. handheld Feuille de style destine aux appareils portatifs comme les tlphones portables ou les PDA. print Feuille de style destine un support pagin opaque et aux documents visualiss lcran en mode Aperu avant impression. projection Feuille de style destine aux projections, par exemple avec des projecteurs ou des impressions pour des transparents. screen Feuille de style destine principalement aux moniteurs couleurs. tty Feuille de style destine aux mdias utilisant une grille de caractres xe, tels les tltypes, les terminaux ou les appareils portatifs aux capacits dafchage rduites. tv Feuille de style destine aux appareils de type tlviseur prsentant les caractristiques suivantes : basse rsolution, afchage couleur, dlement des pages limit, son.
Crer un nouveau document avec une feuille de style lie
1. Slectionnez le menu Fichier>Nouveau. 2. Dans la fentre Nouveau document qui souvre alors, cliquez sur licne Attacher une feuille de style, situe en bas droite (voir chapitre 2) an douvrir la bote de dialogue Ajouter une feuille de style externe .
Externaliser des styles

Les styles internes la page sont disponibles uniquement dans cette page. Pour quils puissent tre utiliss par dautres pages du site, vous devrez les placer dans une feuille de style externe. 1. Depuis la fentre Styles CSS, slectionnez les styles placer dans une nouvelle feuille de style ou dans une feuille existante. Pour slectionner plusieurs styles la fois, cliquez dessus tout en appuyant sur la touche Maj pour des slections contigus, ou la touche Ctrl pour des slections non contigus.
213
2. Cliquez sur le menu Local situ en haut droite de la fentre Styles CSS et choisissez Dplacer les rgles CSS (voir repre de la gure 9-12) La bote de dialogue Dplacer dans une feuille de sttyle externe souvre alors (repre de la gure 9-12).
Figure 9-12
La bote de dialogue Dplacer dans une feuille de style externe
3. Cochez loption Feuille de style si la feuille de style dans laquelle vous souhaitez placer les styles slectionns existe dj. Saisissez manuellement son nom ou cliquez sur le bouton Parcourir pour la slectionner sur votre ordinateur. Cochez loption Nouvelle feuille de style si vous souhaitez en crer une nouvelle. Une fentre dinvite denregistrement souvre alors. Inscrivez le nom de la nouvelle feuille de style crer dans le champ Nom du chier et enregistrez-la. 4. Cliquez sur OK pour valider vos choix. Les styles sont alors ajouts la nouvelle feuille et afchs sparment dans la fentre Styles CSS : les styles de la page se trouvent sous la balise <style> et les styles externes sont sous le nom de la feuille nouvellement cre.
La palette des Proprits

Dans Dreamweaver CS4, la palette des Proprits tient une position importante pour la cration de styles CSS. Cest la raison pour laquelle elle gure dans ce chapitre. Pour crer un nouveau style ou bien pour le modier, cliquez dans le menu droulant Rgle cible. Suivant llment slectionn dans la page en mode Cration, le menu afche des choix un peu diffrents. Dans lexemple de la gure 9-13, nous avons slectionn le contenu dun lment nomm Entete. Le menu afche donc cet identiant,
214
nous permettant den modier les proprits. Aprs avoir slectionn la rgle, cliquez sur le bouton Modier la rgle.
Figure 9-13
Le menu Rgle cible de la palette des Proprits
La cration dune nouvelle rgle relve du mme principe. 1. Dans la page en mode Cration, cliquez sur un lment, un paragraphe par exemple, choisissez Nouvelle rgle de CSS dans le menu Rgle cible. 2. Cliquez ensuite sur le bouton Modier la rgle. La fentre Nouvelle rgle de CSS souvre. 3. Choisissez le type de slecteur, classe, ID, balise. Donnez un nom au slecteur. Validez en cliquant sur OK. Aprs dnition des proprits, cette rgle sappliquera llment slectionn et celuici comportera, le cas chant, lattribut de classe ou didentiant choisi dans la fentre Nouvelle rgle de CSS.
Prsentation des catgories

Avec Dreamweaver, la cration de styles suit toujours la mme dmarche : cration dun nouveau slecteur depuis la fentre Nouvelle rgle de CSS, puis dnition des rgles depuis la fentre Dnition des rgles de CSS. Cette fentre propose presque toutes les proprits CSS spcies par le W3C. Vous pourrez retrouver celles qui ny gurent pas dans la fentre Styles CSS, en activant lafchage par catgorie ou par ordre alphabtique sous forme de liste. Le cadre de gauche de cette fentre prsente la liste des catgories disponibles. Il suft den slectionner une pour en afcher le dtail. Voici le descriptif des diffrentes rgles de styles CSS disponibles dans la fentre Dnition des rgles de CSS.
La catgorie Type
Les rgles de CSS de la catgorie Type sont prsentes la gure 9-14. Elles permettent de modier laspect des textes.
215
Figure 9-14
La catgorie Type des rgles de CSS
Font-family Permet de choisir une liste de polices pour le texte. Correspond la proprit font-family. Font-size Indiquez une valeur dans lune des units proposes pour la taille du texte. Vous pouvez galement choisir lun des mots-cls proposs, lesquels sont rpartis en deux catgories : Les mots-cls de taille absolue : xx-small (trs trs petit), x-small (trs petit), small (petit), medium (moyen), large (grand), x-large (trs grand) et xx-large (trs trs grand). Leurs tailles se rfrent la taille par dfaut des polices dans le navigateur. Les mots-cls dont la taille est relative : smaller (plus petit), et larger (plus grand). Ils se rfrent la taille de police utilise dans llment parent. Correspond la proprit font-size. Font-style Permet dafcher le texte en normal (romain), en italic (italique) ou en oblique (oblique), ces deux derniers choix tant aujourdhui identiques sur tous les navigateurs. Correspond la proprit font-style. Line-height Permet de spcier la hauteur minimale de la bote contenant le texte. Cette hauteur se dcompose en un espace au-dessus et au-dessous des lettres. Le choix normal afche la valeur par dfaut. Vous pouvez galement indiquer une valeur pour augmenter ou rduire linterlignage. noter que la liste droulante des units de mesure pour cette valeur propose une entre multiple, qui est une valeur calcule obtenue en multipliant ce nombre par la taille de la police de llment. Correspond la proprit line-height.
216
Text-decoration Cochez les options souhaites pour appliquer les dcorations correspondantes au texte. Vous pouvez slectionner jusqu cinq options simultanment. La gure 9-15 prsente un exemple pour lequel les options underline (soulign), overline (ligne suprieure) et line-through (barr) ont t coches. Loption blink (Clignotant) afche et masque le texte intervalles rguliers (ne fonctionne pas sous IE6). Correspond la proprit text-decoration.
Figure 9-15
Exemple de dcorations ajoutes au texte
Font-weight Spcie la graisse de la police. La valeur 400 correspond une graisse normale ; 700 quivaut gras. La valeur bolder (plus gras) assigne une graisse plus forte que celle hrite par la police. Quant la valeur lighter (plus n), elle assigne une graisse plus faible que celle hrite par la police. Correspond la proprit fontweight. Font-variant Transforme le texte en petites capitales. Loption normal napplique aucune transformation Small-cap (petite-maj), transforme les lettres. Correspond la proprit font-variant. Text-transform Permet de passer le texte en majuscules ou en minuscules. Cette proprit possde quatre options : capitalize (mettre en majuscules) transforme la premire lettre de chaque mot en majuscule ; uppercase (majuscules) transforme toutes les lettres en majuscules ; lowercase (minuscules) transforme toutes les lettres en minuscules ; none (aucune) napplique aucun effet. Correspond la proprit font-transform. Color Permet dappliquer une couleur au texte. Slectionnez-la dans la palette de couleurs ou saisissez manuellement son code hexadcimal. Correspond la proprit color.
La catgorie Arrire-plan
Les rgles de CSS de la catgorie Arrire-plan sont prsentes en gure 9-16. Elles permettent de spcier un arrire-plan pour les diffrents blocs composant la page. Si vous appliquez ces rgles la balise <body>, toute la page sera affecte. Les rgles apposes
217
ici <body> sont identiques celles que lon spcie depuis les proprits de la page. Bien entendu, vous pourrez appliquer les rgles de la catgorie Arrire-plan dautres lments que <body>, par exemple, <h1>, <p> ou <div>.
Figure 9-16
La catgorie Arrire-plan des rgles de CSS
Background-color Permet de slectionner une couleur darrire-plan. Vous pouvez la saisir manuellement ou la choisir via la palette de couleurs. Correspond la proprit background-color. Background-image Permet de spcier une image darrire-plan. Cliquez sur le bouton Parcourir pour slectionner une image sur votre ordinateur ou saisissez son nom manuellement. Correspond la proprit background-image. Background-repeat Permet de spcier le mode dafchage de limage darrireplan lorsque ses dimensions sont infrieures celles de llment. Cette proprit possde quatre options (reportez-vous au chapitre 2 pour plus dinformations) : no-repeat (pas de rptition) afche limage une seule fois ; repeat (rpter) afche plusieurs fois limage de manire combler toute la page ; repeat-x (rpter-x) afche limage plusieurs fois horizontalement ; repeat-y (rpter-y) afche limage plusieurs fois verticalement. Correspond la proprit background-repeat. Background-attachement Cette proprit possde deux options : xed (xe) et scroll (dler). Lorsquune image est place en arrire-plan dune page dpassant la hauteur
218
de la fentre du navigateur, le dlement laide de lascenseur fait galement bouger limage (option scroll). Loption xed permet de conserver limage dans sa position et seuls les lments de la page dlent. Correspond la proprit backgroundattachment. Background-position (x) Spcie la position horizontale de limage darrire-plan : left (gauche), center (centre) ou right (droite). Il est aussi possible de spcier une valeur de position par rapport au bord gauche de llment dans lune des units proposes. Correspond la proprit background-position. Background-position (y) Spcie la position verticale de limage darrire-plan : top (haut), center (centrer) ou bottom (bas). Il est aussi possible de spcier une valeur de position par rapport au bord haut de llment dans lune des units proposes. Correspond galement la proprit background-position.
La catgorie Bloc
Les rgles de CSS de la catgorie Bloc sont prsentes en gure 9-17. Elles permettent de spcier le comportement des textes et des lments placs dans le bloc.
Figure 9-17
La catgorie Bloc des rgles de CSS
Word-spacing Permet de spcier une valeur dans lune des units proposes pour espacer les mots du bloc pour lequel cette proprit est dnie. Une valeur ngative rapproche les mots. Correspond la proprit word-spacing.
219
Letter-spacing Permet de spcier une valeur dans lune des units proposes pour espacer les lettres des mots du bloc pour lequel cette proprit est dnie. Une valeur ngative rapproche les lettres. Correspond la proprit letter-spacing. Vertical-align Cette proprit est applicable aux lments en ligne (inline) et aux cellules de tableau. Elle permet de grer lalignement vertical de llment par rapport aux lments adjacents. Seules les options sub (indice) et super (super) safchent dans Internet Explorer 6.0, IE 7.0 et Firefox 2. La gure 9-18, prsente les diffrentes proprits sous Firefox 3.04. Correspond la proprit vertical-align. Cette proprit ne peut pas tre utilise pour centrer verticalement un lment dans un bloc.
Figure 9-18
Alignement vertical des lments inline
Text-align Permet de spcier lalignement des textes placs dans un lment de type bloc. Quatre valeurs sont proposes : left (gauche) aligne le contenu sur la gauche de llment bloc ; right (droite) aligne le contenu sur la droite de llment bloc ; center (centrer) centre le contenu dans le bloc ; justify (justier) justie le contenu dans le bloc. Normalement, cette proprit ne sapplique pas aux blocs imbriqus, mais IE 6 laccepte (contrairement Firefox). Correspond la proprit text-align. Text-indent Le retrait du texte reprsente une valeur de dcalage de la premire ligne dun texte long. Cette valeur est gnralement positive et dcale la ligne vers la droite. Une valeur ngative dcale la ligne vers la gauche. Le texte de la gure 9-19 est justi
220
et sa premire ligne est dcale de 30 pixels droite. Correspond la proprit textindent.
Figure 9-19
Exemple dindentation de texte
White-space Permet de grer lafchage des espaces blancs multiples. Trois options sont disponibles : normal supprime les ventuels espaces blancs pour nen garder quun seul ; pre conserve tous les espaces blancs insrs dans le texte ; nowrap (pas de retour) interdit tout retour la ligne automatique. Seuls les retours engendrs par la balise <br/> sont pris en compte. Correspond la proprit white-space. Display Permet de grer le mode dafchage du bloc. Loption None (aucune) dsactive lafchage de llment laissant la place libre llment suivant dans le ux de la page. Loption block (bloc) transforme le comportement de llment en lment de bloc (possibilit dattribuer une taille, retour la ligne de llment suivant). Quant loption inline (en ligne), elle transforme le comportement de llment en lment en ligne. Ces lments safchent sur une mme ligne. Correspond la proprit display.
La catgorie Bote
Les rgles de CSS de la catgorie Bote sont prsentes la gure 9-20. Elles permettent de spcier les dimensions et les marges dun bloc mais galement de dnir la mthode de placement de llment par rapport aux autres dans lespace de la page. Width (Largeur) Permet de spcier une valeur dans lune des units proposes pour la largeur de la bote. Correspond la proprit width. Height (Hauteur) Permet de spcier une valeur dans lune des units proposes pour la hauteur de la bote. Correspond la proprit height. Float (Flottante) Permet de prciser le comportement des lments adjacents. Cette proprit possde trois valeurs : left (gauche), le contenu des lments placs, dans le ux de la page, aprs llment portant cette proprit, se place autour de lui, sur sa droite ; right (droite), le contenu des lments placs, dans le ux de la page, aprs llment portant cette proprit, se place autour de lui, sur sa gauche ;
221
Figure 9-20
La catgorie Bote des rgles de CSS
none (aucune), revient ne rien spcier (voir le chapitre 10 consacr aux positionnements des blocs). Correspond la proprit float. Clear (Effacer) Permet dindiquer quels cts dune ou des botes dun lment ne doivent pas tre adjacents une bote ottante prcdente. Cette proprit annule le ottement de llment. Correspond la proprit clear. Padding (Remplissage) Permet de dnir une marge intrieure au bloc qui peut tre de mme taille sur les quatre cts du bloc si loption Idem pour tous est coche. Dcochez cette option pour saisir des valeurs diffrentes pour chacun des cts. La gure 9-21 prsente un texte insr dans un lment <p> dont le remplissage est de 50 px. Correspond la proprit padding.
Figure 9-21
Exemple dutilisation de la proprit Remplissage
222
Margin (Marge) Permet de dnir une marge extrieure au bloc qui peut tre de mme taille sur les quatre cts du bloc si loption Idem pour tous est coche. Dcochez cette option pour saisir des valeurs diffrentes pour chacun des cts. La gure 9-22 prsente un texte insr dans un lment <p> dont la marge est dnie 50 pixels. Cette dernire est toujours transparente. Correspond la proprit margin.
Figure 9-22
Exemple dutilisation de la proprit Marge
La catgorie Bordure
Les rgles de CSS de la catgorie Bordure sont prsentes en gure 9-23. Elles permettent de spcier les bordures dun lment.
Figure 9-23
La catgorie Bordure des rgles de CSS
223
Style Les feuilles de style proposent huit styles de bordure en plus du style Aucune. La gure 9-24 prsente les diffrentes bordures disponibles. Correspond la proprit border-style.
Figure 9-24
Les diffrentes bordures disponibles
Width (Largeur) Permet de spcier lpaisseur de la bordure. Saisissez une valeur dans les champs Top (Haut), Right (Droite), Bottom (Bas) et Left (Gauche) pour spcier la largeur de la bordure pour ces cts (loption Idem pour tous doit tre dcoche pour cela). Correspond la proprit border-width. Color (Couleur) Permet de choisir la couleur de la bordure pour chacun des cts. Correspond la proprit border-color.
La catgorie Liste
Les rgles de CSS de la catgorie Liste sont prsentes la gure 9-25. Elles permettent de spcier les styles des listes et des lments quelles contiennent.
Figure 9-25
La catgorie Liste des rgles de CSS
224
List-style-type Permet de spcier laspect de la puce prcdant chaque item dune liste. La puce est indpendante du type de liste cre, aussi vous pourrez choisir dafcher un chiffre pour une liste ordonne ou un cercle, par exemple, pour une liste non-ordonne. Cette proprit possde neuf valeurs, prsentes en gure 9-26 (il en existe dautres, mais elles ne sont pas proposes dans Dreamweaver) : disque afche une puce ronde ; cercle afche une puce ronde vide ; carr afche une puce carre ; dcimal afche des chiffres ; romain minusc. afche des chiffres romains en minuscules ; romain majusc. afche des chiffres romains en majuscules ; alpha minusc. afche des lettres minuscules ; alpha majusc. afche des lettres majuscules ; aucune nafche aucune puce. Correspond la proprit list-style-type.
Figure 9-26
Les diffrents type de puce des listes
List-style-image Permet dinsrer une image en guise de puce. Saisissez le nom de limage manuellement ou cliquez sur le bouton Browse (Parcourir) pour slectionner une image sur votre ordinateur. Correspond la proprit list-style-image. List-style-Position Permet de dterminer la position de la bote des items par rapport la bote principale, laquelle est gnre par les balises <ul> ou <ol>. La bote des items est gnre par la balise <li>. Deux options sont possibles : inside (intrieure), les puces des items sont places laplomb de la bote principale ; outside (extrieure), les puces des items sont dcales sur la gauche de la bote principale. La gure 9-27 prsente les deux styles de positionnement. Correspond la proprit list-style-position.
225
Figure 9-27
Exemples de positionnement des puces dune liste
La catgorie Positionnement
Les rgles de CSS de la catgorie Positionnement sont prsentes en gure 9-28. Elles permettent de prciser la position dun bloc par rapport son type de positionnement.
Figure 9-28
La catgorie Positionnement des rgles de CSS
Position Permet de choisir le type de positionnement du bloc. Quatre options sont proposes : absolute (absolu) La bote cre pour llment napparat pas dans le ux normal du document et sa position dans celui-ci na plus dimportance. Il est alors ncessaire de prciser sa position et utilisant les proprits Top (Haut), Right (Droite), Bottom
226
(Bas) et Left (Gauche) de la zone Emplacement. Dans un positionnement absolu, llment se positionne par rapport son lment parent si celui-ci est lui-mme positionn. Chaque bloc positionn de manire absolue devient son tour le conteneur de ses lments enfants. xed (xe) Ce type de positionnement est similaire au positionnement absolu la diffrence que llment de rfrence pour le positionnement nest plus llment parent mais la fentre du navigateur. Par consquent, si deux divisions ont t cres, lune xe et lautre absolue, et que lon fait dler la page au moyen dascenseurs, llment absolu passe sous llment xe. On ralise ainsi un pseudo jeu de cadres. La position xe nest pas supporte par les versions dInternet Explorer antrieures la version 7. relative (relatif) Les lments sont positionns en fonction de la place quils devraient occuper dans le ux normal de la page. Si aucune valeur demplacement nest spcie, llment reste sa place, sinon il se dcale de la valeur indique dans les champs Top (Haut), Right (Droite), Bottom (Bas) et Left (Gauche). static (statique) Cest le positionnement par dfaut. Llment est tout simplement plac par rapport au ux du document. Correspond la proprit position. Width Permet de spcier une valeur dans lune des units proposes pour la largeur de la bote. Cette proprit est la mme que celle de la catgorie Bote et correspond la proprit width. Height Permet de spcier une valeur dans lune des units proposes pour la hauteur de la bote. Cette proprit est la mme que celle de la catgorie Bote et correspond la proprit height. Z-index Permet de spcier une valeur pour dterminer le niveau dempilement de la bote : la valeur 0 correspond la page ; une valeur positive place le bloc au-dessus ; une valeur ngative place le bloc en arrire-plan. Le choix de valeurs ngatives peut entraner une disparition du bloc dans certains navigateurs (Firefox, par exemple). Correspond la proprit z-index. Visibility Permet de rendre le bloc visible ou invisible. Cette proprit laisse un espace vide lorsque llment est dclar invisible. Trois options sont disponibles : inherit (hriter) hrite de la proprit de llment parent ; visible (visible) rend llment visible ; hidden (masquer) masque llment. Si vous utilisez cette proprit, vous devrez faire des tests de compatibilit entre les navigateurs. Firefox et IE nont pas le mme comportement avec les lments en ligne (inline). Correspond la proprit visibility.
227
Owerow Permet de grer le comportement des textes longs (paragraphes) placs dans un bloc. Le dbordement spcie si le bloc doit ajouter un ascenseur, masquer le texte qui dpasse du bloc ou encore sil doit le faire dborder. La gure 9-29 prsente les trois possibilits de prsentation. Cette proprit possde quatre options : visible (visible), le texte dborde du conteneur ; hidden (masquer), le texte supplmentaire est masqu ; scroll (dler), un ascenseur est toujours prsent, mme lorsque le texte ne remplit pas lensemble du conteneur ; auto, lascenseur apparat si ncessaire. Correspond la proprit overflow.
Figure 9-29
Les diffrents aspects de la proprit Owerow
Placement Permet de prciser la position du bloc. La dnition de lemplacement est souvent indispensable lorsque le bloc est positionn en absolu. En gnral, on dnit alors uniquement les positions Haut et Gauche. Correspond aux proprits top, right, bottom et left. Clip Permet de masquer une partie du contenu du bloc. Saisissez les valeurs souhaites dans les champs Haut, Droite, Bas et Gauche. Le masque forme un rectangle. La valeur du champ Haut correspond au dbut du masque sur le haut du bloc. La valeur du champ Droit correspond au dbut du masque droite et est calcule par rapport au bord gauche du bloc. La valeur du champ Bas correspond au dbut du masque en bas et est calcule partir du haut du bloc. La valeur du champ Gauche correspond au dbut du masque gauche du bloc. La proprit Clip, nest pas supporte par Internet Explorer.
La catgorie Extensions
Les rgles de CSS de la catgorie Extensions sont prsentes la gure 9-30. Elles permettent de grer les sauts de page lors de limpression, ainsi que lutilisation de ltres deffets. Page-break-before Cette proprit sapplique uniquement aux lments de type bloc. Elle permet dinsrer un saut de page avant llment lors de limpression. Correspond la proprit page-break-before.
228
Figure 9-30
La catgorie Extensions des rgles de CSS
Page-break-after Cette proprit sapplique uniquement aux lments de type bloc. Elle permet dinsrer un saut de page aprs llment lors de limpression. Correspond la proprit page-break-after. noter que vous ne pouvez pas slectionner ces deux options simultanment. Cursor Permet de changer laspect du curseur de la souris. Choisissez un type de curseur dans la liste propose. Correspond la proprit cursor. Filter Cette proprit nest pas prise en compte par beaucoup de navigateurs. Elle permet dappliquer un ltre une image. Choisissez lun des ltres, puis remplacez les points dinterrogation par des valeurs comprises entre 0 et 100. Correspond la proprit filter.
Vrier les styles

Longlet Compatibilit avec les navigateurs du panneau Rsultats permet de tester la page courante ou le site entier an de dceler les ventuelles incompatibilits ou manques de compatibilit avec certains navigateurs. On ouvre cet onglet en choisissant le menu Fentre>Rsultats>Compatibilit avec les navigateurs. Pour tester efcacement une page, vous devrez tout dabord choisir les navigateurs cibles dans lesquels le test seffectuera. Pour cela, cliquez sur le menu local situ en haut droite du panneau Rsultats et slectionnez Paramtres Vous pouvez galement cliquer sur la che verte situe gauche du panneau Rsultats. La bote de dialogue de la gure 9-31 souvre alors. Indiquez la version de chacun des navigateurs qui vous servira de cible pour la vrication des styles et cliquez sur OK pour valider vos choix.
229
Figure 9-31
La bote de dialogue Navigateurs cibles
Pour vrier la compatibilit de vos styles, cliquez sur la che verte du panneau Rsultats, et choisissez Vrication de compatibilit avec les navigateurs (voir gure 9-32).
Figure 09-32
Le menu local du panneau Rsultats
Aprs vrication, un rsum des rsultats est afch dans la fentre. Cliquez sur lun des problmes pour en afcher une description (voir gure 9-33).
Figure 9-33
Afchage des rsultats dune vrication
230
Les problmes dcels safchent, prcds dune icne : un triangle signale un avertissement. Le code nest pas pris en charge mais ne posera, en principe, pas de problme dafchage ; un cercle avec un point dexclamation signale une erreur pouvant causer des problmes dafchage ; un cercle divis en quatre quartiers signale un problme ou un bogue identi, visible au niveau de lafchage. Pour enregistrer les rsultats de votre vrication, cliquez sur licne Enregistrer les rsultats, symbolise par une disquette. Si de nombreux bogues se produisent, cliquez sur licne Plus dinfos pour accder au site Adobe France CSS Advisor an de consulter la liste des bogues rpertoris et les solutions proposes. Cliquez sur licne Ouvrir les rsultats dans le navigateur, symbolise par une mappemonde, pour afcher un rapport dtaill des rsultats.
Vrier les styles avec le W3C

Vous pouvez galement vrier en ligne vos feuilles de style externes et internes grce un outil dvelopp par le W3C, disponible ladresse suivante : http://jigsaw.w3.org/ css-validator/. Vous pourrez vrier vos documents de trois manires diffrentes : en soumettant lURL dune page ou dun site mis en ligne. Dans ce cas, les styles internes et externes sont pris en compte ; en tlchargeant une page depuis votre ordinateur. Dans ce cas, vous devez uniquement tlcharger la feuille de style externe ; en copiant-collant votre code dans le champ de saisie prvu cet effet. Dans ce cas, vous devrez uniquement copier ce qui se trouve lintrieur de llment <style> </style> (sans les deux balises) si les styles sont placs dans une page XHTML, sinon copiez simplement tous les styles inclus dans la feuille de style externe. Cliquez ensuite sur le bouton Vrier. Le rsultat est pratiquement immdiat.
Attribuer un style
Les styles se dnissent dans une feuille de style externe ou dans llment <style> </style> de la page. Chacun des styles est dni par un slecteur de balise, de classe dID ou tout autre type de slecteur. Pour appliquer un style, il faut que llment y soit reli. Le lien se cre par lintermdiaire des slecteurs. Les styles attribus aux balises nont pas besoin dtre relis car ils affectent de fait la balise considre. En revanche, les classes et les identiants doivent tre relis aux lments de la page. Ces trois slecteurs
231
de base (ID, classe et balise) peuvent se combiner entre eux. Vous pourrez ainsi cibler une balise place dans un lment portant un identiant prcis, comme, par exemple, cibler une balise <li> place dans un bloc <div> portant lidentiant menuVertical. Cela donnerait le slecteur suivant : #menuVertical li.
Attribuer un ID
En mode Code, lID est un attribut qui se place aprs le nom de la balise. Sa valeur doit toujours tre crite entre guillemets. Lexemple suivant correspond un lment dot dun attribut ID.
<p id="texteEncadre">texte crit dans un paragraphe</p>
Attribuer un ID partir dun style didentiant dj existant
Dans Dreamweaver, lattribution dun style cr avec un slecteur didentiant peut se raliser de deux manires : criture de lattribut ID dans la balise de llment ou cration dune zone contenant lattribut ID. Ces deux concepts sont diffrents. Dans le premier cas, lattribut est saisi dans une balise existante, alors que dans le second, vous ajoutez une balise dans le code. Cette dernire est gnralement la balise <span> qui est neutre. Quelle que soit la mthode choisie, vous devrez au pralable crer le style du slecteur dID.
Attribuer un ID une balise dj prsente dans la page
Le nom didentiant dun lment peut gnralement tre donn dans la palette de Proprits de cet lment, dans la zone ID. Dautres mthodes existent, notamment depuis la fentre Inspecteur de balises. Pour un bloc <div>, vous pourrez, par exemple, attribuer son nom didentiant dans la fentre Insrer la balise div, depuis le panneau Proprits ou encore depuis la fentre Inspecteur de balises, sous longlet Attributs. Voici la mthode courante dans Dreamweaver CS4 pour dnir un nom didentiant un lment plac dans la page. 1. Dans la page, en mode Cration, cliquez sur llment. 2. Cliquez sur la balise depuis le slecteur de balise.
Figure 9-34
Le slecteur de balise et llment slectionn
232
3. Donnez un nom llment dans la zone ID de la palette des proprits afche en mode HTML. Validez en appuyant sur la touche entre du clavier. Lattribut id est automatiquement ajout la balise slectionne.
Figure 9-35
La zone ID de la palette des proprits
Rappel Lattribut ID dnit une zone de la page qui est unique. Vous ne devez jamais crer deux zones portant le mme ID.
Attribuer une classe

Pour lattribution dune classe, deux cas peuvent se prsenter : vous souhaitez attribuer une classe une partie dun lment, un paragraphe par exemple, ou alors vous souhaitez attribuer la classe tout llment. Dans les deux cas, il est prfrable de crer le slecteur de classe au pralable. Pour attribuer une classe tout llment, il suft de cliquer dans llment sans rien slectionner ou de slectionner tout llment. Pour attribuer une classe une slection particulire, celle-ci doit tre slectionne. Voici les diffrentes mthodes permettant dattribuer une classe : En mode Cration, cliquez droit sur la zone slectionne (Ctrl + clic sur Mac), slectionnez Styles CSS dans le menu local et choisissez le nom de la classe appliquer. Depuis le panneau Proprits, choisissez le nom de la classe dans la liste droulante Style, suivant le type de balise slectionne.
233
Ouvrez la fentre Styles CSS et cliquez sur le bouton Tous. Cliquez droit sur le style souhait et choisissez Appliquer dans le menu local. Cliquez droit (Ctrl + clic sur Mac) sur la balise de llment dans le slecteur de balise du document, slectionnez Dnir la classe et choisissez le nom de la classe attribuer. Slectionnez le menu Texte>Styles CSS, puis choisissez le style appliquer.
Attribuer une classe ou un ID un lment de la page avec linspecteur de balises

Pour les balises <div>, lattribution de lidentiant ou dune classe peut se raliser depuis la fentre Insrer la balise div, depuis le panneau Proprits ou encore depuis la fentre Inspecteur de balises, sous longlet Attributs, ce que nous allons voir ci-aprs. Pour les balises de texte comme <h1> ou <p>, lattribution dune classe ou dun identiant peut aussi se raliser depuis la fentre Proprits de balises. La fentre Inspecteur de balises, qui souvre depuis le menu Fentre, permet dattribuer de nombreux attributs une balise et notamment lattribut de classe. Dans cette fentre, cliquez sur longlet Attributs, puis ouvrez la catgorie CSS/Accessibilit, crivez alors le nom de la classe ou de lidentiant dans les zones portant le nom de ces attributs.
Figure 9-36
Attribution dun identiant ou dune classe depuis la fentre Inspecteur de balises
Attribuer un ID ou une classe depuis la fentre Editeur de balises
1. En mode Cration, cliquez dans llment transformer. 2. Slectionnez la balise de llment dans le slecteur de balise.
234
3. Slectionnez le menu Modier>Modier la balise La fentre Editeur de balises souvre alors, cliquez sur la catgorie Feuille de style/Accessibilit du cadre de gauche.
Figure 9-37
La fentre Editeur de balises
4. Dans le champ ID, donnez un nom didentiant cette balise, puis, dans le champ Classe, donnez le nom dune classe. Cliquez sur OK pour valider. Llment possde prsent un identiant, ou une classe, grce auquel il sera trs simple dattribuer un style CSS en cliquant sur le bouton Nouvelle rgle de style depuis la fentre Styles CSS.
Conclusion
Dreamweaver est un outil remarquable pour raliser les feuilles de style internes ou externes aux pages de votre site. Il vous vitera davoir retenir toutes les proprits de styles. Nanmoins, il reste indispensable de savoir prcisment ce quil est possible deffectuer, Dreamweaver ne vous aidant pas pour la conception, mais bien pour la ralisation. Vous devrez, en effet, connatre parfaitement les principaux slecteurs et la concordance des noms des proprits proposes dans Dreamweaver avec ceux des rgles de styles, le rsultat et le comportement des diffrentes proprits.
10
Le positionnement avec les CSS
Lun des aspects les plus spectaculaires et aussi les plus difciles dans la mise en forme avec les styles CSS est le positionnement des lments. En effet, partir dun mme document XHTML, les diffrents positionnements permettront des mises en pages trs varies. Ce chapitre prsente les mthodes permettant de positionner des lments : le ux ; le positionnement relatif ; le positionnement absolu ; le positionnement xe ; le ottement ; les lments PA ; les balises div ; les assistances visuelles.
Le ux
Le langage XHTML est structur par un certain nombre de balises. Celles de type bloc permettent de structurer la page et celles dites en ligne dajouter certaines informations de mise en forme dans la ligne.
236
Les principaux lments permettant de crer des botes de type bloc sont : llment div ; les titres h1, h2, h3, h4, h5 et h6; le paragraphe p ; les listes et lments de liste ul, ol, li, dl et dd ; le bloc de citation blockquote ; le texte prformat pre ; ladresse address. Tous ces lments structurent la page et se positionnent par dfaut les uns en dessous des autres, avec ou sans espacement. Les lments en ligne sont dautres lments qui mettent en valeur une portion de texte. Par exemple, la balise <strong>, ou la balise <span>, qui permet dappliquer localement des styles divers. Les lments en ligne modient une partie dun lment et restent sur la mme ligne. Les balises <a> et <img> sont des balises en ligne. Une page XHTML afche dans un navigateur prsente les lments dans leur ordre dapparition dans le code. Dans lexemple prsent ci-aprs, le navigateur afchera le titre Les eurs des montagnes , puis, la ligne, le sous-titre Les orchides , puis, encore la ligne, limage, et enn le paragraphe en dernire ligne (voir gure 10-1). Les lments se positionnent les uns au-dessous des autres car ce sont des lments de type bloc. Llment <em></em>, entourant le mot Orchidaceae na engendr aucun retour car il est de type en ligne.
<body> <h1>Les fleurs des montagnes</h1><h2>Les orchides</h2> <div id="contenu"> <img id="i1" src="orchidees-1jpg.jpg" alt="orchidees" width="150" height="150"/> <p>La famille des <em>Orchidaceae</em> compte plus de 30000espces botaniques... </p> </div> </body>
Lorganisation des lments, telle que dcrite ci-dessus, se nomme le ux. Dans un ux normal, les botes appartiennent un contexte de mise en forme, bloc ou en ligne, mais pas aux deux en mme temps. Lexemple prsent ne possde aucune mise en forme, mais il serait trs facile damliorer cette prsentation en utilisant des styles CSS. Cest ce stade que le couple XHTML/ CSS devient trs performant. Pour amliorer cette mise en page, on pourra modier les proprits graphiques de chacun des lments et les changer demplacement en utilisant les diffrents positionnements disponibles qui sont rpartis en quatre modes : relatif, absolu, ottant ou xe. Il existe un cinquime mode, dit statique ; il sagit du mode par dfaut.
Le positionnement avec les CSS CHAPITRE 10
237
Figure 10-1
Les lments en ux normal
Le positionnement relatif
Dans le positionnement relatif, llment est dcal par rapport sa position dans le ux normal. Les lments qui le suivent restent leur position dorigine, ce qui peut engendrer des zones vides car lespace laiss par llment en position relative nest pas combl. La gure 10-2 prsente lexemple prcdent dans lequel limage, place en position relative, a t dcale de 350 pixels sur la droite et de 90 pixels vers le haut. La zone prcdemment occupe par limage, est reste vide. Les titres et le paragraphe nont pas t dplacs.
Figure 10-2
Exemple de positionnement relatif
238
Dans le cas prsent, le positionnement relatif a permis de dplacer limage, mais, le dplacement tant assez important, la place laisse libre namliore pas la mise en page. Dans de nombreux cas, le positionnement relatif sera utilis pour faire bouger lgrement llment. Il sera galement employ pour sa capacit devenir facilement un bloc conteneur, sans modier la structure de la page. La mise en uvre XHTML du positionnement relatif se ralise grce la proprit position laquelle on donne la valeur relative. Les lments positionns de manire relative doivent avoir une largeur, une hauteur, une position haute ou basse, et droite ou gauche par rapport la place quils auraient d occuper en ux normal. Le code XHTML de lexemple prcdent est prsent ci-aprs.
img#i1 { position: relative; height: 150px; width: 150px; top: -90px; left: 400px; }
La position top est ngative car limage doit remonter par rapport sa position initiale.
Le positionnement relatif dans Dreamweaver

Dans Dreamweaver, comme pendant la conception de page directement dans le code, vous devez placer les lments comme sils devaient conserver leurs places initiales, sans positionnement. 1. En mode Cration, cliquez sur llment pour lequel vous souhaitez crer une rgle de style. Dans le cas prsent, il sagit de limage. Depuis la palette des proprits de cette image, crivez un nom dans la zone ID (nous avons crit : i1) 2. Depuis le panneau Styles CSS, crez une nouvelle rgle de CSS en cliquant sur licne du mme nom. 3. Dreamweaver CS4 vous propose de crer une rgle pour llment slectionn, dans le cas prsent : le slecteur #contenu #il. 4. Cliquez sur OK pour valider. La fentre Dnition des rgles de CSS souvre alors. Cliquez sur la catgorie Positionnement. 5. Dans la liste droulante Position, choisissez relative. 6. Indiquez ensuite la Largeur (Width) et la Hauteur (Height) de llment dans lunit de mesure choisie. 7. Paramtrez ensuite le dplacement de llment en renseignant les valeurs souhaites dans la zone placement. Il est fortement conseill de ne spcier quune seule valeur Haut (Top) ou Bas (Bottom) et une seule valeur Droite (Right) ou Gauche (Left). En effet, si vous indiquez une valeur Haut et une valeur Bas, vous pourrez rencontrer des contradictions de position.
239
Figure 10-03
Paramtrage dun positionnement relatif dans Dreamweaver
Le positionnement absolu
En position absolue, un lment sort totalement du ux du code XHTML. Il est totalement indpendant et les autres blocs lignorent. Ainsi, les lments placs dans le ux occupent la place des lments positionns en absolu. Contrairement au positionnement relatif, aucun espace vide napparat. La gure10-4 prsente le code de la page prsente en dbut de chapitre dans lequel limage est prsent en position absolue. Elle est place 0 pixel du bord haut de la page et 400 pixels de son bord gauche. Llment <p> de paragraphe, qui suit limage dans le ux normal, a t dplac lendroit prcdemment occup par limage. Le positionnement ne tenant pas compte des lments adjacents, limage recouvre partiellement le paragraphe. La mise en uvre XHTML du positionnement absolu se ralise grce la proprit
position laquelle on attribue la valeur absolute. Les lments positionns de manire
absolue doivent avoir une largeur (Width), une hauteur (Height), une position haute (Top) ou basse (Bottom) et droite (Right) ou gauche (Left) par rapport au bloc conteneur. Le code XHTML de lexemple prcdent est prsent ci-aprs.
img#i1 { position: absolute; height: 150px; width: 150px; top: 0px; left: 400px; }
240
Figure 10-4
Exemple de positionnement absolu
Le bloc conteneur
Un lment positionn en absolu se place par rapport son lment parent positionn le plus proche. Autrement dit, la rfrence dun lment en position absolue est soit un autre lment en position absolue, soit un lment en position relative, soit un lment en position xe. Un lment est parent dun autre lorsquil contient cet lment. Le code XHTML cidessous vous aidera mieux comprendre cette notion.
<div id="apDiv1"> <div id="apDiv2"></div> </div>
Llment didentiant apDiv2 est ici un enfant de llment apDiv1, qui est le parent le plus proche de apDiv2. Dans le cas prsent, pour positionner correctement llment apDiv2 en absolu par rapport apDiv1, il faut que ce dernier soit positionn en absolu, en relatif ou en xe. La mthode frquemment utilise est le positionnement de apDiv1 en relatif, pour lequel aucune position nest alors indique. Cela ne change rien la mise en page, mais permet de positionner apDiv2 par rapport apDiv1. Llment <body> tant le premier lment dune page HTML, cest par rapport lui que sera positionn un lment qui na pas de parent. Dans lexemple prcdent, dans lequel limage est dplace en haut de la page, llment de limage <img> est positionn en absolu. Ses coordonnes Haut et Gauche ont pour origine le bord haut gauche de la page.
241
Le positionnement absolu dans Dreamweaver

Un lment en position absolue tant totalement en dehors du ux normal, il peut tre plac nimporte o dans le code, ce qui peut entraner une certaine confusion. Dans la pratique, le dveloppeur sattachera placer les lments positionns en absolu dans la suite logique de leur apparition. Dreamweaver propose un outil particulirement utile pour crer des lments en position absolue : loutil Tracer un div pour un lment PA, accessible depuis la catgorie Mise en forme du panneau Insertion (voir la section Les lments PA de ce chapitre, pour plus de dtails sur cet outil). Voici une mthode permettant de transformer un lment plac dans le ux normal en lment positionn de faon absolue. 1. En mode Cration, cliquez sur llment pour lequel vous souhaitez crer une rgle de style. Dans le cas prsent, il sagit de limage. 2. Depuis la fentre Styles CSS, crez une nouvelle rgle de CSS en cliquant sur licne du mme nom. 3. Dreamweaver CS4 vous propose de crer une rgle pour llment slectionn. Dans le cas prsent Dreamweawer nous propose le slecteur #contenu #il. 4. Cliquez sur OK pour valider. La fentre Dnition des rgles de CSS souvre alors. Cliquez sur la catgorie Positionnement. 5. Dans la liste droulante Position, choisissez absolu. 6. Indiquez ensuite la largeur (Width) et la hauteur (Height) de llment.
Figure 10-5
Paramtrage dun positionnement absolu dans Dreamweaver
242
7. Paramtrez la position de llment par rapport son bloc conteneur dans la zone Placement. L encore, il est fortement conseill de ne spcier quune seule valeur Haut ou Bas et une seule valeur Droite ou Gauche.
Le positionnement xe
Le positionnement xe est une variante du positionnement absolu. Un lment positionn de la sorte nest plus dans le ux et nest plus dpendant dun lment parent plac dans la page, mais de la fentre du navigateur. Ainsi, lorsque linternaute fait dler la page vers le bas ou vers le haut, llment en position xe reste sa place, toujours prsent lcran. Nous obtenons ainsi une mise en page similaire celle gnre par un jeu de cadres. Le positionnement xe nest pas support par les versions dInternet Explorer antrieures la version 7, aussi cette possibilit a t trs peu exploite jusqu prsent. Il est noter que le mode Cration de Dreamweaver donne galement une reprsentation errone de ce positionnement. La gure 10-6 prsente deux vues du navigateur avec une position diffrente des lments de la page. Limage, qui est en position xe, na pas boug.
Figure 10-6
Exemple de positionnement xe
La mise en uvre XHTML du positionnement xe se ralise grce la proprit position laquelle on attribue la valeur fixed. Les lments positionns de manire xe doivent
243
avoir une largeur, une hauteur, une position haute ou basse, et droite ou gauche par rapport au bloc conteneur. Le code XHTML de lexemple prcdent est prsent ci-dessous.
img#i1 { position: fixed; height: 150px; width: 150px; top: 0px; left: 400px; }
Le positionnement xe dans Dreamweaver

Comme pour les lments en position absolue, un lment en position xe peut tre plac nimporte o dans le code XHTML. La mthode pour transformer un lment plac dans le ux normal en lment position xe est identique celle prsente pour le positionnement absolu. La seule diffrence tant que vous devez choisir loption xe dans la liste droulante Position dans la catgorie Positionnement de la fentre Dnition des rgles de CSS.
Le ottement
Lorsquun lment est ottant, sa bote est sortie du ux normal de la page. Elle est dplace horizontalement sur la droite ou sur la gauche, suivant le ottement choisi. Son positionnement vertical est celui du haut de la ligne (dans le ux) qui contient llment ou le bas de la ligne qui le prcde. Le contenu des lments qui le suivent dans le ux, coulent autour de lui, pour remplir lespace laiss vacant. La gure 10-7 prsente une image dclare comme lment ottant droite. Limage est reste sur la ligne horizontale de son ux, mais a t dcale droite sur cette ligne. Les lments qui sont placs dans le ux sa suite lentourent et ont pris la place quelle occupait prcdemment. Un lment ottant nest pas positionn car aucune indication de position Haut ou Gauche nest ncessaire (mme si elles taient prcises, elles ne seraient pas prises en compte). Le ottement est trs utilis pour placer des lments de type bloc les uns ct des autres et non les uns en dessous des autres comme cest le cas normalement. Ces mises en forme permettront dobtenir des pages dites uides. Lusage des lments ottants est aussi trs courant pour la ralisation de menus. Une autre utilisation des ottants, sans doute la plus simple, est de faire couler le texte autour dune image lorsque celle-ci est ottante.
Le ottement dans Dreamweaver

Voici une mthode permettant de transformer un lment plac dans le ux normal en lment ottant.
244
Figure 10-7
Image en ottement droite
1. En mode Cration, cliquez sur llment pour lequel vous souhaitez crer une rgle de style. Dans le cas prsent, il sagit de limage. 2. Depuis la fentre Styles CSS, crez une nouvelle rgle de CSS en cliquant sur licne du mme nom. 3. Dreamweaver CS4 vous propose de crer une rgle pour llment slectionn. Dans le cas prsent Dreamweawer nous propose le slecteur #contenu #il. 4. Cliquez sur OK pour valider. La fentre Dnition des rgles de CSS souvre alors. Slectionnez la catgorie Bote. 5. Dans la liste droulante Float, choisissez droite (right) ou gauche (left). 6. Indiquez la largeur et la hauteur de llment.
Annuler le ottement
Lorsquun lment est ottant, tous les lments qui le suivent dans le ux se dplacent pour lentourer. Reprenons lexemple prcdent (voir gure 10-7). Nous souhaitons prsent que le tableau ne subisse pas les effets du ottement et quil se replace dans le ux de la page. Pour supprimer les effets du ottement sur le tableau, nous allons lui attribuer la proprit clear qui indique de quel ct cet lment ne doit pas tre adjacent la bote ottante, ici le ct droit. La proprit clear aura donc pour valeur right. Depuis la fentre Dnition des rgles de CSS, choisissez la catgorie Bote. La liste droulante Clear propose quatre options : right annule un ottement droite ; left annule un ottement gauche ;
245
both annule tous les ottements ; none revient ne pas spcier de proprit clear.
Figure 10-8
Paramtrage du ottement dans Dreamweaver
Figure 10-9
Le ottement est annul pour le tableau.
246
Pour annuler des lments ottants, on peut aussi utiliser un lment supplmentaire que lon place dans la page HTML, aprs les lments ottants. Cet lment peut tre une balise <hr />, une balise <br /> ou <div>. On attribue alors cet lment une classe contenant la proprit clear. Cette approche offre lavantage de toujours bien fonctionner, de ne pas attribuer la proprit un lment visible de la page et de permettre une utilisation autonome de la proprit clear.
Les lments PA
Les lments PA (Calques dans les prcdentes versions de Dreamweaver) sont des lments de la page placs en position absolue (PA). Ils constituent des blocs indpendants qui peuvent tre placs nimporte o dans la page en mode Cration et sont facilement dplaables. Les lments PA peuvent contenir des textes, des liens ou encore des images. Il nest pas recommand dy placer des animations Flash ou des tableaux car certains navigateurs supportent mal ces combinaisons. Dreamweaver propose un outil qui permet de dessiner directement sur la page des blocs div placs en position absolue. Lusage de cet outil peut constituer une bonne approche pour raliser des sites sans tableau. De par la nature de leur positionnement hors ux , ils gnrent beaucoup de rgles de styles, parfois peu utiles, aussi le concepteur expriment prfrera gnralement utiliser linsertion dlment div. Pour crer un bloc div pour un lment PA : 1. Cliquez dans la page en mode Cration. Si la fentre de travail nest pas en mode Cration, loutil napparatra pas. 2. Cliquez sur la catgorie Mise en forme du panneau Insertion, puis sur licne Tracer un div pour un lment PA.
Figure 10-10
Loutil Tracer un div pour un lment PA
3. Cliquez dans la page et, tout en maintenant le bouton de la souris enfonc, tracez un bloc rectangulaire.
247
4. Relchez le bouton de la souris, le curseur est automatiquement positionn lintrieur du rectangle dessin. Vous pouvez alors saisir un texte, insrer une image ou dautres lments. Pour dplacer le bloc, cliquez sur lun de ses bords et faites-le glisser lendroit souhait (voir gure 10-11).
Figure 10-11
Le dplacement dun lment PA
La fentre Elments PA
Ds quun lment PA est dessin, il apparat dans le panneau Elments PA (voir gure 10-12). Pour ouvrir ce panneau, slectionnez le menu Fentre>Elments PA.
Figure 10-12
La fentre Elments PA
La fentre Elments PA ne propose pas beaucoup doptions. Lil plac gauche du nom de llment correspond la proprit visibility et peut avoir trois aspects : il nest pas afch, dans ce cas, aucune proprit dafchage nest spcie ; il ouvert, pour afcher llment div ; il ferm, pour masquer llment div. Cette proprit correspond au champ Visib. du panneau Proprits des lments PA. Dans la fentre Elments PA, vous pourrez facilement modier le nom de llment qui correspond son identiant ID. Pour cela, double-cliquez sur le nom et renommez-le. Cette mthode est recommande car cette opration modie aussi le nom du style attribu llment. En utilisant cette mthode, vous serez assur de conserver le lien entre llment et sa rgle de style.
248
La case cocher Empcher les chevauchements vous permettra de dessiner des lments juxtaposs. Lusage de cette option est recommand si vous dessinez des lments PA en vue de les transformer en tableaux. La colonne Z permet, quant elle, de grer lordre dempilement des lments PA.
Les proprits des lments PA

Pour afcher les proprits dun lment PA, procdez selon lune des quatre mthodes suivantes : Cliquez dans llment pour lactiver, puis sur sa bordure extrieure ou sur la poigne blanche situe en haut gauche du bloc. Cliquez sur le marqueur ottant de llment, matrialis par une icne jaune place larrire-plan dans votre page. Si elle nest pas visible, slectionnez le menu Edition>Prfrences, slectionnez Elments invisibles dans la liste des catgories disponibles et cochez loption Points dancrage des lments PA. Lafchage de ces marqueurs permettra davoir un meilleur aperu des lments imbriqus.
Figure 10-13
Les points dancrage des lments PA
Cliquez dans llment, puis slectionnez la balise <div> correspondante dans le slecteur de balise. Dans la fentre Elments PA, cliquez sur le nom de llment que vous souhaitez slectionner. Quelle que soit la mthode choisie, cela aura pour effet dafcher le panneau Proprits de llment PA (voir gure 10-14). Les proprits proposes permettent de crer, ajouter ou modier le style de llment PA slectionn. Les rgles de styles de llment sont accessibles depuis la fentre Style CSS. Celles cres ici peuvent aussi ltre depuis la fentre Dnition des rgles de CSS (le chapitre 9 fournit davantage de prcisions sur les diffrentes proprits).
249
Figure 10-14
Le panneau Proprits dun lment PA
Champ Elment CSS-P Inscrivez dans ce champ le nom que vous voulez attribuer llment. Ce nom vous permettra par la suite didentier llment pour les styles ou dans les comportements et les scnarios. Il est identique celui indiqu dans la fentre Elments PA et correspond normalement un style. Ce champ reprsente lidentiant de llment PA. Champs G et S Ces champs permettent dindiquer la position gauche et haute de llment. Vous pouvez galement modier cette valeur de manire intuitive, en dplaant manuellement llment dans la scne. Champs L et H Ces champs permettent de spcier la largeur et la hauteur en pixels de llment par rapport ses bords gauche et haut. Vous pouvez galement modier cette valeur de manire intuitive, en dformant manuellement llment dans la scne. Pour cela, dplacez ses poignes dtirement. Champ Index Z Permet de grer la position dempilement de llment. Inscrivez un chiffre positif ou ngatif. Liste droulante Visib. Permet de renseigner la proprit visibility de llment (default, inherit, visible ou hidden). Cette proprit correspond lil de la fentre Elments PA ainsi qu loption Visibilit de la catgorie Positionnement de la fentre Dnition des rgles de CSS. Champ Image ar-pl Permet dattribuer une image darrire-plan llment. Pour cela, saisissez manuellement son nom ou cliquez sur licne Rechercher le chier pour la slectionner sur votre ordinateur. Limage sera alors afche en mosaque et rpte linni, selon ses dimensions et celles de llment. On peut modier cette rptition par la modication des proprits de styles attribu cet lment. Champ Couleur ar-pl Permet dattribuer une couleur darrire-plan llment. Pour cela, saisissez manuellement son code hexadcimal ou slectionnez-la grce la palette de couleurs. Liste droulante Dbord. Permet de grer les contenus importants placs dans llment. Cette proprit ajoute automatiquement (auto) un ascenseur pour afcher le contenu non visible de llment. Champs Dc. G, D, S et B Ces champs correspondent la proprit Clip de la catgorie Positionnement de la fentre Dnition des rgles de CSS. Cette proprit nest pas supporte par tous les navigateurs. Elle permet de recadrer llment en indiquant
250
des valeurs par rapport la position gauche, droite, par rapport au sommet et la position basse.
Figure 10-15
La proprit Dbord. Dun lment PA
Utiliser un lment PA pour une composition simple

Les lments PA permettent de crer facilement des mises en page simples nutilisant pas les tableaux. Une autre mthode (voir la section Les balises div dans ce chapitre) consiste insrer des balises <div> en mode Cration. Voici un exemple simple de ralisation obtenue avec les lments PA. Certaines manipulations sont traites dans les chapitres prcdents. Les images ont ici une taille de 150 pixels de ct, le bloc de texte une taille de 325 pixels de ct. Les lments sont spars de 25 pixels et sont tlchargeables depuis le site de lditeur au chapitre 10, Exercicecompositionsimple. 1. Ouvrez un nouveau document et slectionnez le menu Modier>Proprits de la page 2. Choisissez la catgorie Aspect et le noir comme couleur darrire-plan. Slectionnez la catgorie Trac de limage et indiquez le nom de limage JPEG de rfrence. Celle-ci vous permettra de conserver lcran une rfrence de votre mise en page. Rglez loption Transparence 30 %. Cliquez sur OK pour valider vos choix. 3. Rglez ensuite les assistants visuels des lments PA en slectionnant tout dabord le menu Prfrences>Elments invisibles, puis en cochant loption Points dancrage des lments PA. Afchez galement les contours des lments PA en slectionnant le menu Afchage>Assistances visuelles>Contour des lments PA. 4. Pour crer le premier lment PA, cliquez dans la page en mode Cration an de lactiver. Cliquez ensuite sur la catgorie Mise en forme du panneau Insertion, puis sur licne Tracer un div pour un lment PA. 5. Tracez ce premier lment de manire quil soit de la mme taille que le modle plac au-dessous. Cliquez ensuite sur lun de ses bords pour le slectionner et faire apparatre le panneau Proprits lui correspondant. Ajustez ventuellement la taille de llment.
251
6. Procdez de la mme manire pour crer les trois autres lments des images. Ajustez ventuellement leur position respective depuis le panneau Proprits. Les lments du haut sont placs 65 pixels, les lments du bas 240 pixels. 7. Crez enn llment qui recevra le texte, ayant pour taille 325 pixels de ct.
Figure 10-16
Exemple de ralisation obtenue grce aux lments PA
Figure 10-17
La composition des lments PA
252
8. Insrez ensuite les images. Pour cela, cliquez dans llment, puis sur licne Images de la catgorie Commun du panneau Insertion. Slectionnez sur votre ordinateur la premire image et renseignez le champ Texte secondaire de la bote de dialogue Attributs daccessibilit des balises dimage qui souvre alors.
Slection des lments PA et des images Il est difcile de slectionner un lment PA contenant une image. Pour rsoudre ce problme, slectionnez tout dabord limage en cliquant simplement dessus, puis cliquez sur la bordure de llment PA. Une image possde trois poignes, un lment PA en possde huit.
Figure 10-18
Insertion dune image dans un lment PA
9. Ouvrez ensuite le chier texte-latin.txt via le menu Fichier>Ouvrir. Le texte souvre dans un nouveau document. Copiez-le via le menu Edition>Copier et collezle dans llment PA (Edition>Coller). 10. Reprez au milieu du texte les mots Lorem Ipsum . Placez le curseur de la souris juste avant le L de Lorem . Appuyez sur la touche Entre pour insrer un retour la ligne et ainsi sparer le texte en deux parties. Si vous analysez le code gnr pour cette partie de texte, vous constatez que deux paragraphes ont t crs. Le texte ainsi crit est illisible sur un fond noir, nest pas justi et la partie suprieure prsente une marge. Pour modier ces paramtres, vous allez crer un style pour le texte. 11. Placez le curseur nimporte o dans le texte et cliquez sur licne Nouvelle rgle de CSS de la fentre Styles CSS. Dreamweaver propose automatiquement un slecteur Avanc dID parent-descendant et le nom de llment est suivi de la lettre p du paragraphe. Cliquez sur OK pour valider.
253
Figure 10-19
Le texte spar en deux paragraphes
12. Dans la fentre Dnition des rgles de CSS qui souvre alors, choisissez la catgorie Type, puis la police Times en corps 16 ainsi que la couleur blanc. Slectionnez ensuite la catgorie Bloc et justier pour loption Alignement du texte. Cliquez enn sur la catgorie Bote et rglez les marges 0. Aprs validation, le texte est correctement plac. 13. Ajoutez un titre selon les mmes principes : crez un lment PA dans lequel vous saisirez le texte Fleurs des Pyrnes . An de conserver une cohrence smantique, slectionnez-le et attribuez-lui le format En-tte 1 via le panneau Proprits. La taille du titre qui safche alors est trop grande mais vous allez pouvoir la rduire avec une rgle de style. Pour cela, cliquez dans le texte puis sur licne Nouvelle rgle de CSS de la fentre Styles CSS. Vous pouvez aussi utiliser la palette des Proprits et cliquez sur Modiez la rgle. Dreamweaver propose automatiquement un slecteur Avanc parent-descendant avec le nom de llment et la balise h1.
Figure 10-20
Dreamweaver propose automatiquement le slecteur parent-descendant
254
14. Dans la fentre Dnition des rgles de CSS qui souvre alors, choisissez la catgorie Type, puis la police (Font-family) Arial en corps 18 ainsi que la couleur blanc. Slectionnez ensuite la catgorie Bloc et un espacement des lettres (Letter-spacing) de 1 pixel. Cliquez enn sur la catgorie Bote et rglez les marges 0. 15. La mise en page est termine, vous pouvez la tester dans diffrents navigateurs. Limage darrire-plan qui nous a servi de modle peut tre conserve. Elle ne sera pas place sur le site Internet lors du transfert FTP. noter toutefois que vous devrez la supprimer si vous souhaitez valider votre page avec les outils du W3C. Pour cela, ouvrez les proprits de la page depuis le panneau Proprits, slectionnez la catgorie Trac de limage et supprimez limage.
Imbriquer des lments PA

Limbrication dlments PA permet de rendre un (ou plusieurs) lment(s) dpendant(s) dun autre. Nous obtenons ainsi une relation parent-enfant. Dans une telle relation, le dplacement de llment parent entrane le dplacement du ou des enfants. Pour la mme raison, un style attribu llment parent est automatiquement attribu aux enfants, par hritage, moins que les enfants ne possdent un style diffrent. Limbrication dlments PA est trs utilise, notamment pour crer des blocs de blocs, ce que nous pourrions raliser avec les quatre images de lexemple prcdent. Limbrication dlments est aussi lun des principes de base pour crer un bloc conteneur global qui pourra tre centr dans la fentre du navigateur. Nous allons voir dans cette section la mthode interne Dreamweaver pour imbriquer des lments PA. Pour cela, reprenons lexemple prcdent et crons un conteneur global qui contiendra tous les lments PA et qui permettra par la suite de centrer la ralisation. La gure 10-21 prsente la fentre Elments PA au dbut de la procdure.
Figure 10-21
La fentre Elments PA dorigine
1. En mode Cration, crez un lment PA englobant tous les autres. Notez quil nest pas ncessaire que llment englobe physiquement les autres lments. 2. Un nouvel lment apparat alors dans la fentre Elments PA, ici llment apDiv7 (voir gure 10-22). Dplacez les six lments prcdents en maintenant la touche Ctrl enfonce, puis dposez-les sur llment PA an de les imbriquer.
255
Figure 10-22
Exemple dimbrication des lments
Lorsquun lment est imbriqu, il est dcal par rapport aux autres. La gure 10-23 prsente les six lments imbriqus dans llment apDiv7.
Figure 10-23
Les six lments imbriqus
Transformer un lment en lment PA

De manire gnrale, tout lment plac en position absolue est un lment PA. Par exemple, un paragraphe ou une image peuvent tre des lments PA ds lors que leur positionnement est absolu. Voici une mthode pour transformer un lment quelconque en lment positionnement absolu. 1. Attribuez un identiant ID llment en utilisant la mthode prsente au chapitre 9. 2. Cliquez dans llment en mode Cration et crez une nouvelle rgle de style. 3. Depuis la fentre Dnition des rgles de CSS, choisissez la catgorie Positionnement et slectionnez absolu dans la liste droulante Type. Indiquez les valeurs souhaites pour les champs Largeur, Hauteur et Haut et Gauche de la zone Emplacement. Validez. 4. Llment safche dans la fentre Elments PA.
256
Transformer un lment PA
Un lment PA est un lment qui possde un attribut didentication ID et qui est positionn en absolu. La transformation dun lment PA implique une modication de son mode de positionnement. En thorie, il suft dditer le style de llment et de modier le mode de positionnement en relatif ou statique. Dun point de vue pratique, la mise en page se trouvera fortement perturbe. Vous devrez certainement modier aussi le positionnement des lments adjacents ou repositionner llment si le nouveau positionnement est relatif. La gure 10-24 prsente lexemple prcdent pour lequel le paragraphe est plac en position statique. Dans ce mode de positionnement, le paragraphe retourne dans le ux normal de la page. Comme les lments de cette page sont tous en position absolue, le paragraphe se retrouve en haut gauche. Dans le cas prsent, si lon souhaite conserver ce type de positionnement pour le paragraphe, il faut revoir les positionnements des autres lments. Cette mise en page pourra galement tre ralise en utilisant des positionnements ottants.
Figure 10-24
Modication du mode de positionnement
Grer le positionnement Index Z

Le positionnement Index Z reprsente lordre dempilement des lments sur la page. Cette proprit est utilisable avec les lments en positionnement absolu ou relatif. La gestion de lempilement se fait depuis le panneau Proprits ou depuis la fentre Elments PA, lorsque llment est en absolu. Pour changer lordre dempilement dun lment, modiez le chiffre correspondant cet lment dans la colonne Z de la fentre Elments PA ou dans le champ Index Z du panneau Proprits. Plus ce chiffre est grand, plus llment est devant. 0 correspond au plan de la page.
257
Dans la fentre Elments PA, vous pouvez aussi dplacer le nom de llment vers le haut ou vers le bas. Un lment plac en haut safche toujours devant les autres.
Les balises div

Linsertion de balises div en mode Cration constitue une autre solution pour raliser des mises en page sans tableaux. La conception de ce type de mises en page requiert, au pralable, un petit travail sur la maquette du futur document (organisation, taille et position des blocs). La ralisation du document dans Dreamweaver sera ainsi nettement simplie. La gure 10-25 prsente la maquette de la page que nous souhaitons raliser. Pour la ralisation dune telle mise en page, nous insrerons au moins cinq balises div et certaines seront imbriques dans dautres.
Figure 10-25
Maquette de la page
258
Insrer une balise div

Pour insrer une balise div, cliquez sur licne Insrer la balise div de la catgorie Commun du panneau Insertion.
Figure 10-26
Loutil dinsertion dune balise div
La bote de dialogue Insrer la balise div souvre alors. La liste droulante Insrer propose plusieurs choix pour positionner le bloc de la balise div dans la page (voir gure 10-27) : Au point dinsertion Place le bloc lendroit du curseur. Pour une page vide, il sagit du bord haut gauche de la page. Ce point dinsertion peut aussi se situer dans un bloc dj cr, on ralise alors une imbrication de bloc. Aprs le dbut de la balise Imbrique une balise div dans une balise existante. Linsertion se fait juste avant le dbut du contenu existant. Si vous slectionnez cette option, un second menu local apparatra sur la droite permettant de choisir la balise dj place dans la page et destine devenir la balise conteneur.
Figure 10-27
La bote de dialogue Insrer une balise div et le menu de choix de balise
259
Avant la n de la balise Imbrique une balise div dans une balise existante. Linsertion se fait juste avant la n du contenu existant. Le menu local de droite permet de choisir la balise conteneur. Avant la balise et Aprs la balise Ces options sont utiliser si une ou plusieurs balises sont dj places dans la page. Envelopper la slection Cette option est utiliser lorsque vous ralisez une slection, dune portion de texte par exemple. On obtient une balise div imbrique dans la prcdente. Linsertion dune balise saccompagne gnralement de lattribution dune classe ou dun ID. Dans les deux cas, aprs les avoir nomms, cliquez sur licne Nouvelle rgle de CSS pour renseigner les paramtres de la balise nouvellement cre tels que sa taille, sa couleur de fond, ventuellement son type de positionnement et sa position. Cette mthode dinsertion de balises div peut considrablement augmenter le rendement de vos productions tout en gardant une parfaite matrise du code.
Exercice pratique de cration de div
Pour mettre en pratique linsertion de balises div, voici un petit exercice pas pas qui ralisera la page dont la maquette est prsente la gure 10-25. La gure 10-28 correspond au rsultat nal.
Figure 10-28
Mise en page nale
260
1. Pour commencer, tlchargez les lments source depuis le site de lditeur, au chapitre 10, ExercicepontEspagne. 2. Dans Dreamweaver, ouvrez un nouveau document et paramtrez les marges de la page 0. Enregistrez le document. 3. Cliquez dans la page en mode Cration. Le pointeur se place en haut et gauche de la page. ce point dinsertion, insrez une balise div en lui attribuant lID en-tete. Avant de valider cliquez sur le bouton Nouvelle rgle de CSS. 4. Dreamweaver vous propose de crer un slecteur didentiant dont le nom est #en-tete. Validez en cliquant sur OK. Dans la fentre Dnition des rgles de CSS, slectionnez la catgorie Bote et attribuez llment une taille de 700 pixels de largeur par 100 pixels de hauteur. Cliquez sur la catgorie Arrire-plan et choisissez limage darrire-plan nomme entete-pontespagne.jpg. Cliquez sur OK pour valider vos choix. Cliquez de nouveau sur OK dans la fentre Insrer la balise Div. Sur la page, supprimez la phrase Placez ici le contenu de id "en-tte" .
Figure 10-29
Ltape 1 de lexercice
5. Cliquez dans la partie vide de la page an de positionner le point dinsertion aprs llment dj plac. Insrez une nouvelle balise div au point dinsertion et nommezla contenu. 6. Crez une nouvelle rgle de CSS pour le slecteur #contenu. Attribuez-lui une taille de 700 pixels de largeur et 400 pixels de hauteur. Attribuez aussi un padding en haut (top) de 10 px. Cela permettra de dcoller le contenu de cette balise. Choisissez limage darrire-plan fond-rayures.gif. Validez. Sur la page, supprimez la phrase Placez ici le contenu de id "contenu" . 7. Vous allez maintenant crer la zone de pied de page. Pour cela, cliquez sur la partie vide de la page puis sur loutil de cration de balise div. Slectionnez loption Aprs la balise et dans le menu de droite, choisissez div id="contenu". De cette manire, vous serez certain que la balise div se placera aprs la balise de contenu. Nommez cette balise pied. 8. Crez une nouvelle rgle de CSS pour le slecteur #pied. Attribuez-lui une taille de 700 pixels de largeur et 100 pixels de hauteur. Choisissez limage darrire-plan fond-degrad.jpg qui sera rpte en x. Validez. Sur la page, supprimez la phrase Placez ici le contenu de id "pied" . La gure 10-30 prsente le rsultat des trois tapes prcdentes.
261
Figure 10-30
Les trois premires tapes de lexercice
9. Vous allez maintenant raliser la zone qui permettra de placer limage et le texte. Cette zone est prvue pour contenir les deux lments. Cliquez nimporte o dans la page et insrez une nouvelle balise div. Choisissez loption Aprs le dbut de la balise, puis dans le menu de droite, choisissez Contenu an dimbriquer cette nouvelle balise dans la balise #contenu. Nommez cette zone zone1. Crez une nouvelle rgle de CSS et attribuez cet lment une taille de 600 300 pixels et le noir comme couleur darrire-plan. Cliquez sur OK pour valider. 10. Sur la page, cette zone se place gauche de la balise contenu. Pour la positionner correctement, ditez son style en double-cliquant sur #zone1. Dans la fentre Dnition des rgles de CSS, slectionnez la catgorie Boite et indiquez une marge haute de 10 pixels et une marge gauche de 40 pixels. Validez. 11. Cliquez dans la zone #zone1 et insrez limage pont-espagne.jpg. Pour tre certain que vous tes bien dans le bloc #zone1, vriez dans le slecteur de balise. Au besoin, appuyez sur les touches ches gauches ou droites du clavier pour placer le pointeur lintrieur.
262
12. Ouvrez le chier texte-latin.txt. Slectionnez tout le texte et copiez-le. Revenez sur votre document de travail et collez le texte qui se place alors en bas droite de limage. Pour que le texte apparaisse compltement droite de limage, cliquez sur cette dernire et crez une nouvelle rgle de CSS. Validez le slecteur propos, soit #contenu #zone1 img. Dans la fentre Dnition des rgles de CSS, slectionnez la catgorie Bote et choisissez Left dans la liste droulante Float. 13. Pour amliorer la mise en forme du texte, vous allez modier les proprits de la balise zone1 puisque le texte en fait partie. Pour cela, double-cliquez sur le style #zone1 de la fentre Styles CSS. Slectionnez la catgorie Type et choisissez la police Times en corps 16 et de couleur blanche. Dans la catgorie Bloc, choisissez lalignement du texte Text-align: justify. Enn, dans la catgorie Bote, choisissez un Padding de 10 pixels pour tous les cts. Le texte reste encore coll limage. ditez le style de limage et ajoutez une proprit margin de 10 pixels droite.
Figure 10-31
Limage et le texte mis en place
263
14. Terminez lexercice en saisissant le texte Le Pont dEspagne dans la zone en-tete. Attribuez-lui le format En-tte 1 depuis le panneau Proprits. Modiez ensuite le style de la balise <h1> (qui correspond au format En-tte 1) en lui attribuant la police Arial, une taille de 36 pt et une couleur blanche. Dans la catgorie Bote de la fentre Dnition des rgles de CSS, indiquez la valeur 0 pour les marges et 10 pixels pour le champ top de la proprit Padding. 15. Procdez de la mme manire pour saisir le texte Contactez le webmaster webmaster@montagne-pyrennees.com . Modiez le style de la balise didentiant #pied pour changer la couleur du texte, sa police et son corps.
Les assistances visuelles

En mode Cration, plusieurs assistants vous permettront de mieux travailler avec les lments PA.
Assistant visuel des lments PA
Si vous travaillez avec des lments PA sans couleur darrire-plan, vous devrez en afcher les contours an quils restent visibles une fois dslectionns. Pour cela, slectionnez le menu Afchage>Assistances visuelles>Contour des lments PA. La gure 10-32 prsente gauche le mode Cration sans assistance visuelle des lments PA et droite lassistance active.
Figure 10-32
Lassistance visuelle des lments PA
Arrire-plans en feuilles CSS
Tout comme lassistant visuel, lassistant Arrire-plans en feuilles CSS permet de mieux visualiser les lments placs sur la page de travail. Pour lactiver, slectionnez le menu Afchage>Assistances visuelles>Arrire-plans en feuilles CSS. Une couleur darrireplan diffrente pour chacun des blocs crs safche alors sur la page, mais elle napparatra pas dans le navigateur.
264
Afchage des lments invisibles
Il est parfois difcile de reprer des lments PA imbriqus. Lafchage des lments invisibles permettra de placer sur la page, en mode Cration, une icne jaune pour chaque lment PA. Cette icne est toujours place en haut gauche de llment conteneur, cest son point dancrage. Vous pourrez ainsi facilement reprer les lments qui en contiennent dautres. La gure 10-33 montre llment apDiv1 et son icne jaune correspondante, il contient donc un autre lment PA. Pour slectionner llment imbriqu, cliquez sur son icne jaune.
Figure 10-33
Afchage des points dancrage
Pour afcher les points dancrage des lments PA, slectionnez le menu Edition>Prfrences cliquez sur la catgorie Elments invisibles et cochez la case Points dancrage des lments PA.
Modle de botes en feuilles CSS
Lassistant Modle de botes en feuilles CSS est accessible depuis le menu Afchage>Assistances visuelles>Modle de botes en feuilles CSS. Il permet de visualiser lencombrement des botes en afchant les bordures et les marges dans un style hachur. Ainsi, les bordures qui nont pas de style (solide, pointills) et qui apparaissent normalement transparentes, seront visibles. La gure 10-34 prsente le mode Cration avec lassistant Modle de botes en feuilles CSS.
265
Figure 10-34
Lassistant Modle de botes en feuilles CSS
Conclusion
Dreamweaver propose des outils simples pour la conception des pages Web sans avoir recours des manipulations de code. Comme pour tous les outils, cela demande un peu de pratique, mais en les employant, vous aurez lassurance de ne pas faire derreurs dcriture ou de syntaxe. Lutilisation des positionnements CSS, contrairement lemploi des structures en tableaux, vous permettra dobtenir un code HTML simple, clair et facilement modiable. La sparation totale entre le code de la structure de la page et sa mise en forme oblige le concepteur prvoir ses diffrentes actions. Dreamweaver excute et afche correctement, en gnral, les diffrentes rgles de styles crites. Nanmoins, vous devrez souvent tester vos mises en page dans les navigateurs, car ceux-ci ne ragissent pas tous de la mme manire aux diffrentes rgles de styles.
11
Mise en forme des liens, des tableaux et des formulaires
Certains lments demandent une attention particulire en ce qui concerne leur mise en forme. Il sagit des tableaux, des liens, des formulaires et des listes. Cette dernire catgorie sera tudie en dtail au chapitre 12. La mise en forme des liens, des tableaux et des formulaires requiert souvent lutilisation de sous-slecteurs, dattributs ou de concepts particuliers qui rendent leur manipulation difcile et peu intuitive. Ce chapitre est consacr ces mises en page qui posent gnralement beaucoup de problmes aux concepteurs dbutants : la mise en forme des liens ; la mise en forme des tableaux ; la mise en forme des formulaires.
Mettre en forme des liens

Si besoin reportez-vous au chapitre 4 pour un rappel sur la cration des liens. Cette section prsente les diffrents moyens disponibles pour mettre en forme des liens texte ou image. Le chapitre 12, consacr aux menus, compltera les notions abordes ici.
Mettre en forme des liens texte

Lorsquun lien est cr, il safche par dfaut dans les navigateurs sous la forme dun texte bleu soulign. Cette mise en forme, bien que largement accepte et identie par
268
tous, ne prsente pas un grand intrt graphique. Vous pouvez nanmoins modier cette mise en forme pour la rendre plus esthtique mais galement pour faciliter la navigation au sein de vos pages Web. Par exemple, en utilisant des liens dont la couleur change au survol de la souris ou bien, une image place en arrire-plan du lien qui changera daspect lorsque le pointeur de la souris la survolera. La mise en forme la plus simple des liens texte consiste en modier la couleur et faire en sorte quils changent daspect lors du passage de la souris, ce qui est trs facilement ralisable grce aux styles CSS (voir chapitre 9 pour plus dinformations). Aucune proprit nexiste pour les liens, ce sont des slecteurs de pseudo-classe qui permettent dattribuer des couleurs aux liens selon lvnement. Cinq pseudo-classes permettent de grer laspect des liens : :link Permet de spcier laspect des liens de la page qui nont pas encore t visits. :visited Permet de spcier laspect des liens visits. :hover Permet de spcier laspect des liens lorsquils sont survols par le curseur de la souris. :active Permet de spcier laspect des liens lorsquils sont cliqus. :focus Permet de spcier laspect des liens en utilisant la touche Tab ou un raccourci clavier. Ces cinq pseudo-classes seront utilises avec la balise <a> pour crer les slecteurs
a:link, a:visited, a:hover, a:active et a:focus.
Lorsque lon cre une nouvelle rgle de CSS depuis la fentre Styles CSS ou bien depuis la palette des proprits, la fentre Nouvelle rgle de CSS, propose ces pseudo-classes lorsque loption Compos est choisie. Vous devrez donc spcier un style pour chacun des tats spcis ci-dessus. La gure 11-1 prsente les pseudo-classes dans la bote de dialogue Nouvelle rgle de CSS.
Figure 11-1
Les pseudo-classes des liens
Pour activer la proprit :focus, absente de la liste, saisissez simplement a:focus dans le champ Slecteur. Pour chacun des slecteurs, validez cette bote de dialogue et choisissez
Mise en forme des liens, des tableaux et des formulaires CHAPITRE 11
269
les rgles de CSS appropries. Gnralement, on modie la couleur du texte et on coche la case None pour la liste Text-decoration de la catgorie Type de la fentre Dnition des rgles de CSS. Une fois les diffrents tats de liens paramtrs, ils safcheront dans la fentre Styles CSS.
Figure 11-2
Les diffrents tats des liens apparaissent dans la fentre Styles CSS
Mettre en forme des liens image

Lorsquon affecte un lien une image, celle-ci prsente une bordure, gnralement bleue, qui la distingue des autres images sans lien. Vous pouvez choisir de lafcher ou au contraire de la supprimer. Dans ce cas, vous devez crer une nouvelle rgle de CSS pour les balises <img> et, dans la catgorie Bordure de la fentre Dnition des rgles de CSS, indiquer 0 dans les champs de la zone Largeur.
Crer des liens ractifs avec des images

Le principe des liens ractifs, galement appels rollovers, consiste remplacer une image par une autre au survol du curseur de la souris. Gnralement, un rollover se ralise avec un comportement JavaScript fourni avec Dreamweaver ou en crant son propre code JavaScript. Il est possible dobtenir le mme effet en utilisant les styles CSS. Les rollovers CSS reposent sur le mme principe de remplacement dune image par une autre. Pour cela, plusieurs mthodes existent. La mthode classique consiste crer deux images et remplacer lune par lautre. Une autre mthode, plus CSS, consiste crer une seule image comprenant les deux aspects du lien. Limage est alors simplement dcale horizontalement ou verticalement.
Remplacer une image par une autre
Pour ce type de rollover, vous devez disposer de deux images pralablement cres. Lune des images sera afche par dfaut et remplace par lautre lors du survol de la souris. La gure 11-3 prsente ces deux images. Le principe des images survoles cres en CSS repose sur la modication de larrireplan de la balise <a>, reprsentant le lien. En mode Cration, un lien ne peut se crer que
270
Figure 11-3
Les deux images du rollover
sil y a un lment sur la page. Cela peut paratre logique tant donn quun lien est quelque chose sur lequel on clique, mais, dans notre cas, cela oblige crire quelque chose dans la page qui na rien voir avec notre image. La gure 11-4 prsente le lien ctif.
Figure 11-4
Le lien ctif et le champ Lien du panneau Proprits
1. Dans la page, crivez un texte ctif. 2. Slectionnez ce texte et attribuez-lui le format Paragraphe depuis la palette des Proprits. 3. Slectionnez le lien en cliquant sur la balise <a> du slecteur de balise situ en bas de la fentre de document. Renseignez le champ Lien du panneau Proprits est avec le vritable lien qui sera sur limage. Attribuez un nom didentiant img1 au lien en lcrivant dans la zone ID de la palette des proprits en mode HTML. Il nest pas indispensable de crer un identiant img1 mais cela permettra de crer plusieurs liens dimage en rollover sur la mme page. Vous nommerez les lments suivants img2, img3 et ainsi de suite. 4. Cliquez sur le lien ctif, puis sur licne Nouvelle rgle de CSS de la fentre Styles CSS ou bien sur le bouton Modier rgle depuis la palette des Proprits en mode CSS.
271
5. La bote de dialogue Nouvelle rgle de CSS souvre alors. Choisissez le type de slecteur Compos et saisissez a#img1:link dans le champ Slecteur (voir gure 11-5). Cliquez sur OK pour valider.
Figure 11-5
Le slecteur qui permettra dafcher limage
6. Dans la fentre Dnition des rgles de CSS qui souvre alors, choisissez la catgorie Arrire-plan et slectionnez une image darrire-plan en cliquant sur le bouton Parcourir Slectionnez, ventuellement, pas de rptition dans la liste droulante Rptition. Cliquez ensuite sur la catgorie Bloc et choisissez block dans la liste Display. Cliquez enn sur la catgorie Bote et indiquez la taille de limage laide des champs Largeur et Hauteur. Validez. 7. Dans la page, limage apparat. Vous devez prsent supprimer le texte du lien. Ne le faites pas directement depuis la fentre Cration car limage serait galement supprime. Cliquez sur le texte du lien puis sur le bouton Code ou Fractionner. Le curseur de la souris se place automatiquement lendroit du code relatif au lien. Supprimez le texte pour ne conserver que llment <a> (voir gure 11-6).
Figure 11-6
Le texte du lien supprim en mode Code
8. Vous allez prsent paramtrer laspect du lien lorsquil sera survol par le curseur de la souris. La premire image tant en place et son lien dni, il suft de crer une nouvelle rgle de CSS avec la pseudo-classe :hover. Pour cela, cliquez sur licne Nouvelle rgle de CSS de la fentre des styles CSS, choisissez loption Compos et saisissez a#img1:hover dans le champ Slecteur. Validez. 9. Dans la fentre Dnition des rgles de CSS qui souvre alors, slectionnez la catgorie Arrire-plan et renseignez le nom de la seconde image dans le champ Image darrire-plan. Cliquez sur OK pour valider, le rollover est termin.
272
Lien avec une double image
La mthode de remplacement dune image par une autre est trs classique puisquelle tait dj utilise pour la cration des premiers CD-Rom. Son principal dfaut est le dlai temps de chargement de la seconde image lorsque le curseur de la souris survole limage en place. Une alternative consiste charger les deux aspects de limage en une seule fois, ce qui est possible sils sont tous les deux contenus dans limage. La gure 11-7 prsente cette double image , quil est possible de tlcharger depuis le site de lditeur.
Figure 11-7
La double image pour le rollover
La double image de cet exemple mesure 150 pixels de hauteur et 300 pixels de largeur. Le principe de limage ractive consiste dplacer limage darrire-plan du lien de manire horizontale. 1. Reprenez les tapes de la mthode prcdente an de crer le lien sur limage. La seule diffrence entre ces deux mthodes se situe au niveau de la dnition des rgle de CSS pour le slecteur a:hover. 2. Aprs validation du slecteur a:hover, slectionnez la catgorie Arrire-plan dans la fentre Dnition des rgles de CSS et choisissez de nouveau limage darrire-plan. 3. Dans la liste droulante Position horizontale, indiquez la taille de limage totale, divise par 2 avec un signe ngatif, soit 50 pixels pour notre exemple. Vous pouvez aussi indiquer droite dans la liste droulante Position horizontale. Le rollover est termin.
Mettre en forme des tableaux

Lusage des tableaux est aujourdhui prconis pour la prsentation de donnes. Comme tous les lments XHTML, leur prsentation doit tre amliore par lutilisation de styles CSS. De nombreux attributs de balise peuvent tre utiliss et cela, en conservant une parfaite compatibilit XHTML 1.0 Strict.
273
Un tableau peut tre mis en forme de plusieurs manires, pour sa taille et celle de ses cellules : par les lignes ; par les colonnes ; par les zones dnies en tant que corps, pied ou en-ttes ; par ses bordures gnrales ou de cellules ; par lespacement entre les cellules ; par le remplissage. Combins, ces divers attributs contribuent une meilleure lisibilit et un rendu graphique plus attrayant. La modication du style des bordures dun tableau doit normalement se faire depuis une feuille de style. vitez dutiliser le panneau Proprits car certains attributs sont compatibles et dautres ne le sont pas. Par exemple, lattribut border est autoris pour la balise <table>. Lattribut align, ne lest pas. Pour viter les hsitations, les tableaux 11-1 et 11-2, ainsi que les gures 11-8 et 11-9, prsentent les attributs XHTML 1.0 Strict autoriss pour les balises <table>, <td> et <th>.
Tableau 11-1 Compatibilit XHTML 1.0 Strict des attributs de la balise <table>
Attribut de la balise <table> Compatible XHTML 1.0 Strict Non compatible
x x x x x x x x x x x x x
Proprits dans Dreamweaver (voir gure 11-8)
align border class cellpadding cellspacing id summary width height hspace vspace frame rules
La gure 11-8 prsente le panneau Proprits de la balise <table> et les attributs correspondants au tableau 11-1.
274
Figure 11-8
Les proprits de la balise <table>
Le tableau 11-2 prsente les attributs des balises <td> et <th> avec leur compatibilit XHTML 1.0 Strict.
Tableau 11-2 Compatibilit XHTML 1.0 Strict des attributs des balises <td> et <th>
Attribut de la balise <td> ou <th> Compatible XHTML 1.0 Strict
x x x x x x x x x x x x
Non compatible
Proprits dans Dreamweaver (voir gure 11-9)
abbr align background class colspan height id nowrap rowspan scope valign width

Style
La gure 11-9 prsente le panneau Proprits des balises <td> et <th> et les attributs correspondants au tableau 11-2. Notez que sur cette gure la puce numrote 6 permettra de transformer une cellule normale (<td>) en cellule den-tte (<th>).
Figure 11-9
Les proprits des balises <td> et <th>
275
Modier les bordures

Un tableau est introduit par la balise <table> qui est une balise de type bloc dont la bote peut tre entoure dune bordure. Lorsque lon attribue une bordure la balise <table>, elle sapplique uniquement sur le contour du tableau, les cellules ne sont pas affectes par le style. La gure 11-10, prsente un tableau dont la bordure de la balise <table> est de 6 pixels. Des bordures de 2 pixels sont attribues aux cellules (<td>) pour pouvoir les visualiser. Ces bordures sont ralises avec des proprits CSS.
Figure 11-10
Le contour dun tableau afch dans Firefox
Voici la marche suivre pour raliser une bordure autour dun tableau. 1. Dans la fentre Styles CSS, cliquez sur licne Nouvelle rgle de CSS. Vous ne pouvez pas crer de nouvelle rgle depuis la fentre des proprits lorsque vous avez slectionn une balise table. 2. Slectionnez le type de slecteur Balise et saisissez table dans le champ de Nom du Slecteur. 3. Cliquez sur OK pour valider. Dans la fentre Dnition des rgles de CSS qui souvre alors, choisissez la catgorie Bordure et slectionnez le style, la largeur et la couleur de votre choix. La bordure est automatiquement applique au tableau. Un tableau est introduit par la balise <table>, les diffrentes lignes le constituant par la balise <tr>, et les en-ttes de colonnes et de cellules simples par les balises <th> et <td>. La gure 11-10 prsente un tableau dont les cellules sont entoures de diffrentes bordures ralises en attribuant un style aux balises <td>. La marche suivre est la mme que celle permettant dattribuer une bordure au tableau entier. Grce aux rgles de CSS, vous pourrez facilement varier les diffrentes bordures, les afcher sous forme de pointills, de tirets
Supprimer les espaces entre les cellules
Pour supprimer les espaces entre les cellules, saisissez la valeur 0 dans le champ Espac. de cellule (cellspacing ) du panneau Proprits. Les cellules seront alors jointes et places cte cte. Il en rsulte donc une bordure double puisque chaque cellule conserve sa propre bordure. Pour obtenir un let n et supprimer la bordure proche de la bordure externe du tableau, vous devrez utiliser la proprit CSS border-collapse applique au slecteur table. Sur la gure 11-10, on distingue nettement la bordure du tableau et celle extrieure des cellules. Le rsultat obtenu avec la proprit border-collapse, partir des mmes styles que
276
pour la gure 11-10, est visible en gure 11-11. Il ny a plus quun seul let de sparation entre les cellules et celles-ci commencent immdiatement aprs la bordure du tableau.
Figure 11-11
Exemple dutilisation de la proprit border-collapse
La proprit border-collapse est uniquement accessible depuis la fentre Styles CSS (voir la section Modier les bordures des lignes dans ce chapitre).
Les attributs frame et rules
Ces deux attributs ne gurent pas dans le panneau Proprits des tableaux. Ils se placent dans la balise <table> et sont accessibles depuis la fentre Inspecteur de balises. Ces deux attributs sont compatibles XHTML 1.0 strict et permettent dobtenir des mises en page avances pour les tableaux. Lattribut frame permet de spcier sur quels cts sont places les bordures de la balise <table>. Voici les diffrentes valeurs de cet attribut : box entoure le tableau ; above place la bordure uniquement en haut ; below place la bordure uniquement en bas ; hsides place la bordure en haut et en bas ; vsides place la bordure gauche et droite ; lhs place la bordure uniquement gauche ; rhs place la bordure uniquement droite. La gure 11-12 prsente un tableau dont la bordure extrieure est uniquement place en bas. Notez quil peut y avoir des diffrences dafchage selon les navigateurs. Dreamweaver nafche pas correctement les valeurs de cet attribut.
Figure 11-12
Le tableau prsente une bordure uniquement en bas.
277
Lattribut rules spcie le comportement des bordures des cellules. Voici les diffrentes valeurs possibles pour cet attribut : all place les bordures autour des cellules (cest le mode normal) ; cols place les bordures uniquement verticalement ; groups place les bordures entre len-tte, le corps et le pied du tableau ; none nafche aucune bordure ; rows place les bordures uniquement horizontalement. La gure 11-13 prsente le tableau prcdent avec uniquement les lignes sparant les colonnes.
Figure 11-13
Afchage des lignes verticales du tableau
Notez quil peut y avoir des diffrences dafchage importantes suivant les navigateurs. Dreamweaver nafche pas correctement les valeurs de cet attribut. Pour attribuer lun de ces deux attributs un tableau : 1. Cliquez dans le tableau. 2. Slectionnez la balise <table> dans le slecteur de balise. 3. Ouvrez la fentre Inspecteur de balises via le menu Fentre>Inspecteur de balises. 4. Indiquez une valeur en regard des attributs frame ou rules. La gure 11-14 prsente la valeur donne lattribut frame dans la fentre Inspecteur de balises.
Figure 11-14
Les attributs frame et rules afchs dans la fentre Inspecteur de balises
278
Modier les bordures des colonnes
Les colonnes des tableaux se modient en utilisant les slecteurs de balises <td>, didentiants ou de classes. La slection des colonnes du tableau depuis la fentre Cration est trs simple et permet lattribution dun style. Voici la marche suivre pour attribuer un style aux colonnes : 1. Cliquez sur licne Nouvelle rgle de CSS de la fentre Styles CSS. Si les colonnes de votre tableau comportent plusieurs cellules, vous devez crer un slecteur de type Classe. Un slecteur dID ne convient pas car un identiant doit tre unique dans la page HTML. 2. Dans la fentre Cration, placez le curseur de la souris en haut de lune des colonnes du tableau. Il se transforme alors en che indiquant la direction de la slection (voir gure 11-15).
Figure 11-15
La slection dune colonne complte
3. Cliquez pour slectionner la colonne. 4. Dans la fentre Styles CSS, cliquez droit (Ctrl + clic sur Mac) sur lun des styles et choisissez Appliquer dans le menu local. Le style slectionn est appliqu la colonne.
Modier les bordures des lignes
Contrairement aux bordures des colonnes, celles des lignes horizontales ne peuvent pas tre modies car la balise <tr> naccepte pas de styles de bordures. Pour crer des bordures horizontales, vous devrez attribuer un style chacune des cellules de la ligne en spciant les bordures hautes ou basses. Voici la marche suivre pour raliser un tableau ne comportant que des lignes horizontales de couleur. 1. Depuis la fentre Styles CSS, crez une nouvelle rgle de CSS pour la balise <td>, vous pourriez aussi crer un slecteur de classe. Dans la fentre Dnition des rgles de CSS, choisissez la catgorie Bordure et slectionnez solide dans la liste droulante
279
Bas de la zone Style. Choisissez moyen dans la liste droulante Bas de la zone Largeur et spciez une couleur. Cliquez sur la catgorie Arrire-plan et choisissez une couleur darrire-plan pour les cellules. Le tableau se met jour lorsque vous appuyez sur le bouton Appliquer, dans le cas dun slecteur de balise <td>. 2. Un test dans Firefox ou Internet Explorer montre que les lignes horizontales sont bien afches, mais les cellules restent spares cause des bordures. Pour les rapprocher, utilisez la proprit border-collapse:collapse. 3. Crez une nouvelle rgle de CSS pour la balise <table>. La proprit border-collapse nexiste pas dans la fentre Dnition des rgles de CSS pour la balise <table>. Pour crer le style et le faire apparatre dans la fentre Styles CCS, vous devez choisir une rgle. Par exemple, slectionnez Aucune dans la liste droulante Style de la catgorie Bordure. Cliquez sur OK pour valider. Le slecteur table safche dans la fentre Styles CSS. 4. Cliquez sur le slecteur table, puis sur licne Afcher la vue par catgorie. Cliquez sur la catgorie Tableaux, Contenu, Guillemets et slectionnez la proprit bordercollapse. Attribuez la valeur : collapse.
Figure 11-16
La proprit border-collapse de la fentre Styles CSS
5. Les cellules ntant plus spares, les lignes du tableau sont prsent jointes.
280
Figure 11-17
Un tableau prsentant des bordures de ligne horizontales
Modier une cellule
La mise en forme dune cellule se ralise facilement en utilisant un slecteur dID propre la cellule ou en lui affectant une classe particulire. Un ID ne peut sappliquer qu une seule cellule. Pour attribuer un ID ou une classe une cellule dun tableau, cliquez dedans et dans la fentre Styles CSS, cliquez droit (Ctrl + clic sur Mac) sur le style souhait et choisissez Appliquer.
Autres mises en forme dun tableau

La mise en forme du contenu dun tableau se ralise avec les proprits de styles courantes. Utilisez la procdure suivante : 1. Saisissez les donnes dans les cellules du tableau sans vous proccuper de la mise en forme. 2. Crez des styles de polices, couleurs, corps, alignement vertical en slecteurs de classe, de balise ou didentiant. 3. Cliquez dans la cellule du tableau mettre en forme. Vous pouvez aussi procder par slection multiple en appuyant sur la touche Ctrl ds la premire slection de cellule. 4. Affectez-lui un style depuis la fentre Styles CSS.
Positionner la lgende du tableau
Loutil de cration de tableau de Dreamweaver permet de donner une lgende au tableau. Celle-ci est place dans la balise <caption>. Pour modier lalignement de la lgende, crez un style pour la balise <caption> avec une proprit text-align.
Mettre en forme des formulaires

La mise en page des lments de formulaire se ralise souvent lintrieur dun tableau. Cette technique est trs simple mais elle rend plus complexe, voire impossible, laccs aux donnes pour les personnes utilisant un navigateur autre que graphique. La cration de sites XHTML/CSS amne le concepteur sparer la mise en page du contenu.
281
Saisir le formulaire
La saisie dun formulaire se ralise dans une zone de formulaire. Dans Dreamweaver, cette zone est symbolise par un trait en pointills rouge. Elle permet de dlimiter les lments envoyer par le formulaire. Pour une DTD XHTML 1.0 Strict, les spcications du W3C prcisent que cette zone ne peut recevoir que du contenu de type bloc et non de type en ligne. Ainsi, il ne sera pas possible dcrire ou de placer un lment de formulaire directement dans la zone de formulaire. Vous devrez placer le texte ou llment de formulaire dans une balise <p>, <div>, une liste ou toute autre balise bloc acceptant du contenu en ligne. Pour plus dinformations sur les formulaires, reportezvous au chapitre 7. La composition dun formulaire seffectue donc gnralement dans une balise <div>, ce qui permet dinsrer ensuite tous les lments en ligne du formulaire. Voici un exemple de mise en page dun formulaire simple, compos dans un lment
<div>, mais sans aucun retour la ligne ou saut de paragraphe. Il se prsente sous la
forme dune suite dintituls et de champs. La gure 11-19 prsente ce formulaire sans aucune mise en page ni retour la ligne. Il a t cr avec des tiquettes enveloppes dans une balise <label> grce loption Envelopper avec une balise dtiquette de la bote de dialogue Attributs daccessibilit des balises dentre. Le code de ce formulaire est prsent ci-aprs :
<body> <form id="form1" method="post" action=""> <div id="formulaire"><label for="id-nom">Nom :</label> <input type="text" name="id-nom" id="id-nom" /> <label for="id-premon">Prnom :</label> <input type="text" name="id-premon" id="id-premon" /> <label for="id-mail">Adresse mail :</label> <input type="text" name="id-mail" id="id-mail" /> </div></form> </body>
Figure 11-18
Formulaire sans aucune mise en page
Pour aligner les intituls et leurs champs correspondants, et insrer un retour la ligne pour chacun des items, nous utilisons le fait que les intituls sont placs dans une balise <label>. Nous allons employer un positionnement ottant gauche pour les balises <label> et leur donner une taille en largeur. 1. Depuis la fentre Styles CSS, cliquez sur licne Nouvelle rgle de CSS. Slectionnez le type de slecteur Balise et saisissez label dans le champ Balise. Validez.
282
2. Dans la fentre Dnition des rgles de CSS, choisissez la catgorie Bote et indiquez une largeur. Choisissez left dans la liste droulante de la proprit Float.
Figure 11-19
Les proprits des tiquettes (labels)
Le formulaire ne safche pas encore correctement car il na pas de taille prcise. 3. Cliquez sur le let rouge du formulaire pour le slectionner. 4. Cliquez sur licne Nouvelle rgle de CSS et crer une rgle pour lidentiant de votre formulaire. Validez. 5. Dans la fentre Dnition des rgles de CSS, choisissez la catgorie Bote et spciez une largeur pour le formulaire. Cliquez sur OK pour valider. Notez que dans ce cas, vous auriez aussi pu attribuez une taille au bloc div, plac dans le formulaire et portant lidentiant formulaire (voir code du formulaire ci-dessus). Si vous souhaitez espacer un peu la mise en page pour que les champs soient moins serrs, crez une nouvelle rgle de CSS pour les balises <input> auxquelles on attribue une marge basse. La gure 11-20 prsente le formulaire termin.
Figure 11-20
Le formulaire termin
Une balise permet de regrouper plusieurs champs de formulaire an de mieux sparer les donnes, la balise <fieldset>. Dans Dreamweaver, cette proprit correspond licne Ensemble de champs de la catgorie Formulaires du panneau Insertion. Pour regrouper plusieurs champs, slectionnez-les en mode Cration et cliquez sur cette icne. Dans la bote de dialogue qui souvre alors, saisissez lintitul de la zone de formulaire. Le rsultat est prsent la gure 11-21.
283
Figure 11-21
Le formulaire avec un ensemble de champs
Conclusion
Toutes les mises en forme CSS requirent un minimum de savoir et dapprentissage. En effet, les liens, les tableaux et les formulaires sont des lments dont la mise en forme est peu intuitive et pour lesquels il faut donc bien connatre les diffrentes proprits. En outre, la matrise de la mise en forme des liens est indispensable pour raliser des mises en page graphiques et ergonomiques ; sans compter que les formulaires seront plus accessibles en utilisant une mise en forme avec les CSS plutt quavec les tableaux.
12
Mise en forme des listes
Lusage des listes est aujourdhui trs rpandu. Longtemps utilises uniquement pour prsenter des contenus numrs, quand elles ntaient pas simplement remplaces par des retours la ligne, les listes font aujourdhui lunanimit pour la cration de menus. Une meilleure implmentation des styles CSS dans les navigateurs et une volont croissante de raliser des sites accessibles et facilement modiables ont donn aux listes ses lettres de noblesses. Ce chapitre leur est spcialement consacr car, dans le contexte XHTML/CSS, elles reprsentent des lments incontournables quil est ncessaire de matriser. Voici les points qui y seront abords : la cration des listes ; les listes et les CSS ; la cration de menus avec les listes.
Crer des listes

La liste est un lment important dans la structuration dun document car elle permet de lorganiser (dans sa totalit ou en partie seulement) pour le rendre le plus comprhensible possible pour le lecteur. Les listes pourront donc tre utilises aussi bien pour diviser le document que pour effectuer des numrations dobjets. En XHTML, il ny a pas de numrotation automatique pour des niveaux hirarchiques diffrents aussi, pour obtenir des numrotations sur plusieurs niveaux, il faudra crer des listes imbriques. Ce langage dnit deux types de listes : les listes descriptives, typiquement les glossaires, et les listes dnumration avec ou sans numrotation.
286
Les listes de dnitions

Les listes de dnitions permettent de crer des couples de type objet/dnition. Elles comportent donc toujours deux lments : un mot, un groupe de mot, une phrase et une dnition. Ces listes afchent la dnition en retrait par rapport lobjet. La gure 12-1 prsente une liste de dnitions simple constitue de trois lments.
Figure 12-1
Exemple de liste descriptive
Dans Dreamweaver, la cration dune liste de dnitions seffectue via le menu Format> Liste>Liste de dnitions. Voici la marche suivre. 1. Placez le curseur de la souris lendroit de la page o vous souhaitez insrer une liste de dnitions. 2. Slectionnez le menu Format>Liste>Liste de dnitions. 3. Saisissez le premier objet de la liste et insrez un retour la ligne en appuyant sur la touche Entre du clavier. 4. Saisissez la dnition de lobjet, vous constatez quelle safche avec un lger retrait sur la droite. Appuyez sur la touche Entre pour insrer un retour la ligne. 5. Procdez de la mme manire pour les autres objets de la liste et leurs dnitions. 6. Pour arrter lcriture dune liste de dnitions, insrez un retour la ligne aprs la dernire dnition et slectionnez nouveau le menu Format>Liste>Liste de dnitions pour dsactiver la commande. Voici les codes XHTML correspondants aux listes de dnitions : Llment <dl></dl> ouvre une liste de dnitions. Il dnit le dbut de la liste et englobe les balises <dt> et <dd>. Llment <dt></dt> permet de dnir le sujet ; il ne peut avoir quune seule ligne. Llment <dd></dd> dnit le corps de la dnition. Voici le code correspondant la gure 12-1 :
<dl> <dt>Mot - 1</dt> <dd>dfinition du mot 1</dd> <dt>Mot - 2</dt> <dd>dfinition du mot 2</dd>
Mise en forme des listes CHAPITRE 12
287
<dt>Mot - 3</dt> <dd>dfinition du mot 3</dd> </dl>
Listes non ordonnes et listes ordonnes

Les listes ordonnes et non ordonnes permettent de raliser des numrations dune seule ligne, places les unes au-dessous des autres, qui seront, selon le style de la liste, numrotes ou non.
Listes non ordonnes
Dans Dreamweaver, il est possible de crer une liste non ordonne soit depuis le menu Format>Liste>Liste simple, soit en la dsignant depuis le panneau Proprits des textes. Pour crer une liste via le menu Format>Liste>Liste simple : 1. Placez le curseur de la souris lendroit de la page o vous souhaitez insrer une liste non ordonne. 2. Slectionnez le menu Format>Liste>Liste simple. 3. Saisissez le premier objet de la liste et insrez un retour la ligne en appuyant sur la touche Entre du clavier. 4. Procdez de la mme manire pour tous les autres objets de la liste. 5. Pour arrter lcriture dune liste simple, insrez un retour la ligne aprs le dernier objet et slectionnez nouveau le menu Format>Liste>Liste simple. Pour la seconde mthode, saisissez les diffrents items de la liste directement dans la page, en mode Cration, en les sparant par un retour la ligne. Cela cre, au niveau du code, des paragraphes. Une fois tous les objets saisis, slectionnez les lments et cliquez sur licne Liste simple du panneau Proprits. La gure 12-2 prsente une liste non ordonne.
Figure 12-2
Exemple de liste non ordonne
En XHTML, les listes non ordonnes sont introduites par llment <ul></ul>, qui signie unordered list. Chacun des items est introduit par llment <li></li>, qui signie list item. Voici le code correspondant la gure 12-2 :
<ul> <li>Pommes</li>
288
<li>Poires</li> <li>Prunes</li> </ul>
Listes ordonnes
Les listes ordonnes se construisent de la mme manire que les prcdentes : via le menu Texte>Liste>Liste numrote ou en cliquant sur licne Liste numrote du panneau Proprits. En XHTML, les listes ordonnes sont introduites par la balise <ol></ol>, qui signie ordered list. Chacun des items est introduit par llment <li></li>, qui signie list item. Voici un exemple de code dune liste numrote :
<ol> <li>Pommes</li> <li>Poires</li> <li>Prunes</li> </ol>
Les listes et les CSS

Grce lutilisation des styles, les listes peuvent tre prsentes de manires trs varies. Par exemple, les listes ordonnes et non ordonnes peuvent safcher avec des puces et des chiffres de styles divers. Lusage dune feuille de style permettra galement de modier toutes les caractristiques dune liste (taille du texte, arrire-plan, organisation de la liste en colonnes ou en lignes, etc.). Ces modications seront abordes la section suivante Crer des menus avec les listes . Cette partie prsente de la manire la plus complte possible les diffrents aspects des puces des listes ordonnes et non ordonnes. Les rgles de CSS pour les listes sont prsentes au chapitre 9. Voici deux mthodes daffectation de ces rgles aux listes. La premire mthode modie la balise de cration de liste. Toutes les listes cres avec ce type de liste seront modies. 1. Crez une nouvelle rgle de CSS depuis la fentre Styles CSS. 2. Slectionnez Balise comme type de slecteur et saisissez ul ou ol dans le champ Nom du slecteur en fonction du type de liste que vous souhaitez crer. 3. Dans fentre Dnition des rgles de CSS, choisissez la catgorie Liste et indiquez un type dans la liste droulante List-style-type. Cliquez sur OK pour valider. La seconde mthode permet de cibler une liste particulire dans la page grce lutilisation dun identiant. 1. Crez une nouvelle rgle de CSS depuis la fentre Styles CSS.
289
2. Slectionnez ID comme type de slecteur et saisissez le nom de lidentiant, prcd du caractre #. 3. Dans la fentre Dnition des rgles de CSS, choisissez la catgorie Liste et indiquez le type de liste souhait dans la liste droulante List-style-type. Cliquez sur OK pour valider. 4. Dans la page en mode Cration, cliquez ensuite dans la liste modier. Cliquez droit (Ctrl + clic sur Mac) sur la balise <ul> du slecteur de balise et affectez-lui lidentiant prcdemment cr. La gure 12-3 prsente les diffrents styles et leurs dnominations. Les styles peuvent safcher de diffrentes manires suivant les plateformes, les systmes dexploitation et les navigateurs. La capture dcran de la gure 12-3 a t ralise dans Firefox sur un ordinateur ayant Windows XP pour systme dexploitation.
Figure 12-3
Les diffrents styles de puces et de chiffres
290
Certains styles ne sont pas proposs dans la fentre Dnition des rgles de CSS, mais vous pourrez les modier depuis les proprits du style (voir gure 12-4).
Figure 12-4
La modication dune proprit de style
Si le nom dun style ne gure pas dans la liste propose par Dreamweaver, crez un style avec un nom quelconque, puis modiez la valeur de la proprit list-style-type dans les proprits du style.
Crer des menus avec les listes

Les menus des pages Web sont souvent raliss partir de textes ou dimages sur lesquels les internautes peuvent cliquer. Ces lments constituent les diffrents choix qui lui sont proposs. Les principes de la conception de page Web en XHTML/CSS et de laccessibilit ont conduit peu peu les concepteurs crer ces menus sous la forme de listes o chaque item constitue un lment cliquable. La mise en forme de la liste tant ralise au moyen dune feuille de style, les navigateurs vocaux ou non graphiques afcheront la liste son tat brut, sans mise en page.
Menu texte vertical

La ralisation dun menu vertical constitue la manire la plus simple daborder les menus crs avec des listes puisque celles-ci placent naturellement les items les uns au-dessous des autres. Voici la marche suivre pour raliser un menu vertical. 1. Crez une liste comprenant tous les items de votre menu. 2. Affectez un lien chacun des items de la liste. Ce lien peut tre rel ou vide, dans ce cas saisissez simplement le caractre # dans lattribut <a>. 3. Cliquez nimporte o dans le menu, puis sur la balise <ul> dans le slecteur de balise du document. 4. Slectionnez le menu Modier>Modier la balise 5. Dans la bote de dialogue qui souvre alors, choisissez Feuille de style/Accessibilit dans le cadre de gauche et saisissez menu dans le champ ID pour attribuer un nom didentiant la balise <ul>. Cliquez sur OK pour valider. Vous allez prsent supprimer les puces des items de la liste. 6. Cliquez sur la balise <ul#menu> depuis le slecteur de balise du document et cliquez sur licne Nouvelle rgle de CSS de la fentre Styles CSS ou bien sur le bouton
291
Modier la rgle de la palette des Proprits sous laspect CSS. Vriez que le type de slecteur slectionn est bien ID et que le nom didentiant est bien #menu. Cliquez sur OK pour valider. 7. Dans la fentre Dnition des rgles de CSS, choisissez la catgorie Liste et slectionnez Aucune dans la liste droulante List-style-type. Modions maintenant la couleur des liens. Pour cela, vous devez crer une nouvelle rgle de CSS pour les liens de la liste. 8. Cliquez sur lun des items de la liste, puis sur licne Nouvelle rgle de CSS de la fentre Styles CSS. La bote de dialogue qui souvre alors propose le slecteur compos #menu li a, slecteur qui correspond bien aux liens de la liste. Cliquez sur OK pour valider. 9. Dans la fentre Dnition des rgles de CSS, slectionnez la catgorie Type, modiez la couleur et cochez la case none pour loption Text-decoration. Validez. Pour nir, modions la couleur des liens survols par le curseur de la souris. 10. Cliquez sur lun des items de la liste, puis sur licne Nouvelle rgle de CSS de la fentre Styles CSS. La bote de dialogue qui souvre alors propose automatiquement le slecteur compos #menu li a. Remplacez ce nom par #menu a:hover. 11. Dans la fentre Dnition des rgles de CSS, modiez les attributs de couleur du texte et validez vos choix. Le menu est termin. Si vous souhaitez espacer les items du menu, crez une nouvelle rgle de CSS pour les lments <li> (#menu li) et dnissez une rgle de CSS pour les marges hautes ou basses.
Menu texte horizontal

Pour crer un menu horizontal, vous devez modier les proprits des items de la liste, cest--dire transformer la balise <li>, de type Liste Item, en balise de type en ligne. 1. Cliquez nimporte o dans la liste et slectionnez la balise <li> dans le slecteur de balise du document. 2. Cliquez sur licne Nouvelle rgle de CSS de la fentre Styles CSS. La bote de dialogue qui souvre alors propose automatiquement Compos comme type de slecteur et lidentiant #menu li. Cliquez sur OK pour valider. 3. Dans la fentre Dnition des rgles de CSS, slectionnez la catgorie Bloc et choisissez inline dans la liste droulante Display. 4. Cliquez ventuellement sur la catgorie Bote pour modier les marges droite et gauche des lments. Cliquez sur OK pour valider vos choix. Si vous souhaitez attribuer une taille llment <li>, utilisez le ottement au lieu de la proprit display:inline. En effet, la mthode prcdente ne permet pas de spcier une taille pour les lments <li> car ils sont dclars en ligne et ce type dlments naccepte pas les proprits de taille.
292
1. Cliquez dans la liste et slectionnez la balise <li> dans le slecteur de balise du document. 2. Cliquez sur licne Nouvelle rgle de CSS de la fentre Styles CSS. La bote de dialogue qui souvre alors propose automatiquement Compos comme type de slecteur avec lidentiant #menu li. Cliquez sur OK pour valider. 3. Dans la fentre Dnition des rgles de CSS, slectionnez la catgorie Bote et choisissez Left dans la liste droulante Float.
Menu dimages
La cration dun menu graphique avec des images repose sur le mme principe que la cration dun menu simple la diffrence que les items du menu sont ici des images. Laspect graphique est donn par la feuille de style dans laquelle on spcie les mmes proprits que pour les rollovers (voir chapitre 11). On obtient ainsi un menu smantiquement correct, avec une mise en forme totalement graphique.
Menu vertical
Voici une mthode pour raliser un menu ractif graphique. La base de dpart est un menu vertical simple, sans spcication de marges basses ou hautes pour les lments <li>. Vous devez au pralable crer deux images qui serviront par la suite au rollover. Pour transformer le menu constitu de texte simple en un menu avec un texte et une image, vous allez ajouter une image darrire-plan pour chaque item du menu. Le changement daspect de limage au survol du curseur de la souris sera obtenu en modiant cette image darrire-plan. Pour raliser cela, vous devrez placer limage darrire-plan dans llment <a>, lment de type en ligne pour lequel il est impossible de spcier une taille. Vous devrez donc ensuite le transformer en lment de type bloc an de pouvoir lui attribuer une taille et une image darrire-plan. 1. Crez ou ditez le style #menu a. 2. Dans la fentre Dnition des rgles de CSS, slectionnez la catgorie Bloc et choisissez block dans la liste droulante Display. Llment <a> est prsent considr comme un bloc et vous pouvez lui attribuer une taille. 3. Pour cela, choisissez la catgorie Bote et spciez une hauteur (height) et une largeur (width) pour le bloc. Cette taille correspond gnralement la taille de limage qui sera place en arrire-plan. Indiquez ventuellement une marge pour espacer les lments et/ou un padding pour ajuster les textes dans leurs botes. Si vous ajoutez un padding, noubliez pas de retrancher sa valeur celle de la taille du bloc. 4. Cliquez sur la catgorie Arrire-plan, slectionnez limage darrire-plan et indiquez pas de rptition dans la liste droulante Rptition. Cliquez sur OK pour valider vos choix.
293
Modiez galement style #menu a:hover. Dans la fentre Dnition des rgles de CSS, slectionnez la catgorie Arrire-plan, choisissez limage darrire-plan et indiquez norepeat dans la liste droulante Background-repeat. Une variante de cette mthode, trs souvent mise en uvre, consiste utiliser une mme image pour les deux aspects du menu ractif. Reportez-vous au chapitre 11 pour plus de dtails sur cette technique. La gure 12-5 prsente les deux aspects du menu ractif.
Figure 12-5
Les deux aspects du menu ractif graphique
La dernire tape consiste spcier laspect du menu au survol du curseur de la souris. Pour cela, choisissez la catgorie Arrire-plan dans la fentre Dnition des rgles de CSS et slectionnez limage comportant les deux aspects du rollover. Indiquez la valeur souhaite pour loption Background-position. La gure 12-6 prsente limage dcale de 35 pixels vers le haut, ce dcalage est donc ngatif.
Figure 12-6
Paramtrage de limage darrire-plan au survol du curseur de la souris
Menu horizontal
Pour transformer ce menu vertical en menu horizontal, vous pourriez modier les balises <li> en balises de type en ligne ce qui aurait pour consquence de placer les items, les images dans notre exemple, les uns ct des autres. Cette technique ne sera pas retenue ici car les balises <a> sont dj de type bloc et la ralisation du menu horizontal serait donc impossible. Cette technique peut nanmoins tre employe lorsquil ny a pas de contrainte de taille ou dimage de fond.
294
Dans le cas prsent, vous devrez modier le comportement de position de la balise <li> en lui attribuant un ottement gauche. 1. Crez une nouvelle rgle de CSS pour les balises <li> avec comme nom didentiant #menu li. 2. Dans la fentre Dnition des rgles de CSS, slectionnez la catgorie Bote et indiquez left dans la liste droulante Float. Spciez ventuellement des marges pour sparer les blocs. Cliquez sur OK pour valider.
Menu ractif avec une seule image
Pour raliser un menu ractif avec une seule image, vous devez au pralable crer une image comportant les deux aspects du menu.
Figure 12-7
Exemple dimage double utilise pour menu ractif
Dans la page HTML, insrez une balise <div> et saisissez les diffrents items du menu. Vous obtenez un code similaire celui-ci :
<div id="menu"><ul> <li><a id="m1" href="http://www.ici.fr">Item <li><a id="m2" href="http://www.ici.fr">Item <li><a id="m3" href="http://www.ici.fr">Item <li><a id="m4" href="http://www.ici.fr">Item </ul></div> 1</a></li> 2</a></li> 3</a></li> 4</a></li>
Une fois la liste cre, vous devez lui attribuer les diffrentes rgles de CSS que vous souhaitez appliquer au menu. Pour spcier laspect ractif du menu, placez limage double pralablement cre en arrire-plan de la balise <div id="menu">. Cette balise doit avoir la mme largeur que limage et une hauteur gale celle de limage divise par 2. Laspect du menu au survol du curseur de la souris est dtermin par la modication de la balise <a> avec la pseudo-classe :hover. Dans le cas prsent, vous devez placer en arrireplan de la balise <a> limage dans ltat survol. Ici, le problme est que, pour chacune des balises <a>, limage se positionnera par dfaut par rapport son bord haut et gauche. Toutes les balises <a> auront donc le mme aspect. Pour viter cela, vous devrez appliquer une rgle de CSS diffrente pour chacune des balises <a> et donc crer un identiant diffrent pour chacune delles (voir code ci-dessous). Pour chacune des rgles de CSS, vous devrez galement repositionner limage par rapport la position de la balise <a> survole. Les balises <a> ayant une taille de 160 pixels
295
de largeur, cest un multiple de cette taille que vous devrez retrancher pour repositionner correctement limage place en son arrire-plan. Le code suivant prsente les rgles de CSS obtenues :
<style type="text/css"> <! * { margin: 0px; padding: 0px; } #menu{ width:640px; height:40px; background: url(barre-bouton.jpg) no-repeat top; } ul { list-style-type: none; } a { display: block; height: 30px; width: 160px; text-decoration: none; padding-top:10px; } li { float: left; text-align:center; } #menu #m1:hover { background: url(barre-bouton.jpg); /*tous les hovers ont le changement dimage*/ background-position: 0 -40px; /*chaque lien a une position de background diffrente*/ } #menu #m2:hover { background: url(barre-bouton.jpg); background-position: -160px -40px; } #menu #m3:hover { background: url(barre-bouton.jpg); background-position:-320px -40px; } #menu #m4:hover { background: url(barre-bouton.jpg); background-position:-480px -40px; } --> </style>
296
Conclusion
Dreamweaver simplie et acclre la mise en uvre des listes en vous permettant de vous consacrer uniquement leur contenu. Vous naurez donc pas vrier si toutes les balises <li> sont bien fermes, par exemple. La modication des listes se ralise tout aussi simplement. Leur mise en forme est simplie par une catgorie particulire de la bote de dialogue des rgles de styles. La catgorie Liste permettant un accs simple et rapide des diffrents aspects des puces dune liste. La mise en forme des listes en tant que menu ncessite une connaissance plus approfondie des rgles de styles, mais sinscrit dans lapprentissage normal de la mise en forme avec les rgles CSS. Dreamweaver vous permettra dviter de nombreuses erreurs dcriture.
13
Pratique de la mise en page CSS
Ce chapitre prsente une synthse des diffrents types de mise en page CSS. Vous pouvez tlcharger les chiers source des exercices de ce chapitre depuis le site de lditeur. Cinq mises en page sont ici proposes et leurs ralisations sont commentes pas pas. Vous aborderez les points suivants : centrer une mise en page ; la mise en page de base ; la mise en page avec des lments ottants ; la mise en page liquide ; la mise en page lastique.
Centrer une mise en page

Cette premire mise en pratique est assez gnrale et vous permettra daborder les deux techniques pour raliser des mises en page centres sur la largeur et sur la hauteur. Ces deux types de centrage faisant appel des concepts diffrents, ils seront tudis sparment.
Centrer une mise en page horizontalement

Centrer une mise en page horizontalement est extrmement courant et ne pose, gnralement, aucun problme. Cette mthode, la plus classique, consiste dclarer des marges droite et gauche automatiques.
298
Figure 13-1
La bote de dialogue Insrer la balise div
1. En mode Cration, insrez sur la page une balise <div> en cliquant sur licne Insrer la balise div de la catgorie Commun du panneau Insertion. Slectionnez Au point dinsertion dans la liste droulante Insrer et saisissez un nom dans le champ ID. Cliquez ensuite sur le bouton Nouvelle rgle de CSS. 2. Dans la bote de dialogue Nouvelle rgle de CSS qui souvre alors, choisissez de placer cette rgle dans le document ou bien dans un document externe. Le choix ici importe peu. 3. Dans la fentre Dnition des rgles de CSS, slectionnez la catgorie Bote et attribuez une largeur (width) au bloc, faute de quoi vous ne pourrez pas le centrer par la suite. Spciez la valeur auto pour les marges gauche et droite (margin left et right).
Figure 13-2
Paramtrage de la catgorie Bote pour centrer le bloc
4. Slectionnez ensuite la catgorie Bloc et choisissez Centrer (center) dans la liste droulante Alignement du texte (text-align). Cela permettra Internet Explorer 5 de
Pratique de la mise en page CSS CHAPITRE 13
299
centrer votre page. Cette proprit centrera galement tous les textes de la page. Soyez donc vigilant si vous souhaitez des paragraphes aligns gauche ou droite. Dans ce cas, vous devrez le spcier dans lun des blocs enfants. 5. Normalement, la procdure est termine. An de vrier que vos paramtrages sont corrects, attribuez une couleur darrire-plan au bloc pour le matrialiser sur la page via la catgorie Arrire-plan. Cliquez sur OK pour valider vos choix.
Centrer une mise en page verticalement

Ce type de centrage est gnralement utilis pour les pages daccueil des sites. La procdure explique ici est valable, non seulement pour centrer verticalement un bloc, mais aussi pour centrer horizontalement un bloc plac en position absolue. Lusage du positionnement absolu pour un bloc contenant dautres blocs est parfois ncessaire pour que ses blocs enfants puissent se positionner eux aussi en absolu par rapport leur parent. Dans ce cas, la mthode dcrite ci-dessus et utilisant des marges automatiques ne pourrait pas tre applique. 1. En mode Cration, insrez sur la page une balise <div> en cliquant sur licne Insrer la balise div de la catgorie Mise en forme du panneau Insertion. Slectionnez Au point dinsertion dans la liste droulante Insrer et saisissez un nom dans le champ ID. Cliquez ensuite sur le bouton Nouveau style CSS. 2. Dans la bote de dialogue Nouvelle rgle de CSS qui souvre alors, choisissez de placer cette rgle dans le document ou bien dans un document externe. Le choix ici importe peu. 3. Dans la fentre Dnition des rgles de CSS, choisissez la catgorie Positionnement et attribuez une taille en largeur et en hauteur. Notez que ces deux proprits sont aussi prsentes dans la catgorie Bote. Slectionnez Absolute dans la liste droulante Position et spciez une valeur de 50% dans les champs Top et Left de la zone Placement.
Figure 13-3
Paramtrage du positionnement du bloc
300
Le bloc safche alors au centre de la page mais avec un retrait car il est positionn par rapport aux cts haut et gauche. Pour le replacer au centre du document, modiez ses marges et leur attribuant des valeurs ngatives gales la moiti de la largeur de la bote. Dans le cas prsent sur la gure 13-4, les marges gauche et haute de llment sont de 250 pixels.
Figure 13-4
Paramtrage du dcalage des marges
Mise en page de base

La mise en page que vous allez raliser est prsente en gure 13-5. Il sagit dune mise en page classique comportant une zone den-tte, une zone de menu, un contenu et un pied de page. La structure HTML de ce document est trs simple et sa mise en forme seffectue par une feuille de style. Pour raliser une telle mise en page, vous devez insrer dans la page, en mode Cration, quatre blocs <div>, les uns aprs les autres et portant des noms didentiant distincts. Linsertion de blocs <div> se ralise toujours de la mme manire, savoir en cliquant sur licne Insrer la balise div de la catgorie Mise en forme du panneau Insertion. Vous attribuerez chacun des blocs les noms didentiant suivants : entete, menu, contenu et pied. An de matrialiser facilement les lments, attribuez-leur une largeur (width) de 750 pixels et une couleur darrire-plan (background-color). Slectionnez ensuite les quatre blocs et cliquez sur licne Insrer la balise div an denvelopper la slection. Cette balise <div> aura pour identiant conteneur et englobera les quatre lments prcdents. Attribuez-lui une taille de 750 pixels. La gure 13-6 prsente le rsultat de cette mise en page en mode Fractionner.
301
Figure 13-5
Mise en page nale
Figure 13-6
La structure HTML de la page
302
Pour que tous les lments aient des marges et des valeurs de remplissage identiques, soit la valeur 0, cliquez sur licne Nouvelle rgle de CSS de la fentre Styles CSS pour crer un slecteur de type Compos ayant pour nom de slecteur le caractre *. Dans la fentre Dnition des rgles de CSS, choisissez la catgorie Bote et saisissez 0 dans les champs des zones Padding et Margin. Pour raliser la zone den-tte, commencez par remplacer le texte actuel par Montagne65 . ditez le style #entete et, dans la fentre Dnition des rgles de CSS, choisissez la catgorie Arrire-plan an de slectionner limage darrire-plan bandeauhaut.jpg. Cliquez ensuite sur la catgorie Bote et spciez une hauteur (height) de 150pixels. Validez. La mise en forme du texte se ralise aussi depuis le style nomm #entete. Pour cela, ditez le style et, dans la fentre Dnition des rgles de CSS, choisissez la catgorie Type. Slectionnez la police (font-family) Times, une taille (font-size) de 60pixels, une paisseur (font-weight) de 700pixels et la couleur (color) #FF9900. Cliquez ensuite sur le bouton Appliquer. Pour descendre le texte dans le bloc, vous allez spcier une valeur de Padding. Pour cela, choisissez la catgorie Bote et indiquez un Padding de 40pixels. Le titre descend et le bloc entier sagrandit. Cela est normal puisque le remplissage (padding) est compris dans la taille totale du bloc. Rduisez la hauteur (height) de 40 pixels pour obtenir 110 pixels. Vous pouvez aussi dcaler le texte vers la droite en utilisant un Padding de 20 pixels et en supprimant cette valeur de la largeur du bloc.
Figure 13-7
La zone den-tte termine
Notez que la zone den-tte que nous venons de raliser avec la balise <div> serait plus correcte avec la balise <h1> car il sagit bien ici dun titre de page. Vous pouvez, sans que cela entrane dautres modications, remplacer dans le code de la page la balise <div> par <h1> tout en conservant, videmment, le mme identiant. Cela est possible car ces deux balises sont de type bloc et parce que nous avons spci des marges (margin) et des valeurs de remplissage (padding) gales 0 pour toutes les balises de la page grce au slecteur *.
303
Pour commencer le menu, placez le curseur de la souris dans la zone #menu et saisissez les quatre items les uns en dessous des autres grce aux retours la ligne pour crer des paragraphes. Ne vous inquitez pas sil y a une modication de la mise en page, elle se rtablira par la suite. Slectionnez-les et transformez ces paragraphes en liste en cliquant sur licne Liste simple du panneau Proprits. Pour la ralisation du menu, reportez-vous aux sections Menu texte vertical et Menu texte horizontal du chapitre prcdent. Voici les diffrentes caractristiques du menu crer : catgorie Type, Font-family : Times ; catgorie Type, Font-size : 20 pixels ; catgorie Type, Color : #FF9900 ; couleur pour les liens au survol a:hover : #66CCFF ; espacement entre les items cr par la proprit Padding ; catgorie Bote, Padding-right : 60 pixels ; hauteur de la zone de menu dans la Catgorie Bote, height : 35 pixels. La couleur du menu est spcie en attribuant une couleur la zone #menu. Cette couleur est prleve sur limage de la zone #entete. La partie centrale est ralise avec du texte dj saisi et enregistr dans un chier texte. La mise en place des deux images ne prsente pas de difcult particulire. Dans Dreamweaver, ouvrez le chier latin.txt et copiez-collez son contenu dans la zone contenu de votre page. Slectionnez le texte et attribuez-lui le format Paragraphe depuis le panneau Proprits. Slectionnez les trois premiers mots et insrez un retour la ligne pour crer un nouveau paragraphe contenant uniquement ces trois mots. Depuis le panneau Proprits, attribuez ce nouveau paragraphe le format En-tte 2. Pour la suite de cet exercice, nous nommerons le paragraphe et son titre : titre du paragraphe. Vous allez prsent donner un nom didentiant au paragraphe. Pour cela, placez le curseur de la souris dans le paragraphe et cliquez sur la balise <p> en rapport dans le slecteur de balise du document.
Figure 13-8
Slection de la balise <p> dans le slecteur de balise
Slectionnez ensuite le menu Fentre>Inspecteur de balises. Dans longlet Attributs de cette fentre, choisissez la catgorie CSS/Accessibilit et saisissez p2 en regard du champ id. Appuyez sur la touche Entre pour valider.
304
Figure 13-9
Attribution dun nom didentiant depuis la fentre Inspecteur de balises
Cliquez ensuite sur licne Nouvelle rgle de CSS de la fentre Styles CSS. La bote de dialogue qui souvre alors propose par dfaut le slecteur nomm #conteneur #contenu #p2. Cliquez sur OK pour valider et, dans la fentre Dnition des rgles de CSS, spciez les proprits suivantes : catgorie Type, Font-family : Times ; catgorie Type, Font-size : 14 pixels ; catgorie Type, Color : #000033. catgorie Bloc, Text-align : justify ; catgorie Bote, Width : 600 pixels ; catgorie Bote, Margin Right et Left : auto ; catgorie Bote, Margin Top et Bottom : 20 pixels. Le texte est prsent justi et centr dans le bloc #contenu. Cliquez sur le titre du paragraphe et crez une nouvelle rgle de CSS. Choisissez les proprits suivantes : catgorie Type, Font-family : Times ; catgorie Type, Font-size : 24 pixels ; catgorie Type, Color : identique au fond du menu ; catgorie Bote, largeur du bloc (Width) : 600 pixels ; catgorie Bote, Margin Right et Left : auto ; catgorie Bote, Padding Top : 20 pixels.
305
Vous allez prsent placer les images. Pour cela, cliquez la n du paragraphe et ajoutez un retour la ligne pour crer un nouveau paragraphe. Insrez les deux images lune ct de lautre. Dans le slecteur de balise, slectionnez la balise <p> contenant les images.
Figure 13-10
Slection de la balise <p> contenant les deux images
Depuis la catgorie HTML de la fentre de Proprits, attribuez lidentiant p3 cette balise dans la zone ID et crez une nouvelle rgle de CSS dont les caractristiques seront les suivantes : catgorie Bote, Width : 600 pixels ; catgorie Bote, Margin Right et Left : auto ; catgorie Bote, Padding Bottom : 50 pixels. Pour espacer les deux images, crez un identiant pour limage de droite et attribuez-lui une valeur de Padding gauche (left) de 100 pixels. Pour terminer, spciez les proprits du pied de page. Pour cela, cliquez dans la zone de pied de page et crez une nouvelle rgle de CSS dont les caractristiques seront les suivantes : catgorie Bote, Height : 20 pixels ; catgorie Bote, Width : 750 pixels ; catgorie Arrire-plan, Background-color : #000066 ; catgorie Type, couleur du texte (color) : identique celle de len-tte ; catgorie Type, Font-size : 12 pixels. Vous centrerez lensemble de la composition grce des marges automatiques.
Mettre en page avec des lments ottants

La gure 13-11 prsente la mise en page raliser. Dans cet exemple, le menu est toujours plac gauche de la page. La structure de la page est identique celle de lexemple prcdent, aussi reportez-vous la section prcdente Mise en page de base pour sa ralisation. Les lments principaux constituant cette page porteront les mmes noms didentiant que ceux prsents la gure 13-6. La mise en forme se fera donc essentiellement avec les styles. La zone den-tte est la mme que pour la mise en page prcdente et la zone de menu comporte une liste de quatre items placs les uns au-dessous des autres. Reportez-vous la section Menu
306
texte vertical du chapitre prcdent pour sa ralisation. Lobjectif de cet exercice est de raliser une mise en page deux colonnes (voir gure 13-11).
Figure 13-11
Mise en page nale avec des lments ottants
Cette mise en page sera ralise avec des lments ottants dont lune des caractristiques est dautoriser les lments qui le suivent dans le ux se placer ct sils sont dots dune largeur. Le code ci-dessous prsente le code HTML et la feuille de style de dpart :
<body> <div id="conteneur"> <div id="entete">Montagne-65</div> <div id="menu"> <ul> <li><a href="#">Histoires</a></li> <li><a href="#">Randonnes</a></li>
307
<li><a href="#">Flore</a></li> <li><a href="#">Contactez-nous</a></li> </ul> </div> <div id="contenu">zone de contenu</div> <div id="pied">lment pied de page</div> </div> </body> <style type="text/css"> <!-* { margin: 0px; padding: 0px; } #conteneur { width: 750px; margin-right: auto; margin-left: auto; } #entete { background: #000066 url(images/bandeauht.jpg); width: 730px; height: 110px; font-family: "Times New Roman", Times, serif; font-size: 60px; color: #FF9900; font-weight: 700; padding-top: 40px; padding-left: 20px; } #menu ul { list-style-type: none; } #menu li { padding-right: 60px; font-family: "Times New Roman", Times, serif; font-size: 20px; } #conteneur #menu a { color: #FF9900; text-decoration: none; } #menu a:hover { color: #66CCFF; } --> </style>
Dans Dreamweaver, ouvrez le chier latin.txt et copiez-collez le texte quil contient dans la zone de contenu de votre page. Slectionnez-le et attribuez-lui le format Paragraphe
308
depuis le panneau Proprits. Insrez un retour la ligne aprs le mot dolor pour crer un nouveau paragraphe auquel vous affecterez le format En-tte 2. Vous allez prsent raliser le style du menu. Pour cela, cliquez dessus et crez une nouvelle rgle de CSS. Si Dreamweaver vous propose par dfaut le slecteur #conteneur #menu ul li a, supprimez ul li a pour obtenir un style attribu lensemble de la zone de menu : #conteneur #menu. Cliquez sur OK pour valider et, dans la fentre Dnition des rgles de CSS, spciez les proprits suivantes : catgorie Bote, Width : 200 pixels ; catgorie Bote, Height : 250 pixels ; catgorie Bote, Float : left.
Figure 13-12
La page aprs la cration du style de menu
Vous allez ensuite raliser le style pour la zone de contenu. Cette zone contient, pour linstant, le titre Lorem ipsum dolor et le paragraphe. Cliquez dans le paragraphe et crez une nouvelle rgle de CSS nomme #conteneur #contenu. ventuellement, supprimez le p. Dans la fentre Dnition des rgles de CSS, slectionnez la catgorie Bloc et justify dans la liste droulante text-align. Choisissez ensuite la catgorie Bote, indiquez une largeur (width) de 450 pixels et droite (right) dans la liste droulante Float.
309
De cette manire, tout le texte est contenu dans la largeur prcise et est plac sur la droite de la composition. Le bloc conteneur permet de bloquer la mise en page.
Figure 13-13
La zone de contenu avec son style et son ottement droite
Le style cr pour la zone de contenu a engendr une position errone du pied de page qui sest alors plac sur la gauche de la zone de contenu. Ce comportement est normal puisquun lment plac aprs un lment ottant entoure ce dernier. Pour corriger cela, attribuez au pied de page la proprit clear:both. Pour cela, cliquez lintrieur de la zone de pied de page et crez une nouvelle rgle de CSS. Dans la fentre Dnition des rgles de CSS, slectionnez la catgorie Bote et indiquez both dans la liste droulante clear. De cette manire, la zone de pied de page nest plus affecte par le ottement de la zone de contenu et se replace en bas de la composition. Pour amliorer laspect gnral de la zone de pied de page, slectionnez la catgorie Arrire-plan et indiquez comme couleur darrire-plan (background-color) le bleu fonc. Cliquez ensuite sur la catgorie Type et spciez le blanc comme couleur (color) du texte. Dans la catgorie Bloc, indiquez droite (right) dans la liste droulante Alignement du texte (text-align) et dans la catgorie Bote, 20 pixels dans le champ Droite (right) de la zone Remplissage (padding).
310
Pour terminer la composition de la page, attribuez enn un remplissage (padding) bas (bottom) de 40 pixels pour le style #menu li et un remplissage (padding) haut (top) de 20 pixels pour le style #menu ul. Vous pouvez aussi raliser un style pour len-tte de niveau 2 plac dans la zone de contenu. Une variante de la composition consiste insrer deux images aprs le bloc de contenu (voir gure 13-14). Pour cela, cliquez dans le paragraphe de la zone de contenu et slectionnez la balise div#contenu dans le slecteur de balise. Appuyez sur la che droite du clavier de manire sortir de llment <div#contenu>. Le curseur de la souris est prsent lextrieur de cette zone. Ajoutez un retour la ligne pour crer un nouveau paragraphe et insrez les deux images nommes image1.jpg et image2.jpg. Celles-ci se placent automatiquement sous le menu car la zone contenu est ottante droite, les lments qui la suivent se placent donc sur sa gauche.
Figure 13-14
La composition avec deux images places aprs la zone de contenu
311
Mise en page liquide

Une mise en page liquide sadapte la taille de la fentre du navigateur. La taille des lments peut tre prcise en pourcentage ou, le cas chant, non xe. Dans ce dernier cas, llment prendra automatiquement la largeur de son lment parent et sa hauteur dpendra de son contenu. Nous allons raliser la mise en page de la gure 13-15. Cette gure reprsente lun des aspects de la mise en page car la position des lments est diffrente suivant la taille de la fentre du navigateur.
Figure 13-15
Exemple de mise en page liquide
Le code HTML de la page de dpart est toujours le mme et correspond celui de la mise en page de base.
<body> <div id="conteneur"> <div id="entete">Montagne-65</div> <div id="menu"> <ul> <li><a href="#">Histoires</a></li> <li><a href="#">Randonnes</a></li> <li><a href="#">Flore</a></li> <li><a href="#">Contactez-nous</a></li> </ul> </div> <div id="contenu">contenu</div>
312
<div id="pied">Webmaster@montagne-65.com</div> </div> </body>
Vous allez crer la feuille de style qui permettra la mise en page. Pour cela, commencez par crire un style gnral qui permettra de supprimer toutes les marges et les remplissages de tous les blocs. Cliquez sur licne Nouvelle rgle de CSS de la fentre Styles CSS, slectionnez le slecteur Compos et attribuez-lui le nom didentiant *. Validez et, dans la fentre Dnition des rgles de CSS, choisissez la catgorie Bote. Indiquez la valeur 0 dans les champs des zones Padding et Margin. Crez ensuite un style pour le bloc #conteneur an de le centrer. Le centrage dun bloc nest possible que sil a une taille. Pour que la mise en page soit liquide, la largeur de cette zone sera dnie en pourcentage. Crez un style pour conteneur avec les proprits suivantes : margin-right et margin-left : auto et width : 60 %. Pour cette mise en page, une image darrire-plan dune largeur de quelque pixels et comportant deux couleurs a t ralise. La couleur de la partie suprieure de limage stend sur une hauteur de 50 pixels, celle de la partie infrieure sur une hauteur de 100 pixels. Crez une nouvelle rgle de CSS pour la balise <body> et attribuez-lui limage darrire-plan (background-image) nomme fd-entete.gif et spciez repeat-x dans la liste droulante background-repeat de la catgorie Arrire-plan. Vous allez prsent dnir la hauteur de la zone den-tte et celle du menu. Pour cela, cliquez dans la zone den-tte et crez une nouvelle rgle de CSS. Choisissez une hauteur (height) de 40 pixels et un remplissage (padding) de 10 pixels. Attribuez au texte les proprits suivantes : font-size : 24 pixels, font-family : Times et color : #000066. En HTML, le menu est ralis avec une liste <ul> place dans un bloc dont le nom didentiant est #menu. Cliquez dans le menu et crez une nouvelle rgle de CSS pour le slecteur nomm #conteneur #menu auquel vous attribuerez les proprits suivantes : catgorie Bote, Width : 190 pixels ; catgorie Bote, Height : 90 pixels ; catgorie Bote, Padding-top : 10 pixels ; catgorie Bote, Float : left. Pour supprimer les puces de liste du menu, cliquez sur lun de ses items et crez la nouvelle rgle de CSS #conteneur #menu ul. Dans la fentre Dnition des rgles de CSS, slectionnez la catgorie Liste et indiquez none dans la liste droulante list-style-type. Dans Dreamweaver, ouvrez le chier latin.txt. Copiez le texte quil contient et collez-le dans la zone de contenu de la page. Depuis le panneau Proprits, attribuez-lui le format Paragraphe. Le texte se place alors droite du menu car ce dernier est ottant gauche. Crez une nouvelle rgle de CSS pour le texte : #conteneur #contenu. Dans la fentre Dnition des rgles de CSS, spciez un alignement du texte justi (text-align: justify) et un remplissage (padding) bas (bottom) de 20 pixels.
313
Figure 13-16
Mise en page intermdiaire
Vous allez prsent incorporer les images places en haut de la zone de contenu. Pour cela, cliquez dans le texte et slectionnez la balise <p> dans le slecteur de balise. Appuyez sur la che gauche du clavier an de sortir de llment <p>. Ajoutez un retour la ligne pour crer un nouveau paragraphe et insrez les six images lune aprs lautre. Attribuez ensuite un identiant au paragraphe contenant les images. Pour cela, cliquez sur une image et slectionnez llment <p> dans le slecteur de balise. Dans la fentre Proprit, cliquez sur longlet HTML. Saisissez images en regard du champ ID. Crez ensuite deux rgles de CSS, lune pour la zone globale et lautre pour les images. Le style attribu la zone globale doit tre ralis car il permettra de dcaler les images qui passent sur les lignes infrieures. La gure 13-17 prsente ce dcalage. Pour raliser ce dcalage, attribuez la zone des images un remplissage de la largeur du menu. Ainsi, mme lorsquelles passeront sur les lignes infrieures, les images resteront alignes. Pour cela, cliquez sur lune des images et crez une nouvelle rgle de CSS #conteneur #images. Attribuez un remplissage (padding) gauche (left) de 200 pixels. Cette technique est possible car llment non ottant, suivant un lment ottant, passe sous ce dernier.
314
Figure 13-17
Les images coulent autour du menu.
Pour espacer les images, crez une nouvelle rgle de CSS #conteneur #images img et attribuez-lui une valeur de remplissage (padding) droite (droite) de 10 pixels et de remplissage (padding) bas (bottom) de 20 pixels. Pour raliser la mise en forme du pied de page, cliquez dans celui-ci et crez une nouvelle rgle de CSS pour laquelle vous spcierez les proprits suivantes : catgorie Bote, Height : 60 pixels ; catgorie Type, background-image : fd-pied.jpg ; catgorie Arrire-plan, background-repeat : repeat-x ; catgorie Arrire-plan, background-position(y) : bottom.
Mise en page lastique

Une mise en page lastique sagrandit proportionnellement la taille de la police. La taille des blocs sera dnie en em. Ainsi, les dimensions des blocs se rfreront la taille de la police du bloc ou la taille de la police de lun de ses blocs parents si aucune taille de police nest spcie lintrieur du bloc. La mise en page raliser est prsente en gure 13-18. Le code HTML de dpart est le mme que celui utilis pour la mise en page prcdente. Vous pouvez tlcharger le chier HTML de dpart sur le site de lditeur.
<body> <div id="conteneur"> <div id="entete">Montagne-65</div> <div id="menu">
315
<ul> <li><a href="#">Histoires</a></li> <li><a href="#">Randonnes</a></li> <li><a href="#">Flore</a></li> <li><a href="#">Contactez-nous</a></li> </ul> </div> <p id="images"><img src="images/image-1.jpg"/><img src="images/image-2.jpg" /> <img src="images/image-3.jpg" /><img src="images/image-4.jpg" /> <img src="images/image-5.jpg" /><img src="images/image-6.jpg" /></p> <div id="contenu">Contenu</div> <div id="pied">Webmaster@montagne-65.com</div> </div> </body>
Figure 13-18
Mise en page lastique
316
Pour travailler avec des units em, il est utile, mais pas indispensable, de dnir une taille pour les textes dans la balise <body>. Pour cela, crez une rgle CSS pour cette balise avec les proprits suivantes : police (font-family) : Times et taille (font-size): 80 %. Tous les autres blocs et textes y feront rfrence. Cette taille de 80 % se rfre la taille, par dfaut, des polices dans le navigateur. La taille du bloc conteneur sera exprime en em. Crez une nouvelle rgle CSS avec les proprits suivantes : taille (width) : 50 em ; marges droite (margin-right) et gauche (margin-left) : auto. La zone den-tte possde un texte dont la taille est dnie en em. La taille du bloc sera alors proportionnelle la taille du texte. Crez une nouvelle rgle de CSS pour #entete et attribuez-lui les proprits suivantes : catgorie Type, Font-size : 2 em ; catgorie Type, Color : #CCCCCC ; catgorie Arrire-plan, background-color : #333333 ; catgorie Bote, Height : 2 em ; catgorie Bote, padding-left : 3 em ; catgorie Bote, padding-top : 1 em. Avec ces diffrentes valeurs, le texte est dcal sur la droite et presque centr sur la hauteur. Essayez de modier la valeur de la taille du texte. Lensemble du bloc est alors modi. Le menu est ralis avec trois styles : un premier style pour le bloc contenant la liste, un deuxime style pour llment <ul> et un troisime style pour llment <li>. La largeur globale du bloc est de 50 em. Les proprits du bloc didentiant menu sont les suivantes : catgorie Bote, Width : 43 em ; catgorie Bote, Height : 3 em ; catgorie Bote, padding-top : 1 em ; catgorie Bote, padding-left : 7 em ; catgorie Arrire-plan, background-color : #CCCCCC. Les proprits de llment <ul> sont rduites la proprit Type spcie Aucune an de supprimer les puces de la liste. La balise <li> possde les proprits suivantes : catgorie Bloc, liste droulante Display : inline ; catgorie Type, font-size : 1,5 em ; catgorie Bloc, padding Left : 2 em pour espacer les items. La couleur du menu est donne par le style de la balise <a>. Dans le cas prsent, les images sont places les unes ct des autres. Elles sont incluses dans un bloc <p>. Pour que la mise en page reste cohrente lors dun changement de taille
317
des textes, la largeur et la hauteur des images seront dnies en em (7 em). La valeur de remplissage gauche (padding-left) sera de 1 em an despacer les images entre elles. Pour augmenter la valeur despacement des images en haut et en bas et centrer la composition, ajoutez un style pour le paragraphe contenant les images. Attribuez-lui des valeurs de padding-top de 2em et padding-bottom de 2 em et de 0,5 em pour la valeur de paddingleft. Le texte de contenu est justi et possde une valeur de padding-bottom de 2 em. Le pied de page une hauteur de 2 em, une couleur darrire-plan (background-color) gale #CCCCCC et une couleur (color) de texte gale #666666. La mise en page ainsi cre sagrandit lorsque lon utilise la commande daugmentation de la taille des textes dans le navigateur.
Conclusion
La pratique des mises en page simples est fondamentale. Nhsitez pas tester plusieurs fois les exemples prsents ici. Ils constituent aussi de bonnes bases pour un projet de site Internet.
Partie III
Fonctionnalits avances de Dreamweaver CS4
14
Les comportements JavaScript
Les comportements JavaScript permettent dintgrer rapidement de petites applications dans une page HTML, souvent ncessaires dans un site Web, et cela sans connatre les mthodes de programmation ni mme la syntaxe du langage JavaScript.
Principe des comportements

Pour rendre vos pages plus interactives, il est possible dintgrer des programmes JavaScript dans le code HTML an de crer des effets de survol dimage ou de dclencher louverture dune fentre pop-up, par exemple. Les comportements de Dreamweaver permettent de gnrer automatiquement des applications JavaScript usuelles de ce type. Pour cela, il vous sufra en gnral de paramtrer une bote de dialogue an de personnaliser rapidement lapplication interactive dsire. Ds que les paramtres dun comportement sont valids, un programme JavaScript est automatiquement ajout dans le code source de la page. La plupart de ces comportements sont accessibles depuis le panneau Comportements de la fentre Inspecteur de balises, mais nous verrons que certains dentre eux sont galement dans le panneau Insertion.
322
Fonctionnalits avances de Dreamweaver CS4 PARTIE III
Comportements JavaScript ou comportements de serveur Le principe des comportements JavaScript et des comportements de serveur est le mme. Dans les deux cas, des programmes sont automatiquement gnrs et insrs dans le code de la page (pour lun, il sagit de programmes JavaScript et pour lautre de programmes serveur comme PHP). Cependant, les comportements JavaScript sont des programmes JavaScript excuts ct client, donc dans le navigateur, et non du ct serveur comme cest le cas pour les comportements de serveur.
Les vnements et les actions

Les comportements sont constitus de deux composants distincts : Laction, qui est spcique chaque comportement (comme le remplacement dune image par une autre dans le cas dun rollover). Concrtement, cette action est matrialise par le programme JavaScript qui sera insr dans le code de la page an deffectuer la tche spcique du comportement. Lvnement, qui permet le dclenchement de laction (comme le survol dune zone spcique de la page par le curseur de la souris dans le cas dun rollover ou le chargement de la page elle-mme). Ces vnements sont dnis pour diffrents lments dune page (par exemple, les vnements onClick ou onMouseOver sont dnis pour des lments de lien, alors que lvnement onLoad est dni pour llment <body> ou <img> dune page). Il conviendra donc de choisir le type dvnement devant tre associ chaque action (voir tableau 14-2).
Tableau 14-1 Liste des principaux comportements et de leur action associe
Comportement
Afcher-Masquer les lments Appel JavaScript Atteindre lURL Changer la proprit Dnir image barre de navigation Dplacer llment PA Agrandissement/Rduction (Catgorie Effets) Apparition/Fondu (Catgorie Effets) craser (Catgorie Effets)
Action associe
Permet dafcher ou de masquer certains lments de la page. Appel dun programme JavaScript spcique ou dune fonction JavaScript pralablement dclare. Permet douvrir une page cible par une URL dans la fentre principale ou dans celle dun cadre spcique dans le cas de jeux de cadres. Permet de changer une proprit particulire dun lment ( border, color...). Permet de crer individuellement chaque lment dune barre de navigation partir dune image dj intgre dans la page active. Permet de grer le dplacement dlments par lutilisateur (pour crer des applications de puzzle, par exemple). Permet de raliser un effet dagrandissement ou de rduction en un point central dun lment PA de la page active. Permet de raliser un effet dapparition progressive ou de fondu dun lment PA de la page active. Permet de raliser un effet dagrandissement ou de rduction en un point situ dans un des coins dun lment PA de la page active.
Les comportements JavaScript CHAPITRE 14 Tableau 14-1 Liste des principaux comportements et de leur action associe (suite)
Comportement
Glisser (Catgorie Effets) Secouer (Catgorie Effets) Store (Catgorie Effets) Surlignage (Catgorie Effets) Menu de reroutage
323
Action associe
Permet de raliser un effet de dplacement dun lment PA de la page active an de la faire apparatre ou disparatre progressivement. Permet de raliser un effet simulant des secousses latrales dun lment PA de la page active. Permet de raliser un effet semblable celui dun store qui se baisse ou se lve sur un lment PA de la page active. Permet de raliser un effet de surlignage sur un lment PA de la page active. Permet de rediriger automatiquement le visiteur vers une URL (ou tout autre chier pouvant safcher dans le navigateur) slectionne dans un menu droulant. Action identique celle du menu de reroutage, mais avec une soumission manuelle par le biais dun bouton Aller. Permet dafcher une bote dalerte contenant un message ou/et des instructions JavaScript. Permet douvrir une nouvelle fentre dimensionne la demande. Permet de changer le chier source dun lment image. Permet de charger une liste dimages ds louverture de la page Web an dviter les temps dattente lis au chargement ponctuel dune image lorsque celle-ci doit tre manipule dans un autre compor tement. Permet de rinitialiser le chier source initial dun lment image. Ce comportement est frquemment coupl avec le comportement Permuter une image. Permet de remplacer le contenu dun champ texte de formulaire par un texte spcique. Permet de remplacer le contenu de la barre dtat par un texte spcique. Permet de remplacer le contenu dun cadre par un code HTML spcique. Permet de remplacer le contenu texte dun lment par un texte spcique. Permet de contrler la prsence et la nature des informations saisies dans les champs dun formulaire. Permet de vrier si un plug-in spcique est install sur le navigateur client. Permet de crer un lien en rollover (remplacement de limage initiale dun lien par une autre avec conguration de la page cible). Permet de crer rapidement une barre de navigation horizontale ou verticale complte.
Menu de reroutage Aller Message contextuel Ouvrir la fentre Navigateur Permuter une image Prcharger les images
Restaurer limage intervertie
Texte dun champ texte (Catgorie Texte) Texte de la barre dtat (Catgorie Texte) Texte du cadre (Catgorie Texte) Texte du conteneur (Catgorie Texte) Valider le formulaire Vrier le plug-in Image survole (depuis la barre Insertion) Barre de navigation (depuis la barre Insertion)
Dreamweaver propose dautres comportements supplmentaires. Vous pouvez vous les procurer ladresse ci-dessous sur le site Web dExchange : www.adobe.com/go/dreamweaver_exchange_fr.
324
Fonctionnalits avances de Dreamweaver CS4 PARTIE III Tableau 14-2 Liste des principaux vnements et de leur dclenchement associ
Evnement Dclenchement associ
Lorsque lutilisateur interrompt le chargement dune image (en cliquant sur le bouton Arrter du navigateur, par exemple). Lorsque llment associ perd le focus (si lutilisateur clique hors de llment, par exemple). Lorsque llment associ change de valeur (si lutilisateur slectionne une option dun menu droulant, par exemple). Lorsque lutilisateur clique sur llment associ. Lorsque lutilisateur double-clique sur llment associ. Lorsque lutilisateur donne le focus llment associ (si lutilisateur clique sur un champ de saisie de formulaire, par exemple). Lorsque lutilisateur appuie sur une touche du clavier. Lorsque lutilisateur maintient une touche du clavier enfonce. Lorsque lutilisateur relche une touche du clavier. Lorsque le navigateur charge la page en cours. Lorsque lutilisateur appuie sur le bouton de la sour is. Lorsque lutilisateur dplace le curseur de la sour is. Lorsque lutilisateur positionne le curseur de la sour is au-dessus de llment associ. Lorsque le curseur de la souris quitte la zone qui caractrise llment associ. Lorsque lutilisateur relche le bouton de la souris. Lorsque llment associ est dplac. Lorsque la fentre du navigateur (ou celle dun cadre) est redimensionne. Lorsque lutilisateur agit sur les barres de dlement du navigateur. Lorsque llment associ est slectionn (si lutilisateur met en surbr illance certains caractres dun texte, par exemple). Lorsque lutilisateur soumet un formulaire (en cliquant sur le bouton Envoyer, par exemple). Lorsque le navigateur quitte la page en cours.
onAbort onBlur * onChange onClick * onDblClick * onFocus * onKeyDown * onKeyPress * onKeyUp * onLoad * onMouseDown * onMouseMove * onMouseOut * onMouseOver * onMouseUp * onMove onReset onScroll onSelect onSubmit onUnload *
* Comportement support par les navigateurs compatibles HTML 4.01
Figure 14-1
Organisation des deux composants dun comportement Dreamweaver
Les comportements JavaScript CHAPITRE 14
325
Le panneau Comportements
Le panneau Comportements de la fentre Inspecteur de balises (Fentre>Comportements) permet dajouter un comportement une page en spciant une action (voir repre de la gure 14-2), puis lvnement qui dclenche cette action (voir repre de la gure 14-2). Voici les diffrentes options proposes par le panneau Comportement (inclus dans la fentre Inspecteur de balises, voir repre de la gure 14-2) : Les deux icnes Afcher les repres dnis et Afcher tous les vnements (voir repres et de la gure 14-2) permettent de contrler lafchage des vnements dans la fentre. Si vous cliquez sur licne Afcher les repres dnis, seuls les vnements dj congurs dans la page active safcheront dans la fentre. Si vous cliquez sur licne Afcher tous les vnements, tous les vnements disponibles, et ventuellement les comportements qui leur sont dj associs, safcheront dans la fentre. Licne Ajouter un comportement (voir repre de la gure 14-2) permet dafcher la liste des actions disponibles pouvant tre associes llment pralablement slectionn (les noms griss indiquent que laction nest pas disponible dans ce contexte). Si vous cliquez sur lune des options de cette liste, la bote de dialogue qui permettra la conguration de laction en rapport souvrira. Licne reprsentant le signe (voir le repre de la gure 14-2) permet de supprimer un comportement (donc laction et son vnement associ) dj congur. Avant de cliquer sur cette icne, vous devez au pralable slectionner le comportement supprimer dans la liste du panneau des comportements. Les icnes reprsentant respectivement une che noire vers le haut et une che noire vers le bas (voir repres et de la gure 14-2) permettent de changer lordre dexcution des comportements si plusieurs actions ont t attribues un mme vnement. Il est ainsi possible de modier lordre dexcution des diffrentes actions associes un mme vnement (par exemple, onClick), mais elles seront toujours regroupes selon les vnements auxquels elles sont associes.
Figure 14-2
Icnes du panneau Comportements de la fentre Inspecteur de balises
326
La plupart des comportements (voir tableau 14-2) sont rassembls dans le panneau Comportements de la fentre Inspecteur de balises. Il existe plus dune vingtaine dactions possibles, mais en fonction du contexte, certaines dentre elles ne seront pas toujours disponibles (leur nom sera alors gris). En effet, le fait quaucun lment pouvant tre associ une action ne soit prsent dans la page rendra laction concerne indisponible (par exemple, le comportement qui consiste permuter une image ne sera disponible que sil existe au moins une image dans la page concerne, voir repre de la gure 14-3). Chaque action disponible peut tre associe un lment spcique de la page (lien hypertexte, objet de formulaire, image) ou au document entier (balise <body>).
Renseignez les identiants des lments manipuler Dans certains cas, laction du comportement peut interagir avec dautres lments de la page (par exemple, dans le cas du comportement Permuter une image). Il est alors ncessaire que ces lments disposent dun identiant an que JavaScript puisse les manipuler. Il est donc conseill de renseigner les identiants des diffrents lments concerns laide du panneau Proprits avant de congurer vos comportements.
Figure 14-3
Le panneau Comportements et sa liste dactions standards
Une fois laction choisie et applique un lment de la page, vous pouvez lui associer un vnement de votre choix pour la dclencher ( noter que Dreamweaver slectionne
327
un vnement par dfaut ds la cration du comportement). Pour cela, slectionnez lvnement souhait dans la liste droulante situe gauche de laction dans le panneau Comportements (voir gure 14-4). Selon le type de navigateur, certains vnements ne pourront pas tre utiliss. Loption Afcher les vnements pour (voir repre de la gure 14-3) permet de choisir le type de navigateur sur lequel laction sera utilise et aura comme consquence dafcher une liste plus ou moins rduite des vnements correspondant au navigateur slectionn.
Figure 14-4
Liste des vnements pouvant tre associs une action (pour un navigateur compatible HTML 4.01)
Crer un comportement
Voici la procdure suivre pour crer un comportement. 1. Slectionnez llment de la page qui devra dclencher laction du comportement. Pour cela, vous pouvez le slectionner directement dans la page ou choisir la balise correspondante dans le slecteur de balise de la fentre Document. 2. Ouvrez le panneau Comportements (Fentre>Comportements ou Maj+F4) et cliquez sur licne Afcher les vnements dnis (voir repre de la gure 14-4) pour limiter la liste des vnements ceux qui sont dj attribus la balise slectionne.
328
Cliquez ensuite sur licne Ajouter un comportement, symbolise par le signe + (voir repre de la gure 14-3), pour afcher la liste des actions disponibles, puis choisissez laction dsire. 3. Paramtrez la bote de dialogue qui souvre alors an de personnaliser laction slectionne votre application, puis cliquez sur OK (ces botes de dialogue tant propres chaque action, reportez-vous au descriptif de laction concerne pour plus de dtails sur son paramtrage). Ds que laction est valide, laction apparat dans la liste du panneau Comportement et un vnement par dfaut lui est attribu. Vous pourrez modier cet vnement dclencheur par dfaut en droulant la liste des vnements situe gauche de son action dans la fentre Comportements (voir repres et de la gure 14-4).
Associer plusieurs comportements un mme lment Il est possible dassocier plusieurs comportements un mme lment dclencheur. Par exemple, pour un mme lment image, vous pourrez associer deux actions : lune sera dclenche au survol de limage par le curseur de la souris, lautre quand le curseur sortira de limage (cest le principe du rollover). Vous pouvez galement associer plusieurs actions un mme vnement pour un mme lment dclencheur. Vous devrez dans ce cas xer des priorits dexcution entre ces diffrents comportements en utilisant les icnes reprsentes par des ches noires dans le panneau Comportements (voir repres et de la gure 14-2).
Modier un comportement
Une fois congur, un comportement peut tre trs facilement modi si besoin. Voici la procdure suivre. 1. Slectionnez la balise de llment dclencheur dans la page active, puis ouvrez la fentre Comportements. Les comportements associs llment doivent alors safcher si loption Afcher les vnements dnis (voir repre de la gure 14-4) est active (selon le contexte, un ou plusieurs comportements pouvant tre associs un mme lment dclencheur). 2. Si vous dsirez modier le type dvnement du comportement, droulez les options du menu de la cellule de gauche du comportement concern (voir repre de la gure 14-4). Cliquez ensuite sur loption dsire dans le menu droulant des diffrents vnements disponibles. Le nouvel vnement doit alors remplacer lancien dans la fentre Comportements. 3. Si vous dsirez modier les paramtres de laction du comportement, double-cliquez sur le nom de laction dans la cellule de droite du comportement concern. La bote de dialogue de laction souvre alors. Modiez les paramtres dsirs et cliquez sur OK pour enregistrer la nouvelle conguration.
329
Supprimer un comportement
Voici la procdure suivre pour supprimer dnitivement un comportement. 1. Slectionnez llment dclencheur dans la page active, puis ouvrez la fentre Comportements an dafcher les comportements associs llment. 2. Reprez le comportement supprimer et cliquez sur le nom de laction de sorte slectionner toute la ligne. 3. Cliquez ensuite sur licne de suppression, symbolise par le signe (voir repre de la gure 14-4). Le comportement concern doit alors disparatre du panneau Comportements.
Blocage JavaScript Si vous utilisez Internet Explorer, il est possible quun message vous indiquant que les codes JavaScript sont bloqus apparaisse au-dessus du navigateur. Dans ce cas, il suft de cliquer sur la barre du message et de choisir loption Autoriser lexcution du contenu de la page.
Les comportements du panneau Comportements

Ajoutez des liens factices aux lments dclencheurs Dans certaines procdures prsentes dans cette section, nous slectionnerons directement llment dclencheur (les dclencheurs sont souvent des images ou des fragments de texte). Mme si cette mthode fonctionne avec la plupart des navigateurs rcents, vous pouvez amliorer la compatibilit de vos pages avec certains navigateurs anciens en crant une balise de lien factice en guise de balise parent de llment dclencheur et en lui associant ensuite le comportement JavaScript (et non plus directement limage ou au texte comme avant). Pour crer une balise de lien factice, vous pouvez saisir le caractre # la place de lURL (par exemple, <a href="#">), mais pour des raisons de compatibilit, l encore, il est conseill de faire un appel de fonction JavaScript sans fonction en saisissant le code javascript:; (attention ne pas oublier les deux-points (:) avant le point-virgule (;)) la place de lURL (par exemple, <a href= "javascript:;">). En pratique, si vous dsirez ajouter un lien factice JavaScript avec Dreamweaver en mode Cration, il suft de slectionner limage, puis de saisir javascript:; dans le champ Lien du panneau Proprits pour quun lien factice parent <a href="javascript:;"> soit automatiquement cr. Une fois la balise <a> ajoute, il sufra ensuite de la slectionner avec le slecteur de balise la place de celle de limage lors de lassociation du comportement (donc juste avant de cliquer sur licne Ajouter un comportement de la fentre Comportements, si vous vous rfrez aux diffrentes procdures de cette section).
Le comportement Afcher-Masquer les lments

Le comportement Afcher-Masquer les lments permet de contrler lafchage de tous les lments de la page active dont les identiants auront t pralablement renseigns.
330
Pour illustrer lusage de ce comportement, nous vous proposons de raliser un systme qui afchera le texte descriptif dune photo ds que celle-ci sera survole par le curseur de la souris (la page de cet exemple correspond au chier comportementAfficherMasquer.html des codes source du site Montagne-65). 1. Placez deux balises <div> gauche de la page et insrez une image dans chaque balise. 2. Ajoutez deux autres balises <div> droite des prcdentes et au mme niveau. Slectionnez-les et nommez-les an de renseigner leurs identiants (par exemple, info1 et info2). Insrez un texte informatif dans chaque balise en rapport avec limage situe sa gauche. 3. Slectionnez ensuite la premire image et cliquez sur licne Ajouter un comportement du panneau Comportements (voir repre de la gure 14-5). Choisissez laction Afcher-Masquer les lments. 4. Dans la bote de dialogue qui souvre alors, slectionnez llment info1, qui se trouve en bas de la liste des lments. Le texte de ce dernier devant tre visible lorsque le curseur de la souris survolera la premire image, cliquez sur le bouton Afcher (le mot afcher est alors ajout entre parenthses droite de llment concern, voir repre de la gure 14-5). Slectionnez ensuite llment info2 et cliquez cette fois sur le bouton Masquer de sorte quil ne soit pas visible. Cliquez ensuite sur OK (voir repre de la gure 14-5) pour enregistrer les paramtres de laction.
Figure 14-5
Conguration dun comportement Afcher-Masquer les lments dans Dreamweaver
5. An que les textes informatifs ne soient pas visibles ds le chargement de la page, vous devez encore modier la valeur initiale du style visibility des lments info1 et info2. Pour cela, slectionnez le menu Fentre>Elments PA et cliquez devant les lments info1 et info2 jusqu ce que licne reprsentant un il ferm safche
331
(voir gure 14-6). Aprs cette manipulation, les deux textes ne doivent plus tre visibles dans la page active.
Figure 14-6
Conguration de la valeur du style visibitity dans la fentre Elments PA de Dreamweaver
La conguration du systme est maintenant termine. Pour tester votre page dans le navigateur, appuyez sur la touche F12 du clavier (voir gure 14-7). Vriez que le texte informatif de la premire image safche correctement lorsque celle-ci est survole par le curseur de la souris et quil disparat si le curseur survole la seconde image (le second texte doit alors apparatre).
Figure 14-7
Test du comportement Afcher-Masquer les lments dans le navigateur
Si vous dsirez que le texte disparaisse ds que le curseur sort de limage, il suft dajouter un second comportement chacun des lments image qui servent de dclencheur.
332
Ces nouveaux comportements seront dclenchs par un vnement onMouseOut et ils seront aussi congurs avec des actions Afcher-Masquer les lments, mais, cette fois, les deux lments contenant les textes informatifs devront tre masqus. Dans cet exemple, les textes sont contenus dans des balises <div> places droite de limage laquelle elles sont associes, toutefois sachez que la dmarche restera la mme si vous dsirez superposer toutes les balises <div> des textes dans une mme zone dafchage an optimiser lespace de la page.
Le comportement Appel JavaScript

Le comportement Appel JavaScript permet dexcuter un petit programme JavaScript ou dappeler une fonction JavaScript dclare pralablement. Pour illustrer le fonctionnement de ce comportement, vous allez ajouter une page de votre choix un bouton dimpression qui appellera automatiquement la fentre dimpression de votre ordinateur (la page de cet exemple correspond au chier comportementAppelJS.html des codes source du site Montagne-65). 1. Ouvrez la page dans laquelle vous dsirez mettre en place le bouton dimpression et ajoutez une balise <div> an de positionner le bouton dans la page. Dans cette balise, insrez ensuite une image reprsentant, par exemple, une imprimante. 2. Slectionnez limage (voir repre de la gure 14-8) et ouvrez la fentre Comportements. Cliquez sur licne Ajouter un comportement (voir repre de la gure 14-8) et choisissez Appel JavaScript dans la liste propose. 3. Dans la bote de dialogue qui souvre alors, saisissez print(); dans le champ JavaScript an de dnir le programme JavaScript appeler (voir repre de la gure 14-8).
Figure 14-8
Conguration dun comportement Appel JavaScript dans Dreamweaver
333
4. Assurez-vous que lvnement associ par dfaut laction correspond vos attentes et cliquez sur OK (voir repre de la gure 14-8). Dans le cas contraire, cliquez sur le nom de lvnement afch gauche du comportement et slectionnez lvnement onClick (dclenchement de laction par un clic de souris) dans la liste. 5. Appuyez ensuite sur la touche F12 pour tester votre page dans le navigateur. Si vous cliquez sur le bouton du dclencheur, une fentre dimpression doit alors automatiquement souvrir et vous naurez plus qu valider les options pour lancer limpression de la page en cours (voir gure 14-9).
Figure 14-9
Test du comportement Appel JavaScript dans le navigateur
Le programme utilis dans cet exemple est trs simple, mais la mme procdure peut tre employe pour un programme plus complexe. Toutefois, si le programme devient trop compliqu, il est conseill de crer au pralable une fonction dans laquelle sera insr le programme et de remplacer les instructions saisies dans le champ JavaScript par lappel de cette fonction (par exemple, imprimePage()). Pour crer rapidement une fonction dans Dreamweaver, cliquez sur licne Script de la catgorie Commun du panneau Insertion (voir repre de la gure 14-10). Saisissez ensuite le code de votre fonction dans le champ Contenu de la fentre Script (voir repre de la gure 14-10), puis cliquez sur le bouton OK pour valider votre saisie (voir repre de la gure 14-10).
Le comportement Atteindre lURL

Pour crer un lien hypertexte, nous slectionnons habituellement le texte (ou limage) qui servira de lien et paramtrons lURL cible laide du panneau Proprits (champ Lien). La cration de ce lien HTML a lavantage dtre trs simple mettre en uvre mais dans certains cas, il sera ncessaire de faire appel un programme JavaScript (et donc aux comportements).
334
Figure 14-10
Cration dun programme JavaScript dans Dreamweaver
En effet, si vous dsirez modier le contenu de plusieurs cadres la fois dans une structure de jeu de cadres, un simple lien HTML sera insufsant et vous devrez alors utiliser le comportement Atteindre lURL. Pour illustrer lutilisation de ce comportement, nous vous proposons de crer un lien qui modiera les contenus de deux cadres en mme temps (les pages de cet exemple sont disponibles dans le dossier comportement-AtteindreUrl/ des codes source du site Montagne-65). 1. Crez un jeu de cadres compos de trois cadres diffrents : menu, droite et gauche. Notre objectif est de mettre en place un lien hypertexte dans la page HTML du cadre menu qui afchera la fois dans le cadre droite la page droite2.html, et dans le cadre gauche la page gauche2.html. 2. Saisissez le texte qui fera ofce de lien et slectionnez-le. Cliquez ensuite sur licne Ajouter un comportement du panneau Comportements (voir repre de la gure 14-11). Choisissez le comportement Atteindre lURL. 3. Dans la bote de dialogue qui souvre alors, choisissez le cadre droite (voir repre de la gure 14-11) et cliquez sur le bouton Parcourir pour slectionner la page droite2.html (ou saisissez manuellement son chemin dans le champ URL, voir repre de la gure 14-11). Procdez de la mme manire pour le cadre gauche qui doit tre modi simultanment (et pour tous les autres cadres si vous deviez en changer dautres avec le mme vnement), mais en choisissant cette fois la page gauche2.html. Une fois le paramtrage effectu, cliquez sur OK pour valider vos choix (voir repre de la gure 14-11). Le comportement doit alors apparatre dans la fentre Comportements. Son vnement par dfaut tant onClick, il nest pas ncessaire de modier ce paramtre pour notre exemple. 4. Testez ensuite le jeu de cadres en appuyant sur la touche F12. Si vous cliquez sur le lien associ au comportement Atteindre lURL, les cadres droite et gauche doivent alors tre modis simultanment.
335
Figure 14-11
Cration dun comportement Atteindre lURL dans Dreamweaver
Le comportement Changer la proprit

Le comportement Changer la proprit permet de modier la valeur de lune des proprits dun lment particulier de la page. Vous pourrez ainsi changer la couleur dun lment ou de son arrire-plan en fonction dun vnement spcique. Pour illustrer le fonctionnement de ce comportement, nous vous proposons de crer un systme qui permettra de changer la couleur darrire-plan dune zone de texte en cliquant sur des liens en rapport (la page de cet exemple correspond au chier comportementChangerPropriete.html des codes source du site Montagne-65). 1. Placez quatre balises <div> gauche de la page an de positionner les noms des couleurs sur lesquels nous allons cliquer pour changer la couleur du texte qui se trouvera droite de la page. Saisissez le nom de chaque couleur dans les diffrentes balises (par exemple, BLEU, ROUGE, VERT et JAUNE). Nommez successivement chaque balise <div> laide du panneau Proprits (par exemple, apDiv1, apDiv2, apDiv3 et apDiv4). 2. Insrez une autre balise <div>, droite de la page, dans laquelle vous saisirez un texte de votre choix dune dizaine de lignes. Nommez cette balise laide du panneau Proprits (par exemple, apDiv5). Par dfaut, attribuez le blanc comme couleur darrire-plan pour cette zone de texte (attribut background-color de la balise <div>) laide de la fentre Styles CSS. 3. Slectionnez ensuite llment apDiv1 et ouvrez la fentre Comportements. Cliquez sur licne Ajouter un comportement (voir repre de la gure 14-12) et choisissez Changer la proprit dans la liste propose.
336
Figure 14-12
Conguration dun comportement Changer la proprit dans Dreamweaver
4. Dans la bote de dialogue qui souvre alors, vous constatez que DIV est indiqu par dfaut dans la liste droulante Type dlment (si ce nest pas le cas, slectionnez cette option). 5. Dans la liste droulante ID dlment, choisissez lidentiant de la zone sur laquelle nous dsirons modier une proprit, soit apDiv5 pour notre exemple (voir repre de la gure 14-12). 6. Cochez ensuite loption Slectionner et choisissez backgroundColor (voir repre de la gure 14-12). 7. Enn, dans le champ Nouvelle valeur (voir repre de la gure 14-12), saisissez la couleur que vous dsirez affecter cette proprit lorsque lvnement se produira (blue pour notre exemple). noter que nous avons choisi ici une couleur standard de la palette normalise, mais nous pourrions aussi utiliser le code hexadcimal de la couleur si nous voulions appliquer une couleur bien prcise (dans ce cas, il faudrait par exemple saisir #66FFFF). 8. Cliquez sur OK pour valider vos choix (voir repre de la gure 14-12). Le nouveau comportement doit alors apparatre dans la fentre Comportements. Lvnement onClick tant slectionn par dfaut, nous naurons pas paramtrer cette information car nous dsirons que laction du comportement soit dclenche par un simple clic de souris sur llment concern. 9. Procdez de la mme manire pour les trois autres balises de slection (apDiv2, apDiv3 et apDiv4), mais en personnalisant chaque comportement avec une couleur en rapport avec le texte plac dans la balise concerne (pour notre exemple, red, green et yellow). 10. Enregistrez votre page et testez-la dans le navigateur en appuyant sur la touche F12 de votre clavier. Si vous cliquez successivement sur lun des quatre liens pralablement congurs, la couleur du texte situ droite de la page doit alors changer en rapport.
337
Le comportement Dnir image barre de navigation

Le comportement Dnir image barre de navigation permet de crer une barre de navigation en transformant individuellement chaque image la constituant en un bouton plusieurs tats. La bote de dialogue de ce comportement est compose de deux onglets. Longlet Elmentaire permet de paramtrer les diffrentes images correspondant aux quatre tats possibles dun lment de la barre de navigation (champs Image Haut, Image Dessus, Image Abaisse et Image Au-dessus lorsque Abaisse, voir tableau 14-3 pour plus de dtails). Cet onglet permet galement de congurer la page cible qui sera afche en cliquant sur le bouton et ventuellement la fentre dans laquelle elle devra souvrir. Longlet Avanc permet de contrler laspect des autres images de la page active en fonction de ltat du bouton auquel va tre appliqu le comportement. noter que, par dfaut, (donc si longlet Avanc nest pas congur), un clic sur le bouton entrane automatiquement la restauration des autres images dans leur tat initial. Lintrt de cet onglet est donc de pouvoir modier ce fonctionnement par dfaut en forant lafchage dimages diffrentes de celle par dfaut ou en programmant de nouvelles rgles pour les autres tats du bouton.
Le comportement Barre de navigation Pour crer plus rapidement une barre de navigation complte, il sera alors plus avantageux dutiliser le comportement Barre de navigation, accessible depuis le panneau Insertion.
Tableau 14-3 Les quatre tats dun lment dune barre de navigation
tat
Image Haut Image Dessus Image Abaisse Image Au-dessus lorsque Abaisse
Description
Image initialement afche par dfaut. Image qui safche lorsque le curseur de la souris survole limage. Image qui safche lorsque lutilisateur clique sur llment. Image qui safche lorsque le curseur de la souris survole limage sur laquelle lutilisateur a dj cliqu.
Pour illustrer le fonctionnement de ce comportement, nous vous proposons de crer un menu compos de quatre rubriques semblable celui que vous avez dj cr laide des rgles de CSS (la page de cet exemple correspond au chier comportementBarreNavigation.html des codes source du site Montagne-65). 1. Avant de raliser la barre de navigation, vous devez au pralable crer une srie dimages compose des quatre dclinaisons de limage initiale pour chacun des quatre lments du menu. Pour cela, crez 16 images de taille identique que vous nommerez : btA1.jpg, btA2.jpg, btA3.jpg, btA4.jpg, btB1.jpg, , btC3.jpg, btC4.jpg
338
(ces images sont disponibles dans le dossier /images/menu/ des chiers source du site Montagne-65). 2. Ouvrez la page contact.html pralablement cre et supprimez le menu en CSS actuel an de librer la place pour la barre de navigation que nous allons crer. 3. Placez les quatre premires images (btA1.jpg, btB1.jpg, btC1.jpg et btD1.jpg) horizontalement dans lespace prcdemment libr puis slectionnez la premire image (voir repre de la gure 14-13). Cliquez ensuite sur licne Ajouter un comportement du panneau Comportements et slectionnez Dnir image barre de navigation (voir repre de la gure 14-13). 4. Dans la bote de dialogue qui souvre alors, cliquez sur longlet Elmentaire, puis sur le bouton Parcourir du champ Image Dessus, an de slectionner la premire dclinaison de limage Haut nomme btA2.jpg. Procdez de la mme manire pour les autres tats (Image Abaisse et Image Au-dessus lorsque Abaisse, voir repres et de la gure 14-13). Renseignez ensuite le texte secondaire et la page cible qui sera appele lorsque lutilisateur cliquera sur ce premier lment de la barre de navigation. En bas de la bote de dialogue, deux options sont proposes. La premire permet de prcharger les images an dviter dattendre leur chargement lors dun changement dtat de llment de la barre de navigation (aussi, nous vous conseillons de toujours cocher cette case). La seconde permet dafcher limage Abaisse lors de louverture de la page. Il peut tre intressant dutiliser cette option si la page active correspond celle qui sera appele par cet lment de la barre de navigation an dindiquer lutilisateur dans quelle rubrique il se trouve. Pour notre exemple, nous navons pas congur les URL des lments et il est donc inutile dutiliser cette option, mais en pratique nous vous conseillons de lexploiter an damliorer lergonomie de votre menu. 5. La conguration de laction du comportement est termine. Cliquez sur OK pour valider vos choix (voir repre de la gure 14-13). Les trois comportements doivent alors apparatre dans la fentre Comportements (laction tant associe trois vnements diffrents : onClick, onMouseOver et onMouseOut). Par ailleurs, pour matrialiser le prchargement des images, un quatrime comportement doit tre ajout la balise <body> de la page active. 6. Reprenez les tapes 1 5 pour les trois autres lments images de la barre de navigation. Enregistrez votre page et appuyez sur la touche F12 pour la tester dans le navigateur.
Le comportement Dplacer llment PA

Le comportement Dplacer llment PA permet dautoriser et de contrler le dplacement dun lment PA, cest--dire en position absolue. Vous pourrez ainsi raliser facilement des puzzles ou toute autre application ncessitant des lments mobiles dans une page HTML.
339
Figure 14-13
Conguration dun comportement Dnir image barre de navigation dans Dreamweaver
Pour illustrer le fonctionnement de ce comportement, nous vous proposons de raliser un puzzle constitu de quatre pices (pour simplier la cration des pices du puzzle, nous dcouperons une image carre en quatre parties gales). Une image cible, de taille identique celle de limage reconstitue, sera aussi ralise an de guider lutilisateur dans la construction du puzzle (le trac des quatre pices est rappel sur limage cible). 1. Avant de raliser le puzzle, vous devez au pralable crer une srie dimages matrialisant les quatre pices du puzzle. Pour cela, dcoupez une image de votre choix en quatre parties et enregistrez chacune delles sous un nom diffrent (par exemple, a1.jpg, a2.jpg, a3.jpg et a4.jpg). Crez ensuite une autre image (par exemple, cible.jpg) de couleur unie et dont la taille sera identique celle de limage initiale avant quelle soit dcoupe (ces images sont disponibles dans le dossier /images/ puzzle/ du site Montagne-65). 2. Ouvrez une page HTML et enregistrez-la sous le nom comportement-DeplacerPA.html. 3. Slectionnez le menu Insertion>Objets mise en forme>div PA et tracez llment droite de la page laide de la souris. Modiez ses dimensions grce aux champs L et H du panneau Proprits an que la taille de llment soit identique celle de limage cible. Nommez cet lment cible et attribuez-lui la valeur 1 dans le champ Index Z de manire que les pices du puzzle puissent se superposer au-dessus. Slectionnez ensuite llment an dy insrer limage cible.jpg (menu Insertion>Image ou laide de la barre Insertion, onglet Commun, bouton Image).
340
4. Procdez de la mme manire pour crer quatre lments PA de mme taille que les pices du puzzle an dy insrer les quatre images dcoupes. Attribuez-leur un nom (par exemple, a1, a2, a3 et a4) ainsi que des valeurs diffrentes, et suprieures celle de llment cible, pour le champ Index Z (par exemple, 2, 3, 4 et 5). Positionnez (en utilisant la croix situe dans le coin haut gauche de llment PA) ensuite les quatre lments leur emplacement dnitif de manire reconstituer limage originale (aidez-vous des rgles de la fentre Document, voir gure 14-14).
Figure 14-14
Positionnement des lments PA sur la cible du puzzle
Une fois limage originale parfaitement reconstitue avec les quatre pices du puzzle, vous allez pouvoir associer chacun des lments le comportement Dplacer llment PA. 5. Vriez tout dabord quaucun lment PA nest slectionn (sinon le comportement Dplacer llment PA sera gris). Cliquez ensuite sur licne Ajouter un comportement du panneau Comportements et slectionnez Dplacer llment PA (voir repre de la gure 14-15). 6. Cliquez sur longlet Elmentaire de la bote de dialogue qui souvre alors (voir repre de la gure 14-15). Dans la liste droulante Elment PA, slectionnez llment PA contenant la premire pice du puzzle, soit a1 (voir repre de la gure 14-15). Choisissez Sans contrainte dans la liste droulante Mouvement car nous ne dsirons pas imposer de contrainte en ce qui concerne la zone autorise pour le dplacement des lments PA dans la mesure o il sagit dun puzzle. Si vous aviez voulu ajouter des contraintes de dplacement, pour simuler le dplacement dun store ou dun tiroir par exemple, il aurait fallu slectionner Contraint et renseigner les coordonnes de la zone. Loption Cible de dpt permet de dnir lendroit prcis o peut tre dpos llment. Pour la congurer, cliquez sur le bouton Obtenir la position courante car les lments sont actuellement positionns leur position cible (voir repre de la gure 14-15). La dnition de la cible est intressante car elle peut tre accompagne dun effet de magntisme dont nous pourrons rgler la distance minimale pour que leffet fonctionne dans le dernier champ de la bote de dialogue.
341
Figure 14-15
Conguration dun comportement Dplacer llment PA dans Dreamweaver (onglet Elmentaire)
Une fois le paramtrage effectu, cliquez sur OK pour valider vos choix (voir repre de la gure 14-15). Une nouvelle action couple un vnement onLoad doit alors apparatre dans la fentre Comportements. 7. Procdez de la mme manire pour paramtrer les autres lments PA des pices du puzzle. La dmarche sera identique pour chaque lment, il sufra simplement de slectionner un lment PA diffrent dans la liste droulante Elments PA, soit a2, a3 et a4 (voir repre de la gure 14-15). 8. Une fois les lments PA paramtrs, la page active doit comporter quatre actions Dplacer llment PA couples avec des vnements onLoad dans la fentre Comportements. Il ne vous reste plus qu positionner chaque lment PA correspondant aux pices de puzzle sur une position de dpart de votre choix. 9. Enregistrez votre page et testez-la dans le navigateur en appuyant sur la touche F12. Slectionnez la premire pice et dplacez-la dans la case qui vous semble correspondre (voir gure 14-16). Si lemplacement est correct, la pice sera prcisment positionne grce leffet de magntisme. Dans le cas contraire, essayez un autre emplacement. Dans cet exemple, nous navons pas eu utiliser longlet Avanc (voir gure 14-17). Il est cependant intressant de sattarder sur les options complmentaires quil permet de mettre en place dans le cas dapplications plus complexes. Liste droulante Poigne de dplacement Slectionnez Zone de llment pour rduire la possibilit daccroche de llment une zone dnie et non toute la surface de llment comme cest le cas si vous slectionnez Tout llment (valeur par dfaut).
342
Figure 14-16
Test dun comportement Dplacer llment PA dans le navigateur
Champ En dplaant Permet de grer le dplacement de llment au premier plan avec la possibilit de le conserver ou non lors du dpt sur la cible. Champs Appel JavaScript Permettent de dnir un code JavaScript (ou lappel un programme JavaScript pralablement dni, par exemple deplacement()) qui sera appel pendant le dplacement (En dplaant) ou au moment de la dpose (En dposant).
Figure 14-17
Conguration de longlet Avanc dun comportement Dplacer llment PA dans Dreamweaver
343
Les comportements de la catgorie Effets

Depuis la version CS3 de Dreamweaver de nouveaux effets permettent damliorer la prsentation visuelle dune page Web. Ces effets sont des comportements pouvant sappliquer un lment quelconque de la page et comme la plupart des comportements, ils seront excuts lors du changement dtat dun lment dclencheur (matrialis le plus souvent par une balise spcique de la page active). noter que ces nouveaux effets sont bass sur les outils Spry ce qui permet de ne pas avoir actualiser toute la page lors du dclenchement dun effet, seul llment cibl sera mis jour de manire dynamique. Vous pourrez ainsi souligner un texte, modier les proprits dopacit, dchelle, de position et de style dun lment (par exemple sa couleur darrire-plan), crer des transitions animes et de nombreux autres effets en les combinant entre eux (voir tableau 14-4).
Renseignez les identiants des lments manipuler Pour appliquer un effet un lment, il est ncessaire que ce dernier dispose dun identiant valide an que JavaScript puisse le manipuler. Si ce nest pas encore le cas, nous vous invitons le faire avant de commencer la cration du comportement. Tableau 14-4 Liste des principaux effets de Dreamweaver
Effet
Apparition/Fondu Surligner Glisser vers le haut ou vers le bas Agrandissement/Rduction Secouer Ecraser
Action associe
Permet de faire apparatre ou disparatre lentement un lment. Permet de modier la couleur darrire-plan dun lment. Permet de faire monter ou descendre un lment dans la page active. Permet daugmenter ou de diminuer la taille dun lment. Permet danimer llment en donnant limpression quil est secou de gauche droite. Permet de faire disparatre un lment dans le coin suprieur gauche de la page.
Pour illustrer lutilisation des effets, nous avons appliqu diffrents effets un texte et une image, regroups dans une seule et mme page. Vous pourrez ainsi rapidement dcouvrir les spcicits de chacun de ces comportements (la page de cet exemple correspond au chier comportement-Effets.html des codes source du site Montagne-65). 1. Avant de crer le comportement, nommez les identiants des lments cibles (qui seront manipuls) et des lments dclencheurs (sur lesquels nous allons agir pour dclencher leffet). Nous utiliserons deux lments cibles diffrents : un texte, dont lidentiant de sa balise conteneur sera monTexte, et une image dont lidentiant de sa balise conteneur sera monImage. noter quil est possible que llment cible soit aussi llment dclencheur. Dans ce cas, il sufra de choisir loption par dfaut Slection actuelle dans le champ Elment cible de la bote de dialogue du comportement.
344
2. Slectionnez llment dclencheur (voir repre de la gure 14-18) puis cliquez sur licne Ajouter un comportement du panneau Comportements (voir repre de la gure 14-18). Choisissez Effets>Agrandissement/Rduction dans la liste propose. 3. Dans la bote de dialogue qui souvre alors, slectionnez llment cible dans la liste droulante du mme nom (si llment dclencheur est aussi llment cible, choisissez Slection actuelle). 4. Congurez ensuite les autres proprits de la bote de dialogue selon leffet dsir (voir repre de la gure 14-18). Bien que les paramtres par dfaut conviennent dans la plupart des navigateurs, vous pouvez les modier souhait (nous vous conseillons de faire des essais dans le navigateur pour choisir les meilleurs paramtres). Loption Effet de bascule permet dalterner une fois sur deux les effets Agrandissement et Rduction chaque clic sur le mme lment dclencheur. Dans le cadre de notre exemple, cochez cette option. 6. Cliquez sur OK pour valider vos choix (voir repre de la gure 14-18) Une action couple avec un vnement onClick doit alors apparatre dans la fentre Comportements.
Figure 14-18
Conguration de leffet Agrandissement/Rduction avec loption Bascule
7. Procdez de la mme manire pour tester les autres effets disponibles. Vous pourrez alterner vos effets sur des cibles diffrentes (image ou texte) et combiner ventuellement certains effets entre eux en ajoutant plusieurs comportements au mme lment cible.
Interaction entre les effets Certains effets provoquant la disparition de llment cible peuvent perturber le fonctionnement dun autre effet appliqu au mme lment cible. Ainsi, par exemple, nous avons remarqu que si vous commencez par appliquer un effet Store remont faisant disparatre llment cible, leffet Store baiss sera ensuite inoprant (alors que si vous commencez par appliquer un effet Store baiss, leffet inverse fonctionnera sans problme).
345
Le chier SpryEffect.js Lorsque vous utilisez un effet, le code qui est ajout dans la page active fait appel un chier de bibliothque JavaScript externe nomm SpryEffects.js et plac dans le dossier /SpryAssets/. Il conviendra donc de transfrer ce dossier avec son chier sur votre site distant si vous dsirez que les effets safchent de la mme manire en ligne.
Le comportement Menu de reroutage

Le comportement Menu de reroutage est principalement utilis pour effectuer des modications sur un menu de reroutage pralablement insr dans la page grce licne Menu de reroutage de la catgorie Formulaires du panneau Insertion. Pour modier un menu de reroutage, slectionnez-le dans la page et cliquez sur licne Ajouter un comportement du panneau Comportements. Choisissez Menu de reroutage dans la liste propose. Pour ajouter un menu de reroutage, reportez-vous la section Les comportements du panneau Insertion , dans ce chapitre.
Le comportement Message contextuel

Le comportement Message contextuel permet de dclencher un message dalerte JavaScript avec le texte que vous aurez dni. Les fentres dalerte Java Script safchent au premier plan, en superposition de la page active et bloquent le navigateur tant que lutilisateur na pas cliqu sur le bouton OK de la fentre. Le texte dinformation qui apparatra dans la fentre peut tre un simple texte ou un texte auquel vous aurez ajout des instructions JavaScript, voire des appels de fonction. Pour incorporer une expression JavaScript au texte, placez-la entre accolades (par exemple, Nous sommes le {newDate()} afchera la date du jour la n du message). Pour illustrer le fonctionnement de ce comportement, nous allons crer un petit questionnaire demandant lutilisateur dindiquer quelle est lorchide des Pyrnes. Pour rpondre, lutilisateur devra cliquer sur lune des deux photos proposes. Un message dalerte afchera alors PERDU ou GAGNE en fonction de la bonne rponse attendue (la page de cet exemple correspond au chier comportement-MessageContextuel.html des codes source du site Montagne-65). 1. Placez deux balises <div> dans la page et insrez une image dans chacune delles. 2. Slectionnez la premire image (voir repre de la gure 14-19) et ouvrez la fentre Comportements. Cliquez sur licne Ajouter un comportement (voir repre de la gure 14-19) et choisissez Message contextuel dans la liste propose. 3. Dans le champ Message de la bote de dialogue qui souvre alors, saisissez le texte de votre message dalerte (pour notre exemple, saisissez GAGNE, voir repre de la gure 14-19). Validez ensuite votre choix en cliquant sur le bouton OK (voir repre de la gure 14-19), laction et son vnement doivent ensuite apparatre dans la fentre Comportements.
346
Figure 14-19
Conguration dun comportement Message contextuel dans Dreamweaver
4. Assurez-vous que lvnement associ par dfaut laction correspond vos attentes. Dans le cas contraire, cliquez sur le nom de lvnement afch gauche du comportement et slectionnez lvnement onClick (dclenchement de laction par un clic de souris) dans la liste. 5. Procdez de la mme manire pour la seconde balise en remplaant le texte du message dalerte par PERDU . 6. Testez la page dans le navigateur en appuyant sur la touche F12. Rpondez la question en cliquant sur limage qui vous semble correcte (voir repre de la gure 14-20). Une bote de dialogue doit alors souvrir et afcher un message diffrent selon que vous avez gagn ou perdu (voir repre de la gure 14-20). Cliquez ensuite sur OK pour fermer le message dalerte (voir repre de la gure 14-20).
Figure 14-20
Test du comportement Message contextuel dans le navigateur
347
Le comportement Ouvrir la fentre Navigateur

Le comportement Ouvrir la fentre Navigateur permet douvrir une page Web dans une nouvelle fentre dont vous pourrez paramtrer la taille, le nom et les attributs (option de redimensionnement, afchage de la barre de menus, etc.). Pour illustrer lutilisation de ce comportement, nous vous proposons de raliser un systme qui permettra dafcher des versions agrandies de quatre images dans une nouvelle fentre. Celle-ci sera congure pour sadapter exactement la taille de limage agrandie, sans autre attribut. 1. Avant de crer le comportement, prparez les quatre pages qui contiendront les images agrandies et qui seront appeles dans la nouvelle fentre. Pour cela, ouvrez une nouvelle page HTML et enregistrez-la sous le nom comportement-OuvrirFenetrePh1.html. Insrez la version agrandie de la premire image. Procdez de la mme manire pour les trois autres pages en changeant chaque fois le nom du chier et limage agrandie. 2. Ouvrez une nouvelle page HTML et insrez quatre balises <div> qui vous permettront de positionner les images dans la page. Enregistrez cette page sous le nom comportement-OuvrirFenetre.html dans le mme rpertoire que les quatre pages prcdentes.
Figure 14-21
Conguration dun comportement Ouvrir la fentre Navigateur dans Dreamweaver
3. Slectionnez ensuite llment dclencheur, soit la premire image (voir repre de la gure 14-21), puis cliquez sur licne Ajouter un comportement du panneau Comportements (voir repre de la gure 14-21). Choisissez Ouvrir la fentre Navigateur dans la liste propose. 4. Dans la bote de dialogue qui souvre alors, cliquez sur le bouton Parcourir du champ URL afcher (voir repre de la gure 14-21) et slectionnez la page comportement-OuvrirFenetrePh1.html.
348
5. Congurez ensuite les dimensions de la fentre en fonction de la taille de limage agrandie grce aux champs Largeur de fentre et Hauteur de fentre. Pour notre exemple, ne cochez aucun attribut de sorte que la fentre soit la plus simple possible. Pour nir, saisissez zoomPh1 dans le champ Nom de la fentre. 6. Le paramtrage de la premire action est termin. Cliquez sur OK pour valider vos choix (voir repre de la gure 14-21). Laction et son vnement onClick doivent alors apparatre dans la fentre Comportements. Procdez de la mme manire pour les trois autres images en conservant les mmes paramtres, mais en choisissant videmment la page en rapport avec limage et en nommant la fentre avec un nom diffrent chaque fois (par exemple, zoomPh2, zoomPh3 et zoomPh4). 7. Enregistrez la page et appuyez sur la touche F12 pour la tester dans le navigateur. Cliquez sur lune des images an douvrir la nouvelle fentre, laquelle doit se superposer la page actuelle et doit tre de la mme taille que limage agrandie (voir gure 14-22). Fermez cette fentre et testez les comportements des autres images de la mme manire.
Figure 14-22
Test du comportement Ouvrir la fentre Navigateur dans le navigateur
Le comportement Permuter une image

Le comportement Permuter une image permet de crer rapidement un systme dafchage dimages un endroit spcique de la page en fonction dun vnement dni (onClick, onMouseOver) associ un lment de cette mme page.
349
La bote de dialogue de ce comportement permet de gnrer automatiquement dautres comportements associs comme Restaurer limage intervertie ou Prcharger les images an damliorer les fonctionnalits de votre application et sa ractivit. Pour illustrer ce comportement, nous allons crer un systme de zoom sur image. Pour cela, une srie de quatre vignettes sera place gauche de la page et une zone de zoom sa droite. Lorsque lutilisateur survolera lune des quatre vignettes, sa version agrandie safchera dans la zone de droite (la page de cet exemple correspond au chier comportement-PermuterImage.html des codes source du site Montagne-65). 1. Placez quatre balises <div> gauche de la page an de positionner les vignettes des images. Insrez les images dans ces balises (une image par balise). Pour notre exemple, les images font 150 150 pixels. Nommez ensuite chaque vignette laide du panneau Proprits (par exemple, v1, v2, v3 et v4). 2. Placez une autre balise <div> droite de la page dans laquelle vous insrerez une image par dfaut dont la taille sera identique aux versions agrandies des vignettes (par exemple, une image de 325 325 pixels). Nommez ensuite cette image laide du panneau Proprits (par exemple, zoom).
Figure 14-23
Conguration dun comportement Permuter une image dans Dreamweaver
3. Slectionnez la premire vignette (voir repre de la gure 14-23) et ouvrez la fentre Comportements. Cliquez sur licne Ajouter un comportement (voir repre de la gure 14-23) et slectionnez Permuter une image. 4. Dans la bote de dialogue qui souvre alors, slectionnez limage dont lidentiant est zoom (voir repre de la gure 14-23) puis cliquez sur le bouton Parcourir pour choisir limage agrandie correspondant la vignette (voir repre de la gure 14-23). Loption Prcharger les images (voir repre de la gure 14-23) permet dassocier automatiquement llment body de la page un comportement qui permettra de prcharger automatiquement limage agrandie ds louverture de la page. Nous vous
350
conseillons de laisser cette case coche an dviter le temps dattente du chargement de limage agrandie lorsque lutilisateur passera sa souris sur la vignette (vous pourrez cependant accder ensuite ce comportement pour le modier dans cette mme fentre en slectionnant au pralable la balise <body> dans le slecteur de balise). Loption Restaurer les images onMouseOut (voir repre de la gure 14-23) permet dajouter automatiquement un comportement Restaurer les images (remplacement de limage agrandie par limage par dfaut) ds que la souris de lutilisateur sortira de la zone de la vignette. Si vous ne dsirez pas que limage par dfaut apparaisse chaque passage dune vignette lautre, dcochez cette option. 5. Cliquez sur OK pour valider vos choix (voir repre de la gure 14-23). Deux comportements doivent ensuite apparatre dans la fentre Comportements (si vous navez pas dcoch la case Recharger les images) : le comportement Restaurer limage et celui qui permettra de la permuter. Vous pouvez videmment modier les vnements associs chaque comportement, pour notre exemple, nous conserverons toutefois les comportements par dfaut (onMouseOver pour le comportement Permuter une image et onMouseOut pour le comportement Restaurer limage). 6. Procdez de la mme manire pour les trois autres vignettes en adaptant videment limage agrandie celle de la vignette concerne. 7. Enregistrez la page et testez-la dans le navigateur en appuyant sur la touche F12 (voir gure 14-24)
Figure 14-24
Test du systme de zoom dimage dans le navigateur
351
Le comportement Prcharger les images

Le comportement Prcharger les images permet de charger une image (ou une srie dimages) ds louverture de la page. Ainsi, vous viterez le temps de chargement de limage lorsquelle sera utilise avec un comportement tel que Permuter une image. Ce comportement est donc frquemment coupl avec dautres comportements qui manipulent des images. Pour ajouter ce comportement dune manire isole ou le modier une fois quil a t ajout par le biais dun autre comportement, il suft de slectionner la balise <body> dans le slecteur de balise du document (voir repre de la gure 14-25), puis de faire un double-clic sur laction Prcharger les images an douvrir une bote de dialogue en rapport (voir repre de la gure 14-25). Vous pourrez ainsi ajouter une nouvelle image au prchargement en la slectionnant laide du bouton Parcourir, puis en cliquant sur le bouton +. Pour supprimer une image, il faudra alors cliquer cette fois sur le bouton aprs lavoir slectionn au pralable dans la fentre de la bote de dialogue.
Figure 14-25
Modication dun comportement Prcharger les images dans Dreamweaver
Le comportement Restaurer limage

Le comportement Restaurer limage permet de rtablir limage initialement afche avant sa permutation. Il est donc trs souvent utilis en complment du comportement Permuter une image comme lillustre lexemple de la section Le comportement Permuter une image .
Les comportements de la catgorie Texte

Les comportements de la catgorie Texte permettent de remplacer du texte situ dans diffrents contenus (champ de formulaire, barre dtat, cadre ou balise conteneur) par un autre texte de votre choix.
352
Fonctionnalits avances de Dreamweaver CS4 PARTIE III Tableau 14-5 Liste des comportements de la catgorie Texte
Comportement
Texte dun champ texte Texte de la barre dtat Texte du cadre Texte du conteneur
Action associe
Permet de remplacer le contenu dun champ texte de formulaire par un texte spcique. Permet de remplacer le contenu de la barre dtat par un texte spcique. Permet de remplacer le contenu dun cadre par un code HTML spcique. Permet de remplacer le contenu texte dun lment par un texte spcique.
Pour illustrer lusage de lun de ces comportements, nous vous proposons de crer un systme qui afchera le chemin de la page courante ds que lon cliquera dans le conteneur dafchage (la page de cet exemple correspond au chier comportement-TexteConteneur.html des codes source du site Montagne-65). 1. Ouvrez une nouvelle page et enregistrez-la sous le nom comportement-Texte Conteneur.html. Insrez ensuite une balise conteneur dans la page. 2. Saisissez un texte de votre choix dans cette balise (pour notre exemple, Pour connatre le chemin de la page en cours, cliquez ICI ). Slectionnez la balise conteneur et cliquez sur licne Ajouter un comportement du panneau Comportements. Slectionnez Texte>Texte du conteneur dans la liste propose (voir repre de la gure 14-26).
Figure 14-26
Conguration dun comportement Texte>Texte du conteneur dans Dreamweaver
3. Dans la bote de dialogue qui souvre alors, la liste droulante Conteneur permet dattribuer laction un autre lment de la page. Pour notre exemple, nous dsirons remplacer le texte de llment dclencheur par un nouveau texte, aussi nous conserverons la valeur par dfaut du champ Conteneur (qui correspond lidentiant de llment dclencheur).
353
Saisissez le texte qui va remplacer le texte initial du conteneur dans le champ Nouveau HTML. Pour notre exemple, nous nallons pas nous contenter dutiliser un simple texte de remplacement car nous dsirons afcher le chemin de la page en cours en guise de rponse. Pour cela, nous allons devoir ajouter une variable JavaScript (window.location) qui afchera automatiquement le chemin de la page en cours. Pour quelle puisse tre insre dans le texte, cette variable devra tre encadre par des accolades (voir repre de la gure 14-26). 4. Cliquez ensuite sur OK pour valider vos choix. Ds la cration du comportement, une action Texte du conteneur couple avec une action onClick doit apparatre dans la fentre Comportements. 5. Enregistrez la page et appuyez sur la touche F12 pour la tester dans le navigateur. Cliquez sur le texte initial pour dclencher laction, celui-ci doit alors tre automatiquement remplac par le chemin de la page active (voir gure 14-27).
Figure 14-27
Test dun comportement Texte>Texte du conteneur dans le navigateur
Le comportement Valider le formulaire

Le comportement Valider le formulaire permet de tester le contenu de certains champs dun formulaire an de vrier si les valeurs saisies sont conformes au type de donnes attendues. On peut ainsi vrier si la valeur est saisie, si elle est de type numrique, si elle est comprise dans une fourchette spcique ou encore, dans le cas dun champ de courrier lectronique, si la syntaxe de ladresse est correcte. Le processus de vrication peut tre dclench par un vnement onBlur coupl avec chaque lment du formulaire si vous dsirez valider chacun des champs au cours de leur saisie, ou par un vnement onSubmit coupl llment formulaire pour une vrication globale lors de la soumission du formulaire.
354
Pour illustrer le fonctionnement de ce comportement, nous vous proposons de crer un systme de vrication du contenu des champs dun formulaire lors de sa soumission. Si lun des champs nest pas correct, un message derreur sera afch et le formulaire ne pourra pas tre envoy. 1. Ouvrez une nouvelle page et enregistrez-la sous le nom comportement-ValideForm.html. Insrez ensuite une balise conteneur dans la page. 2. Placez une zone de formulaire (menu Insertion>Formulaire> Formulaire) dans cette balise conteneur et slectionnez-la. Dans le panneau Proprits, spciez la mthode GET et indiquez lURL de la page active. Dans la zone de formulaire, placez un champ de saisie nomm nom, un autre champ nomm mail et un bouton de soumission. Slectionnez la balise de formulaire dans le slecteur de balise du document et cliquez sur licne Ajouter un comportement du panneau Comportements (voir repre de la gure 14-28). Choisissez Valider le formulaire dans la liste propose (voir repre de la gure 14-28).
Figure 14-28
Conguration dun comportement Valider le formulaire dans Dreamweaver
3. Dans la bote de dialogue qui souvre alors, slectionnez le champ nom dans le cadre Champs (voir repre de la gure 14-28) et cochez loption Obligatoire (voir repre de la gure 14-28). Pour ce premier champ, nous nimposerons pas de contrainte concernant le type de valeur saisie et nous conserverons loption par dfaut, Accepter Tout (voir repre de la gure 14-28). 4. Slectionnez prsent le champ mail (voir repre de la gure 14-28). Cochez loption Obligatoire pour contraindre lutilisateur saisir un e-mail (voir repre de la gure 14-28) et ainsi que loption Adresse lectronique (voir repre de la gure 14-28) pour vrier que la valeur saisie correspond bien la syntaxe dun e-mail (prsence de larobase et du point). Cliquez sur OK pour valider vos choix. Une action apparat alors dans la fentre Comportements, celle-ci doit tre couple avec un vnement onSubmit qui permettra de dclencher le comportement lors de la soumission du formulaire. 5. Enregistrez la page et appuyez sur la touche F12 pour la tester dans le navigateur. Cliquez sur le bouton de soumission sans rien saisir dans les champs. Un message
355
doit alors apparatre dans une bote dalerte JavaScript vous indiquant que les deux champs sont obligatoires. Saisissez votre nom dans le premier champ et renouvelez la soumission du formulaire, une nouvelle bote dalerte doit vous indiquer cette fois que le champ de ladresse e-mail est obligatoire. Saisissez des caractres quelconques dans le champ E-mail (par exemple, xxx) et appuyez une nouvelle fois sur le bouton de soumission. La bote de dialogue doit encore apparatre, mais, cette fois, avec un message vous indiquant que le champ E-mail doit contenir une adresse lectronique valide. Saisissez votre e-mail et soumettez une dernire fois le formulaire. Les valeurs saisies sont alors envoyes dans lURL et aucune bote dalerte napparat. Comme vous lavez certainement remarqu, les messages afchs dans la bote dalerte sont en anglais. Pour les traduire en franais, il suft de copier le message afch dans la bote dalerte lors de vos tests dans le navigateur, puis de le rechercher-remplacer dans la fentre Document en mode Code en prcisant videmment la traduction en franais que vous dsirez voir safcher la place. Renouvelez ensuite cette mme opration pour les diffrents messages que vous dsirez traduire. Comme nous lavons indiqu au dbut de cette section, il est galement possible de vrier la prsence et le type de contenu des champs un un. Il faudra alors crer un comportement spcique chaque champ et le coupler avec un vnement onBlur pour quil soit excut ds que le curseur sortira du champ concern.
Figure 14-29
Test dun comportement Valider le formulaire dans le navigateur
Le comportement Vrier le Plug-in

Le comportement Vrier le Plug-in permet de tester la prsence dun plug-in particulier sur le navigateur et de rediriger lutilisateur vers des pages spciques selon le rsultat du test. Une liste de plug-ins usuels est dj congure dans Dreamweaver (Flash, Shockwave, LiveAudio, QuickTime, Windows Media Player), mais il est aussi possible de prciser manuellement le plug-in tester. Pour illustrer lutilisation de ce comportement, nous vous proposons dajouter un test qui nous permettra de vrier la prsence du plug-in Flash sur une page. Si ce plug-in nest pas install dans le navigateur de lutilisateur, celui-ci sera rdirig vers la page de lditeur Adobe o il pourra le tlcharger. Si le plug-in est prsent, lutilisateur restera dans la page en cours.
356
1. Ouvrez une nouvelle page et enregistrez-la sous le nom comportement-Verifier Plugin.html. Ajoutez une animation Flash dans la page via le menu Insertion> Mdias>Flash (ou laide de la barre Insertion, onglet Commun, bouton Flash). 2. Slectionnez la balise <body> dans le slecteur de balises du document et cliquez sur licne Ajouter un comportement du panneau Comportements (voir repre de la gure 14-30). Choisissez Vrier le Plug-in dans la liste propose (voir repre de la gure 14-30).
Figure 14-30
Conguration dun comportement Vrier le Plug-in dans Dreamweaver
3. Dans la bote de dialogue qui souvre alors, slectionnez Flash dans le menu droulant Plug-in (voir repre de la gure 14-30). Nindiquez rien dans le champ Si trouv, aller lURL de faon que lutilisateur ne soit pas redirig et reste dans la page en cours si le plug-in est dj en place. Dans le champ sinon, aller lURL , saisissez ladresse de la page de tlchargement du plug-in Flash Player dAdobe : http://www.adobe.com/fr/products/flashplayer/ (voir repre de la gure 14-30). 4. Loption Toujours aller la premire URL si la dtection est impossible permet de forcer la redirection vers la premire URL dans le cas ou la dtection du plug-in nest pas possible par le navigateur (cette option concerne les anciennes versions de Internet Explorer pour lesquels la dtection est impossible). Si la dtection est impossible, lutilisateur sera par dfaut redirig vers la seconde URL. Selon le contexte, vous pourrez cocher/dcocher cette option. Pour notre exemple, elle doit tre coche (voir repre de la gure 14-30). 5. Cliquez sur OK pour valider et appuyez sur la touche F12 pour tester le fonctionnement du systme dans le navigateur (voir gure 14-31).
Internet Explorer sur Mac OS Ce comportement de dtection ne fonctionne pas avec le navigateur Internet Explorer sur Mac OS.
357
Figure 14-31
Test dun comportement Vrier le Plug-in dans le navigateur
Les comportements du panneau Insertion

La fentre Comportements nest pas le seul endroit o vous pouvez choisir un comportement. En effet, certaines icnes du panneau Insertion vous permettront galement daccder certains comportements avancs (constitus dun ensemble de comportements) remplissant une fonctionnalit courante comme la cration dune image survole ou dune barre de navigation.
Le comportement Image survole

Le comportement Image survole est certainement lun des plus utiliss de Dreamweaver. Il permet de raliser trs facilement un rollover. Dautres comportements, plus complexes, peuvent aussi sy substituer, comme le comportement Permuter une image (permet dinteragir sur toutes les images de la page et non uniquement sur limage qui sert de dclencheur) ou encore le comportement Dnir image barre de navigation (permet de grer quatre tats diffrents de llment dclencheur et non le simple survol). Notez cependant que, dans la majorit des cas, le comportement Image survole suft. Pour illustrer son fonctionnement, nous vous proposons de crer un menu compos de quatre rubriques, semblable celui que vous avez dj cr laide des rgles de CSS (la page de cet exemple correspond au chier comportement-SurvolerImage.html des codes source du site Montagne-65). 1. Avant de raliser le menu, prparez pour chaque comportement deux versions de mme taille de limage originale afche par dfaut (ces images sont disponibles dans le dossier /images/menu/ du site Montagne-65). 2. Ouvrez la page contact.html ralise pralablement et supprimez le menu en CSS actuel an de librer la place pour la barre de navigation que nous allons crer. Enregistrez la page sous le nom comportement-SurvolerImage.html.
358
Figure 14-32
Conguration dun comportement Image survole dans Dreamweaver
3. Placez le curseur de la souris lendroit o vous dsirez placer votre premire image survole, puis cliquez sur licne Images>Image survole de la catgorie Commun du panneau Insertion (voir repre de la gure 14-32). 4. Dans la bote de dialogue qui souvre alors, saisissez btA dans le champ Nom de limage, puis cliquez successivement sur les boutons Parcourir des champs Image originale et Image survole an de slectionner les deux versions de limage (voir repre de la gure 14-32). 5. Cochez loption Prcharger limage survole an damliorer la ractivit du systme et viter les temps dattente lorsque laction sera dclenche. 6. Indiquez ensuite un texte secondaire en rapport avec la page cible qui sera afch lorsque lafchage des images est dsactiv ainsi quau survol de limage dans une infobulle pour certains navigateurs. 7. Dans le champ Si cliqu, aller lURL, saisissez manuellement le chemin de la page cible ou cliquez sur le bouton Parcourir pour la slectionner dans les chiers du site. 8. Cliquez sur OK pour valider les paramtres de laction (voir repre de la gure 14-32). Ds la cration du comportement, limage originale doit prendre place lendroit prcdemment dtermin (voir repre de la gure 14-32) et deux comportements doivent apparatre automatiquement dans la fentre Comportements (voir repre de la gure 14-32). 9. Enregistrez la page et appuyez sur la touche F12 pour tester le fonctionnement de ce premier comportement Image survole dans le navigateur. 10. Procdez de la mme manire pour les autres lments survols que vous dsirez ajouter la page.
Le comportement Barre de navigation

Le comportement Barre de navigation permet de crer trs rapidement un menu horizontal ou vertical constitu de plusieurs lments images. Contrairement au comportement
359
Dnir image barre de navigation prsent prcdemment, le comportement Barre de navigation ne ncessite pas que les images des lments de la barre soient pralablement intgres dans la page active. Par ailleurs, il ne sera pas ncessaire de congurer une bote de dialogue diffrente pour chaque lment de la barre, la conguration complte de la barre pouvant tre effectue depuis une fentre unique de paramtrage. Pour illustrer le fonctionnement de ce comportement, nous vous proposons de crer un menu compos de quatre rubriques, semblable celui que vous avez cr laide des rgles de CSS. Pour commencer, vous programmerez une premire page modle nomme index.html. Vous dupliquerez ensuite cette page pour crer les quatre pages correspondant aux rubriques du menu : historiques.html, randonnees.html, flore.html et contact.html (les diffrentes pages de cet exemple se trouvent dans le dossier comportement-BarreMenu/ des codes source du site Montagne-65). 1. Avant de crer la barre de navigation, vous devez au pralable raliser une srie dimages constitue de versions diffrentes de limage initiale pour chacun des quatre lments du menu. Vous devez donc crer 16 images de tailles identiques que vous nommerez btA1.jpg, btA2.jpg, btA3.jpg, btA4.jpg, btB1.jpg, , btC3.jpg, btC4.jpg (voir repre de la gure 14-33) (ces images sont disponibles dans le dossier /images/ menu/ des chiers source du site Montagne-65). 2. Ouvrez la page contact.html pralablement cre et supprimez le menu en CSS actuel an de librer la place pour la barre de navigation que nous allons crer. Enregistrez la page sous le nom index.html dans un dossier spcique de votre choix (pour notre exemple, nous avons nomm ce dossier comportement-BarreMenu/, voir repre de la gure 14-33) 3. Placez le curseur de la souris lendroit o vous dsirez crer la barre de navigation (voir repre de la gure 14-33) et cliquez sur licne Images>Barre de navigation de la catgorie Commun de la barre Insertion (voir repre de la gure 14-33). 4. Dans la bote de dialogue qui souvre alors, saisissez btA dans le champ Nom dlment puis cliquez successivement sur les boutons Parcourir de chacun des quatre types dimages de llment an de slectionner les images correspondantes. 5. Indiquez le texte secondaire qui se substituera aux images si leur afchage est dsactiv ainsi quau survol de limage dans une infobulle pour certains navigateurs. Cliquez sur le bouton Parcourir du champ Si cliqu, aller lURL pour slectionner la page cible qui safchera lorsque lutilisateur cliquera sur llment. 6. Nous vous conseillons de toujours cocher loption Prcharger les images an dobtenir un systme ractif et dviter les temps dattente lors du changement dtat dun lment de la barre. 7. Cochez loption Montrer Image Abaisse initialement, uniquement si llment en cours de conguration cible la page active (par exemple, le premier lment btA ciblant la page historiques.html, vous devrez cocher cette option lorsque vous programmerez la page active du mme nom, sinon laissez la case dcoche). Pour notre exemple, nous avons opt pour crer une page qui servira de modle, nomme
360
index.html, et qui sera ensuite duplique, aussi nous vous conseillons de ne cocher
aucune des deux options pour les quatre lments (nous aurons loccasion de le faire lors la personnalisation des pages aprs leur duplication).
Figure 14-33
Conguration dun comportement Barre de navigation dans Dreamweaver
8. Vous venez de programmer le premier lment de la barre de navigation. Cliquez prsent sur le bouton + de la bote de dialogue Modier la barre de navigation an dajouter un nouvel lment et de le programmer en suivant la procdure explique prcdemment. Procdez de la mme manire pour les deux autres lments de la barre. 9. Une fois les quatre lments programms, deux options communes lensemble de la barre de navigation doivent tre congures en bas de la bote de dialogue. La premire permet de choisir si les lments de la barre devront tre disposs horizontalement ou verticalement (pour notre exemple, slectionnez Horizontalement). La seconde permet dindiquer si la structure de la barre de navigation devra utiliser des tableaux ou non (pour notre exemple, ne cochez pas cette option car nous prfrons viter dutiliser des tableaux pour la mise en page). 10. La conguration de laction est dsormais termine. Cliquez sur OK pour valider vos choix. La barre de navigation apparat alors lendroit pralablement dtermin (lendroit o tait plac lancien menu CSS). Enregistrez la page et testez-la dans le navigateur en appuyant sur la touche F12. Attention, les diffrentes pages des rubriques ntant pas encore cres, vous ne pourrez tester pour linstant que les effets de rollover. 11. Revenez dans Dreamweaver et ralisez une premire duplication de cette page en lenregistrant dans un premier temps sous le nom histoires.html (voir repre de la gure 14-33). Personnalisez le contenu de la page (changer le titre du texte, par exemple) et ouvrez le comportement Barre de navigation en cliquant nouveau sur licne correspondante de la barre Insertion (lors de cette opration, un message
361
dalerte doit vous avertir quune barre de navigation existe dj et vous demande si vous dsirez procder la modication de la barre existante, cliquez sur OK pour valider). 12. La conguration des quatre lments de la barre est identique pour les quatre pages des diffrentes rubriques, la seule modication que vous devez effectuer est de cocher loption Montrer Image Abaisse initialement (voir repre de la gure 14-34) aprs avoir slectionn llment qui cible la page active que vous tes en train de personnaliser. noter que pour accder la fentre Modier la barre de navigation (gure 14-34), il suft de cliquer une nouvelle fois sur licne Barre de navigation, une bote de dialogue vous informera alors quune barre de navigation est dj cre dans la page et vous invitera la modier. Par exemple, pour cette premire page historiques.html, vous devrez slectionner llment btA (voir repre de la gure 14-34), ciblant cette mme page, puis cocher loption. Nous vous rappelons que cette option permettra dafcher limage Abaisse correspondante la rubrique dans laquelle se trouve le visiteur. Validez ensuite la bote de dialogue pour enregistrer votre modication. Un quatrime comportement (avec cette fois avec un vnement onLoad) apparat alors dans la fentre Comportements.
Figure 14-34
Modication dun comportement Barre de navigation dans Dreamweaver
13. Rptez ces deux dernires tapes pour les pages des autres rubriques (randonnees.html, flore.html et contact.html), puis testez de nouveau votre systme dans le navigateur en appuyant sur la touche F12 depuis la page de votre choix. Le systme doit dsormais tre compltement oprationnel et vous devez pouvoir passer dune page lautre grce aux boutons du menu. Pour chaque page des quatre rubriques, llment correspondant la rubrique en cours doit tre mis en vidence (Image Abaisse afche) an de renseigner le visiteur.
Le comportement Menu de reroutage

Un menu de reroutage a lapparence dun menu droulant traditionnel la diffrence prs quil ne sera pas utilis dans un formulaire pour choisir une option, mais directement
362
dans la page, pour orienter le visiteur vers des pages du site ou des pages externes, tous types de chiers pouvant tre ouverts dans le navigateur (PDF, JPEG, etc.), ou encore vers des e-mails de contact (en mailto:). Pour illustrer une utilisation dun menu de reroutage, nous vous proposons de crer un systme de lien interactif vers des sites de partenaires. Pour cela, vous ajouterez un menu de reroutage en haut dune page et vous congurerez les options du menu pour que le visiteur puisse aller directement sur le site du partenaire ds quil aura fait son choix. 1. Placez deux balises <div> dans la page an de positionner un texte invitant visiter les sites de partenaires et le menu de reroutage. 2. Placez le curseur de la souris dans la seconde balise et cliquez sur licne Menu de reroutage de la catgorie Formulaires de la barre Insertion (voir repre de la gure 14-35). 3. Dans le champ Texte de la bote de dialogue qui souvre alors, saisissez Slectionnez un partenaire sans complter le champ de lURL (voir repre de la gure 14-35). Cliquez ensuite sur le bouton + (voir repre de la gure 14-35) pour ajouter un item supplmentaire. Compltez cette fois le champ Texte avec le nom du premier partenaire (pour notre exemple, ADOBE) et saisissez http://www.adobe.com dans le champ Si slectionn, aller lURL . Procdez de la mme manire pour les autres partenaires. 4. Une fois que la liste des items est complte, assurez-vous que lidentiant est bien renseign. Loption Ouvrir les URL dans pourra tre utilise pour dnir le cadre dans lequel devra souvrir la page cible mais pour notre exemple, conservez la valeur par dfaut. Loption Insrer bouton Aller devra tre congure uniquement si vous dsirez que la soumission de votre slection soit valide manuellement par un bouton Aller. Par dfaut, ds quune option du menu est slectionne, le chier cible est automatiquement appel. Enn, loption Slectionner le premier lment aprs le changement dURL permet de toujours rinitialiser le menu avec sa premire option. Ceci est intressant lorsquon a congur une invite en guise de premier item du menu, comme cest le cas pour notre exemple. Vous validerez donc cette option en la cochant.
Figure 14-35
Conguration dun comportement Menu de reroutage dans Dreamweaver
363
5. Cliquez sur OK pour valider vos choix. Ds la cration du comportement, une action Insrer un menu de reroutage couple avec un vnement onChange apparat dans la fentre Comportements. Le menu droulant apparat quant lui lendroit dtermin avant la cration du comportement (voir repre de la gure 14-35). 6. Enregistrez la page et appuyez sur la touche F12 pour la tester dans le navigateur. Par dfaut, le menu doit tre positionn sur linvite. Slectionnez alors le partenaire de votre choix. Ds la slection effectue, vous devez tre automatiquement redirig sur le site en rapport.
Conclusion
Les comportements de Dreamweaver permettent de gnrer automatiquement des programmes JavaScript qui ralisent de petites applications ct client. Lors de lintgration de la plupart des comportements, le script est ajout directement dans la balise <head> de la page, ce qui lui permet de rester autonome. En revanche, les nouveaux comportements des effets Spry sont inclus dans un chier externe : il conviendra donc de les transfrer sur le serveur distant en conservant la mme arborescence si vous dsirez que ces effets puissent continuer fonctionner en ligne.
Les widgets Spry CHAPITRE 15
365
15
Les widgets Spry
Grce aux techniques de mise en page CSS utilisant des listes couples des styles, il est possible de crer des lments de navigation trs interactifs. Lusage des widgets Spry de Dreamweaver facilite la mise en uvre de ces lments de navigation avancs. Ce chapitre se propose de vous apprendre crer ces menus contextuels de nouvelle gnration. Les widgets (ou gadgets) Spry permettent dajouter vos sites des lments dinterface enrichie, tels que des barres de menus droulants, des panneaux onglets, des zones rtractables, etc. Coupls des feuilles de style, ces lments seront ainsi facilement personnalisables ou adaptables la charte graphique de votre projet. Lutilisation des widgets Spry est proche de celle des comportements JavaScript dj prsents. Elle consiste simplement congurer une bote de dialogue qui gnrera ensuite le code ad hoc dans la page pour raliser la fonction dsire. La plupart des interventions se feront donc en mode Cration, mais, dans certains cas, il sera aussi possible de basculer en mode Code an de modier les programmes Spry de manire les adapter au contexte de votre application. Les widgets Spry sont accessibles depuis la catgorie Mise en forme de la barre Insertion. Ils sont facilement identiables grce au petit cercle rouge situ en bas droite de chacune des icnes correspondant aux diffrents lments de Dreamweaver utilisant la technologie Spry. noter que nous retrouverons aussi dautres applications utilisant cette technologie dans les onglets Formulaires (pour leur contrle) et Donnes. La catgorie Spry du panneau Insertion regroupe toutes les applications utilisant la technologie Spry. Voici un bref descriptif des widgets Spry de la catgorie Mise en forme du panneau Insertion (voir gure 15-1) : Widget Barre de menus Spry Permet dinsrer un menu de navigation droulant pouvant aller jusqu trois niveaux de choix (voir repre de la gure 15-1). Widget Panneaux onglet Spry Permet dinsrer un systme dafchage de diffrents contenus en cliquant sur un menu onglets (voir repre de la gure 15-1).
366
Figure 15-1
Widgets Spry de la catgorie Mise en forme de la barre Insertion
Widget Accordon Spry Permet dinsrer un systme compos de plusieurs panneaux rductibles qui souvrent lorsque quune barre horizontale est slectionne (voir repre de la gure 15-1). Widget Panneau rductible Spry Permet dinsrer un panneau rductible panneau unique (voir repre de la gure 15-1). Les sections suivantes prsentent en dtail ces diffrents widgets Spry.
Le Widget Barre de menus Spry

Pour illustrer lutilisation de la barre de menus Spry, nous vous proposons de crer un systme de navigation permettant dafcher diffrentes informations relatives une srie de eurs des montagnes. Lutilisateur pourra slectionner dans un menu droulant un ou deux niveaux (uniquement pour les Chardons) la che de la eur quil dsire consulter. Chaque che de eur comportera un titre (le nom de la eur), un descriptif (provisoire pour notre exemple) et une photo de la eur. 1. Ouvrez une nouvelle page HTML et enregistrez-la sous le nom widget-BarreMenu Spry-p1.html. 2. En utilisant une mise en page CSS, placez un premier conteneur destin accueillir la barre de menus Spry en haut de la page. De la mme manire, insrez sous ce premier conteneur les diffrents lments de la page (voir gure 15-2). 3. Placez ensuite le curseur de la souris dans le conteneur prvu pour accueillir le menu, ouvrez la catgorie Mise en forme (ou la catgorie Spry) et cliquez sur licne Barre de menus Spry (voir repres et de la gure 15-2). Dans la bote de dialogue
367
qui souvre alors, slectionnez la mise en forme Horizontale (voir repre de la gure 15-2), puis cliquez sur OK.
Figure 15-2
Cration du widget Barre de menus Spry
4. La barre de menus doit alors prendre place dans le conteneur prvu cet effet. Assurezvous que le widget menu est slectionn dans le panneau Proprits (voir si besoin lencadr ci-aprs ddi la slection dun widget). Choisissez le premier item du menu dans le premier cadre (correspondant au premier niveau du menu, voir repre de la gure 15-3) et modiez le contenu du champ Texte (voir repre de la gure 15-3) en remplaant le nom par dfaut par celui que vous dsirez voir apparatre dans le menu. Cliquez ensuite sur licne Rechercher le chier du champ Lien et slectionnez la page active (voir repres et de la gure 15-3). Cliquez sur OK pour valider vos choix.
Figure 15-3
Conguration du premier item de la Barre de menus Spry
368
Slection dun widget Une fois le widget insr dans la page, vous pourrez le slectionner de deux manires an daccder ses paramtres dans le panneau Proprits : En le survolant avec le curseur de la souris jusqu ce que ltiquette bleue du widget apparaisse dans le coin suprieur gauche. Vous naurez alors qu cliquer sur cette tiquette pour slectionner le Widget en rapport. En le cliquant et en slectionnant la balise en rapport dans le slecteur de balise (voir repre de la gure 15-3).
5. Dans cette premire rubrique du menu, nous ne dsirons pas avoir de sous-menus. Vous allez donc devoir paramtrer le widget pour y supprimer les sous-menus congurs par dfaut. Pour cela, le premier item toujours slectionn, choisissez le premier lment du deuxime cadre (Elment 1.1) et cliquez sur le signe situ en haut de ce cadre (voir repres et de la gure 15-4) an de le supprimer de la liste. Procdez de la mme manire pour les deux autres lments de ce cadre.
Figure 15-4
Suppression des items du menu de niveau 2 congurs par dfaut dans la barre de menus Spry
6. Slectionnez prsent le second item du premier cadre et modiez de la mme manire le contenu du champ Texte, mais en insrant cette fois le nom de la seconde eur, soit Laigrette pour notre exemple. Cliquez ensuite sur licne Rechercher le chier et slectionnez le nom du chier actuel. Modiez son nom en remplaant p1 par p2 (la page widget-BarreMenuSpry-p2.html, sera cre ultrieurement). 7. La conguration du troisime item est un peu diffrente car nous aurons cette fois deux dclinaisons dune mme eur, le Chardon bleu et le Chardon tige. Il conviendra donc dindiquer ces deux noms dans le cadre central correspondant aux items du menu de niveau 2 (voir repre gure 15-5). En ce qui concerne les pages lies chacune de ces deux dclinaisons, nous utiliserons cette fois les sufxes p3a et p3b, soit widget-BarreMenuSpry-p3a.html et widget-BarreMenuSpry-p3b.html, pour notre exemple (voir repre gure 15-5). 8. La procdure pour crer le quatrime du menu est identique celle employe pour le deuxime item, mis part que la eur sera une Orchide et que le sufxe de la page lie sera cette fois p4, soit widget-BarreMenuSpry-p4.html pour notre exemple.
369
Figure 15-5
Conguration du sous-menu du troisime item de la barre de menus Spry
9. Une fois la barre de menus entirement personnalise, enregistrez la page en cours, puis dclinez-la avec les diffrents sufxes (p2, p3a, p3b et p4) attribus selon les types de eurs en modiant chaque fois le titre, la photo et le descriptif de chaque page. Testez ensuite lensemble du systme dans le navigateur en appuyant sur la touche F12. noter que lors de lenregistrement de la page, la fentre Copier les chiers indpendants vous rappellera que le fonctionnement du widget ncessite la prsence sur votre serveur distant de plusieurs chiers de bibliothque externes. Il conviendra donc de penser les transfrer sur votre serveur distant dans le rpertoire /SpryAssets/ an que le widget puisse fonctionner en ligne.
Facilitez la maintenance avec les modles de Dreamweaver Si vous dsirez utiliser cette barre de navigation en production, nous vous conseillons de crer une page modle intgrant la barre de menus une fois congure en dnissant comme zones modiables les conteneurs de titre, du descriptif et de la photo. Ainsi, si par la suite vous dsirez ajouter un nouvel item au menu, les modications seront automatiquement rpercutes sur toutes les pages issues de ce modle (pour plus de dtails, reportez-vous au chapitre 16 ddi aux modles).
Modication des styles du widget Barre de menus Spry La procdure prsente dans cette section vous a montr comment congurer le widget pour que sa structure puisse rpondre vos attentes. Il est cependant possible daller plus loin dans la personnalisation du widget en changeant les couleurs darrire-plan, le style du texte des onglets, la taille des lments du menu ou encore la position des sous-menus. Pour cela, slectionnez le widget et cliquez sur le lien Personnaliser ce Widget dans le panneau Proprits. Vous aurez alors accs toutes les informations utiles pour modier votre convenance les styles du widget.
370
Le Widget Panneaux onglet Spry

Pour illustrer lutilisation des panneaux onglet Spry, nous proposons de crer un systme de navigation alternatif celui de la barre de menus prcdente. Lutilisateur pourra ainsi slectionner depuis un panneau onglet la che de la eur quil dsire consulter (le contenu de chaque che sera identique celui de la dmonstration prcdente). 1. Ouvrez une nouvelle page HTML et enregistrez-la sous le nom widget-Panneau Onglets.html. 2. En utilisant une mise en page CSS, insrez un premier conteneur destin accueillir le panneau onglet Spry en haut de la page. Placez ensuite le curseur de la souris lintrieur de ce conteneur et cliquez sur licne Panneaux onglet Spry de la catgorie Mise en forme du panneau Insertion (voir repre de la gure 15-6). 3. Un menu prcongur avec deux onglets apparat alors dans la page au point dinsertion. Assurez-vous que le widget est bien slectionn (revoir si besoin lencadr prcdent Slection dun widget ) et cliquez deux fois de suite sur le signe + du cadre Panneaux du panneau Proprits (voir repre de la gure 15-6) an dobtenir quatre panneaux au total (voir repre de la gure 15-6).
Figure 15-6
Conguration des onglets du panneau et de leur tiquette
4. Dans la fentre Document, slectionnez ltiquette du premier onglet avec son nom par dfaut (Onglet 1, Onglet 2) et renommez-la (pour notre exemple, nommez-la Orchide). Procdez de la mme manire pour renommer chaque tiquette avec les noms des eurs que vous dsirez afcher par la suite, soit Laigrette, Chardon et Oxalys (voir repre gure 15-6). 5. Slectionnez le texte provisoire Contenu1 situ sous le panneau et remplacez-le par le contenu que vous dsirez voir apparatre dans la che du premier onglet (si, toutefois, il nest pas possible de procder son remplacement en mode Cration, basculez en
371
mode Code et remplacez Contenu1 par le code source complet de la che, voir gure 15-7).
Figure 15-7
Remplacement du contenu dun panneau en mode Code
6. En mode Cration, survolez les onglets avec le curseur de la souris. Vous voyez alors apparatre un il droite de chaque onglet (voir repre de la gure 15-8). Si vous cliquez dessus, longlet devient gris et le contenu en rapport safche dans la fentre Document (voir repre de la gure 15-8). Comme vous pouvez maintenant accder au contenu provisoire de chaque onglet, il ne vous reste plus qu appliquer la mme procdure que celle utilise pour le premier onglet an de personnaliser les contenus de toutes les ches de eur.
Figure 15-8
Slection des contenus des diffrents panneaux onglet Spry
7. Une fois le contenu des quatre panneaux personnaliss, parcourez de nouveau les onglets en cliquant successivement sur chaque il. Si tout est correct, enregistrez la page et testez-la dans le navigateur en appuyant sur la touche F12.
372
noter que lors de lenregistrement de la page, la fentre Copier les chiers indpendants vous rappellera que le fonctionnement du widget ncessite la prsence de plusieurs chiers de bibliothque externes sur votre serveur distant. Il conviendra donc de penser les transfrer sur votre serveur distant dans le rpertoire /SpryAssets/ an que le widget puisse fonctionner en ligne.
Modication des styles du widget Panneaux onglet Spry La procdure prsente dans cette section vous a montr comment congurer le widget pour que sa structure puisse rpondre vos attentes. Il est cependant possible daller plus loin dans la personnalisation du widget en changeant les couleurs darrire-plan, le style du texte des onglets ou encore la largeur du panneau onglet. Pour cela, slectionnez sa balise dans le slecteur de balise et cliquez sur le lien Personnaliser ce widget dans le panneau Proprits. Vous aurez alors accs toutes les informations utiles pour modier votre convenance les styles du widget.
Le Widget Accordon Spry

Pour illustrer lemploi de ce widget, nous vous proposons de crer un systme de navigation alternatif celui de la barre de menus prcdente. Lutilisateur pourra ainsi slectionner depuis un ensemble de barres horizontales la che de la eur quil dsire consulter (le contenu de chaque che sera identique celui de la dmonstration prcdente). Lafchage seffectuera alors avec un effet accordon (dploiement ou repli vertical du panneau de contenu). 1. Ouvrez une nouvelle page HTML et enregistrez-la sous le nom widget-Accordeon.html. 2. En utilisant une mise en page CSS, insrez un premier conteneur destin accueillir le systme de navigation en accordon (augmenter ventuellement la hauteur et la largeur du conteneur selon lespace que vous dsirez utiliser pour afcher le contenu de chaque panneau). Placez ensuite le curseur de la souris lintrieur de ce conteneur et cliquez sur licne Accordon Spry de la catgorie Mise en forme du panneau Insertion (voir repre de la gure 15-9). 3. Par dfaut, Dreamweaver afche un systme de deux panneaux en accordon, ainsi que le contenu provisoire du panneau suprieur. Assurez-vous que le widget est bien slectionn (revoir si besoin lencadr prcdent Slection dun widget ) et cliquez deux fois de suite sur le signe + du cadre Panneaux an dajouter deux autres panneaux en accordon (voir repre de la gure 15-9). 4. Cliquez sur la premire tiquette du cadre Panneaux et slectionnez ensuite le texte de ltiquette correspondante dans la fentre Document en mode Cration. Remplacez-le par le nom de la premire eur, soit Orchide pour notre exemple. Procdez de la mme manire pour renommer chaque tiquette avec les noms des eurs que vous dsirez afcher par la suite, soit Laigrette, Chardon et Oxalys (voir gure 15-10).
373
Figure 15-9
Cration et conguration du nombre de panneaux dun widget Accordon Spry
Figure 15-10
Conguration du contenu dun widget Accordon Spry
374
5. Assurez-vous que la premire tiquette est toujours active dans le cadre Panneaux et slectionnez le texte du contenu provisoire dans le premier panneau de la fentre Document, soit Contenu1 (attention, si la couleur de fond est noire, vous risquez de ne pas voir ce texte en mode Cration). Remplacez-le par le contenu que vous souhaitez voir apparatre dans ce premier panneau (si toutefois, il nest pas possible de procder ce remplacement en mode Cration, basculez en mode Code et remplacez Contenu1 par le code source complet de la che concerne). 6. En mode Cration, survolez longlet du second panneau an de faire apparatre lil et cliquez dessus pour afcher le contenu du second panneau (voir repre de la gure 15-10). Slectionnez le texte provisoire Contenu2 et remplacez-le par le contenu de la seconde che. Procdez de la mme manire pour congurer les contenus des deux autres panneaux. 7. Enregistrez la page et testez-la dans le navigateur en appuyant sur la touche F12. noter que lors de lenregistrement de la page, la fentre Copier les chiers indpendants vous rappellera que le fonctionnement du widget ncessite la prsence de plusieurs chiers de bibliothque externes sur votre serveur distant. Il conviendra donc de penser les transfrer sur votre serveur distant dans le rpertoire /SpryAssets/ an que le widget puisse fonctionner en ligne.
Modication de lordre des panneaux Pour modier lordre des panneaux, slectionnez le widget, puis le panneau pour lequel vous souhaitez changer lordre dans le cadre Panneaux du panneau Proprits. Cliquez ensuite sur les ches situes en haut droite de ce cadre pour modier lordre dun panneau par rapport aux autres (voir repre de la gure 15-9).
Modication des styles du widget Accordon Spry La procdure prsente dans cette section vous a montr comment congurer le widget pour que sa structure puisse rpondre vos attentes. Il est cependant possible daller plus loin dans la personnalisation du widget en changeant les couleurs darrire-plan ou encore la largeur dun accordon. Pour cela, slectionnez le widget et cliquez sur le lien Personnaliser ce widget dans le panneau Proprits. Vous aurez alors accs toutes les informations utiles pour modier votre convenance les styles du widget.
Le Widget Panneau rductible Spry

Un widget Accordon Spry, prsent la section prcdente, comporte au minimum deux panneaux rductibles. Aussi, si vous dsirez mettre en uvre le mme type dinteractivit mais avec un seul panneau, vous devrez employer le widget Panneau rductible Spry. Pour illustrer lutilisation du panneau rductible Spry, nous vous proposons de crer un systme qui dploiera ou masquera le contenu de la che Chardon bleu.
375
1. Ouvrez une nouvelle page HTML et enregistrez-la sous le nom widget-Panneau Reductible.html. 2. En utilisant une mise en page CSS, insrez un premier conteneur destin accueillir le systme de navigation. Placez ensuite le curseur de la souris lintrieur de ce conteneur et cliquez sur licne Panneau rductible Spry de la catgorie Mise en forme du panneau Insertion (voir repre de la gure 15-11). 3. Slectionnez le texte de ltiquette de longlet du panneau dans la fentre Document en mode Cration et remplacez-le par le nom de la eur que lon dsire afcher, soit Chardon bleu. 4. Slectionnez ensuite le texte de contenu provisoire dans le panneau de la fentre Document (Contenu) et remplacez-le par le contenu de la che (si toutefois, il nest pas possible de procder ce remplacement en mode Cration, basculez en mode Code et remplacez Contenu par le code source complet de la che correspondante). 5. Dans le panneau Proprits du widget, il est aussi possible de congurer ltat du panneau lors du premier afchage (Ouvert ou Ferm) et de contrler louverture ou la fermeture du panneau en mode Cration (fonctionnalit alternative lutilisation de lil qui safche au survol du curseur, voir repre de la gure 15-11).
Figure 15-11
Conguration du widget Panneau rductible Spry
6. Enregistrez la page et testez-la dans le navigateur en appuyant sur la touche F12. noter que lors de lenregistrement de la page, la fentre Copier les chiers indpendants vous rappellera que le fonctionnement du widget ncessite la prsence de plusieurs chiers de bibliothque externes sur votre serveur distant. Il conviendra
376
donc de penser les transfrer sur votre serveur distant dans le rpertoire /SpryAssets/ an que le widget puisse fonctionner en ligne.
Modication des styles du widget Panneau rductible Spry La procdure prsente dans cette section vous a montr comment congurer le widget pour que sa structure puisse rpondre vos attentes. Il est cependant possible daller plus loin dans la personnalisation du widget en changeant les couleurs darrire-plan ou encore la largeur du panneau. Pour cela, slectionnez le widget et cliquez sur le lien Personnaliser ce widget dans le panneau Proprits. Vous aurez alors accs toutes les informations utiles pour modier votre convenance les styles du widget.
Conclusion
Les widgets Spry permettent dsormais de crer trs rapidement des applications avances sans pour autant matriser la programmation JavaScript. Toutefois, pour les personnaliser, il vous faudra bien connatre les CSS si vous souhaitez adapter leur dimension ou leur couleur leur environnement. Les scripts Spry des widgets tant insrs dans un ou plusieurs chiers externes, il convient de les transfrer sur le serveur distant pour que les widgets puissent fonctionner en ligne.
16
Bibliothque et modles
Dreamweaver CS4 vous sera dune trs grande aide pour crer des pages HTML et des feuilles de style. En effet, le logiciel peut sutiliser comme un simple diteur de code ou devenir un lment dterminant pour la gestion de production dun site. La fentre Actifs vous permettra damliorer le ux de production car elle afche tous les lments prsents dans le rpertoire et les sous-rpertoires du site. Les modles permettront aussi un gain de productivit lors de la cration de nombreuses pages ayant la mme structure. Dans ce chapitre, nous aborderons les points suivants : la fentre Actifs ; la bibliothque ; lutilisation des modles.
La fentre Actifs
La fentre Actifs souvre depuis le menu Fentre>Actifs. Elle contient tous les lments placs dans le rpertoire du site de la page HTML courante. Lusage de cette fentre peut faciliter lintgration dlments placs dans des sous-dossiers en vitant louverture de la fentre dinvite de recherche de chiers. Son usage est recommand pour tout projet prsentant une structure de rpertoires complexe.
Description
La fentre Actifs est compose dune srie dicnes places sur sa gauche et de deux boutons radios situs en haut de la fentre. Les diffrentes icnes proposes permettent daccder tous les documents du site. On considre quun document fait partie du site
378
ds lors quil est plac dans lun des rpertoires de la zone identie comme Site dans Dreamweaver. Les actifs prsents dans cette fentre correspondent donc tous les documents inclus ou non dans lune des pages dj cres. Les deux boutons radio permettent de visualiser, soit tous les documents du site des diffrentes catgories, soit uniquement les documents dclars comme favoris.
Figure 16-1
La fentre Actifs de Dreamweaver
Cliquez sur lune des icnes pour visualiser lensemble des documents de la catgorie placs dans tous les rpertoires du site. Voici un bref descriptif de ces icnes permettant daccder aux diffrentes catgories de documents : Icne Images Permet daccder aux images du site enregistres aux formats JPEG, GIF et PNG. Icne Couleurs Permet daccder aux couleurs dnies pour le site. Lusage de cette catgorie est trs utile et vite souvent la recherche et la rcriture dune couleur dj cre. Icne URL Permet daccder aux liens externes prsents dans le site sous les formats http, https, ftp, mailto, gopher et file. Les liens de type contact.html ne sont pas prsents. Icne Flash Permet daccder aux documents .swf du site. Les documents qui safchent sont aussi issus du logiciel Flash, mais galement des outils internes Dreamweaver permettant de crer notamment des boutons, des textes Flash ou des diaporamas.
Bibliothque et modles CHAPITRE 16
379
Icne Shockwave Permet daccder aux documents Shockwave issus du logiciel Director. Icne Films Permet daccder aux documents vido. Tous les types de vidos sont placs ici. Icne Scripts Permet daccder aux chiers JavaScript et VBScript externes. Il sera ainsi trs facile de crer un lien vers un document de ce type. Icne Modles Permet daccder aux modles du site. Icne Bibliothque Permet daccder aux chiers du site ayant t dnis ainsi. Il sagit, par exemple, des blocs de textes utiliss dans de nombreuses pages du site. La modication dun lment de bibliothque se rpercute sur lensemble des pages layant incorpor (voir section La bibliothque ).
Utiliser les Actifs

Cette section prsente les principales utilisations de la fentre Actifs.
Insrer une image ou un document SWF dans une page
1. Sur le document, en mode Cration ou Code, placez le curseur de la souris lendroit o vous souhaitez insrer limage ou le document SWF. 2. Ouvrez la fentre Actifs et cliquez sur licne Images. Slectionnez limage incorporer et cliquez sur le bouton Insrer situ en bas de la fentre (en mode Code, vous devrez ensuite cliquer sur le bouton Actualiser pour que linsertion de limage soit prise en compte). Si vous souhaitez insrer un document SWF, cliquez sur licne Flash et slectionnez le chier souhait. Dreamweaver insre tout le code ncessaire lincorporation du document. Une autre technique pour placer une image ou un document SWF dans une plage consiste slectionner le chier souhait dans la fentre Actifs et le faire glisser au point dinsertion dans la page.
Choisir une couleur
Deux cas peuvent se prsenter : vous souhaitez appliquer une couleur soit directement sur un texte soit sur une valeur de proprit de style. Voici la marche suivre pour appliquer une couleur directement sur un texte. 1. Slectionnez le texte et choisissez la couleur souhaite dans la fentre Actifs. 2. Cliquez ensuite sur le bouton Appliquer. Dreamweaver ouvre alors la bote permettant de crer une nouvelle rgle CSS. Choisissez le type de slecteur. Pour une portion de texte, on choisira gnralement une classe. Pour un paragraphe, on optera soit pour la balise <p>, mais cela est un peu gnral, soit pour un slecteur compos.
380
Pour appliquer une couleur en tant que valeur dune proprit de style : 1. Cliquez sur licne Couleurs de la fentre Actifs. 2. ditez ensuite le style depuis la fentre Styles CSS et cliquez sur le carr de couleur pour faire apparatre la palette des couleurs. Utilisez la pipette pour slectionner la couleur souhaite dans la fentre Actifs.
Figure 16-2
Slection dune couleur de style depuis la fentre Actifs
Placer un lien
1. En mode Cration, slectionnez llment sur lequel vous souhaitez appliquer le lien. 2. Cliquez sur licne URL de la fentre Actifs et slectionnez le lien. Cliquez ensuite sur le bouton Appliquer, plac en bas de la palette des actifs. Cette technique est particulirement utile dans le cas de liens complexes. Elle permet galement de remplacer facilement un lien par un autre sans avoir le saisir manuellement. Notez que la technique du ciblage depuis le panneau Proprits nest pas possible avec la fentre Actifs.
Placer une vido
La catgorie vido propose tous les formats. vido exploitables dans une page HTML, selon deux types : ceux qui ne peuvent sintgrer que dans une balise <embed>, soit les formats classiques .mov, .mpeg, .rm, .avi et .wmv ; ceux qui sintgrent en tant que contenus actifs, soit le format .flv. Seuls les chiers .flv peuvent tre insrs par simple glisser-dplacer ou en cliquant sur le bouton Insrer. Pour les autres formats de documents vido, reportez-vous au chapitre 17.
381
Utiliser des lments dautres sites
Depuis la fentre Actifs, il est trs facile de copier des lments dun site vers un autre site, la seule contrainte tant que les deux sites soient identis comme tels dans Dreamweaver. Voici la marche suivre pour accder tous les actifs dun site : 1. Ouvrez lune des pages du site et slectionnez le type de document souhait dans la fentre Actifs en cliquant sur son icne. 2. Slectionnez un ou plusieurs documents, puis cliquez droit dessus ou sur le menu local situ en haut droite de la fentre. 3. Choisissez Copier dans le site et slectionnez lun des sites enregistrs sur votre ordinateur.
Figure 16-3
Insrer des documents dun site dans un autre
382
Les favoris
Les favoris sont des lments que vous avez dclars ainsi et qui sont en quelque sorte mis en valeur par rapport aux autres lments de la liste des actifs. Un lment favori fait partie dune liste beaucoup plus restreinte que les lments actifs. Il est donc facilement identiable et utilisable. Si vous dclarez un lment comme favori, Dreamweaver placera son nom dans une liste de favoris, mais ne modiera pas et ne copiera pas le document original. Il sagit simplement dun alias.
Ajouter un favori
Pour ajouter un ou plusieurs favoris, slectionnez les lments concerns dans la liste des actifs et cliquez sur licne Ajouter aux favoris situe en bas droite de la fentre Actifs. Un message vous informe que les lments slectionns ont bien t placs dans les favoris du site.
Figure 16-4
Ajout dun favori
Favoris Couleurs, URL, Modles et Bibliothque
Les lments de ces catgories peuvent sajouter de la mme manire que les autres lments aux favoris et ils peuvent aussi tre entirement crs en tant que favoris. Pour cela, cliquez sur le bouton radio Favoris, puis sur licne Couleurs, URL, Modles ou Bibliothque. Dans la partie infrieure de la fentre, cliquez sur licne reprsentant un signe plus. Si vous ajoutez une nouvelle couleur aux favoris, une palette de couleurs safchera vous permettant de slectionner la couleur. Dans le cas dune nouvelle URL, vous devrez renseigner lURL et lui attribuer un nom.
383
Figure 16-5
Cration dune nouvelle couleur de favori
Figure 16-6
Ajout dune nouvelle URL dans les favoris
Regrouper, renommer et supprimer des favoris
La colonne Surnom de la fentre des lments favoris afche les surnoms des lments dclars comme favoris. Par dfaut, ils portent le mme nom que les chiers auxquels ils correspondent mais vous pourrez leur attribuer un surnom an de faciliter leur identication. Ce surnom ne modie pas le nom rel du document, il sagit seulement du nom indiqu pour llment dans les favoris. Licne Nouveau dossier Favoris, plac en bas de la fentre Favoris, permet de rorganiser et de regrouper les lments dune catgorie. Pour cela, cliquez dessus et faites glisser les lments dune catgorie lintrieur. Ce dossier peut bien videmment tre renomm. Pour supprimer un favori, slectionnez-le et cliquez sur licne Supprimer des favoris.
Figure 16-7
Supprimer un favori
La bibliothque
La bibliothque reprsente un dossier particulier de la fentre Actifs car, contrairement aux autres lments actifs qui sont placs dans les diffrents dossiers et sous-dossiers du site, elle renferme des lments ou des groupes dlments construits dans la page HTML. Un lment de bibliothque pourra donc tre facilement rintgr dans plusieurs pages HTML du site, sa caractristique est de pouvoir tre modi depuis la fentre Actifs. Les changements seront ensuite rpercuts dans toutes les pages dans lesquelles llment est incorpor.
384
Crer un lment de bibliothque

Les lments typiques placer dans la bibliothque sont les titres, les pieds de page et le menu gnral du site. En effet, dans la mesure o ces lments sont placer sur toutes les pages, il est utile quils soient toujours disponibles pendant la phase de cration. Une modication, mme mineure, sur le menu obligera le webmaster ouvrir chacune des pages du site. En revanche, si le menu est dclar comme lment de bibliothque, il sufra de le modier pour que toutes les pages dans lesquelles il est intgr soient mises jour.
Crer un lment texte
1. Pour crer un lment de bibliothque, vous devez tout dabord le crer dans la page HTML. 2. Slectionnez-le ensuite en mode Cration ou Code. 3. Ouvrez la fentre Actifs et cliquez sur licne Bibliothque, puis sur licne Nouvel lment de la bibliothque situe en bas de la fentre.
Figure 16-8
Ajouter un lment la bibliothque
4. Renommez llment votre convenance.
Figure 16-9
Le nouvel lment dans la bibliothque
Crer un lment menu
Si vous souhaitez placer les lments constituant un menu en tant qulment de bibliothque, vous devrez placer uniquement les lments constituant le menu dans la bibliothque
385
et non les lments ayant permis de le structurer. La gure 16-10 prsente un menu plac dans une page et son code HTML. Il est structur par un bloc <div> et ralis au moyen dune liste <ul> et ditems <li>.
Figure 16-10
Le menu et son code
La partie du menu que nous allons placer dans la bibliothque est uniquement celle qui compose le menu, cest--dire le bloc <ul></ul>. Si nous placions le bloc <div> en tant qulment de bibliothque, son incorporation entranerait automatiquement lajout dun bloc supplmentaire la page. Lajout du bloc <ul></ul> dans les pages incorporera uniquement le menu et celui-ci pourra, ventuellement, tre plac dans des zones diffrentes suivant les pages. En mode Code, slectionnez le bloc <ul></ul>. Cliquez sur licne Bibliothque de la fentre Actifs, puis sur licne Nouvel lment de la bibliothque. Renommez llment votre convenance.
Appliquer un lment de la bibliothque
Pour appliquer un lment de la bibliothque, faites-le simplement glisser dans la page lendroit o vous souhaitez lincorporer. Cette action modie un peu le code HTML de la page, car Dreamweaver ajoute des balises propritaires lui permettant de dnir lemplacement de ce type dlment. Le code ci-aprs prsente ces balises places dans la page en tant que commentaires, ce qui les rend invisibles pour les navigateurs.
<div class="header">  Montagne-65 </div>
Modier un lment de la bibliothque
Pour modier un lment, slectionnez-le dans la bibliothque et cliquez sur le bouton Modier. Llment souvre alors dans une nouvelle fentre de Dreamweaver vous permettant de le modier. Une fois vos modications effectues, enregistrez llment.
386
La bote de dialogue prsent la gure 16-11 souvre alors et vous propose de mettre jour les diffrentes pages du site comprenant cet lment.
Figure 16-11
La bote de dialogue Mettre les lments de la bibliothque jour
Cliquez sur le bouton Mettre jour et validez la seconde bote de dialogue qui vous propose la mise jour des lments de bibliothque et de modle ainsi que la recherche de ce type dlments parmi dautres sites reconnus par Dreamweaver.
Utiliser les modles

Les modles constituent une spcicit de Dreamweaver car ils ne sont pas reprsentatifs du langage XHTML. Grce eux, vous allez pouvoir dnir certaines zones dune page HTML comme modiables et dautres comme non modiables. Ceci vous permettra daugmenter votre productivit tout en vitant des erreurs de manipulation. Lusage des modles incorpore des balises spciques dans le code HTML (voir code ci-aprs) qui sont uniquement reconnues par Dreamweaver. Elles seront ignores par les navigateurs et les autres diteurs HTML.

Notez que ces balises peuvent parfois modier la mise en page en mode Cration.
Les modles simples

Voici la procdure suivre pour raliser un modle simple. 1. Assurez-vous que vous travaillez bien dans le site souhait. Pour cela, slectionnez le menu Fentre>Fichiers et vriez le site en cours. 2. Ralisez la page qui servira de modle. Veillez bien placer les styles lextrieur de la page, surtout si vous utilisez des rgles comportant des images darrire-plan. 3. Slectionnez la zone dnir comme modle. Si la page est cre avec des balises <div>, choisissez la balise correspondante dans le slecteur de balise du document.
387
4. Cliquez sur licne Modles de la catgorie Commun du panneau Insertion et choisissez Rgion modiable. Si le document nest pas encore enregistr en tant que modle, Dreamweaver vous avertit quil sera automatiquement converti en modle. Cliquez sur OK pour valider.
Figure 16-12
Ajout dune rgion modiable
5. La bote de dialogue Nouvelle rgion modiable safche alors. Saisissez le nom souhait dans le champ Nom et cliquez sur OK. La rgion modiable apparat sur la page.
Figure 16-13
La rgion modiable ajoute la page
6. Enregistrez la page en tant que modle via le menu Fichier>Enregistrer comme modle Aprs lenregistrement, le modle est automatiquement plac dans un nouveau rpertoire cr dans le site en cours et nomm Template. Pour supprimer une rgion modiable, cliquez droit (Ctrl + clic sur Mac) sur son onglet et choisissez Modles>Supprimer le marqueur de modle.
388
Appliquer un modle
Pour crer une nouvelle page partir dun modle existant, vous pouvez la raliser en suivant le modle partir de la bote de cration dun nouveau document ou appliquer le modle une page vierge. Les deux mthodes permettent dobtenir le mme rsultat nal. La cration dune nouvelle page depuis un modle se ralise depuis la fentre dinvite du nouveau document. 1. Slectionnez le menu Fichier>Nouveau et cliquez sur le lien Page issue dun modle. 2. Choisissez le site dans lequel se trouve le modle dsir, puis le modle en question.
Figure 16-14
Cration dun nouveau document partir dun modle
Notez que cette mthode permet louverture dun modle dun site quelconque et ainsi de lutiliser et de lenregistrer dans le site courant. Lapplication dun modle sur une page seffectue gnralement partir dune page vierge bien quelle soit possible partir dune page existante. 1. Ouvrez un nouveau document ainsi que la fentre Actifs. 2. Cliquez sur licne Modles, slectionnez le modle souhait et faites-le glisser sur la page vierge tout en maintenant le bouton de la souris enfonc. 3. Relchez le bouton de la souris. Le modle est mis en place dans la page et vous pouvez commencer travailler.
389
Figure 16-15
Application dun modle une page vierge
Changer un modle
Lorsque vous crez une page partir dun modle, certaines zones seront modiables et dautres non. Ceci sera indiqu par laspect du curseur de la souris au survol des zones. Si la zone nest pas modiable, le curseur se transformera en panneau dinterdiction.
Figure 16-16
Laspect du pointeur de la souris lors du survol dune zone non autorise
390
Les modles imbriqus

Lors de la cration dun site, vous pourrez tre amen crer plusieurs modles diffrents ayant, nanmoins, une mme base ou des lments communs. Vous utiliserez alors des modles imbriqus qui sont issus de modles existants.
Figure 16-17
Le principe des modles imbriqus
Voici la marche suivre pour crer des modles imbriqus : 1. Crez une nouvelle page et appliquez-lui un modle de base. 2. Cliquez ensuite sur licne Modles de la catgorie Commun du panneau Insertion et choisissez Crer un modle imbriqu dans la liste propose. 3. Enregistrez ce nouveau modle.
Figure 16-18
Cration dun modle imbriqu
391
Lun des atouts des modles imbriqus est la totale dpendance des zones non modiables par rapport au modle de base. Modier le modle de base permettra de modier tous les modles qui en sont issus, et donc toutes les pages auxquelles il est appliqu.
Les modles rgion rpte

Un modle une ou plusieurs rgions rptes possde une ou plusieurs zones qui pourront tre dupliques volont. Ces zones seront modiables ou non, suivant le choix que lon aura effectu. Voici la marche suivre pour crer une rgion rpte : 1. Crez une zone dans la page (un bloc <div>, <p> ou toute autre balise de type bloc). Vous pouvez raliser une composition quelconque dans ce bloc en utilisant, par exemple, des ottants. 2. Slectionnez cette zone et cliquez sur licne Modles>Rgion rpte de longlet Commun de la barre Insertion an de la dclarer comme rgion rpte. 3. Attribuez-lui un nom et enregistrez le modle. Lorsquil sera appliqu une page, le modle apparatra alors avec longlet prsent sur la gure 16-19.
Figure 16-19
Onglet de rgion rpte
Cliquez sur le signe + pour dupliquer la rgion rpte. Pour supprimer une rgion rpte, cliquez sur le signe . Pour modier lemplacement dune rgion rpte, cliquez sur lune des ches. La zone se dplace alors vers le haut ou vers le bas en fonction du choix effectu.
Mettre en uvre une rgion rpte
Nous souhaitons raliser une page prsentant la liste des diffrentes manifestations rgionales ainsi quun bref descriptif, le lieu et ladresse e-mail de lorganisateur. Le modle rpter est prsent la gure 16-20.
Figure 16-20
Base pour la rgion rpte
392
Sur la page, nous avons cr un bloc <div> dans lequel nous avons ajout un titre, un paragraphe et une zone pour ladresse e-mail. Ces diffrentes zones sont mises en forme avec des classes (voir code ci-dessous).
<div class="sscontenu"> <h2>Tarbes - 12-03-2008</h2> <p class="p1"> Consectetuer adipiscing elit, </p> <p class="mail">mail@mail.fr</p> </div>
Lusage des classes permet ici de pouvoir appliquer un mme style plusieurs zones distinctes de la page. Nous vous rappelons que lutilisation de plusieurs identiants ID de mme nom nest pas autorise, car un ID est unique. Voici la marche suivre pour crer la zone rpte : 1. Placez le curseur de la souris dans le bloc pralablement cr, slectionnez <div class="sscontenu"> dans le slecteur de balise an de slectionner tout le bloc. 2. Cliquez sur licne Modles de la catgorie Commun du panneau Insertion et choisissez Rgion rpte dans la liste propose.
Figure 16-21
Cration dune rgion rpte
Cette rgion, bien que duplicable, nest pas pour autant modiable. Pour pouvoir travailler dans une zone rpte, vous allez devoir la rendre modiable. 3. Slectionnez nouveau lensemble du bloc depuis le slecteur de balise et cliquez sur licne Modles>Rgion modiable de la catgorie Commun. 4. Enregistrez le modle. 5. Crez une nouvelle page et appliquez-lui le modle.
Les modles tableau rpt

Le principe des modles tableau rpt est identique celui des modles rgion rpte : une zone du document sera rpte autant de fois que ncessaire. Dans le cas
393
dun modle tableau rpt, cest un tableau qui sera introduit dans la page. Lusage de cette commande permettra de spcier quelles seront les lignes du tableau dupliquer.
Figure 16-22
Exemple de page compose de rgions rptes
Figure 16-23
Cration dun tableau rpt
394
La gure 16-23 prsente la fentre de cration dun tableau rpt. En plus des diffrents paramtres de cration de tableau, cette fentre permet de choisir les lignes qui seront rptes. De cette manire, il sera possible de raliser facilement des pages comprenant des tableaux similaires, mais avec un nombre variable de lignes de donnes.
Les modles rgion facultative

Pour travailler facilement avec des rgions facultatives, vous devrez gnralement raliser des tableaux. En effet, un modle rgion facultative modie le code HTML de la page. Ainsi, si vous concevez une structure de page utilisant le ux HTML ou des lments ottants, la suppression dun lment modiera considrablement la structure de la page. Lusage dun tableau permettra, par exemple, dafcher ou non une image, sans pour autant affecter lensemble de la page puisque la structure du tableau est conserve. Considrez donc bien la pertinence des rgions facultatives avant de les crer. Lexemple suivant ne ncessite pas de tableau puisquil consiste simplement modier le titre de la page suivant la saison. 1. Ouvrez la page des manifestations rgionales cre prcdemment pour ajouter le texte - Spcial ski au titre de certaines pages. La gure 16-24 prsente deux titres issus dun mme modle.
Figure 16-24
Deux titres issus dun mme modle
2. Depuis le modle de page des manifestations, ajoutez le texte - Spcial ski la suite du titre de la page. Slectionnez-le et cliquez sur licne Modles>Rgion facultative de la catgorie Commun du panneau Insertion. La bote de dialogue prsente la gure 16-25 souvre alors. 3. Attribuez ventuellement un nom cette rgion et vriez que loption Afcher par dfaut est bien coche. Cliquez sur OK pour valider. Une partie du titre est prsent entoure dune zone nomme if OptionalRegion1.
395
Figure 16-25
La bote de dialogue Nouvelle rgion facultative
Lors de lapplication de ce modle une nouvelle page, le titre complet apparat puisque nous avons coch loption Afcher par dfaut. Les pages ne devant pas afcher le titre supplmentaire doivent tre modies. Pour cela, slectionnez le menu Modier>Proprits du modle 4. La bote de dialogue prsente la gure 16-26 souvre alors. Dcochez loption Afcher OptionalRegion1. La rgion facultative est prsent invisible.
Figure 16-26
Modier lafchage de la rgion facultative
396
Mettre en ligne des pages issues de modles

Lorsque vous crez un modle dans Dreamweaver, il est enregistr dans un dossier nomm Template contenant tous les modles qui pourront tre appliqus aux nouvelles pages du site. Le code HTML gnr dans les nouvelles pages est totalement autonome et seules des balises spciques Dreamweaver permettent de relier la page son modle. La mise en ligne dune page issue dun modle ne ncessite donc pas la mise en ligne du modle. En revanche, la modication dun modle dans Dreamweaver ncessitera la mise en ligne de toutes les pages issues de ce modle.
Conclusion
Les modles sont particulirement utiles si vous devez partager la ralisation de votre travail avec une personne qui connat mal les techniques de mise en page pour le Web. Vous pouvez ainsi crer tous les modles de pages partir desquels votre assistant ralisera de nouvelles pages dans lesquelles il pourra facilement ajouter du contenu, sans risquer de gnrer une erreur sur la structure de la page.
17
Intgration des vidos
Le mdia vido est de plus en plus prsent dans les pages Web. Laugmentation du dbit destin aux internautes non professionnels a permis de rendre ce mdia attractif et simple. Lessor spectaculaire du format FLV Flash a galement contribu au dveloppement de lusage de la vido. Ce chapitre dcrit les diffrentes mthodes dobtention et dincorporation des mdias vidos, autres que Flash, dans une page Web. Les points suivants y seront abords : les technologies vidos ; obtenir des vidos pour le Web ; lire une vido depuis une page Web ; lire une vido intgre la page ; les contenus actifs.
Les technologies vidos

Le mdia vido est compos de 25 images par seconde et dune piste sonore. La combinaison de ces lments fait quune minute de vido pse en gnral 250 Mo, ce qui dpend de la compression du camscope ayant servi pour lenregistrement des images. Quel que soit le niveau de compression de base, une vido ne peut pas tre diffuse directement sur le Web car son poids rendrait le temps de tlchargement trop important, mme haut dbit. Il faudra donc appliquer certaines transformations la vido an de diviser son encombrement sur le disque par un facteur pouvant aller jusqu 100 et ainsi rduire la bande passante ncessaire sa diffusion. Parmi ces transformations, certaines seront mcaniques, comme la rduction de la taille ou du nombre dimages par seconde,
398
et dautres seront informatiques, comme la compression des images et du son. Quatre acteurs se partagent le domaine de la compression vido : Apple avec QuickTime, RealNetworks avec RealMedia, Microsoft avec Windows Media et Adobe avec les vidos Flash.
La technologie QuickTime
QuickTime est la solution vido dveloppe par Apple. Elle est installe par dfaut sur tous les Mac et peut facilement tre ajoute un ordinateur fonctionnant sous Windows. Pour cela, il suft de tlcharger gratuitement QuickTime Player sur le site dApple (http://www.apple.com/fr/quicktime) et de linstaller sur votre ordinateur. Le lecteur multimdia QuickTime permet de lire de nombreux types de chiers audio et vido. Pour accder aux fonctionnalits denregistrement et dexportation des chiers, vous devrez passer la version QuickTime Pro en achetant un simple numro de srie sur le site dApple (voir section Obtenir des vidos QuickTime de ce chapitre). Les vidos QuickTime peuvent tre lues en tlchargement, en dmarrage rapide ou en streaming. Par rapport ses concurrents, QuickTime met davantage laccent sur la qualit de la vido plutt que sur la diffusion en streaming
La technologie RealMedia
RealNetworks est lun des prcurseurs de la vido diffuse en streaming. Son lecteur multimdia, RealPlayer, permet de lire les chiers .ra, .rv, .ram, .rp et .rt. La technologie RealMedia est longtemps reste leader pour la diffusion de vidos en streaming, mais elle est aujourdhui en perte de vitesse suite lexpansion rapide de la technologie vido Flash. Le lecteur RealPlayer est disponible en version gratuite ladresse suivante : http://www.real.com/player/realplayer_intl.html?lang=fr.
La technologie Windows Media

Windows Media Player est le lecteur multimdia de Microsoft. Il permet de lire les chiers .asf, .asx, .avi, .wav, .wma, .wmv, .mpg, .mpeg, .mid, .midi et .aif. Cette liste nest pas exhaustive, elle prsente les formats les plus courants. Vous pouvez tlcharger la version gratuite de Windows Media Player ladresse suivante : http://www.microsoft.com/ windows/windowsmedia/default.mspx.
Raliser des vidos pour le Web

Une vido est constitue de deux mdias, savoir des images et du son. Les quatre technologies concurrentes, prsentes aux sections prcdentes, utilisent chacune des outils diffrents pour compresser les images et les sons. Dans le domaine de lencodage vido, il faut distinguer le conteneur de la vido et du son et les codecs utiliss pour lencodage des mdias. Le conteneur est reprsent par lextension de la vido et sapparente ce
Intgration des vidos CHAPITRE 17
399
que nous avons appel la technologie. Le codec correspond lalgorithme employ pour compresser la vido et le son. Il existe des codecs diffrents pour chacun de ces mdias. Dans chaque technologie, les codecs sont similaires, mais le conteneur est diffrent, ce qui rend la compatibilit parfois difcile.
Les codecs
Un codec est un algorithme mathmatique qui compresse et dcompresse les images. En phase de compression, le codec analyse le mdia et permet, selon lalgorithme, de supprimer des donnes, de les rorganiser ou deffectuer simultanment ces deux tches. En phase de dcompression, il restitue limage en crant les pixels supprims et en rtablissant lordre visuel des pixels. Une squence dimages compresse est optimise au maximum et son poids est rduit dans de fortes proportions. La compression utilise par les codecs peut tre spatiale ou temporelle.
La compression spatiale
Avec ce type de compression, limage est reprsente pixel par pixel. Lorsque plusieurs pixels de mme couleur sont disposs sur une mme ligne, il est plus intressant de les dcrire comme une liste plutt quun un. Cette compression est idale pour les squences prsentant de grandes zones unies.
La compression temporelle
Ce mode de compression prend en compte les parties non modies de deux images vido successives. Ainsi, entre limage n et n + 1, seule la zone modie sera redessine, les zones inchanges auront des donnes communes.
Figure 17-1
Seule la zone surligne est enregistre.
La bande passante
La bande passante reprsente le dbit dinformations quil est possible denvoyer ou de recevoir. Elle se mesure en octets par seconde (byte per second en anglais).
400
Lorsque lon travaille avec le mdia vido et que lon souhaite le diffuser en streaming, il convient dencoder le son et limage pour que laddition des deux ux, ou bandes passantes, ne dpasse pas la bande passante de linternaute cible (idalement, 75 % de la bande passante de linternaute). Le tableau 17-1 prsente les bandes passantes maximales pour trois cibles dinternautes.
Tableau 17-1 Le dbit maximum du son et de la vido pour une diffusion en streaming
Son
56 Kbit/s 512 Kbit/s 2 Mbit/s 14 Kbit/s 40 Kbit/s 128 Kbit/s
Vido
20 Kbit/s 350 Kbit/s 1 300 Kbit/s
Total
34 Kbit/s 390 Kbit/s 1 428 Kbit/s
Obtenir des vidos QuickTime

Lobtention de vidos QuickTime seffectue partir de tous les logiciels de montage vido courants. Une solution peu onreuse consiste acqurir la version Pro de QuickTime. Il sagira simplement de vous connecter sur le site dApple et de payer votre contribution. Un numro de srie vous sera envoy par retour de mail. Votre QuickTime deviendra un QuickTime Pro. Une fois cette version installe, slectionnez le menu Modier>Prfrences>Enregistrer an de renseigner vos paramtres denregistrement (voir gure 17-2).
Figure 17-2
Mise jour QuickTime en QuickTime Pro
Grce la version Pro, vous aurez accs aux menus denregistrement et dexportation de QuickTime. Vous pourrez ainsi transformer la vido courante dans lun des formats proposs. Voici une mthode pour transformer un document, ouvert dans QuickTime Pro, en vido prte pour une diffusion sur le Web. Nhsitez pas consulter le site dApple (http:// www.apple.com/fr/quicktime/) pour plus dinformations sur toutes les fonctionnalits du lecteur QuickTime.
401
1. Ouvrez la vido dans QuickTime Pro. 2. Slectionnez le menu Fichier>Exporter et dans la bote de dialogue qui souvre alors, indiquez le nom du nouveau document. Choisissez Squence vers Squence QuickTime et cliquez sur le bouton Options. 3. Une nouvelle bote de dialogue souvre alors. Cochez loption Prparer pour lenchanement via Internet et choisissez Dmarrage rapide. Cliquez sur le bouton Rglages. 3. Choisissez H.264 comme type de compression. De nombreux autres paramtres permettent dafner la qualit de compression de la vido (voir gure 17-3).
Figure 17-3
Les paramtres dexportation dune vido en QuickTime
4. Validez toutes les botes de dialogue et enregistrez votre chier au format .mov. 5. Vous obtenez une vido correctement formate pour tre lue ou incorpore dans une page HTML avec Dreamweaver.
402
Obtenir des vidos RealVideo

RealNetworks met votre disposition deux solutions pour crer des vidos au format RealVideo : Real Producer Basic (gratuite) et Real Producer Plus. Ces logiciels vous permettront dencoder des chiers en vue de les diffuser en streaming. Vous pouvez les tlcharger sur le site de RealNetworks ladresse suivante : http://www.realnetworks.com/ products/producer. La version payante de RealProducer propose de nombreuses options supplmentaires. Les utilisateurs de Mac OS X 10.2 et versions suprieures pourront tlcharger le plug-in Real Export permettant lexportation au format RealVideo depuis de nombreuses applications de montage vido, ainsi que depuis QuickTime Pro. Voici une procdure simple pour encoder une vido au format RealVideo : 1. Au lancement du logiciel, linterface dencodage souvre automatiquement. Cliquez sur le bouton Browse pour slectionner le chier encoder.
Figure 17-4
Linterface de lencodeur RealProducer
403
2. Un nom safche alors droite de la fentre, dans la colonne Destination du cadre central. Vous pouvez modier ce nom ainsi que lemplacement denregistrement. Pour cela, double-cliquez sur le nom et modiez-le dans la fentre dinvite. 3. Cliquez ensuite sur le bouton Audiences. Dans la fentre qui souvre alors, slectionnez le type de chier audio et de chier vido. Choisissez ensuite le codec utiliser, la version 10 est sans aucun doute la meilleure ce jour. 4. Indiquez la cible dinternaute en cliquant dans le cadre Template, puis sur la che centrale pour ajouter cette cible dans le cadre Audiences in job. Choisissez 256k DSL or Cable.
Figure 17-5
Slection de laudience
5. Fermez cette fentre et cliquez sur le bouton Clip Information. Saisissez les informations relatives au contenu de la squence. Elles safcheront ensuite dans la barre dinformations de RealPlayer et permettront le rfrencement des vidos dans les moteurs de recherche. Fermez la fentre en cliquant sur la croix situe en haut droite. 6. Pour commencer lencodage, cliquez sur le bouton Encode. La zone de droite de la fentre safche avec un petit dcalage de temps et prsente la vido dans son tat nal, encode. La comparaison de qualit est facilite par lafchage gauche de la squence non compresse. Les vidos au format RealVideo doivent tre enregistres avec lextension .rm ou .rv.
404
Obtenir des vidos Windows Media

Lencodeur Windows Media (ne pas confondre avec le lecteur Windows Media Player) de Microsoft permet dencoder des vidos au format Windows Media en vue de les diffuser en ux continu ou en tlchargement. Il permet galement dacqurir des squences vidos ou des chiers audio ou encore de crer des squences de captures dcran. Vous pouvez tlcharger gratuitement le codeur Windows Media ladresse suivante : www.microsoft.com/windows/windowsmedia/fr/9series/encoder/default.aspx. Une fois lencodeur install sur votre ordinateur, vous pourrez facilement encoder une vido grce lassistant de longlet Wizards. Voici une utilisation simple de lencodeur avec lassistant : 1. Ds louverture du logiciel, lassistant prend en charge la ralisation de lencodage. Dans longlet Wizards, cliquez sur licne Convert a le pour convertir un chier vido au format WMV.
Figure 17-6
Licne Convert a le de longlet Wizards de lencodeur Windows Media
2. Dans la bote de dialogue qui souvre alors, cliquez sur le bouton Browse du champ Source File pour slectionner le chier encoder (voir gure 17-7). Si votre chier napparat pas dans la fentre, modiez les types de chiers recherchs.
Figure 17-7
La slection du chier encoder
405
3. Le logiciel propose alors automatiquement un chier de sortie dans le champ Output File. Sil ne vous convient pas, cliquez sur le bouton Browse pour le modier. Cliquez sur Suivant > pour valider vos choix. 4. Slectionnez ensuite le mode de diffusion souhait parmi les sept modes proposs. Choisissez Web server (progressive download) pour une diffusion depuis un serveur Web courant ou Windows Media server (streaming) pour une diffusion en streaming depuis un serveur Windows. Cliquez sur Suivant > pour valider.
Figure 17-8
Slection du mode de diffusion
5. Choisissez ensuite la qualit de sortie pour la vido et le son. Pour cela, slectionnez VHS quality video (CBR) dans la liste droulante Video et Audio FM quality audio (CBR) ou Voice quality audio (CBR) dans la liste droulante Audio. Slectionnez le dbit souhait et cliquez sur Suivant >.
Figure 17-9
Slection de la qualit de sortie pour le son et la vido
6. Renseignez ventuellement les diffrents champs de la fentre suivante relatifs au contenu de la squence. Ces informations nont aucune incidence sur lencodage. Cliquez sur Suivant > pour valider. Un rcapitulatif des choix effectus safche alors.
406
Figure 17-10
Les mtadonnes de la vido
7. Cliquez sur le bouton Terminer. La fentre principale de lencodeur souvre alors et lencodage du chier commence. Une fois celui-ci termin, une bote de dialogue apparat prsentant le compte-rendu de lencodage. La squence peut, prsent, tre insre dans une page HTML. Une vido Windows Media doit tre enregistre au format .wmv.
Lire une vido depuis une page Web

La lecture de vido depuis une page Web se ralise gnralement par lintermdiaire dun simple lien. Cette mthode prsente lavantage dtre trs simple mettre en uvre et offre une compatibilit proche de 100 % ds lors que linternaute possde le lecteur appropri. Pour incorporer la vido comme lment graphique dune page HTML, vous devrez utiliser des balises dinsertion de mdias. La mise en uvre de ce type de page, bien que largement simplie, ncessite tout de mme une attention particulire. Cette section dcrit les diffrentes possibilits de lecture dune vido depuis une page Web, notamment la lecture en streaming et lincorporation de la vido dans la page.
Lire une vido depuis un lien

La mthode la plus simple consiste crer un lien depuis un texte ou une image vers une vido place dans votre site. Lorsque linternaute cliquera sur le lien, le navigateur ouvrira automatiquement le lecteur appropri au format de votre vido. Si le format de la vido nest pas reconnu, le navigateur proposera, soit le tlchargement du lecteur appropri (pour Internet Explorer sur PC), soit lenregistrement du chier vido pour une lecture ultrieure ou louverture du document avec une application de votre choix parmi celles installes sur votre ordinateur (pour Firefox). Voici la marche suivre pour lire une vido depuis un lien : 1. Enregistrez une vido dans lun des rpertoires de votre site. Elle doit avoir t pralablement encode pour une diffusion sur Internet.
407
2. Sur la page, saisissez un texte ou insrez une image qui permettra de raliser le lien. 3. Slectionnez le texte ou limage et indiquez le chemin daccs la vido dans le champ Lien du panneau Proprits.
Lire une vido en streaming depuis un lien

Depuis une page HTML, le lien vers une vido qui sera lue en streaming doit tre fait vers le mtachier du chier vido. La procdure est similaire celle utilise pour la lecture dun chier vido en tlchargement (voir section prcdente) la diffrence que le lien se fait vers le mtachier et non plus vers la vido.
Le principe du mtachier
Un mtachier est un document texte qui contient ladresse, sur le Web, du document vido lire en streaming. Il est plac entre le document HTML et le document vido. Le schma de la gure 17-11 prsente le principe du mtachier utilis pour une vido lue en streaming. Si linternaute clique sur un lien plac dans le document page1.html, le mtachier video1.ram souvre alors et lance la vido videoA.rm.
Figure 17-11
Le mtachier est plac entre la page HTML et la vido
Les mtachiers sont des documents texte propres chacune des technologies prsentes prcdemment et ils sont donc diffrents pour chacun des conteneurs vido.
Mtachier pour QuickTime
QuickTime utilise un mtachier bas sur un chier XML. La syntaxe de ce document est trs importante. Voici la mthode pour crer le mtachier destin la lecture dune vido QuickTime en streaming. 1. Dans Dreamweaver, ouvrez un nouveau document XML en choisissant le menu Fichier>Nouveau, puis en slectionnant Page vierge>XML. Len-tte de la page qui souvre alors est le suivant :
<?xml version="1.0" encoding="utf-8"?>
2. En mode Code, insrez un retour la ligne aprs cette ligne den-tte et saisissez le code suivant :
408
<?quicktime type="application/x-quicktime-media-link"?> <embed autoplay="true" fullscreen="current" kioskmode="true" moviename="Premire vido" playeveryframe="true" quitwhendone="true" src="http://www.monserveur/video1.mov"/>
La premire ligne de code permet de prciser lapplication qui servira la lecture de la vido. La seconde ligne permet de lier la vido au document. Les diffrents attributs ne sont pas tous obligatoires, lexception de lattribut src qui doit indiquer le chemin de la vido lire.
Attention Le chemin du document indiqu en valeur de lattribut src doit tre absolu et non relatif.
autoplay Indique si la vido est lue immdiatement ou non. Cet attribut peut recevoir la valeur true ou false; fullscreen Indique si la vido doit tre lue en plein cran. Les valeurs de cet attribut sont false, normal, double, half, full et current; kioskmode Indique lafchage du menu local de QuickTime ; playeveryframe Force lapplication lire toutes les images de la vido, au dtriment de la uidit ; quitwhendone Ferme lapplication QuickTime lorsque la vido est termine. Ce chier doit tre enregistr au format .qtl. Dans Dreamweaver, vous devrez donc supprimer lextension .xml, propose par dfaut. Ce document peut aussi tre gnr trs facilement depuis QuickTime en version Pro. Pour cela, choisissez Exporter, puis Squence vers lien de donnes QuickTime. Cliquez ensuite sur le bouton Options pour effectuer les rglages.
Mtachier pour RealMedia
Pour crer le mtachier permettant de lire une vido RealVideo en streaming, un simple diteur de texte sufra. Vous pouvez galement utiliser Dreamweaver. Pour cela, ouvrez un nouveau document de type texte via le menu Fichier>Nouveau>Autre>Texte. Voici le texte saisir :
rtsp://chemin/videoA.rm
Najoutez surtout aucun guillemet et remplacez chemin par le chemin absolu de la vido sur le Web. Enregistrez ensuite ce chier en texte seul et avec lextension .ram ou .rpm.
Mtachier pour Windows Media
Le mtachier dune vido Windows Media est un simple chier texte que vous pourrez diter dans un logiciel de traitement de texte ou Dreamweaver. Pour cela, ouvrez un document texte via le menu Fichier>Nouveau>Autre>Texte.
409
Le mtachier doit avoir une syntaxe prcise : il doit commencer par la balise <ASX> et se terminer par la balise </ASX>. La balise <ENTRY>, qui permet de dclarer un nouvel lment, et la balise <REF>, qui dnit ce nouvel lment, sont galement indispensables. Voici un exemple de mtachier Windows Media :
<ASX version="3.0"> <Entry> <Ref href="http://chemin/video1.wmv"/> </Entry> </ASX>
Si vous placez la vido sur un serveur de streaming Windows Media Streaming, vous devrez indiquer le protocole mms:// dans le mtachier (voir code ci-dessous).
mms://chemin/fichier.wmv
Si vous placez la vido sur un serveur qui nest pas un serveur de streaming, vous devrez indiquer le protocole http:// dans le mtachier (voir code ci-dessous) :
http://chemin/fichier.wmv
Lire une vido intgre la page

Lintgration de la vido dans la page HTML permet de grer parfaitement sa position et sa mise en forme. La gure 17-12 prsente une vido avec un habillage, limage vido fait partie de la composition graphique. Plusieurs mthodes permettent dintgrer une vido dans une page : avec la balise <embed>, balise propritaire Netscape ; avec la balise <embed> couple la balise <object> ; avec la balise <object> uniquement. Cette dernire mthode, bien quun peu plus difcile mettre en uvre, permet une compatibilit XHTML 1.0 Strict. La section suivante se propose de vous apprendre insrer une vido dans une page HTML selon la deuxime mthode de la liste prcdente.
Intgrer une vido avec les balises <object> et <embed>

Cette technique est largement utilise sur de nombreux sites. Elle utilise la balise <object>, spcie dans les recommandations du W3C, qui permet dincorporer des lments non pris en charge de manire native dans les navigateurs. La balise <object> autorise par ailleurs limbrication dlments pour permettre le chargement de contenus alternatifs. Cest cette caractristique que nous utiliserons ici pour incorporer une vido qui sera lisible sur tous les navigateurs rcents. La balise <embed> est, quant elle, une balise propritaire Netscape. Cependant tous les navigateurs lont implmente. Elle ne fait pas partie des recommandations du W3C.
410
Figure 17-12
La vido est intgre la page.
Limbrication de cette balise dans la balise <object> augmentera la compatibilit avec les navigateurs.
Insrer une vido QuickTime
1. Ouvrez la vido insrer dans QuickTime Player et choisissez le menu Fentre>Afcher les infos de squence. Notez la taille de la vido en largeur et en hauteur. 2. Dans Dreamweaver, ouvrez une nouvelle page HTML et insrez-y une balise <div> laquelle vous donnerez ventuellement un nom de classe ou dID (ceci permettra ensuite de crer une rgle de CSS). Supprimez au besoin le texte qui apparat par dfaut. 3. Slectionnez ensuite le menu Insertion>Mdias>ActiveX. 4. Dans la bote de dialogue Attributs daccessibilit des balises dobjet qui souvre alors, indiquez le titre de la vido dans le champ Titre et attribuez-lui ventuellement une cl daccs et un ordre de tabulation. Cliquez sur OK pour valider. 5. Une icne apparat alors dans la fentre Document au point dinsertion de llment. Cette icne reprsente la position et la taille de votre vido. Cliquez-la pour la slectionner. 6. Dans le panneau Proprits, cochez loption Incorporer et cliquez sur licne Rechercher le chier du champ Src pour slectionner le document vido insrer (slectionnez Tous les chiers dans la liste droulante Fichiers de type si votre chier napparat pas).
411
7. Indiquez ensuite la largeur et la hauteur de votre vido dans les champs L et H. Ajoutez 15 pixels en hauteur pour que la barre de commandes de la vido puisse safcher correctement. 8. Dans la liste droulante ID de classe, choisissez lID correspondant au lecteur de votre vido. Sil napparat pas, saisissez-le manuellement. Reportez-vous la section suivante ID de classe pour consulter la liste des ID de classe courants. 9. Cliquez ensuite sur le bouton Paramtres Dans la bote de dialogue qui souvre alors, saisissez les diffrents paramtres de contrle de la vido QuickTime. Pour saisir le premier paramtre, cliquez dans la premire cellule de la colonne Paramtre et crivez src. Cliquez droite de ce champ et saisissez ladresse relative de votre vido. 10. Cliquez sur le bouton + et indiquez le second paramtre, controller, qui dtermine si la barre de navigation doit apparatre ou pas. Saisissez true dans le champ de droite pour faire apparatre les boutons de commande de la vido ou false pour les masquer. 11. Cliquez sur le bouton + et indiquez le troisime paramtre, autoplay, qui spcie si la vido commence sa lecture immdiatement ou pas. Saisissez true dans le champ de droite pour une lecture automatique ou false pour un dmarrage en pause. 12. Cliquez sur le bouton + et indiquez le quatrime paramtre, type, qui permet de dcrire le type MIME de llment. Dans le champ de droite, saisissez video/quicktime. Reportez-vous la section Types MIME pour consulter la liste des types MIME des diffrents lments. 13. Cliquez sur OK pour valider vos choix. Dans le panneau Proprits, saisissez ladresse du chier de classe. Pour QuickTime, cette adresse est la suivante : http:// www.apple.com/qtactivex/qtplugin.cab. Reportez-vous la section Adresses des chiers de classe pour consulter la liste des adresses des diffrents chiers de classe pour les autres types de vidos. 14. Enregistrez le document HTML. Basculez en mode Code pour visualiser le code gnr et constater limbrication de la balise <embed> dans la balise <object>.
<div class="video"> <object classid="clsid=02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http:// www.apple.com/qtactivex/qtplugin.cab" width="360" height="303" title="vid"> <param name="src" value="videos/route2.mov" /> <param name="controller" value="true" /> <param name="autoplay" value="true" /> <param name="type" value="video/quicktime" /> <embed src="videos/route2.mov" width="360" height="303" controller="true" autoplay="true" type="video/quicktime"></embed> </object> </div>
Le tableau 17-2 prsente les principaux paramtres pour une vido QuickTime.
412
Fonctionnalits avances de Dreamweaver CS4 PARTIE III Tableau 17-2 Les paramtres pour la balise <object> dune vido QuickTime
Valeurs Utilisation
Lecture automatique de la squence vido. Afchage des boutons de commande de la vido. Afchage du menu local de la vido. Lecture en boucle. Adresse du plug-in. Adresse de la vido.
Autoplay Controller Kioskmode Loop Pluginspage src
true, false true, false true, false true, false http://www.apple.com/quicktime URL
Insrer une vido Windows Media
La mthode dintgration dun document Windows Media est identique celle prsente la section prcdente pour un chier QuickTime, seuls les paramtres sont diffrents (voir tableau 17-3). Pour connatre la taille dune vido Windows Media, ouvrez-la dans Windows Media Player et choisissez le menu Fichier>Proprits.
Tableau 17-3 Les paramtres pour la balise <object> dune vido Windows Media
Valeurs Utilisation
Lecture automatique de la squence vido. Adresse de la vido. Afchage des boutons de commande de la vido. Adresse de la vido.
autostart src showcontrols url
true, false URL true, false URL
Insrer une vido RealMedia
La mthode dintgration dun document RealMedia est identique celle utilise pour un chier QuickTime, seuls les paramtres sont diffrents (voir tableau 17-4). Pour connatre la taille dune vido RealVideo, ouvrez-la dans RealPlayer et choisissez le menu Fichier>Proprits du clip>Origine du clip.
Tableau 17-4 Les paramtres pour la balise <object> dune vido RealVideo
Valeurs Utilisation
Lecture automatique de la squence vido. Afchage de tous les lments, de la fentre vido uniquement, de la barre de menu uniquement. Adresse de la vido.
autostart controls src
true, false all, imagewindow, controlpanel url
413
ID de classe
Voici la liste des principaux contrles ActiveX pour la vido : QuickTime

classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
RealPlayer
classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
Windows Media Player versions 7, 9 et 10

classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"
Windows Media Player 6.4

classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
Shockwave Director
classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000"
Flash
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
Adresses des chiers de classe
QuickTime
http://www.apple.com/qtactivex/qtplugin.cab
Windows Media
http://activex.microsoft.com/activex/controls/mplayer/en /nsmp2inf.cab#Version=6,4,5,715
Types MIME
Fichiers .flv Type MIME : video/x-flv Fichiers .mpeg1 Type MIME : video/mpeg Fichiers .mp4 Type MIME : video/mp4 Fichiers .mov Type MIME : video/quicktime Fichiers .wmv Type MIME : video/x-ms-wmv Fichiers .wmv Type MIME : video/x-ms-wmv Fichiers .asf Type MIME : video/x-ms-asf
414
Intgrer une vido en streaming dans la page

Lintgration dune vido en streaming dans une page HTML ne pose pas de problme particulier ds lors que vous avez les lments suivants : une vido encode pour le streaming ; un mtachier correspondant au type de la vido et pointant sur cette vido lorsquelle sera place sur le serveur Web ; un document XHTML intgrant la vido dans lequel vous remplacerez simplement le lien pointant vers la vido par un lien pointant vers le mtachier.
Conclusion
Le mdia vido ajoute une dimension multimdia vos pages Web. Dreamweaver vous permettra de raliser facilement certaines oprations, notamment si vous souhaitez incorporer les vidos en tant que contenu actif. Avant dencoder une squence vido, vous devrez toujours considrer avec attention la cible dinternautes, car cest elle qui dterminera le choix de la technologie employer. Actuellement, de nombreux sites utilisent la technologie Flash, prsente au chapitre 19, ce qui savre judicieux si dautres lments du site fonctionnent galement avec cette technologie.
18
Intgration des lments sonores
Encore aujourdhui, les sites intgrant des lments sonores sont peu nombreux : pourquoi ? Tout dabord, il est plus difcile pour chacun dentre nous de composer une musique originale que de prendre une photo numrique. Par ailleurs, llment musical est souvent peru comme dsagrable par linternaute sil na pas t correctement congur par le webmaster. Enn, lquipement des internautes (cartes son, enceintes) peut tre trs vari et il est frquent que le son soit dsactiv sur les ordinateurs (par exemple, au travail). Tous ces facteurs ont trs longtemps frein lincorporation de sons dans les pages Web. La dferlante podcast a donn un second soufe aux documents sonores qui sont maintenant consultables la demande. Dans ce chapitre, nous aborderons les points suivants : le son numrique ; les formats sonores ; obtenir des documents formats pour le Web ; intgrer un document sonore dans une page Web ; raliser un podcast.
Le son numrique
Le son est une onde qui se propage dans lair sous la forme dune variation de pression. Cest cette variation qui fait vibrer nos tympans et gnre le son.
416
Pour enregistrer numriquement un son, signal analogique, il faut le transformer en un signal numrique. La gure 18-1 prsente le principe de la numrisation sonore.
Figure 18-1
La numrisation du son
La qualit de la numrisation, galement appel chantillonnage, dpend de deux valeurs : la frquence dchantillonnage et la rsolution. La frquence dchantillonnage reprsente le nombre dchantillons mesurs en une seconde, elle est exprime en Hertz (Hz). Sur la gure 18-1, la frquence est visualise par le nombre de barres verticales. La frquence dchantillonnage doit tre sufsamment grande pour viter de supprimer certaines informations. La gure 18-1 prsente une frquence dchantillonnage faible, il en rsulte des paliers importants entre chaque mesure. La rsolution (exprime en bits) reprsente la prcision de lchantillon capt. Sur la gure 18-1, la rsolution est reprsente par la hauteur des barres verticales. Plus la rsolution est grande, plus lchantillon capt est proche du signal dorigine. Il reprsente le nombre de valeurs possibles que peut prendre un chantillon.
Tableau 18-1 Valeurs usuelles de numrisation sonore
Frquence dchantillonnage
Enregistrement studio pro Cd audio Enregistrement speak 192 kHz 44,1 kHz 22 kHz
Rsolution
32 bits 16 bits 8 bits
Intgration des lments sonores CHAPITRE 18
417
La numrisation dun son, daprs les valeurs indiques dans le tableau 18-1, reprsente une quantit de donnes assez importante. Pour information, 1 minute de son en qualit CD audio et en stro, reprsente 10 Mo. Il est donc gnralement ncessaire de compresser ces donnes.
Les formats sonores

Les chiers sonores sont constitus de deux entits : le format du chier et le mode de compression, galement appel codec. Le format du chier sonore sapplique gnralement un type de plateforme, de logiciel ou de technologie. Il contiendra diffrentes donnes concernant le document (les mtadonnes), ainsi que lalgorithme de compression (le codec). Alors que le format est trs souvent ddi, le codec est thoriquement utilisable avec de nombreux formats. Le tableau 18-2 prsente les principaux formats sonores avec leur codec.
Tableau 18-2 Principaux formats sonores avec leur codec et la technologie associe
Format Codec gnralement utilis
PCM PCM Mpeg-1 Audio Layer 3 WMA (plusieurs versions) AAC Real vorbis Qualcomm QDesign AAC
Logiciel/technologie
Apple Microsoft et IBM Microsoft Apple RealNetworks Libre QuickTime QuickTime QuickTime
.aif .wav .mp3 .wma .mp4, .m4a .ra .ogg .mov .mov .mov
Crer des documents sonores formats pour le Web

La cration dun document peut rsulter de trois processus diffrents : lenregistrement depuis un micro ; la conversion de musique sur CD audio ; lutilisation de chier audio informatique. La troisime catgorie ne posera gnralement pas de problme puisque le document est dj dans un format lisible par au moins un logiciel informatique. En revanche, lenregistrement et la conversion rsultent de mthodes diffrentes.
418
Enregistrer
Vous pouvez facilement raliser un chier sonore avec le logiciel gratuit Audacity ou avec QuickTime Pro. Pour cela, vous navez besoin que dun microphone branch. Si vous utilisez Audacity, tlchargez le plug-in Lame pour pouvoir exporter au format .mp3.
Figure 18-2
Linterface du logiciel Audacity
Depuis linterface du logiciel Audacity, cliquez sur le bouton Enregistrement et enregistrez votre squence. Une fois celle-ci termine, choisissez, depuis le menu Fichier, la commande Exporter comme mp3.
Convertir
La conversion de chiers sonores placs sur un CD audio doit se faire depuis un logiciel spcialis tels que iTunes sur Mac ou Windows Media Player sur PC.
Attention Les chiers convertis ne peuvent tre utiliss que dans un cadre familial. Ils ne peuvent, en aucun cas, tre transmis ou diffuss sur un site Web sans laccord de lauteur et/ou de la maison de production.
Convertir sous iTunes
1. Insrez un CD audio dans le lecteur de votre ordinateur et ouvrez iTunes ( moins quil ne souvre automatiquement). 2. Ouvrez les prfrences du logiciel et cliquez sur longlet Avanc. Choisissez ventuellement lemplacement du dossier iTunes Music. Cest cet endroit que seront placs les chiers convertis. Cliquez sur longlet Importation et choisissez le type dencodage dans la zone Encoder avec. Utilisez AAC ou MP3 (MP3 tant le plus universel pour les baladeurs). Choisissez une qualit dimportation dans le menu Rglage. Validez ces prfrences. 3. Dans iTunes, slectionnez les pistes extraire dans la colonne Nom.
419
4. Depuis linterface de iTunes, choisissez le menu Avanc>Convertir la slection en

Convertir sous Windows Media Player
1. Insrez un CD audio dans le lecteur de votre ordinateur et ouvrez Windows Media Player 11 ( moins quil ne souvre automatiquement). 2. Cliquez sur longlet Extraire, choisissez Formater dans la liste dactions propose et slectionnez le format denregistrement souhait. Spciez galement le taux dchantillonnage via le menu du mme nom. 3. Cochez les cases en regard des pistes extraire, puis cliquez sur le bouton Dmarrer lextraction.
Intgrer des sons

Lintgration de documents sonores dans une page Web est similaire lintgration dune vido. Aussi, dans de nombreux cas, nous vous conseillerons de vous reporter au chapitre 18.
Lire un son depuis un lien

Comme pour la vido, la lecture dune musique place sur un serveur Web peut se raliser par un simple lien dans la page pointant vers le chier sonore. Le navigateur analysera le format du document et proposera lapplication la mieux adapte. La fentre de lapplication sonore se superposera alors la page Web en cours. Lexemple de code suivant prsente un lien vers un document au format .mp3. Lorsque lutilisateur cliquera sur le lien son plac dans la page, le son se chargera en mmoire et la squence sonore souvrira ensuite dans une nouvelle page avec le lecteur le plus appropri.
<a href="Piste-audio-3.mp3">son</a>
Dans le cas dun lien vers une squence sonore, le son commence tre jou lorsquil est totalement charg et vous ne matrisez ni laspect graphique ni la position du lecteur. En revanche linternaute pourra, trs facilement, grer le volume sonore depuis linterface du logiciel de lecture.
Lire un son en streaming depuis un lien

Les techniques dintgration de document sonore en streaming sont les mmes que celles utilises pour la vido. Reportez-vous au chapitre 17 pour voir prcisment les diffrents codes HTML insrer dans la page.
Raliser un document sonore QuickTime pour le streaming
Pour crer un document sonore format pour le streaming, celui-ci doit tre encod pour une diffusion streame , cest--dire comporter une piste indication.
420
Voici la marche suivre pour crer un document sonore pour le streaming dans QuickTime Pro : 1. Ouvez le document sonore rencoder, puis choisissez Exporter. 2. Choisissez Squence vers Squence QuickTime dans la liste droulante Exporter, puis cliquez sur le bouton Options 3. Dans la fentre Options, cliquez sur le bouton Rglages pour modier le codec dencodage du son. Slectionnez ensuite Enchanement indications dans la liste droulante situe gauche de ce bouton. Validez les deux fentres. Le chier est encod.
Figure 18-3
Les fentres Exporter et Options... de QuickTime Pro
Raliser un document sonore Windows Media pour le streaming
1. Ouvrez Windows Media Encoder. 2. Choisissez Windows Media Server comme mode de diffusion. 3. Placez le chier rsultant sur un serveur Windows Media.
Intgrer un son dans une page HTML

Lintgration dun son dans une page Web est un moyen nettement plus lgant qui permet une gestion plus efcace du logiciel de lecture. Lintgration se ralise au moyen des balises <object> et <embed>. Voici le code que vous devriez obtenir pour lire un son au format .aif ou .mp3. Dans cet exemple, le type MIME pour ce document t spci en video/quicktime pour que ce soit le lecteur Quicktime qui se charge de sa lecture.
<div class="video"> <object classid="clsid=02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http:// www.apple.com/qtactivex/qtplugin.cab" width="200" height="10" title="vid"> <param name="src" value="musique.mp3" /> <param name="controller" value="true" />
421
<param name="autoplay" value="true" /> <param name="type" value="video/quicktime" /> <embed src="musique.mp3" width="200" height="10" controller="true" autoplay="true" type="video/quicktime"></embed> </object> </div>
Dans cet exemple, le lecteur apparat lendroit souhait avec une taille de 200 10 pixels. Vous pouvez le rendre totalement invisible en indiquant la valeur 0 pour les attributs width et height.
Les types MIME pour les chiers audio
Fichier .mp4 Type MIME : audio/mp4 Fichier .mp3 Type MIME : audio/mpeg Fichier .m4a Type MIME : audio/x-m4a Fichier .rm, .ram et .ra Type MIME : audio/x-pn-realaudio-plugin Fichier .wma Type MIME : video/x-ms-wma
Raliser un podcast pour iTunes

Les podcasts sont des documents sonores ou vidos tlchargeables et qui pourront tre facilement lus depuis un lecteur de type mp3. La particularit du podcast est la possibilit de sy abonner via un l RSS. De nombreux blogs et sites Internet proposent de tels documents sonores en tlchargement. Cette section est consacre la ralisation et la mise en ligne dun podcast destin tre diffus via iTunes.
Enregistrer un podcast
Lenregistrement du commentaire audio du podcast se ralise avec diffrents logiciels parmi lesquels on peut citer Audacity et QuickTime Pro. Audacity prsente lavantage dtre gratuit et de sintgrer parfaitement aux plates-formes Macintosh, Windows et Linux (voir la section prcdente Obtenir des documents sonores formats pour le Web ). Pour enregistrer un podcast dans Audacity, sauvegardez le document au format .mp3. Si vous utilisez QuickTime Pro, les formats possibles seront le format .mov, propre QuickTime, ou le format .m4v, conu pour le lecteur iPod.
422
Mettre en ligne
Une fois le document sonore ralis, dposez-le sur votre serveur Web via la fentre Fichier de Dreamweaver. Le document sonore devra tre accompagn dun chier de description XML.
Le chier XML
Le document raliser pour crer un l RSS utilisable avec iTunes est un document utilisant les spcications RSS 2.0. Pour crer un document XML dans Dreamweaver, slectionnez le menu Fichier> Nouveau>Page vierge>XML. Un nouveau document souvre alors avec len-tte XML. Le type dencodage devrait tre utf-8. Pour raliser un document XML pour iTunes, vous devez utiliser un attribut xmlns dans la balise <rss>. Le code ci-dessous prsente les deux premires lignes de code de tout document pour iTunes. Notez que la balise <rss> est obligatoire et doit comprendre lattribut version.
<?xml version="1.0" encoding="UTF-8"?> <rss xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" version="2.0">
En plus de ces deux lments de description, un document XML doit contenir llment channel (aussi nomm canal en franais), qui permettra de dnir le contenu gnral, et llment item, qui dnira de manire prcise les diffrents ux disponibles. Llment channel doit imprativement contenir les lments title, link et description. Il peut se comparer la pochette dun disque : il indique le titre et une description du contenu. Voici lexemple de code prcdent dans lequel nous avons ajout llment channel :
<?xml version="1.0" encoding="UTF-8"?> <rss xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" version="2.0"> <channel> <title>Musiques du monde</title> <link>http://www.exemple.fr/podcasts/index.html</link> <description>Ce podcast prsente chaque semaine un extrait des dernires nouveauts.</description>
Llment item permet de spcier le document tlcharger. Techniquement, il ny a pas dlment obligatoire, cependant, les lments permettant de dnir le titre et le lien paraissent utiles pour que le podcast ait une relle utilit. Le code ci-dessous, dans lequel nous avons ajout llment item, reprsente le code minimal saisir pour raliser un podcast avec iTunes :
<?xml version="1.0" encoding="UTF-8"?> <rss xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" version="2.0"> <channel>
423
<title>Musiques du monde</title> <link>http://www.exemple.fr/podcasts/index.html</link> <description>Ce podcast prsente chaque semaine un extrait des dernires nouveauts.</description> <item> <title>Breitz music</title> <enclosure url="http://www.exemple.fr/flux/breton-1.mp3" length="8727310" type="audio/mpeg" /> <guid>http://www.exemple.fr/flux/breton-1.mp3</guid> </item> </channel> </rss>
La balise <enclosure> contient trois attributs : lURL de la source sonore qui doit tre prcde du protocole http://, sa taille en octets et son type MIME. Voici une liste des diffrents types de documents avec leur type MIME accept dans iTunes.
Tableau 18-3 Les types MIME accepts dans iTunes
Fichier Type MIME
audio/mpeg audio/x-m4a video/mp4 video/x-m4v video/quicktime application/pdf
.mp3 .m4a .mp4 .m4v .mov .pdf
La balise <guid> est un identicateur unique de litem. Si elle est spcie, iTunes pourra alors dterminer si un item est nouveau ou non.
Intgrer un podcast la page HTML
Lintgration du lien vers un ux se ralise de trois manires, qui peuvent coexister au sein dune mme page. La premire mthode consiste prsenter ladresse du chier XML. Elle sera copie par linternaute qui la collera dans la zone Avanc>Sabonner au podcast du logiciel iTunes. La seconde mthode permettra linternaute de sabonner automatiquement au podcast par un simple clic. Pour crer dans une page HTML un lien qui abonne automatiquement le ux au lecteur iTunes, spciez un lien sur une image ou un texte avec le protocole itpc. Dans lexemple ci-dessous, un clic sur limage musicItunes.jpg permettra dinstaller automatiquement dans iTunes le ux nomm flux-rss.xml.
<a href="itpc://www.exemple.com/flux/flux-rss.xml"><img src="musicItunes.jpg"></a>
424
La troisime mthode, valable pour de nombreux navigateurs, sauf Internet Explorer 6, consistera crire le lien vers le chier XML pralablement cr. Sous Firefox, ce lien ouvrira une nouvelle page (voir gure 18-4). Linternaute pourra cliquer sur le lien pour couter le document sans le tlcharger.
Figure 18-4
Louverture dun chier de ux dans Firefox
Conclusion
Incorporez des liens vers des musiques, proposez des tlchargements, des podcasts, mais nimposez pas. Linternaute doit faire lui-mme le choix de cliquer pour couter un morceau musical, et plus forte raison si vous ne pouvez pas modier le volume sonore ni arrter le son. Dreamweaver permet dintgrer du son dans les pages Web via lutilisation de plug-ins, de contrles activeX et dautres applications, mais ceux-ci dpendent directement du niveau dquipement de lordinateur hte. Cest la raison pour laquelle un document sonore doit toujours tre un complment du contenu de la page.
19
Intgration des lments Flash
Le logiciel Flash et, par consquent les formats quil gnre, constituent aujourdhui une solution trs intressante pour la cration de sites graphiques. Le plug-in Flash tant install sur la plupart des ordinateurs, lusage du format .swf nest donc plus un frein pour la diffusion de vidos. Plus encore que le format .swf, le format Flash vido .flv a permis un vritable essor de la diffusion de vidos sur Internet et il est aujourdhui courant de lire des documents dans ce format. Ce chapitre est entirement consacr aux diffrents documents Flash gnrs depuis le logiciel Flash ou depuis Dreamweaver. Nous y aborderons les points suivants : obtenir une vido .flv ; incorporer une vido .flv ; incorporer un document .swf ; les vidos fond transparent ; incorporer un document FlashPaper.
Crer une vido au format .v

Le format .flv est propre Flash et il est lisible par tous les navigateurs possdant le plug-in Flash. Le logiciel Adobe Media Encoder est fourni avec de nombreuses suites dAdobe. Il permet de crer facilement une vido au format .flv ou f4v. Dautres solutions existent, notamment le logiciel Riva-v-encoder sur PC ou ffmpegx sur Mac.
426
Adobe Media Encoder

Adobe Media Encoder est lapplication dencodage au format .flv ou .f4v de Flash CS4 Pro. Cette application est fortement conseille si vous devez encoder de nombreuses vidos.
Figure 19-1
Linterface de Flash Video Encoder
Dreamweaver CS4 prend uniquement en charge les chiers vido incorpors au format flv. Le format f4v est en fait un conteneur pour le codec H264. Si vous souhaitez utiliser des vidos encodes en H264, utilisez un conteneur, tel que .mov, et suivez la procdure dincorporation dcrite au chapitre 17. Voici la procdure suivre pour crer une vido .flv dans Adobe Media Encoder : 1. Lancez lapplication Adobe Media Encoder 2. Pour travailler facilement avec cette application, nous allons modier les rglages par dfaut des Prfrences. Depuis le menu Modier (Edit), choisissez Prfrences. Dans la catgorie Langue (Language) choisissez Franais. Dans la catgorie Format dafchage (Display Format), choisissez Code temporel de 25 i/s (25 fps). Dans la catgorie Luminosit de linterface (User Interface Brightness), choisissez Plus clair (Lighter). 3. Validez et redmarrez Adobe Media Encoder pour que ces changements soient pris en compte.
Intgration des lments Flash CHAPITRE 19
427
4. Cliquez sur le bouton Ajouter pour importer les diffrentes vidos encoder. Choisissez pour chacune delles le format v/f4v. 5. Choisissez, dans la zone Format, le format v/f4v en utilisant le menu droulant.
Figure 19-2
Le choix du format v/f4v
6. Choisissez un rglage prdni depuis la zone Prdnir, puis lun des rglages au format v.
Figure 19-3
Choisir un prrglage
7. Choisissez le nom du document nal en cliquant sur le lien hypertexte de la zone Fichier de sortie. 8. Cliquez sur le bouton Dmarrer la le dattente pour commencer lencodage des vidos.
428
Les options avances dAdobe Media Encoder
Pour obtenir les options avances pour chacune des vidos, cliquez sur le lien hypertexte de la zone Prdnir. La fentre des rglages dexportation (gure 19-04) souvre.
Figure 19-4
La fentre des rglages dexportation
Longlet de la gure 19-4 permet de prvisualiser la source de la vido encoder. Le deuxime onglet (repre de la gure 19-04) permet de prvisualiser la sortie de la vido. La vido en cours dencodage safche au centre de la fentre (repre de la gure 19-04). Situ au bas de la fentre, un curseur dplaable permet de modier la dure de la squence (repre de la gure 19-04). Dplacez les triangles placs gauche et droite de la ligne de dure pour modier la plage de la vido encoder (gure 19-05). Cliquez sur le bouton Prconguration (repre de la gure 19-04) pour obtenir les rglages avancs de la prconguration choisie. Les rglages avancs (gure 19-06) permettent de modier les options par dfaut des prrglages. Longlet vido de ces rglages permettra notamment de spcier lencodage de la couche A1pha pour obtenir une vido sur un fond transparent.
429
Figure 19-5
Modier la plage de vido encoder
Figure 19-6
Longlet Vido des rglages avancs
430
Longlet Vido (repre de la gure 19-06) permet laccs aux rglages de limage vido. Longlet Audio (repre de la gure 19-06) permet laccs aux rglages audio. Lencodage au format Flash video (v) propose deux Codec Sorenson Spark et On2VP6 (repre de la gure 19-06). Le Codec On2VP6 est le plus rcent et donnera de meilleurs rsultats. Il permettra galement de conserver la couche Alpha dune vido pour une diffusion avec un fond transparent. Cochez Coder la couche alpha si votre vido possde une telle couche permettant la transparence. Vous pouvez modier la taille de limage vido, ainsi que le nombre dimages par seconde (repre de la gure 19-06). Longlet des rglages de dbit (repre de la gure 19-06) propose plusieurs options. CBR Dbit constant permet de choisir un dbit cible pour lencodage de la vido. Avec VBR Dbit variable, le dbit sera diffrent suivant la vlocit des mouvements de la vido. Cette mthode permettra gnralement une meilleure optimisation du document. Dans la zone des rglages avancs (repre de la gure 19-06), si vous cochez Dnir la distance entre les images cls, vous pourrez choisir lintervalle entre les images entirement dnies.
Incorporer une vido .v dans une page HTML

Dans Dreamweaver, lincorporation dune vido au format .flv seffectue par lintermdiaire dune commande spcique. Voici la marche suivre pour incorporer une vido .flv dans une page Web : 1. Ouvrez une nouvelle page HTML et insrez-y une balise <div>. Vous pourrez ainsi facilement positionner llment vido par la suite. 2. Slectionnez le menu Insertion>Mdias>FLV. La fentre prsente la gure 19-7 souvre alors et vous permet de paramtrer les options suivantes : Liste droulante Type de vido Permet de choisir le type de vido, qui doit correspondre celui spci lors de lencodage de la vido. Champ URL Permet de slectionner la vido incorporer. Liste droulante Apparence Permet de spcier laspect de la barre de commandes de la vido. Les enveloppes Clear Skin et Corona Skin se superposent limage vido, mais la taille globale ne change pas. Lenveloppe Halo Skin se place sous la vido et ajoute une bordure autour de limage. Dans ce cas, la taille globale augmente de 22 pixels en largeur et de 51 pixels en hauteur. Champs Largeur et Hauteur Permettent de spcier la taille souhaite pour limage vido. Ces champs peuvent tre renseigns automatiquement en cliquant sur le bouton Dtecter la taille.
431
Case cocher Lecture auto. Permet de lire la vido ds louverture de la page. Case cocher Rembob. auto. Permet dafcher la premire image lorsque la vido est termine.
Figure 19-7
La fentre Insrer un chier Flash Video
3. Une fois vos rglages effectus, cliquez sur OK pour les valider. Lemplacement de la vido apparat alors sur la page. 4. Pour lire la vido, enregistrez la page et testez-la dans le navigateur en appuyant sur la touche F12.
Incorporer un document .swf dans une page HTML

Dans Dreamweaver, lincorporation dun chier .swf dans une page Web se ralise aussi facilement que dans le cas dune image. Voici la marche suivre pour incorporer un document .swf dans une page Web : 1. Ouvrez une nouvelle page HTML et cliquez sur la catgorie Commun du panneau Insertion. Cliquez sur licne Mdias et choisissez SWF dans la liste propose.
432
2. Dans la bote de dialogue qui souvre alors, slectionnez le document .swf souhait. 3. Cliquez sur OK, le document se place alors dans la page lendroit choisi. Cliquez sur llment insr pour en afcher ses proprits (gure 19-8). Si loption afcher les lments invisibles est coche (Menu Afchage>Assistantes visuelles>lments invisibles), un onglet de couleur bleu apparat en haut gauche de llment lors du survol de la souris.
Figure 19-8
Longlet permettant dafcher un contenu alternatif
Un clic sur lil situ droite de cet onglet permet dafcher un contenu alternatif en cas dabsence du plug-in Flash. Ce contenu peut alors tre modi facilement.
Figure 19-9
Le contenu alternatif
Lorsque llment swf Flash est insr, enregistrez la page HTML. Dreamweaver vous informe que deux documents JavaScript (.js) seront ncessaires sa lecture. Noubliez pas de les transfrer sur le serveur web en mme temps que la page HTML et que le document swf. Voici les diffrentes proprits applicables un document swf :
Figure 19-10
Les proprits des chiers swf
433
Donnez un nom didentiant llment swf dans la zone FlashID (repre de la gure 19-10). L et H (repre de la gure 19-10) permettent dentrer la taille du document. Un document swf tant de type vectoriel, vous pouvez lui attribuer une taille quelconque. Le champ Fichier (repre de la gure 19-10) permet de spcier le chemin vers le chier swf lire. Couleur darrire-plan du chier swf (repre de la gure 19-10). Cette couleur remplace la couleur attribue la scne Flash. Le bouton Modier (repre de la gure 19-10) ouvre le document courant dans Flash pour y apporter des modications. Classe (repre de la gure 19-10) permet dattribuer une classe au document swf. Les deux options Boucle et Lecture auto (repre de la gure 19-10) permettent de lire lanimation de manire continue (Boucle) et de la lire automatiquement lors de lafchage de la page HTML (Lecture auto). Espace V et Espace H (repre de la gure 19-10) permettent dattribuer au document swf un espace droite et gauche (Espace V) et en haut et en bas (Espace H). Nutilisez pas cette option si vous souhaitez rester compatible XHTML 1.0 Strict. Choisissez un niveau de qualit (repre de la gure 19-10). Un niveau de qualit lev demande un processeur puissant. Loption Basse automatiquement privilgie la vitesse au dpart de lanimation, mais afche une bonne qualit par la suite si cela est possible. Loption Eleve automatiquement afche des bonnes qualits de vitesse et de rendu au dpart et modie ensuite, si besoin, la qualit visuelle. Loption Echelle (repre de la gure 19-10) permet de choisir la mthode dafchage de lanimation suivant les tailles crites en largeur et hauteur si celles-ci ne sont pas homothtiques celle de lanimation. Loption Taille exacte dformera lanimation. Loption Aucune bordure ne fera apparatre quune partie de lanimation. Loption Afcher tout rduira ou agrandira lanimation de manire proportionnelle. Loption Aligner (repre de la gure 19-10) permet de choisir la mthode dalignement dun texte plac ct du swf. Nutilisez pas cette option si vous souhaitez rester compatible XHTML 1.0 Strict. Loption Wmode (repre de la gure 19-10) permet de choisir la mthode dafchage de lanimation dans la page du navigateur. Fentre afche lanimation au premier plan de la page HTML, mme si des lments en position absolue sont placs avec un index suprieur. Opaque est loption par dfaut et permet de placer des lments en position absolue au-dessus de lanimation. Transparent permet de jouer une animation sur un fond transparent. La couleur de la scne, attribue dans Flash, disparat. Lire permet de lire lanimation dans linterface Dreamweaver. Paramtres ouvre la fentre des Paramtres (repre de la gure 19-10).
434
Les vidos fond transparent

Le format .flv associ au codec On2 VP6 supporte la couche alpha. On peut ainsi tourner une vido sur un fond uni et transformer par la suite ce fond en couche alpha transparente. Gnralement, ce genre de vido est tourn sur un fond vert. Des logiciels de montage ou de compositing, tels que Premiere, After Effects ou Final Cut Pro, permettrent de transformer ce fond vert en couche alpha transparente. Dans Dreamweaver, lincorporation dune telle vido ne peut se raliser que par lintermdiaire dun chier .swf. Voici la marche suivre pour placer une vido sur fond transparent dans une page HTML (le logiciel utilis ici est Adobe Premiere Pro) : 1. Dans Premiere Pro CS4, ouvrez une vido tourne sur un fond uni et bien clair, gnralement un fond vert. 2. Placez cette squence sur lchelle de temps, appliquez-lui leffet Incrustation Chrominance ou Incrustation non rouge. Effectuez les rglages dans les options deffets pour obtenir la couleur de transparence. 3. Choisissez Exportation Adobe Media Encoder. Dans les rglages dexportation, slectionnez Adobe Flash Video. Dans longlet Codec, choisissez On2 Vp6 et cochez coder la couche alpha dans la zone des rglages vido de base. 4. Importez cette vido dans le logiciel Flash CS4. Placez la vido sur le scnario de Flash, puis exportez la squence pour obtenir un document .swf. 5. Ouvrez Dreamweaver et importez la squence Flash selon la mthode prsente prcdemment. Dans les proprits, choisissez Transrent pour loption Wmode. Le document .swf est prsent sur fond transparent. noter que lattribut wmode nest pas compatible avec tous les navigateurs.
Incorporer un document FlashPaper

FlashPaper est un outil qui permet de crer des documents consultables et imprimables, aux formats .swf et .pdf. Dans Dreamweaver, lincorporation dun document FlashPaper se ralise trs facilement et le rendu dans le navigateur prsente une zone avec des outils intuitifs. La gure 19-11 prsente le rendu dun document FlashPaper dans Firefox. Pour incorporer un document FlashPaper, slectionnez le menu Insertion>Mdias>FlashPaper. Le document se place directement dans la page HTML.
435
Figure 19-11
Le rendu dun document FlashPaper dans Firefox
Conclusion
La technologie Flash est trs prsente sur de nombreux sites Internet. Dreamweaver lintgre facilement et offre une approche particulirement intressante pour inclure des lments vido au format .flv. En effet, avec ce format de vidos, vous pourrez ajouter une dimension multimdia vos sites, sans pour cela y consacrer de nombreuses heures de travail et de test dans les diffrents navigateurs.
Partie IV
Gestion de donnes
20
Cration de pages dynamiques avec PHP/MySQL
La plupart des sites actuels sont relis une base de donnes en ligne an de mettre en uvre des applications avances ou simplement de mettre jour le contenu du site depuis une interface dadministration en ligne. Dreamweaver permet dsormais de dvelopper des sites dynamiques de ce type sans quil soit ncessaire dtre dveloppeur ni de matriser un langage de programmation serveur (comme PHP). Pour cela, il suft de congurer des comportements de serveur qui gnreront ensuite le code PHP automatiquement. Dans ce chapitre, vous apprendrez raliser certains de ces comportements de serveur, an de pouvoir intgrer facilement des applications dynamiques votre site.
Environnement de dveloppement PHP/MySQL

Choisir linfrastructure serveur
Contrairement un site statique, un site dynamique manipule des informations enregistres dans une base de donnes. Pour cela, il les rcupre grce une technologie serveur et les intgre ensuite dans la page afche dans le navigateur. Pour pouvoir utiliser ces technologies, vous devrez disposer dune infrastructure serveur adquate car plusieurs applications sont ncessaires leur fonctionnement ct serveur : un serveur Web (le serveur Apache est le plus frquemment utilis) ; un langage de scripts serveur install sur le serveur Web (dans cet ouvrage, nous utiliserons PHP) ;
440
Gestion de donnes PARTIE IV
un serveur de base de donnes (dans cet ouvrage, nous utiliserons MySQL). Selon les ressources matrielles dont vous disposez, plusieurs solutions peuvent tre exploites : La premire solution consiste utiliser le serveur de production distant. Pour cela, vous devez disposer dune connexion permanente et rapide Internet, ainsi que dun serveur Web distant quip dune base de donnes MySQL et dun moteur de scripts PHP. La deuxime solution est la plus exigeante. Elle consiste utiliser un serveur de dveloppement install sur le rseau local. Elle concerne surtout les socits de dveloppement Internet qui ont leur disposition un serveur Web en local, avec PHP et MySQL, en plus de leur serveur distant de production. La troisime solution est accessible tous puisquil suft dinstaller sur son poste de dveloppement une infrastructure serveur avec PHP et MySQL qui reproduira en local le mme comportement que le serveur Web distant (voir gure 20-1). La publication nale du site sur le serveur de production sera ensuite ralise laide dun serveur FTP.
Figure 20-1
Organisation dune infrastructure serveur
Nous avons retenu la troisime solution pour raliser nos dmonstrations car elle pourra tre utilise par tous les lecteurs de cet ouvrage. noter que les concepts qui seront dvelopps dans les sections suivantes sont identiques quelle que soit la mthode retenue. An de vous accompagner dans la mise en uvre de votre plateforme de dveloppement, vous verrez dans la section suivante comment installer une infrastructure serveur locale.
Cration de pages dynamiques avec PHP/MySQL CHAPITRE 20
441
Les protocoles Internet Internet permet de relier de nombreux ordinateurs distants par un support physique. Cependant, pour que ces derniers puissent dialoguer, ils doivent utiliser un mme protocole. Le protocole pour le Web dInternet est le HTTP, qui permet aux internautes de consulter (ou dvaluer dans notre cas) des pages Web laide de leur navigateur. Il existe galement dautres protocoles ddis des mdias spciques ou permettant daccder des services en ligne. On peut citer les protocoles SMTP et POP3, qui permettent de grer les e-mails ou encore le protocole FTP, qui permet le transfert (ou la publication dans notre cas) de chiers dun ordinateur lautre.
Mettre en uvre une infrastructure serveur

Infrastructure serveur pour Mac La suite WampServer 2 prsente dans cette section est destine aux ordinateurs PC. Les utilisateurs de Mac devront installer une suite quivalente adapte leur machine. Dans ce cas, nous vous suggrons de tlcharger la suite Mamp ladresse www.mamp.info. Une fois tlcharge sur votre Mac, il sufra de copier la suite Mamp dans le rpertoire des applications pour que les serveurs soient oprationnels. Dans ce cas, la conguration de Dreamweaver, dtaille ci-aprs, sera semblable, hormis le fait que les adresses des serveurs devront tre suivies de leur numro de port (localhost:8888 pour le serveur Apache et localhost:8889 pour le serveur MySQL). Un complment illustr concernant lutilisation de Mamp est disponible dans les ressources tlchargeables de cet ouvrage sur le site de lditeur (www.editions-eyrolles.com).
Procdure dinstallation de la suite WampServer 2
Pour tlcharger gratuitement la dernire version de WampServer 2, consultez le site http:// www.wampserver.com. Cliquez sur le lien Tlchargement et remplissez le formulaire. Vous serez ensuite redirig vers la page du site Sourceforge.net ddie WampServer 2 o vous pourrez tlcharger le chier excutable sur votre ordinateur. Une fois le chier enregistr, lancez linstallation en double-cliquant sur linstallateur. Une premire fentre apparat, vous recommandant de fermer toutes les applications actives avant de lancer linstallation. De mme, si vous aviez dj une ancienne version de cette suite (nomme Wamp 5), il faudra alors la dsinstaller avant dinstaller la nouvelle version WampServer 2. Cliquez sur le bouton Next > pour faire apparatre les conditions dutilisation (License Agreement) quil faut valider. Dans lcran suivant, choisissez le rpertoire dans lequel vous souhaitez installer le logiciel. Nous vous suggrons de valider loption par dfaut (C:\wamp). La fentre suivante vous demande si vous souhaitez crer un raccourci vers WampServer 2 dans la barre de lancement rapide et sur le Bureau. Cochez ventuellement ces options et cliquez sur Next >. Un rcapitulatif des paramtres dinstallation safche. Sils vous conviennent, cliquez sur le bouton Install sinon, cliquez sur le bouton < Back pour les modier. Linstallation dmarre et un indicateur afche ltat davancement de la tche. Si Firefox est install sur votre ordinateur, un message apparat vous demandant si vous souhaitez le choisir comme navigateur par dfaut. Conrmez cette bote de dialogue pour utiliser
442
Firefox par dfaut lors de la ralisation de vos pages dynamiques. Choisissez ensuite le serveur SMTP souhait (indiquez le serveur de messagerie sortant de votre fournisseur daccs Internet, smtp.wanadoo.fr, par exemple). Indiquez galement votre e-mail et cliquez sur le bouton Next > pour valider vos choix. Lcran suivant vous indique que linstallation de WampServer 2 sest correctement droule et vous propose de lancer le programme (case prcoche par dfaut). Cliquez sur le bouton Finish. WampServer 2 dmarre et une icne en forme de demi-cercle apparat dans la barre des tches de votre ordinateur. Cette icne peut avoir trois tats : icne compltement blanche Les deux serveurs, Apache et MySQL sont en tat de marche (voir repre de la gure 20-2) ; les deux premiers tiers du demi-cercle sont jaunes Au moins lun des deux serveurs est arrt (ou pas encore dmarr) ; le premier tiers du demi-cercle est rouge Les deux serveurs sont larrt.
Arrter et dmarrer WampServer 2
Avant dutiliser WampServer 2, il est utile de rappeler la procdure de gestion des serveurs et du logiciel pour vos futures utilisations. Pour commencer, je vous invite arrter les serveurs de WampServer 2. Pour cela, cliquez sur licne de WampServer 2 dans la barre des tches (voir repre de la gure 20-2), puis dans le menu contextuel qui safche (nomm par la suite manager de WampServer 2). Slectionnez Stop All Services (voir gure 20-2). Licne doit alors changer dtat et son premier tiers devient rouge. Pour redmarrer les serveurs de WampServer 2, cliquez nouveau sur licne et slectionnez Start All Services. noter que si licne de WampServer 2 reste jaune ou rouge aprs avoir cliqu sur cette commande, cela indique que vos serveurs (ou lun de vos serveurs) ne sont plus oprationnels. Dans ce cas, cliquez sur la commande Restart All Services du manager pour ractiver le(s) serveur(s) de WampServer 2. Nous venons de voir la procdure pour grer larrt et le redmarrage des serveurs de WampServer 2. Si vous dsirez compltement arrter lapplication, cliquez droit sur licne de la barre des tches et slectionnez Exit (licne disparat alors). Pour relancer WampServer 2, cliquez sur Dmarrer>Tous les programmes>WampServer>start WampServer. La mme dmarche devra dailleurs tre effectue lors du dmarrage de votre ordinateur pour lancer WampServer 2, sauf si vous avez coch la case de dmarrage automatique lors de linstallation du logiciel (voir section prcdente).
Dcouvrir le manager de WampServer 2
La liste ci-dessous prsente les diffrentes commandes du manager de WampServer 2 (voir gure 20-2) : Locahost Permet daccder au Web local et de tester toutes les pages enregistres sous la racine www (soit http://localhost/ qui correspond la racine situe lemplacement C:/wamp/www/).
443
Figure 20-2
Utilisation de WampServer 2 : ds le dmarrage du logiciel, une icne apparat dans la barre des tches. Cliquez sur cette icne pour afcher le manager de WampServer 2.
PhpMyAdmin Permet daccder au gestionnaire de base de donnes MySQL nomm phpMyAdmin (soit lalias http://localhost/phpmyadmin/). SQLiteManager Permet daccder au gestionnaire de base de donnes intgr PHP nomm SQLite (soit lalias http://localhost/sqlitemanager/). www directory Donne accs un explorateur Windows congur pour souvrir automatiquement dans le rpertoire racine www (C:\wamp\www\). Apache Permet daccder diffrents sous-menus dadministration du serveur Apache. Vous pourrez ainsi arrter le serveur (Stop Service) et le redmarrer (Restart Service) depuis le sous-menu Service, accder la gestion des modules complmentaires depuis le sous-menu Apache modules, crer des rpertoires alias (diffrents du rpertoire par dfaut www) depuis le sous-menu Alias directories ou encore accder aux chiers mmorisant les dernires erreurs serveur ou permettant la conguration du serveur Apache (httpd.conf). Apache Permet daccder diffrents sous-menus dadministration du module PHP. Vous pourrez ainsi congurer rapidement les options PHP depuis le sous-menu PHP settings, accder la gestion des extensions PHP depuis le sous-menu PHP extensions ou encore accder aux chiers mmorisant les dernires erreurs PHP ou permettant la conguration du module PHP (php.ini). MySQL Permet daccder diffrents sous-menus dadministration du serveur MySQL. Vous pourrez ainsi arrter le serveur (Stop Service) et le redmarrer (Restart Service) depuis le sous-menu Service ou encore accder aux chiers mmorisant les dernires erreurs MySQL ou permettant la conguration du serveur MySQL (my.ini).
444
Start All Services Permet de dmarrer tous les services en mme temps, soit les serveurs Apache et MySQL. Stop All Services Permet darrter tous les services en mme temps, soit les serveurs Apache et MySQL. Restart All Services Permet de redmarrer tous les services en mme temps, soit les serveurs Apache et MySQL. Put Online Autorise laccs du serveur tous (online) ou le limite un usage local (ofine, option par dfaut identie par la prsence dun petit cadenas au centre de licne en demi-cercle dans la barre des tches). Si vous exploitez WampServer uniquement pour vos dveloppements, nous vous recommandons de conserver la conguration par dfaut an dinterdire laccs au serveur aux utilisateurs externes.
Dune version lautre Selon la version du logiciel installe et votre systme dexploitation, les crans et les procdures dtailles prcdemment peuvent tre trs lgrement diffrents. En guise de rfrence, nous avons utilis la version WampServer 2 pour nos dmonstrations. Si vous utilisez une autre version, il est possible que le manager soit organis diffremment. Il nen demeure pas moins que le fonctionnement de ces logiciels reste identique dune version lautre et que vous naurez pas de difcult adapter les procdures dtailles dans cet ouvrage.
Tester le serveur local

Pour tester le bon fonctionnement du serveur Web et du moteur PHP, nous allons commencer par crer un script PHP laide dun simple diteur de texte. Pour cela, ouvrez le Bloc-notes de Windows via le menu Dmarrer>Tous les programmes>Accessoires>Bloc-notes (ou Simple Texte sur Mac). Saisissez ensuite les trois lignes de code suivantes dans lditeur. Les balises encadrant linstruction permettent dindiquer quil sagit de PHP. Linstruction echo permet dafcher dans le navigateur le texte plac entre guillemets.
<?php echo "Bonjour, PHP fonctionne" ; ?>
Enregistrez le chier dans le rpertoire C:\wamp\www\SITEmontagne sous le nom bonjour.php, en prenant soin de slectionner le type Tous chiers et en ajoutant lextension .php. Le rpertoire SITEmontagne sera cr sous www lors de lenregistrement de ce premier chier. Ce mme rpertoire sera utilis dans les sections suivantes pour tester les exemples de comportements serveurs et dapplications PHP, cest pourquoi nous vous conseillons dutiliser les mmes conventions de nommage. Dans le Bloc-notes, assurez-vous que la barre de titre du chier afche bien le nom que vous venez de lui attribuer (voir repre de la gure 20-3) et fermez ensuite la fentre.
445
Figure 20-3
La page Web local (option Localhost du manager) permet daccder au rpertoire SITEmontagne, puis douvrir le chier bonjour.php dans le navigateur.
Ouvrez maintenant le manager de WampServer 2 en cliquant sur son icne dans la barre dtat (voir repre de la gure 20-3). Afchez ensuite la page Web local en slectionnant Localhost depuis le manager (voir repre de la gure 20-3). Le rpertoire SITEmontagne
446
doit alors apparatre dans la rubrique Vos Projets. Cliquez sur le lien SITEmontagne (voir repre de la gure 20-3) pour ouvrir une fentre qui afche la liste de tous les chiers contenus dans ce rpertoire. Dans le cas prsent, seul le chier bonjour.php apparat. Si vous cliquez sur le chier bonjour.php (voir repre de la gure 20-3), vous envoyez alors une requte au serveur Apache pour ouvrir le chier dans le navigateur. Si le serveur Web et le moteur PHP fonctionnent correctement, le message Bonjour, PHP fonctionne doit safcher dans le navigateur (voir repre de la gure 20-3). Il est en outre intressant dobserver le code source envoy au navigateur (slectionnez pour cela le menu Afchage>Code source de la page). Vous constatez en effet que le code ne comporte plus les balises PHP ni linstruction echo saisies lors de la cration du chier, mais uniquement le message afch dans le navigateur. Ceci sexplique par le fait que lors de lappel du chier, celui-ci est dabord excut par le moteur PHP du serveur Apache et cest la page rsultante en HTML qui est ensuite envoye au navigateur pour son interprtation nale.
Ne jamais supprimer le chier index.php de la racine www La page Web local qui safche quand vous accdez au localhost par le manager de WampServer 2, nest autre que le chier index.php qui se trouve la racine www. Si vous tenez conserver la page qui afche les diffrents rpertoires de vos sites, il faudra veiller ne pas supprimer ce chier. Enn, ct organisation, nous vous conseillons de crer un rpertoire diffrent sur cette mme racine chaque fois que vous ajouterez un nouveau site sur votre serveur local. Ainsi, vous pourrez accder vos diffrents sites trs facilement depuis la page du Web local.
Grer des extensions PHP

Extensions installes par dfaut
Les extensions PHP sont des bibliothques de fonction ddies une utilisation spcique. Il existe, par exemple, des extensions ddies MySQL (php_mysql), la gestion des images (php_gd2) ou encore aux fonctions XML (php_domxml). Lors de linstallation de WampServer 2, certaines extensions PHP ont t installes par dfaut et sont donc immdiatement disponibles (php_mysql par exemple), mais il est aussi trs simple den installer dautres par le biais du manager de WampServer 2.
Installer une extension
Linstallation dune extension sur WampServer 2 est trs simple. Depuis le manager, slectionnez lentre PHP puis PHP extensions (voir repres et de la gure 20-4) et slectionnez lextension installer dans la liste propose (voir repre de la gure 20-4). Si le nom de lextension nest pas prcd dune coche noire, cela signie que lextension nest pas encore installe. Cliquez alors sur le nom de lextension pour lactiver. Redmarrez ensuite WampServer 2 en choisissant Restart All services depuis le manager. Rafchez la liste des extensions PHP an de vous assurer que lextension prcdemment slectionne a bien t installe (elle doit dsormais tre prcde de la coche noire).
447
Si vous tes sur un serveur distant, sachez quil est possible de vrier la prsence dune extension PHP en afchant un chier phpinfo.php (chier contenant une fonction phpinfo()) et en recherchant lentre correspondant lextension dans les tableaux de cette page. noter que sur WampServer 2, le chier phpinfo() est directement disponible depuis la page localhost accessible depuis lentre du mme nom dans le manager.
Figure 20-4
Pour installer une extension PHP, afchez la liste des extensions partir de lentre PHP extensions du manager, puis cliquez sur lextension installer.
Crer et grer une base de donnes MySQL

Notion de base de donnes
Sans entrer dans des explications avances sur le fonctionnement dune base de donnes, il est important de comprendre comment elle est structure et de connatre la terminologie employe. Une base de donnes est constitue denregistrements qui regroupent un ensemble dinformations (ou champs). Le champ qui permet de slectionner un enregistrement spcique est nomm cl primaire (linformation dune cl primaire doit tre unique). Lensemble des enregistrements partageant les mmes champs sappelle une table (voir gure 20-5). Si on compare la table un tableau traditionnel, les colonnes du tableau correspondent aux champs de la table et ses lignes aux enregistrements. Enn, une base de donnes peut contenir plusieurs tables, lies entre elles ou non.
Figure 20-5
Une table est constitue de champs et denregistrements.
448
Cahier des charges de la rubrique Randonnes

Pour bien comprendre le concept de la base de donnes, nous vous proposons de lillustrer par un exemple. Nous reprendrons pour cela le site Montagne-65, dcrit dans les chapitres prcdents, et nous allons dvelopper la rubrique Randonnes. Cette rubrique permettra aux visiteurs de consulter la liste des prochaines randonnes, liste qui sera alimente par une table de la base de donnes nomme randonnees (voir repre de la gure 20-6). Pour chaque randonne de la liste seront indiqus le nom de la randonne, le jour et une vignette illustrera le site visiter. Ces diffrentes randonnes seront classes par date croissante.
Figure 20-6
Organisation des pages et fonctionnalits de la rubrique Randonnes
449
Lorsque le visiteur cliquera sur le lien En savoir plus de la randonne slectionne (ou sur sa vignette), une che descriptive safchera lcran, indiquant la destination et le jour de la randonne ainsi que lheure, le lieu de dpart et la dure. Une photo du site visit illustrera la che. Ici aussi les informations de la page seront alimentes par la table randonnees (voir repre de la gure 20-6). Si le visiteur dsire sinscrire la randonne slectionne, il pourra alors cliquer sur un lien pour accder un formulaire dinscription. Ce formulaire rappellera la randonne concerne et invitera le visiteur renseigner son nom, prnom, tlphone et e-mail. Ds la validation du formulaire, ces informations iront enrichir une table de la base de donnes nomme inscriptions (voir repre de la gure 20-6). Pour mettre jour le site, un espace dadministration sera aussi ncessaire. Il devra tre scuris et lutilisateur devra sauthentier avant dy accder. Il comportera trois pages qui permettront de lister les diffrentes inscriptions aux randonnes, de les mettre jour ou encore de les supprimer. Ce petit cahier des charges va vous permettre de crer votre premire base de donnes (montagne_db). Celle-ci sera ensuite exploite dans les sections suivantes pour illustrer les diffrentes fonctionnalits dynamiques de Dreamweaver CS4.
Structure de la base de donnes montagne_db

Cette application est structure autour dune base de donnes contenant deux tables, elles-mmes constitues des champs mentionns ci-aprs. Table randonnees Regroupe les champs des informations concernant les diffrentes randonnes proposes (champs : ID, nom, jour, heure, depart, duree). Table inscriptions Regroupe les champs identiant les diffrents visiteurs qui se sont inscrits aux randonnes (champs : ID, nom, prenom, tel, email, randonneesID). Pour illustrer la notion de base de donnes, nous vous proposons danalyser la table
randonnees. Dans cette table, le second champ (nom) permet didentier le nom spcique de la randonne et quatre autres champs (jour, heure, depart et duree) sont destins mmoriser les informations caractrisant cette randonne. Quant au champ ID, il a pour
fonction didentier dune manire unique chaque enregistrement. Ce champ, obligatoire dans toutes les tables, sappelle cl primaire et sa valeur doit toujours tre diffrente dun enregistrement lautre. En outre, ds quun visiteur sinscrit une randonne, des donnes relatives la randonne concerne et aux coordonnes du visiteur sont enregistres dans les champs dune table inscription et chaque ajout dinformations constitue, dans la terminologie des bases de donnes, un enregistrement de la table (voir gure 20-7). En ce qui concerne les cls primaires, elles sont aussi souvent utilises pour lier les tables entre elles. Dans notre cas, par exemple, le champ randonneesID de la table inscriptions contient la mme valeur que la cl primaire ID dune des randonnes de la table randonnees. Dans ce cas, le champ qui contient une copie de la cl primaire pour lier deux tables sappelle une cl trangre.
450
Figure 20-7
Structure de la base de donnes montagne_db
Pour crer puis administrer une base de donnes MySQL, vous pouvez utiliser les commandes MySQL en ligne. Cependant, ces commandes ncessitent une connaissance avance des requtes SQL et les risques derreur sont relativement importants pour un programmeur dbutant. Une autre solution consiste utiliser le gestionnaire phpMyAdmin, prsent la section suivante.
PhpMyAdmin, un gestionnaire de bases de donnes convivial

PhpMyAdmin est une interface conviviale permettant de grer trs facilement une base de donnes, sans ncessiter une connaissance avance des requtes SQL. Le fait que linterface soit dveloppe en PHP la rend parfaitement adapte lutilisation conjointe dune base MySQL et dun moteur de scripts PHP. Elle peut donc fonctionner directement sur le serveur Web et tre accessible par le biais dun simple navigateur, ce qui explique sa prsence sur la plupart des sites dynamiques distants (actuellement, phpMyAdmin est le gestionnaire de bases de donnes prconis par la majorit des hbergeurs proposant des serveurs qui prennent en charge MySQL/PHP). On peut ainsi crer avec la mme facilit des bases de donnes et des tables en local comme sur le serveur distant. Grce au gestionnaire de bases de donnes phpMyAdmin, vous pourrez rapidement : crer et supprimer des bases de donnes ; crer, copier, supprimer et modier des tables ; supprimer, diter et ajouter des champs ; excuter des requtes SQL ;
451
importer et exporter des donnes au format CSV ; crer et exploiter des sauvegardes de tables.
Prsentation de linterface de phpMyAdmin
Comme nous lavons expliqu prcdemment, la suite logicielle WampServer 2 intgre le gestionnaire phpMyAdmin. Pour accder lcran du gestionnaire, assurez-vous que WampServer 2 est bien actif (son icne doit apparatre dans la barre des tches et elle doit tre blanche). Cliquez dessus pour ouvrir le manager et cliquez ensuite sur le lien phpMyAdmin. Le gestionnaire doit alors souvrir dans le navigateur. Lcran daccueil (voir gure 20-8) est partag en deux parties : le cadre de gauche permet de slectionner la base de donnes dsire, alors que la partie droite est utilise pour crer une nouvelle base. Un message dalerte afch en rouge vous rappelle que lutilisateur principal (root) est actuellement congur sans mot de passe et reprsente videmment une faille de scurit si ce serveur devait tre accessible de lextrieur (online). Nous aurons loccasion de dtailler la procdure pour grer les droits des utilisateurs dans une section suivante. En attendant, nous ne modierons pas le paramtrage du root, car nous nous limiterons un usage local de la base de donnes (ofine, revoir la prsentation du manager de WampServer 2 pour la conguration de cette option).
Figure 20-8
Lcran daccueil du gestionnaire de bases de donnes phpMyAdmin
452
Pour ceux qui dsirent passer directement lutilisation de Dreamweaver La section suivante traite des fonctions qui vous permettent de crer, modier ou supprimer une base de donnes et ses lments (tables, champs, enregistrements) grce phpMyAdmin. Nous indiquerons galement la procdure pour congurer un compte utilisateur et comment dnir ses droits pour accder une base de donnes depuis des pages dynamiques. Ces connaissances vous seront indispensables lors de llaboration de votre propre base de donnes par la suite. Cependant, si vous dsirez tudier cette partie plus tard, vous pouvez passer directement lutilisation de Dreamweaver. An de raliser les dmonstrations dans Dreamweaver qui utilisent la base de lapplication Montagne-65, vous devrez restaurer la sauvegarde de la base de donnes (montagne_db.sql), disponible sur le site de lditeur (www.editions-eyrolles.com) de linstaller sur votre serveur MySQL (voir la procdure de restauration dune base prsente la section Restaurer de ce chapitre). De mme, si vous ne crez pas le compte de lutilisateur montagne comme indiqu dans cette section, vous pourrez quand mme congurer une connexion la base (dans Dreamweaver) en utilisant le compte prcongur par dfaut (remplacer dans ce cas le nom de lutilisateur montagne par root et ne spcier pas de mot de passe).
Si on observe les choix proposs dans la liste des bases gauche de linterface phpMyAdmin, on dcouvre deux bases par dfaut : information_schema Cette base de donnes stocke toutes les informations relatives aux bases que le serveur MySQL entretient. Elle contient plusieurs tables en lecture seule. mysql Cette base est trs importante car elle contient toutes les tables qui permettent de congurer et de grer les diffrents droits des utilisateurs pour accder aux autres bases de donnes du serveur (nous verrons la n de ce chapitre comment crer et congurer un compte utilisateur pour pouvoir avoir accs la base MySQL depuis vos scripts dynamiques). Il ne faut donc jamais supprimer cette base sous peine de ne plus pouvoir utiliser le serveur MySQL. Soyez rassur, dans le cadre de cet ouvrage, vous naurez pas grer ces diffrentes bases. En revanche, nous utiliserons souvent ce menu pour accder la base de donnes utilisateur que nous allons crer dans la partie suivante (montagne_db).
Soyez prudent dans la modication des donnes Les deux bases installes par dfaut sont trs importantes dans le fonctionnement du serveur de base de donnes. Aussi, nous vous conseillons dtre trs prudent si vous dsirez modier le contenu de lune de ces bases car une mauvaise manipulation risque de rendre inoprant votre serveur MySQL.
Crer une base de donnes

Pour vous initier lutilisation de phpMyAdmin, vous allez crer une petite base de donnes en reprenant lexemple de lapplication Montagne-65 prsente prcdemment. Cette premire base est trs simple et comporte seulement deux tables.
453
Dnir le type de chaque champ
Pour chaque table, choisissez au pralable le type de chacun des champs. Pour illustrer ce paramtrage, nous avons utilis la table randonnees, pour laquelle nous avons dtaill la nature et la taille des six champs quelle contient (il convient den faire autant avec la seconde table avant de dterminer le type de chaque champ) : ID Identiant de lenregistrement (cl primaire), nombre entier positif ; nom Nom de la randonne, chane de caractres (50 caractres au maximum) ; jour Jour de la randonne, date ; heure Heure de dpart, heure et minute ; depart Lieu du dpart, chane de caractres (50 caractres au maximum) ; duree Dure estime de la randonne en heure, nombre 2 chiffres. Dans la terminologie des bases de donnes, on distingue trois grands types de champs : numrique (entier ou dcimal) ; texte (chane de caractres) ; date et heure. Pour chacune de ces familles, il existe un nombre important de types de donnes. Le choix du type de donnes au sein dune mme famille est important pour loptimisation de la base car il dtermine le meilleur compromis entre les valeurs ncessaires et lespace mmoire utilis. Pour notre premire base, nous nous limiterons lutilisation des principaux types, qui sont rsums dans les tableaux ci-dessous.
Tableau 20-1 Principaux types de champs numriques
Type Options (en maigre) et paramtres obligatoires (en gras) Taille mmoire (en octets) Description
TINYINT SMALLINT INT DECIMAL
(M) UNSIGNED (M) UNSIGNED (M) UNSIGNED (M,D)
1 2 4 M
Entier entre 0 et 255 en non sign ( UNSIGNED) et 128 et +127 en sign (sans option). Entier entre 0 et 65 535 en non sign ( UNSIGNED) et 32 768 et +32 767 en sign (sans option). Entier entre 0 et 16 777 215 en non sign ( UNSIGNED) et 8 388 608 et +8 388 607 en sign (sans option). Nombre sign enregistr sous forme de chane de caractres.
Dnition des options et des paramtres obligatoires : (M) : indique le nombre maximal de chiffres, limit 255. (M,D) : indique le nombre maximal de caractres et le nombre de dcimales afches. UNSIGNED : indique quil sagit dun nombre positif. Dans ce cas, il ny a pas de bit de signe et la valeur positive maximale est plus importante.
454
Gestion de donnes PARTIE IV Tableau 20-2 Principaux types de champs de texte

Type Options (en maigre) et paramtres obligatoires (en gras) Taille mmoire (en octets) Description
CHAR VARCHAR
(M) BINARY (M) BINARY
M<256 L+1
Chane de caractres dune longueur xe de M caractres. Chane de caractres dune longueur variable limite M caractres. La longueur relle de la chane est L (avec L<256). Texte de 1 65 535 caractres. La longueur relle du texte est L (avec L<65 536). numration de valeurs avec un maximum de 65 535 valeurs diffrentes.
TEXT ENUM valeur1,valeur2
L+2
Dnition des options et des paramtres obligatoires : (M) : indique le nombre maximal de chiffres, limit 255. BINARY : indique que la chane de caractres sera sensible la casse dans les oprations de comparaison et de tri (option utiliser avec prcaution).
Tableau 20-3 Principaux types de champs dates et heures

Type Options Taille mmoire (en octets) Description
Date au format AAAA-MM-JJ HH:MM:SS, de 1000-01-01 00:00:00 9999-12-31 23:59:59. Heure au format HH:MM:SS, de 838:59:59 838:59:59. Date au format AAAA-MM-JJ, de 1000-01-01 9999-12-31. Anne au format AAAA, de 1901 2155.
DATETIME TIME DATE YEAR
8 3 3 1
partir de ces informations, il faut maintenant attribuer chaque champ des deux tables de la base, le type de donnes qui lui correspond le mieux selon les exigences formules dans le cahier des charges. Les tableaux 20-4 et 20-5 indiquent les choix qui ont t raliss pour lapplication Montagne-65.
Tableau 20-4 Types des champs de la table randonnees
Table randonnees de la base montagne_db Nom du champ Type Taille/Valeurs Description
Petit entier (max. 65 535 en UNSIGNED). Identiant : cl primaire de la table.
ID nom
SMALLINT VARCHAR 50
Chane de caractres (limite 50 caractres).
Cration de pages dynamiques avec PHP/MySQL CHAPITRE 20 Tableau 20-4 Types des champs de la table randonnees (suite)
jour heure depart duree DATE TIME VARCHAR TINYINT 50
Format date (AAAA-MM-JJ). Format heure (HH:MM:SS). Chane de caractres (limite 50 caractres). Trs petit entier (max. 255 en UNSIGNED).
455
Tableau 20-5 Types des champs de la table inscriptions

Table inscriptions de la base montagne_db Nom du champ Type Taille/Valeurs Description
Trs petit entier (max. 255 en UNSIGNED). Identiant : cl primaire de la table
ID nom prenom tel email randonneesID
TINYINT VARCHAR VARCHAR INT VARCHAR SMALLINT 100 50 50
Chane de 50 caractres au maximum. Chane de 50 caractres au maximum. Entier. Chane de 100 caractres au maximum. Petit entier (max. 65 535 en UNSIGNED). Lien : cl trangre de la table randonnees.
Crer de la base de donnes avec phpMyAdmin
Une fois les types de champs choisis, nous pouvons commencer la cration de la base dans phpMyAdmin. Pour cela, ouvrez le manager de WampServer 2 et slectionnez phpMyAdmin. Le gestionnaire souvre alors dans le navigateur, saisissez le nom de la nouvelle base, soit montagne_db, dans le champ Crer une base de donnes (voir repre de la gure 20-9). Cliquez ensuite sur le bouton Crer situ droite de ce champ. Le nom de la nouvelle base doit alors safcher dans le cadre de gauche avec la mention Aucune table na t trouve dans cette base.
Figure 20-9
Lcran daccueil de phpMyAdmin vous invite saisir le nom dune nouvelle base.
456
Crer une table avec phpMyAdmin
Saisissez le nom de la table crer (randonnees, par exemple, pour la premire table de la base montagne_db) dans le champ Nom (voir repre de la gure 20-10) et renseignez le nombre de champs, soit 6 pour notre exemple (voir repre de la gure 20-10). Cliquez sur le bouton Excuter (voir repre de la gure 20-10). Lcran suivant est un formulaire destin renseigner les noms, types et paramtres des champs crer (voir gure 20-11). Pour chaque champ dnir, reportez dans les colonnes Champ, Type et Taille/Valeurs de ce formulaire (voir repre de la gure 20-11) les informations dnies prcdemment (voir tableau 20-4). Considrons que tous les champs sont indispensables et laissons les informations de la colonne Null de chaque champ avec loption not null. Il faut ensuite indiquer que le champ ID fait ofce de cl primaire et cocher cet effet le bouton radio de la colonne Primaire lextrme droite du formulaire (voir repre de la gure 20-11). Par ailleurs, an que les donnes de ce champ soient toujours diffrentes (une cl primaire doit toujours tre unique), slectionnez auto_ increment dans la colonne Extra (le compteur sera ainsi automatiquement incrment chaque ajout dun nouvel enregistrement). Cliquez sur le bouton Sauvegarder pour crer la table randonnes ainsi paramtre (voir repre de la gure 20-11).
Figure 20-10
Pour crer une nouvelle table, il faut renseigner son nom et indiquer le nombre de champs quelle contient
Figure 20-11
Informations relatives aux champs de la nouvelle table
457
Si vous navez pas fait derreur, un nouvel cran safche, indiquant la requte SQL automatiquement gnre par phpMyAdmin et prsentant un tableau rcapitulatif des proprits de la nouvelle table. Vous allez prsent crer la seconde table de la base montagne_db, soit la table inscriptions, en utilisant les informations du tableau 20-5. Pour cela, cliquez sur le nom de la base montagne_db dans le cadre de gauche ou en haut de chaque cran du gestionnaire (voir repres et de la gure 20-12). Dans le cadre de droite, saisissez cette fois inscriptions dans le champ Nom et 6 dans le champ Nombre de champs (voir repre de la gure 20-12). Cliquez sur le bouton Crer et, dans le nouvel cran qui safche, reportez les informations du tableau 20-5 dans le formulaire tout comme vous lavez fait pour la table randonnees (voir repre de la gure 20-13) sans oublier de congurer les paramtres de la cl primaire situs droite du formulaire (voir repre de la gure 20-13). Cliquez ensuite sur le bouton Sauvegarder pour crer la table inscriptions.
Figure 20-12
cran du gestionnaire permettant de crer de nouvelles tables et daccder toutes les actions possibles sur chacune des tables dj cres
Figure 20-13
Formulaire de cration de la table inscriptions Revenir lcran de dpart Si par la suite vous vous perdez dans les diffrents crans de phpMyAdmin, souvenez-vous simplement quun clic sur le lien portant le nom de la base de donnes sur laquelle vous travaillez (situ en haut de chaque cran, voir repre de la gure 20-12) vous permettra de revenir lcran afchant toutes les tables de la base et toutes les actions que lon peut effectuer sur chacune dentre elles.
458
Insrer des enregistrements avec phpMyAdmin

An dajouter quelques enregistrements dans les nouvelles tables, nous allons utiliser la fonction Insrer de phpMyAdmin (par la suite, avec Dreamweaver, nous dvelopperons des formulaires ddis lajout denregistrements qui seront accessibles dans lespace administrateur du site Montagne-65). Pour illustrer la procdure, nous allons dtailler les tapes dajout denregistrements dans la table randonnees. En ce qui concerne la table inscriptions, nous la laisserons vide dans un premier temps ; elle sera complte ultrieurement, directement avec le formulaire dinscription propos dans la rubrique Randonnes du site. Cliquez sur le nom de la base (montagne_db) dans le cadre de gauche. Dans la partie droite, un tableau rcapitule les tables prsentes dans la base (voir gure 20-14). Sur la mme ligne que la table concerne, plusieurs actions sont proposes dans la colonne Action. Survolez les diffrentes icnes pour afcher une infobulle prcisant le type daction correspondant. Par la suite, nous identierons toujours une action par le libell de son icne correspondante an dviter toute confusion. Voici les diffrentes actions possibles : Afcher Afche tout le contenu de la table et donc ses diffrents enregistrements. Cette icne nest pas disponible si la table ne contient aucun enregistrement. Slectionner Afche une slection de champs selon certains critres. Cette icne nest pas disponible si la table ne contient aucun enregistrement. Insrer Insre un nouvel enregistrement dans la base. Structure Afche les proprits de la base dans un tableau. utiliser si on dsire modier la structure de la table (ajouter ou supprimer des champs, par exemple). Supprimer Supprime la table et son contenu. Vider Vide uniquement le contenu de la table (et donc tous les enregistrements quelle contient), sa structure est conserve.
Figure 20-14
Pour chaque table de la base, vous pouvez rapidement raliser des actions en cliquant simplement sur le lien en rapport.
Dans notre cas, nous dsirons ajouter les deux premiers enregistrements de la table
randonnees (pour les valeurs saisir dans les champs, reportez-vous au tableau 20-6).
Pour cela, cliquez sur licne Insrer (voir repre de la gure 20-14). Un double formulaire de saisie safche alors (voir gure 20-15). Ne saisissez pas de valeur dans le
459
premier champ ID puisquil est incrment automatiquement et renseignez les autres champs (voir repres et de la gure 20-15). Nous vous conseillons de saisir les mmes valeurs que celles indiques au tableau 20-6 an dobtenir par la suite des rsultats identiques ceux des visuels de cet ouvrage. Si vous souhaitez raliser une srie dajouts denregistrements, slectionnez Insrer un nouvel enregistrement dans la liste droulante situe droite de et ensuite an de revenir directement au formulaire dune saisie lautre (voir repre de la gure 20-15). Cliquez ensuite sur le bouton Excuter pour enregistrer vos donnes (voir repre de la gure 20-15). Procdez de la mme manire pour ajouter le deuxime enregistrement (voir tableau 20-6) de la table randonnees.
Figure 20-15
Le formulaire dinsertion de phpMyAdmin permet dajouter directement des enregistrements dans la table.
Si vous navez pas opt pour lafchage dun nouveau formulaire aprs la sauvegarde, un message doit apparatre indiquant le nombre denregistrements insrs et rappelant la requte SQL automatiquement gnre par phpMyAdmin pour effectuer cette action. Si vous afchez la page centrale du gestionnaire en cliquant sur le nom de la base, vous constatez que le nombre denregistrements indiqu pour la table randonnees est maintenant de 2 et que les liens Afcher et Slectionner sont dsormais actifs.
460
An de pouvoir manipuler plusieurs enregistrements dans la suite des dmonstrations, procdez de la mme manire pour ajouter les quatre autres enregistrements de la table randonnees (voir tableau 20-6). Une fois tous les enregistrements insrs, cliquez sur licne Afcher de la table randonnees pour afcher la liste des enregistrements (voir gure 20-16).
Tableau 20-6 Enregistrements de la table randonnees
ID nom jour heure depart duree
1 2 3 4 5 6
Turon des Oules Lac de gaube Chemin des cascades Lac de lembarrat Cascade du Cirque de Gavarnie Refuge des Oulettes
2008-06-22 2008-07-04 2008-07-13 2008-08-25 2008-08-25 2008-08-25
08:30:00 14:00:00 10:00:00 07:30:00 07:30:00 07:30:00
Cauterets Cauterets Cauterets Pont dEspagne Gavarnie Pont dEspagne
2 3 2 3 6 4
Figure 20-16
Le bouton Afcher permet de lister les enregistrements de chaque table, dafcher le contenu dune table et de modier ou supprimer lun de ses enregistrements.
Modier un enregistrement
Si vous vous trompez lors de la saisie dun enregistrement, vous pourrez le modier en cliquant sur licne Afcher de la table correspondante (par exemple, randonnees). Un cran afchant les diffrents enregistrements de la table apparat (voir gure 20-16). Deux actions sont alors disponibles pour chaque enregistrement : Modier Afche de nouveau un formulaire de saisie permettant de modier le contenu de lenregistrement slectionn. Effacer Efface compltement lenregistrement concern de la table.
461
Pour notre exemple, cliquez sur licne Modier (licne avec le crayon) de lenregistrement Lac de gaube. Le formulaire qui safche alors dans lcran suivant (voir gure 20-17) prsente les informations renseignes lors de lenregistrement initial (revoir gure 20-15). Vous pouvez constater que le champ ID de la cl primaire a t automatiquement initialis 3 lors de lenregistrement prcdent grce sa proprit dauto-incrmentation. Modiez la valeur errone et validez en cliquant sur le bouton Excuter. Dans notre cas, nous allons saisir une nouvelle valeur dans le champ jour, soit 2008-07-17 au lieu de 2008-07-04. Le tableau dafchage du contenu de la table doit maintenant tenir compte de cette modication.
Figure 20-17
Dans la procdure de modication dun enregistrement, nous retrouvons le mme formulaire que celui utilis lors de linsertion dun enregistrement.
Modier les proprits dune table

Pour modier les proprits dune table (ajout ou suppression dun champ, par exemple), revenez sur lcran central du gestionnaire en cliquant sur le nom de la base montagne_db en haut de chaque cran (voir repre de la gure 20-14). Cliquez ensuite sur licne Structure de la table modier, soit la table randonnees pour notre exemple (deuxime icne en partant de la gauche).
Modier ou supprimer un champ
Lcran des proprits (voir gure 20-18) permet dintervenir sur les caractristiques de chaque champ de la table. Pour cela, cliquez sur lune des icnes de la colonne Action : Modier Modie les caractristiques du champ slectionn. Supprimer Supprime le champ slectionn de la table. Primaire Dnit le champ slectionn comme cl primaire de la table.
462
Unique La valeur du champ slectionn doit obligatoirement tre diffrente pour chacun des enregistrements. Index Dnit le champ slectionn comme cl dindex qui permet daugmenter les performances dun tri ou dune recherche si le champ est utilis comme critre. Texte entier Permet lindexation et la recherche sur lensemble dun champ contenant un texte (FULLTEXT). Les index FULLTEXT sont utiliss avec les tables MyISAM et peuvent tre crs pour des colonnes de types CHAR, VARCHAR ou TEXT. Pour illustrer la modication dun champ, vous allez rendre facultatif le champ duree. Pour cela, cliquez sur licne Modier du champ duree de la table randonnees (voir repre de la gure 20-18). Slectionnez null dans la colonne du mme nom (voir repre de la gure 20-19), puis cliquez sur le bouton Sauvegarder pour enregistrer votre modication (voir repre de la gure 20-19). En ce qui concerne la suppression dun champ, la dmarche est encore plus simple car il sufra cette fois de cliquer sur licne Suppression du champ pour le supprimer (voir repre de la gure 20-18).
Figure 20-18
Lcran des proprits permet dintervenir sur la structure de la table.
Figure 20-19
Le formulaire de modication des proprits dun champ vous permet dintervenir facilement sur ses diffrents attributs.
463
Ajouter un champ
Si vous souhaitez ajouter un ou plusieurs champs une table, indiquez le nombre de champs ajouter dans le champ Ajouter ainsi que leur position dans la base par rapport aux champs actuels grce diffrentes options disponibles (voir gure 20-20). Vous accderez alors un formulaire semblable celui de la cration initiale dune table, quil convient de valider aprs lavoir renseign. Pour illustrer cette dmarche, nous allons ajouter les deux champs des images qui devront illustrer les diffrentes randonnes dans la liste (champ vignette) et dans la che dune randonne (champ photo).
Figure 20-20
Ajout de champs dans la table
Depuis la page centrale du gestionnaire, cliquez sur licne Structure de la table randonnees, puis saisissez le chiffre 2 dans le champ Ajouter (voir repre de la gure 20-20) et cochez loption En n de table (voir repre de la gure 20-20) pour les ajouter la suite des autres champs. Cliquez ensuite sur le bouton Excuter (voir repre de la gure 20-20). Saisissez les informations relatives ces deux nouveaux champs dans le formulaire qui safche alors en vous aidant de la gure 20-21 (voir les repres , et de la gure 20-21). Cliquez ensuite sur le bouton Sauvegarder. Pour ces deux champs, nous avons ajout des valeurs par dfaut (voir repre de la gure 20-21) de sorte quune image alternative safche si lun des champs ntait pas renseign.
Figure 20-21
Ajout des champs vignette et photo dans la table randonnees
Une fois les deux nouveaux champs ajouts, cliquez sur longlet Afcher depuis la page centrale du gestionnaire an de modier les noms des diffrentes images pour chaque randonne. Pour cela, cochez tous les enregistrements de la table pour les slectionner (voir repre de la gure 20-22) et cliquez sur licne Modier, situe sous le tableau (voir repre de la gure 20-22), an de procder une modication groupe de tous les enregistrements. Indiquez ensuite pour chaque enregistrement le nom des images correspondantes (voir repre de la gure 20-22). Ces images devront videmment tre enregistres dans lun des rpertoires du site et tre nommes lidentique dans le site Montagne-65. Cliquez sur Excuter pour valider les modications effectues.
464
Figure 20-22
Renommage des images des champs vignette et photo
Congurer les droits dun utilisateur

Pour accder la base de donnes, vos futures pages dynamiques devront envoyer un identiant et son mot de passe pour attester que la requte vient bien dune page du site Montagne-65. Vous devrez donc au pralable crer un nouvel utilisateur sur le serveur de base de donnes et paramtrer ses droits en congurant un compte utilisateur montagne qui permettra daccder exclusivement la base montagne_db.
Comment choisir le compte utilisateur de la base de donnes ? Si vous comptez ensuite mettre en place votre site sur un serveur distant, il est alors judicieux de crer un compte utilisateur sur votre serveur de base de donnes local identique celui du serveur distant. Si vous utilisez un hbergement mutualis, ces informations vous seront imposes par votre hbergeur. Nous vous conseillons donc de rcuprer ces informations avant de crer votre compte utilisateur local, cela vous vitera de devoir modier les paramtres du compte lors de sa mise en ligne. En revanche, si vous ralisez ce site uniquement pour votre apprentissage et que vous ne dsirez pas le transfrer sur un serveur distant, nous vous conseillons alors dutiliser les valeurs indiques dans nos exemples, an dviter toute erreur de conguration par la suite (les paramtres de ce compte seront repris pour congurer la connexion la base utilise dans les comportements serveur de Dreamweaver).
Le compte root Si vous ne crez pas de compte utilisateur, vous pourrez quand mme congurer une connexion la base en utilisant le compte root prcongur par dfaut dans MySQL (dans ce cas, il faut remplacer dans le chier de connexion le nom de lutilisateur par root et ne pas indiquer de mot de passe). noter que lutilisation de ce compte root sans mot de passe est videmment limite un usage local. Vous devez imprativement vous assurer que tous les comptes MySQL possdent bien un mot de passe si votre base de donnes doit tre relie Internet.
1. Afchez la page daccueil du gestionnaire en cliquant sur licne Accueil de phpMyAdmin (voir repre de la gure 20-23), puis cliquez sur le lien Privilges (voir repre de la gure 20-23). 2. Dans lcran suivant, cliquez sur le lien Ajouter un utilisateur situ sous le tableau des utilisateurs (voir gure 20-24).
465
Figure 20-23
Le lien Privilges de lcran daccueil de phpMyAdmin permet daccder lassistant de cration dun utilisateur.
Figure 20-24
Le lien Ajouter un utilisateur permettant daccder au formulaire dajout dun nouvel utilisateur.
3. Dans le formulaire de lcran suivant, saisissez montagne dans le champ Nom dutilisateur et slectionnez Local dans la liste droulante Serveur (voir gure 20-25).
Figure 20-25
Ajout dun nouvel utilisateur
Renseignez le mot de passe associ cet utilisateur, soit 1234 pour notre exemple, et conrmez-le en le saisissant une seconde fois. Cliquez ensuite sur le bouton Excuter situ en bas de lcran sans valider dautre option. noter que si vous validez un
466
droit ce niveau (options de la zone Privilges globaux), lutilisateur pourrait alors lexploiter sur toutes les bases du serveur MySQL et non exclusivement sur la base montagne_db. 4. Aprs validation, un cran vous informe que le nouvel utilisateur montagne@localhost (cest--dire lutilisateur montagne depuis un accs localhost) a bien t cr et vous propose de modier ventuellement ses attributions. Dans le champ Ajouter des privilges sur cette base de donnes, slectionnez la base montagne_db dans la liste droulante (voir gure 20-26) pour accder automatiquement au formulaire dajout dun privilge daccs la base montagne_db.
Figure 20-26
La zone Privilges spciques une base de donnes permet dattribuer des privilges spciques un utilisateur dune base existante
5. Cochez les droits que vous dsirez attribuer lutilisateur pour la base concerne (nous vous conseillons dautoriser tous les droits relatifs aux donnes et la structure, mais pas ceux lis ladministration), puis validez en cliquant sur le bouton Excuter (voir gure 20-27).
Figure 20-27
Attribution des droits relatifs aux donnes et la structure de la base
Les droits de lutilisateur montagne sont dsormais congurs pour accder exclusivement la base montagne_db. Cliquez alors sur longlet Privilges pour afcher la vue densemble des utilisateurs de la base et vriez que lutilisateur montagne apparat bien dans la liste.
467
Sauvegarder et restaurer une base de donnes

Tout comme il est recommand de faire des copies de secours de ses programmes, nous vous conseillons de crer des sauvegardes de vos bases de donnes. Dans ce cas, la dmarche est quelque peu diffrente car vous devrez alors crer des copies des requtes MySQL qui ont t utilises pour crer la structure de la base et ventuellement de celles qui ont permis dinsrer des enregistrements dans les tables. Une fois enregistres dans un chier, ces requtes pourront ensuite tre utilises dans phpMyAdmin pour recrer lidentique la base sauvegarde.
Sauvegarder
Passons maintenant la pratique. Pour cela, assurez-vous tout dabord que la base sauvegarder est bien slectionne dans le cadre gauche (voir repre de la gure 20-28).
Figure 20-28
Slection de la base de donnes sauvegarder
Dans la partie droite, cliquez sur longlet Exporter situ en haut de lcran (voir repre de la gure 20-28). Un nouvel cran safche alors prsentant plusieurs zones. La zone Exporter permet de slectionner les tables exporter et le format dexportation. Pour notre exemple, slectionnez toutes les tables et conservez le format SQL coch par dfaut (voir repres et de la gure 20-29). La zone Options vous permettra, par exemple, dajouter un DROP TABLE (cochez pour cela loption Ajouter DROP TABLE/DROP VIEW, voir repre de la gure 20-29) qui supprimera automatiquement les anciennes tables de la base avant dy inclure les nouvelles, vitant ainsi la gnration dun message derreur si une table de mme nom existe dj. Cest aussi dans cette zone que vous pourrez choisir dexporter la structure de la table, ses donnes ou encore les deux (pour notre exemple, exportez les deux en cochant les cases Structure et Donnes). La zone Transmettre vous permettra dindiquer que vous dsirez gnrer un chier (cochez pour cela la case Transmettre, voir repre de la gure 20-29) et de choisir le type de compression utiliser (pour notre exemple, slectionnez aucune). Cliquez ensuite sur le bouton Excuter (voir repre de la gure 20-29). Une premire bote de dialogue apparat vous demandant de conrmer lenregistrement du chier sur votre ordinateur. Validez et slectionnez le rpertoire de sauvegarde souhait dans la fentre suivante (prenez soin de vrier lemplacement du rpertoire qui vous est propos par
468
dfaut ou de choisir un rpertoire ddi aux archives de votre projet, an de savoir o retrouver votre chier lors de la restauration !).
Figure 20-29
Paramtrage de lexportation de la base
Restaurer
Pour restaurer une base, assurez-vous tout dabord que celle-ci est dj cre (voir la section prcdente Crer la base de donnes avec phpMyAdmin ). Dans le cadre de gauche de phpMyAdmin, cliquez ensuite sur le nom de la base restaurer, soit montagne_db pour notre exemple. noter que la base doit tre cre mais quelle peut tre vide de toute table. Pour bien comprendre la procdure de restauration, nous vous invitons supprimer les tables de la base montagne_db. Pour cela, cliquez sur licne Supprimer associe chaque table de la base. Cliquez ensuite sur longlet Importer (voir repre de la gure 20-30). Dans lcran qui safche alors, cliquez sur le bouton Parcourir ? (voir repre de la gure 20-30) pour slectionner lemplacement du chier importer, cest--dire le chier prcdemment sauvegard. Dans lexplorateur, slectionnez ensuite le chier prcdemment sauvegard et cliquez sur Ouvrir pour valider votre choix (voir repre de la gure 20-30). Le chemin du chier est alors copi dans le champ Emplacement du chier texte. Cliquez sur le bouton Excuter pour dmarrer la restauration. Toutes les requtes du chier sexcutent alors et safchent en haut de lcran. Au terme de la restauration, les tables de la base sont de nouveau visibles dans le gestionnaire.
469
Figure 20-30
Restauration dune base de donnes
Interface des fonctions dynamiques dans Dreamweaver

Pour utiliser les diffrentes fonctionnalits dynamiques de Dreamweaver, vous devrez crer une connexion la base de donnes puis des jeux denregistrements. Pour cela, Dreamweaver met votre disposition plusieurs panneaux ou catgories, dtailles dans les sections suivantes avant de passer la pratique.
Les panneaux des fonctions dynamiques

Pour ouvrir les panneaux comportements de serveur, slectionnez le menu Fentre> Comportements de serveur. Trois panneaux seront alors disponibles : Bases de donnes, Liaisons et Comportements de serveur. Ces trois panneaux sont dcrits ci-aprs.
Le panneau Bases de donnes
Le panneau Bases de donnes permet de congurer les diffrents paramtres dune connexion une base de donnes. Il afche la structure de la base de donnes en dtaillant ses diffrentes tables et les champs qui la constituent (voir gure 20-31).
Figure 20-31
Le panneau Bases de donnes
470
Le panneau Liaisons
Le panneau Liaisons permet dajouter un lment dynamique directement dans votre page par un simple glisser-dplacer. Pour que des lments dynamiques soient disponibles dans ce panneau, vous devez dnir le moyen daccder aux sources des donnes en cliquant sur le bouton + (voir gure 20-32). Si vous dsirez accder des donnes stockes dans une base de donnes, vous devez crer un jeu denregistrements, appel aussi requte SQL. Vous pourrez aussi tre amen utiliser des donnes issues dautres sources (formulaire, URL, session, cookie, variables de serveur ou encore variables denvironnement) et il faudra alors crer une liaison adapte chacune de ces sources.
Figure 20-32
Le panneau Liaisons
Le panneau Comportements de serveur
Un comportement de serveur est un script plac ct serveur (en PHP dans le cadre de cet ouvrage) qui ralise une action dnie. Le panneau Comportements de serveur permet dinsrer un comportement ct serveur aussi simplement que si vous ajoutiez un comportement JavaScript classique ct client. Vous navez absolument pas besoin de connatre des instructions PHP pour intgrer un comportement dans votre page, car il suft de complter un simple formulaire pour le congurer. Notez que vous retrouvez des comportements semblables, voire identiques, dans la catgorie Donnes du panneau Insertion. Pour afcher les comportements disponibles, cliquez sur le bouton + et choisissez lune des options suivantes (voir gure 20-33) : Jeu denregistrements Permet de congurer un jeu denregistrements qui stocke des donnes issues dune requte envoye au serveur MySQL et permet den disposer dans le panneau Liaisons. Ce script de requte SQL est identique celui qui est disponible dans le panneau Liaisons ou qui est cr en cliquant sur licne Jeu denregistrements de la catgorie Donnes du panneau Insertion. Rgion rpte Permet de rpter une zone dnie autant de fois quil y a de donnes rpondant la requte demande. Cette fonction est identique celle de licne Rgion rpte de la catgorie Donnes du panneau Insertion.
471
Figure 20-33
Le panneau Comportements de serveur permet dintgrer des scripts serveur en mode Cration sans avoir saisir une seule instruction PHP
Pagination du jeu denregistrements Permet dafcher les rsultats dune requte avec un nombre dni de donnes par page (plusieurs options possibles). Afcher la rgion Permet dafcher ou de masquer une rgion dnie dune page selon les rsultats dune requte (plusieurs options possibles). Afcher le nombre denregistrements Permet dafcher le nombre de donnes issues dune requte (plusieurs options possibles). Texte dynamique Permet dafcher des donnes issues dune requte en un endroit dni de la page. Cette fonction est identique celle de licne Donnes dynamiques> Texte dynamique de la catgorie Donnes du panneau Insertion ou par glisser-dplacer depuis le panneau Liaisons. Insrer un enregistrement Permet de crer le script complmentaire un formulaire dajout dun nouvel enregistrement (le formulaire doit tre cr au pralable). Mettre jour lenregistrement Permet de crer le script complmentaire un formulaire de modication dun enregistrement pralablement slectionn (le formulaire doit dj tre cr). Supprimer lenregistrement Permet de crer un script de suppression dun enregistrement pralablement slectionn. lments de formulaire dynamiques Permet dintgrer dans un formulaire des lments dynamiques (champ, case cocher, bouton, liste, menu) qui seront initialiss par des valeurs issues du panneau Liaisons (jeu denregistrements, variable de sessions, variable de serveur, paramtres dURL).
472
Authentication de lutilisateur Permet de congurer diffrents scripts pour grer lauthentication dun utilisateur. Vous pourrez ainsi congurer les applications : Connecter lutilisateur (script de vrication du login et du mot de passe de lutilisateur dans la base de donnes, si le rsultat est positif, lutilisateur pourra accder aux pages protges, sinon il sera redirig vers une page derreur) ; Dconnecter lutilisateur (script insrer dans les pages protges qui permettra lutilisateur de se dconnecter par un simple clic sur un lien ou lors du chargement dune page spcique) ; Restreindre laccs la page (script intgrer dans les pages que lon dsire protger an de vrier si lutilisateur a bien t pralablement authenti) ou encore Vrier le nouveau nom dutilisateur (script qui vriera que le login crer nexiste pas dj dans la base de donnes lors de la cration dun nouveau compte utilisateur). Transformation XSLT Permet de congurer un formulaire an de crer une page XSLT ct serveur.
Le panneau Insertion
Ce panneau comporte huit catgories qui permettent dactiver chacun une srie dactions diffrentes. Chaque catgorie (Commun, Mise en forme, Formulaire) comporte des boutons classs par thme permettant dinsrer des lments dans la page. Linsertion peut tre effectue par un simple bouton plac dans le panneau ou laide dun deuxime menu droulant correspondant une sous-catgorie (dans ce cas, la prsence dun menu droulant est signale par une petite che situe ct du bouton). Une catgorie Favoris permet de rassembler les lments frquemment utiliss. Pour accder la conguration de cette catgorie Favoris, il suft de faire un clic droit dans le panneau Favoris et de choisir la dernire option, Personnaliser les favoris. Dans cette section, nous naborderons que les catgories permettant daccder aux outils de cration des objets dynamiques, savoir la catgorie PHP et la catgorie Donnes.
La catgorie PHP
La catgorie PHP regroupe les outils spciques au langage PHP. Toutes ces commandes peuvent tre utilises directement dans le code source en compltant manuellement leurs attributs. Cette catgorie est ddie aux pages PHP et nest visible que si le chier de votre page a t enregistr avec lextension .php ou si vous avez prcis quil sagissait dun document dynamique PHP lors de sa cration. Dans la mesure o, dans cet ouvrage, nous nous limitons lutilisation des comportements de serveur (et non la programmation PHP en mode Code), nous nutiliserons pas cette catgorie dans nos exemples car certaines de ces fonctions ncessitent dtre compltes directement dans lditeur de code et sont donc destines des utilisateurs avertis connaissant les bases du code PHP.
La catgorie Donnes
Cette catgorie regroupe des comportements de serveur et des composants Spry qui permettent dinsrer des donnes dans une page Web. On retrouve ainsi de nombreuses
473
similitudes avec les comportements de serveur (disponibles depuis le panneau Comportements de serveur), voire des fonctions strictement identiques, hormis le fait que certaines seront dclenches en cliquant sur une icne du panneau Insertion alors que dautres le seront laide dun menu local du panneau Comportements de serveur.
Figure 20-34
Comportements de serveur de la catgorie Donnes du panneau Insertion
Boutons Spry de la catgorie Donnes La catgorie Donnes comporte cinq composants Spry, identiques ceux de la catgorie Spry que nous prsenterons par la suite au chapitre 22.
Contrairement aux outils de la catgorie PHP (qui impliquent de travailler en mode Code), ceux de la catgorie Donnes peuvent tre exploits en mode Cration et ne ncessitent donc aucune connaissance du code PHP pour tre utiliss. Ils vous permettront de crer des scripts dynamiques en mode Cration en compltant un simple formulaire de paramtrages. Voici un bref descriptif des diffrents comportements de serveur disponibles depuis la catgorie Donnes du panneau Insertion (voir gure 20-34) : Icne Jeu denregistrements Permet de congurer un jeu denregistrements. Cette fonction est identique celle disponible depuis le panneau Comportements de serveur ou depuis le panneau Liaisons.
474
Icne Donnes dynamiques Permet dinsrer des donnes dynamiques. Plusieurs types de donnes sont possibles : Tableau dynamique Tableau HTML qui contient toutes les donnes dun jeu denregistrements. Texte dynamique Variable dynamique disponible depuis le panneau Liaisons. Elle peut tre la valeur dun champ particulier dun jeu denregistrements ou une variable pralablement dclare dans le panneau Liaisons. noter quon obtient le mme rsultat par un simple glisser-dplacer dans la fentre Document dune donne situe dans le panneau Liaisons. lment de formulaire dynamique Champ de texte, case cocher, groupe de boutons radio ou encore liste de slection dynamique. Icne Rgion rpte Permet de rpter une srie de donnes dans un tableau autant de fois quil y a de donnes rpondant la requte demande. Icne Afcher la rgion Permet daccder un menu droulant an de rendre conditionnel lafchage dune rgion selon ltat dun jeu denregistrements (vide ou non vide) ou selon la position de la page afche dans le cas dune gestion de donnes pagines (sil sagit ou non de la premire ou de la dernire page). Icne Pagination du jeu denregistrements Permet dinsrer une barre de navigation complte du jeu denregistrements (au format texte ou graphique) an de grer la pagination des donnes issues dun jeu denregistrements ou diffrents lments de pagination utilisables individuellement. Plusieurs actions sont possibles : Dplacer vers la premire page ; Dplacer vers la page prcdente ; Dplacer vers la page suivante ; Dplacer vers la dernire page. Icne Afcher le nombre denregistrements Permet dinsrer une barre dtat de navigation (texte dynamique qui indique les numros des enregistrements afchs, par exemple, Enregistrement X Y sur Z) ou chacun de ses lments individuellement. Plusieurs options sont possibles : Enregistrement de dbut ; Enregistrement de n ; Nombre total denregistrements. Icne Ensemble des pages Principale-Dtails Permet de congurer rapidement un ensemble de pages an dafcher dans un premier temps la liste des rsultats dune requte, puis chacune des ches dtailles correspondantes chaque rsultat. Icne Insrer un enregistrement Permet dajouter un enregistrement dans la base laide dun assistant. Deux options sont proposes :
475
Assistant de formulaire dinsertion denregistrement La procdure dinsertion est alors entirement automatise et permet dintgrer trs rapidement un formulaire dinsertion adapt la structure du jeu concern. Insrer un enregistrement Fonction identique celle prsente dans le panneau Comportements de serveur. Elle ncessite la cration pralable dun formulaire avant dintgrer le script dinsertion dans la base. Icne Mettre jour lenregistrement Permet de mettre jour un enregistrement de la base. Deux options sont disponibles : Assistant de formulaire de mise jour des enregistrements La mise jour est alors entirement automatise et permet dintgrer trs rapidement un formulaire de mise jour adapt la structure du jeu concern. Mettre jour lenregistrement Fonction identique celle du panneau Comportements de serveur. Elle ncessite la cration pralable dun formulaire avant dintgrer le script de mise jour de la base. Icne Supprimer lenregistrement Permet dintgrer dans la page le code ncessaire pour supprimer un enregistrement spcique dans la base de donnes (fonction galement disponible depuis le panneau Comportements de serveur). Icne Authentication de lutilisateur Permet de congurer diffrents scripts pour grer lauthentication dun utilisateur. Plusieurs choix sont proposs : Connecter lutilisateur Script de vrication du login et du mot de passe de lutilisateur dans la base de donnes. Si le rsultat est positif, lutilisateur pourra accder aux pages protges, sinon il sera redirig vers une page derreur. Dconnecter lutilisateur Script insrer dans les pages protges qui permettra lutilisateur de se dconnecter par un simple clic sur un lien ou lors du chargement dune page spcique. Restreindre laccs la page Script intgrer dans les pages que lon dsire protger an de vrier si lutilisateur a bien t pralablement authenti. Vrier le nouveau nom dutilisateur Script qui permet de vrier que le login ncessaire lors de la cration dun nouveau compte utilisateur nexiste pas dj dans la base de donnes. Toutes ces fonctions sont aussi disponibles depuis le panneau Comportements de serveur. Transformation XSL Permet daccder un formulaire de conguration permettant de crer une page XSLT ct serveur (fonction galement disponible depuis le panneau Comportements de serveur).
Congurer un site dynamique dans Dreamweaver

Avant mme de crer votre premire page dynamique avec Dreamweaver, vous devez congurer le site dans lequel elle se trouvera. Pour cela, vous devez dnir lemplacement de vos chiers sur votre serveur local, la technologie serveur employe (PHP dans notre
476
cas), la manire dont vous allez accder au serveur dvaluation ou encore si vous dsirez partager votre serveur distant et comment vous comptez y transfrer vos chiers. Slectionnez le menu Site>Grer les sites... Dans la bote de dialogue qui souvre alors, cliquez sur le bouton Nouveau... et choisissez Site. La fentre Dnition du site safche alors lcran. Si vous souhaitez utiliser lassistant, cliquez sur longlet Elmentaire, sinon sur longlet Avanc. Pour notre exemple, nous slectionnerons longlet Elmentaire.
Dnir un nouveau site laide de lassistant

Modier les chiers (tape 1)
Cette premire tape va vous permettre dattribuer un nom votre futur site dynamique et de renseigner son adresse HTTP. 1. Saisissez le nom du site, soit SITEmontagne pour notre exemple, dans le premier champ de la fentre Dnition du site (voir repre de la gure 20-35). 2. Renseignez ensuite lURL qui permettra daccder la racine du site Montagne65, soit http://localhost/SITEmontagne/ pour notre exemple (voir repre de la gure 20-35). Cliquez sur Suivant >.
Figure 20-35
La premire tape de conguration dun site consiste lui attribuer un nom et une URL
3. Lcran suivant vous demande si vous dsirez utiliser une technologie de serveur. Cochez loption Oui, je veux utiliser une technologie de serveur (voir repre de la gure 20-36) et slectionnez PHP MySQL dans la liste droulante qui safche alors (voir repre de la gure 20-36). Cliquez sur Suivant > pour valider vos choix.
477
Figure 20-36
Slection de la technologie de serveur
4. Vous devez ensuite choisir comment vous allez travailler sur vos chiers pendant le dveloppement. Plusieurs choix sont possibles : Modier et tester localement (mon serveur dvaluation est situ sur cet ordinateur) ; Modier localement, puis tlcharger vers le serveur distant dvaluation ; Modier directement sur le serveur distant dvaluation laide du rseau local. 5. Cochez la premire option (voir repre de la gure 20-37) puisque vous comptez travailler avec la suite WampServer 2 installe sur votre ordinateur. Vous pourrez ainsi tester localement vos chiers dynamiques avant de les transfrer vers le serveur distant.
Figure 20-37
Slection du mode de travail en dveloppement et du rpertoire de stockage des chiers
478
Cliquez ensuite sur licne reprsentant un dossier pour slectionner le rpertoire dans lequel seront stocks les chiers sur votre ordinateur. Pour notre exemple, choisissez le rpertoire SITEmontagne cr prcdemment et situ la racine de votre serveur Web C:\wamp\www\ (voir repre de la gure 20-37). noter que si le rpertoire du site nexiste pas encore, vous pouvez le crer ce niveau en cliquant sur licne Crer un nouveau dossier situe en haut droite de la fentre de lexplorateur. Cliquez sur le bouton Suivant >.
Tester les chiers (tape 2)
Dreamweaver utilise le protocole HTTP pour communiquer avec votre serveur dvaluation local et cest la raison pour laquelle il a besoin de connatre lURL que vous utiliserez pour tester votre site. Suite aux prcdents paramtrages, http://localhost/ est ici automatiquement renseign. Il ne vous reste plus qu ajouter le nom du rpertoire correspondant votre nouveau site, vous obtenez alors http://localhost/SITEmontagne/ (voir repre de la gure 20-38). Si WampServer 2 est actif, cliquez sur le bouton Test de lURL an de vous assurer que tout fonctionne correctement (voir repre de la gure 20-38). Un message vous indique alors que le test du prxe de lURL sest droul avec succs. Dans le cas contraire, vriez que WampServer 2 est actif et que le rpertoire slectionn a bien t cr. Cliquez ensuite sur Suivant > pour conrmer votre choix.
Figure 20-38
Deuxime tape de la conguration dun site, le test des chiers
Partager les chiers (tape 3)
Le dernier cran de conguration vous demande si vous dsirez copier les modications de vos chiers sur un serveur de production (ou un serveur de test partag avec dautres personnes). Slectionnez Non, puis cliquez sur le bouton Suivant >. Vous pourrez videmment congurer ultrieurement les paramtres de votre serveur distant lorsque vous transfrerez votre site chez votre hbergeur.
Rsum
Une fois la procdure de conguration du site termine, un rcapitulatif des choix effectus pour les infos locales ainsi que le serveur dvaluation safche (voir les repres et de la gure 20-39). Vriez lexactitude de ces informations et cliquez sur le bouton
479
Termin pour valider. La bote de dialogue Grer les sites safche alors. Cliquez une nouvelle fois sur le bouton Termin. Dreamweaver enregistre alors tous les paramtres dans le cache et retourne lespace de travail. Vous constatez que la fentre Fichiers est ouverte sur le rpertoire local SITEmontagne (voir gure 20-40).
Figure 20-39
Rcapitulatif des paramtres du nouveau site
Figure 20-40
Le contenu du nouveau site safche automatiquement dans la fentre Fichiers
Crer une connexion une base de donnes

Le concept de la connexion la base
Les paramtres du site tant dnis et la base de donnes montagne_db tant cre, vous allez prsent pouvoir congurer la connexion cette base an daccder aux donnes depuis les pages PHP du site. Pour bien comprendre le concept de la connexion la base, nous allons la comparer louverture dun canal entre la base et les pages dynamiques du site. Ce canal permettra par la suite daccder aux diffrents champs qui constituent les tables de la base et de crer des requtes SQL pour exploiter une slection denregistrements (se reporter la section Crer des jeux denregistrements ). Cependant, lactivation de ce canal ne peut tre effectue quaprs une identication de lutilisateur qui en fait la demande. Dans la section Congurer les droits dun utilisateur , vous avez cr un compte utilisateur montagne et lui avez attribu les privilges spciques la base montagne_db. Ce sont ces paramtres qui vont tre employs dans le cadre du paramtrage suivant an que lutilisateur montagne puisse tre reconnu par le serveur MySQL comme un utilisateur de la base montagne_db.
480
Crer une connexion

Voici la marche suivre pour crer une connexion la base de donnes dans Dreamweaver. 1. Slectionnez le menu Fichier>Nouveau et choisissez Page vierge>PHP an de crer une nouvelle page PHP. Cliquez ensuite sur le bouton Crer. 2. Cliquez sur le panneau Bases de donnes an dafcher le contenu de sa fentre si celui-ci est visible, sinon slectionnez le menu Fentre>Bases de donnes. 3. Cliquez sur le bouton + (voir repre de la gure 20-41), puis sur Connexion MySQL (voir repre de la gure 20-41).
Figure 20-41
Cration dune connexion MySQL
4. La bote de dialogue Connexion MySQL safche alors (voir repre de la gure 20-41). Saisissez un nom pour la connexion que vous allez crer, soit connexionMysql pour notre exemple. 5. Dans le champ Serveur MySQL, indiquez lordinateur sur lequel est install le serveur MySQL (une adresse IP ou un nom de serveur). Pour notre exemple, le serveur MySQL tant install sur la mme machine que le serveur Apache (avec son module PHP), saisissez localhost. 6. Saisissez ensuite le nom de lutilisateur (montagne) et le mot de passe qui lui est associ (1234). Si vous navez pas cr lutilisateur montagne, comme que nous lavons fait la section prcdente Congurer les droits dun utilisateur , vous pouvez saisir provisoirement lutilisateur install par dfaut sur la base MySQL (nom de lutilisateur : root, pas de mot de passe). 7. Cliquez ensuite sur le bouton Slectionner pour afcher toutes les bases de donnes disponibles sur votre serveur dvaluation (voir repre de la gure 20-42).
481
Figure 20-42
Slection de la base de donnes sur le serveur MySQL
Choisissez la base montagne_db (voir repre de la gure 20-42) et cliquez sur OK pour valider vos choix. 8. La base slectionne safche alors dans le champ Base de donnes. Cliquez sur le bouton Tester pour vrier que la connexion fonctionne correctement. Si tous les paramtres sont corrects, un message vous informe que la connexion est tablie. Dans le cas contraire, vriez de nouveau les paramtres et assurez-vous que WampServer 2 est bien actif. 9. Validez le message prcdent et cliquez sur OK pour conrmer la cration de la connexion. La connexion la base de donnes est dsormais tablie et les informations correspondantes apparaissent dans la fentre Bases de donnes. Cliquez successivement sur les signes + situs devant connexionMysql, puis Table, puis inscriptions, par exemple, pour afcher les diffrents champs de la table (voir gure 20-43).
Figure 20-43
Une fois la connexion tablie, vous pouvez consulter tous les champs disponibles dans chacune des tables de la base de donnes.
482
Le rpertoire Connections Aprs la cration dune connexion, le rpertoire Connections est automatiquement cr dans larborescence du site (dans C:\wamp\www\SITEmontagne pour notre exemple). Il contient un chier PHP portant le nom de la connexion qui vient dtre congure (voir le repre de la gure 20-44). Ce chier regroupe tous les paramtres de votre connexion (nom du serveur MySQL, login du compte, mot de passe, nom de la base de donnes) et doit tre transfr sur le serveur distant lors de la publication du site. Ce rpertoire et le chier quil contient ne doivent en aucun cas tre supprims, au risque dinterrompre toutes les interactions entre la base de donnes et les pages dynamiques du serveur.
Figure 20-44
Le rpertoire Connections automatiquement cr
Crer un jeu denregistrements

Le concept du jeu denregistrements
Comme nous lavons vu prcdemment (voir section Structure de la base de donnes montagne_db dans ce chapitre), une base de donnes est compose denregistrements. Pour pouvoir exploiter ces enregistrements, vous allez devoir extraire un sous-ensemble de donnes dune ou plusieurs tables de la base. Cet ensemble denregistrements sappelle un jeu denregistrements et forme son tour une nouvelle table puisquil est form de champs et denregistrements selon la requte dextraction employe. Pour crer un jeu denregistrements, vous allez donc devoir laborer une requte de base de donnes, qui se caractrisera par les critres de slection des enregistrements et par les champs demands. Les requtes de base de donnes sont crites en SQL (Structured Query Language), langage structur permettant de rcuprer les donnes dune base. Si vos connaissances dans ce langage sont limites, voire inexistantes, rassurez-vous, Dreamweaver CS4 permet de crer des requtes basiques en mode assist grce un simple formulaire. Cependant, si vous dsirez crer des requtes SQL labores, vous devrez utiliser le mode Avanc et les saisir manuellement. Pour transmettre la requte SQL la base de donnes, il est indispensable quune connexion soit pralablement tablie avec le serveur MySQL (dans le cas contraire, reportez-vous la section Crer une connexion une base de donnes ). La requte et le jeu denregistrements emprunteront le canal de la connexion connexionMysql prcdemment congure. Les diffrentes informations qui constituent une requte permettent de slectionner la table (ou les tables) de la base laquelle la connexion vous donne
483
accs et de dnir les critres de slection des enregistrements et les noms des champs que vous souhaitez exploiter dans la page dynamique du site (voir gure 20-45). En rponse, le serveur MySQL renvoie un jeu denregistrements en rapport qui seront ensuite utiliss comme lments dynamiques dans la page PHP qui a provoqu la requte.
Paramtrage dun jeu denregistrements Pour paramtrer un jeu denregistrements, Dreamweaver propose deux modes : Simple et Avanc. Dans cet ouvrage, seul le mode Simple sera dtaill. Pour plus dinformations sur le mode Avanc, nous vous invitons consulter louvrage PHP/MySQL avec Dreamweaver, paru aux ditions Eyrolles, qui dtaille la saisie des requtes SQL et leur utilisation pour la cration dun jeu denregistrements en mode Avanc.
La fentre Jeu denregistrements

Il existe deux modes de fentre denregistrements : le mode Simple pour crer des requtes, monotables limites un seul ltre, et le mode Avanc pour crer tous les types de requtes qui ne peuvent pas tre ralises avec le mode Simple. Pour accder la fentre Jeu denregistrements, il faut cliquer sur le bouton + du panneau Liaisons puis slectionner Jeu denregistrements (voir les repres et de la gure 20-45). La fentre Jeu denregistrements souvre par dfaut en mode Simple.
Figure 20-45
Pour ouvrir la fentre de paramtrage dun jeu denregistrements, il faut cliquer sur le bouton + du panneau Liaisons, puis slectionner Jeu denregistrements.
Si toutefois elle safche en mode Avanc, il suft de cliquer sur le bouton Simple (situ droite de la bote de dialogue) pour revenir en mode Simple. Elle est compose de deux parties (voir gure 20-46) : la partie suprieure concerne les informations indispensables qui dnissent le jeu ; la partie infrieure permet de structurer la requte pour slectionner tout ou partie des champs de la table, dnir un ltre de slection des enregistrements ou encore prciser dans quel ordre seront tris les enregistrements retourns par le serveur MySQL.
484
Figure 20-46
Nommage du jeu denregistrements et slection de la connexion utiliser
Voici un descriptif des diffrents paramtres de la fentre Jeu denregistrements : Champ Nom Permet dattribuer un nom au nouveau jeu denregistrements. Liste droulante Connexion Permet de slectionner la connexion la base utilise pour transfrer la requte au serveur MySQL et pour rcuprer les enregistrements renvoys. Liste droulante Table Permet de slectionner la table dans laquelle seront extraits les enregistrements. Champ Colonnes Loption Toutes permet dextraire lensemble des champs alors que loption Slectionnes permet dextraire uniquement les champs slectionns dans le cadre. Liste droulante Filtre Permet de paramtrer une slection denregistrements selon un critre dni. Liste droulante Trier Permet de trier les enregistrements retourns par le serveur MySQL.
Paramtrer un jeu denregistrements

1. Assurez-vous que WampServer 2 est bien actif et quune connexion la base a dj t cre en cliquant sur le panneau Bases de donnes (dans le cas contraire, reportezvous la section prcdente Crer une connexion ). 2. Ouvrez une nouvelle page PHP via le menu Fichier>Nouveau>Page vierge>PHP et cliquez sur le panneau Liaisons.
485
3. Cliquez sur le bouton + et slectionnez Jeu denregistrements (Requte) an dafcher la fentre Jeu denregistrements (voir gure 20-46). 4. Nommez le nouveau jeu denregistrements (utilisez des lettres, des chiffres ou encore le caractre de soulignement (_), sans espace ni caractres spciaux). Il est dusage de faire prcder le nom du jeu du prxe rs pour RecordSet. Pour notre exemple, saisissez rsRandonnees, nom qui reprsente un jeu denregistrements issu de la table randonnees prcdemment cre (voir repre de la gure 20-46). 5. Slectionnez la connexion dsire dans la liste droulante du mme nom, soit connexionMysql pour notre exemple (voir repre de la gure 20-46). Dreamweaver rcupre alors la liste des tables contenues dans la base de donnes an dactualiser les choix proposs par la liste droulante Table dans laquelle vous slectionnerez la table concerne par la requte, soit randonnees pour notre exemple (voir repre de la gure 20-47).
Figure 20-47
Slection de la table dans laquelle la requte sera applique
6. Si vous spciez Toutes pour le paramtre Colonnes (voir repre de la gure 20-48), tous les champs de la table seront retourns dans le jeu denregistrements lors du test (voir les repres et de la gure 20-48). Si vous cochez loption Slectionnes (voir repre de la gure 20-49), vous devrez alors slectionner les champs souhaits dans le cadre Colonnes (voir repre de la gure 20-49). Pour une slection multiple de plusieurs colonnes, cliquez sur les champs tout en maintenant la touche Ctrl (Cmd sur Mac) enfonce. Bien quil soit plus simple, et donc plus tentant, de slectionner tous les champs, nous vous recommandons dextraire uniquement les champs ncessaires la requte, vous amliorerez ainsi les performances de votre site. Une fois les champs extraire retenus, cliquez sur le bouton Tester pour vrier le bon fonctionnement de la requte (voir les repres et de la gure 20-49). Les gures 20-48 et 20-49 prsentent deux tests raliss avec chacune de ces options.
486
Figure 20-48
Rsultat dun test avec loption Toutes valide. Les donnes issues de ce jeu reprsentent tous les champs et enregistrements de la table commerciaux.
Figure 20-49
Rsultat dune requte avec loption Slectionns valide, et les champs nom et jour cochs. Tous les enregistrements sont prsents, mais seules les valeurs des colonnes nom et jour sont retournes.
7. La liste droulante Filtre vous permet de dnir des critres de slection des enregistrements. Sa valeur par dfaut est Aucun et, dans ce cas, tous les enregistrements de la table sont renvoys par le serveur MySQL. Nous vous proposons de paramtrer un ltre qui extrait les enregistrements de la table selon la valeur du champ duree (voir gure 20-50). Pour cela, congurez les diffrents champs du ltre de la manire suivante : Sur la premire ligne du ltre, slectionnez le champ duree, puis loprateur > (voir repre de la gure 20-50). Sur la deuxime ligne, slectionnez Paramtre dURL et saisissez dans la zone de droite le nom de la variable dURL (voir repre de la gure 20-50). Pour notre exemple, la variable duree est automatiquement renseigne par Dreamweaver. Cette variable pourra ensuite tre envoye la page dynamique directement par lURL (par exemple, nomdufichier.php?duree=2) ou laide dun formulaire congur en mthode GET.
487
Figure 20-50
Aprs avoir cliqu sur le bouton Tester, saisissez une valeur de test pour la variable duree (2 par exemple) an de vrier le bon fonctionnement de votre requte. Le rsultat du test doit alors safcher dans une nouvelle fentre.
8. Cliquez ensuite sur le bouton Tester (voir repre de la gure 20-50). Une bote de dialogue safche alors et vous demande de saisir une valeur test pour simuler le paramtre pass dans lURL (voir repre de la gure 20-50). Saisissez 2, par exemple, et cliquez sur OK pour valider (voir repre de la gure 20-50). Les rsultats du test safchent listant les enregistrements correspondant la requte (voir repre de la gure 20-50). 9. La liste droulante Trier permet de classer les enregistrements retourns par le serveur MySQL selon un champ et un ordre dnis. Pour illustrer cette option, nous allons congurer un jeu denregistrements qui afche tous les champs et enregistrements de la table randonnees (slectionnez le ltre de nouveau sur Aucun) tris selon le champ nom et par ordre croissant (voir gure 20-51). Pour cela, annulez tout dabord le ltre prcdent en slectionnant Aucun dans la liste droulante Filtre. 10.
Figure 20-51
Rsultat dun test avec tri croissant sur le champ nom. Les enregistrements retourns sont classs selon lordre alphabtique des noms de chaque enregistrement.
488
10. Slectionnez ensuite le champ nom dans la premire liste droulante Trier, puis Croissant (voir repre de la gure 20-51). Cliquez ensuite sur le bouton Tester (voir repre de la gure 20-51) pour afcher le rsultat tris selon lordre alphabtique du champ nom (voir repre de la gure 20-51). 11. Cliquez enn sur OK dans la bote de dialogue du jeu denregistrements (voir repre de la gure 20-52). Le jeu denregistrements apparat alors dans le panneau Liaisons (voir repre de la gure 20-52).
Figure 20-52
Aprs la cration du jeu denregistrements, les champs sont disponibles depuis le panneau Liaisons.
Copier un jeu denregistrements dune page une autre

Contrairement aux dnitions de connexion au serveur qui sont stockes dans un rpertoire spcique (voir lencadr prcdent Le rpertoire Connections ) et qui peuvent donc tre utilises dans toutes les pages dun mme site, les jeux denregistrements sont intgrs dans la page o lon dsire exploiter les champs et ne peuvent pas tre utiliss dans une autre page. Cependant, il est souvent ncessaire de rcuprer un jeu denregistrements dj cr dans une page du site pour lutiliser dans une autre page. Voici la procdure suivre pour copier un jeu denregistrements dune page une autre : 1. Ouvrez la page dans laquelle se trouve le jeu denregistrements et activez le panneau Liaisons. 2. Cliquez droit sur le jeu dsir (voir repre de la gure 20-53) et choisissez Copier (voir repre de la gure 20-53).
Figure 20-53
Copie dun jeu denregistrements depuis le panneau Liaisons
489
3. Ouvrez la nouvelle page dans laquelle sera copi le jeu et activez galement le panneau Liaisons. Cliquez droit dans ce panneau (dans la partie grise en haut de la fentre) et choisissez cette fois Coller dans le menu contextuel. Le jeu denregistrements apparat alors.
Modier ou supprimer un jeu denregistrements

Par la suite, si vous dsirez modier les paramtres dun jeu denregistrements, il sufra de double-cliquer sur son nom (attention, droite de son icne et non sur licne) dans le panneau Liaisons. La fentre de paramtrage souvrira alors de nouveau et vous pouvez ainsi y apporter les corrections dsires. Pour supprimer dnitivement un jeu denregistrements, il suft de le slectionner dans le panneau Liaisons et de cliquer sur le bouton .
Utiliser un jeu denregistrements et le mode Afchage en direct

Au mme titre que toutes les variables stockes dans le panneau Liaisons, les champs dun jeu denregistrements peuvent facilement tre insrs dans une page dynamique. Pour vous aider dans cette tche, Dreamweaver a labor toute une srie de fonctions et de comportements, disponibles depuis la catgorie Donnes du panneau Insertion et depuis le panneau Comportements de serveur. La section suivante est consacre lutilisation de ces diffrents outils dans le cadre de la cration de pages dynamiques utilises. En complment du mode Cration, Dreamweaver permet dafcher les donnes dynamiques dune page grce au mode Afchage en direct. Pour activer ce mode, cliquez sur licne Afchage en direct, situe droite du bouton Cration dans la barre doutils du document. Les noms des variables dynamiques insres dans la page en cours sont alors remplacs par leur valeur issue de la base de donnes du serveur dvaluation. Lafchage de ces donnes dans une page dynamique atteste du bon fonctionnement de la connexion serveur et des requtes SQL utilises. noter que dans ce mode, les liens hypertextes ne fonctionnent pas et certaines pages dynamiques ne peuvent pas tre testes par cette mthode (page dinsertion par exemple). Il est toutefois souvent intressant dutiliser le mode Afchage en direct lorsquon travaille sur la conception dune page dynamique simple et que lon dsire avoir un aperu de son fonctionnement dans Dreamweaver sans la consulter dans un navigateur. Pour illustrer lutilisation du mode Afchage en direct, crez au pralable un jeu denregistrements en utilisant un ltre sur la cl primaire de la table randonnees an dobtenir un enregistrement unique dans le rsultat du jeu denregistrements (voir repre de la gure 20-54). 1. Dans la fentre Document, ajoutez une balise conteneur (<div> par exemple) et placez-y les variables du jeu denregistrements du panneau Liaisons par un simple glisser-dplacer (voir les repres et de la gure 20-54). Lorsque le mode Afchage en direct nest pas activ, les variables sont reprsentes par leur nom encadr par des accolades (voir repre de la gure 20-54).
490
Figure 20-54
Les variables du jeu denregistrements peuvent facilement tre intgres dans la page par un simple glisser-dplacer.
2. Cliquez sur licne Afchage des donnes dynamiques (mode Afchage en direct, voir repre de la gure 20-55). Les donnes du premier enregistrement du jeu doivent maintenant remplacer les noms des variables dans la page (voir repre de la gure 20-55). noter que depuis la version Dreamweaver CS4, il est dsormais possible de visualiser le code source de la page en direct. Pour cela, il suft de cliquer sur le bouton Code en direct situ droite du bouton Afchage en direct (voir repre de la gure 20-55). La fentre du Document passera alors automatiquement en mode Fractionn et vous pourrez ainsi consulter le code source gnr dynamiquement correspondant la page active.
Figure 20-55
Ds que le mode Afchage en direct est activ, les donnes remplacent les variables dynamiques de la page.
Les liens hypertextes en mode Afchage en direct Les liens hypertextes ne fonctionnent pas en mode Afchage en direct. Pour tester linteraction entre vos pages, vous devrez utiliser la fonction Aperu dans le navigateur, disponible depuis le menu Fichier ou la touche F12.
491
Test des paramtres HTTP en mode Afchage en direct Grce la bote de dialogue Paramtres dafchage en direct, vous pouvez simuler le fonctionnement de la page en fonction de ltat de paramtres GET ou POST. Cette bote est accessible en cliquant sur la petite che situe droite du bouton Afchage en direct, puis en slectionnant loption Paramtres de demande HTTP du menu. Par exemple, si vous dsirez simuler les paramtres dURL suivants ID= 2&cle=cascade, il suft de cliquer sur le + en haut de la bote de dialogue puis dindiquer le nom du premier paramtre et sa valeur et recommencer la mme dmarche pour le second paramtre. Slectionnez ensuite le type des paramtres dans le menu Mthode situ en bas de la bote. Aprs validation de vos choix, vous pourrez ensuite simuler le fonctionnement de la page avec ces paramtres en activant le mode Afchage en direct dans la fentre Document (si le ltre du jeu denregistrements est programm en consquence videmment).
Crer des pages dynamiques avec des comportements de serveur

Dans les sections prcdentes, nous avons install et congur tous les lments indispensables la mise en uvre dune plateforme de dveloppement de sites dynamiques. Nous sommes dsormais en mesure dexploiter les informations dune base de donnes et nous allons pouvoir commencer dvelopper des pages dynamiques laide de linterface de Dreamweaver en mode Cration. Cette section dtaillera les procdures de cration des pages les plus courantes dans un site dynamique. Pour cela, nous exploiterons uniquement linterface visuelle de Dreamweaver (mode Cration), mthode qui prsente lavantage de vous permettre dlaborer une page dynamique sans aucune connaissance pralable dinstructions PHP et de requtes SQL. Pour ceux qui dsirent concevoir des sites dynamiques plus labors, nous vous conseillons de consulter louvrage PHP/MySQL avec Dreamweaver (paru aux ditions Eyrolles) an de pouvoir intervenir directement dans le code des scripts PHP et laborer des requtes SQL avances. Pour illustrer le fonctionnement de chacune des crations courantes dcrites dans cette section, nous appliquerons les diffrentes procdures la rubrique Randonnes du site Montagne-65 et nous utiliserons la base de donnes montagne_db cre prcdemment.
Aperu dans un navigateur Dreamweaver vous permet de tester vos pages depuis un navigateur de votre choix. Pour cela, vos pages doivent avoir t enregistres au pralable (dans le cas contraire, une bote de dialogue safchera). Pour tester une page en aperu, slectionnez le menu Fichier>Aperu dans un navigateur et choisissez le navigateur souhait (Internet Explorer ou Firefox par exemple). Vous pouvez galement cliquer sur licne Aperu/Dbogage dans le navigateur situe dans la barre doutils du document, puis slectionner laperu dans le navigateur congur par dfaut ou mieux encore, appuyer sur la touche F12 de votre clavier.
492
Page dafchage dune liste denregistrements avec images

Une liste simple est matrialise par un tableau (ou une mise en page alternative avec les CSS) afchant tous les champs et tous les enregistrements dun jeu. Une colonne de tableau correspond un champ du jeu et une ligne un enregistrement. Il faut donc crer au pralable un jeu denregistrements qui va puiser dans une table les donnes afcher dans le tableau. Aprs la cration du jeu denregistrements, deux mthodes peuvent tre utilises pour raliser une page contenant une liste simple : La premire consiste utiliser loutil Tableau dynamique de la catgorie Donnes du panneau Insertion. Pour cela, cliquez sur licne Donnes dynamiques>Tableau dynamique et renseignez la bote de dialogue qui souvre alors an dindiquer le jeu denregistrements concern et quelques paramtres de mise en forme. Ds la validation de vos choix, un tableau HTML sera cr selon la structure du jeu slectionn et les variables y seront intgres automatiquement. La seconde consiste raliser au pralable un tableau (icne Tableau de la catgorie Commun du panneau Insertion) de deux lignes et dautant de colonnes que contient le jeu denregistrements. noter quavec cette seconde mthode, vous pouvez aussi construire la structure de la liste laide des CSS (en positionnant des balises conteneurs <div>, par exemple). Saisissez ensuite les titres des colonnes dans la premire ligne avant dajouter, au cas par cas, les diffrents champs dynamiques du jeu dans les cellules de la seconde ligne du tableau. Pour terminer, vous devrez slectionner la seconde ligne (ou un lment conteneur <div> si vous avez opt pour une mise en page CSS) et ajouter un comportement Rgion rpte an que le tableau stende verticalement en fonction du nombre denregistrements qui doivent tre afchs. Pour illustrer la cration dune liste, nous vous proposons de crer la premire page de la rubrique Randonnes qui afche la liste des randonnes proposes par le site Montagne-65. Dans chaque lment de la liste, vous indiquerez la destination, le jour, la vignette illustrant la randonne et un lien qui permettra ensuite de visualiser la che complte dans une autre page. Dans cette dmonstration, nous avons choisi dutiliser la seconde mthode prsente ci-dessus car nous dsirons afcher chaque lment de la liste dans une balise conteneur <div> et non dans un tableau HTML. 1. Ouvrez le chier randonnees.php du site Montagne-65 (situ dans le rpertoire SITEmontagne) prcdemment congur ou la page initiale de la rubrique Randonnes, page-randonnees_base.php, disponible dans les chiers sources de louvrage. Enregistrez cette page sous le nom page-randonnees.php. 2. Vous allez prsent y insrer un nouveau jeu denregistrements. Pour cela, cliquez sur le bouton + du panneau Liaisons (voir repre de la gure 20-56) et choisissez Jeu denregistrements (Requte). Dans la bote de dialogue qui souvre alors, saisissez rsRandonnees dans le champ Nom, slectionnez la connexion connexionMysql et la table randonnees. Cochez loption Slectionnes puis slectionnez les champs ID, nom, jour et vignette dans la liste (voir repre de la gure 20-56). Avant de valider vos choix, vous pouvez cliquer sur le bouton Tester an de vous assurer que les enregistrements slectionns correspondent vos attentes (voir repre et de la
493
gure 20-56). Si besoin, modiez les paramtres de la bote de dialogue, puis conrmez la cration du jeu denregistrements en cliquant sur le bouton OK.
Figure 20-56
Cration du jeu denregistrements rsRandonnees destin alimenter la liste des randonnes
3. Placez un conteneur div dans la page en dessous du titre Randonnes. Faites ensuite glisser les donnes dynamiques nom et jour (disponibles dans le jeu denregistrements rsRandonnees) dans ce conteneur (voir repre de la gure 20-57).
Figure 20-57
Positionnez les donnes dynamiques dans le conteneur laide dun simple glisser-dplacer depuis le panneau Liaisons
4. Ajoutez devant ces deux donnes dynamiques lune des vignettes illustrant les randonnes situes dans le rpertoire photos. Pour cela, placez votre curseur au point dinsertion et cliquez sur licne Images de la catgorie Commun du panneau Insertion (voir repre de la gure 20-57). Slectionnez ensuite lune des vignettes de ce
494
rpertoire (vignette_1.jpg par exemple) et cliquez sur OK pour valider votre choix. La vignette doit ensuite prendra place devant les deux donnes dynamiques (voir repre de la gure 20-57). 5. Pour placer limage dans la partie droite du conteneur, crez au pralable la classe .vignette qui sera congure en positionnement relatif (voir repre de la gure 20-58 et revoir si besoin la section Le positionnement relatif au chapitre 10). Une fois la classe cre, slectionnez la vignette et attribuez-lui la nouvelle classe depuis son panneau Proprits (voir repre de la gure 20-58). La vignette doit alors apparatre droite du conteneur.
Figure 20-58
Placement de la vignette dans le conteneur laide de la classe .vignette (positionnement relatif)
6. Pour transformer la vignette en image dynamique, vous devez prsent la lier avec la donne dynamique vignette du jeu denregistrements qui contiendra les diffrents noms des vignettes de chaque randonne. Pour cela, copiez le chemin du rpertoire (photos/) qui prcde le nom de limage depuis le champ Scr du panneau Proprits (slectionnez le chemin puis copiez-le laide du raccourci clavier Ctrl + C). Choisissez la vignette dans le document (voir repre de la gure 20-59) puis slectionnez la donne dynamique vignette dans le jeu denregistrements du panneau Liaisons (voir repre de la gure 20-59). Une fois les deux lments slectionns, cliquez sur le bouton Lier situ en bas de la fentre (voir repre de la gure 20-59) pour transformer la vignette en image dynamique. Linformation enregistre dans le champ vignette de la table randonnees ne contenant que le nom du chier (par exemple, vignette_1.jpg), sans le chemin qui permet dy accder, vous devez ajouter ce chemin devant la balise PHP qui a t ajoute dans le champ Scr du panneau Proprits. Pour cela, placez le curseur de la souris devant la premire balise PHP dans ce champ et ajoutez-y le chemin que vous avez copi avant la transformation, soit photos/ (en utilisant le raccourci clavier Ctrl + V).
495
Figure 20-59
Liaison de la vignette et de la donne dynamique issue du jeu denregistrements
Par la suite, vous allez ajouter une che qui permettra dafcher toutes les informations de chaque randonne. Pour prparer cette fonctionnalit, vous ajouterez un lien pointant vers le chier page-fiche.php en dessous des deux donnes dynamiques du conteneur. 7. ce stade, si vous activez le mode Afchage en direct, le nom, la date et la vignette de la premire randonne devraient remplacer les lments dynamiques de la page. Cependant, si vous dsirez afcher la liste de tous les enregistrements, vous devez ajouter un comportement de serveur Rgion rpte an que le conteneur, et les informations quil contient, soit rpt autant de fois quil y aura denregistrements. Pour cela, dsactivez le mode Afchage en direct et slectionnez le conteneur depuis le slecteur de balise du document (voir repre de la gure 20-60).
Figure 20-60
Ajout dun comportement Rgion rpte
496
Ouvrez le panneau Comportements de serveur et cliquez sur le bouton + pour slectionner le comportement Rgion rpte (voir repre de la gure 20-60). Dans la bote de dialogue qui souvre alors, choisissez rsRandonnees dans la liste droulante Jeu denregistrements et cochez loption Tous les enregistrements. Cliquez sur OK pour valider vos choix. Une tiquette Rpter doit alors apparatre autour du conteneur slectionn. 8. Enregistrez votre page via le raccourci clavier Ctrl + S (Cmd + S sur Mac), puis appuyez sur la touche F12 (Option + F12 sur Mac) pour tester son fonctionnement dans un navigateur. La page doit alors afcher la liste des randonnes de la base de donnes en prcisant leur nom et la date ainsi quune vignette dillustration (voir gure 20-61).
Figure 20-61
Test du chier page-randonnees.php dans un navigateur
Page de liste avec barre et tat de navigation

Lorsque vous avez cr la page randonnees.php, qui afche la liste des randonnes enregistres dans la base, vous avez indiqu dans le paramtrage du comportement Rgion rpte que vous dsiriez afcher toutes les informations dans la mme page (voir gure 20-60). Cependant, si cette liste devient trop importante, il est intressant de pouvoir lafcher sur plusieurs pages. Pour cela, Dreamweaver propose le comportement
497
Barre de navigation, qui ralise automatiquement le dcoupage de la liste selon le nombre denregistrements dsirs par page et intgre une barre de navigation pour grer le passage dune page lautre. Dans le mme registre, Dreamweaver propose aussi un autre comportement, nomm tat de navigation, qui permet dindiquer le numro des enregistrements afchs et le nombre total denregistrements du jeu. Nous allons employer ces deux applications en modiant la page randonnee.php an dafcher la liste des randonnes sur plusieurs pages.
Procdure dajout dune barre de navigation
1. Ouvrez la page randonnee.php cre prcdemment. 2. Avant dajouter la barre de navigation, vous allez tout dabord modier le paramtrage de la rgion rpte an de lui indiquer dafcher seulement cinq enregistrements par page (nous prendrons cette valeur pour les tests ; par la suite, vous pourrez videmment choisir le nombre denregistrements que vous dsirez). Pour cela, cliquez sur le nom du comportement Rgion rpte dans le panneau Comportements de serveur (voir repre de la gure 20-62). Dans la bote de dialogue qui souvre alors, cochez loption Afcher et saisissez 5 dans le champ Enregistrements la fois (voir repre de la gure 20-62). Validez votre modication en cliquant sur le bouton OK.
Figure 20-62
Avant dajouter un systme de pagination des rsultats, il convient de congurer le nombre de rsultats dsirs par page dans la bote de dialogue Rgion rpte.
3. Placez ensuite le curseur de la souris sous la balise <div> du conteneur dinformations (voir repre de la gure 20-63). Cliquez sur licne Pagination du jeu denregistrements de la catgorie Donnes du panneau Insertion et choisissez Barre de navigation du jeu denregistrements (voir repre de la gure 20-63). Dans la bote de dialogue qui souvre alors, slectionnez le jeu rsRandonnees et cochez loption Images (voir repre de la gure 20-63). Cliquez sur OK pour valider vos choix.
498
Figure 20-63
Ajout dune barre de navigation dans Dreamweaver
4. La barre de navigation apparat alors dans la page (voir gure 20-64). Au passage, ouvrez la fentre Fichiers et remarquez que Dreamweaver a ajout la srie dicnes, utilise dans la barre de navigation, directement dans le rpertoire o se trouve la page courante. Ainsi, si vous dsirez adapter ces icnes la charte de votre site, vous naurez qu crer de nouveaux boutons et les sauvegarder sous le mme nom dans ce rpertoire. Enregistrez votre page et testez son fonctionnement dans le navigateur via la touche F12 (voir repre de la gure 20-65).
Figure 20-64
Ajout des tats de navigation dans Dreamweaver
Figure 20-65
Test de la barre et des tats de navigation dans le navigateur
499
Procdure dajout dun tat de navigation
1. Placez le curseur de la souris sous la barre de navigation prcdemment cre (voir repre de la gure 20-64). Cliquez sur licne Afcher le nombre denregistrements de la catgorie Donnes du panneau Insertion et choisissez Etat de navigation du jeu denregistrements (voir repre de la gure 20-64). Dans la bote de dialogue qui safche, slectionnez le jeu denregistrements rsRandonnees et validez (voir repre de la gure 20-64). 2. Une ligne de texte intgrant trois variables dynamiques apparat alors sous la barre de navigation. Mettez en forme ce texte en lui appliquant la police de votre choix et en mettant les variables en gras, par exemple. Activez le mode Afchage en direct pour afcher les donnes de la premire page, puis enregistrez votre page et testez son fonctionnement dans le navigateur (voir repre de la gure 20-65).
Autres comportements de pagination et dafchage Le panneau Comportements de serveur propose dautres comportements qui permettent de raliser des paginations et des afchages dtat sur mesure (voir gure 20-66 pour ceux concernant la pagination). Vous pouvez ainsi insrer ponctuellement, o vous le voulez dans votre page, un lment de pagination ou dafchage dtat en rfrence un jeu denregistrements pralablement cr.
Figure 20-66
Les diffrents comportements de pagination disponibles
Accs aux comportements dtat et de navigation individuels par le panneau Insertion Lorsque vous afchez le menu de la barre de navigation ou de la zone dtat dans le panneau Insertion (voir gures 20-63 et 20-64), vous pouvez aussi accder individuellement aux mmes comportements que ceux prsents la gure 20-66.
500
Pages dafchage Principale-Dtails

Il est frquent que lafchage dinformations issues dune base de donnes se fasse en deux tapes. Une premire page (page Principale) afche la liste des enregistrements disponibles et une seconde (page Dtails) le dtail de chaque enregistrement. Dans ce cas, chaque ligne de la premire page contient un lien dynamique qui permet dappeler la seconde page en passant lidentiant de lenregistrement concern dans un paramtre dURL. La page de dtails peut videmment comporter de nombreuses informations sur lenregistrement, alors que la page principale afche uniquement quelques informations ncessaires son identication. Ce type de structure est trs frquemment utilis dans les catalogues en ligne, par exemple, car elle permet dafcher une liste de produits correspondants la rubrique slectionne ou la recherche ralise sur critre, puis une che dynamique dtaille, qui est cre la vole lorsque lutilisateur clique sur le lien En savoir plus dun produit.
Cration automatique ou manuelle
Dreamweaver propose une application qui permet de crer automatiquement une structure de deux pages Principale-Dtails. Cette application est accessible depuis licne Ensemble de pages Principale-Dtails de la catgorie Donnes du panneau Insertion. Cependant, il est souvent plus intressant en pratique (et gure beaucoup plus compliqu) de raliser une structure Principale-Dtails manuellement en crant sparment les pages Principale et Dtails. Vous allez donc appliquer cette mthode lafchage de toutes les informations dune randonne particulire (sous forme de che individuelle dinformations) aprs un clic du visiteur sur un lien de la page principale. Pour cela, vous utiliserez la page page-randonnees.php prcdemment cre et la page page-fiche.php que vous allez entirement raliser. La page page-randonnees.php afchera la liste des randonnes (page Principale) et page-fiche.php aura pour fonction dafcher le dtail de chaque randonne (page Dtails) sous forme de che.
Procdure de cration manuelle de pages Principale-Dtails
Remarque Pour la page principale, reprenez la page page-randonnees.php prcdemment cre. Vous naurez ainsi plus qu ajouter le lien En savoir plus qui permettra daccder la page Dtails correspondant lenregistrement dsir.
1. Ouvrez une nouvelle page (en prenant comme base la page initiale de la rubrique Randonnes, page-randonnees_base.php, disponible dans les chiers sources de louvrage) et enregistrez-la sous le nom page-fiche.php. 2. Cliquez sur le bouton + du panneau Liaisons pour crer un nouveau jeu denregistrements. Renseignez les champs selon les paramtres de la gure 20-67 puis validez. noter que ce jeu denregistrements comporte un ltre qui permettra de slectionner lenregistrement de la randonne sur laquelle nous allons cliquer dans la liste. Il vise sassurer que la valeur du champ ID de lenregistrement correspond bien au paramtre
501
dURL (qui porte le mme nom, ce qui est conseill mais pas obligatoire) envoy cette page lorsque lutilisateur cliquera sur le lien En savoir plus. Pour vous assurer que le jeu fonctionne correctement, nous vous suggrons de cliquer sur le bouton Tester et de saisir un numro didentiant existant, soit 2 pour notre exemple, dans le champ Valeur de test de la bote de dialogue Fournissez une valeur test (voir repre de la gure 20-67). Si vous cliquez ensuite sur OK, lenregistrement correspondant safche alors dans une troisime fentre. Validez successivement les diffrentes fentres ouvertes (le nouveau jeu denregistrements doit ensuite apparatre dans le panneau Liaisons) et mme si cette page nest pas compltement termine, nous vous suggrons de lenregistrer, nous allons y revenir plus tard.
Figure 20-67
Jeu denregistrements rsFiche de la page page-che.php
3. Vous devez prsent crer et congurer le lien En savoir plus an que le paramtre dURL attendu soit correctement paramtr. Pour cela, ouvrez de nouveau le chier page-randonnees.php, puis ajoutez un lien En savoir plus en dessous des deux valeurs dynamiques de la page et slectionnez-le (voir repre de la gure 20-68). Cliquez sur licne Rechercher le chier, situe droite du champ Lien dans le panneau Proprits de lobjet (voir repre de la gure 20-68). Dans la bote de dialogue qui souvre alors, slectionnez le chier page-fiche.php que vous venez de crer (voir repre de la gure 20-68) et cliquez sur le bouton Paramtres situ en bas de la bote droite du champ URL (voir repre de la gure 20-68). 4. Une fois la bote de dialogue Paramtres ouverte, cliquez sur le bouton + et saisissez ID dans la colonne Nom, puis passez dans la cellule de droite nomme Valeur et cliquez sur licne Lier la source dynamique, symbolise par un clair, situe droite de la zone de saisie (voir repre de la gure 20-68). La bote de dialogue Donnes dynamiques souvre alors. Slectionnez le champ ID dans le jeu rsRandonnees (voir repre de la gure 20-68), puis validez toutes les botes successivement. Le champ Lien du panneau Proprits doit alors tre renseign automatiquement avec la valeur page-fiche.php?ID=<?phpecho$row_rsRandonnees['ID'];?>.
502
Figure 20-68
Paramtrage du lien dappel de page-che.php
5. Enregistrez la page page-randonnees.php pour terminer cette modication de la page. 6. Retournez ensuite sur la page page-fiche.php et placez-y les diffrentes informations textuelles qui caractrisent une randonne en utilisant la mthode de mise en forme de votre choix (les tableaux ou les CSS). Pour cela, faites simplement glisser les lments dynamiques du jeu denregistrements (disponibles dans le panneau Liaisons) aux emplacements dsirs dans la page (comme nous lavons dj fait dans la page de la liste). Vous pouvez galement commencer par mettre en page des lments statiques provisoires (appels marqueurs) en leur attribuant un style adapt, puis les lier aux lments dynamiques du jeu denregistrements avec le bouton Lier situ en bas du panneau Liaisons. Cette seconde mthode tant mieux adapte une mise en page CSS, nous allons lutiliser pour disposer les informations de la randonne dans la page. 7. Aprs avoir ralis la mise en page dsire avec des rgles CSS et intgr des marqueurs (prendre par exemple XX en guise de marqueur) tous les endroits o devront prendre place les valeurs dynamiques, slectionnez un marqueur spcique (voir repre de la gure 20-69), puis llment correspondant du jeu denregistrements (voir repre de la gure 20-69) et cliquez sur le bouton Insrer (voir repre de la gure 20-69) pour que la donne dynamique se substitue au marqueur. Procdez de la mme manire pour tous les marqueurs de la page.
503
Figure 20-69
Liaison dune donne texte du jeu denregistrements avec un marqueur de la page page-che.php
8. Pour limage, la dmarche sera identique. Placez lune des images de randonne dans la page et attribuez-lui un style permettant de la positionner dans la zone de droite de la page. Slectionnez limage (voir repre de la gure 20-70) et copiez le chemin qui prcde le nom de limage dans le champ Src du panneau Proprits. Limage tant toujours slectionne, cliquez sur le nom de la donne photo dans le jeu denregistrements du panneau Liaisons, an de le slectionner son tour (voir repre de la gure 20-70), puis cliquez sur le bouton Lier (voir repre de la gure 20-70). Limage se transforme alors en image dynamique (icne avec un arbre et un clair) pour signaler que la liaison entre les deux lments est effectue. Retournez ensuite dans le champ Src du panneau Proprits, placez le curseur de la souris devant la premire balise PHP et collez le chemin que vous aviez copi prcdemment, soit photos/ pour notre exemple. Validez ensuite linsertion en appuyant sur la touche Entre pour vous assurer que le chemin a bien t enregistr.
Figure 20-70
Liaison de la donne photo du jeu denregistrements avec limage place dans la page page-che.php
9. Enregistrez la page page-fiche.php et ouvrez de nouveau la page page-randonnees.php. Appuyez ensuite sur la touche F12 pour la page de la liste des randonnes pour tester
504
le fonctionnement complet de la structure des pages Principale-Dtails. Depuis le navigateur, slectionnez une randonne de votre choix dans la liste propose en cliquant sur son lien En savoir plus. La page page-fiche.php doit alors safcher avec les informations et limage en rapport avec la randonne slectionne (voir gure 20-71).
Figure 20-71
Test de la page page-che.php dans le navigateur
Pages de gestion des donnes

Jusqu prsent, nous avons toujours gr les donnes de la base laide du gestionnaire phpMyAdmin. Cependant, vous ne serez srement pas le seul en pratique devoir intervenir dans la base de donnes car un site doit pouvoir tre mis jour par un public trs vari. Dans ce cas, cette solution nest plus envisageable et il faut concevoir des formulaires de gestion de la base adapts et utilisables par tous. Vous allez donc crer diffrents formulaires selon la fonction raliser (ajout de donnes, modication, suppression).
Cration automatique ou manuelle
Pour chaque type de page de gestion des donnes, une cration automatique ou manuelle est possible (les outils permettant la cration des pages de gestion des donnes sont accessibles depuis la catgorie Donnes du panneau Insertion).
505
La cration automatique fait appel des assistants de cration qui regroupent le comportement de gestion des donnes (ajout ou modication) et de gnration de formulaire en une seule bote de dialogue, alors que la cration manuelle consiste utiliser uniquement la bote de dialogue qui correspond au comportement de gestion des donnes. Lutilisation des assistants est plus rapide, mais aussi plus contraignante car ils gnrent automatiquement une structure de formulaire standard quil faut souvent modier dans un second temps. Travailler avec le comportement de gestion est videmment plus long car il faudra construire au pralable les structures des formulaires. Cependant, le fait dtablir manuellement les formulaires permettra de les crer en adquation avec les besoins de lapplication et avec la mthode de mise en forme dsire (tableaux ou CSS), alors que lassistant crera automatiquement des formulaires dont la mise en forme utilisera exclusivement les tableaux.
Page dajout de donnes
Pour illustrer la cration dun formulaire dinsertion de donnes, vous allez ajouter une page dans la partie publique du site qui permettra tout visiteur de sinscrire lune des randonnes proposes dans la liste. Pour accder cette page dajout, un lien Sinscrire cette randonne devra tre cr et congur en bas de la page page-fiche.php. Lorsque le visiteur cliquera sur ce lien, il sera redirig vers une page page-inscription.php et un paramtre dURL (ID) congur dans le lien hypertexte permettra dindiquer la randonne laquelle le visiteur dsire sinscrire. 1. Ouvrez une nouvelle page PHP partir du chier page-randonnees_base.php et enregistrez-la sous le nom page-inscription.php. 2. Cliquez sur licne Formulaire de la catgorie Formulaires du panneau Insertion pour ajouter un formulaire la page. 3. En crant des styles adapts, insrez quatre champs de saisie accompagns de leur tiquette. laide du panneau Proprits de lobjet, nommez les diffrents champs nom, prenom, tel et email. Ajoutez ensuite un objet Bouton de soumission en bas du formulaire via licne Bouton de la catgorie Formulaires. 4. Les champs de saisie, qui permettront au visiteur de saisir ses coordonnes, sont dsormais en place. Vous devez prsent ajouter un objet Champ masqu dans le formulaire, de manire rcuprer le paramtre dURL porteur de lidentiant de la randonne laquelle le visiteur dsire sinscrire. Pour ajouter ce champ masqu, placez votre curseur au point dinsertion et cliquez sur licne Champ masqu de la catgorie Formulaires du panneau Insertion (voir repre de la gure 20-72). Slectionnez le champ masqu (voir repre de la gure 20-72) et renseignez son nom en saisissant randonneesID dans le panneau Proprits (voir repre de la gure 20-72). Pour congurer la valeur initiale de ce champ masqu, vous allez devoir ajouter au pralable une variable dURL dans le panneau Liaisons. Pour cela, cliquez sur le bouton + de ce panneau et slectionnez Variable dURL dans la liste propose. Saisissez ensuite le nom de la variable crer, soit ID, dans la bote de dialogue Variable dURL, puis validez (la nouvelle variable doit ensuite apparatre dans le panneau
506
Liaisons, voir repre de la gure 20-72). Slectionnez de nouveau le champ masqu ajout prcdemment et cliquez sur licne Lier la source dynamique, symbolise par un clair, dans le panneau Proprits (voir repre de la gure 20-72). Slectionnez ensuite la variable dURL ID dans la bote de dialogue Donnes dynamiques (voir repre de la gure 20-72), puis validez en cliquant sur OK.
Figure 20-72
Conguration du champ masqu de lidentiant de la randonne slectionne par le visiteur
5. Le formulaire est termin. Il ne vous reste plus qu ajouter le comportement de serveur dinsertion des donnes du formulaire dans la base. Pour cela, cliquez sur le bouton + du panneau Comportements de serveur et slectionnez Insrer un enregistrement dans la liste propose (voir repre de la gure 20-73). Dans la bote de dialogue qui souvre alors, slectionnez le formulaire concern, la connexion la base de donnes et la table dans laquelle vous dsirez enregistrer un nouvel enregistrement (voir repre de la gure 20-73). Si vous avez bien congur chaque champ du formulaire avec les noms que nous vous avons suggr (qui correspondent ceux des colonnes de la table inscriptions), le cadre Colonnes de la bote de dialogue doit indiquer la valeur obtenue, pour chacun de ces champs sauf pour la cl primaire ID qui sera attribue automatiquement par la base, car nous lavons congure comme champ auto-incrment lorsque nous avons cr la table inscriptions. Si tout est correct (dans le cas contraire, cliquez sur Annuler et vriez les noms de vos
507
champs de formulaire), slectionnez la page vers laquelle sera redirig lutilisateur aprs avoir valid son formulaire. Pour cela, cliquez sur le bouton Parcourir et choisissez la page de la rubrique Randonnes (page-randonnees.php) puis validez vos choix en cliquant sur OK. Dans cet exemple, nous ninformons pas le visiteur que son message a bien t envoy, cependant, cette option est trs simple mettre en uvre car il sagit simplement de rediriger le visiteur vers une page contenant un message de conrmation denvoi.
Figure 20-73
Cration du comportement Insrer un enregistrement
6. Cette page tant termine, vous pouvez lenregistrer ds prsent. Cependant, pour que lutilisateur puisse y accder, il faut encore congurer le lien qui sera plac dans la page de la che dune randonne. Pour cela, ouvrez la page page-fiche.php et saisissez le texte Sinscrire cette randonne sous les informations de la randonne. Slectionnez ce texte (voir repre de la gure 20-74) et cliquez sur licne Rechercher le chier, situe droite du champ Lien dans le panneau Proprits (voir repre de la gure 20-74). Dans la fentre qui souvre alors, slectionnez le chier page-inscription.php prcdemment cr (voir repre de la gure 20-74) et cliquez sur le bouton Paramtres (voir repre de la gure 20-74). Dans la bote de dialogue Paramtres, saisissez ID dans la colonne Nom et placez le curseur de la souris dans la colonne Valeur. Cliquez sur licne reprsentant un clair (voir
508
repre de la gure 20-74) et dans la bote de dialogue qui souvre alors, cliquez sur la donne ID du jeu denregistrements de la randonne (voir repre de la gure 20-74), puis validez successivement les diffrentes botes de dialogue en cliquant sur les boutons OK. Enregistrez cette page et appuyez sur la touche F12 pour tester son fonctionnement dans le navigateur.
Figure 20-74
Conguration du lien Sinscrire cette randonne
7. Une fois la page afche dans le navigateur, cliquez sur la rubrique Randonnes an dafcher la liste des randonnes proposes. Cliquez ensuite sur le lien En savoir plus dune des randonnes pour visualiser sa che dtaille, puis sur le lien Sinscrire cette randonne an daccder au formulaire dinscription que vous venez de raliser. Saisissez vos coordonnes dans le formulaire puis validez. Vous devez alors tre redirig vers la page de la rubrique Randonnes. Pour vrier que votre inscription sest droule correctement, ouvrez ensuite le gestionnaire phpMyAdmin et afchez le contenu de la table inscriptions.
Page de modication de donnes
Une fois les informations enregistres dans la base de donnes, il est souvent ncessaire de les modier ou de les actualiser. Pour cela, vous devrez utiliser le comportement de serveur Mettre jour lenregistrement prsent ci-aprs.
509
Comme pour la page dajout ralise prcdemment, si vous nutilisez pas lassistant de formulaire, la cration dune page de modication ncessite la mise en place pralable dun formulaire avant de crer le comportement de mise jour. Cependant, et contrairement lajout, dans le cas dune modication, les champs du formulaire devront tre renseigns ds lafchage de la page avec les informations actuellement enregistres dans la base de donnes. Pour cela, vous devez crer un jeu denregistrements an de disposer des donnes pour initialiser les valeurs de chacun des champs du formulaire. Une page de modication ncessite donc une slection pralable de lenregistrement mettre jour, ce qui peut tre ralis avec un menu droulant dynamique (qui afche automatiquement dans ses items tous les enregistrements dune table) ou laide dune page de type liste dans laquelle un lien Modier sera congur pour appeler la page de modication en passant en paramtre lidentiant de lenregistrement modier. Pour notre exemple, nous utiliserons cette seconde mthode car elle permettra ensuite de mettre facilement en place lapplication de suppression qui, elle aussi, ncessite une slection pralable de lenregistrement supprimer. Pour illustrer la cration dune page de mise jour dun enregistrement, nous vous proposons de crer un petit espace dadministration du site Montagne-65 dans lequel ladministrateur pourra modier ou supprimer les inscriptions enregistres dans la base de donnes. Cet espace sera compos de deux pages dadministration : inscriptionsliste.php, destine la slection des randonnes modier (et par la suite supprimer) et inscriptions-modif.php, qui contiendra le formulaire et le comportement de mise jour. Ces pages dadministration seront regroupes dans un rpertoire nomm /admin/ an de faciliter la mise en place ultrieure dun contrle daccs. 1. Ouvrez une nouvelle page PHP et enregistrez-la sous le nom inscriptions-liste.php. La procdure de cration dune liste de donnes ayant dj t prsente la section prcdente Page dafchage dune liste denregistrements avec images , nous passerons rapidement sur ses tapes de construction (revoir si besoin la cration de la page page-randonnees.php). 2. Crez un jeu denregistrements de toutes les inscriptions, nomm rsInscriptions. Dans la fentre Jeu denregistrements, slectionnez la table inscriptions, la cl primaire ID et le nom du visiteur (voir repre de la gure 20-75). Validez vos choix en cliquant sur OK et placez dans la page un premier bloc dinformations destin contenir le nom du visiteur inscrit (utilisez un marqueur provisoire X), ainsi que deux liens nomms modif et supp (voir gure 20-75). Liez ensuite le marqueur du nom avec la donne du jeu denregistrements correspondante (voir repre de la gure 20-75) en cliquant sur le bouton Lier, situ en bas du panneau Liaisons, aprs avoir slectionn la donne nom. Le marqueur du nom doit alors se transformer en donne dynamique {} (voir repre de la gure 20-75). Slectionnez le bloc conteneur puis cliquer sur le bouton + du panneau Comportements de serveur. Choisissez Rgion rpte dans la liste propose puis slectionnez Tous les enregistrements et validez votre choix. Une tiquette Rpte apparat alors autour du conteneur, signalant ainsi que le comportement est oprationnel.
510
Figure 20-75
Cration et conguration de la page inscriptions-liste.php
Il convient prsent de congurer le lien modif de cette page de manire que lorsque ladministrateur cliquera dessus, un paramtre dURL (ID), initialis avec la cl primaire de lenregistrement concern, soit envoy avec lappel la page de modication. Avant de passer la conguration de ce lien, vous allez tout dabord crer la page de modication qui sera la cible du lien. Nous reviendrons ensuite cette page pour terminer sa conguration. 1. Ouvrez une nouvelle page PHP et enregistrez-la sous le nom inscriptions-modif.php. Insrez ensuite sur cette page un formulaire semblable celui que nous avons plac dans la page page-inscription.php. Assurez-vous que chaque champ est bien nomm de la mme manire que les noms des colonnes de la table inscriptions auxquels il se rapporte (nom, prenom, tel et email).
Figure 20-76
Cration et test du jeu denregistrements de rappel des coordonnes du randonneur
511
2. Crez un jeu denregistrements an de rcuprer toutes les informations concernant la personne inscrite la randonne partir de lidentiant qui sera pass pralablement dans lURL (ID) lors du clic sur le lien modif (voir gure 20-76). Pour cela, cliquez sur le bouton + du panneau Liaisons (voir repre de la gure 20-76), saisissez le nom du jeu denregistrements, slectionnez sa connexion et la table inscriptions, ainsi que toutes les colonnes. Congurez le ltre pour slectionner lenregistrement correspondant lidentiant pass dans lURL (ID, voir repre de la gure 20-76). Cliquez sur le bouton Tester (voir repre de la gure 20-76), puis saisissez lidentiant de votre choix dans le champ de la bote de dialogue. Fournissez une valeur test (voir repre de la gure 20-76). Cliquez ensuite sur le bouton OK de cette mme bote (voir repre de la gure 20-76) pour vrier que votre requte fonctionne correctement et que vous obtenez bien la personne correspondante lidentiant. 3. Une fois le jeu denregistrements cr, slectionnez chaque donne dynamique du jeu du panneau Liaisons et faites-les glisser dans les champs de saisie du formulaire correspondants. An de disposer de lidentiant de lenregistrement lors de la mise jour, vous allez ajouter un champ masqu qui mmorisera sa valeur. Pour cela, placez le curseur de la souris dans le formulaire ( gauche du bouton de validation par exemple) et cliquez sur licne Champ masqu de la catgorie Formulaires du panneau Insertion. Assurez-vous que le champ masqu qui a t ajout dans le formulaire est bien slectionn (voir repre de la gure 20-77) et nommez-le ID laide du panneau Proprits (voir repre de la gure 20-77). Cliquez ensuite sur licne Lier la source dynamique, symbolise par un clair (voir repre de la gure 20-77), et slectionnez la donne dynamique ID du jeu denregistrements dans la bote de dialogue (voir repre de la gure 20-77). Cliquez sur OK. Le champ Valeur est alors automatiquement renseign.
Figure 20-77
Conguration du champ masqu ID
512
4. La page peut dsormais rcuprer les informations relatives un randonneur et initialiser les champs en rapport dans le formulaire de modication. Il convient prsent dajouter le comportement Mettre jour. Pour cela, cliquez sur le bouton + du panneau Comportements de serveur (voir repre de la gure 20-78) et slectionnez Mettre jour lenregistrement dans la liste. Choisissez la connexion connexionMysql, la table inscriptions et assurez-vous que toutes les informations du formulaire sont bien dtectes dans le cadre Colonnes (sauf la colonne randonnesID qui ne sera pas modiable). Slectionnez ensuite la page vers laquelle sera redirig ladministrateur aprs avoir valid sa mise jour (voir repre de la gure 20-78) et cliquez sur le bouton OK pour conrmer vos choix.
Figure 20-78
Cration du comportement Mettre jour lenregistrement
5. La page inscriptions-modif.php est dsormais termine et vous pouvez la sauvegarder. Vous devez prsent raliser la conguration du lien modif dans la page de la liste des randonneurs. Pour cela, ouvrez de nouveau la page inscriptions-liste.php et slectionnez le lien modif (voir repre de la gure 20-79). Cliquez sur licne Rechercher le chier situe droite du champ Lien dans le panneau Proprits et slectionnez la page inscriptions-modif.php (voir repre de la gure 20-79). Cliquez ensuite sur le bouton Paramtres (voir repre de la gure 20-79) et saisissez ID dans la colonne Nom. Passez dans la colonne Valeur et cliquez sur licne reprsentant un clair (voir repre de la gure 20-79). Slectionnez la donne ID dans la bote de dialogue Donnes dynamiques (voir repre de la gure 20-79) et validez successivement toutes les botes de dialogue.
513
Figure 20-79
Conguration du lien modif
6. Enregistrez la page et appuyez sur la touche F12 pour tester le systme de modication dans le navigateur. Si vous navez pas encore dinscription, rendez-vous sur la page publique de la rubrique Randonnes et simulez plusieurs inscriptions avec des noms de votre choix. Revenez ensuite la page inscription-liste.php et cliquez sur le lien modif du randonneur que vous dsirez modier. Le formulaire de modication doit alors safcher avec les informations saisies initialement dans les champs. Modiez lune de ces informations et validez la mise jour en cliquant sur le bouton de soumission. Procdez de la mme manire pour vous assurer que la modication a bien t prise en compte.
Page de suppression de donnes
Au cours de la vie dune base de donnes, certains enregistrements sont amens disparatre. Il faut par consquent prparer une fonctionnalit qui permettra de raliser simplement cette action. Pour illustrer ce comportement, vous allez ajouter cette fonctionnalit au systme dadministration de la table inscriptions. Cependant, comme pour la page de modication, avant de supprimer un enregistrement il faut le slectionner au pralable. Pour cela, vous utiliserez la page inscriptions-liste.php dans laquelle vous congurerez le lien supp qui permettra denvoyer un ordre de suppression au comportement de serveur
514
Supprimer lenregistrement. Vous ajouterez ensuite un comportement en rapport dans cette mme page ; il sera congur pour tre dclench par lordre de suppression prcdemment cr. Ainsi, lorsque ladministrateur cliquera sur le lien supp correspondant une inscription particulire, une requte de suppression sera envoye la base liminant ainsi dnitivement lenregistrement pralablement slectionn. 1. Ouvrez de nouveau la page inscriptions-liste.php. 2. Slectionnez le texte supp dans la page (voir repre de la gure 20-80) et cliquez sur licne Rechercher le chier situe droite du champ Lien (voir repre de la gure 20-80). Slectionnez le chier inscriptions-liste.php (voir repre de la gure 20-80) puis cliquez sur le bouton Paramtres (voir repre de la gure 20-80). Dans la bote de dialogue qui souvre alors, saisissez ID dans la colonne Nom, passez dans la colonne Valeur, cliquez sur licne reprsentant un clair droite du champ (voir repre de la gure 20-80) et slectionnez la donne ID dans la bote de dialogue Donnes dynamiques (voir repre de la gure 20-80). Cliquez ensuite sur le bouton + an dajouter un second paramtre. Celui-ci sappellera supp et sera utilis par la suite dans la conguration du comportement de serveur pour viter les suppressions intempestives qui pourraient tre occasionnes par la prsence accidentelle du paramtre ID dans lURL. Saisissez donc supp dans la colonne Nom et ok dans la colonne Valeur (voir repre de la gure 20-80), puis validez successivement toutes les botes de dialogue.
Figure 20-80
Conguration du lien supp
515
3. La commande de suppression est termine. Vous devez prsent crer et congurer le comportement de serveur Supprimer lenregistrement pour que le systme soit compltement oprationnel. Pour cela, cliquez sur le bouton + du panneau Comportements de serveur et slectionnez Supprimer lenregistrement (voir repre de la gure 20-81). Dans la bote de dialogue qui souvre alors, slectionnez Paramtre dURL dans la premire liste droulante et saisissez, droite, le nom du paramtre de scurit prcdemment ajout dans lURL du lien supp, soit supp pour notre exemple (voir repre de la gure 20-81). Choisissez ensuite la connexion connexionMysql et la table inscriptions, puis validez sans congurer dadresse de page de redirection (car nous dsirons que ladministrateur reste dans cette page une fois que la suppression sera effectue).
Figure 20-81
Cration du comportement de serveur Supprimer lenregistrement
4. Enregistrez la page inscriptions-liste.php et testez la fonctionnalit de suppression dans le navigateur en appuyant sur la touche F12 (voir gure 20-82).
Figure 20-82
Test de la fonctionnalit de suppression de la page inscriptions-liste.php
516
Page de conrmation dune suppression Lors de la suppression, aucun message na inform lutilisateur que lenregistrement slectionn allait tre dnitivement supprim. Dans certains cas, il pourrait tre judicieux dajouter une page supplmentaire an dinformer lutilisateur quune opration de suppression va tre effectue et de lui donner la possibilit dannuler son action sil sagit dune erreur de manipulation. Pour mettre en uvre ce type de page, il suft de dplacer le comportement de suppression dans une nouvelle page qui sera appele lors du clic sur le lien de suppression. Lutilisateur aura ainsi la possibilit de conrmer ou dannuler son action.
Pages dauthentication
Pour mettre en uvre un systme dauthentication, Dreamweaver propose trois comportements de serveur qui seront dtaills dans les sections suivantes. Le premier concerne le formulaire dauthentication qui, coupl la base de donnes, permet de valider si le compte de lutilisateur existe et si le mot de passe est correct. Le deuxime doit tre ajout dans chaque page de lespace protg et vrie si lutilisateur a bien t authenti au pralable. Le troisime permet lutilisateur de se dconnecter. Pour illustrer lusage de ces trois comportements de serveur, nous allons crer un systme dauthentication an de protger les deux pages dadministration du site Montagne-65 prcdemment cres.
Crer la table utilisateurs
Pour mettre en place un systme dauthentication, il convient au pralable de crer une table dans la base de donnes qui aura pour fonction de mmoriser les identiants et mots de passe des personnes habilites accder lespace protg. 1. Ouvrez le gestionnaire phpMyAdmin depuis le manager de WampServer 2. Pour cela, cliquez sur licne du manager et slectionnez phpMyAdmin. 2. Slectionnez la base de donnes montagne_db dans le cadre de gauche et saisissez utilisateurs dans le champ Nom de la zone Crer une nouvelle table sur la base montagne_db. Indiquez le chiffre 2 dans le champ Nombre de champs, puis cliquez sur le bouton Excuter. 3. Dans lcran suivant, saisissez log et pass dans la colonne Champ. Conservez le type par dfaut (VARCHAR) et prcisez 20 dans la colonne Taille/Valeurs pour les deux lignes (voir repre de la gure 20-83). 4. Cochez le bouton radio Primaire pour le champ log an dindiquer quil fera ofce de cl primaire pour cette table (voir repre de la gure 20-83). Cliquez ensuite sur le bouton Sauvegarder.
517
Figure 20-83
Cration de la table utilisateurs
5. La structure de la table utilisateurs est dsormais cre. Il convient prsent dy ajouter au moins un utilisateur avant de pouvoir commencer dvelopper le systme dauthentication. Pour cela, cliquez sur longlet Insrer en haut de lcran et saisissez le nom dutilisateur admin et le mot de passe 1234 (voir repre de la gure 20-84), puis validez en cliquant sur le bouton Excuter (voir repre de la gure 20-84).
Figure 20-84
Saisie dun utilisateur et de son mot de passe dans la table utilisateurs
La table contenant les informations ncessaires lauthentication est dsormais cre. Vous allez maintenant pouvoir construire le formulaire dauthentication et congurer les comportements de serveur associs.
Le comportement Connecter lutilisateur
1. Ouvrez une nouvelle page PHP dans lespace public (prenez une page semblable celle de la rubrique Randonnes par exemple). Saisissez le texte qui sera afch en cas derreur de connexion et enregistrez la page la racine du site sous le nom pageerreur.php. 2. Procdez de la mme manire pour crer une seconde page dans lespace public et enregistrez-la la racine du site sous le nom page-login.php. 3. Placez dans cette page un formulaire compos de deux champs : log et pass (voir gure 20-85). Le fait de nommer les champs de ce formulaire de la mme manire que les noms des colonnes de la table utilisateurs permettra ensuite au comportement de serveur de les associer automatiquement sans quil soit ncessaire deffectuer des liaisons manuelles entre ces deux types dlments. Pour le champ du mot de passe, il est conseill de cocher loption Mot de passe du panneau Proprits (aprs avoir
518
pralablement slectionn le champ pass) an que les caractres saisis dans ce champ soient remplacs par des toiles.
Figure 20-85
Cration du formulaire dauthentication et conguration de son champ log
4. Placez ensuite un bouton de soumission en bas de lcran, mais toujours lintrieur du formulaire. 5. Cliquez sur le bouton + du panneau Comportements de serveur et choisissez Authentication de lutilisateur>Connecter lutilisateur (voir repre de la gure 20-86). Dans la bote de dialogue qui souvre alors, vriez que les paramtres relatifs aux champs de formulaires sont correctement congurs par dfaut (le formulaire de la page doit tre slectionn ainsi que ses deux champs log et pass, voir repre de la gure 20-86). Slectionnez ensuite la connexion connexionMySql, la table utilisateurs ainsi que ses deux colonnes log et pass (qui devraient aussi tre slectionnes par dfaut).
Figure 20-86
Conguration du comportement Connecter lutilisateur
519
6. Cliquez sur le premier bouton Parcourir pour indiquer la page vers laquelle sera redirig lutilisateur si lauthentication russit, soit /admin/inscription-liste.php pour notre exemple. Cliquez sur le deuxime bouton Parcourir pour slectionner la page derreur, vers laquelle sera redirig lutilisateur en cas de problme, soit pageerreur.php pour notre exemple. 7. La dernire option de cette bote de dialogue permet davoir plusieurs prols dutilisateurs ayant chacun des droits daccs diffrents aux pages protges. Dans le cadre de cette dmonstration, nous nutiliserons pas cette option aussi, cochez loption Nom dutilisateur et mot de passe. Cliquez sur OK pour valider vos choix. ce stade de la procdure vous pouvez, si vous le dsirez, tester le fonctionnement du formulaire dauthentication en utilisant la touche F12 pour vous assurer quil fonctionne correctement. Dans ce cas, si vous saisissez un mauvais login ou mot de passe, vous devriez tre redirig vers la page derreur. Si vous faites ensuite une seconde tentative avec les bons paramtres (admin et 1234), vous devriez tre redirig vers la page de la liste des inscriptions. Si le comportement de vrication du login et du mot de passe fonctionne correctement, le systme dauthentication nen est pas pour autant termin. En effet, en ltat actuel, nimporte quelle personne non authentie peut accder la page de la liste des inscriptions sil en connat ladresse. Il faut donc ajouter un autre comportement dans chaque page dont laccs doit tre protg.
Le comportement Restreindre laccs la page
1. Ouvrez la page inscriptions-liste.php situe dans le rpertoire /admin/ prcdemment cr. 2. Cliquez sur le bouton + du panneau Comportements de serveur et choisissez Authentication de lutilisateur>Restreindre laccs la page (voir repre de la gure 20-87). Dans la bote de dialogue qui souvre alors, assurez-vous que loption Nom dutilisateur et mot de passe est bien coche puis cliquez sur le bouton Parcourir pour slectionner le chier page-login.php (voir repre de la gure 20-87).
Figure 20-87
Conguration du comportement Restreindre laccs la page.
520
Cliquez ensuite sur OK pour valider vos choix. Le nouveau comportement apparat alors dans le panneau Comportements de serveur. 3. Rptez cette opration pour lautre page de lespace dadministration, soit inscriptionsmodif.php. noter que si vous aviez dautres pages protger, il faudrait rpter cette mme procdure sur toutes les pages. Le systme est dsormais oprationnel et pourrait tre utilis en ltat. Cependant, en pratique, il est fortement recommand de se dconnecter ds que vous avez termin votre intervention dans lespace scuris car votre authentication persistera tant que vous naurez pas ferm le navigateur. Le troisime comportement dauthentication rpond cette demande car il permet dintgrer trs facilement un lien de dconnexion qui mettra n votre authentication et vous redirigera vers le formulaire de login. L aussi, le comportement de dconnexion doit tre ajout dans chacune des pages protges. Nous allons illustrer sa cration dans la page inscriptions-liste.php, mais il faudra ensuite suivre la mme procdure dans lautre page si vous dsirez aussi y disposer de la mme fonctionnalit.
Le comportement Dconnecter lutilisateur
1. Placez-vous dans la page inscription-liste.php et saisissez le texte Dconnexion dans une balise div place en dessous du titre de la page. Slectionnez-le (voir repre de la gure 20-88) et ajoutez le caractre # dans le champ Lien du panneau Proprits. Le texte sera ainsi automatiquement transform en lien hypertexte.
Figure 20-88
Conguration du comportement Dconnecter lutilisateur
2. Cliquez ensuite sur le bouton + du panneau Comportements de serveur et choisissez Authentication de lutilisateur>Dconnecter lutilisateur (voir repre de la gure 20-88). 3. Dans la bote de dialogue qui souvre alors, slectionnez le lien Dconnexion prcdemment cr (voir repre de la gure 20-88). Cliquez ensuite sur le bouton Parcourir et slectionnez le chier page-login.php vers lequel lutilisateur sera
521
redirig aprs avoir t dconnect (voir repre de la gure 20-88). Cliquez sur OK pour valider vos choix. 4. Enregistrez la page et procdez de la mme manire pour la page inscriptionsmodif.php. 5. Le systme dauthentication est termin. Appuyez sur la touche F12 pour tester son fonctionnement dans le navigateur. Connectez-vous de nouveau la page inscriptions-liste.php en vous identiant partir de lcran page-login.php (si cela nest pas dj fait), puis cliquez sur le lien Dconnexion. Si le systme fonctionne correctement, vous devez alors tre redirig vers la page page-login.php.
Le quatrime comportement dauthentication Vous avez certainement remarqu un quatrime comportement (Vrier le nouveau nom dutilisateur) dans la liste des comportements dauthentication proposs. Ce dernier est destin un ventuel formulaire de cration de compte utilisateur. Il permet en effet de vrier si le login que vous dsirez ajouter nest pas dj enregistr. Si tel est le cas, vous serez alors redirig vers une page derreur spcique.
Conclusion
Nous venons de vous dmontrer quil tait trs facile dintgrer des applications serveur PHP dans vos pages en restant en mode Cration, et cela sans saisir une ligne de code. Toutefois, ces dmonstrations ne sont pas exhaustives car Dreamweaver CS4 propose dautres comportements de ce type : par exemple, il est possible de raliser des jeux denregistrements en mode Avanc pour interroger plusieurs tables la fois ou utiliser plusieurs ltres. Malheureusement, nous ne pouvons pas traiter ici tous ces comportements de serveur car il faudrait y consacrer un ouvrage entier. Aussi, si vous dsirez en savoir plus sur les comportements de serveur, nous vous suggrons de vous rfrer un autre ouvrage, paru dans la mme collection, intitul PHP/MySQL avec Dreamweaver.
21
Gestion de donnes XML avec Spry
Nous avons dj eu loccasion dutiliser des outils Spry pour crer des effets visuels avancs, valider des formulaires ou encore crer des widgets de mise en forme (barres de menus droulants, panneaux onglet, zones rtractables, etc.). Nous allons maintenant utiliser les outils Spry pour intgrer des donnes dynamiques au format XML dans des pages Web et grer leur afchage dune manire interactive.
Gestion Spry de donnes dynamiques avec IE 7 Pour exploiter les fonctionnalits Spry de gestion de donnes dynamiques en local avec Internet Explorer 7, il est ncessaire de disposer dun serveur dvaluation correctement congur. Pour effectuer nos essais, nous utiliserons donc le site SITEmontagne que nous avons congur avec le serveur dvaluation WampServer 2 lors de nos crations de pages dynamiques avec PHP/MySQL (voir chapitre 20).
Prsentation du XML
Les outils Spry que nous allons utiliser dans ce chapitre exploitent des chiers XML externes dans lesquels ils puisent les donnes afcher dans la page. Nous allons donc vous rappeler dans cette partie les caractristiques du XML an que vous puissiez laborer vous-mme vos propres chiers sources de donnes dynamiques.
524
Dnition du XML
XML est lacronyme de eXtensible Markup Language. Comme le HTML, le XML est une norme SGML (Standard Generalized Markup Language) mais elle a t dveloppe bien plus tard (en 1998 alors que le HTML tait dni par le consortium W3C depuis 1990). Bien que lon a tendance le prsenter comme le successeur du HTML, le XML se caractrise par le fait quil contient uniquement des donnes structures, sans aucune indication quant leur prsentation. Ainsi, si vous ouvrez un document XML dans un navigateur, il nafche que la structure des donnes sous forme darborescence, contrairement au document HTML qui afche la traditionnelle page Web car il contient la fois les donnes et toutes les indications ncessaires leur mise en forme. XML est donc particulirement bien adapt pour structurer, enregistrer et transmettre des donnes.
Avantages du XML
Les avantages du XML sont multiples. En voici quelques-uns qui devraient vous convaincre de son intrt : Simple : comme son cousin le document HTML, le document XML est un simple document texte construit partir de balises qui contiennent des informations. Il est donc lisible et interprtable par tous sans outil spcique et avec peu de connaissances pralables. Souple : sil le dsire, lutilisateur peut structurer les donnes et nommer librement chaque balise et attribut du document (contrairement au HTML pour lequel les noms des balises et des attributs sont prdnis). Extensible : le nombre de balises nest pas limit (comme cest le cas pour le HTML) et peut donc tre tendu volont. Indpendant : grce son contenu bas sur un document texte et donc universel, il peut tre utilis sur tout type de plateforme (PC, Mac, Unix), mais galement avec tout type de langage de programmation (PHP, JavaScript). Interoprabilit : le fait que le XML soit un langage universel favorise linteroprabilit des applications et permet de raliser rapidement et simplement des changes de donnes. Gratuit : le XML est dvelopp par le consortium W3C. Son utilisation est donc libre et ne ncessite pas lachat dune licence commerciale.
Structure dun document XML

Comme une page HTML, un document XML contient un en-tte suivi de blocs de construction semblables ceux d4un document HTML pour structurer son contenu
Gestion de donnes XML avec Spry CHAPITRE 21
525
(lments, attributs, valeurs et commentaires). Lexemple de document XML ci-aprs permet de stocker de manire structure diffrentes informations sur la ore des Pyrnes :
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE info SYSTEM "http://adressedusite.com/info.dtd"> <flores> <flore> <nomfrancais>Linaigrette</nomfrancais> <nomlatin>Eriophorum </nomlatin> <caracteristiques>Les linaigrettes se rencontrent particulirement dans les endroits humides</ caracteristiques> </flore> <flore> <nomfrancais>Orchis</nomfrancais> <nomlatin/> <caracteristiques>Lorchis tachet est assez commune en France, elle est rpartie sur tout le territoire</ caracteristiques> </flore> </flores>
Len-tte
Le document commence par un en-tte (facultatif) qui contient des informations sur la version XML utilise (version="1.0"), le jeu de caractres (encoding="UTF-8") et lautonomie du document (standalone="no"). Seule la mention de la version est obligatoire. Si aucun type de codage nest dni, lUTF-8 est utilis par dfaut :
<?xml version="1.0" encoding="UTF-8"? standalone="no" >
Len-tte peut aussi faire rfrence une dclaration du type de document la DTD, pour Document Type Denition qui permet de valider la conformit du document en se rfrant lURL dun document en ligne ou en local (par exemple, http:// adressedusite.com/info.dtd).
<!DOCTYPE info SYSTEM "http://adressedusite.com/info.dtd">
Si len-tte se rfre une DTD externe (comme cest le cas dans lexemple ci-dessus), le document nest pas autonome et lattribut standlone doit tre congur avec la valeur "no". Dans le cas contraire (sil ny a pas de DTD ou si elle est interne), le document est autonome et la valeur de lattribut standalone doit tre dnie "yes". Si lattribut standlone est absent, la valeur par dfaut est "no".
Llment
Un lment (appel aussi nud) est lentit de base du document XML. Il peut contenir dautres lments et tout type de contenu (chane de caractres, autres lments, etc.). Le contenu dun lment est encadr par une balise ouvrante (par exemple, <flore>) et une balise fermante (une balise fermante contient le mme nom que la balise ouvrante prcd dun slash, par exemple, </flore>).
526
Si llment ne possde pas de contenu, les balises ouvrante et fermante sont remplaces par une seule et unique balise comportant un slash aprs le nom de llment (par exemple, <nomlatin/>). Le nom indiqu entre ces deux balises doit dcrire le contenu de llment, mais il nest pas prdni comme en HTML (<body>, <table>, <form>, etc.). Si le nom de llment est libre, il doit cependant utiliser uniquement des lettres de lalphabet, des chiffres ou les caractres - et _ . Il ne doit jamais contenir despace ou commencer par un chiffre.
Lattribut
Il est possible dajouter des attributs la balise ouvrante dun lment (par exemple, <flore nom="oxalis">). Les noms des attributs contenus dans une balise sont coupls avec une valeur encadre par des guillemets (par exemple, nom="oxalis"). Un attribut doit toujours avoir une valeur et leur nombre par lment nest pas limit, condition que chaque nom dattribut soit diffrent. Si un lment comporte plusieurs attributs, ceux-ci doivent tre spars par des espaces (par exemple, <flore nomlatin="Oxalis acetosella" nomfrancais="oxalis">).
Les valeurs
Dans un document XML, les valeurs peuvent correspondre des valeurs dattribut (par exemple, nom="oxalis") ou des valeurs dlment (par exemple, <nom>oxalis</nom>). Si les valeurs dlment contiennent des caractres spciaux (comme des chevrons ou autres caractres utiliss dans la structure dun document XML), elles doivent tre alors encadres par un dlimiteur spcial (![DATA[ ] ]) qui permet dintgrer des balises HTML en tant que valeur dun lment XML. Dans lexemple ci-aprs, nous avons intgr une liste puces HTML pour numrer les caractristiques dune eur en guise de valeur de llment <caracteristiques>.
<caracteristiques> <![CDATA[ <ul> <li>Couleur : Bleu</li> <li>Taille moyenne : 5 cm</li> <li>Catgorie : Fleur daltitude</li> </ul> ]]> </caracteristiques>
Les commentaires
Comme pour le HTML, des commentaires peuvent tre ajouts dans un document XML. La syntaxe est dailleurs identique celle utilise pour intgrer des commentaires dans une page HTML (par exemple, ). lintrieur dun commentaire, vous pouvez utiliser tout type de symbole sauf les doubles tirets -- . Les commentaires sont utiliss pour annoter les documents XML an de vous souvenir de lutilit de certains blocs dlments ou pour dtailler la structure du document. Ils
527
peuvent galement servir dboguer le code en neutralisant une partie du document an quil ne soit pas visible par lanalyseur XML.
Rgles dcriture dun document XML bien form

Mme si les documents XML sont simples et extensibles, ils nen sont pas pour autant dpourvus de rgles. On appelle document bien form un document qui respecte les rgles suivantes : Un seul lment racine Chaque document XML doit possder un seul lment racine, lequel contient tous les autres lments du document. Cet lment particulier sappelle nud racine ou root . Exemple :
<flores><flore>oxalis</flore><flore>chardon</flore><flores>
Ici, la balise <flores> est le nud racine du document XML. Balises de fermeture obligatoires Comme nous lavons vu prcdemment, chaque lment doit tre encadr par des balises ouvrante et fermante. Contrairement au HTML (dans lequel la balise <hr>, par exemple, est une balise inhrente sans balise de fermeture), le XML ne supporte pas labsence de balises fermantes. Il faudra donc veiller toujours ajouter une balise de fermeture tous les lments dun document XML. Si le document possde un lment vide, utilisez une balise unique avec un slash avant le signe > nal (par exemple, <nomlatin/>). Respecter limbrication des lments Lorsque vous ouvrez un premier lment puis un second, insrez la balise de fermeture du second avant celle du premier. Ainsi, le code <a><b>contenu</a></b> est incorrect, alors que <a><b>contenu</b></a> est correct. Respecter la casse Le XML est sensible la casse. Ainsi, les noms dlments flore, Flore et FLORE sont considrs comme diffrents en XML. Par ailleurs, les noms des lments et des attributs doivent tre saisis en minuscules. Mettre les valeurs des attributs entre guillemets Si une balise contient un couple nom dattribut/valeur, cette dernire doit toujours gurer entre guillemets simples ou doubles (par exemple, <flore nom="oxalis">). Utiliser les entits prdnies pour les caractres rservs Comme en HTML, il existe des caractres rservs dont lusage est interdit (<, >, &, ' et "). Pour chacun de ces caractres, utilisez lentit prdnie correspondante (<, >, &, ", '). Utiliser une section CDATA pour chapper un bloc de texte complet An dviter dutiliser des entits pour des longs blocs de texte comportant des caractres rservs, vous pouvez ajouter une section CDATA en respectant la syntaxe suivante : <![CDATA[bloc de texte]]>.
Vrication Pour savoir si un document est bien form, une mthode simple consiste lappeler avec un navigateur Internet rcent (possdant un interprteur XML intgr, comme les navigateurs ultrieurs IE 5 ou Netscape 6, voir gure 21-1).
528
Figure 21-1
Afchage dun document XML bien form dans un navigateur Internet
529
Crer un schma de donnes Spry

Avant de crer une application de gestion de donnes Spry, commencez toujours par dnir la source des donnes XML qui sera utilise dans lapplication. Pour cela, il convient de crer et de congurer un schma de donnes Spry dans Dreamweaver. Une fois cette opration effectue, vous disposerez de la structure de donnes correspondant au chier source dans le panneau Liaisons (cette reprsentation est semblable celle dun jeu denregistrements en PHP). Ce schma vous permettra ensuite de placer trs facilement les informations dynamiques dsires dans la page Web active. Pour illustrer la cration dun schma de donnes XML Spry, nous allons utiliser un chier XML qui contient diffrentes ores des Pyrnes mais sachez que nous pourrions aussi utiliser un chier HTML si celui-ci est correctement structur. Ce chier est identique celui qui est afch dans le navigateur la gure 21-1, mais vous pouvez le rcuprer dans les chiers source disponibles en tlchargement sur le serveur de lditeur (www.editions-eyrolles.com). 1. Ouvrez le chier page-flore_base1.html et enregistrez-le sous le nom page-flore1.html. 2. Depuis le panneau Liaisons, cliquez sur licne Ensemble de donnes Spry depuis les catgories Spry ou Donnes du panneau Insertion (voir repre de la gure 21-2). Vous pouvez galement accder la fentre Ensemble de donnes Spry en cliquant sur le bouton + pour slectionner loption Ensemble de donnes Spry. 3. La premire fentre Ensemble de donnes Spry est consacre la dnition de la source des donnes (tape 1/3). Commencez par slectionner le type de donnes (dans notre exemple, nous choisirons loption XML, voir repre de la gure 21-2) et modiez ventuellement le nom du schma (dans notre exemple, nous avons conserv le nom par dfaut, soit ds1, voir repre de la gure 21-2). 4. Cliquez sur le bouton Parcourir pour localiser le chier XML qui sera utilis pour crer le schma puis validez votre choix en cliquant sur OK. Le nom du chier XML doit ensuite sinscrire dans le champ Source XML (voir repre de la gure 21-2). 5. Ds le chier XML analys, le schma en rapport doit apparatre dans le cadre Elment de lignes situ en dessous du champ du chier de donnes. 6. Slectionnez lentre rptitive flore du schma dans le cadre (une entre rptitive est repre par un signe + droite du symbole, voir repre de la gure 21-2). 7. Un aperu (voir repre de la gure 21-2) des donnes correspondantes la source de donnes XML doit alors apparatre dans la fentre Aperu des donnes situes en bas de la bote de dialogue. 8. Cliquez ensuite sur le bouton Suivant pour passer ltape 2/3 ; Dnir les options des donnes. Pour les donnes afches, vriez la cohrence de leur type (voir repre de la gure 21-2) en slectionnant successivement les colonnes des donnes dans le menu Nom de la colonne (voir repre de la gure 21-2). Par dfaut, le type des donnes est chane (de caractres) mais Dreamweaver propose aussi dautres types de donnes qui peuvent tre plus appropris (nombre, date, html).
530
Figure 21-2
Cration dun schma XML Spry
Pour lensemble des donnes de ce schma, le type chane convient toutes les colonnes de donnes. Toutefois, si vous deviez le modier, il suft alors de slectionner le nom de la colonne (ou de cliquer dans la tte de la colonne en rapport) et de choisir le type appropri dans le menu Type situ sa droite. En bas de cette fentre, vous pouvez activer dautres options, comme le tri des donnes selon lune des colonnes, le ltrage des lignes en double ou encore la dsactivation de la mise en cache des donnes, cette dernire option permettant dactiver lactualisation automatique des donnes par rapport au chier source XML (voir repre de la gure 21-2). Pour notre exemple, nous opterons uniquement pour un tri alphabtique par rapport au nom en franais. 9. Cliquez de nouveau sur le bouton Suivant pour accder ltape 3/3, Choisir les options dinsertion. Cette dernire tape permet de choisir diffrents types dafchage
531
des donnes pr-crs. Pour ce premier schma, nous ne choisirons pas dafchage prdni et nous cliquerons sur le bouton Termin pour valider nos choix (voir repre de la gure 21-2). Le schma apparat alors dans le panneau Liaisons (voir repre de la gure 21-2).
Deux mthodes pour crer des structures de donnes dynamiques Spry Pour afcher des donnes dynamiques Spry, vous pouvez utiliser des structures HTML gnres automatiquement quil conviendra de congurer lors de ltape 3/3 de la cration dun schma de donnes Spry ou crer un schma sans option dafchage (comme nous lavons fait dans lexemple prcdent), puis exploiter les outils Spry disponibles dans la catgorie Spry du panneau Insertion pour les mettre en forme manuellement. Nous vous proposons ci-aprs de vous prsenter ces deux mthodes en les appliquant lafchage des donnes du chier ore.xml.
Crer une structure de donnes avec les outils Spry

La srie de crations de structure de donnes prsente dans cette section illustre la mthode qui consiste crer un schma de donnes sans option dinsertion, qui sera ensuite mis en forme manuellement grce aux outils Spry.
Afcher une simple donne dynamique Spry

Pour commencer votre apprentissage des donnes dynamiques, nous vous proposons de dtailler la procdure permettant dafcher une simple et unique donne issue dun schma Spry qui devra tre ralis au pralable (revoir si besoin la procdure prcdente pour crer un schma de donnes).
Boutons de gestion de donnes Spry Pour accder aux diffrents boutons de gestion de donnes Spry utiliss dans ce chapitre, vous pouvez utiliser la catgorie Spry du panneau Insertion ou la catgorie Donnes de ce mme panneau Insertion. Quelle que soit la mthode utilise, la bote de dialogue sera la mme. Dans les dmonstrations de ce chapitre, nous utiliserons la catgorie Spry.
1. Ouvrez le chier page-flore_base1.html et enregistrez-le sous le nom page-flore1.html. 2. En vous rfrant la procdure prcdente, crez le schma de donnes Spry correspondant au chier XML flores.xml. 3. Avant toute insertion de donnes dynamiques Spry, vous devez crer une rgion Spry an daccueillir les informations. Pour cela, placez le curseur de la souris au point dinsertion de la future donne dans la page Web (voir repre de la gure 21-3) puis cliquez sur licne Rgion Spry (voir repre de la gure 21-3) depuis la catgorie Spry (ou Donnes) du panneau Insertion. 4. Dans la bote de dialogue Insrer une rgion Spry qui souvre alors, conservez les options par dfaut (Conteneur : DIV et Type : Rgion) et assurez-vous que le schma ds1
532
prcdemment cr est bien slectionn dans la liste Ensemble de donnes Spry (voir repre de la gure 21- 3). Cliquez sur OK pour valider vos choix.
Figure 21-3
Cration dune rgion Spry
5. Une zone dlimite par des pointills et contenant le texte Placez ici le conteneur de la rgion Spry apparat alors au point dinsertion. Assurez-vous que ce texte est slectionn (voir repre de la gure 21-4), puis dans le panneau Liaisons, slectionnez la donne dynamique Spry que vous dsirez insrer (soit nomfrancais pour notre exemple, voir repre de la gure 21-4). Cliquez sur le bouton Insrer situ en bas du panneau Liaisons (voir repre de la gure 21-4). Le texte slectionn est alors remplac par le marqueur {nomfrancais} (voir repre de la gure 21-4). noter que pour insrer la donne dynamique dans la rgion Spry, une autre alternative consiste faire glisser la donne depuis le panneau Liaisons directement dans la rgion Spry sans utiliser le bouton Insrer.
Figure 21-4
Insertion dune donne dynamique Spry
6. Enregistrez la page et appuyez sur la touche F12 pour la tester dans le navigateur. Le contenu de la balise nomfrancais du premier nud flore doit alors apparatre au point dinsertion (voir repre de la gure 21-5).
533
Figure 21-5
Test de lafchage dune simple donne dynamique Spry dans un navigateur
Afcher une rgion rpte en bloc de donnes dynamiques Spry

Les outils Spry permettent galement dafcher des sries de donnes dynamiques. Pour cela, la manire la plus simple consiste utiliser loutil Rptition Spry. Deux types de conteneur peuvent tre congurs pour une Rptition Spry : le conteneur DIV, qui permet de gnrer une srie de donnes dynamiques dans des blocs diffrents, et le conteneur SPAN, qui permet de gnrer une srie de donnes dynamiques au sein dun mme bloc (inline). Dans lexemple qui suit, nous dsirons gnrer la liste de tous les noms franais des eurs du chier flores.xml sur des lignes diffrentes. Nous utiliserons donc un conteneur de type DIV (nous verrons ensuite un second exemple dapplication qui utilise un conteneur de type SPAN). 1. Ouvrez le chier page-flore_base1.html et enregistrez-le sous le nom page-flore2.html. 2. En vous rfrant la procdure prcdente (voir section Crer un schma de donnes Spry ), crez le schma de donnes Spry correspondant au chier XML flores.xml. 3. Placez le curseur de la souris au point dinsertion dans la page Web (revoir repre de la gure 21-3) et cliquez sur licne Rgion Spry (revoir repre de la gure 21-3) de la catgorie Spry (ou Donnes) du panneau Insertion. Validez la bote de dialogue Rgion Spry en conservant les options par dfaut. La rgion Spry apparat alors avec son texte provisoire. 4. Slectionnez le texte provisoire et cliquez sur la donne dynamique nomfrancais dans le panneau Liaisons. Cliquez ensuite sur le bouton Insrer situ en bas de ce panneau. Le texte provisoire remplace alors le marqueur de la donne slectionne dans la page active. 5. Slectionnez le marqueur {nomfrancais} (voir repre de la gure 21-6) et cliquez ensuite sur licne Rptition Spry de la catgorie Spry (voir repre de la gure 21-6). 6. Dans la bote de dialogue qui souvre alors, assurez-vous que le conteneur DIV est bien slectionn (voir repre de la gure 21-6) et validez la bote de dialogue avec les autres options par dfaut.
534
Figure 21-6
Cration dune rgion rpte de blocs Spry
7. Enregistrez la page et appuyez sur la touche F12 pour tester lapplication dans le navigateur. Les diffrents contenus des balises nomfrancais de chaque nud flore doivent alors safcher sur des lignes diffrentes (voir repre de la gure 21-7).
Figure 21-7
Test dune rgion rpte de blocs Spry dans le navigateur
Afcher une rgion rpte inline de donnes dynamiques Spry

Pour illustrer linsertion inline de donnes dynamiques Spry, nous allons maintenant afcher les diffrentes photos de eur sur une mme ligne dans un bloc commun (lURL des photos tant contenue dans la balise photo de chaque nud flore). 1. Ouvrez le chier page-flore_base1.html et enregistrez-le sous le nom page-flore3.html. 2. En vous rfrant la procdure prcdente, crez le schma de donnes Spry correspondant au chier XML flores.xml. 3. Insrez de nouveau une rgion Spry en vous rfrant la procdure de lexemple prcdent. 4. Slectionnez le texte provisoire et supprimez-le. Laissez le curseur de la souris en place (voir repre de la gure 21-8) et cliquez sur licne Images de la catgorie Commun du panneau Insertion (voir repre de la gure 21-8).
535
Figure 21-8
Conguration dun champ de type Lien dimage
5. Dans la fentre qui souvre alors, cochez loption Source de donnes (voir repre de la gure 21-8) puis slectionnez photo dans le cadre Champ (voir repre de la gure 21-8). Dans le champ URL, ajoutez devant le marqueur {ds1::photo} le nom du rpertoire o se trouvent les photos, soit photos/ pour notre exemple (voir repre de la gure 21-8). Validez vos choix en cliquant sur OK. 6. Slectionnez ensuite limage dynamique dans la page (voir repre de la gure 21-9) puis cliquez sur licne Rptition Spry de la catgorie Spry (voir repre de la gure 21-9) du panneau Insertion.
Figure 21-9
Cration dune rgion rpte inline Spry
536
7. Dans la bote de dialogue qui souvre alors, slectionnez cette fois le conteneur SPAN (voir repre de la gure 21-9) et validez la bote de dialogue avec les autres options par dfaut. 8. Enregistrez la page et appuyez sur la touche F12 pour tester lapplication dans le navigateur. Les diffrentes photos des eurs doivent alors safcher sur une mme ligne (voir gure 21-10).
Figure 21-10
Test dune rgion rpte inline Spry dans le navigateur
Afcher une liste de donnes dynamiques Spry

Pour faciliter lafchage de sries de donnes dynamiques, Dreamweaver met votre disposition des outils Spry qui permettent dafcher rapidement diffrents types de liste (liste droulante, ordonne ou puces). Lexemple ci-aprs prsente la mise en uvre dune liste droulante de donnes dynamiques Spry. En pratique, cette liste droulante pourra videmment tre intgre de manire avantageuse dans un formulaire si lon dsire lexploiter pour slectionner une option. 1. Ouvrez le chier page-flore_base1.html et enregistrez-le sous le nom page-flore4.html. 2. En vous rfrant la procdure prcdente, crez le schma de donnes Spry correspondant au chier XML flores.xml. 3. Insrez de nouveau une rgion Spry en vous rfrant la procdure du premier exemple. 4. Slectionnez le texte provisoire (voir repre de la gure 21-11) et cliquez sur licne Liste de rptition Spry de la catgorie Spry de la barre Insertion (voir repre de la gure 21-11).
537
5. Dans la bote de dialogue qui souvre alors, slectionnez le type de liste dsir. Il est ainsi possible dobtenir une liste non ordonne ( puces), une liste numrote, une liste de dnitions ou une liste droulante. Dans le cadre de notre exemple, nous choisirons une liste droulante (SELECT, voir repre de la gure 21-11). Choisissez ensuite ltiquette que vous dsirez voir apparatre dans le menu en la slectionnant dans la liste Colonnes afches, puis la valeur qui sera envoye par ce menu droulant en la slectionnant dans la liste Colonne de valeur (voir repre de la gure 21-11). Validez vos choix en cliquant sur OK.
Figure 21-11
Conguration dune liste droulante Spry
6. Enregistrez la page et appuyez sur la touche F12 pour tester lapplication dans le navigateur. La liste droulante doit alors afcher les diffrents noms latins des eurs du chier flores.xml (voir gure 21-12).
Figure 21-12
Test dune liste droulante Spry dans le navigateur
538
Crer des structures de donnes avec les options dafchage du schma

La srie de crations de structure de donnes prsente dans cette section illustre la mthode consistant crer un schma de donnes avec option dinsertion, ce qui gnrera automatiquement une structure de mise en forme des donnes XML.
Afcher un tableau de donnes dynamiques Spry

Nous allons maintenant mettre en uvre un tableau de donnes dynamiques Spry gnr automatiquement. Pour illustrer son utilisation, nous vous proposons dafcher les contenus des balises nomfrancais, nomlatin, famille et floraison dans un tableau compos de quatre colonnes. 1. Ouvrez le chier page-flore_base1.html et enregistrez-le sous le nom page-flore5.html. 2. Placez votre curseur au point dinsertion (voir repre de la gure 21-13) et cliquez sur licne Ensemble de donnes Spry (voir repre de la gure 21-13), puis en vous rfrant la procdure du premier exemple, crez le schma de donnes Spry correspondant au chier XML flores.xml en suivant la mme procdure pour les tapes 1 et 2. 3. Lors de ltape 3/3, Choisir les options dinsertion, cochez loption Insrer un tableau, puis cliquez sur le bouton Congurer (voir repre de la gure 21-13).
Figure 21-13
Conguration dun tableau Spry
539
4. Dans la nouvelle bote de dialogue, supprimez les colonnes photo et caractristiques en les slectionnant successivement (voir repre de la gure 21-13), puis en cliquant sur le bouton situ en haut de la bote (voir repre de la gure 21-13). En bas de cette mme bote, choisissez les classes ligneImpaire et lignePaire (voir repre de la gure 21-13) pour alterner la couleur des lignes des donnes dans tableau. Cliquez ensuite sur le bouton OK pour valider votre conguration. 5. De retour dans la fentre Ensemble de donnes Spry, cliquez sur le bouton Termin. Le schma de donnes XML doit apparatre dans le panneau Liaison (voir repre de la gure 21-13) ainsi que le tableau HTML afchant les donnes lendroit du point dinsertion (voir repre de la gure 21-13). Si besoin, dans la fentre Document, vous pouvez ajuster la largeur des colonnes du tableau et modiez leur nom. 6. Enregistrez la page et appuyez sur la touche F12 pour tester lapplication dans le navigateur. Un tableau avec des lignes de couleurs alternes contenant les diffrents noms franais et latins, les familles et les oraisons de chaque eur du chier flores.xml doit alors safcher dans la page Web (voir gure 21-14). noter que, par dfaut, les enregistrements sont classs par ordre alphabtique du nom en franais, mais vous pouvez modier ce tri en cliquant sur la tte de colonne pour les classer en fonction de cette dernire.
Figure 21-14
Test dun tableau Spry dans le navigateur
Crer une liste-dtails XML Spry

Crer un bloc dafchage principal/dtaill
Un bloc principal/dtaill Spry est constitu dun tableau contenant un nombre restreint dinformations issues dun chier XML qui permettront, lorsquelles seront cliques,
540
dafcher dans une rgion-dtails des informations complmentaires correspondantes au nud concern. Pour illustrer lusage dun bloc principal-dtaill, nous allons raliser un premier tableau contenant les noms franais des eurs et leur famille alors quun second tableau afchera le nom latin, la famille, les priodes de oraison et les caractristiques de la eur lorsque lutilisateur cliquera sur lune des lignes du premier tableau. 1. Ouvrez le chier page-flore_base1.html et enregistrez-le sous le nom page-flore6.html. 2. Placez votre curseur au point dinsertion (voir repre de la gure 21-15) et cliquez sur licne Ensemble de donnes Spry (voir repre de la gure 21-15). Puis, en vous rfrant la procdure du premier exemple, crez le schma de donnes Spry correspondant au chier XML flores.xml en suivant la mme procdure pour les tapes 1 et 2.
Figure 21-15
Conguration dun bloc dafchage principal/dtaill
3. Lors de ltape 3/3, Choisir les options dinsertion, cochez loption Insrer un bloc dafchage principal/dtaill puis cliquez sur le bouton Congurer (voir repre de la gure 21-15). 4. Dans la nouvelle bote de dialogue, supprimez la colonne photo en la slectionnant dans la liste des colonnes (voir repre de la gure 21-15) puis en cliquant sur le bouton situ en haut de la bote (voir repre de la gure 21-15). Cliquez ensuite sur le bouton OK pour valider votre conguration.
541
5. De retour dans la fentre Ensemble de donnes Spry, cliquez sur le bouton Termin. Le schma de donnes XML doit apparatre dans le panneau Liaison (voir repre de la gure 21-15) ainsi que la structure HTML afchant les donnes lendroit du point dinsertion (voir repre de la gure 21-15). Si besoin, dans la fentre Document, vous pouvez modier la mise en forme des donnes. Dans notre exemple, nous avons ajout des titres devant chaque donne du tableau Dtail. 6. Vous pouvez maintenant enregistrer votre page et la tester dans un navigateur. Vriez alors que tous les noms de eurs safchent bien dans le tableau Principal de gauche et assurez-vous quen cliquant sur lun dentre eux, le contenu du tableau Dtail de droite sactualise en consquence (voir gure 21-16).
Figure 21-16
Test dun bloc dafchage principal/dtaill
Crer des conteneurs empils

La structure des conteneurs empils Spry permet dafcher les donnes des diffrents nuds dans des tableaux dinformations spars et empils verticalement. Pour illustrer lusage des conteneurs empils Spry, nous allons raliser une page contenant un empilement de tableaux spciques chaque eur afchant le nom franais, le nom latin, la famille, les priodes de oraison et ses caractristiques. 1. Ouvrez le chier page-flore_base1.html et enregistrez-le sous le nom page-flore7.html. 2. Placez votre curseur au point dinsertion (voir repre de la gure 21-17) et cliquez sur licne Ensemble de donnes Spry (voir repre de la gure 21-17)
542
puis en vous rfrant la procdure du premier exemple, crez le schma de donnes Spry correspondant au chier XML flores.xml en suivant la mme procdure pour les tapes 1 et 2. 3. Lors de ltape 3/3, Choisir les options dinsertion, cochez loption Insrer des conteneurs empils puis cliquez sur le bouton Congurer (voir repre de la gure 21-17). 4. Dans la nouvelle bote de dialogue, supprimez la colonne photo en la slectionnant dans la liste des colonnes (voir repre de la gure 21-17) puis en cliquant sur le bouton situ en haut de la bote (voir repre de la gure 21-17). Cliquez ensuite sur le bouton OK pour valider votre conguration. 5. De retour dans la fentre Ensemble de donnes Spry, cliquez sur le bouton Termin. Le schma de donnes XML doit apparatre dans le panneau Liaison (voir repre de la gure 21-17) ainsi que la structure HTML afchant les donnes lendroit du point dinsertion (voir repre de la gure 21-17). Si besoin, dans la fentre Document, vous pouvez modier la mise en forme des donnes.
Figure 21-17
Conguration dune srie de conteneurs empils
6. Vous pouvez maintenant enregistrer votre page et la tester dans un navigateur. Les informations de chaque eur doivent safcher dans des tableaux diffrents empils verticalement (voir gure 21-18).
543
Figure 21-18
Test de lafchage dune srie de conteneurs empils
Crer des conteneurs empils avec zone focalisable

La structure des conteneurs empils avec zone focalisable est semblable la structure prsente prcdemment hormis le fait quavec cette nouvelle structure nous avons la possibilit dextraire certaines informations de chaque nud pour les mettre en exergue dans une seconde colonne place droite de la prcdente appele colonne focalisable. Pour illustrer lusage des conteneurs empils avec zone focalisable, nous allons raliser une page contenant un empilement de tableaux spciques chaque eur afchant dans la colonne focalisable le nom franais et dans la colonne empile traditionnelle le nom latin, la famille, les priodes de oraison et ses caractristiques. 1. Ouvrez le chier page-flore_base1.html et enregistrez-le sous le nom page-flore8.html. 2. Placez votre curseur au point dinsertion (voir repre de la gure 21-19) et cliquez sur licne Ensemble de donnes Spry (voir repre de la gure 21-19) puis en vous rfrant la procdure du premier exemple, crez le schma de donnes Spry correspondant au chier XML flores.xml en suivant la mme procdure pour les tapes 1 et 2.
544
3. Lors de ltape 3/3, Choisir les options dinsertion, cochez loption Insrer des conteneurs empils puis cliquez sur le bouton Congurer (voir repre de la gure 21-19). 4. Dans la nouvelle bote de dialogue, commencez par supprimer la colonne photo en la slectionnant dans la liste des colonnes empiles (voir repre de la gure 21-17) puis en cliquant sur le bouton situ en haut de la bote (voir repre de la gure 21-17). Dans notre exemple, nous allons conserver la slection de lunique nom en franais pour la colonne focalisable, mais vous pourriez facilement ajouter dautres informations dans cette colonne en cliquant sur le bouton + situ au-dessus de la liste des colonnes focalisables (voir repre de la gure 21-19). Cliquez ensuite sur le bouton OK pour valider votre conguration. 5. De retour dans la fentre Ensemble de donnes Spry, cliquez sur le bouton Termin. Le schma de donnes XML doit apparatre dans le panneau Liaison (voir repre de la gure 21-19) ainsi que la structure HTML afchant les donnes lendroit du point dinsertion (voir repre de la gure 21-19). Si besoin, dans la fentre Document, vous pouvez modier la mise en forme des donnes.
Figure 21-19
Conguration dune srie de conteneurs empils avec zone focalisable
6. Vous pouvez maintenant enregistrer votre page et la tester dans un navigateur. Les informations de chaque eur doivent safcher dans des tableaux diffrents de deux colonnes empils verticalement. Dans la premire colonne, vous devez retrouver les informations slectionnes dans la liste des colonnes focalisables et dans la seconde colonne, celles de la liste des colonnes empiles (voir gure 21-20).
545
Figure 21-20
Test de lafchage dune srie de conteneurs empils avec zone focalisable
Conclusion
Avec les outils de gestion de donnes XML Spry, Dreamweaver CS4 permet dsormais de rcuprer trs facilement des informations issues dun chier XML ou HTML et de les afcher dans la page Web. Cependant, les diffrents scripts ncessaires au fonctionnement des outils Spry tant regroups dans un rpertoire SpryAssets, il faut sassurer de la prsence de ce rpertoire sur le serveur distant pour que vos applications fonctionnent de la mme manire en ligne.
Annexe A
Prparer son site pour le rfrencement
Pour accder la page dun site Web, linternaute peut saisir directement son URL dans la barre dadresse ou entrer des mots-cls pertinents dans un moteur de recherche. Cependant, pour que lune des pages de votre site apparaisse dans la liste des rsultats du moteur de recherche, il convient de bien congurer son contenu an quelle soit bien rfrence. Pour vous aider dans cette tche, Dreamweaver CS4 propose plusieurs fonctionnalits que nous allons vous prsenter dans cette annexe.
Arborescence et contenu des pages Web

Choisir larborescence et le nom des pages Web
Lors de lindexation dune page Web, les moteurs de recherche enregistrent de nombreuses informations qui serviront ensuite pour classer la page dans les rsultats proposs linternaute selon les mots-cls quil aura saisis. Une fois toutes ces donnes mmorises, le moteur applique un algorithme qui lui est propre an de pondrer plus ou moins ces informations selon diffrents indices.
Lindice de popularit Il existe bien dautres indices que ceux prsents dans cette section et utiliss par les moteurs pour classer votre page en fonction des mots-cls saisis par linternaute. Citons, par exemple, lindice de popularit (PageRank de Google) qui tient compte du nombre de liens hypertextes placs dans des sites externes qui pointent sur la page concerne. Nous vous recommandons donc de crer de nombreux changes de liens avec des sites partenaires an daugmenter cet indice de popularit et damliorer ainsi votre positionnement dans les moteurs de recherche.
548
Dreamweaver CS4 ANNEXE A
Parmi ces indices, lindice dURL est celui qui tient compte de tous les mots-cls contenus dans le chemin absolu qui mne au chier index. Ainsi, le nom de domaine, lventuel rpertoire contenant la page Web et le nom mme de cette dernire sont des informations qui auront une incidence sur le positionnement de la page dans les rsultats du moteur de recherche. Sil nest pas toujours possible dinsrer des mots-cls dans le nom de domaine, il est en revanche trs facile de construire le rpertoire et les noms des pages Web en y ajoutant des mots pertinents en fonction du contenu de la page. Pour illustrer cette technique, reprenons lexemple du site Montagne-65 an de promouvoir une page dont les mots-cls susceptibles dtre utiliss par les internautes seraient ore , Pyrnes , Oxalis et Panicaut . Dans ce cas, il est dconseill dutiliser, par exemple, lURL suivante : http://www. montagne-65.com/page-html/fiche-456.html. Cette page serait beaucoup mieux rfrence et positionne dans les rsultats des moteurs de recherche lors de requtes en rapport avec la montagne et la ore des Pyrnes si son URL tait la suivante : http://www. montagne-65.com/flore-pyrenees/oxalis-panicaut.html.
Optimiser le contenu des pages

Un autre indice utilis aussi par les moteurs de recherche pour pondrer les mots-cls est lindice de densit. Il tient compte du nombre doccurrences dun mme mot-cl dans le contenu dune page. Cependant, cet indice prsente certaines limites et il faut viter de rpter un grand nombre de fois le mme mot-cl surtout si ses diffrentes occurrences sont rapproches au sein de la page. La mise en forme applique au mot-cl est aussi importante. Ainsi, un mot encadr par une balise <h1> ou toutes autres balises destines mettre en vidence le mot (gras, italique) inuera sur sa pondration lors de son indexation par le moteur de recherche. Dans la mme logique qui consiste valoriser les mots qui sont mis en avant dans la page, le fait quun mot-cl soit utilis dans le texte dun lien hypertexte sera aussi apprci par les moteurs car il est cens rsumer le contenu de la page laquelle il conduit. Enn, les images ne sont pas laisses pour compte et mme si les moteurs ne peuvent pas dtecter ce que reprsente lillustration, ils prennent en considration la valeur de lattribut alt de la balise <img> qui, rappelons-le, est destine se substituer limage dans le cas o lutilisateur aurait dsactiv leur afchage. Il est donc fortement recommand de renseigner cet attribut en y insrant des mots-cls pertinents.
Congurer le titre et les mtatags

Les mtatags, ou balises de mtadonnes, sont des informations contenues dans un document an de le dcrire. lorigine, les balises mtatags taient destines renseigner les robots sur le contenu de la page sans que ces donnes soient pour autant visibles des internautes. Aussi, les mtatags taient placs dans len-tte de la page HTML (la balise
Prparer son site pour le rfrencement ANNEXE A
549
<head>) qui, contrairement son contenu (la balise <body>) contient des informations qui
ne safchent pas dans la fentre du navigateur. Aujourdhui, certains de ces mtatags sont dprcis par les moteurs de recherche (comme le mtatag keywords) suite des abus de certains webmasters voulant surclasser leur page en utilisant des mots-cls nayant aucun rapport avec le contenu rel de la page. Cependant, mme si certaines de ces balises ont perdu de leur intrt, il est toujours recommand de les congurer avec beaucoup dattention dans toutes vos pages. La section suivante prsente la manire de renseigner simplement ces mtatags en mode Cration sans avoir saisir la moindre ligne de code.
Afcher les contenus de len-tte

Si par dfaut, le panneau Insertion contient les diffrents outils permettant dajouter des balises den-tte (catgorie Commun, menu En-tte), il nen est pas de mme lorsque lon est amen les modier. Pour accder aux fonctionnalits de modication des mtatags, il convient dactiver lafchage dune zone spcique les regroupant. Pour cela, cliquez sur licne Options dafchage de la barre doutils de la fentre Document et cliquez sur Contenu den-tte (voir repre de la gure A-1). La zone permettant de contrler la prsence des en-ttes et de les modier ventuellement apparatra alors en dessous de la barre doutils Standard (voir repre de la gure A-1).
Figure A-1
Afchage de la zone de contrle des balises den-tte
Congurer le titre de la page

La balise de titre <title> est aussi place dans len-tte de la page, mme si elle ne constitue pas un mtatag. Elle contient nanmoins linformation la mieux considre par les moteurs de recherche aujourdhui, le titre. Rappelons que si le contenu de la balise <title> napparat pas dans la page du navigateur, il est cependant visible dans la barre de titre (barre bleue place en haut de la fentre du navigateur) et que cest ce mme contenu qui apparatra par dfaut dans les favoris du navigateur et dans le titre de chaque bloc de rsultat dun moteur de recherche (voir repres a et b de la gure A-3). Si on ajoute cela le fait que les moteurs de recherche pondrent
550
fortement les mots-cls placs cet endroit, on peut deviner quil est particulirement important de bien choisir les mots-cls qui devront prendre place dans cette balise avant de les saisir dans Dreamweaver. Mme si le nom du site nest pas un mot-cl trs concurrentiel, il est nanmoins judicieux de lajouter au dbut du contenu de la balise de titre, ne serait-ce que pour rappeler dans la liste des favoris du navigateur le nom du site auquel appartient la page. En ce qui concerne sa taille, 6 8 mots-cls (soient 30 50 caractres) reprsentent en gnral un bon compromis. Pour illustrer le choix dun titre, reprenons lexemple de la page du site Montagne-65 que nous avons dj utilise dans la partie concernant larborescence dun site. Dans ce cas, il serait judicieux de commencer par le nom du site, suivi des mots-cls classs par ordre dimportance, soit par exemple : Montagne-65: Flore des Pyrnes, Oxalis, Panicaut, Linaigrette. Passons maintenant la pratique et voyons comment ajouter ce titre la page en cours de cration avec les outils visuels de Dreamweaver. Deux mthodes permettent de raliser cette action, la plus simple consistant saisir simplement le contenu de la balise de titre dans le champ Titre situ en haut de la fentre Document (voir repre de la gure A-2). La seconde mthode fait appel un outil de la zone du contenu den-tte mise en place prcdemment.
Figure A-2
Conguration du titre dune page
Voici le dtail de cette procdure. 1. Assurez-vous que la zone dafchage du contenu de len-tte est bien active (dans le cas contraire, reportez-vous la section prcdente Afcher les contenus de lentte , voir repre de la gure A-1). 2. Dans la zone dafchage du contenu den-tte, cliquez sur la deuxime icne en partant de la gauche (voir repre de la gure A-2).
551
3. Le panneau Proprits du titre afche alors un champ nomm Titre dans lequel vous pouvez saisir les mots-cls souhaits pour votre site (voir repre de la gure A-2).
Congurer le mtatag description

Le mtatag description ne doit pas tre nglig car il est souvent utilis par les moteurs de recherche pour complter le titre dans les blocs de rsultats afchs (voir repres a et b de la gure A-3).
Figure A-3
Exemple de blocs de rsultats afchs lors dune recherche sur le moteur Google
Son contenu doit tre constitu dun texte descriptif de la page dune quinzaine de mots (60 100 caractres environ) reprenant les principaux mots-cls choisis pralablement. Le texte ne doit surtout pas tre une suite de mots-cls mais doit tre structur en phrases cohrentes dcrivant le contenu de la page. Rappelez-vous que ce texte sera lu par les internautes dans les rsultats du moteur de recherche et quil devra donc les inciter se rendre sur votre site plutt que sur ceux gurant dans les autres blocs de rsultats. En guise dillustration, reprenons lexemple de la page sur la ore des Pyrnes du site Montagne-65. Dans ce cas, le mtatag description pourrait contenir le texte suivant :
Dcouvrez la flore des Pyrnes avec de nombreuses photographies de Linaigrette, Oxalis, Pinacaut et Orchis.
Voici la procdure suivre pour ajouter un mtatag description dans une page en mode Cration : 1. Cliquez sur la catgorie Commun du panneau Insertion puis sur licne En-tte (voir repre de la gure A-4). 2. Slectionnez loption Description et saisissez le texte du descriptif du site dans le champ de la bote de dialogue Description qui souvre alors (voir repres et de la gure A-4). Cliquez ensuite sur OK pour valider votre saisie. 3. Une fois le mtatag description insr dans la page, il doit apparatre dans la zone dafchage du contenu de len-tte (voir repre de la gure A-4). 4. Pour modier son contenu, cliquez sur cette icne et corrigez le texte du champ Description du panneau Proprits (voir repre de la gure A-4).
552
Figure A-4
Cration et modication du mtatag description
Congurer le mtatag keywords

Le mtatag keywords est aujourdhui trs peu exploit par les moteurs de recherche pour les raisons que nous avons voques au dbut de cette annexe. Cependant, il est quand mme recommand de le congurer en y ajoutant tous les mots-cls pressentis pour la page aprs les avoir classs par ordre de priorit. En termes de contenu, le mtatag keywords peut comporter une centaine de mots-cls voire davantage. En pratique, une cinquantaine de mots-cls suft en gnral et il faudra veiller ne pas y rpter des dclinaisons dun mme mot plus de sept fois (dans ce cas, il faudra ventiler les diffrentes occurrences dans lensemble des mots-cls). En gnral, les mots-cls seuls ne sont pas assez slectifs et il faut frquemment faire appel des paires de mots-cls (voire plus) qui seront ensuite spares par une virgule dans la liste. En guise dillustration, reprenons lexemple de la page sur la ore des Pyrnes du site Montagne-65. Dans ce cas, le contenu du mtatag keywords pourrait tre le suivant : flore
pyrnes, oxadis, orchis, linaigrette, panicaut, fleurs pyrnes, fleurs montagne, flore, fleurs endmiques pyrnes, photos, fleurs blanches, fleurs rouges, fleurs bleues, fleurs violettes, fleurs jaunes, fleurs roses, flore sauvage, flore montagnes, plante endmique, flora, botany, Pyrnes, Flore, parc national pyrnes .
Voici la procdure suivre pour ajouter un mtatag keywords dans une page en mode Cration : 1. Cliquez sur la catgorie Commun du panneau Insertion, puis sur licne En-tte (voir repre de la gure A-5). 2. Slectionnez loption Mots-cls et saisissez la liste des mots-cls dans le champ de la bote de dialogue Mots-cls qui souvre alors (voir repres et de la gure A-5). Cliquez ensuite sur OK pour valider votre saisie.
553
3. Une fois le mtatag keywords insr dans la page, il doit apparatre dans la zone dafchage du contenu de len-tte (voir repre de la gure A-5). 4. Pour modier son contenu, cliquez sur cette icne et corrigez le texte dans le champ Mots-cls du panneau Proprits de la balise (voir repre de la gure A-5).
Figure A-5
Cration et modication du mtatag keywords
Congurer un mtatag gnrique

Nous venons de vous prsenter les mtatags les plus couramment utiliss pour le rfrencement, mais il en existe de nombreux autres : expires qui indique au robot la date dexpiration de la page ; robots qui permet dindiquer au robot si la page peut tre indexe et si le robot est autoris suivre les liens hypertextes de la page ; revisit-after qui suggre au robot de revenir visiter la page aprs une priode dnie ; author qui indique le nom de lauteur du site ; content-language qui indique la langue utilise dans la page Ces balises sont classes en deux familles : les balises name (toutes celles que nous venons de citer sauf content-language) et les balises http-equiv. La syntaxe de lattribut de la balise tant diffrente, il est important de savoir quelle famille appartient le mtatag que vous dsirez ajouter. Pour les crer en mode Cration avec Dreamweaver, vous devez utiliser une bote de dialogue gnrique qui vous permettra de congurer, votre convenance, le nom du mtatag. Pour illustrer la cration de ce type de mtatag, nous vous proposons dajouter la page de lexemple prcdent une balise revisit-after qui suggrera au robot une frquence de
554
visite de 15 jours, ce qui est intressant si le contenu de votre page change frquemment (attention, cette balise nest pas interprte par tous les moteurs de recherche). 1. Cliquez sur la catgorie Commun du panneau Insertion, puis sur licne En-tte (voir repre de la gure A-6). 2. Slectionnez loption Mta (voir repre de la gure A-6). Dans la bote de dialogue Mta qui souvre alors, choisissez lattribut selon la famille laquelle appartient le mtatag (name ou http-equiv). Pour notre exemple, avec la balise revisit-after, il sagit de lattribut name et nous slectionnerons la valeur Nom dans la liste droulante Attribut (voir repre de la gure A-6). Saisissez ensuite le nom de la balise dans le champ Valeur, soit revisit-after (voir repre de la gure A-6) puis le paramtre qui la caractrise dans le champ Contenu, soit 15days dans notre cas (voir repre de la gure A-6). Cliquez ensuite sur OK pour valider vos choix. 3. Une fois le mtatag revisit-after insr dans la page, il doit apparatre dans la zone dafchage du contenu de len-tte (voir repre de la gure A-6). 4. Pour modier son contenu, cliquez sur cette icne (voir repre de la gure A-6) et corrigez les paramtres dans les champs correspondants du panneau Proprits de la balise (voir repre de la gure A-6).
Figure A-6
Cration et modication du mtatag revisit-after Cohrence verticale des mots-cls Au cours de la cration des diffrentes balises destines au rfrencement, nous avons utilis de nombreux mots-cls. Le choix de ces derniers est important et vous devez respecter une certaine cohrence entre tous les endroits o vous pouvez les placer (contenu de la page inclus). Ainsi, avant de commencer optimiser votre page pour le rfrencement, nous vous conseillons de crer une liste de 30 50 paires de mots-cls classes par priorit et de venir puiser dans cette liste le nombre de mots ncessaires (en partant toujours du dbut de la liste). Vous obtiendrez ainsi une cohrence verticale de vos mots-cls (les mots-cls importants tant utiliss diffrents endroits de la page) et amliorerez encore le positionnement de votre page dans les rsultats des moteurs de recherche.
Annexe B
Mise en ligne dun site
La nalit dun projet de site Web est de permettre la consultation sur Internet des pages HTML ralises sur votre ordinateur. Pour cela, vous devez disposer dun serveur de production reli Internet sur lequel vous allez publier vos diffrentes pages ralises en local. La publication dune page sur un site de production consiste la tlcharger selon un protocole ddi au transfert de chiers (FTP, File Transfer Protocol) du site local (lespace situ sur votre ordinateur que vous avez utilis jusqu prsent) vers le site distant (lespace sur le serveur de production mis votre disposition par votre hbergeur). Pour vous assister dans cette tche, une application de transfert est intgre Dreamweaver CS4. Au chapitre 2 (voir section Dnir un nouveau site avec longlet Avanc , sous-section La catgorie Infos distantes ), nous avons prsent la fentre de conguration qui permet de paramtrer les informations pour se connecter au serveur distant et ainsi transfrer les diffrents chiers ncessaires la consultation des pages du site depuis nimporte quel navigateur reli Internet. Nous allons maintenant congurer les diffrents champs de cette mme fentre pour illustrer la procdure de publication dun site Web avec Dreamweaver CS4.
Dnir les infos distantes dun site

Pour illustrer la conguration des infos distantes dans Dreamweaver CS4, reprenons lexemple du site SITEmontagne dvelopp au chapitre 21. Ce site tant dynamique (il comprend des scripts PHP et une base de donnes MySQL), nous pourrons ainsi galement illustrer linstallation de la base de donnes sur le serveur de production, mais sachez que la procdure de conguration et de publication est semblable quil sagisse dun site statique ou dynamique.
556
Dreamweaver CS4 ANNEXE B
Pour la procdure dtaille ci-aprs, nous partons du principe que vous avez dj congur les paramtres de base du site transfrer (dans le cas contraire, revoir la section Dnir un site du chapitre 2), que vous disposez des paramtres de connexion au serveur distant fournis par votre hbergeur (adresse de lhte FTP, nom dutilisateur et mot de passe) et, videmment, que votre ordinateur est bien reli Internet. 1. Lancez Dreamweaver CS4 et slectionnez le site transfrer dans le panneau Fichiers, soit SITEmontagne pour notre exemple (slectionnez le menu Fentre>Fichiers si ce panneau nest pas visible). 2. Slectionnez ensuite le menu Site>Grer les sites (voir repre de la gure B-1).
Figure B-1
Conguration des paramtres de la catgorie Infos distantes
3. La bote de dialogue Grer les sites souvre alors. Assurez-vous que le site actif, soit SITEmontagne, est bien prslectionn dans la liste des sites propose (voir repre de la gure B-1) et cliquez sur le bouton Modier (voir repre de la gure B-1). La fentre Dnition du site pour SITEmontagne souvre alors. 4. Cliquez sur longlet Avanc puis slectionnez la catgorie Infos distantes (voir repre de la gure B-1). Choisissez FTP dans la liste droulante Accs (voir repre de la gure B-1) si vous disposez dun compte FTP pour accder votre serveur distant. Pour les autres types de serveurs distants, reportez-vous lencadr ci-dessous an de choisir au mieux le type daccs slectionner. 5. Dans le champ Hte FTP, saisissez ladresse communique par votre hbergeur (par exemple, ftp.montagne-65.com) et renseignez les champs Rpertoire de lhte, Nom dutilisateur et Mot de passe (informations galement transmises par votre hbergeur,
Mise en ligne dun site ANNEXE B
557
voir repre de la gure B-1). Si vous ne souhaitez pas ressaisir votre mot de passe chaque connexion, cochez loption Enregistrer situe droite du champ Mot de passe. En ce qui concerne le rpertoire distant (champ Rpertoire de lhte), son nom a d vous tre communiqu par votre hbergeur avec les autres paramtres FTP. En cas de doute, vous pouvez laisser ce champ vide dans un premier temps an de pouvoir vous connecter au serveur et ainsi noter le nom exact du rpertoire dans lequel se trouve votre site. Une fois que vous disposerez de cette information, dconnectez-vous et renseignez le champ Rpertoire de lhte de faon approprie. 6. Cliquez sur le bouton Tester pour vrier la bonne conguration des informations distantes (voir repre de la gure B-1). Dreamweaver tente alors de se connecter au serveur Web et afche une bote de dialogue vous indiquant que la connexion est tablie. Cliquez sur OK pour fermer cette bote de dialogue et faites de mme pour fermer la fentre de dnition du site et valider votre paramtrage (voir repre de la gure B-1).
Les diffrents types daccs au serveur distant FTP (File Transfer Protocol) Cette option correspond au type de connexion le plus couramment utilis pour accder un serveur distant. Pour congurer une connexion de ce type, vous devez disposer des paramtres de votre compte FTP fournis par votre hbergeur. Local/Rseau Cette option est utiliser si vous dsirez stocker et excuter vos chiers sur un serveur accessible par le biais dun rseau local. WebDAV (Web-based Distributed Authoring and Versioning) Ce type daccs ne peut tre utilis que si vous disposez dun serveur prenant en charge le protocole WebDAV , comme par exemple Microsoft Internet Information Server (IIS) 5.0 ou une installation du serveur Web Apache congure de faon adquate. RDS (Remote Development Services) Ce type daccs suppose que votre dossier distant se trouve sur un ordinateur excutant Macromedia ColdFusion dAdobe. Base de donnes SourceSafe Ce type daccs est utiliser si vous vous connectez votre serveur Web via Microsoft Visual SourceSafe. Il nest pris en charge que par Windows et vous devez avoir au pralable install Microsoft Visual SourceSafe Client sur votre ordinateur.
Options de paramtrage des infos distantes Toutes les autres options de paramtrage des infos distantes de la fentre de dnition du site sont facultatives et dpendent de la conguration de votre serveur. Utiliser FTP passif Cette option doit tre coche si la conguration de votre pare-feu ncessite lutilisation dun FTP passif (si votre rseau local est quip dun pare-feu). Utiliser le mode de transfert IPv6 Cette option permet de vous connecter un serveur qui utilise le protocole IPv6. Utiliser un pare-feu Cette option doit tre coche si vous utilisez un pare-feu. Si tel est le cas, cliquez sur le bouton Paramtres du pare-feu pour ouvrir la fentre Prfrences de Dreamweaver et congurer les champs Hte du pare-feu et Port du pare-feu. Utiliser Secure FTP (SFTP) Cette option vous permet de vous connecter en mode scuris cod si votre site distant a t congur en consquence.
558
Conserver les informations de synchronisation Cette option permet de synchroniser automatiquement les chiers de votre site local et de votre site distant. Tlcharger autom. les chiers vers le serveur lors de lenregistrement Cette option permet de mettre automatiquement jour vos chiers sur le serveur distant lors de chaque enregistrement excut en local. Activer larchivage et lextraction de chier Cette option vous permet de travailler en quipe sur le mme serveur distant. Dans ce cas, vous devez indiquer votre identiant et votre e-mail dans les champs qui safchent une fois loption active. Le bouton Tester permet de vrier la bonne conguration de vos paramtres. Toutefois, si vous rencontrez des problmes pour vous connecter au serveur, nous vous suggrons de cliquer sur le bouton Compatibilit du serveur, de dcocher loption Utiliser loptimisation des performances FTP, puis de renouveler votre test.
Congurer les paramtres du site

Diffrents paramtres concernant le site et lapplication de transfert de chiers de Dreamweaver CS4 peuvent tre congurs depuis la catgorie Site de la fentre Prfrences (pour ouvrir la fentre Prfrence, cliquez depuis le menu sur Edition puis sur Prfrence en bas de la liste, voir gure B-2) en complment du paramtrage de la fentre Dnition du site, catgorie Infos distantes, dtaill prcdemment. Voici un bref descriptif des diffrents paramtres disponibles dans cette fentre et leur utilit. Toujours afcher Cette option (voir repre de la gure B-2) permet de choisir de quel ct vous dsirez afcher les chiers locaux et distants dans la fentre de transfert de chiers. Fichiers dpendants Cette option (voir repre de la gure B-2) permet dactiver/ dsactiver lafchage de la bote de dialogue vous demandant si vous dsirez transfrer les chiers distants lors dune acquisition (du serveur distant vers lespace local) ou dun placement (de lespace local vers le serveur distant). Connexion FTP Cette option permet de spcier un dlai dinactivit au-del duquel la connexion avec le site distant sera automatiquement interrompue (voir repre de la gure B-2). Dlai FTP Cette option permet de limiter le laps de temps pendant lequel Dreamweaver tente dtablir une connexion avec le serveur (voir repre de la gure B-2). Si ce laps de temps est dpass, une bote de dialogue safchera pour vous en avertir. Options de transfert FTP Cette option permet de valider la slection automatique dune option de transfert par dfaut si lutilisateur ne conrme pas la bote de dialogue (voir repre de la gure B-2) aprs le dlai indiqu dans le champ de cette option. Hte du pare-feu Cette option permet de prciser le serveur proxy utilis si vous tes protg par un pare-feu. Si vous nen avez pas, laissez ce champ vide (voir repre de la gure B-2). Port du pare-feu Cette option permet de prciser le numro de port utilis par le pare-feu (21 par dfaut, voir repre de la gure B-2).
559
Options de placement Cette option permet denregistrer automatiquement les chiers avant quils ne soient placs sur le serveur distant (voir repre de la gure B-2). Options de dplacement Cette option permet dafcher une bote de dialogue pour demander la conrmation avant deffectuer un transfert (voir repre de la gure B-2).
Figure B-2
Paramtrage de la catgorie Site de la fentre Prfrences
Publier un site sur Internet

Une fois la conguration des infos distantes effectue, vous allez pouvoir publier tous les chiers placs sur votre ordinateur de dveloppement sur votre site de production (site distant). Plusieurs alternatives soffrent alors vous, celles-ci tant dtailles ci-aprs.
Publier la page active

Si vous dsirez transfrer rapidement la page active dans laquelle vous travaillez sur le serveur distant, la solution la plus simple consiste cliquer sur licne Gestion des chiers (voir repre de la gure B-3) et slectionner lentre Placer (voir repre de la gure B-3). Vous pouvez galement slectionner directement le menu Site>Placer ou encore utiliser le raccourci clavier Ctrl + Maj + U. Une bote de dialogue souvre alors vous demandant si les chiers dpendants des chiers transfrer doivent tre aussi transfrs. Sils ne le sont pas encore ou sils ont
560
t modis, rpondez positivement ; dans le cas contraire, cliquez sur le bouton Non an de rduire le temps de transfert. Une nouvelle bote de dialogue safche alors en arrire-plan indiquant ltat davancement du transfert. Si le chier actif est plac dans un rpertoire spcique dans lespace local, celui-ci sera cr automatiquement sur lespace distant par Dreamweaver CS4.
Figure B-3
Publication de la page active
Publier des pages depuis le panneau Fichiers

Pour publier plusieurs chiers la fois, ouvrez le panneau Fichiers via le menu Fentre> Fichiers et slectionnez-les dans larborescence propose (voir repre de la gure B-4). Le transfert de ces chiers ncessitant une connexion active au serveur distant, nous vous suggrons de cliquer sur licne Connecter un hte distant (voir repre de la gure B-4) avant de cliquer sur licne Placer le(s) chier(s) (voir repre de la gure B-4) an de vous assurer que la connexion avec le serveur est disponible. Nanmoins, si vous lancez le transfert en cliquant directement sur licne Placer le(s) chier(s), la connexion au serveur sera automatiquement active. Une bote de dialogue apparatra alors dans laquelle vous devrez indiquer, selon le contexte, si vous dsirez ou pas que les chiers dpendants soient transfrs. Une bote de dialogue souvrira galement en arrireplan indiquant ltat davancement du transfert et les ventuels problmes rencontrs ainsi que la liste des chiers concerns. Il est aussi possible de rcuprer des chiers situs sur le serveur distant et de les transfrer vers lespace local de votre ordinateur. Dans ce cas, la dmarche est identique la seule diffrence que vous devrez slectionner au pralable le(s)chier(s) dans lespace distant (pour afcher les chiers distants dans le panneau Fichiers, slectionnez Afchage distant dans le menu local du panneau Fichiers situ droite de celui-ci). Cliquez ensuite sur licne Acqurir le(s) chier(s) (voir repre de la gure B-4). Si vous avez ajout ou supprim un chier sans passer par le panneau Fichiers (en utilisant le gestionnaire de chiers Windows par exemple), vous devrez cliquer sur licne Actualiser (voir repre de la gure B-4) ou utiliser la touche F5 du clavier pour mettre jour larborescence des chiers. Pour synchroniser les chiers entre lespace local et distant, cliquez sur licne Synchroniser le(s) chier(s) (voir repre de la gure B-4).
561
Les icnes Extraire le(s) chier(s) (voir repre de la gure B-4) et Archiver (voir repre de la gure B-4) ne seront actives que si loption Activer larchivage et lextraction de chier est coche dans la catgorie Infos distantes de la fentre de dnition du site (voir section prcdente Dnir les infos distantes dun site ). Licne Extraire le(s) chier(s) permet de transfrer une copie du chier du serveur distant vers le site local et de lui attribuer ltat Extrait sur le serveur an dempcher toute ventuelle modication de ce mme chier par un autre membre de lquipe. Licne Archiver permet de transfrer une copie du chier local (aprs modication) vers le serveur distant de manire quil puisse tre de nouveau modi par dautres membres de lquipe. Une fois le chier archiv, sa version locale passe en lecture seule an dviter les conits de modication avec la version distante si cette dernire venait tre modie par un autre membre de lquipe.
Figure B-4
Publication de plusieurs pages via le panneau Fichiers
Publier des pages depuis la fentre de transfert

Une autre solution pour transfrer des chiers entre le serveur distant et lespace local consiste dvelopper le panneau Fichiers en pleine page an dobtenir une fentre de transfert (voir gure B-5) dans laquelle vous pourrez visualiser la fois les chiers situs sur lespace local et ceux situs sur le serveur distant (voir repres et de la gure B-5). Cette reprsentation est souvent apprcie car elle permet davoir une vue densemble des deux espaces et de vrier que les chiers prsents de chaque ct sont bien en adquation.
562
Pour afcher cette fentre de transfert, cliquez sur licne Dvelopper pour afcher les sites locaux et distants (voir repre de la gure B-4) du panneau Fichiers. La fentre de transfert souvre alors. Pour quitter ensuite cette fentre de transfert et revenir au panneau Fichier, il sufra de cliquer sur le bouton Rduire pour afcher uniquement le site local ou distant (voir repre de la gure B-4). Comme vous pouvez le constater, elle comporte les mmes icnes que celles du panneau Fichiers dcrites prcdemment (voir gure B-5), ainsi que dautres icnes permettant de choisir le contenu des informations afches dans cette fentre. Licne Fichiers du site (voir repre de la gure B-5) permet dafcher dans la partie de gauche les chiers prsents sur le serveur distant et dans la partie de droite les chiers de lespace local. Cette conguration est la plus frquente et correspond la conguration par dfaut lorsque vous ouvrez cette fentre. Licne Serveur dvaluation (voir repre de la gure B-5) permet dafcher dans la partie gauche les chiers prsents dans lespace du serveur dvaluation (la localisation de cet espace doit tre pralablement congure dans la fentre Dnition du site, catgorie Serveur dvaluation). Dans notre conguration, le serveur dvaluation correspond au serveur local et partage donc le mme contenu que lespace local, mais il pourrait en tre autrement selon la conguration des paramtres de la fentre Dnition du site. Licne Fichiers du rfrentiel (voir repre de la gure B-5) permet dafcher les chiers du rfrentiel d'un serveur utilisant Subversion (SVN). SVN est un systme de contrle de version qui permet aux utilisateurs de comparer des chiers an de dtecter leurs diffrences et de mettre en exergue les modications apportes par d'autres utilisateurs.
Figure B-5
Publication de chiers laide de la fentre de transfert
563
Licne Afcher le journal FTP du site (voir repre de la gure B-5) permet de consulter ltat actuel du transfert et son historique dans le panneau Rsultats, onglet Journal FTP. Voici la procdure suivre pour raliser un transfert de chiers initialement placs dans votre espace local vers le serveur distant. 1. Cliquez sur licne Fichiers du site. tablissez ensuite une connexion avec le serveur en cliquant sur licne Connecter un hte distant. Une fois la connexion tablie, le voyant vert de licne sallume. 2. Slectionnez ensuite les chiers transfrer dans larborescence des chiers locaux (voir repre de la gure B-5), puis cliquez sur licne Placer le(s) chier(s). Vous pouvez galement cliquer droit sur les chiers et slectionner loption Placer. Il est aussi possible de dplacer directement les chiers dun espace lautre par un glisser-dposer, mais nous dconseillons cette mthode si vous dsirez prserver la symtrie des deux espaces (voir encadr sur les particularits de Dreamweaver ci-aprs). 3. Une bote de dialogue safche alors et vous demande si vous dsirez ou non transfrer les chiers dpendants. Une fois votre rponse enregistre, les chiers pralablement slectionns sont alors transfrs successivement dans lespace du serveur distant et une bote de dialogue en arrire-plan vous indique ltat davancement de lopration. noter que vous pouvez, sans problme, continuer travailler durant le transfert, ce qui est particulirement apprciable si vous transfrez de nombreux chiers.
Particularits de lapplication de transfert de chiers de Dreamweaver CS4 Contrairement la majorit des logiciels FTP autonomes, lapplication de transfert de chiers intgre dans Dreamweaver CS4 facilite le maintien de la symtrie entre le site distant et le site local en plaant automatiquement le chier transfr dans le mme rpertoire cible que celui dans lequel il se trouvait dans lespace source. Si ce rpertoire nexiste pas, il sera alors cr la vole avant que le chier transfr ny soit enregistr. Cette particularit, trs apprciable pour maintenir leffet miroir recommand entre lespace local et distant dun site, ne sera cependant pas possible si vous utilisez un glisser-dposer depuis la fentre de transfert pour transfrer votre chier. Aussi, nous vous recommandons dutiliser exclusivement les icnes Placer le(s) chier(s) ou Extraire le(s) chier(s) pour effectuer votre transfert et de nexploiter le glisser-dplacer que si cela est rellement indispensable en prenant conscience que vous risquez de casser leffet miroir entre les deux espaces. Une autre particularit de lapplication de transfert intgre est le fait que Dreamweaver CS4 contrle le transfert des chiers dpendants dune page Web (cela peut tre par exemple les images de la page, les animations Flash, les chiers JavaScript ou encore les feuilles de style externes). Pour cela, il vous demandera lors dun transfert si vous dsirez galement transfrer les chiers dpendants de la page. Lors dun premier transfert dune page, il est videmment conseill de rpondre positivement an que la page transfre puisse disposer de toutes ses ressources dans lespace cible. Cependant, par la suite, si vous modiez uniquement la structure de la page Web sans quil y ait dincidence sur les autres chiers, vous pourrez alors rpondre ngativement an dacclrer le transfert de cette seule page Web.
564
Installer la base de donnes sur le site distant

La migration dun site dynamique (en interconnexion avec une base de donnes) depuis le serveur dvaluation local vers le serveur de production distant ne se limite pas au seul transfert des chiers. En effet, il faut dans ce cas installer la base de donnes sur le serveur distant de sorte que toutes les fonctionnalits dynamiques puissent fonctionner de la mme manire que sur le serveur dvaluation. Pour cela, vous devez dune part disposer dune base de donnes distante et de ses paramtres daccs (informations communiques par votre hbergeur) et dautre part, y installer le contenu de la base de donnes du serveur dvaluation. Dans la suite de cette section, nous considrons que vous disposez dune base de donnes distante et de ses paramtres daccs.
Modier les paramtres de connexion la base de donnes

Si vous navez pas congur initialement la connexion avec la base de donnes de votre serveur dvaluation en utilisant les mmes paramtres daccs que ceux qui vous ont t communiqus par votre hbergeur pour votre base de donnes distante, il convient dans un premier temps de modier ces informations avant de les tlcharger par FTP sur le serveur Web distant. Pour cela, afchez longlet Base de donnes du panneau Application via le menu Fentre>Base de donnes (voir repre de la gure B-6) et double-cliquez sur le nom de la connexion (voir repre de la gure B-6) pour ouvrir la bote de dialogue Connexion MySQL. Modiez ensuite les diffrents paramtres de la bote de dialogue an quils soient conformes avec les paramtres daccs la base de donnes distante (voir repre de la gure B-6). Validez vos choix en cliquant sur OK puis slectionnez le rpertoire Connection dans le panneau Fichiers et cliquez sur licne Placer le(s) chier(s) an de le tlcharger sur le serveur Web distant.
Figure B-6
Modication des paramtres de connexion la base de donnes
Transfrer le contenu de la base de donnes

Le transfert du contenu de la base de donnes du serveur MySQL local vers le serveur MySQL distant consiste suivre la mme procdure que celle de la sauvegarde dune base sur le serveur local (voir chapitre 21), puis suivre celle de la restauration mais sur
565
le serveur distant cette fois. Pour cela, vous devez disposer dun gestionnaire de base de donnes phpMyAdmin sur les deux serveurs. 1. Ouvrez le gestionnaire phpMyAdmin du serveur local (si vous utilisez WampServer 2, ouvrez le manager WampServer 2 puis cliquez sur phpMyAdmin). Slectionnez la base de donnes montagne_db dans le menu de gauche (voir repre de la gure B-7), puis cliquez sur longlet Exporter (voir repre de la gure B-7). 2. Slectionnez toutes les tables situes dans le cadre Exporter (voir repre de la gure B-7), cochez loption Transmettre (voir repre de la gure B-7) an de gnrer un chier SQL et cliquez sur le bouton Excuter (voir repre de la gure B-7). Un chier SQL est alors enregistr sur votre ordinateur. Celui-ci contient toutes les commandes SQL ncessaires la cration dune structure et des contenus semblables ceux de la base de donnes du serveur de base de donnes local.
Figure B-7
Sauvegarde de la base de donnes transfrer
3. Ouvrez ensuite une seconde fentre dans votre navigateur et connectez-vous ladresse du gestionnaire phpMyAdmin de votre serveur distant. Si vous grez plusieurs bases de donnes avec ce gestionnaire, assurez-vous que vous tes bien sur la nouvelle base destine accueillir votre nouveau projet et, si besoin, slectionnez-la dans le menu droulant de gauche (si vous navez que des droits sur une seule base, le menu de slection ne sera pas disponible dans votre gestionnaire).
566
4. Cliquez ensuite sur longlet Importer (selon la version du gestionnaire, il est possible que cet onglet ne soit pas disponible, cliquez alors sur longlet nomm SQL) et utilisez le bouton Parcourir pour localiser le chier SQL prcdemment enregistr sur votre ordinateur. Cliquez sur Excuter an de commencer limportation de la structure et du contenu de la base de donnes sur le serveur distant. Au terme de limportation (qui peut tre plus ou moins longue selon la taille de la base), les diffrentes tables de la base de donnes doivent apparatre dans la partie de gauche de lcran. 5. Si votre chier de connexion est correctement congur et votre base de donnes compltement charge sur le serveur distant, vous pouvez ensuite tester le bon fonctionnement des pages dynamiques de votre site pour vous assurer que tout fonctionne correctement.
Annexe C
Raliser des lments graphiques
Le graphisme des sites Web actuels a suivi lvolution gnrale de lInternet, savoir une meilleure accessibilit, une mise en forme graphique plus simple et plus sobre, excluant lusage des tableaux autres que ceux utiliss pour les donnes. Les outils utiliss pour la ralisation des lments graphiques insrs dans une page HTML ou un site Web sont trs varis. Dans cette annexe, nous nous attacherons dcrire les mthodes de cration et de ralisation dans le logiciel Adobe Photoshop CS4. Nous y aborderons les points suivants : prparer une image pour le Web ; enregistrer pour le Web ; le dcoupage en tranches.
Prparer une image pour le Web

Une image destine au Web doit avoir les caractristiques suivantes : tre en mode RVB (Rouge, Vert, Bleu) ; tre enregistre dans sa taille dnitive ; tre enregistre dans lun des formats reconnus par les navigateurs (.jpg, .gif ou .png).
Changer le mode couleur dune image

Pour vrier que le mode couleur dune image est bien le mode RVB, observez lindication prsente entre parenthses dans la barre de titre de limage ouverte dans Photoshop CS4 ; elle doit spcier RVB.
568
Dreamweaver CS4 ANNEXE C
Figure C-1
Barre de titre de limage indiquant le mode couleur utilis
Pour changer le mode couleur et passer en mode RVB, slectionnez le menu Image> Mode>Couleurs RVB.
Changer la taille dune image

Une image destine au Web doit tre enregistre dans sa taille nale an dviter un poids trop important et inutile. Pour redimensionner une image dans Photoshop CS4, slectionnez le menu Image> Taille de limage. Une bote de dialogue apparat alors, divise en deux parties : la zone Dimensions de pixel et la zone Taille du document. Les valeurs inscrites dans la zone Dimensions de pixel reprsentent le nombre total de pixels en largeur et en hauteur dans limage. Limage de la gure C-2 est compose de 320 pixels en largeur et de 240 pixels en hauteur. Ces donnes reprsentent le potentiel qualit de limage et les valeurs maximales de limage originale. Si vous les modiez et les augmentez, vous raliserez alors un surchantillonnage qui namliorera pas la qualit de limage mais lui donnera un poids supplmentaire et inutile. La seule modication correcte est donc la rduction de limage. Cest dans cette zone que vous rednirez la taille de limage nale en nombre de pixels. Pour cela, saisissez en pixels les nouvelles valeurs des champs Largeur et Hauteur. Si vous le souhaitez, vous pouvez aussi spcier 72 pixels/pouce dans la liste droulante Rsolution, mais ce paramtre nest pas indispensable pour le Web.
Figure C-2
La bote de dialogue Taille de limage de Photoshop CS4
Raliser des lments graphiques ANNEXE C
569
La zone Taille du document prcise la taille du document imprim. Cette zone nest pas utile pour une image destine au Web. Pour modier la taille dune image, il est galement possible de raliser un recadrage, cest--dire de la rduire en en supprimant une partie. Pour cela, utilisez loutil Recadrage de la barre doutils.
Figure C-3
Loutil Recadrage de Photoshop CS4
Voici la marche suivre pour recadrer une image. 1. Slectionnez loutil Recadrage dans la barre doutils (voir gure C-3). 2. Vriez quaucune valeur nest spcie dans les champs Largeur et Hauteur de la barre doptions de loutil. 3. Cliquez ensuite sur limage et, tout en maintenant le bouton de la souris enfonc, dplacez le curseur de la souris de manire dessiner la zone de recadrage souhaite. Relchez ensuite le bouton de la souris, la zone de recadrage apparat alors en pointills et les parties de limage qui seront supprimes sont plus sombres. 4. Validez le recadrage en double-cliquant dans la slection ou en appuyant sur la touche Entre du clavier. Loutil Recadrage vous permettra galement de dterminer la taille de limage nale. Pour cela, spciez la largeur et la hauteur souhaites (en pixels) pour limage nale dans les champs Largeur et Hauteur de la barre doptions de loutil (voir gure C-4). Cette technique est utiliser avec prudence car le nombre de pixels slectionns pour le recadrage doit tre suprieur au nombre de pixels dsirs, autrement vous obtiendriez un surchantillonnage de limage. Vous devez donc slectionner une zone contenant sufsamment de pixels pour le format nal souhait.
Figure C-4
La barre doptions de loutil Recadrage
570
Enregistrer pour le Web

Les images destines une utilisation Web doivent imprativement tre enregistres depuis le menu Fichier>Enregistrer pour le Web Vous pourrez alors enregistrer les images seules ou celles dcoupes en tranches.
La fentre Enregistrer pour le Web et les priphriques

Voici un descriptif de la barre doutils de la fentre Enregistrer pour le Web et les priphriques (voir repre de la gure C-5) : loutil Main permet de dplacer limage lorsquelle est plus grande que la vignette ; loutil Slection de tranche permet de slectionner une tranche ; loutil Loupe permet daugmenter ou de rduire lafchage. Si quatre vignettes sont afches, elles auront toutes le mme taux dafchage. Pour dzoomer, cliquez sur cet outil tout en appuyant sur la touche Alt du clavier ; loutil Pipette permet de prlever un chantillon de couleur ; le rectangle de couleur permet de visualiser la couleur prleve ; loutil Afcher/masquer les tranches permet, comme son nom lindique, dafcher ou de masquer les tranches. Vous pouvez choisir le nombre de vignettes afcher dans cette fentre grce aux diffrents onglets (voir repre de la gure C-5) :
Figure C-5
La fentre Enregistrer pour le Web et les priphriques de Photoshop CS4
571
longlet Originale correspond limage non modie ; longlet Optimise correspond la vignette active, cest--dire celle qui est encadre par un let bleu ; longlet 2 vignettes permet dafcher simultanment deux vignettes : celle de gauche est gnralement limage originale et celle de droite une image optimise ; longlet 4 vignettes afche quatre images qui peuvent tre optimises dans des formats diffrents. Pour augmenter ou rduire lafchage des vignettes selon le mme cadrage, modiez la valeur indique de la liste droulante situe en bas gauche de la fentre (voir repre de la gure C-5). Les informations droite de cette liste droulante (voir repre de la gure C-5) concernent le pixel plac sous le curseur de la souris. Elles correspondent aux valeurs RVB, alpha, hexadcimales et lindex des couleurs pour les images ayant une palette indexe. Trois formats denregistrement pour le Web sont disponibles (voir repre de la gure C-5), avec plusieurs choix possibles pour le PNG. Le format WBMP est utilis pour le Wap, il impose des images en noir et blanc, sans nuances de gris. Chacun des formats possde ses propres options. Convertir en sRVB (repre de la gure C-5). Laissez cette option coche car le Web travaille en sRVB. Aperu (repre de la gure C-5). Permet de visualiser limage sous diffrents systmes dexploitation notamment les crans Mac et Windows, ainsi que lafchage avec le prol couleur du document. Les modications relatives au rglage des couleurs des diffrentes plates-formes sont attribues uniquement la vignette slectionne, ce qui permet une meilleure comparaison entre les plates-formes. Prenez garde maintenir une cohrence dafchage entre chacune des vignettes car de mauvais rglages peuvent engendrer des erreurs importantes. Mtadonnes (repre de la gure C-5) permet dinclure des mtadonnes dans limage. Lincorporation de mtadonnes dans une image augmente son poids. La zone Table des couleurs (voir repre de la gure C-5) prsente la palette des couleurs pour les formats GIF et PNG en 8 bits. La zone Taille de limage (voir repre de la gure C-5) permet de modier la taille de limage qui sera enregistre. Pour cela, saisissez la nouvelle taille (en pixels ou en pourcentage) en largeur et en hauteur. Ce panneau, similaire la bote de dialogue Taille de limage, est accessible depuis le menu Image de linterface de Photoshop CS4. La zone Animation prsente une barre de commandes (voir repre de la gure C-5) qui permet doptimiser chacune des images dun GIF anim. Le bouton Device Central (voir repre de la gure C-5) permet daccder une application simulant laperu de limage sur lcran dun tlphone portable.
572
La liste droulante situe droite du bouton Device Central permet de slectionner un navigateur dans lequel il est possible de prvisualiser limage et de choisir dautres navigateurs prsents sur lordinateur de lutilisateur.
Optimiser une image

Dans la fentre Enregistrer pour le Web et les priphriques, slectionnez lun des paramtres prdnis ou choisissez le format denregistrement de votre choix. Les paramtres prdnis proposent diverses combinaisons de rglages.
Figure C-6
Slection dun paramtre prdni
Si vous personnalisez ces paramtres, vous pourrez les conserver an de les utiliser pour dautres images. Pour cela, cliquez sur le menu local situ droite de la liste droulante Paramtre prdni et choisissez Enregistrer les paramtres
Figure C-7
Les options du menu local Paramtre prdni
573
Le menu local propose aussi une commande permettant doptimiser limage selon un poids cibl. Cette commande sera utile si vous avez des impratifs de poids respecter.
Figure C-8
La bote de dialogue Optimiser pour la taille du chier
Si vous ne souhaitez pas utiliser lun des paramtres prdnis, cliquez alors sur le menu local des formats denregistrement des images, plac immdiatement dessous. Vous pourrez alors choisir parmi lun des cinq formats denregistrement proposs pour lesquels vous modierez les options.
Les options du format JPEG
Figure C-9
Enregistrer en JPEG
Aprs avoir slectionn le format JPEG, indiquez la qualit de limage souhaite en spciant la valeur correspondante dans la liste droulante Qualit. Afnez la qualit en dplaant le curseur vers la droite ou vers la gauche. Progressif Permet dafcher limage progressivement dans un navigateur Web. Flou Permet daugmenter la compression et dobtenir des images plus lgres. Cette option est utiliser modrment, de lordre de 0,1 0,3.
574
Cache Permet de dterminer la couleur remplaant les pixels transparents et semitransparents prsents dans limage. Le format JPEG nacceptant pas la transparence, vous devez spcier une couleur de remplacement pour les ventuelles zones transparentes de limage. Si aucune couleur nest choisie, la couleur blanche safche par dfaut. Incorporer le prol de couleur Permet de conserver le prol ICC avec le chier. Seuls les navigateurs Safari et Omniweb sont aujourdhui capables de grer les prols ICC.
Les options du format GIF
Figure C-10
Les options du format GIF
Aprs avoir slectionn le format GIF (voir repre de la gure C-10), choisissez la palette la plus approprie limage dans la liste droulante situe sous le format (voir repre de la gure C-10). Reportez-vous la section suivante Slectionner une palette pour plus dinformations sur les diffrentes palettes de couleurs proposes. Choisissez ensuite le nombre de couleurs que doit comporter la palette de limage, grce la liste droulante Couleurs (voir repre de la gure C-10). Le mode de tramage (voir repre de la gure C-10) permet de simuler des couleurs absentes de la palette. Une couleur obtenue par tramage est cre par la juxtaposition de deux autres couleurs. Trois types de tramage sont proposs : Diffusion, Motifs et Bruit. Tester les diffrents types pour apprcier celui qui conviendra le mieux limage. Dans le cas de couleurs trames, il est possible de dnir le pourcentage de couleurs qui sera tram. Loption Transparence (voir repre de la gure C-10) permet de conserver les pixels transparents de limage. Le tramage de la transparence (voir repre de la gure C-10) permet de simuler les couleurs semi-transparentes de limage. Vous devez alors choisir une couleur dans la liste droulante Cache (voir repre de la gure C-10). Loption Entrelac (voir repre de la gure C-10) permet dafcher limage progressivement dans un navigateur. Cette option est parfois gourmande en termes de poids. La liste droulante Tramage (voir repre de la gure C-10) permet de choisir une option de tramage qui indique la proportion de couleurs trames.
575
La liste droulante Cache (voir repre de la gure C-10) permet de choisir la couleur des zones semi-transparentes. Les pixels de limage semi-transparents peuvent simuler leur transparence par tramage (voir repre de la gure C-10). Il est alors ncessaire de choisir une couleur de cache, qui correspond gnralement la couleur darrire-plan de la page HTML. La liste droulante Quantit (voir repre de la gure C-10) permet de choisir le pourcentage de zones semi-transparentes tramer. La liste droulante Aligner sur Web (voir repre de la gure C-10) permet de choisir une proportion de couleurs de la palette devant tre des couleurs Web.
Slectionner une palette
Pour choisir la palette de couleurs associe une image, choisissez lune des palettes parmi celles proposes. Le choix de la palette seffectue dans liste droulante du repre de la gure C-10. Perception - Les couleurs auxquelles lil humain est le plus sensible seront privilgies dans limage. Slective Permet de crer une palette similaire la palette perceptive privilgiant en plus les grandes zones de couleurs et conservant de nombreuses couleurs Web. Cette option donne gnralement des couleurs proches de celles de limage originale. Cest gnralement loption de palette avec laquelle vous obtiendrez le poids dimage le plus important. Adaptative Permet de crer une palette avec les couleurs apparaissant le plus souvent dans limage. Cest la palette qui est le plus souvent utilise. Restrictive Utilise les 216 couleurs Web communes aux Mac, aux PC et aux systmes Unix. Noir et blanc Cre une palette de deux couleurs, contenant uniquement du noir et du blanc. Niveau de gris Cre une palette avec les couleurs de limage traduites en niveaux de gris. Mac OS Utilise la palette Macintosh de 256 couleurs. Windows Utilise la palette Windows de 256 couleurs. Le GIF est un format denregistrement qui permet la transparence dune ou plusieurs couleurs lors de lafchage dans un navigateur Web. Pour rendre transparent larrire-plan dune image, la solution la plus simple consiste crer un document dans Photoshop avec un fond transparent. Lors de lenregistrement pour le Web, vous naurez alors qu cocher loption Transparence. Une couleur transparente supplmentaire sera alors automatiquement cre dans la palette. Vous pouvez aussi attribuer de la transparence une ou plusieurs couleurs prsentes dans la palette. Pour cela, ouvrez la fentre Enregistrer pour le Web et les priphriques et procdez de la manire suivante.
576
1. Slectionnez loutil Pipette. 2. Cliquez sur une couleur de limage. 3. Cliquez sur licne de transparence situe en bas de la palette des couleurs. Pour attribuer de la transparence plusieurs couleurs, slectionnez-les une une avec la pipette et cliquez sur licne de transparence.
Figure C-11
Licne de transparence
Les options du format PNG
Le format PNG existe sous deux rsolutions : 8 bits et 24 bits. Le format PNG 8 bits cre une palette de 256 couleurs, semblable au GIF. Il offre les mmes possibilits que ce format et il est souvent bien plus lger. Le PNG 8 bits, comme le GIF, accepte une ou plusieurs couleurs de transparence mais ne supporte pas les images animes. Le format PNG 24 bits cre des images en millions de couleurs et peut tre assimil au JPEG. Il est gnralement beaucoup plus lourd que ce format mais souvent de meilleure qualit. Il est principalement utilis avec les images 24 bits pour lesquelles de la transparence est ncessaire. Le PNG 24 bits avec de la transparence nest pas support par les versions 5.5 et 6 dInternet Explorer. Vous trouverez sur le Web des scripts qui utilisent un ltre propre au navigateur Internet Explorer et qui permettent lafchage des chiers PNG.
Le dcoupage en tranches
Les tranches de Photoshop constituent un lment essentiel dans la conception de sites Web. Elles permettent de dcouper facilement les images qui reconstitueront par la suite la page Web. Dans Photoshop CS4, deux outils permettent de crer et de slectionner des tranches : loutil Tranche et loutil Slection de tranche (voir gure C-12). Ils sont regroups avec loutil recadrage.
Figure C-12
Les deux outils de gestion des tranches
577
Crer des tranches depuis des repres

Pour crer des tranches depuis des repres, vous devez tout dabord les placer. 1. Afchez les rgles via le menu Afchage>Rgles. 2. Cliquez dans la rgle horizontale ou verticale et, tout en maintenant le bouton de la souris enfonc, faites glisser le repre lendroit souhait. 3. Slectionnez loutil Tranche. 4. Dans la barre doptions de loutil, cliquez sur le bouton Tranches daprs les repres. Les tranches sont automatiquement cres.
Crer des tranches manuellement

1. Slectionnez loutil Tranche. 2. Cliquez sur limage et dessinez la zone correspondant la tranche. Il sagit dans ce cas dune tranche utilisateur. Si cela est ncessaire, Photoshop crera automatiquement dautres tranches pour garder la cohrence de lensemble. Les tranches utilisateur sont indiques par une icne bleue, les tranches automatiques par une icne grise.
Figure C-13
Exemple de dcoupage dune image en tranches
578
Les options des tranches

Laccs aux options des tranches peut se faire depuis le document Photoshop ou depuis la fentre Enregistrer pour le Web et les priphriques. Les options des tranches concernent les tranches images et les tranches vides. Pour transformer une tranche image en tranche vide, cliquez sur le menu local situ en haut de la fentre.
Figure C-14
La bote de dialogue Options de tranche
Depuis le document Photoshop, slectionnez loutil Slection de tranche, puis cliquez sur le bouton de dnition des options de la tranche slectionne. Vous pouvez aussi doublecliquer sur la tranche. Voici les diffrentes options de la bote de dialogue Options de tranche. Liste droulante Type de tranche Permet de dterminer si la tranche est de type image ou non. Une tranche sans image est une tranche vide qui peut recevoir, par exemple, du texte construit avec des balises HTML. Champ Nom Permet de nommer la tranche. Il est fortement conseill de renommer chacune des tranches de faon obtenir, par la suite, des images facilement identiables. Cette option est galement ncessaire pour des enregistrements multiples de la mme tranche avec un contenu diffrent. Champ URL Permet de crer un lien sur limage de la tranche slectionne. Champ Cible Permet de cibler louverture dune page. Champ Message Permet de saisir un texte qui safchera en bas de la fentre du navigateur lorsque le curseur de la souris survolera la tranche.
579
Champ Instruction Alt Cette instruction est une alternative lafchage de limage pour les navigateurs qui nacceptent pas lafchage des images. Cet attribut permet aussi, dans certains navigateurs, dafcher une infobulle lorsque le curseur de la souris survole limage. Champs X, Y, L et H de la zone Dimensions Permettent de modier la taille et lemplacement de la tranche. Liste droulante Type darrire-plan de la tranche Permet de choisir la couleur darrire-plan de la cellule de tableau ou de la balise <div> dans laquelle sera place cette portion dimage.
Optimiser les tranches

Aprs avoir cr des tranches, vous pourrez les optimiser sparment depuis la fentre Enregistrer pour le Web et les priphriques. 1. Slectionnez menu Fichier>Enregistrer pour le Web 2. Activez loutil Slection de tranche et cliquez sur lune des tranches. Son contour devient marron et son contenu safche avec une opacit de 100 %. 3. Choisissez lun des formats denregistrement proposs GIF, JPEG ou PNG. 4. Optimisez la tranche pour obtenir le meilleur rsultat.
Enregistrer les tranches

1. Une fois limage ou les tranches optimises, cliquez sur le bouton Enregistrer situ en bas de la fentre. La fentre prsente la gure C-15 souvre alors. 2. Choisissez lemplacement souhait dans la liste droulante Enregistrer dans et indiquez le nom du chier dans la liste droulante du mme nom. Si limage comporte des tranches renommes, chaque image dcoupe sera enregistre sous le nom de la tranche laquelle elle correspond. Les tranches sans nom recevront le nom du chier. 3. Choisissez Images dans la liste droulante Type pour enregistrer uniquement les images ou HTML et images pour reconstituer la page Web complte. Cette dernire solution, bien quapparemment simple, reconstitue limage dcoupe en tableaux ou en balises <div> avec des positions absolues. Ces deux mthodes sont relativement limites par rapport une intgration depuis Dreamweaver. Dans la majorit des cas, vous choisirez loption Images. 4. Cliquez sur le bouton Enregistrer.
580
Figure C-15
La fentre Enregistrer une copie optimise sous
Conclusion
La cration de page dans Dreamweaver doit gnralement saccompagner dicnes, dimages et de divers graphismes. La suite CS4, et particulirement Photoshop CS4, vous permettra de raliser de nombreux montages photographiques. Photoshop est un logiciel majeur dans tous les mtiers de limage et vous devriez en connatre les principales fonctions. Lutilisation des tranches amliorera votre productivit en dcoupant en une seule fois lensemble de votre composition. La bote de dialogue Enregistrer pour le Web et les priphriques vous permettra une meilleure optimisation de toutes vos images.
Annexe D
Couleurs nominatives
Voici les diffrentes couleurs dont le nom commun est reconnu par les navigateurs, ainsi que leur notation en codes hexadcimal et RVB.
Tableau D-1 Liste des couleurs nominatives HTML
Nom de la couleur
aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse
Code hexadcimal
Code RVB
#F0F8FF #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887 #5F9EA0 #7FFF00
240,248,255 250,235,215 0,255,255 127,255,212 240,255,255 245,245,220 255,228,196 0,0,0 255,235,205 0,0,255 138,43,226 165,42,42 222,184,135 95,158,160 127,255,0
582
Dreamweaver CS4 ANNEXE D Tableau D-1 Liste des couleurs nominatives HTML (suite)
Nom de la couleur
chocolate coral cornowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkgrey darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey darkturquoise darkviolet deeppink deepskyblue dimgray dimgrey dodgerblue rebrick oralwhite
Code hexadcimal
Code RVB
#D2691E #FF7F50 #6495ED #FFF8DC #DC143C #00FFFF #00008B #008B8B #B8860B #A9A9A9 #006400 #A9A9A9 #BDB76B #8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #2F4F4F #00CED1 #9400D3 #FF1493 #00BFFF #696969 #696969 #1E90FF #B22222 #FFFAF0
210,105,30 255,127,80 100,149,237 255,248,220 220,20,60 0,255,255 0,0,139 0,139,139 184,134,11 169,169,169 0,100,0 169,169,169 189,183,107 139,0,139 85,107,47 255,140,0 153,50,204 139,0,0 233,150,122 143,188,143 72,61,139 47,79,79 47,79,79 0,206,209 148,0,211 255,20,147 0,191,255 105,105,105 105,105,105 30,144,255 178,34,34 255,250,240
Couleurs nominatives ANNEXE D Tableau D-1 Liste des couleurs nominatives HTML (suite)
Nom de la couleur
forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow grey honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray
583
Code hexadcimal
Code RVB
#228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 #DAA520 #808080 #008000 #ADFF2F #808080 #F0FFF0 #FF69B4 #CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2 #D3D3D3 #90EE90 #D3D3D3 #FFB6C1 #FFA07A #20B2AA #87CEFA #778899
34,139,34 255,0,255 220,220,220 248,248,255 255,215,0 218,165,32 128,128,128 0,128,0 173,255,47 128,128,128 240,255,240 255,105,180 205,92,92 75,0,130 255,255,240 240,230,140 230,230,250 255,240,245 124,252,0 255,250,205 173,216,230 240,128,128 224,255,255 250,250,210 211,211,211 144,238,144 211,211,211 255,182,193 255,160,122 32,178,170 135,206,250 119,136,153
584
Nom de la couleur
lightslategrey lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise
Code hexadcimal
Code RVB
#778899 #B0C4DE #FFFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FF #800000 #66CDAA #0000CD #BA55D3 #9370DB #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 #808000 #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE
119,136,153 176,196,222 255,255,224 0,255,0 50,205,50 250,240,230 255,0,255 128,0,0 102,205,170 0,0,205 186,85,211 147,112,219 60,179,113 123,104,238 0,250,154 72,209,204 199,21,133 25,25,112 245,255,250 255,228,225 255,228,181 255,222,173 0,0,128 253,245,230 128,128,0 107,142,35 255,165,0 255,69,0 218,112,214 238,232,170 152,251,152 175,238,238
Couleurs nominatives ANNEXE D Tableau D-1 Liste des couleurs nominatives HTML (suite)
Nom de la couleur
palevioletred papayawhip peachpuff peru pink plum powderblue purple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue slategray slategrey snow springgreen steelblue tan teal thistle tomato turquoise violet wheat
585
Code hexadcimal
Code RVB
#DB7093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #800080 #FF0000 #BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D #C0C0C0 #87CEEB #6A5ACD #708090 #708090 #FFFAFA #00FF7F #4682B4 #D2B48C #008080 #D8BFD8 #FF6347 #40E0D0 #EE82EE #F5DEB3
219,112,147 255,239,213 255,218,185 205,133,63 255,192,203 221,160,221 176,224,230 128,0,128 255,0,0 188,143,143 65,105,225 139,69,19 250,128,114 244,164,96 46,139,87 255,245,238 160,82,45 192,192,192 135,206,235 106,90,205 112,128,144 112,128,144 255,250,250 0,255,127 70,130,180 210,180,140 0,128,128 216,191,216 255,99,71 64,224,208 238,130,238 245,222,179
586
Nom de la couleur
white whitesmoke yellow yellowgreen
Code hexadcimal
Code RVB
#FFFFFF #F5F5F5 #FFFF00 #9ACD32
255,255,255 245,245,245 255,255,0 154,205,50
Index
Symboles @import 188, 212 _blank 113 _parent 113 _self 113 _top 113 A absolu 239 accentuer 69 accessibilit 125, 144 image 57 lien 75 accesskey 127 Accordon Spry 372 Actifs (fentre) 377 accs 381 couleur 379 insrer un contenu 379 lien 380 utiliser 379 vido 380 action 122, 322 active 268 ActiveX 413 Actualiser le mode Cration 29 Adobe Media Encoder 426 Adobe Photoshop 58 adresses des chiers de classe 413 Afchage en direct, mode 28, 489 afcher 220 Afcher les options 29 Afcher-Masquer les lments (comportement) 322, 329 Agrandissement/Rduction comportement 322 effet 343 alignement image 62 texte 219 vertical 219 ancre 77 nomme 33 Apache 439 aperu congurer 52 dans le navigateur 29 Apparition/Fondu comportement 322 effet 343 Appel JavaScript (comportement) 322, 332 assistances visuelles 29, 263 Atteindre lURL (comportement) 322, 333 attribut alt et image 61 Audacity 418 authentication, systme de 516 B background-attachement 217 background-color 217 background-image 217 background-position 218 background-repeat 217 balise 178, 179, 180, 188, 212, 286, 287, 288, 412 abbr 43 blocs 181 citation 43 dd 43 div 257 insrer 33, 34 dl 43 dt 43 en-tte 50, 178 h 43 inline 182 li 43 listes 179 ol 43 paragraphe 43, 50, 178 PRE 43 pr-format 50 slecteur de 30 table 88 ul 43 XML 526 bande passante 399 barre doutils 26 dplacer 26 Document 28 Rendu du style 26 Standard 29 Barre de menus Spry 366 barre de navigation 474, 497 Barre de navigation (comportement) 323, 358, 497 base de donnes connexion 479, 480 cration 452 notion 447 publier 564 Bases de donnes, panneau 469 bibliothque 377, 383 appliquer un lment 385 crer un lment 384 menu 384 texte 384 modier un lment 385 blocs 181
588
Dreamweaver CS4
bote CSS modle 183 bordure 62 tableau 275 bouton de soumission 140 radio 37, 134 groupe 37 Bouton radio, icne 129 Bouton, icne 130 C cadre ottant 105, 115 proprits 116 voir aussi jeu de cadres carte image 82 case cocher 37, 136 Case cocher, icne 129 casse 216 cellules, proprits 99 centrer horizontalement 297 verticalement 299 champ dimage 37, 150 de chier 37, 148 de texte 37, 131 ensemble 37 masqu 37, 151 Champ dimage, icne 130 Champ de chier, icne 130 Champ de texte, icne 129 Champ masqu, icne 129 champs (table), notion 447 Changer la proprit (comportement) 322, 335 classe 192, 214 attribuer 232 cl daccs 76 trangre 449 primaire 449 clear 221, 244 clip 227 codage URL 81 Code en direct 29 code, vrier 185 codec 399, 417 On2 vp6 434 color 216 Commun, panneau 33
comportement action associe 322 Afcher-Masquer les lments 329 Appel JavaScript 332 Atteindre lURL 333 Barre de navigation 358 Changer la proprit 335 crer 327 de la catgorie Effets 343 de la catgorie Texte 351 Dnir image barre de navigation 337 Dplacer llment PA 338 Image survole 357 JavaScript 321 Menu de reroutage 345, 361 Message contextuel 345 modier 328 Ouvrir la fentre Navigateur 347 panneau 325 Permuter une image 348 Prcharger les images 351 Restaurer limage 351 supprimer 329 Valider le formulaire 353 Vrier le Plug-in 355 Comportements de serveur page dynamique et 491 panneau 470 compression spatiale 399 temporelle 399 conception smantique 178 Connecter lutilisateur (comportement) 517 conteneurs empils Spry 541 avec zone focalisable 543 convertir un chier sonore 418 couleur 199, 216 arrire-plan 217 bordure 223 en-tte 24 hexadcimale 200 lien 24 nominative 199 notation 581 CSS 297 curseur 228 cursor 228
D dbordement 227 Dconnecter lutilisateur (comportement) 520 dcoration 216 Dnir image barre de navigation (comportement) 322, 337 Dnition du site, fentre 476 Dplacer llment PA (comportement) 322, 338 description, mtatag 551 dtourage 227 dise 82 display 220 div, insrer 300 document enregistrer 19 marges 22 nouveau 18 prfrences 44 Document, fentre 26 donne dynamique 523 Spry 531 Donnes, catgorie 472 Donnes, panneau 38 dossier des images par dfaut 15 Dreamweaver CS4 nouveauts 3 prsentation 3 DTD (Dnition de type de document) 25, 45 XHTML 1.0 Strict 46, 184 E craser comportement 322 effet 343 diter une image 62 effacer (bote) 221 Effets, comportement de la catgorie 343 lastique 314 lment PA 246 tracer un div 34 lment XML 525 lment PA imbriquer 254 proprits 248 em 127 Enctype 123, 148
Index
589
enregistrements (table), notion 447 ensemble de champs 37 en-tte couleur 24 police 24 paisseur 216 espace blanc 220 espace de travail 6 espacement lettres 219 mots 218 tat de navigation 474 tiquette 154 Etiquette, icne 130 vnement 322 dclenchement associ 324 F Favoris Panneau 43 favoris 382 feuille de style la conception 27 afchage CSS 27 cran 27 externe 188, 211 impression 27 mdia 212 projection 27 tlphone mobile 27 TTY 27 TV 27 eldset 125, 144 lter 228 ltre 228 xe 242 Flash 425 .v dans une page 430 .swf dans une page 431 crer une vido .v 425 FlashPaper 434 oat 220 ottante (bote) 220 ottement 243 annuler 244 ux 235 focus 268 fonctions dynamiques 469 font-family 215 font-size 215 font-style 215
font-variant 216 font-weight 216 for 126 format .v 430 .swf 431 denregistrement des images 64 sonore 417 formulaire 121 dinsertion 475 dinsertion de donnes 505 de mise jour 475 de modication de donnes 509 de normalisation 45 Formulaires, panneau 36 frameborder 116 frameset 104 frquence dchantillonnage 416 FTP (File Transfer Protocol) 15 Passif 16 G GET 122 GIF 64, 574 anim 67 Glisser (comportement) 323 Glisser vers le haut ou vers le bas (effet) 343 graphisme (voir image) H hauteur bote 220, 226 de ligne 215 height 220 hte FTP 15 hover 268 I ID 193, 214 attribuer 231 crer 231 ID de classe 413 iframe 105 illustration de la puce 224 image accessibilit 57 aligner 62 arrire-plan 217 bordure 62 dimensions 60
dynamique 59 dition 62 enregistrer pour le web 570 espaces 61 format denregistrement 64 insrer 56 depuis Photoshop 58 map 82 menu 292 optimiser 63, 572 palette de couleurs 66 prparer pour le Web 567 prvisualiser 56 proprits 60 PSD 59 recadrer 68 rchantillonner 69 rptition 22 source 61 supprimer la bordure 269 survole (comportement) 323, 357 taille 568 texte secondaire 61 trac 26 transparences 67 InContext Editing, panneau 41 Index Z 226, 256 indexation et jeu de cadres 118 Infos distantes, catgorie 15 Infos locales, catgorie 14 inline 182 insrer div 300 image 56 Insertion, panneau 472 inspecteur de balises 233 Internet, protocoles 441 iTunes 418 J JavaScript 321 JavaScript, comportements 321 jeu denregistrements concept 482 copie 488 fentre 483 insertion 473 modier 489 paramtrer 484 mode Simple 483 supprimer 489
590
Dreamweaver CS4
jeu de cadres 103 bordures 108 crer 105 DTD 106 enregistrer 111 liens 112 rfrencement 118 structure 104 unit de taille 109 JPEG 64, 573 K keywords, mtatag 549, 552 L label 125 largeur bote 220, 226 bordure 223 legend 144 letter-spacing 219 liaison 470 Liaisons, panneau 470 lien absolu 72, 74 accessibilit 75 ancre 77 bordure des images 269 casse 15 cl daccs 76 de messagerie 33 dise 82 image 269 map 82 jeu de cadres et 112 messagerie 79 mise en forme 267 ractif 269 relatif 15, 72 tabulations 76 taille 24 vide 82 line-height 215 link 268 liquide 311 liste 37, 179, 285 numros 51 crer 285 CSS 288 de dnitions 286 menu 290
non ordonne 287 ordonne 287 simple 51 style 290 liste de donnes dynamiques Spry 536 Liste/Menu, icne 129 liste-dtails XML Spry 539 localhost 442 loupe 127 luminosit/contraste 69 M marge 222 margin 222 mdia 212 menu 37 de reroutage 37, 152 droulant 137 horizontal 291, 293 image 292 liste 290 ractif 294 vertical 290, 292 Menu de reroutage (comportement) 323, 345, 361 Menu de reroutage Aller (comportement) 323 Menu de reroutage, icne 129 Message contextuel (comportement) 323, 345 messagerie 79 mtachier 407 mtatag 548 description 551 gnrique 553 keywords 552 method 122 MIME, encodage 148 MIME, types audio 421 iTunes 423 vido 413 mise en forme 267 Mise en forme, panneau 34 mise en ligne dun site 555 mise en page avec ottants 305 basique 300 centrer horizontalement 297 verticalement 299
CSS 297 lastique 314 liquide 311 mode de travail Code 28 Cration 28 actualiser 29 Fractionner 28 modle 377, 386 appliquer 388 changer 389 imbriqu 390 mise en ligne 396 rgion facultative 394 rpte 391 simple 386 tableau rpt 392 modle de botes CSS 264 moteur de recherche 547 mots-cls 550 MP3 418 multipart/form-data 123 MySQL 439 crer et grer une base 447 droits utilisateur 464 types de donnes 453 N navigation vers le code 31 noframe 113 nouveau document 18 O On2 vp6 434 onAbort 324 onBlur 324 onChange 324 onClick 324 onDblClick 324 onFocus 324 onglet Avanc 11 Elmentaire 11 Validation 185 onKeyDown 324 onKeyPress 324 onKeyUp 324 onLoad 324 onMouseDown 324 onMouseMove 324
Index
591
onMouseOut 324 onMouseOver 324 onMouseUp 324 onMove 324 onReset 324 onScroll 324 onSelect 324 onSubmit 324 oOnUnload 324 optimiser une image 63 Ouvrir la fentre Navigateur (comportement) 323, 347 owerow 227 P padding 221 page dynamique 439 authentication 516 avec liste simple 492 barre et tat de navigation 497 comportement serveur 491 de suppression denregistrements 513 gestion des donnes 504 principale-dtail 500 page-break-after 228 page-break-before 227 palette de couleurs 66 palette des Proprits 213 crer style CSS 213 crer un style CSS 191 panneau Insertion menu Commun 33 menu Donnes 38 menu Favoris 43 menu Formulaires 36 menu InContext Editing 41 menu Mise en forme 34 menu Spry 40 menu Texte 42 Styles CSS 190, 204 textes 50 panneau rductible Spry 374 panneaux onglet Spry 370 paragraphes 178 Permuter une image (comportement) 323, 348 PHP 439 catgorie 472 conguration 446 extensions 446
PHP/MySQL 439 infrastructure serveur 439 phpMyAdmin 443, 450 base restaurer 468 sauvegarder 467 champ ajouter 463 supprimer/modier 461 crer une base 452, 455 dnir les champs 453 la table 456 enregistrements 458 ajouter 458 modier 460 interface 451 table, modier 461 utilisation 450 pice jointe 217 pipettes, transparences 67 placement 227 PNG 64, 576 podcast 421 enregistrer 421 intgrer une page 423 mise en ligne 422 police 215 position horizontale 218 liste 224 verticale 218 positionnement absolu 239 lments PA 246 xe 242 ottement 243 relatif 237 POST 122 Prcharger les images (comportement) 323, 351 prfrences nouveau document 18 types de chiers 63 prvisualiser une image 56 proprits 191 image 60 page 21 palette 213 pseudo-classe 194, 268 publier un site 559
Q QuickTime 398 exportation 400 version Pro 400 Quirks 184 R RealMedia 398 RealNetworks 398 RealPlayer 398 RealVideo 402 recadrage 68 rchantillonner 69 rfrencement 547 mtatags 548 optimiser 548 titre de la page 549 rgion facultative 394 rpte 474 en bloc de donnes dynamiques Spry 533 inline de donnes dynamiques Spry 534 Rgion Spry 531 Rgle cible 213 relatif 237 remplissage 221 rptition 217 Rptition Spry 533 Restaurer limage (comportement) 351 Restaurer limage intervertie (comportement) 323 Restreindre laccs la page (comportement) 519 retrait texte 219 Retrait du texte, option 51 rollover 322 S saut de page avant 227 schma de donnes XML Spry 529 scrolling 116 Secouer comportement 323 effet 343
592
Dreamweaver CS4
slecteur balise 30, 192, 214 classe 192, 214 CSS 189 ID 193, 214 parent-descendant 196 plusieurs 195 pseudo-classe 194 universel 197 smantique 178 serveur 439 installer 441 test 444 type daccs 557 Serveur dvaluation, catgorie 17 site arborescence 547 avanc 14 congurer mode Simple 475 dnir 476 dnition 10 infos distantes 555 mise en ligne 555 nom des pages 547 organisation 9 paramtres 558 prparer 9 publier 559 base de donnes 564 Site (catgorie) 558 son 415 convertir 418 crer pour le Web 417 enregistrer 418 formats 417 intgrer 419 avec des balises 420 lire depuis un lien 419 en streaming 419 numrique 415 numriser 417 Spry 130, 155, 375, 523 Accordon 372 Barre de menus 366 donne dynamique 531 liste de donnes dynamiques 536 liste-dtails 539 panneau 40 Panneau rductible 374
Panneaux onglet 370 rgion rpte en bloc de donnes dynamiques 533 inline de donnes dynamiques 534 schma de donnes 529 tableau de donnes dynamiques 538 validation 37 widgets 365 Store (comportement) 323 streaming 400, 407 styles bordure 223 texte 215 voir aussi styles CSS et mise en page styles CSS 187 attribuer 230 catgorie Arrire-plan 216 catgorie Bloc 218 catgorie Bote 220 catgorie Bordure 222 catgorie Extensions 227 catgorie Liste 223 catgorie Positionnement 225 catgorie Type 214 crer 213 dplacer 212 dition 210 identiant 189 lier une feuille 211 nouveau 190 palette Proprits 213 placement 187 supprimer 210 Vrier 228 Styles CSS, panneau 190 summary 88 Surligner (effet) 343 T tabindex 127 table, notion 447 tableau ajouter ligne ou colonne 93 aspect 96 assistances visuelles 92 attribut 88 border 88 bordures 96, 275
caption 91 cration 88 dynamique 474 espacement 97 espaces 275 fusionner des cellules 95 insrer du contenu 92 mise en forme 272 mode Dvelopp 34, 92 mode Standard 34 modier 92 proprits 98 rpt 392 structure 87 summary 88 width 88 tableau de donnes dynamiques Spry 538 tabulations 76 text-align 219 text-decoration 216 Texte comportement de la catgorie 351 panneau 42 texte copier-coller 47 dynamique 474 insrer 303 retrait 51 ngatif 51 saisir 47 taille 215 Texte dun champ texte (comportement) 323 Texte de la barre dtat (comportement) 323 Texte du cadre (comportement) 323 Texte du conteneur (comportement) 323 text-indent 219 text-transform 216 tranches, Photoshop 576 type liste 224 position 225 U unit cadratin 199 centimtre 199
Index
593
de mesure 197 em 199 exs 199 millimtre 199 pica 199 pixel 198 point 198 pouce 198 pourcentage 199 V validation Spry 37, 155, 159, 163, 164, 168 Validation Spry, icne 130 Validation, onglet 185 Valider le formulaire (comportement) 323, 353 Valider le marqueur 29 variante 216 vrier code 185 W3C 186 page 29
Vrier le Plug-in (comportement) 355 Vrier le plug-in (comportement) 323 vertical-align 219 vido 397 .v 430 codec 399 contrles Active X 413 fond transparent 434 intgrer une page 409 en streaming 414 lire 406 depuis la page 409 depuis un lien 406 en streaming 407 mtachier 407 raliser 398 technologie 397 voir aussi Flash visibilit 226 visibility 226 visited 268
W WampServer 2 installation 441 utilisation 442 Web local 442 white-space 220 widget Spry 130, 365 width 220 Windows Media 404 Windows Media Player 398, 419 word-spacing 218 X XML 523 structure 524 syntaxe 527 Z Z-index 226 zone de texte 37, 142 Zone de texte, icne 129
Dreamweaver CS4
Concevoir des pages Web conformes aux standards XHTML
Avec la version CS4 de Dreamweaver, le concepteur dispose d'un outil trs performant pour crer des pages Web conformes aux standards XHTML 1.0. La mise au point de feuilles de styles CSS a t en effet simplifie dans cette nouvelle version et la mise en page de sites Internet peut dsormais s'effectuer en dissociant le fond de la forme. En outre, les comportements de Dreamweaver et les widgets Spry permettent de concevoir des pages interactives sans avoir saisir une seule ligne de code JavaScript. Quant aux flux de donnes XML, de plus en plus employs dans les applications en ligne pour stocker ou transfrer des informations, ils sont dsormais facilement grables grce aux composants Spry-XML qui peuvent intgrer ces donnes dans la page Web depuis linterface de Dreamweaver.
J.-M. Defrance
Diplm dun DEA de didactique de linformatique, Jean-Marie Defrance enseigne le multimdia Gobelins, lcole de limage. Il est par ailleurs directeur technique de lAgence W, socit spcialise dans le dveloppement de sites dynamiques.
Un ouvrage de rfrence illustr par de nombreux cas pratiques

Trs illustr et ponctu de nombreux exemples d'application, ce livre complet vous familiarisera avec tous les outils de Dreamweaver CS4 permettant de concevoir des sites Web de nouvelle gnration. Il vous fera dcouvrir la mise en page XHTML/CSS, les comportements JavaScript et les widgets Spry, les nouveaux outils Spry de validation de formulaire, la cration de pages dynamiques PHP/MySQL et la gestion de donnes issues dun fichier XML. Mais vous y retrouverez galement les fonctions courantes de Dreamweaver, comme les formulaires, les cadres, les tableaux, ainsi que les balises de rfrencement et les techniques de cration dimages destines au Web. Pour complter votre apprentissage, lextension Web du livre comporte tous les fichiers source des exemples et des exercices.
T. Audoux
Enseignant dans plusieurs tablissements (Gobelins, lcole de limage et Greta Rseau Graphique), Thierry Audoux travaille dans le multimdia depuis plus de quinze ans, ce qui lui permet danimer des cours sur des sujets aussi varis que le XHTML et les CSS, Dreamweaver, la vido, Flash, ou encore la programmation JavaScript et ActionScript.
Au sommaire
Partie I. Les bases de Dreamweaver CS4 Prsentation de Dreamweaver CS4 Raliser un premier document avec Dreamweaver Insrer et traiter les images dans Dreamweaver Crer des hyperliens Mise en page avec des tableaux Les jeux de cadres et les cadres flottants Les formulaires et leur validation Spry Partie II. Les CSS avec Dreamweaver CS4 Introduction la conception XHTML/CSS Les rgles de styles Le positionnement avec les CSS Mise en forme des liens, des tableaux et des formulaires Mise en forme des listes Pratique de la mise en page CSS Partie III. Fonctionnalits avances de Dreamweaver CS4 Les comportements JavaScript Les widgets Spry Bibliothques et modles Intgration des vidos Intgration des lments sonores Intgration des lments Flash Partie IV. Gestion des donnes Cration de pages dynamiques avec PHP/MySQL Gestion de donnes XML avec Spry Annexes Prparer son site pour le rfrencement Mise en ligne dun site Raliser des lments graphiques Couleurs nominatives.
qui sadresse cet ouvrage ?

Aux intgrateurs et webmasters dbutants dsirant sinitier Dreamweaver CS4 pour crer des pages Web Aux webdesigners confirms souhaitant matriser les nouvelles fonctionnalits de la version CS4 pour amliorer leur productivit tous ceux qui souhaitent dvelopper des sites dynamiques coupls une base de donnes MySQL en ligne, ou exploiter des donnes issues de fichiers XML
Sur le site www.editions-eyrolles.com Tlchargez le code source des exemples et des exercices Dialoguez avec les auteurs

Dreamweaver CS4

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dreamweaver CS4

Uploaded by

Copyright:

Available Formats

Dreamweaver CS4

Styles CSS Composants Spry-XML Comportements JavaScript Comportements serveur PHP-MySQL

Comportements JavaScript Comportements serveur PHP-MySQL

DITIONS EYROLLES 61, bd Saint-Germain 75240 Paris Cedex 05 www.editions-eyrolles.com

Table des matires

Prsentation de Dreamweaver CS4 . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Raliser un premier document avec Dreamweaver . . . . . . . . . . . .

Insrer et traiter les images dans Dreamweaver . . . . . . . . . . . . . . .

Table des matires

Crer des hyperliens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Mise en page avec des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Les jeux de cadres et les cadres ottants . . . . . . . . . . . . . . . . . . . . . .

Les formulaires et leur validation Spry . . . . . . . . . . . . . . . . . . . . . . . . .

Table des matires

Introduction la conception XHTML/CSS . . . . . . . . . . . . . . . . . . . . . .

193 194 195 197 199 201

Les rgles de styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Table des matires

Le positionnement avec les CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Mise en forme des liens, des tableaux et des formulaires . . . . .

267 267 267 269 269 272 275 280

280 281 283

Mise en forme des listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Pratique de la mise en page CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

297 297 297 299 300 305 311 314 317

Les comportements JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Table des matires

Les widgets Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

365 366 370 372 374 376

Intgration des vidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Table des matires

Intgration des lments sonores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Intgration des lments Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

425 425 426 430 431 434 434 435

Cration de pages dynamiques avec PHP/MySQL . . . . . . . . . . . . .

Table des matires

Gestion de donnes XML avec Spry . . . . . . . . . . . . . . . . . . . . . . . . . . .

Prparer son site pour le rfrencement . . . . . . . . . . . . . . . . . . . . . . .

547 547 547 548 548 549

549 551 552 553

Mise en ligne dun site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Raliser des lments graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Couleurs nominatives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Les bases de Dreamweaver CS4

Une nouvelle interface utilisateur

Un nouveau panneau des proprits

Les bases de Dreamweaver CS4 PARTIE I

Un accs aux styles plus rapide

Une prvisualisation facilite avec lafchage en direct

Une meilleure intgration des autres logiciels Adobe

Le framework Spry pour Ajax

Prsentation de Dreamweaver CS4 CHAPITRE 1

Les bases de Dreamweaver CS4 PARTIE I

Prsentation de lespace de travail

cran daccueil de Dreamweaver

Prsentation de Dreamweaver CS4 CHAPITRE 1

Espace de travail de Dreamweaver

Les bases de Dreamweaver CS4 PARTIE I

Les bases de Dreamweaver CS4 PARTIE I

Lorganisation des chiers de travail et des documents dun site

Raliser un premier document avec Dreamweaver CHAPITRE 2

Les menus de dnition dun nouveau site

Dnir un nouveau site avec longlet Elmentaire