Adobe Dreamweaver CS6

Adobe® Dreamweaver ® CS6
CLASSROOM IN A BOOK®
Adobe® Dreamweaver® CS6

Apprenez à concevoir des pages web
statiques et dynamiques et à incorporer
des images, du texte et des vidéos.
Créez des applications interactives
riches avec HTML5 et CSS3, publiez vos
sites web et gérez-les facilement.
CLASSROOM
La méthode la plus rapide, la plus simple et la plus « Classroom in a Book
complète pour maîtriser Adobe Dreamweaver CS6
IN A BOOK®
est de loin la meilleure
Classroom in a Book, collection au succès mondial, vous aide à collection d’ouvrages
découvrir facilement et rapidement les fonctionnalités des logiciels
Adobe. Elle apporte ce qu’aucun autre ouvrage ou programme de d’apprentissage et de
formation ne propose : des supports pour travaux pratiques conçus formation existant sur
spécialement par des experts en produits Adobe.
le marché. Tout ce dont
Les quinze leçons de cet ouvrage couvrent l’ensemble des notions de
base d’Adobe Dreamweaver CS6 et vous fournissent une multitude
vous avez besoin pour
d’astuces et de techniques pour vous aider à optimiser votre produc- maîtriser les logiciels
tivité. Vous pouvez suivre chacune de ces leçons dans l’ordre ou bien
ne choisir que celles qui vous intéressent.
est inclus : explications
Découvrez les nouvelles fonctionnalités de Dreamweaver CS6 :
claires, instructions pas
• Mises en page et animations HTML5 à pas et fichiers des
• Vidéos HTML5
• Création de styles avec les nouveautés de CSS3
projets. »
Barbara Binder, formatrice certifiée
Ce qu’il vous faut pour suivre les leçons : Le logiciel Adobe Adobe Rocky Mountain Training.
Dreamweaver CS6 pour Windows ou Mac OS (non fourni avec le
livre). Bonus : 2 heures
de tutoriels en VO
d’Adobe Dreamweaver CS6 :
Inclus : un DVD-ROM en version originale US, contenant les fichiers des
Learn by Video
leçons pour Dreamweaver CS6.
ISBN : 978-2-7440-2551-8
2551 1112 38 €
Le support officiel conçu par l’équipe d’Adobe
www.pearson.fr
Inclus ! Un DVD-ROM Windows / Mac OS en version originale US
2551-CIAB Dreamweaver 6.indd 1 03/10/12 12:23
customer 571196 at 2016-08-08

571196 Propriété de Bedria KAYA <bedria11@yahoo.fr>
13:32:41 +0200
Classroom in a Book
Adobe®
Dreamweaver® CS6
00-CIABDreamweaverCS6FR.indd 1 customer 571196 at 2016-08-08

13:32:41 +0200 31/08/2012 15:55:53
Pearson France a apporté le plus grand soin à la réalisation de ce livre afin de vous fournir une information
complète et fiable. Cependant, Pearson France n’assume de responsabilités, ni pour son utilisation, ni pour les
contrefaçons de brevets ou atteintes aux droits de tierces personnes qui pourraient résulter de cette utilisation.
Pearson France ne pourra en aucun cas être tenu pour responsable des préjudices ou dommages de quelque
nature que ce soit pouvant résulter de l’utilisation de ces exemples ou programmes. Tous les noms de produits
ou marques cités dans ce livre sont des marques déposées par leurs propriétaires respectifs.
The content of this guide is furnished for information use only, is subject to change without notice, and
should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated
assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational
content contained in this guide.
Adobe, the Adobe logo, Acrobat, the Adobe PDF logo, Adobe Bridge, Classroom in a Book, Creative Suite, Flash,
Illustrator, InDesign, Lightroom, Photoshop, Photoshop Camera Raw and PostScript are either registered trade-
marks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
Apple, Mac OS, Macintosh, Quicktime, and Safari are trademarks of Apple, registered in the U.S. and other
countries. Microsoft, Windows, Excel, and Internet Explorer are either registered trademarks or trademarks of
Microsoft Corporation in the U.S. and/or other countries. Autodesk, Google Earth, and all other trademarks
are the property of their respective owners.
Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is
defined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial Computer Software
Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent
with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer
Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users
(a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to
the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States.
Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users,
Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of
Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of
1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41
CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in
the preceding sentence shall be incorporated by reference.
Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA
Publié par Pearson France Titre original : Adobe® Dreamweaver® CS6 Classroom
Immeuble Terra Nova II in a Book
15, rue Henri Rol Tanguy Traduction : Patrick Fabre
93100 MONTREUIL
Tél. : 01 43 62 31 00 ISBN original : 978-0-321-82245-1
www.pearson.fr Copyright © 2012 by Adobe System Incorporated
and its licensors
Réalisation : Véronique Imbault All rights reserved
ISBN : 978-2-7440-5223-1 Adobe Press books are published by Peachpit, a

Copyright © 2012 Pearson France division of Pearson Education, USA
Tous droits réservés
Aucune représentation ou reproduction, même partielle, autre que celles prévues à l’article L. 122-5 2° et 3° a)
du code de la propriété intellectuelle ne peut être faite sans l’autorisation expresse de Pearson France ou, le
cas échéant, sans le respect des modalités prévues à l’article L. 122-10 dudit code.
No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical,
including photocopying, recording or by any information storage retrieval system, without permission from
Pearson Education, Inc.

13:32:41 +0200 31/08/2012 15:55:53
CONTENU DU CD-ROM
Le DVD-ROM Adobe Dreamweaver CS6 Classroom in a Book contient l’ensemble des
fichiers nécessaires à la réalisation des leçons. Vous y trouverez aussi d’autres ressources
qui vous permettront d’améliorer vos connaissances d’Adobe Dreamweaver CS6. Le
contenu du CD-ROM est représenté par l’illustration suivante.
Peachpit Universal Mask updated 3/11/2011
116 mm print area, 23 mm center hole; fits these manufacturers’ specs:
Color Instructions
2-color:
• CDI • JVC • and all previous vendors
Pantone 375 C (green)
Pantone 485 C (red)
White flood: Yes
tered trademar k or a trademar

k of M a regi s
ther
icro i s ei
sof ow s
po
Cor ind
.W
rati ie s
on ntr
th
in ou c
eU er
. S. th o
an nd
d .a
U.S
/o
r
he
ot
nt
he
di
rc
ere
Leçons
ou
ist
ntr
Adobe® Dreamweaver ® CS6 eg

ie s
,r
.
ple
f Ap
CLASSROOM IN A BOOK® rk o
ema
WINDOWS®/MAC OS®
a t r ad
Les fichiers de chaque

m s Incor porated . Macintosh i s
leçon sont regroupés

dans le dossier Lessons.
Copiez-les sur votre
disque dur avant de
e Sy s t e
Ad o b
commencer une leçon.

s of
ar k
© 2012 Adobe Systems Incorporated

dem
All rights reserved. Made in the USA.

tra
ISBN-13: 978-0-321-82245-1
are
ISBN-10: 0-321-82245-5
er
06/12
av
we
m
ea
Dr
nd
ka
oo
aB
in
om
sro
,C las
o go
be l
Ad o
, the
Ad o b e
0321822455_ADreamweaverCS6CIB_Disc.indd 1 3/30/12 10:47 AM
Ressources en ligne
Un seul fichier HTML
regroupe les liens vers
l’Aide à la commu-
nauté Adobe, les pôles
d’assistance produits et
le service client, Adobe
Press, les programmes
de certification Adobe,
Adobe TV, et d’autres res-
sources en ligne très utiles.
Il suffit de l’ouvrir dans
votre navigateur web et de
cliquer sur les liens. Cette
page contient également
un lien particulier à la page
produit de ce livre, sur
laquelle vous trouverez
des mises à jour et du
contenu supplémentaire.

13:32:41 +0200 31/08/2012 15:55:55
SOMMAIRE
INTRODUCTION IX
La collection Classroom in a Book IX
TinyURL IX
Conditions requises X
Installation du programme X
Copie des fichiers Classroom in a Book X
Ordre recommandé pour les leçons XI
Démarrage instantané XI
Configuration de l’espace de travail XIII
Instructions Windows et Macintosh XIII
Trouver des informations sur Dreamweaver XIV
Vérification des mises à jour XIV
Ressources complémentaires XIV
Certification Adobe XVI
1 PERSONNALISER SON ESPACE DE TRAVAIL 3

Visite guidée de l’espace de travail 4
Permuter et fractionner les vues 5
Travailler avec des panneaux 7
Sélectionner un espace de travail 11
Ajuster les barres d’outils 13
Personnaliser les préférences 13
Créer des raccourcis clavier personnalisés 14
Utiliser l’inspecteur Propriétés 15
2 LES BASES DU HTML 19

Qu’est-ce que le HTML ? 20
De quand date le HTML ? 20
Écrire son propre code HTML 22
IV Sommaire

13:32:41 +0200 31/08/2012 15:55:56
Comprendre la syntaxe HTML 22
Codes HTML 4 fréquemment utilisés 30
Introduction au HTML5 32
3 LES BASES DES CSS 39

Qu’est-ce que les CSS ? 40
Mises en forme HTML et CSS 41
Styles HTML par défaut 42
Le modèle de boîte CSS 45
Mise en forme du texte 46
Mise en forme des objets 55
Multiples, classes et ID 64
4 CRÉER UNE MISE EN PAGE 71

Les bases de la conception web 72
Travailler avec des vignettes et des maquettes en fil de fer 75
Définir un site Dreamweaver 78
Utiliser l’écran de bienvenue 79
Observer le fichier terminé 80
Insérer de nouveaux composants 87
Modifier la largeur et la couleur d’arrière-plan de la page 93
Modifier le contenu et le formatage existants 95
Insérer un espace réservé pour une image 100
Insérer du texte de remplissage 101
Modifier le pied de page 101
Vérifier la compatibilité avec les navigateurs 102
5 TRAVAILLER AVEC DES FEUILLES DE STYLE CSS 105

Travailler avec le panneau Styles CSS 106
Travailler avec des polices 110
Utiliser des images pour des effets graphiques 113
Créer des nouvelles règles CSS 115
Créer un menu interactif 122
ADOBE DREAMWEAVER CS6 CLASSROOM IN A BOOK V

13:32:41 +0200 31/08/2012 15:55:56
Modifier le comportement des liens hypertexte 125
Créer des colonnes factices 128
Déplacer des règles vers une feuille de style externe 130
Créer des feuilles de style pour d’autres supports 132
Afficher la barre d’outils Rendu du style 132
6 TRAVAILLER AVEC DES MODÈLES 141

Créer un modèle à partir d’une mise en page existante 143
Insérer des régions modifiables 144
Générer des pages enfants 146
Mettre à jour un modèle 149
Utiliser des éléments de bibliothèque 152
Utiliser des inclusions côté serveur 157
7 TRAVAILLER AVEC DU TEXTE, DES LISTES ET DES TABLEAUX 167

Créer et mettre en forme du texte 170
Créer des retraits de texte 178
Créer et mettre en forme des tableaux 181
Vérifier l’orthographe de ses pages web 195
Rechercher et remplacer du texte 197
8 TRAVAILLER AVEC DES IMAGES 203

Rappel sur les bases de l’imagerie web 204
Insérer une image 210
Ajuster la position des images avec des classes CSS 212
Travailler avec le panneau Insertion 213
Utiliser Bridge pour insérer des images 215
Insérer des types de fichiers incompatibles 218
Travailler avec des objets dynamiques Photoshop 221
Copier et coller des images de Photoshop et Fireworks 223
Insérer des images par glisser-déposer 227
Optimiser les images avec l’inspecteur Propriétés 227
VI Sommaire

13:32:41 +0200 31/08/2012 15:55:57
9 TRAVAILLER AVEC LES ÉLÉMENTS DE NAVIGATION 233
Notions de base sur les liens hypertexte 234
Créer des liens hypertexte internes 237
Créer un lien image 240
Créer un lien externe 241
Configurer des liens de messagerie 243
Cibler des éléments de page 244
Insérer des barres de menus Spry 248
Vérifier la page 265
10 AJOUTER DE L’INTERACTIVITÉ 269

Découvrir les comportements Dreamweaver 270
Travailler avec des comportements Dreamweaver 273
Travailler avec des widgets Accordéon Spry 279
Personnaliser un accordéon Spry 282
11 TRAVAILLER AVEC L’ANIMATION WEB ET LA VIDÉO 287

Comprendre l’animation web et la vidéo 288
Ajouter une animation web à une page 290
Ajouter une vidéo web à une page 293
12 TRAVAILLER AVEC DES FORMULAIRES 301

En apprendre plus sur les formulaires 303
Ajouter un formulaire à une page 305
Insérer des éléments de formulaire texte 306
Insérer des cases à cocher 315
Créer des boutons radio 317
Incorporer des zones de texte 319
Travailler avec des listes 320
Ajouter un bouton d’envoi 322
ADOBE DREAMWEAVER CS6 CLASSROOM IN A BOOK VII

13:32:41 +0200 31/08/2012 15:55:58
Spécifier une action de formulaire 324
Transmettre les données par e-mail 326
Mettre en forme les formulaires 329
13 TRAVAILLER AVEC DES DONNÉES EN LIGNE 335

Travailler avec du contenu dynamique 336
Utiliser des données HTML et XML 337
Travailler avec des données XML 345
Choisir un modèle de serveur 348
Configurer un serveur web local 349
Configurer un serveur d’évaluation 350
Créer des applications de base de données 352
14 CRÉER DES PAGES DYNAMIQUES AVEC DES DONNÉES 361

Créer des pages avec ASP, ColdFusion ou PHP 362
Afficher des données d’une base de données 367
Créer un ensemble de pages Principale/Détails 372
Mettre en forme des données dynamiques 380
Créer une page de détails 384
15 PUBLIER SON SITE SUR LE WEB 389

Définir un site distant 390
Voiler des dossiers et des fichiers 396
Emballage final 398
Mettre à jour des liens 400
Publier le site 402
Synchroniser les sites local et distant 404
TINYURL 408
INDEX 410
VIII Sommaire

13:32:41 +0200 31/08/2012 15:55:58
INTRODUCTION
Adobe Dreamweaver CS6 est le programme de création web leader du marché. Que
vous créiez des sites web pour gagner votre vie ou que vous cherchiez à en créer pour
votre propre affaire, Dreamweaver offre tous les outils requis pour obtenir des résultats
de qualité professionnelle.
La collection Classroom in a Book

Adobe Dreamweaver CS6 Classroom in a Book fait partie de la série officielle des
ouvrages de formation sur les logiciels de graphisme et de publication développés avec
l’aide des experts des produits Adobe.
Les leçons sont conçues pour favoriser un apprentissage à votre rythme. Si vous débutez
avec Dreamweaver, vous découvrirez les notions élémentaires qui vous permettront
de prendre en main ce programme. Si vous êtes un utilisateur expérimenté, vous vous
familiariserez avec de nombreuses fonctionnalités avancées et découvrirez notamment
des astuces et des techniques d’utilisation de la dernière version de Dreamweaver.
Si chaque leçon propose des instructions pas à pas pour créer un projet spécifique,
vous aurez toute liberté d’explorer d’autres possibilités et d’expérimenter le programme
par vous-même. Vous pouvez suivre la progression de ce manuel ou ne consulter que
les leçons qui correspondent plus précisément à vos intérêts et à vos besoins. Chaque
leçon s’achève par une section de révision qui résume les thèmes abordés.
TinyURL
À plusieurs endroits dans ce livre, nous faisons référence à des informations externes
disponibles sur Internet. Les URL (Uniform Resource Locator) pour ces informations
sont souvent longues et complexes, aussi avons-nous proposé à la place des URL
raccourcies (tinyURL) personnalisées, par souci pratique. Malheureusement, ces URL
expirent parfois au bout d’un certain temps et ne fonctionnent plus. Si vous constatez
que c’est le cas de l’une d’entre elles, retrouvez l’URL originale dans l’Annexe.
ADOBE DREAMWEAVER CS6 CLASSROOM IN A BOOK IX
00a-CIABDreamweaverCS6FR.indd IX 22/10/12 16:55
customer 571196 at 2016-08-08

13:32:41 +0200
Conditions requises
Avant de commencer à utiliser Adobe Dreamweaver CS6 Classroom in a Book, vous
devez connaître le fonctionnement de votre ordinateur et de son système d’exploitation.
Assurez-vous que vous savez vous servir d’une souris, d’un menu standard et d’une
commande, et que vous êtes capable d’ouvrir, d’enregistrer et de fermer un fichier.
Si vous devez revoir ces techniques, consultez la documentation en ligne ou papier
fournie avec votre documentation Windows ou Mac OS.
Installation du programme
Avant de suivre les exercices de ce livre, vérifiez que votre ordinateur possède la confi-
guration matérielle requise pour Dreamweaver CS6, qu’il est correctement configuré
et que tous les logiciels requis sont installés.
Le logiciel Dreamweaver CS6 d’Adobe doit être acheté séparément ; il n’est pas inclus
dans les fichiers de leçon qui accompagnent ce livre. Pour la configuration système
requise, consultez la page www.adobe.com/products/dreamweaver/tech-specs.html.
Installez Dreamweaver CS6 sur votre disque dur à partir du DVD de l’application
Dreamweaver CS6 (vous ne pouvez pas exécuter le programme depuis le disque dur)
ou depuis les fichiers d’installation que vous avez téléchargés sur le site d’Adobe. Pour
des instructions complètes sur l’installation du logiciel, consultez le fichier Lisez-moi
d’Adobe Dreamweaver CS6 sur le DVD de l’application ou en ligne à l’adresse www.
adobe.com/support.
Assurez-vous que votre numéro de série est accessible avant d’installer l’application.
Copie des fichiers Classroom in a Book

Si vous avez fait l’acquisition de la version e-book de cet ouvrage, vous pourrez télé-
charger les fichiers des leçons sur le site www.pearson.fr. L’identifiant ainsi que le mot
de passe pour y accéder sont indiqués à la dernière page de l’ouvrage. À chaque fois
qu’il sera fait mention du DVD-ROM dans l’ouvrage, référez-vous aux ressources que
vous aurez téléchargées.
Chaque leçon possède son propre dossier ; vous devez copier ces dossiers sur votre
disque dur pour suivre les exercices de chaque leçon. Il est essentiel que tous les dossiers
de leçons se trouvent regroupés dans un unique dossier sur votre disque dur. Si vous
suivez l’ordre recommandé des leçons, ce dossier maître doit servir de dossier racine
local du site, comme vous le verrez plus en détail à la Leçon 4, “Créer une mise en page”.
Pour installer les fichiers Classroom in a Book :
1. Insérez le DVD Classroom in a Book Adobe Dreamweaver CS6 dans le lecteur de
votre ordinateur.
X INTRODUCTION
00a-CIABDreamweaverCS6FR.indd X 22/10/12 16:55
customer 571196 at 2016-08-08

13:32:41 +0200
2. Naviguez jusqu’au lecteur de CD-ROM de votre ordinateur.
3. Si vous comptez suivre dans l’ordre toutes les leçons du livre, faites glisser le dossier
Lessons sur le disque dur de votre ordinateur. Sinon passez directement à l’étape 5.
Le dossier Lessons contient tous les dossiers de leçons individuelles et les autres
dossiers requis pour le suivi des exercices.
4. Renommez le dossier Lessons en l’appelant DW-CS6.
Ce dossier sera utilisé comme dossier racine local de votre site.
5. Si vous désirez suivre une ou plusieurs leçons de manière individuelle, copiez
chaque dossier de leçon sur votre disque dur sous forme de dossier séparé, en
fonction de vos besoins. Ensuite, passez à la section “Démarrage instantané” pour
plus d’informations sur la marche à suivre. Ne copiez pas un dossier de leçon dans
le dossier d’une autre leçon.
Les fichiers et les dossiers de chaque leçon ne peuvent pas être utilisés de manière
interchangeable. Pour des instructions spécifiques, consultez la section suivante.
Ordre recommandé pour les leçons

Les exercices proposés dans ce livre sont conçus pour vous guider de A à Z, du stade
débutant au stade intermédiaire, dans la conception, le développement et la production
de sites web. Chaque nouvelle leçon s’appuie sur les résultats des exercices précédents,
en reprenant les fichiers et les ressources déjà créés pour développer, en fin de compte,
un site web complet. Il est recommandé de suivre toutes les leçons dans l’ordre où elles
s’enchaînent afin de réussir chaque étape et de comprendre le mieux possible tous les
aspects de la conception web.
L’idéal, pour cette formation, est de commencer par la Leçon 1 et de poursuivre tout
au long du livre jusqu’à la Leçon 15. Comme chaque leçon contribue à produire des
fichiers et des ressources essentiels pour la suivante, il importe une fois lancé dans
cette voie de ne pas sauter de leçon ni même un exercice individuel. Cependant, bien
qu’elle soit idéale, cette méthode n’est peut-être pas réalisable pour chaque lecteur.
Il est donc possible, si vous le souhaitez, de suivre des leçons individuelles avec la
méthode Démarrage instantané décrite dans la prochaine section.
Démarrage instantané
Les utilisateurs qui n’ont pas le temps ou l’envie de suivre dans l’ordre chacune des
leçons du livre ou ceux qui rencontrent des difficultés avec une leçon particulière
peuvent recourir à une méthode de démarrage instantané qui facilite le suivi des leçons
individuelles hors séquence. Notez toutefois que, lorsque vous commencez à utiliser la
méthode Démarrage instantané, vous devez l’utiliser pour toutes les leçons suivantes.
Par exemple, si vous réalisez un démarrage instantané à la Leçon 6, vous devrez faire
de même à la Leçon 7 et ainsi de suite. Dans bien des cas, les fichiers essentiels requis
ADOBE DREAMWEAVER CS6 CLASSROOM IN A BOOK XI
00a-CIABDreamweaverCS6FR.indd XI 22/10/12 16:55
customer 571196 at 2016-08-08

13:32:41 +0200
pour les exercices ultérieurs ont été créés dans les exercices des précédentes leçons
et peuvent ne pas être présents dans l’environnement de configuration proposé pour
le démarrage instantané de la leçon précédente.
Chaque dossier de leçon inclut tous les fichiers et ressources nécessaires pour réaliser
les exercices inclus dans cette leçon ; il contient également les fichiers finis, les fichiers
placés et les fichiers personnalisés de modèle et de bibliothèque, mais pas toujours
un jeu complet de fichiers qui pourrait avoir été utilisé ou complété dans les autres
leçons. Ces dossiers pourront donner l’impression de contenir des fichiers dupliqués.
En réalité, ces fichiers et ces ressources ne peuvent le plus souvent pas être utilisés de
manière interchangeable dans les autres leçons et exercices. Sinon vous risquez de ne
pas parvenir à réaliser l’objectif de l’exercice.
La méthode de démarrage instantané pour compléter les leçons individuelles traite
chaque dossier comme un site web autonome. Pour opérer un démarrage instantané à
partir d’une leçon, copiez le dossier de la leçon sur votre disque dur et créez un nouveau
site pour cette leçon avec la boîte de dialogue Configuration du site. Ne définissez pas
des sites en utilisant des sous-dossiers de sites existants. Conservez vos sites et vos
ressources dans leurs dossiers d’origine pour éviter tout conflit. L’une des possibilités
consiste à organiser les dossiers de leçons ainsi que vos propres dossiers de sites dans
un unique dossier maître appelé webs ou sites vers la racine de votre disque dur. Mais
évitez d’utiliser le dossier d’application de Dreamweaver ou tout autre dossier qui
contient un serveur web, comme Apache, ColdFusion ou IIS (Internet Information
Services) qui sont décrits plus en détail aux leçons 13 et 14.
Si cela vous convient mieux, n’hésitez pas à utiliser la méthode de démarrage instantané
pour chacune des leçons.
Pour configurer un site de démarrage instantané, procédez de la manière suivante :
1. Choisissez Site > Nouveau site.
La boîte de dialogue Configuration de site apparaît.
2. Dans le champ Nom du site, tapez le nom de la leçon, comme lesson06.
3. À côté du champ Dossier du site, cliquez sur l’icône Parcourir ( ). Naviguez
jusqu’au dossier de leçon que vous avez copié depuis le DVD Adobe Dreamweaver
CS6 Classroom in a Book et cliquez sur Sélectionner/Choisir.
4. Cliquez sur la flèche ( ) à côté de la catégorie Paramètres avancés pour révéler les
onglets listés à cet endroit. Sélectionnez la catégorie Infos locales.
5. À côté du champ Dossier des images par défaut, cliquez sur l’icône Parcourir.
Lorsque la boîte de dialogue apparaît, naviguez jusqu’au dossier Images contenu
dans le dossier de leçon et cliquez sur Sélectionner/Choisir.
6. Dans la boîte de dialogue Configuration de site, cliquez sur Enregistrer.
7. Le nom du site actif apparaît dans le menu déroulant des sites en haut du panneau
Fichiers. Si nécessaire, appuyez sur F8/Cmd+Maj+F pour afficher le panneau
Fichiers et sélectionnez le site web désiré dans le menu déroulant.
XII INTRODUCTION
00a-CIABDreamweaverCS6FR.indd XII 22/10/12 16:55
customer 571196 at 2016-08-08

13:32:41 +0200
Ces étapes devront être répétées pour chaque leçon qui fera l’objet d’un démarrage
instantané. Pour obtenir une description plus complète de la configuration d’un site
dans Dreamweaver, consultez la Leçon 4. Rappelez-vous que, si vous utilisez la méthode
“Starter” pour toutes les leçons, vous risquez de ne jamais finir avec un ensemble
complet des fichiers de site dans aucun dossier individuel une fois terminé.
Configuration de l’espace de travail

Dreamweaver inclut un certain nombre d’espaces de travail adaptés aux différents
types de configurations d’ordinateur et de flux de travail. Pour utiliser ce livre, l’espace
de travail recommandé est la configuration Designer.
1. Dans Dreamweaver CS6, localisez la barre d’application. Si nécessaire, choisissez
Fenêtre > Barre d’application pour l’afficher.
2. L’espace de travail par défaut s’appelle Designer. S’il n’est pas affiché, utilisez le
menu déroulant de la barre d’application pour le choisir.
3. Si l’espace de travail par défaut a été modifié et que certaines barres d’outils et
certains panneaux ne sont pas visibles (comme dans les figures du livre), choisissez
Fenêtre > Espace de travail > Réinitialiser Designer pour restaurer la configuration
par défaut.
La plupart des figures dans ce livre présentent l’espace de travail Designer. Lorsque
vous terminez les leçons, testez les différents espaces de travail et voyez celui qui vous
convient le mieux.
Pour obtenir une description plus détaillée des espaces de travail Dreamweaver,
consultez la Leçon 1, “Personnaliser son espace de travail”.
Instructions Windows et Macintosh

Dans la plupart des cas, Dreamweaver se comporte de la même manière sous Windows
et Mac OS X. Il existe quelques différences mineures entre les deux versions, dues
principalement à des caractéristiques spécifiques aux plates-formes qui échappent au
contrôle du programme. La plupart ne sont que des différences de raccourcis clavier,
d’affichage des boîtes de dialogue ou de noms de boutons. Quand des commandes
spécifiques diffèrent, elles sont signalées dans le texte. Les commandes Windows sont
indiquées en premier, suivies de leurs équivalents Mac, par exemple : Ctrl+C/Cmd+C.
Toutes les commandes sont désignées par des abréviations courantes à chaque fois
que c’est possible, comme ceci :
WINDOWS MACINTOSH
Contrôle = Ctrl Commande = Cmd

Alternate = Alt Option = Opt
ADOBE DREAMWEAVER CS6 CLASSROOM IN A BOOK XIII
00a-CIABDreamweaverCS6FR.indd XIII 22/10/12 16:55
customer 571196 at 2016-08-08

13:32:41 +0200
Trouver des informations sur Dreamweaver
Pour obtenir des informations complètes et à jour sur les panneaux, les outils et les
autres fonctionnalités d’application de Dreamweaver, consultez le site web d’Adobe.
Choisissez Aide > Aide de Dreamweaver. L’application Aide Adobe s’affiche et télé-
charge les derniers fichiers d’aide du site web Community Help d’Adobe. Ces fichiers
sont mis en cache au niveau local afin que vous puissiez y accéder même lorsque vous
n’êtes pas connecté à Internet. Vous pouvez également télécharger une version PDF
des fichiers d’aide de Dreamweaver à partir de l’application Aide Adobe.
Pour des ressources complémentaires, comme des astuces, des techniques et les der-
nières informations sur le produit, consultez la page Aide et support de Dreamweaver
à l’adresse www.adobe.com/fr/support/dreamweaver.
Vérification des mises à jour

Adobe propose régulièrement des mises à jour logicielles. Vous pourrez les télécharger
à l’aide d’Adobe Updater, si vous disposez d’une connexion Internet active.
1. Dans Dreamweaver, choisissez Aide > Mises à jour. Le logiciel Adobe Updater
vérifie automatiquement la présence de mises à jour pour votre logiciel Adobe.
2. Dans la boîte de dialogue Adobe Updater, sélectionnez les mises à jour que vous
souhaitez installer, puis cliquez sur Télécharger et installer les mises à jour.
Pour les mises à jour du livre et les ressources complémentaires, visitez la page du livre
à l’adresse www.peachpit.com/dwcs6cib.
Ressources complémentaires
Adobe Dreamweaver CS6 Classroom in a Book ne remplace pas la documentation qui
accompagne le logiciel ni ne prétend être une référence exhaustive pour chacune des
fonctionnalités du programme. Seules les commandes et options utilisées dans les leçons
sont expliquées dans ce livre. Pour des informations complètes sur les fonctionnalités
du programme, reportez-vous aux ressources suivantes :
Community Help d’Adobe. Ce centre favorise les rencontres entre les utilisateurs
actifs de produits Adobe, les membres de l’équipe Adobe, les auteurs et les experts
pour fournir les informations les plus utiles, les plus pertinentes et les plus à jour
concernant les produits Adobe.
Pour accéder à Community Help ou invoquer l’Aide, appuyez sur F1 ou choisissez
Aide > Aide Dreamweaver.
Le contenu Adobe est mis à jour en fonction des réactions et des contributions de la
communauté. Vous pouvez ajouter des commentaires au contenu et dans les forums, en
créant des liens vers du contenu web, en publiant votre propre contenu via la fonction
XIV INTRODUCTION
00a-CIABDreamweaverCS6FR.indd XIV 22/10/12 16:55
customer 571196 at 2016-08-08

13:32:41 +0200
Publication de la communauté ou en participant au Livre des recettes (Cookbook
Recipes). Pour en apprendre plus sur les possibilités de contribution : http://www.
adobe.com/fr/support/chc/index.html.
Si vous souhaitez prendre connaissance des réponses aux questions fréquemment
posées concernant Community Help, consultez la page community.adobe.com/
help/profile/faq.html.
Centre d’aide et de support de Dreamweaver CS6 (www.adobe.com/support/dream-
weaver/). Vous pourrez y parcourir le contenu d’aide et de support sur adobe.com.
Les forums Adobe (forums.adobe.com/community/international_forums/francais)
vous permettent de discuter avec d’autres utilisateurs des produits Adobe, de poser
des questions ou de transmettre des réponses.
Adobe TV (tv.adobe.com/fr). Ressource vidéo en ligne qui rassemble des conseils
d’experts et des idées concernant les produits Adobe, dont une chaîne spéciale de
guide pratique pour apprendre à démarrer avec votre logiciel.
Adobe Design Center (www.adobe.com/fr/designcenter). Pôle de création Adobe
qui propose des articles choisis sur la conception ou les problèmes de conception, une
galerie présentant le travail des designers de haut niveau, des didacticiels et plus encore.
Adobe Developer Connection (www.adobe.com/fr/devnet). Source de choix pour
les articles techniques, les exemples de code et les vidéos pratiques qui couvrent les
produits et technologies Adobe pour les développeurs.
Ressources pour les enseignants (www.adobe.com/fr/education). Elles proposent
un trésor d’informations pour les enseignants qui dispensent des cours sur les logiciels
Adobe. Trouvez des solutions pour l’éducation à tous les niveaux, dont des cours
gratuits adoptant une approche intégrée pour l’apprentissage des logiciels Adobe et
utiles pour se préparer aux examens d’Associé certifié Adobe.
Vous pouvez aussi consulter ces liens utiles :
Adobe Marketplace & Exchange (adobe.com/cfusion/exchange – uniquement
en anglais) est un emplacement central pour trouver des outils, des services, des
extensions, des exemples de code et d’autres ressources pour compléter et étendre
vos produits Adobe.
La page d’accueil du produit Adobe Dreamweaver CS6 (www.adobe.com/products/
dreamweaver).
Adobe Labs (labs.adobe.com – uniquement en anglais) vous offre accès aux premières
versions des logiciels dernier cri ainsi qu’aux forums où vous pouvez interagir avec les
équipes de développement Adobe qui créent ces produits et d’autres membres de la
communauté qui partagent vos intérêts.
ADOBE DREAMWEAVER CS6 CLASSROOM IN A BOOK XV
00a-CIABDreamweaverCS6FR.indd XV 22/10/12 16:55
customer 571196 at 2016-08-08

13:32:41 +0200
Certification Adobe
Les programmes de formation Adobe sont conçus pour aider les utilisateurs Adobe à
améliorer et à promouvoir leurs compétences sur un produit. Il existe quatre niveaux
de certification :
• Associé certifié Adobe (Adobe Certified Associate, ACA) ;
• Expert certifié Adobe (Adobe Certified Expert, ACE) ;
• Formateur certifié Adobe (Adobe Certified Instructor, ACI) ;
• Centre de formation agréé Adobe (Adobe Authorized Training Center, AATC).
L’Associé certifié Adobe (ACA) certifie que les personnes possèdent les compétences
élémentaires pour planifier, concevoir, créer et gérer des communications efficaces
en utilisant différentes formes de médias numériques.
Le programme Expert certifié Adobe est un moyen pour les utilisateurs chevronnés de
valider la mise à niveau de leurs qualifications. La certification Adobe peut être mise
en avant pour l’obtention d’une augmentation, l’accès à un poste ou la promotion de
votre expertise.
Si vous êtes instructeur de niveau ACE, les programmes Formateur certifié Adobe
renforceront vos compétences et vous donneront accès à une vaste gamme de res-
sources Adobe.
Les centres de formation autorisés Adobe proposent des cours de formateurs et des
formations sur les produits Adobe délivrés exclusivement par des formateurs certifiés
Adobe. Un annuaire des centres est disponible à l’adresse http://partners.adobe.com/.
Pour plus d’informations sur les programmes certifiés Adobe, consultez la page www.
adobe.com/fr/support/certification/.
XVI INTRODUCTION
00a-CIABDreamweaverCS6FR.indd XVI 22/10/12 16:55
customer 571196 at 2016-08-08

13:32:41 +0200
00a-CIABDreamweaverCS6FR.indd XVII 22/10/12 16:55
customer 571196 at 2016-08-08

13:32:41 +0200
Personnaliser son
espace de travail 1
Dans cette leçon, vous allez vous familiariser avec l’interface de program-
mation de Dreamweaver CS6 (Creative Suite 6) et vous apprendrez à :
• changer de vue ;
• travailler avec les panneaux ;
• sélectionner un espace de travail ;
• ajuster des barres d’outils ;
• personnaliser les préférences ;
• créer des raccourcis clavier personnalisés ;
• utiliser l’inspecteur Propriétés.
Cette leçon vous prendra environ 20 minutes. Avant de commencer, assurez-

vous d’avoir copié les fichiers de la Leçon 1 sur votre disque dur, comme
indiqué dans la section “Guide de démarrage”, au début de ce livre.

13:32:41 +0200 26/09/2012 10:07:46
Visite guidée de l’espace de travail
Dreamweaver est l’éditeur HTML leader du marché et sa popularité est bien méritée.
Ce programme offre une incroyable gamme d’outils de conception et d’édition de code.
Dreamweaver a de quoi satisfaire tous les types d’utilisateurs.
Les programmeurs apprécieront la variété des améliorations intégrées dans l’environ-
nement en mode Code, tandis que les développeurs profiteront de la prise en charge
des langages ASP, PHP, ColdFusion et JavaScript, pour ne citer que ces exemples. Les
concepteurs graphistes s’émerveilleront de voir leur texte et leurs images s’afficher
précisément en WYSIWYG (What You See Is What You Get, littéralement “ce que vous
voyez, c’est ce que vous obtenez”) et feront ainsi l’économie des heures habituellement
passées à vérifier leurs pages dans différents navigateurs. Enfin, les novices apprécieront,
pour leur part, la simplicité d’usage de l’interface puissante du programme. Quel que
soit le type d’utilisateur auquel vous appartenez, Dreamweaver saura vous satisfaire
sans exiger de compromis.
L’interface de A B C
Dreamweaver D
propose un E
grand nombre
de panneaux et
de barres d’outils I
configurables. G
Prenez quelques F H
instants pour vous
familiariser avec
J
les noms de ces
composants.
A Barre des
menus
B Barre
d’application
C Menu de
l’espace de travail
D Barre de titre
du document K
E Barre d’outils M
Document L
F Barre d’outils
Code
G Vue Code
On pourrait s’attendre à ce qu’un programme qui propose tant d’options soit dense,
H Vue Création
I Panneau
lent et peu maniable. C’est pourtant tout le contraire. Dreamweaver se contrôle aisé-
Insertion ment à l’aide de panneaux ancrables et de barres d’outils, que vous pouvez afficher ou
J Panneau Styles masquer et organiser de multiples manières afin de créer votre espace de travail idéal.
CSS
K Sélecteurs de Dans cette leçon, vous allez découvrir l’interface de Dreamweaver et vous familiariser
balises avec certains de ses puissants mécanismes. Si vous souhaitez suivre les exemples,
L Panneau
Propriétés
choisissez Fichier > Ouvrir. Dans le dossier lesson01, sélectionnez start-here.html.
M Panneau Cliquez sur Ouvrir.
Fichiers
4 leçon 1 Personnaliser son espace de travail

13:32:41 +0200 26/09/2012 10:07:48
Permuter et fractionner les vues
Dreamweaver propose des environnements dédiés pour les programmeurs et les
concepteurs, ainsi qu’une option composite qui combine les deux.
Mode Création
La vue en mode Création oriente l’espace de travail de Dreamweaver sur son éditeur
WYSIWYG, en affichant la page sous une apparence comparable (mais non identique)
à celle qu’elle prendrait dans un navigateur. Pour activer le mode Création, cliquez sur
le bouton Création dans la barre d’outils Document.
Vue en mode
Création.
Mode Code
La vue en mode Code concentre l’espace de travail Dreamweaver exclusivement sur le
code HTML et divers outils de productivité pour la programmation. Pour y accéder,
cliquez sur le bouton Code dans la barre d’outils Document.
Vue en mode
Code.
Adobe dreamweaver CS6 Classroom in a Book 5

13:32:41 +0200 26/09/2012 10:07:49
Mode Fractionner
La vue en mode Fractionner propose un espace de travail composite qui offre simulta-
nément accès aux modes Code et Création. Les changements opérés dans une fenêtre
se répercutent instantanément dans l’autre. Pour accéder au mode Fractionner, cliquez
sur le bouton Fractionner dans la barre d’outils Document.
Vue en mode
Fractionner
(fractionnement
vertical).
Pour profiter de la largeur étendue du nouvel affichage en panneau plat, Dreamweaver

fractionne verticalement l’espace de travail, par défaut. Vous pouvez aussi désactiver le
fractionnement vertical dans le menu Affichage. Pour désactiver cette fonctionnalité,
choisissez Affichage > Fractionner verticalement.
Vue en mode
Fractionner
(fractionnement
horizontal).

13:32:41 +0200 26/09/2012 10:07:51
Travailler avec des panneaux
Si la plupart des commandes sont accessibles à partir des menus, bien des fonction-
nalités de Dreamweaver se trouvent aussi égrenées dans des panneaux et des barres
d’outils à sélectionner. Vous pouvez à l’envi afficher, masquer, réorganiser et ancrer
vos panneaux à l’écran. Il est même possible de les déplacer sur un deuxième ou un
troisième moniteur, si vous le souhaitez.
Groupement
standard des
panneaux.
Le menu Fenêtre liste tous les panneaux disponibles. Si vous ne voyez pas un panneau
à l’écran, sélectionnez-le à cet endroit. Une coche apparaît dans le menu pour indiquer
que le panneau est ouvert. À l’occasion, un panneau peut être caché derrière un autre
à l’écran et difficile à localiser. Dans ce cas, le simple fait de le sélectionner dans le
menu Fenêtre le replace devant les autres panneaux à l’écran.
Réduction des panneaux

Pour faire de la place aux autres panneaux ou accéder à des zones recluses de l’espace
de travail, il est possible de réduire ou de développer des panneaux individuels. Pour
réduire un panneau, double-cliquez sur l’onglet qui porte son nom. Pour le développer,
double-cliquez de nouveau sur son onglet.
Réduisez les
panneaux
flottants en
double-cliquant
sur leur onglet.

13:32:41 +0200 26/09/2012 10:07:53
Vous pouvez aussi réduire ou développer un panneau individuel d’une pile de panneaux
en double-cliquant sur son onglet.
Réduisez les
panneaux
individuels en
utilisant leur
onglet.
Pour faire de la place à l’écran, n’hésitez pas à réduire sous forme d’icônes des groupes
ou des piles de panneaux en double-cliquant sur leur barre de titre. Vous pouvez aussi
réduire les panneaux à l’état d’icônes en cliquant sur l’icône de double flèche ( ) dans
la barre de titre du panneau. Pour accéder à un panneau individuel réduit en icône,
double-cliquez sur l’icône ou le bouton. Le panneau sélectionné apparaît à gauche ou
à droite de l’espace de travail, selon la configuration de la fenêtre.
Séquence de
réduction en
icône.
Flottement
Un panneau groupé à d’autres peut aisément être rendu flottant : cliquez simplement
sur son onglet et faites-le glisser à l’écart du groupe.
Extraction d’un
panneau à l’aide
de son onglet.

13:32:41 +0200 26/09/2012 10:07:55
Glissement
Vous pouvez réorganiser la position d’un onglet de panneau en le faisant glisser vers
la position choisie dans le groupe.
Faites glisser
l’onglet pour
modifier sa
position.
Pour repositionner des panneaux, des groupes et des piles dans l’espace de travail,
faites-les glisser en cliquant sur leur barre de titre.
Faites glisser un
groupe ou une
pile de panneaux
vers une nouvelle
position.
Regroupement, empilement et ancrage

Créez des groupes personnalisés en faisant glisser les panneaux les uns sur les autres.
Lorsque vous déplacez votre panneau jusqu’à la position appropriée, Dreamweaver
surligne en bleu la “zone de dépôt” (voir la figure suivante). Relâchez le bouton de la
souris pour créer le nouveau groupe.
Créez de nou-
veaux groupes.

13:32:41 +0200 26/09/2012 10:07:57
Dans certains cas, vous aurez besoin de conserver deux panneaux visibles en même
temps. Pour empiler les panneaux, faites glisser l’onglet correspondant vers le haut
ou le bas d’un autre panneau. Lorsque la zone de dépôt s’affiche en bleu, relâchez le
bouton de la souris.
Créez des piles de
panneaux.
Les panneaux flottants peuvent être amarrés à droite, à gauche ou en bas de l’espace de
travail de Dreamweaver. Pour ancrer un panneau, un groupe ou une pile de panneaux,
faites glisser sa barre de titre vers le bord auquel vous souhaitez l’amarrer. Lorsque la
zone de dépôt s’affiche en bleu, relâchez le bouton de la souris.
Ancrez vos
panneaux.

13:32:41 +0200 26/09/2012 10:07:58
Sélectionner un espace de travail
Pour personnaliser rapidement l’environnement du programme, utilisez l’un des
espaces de travail prédéfinis de Dreamweaver ; ils ont été optimisés par des experts
afin de placer les outils requis à portée de main.
Dreamweaver CS6 inclut onze espaces de travail prédéfinis. Pour y accéder, sélection-
nez-les dans le menu Espaces de travail de la barre d’application.
Le menu Espaces
de travail.
Les utilisateurs de longue date de Dreamweaver choisiront l’espace de travail Classique,

qui affiche les panneaux et les barres d’outils qu’ils ont l’habitude de voir et d’utiliser
dans les précédentes versions du programme.
L’espace de travail
Classique.

13:32:41 +0200 26/09/2012 10:07:59
L’espace de travail Codeur concentre Dreamweaver sur le code HTML et ses outils
de programmation.
Codeur.
L’espace de travail Designer fournit un environnement optimal pour les concepteurs

graphistes.
Designer.

13:32:41 +0200 26/09/2012 10:08:01
Ajuster les barres d’outils
Certaines fonctionnalités du programme sont si utiles que vous les garderez constam-
ment à disposition sous forme de barres d’outils. Trois barres d’outils (Rendu du style,
Document et Standard) apparaissent à l’horizontale, en haut de la fenêtre de document.
La barre d’outils Codage, pour sa part, s’affiche à la verticale, mais uniquement dans
la fenêtre en mode Code. Vous aurez l’occasion de découvrir ces barres d’outils lors
des prochains exercices.
Rendu du style
Document
Standard
Navigation de l’explorateur
Codage
Affichez la barre d’outils désirée en la sélectionnant dans le menu Affichage.
Personnaliser les préférences

À force de travailler avec Dreamweaver, vous finirez par découvrir la disposition opti-
male des panneaux et des barres d’outils pour chacune de vos activités. Enregistrez ces
configurations dans un espace de travail personnalisé baptisé par vos soins.
Pour enregistrer un espace de travail personnalisé, créez vos configurations désirées,
choisissez Nouvel espace de travail dans le menu Espace de travail de la barre d’appli-
cation et donnez-lui un nom de votre choix.
Enregistrement
d’un espace
de travail
personnalisé.

13:32:41 +0200 26/09/2012 10:08:02
Créer des raccourcis clavier personnalisés
Dreamweaver permet aussi de créer des raccourcis clavier personnalisés et de changer
les raccourcis existants. Les raccourcis clavier sont chargés et conservés indépendam-
ment des espaces de travail personnalisés.
Existe-t-il une commande, indispensable à vos yeux, pour laquelle aucun raccourci
clavier n’est proposé ? Aucun problème : créez-le. Essayez ceci :
1. Choisissez Édition > Raccourcis clavier/Dreamweaver > Raccourcis clavier.
2. Cliquez sur le bouton Dupliquer le jeu pour créer un nouveau jeu de raccourcis.
3. Tapez un nom dans le champ Nom du jeu dupliqué. Cliquez sur OK.
4. Choisissez Commandes de menu dans le menu Commandes.

5. Optez pour Enregistrer tout dans la liste de commandes Fichier.
Vous utiliserez souvent, dans Dreamweaver, cette commande Enregistrer tout qui
ne possède pas encore de raccourci.
6. Insérez le curseur dans le champ Appuyer sur la touche. Appuyez sur Ctrl+Alt+S/
Cmd+Opt+S.
Un message d’erreur indique que la combinaison clavier choisie est déjà attribuée à
une commande. Vous pourriez la réattribuer, mais convenons d’en choisir une autre.

13:32:41 +0200 26/09/2012 10:08:03
7. Appuyez sur Ctrl+Alt+Maj+S/Ctrl+Cmd+S.
Cette combinaison n’est pas utilisée pour le moment, attribuez-la à la commande
Enregistrer tout.
8. Cliquez sur le bouton Changer.
Le nouveau raccourci est maintenant attribué à la commande Enregistrer tout.
9. Cliquez sur OK pour enregistrer la modification.

Vous venez de créer un raccourci clavier que vous utiliserez dans les leçons suivantes.
Utiliser l’inspecteur Propriétés

L’inspecteur Propriétés fait partie des outils vitaux pour votre productivité. En général,
ce panneau apparaît en bas de l’espace de travail. Il est contextuel et s’adapte au type
d’élément que vous sélectionnez.
Utiliser l’onglet HTML

Placez le curseur dans un passage du texte de la page. L’inspecteur Propriétés offre un
moyen rapide d’attribuer des balises HTML ou de formater le texte. Lorsque le bouton
HTML est sélectionné, vous pouvez appliquer des balises de titres ou de paragraphes,
mais aussi du gras, de l’italique, des puces, des numéros, des retraits ou d’autres mises
en forme et attributs.
L’inspecteur
Propriétés HTML.

13:32:41 +0200 26/09/2012 10:08:03
Utiliser l’onglet CSS
Cliquez sur le bouton CSS (Cascading Style Sheet, feuille de style en cascade) pour
accéder rapidement à des commandes permettant d’attribuer ou de modifier des
mises en forme CSS.
L’inspecteur
Propriétés CSS.
Propriétés d’image
Sélectionnez une image dans une page web pour accéder aux attributs d’image et aux
contrôles de mise en forme de l’inspecteur Propriétés.
L’inspecteur
Propriétés
d’image.
Propriétés de tableau
Pour accéder aux propriétés de tableau, insérez votre curseur dans un tableau et cli-
quez sur la balise table dans le sélecteur de balises en bas de la fenêtre de document.
L’inspecteur
Propriétés
tableau.

13:32:41 +0200 26/09/2012 10:08:04
Révisions
Questions
1. Comment peut-on accéder à la commande qui permet d’afficher ou de masquer
un panneau ?
2. Où trouve-t-on les boutons de modes Code, Création et Fractionner ?
3. Que peut-on enregistrer dans un espace de travail ?
4. Les espaces de travail chargent-ils également les raccourcis clavier ?
5. Que se passe-t-il dans l’inspecteur Propriétés lorsqu’on place le curseur sur différents
éléments de la page web ?
Réponses
1. Tous les panneaux sont listés dans le menu Fenêtre.
2. Ces boutons sont des composants de la barre d’outils Document.
3. Les espaces de travail peuvent enregistrer la configuration de la fenêtre de document,
les panneaux ouverts, ainsi que leur taille et leur emplacement à l’écran.
4. Non, les raccourcis clavier sont chargés et préservés indépendamment d’un espace
de travail.
5. L’inspecteur Propriétés s’adapte à l’élément sélectionné, en affichant des informations
pertinentes et des commandes de mise en forme.

13:32:41 +0200 26/09/2012 10:08:04
le HTMl forme l’épine dorsale du web et le squelette de vos pages web. il
structure internet et lui donne substance, et généralement on ne le voit pas.
Sans lui, le web n’existerait pas. dreamweaver possède de nombreuses fonc-
tionnalités qui permettent d’afficher, de créer ou de modifier rapidement et
efficacement le code HTMl.
18

13:32:41 +0200 26/09/2012 10:11:34
Les bases du HTML 2
Dans cette leçon, vous vous familiariserez avec le HTML et vous apprendrez à :
• écrire du code HTML à la main ;
• comprendre la syntaxe du HTML ;
• insérer des éléments de code ;
• formater du texte ;
• ajouter une structure HTML ;
• créer du HTML avec Dreamweaver.
Cette leçon vous prendra environ 45 minutes. Aucun fichier d’exemple n’est
associé aux exercices de cette leçon.
19

13:32:41 +0200 26/09/2012 10:11:34
Qu’est-ce que le HTML ?
“Quels autres programmes peuvent ouvrir un fichier Dreamweaver ?”
Cette question m’a été posée par un étudiant lors d’un de mes cours sur Dreamweaver.
Si la réponse est évidente pour un développeur expérimenté, la question elle-même
est révélatrice d’un problème fondamental pour l’enseignement et l’apprentissage de
la conception des pages web. La plupart des gens confondent le programme logiciel et
la technologie. Ils imaginent que l’extension .htm ou .html appartient à Dreamweaver
ou à Adobe. Par exemple, les graphistes de publications papier sont, pour leur part,
habitués à travailler avec des fichiers qui se terminent par .ai, .psd, .indd, etc. Ces
formats de fichiers sont des formats propriétaires créés par des programmes dotés
de capacités et de limitations bien spécifiques. Le but, dans la plupart des cas, est de
créer un document imprimable. Le programme dans lequel le fichier a été créé offre
la capacité d’interpréter le code qui produit la page imprimée. Les graphistes sont
habitués à obtenir des résultats très étranges lorsqu’ils tentent d’ouvrir ces formats
de fichiers dans un autre programme.
Le but du concepteur web consiste à créer une page web à afficher dans un navigateur.
La puissance ou les fonctionnalités du programme d’origine n’ont pas grand-chose
à voir avec l’affichage résultant dans le navigateur, car cet affichage dépend entiè-
rement du code HTML et de la manière dont le navigateur l’interprète. Si tel ou tel
programme peut écrire du bon ou du mauvais code, l’essentiel du travail reste effectué
par le navigateur lui-même.
Le Web est construit autour du langage HTML (HyperText Markup Language ou
langage de balisage hypertexte). Le langage et le format de fichier ne sont la propriété
d’aucun programme ou entreprise particuliers. Il s’agit d’un langage non propriétaire
en texte brut, qui peut être modifié dans n’importe quel éditeur de texte, sur tout sys-
tème d’exploitation et avec n’importe quel ordinateur. Dreamweaver est, au départ, un
éditeur HTML, même s’il est finalement bien plus que cela. Pour en tirer pleinement
parti, vous devez cependant bien comprendre ce qu’est le HTML et ce qu’il est capable
ou non de faire. Ce chapitre est une introduction concise au HTML et à ses capacités,
qui vous servira de base pour comprendre Dreamweaver.
De quand date le HTML ?

Le HTML et le premier navigateur ont été inventés au début des années 1990 par Tim
Berners-Lee, un scientifique qui travaillait au laboratoire de physique particulaire du
CERN (Conseil européen pour la recherche nucléaire), à Genève. Tim Berners-Lee a
développé cette technologie dans le but de partager des documents et des informations
techniques avec l’Internet balbutiant de l’époque. Il a partagé le HTML et le navigateur
qu’il venait d’inventer de manière ouverte, afin d’inciter la communauté scientifique
au sens large ainsi que d’autres utilisateurs à l’adopter et à contribuer eux-mêmes à
son développement. Le fait qu’il n’ait pas protégé par copyright ni tenté de vendre son
20 leçon 2 Les bases du HTML

13:32:41 +0200 26/09/2012 10:11:34
travail a été le prélude à un esprit d’ouverture et de fraternité sur le Web qui perdure
encore de nos jours.
Le langage que Berners-Lee a créé il y a plus de vingt ans était une structure bien
plus simple que celle que nous utilisons aujourd’hui, mais le HTML reste toujours
étonnamment simple à apprendre et à maîtriser. Aujourd’hui, le HTML en est à sa
version 4.01, qui a été officiellement adoptée en 1999. Elle est composée de 90 balises,
comme html, head, body, h1, p, etc. Les balises se notent entre chevrons, comme avec
<p>, <h1> et <table>. Ces balises sont utilisées pour entourer (ou “baliser”) le texte et
les images afin de permettre aux navigateurs de les afficher d’une certaine manière.
Le code HTML est considéré comme équilibré quand le balisage contient à la fois
une balise d’ouverture (<...>) et une balise de fermeture (</...>). Quand deux balises
apparaissent de cette manière, on considère qu’il s’agit d’un élément.
Certains éléments servent à créer des structures de page, d’autres à formater du texte
et d’autres encore à rendre la page interactive ou programmable. Si Dreamweaver
évite d’avoir à écrire manuellement la majeure partie du code, il est toujours considéré
comme essentiel pour tout concepteur web débutant d’apprendre à lire et à interpréter
le code HTML. Et il arrive parfois que la seule solution pour trouver une erreur dans
votre page web consiste à taper du code manuellement.
Voici à la figure suivante la structure de base d’une page web.
Structure de base du code HTML
Balise d’ouverture Balise de fermeture
<html>
<head>
En-tête <title>HTML Basics for Fun and Profit</title>
</head>
Racine <body>
<h1>Welcome to my first webpage</h1>
Corps
<hr />
</body>
</html> Trait horizontal (balise vide)
Le balisage HTML bien structuré est constitué d’une balise d’ouverture et d’une balise de
fermeture. Les balises sont délimitées par des chevrons (< et >). La balise de fermeture
se crée en reproduisant la balise d’ouverture et en ajoutant une barre oblique (/) après
le signe inférieur du début. Les balises vides, comme celle du trait horizontal, peuvent
être écrites avec une notation abrégée, comme indiqué dans la figure.
Vous serez peut-être surpris d’apprendre que les seuls mots de ce code qui s’affichent
dans le navigateur web sont “Welcome to my first webpage”. Le reste du code crée la
structure de page et la mise en forme du texte. Tel un iceberg, la plupart du contenu
de la page web elle-même reste caché.

13:32:41 +0200 26/09/2012 10:11:35
Écrire son propre code HTML
L’idée d’écrire du code peut être rébarbative pour certains, mais il est, en fait, bien plus
facile qu’on ne le croit de créer des pages web. Au cours des exercices qui suivent, vous
allez découvrir le fonctionnement du HTML en créant une page web simple avec du
contenu texte et une mise en forme.
� Note : Vous 1. Lancez le Bloc-notes (Windows) ou TextEdit (Mac).
pouvez utiliser
l’éditeur texte de 2. Tapez le code suivant dans la fenêtre de document vide :
votre choix pour <html>
ces exercices,
<body>
mais assurez-vous
d’enregistrer vos Welcome to my first web page
fichiers au format </body>
texte brut. </html>
� Astuce : Dans TextEdit, vous devrez peut-être choisir Format > Formater en texte brut avant de
pouvoir enregistrer le fichier en .html.
3. Enregistrez le fichier sur le bureau sous le nom firstpage.html.

� Note : Certains 4. Lancez Chrome, Firefox, Internet Explorer, Safari ou tout autre navigateur web
éditeurs de installé sur votre ordinateur.
texte essaieront
de changer 5. Choisissez Fichier > Ouvrir. Naviguez jusqu’au bureau et sélectionnez firstpage.
l’extension html, puis cliquez sur OK/Ouvrir.
.html ou vous
demanderont de Félicitations ! Vous venez de créer votre première page web. Comme vous l’avez vu,
confirmer votre il ne faut pas beaucoup de code pour créer une page web utilisable.
choix.
Editeur de texte. Navigateur.
Comprendre la syntaxe HTML

En ajoutant du contenu à votre nouvelle page web, vous allez découvrir certains des
aspects importants de la syntaxe HTML :
1. Revenez à l’éditeur de texte sans fermer le navigateur.
2. Placez votre curseur à la fin du texte Welcome to my first web page et appuyez sur
Entrée pour insérer un saut de paragraphe.
3. Tapez Making web pages is fun et appuyez cinq fois sur la barre d’espace pour
insérer cinq espaces. Finissez en tapant and easy! sur la même ligne.

13:32:41 +0200 26/09/2012 10:11:35
4. Enregistrez le fichier.
5. Repassez au navigateur et actualisez la fenêtre pour charger la page mise à jour.
Comme vous pouvez le voir, le navigateur affiche le nouveau texte, mais il ignore le
saut de paragraphe entre les deux lignes ainsi que les espaces supplémentaires. En
fait, vous pouvez ajouter des centaines de sauts de paragraphe entre les lignes et des
dizaines d’espaces entre chaque mot sans que l’affichage du navigateur ne change. En
effet, celui-ci est programmé pour ignorer l’espace supplémentaire et ne considérer que
les éléments du code HTML. En insérant une balise ici ou là, vous pouvez facilement
corriger l’affichage du texte.
Insérer du code HTML

Dans cet exercice, vous allez insérer des balises HTML pour modifier l’affichage du texte :
1. Revenez à l’éditeur de texte.
2. Ajoutez au texte les balises signalées en gras ci-après : � Note : L’une
des règles d’or à
<p>Making web pages is fun and easy!</p> considérer pour
Pour ajouter un espace entre les lettres ou tout autre caractère spécial dans une l’utilisation des
entités consiste
ligne de texte, le HTML fournit des éléments de code appelés entités. Les entités à savoir si vous
s’insèrent dans le code autrement que les balises. Par exemple, la méthode pour pouvez entrer
insérer une espace insécable consiste à taper l’entité . un caractère
en utilisant
3. Remplacez les cinq espaces dans le texte par des espaces insécables, afin que le le clavier 101
code ressemble à l’exemple suivant : touches standard.
Si le caractère
<p>Making web pages is fun and easy!</p> n’apparaît
pas, il faut
4. Enregistrez le fichier. Revenez au navigateur et rechargez la page ou actualisez probablement
son affichage. utiliser une entité.
Le navigateur affiche maintenant le saut de paragraphe et l’espacement désiré.

Comme les balises
et les entités ont
été ajoutées,
le navigateur
peut afficher
la structure de
paragraphe et
l’espacement
désirés.

13:32:41 +0200 26/09/2012 10:11:36
Formater du texte avec du HTML
Les balises servent souvent à plusieurs choses. En plus de créer des structures de
paragraphe et des espacements comme expliqué précédemment, elles permettent un
formatage simple du texte, en plus d’identifier les niveaux d’importance des différentes
parties du contenu de vos pages. Par exemple, le HTML propose six balises de titres
(<h1> à <h6>) utilisées pour distinguer les titres des paragraphes normaux. En plus
de mettre en forme le texte différemment du texte des paragraphes, les balises leur
apportent une signification supplémentaire. Les balises de titre sont automatiquement
mises en forme en gras et souvent avec une taille de police plus grande. Le niveau de
titre joue aussi un rôle : le fait d’utiliser la balise <h1> identifie le titre comme étant
le plus important par défaut. Dans cet exercice, vous allez ajouter une balise de titre
à la première ligne :
2. Ajoutez au texte les balises en gras suivantes :
<h1>Welcome to my first web page</h1>
3. Enregistrez le fichier. Repassez au navigateur et rechargez la page ou actualisez

son affichage.
Observez le changement d’affichage du texte. Il est maintenant plus grand et en gras.
Les concepteurs
web utilisent les
balises de titre
pour identifier
l’importance
d’un contenu
spécifique et
améliorer le
classement de
leur site dans
Google, Yahoo! et Appliquer un formatage incorporé
d’autres moteurs
de recherche. Jusqu’ici, toutes les balises que vous avez utilisées fonctionnent comme des éléments
de paragraphe ou des éléments autonomes. On les appelle des éléments de bloc. Le
HTML permet d’appliquer une mise en forme et une structure au contenu situé (ou
“incorporé”) à l’intérieur du flot d’une autre balise. Le code incorporé est typiquement
utilisé pour appliquer un style gras ou italique à un mot ou à une portion de paragraphe.
� Note : Prêtez
particulièrement Dans cet exercice, vous allez appliquer un formatage incorporé :
attention à la
manière dont
les balises sont 2. Ajoutez au texte les balises suivantes :
imbriquées afin
de les refermer <p>Making web pages is fun <strong>
correctement. <em>and easy!</em></strong></p>
Vous remarquerez
ainsi que la balise 3. Enregistrez le fichier. Revenez au navigateur et rechargez la page ou actualisez
<em> est refermée son affichage.
avant que la balise
<strong> ne le L’essentiel du formatage, qu’il soit incorporé ou non, s’applique de préférence en uti-
soit. lisant des feuilles de style CSS (Cascading Style Sheets). Les balises <strong> et <em>

13:32:41 +0200 26/09/2012 10:11:36
font partie des rares moyens encore acceptables d’appliquer un formatage incorporé
en n’utilisant que des éléments de code HTML. Techniquement, ces éléments sont
plutôt destinés à ajouter une signification sémantique au contenu texte, mais l’effet
est le même : le texte apparaît par défaut en gras ou en italique. Un consensus s’est
établi parmi les acteurs du Web, qui s’efforcent de séparer le contenu et sa présen-
tation ou sa mise en forme. Consultez la Leçon 3, “Les bases des CSS”, pour obtenir
des explications complètes sur le rôle des CSS dans la conception de pages conforme
aux standards du Web.
Les balises
<strong> et <em>
sont utilisées en
lieu et place des
balises <b> (gras)
et <i> (italique)
parce qu’elles
apportent une
signification
sémantique
Ajouter une structure améliorée pour
les visiteurs avec
La plupart des pages web contiennent au moins trois éléments fondamentaux : une des difficultés
racine (normalement, <html>), un corps et un en-tête. Ces éléments créent la struc- de vision ou
ture sous-jacente essentielle de la page web. L’élément racine contient tout le code d’utilisation,
mais le résultat
et le contenu de la page web. Il est utilisé pour déclarer au navigateur et à toutes les
est identique
applications de navigateur quels types d’éléments de code se trouveront dans la page. pour l’utilisateur
L’élément <body> contient tout le contenu visible, comme le texte, les tableaux, les moyen.
images, les animations, etc. L’élément <head> contient du code qui réalise des tâches
d’arrière-plan essentielles, comme des informations relatives au style ou aux liens.
La page d’exemple que vous avez créée ne contient pas d’élément <head>. Une page web
peut être utilisée sans cette section, mais il serait difficile d’y intégrer des fonctionna-
lités avancées sans en inclure une. Dans cet exercice, vous allez ajouter des éléments
<head> et <title> à votre page web :

2. Ajoutez au texte les balises et le contenu ci-après :
<html>
<head>
<title>HTML Basics for Fun and Profit</title>
</head>
<body>
3. Enregistrez le fichier. Revenez au navigateur et rechargez la page ou actualisez

son affichage.
Avez-vous remarqué ce qui a changé ? La différence n’est pas forcément évidente au
premier regard. Observez la barre de titre de la fenêtre du navigateur. Les mots HTML
Basics for Fun and Profit apparaissent maintenant, comme par magie, au-dessus de
votre page web. Vous avez créé cet affichage en ajoutant l’élément <title>. Il ne s’agit
pas simplement d’un gadget sympa. C’est aussi bon pour vos affaires. Google, Yahoo!

13:32:41 +0200 26/09/2012 10:11:37
et les autres moteurs de recherche cataloguent l’élément <title> de chaque page et
l’utilisent, entre autres critères, pour classer les pages web. Le contenu du titre est
l’un des éléments qui s’affichent généralement dans les résultats d’une recherche. Une
page au titre bien choisi peut être mieux classée qu’avec un mauvais titre ou sans titre.
Tâchez d’utiliser des titres courts mais explicites. Par exemple, le titre “Page d’accueil
ABC” ne fournit pas véritablement d’information utile. Le titre “Bienvenue sur le site
d’ABC Corporation” est déjà plus approprié. Consultez d’autres sites web (notamment
ceux de pairs ou de concurrents) afin de voir comment ils intitulent leurs pages.
Le contenu de la
balise <title>
apparaît dans
la barre de titre
du navigateur
quand la page est
actualisée.
Écrire du code HTML dans Dreamweaver

La question inévitable est donc : “Si l’on peut écrire du HTML dans un éditeur de
texte, pourquoi utiliser Dreamweaver ?” Si les treize leçons qui suivent promettent
d’apporter une réponse complète à cette question, il est aussi possible de faire une
rapide démonstration. Dans cet exercice, vous allez recréer la même page web en
utilisant Dreamweaver.
1. Lancez Dreamweaver CS6.
2. Choisissez Fichier > Nouveau.
3. Dans la première colonne de la fenêtre Nouveau document, sélectionnez l’option
Page vierge.
4. Dans la colonne Type de page, choisissez HTML et, dans la colonne Mise en forme,
choisissez <aucun(e)>. Cliquez sur Créer.
Une nouvelle fenêtre de document s’ouvre dans Dreamweaver. Elle peut par défaut
s’afficher avec l’un des trois modes d’affichage suivants : Code, Création ou Fractionner.
5. S’il n’est pas déjà sélectionné, cliquez sur le bouton Code dans le coin supérieur
gauche de la fenêtre de document.
La première chose à remarquer dans la fenêtre en mode Code est que Dreamweaver
offre d’emblée une belle longueur d’avance sur n’importe quel éditeur de texte. La
structure de base de la page est déjà en place, avec notamment la racine, l’en-tête,
le corps et même les balises de titres, pour ne citer que celles-là. Dreamweaver
vous laisse simplement la tâche d’ajouter vous-même le contenu.

13:32:41 +0200 26/09/2012 10:11:37
Vue Code
Vue Fractionner
Vue Création
Les avantages
de l’utilisation
de Dreamweaver
pour créer du
HTML sont
d’emblée
évidents : une
grande partie
de la structure
de page est déjà
créée.
6. Insérez le curseur après la balise d’ouverture <body> et tapez Welcome to my

second page après la balise.
Avec Dreamweaver, rien de plus simple que de formater la première ligne comme
un titre de premier niveau.
7. Placez le curseur au début du texte “Welcome to my second page”. Tapez < pour
débuter la saisie de l’élément <h1>.
Dreamweaver ouvre automatiquement une liste déroulante d’éléments de code
compatibles. Il s’agit de la fonctionnalité de suggestion de code de Dreamweaver.
Lorsque l’Indicateur de code est activé, Dreamweaver propose une liste déroulante
des éléments HTML, CSS et JavaScript utilisables.
8. Tapez h et observez la fenêtre d’Indicateur de code.

13:32:41 +0200 26/09/2012 10:11:38
Dreamweaver filtre la liste d’indications de code pour ne garder que les éléments
qui commencent par “h”.
9. Dans la liste des indications, double-cliquez sur h1 pour l’insérer dans le code.
Tapez > pour fermer l’élément.
10. Placez le curseur à la fin du texte. Tapez </ à la fin de la phrase.
Vous remarquerez que Dreamweaver referme automatiquement l’élément <h1>.
La plupart des programmeurs ajoutent cependant les balises en cours de frappe,
comme dans les étapes suivantes.
11. Appuyez sur Entrée pour insérer un saut de ligne. Tapez <.
12. Tapez p et appuyez sur Entrée pour insérer l’élément paragraphe. Tapez > pour
refermer la balise.
13. Tapez Making web pages in Dreamweaver is even more fun! et tapez </ pour
refermer l’élément <p>.
Vous êtes déjà las de taper du code à la main ? Dreamweaver propose plusieurs
moyens de formater votre contenu.
14. Sélectionnez le mot more. Dans l’inspecteur Propriétés, cliquez sur les boutons G
et I pour appliquer au texte les balises <strong> et <em>. Ces balises produisent
une mise en forme en gras et en italique du texte.
Il manque quelque chose ?

En cherchant les boutons G et I à l’étape 13, avez-vous constaté qu’ils manquaient ? Lorsque vous opé-
rez des modifications en mode Code, l’inspecteur Propriétés doit parfois être actualisé avant que vous
puissiez accéder à ces commandes de mise en forme. Cliquez simplement sur le bouton Actualiser et
les commandes de mise en forme apparaîtront.
Il ne reste que deux tâches à réaliser pour compléter votre nouvelle page. Dreamweaver
a créé l’élément <title> et y a inséré le texte “Document sans titre”. Vous pouvez
sélectionner ce dernier dans la fenêtre de code et taper un nouveau titre ou le
changer à l’aide d’une autre fonctionnalité intégrée.
15. Localisez le champ Titre en haut de la fenêtre de document et sélectionnez le texte
“Document sans titre”.

13:32:41 +0200 26/09/2012 10:11:39
16. Dans le champ Titre, tapez HTML Basics, Page 2.
17. Appuyez sur Entrée pour compléter le titre.
Vous remarquerez que le nouveau titre apparaît dans le code pour remplacer le
contenu d’origine. Il est temps d’enregistrer le fichier et de l’observer dans le navigateur.
18. Choisissez Fichier > Enregistrer. Naviguez jusqu’au bureau. Nommez le fichier
secondpage. Cliquez sur Enregistrer.
Dreamweaver ajoute automatiquement l’extension appropriée (html).
19. Choisissez Fichier > Aperçu dans le navigateur.
La page terminée apparaît dans la fenêtre du navigateur.
Vous venez de terminer deux pages web – l’une à la main et l’autre en utilisant
Dreamweaver. Dans les deux cas, vous avez pu voir comment le HTML joue un rôle
central dans l’ensemble du processus. Pour en apprendre plus sur cette technologie,
rendez-vous sur le site www.w3schools.com ou consultez l’un des livres présentés
dans la section suivante.
Livres recommandés sur le HTML

• Introduction à HTML5, 2e édition, de Bruce Lawson et Reny Sharp, Pearson France,
2012. ISBN : 978-2-7440-2530-3.
• HTML & CSS, de Jon Duckett, Pearson France, 2012. ISBN : 978-2-7440-2547-1.
• HTML et CSS3, de Michel Martin, Pearson France, 2011. ISBN : 978-2-7440-2477-1.

13:32:41 +0200 26/09/2012 10:11:39
Codes HTML 4 fréquemment utilisés
Les éléments du code HTML répondent à des besoins spécifiques. Les balises peuvent
créer des structures, appliquer des mises en forme, identifier du contenu logique ou
générer des mécanismes d’interactivité. Les balises qui créent des structures autonomes
sont appelées des éléments de bloc ; celles qui réalisent leur travail dans le corps d’une
autre balise sont appelées des éléments incorporés.
Balises HTML
Le tableau suivant présente certaines des balises HTML le plus fréquemment utili-
sées. Pour tirer le meilleur parti de Dreamweaver et de vos pages web, il est utile de
comprendre la nature de ces éléments et la manière de les employer. Rappelez-vous
que certaines balises peuvent avoir plusieurs fonctions.
Tableau 2.1 Balises HTML fréquemment utilisées
B a li s e D e s c r i p ti o n St r u ct u r e l Bl o c Incorporé
 Commentaire HTML. Vous permet d’ajouter •

dans le code HTML des notes qui ne sont pas
affichées dans le navigateur.
<a> Ancre. Crée un hyperlien. •

<blockquote> Citation. Crée un paragraphe autonome, en •
retrait.
<body> Désigne le corps du document. Contient les •

parties visibles du contenu de la page web.
<br /> Insère un saut de ligne sans créer un nouveau •

paragraphe.
<div> Division. Utilisée pour diviser le contenu de la • •

page en regroupements discernables. Utilisé
fréquemment pour simuler les mises en page
en colonnes.
<em> Emphase. Ajoute une emphase sémantique. •

S’affiche par défaut sous forme d’italiques.
<form> Désigne un formulaire HTML. • •

<h1> à <h6> Titres. Crée des titres en gras. Implique une •
valeur sémantique hiérarchique.
<head> Désigne l’en-tête du document. Contient du •

code qui réalise des opérations d’arrière-plan,
comme des balises méta, des scripts ou des
informations relatives aux styles ou aux liens qui
ne s’affichent pas dans la page.

13:32:41 +0200 26/09/2012 10:11:40
<hr /> Règle horizontale. Élément vide qui génère une • •

ligne horizontale.
<html> Élément racine de la plupart des pages web. •

Contient une page web entière, sauf dans
certains cas où le code serveur doit se charger
avant la balise <html> d’ouverture.
<iframe> Cadre incorporé. Élément structurel qui peut • •

contenir un autre document.
<img /> Image. • •

<input /> Élément de saisie d’un formulaire, comme un • •
champ texte.
<li> Élément de liste. •

<link /> Désigne la relation entre un document et une •
ressource externe.
<meta /> Métadonnées. •

<ol> Liste numérotée. • •
<p> Paragraphe. Crée un paragraphe autonome. •
<script> Script. Contient des éléments de script ou •
pointe vers un script externe.
<span> Désigne une section d’un élément. Fournit un •

moyen d’appliquer une mise en forme spéciale
ou de mettre en évidence une portion d’un
élément.
<strong> Ajoute une emphase sémantique. S’affiche en •

gras par défaut.
<style> Appelle des règles de styles CSS. •

<table> Désigne un tableau HTML. • •
<td> Cellule de tableau. •
<textarea> Élément de saisie de texte multiligne pour un • •
formulaire.
<th> En-tête de tableau. •

<title> Titre. •
<tr> Ligne de tableau. •
<ul> Liste à puces. • •

13:32:41 +0200 26/09/2012 10:11:40
Entités de caractères HTML
Il existe des entités pour chaque lettre et chaque caractère. Si un symbole ne peut pas
être entré directement à partir du clavier, vous l’insérerez en tapant le nom ou la valeur
numérique listée dans le tableau suivant.
Tableau 2.2 Entités de caractères HTML
c a r a ct è r e d e s c r i p ti o n nom Code
© Copyright © ©
® Marque déposée ® ®
™ Marque
• Puce
– Demi-cadratin
— Cadratin
Espace insécable
Introduction au HTML5
La version actuelle du HTML existe depuis dix ans environ et n’a pas vraiment suivi le
rythme d’autres évolutions technologiques, comme les smartphones et autre périphé-
riques mobiles. Le W3C (World Wide Web Consortium), l’organisation des standards
chargée de gérer et de mettre à jour le HTML et d’autres standards du Web, s’est attelé
à mettre à jour le langage et à proposer un working draft du HTML5 en janvier 2008.
La dernière mise à jour a été publiée en mars 2012, mais il faudra sans doute compter
quelques années encore pour une version finalisée. Qu’est-ce que cela signifie pour les
concepteurs web actuels ou à venir ? Pas grand-chose, pour l’instant.
Les sites web et leurs développeurs changent et s’adaptent rapidement aux technolo-
gies actuelles et aux réalités du marché, mais les technologies sous-jacentes avancent
à un rythme plus mesuré. Les fabricants de navigateurs commencent déjà à prendre
en charge de nombreuses fonctionnalités du HTML5. Ils attireront les développeurs
et les utilisateurs qui s’intéressent aux technologies dernier cri. Les navigateurs non
compatibles avec le HTML5 seront alors abandonnés et ces nouvelles fonctionnalités,
implémentées dans la majorité des sites web populaires. Certains prétendent que la
transition complète ne sera pas opérée avant 2020 ou plus. D’autres pensent qu’elle
se fera plus rapidement. Dans tous les cas, la compatibilité arrière avec le HTML 4.01
perdurera longtemps, si bien que vos anciennes pages et vos anciens sites ne tomberont
pas soudain en panne.

13:32:41 +0200 26/09/2012 10:11:41
Les nouveautés du HTML5
Chaque nouvelle version du HTML apporte des changements à la fois au nombre et à la
fonction des éléments qui composent le langage. Le HTML 4.01 est constitué d’environ
90 éléments. Certains de ces éléments ont été dépréciés ou carrément supprimés et
de nouveaux ont été adoptés ou proposés.
Un grand nombre des modifications dans la liste concernent la prise en charge de nou-
velles technologies ou de différents types de modèles de contenus. Certains changements
reflètent simplement des habitudes ou des techniques qui se sont popularisées au sein
de la communauté des développeurs depuis que la précédente version du HTML a été
adoptée. D’autres changements simplifient la manière dont le code est créé et facilitent
son écriture ou en accélèrent la diffusion.
Balises HTML5
Le tableau suivant présente quelques-unes des importantes nouvelles balises du
HTML5, qui se compose actuellement de plus de 100 balises. Près de 30 anciennes
balises ont été dépréciées, ce qui signifie que le HTML5 contient près de 50 nouveaux
éléments au total. Les exercices de ce livre utilisent un grand nombre de ces nouveaux
éléments HTML5, quand c’est approprié, et expliquent le rôle qui leur est dévolu.
Prenez quelques instants pour vous familiariser avec ces balises et leurs descriptions.
Tableau 2.3 Importantes nouvelles balises HTML5
<article> Désigne du contenu • •

indépendant, autonome,
qui peut être distribué de
manière indépendante du
reste du site.
<aside> Désigne du contenu de • •

barre latérale lié au contenu
environnant.
<audio> Désigne du contenu • •

multimédia, des sons, de
la musique ou d’autres flux
audio.
<canvas> Désigne du contenu •

graphique créé en utilisant
un script.
<figure> Désigne une section • •

de contenu autonome
contenant une image ou
une vidéo.
<figcaption> Désigne une légende pour • •

un élément <figure>.

13:32:41 +0200 26/09/2012 10:11:41
<footer> Désigne un pied de page • •

d’un document ou d’une
section.
<header> Désigne l’introduction d’un • •

document ou d’une section.
<hgroup> Désigne un ensemble •

d’éléments <h1> à <h6>
quand un titre possède
plusieurs niveaux.
<nav> Désigne une section de • •

navigation.
<section> Désigne une section dans • •

un document, comme un
chapitre, un en-tête, un
pied de page ou toute autre
section de document.
<source> Désigne des ressources • •

multimédias pour des
éléments multimédias. Cet
élément est un élément
enfant des éléments
<video> ou <audio>.
Plusieurs sources peuvent
être définies pour les
navigateurs qui ne
prennent pas en charge la
ressource par défaut.
<track> Désigne des pistes texte •

utilisées dans les lecteurs
multimédias.
<video> Désigne du contenu vidéo, •

comme un clip vidéo ou un
flux vidéo.
Web design sémantique

Bon nombre des changements du HTML ont été opérés dans l’intention de favoriser
une approche sémantique du Web ou pour concevoir les pages web en utilisant des
éléments et des structures qui fournissent ou possèdent une signification intrinsèque. Par
exemple, c’est ce qui a motivé l’introduction de nouveaux éléments comme <article>,
<section>, <header> et <footer>. C’est une orientation qui aura d’importantes rami-
fications pour l’avenir et l’utilisabilité du HTML ainsi que pour l’interopérabilité des
sites web sur Internet. Pour le moment, chaque page web se tient isolément au côté

13:32:41 +0200 26/09/2012 10:11:41
des autres sur le Web. Le contenu peut renvoyer à d’autres pages ou d’autres sites,
mais il n’existe pas véritablement de moyen de combiner ou de collecter les informa-
tions disponibles dans plusieurs pages ou plusieurs sites d’une manière cohérente. Les
moteurs de recherche s’efforcent d’indexer le contenu qui apparaît sur chaque site,
mais beaucoup d’informations sont perdues en raison de la nature et de la structure
de l’ancien code HTML.
Le HTML fut au départ conçu comme un langage de présentation. En d’autres termes,
il était destiné à afficher des documents techniques dans les navigateurs, sous une
forme lisible et prévisible. Si vous examinez attentivement les spécifications originales
du HTML, vous verrez qu’elles s’apparentent à une liste d’éléments qu’on a l’habitude
de voir dans des articles de recherche universitaire : des en-têtes, des paragraphes, des
citations, des textes, des listes numérotées ou à puce, etc.
Avant le HTML, Internet s’apparentait plus au MS-DOS ou à des applications dans
le genre OS X Terminal. Il n’y avait ni mise en forme, ni image, ni couleur. La liste
d’éléments dans la première version du HTML identifiait la manière dont le contenu
devait être affiché. Les balises ne véhiculaient aucune signification intrinsèque. Par
exemple, le fait d’utiliser une balise de titre permettait d’afficher une ligne de texte
en gras, mais cela n’indiquait pas la relation qui existait entre le titre et le texte qui
suivait ou le contenu dans son ensemble. S’agissait-il d’un titre ou tout simplement
d’un sous-titre ?
Le HTML5 introduit un certain nombre de nouvelles balises qui ajoutent une signi-
fication au balisage. Les balises comme <header>, <footer>, <article> et <section>
permettent pour la première d’identifier du contenu spécifique sans avoir à se référer
à des attributs supplémentaires comme <div class="header">...</div>. Le code
devient plus simple et plus concis. Plus important encore, l’ajout de cette sémantique
au code vous permet ainsi qu’à d’autres développeurs de relier le contenu d’une page
à celui d’une autre par des moyens tout à fait excitants, dont bon nombre n’ont même
pas encore été inventés.
Nouvelles techniques et technologies

Le HTML5 a également redéfini la nature du langage de manière à reprendre la main
sur des fonctions qui au fil des ans avaient été progressivement reléguées à des plug-
ins tiers ou des programmes externes. Si vous débutez en matière de conception web,
cette transition sera fastidieuse, parce que vous n’avez rien à réapprendre et aucune
mauvaise habitude à rompre. Si vous avez de l’expérience en matière de création de
pages web et d’applications, ce livre vous guidera sans difficulté dans ces eaux troubles
et introduira quelques-unes des nouvelles technologies et techniques de manière
logique et simple. Mais il y a mieux : le Web design sémantique ne signifie pas qu’il
faille jeter aux oubliettes vos vieux sites et reconstruire tout depuis le début. Le code
HTML 4 valide restera valide à l’avenir. Le HTML5 a été conçu pou vous faciliter la
tâche en vous permettant de faire plus avec moins d’efforts. Alors, n’attendons plus !

13:32:41 +0200 26/09/2012 10:11:41
Références HTML5
Pour en apprendre plus sur le HTML5, consultez la page www.w3.org/TR/20092011/
WD-html5-2009082520110525/.
Pour une liste complète des éléments HTML5, consultez la page www.w3schools.
com/html5/html5_reference.asp.
Pour en apprendre plus sur le W3C, consultez www.w3.org.

13:32:41 +0200 26/09/2012 10:11:41
Révisions
Questions
1. Quels programmes peuvent ouvrir des fichiers HTML ?
2. Que fait un langage de balisage ?
3. Vrai ou faux : le HTML5 n’est pas très différent du HTML 4.
4. Quelles sont les trois parties principales de la plupart des pages web ?
5. Quelle est la différence entre un élément de bloc et un élément incorporé ?
Réponses
1. Le HTML est un langage en texte brut qui peut être ouvert et édité dans n’importe
quel éditeur de texte et affiché dans n’importe quel navigateur web.
2. Un langage de balisage place des balises délimitées par des chevrons < > de part
et d’autre du texte brut afin de faire passer, d’une application à une autre, des
informations concernant la structure et le formatage.
3. Faux. Près de 30 balises du HTML 4 ont été dépréciées et pas loin de 50, ajoutées
au HTML5. Cela signifie que près de la moitié du langage a changé depuis son
intronisation en 1998.
4. La plupart des pages web sont composées de trois sections : une racine, un en-tête
et un corps.
5. Un élément de bloc crée un élément autonome. Un élément incorporé peut se
trouver à l’intérieur d’un autre élément.

13:32:41 +0200 26/09/2012 10:11:42
les CSS contrôlent l’apparence des pages web. le langage CSS est complexe
et puissant et peut s’adapter à l’infini. il faut du temps et des efforts pour
l’apprendre et des années pour le maîtriser.
38

13:32:41 +0200 26/09/2012 10:11:56
Les bases des CSS 3
Dans cette leçon, vous vous familiariserez avec les CSS et vous apprendrez :
• les termes et la terminologie des CSS ;
• la différence entre le formatage HTML et CSS ;
• de quelle manière les concepts de cascade, d’héritage, de descendance et
de spécificité affectent l’application du formatage CSS par les navigateurs ;
• de quelle manière les CSS peuvent formater les objets ;
• les nouvelles fonctionnalités et possibilités des CSS3.
Cette leçon vous prendra environ 1 heure et 15 minutes. Avant de commen-

cer, assurez-vous d’avoir copié les fichiers de la Leçon 3 sur votre disque
dur, comme indiqué dans la section “Guide de démarrage”, au début de ce
livre. Si vous commencez par cette leçon, utilisez la méthode décrite dans
la sous-section “Démarrage instantané” de la section “Guide de démarrage”.
39

13:32:41 +0200 26/09/2012 10:11:56
Qu’est-ce que les CSS ?
Le HTML n’a jamais été conçu pour être un support pour la conception graphique. À
l’exception du gras et de l’italique, la version 1.0 se trouvait dépourvue de tout moyen
de charger des polices ou de formater du texte. Les commandes de mise en forme ont
été ajoutées au fur et à mesure jusqu’à la version 3 du HTML afin de répondre à ces
limitations, mais ces changements n’ont pas suffi. Les concepteurs ont eu recours à
diverses astuces pour obtenir les résultats désirés. Par exemple, ils utilisaient les tableaux
HTML pour créer des mises en page multicolonnes ou complexes pour le texte et des
images quand ils souhaitaient utiliser d’autres polices que Times et Helvetica.
Si vous utilisez le
mode Tableaux
développés de
Dreamweaver (en
haut), vous verrez
que des tableaux
et des images ont
été utilisés pour
créer l’apparence
finale de cette
page web (en
bas).
40 leçon 3 Les bases des CSS

13:32:41 +0200 26/09/2012 10:11:58
Le formatage HTML était une approche si inappropriée qu’il a été déprécié du langage
entièrement au profit des feuilles de style en cascade (CSS). Les CSS évitent tous les
problèmes du formatage HTML et font aussi gagner du temps. Elles permettent de
réduire le code HTML à son contenu et à sa structure, puis d’appliquer séparément
sa mise en forme, afin d’adapter plus aisément la page web à diverses applications
spécifiques.
Mises en forme HTML et CSS

Une simple comparaison des mises en forme HTML et CSS révèle rapidement combien
les CSS font gagner de temps et d’efforts. Dans l’exercice suivant, vous allez découvrir
la puissance et l’efficacité des CSS en modifiant deux pages web, l’une formatée en
HTML, l’autre avec des CSS.
1. Lancez Dreamweaver CS6, s’il n’est pas déjà ouvert.
2. Choisissez Fichier > Ouvrir.
3. Naviguez jusqu’au dossier lesson03 et ouvrez html_formatting.html.
4. Cliquez sur le bouton Fractionner. Si nécessaire, choisissez Affichage > Fractionner
verticalement pour empiler verticalement l’une sur l’autre les fenêtres du mode
Code et du mode Création.
Chaque élément du contenu est formaté individuellement avec la balise <font>,

maintenant dépréciée. Notez la présence de l’attribut color="blue" dans chaque
élément <h1> et <p>.
5. Remplacez le mot blue par green à chaque ligne où il apparaît. Cliquez dans la
fenêtre en mode Création pour mettre à jour l’affichage.
Le texte s’affiche à présent en vert. Comme vous pouvez le voir, non seulement
le formatage avec la balise obsolète <font> est lent, mais il multiplie aussi les
risques d’erreur. Si, par mégarde, vous tapez greeen ou geen, le navigateur ignore
complètement la mise en forme.
6. Ouvrez le fichier CSS_formatting.html du dossier lesson03.

13:32:41 +0200 26/09/2012 10:11:59
7. S’il n’est pas déjà sélectionné, cliquez sur le bouton Fractionner.
Le contenu du fichier est identique au précédent document, mais, cette fois, il

est mis en forme à l’aide de CSS. Les fragments de code qui mettent en forme les
éléments HTML apparaissent dans la section <head> du fichier. Vous remarquerez
que ce code contient deux attributs color: blue;.
8. Sélectionnez le mot blue dans le code h1 { color: blue; } et tapez green pour
le remplacer. Cliquez dans la fenêtre Création pour actualiser l’affichage.
En mode Création, tous les éléments de titre s’affichent maintenant en vert. Les
éléments de paragraphe restent bleus.
9. Sélectionnez le mot blue dans le code p { color: blue; } et tapez green pour le
remplacer. Cliquez sur la fenêtre Création pour actualiser l’affichage.
En mode Création, les éléments de paragraphe sont passés en vert.
Dans cet exercice, les CSS ont opéré le changement de couleur en deux petites modi-
fications simples, alors que la balise HTML <font> obligeait à modifier chacune des
lignes. Vous comprenez sans doute pourquoi le W3C a déconsidéré la balise <font> et
développé les feuilles de style en cascade ! Cet exercice ne donne qu’un court exemple
de la puissance et des améliorations de productivité pour la mise en forme offertes par
les CSS, que le HTML, à lui seul, ne peut égaler.
Styles HTML par défaut

Chacune des 100 balises HTML possède d’emblée un ou plusieurs formats ou compor-
tements par défaut. Si vous ne faites rien, le texte est donc déjà formaté d’une certaine
manière. L’une des tâches essentielles pour maîtriser les CSS consiste à apprendre et
à comprendre ces réglages par défaut. Voyons cela.

13:32:41 +0200 26/09/2012 10:11:59
1. Ouvrez html_defaults.html dans le dossier lesson03. Si nécessaire, passez en mode
Création pour afficher le contenu du fichier.
Le fichier contient la gamme complète des éléments de titres et de texte HTML.

Chaque élément présente une mise en forme de base pour les caractéristiques telles
que la taille, la police, l’espacement, etc.
2. Si nécessaire, cliquez sur le bouton Fractionner. Dans la fenêtre en mode Code,
localisez la section <head> et tâchez d’identifier le code qui pourrait mettre en
forme les éléments HTML.
Un rapide examen montre qu’il n’y a pas d’information de mise en forme évidente
dans le fichier, mais que le texte affiche néanmoins différents types de mise en
forme. D’où viennent alors ces styles ? Que sont donc ces réglages ? La réponse
est : cela dépend. Les éléments HTML tirent leurs caractéristiques de plusieurs
sources. Tout d’abord, consultez le W3C, l’organisation des standards du Web, qui
établit les spécifications et les protocoles Internet. Vous trouverez par défaut, à
l’adresse www.w3.org/TR/CSS21/sample.html, une feuille de style qui décrit les
caractéristiques de formatage et de comportement classique de tous les éléments
HTML 4. Il s’agit de la feuille de style que tous les éditeurs de navigateurs prennent
comme référence pour définir leur affichage des éléments HTML.
Pour gagner du temps et vous avancer un peu, le tableau suivant regroupe certains
des réglages par défaut les plus courants.

13:32:41 +0200 26/09/2012 10:12:00
Tableau 3.1 Réglages HTML par défaut
É lém e n t Description
Dans la plupart des navigateurs, la couleur d’arrière-plan de la page

Arrière-plan est blanche. L’arrière-plan de <div>, <table>, <td>, <th> et de la
plupart des autres balises est transparent.
Les titres <h1> à <h6> sont en gras et alignés à gauche. Les six
Titres balises de titres appliquent différents attributs de taille de police,
<h1> étant le plus grand et <h6>, le plus petit.
En dehors d’une cellule de tableau, le texte s’aligne à gauche et

Corps du texte
commence en haut de la page.
Texte de cellule de Le texte dans les cellules de tableau <td> s’aligne horizontalement à
tableau gauche et verticalement au centre.
Le texte dans les cellules d’en-tête <th> est en gras et s’aligne

En-tête de tableau horizontalement et verticalement au centre. Ce réglage par défaut
est respecté par tous les navigateurs.
La couleur du texte est noire. La police est spécifiée et fournie par

Polices le navigateur (ou par toute préférence de navigateur définie par le
fabricant puis par l’utilisateur).
Espacement externe à la boîte de l’élément. Un grand nombre

Marges d’éléments HTML incluent par défaut une marge d’une sorte ou
d’une autre.
Espacement entre la bordure de boîte et le contenu. Selon la feuille

Remplissage de style par défaut, aucun élément ne possède de remplissage par
défaut.
S’il est intéressant

de connaître les L’une des autres tâches importantes consiste
navigateurs les
plus populaires à identifier le navigateur (et sa version)
auprès de Chrome 34,6%
actuellement utilisé pour afficher le code
Firefox 37,7%
l’ensemble des HTML. En effet, les navigateurs diffèrent
internautes, il est
très important,
souvent quant à leur manière d’interpréter ou
avant de créer d’afficher les éléments HTML et, aujourd’hui,
IE 20,2%
vos pages et de Autres 0,8 % la mise en forme CSS. Malheureusement,
les tester, que
Safari 4,2 %
des versions distinctes du même navigateur
vous identifiiez
Opera 2,5 % peuvent elles-mêmes produire d’importantes
les navigateurs
spécifiques à différences avec un code identique.
votre public cible.
La meilleure pratique consiste à créer et à tester vos pages web en vous assurant qu’elles
fonctionnent correctement dans les navigateurs qu’emploie la majorité des utilisateurs
du Web, et notamment ceux que préfèrent vos propres visiteurs. En janvier 2012, le
W3C a publié les statistiques présentées dans l’image ci-contre qui identifient les
navigateurs les plus populaires.
Ce diagramme présente la répartition de base des navigateurs dans le monde, mais
il masque en réalité le fait que plusieurs versions de chaque navigateur sont encore

13:32:41 +0200 26/09/2012 10:12:00
en usage. Or ce fait est important à savoir, parce que les versions de navigateur plus
anciennes sont moins susceptibles de prendre en charge les derniers effets et fonction-
nalités HTML et CSS. Enfin, pour compliquer encore un peu le tableau, ces statistiques
sont valides pour Internet dans son ensemble, mais elles peuvent être différentes dans
le cas de votre site.
Le modèle de boîte Css

Le navigateur lit normalement le code HTML, interprète sa structure et sa mise en
forme, puis affiche la page web. Les CSS s’immiscent entre le HTML et le navigateur
et redéfinissent la manière dont chaque élément doit être reproduit. Elles plaquent
une boîte imaginaire autour de chaque élément et permettent de formater presque
tous les aspects de l’affichage de cette boîte et de son contenu.
Bordure du haut le modèle

de boîte est
une structure
MARGE SUPÉRIEURE programmatique
Bordure imposée par les
REMPLISSAGE DE GAUCHE
REMPLISSAGE DE DROITE
MARGE DE DROITE
REMPLISSAGE DU HAUT
de gauche CSS, qui permet
MARGE DE GAUCHE
de mettre en
<h1>...</h1> forme n’importe
quel élément
HTml ou de
REMPLISSAGE DU BAS redéfinir ses
Bordure
réglages par
MARGE INFÉRIEURE de droite défaut.
Bordure inférieure
Les CSS permettent de spécifier des polices, des hauteurs de ligne, des couleurs, des
bordures, des ombres et des images d’arrière-plan ou bien encore des marges et des
remplissages. Ces boîtes sont généralement invisibles – du moins le sont-elles par
défaut. En fait, les CSS ne requièrent pas nécessairement qu’on spécifie un format
particulier pour les boîtes.
voici, côte à côte,
1. Lancez Dreamweaver CS6 si nécessaire. Ouvrez boxmodel.html dans le dossier deux versions
lesson03. du même texte.
le texte de
2. Cliquez sur le bouton Fractionner pour diviser l’espace de travail entre les fenêtres gauche affiche les
des modes Code et Création. réglages HTml
par défaut. Celui
de droite a été
formaté avec des
CSS pour afficher
des couleurs, des
bordures, des
ombres d’arrière-
plan, des marges
et un remplissage
pour chacun des
éléments.
ADobe DreAmweAver CS6 ClASSroom in A book 45

13:32:41 +0200 26/09/2012 10:12:01
Le code HTML5 d’exemple du fichier contient un titre et deux paragraphes avec du
texte d’exemple mis en forme de manière à illustrer certaines propriétés du modèle
de boîte CSS. Le texte affiche des bordures visibles, des couleurs d’arrière-plan, des
marges et un remplissage.
Contenu et présentation
L’un des principes majeurs pour les standards du Web aujourd’hui concerne la
séparation du contenu (texte, images, listes, etc.) et de la présentation (mise en
forme). Voici deux contenus HTML identiques, côte à côte. Nous avons entièrement
supprimé le formatage CSS du fichier à gauche. Bien que le texte à gauche ne soit
pas complètement formaté, on voit aisément combien les CSS sont efficaces pour
transformer le code HTML.
Les spécifications en cours que l’on peut consulter à l’adresse www.w3.org/TR/css3-

box montrent comment le modèle de boîte est censé présenter les documents sur
différents supports.
Mise en forme du texte

Il existe trois moyens d’appliquer une mise en forme CSS : en l’incorporant dans le
code, en l’insérant dans une feuille de style interne ou en la plaçant dans une feuille de
style externe. L’instruction de mise en forme CSS est appelée règle. Chaque règle est
constituée de deux parties : un sélecteur et une ou plusieurs déclarations. Le sélecteur
identifie l’élément ou la combinaison d’éléments à mettre en forme. La ou les déclara-
tions contiennent les spécifications de mise en forme. Les règles CSS peuvent redéfinir
n’importe quel élément HTML existant, mais également définir des modificateurs de
sélecteur personnalisé appelés class et id.
Une règle peut également combiner des sélecteurs afin de cibler plusieurs éléments
à la fois ou des occurrences spécifiques dans une page où les éléments apparaissent
de manière unique, par exemple avec un élément imbriqué à l’intérieur d’un autre.
L’application d’une règle CSS ne se résume pas à sélectionner du texte et à appli-
quer un format de paragraphe ou de caractère comme on le fait dans InDesign ou
Illustrator. Les règles CSS peuvent concerner des mots uniques, des paragraphes de
texte ou des combinaisons d’objets et de texte. Une unique règle peut affecter une page

13:32:41 +0200 26/09/2012 10:12:02
entière. Une règle peut être spécifiée de manière à s’appliquer ou cesser de s’appliquer
soudainement, ou de manière à s’appliquer continuellement jusqu’à ce qu’une règle
subséquente vienne la modifier.
Structure des règles CSS Ces règles
d’exemple
Sélecteur Déclaration Déclaration présentent
certaines des
constructions
utilisées dans
Élément HTML les sélecteurs et
les déclarations.
Multiple
Comme indiqué
Descendant précédemment,
c’est la manière
Classe dont le sélecteur
est écrit qui
Classe détermine la
façon dont le style
est appliqué.
Propriété Valeur Propriété Valeur
Bien des facteurs entrent en jeu dans la manière dont les règles CSS s’appliquent. Pour
vous aider à mieux comprendre leur fonctionnement, les exercices des sections qui
suivent illustrent quatre concepts majeurs des CSS : la cascade, l’héritage, la descen-
dance et la spécificité.
Cascade
La théorie de la cascade décrit la manière dont l’ordre et l’emplacement des règles
dans la feuille de style ou sur la page agissent sur l’application des styles. En d’autres
termes, si deux règles entrent en conflit, laquelle l’emporte ? Voyons comment la
cascade influence la mise en forme CSS.
1. Ouvrez cascade.html dans le dossier lesson03.
Le fichier contient des titres HTML formatés en rouge.
2. Si nécessaire, cliquez sur le bouton Fractionner, et observez les règles CSS dans la
section <head> du code.
Notez que le code contient deux règles CSS identiques à ceci près qu’elles appliquent
des couleurs différentes : rouge ou bleu. Les deux règles cherchent à formater les
mêmes éléments. Une seule sera cependant appliquée.

13:32:41 +0200 26/09/2012 10:12:03
Il est évident que la seconde règle l’emporte. Pourquoi ? Parce qu’elle est déclarée
en dernier, ce qui en fait la plus proche du contenu effectif.
3. Sélectionnez la règle h1 { color: blue; }.
4. Choisissez Édition > Couper.
5. Placez le curseur à la fin de la règle h1 { color: red; }.
6. Choisissez Édition > Coller.
Vous venez d’intervertir l’ordre des règles.

7. Cliquez dans la fenêtre en mode Création pour actualiser l’affichage.
Les titres s’affichent maintenant en bleu.
La proximité et l’ordre dans lequel les règles apparaissent à l’intérieur du balisage
ont une grande importance sur la manière dont les CSS sont appliquées. Lorsque
vous essayez de déterminer quelle règle CSS doit être appliquée et quelle mise
en forme sera utilisée, sachez que les navigateurs utilisent généralement l’ordre
hiérarchique suivant, l’élément numéro 3 correspondant au plus puissant :
1. Les réglages par défaut du navigateur.
2. Les feuilles de style externes ou incorporées (dans la section <head>). Si les deux
sont utilisées, celle déclarée en dernier a la priorité sur la précédente entrée en
cas de conflit.
3. Les styles incorporés (à l’intérieur de l’élément HTML lui-même).
Héritage
La théorie de l’héritage décrit de quelle manière une règle peut être influencée par une
ou plusieurs règles précédemment déclarées. L’héritage peut toucher des règles du
même nom et des règles qui mettent en forme des éléments parents ou des éléments
qui s’imbriquent les uns dans les autres. Voyons comment l’héritage influence la mise
en forme CSS.
1. Ouvrez inheritance.html dans le dossier lesson03. En mode Fractionner, observez
le code CSS.

13:32:41 +0200 26/09/2012 10:12:04
Tout d’abord, notez que deux règles CSS formatent les éléments <h1>. Pouvez-vous
dire, en examinant la fenêtre du mode Création, laquelle des règles applique sa mise
en forme au texte <h1> ? Si vous répondez “les deux”, vous avez gagné.
Au premier regard, on serait tenté de penser qu’il existe deux règles séparées pour
<h1> et, techniquement, c’est bien le cas. Mais à mieux y regarder on remarque
que la seconde règle ne contredit pas la première. Elle ne redéfinit pas l’attribut
de couleur. Elle en déclare un autre. Comme les deux règles opèrent une action
différente, toutes deux sont honorées. Tous les éléments <h1> sont formatés en
bleu et utilisent la police Verdana.
Bien loin d’être une erreur ou une conséquence involontaire, la possibilité de créer
des mises en forme riches et élaborées en utilisant plusieurs règles est l’un des
aspects les plus puissants et les plus complexes des feuilles de style en cascade.
2. Observez les règles qui mettent en forme les éléments h2, h3 et p.
Toutes les règles incluent l’instruction {color: blue; font-family: Verdana; }.

Le code redondant doit être évité à chaque fois que cela s’avère possible. Il augmente
la taille des fichiers et donc le temps requis pour les télécharger et les traiter. Avec
l’héritage, vous pouvez créer le même effet avec une seule règle. Au lieu d’appliquer
la mise en forme individuellement à chaque élément, vous pouvez l’appliquer à
l’élément parent qui les contient – dans le cas présent, <div>.
3. Sélectionnez le sélecteur h2 et tapez div pour le remplacer.
Ce changement applique le style au parent et donc à tout son contenu également.
4. Supprimez les règles qui mettent en forme les éléments h3 et p.
5. Cliquez sur la fenêtre du mode Création pour actualiser l’affichage.

Tous les éléments restent formatés en bleu avec la police Verdana. Une règle
s’applique maintenant à trois éléments différents. Avançons encore d’un pas. Vous
aurez peut-être remarqué que les deux règles h1 combinées créent la même mise
en forme appliquée par la nouvelle règle div.

13:32:41 +0200 26/09/2012 10:12:04
6. Sélectionnez et supprimez les deux règles h1. Cliquez dans la fenêtre du mode
Création pour actualiser l’affichage. Il doit rester exactement le même.
Tout le texte est maintenant formaté par l’unique règle CSS div { color: blue;
font-family: Verdana; }.
Descendance
Le principe de descendance détermine la manière dont la mise en forme peut cibler un
élément particulier en fonction de sa position relative vis-à-vis des autres éléments. En
créant un sélecteur qui utilise plusieurs éléments, en plus d’attributs id et class, on
peut cibler la mise en forme d’occurrences spécifiques de texte dans votre page web.
Voyons comment les sélecteurs descendants influencent la mise en forme CSS :
1. Ouvrez descendant.html dans le dossier lesson03. En mode Fractionner, observez
le code CSS et la structure du contenu HTML.
La page contient trois éléments h1. Ils apparaissent dans trois contextes différents :
l’un est autonome, l’autre est situé dans une div et le troisième est dans une div à
laquelle est appliqué un attribut class. En plus du balisage HTML, trois règles CSS
appliquent différents types de mises en forme à ces éléments.
Ce qui est intéressant avec ces règles est qu’elles n’appliquent pas toujours directement
la mise en forme aux éléments h1, mais aux éléments h1 tels qu’ils apparaissent dans
la structure HTML. Vous remarquerez que le premier élément <h1> est formaté
en bleu avec la police Verdana.
2. Dans la fenêtre du mode Code, sélectionnez la totalité du premier élément <h1>.
3. Choisissez Édition > Copier.
4. Insérez le curseur après la balise de fermeture du code <h1>I'm in a DIV tag</h1>.
5. Choisissez Édition > Coller. Cliquez dans la fenêtre en mode Création pour
actualiser l’affichage.

13:32:41 +0200 26/09/2012 10:12:05
Le nouvel élément <h1> apparaît en rouge avec la police Impact, exactement comme
l’autre élément <h1> dans la même <div>. Qu’est-il arrivé au style bleu et Verdana ?
Les CSS font automatiquement la différence entre les éléments h1 autonomes
et ceux qui apparaissent dans une <div>. En d’autres termes, vous n’avez pas à
appliquer un format spécial ni à changer un format existant. Déplacez l’élément
dans la structure ou l’emplacement approprié dans le code et sa mise en forme
s’applique automatiquement. Faisons l’essai à nouveau.
6. Dans la fenêtre du mode Code, placez le curseur après la balise de fermeture de
<h1>Hi, I'm in a <em>classy</em> DIV tag</h1>.
7. Choisissez Édition > Coller. Cliquez dans la fenêtre en mode Création pour
actualiser l’affichage.
L’élément <h1> apparaît en vert avec la police Times. Une fois de plus, le texte collé
correspond à la mise en forme appliquée à l’autre élément h1 dans la <div>, sa mise
en forme originale étant entièrement ignorée.
Spécificité
La spécificité désigne la manière dont les navigateurs déterminent quelle mise en forme
appliquer en cas de conflit entre les règles. Certains parlent de poids, pour désigner le
fait d’attribuer à certaines règles une priorité supérieure en fonction de la proximité,
de l’héritage et des relations de descendance. Ces conflits sont la croix et la bannière
des concepteurs web, qui passent parfois des heures à corriger des erreurs de mise en
forme CSS. Voyons comment la spécificité affecte le poids de certaines règles d’exemple.
1. Ouvrez specificity.html dans le dossier lesson03. En mode Fractionner, observez
le code CSS et la structure du contenu HTML. Observez ensuite l’apparence du
texte dans la fenêtre en mode Création.

13:32:41 +0200 26/09/2012 10:12:15
Il y a trois règles CSS dans la section <head> du fichier. Toutes pourraient
potentiellement formater l’élément <h1> dans la page. Pour le moment, aucune
n’applique cependant de style au texte.
Voyez-vous la barre oblique et l’astérisque (/*) au début du code CSS ? Cette
notation est utilisée pour créer un commentaire dans le code CSS et désactiver
les règles qui suivent. Le code commenté se termine par une notation inversée de
la barre oblique et de l’astérisque (*/). Dans Dreamweaver, le code commenté est
généralement affiché en gris.
Notez en outre que la balise d’ouverture de l’élément <h1> inclut un attribut @
style. Ce balisage de style CSS incorporé a été désactivé en ajoutant le symbole @
au début du mot. Vous pouvez réactiver toute la mise en forme CSS en supprimant
simplement les notations /* et */, ainsi que le symbole @ dans l’attribut.
Avant de faire cela, pouvez-vous déterminer (d’après la syntaxe et l’ordre des
règles) quelle mise en forme sera appliquée au texte d’exemple ? Par exemple, le
texte s’affichera-t-il avec la police Times, Impact ou Verdana ? Sera-t-il bleu, rouge,
vert ou orange ? Voyons cela.
2. Sélectionnez la notation /* au début du code CSS et effacez-la.
3. Sélectionnez la notation */ à la fin du code CSS et effacez-la.
4. Sélectionnez le symbole @ dans l’attribut <h1> et supprimez-le.
Si vous aviez désigné le style incorporé inséré dans la balise <h1> comme étant le
gagnant, vous êtes premier de classe. Le texte s’affiche en orange, conformément à
ce style. Mais avez-vous remarqué que ce code ne spécifie pas de police ? Pourquoi
donc le texte s’affiche-t-il avec la police Verdana ?
Les styles incorporés ont la priorité sur toute autre mise en forme, mais les règles
CSS n’opèrent pas toujours de manière individuelle. Comme indiqué précédemment,
elles peuvent mettre en forme plusieurs éléments HTML à la fois et parfois recouper
ou hériter des styles d’une autre règle. Dans le cas présent, l’élément <h1> récupère
la famille de police de l’une des autres règles. Parvenez-vous à déterminer laquelle ?
6. Sélectionnez et supprimez l’ensemble du code style incorporé dans la balise <h1> :
style= "color: orange".

13:32:41 +0200 26/09/2012 10:12:28
La dernière ligne de texte est maintenant complètement formatée par la règle div.
product h1. Savez-vous dire pourquoi ? La notation .product dans le sélecteur fait
référence à l’attribut class="product", qui est attribué à l’élément <h1>. Les classes
sont utilisées pour appliquer des styles CSS à du texte quand d’autres méthodes ne
peuvent produire l’effet désiré ou quand il faut redéfinir des paramètres par défaut.
Nous en traiterons plus en détail dans la suite de cette leçon.
Chacun des mécanismes décrits ici a son rôle à jouer dans l’application des mises
en forme CSS aux pages web et à l’ensemble du site. Quand la feuille de style est
chargée, le navigateur utilise la hiérarchie suivante (le nombre 4 correspondant au
mécanisme prioritaire) pour déterminer la manière dont les styles sont appliqués,
notamment en cas de conflit entre les règles :
1. Cascade ;
2. Héritage ;
3. Structure descendante ;
4. Spécificité.
Évidemment, le fait de connaître cette hiérarchie n’aide pas vraiment quand on
a affaire à un conflit CSS dans une page qui contient des dizaines de règles, voire
des centaines. Dans un tel cas, Dreamweaver propose une aide précieuse avec une
fonctionnalité incroyable nommée Inspecteur de code.
Navigateur dans le code

Le Navigateur dans le code est un outil d’édition dans Dreamweaver qui permet d’ins-
pecter instantanément un élément HTML et d’évaluer sa mise en forme CSS. Lorsqu’il
est activé, il affiche toutes les règles CSS qui jouent un rôle dans la mise en forme d’un
élément et liste l’ordre de leur application en cascade et leur spécificité. Le Navigateur
dans le code fonctionne à la fois en mode Code et en mode Création.
1. Si nécessaire, ouvrez specificity.html tel qu’il a été modifié après le précédent
exercice. En mode Fractionner, observez le code CSS et la structure du contenu
HTML.
Ce fichier est simple en soi, mais il contient trois règles CSS susceptibles de formater
l’élément <h1>. Dans une véritable page web, les chances de rencontrer des conflits
de styles augmentent à l’ajout de chaque règle. Avec le Navigateur dans le code, il
devient très aisé d’analyser ces problèmes.

13:32:41 +0200 26/09/2012 10:12:35
2. Dans la vue Création, placez le curseur dans le texte du titre.
Au bout d’un instant, une icône qui ressemble à une barre à roue de bateau apparaît.
Cette icône offre un accès direct au Navigateur dans le code.
� Note : Vous pouvez aussi accéder au Navigateur dans le code en cliquant du bouton droit sur
l’élément et en choisissant Navigateur dans le code dans le menu contextuel ou en appuyant sur
Alt+Ctrl+N/Opt+Cmd+N.
3. Cliquez sur l’icône Navigateur dans le code.
Une petite fenêtre apparaît, avec une liste de trois règles CSS qui s’appliquent à
ce titre. La séquence de règles dans la liste indique à la fois l’ordre de la cascade et
l’ordre de spécificité. Quand des règles entrent en conflit, les règles situées plus en
bas dans la liste supplantent celles qui s’affichent au-dessus. Rappelez-vous que les
éléments peuvent hériter leur mise en forme de plusieurs règles et que la mise en
forme par défaut peut être redéfinie par des réglages plus spécifiques.
La règle div.product h1 apparaît en bas du Navigateur dans le code, ce qui indique
que ses spécifications définissent probablement la mise en forme de cet élément.
Mais bien des facteurs influencent la priorité des règles. Parfois, cela ne tient qu’à
l’ordre dans lequel les règles sont déclarées dans la feuille de style. Comme vous
l’avez vu précédemment, le fait de modifier l’ordre des règles peut souvent en
affecter les effets.
4. Dans la fenêtre du mode Code, sélectionnez toute la règle div.product h1 { font
family: Verdana; color: green; }.
5. Choisissez Édition > Couper.

6. Placez le curseur devant la règle h1 { font-family: Times; color: blue; }.
7. Choisissez Édition > Coller. Si nécessaire, appuyez sur Entrée pour insérer un saut
de ligne.
La mise en forme n’a pas changé.

13:32:41 +0200 26/09/2012 10:12:38
9. Dans la vue Code, placez le curseur à l’intérieur du texte de l’élément <h1>. Activez
le Navigateur dans le code.
Bien que la règle ait été déplacée en haut de la feuille de style, l’affichage n’a pas changé,
parce que la règle div.product h1 possède une spécificité plus importante que les
deux autres règles. Dans le cas présent, elle a la priorité où qu’elle soit placée dans
le code, mais sa spécificité peut aisément être modifiée en changeant le sélecteur.
10. Sélectionnez et supprimez la notation de classe .product dans le sélecteur.
Voyez-vous comment la mise en forme est modifiée ?

12. Placez le curseur dans le titre et activez le Navigateur dans le code.
Une fois supprimée la notation de classe de son sélecteur, la règle possède maintenant
une valeur égale à la règle div h1 { font-family: Impact; color: red; }. Mais,
comme cette règle est la dernière déclarée dans le code, elle récupère la priorité dans
la cascade. Vous y voyez un peu plus clair ? Ne vous inquiétez pas, tout cela finira par
paraître logique. En attendant, rappelez-vous simplement que la règle qui apparaît
en dernier dans le Navigateur dans le code possède l’influence la plus grande sur
l’élément concerné.
Mise en forme des objets

La dernière notion que nous allons aborder dans cette leçon est aussi la plus complexe
et la plus sujette aux erreurs : la mise en forme des objets. Par mise en forme des objets,
il faut entendre l’ensemble des spécifications destinées à modifier la taille, l’arrière-plan,
les bordures, les marges, le remplissage et le positionnement d’un élément. Comme
les CSS peuvent redéfinir n’importe quel élément HTML, la mise en forme des objets
peut fondamentalement s’appliquer à n’importe quelle balise, encore qu’elle soit le
plus souvent destinée aux éléments <div>.
Par défaut, tous les éléments commencent en haut de l’écran du navigateur et appa-
raissent les uns à la suite des autres, en progressant de gauche à droite et de haut en bas.
Les éléments de bloc génèrent leur propre ligne ou sauts de paragraphe. Les éléments
incorporés apparaissent au point d’insertion.

13:32:41 +0200 26/09/2012 10:12:50
Les CSS peuvent perturber ces contraintes par défaut et vous permettre de redéfinir
la taille, le format et la position des éléments avec une liberté presque totale.
La taille est l’une des spécifications les plus essentielles d’un élément HTML. Les
CSS peuvent contrôler la largeur et la hauteur des éléments, avec une maîtrise plus
ou moins grande. Toutes les spécifications peuvent être exprimées en termes relatifs
(pourcentages, em ou ex) ou en termes absolus (pixels, pouces, points, centimètres, etc.).
Largeur
La largeur d’un élément HTML se définit facilement. Examinons un exemple :
1. Ouvrez width.html dans le dossier lesson03.
2. Affichez la page en mode Fractionner et observez le code CSS et la structure HTML.
Par défaut, les
éléments de bloc
occupent 100 %
de la largeur de
la fenêtre du
navigateur. Les
CSS permettent
cependant aussi
de définir des
mesures absolues
ou relatives pour Le fichier contient quatre éléments <div> formatés avec un mélange de réglages de
les éléments. largeur relatifs et absolus.
Box 1 n’est pas formaté, afin de montrer comment les éléments de bloc s’affichent par
défaut. Cette boîte occupe 100 % de la largeur de la fenêtre du navigateur. À la différence
des spécifications CSS pour Box 2, qui fixent la largeur à 50 %. Le pourcentage spécifie
la portion de l’écran que l’élément doit remplir. Les mesures relatives permettent aux
éléments de s’adapter automatiquement aux modifications de la largeur du navigateur.
Par exemple, si vous faites glisser le séparateur entre les fenêtres du mode Code et du
mode Création dans Dreamweaver, Box 2 continue de s’afficher en occupant la moitié
de la largeur de la vue Création.
Les largeurs
d’éléments
définies en
pourcentages
s’adaptent
automatiquement
aux modifications
de la fenêtre du
navigateur, en
conservant leur
dimension relative
dans l’espace. Les
mesures absolues
Box 3 est formaté avec une mesure fixe de 200 pixels. Elle conserve sa largeur quelles que
ne réagissent pas soient les variations de taille de la fenêtre du navigateur. C’est une méthode populaire
aux modifications chez de nombreux concepteurs, car elle leur permet de contrôler étroitement la taille
dans la fenêtre du
et la forme des composants de page. Elle est cependant peu efficace pour tenir compte
navigateur.
de l’interaction des utilisateurs avec les pages. Une mise en page à largeur fixe ne peut

13:32:41 +0200 26/09/2012 10:12:54
ainsi pas s’adapter aux requêtes des utilisateurs relatives à la taille des polices (afin de
l’augmenter ou de la diminuer). Ces requêtes peuvent souvent perturber les mises en
page définies en pixels ou par d’autres unités de mesure absolues.
La dernière <div> présente un système qui amalgame des mesures relatives et des
mesures absolues. Elle est formatée avec une largeur de 10 cadratins (em en notation
anglaise). Le cadratin est une unité de mesure plus connue des metteurs en page
papier. Elle se définit d’après la taille de la police utilisée. Si vous utilisez une grande
police, le cadratin devient plus grand. Si vous utilisez une petite police, il devient plus
petit. Il change même selon que la police est une variante étendue ou condensée.
En conception web, le cadratin (em) (ainsi que l’unité ex, hauteur de x) prend pour
référence la famille de police définie dans la balise <body>, soit la police par défaut de
la page web elle-même.
Les largeurs
spécifiées en
cadratins (em)
permettent aux
éléments de
vos pages de
s’adapter aux
demandes des
utilisateurs pour
augmenter ou
diminuer la taille
de police.
Si vous deviez modifier la propriété font-size dans la règle body en la passant de 100 %
à 300 %, la quatrième <div> se mettrait automatiquement à l’échelle en triplant de
taille, de manière à respecter la proportionnalité de taille entre le conteneur et le texte.
Les éléments formatés en pixels ou en pourcentages, eux, ne changeraient pas du tout.
Hauteur
Idéalement, on devrait pouvoir spécifier la hauteur de tous les éléments de la même
manière qu’on le fait avec la largeur. Malheureusement, ce n’est pas aussi simple. La
prise en charge de la propriété height par les anciens navigateurs n’a pas été uniforme
ou fiable. Aujourd’hui, les navigateurs modernes ne devraient pas vous jouer de tours
si vous utilisez des mesures absolues comme des pixels, des points ou des pouces.
Les mesures relatives en em ou ex ne devraient pas poser de problème non plus. Les
mesures en pourcentages requièrent une petite astuce (ou hack) pour que la plupart
des navigateurs les respectent.

13:32:41 +0200 26/09/2012 10:12:55
1. Ouvrez height.html dans le dossier lesson03. Affichez le fichier en mode Fractionner
et observez les CSS et le code HTML.
Le fichier contient quatre éléments <div> avec des exemples de réglages de hauteur
à la fois relatifs et absolus. Box 1 présente le comportement par défaut des éléments
de bloc. Sa hauteur s’étend d’autant que son contenu le requiert. Box 2 est définie
avec une hauteur de 100 pixels. Elle conserve cette hauteur fixe quelles que soient
les modifications de la taille ou de l’orientation de l’écran. Box 3 est définie avec
une hauteur de 10 em. Bien que le cadratin soit une mesure relative, la hauteur
ne prend pas pour référence la taille de l’écran. Elle dépend de la taille de la police
de base, comme indiqué précédemment. Si vous changez la taille de la police par
défaut, la <div> réagit en fonction.
Jusque-là, tout va bien. La propriété height semble être assez simple et fonctionne
comme prévu pour les trois premiers éléments. C’est finalement Box 4 qui sera
la source de tous nos ennuis. Sa hauteur est définie à 50 % et l’on s’attendrait à ce
qu’elle prenne la moitié de la hauteur de l’écran. Mais, comme vous pouvez le voir
dans la fenêtre en mode Création, sa hauteur ne dépasse pas celle de Box 1. Quel
est le problème ?
La plupart des navigateurs (et même la vue Création de Dreamweaver) ignorent
les hauteurs définies en pourcentages. Ce comportement est lié à la manière dont
les navigateurs calculent la taille de la fenêtre des pages. En gros, c’est dû au fait
que les navigateurs calculent la largeur mais ne calculent pas la hauteur. Cela
n’affecte pas les mesures fixes ou les mesures définies en em ou en ex, mais c’est
un problème pour les pourcentages. C’est là qu’il faut recourir au hack HTML que
nous évoquions précédemment.
2. Placez le curseur au début du balisage CSS.
3. Tapez html, body { height: 100% }.
L’ajout de la propriété height aux éléments racine de votre page web donne au
navigateur l’information requise pour calculer toutes les hauteurs d’éléments définies
en pourcentages. Mais, pour voir le résultat, vous devez utiliser l’affichage en direct
ou observer la page directement dans un navigateur.
� Note : La plupart des applications ne contraignent pas la hauteur des éléments. Par défaut, la
hauteur est destinée à donner la fluidité qui permet aux éléments de s’adapter automatiquement
aux contraintes d’espace de leurs contenus.

13:32:41 +0200 26/09/2012 10:12:57
4. Cliquez sur le bouton Affichage en direct pour activer l’Affichage en direct.
Box 4 occupe maintenant 50 % de la hauteur de la fenêtre en mode Création.

Si la prise en charge des navigateurs s’est considérablement améliorée aujourd’hui, il
reste vital de tester tous vos réglages dans l’ensemble des navigateurs populaires afin
de vous assurer que les pages s’affichent correctement.
Bordures et arrière-plans
Chaque élément peut obtenir quatre bordures formatées de manière individuelle (haut,
bas, gauche et droite). Ces bordures sont utiles pour créer des éléments encadrés, mais
vous pouvez également les placer en haut ou en bas (ou les deux) de paragraphes à la
place d’éléments <hr/> (trait horizontal) pour séparer des zones de texte.
1. Ouvrez borders.html dans le dossier lesson03. Affichez le fichier en mode Fractionner
et observez le code CSS et HTML.
Le fichier contient trois exemples d’éléments texte formatés avec des effets de bordure.
Comme vous pouvez le voir, les bordures peuvent être utilisées à bien d’autres fins
que pour créer des encadrés. Elles sont ici utilisées pour ornementer de manière
graphique des paragraphes et même pour simuler un effet de bouton en relief.
Il est important de noter qu’il n’y a pas de balisage supplémentaire dans le contenu
lui-même. Tous les effets sont générés par le code CSS uniquement. Cela signifie
que vous pouvez rapidement ajuster, activer ou désactiver des effets et déplacer
le contenu aisément sans avoir à vous soucier que les éléments graphiques ne
polluent le code.

13:32:41 +0200 26/09/2012 10:12:59
Par défaut, tous les arrière-plans d’éléments sont transparents, mais les CSS vous
permettent de les formater avec des couleurs, des images ou les deux. Si vous utilisez
les deux, l’image apparaît au-dessus (ou devant) la couleur. Ce comportement
permet d’utiliser une image avec un arrière-plan transparent pour créer des effets
graphiques à plusieurs niveaux. Si l’image remplit l’espace visible ou est définie de
manière à se répéter, elle peut masquer complètement la couleur.
2. Ouvrez backgrounds.html dans le dossier lesson03. Affichez le fichier en mode
Fractionner et observez le code CSS et HTML.
Le fichier contient plusieurs exemples d’effets CSS d’arrière-plan. Des bordures ont
été ajoutées aux éléments <div> afin de rendre les effets plus faciles à repérer.
Box 1 affiche l’arrière-plan HTML transparent par défaut. Box 2 présente un arrière-
plan avec une couleur unie. Box 3 présente une image d’arrière-plan qui se répète dans
les deux directions, le long de l’axe x et de l’axe y. Elle définit également une couleur
d’arrière-plan, mais sa transparence et l’effet d’ombre portée permettent de voir la
couleur d’arrière-plan autour des bords de l’image.
Assurez-vous de tester tous les traitements d’arrière-plan. Dans certaines applications,
les spécifications d’arrière-plan CSS ne sont pas entièrement prises en charge ou ne
le sont pas de manière uniforme.
Marges et remplissage
Les marges créent un espace en dehors d’un élément (entre un élément et un autre). Le
remplissage ajoute un espace entre le contenu d’un élément et sa bordure, qu’elle soit
visible ou non. L’usage approprié de ce type d’espacement est vital dans la conception
d’ensemble de votre page web.
1. Ouvrez margins_padding.html dans le dossier lesson03. Affichez le fichier en
mode Fractionner et observez le code CSS et HTML.

13:32:41 +0200 26/09/2012 10:13:00
Le fichier contient plusieurs éléments <div> empilés les uns sur les autres, des titres
de texte d’exemple et des éléments de paragraphe. Tous ces éléments s’affichent
avec la mise en forme HTML par défaut pour les marges et le remplissage. Des
bordures ont été appliquées à tous les éléments afin de mieux repérer les effets
d’espacements.
Pour ajouter de l’espacement entre les éléments <div>, vous allez maintenant ajouter
une spécification de marge.
2. Placez le curseur dans la section CSS du code. Tapez div { margin: 30px; }.
3. Cliquez dans la fenêtre Création pour actualiser l’affichage.
Les éléments <div> sont maintenant espacés les uns les autres de 30 pixels. En
utilisant la notation margin: 30px, vous avez ajouté 30 pixels aux quatre côtés,
mais cela n’implique pas que 60 pixels séparent les éléments. Quand deux éléments
adjacents possèdent des marges, leurs réglages ne s’additionnent pas ; au lieu de
cela, les navigateurs ne retiennent que le plus grand des deux.
Le remplissage est utilisé pour ajouter de l’espace entre le contenu d’un élément
et sa bordure.
4. Dans la règle div, insérez le curseur après la notation margin: 30px;.
5. Appuyez sur Entrée pour insérer une nouvelle ligne. Tapez padding: 30px;.
Vous verrez que 30 pixels de remplissage apparaissent à l’intérieur de chaque

élément <div>. Comme le remplissage est appliqué dans les limites de l’élément, il
se combine aux réglages de marge pour affecter l’espacement général qui apparaît
entre les éléments. Le remplissage peut aussi affecter la largeur spécifiée d’un
élément et doit être pris en compte dans la conception de vos composants de page.

13:32:41 +0200 26/09/2012 10:13:01
Contrairement à l’élément <div>, les éléments texte comme <p>, <h1> à <h6>, <ol>
et <ul> possèdent par défaut des réglages de marge, comme le montre le texte
d’exemple dans la page. De nombreux concepteurs abhorrent ces spécifications
par défaut, notamment parce qu’elles peuvent varier d’un navigateur à un autre.
Ils commencent donc la plupart de leurs projets en réinitialisant volontairement
ces réglages au moyen de ce qu’on appelle une normalisation. En d’autres termes,
ils déclarent une liste des éléments courants et redéfinissent leurs spécifications
par défaut en leur attribuant des réglages appropriés et uniformisés.
7. Dans la section CSS, créez une nouvelle ligne après la règle div.
8. Tapez p, h1, h2, h3, h4, h5, h6, li { margin: 0px }.
Les éléments texte s’affichent maintenant sans l’espacement par défaut. Les marges
nulles paraîtront peut-être un choix extrême en la matière, mais la démonstration a
le mérite d’être claire. Quand vous vous familiariserez avec les CSS et la conception
des pages web, vous pourrez développer vos propres spécifications par défaut et les
implémenter de cette manière.
Positionnement
Par défaut, tous les éléments commencent en haut de l’écran du navigateur et appa-
raissent les uns à la suite des autres, en progressant de gauche à droite et du haut vers
le bas. Les éléments de bloc génèrent leur propre ligne ou paragraphe et leurs associés.
Les éléments incorporés apparaissent au point d’insertion.
Les CSS rompent toutes ces contraintes par défaut et vous permettent de placer les
éléments pratiquement n’importe où. Comme pour les autres formatages d’objets, le
positionnement peut être spécifié en termes relatifs (gauche, droite, centre, etc.) ou
par des coordonnées absolues mesurées en pixels, en pouces, en centimètres ou dans
d’autres unités de mesure. Les CSS permettent même de placer un élément au-dessus ou
en dessous d’un autre dans une pile, afin de créer d’impressionnants effets graphiques.
En utilisant soigneusement les commandes de positionnement, vous créerez diverses
mises en page pour le Web, dont les populaires conceptions multicolonnes.
1. Ouvrez positioning.html dans le dossier lesson03. Affichez le fichier en mode

13:32:41 +0200 26/09/2012 10:13:02
Le fichier contient trois éléments <div>. Ils sont empilés les uns sur les autres et
occupent la largeur complète de la fenêtre en mode Création, comme le font par
défaut tous les éléments de bloc. Avec des CSS, vous pouvez contrôler l’emplacement
de ces éléments. Mais pour commencer vous allez devoir réduire leur largeur pour
qu’il soit possible d’en placer certains côte à côte.
2. Dans la règle div, changez la propriété width en passant de auto à 30%.
Les éléments <div> se redimensionnent mais restent empilés. Plusieurs méthodes

peuvent être utilisées pour positionner les éléments à l’écran, mais celle de la
propriété float est de loin la plus populaire.
4. Dans la règle div, changez la propriété float en passant de none à left.

13:32:41 +0200 26/09/2012 10:13:04
Les trois éléments <div> s’affichent maintenant sur une même ligne, côte à côte.
Avec des attributs de classe, vous pouvez contrôler individuellement chaque <div>.
6. Dans la règle div, changez la propriété float en passant de left à none.
7. Dans la règle .box2, changez la propriété float en passant de none à left.
8. Dans la règle .box3, changez la propriété float en passant de none à right.
La page contient maintenant un mélange de spécifications par défaut et de
spécifications float. Box 1 s’affiche sur sa propre ligne, comme elle le fait par défaut.
Box 2 apparaît à la ligne suivante, alignée à gauche de l’écran comme spécifié dans
sa règle. Box 3 apparaît du côté droit de l’écran, mais sur la même ligne que Box 2.
Dans les leçons ultérieures, vous allez apprendre à combiner différents attributs
float avec différents réglages des propriétés width, height, margin et padding afin
de créer des mises en page sophistiquées pour vos sites web.
Malheureusement, si efficace que semble être le positionnement CSS, il s’agit de l’une
des spécifications CSS les plus sujettes aux erreurs d’interprétation de la part des
différents navigateurs aujourd’hui. Les commandes et réglages de mise en forme qui
fonctionnent bien dans un navigateur peuvent être interprétés différemment dans un
autre ou même complètement ignorés (avec des conséquences catastrophiques sur la
mise en page). Une mise en forme qui fonctionne bien sur une page de votre site web
peut même échouer sur une autre page qui inclut d’autres éléments de code.
Multiples, classes et ID
En tirant parti de la cascade, de l’héritage, de la descendance et de la spécificité, vous
ciblerez la mise en forme sur tout élément de votre choix, à n’importe quel endroit
d’une page web. Mais les CSS offrent quelques moyens supplémentaires d’optimiser
et de personnaliser encore la mise en forme.
Appliquer la mise en forme à plusieurs éléments

Pour accélérer les choses, les CSS vous permettent d’appliquer la mise en forme à
plusieurs éléments à la fois en les listant dans le sélecteur, séparés par des virgules.
Par exemple, la mise en forme dans les règles suivantes :
h1 { font-family: Verdana; color: blue; }
peut également être exprimée de cette manière :

h1, h2, h3 { font-family: Verdana; color: blue; }

13:32:41 +0200 26/09/2012 10:13:05
Créer des attributs de classe
Bien souvent, vous souhaiterez créer une mise en forme unique applicable aux objets,
aux paragraphes, aux phrases, aux mots ou même aux caractères individuels appa-
raissant dans une page web. Pour réaliser cela, les CSS vous permettent de créer vos
propres attributs de classes et ID.
Les attributs de classe peuvent être appliqués à autant d’éléments que nécessaire dans
une page, alors que les attributs d’ID ne peuvent apparaître qu’une seule fois par page.
Pour les concepteurs de documents imprimés, les classes sont analogues aux styles
combinés de paragraphe, de caractère et d’objet d’InDesign. Les noms de classe et d’ID
peuvent être un mot, une abréviation, une combinaison quelconque de lettres et de
chiffres, presque n’importe quoi, en somme, mais ils ne peuvent pas commencer par
un chiffre ou contenir des espaces. Même si ce n’est pas strictement interdit, évitez
d’utiliser des noms de balises et d’attributs HTML.
� Note : Dreamweaver vous avertit lorsque vous entrez un nom inapproprié.
Pour déclarer un sélecteur de classe CSS, insérez un point avant le nom dans la feuille
de style, comme ceci :
.intro
.copyright
Ensuite, appliquez la classe CSS à l’élément HTML entier, sous forme d’attribut,
comme ceci :
<p class="intro">Tapez le titre ici</p>
Ou à un bloc de caractères ou de mots individuels à l’intérieur de l’élément, comme ceci :

Voici <span class="copyright">du texte</span> formaté différemment.
Créer des attributs d’ID

Le HTML désigne l’ID comme un attribut unique. Il ne faut donc attribuer chaque ID
spécifique qu’à un élément par page tout au plus. Par le passé, de nombreux concepteurs
web utilisaient les attributs d’ID pour désigner des composants spécifiques des pages,
comme l’en-tête, le pied de page ou les articles. Avec l’arrivée des éléments HTML5
(header, footer, aside, article, etc.), cette utilisation des attributs d’ID et de classe
est devenue moins incontournable qu’elle ne l’était. Les ID peuvent cependant toujours
être utilisés pour identifier des éléments de texte, des images ou des tableaux spécifiques
afin de créer une navigation hypertexte sophistiquée dans vos pages et vos sites. Vous
en apprendrez plus sur cette manière d’utiliser les ID à la Leçon 9, “Travailler avec les
éléments de navigation”.
Pour déclarer un attribut d’ID dans une feuille de style CSS, insérez un signe dièse
avant le nom, comme ceci :
#contact_info
#disclaimer

13:32:41 +0200 26/09/2012 10:13:05
L’ID de CSS s’applique à un élément HTML entier sous la forme d’un attribut, comme
ceci :
<div id="contact_info"></div>
<div id=”disclaimer”></div>
Vue d’ensemble sur les CSS3 et sur leur prise en charge

Internet ne reste pas longtemps sans bouger. Les technologies et les normes évoluent
constamment. Les membres du W3C ont travaillé activement pour adapter le Web aux
derniers bouleversements, dont l’arrivée des périphériques mobiles, des tablettes et
des vidéos HD – qui ne cessent de s’améliorer et de devenir de plus en plus abordables
de jour en jour. Telles sont les urgences qui animent aujourd’hui le développement
du HTML5 et des CSS3.
Même si ces standards n’ont pas été officiellement adoptés, les éditeurs de navigateur
implémentent nombre de leurs fonctionnalités et techniques. Si vous vous sentez l’âme
aventureuse, sachez que Dreamweaver ne vous laissera pas en reste. Il propose déjà
une importante prise en charge des éléments HTML5 et des mises en forme CSS3 et
vous pouvez être sûr qu’à mesure que de nouvelles fonctionnalités seront proposées
Adobe les ajoutera au programme aussi rapidement que possible.
Dans les prochaines leçons, vous vous familiariserez avec un nombre important de
ces nouvelles et passionnantes techniques et implémenterez même les fonctionnalités
HTML5 et CSS3 les plus stables dans vos propres pages d’exemple.
Fonctionnalités et effets CSS3

Plus d’une vingtaine de nouvelles fonctionnalités ont fait leur apparition dans les CSS3.
Bon nombre d’entre elles sont maintenant prêtes et ont été implémentées dans tous
les navigateurs modernes ; d’autres restent expérimentales et ne sont pas entièrement
prises en charge. Parmi les nouvelles fonctionnalités, on peut citer :
• les bords arrondis et les effets de bordure ;
• les ombres de boîte et de texte ;
• la transparence et la translucidité ;
• les remplissages en dégradé ;
• les éléments texte multicolonne.
Toutes ces fonctionnalités (et d’autres encore) peuvent être implémentées à l’aide de
Dreamweaver aujourd’hui. Le programme vous aide même avec le balisage propriétaire
en cas de besoin. Afin de faire un tour d’horizon rapide des fonctionnalités et effets
les plus intéressants des CSS3, examinons un fichier d’exemple.

13:32:41 +0200 26/09/2012 10:13:05
1. Ouvrez css3_demo.html dans le dossier lesson03. Affichez le fichier en mode
Plusieurs des nouveaux effets ne peuvent être affichés directement en mode
Création. Vous devez donc utiliser l’Affichage en direct ou observer la page dans
un vrai navigateur.
2. Cliquez sur le bouton Affichage en direct pour afficher tous les effets CSS3.
Le fichier contient un mélange de fonctionnalités et d’effets qui pourront vous

surprendre, voire vous ravir – mais ne vous emballez pas trop vite ! Si bon nombre de
ces fonctionnalités sont déjà prises en charge dans Dreamweaver et fonctionneront
bien dans les navigateurs modernes, il reste beaucoup de matériel et de logiciels
plus anciens susceptibles de transformer votre rêve en cauchemar. En outre, il faut
encore être conscient d’un problème supplémentaire.
Certaines des nouvelles fonctionnalités CSS3 ont été standardisées et certains
navigateurs peuvent ne pas reconnaître le balisage par défaut généré par Dreamweaver.
Dans ces cas, il se peut que vous deviez inclure des commandes propriétaires pour
que les fonctionnalités opèrent correctement. Ces commandes sont précédées par
un préfixe propre à l’éditeur du navigateur, comme –ie, –moz ou –webkit. Si vous
examinez attentivement le code du fichier de démonstration, vous en trouverez
des exemples dans le code CSS.

13:32:41 +0200 26/09/2012 10:13:06
Prise en charge CSS supplémentaire
Le sujet de la mise en forme CSS est si complexe et puissant qu’il n’est pas possible d’en
traiter ici tous les aspects. Pour un examen complet des CSS, nous vous conseillons
les livres suivants :
• Maîtrise des CSS, 2e édition, d’Andy Budd, Simon Collison, Cameron Moll, Pearson
France, 2010. ISBN : 978-2-7440-24000-9.
• Conception de sites Web avec les CSS, d’Éric Meyer, Pearson France, 2008. ISBN :
978-2-7440-2312-5.
• CSS, d’Éric Meyer, Pearson France, 2011. ISBN : 978-2-7440-2491-7.
• HTML & CSS, de Jon Duckett, Pearson France, 2012. ISBN : 978-2-7440-2547-1.
• HTML et CSS3, de Michel Martin, Pearson France, 2011. ISBN : 978-2-7440-2477-1.

13:32:41 +0200 26/09/2012 10:13:06
Révisions
Questions
1. Devez-vous continuer d’utiliser les balises de mise en forme HTML ?
2. Qu’est-ce que les CSS imposent à chaque élément HTML ?
3. Si vous ne faites rien, les éléments HTML ne possèdent aucune mise en forme ni
structure : vrai ou faux ?
4. Quels sont les quatre principes théoriques qui affectent l’application des mises en
forme CSS ?
5. Quelle est la différence entre un élément de bloc et un élément incorporé ?
6. Les fonctionnalités CSS3 sont toutes expérimentales et vous ne devez pas les utiliser :
vrai ou faux ?
Réponses
1. Non. La mise en forme HTML a été dépréciée en 1997 lorsque le HTML 4 a été
adopté. Les meilleures pratiques recommandent d’utiliser des mises en forme CSS
à la place.
2. Les CSS imposent une boîte imaginaire sur chaque élément qui peut ensuite être mise
en forme avec des polices, des bordures, des ombrages, des marges et un remplissage.
3. Faux. Même lorsque vous ne faites rien, de nombreux éléments possèdent un
formatage par défaut.
4. Les quatre principes qui affectent la mise en forme CSS sont la cascade, l’héritage,
la descendance et la spécificité.
5. Les éléments de bloc créent des structures autonomes. Les éléments incorporés
apparaissent au point d’insertion.
6. Faux. Bon nombre de fonctionnalités CSS3 sont déjà prises en charge par les
navigateurs modernes et peuvent être utilisées aujourd’hui.

13:32:41 +0200 26/09/2012 10:13:07
Que vous utilisiez des vignettes et des maquettes en fil de fer ou plus
simplement votre imagination, dreamweaver peut rapidement convertir vos
idées graphiques en mises en page CSS conformes aux standards du web.
70

13:32:41 +0200 26/09/2012 10:21:14
Créer une mise
en page 4
Dans cette leçon, vous apprendrez :
• les bases de la conception de pages web ;
• à créer des maquettes de pages avec des vignettes et des représentations
en fil de fer ;
• à insérer et à mettre en forme de nouveaux composants dans une mise
en forme CSS prédéfinie ;
• à utiliser l’Inspecteur de code pour identifier des mises en forme CSS ;
• à tester la compatibilité avec les navigateurs.
Cette leçon vous prendra environ 1 heure. Avant de commencer, assurez-

vous d’avoir copié les fichiers pour la Leçon 4 sur votre disque dur, comme
indiqué dans la section “Guide de démarrage”, au début de ce livre. Si vous
commencez par cette leçon, utilisez la méthode décrite dans la sous-section
“Démarrage instantané” de la section “Guide de démarrage”.
71

13:32:41 +0200 26/09/2012 10:21:15
Les bases de la conception web
Avant de commencer un projet de conception web quel qu’il soit, aussi bien person-
nel que destiné à un client, il est trois questions importantes auxquelles vous devez
préalablement répondre :
• Quel est le but du site web ?
• Qui sont ses visiteurs ?
• Comment y accèdent-ils ?
Quel est le but du site web ?

Le site web doit-il vendre ou promouvoir un produit ou un service ? Est-il lié au
divertissement ou aux jeux ? Allez-vous proposer des informations ou des nouvelles ?
Aurez-vous besoin d’un panier d’achat ou d’une base de données ? Devez-vous accepter
les paiements par carte de crédit ou par transferts électroniques ? C’est en connaissant
l’objectif du site web que vous pourrez déterminer le type de contenu que vous allez
développer et avec lequel vous allez travailler, ainsi que les types de technologies que
vous devrez incorporer.
Qui sont les visiteurs ?

Les visiteurs sont-ils des adultes, des enfants, des personnes âgées, des professionnels,
des amateurs, des hommes, des femmes, le public au sens large ? Il est essentiel de
connaître votre cible pour définir la conception et le fonctionnement du site. Un site
destiné aux enfants devra sans doute contenir plus d’animations, d’interactivité et des
Est-il possible couleurs vives et attrayantes. Le choix des adultes se portera plutôt sur un contenu
d’imaginer sérieux et des analyses approfondies. Les personnes âgées auront parfois besoin de
deux sites polices en corps plus grands et d’autres améliorations en termes d’accessibilité.
plus différents
que Google La première étape utile peut être de tester la concurrence. Existe-t-il un site web qui
et Yahoo! ? propose le même service ou vend le même produit ? A-t-il du succès ? Inutile d’imiter les
Ils proposent
pourtant le même autres sous le seul prétexte que vous faites la même chose. Observez Google et Yahoo!.
service. Ils proposent le même service, mais leurs conceptions de sites diffèrent du tout au tout.
72 leçon 4 Créer une mise en page

13:32:41 +0200 26/09/2012 10:21:17
Comment y accèdent-ils ?
Cette question peut sembler bizarre alors qu’il s’agit précisément d’Internet. Mais, de fait,
vos visiteurs peuvent atteindre votre site de différentes manières. Y accèdent-ils à l’aide
d’un ordinateur fixe, d’un portable, d’un PDA ou d’un téléphone mobile ? Utilisent-ils
une connexion à haut ou bas débit ? Quel navigateur préfèrent-ils et quelle est la taille
de résolution de l’affichage ? Les réponses à ces questions vous en diront beaucoup
sur le type d’expérience que vos visiteurs attendent. Les utilisateurs de connexions
analogiques ou de téléphones portables préféreront peut-être un site moins chargé en
images et en vidéo, alors que ceux qui disposent de grands écrans et de connexions à
haut débit souhaiteront autant de gadgets que vous pourrez leur en fournir.
Mais où donc obtenir ces informations ? Dans certains cas, il peut falloir réaliser des
recherches fastidieuses et des analyses démographiques. Dans d’autres cas, il peut suf-
fire d’user de bon sens et d’une certaine connaissance préalable du marché. Un grand
nombre de ces informations sont cependant disponibles directement sur Internet. Le
site W3Schools, par exemple, conserve un nombre incalculable de statistiques concer-
nant l’accès et l’utilisation d’Internet qui sont régulièrement mises à jour :
• w3schools.com/browsers/browsers_stats.asp fournit des informations sur les
statistiques de navigateurs.
• w3schools.com/browsers/browsers_os.asp indique la répartition des différents
systèmes d’exploitation. En 2011 a commencé le suivi de l’utilisation des périphériques
mobiles sur Internet.
• w3schools.com/browsers/browsers_display.asp permet de retrouver les dernières
informations concernant les résolutions, ou tailles, des écrans qui utilisent Internet.
Si vous reprenez la conception d’un site existant, votre service d’hébergement Internet
propose des statistiques intéressantes sur le trafic des années précédentes et même
des informations concernant les visiteurs eux-mêmes. Si vous hébergez votre propre
site, il existe des outils tiers, comme Google Analytics ou Adobe Omniture, que vous
pouvez incorporer dans votre code et qui réaliseront gratuitement ou à peu de frais
ce suivi pour vous.
En regroupant toutes les statistiques, voici ce qui ressort au début 2012. Windows
(80 à 90 %) domine Internet, la plupart des utilisateurs étant presque équitablement
répartis entre Firefox (37 %) et Chrome (33 %), les différentes versions d’Internet
Explorer prenant la troisième position (22 %). Une vaste majorité de navigateurs web
sont paramétrés avec une résolution moyenne supérieure à 1 024 × 768 pixels. Sans
l’émergence des téléphones mobiles et des PDA, ces statistiques pourraient réjouir
les concepteurs et les développeurs web. Mais il devient difficile de concevoir un site
web qui possède une bonne apparence et fonctionne bien à la fois sur les écrans, les
tablettes et les smartphones.
De plus en plus de personnes utilisent chaque jour des téléphones portables et d’autres
périphériques mobiles pour accéder à Internet. Certains utiliseraient même plus fré-
quemment pour cela leur téléphone qu’un ordinateur fixe. Cette donnée est un casse-tête
pour les concepteurs web. D’une part parce que les écrans des téléphones portables

13:32:41 +0200 26/09/2012 10:21:17
ne couvrent qu’une fraction du plus petit des écrans plats du marché. Comment com-
pacter une mise en page à deux ou trois colonnes dans un petit carré de 200 pixels sur
300 ? D’autre part, de nombreux fabricants ont décidé de suivre la décision d’Apple
d’abandonner la prise en charge du contenu Flash sur leurs périphériques mobiles.
Gardez ces statistiques à l’esprit lors de la conception de votre site.
Bien des principes
valables dans
le domaine de
l’impression ne
s’appliquent
pas au Web,
parce qu’il n’est
pas possible
de contrôler
précisément
le rendu du
point de vue
de l’utilisateur.
Une page
soigneusement
conçue pour
un écran plat
se révélera sans
intérêt pour un
téléphone mobile.
Scénario
Pour les besoins de ce livre, vous avez travaillé sur un site web de Meridien GreenStart,
une organisation communautaire fictive dévouée à la cause de l’écologie. Ce site web
offre une variété de produits et services différents et requiert une vaste gamme de types
de pages web, dont des pages dynamiques utilisant des technologies serveur comme
ASP, ColdFusion et PHP.
Vos visiteurs proviennent d’un vaste échantillon démographique qui inclut tous les
âges et les niveaux d’éducation. Il s’agit de personnes qui s’intéressent aux conditions
environnementales et sont favorables à la conservation, au recyclage et à la réutilisation
des ressources naturelles et humaines.
Votre recherche marketing indique que la plupart de vos visiteurs utilisent des ordina-
teurs de bureau ou des ordinateurs portables, se connectent avec des services Internet
à haut débit, mais que vous pouvez vous attendre à ce que 10 à 20 % de vos visiteurs
utilisent des téléphones portables et d’autres périphériques mobiles.

13:32:41 +0200 26/09/2012 10:21:18
Travailler avec des vignettes et
des maquettes en fil de fer
L’étape suivante, lorsque vous aurez répondu aux trois questions concernant l’objectif
du site web, la démographie de ses visiteurs et le modèle d’accès, consiste à déterminer
de quel nombre de pages vous aurez besoin, ce que feront ces pages et, pour finir, à
quoi elles ressembleront.
Créer des vignettes

De nombreux concepteurs web commencent leur travail en saisissant un crayon et
du papier pour dessiner des vignettes. Ces vignettes forment une représentation gra-
phique des pages que vous devez créer pour le site web. Elles facilitent également le
travail sur la navigation du site web : vous tracerez des lignes entre elles pour repérer
les liaisons du système de navigation.
Les vignettes
listent les pages
qui doivent
être créées et
indiquent de
quelle manière
elles doivent être
liées les unes aux
autres.
La plupart des sites sont divisés en niveaux. Le premier inclut toutes les pages dans la
navigation principale, celles qu’un visiteur peut atteindre directement depuis la page
d’accueil. Le deuxième niveau inclut des pages qu’on ne peut atteindre qu’au moyen
d’actions spécifiques ou depuis des emplacements particuliers, comme un panier
d’achat ou une page de détails concernant un produit.
Créer une structure de page

Une fois que vous avez déterminé ce que requiert votre site en matière de pages, de
produits et de services, demandez-vous à quoi ressembleront ses pages. Dressez une
liste des composants souhaités dans chaque page, comme l’en-tête et le pied de page,
les zones de navigation, la zone de contenu principal ou les barres latérales, s’il en faut.
Laissez de côté tous les éléments qui ne seront pas présents dans chaque page. Quels
autres facteurs devez-vous considérer ?

13:32:41 +0200 26/09/2012 10:21:19
Pour créer des 1. En-tête (inclut la bannière et le logo)
structures de
2. Pied de page (infos de copyright)
pages efficaces
et adaptées à 3. N
avigation horizontale (pour référence interne, par exemple
vos besoins, il
Accueil, À propos, Contact)
est essentiel
d’identifier les 4. Navigation verticale (liens vers produits et services)
composants
essentiels des 5. Contenu principal (une colonne, voire deux ou plus)
pages.
Votre entreprise possède-t-elle un logo, une identité commerciale, une charte gra-
phique ou des conventions de couleurs que vous souhaitez mettre en avant ? Y a-t-il
des publications, des brochures ou des encarts publicitaires à créer ? Il peut être utile
de les regrouper dans un emplacement et de les étaler pour tout englober du regard
sur un bureau ou une table de conférence. Avec un peu de chance, un thème émergera
presque naturellement de cet assemblage.
Une fois que vous avez créé votre check-list des composants requis dans chaque page,
esquissez plusieurs mises en page grossières avec ces composants. La plupart des
concepteurs finissent par opter pour une structure de page simple, qui offre un bon
compromis entre flexibilité et attrait. Certains sites peuvent pousser naturellement à
adopter plusieurs modèles de mise en page. Résistez pourtant à l’envie de concevoir
chaque page séparément. Le fait de minimiser ainsi les possibilités de structuration des
pages peut être ressenti comme une limitation un peu frustrante, mais cette contrainte
est essentielle pour créer un site d’apparence professionnelle. C’est exactement pour la
même raison que certains professionnels, comme les médecins ou les pilotes de ligne,
portent des uniformes. Les structures de page homogènes, ou modèles, apportent un
effet de professionnalisme et donnent confiance au visiteur.
La maquette en fil
de fer permet de
tester rapidement
des structures de
page, sans perdre
du temps à écrire
du code.
Lorsque vous travaillerez sur l’apparence de vos pages, vous devrez déterminer la
taille et l’emplacement des principaux composants. L’emplacement choisi pour un
composant peut changer du tout au tout son impact et son utilité. Les concepteurs
de documents imprimés savent que le coin supérieur gauche de la page est considéré
comme l’une des positions fortes du support, où doivent logiquement prendre place
les éléments importants de la page, comme les logos ou les titres. C’est un héritage de
la culture occidentale, dans laquelle la lecture s’effectue de gauche à droite et de haut
en bas. La position forte suivante correspond au coin inférieur droit, car il s’agit du
dernier emplacement qu’atteignent les yeux une fois la lecture terminée.

13:32:41 +0200 26/09/2012 10:21:19
Malheureusement, cette théorie ne s’applique pas si facilement à la conception web,
pour une raison simple : vous ne pouvez jamais être certain de la manière dont vos
visiteurs consultent vos pages. Utilisent-ils un écran plat de 20 pouces ou un téléphone
portable de 5 cm de diagonale ?
Dans bien des cas, la seule chose qui soit assurée est que l’utilisateur verra le coin supé-
rieur gauche de la page. Faut-il bloquer cet emplacement en y logeant le logo de votre
entreprise ? Est-il judicieux de rendre le site plus fonctionnel en y insérant plutôt un
menu de navigation ? Voilà l’un des dilemmes du concepteur web. Faut-il privilégier
l’esthétisme du site, son utilisabilité, ou bien rechercher une forme de compromis ?
Créer des maquettes en fil de fer

Une fois que vous avez opté pour une mise en page, les maquettes en fil de fer per-
mettent de déterminer rapidement la structure de chaque page du site. La maquette
en fil de fer consiste à dessiner une sorte de vignette, mais agrandie, qui représente
chaque page et inclut d’autres informations de détail concernant les comportements,
comme les noms des liens ou les titres principaux. Cette étape aide à contrecarrer ou
à anticiper les problèmes, au lieu de les découvrir en plein travail sur le code.
La maquette
en fil de fer de
la structure de
page finale doit
identifier les
composants et
contenir des
indications
relatives au
contenu, aux
couleurs et aux
dimensions des
éléments.
Une fois que les éléments fondamentaux sont en place, la plupart des concepteurs
font une halte et créent une maquette à taille réelle en utilisant un programme comme
Fireworks, Photoshop, ou même Illustrator. C’est utile à savoir, car vous constaterez
que certains clients ont du mal à donner leur accord sur la base de simples dessins au
crayon. L’avantage est ici que tous ces programmes permettent d’exporter le résultat
sous la forme d’une image à pleine taille (JPEG, GIF ou PNG), qui peut être observée
dans un navigateur. Ces maquettes sont aussi parlantes que de vraies pages et leur
production est, en général, possible en un rien de temps.

13:32:41 +0200 26/09/2012 10:21:21
Dans certains cas,
une maquette
Photoshop ou
Fireworks peut
faire gagner
des heures de
programmation
pour obtenir
l'approbation
requise.
� Astuce :
Pendant des
années, les
concepteurs
web ont entamé
le processus de
conception dans
Fireworks, où ils
pouvaient créer
une ébauche Définir un site Dreamweaver
entièrement
fonctionnelle À partir de ce point, les leçons de ce livre se déroulent à l’intérieur d’un site Dreamweaver.
avec des menus, Vous allez créer des pages web de toutes pièces et utiliser des fichiers existants et des
des liens et des
zones réactives
ressources stockés sur votre disque dur qui composeront ensemble ce que l’on appelle
qu’il était possible un site local. Lorsque vous serez prêt à publier votre site (voir Leçon 15, “Publier son
d’exporter sous site sur le Web”), vous placerez vos fichiers terminés sur le serveur d’un hébergeur
forme de mise en
web, ce qui correspondra à votre site distant. Les structures de dossiers et les fichiers
page HTML et CSS
à modifier dans des deux sites sont, à peu de chose près, équivalents.
Dreamweaver.
Pour commencer, configurez votre site local.
1. Lancez Dreamweaver CS6 s’il n’est pas déjà ouvert.
2. Choisissez Site > Nouveau site pour afficher la boîte de dialogue Configuration de site.
Si vous avez utilisé l’une des précédentes versions de Dreamweaver, vous remarquerez
que la boîte de dialogue Configuration de site a été légèrement reconçue. En plus
des options pour créer un site Dreamweaver standard, la boîte de dialogue propose
maintenant la possibilité de créer un site avec les services proposés par Adobe
Business Catalyst. Business Catalyst est une application hébergée en ligne qui
permet de créer et de gérer des applications commerciales connectées, dynamiques
et riches. Pour en apprendre plus sur Business Catalyst, consultez le site www.
BusinessCatalyst.com.
Pour créer un site web standard dans Dreamweaver CS6, vous devez simplement le
nommer et sélectionner le dossier du site local. Les noms des sites sont généralement
liés au projet spécifique ou au client et apparaissent dans le panneau Fichiers. Le
nom ne sert qu’à vous, aussi pouvez-vous librement le choisir. Il est judicieux
d’utiliser un nom qui décrive clairement l’objet du site web.

13:32:41 +0200 26/09/2012 10:21:22
3. Dans le champ Nom du site, tapez DW-CS6.
4. À côté du champ Dossier local du site, cliquez sur l’icône en forme de dossier
( ). Lorsque la boîte de dialogue Choisissez le dossier racine apparaît, naviguez
jusqu’au dossier DW-CS6 contenant les fichiers que vous avez copiés depuis le
CD-ROM d’accompagnement et cliquez sur Sélectionner/Choisir.
Vous pourriez cliquer sur Enregistrer et commencer à travailler sur votre nouveau
site web, mais nous allons ajouter quelques éléments d’information intéressants.
5. Cliquez sur la flèche à côté de la catégorie Paramètres avancés pour révéler les
onglets de cette section. Sélectionnez la catégorie Infos locales.
Si ce n’est pas nécessaire en soi, il est de bon usage pour la gestion des sites de
stocker les types de fichiers différents dans des dossiers séparés. Par exemple, de
nombreux sites web utilisent des dossiers individuels pour les images, les PDF,
les vidéos, etc. Dreamweaver facilite cette tâche en incluant une option pour un
dossier images par défaut. Par la suite, quand vous insérerez des images depuis
d’autres emplacements de votre ordinateur, Dreamweaver utilisera ce réglage pour
déplacer automatiquement les fichiers dans la structure du site.
6. À côté du champ Dossier des images par défaut, cliquez sur l’icône du dossier
( ). Lorsque la boîte de dialogue apparaît, naviguez jusqu’au dossier DW-CS6 >
images contenant les fichiers que vous avez copiés depuis le CD d’accompagnement
et cliquez sur Sélectionner/Choisir.
Vous avez entré toutes les informations requises pour commencer votre nouveau
site. Dans les leçons ultérieures, vous ajouterez d’autres informations afin de pouvoir
charger des fichiers sur votre site distant et de tester vos pages web dynamiques.
7. Dans la boîte de dialogue Configuration de site, cliquez sur Enregistrer.
Le nom du site DW-CS6 apparaît maintenant dans la liste des sites du menu
déroulant du panneau Fichiers.
La définition d’un site est une étape initiale cruciale pour démarrer n’importe quel projet
dans Dreamweaver. C’est l’emplacement du dossier racine du site qui détermine les
chemins de liaison et permet à de nombreuses options de niveau site de Dreamweaver
de fonctionner, comme les opérations de Rechercher et remplacer sur le site entier.
Utiliser l’écran de bienvenue

L’écran de bienvenue permet un accès rapide aux pages récemment ouvertes, ainsi
que de créer divers types de pages, et offre une connexion directe à plusieurs sujets
d’aide importants. Il apparaît lorsque vous lancez le programme pour la première fois
ou lorsque aucun document n’est ouvert. Utilisons-le pour découvrir plusieurs moyens
d’ouvrir un document.
1. Dans la colonne Créer de l’écran de bienvenue, cliquez sur HTML pour créer
instantanément une nouvelle page HTML vide.

13:32:41 +0200 26/09/2012 10:21:22
2. Choisissez Fichier > Fermer.
L’écran de bienvenue réapparaît.
3. Dans la section Ouvrir un élément récent de l’écran de bienvenue, cliquez sur le
bouton Ouvrir. Dreamweaver vous permet de naviguer dans votre système pour
retrouver des fichiers à ouvrir. Cliquez sur Annuler.
L’écran de bienvenue présente une liste des fichiers récemment utilisés (jusqu’à neuf).
Votre installation n’affichera peut-être encore aucun fichier utilisé à ce stade. Le choix
d’un fichier dans cette liste est une sorte de raccourci de la commande Fichier > Ouvrir
lorsque vous souhaitez éditer une page existante.
Vous ferez plusieurs fois appel à l’écran de bienvenue dans ce livre. Lorsque vous aurez
terminé les leçons, il se peut cependant que vous ne souhaitiez plus l’utiliser. Dans ce
cas, désactivez-le en cochant l’option Ne plus afficher dans le coin inférieur gauche de la
fenêtre. Vous pourrez au besoin le réactiver dans la catégorie Général des préférences.
Observer le fichier terminé

Afin de vous familiariser avec la mise en page sur laquelle vous allez travailler dans
cette leçon, observez la page terminée dans Dreamweaver :
1. Dans Dreamweaver CS6, appuyez sur F8/Maj+Cmd+F pour ouvrir le panneau
Fichiers et choisissez DW-CS6 dans la liste Site.
2. Dans le panneau Fichiers, déroulez le dossier lesson04.
3. Double-cliquez sur layout_finished.html pour l’ouvrir.

13:32:41 +0200 26/09/2012 10:21:23
Cette page représente la mise en page terminée que vous allez créer dans cette leçon.
Elle est conçue à partir des dessins de maquette créés précédemment dans cette
leçon et utilise l’une des nouvelles mises en page CSS HTML5 disponibles dans
Dreamweaver. Prenez quelque moment pour vous familiariser avec la conception et
les composants de la page. Pouvez-vous déterminer ce qui rend cette mise en page
différente des conceptions HTML 4 existantes ? Vous découvrirez ces différences
à mesure que vous travaillerez dans cette leçon.
Modifier une mise en page CSS existante

Les mises en page CSS prédéfinies proposées par Dreamweaver sont toujours un bon � Note : Si, pour
point de départ. Elles sont faciles à modifier et peuvent s’adapter à la plupart des projets. une raison ou
pour une autre,
À l’aide d’une mise en page CSS de Dreamweaver, vous allez créer une page d’exemple vous ne pouvez
correspondant à votre maquette finale en fil de fer. Cette page sera ensuite utilisée ou ne souhaitez
pour créer le modèle de projet principal dans les leçons suivantes. Tâchons de trouver pas utiliser une
mise en page
la mise en page qui correspond le plus précisément à la représentation en fil de fer.
HTML5, consultez
1. Choisissez Fichier > Nouveau. l’encadré
”Processus
2. Choisissez Page vierge > HTML dans la boîte de dialogue Nouvelle page. Examinez HTML 4 alternatif“,
chacune des seize mises en page CSS d’exemple pour trouver celle qui correspond plus loin dans
cette leçon.
le mieux à vos besoins.
Dreamweaver CS6 propose 16 mises en page HTML 4 standard et deux mises en
page CSS HTML5. Si les mises en page HTML5 utilisent les nouveaux éléments
de contenu sémantique, elles sont presque identiques aux structures HTML 4.
À moins que vous n’ayez spécifiquement à prendre en charge une base d’anciens
navigateurs (comme Internet Explorer 5 et 6), vous n’aurez pas à vous soucier
d’utiliser les nouveaux modèles. Choisissons donc l’une des mises en page HTML5
qui correspond le mieux à notre site.

13:32:41 +0200 26/09/2012 10:21:23
Le modèle “HTML5 2 colonnes fixes, encadré1 à droite, en-tête et pied de
page”correspond à la mise en page la plus proche de notre modèle cible. La seule
différence est que l’élément de barre latérale est aligné à droite de la mise en page au
lieu de l’être à gauche. Vous alignerez cet élément à gauche plus loin dans cette leçon.
3. Dans la colonne Mise en page, sélectionnez l’option HTML5 2 colonnes fixes,
encadré à droite, en-tête et pied de page. Cliquez sur Ouvrir/Créer.
4. Si nécessaire, passez en mode Création.
5. Insérez le curseur n’importe où dans le contenu de la page. Observez les noms et
l’ordre des sélecteurs de balises en bas de la fenêtre de document.
L’ordre d’affichage des éléments dans le sélecteur de balises correspond directement

à la structure de code de la page. Les éléments qui apparaissent à gauche sont les
parents (ou conteneurs) de ceux qui sont à droite. L’élément le plus à gauche est le
plus haut dans la structure de page. Comme vous pouvez le voir, l’élément <body>
est le plus haut et <div.container> vient en second.
En cliquant dans les sections de page, vous pourrez déterminer la structure HTML
sans avoir à plonger dans la fenêtre du mode Code. Dans bien des cas, l’interface
du sélecteur de balises facilite largement l’identification de la structure HTML,
notamment pour les modèles de pages complexes.
La page est constituée de quatre éléments de contenu principaux, trois sous-
sections et un élément unique qui englobe tous les autres. Tous, sauf un d’entre eux,
correspondent aux nouveaux éléments HTML5, dont <header>, <footer>, <nav>,
<aside>, <article> et <section>. Les seuls éléments <div> de cette mise en page
sont utilisés pour contenir le contenu de la barre latérale et pour rassembler tout
le contenu. L’adoption de ces nouveaux éléments permet d’appliquer des mises en
forme CSS complexes tout en réduisant la complexité globale du code. Vous pouvez
continuer d’utiliser des attributs de classe et d’ID, mais les nouveaux éléments
sémantiques réduisent le besoin de recourir à cette technique.
Pour bien comprendre à quel point cette mise en page dépend des CSS, désactivez
la mise en forme CSS.
6. Choisissez Affichage > Rendu du style > Afficher les styles pour désactiver la mise
en forme CSS.
1. NdT : la traduction “encadré” choisie dans l’interface de Dreamweaver est incorrecte. Tirée d’un
homonyme dans la terminologie des mises en page papier, elle désignerait un encart dans le flot
du texte, alors qu’il s’agit ici clairement d’une “barre latérale” (une colonne supplémentaire, annexe,
située à gauche ou à droite de la colonne de contenu principale, comme on en voit dans l’immense
majorité des sites Internet).

13:32:41 +0200 26/09/2012 10:21:24
L’affichage des styles est généralement activé par défaut (et signalé par une coche
dans le menu). Si vous sélectionnez cette commande pour la décocher, vous
désactivez temporairement les styles CSS.
7. Notez l’identité et l’ordre de chacun des composants de la page.

Sans les CSS, le squelette HTML est à nu. Il est toujours instructif de voir à quoi
ressemblera la page si, pour une raison quelconque, la feuille de style CSS doit être
désactivée ou n’est pas prise en charge par un navigateur particulier. Il est maintenant
plus facile d’identifier les composants de la page et la structure d’ensemble.
La sémantique est un art de nommer

Vous découvrirez plusieurs éléments avec lesquels vous ne serez peut-être pas encore
familiarisé, comme <section>, <article>, <aside> et <nav>. Il s’agit de quelques-
uns des nouveaux éléments sémantiques introduits dans le HTML5. Par le passé,
vous auriez rencontré des éléments <div> identifiés et différenciés par des attributs
de classe ou d’ID, comme <div class="header"> ou <div id="nav">, afin de
pouvoir appliquer des mises en forme CSS. Le HTML5 a simplifié cette construction
en utilisant des éléments <header> et <nav>. En utilisant des éléments nommés
pour les tâches ou le type de contenu spécifiques auxquels ils sont associés, vous
pouvez harmoniser la construction du code tout en profitant d’autres avantages. Par
exemple, quand les moteurs de recherche Google et Yahoo! seront optimisés pour le
HTML5, ils pourront localiser et identifier plus rapidement des types spécifiques de
contenu dans chaque page. Votre site sera ainsi plus utile et plus facile à parcourir.

13:32:41 +0200 26/09/2012 10:21:24
Même si cela n’est pas strictement requis, les éléments qui s’affichent plus haut
dans la page, comme <header>, s’insèrent généralement avant ceux qui apparaissent
en dessous.
Le dernier élément important à remarquer est le menu de navigation. Sans la mise
en forme CSS, il redevient une simple liste à puces avec des liens hypertexte. Il
y a quelques années, ce menu aurait été créé avec des images et des animations
de survol complexes. Quand ces menus fonctionnaient mal, quelle qu’en soit la
raison, ils se transformaient généralement en un fatras inutilisable. Même si les
liens hypertexte continuaient à fonctionner, sans image il n’y avait pas de mots
pour indiquer à l’utilisateur où cliquer. Les systèmes de navigation qui utilisent des
listes texte, à la différence, restent toujours utilisables, même sans mise en forme.
8. Choisissez Affichage > Rendu du style > Afficher les styles pour réactiver la mise
en forme CSS.
Prenez l’habitude d’enregistrer les fichiers avant de modifier des réglages ou d’ajouter
du contenu. Dreamweaver ne propose pas de fonctionnalité de sauvegarde ou de
récupération des fichiers. S’il plante avant que vous sauvegardiez votre document,
tout le travail effectué dans les fichiers ouverts et non enregistrés sera perdu. Prenez
l’habitude d’enregistrer régulièrement vos fichiers. Vous éviterez ainsi de perdre
des données et des modifications importantes de vos fichiers.
9. Choisissez Fichier > Enregistrer. Dans la boîte de dialogue Enregistrer sous, naviguez
jusqu’au dossier racine du site. Nommez le fichier mylayout.html et cliquez sur
Enregistrer.
Dreamweaver enregistre normalement les fichiers HTML dans le dossier par défaut
spécifié dans la définition du site, mais il est toujours utile de vérifier la destination
afin de s’assurer que vos fichiers atterrissent au bon endroit. Toutes les pages HTML
créées pour le site final seront enregistrées dans le dossier racine du site.
Ajouter une image d’arrière-plan à l’en-tête

Les styles CSS sont un standard aujourd’hui pour tous les besoins de mise en forme
et de mise en page sur le Web. Dans les exercices qui suivent, vous allez appliquer des
couleurs d’arrière-plan à une section de page, ajuster l’alignement d’éléments et la lar-
geur des pages ainsi que modifier plusieurs propriétés texte. Toutes ces modifications
s’opèrent en utilisant le panneau Styles CSS de Dreamweaver.
Si vous commencez en haut de la page en progressant vers le bas, la première étape
consiste à insérer la bannière graphique qui apparaît dans la mise en page finale. Vous
pouvez l’insérer directement dans l’en-tête, mais en l’ajoutant sous forme d’image
d’arrière-plan vous conserverez cet élément libre pour y insérer d’autres contenus. Vous
permettrez aussi à la mise en page d’être plus facilement adaptée à d’autres applications,
par exemple pour un affichage sur les smartphones ou d’autres périphériques mobiles.
1. Sélectionnez l’espace réservé Insert_logo (180x90) dans l’en-tête. Appuyez sur Suppr.
L’en-tête vide se réduit à une fraction de sa taille initiale une fois l’espace réservé
supprimé, car il ne possède aucune spécification de hauteur en CSS.

13:32:41 +0200 26/09/2012 10:21:25
Processus HTML 4 alternatif
Le HTML5 se répand à grande vitesse sur Internet et, pour la plupart des applications, on peut considérer
que le processus suggéré fonctionnera très bien. Néanmoins, le HTML5 n’est pas la norme web actuelle
et certains composants ou pages peuvent ne pas s’afficher correctement sur les navigateurs ou
périphériques plus anciens.
Si vous préférez travailler avec du code et des structures plus fiables, n’hésitez pas à utiliser à la place
l’une des mises en page HTML 4 proposées par Dreamweaver. Nous vous conseillons la structure de
page “2 colonnes fixes, encadré à gauche, en-tête et pied de page”.
Si vous utilisez cette mise en page, vous devrez cependant adapter les étapes dans toutes les sections et
les exercices qui suivent. Par exemple, le HTML 4 n’utilise pas les nouveaux éléments sémantiques comme :
<header>...</header>
<footer>...</footer>
<section>...</section>
<article>...<article>
<nav>...</nav>
Remplacez-les donc par un élément <div> générique et utilisez un attribut de classe qui identifie le
composant :
<div class="header">...</div>
<div class="footer">...</div>
<div class="section">...</div>
<div class="article">...</div>
<div class=”nav”>...</div>
Vous devrez aussi adapter la mise en forme CSS pour les éléments HTML 4. Dans la plupart des cas,
Dreamweaver fournit bon nombre des règles requises avec la mise en page ou construit automatiquement
le nom de sélecteur approprié en utilisant le nom de la classe à la place du composant HTML5 (header,
footer, nav, etc.).
La règle CSS header {color:#090} devient ainsi .header { color: #090 }.
Tous ces pièges évités, il faut encore se rendre à l’évidence que, même avec du code et des composants
HTML 4 standard, vos pages web peuvent ne pas s’afficher correctement sur les navigateurs plus anciens
et sur certains périphériques. Un certain nombre de concepteurs web considèrent que plus on persiste à
utiliser du code ancien plus les anciens logiciels et périphériques perdureront et compliqueront nos vies
en retardant l’adoption pourtant inévitable du HTML5. Ces concepteurs pensent qu’il faut abandonner
les anciens standards et forcer les utilisateurs à se mettre à niveau aussi rapidement que possible.
Il vous revient à vous ou à votre entreprise de prendre cette décision. Dans la plupart des cas, les problèmes
que l’on rencontre avec le HTML5 sont minimes (telle police qui apparaît trop grande ou trop petite, etc.).
Pour plus d’informations sur les différences entre le HTML 4 et le HTML5, consultez les liens suivants :
http://tinyurl.com/html-differences
http://tinyurl.com/html-differences-1
http://tinyurl.com/html-differences-2

13:32:41 +0200 26/09/2012 10:21:25
2. Si nécessaire, choisissez Fenêtre > Styles CSS pour afficher le panneau Styles CSS.
3. Dans le panneau Styles CSS, double-cliquez sur la règle .header pour la modifier.
La boîte de dialogue Définition de règle CSS pour header apparaît.
4. Dans la catégorie Arrière-plan de la boîte de dialogue Définition des règles de CSS
pour .header, cliquez sur le bouton Parcourir à côté du champ Background-image.
5. Sélectionnez banner.jpg et notez les dimensions de l’image dans l’aperçu. L’image
fait 950 × 130 pixels.
6. Cliquez sur OK/Choisir pour sélectionner l’image d’arrière-plan.

Par défaut, les images d’arrière-plan se répètent aussi bien verticalement
qu’horizontalement. Ce n’est pas un problème pour le moment mais, pour vous
assurer que ce réglage ne produira aucun effet indésirable à l’avenir, modifiez le
comportement de répétition.
7. Choisissez no-repeat dans le menu déroulant Background-repeat.
8. Cliquez sur Appliquer pour observer le résultat.

L’en-tête est suffisamment large, mais il n’est pas assez haut pour révéler l’image
d’arrière-plan en entier. Comme les images d’arrière-plan ne sont pas véritablement
insérées à l’intérieur des éléments, elles n’ont aucun effet sur la taille du conteneur,
pour le meilleur comme pour le pire ! Assurez-vous que la <div> est suffisamment
grande pour afficher l’image entière en ajoutant une spécification de hauteur à la
règle .header.

13:32:41 +0200 26/09/2012 10:21:26
9. Dans le champ Height de la catégorie Boîte, tapez 130 et choisissez px dans le menu
des unités de mesure. Cliquez sur Appliquer.
L’arrière-plan apparaît entièrement dans l’élément <header>. Notez que l’image est
légèrement plus étroite que le conteneur. Nous ajusterons plus tard la largeur de la
mise en page. Nous ne souhaitons pas définir la largeur de l’élément <header> lui-
même. Vous avez appris à la Leçon 3 que la largeur des éléments de bloc, comme
<header>, correspond par défaut à la largeur entière de leur élément parent. Avant
de cliquer sur OK, nous devons ajouter quelques touches de finition à l’élément.
L’élément <header> contient une couleur d’arrière-plan qui ne correspond pas au
thème de couleur de notre site. Appliquons-en une nouvelle.
10. Dans le champ Background-color de la catégorie Arrière-plan, tapez #090. Cliquez
sur OK.
Vous ne verrez pas la couleur d’arrière-plan à moins qu’un problème survienne et
empêche le chargement de l’image d’arrière-plan.
11. Choisissez Fichier > Enregistrer.
� Note :
Insérer de nouveaux composants Pour mieux
comprendre le
La maquette en fil de fer présente deux nouveaux éléments qui n’existent pas dans fonctionnement
de cette
la structure de page actuelle. Le premier contient l’image du papillon et le second, technique, suivez
la barre de navigation horizontale. Avez-vous remarqué que le papillon chevauchait cette étape en
aussi bien l’en-tête que la barre de navigation horizontale ? Il existe plusieurs moyens mode Fractionner.
de réaliser cet effet. Dans le cas présent, une <div> positionnée de manière absolue
(div PA) fait l’affaire.
1. Si nécessaire, placez le curseur dans l’en-tête. Sélectionnez le sélecteur de balises
<header>. Appuyez sur la touche fléchée de gauche.
Cette procédure doit insérer le curseur avant la balise <header> d’ouverture. Si vous
aviez appuyé sur la touche fléchée de droite, le curseur serait passé à l’extérieur de
la balise </header> de fermeture. Rappelez-vous cette technique ; vous l’utiliserez

13:32:41 +0200 26/09/2012 10:21:26
souvent dans Dreamweaver lorsque vous souhaiterez insérer le curseur à un
emplacement spécifique, avant ou après un élément de code, sans avoir à passer
en mode Code.
� Note : Les div 2. Choisissez Insertion > Objets mis en forme > div PA.
PA étaient très
souvent utilisées
par le passé
pour créer des
structures de page
web complexes
à largeurs fixes.
Cette pratique a
largement décliné
ces dernières
années à mesure
que la prise
en charge des
Smartphones
et autres
périphériques
mobiles s’est Une div PA apparaît en haut à gauche de l’en-tête. Notez l’ID (#apDiv1) qui a été
accrue. Dans attribué à la nouvelle div dans le sélecteur de balises. Une règle correspondante a
certains cas, les
été ajoutée au panneau Styles CSS.
div PA restent
cependant bien Avec les précédentes versions du HTML, la div PA se serait vu attribuer sa taille et
utiles.
sa position à l’aide d’attributs HTML incorporés. Pour se conformer aux nouveaux
standards CSS du Web, ces spécifications sont appliquées en CSS à l’aide d’un ID
unique créé par Dreamweaver au moment où vous insérez l’élément.
3. Cliquez sur le sélecteur de balises <div#apDiv1>.
L’inspecteur Propriétés affiche les spécifications de propriété pour <div#apDiv1>.

Notez les spécifications de largeur et de hauteur de l’élément. L’autre propriété
à observer est z-index. Ce réglage détermine si l’élément courant doit s’afficher
au-dessus ou en dessous d’un autre objet. Par défaut, tous les éléments se voient
attribuer la valeur zéro (0) pour la propriété z-index. La div PA, pour sa part,
possède un z-index de 1, ce qui signifie qu’elle apparaîtra au-dessus de tous les
autres éléments de la page. Toutes les valeurs affichées dans l’inspecteur Propriétés
sont en fait stockées dans la règle #apDiv1 qui a été générée automatiquement par
Dreamweaver.
4. Placez le curseur dans <div#apDiv1>.
5. Choisissez Insertion > Image. Dans le dossier images, sélectionnez butterfly-ovr.
png. Observez les dimensions de l’image : 170 × 158 pixels.
6. Cliquez sur OK/Choisir.

13:32:41 +0200 26/09/2012 10:21:27
La boîte de dialogue Attributs d'accessibilité des balises d'image apparaît.
7. Dans le champ Texte secondaire de la boîte de dialogue, tapez GreenStart Logo.
Cliquez sur OK.
Le papillon apparaît dans la div PA.
Tester des effets d’image spéciaux

Vous aurez peut-être remarqué que le papillon possède une ombre portée translucide.
Le type de fichier PNG prend en charge la transparence alpha qui permet de réaliser
ce genre d’effet 3D. Malheureusement, les navigateurs plus anciens peuvent ne
pas prendre en charge la transparence alpha et d’autres fonctionnalités de PNG.
Si vous utilisez des fichiers PNG avec de tels effets, testez-les toujours dans vos
navigateurs cibles afin de vous assurer que ces effets sont pris en charge. Sinon
supprimez l’effet ou remplacez le fichier par une image similaire enregistrée dans
un autre type de fichier (comme GIF ou JPEG).
Vous remarquerez que la div PA est légèrement plus large que l’image du papillon.
L’espace supplémentaire ne devrait pas poser de problème, mais il est préférable
de faire correspondre les dimensions du conteneur à l’image.
8. Double-cliquez sur la règle #apDiv1 dans le panneau Styles CSS.
La boîte de dialogue Définition de règles CSS pour #apDiv1 apparaît.
9. Dans le champ Width de la catégorie Boîte, changez la largeur en tapant 170. Dans
le champ Height, tapez 158.
Les dimensions de <div> correspondent maintenant aux propriétés height et
width de l’image.
10. Décochez la case Idem pour tous pour les marges.

11. Dans le champ Top de la colonne Margin, tapez 10 px. Dans le champ Left, tapez
30 px. Cliquez sur OK.
Lorsque la boîte de dialogue définition de règle se referme, <div#apDiv1> paraît
flotter sur l’en-tête, à 10 pixels en haut et 30 pixels à gauche de sa position d’origine.
Une div PA agit comme un agent libre. Elle ignore les autres composants de la page
et peut même être positionnée sur ou sous d’autres éléments <div> et du contenu.
La <div#apDiv1> est terminée.
Ajoutons maintenant un nouveau composant qui contiendra la navigation horizontale
présentée dans les spécifications de conception du site. Le menu de navigation valeur
contiendra des liens vers les produits et services de l’organisation. La navigation
horizontale sera utilisée pour renvoyer à la page d’accueil du site et pointer vers
les déclarations d’objectifs et les informations de contact.

13:32:41 +0200 26/09/2012 10:21:27
En HTML 4, il aurait probablement fallu insérer les liens dans un élément <div> et
utiliser un attribut de classe ou d’ID pour le différencier des autres éléments <div>
dans le fichier. Le HTML5 propose pour sa part un nouvel élément spécifiquement
destiné à ce type de composant : <nav>.
12. Replacez le curseur dans l’en-tête. Cliquez sur le sélecteur de balises <header>.
Appuyez sur la touche fléchée de droite.
Le curseur doit maintenant apparaître après la balise </header> de fermeture.
13. Appuyez sur Ctrl+T/Cmd+T pour activer l’Éditeur de balises.
L’Éditeur de balises apparaît et vous permet d’ajouter des composants HTML ou

d’éditer des balises existantes sans avoir à basculer en mode Code.
� Note : 14. Tapez nav. Appuyez sur Entrée pour compléter la balise.
L’élément <nav>
est une nouveauté Un élément <nav> vide a été inséré dans le code et le curseur placé à l’intérieur de
du HTML5. Si cet élément, afin que vous puissiez en saisir le contenu.
vous devez
utiliser le code 15. Dans l’inspecteur Propriétés, choisissez Paragraphe dans le menu déroulant Format.
et les structures Tapez Home | About Us | Contact Us dans le nouvel élément <p> en guise d’espaces
HTML 4, consultez réservés pour les liens de navigation.
l’encadré
“Processus
HTML 4 alternatif”,
précédemment
dans cette leçon.
Vous allez convertir ces mentions en véritables liens hypertexte à la Leçon 9,

“Travailler avec les éléments de navigation”. Pour l’instant, créons une nouvelle
règle CSS pour formater cet élément.
16. Cliquez sur le sélecteur de balise <p> en bas de la fenêtre de document.
17. Dans le panneau Styles CSS, cliquez sur le bouton Nouvelle règle de CSS.

13:32:41 +0200 26/09/2012 10:21:28
18. Si nécessaire, sélectionnez Composé dans le menu déroulant Type de sélecteur.
Le champ Nom du sélecteur devrait afficher .container nav p.
19. Cliquez sur le bouton Moins spécifique pour supprimer la notation .container du
nom du sélecteur.
Le champ Nom du sélecteur doit afficher nav p.
20. Cliquez sur OK pour créer la règle.
La boîte de dialogue “Définition de règle de CSS pour nav plus” apparaît.
21. Dans le champ Font-size de la catégorie Type, tapez 90 et sélectionnez le signe
pour cent (%) de la liste déroulante. Dans le champ Color, tapez #FFC. Choisissez
bold dans le champ Font-weight.
22. Dans le champ Background-color de la catégorie Arrière-plan, tapez #090.
23. Dans le menu Text-align de la catégorie Bloc, choisissez Right.
24. Dans la catégorie Boîte, désélectionnez l’option Idem pour tous de la section Padding. � Astuce : Pour
Tapez 5 px dans le champ Top de la section Padding. Tapez 20 px dans le champ entrer des valeurs
dans les champs
Right de la section Padding. Tapez 5 px dans le champ Bottom de la section Padding.
de la ligne
25. Dans la catégorie Bordure, décochez la case Idem pour tous pour Style, Width et Bottom, pensez à
décocher les cases
Color et entrez les valeurs suivantes dans les champs correspondants de la ligne Idem pour tous de
Bottom : solid, 2 px, #060. chaque colonne.
26. Cliquez sur OK dans la boîte de dialogue Définition des règles de CSS. Appuyez
sur Ctrl+S/Cmd+S pour enregistrer le fichier.
Le nouvel élément <nav> apparaît sous l’en-tête entièrement formaté et rempli avec
votre texte d’espace réservé aligné à droite.
Changer l’alignement de l’élément

La structure de page proposée requiert que la barre latérale apparaisse du côté gauche
de la page alors que le modèle actuel la situe à droite. Dreamweaver propose des mises
en page HTML 4 qui correspondent plus précisément à ces critères, mais il était dur

13:32:41 +0200 26/09/2012 10:21:29
de résister aux mises en page HTML5 et à leurs nouveaux éléments sémantiques. En
outre, il est bien plus facile d’ajuster la mise en page qu’on ne pourrait le penser.
1. En mode Création, placez le curseur n’importe où dans la barre latérale de droite.
2. Cliquez sur l’icône Navigateur dans le code (icon_Navigate) ou cliquez du bouton
droit dans la barre latérale et choisissez l’option Navigateur dans le code dans le
menu contextuel.
La fenêtre Navigateur dans le code apparaît et affiche tous les noms des règles CSS
qui peuvent affecter l’élément sélectionné.
3. Identifiez la règle qui aligne la barre latérale à droite.
Le coupable est évidemment la règle .sidebar1, qui contient la déclaration float:

right.
4. Dans le panneau Styles CSS, double-cliquez sur la règle .sidebar1 afin de la modifier.
5. Dans la catégorie Boîte, changez la propriété Float en remplaçant la valeur right
par la valeur left.
6. Cliquez sur Appliquer pour observer les modifications.
La barre latérale passe du côté gauche de la mise en page.

7. Cliquez sur OK et enregistrez le fichier.

13:32:41 +0200 26/09/2012 10:21:29
Modifier la largeur et la couleur
d’arrière-plan de la page
Avant de convertir ce fichier en modèle de projet, resserrons quelque peu la mise en
forme et l’espace réservé au contenu. Par exemple, la largeur d’ensemble de la page
doit être modifiée pour correspondre à l’image de bannière. Avant de pouvoir le faire,
vous allez devoir identifier la règle CSS qui contrôle la largeur de la page :
1. Si nécessaire, choisissez Affichage > Règles > Afficher ou appuyez sur Alt+Ctrl+R/
Opt+Cmd+R pour afficher les règles dans la fenêtre de document.
Vous pouvez utiliser les règles pour mesurer la largeur et la hauteur des éléments
HTML ou des images. L’orientation des règles utilise par défaut le coin supérieur
gauche de la fenêtre de document comme référence. Pour plus de flexibilité, vous
pouvez positionner ce point zéro à n’importe quel endroit dans la fenêtre de document.
2. Placez le curseur sur le point d’axe des règles horizontale et verticale. Cliquez et
faites glisser le curseur en croix jusqu’au coin supérieur gauche de l’élément d’en-
tête dans la mise en page actuelle. Notez la largeur de la mise en page.
À l’aide de la règle, vous pouvez voir que la mise en page fait entre 960 et 970
pixels de large.
3. Placez le curseur dans la zone de contenu de la mise en page.
Observez l’affichage du sélecteur de balise afin de localiser tous les éléments qui
pourraient contrôler la largeur de la page entière. Il doit s’agir d’éléments qui
contiennent tous les autres éléments. Les seuls éléments qui correspondent à ce
critère sont <body> et <div.container>.
4. Cliquez sur l’icône Navigateur dans le code ( ) ou cliquez du bouton droit dans la
barre latérale et choisissez l’option Navigateur dans le code dans le menu contextuel.
La fenêtre Navigateur dans le code apparaît et affiche tous les noms des règles CSS
qui peuvent affecter l’élément sélectionné.
5. Placez le curseur sur les règles body et .container pour localiser la spécification
susceptible de contrôler la largeur de page.

13:32:41 +0200 26/09/2012 10:21:30
Parvenez-vous à identifier la règle qui contrôle la largeur de la page entière ? La
règle .container contient la déclaration width: 960px. Vous devez maintenant
commencer à être familiarisé avec l’inspection CSS grâce à l’interface du sélecteur
de balises et au Navigateur dans le code.
6. Double-cliquez sur la règle .container dans le panneau Styles CSS.
7. Dans la catégorie Boîte, changez la largeur (width) en tapant 950 px. Cliquez sur OK.
L’élément <div.container> correspond maintenant à la largeur de l’image de

bannière, mais vous aurez certainement remarqué que le changement de la largeur
globale possède un effet inattendu : la zone de contenu principale est passée sous
la barre latérale. Pour comprendre ce qui s’est produit, vous allez devoir mener
une rapide enquête.
8. Dans le panneau Styles CSS, cliquez sur la règle .content et observez ses propriétés.
Notez sa largeur : 780 pixels.
9. Cliquez sur la règle .sidebar1 et vérifiez sa largeur : 180 pixels.
Combinés, les deux éléments <div> comptent 960 pixels, soit la même largeur
que la mise en page d’origine. Ils sont trop larges pour tenir côte à côte dans le
conteneur principal et ont donc provoqué le décalage inattendu. Ce type d’erreur
est courant en conception web et se corrige facilement en ajustant la largeur de
l’un ou de l’autre des deux éléments enfants.
10. Cliquez sur la règle .content dans le panneau Styles CSS. Dans la section Propriétés
du panneau, changez la largeur (width) en tapant 770 px.

13:32:41 +0200 26/09/2012 10:21:30
L’élément <div.content> revient à la bonne position. Cet exemple montre bien que
la taille, l’emplacement et les spécifications des éléments de page ont d’importantes
interactions, qui peuvent affecter la mise en page finale et l’affichage des éléments
et de la page entière.
La couleur d’arrière-plan de la page détonne avec la mise en forme générale.
Supprimons-la.
11. Double-cliquez sur la règle body. Dans la catégorie Arrière-plan, changez la valeur
de Background-color en tapant #FFF. Cliquez sur OK.
Vous remarquerez que l’absence de couleur d’arrière-plan donne l’impression
que la zone de contenu de la page s’étend sur toute la largeur disponible. Vous
pouvez attribuer à <div.container> sa propre couleur d’arrière-plan ou ajouter
tout simplement une bordure pour donner aux éléments de contenu un cadre bien
défini. Pour le cas présent, une bordure fine semble la plus appropriée.
12. Double-cliquez sur la règle .container. Dans la catégorie Bordure, sélectionnez
l’option Idem pour tous et tapez les valeurs suivantes pour tous les champs de
bordure : solid, 2 px et #060. Cliquez sur OK.
Une bordure vert foncé apparaît autour de la page.

Modifier le contenu et le formatage existants

Comme vous pouvez le voir, la mise en page CSS est déjà équipée d’un menu de naviga-
tion vertical. Les liens hypertexte génériques sont de simples liens fictifs qui attendent
un contenu définitif. Changeons le texte dans le menu pour le faire correspondre aux
pages signalées dans les vignettes de notre maquette créées précédemment et modifions
les couleurs pour les adapter à la charte des couleurs du site.

13:32:41 +0200 26/09/2012 10:21:31
1. Sélectionnez le texte de remplissage Lien un dans le premier bouton de menu.
Tapez Green News. Remplacez Lien deux par Green Products. Remplacez Lien
trois par Green Events. Remplacez Lien quatre par Green Travel.
L’un des avantages liés à l’utilisation des listes à puces pour les menus de navigation
tient à la facilité avec laquelle on peut insérer de nouveaux liens.
2. Le curseur toujours placé à la fin des mots Green Travel, appuyez sur Entrée. Tapez
Green Tips.
Le nouveau texte apparaît dans un bloc qui ressemble à un bouton, mais la couleur
d’arrière-plan ne correspond pas et le texte n’est pas aligné avec les autres éléments
de menu. Vous pourriez voir ce qui ne va pas en mode Création, mais ici il est plus
rapide d’identifier le problème en mode Code.
3. Cliquez sur le sélecteur de balise <li> pour le nouvel élément de lien et sélectionnez
le mode Code. Observez les éléments de menu et comparez les quatre premiers au
dernier. Voyez-vous la différence ?
En mode Code, la différence saute aux yeux. Le dernier élément est formaté avec
l’élément <li> comme les autres (puisqu’il fait partie de la liste à puces), mais il
n’inclut pas le code <a href="#">, qui est utilisé comme balise factice pour le lien
hypertexte. Pour que Green Tips prenne l’apparence des autres éléments de menu,
vous devez ajouter un lien hypertexte ou un lien factice du même genre.
4. Sélectionnez le texte Green Tips. Dans le champ Lien de l’inspecteur Propriétés
HTML, tapez # et appuyez sur Entrée.

13:32:41 +0200 26/09/2012 10:21:32
Le code est maintenant identique dans tous les éléments.
5. Cliquez sur le bouton Création.
Tous les éléments de menu possèdent maintenant la même mise en forme. Vous en
apprendrez plus sur la mise en forme du texte en CSS pour créer un menu HTML
dynamique à la Leçon 5, “Travailler avec des feuilles de style CSS”.
La couleur actuelle du menu n’est pas coordonnée avec la charte des couleurs du
site. Pour la modifier, vous allez devoir utiliser le Navigateur dans le code pour
trouver la règle CSS qui contrôle cette mise en forme.
6. Insérez le curseur dans l’un des éléments de menu.
7. Cliquez sur l’icône Navigation dans le code ( ) ou cliquez du bouton droit dans la
barre latérale et choisissez l’option Navigateur dans le code dans le menu contextuel.
La fenêtre Navigateur dans le code apparaît et affiche une liste des règles CSS qui
peuvent affecter l’élément sélectionné. Dans certains cas, les règles ne peuvent agir
sur l’élément que de manière détournée, comme la règle body, qui concerne tous
les éléments HTML de la page.
8. Vérifiez chacune des règles et notez celles qui mettent en forme certains aspects
des éléments de menu. Rappelez-vous qu’il est possible (et même probable) que
plusieurs règles formatent chaque élément de page.

13:32:41 +0200 26/09/2012 10:21:32
Ce que vous recherchez, c’est la couleur d’arrière-plan appliquée aux éléments de
menu. Soyez attentif. Il y a sans doute plusieurs couleurs d’arrière-plan dans les
règles listées. Si vous en trouvez une, il est donc important de déterminer si elle
affecte le menu ou quelque chose d’autre.
9. Examinez chaque règle jusqu’à ce que vous trouviez la bonne mise en forme.
La règle .sidebar1 spécifie une couleur d’arrière-plan (background-color), mais elle

affecte tout l’élément <div> et non simplement le menu. Celle que vous recherchez
est en fait appliquée par la règle nav ul a, nav ul a:visited. En analysant la
signification du sélecteur de la règle, vous pouvez voir qu’il spécifie la couleur
d’arrière-plan d’un élément <a> (lien hypertexte) contenu dans un élément <ul>
(liste à puces) lui-même contenu dans un élément <nav>. La deuxième moitié du
sélecteur met ensuite en forme l’état visité du lien hypertexte également. Voilà qui
semble correspondre, non ?
10. Localisez la règle nav ul a, nav ul a:visited dans le panneau Styles CSS et
sélectionnez-la. Dans la section Propriétés du panneau, remplacez la valeur existante
de background-color en tapant #090.
� Note : Quelle La couleur d’arrière-plan des éléments de menu correspond maintenant à l’élément
que soit la < nav> horizontal. Mais le texte noir est difficile à lire sur la couleur d’arrière-plan
manière de créer verte. Comme vous pouvez le voir dans le menu horizontal, une couleur plus claire
ou de modifier la
mise en forme, serait mieux adaptée. Vous pouvez utiliser la section Propriétés du panneau Styles
Dreamweaver CSS pour ajouter des propriétés aux éléments en plus de les modifier.
met à jour le code
CSS partout où il 11. Cliquez sur le lien Ajouter une propriété dans la section Propriétés du panneau
le faut. Styles CSS.

13:32:41 +0200 26/09/2012 10:21:33
Un nouveau champ de propriété apparaît.
12. Dans le menu du champ, choisissez color. Tapez #FFC dans le champ de valeur.
Le texte du lien ne change pas de couleur comme espéré. Malheureusement, � Note : La

Dreamweaver est passé à côté d’un problème dans la feuille de style. L’affichage du notation CSS
a:link est
texte en mode Création respecte actuellement les paramètres de mise en forme de la l’un des quatre
règle a:link, qui applique un formatage par défaut aux liens hypertexte de la page. pseudo-sélecteurs
Selon le Navigateur dans le code, la règle nav ul a, nav ul a:visited est plus utilisés pour
mettre en forme
spécifique, ce qui justifie qu’elle apparaisse plus bas dans sa liste. Les sélecteurs a et
les différents
a:link sont supposés être équivalents. Ils formatent tous les deux l’état par défaut types de
des liens hypertexte mais, dans le cas de cet affichage, a:link se voit accorder la comportements
priorité. Heureusement, on peut aisément résoudre ce problème. des liens
hypertexte. Vous
13. Dans le panneau Styles CSS, cliquez du bouton droit sur la règle nav ul a, nav ul en apprendrez
a:visited et choisissez Modifier le sélecteur dans le menu contextuel ou cliquez plus sur ces
pseudo-sélecteurs
simplement sur le nom et modifiez-le dans la liste du panneau. à la Leçon 9,
“Travailler avec
les éléments de
navigation”.

13:32:41 +0200 26/09/2012 10:21:33
14. Changez la première moitié du nom du sélecteur afin d’obtenir nav ul a:link, nav
ul a:visited et appuyez sur Entrée pour terminer le sélecteur.
Le texte du lien dans le menu vertical s’affiche maintenant de la couleur souhaitée.

Insérer un espace réservé pour une image

La barre latérale inclura des photos, des légendes et de petits descriptifs sur des sujets
liés à l’environnement. Insérons un espace réservé d’image et une légende sous le
menu vertical.
1. Insérez le curseur dans le texte directement sous le menu vertical. Cliquez sur le
sélecteur de balises <p>.
L’espace réservé d’image ne doit pas être inséré dans l’élément <p>. Si c’était le cas,
� Astuce : il hériterait de toutes les marges, du remplissage et des autres caractéristiques de
Utilisez la vue
Fractionner
mise en forme appliquées aux paragraphes, ce qui perturberait la mise en page.
à chaque fois 2. Appuyez sur la touche fléchée de gauche.
que vous vous
demandez où le Comme vous l’avez vu dans les précédents exercices, le curseur se déplace à gauche
curseur est placé. de la balise <p> d’ouverture dans le code mais reste dans l’élément <aside>.
� Note : La mise 3. Choisissez Insertion > Objets image > Espace réservé de l’image.
en page HTML 4
alternative La boîte de dialogue Espace réservé pour l’image apparaît.
n’utilise pas
4. Dans le champ Nom de la boîte de dialogue Espace réservé pour l’image, tapez
l’élément
<aside>. Sidebar.
L’élément
Dans le champ Largeur, tapez 180.
<p> est inséré
directement à la Dans le champ Hauteur, tapez 150.
suite du menu
vertical. Cliquez sur OK.

13:32:41 +0200 26/09/2012 10:21:34
Un espace réservé d’image apparaît dans <div.sidebar1> sous le menu vertical.
5. Sélectionnez tout le texte sous l’espace réservé d’image. Tapez Insert caption here.
L’espace réservé de légende remplace le texte.
6. Appuyez sur Ctrl+S/Cmd+S pour enregistrer la page.
Insérer du texte de remplissage

Simplifions la mise en page en remplaçant les titres et le texte existants dans la zone
de contenu principale.
1. Double-cliquez pour sélectionner le titre Instructions. Tapez Insert main heading
here pour remplacer le texte.
2. Sélectionnez le titre Comment utiliser ce document. Tapez Insert subheading here
pour remplacer le texte.
3. Sélectionnez le texte d’espace réservé dans ce même élément <section>. Tapez
Insert content here pour le remplacer.
4. Sélectionnez et supprimez les trois éléments <section> restants ainsi que tout
leur contenu.
Modifier le pied de page

À présent, reformatons le pied de page et insérons les informations de copyright :
1. Double-cliquez sur la règle footer dans le panneau Styles CSS.
2. Dans le champ Font-size de la catégorie Type, tapez 90 %. Dans le champ Color,
tapez #FFC.
3. Dans la catégorie Arrière-plan, tapez #090 dans le champ Background-color.
Cliquez sur OK.
4. Sélectionnez le texte de remplissage dans le pied de page. Tapez Copyright 2012
Meridien GreenStart, All rights reserved.

13:32:41 +0200 26/09/2012 10:21:35
La mise en page de base est maintenant terminée.
Vérifier la compatibilité avec les navigateurs

Les mises en page CSS incluses avec Dreamweaver ont été parfaitement testées pour
fonctionner sans problème dans tous les navigateurs modernes. Au cours de cette
leçon, vous avez cependant apporté d’importantes modifications à la mise en page
d’origine. Ces modifications peuvent avoir eu des conséquences sur la compatibilité
du code dans certains navigateurs. Avant d’utiliser cette page comme modèle pour
votre projet, vous devez en vérifier la compatibilité :
1. Si nécessaire, ouvrez mylayout.html dans Dreamweaver.
2. Choisissez Fichier > Vérifier la page > Compatibilité avec les navigateurs.
Lorsque l’onglet Compatibilité avec les navigateurs s’affiche, aucun problème ne
devrait être listé.
3. Pour refermer le rapport, double-cliquez sur l’onglet Compatibilité avec les navigateurs
ou, pour fermer le groupe d’onglets entier, cliquez du bouton droit sur l’onglet et
choisissez Fermer le groupe d’onglets dans le menu contextuel.
Félicitations ! Vous avez créé une mise en page de base opérationnelle pour votre modèle
de projet et appris à insérer des composants supplémentaires, des espaces réservés
d’image, du texte et des titres. Vous savez ajuster la mise en forme CSS et vérifier la
compatibilité avec les navigateurs. Dans les leçons suivantes, vous allez continuer de
travailler sur ce fichier pour compléter le modèle de site, ajuster la mise en forme CSS
et définir la structure du modèle.

13:32:41 +0200 26/09/2012 10:21:35
Révisions
Questions
1. Quelles sont les trois questions à poser avant de commencer n’importe quel projet
web ?
2. Quel intérêt y a-t-il à utiliser des vignettes et des maquettes en fil de fer ?
3. Quel avantage y a-t-il à insérer une bannière sous forme d’image d’arrière-plan ?
4. Comment pouvez-vous insérer le curseur avant ou après un élément sans passer
par le mode Code ?
5. Quelle aide offre la fenêtre Navigation dans le code pour la conception d’une mise
en page ?
6. Quels sont les avantages d’utiliser un balisage HTML5 ?
Réponses
1. Quel est le but du site web ? Qui est le client ? Comment y accède-t-il ? Ces questions
et leurs réponses sont essentielles pour vous aider à développer la conception, le
contenu et la stratégie de votre site.
2. Les vignettes et la maquette en fil de fer permettent de définir rapidement la conception
et la structure de votre site, sans perdre de temps à programmer des pages d’exemple.
3. En insérant vos bannières ou vos images de grande taille sous forme d’images
d’arrière-plan, vous conservez le conteneur libre pour y insérer d’autres éléments.
4. Sélectionnez un élément en utilisant son sélecteur de balises et appuyez sur la touche
fléchée de gauche ou de droite pour déplacer le curseur avant ou après l’élément
sélectionné.
5. La fenêtre Navigation dans le code sert de détective CSS. Elle permet de déterminer
quelles règles mettent en forme un élément sélectionné et comment elles sont
appliquées.
6. Le HTML5 a introduit de nouveaux éléments sémantiques qui facilitent la création
et la mise en forme du code. Ces éléments permettent en outre aux moteurs de
recherche comme Google et Yahoo! d’indexer les pages plus rapidement et plus
efficacement.

13:32:41 +0200 26/09/2012 10:21:35
Aujourd’hui, les pages conçues en conformité avec les standards du web
séparent le contenu de la mise en forme. la mise en forme, stockée dans une
feuille de style CSS, peut être rapidement modifiée et remplacée en fonction
des applications ou des périphériques utilisés.
104

13:32:41 +0200 26/09/2012 10:13:30
Travailler avec des
feuilles de style CSS 5
Dans cette leçon, vous travaillerez dans Dreamweaver avec des feuilles de
style CSS et apprendrez à :
• gérer des règles CSS à l’aide du panneau Styles CSS ;
• découvrir la théorie et la pratique de la conception des règles CSS ;
• créer de nouvelles règles CSS ;
• créer et appliquer des classes CSS personnalisées ;
• créer des sélecteurs descendants ;
• créer des styles pour des éléments de mise en page ;
• déplacer des règles CSS vers une feuille de style externe ;
• créer des feuilles de style pour l’impression.
Cette leçon vous prendra environ deux heures. Avant de commencer, assurez-
105

13:32:41 +0200 26/09/2012 10:13:30
� Note : Le Pour avoir un aperçu de la page finale que vous allez créer au cours de cette leçon,
processus observez-la dans un navigateur.
d’ouverture d’un
fichier sur votre 1. Lancez votre navigateur favori. Choisissez Fichier > Ouvrir ou appuyez sur Ctrl+O/
disque dur peut Cmd+O.
différer selon le
navigateur que 2. Naviguez jusqu’au dossier lesson05. Sélectionnez layout_finished.html et cliquez
vous choisissez sur OK/Ouvrir.
d’utiliser. Si la
commande
suggérée ne
fonctionne pas
comme indiqué,
consultez les
documents d’aide
appropriés.
La page se charge dans la fenêtre du navigateur. Observez la mise en page, les

différentes couleurs et les autres styles appliqués au texte et aux éléments de page.
Tout a été créé par des styles CSS.
Travailler avec le panneau Styles CSS

À la Leçon 4, “Créer une mise en page”, vous avez utilisé l’une des mises en page
CSS proposées par Dreamweaver pour ébaucher la page de modèle de votre site. Ces
mises en page sont dotées d’une structure sous-jacente et d’un ensemble complet de
règles CSS prédéfinies, qui déterminent la structure de base et la mise en forme des
composants et du contenu de la page. Dans les prochains exercices de cette leçon,
vous allez modifier ces règles et en ajouter de nouvelles pour compléter la réalisation
du site. Mais avant de commencer il est primordial que, en tant que concepteur, vous
compreniez la structure et la mise en forme existantes, afin de pouvoir efficacement
accomplir vos tâches. Prenez quelques minutes pour examiner les règles et comprendre
leur rôle dans le document courant.
106 leçon 5 Travailler avec des feuilles de style CSS

13:32:41 +0200 26/09/2012 10:13:31
1. Si nécessaire, ouvrez mylayout.html dans le dossier racine du site. Si vous commencez
cette leçon en partant de zéro, utilisez la méthode décrite dans la sous-section
“Démarrage instantané” de la section “Guide de démarrage”, au début de ce livre.
2. Si le panneau Styles CSS n’est pas déjà visible, choisissez Fenêtre > Styles CSS
pour l’afficher.
Le panneau Styles CSS affiche la balise <style> indiquant que la feuille de style est
incorporée dans la section <head> du document.
3. Sélectionnez le mode Code et localisez la section <head> (qui commence à la � Astuce : Si
ligne 3). Localisez l’élément <style type="text/css"> (ligne 6) et examinez les vous ne voyez pas
les numéros de
entrées de code suivantes.
ligne le long de la
fenêtre du mode
Code, choisissez
Affichage
> Options
d’affichage de
code > Numéros
de ligne pour
activer cette
fonctionnalité.
Toutes les règles CSS affichées dans la liste sont contenues dans l’élément <style>.
� Note : Le code CSS est contenu dans une entrée de commentaire HTML , car les CSS
ne sont pas considérées comme du balisage HTML valide et pourraient ne pas être prises en charge
dans certaines applications ou sur certains périphériques. La structure de commentaire permet à
ces applications d’ignorer les CSS.
4. Notez les noms et l’ordre des sélecteurs dans le code CSS.

5. Dans le panneau Styles CSS, déroulez et examinez la liste des règles.
La liste présente les mêmes noms de sélecteur qu’en mode Code, dans le même
ordre. Le code CSS et le panneau Styles CSS sont directement liés. Lorsque vous
créez de nouvelles règles ou modifiez des règles existantes, Dreamweaver réalise
automatiquement toutes les modifications dans le code. Vous gagnez du temps et
réduisez les possibilités d’erreurs de saisie. Le panneau Styles CSS fait partie des
nombreux outils d’amélioration de la productivité que vous apprendrez à maîtriser
dans ce livre.

13:32:41 +0200 26/09/2012 10:13:32
À ce stade, vous devriez avoir vingt règles : dix-huit provenant de la mise en page
CSS et deux créées par vos soins à la précédente leçon. L’ordre de vos règles peut
différer de celui de la figure présentée ci-après, mais le panneau Styles CSS permet
aisément de réordonner cette liste.
� Note : Les
noms et l’ordre
des styles dans
votre panneau
peuvent différer
de ceux présentés
dans la figure.
Dans la dernière leçon, vous avez créé la <div#apDiv1> et l’avez insérée dans votre
mise en page de départ. La règle #apDiv1 s’applique à la <div> contenant le logo
du papillon et apparaît dans le code entre <div.container> et < header>. Mais,
comme vous pouvez le voir dans le panneau Styles CSS de la figure, la référence de
la règle apparaît en bas de la liste des règles. Le fait de déplacer cette règle dans la
feuille de style n’affecte pas son effet sur la mise en forme de l’élément, mais permet
de la trouver plus facilement si vous devez la modifier ultérieurement.
� Note : Avant de 6. Sélectionnez la règle #apDiv1 et faites-la glisser directement sous la règle .container.
déplacer d’autres
règles, vous
devez d’abord
comprendre
quelle fonction
chacune réalise et
quelles relations
elles ont les unes
avec les autres.
Dreamweaver a déplacé la règle dans la liste, mais ce n’est pas tout. Il a également
réécrit le code dans la feuille de style incorporée, en déplaçant la règle jusqu’à sa
nouvelle position. En regroupant ainsi les règles liées, vous gagnerez du temps par
la suite, lorsque vous devrez mettre en forme des éléments ou des composants
spécifiques. Prenez garde, toutefois, aux conséquences inattendues. Le déplacement
des règles peut perturber la cascade ou les relations d’héritage précédemment créées.
Consultez la Leçon 3, “Les bases des CSS”, pour un rappel théorique sur ce sujet.

13:32:41 +0200 26/09/2012 10:13:33
7. Sélectionnez la règle body dans le panneau Styles CSS. Observez les propriétés et
les valeurs qui apparaissent dans la section Propriétés du panneau.
La plupart de ces réglages proviennent de la mise en page d’origine, même si vous
avez modifié la couleur d’arrière-plan à la précédente leçon. Remarquez de quelle
manière les marges et le remplissage sont fixés à zéro.
8. Sélectionnez la règle ul, ol, dl et observez les valeurs qui s’affichent.
Comme la règle body, cette règle ramène les valeurs de marge et de remplissage à
zéro. Savez-vous pourquoi ? Un concepteur web expérimenté pourrait probablement
sélectionner chaque règle tour à tour et déterminer les raisons d’être de chacun des
formats et des réglages. Mais vous n’avez pas besoin d’embaucher un consultant,
car Dreamweaver fournit d’emblée bon nombre des informations nécessaires.
9. Cliquez du bouton droit sur la règle ul, ol, dl et, dans le menu contextuel,
choisissez Atteindre le code.
Si vous êtes en mode Création, Dreamweaver affiche le document en mode
Fractionner et le positionne au niveau de la section de code qui contient la règle
ul, ol, dl. En mode Code, il saute aux lignes appropriées qui contiennent la règle.
Observez le texte entre les marqueurs /* (ouverture) et */ (fermeture). C’est ainsi
qu’on ajoute des commentaires aux feuilles de style CSS. Comme les commentaires
HTML, ce texte fournit généralement sur le code des informations qui ne seront
pas affichées dans le navigateur et n’affecteront pas les éléments. Les commentaires
sont un bon moyen d’insérer des rappels pratiques dans le corps de la page web
ou d’y loger des notes, à sa propre intention ou à destination d’autres utilisateurs
pour expliquer le fonctionnement du code et les raisons de certains choix. Vous
remarquerez que des commentaires sont utilisés pour introduire un ensemble de
règles et d’autres sont incorporés dans la règle elle-même.
10. Faites défiler la feuille de style vers le bas et étudiez les commentaires, en prêtant
attention aux commentaires incorporés.
Vous obtiendrez de meilleurs résultats pour votre site final si vous comprenez bien ce
que font ces règles prédéfinies. Voici ce que vous trouverez : les règles body, .header,
.container, .sidebar1, .content et .footer définissent les éléments structurels de
base de la page. Les règles a:img, a:link, a:visited, a:hover, a:active et a:focus
définissent l’apparence et la performance du comportement par défaut des liens
hypertexte ; nav ul, nav ul li, nav ul a, nav ul a:visited, nav ul a:hover,
nav ul a:active et nav ul a:focus définissent l’apparence et le comportement
du menu vertical. Les règles restantes sont destinées à réinitialiser la mise en forme
par défaut ou à ajouter des styles, comme l’indiquent les commentaires incorporés.
Vous pourrez ainsi trouver des règles spécifiques plus facilement et vous rappeler
ce que vous avez déjà mis en forme dans votre page.
Pour l’essentiel, il n’y a rien d’inacceptable ni de néfaste dans l’ordre actuel des règles,
mais le fait de regrouper celles qui sont liées peut améliorer votre productivité
lorsque la feuille de style devient plus compliquée.

13:32:41 +0200 26/09/2012 10:13:34
11. Dans le panneau Styles CSS, réordonnez les règles dans la liste, comme le montre
la figure suivante.
Maintenant que vous avez pris conscience de l’importance des règles et de leur ordre,
le bon usage veut que vous fassiez attention à l’ordre des règles à partir de ce point.
� Note : Lorsque vous déplacez des règles dans le panneau Styles CSS, il peut arriver que la
position des commentaires incorporés ne soit pas préservée.
Travailler avec des polices

L’un des premiers choix de base que tout concepteur doit opérer pour un site web
consiste à sélectionner la ou les familles de polices par défaut. La famille de polices
peut évoquer toutes sortes d’impressions à vos visiteurs, en transmettant une image
de sécurité ou un sens de l’élégance, voire en donnant une touche d’amusement et
d’humour. Certains concepteurs peuvent utiliser plusieurs familles de polices pour
différentes fonctions dans le site. D’autres choisissent une unique famille de polices
qui correspond aux thèmes standard de leur entreprise ou de leur culture. Les CSS
offrent un haut niveau de contrôle sur l’apparence des pages.
� Note : Vous
avez appris à la
Leçon 3 que la Sélectionner un groupe de polices
règle body est le
parent de tous les Dans cet exercice, vous allez apprendre à paramétrer une famille de polices globale
éléments de page pour le site en éditant une seule règle.
visibles. Quand
vous appliquez 1. Si nécessaire, ouvrez mylayout.html et cliquez sur le bouton Création pour afficher
des styles à la page en mode Création.
body, tous les
éléments enfants 2. Dans le panneau Styles CSS, double-cliquez sur la règle body.
héritent de ces
spécifications par 3. Lorsque la boîte de dialogue Définition des règles de CSS pour body apparaît, observez
défaut. l’entrée affichée dans le champ Font-family : Verdana, Arial, Helvetica, sans serif.

13:32:41 +0200 26/09/2012 10:13:34
Le champ affiche trois familles de polices et un style de police. Pourquoi ? Dreamweaver
ne peut-il pas faire son choix ?
Ce choix correspond en fait à une solution simple et ingénieuse répondant à un
problème qui a enquiquiné les concepteurs web dès les premiers temps. Les polices
que vous voyez dans votre navigateur ne font pas partie de la page web ou du
serveur. Elles sont fournies par l’ordinateur qui surfe sur le site. Bien que la plupart
des ordinateurs aient de nombreuses polices en commun, ils ne possèdent pas
tous les mêmes. Cela signifie que, si vous choisissez une police et qu’elle n’est pas
installée sur l’ordinateur de l’internaute, votre mise en page ajustée au millimètre
peut s’afficher soudain en Courier ou avec une autre police tout aussi indésirable.
La solution consiste à spécifier les polices par groupes. Le navigateur se voit ainsi
proposer un deuxième, un troisième ou même un quatrième choix, voire plus
encore, en remplacement du choix par défaut avant qu’il ne soit conduit (à Dieu
ne plaise !) à faire son choix par lui-même. C’est une technique fameuse du Web
que l’on appelle parfois “rétrogradation élégante”.
Affichage de navigateur normal. La même page en Courier.

13:32:41 +0200 26/09/2012 10:13:36
Dreamweaver CS6 propose d’office plus d’une dizaine de groupes de polices prédéfinis.
Si vous ne trouvez pas de combinaison satisfaisante, sélectionnez l’option Modifier
la liste des polices en bas du menu Font-Family et créez vos propres groupes.
Avant de commencer à créer votre propre groupe, souvenez-vous toutefois de
ceci : ne choisissez pas votre police favorite, mais déterminez quelles polices sont
installées sur les ordinateurs de vos visiteurs. En effet, vous pouvez bien avoir un
faible pour la police Hoefelter Allgemeine Bold Condensed, mais il est peu probable
qu’une majorité d’utilisateurs l’aient installée sur leur ordinateur. Malgré tout, si
vous choisissez Hoefelter comme premier choix, n’oubliez surtout pas d’insérer
quelques polices plus éprouvées comme Arial, Helvetica, Tahoma, Times New
Roman, Trebuchet MS, Verdana et, pour finir, serif et sans serif.
4. Dans le menu Font-family, choisissez Trebuchet MS, Arial, Helvetica, sans serif.
Cliquez sur OK.
Vous venez de modifier la police de base de l’ensemble de la page web en éditant une
seule règle. Tout le texte de la page s’affiche maintenant avec la police Trebuchet MS.
Si Trebuchet MS n’est pas disponible sur l’ordinateur d’un visiteur, la page s’affichera
avec Arial, sinon Helvetica, sinon enfin avec une police sans serif.
Modifier la taille du texte

En plus de la police, vous pouvez aussi modifier la taille du texte à l’aide des règles CSS.
Dans la règle body, la taille de police est définie à 100 %. Cela définit la taille par défaut
de tous les éléments HTML de la page. Les titres, les paragraphes et les éléments de
liste sont tous dimensionnés relativement à ce réglage. Tous les éléments de la page
héritent de ce réglage à moins qu’il ne soit redéfini par une règle plus spécifique.
La taille de police peut exprimer l’importance relative des éléments de contenu de la
page. C’est en général la raison pour laquelle les titres sont généralement plus gros que
le texte qu’ils introduisent. Cette page est divisée en deux zones : le contenu principal
et la barre latérale. Pour donner plus d’emphase au contenu principal, réduisons la
taille du texte qui apparaît sous le menu vertical.
1. Placez le curseur dans la légende sous le menu vertical. Observez les sélecteurs de
balise en bas de la fenêtre de document. Identifiez l’élément qui contient la légende.
La légende est un élément <p> contenu dans l’élément <aside>, lequel est contenu
dans l’élément <div.sidebar1>. Pour réduire la taille du texte, vous pouvez créer
une nouvelle règle composée pour formater n’importe lequel de ces éléments.
Mais, avant de choisir quel élément formater, examinons les conflits potentiels qui
pourraient provenir de cette décision.
Créer une règle pour l’élément <p> ciblerait les paragraphes dans la barre latérale
mais ignorerait tous les autres éléments qu’on pourrait souhaiter y placer. On pourrait
formater la <div.sidebar1> elle-même. Les spécifications affecteraient alors à la
fois les titres et les paragraphes, mais elle s’appliquerait aussi à tout élément dans
la barre latérale, dont le menu vertical. Dans le cas présent, la meilleure solution

13:32:41 +0200 26/09/2012 10:13:36
serait de créer une nouvelle règle qui formate l’élément <aside>. Une telle règle
ciblerait étroitement la mise en forme du contenu placé à cet endroit et ignorerait
complètement le menu vertical.
2. Cliquez sur <aside> dans le sélecteur de balises en bas de la fenêtre de document
et cliquez sur l’icône Nouvelle règle de CSS ( ).
3. Dans le menu déroulant Type de sélecteur de la boîte de dialogue Nouvelle règle
de CSS, sélectionnez Composé.
Le champ Nom du sélecteur affiche la mention .container .sidebar1 aside.

4. Cliquez sur le bouton Moins spécifique pour supprimer la classe .container.
Cliquez sur OK.
5. Dans le champ Font-size de la boîte de dialogue Définition de règle de CSS pour � Astuce :
.sidebar1 aside, tapez 90. Choisissez % dans le menu déroulant des unités de En utilisant
un sélecteur
mesure. Cliquez sur OK.
composé, vous
Le texte dans l’élément <aside> s’affiche maintenant à 90 % de sa taille d’origine. ne ciblez que
les éléments
6. Choisissez Fichier > Enregistrer. <aside> qui
apparaissent
dans <div.
sidebar1>, ce
Utiliser des images pour des qui empêche
tout problème
effets graphiques d’héritage
indésirable si un
De nombreux concepteurs recourent à des images pour rendre des effets graphiques élément <aside>
se trouve autre
quand les techniques programmatiques peuvent être problématiques. Les images de part dans la page.
grande taille consomment cependant de la bande passante et ralentissent le charge-
ment et la réactivité des pages. Dans certains cas, une petite image conçue de manière
stratégique peut être utilisée pour créer d’intéressants effets de formes 3D.
Dans cet exercice, vous allez apprendre à créer un effet tridimensionnel à l’aide d’une
toute petite image et de la propriété CSS background.
1. Si nécessaire, passez en mode Création.
2. Dans le panneau Styles CSS, double-cliquez sur la règle nav p.
3. Sélectionnez la catégorie Arrière-plan. Cliquez sur le bouton Parcourir à côté du
champ Background-image.
La boîte de dialogue Sélectionner l’image source apparaît.

13:32:41 +0200 26/09/2012 10:13:37
4. Naviguez jusqu’à DW-CS6 > images et sélectionnez background.png. Observez
les dimensions de l’image et l’aperçu proposé.
L’image fait 8 × 75 pixels et pèse 49 kilo-octets. Vous remarquerez la teinte plus

claire du vert en haut de l'image. Comme la page fait 950 pixels de large, vous savez
que cette image ne pourrait jamais remplir le menu horizontal à moins qu'elle ne
soit copiée et collée des centaines de fois. Mais il n'est pas nécessaire de recourir à
ce type d'ancienne technique, grâce à la propriété background-repeat.
5. Cliquez sur OK /Choisir. Cliquez sur Appliquer.
� Astuce : L’image d’arrière-plan se répète automatiquement (verticalement et horizontalement)

Lorsqu’une de manière à remplir uniformément le menu horizontal, en lui donnant une
image propose
apparence tridimensionnelle et un intéressant effet de texture. Certaines images,
un effet texturé
en plus d’un comme celle-ci, ne sont pas conçues pour se répéter dans les deux directions. Ce
ombrage, comme graphique était destiné à créer un effet de 3D arrondi pour le bord supérieur de
background.png,
la page, si bien qu’il faudrait ne pas la répéter verticalement. Les CSS permettent
il est important
qu’elle soit assez de contrôler la fonction de répétition et de la limiter à l’axe vertical ou horizontal.
haute ou large
6. Choisissez repeat-x dans le menu déroulant Background-repeat. Cliquez sur OK.
pour remplir
l’élément comme L’image ne se répète maintenant plus qu’horizontalement. Elle s’aligne en haut de
il se doit. Vous
l’élément <nav> par défaut. Ajoutons le même arrière-plan à l’élément <footer>
remarquerez que
cette image est également.
bien plus haute
que l’élément
7. Double-cliquez sur la règle footer pour l’éditer.
dans lequel elle a 8. À côté du champ Background-image, cliquez sur Parcourir et choisissez background.
été insérée.
png. Dans le menu déroulant Background-repeat, choisissez repeat-x. Cliquez
sur OK.
L’image d’arrière-plan remplit l’élément <footer>.

13:32:41 +0200 26/09/2012 10:13:38
Créer des nouvelles règles CSS
Dans la plupart des précédents exercices, vous avez simplement édité les règles qui étaient
prédéfinies dans la mise en page CSS. Dans l’exercice suivant, vous allez apprendre à
créer vos propres règles personnalisées pour les éléments HTML, les classes et les ID.
Créer des sélecteurs descendants

La feuille de style prédéfinie déclare une règle pour plusieurs éléments, qui affectera
toutes les balises h1, h2, h3, h4, h5, h6 et p, quel que soit l’endroit où elles apparaissent
dans la page. Mais, si vous souhaitez cibler une balise en particulier dans un élément
spécifique, il faut un sélecteur descendant. Dreamweaver permet aisément de créer
ce genre de règle. Dans cet exercice, vous allez créer un sélecteur descendant qui
attribuera une mise en forme CSS spécifique en ciblant l’élément <h1> dans la zone
de contenu principal.
1. Placez le curseur dans le titre principal de la zone de contenu principale. Notez les
noms et l’ordre des sélecteurs de balises en bas de la fenêtre de document.
Le titre est un élément <h1> dans <article.content> à l’intérieur de <div.

container>, elle-même dans l’élément body. Comme vous l’avez vu plus tôt dans
ce chapitre, vous devez prêter attention, quand vous créez de nouvelles règles, à
leur emplacement dans la feuille de style. Les règles en haut de la feuille peuvent
passer des spécifications de mise en forme à celles qui apparaissent après (à l’aide
de l’héritage) ou annuler des réglages en raison d’un plus haut niveau de spécificité.
Une règle insérée au mauvais endroit peut être complètement ignorée par les
navigateurs. � Note : Lorsque
le curseur est
2. Sélectionnez la règle .content dans le panneau Styles CSS. inséré dans
le contenu
Si vous sélectionnez d’abord la règle .content, Dreamweaver insère la nouvelle de la page,
règle immédiatement après dans la feuille de style. Dreamweaver
crée
3. Dans le panneau Styles CSS, cliquez sur l’icône Nouvelle règle de CSS ( ). Si le automatiquement
sélecteur composé n’est pas affiché, choisissez-le dans le menu Type de sélecteur. le sélecteur
composé, même si
La boîte de dialogue Nouvelle règle de CSS s’affiche. En général, quand le curseur est l’option Composé
inséré dans le contenu de la page, la boîte de dialogue revient par défaut au type de n’est pas affichée
quand la boîte de
sélecteur Composé et affiche un sélecteur descendant en fonction de l’emplacement
dialogue apparaît
du curseur. Ici, il s’agit de .container .content h1. au départ.

13:32:41 +0200 26/09/2012 10:13:39
Si vous vous souvenez de la syntaxe CSS apprise à la Leçon 3, vous savez que cette
nouvelle règle affecte les éléments <h1>, mais uniquement quand ils apparaissent à
l’intérieur d’un élément auquel est appliquée la classe .content et quand les deux
sont eux-mêmes situés à l’intérieur d’un élément auquel est appliquée la classe
.container. Tous les autres éléments <h1> restent inchangés.
Comme il n’y aura qu’un seul élément <article.content> dans cette conception
de page, il n’est pas utile d’avoir une telle spécificité dans la règle. Dès que cela est
possible, efforcez-vous de simplifier les règles pour réduire la quantité de code à
télécharger. Ici, seule la notation .container est superflue, mais chaque portion
de code inutile vient s’ajouter aux autres dans le site (et sur Internet).
4. Dans la boîte de dialogue Nouvelle règle de CSS, cliquez sur le bouton Moins
spécifique. Cliquez sur OK.
Le mot .container est supprimé du champ Nom du sélecteur.
5. Dans la catégorie Type de la boîte de dialogue Définition des règles de CSS pour
.content h1, accédez au champ Font-size et tapez 200 %.
6. Dans la catégorie Boîte, désélectionnez l’option Idem pour tous dans la section
Marge et tapez 10 px dans le champ de marge Top. Tapez 5 px dans le champ de
marge Bottom. Cliquez sur OK.
Le titre principal ne change pas mais apparaît 10 pixels plus bas dans la page.
Vous remarquerez que la nouvelle règle a été insérée directement après la règle
.content dans le panneau Styles CSS.

13:32:41 +0200 26/09/2012 10:13:40
Créer des classes personnalisées
Les attributs de classe CSS permettent d’appliquer des mises en forme personnalisées
à des éléments spécifiques ou à une partie d’un élément spécifique. Créons maintenant
une classe pour appliquer la couleur du logo au texte dans le fichier :
1. Dans le panneau Styles CSS, cliquez sur l’icône Nouvelle règle de CSS.
2. Dans le menu Type de sélecteur, choisissez Classe. Dans le champ Nom du sélecteur, � Astuce :
tapez green. Cliquez sur OK. Lorsque la mise
en forme obtenue
3. Dans la boîte de dialogue Définition des règles de CSS pour .green, accédez à la ne correspond
catégorie Type et tapez #090 dans le champ Color. Cliquez sur OK. pas à ce qui était
prévu, utilisez le
La règle .green est ajoutée à la feuille de style. Dans la plupart des cas, l’attribut navigateur dans
de classe possède une spécificité plus haute que la mise en forme appliquée par le code pour
déterminer le
défaut à n’importe quel élément. L’endroit où la règle apparaît dans la feuille ne conflit.
doit donc pas importer.
Dreamweaver permet aisément d’appliquer des classes. Appliquons la classe à un
élément entier.
4. Placez le curseur n’importe où dans l’élément <h1> dans <article.content>. Assurez-
vous que le curseur clignote dans l’élément et qu’aucun texte n’est sélectionné.
5. Choisissez green dans le menu Classe de l’inspecteur Propriétés.
� Note : Vous
devrez peut-être
actualiser la
page pour voir
le sélecteur de
balises mis à jour.
� Astuce : Dans
certains cas, il se
peut que vous
deviez cliquer
sur le sélecteur
de balises
Tout le texte dans l’élément <h1> est maintenant formaté avec la couleur #900 approprié avant
(vert). En bas de la fenêtre de document, <h1.green> s’affiche maintenant dans le de sélectionner
la classe dans
sélecteur de balises. l’inspecteur
6. Passez au mode Code. Examinez la balise d’ouverture de l’élément <h1 >. Propriétés.
La règle est appliquée sous forme d’attribut à la balise : <h1 class="green">.

Lorsque le curseur est inséré dans un élément existant, Dreamweaver présuppose
que vous souhaitez appliquer la classe à l’élément entier.

13:32:41 +0200 26/09/2012 10:13:41
À présent, supprimons une classe d’un élément.
7. Dans la fenêtre du mode Code, placez le curseur n’importe où dans l’élément <h1>
formaté.
Même en mode Code, le sélecteur de balises affiche <h1.green> et green apparaît
dans le menu Classe de l’inspecteur Propriétés.
8. Choisissez Aucune dans le menu Classe de l’inspecteur Propriétés.
L’attribut class est supprimé du code. Le sélecteur de balises affiche maintenant

une balise <h1> simple. Bien que vous ayez appliqué la valeur Aucune, le menu
Classe affiche content au lieu de Aucune, et désigne ainsi l’attribut de classe assigné
à l’élément parent qui contient l’élément <h1>.
Appliquons maintenant une classe à une plage de texte.
9. Sélectionnez les mots “titre principal” dans l’élément <h1>. Choisissez green dans
le menu Classe de l’inspecteur Propriétés.
La classe est appliquée au texte sélectionné grâce à la notation <span class="green">.

La balise span ne possède pas de mise en forme par défaut. Elle est destinée à créer
des mises en forme incorporées personnalisées comme celle-ci.
À présent, supprimez la classe.

13:32:41 +0200 26/09/2012 10:13:42
10. Repassez au mode Création. Insérez le curseur n’importe où dans le texte formaté. � Astuce : Les
Choisissez Aucune dans le menu Classe. attributs de
classe peuvent
Le texte retrouve sa mise en forme originale. Lorsque le curseur est inséré dans être appliqués
un élément formaté avec une classe, Dreamweaver présuppose que vous souhaitez et supprimés en
mode Création ou
supprimer la mise en forme pour toute la partie formatée du texte. en mode Code.
Créer des ID personnalisés

L’attribut CSS id possède un poids plus important en termes de spécificité parmi les
styles CSS parce qu’il est utilisé pour identifier le contenu unique dans une page web
et doit avoir la priorité sur tout autre style. La div PA (<div#apDiv1>), qui contient
le logo du papillon, est un bon exemple d’élément unique. Elle se trouve à un empla-
cement spécifique de la page et il y a toutes les raisons de croire qu’il n’y aura qu’une
<div> comme celle-ci dans la page. Modifions la règle existante de cet élément afin
d’indiquer plus explicitement son rôle dans la mise en page.
1. Sélectionnez la règle #apDiv1 dans le panneau Styles CSS. Cliquez du bouton droit
sur le nom du sélecteur et choisissez Modifier le sélecteur dans le menu contextuel.
Le nom du sélecteur peut désormais se modifier dans la liste du panneau.
2. Changez le nom en le remplaçant par #logo. Appuyez sur Entrée pour finaliser le
processus d’édition.
Le nom de la règle change, mais elle ne met plus en forme <div#apDiv1>. La mise
en page reflète le comportement par défaut de l’élément <div> quand il n’est pas
mis en forme ; sans sa hauteur, sa largeur et ses autres attributs clés, il s’étend sur
toute la largeur de la <div.container> et pousse l’élément <header> vers le bas
sous l’image du papillon.
Pour restaurer la mise en page désirée, vous devez attribuer la nouvelle règle #logo
à <div#apDiv1>.
3. Placez le curseur dans <div#apDiv1> ou cliquez sur le papillon pour le sélectionner.
Ensuite, cliquez sur le sélecteur de balises <div#apDiv1> en bas de la fenêtre de
document.
L’inspecteur Propriétés affiche les propriétés de la <div#apDiv1>. Notez l’ID affiché
dans l’inspecteur Propriétés.

13:32:41 +0200 26/09/2012 10:13:43
4. Ouvrez le menu déroulant ID.
Notez que le menu propose deux options apparentes : apDiv1 et logo.

� Note : Sur Mac, 5. Choisissez logo dans le menu déroulant du champ ID.
il est possible que
vous ne puissiez Remise en forme, <div#logo> retrouve sa taille et sa position initiales.
pas accéder au
Les classes peuvent être utilisées aussi souvent que vous le souhaitez, mais les ID
menu déroulant
ID si aucun ID sont censés n’être utilisés qu’une seule fois par page. S’il est concevable que vous
non attribué n’est tapiez manuellement un même ID plusieurs fois, Dreamweaver, pour sa part, ne vous
disponible. aidera pas à enfreindre ainsi les règles. On peut le vérifier au moyen d’un test simple.
6. Examinez le panneau Styles CSS et notez les sélecteurs de classe et d’ID disponibles.
Il y a quatre classes et un sélecteur d’ID définis dans le panneau.
7. Insérez le curseur dans <div#logo>. Cliquez sur le sélecteur de balises <div#logo>.
L’inspecteur Propriétés reflète les spécifications appliquées à <div#logo>.
Une <div> à part

Les div PA ne sont pas traitées comme les éléments <div> normaux. Cette différence se remarque
dès que vous insérez une div PA dans un document. Dreamweaver crée automatiquement une règle
pour la div PA et lui associe des attributs de largeur, de hauteur, de position et d’index z, puis affiche
ces spécifications dans l’inspecteur Propriétés. Cela ne se produit pas avec une div normale. En fait, le
traitement spécial persiste même après que la règle a été créée. Si vous changez l’attribut d’ID de la div
PA dans l’inspecteur Propriétés, Dreamweaver met à jour le nom de la règle dans le panneau Styles CSS
en même temps.
Toutefois, l’inverse n’est pas vrai. Si vous changez le nom de la règle en utilisant la feuille de style (comme
vous l’avez fait dans cette leçon), Dreamweaver ne change pas l’ID sur l’élément lui-même. Le programme
vous laisse vous en charger.

13:32:41 +0200 26/09/2012 10:13:45
8. Ouvrez le menu déroulant du champ ID et examinez les ID disponibles.
Le seul ID disponible est logo. Qu’est-il arrivé à apDiv1 ? Le nom original apDiv1
n’apparaît plus dans la feuille de style et donc non plus dans le menu déroulant.
En outre, à mesure que chaque ID stocké dans la feuille de style est utilisé dans
votre mise en page, Dreamweaver le fait disparaître du menu déroulant pour vous
empêcher de l’utiliser accidentellement une seconde fois.
Ne concluez pas de ce comportement qu’il existe une loi déclarant que les attributs
d’ID et de classe doivent apparaître dans la feuille de style avant de pouvoir être
utilisés dans une page. Bien des concepteurs créent les attributs en premier puis
les définissent plus tard ou les utilisent pour différencier des structures de page
spécifiques ou pour créer des destinations de liens hypertexte. Certains attributs de
classe et d’ID peuvent ne jamais apparaître dans les feuilles de style ou les menus
déroulants. Les menus de Dreamweaver sont destinés à faciliter les attributs de
classe et d’ID qui existent déjà et non à limiter votre créativité.
9. Dans le menu du champ Classe, choisissez green.
Le sélecteur de balises affiche <div#logo.green>. Comme vous pouvez le voir, il
est possible d’attribuer à la fois un attribut de classe et un attribut d’ID à un même
élément. Cela peut être utile dans certains cas.
10. Insérez le curseur dans l’élément <nav> de menu horizontal. Cliquez sur le sélecteur
de balises <nav>.
11. Dans l’inspecteur Propriétés, ouvrez le menu ID et examinez les ID disponibles.
La seule option disponible est Aucun car l’ID logo est déjà attribué.

13:32:41 +0200 26/09/2012 10:13:47
12. Ouvrez le menu du champ Classe. Examinez les attributs de classe disponibles.
Vous remarquerez que tous les attributs de classe sont disponibles. L’interface de
Dreamweaver vous permet d’appliquer les attributs de classe à plusieurs éléments,
mais elle vous empêche d’appliquer les attributs d’ID plus d’une fois.
13. Fermez le menu Classe sans opérer de sélection.
Vous devriez maintenant connaître certaines des différences entre les classes et les ID,
ainsi que la manière de les créer, de les éditer et de les attribuer à des éléments dans
vos pages. Vous allez ensuite apprendre à combiner ces attributs en utilisant des CSS
pour créer des comportements interactifs pour les liens hypertexte.
Créer un menu interactif

En combinant des sélecteurs descendants, des classes et des ID, il est possible d’attribuer
d’étonnants comportements à des éléments en apparence statiques.
1. Si nécessaire, passez en mode Création et cliquez sur le bouton Affichage en direct.
La fenêtre de document présente la mise en page telle qu’elle apparaît dans un
navigateur. Les vidéos, l’animation Flash et les comportements JavaScript se
comportent alors comme ils le feraient sur Internet.
2. Placez le curseur au-dessus du menu de navigation vertical dans la barre latérale.
Observez le comportement et l’apparence des éléments de menu.
Lorsque la souris survole les boutons, l’icône du curseur se transforme en pointeur
sur chacun d’eux, afin d’indiquer que les éléments de menu sont des liens hypertexte.
Le bouton change aussi momentanément de couleur quand la souris le survole,
ce qui suscite un effet visuel efficace. Ces effets de survol sont tous produits par
les comportements des liens hypertexte HTML et peuvent être formatés en CSS.
3. Passez le curseur sur les éléments du menu de navigation horizontal dans < nav>.
Observez le comportement et l’apparence des éléments.
Le pointeur et la couleur d’arrière-plan ne changent pas. Les éléments ne sont pas
formatés comme des liens hypertexte.

13:32:41 +0200 26/09/2012 10:13:47
4. Cliquez sur le bouton Affichage en direct pour revenir à l’affichage normal du � Note :
document. Dreamweaver
vous empêche
5. Sélectionnez le mot Home dans < nav>. Ne sélectionnez pas les espaces d’un côté d’apporter des
et de l’autre du mot, ni les barres verticales qui séparent les mots. modifications à
votre contenu
6. Tapez # dans le champ Lien de l’inspecteur Propriétés. Appuyez sur Entrée. dans la fenêtre du
mode Création
Le signe dièse (#) dans le champ Lien crée un lien fictif et permet de créer et de pendant que
tester les formatages nécessaires pour le menu de navigation horizontal sans avoir l’Affichage en
à créer de véritables liens. Vous remarquerez que le texte possède maintenant la direct est activé,
mais vous pouvez
mise en forme d’un lien hypertexte classique. éditer les CSS. Si
vous le souhaitez,
7. Ajoutez des liens fictifs aux éléments About Us et Contact Us.
vous pouvez
Assurez-vous de sélectionner les deux mots dans chaque élément avant d’appliquer changer à la fois
le contenu et la
le lien fictif. Sans cela, chaque mot sera traité comme un lien distinct au lieu de
mise en forme en
n’en former qu’un. utilisant la fenêtre
du mode Code à
tout moment.
Correct. Incorrect.
Pour amener le menu horizontal à ressembler au menu vertical, vous devez supprimer
le soulignement et la couleur de texte. Commençons par le soulignement.
� Note : Comme les menus horizontal et vertical utilisent le même élément HTML5 <nav>, vous
devez avoir conscience que cette règle applique une mise en forme qui peut être héritée par les
deux. Vérifiez bien qu’il ne se produise pas d’effets indirects indésirables.
8. Placez le curseur dans l’un des liens hypertexte de l’élément <nav> horizontal.
Sélectionnez la règle nav p dans le panneau Styles CSS. Cliquez sur l’icône Nouvelle
règle de CSS.
9. Si nécessaire, choisissez Composé dans le menu Type de sélecteur.
Le nom nav p a apparaît dans le champ Nom du sélecteur.
Pseudo-classes des liens hypertexte

Il existe en tout quatre états ou comportements distincts pour l’élément <a> qui peuvent être modifiés
avec des CSS en utilisant ce que l’on appelle des pseudo-classes :
• La pseudo-classe a:link crée l’affichage et le comportement par défaut du lien hypertexte. La
pseudo-classe a:link est interchangeable avec le sélecteur a dans les règles CSS.
• La pseudo-classe a:visited applique sa mise en forme une fois que le lien a été visité.
• La pseudo-classe a:hover applique sa mise en forme quand le curseur passe au-dessus du lien.
• La pseudo-classe a:active formate le lien quand l’utilisateur clique dessus.
Les pseudo-classes doivent être utilisées dans cet ordre pour être efficaces. Rappelez-vous : qu’il soit
déclaré dans la feuille de style ou non, chaque état possède un ensemble de mises en forme et de
comportements par défaut.

13:32:41 +0200 26/09/2012 10:13:47
10. Dans la boîte de dialogue Nouvelle règle de CSS, cliquez sur le bouton Moins
spécifique.
La classe .container est supprimée du champ Nom du sélecteur.
La notation de classe .container n’est pas requise dans le cas présent.
Quand un lien a été utilisé, il change généralement de couleur, pour indiquer que
la page de destination a été précédemment consultée. Il s’agit du comportement
normal (par défaut) des liens hypertexte. Toutefois, nous ne souhaitons pas que les
liens changent d’apparence après qu’on a cliqué dessus dans les menus vertical et
horizontal. Pour empêcher cela, vous pouvez créer une règle composée qui formate
les deux états du lien à la fois.
11. Si nécessaire, placez le curseur dans le champ Nom du sélecteur. Appuyez sur
Ctrl+A/Cmd+A pour sélectionner tout le nom, appuyez sur Ctrl+C/Cmd+C pour
copier le sélecteur.
12. Appuyez sur la touche fléchée de droite pour déplacer le curseur à la fin du texte
sélectionné. Tapez :link pour l’ajouter à la fin du nom de sélecteur. Le nouveau
sélecteur nav p a:link est plus spécifique et empêchera tout héritage éventuel de
la règle a:link par défaut qui se trouve autre part dans la feuille de style, comme
cela s’est passé précédemment avec le menu vertical.
13. Si nécessaire, déplacez le curseur à la fin du texte de sélecteur. Tapez une virgule
(,) et appuyez sur la barre d’espace pour insérer un espace. Appuyez sur Ctrl+V/
Cmd+V pour coller le sélecteur du presse-papiers.
14. Tapez visited à la fin du sélecteur collé.
Le champ Nom du sélecteur doit maintenant contenir la mention nav p a:link,

nav p a:visited. La virgule fonctionne à la manière du mot “et”, en permettant
d’inclure plusieurs sélecteurs dans un nom. En combinant ces deux sélecteurs
dans une règle, vous formatez les propriétés par défaut des deux états de liens
hypertexte à la fois.
15. Cliquez sur OK.
La nouvelle règle nav p a:link, nav p a:visited apparaît dans le panneau Styles
CSS sous la règle nav p.
16. Dans la catégorie Type, cochez la case none du groupe Text-decoration. Cliquez
sur Appliquer.
Le soulignement est retiré des liens hypertexte. Changeons maintenant la couleur
de texte par défaut du lien hypertexte.
17. Dans le champ Color, tapez #FFC. Cliquez sur OK.

13:32:41 +0200 26/09/2012 10:13:48
La couleur bleue du lien hypertexte est remplacée par un jaune pâle (#FFC), plus
facile à distinguer sur le fond vert. Testons les propriétés de lien hypertexte des
éléments du menu horizontal.
18. Cliquez sur le bouton Affichage en direct. Passez le curseur au-dessus des liens
fictifs dans le menu horizontal.
L’icône de la souris se transforme en un pointeur en forme de main qui indique que
le texte est un lien hypertexte, mais celui-ci n’est pas dans le ton du menu vertical,
dont la couleur d’arrière-plan se modifie pendant le survol. Ce comportement
interactif est contrôlé par la pseudo-classe a:hover. Utilisons ce sélecteur pour
créer un comportement similaire.
19. Cliquez sur le bouton Affichage en direct pour repasser à l’affichage normal du
document. Enregistrez le fichier.
Modifier le comportement
des liens hypertexte
Dans cet exercice, vous allez modifier le comportement par défaut des liens hypertexte
et les rendre interactifs.
1. Placez le curseur dans l’un des liens hypertexte du menu horizontal. Inutile de � Note : L’état
sélectionner chacun des caractères du lien. Sélectionnez la règle nav p a:link, nav a:hover hérite
une bonne partie
p a:visited dans le panneau Styles CSS. Cliquez sur l’icône Nouvelle règle de CSS.
de ses propriétés
La boîte de dialogue Nouvelle règle de CSS apparaît. Le type de sélecteur Composé de mise en
forme de a ou
est sélectionné et le texte nav p a apparaît dans le champ Nom du sélecteur. a:link. Dans
2. Si nécessaire, sélectionnez le type de sélecteur Composé. Changez le nom du la plupart des
cas, vous n’avez
sélecteur en tapant nav p a:hover, nav p a:active. Cliquez sur OK. qu’à déclarer les
La nouvelle règle nav p a:hover, nav p a:active apparaît dans le panneau valeurs de mise
en forme qui
Styles CSS. La boîte de dialogue Définition des règles de CSS pour nav p a:hover, changent lorsque
nav p a:active s’affiche. cet état est activé.
3. Dans le champ Color de la catégorie, tapez #FFF.

Dans la catégorie Arrière-plan, accédez au champ Background-color et tapez #060.
Cliquez sur OK.
� Astuce : Savez-
4. Activez l’affichage en direct et testez le comportement du lien dans le menu vous pourquoi
vous avez ajouté
horizontal.
de l’espace au
remplissage et
non aux marges ?
L’ajout d’espace
aux marges ne
L’arrière-plan du texte du lien passe en vert foncé quand le curseur le survole. fonctionne pas,
C’est un bon début, mais vous aurez peut-être remarqué que cette modification de car les marges
ajoutent de
couleur ne s’étend pas jusqu’aux bords supérieur et inférieur de l’élément <nav> ou
l’espace en dehors
même jusqu’aux barres verticales qui séparent les liens les uns des autres. On peut de la couleur
créer un effet plus intéressant en ajoutant une touche de remplissage à l’élément. d’arrière-plan.

13:32:41 +0200 26/09/2012 10:13:48
5. Désactivez l’affichage en direct. Double-cliquez sur la règle nav p a:hover, nav
p a:active pour la modifier.
6. Dans le champ Padding de la catégorie Boîte, tapez 5 px en conservant l’option

Idem pour tous sélectionnée. Cliquez sur OK.
7. Activez l’affichage en direct et testez le comportement du lien dans le menu horizontal.
La couleur d’arrière-plan de chaque lien s’étend maintenant de cinq pixels autour
du lien hypertexte. Malheureusement, il y a une conséquence inattendue : non
seulement l’arrière-plan s’étend de cinq pixels en dehors du texte des deux côtés
du lien, mais il décale aussi l’autre texte de cinq pixels de sa position d’origine à
chaque fois que l’état a:hover est activé. Heureusement, la solution à ce problème
est assez simple. Devinez-vous ce qu’il faut faire ?
� Note : L’icône 8. Dans la section Propriétés du panneau Styles CSS, sélectionnez la propriété padding
de corbeille pour la règle nav p a:hover, nav p a:active. Cliquez sur l’icône Supprimer la
dans le panneau
Styles CSS est
propriété CSS ( ) en bas du panneau.
contextuelle. Elle
peut être utilisée
pour supprimer
une propriété de
règle ou la règle
entière, selon la
manière dont
elle est invoquée.
Avant de l’utiliser,
observez l’info-
bulle qui s’affiche
quand le curseur
la survole.
9. Double-cliquez sur la règle nav p a:link, nav p a:visited pour la modifier.

Dans la section Padding de la catégorie Boîte, cochez l’option Idem pour tous et
tapez 5 px. Cliquez sur OK.
10. Activez l’affichage en direct et testez le comportement du lien hypertexte dans le
menu horizontal.
Lorsque la souris survole les liens, la couleur d’arrière-plan s’étend de nouveau de
cinq pixels autour du lien, mais, cette fois, sans décalage. Comprenez-vous pourquoi
vous avez ajouté le remplissage au lien hypertexte par défaut ? L’état de survol (hover)
hérite du remplissage ajouté à l’état par défaut du lien hypertexte, ce qui permet à
la couleur d’arrière-plan de fonctionner comme prévu, sans décaler le texte.
Félicitations ! Vous venez de créer votre propre version du menu de navigation interactif
dans l’élément < nav> horizontal. Vous aurez cependant remarqué que la sélection de
couleur d’arrière-plan prédéfinie pour l’état a:hover dans le menu vertical ne concorde
pas avec la couleur du menu horizontal. Par souci d’harmonisation, les couleurs utilisées
dans le site doivent toujours se conformer au thème d’ensemble du site.

13:32:41 +0200 26/09/2012 10:13:49
Modifier le comportement d’un lien hypertexte existant
À mesure que vous acquerrez de l’expérience en conception web et CSS, il vous semblera
plus facile d’identifier les incohérences de conception et de savoir comment les corriger.
Comme vous savez que c’est l’état de survol qui crée le comportement interactif du
lien, il devrait être possible de changer simplement la couleur d’arrière-plan dans le
menu vertical. La première étape consiste à déterminer quelles règles appartiennent
spécifiquement à ce dernier.
1. Placez le curseur dans l’un des éléments de menu vertical. Observez les noms et
l’ordre des éléments dans le sélecteur de balises.
Le menu vertical utilise un élément <ul> (liste à puces) inséré dans un élément
HTML5 <nav>.
2. Localisez toutes les règles dans le panneau Styles CSS qui mettent en forme l’élément
<nav>. Existe-t-il une pseudo-classe a:hover associée ?
Le panneau Styles CSS affiche la règle nav ul a:hover, nav ul a:active, nav
ul a:focus qui définit le comportement de lien hypertexte recherché.
3. Double-cliquez sur la règle nav ul a:hover, nav ul a:active, nav ul a:focus

pour la modifier. Dans la catégorie Arrière-plan, changez la couleur d’arrière-plan
en la remplaçant par #060. Cliquez sur OK.
4. Utilisez l’affichage en direct pour tester le comportement du menu vertical.
La couleur d’arrière-plan du menu vertical correspond maintenant au menu
horizontal et à la charte de couleurs du site.
Ajouter un attrait visuel aux menus

Parmi les autres astuces CSS populaires qui rehaussent l’intérêt visuel des menus, l’une
consiste à varier les couleurs de bordures. En appliquant différentes couleurs à chaque
bordure, vous pouvez donner aux boutons une apparence 3D. Comme au précédent
exercice, vous devez d’abord localiser les règles qui mettent en forme les éléments.
1. Placez le curseur dans l’un des éléments de menu et examinez le sélecteur de balises.
Les boutons de menu sont créés en utilisant des éléments <nav>, <ul>, <li> et
<a>. Vous devriez maintenant savoir que l’élément <ul> crée la liste entière et non
les éléments individuels (ou boutons), si bien que vous pouvez déjà innocenter ce
premier suspect. L’élément <li> crée les éléments de liste.
2. Sélectionnez la règle nav ul li dans le panneau Styles CSS. Observez les attributs
affichés dans la section Propriétés du panneau.
La règle nav ul li met en forme la structure de base des boutons de menu.
3. Double-cliquez sur la règle nav ul li.

13:32:41 +0200 26/09/2012 10:13:49
4. Sélectionnez la catégorie Bordure dans la boîte de dialogue Définition des règles
de CSS pour nav ul li.
Dans les champs de bordure Top, tapez solid, 1 px et #0C0.
Dans les champs de bordure Right, tapez solid, 1 px et #060.
Dans les champs de bordure Bottom, tapez solid, 1 px et #060.
Dans les champs de bordure Left, tapez solid, 1 px et #0C0. Cliquez sur OK.
En ajoutant des couleurs plus claires en haut et à gauche et des couleurs plus sombres
à droite et en bas, vous avez créé un effet tridimensionnel subtil et efficace à la fois.
Avant. Après.
Créer des colonnes factices

Bien que les mises en page en colonnes soient très populaires sur le Web, le HTML
et les CSS ne possèdent pas de commandes prédéfinies pour produire de véritables
structures de colonnes dans les pages web. Les mises en page en colonnes (comme
celles utilisées dans les modèles CSS de Dreamweaver) sont simulées en utilisant plu-
sieurs types d’éléments HTML5 et différentes techniques de formatage qui combinent
généralement des marges et des attributs float. Le HTML5 et les CSS3 peuvent afficher
du texte en colonnes multiples, mais pour l’instant les mises en page elles-mêmes
dépendent encore des techniques plus anciennes.
Malheureusement, ces méthodes ont leurs limites et ne vont pas sans inconvénients.
Par exemple, l’un des problèmes de la mise en page de cette leçon concerne la possi-
bilité d’amener les deux colonnes à s’afficher à la même hauteur. Il arrivera presque
toujours que l’une des deux soit plus courte que l’autre. Comme la barre latérale possède
une couleur d’arrière-plan, un interstice visible apparaît en bas quand du contenu est
ajouté à la page principale.
Il existe des méthodes (avec du JavaScript) et des astuces de programmation pour
forcer les colonnes à atteindre une hauteur égale, mais elles ne sont pas totalement
prises en charge par tous les navigateurs et peuvent provoquer des résultats inatten-
dus. De nombreux concepteurs évitent radicalement ce problème en refusant tout
bonnement d’utiliser des couleurs d’arrière-plan. Personne ne peut alors remarquer
quelque divergence que ce soit.

13:32:41 +0200 26/09/2012 10:13:50
Avec des styles
CSS uniquement,
il n’est pas simple
de faire en sorte
que toutes
les colonnes
semblent de
même longueur
dans les mises en
page à plusieurs
colonnes.
Au lieu de cela, vous allez créer l’effet d’une colonne de barre latérale de pleine hau-
teur en utilisant une image d’arrière-plan combinée à la propriété CSS repeat. Cette
technique fonctionne bien avec les mises en page à largeur fixe, comme celle-ci.
1. Placez le curseur dans <div.sidebar1> sous le menu vertical. Examinez le sélecteur
de balises.
L’élément <div.sidebar1> est contenu dans la <div.container>, elle-même incluse
dans l’élément body.
2. Sélectionnez la règle .sidebar1 dans le panneau Styles CSS. Examinez ses propriétés.
La règle .sidebar1 applique une couleur d’arrière-plan à la barre latérale. Comme la
couleur d’arrière-plan attribuée à la <div> semble déjà échouer à s’étendre jusqu’au
bas du document, la règle .sidebar1 n’est pas la solution à ce problème. <div.
container>, qui contient la barre latérale ainsi que le contenu principal, est toute
trouvée pour créer la fausse colonne. Pour commencer, il est judicieux de supprimer
la couleur d’arrière-plan de la barre latérale si cela ne produit pas le résultat désiré.
3. Sélectionnez la référence de couleur d’arrière-plan dans la section Propriétés du
panneau Styles CSS. Cliquez sur l’icône Supprimer la propriété CSS (corbeille) en
bas du panneau.
À présent, vous allez modifier la règle .container afin de produire l’effet d’arrière-
plan désiré pour la barre latérale.
4. Double-cliquez sur la règle .container. Dans la catégorie Arrière-plan, cliquez sur
le bouton Parcourir. Sélectionnez divider.png dans le dossier d’images par défaut.
Cliquez sur OK/Choisir.
5. Dans le menu Background-repeat, choisissez repeat-y. Cliquez sur OK.
Une image de 182 pixels de large apparaît le long du bord gauche de la <div.
container> et s’étend du haut jusqu’en bas. Comme les autres éléments structurels
sont entièrement contenus dans <div.container>, l’arrière-plan apparaît derrière
eux et n’est visible que lorsqu’il le faut.

13:32:41 +0200 26/09/2012 10:13:50
Avant. Après.
Apportons deux derniers ajustements à la barre latérale. Pour commencer, supprimons

l’espace supplémentaire qui apparaît entre le menu et l’espace réservé pour l’image.
Vous devrez identifier la ou les règles qui peuvent créer ce style.
6. Placez le curseur dans le dernier bouton du menu vertical. Double-cliquez sur le
bouton et choisissez Navigateur dans le code dans le menu contextuel.
Le Navigateur dans le code apparaît, affichant une liste de douze règles CSS qui
affectent cet élément. Il est fort probable qu’un paramètre de marge produise l’effet
d’espacement.
7. Passez en revue les règles à la recherche d’un paramètre margin-bottom.
La règle nav ul contient un paramètre margin-bottom de 15 pixels.
8. Sélectionnez la règle nav ul dans le panneau Styles CSS. Sélectionnez le réglage
margin-bottom dans la section Propriétés. Cliquez sur l’icône Supprimer la propriété
CSS ( ).
L’interstice entre le menu et l’espace réservé pour l’image se referme. Pour finir,
faisons correspondre le texte dans le menu vertical à celui du menu horizontal.
9. Double-cliquez sur la règle nav ul.
10. Dans le champ Font-size de la catégorie Type, tapez 90%. Cliquez sur OK.
Déplacer des règles vers une

feuille de style externe
Lorsque vous créez le prototype d’une structure de page web, il est plus pratique que les
CSS restent incorporées au document. Cela rend le processus de test et de placement
plus simple et plus rapide. Le problème, c’est que la feuille de style interne est limitée
à une page. Les feuilles de style externes, en revanche, peuvent être liées à un nombre
quelconque de pages, et pour la plupart des applications web il s’agit de la procédure

13:32:41 +0200 26/09/2012 10:13:51
normale et favorite. Avant que cette page ne soit passée en production sous forme de
modèle, il est judicieux de déplacer les styles CSS de la section <head> du document
vers une feuille de style externe. Dreamweaver offre les moyens de gérer cette tâche
rapidement et facilement.
1. Dans le panneau Styles CSS, sélectionnez le premier style défini, body. Maintenez � Note : Le
la touche Maj enfoncée et sélectionnez le dernier style. dernier style
dans votre feuille
2. Dans le menu Options du coin supérieur droit du panneau Styles CSS, choisissez de style peut
Déplacer les règles CSS. différer de celui
de la figure.
Vous pouvez aussi cliquer du bouton droit sur la sélection pour accéder à l’option N’oubliez pas de
Déplacer les règles de CSS dans le menu contextuel. sélectionner la
dernière règle.
3. Lorsque la boîte de dialogue Déplacer dans une feuille de style externe apparaît,
choisissez Nouvelle feuille de style dans les options Déplacer les règles. Cliquez
sur OK.
La boîte de dialogue Enregistrer le fichier feuille de style sous apparaît.

4. Si nécessaire, naviguez jusqu’au dossier racine du site. Dans le champ Nom du
fichier, tapez mygreen_styles. Cliquez sur Enregistrer.
Dreamweaver ajoute l’extension .css au nom du fichier, déplace les styles sélectionnés
de la section <head> vers la nouvelle feuille de style et insère simultanément un lien

13:32:41 +0200 26/09/2012 10:13:51
vers cette feuille de style. Vous remarquerez en haut de la fenêtre de document,
sous l’onglet, que Dreamweaver affiche maintenant le nom de la feuille de style
externe dans la liste des fichiers liés.
La dernière tâche consiste à supprimer la balise <style> maintenant inutile.
� Astuce : Si 5. Dans le panneau Styles CSS, cliquez sur l’entrée <style> et appuyez sur Suppr ou
la référence ne cliquez sur l’icône de la corbeille.
disparaît pas, vous
pouvez cliquer 6. Choisissez Fichier > Enregistrer tout ou appuyez sur Ctrl+Alt+Maj+S/Cmd+Ctrl+S
dessus du bouton pour accéder au raccourci clavier de la commande Enregistrer tout que vous avez
droit et choisir
Supprimer dans le
créé à la Leçon 1, “Personnaliser son espace de travail”.
menu contextuel.
� Astuce : Une
fois que vous
Créer des feuilles de style
déplacez les
CSS dans un
pour d’autres supports
fichier externe,
Il est préconisé aujourd’hui de séparer la présentation (CSS) du contenu (balises HTML,
pensez à utiliser
la commande texte et autres éléments de page). La raison est simple : en isolant la mise en forme, qui
Enregistrer tout. peut ne convenir qu’à un type spécifique de support, on peut formater instantanément
Lorsque vous un document HTML pour plusieurs destinations. Il est possible de lier plusieurs feuilles
appuyez sur
Ctrl+S/Cmd+S, de style à une page. En créant et en attachant des feuilles de style optimisées pour
Dreamweaver d’autres supports, l’application de navigation spécifique peut sélectionner la feuille
n’enregistre que de style appropriée et utiliser la mise en forme adaptée à ses besoins. Par exemple, la
le document du
dessus. Les autres
feuille de style créée et appliquée dans les précédents exercices a été conçue pour un
fichiers ouverts affichage classique sur ordinateur.
et référencés qui
ont été modifiés Dans cet exercice, vous allez convertir un fichier CSS pour support écran en un fichier
ne sont pas optimisé pour les périphériques d’impression. Dans les pages qui contiennent beaucoup
automatiquement de texte, les concepteurs incluent souvent aujourd’hui un lien Imprimer pour permettre
enregistrés.
aux utilisateurs de transmettre plus efficacement les informations à l’imprimante. Les
feuilles de style pour l’impression ajustent souvent les couleurs pour les adapter aux
imprimantes laser et jet d’encre, masquent les éléments de page inutiles ou réadaptent
la taille des éléments et la structure des pages.
Lorsque la file d’attente d’impression est activée, l’application d’impression vérifie s’il
existe une feuille de style pour l’impression. Si c’est le cas, les règles CSS appropriées
sont prises en compte. Sinon l’imprimante se réfère aux règles des feuilles de style pour
l’écran ou tous supports ou aux réglages CSS par défaut pour l’impression.
Afficher la barre d’outils Rendu du style

Si aucun attribut media-type n’apparaît dans une feuille de style, le navigateur ou
l’application web présuppose que les styles CSS sont destinés à un affichage sur écran.
Par défaut, le mode Création de Dreamweaver affiche les styles associés au support
écran et ignore ceux des autres supports. Vous pouvez cependant redéfinir le type de

13:32:41 +0200 26/09/2012 10:13:52
support par défaut du mode Création en utilisant la barre d’outils Rendu du style, afin
de pouvoir observer le rendu de différents types de supports sans devoir accéder aux
applications ou aux périphériques correspondants.
1. Si nécessaire, ouvrez le fichier mylayout.html en double-cliquant sur son nom
dans le panneau Fichiers.
2. Choisissez Affichage > Barres d’outils > Rendu du style.
La barre d’outils Rendu du style apparaît au-dessus de la fenêtre de document.
Gardez-la visible pour le prochain exercice.
Rendu pour le type de Rendu pour le type Réduire la Afficher les styles pour :
support Téléphone mobile de support TV taille du texte pseudo-classe active
Rendu pour le type Rendu pour le type Augmenter la Afficher les styles pour :
de support Écran de support TTY taille du texte pseudo-classe visitée
Rendu pour le Invertir l’affichage des Réinitialiser la taille Afficher les styles pour :
type de support styles CSS du texte pseudo-classe survol
Impression
Rendu pour le type de Feuilles de style à Afficher les styles pour : Afficher les styles pour :
support Projection la conception pseudo-classe lien pseudo-classe focus
Convertir une feuille de style existante pour l’impression

Vous pouvez développer de toutes pièces une feuille de style pour l’impression, mais il
est généralement bien plus rapide de convertir la feuille de style pour écran qui existe
déjà. La première étape consiste à enregistrer la feuille de style externe existante sous
un nouveau nom :
1. Dans le panneau Fichiers, double-cliquez sur mygreen_styles.css pour l’ouvrir.
2. Choisissez Fichier > Enregistrer sous.
3. Quand la boîte de dialogue Enregistrer sous apparaît, tapez print_styles.css dans
le champ Nom du fichier/Enregistrer sous. Assurez-vous de sélectionner comme
cible le dossier racine du site. Cliquez sur Enregistrer.
4. Si nécessaire, ouvrez mylayout.html dans le dossier racine du site. Dans le panneau
Styles CSS, cliquez sur l’icône Attacher une feuille de style ( ).
La boîte de dialogue Ajouter une feuille de style externe apparaît.
5. Cliquez sur Parcourir.
La boîte de dialogue Sélectionner le fichier feuille de style apparaît.
6. Sélectionnez print_styles.css dans le dossier racine du site. Cliquez sur OK/Choisir.

13:32:41 +0200 26/09/2012 10:13:52
7. Dans la boîte de dialogue Ajouter une feuille de style externe, sélectionnez l’option
Lien dans la section Ajouter sous. Dans le menu Média, choisissez print. Cliquez
sur OK.
8. Si nécessaire, cliquez sur le bouton Tous dans le panneau Styles CSS.
Une nouvelle entrée (print_styles.css) a été ajoutée. Pour le moment, les deux feuilles
de style sont identiques. Vous allez modifier la feuille de style pour l’impression
au prochain exercice.
9. Fermez print_styles.css et mygreen_styles.css.
� Note :
N’oubliez pas de 10. Enregistrez mylayout.html.
cliquer sur l’icône
Rendu pour le
type de support Masquer des composants de page non désirés
Écran quand
vous serez prêt à Avec la barre d’outils Rendu du style, vous pouvez afficher votre document confor-
retravailler avec mément aux règles de style pour le support d’impression :
la mise en forme
pour écran.

13:32:41 +0200 26/09/2012 10:13:53
1. Dans la barre d’outils Rendu du style, cliquez sur l’icône Rendu pour le type de
support Impression ( ).
L’une des principales différences entre le support Écran et le support Impression
tient à ce que les éléments interactifs dans la page web sont souvent sans intérêt pour
l’impression. C’est ainsi le cas des éléments de navigation dans les menus horizontal
et vertical. Avec la feuille de style pour l’impression, vous pouvez masquer les parties
non désirées de la page. Commençons par les menus horizontal et vertical. Avant
de pouvoir les masquer, vous devez créer une nouvelle règle.
2. Placez le curseur dans l’un des liens du menu horizontal.
3. Cliquez sur le sélecteur de balises <nav> en bas de la fenêtre de document.
4. Dans le panneau Styles CSS, cliquez sur l’icône Nouvelle règle de CSS.
La boîte de dialogue Nouvelle règle de CSS apparaît.
5. Si nécessaire, choisissez le type de sélecteur Composé.
Le nom de sélecteur .container nav apparaît dans le champ.
6. Cliquez sur OK.
Cette règle s’appliquera aux deux menus horizontal et vertical.
7. Dans le menu Display de la catégorie Bloc, choisissez none. Cliquez sur OK.
Les deux éléments <nav> disparaissent de la fenêtre de document. Elles n’ont pas été
supprimées. Dreamweaver a tout simplement cessé de les afficher, temporairement,
pendant que l’icône Type de support Impression est sélectionnée. Le contenu
dans le reste de <div.sidebar1> n’est pas non plus requis pour l’impression.
Désactivons-le également.
8. Dans la liste de règles print_styles.css, double-cliquez sur la règle .sidebar1.
9. Dans le champ Display de la catégorie Bloc, choisissez none. Cliquez sur OK.
La barre latérale disparaît et le contenu principal s’étend sur toute la largeur de la
<div.container>. L’image d’arrière-plan est visible sous le contenu et peut rendre
le texte plus difficile à lire.
10. Dans la liste de règles print_styles.css, double-cliquez sur .container.
11. Dans la catégorie Arrière-plan, supprimez la référence d’image divider.png dans le
champ Background-image. Supprimez repeat-y dans le champ Background-repeat.
Cliquez sur Appliquer.

13:32:41 +0200 26/09/2012 10:13:53
Vous remarquerez que l’image d’arrière-plan continue à s’afficher dans <div.
container>. Il ne suffit pas de supprimer la référence d’image. L’application
d’impression se réfère bien à la feuille de style pour l’impression, mais la mise en
forme est encore héritée de toutes les feuilles de style référencées. Bien que vous
ayez supprimé la référence d’image d’arrière-plan dans la feuille de style pour
l’impression, elle est toujours appliquée dans les styles pour écran. Elle ne disparaîtra
pas tant que vous ne réinitialiserez pas la règle en en choisissant une. Cela vaut
également pour les autres règles.
12. Dans le menu Background-image, choisissez none. Cliquez sur Appliquer.
L’image d’arrière-plan disparaît. Vérifions la page en mode Affichage en direct.
13. Cliquez sur OK pour compléter la modification. Cliquez sur le bouton Affichage
en direct.
Bien que la barre d’outils Rendu du style soit paramétrée avec l’option Impression,
� Note : Certains
navigateurs
Dreamweaver ignore les styles pour l’impression et affiche l’image selon les styles
utilisent une autre pour écran. L’affichage en direct est destiné à offrir un aperçu de l’affichage dans
technique pour le navigateur et ne peut pas reproduire les styles pour l’impression. Pour tester
accéder au mode
correctement la page, vous devez utiliser la fonction d’aperçu avant impression
Aperçu avant
impression. Il se d’un navigateur.
peut que vous
14. Enregistrez tous les fichiers. Choisissez Fichier > Aperçu dans un navigateur et
deviez choisir
Fichier > Imprimer sélectionnez votre navigateur préféré.
avant d’avoir
accès à la fonction
15. Une fois que la page s’est chargée dans le navigateur, activez l’Aperçu avant impression.
d’aperçu dans la
boîte de dialogue
Imprimer.
� Note : D’après
l’aperçu, vous
pourriez supposer
que toutes les
applications
d’impression
convertiront le
texte en noir et
abandonneront
les couleurs et les Comme vous pouvez le voir, l’application d’impression a converti le texte en noir
images, mais ne et automatiquement supprimé toutes les images et couleurs d’arrière-plan, mais
vous y trompez
pas. Testez imprime toujours le logo du papillon et les bordures de page. Éliminons ces bordures.
toujours cette
16. Dans les règles print_styles.css, double-cliquez sur .container. Dans la catégorie
fonctionnalité
dans tous les Bordure, cochez si nécessaire l’option Idem pour tous de la colonne Style. Dans le
navigateurs afin menu déroulant Top, choisissez none. Cliquez sur OK.
de voir quels
autres styles 17. Enregistrez tous les fichiers.
doivent être
18. Choisissez Fichier > Aperçu dans un navigateur et sélectionnez votre navigateur
modifiés pour
l’impression. préféré.

13:32:41 +0200 26/09/2012 10:13:54
19. Une fois que la page s’est chargée dans le navigateur, activez l’aperçu avant impression.
La bordure a été supprimée avec succès.
20. Enregistrez tous les fichiers.
Comme vous pouvez le voir, les feuilles de style écran peuvent aisément être
adaptées pour l’impression. Vous devriez en savoir assez maintenant pour éviter
aussi que le logo du papillon ne s’imprime. Prenez quelques minutes pour voir si
vous y parvenez.
Supprimer les styles inutiles

Même avec les changements opérés dans les précédents exercices, bon nombre des
règles dans les deux feuilles de style sont identiques. Il n’est pas logique de conserver
deux jeux de styles qui réalisent les mêmes opérations. À chaque fois que vous avez la
possibilité de supprimer du code inutile de vos pages, vous devez le faire. Cela réduit
la taille des fichiers et permet aux pages de se télécharger et de réagir plus rapidement.
Supprimons de la feuille pour l’impression toutes les règles qui n’ont pas changé ou
celles qui n’ont plus de raison d’être. Vous pouvez supprimer les styles inutiles avec le
panneau Styles CSS. Soyez tout de même prudent : le fait qu’une règle n’ait pas changé
ne signifie pas nécessairement qu’elle soit inutile à l’impression.
1. Dans Dreamweaver, sélectionnez toutes les règles qui mettent en forme le menu
nav ul dans print_styles.css. Cliquez sur l’icône Supprimer règle de CSS ou cliquez
du bouton droit sur les règles sélectionnées et choisissez Supprimer dans le menu
contextuel. Cliquez sur Oui pour supprimer plusieurs règles.
Puisque le menu vertical n’est pas affiché, ces règles sont inutiles. Vous pouvez
d’ailleurs aussi retirer toutes les règles qui définissent les comportements des liens
hypertexte.
2. Sélectionnez toutes les règles de lien hypertexte dans print_styles.css (toutes
les règles qui mettent en forme les propriétés a, a:link, a:visited, a:hover et
a:active) et supprimez-les.

13:32:41 +0200 26/09/2012 10:13:54
Ne vous inquiétez pas. Vous n’avez pas besoin de ces styles parce que les liens
hypertexte dans les menus horizontal et vertical ne sont pas imprimés et les règles
restent identiques à celles des styles pour écran et seront héritées si l’application
d’impression le permet. Après avoir supprimé vos règles, testez toujours la page
dans votre navigateur et dans votre application d’impression.
4. Cliquez sur l’icône Rendu pour le type de support Écran ( ). Observez l’affichage
écran en mode Création.
Dreamweaver affiche le document pour le Web.
5. Cliquez sur l’icône Rendu pour le type de support Impression ( ).
Dreamweaver affiche le document à l’écran en utilisant la feuille de style pour
l’impression. Vous avez adapté une feuille de style pour écran afin que la page web
possède une meilleure apparence à l’impression.
Vous avez terminé la conception de base de la page qui sera utilisée comme modèle de
projet et l’avez adaptée à l’impression. Au cours de la prochaine leçon, vous apprendrez
à convertir cette mise en page en un modèle web dynamique.

13:32:41 +0200 26/09/2012 10:13:54
Révisions
Questions
1. Comment attacher une feuille de style externe à une page web ?
2. Comment cibler un type spécifique de contenu à mettre en forme dans une page web ?
3. Quelle méthode pouvez-vous utiliser pour masquer un contenu spécifique dans
une page web ?
4. Comment appliquer une classe CSS existante à un élément de page ?
5. Quel est l’intérêt de créer des feuilles de style pour différents types de supports ?
Réponses
1. Dans le panneau Styles CSS, choisissez Attacher une feuille de style. Dans la boîte
de dialogue Ajouter une feuille de style externe, choisissez le fichier CSS désiré et
sélectionnez le type de support (Média).
2. Vous pouvez créer une classe ou un ID personnalisés en utilisant des sélecteurs
descendants pour cibler la mise en forme sur des éléments spécifiques ou des
configurations spécifiques d’une page.
3. Dans la feuille de style, attribuez la valeur none à la propriété display de l’élément,
de la classe ou de l’ID pour masquer le contenu que vous ne souhaitez pas afficher.
4. L’une des méthodes consiste à sélectionner l’élément, puis à choisir le style désiré
dans le menu Classe de l’inspecteur Propriétés.
5. Le fait de créer et d’attacher des feuilles de style pour différents types de supports
permet d’adapter la page à d’autres applications que les navigateurs web, comme
les applications d’impression.

13:32:41 +0200 26/09/2012 10:13:55
les outils de productivité et les fonctionnalités de gestion de site de dreamweaver
font partie des fonctionnalités les plus utiles pour un concepteur affairé.
140

13:32:41 +0200 26/09/2012 10:15:14
Travailler avec
des modèles 6
Dans cette leçon, vous découvrirez comment travailler plus vite, accélérer
vos mises à jour et améliorer votre productivité. Vous utiliserez des modèles
Dreamweaver, des éléments de bibliothèque et des inclusions côté serveur
et apprendrez à :
• créer un modèle Dreamweaver ;
• insérer des zones modifiables ;
• produire des pages enfants ;
• mettre à jour des modèles et des pages enfants ;
• créer, insérer et mettre à jour des éléments de bibliothèque ;
• créer, insérer et mettre à jour des inclusions côté serveur.

cer, assurez-vous d’avoir copié les fichiers pour la Leçon 6 sur votre disque
141

13:32:41 +0200 26/09/2012 10:15:14
Pour mieux comprendre les sujets de cette leçon, observons dans un navigateur la
page telle que vous allez la finaliser.
1. Lancez Adobe Dreamweaver CS6.
2. Si nécessaire, appuyez sur Ctrl+Maj+F/Cmd+Maj+F pour ouvrir le panneau Fichiers
et choisissez DW-CS6 dans la liste des sites.
3. Dans le panneau Fichiers, déroulez le dossier lesson06. Double-cliquez sur le fichier
template_finished.html pour l’ouvrir. Observez la composition et la structure de
cette page.
Cette page a été créée à partir d’un modèle ; Dreamweaver affiche le nom du fichier
parent dans le coin supérieur droit de la fenêtre de document. La mise en page est
identique à la page terminée à la Leçon 5, à quelques exceptions près. Deux zones
dans la page affichent des onglets et des bordures bleues. Ces zones, appelées
régions modifiables, représentent les différences essentielles entre votre mise en
page actuelle et la mise en page finie du modèle.
4. Placez le curseur au-dessus de <header>. Vous remarquerez que l’icône de la souris
Dreamweaver disparaît.
L’icône ( ) signifie que la zone est verrouillée et ne peut pas être modifiée.
5. Sélectionnez l’espace réservé Add main heading here dans <article.content>. Tapez
Get a fresh start with GreenStart pour remplacer le texte. Enregistrez le fichier.
142 leçon 6 Travailler avec des modèles

13:32:41 +0200 26/09/2012 10:15:15
L’élément <article.content> se trouve dans la région modifiable bleue intitulée
MainContent, qui vous permet de sélectionner et d’éditer le contenu qui s’y trouve.
6. Choisissez Fichier > Aperçu dans un navigateur. Sélectionnez votre navigateur
par défaut.
L’affichage dans le navigateur ne donne aucun indice de différence avec la page
créée précédemment ; c’est là toute la magie des pages créées d’après un modèle. À
toutes fins, la page créée d’après un modèle est identique à un fichier HTML normal.
Les éléments de code supplémentaires qui activent ses fonctionnalités spéciales
sont de simples commentaires, qui ne sont consultés que par Dreamweaver et les
autres applications web et ne doivent jamais affecter ses performances ni s’afficher
dans le navigateur.
7. Fermez votre navigateur et revenez à Dreamweaver. Fermez template_finished.html.
Créer un modèle à partir d’une

mise en page existante
Le modèle Dreamweaver est une sorte de page maître à partir de laquelle sont générées
des pages enfants. Les modèles sont utiles pour configurer et gérer l’apparence générale
d’un site web, tout en offrant un moyen d’ajouter rapidement et aisément du contenu
au site. Le modèle est différent des pages que vous avez déjà réalisées. Il contient des
zones modifiables et d’autres qui ne le sont pas. Il permet, dans les environnements
en équipe, que le contenu des pages soit modifié par plusieurs personnes, tandis que
le concepteur web peut contrôler la structure des pages et des éléments spécifiques
qui doivent rester inchangés.
S’il est possible de créer un modèle à partir d’une page vierge, il est en fait plus pratique � Note : Si vous
(et plus courant) de convertir une page existante en modèle. C’est ce que vous allez n’êtes pas à l’aise
pour travailler
faire dans cet exercice. avec votre
1. Lancez Dreamweaver CS6. propre mise en
page, utilisez la
2. Si nécessaire, ouvrez le fichier mylayout.html (terminé à la fin de la Leçon 5) en méthode décrite
double-cliquant sur son nom de fichier dans le dossier racine du site web DW-CS6, dans la section
“Starter” de la
dans le panneau Fichiers. Si vous commencez par cette leçon, utilisez la méthode section “Prise en
décrite dans la sous-section “Démarrage instantané” de la section “Guide de main”, au début
démarrage”. de ce livre, et
ouvrez le fichier
La première étape pour convertir une page existante en modèle consiste à enregistrer mylayout.html
la page sous forme de modèle. fourni dans le
dossier lesson06.
3. Choisissez Fichier > Enregistrer comme modèle.
Parce qu’ils sont de nature spéciale, les modèles sont stockés dans leur propre dossier
nommé Templates, que Dreamweaver crée automatiquement à la racine du site.

13:32:41 +0200 26/09/2012 10:15:15
� Astuce : Le 4. Lorsque la boîte de dialogue Enregistrer comme modèle apparaît, choisissez
suffixe temp DW-CIB dans le menu déroulant Site. Conservez le champ Description vide (si
ajouté au nom de
vous avez plusieurs modèles dans un site, cette description peut être utile). Tapez
fichier, comme
auparavant mygreen_temp dans le champ Enregistrer sous. Cliquez sur Enregistrer.
celui de styles au
nom du fichier
CSS, contribue
à distinguer
visuellement les
différents types
de fichiers dans le
dossier du site.
� Note : Une
boîte de dialogue
peut apparaître
et vous signaler Une boîte de dialogue sans titre apparaît et vous demande si vous souhaitez mettre
que vous tentez à jour les liens.
d’enregistrer le
fichier alors que 5. Cliquez sur Oui pour mettre à jour les liens.
vous n’avez pas
défini de région Comme le modèle est enregistré dans un sous-dossier, la mise à jour des liens dans le
modifiable. code est nécessaire pour qu’il puisse continuer à fonctionner correctement lorsque
Cliquez sur Oui vous créerez des pages enfants par la suite.
pour enregistrer
le modèle malgré Si la page possède exactement la même apparence, le modèle peut s’identifier de deux
tout. Vous créerez moyens. Tout d’abord, la barre de titre indique <<Modèle>>. Ensuite, l’extension de
des régions
modifiables lors fichier est à présent .dwt (pour Dreamweaver template ou modèle Dreamweaver).
du prochain Les modèles Dreamweaver sont dynamiques car ils conservent un lien avec toutes les
exercice.
pages du site qui en dérivent. À chaque fois que vous ajoutez ou modifiez du contenu
dans les zones dynamiques de la page et l’enregistrez, Dreamweaver transmet automati-
quement ces modifications à toutes les pages enfants, en les mettant à jour. Un modèle
ne peut cependant être entièrement dynamique. Certaines sections de la page doivent
être modifiables pour qu’un contenu spécifique puisse y être inséré. Dreamweaver
permet de désigner certaines zones de la page comme étant modifiables.
Insérer des régions modifiables

Lorsque vous créez un modèle, Dreamweaver traite tout le contenu existant comme
faisant partie intégrante de la structure de la page maître. Les pages enfants générées
à partir du modèle en sont alors des copies exactes, mais leur contenu est verrouillé et
impossible à modifier. Cette restriction convient pour les fonctionnalités communes
des pages, comme les composants de navigation, les logos ou les informations de
contact, mais elle vous empêche d’ajouter un contenu unique à chaque page enfant.
Pour résoudre ce problème, vous devez définir des régions modifiables dans le modèle.
Dreamweaver insère automatiquement une région modifiable autour de l’élément
<title> de la section <head> de la page. Les autres doivent être créées manuellement.

13:32:41 +0200 26/09/2012 10:15:16
Pour commencer, réfléchissez aux zones de la page qui doivent faire partie du modèle
et à celles qui doivent devenir modifiables. En l’état, deux sections de votre mise en
page sont concernées : <article.content> et une partie de <div.sidebar1>. Bien
que les régions modifiables n’aient pas besoin d’être limitées à de tels éléments, elles
sont plus simples à gérer.
1. Placez le curseur dans <article.content>. Cliquez sur le sélecteur de balises
< article.content>.
2. Choisissez Insertion > Objets de modèle > Région modifiable.

3. Dans le champ Nom de la boîte de dialogue Nouvelle région modifiable, tapez
MainContent. Cliquez sur OK.
Chaque région modifiable doit posséder un nom unique, mais il n’existe pas d’autre
convention particulière. Cependant, le plus pratique est d’utiliser un nom court
et descriptif. Ce nom est uniquement utilisé dans Dreamweaver et n’a pas d’autre
influence sur le code HTML. En mode Création, vous verrez le nom dans un onglet
bleu au-dessus de la zone désignée, qui l’identifie comme une région modifiable.
Vous devez également ajouter une région modifiable à <div.sidebar1>. Elle � Note : Si vous
contient un espace réservé d’image et une légende que vous pouvez personnaliser créez ce modèle
en utilisant
sur chaque page. Elle inclut cependant aussi le menu vertical, qui contiendra les une mise en
liens de navigation principaux pour le site. Dans la plupart des cas, vous conserverez page HTML 4
plutôt les composants de ce type dans les zones verrouillées de la page, afin que le alternative
comme suggéré
modèle puisse les mettre à jour en cas de besoin. Par chance, la barre latérale est
à la Leçon 4,
divisée en deux éléments distincts : <nav> et <aside>. Dans le cas présent, vous “Créer une mise
allez ajouter la région modifiable à l’élément <aside>. en page”, nous
vous suggérons
4. Placez le curseur dans <aside>. Cliquez sur le sélecteur de balises <aside>. d’appliquer ces
étapes à <div.
5. Choisissez Insertion > Objets de modèle > Région modifiable. aside> à la place.
6. Dans le champ Nom de la boîte de dialogue Nouvelle région modifiable, tapez
SideContent. Cliquez sur OK.
Il est préférable d’ajouter un titre à chaque page. Le titre doit signaler le contenu
spécifique ou le rôle de la page, mais de nombreux concepteurs incluent également
le nom de l’entreprise pour renforcer l’image de l’organisation. L’ajout du nom au
modèle économise le temps de frappe dans chaque page enfant par la suite.

13:32:41 +0200 26/09/2012 10:15:16
7. Dans le champ Titre de la barre d’outils Document, sélectionnez le texte Document
sans titre et tapez Meridien GreenStart Association – Add Title Here pour le
remplacer.
8. Appuyez sur Entrée pour compléter le titre. Choisissez Fichier > Enregistrer.
� Note : La boîte Vous disposez maintenant de deux régions et d’un titre modifiables, qui peuvent être
de dialogue changés lorsque vous générez des pages enfants à l’aide de ce modèle. Celui-ci est
Mettre à jour les
pages du modèle
lié à vos feuilles de style et à vos fichiers dépendants, si bien que toute modification
apparaît lorsque apportée à ces fichiers se répercute automatiquement dans toutes les pages enfants
vous enregistrez conçues à l’aide de ce modèle.
le fichier. Comme
il n’existe pas
encore de page
associée à ce
modèle, cliquez
Générer des pages enfants
sur Ne pas mettre
Les pages enfants sont la raison d’être des modèles Dreamweaver. Lorsqu’une page
à jour.
enfant a été créée à partir d’un modèle, le contenu de ses régions modifiables peut
� Attention : Si être modifié dans la page enfant et le reste de la page est verrouillé. Ce mécanisme
vous ouvrez un n’est cependant apparent qu’au sein de Dreamweaver et des autres éditeurs HTML
modèle dans un pour le Web. Si vous ouvrez la page dans un éditeur de texte comme le Bloc-Notes ou
éditeur de texte,
tout le code est TextEdit, le code est entièrement modifiable.
modifiable, même Le choix d’utiliser des modèles Dreamweaver pour un site doit être fait au début du
celui des régions
non modifiables processus de conception, afin que toutes les pages du site puissent être créées sous
de la page. forme de pages enfants du modèle. C’était le but de la mise en page réalisée jusqu’ici :
définir la structure de base de votre modèle de site.
1. Choisissez Fichier > Nouveau ou appuyez sur Ctrl+N/Cmd+N.
La boîte de dialogue Nouveau document apparaît.
2. Dans la boîte de dialogue Nouveau document, sélectionnez Page issue d’un modèle.
Assurez-vous que l’option DW-CS6 est sélectionnée dans la liste. Choisissez
mygreen_temp dans la liste Modèle du site “DW-CS6”.

13:32:41 +0200 26/09/2012 10:15:16
3. Si nécessaire, cochez la case Mettre la page à jour quand le modèle est modifié.
Cliquez sur Créer.
Dreamweaver crée une nouvelle page en fonction du modèle. Notez le nom du
fichier de modèle affiché dans le coin supérieur droit de la fenêtre de document.
Enregistrez la page avant de la modifier.
4. Choisissez Fichier > Enregistrer. Dans la boîte de dialogue Enregistrer sous, naviguez
jusqu’au dossier racine du site. Tapez about_us.html dans le champ Nom du
fichier. Cliquez sur Enregistrer.
5. Passez le curseur au-dessus des différentes zones de la page.
Certaines zones, comme l’en-tête, la barre de menus et le pied de page, sont
verrouillées et ne peuvent donc pas être modifiées, à l’inverse du contenu situé
dans les régions modifiables.
6. Dans le champ Titre, sélectionnez le texte Add Title Here. Tapez About Us et
appuyez sur Entrée.
7. Sélectionnez le texte de remplissage Insert main heading here dans la région modifiable
MainContent. Tapez About Meridien GreenStart pour remplacer le texte.
8. Sélectionnez le texte de remplissage Insert subheading here dans la région modifiable
MainContent. Tapez GreenStart – green awareness in action! pour le remplacer.
9. Dans le panneau Fichiers, double-cliquez sur content-aboutus.rtf dans le dossier
lesson06 pour l’ouvrir.

13:32:41 +0200 26/09/2012 10:15:17
Le fichier s’ouvre dans un programme compatible, comme WordPad ou TextEdit.
10. Appuyez sur Ctrl+A/Cmd+A pour sélectionner tout le texte, puis sur Ctrl+C/
Cmd+C pour le copier.
11. Revenez à Dreamweaver. Sélectionnez le texte de remplissage Insert content here
dans la région MainContent. Appuyez sur Ctrl+V/Cmd+V pour coller le texte.
Le texte collé remplace le texte de remplissage.
12. Dans la région SideContent, double-cliquez sur l’espace réservé pour l’image. Dans
la boîte de dialogue Sélectionner la source de l’image, sélectionnez shopping.jpg
dans le dossier d’images par défaut. Cliquez sur OK.
13. Sélectionnez le texte de remplissage Insert caption here et remplacez-le par When
shopping for groceries, buy fruits and vegetables at farmers markets to support
local agriculture.
15. Cliquez sur le bouton Affichage en direct pour observer la page.

13:32:41 +0200 26/09/2012 10:15:18
Comme vous pouvez le voir, aucune indication ne montre que cette page enfant
diffère d’une quelconque autre page web standard. Il n’existe aucune limitation
quant au type de contenu que vous pouvez insérer dans les régions modifiables :
texte, images, tableaux, vidéos Flash, etc.
16. Cliquez sur le bouton Affichage en direct pour revenir à l’affichage standard du
document. Choisissez Fichier > Fermer.
Mettre à jour un modèle

Les modèles peuvent automatiquement mettre à jour les pages enfants qui en éma-
nent. Cependant, seules les zones en dehors des régions modifiables sont mises à jour.
Opérons quelques changements dans le modèle pour comprendre le fonctionnement
des mises à jour de modèles :
1. Choisissez Fenêtre > Actifs.
Le panneau Actifs apparaît. En général, il est associé au panneau Fichiers. Le
panneau Actifs vous offre un accès immédiat à une variété de composants et au
contenu de votre site web.
2. Dans le panneau Actifs, cliquez sur l’icône de catégorie Modèle ( ). Si aucun
modèle n’apparaît dans la liste, cliquez sur Actualiser ( ).
Le panneau affiche deux fenêtres de liste et d’aperçu pour les modèles du site. Le
nom de votre modèle apparaît dans la liste.
3. Cliquez du bouton droit sur mygreen_temp et choisissez Modifier dans le menu
contextuel.
Le modèle s’ouvre.
4. Sélectionnez le texte Home dans le menu horizontal. Tapez GreenStart Home
pour le remplacer.
5. Sélectionnez le texte News dans le menu vertical. Tapez Headlines pour le remplacer.

13:32:41 +0200 26/09/2012 10:15:18
6. Sélectionnez et remplacez le mot Insert par le mot Add partout où il apparaît dans
les régions modifiables MainContent ou SideContent.
La boîte de dialogue Mettre à jour les fichiers de modèle apparaît. Le nom du fichier
about_us.html apparaît dans la liste de mise à jour.
8. Cliquez sur le bouton Mettre à jour.

13:32:41 +0200 26/09/2012 10:15:19
La boîte de dialogue Mettre à jour les pages apparaît. Cochez l’option Afficher le
journal en bas de la boîte de dialogue pour afficher un rapport signalant quelles
pages ont pu être mises à jour et lesquelles ne l’ont pas été.
9. Fermez la boîte de dialogue Mettre à jour les pages.
10. Choisissez Fichier > Ouvrir les fichiers récents > about_us.html. Observez la page
et repérez les éventuels changements.
Les changements apportés aux menus horizontal et vertical sont répercutés dans
ce fichier, mais ceux qui ont été apportés aux zones d’encadrés et de contenu
principal ont été ignorées : le contenu que vous aviez ajouté dans ces zones est
resté inchangé. Vous pouvez ainsi opérer des modifications en toute sécurité et
ajouter du contenu aux régions modifiables sans craindre que le modèle n’efface
votre travail. Ce faisant, les éléments structurels comme l’en-tête, le pied de page
et le menu horizontal restent formatés de la même manière et sont mis à jour
conformément à l’état du modèle.

13:32:41 +0200 26/09/2012 10:15:20
11. Cliquez sur l’onglet du document mygreen_temp.dwt en haut de la fenêtre de
document pour passer au fichier de modèle.
12. Supprimez le mot GreenStart dans le lien Home du menu horizontal.

13. Enregistrez le modèle et mettez à jour les fichiers liés.
14. Cliquez sur l’onglet du document about_us.html pour y revenir. Observez la page
et repérez les changements.
Le menu horizontal a été mis à jour. Dreamweaver met même à jour les documents
liés qui sont ouverts en même temps. Le seul problème est que ces changements ne
sont pas enregistrés. L’onglet de ces documents affiche un astérisque, ce qui signifie
que le fichier a été modifié après son dernier enregistrement. Si Dreamweaver ou
votre ordinateur crashaient à cet instant, les modifications seraient perdues et vous
devriez mettre à jour la page manuellement ou attendre les prochaines modifications
du modèle pour tirer parti de la fonctionnalité de mise à jour automatique.
� Astuce : 15. Choisissez Fichier > Enregistrer tout.
Utilisez la
commande
Enregistrer tout à
chaque fois que Utiliser des éléments de bibliothèque
plusieurs fichiers
ouverts ont été Les éléments de bibliothèque sont des fragments de HTML réutilisables (des para-
mis à jour par un
modèle.
graphes, des liens, des informations de copyright, des tableaux, des images, des barres
de navigation, etc.) qui s’utilisent régulièrement dans un site mais cependant pas dans
toutes les pages (et qu’on n’inclura donc pas dans un modèle de site). Vous pouvez
employer un élément de page existante ou créer vos éléments de bibliothèque de
toutes pièces et en ajouter des copies aux endroits requis. Ces éléments agissent à la
manière des modèles, mais à petite échelle. Comme avec les modèles, lorsque vous
apportez et enregistrez des modifications à un élément de bibliothèque, Dreamweaver
met automatiquement à jour chacune des pages qui l’utilisent. En fait, les éléments de
bibliothèque sont si semblables aux modèles que certains choisissent même d’utiliser
des éléments de bibliothèque à la place des modèles.
Créer un élément de bibliothèque

Dans cet exercice, vous allez faire une expérimentation en adoptant un processus
alternatif qui utilise des éléments de bibliothèque au lieu de modèles.
1. Si nécessaire, ouvrez about_us.html. Choisissez Fichier > Enregistrer sous.
2. Enregistrez le fichier sous le nom library_test.html.

13:32:41 +0200 26/09/2012 10:15:20
Un nouvel onglet apparaît en haut de la fenêtre de document pour le nouveau
fichier. Il s’agit d’une copie exacte de la page About Us existante, jusqu’au lien vers
le modèle du site. Pour implémenter correctement le nouveau processus de travail,
vous allez d’abord devoir le détacher du modèle.
3. Choisissez Modifier > Modèles > Détacher du modèle.
Le nouveau fichier n’est plus relié au modèle. Les régions modifiables ont été
supprimées et vous pouvez les modifier librement. Sans lien vers un modèle de
site, vous ne pourrez pas rapidement et aisément mettre à jour les modifications
des fonctionnalités communes des pages. Vous devrez procéder page par page,
manuellement. À moins d’implémenter ces composants communs des pages en
utilisant des éléments de bibliothèque.
4. Placez le curseur dans le menu vertical. Cliquez sur le sélecteur de balises <nav>.
5. Choisissez Fenêtre > Actifs pour afficher le panneau Actifs.
6. Cliquez sur l’icône de catégorie Bibliothèque (bibliothèque).
Aucun élément de bibliothèque n’apparaît dans la liste pour cette leçon.
7. Cliquez sur l’icône Nouvel élément de bibliothèque (nouvel_élément) en bas du panneau.
Une boîte de dialogue apparaît, qui explique que l’élément de bibliothèque peut
changer d’apparence une fois placé dans d’autres documents, car les informations
de feuille de style ne sont pas incluses.
8. Cliquez sur OK. Dans le champ Nom, tapez vertical-nav. � Note : Ce
dossier n’a pas
Lorsque vous cliquez sur OK, Dreamweaver exécute trois opérations simultanées. besoin d’être
Il crée déjà un élément de bibliothèque à partir du code sélectionné du menu et placé sur le
insère une référence Sans titre dans la liste Éléments de bibliothèque en vous serveur.
permettant de le nommer. Il remplace également le menu existant par l’élément
de bibliothèque. Il place enfin un dossier à la racine du site appelé Library où cet
élément et les suivants seront stockés. À la Leçon 15, “Publier son site sur le Web”,
vous apprendrez quels fichiers doivent être placés sur Internet (ou “publiés”).
Les éléments de bibliothèque s’utilisent à la manière des modèles. Vous devez
insérer vos éléments de bibliothèque dans chaque page selon votre souhait puis
les mettre à jour en fonction des besoins. Pour tester cette fonctionnalité, créons
une copie de la page actuelle.
10. Choisissez Fichier > Enregistrer sous. Nommez le fichier library_copy.html.

13:32:41 +0200 26/09/2012 10:15:21
11. Fermez library_copy.html.
Le fichier original, library_test.html, est encore ouvert.
12. Cliquez sur le menu vertical. Placez le curseur au-dessus du menu vertical. Observez
l’affichage du menu.
Le texte du lien est grisé, ce qui indique que le menu n’est pas modifiable. L’élément
<nav> a été remplacé par <mm.libitem>. C’est ainsi que Dreamweaver affiche les
éléments de bibliothèque.
13. Cliquez sur le sélecteur de balises <mm.libitem>. Basculez la vue en mode Code.
Insérez votre curseur dans le code sélectionné.
Vous remarquerez que l’élément de bibliothèque contient le même code pour le

menu, bien qu’il soit surligné avec une autre couleur et enclos dans un balisage
spécial. La balise d’ouverture est la suivante :

La balise de fermeture est la suivante :


Soyez prudent cependant. Si l’élément de bibliothèque est verrouillé en mode

Création, Dreamweaver ne vous empêche pas de le modifier en mode Code.
� Note : Une boîte de dialogue peut apparaître à tout moment, lors de cette étape ou des deux
suivantes, pour vous avertir que les modifications seront supprimées la prochaine fois que vous
mettrez à jour la page à partir du modèle, comme indiqué ci-après. Pour les besoins de cet exercice,
cliquez sur Oui pour préserver les changements manuels.

13:32:41 +0200 26/09/2012 10:15:21
14. Sélectionnez le texte News dans le code. Tapez Headlines pour le remplacer.
15. Enregistrez le fichier et choisissez Fichier > Aperçu dans le navigateur. Choisissez
un navigateur dans la liste.
Le navigateur affiche la page avec le menu édité. Vous vous demandez peut-être
pourquoi aucune boîte de dialogue d’avertissement n’est apparue et pourquoi
Dreamweaver ne vous a pas empêché de procéder à cette modification. En réalité,
les choses sont encore sous contrôle. Dreamweaver tient registre de l’élément de
bibliothèque et de vos modifications, intentionnelles ou non. Comme vous allez le
voir sous peu, les modifications que vous avez réalisées n’auront qu’une existence
de courte durée.
16. Choisissez Fichier > Fermer tout.
Pour finir, une boîte de dialogue apparaît, qui vous avertit que vous avez apporté
des modifications à des portions de code verrouillées. Elle explique, en outre, que
le code d’origine sera restauré la prochaine fois que vous mettrez à jour le modèle
ou l’élément de bibliothèque. � Note : Le
changement
17. Cliquez sur Oui pour préserver vos modifications manuelles. Enregistrez toutes manuel apporté
les modifications. à l’élément de
bibliothèque reste
18. Cliquez du bouton droit sur vertical-nav dans la liste Éléments de bibliothèque et dans le menu
choisissez Mettre à jour le site dans le menu contextuel. pour l’instant.

13:32:41 +0200 26/09/2012 10:15:22
La boîte de dialogue Mettre à jour les pages apparaît.
19. Cliquez sur Démarrer.
Dreamweaver met à jour toutes les pages du site qui utilisent l’élément de bibliothèque
et établit un rapport concernant le résultat du processus. Une page au moins doit
avoir été mise à jour. Le fichier library_copy.html contient le menu non modifié,
et n’a donc pas besoin d’être mis à jour.
20. Cliquez sur Fermer pour quitter la boîte de dialogue.
21. Cliquez sur library_test.html dans l’écran de bienvenue pour rouvrir le fichier.
22. Cliquez sur le bouton Affichage en direct pour observer la page.
Le menu a été restauré avec le code d’origine. Les éléments de bibliothèque vous
permettent d’insérer du contenu répétitif dans le site et de le mettre à jour sans
avoir à rouvrir les fichiers un à un.
Mise à jour des éléments de bibliothèque

Les modèles, les éléments de bibliothèque et les inclusions côté serveur ont une raison
d’être : faciliter la mise à jour du contenu des pages web. Mettons à jour l’élément de
bibliothèque du menu.

13:32:41 +0200 26/09/2012 10:15:22
1. Dans la catégorie Éléments de bibliothèque du panneau Actifs, double-cliquez
sur l’élément vertical-nav ou cliquez du bouton droit sur l’élément dans la liste et
choisissez Modifier dans le menu contextuel.
Le menu vertical s’ouvre sous forme de liste à puces sans mise en forme. Les styles
sont appliqués via les CSS dans la page elle-même. L’élément de bibliothèque n’est
pas une page web autonome. Il ne contient que l’élément <nav> lui-même et non
le reste du code.
2. Passez en mode Code. Sélectionnez le texte News et tapez Headlines pour le
remplacer.

La boîte de dialogue Mettre à jour les éléments de bibliothèque apparaît.
4. Cliquez sur Mettre à jour.
La boîte de dialogue Mettre à jour les pages apparaît et indique quelles pages ont
bien été mises à jour et lesquelles n’ont pu l’être.
5. Cliquez pour refermer la boîte de dialogue Mettre à jour les pages.
6. Cliquez sur le bouton Affichage en direct. Observez le menu vertical.
Le menu vertical a bien été mis à jour. Vérifions library_copy.html.
7. Sélectionnez le panneau Fichiers et double-cliquez sur library_copy.html pour
l’ouvrir. Observez le menu vertical en mode Affichage en direct.
Le menu du modèle a lui aussi été mis à jour.
Vous avez utilisé des éléments de bibliothèque pour ajouter du contenu répété dans
vos pages. Comme vous pouvez le voir, les éléments de bibliothèque et les modèles
permettent de gagner un temps considérable pour modifier et mettre à jour plusieurs
pages. Dreamweaver a cependant encore un tour dans son sac : les inclusions côté serveur.
Utiliser des inclusions côté serveur

Les inclusions côté serveur s’apparentent en bien des points aux éléments de biblio-
thèque. Il s’agit de portions réutilisables de HTML (paragraphes, liens, informations
de copyright, barres de navigation, tableaux, images, etc.) que vous utilisez fréquem-
ment. Les principales différences entre les inclusions côté serveur et les éléments de
bibliothèque tiennent à la façon dont elles sont gérées dans le code de la page, puis à
l’intérieur du site.

13:32:41 +0200 26/09/2012 10:15:22
Par exemple, il faut qu’une copie complète de l’élément de bibliothèque soit insérée
dans le code de la page, avant que celle-ci ne soit publiée sur Internet (c’est la raison
pour laquelle les éléments de bibliothèque eux-mêmes n’ont pas besoin de résider sur
le serveur). Ensuite, chaque page affectée doit être mise à jour et chargée avant que la
modification ne soit prise en compte sur le site.
À la différence des éléments de bibliothèque, les inclusions côté serveur doivent être
stockées sur le Web, de préférence à l’intérieur du dossier web du site. En fait, le code
que contiennent les inclusions côté serveur n’apparaît nulle part dans la page elle-
même. Seule une référence à son nom de fichier et un chemin y figurent. L’inclusion
côté serveur n’apparaît que lorsque l’internaute accède à la page et l’affiche avec son
navigateur. Cette fonction a ses avantages et ses inconvénients.
Le point positif des inclusions côté serveur tient à ce qu’il s’agit du moyen le plus efficace
d’ajouter des fragments de HTML réutilisables à un grand nombre de pages. Elles sont
plus rapides et plus simples d’usage que les modèles ou les éléments de bibliothèque.
La raison en est simple : il suffit d’un fichier contenant un menu ou un bloc de contenu
important (une fois modifié et publié) pour mettre à jour la totalité des pages du site.
L’inconvénient, c’est que des dizaines, voire des centaines, de pages de votre site peuvent
dépendre d’un unique fichier pour fonctionner correctement. La moindre erreur dans
le code ou le nom du fichier, si mineure soit-elle, peut faire tomber en berne la tota-
lité de votre site. Pour les petits sites, les éléments de bibliothèque peuvent être une
solution parfaitement adaptée. Pour les sites de grande envergure, il est difficile de se
passer des inclusions côté serveur.
Dans cet exercice, vous allez créer une inclusion côté serveur et l’ajouter à une page
de votre site.
Créer des inclusions côté serveur

Les inclusions côté serveur sont presque identiques aux éléments de bibliothèque :
il s’agit de fichiers HTML débarrassés de tout code superflu. Dans cet exercice, vous
allez créer une inclusion côté serveur avec le code servant à créer le menu vertical.
Pour commencer, il faut rendre le menu modifiable à nouveau :
1. Si nécessaire, ouvrez le fichier library_test.html. En mode Création cliquez du bouton
droit sur le menu vertical. Choisissez Détacher de l’original dans le menu contextuel.

13:32:41 +0200 26/09/2012 10:15:23
Une boîte de dialogue explique que si vous rendez cet élément modifiable il ne pourra
plus être mis à jour de manière automatique quand l’élément source est modifié.
2. Cliquez sur OK.
Le balisage d’élément de bibliothèque est supprimé et le menu redevient modifiable.
3. Cliquez sur le sélecteur de balises <nav>. Passez dans la vue Code. Choisissez Édition
> Copier ou appuyez sur Ctrl+C/Cmd+C pour copier le code du menu vertical.
4. Choisissez Fichier > Nouveau. Sélectionnez l’option Page vierge dans la section
Catégorie. Dans la liste Type de page, choisissez HTML. Dans la liste Mise en page,
sélectionnez <aucune>. Cliquez sur Créer.
5. Si besoin, passez en mode Code.
Vous remarquerez que le document Sans titre est une page web entièrement formée.
Aucune partie du code HTML existant n’est cependant requise pour l’inclusion
côté serveur et pourrait au contraire provoquer des problèmes si elle était insérée
dans une autre page.
6. Appuyez sur Ctrl+A/Cmd+A pour sélectionner tout le code dans le nouveau fichier. � Note : Si
Appuyez sur Suppr. Le code est supprimé, et il reste une fenêtre vide. Le code du vous copiez des
éléments en
menu est toujours en mémoire. mode Code, vous
7. Choisissez Édition > Coller. devez utiliser le
mode Code au
moment de les
copier.
8. Choisissez Fichier > Enregistrer. Naviguez jusqu’au dossier racine du site. Dans la
boîte de dialogue Enregistrer sous, cliquez sur le bouton Créer un nouveau dossier.
Nommez le dossier includes. Si besoin, sélectionnez-le. Nommez le fichier vertical-
nav.html. Cliquez sur Enregistrer.
9. Fermez vertical-nav.html.
Vous avez terminé l’inclusion côté serveur pour le menu vertical. Au prochain exercice,
vous allez apprendre à l’insérer dans une page web.
Insérer des inclusions côté serveur

Sur un site web en production, vous devez publier les fichiers ou dossiers includes sur
le serveur avec les pages normales de votre site. Une commande insérée dans le code
des pages du site appellera le serveur pour lui demander d’ajouter le fichier include
HTML situé à l’emplacement indiqué. La commande include ressemblera à ceci :


13:32:41 +0200 26/09/2012 10:15:23
Vous voyez que ce fragment est constitué d’une commande include et du chemin
vers le fichier à inclure. La commande include peut varier selon le type de serveur
que vous utilisez. L’extension du fichier inclus et la page web peuvent également être
affectées. L’inclusion côté serveur est une fonction dynamique, elle requiert généra-
lement une extension de fichier qui la prenne en charge. Si vous enregistrez le fichier
avec l’extension .htm ou .html par défaut, il est possible que le navigateur ne charge
pas l’inclusion côté serveur. Dans l’exemple suivant, vous allez employer l’extension
.shtml, qui prend en charge la fonctionnalité d’inclusion côté serveur. Par la suite, vous
créerez des pages avec les extensions .asp, .cfm et .php pour la publication de données.
Ces extensions prennent toutes en charge l’inclusion côté serveur par défaut. Dans
certains cas, toutefois, il peut falloir enregistrer l’inclusion côté serveur elle-même
avec une autre extension.
Dans cet exercice, vous allez remplacer le menu existant par un menu stocké dans
l’inclusion côté serveur :
1. Si nécessaire, ouvrez library_test.html.
Le fichier contient toujours le menu vertical original. Pour insérer l’inclusion côté
serveur, vous devez le supprimer.
2. Placez le curseur dans le menu vertical. Cliquez sur le sélecteur de balises <nav>.
Appuyez sur la touche Suppr.
L’élément <nav> entier disparaît, mais ne déplacez pas votre curseur ; il est exactement
où il faut être pour insérer l’inclusion côté serveur. Faisons-le maintenant.
3. Sélectionnez Insertion > Server-Side Include.
4. Sélectionnez vertical-nav.html dans le dossier includes. Cliquez sur OK.
Le menu vertical réapparaît, mais on peut noter deux différences significatives :

le menu n’est pas modifiable et, fait plus important, le code du menu ne se trouve
même pas dans le fichier.

13:32:41 +0200 26/09/2012 10:15:25
5. Repassez en mode Code. Observez le code où le menu doit apparaître.
Le code pour l’élément <nav> a été remplacé par la commande include et un chemin
vers vertical-nav.html. Le code n’est pas présent ici, mais le menu s’affichera et
fonctionnera normalement sur Internet ainsi que dans Dreamweaver.
Inclusions invisibles ?
Les inclusions côté serveur peuvent être observées dans Dreamweaver en mode
Création et en mode Affichage en direct. Il se peut cependant qu’elles ne s’affichent
pas dans un navigateur quand elles sont encore placées sur votre disque dur local
et que vous n’utilisiez pas de serveur de test (à ce sujet, voir la Leçon 13, “Travailler
avec des données en ligne”). Pour tester correctement les inclusions côté serveur,
il peut falloir placer la page sur un serveur configuré pour opérer avec du contenu
dynamique.
Si vous ne voyez pas l’inclusion côté serveur dans Dreamweaver, il se peut qu’il
faille ajuster un paramètre des préférences du programme.
1. Appuyez sur Ctrl+U/Cmd+U pour éditer les préférences de Dreamweaver. Sinon

choisissez Édition > Préférences (Windows)/Dreamweaver > Préférences (Mac)
pour afficher la boîte de dialogue Préférences.
2. Dans la liste Catégorie, sélectionnez Éléments invisibles. Cochez l’option Afficher

le contenu du fichier inclus. Cliquez sur OK.

13:32:41 +0200 26/09/2012 10:15:25
6. Passez en mode Création. Cliquez sur le bouton Affichage en direct pour observer
la page. Testez le fonctionnement du menu vertical.
Le menu s’affiche et se comporte comme prévu.
� Note : Le nom 7. Sélectionnez Fichier > Enregistrer sous. Nommez le fichier library_test.shtml.
de l’inclusion
côté serveur peut Si vous n’avez pas omis le “s” initial dans l’extension de fichier, vous venez de créer
devoir changer une nouvelle version de library_test.html en conservant le fichier d’origine inchangé.
selon le modèle Sans cette nouvelle extension, l’inclusion côté serveur n’apparaîtra pas une fois placée
de serveur que
vous utilisez.
sur le serveur web. En l’état, vous verrez même que l’inclusion côté serveur ne peut
Les modèles certainement pas être testée dans votre navigateur principal.
de serveurs
dynamiques Les inclusions côté serveur ont besoin d’une fonctionnalité de serveur spécifique qui
(ASP, CF ou les gère et les charge dans le navigateur.
PHP) requièrent
différents noms Pour les tester sur votre disque dur, il faut installer et exécuter un serveur web local.
d’extension et Comme nous n’aborderons ce sujet qu’à la Leçon 13, vous devrez vous contenter pour
différents types l’instant de tester les inclusions en mode Affichage en direct.
de commandes
d’inclusion. Jusqu’ici, vous avez créé une inclusion côté serveur et l’avez insérée dans une page du
site. Au prochain exercice, vous verrez à quel point il est facile de mettre à jour un
fichier qui utilise une inclusion côté serveur.
Mettre à jour des inclusions côté serveur

Le travail avec des modèles et des éléments de bibliothèque, s’il offre de considérables
améliorations en termes de productivité, peut malgré tout être une tâche pénible. Les
modifications doivent être enregistrées et mises à jour dans toutes les pages appropriées
et chaque page mise à jour doit être replacée sur le serveur. Lorsque les modifications
concernent des centaines de pages, le problème s’aggrave. Avec des inclusions côté
serveur, le seul fichier à changer, à enregistrer et à publier est le fichier include lui-
même. Pour découvrir cette méthode en action, il peut être utile d’insérer l’inclusion
côté serveur dans plus d’une page.
1. Ouvrez le fichier library_copy.html. Remplacez l’élément de bibliothèque qui
contient le menu vertical par l’inclusion côté serveur, vertical-nav.html, comme
vous l’avez fait dans library_test.shtml.
2. Enregistrez le fichier sous le nom library_copy.shtml.
Changeons maintenant le fichier include et voyons comment Dreamweaver gère
l’opération.
3. Choisissez Fichier > Ouvrir les fichiers récents > vertical-nav.html. Vous pouvez
aussi ouvrir l’inclusion côté serveur en double-cliquant sur son nom dans le
panneau Fichiers.
4. Placez le curseur à la fin de la dernière puce, Green Tips. Appuyez sur Entrée pour
insérer un nouvel élément de liste. Tapez Green Club sur la nouvelle ligne.

13:32:41 +0200 26/09/2012 10:15:26
Vous avez créé un nouvel élément de liste à puces, mais il ne sera pas formaté de
la même manière que les autres éléments de menu si vous n’ajoutez pas un lien
hypertexte factice.
5. Sélectionnez le texte Green Club et tapez # dans le champ Lien de l’inspecteur
Propriétés pour créer un lien hypertexte factice.
Vous avez ajouté un nouvel élément de menu avec un lien hypertexte factice.
6. Cliquez sur l’onglet du document library_test.shtml puis l’onglet de library_copy.
shtml pour amener ces fichiers au premier plan. Observez le menu vertical dans � Astuce : Dans
la plupart des cas,
les deux fichiers. Dreamweaver met
instantanément
Le menu n’a pas encore changé ici.
à jour l’inclusion
7. Cliquez sur l’onglet de vertical-nav.html pour afficher cette page. Enregistrez le fichier. côté serveur. Si ce
n’est pas le cas,
8. Examinez le menu vertical dans library_test.shtml et library_copy.shtml. appuyez sur F5
pour actualiser
Les menus ont changé dans les deux fichiers. Vous remarquerez autre chose : les l’affichage ou
onglets des fichiers en haut de la fenêtre de document n’affichent pas d’astérisque assurez-vous
pour signaler que le fichier a été changé et doit être enregistré. Pourquoi ? Parce que que vous avez
bien enregistré
l’inclusion côté serveur ne fait pas partie du fichier. Lorsque le code a été changé le fichier include,
dans vertical-nav.html, rien n’a bougé dans ce fichier. comme il se doit.
9. Fermez tous les fichiers.

13:32:41 +0200 26/09/2012 10:15:26
Vous avez appris à créer une inclusion côté serveur, à l’ajouter à une page et à la mettre
à jour. Bien d’autres éléments de pages web (comme des logos, des menus, des notes
de confidentialité et des bannières) peuvent être ajoutés à votre site avec des inclusions
côté serveur faciles à gérer.
Les outils de productivité de Dreamweaver (modèles, éléments de bibliothèque,
inclusions côté serveur) vous aident à créer des pages et à les mettre à jour automa-
tiquement, rapidement et facilement. Dans les leçons suivantes, vous allez utiliser le
modèle terminé à l’instant pour créer des fichiers pour votre site. S’il est préférable de
choisir d’utiliser des modèles ou d’autres outils de productivité dès le début du travail
sur vos sites, il n’est jamais trop tard pour y faire appel afin d’accélérer votre travail et
de simplifier la maintenance de vos sites.
Désolé, pas d’inclusions

serveur pour le moment
Les inclusions côté serveur sont des composants logiques essentiels pour tous les concepteurs web. Vous
vous demandez donc peut-être pourquoi nous n’en ajoutons pas au modèle de projet que vous venez de
terminer. C’est parce que les inclusions côté serveur ne peuvent pas être observées dans le navigateur sans
serveur d’évaluation, en restant simplement stockées sur votre ordinateur local. Par souci pratique, nous nous
en tiendrons donc aux éléments de bibliothèque pour ce projet, mais, une fois que votre serveur d’évaluation
sera opérationnel, n’hésitez pas à remplacer de manière permanente les éléments de bibliothèque par des
inclusions côté serveur équivalentes.
Inclusions côté serveur dans Dreamweaver. Inclusions côté serveur sans serveur web local.

13:32:41 +0200 26/09/2012 10:15:27
Révisions
Questions
1. Comment créer un modèle à partir d’une page existante ?
2. En quoi un modèle est-il dynamique ?
3. Que faut-il ajouter à un modèle pour le rendre véritablement utile ?
4. Comment créer une page enfant à partir d’un modèle ?
5. Quelles sont les différences et les similitudes entre les éléments de bibliothèque et les
inclusions côté serveur ?
6. Comment créer un élément de bibliothèque ?
7. Comment créer un fichier include côté serveur ?
Réponses
1. Choisissez Fichier > Enregistrer comme modèle et entrez le nom du modèle dans la boîte
de dialogue pour créer un fichier .dwt (modèle Dreamweaver).
2. Un modèle est dynamique parce que Dreamweaver maintient une connexion à toutes
les pages qui en dérivent dans le site. Lorsque le modèle est mis à jour, il peut passer les
modifications aux zones dynamiques des pages enfants.
3. Vous devez ajouter des régions modifiables au modèle. Sans cela, aucun contenu unique
ne peut être ajouté aux pages enfants.
4. Choisissez Fichier > Nouveau et, dans la boîte de dialogue Nouveau document, sélectionnez
la catégorie Page issue d’un modèle, localisez le modèle de votre choix et cliquez sur
Créer. Sinon cliquez du bouton droit sur le nom du modèle dans la catégorie Actifs >
Modèles et choisissez Nouveau à partir du modèle.
5. Les éléments de bibliothèque et les inclusions côté serveur sont utilisés pour stocker et
présenter des éléments de code réutilisables et des composants de page. Toutefois, si le
code des éléments de bibliothèque est entièrement inséré dans la page ciblée, celui des
inclusions côté serveur n’est inséré que par le serveur, de manière dynamique.
6. Sélectionnez le contenu de la page que vous souhaitez ajouter à la bibliothèque. Choisissez
Modifier > Bibliothèque > Ajouter un objet dans la bibliothèque. Dans le volet Bibliothèque
du panneau Actifs, nommez l’élément de bibliothèque.
7. Ouvrez un nouveau document HTML vierge. Saisissez son contenu. En mode Code,
supprimez tous les éléments de page du code, à l’exception du contenu que vous souhaitez
inclure. Enregistrez le fichier au format approprié à votre configuration de travail.

13:32:41 +0200 26/09/2012 10:15:27
dreamweaver propose de nombreux outils pour créer, éditer et formater le
contenu des pages web, qu’il ait été créé directement dans le programme ou
importé depuis d’autres applications.
166

13:32:41 +0200 26/09/2012 10:23:17
Travailler avec
du texte, des listes
et des tableaux 7
Dans cette leçon, vous allez créer plusieurs pages web à partir de votre
nouveau modèle et travailler avec des titres, des paragraphes et d’autres
éléments de texte pour réaliser les tâches suivantes :
• saisir du texte de titre et de paragraphe ;
• insérer du texte provenant d’une autre source ;
• créer des listes à puces ;
• créer du texte en retrait ;
• insérer et modifier des tableaux ;
• vérifier l’orthographe du texte de votre site ;
• chercher et remplacer du texte.
Cette leçon vous prendra environ 2 heures et 45 minutes. Avant de commen-

167

13:32:41 +0200 26/09/2012 10:23:17
Afin de vous familiariser avec les fichiers sur lesquels vous travaillerez dans la première
partie de cette leçon, observons les pages terminées dans un navigateur.
1. Si nécessaire, lancez Adobe Dreamweaver CS6. Fermez tous les fichiers actuellement
ouverts si Dreamweaver est déjà ouvert.
2. Appuyez s’il le faut sur F8/Cmd+Maj+F pour ouvrir le panneau Fichiers et choisissez
DW-CS6 dans la liste des sites. Si vous commencez cet exercice en partant de zéro,
utilisez la méthode décrite dans la sous-section “Starter” de la section “Prise en
main”, au début de ce livre.
3. Dans le panneau Fichiers, déroulez le dossier lesson07. Si vous utilisez la méthode
Starter, tous les fichiers de la leçon apparaîtront dans le dossier racine du site.
Dreamweaver vous permet d’ouvrir un ou plusieurs fichiers à la fois.
4. Sélectionnez contactus_finished.html. Appuyez sur Ctrl/Cmd et sélectionnez
events_finished.html, news_finished.html et tips_finished.html.
En appuyant sur Ctrl/Cmd avant de cliquer, vous avez la possibilité de sélectionner
plusieurs fichiers non consécutifs.
5. Cliquez du bouton droit sur n’importe quel fichier sélectionné. Choisissez Ouvrir
dans le menu contextuel.
Les quatre fichiers s’ouvrent. Des onglets les identifient chacun en haut de la
fenêtre de document.
6. Cliquez sur l’onglet news_finished.html pour le faire passer au premier plan.
Observez les titres et les éléments de texte utilisés.

7. Cliquez sur l’onglet tips_finished.html pour le faire passer au premier plan.
168 leçon 7 Travailler avec du texte, des listes et des tableaux

13:32:41 +0200 26/09/2012 10:23:18
Observez les éléments de liste à puces utilisés.
8. Cliquez sur l’onglet contactus_finished.html pour le faire passer au premier plan.
Observez les éléments de texte mis en forme et en retrait.

9. Cliquez sur l’onglet events_finished.html pour le faire passer au premier plan.
Observez les deux tableaux utilisés. Dans chacune des pages, différents éléments
sont utilisés, dont des titres, des paragraphes, des listes, des puces, du texte en
retrait et des tableaux. Lors des prochains exercices, vous allez créer ces pages et
apprendre à formater chacun de ces éléments.
10. Choisissez Fichier > Fermer tout.

13:32:41 +0200 26/09/2012 10:23:19
Créer et mettre en forme du texte
La plupart des sites web sont composés de larges blocs de texte avec quelques images
parsemées ici ou là pour le plaisir de l’œil. Dreamweaver offre une variété de moyens
de créer, d’importer et de mettre en forme du texte pour toutes sortes de besoins. Dans
les prochains exercices, vous allez apprendre une variété de techniques pour travailler
avec du texte et le mettre en forme.
Importer du texte
Dans cet exercice, vous allez créer une nouvelle page à partir du modèle de site, puis
insérer du texte de titre et de paragraphe à partir d’un document texte.
1. Choisissez Fenêtres > Actifs pour afficher le panneau Actifs. Dans la catégorie
Modèle, cliquez du bouton droit sur mygreen_temp et choisissez Nouveau à partir
d’un modèle dans le menu contextuel.
� Astuce :
Lorsque vous
déplacez
individuellement
des articles de
texte, le fait de
couper le texte
permet de garder
une indication
Une nouvelle page est créée à partir du modèle de site.
visuelle des
paragraphes 2. Enregistrez le fichier sous le nom news.html dans le dossier racine du site.
qui ont déjà été
déplacés. 3. Dans le panneau Fichiers, double-cliquez sur green_news.rtf dans le dossier
lesson07 > resources.
� Astuce :
Lorsque vous Le fichier s’ouvre dans un programme compatible. Le texte n’est pas mis en forme
utilisez le presse- et inclut des lignes supplémentaires entre chaque paragraphe. Ces lignes sont
papiers pour ajoutées intentionnellement. Pour une raison ou une autre, Dreamweaver supprime
importer dans
Dreamweaver
les sauts de paragraphe lorsque vous copiez et collez du texte depuis l’extérieur du
du texte programme. Le fait d’ajouter un deuxième saut de paragraphe force Dreamweaver
venant d’autres à respecter ces séparations.
programmes,
vous devez être Ce fichier contient quatre nouveaux articles. Lorsque vous les déplacez vers la
en mode Création page web, vous créez vos premières structures sémantiques. Comme indiqué
si vous souhaitez
précédemment, la conception web sémantique s’efforce de fournir un contexte pour
que les sauts de
paragraphe soient le contenu web afin qu’il soit plus facile pour les utilisateurs et les applications web
respectés. de retrouver les informations et de les réutiliser si besoin. Pour mieux y satisfaire,

13:32:41 +0200 26/09/2012 10:23:19
vous allez déplacer chaque article dans la page web un par un et les insérer dans
leurs propres structures de contenu individuelles.
4. Dans l’éditeur de texte ou le programme de traitement de texte, placez le curseur
au début du texte Green Buildings earn more Green et sélectionnez tout le texte
jusqu’à “Energy Waster”? inclus (les quatre premiers paragraphes). Appuyez sur
Ctrl+X/Cmd+X pour couper le texte.
5. Revenez à Dreamweaver. En mode Création, sélectionnez le titre de remplissage
Add main heading here dans <article.content> et tapez Green News pour le
remplacer.
6. Placez le curseur dans le titre de remplissage Add subheading here. Notez les
sélecteurs de balises en bas de la fenêtre de document.
Les textes de titre et de paragraphe sont contenus dans l’un des nouveaux éléments
HTML5 sémantiques : <section>. En insérant chaque article dans son propre
élément <section>, vous l’identifiez comme du contenu autonome distinct qui
peut être affiché indépendamment du reste.
7. Cliquez sur le sélecteur de balises <h2> pour sélectionner l’élément. En maintenant
la touche Maj enfoncée, cliquez à la fin du texte de remplissage Add content here.
Le titre et le texte de remplissage sont sélectionnés.
8. Appuyez sur Ctrl+V/Cmd+V pour coller le texte copié dans le presse-papiers et � Astuce :
remplacer le texte de remplissage. Utilisez le
sélecteur de
Le texte du presse-papiers apparaît dans la page. Vous êtes prêt à passer à l’article balises <h2>
suivant. pour sélectionner
le texte de
9. Enregistrez le fichier. remplissage et
les balises HTML
En utilisant une technique apprise précédemment, vous allez créer trois nouveaux également.
éléments <section> puis les remplir avec les articles de news restants.
Processus HTML4 alternatif

Les sections qui suivent décrivent et mettent en place une procédure HTML5 qui
utilise des éléments et des structures sémantiques. Si vous ne pouvez pas suivre
cette procédure et devez utiliser des éléments et des structures HTML 4, ne craignez
rien. Vous pouvez créer vos propres pages avec une mise en page CSS HTML 4
équivalente et insérer votre contenu directement dans l’élément <div.content>
qui s’y trouve ou remplacer par des éléments <div> génériques tous les éléments
sémantiques présentés ci-après. Vous pouvez même créer une structure sémantique
en ajoutant un attribut comme class=”section” à l’élément <div> conteneur.

13:32:41 +0200 26/09/2012 10:23:20
Créer des structures sémantiques
Dans cet exercice, vous allez insérer trois éléments HTML5 <section> pour contenir
le reste des articles de news. Si vous devez travailler en HTML 4, vous pouvez insérer
les articles dans des éléments individuels <div> puis leur attribuer un attribut de classe
avec la valeur section. Cette technique ne possède cependant pas la même portée
sémantique que l’élément HTML5 <section>.
1. Passez à l’éditeur de texte ou au traitement de texte. Sélectionnez les quatre
paragraphes suivants, en commençant à Shopping green saves energy et en terminant
par …in your own community. Appuyez sur Ctrl+X/Cmd+X pour couper le texte.
2. Repassez à Dreamweaver. En mode Création, insérez le curseur n’importe où dans
l’article de news existant et cliquez sur le sélecteur de balises <section>.
L’élément <section> entier et son contenu sont sélectionnés.
3. Appuyez sur la touche fléchée de droite une fois pour placer le curseur juste après
la balise </section> fermante dans le code.
� Astuce : Il peut 4. Appuyez sur Ctrl+T/Cmd+T pour accéder à l’Éditeur de balises. Tapez <section>
falloir appuyer ou double-cliquez sur la section dans le menu d’indications de l’Éditeur de balises
deux fois sur
et appuyez sur Entrée pour créer l’élément.
Entrée pour créer
le nouvel élément.
5. Appuyez sur Ctrl+V/Cmd+V pour coller le texte du presse-papiers et l’insérer dans

le nouvel élément <section>.
Le deuxième article de news apparaît dans le nouvel élément <section>.

13:32:41 +0200 26/09/2012 10:23:20
6. Répétez les étapes 1 à 5 pour créer de nouveaux éléments <section> pour les deux
articles restants.
Lorsque vous aurez terminé, vous devriez avoir quatre éléments <section>, un
pour chaque article de news.
7. Fermez green_news.rtf. N’enregistrez aucune des modifications.
8. Enregistrez news.html.
Créer des titres

En HTML, les balises (<h1>, <h2>, <h3>, <h4>, <h5> et <h6>) créent des titres. Tous les
périphériques de navigation, qu’il s’agisse des ordinateurs, des lecteurs Braille ou des
téléphones mobiles, interprètent le texte formaté avec ces balises comme étant des
titres. Les titres sont utilisés pour introduire des sections distinctes avec des intitulés
utiles, exactement comme dans les livres, les articles de magazines et les publications.
Conformément à la sémantique des balises HTML, le contenu des actualités commence
par un titre Green News formaté avec la balise <h1>. Comme <h1> est le titre le plus
important, en toute rigueur sémantique en HTML 4, il ne faut utiliser qu’un seul titre
de ce type par page. En HTML5, les meilleures pratiques n’ont cependant pas encore
été formalisées. Certains estiment que nous devons continuer la pratique adoptée en
HTML 4. D’autres pensent qu’il doit être possible d’utiliser un <h1> dans chaque élément
sémantique ou chaque structure d’une page. En d’autres termes, chaque <section>,
<article>, <header> ou <footer> devrait avoir son propre <h1>.
En attendant que les pratiques soient codifiées, continuons à n’utiliser qu’un seul élé-
ment <h1> par page (comme titre de la page). Tous les autres titres doivent donc être
de niveau inférieur. Comme toutes les brèves d’actualité sont d’importance égale, elles
peuvent toutes commencer par un titre de second niveau, <h2>. Pour le moment, tout
le texte collé est formaté sous forme d’éléments <p>. Formatons les titres d’actualité
sous forme d’éléments <h2>.
1. Sélectionnez le texte Green Buildings earn more Green et choisissez Titre 2 dans le � Astuce : Si le
menu Format dans l’inspecteur Propriétés ou appuyez sur Ctrl+2/Cmd+2. menu Format
n’est pas visible,
sélectionnez
le mode HTML
de l’inspecteur
Propriétés.
Le texte sera formaté sous forme d’élément <h2>.

2. Répétez l’étape 1 avec les textes Shopping green saves energy, Recycling isn’t always
Green et Fireplace: Fun or Folly?
Tout le texte sélectionné doit maintenant être converti en éléments <h2>. Créons
une règle personnalisée pour cet élément afin de le distinguer des autres titres.

13:32:41 +0200 26/09/2012 10:23:21
3. Placez le curseur dans l’un des éléments <h2> récemment formatés. Si nécessaire,
choisissez Fenêtre > Styles CSS pour ouvrir le panneau Styles CSS.
4. Sélectionnez la règle .content h1 de mygreen_styles.css dans le panneau Styles
CSS avant de cliquer sur l’icône Nouvelle règle de CSS ( ).
� Astuce : Un bon concepteur web gère soigneusement le nom et l’ordre des règles CSS. En
sélectionnant une règle dans le panneau avant de cliquer sur l’icône Nouvelle règle de CSS, vous
amenez Dreamweaver à insérer la nouvelle règle immédiatement après la sélection. Si la nouvelle
règle n’apparaît pas au bon endroit, faites-la glisser jusqu’à l’emplacement désiré.
5. Choisissez Composé dans le menu Type de sélecteur. Cliquez sur le bouton Moins
spécifique, puis sur OK.
� Note : Par
défaut, chacune
des balises de
titres (<h1>,
<h2>, <h3> et
ainsi de suite) est
mise en forme
avec une taille de
police plus réduite
que la précédente.
Cette convention
souligne
l’importance La boîte de dialogue Nouvelle définition de règles CSS pour .content h2 apparaît.
sémantique de
6. Dans la catégorie Type, tapez 170 % dans le champ Font-size et #090 dans le
chaque balise. Si
la taille permet champ Color.
d’indiquer de
manière évidente
la hiérarchie des
éléments, elle n’a
rien d’impératif ;
n’hésitez pas à
tester d’autres
techniques de
mise en forme,
par exemple
en utilisant
des couleurs,
des retraits,
des bordures
et des trames
d’arrière-plan
pour créer votre
propre structure
7. Dans la catégorie Boîte, décochez l’option Idem pour tous de la section Margin et
hiérarchique. tapez 15 px uniquement dans le champ Bottom de la section Margin. Cliquez sur OK.

13:32:41 +0200 26/09/2012 10:23:21
8. Dans le champ Titre du document, sélectionnez le texte de remplissage Add Title
Here. Tapez Green News pour le remplacer. Appuyez sur Entrée pour finaliser le titre.
Créer des listes

La mise en forme doit ajouter du sens, de l’organisation et de la clarté au contenu. L’une
des méthodes pour ce faire est d’utiliser les éléments de liste HTML. Les listes sont les
chevilles ouvrières du Web, car elles sont plus faciles à lire que les blocs de texte dense
et parce qu’elles aident les utilisateurs à trouver plus rapidement les informations.
Dans cet exercice, vous allez apprendre à créer une liste HTML.
1. Choisissez Fenêtre > Actifs pour afficher le panneau Actifs au premier plan. Dans
la catégorie Modèle, cliquez du bouton droit sur mygreen_temp et choisissez
Nouveau à partir d’un modèle dans le menu contextuel.
Une nouvelle page est créée d’après le modèle.
2. Enregistrez le fichier sous le nom tips.html dans le dossier racine du site.
Here.
Tapez Green Tips pour le remplacer. Appuyez sur Entrée pour finaliser le titre.
4. Dans le panneau Fichiers, double-cliquez sur green_tips.rtf dans le dossier lesson07
> resources.
Le texte est constitué de trois listes individuelles d’astuces sur la manière d’économiser
de l’énergie à la maison, au travail et dans la communauté. Comme avec le fichier
des articles, vous allez insérer chaque liste dans son propre élément <section>.
5. Dans l’éditeur de texte ou le programme de traitement de texte, sélectionnez le
texte qui commence par At Home et se termine par Buy fruits and vegetables locally.
Appuyez sur Ctrl+X/Cmd+X pour le couper.
6. Revenez à Dreamweaver. En mode Création, sélectionnez le titre de remplissage Add
main heading here dans <article.content> et tapez Green Tips pour le remplacer.
7. Sélectionnez le titre de remplissage Add subheading here et le texte de remplissage
de paragraphe Add content here. Appuyez sur Ctrl+V/Cmd+V pour coller le texte
du presse-papiers.
Le texte apparaît et crée la première section de liste.

13:32:41 +0200 26/09/2012 10:23:22
8. Repassez à l’éditeur de texte ou au programme de traitement de texte. Sélectionnez
le texte qui commence par At Work et se termine par Buy natural cleaning products.
Appuyez sur Ctrl+X/Cmd+X pour le couper.
9. Repassez à Dreamweaver. En mode Création, placez le curseur n’importe où dans la
liste d’astuces existante et cliquez sur le sélecteur de balises <section>. L’ensemble
de l’élément <section> et de son contenu est sélectionné.
10. Appuyez sur la touche fléchée de droite une fois pour placer le curseur après la
balise </section> fermante dans le code.
11. Appuyez sur Ctrl+T/Cmd+T pour accéder à l’Éditeur de balises. Tapez <section>
ou double-cliquez sur section dans le menu de l’Éditeur de balises et appuyez sur
Entrée pour créer le nouvel élément.
La seconde liste apparaît dans le nouvel élément.

13. Répétez les étapes 8 à 12 pour créer la troisième liste, In the community.
Les trois listes apparaissent maintenant dans leurs propres éléments <section>.
Comme nous l’avons fait avec les titres des articles de news, formatons les titres
qui identifient les catégories d’astuces.
14. Sélectionnez le texte At Home et formatez-le sous forme de Titre 2.

13:32:41 +0200 26/09/2012 10:23:22
15. Répétez l’étape 14 avec les titres At Work et In the Community.
Le texte restant est actuellement entièrement formaté avec des éléments <p>.
Dreamweaver permet aisément de le convertir en une liste HTML. Il existe deux
variantes de listes : les listes à puces et les listes numérotées.
16. Sélectionnez tout le texte formaté avec les éléments <p> entre les titres At Home
et At Work. Dans l’inspecteur Propriétés, cliquez sur l’icône Liste numérotée ( ).
La liste numérotée ajoute automatiquement des numéros à toute la sélection. � Astuce :

Sémantiquement, elle définit la priorité de chaque élément, en lui attribuant une Le moyen le
plus simple de
valeur intrinsèque relative aux autres éléments. Comme vous pouvez le voir, cette
sélectionner
liste ne semble pas être classée dans un ordre particulier. Chaque élément est plus la liste entière
ou moins équivalent à l’autre. La liste à puces est l’autre type de liste qui permet consiste à utiliser
le sélecteur de
de mettre en forme des éléments sans ordre particulier. Avant de modifier la mise
balises <ol>.
en forme, jetons un coup d’œil du côté du code.
17. Passez en mode Fractionner. Observez le code de la liste dans la section Code de
la fenêtre de document.
Le balisage est constitué de deux éléments : <ol> et <li>. Vous remarquerez que
chaque ligne est formatée avec un élément de liste <li>. L’élément parent <ol>
commence et termine la liste et la désigne comme étant une liste numérotée

13:32:41 +0200 26/09/2012 10:23:23
(ol pour ordered list ou liste ordonnée). Il est très simple de changer la mise en
forme pour remplacer les numéros par des puces, en mode Code ou Création.
Avant de changer le format, assurez-vous que la liste formatée est toujours
entièrement sélectionnée.
18. Dans l’inspecteur Propriétés, cliquez sur l’icône Liste à puces ( ).
� Astuce : Vous Tous les éléments sont maintenant formatés avec des puces. Observez le balisage
pouvez aussi de la liste. Une seule chose a changé : l’élément parent. Il s’agit maintenant de <ul>
opérer cette
(unordered list ou liste désordonnée).
modification
en éditant 19. Sélectionnez tout le texte formaté avec des balises <p> entre les titres At Work et In
directement le
code en mode
the Community. Dans l’inspecteur Propriétés, cliquez sur l’icône Liste à puces ( ).
Code. Mais, 20. Répétez l’étape 19 avec tout le texte qui suit le titre In the Community.
dans ce cas,
n’oubliez pas de Les trois listes sont maintenant des listes à puces.
changer les deux
balises parentes 21. Choisissez Fichier > Enregistrer.
d’ouverture et de
fermeture.
Créer des retraits de texte

Aujourd’hui, bon nombre de concepteurs utilisent l’élément <blockquote> comme
moyen simple d’appliquer des retraits aux titres et au texte des paragraphes. D’un point
de vue sémantique, l’élément <blockquote> est censé identifier de longues sections
de texte qui correspondent à des citations provenant d’autres sources. Visuellement,
le texte formaté de cette manière paraît donc en retrait et décalé par rapport au texte
de paragraphe et aux titres standard. Pourtant, si vous souhaitez vous conformer aux
standards du Web, il importe de conserver cet élément pour la fonction à laquelle il
est réservé et d’utiliser plutôt des classes CSS personnalisées quand vous souhaitez
appliquer un retrait au texte, comme vous allez le voir lors du prochain exercice :
1. Créez une nouvelle page à partir du modèle mygreen_temp. Enregistrez le fichier
sous le nom contact_us.html dans le dossier racine du site.
Here. Tapez Contact Meridien GreenStart pour le remplacer. Appuyez sur Entrée
pour finaliser le titre.

13:32:41 +0200 26/09/2012 10:23:24
3. Accédez au panneau Fichiers et double-cliquez sur contact_us.rtf dans le dossier
lesson07.
Le texte est constitué de cinq sections de services, avec des titres, des descriptions
et des adresses e-mail pour gérer le personnel de GreenStart. Vous allez insérer
chaque département dans son propre élément <section>.
4. Dans l’éditeur de texte ou le programme de traitement de texte, sélectionnez les
deux premiers paragraphes d’introduction. Appuyez sur Ctrl+X/Cmd+X pour
couper le texte.
5. Repassez à Dreamweaver. Sélectionnez le titre de remplissage Add main heading here
dans <article.content> et tapez Contact Meridien GreenStart pour le remplacer.
6. Appuyez sur Entrée pour insérer un nouveau paragraphe. Appuyez sur Ctrl+V/
Cmd+V pour coller le texte.
Le texte d’introduction est inséré directement sous l’élément <h1>. Il ne se trouve

pas dans l’élément <section>.
7. Repassez à l’éditeur de texte ou au programme de traitement de texte et sélectionnez
les quatre paragraphes suivants, qui composent la section Association Management.
Appuyez sur Ctrl+X/Cmd+X pour couper le texte.
8. Repassez à Dreamweaver. En mode Création, sélectionnez le titre de remplissage
Add subheading here et le texte de remplissage Add content here. Appuyez sur
Ctrl+V/Cmd+V pour coller le texte du presse-papiers.
9. Sélectionnez le texte Association Management et convertissez-le en un élément
Titre 2.
La première section est insérée.

10. Repassez à l’éditeur de texte ou au programme de traitement de texte et sélectionnez
les quatre paragraphes suivants, qui composent la section Education and Events.
Appuyez sur Ctrl+X/Cmd+X pour couper le texte.

13:32:41 +0200 26/09/2012 10:23:24
11. Repassez à Dreamweaver. Insérez le curseur n’importe où dans le texte Association
Management et cliquez sur le sélecteur de balises <section>.
ou double-cliquez sur Section dans le menu de l’Éditeur de balises et appuyez sur
Entrée pour créer l’élément.
14. Sélectionnez le texte Education and Events et convertissez-le en un élément Titre 2.
15. Répétez les étapes 10 à 14 pour créer des éléments <section> pour les départements
restants : Transportation Analysis, Research and Development et Information Systems.
Une fois le texte en place, vous voilà prêt à créer la mise en forme des alinéas. Si vous
souhaitiez n’en créer que sur un unique paragraphe, vous créeriez et appliqueriez
sans doute une classe personnalisée à l’élément individuel <p>. Dans le cas présent,
vous allez utiliser les éléments <section> existants pour produire l’effet visuel désiré.
Pour commencer, attribuons un attribut de classe à l’élément. Comme la classe n’a
pas encore été créée, il faudra le faire manuellement. Vous pouvez le faire en mode
Code ou en mode Création en utilisant l’Éditeur de balises.
16. Insérez le curseur n’importe où dans l’élément <section> Association Management.
Cliquez sur le sélecteur de balises <section>. Appuyez sur Ctrl+T/Cmd+T.
L’Éditeur de balises apparaît et affiche la balise <section>. Le curseur devrait
apparaître à la fin du nom de la balise.
17. Appuyez sur la barre d’espace pour insérer un espace.
La fenêtre Indications de code apparaît et affiche les attributs appropriés pour
l’élément <section>.
18. Tapez class et appuyez sur Entrée ou double-cliquez sur l’attribut de classe dans
la fenêtre Indication de code.
Dreamweaver crée automatiquement le balisage de l’attribut et propose tous les

attributs de classe ou d’ID existants. Comme la classe n’existe pas pour le moment,
vous allez en taper le nom vous-même.
19. Tapez le nom de classe profile. Appuyez sur Entrée pour compléter l’attribut.
20. Cliquez sur le sélecteur de balises <section.profile> en bas de la fenêtre de document.
Sélectionnez .content section h2 dans le panneau Styles CSS. Cliquez sur l’icône
Nouvelle règle de CSS ( ).

13:32:41 +0200 26/09/2012 10:23:25
21. Dans la boîte de dialogue Nouvelle règle de CSS, cliquez sur Moins spécifique pour
supprimer .container du champ Nom du sélecteur.
Le champ Nom du sélecteur devrait maintenant afficher .content .profile.
22. Cliquez sur OK pour créer la nouvelle règle CSS.
23. Sélectionnez la catégorie Boîte. Décochez l’option Idem pour tous de la section
Margin.
Tapez 25 px dans les champs Right et Left de la colonne Margins. Dans le champ
Bottom de la même colonne, tapez 15 px.
24. Dans la catégorie Bordure, tapez les valeurs suivantes dans les champs de la ligne
Bottom : solid, 10 px, #CADAAF.
25. Tapez les valeurs suivantes dans les champs de la ligne Left : solid, 2 px, #CADAAF.
Cliquez sur OK.
La bordure aide à regrouper visuellement le texte en retrait sous son titre.

26. Sélectionnez chacun des éléments <section> restants et appliquez la classe profile
avec le menu du champ Classe de l’inspecteur des propriétés.
Chaque section est affichée avec un retrait du texte et une bordure personnalisée.
Créer et mettre en forme des tableaux

Avant l’avènement des CSS, le HTML ne proposait que peu d’outils pour créer des
structures de page efficaces. Les concepteurs utilisaient des images et des tableaux
pour arranger leurs mises en page. Aujourd’hui, plusieurs raisons poussent à éviter les

13:32:41 +0200 26/09/2012 10:23:25
tableaux pour la conception et la structuration des pages. Ils sont difficiles à créer, à
formater et à modifier. Ils ne s’adaptent pas facilement aux différents types d’écrans.
En outre, certains périphériques de navigation et de lecteurs d’écran ne voient pas les
mises en page et n’interprètent les tableaux que littéralement, à savoir comme une
série de lignes et de colonnes de données.
Lorsque les CSS se sont imposées comme la méthode de choix pour la conception des
pages, certains développeurs en sont tout simplement venus à croire que les tableaux
étaient à rejeter complètement. Cette réaction était un peu excessive. Si les tableaux ne
conviennent pas à la mise en page, ils sont, en revanche, très bien adaptés, si ce n’est
même nécessaires, à l’affichage de nombreux types de données, comme des listes de
produits, des répertoires d’adresses ou des calendriers. Dans les exercices qui suivent,
vous allez apprendre à créer et à formater des tableaux HTML.
1. Créez une nouvelle page à partir du modèle mygreen_temp. Enregistrez le fichier
sous le nom events.html dans le dossier racine du site.
Here.
Tapez Green Events and Classes pour le remplacer.
Appuyez sur Entrée pour finaliser le titre.
Dreamweaver permet de créer des tableaux de toutes pièces, de les copier-coller depuis
d’autres applications ou de les créer instantanément à partir de données fournies par
des programmes de base de données ou de feuilles de calcul.
Créer des tableaux de toutes pièces

Dreamweaver permet aisément de créer des tableaux de toutes pièces.
1. En mode Création, sélectionnez le titre de remplissage Add main heading here
dans <article.content> et tapez Green Events and Classes pour le remplacer.
2. Sélectionnez le titre de remplissage Add subheading here et le texte de paragraphe
Add content here. Appuyez sur Suppr.
� Astuce : À chaque fois que vous souhaitez sélectionner des éléments entiers, il est de bon usage
de recourir aux sélecteurs de balises.
3. Choisissez Insertion > Tableau.

La boîte de dialogue Tableau apparaît. La largeur et quelques autres caractéristiques
des tableaux, comme pour la plupart des éléments HTML, peuvent être contrôlées
avec des attributs HTML ou CSS. La mise en forme HTML des tableaux, comme
vous l’avez déjà appris, a été dépréciée, mais certains attributs de tableaux HTML
continuent d’être utilisés. Si les bonnes pratiques poussent résolument à utiliser
des CSS par souci d’efficacité et de flexibilité, rien n’est plus commode que les bons
vieux attributs HTML. Par exemple, lorsque vous entrez des valeurs dans cette
boîte de dialogue, Dreamweaver les applique avec des attributs HTML.

13:32:41 +0200 26/09/2012 10:23:25
4. Tapez 2 dans le champ Lignes et 4 dans le champ Colonnes. Tapez 90 dans le champ
Largeur du tableau. Choisissez Pourcentage dans la liste déroulante à droite du
champ. Tapez 0 dans le champ Largeur de la bordure. Cliquez sur OK.
Un tableau de quatre colonnes et deux lignes apparaît sous le titre. Vous remarquerez
qu’il est calé côté gauche de l’élément <article.content>. Il est prêt pour l’insertion
de données.
5. Placez le curseur dans la première cellule du tableau. Tapez Date et appuyez sur � Astuce :
Tab pour passer à la cellule suivante dans la première ligne. Appuyez sur
la touche Tab
6. Dans la deuxième cellule, tapez Event et appuyez sur Tab. Tapez Location et pour passer le
appuyez sur Tab. Tapez Cost et appuyez sur Tab ou déplacez le curseur dans la curseur à la cellule
suivante vers la
première cellule de la seconde ligne. droite. Maintenez
7. Dans la seconde ligne, tapez May 1 (cellule 1), May Day Parade (cellule 2), City la touche Maj
enfoncée en
Hall (cellule 3) et Free (cellule 4). appuyant sur la
L’insertion de lignes supplémentaires dans le tableau est tout aussi facile. touche Tab pour
avancer vers
8. Appuyez sur Tab pour insérer une nouvelle ligne vide dans le tableau. la gauche (ou
reculer) dans le
Dreamweaver permet aussi d’insérer plusieurs lignes à la fois. tableau.
9. Cliquez sur le sélecteur de balises <table> en bas de la fenêtre de document.
L’inspecteur Propriétés affiche les propriétés du tableau courant, en incluant le

nombre total de lignes et de colonnes.

13:32:41 +0200 26/09/2012 10:23:26
10. Sélectionnez le chiffre 3 dans le champ Lignes. Tapez 10 et appuyez sur Entrée
pour valider la modification.
Dreamweaver ajoute sept nouvelles lignes au tableau. Les champs dans l’inspecteur des
propriétés qui créent des attributs HTML pour contrôler différentes caractéristiques
du tableau sont sa largeur, la largeur et la hauteur des cellules, l’alignement du
texte, etc.
Copier et coller des tableaux

Bien que Dreamweaver permette de créer manuellement des tableaux dans le pro-
gramme, vous pouvez également déplacer des tableaux depuis d’autres fichiers HTML
ou même d’autres programmes à l’aide d’un simple copier-coller.
1. Ouvrez le panneau Fichiers et disques durs sur calendar.html dans le dossier
lesson07 pour l’ouvrir.
Ce fichier HTML s’ouvrira dans son propre onglet dans Dreamweaver. Observez
la structure du tableau. Il possède quatre colonnes et de nombreuses lignes.
2. Placez le curseur dans le tableau. Cliquez sur le sélecteur de balises <table>. Appuyez
sur Ctrl+C/Cmd+C pour copier le texte.

13:32:41 +0200 26/09/2012 10:23:27
3. Cliquez sur l’onglet events.html pour passer le fichier au premier plan.
4. Placez le curseur dans le tableau. Cliquez sur le sélecteur de balises <table>. Appuyez � Note :
sur Ctrl+V/Cmd+V pour coller le tableau. Dreamweaver
permet de
Le nouvel élément de tableau remplace complètement le tableau existant. copier-coller
des tableaux
5. Enregistrez le fichier. depuis d’autres
programmes,
même si cette
Appliquer des styles CSS aux tableaux fonctionnalité
Pour l’instant, votre tableau est aligné à gauche et touche le bord de l’élément <article. ne marche pas
avec toutes les
content>. Il s’étend sur toute la largeur de l’élément. Les tableaux peuvent être mis applications.
en forme par des attributs HTML ou par des règles CSS. Les attributs HTML doivent
être appliqués et modifiés individuellement pour chaque tableau. Comme vous l’avez
appris, les CSS permettent, à la différence, de contrôler la mise en forme des tableaux
dans l’ensemble du site en n’utilisant qu’une poignée de règles.
1. Cliquez sur le sélecteur de balises <table>. Sélectionnez la règle .content .profile
dans le panneau Styles CSS et cliquez sur l’icône Nouvelle règle de CSS.
2. Si nécessaire, sélectionnez l’option Composé dans le menu Type de sélecteur.
Cliquez une fois sur Moins spécifique pour supprimer le sélecteur .container du
champ Nom du sélecteur. Cliquez sur OK.
La boîte de dialogue Définition des règles de CSS pour la nouvelle règle .content
section table apparaît.
Avant d’appliquer la mise en forme au tableau, vous devez savoir quels autres réglages
affectent déjà l’élément et quelles ramifications ces nouveaux réglages pourraient
atteindre dans la conception et la structure d’ensemble du site. Par exemple, la règle
.content définit la largeur de l’élément à 770 pixels. D’autres éléments comme <h1>
et <p> possèdent un remplissage gauche de 15 pixels. Si vous appliquez des largeurs,
des marges ou des remplissages, ce total peut dépasser 770 pixels et conduire à
rompre l’équilibre de votre structure de page soigneusement préparée.
� Note : L’ajout
3. Dans le champ Font-size de la catégorie Type, tapez 90 %. de la largeur à
la marge donne
4. Dans la catégorie Boîte, tapez 740 px dans le champ Width. Tapez 15 px uniquement un total de
dans le champ Left de la colonne Margin. 755 pixels, soit 15
de moins que la
largeur actuelle
de l’élément
<article.
content>.
Gardez cela à
l’esprit par la
suite, au cas où
d’autres réglages
devraient entrer
en conflit avec les
spécifications de
tableau.

13:32:41 +0200 26/09/2012 10:23:27
5. Dans la catégorie Bordure, tapez les valeurs suivantes dans les champs de la ligne
Bottom : solid, 3 px et #060. Cliquez sur OK.
Le tableau, redimensionné, se décolle du bord gauche de l’élément <article.

content> et affiche une bordure vert sombre en bas. Vous avez appliqué la mise
en forme désirée à des propriétés spécifiques de tableau, mais vous ne pouvez pas
vous en tenir là. La mise en forme par défaut des balises qui constituent le code
du tableau est un mélange de plusieurs réglages, que les différents navigateurs
reproduisent plus ou moins fidèlement. Vous constaterez que le même tableau
peut s’afficher différemment dans chaque navigateur.
L’un des réglages susceptibles de poser des problèmes est l’attribut HTML
d’espacement de cellules, qui opère à la manière d’une marge entre les cellules
individuelles. Si vous conservez cet attribut vide, certains navigateurs insèrent un
petit espace entre les cellules et divisent en fait toutes les bordures de cellule en
deux. En CSS, cet attribut est géré par la propriété border-collapse. Si vous ne
souhaitez pas que les bordures de tableaux soient involontairement divisées, vous
devez inclure ce réglage dans la mise en forme. Malheureusement, il s’agit de l’une
des rares valeurs auxquelles vous ne pouvez pas accéder depuis la boîte de dialogue
Définition des règles de CSS.
6. Si nécessaire, choisissez Fenêtre > Styles CSS pour afficher le panneau Styles CSS.
Sélectionnez la règle .content section table et observez la section Propriétés
du panneau.
La section Propriétés affiche les réglages courants pour la règle .content section
table.
� Note : La
propriété 7. Cliquez sur le lien Ajouter une propriété en bas de la liste des propriétés. Tapez
border- border-collapse et appuyez sur Tab pour déplacer le curseur dans le champ de
collapse la colonne Valeur. Tapez collapse et appuyez sur Entrée pour entrer la propriété.
n’apparaît pas
dans le menu
déroulant, aussi
devez-vous la
saisir vous-même.
Une fois que vous
tapez le nom
de la propriété,
le menu de
valeur se remplit
correctement
avec les options
disponibles.

13:32:41 +0200 26/09/2012 10:23:28
Il est possible qu’en mode Création aucune différence ne se remarque quant à
l’affichage des tableaux, mais ne vous empressez pas de conclure que cet attribut
n’est pas nécessaire.
La règle .content section table que vous venez de créer va formater la structure
d’ensemble de chaque tableau inséré dans l’élément <article.content> à l’intérieur
de toutes les pages du site qui utilisent cette feuille de style. Mais la mise en forme n’est
pas encore terminée. Les largeurs des colonnes individuelles ne sont pas contrôlées
par l’élément <table>. Pour les contrôler, vous devez chercher autre part.
Mettre en forme des cellules de tableaux

Comme pour les tableaux, les réglages de mise en forme des colonnes peuvent être
appliqués avec des attributs HTML ou en CSS, avec les mêmes avantages et inconvé-
nients. Deux éléments sont utilisés dans la mise en forme des colonnes qui créent les
cellules individuelles : <th> (table header) pour l’en-tête du tableau et <td> (table data)
pour les données de tableau. L’en-tête de tableau est un élément pratique qui peut
être utilisé pour différencier les titres et le contenu d’en-tête des données standard.
Il est judicieux de créer une règle générique pour réinitialiser les formats par défaut des
éléments <th> et <td>. Par la suite, vous créerez des règles personnalisées à appliquer
à des colonnes et à des cellules spécifiques.
1. Insérez le curseur dans n’importe quelle cellule de tableau. Sélectionnez la règle
.content section table avant de cliquer sur l’icône Nouvelle règle de CSS.
2. Si nécessaire, sélectionnez l’option Composé dans le menu Type de sélecteur.

Cliquez une fois sur Moins spécifique pour supprimer le sélecteur .container du
champ Nom du sélecteur. Modifiez le Nom du sélecteur pour obtenir .content
section td, .content section th et cliquez sur OK.
Le sélecteur simplifié suffira parfaitement.

3. Dans le menu Text-align de la catégorie Bloc, choisissez left.
4. Dans la catégorie Boîte, sélectionnez Idem pour tous dans la section Padding et
tapez 5 px dans le premier champ.

13:32:41 +0200 26/09/2012 10:23:29
5. Dans la catégorie Bordure, tapez les valeurs suivantes pour les champs de la ligne
Top : solid, 1 px et #090. Cliquez sur OK.
Une fine bordure verte apparaît au-dessus de chaque ligne du tableau. Les données
sont ainsi plus lisibles. Pour voir correctement la bordure, vous devrez peut-être
afficher la page en mode Affichage en direct. Les en-têtes sont généralement mis
en forme en gras afin d’être distincts des cellules normales. Vous pouvez les faire
ressortir mieux encore en leur attribuant une couleur.
� Note : 6. Dans le panneau Styles CSS, sélectionnez .content section td, .content section
N’oubliez pas que th. Cliquez sur l’icône Nouvelle règle de CSS. Dans le menu Type de sélecteur,
l’ordre des règles
peut affecter
choisissez Composé. Dans le champ Nom du sélecteur, tapez .content section
la cascade de th. Cliquez sur OK.
styles ainsi que
l’héritage des
7. Dans le champ Color de la catégorie Type, tapez #FFC.
formats. 8. Dans le champ Background-color de la catégorie Arrière-plan, tapez #090. Dans la
catégorie Bordure, tapez solid, 6 px et #060 pour les champs de la ligne Bottom.
Cliquez sur OK.
La règle est créée, mais elle doit encore être appliquée. Dreamweaver permet
aisément de convertir les éléments <td> existants en éléments <th>.
9. Placez le curseur dans la première cellule de la première ligne du tableau. Dans
l’inspecteur Propriétés, sélectionnez l’option En-tête. Observez le sélecteur de balises.
La cellule est remplie en vert. Lorsque vous avez cliqué sur la case à cocher En-tête,
Dreamweaver a automatiquement réécrit le code en convertissant les balises <td>

13:32:41 +0200 26/09/2012 10:23:30
existantes en balises <th>, qui se voient donc appliquer la mise en forme CSS.
Cette fonctionnalité vous fera gagner bien du temps en vous évitant d’éditer le code
manuellement. Vous pouvez aussi convertir plusieurs cellules à la fois.
10. Placez le curseur dans la deuxième cellule de la première ligne. Faites-le glisser pour
sélectionner les autres cellules de la première ligne. Pour sélectionner toute la ligne,
il est aussi possible de positionner le curseur à gauche du tableau, au niveau de la
ligne, et de cliquer sur la flèche de sélection noire dès qu’elle s’affiche.
11. Dans l’inspecteur Propriétés, sélectionnez l’option En-tête pour convertir les cellules
de tableau en cellules d’en-tête.
La première ligne se remplit entièrement en vert une fois les cellules converties
en cellules d’en-tête.
Contrôler la largeur des colonnes

Sauf indication contraire, les colonnes de tableau vides divisent l’espace restant en par-
ties égales. Toutefois, lorsque vous ajoutez du contenu, ce sage équilibre est rompu ; le
tableau semble n’en faire qu’à sa tête et divise l’espace autrement. En général, il donne
plus d’espace aux colonnes qui contiennent plus de données.
Le fait de laisser au tableau lui-même le contrôle de la largeur des colonnes ne permet
pas toujours d’obtenir le bon résultat ; aussi, bien des concepteurs s’en remettent-ils
aux attributs HTML ou à des classes CSS personnalisées pour cela. Lorsque vous créez
des styles personnalisés pour formater les largeurs de colonnes, il peut être judicieux
de nommer les règles, soit en incluant la valeur de largeur dans le nom, soit en faisant
référence au contenu de la colonne.
1. Sélectionnez la règle .content section th dans le panneau Styles CSS et cliquez � Note : Les
sur l’icône Nouvelle règle de CSS. Dans le menu Type de sélecteur, choisissez noms des règles
ne peuvent
Composé. Supprimez le texte du champ Nom du sélecteur et tapez .content commencer par
section .w100. Cliquez sur OK. des chiffres ou
des caractères
Dans le nom du sélecteur, w signifie width (largeur) et 100 indique la valeur de de ponctuation,
100 pixels. à l’exception du
point, qui indique
2. Dans le champ Width de la catégorie Boîte, tapez 100 px. Cliquez sur OK. une classe, ou du
Il est très facile de contrôler la largeur d’une colonne. Comme toute la colonne signe dièse (#), qui
indique un ID.
doit être de même largeur, il suffit d’appliquer la spécification à une seule cellule.
Si les cellules d’une colonne possèdent des spécifications contradictoires, c’est
généralement la largeur la plus grande qui l’emporte. Appliquons une classe pour
contrôler la largeur de la colonne Date.

13:32:41 +0200 26/09/2012 10:23:30
� Astuce : 3. Positionnez le curseur dans la première cellule de la première ligne du tableau.
Assurez-vous Cliquez sur le sélecteur de balises <th>. Dans le menu Classe de l’inspecteur
de cliquer sur
Propriétés, choisissez w100.
le sélecteur de
balises, sinon
Dreamweaver
pourrait appliquer
la classe au
contenu de la
cellule au lieu de
l’élément <th>.
� Note : Si vous La première colonne est redimensionnée à une largeur de 100 pixels. Les colonnes
appliquez une restantes divisent automatiquement l’espace disponible restant. La mise en forme
largeur restreinte,
rappelez-vous
des colonnes permet de spécifier l’alignement du texte en plus de la largeur. Créons
néanmoins que une règle pour le contenu dans la colonne Cost.
la cellule ne peut
être plus petite
4. Sélectionnez la règle .content .w100 dans le panneau Styles CSS et cliquez sur
que le plus grand Nouvelle règle de CSS. Dans le menu Type de sélecteur, choisissez Composé.
mot ou élément Supprimez le texte dans le champ Nom du sélecteur et tapez .content section
graphique qu’elle
.cost. Cliquez sur OK. Comme son nom l’indique, cette règle est destinée à la
contient.
colonne Cost. Mais n’ajoutez pas la valeur de largeur au nom comme vous l’avez
fait précédemment. Vous pourrez ainsi modifier cette valeur à l’avenir sans avoir
à vous soucier de changer également le nom (et le code).
5. Dans le menu Text-align de la catégorie Bloc, choisissez center.
6. Dans le champ Width de la catégorie Boîte, tapez 75 px. Cliquez sur OK.
À la différence du précédent exemple, vous devez appliquer la classe à chaque cellule
pour étendre l’alignement du texte au contenu de toute une colonne.
7. Cliquez dans la première cellule de la colonne Cost et faites glisser le curseur vers
le bas, jusqu’à la dernière cellule de la colonne, pour sélectionner toutes les cellules.
Vous pouvez aussi positionner le curseur en haut de la colonne et cliquer en utilisant
la flèche noire pour sélectionner toute la colonne d’un coup. Choisissez .cost dans
le menu Classe de l’inspecteur Propriétés.

13:32:41 +0200 26/09/2012 10:23:32
La colonne Cost est redimensionnée à une largeur de 75 pixels et le texte est centré.
À présent, si vous ne souhaitez changer que la colonne Cost, vous pouvez le faire.
Insérer des tableaux à partir d’autres sources

En plus d’être créés manuellement, les tableaux peuvent être générés à partir de données
exportées depuis des bases de données et des feuilles de calcul. Dans cet exercice, vous
allez créer un tableau à partir de données exportées depuis Excel vers un fichier CSV
(valeurs séparées par des virgules). Comme avec les autres modèles de contenu, vous
allez d’abord créer un élément <section> dans lequel vous insérerez le nouveau tableau :
1. Placez le curseur n’importe où dans le tableau existant. Cliquez sur le sélecteur de
balises <section>. Appuyez sur la touche fléchée de droite pour déplacer le curseur
après la balise </section> de fermeture dans le code.
ou double-cliquez sur section dans le menu de l’Éditeur de balises et appuyez sur
Entrée pour créer l’élément.
Un nouvel élément <section> est ajouté à la page.
3. Sans déplacer le curseur, choisissez Insertion > Objets du tableau > Importer les
données tabulaires.
La boîte de dialogue Importer des données tabulaires apparaît.
4. Cliquez sur le bouton Parcourir et sélectionnez classes.csv dans le dossier lesson07
> resources. Cliquez sur Ouvrir.
L’option Virgule doit être automatiquement sélectionnée dans le menu Délimiteur.
5. Dans la section Largeur du tableau, sélectionnez Adapter au contenu. Supprimez
toutes les valeurs qui apparaissent dans les autres champs qui n’ont pas déjà
été mentionnés. Comme pour la plupart des options de boîte de dialogue dans
Dreamweaver, tous ces champs appliquent des attributs HTML au lieu de styles CSS.
6. Cliquez sur OK.

Un nouveau tableau (contenant l’agenda d’une classe) apparaît sous le premier. Il
est constitué de cinq colonnes et de nombreuses lignes. La première ligne contient

13:32:41 +0200 26/09/2012 10:23:32
les informations d’en-tête, mais elle est encore mise en forme avec des cellules de
tableau normales.
7. Sélectionnez la première ligne de l’agenda de la classe. Dans l’inspecteur Propriétés,
cochez l’option En-tête.
La première ligne apparaît en vert avec le texte inversé. Vous remarquerez qu’il
est bizarrement aligné dans les trois dernières colonnes. Vous utiliserez la classe
.cost pour la colonne Cost dans le nouveau tableau, mais les autres auront besoin
de leurs propres classes personnalisées.
8. Sélectionnez la colonne Cost comme vous l’avez fait au précédent exercice.
Sélectionnez l’option .cost dans le menu Classe de l’inspecteur Propriétés.
9. Dans le panneau Styles CSS, cliquez du bouton droit sur la règle .content .cost
et choisissez Dupliquer dans le menu contextuel.
10. Changez le Nom du sélecteur en tapant .content section .day. Cliquez sur OK.
11. Appliquez .content section .day à la colonne Day dans le tableau Classes,
comme à l’étape 6.
12. Dupliquez .content section .day et nommez la nouvelle règle .content section
.length. Cliquez sur OK. Appliquez-la à la colonne Length dans le tableau Classes.
En créant des classes personnalisées pour chaque colonne, vous disposez d’un
moyen de modifier individuellement chacune d’entre elles. Il faut une règle de plus
pour formater la colonne Class. Cette colonne ne requiert qu’une règle générique
pour appliquer une largeur plus conforme.

13:32:41 +0200 26/09/2012 10:23:34
13. Cliquez du bouton droit sur la règle .content section .w100 et dupliquez-la.
Nommez la nouvelle règle .content section .w150 et cliquez sur OK.
14. Éditez la nouvelle règle et changez la valeur de Width dans la catégorie Boîte en � Astuce :
tapant 150 px. Appliquez la nouvelle règle à la cellule d’en-tête de Class uniquement. Lorsque vous
appliquez une
15. Enregistrez tous les fichiers. valeur de largeur,
une seule cellule
a besoin d’être
Ajuster l’alignement vertical formatée.
Si vous étudiez le contenu du tableau Class, vous remarquerez que nombre de cellules
contiennent des paragraphes qui s’étendent sur plusieurs lignes. Par défaut, lorsque les
cellules d’une ligne possèdent des quantités de texte différentes, le contenu le plus court
est aligné verticalement au milieu de la cellule. De nombreux concepteurs trouvent
cet affichage disgracieux et préfèrent que le texte s’aligne en haut des cellules. Comme
bien d’autres attributs, l’alignement vertical peut être appliqué avec des attributs
HTML ou en CSS. Pour contrôler l’alignement vertical en CSS, vous allez ajouter la
spécification à une règle existante.
1. Double-cliquez sur la règle .content section th, .content section td pour

l’éditer.
Les éléments <th> et <td> mettent en forme le texte stocké dans les cellules du
tableau.
2. Dans le menu Vertical-align de la catégorie Bloc, choisissez top. Cliquez sur OK. � Astuce :
Certains
concepteurs
préfèrent que le
texte, dans les
cellules <th>,
soit aligné au
milieu ou même
en bas. Si c’est
votre cas, vous
devrez créer des
règles séparées
pour chacun des
éléments.
Tout le texte, dans les deux tableaux, s’aligne maintenant sur le haut des cellules.

13:32:41 +0200 26/09/2012 10:23:35
Ajouter et formater des éléments <caption>
Les deux tableaux que vous avez insérés dans la page contiennent différentes informa-
tions, mais ne comportent aucune étiquette ni aucun titre qui les différencient. Pour
aider les utilisateurs à distinguer les deux jeux de données, ajoutons un titre à chacun
et un peu d’espace supplémentaire. L’élément <caption> a été conçu pour identifier le
contenu des tableaux HTML. Il s’insère sous la forme d’un enfant de l’élément <table>.
1. Placez le curseur dans le premier tableau. Cliquez sur le sélecteur de balises <table>.
Passez en mode Code.
Lorsque vous sélectionnez le tableau en mode Création, Dreamweaver le passe
automatiquement en surbrillance, en mode Code, afin de le retrouver plus facilement.
2. Localisez la balise <table> d’ouverture. Placez le curseur directement après cette
balise. Tapez <caption> ou sélectionnez cette balise dans le menu des suggestions
de code quand il apparaît.
3. Tapez 2012-13 Event Schedule, puis tapez </ pour fermer l’élément.
4. Repassez en mode Création.

La légende est terminée et insérée sous forme d’élément enfant du tableau.
5. Répétez les étapes 1 et 2 pour le second tableau. Tapez 2012-13 Class Schedule
puis tapez </ pour refermer l’élément.
Les légendes sont relativement petites et un peu noyées sous la couleur et la mise
en forme du tableau. Redonnons-leur vie avec une règle CSS personnalisée.
7. Placez le curseur dans l’une des légendes. Cliquez sur l’icône Nouvelle règle de CSS.
8. Si nécessaire, choisissez Composé dans le menu Type de sélecteur. Cliquez une fois
sur Moins spécifique pour supprimer .container du champ Nom du sélecteur.
Cliquez sur OK.

13:32:41 +0200 26/09/2012 10:23:35
9. Dans le champ Font-size de la catégorie Type, tapez 160 %. Dans le champ Line-
height, tapez 1.2em. Dans le menu du champ Font-weight, choisissez bold. Dans
le champ Color, tapez #090.
10. Dans la catégorie Boîte, tapez 20 px dans le champ Top de la section Margin.
11. Tapez 10 px dans le champ Bottom de la colonne Padding. Cliquez sur OK.

13. Examinez votre travail en mode Affichage en direct ou dans un navigateur.
La mise en forme des tableaux et des légendes en CSS les a rendus plus lisibles et
faciles à comprendre. N’hésitez pas à faire des essais de taille et d’emplacement pour
les légendes et les tableaux. À la Leçon 13, “Travailler avec des données en ligne”, vous
apprendrez à utiliser des tableaux pour créer du contenu web dynamique.
Vérifier l’orthographe de ses pages web

Il est important de s’assurer que le contenu que vous postez sur le Web est exempt
d’erreur. Dreamweaver inclut un vérificateur d’orthographe robuste capable d’iden-
tifier les mots couramment mal épelés et de créer des dictionnaires personnalisés de
termes moins courants.
1. Cliquez sur l’onglet contact_us.html pour passer le document au premier plan ou
ouvrez-le depuis le dossier racine du site.
2. Placez le curseur au début du titre principal Contact Meridien GreenStart dans
<article.content>. Choisissez Commandes > Orthographe.
La correction orthographique commence à l’emplacement du curseur. Si le curseur

est situé en bas de la page, il faut recommencer au moins une fois l’opération pour
examiner la page entière.
3. La boîte de dialogue Vérifier l’orthographe passe en surbrillance le mot Meridien, qui
correspond au nom de la ville fictive où l’association est située. Vous pourriez cliquer
sur Ajouter à Personnel pour insérer le mot dans votre dictionnaire personnalisé,
mais, pour l’instant, cliquez sur Ignorer tout, afin d’ignorer toutes les occurrences
du nom pendant cette vérification.

13:32:41 +0200 26/09/2012 10:23:36
4. Dreamweaver passe en surbrillance le mot GreenStart, qui correspond au nom de
l’association. Cliquez sur Ignorer tout à nouveau.
Dans la plupart des cas, vous ajouteriez le nom et l’emplacement de votre entreprise
ou association au dictionnaire de Dreamweaver.
5. Dreamweaver signale ensuite le mot email, qui est listé dans le dictionnaire avec
l’orthographe e-mail. Cliquez sur Remplacer pour corriger l’orthographe du mot.
6. Dreamweaver passe ensuite en surbrillance le domaine de l’adresse e-mail info@
greenstart.org. Cliquez sur Ignorer tout. Cliquez une nouvelle fois sur Ignorer tout
quand Dreamweaver s’arrête sur le nom de la ville (Meridien).
7. Dreamweaver passe en surbrillance le mot Asociation, auquel il manque un s. Pour
corriger son orthographe, localisez le mot correctement orthographié (Association)
dans la liste Suggestions, et double-cliquez dessus.
8. Le mot suivant sur lequel s’arrête le vérificateur est grassroots, que le dictionnaire
orthographie en deux mots. Dans le cas présent, le terme est utilisé comme un
adjectif composé créé à partir de deux mots séparés. La plupart des dictionnaires
l’orthographient avec un trait d’union entre les deux mots. Pour réaliser ce type de
changement, ajoutez le trait d’union dans le champ Remplacer par afin d’obtenir
grass-roots et cliquez sur Remplacer.
9. Continuez la vérification orthographique jusqu’à la fin. Si d’autres mots sont mal

orthographiés, corrigez-les et ignorez les noms propres. Une boîte de dialogue

13:32:41 +0200 26/09/2012 10:23:37
vous demandera peut-être si vous souhaitez recommencer la vérification depuis
le début, cliquez sur Oui.
Rechercher et remplacer du texte

La fonctionnalité de recherche et remplacement du texte est l’une des plus puissantes
de Dreamweaver. À la différence d’autres programmes, Dreamweaver peut trouver
presque tout, n’importe où dans votre site, qu’il s’agisse de texte, de code ou de tout
autre type d’espace blanc susceptible d’être créé dans le programme. Vous pouvez
faire porter la recherche sur l’ensemble du code ou la limiter au texte entré en mode
Création ou aux balises sous-jacentes. Les utilisateurs avancés emploient des algorithmes
de correspondance appelés “expressions régulières” pour réaliser les opérations de
recherche et remplacement les plus sophistiquées qui soient. Dreamweaver va même
encore plus loin, en vous permettant de remplacer le texte ou le code ciblés par autant
de texte, de code ou d’espaces blancs.
Au cours de cet exercice, vous allez découvrir des techniques pour l’utilisation de la
fonctionnalité de recherche et remplacement.
1. Cliquez sur l’onglet events.html pour le passer au premier plan ou ouvrez le fichier
depuis le dossier racine du site.
Il existe plusieurs moyens d’identifier le texte ou le code que vous souhaitez trouver.
L’un d’entre eux consiste tout simplement à le taper manuellement dans le champ.
Dans le tableau Events, le nom Meridien a par erreur été orthographié avec son
orthographe française, Meridian. Comme Meridian est un nom propre, le vérificateur
d’orthographe ne le signale pas comme une erreur et ne vous propose pas de le
corriger. Vous allez donc utiliser la fonctionnalité de recherche et remplacement
pour opérer ce changement.
2. Si nécessaire, passez en mode Création. Insérez le curseur dans le titre Green Events
and Classes. Choisissez Édition > Rechercher et remplacer.
La boîte de dialogue Rechercher et remplacer apparaît. Le champ Rechercher est vide.
3. Tapez Meridian dans le champ Rechercher et Meridien dans le champ Remplacer.
Choisissez Document actif dans la liste Rechercher dans et Texte dans la liste
Rechercher.

13:32:41 +0200 26/09/2012 10:23:38
4. Cliquez sur Rechercher suivant.
Dreamweaver retrouve la première occurrence de Meridian.
5. Cliquez sur Remplacer.
Dreamweaver remplace la première occurrence de Meridian et recherche
immédiatement la suivante. Vous pouvez continuer à remplacer les mots un à un
ou choisir de remplacer toutes les occurrences.
6. Cliquez sur Remplacer tout.
Si vous remplacez les mots un par un, Dreamweaver insère un avertissement d’une
ligne en bas de la boîte de dialogue, qui indique le nombre d’éléments trouvés et le
nombre remplacés. Si vous cliquez sur Remplacer tout, Dreamweaver ferme la boîte
de dialogue Rechercher et remplacer et ouvre le panneau de rapport Rechercher,
dans lequel sont listées toutes les modifications réalisées.
7. Cliquez du bouton droit sur l’onglet Rechercher et sélectionnez Fermer le groupe
d’onglets dans le menu contextuel.
L’autre méthode pour cibler du texte et du code consiste à le sélectionner avant
d’activer la commande. Cette technique peut être utilisée en mode Création ou
en mode Code.
8. Dans la fenêtre du mode Création, localisez et sélectionnez la première occurrence de
Burkeline Mountains Resort dans la colonne Location du tableau Events. Choisissez
Édition > Rechercher et remplacer.
La boîte de dialogue Rechercher et remplacer apparaît. Le texte sélectionné est
automatiquement entré dans le champ Rechercher par Dreamweaver. Cette technique
est encore plus efficace en mode Code.
9. Refermez la boîte de dialogue Rechercher et remplacer. Passez en mode Code.
10. Pendant que le curseur se trouve dans Burkeline Mountains Resort, cliquez sur le
sélecteur de balises <tr> en bas de la fenêtre de document.
11. Choisissez Édition > Rechercher et remplacer. La boîte de dialogue Rechercher et
remplacer apparaît.
Observez le champ Rechercher. Le code sélectionné est automatiquement entré

dans le champ Rechercher, en incluant les sauts de ligne et les espaces blancs. Le
grand intérêt de cette procédure est qu’il est impossible de saisir manuellement
ce type de balises.

13:32:41 +0200 26/09/2012 10:23:39
12. Sélectionnez le code dans le champ Rechercher. Appuyez sur Suppr pour le supprimer.
Tapez <tr> et appuyez sur Entrée pour insérer un saut de ligne. Observez ce qui
se passe.
L’appui sur Entrée n’a pas inséré de saut de ligne. Au lieu de cela, il a activé la
commande Rechercher et remplacer, qui a trouvé la première occurrence de
l’élément <tr>. De fait, il est impossible de saisir manuellement un saut de ligne
dans la boîte de dialogue.
Dreamweaver insère du texte/code préalablement sélectionné. Malheureusement,
la méthode utilisée à l’étape 8 ne fonctionne pas pour les très grandes parties de
texte ou de code.
13. Fermez la boîte de dialogue Rechercher et remplacer. Cliquez sur le sélecteur de
balises <table>.
Le balisage entier du tableau est sélectionné.
14. Choisissez Édition > Rechercher et remplacer. Observez le champ Rechercher.
Cette fois, Dreamweaver n’a pas transféré le code sélectionné dans le champ
Rechercher.
Pour obtenir de plus grandes parties de texte ou de code dans le champ Rechercher
et pour entrer de plus grandes parties de texte et de code de remplacement, vous
devez faire appel à la commande copier-coller.
15. Fermez la boîte de dialogue Rechercher et remplacer. Si nécessaire, sélectionnez
le tableau. Appuyez sur Ctrl+C/Cmd+C pour copier ses balises.
Le nec plus ultra de la recherche

Observez les options des menus Rechercher dans et Rechercher. Elles illustrent
toute la puissance et la flexibilité de Dreamweaver. La commande Rechercher et
remplacer peut opérer la recherche dans le texte sélectionné, dans le document
actif, dans tous les documents ouverts, dans un dossier spécifique, dans des fichiers
sélectionnés du site ou dans le site local actif tout entier. Et, comme si ces options
ne suffisaient pas, Dreamweaver vous permet encore de cibler la recherche en la
limitant au code source, au texte, au texte avancé, ou même à une balise spécifique.
16. Appuyez sur Ctrl+F/Cmd+F pour activer la commande Rechercher et remplacer.

Insérez le curseur dans le champ Rechercher et appuyez sur Ctrl+V/Cmd+V pour
coller le code.
La sélection entière de l’élément <table> est collée dans le champ Rechercher.

13:32:41 +0200 26/09/2012 10:23:40
17. Insérez le curseur dans le champ Remplacer et appuyez sur Ctrl+V/Cmd+V.
Toute la sélection est collée dans le champ Remplacer. Les deux champs contiennent
bien évidemment un code identique, mais cet exemple montre combien il est facile
de changer ou de remplacer de grandes quantités de code.
18. Fermez la boîte de dialogue Rechercher et remplacer. Enregistrez tous les fichiers.
Dans cette leçon, vous avez créé quatre nouvelles pages et appris à importer du texte
depuis d’autres sources. Vous avez formaté du texte avec des titres et des listes, puis
leur avez appliqué des styles en CSS. Vous avez inséré et formaté des tableaux et ajouté
des légendes à chacun d’entre eux. Enfin, vous avez relu et corrigé du texte avec le
vérificateur orthographique de Dreamweaver et sa commande Rechercher et remplacer.

13:32:41 +0200 26/09/2012 10:23:40
Révisions
Questions
1. Comment formater du texte pour en faire un titre HTML ?
2. Expliquez comment transformer un texte de paragraphe en une liste numérotée,
puis en une liste à puces.
3. Décrivez deux méthodes pour insérer des tableaux HTML dans une page web.
4. Quel élément contrôle la largeur d’une colonne de tableau ?
5. Décrivez trois moyens d’insérer du contenu dans le champ Rechercher.
Réponses
1. Utilisez le menu Format de l’inspecteur Propriétés pour appliquer une mise en
forme de titre HTML.
2. Passez le texte en surbrillance avec le curseur et cliquez sur le bouton Liste numérotée
dans l’inspecteur Propriétés. Ensuite, cliquez sur le bouton Liste à puces pour
transformer la liste numérotée en une liste à puces.
3. Vous pouvez copier et coller un tableau depuis un autre fichier HTML ou un
programme compatible. Une autre méthode consiste à insérer un tableau en important
les données depuis un fichier délimité.
4. La largeur d’une colonne de tableau est contrôlée par l’élément <td> ou <th> le plus
large qui crée la cellule de tableau individuelle.
5. Au choix, tapez du texte dans le champ, sélectionnez-le avant d’ouvrir la boîte de
dialogue afin que Dreamweaver l’insère automatiquement, ou copiez-collez le texte
ou le code dans le champ.

13:32:41 +0200 26/09/2012 10:23:40
dreamweaver propose de nombreux moyens d’insérer et d’ajuster des images,
aussi bien au sein du programme qu’en tandem avec d’autres outils de la suite
CS, comme bridge, Fireworks ou bien encore Photoshop.
202

13:32:41 +0200 26/09/2012 10:23:32
Travailler avec
des images 8
Dans cette leçon, vous allez apprendre à travailler avec des images pour les
inclure dans vos pages web par les moyens suivants :
• en insérant une image ;
• en utilisant Bridge pour importer des fichiers Photoshop ou Fireworks ;
• en employant des objets dynamiques Photoshop ;
• en copiant, puis en collant une image depuis Photoshop et Fireworks.
Cette leçon vous prendra environ 55 minutes. Avant de commencer, assurez-

203

13:32:41 +0200 26/09/2012 10:23:32
Rappel sur les bases de l’imagerie web
Le Web est moins un terrain qu’une sorte d’expérience. Or, dans cette expérience,
les images ou les graphismes de sites web (qu’ils soient statiques ou animés) jouent
un rôle primordial. Dans le monde informatique, les images se répartissent en deux
catégories : les images vectorielles et les images bitmap.
Les images
vectorielles
excellent pour
les dessins au
trait ou les logos.
La technologie
bitmap
fonctionne mieux
pour les images
photographiques. Image vectorielle. Image bitmap.
Images vectorielles
Les images vectorielles sont créées de façon mathématique. Elles se comportent à la
manière d’objets distincts, que vous pouvez repositionner et redimensionner autant de
fois que vous le souhaitez, sans affecter ni diminuer leur qualité. Elles sont particuliè-
rement adaptées aux formes géométriques et au texte pour créer des effets artistiques.
La plupart des logos des entreprises sont ainsi réalisés avec des formes vectorielles.
Les images vectorielles sont généralement stockées aux formats AI, EPS, PICT ou
WMF. La plupart des navigateurs web ne prennent malheureusement pas en charge
ces formats, à l’exception du SVG (Scalable Vector Graphic). Le moyen le plus simple
de commencer avec le format SVG est de créer une image dans votre programme
de dessin vectoriel préféré (comme Illustrator ou CorelDRAW), puis de l’exporter
dans ce format. Si vous savez bien programmer, vous pouvez tenter de créer vous-
même un fichier SVG avec des données XML (eXtensible Markup Language). Pour
en apprendre plus sur la manière de créer vos propres fichiers SVG, consultez la page
www.w3schools.com/svg (en anglais).
Images bitmap
Si le format SVG possède des avantages indéniables, c’est à la technologie bitmap que
les concepteurs web font cependant le plus souvent appel. Les images bitmap sont
créées avec des pixels (picture elements ou éléments d’image). Les pixels ont trois
caractéristiques principales :
• Ils sont de forme parfaitement carrée.
• Ils font tous la même taille.
• Ils n’affichent qu’une couleur à la fois.
204 leçon 8 Travailler avec des images

13:32:41 +0200 26/09/2012 10:23:33
Les images bitmap sont généralement composées de milliers, voire de millions, de
pixels différents disposés en lignes et en colonnes, pour former des motifs qui créent
l’illusion d’une photo, d’une peinture ou d’un dessin. Il ne s’agit que d’une illusion, car
il n’y a pas de véritable photo à l’écran. Les pixels trompent les yeux par une simulation
d’image. Plus la qualité de l’image augmente, plus l’illusion devient réaliste. La qualité
des images bitmap dépend de trois facteurs : la résolution, la taille et la couleur.
Les images
bitmap sont
constituées de
milliers ou même
de millions
de pixels, qui
produisent
l’illusion d’une
photographie.
Résolution
La résolution est le facteur le plus connu parmi ceux qui affectent la qualité des images
bitmap, exprimée en nombre de pixels qui tiennent dans un pouce (2,54 centimètres).
Plus ce nombre est élevé, plus il est possible de dépeindre de détails dans l’image.
Mais l’augmentation de la qualité a son coût, puisqu’elle entraîne celle de la taille du
fichier. En effet, chaque pixel doit être stocké sous forme d’octets d’information dans
le fichier d’image. Celui-là sera d’autant plus lourd qu’il stockera d’informations sous
forme de pixels.
La résolution
possède un effet
déterminant
sur le rendu de
l’image. L’image
web à gauche
possède bonne
apparence dans
un navigateur,
mais sa qualité est
insuffisante pour
l’impression.
72 ppp. 300 ppp.

13:32:41 +0200 26/09/2012 10:23:34
� Note : Les Les images web n’ont heureusement besoin d’être optimisées que pour leur affichage
imprimantes sur les écrans, dont la résolution avoisine généralement les 72 ppp (pixels par pouce).
utilisent des
“points” arrondis
Cette résolution est faible comparée à d’autres applications (par exemple pour l’impres-
pour créer sion), où l’on considère que 300 ppp correspond à la plus faible qualité envisageable.
les images La résolution plus faible des écrans permet que les fichiers d’image conservent une
photographiques.
taille raisonnable quand ils sont téléchargés sur Internet. Comme les pages web sont
La qualité d’une
imprimante se destinées à être consultées et non imprimées, il est inutile d’utiliser des résolutions
mesure en points d’image supérieures à 72 ppp.
par pouce ou ppp.
Le processus de Taille
conversion des
pixels carrés de La taille fait référence aux dimensions verticale et horizontale de l’image. À mesure
votre ordinateur qu’elle augmente, le nombre de pixels requis pour la créer augmente aussi, si bien
en points arrondis
que le fichier s’alourdit. Comme les images prennent plus de temps à télécharger que
utilisé sur
l’imprimante est le code HTML, de nombreux concepteurs web ont choisi récemment de remplacer
appelé “tramage”. les composants graphiques par des mises en forme CSS, afin d’accélérer l’affichage
des pages. Quoi qu’il en soit, si vous devez utiliser des images, le meilleur moyen de
s’assurer du téléchargement rapide des pages est de réduire la taille des images. Même
aujourd’hui où le haut-débit s’est considérablement popularisé, peu de sites web uti-
lisent des images qui couvrent l’ensemble de la page.
La taille des
fichiers de ces
deux images,
qui possèdent
une résolution et
une profondeur
de couleur 500 Ko.
identiques, est
déterminée par
leur dimension.
1,6 Mo.
Couleur
La couleur fait référence à l’espace colorimétrique ou à la palette qui décrit chaque
image. La plupart des écrans d’ordinateurs n’affichent qu’une fraction des couleurs
que l’œil humain est capable de voir. En outre, chaque ordinateur et application
affiche différents niveaux de couleur (on parle de profondeurs de couleur). Le mode
Monochrome, ou 1 bit, est l’espace le plus réduit, qui n’affiche que du noir et du blanc,
sans teinte de gris. Il est principalement utilisé pour les illustrations au trait, les plans
et pour reproduire l’écriture manuelle.
L’espace colorimétrique 4 bits décrit jusqu’à 16 couleurs. Les couleurs supplémentaires
peuvent être simulées au moyen d’un processus appelé tramage, qui entrecroise les
couleurs disponibles afin de créer l’illusion d’autres couleurs. Cet espace colorimé-
trique a été inventé pour les premiers systèmes informatiques et consoles de jeux en
couleur. En raison de ses limitations, cette palette est rarement utilisée aujourd’hui.

13:32:41 +0200 26/09/2012 10:23:35
La palette 8 bits propose jusqu’à 256 couleurs ou 256 teintes de gris. C’est le système
colorimétrique de tous les ordinateurs, téléphones mobiles, jeux et périphériques por-
tables actuels. Cet espace colorimétrique inclut aussi ce que l’on appelle la palette web
sécurisée. Cette dernière fait référence au sous-ensemble de couleurs 8 bits, prises en
charge à la fois sur les ordinateurs Macintosh et Windows. La plupart des ordinateurs,
consoles de jeux et périphériques mobiles prennent maintenant en charge des palettes
de couleurs plus élevées, mais la palette 8 bits est le recours de tous les périphériques
compatibles pour le Web.
Aujourd’hui, les smartphones et les jeux portatifs prennent généralement en charge
l’espace colorimétrique 16 bits. Cette palette dite à haute définition inclut un total de
65 000 couleurs. Ce chiffre peut déjà sembler impressionnant, mais il s’agit pourtant
d’une résolution considérée comme trop faible pour la plupart des travaux de concep-
tion graphique ou d’impression professionnels.
L’espace colorimétrique le plus élevé est la palette 24 bits, aussi appelée couleurs réelles.
Ce système génère jusqu’à 16,7 millions de couleurs. Il s’agit du standard de référence
pour la conception graphique et l’impression professionnelles. Il y a plusieurs années,
un nouvel espace colorimétrique a fait son apparition : la couleur 32 bits. Il ne propose
aucune couleur supplémentaire, mais fournit des bits additionnels de données pour
un attribut appelé “transparence alpha”.
La transparence alpha permet de désigner des parties de l’image comme étant tota-
lement ou partiellement transparentes. Cette astuce permet de créer des images aux
bords arrondis ou courbés en éliminant le cadre blanc qui les entoure généralement.
Cette
comparaison
édifiante des
trois espaces
colorimétriques
montre l’impact
du nombre total
de couleurs sur la
qualité de l’image.
Couleurs 24 bits. Couleurs 8 bits. Couleurs 4 bits.
Comme pour la taille et la résolution, la profondeur des couleurs peut avoir un effet
considérable sur la taille du fichier d’image. Toutes choses égales par ailleurs, une
image 8 bits est sept fois plus grande qu’une image monochrome. La version 24 bits,
elle, est trois fois plus imposante que l’image 8 bits. L’astuce, pour un usage efficace
des images sur le Web, consiste à trouver le bon équilibre entre résolution, taille et
couleur pour obtenir la qualité optimale désirée.
Formats de fichier d’image bitmap

Les images bitmap peuvent être stockées dans une multitude de formats de fichier,
mais les concepteurs web n’ont à se préoccuper que de trois d’entre eux : GIF, JPEG

13:32:41 +0200 26/09/2012 10:23:37
et PNG. Ces trois formats sont optimisés pour Internet et compatibles avec la plupart
des navigateurs. Ils ne possèdent cependant pas les mêmes capacités.
GIF
Le format GIF (Graphic Interchange Format) était l’un des premiers formats de fichiers
d’image bitmap conçus spécifiquement pour le Web. Il a très peu changé en vingt ans.
Le format GIF prend en charge 256 couleurs au maximum (palette 8 bits) et 72 ppp, si
bien qu’il est principalement utilisé pour les interfaces web, les boutons, les bordures
graphiques et autres éléments de ce genre. Il possède cependant plusieurs caractéris-
tiques intéressantes, qui en font une option utile pour les concepteurs web aujourd’hui :
la transparence d’index et la prise en charge des animations simples.
JPEG
Le format JPEG (ou JPG) tient son nom du Joint Photographic Experts Group, qui
l’a créé en 1992 en réaction aux limitations du format de fichier GIF. Le JPEG est un
format puissant, qui prend en charge une résolution, des dimensions d’image et une
profondeur de couleurs illimitées. C’est la raison pour laquelle la plupart des appareils
photo numériques utilisent le JPEG comme type de fichier par défaut pour le stockage
des images. C’est aussi pour cela que la plupart des concepteurs utilisent le JPEG sur
leurs sites web pour les images dont l’affichage doit être de haute qualité.
Cela peut paraître étrange puisque la haute qualité, comme indiqué précédemment,
est synonyme de grande taille de fichier. Les fichiers lourds prennent plus de temps
à télécharger dans les navigateurs. Pourquoi ce format est-il donc si populaire sur le
Web ? Le succès du JPEG vient de son algorithme de compression d’image breveté,
qui permet de réduire la taille des fichiers jusqu’à 95 %. Les images JPEG sont com-
pressées à chaque fois qu’elles sont enregistrées, puis décompressées lorsqu’elles sont
ouvertes et affichées.
Cette compression a malheureusement sa contrepartie. Lorsque son taux est trop élevé,
la qualité d’image en pâtit. Ce type de compression est dit à perte, parce qu’il provoque
des dégradations à chaque fois. En fait, il peut même endommager une image au point
de la rendre inutilisable. À chaque fois qu’un concepteur enregistre une image JPEG,
il doit effectuer un compromis entre qualité d’image et taille de fichier.
Vous voyez
ici l’effet de
différents taux de
compression sur
la taille du fichier
et la qualité de
l’image.
Qualité basse Qualité moyenne Qualité élevée

Haute compression Compression moyenne Compression faible
130 Ko 150 Ko 260 Ko

13:32:41 +0200 26/09/2012 10:23:38
PNG
Le format PNG (Portable Network Graphic) a été développé en 1995 en prévision d’un
inquiétant conflit relatif aux brevets impliquant le format GIF. À cette époque, il était
question que les concepteurs et les développeurs versent des royalties pour l’utilisation
de l’extension de fichier .gif. Bien que cette mesure n’ait finalement pas été appliquée,
le PNG a, entre-temps, trouvé de nombreux adhérents et s’est fait sa place sur Internet,
en raison de plusieurs intéressantes caractéristiques.
Le PNG combine plusieurs fonctionnalités des formats GIF et JPEG en y apportant
quelques particularités de son cru. Par exemple, il accepte des dimensions illimitées,
possède une résolution 32 bits et prend en charge la transparence alpha et la transparence
d’index. Il propose aussi une compression sans perte, ce qui signifie que vous pouvez
enregistrer une image au format PNG sans vous soucier de dégrader sa qualité à chaque
fois que vous ouvrez et enregistrez le fichier. C’est le grand point positif de ce format.
Le point négatif est le suivant : alors même que ce format existe depuis maintenant
plus de quinze ans, ses fonctionnalités (comme la transparence alpha) ne sont pas
complètement prises en charge par les anciens navigateurs.

Afin de comprendre sur quels fichiers vous travaillerez dans cette leçon, observons
les pages terminées dans un navigateur.
1. Lancez Dreamweaver CS6.
2. Si nécessaire, appuyez sur Ctrl+Maj+F/Cmd+Maj+F pour ouvrir le panneau Fichiers,
et sélectionnez DW-CS6 dans la liste des sites.
4. Ouvrez les fichiers contactus_finished.html et news_finished.html du dossier
lesson08 et observez les pages dans votre navigateur principal.
Les pages incluent plusieurs images, ainsi qu’une image d’objet dynamique Photoshop.
5. Fermez votre navigateur et revenez à Dreamweaver.

13:32:41 +0200 26/09/2012 10:23:39
Insérer une image
� Note : Si vous Les images sont des composants clés de n’importe quelle page web, puisqu’elles font
commencez cette passer des messages tout en ayant un intérêt visuel. Dreamweaver propose de nombreux
leçon en partant
de zéro, utilisez
moyens de remplir vos pages avec des images, en utilisant des commandes intégrées
la méthode ou la fonctionnalité de copier-coller. L’une des méthodes consiste à insérer l’image en
décrite dans la utilisant les outils de Dreamweaver.
sous-section
“Démarrage 1. Dans le panneau Fichiers, ouvrez le fichier contact_us.html depuis le dossier racine
instantané” de la du site (il s’agit du fichier que vous avez terminé à la Leçon 7, “Travailler avec du
section “Guide de
texte, des listes et des tableaux”).
démarrage”, au
début de ce livre. Un espace réservé pour l’image apparaît dans <div.sidebar1> pour indiquer
l’endroit où une image doit être insérée.
2. Double-cliquez sur l’espace réservé pour l’image intitulée Sidebar (180 x 150).
La boîte de dialogue Sélectionner la source de l’image apparaît.
3. Sélectionnez biking.jpg dans le dossier images du site. Cliquez sur OK/Ouvrir.
L’image apparaît dans la barre latérale.
Dans le meilleur des mondes, on s’attendrait à ce que les images apparaissent à

l’endroit et à la taille spécifiés dans vos pages. Bien souvent, elles ne s’affichent
cependant pas comme on le souhaite. Cela peut être dû à divers facteurs, comme
l’incompatibilité de certains périphériques ou types de fichiers, ainsi qu’à des
erreurs de serveur et de navigateur. Certains utilisateurs peuvent même avoir des
handicaps qui les empêchent tout simplement de voir les images. Que pouvez-
vous faire quand vos images ne s’affichent pas ou ne peuvent être vues ? Le HTML
propose un attribut de texte secondaire (alt) précisément pour ces cas. Lorsque les
images n’apparaissent ou ne peuvent être observées, le texte secondaire est affiché
à la place ou peut être consulté par des périphériques d’assistance.
Dans la plupart des cas, Dreamweaver vous demande d’indiquer le texte secondaire
à chaque fois que vous insérez une nouvelle image. Lorsque vous remplacez une
image de remplissage, vous devez cependant le faire manuellement.

13:32:41 +0200 26/09/2012 10:23:40
4. Placez le curseur dans le champ Sec. de l’inspecteur des propriétés, tapez Bike to
work to save gas et appuyez sur Entrée pour compléter l’entrée.
5. Pour donner une légende à votre image, sélectionnez le texte de remplissage Add
caption here et tapez We practice what we preach, here’s Lin biking to work
through Lakefront Park.
Vous avez réussi à insérer une image en adoptant une technique particulière, mais
Dreamweaver propose d’autres techniques également. Vous allez maintenant faire
appel au panneau Actifs.
6. Placez le curseur au début du premier paragraphe sous le titre Association Management
dans <section.profile>. Le curseur doit être inséré avant le nom Elaine.
� Astuce :
7. Choisissez Fenêtre > Actifs pour afficher le panneau Actifs. Cliquez sur la catégorie Dreamweaver
Images ( ) pour afficher une liste de toutes les images stockées dans le site. vous permet de
faire glisser l’icône
8. Localisez et sélectionnez elaine.jpg dans la liste. de l’image du
panneau Actifs
Un aperçu du fichier elaine.jpg apparaît dans le panneau Actifs. Le panneau indique vers la page.
le nom de l’image, ses dimensions en pixels, le type de fichier et son chemin.
9. Notez les dimensions de l’image : 150 × 150 pixels. � Note : La
fenêtre Images
10. En bas du panneau, cliquez sur le bouton Insérer. affiche toutes les
images stockées
dans le site, sans
exclure celles
qui se trouvent
en dehors du
dossier d’images
par défaut. Vous
pourrez donc
également y voir
des listes d’images
stockées dans les
sous-dossiers de
leçons.
� Note : Si
plusieurs fichiers
apparaissent
avec le même
nom dans le
L’image apparaît à l’emplacement courant du curseur. panneau Actifs,
assurez-vous
11. Dans le champ Texte secondaire de la boîte de dialogue Attributs d’accessibilité de sélectionner
l’image stockée
des balises d’image, tapez Elaine, Meridien GreenStart President and CEO.
dans le dossier
Cliquez sur OK. des images par
défaut.

13:32:41 +0200 26/09/2012 10:23:41
Vous avez inséré l’image d’Elaine dans le texte, mais elle n’est pas à son avantage à cet
emplacement. Dans l’exercice suivant, vous allez ajuster sa position avec une classe CSS.
Ajuster la position des images

avec des classes CSS
Par défaut, l’élément <img> est un élément incorporé. C’est la raison pour laquelle vous
pouvez insérer des images dans des paragraphes et d’autres éléments. Lorsque l’image
est plus grande que la taille de police, elle augmente l’espace vertical de la ligne dans
laquelle elle s’insère. Auparavant, il était possible de la positionner avec des attributs
HTML ou en CSS, mais les attributs HTML ont été dépréciés à la fois dans la spéci-
fication du langage et dans Dreamweaver CS6. Vous devez maintenant vous appuyer
entièrement sur des techniques CSS.
Si vous souhaitez que les images s’alignent d’une certaine manière, vous pouvez créer
une règle personnalisée pour la balise <img> afin de lui appliquer une mise en forme
particulière. Dans le cas présent, nous souhaitons que les photos des employés alternent
entre la gauche et la droite dans la page. Vous allez donc créer une classe personnalisée
afin de pouvoir opter entre l’alignement à gauche et l’alignement à droite.
1. Si nécessaire, ouvrez contact_us.html.
2. Cliquez sur l’icône Nouvelle règle de CSS dans le panneau Styles.
3. Dans le menu Type de sélecteur de la boîte de dialogue Nouvelle règle de CSS,
choisissez Classe.
4. Nommez la règle flt_rgt et cliquez sur OK pour la créer.
Le nom de la règle est un raccourci de “float right” (flottante à droite). Il vous
donne une indication sur la commande que vous allez utiliser pour mettre en
forme les images.

13:32:41 +0200 26/09/2012 10:23:42
5. Dans le menu Float de la catégorie Boîte, choisissez right. Dans le champ Left de
la section Margin, tapez 10 px et cliquez sur OK.
Vous pouvez appliquer la classe depuis l’inspecteur des propriétés.

6. Dans la page, sélectionnez l’image elaine.jpg. Dans le menu Classe de l’inspecteur
des propriétés, sélectionnez flt_rgt.
L’image se cale sur la droite de l’élément section et le texte l’habille côté gauche. Le
réglage de marge évite au texte de toucher le bord de l’image. Vous allez créer une
règle similaire pour aligner les images à gauche au prochain exercice.
� Note : Si vous
ne voyez pas le
panneau Insertion
Travailler avec le panneau Insertion amarré à droite
de l’écran, il se
peut qu’il s’ouvre
Le panneau Insertion offre accès à certaines commandes de menu clés et inclut plusieurs comme une barre
options qui facilitent et accélèrent l’insertion des images et d’autres éléments de code. d’outils en haut
de la fenêtre
1. Placez le curseur au début du premier paragraphe sous le titre Education and de document,
Events, avant le nom Sarah. comme dans
l’espace de travail
2. Si nécessaire, choisissez Fenêtre > Insertion pour afficher le panneau Insertion. Classique.

13:32:41 +0200 26/09/2012 10:23:43
3. Dans le panneau Insertion, sélectionnez la catégorie
Commun.
Cliquez sur le bouton Images pour ouvrir son menu.
Le menu déroulant du bouton propose plusieurs
options : Image, Espace réservé pour l’image, Image
survolée, HTML Fireworks, Dessiner une zone réactive
rectangulaire, Dessiner une zone réactive ovale ou
Dessiner une zone réactive polygonale. Une zone
réactive est un lien hypertexte activé par une zone
définie à l’intérieur d’une image.
4. Dans le menu déroulant, choisissez Image.
La boîte de dialogue Sélectionner la source de l’image apparaît.
5. Sélectionnez sarah.jpg dans le répertoire d’images par défaut et notez les dimensions
de l’image : 150 × 150 pixels. Cliquez sur OK/Choisir.
6. Dans le champ Texte secondaire de la boîte de dialogue Attributs d'accessibilité des
balises d'image, tapez Sarah, GreenStart Events Coordinator. Cliquez sur OK.
7. Cliquez sur l’icône Nouvelle règle de CSS dans le panneau Styles.
8. Dans le menu déroulant Type de sélecteur de la boîte de dialogue Nouvelle règle
de CSS, choisissez Classe.
9. Nommez la règle flt_lft et cliquez sur OK pour la créer.
Le nom de la règle est un raccourci de “float left” (flottante à gauche).
10. Dans le menu Float de la catégorie Boîte, choisissez left. Dans le champ Right de
la section Margin, tapez 10 px et cliquez sur OK.
11. Appliquez la classe flt_lft à l’image.
L’image descend à gauche du paragraphe et le texte l’habille sur sa droite.

13:32:41 +0200 26/09/2012 10:23:44
L’autre moyen d’insérer des images dans votre page web consiste à utiliser Bridge
d’Adobe.
Utiliser Bridge pour insérer des images

Bridge CS6 est un outil essentiel pour les concepteurs web qui veulent rapidement
parcourir des répertoires d’images ou d’autres ressources, ainsi que gérer et marquer
des fichiers avec des mots-clés et des étiquettes. Bridge est entièrement intégré à
Dreamweaver : vous pouvez le lancer depuis Dreamweaver et faire glisser des images
directement de Bridge vers vos pages ou utiliser des commandes spécifiques.
1. Placez le curseur au début du premier paragraphe sous le titre Transportation
Analysis, avant le nom Eric.
2. Choisissez Fichier > Parcourir dans Bridge.
Adobe Bridge se lance. L’interface de Bridge peut être configurée à volonté et
enregistrée sous forme d’espace de travail personnalisé. Pour la plupart des opérations,
vous pouvez utiliser l’espace de travail principal, comme l’illustre la figure suivante.
3. Cliquez sur l’onglet Dossiers pour amener le panneau Dossiers au premier plan. Si
nécessaire, choisissez Fenêtre > Volet Dossiers. Naviguez jusqu’au dossier désigné
comme le dossier d’images par défaut sur votre disque dur. Observez les noms et
les types de fichiers affichés dans le dossier.
Bridge affiche une vignette pour chaque fichier dans le dossier, ce qu’il peut faire
pour tous les types de fichiers graphiques, comme les images AI, BMP, EPS, GIF,
JPG, PDF, PNG, SVG et TIFF, pour ne citer que ceux-là.

13:32:41 +0200 26/09/2012 10:23:45
4. Cliquez sur eric.png. Observez les volets Aperçu et Métadonnées. Notez les
dimensions, la résolution et l’espace colorimétrique de l’image.
Le volet Aperçu affiche un aperçu de haute qualité de l’image sélectionnée.

Bridge possède également des fonctionnalités pour vous aider à localiser et à isoler
des types spécifiques de fichiers.
5. Choisissez Fenêtre > Volet Filtre pour afficher le volet Filtre s’il n’est pas déjà visible.
Le panneau Filtre affiche par défaut un ensemble de critères de données (le
type de fichier, la note, les mots-clés, la date de création, etc.), qui sont ensuite
automatiquement remplis par les contenus d’un dossier particulier. Vous pouvez
filtrer le contenu en fonction de ces critères en cliquant sur un ou plusieurs éléments.
Une coche
apparaît à côté 6. Dans le panneau Filtre, déroulez le critère Type de fichier. Sélectionnez le critère
du critère Image Fichier JPEG.
GIF. Le volet
Contenu affiche Une coche apparaît à côté du critère Fichier JPEG. Le fichier PNG que vous avez
maintenant des sélectionné n’est plus visible. Le volet Contenu au milieu d’Adobe Bridge n’affiche
fichiers GIF et
JPEG uniquement. que des fichiers JPEG.
Les autres types
7. Dans l’onglet du critère Type de fichier, cliquez sur Image GIF.
de fichiers sont
masqués par
Bridge mais
existent toujours
dans le dossier.
Vous pouvez
utiliser Bridge
pour insérer un de
ces fichiers dans
Dreamweaver
ou d’autres
applications de la
suite CS.

13:32:41 +0200 26/09/2012 10:23:45
8. Sélectionnez eric.jpg dans le volet Contenu. Notez les dimensions de l’image dans
le volet Métadonnées : 150 × 150 pixels. Choisissez Fichier > Importer > Dans
Dreamweaver.
Votre ordinateur rebascule automatiquement sur Dreamweaver. La boîte de dialogue

Attributs d’accessibilité des balises d’image apparaît.
9. Dans le champ Texte secondaire de la boîte de dialogue Attributs d’accessibilité des
balises d’image, tapez Eric, Transportation Research Coordinator. Cliquez sur OK.
L’image eric.jpg apparaît dans la mise en page Dreamweaver au dernier emplacement
où se trouvait le curseur.
10. Appliquez la classe flt_rgt à cette image.

Dreamweaver n’est pas limité aux seuls types de fichiers GIF, JPEG et PNG. Il
est capable de travailler avec d’autres formats. Au prochain exercice, vous allez
apprendre à insérer un document Photoshop (PSD) dans une page web.

13:32:41 +0200 26/09/2012 10:23:46
Insérer des types de fichiers incompatibles
Si la plupart des navigateurs n’affichent que les formats d’image compatibles pour le
Web décrits précédemment, Dreamweaver permet de choisir parmi de nombreux
formats et s’occupe de convertir à la volée les fichiers en un format compatible.
1. Placez le curseur au début du premier paragraphe sous le titre Research and
Development, avant le nom Lin.
2. Choisissez Insertion > Image. Naviguez jusqu’au dossier lesson08 > resources de
votre disque dur. Sélectionnez lin.psd.
Vous remarquerez que la boîte de dialogue de Dreamweaver ne propose pas

d’aperçu ou de spécifications d’image pour le fichier PSD. Il serait difficile, voire
impossible, d’utiliser cette boîte de dialogue pour identifier et sélectionner des
images enregistrées dans ce format. Si vous êtes familiarisé avec les noms des
fichiers que vous souhaitez utiliser, vous pouvez les sélectionner depuis cette boîte
de dialogue. Sans cela, l’idéal est d’utiliser Bridge.
3. Cliquez sur Annuler. Passez à Adobe Bridge ou lancez-le. Naviguez jusqu’au dossier
resources dans le dossier lesson08. Observez les images dans le dossier resources.
Le dossier contient deux images : un fichier PSD et un fichier TIFF. Bridge offre un
aperçu du contenu du fichier et fournit des métadonnées pour chacune des images.
4. Cliquez sur lin.psd et choisissez Fichier > Placer > Placer dans Dreamweaver.

13:32:41 +0200 26/09/2012 10:23:47
L’image apparaît dans la page et la boîte de dialogue Optimisation de l’image
s’affiche – elle sert d’intermédiaire pour vous permettre de spécifier comment
convertir l’image et dans quel format.
5. Observez les options dans les menus Paramètres enregistrés et Format.
Les paramètres enregistrés vous permettent de sélectionner des options prédéfinies

qui sont réputées fonctionner pour les images web. Le menu déroulant Format
vous permet de spécifier vos propres réglages parmi cinq options possibles : GIF,
JPEG, PNG 8, PNG 24 et PNG 32. � Note :
Lorsqu’une image
6. Dans le menu Paramètres enregistrés, choisissez JPEG Qualité supérieure pour doit être convertie
une compatibilité maximale. Observez le paramètre Qualité. de cette manière,
Dreamweaver
Ce paramètre Qualité produit une image de haute qualité avec un taux de compression enregistre
modéré. Si vous en réduisez la valeur, vous augmentez automatiquement le niveau généralement la
de compression et réduisez la taille du fichier. Si vous en augmentez la valeur, vous nouvelle version
dans le dossier
produisez l’effet inverse. Le secret pour une conception efficace consiste à choisir des images
le meilleur équilibre entre qualité et compression. Le réglage par défaut pour le par défaut. Ce
paramètre enregistré JPEG Qualité supérieure est 80. Cela devrait convenir à nos n’est pas le cas
quand les images
besoins.
insérées sont
7. Cliquez sur OK pour convertir l’image. déjà compatibles
pour le Web.
La boîte de dialogue Enregistrer l’image pour le Web apparaît. Le nom lin est entré Avant d’insérer
dans le champ Enregistrer sous. Dreamweaver ajoute ensuite l’extension .jpg au vos images,
repérez donc leur
fichier et enregistre le fichier dans le dossier d’images par défaut du site. emplacement
8. Cliquez sur Enregistrer. actuel dans le site
et, si nécessaire,
La boîte de dialogue Attributs d’accessibilité des balises d’image apparaît. déplacez-les dans
le bon dossier.

13:32:41 +0200 26/09/2012 10:23:50
9. Dans le champ Texte secondaire, tapez Lin, Research and Development Coordinator.
Cliquez sur OK.
L’image apparaît dans Dreamweaver à la position du curseur. L’image a été

rééchantillonnée à 72 ppp mais apparaît toujours avec ses dimensions d’origine, qui
sont bien supérieures aux autres images dans la page. Vous pouvez la redimensionner
dans l’inspecteur des propriétés.
10. Dans l’inspecteur des propriétés, cliquez sur l’icône Basculer la contrainte de taille
( ) et changez le champ L en tapant 150 px.
Ce changement de la taille de l’image n’est que temporaire, comme l’indiquent

les icônes Rétablir la contrainte de taille ( ) et Envoyer la taille de l’image ( ).
11. Cliquez sur l’icône Envoyer la taille de l’image ( ).
L’image se redimensionne à 150 × 150 pixels.
12. Appliquez la classe flt_lft à l’image. Enregistrez le fichier.

13:32:41 +0200 26/09/2012 10:23:52
L’image apparaît dans la page, mais elle possède une différence notable. Une
icône apparaît dans son coin supérieur gauche pour signaler qu’il s’agit d’un objet
dynamique Photoshop.
Travailler avec des objets

dynamiques Photoshop
Contrairement aux autres images, les objets dynamiques conservent un lien au fichier � Note :
Photoshop (PSD). Si le fichier PSD est modifié de quelque manière que ce soit puis Dreamweaver et
Photoshop ne
enregistré, Dreamweaver repère ces modifications et permet de mettre à jour l’image permettent de
web utilisée dans la page. travailler qu’à
partir de l’état
1. Si nécessaire, ouvrez contact_us.html. Faites défiler la page vers le bas jusqu’à initial de l’image.
l’image lin.jpg dans la section Research and Development. Observez l’icône dans Si la qualité de
le coin supérieur gauche de l’image. l’image d’origine
est mauvaise,
L’icône indique que l’image est un objet dynamique. La flèche circulaire verte indique vous ne pourrez
que l’image d’origine est inchangée. Si vous souhaitez la modifier ou l’optimiser, sans doute pas
la corriger dans
double-cliquez tout simplement dessus et sélectionnez l’option appropriée du Photoshop. Vous
menu contextuel. devrez recréer
l’image ou en
Pour apporter des changements importants à l’image, ouvrez-la dans Photoshop choisir une autre.
(si Photoshop n’est pas installé sur votre ordinateur, copiez lesson08 > resources >
smartobject > lin.psd dans le dossier lesson08 > resources pour remplacer l’image
d’origine, puis passez à l’étape 6). Dans cet exercice, vous allez modifier l’arrière-
plan de l’image en utilisant Photoshop.
2. Cliquez du bouton droit sur lin.jpg. Choisissez Modifier l’original avec > Photoshop
Photoshop se lance (s’il est installé sur votre ordinateur) et charge le fichier.

13:32:41 +0200 26/09/2012 10:23:54
3. Dans Photoshop, choisissez Fenêtre > Calques pour afficher la palette Calques.
Observez les noms et les états des calques existants.
L’image contient deux calques : Lin et New Background. New Background est
désactivé.
4. Cliquez sur l’icône en forme d’œil ( ) pour afficher le contenu du calque New
Background.
L’arrière-plan de l’image change et révèle le paysage d’un parc.

5. Enregistrez le fichier Photoshop.
6. Repassez à Dreamweaver.
Quelques instants plus tard, l’icône de l’objet dynamique, dans le coin supérieur
gauche de l’image, change pour indiquer que le fichier d’origine a été modifié.
L’icône n’apparaît que dans Dreamweaver lui-même ; les visiteurs verront l’image
normale dans le navigateur. Vous n’êtes pas pour autant obligé de mettre à jour
l’image sur votre site ; vous pouvez la laisser telle quelle aussi longtemps que vous
le souhaiterez. Dreamweaver continue de surveiller son état tant qu’elle se trouve
dans la page. Pour les besoins de cet exercice, vous devez cependant la mettre à jour.
7. Cliquez du bouton droit sur l’image et, dans le menu déroulant, choisissez Mettre
à jour à partir de l’original.
Cet objet dynamique et toutes ses autres occurrences se changent en faisant
apparaître le nouvel arrière-plan.

13:32:41 +0200 26/09/2012 10:23:55
Comme vous pouvez le voir, les objets dynamiques possèdent des avantages sur les
images normales. En cas d’utilisation d’images évoluant fréquemment, le recours aux
objets dynamiques peut considérablement simplifier les opérations de mise à jour du site.
Copier et coller des images de

Photoshop et Fireworks
Lorsque vous construirez votre site, vous aurez besoin d’éditer et d’optimiser de
nombreuses images avant de les utiliser dans vos pages. Adobe Fireworks et Adobe
Photoshop sont deux programmes de choix pour réaliser ces tâches. L’une des pro-
cédures courantes consiste à exporter manuellement le fichier GIF, JPEG ou PNG
optimisé dans le dossier d’images par défaut du site web quand vous avez fini de le
préparer. Parfois, il est cependant plus simple de copier les images et de les coller
directement dans vos pages. Que vous travailliez avec Photoshop ou Fireworks, les
étapes sont presque identiques et le résultat est le même. Dans cet exercice, n’hésitez
pas à utiliser le programme auquel vous êtes le plus habitué.
1. Lancez Fireworks ou Photoshop. Ouvrez matthew.tif dans le dossier lesson08 >
resources. Observez le panneau Calques.
L’image ne contient qu’un calque. Fireworks vous permet de sélectionner plusieurs
calques, puis de les copier et les coller dans Dreamweaver. Dans Photoshop, vous
devrez fusionner ou aplatir les calques avant de les copier et les coller. Vous pouvez
sinon utiliser la commande Édition > Copier avec fusion pour copier les images
avec plusieurs calques actifs.
2. Appuyez sur Ctrl+A/Cmd+A pour sélectionner l’image entière, puis sur Ctrl+C/
Cmd+C pour la copier.
3. Passez à Dreamweaver. Faites défiler la page vers le bas jusqu’à la section Information
Systems dans contact_us.html. Placez le curseur au début du premier paragraphe
dans cette section, avant le nom Matthew.
4. Appuyez sur Ctrl+V/Cmd+V pour coller l’image depuis le presse-papiers.
L’image apparaît dans la page et la boîte de dialogue Aperçu de l’image s’affiche.

13:32:41 +0200 26/09/2012 10:23:55
5. Sélectionnez la référence prédéfinie PNG24 pour photos (détails nets) et choisissez
PNG 24 dans le menu Format. Cliquez sur OK.
La boîte de dialogue Enregistrer l’image apparaît.

6. Nommez l’image matthew.png et, si nécessaire, sélectionnez le dossier d’images
par défaut du site. Cliquez sur Enregistrer.
La boîte de dialogue Description de l’image (Texte sec.) apparaît.
7. Tapez Matthew, Information Systems Manager dans le champ Description de
l’image (Texte secondaire). Cliquez sur OK.
L’image matthew.png apparaît dans la page. Comme dans le précédent exercice,
l’image PNG est plus grande que les autres images.
� Note : Les 8. Dans l’inspecteur des propriétés, changez la taille en tapant 150 px pour la largeur
images bitmap et la hauteur. Cliquez sur l’icône Valide ( ) pour appliquer la modification de
peuvent être
réduites en taille
manière permanente.
sans perdre en 9. Appliquez la classe flt_rgt à matthew.png.
qualité, mais
l’inverse n’est
pas vrai. Si la
résolution de
votre image n’est
pas supérieure
à 72 ppp, il ne
sera pas possible
de l’agrandir
sans la dégrader
de manière
apparente.
L’image apparaît dans la page de la même taille que les autres images et alignée à
� Note :
L’option Modifier droite. Bien qu’elle provienne de Fireworks ou Photoshop, elle n’est pas “dynamique”
l’original avec comme l’est un objet dynamique et ne peut être mise à jour de manière automatique.
peut ne pas être En revanche, elle tient le registre de l’emplacement de l’image d’origine si vous
disponible pour
les utilisateurs qui souhaitez l’éditer par la suite.
n’ont pas installé 10. Dans la mise en page, cliquez du bouton droit sur l’image matthew.png et choisissez
Photoshop ou
Fireworks. Modifier l’original avec > Parcourir dans le menu contextuel.

13:32:41 +0200 26/09/2012 10:23:56
11. Naviguez jusqu’au fichier de programme Fireworks ou Photoshop sur votre disque
dur et sélectionnez-le. Cliquez sur Ouvrir.
� Astuce :
Le fichier de
programme
exécutable est
généralement
stocké dans
le dossier
Programmes
sous Windows et
dans le dossier
Applications sur
Mac.
Le programme lance et affiche le fichier TIFF d’origine. Vous pouvez apporter

des modifications à l’image et la copier-coller dans Dreamweaver en répétant les
étapes 2 à 9. Même s’il n’existe pas de moyen de remplacer automatiquement l’image
comme un objet dynamique, une méthode est plus efficace que le copier-coller.
(Les utilisateurs Photoshop peuvent passer directement à l’étape 13.)
12. Dans Fireworks, choisissez Fichier > Aperçu de l’image. Dans le menu Format de
l’onglet Options, sélectionnez PNG 24. Dans l’onglet Fichier, changez les champs
de L et H en tapant 150 px. Cliquez sur Exporter.
La boîte de dialogue Aperçu de l’image vous permet de spécifier la taille d’exportation

de l’image. Fireworks mémorise les spécifications que vous sélectionnez dans cette
boîte de dialogue lorsque vous enregistrez et fermez le fichier. Les utilisateurs de
Fireworks peuvent passer directement à l’étape 15.

13:32:41 +0200 26/09/2012 10:23:58
13. Dans Photoshop, choisissez Fichier > Enregistrement pour le Web. Choisissez
PNG-24 dans le menu Réglages. Changez la valeur du champ Largeur de taille de
l’image en tapant 150 px. Cliquez sur Enregistrer.
La boîte de dialogue Enregistrer pour le Web apparaît.
14. Naviguez jusqu’au dossier des images par défaut et cliquez sur le fichier matthew.png.
Le nom matthew.png apparaît dans le champ Nom de fichier de la boîte de dialogue.
� Astuce : Le fait de cliquer sur le nom insère le nom de fichier existant dans le champ de la boîte
de dialogue et évite toute erreur de saisie, ce qui est primordial pour les serveurs web Unix.
15. Cliquez sur Exporter/Enregistrer.

16. Revenez à Dreamweaver. Faites défiler la page vers le bas pour voir matthew.png
dans la section Information Systems.
Aucune autre action n’est requise pour mettre à jour l’image dans la page, car vous
avez enregistré la nouvelle image par-dessus le fichier d’origine. Tant que le nom
de fichier n’a pas changé, Dreamweaver ne s’en occupe pas et aucune autre action
n’est nécessaire. Cette méthode économise plusieurs étapes et évite d’éventuelles
erreurs de saisie.
� Note : Dreamweaver recharge automatiquement tout fichier modifié, mais ce n’est pas le cas
de la plupart des navigateurs. Vous devez actualiser l’affichage du navigateur pour apercevoir les
modifications.

La procédure de copier-coller est l’une des méthodes pratiques pour insérer des images.
Dreamweaver vous permet aussi de faire glisser des images dans votre mise en page.

13:32:41 +0200 26/09/2012 10:23:59
Insérer des images par glisser-déposer
La plupart des programmes de la suite CS proposent des fonctionnalités de glisser-
déposer et Dreamweaver n’y fait pas exception.
1. Ouvrez le fichier news.html que vous avez créé à la précédente leçon depuis le
dossier racine du site.
2. Si nécessaire, choisissez Fenêtre > Actifs pour afficher le panneau Actifs. Pour cet
exercice, le panneau doit être ancré. Si nécessaire, choisissez Fenêtre > Présentation
de l’espace de travail > Réinitialiser ‘Designer’ pour restaurer la configuration par
défaut des panneaux.
3. Cliquez sur l’icône Images dans le panneau Actifs. � Astuce :
Si vous ne
4. Faites glisser city.jpg du panneau vers le début du premier paragraphe sous le titre voyez pas de
Green Buildings earn more Green. fichiers d’image
spécifiques
listés dans le
panneau Actifs,
cliquez sur l’icône
Actualiser ( )
pour recharger les
images du site.
La boîte de dialogue Attributs d’accessibilité des balises d’image apparaît.

5. Dans le champ Texte secondaire, tapez Green buildings are top earners. Cliquez � Astuce :
sur OK. Dreamweaver
vous permet aussi
6. Appliquez la classe flt_lft à l’image. Enregistrez le fichier. de faire glisser
dans la page une
Il faut une main sûre et un peu d’expérience pour maîtriser la technique du glisser- image depuis
déposer, mais il s’agit d’un bon moyen d’insérer rapidement des images dans vos pages. Bridge.
Optimiser les images avec

l’inspecteur Propriétés
Les images web optimisées sont le fruit d’un compromis entre dimensions et qualité
d’un côté, et taille de fichier de l’autre. Il peut parfois être nécessaire d’optimiser des
images qui ont déjà été insérées dans la page. Dreamweaver possède des fonctionnalités
intégrées qui permettent d’atteindre la taille de fichier la plus réduite possible, tout en
préservant sa qualité. Dans cet exercice, vous allez utiliser les outils de Dreamweaver
pour mettre à l’échelle, optimiser et rogner une image à destination du Web.
1. Placez le curseur au début du premier paragraphe sous le titre Shopping green
saves energy. Choisissez Insertion > Image. Sélectionnez farmersmarket.png dans
le dossier images du site et cliquez sur OK/Choisir.

13:32:41 +0200 26/09/2012 10:24:01
2. Dans le champ Texte secondaire, tapez Buy local to save energy. Cliquez sur OK.
3. Appliquez la classe flt_rgt à l’image.
L’image est trop grande et pourrait être recadrée. Pour gagner du temps, vous
pouvez utiliser les outils de Dreamweaver et améliorer sa composition.
4. Si nécessaire, choisissez Fenêtre > Propriétés pour afficher l’inspecteur Propriétés.
À chaque fois qu’une image est sélectionnée, les options d’édition d’image apparaissent
dans le coin inférieur droit de l’inspecteur Propriétés. Les boutons de cette section
permettent d’éditer l’image dans Fireworks ou Photoshop ou d’ajuster divers
paramètres sur place. Observez l’encadré “Les outils graphiques de Dreamweaver”
pour en apprendre plus sur chacun des boutons.
Il existe deux moyens de réduire les dimensions d’une image dans Dreamweaver.
La première méthode consiste à changer temporairement la taille de l’image en
imposant des dimensions définies par l’utilisateur.
5. Sélectionnez farmersmarket.png. Dans l’inspecteur des propriétés, cliquez sur
l’icône Basculer la contrainte de taille ( ) et passez la largeur de l’image à 300 px.
La hauteur se réadapte automatiquement à la nouvelle largeur. Dreamweaver
indique que la nouvelle taille n’est pas permanente en affichant les spécifications
courantes en gras ainsi que les icônes Rétablir la contrainte de taille ( ) et Envoyer
la taille de l’image ( ).
6. Cliquez sur l’icône Rétablir la contrainte de taille ( ).
L’image retrouve sa taille d’origine. Elle peut aussi être redimensionnée de manière
interactive.
� Astuce : 7. Faites glisser le coin inférieur droit pour réduire l’image à une largeur de 350 pixels.
Lorsque vous Si vous maintenez la touche Maj enfoncée pendant le redimensionnement, la
redimensionnez
hauteur change de manière proportionnelle. Sinon cliquez sur l’icône Basculer la
l’image,
l’inspecteur contrainte de taille ( ) quand vous avez terminé pour forcer le redimensionnement
des propriétés proportionnel.
propose un
affichage en
temps réel des
dimensions de
l’image.
Les icônes Rétablir la contrainte de taille ( ) et Envoyer la taille de l’image ( )

apparaissent dans l’inspecteur des propriétés.
8. Cliquez sur l’icône Envoyer la taille de l’image ( ).

13:32:41 +0200 26/09/2012 10:24:03
Une boîte de dialogue apparaît et indique que la modification deviendra permanente.
9. Cliquez sur OK.
Dreamweaver peut aussi recadrer directement des images.
10. Cliquez sur l’icône Recadrer ( ) dans l’inspecteur des propriétés.
Une boîte de dialogue apparaît qui indique que l’action altérera l’image de manière
permanente. Cliquez sur OK. Des poignées de recadrage apparaissent sur l’image.
11. Recadrez l’image à une largeur et une hauteur de 300 pixels.
12. Appuyez sur Entrée pour finaliser la modification.

Exercice bonus : compléter la page de news

La page de news a toujours besoin de deux images et d’une légende pour la barre laté-
rale. Prenez quelques minutes et exercez quelques-unes des compétences que vous
avez acquises dans cette leçon pour terminer la page.
1. En utilisant l’une des techniques que vous avez apprises dans cette leçon, remplacez
l’espace réservé d’image de la barre latérale par l’image sprinkler.jpg. Utilisez le
texte secondaire suivant : Check watering restrictions in your area.
2. Ajoutez la légende suivante à la barre latérale : The Meridien city council will
address summer watering restrictions at the next council meeting.
3. Dans l’article Recycling isn’t always Green, insérez l’image recycling.jpg avec le
texte secondaire Learn the pros and cons of recycling. Appliquez la classe flt_lft.
Au cours de cette leçon, vous avez appris à insérer des images et des objets dynamiques
dans une page Dreamweaver, à travailler avec Bridge, à copier-coller des images depuis
Fireworks et Photoshop et à utiliser l’inspecteur Propriétés pour les modifier.

13:32:41 +0200 26/09/2012 10:24:04
Il existe de nombreux moyens de créer et d’éditer des images pour le Web. Les exemples
de cette leçon n’en illustrent que quelques-uns et ne sont pas destinés à recommander
une méthode au détriment d’une autre. Utilisez celles qui conviennent à vos habitudes
de travail, en fonction de votre situation et de votre niveau d’expertise.
les outils graphiques

de dreamweaver
Tous les outils graphiques de dreamweaver sont accessibles depuis l’inspecteur
Propriétés quand une image est sélectionnée.
Modifier. ouvre l’image sélectionnée dans l’éditeur graphique externe défini.
vous pouvez attribuer un programme d’édition graphique à n’importe quel
type de fichier dans la catégorie Types de fichiers/Éditeurs des préférences.
l’image du bouton de l’outil change en fonction du programme choisi : selon
l’éditeur désigné pour le type d’image concerné, une icône de Fireworks ( )
ou de Photoshop ( ) apparaît.
Modifier les paramètres de l’image. ouvre la boîte de dialogue Aperçu de
l’image, qui permet d’appliquer des spécifications d’optimisation définies par
l’utilisateur à l’image sélectionnée.
Mettre à jour depuis l’original. met à jour l’objet dynamique placé afin de
refléter les modifications apportées au fichier source original.
Recadrer. Supprime de manière permanente les parties non souhaitées d’une
image. lorsque l’outil recadrer est activé, un cadre cerné de poignées apparaît
dans l’image courante. Ajustez ce cadre en faisant glisser les poignées. lorsque
le contour du cadre délimite la partie désirée de l’image, double-cliquez sur
le graphisme pour appliquer le recadrage.
Rééchantillonner. redimensionne de manière permanente une image. Cet
outil n’est actif que lorsqu’une image a été redimensionnée.
Luminosité et contraste. Propose des réglages d’ajustement de la luminosité
et du contraste d’une image. Une boîte de dialogue présente deux curseurs
(l’un pour la luminosité, l’autre pour le contraste), qui peuvent être ajustés de
manière indépendante. Un aperçu en direct est disponible, afin de pouvoir
observer les effets de vos réglages avant de les valider.
Accentuer. Affecte la définition des contours dans l’image en élevant ou
en abaissant le contraste des pixels sur une échelle de 0 à 10. Comme l’outil
luminosité et contraste, cet outil propose un aperçu en direct.
Toutes les opérations graphiques peuvent être annulées via la commande Édition >
Annuler, jusqu’à ce que le document conteneur soit fermé ou que vous quittiez
dreamweaver.

13:32:41 +0200 26/09/2012 10:24:09
Révisions
Questions
1. Quels sont les trois facteurs qui déterminent la qualité des images bitmap ?
2. Quels formats de fichiers sont spécifiquement conçus pour un usage sur le Web ?
3. Décrivez au moins deux méthodes pour insérer une image dans une page web avec
Dreamweaver.
4. Vrai ou faux : toutes les images doivent être optimisées en dehors de Dreamweaver.
5. Quel est l’intérêt d’utiliser un objet dynamique Photoshop, plutôt que de copier et
coller une image depuis Photoshop ?
Réponses
1. La qualité des images bitmap est déterminée par leur résolution, les dimensions en
pixels et leur profondeur de couleurs.
2. Les formats d’image compatibles pour le Web sont les formats GIF, JPEG et PNG.
3. L’une des méthodes pour insérer une image dans une page web avec Dreamweaver
consiste à utiliser le panneau Insertion. Une autre méthode consiste à faire glisser
le fichier graphique depuis le panneau Actifs sur votre page. Les images peuvent
aussi être copiées et collées depuis Photoshop et Fireworks. Elles peuvent enfin être
insérées depuis Bridge.
4. Faux. Toute image insérée dans une page Dreamweaver peut être optimisée à l’aide
de l’inspecteur des propriétés. L’optimisation peut inclure la mise à l’échelle, le
changement de format ou l’ajustement des paramètres de format.
5. Un objet dynamique peut être utilisé plusieurs fois à différents emplacements dans un
site. Chaque occurrence de l’objet dynamique peut se voir attribuer des paramètres
individuels tout en restant connectée à l’image d’origine. Si cette dernière fait l’objet
d’une mise à jour, toutes les images liées en bénéficient également. Lorsque vous
copiez tout ou partie d’un fichier Photoshop afin de le coller dans Dreamweaver,
vous obtenez une seule image qui ne peut se voir appliquer qu’un seul jeu de valeurs.

13:32:41 +0200 26/09/2012 10:24:10
dreamweaver permet de créer et d’éditer de nombreux types de liens, des liens
texte aux liens d’images, le tout avec une flexibilité et une facilité déconcertantes.
232

13:32:41 +0200 26/09/2012 10:23:55
Travailler avec
les éléments de
navigation 9
Dans cette leçon, vous allez appliquer plusieurs types de liens à des éléments
de page et notamment :
• créer un lien texte vers une page du même site ;
• créer un lien vers une page d’un autre site ;
• créer un lien de messagerie ;
• créer un lien utilisant une image ;
• créer un menu de navigation Spry.
Cette leçon vous prendra environ 2 heures. Avant de commencer, assurez-

233

13:32:41 +0200 26/09/2012 10:23:55
Notions de base sur les liens hypertexte
Le Web et Internet en général ne seraient certainement pas ce qu’ils sont si les liens
hypertexte n’existaient pas. Sans eux, le HTML serait baptisé ML pour markup lan-
guage (langage de balisage). La mention hypertext de cet acronyme fait référence à la
fonctionnalité des liens hypertexte. Mais alors, qu’est-ce qu’un lien hypertexte ?
Un lien hypertexte ou, plus simplement, un lien est une référence HTML à une res-
source disponible sur Internet ou à l’intérieur de votre ordinateur. Cette ressource
peut correspondre à n’importe quel fichier susceptible d’être stocké et affiché sur un
ordinateur, comme une page web, une image, une vidéo, un fichier son, etc. Le lien
hypertexte crée un comportement interactif spécifié par le HTML et les CSS ou par
le langage de programmation que vous utilisez et se trouve activé par un navigateur
ou une autre application.
Le lien hypertexte élément HTML URL (Uniform Resource Locator) Valeur (nouvelle fenêtre de navigateur) Balise fermante
HTML element Uniform Resource Locator (URL) Value (new browser window) Closing Tag
HTML est
constitué de
l’élément d’ancre <a href="http://www.sitename.com/pagename.html" target="_blank">Link text</a>
<a> et d’un ou
plusieurs attributs.
Attribute (hypertext reference) Attribute Link Text (visible to visitor)
Attribut (référence hypertexte) Attribut Texte du lien (visible

par le visiteur)
Liens hypertexte internes et externes

Le lien hypertexte le plus simple est celui qui conduit l’utilisateur vers une autre partie
du même document, ou vers un document stocké dans le même dossier ou sur votre
disque dur. Ce type de lien est dit interne. Le lien hypertexte externe est, pour sa part,
conçu de manière à conduire l’utilisateur vers un document ou une ressource situé en
dehors de votre disque dur, de votre site web ou de votre hôte Internet.
Les liens hypertexte internes et externes fonctionnent différemment, mais ils ont au
moins une chose en commun : tous deux sont activés en HTML par l’élément d’ancre
<a>. Cet élément désigne l’adresse de la destination (la cible) du lien hypertexte et
peut spécifier son mode de fonctionnement à l’aide de plusieurs attributs. Vous allez
apprendre à créer et à modifier l’élément <a> dans les exercices qui suivent.
Liens hypertexte relatifs et absolus

L’adresse du lien hypertexte peut être écrite de deux manières. Lorsque vous faites
référence à la cible d’après son emplacement relatif au document courant, il s’agit
d’un lien relatif. C’est un peu comme si vous indiquiez à quelqu’un que vous habitez
l’immeuble après la maison bleue. Si la personne à qui vous le dites se trouve en ce
moment dans votre rue et aperçoit la maison bleue, elle sait où vous habitez. En revanche,
cette indication ne dit pas comment parvenir à votre maison ni à votre quartier si cette
personne se trouve ailleurs. Les liens relatifs sont généralement constitués du nom
de la ressource et évidemment du dossier dans lequel ils se trouvent stockés, comme
logo.jpg ou images/logo.jpg.
234 leçon 9 Travailler avec les éléments de navigation

13:32:41 +0200 26/09/2012 10:23:57
Parfois, il est nécessaire d’indiquer précisément où se trouve une ressource. Dans ce
cas, il faut un lien hypertexte absolu. Cela équivaut à dire que vous habitez au 123
de la rue Main Street à Meridian, aux États-Unis. C’est ainsi que vous procéderez
quand vous ferez référence à des ressources situées en dehors de votre site web. Un
lien absolu inclut l’URL entière de la cible (et peut même inclure un nom de fichier),
comme http://forums.adobe.com/index.jspa, qui peut diriger l’utilisateur vers un
fichier spécifique ou juste un dossier dans le site.
Les deux types de liens ont leurs avantages et leurs inconvénients. Les liens relatifs
sont plus rapides et plus faciles à écrire, mais ils peuvent ne pas fonctionner si le docu-
ment qui les contient est enregistré dans un autre dossier ou un autre emplacement
du site web. Les liens absolus fonctionnent n’importe où, quel que soit l’emplacement
où le document qui les contient est enregistré, mais ils peuvent échouer si les cibles
sont déplacées ou renommées. L’une des règles simples adoptées par la plupart des
concepteurs web consiste à utiliser des liens relatifs vers les ressources dans un site
et des liens absolus vers les ressources en dehors du site. Ensuite, il est important que
vous testiez tous les liens avant de déployer la page ou le site.

Pour voir la version finale du fichier sur lequel vous travaillerez dans cette leçon,
commencez par observer la page terminée dans le navigateur.
2. Si nécessaire, appuyez sur F8/Cmd+Maj+F pour ouvrir le panneau Fichiers et
choisissez DW-CS6 dans la liste des sites.
4. Cliquez du bouton droit sur aboutus_finished.html dans le panneau Fichiers,
choisissez Aperçu dans le navigateur et sélectionnez votre navigateur préféré pour
observer le fichier.
Le fichier aboutus_finished.html apparaît dans votre navigateur par défaut. Cette

page ne contient que des liens internes dans les menus horizontal et vertical.

13:32:41 +0200 26/09/2012 10:23:58
� Astuce : 5. Placez le curseur sur le lien Contact Us dans le menu horizontal. Observez le
Firefox et internet navigateur afin de voir s’il affiche la destination du lien quelque part à l’écran.
explorer affichent
généralement la
destination du
lien hypertexte
dans une fine
bande du coin
inférieur gauche
de l’écran,
appelée barre En général, le navigateur affiche la destination du lien dans la barre d’état.
d’état.
6. Dans le menu de navigation horizontal, cliquez sur le lien Contact Us.
� Astuce : Si Le navigateur charge la page Contact Us, en remplaçant la page About Us. La
vous ne voyez nouvelle page inclut des liens internes, externes et des liens de messagerie.
pas la barre
d’état dans 7. Positionnez le curseur sur le lien Meridien dans la zone de contenu principale.
Firefox, choisissez Observez la barre d’état.
Affichage >
Barre d’état pour La barre d’état affiche le lien http://maps.google.com.
l’activer. dans
internet explorer, 8. Cliquez sur le lien Meridien.
choisissez
Affichage > Barres
Une nouvelle fenêtre de navigateur apparaît et charge Google Maps. Le lien est
d’outils > Barre destiné à montrer où sont situés les bureaux de GreenStart à Meridian. Vous pouvez
d’état. même inclure des détails d’adresse ou le nom de l’entreprise dans ce lien afin que
Google puisse charger la carte exacte et des indications d’itinéraire.
Notez que le navigateur a ouvert une fenêtre séparée ou un onglet de document

lorsque vous avez cliqué sur le lien. Il s’agit d’un mécanisme approprié à utiliser
lorsque vous dirigez des visiteurs vers des ressources en dehors de votre site. Comme
le lien s’ouvre dans une fenêtre séparée, votre propre site est toujours ouvert et prêt
à être utilisé. C’est particulièrement utile pour ceux de vos visiteurs qui ne sont
pas familiarisés avec votre site et qui risquent de ne pas savoir comment y revenir
une fois qu’ils l’ont quitté en cliquant sur un lien.
9. Fermez la fenêtre Google Maps.

13:32:41 +0200 26/09/2012 10:24:01
La page GreenStart Contact Us est toujours ouverte. Notez que chaque employé � Note : Un
possède un lien de messagerie. grand nombre
d’internautes
10. Cliquez sur le lien de messagerie de l’un des employés. n’utilisent pas
un programme
L’application de messagerie par défaut s’exécute sur votre ordinateur. Si vous ne de messagerie
l’avez pas configurée de manière à envoyer et à recevoir des e-mails, le programme installé sur leur
lance généralement un assistant pour vous aider à configurer cette fonctionnalité. ordinateur, mais
un service web
Si le programme de messagerie est configuré, une nouvelle fenêtre de message comme AOL,
apparaît avec l’adresse e-mail de l’employé déjà entrée dans le champ À. Gmail ou Hotmail.
Pour ces visiteurs,
11. Fermez la nouvelle fenêtre de message et quittez le programme de messagerie. les liens comme
celui que vous
12. Revenez au navigateur. Positionnez le curseur au-dessus du menu vertical. Survolez
venez de créer ne
chacun des boutons et examinez le comportement du menu. fonctionnent pas.
Pour apprendre
Le menu possède une apparence analogue à celui que vous avez créé à la Leçon 4,
à récupérer des
“Créer une mise en page”, et à la Leçon 5, “Travailler avec des feuilles de style CSS”, informations
mais il révèle un mécanisme qui n’existait pas auparavant. Certains des boutons de vos visiteurs
cachent des sous-menus. sans dépendre
des e-mails
13. Survolez le lien Green Events et cliquez sur le lien de sous-menu Class Schedule. clients, consultez
la Leçon 12,
Le navigateur charge la page Green Events et saute automatiquement vers le bas, “Travailler avec
au niveau du tableau contenant l’agenda de la classe. Comme vous pouvez le voir, des formulaires”.
les liens hypertexte peuvent cibler non seulement une page spécifique, mais même
un élément en particulier dans une page afin d’aider les visiteurs à avancer et à
remonter rapidement dans les pages longues.
14. Cliquez sur le lien Return to Top qui apparaît au-dessus de l’agenda de la classe.
Le navigateur revient en haut de la page.
15. Fermez le navigateur et repassez à Dreamweaver.
Créer des liens hypertexte internes

Dreamweaver permet facilement de créer toutes sortes de liens hypertexte. Dans
cet exercice, vous allez créer des liens texte vers des pages du même site à l’aide de
différentes méthodes. � Note : Si
vous utilisez la
1. Dans le panneau Fichiers, double-cliquez sur le fichier about_us.html depuis le méthode décrite
dans la section
dossier racine du site pour l’ouvrir. Si vous commencez cette leçon en partant de “Démarrage
zéro, utilisez la méthode décrite dans la sous-section “Démarrage instantané” de instantané” de la
la section “Guide de démarrage”, au début de ce livre. section “Guide
de démarrage”,
2. Dans le menu horizontal, positionnez le curseur au-dessus du texte Home dans le les fichiers
menu horizontal. préexistants
peuvent inclure
un numéro de
leçon, comme
mygreen_
temp_09.dwt.

13:32:41 +0200 26/09/2012 10:24:02
Le menu horizontal n’a pas été ajouté à une région modifiable à la Leçon 6, “Travailler
avec des modèles”, si bien qu’il fait partie du modèle et se trouve donc verrouillé.
Pour ajouter un lien hypertexte à cet élément de menu, vous allez devoir ouvrir
le modèle.
� Astuce : Lors 3. Choisissez Fenêtre > Actifs. Dans le panneau Actifs, cliquez sur l’icône Modèle
de la modification ( ). Cliquez du bouton droit sur mygreen_temp dans la liste et choisissez Édition
ou de la
suppression d’un
lien hypertexte 4. Dans le menu horizontal, sélectionnez le texte Home.
existant, vous
n’avez pas besoin Le menu horizontal est modifiable dans le modèle.
de sélectionner le
lien entier. Placez 5. Si nécessaire, choisissez Fenêtre > Propriétés pour ouvrir l’inspecteur Propriétés.
simplement Examinez le contenu du champ Lien dans l’inspecteur Propriétés.
le curseur à
l’intérieur du Pour créer des liens, l’onglet HTML doit être sélectionné dans l’inspecteur Propriétés.
texte du lien. Le champ Lien affiche un espace réservé de lien hypertexte #. La page d’accueil
Dreamweaver
n’existe pas encore. Mais les liens peuvent être créés par simple saisie manuelle du
considère par
défaut que vous nom du fichier ou de la ressource.
souhaitez modifier
6. Sélectionnez le signe dièse (#) dans le champ Lien. Tapez ../index.html et appuyez
le lien entier.
sur Entrée pour finaliser le lien.
� Note : Le
lien n’aura pas
l’apparence
classique des
liens hypertexte
car vous avez
appliqué un
formatage spécial
au menu lors des
exercices de la
Leçon 5.
Vous venez de créer votre premier lien hypertexte à base de texte. Comme le modèle
est enregistré dans un sous-dossier, vous devez ajouter l’élément de chemin “../”
au nom de fichier, afin que la résolution du lien s’opère correctement une fois que
les pages du modèle seront mises à jour. Le symbole “../” indique au navigateur ou
au système d’exploitation qu’il doit rechercher dans le répertoire parent du dossier
courant. Dreamweaver réécrit le lien lorsque le modèle est appliqué à une page, en
tenant compte de l’endroit où la page concernée est enregistrée.
Si le fichier existe déjà, Dreamweaver propose aussi des moyens interactifs de
créer des liens.
7. Dans le menu horizontal, sélectionnez le texte About Us.
8. Cliquez sur l’icône Rechercher le fichier ( ) à côté du champ Lien. Lorsque la boîte
de dialogue Sélectionner le fichier apparaît, sélectionnez le fichier about_us.html
dans le dossier racine du site. Assurez-vous que l’option Document est sélectionnée
dans le menu Relatif à. Cliquez sur OK/Choisir.

13:32:41 +0200 26/09/2012 10:24:03
L’espace réservé de lien hypertexte est remplacé par le texte “../about_us.html”.
Essayons maintenant une approche plus visuelle.
9. Dans le menu horizontal, sélectionnez le texte Contact Us. � Note :
Vous pouvez
10. Cliquez sur l’onglet Fichiers pour passer le panneau au premier plan ou choisissez sélectionner
Fenêtre > Fichiers. n’importe quelle
plage de texte
11. Dans l’inspecteur Propriétés, faites glisser l’icône Pointer vers un fichier ( ) à pour créer un
côté du champ Lien jusqu’à contact_us.html dans le dossier racine du site affiché lien, qu’il s’agisse
dans le panneau Fichiers. d’un simple
caractère ou d’un
paragraphe entier.
dreamweaver
ajoute le balisage
nécessaire à la
sélection.
Dreamweaver entre le nom du fichier et les informations de chemin nécessaires � Astuce : Si un

dans le champ Lien. Pour appliquer les liens à toutes les pages mises en forme par dossier dans le
panneau Fichiers
ce modèle, enregistrez la page.
contient une
12. Choisissez Fichier > Enregistrer. page que vous
souhaitez cibler
La boîte de dialogue Mettre à jour les fichiers du modèle apparaît. Vous avez le avec un lien, mais
choix entre mettre à jour les pages maintenant ou attendre plus tard. Si vous le que le dossier
n’est pas ouvert,
souhaitez, vous pouvez même mettre à jour les fichiers de modèle manuellement. faites glisser
13. Cliquez sur Mettre à jour. l’icône Pointer
vers un fichier
sur le dossier et
conservez-la sur
place jusqu’à ce
que le dossier
s’ouvre et que
vous puissiez
pointer le fichier
désiré.
AdoBe dReAMweAVeR CS6 ClASSRooM in A Book 239

13:32:41 +0200 26/09/2012 10:24:06
� Astuce : Si Dreamweaver met à jour toutes les pages créées à partir du modèle. La boîte de
vous ne voyez pas dialogue Mettre à jour les pages apparaît et affiche un rapport listant les pages
le rapport de mise
mises à jour.
à jour, cochez
l’option Afficher le 14. Fermez la boîte de dialogue Mettre à jour les pages. Fermez mygreen_temp.dwt.
journal.
Notez l’astérisque dans l’onglet du document about_us.html. Elle indique que la
page a été modifiée, mais n’a pas été enregistrée.
15. Enregistrez about_us.html et observez-la dans le navigateur par défaut. Positionnez
le curseur au-dessus du texte About Us et du texte Contact Us.
Lorsque le modèle est enregistré, il met à jour les régions verrouillées dans les
pages, en ajoutant les liens hypertexte.
16. Cliquez sur le lien Contact Us.
La page Contact Us se charge et remplace la page About Us dans le navigateur.
17. Cliquez sur le lien About Us.
La page About Us se charge et remplace la page Contact Us. Les liens ont même
été ajoutés aux pages qui n’étaient pas ouvertes pendant l’opération.
18. Fermez le navigateur et revenez à Dreamweaver.
Vous venez de découvrir trois méthodes pour créer des liens hypertexte avec l’inspec-
teur Propriétés : par saisie manuelle du lien, grâce à la fonction Rechercher le fichier
et avec l’outil Pointer vers un fichier.
Créer un lien image

Les liens peuvent aussi s’appliquer aux images. Les liens images fonctionnent exac-
tement comme les autres liens hypertexte et peuvent diriger les utilisateurs vers des
ressources internes ou externes. Dans cet exercice, vous allez créer et mettre en forme
un lien image qui dirige les utilisateurs vers la page About Us de l’organisation.
1. Ouvrez le panneau Actifs et cliquez sur l’icône Modèle ( ).
Double-cliquez sur mygreen_temp pour l’ouvrir.
2. Sélectionnez l’image du papillon en haut de la page. Dans l’inspecteur Propriétés,
cliquez sur l’icône Rechercher le fichier à côté du champ Lien.
3. Sélectionnez about_us.html dans le dossier racine du site. Cliquez sur OK/Choisir.
Le texte about_us.html apparaît dans le champ Lien.
4. Dans le champ Sec. de l’inspecteur Propriétés, remplacez le texte existant par Click
to learn about Meridien GreenStart et appuyez sur Entrée.

13:32:41 +0200 26/09/2012 10:24:07
Le texte secondaire apparaîtra à chaque fois que l’image ne se charge pas ou si
l’utilisateur se sert d’un périphérique de lecture pour accéder à la page web.
5. Enregistrez le modèle. Cliquez sur Mettre à jour. � Note :
Normalement,
La boîte de dialogue Mettre à jour les pages apparaît et signale combien de pages les images
ont été mises à jour. formatées avec
un lien hypertexte
6. Fermez la boîte de dialogue Mettre à jour les pages. Si nécessaire, ouvrez contact_ s’affichent avec
us.html et observez-la dans votre navigateur par défaut. Positionnez le curseur une bordure
au-dessus de l’image du papillon. Testez le lien d’image. bleue comparable
au soulignement
Lorsque vous cliquez sur l’image, le navigateur charge la page about_us.html. bleu qui orne les
liens texte. Mais
7. Revenez à Dreamweaver. Fermez le fichier de modèle. les CSS prédéfinies
associées à cette
mise en page
incluent une
Créer un lien externe règle a img qui
supprime cette
Les pages vers lesquelles vous avez pointé dans le précédent exercice étaient stockées bordure.
à l’intérieur du site courant. Vous pouvez également créer des liens vers n’importe
quelle page ou autre ressource stockée sur le Web si vous en connaissez l’adresse
complète, aussi appelée URL. Dans cet exercice, vous allez appliquer un lien externe
à une portion de texte existante :
1. Cliquez sur l’onglet de document contact_us.html pour le passer au premier plan
ou ouvrez-le depuis le dossier racine du site.
2. Dans le deuxième élément de paragraphe <p> de la région MainContent, sélectionnez
le mot Meridien.
Vous allez lier ce texte au site Google Maps. Si vous ne connaissez pas l’URL d’un
site particulier, il existe une astuce pour l’obtenir. � Note :
Dans certains
� Astuce : N’importe quel moteur de recherche fait l’affaire.
navigateurs, vous
3. Lancez votre navigateur favori. Dans le champ URL, tapez google.com et appuyez pouvez taper
directement
sur Entrée. Sinon, dans le champ de recherche, tapez Google Maps et appuyez
la phrase de
sur Entrée. Localisez le lien pour Google Maps dans les résultats de recherche et recherche dans la
cliquez dessus. barre d’adresse.

13:32:41 +0200 26/09/2012 10:24:09
Google Maps apparaît dans la fenêtre du navigateur.
4. Sélectionnez l’URL entière qui apparaît en haut de la fenêtre de document. Appuyez
sur Ctrl+C/Cmd+C pour copier ce lien.
5. Basculez vers Dreamweaver. Dans l’inspecteur Propriétés, insérez le curseur dans

le champ Lien et appuyez sur Ctrl+V/Cmd+V pour coller le lien, puis sur Entrée.
Le texte affiche la mise en forme standard d’un lien hypertexte.

6. Enregistrez le fichier et observez-le dans votre navigateur par défaut. Testez le lien.
Lorsque vous cliquez sur le lien, le navigateur vous conduit à la page d’ouverture
de Google Maps, si vous possédez une connexion Internet. Mais un problème
est survenu : le fait de cliquer sur le lien a remplacé la page Contact Us dans le
navigateur, au lieu d’ouvrir une nouvelle fenêtre comme dans l’exemple précédent.
Pour forcer le navigateur à ouvrir une nouvelle fenêtre, vous devez ajouter un
simple attribut HTML au lien.
7. Revenez à Dreamweaver. Si nécessaire, placez le curseur dans le texte du lien Meridien.
8. Choisissez _blank dans le menu du champ Cible.
9. Enregistrez le fichier et affichez la page dans le navigateur par défaut. Testez le lien.
Cette fois, une nouvelle fenêtre séparée s’ouvre pour Google Maps.

13:32:41 +0200 26/09/2012 10:24:13
10. Fermez les fenêtres du navigateur et revenez à Dreamweaver.
Comme vous pouvez le voir, Dreamweaver facilite la création de liens vers des res-
sources internes ou externes.
configurer des liens de messagerie

Le lien de messagerie est un autre type de lien qui, plutôt que conduire l’utilisateur
vers une autre page, ouvre son programme de messagerie électronique. Il peut créer
un message automatique avec l’adresse prédéfinie de vos visiteurs pour obtenir des
informations à propos de clients, passer des commandes de produits ou réaliser
d’autres opérations de communication importantes. Le code du lien de messagerie
est légèrement différent de celui du lien hypertexte basique. Dreamweaver peut écrire
ce code à votre place.
2. Sélectionnez l’adresse e-mail d’Elaine (elaine@green-start.org) et appuyez sur
Ctrl+C/Cmd+C pour copier le texte.
3. Choisissez Insertion > Lien de messagerie. � Astuce : Si
le texte était
La boîte de dialogue Lien de messagerie apparaît. Le texte sélectionné est sélectionné avant
automatiquement entré dans le champ Texte. l’accès à la boîte
de dialogue,
4. Placez le curseur dans le champ E-mail et appuyez sur Ctrl+V/Cmd+V pour coller dreamweaver
l’adresse e-mail. l’entre
automatiquement
dans le champ.
5. Cliquez sur OK. Examinez le champ Lien dans l’inspecteur Propriétés.
Dreamweaver a inséré l’adresse e-mail dans le champ Lien et réalisé une opération
supplémentaire. Comme vous pouvez le voir, le texte mailto: a également été
placé devant l’adresse. Ce texte change le lien en un lien de messagerie qui lance
automatiquement le programme de messagerie par défaut de l’utilisateur.
6. Enregistrez le fichier et observez-le dans le navigateur par défaut. Testez le lien
de messagerie.

13:32:41 +0200 26/09/2012 10:24:16
Le programme de messagerie par défaut s’ouvre et crée un nouveau message
électronique. S’il n’existe pas d’application de messagerie par défaut, le système
d’exploitation de l’ordinateur lance un programme de messagerie disponible ou
vous demande d’en identifier un.
7. Fermez le programme de messagerie et ses boîtes de dialogue ou assistants ouverts.
Revenez à Dreamweaver.
Fonctions clientes et
fonctions côté serveur
Le lien de messagerie que vous venez de créer s’appuie sur le logiciel installé sur
l’ordinateur du visiteur, comme Outlook ou Apple Mail. Ces applications sont des
applications clientes ou des fonctionnalités côté client. Le lien de messagerie ne
fonctionnera donc pas si l’utilisateur transmet son e-mail via une application Internet
(comme Hotmail ou Gmail) et qu’aucune application de messagerie de bureau n’est
installée et configurée sur son ordinateur pour envoyer et recevoir des e-mails.
L’autre problème est que les liens de messagerie ouverts de ce type peuvent aisément
être récupérés par les spambots qui arpentent Internet. Pour vous assurer que vous
recevrez les réponses de chacun des utilisateurs souhaitant vous contacter, vous
devez vous appuyer sur des fonctionnalités de votre serveur. Les applications web
permettant de capturer et de transmettre des données sont des fonctionnalités côté
serveur. Avec des scripts côté serveur ou des langages propriétaires (comme ASP,
ColdFusion et PHP), vous pouvez aisément capturer des données et les renvoyer par
e-mail ou même les insérer directement dans une base de données hébergée. Vous
en apprendrez plus sur ces techniques à la Leçon 12, “Travailler avec des formulaires”,
et à la Leçon 14, “Créer des pages dynamiques avec des données”.
Cibler des éléments de page

À mesure que vous leur ajoutez du contenu, vos pages deviennent plus longues et
plus difficiles à parcourir. En général, lorsque vous cliquez sur un lien vers une page,
la fenêtre du navigateur affiche le haut de cette page. Quand cela est possible, il est
judicieux de proposer des méthodes pratiques aux utilisateurs pour pointer sur un
emplacement spécifique dans vos pages.
En HTML 4.01, il existe deux méthodes pour cibler du contenu spécifique ou des
structures de page : l’une utilise une ancre nommée et l’autre, un attribut d’ID. L’ancre
nommée a cependant été dépréciée dans le HTML5 à la faveur des ID. Cela ne signi-
fie pas que les ancres nommées cesseront soudainement de fonctionner le jour de
l’adoption du HTML5, mais il est préférable de s’entraîner dès maintenant. Dans cet
exercice, vous ne travaillerez qu’avec des attributs d’ID.
1. Ouvrez events.html.
2. Faites défiler la page vers le bas jusqu’au tableau qui contient l’agenda de la classe.

13:32:41 +0200 26/09/2012 10:24:17
Lorsque l’utilisateur se déplace aussi loin à l’intérieur de la page, les menus de
navigation ne sont plus accessibles. Plus il poursuit sa lecture, plus il s’éloigne des
outils de navigation principaux. Avant de pouvoir naviguer jusqu’à une autre page,
il doit alors utiliser les barres de défilement du navigateur ou la molette de la souris
pour revenir en haut de la page. En ajoutant un lien qui conduit l’utilisateur en
haut de la page, vous pouvez considérablement améliorer le caractère pratique de
votre site. Ce type de lien est un lien interne ciblé.
Les liens internes ciblés sont composés de deux parties : le lien lui-même et l’élément
ciblé. Vous créerez indifféremment l’un ou l’autre en premier.
3. Placez le curseur dans le tableau Class. Sélectionnez le sélecteur de balises <table>.
Appuyez sur la touche fléchée de gauche et déplacez le curseur avant la balise
d’ouverture <table>.
4. Tapez Return to Top et sélectionnez le texte.
Dans l’inspecteur Propriétés, choisissez Paragraphe dans le menu Format. Le texte

est inséré entre les deux tableaux et formaté comme un élément <p>. Vous allez
maintenant le centrer.
5. Dans le panneau CSS, cliquez sur l’icône Nouvelle règle de CSS.
6. Dans le menu Type de sélecteur, choisissez Classe. Dans le champ Nom du sélecteur,
tapez ctr. Cliquez sur OK.
7. Dans le menu Text-align de la catégorie Bloc, choisissez center. Cliquez sur OK.
8. Cliquez sur le sélecteur de balises pour l’élément de paragraphe Return to Top.
Dans le menu Classe de l’inspecteur Propriétés, choisissez ctr.
Le texte Return to Top se centre. Le sélecteur de balises indique maintenant <p.ctr>.

13:32:41 +0200 26/09/2012 10:24:20
� Astuce : 9. Dans le champ Lien, tapez #top et appuyez sur Entrée. Enregistrez tous les fichiers.
Dans certains
navigateurs, il
suffit de taper
le signe dièse
(#) pour activer
cette fonction.
Le navigateur
saute en haut de
la page à chaque En utilisant #top, vous avez créé un lien vers une cible au sein de la page courante.
fois qu’il est fait Lorsque les utilisateurs cliquent sur le lien Return to Top, la fenêtre du navigateur
référence à une saute à la position de la cible. Cette cible n’existe pas encore. Pour que ce lien
ancre sans nom.
Malheureusement,
fonctionne correctement, vous devez insérer la destination aussi haut que possible
d’autres dans la page.
navigateurs
ignorent 10. Faites défiler la page events.html jusqu’en haut. Positionnez le curseur au-dessus
complètement de l’élément header.
ces liens. Il est
donc important L’icône de la souris indique que cette partie de la page (et son code lié) n’est pas modi-
d’utiliser fiable, parce que l’en-tête et le menu de navigation horizontal sont liés au modèle du
également un site. Il est important de placer la cible tout en haut, sinon une partie de la page peut
élément ciblé.
être masquée quand le navigateur saute à cet endroit. Comme le haut de la page fait
partie d’une région non modifiable, la meilleure solution consiste à ajouter la cible
directement au modèle.
Créer une destination de lien en utilisant un ID

Si vous ajoutez un ID unique au modèle, vous pouvez y accéder automatiquement par-
tout dans le site, à chaque fois que vous ajoutez un lien qui ramène en haut de la page.
1. Ouvrez le panneau Actifs. Cliquez sur l’icône Modèle ( ). Double-cliquez sur
mygreen_temp pour l’ouvrir.
2. Cliquez sur le sélecteur de balises pour <header>. Dans le champ ID de l’inspecteur
des propriétés, tapez top et appuyez sur Entrée pour terminer.
Le sélecteur de balises se change en <header#top>. Hormis cela, aucune différence

visible dans la page. Le grand changement tient à la manière dont la page réagit
au lien hypertexte interne.

13:32:41 +0200 26/09/2012 10:24:23
3. Enregistrez le fichier et mettez à jour toutes les pages du modèle. Fermez le modèle.
4. Revenez à events.html ou ouvrez-le si nécessaire. Enregistrez le fichier et observez-le
dans votre navigateur par défaut.
5. Faites défiler la page vers le bas jusqu’au tableau Class. Cliquez sur le lien Return
to Top.
Le navigateur saute directement en haut de la page.
Maintenant que l’ID a été inséré par le modèle dans chaque page du site, vous
pouvez copier le lien Return to Top et le coller partout où vous souhaitez ajouter
cette fonctionnalité.
6. Revenez à Dreamweaver. Placez le curseur dans le lien Return to Top. Sélectionnez
le sélecteur de balises <p.ctr>. Appuyez sur Ctrl+C/Cmd+C.
7. Faites défiler la page events.html vers le bas. Placez le curseur dans le tableau Class
et cliquez sur le sélecteur de balises <table>. Appuyez sur la touche fléchée de
droite pour déplacer le curseur après la balise </table> de fermeture. Appuyez
sur Ctrl+V/Cmd+V.
L’élément <p.ctr> et le lien apparaissent en bas de la page.

8. Enregistrez le fichier et observez-le dans votre navigateur. Testez les deux liens
Return to Top.
Les deux liens peuvent être utilisés pour revenir en haut du document. Dans le prochain
exercice, vous allez apprendre à utiliser des attributs d’élément comme cibles de liens.
Ajouter un ID à un tableau HTML

Les ancres nommées peuvent être utilisées partout où vous souhaitez créer un lien.
Vous n’avez cependant pas besoin d’ajouter de code supplémentaire s’il se trouve, à
proximité, un élément pratique susceptible de recevoir un attribut ID.
1. Si nécessaire, ouvrez events.html. Placez le curseur n’importe où dans le tableau
Events et cliquez sur le sélecteur de balises <table>.
� Note : Un ID
L’inspecteur Propriétés affiche les attributs du tableau Events. peut être appliqué
à n’importe quel
2. Ouvrez le menu ID de l’inspecteur Propriétés. élément HTML.
Il n’a pas besoin
Dreamweaver affiche tous les ID définis par les CSS mais qui ne sont pas actuellement
d’être mentionné
utilisés dans la page. Aucun ID n’est disponible pour l’appliquer au tableau, mais dans la feuille de
on peut aisément en créer un. style.

13:32:41 +0200 26/09/2012 10:24:23
� Note : Lorsque 3. Insérez le curseur dans le champ ID. Tapez calendar et appuyez sur Entrée.
vous créez des
ID, rappelez-vous
qu’il doit s’agir de
noms uniques. Les
ID sont sensibles
à la casse ; aussi,
veillez également
à la frappe.
Le sélecteur de balises affiche maintenant <table#calendar>. Comme les ID

sont des identificateurs uniques, ils peuvent être utilisés pour cibler un contenu
spécifique dans une page. N’oubliez pas de créer un autre ID pour le tableau Class.
4. Sélectionnez le tableau Class comme à l’étape 1. Placez le curseur dans le champ
ID. Tapez classes et appuyez sur Entrée.
Le sélecteur de balises affiche maintenant <table#classes>. Vous allez apprendre
à lier ces ID au prochain exercice.
Insérer des barres de menus Spry

Le menu vertical actuel cible des pages à l’intérieur du site. C’est un bon début, mais
on peut faire mieux. Dans l’exemple au début de cette leçon, le menu de la page ter-
minée vous a permis de naviguer directement jusqu’à un contenu spécifique dans le
site, grâce à l’un des liens affichés sous forme de sous-menus dans le menu vertical.
Votre menu ne possède pas encore cette fonctionnalité. Vous pouvez l’ajouter au code
existant par vous-même si vous maîtrisez bien le JavaScript et les CSS. Mais pourquoi
se donner tant de peine alors que Dreamweaver propose tout ce qu’il faut dans un
widget prédéfini ? Un widget est un composant créé avec du code HTML, des CSS et
du JavaScript qui active un ensemble de fonctions dans un navigateur. On parle alors
de technologie Ajax et le widget fait partie du framework Spry d’Adobe.
Pour créer le menu et le comportement que vous avez testés précédemment, vous allez
devoir remplacer le menu vertical par l’un des widgets Spry spéciaux de Dreamweaver.
Les barres de menus Spry sont un moyen facile et efficace d’insérer des fonctionnalités
avancées dans votre site sans avoir à opérer de programmation manuelle. Comme le
menu vertical est stocké dans une région non modifiable, vous devez ouvrir le modèle
de site pour le remplacer.
1. Dans la catégorie Modèles du panneau Actifs, double-cliquez sur mygreen_temp
pour ouvrir le fichier correspondant. Si vous utilisez la méthode “Starter”, le nom
du fichier du modèle inclut le numéro de la leçon, comme mygreen_temp_09.

13:32:41 +0200 26/09/2012 10:24:24
Découvrir Ajax et Spry
Les premiers jours d’Internet ont été dominés par des sites et des applications qui se
contentaient de recréer en ligne des produits et des services existants. Le Web 2.0
a ouvert une nouvelle ère en matière d’utilisabilité et d’interactivité. Son principe
fondamental était de réduire les barrières entre le client et le service ou le produit,
afin que le transit sur un site distant devienne indécelable.
La principale technologie motrice du Web 2.0 est Ajax (Asynchronous JavaScript and
XML, JavaScript asynchrone et XML). Si vous avez déjà parcouru une carte Google
Maps ou une collection de photos sur Flickr, vous aurez constaté ce qu’Ajax sait faire.
Le terme clé dans l’acronyme Ajax est “asynchrone”, qui signifie simplement “non
simultanément”. Habituellement, l’affichage des pages web est un processus très
linéaire : vous chargez une page et le navigateur l’affiche, puis tout reste inchangé
jusqu’à ce que vous rechargiez la page ou que vous en chargiez une nouvelle. En
d’autres termes, si vous ne rechargez pas la page entière, vous ne pouvez pas changer
la moindre information dans la page.
Ajax fait fi de ces vieilles contraintes. Avec du JavaScript et des données XML, les pages
Ajax mettent à jour des données à la volée sans recharger la page entière. L’utilisateur
y gagne considérablement en confort, avec un gain de réactivité et une interactivité
simplifiée. Les données peuvent changer à tout moment, soit quand elles sont mises
à jour sur le serveur, soit quand l’utilisateur le demande.
La plupart des implémentations Ajax nécessitent une connaissance avancée du
JavaScript et une quantité non négligeable de programmation manuelle. Afin d’accélérer
le processus d’apprentissage, Adobe a développé un framework Ajax, connu sous le
nom de Spry, qui s’intègre harmonieusement avec Dreamweaver CS6. Il existe quatre
jeux distincts d’outils Spry :
• Données Spry. Incorpore des données XML dans n’importe quelle page web et
permet de réaliser un affichage Ajax interactif des données. Vous travaillerez sur
un ensemble de données Spry à la Leçon 13, “Travailler avec des données en ligne”.
• Effets Spry. Étend la bibliothèque de comportements de Dreamweaver avec des
fonctionnalités avancées qui ajoutent une dimension interactive aux éléments
de la page. Les effets Spry permettent notamment de créer des fondus sur des
composants de page ciblés, de les faire apparaître, de les faire glisser, de les surligner
et de les faire trembler.
• Composants de formulaire Spry. Combine des éléments de formulaire, comme
des champs texte et des listes, avec des fonctions de validation JavaScript et des
messages d’erreur conviviaux. Vous travaillerez sur les widgets de formulaire Spry
à la Leçon 12, “Travailler avec des formulaires”.
• Composants de mise en page Spry. Fournit une série de contrôles de mise en
page sophistiqués, dont des panneaux à onglets et des accordéons. Vous travaillerez
avec des accordéons Spry à la Leçon 10, “Ajouter de l’interactivité”.
Si vous souhaitez soulever le capot pour voir ce qui se passe en dessous et en apprendre
plus sur le fonctionnement de Spry, consultez Adobe Labs à l’adresse http://labs.
adobe.com/technologies/spry/.

13:32:41 +0200 26/09/2012 10:24:24
2. Placez le curseur dans le menu vertical et cliquez sur le sélecteur de balises <nav>.
Appuyez sur Suppr.
3. Choisissez Insertion > Spry > Barre de menus Spry.
4. Dans la boîte de dialogue Barre de menus Spry, sélectionnez Vertical et cliquez
sur OK.
Un nouveau menu vertical apparaît dans l’encadré. Observez la barre bleue au-dessus
du menu qui affiche le nom Spry Menu Bar: MenuBar1. Celui-ci inclut quatre
éléments et un ensemble de mises en forme CSS par défaut. Vous allez ajuster la
largeur et l’apparence du menu au prochain exercice. Dreamweaver fournit des
fonctionnalités de formatage spéciales adaptées aux widgets Spry.
5. Cliquez sur la barre bleue au-dessus du menu Spry.
L’inspecteur Propriétés affiche une interface spéciale que vous utiliserez pour
ajouter, supprimer et modifier des liens dans le menu.
Supprimer l’élément Déplacer l’élément vers le haut
Ajouter Déplacer l’élément vers le bas
l’élément
Parcourir
(trouver
un fichier)
ID du menu Éléments Éléments de Éléments de Texte du lien

principaux du menu sous-menu sous-sous-menu
6. Avant de personnaliser la barre des menus, choisissez Fichier > Enregistrer. Si

Dreamweaver vous propose de copier des fichiers dépendants, cliquez sur OK.

13:32:41 +0200 26/09/2012 10:24:25
Dreamweaver insère un dossier nommé SpryAssets dans le dossier racine de
votre site, qui contient tous les composants nécessaires pour les widgets Spry. Les
fichiers CSS et JavaScript personnalisés requis pour la barre de menus seront aussi
ajoutés à ce dossier. Lorsque des fichiers sont ajoutés au dossier, Dreamweaver y
relie automatiquement le modèle.
La barre de menus Spry peut être modifiée directement depuis l’inspecteur Propriétés.
7. Dans la première colonne de l’inspecteur Propriétés, cliquez sur Élément 1 pour le
sélectionner. Dans le champ Texte, sélectionnez le texte Élément 1. Tapez Green
News pour le remplacer et appuyez sur Entrée pour valider la modification.
Le texte Green News apparaît dans le premier élément de menu à l’écran et dans
l’inspecteur Propriétés. L’inspecteur Propriétés fournit également le moyen d’ajouter
le lien hypertexte à l’élément.
8. Dans l’inspecteur Propriétés, cliquez sur l’icône Parcourir ( ).
9. Sélectionnez news.html dans le dossier racine du site. Cliquez sur OK/Choisir.
Le texte news.html est entré dans le champ. Dreamweaver n’a pas inséré le texte
“../" dans le lien. En effet, le fichier dans lequel vous travailliez à l’instant est
stocké dans le dossier racine du site. N’oubliez pas d’ajouter cette notation à tous
les liens que vous créez manuellement.

13:32:41 +0200 26/09/2012 10:24:25
Notez que le bouton Green News inclut trois sous-éléments dans l’inspecteur
Propriétés. Voyez-vous l’icône de triangle en bas du menu ? Cette image indique à
l’utilisateur que le bouton contient un sous-menu. Dreamweaver permet aisément
d’ajouter ou de supprimer des sous-éléments.
10. Cliquez sur Élément 1.1 pour le sélectionner, puis sur l’icône Supprimer l’élément
de menu ( ) au-dessus de la colonne pour supprimer le sous-élément.
L’Élément 1.1 est supprimé de la liste.

11. Supprimez l’Élément 1.2 et l’Élément 1.3.
Lorsque le dernier sous-élément est supprimé, Dreamweaver supprime
automatiquement l’icône de sous-menu du bouton Green News.
12. Sélectionnez l’Élément 2 et changez le champ Texte en tapant Green Products.
Il n’existe pas encore de page Products vers laquelle pointer, mais cela ne vous
empêche pas d’entrer manuellement le nom de fichier dans le champ Lien.
13. Sélectionnez le signe dièse (#) et tapez products.html dans le champ Lien. Appuyez
sur Entrée pour valider la modification.
14. Sélectionnez l’Élément 3. Changez le champ Texte en tapant Green Events et liez
l’élément à events.html dans le dossier racine du site.
� Attention : À chaque fois que vous saisissez un nom de lien et des informations de chemin,
prêtez attention à l’orthographe exacte et aux autres informations de détail. Lorsque le fichier cible
est créé ultérieurement, assurez-vous que son nom correspond à celui du lien. Les erreurs de saisie
ou de casse peuvent rendre des liens inopérants.

13:32:41 +0200 26/09/2012 10:24:26
Vous remarquerez que le bouton Green Events inclut trois sous-éléments et deux
sous-sous-éléments. Vous allez utiliser le sous-menu pour pointer vers les tableaux
Events et Class.
15. Sélectionnez l’Élément 3.1 et modifiez le champ Texte en tapant Events Calendar.
Dans le champ Lien, naviguez jusqu’au fichier events.html et sélectionnez-le dans
le dossier racine du site.
Pour le moment, le lien se contente d’ouvrir et d’afficher la page en commençant
tout en haut, comme d’habitude. Pour cibler le tableau Events, vous devez ajouter
l’ID que vous avez créé précédemment au code du lien.
16. Dans le champ Lien, placez le curseur à la fin du nom de fichier events.html. Tapez
#calendar et appuyez sur Entrée.
Le texte indique events.html#calendar dans le champ Lien. L’élément Events

Calendar possède à présent deux sous-éléments.
17. Sélectionnez et supprimez l’Élément 3.1.1 et l’Élément 3.1.2 dans l’inspecteur
Propriétés.
18. Changez l’Élément 3.2 en tapant Class Schedule et entrez events.html#classes
dans le champ Lien.
Avant de tester le fonctionnement du lien, autant peaufiner le menu.
19. Supprimez l’Élément 3.3.
20. Changez l’Élément 4 en tapant Green Travel et entrez travel.html dans le champ
Lien.
Vous avez recréé quatre des cinq éléments du menu d’origine, mais il en manque
encore un. L’inspecteur Propriétés facilite l’ajout de nouveaux éléments de menu.

13:32:41 +0200 26/09/2012 10:24:26
21. Cliquez sur l’icône Ajouter un élément ( ) au-dessus de la première colonne pour
ajouter un nouvel élément.
Un nouvel élément apparaît en bas de la liste.

22. Remplacez le texte Élément sans titre par Item with Green Tips et liez l’élément
à tips.html dans le dossier racine du site.
23. Enregistrez le fichier. Mettez à jour tous les fichiers enfants.
24. Enregistrez tous les fichiers. Ouvrez et observez events.html dans le navigateur.
Vérifiez le comportement du menu et testez les liens de sous-élément vers Events
Calendar et Class Schedule.
� Note : Vous Le comportement du menu est analogue à celui que vous avez testé au début de cette
remarquerez que leçon. Si vous survolez l’élément Green Events, un sous-menu surgit, qui affiche des
le sous-élément
n’est pas assez
liens vers le calendrier des événements et l’agenda de la classe. Lorsque vous cliquez
large pour afficher sur le lien, le navigateur saute directement à l’emplacement de chaque tableau.
le texte du lien sur
une seule ligne.
25. Revenez à Dreamweaver.
Vous ajusterez sa Le menu Spry terminé apparaît dans l’encadré. Au prochain exercice, vous allez
largeur lors d’un
prochain exercice. apprendre à modifier manuellement ce menu.
Modifier directement des menus Spry

Si magiques qu’ils en aient l’air, les composants Spry sont créés avec du HTML et des
CSS standard ainsi qu’une pincée de JavaScript. Si nécessaire, la plupart des widgets
peuvent être modifiés directement en mode Code ou Création. N’hésitez pas à plonger
dans le code et à créer ou à modifier le menu manuellement.
1. Repassez au modèle de site ou ouvrez-le si nécessaire. Placez le curseur dans le
menu Spry. Cliquez sur le sélecteur de balises <ul#MenuBar1.MenuBarVertical>
pour afficher l’interface du menu Spry dans l’inspecteur des propriétés.

13:32:41 +0200 26/09/2012 10:24:27
2. Dans l’inspecteur Propriétés, cliquez sur le bouton Désactiver les styles.
En mode Création, vous remarquerez que la liste est affichée sans mise en forme
CSS. Observez sa disposition, qui témoigne du partage entre le niveau principal
et celui des sous-éléments du menu. Pour certains, il est plus facile de travailler
dans la fenêtre de document plutôt que dans l’inspecteur Propriétés. Le menu peut
maintenant être modifié comme vous le feriez de n’importe quelle liste HTML. Il
est très facile d’y ajouter un nouveau lien.
3. Placez le curseur à la fin du texte à puces Green Tips et appuyez sur Entrée pour
insérer une nouvelle ligne.
La nouvelle ligne est formatée comme un élément de liste. Ajoutons un lien vers
une nouvelle page dans le site.
4. Tapez Green Club et sélectionnez le texte.
Le texte fait partie de la liste, mais il ne s’agit pas encore d’un lien hypertexte.
5. Dans le champ Lien de l’inspecteur Propriétés, tapez # et appuyez sur Entrée pour
créer un lien factice.
Vous pouvez même ajouter des sous-éléments en utilisant cette méthode. Le club
étant réservé aux membres, ajoutons une page de connexion comme sous-élément.
6. Placez le curseur à la fin du texte Green Club. Appuyez sur Entrée pour insérer
une nouvelle ligne. Tapez Member Login et sélectionnez le texte. Dans le champ
Lien de l’inspecteur Propriétés, tapez #.
Notez qu’il est formaté de la même manière que les éléments du niveau principal.

13:32:41 +0200 26/09/2012 10:24:28
7. Dans l’inspecteur Propriétés, cliquez sur le bouton Blockquote pour appliquer un
retrait au texte.
Même si cette vue ne le fait pas voir facilement, l’élément Member Login a été
mis en retrait. La différence entre les éléments de liste est très subtile et se limite
à une variation de la puce. Si vous examinez les sélecteurs de balises et les puces
attentivement, vous verrez que Member Login est formaté de la même manière que
les sous-éléments Events Calendar et Class Schedule.
� Astuce : Si 8. Cliquez sur le sélecteur de balises <ul#MenuBar1.MenuBarVertical> pour afficher
vous ne voyez l’interface du menu Spry dans l’inspecteur des propriétés. Cliquez sur le bouton
pas le bouton
Activer les styles pour revenir à l’apparence mise en forme.
Activer les styles,
insérez le curseur
n’importe où
dans le menu
Spry et cliquez
sur la barre bleue
au-dessus pour le
sélectionner de
nouveau.
Lorsque vous réactiverez la mise en forme, vous remarquerez que l’élément Green
Club n’affiche pas d’icône de sous-menu comme le fait Green Events.
9. Placez le curseur dans l’élément Green Club. Examinez le sélecteur de balises.

Le sélecteur de balises affiche le code <a> correspondant à un élément de lien
hypertexte normal.

13:32:41 +0200 26/09/2012 10:24:28
10. Placez le curseur dans l’élément Green Events. Examinez le sélecteur de balises.
Le sélecteur de balises affiche <a.MenuBarItemSubmenu>. Comme vous n’avez pas
utilisé l’interface Spry pour ajouter le sous-élément, Dreamweaver n’a pas appliqué
la classe needed à l’élément parent Green Club. Cette classe applique pour le
sous-menu une mise en forme CSS qui inclut l’icône du sous-menu. Vous pouvez
appliquer la classe avec l’inspecteur Propriétés.
11. Placez le curseur dans l’élément Green Club. Cliquez sur le sélecteur de balises <a>.
Choisissez MenuBarItemSubmenu dans le menu Classe.
Le bouton est maintenant correctement formaté et affiche l’icône de sous-menu.

Comme vous pouvez le voir, l’interface Spry offre plusieurs avantages sur l’écriture
manuelle du code.
À chaque fois que Dreamweaver enregistre un document qui contient des composants
Spry, il insère automatiquement les fichiers CSS et JavaScript dépendants dans le dossier
SpryAssets. Si vous supprimez un composant et que les fichiers dépendants ne sont
plus nécessaires, Dreamweaver efface toutes les références de liens qui pointent vers
ces fichiers dans le code du document. L’interface Spry et la gestion automatique des
fichiers illustrent bien l’intérêt qu’il y a à utiliser Dreamweaver pour travailler avec
du code HTML.
Personnaliser l’apparence de la barre de menus Spry

Vous avez pu constater que la barre de menus Spry offre un moyen de créer un menu
sophistiqué et professionnel rapidement et facilement. La mise en forme d’un composant
Spry ne diffère pas de la mise en forme du menu HTML original qu’il vient remplacer.
Vous devez modifier à la fois la largeur et le style de ce menu pour le rendre conforme
à la mise en page et au thème de couleurs du site. Il est important de se rappeler que
les éléments Spry sont normalement mis en forme par leurs propres fichiers CSS.

13:32:41 +0200 26/09/2012 10:24:29
1. Si nécessaire, ouvrez le modèle du site. Ouvrez le panneau Styles CSS et faites-le
défiler jusqu’au bas de la liste des feuilles de style.
Une nouvelle feuille de style (SpryMenuBarVertical.css) a été ajoutée par Dreamweaver.

2. Déroulez la feuille de style SpryMenuBarVertical.css.
Cette feuille de style inclut les instructions de mise en forme pour le menu vertical
Spry. Vous devriez être maintenant suffisamment sûr de vos compétences CSS
pour modifier la feuille de style sans aide. N’hésitez pas à faire des essais, ou bien
contentez-vous de suivre ces indications.
3. Placez le curseur dans l’élément Green News du menu Spry. Appuyez sur Ctrl+Alt+N/
Cmd+Opt+N pour ouvrir le Navigateur dans le code ou cliquez sur l’icône Navigateur
dans le code ( ) lorsqu’elle apparaît.
La fenêtre Navigateur dans le code apparaît et liste les feuilles de style et les règles
qui formatent cet élément.
4. Examinez la liste de règles CSS qui formatent cet élément. Prêtez particulièrement
attention aux règles dans SpryMenuBarVertical.css.
5. Avec le curseur, survolez chaque règle dans cette feuille de style, jusqu’à ce que
vous identifiiez les propriétés que vous devrez modifier.
Vous recherchez des règles qui appliquent spécifiquement les caractères de largeur,
de couleur et de comportement des liens hypertexte. La règle ul.MenuBarVertical
définit la largeur du menu.

13:32:41 +0200 26/09/2012 10:24:29
6. Dans le panneau Styles CSS, cliquez sur la règle ul.MenuBarVertical et examinez � Note : À
ses propriétés. chaque fois que
vous définissez
Cette règle fixe la largeur de l’élément <ul> à 8 ems. Comme le site courant utilise la largeur d’un
une mise en page à largeur fixe, ces réglages doivent être modifiés pour concorder. conteneur en
utilisant des
Le nouveau menu vertical fait partie de l’élément de barre latérale, dont la largeur mesures absolues,
était fixée à l’origine à 180 pixels. comme des pixels
ou des points,
vous devez
em ou ex ? Tout est relatif prévoir que le
conteneur et votre
Un em (en français, cadratin) est une mesure relative utilisée dans la conception mise en page
graphique pour désigner la largeur d’un M majuscule dans la police par défaut du seront altérés
site. Un ex est une mesure qui se réfère à la taille du x minuscule. les concepteurs si vos visiteurs
utilisent ces deux mesures quand ils souhaitent mettre en forme un conteneur de redéfinissent
vos réglages en
texte de manière à préserver certains sauts de ligne. Une largeur de conteneur
agrandissant
spécifiée en em se met à l’échelle avec le texte à mesure que celui-ci s’agrandit. le texte.
Un conteneur à largeur fixe, à l’inverse, ne se met pas à l’échelle quand le texte Heureusement,
s’agrandit ; c’est alors ce dernier qui doit générer des retours à la ligne pour tenir la plupart des
dans l’espace du conteneur. navigateurs
web permettent
maintenant
d’agrandir la page
web au lieu de
n’agrandir que le
texte.
Conteneurs à largeur fixe : le texte revient à la ligne.
Conteneurs à largeur définie en em : aucun retour à la ligne.
Ce mécanisme s’explique par le fait que la mesure en em se réfère à la taille de la

police et non à une mesure arbitrairement fixée en pixels ou dans un autre système.
Si l’utilisateur choisit de redéfinir la taille de police du navigateur, toute la structure
web qui utilise des valeurs en em ou en ex peut ainsi se mettre à l’échelle pour
s’adapter à la nouvelle taille de police. les sauts de ligne sont ainsi préservés et les
menus texte ne se désarticulent pas avec le texte qui revient à la ligne, comme ils
le feraient avec des mesures en pixels ou fixes.
largeur définie en em : tout se

met à l’échelle.
largeur définie en pixels : le texte revient à la ligne.

13:32:41 +0200 26/09/2012 10:24:30
7. Changez la valeur de width en la passant à 180 px.
Notez que la largeur du menu ne change pas. La règle ul.MenuBarVertical

définit la taille maximale du menu, mais, comme <ul> n’est pas un élément de
niveau bloc, la largeur du menu est, en fait, contrôlée par une autre règle. Une
seule autre règle spécifie un réglage width pour les éléments de premier niveau :
ul.MenuBarVertical li.
8. Dans le panneau Styles CSS, sélectionnez ul.MenuBarVertical li et changez la

valeur de width en la passant à 180 px dans la section Propriétés.
Le menu Spry menu prend en compte la largeur complète de <div.sidebar1>, qui

correspond à la taille du précédent menu vertical que vous avez remplacé. Dans
le cas présent, tout semble bien fonctionner, mais cela ne signifie pas que ce sera
toujours le cas. Il peut être dangereux de remplacer des structures existantes dans
un modèle web. Le nouvel élément peut entrer en conflit avec la mise en page
existante et éventuellement la défaire, comme ce fut le cas à la Leçon 4, “Créer
une mise en page”. Gardez l’œil sur les tailles des autres éléments dans votre mise
en page. Rappelez-vous qu’il y a un élément conteneur général qui possède une
taille fixe – dans le cas présent, 950 pixels. Un réglage de bordure, de marge ou de
remplissage pourrait interagir de manière inattendue et perturber la mise en page
soigneusement étudiée.

13:32:41 +0200 26/09/2012 10:24:31
Par exemple, avez-vous remarqué qu’il y a deux règles ul.MenuBarVertical dans la
feuille de style ? L’une d’entre elles ajoute une bordure d’un pixel au menu, inutile
dans cette mise en page. Supprimons-la.
9. Sélectionnez la seconde règle ul.MenuBarVertical, qui contient les spécifications
suivantes : 1px solid #CCC. Dans le panneau Styles CSS, cliquez sur l’icône
Supprimer pour supprimer la règle superflue.
La seconde règle ul.MenuBarVertical n’a qu’une seule propriété (la spécification de
bordure) et peut être supprimée sans affecter le reste de la mise en page. Continuons
à formater le menu Spry pour le conformer au thème du site.
10. Double-cliquez sur la règle ul.MenuBarVertical a pour la modifier.
11. Dans la catégorie Type, tapez #FFC pour le champ Color et 90 % pour le champ
Font-size. Dans la catégorie Arrière-plan, changez la valeur du champ Background-
color en tapant #090. Dans la catégorie Boîte, changez tous les champs Padding
en tapant 0.5 em.
12. Dans la catégorie Bordure, accédez aux champs de la ligne Top et tapez solid,
1 px, #0C0.
Dans les champs de la ligne Right, tapez solid, 1 px, #060.
Dans les champs de la ligne Bottom, tapez solid, 1 px, #060.
Dans les champs de la ligne Left, tapez solid, 1 px, #0C0. Cliquez sur OK.
Soyez attentif à tout problème qui résulterait de l’ajout d’une bordure d’un pixel aux
éléments de menu. Cela pourrait déséquilibrer la mise en page. Si c’est le cas, vous
devez ajuster la largeur de l’un des éléments structurels pour compenser cet ajout.
13. Enregistrez le modèle et mettez à jour toutes les pages enfants. Choisissez Fichier
> Enregistrer tout pour enregistrer tous les fichiers ouverts. Cliquez sur le bouton
Affichage en direct. Positionnez le curseur au-dessus de chacun des éléments du
menu Spry et observez le comportement.

13:32:41 +0200 26/09/2012 10:24:31
Le menu est presque terminé. L’état initial offre une bonne apparence, mais l’état
a:hover des liens hypertexte ne se conforme pas aux thèmes de couleurs du site.
Pour enquêter sur ce cas, affichez la fenêtre Navigation dans le code directement
en mode Affichage en direct.
14. Pendant que vous survolez l’élément de menu, cliquez du bouton droit sur le menu
Spry. Choisissez l’option Navigateur dans le code du menu contextuel. Identifiez
toutes les règles qui affectent l’état a:hover des liens hypertexte du menu.
Il y a deux règles qui appliquent à la fois des couleurs de texte et d’arrière-plan à
l’état a:hover.
15. Cliquez sur le bouton Affichage en direct pour le désactiver.

16. Dans le panneau Styles CSS, cliquez sur la règle ul.MenuBarVertical a:hover,
ul.MenuBarVertical a:focus. Dans la section Propriétés, changez la valeur de
Color en tapant #FFC et la valeur de Background-color en tapant #060.
17. Dans le panneau Styles CSS, cliquez sur la règle ul.MenuBarVertical

a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover,
ul.MenuBarVertical a.MenuBarSubmenuVisible. Dans la section Propriétés,
changez la valeur de Color en tapant #FFC et la valeur de Background-color en
tapant #060. Cliquez sur OK.

13:32:41 +0200 26/09/2012 10:24:31
18. Enregistrez tous les fichiers. Testez le comportement du menu en mode Affichage
en direct ou dans le navigateur par défaut.
La couleur et le comportement correspondent maintenant au menu que vous avez

testé au début de la leçon. Les sous-éléments seraient cependant mieux sur une seule
ligne. Comment corriger ce problème ? Il y a deux solutions évidentes : raccourcir le
texte ou élargir le bouton.
Modifier des CSS à l’aide du Navigateur dans le code

Le Navigateur dans le code n’est pas simplement un outil pour examiner le code CSS,
il peut aussi vous aider à le modifier.
1. Insérez le curseur dans le menu Spry. Cliquez sur la barre bleue au-dessus du � Astuce : Les
menu vertical pour accéder à l’interface du menu Spry dans l’inspecteur Propriétés. sous-éléments
resteront affichés
Sélectionnez l’élément Green Events dans la première colonne de l’interface.
aussi longtemps
Sélectionnez l’élément Events Calendar dans la deuxième colonne. que les sous-
éléments Class
Les sous-éléments du bouton Green Events apparaissent dans l’interface Spry et et Events seront
dans la vue Création de la fenêtre de document. sélectionnés
dans l’inspecteur
Propriétés.
Pour masquer
le menu d’un
sous-élément,
sélectionnez un
élément parent.

13:32:41 +0200 26/09/2012 10:24:32
2. En mode Création, placez le curseur dans le sous-élément Events Calendar. Appuyez
sur Ctrl+Alt+N/Cmd+Opt+N pour activer le Navigateur dans le code. Examinez
les règles pour trouver celle qui formate la largeur des sous-éléments.
Comme avec les éléments de niveau 1, deux règles appliquent la largeur aux sous-
éléments : ul.MenuBarVertical ul et ul.MenuBarVertical ul li.
3. Dans la fenêtre du Navigateur dans le code, cliquez sur la règle ul.MenuBarVertical ul.
Dreamweaver bascule automatiquement en mode Fractionner, charge
SpryMenuBarVertical.css dans la moitié code et positionne la vue au niveau de la
ligne du fichier qui concerne ul.MenuBarVertical ul.
4. Changez la valeur de Width en tapant 180 px.

5. Utilisez le Navigateur dans le code comme dans les étapes 2 et 3 pour accéder à la
règle ul.MenuBarVertical ul li. Changez la valeur de Width en tapant 180 px.
6. Enregistrez le fichier. Mettez à jour toutes les pages enfants.
Il se peut que vous deviez actualiser la fenêtre en mode Création pour voir le
résultat des modifications.
7. Cliquez sur l’icône Actualiser la vue Création ( ) ou appuyez sur F5.
Les sous-éléments sont maintenant plus larges et permettent au texte du lien de

tenir sur une ligne, comme voulu. Il se peut cependant que vous ayez remarqué
une bordure grise d’un pixel sur le sous-menu. La bordure grise ne va pas avec le
thème du site. Une bordure verte plus sombre serait plus appropriée. Comme avec
le menu de base, une règle dupliquée applique la bordure grise.

13:32:41 +0200 26/09/2012 10:24:33
8. Changez la couleur de bordure dans la deuxième règle ul.MenuBarVertical ul
en choisissant #060.
9. Enregistrez le fichier. Mettez à jour toutes les pages enfants et actualisez l’affichage
de la vue Création.
Le menu Spry est terminé et correctement mis en forme.

10. Fermez le modèle.
Si vous n’avez pas besoin de corriger les composants du modèle lui-même, vous devriez
pouvoir opérer la plupart de vos modifications futures aux CSS directement depuis
n’importe quelle page du site. Comme les fichiers CSS sont extérieurs au modèle, les
changements peuvent être opérés sans que celui-ci soit ouvert, même pour les éléments
qui se trouvent dans des régions non modifiables de chaque page.
Vérifier la page
Dreamweaver vérifie automatiquement la compatibilité avec les navigateurs, l’acces-
sibilité et les liens rompus de la page. Dans cet exercice, vous vérifierez vos liens et
découvrirez ce que vous pouvez faire en cas de problème de compatibilité avec un
navigateur.

13:32:41 +0200 26/09/2012 10:24:33
� Astuce : Vous 2. Choisissez Fichier > Vérifier la page > Liens.
pouvez aussi
vérifier les liens
du site entier en
choisissant Site >
Vérifier tous les
liens du site ou
en cliquant sur
l’icône Vérifier les
liens ( ) et en
choisissant Vérifier Le panneau Vérificateur de lien apparaît. Il signale l’existence d’un lien brisé vers
les liens du site index.html et les liens que vous avez créés vers des pages inexistantes. Comme
local entier.
vous créerez ces pages par la suite, ne vous préoccupez pas de régler ce problème
maintenant. Le vérificateur de lien trouve aussi les liens rompus vers les sites
externes, s’il en existe.
3. Cliquez du bouton droit sur l’onglet Vérificateur de lien et choisissez Fermer le
groupe de panneaux.
4. Choisissez Fichier > Vérifier la page > Compatibilité avec les navigateurs.
Le rapport Compatibilité avec les navigateurs s’affiche et liste tous les problèmes de
compatibilité identifiés, ainsi que le fichier qui contient l’erreur et une description de
l’erreur. Aucun problème n’a été détecté mais, si c’était le cas, vous pourriez cliquer
dans le coin inférieur droit du panneau sur le lien Adobe.com pour recevoir plus
d’informations sur le problème directement de la part d’Adobe.
5. Double-cliquez sur l’onglet Compatibilité avec les navigateurs pour le refermer.
Dans cette leçon, vous avez apporté d’importantes modifications à l’apparence des pages,
en ajoutant une barre de menus Spry et en créant des liens vers des zones spécifiques
de la page et vers un site externe, ainsi qu’un lien de messagerie. Vous avez également
créé un lien qui utilise une image à cliquer et recréé le menu de navigation principal
avec une barre de menus Spry. Enfin, vous avez vérifié, dans votre page, la présence
des liens brisés et les problèmes de compatibilité avec les navigateurs.

13:32:41 +0200 26/09/2012 10:24:34
Révisions
Questions
1. Décrivez deux moyens d’insérer un lien dans une page.
2. Quelles informations sont requises pour créer un lien vers une page web externe ?
3. Quelle est la différence entre les liens de page standard et les liens de messagerie ?
4. Quel est l’intérêt d’utiliser des barres de menus Spry ?
5. Comment vérifier si vos liens fonctionnent correctement ?
Réponses
1. L’une des techniques possibles consiste à sélectionner un texte ou une image, à
cliquer sur l’icône Rechercher le fichier du panneau Propriétés à côté du champ
Lien, puis à naviguer jusqu’à la page désirée. Vous pouvez aussi faire glisser l’icône
Pointer vers un fichier sur un fichier dans le panneau Fichiers.
2. Vous devez saisir ou copier l’adresse web complète (URL entièrement formée) dans
le champ Lien du panneau Propriétés.
3. Le lien de page standard ouvre une nouvelle page ou déplace la vue vers une autre
zone de la page. Le lien de messagerie ouvre une fenêtre de message vide si l’utilisateur
dispose d’une application de messagerie installée.
4. Tout le travail de configuration des règles de styles, qui transforme une liste en
menu horizontal ou vertical, est préalablement réalisé, tout comme le travail de
programmation du code JavaScript pour le fonctionnement des sous-menus.
5. Exécutez le Vérificateur de lien pour tester les liens de chaque page ou dans le site.

13:32:41 +0200 26/09/2012 10:24:34
dreamweaver peut créer des effets interactifs sophistiqués avec des
comportements, des ensembles de données et des accordéons à l’aide du
framework Spry d’Adobe.
268

13:32:41 +0200 26/09/2012 10:26:50
Ajouter de
l’interactivité 10
Dans cette leçon, vous allez ajouter des fonctionnalités Web 2.0 à vos pages
et apprendrez à :
• utiliser des comportements de Dreamweaver pour créer un effet de survol ;
• insérer un widget Accordéon Spry.

269

13:32:41 +0200 26/09/2012 10:26:51
Découvrir les comportements Dreamweaver
L’expression Web 2.0 a été forgée pour décrire un changement majeur de l’expérience
utilisateur sur Internet, où l’on est passé des pages pratiquement statiques constituées
de texte, d’images et de simples liens à de véritables pages web dynamiques remplies de
vidéos, d’animations et de contenu interactif. Dreamweaver a toujours été un pionnier
dans ce secteur en proposant une variété d’outils pour accompagner ce mouvement,
de sa collection de comportements JavaScript et de widgets Spry robustes jusqu’à la
récente prise en charge de jQuery Mobile et même de PhoneGap. Dans cette leçon,
nous allons explorer deux de ces fonctionnalités : les comportements Dreamweaver
et les accordéons Spry.
Dans Dreamweaver, un comportement est un extrait de code JavaScript prédéfini qui
réalise une action, par exemple en ouvrant une fenêtre de navigateur ou en masquant
un élément de page, et qui est déclenché par un événement particulier, comme un clic
de souris. Le processus d’application d’un comportement se déroule en trois étapes :
1. Créez ou sélectionnez l’élément de page qui doit déclencher le comportement.
2. Choisissez le comportement à appliquer.
3. Spécifiez les réglages ou paramètres du comportement.
� Note : En général, l’élément déclencheur inclut un lien hypertexte appliqué à un fragment de
Pour accéder texte ou à une image. Dans certains cas, le comportement ne requiert pas le charge-
au panneau
et au menu
ment d’une nouvelle page et utilise donc un lien factice représenté par un signe dièse
Comportements, il (#), analogue à ceux que vous avez utilisés à la Leçon 9, “Travailler avec les éléments
faut qu’un fichier de navigation”. Le comportement Permuter une image, que vous utiliserez dans cette
soit ouvert.
leçon, ne nécessite pas de lien pour fonctionner, mais gardez cela à l’esprit lorsque
vous travaillerez avec d’autres comportements.
Dreamweaver inclut plus de vingt comportements prédéfinis, tous présentés dans le
panneau Inspecteur de balises (Fenêtre > Inspecteur de balises). Des centaines d’autres
comportements utiles sont téléchargeables gratuitement ou à moindre coût sur
Internet. Un grand nombre d’entre eux sont disponibles dans la section Dreamweaver
Exchange du site Adobe, à laquelle vous pouvez accéder en cliquant sur l’icône Ajouter
un comportement ( ) de l’Inspecteur de balises et en choisissant Télécharger d’autres
comportements dans le menu déroulant. Lorsque le site Adobe Marketplace & Exchange
se charge dans le navigateur, cliquez sur le lien vers Dreamweaver pour obtenir une
liste complète d’extensions et de comportements.
Le site Adobe Marketplace & Exchange propose une myriade de ressources pour les
concepteurs web et les développeurs, dont des extensions gratuites ou payantes pour
Dreamweaver et d’autres applications de la suite CS.
Parmi les fonctionnalités proposées par les comportements prédéfinis de Dreamweaver,
on peut notamment citer les suivantes :
• ouvrir une fenêtre de navigateur ;
• remplacer une image par une autre afin de créer un effet de survol ;
270 leçon 10 Ajouter de l’interactivité

13:32:41 +0200 26/09/2012 10:26:51
• opérer un fondu d’entrée ou de sortie avec une image ou une page ;
• agrandir ou réduire une image ;
• afficher une boîte de message ;
• modifier du texte ou un autre élément HTML dans une zone donnée ;
• afficher ou masquer des sections de la page ;
• appeler une fonction JavaScript personnalisée.
Tous les comportements ne sont pas disponibles dans tous les contextes. Certains ne
le deviennent qu’en présence d’éléments de page, comme des images ou des liens. Par
exemple, il faut qu’une image figure dans la page pour que le comportement Permuter
une image soit utilisable.
Tous les comportements affichent une seule boîte de dialogue, qui définit les paramètres
et options appropriés. Par exemple, la boîte de dialogue Ouvrir la fenêtre Navigateur
permet de définir l’adresse web du fichier à afficher dans la nouvelle fenêtre, la largeur
et la hauteur de la fenêtre, ainsi que d’autres attributs de fenêtre. Comme avec les
autres comportements, les paramètres choisis peuvent être modifiés à tout moment.
Les comportements sont extrêmement flexibles. Plusieurs d’entre eux peuvent s’appli-
quer au même déclencheur. Par exemple, il est possible de remplacer une image par
une autre, puis de changer le texte de la légende qui l’accompagne avec le même clic.
Si la rapidité de réaction semble suggérer que les événements sont simultanés, les
comportements se déclenchent, en réalité, en séquences. Lorsque plusieurs compor-
tements sont appliqués au même événement déclencheur, vous avez la possibilité de
modifier l’ordre dans lequel ces comportements sont traités.

13:32:41 +0200 26/09/2012 10:26:52
� Note : Si vous Dans la première partie de cette leçon, vous allez créer une nouvelle page pour les
commencez cette services de voyage de GreenStart. Observons la page terminée dans le navigateur.
leçon en partant
de zéro, utilisez 1. Lancez Adobe Dreamweaver CS6.
la méthode
décrite dans la 2. Si nécessaire, appuyez sur F8/Maj+Cmd+F pour ouvrir le panneau Fichiers et
sous-section choisissez DW-CS6 dans la liste des sites.
“Démarrage
instantané” de la 3. Dans le panneau Fichiers, déroulez le dossier lesson10. Cliquez du bouton droit sur
section “Guide de travel_finished.html, choisissez Aperçu dans un navigateur dans le menu contextuel
démarrage”, au et sélectionnez votre navigateur principal.
début de ce livre.
Ensuite, suivez La page inclut des comportements Dreamweaver.
les étapes de cet
exercice. 4. Si votre navigateur principal est Internet Explorer, un message peut apparaître
au-dessus de la fenêtre de navigateur pour indiquer que l’exécution du code JavaScript
� Note : La boîte est bloquée. Si c’est le cas, cliquez sur Autoriser le contenu bloqué.
de dialogue
Attributs
d’accessibilité des
balises d’image
n’apparaît pas
lorsque vous
insérez une 5. Placez votre curseur sur le titre Tour Eiffel. Observez l’image à droite du texte.
image de cette
manière. Pour
L’ancienne illustration est remplacée par une image de la tour Eiffel.
ajouter un texte
secondaire à cette
image, utilisez
le champ Sec.
de l’inspecteur
Propriétés.
6. Placez le curseur au-dessus du titre Paris Underground. Observez l’image à droite

du texte.
Lorsque le curseur s’écarte du titre Tour Eiffel, l’image redevient celle de l’annonce
Eco-Tour. Ensuite, lorsque le curseur survole le titre Paris Underground, l’image
est remplacée par celle du métro parisien.
7. Passez le curseur au-dessus de chacun des titres et observez le comportement de
l’image.

13:32:41 +0200 26/09/2012 10:26:53
L’image alterne entre l’annonce Eco-Tour et les photos de chaque ville. C’est l’effet
du comportement Permuter une image.
8. Lorsque vous avez terminé, fermez la fenêtre du navigateur et revenez à Dreamweaver.
Au prochain exercice, vous allez apprendre à travailler avec les comportements
Dreamweaver.
Travailler avec des comportements

Dreamweaver
Dreamweaver permet d’ajouter des comportements à vos pages en quelques clics et
sans autre opération. Mais, avant d’ajouter les comportements, vous devez créer la
page pour les voyages.
1. Ouvrez le panneau Actifs et cliquez sur l’icône de la catégorie Modèle. Cliquez
du bouton droit sur le modèle du site et choisissez Nouveau à partir d’un modèle
Une nouvelle fenêtre de document construite à partir du modèle s’affiche.
2. Enregistrez le nouveau document sous le nom travel.html.
3. Double-cliquez sur l’espace réservé pour l’image dans l’encadré. Naviguez jusqu’au
dossier images du site. Sélectionnez train.jpg et cliquez sur OK/Choisir.
L’image du train apparaît dans l’encadré.
4. Dans le champ Sec. de l’inspecteur Propriétés, tapez Electric trains are green et
appuyez sur Entrée.
5. Ouvrez le panneau Fichiers et déroulez le dossier lesson10 > resources. Double-
cliquez sur le fichier travel-caption.txt.
Le texte de la légende s’ouvre dans Dreamweaver.
6. Appuyez sur Ctrl+A/Cmd+A pour sélectionner tout le texte, puis sur Ctrl+C/
Cmd+C pour le copier. Fermez travel-caption.txt.
7. Sélectionnez l’espace réservé pour la légende dans l’encadré. Appuyez sur Ctrl+V/
Cmd+V pour coller le texte de la nouvelle légende.
8. Dans le panneau Fichiers, ouvrez le dossier resources et double-cliquez sur travel-
text.html.
Le fichier travel-text.html contient un tableau et du texte pour la page de voyages.
Vous remarquerez que le texte et le tableau ne sont pas mis en forme.
9. En mode Création, appuyez sur Ctrl+A/Cmd+A pour sélectionner tout le texte en
incluant le tableau. Appuyez sur Ctrl+C/Cmd+C pour copier le contenu. Fermez
travel-text.html.
10. Dans travel.html, sélectionnez le titre de remplissage Add main heading here.
Tapez Green Travel pour remplacer le texte.

13:32:41 +0200 26/09/2012 10:26:53
11. Sélectionnez le titre de remplissage Add subheading here et tapez Eco-Touring
pour le remplacer.
12. Cliquez sur le sélecteur de balises <p> pour le texte Add content here. Appuyez sur
Ctrl+V/Cmd+V pour coller le contenu du presse-papiers.
Le contenu du fichier travel-text.html apparaît. Il utilise la mise en forme par défaut

pour le texte et les tableaux appliquée par la feuille de style créée à la Leçon 7,
“Travailler avec du texte, des listes et des tableaux”.
Insérons l’annonce Eco-Tour, qui servira d’image de base pour le comportement
Permuter une image.
13. Double-cliquez sur l’espace réservé pour l’image SideAd. Naviguez jusqu’au dossier
des images du site et sélectionnez ecotour.png. Cliquez sur OK/Choisir.
L’espace réservé est remplacé par l’annonce Eco-Tour. Avant d’appliquer le

comportement Permuter une image, vous devez cependant identifier l’image à
permuter. Pour cela, il faut lui attribuer un ID.

13:32:41 +0200 26/09/2012 10:26:54
14. Si nécessaire, sélectionnez ecotour.png dans la page. Sélectionnez l’ID SideAd � Astuce : Même
existant dans l’inspecteur Propriétés. Tapez ecotour et appuyez sur Entrée. Tapez si cela prend du
temps, il est de
le texte Eco-Tour of Paris dans le champ Sec.
bon usage de
donner à toutes
vos images un ID
unique.

Ensuite, vous allez créer un comportement Permuter une image pour ecotour.png.
Appliquer un comportement
Comme indiqué précédemment, de nombreux comportements sont sensibles au
contexte et dépendent de la présence d’éléments particuliers ou de parties de structure.
Le comportement Permuter une image peut être appliqué à n’importe quel élément
de texte d’un document.
1. Choisissez Fenêtre > Comportements pour ouvrir l’Inspecteur de balises. � Note : Les
utilisateurs des
2. Placez le curseur dans le texte Tour Eiffel et cliquez sur le sélecteur de balises <h3>. précédentes
versions de
3. Cliquez sur l’icône Ajouter un comportement ( ). Choisissez Permuter une image
Dreamweaver
dans la liste des comportements. se demanderont
peut-être où se
trouve le panneau
Comportements.
Il a été rebaptisé
Inspecteur de
balises.
La boîte de dialogue Permuter une image apparaît et liste toutes les images de
la page disponibles pour ce comportement. Ce dernier peut remplacer une ou � Note : L’option
plusieurs d’entre elles à la fois. Précharger les
images force
4. Sélectionnez l’élément image “ecotour" et cliquez sur Parcourir. le navigateur à
télécharger toutes
5. Dans la boîte de dialogue Sélectionnez la source de l’image, sélectionnez tower.jpg les images pour
dans le dossier des images du site. Cliquez sur OK/Choisir. le comportement
avant le
6. Dans la boîte de dialogue Permuter une image, cochez l’option Précharger les chargement
images et cliquez sur OK. de la page. On
est ainsi assuré
que, lorsque
l’utilisateur
clique sur le
déclencheur,
la permutation
d’image s’opère
sans pépins ni
à-coups.

13:32:41 +0200 26/09/2012 10:26:55
Un comportement Permuter une image est ajouté au panneau Inspecteur de
balises avec un attribut onMouseOver. Les attributs peuvent être modifiés, si vous
le souhaitez, avec l’Inspecteur de balises.
7. Cliquez sur l’attribut onMouseOver pour ouvrir le menu déroulant et examinez les
options.
Le menu fournit une liste d’événements déclencheurs, dont la plupart se comprennent

d’eux-mêmes. Pour le moment, conservez cependant l’attribut onMouseOver.
8. Enregistrez le fichier et cliquez sur Affichage en direct pour tester le comportement.
Positionnez le curseur au-dessus du texte Tour Eiffel.
Lorsque le curseur passe au-dessus du texte, l’annonce Eco-Tour est remplacée par
l’image de la tour Eiffel. Mais il y a un problème. Lorsque le curseur s’écarte du texte,
l’image d’origine ne revient pas, et ce parce que vous ne le lui avez pas indiqué. Pour
restaurer l’image d’origine, vous devez ajouter une autre commande (Restaurer l’image
intervertie) au même élément.
Appliquer un comportement Restaurer l’image intervertie

Dans certains cas, une action spécifique peut requérir plusieurs comportements. Pour
réafficher l’annonce Eco-Tour une fois que la souris s’écarte du déclencheur, vous
devez ajouter une fonction de restauration.
1. Repassez en mode Création. Placez le curseur dans le titre Tour Eiffel et examinez
l’Inspecteur de balises.
L’inspecteur affiche le comportement actuellement attribué. Inutile de sélectionner
entièrement l’élément ; Dreamweaver part du principe que vous souhaitez modifier
l’ensemble du déclencheur.
2. Cliquez sur l’icône Ajouter un comportement ( ) et choisissez Restaurer l’image
intervertie dans le menu déroulant. Cliquez sur OK dans la boîte de dialogue
Restaurer l’image intervertie pour terminer la commande.

13:32:41 +0200 26/09/2012 10:26:56
Le comportement Restaurer l’image intervertie apparaît dans l’Inspecteur de balises
avec un attribut onMouseOut.
3. Repassez en mode Code et examinez le balisage du texte Tour Eiffel.
Les événements déclencheurs (onMouseOver et onMouseOut) ont été ajoutés comme

attributs à l’élément <h3>. Le reste du code JavaScript a été inséré dans la section
<head> du document.
4. Enregistrez le fichier et cliquez sur Affichage en direct pour tester le comportement.

Testez le déclencheur texte Tour Eiffel.
Lorsque le curseur survole le texte, l’image Eco-Tour est remplacée par celle de la
tour Eiffel. Elle réapparaît quand le curseur s’en écarte. Le comportement fonctionne
comme prévu, mais rien de visiblement différent dans le texte ne laisse présager que
cet effet magique se produira en survolant le titre. Comme la plupart des internautes
sont habitués à l’interactivité des liens hypertexte, on peut, en ajoutant un lien factice
sur le titre, encourager le visiteur à tester cet effet.
Supprimer des comportements appliqués

Avant de pouvoir appliquer un comportement à un lien hypertexte, vous devez suppri-
mer les comportements courants Permuter une image et Restaurer l’image intervertie.
1. Si nécessaire, ouvrez l’Inspecteur de balises. Placez le curseur dans le texte Tour Eiffel.
L’Inspecteur de balises affiche les deux événements appliqués. L’ordre dans lequel
ils sont supprimés n’importe pas.
2. Sélectionnez l’événement Permuter une image.
Dans l’Inspecteur de balises, cliquez sur l’icône
Supprimer un événement ( ). Sélectionnez
l’événement Restaurer l’image intervertie.
Dans l’Inspecteur de balises, cliquez sur l’icône
Supprimer un événement.
Les deux événements sont supprimés. Dreamweaver supprime aussi tout le code
JavaScript qui n’est plus nécessaire.
3. Enregistrez le fichier et testez de nouveau le texte en mode Affichage en direct.
Le texte ne déclenche plus le comportement Permuter une image. Pour réappliquer
des comportements, vous devez d’abord ajouter un lien réel ou factice au titre.
Ajouter des comportements aux liens hypertexte

Les comportements peuvent être ajoutés aux liens hypertexte, même le lien ne charge
pas de nouveau document. Pour cet exercice, vous allez ajouter un lien fictif au titre
pour prendre en charge le comportement désiré.

13:32:41 +0200 26/09/2012 10:26:56
1. Sélectionnez le texte Tour Eiffel dans l’élément <h3>. Dans le champ Lien de
l’inspecteur Propriétés, tapez # et appuyez sur Entrée pour créer le lien factice.
Le texte s’affiche avec la mise en forme des liens hypertexte par défaut.
2. Placez le curseur dans le lien. Dans l’Inspecteur de balises, cliquez sur l’icône Ajouter
un comportement et choisissez Permuter une image dans le menu déroulant.
Si le curseur est bien placé dans le lien, le comportement est appliqué à l’ensemble
du code de lien.
3. Dans la boîte de dialogue Permuter une image, sélectionnez l’élément image
“ecotour". Parcourez le système de fichiers et sélectionnez tower.jpg dans le dossier
des images du site. Cliquez sur OK/Choisir.
4. Dans la boîte de dialogue Permuter une image, cochez les options Précharger les
images et Restaurer les images onMouseOut si nécessaire, puis cliquez sur OK.
L’événement Permuter une image apparaît dans l’Inspecteur de balises, accompagné

d’un événement Restaurer l’image intervertie. Puisque le comportement a été appliqué
entièrement en une fois, Dreamweaver propose la fonctionnalité de restauration
afin d’améliorer la productivité.
5. Sélectionnez le texte Paris Underground et appliquez-lui un lien factice (#). Appliquez
le comportement Permuter une image au lien. Sélectionnez l’image underground.
jpg dans le dossier des images du site.
6. Répétez l’étape 5 pour le texte Seine River Dinner Cruise.
Sélectionnez l’image cruise.jpg.
7. Répétez l’étape 5 pour le texte Champs Élysées. Sélectionnez l’image champs.jpg.
Les comportements de permutation d’image sont maintenant terminés, mais
l’apparence du texte et du lien ne se conforme pas au thème de couleur du site.

13:32:41 +0200 26/09/2012 10:26:57
Créons une règle CSS personnalisée pour le mettre en forme comme il faut. Vous
allez créer deux règles : l’une pour l’élément de titre et l’autre pour le lien lui-même.
8. Placez le curseur dans l’un des liens de survol. Dans le panneau Styles CSS, sélectionnez
la règle .content h3 dans la feuille de style mygreen_styles.css. Cliquez sur l’icône
Nouvelle règle de CSS.
9. Si nécessaire, choisissez l’option Composé dans le menu Type de sélecteur. Dans
le champ Nom de la règle, tapez .content section h3 et cliquez sur OK pour
créer la règle.
10. Dans la catégorie Boîte, entrez les spécifications suivantes : Top-margin : 0 px ;
Bottom-margin : 5 px.
11. Cliquez sur OK pour terminer la règle.
12. Créez une nouvelle règle de CSS nommée .content section h3 a et entrez les
spécifications suivantes : Font-size : 140 % ; Color field : #090. Cliquez sur OK.
13. Cliquez sur OK pour terminer la règle.
Les titres sont maintenant mis en forme conformément au thème du site.

14. Enregistrez le fichier et testez les comportements en mode Affichage en direct.
Le comportement Permuter une image fonctionne bien avec tous les liens.
15. Fermez travel.html.
Au-delà des effets tape-à-l’œil, Dreamweaver propose aussi des composants structurels
(comme les widgets Spry), qui permettent de gagner de l’espace dans les pages et de
les rendre plus interactives.
Travailler avec des widgets Accordéon Spry

Le widget Accordéon Spry vous permet d’organiser un contenu volumineux au sein
d’un affichage compact. Les onglets sont empilés et, lorsqu’ils sont ouverts, s’étendent
verticalement au lieu de se placer côte à côte. Les panneaux sont fixés à une hauteur
spécifique et, si le contenu est plus haut ou plus large que le panneau lui-même, des
barres de défilement apparaissent automatiquement. Observons la page terminée.

13:32:41 +0200 26/09/2012 10:26:57
� Note : Si vous 1. Dans le panneau Fichiers, sélectionnez tips_finished.html dans le dossier lesson11.
commencez Observez la page dans votre navigateur principal.
cet exercice en
partant de zéro, Le contenu de la page est divisé en trois panneaux dans le widget Accordéon Spry.
consultez les
instructions de 2. Cliquez tour à tour sur chacun des panneaux pour l’ouvrir et le fermer.
la sous-section
“Démarrage
instantané” de la
section “Guide de
démarrage”, au
début de ce livre.
Ensuite, suivez
les étapes de cet
exercice.
3. Fermez votre navigateur et revenez à Dreamweaver.
Insérer un widget Accordéon Spry

Dans cet exercice, vous allez incorporer un widget Accordéon Spry dans votre page.
1. Ouvrez tips.html.
La page est constituée de trois listes à puces séparées par des titres <h2>. Commençons
par insérer un Accordéon Spry devant le premier <h2>.
2. Placez le curseur dans le titre At Home et cliquez sur le sélecteur de balises <h2>.
Appuyez sur la touche fléchée de gauche une fois pour déplacer le curseur avant
la balise <h2>.
3. Dans la catégorie Spry du panneau Insertion, cliquez sur le bouton Accordéon Spry.
Dreamweaver insère l’élément widget Accordéon Spry. L’élément initial est un

widget Accordéon à deux panneaux, qui apparaît avec le panneau supérieur ouvert.
Comme pour la barre de menus Spry que vous avez créée à la Leçon 9, “Travailler
avec les éléments de navigation”, un onglet bleu apparaît au-dessus du nouvel objet,
qui porte le titre Accordéon Spry: Accordion1.
4. Sélectionnez le texte de remplissage Étiquette 1 et tapez Home pour remplacer le
texte. Faites défiler la page vers le bas, insérez le curseur dans le titre <h2> At Home
et cliquez sur le sélecteur de balises <h2>. Appuyez sur Suppr.

13:32:41 +0200 26/09/2012 10:26:58
5. Insérez le curseur dans la première puce, Wash clothes in cold water, et cliquez sur
le sélecteur de balises <ul>. Appuyez sur Ctrl+X/Cmd+X pour couper toute la liste.
6. Sélectionnez le texte Contenu 1 en haut du panneau du widget Accordéon. Appuyez
sur Ctrl+V/Cmd+V pour coller la liste à puces.
Le défilement n’étant pas actif en mode Création, il se peut que vous ne voyiez
qu’une partie du contenu que vous avez ajouté.
7. Pour voir ou éditer tout le contenu, cliquez du bouton droit sur la fenêtre de
contenu et choisissez Affichage des éléments > Complet dans le menu contextuel.
La liste entière d’astuces apparaît.

8. Cliquez du bouton droit sur la fenêtre de contenu et choisissez Affichage des éléments
> Masqué dans le menu contextuel afin de redimensionner la taille du panneau.
9. Supprimez le titre <h2> At Work. Sélectionnez et coupez l’élément <ul> contenant
les astuces “Work”.
10. Positionnez le curseur au-dessus de la barre qui affiche le texte Étiquette 2. Cliquez
sur l’icône en forme d’œil ( ) pour ouvrir le panneau 2, si nécessaire.
11. Sélectionnez le texte Étiquette 2 et tapez At Work.

12. Sélectionnez le texte Contenu 2 et collez l’élément <ul>.
Deux des panneaux sont terminés, mais vous devez en insérer un nouveau pour fina-
liser le widget Accordéon Spry.
Ajouter des panneaux supplémentaires

Vous pouvez ajouter ou supprimer des panneaux du widget Accordéon Spry en utilisant
l’inspecteur Propriétés.
1. Sélectionnez l’onglet bleu au-dessus de Accordion1 dans la fenêtre de document.
L’inspecteur Propriétés affiche les réglages pour le widget Accordéon.

13:32:41 +0200 26/09/2012 10:27:00
2. Dans l’inspecteur Propriétés, cliquez sur l’icône Ajouter un panneau.
Un nouveau panneau est ajouté au widget Accordéon.

3. Dans la fenêtre de document, supprimez le titre <h2> In the Community. Sélectionnez
et coupez l’élément <ul> suivant contenant les astuces “Community”.
4. Changez le texte Étiquette 3 en tapant In the Community et collez le texte <ul>
dans la nouvelle zone de contenu.
5. Enregistrez le fichier. Cliquez sur OK dans les autres boîtes de dialogue pour les
fichiers Spry dépendants.
Vous avez créé un accordéon Spry, auquel vous avez ajouté du contenu et des panneaux
supplémentaires. Le contenu ajouté dans cet exercice se trouvait déjà dans la page,
mais il est possible d’entrer ou d’éditer le contenu directement dans les panneaux
Contenu. Vous pouvez aussi copier des éléments provenant d’autres sources, comme
des documents de Word, TextEdit ou du Bloc-Notes. Dans l’exercice suivant, vous
allez personnaliser les styles CSS de l’accordéon Spry.
Personnaliser un accordéon Spry

Comme les autres widgets Spry, les accordéons Spry sont mis en forme par leur propre
fichier CSS attaché. Dans cet exercice, vous modifierez le composant et adapterez son
thème de couleur à celui du site web. Essayons de retrouver les règles qui mettent en
forme les onglets horizontaux.
1. Placez le curseur dans l’étiquette de l’onglet At Home et examinez les noms et
l’ordre des sélecteurs de balises.
Les onglets sont mis en forme par la classe .AccordionPanelTab.
2. Dans le panneau Styles CSS, déroulez la feuille de style SpryAccordion.css.
Double-cliquez sur la règle .AccordionPanelTab pour la modifier.
3. Tapez les spécifications suivantes pour la règle .AccordionPanelTab :
Font-size : 120 % ;
Color : #FFC ; Background-color : #090 ;
Background-image : background.png ;
Background-repeat : repeat-x ;
Left Padding : 15 px ;
Top Border Color : #060 ;
Bottom Border Color : #090.

13:32:41 +0200 26/09/2012 10:27:01
4. Enregistrez tous les fichiers et observez le document en mode Affichage en direct.
Testez et examinez le comportement de l’accordéon.
Les onglets horizontaux possèdent un comportement de survol. Le texte devient

gris, mais lorsqu’il est combiné avec l’image d’arrière-plan le résultat n’est pas très
percutant. Changeons la couleur du texte pour améliorer le contraste et supprimons
l’image d’arrière-plan.
5. Repassez en mode Création. Examinez la feuille de style Accordion afin de retrouver
la règle qui applique le comportement de survol.
Deux règles déclenchent un effet de survol. L’une s’applique quand le panneau est
fermé (.AccordionPanelTabHover) et l’autre, quand il est ouvert (.AccordionPanelOpen
.AccordionPanelTabHover).
6. Double-cliquez sur .AccordionPanelTabHover pour le modifier.

7. Tapez les spécifications suivantes pour la règle .AccordionPanelTabHover : Color :
#FFC ; Background-color : #060 ; Background-image : none.
8. Répétez l’étape 7 avec la règle .AccordionPanelOpen .AccordionPanelTabHover.
9. Enregistrez tous les fichiers et testez le comportement de survol à nouveau.
L’arrière-plan des onglets disparaît et ces derniers s’assombrissent.

Notez les deux règles, en bas de la feuille de style de l’accordéon, qui contiennent le
mot focused ; il s’agit d’un comportement de lien hypertexte identique à hover, qui
est activé quand le visiteur utilise la touche Tab ou les touches fléchées au lieu de
la souris pour naviguer dans la page. Ces règles peuvent interférer avec votre mise
en forme de survol, si bien qu’il est judicieux de leur appliquer les mêmes réglages.
10. Modifiez les règles .AccordionFocused .AccordionPanelTab et .AccordionFocused
.AccordionPanelOpen .AccordionPanelTab. Entrez les spécifications suivantes :
Color : #FFC ;
Background-color : #060 ;
Background-image : none.
Lorsqu’ils sont ouverts, les panneaux ne sont pas assez hauts pour afficher toutes
les puces dans une liste à la fois.
Vous allez ajuster leur hauteur dans les règles CSS également.
11. Placez le curseur dans la liste à puces et examinez les noms et l’ordre des sélecteurs
de balises.

13:32:41 +0200 26/09/2012 10:27:02
Le panneau de la zone de contenu est mis en forme par la classe .AccordionPanelContent.
12. Sélectionnez la règle .AccordionPanelContent dans le panneau Styles CSS.
Dans la section Propriétés du panneau, changez la valeur de Height en tapant 450 px.
Le nouveau réglage de hauteur permet à tout le contenu d’être visible. En guise de
touche finale, déplaçons les deux côtés de l’Accordéon Spry pour qu’ils ne touchent
plus les bords de la fenêtre de contenu.
13. Modifiez la règle .Accordion. Entrez les spécifications suivantes : Left-margin :
15 px ; Right-margin : 15 px.
14. Enregistrez tous les fichiers et testez le document dans le navigateur par défaut.
Vous avez réussi à appliquer une mise en forme au widget Accordéon afin de l’adapter
au thème de couleurs du site et avez ajusté la hauteur du composant pour afficher une
plus grande partie du contenu. L’Accordéon est l’un des 16 widgets et composants
Spry proposés par Dreamweaver qui permettent d’incorporer des fonctionnalités
avancées dans vos sites web tout en requérant peu ou pas de programmation. Tous
ces composants sont accessibles depuis le menu ou le panneau Insertion. Dans les
leçons qui suivent, vous allez apprendre à utiliser d’autres composants Spry intégrés
de Dreamweaver.
Des dizaines d’autres widgets sont disponibles sur Adobe Exchange. Vous pouvez en
rechercher et les installer manuellement, mais Adobe facilite cette tâche de manière
incroyable en proposant son propre Navigateur de widgets. Cette application Air peut
être téléchargée à l’adresse http://tinyurl.com/widgets-browser.
Une fois installé, Adobe Widget Browser permet aisément de retrouver les widgets
disponibles et de les utiliser dans Dreamweaver.

13:32:41 +0200 26/09/2012 10:27:02
Révisions
Questions
1. Quel est l’intérêt d’utiliser des comportements Dreamweaver ?
2. Quelles sont les trois étapes à suivre pour créer un comportement Dreamweaver ?
3. Quel est l’intérêt d’attribuer un ID à une image avant d’appliquer un comportement ?
4. Que fait un accordéon Spry ?
5. Comment ajouter de nouveaux panneaux à un widget Accordéon Spry ?
Réponses
1. Les comportements Dreamweaver ajoutent rapidement et facilement des fonctionnalités
interactives aux pages web.
2. Pour créer un comportement Dreamweaver, vous devez créer ou sélectionner un
élément déclencheur, sélectionner un comportement désiré et spécifier les paramètres.
3. L’ID permet de sélectionner plus facilement l’image spécifique durant le processus
d’application du comportement.
4. L’accordéon Spry inclut au moins deux panneaux pliants, qui masquent ou révèlent
le contenu dans une zone compacte de la page.
5. Sélectionnez le panneau dans la fenêtre de document et cliquez sur l’icône Ajouter
un panneau dans l’interface Spry de l’inspecteur Propriétés.

13:32:41 +0200 26/09/2012 10:27:02
dreamweaver permet d’intégrer des animations et des vidéos compatibles HTml5.
286

13:32:41 +0200 26/09/2012 10:27:03
Travailler avec
l’animation web
et la vidéo 11
Dans cette leçon, vous allez apprendre à incorporer des composants d’ani-
mation et de vidéo web dans votre page web et notamment à :
• insérer une animation Flash ;
• insérer une animation web ;
• insérer une vidéo Flash ;
• insérer une vidéo web.

287

13:32:41 +0200 26/09/2012 10:27:03
Comprendre l’animation web et la vidéo
Le Web livre les utilisateurs à toutes sortes d’expériences. À tel instant, vous voici en
train de télécharger et de lire un roman. Juste après, vous écoutez votre station radio
favorite ou votre artiste de prédilection. Ensuite, vous regardez une émission télé en
direct ou un film entier. Avant Flash, il était difficile d’incorporer des vidéos et des
animations dans les sites web. Une grande partie de ce contenu était proposé dans
différents formats en utilisant un mélange d’applications, de plug-ins et de codecs
(codeurs-décodeurs) qui pouvaient transférer des données sur Internet vers votre
ordinateur et votre navigateur, souvent au prix d’énormes difficultés ou problèmes
d’incompatibilité. Bien souvent, un format qui fonctionnait dans un navigateur était
incompatible avec un autre. Les applications qui fonctionnaient sous Windows ne le
faisaient pas sur Mac. La plupart des formats requéraient leurs propres lecteurs ou
plug-ins propriétaires.
Le logiciel Flash d’Adobe a ramené ce chaos à l’ordre pendant un temps. Il fournissait
une unique plate-forme pour créer des animations et des vidéos. Flash a commencé
sous la forme d’un programme d’animation et a transformé le Web pour toujours. Il y
a quelques années, il a révolutionné l’industrie à nouveau en permettant d’ajouter très
facilement une vidéo à un site. En insérant une vidéo dans Flash et en enregistrant le
fichier au format SWF ou FLV, les concepteurs et développeurs web pouvaient tirer
parti de la distribution presque universelle du lecteur Flash (installé sur 90 % des
ordinateurs fixes). Il n’y avait plus à se soucier des formats et des codecs – le lecteur
Flash se chargeait de tout.
Malheureusement, ce moment d’éclat et de popularité s’est brutalement interrompu
avec la sortie de l’iPhone en 2007. Apple a décidé que le lecteur Flash, en dépit de ses
avantages et de ses capacités, était trop difficile à prendre en charge dans son nouveau
système d’exploitation mobile (iOS). Avec la position dominante d’Apple, les autres
fabricants de téléphones et de tablettes ont annoncé eux aussi qu’ils abandonneraient
la prise en charge de Flash dans leurs prochains produits.
Quoi qu’en pensent ses détracteurs, Flash n’est pas mort. Il reste inégalé pour sa puis-
sance et ses fonctionnalités multimédias. Le lecteur Flash (l’application requise pour
lire les fichiers SWF et FLV) bénéficie toujours de l’une des bases d’installation les plus
vastes de tous les plug-ins de navigateur. Mais, aujourd’hui, tous les paris sont fermés
concernant l’animation et la vidéo. Les techniques pour créer des médias web sont
réinventées. Comme vous l’aurez deviné, cette tendance à s’écarter de Flash annonce
une nouvelle ère de chaos sur le front des médias web. Une demi-douzaine de codecs
ou plus sont en compétition pour devenir le format “de base” pour la distribution et
la lecture vidéo sur le Web.
Le seul rayon de soleil dans ce brouillard est que le HTML5 a été développé avec une
prise en charge intégrée pour l’animation et la vidéo. De grandes avancées ont déjà été
entreprises pour remplacer un certain nombre des capacités des animations Flash en
utilisant des fonctionnalités HTML5 et CSS3 natives. Le statut de la vidéo n’est pas
aussi clair. Jusqu’à présent, aucun standard unique n’a émergé, ce qui signifie que, pour
288 leçon 11 Travailler avec l’animation web et la vidéo

13:32:41 +0200 26/09/2012 10:27:03
prendre en charge tous les navigateurs PC et mobile, il faut produire plusieurs fichiers
de vidéo différents. Dans ce chapitre, vous allez apprendre à incorporer différents types
d’animations et de vidéos web dans votre site.

Afin d’avoir une idée du fichier sur lequel vous travaillerez dans cette leçon, observons
la page terminée dans le navigateur. Cette page est la page de voyages du site que vous
avez assemblée au cours de la précédente leçon.
2. Si nécessaire, appuyez sur Ctrl+Maj+F/Cmd+Maj+F pour ouvrir le panneau Fichiers,
et choisissez DW-CS6 dans la liste des sites.
4. Sélectionnez le fichier travel_finished.html et observez-le dans votre navigateur
principal.
La page inclut deux éléments multimédias : l’animation de la bannière en haut de

la région MainContent et la vidéo insérée dans la barre latérale. Selon le navigateur
utilisé pour afficher la page, la variable peut être générée dans l’un des quatre
formats suivants : MP4, WebM, Ogg ou Flash Video.
5. Vous remarquerez que l’animation de bannière Flash se lit une fois, dès que la page
est complètement chargée.
6. Pour observer la vidéo, placez votre curseur juste au-dessus dans la barre latérale
et cliquez sur le bouton Lecture qui apparaît.

13:32:41 +0200 26/09/2012 10:27:05
Selon le format vidéo pris en charge par votre navigateur, vous verrez les contrôles
disparaître si vous déplacez le curseur à l’écart de la vidéo et réapparaître si vous
le repositionnez au-dessus.
7. Lorsque vous avez terminé, fermez votre navigateur et revenez à Dreamweaver.
Ajouter une animation web à une page

� Note : Si vous Dans cet exercice, vous allez insérer une animation de bannière HTML5 dans la zone
commencez MainContent de votre page web. La création d’animations web originales dépasse le
cet exercice
en partant de
cadre de ce livre. Vous pouvez consulter le livre Introduction to Adobe Edge Preview 6
zéro, utilisez la (Peachpit, 2012) pour apprendre à créer ce type de ressource et bien d’autres choses
méthode décrite encore. Commençons par ouvrir le fichier qui contient l’animation d’exemple.
dans la sous-
section “Starter” 1. Ouvrez ecotour.html dans le dossier ecotour.
de la section
“Prise en main”, au La première fois que vous ouvrirez ce fichier, vous ne verrez peut-être aucun
début de ce livre. contenu visible. Le mode Création de Dreamweaver ne permet pas de prévisualiser
les animations Edge.
Introduction à Adobe Edge

Edge est un nouveau programme développé par Adobe, non pour remplacer Flash, mais pour créer des
animations web et du contenu interactif de manière native en HTML5, CSS3 et JavaScript. À l’heure où
ces lignes sont écrites, le programme est en version bêta et disponible en téléchargement gratuit sur le
site web Adobe Labs (www.labs.adobe.com). Le prix exact et la date de sortie de la première version
complète n’étaient pas déterminés au moment de publier ce livre mais, même comme programme
bêta, Edge est déjà un outil utilisable doté d’impressionnantes capacités. En fait, l’animation utilisée
dans cette leçon a été créée avec Edge.

13:32:41 +0200 26/09/2012 10:27:06
2. Sélectionnez le mode Code.
Vous serez peut-être surpris de voir à quel point ce document contient peu de
code. L’essentiel de l’animation se trouve en fait stocké dans des fichiers externes.
Pour faire fonctionner l’animation sur votre site, vous n’avez qu’à déplacer deux
blocs de code.
3. Sélectionnez et copiez le code commençant par  et se
terminant par  (lignes 6 à 8). Notez l’emplacement
du code dans la structure du fichier actuel.
Ce code apparaît directement après l’élément <title>…</title> et contient un

lien vers un fichier JavaScript qui charge tous les composants de l’animation. Le
lien cible un fichier dans le dossier racine du site. Pour le moment, le fichier ne
se trouve pas à cet endroit. Vous le déplacerez, ainsi que les autres composants
requis, plus loin dans ce chapitre.
4. Ouvrez travel.html dans le dossier racine du site. Si vous commencez cet exercice
en partant de zéro, utilisez la méthode décrite dans la sous-section “Starter” de la
section “Prise en main”, au début de ce livre.
La bannière doit être insérée en dehors de tous les éléments texte.
5. Si nécessaire, passez en mode Code. Localisez la balise </title> de fermeture.
Placez le curseur à la fin de l’élément.
6. Appuyez sur Entrée pour créer une nouvelle ligne. Appuyez sur Ctrl+V/Cmd+V
pour coller le code.
Vous devez maintenant insérer l’élément stage.
7. Passez à ecotour.html.
8. En mode Code, insérez le curseur dans l’élément < d i v i d = " S t a g e "
class="EDGE-10410789"> </div>. Cliquez sur le sélecteur de balises <div#stage>.
9. Appuyez sur Ctrl+C/Cmd+C pour copier l’élément.

10. Rebasculez sur le fichier travel.html.
L’élément stage doit être inséré en dehors de tout élément texte.
11. Placez le curseur dans le texte de titre Green Travel et cliquez sur le sélecteur de
balises <h1>. Appuyez sur la touche fléchée de gauche pour déplacer le curseur à
l’extérieur de l’élément <h1>.

13:32:41 +0200 26/09/2012 10:27:07
12. En mode Code, appuyez sur Ctrl+V/Cmd+V pour coller le code de l’élément stage.
Enregistrez tous les fichiers.
Vous avez presque terminé mais, avant que l’animation ne se lise, vous devez
déplacer d’autres fichiers dans le dossier racine du site.
13. Si nécessaire, ouvrez le panneau Fichiers en choisissant Fenêtre > Fichiers.
� Note : Certains 14. Dans le panneau Fichiers, cliquez sur le bouton Développer ( ). Affichez le
des fichiers contenu du dossier ecotour.
JavaScript sont
requis pour que Le dossier contient deux sous-dossiers, trois fichiers JavaScript, un fichier .html
cette animation et un fichier .edge. Pour que l’animation fonctionne correctement, vous devez
spécifique
fonctionne.
déplacer les deux dossiers et les trois fichiers JavaScript dans le dossier racine du
D’autres servent site. Les fichiers .html et .edge ne sont pas requis.
à toutes les
animations Edge 15. Sélectionnez les dossiers eco_images et edge_includes ainsi que les fichiers JavaScript
insérées dans (.js). Appuyez sur Ctrl+C/Cmd+C pour copier les composants.
votre site.
16. Dans le panneau Fichiers, sélectionnez le dossier racine du site. Appuyez sur Ctrl+V/
Cmd+V pour coller les fichiers et les dossiers.
17. Cliquez sur Affichage en direct.
L’animation de bannière se lit automatiquement en mode Affichage en direct une
fois que le code est traité, mais on aperçoit un interstice indésirable entre l’animation
et le menu de navigation horizontal. Pour identifier la cause de ce problème, vous
pouvez utiliser l’Inspecteur de code.
18. Positionnez le curseur au-dessus de l’animation de bannière. Cliquez du bouton
droit et choisissez Inspecteur de code dans le menu contextuel.
La fenêtre Inspecteur de code apparaît et liste toutes les règles CSS qui affectent
l’animation de bannière.

13:32:41 +0200 26/09/2012 10:27:07
19. En avançant depuis le bas, identifiez la règle qui crée l’interstice.
La règle .content applique 10 pixels de remplissage à div.content.

20. Dans le panneau CSS, sélectionnez la règle .content. Dans la section Propriétés du
panneau, changez la propriété padding-top en remplaçant 10 px par 0 px.
21. Enregistrez tous les fichiers. Actualisez l’Affichage en direct.
L’animation de bannière se cale sur le haut de la section de contenu de la page. Félicitations,
vous avez réussi à incorporer une animation HTML5 et CSS3 dans votre page.
Ajouter une vidéo web à une page

Par rapport à l’unique fichier Flash qu’il fallait insérer avant, il faut quelques efforts
en plus pour implémenter une vidéo HTML5 dans votre site. Malheureusement, il
n’existe pas de format universellement pris en charge par l’ensemble des navigateurs
aujourd’hui. Pour être sûr que votre contenu vidéo peut être consulté partout, vous
devez proposer plusieurs formats de fichiers. Pour le moment, Dreamweaver ne
propose pas de technique intégrée, aussi devrez-vous réaliser l’encodage vous-même.
Dans cet exercice, vous allez découvrir une méthode populaire pour insérer une vidéo
compatible HTML5 dans une page de votre site.
1. Si nécessaire, ouvrez travel.html.
Vous allez insérer la vidéo dans la section MainContent de la page.
2. Placez le curseur dans le paragraphe Click here to sign up. Cliquez sur le sélecteur
de balise <p>. Appuyez sur la touche fléchée de gauche pour déplacer le point
d’insertion avant la balise <p> ouvrante.
3. Passez au mode Code. Tapez le code suivant : <video width="400" height="300"
controls="controls"></video>.
Cette ligne crée l’élément vidéo. Vous remarquerez qu’il n’y a aucune référence
pour les fichiers vidéo eux-mêmes. Vous pouvez ajouter un attribut src à l’intérieur
de cet élément pour appeler un fichier vidéo, mais il n’est alors possible d’ajouter
qu’un seul nom de fichier. Pour appeler plusieurs vidéos, il faut utiliser le nouvel
élément HTML5 <source>.

13:32:41 +0200 26/09/2012 10:27:08
4. Placez le curseur entre les valeurs <video> d’ouverture et </video> de fermeture.
5. Appuyez sur Entrée pour créer une nouvelle ligne. Tapez <source src=" dans la
nouvelle ligne.
Lorsque vous tapez src=", Dreamweaver vous invite à parcourir le système à la
recherche d’un fichier.
6. Cliquez pour activer la commande Parcourir. Naviguez jusqu’au dossier movies et
sélectionnez le fichier paris.mp4. Cliquez sur OK/Choisir.
Le MP4, aussi connu sous le nom de MPEG-4, est un format vidéo fondé sur
le standard QuickTime d’Apple. Il est pris en charge de manière native par les
périphériques iOS. De nombreux experts recommandent de charger des fichiers
MP4 en premier – sans cela, les périphériques iOS pourraient ignorer complètement
l’élément vidéo.
7. Complétez l’élément de la manière suivante : <source src="movies/paris.mp4"
type="video/mp4" />.
Le format suivant que vous allez charger est WebM, un format vidéo open-source
et gratuit sponsorisé par Google. Il est compatible avec Firefox 4, Chrome 6,
Opera 10.6, Internet Exporer 9 et les navigateurs plus récents.
8. Appuyez sur Entrée pour créer une nouvelle ligne. Tapez <source src="movies/
paris.webm" type="video/webm" /> sur la nouvelle ligne.
Pour finir nos sélections de vidéos HTML5, le format suivant que vous allez
charger est un format multimédia open-source compressé à perte nommé Ogg. Il
est conçu pour la distribution de contenu multimédia libre de copyright et d’autres
restrictions multimédias.
� Astuce : Dans 9. Appuyez sur Entrée pour créer une nouvelle ligne. Tapez <source src="movies/
cet exemple, paris.theora.ogv" type="video/ogg" /> sur la nouvelle ligne.
vous utilisez la
vidéo FLV comme
contenu alternatif
à la vidéo HTML5.
Mais vous pouvez
à l’inverse insérer
une vidéo FLV et
utiliser l’élément Ces trois formats doivent permettre de couvrir tous les navigateurs PC et mobiles
HTML5 <video>
et les références modernes. Mais, pour prendre en charge les logiciels et périphériques plus anciens,
<source> il peut être nécessaire d’utiliser un fidèle ami : le contenu Flash. Même si Flash est
comme contenu abandonné par beaucoup, Dreamweaver continue de proposer un moyen d’insérer
alternatif. Dans
des fichiers FLV et SWF.
ce cas, si le
navigateur ou 10. Appuyez sur Entrée pour créer une nouvelle ligne. Choisissez Insertion > Médias
le périphérique
ne prend pas en
> FLV.
charge Flash, c’est 11. Quand la boîte de dialogue Insérer FLV apparaît, assurez-vous que le menu Type
la vidéo HTML5
qui apparaît à la de vidéo est paramétré avec l’option Vidéo en téléchargement progressif.
place. 12. Cliquez sur Parcourir et naviguez jusqu’au dossier movies dans le dossier racine
du site. Choisissez paris.flv et cliquez sur OK/Choisir.

13:32:41 +0200 26/09/2012 10:27:08
Pour permettre à l’utilisateur de lancer, d’arrêter et de rembobiner la vidéo, vous
devez ajouter des contrôles. Assurez-vous de sélectionner des contrôles qui ne
sont pas plus larges que la vidéo elle-même.
13. Dans le menu Apparence, choisissez Corona Skin 3.
À 400 pixels de largeur, tous les contrôles disponibles fonctionneront avec cette
vidéo. Les contrôles vidéo apparaîtront et disparaîtront automatiquement quand
le visiteur déplacera son curseur sur la vidéo.
14. Cliquez sur le bouton Détecter la taille pour entrer automatiquement les valeurs
Largeur et Hauteur pour la vidéo ou tapez manuellement Largeur : 400 et Hauteur :
300. Cochez les options Respecter proportions et Rembob. auto. Cliquez sur OK.
Dreamweaver insère dans la mise en page un espace réservé qui peut être personnalisé
avec l’inspecteur des propriétés. Les fichiers FLV ne peuvent pas être prévisualisés
en mode Création et doivent être affichés avec l’Affichage en direct ou dans un
navigateur.
15. Enregistrez le fichier. � Note : La page
Travel contient
maintenant
deux notices
qui demandent
aux utilisateurs
de s’enregistrer
pour l’Eco-Tour.
À la Leçon 12,
Lorsque vous enregistrez le fichier, la boîte de dialogue Copier les fichiers dépendants “Travailler avec
des formulaires”,
peut apparaître et afficher un message expliquant que les fichiers dépendants vous allez créer
expressInstall.swf et swfobject_modified.js seront placés dans un nouveau dossier une nouvelle page
Scripts. Ces fichiers sont requis pour exécuter un fichier FLV dans le navigateur et avec le formulaire
d’inscription et
doivent être placés sur votre serveur web pour prendre en charge la fonctionnalité pointer dessus en
Flash. Si cette boîte de dialogue apparaît, cliquez sur OK. associant un lien à
ce texte.
� Note : La boîte de dialogue Copier les fichiers dépendants n’apparaît sans doute pas pour les
utilisateurs qui suivent la méthode de démarrage rapide de cette leçon. En effet, les fichiers résident
alors déjà dans votre dossier de site et Dreamweaver n’a pas besoin de les y copier.

13:32:41 +0200 26/09/2012 10:27:09
16. Passez en mode Création.
Si vous utilisez l’élément <video> sans FLV, Dreamweaver ne génère pas d’aperçu du
contenu vidéo. Heureusement, dans notre cas, il génère un espace réservé pour le
composant FLV. Les fichiers vidéo effectifs n’apparaîtront que dans les navigateurs
compatibles. L’espace réservé apparaît dans la mise en page calé sur le côté gauche
de <div.content>. Centrons-le.
17. Cliquez sur l’espace réservé FLV. Cliquez sur le sélecteur de balises <video>. Dans
le panneau Styles CSS, cliquez sur l’icône Nouvelle règle de CSS.
Par défaut, la balise <video> est un élément incorporé. En lui attribuant la propriété
block, vous pouvez contrôler son alignement dans la page et son lien aux autres
éléments de bloc.
18. Créez une nouvelle règle CSS nommée .content section video et tapez les
spécifications suivantes : Display : block ; Margin-right : auto ; Margin-left : auto.
� Astuce : Créez Cette règle centre tous les éléments <video> insérés dans <div.content>. Mais
des classes l’élément inclut aussi un composant FLV qui n’utilise pas la balise <video> mais la
personnalisées
balise <object>. Afin de vous assurer que le contenu FLV est centré, créons une
selon les besoins
pour contrôler règle pour cette balise également.
le placement
des éléments
19. Dans le panneau Styles CSS, cliquez du bouton droit sur la règle .content video
individuels. et choisissez Dupliquer dans le menu contextuel.
20. Changez le nom de la règle en l’appelant .content section object et cliquez sur
OK pour créer la nouvelle règle.
Tous les éléments <video> et <object> seront maintenant centrés.

13:32:41 +0200 26/09/2012 10:27:09
21. Prévisualisez la page en mode Affichage en direct ou dans un navigateur. Si les
contrôles vidéo ne sont pas visibles, déplacez votre curseur au-dessus de l’image
fixe pour les afficher. Cliquez sur le bouton Lecture pour lancer la vidéo.
� Note : Certaines versions d’Internet Explorer peuvent bloquer le contenu actif en attendant que
vous donniez au navigateur l’autorisation de l’exécuter. Si vous n’avez pas le Flash Player ou s’il
ne s’agit pas de la version actuelle, il se peut qu’un message vous invite à télécharger la dernière
version.
Dreamweaver. Chrome.
Internet Explorer.
L’un des quatre formats vidéo s’affiche, selon le navigateur et l’équipement utilisés
pour observer la page. Dans l’Affichage en direct, vous verrez la vidéo FLV. Les
contrôles prendront des apparences différentes selon le format affiché. Cette vidéo
ne contient aucun son, mais les contrôles incluent néanmoins un bouton de volume
pour ajuster le volume ou couper le son.
22. Lorsque vous avez terminé, repassez en mode Création.
Vous avez incorporé trois vidéos compatibles HTML5 et un repli FLV, ce qui doit
convenir pour la plupart des navigateurs et des périphériques capables d’accéder
à Internet. Vous n’avez cependant utilisé que l’une des techniques possibles pour
la prise en charge de ce standard en cours d’évolution. Pour en apprendre plus
sur la vidéo HTML5 et la manière de l’implémenter, consultez les liens suivants :
http://tinyurl.com/video-1-HTML5.

13:32:41 +0200 26/09/2012 10:27:10
Révisions
Questions
1. Quel avantage possède le HTML5 sur le HTML 4 en matière de multimédia web ?
2. Quel langage de programmation a permis de créer l’animation HTML5 utilisée
dans cette leçon ?
3. Vrai ou faux : un unique format vidéo peut suffire pour une prise en charge de tous
les navigateurs web.
4. Quel format vidéo est recommandé pour prendre en charge les navigateurs plus
anciens ?
5. Quel rôle les “ fichiers dépendants ” jouent-ils dans l’utilisation d’un fichier FLV ?
Réponses
1. Le HTML5 propose une prise en charge intégrée des animations et de la vidéo
pour le Web.
2. L’animation utilisée dans cette leçon a été créée de manière native avec Adobe Edge
en utilisant du HTML5, des CSS3 et du JavaScript.
3. Faux. Aucun format unique n’est aujourd’hui pris en charge par tous les navigateurs. Les
développeurs recommandent d’incorporer quatre formats vidéo pour prendre en
charge la majorité des navigateurs : MP4, WebM, Ogg et FLV.
4. Le FLV (Flash video) est le format de repli recommandé pour les navigateurs plus
anciens en raison de l’installation quasi universelle du lecteur Flash.
5. Les fichiers dépendants fournissent des fonctionnalités essentielles sur Internet
pour lire les composants Flash et doivent être placés sur votre serveur avec le code
HTML5 et la vidéo correspondante.

13:32:41 +0200 26/09/2012 10:27:10
bien des gens ont leur premier contact avec les fonctionnalités interactives du
web en tombant sur un formulaire. les formulaires sont des outils essentiels
de l’Internet moderne pour capturer d’importantes informations et obtenir
un retour de l’utilisateur.
300

13:32:41 +0200 26/09/2012 10:27:24
Travailler avec
des formulaires 12
Dans cette leçon, vous allez créer des formulaires pour votre page web et
apprendre à :
• insérer un formulaire ;
• inclure des champs texte ;
• travailler avec des widgets de formulaire Spry ;
• insérer des boutons radio ;
• insérer des cases à cocher ;
• insérer des listes ;
• ajouter des boutons de formulaire ;
• incorporer des jeux de champs et des légendes ;
• créer une solution e-mail pour le traitement des données ;
• formater votre formulaire avec des CSS.
301

13:32:41 +0200 26/09/2012 10:27:24
Afin de comprendre le projet sur lequel vous travaillerez dans cette leçon, commencez
par observer la page Paris Ecotour terminée dans le navigateur.
2. Si nécessaire, ouvrez le panneau Fichiers et sélectionnez DW-CS6 dans la liste des
sites. Déroulez le dossier lesson13.
3. Sélectionnez signup_finished.html et observez la page dans votre navigateur principal.
La page inclut plusieurs éléments de formulaire. Testez-les pour observer leur
comportement.
� Note : Si vous 4. Cliquez dans le champ Name et tapez un nom. Appuyez sur Tab.
utilisez Internet
Explorer comme Le nom apparaît dans le champ de données.
navigateur
5. Cliquez dans le champ Email et appuyez sur Tab sans entrer d’adresse e-mail.
principal et qu’un
message apparaît Un widget Formulaire Spry propose une validation pour ce champ et affiche un
au-dessus de
message d’erreur si le champ est laissé vide.
la fenêtre du
navigateur pour
indiquer que
des scripts ont
été bloqués,
cliquez sur la
barre de message
et choisissez 6. Dans le champ Email, tapez jdoe@mycompany et appuyez sur Tab.
Autoriser le
contenu bloqué.
Comme vous avez omis le .com, le widget Formulaire Spry affiche un message
d’erreur qui vous invite à corriger la saisie.
7. À la fin de jdoe@mycompany, tapez .com.
Appuyez sur Tab.
Maintenant que l’entrée représente une adresse e-mail complète, le message
d’erreur disparaît.
8. Dans le champ Password, tapez mypassword et appuyez sur Tab.
Un message d’erreur apparaît, qui indique que le mot de passe entré n’est pas
conforme aux contraintes définies.
9. Dans le champ Password, tapez mypassword12.
Appuyez sur Tab.
302 leçon 12 Travailler avec des formulaires

13:32:41 +0200 26/09/2012 10:27:24
10. Dans le champ Repeat Password, tapez mypass12 et appuyez sur Tab.
Le widget Validation Spry de confirmation détecte que les deux mots de passe ne
correspondent pas et affiche un message d’erreur.
11. Dans le champ Repeat Password, tapez mypassword12.
Appuyez sur Tab.
12. Sélectionnez une ou plusieurs options pour indiquer où vous souhaitez voyager.
13. Utilisez les boutons radio pour choisir le nombre de voyageurs.
14. Cliquez dans le champ Restrictions And Limitations.
Tapez I prefer window seats.
Appuyez sur Tab.
Si ce formulaire avait été chargé sur votre serveur web, vous auriez normalement
cliqué sur le bouton Email Tour Request pour envoyer le formulaire. Une page de
remerciement comme celle présentée ci-après remplacerait alors la page d’inscription.
15. Lorsque vous avez terminé, fermez toutes les fenêtres de navigateur et revenez à
Dreamweaver.
Avant de construire votre propre formulaire avec ses différents éléments, voyons
comment les formulaires fonctionnent.
En apprendre plus sur les formulaires

Les formulaires, qu’ils soient imprimés sur papier ou mis en ligne, servent à récolter
des informations. Dans les deux cas, ces dernières sont entrées dans des éléments
de formulaires interactifs, appelés champs ; il est ainsi plus facile, par la suite, de les
retrouver et de les comprendre.
Les formulaires doivent être clairement délimités : les formulaires papier utilisent
souvent une page séparée ou une bordure graphique pour se distinguer du reste du

13:32:41 +0200 26/09/2012 10:27:25
texte, tandis que les formulaires web utilisent la balise <form> et d’autres éléments
HTML spécifiques pour désigner et contenir les données demandées.
Les formulaires en ligne possèdent de sérieux avantages sur les formulaires papier,
parce que l’utilisateur entre les données de telle manière qu’elles peuvent être auto-
matiquement transférées vers des feuilles de calcul ou des bases de données, ce qui
réduit les coûts de travail et le nombre d’erreurs de saisie.
Les formulaires web se composent d’une série d’éléments, qui possèdent chacun un
rôle bien précis :
• Champs texte. Ils permettent de saisir du texte et des chiffres, en un nombre limité
de caractères. Les champs texte désignés comme des champs de mot de passe
masquent les caractères saisis.
• Zones de texte. Elles sont analogues aux champs texte standard, mais sont destinées
à des quantités de texte plus importantes, comme des phrases ou des paragraphes
multiples.
• Boutons radio. Ces éléments graphiques permettent de sélectionner une option
parmi un groupe d’éléments. Seul un élément dans le groupe peut être choisi. Tout
choix de sélection dans le groupe vient remplacer le choix précédent. Une fois qu’un
élément est sélectionné, il ne peut pas être désélectionné à moins que le formulaire
ne soit réinitialisé ou qu’un autre élément soit sélectionné.
• Cases à cocher. Elles permettent, par un moyen graphique, d’opérer une sélection
de type Oui/Non. Les cases à cocher peuvent être regroupées, mais, à la différence
des boutons radio, elles permettent de sélectionner plusieurs éléments dans le
groupe et peuvent aussi être désélectionnées si nécessaire.
• Listes/menus. Ces éléments affichent des entrées sous forme de liste déroulante.
Les listes (aussi appelées listes de sélection) peuvent contraindre la sélection à une
seule option ou autoriser plusieurs sélections simultanées.
• Champs masqués. Ces champs de données prédéfinies permettent d’envoyer au
mécanisme de traitement du formulaire des informations qui ne sont pas présentées
au visiteur de la page. Les éléments de formulaire masqués sont fréquemment
utilisés dans les applications dynamiques. Les données masquées peuvent contenir
des informations passées depuis une page précédente de votre site ou des données
par défaut que vous ne souhaitez pas montrer à l’utilisateur avant l’envoi, comme
la date ou l’heure d’envoi du formulaire.
• Boutons. Ils sont utilisés pour envoyer les données du formulaire ou réaliser d’autres
actions interactives, comme effacer ou imprimer ces données.
Sur papier, le formulaire une fois rempli peut être posté ou transmis à une personne
qui le traite, le plus souvent manuellement. Les formulaires web sont envoyés ou
traités par voie électronique. La balise <form> inclut un attribut action, dont la valeur
est déclenchée lorsque le formulaire est envoyé. L’action correspond ainsi souvent à
l’adresse web d’une autre page ou d’un script côté serveur, qui s’occupe de la gestion
des données du formulaire.

13:32:41 +0200 26/09/2012 10:27:25
Ajouter un formulaire à une page
Dans cet exercice, vous allez créer une nouvelle page pour inscrire les participants � Note : Si vous
au Paris Ecotour décrit dans la page Travel finalisée à la Leçon 11, “Travailler avec commencez
cet exercice
l’animation web et la vidéo”. en partant de
1. Ouvrez le panneau Actifs et cliquez sur l’icône de la catégorie Modèle. Cliquez du zéro, utilisez
la méthode
bouton droit sur mygreen_temp et choisissez Nouveau à partir du modèle dans décrite dans la
le menu contextuel. sous-section
“Démarrage
section “Guide de
démarrage”, au
début de ce livre.
Ensuite, suivez
les étapes de cet
exercice.
2. Enregistrez le fichier sous le nom signup.html dans le dossier racine du site.

3. Dans la région MainContent, sélectionnez le titre de remplissage Add main heading
here et tapez Green Travel pour le remplacer.
4. Dans la région MainContent, sélectionnez le titre de remplissage Add subheading
heading here et tapez Ecotour Sign-up Form pour le remplacer.
5. Sélectionnez le paragraphe de remplissage Add content here. Saisissez le texte suivant :
To sign up for the Ecotour, please fill out the following fields: et appuyez sur
Entrée pour créer un nouveau paragraphe.
Tous les champs de formulaire doivent être contenus dans un élément <form>,
si bien qu’il est généralement préférable de l’ajouter à la page avant d’insérer des
éléments de champs. Ceux qui seront insérés en dehors de cet élément seront
ignorés lorsque le formulaire sera envoyé et traité.
6. Ouvrez le panneau Insertion et sélectionnez Formulaires dans la liste des catégories. � Note : Si vous
tentez d’insérer
Dans la catégorie Formulaires, cliquez sur l’icône Formulaire ( ). un élément de
formulaire sans
Dreamweaver place l’élément <form> au point d’insertion, qui est indiqué visuellement
balise <form>,
par une bordure rouge en pointillé. Les formulaires doivent toujours posséder un ID Dreamweaver
unique. Si vous ne créez pas le vôtre, Dreamweaver se charge de le faire pour vous. vous demande de
l’ajouter.
7. Si nécessaire, cliquez sur le sélecteur de balises <form>. Insérez le curseur dans le
champ ID du formulaire de l’inspecteur des propriétés. Tapez ecotour et appuyez
sur Entrée pour créer un ID personnalisé.
L’élément <form#ecotour> s’étend à gauche et à droite jusqu’aux bords de <div.

content>.

13:32:41 +0200 26/09/2012 10:27:26
une balise pour les contrôler tous
les champs de texte, les cases à cocher, les boutons radio, les listes et les zones de texte ont au moins
une chose en commun : ils sont tous créés à l’aide de la balise HTml <input>. Changez simplement
l’attribut type ou un ou plusieurs autres réglages, et vous pourrez convertir une case à cocher en un
bouton radio, un champ de texte ou une liste. Aucun autre élément HTml n’est aussi flexible et puissant.
À mesure que vous insérez des champs de formulaire dans cette leçon, n’hésitez pas à examiner le code
pour voir comment la magie opère.
vous pourrez voir du code semblable à celui des exemples suivants :
<input type="text" name="color" id="color" />
<input type="checkbox" name="color" id="color" value="red" />
<input type="radio" name="color" id="color" value="red" />
8. Si nécessaire, ouvrez le panneau Styles CSS. Sélectionnez la règle .content dans la

feuille de style mygreen_styles.css. Dans le panneau Styles CSS, cliquez sur l’icône
Nouvelle règle de CSS ( ).
9. Choisissez Composé et nommez la nouvelle règle .content section #ecotour.
Cliquez sur OK.
10. Dans la catégorie Boîte, accédez à la section Margin et, dans les champs Left et
Right uniquement, tapez 15 px. Cliquez sur OK.
Une nouvelle règle (.content section #ecotour) apparaît dans le panneau Styles
CSS. Le contour rouge du formulaire se place en retrait de 15 pixels par rapport
aux bords gauche et droit de MainContent.
Vous avez créé un élément de formulaire ; vous allez maintenant insérer des champs
de formulaire.
insérer des éléments de formulaire texte

Les champs texte sont les plus importants des éléments de formulaire. Ils sont le
premier moyen de récolter des données texte ou numériques déstructurées et il est
difficile d’imaginer un formulaire qui n’en utilise pas. En fait, bien des formulaires sont
d’ailleurs exclusivement composés de champs texte.

13:32:41 +0200 26/09/2012 10:27:26
Dans les exercices qui suivent, vous allez insérer des champs texte élémentaires, des
champs texte Spry, des champs de mot de passe, des champs de confirmation de mot
de passe et des zones de texte. Avant de pouvoir commencer, vous devez cependant
vérifier que Dreamweaver est configuré de manière à ajouter les éléments de formulaire
sous leur format le plus accessible.
Définir des préférences pour les formulaires accessibles

Les technologies d’accessibilité possèdent des contraintes particulières relatives aux
éléments de formulaire. Les outils technologiques d’assistance, comme les lecteurs
d’écran, requièrent un codage précis pour lire correctement les formulaires et leurs
éléments. Dreamweaver propose une option qui reproduit le code des formulaires au
format adéquat. Il se peut que vous ayez défini ces préférences auparavant. Si c’est
le cas, vérifiez que vos choix sont appropriés pour créer des formulaires accessibles.
1. Choisissez Édition > Préférences (Windows) ou Dreamweaver > Préférences
(Mac OS).
2. Lorsque la boîte de dialogue Préférences apparaît, cliquez sur Accessibilité dans
la liste Catégorie.
3. Dans la catégorie Accessibilité, assurez-vous que l’option Objets de formulaire est
cochée et cliquez sur OK.
Les champs HTML5

Comme avec les éléments sémantiques de page que nous avons utilisés, le HTML5
offre également une dizaine de nouveaux éléments de formulaire très intéressants,
des types de champs et des attributs également. Les nouveaux éléments comme
<datalist> et <keygen> et les types de champs tels que date, time, email ou
telephone permettront de contrôler la saisie des données et les fonctionnalités de
validation. Le champ lui-même saura quels types de données sont censés être entrés
et fournira les fonctionnalités pour la validation et pour signaler les entrées incorrectes.
Malheureusement, les champs HTML5 et leurs incroyables fonctionnalités ne sont pas
complètement pris en charge par certains des principaux navigateurs, Smartphones et
autres périphériques mobiles. Comme les champs de données ont un rôle vital dans la
collecte des informations, on ne peut conseiller d’utiliser encore ces champs de manière
systématique. N’hésitez pas à les tester, mais dans le cadre de cette leçon nous nous
en tiendrons aux types de champs HTML fiables et éprouvés. Si vous utilisez ces types
de champs et qu’ils ne sont pas pris en charge de manière native par le navigateur,
sachez qu’ils se comportent alors dans la plupart des cas comme des champs texte
standard. Sur certains téléphones et périphériques mobiles, les champs ou attributs
HTML5 peuvent toutefois ne pas fonctionner du tout.
Pour en apprendre plus sur ces nouveaux types de champs, consultez la page (en
anglais) tinyurl.com/HTML5-input.

13:32:41 +0200 26/09/2012 10:27:27
Comme vous le verrez dans les prochains exercices, lorsque l’accessibilité des objets
de formulaire est activée, une boîte de dialogue apparaît avant que l’élément de for-
mulaire ne soit inséré. Cette boîte de dialogue contient un certain nombre d’options,
qui permettent d’inclure une étiquette d’élément de formulaire, ainsi que divers autres
attributs spéciaux. Vous en saurez plus sur ces attributs par la suite.
Utiliser des champs texte

Les champs texte acceptent les caractères alphanumériques (lettres et chiffres). À
moins de spécifier un autre réglage, ils peuvent afficher environ vingt caractères. Si
vous saisissez plus de caractères que le champ texte ne peut en contenir, le texte défile
à l’intérieur. Pour afficher plus ou moins de caractères à l’écran, définissez une taille
de champ spécifique dans le champ Largeur de l’inspecteur Propriétés. S’il n’existe
pas de limite prédéfinie concernant la quantité de texte à entrer dans un élément de
champ texte, il y a des chances que vous deviez tenir compte des limites qu’imposent
les applications de données que vous choisirez.
Les champs de feuille de calcul et de base de données limitent généralement la quantité
des données qui peuvent être saisies. Si vous entrez trop de données dans un champ
et le transmettez, l’application de données se contente généralement d’ignorer tout
ce qui excède sa capacité maximale. Pour éviter cela, vous restreindrez des champs
de texte HTML à un nombre spécifique de caractères, si besoin, en utilisant le champ
d’attribut Nb. max de carct. dans l’inspecteur Propriétés.
1. Si nécessaire, ouvrez signup.html dans le dossier racine du site.
2. Cliquez à l’intérieur du contour de formulaire rouge.
Le sélecteur de balises devrait afficher <form#ecotour>.
3. Dans la catégorie Formulaires du panneau Insertion, cliquez sur Champ texte ( ).
La boîte de dialogue Attributs d’accessibilité des balises d’entrée apparaît. Elle vous
permet de désigner des attributs spécifiques et le balisage pour l’élément <input>.
Lorsqu’un champ de formulaire est inséré, Dreamweaver permet de définir ces
options immédiatement.
Par exemple, l’attribut le plus important est l’attribut id, parce qu’il donne au champ
un nom unique qui aide à traiter les données de formulaire par la suite. Si vous ne
donnez pas à chaque champ de formulaire un ID unique, Dreamweaver crée des
identifiants génériques, comme textfield, textfield2, textfield3, etc. Comme
il est difficile de travailler avec des ID génériques, il est important de créer vos
propres noms descriptifs.
4. Dans le champ ID, tapez name.
Appuyez sur Tab.
Les champs texte peuvent également inclure du code HTML pour une étiquette
descriptive, qui apparaîtra dans la page web. Ce balisage est facultatif et, si vous
cochez l’option Aucune balise d’étiquette dans la boîte de dialogue, Dreamweaver
ignore complètement la balise <label>.

13:32:41 +0200 26/09/2012 10:27:27
Cependant, si vous souhaitez utiliser l’élément <label>, Dreamweaver réalise le
balisage HTML pour vous et fournit deux méthodes pour l’insérer : en enveloppant
l’étiquette autour de l’élément de champ texte ou en l’insérant sous la forme d’un
élément séparé qui utilise un attribut for. Si l’attribut n’est pas visible pour les
utilisateurs habituels, il permet aux visiteurs avec des difficultés visuelles d’identifier
les champs. Dans le cas présent, l’option “for” est celle qui offre le plus de flexibilité
pour la conception des formulaires, tout en se conformant aux réglementations en
matière de handicap (section 508).
5. Dans le champ Étiquette, tapez Name:.
Appuyez sur Tab.
L’ID est en minuscule, car il n’apparaît que dans le code. L’étiquette est en majuscule
parce qu’elle s’affiche dans le formulaire, avant ou après l’élément de champ texte.
6. Cochez l’option Joindre une balise d’étiquette à l’aide de l’attribut For. Si nécessaire,
cochez l’option Avant l’élément de formulaire. Cliquez sur OK.
Lorsque l’option Joindre une balise d’étiquette à l’aide de l’attribut For est cochée,
Dreamweaver insère un code analogue au suivant :
<label for="name">Name</label><input type="text" id="name" />
Cette organisation du code offre une flexibilité maximale pour la conception de

vos formulaires.
Par exemple, vous pouvez laisser les deux éléments sur la même ligne, les placer
sur deux lignes distinctes ou les formater séparément avec des CSS. Dans certains
cas, vous pouvez utiliser un tableau pour mettre en page votre formulaire. Le fait
d’utiliser un élément label séparé permet de placer chaque élément dans des
cellules et des colonnes distinctes de tableau.
Le premier de vos objets de formulaire est maintenant en place. L’opération est similaire
pour insérer d’autres champs texte standard. Au prochain exercice, vous allez ajouter
une Validation Spry de champ de texte, une sorte de version spécialisée du champ de
texte personnalisée avec des fonctionnalités Ajax.
Inclure des Validations Spry de champ texte

À la Leçon 10, “Ajouter de l’interactivité”, vous avez découvert le framework Spry d’Adobe
pour les fonctionnalités Ajax et avez travaillé avec l’Accordéon Spry. Dreamweaver

13:32:41 +0200 26/09/2012 10:27:27
inclut également un certain nombre d’objets Spry pour les formulaires. Chaque wid-
get de formulaire Spry combine des éléments de formulaire avec du code JavaScript
avancé pour créer des objets de formulaire faciles à utiliser, dotés de mécanismes de
validation intégrés.
La validation désigne le processus qui consiste à vérifier que les données appropriées
ont été entrées dans un élément de formulaire particulier. Elle garantit l’intégrité et
la qualité des données entrées dans le formulaire et passées à votre application de
données. Par exemple, si le visiteur de votre site entre une adresse e-mail incomplète
ou incorrecte dans un champ d’e-mail, ces données seront inutiles. La validation peut
également garantir que tous les champs obligatoires seront dûment remplis avant
que le formulaire ne soit envoyé. De cette manière, il n’est pas possible qu’un visiteur
transmette accidentellement un formulaire s’il a oublié de remplir ses informations
de paiement ou d’autres données importantes.
Il existe des widgets de formulaire Spry pour une variété de tâches : les champs texte,
les zones de texte, les cases à cocher, les mots de passe, les confirmations de mot de
passe, les groupes de boutons radio et les listes de sélection. Chaque widget opère
sensiblement de la même manière : vous l’insérez, puis spécifiez ses propriétés en
utilisant l’interface Spry de l’inspecteur Propriétés.
Dans cet exercice, vous allez insérer un objet Validation Spry de champ de texte, afin de
vous assurer que votre formulaire transmet des adresses e-mail correctement formatées.
1. Si nécessaire, ouvrez signup.html.
2. Placez le curseur à la fin du champ de texte Name inséré au précédent exercice et
appuyez sur Maj+Entrée pour insérer un saut de ligne forcé.
� Astuce : 3. Dans la catégorie Formulaires du panneau Insertion, cliquez sur l’icône Validation
Appuyez sur Spry de champ de texte ( ).
Tab pour passer
rapidement d’un La boîte de dialogue Attributs d’accessibilité des balises d’entrée apparaît.
champ à un autre.
4. Dans le champ ID, tapez email. Dans le champ Étiquette, tapez Email: Cochez
l’option Joindre une balise d’étiquette à l’aide de l’attribut For. Cochez l’option
Avant l’élément de formulaire. Cliquez sur OK.
5. Enregistrez le fichier. Si Dreamweaver vous avertit que des fichiers JavaScript
externes sont utilisés, cliquez sur OK.
Une fois que l’élément est inséré dans la page, vous pouvez personnaliser sa
fonctionnalité Spry.

13:32:41 +0200 26/09/2012 10:27:29
6. Si l’onglet bleu Champ de texte Spry n’est pas visible, positionnez votre curseur
au-dessus du champ de texte Email et attendez qu’il apparaisse. Cliquez sur l’onglet
pour sélectionner l’élément. Si nécessaire, ouvrez l’inspecteur Propriétés.
L’inspecteur Propriétés affiche les attributs et les réglages pour un champ de texte
Spry générique. Vous remarquerez que le menu Aperçu des états affiche le texte
Initial.
7. Dans le menu Type de l’inspecteur Propriétés, choisissez Adresse électronique.
Vous remarquerez que le menu Aperçu des états affiche maintenant Format invalide
et que le texte d’avertissement apparaît à droite du champ.
Le type de champ Adresse électronique vérifie que l’entrée contient un caractère @ � Note :
suivi d’un nom de domaine. Examinez les déclencheurs disponibles dans l’inspecteur Lorsqu’un champ
est obligatoire,
Propriétés. L’option onBlur est un déclencheur activé lorsque l’utilisateur passe d’un l’utilisateur doit le
champ du formulaire au suivant avec la touche Tabulation. L’option onChange s’active remplir avant de
lorsque des données sont entrées ou modifiées dans le champ. L’option onSubmit pouvoir envoyer
le formulaire.
est activée lorsque le formulaire est traité par le navigateur et l’application web.
8. Dans l’inspecteur Propriétés, cochez Valider si On Blur et assurez-vous que l’option
Obligatoire est cochée.
Par défaut, toutes les validations sont déclenchées lorsque le formulaire est
transmis, mais, comme dans le champ Email, vous pouvez ajouter des déclencheurs
pour réaliser d’autres vérifications auparavant. Ce type d’interactivité fournit une
réponse plus rapide à l’utilisateur et donne l’impression d’une meilleure réactivité.
L’utilisateur n’a pas à attendre d’avoir fini de remplir la totalité du formulaire avant
de savoir qu’il a manqué un champ ou entré des données incorrectes. Dreamweaver
permet aisément de personnaliser les messages d’erreur à l’aide de l’interface Spry
de l’inspecteur Propriétés.
9. Dans le menu Aperçu des états, choisissez Obligatoire.
Le texte d’avertissement Une valeur est requise apparaît à droite du champ Spry
d’adresse électronique. Rendons cet avertissement un peu moins sibyllin.
10. Sélectionnez le texte Une valeur est requise et tapez An email address is required
(une adresse e-mail est requise).

13:32:41 +0200 26/09/2012 10:27:29
Ce message apparaîtra si une adresse e-mail invalide est entrée dans le champ.
11. Dans le menu Aperçu des états, choisissez Format invalide.
Le texte d’avertissement Format invalide apparaît à droite du champ d’e-mail Spry.
12. Sélectionnez le texte Format invalide et tapez Please enter a valid email address
(merci d’entrer une adresse e-mail valide).
Créer un ensemble de champs

L’un des moyens de rendre les formulaires plus conviviaux consiste à organiser les champs
en groupes logiques appelés “ensembles de champs”. L’élément HTML <fieldset> a
été conçu dans ce but et inclut même un élément de description utile appelé légende.
2. Placez le curseur dans l’étiquette Email. Cliquez sur l’onglet bleu pour sélectionner le
champ texte Spry. Appuyez sur la touche fléchée de droite pour déplacer le curseur
après le composant Spry. Appuyez sur Entrée pour créer un nouveau paragraphe.
3. Insérez le curseur dans l’étiquette Name et sélectionnez le sélecteur de balises
<label>. Maintenez la touche Maj enfoncée et cliquez à la fin du champ texte Email
pour sélectionner les deux champs et leurs balises associées.
Il n’est pas toujours simple de sélectionner le code approprié en mode Création.
Afin de vous assurer que vous sélectionnez tout ce dont vous avez besoin, passez
en mode Code ou Fractionner.
4. Assurez-vous que vous avez sélectionné l’ensemble de ce bloc de code.

13:32:41 +0200 26/09/2012 10:27:30
5. Dans la catégorie Formulaire du panneau Insertion, cliquez sur l’icône Ensemble
de champs ( ).
Le code sélectionné est inséré dans un élément <fieldset>.
6. Dans le champ Légende, tapez Your Contact Information.
L’ensemble de champs n’est pas représenté avec précision en mode Création, mais
la légende est clairement affichée.
8. Enregistrez tout et observez la page en mode Affichage en direct.
L’ensemble de champs enclot proprement les deux champs dans un conteneur

assorti d’une étiquette.
9. Revenez en mode Création.
Au prochain exercice, vous allez créer des champs de mot de passe et de confirmation
de mot de passe.
Créer des champs de mot de passe

Les champs de mot de passe se rencontrent aux quatre coins du Web. En général, les
champs texte affichent les caractères qu’on y entre, mais ce comportement ne convient
pas pour les champs de mot de passe. Ceux-ci masquent les caractères saisis, en affi-
chant à la place une série d’astérisques ou de puces, selon le navigateur. Conçu comme
une mesure de sécurité, ce mécanisme évite qu’une personne située à proximité puisse
observer le mot de passe pendant qu’il est tapé.
1. Placez le curseur n’importe où dans l’ensemble de champs que vous venez de créer
et cliquez sur le sélecteur de balises <fieldset>. Appuyez sur la touche fléchée de
droite pour déplacer le curseur après l’élément. Appuyez sur Entrée pour créer un
nouveau paragraphe.
2. Saisissez le texte suivant :
Your itinerary and travel plans can be accessed online using the email address
you entered above and a custom password. In the following fields you can set
up and confirm your password.
3. Appuyez sur Entrée pour créer un nouveau paragraphe.
Tapez Your password must contain at least 8 characters, at least two of them
numbers, such as “password12.”. Sélectionnez le paragraphe et cliquez sur le
bouton I de l’inspecteur Propriétés pour appliquer la balise <em>.
4. Appuyez sur Entrée pour créer un nouveau paragraphe. Dans la catégorie Formulaires
du panneau Insertion, cliquez sur l’icône Validation Spry de mot de passe ( ).

13:32:41 +0200 26/09/2012 10:27:31
La boîte de dialogue Attributs d’accessibilité des balises d’entrée apparaît.
� Note : Si vous 5. Dans le champ ID, tapez password. Dans le champ Étiquette, tapez Password:
ne souhaitez pas Cochez les options Joindre une balise d’étiquette à l’aide de l’attribut For et Avant
que le message
d’erreur par
l’élément de formulaire. Cliquez sur OK.
défaut s’affiche 6. Cliquez sur l’onglet bleu Mot de passe Spry.
dans la fenêtre en
mode Création, L’inspecteur Propriétés affiche les réglages et les attributs du champ de mot de
choisissez passe Spry.
l’option Initial
dans le menu 7. Cochez les options Obligatoire et Valider si On Blur. Dans le champ Nbre min. de
Aperçu des états caract., tapez 8. Dans le champ Nbre min. de chiffres, tapez 2.
de l’inspecteur
Propriétés..
8. Cliquez sur l’onglet bleu Mot de passe Spry. Appuyez sur la touche fléchée de droite
pour déplacer le curseur après le champ de mot de passe. Ensuite, appuyez sur
Maj+Entrée pour créer un saut de ligne après le champ de mot de passe.
9. Dans la catégorie Formulaires du panneau Insertion, cliquez sur l’icône Validation
Spry de confirmation ( ) pour créer un champ texte de validation de mot de passe.
10. Dans le champ ID, tapez confirm_pw. Dans le champ Étiquette, tapez Repeat
Password. Cochez les options Joindre une balise d’étiquette à l’aide de l’attribut
For et Avant l’élément de formulaire. Cliquez sur OK.
� Astuce : 11. Cliquez sur l’onglet bleu Confirmation Spry. Cochez les options Obligatoire et
Cette fois, il n’est Valider si On Blur. Dans le menu déroulant Valider par rapport à, choisissez
pas forcément
“password” dans Formulaire “ecotour”.
indispensable
d’utiliser le
mode Code ou
Fractionner pour
sélectionner le
code désiré, mais
n’hésitez pas à À ce stade, les instructions créées à l’étape 2
recourir à ces
outils à chaque
et les trois nouveaux champs de texte
fois qu’il le faut. peuvent être englobés dans leur propre
ensemble de champs.
12. Sélectionnez le paragraphe d’instructions
et les deux champs Spry.
13. Dans le panneau Insertion, cliquez sur
le bouton Ensemble de champs. Dans le
champ Légende, tapez Customer Account
Login. Cliquez sur OK.

13:32:41 +0200 26/09/2012 10:27:32
Vous remarquerez que le texte est en retrait mais que l’ensemble de champs est
calé contre le bord de l’élément de contenu. Le retrait est appliqué par l’une des
règles CSS préexistantes de la mise en page d’origine. Vous allez corriger cette
incohérence en appliquant un style supplémentaire avec une feuille de style CSS
personnalisée pour les formulaires à la fin de cette leçon.
La boîte de dialogue Copier les fichiers dépendants apparaît et indique que des
ressources Spry sont copiées dans le dossier de votre site. Cette boîte de dialogue
apparaît à chaque fois que vous enregistrez un fichier après avoir ajouté un nouveau
type de composant Spry.
15. Cliquez sur OK pour refermer la boîte de dialogue Copier les fichiers dépendants.
Le champ de mot de passe que vous avez ajouté permet à l’utilisateur du site web de créer
un mot de passe conforme aux règles que vous avez établies. Le champ de confirmation
de mot de passe requiert que ce dernier soit retapé exactement à l’identique. Comme
le mot de passe est masqué quand il est saisi, cela permet à l’utilisateur de détecter les
erreurs de saisie, afin qu’un mot de passe erroné ne soit pas involontairement transmis.
Insérer des cases à cocher

Les cases à cocher proposent une série d’options, qui peuvent être sélectionnées
selon n’importe quelle combinaison. Comme les champs texte, chaque case à cocher
possède sa propre valeur et un ID unique. Dreamweaver propose deux méthodes
pour ajouter des cases à cocher à vos pages. Vous les insérerez individuellement ou
groupées. Par ailleurs, vous aurez le choix entre les cases à cocher HTML standard
et les cases à cocher Spry. Ces dernières permettent d’ajouter des messages d’erreur
et d’autres fonctionnalités personnalisées. Dans cet exercice, vous allez insérer un
groupe de cases à cocher.
2. Placez le curseur dans l’ensemble de champs Customer Account Login et cliquez
sur le sélecteur de balises <fieldset>. Appuyez sur la touche fléchée de droite
pour déplacer le curseur hors de l’élément. Appuyez sur Entrée pour insérer un
nouveau paragraphe.
3. Tapez Three tentative dates have been selected for the Ecotour. Please select
any date(s) you prefer:.
4. Appuyez sur Entrée pour insérer un nouveau paragraphe.
5. Dans la catégorie Formulaires du panneau Insertion, cliquez sur l’icône Groupe
de cases à cocher ( ).

13:32:41 +0200 26/09/2012 10:27:32
La boîte de dialogue Groupe de cases à cocher apparaît, qui affiche deux options
prédéfinies.
6. Modifiez la valeur du champ Nom en tapant tourdate.
Vous remarquerez que la boîte de dialogue inclut deux colonnes : Étiquette et
Valeur. À la différence des champs texte, les cases à cocher affichent des options
prédéfinies où l’étiquette peut être différente de la valeur effectivement transmise.
Cette méthode a plusieurs avantages par rapport aux champs que l’utilisateur doit
remplir.
Pour commencer, les options prédéfinies peuvent fournir des valeurs spécifiques
désirées qui n’ont pas nécessairement de sens pour l’utilisateur. Par exemple, une
étiquette va afficher le nom d’un produit, alors que la valeur passe le numéro d’unité
de stock. Ensuite, les cases à cocher et les autres champs prédéfinis réduisent
considérablement les erreurs de saisie dans les formulaires.
� Astuce : 7. Dans la boîte de dialogue Groupe de cases à cocher, cliquez sur le bouton Ajouter
Appuyez sur (+) à côté du mot Cases à cocher pour créer un troisième élément dans la liste.
Tab pour
vous déplacer 8. Entrez les valeurs suivantes dans la boîte de dialogue Groupe de cases à cocher :
rapidement entre Étiquette 1 : June 15-25, 2012 Valeur 1 : tour1
les étiquettes et
les valeurs, afin
Étiquette 2 : September 7-17, 2012 Valeur 2 : tour2
de remplir toute Étiquette 3 : March 15-25, 2013 Valeur 3 : tour3.
la liste.
� Note : Les 9. Pour l’option Mettre en forme à l’aide de, cochez l’option Sauts de ligne (Balises
étiquettes des <br>). Cliquez sur OK.
cases à cocher
et des boutons Le groupe de cases à cocher apparaît dans le document sous le texte saisi à l’étape 3.
radio apparaissent Avec le groupe de cases à cocher, vous n’avez besoin de définir aucune propriété
par défaut après
l’élément.
dans l’inspecteur Propriétés. Un rapide coup d’œil sur le code révèle l’intérêt de
cette approche.
10. Placez le curseur à l’intérieur de l’une des étiquettes de case à cocher et passez en
mode Fractionner. Examinez le code de l’élément <input> correspondant.

13:32:41 +0200 26/09/2012 10:27:33
Chaque case à cocher dans le groupe affiche l’attribut name="tourdate". Vous
remarquerez que les attributs ID ont été automatiquement ajoutés par incrémentation :
tourdate_0, tourdate_1 et tourdate_2. Grâce au groupe de cases à cocher,
Dreamweaver vous a fait gagner du temps en automatisant le processus d’ajout
des éléments de cases à cocher.
Vous avez créé un groupe de cases à cocher. Il est possible d’en sélectionner plusieurs
dans un groupe. Dans l’exercice suivant, vous allez apprendre à travailler avec des
boutons radio.
Créer des boutons radio

Vous souhaiterez parfois que vos utilisateurs fassent un choix parmi plusieurs options.
Dans ce cas, l’idéal est d’utiliser des boutons radio. Ces derniers diffèrent des cases à
cocher en deux points. Premièrement, lorsqu’un bouton radio est sélectionné, il ne peut
être désélectionné, sauf si un autre bouton du groupe est actionné. Deuxièmement,
dès que vous cliquez sur un bouton radio, le précédent bouton sélectionné est auto-
matiquement désélectionné.
Le mécanisme qui actionne ce comportement est simple, mais efficace. À la différence
des autres éléments de formulaire, chaque bouton radio ne possède pas de nom et d’ID
uniques. Tous les boutons radio d’un groupe ont le même nom et le même ID. Les
boutons radio se différencient les uns des autres par leur valeur distincte.
Comme pour les cases à cocher, Dreamweaver propose deux méthodes pour ajouter
des boutons radio à vos pages. Vous les insérerez individuellement ou groupés. Par
ailleurs, vous aurez le choix entre les boutons radio HTML normaux et les boutons
radio Spry. Si vous choisissez des boutons radio HTML, vous devrez vous occuper
vous-même de les insérer et les nommer. Si vous choisissez le widget Validation Spry
de groupe de boutons radio, Dreamweaver s’occupe automatiquement de la logistique
des choix de noms, ainsi que des fichiers JavaScript et CSS associés, qui permettent de
personnaliser les messages d’erreur et la mise en forme. Dans cet exercice, vous allez
insérer le widget Validation Spry de groupe de boutons radio.
1. Si nécessaire, ouvrez signup.html et repassez en mode Création.
2. Placez le curseur dans l’étiquette de la dernière case à cocher. Cliquez sur le sélecteur
de balises <p> et appuyez sur la touche fléchée de droite pour déplacer le curseur
après l’élément. Appuyez sur Entrée pour insérer un nouveau paragraphe.
3. Tapez How many people will be traveling? Appuyez sur Maj+Entrée pour insérer
un saut de ligne.

13:32:41 +0200 26/09/2012 10:27:33
4. Dans le panneau Insertion, cliquez sur l’icône Validation Spry de groupe de boutons
radio ( ).
5. Changez la valeur du champ Nom en tapant travelers.
6. Cliquez trois fois sur l’icône Ajouter (+) à côté du titre Boutons radio afin de créer
un total de cinq boutons radio.
Comme avec les cases à cocher, vous pouvez entrer des valeurs et des étiquettes
différentes.
� Note : Les 7. Entrez les valeurs suivantes dans la boîte de dialogue Groupe de boutons radio
cases à cocher Validation Spry :
et les boutons
radio utilisent des
Étiquette 1 : One Valeur 1 : 1
balises identiques. Étiquette 2 : Two Valeur 2 : 2
Pour convertir un Étiquette 3 : Three Valeur 3 : 3
bouton radio en
Étiquette 4 : Four Valeur 4 : 4
une case à cocher,
donnez à chaque Étiquette 5 : More Valeur 5 : contact.
élément un ID et
un nom uniques.
Pour changer une
case à cocher en
bouton radio,
donnez à chaque
élément le même
nom mais des
valeurs uniques. 8. Dans la section Mettre en forme à l’aide de, cliquez sur Sauts de ligne (Balises
<br>). Cliquez sur OK.
� Astuce : Pour
réordonner les Le groupe de boutons Spry apparaît sous le texte entré à l’étape 3.
boutons radio
dans cette boîte 9. Si nécessaire, cliquez sur l’onglet bleu pour sélectionner le widget Groupe de boutons
de dialogue, radio Spry. Dans l’inspecteur Propriétés, cochez l’option Obligatoire.
utilisez les flèches
à droite de la liste. 10. Dans le menu Aperçu des états, choisissez Obligatoire. Examinez le texte d’erreur
Spry.
Personnalisons ce message d’erreur générique.

11. Sélectionnez le message d’erreur Spry Effectuez une sélection. Tapez Please choose
the number of travelers.

13:32:41 +0200 26/09/2012 10:27:34
Vous venez de créer un jeu de boutons radio. Grâce à l’interface Validation Spry de
Groupe de boutons radio, vous avez facilement rendu ce champ de formulaire obli-
gatoire et personnalisé le message d’erreur. Si l’utilisateur ne sélectionne pas l’un des
boutons radio, il voit apparaître le message dès qu’il tente d’envoyer le formulaire.
Incorporer des zones de texte

De temps à autre, il arrivera que vous souhaitiez donner à l’utilisateur la possibilité
d’entrer, d’un coup, de grandes quantités d’informations. Les zones de texte sont idéales
pour ce genre de fonction. Elles autorisent les saisies multilignes et les renvois à la ligne.
Si le texte entré dépasse l’espace physique de la zone de texte dans la page, des barres
de défilement apparaissent automatiquement. Dreamweaver propose des composants
de zone de texte HTML ou Spry. Les zones de texte Spry permettent d’inclure une
invite utilisateur personnalisée. Nous allons donc les utiliser dans ce nouvel exercice.
1. Si nécessaire, ouvrez signup.html et passez en mode Création.
2. Cliquez sur l’onglet bleu pour sélectionner le groupe de boutons radio Spry. Cliquez
sur le sélecteur de balises <p> et appuyez sur la touche fléchée de droite pour placer
le curseur après l’élément. Appuyez sur Entrée pour créer un nouveau paragraphe.
3. Dans la catégorie Formulaires du panneau Insertion, cliquez sur l’icône Validation
Spry de zone de texte ( ).
4. Dans le champ ID, tapez requirements. Dans le champ Étiquette, tapez Requirements
and Limitations:. Si nécessaire, cochez les options Joindre une balise d’étiquette à
l’aide de l’attribut For et Avant l’élément de formulaire. Cliquez sur OK.
La zone de texte de commentaire est incorporée dans la ligne avec l’étiquette, ce

qui n’est pas très esthétique. Attribuons-lui plutôt sa propre ligne.
5. Placez le curseur dans l’étiquette de zone de texte Requirements and Limitations.
Cliquez sur le sélecteur de balises <label> et appuyez sur la touche fléchée de
droite. Appuyez sur Maj+Entrée pour créer un saut de ligne.
L’étiquette de zone de texte Requirements and Limitations est assez vague et requiert
une description supplémentaire pour obtenir la réponse désirée. Une zone de texte
HTML peut recevoir du texte par défaut ou une valeur initiale afin d’obtenir les
données demandées.
Le principe est le suivant : vous entrez le texte dans le champ Val. init. de l’inspecteur
Propriétés et vous enregistrez la page. Lorsque le navigateur reproduit le formulaire,
ce texte apparaît automatiquement dans la zone de texte.

13:32:41 +0200 26/09/2012 10:27:34
Malheureusement, le texte dans le champ Val. init. est transmis à l’application de
données si l’utilisateur n’entre pas sa propre réponse. Votre base de données sera
alors encombrée de nombreuses données répétitives et inutiles. Comme bien des
utilisateurs n’ont pas de requêtes particulières concernant le voyage, ce champ sera
souvent ignoré. D’où l’intérêt de la Validation de zone de texte Spry. Elle adopte une
autre technique pour fournir une valeur initiale, qui ne transmet pas les données
non souhaitées.
6. Cliquez sur l’onglet bleu pour sélectionner la zone de texte Spry. Dans le champ
Conseil de l’inspecteur Propriétés, tapez Please enter any personal travel
requirements or limitations.
Lorsque l’utilisateur du site commence à taper du texte dans ce champ, la valeur
initiale ou le texte d’indication disparaît automatiquement, mais, comme le texte
de conseil n’est pas stocké dans le champ lui-même, il ne peut être transmis à votre
application de données.
La zone de texte Spry est configurée par défaut comme un champ obligatoire.
Comme il s’agira ici d’un champ facultatif, vous devez décocher cette option.
7. Cliquez sur l’option Obligatoire pour la désélectionner.

La zone de texte par défaut est assez petite et doit être agrandie.
� Attention : 8. Cliquez sur la zone de texte pour la sélectionner. Dans le champ Nbre min. de
La vue en mode caract., tapez 60. Appuyez sur Entrée.
Création n’affiche
pas les champs
de texte avec une
grande précision.
Testez toujours
les largeurs en
mode Affichage
en direct ou dans La zone de texte que vous avez ajoutée permet à l’utilisateur du site d’entrer des com-
un navigateur.
mentaires qui ne sont pas limités à une seule ligne ou case à cocher. Un autre élément
de formulaire important vous permet de proposer plusieurs choix au visiteur, mais au
sein d’une zone plus compacte.
Travailler avec des listes

Les listes et les menus de formulaire offrent une méthode flexible pour présenter plusieurs
options dans deux formats différents. Avec les menus, l’élément fonctionne comme
des boutons radio. Dans le cas d’une liste, l’élément se comporte comme des cases à
cocher. Dans cet exercice, vous allez insérer un élément de menu avec trois options.

13:32:41 +0200 26/09/2012 10:27:35
1. Si nécessaire, ouvrez signup.html et passez en mode Création.
2. Cliquez sur la zone de texte Spry. Cliquez sur le sélecteur de balises <p> qui le
contient et appuyez sur la touche fléchée de droite pour placer le curseur après
l’élément. Appuyez sur Entrée.
3. Tapez How would you like to pay? et appuyez sur Maj+Entrée.
4. Dans le panneau Insertion, cliquez sur l’icône Sélectionner (Liste/Menu) ( ).
5. Dans le champ ID, tapez payment. Conservez le champ Étiquette vide. Cochez
l’option Aucune balise d’étiquette. Cliquez sur OK.
Aucune balise d’étiquette n’est requise, parce que le texte dans l’élément de formulaire
sert lui-même d’étiquette.
Un élément de menu vide apparaît dans le document. Vous pouvez maintenant
ajouter des entrées de liste. Dreamweaver fournit une boîte de dialogue séparée
pour cette tâche, accessible depuis l’inspecteur Propriétés.
6. Dans l’inspecteur Propriétés, cliquez sur le bouton Valeurs de la liste. � Astuce : Les
listes ne doivent
pas être affichées
dans l’ordre
alphabétique,
mais ce
classement rend
les options plus
faciles à lire et
La boîte de dialogue Valeurs de la liste apparaît. Vous remarquerez que le premier à retrouver,
champ d’étiquette est automatiquement sélectionné. notamment
quand les listes
7. Dans le premier champ Étiquette, tapez Check. Dans le premier champ Valeur, sont longues.
tapez check. Pour la deuxième étiquette, tapez Credit Card. Pour la deuxième
valeur, tapez credit. Pour la troisième étiquette, tapez Electronic Funds Transfer.
Pour la troisième valeur, tapez eft. Cliquez sur OK.

13:32:41 +0200 26/09/2012 10:27:36
Les options apparaissent dans le champ Initialement sélectionné de l’inspecteur
Propriétés. Une fois que le menu est terminé, sélectionnez l’élément qui doit être
affiché par défaut.
� Astuce : L’une 8. Dans la liste Initialement sélectionné de l’inspecteur Propriétés, cliquez sur Credit
des stratégies Card. Si nécessaire, cochez l’option Menu dans la section Type.
privilégiées par
les développeurs
consiste à
sélectionner une
option favorite
et à l’afficher
par défaut. Par
exemple, si
vous considérez
le mode de
paiement par
carte de crédit
comme le plus
commode et le Lorsque l’élément Liste/Menu est formaté comme un menu, les sélections multiples
plus sûr, affichez
l’option Carte de ne sont pas permises. Pour les autoriser, cochez l’option Liste, puis l’option Autoriser
crédit par défaut. plusieurs.
Englobons les quatre derniers composants dans leur propre ensemble de champs.
� Note :
Dans certains 9. Sélectionnez le paragraphe d’introduction et les quatre derniers composants que
navigateurs, il
vous avez créés en utilisant le sélecteur de balises approprié et les combinaisons
faudra maintenir
la touche Ctrl/ de clavier et de souris adéquates. Dans le panneau Insertion, cliquez sur le bouton
Cmd enfoncée Ensemble de champs. Nommez le nouvel ensemble Paris Ecotour.
pour sélectionner
plusieurs 10. Enregistrez tous les fichiers.
options. Si votre
menu autorise
Les menus peuvent inclure de nombreux choix (par exemple la liste complète des
les sélections départements français). Ils sont donc très utiles pour le concepteur web, d’autant plus
multiples, pensez qu’ils n’occupent qu’un petit espace dans la page web elle-même. Avec une connexion
donc à ajouter
de base de données, les options de liste peuvent être générées dynamiquement et même
une note qui le
spécifie. instantanément mises à jour à mesure que de nouvelles entrées sont réalisées par un
administrateur ou un autre utilisateur.
Votre formulaire est presque terminé. La dernière étape consiste à ajouter un bouton
pour envoyer les informations entrées en vue de les traiter.
Ajouter un bouton d’envoi

Tous les formulaires nécessitent un contrôle pour enclencher un traitement dynamique
(aussi appelé action). Ce rôle est généralement dévolu au bouton d’envoi. Quand
l’utilisateur clique dessus, l’ensemble du formulaire est transmis pour être traité. Par
défaut, les boutons insérés par Dreamweaver sont configurés pour l’envoi des données,
mais d’autres options sont aussi disponibles, comme Rétablir le formulaire et Aucune.
Si de nombreux boutons utilisés sur Internet incluent le texte Envoyer (ou Submit),

13:32:41 +0200 26/09/2012 10:27:37
celui-ci n’est pas obligatoire et peut parfois être équivoque en ce qui concerne l’action
qui doit être opérée.
1. Placez le curseur dans un élément de formulaire du dernier ensemble de champs
et cliquez sur le sélecteur de balises <fieldset>.
Vous allez insérer le bouton Envoyer en dehors du dernier ensemble de champs.
2. Appuyez sur la touche fléchée de droite pour placer le curseur après l’ensemble
de champs sélectionné.
Ensuite, appuyez sur Entrée pour créer un nouveau paragraphe pour le bouton.
3. Dans le panneau Insertion, cliquez sur l’icône Bouton ( ).
4. Dans le champ ID, entrez submit. Si nécessaire, cochez l’option Aucune balise
d’étiquette. Cliquez sur OK.
Le bouton d’envoi apparaît dans le document en bas du formulaire. L’inspecteur
Propriétés affiche les réglages propres à cet élément. Vous remarquerez que le
champ Valeur contient le texte Envoyer. Dans la section Action, le bouton radio
Envoyer le formulaire est sélectionné. Changeons le texte dans le bouton pour
mieux indiquer ce qui va se passer.
Le confort des tabulations

Vous est-il déjà arrivé, en remplissant vos formulaires en ligne, d’appuyer sur la
touche Tab pour passer au champ suivant et de constater que rien ne se produit ?
Le mécanisme de tabulation dans les formulaires doit être proposé par défaut dans
vos sites. Il peut même être obligatoire, dans certains cas, en vertu des mandats
d’accessibilité définis dans la section 508 du W3C.
La tabulation vers les divers champs de formulaire créés devrait être active
automatiquement, mais certains navigateurs ne prennent pas systématiquement en
charge tous les types de champs. Pour imposer l’ordre de tabulation, vous pouvez
donc ajouter un attribut tab index à chaque champ, comme ceci :
<input type=”text” name=”name” id=”name” tabindex=”1” />
<input type=”text” name=”address” id=”add1” tabindex=”2” />
Lorsque vous insérez certains champs de formulaire, Dreamweaver propose parfois
une option Index de tabulation dans ses boîtes de dialogue. Entrez le numéro
d’ordre de tabulation désiré à cet endroit. Si cette option n’est pas disponible,
insérez l’attribut manuellement en mode Code. En l’ajoutant à chaque élément de
formulaire, vous programmerez l’ordre de tabulation et rendrez vos formulaires plus
accessibles à tous les utilisateurs, en plus de les conformer aux standards du Web.
5. Dans l’inspecteur Propriétés, modifiez le champ Valeur en tapant Email Tour

Request.

13:32:41 +0200 26/09/2012 10:27:37
Certains utilisateurs peuvent changer d’avis pendant qu’ils remplissent un formulaire
et souhaiter recommencer à zéro. Dans ce cas, vous devez également ajouter au
formulaire un bouton Réinitialiser.
6. Insérez le curseur après le bouton d’envoi. Appuyez sur Ctrl+Maj+barre d’espace/
Cmd+Maj+barre d’espace pour insérer une espace insécable.
7. Répétez les étapes 2 à 5 pour créer un bouton Réinitialiser. Dans le champ ID,
tapez reset. Dans le champ Valeur, tapez Clear Form et cochez l’option Rétablir
le formulaire.
Les éléments de formulaire sont tous en place, accessibles et prêts à être remplis, mais
le formulaire lui-même ne sera pas complet tant que vous n’aurez pas ajouté une action
qui spécifie de quelle manière les données doivent être traitées. Les actions classiques
consistent à transmettre les données par e-mail, à les envoyer sur une autre page web ou
à les insérer dans une base de données hébergée sur un serveur. Au prochain exercice,
vous allez appliquer une action et créer le code de prise en charge pour transmettre
les données du formulaire par e-mail.
Spécifier une action de formulaire

Comme vous l’avez vu dans l’exercice intitulé “Configurer des liens de messagerie”
de la Leçon 9, il ne suffit pas d’insérer une commande mailto dans le champ Action
et d’indiquer votre adresse e-mail pour envoyer un e-mail. Bien des internautes n’uti-
lisent pas les programmes de messagerie installés sur leur ordinateur, parce qu’ils leur
préfèrent des systèmes hébergés sur le Web, comme AOL, Gmail ou Hotmail. Pour
vous assurer que vous allez recevoir les réponses au formulaire, vous devez utiliser une
application serveur comme celle que vous allez créer dans cet exercice.
La première étape consiste à configurer l’action du formulaire qui passe les données
de manière à générer l’e-mail.

13:32:41 +0200 26/09/2012 10:27:37
1. Si nécessaire, ouvrez signup.html. � Note : Dans
cet exercice, nous
2. Placez le curseur n’importe où dans le formulaire et cliquez sur le sélecteur de utilisons du code
balises <form>. PHP pour générer
le formulaire
L’inspecteur Propriétés affiche les réglages et paramètres du formulaire. d’e-mail. Pour
configurer
3. Dans le champ Action de l’inspecteur Propriétés, tapez email_form.php.
l’action pour ASP
Si nécessaire, choisissez POST dans le menu Méthode. ou ColdFusion,
ajoutez
simplement
l’extension
appropriée pour
l’application cible
(.asp ou .cf).

Le HTML propose deux méthodes prédéfinies (GET et POST) pour le traitement
des données de formulaire. La méthode GET transfère les données en les ajoutant à
l’URL. Elle est utilisée dans la plupart des moteurs de recherche, comme Google et
Yahoo!. La prochaine fois que vous ferez une recherche sur le Web, observez l’URL
de la page des résultats. Vous remarquerez que chacun de vos termes y figure un peu
après le nom de domaine, en général encadrés de caractères spéciaux. La méthode
GET possède cependant quelques inconvénients. Tout d’abord, le terme recherché
est visible dans l’URL, ce qui signifie que d’autres personnes peuvent voir ce que vous
recherchez et pourront retrouver la trace de vos recherches dans le cache du naviga-
teur. Ensuite, les URL ont une taille maximale d’un peu plus de 2 000 caractères (en
incluant le nom du fichier et les informations de chemin), ce qui limite la quantité de
données que vous pouvez passer.
La méthode POST n’utilise pas l’URL. Elle passe les données à l’arrière-plan et n’impose
aucune limite concernant la quantité des données envoyées. Elle ne conserve pas les
données en cache, si bien qu’il est impossible de retrouver des données sensibles,
par exemple votre numéro de carte de crédit, dans l’historique du navigateur. Cette
méthode est utilisée par la plupart des applications de données professionnelles et
des boutiques en ligne. Le seul inconvénient de la méthode POST tient à ce qu’il n’est
pas possible de voir de quelle manière les données sont passées à la page suivante
(contrairement à la méthode GET), ce qui est pourtant utile lorsque vous tentez de
localiser des erreurs dans une application.
Avec la méthode POST sélectionnée à l’étape 3, les données entrées par l’utilisateur
dans le formulaire de signup.html sont passées au fichier email_form.php lorsque vous
cliquez sur le bouton Email Tour Request. Comme avec la plupart des liens hypertexte,
le processus charge la nouvelle page dans la fenêtre et réinitialise signup.html, ce qui
supprime les données utilisateur du formulaire. Si vous revenez en arrière vers cette
page à l’aide des menus du site ou des liens hypertexte, vous trouverez le formulaire
vide. Dans certains cas, vous pouvez recharger la page du formulaire remplie en cliquant
simplement sur le bouton Précédent du navigateur. Mais les développeurs soucieux
de sécurité ajoutent parfois du code à leurs pages de formulaire, afin que les données

13:32:41 +0200 26/09/2012 10:27:38
soient automatiquement supprimées quand la page est envoyée, ce qui empêche cette
possibilité. Quelle que soit la manière dont vous configurez votre formulaire, vous
supprimerez cependant irrévocablement les données de l’ordinateur local, dès l’instant
où le navigateur sera fermé.
Transmettre les données par e-mail

Le fichier email_form.php ciblé par l’action du formulaire n’existe pas encore. Vous
allez donc devoir le créer de toutes pièces. Bien que le modèle GreenStart soit un fichier
HTML, vous pouvez l’utiliser pour créer un mailer de formulaire PHP.
1. Ouvrez le panneau Actifs. Sélectionnez la catégorie Modèle. Cliquez du bouton
droit sur mygreen_temp et choisissez Nouveau à partir du modèle dans le menu
contextuel.
2. Enregistrez la page sous le nom email_form.php.
L’extension de fichier .php désigne les pages dynamiques qui utilisent le langage de
script serveur PHP. L’extension signale au navigateur que la page doit être traitée
autrement que le HTML simple. Certains navigateurs peuvent ignorer les scripts
ASP, ColdFusion et PHP si les fichiers n’utilisent pas les extensions appropriées.
� Attention : 3. Sélectionnez le texte Add main heading here. Tapez Green Travel pour remplacer
La saisie du code le texte sélectionné.
est fastidieuse
et doit être 4. Sélectionnez le texte Add subheading here. Tapez Thanks for signing up for the
particulièrement
Paris Ecotour! pour le remplacer.
précise. Le PHP
(et avec lui tous 5. Sélectionnez le texte Add content here. Tapez A Meridien GreenStart representative
les langages de
will contact you soon to set up your Paris Ecotour. Thanks for your interest in
script comme ASP,
ColdFusion ou GreenStart and Ecotour!
JavaScript) n’est
pas aussi tolérant
que le HTML. Si
une page web
peut fonctionner
et s’afficher dans
le navigateur
quand des
éléments de code
sont incorrects 6. Passez en mode Code.
ou incomplets,
La page est actuellement identique au modèle HTML et ne possède aucune balise
dans bien des
cas les scripts PHP. Le script qui traitera les données et générera l’e-mail côté serveur sera inséré
PHP échouent avant tout autre code dans la page, même avant la déclaration <DOCTYPE>, qui
si vous omettez débute le code HTML.
un seul caractère
obligatoire ou 7. Placez le curseur au début de la ligne 1 en mode Code. Tapez <?php et appuyez sur
une marque de Entrée pour créer un nouveau paragraphe.
ponctuation.
Tapez donc avec
un maximum
d’attention.

13:32:41 +0200 26/09/2012 10:27:38
La fonctionnalité de suggestion de code de Dreamweaver commence à vous aider
à entrer le code, mais vous remarquerez rapidement que cette fonctionnalité ne
prend pas en charge le PHP comme le HTML et le JavaScript. Si vous souhaitez
programmer du PHP à la main, vous serez donc livré à vous-même.
8. Tapez $to = “info@green-start.org"; et appuyez sur Entrée pour créer une � Note : Cette
nouvelle ligne. adresse e-mail
est celle de
En PHP, le signe dollar ($) a pour fonction de déclarer une variable. Une variable l’association
est un élément de données créé dans le code ou récupéré d’une autre source, fictive GreenStart.
Pour votre propre
comme un formulaire. Dans le cas présent, la variable $to déclare l’adresse e-mail site web, insérez
à laquelle toutes les données du formulaire vont être envoyées. Si vous souhaitez une adresse
réaliser quelques expériences en PHP, n’hésitez pas à remplacer l’adresse d’exemple e-mail prise en
charge par votre
par votre propre adresse e-mail.
serveur.
9. Tapez $subject = “Paris Ecotour Sign Up Form"; et appuyez sur Entrée pour
créer une nouvelle ligne.
Cette ligne crée la variable pour l’objet de l’e-mail. Une variable $subject est requise
dans le code PHP, mais elle peut être laissée vide (“ “) si besoin, bien que la mention
de l’objet permette d’organiser et de filtrer rapidement les e-mails.
10. Tapez $message = et appuyez sur Entrée pour créer une nouvelle ligne.
Cette variable débute le corps de l’e-mail. Les prochains éléments de code que vous
allez entrer listeront tous les champs de formulaire que vous souhaitez collecter,
en plus de quelques ajouts structurels destinés à faciliter la lecture de l’e-mail. Les
champs peuvent normalement être listés dans l’ordre de votre choix (et plus d’une
fois), mais, dans cet exercice, vous les taperez dans le même ordre que celui où
ils apparaissent dans le formulaire. Le premier champ du formulaire d’inscription
était ainsi le champ Name.
11. Tapez “Customer name: “ . $_POST['name'] . “\r\n” .
La première partie de cette entrée appartient aux “ajouts structurels” précédemment
mentionnés. Le texte “Customer name: “ n’a rien à voir avec le formulaire. Vous
l’ajoutez à l’e-mail pour identifier les données brutes qui sont insérées par la
variable $_POST['name']. Le caractère point (.) concatène (ou combine) le texte
et la variable de données dans une chaîne. L’élément de code “\r\n" insère un
nouveau paragraphe après le nom du client. Ajoutez ce code après chaque variable
de formulaire pour placer chaque élément de données sur sa propre ligne.
12. Complétez le corps de l’e-mail en tapant le code suivant. Insérez des espaces après
le signe deux points (:), afin de passer en retrait les déclarations de variable pour
les aligner sur la même position (certaines lignes récupèrent plus d’espaces que
d’autres).

13:32:41 +0200 26/09/2012 10:27:39
“Email: “ . $_POST['email'] . “\r\n" .
“Password: “ . $_POST['password'] . “\r\n" .“\r\n" .
“Requested tour: “ . $_POST['tourdate_0'] . “\r\n" .
“Total travelers: “ . $_POST['travelers'] . “\r\n" ."\r\n" .
“Restrictions: “ . $_POST['restrictions'] . “\r\n" ."\r\n" .
“Payment type: “ . $_POST['payment'];
Lorsque vous avez terminé, le code doit ressembler à celui de la figure suivante.
� Note : Cette
adresse e-mail
est celle de
L’ajout d’espaces avant les variables doit aligner les données de formulaire lorsqu’elles
l’association sont insérées dans le message, ce qui rend l’e-mail plus clair et plus facile à lire. Vous
fictive GreenStart. remarquerez que certaines lignes incluent du code pour deux retours de paragraphe
Pour votre propre
(“\r\n" . “\r\n"). L’insertion de lignes supplémentaires entre certains éléments
site web, insérez
une adresse de données contribue à rendre l’e-mail plus lisible.
e-mail prise en
13. Appuyez sur Entrée. Tapez $from = $_POST['email']; et appuyez sur Entrée.
charge par votre
serveur. Ce code sera utilisé pour remplir l’adresse e-mail d’expédition à partir des informations
que le client a entrées dans le formulaire.
� Note : Ce code
fonctionnera 14. Tapez $headers = “From: $from” . “\r\n”; Appuyez sur Entrée.
sur un serveur
PHP, mais pas Cette ligne crée l’en-tête d’e-mail “From” en utilisant la variable de l’étape 12.
forcément sur un
15. Tapez $headers .= “Bcc: lin@green-start.org” . “\r\n”; Appuyez sur Entrée.
serveur web local,
qui risque de ne Cette ligne est facultative. Elle génère une copie carbone invisible de l’e-mail adressée
pas prendre en
à Lin, l’expert voyages chez GreenStart. N’hésitez pas à personnaliser le code en
charge certaines
commandes. ajoutant ici votre propre e-mail ou celui d’un collègue.
Vous pouvez
éventuellement
16. Tapez mail($to,$subject,$message,$headers); et appuyez sur Entrée.
demander à Cette ligne crée l’e-mail et l’envoie via un serveur PHP.
votre prestataire
d’hébergement 17. Tapez ?> pour fermer et terminer la fonction PHP d’envoi par e-mail du formulaire.
Internet le code
pris en charge par Appuyez sur Entrée pour insérer un dernier retour de paragraphe. Enregistrez
votre serveur. tous les fichiers.

13:32:41 +0200 26/09/2012 10:27:39
Prise en charge d’autres
langages de script
La fonctionnalité de serveur que vous venez de créer est aussi disponible dans la plupart
des principaux langages de script. Si Dreamweaver ne propose pas cette fonctionnalité
par défaut, vous pourrez souvent retrouver la structure de code exacte en opérant
une recherche rapide sur Internet. Tapez simplement la phrase envoyer formulaire
par e-mail ou e-mail de formulaire web et vous obtiendrez des centaines de résultats
pertinents. Ajoutez votre langage de script favori à la phrase de recherche (comme
envoyer formulaire par e-mail + ASP) pour cibler les résultats.
Mettre en forme les formulaires

Si le formulaire et l’application d’envoi d’e-mails sur lesquels vous avez travaillé au
cours de cette leçon sont maintenant fonctionnels, ils sont, en revanche, totalement
dépourvus de mise en forme. Un formulaire bien mis en forme est plus lisible et com-
préhensible, donc plus facile à utiliser. Dans l’exercice suivant, vous allez mettre en
forme votre formulaire en créant une nouvelle feuille de style personnalisée.
1. Si nécessaire, ouvrez le fichier signup.html ou passez-le au premier plan.
2. Ouvrez le panneau Styles CSS.
Vous allez créer une nouvelle feuille de style uniquement pour les formulaires.
Elle pourra ainsi être attachée à cette page ou aux autres pages de formulaire, sans
toutefois l’être à toutes les pages du site. En séparant les règles CSS du formulaire
de la feuille de style principale, vous limitez la quantité de code à télécharger dans
chaque page du site web et proposez un site plus efficace. Moins il y a de code,
plus le téléchargement est rapide et plus l’utilisateur apprécie la réactivité du site.
3. En bas du panneau Styles CSS, cliquez sur Attacher une feuille de style ( ).
La boîte de dialogue Attacher une feuille de style externe apparaît.
4. Dans le champ Fichier/URL, tapez forms.css. Cochez les options Ajouter sous :
Lien et sélectionnez l’option screen. Cliquez sur OK.

13:32:41 +0200 26/09/2012 10:27:39
Dreamweaver vous signale que la feuille de style nommée n’existe pas.
5. Cliquez sur Oui pour opérer la liaison à la nouvelle feuille de style.
6. Placez le curseur dans le texte de légende Your Contact Information. Cliquez sur
l’icône Nouvelle règle de CSS.

7. En bas de la boîte de dialogue, sélectionnez la feuille de style forms.css dans le
menu déroulant. Ce choix indique à Dreamweaver que votre nouvelle règle doit
être définie dans le fichier forms.css. Dans le menu Type de sélecteur, choisissez
Composé. Modifiez le Nom du sélecteur en tapant .content section legend.
Cliquez sur OK.
Dreamweaver vous demande si vous souhaitez créer la feuille de style forms.css.

8. Cliquez sur Oui pour créer la feuille de style.
9. Entrez les spécifications suivantes pour la règle .content section legend : Font-
size : 110% ; Font-weight : bold ; Color : #090.
10. Créez une nouvelle règle CSS dans forms.css nommée .content section fieldset.
11. Entrez les spécifications suivantes pour la règle .content section fieldset :
Padding : 5 px ; Bordures : solid, 2 px et #090.

13:32:41 +0200 26/09/2012 10:27:40
13. Observez la page dans votre navigateur principal.
� Note : À
moins que
tous les fichiers
soient placés
sur un serveur
de test PHP,
vous recevrez
probablement un
message d’erreur
si vous essayez
Dans cette leçon, vous avez créé un formulaire avec de nombreux éléments HTML de soumettre
et plusieurs widgets de formulaire Spry. Vous avez créé et attaché une feuille de style cette page. En
personnalisée pour en égayer l’apparence. Dans le navigateur, vous pourrez tester tous effet, le code que
vous avez créé
les champs du formulaire. Lorsque vous cliquez sur le bouton Email Tour Request, les est conçu pour
données du formulaire sont passées au fichier email_form.php. Si la page est observée fonctionner sur
dans un système PHP, un e-mail est généré et transmis à l’adresse e-mail ciblée dans le site web fictif
GreenStart, qui
le code PHP.
s’exécute sur un
Pour le moment, ce formulaire se contente de collecter les données et de les traiter serveur PHP. Pour
votre propre site
sous la forme d’un e-mail texte standard. Le destinataire doit accéder aux données et
web, insérez des
les traiter manuellement par la suite. Pour passer au stade d’automatisation suivant, adresses e-mail
modifiez signup.html avec Dreamweaver, de manière qu’il insère directement les prises en charge
informations dans une base de données hébergée sur le Web. par votre serveur
et adaptez le code
à vos besoins.

13:32:41 +0200 26/09/2012 10:27:41
Révisions
Questions
1. Quel est le rôle de la balise <form> ?
2. Que fait l’option Joindre une balise d’étiquette à l’aide de l’attribut For ?
3. Quel avantage les widgets de formulaire Spry possèdent-ils sur les objets de formulaire
standard ?
4. Qu’est-ce qui distingue un champ texte d’une zone de texte ?
5. Quelle est la principale différence entre les boutons radio et les cases à cocher ?
6. Comment indiquer que différents boutons radio appartiennent à un groupe ?
7. Que fait la balise <fieldset> ?
Réponses
1. La balise <form> entoure tous les éléments du formulaire et inclut un attribut action
qui définit le fichier ou le script chargé d’en traiter les données.
2. Elle relie la balise <label> à l’élément de formulaire qui possède une valeur d’ID
correspondante.
3. Les widgets de formulaire Spry facilitent la création d’éléments de formulaire. Ils
incluent une validation intégrée, afin de garantir que les données transmises possèdent
le format approprié et sont disponibles en cas de nécessité.
4. Le champ texte standard est destiné aux chaînes de caractères courtes, alors que la
zone de texte peut contenir plusieurs paragraphes.
5. Les boutons radio ne permettent d’effectuer que des choix exclusifs, alors que les
cases à cocher permettent à l’utilisateur de choisir autant d’options qu’il le souhaite.
6. Tous les boutons radio possédant le même nom se trouvent dans le même groupe
de boutons radio.
7. La balise <fieldset> est utilisée pour regrouper des champs de formulaire liés en les
entourant d’une bordure. La balise <legend> qui l’accompagne identifie le groupe.
Elle aide à organiser un formulaire et à clarifier le rôle de ses différents champs.

13:32:41 +0200 26/09/2012 10:27:41
le web est un environnement dynamique par nature. vous donnerez vie à
votre site en le connectant à des données en ligne à l’aide de Spry, d’ASP, de
ColdFusion ou de PHP.
334

13:32:41 +0200 26/09/2012 10:30:45
Travailler avec
des données
en ligne 13
Dans cette leçon, vous apprendrez à travailler avec des informations stockées
dans des tableaux et des bases de données, afin de réaliser les opérations
suivantes :
• créer du contenu dynamique à partir de tableaux HTML et d’ensembles
de données XML ;
• sélectionner un modèle de serveur ;
• configurer un serveur d’évaluation ;
• établir une connexion à une source de données.
Cette leçon vous prendra environ 1 heure et 30 minutes, en plus des 30 à

45 minutes requises pour créer un serveur web local si besoin. Avant de
commencer, assurez-vous d’avoir copié les fichiers pour la Leçon 13 sur
votre disque dur, comme indiqué dans la section “Guide de démarrage”, au
début de ce livre. Si vous commencez par cette leçon, utilisez la méthode
décrite dans la sous-section “Démarrage instantané” de la section “Guide
de démarrage”.
335

13:32:41 +0200 26/09/2012 10:30:45
Travailler avec du contenu dynamique
À l’exception de quelques composants Spry interactifs et d’un peu d’animations et
de vidéos HTML5, les pages que vous avez créées au cours des précédents exercices
sont principalement statiques, comme peuvent l’être du texte et des images sur une
feuille de papier. Le Web est pourtant un environnement éminemment dynamique.
La connexion directe à Internet place tout à portée de clic, du texte aux images en
passant par les animations ou les vidéos.
Un grand nombre des sites les plus populaires aujourd’hui proposent leur contenu par
le biais d’une interaction à double sens avec les visiteurs. Cette méthode “de requête et
de réponse” pour la livraison du contenu ne peut s’opérer par le biais du HTML. Elle
fait appel à des scripts et à différentes applications serveur prises en charge par des
langages comme Ajax, ASP, ColdFusion, JavaScript ou PHP, pour ne citer que ceux-là.
Cette technique requiert aussi des informations stockées sur Internet, généralement
sous la forme de tableaux ou de bases de données.
Récemment encore, les tableaux HTML étaient des conteneurs statiques. Mais Ajax
(Asynchronous JavaScript and XML) les a libérés de leur carcan. Dreamweaver peut
aisément exploiter la puissance d’Ajax, grâce au framework Spry et à quelques widgets
étonnamment efficaces. Pour le moment, vous n’êtes pas encore armé pour dévelop-
per des applications sophistiquées, mais il n’y a plus d’excuses à insérer des tableaux
statiques dans vos sites.

� Note : Si vous Afin de comprendre comment Ajax peut transformer les tableaux HTML, observons
commencez cette le fichier terminé :
leçon en partant
de zéro, utilisez 1. Si nécessaire, lancez Dreamweaver. Ouvrez events_finished.html dans le dossier
la méthode lesson13 et examinez les tableaux Events Calendar et Class Schedule.
décrite dans la
sous-section
“Démarrage
section “Guide de
démarrage”, au
début de ce livre.
336 leçon 13 Travailler avec des données en ligne

13:32:41 +0200 26/09/2012 10:30:46
Les deux tableaux sont constitués de deux lignes : une ligne d’en-tête et une ligne
de données. Observez les codes spéciaux dans la seconde ligne de chaque table,
comme {Date} et {Event}. Ce sont des composants de widgets Spry qui génèrent
dynamiquement des tableaux.
2. Observez la page en mode Affichage en direct.
Les codes spéciaux sont remplacés par des données provenant de sources externes
et des lignes supplémentaires sont automatiquement générées. Vous remarquerez
que le texte dans le tableau Events est trié en fonction de la date.
3. Cliquez sur la cellule d’en-tête de chaque colonne.
Les données dans le tableau sont triées en fonction de leurs valeurs dans la colonne.
4. Passez le curseur au-dessus de chaque ligne dans le tableau.
Lorsque le curseur survole chaque ligne, il change momentanément de couleur.
5. Cliquez sur une ligne dans le tableau, puis écartez-en le curseur.
La ligne sélectionnée change complètement de couleur et reste surlignée quand
le curseur s’en écarte.
6. Répétez les étapes 3 à 5 pour le tableau Class.
Le tableau Class possède les mêmes fonctionnalités que le tableau Events. Le tri interactif
des tableaux et les effets de survol et de sélection sont tous produits par des scripts Ajax.
Au prochain exercice, vous recréerez les mêmes effets et apprendrez à exploiter la
puissance d’Ajax avec Spry, afin de donner vie aux données stockées dans des tableaux
HTML et des fichiers XML.
Utiliser des données HTML et XML

Avant de pouvoir afficher des données dans vos pages web, vous devez définir une source
de données appropriée. Par le passé, cela impliquait de travailler avec des langages de

13:32:41 +0200 26/09/2012 10:30:46
programmation propriétaires comme ASP, ColdFusion et PHP. Ces langages puissants
sont toujours utilisés dans des milliers de sites web aujourd’hui. Vous en apprendrez
davantage à leur sujet plus loin dans cette leçon. Ajax a cependant révolutionné le
rôle des données dans de nombreux sites. Si puissants qu’ils soient, les langages clas-
siques ne sont cependant capables d’afficher des changements de données qu’après un
rechargement complet de la page. Ajax peut, lui, opérer des mises à jour en temps réel.
Cette capacité est activée à l’aide d’ensembles de données HTML et XML, ainsi que de
JavaScript. En HTML, les données sont stockées dans des tableaux. Les données XML
(eXtensible Markup Language) sont stockées dans un fichier de texte brut utilisant
une spécification normalisée pour le balisage du texte. Dans les prochains exercices,
vous allez travailler avec des ensembles de données HTML et XML.
Le HTML (à
gauche) et le XML
(à droite) stockent
leurs informations
de manière
différente, mais
tous les deux
peuvent être lus
et modifiés dans
Dreamweaver.
Travailler avec des données HTML

� Astuce : Les Jusqu’à l’avènement d’Ajax, les tableaux HTML étaient statiques et inutilisables par
tableaux HTML le reste du site web. Autrement dit, les données stockées dans un tableau de la page A
peuvent être
ne pouvaient pas être utilisées par la page B, à moins d’y être collées après avoir été
aisément créés à
partir de fichiers copiées, en totalité ou en partie. L’inconvénient de cette approche est évident. Dès
de feuilles de lors qu’on colle les données dans plusieurs pages, il faut mettre à jour chacune des
calcul ou de bases
pages à la main lorsque les données sont modifiées, ce qui prend du temps et ouvre
de données.
Pour plus la porte à toutes sortes d’erreurs. Avec le framework Spry d’Adobe, Dreamweaver
d’informations à peut maintenant récupérer des données de tableaux HTML de manière dynamique.
ce sujet, consultez
la Leçon 14, 1. Si nécessaire, lancez Dreamweaver et passez en mode Création. Ouvrez events.
“Créer des pages html dans le dossier racine du site.
dynamiques avec
des données”. Cette page contient deux tableaux HTML remplis de données. Pour le moment,
ces dernières sont statiques, mais, grâce au framework Spry et à ses fonctionnalités
Ajax, vous allez pouvoir les exploiter à diverses fins. La première étape consiste à
déplacer le tableau dans un document séparé.
2. Placez le curseur dans le tableau Events et cliquez sur le sélecteur de balises
<table#calendar>. Appuyez sur Ctrl+X/Cmd+X pour couper le tableau.
3. Choisissez Fichier > Nouveau. Choisissez Page vide > HTML > <aucune>. Cliquez
sur OK/Créer.

13:32:41 +0200 26/09/2012 10:30:47
Un nouveau document vide est créé.
4. Si nécessaire, placez le curseur dans la fenêtre en mode Création. Appuyez sur � Astuce : Si
Ctrl+V/Cmd+V pour coller le tableau. Insérez un nouveau paragraphe vide après vous copiez le
tableau en mode
le tableau.
Création, vous
Avant de pouvoir utiliser un tableau comme ensemble de données Spry, vous devez devez le coller en
mode Création
lui attribuer un ID unique. également.
5. Placez le curseur dans le tableau. Examinez les sélecteurs de balises.
Le sélecteur de balises affiche <table#calendar>.
6. Cliquez sur le sélecteur de balises <table#calendar> et examinez l’inspecteur
Propriétés.
Vous remarquerez que le champ ID affiche le texte calendar. Vous avez appliqué � Note : Vous
des ID aux deux tableaux à la Leçon 9, “Travailler avec les éléments de navigation”, remarquerez
peut-être
et l’ID a été préservé lorsque vous avez copié et collé le tableau dans ce fichier. qu’aucune des
7. Enregistrez le fichier sous le nom html-data.html dans le dossier racine du site. feuilles de style
attachées ne
Il n’existe pas de limite quant à la quantité de tableaux qu’un fichier peut contenir, contient une règle
mais n’en faites pas trop. Les fichiers surchargés de tableaux peuvent prendre plus #calendar.
Si les ID sont
de temps à télécharger et perturber l’usage du site au final. souvent utilisés
8. Cliquez sur l’onglet du document events.html pour le passer au premier plan. pour créer des
mises en forme,
Répétez l’étape 2 en coupant le tableau Class. Passez à html-data.html. Collez le cela ne nécessite
tableau Class dans le paragraphe vide sous le tableau Events. cependant pas
la création d’une
9. Enregistrez et fermez le fichier. règle.
10. Si nécessaire, cliquez sur l’onglet du document events.html pour passer le document
au premier plan. Placez le curseur à la fin du titre Green Events and Classes et � Note : L’ordre
des tableaux n’a
appuyez sur Entrée pour créer un nouveau paragraphe vide. pas d’incidence
sur l’utilisation
11. Ouvrez le panneau Insertion. Dans le menu Catégorie, choisissez Spry. Cliquez sur
que vous en ferez.
le bouton Ensemble de données Spry.
� Note :
Tâchez d’utiliser
des noms
La boîte de dialogue Ensemble de données Spry apparaît. d’ensembles de
données courts
12. Dans le menu Sélectionner le type de données, choisissez HTML.
et descriptifs,
Dans le champ Nom de l’ensemble de données, tapez ds_events. exempts d’espace.

13:32:41 +0200 26/09/2012 10:30:47
Dans le menu du champ Détecter, choisissez Tableaux.
Cliquez sur Parcourir et, dans le dossier racine du site, sélectionnez html-data.
html, puis cliquez sur Ouvrir/Choisir.
Un aperçu des sources de données dans html-data.html apparaît dans la fenêtre
Aperçu des données.
13. Dans le menu Conteneurs de données, situé en haut à droite de la boîte de dialogue,
choisissez Calendar. Cliquez sur le bouton Suivant en bas de la boîte de dialogue.
La boîte de dialogue Ensemble de données Spry affiche maintenant une fenêtre

pour définir des options de données. Dans cette fenêtre, vous pouvez identifier des
types de données spécifiques, comme du texte (Chaîne), des nombres, des dates et
du code HTML. Il est important d’identifier le type de données si vous souhaitez
les trier en fonction de certaines valeurs, comme la date ou le coût, ou les utiliser
pour d’autres besoins spécifiques.
14. Dans le menu Nom de colonne, choisissez Date. Dans le menu Type, choisissez
Chaîne.
Vous remarquerez que l’option Utiliser la première ligne comme en-tête est
sélectionnée. Si vous utilisez un tableau qui ne contient pas de ligne d’en-tête,
désélectionnez cette option.

13:32:41 +0200 26/09/2012 10:30:48
Types de données Spry
Le type de données approprié doit impérativement être choisi pour les opérations
de tri. Les types disponibles sont les suivants :
• Chaîne. Des données alphanumériques.

• Nombre. Des données numériques.
• Date. Une date complète, comme 13/06/2008 ou 13 juin 2008.
• html. Du texte balisé, comme les listes de cet exemple.
Vous aurez peut-être remarqué que la colonne Cost du tableau Events contient
des caractères alphabétiques et des caractères non alphabétiques. Si un champ
contient des caractères qui ne correspondent pas à ceux acceptés par le type de
données, vous devez choisir Chaîne dans le menu Type.
15. Dans le champ Colonne de tri, choisissez Date. Examinez l’ordre des données dans
la fenêtre Aperçu des données.
Vous remarquerez que la colonne est mal triée, puisqu’elle utilise l’orthographe
du mois pour opérer le tri. Vous allez corriger ce problème en modifiant son type
de données.
16. Cliquez sur la première ligne dans la colonne Date. Dans le menu Type, choisissez
Date. La colonne est maintenant correctement triée, en fonction de la date de
l’événement.
Pour les applications Spry, les dates peuvent être entrées dans deux formats
élémentaires : en épelant le mois, le jour et l’année (par exemple Jan (ou January)
1, 2011) ou en employant la notation numérique standard, comme 1/1/2011. La
boîte de dialogue Ensemble de données Spry ne reconnaît cependant pas les dates
écrites de la manière suivante : 1-1-2011. � Note : Pour
le moment, le
17. Cliquez sur la première ligne dans la colonne Event. Dans le menu Type, choisissez
choix du format
Chaîne. Sélectionnez la colonne Location. Dans le menu Type, choisissez Chaîne. Numérique pour
la colonne Cost
Il est maintenant temps d’attribuer le type de données à la colonne Cost. Vous
provoque une
aurez remarqué que la colonne Cost du tableau Events contient des caractéristiques erreur quand les
numériques et d’autres non numériques. Si un champ contient des caractères qui données sont
ne font pas partie de ceux acceptés par le type de données, vous devez choisir affichées, car la
colonne contient
Chaîne dans le menu Type. Pour cet exemple, vous allez attribuer le type Nombre. des données
Vous provoquerez une erreur au départ, mais nous opérerons des ajustements par non numériques.
la suite pour corriger cela. Avant de pouvoir
correctement
18. Sélectionnez la colonne Cost. Dans le menu Type, choisissez Nombre. Cliquez tester le fichier,
sur Suivant. vous allez devoir
supprimer le
La boîte de dialogue Ensemble de données Spry affiche maintenant les options signe dollar ($)
d’insertion pour l’ensemble de données. et tous les autres
caractères non
19. Cliquez sur le bouton Configurer à côté de l’option Insérer un tableau. numériques.

13:32:41 +0200 26/09/2012 10:30:49
La boîte de dialogue Ensemble de données Spry – Insérer un tableau apparaît.
Cette boîte de dialogue permet de spécifier quelles données seront affichées et
sous quelle forme. N’hésitez pas à faire des essais en supprimant ou en modifiant
l’ordre des colonnes de données et en spécifiant si elles peuvent être triées ou non.
20. Si nécessaire, cochez l’option Trier la colonne en cas de clic sur l’en-tête.
Dans le champ Classe de ligne impaire, tapez odd.
Dans le champ Classe de ligne paire, tapez even.
Dans le champ Classe de survol, tapez rowhover.
Dans le champ Sélectionner une classe, tapez rowselect. Cliquez sur OK.
Cette boîte de dialogue attribue des classes CSS pour mettre en forme le tableau
de manière interactive avec du JavaScript. Ces classes n’existent pas encore, sans
cela vous pourriez les sélectionner dans les menus. Vous allez les créer au prochain
exercice.
21. Cliquez sur Terminer.
Un espace réservé de tableau de données Spry à deux colonnes est inséré dans la page.
Certains des formats de l’espace réservé doivent correspondre à la mise en forme
par défaut des tableaux créée à la Leçon 7, “Travailler avec du texte, des listes et des
tableaux”. Le composant Spry est presque terminé, mais il requiert encore quelques
règles CSS personnalisées pour les classes que vous avez attribuées à l’étape 19.
Mettre en forme des tableaux Spry

Les effets paire/impaire, survol et sélection sont mis en forme à l’aide de règles CSS
invoquées par du code JavaScript. Ces règles n’existent pas encore. Vous allez aussi
devoir réappliquer certains des styles de tableau que vous avez créés à la Leçon 7.
1. Dans le panneau Styles CSS, sélectionnez la dernière règle dans mygreen_styles.
css. Cliquez sur l’icône Nouvelle règle de CSS.

13:32:41 +0200 26/09/2012 10:30:49
La nouvelle règle sera insérée à la fin de la feuille de style.
2. Dans le menu Type de sélecteur, choisissez Classe. Dans le champ Nom du sélecteur,
tapez odd. Cliquez sur OK.
3. Dans le champ Background-color, tapez #FFC et cliquez sur OK.
4. Créez une nouvelle classe CSS pour even. Attribuez-lui la couleur d’arrière-plan
#CFC.
5. Créez une nouvelle classe CSS pour rowhover. Attribuez-lui la couleur d’arrière-
plan #9C6.
6. Créez une nouvelle classe CSS pour rowselect. Dans le champ Color de la catégorie
Type, tapez #FFF. Attribuez-lui la couleur d’arrière-plan #990.
Une boîte de dialogue indiquera peut-être que des fichiers sont ajoutés au dossier
SpryAssets, afin d’activer la fonctionnalité Spry. Avant de tester la fonctionnalité
Spry, réappliquons la mise en forme pour les colonnes Date et Cost.
8. Si nécessaire, cliquez sur OK.
9. Placez le curseur dans l’en-tête de la colonne Date. Cliquez sur le sélecteur de balises
<th>. Dans le menu Classe de l’inspecteur Propriétés, choisissez w100.
10. Sélectionnez les cellules dans les deux lignes de la colonne Cost. Dans le menu
Classe, choisissez cost.
À la Leçon 9, “Travailler avec les éléments de navigation”, vous avez ajouté des
attributs d’ID aux deux tableaux afin de créer des destinations de liens hypertexte.
Vous devez ajouter ces attributs à vos nouveaux tableaux Spry.
11. Cliquez sur le sélecteur de balises <table>. Dans le champ ID de l’inspecteur des
propriétés, tapez calendar et appuyez sur Entrée.
La dernière étape consiste à recréer la légende du tableau. Les sélecteurs de balises
peuvent vous aider à localiser une portion spécifique de code lorsque vous travaillez
en mode Code.
12. Placez le curseur dans le tableau. Cliquez sur le sélecteur de balises <table#calendar>.
Passez en mode Code. Insérez le curseur directement après la balise d’ouverture
du tableau. Tapez <caption>2012-2013 Events Calendar</caption>.
13. Passez en mode Création. Enregistrez tous les fichiers.
14. Observez la page en mode Affichage en direct et testez le comportement du tableau.

13:32:41 +0200 26/09/2012 10:30:49
Lorsque vous cliquez sur les champs d’en-tête, le tableau est trié en fonction des données.
Les lignes survolées changent de couleur. Si vous cliquez sur une ligne individuelle
de données, la couleur de la ligne change complètement et le texte apparaît en blanc.
Le seul problème semble provenir de la colonne Cost, qui affiche un message d’erreur,
NaN (Not a Number, littéralement : “pas un nombre”). En effet, les données contiennent
des caractères non numériques et le tableau original n’a pas été conçu pour cet usage.
Vous allez devoir supprimer ces caractères du tableau de données pour finaliser le
composant.
Mettre à jour des données HTML

Vous pouvez corriger le tableau de données manuellement ou utiliser la commande
Rechercher/Remplacer de Dreamweaver.
1. Ouvrez html-data.html dans le dossier racine du site. Sélectionnez le signe dollar
($) dans la première ligne du tableau Events. Appuyez sur Ctrl+F/Cmd+F.
La boîte de dialogue Rechercher et remplacer apparaît. Le signe dollar ($) est déjà
entré dans le champ Rechercher.
2. Vérifiez que les options Document actif et Texte sont sélectionnées dans les menus.
Conservez le champ Remplacer vide et cliquez sur Remplacer.
Le signe dollar sélectionné est supprimé et Dreamweaver passe automatiquement

au suivant dans le fichier.
3. Continuez à cliquer sur Remplacer pour supprimer les signes dollar un par un ou
cliquez sur Remplacer tout pour les supprimer tous à la fois.

13:32:41 +0200 26/09/2012 10:30:50
Si vous cliquez sur Remplacer tout, Dreamweaver ferme la boîte de dialogue
Rechercher et remplacer. Pour l’étape suivante, vous devrez alors appuyer sur
Ctrl+F/Cmd+F pour la rouvrir.
4. Remplacez le texte Free par le nombre 0 (zéro). Remplacez le mot Donation par
nombre 0 (zéro).
5. Fermez la boîte de dialogue Rechercher et remplacer. Enregistrez et fermez html-
data.html.
6. Cliquez sur l’onglet du document events.html pour le passer au premier plan. Si
nécessaire, observez la page en mode Affichage en direct.
Maintenant que vous avez supprimé les caractères non numériques, les données
HTML s’affichent correctement. Les utilisateurs pourraient cependant être déroutés
par des prix affichés sans le signe dollar. Bien que le signe dollar soit incompatible
dans le fichier de données, une simple astuce permet de l’intégrer dans l’affichage final.
7. Revenez en mode Création. Insérez le curseur avant l’espace réservé de données
{cost}. Tapez $. L’espace réservé affiche maintenant ${cost}.
8. Observez le document en mode Affichage en direct.

Le signe dollar inséré avant l’espace réservé de données est automatiquement cloné
dans chaque ligne de données. N’oubliez pas cette astuce, qui peut servir à ajouter
toutes sortes de préfixes et de mentions introductives.
Les ensembles de données Spry peuvent également utiliser des données XML.
Travailler avec des données XML

Le XML est un langage de balisage étroitement lié au HTML. Il utilise le même sys-
tème de balises pour marquer le texte. En revanche, si le XML est dit extensible, c’est
parce qu’à la différence du HTML il vous permet de créer vos propres noms de balises.
Le langage a été inventé précisément pour répondre aux limitations du HTML en ce
qui concerne la gestion des données dans les applications web. Voici le moyen le plus
simple d’expliquer en quoi les deux langages diffèrent : le HTML a été conçu pour
afficher des données ; le XML a été conçu pour les définir.
En XML, les éléments de données sont imbriqués dans une paire de balises d’ouverture
et de fermeture, comme ceci :
<company>Meridien GreenStart</company>
Le XML peut être écrit à la main ou exporté depuis un certain nombre d’applications,
comme Access, Excel, FileMaker Pro ou des bases de données à grande échelle comme
Oracle et SQL Server. Les bases de données non propriétaires (comme MySQL) sont très
populaires sur le Web et, elles aussi, compatibles avec le XML. Vous en apprendrez plus
sur les autres types d’applications de base de données web plus loin dans cette leçon.

13:32:41 +0200 26/09/2012 10:30:50
Les ensembles de données Spry peuvent indifféremment utiliser des données XML ou
des tableaux de données HTML.
1. Si nécessaire, ouvrez events.html. En mode Création, insérez un nouveau paragraphe
après le premier lien hypertexte Return to Top.
L’ensemble de données XML doit être inséré en dehors de l’élément <div>, qui
contient l’ensemble de données HTML. Les ensembles de données Spry imbriqués
ne sont pas autorisés dans Dreamweaver.
2. Dans le panneau Insertion, cliquez sur le bouton Ensemble de données Spry.
La boîte de dialogue Ensemble de données Spry apparaît.
3. Dans le menu Sélectionner le type de données, choisissez XML. Dans le champ
Nom de l’ensemble de données, tapez ds_classes. Parcourez votre système et
sélectionnez classes.xml dans le dossier lesson13 > resources.
La boîte de dialogue Spécifier la source de données apparaît et affiche la structure
des données XML. La fenêtre présente une liste de balises XML (ou d’éléments)
contenus dans le fichier. La première balise est <dataroot>, qui correspond à
la racine ou au parent principal, autrement dit l’élément qui contient toutes les
données. L’élément suivant est <classes> et la mise en retrait des autres balises
indique qu’il s’agit du parent du reste des éléments. Le signe plus (+) sur l’élément
indique que le fichier contient deux classes ou plus.
4. Sélectionnez la balise classes et observez la fenêtre Aperçu des données. Cliquez
sur Suivant.
L’écran Définir les options de données apparaît.

5. Pour le type de données des quatre premières colonnes, choisissez Chaîne. Pour
le type de données de la colonne Cost, choisissez Nombre. Dans le menu Colonne
de tri, choisissez Class.
Ce fichier ne contient pas de données de date. L’ensemble du contenu peut être
traité comme du texte ou des nombres.

13:32:41 +0200 26/09/2012 10:30:51
6. Cliquez sur Suivant. Cliquez sur Configurer à côté de l’option Insérer un tableau.
7. Assurez-vous que la case Trier la colonne en cas de clic sur l’en-tête est cochée.
Dans le champ Classe de ligne impaire, tapez ou sélectionnez odd.
Dans le champ Classe de ligne paire, tapez ou sélectionnez even.
Dans le champ Classe de survol, tapez ou sélectionnez rowhover.
Dans le champ Sélectionner une classe, tapez ou sélectionnez rowselect. Cliquez
sur OK.
En sélectionnant les noms des classes, vous éviterez les fautes de frappe lors de la
saisie des noms. Comme les classes CSS existent déjà, le nouveau tableau devrait
être prêt à fonctionner.
8. Cliquez sur Terminé.
Le tableau XML Spry est inséré dans la page, avec des espaces réservés pour les
données. Avant de l’observer, ajoutons la légende originale.
9. Placez le curseur dans le tableau XML Spry. Cliquez sur le sélecteur de balises
<table>. Passez en mode Code et ajoutez le code suivant après la balise <table>
d’ouverture :
<caption>2012-2013 Class Schedule</caption>
10. Enregistrez tous les fichiers et observez la page en mode Affichage en direct.
Les deux tableaux affichent les données appropriées et se comportent comme dans
l’exemple observé au début de la leçon.
Les ensembles de données Spry sont un outil puissant pour importer et afficher dyna-
miquement des données HTML et XML, mais il ne s’agit pas d’une solution idéale. Si
Ajax rend dynamique l’affichage des données, les fichiers de données ne le sont pas. Pour
commencer, il n’existe pas de méthode native pour mettre à jour des données HTML
et XML qui changent rapidement, comme des scores en sport ou des bulletins météo.
Au lieu de cela, les développeurs stockent généralement leurs données dans des bases
de données classiques, puis génèrent des fichiers HTML et XML avec des scripts
personnalisés, soit périodiquement, soit interactivement, à la demande. Ce type de
système hybride regroupe les avantages des deux techniques et de nombreux sites
utilisent ce modèle aujourd’hui. Si bien des sites ont définitivement franchi le pas vers
Ajax, un grand nombre utilisent encore ASP, ColdFusion et PHP. Dans les exercices
qui suivent, vous allez découvrir comment fonctionnent certains de ces puissants
outils et fonctionnalités.

13:32:41 +0200 26/09/2012 10:30:51
Choisir un modèle de serveur
Si vous décidez de créer des applications web dynamiques, l’un des premiers choix
que vous devez opérer avant d’écrire la moindre ligne de code est celui du modèle de
serveur que vous utiliserez pour le site. Nombre de facteurs peuvent entrer en ligne
de compte dans cette décision, comme l’objectif du site, le type d’application que vous
souhaitez développer, le coût du modèle de serveur et même le type de base de données
que vous pensez utiliser. Dans certains cas, le choix de la base de données peut décider
de celui du serveur. Dans d’autres, ce peut être exactement l’inverse.
L’emploi d’une base de données Access conduira plus naturellement vers le modèle
de serveur ASP, qui s’exécute sur les systèmes d’exploitation Windows Server. En
revanche, les bases de données MySQL, généralement combinées à ColdFusion ou
au PHP, peuvent tourner sans problème sur tous les serveurs. Voici un aperçu rapide
des principaux modèles de serveur que vous devez garder à l’esprit au moment de
faire votre choix.
ASP (Active Server Pages) est une technologie Microsoft qui s’exécute de manière
native sous Windows. Dreamweaver propose des comportements de serveur pour
ASP en Visual Basic (VBScript), mais pas en JavaScript. Certains considèrent que cette
technologie est difficile à comprendre et à utiliser, mais elle est incluse gratuitement
avec le serveur IIS (Internet Information Services) de Microsoft, ce qui signifie que tous
les utilisateurs Windows peuvent immédiatement créer des applications, moyennant
une rapide configuration supplémentaire. Il est aussi possible d’utiliser ASP.NET, le
successeur d’ASP spécifiquement développé pour corriger certaines des limitations
d’ASP et augmenter la vitesse et la puissance des applications web. Dreamweaver ne
propose plus de comportements serveur pour ASP et ASP.NET, même si vous pouvez
continuer de programmer et tester ces pages manuellement dans le programme.
ColdFusion est une technologie serveur d’Adobe qui utilise une syntaxe à balises que
beaucoup d’utilisateurs trouvent plus simple à apprendre et à utiliser qu’ASP ou PHP.
Dans bien des cas, ColdFusion requiert moins de lignes de code, ce qui offre des avan-
tages durant le développement et le déploiement des applications. À la différence des
autres technologies serveur décrites ici, ColdFusion n’est pas gratuit, même si certains
utilisateurs considèrent que les gains en productivité justifient ce coût supplémentaire.
ColdFusion peut s’exécuter sur les serveurs Windows, Linux/Unix et Macintosh. Pour

13:32:41 +0200 26/09/2012 10:30:51
un démarrage rapide, il suffit de télécharger et d’installer l’édition Développeur gra-
tuite de ColdFusion, qui permet de créer localement un site dynamique entièrement
opérationnel, avant de le placer sur Internet.
PHP (PHP Hypertext Processor), initialement connu comme l’acronyme de Personal
Home Page, est maintenant l’un des langages les plus populaires du Web. Il est gratuit
et fonctionne bien avec une variété de bases de données et d’autres services. Son niveau
de difficulté s’apparente à celui d’ASP, mais, grâce à sa popularité, on peut trouver un
nombre considérable de ressources pour obtenir des exemples de code ou du support,
le plus souvent aussi gratuitement.
Configurer un serveur web local

Il existe deux moyens de tester des pages dynamiques. Vous pouvez les placer sur votre
espace d’hébergement web et les tester directement sur Internet, ou bien tester les
fichiers sur votre ordinateur personnel avant de les charger. Si rien ne peut surpasser la
fidélité de rendu des serveurs Internet qui hébergeront votre site web, le serveur local
offre toutefois des avantages, à la fois en termes de vitesse et de sécurité. Il permet de
travailler hors connexion, sans être relié directement à Internet.
Avant de pouvoir tester l’une des pages web dynamiques que vous allez créer à la
prochaine leçon, vous devez commencer par installer les applications et les compo-
sants requis pour un serveur web local. Ce processus est fastidieux et souvent source
d’erreurs. Il implique de nombreuses étapes critiques pour charger et configurer tous
les aspects de l’environnement désiré. Ce sujet sort du cadre de ce livre, mais il existe
de nombreuses ressources pour vous aider dans cette tâche. Voici quelques exemples.
Livre en anglais :
• Adobe Dreamweaver CS3 with ASP, ColdFusion, and PHP: Training from the Source,
Jeffrey Bardzell and Bob Flynn, Adobe Press (2007).
En ligne :
• ASP et IIS : tinyurl.com/ setup-asp ou tinyurl.com/ IIS-setup
• ColdFusion : tinyurl.com/setup-ColdFusion
• PHP : tinyurl.com/setup-apachephp
Les exemples spécifiques présentés dans les exercices suivants utilisent les serveurs
web Windows/Macintosh Apache MySQL PHP (WAMP/MAMP), aussi est-ce sans
doute plus simple de les adopter. Téléchargez WAMP à l’adresse tinyurl.com/WAMP-
setup. Téléchargez MAMP à l’adresse tinyurl.com/MAMP-setup. Un autre serveur
web Windows appelé XAMPP est aussi disponible et mentionné dans plusieurs des
liens fournis dans cette leçon. Pour le télécharger et le tester, rendez-vous à l’adresse
tinyurl.com/XAMPP-server.
Bien que les exercices aient été créés pour les environnements WAMP/MAMP,
il est possible d’installer et d’utiliser un serveur ASP ou ColdFusion également.

13:32:41 +0200 26/09/2012 10:30:52
Malheureusement, nous ne proposerons pas d’aide dans les exercices pour adapter
les instructions à ces serveurs. Vous serez alors rendu à vous-même.
configurer un serveur d’évaluation

� Note : les Pour observer et tester des pages dynamiques, vous devez vous connecter à un serveur
serveurs internet d’évaluation dans Dreamweaver. “Serveur web local” et “Serveur d’évaluation” sont
requièrent
généralement une
deux expressions similaires, mais elles ne sont pas identiques. Un serveur de test n’est
authentification qu’une connexion à un serveur d’hébergement web (qu’il soit local ou sur Internet)
avec un nom où des fonctionnalités dynamiques peuvent être “testées”. Vous pouvez utiliser votre
d’utilisateur
propre serveur web local, que vous devriez maintenant avoir installé, ou utiliser le
et un mot de
passe, que vous serveur web sur lequel vous comptez publier votre site final.
devez obtenir
Lorsque vous choisissez de tester une page particulière, Dreamweaver copie les fichiers
au préalable
auprès de votre nécessaires sur le serveur d’évaluation et charge le document dans un navigateur ou
administrateur de en mode Affichage en direct.
serveur.
Le serveur d’évaluation est configuré dans la boîte de dialogue Configuration de site
de Dreamweaver.
1. Choisissez Site > Gérer les sites.
2. Dans la boîte de dialogue Gérer les sites, sélectionnez DW-CS6. Cliquez sur Modifier.
3. Cliquez sur la catégorie Serveurs.
Si vous disposez déjà d’un serveur configuré, cochez la case de la colonne Évaluation
dans la liste des serveurs, afin de l’identifier comme serveur d’évaluation. Pour les
besoins des exercices suivants, nous partirons du principe que vous avez choisi et
configuré PHP/MySQL comme modèle de serveur et que vous utilisez un serveur
web local Apache pour tester les pages sur votre ordinateur.
� Note : les
serveurs wAmP/
mAmP sont
gratuits, faciles
à configurer et
compatibles avec
les ordinateurs
windows et
mac oS X.
� Note : votre
ordinateur traitera
le serveur web
local comme s’il
s’agissait d’un
windows. macintosh.
serveur web en
ligne et tous les
sites situés à 4. Cliquez sur le bouton Ajouter nouveau serveur en bas de la liste des serveurs.
l’intérieur comme
s’ils se trouvaient 5. Nommez le serveur PHP-Test. Dans le menu Se connecter au moyen de, choisissez
sur internet. Local/Réseau.

13:32:41 +0200 26/09/2012 10:30:52
6. Cliquez sur le bouton Parcourir à droite du champ Dossier du serveur. Sous Windows,
naviguez jusqu’à C:\wamp\www. Sous OS X, naviguez jusqu’à Applications/MAMP/
htdocs. Naviguez jusqu’au dossier MAMP/htdocs (sous Windows, ce dossier sera
probablement nommé WAMP/www).
� Astuce :
7. Créez un nouveau dossier et nommez-le DWCS6-Test. Si nécessaire, double-cliquez Les serveurs
sur le nouveau dossier pour l’ouvrir. Cliquez sur Sélectionner/Choisir. Windows ne sont
pas sensibles à
la casse, aussi
peut-on se passer
des capitales
pour les noms
de dossiers et
de fichiers. Les
serveurs Linux/
Pour les utilisateurs Windows, le chemin est C:\wamp\www\DWCS6-Test. Pour Unix, eux, le sont.
les utilisateurs Mac, le champ Dossier du serveur affiche le chemin Applications/ Il est judicieux
MAMP/htdocs/DWCS6-Test. de relever par
écrit vos noms
� Astuce : Si vous utilisez votre serveur web réel comme serveur d’évaluation, entrez l’URL de de fichiers ou de
votre site web à cet endroit. Par exemple : http://www.green-start.org. dossiers, ou bien
de n’utiliser que
des minuscules
8. Tapez le chemin vers le site d’évaluation dans le champ URL Web.
pour éviter
Pour le WAMP PHP, l’URL par défaut sera probablement http://localhost/ les erreurs de
serveur lors du
DWCS6-Test.
chargement des
Pour le serveur d’évaluation MAMP PHP, l’URL par défaut sera probablement pages et fichiers
http://Localhost:8888/DWCS6-Test. Pour les autres types de modèles de serveur, de test.
l’URL peut être différente. Entrez l’URL appropriée pour votre serveur. Si elle
n’est pas correcte, il se peut que la page ne se charge pas correctement dans votre � Note : Avec
les serveurs PHP
serveur local. et ColdFusion, il
9. Cliquez sur le bouton Avancé. se peut que vous
deviez inclure le
La boîte de dialogue affiche les options de configuration avancées. numéro de port
dans l’URL pour
10. Dans le menu Modèle de serveur, choisissez PHP MySQL. permettre la
connexion.
� Note : S’il est

possible de définir
et de configurer
plusieurs serveurs
dans la boîte
de dialogue
Définition du site
de Dreamweaver
CS6, seul
un serveur
d’évaluation et
un serveur distant
peuvent être actifs
à la fois. Vous
11. Cliquez sur Enregistrer. n’avez pas besoin
d’utiliser le même
12. Cochez l’option Évaluation dans la catégorie Serveurs pour activer le serveur
serveur pour les
d’évaluation. deux.

13:32:41 +0200 26/09/2012 10:30:53
13. Cliquez sur Enregistrer pour refermer la boîte de dialogue Configuration de site.
Dreamweaver vous proposera sans doute de reconstruire le cache. Cliquez sur OK.
14. Cliquez sur Terminé pour refermer la boîte de dialogue Gérer les sites.
Votre serveur d’évaluation pour PHP est maintenant configuré. Bien qu’il soit destiné
à un langage spécifique, d’autres langages de script peuvent également être pris en
charge, selon la configuration du serveur. Comme vous l’aurez remarqué à l’étape 10
dans le menu, Dreamweaver prend en charge les principaux modèles de serveur. On ne
saurait surestimer l’importance du choix initial du modèle de serveur. Si vous décidez
de changer de modèle de serveur une fois que vous aurez commencé à créer vos pages,
vous devrez presque immanquablement tout reprendre depuis le début.
Créer des applications de base de données

Toutes ces applications ont une chose en commun. Elles requièrent une base de
données d’une sorte ou d’une autre. Les applications de base de données peuvent être
autonomes ou hébergées sur un serveur. Les applications autonomes, comme Access
ou FileMaker Pro, sont généralement accessibles par un seul utilisateur à la fois, dans
un environnement de bureau. Dans certains cas, plusieurs utilisateurs peuvent être
autorisés à accéder aux données, mais le nombre total d’utilisateurs simultanés est,
en tout cas, réduit. Les bases de données serveur (comme DB2 d’IBM, Oracle et SQL
Server) sont bien plus robustes et peuvent aisément héberger des milliers de requêtes
d’information simultanées. Cette puissance se paie toutefois à prix d’or. Entre ces deux
options figure cependant une option intermédiaire populaire, MySQL, qui propose
gratuitement des capacités serveur. Une version MySQL d’entreprise, plus robuste,
est également disponible, mais elle est payante. Pour en apprendre plus à son sujet,
rendez-vous à l’adresse tinyurl.com/products/enterprise/.
Les deux types de bases de données peuvent être utilisés pour créer des applications
dynamiques sur Internet. Votre choix dépend principalement du type de données et
de la quantité d’informations à stocker, du nombre d’utilisateurs qui accéderont aux
données en même temps et du coût. Si le nombre d’utilisateurs simultanés doit se
situer entre 1 et 1 000, une application de base de données autonome peut convenir. En
revanche, si vous tentez de créer le nouvel Amazon.com, vous devrez vous concentrer
exclusivement sur les applications serveur.
Par chance, avec cet exercice, Dreamweaver propose une interface quasiment identique
avec les bases de données autonomes et serveur.
Principes fondamentaux pour la

conception des bases de données
Une base de données est comparable à une feuille de calcul. Les données sont stockées
dans une série de colonnes et de lignes appelée table, à la manière des tableaux que
vous avez créés en HTML et avec Spry. Les feuilles de calcul fournissent généralement
les noms des colonnes et des lignes pour vous, en utilisant des lettres pour les colonnes

13:32:41 +0200 26/09/2012 10:30:53
(A, B, C) et des nombres pour les lignes (1, 2, 3). Les bases de données diffèrent sur
ce point, puisqu’il faut que vous y indiquiez les noms des colonnes (ou champs). Les
lignes (ou enregistrements) sont généralement distinguées par des numéros uniques,
appelés aussi ID. Certaines bases de données les désignent comme des clés uniques, des
clés primaires ou, tout simplement, des clés. Les clés permettent à votre application de
données de récupérer des enregistrements spécifiques ou des jeux d’enregistrements.
Les bases de données simples stockent toutes les informations collectées dans une les feuilles de
table unique, que l’on appelle un fichier plat. Le fait d’utiliser une seule table pour calcul (à gauche)
et les bases de
toutes les données conduit souvent à en dupliquer certaines, entrées plusieurs fois ;
données (à droite)
par exemple lors de nouvelles commandes d’anciens clients. Le nom, l’adresse et le ont beaucoup
numéro de téléphone du client sont ainsi entrés dans la même table à chaque nouvelle en commun et
peuvent réaliser
commande. Ce type de données redondantes alourdit inutilement la base de données et
des tâches
peut provoquer des erreurs au bout d’un certain temps, par exemple si une commande similaires.
est livrée à une adresse indiquée dans une commande précédente.
L’un des moyens d’empêcher la duplication des données consiste à déplacer certains
types de données dans leurs propres tables, puis à lier les différentes tables les unes
aux autres. Ce processus de liaison des tables est la marque des bases de données
relationnelles, un système de stockage des informations extrêmement efficace.
Généralement, les bases de données relationnelles stockent séparément les informa-
tions clients et produits, puis les regroupent dans une table des commandes qui tient
registre des produits commandés par chaque client. Si une modification est apportée
à un enregistrement de client ou de produit, elle n’a donc besoin d’intervenir qu’à un les bases
endroit, pour que toutes les occurrences concernées soient instantanément mises à de données
jour. Toutes les bases de données populaires utilisées aujourd’hui prennent en charge relationnelles
stockent des
ces types de relations. informations
dans des tables
séparées et
les associent
au moyen
de relations
logiques. Cette
méthode évite
la duplication
des données et
permet à la base
de données de
En général, une base de données en ligne est stockée dans un sous-dossier du site web fonctionner plus
cible, auquel il est possible d’accéder depuis n’importe quelle page du site. Les bases efficacement.
ADobe DreAmweAver CS6 ClASSroom in A book 353

13:32:41 +0200 26/09/2012 10:30:54
de données peuvent proposer différents types d’informations, des descriptions ou des
prix de produits aux noms et adresses de clients, en passant par des blocs complets
de contenu éditorial du site. Si certaines bases de données sont configurées en lecture
seule (les données n’étant servies que dans un sens), la plupart des bases de données en
ligne sont à la fois capables de servir et de capturer des données, pour une puissance
et une flexibilité maximales.
La conception et la construction d’une base de données web est un sujet complexe qui
implique bien des questions qui dépassent la portée de ce livre. Vous pouvez obtenir
une grande partie des informations sur ce sujet en consultant une variété de ressources
en ligne. Malheureusement, une grande partie de ces documents sont écrits par et
pour les informaticiens et ne sont pas faciles à assimiler pour les concepteurs web
ou les utilisateurs d’ordinateur standard. Si possible, tâchez de commencer par des
applications autonomes comme Access de Microsoft ou FileMaker Pro d’Apple afin
de vous familiariser avec ces outils. La conception et l’édition d’une base de données
relationnelle est généralement assez simple dans ces applications et bien plus facile
en phase d’apprentissage. Il existe des utilitaires peu coûteux capables de convertir
des fichiers de base de données de ces applications autonomes en véritables bases de
données MySQL fonctionnelles avec bien moins de temps, d’effort et de frustration
qu’il n’en faudrait pour en créer de toutes pièces.
� Note : Dans Pour les besoins des exercices qui suivent, nous avons fourni une base de données
certains cas, la MySQL complète contenant plusieurs tables de données dans le dossier mysql >
base de données
sera stockée dans
greendata du CD-ROM d’accompagnement de ce livre. Vous devrez copier le dossier
votre propre site. greendata à l’emplacement approprié sur votre serveur web local ou sur votre hôte
Dans d’autres, distant avant de pouvoir accéder à ces données. Pour le serveur WAMP s’exécutant
elle pourra être
sous Windows, le dossier devrait être wamp > bin > mysql5.5.20 > data > mysql. Sous
hébergée par le
serveur lui-même Mac OS X, il s’agira sans doute de MAMP > db > mysql. Consultez les fichiers d’aide
et stockée dans fournis avec votre propre version de serveur pour déterminer le bon emplacement. Le
un emplacement dossier de base de données doit être correctement copié, sans quoi il ne fonctionnera
auquel vous
n’aurez pas tout simplement pas.
forcément accès.
Renseignez-vous
plus précisément
Se connecter à une base de données
sur votre Une fois que votre base de données est créée, correctement chargée et configurée, vous
configuration
auprès de votre
devez y connecter chaque page dynamique avant de pouvoir accéder aux données.
administrateur Chaque modèle de serveur propose des méthodes spécifiques pour la connexion à une
informatique base de données. Pour nos exercices, nous nous en tiendrons au modèle MySQL/PHP
ou de votre
avec l’environnement WAMP/MAMP évoqué précédemment.
prestataire de
services.
Connexion à MySQL
Dans un environnement PHP/MySQL, les connexions de base de données sont gérées
par des scripts personnalisés ou des fichiers de configuration situés sur votre disque
dur ou sur le serveur. Ces scripts et fichiers de configuration gèrent la connexion et
toutes les informations d’authentification d’utilisateur requises.

13:32:41 +0200 26/09/2012 10:30:54
Il existe de nombreux moyens d’écrire le code pour ces éléments, selon le modèle
de serveur et la base de données spécifiques. Le mieux est donc de consulter votre
administrateur de serveur ou votre équipe de support IT pour connaître la syntaxe
appropriée. Bien souvent, Dreamweaver pourra vous aider à créer les fichiers indis-
pensables et à écrire le code nécessaire. Dans cet exercice, vous allez vous connecter
à une base de données MySQL sur un modèle de serveur PHP.
1. Avant de tenter de terminer cet exercice, vous devez installer et configurer les fichiers
et composants nécessaires pour un serveur PHP et une base de données MySQL.
Le dossier principal Lessons du CD-ROM d’accompagnement de ce livre contient
un dossier MySQL contenant la base de données greendata pour les prochains
exercices. Copiez ce dossier de base de données sur le serveur d’évaluation, comme
le requiert votre installation de serveur PHP/MySQL. Une fois l’installation et la
configuration effectuées, assurez-vous que les modules MySQL et PHP sont lancés
et en cours d’exécution avant de passer à l’étape suivante.
Voici une page
de démarrage
d’exemple pour
une installation
MAMP sous Mac
OS X. L’URL de
cette page de
démarrage affiche
le port :8888 pour
le serveur Apache
MAMP et la page
elle-même affiche
le port :8889 pour
le serveur de
base de données
MySQL. Notez
le nom d’hôte,
les ports et les
autres réglages de
configuration qui
apparaissent dans
votre propre page
de démarrage.
Vous aurez
besoin de ces
� Astuce : Sous Windows, le dossier de la base de données greendata situé sur le CD-ROM sera renseignements
généralement copié dans le dossier wamp > bin > mysql5.5.20 > data > mysql. Sous OS X, il s’agira pour vous
du dossier MAMP > db > mysql. Votre installation peut cependant utiliser un chemin différent. connecter à votre
serveur et votre
base de données
2. Si nécessaire, définissez et configurez un serveur d’évaluation dans Dreamweaver
si vous utilisez
pour PHP/MySQL comme indiqué précédemment dans cette leçon. Mac OS X.
La configuration PHP/MySQL doit pointer sur le dossier de votre disque dur, qui
contiendra votre contenu web sur le serveur d’évaluation. Sous Windows, il s’agit
généralement de www. Sur Mac, il s’agit de htdocs. Sur votre serveur, le nom peut
être différent.

13:32:41 +0200 26/09/2012 10:30:55
� Note : Il est 3. Lancez le serveur.
possible qu’un
autre serveur
web local soit
déjà installé et
tourne sur votre
ordinateur. Dans
la plupart des cas,
WAMP et MAMP
ne fonctionneront
pas normalement
(voire pas du tout)
tant que vous
n’aurez pas fermé
ou désinstallé le
serveur existant.
4. Créez une nouvelle page à partir du modèle du site.

Les bases de données MySQL peuvent être utilisées par tous les principaux modèles
de serveur. Dans cet exercice, vous utiliserez la technologie PHP.
5. Enregistrez la page dans le dossier racine sous le nom products.php.
6. Si nécessaire, choisissez Fenêtre > Bases de données pour ouvrir le panneau Bases
de données.
Dans le panneau Bases de données, vérifiez si l’icône plus ( ) est sélectionnable
ou si elle est grisée. Si l’icône est grisée, vous ne pourrez pas connecter cette page
à la base de données. Le fait d’ajouter l’extension .php au nom du fichier ne suffit
pas forcément pour vous permettre d’activer la fonctionnalité dynamique du
serveur web local. Pour plus d’informations, consultez l’encadré “Ajustement des
extensions”. Sinon passez à l’étape 7.
� Note : Aucun
mot de passe n’est 7. Cliquez sur l’icône plus ( ) dans le panneau Bases de données et choisissez
utilisé dans notre Connexion MySQL.
exemple avec
WAMP. Fermez La boîte de dialogue Connexion MySQL apparaît.
toutes les boîtes
de dialogue qui 8. Dans le champ Nom de la connexion, tapez Local_PHP. Entrez le nom de votre
vous avertissent serveur (en général localhost), votre nom d’utilisateur et votre mot de passe.
au sujet du mot
de passe. Sous Windows, la base de données greendata requiert le nom d’utilisateur root
et aucun mot de passe. Sous Mac avec MAMP, le nom d’utilisateur est root et le
� Note : Sous mot de passe, root.
Mac, vous devrez
probablement 9. Si les informations de connexion sont correctes, vous devriez pouvoir choisir la base
inclure le numéro de données greendata en cliquant sur le bouton Sélectionner de la boîte de dialogue.
de port dans le
champ Serveur
MySQL pour que
la connexion
fonctionne
correctement,
comme
localhost:8888.

13:32:41 +0200 26/09/2012 10:30:55
Ajustement des extensions
En général, lorsque vous tentez d’enregistrer un nouveau document, Dreamweaver ajoute l’extension .html
par défaut. L’extension .html convient pour les pages web standard mais pas pour les pages dynamiques
qui utilisent des fonctionnalités ASP, ColdFusion ou PHP. Si vous utilisez la mauvaise extension, vous
ne pourrez pas vous connecter à votre source de données ou exécuter d’autres types de langages de
programmation. L’ajout manuel d’une extension peut fonctionner, mais il existe un moyen de forcer
Dreamweaver à utiliser l’extension qui convient à votre modèle de serveur.
1. Assurez-vous que vous possédez une définition de site et un serveur test pour le modèle de serveur
désiré.
2. Créez un nouveau document à partir du modèle du site.
3. Avant de l’enregistrer, ouvrez le panneau Comportements de serveur.
4. Cliquez sur le lien Type de document qui apparaît dans le panneau.
5. Lorsque la boîte de dialogue Choisir le type de document apparaît, choisissez PHP ou le type de
document qui convient dans le menu déroulant et cliquez sur OK.

Lorsque la boîte de dialogue Enregistrer sous apparaît, Dreamweaver demande un nom pour le nouveau
document et y ajoute automatiquement l’extension appropriée.

13:32:41 +0200 26/09/2012 10:30:56
� Astuce : Si 10. Cliquez sur Tester.
vous recevez un
message d’erreur
après cette étape,
vérifiez si le
serveur WAMP/
MAMP est lancé.
Si c’est le cas,
vérifiez que vous
utilisez le nom
d’utilisateur et
le mot de passe
exacts pour la
Si tout fonctionne correctement, Dreamweaver signale que la connexion à la base
base de données.
de données a réussi.
11. Cliquez sur OK. Examinez le panneau Bases de données.
Le panneau Bases de données affiche le nom de votre connexion de base de données.
12. Déroulez la liste des éléments de la base de données.
La liste affiche les procédures stockées, les tables et les vues contenues dans la
base de données.
Dans cette leçon, vous avez appris à travailler avec des données HTML et XML. Ensuite,
vous avez découvert d’autres types d’applications de base de données et avez sélectionné
un modèle de serveur, configuré un serveur d’évaluation et créé une connexion de base
de données. Vous avez développé les fondations d’un site web dynamique en PHP. À
la leçon suivante, vous utiliserez cet environnement pour créer des pages dynamiques.
Considérez bien que, si vous installez et faites tourner correctement le serveur web
local et la base de données MySQL, vous aurez accompli la tâche la plus ardue de la
configuration de votre site web dynamique.

13:32:41 +0200 26/09/2012 10:30:57
Révisions
Questions
1. Quel avantage Ajax/Spry possède-t-il sur les applications de données traditionnelles ?
2. Vrai ou faux : le XML est une méthode pour le stockage des données dans un fichier
de texte brut à utiliser dans les applications web.
3. Qu’est-ce qu’un modèle de serveur ?
4. Qu’est-ce qu’un serveur d’évaluation ?
5. Vous avez un fichier compatible avec votre modèle de serveur (.asp, .cfm ou .php),
mais votre base de données n’apparaît pas dans le panneau Bases de données.
Comment faire réapparaître la connexion dans le panneau ?
6. Vrai ou faux : la base de données MySQL ne peut être utilisée que sur les plates-
formes serveur Linux/Unix et Mac OS X.
Réponses
1. Les applications Ajax/Spry évitent de recharger la page entière. Elles peuvent mettre
à jour des données en temps réel.
2. Vrai. Le XML est analogue au HTML et sert à identifier des données.
3. Le modèle de serveur est l’environnement de base utilisé pour créer des applications
web dynamiques. Il inclut aussi des langages de programmation spécifiques et des
modèles de script, comme ASP, ColdFusion et PHP.
4. Un serveur d’évaluation est un serveur sur lequel des pages dynamiques sont testées
avec un modèle de serveur compatible. Il est configuré dans la boîte de dialogue
Configuration de site.
5. Examinez le panneau Bases de données et les étapes affichées pour se connecter à
votre source de données. Complétez toutes les étapes qui ne sont pas cochées. La
source de données devrait ensuite s’afficher de nouveau.
6. Faux. MySQL peut être utilisé sur n’importe quel serveur web.

13:32:41 +0200 26/09/2012 10:30:57
Dreamweaver contient des fonctionnalités intégrées pour vous aider à créer
des pages web riches, dynamiques et pilotées par des données à l’aide d’outils
simples et maniables.
360

13:32:41 +0200 26/09/2012 10:31:01
Créer des pages
dynamiques avec
des données 14
Dans cette leçon, vous apprendrez à créer dynamiquement du contenu de
page web en utilisant des informations stockées dans des tables et des bases
de données, afin de réaliser les opérations suivantes :
• créer un jeu d’enregistrements à partir de données en ligne ;
• insérer dynamiquement des données dans une page web ;
• créer un ensemble de pages maître/détails ;
• créer un lien dynamique depuis la page maître vers la page de détails.

commencez par cette leçon, avant de démarrer, vous devez d’abord com-
pléter les portions de la Leçon 13 qui détaillent l’installation d’un serveur
web local, configurer la base de données MySQL et une connexion à la base
de données greendata fournie sur le CD-ROM d’accompagnement de ce
livre. Ensuite, utilisez la méthode décrite dans la sous-section “Démarrage
instantané” de la section “Guide de démarrage”. Les utilisateurs Macintosh
doivent cibler le dossier lesson14Mac.
361

13:32:41 +0200 26/09/2012 10:31:01
Créer des pages avec ASP, ColdFusion ou PHP
� Note : Les À la Leçon 13, “Travailler avec des données en ligne”, vous avez appris à sélectionner
fichiers par défaut un modèle de serveur, à configurer un serveur d’évaluation et à vous connecter à une
dans le dossier les-
son14 devraient
base de données en ligne. Dreamweaver facilite l’accès à ces données pour la création
fonctionner cor- de contenu dynamique.
rectement pour
les utilisateurs
Windows. Les Créer un jeu d’enregistrements
utilisateurs Mac
Les exercices présupposent que vous avez déjà complété avec succès la Leçon 13 et que
trouveront un
dossier personnal- vous avez établi une connexion à votre base de données. L’étape suivante du processus
isé lesson14Mac de génération de contenu dynamique consiste à créer un jeu d’enregistrements, c’est-
dans le CD-ROM à-dire une matrice d’informations extraites d’une ou de plusieurs tables de votre base
d’accompa-
gnement. de données en réponse à une question écrite en SQL (Structured Query Language),
posée par le code de la page web.
� Attention : Le La question, ou requête, peut être tout à fait simple (du type : “Affichez-moi tous les
développement
d’applications événements dans la table Events”) ou complexe (du type : “Affichez-moi les événe-
dynamiques est ments de la table qui se tiennent après le 1er mai, qui coûtent moins de 10 dollars, et
un exercice de présentez-les-moi par ordre alphabétique décroissant des noms”). Cette requête peut
précision qui peut
échouer pour
être inscrite en dur dans la page de sorte qu’elle montre toujours les mêmes résultats.
les plus infimes Souvent, la requête est elle-même dynamique. L’utilisateur la crée en cliquant sur des
raisons. Le simple cases à cocher ou des boutons radio, en choisissant des options dans des menus ou en
fait de mal placer
remplissant un champ texte (comme vous le faites dans Google ou Yahoo!).
un point-virgule
ou une virgule Comme ASP, ColdFusion et PHP, le SQL est un langage robuste qui possède sa propre
peut provoquer
terminologie, sa structure et sa syntaxe. Dreamweaver peut vous aider à écrire la plupart
une erreur.
Lisez et suivez des instructions dont vous aurez besoin, mais, pour réaliser des routines de données
chaque étape de complexes, vous aurez peut-être besoin des services d’un consultant professionnel ou
cette leçon avec d’apprendre vous-même le SQL. Adobe propose une bonne introduction au SQL à
attention.
l’adresse tinyurl.com/sql-primer. Vous pouvez aussi consulter le didacticiel SQL de
� Attention : Cet W3Schools à l’adresse tinyurl.com/sql-tutorial.
exercice ne peut Dans cet exercice, vous allez créer le calendrier des événements 2012 de manière
être complété
que si vous avez dynamique en utilisant une table de votre connexion de base de données actuelle.
correctement
1. Ouvrez events.html dans le dossier racine du site.
configuré
un serveur Le fichier contient deux tables de deux lignes chacune, avec des ensembles de
d’évaluation
données Spry et des espaces réservés. Au lieu de recommencer à zéro, vous pouvez
et opéré la
connexion à la utiliser la plupart des composants existants pour le processus PHP.
base de données
greendata selon
2. Examinez le panneau Bases de données. Si nécessaire, choisissez Fenêtre > Bases
les instructions de données pour ouvrir le panneau correspondant.
de la Leçon 13,
“Travailler avec
La connexion de base de données PHP locale que vous avez créée à la Leçon 13
des données en n’est pas visible. Si vous ouvrez le menu Connexion dans le panneau Liaisons,
ligne”. vous ne verrez qu’une option Ensemble de données Spry. Pour le moment, vous
ne pouvez pas créer de connexion de base de données, même si vous le souhaitez.
En effet, la page Events utilise l’extension .html, qui n’est compatible qu’avec le
362 leçon 14 Créer des pages dynamiques avec des données

13:32:41 +0200 26/09/2012 10:31:03
modèle de serveur dynamique Ajax (Spry). Pour que la page soit prête à prendre
en charge la connexion de base de données désirée, vous devez choisir le type de
document approprié.
3. Cliquez sur le lien qui apparaît dans le panneau Bases de données : “Choisir un � Astuce : Si la
connexion de
type de document”. base de données
La boîte de dialogue Choisir un document apparaît. n’apparaît
toujours pas après
4. Dans le menu déroulant, choisissez PHP et cliquez sur OK. avoir enregistré
le fichier avec
Dreamweaver change l’extension du fichier en .php. La connexion de base de l’extension
données Local_PHP, qui a été définie à la Leçon 13, devrait maintenant apparaître .php, complétez
dans le panneau. Elle doit apparaître automatiquement à chaque fois que vous toutes les étapes
suggérées dans le
travaillez avec une page PHP. panneau Bases de
données. Parfois,
5. Enregistrez le fichier sous le nom events.php.
le fait de choisir et
Chaque modèle de serveur peut utiliser une ou plusieurs extensions. Par exemple, d’ouvrir le fichier
peut résoudre le
ASP utilise les extensions .asp et .aspx. ColdFusion utilise les extensions .cfm, .cfml
problème.
et .cfc. Utilisez toujours l’extension appropriée pour votre modèle de serveur et
votre application. � Astuce :
Si vous êtes
6. Affichez le panneau Liaisons. Cliquez sur l’icône plus ( ) en haut du panneau
parvenu à vous
Liaisons. Choisissez Jeu d’enregistrements (Requête) dans le menu déroulant. connecter à la
base de données
à la Leçon 13,
vous pouvez
simplement
copier le dossier
Connexion de
cette leçon afin de
remplacer celui du
site actuel.
La boîte de dialogue Jeu d’enregistrements s’ouvre. Par défaut, la connexion de
base de données actuelle doit apparaître dans le menu Connexion. Si vous avez � Astuce : Si la
base de données
plusieurs connexions de base de données, vous devrez d’abord sélectionner la base greendata
de données souhaitée dans ce menu. n’apparaît
toujours pas dans
7. Sélectionnez la connexion Local_PHP dans le menu Connexion et, si nécessaire, le panneau Bases
cliquez sur le bouton Simple. de données, il se
peut que vous
Il vous suffit de sélectionner des options dans cette boîte de dialogue pour que deviez cliquer
Dreamweaver construise pour vous des instructions SQL simples, sans que vous sur le bouton
ayez à connaître la moindre ligne du langage SQL. La version Avancé de la boîte Définir et entrer
de nouveau vos
de dialogue Jeu d’enregistrements vous permet de créer des instructions SQL plus informations
élaborées. de connexion.
Pour plus
8. Dans le champ Nom, tapez rs_events. d’informations
à ce sujet, voir
Ce champ crée le nom du jeu d’enregistrements qui sera utilisé dans la requête.
la section “Se
9. Dans le menu Table, choisissez events. connecter à une
base de données”
Cette sélection identifie la table dans laquelle les données seront récupérées. de la Leçon 13.

13:32:41 +0200 26/09/2012 10:31:03
10. Si nécessaire, cliquez sur l’option Toutes dans la section Colonnes.
Cette option indique que vous souhaitez récupérer les données (ou champs) de
toutes les colonnes dans la table. Par défaut, la requête retourne tous les événements
de la table de données.
11. Cliquez sur le bouton Tester.
Si tout fonctionne correctement, la boîte de dialogue Instruction SQL test apparaît

et affiche les résultats de la requête que vous venez de construire. Mais, si vous
ne voyez pas de données ou qu’un message d’erreur apparaisse, cela peut signifier
que la table ne contient pas d’enregistrement correspondant à vos critères, ou que
vous devez vérifier votre base de données, votre connexion de base de données ou
la configuration de votre serveur d’évaluation.
Dans le cas présent, la fenêtre de test affiche tous les enregistrements dans la table
Events, y compris les événements déjà passés. Or qui souhaiterait voir les événements
déjà passés ? Aucun problème, l’un des avantages d’utiliser une base de données
et un processus dynamique PHP tient à ce que vous pouvez filtrer les données qui
ne sont pas pertinentes pour l’utilisateur ou la requête. Par exemple, configurons
le jeu d’enregistrements de manière à n’afficher que les dates ultérieures.
12. Cliquez sur OK pour fermer la boîte de dialogue Tester l’instruction SQL et revenir
à la boîte de dialogue Jeu d’enregistrements.

13:32:41 +0200 26/09/2012 10:31:04
13. Dans la colonne de gauche de la ligne Filtre, choisissez event_date. Dans la colonne � Note : Dans la
de droite, choisissez >=. Dans la ligne suivante, choisissez Valeur entrée. Ensuite, base de données
MySQL, l’année
tapez la date actuelle au format “aaaa-m-j” dans le champ ouvert. Assurez-vous est entrée en
d’ajouter des guillemets autour de la date. premier.
La section Filtre affine la recherche en ciblant des données spécifiques tout
� Note : La table
en excluant les autres. Les options que vous avez entrées requièrent une liste contient des
d’événements dans la table dont la date est celle d’aujourd’hui ou à venir. Les dates jusqu’au
événements programmés antérieurement à la date d’aujourd’hui sont ignorés et 27 mars 2013.
Si vous entrez
n’apparaîtront pas dans les résultats.
dans la boîte de
14. Dans les menus déroulants de la section Trier, choisissez event_date et Croissant. dialogue une
date ultérieure
à ce jour, vous
obtiendrez un jeu
d’enregistrements
vide.
La section Trier permet d’afficher des données par ordre alphanumérique croissant
ou décroissant.
La boîte de dialogue Tester l’instruction SQL apparaît à nouveau. Selon ce que vous
avez entré dans le filtre, certains événements seront exclus du jeu d’enregistrements
affiché.
16. Cliquez sur OK pour fermer la boîte de dialogue Tester l’instruction SQL et revenir
à la boîte de dialogue Jeu d’enregistrements. Cliquez sur le bouton Avancé.
La boîte de dialogue Jeu d’enregistrements fournit des options avancées pour créer
votre instruction SQL. Vous remarquerez que l’instruction SQL que vous avez créée
est affichée dans le champ SQL de la boîte de dialogue. Si vous savez comment en
rédiger, vous pouvez les entrer directement dans ce champ. Vous remarquerez,
dans la boîte de dialogue, des sections dédiées aux variables et aux éléments de

13:32:41 +0200 26/09/2012 10:31:04
base de données. Ces outils intégrés d’amélioration de la productivité permettent
d’accélérer le processus d’écriture manuelle des instructions, en offrant un accès
rapide à vos ressources de données ou à des commandes SQL spécifiques.
� Note : Bien Notez le texte de date affiché dans la fenêtre SQL. Il s’agit de la date que vous avez
souvent, vous entrée à l’étape 9. Cette manière de formuler les dates convient bien si la date
pourrez vous
contenter de
ne change pas, mais ici vous souhaitez que la table n’affiche que les événements
copier-coller actuels et futurs. Dès demain, le filtre que vous avez créé sera invalide. Au lieu de
dans cette boîte cela, vous devez donc entrer une fonction SQL spéciale qui reste toujours valide.
de dialogue
des instructions 17. Sélectionnez la date et les guillemets autour et supprimez-les.
SQL provenant
d’autres 18. Tapez now() dans la fenêtre SQL pour remplacer le texte supprimé.
programmes La fonction now() obtient l’heure et la date courantes du serveur afin de les utiliser
(comme Access
de Microsoft) pour le filtrage des données. Vous n’avez plus besoin de la date saisie à la main.
et constaterez
qu’elles
fonctionnent très La boîte de dialogue Instruction SQL test apparaît et affiche le résultat de la requête.
bien.
Il devrait être identique au test réalisé à l’étape 15.
20. Cliquez sur OK pour finaliser le jeu d’enregistrements.
La mention Jeu d’enregistrements (rs_events) apparaît dans le panneau Liaisons.
21. Déroulez Jeu d’enregistrements (rs_events) et examinez les éléments affichés.
Le jeu d’enregistrements contient des éléments pour les cinq colonnes de données
dans la table Events.

Vous voilà maintenant prêt à créer une page web dynamique. Au prochain exercice,
vous allez apprendre à afficher des données générées par un jeu d’enregistrements.

13:32:41 +0200 26/09/2012 10:31:05
Afficher des données d’une base de données
À présent que tous les engrenages sont en place, il ne reste plus qu’à activer la machine.
Comme pour la plupart des autres étapes, l’affichage des données dans Dreamweaver
peut s’opérer en quelques mouvements de souris.
1. Si nécessaire, ouvrez events.php.
L’extension du fichier devrait maintenant être compatible avec votre modèle de
serveur et vous disposez normalement d’une connexion de base de données et
du jeu d’enregistrements créé précédemment. La page affiche également deux
jeux d’enregistrements Spry. Vous n’utiliserez pas les données Spry, mais cela ne
signifie pas que vous deviez tout reprendre depuis le début. Pour éviter tout conflit,
réutilisons l’élément tableau lui-même, mais supprimons les ensembles de données
Spry et le code correspondant.
2. Insérez le curseur dans le tableau conteneur Events. Cliquez sur le sélecteur de
balises <table>. Appuyez sur Ctrl+X/Cmd+X pour couper le tableau.
Le tableau Spry était compris dans un élément <div>, qui contient une référence à
l’ensemble de données Spry et n’est plus utile. Si vous n’avez pas déplacé le curseur,
l’élément <div> devrait encore être affiché dans le sélecteur de balises. Les éléments
Spry sont repérés par une teinte orange dans l’affichage du sélecteur de balises.
3. Cliquez sur le sélecteur de balises <div>. Appuyez sur Suppr.
Avant de réinsérer le tableau, supprimons les ensembles de données Spry également.
4. Dans le panneau Liaisons, sélectionnez l’ensemble de données ds_events. Cliquez
sur l’icône moins ( ) en haut du panneau pour supprimer l’ensemble de données.
Fermez toutes les boîtes de dialogue qui pourraient apparaître lors de la suppression
de l’ensemble de données.
5. Supprimez l’ensemble de données ds_classes. Fermez toutes les boîtes de dialogue

qui pourraient apparaître lors de la suppression de l’ensemble de données.
Placez le curseur dans le premier lien Return to Top. Cliquez sur le sélecteur de
balises <p> et appuyez sur la touche fléchée de gauche une fois pour placer le curseur
au bon emplacement pour le tableau Events.
6. Appuyez sur Ctrl+V/Cmd+V pour coller le tableau conteneur Events.
Le tableau conteneur apparaît sous le titre. Il contient cependant des résidus de
code Spry, qui doivent aussi être supprimés.

13:32:41 +0200 26/09/2012 10:31:05
7. Placez le curseur dans la ligne d’en-tête du tableau. Passez en mode Code et examinez
les éléments de ligne d’en-tête.
Chacun des éléments <th> contient un attribut spry:sort="…".

8. Supprimez les attributs spry:sort="…" de chaque élément <th>, ainsi que les
autres attributs Spry autre part dans le tableau, comme spry:repeat, spry:odd,
spry:even, etc. Veillez cependant à ne supprimer aucun des attributs class="…".
Toutes les références Spry sont maintenant effacées du tableau Events.

9. Passez en mode Création et enregistrez tous les fichiers.
Rien n’est plus simple que de convertir les conteneurs de données Spry pour notre
nouveau contexte.
10. Dans le tableau, sélectionnez l’espace réservé {Date}.
11. Si nécessaire, ouvrez le panneau Liaisons.
Déroulez le jeu d’enregistrements rs_events.
12. Dans le panneau Liaisons, sélectionnez le champ event_date. Cliquez sur le bouton
Insérer en bas du panneau Liaisons.
Un nouvel espace réservé {rs_events.event_date} apparaît dans la cellule de
tableau pour remplacer l’espace réservé Spry.
13. Remplacez {Event} par le champ event_name.
14. Remplacez {Location} par le champ event_location.
15. Remplacez {Cost} par le champ event_cost.
Assurez-vous de ne pas supprimer la signature dollar avant l’espace réservé.

Lorsque vous travaillez avec des pages dynamiques, il est important de tester réguliè-
rement leur fonctionnement. Néanmoins, contrairement aux structures de données
Spry qui utilisent PHP, certains fichiers doivent être placés sur le serveur d’évaluation
avant que l’affichage dynamique soit possible.

13:32:41 +0200 26/09/2012 10:31:06
Placer les fichiers sur le serveur d’évaluation
Vous ne pourrez pas tester ce fichier en mode Affichage en direct ou dans un navi- � Note : Vous ne
gateur tant que vous n’aurez pas placé la page ainsi que d’autres fichiers spécifiques pourrez pas tester
cette page tant
qui connectent la page à la base de données sur le serveur d’évaluation local. Quels que vous n’aurez
fichiers doivent donc être placés ? Par chance, Dreamweaver s’occupe de cette logis- pas installé
tique pour vous. et configuré
un serveur
1. Activez le mode Affichage en direct. d’évaluation
local pour PHP et
MySQL. Pour plus
d’informations à
ce sujet, consultez
la Leçon 13.
Dreamweaver vous propose de mettre à jour le fichier sur le serveur d’évaluation.

2. Cliquez sur Oui pour mettre à jour le fichier sur le serveur d’évaluation.
Dreamweaver vous demandera sans doute de placer vos fichiers dépendants. Si �Astuce : Si
c’est la première fois que vous testez ce fichier, cliquez sur Oui. Dreamweaver place Dreamweaver
ne vous a pas
alors les fichiers nécessaires pour que cette page s’affiche correctement. Une fois
demandé de
les fichiers placés, il est inutile de les charger de nouveau, à moins d’avoir apporté placer les fichiers
d’importantes modifications à cette page. dépendants, vous
devez modifier
3. Cliquez sur Oui pour placer les fichiers dépendants. un réglage dans
les préférences.
Dans la catégorie
Site, cochez les
options Invite
lors de Acquérir/
Le tableau affiche une ligne de données. Pour en afficher davantage, vous devez ajouter Extraire et Invite
lors de Placer/
un comportement de région répétée.
Archiver pour la
section Fichiers
Ajouter une région répétée dépendants.
Les espaces réservés de données ne peuvent afficher qu’un enregistrement à la fois.

Pour voir plusieurs enregistrements, vous allez envelopper ces espaces réservés dans
un comportement de serveur appelé Région répétée.
1. Passez en mode Création. Placez le curseur au début de la ligne de données du
tableau et sélectionnez la ligne entière. Cliquez sur le sélecteur de balises <tr>.
La ligne entière est sélectionnée.

13:32:41 +0200 26/09/2012 10:31:06
2. Choisissez Fenêtre > Comportements de serveur. Dans le panneau Comportements
de serveur, cliquez sur l’icône plus ( ) et choisissez Région répétée dans le menu
déroulant.
La boîte de dialogue Région répétée apparaît. Le menu Jeu d’enregistrements affiche

rs_events comme jeu d’enregistrements courant. Par défaut, le comportement
affiche dix enregistrements à la fois. Vous pouvez spécifier un autre nombre ou
afficher tous les enregistrements à la fois.
Si vous décidez de ne pas afficher tous les enregistrements, vous devez créer un
comportement de pagination des enregistrements, afin de permettre à l’utilisateur
de voir le reste des données. Pour ce tableau, faisons simple et affichons tous les
enregistrements à la fois.
3. Cochez l’option Tous les enregistrements. Cliquez sur OK.
Un onglet gris avec le mot Répéter apparaît au-dessus de la ligne de données du

tableau.
4. Enregistrez tous les fichiers. Observez la page en mode Affichage en direct.
Le tableau affiche tous les événements à venir à partir du jour courant. Mieux, à chaque
jour qui passe, les événements sont automatiquement supprimés de l’affichage parce
que leur date ne correspond plus aux contraintes du filtre de requête.
Créer un tableau dynamique pour

les classes et les séminaires
Avant de passer à l’exercice suivant, mettez à l’œuvre vos compétences et vos acquis
des leçons précédentes en recréant le tableau Spry pour les classes et les séminaires.
Pour cela, les étapes sont simples :

13:32:41 +0200 26/09/2012 10:31:07
1. Créez un jeu d’enregistrements qui renvoie des données de tous les champs de la � Note :
table classes dans la base de données. À la différence du jeu d’enregistrements Exception faite du
filtrage des dates,
des événements, il est inutile de filtrer ou de trier les données de classe par date. les étapes à suivre
Vous pouvez opérer le tri d’après le champ class_name si vous souhaitez que les pour remplacer
événements soient listés par ordre alphabétique. le tableau Spry
Class restant par
un équivalent PHP
sont identiques
à celles décrites
dans cet exercice.
Si vous en avez
le temps, mettez
donc vos propres
compétences à
l’épreuve et tentez
de remplacer
le widget Spry
restant par le
vôtre.
2. Sélectionnez le tableau Spry et appuyez sur Ctrl+X/Cmd+X. Supprimez l’élément � Note : Il peut
<div> Spry et recollez le tableau dans la page à la même position. être nécessaire
de cliquer sur le
3. Nettoyez le code Spry résiduel qui reste dans le tableau. bouton Simple
pour revenir
4. Insérez des espaces réservés de données du nouveau jeu d’enregistrements dans
à la boîte de
les cellules appropriées de la ligne de données. dialogue Jeu
d’enregistrements
5. Appliquez un comportement de serveur Région répétée à la ligne de données pour
simple.
rs_classes.
6. Testez le résultat en mode Affichage en direct.

L’affichage dynamique des données constitue une amélioration majeure par rapport
aux listes et aux tableaux statiques. Le fait de permettre à l’utilisateur d’interagir avec
les données l’implique de manière concrète. Ces exercices vous ont offert un aperçu
de ce que l’on peut réaliser avec des pages web dynamiques. Au prochain exercice,
vous allez créer l’une des applications dynamiques les plus courantes : un ensemble
de pages Principale/Détails.
Le scénario est courant sur de nombreux sites web : une page affiche une liste prin-
cipale de produits ou d’événements. Vous cliquez sur celui qui vous intéresse le plus.
Le site web vous conduit alors vers une nouvelle page avec des informations détaillées

13:32:41 +0200 26/09/2012 10:31:08
sur l’élément que vous avez sélectionné. Ce que vous ne remarquez généralement pas,
toutefois, c’est de quelle manière la première page (la page principale) a passé votre
requête à la page de détails.
Créer un ensemble de pages

Principale/Détails
L’ensemble de pages Principale/Détails est l’une des applications le plus souvent utilisées
dans les sites web dynamiques. En ajoutant un lien hypertexte aux données affichées,
vous permettez aux visiteurs de naviguer jusqu’à une nouvelle page, qui affiche des
informations plus détaillées à propos de l’élément sélectionné. Les ensembles de pages
Principale/Détails peuvent être créés dans n’importe quel environnement de serveur
dont ASP, ColdFusion, PHP et Spry. Les étapes et procédures sont similaires pour
chacun des modèles de serveur, certaines étant cependant plus simples à implémenter
que d’autres.
Créer la page principale

� Note : Avant Dans cet exercice, vous allez créer un ensemble de pages Principale/Détails à partir
de commencer de votre connexion de base de données existante.
cet exercice,
vous devez 1. Si nécessaire, lancez Dreamweaver et ouvrez products.php.
créer le fichier
products.php et le Vous utiliserez cette page comme page principale.
connecter à votre
2. Sélectionnez le texte Add main heading here. Tapez Green Products pour le
base de données
comme indiqué à remplacer.
la Leçon 13.
3. Sélectionnez le texte Add subheading here. Tapez GreenStart offers only the best
in green products pour le remplacer.
4. Sélectionnez le texte Add content here. Tapez Click on any product link you wish
to learn more about pour le remplacer.
Créons un élément <div> pour contenir les informations de produit.
5. Cliquez sur le sélecteur de balises <p>. Appuyez sur la touche fléchée de droite pour
déplacer le curseur à l’extérieur de l’élément <p>.
6. Choisissez Insertion > Objet mis en forme > Balise Div.
La boîte de dialogue Insérer la balise Div apparaît.
7. Dans le champ Classe, tapez productmaster et cliquez sur OK pour créer l’élément.

13:32:41 +0200 26/09/2012 10:31:08
L’élément <div> apparaît avec du texte fictif d’exemple. Vous devez ensuite créer
un jeu d’enregistrements pour afficher toutes les données de produit.
8. Ouvrez le panneau Bases de données et assurez-vous que la connexion Local_PHP
est toujours disponible.
9. Ouvrez le panneau Liaisons. Cliquez sur l’icône plus ( ) et choisissez Jeu � Astuce : Si la
d’enregistrements (requête). connexion à la
base de données
10. Entrez les spécifications suivantes pour le nouveau jeu d’enregistrements : est manquante,
Nom : rs_products. suivez les étapes
décrites dans le
Connexion : LocalPHP. panneau Bases
Table : products. de données
Filtre : Aucun. pour créer une
connexion valide.
Tri : product_category et Croissant.
11. Cliquez sur Tester pour voir si la requête produit un ensemble de données valide.
La boîte de dialogue Tester l’instruction SQL affiche des données de produits de
la base de données greendata.
12. Cliquez sur OK dans toutes les boîtes de dialogue pour créer le jeu d’enregistrements
et revenir à la fenêtre de document.
Le jeu d’enregistrements rs_products apparaît dans le panneau Liaisons. Il n’existe
pas de restriction quant à la manière d’utiliser les champs de données dans le jeu
d’enregistrements. Vous pouvez les insérer une fois, plusieurs fois ou pas du tout.
Peu importe, également, l’ordre d’affichage des champs dans la page.
13. Sélectionnez le texte de remplissage dans l’élément <div> que vous avez créé à
l’étape 7.
14. Dans le panneau Liaisons, sélectionnez le champ product_name. Cliquez sur Insérer.
Le texte {rs_products:product_name} remplace le texte de remplissage dans
<div.productmaster>.
15. Formatez {rs_products:product_name} en tant que titre de niveau 3. Insérez un

nouveau paragraphe après l’espace réservé.
16. À la ligne suivante, insérez le champ product_desc_short.

13:32:41 +0200 26/09/2012 10:31:08
� Note : Avant d’observer les données, veillez à placer tous les fichiers dépendants sur le serveur
d’évaluation.
17. Enregistrez tous les fichiers. Observez la page en mode Affichage en direct. Si
Dreamweaver vous demande si vous souhaitez placer les fichiers dépendants,
cliquez sur Oui.
Si votre serveur d’évaluation est correctement configuré, Dreamweaver affiche les deux
champs sélectionnés du premier enregistrement de la base de données dans la fenêtre
de document. Mais le contenu dynamique ne se limite pas au texte. Il est également
possible d’afficher des images de manière dynamique.
afficher des images de manière dynamique

Que serait une page de produits sans les images correspondantes ? L’ajout d’images
aux descriptions des produits n’a rien de plus difficile que l’insertion de texte. Dans
cet exercice, vous allez apprendre à insérer des images dynamiques dans vos pages.
1. Si nécessaire, ouvrez products.php. Passez en mode Création.
2. Insérez le curseur au début de l’espace réservé {rs_products:product_name} dans
<div.productmaster>. Appuyez sur Entrée pour insérer un nouveau paragraphe
avant l’espace réservé.
Le paragraphe vide est formaté comme un élément <h3>.
3. Insérez le curseur dans le nouveau paragraphe. Dans le mode HTML de l’inspecteur
Propriétés, sélectionnez Paragraphe dans le menu Format.
4. Choisissez Insertion > Image.
La boîte de dialogue Sélectionner la source de l’image apparaît. Normalement,
vous sélectionneriez l’image désirée et cliqueriez simplement sur OK. Mais, pour
insérer une image dynamique, il faut quelques étapes supplémentaires.
5. Cliquez sur le bouton Sources de données dans la boîte de dialogue.
La boîte de dialogue se change en remplaçant l’explorateur de fichiers par une liste
de champs de données du jeu d’enregistrements rs_products.
6. Sélectionnez le champ product_pix_sm.
Le champ URL de la boîte de dialogue affiche un bloc de code complexe, qui
insère une image en fonction du nom de fichier stocké dans le champ de la base
de données (ici, product_pix_sm). Mais le champ ne contient que le nom de fichier
de l’image et non le chemin.

13:32:41 +0200 26/09/2012 10:31:09
Comme les noms de dossiers et les emplacements de fichiers changent au fil du
temps, il n’est pas judicieux d’insérer les informations de chemin dans le champ
de la base de données. Recréez plutôt l’instruction de chemin de l’image dans le
code dynamique, au moment où vous en avez besoin. Si vous déplacez les images
d’un dossier à un autre dans le site, vous n’aurez ainsi qu’une petite modification
à faire dans le code pour vous adapter au nouvel emplacement.
Si vous examinez le panneau Fichiers, vous verrez que les images nommées dans
la base de données sont situées dans le dossier products.
7. Insérez le curseur au début du champ URL. Dans le champ, tapez products/ et
cliquez sur OK.
En insérant le nom du dossier dans le champ URL, Dreamweaver ajoute le texte

products/ au nom de l’image pour extraire le visuel désiré de ce sous-dossier de
votre site, comme ceci : products/1-lrg.jpg.
8. Dans la boîte de dialogue Attributs d’accessibilité des balises d’image, sélectionnez
<vide> dans le menu déroulant Texte secondaire. Cliquez sur OK.
La petite image du produit d’exemple apparaît à l’écran avec le texte. Maintenant que
votre produit s’affiche correctement, il est très facile de réaliser la même manipulation
pour plusieurs éléments de données, comme vous l’avez fait précédemment avec les
tableaux Events et Class.

13:32:41 +0200 26/09/2012 10:31:09
Afficher plusieurs éléments
Pour afficher plusieurs enregistrements, vous devez ajouter une région répétée comme
auparavant. Il n’y a pas de ligne de tableau comme dans l’exemple précédent, mais
vous pouvez, à la place, attribuer le comportement à l’élément <div.productmaster>.
1. Basculez en mode Création et cliquez sur le sélecteur de balises <div.productmaster>.
2. Ouvrez le panneau Comportements de serveur.
3. Cliquez sur l’icône plus ( ) et choisissez Région répétée.
4. Dans la boîte de dialogue Région répétée, tapez les spécifications suivantes :
Jeu d’enregistrements : rs_products
Afficher : 6 enregistrements à la fois.
Cliquez sur OK.
Un onglet gris affichant le mot Répéter apparaît au-dessus de <div.productmaster>.

5. Enregistrez tous les fichiers. Observez la page en mode Affichage en direct. Cliquez
sur Oui pour mettre à jour la page sur le serveur d’évaluation. Cliquez sur Oui pour
mettre à jour les fichiers dépendants.
Dreamweaver affiche maintenant six enregistrements de la table Products. Comme

<div.productmaster> occupe, par défaut, 100 % de la largeur de la zone de contenu
principale, les enregistrements s’empilent les uns par-dessus les autres. Par la suite,
vous allez mettre en forme <div.productmaster> afin d’utiliser plus efficacement
l’écran, mais, pour le moment, assurons-nous que les visiteurs pourront voir tous les
produits dans la base de données. Les six premiers enregistrements s’affichent par
défaut ; pour afficher le prochain ensemble de six enregistrements, vous devez ajouter
un comportement de pagination.

13:32:41 +0200 26/09/2012 10:31:10
Créer un comportement de pagination des enregistrements
Les contrôles de pagination s’insèrent généralement en dehors de la région répétée,
afin de n’apparaître qu’une seule fois dans la page. Dans cet exercice, vous allez créer
un comportement de pagination des enregistrements pour le jeu d’enregistrements
rs_products.
1. Cliquez sur l’onglet Répéter pour sélectionner la région répétée. Appuyez sur la
touche fléchée de droite pour passer le curseur en dehors du code de l’élément
<div> et de la région répétée.
Les contrôles de pagination peuvent être insérés sous forme de texte ou d’images
dans la page. En général, on utilise des tableaux pour contrôler leur présentation.
2. Insérez un tableau avec les spécifications suivantes :
Ligne : 2
Colonnes : 4
Largeur du tableau : 600 pixels
Largeur de la bordure : 0
Marge intérieure des cellules : 0
Espacement entre les cellules : 0
La largeur est fixée à 600 pixels, mais le tableau se conformera automatiquement
aux dimensions définies par les règles CSS existantes créées à la Leçon 7. Vous
allez redéfinir ces styles plus loin dans la leçon. Pour obtenir ce type de contrôle
de précision, vous devrez appliquer un ID unique à ce tableau.
3. Dans le champ ID du tableau, tapez master_paging.

4. Sélectionnez toutes les cellules dans la première ligne. Dans le champ L de l’inspecteur
des propriétés, tapez 25 %.
5. Dans la première ligne du tableau, tapez le texte suivant :
Cellule 1 : << First
Cellule 2 : < Previous
Cellule 3 : Next >
Cellule 4 : Last >>
Les chevrons fournissent un indice visuel, qui montre à l’utilisateur l’effet du

contrôle de pagination.

13:32:41 +0200 26/09/2012 10:31:10
6. Sélectionnez le texte << First. Choisissez Insertion > Objets de données > Pagination
du jeu d’enregistrements > Déplacer vers la première page.
La boîte de dialogue Déplacer vers la première page apparaît. Le champ Lien affiche
l’élément Sélection : “<< First” et le menu Jeu d’enregistrements affiche rs_products.
7. Cliquez sur OK.

Un comportement de lien hypertexte dynamique est appliqué au texte qui charge
les six premiers enregistrements de la table Products.
8. Appliquez les comportements de pagination suivants aux autres portions de texte :
< Previous : Déplacer vers la page précédente.
Next > : Déplacer vers la page suivante.
Last >> : Déplacer vers la dernière page.
Les six premiers enregistrements apparaissent. Si vous cliquez sur les contrôles
de pagination, rien ne se produit. Pour invoquer les contrôles de pagination, vous
devez utiliser une touche de modification.
10. Maintenez la touche Ctrl/Cmd enfoncée et cliquez sur le lien de pagination Next.
Le mode Affichage en direct charge les six enregistrements suivants.
11. Maintenez la touche Ctrl/Cmd enfoncée et cliquez sur le lien de pagination Last.
Le mode Affichage en direct charge le dernier jeu d’enregistrements.
12. Testez les liens de pagination Previous et First.
Vous avez créé un ensemble de liens de pagination d’enregistrements qui permet aux
visiteurs d’afficher les jeux d’enregistrements par lots, selon le comportement défini
pour la répétition. Il y a cependant un petit problème. Lorsque la page affiche le pre-
mier jeu d’enregistrements, il n’y a aucun enregistrement “précédent”. De la même
manière, lorsque le dernier jeu d’enregistrements est affiché, il n’y a aucun enregistre-
ment “suivant”. En laissant ces liens dans la page, vous risquez de rendre l’utilisateur
confus. Comme vous l’avez probablement déjà deviné, Dreamweaver propose un
comportement sur mesure pour ce type de situation.
Masquer les contrôles de pagination inutiles

La visibilité est une propriété courante qui peut être contrôlée en HTML et en CSS. Il
est assez facile de définir la visibilité d’un élément, puis d’invoquer un comportement
ou une action de script et de la modifier pour un besoin spécifique. Dans cet exercice,
vous allez appliquer un comportement de serveur dynamique qui modifiera la visibilité

13:32:41 +0200 26/09/2012 10:31:11
des liens de pagination en fonction des résultats du jeu d’enregistrements, afin de
masquer certains contrôles quand ils sont inutiles.
1. Placez le curseur dans le lien First et cliquez sur le sélecteur de balises <a>. � Note : Assurez-
vous de ne pas
Pour masquer toutes traces du lien, vous allez sélectionner l’ensemble du balisage de sélectionner
l’élément de pagination d’enregistrement. Le comportement Afficher est accessible l’élément <th>.
depuis le menu Insertion ou dans le panneau Comportements de serveur. Si vous masquiez
la cellule entière,
2. Dans le panneau Comportements de serveur, cliquez sur l’icône plus ( ) et vous forceriez les
choisissez Afficher la région > Afficher si ce n’est pas la première page. cellules restantes
à s’étendre pour
occuper la zone
de contenu.
La boîte de dialogue Afficher si ce n’est pas la première page apparaît et affiche

rs_products dans le menu Jeu d’enregistrements.
3. Cliquez sur OK.
Un onglet gris avec le mot Afficher apparaît au-dessus du lien First.
4. Sélectionnez le lien Previous, comme à l’étape 1.
Appliquez le comportement de serveur Afficher si ce n’est pas la première page.
5. Sélectionnez le lien Next puis le lien Last, et appliquez à chacun le comportement
de serveur Afficher si ce n’est pas la dernière page.
Les six premiers enregistrements sont affichés. Examinez les liens de pagination.
Les liens Previous et First n’apparaissent pas.
7. Maintenez la touche Ctrl/Cmd enfoncée et cliquez sur le lien Last.
Le dernier jeu d’enregistrements est affiché. Les liens Next et Last ne sont plus affichés.
Les comportements Afficher la région masquent ou affichent automatiquement les liens
de pagination, selon que la page affiche le premier ou le dernier jeu d’enregistrements,
ou qu’elle se trouve entre les deux. Dreamweaver propose plus de vingt comportements
de serveur prédéfinis, qui permettent de personnaliser tous les aspects de l’affichage
des enregistrements.
Afficher le nombre d’enregistrements

Quand on observe un grand nombre d’enregistrements, il arrive bien souvent qu’on
ne sache plus quel enregistrement on est en train d’examiner. Il est alors judicieux
de proposer à l’utilisateur un rapport d’état. Dans cet exercice, vous allez insérer un
comportement qui affiche le nombre total d’enregistrements et de pages de l’ensemble.
1. Passez en mode Création. Sélectionnez les quatre cellules dans la deuxième ligne
de <table#master_paging>. Cliquez du bouton droit sur la sélection et choisissez
Tableau > Fusionner les cellules dans le menu contextuel.

13:32:41 +0200 26/09/2012 10:31:11
2. Cliquez dans la cellule fusionnée. Choisissez Insertion > Objets de données >
Afficher le nombre d’enregistrements > État de navigation du jeu d’enregistrements.
La boîte de dialogue État de navigation du jeu d’enregistrements apparaît.

3. Si nécessaire, sélectionnez le jeu d’enregistrements rs_products. Cliquez sur OK.
Un bloc de code complet et du texte de remplissage sont insérés dans la seconde ligne.
Le rapport d’état affiche le texte Enregistrements 1 à 6 sur 28.

5. Maintenez la touche Ctrl/Cmd enfoncée et cliquez sur le lien Next. Examinez le
rapport d’état.
Le rapport d’état affiche le texte Enregistrements 7 à 12 sur 28.
La page est presque terminée, mais, avant de créer la page de détails et les compor-
tements adéquats pour relier les deux pages l’une à l’autre, donnons un peu de style
à l’affichage des produits.
Mettre en forme des données dynamiques

La mise en forme des données dynamiques ne diffère pas de celle des pages statiques.
Dans cet exercice, vous allez créer des règles CSS pour formater le texte et structurer
vos données dynamiques. Commençons par changer la disposition des produits dans
la page. La mise en forme suivante permettra aux produits d’être disposés en rangées
soignées.
1. Ouvrez products.php et, si nécessaire, passez en mode Création.
2. Ouvrez le panneau Styles CSS. Sélectionnez la dernière règle dans la feuille de style
mygreen_styles.css.
3. Créez une règle CSS nommée .content section .productmaster et appliquez la
mise en forme suivante.

13:32:41 +0200 26/09/2012 10:31:12
4. Créez une règle nommée .content section .productmaster h3 et appliquez la
5. Créez une règle nommée .content section .productmaster h3 a, .content

section .productmaster h3 a:visited et appliquez la mise en forme
suivante.
6. Créez une règle nommée .content section .productmaster h3 a:hover et

appliquez la mise en forme suivante.
7. Créez une règle nommée .content section .productmaster p et appliquez la

8. Créez une règle nommée .content section #master-paging et appliquez la mise

en forme suivante.

13:32:41 +0200 26/09/2012 10:31:12
9. Créez une règle nommée .content section #master-paging td et appliquez la
10. Créez une règle nommée .content section #master-paging a, .content section
#master_paging a:visited et appliquez la mise en forme suivante.
11. Créez une règle nommée .content section #master-paging a:hover et appliquez
la mise en forme suivante.
Les nouveaux styles affichent les produits côte à côte sur deux lignes. Cet affichage
prend moins de place et permet à l’utilisateur de voir plus de produits sans faire
défiler la page. Les contrôles de pagination offrent un moyen de consulter l’ensemble
du catalogue en cliquant simplement sur les liens. Au prochain exercice, vous allez
apprendre à ajouter un lien hypertexte spécial aux éléments de la page principale, afin
de charger une vue détaillée d’un produit spécifique.

13:32:41 +0200 26/09/2012 10:31:13
Insérer un comportement d’accès à la page de détails
En conservant les images et les descriptions de produits en petite taille sur la page
principale, vous permettez à l’utilisateur de parcourir rapidement l’ensemble de votre
catalogue. Plus vous parviendrez à afficher de produits correctement à un endroit, plus
vous multiplierez les chances pour que le client trouve quelque chose qui l’intéresse.
En général, il veut ensuite en savoir plus sur le produit. C’est alors qu’intervient la
page de détails. Dans cet exercice, vous allez insérer un comportement spécial dans
les espaces réservés dynamiques, qui chargera une page de détails dès que l’utilisateur
cliquera sur un lien dans la page principale.
1. Ouvrez products.php et, si nécessaire, passez en mode Création.
Un lien dynamique peut être ajouté au texte ou aux images afin de conduire
l’utilisateur vers une page de détails. ASP propose un comportement personnalisé
pour cela, mais vous devez créer vous-même ce lien sous ColdFusion et PHP.
2. Sélectionnez l’espace réservé pour l’image dans <div.productmaster>.
Les liens dynamiques s’ajoutent à l’aide de la boîte de dialogue Liaison.
3. Cliquez sur l’icône Parcourir à côté du champ Lien dans l’inspecteur Propriétés.
4. Lorsque la boîte de dialogue Sélectionner un fichier apparaît, cliquez sur le bouton
Sources de données.
5. Sélectionnez le champ product_ID.
Lorsque vous sélectionnez product_ID, le code suivant est inséré dans le champ URL :
<?php echo $row_rs_products['product_ID']; ?>
6. Insérez le curseur au début du texte dans le champ URL.

7. Tapez product_detail.php?product_ID= et cliquez sur OK.
Le code que vous avez entré passe le product_ID de l’élément sélectionné à la page
de détails, où il doit ensuite être affiché.
Avant de pouvoir tester cette fonctionnalité, vous devez créer la page de détails.

13:32:41 +0200 26/09/2012 10:31:13
Créer une page de détails
La page de détails est presque identique à la page principale en termes de construc-
tion. Les deux créent un jeu d’enregistrements et affichent des espaces réservés pour
des champs spécifiques. La principale différence tient à ce que la page principale
peut afficher tous les enregistrements, alors que la page de détails n’en affiche qu’un.
Dans cet exercice, vous allez créer une page de détails qui contient des informations
concernant le produit sélectionné par l’utilisateur.
� Astuce : Si 1. Créez une nouvelle page fondée sur le modèle du site.
vous n’utilisez
pas PHP, ajoutez Enregistrez-la sous le nom product_detail.php.
l’extension
2. Si le panneau Bases de données n’affiche pas votre connexion de données actuelle,
appropriée à
votre modèle de cliquez sur le lien de type de document et choisissez PHP ou le modèle de serveur
serveur. approprié à votre situation.
3. Dans le panneau Liaisons, créez un nouveau jeu d’enregistrements nommé
rs_product_detail.
La boîte de dialogue Jeu d’enregistrements apparaît. Les précédents jeux
d’enregistrements que vous avez créés affichaient tous les enregistrements dans
une table. Pour une page de détails, vous devez créer un filtre et n’afficher que
l’enregistrement sélectionné par l’utilisateur dans la page principale.
4. Tapez les spécifications suivantes dans la boîte de dialogue Jeu d’enregistrements.
5. Cliquez sur Tester.

Une boîte de dialogue apparaît et demande une valeur de test. Vous devez entrer
une valeur pertinente pour le champ spécifique, comme le numéro d’unité de
stockage ou l’ISBN du produit. Dans le cas présent, les valeurs dans la table Products
correspondent à des nombres simples, allant de 1 à 28.

13:32:41 +0200 26/09/2012 10:31:14
6. Tapez 1 dans le champ et cliquez sur OK.
La boîte de dialogue Tester l’instruction SQL apparaît et affiche un enregistrement.

7. Cliquez sur OK dans toutes les boîtes de dialogue pour repasser en mode Création.
Vous êtes maintenant prêt à créer l’affichage des données de la page de détails.
8. Sélectionnez le texte Add main heading here. Tapez Green Product Detail pour
le remplacer.
9. Sélectionnez le texte Add subheading here. Dans le panneau Liaisons, sélectionnez
le champ product_name. Cliquez sur le bouton Insérer.
10. Sélectionnez le texte Add content here. Insérez le champ product_desc_long.
11. Créez un nouveau paragraphe. Saisissez-y Dimensions:. Appuyez sur la barre
d’espace et insérez le champ product_size.
12. Créez un nouveau paragraphe. Saisissez-y Quantity:. Appuyez sur la barre d’espace
et insérez le champ product_quantity. Appuyez sur Ctrl+Maj+barre d’espace/
Cmd+Maj+barre d’espace pour insérer une espace insécable. Insérez le champ
product_unit.
13. Créez un nouveau paragraphe. Saisissez-y Cost: $. Appuyez sur la barre d’espace
et insérez le champ product_cost.
14. Placez le curseur au début de l’espace réservé {rs_product_detail.product_name}.
Choisissez Insertion > Image.
15. Cliquez sur l’option Source de données. Sélectionnez le champ product_pix_lrg.
Insérez le curseur au début du champ Code et tapez products/. Cliquez sur OK.

13:32:41 +0200 26/09/2012 10:31:15
16. Dans le menu Texte secondaire de la boîte de dialogue Attributs d’accessibilité des
balises d’image, sélectionnez <vide>. Cliquez sur OK.
17. Sélectionnez le nouvel espace réservé pour l’image. Dans le menu Classe, choisissez
flt_rgt. Dans les champs Largeur et Hauteur, tapez 300.

Avant de placer les pages sur le site distant, vous devez tester le comportement
d’accès à la page de détails au niveau local.
19. Ouvrez la page Products. Observez-la en mode Affichage en direct. Maintenez la
touche Ctrl/Cmd enfoncée et cliquez sur l’un des noms de produit ou une image.
L’affichage en direct charge les données du produit sélectionné dans product_detail.php.

Vous venez de terminer les premières étapes de la construction d’un véritable site de
commerce en ligne. La conception et la construction complètes du magasin en ligne,
du panier d’achat et du système de paiement sont complexes et dépassent malheu-
reusement le cadre de ce livre.
Des solutions préconçues de panier d’achat et de magasin en ligne sont disponibles
pour tous les modèles de serveur pris en charge par Dreamweaver. Leur coût et leur
complexité varient et peuvent s’adapter à tous les besoins et budgets. Certaines des
solutions les plus économiques sont proposées par Google, Yahoo! et PayPal et simpli-
fient même la méthode de réception des paiements électroniques par carte de crédit
et transfert bancaire.
Dans cette leçon, vous avez créé des pages dynamiques en utilisant des données en
ligne. Vous avez généré du contenu de page à partir d’une base de données en ligne et
créé un ensemble de pages Principale/Détails. Tout cela ne représente pourtant que
la partie émergée de l’iceberg des capacités de Dreamweaver en matière de gestion
des données dynamiques.

13:32:41 +0200 26/09/2012 10:31:16
Révisions
Questions
1. Qu’est-ce qu’un jeu d’enregistrements ?
2. Dans quel cas pouvez-vous avoir besoin d’utiliser une région répétée ?
3. Qu’est-ce qu’un ensemble de pages Principale/Détails ?
4. Dans quel but utiliseriez-vous un comportement de pagination des enregistrements ?
5. Comment masquer des contrôles de pagination lorsqu’il n’y a plus d’enregistrements
à afficher ?
Réponses
1. Un jeu d’enregistrements est un tableau d’informations extrait d’une ou de plusieurs
tables dans une base de données à l’aide d’une requête créée dans Dreamweaver.
2. Une région répétée permet à l’application de données d’afficher plusieurs
enregistrements à la fois.
3. L’ensemble de pages Principale/Détails est une fonctionnalité courante des sites
web pilotés par les données. La page principale affiche plusieurs enregistrements et
fournit dans chaque enregistrement des liens dynamiques qui vous permettent de
charger dans la page de détails des informations spécifiques concernant l’élément
sélectionné.
4. Le comportement de pagination des enregistrements est utilisé pour charger les
résultats d’un jeu d’enregistrements, lorsque seul un nombre limité d’enregistrements
est affiché à la fois.
5. Sélectionnez le lien du contrôle de pagination et appliquez un comportement
“Afficher” approprié au jeu d’enregistrements.

13:32:41 +0200 26/09/2012 10:31:16
le but de toutes les précédentes leçons était de concevoir, de développer et de
créer des pages pour un site web distant. mais dreamweaver ne vous abandonne
pas à cette étape. il propose aussi de puissants outils pour placer vos fichiers
sur le serveur distant et gérer des sites web de toutes tailles au fil du temps.
388

13:32:41 +0200 26/09/2012 10:31:17
Publier son site
sur le Web 15
Dans cette leçon, vous allez publier votre site web sur Internet et réaliser
les opérations suivantes :
• définir un site distant ;
• placer des fichiers sur le Web ;
• bloquer le téléchargement de fichiers et de dossiers ;
• mettre à jour des liens périmés dans l’ensemble du site ;
• récupérer des pages depuis le Web.

389

13:32:41 +0200 26/09/2012 10:31:18
Définir un site distant
Dreamweaver fonctionne avec un système à deux sites. L’un, associé à un dossier sur
votre ordinateur, est appelé site local. Tout le travail des précédentes leçons est inter-
venu sur ce site. L’autre, associé à un dossier sur le serveur web, généralement sur un
autre ordinateur, correspond au site distant. Ce dernier est généralement connecté à
Internet et accessible au public. Dans les entreprises importantes, le site distant n’est
souvent accessible qu’aux employés, par le biais d’un intranet réseau. Ces sites four-
nissent des informations et des applications pour la prise en charge des programmes
et des produits de l’entreprise.
Dreamweaver prend en charge plusieurs méthodes pour se connecter à un site distant :
• FTP. Le FTP (File Transfer Protocol ou protocole de transfert de fichiers) est la
méthode standard pour la connexion aux sites web hébergés.
• SFTP. Le SFTP (Secure File Transfer Protocol ou protocole de transfert de fichiers
sécurisé) est un nouveau protocole, qui fournit une méthode pour se connecter
aux sites web hébergés de manière plus sécurisée, afin d’empêcher les accès non
autorisés ou l’interception de contenu en ligne.
• FTP sur SSL/TLS (chiffrement implicite). Cette méthode FTP sécurisée requiert
que tous les clients du serveur FTPS soient informés que SSL doit être utilisé
pendant la session. Elle est incompatible avec les clients qui ne prennent pas en
charge le FTPS.
• FTP sur SSL/TLS (chiffrement explicite). Cette méthode FTP sécurisée compatible
avec les systèmes hérités permet aux clients FTPS d’adopter un échange sécurisé
avec un serveur FTPS sans pour autant rompre le fonctionnement avec les clients
qui ne prennent pas en charge le FTPS.
• Local/Réseau. La connexion locale ou réseau est en général utilisée avec un serveur
web intermédiaire, appelé serveur d’évaluation. Les fichiers du serveur d’évaluation
sont ensuite publiés sur un serveur web connecté à Internet.
• WebDav. Le système WebDav (Web-based Distributed Authoring and Versioning,
création et versionnage distribué sur le Web) est également connu des utilisateurs
Windows sous le nom de dossiers Web et des utilisateurs Mac sous le nom d’iDisk.
• RDS. Les RDS (Remote Development Services ou services de développement distant)
ont été développés par Adobe pour ColdFusion et sont principalement utilisés lors
du travail avec les sites ColdFusion.
Le moteur FTP de Dreamweaver CS6 a été entièrement revu. Dreamweaver peut
maintenant placer plus rapidement et plus efficacement les fichiers plus volumineux, en
vous permettant de reprendre plus rapidement le travail. Lors des prochains exercices,
vous allez configurer un site distant à l’aide des deux méthodes les plus courantes :
FTP et Local/Réseau.
390 leçon 15 Publier son site sur le Web

13:32:41 +0200 26/09/2012 10:31:18
Définir un site FTP distant
Une grande majorité de développeurs web s’appuient sur le protocole FTP pour publier
et gérer leurs sites. Ce protocole bien établi existe en plusieurs versions sur le Web,
dont la plupart sont prises en charge par Dreamweaver.
2. Choisissez Sites > Gérer les sites. � Attention :
Pour compléter
3. Lorsque la boîte de dialogue Gérer les sites s’ouvre, une liste de tous les sites que l’exercice qui
vous avez définis apparaît. S’il y en a plusieurs, assurez-vous que le site courant suit, vous devez
(DW-CS6) est sélectionné et cliquez sur Modifier. avoir configuré
un serveur
4. Dans la boîte de dialogue Définition du site pour DW-CS6, cliquez sur la catégorie d’évaluation.
Serveurs. Les serveurs
distants peuvent
La boîte de dialogue Définir permet de définir plusieurs serveurs, afin de pouvoir être hébergés
tester plusieurs types d’installations s’il le faut. par votre propre
entreprise ou
5. Cliquez sur l’icône Ajouter un nouveau serveur. fournis par
un prestataire
Dans le champ Nom du serveur, tapez GreenStart Server. d’hébergement
externe.
6. Dans le menu Se connecter au moyen de, choisissez FTP.
� Note : Si
vous n’avez
pas de service
d’hébergement
web distant, vous
pouvez utiliser
le serveur web
local que vous
avez configuré
7. Dans le champ Adresse FTP, tapez l’URL ou l’adresse IP de votre serveur FTP. aux leçons 13 et
14 pour tester ces
Si vous disposez d’un hébergement chez un prestataire, vous vous verrez attribuer fonctionnalités.
une adresse FTP. Cette adresse peut être fournie sous la forme d’une adresse IP,
du type 192.168.1.000. Tapez ce numéro exactement tel qu’il vous a été transmis.
Souvent, l’adresse FTP correspond au nom de votre site, comme ftp.greenstart.
org. Dreamweaver ne requiert pas que vous tapiez le terme “ftp” dans le champ.
8. Dans le champ Nom d’utilisateur, tapez votre nom d’utilisateur FTP. Dans le champ
Mot de passe, tapez votre mot de passe FTP.
Les champs de mot de passe sont généralement sensibles à la casse et il peut en
être de même pour le champ de nom d’utilisateur ; aussi, assurez-vous de les entrer � Astuce : Le cas
correctement. échéant, consultez
votre prestataire
9. Dans le champ Répertoire racine, tapez, s’il existe, le nom du dossier réservé aux d’hébergement
documents accessibles publiquement sur le Web. ou votre
administrateur
Certains hôtes web fournissent au niveau du dossier racine un accès FTP qui peut informatique pour
contenir des dossiers non publics – comme cgi-bin, qui est utilisé pour stocker connaître le nom
du répertoire
des scripts CGI (Common Gateway Interface) ou binaires –, ainsi qu’un dossier
racine.

13:32:41 +0200 26/09/2012 10:31:19
public. Dans ce cas, tapez le nom du dossier public (comme public, public_html,
www ou wwwroot) dans le champ Répertoire racine. Dans un grand nombre de
configurations d’hôte web, l’adresse FTP est la même que le dossier public et le
champ Répertoire racine doit être laissé vide.
10. Cochez l’option Enregistrer si vous ne souhaitez pas réentrer votre nom d’utilisateur
et votre mot de passe à chaque fois que Dreamweaver se connecte à votre site.
11. Cliquez sur Tester pour vérifier que votre connexion FTP fonctionne correctement.
Dreamweaver affiche un message qui indique si la connexion a réussi ou échoué.
12. Cliquez sur OK pour refermer l’alerte.

Si vous avez reçu un message d’erreur, il se peut que votre serveur web demande
des options de configuration supplémentaires.
13. Cliquez sur l’icône Autres options pour révéler d’autres options de serveur.
Consultez les instructions de votre prestataire de services d’hébergement pour

sélectionner les options appropriées à votre serveur FTP. Les options proposées
sont les suivantes :
Utiliser FTP passif. Permet à votre ordinateur d’opérer la connexion nécessaire
à l’ordinateur hôte et de contourner une restriction de pare-feu.
Utiliser le mode de transfert IPv6. Permet la connexion aux serveurs IPv6, qui
utilisent la version la plus récente du protocole de transfert Internet.
Utiliser un proxy. Identifie une connexion hôte proxy secondaire comme définie
dans vos préférences Dreamweaver.
Utiliser l’optimisation des performances FTP. Optimise la connexion FTP.
Décochez cette option si Dreamweaver ne parvient pas à se connecter à votre serveur.
Utiliser une méthode alternative de déplacement FTP. Fournit une méthode
supplémentaire pour résoudre les conflits FTP, notamment lorsque les annulations
de transactions sont activées ou lors du déplacement de fichiers.

13:32:41 +0200 26/09/2012 10:31:20
Dépannage de votre connexion FTP
Les premières tentatives de connexion au site distant peuvent être frustrantes. Il
existe de nombreux écueils, dont un certain nombre échappent à votre contrôle.
Voici quelques étapes à suivre si vous rencontrez un problème :
• Si vous ne pouvez pas vous connecter à votre serveur FTP, vérifiez votre nom
d’utilisateur et votre mot de passe, puis saisissez-les une nouvelle fois en redoublant
d’attention (une simple faute de frappe constitue l’erreur la plus courante).
• Cochez l’option Utiliser FTP passif et testez la connexion de nouveau.
• Si vous ne parvenez toujours pas à vous connecter à votre serveur FTP, décochez
l’option Utiliser l’optimisation des performances FTP, cliquez sur OK, puis sur
Tester de nouveau.
• Si aucune de ces étapes ne vous permet de vous connecter à votre site distant,
consultez votre administrateur informatique ou votre administrateur de site distant.
Une fois que vous avez établi une connexion opérationnelle, il peut être nécessaire
de configurer des options avancées.
14. Cliquez sur le bouton Avancé. Cochez les options suivantes pour travailler avec
votre site distant :
Conserver les informations de synchronisation. Tient automatiquement registre

des fichiers qui ont été changés sur les sites local et distant, afin qu’ils puissent
aisément être synchronisés. Cette fonctionnalité vous aide à suivre vos changements
et peut être utile si vous changez plusieurs pages avant le placement. Le voilage
peut être associé à cette fonctionnalité. Vous en apprendrez plus sur le voilage
lors d’un exercice ultérieur. En général, cette option est sélectionnée par défaut.
Télécharger automatiquement les fichiers vers le serveur lors de l’enregistrement.
Transfère les fichiers du site local vers le site distant, dès qu’ils sont enregistrés.
Cette option peut être agaçante si vous enregistrez souvent vos documents et que
vous ne souhaitez pas encore qu’une page soit publiée.
Activer l’extraction de fichiers. Lance le système de check-in/check-out pour
la construction collaborative de sites web dans un environnement de groupe de
travail. Si vous cochez cette option, vous devez entrer un nom d’utilisateur pour

13:32:41 +0200 26/09/2012 10:31:21
l’extraction (check-out) et éventuellement une adresse e-mail. Si vous travaillez
seul, inutile de cocher cette option.
Vous pourriez parfaitement conserver ces différentes options décochées, mais,
pour les besoins de cette leçon, activez l’option Conserver les informations de
synchronisation.
15. Cliquez sur Enregistrer pour enregistrer les réglages dans toutes les boîtes de
dialogue ouvertes.
Une boîte de dialogue s’ouvre et vous informe que le cache va être recréé, parce
que vous avez modifié les réglages du site.
16. Cliquez sur OK pour reconstruire le cache. Lorsque Dreamweaver termine la mise à
jour du cache, cliquez sur Fermer pour refermer la boîte de dialogue Gérer les sites.
Vous avez établi une connexion à votre serveur distant. Si vous ne possédez pas encore
de serveur distant, vous pouvez y substituer un serveur test local.
Définir un site distant sur un serveur local ou réseau

Si votre entreprise ou votre organisation utilise un serveur d’évaluation comme “inter-
médiaire” entre les concepteurs web et le site web public, vous devrez probablement
vous connecter à votre site distant sur un serveur local ou réseau. Vous utiliserez
� Attention :
Pour compléter également ce type de connexion pour vous connecter au serveur d’évaluation que
l’exercice suivant, vous avez installé et configuré à la Leçon 13, “Travailler avec des données en ligne”.
vous devez
avoir installé et 1. Lancez Adobe Dreamweaver CS6.
configuré un
serveur web local. 2. Choisissez Site > Gérer les sites.
3. Lorsque la boîte de dialogue Gérer les sites apparaît, assurez-vous que le site courant
� Note : Si vous (DW-CS6) est sélectionné et cliquez sur Modifier.
commencez cette
leçon en partant 4. Dans la boîte de dialogue Définition du site pour DW-CS6, sélectionnez la catégorie
de zéro, utilisez Serveurs.
la méthode
décrite dans la Si vous avez installé et configuré un serveur d’évaluation à la Leçon 13, il est affiché
sous-section
dans la liste des serveurs. Une coche apparaît sous la colonne Évaluation. Pour
“Démarrage
instantané” de la utiliser ce serveur comme serveur distant, cochez simplement l’option Distant.
section “Guide de
5. Si un serveur d’évaluation est déjà configuré dans la boîte de dialogue, cochez
démarrage”, au
début de ce livre. l’option Distant.

13:32:41 +0200 26/09/2012 10:31:21
Si vous n’avez pas encore configuré de serveur d’évaluation, vous devez d’abord
installer et configurer un serveur web local. Pour obtenir des informations détaillées
sur l’installation et la configuration d’un serveur web local, consultez la Leçon 13
ou rendez-vous aux adresses suivantes :
• Apache/ColdFusion. tinyurl.com/ setup-coldfusion
• Apache/PHP. tinyurl.com/ setup-apachephp
• IIS/ASP. tinyurl.com/ setup-asp
Une fois que vous avez configuré le serveur web local, vous pouvez l’utiliser pour
placer les fichiers complétés et tester votre site distant. Dans la plupart des cas,
votre serveur web local ne sera pas accessible depuis Internet ou ne pourra pas
héberger le site web effectif.
6. Cliquez sur l’icône Ajouter un nouveau serveur ( ).
Dans le champ Nom du serveur, tapez GreenStart Local.
7. Dans le champ Se connecter au moyen de, choisissez Local/Réseau.
8. Dans le champ Dossier du serveur, cliquez sur l’icône Parcourir ( ). Sélectionnez
le dossier HTML du serveur web local, comme Applications/ColdFusion9/wwwroot/
DW-CS6.
9. Dans le champ URL Web, tapez l’URL de votre serveur web local, comme http:// � Note : Les
localhost: 8888/DW-CS6 ou http://localhost/DW-CS6. chemins entrés
ici dépendent de
la manière dont
vous avez installé
votre serveur web
local et peuvent
ne pas être
Windows Mac OS X identiques à ceux
affichés.
10. Cliquez sur le bouton Avancé et, comme avec le serveur web réel, sélectionnez les
options appropriées pour travailler avec votre site distant : Conserver les informations
de synchronisation, Télécharger automatiquement les fichiers vers le serveur lors
de l’enregistrement et Activer l’extraction de fichiers.
Vous pourriez parfaitement conserver ces différentes options décochées, mais,
pour les besoins de cette leçon, activez l’option Conserver les informations de
synchronisation.

13:32:41 +0200 26/09/2012 10:31:22
11. Si vous souhaitez utiliser le serveur web local comme serveur d’évaluation également,
sélectionnez le modèle de serveur dans la section Avancé de la boîte de dialogue.
12. Cliquez sur Enregistrer pour finaliser la configuration du serveur distant.

13. Dans la liste des serveurs de la boîte de dialogue Configuration de site pour DW-CS6,
cochez la case Distant. Cliquez sur Enregistrer.
14. Dans la boîte de dialogue Gérer les sites, cliquez sur Terminer. Si nécessaire, cliquez
sur OK pour reconstruire le cache.
Seuls un serveur distant et un serveur d’évaluation peuvent être actifs à la fois. Un même
serveur peut cependant être utilisé pour les deux rôles. Avant de placer des fichiers sur
le site distant, il peut être utile de voiler certains dossiers et fichiers dans le site local.
Voiler des dossiers et des fichiers

Tous les fichiers dans le dossier racine de votre site n’auront pas nécessairement
besoin d’être transférés sur le serveur distant. Il est inutile de remplir de l’espace de
stockage distant avec des fichiers auxquels personne n’accédera, ou qui resteront
hors d’atteinte des utilisateurs du site. Il se peut que le prix de votre hébergement
� Note : Si vous varie en fonction de l’espace disque que votre site occupe. Si vous avez coché l’option
commencez cette
Conserver les informations de synchronisation pour un site distant qui utilise FTP
leçon en partant
de zéro, utilisez ou un serveur réseau, il peut être utile de voiler certaines de vos ressources locales
la méthode pour les empêcher d’être placées. Le voilage est une fonctionnalité de Dreamweaver
décrite dans la permettant de désigner certains dossiers et fichiers qui ne seront pas placés sur le site
sous-section
“Démarrage distant ou resteront exclus du processus de synchronisation.
instantané” de la Parmi les dossiers qui n’ont pas besoin d’être transférés sur le serveur distant figurent,
section “Guide de
démarrage”, au par exemple, les dossiers Template et Library. Certains autres fichiers non compatibles
début de ce livre. pour le Web, comme des fichiers Photoshop (.psd), Flash (.fla) ou Word (.doc) n’ont

13:32:41 +0200 26/09/2012 10:31:23
pas non plus besoin de se trouver sur le serveur distant. Si les fichiers voilés ne sont
pas automatiquement placés ou synchronisés, il reste possible de les charger manuel-
lement sur le serveur en cas de besoin.
Le processus de voilage commence dans la boîte de dialogue Configuration du site.
1. Choisissez Site > Gérer les sites.
2. Sélectionnez DW-CS6 dans la liste des sites et cliquez sur Modifier.
3. Déroulez la catégorie Paramètres avancés. Dans la catégorie Voilage, cochez les
options Activer le voilage et Voiler les fichiers se terminant avec.
Le champ sous les cases à cocher affiche les extensions .fla et .psd.
4. Placez le curseur après .psd et insérez un espace. Tapez .doc .txt .rtf.
Assurez-vous d’insérer un espace entre chaque extension. Comme ces types

de fichiers ne correspondent pas à des ressources pour le Web, vous éviterez à
Dreamweaver de les placer ou de les synchroniser automatiquement en plaçant
ici leurs extensions.
5. Cliquez sur Enregistrer. Dreamweaver peut vous demander de mettre à jour le
cache. Cliquez sur OK pour l’accepter. Ensuite, cliquez sur Terminer pour refermer
la boîte de dialogue Gérer les sites.
Le voilage manuel de fichiers ou de dossiers spécifiques est également possible.
6. Ouvrez le panneau Fichiers et cliquez sur le bouton Développer, afin de remplir
l’espace de travail. Si vous utilisez la méthode de démarrage rapide, passez les
étapes 7 et 8. Vous ne devriez pas avoir de dossiers de leçons dans votre installation.
Observez tous les dossiers de leçons. Ces dossiers renferment de grandes quantités
de contenu dupliqué inutile sur le site distant.
7. Cliquez du bouton droit sur le dossier lesson01. Dans le menu contextuel, choisissez
Voilage > Voiler.
8. Répétez l’étape 7 pour chacun des autres dossiers de leçons.
Les dossiers Template et Library n’ont pas besoin de se trouver sur le site distant,
car vos pages web ne contiennent aucune référence à ces ressources. En revanche,
si vous travaillez dans un environnement d’équipe, il peut être utile de placer et
de synchroniser ces dossiers, afin que chaque membre de l’équipe en possède des
versions à jour sur son propre ordinateur. Pour cet exercice, nous considérerons
que vous travaillez seul.
9. Appliquez le voilage au dossier Template.

13:32:41 +0200 26/09/2012 10:31:23
� Note : les Une boîte de dialogue apparaît et signale que “Le voilage de fichiers modèles ou
inclusions côté de bibliothèque ne porte que sur les commandes de placement ou d’acquisition,
serveur (SSi,
Server-Side
et non sur les opérations par lot dans le site”.
Includes) doivent
être placées sur
le serveur pour
qu’elles puissent
fonctionner.
10. Cliquez sur OK.

11. Répétez les étapes 9 et 10 pour voiler le dossier Library.
Avec la boîte de dialogue Configuration du site et le menu contextuel Voilage, vous
avez voilé des types de fichiers, des dossiers et des fichiers. Le processus de synchro-
nisation ignorera les éléments voilés.
emballage final
Au cours des quatorze dernières leçons, vous avez créé de toutes pièces un site web
complet incluant des applications dynamiques et du contenu interactif. Il reste cependant
quelques finitions à réaliser. Avant de publier votre site, vous devez créer un fichier
important et apporter des mises à jour essentielles à votre système de navigation.
Créer une page d’accueil

Le fichier que vous devez créer est essentiel dans tous les sites, puisqu’il s’agit de la
page d’accueil. La page d’accueil est la première page que la plupart des utilisateurs
découvrent sur un site. C’est elle qui se charge automatiquement quand l’utilisateur
entre le nom de domaine de votre site dans la barre d’adresse de son navigateur. Comme
la page se charge automatiquement, quelques restrictions s’imposent quant au nom
et à l’extension que vous pouvez utiliser.
Le nom et l’extension dépendent du serveur d’hébergement et, le cas échéant, du
type d’application qui s’exécute sur la page d’accueil. Dans la plupart des cas, la page
d’accueil est simplement nommée index. Les noms default, start et iisstart sont aussi
fréquemment utilisés.

13:32:41 +0200 26/09/2012 10:31:24
Comme vous l’avez vu précédemment, les extensions identifient les types spécifiques
de langages de programmation utilisés dans une page. Une page d’accueil HTML nor-
male utilisera une extension .htm ou .html. D’autres extensions, comme .asp, .cfm ou
.php, peuvent être requises si la page d’accueil contient des applications dynamiques
spécifiques au modèle de serveur correspondant. Vous pouvez utiliser l’une de ces
extensions (pourvu qu’elle soit compatible avec votre modèle de serveur) même si la
page ne contient pas d’application ou de contenu dynamique. Soyez cependant pru-
dent car, dans certains cas, l’utilisation d’une extension inappropriée peut empêcher
complètement la page de se charger. En cas de doute, utilisez .html, qui est pris en
charge dans tous les environnements.
Les noms de pages d’accueil reconnus par le serveur sont normalement configurés
par l’administrateur du serveur et peuvent être modifiés en cas de besoin. La plupart
des serveurs sont configurés de manière à reconnaître plusieurs noms et une variété
d’extensions. Vérifiez auprès de votre administrateur, de votre responsable informatique
ou de votre équipe de support pour le serveur web quels sont les noms et extensions
recommandés pour votre page d’accueil.
1. Créez un nouveau fichier à partir du modèle du site. Enregistrez-le sous le nom
index.html. Sinon utilisez un nom de fichier et une extension compatibles avec
votre modèle de serveur.
2. Ouvrez lesson15 > resources > home.html.
3. Insérez le curseur n’importe où dans le contenu. Cliquez sur le sélecteur de balises
<article>. Copiez tout le contenu et remplacez l’élément <article> dans la région
MainContent de la page d’accueil que vous avez créée à l’étape 1. Appliquez la classe
.content au nouvel élément <article>.
4. Dans l’encadré, remplacez l’espace réservé pour l’image par bike2work.jpg.

5. Remplacez la légende de remplissage par le texte suivant : GreenStart has launched
a new program to encourage Meridien residents to leave their cars at home
and bike to work. Sign up and tell a friend.
6. Modifiez le titre de la page en tapant Meridien GreenStart Association – Welcome
to Meridien GreenStart.
Observez les espaces réservés de lien hypertexte dans la région MainContent.
7. Placez le curseur dans le lien News. Dans l’inspecteur Propriétés, parcourez votre
système et reliez le lien à news.html.

13:32:41 +0200 26/09/2012 10:31:25
8. Répétez l’étape 7 avec chaque lien. Reliez les liens aux pages appropriées dans le
dossier racine de votre site.
9. Enregistrez et fermez tous les fichiers.
La page d’accueil est terminée. Supposons que vous souhaitiez charger le site dans son
état actuel, même si certaines pages doivent encore être créées. Cela peut arriver au
cours du développement de n’importe quel site. Des pages sont ajoutées ou suppri-
mées au fil du temps. Les pages manquantes sont finalisées et placées ultérieurement.
� Attention : Il Dans le cas présent, vous avez créé des pages pour tous les liens à l’exception de deux
existe plusieurs dans votre système de navigation actuel : Green Club et Member Login. Le développe-
versions de cet
ment des pages d’inscription et de connexion a été reporté pour être réalisé sous peu
élément dans les
dossiers de leçons, et les liens doivent être supprimés. En outre, quelques-uns des liens du menu vertical
aussi assurez- ciblent actuellement des pages qui ont été renommées (les pages Products et Events).
vous d’ouvrir le Avant de pouvoir charger le site sur un serveur public, vous devez mettre à jour les
bon pour cette
procédure. liens périmés et supprimer les liens morts.
Mettre à jour des liens

Tous les liens périmés sont contenus dans le menu vertical, qui fait actuellement partie
� Note : Le
menu vertical du modèle de site. Vous pouvez mettre à jour le site entier en modifiant le modèle et
est toujours un en enregistrant les modifications.
composant Spry.
Vous pouvez donc 1. Ouvrez le modèle de site.
utiliser l’interface
de menu intégrée
Ce modèle doit contrôler toutes les pages du site actuel.
pour opérer vos 2. Insérez le curseur dans le lien Green Products. La page est liée à products.html, qui
modifications
nécessaires. n’existe pas. Dans le champ Lien de l’inspecteur des propriétés, naviguez jusqu’au
Pour accéder à dossier racine du site et sélectionnez products.php, que vous avez créé à la Leçon
l’interface, cliquez 14, “Créer des pages dynamiques avec des données”.
sur le sélecteur
de balises pour 3. Placez le curseur dans le lien Green Events. Reliez-le à la nouvelle page dynamique
<ul.MenuBar1. Events créée à la Leçon 14. Utilisez l’inspecteur des propriétés pour la barre de
MenuBarVerti-
cal>.
menus Spry afin de mettre à jour les liens pour 2012-2013 Events Calendar et
2012-2013 Class Schedule. Changez l’extension .html en .php.
� Astuce : Au lieu 4. Placez le curseur dans le lien Green Club. Cliquez sur le sélecteur de balises <li>
de reconstruire le
lien entier pour
et appuyez sur Suppr.
le calendrier et
l’agenda de la
classe, changez
simplement
l’extension du
nom de fichier
events.html
pour la faire En supprimant l’élément parent, vous effacez les deux liens Green Club et Member
correspondre à
votre version.
Login. Vous pourrez recréer ces liens par la suite, si ces pages sont développées.

13:32:41 +0200 26/09/2012 10:31:26
Check-list avant publication
Profitez de cette occasion pour passer en revue toutes les pages de votre site avant
de les publier, afin de voir si elles sont prêtes pour ce grand événement. Lors d’un
développement réel, vous devrez effectuer toutes les actions suivantes (ou la plupart
d’entre elles), que vous avez apprises dans les leçons précédentes, avant de placer
la moindre page sur le site :
• vérification de la compatibilité avec les navigateurs du site entier (Leçon 4,

“Créer une mise en page”) ;
• vérification orthographique du site entier (Leçon 7, “Travailler avec du texte,
des listes et des tableaux”) ;
• vérification des liens dans le site entier (Leçon 9, “Travailler avec les éléments
de navigation”).
Résolvez tous les problèmes repérés, puis passez à l’exercice suivant.
5. Enregistrez le modèle. Dreamweaver vous demande de mettre à jour le site. Cliquez

sur Mettre à jour.
La boîte de dialogue Mettre à jour les pages apparaît et signale quelles pages ont été
mises à jour et lesquelles ne l’ont pas été. Si vous ne voyez pas le rapport, cliquez
sur l’option Afficher le journal.
6. Cliquez sur le bouton Fermer. Fermez le modèle.
Le menu de navigation vertical a été mis à jour dans l’ensemble du site et vos pages
sont maintenant presque prêtes à être placées.
Encadré de côté
Lorsque vous avez construit les pages pour votre site, vous vous êtes principalement
concentré sur le contenu principal et les applications, en ignorant le contenu de
l’encadré latéral dans un certain nombre de pages. Ces pages n’ont donc jamais été
finalisées. Ces exercices n’étant destinés qu’à des fins d’entraînement, il n’est pas
nécessaire de compléter ces pages. Cependant, s’il n’est pas dans vos habitudes
de mal terminer ce que vous avez commencé, prenez quelques minutes pour les
finaliser maintenant. Les figures ci-après présentent quelques suggestions, mais
n’hésitez pas à remplir le contenu des encadrés à votre guise. Les images présentées
sont disponibles dans le dossier par défaut des images du site.
events.php tips.html

13:32:41 +0200 26/09/2012 10:31:27
Publier le site
Le site local est, en grande partie, un miroir du site distant. Ils contiennent tous deux
les mêmes fichiers HTML, images et autres ressources au sein de la même structure
de dossiers. Lorsque vous transférez une page web de votre site local vers votre site
distant, vous publiez ou placez votre page. Si vous placez un fichier stocké dans un
dossier sur votre site local, Dreamweaver transfère le fichier vers le dossier équivalent ;
si nécessaire, il crée même automatiquement le dossier sur le site distant.
� Attention : Dreamweaver permet de publier en une seule opération un simple fichier ou votre
Dreamweaver site tout entier. Lorsque vous publiez une page web, Dreamweaver vous demande si
est assez efficace
vous souhaitez placer les fichiers dépendants également. Ces derniers désignent les
pour identifier
tous les fichiers images, les animations Flash, les fichiers JavaScript, les feuilles de style externes CSS,
dépendants dans les fichiers include côté serveur et tous les autres éléments nécessaires pour complé-
un processus
ter la page. Dreamweaver place automatiquement tous ces fichiers dépendants dans
particulier, mais
dans certains cas les dossiers appropriés, afin de répliquer leur emplacement sur votre site local. Si un
il peut omettre dossier n’existe pas sur le serveur distant, Dreamweaver le crée pour vous. Il en va de
des fichiers même quand vous téléchargez des fichiers.
cruciaux pour le
fonctionnement Vous pouvez placer les fichiers un à un ou le site tout entier.
dynamique. Il
est impératif de 1. Présentez le panneau Fichiers et, si nécessaire, cliquez sur l’icône Développer ( ).
veiller à identifier
ces fichiers et de
2. Cliquez sur le bouton Connecter à un serveur distant ( ) pour vous connecter
s’assurer qu’ils au site distant.
sont placés.
Si votre site distant est correctement configuré, le panneau Fichiers se connecte

au site et affiche son contenu dans la fenêtre de gauche. Lorsque vous placez les
fichiers la première fois, le site distant doit être vide ou presque. Si vous utilisez
votre serveur d’évaluation pour votre site distant, il se peut que vous voyiez le
dossier Connexions et un ou plusieurs des fichiers testés à la Leçon 14. Si vous vous
connectez à votre hôte Internet, des fichiers et des dossiers spécifiques peuvent y
figurer, qui ont été créés par votre fournisseur d’hébergement. Ne supprimez pas ces
� Note : Si éléments, à moins d’avoir la certitude qu’ils ne sont pas essentiels au fonctionnement
Dreamweaver ne
vous demande du serveur ou de vos applications.
pas de placer 3. Dans la liste des fichiers locaux, sélectionnez index.html. Dans la barre d’outils
les fichiers
dépendants, Document, cliquez sur l’icône Placer ( ).
il se peut que
Par défaut, Dreamweaver vous demande de placer les fichiers dépendants. Si un
cette option
soit désactivée. fichier dépendant se trouve déjà sur le serveur et que vos modifications ne l’ont
Pour la réactiver, pas affecté, cliquez sur Non. Pour les nouveaux fichiers ou pour ceux qui ont été
accédez-y dans la beaucoup modifiés, cliquez sur Oui. Dreamweaver place alors les images, les fichiers
catégorie Site des
préférences de CSS, les fichiers JavaScript et les fichiers include côté serveur, ainsi que tous les
Dreamweaver. fichiers dépendants requis pour afficher correctement le fichier HTML sélectionné.

13:32:41 +0200 26/09/2012 10:31:27
Vous pouvez aussi placer plusieurs fichiers à la fois ou l’ensemble du site.
4. Cliquez du bouton droit sur le dossier racine du site pour le site local.
� Note : Un
fichier placé sur
le serveur ou
téléchargé sur
votre ordinateur
Dans le menu contextuel, choisissez Placer. Une boîte de dialogue apparaît qui vous écrase toujours
le fichier à
demande de confirmer que vous souhaitez placer le site entier. destination.
5. Cliquez sur OK.
� Note :
Dreamweaver recrée la structure de votre site local sur le site distant. Vous Les pages
remarquerez qu’aucun des dossiers de leçons voilés n’a été placé. En général, dynamiques
créées
Dreamweaver ignore tous les éléments voilés lors du placement d’un dossier ou
précédemment
d’un site entier. Si vous le souhaitez, vous pouvez par vous-même sélectionner et peuvent ne
placer individuellement les éléments voilés. pas s’afficher
correctement sur
� Attention : parmi les pages que vous placez, plusieurs incluent du contenu dynamique utilisant le site distant,
ASP, ColdFusion ou PHP ! La base de données et les fichiers de support requis pour ces applications, tant que les
qui ne sont pas stockés dans la structure de votre site, peuvent ne pas être placés pendant cette connexions à la
opération. Vous devrez probablement les localiser et les placer manuellement. Dans tous les cas, base de données
notez qu’une configuration supplémentaire sera requise sur le serveur distant et la base de données ne sont pas
avant que ces applications dynamiques puissent fonctionner correctement. correctement
configurées.
6. Cliquez du bouton droit sur le dossier Templates et choisissez Placer. Assurez-
vous d’avoir
Dreamweaver vous demande de placer les fichiers dépendants pour le dossier terminé votre
Templates. configuration
avant de tester
ces pages.
� Note : Les
commandes
d’acquisition ou
de placement
7. Cliquez sur Oui pour placer les fichiers dépendants. fonctionnent
de la même
Le dossier Templates est placé sur le serveur distant. Vous remarquerez qu’il est manière, que vous
marqué d’une barre oblique rouge signalant qu’il est voilé également. Parfois, vous vous trouviez
pourrez voiler des dossiers locaux et distants, afin d’empêcher que des fichiers dans le volet
Local ou Distant
soient remplacés ou accidentellement écrasés. Un fichier voilé n’est jamais placé du panneau
ou téléchargé automatiquement. Vous devez sélectionner des fichiers spécifiques Fichiers. Placer
et réaliser l’opération manuellement. charge toujours
les fichiers à
L’opération inverse du placement est l’acquisition. Vous pouvez acquérir n’importe distance. Acquérir
quel fichier du site distant en le sélectionnant dans le volet Site distant ou Fichiers télécharge
toujours les
locaux et en cliquant sur Acquérir le(s) fichier(s) (la flèche qui pointe vers le bas). fichiers dans le
Sinon faites glisser le fichier du panneau Site distant vers le panneau Fichiers locaux. dossier local.

13:32:41 +0200 26/09/2012 10:31:28
8. Utilisez un navigateur pour vous connecter au site distant sur Internet ou sur votre
serveur réseau. Tapez l’URL exacte dans la barre d’adresse du navigateur (selon que
vous vous connectez au serveur web local ou au site Internet lui-même), comme
http://localhost/DW-CS6 ou http://www.green-start.org.
Le site GreenStart doit apparaître dans le navigateur. Cliquez pour tester les liens
hypertexte et observez chacune des pages terminées. Une fois que le site est placé,
il est très facile de le garder à jour. Quand des fichiers changent, vous les placez un
à un ou synchronisez l’ensemble du site avec le serveur distant. La synchronisation
est particulièrement importante dans les environnements de groupe de travail, où les
fichiers sont changés et placés par plusieurs personnes.
Synchroniser les sites local et distant

Dans Dreamweaver, la synchronisation est utilisée pour maintenir à jour les fichiers
sur votre serveur et votre ordinateur local. Il s’agit d’un outil essentiel lorsque vous
travaillez depuis plusieurs emplacements ou collaborez avec d’autres personnes. Bien
utilisée, la synchronisation peut vous empêcher de placer ou de modifier accidentel-
lement des fichiers périmés.
Pour le moment, les sites local et distant sont identiques. Pour mieux illustrer les
capacités de synchronisation de Dreamweaver, apportons une modification à l’une
des pages du site.
1. Ouvrez about_us.html.
2. Dans le titre principal, sélectionnez le texte Green dans le nom GreenStart. Appliquez
la classe CSS .green à ce texte.
3. Appliquez la classe CSS .green à chaque occurrence du mot green partout dans
la page.
4. Enregistrez et fermez la page.
5. Ouvrez et développez le panneau Fichiers. Cliquez sur l’icône Synchroniser ( )
dans la barre d’outils Document.
La boîte de dialogue Synchroniser les fichiers apparaît.
� Note : 6. Dans le menu Synchroniser, sélectionnez l’option Tout le site ‘DW-CS6’. Dans le
Les lecteurs menu Direction, sélectionnez l’option Placer et obtenir les fichiers plus récents.
qui utilisent
la méthode
Démarrage
instantané verront
apparaître le nom
du dossier de site
courant dans le
menu.
Sélectionnez les options de cette boîte de dialogue qui conviennent à vos besoins
et à votre situation.

13:32:41 +0200 26/09/2012 10:31:29
options de synchronisation
durant la synchronisation, vous choisirez d’accepter l’action suggérée ou de la
redéfinir en sélectionnant une à une les autres options dans la boîte de dialogue.
les options peuvent être appliquées à un ou à plusieurs fichiers à la fois.
Obtenir. Télécharge les fichiers sélectionnés depuis le site distant.
Placer. Place les fichiers sélectionnés sur le site distant.
Supprimer. Supprime les fichiers sélectionnés.
Ignorer. ignore les fichiers sélectionnés durant la synchronisation.
Synchronisé. identifie les fichiers sélectionnés comme étant déjà synchronisés.
Comparer. emploie un utilitaire tiers pour comparer les versions locale et

distante d’un fichier sélectionné.
7. Cliquez sur Aperçu.

La boîte de dialogue Synchroniser apparaît et indique quels fichiers ont changé et
s’il faut les placer ou les acquérir. Comme vous venez de placer le site entier, seul
le fichier about_us.html doit apparaître dans la liste, Dreamweaver indiquant que
vous devez le placer sur le site distant.
8. Cliquez sur OK pour placer le fichier.
Si d’autres personnes accèdent aux fichiers de votre site et les mettent à jour, n’oubliez
pas d’exécuter la synchronisation avant de travailler sur ces fichiers pour vous servir
des versions actuelles de chacun des fichiers de votre site.
Dans cette leçon, vous avez paramétré votre définition de site afin de vous connecter
à un serveur distant et placé vos fichiers sur ce site. Vous avez également voilé des
fichiers et des dossiers, puis synchronisé les sites local et distant.
Félicitations ! Vous avez conçu, développé et créé un site web entier et l’avez placé
sur votre serveur distant. En terminant tous les exercices de ce livre, vous avez acquis
de l’expérience dans tous les aspects de la conception et du développement de sites
web. Vous êtes maintenant prêt à créer et à publier votre propre site. Bonne chance !
Adobe dreAmWeAver CS6 ClASSroom in A book 405

13:32:41 +0200 26/09/2012 10:31:29
Révisions
Questions
1. Qu’est-ce qu’un site distant ?
2. Nommez deux types de transferts de fichiers pris en charge dans Dreamweaver.
3. Comment configurer Dreamweaver pour qu’il ne synchronise pas avec le serveur
certains fichiers dans le dossier racine de votre site ?
4. Vrai ou faux : vous devez publier manuellement chaque fichier et chaque image,
fichier JavaScript ou fichier include côté serveur lié aux pages dans votre site.
5. Quel service réalise la fonctionnalité de synchronisation ?
Réponses
1. Le site distant est un miroir du site local. Il est stocké sur un serveur web connecté
à Internet.
2. FTP (File Transfer Protocol) et Local/Réseau sont les deux types le plus couramment
utilisés. Parmi les autres possibilités de transfert dans Dreamweaver, on peut citer
SecureFTP, WebDav et RDS.
3. Voilez les fichiers ou les dossiers que vous ne souhaitez pas synchroniser.
4. Faux. Dreamweaver transfère automatiquement les fichiers dépendants, si vous le
souhaitez, notamment les images incorporées ou référencées, les feuilles de style
CSS et les animations Flash.
5. La fonctionnalité de synchronisation scanne automatiquement les sites local et
distant, compare les fichiers aux deux emplacements et identifie la version la plus
courante de chacun. Elle crée une fenêtre de rapport pour indiquer quels fichiers
elle suggère de placer ou d’acquérir, afin de mettre à jour les deux sites, puis réalise
la mise à jour.

13:32:41 +0200 26/09/2012 10:31:30
Annexe URL raccourcie
Page url raccourcie url complète
Leçon 4
85 http://tinyurl.com/html-differences http://www.w3.org/TR/html5-diff/
85 http://tinyurl.com/html-differences-1 http://www.htmlgoodies.com/html5/tutorials/
Web-Developer-Basics-Differences-Between-HTML4-And-
HTML5-3921271.htm#fbid=ZkdgDbQj8IJ
85 http://tinyurl.com/html-differences-2 http://en.wikipedia.org/wiki/HTML5
Leçon 10
284 http://tinyurl.com/widgets-browser http://labs.adobe.com/technologies/widgetbrowser/
Leçon 11
297 http://tinyurl.com/video-1-HTML5 http://www.w3schools.com/html5/html5_video.asp
297 http://tinyurl.com/video-2-HTML5 http://www.808.dk/?code-html-5-video
297 http://tinyurl.com/video-3-HTML5 http://www.htmlgoodies.com/html5/client/

how-to-embed-video-using-html5.html#fbid=ZkdgDbQj8IJ
Leçon 12
307 http://tinyurl.com/HTML5-input http://w3schools.com/html5/html5_form_input_types.asp
328 http://tinyurl.com/asp-formmailer http://www.devarticles.com/c/a/ASP/

Sending-Email-From-a-Form-in-ASP/
328 http://tinyurl.com/cf-formmailer http://www.quackit.com/coldfusion/tutorial/coldfusion_

mail.cfm
328 http://tinyurl.com/php-formmailer http://www.html-form-guide.com/email-form/

php-form-to-email.html
Leçon 13
349 http://tinyurl.com/setup-asp http://www.adobe.com/devnet/dreamweaver/articles/

setup_asp.edu.html?PID=4166869
349 http://tinyurl.com/IIS-setup http://learn.iis.net/page.aspx/28/

installing-iis-on-windows-vista-and-windows-7
408 ANNEXE – URL raccourcie

13:32:41 +0200 26/09/2012 10:32:57
Page url raccourcies url complète
349 http://tinyurl.com/setup-ColdFusion http://www.adobe.com/devnet/dreamweaver/articles/

setup_cf.edu.html?PID=4166869
349 http://tinyurl.com/setup-apachephp http://www.adobe.com/devnet/dreamweaver/articles/

setup_php.edu.html?PID=4166869
349 http://tinyurl.com/WAMP-setup http://www.wampserver.com/en/
349 http://tinyurl.com/MAMP-setup http://www.mamp.info/en/index.html
349 http://tinyurl.com/XAMPP-server http://www.apachefriends.org/en/xampp.html
Leçon 14
362 http://tinyurl.com/sql-primer http://www.adobe.com/devnet/dreamweaver/articles/

sql_primer.edu.html?PID=4166869
362 http://tinyurl.com/sql-tutorial http://www.w3schools.com/sql/default.asp
Leçon 15
395 http://tinyurl.com/setup-asp http://www.adobe.com/devnet/dreamweaver/articles/

setup_asp.edu.html?PID=4166869
Adobe Dreamweaver CS6 Classroom in a Book 409

13:32:41 +0200 26/09/2012 10:32:57
Index
A img 210
input 306
Accentuation des images 230
label 319
Accessibilité 307
sélecteur 182
Accordéon Spry 280
titres 173
ajouter des panneaux 281
video 296
personnaliser 282
Bases de données 352
action 304
connexion 354, 363
active 123
jeu d’enregistrements 362
Adobe
MySQL 354
Centre de support XVII
Bibliothèque
certification XVIII
créer des éléments 152
Affichage en direct
enregistrer 154
inclusions côté serveur 161
mettre à jour 156
Ajax 249
Bitmap 204
Alignement 91
blockquote 178
tableaux 193
Boîte CSS 45
Alinéas 178
Boutons
alt 210
envoi 304, 322
Ancres 244
radio 304, 317
Animations 288
Bridge 215
Aperçu avant impression 136
Bringing objects forward. Voir layers
Arrière-plan 44
couleur 93
des éléments HTML 59 C
images 45 Cadratins 259
pied de page 101 caption 194
pour l’en-tête 84 Cascade 47
aside 145 Cases à cocher 304, 315
ASP 325, 348, 362 Certification Adobe XVIII
Attributs Champs
alt 210 masqués 304
class 50, 65 texte 304, 308
color 41 Spry 309
ID 65, 119, 275 Citation 178
Attributs, action 304 Classes 117
pseudo-classes 123
B Code
Navigateur dans le code 53
Balises
rechercher et remplacer 198
aside 145
ColdFusion 325, 348, 362, 390
br 318
Colonnes
div 30
factices 128
Éditeur 180
mise en page 82
fieldset 312
tableaux 187, 189
form 305
Commandes
HTML4 30
Enregistrer tout 132
HTML5 33
410 Index

13:32:41 +0200 26/09/2012 10:33:08
panneaux 7 présentation 40
Windows et Mac XV pseudo-classes 123
Compatibilité retrouver des règles avec le
navigateurs 102 Navigateur dans le code 97
vérifier 265 sélecteurs descendants 115
Comportements 270 spécificité 51
appliquer aux liens 277 tableaux 185
permuter les images 275 CSS3
supprimer 277 effets 66
Connexion prise en charge 66
FTP 393
Connexion FTP 391
Couleur D
arrière-plan 93 Descendance 50
images 206 Div 30
Couleur du texte 110 arrière-plan 44
Courrier électronique 326 insérer une Div PA 88
CSS Données
active 123 afficher 367
alignement 91 afficher le nombre d’enregistrements
attacher une feuille de style 329 379
automatisation de Dreamweaver 108 HTML 337
cascade 47 jeu d’enregistrements 362
créer de nouvelles règles 115 mise en forme 380
créer des classes 117 page de détails 384
descendance 50, 115 page principale 372
em 259 pagination 377
feuille de style externe 130 région répétée 369
float 91 types Spry 341
font-size 113 XML 337, 345
formulaires 329 Dossiers
height 57 fichiers d’exemple XII
héritage 48 panneau 215
hover 123 voiler 396
ID 119 Dreamweaver
images 212 aide XVI
inspecteur Propriétés 16 comportements 270
link 123 définir un site 78
livres recommandés 68 écran de bienvenue 79
margin 60 extensions 270
mesures absolues ou relatives 56 fichiers dépendants 369
modèle de boîte 45 outils graphiques 230
modifier le comportement des liens voilage 396
125 Dreamweaver, installation XII, 161
Navigateur dans le code 263
ordre des règles 174, 188
padding 60 E
panneau Styles CSS 106 Éditeur de balises 180
polices 110 Effets
positionnement 62 CSS3 66
graphiques avec des images 113

13:32:41 +0200 26/09/2012 10:33:08
Spry 249 MP4 294
survol 342 PNG 209, 223
E-mail PSD 218
créer un lien 243 WebM 294
données de formulaire 326 Formulaires 301, 335, 361
En-tête accessibilité 307
arrière-plan 84 action 324
Entités HTML 32 attribut action 304
Erreurs bouton d’envoi 322
validation 249 boutons radio 317
Espace de travail 4 cases à cocher 315
réorganiser les panneaux 7 éléments 304
sélectionner 11 ensemble de champs 312
Espaces réservés 100 envoyer 304
Événements 270 envoyer par e-mail 326
Exemples étiquettes 319
fichiers XII HTML5 307
Extensions 270 insérer 305
fichiers 357 introduction 303
langages 399 listes 320
voiler 397 méthodes d’envoi 325
mise en forme 329
mots de passe 313
F tabulations 323
Feuille de style validation 310
supports 132 validation Spry 249
Fichiers zones de texte 319
dépendants 369 FTP 390, 391
d’exemple XII optimiser les performances 392
extensions 357 passif 392
FLV 294
GIF 208
JPEG 208 G
MP4 294 GET 325
PNG 209, 223 GIF 208
PSD 218 Google Maps 236
tout enregistrer 132
voiler 396
WebM 294 H
fieldset 312 Hauteur 57
Fireworks 78, 230 pourcentage 58
Flash 288, 402 height 57
FLV 294 Héritage 48
FLV 294 hover 123
font-size 113 HTML
form 305 alt 210
Formats ancres 244
FLV 294 aside 145
GIF 208 balises 30
JPEG 208 balises HTML5 33
données 338
412 Index

13:32:41 +0200 26/09/2012 10:33:09
entités 23, 32 PNG 209, 223
exemple 22 position 212
fieldset 312 Procédure stockée 230
form 305 propriétés 16, 227
introduction 20 recadrer 230
listes 175 rééchantillonner 230
livres recommandés 29 résolution 205
mise en forme 41 taille 206
nouveautés HTML5 32 vectorielles 204
sémantique 83 img 210
structure 25 Impression
styles par défaut 42 aperçu 136
syntaxe 22 créer une feuille de styles 133
tableaux 181 différence avec le Web 74
titres 173 résolution 205
video 296 include 159
Inclusions côté serveur 157
mettre à jour 162
I input 306
ID 119 inspecteur Propriétés
attribuer aux images 275 Spry 250
destinations de liens 246 Inspecteur Propriétés 15
tableaux 247 Installation
Images Dreamweaver XII, 161
accentuer 230 fichiers dexemple XII
aperçu 225 iPhone 288
arrière-plan 45 IPv6 392, 393
attribut alt 210
bitmap 204
couleur 206 J
créer un lien 240 JavaScript 338
déplacer depuis le panneau Actifs Ajax 249
211 comportements 270
dynamiques 374 Jeu d’enregistrements
éditeur par défaut 230 afficher le nombre 379
effets 113 pagination 377
espace réservé 100 JPEG 208
fenêtre Images 211 jQuery 270
Fireworks 223, 230
gérer avec Bridge 215
GIF 208 L
ID 275 label 319
insérer 210 Largeur 56
insérer par glisser-déposer 227 absolue 259
JPEG 208 absolue ou relative 56
modifier dans Dreamweaver 230 de page 93
optimiser 227 Légendes 194
paramètres 230 Liens
permuter 275 absolus 234
Photoshop 221, 223 ancres 244
appliquer des comportements 277

13:32:41 +0200 26/09/2012 10:33:09
cibler des éléments 244 Modes
de messagerie 243 Code 5
destinations 246 Création 5
externes 234 Fractionner 6
image 240 Mots de passe 313
internes MP4 294
créer 237 MySQL 354
internes 234
créer 241
mettre à jour 400 N
modifier le comportement 125 Navigateur dans le code 53, 263
présentation 234 retrouver des règles 97
relatifs 234 Navigateurs
survol 123 compatibilité 102
vérifier 265 compatibilité pour les formats vidéo
visités 123 294
link 123 mise en forme par défaut 43
Listes 96, 175, 304, 320 vérifier la compatibilité 265
M O
MAMP 350 Objets dynamiques 221
Marges 60 Orthographe 195
margin 60
Masquage
champs 304 P
Menus 304 padding 60
interactifs 122 Page
Spry 248 ajouter un formulaire 305
Mise en forme cibler des éléments 244
bibliothèque 152 colonnes factices 128
créer une structure de page 75 composants Spry 249
données dynamique 380 contenu dynamique 336
formulaires 329 couleur d’arrière-plan 93
inclusions côté serveur 157 créer à partir d’un modèle 146
insérer une div PA 88 créer une structure 75
maquettes 75 d’accueil 398
modèles 141 de détails 384
objets 55 détacher d’un modèle 153
positionnement 62 en-tête 84
styles HTML 42 insérer des inclusions côté serveur
tableaux 185 159
tableaux Spry 342 insérer une vidéo 293
texte 46, 170 largeur 93
Modèles 141, 238 pied de page 101
créer 143 principale 372
de serveur 348 vérifier 265
détacher 153 Pagination 377
mettre à jour 149 afficher ou masquer les contrôles 378
régions modifiables 144 Panneaux
accordéon Spry 281
414 Index

13:32:41 +0200 26/09/2012 10:33:09
Actifs 211 Résolution 205
Bases de données 363 Retrait du texte 178
commandes 7
Comportements 270
Dossiers 215 S
Insertion 213 Sauts de ligne 318
réduire 7 Sauvegarde
rendre flottants 8 commande Enregistrer tout 132
Styles CSS 106, 329 précautions 84
PhoneGap 270 Sélecteurs
Photoshop 78, 230 descendants 115
objets dynamiques 221, 230 pseudo-classes 123
PHP 325, 349, 362 Sémantique 83
Pied de page 101 Serveur
PNG 209 évaluation 350
Polices 110 local 349, 394
couleur 110 modèle 348
em 259 proxy 392
groupes 110 WAMP/MAMP 350
taille 24, 112 Windows 351
Polics Site
choix 40 définir 78
Positionnement 62 Sites
images 212 ColdFusion 390
POST 325 distant 390
Préférences 13 FTP 391
accessibilité 307 publier 389, 402
éditeur dimages 230 synchroniser 404
fichiers dépendants 369 Spécificité 51
voilage 396 Spry 249
Propriétés accordéon 280
float 91 barre de menus 248
font-size 113 champs texte 309
height 57 données 249
images 227 effets 249
margin 60 fichiers liés 251
padding 60 inspecteur Propriétés 250
Proxy 392 modifier des menus 254
Publication 389, 402 types de données 341
validation 249, 310
widgets 279
R SQL 365
Raccourcis clavier 14 Structure
RDS 390 formulaires 327
Recadrage des images 230 Survol 123
Rééchantillonnage 230 effets 342
Régions permuter les images 275
modifiables 142, 144 Synchronisation 404
répétées 369 options 405
remplissage 60
Réseau 394

13:32:41 +0200 26/09/2012 10:33:10
T video 296
Vidéos 288
Tableaux 181
compatibilité des navigateurs 294
ajouter un ID 247
FLV 294
alignement 193
insérer dans une page 293
cellules 187
MP4 294
colonnes 187, 189
WebM 294
données 338
Vignettes 75
dynamiques 370
Voilage 396
légendes 194
propriétés 16
Tabulations 323 W
Taille
WAMP 350
des images 230
WebDav 390
résolution 205
WebM 294
texte 112
Widgets 279
Texte
Windows
citation 178
ASP 348
couleur 110
commandes XV
em 259
serveurs 351
mise en forme 46
WebDav 390
orthographe 195
XAMPP 349
polices 110
rechercher et remplacer 197
retrait 178 X
saisie 306
XML 337, 345
sauts de ligne 318
Ajax 249
taille 112
TinyURL XI
Titres 173 Z
mise en forme par défaut 174 Zones de texte 304
Types de données Spry 341
V
Validation 310
erreurs 249
Vectorisation 204
Vérification
comptabilité avec les navigateurs 265
orthographe 195
416 Index

13:32:41 +0200 26/09/2012 10:33:10
Télécharger les fichiers d’exercices
Pour télécharger les fichiers nécessaires à la réalisation de l’ensemble de vos leçons,

rendez-vous sur www.pearson.fr, à la page dédiée à cet ouvrage, dans la rubrique
Compléments.
Un identifiant et un mot de passe vous seront demandés.

Identifiant : CIABCS6_Dreamweaver
Mot de passe : 9782744025518
Attention, le téléchargement peut prendre quelques minutes.
Le logiciel Adobe Dreamweaver CS6 n’est pas inclus dans les fichiers qui accompagnent
cet ouvrage. Vous devez l’acheter séparément. Pour des instructions complètes sur
l’installation de ce logiciel, reportez-vous au fichier Lisez-Moi ou allez sur le Web à l’adresse
www.adobe.fr/support.
Page de fin CIAB.Dream.indd 1 22/10/12 12:57
customer 571196 at 2016-08-08

13:32:41 +0200
Adobe® Dreamweaver® CS6

Apprenez à concevoir des pages web
statiques et dynamiques et à incorporer
des images, du texte et des vidéos.
Créez des applications interactives
riches avec HTML5 et CSS3, publiez vos
sites web et gérez-les facilement.
CLASSROOM
La méthode la plus rapide, la plus simple et la plus « Classroom in a Book
complète pour maîtriser Adobe Dreamweaver CS6 est de loin la meilleure
IN A BOOK®
Classroom in a Book, collection au succès mondial, vous aide à collection d’ouvrages
découvrir facilement et rapidement les fonctionnalités des logiciels
Adobe. Elle apporte ce qu’aucun autre ouvrage ou programme de d’apprentissage et de
formation ne propose : des supports pour travaux pratiques conçus formation existant sur
spécialement par des experts en produits Adobe.
le marché. Tout ce dont
Les quinze leçons de cet ouvrage couvrent l’ensemble des notions de
base d’Adobe Dreamweaver CS6 et vous fournissent une multitude
vous avez besoin pour
d’astuces et de techniques pour vous aider à optimiser votre produc- maîtriser les logiciels
tivité. Vous pouvez suivre chacune de ces leçons dans l’ordre ou bien
ne choisir que celles qui vous intéressent.
est inclus : explications
Découvrez les nouvelles fonctionnalités de Dreamweaver CS6 :
claires, instructions pas
• Mises en page et animations HTML5 à pas et fichiers des
• Vidéos HTML5
• Création de styles avec les nouveautés de CSS3
projets. »
Barbara Binder, formatrice certifiée
Ce qu’il vous faut pour suivre les leçons : Le logiciel Adobe Adobe Rocky Mountain Training.
Dreamweaver CS6 pour Windows ou Mac OS (non fourni avec le
livre). Bonus : 2 heures
de tutoriels en VO
d’Adobe Dreamweaver CS6 :
Inclus : un DVD-ROM en version originale US, contenant les fichiers des
Learn by Video
leçons pour Dreamweaver CS6.
ISBN : 978-2-7440-5223-1
Le support officiel conçu par l’équipe d’Adobe
www.pearson.fr
Inclus ! Un DVD-ROM Windows / Mac OS en version originale US
customer 571196 at 2016-08-08
13:32:41 +0200

Adobe Dreamweaver CS6

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Adobe Dreamweaver CS6

Transféré par

Droits d'auteur :

Formats disponibles

Adobe® Dreamweaver ® CS6

Adobe® Dreamweaver® CS6

Adobe® Dreamweaver ® CS6

2551-CIAB Dreamweaver 6.indd 1 03/10/12 12:23

customer 571196 at 2016-08-08

00-CIABDreamweaverCS6FR.indd 1 customer 571196 at 2016-08-08

ISBN : 978-2-7440-5223-1 Adobe Press books are published by Peachpit, a

00-CIABDreamweaverCS6FR.indd 2 customer 571196 at 2016-08-08

tered trademar k or a trademar

Adobe® Dreamweaver ® CS6 eg

Les fichiers de chaque

leçon sont regroupés

commencer une leçon.

© 2012 Adobe Systems Incorporated

All rights reserved. Made in the USA.

0321822455_ADreamweaverCS6CIB_Disc.indd 1 3/30/12 10:47 AM

00-CIABDreamweaverCS6FR.indd 3 customer 571196 at 2016-08-08

1 PERSONNALISER SON ESPACE DE TRAVAIL 3

2 LES BASES DU HTML 19

00-CIABDreamweaverCS6FR.indd 4 customer 571196 at 2016-08-08

3 LES BASES DES CSS 39

4 CRÉER UNE MISE EN PAGE 71

5 TRAVAILLER AVEC DES FEUILLES DE STYLE CSS 105

ADOBE DREAMWEAVER CS6 CLASSROOM IN A BOOK V

00-CIABDreamweaverCS6FR.indd 5 customer 571196 at 2016-08-08

6 TRAVAILLER AVEC DES MODÈLES 141

7 TRAVAILLER AVEC DU TEXTE, DES LISTES ET DES TABLEAUX 167

8 TRAVAILLER AVEC DES IMAGES 203

00-CIABDreamweaverCS6FR.indd 6 customer 571196 at 2016-08-08

10 AJOUTER DE L’INTERACTIVITÉ 269

11 TRAVAILLER AVEC L’ANIMATION WEB ET LA VIDÉO 287

12 TRAVAILLER AVEC DES FORMULAIRES 301

ADOBE DREAMWEAVER CS6 CLASSROOM IN A BOOK VII

00-CIABDreamweaverCS6FR.indd 7 customer 571196 at 2016-08-08

13 TRAVAILLER AVEC DES DONNÉES EN LIGNE 335

14 CRÉER DES PAGES DYNAMIQUES AVEC DES DONNÉES 361

15 PUBLIER SON SITE SUR LE WEB 389

00-CIABDreamweaverCS6FR.indd 8 customer 571196 at 2016-08-08

La collection Classroom in a Book

ADOBE DREAMWEAVER CS6 CLASSROOM IN A BOOK IX

00a-CIABDreamweaverCS6FR.indd IX 22/10/12 16:55

customer 571196 at 2016-08-08

Copie des ﬁchiers Classroom in a Book

00a-CIABDreamweaverCS6FR.indd X 22/10/12 16:55

customer 571196 at 2016-08-08

Ordre recommandé pour les leçons

ADOBE DREAMWEAVER CS6 CLASSROOM IN A BOOK XI

00a-CIABDreamweaverCS6FR.indd XI 22/10/12 16:55

customer 571196 at 2016-08-08

00a-CIABDreamweaverCS6FR.indd XII 22/10/12 16:55

customer 571196 at 2016-08-08

Configuration de l’espace de travail

Instructions Windows et Macintosh

Contrôle = Ctrl Commande = Cmd

ADOBE DREAMWEAVER CS6 CLASSROOM IN A BOOK XIII

00a-CIABDreamweaverCS6FR.indd XIII 22/10/12 16:55

customer 571196 at 2016-08-08

Vérification des mises à jour

00a-CIABDreamweaverCS6FR.indd XIV 22/10/12 16:55

customer 571196 at 2016-08-08

ADOBE DREAMWEAVER CS6 CLASSROOM IN A BOOK XV

00a-CIABDreamweaverCS6FR.indd XV 22/10/12 16:55

customer 571196 at 2016-08-08

00a-CIABDreamweaverCS6FR.indd XVI 22/10/12 16:55