vx - medias.dunod.commedias.dunod.com/document/9782100525713/feuilletage.pdf · dreamweaver cs4...

190 x 220 — 15 mm

Le livre Véritable guide d’apprentissage et outil de travail, Dreamweaver CS4, pour PC et Mac, est l’ouvrage qu’il vous faut pour découvrir Dreamweaver et les nouveautés de sa version CS4 et ainsi apprendre à créer des sites web riches, actuels et fonctionnels :g réalisez des sites modernes et optimisés en utilisant les CSS ;g pimentez vos sites avec des navigations efficaces et interactives ;g valorisez vos pages web en intégrant des contenus Flash multimédias ;g familiarisez-vous avec les sites dynamiques ;g ajoutez d’impressionnants effets visuels grâce aux technologies Ajax ;g découvrez la mise en ligne d’un site et son référencement.Les suppléments en ligne (www.dunod.com) Les aspects théoriques développés dans l’ouvrage sont illustrés par de nombreux tutoriels et par la création, pas à pas, d’un véritable site web.Résolument pédagogique et appliqué, l’ouvrage profite pleinement de l’expérience de nos auteurs, formateurs et créateurs de sites, et vous permettra d’être rapidement opérationnel sous Dreamweaver CS4.

Frédéric Moitryest web designer depuis 1996. En 2003, il devient indépendant et s’oriente davantage vers le conseil et la formation professionnelle. Il est notamment formateur à l’école des Gobelins.

Jean-Marie Cocheteauest infographiste, réalisateur-développeur multimédia et formateur au CNA-CEFAG. Il collabore à de nombreuses réalisations multimédias depuis plus de 20 ans.www.graphicwebpro.com

barbary-courte.com

Dreamweaver CS4

Frédéric Moitry, Jean-Marie Cocheteau

ISBN 978-2-10-052571-3

F. M

OIT

RY

J.-M

. CO

CH

ETEA

UD

REA

MW

EAV

ER C

S4

6660039

-:HSMBKA=ZWZ\VX:

Créez des sites et des applications nouvelle génération

CRÉ@

www.dunod.com

Avecce livre :

nombreux fi chiers

téléchargeables

gratuitement !

Créez des sites et des applicationsnouvelle génération

CS4DreamweaverAdobe

pour PC et Mac

FRÉDÉRIC MOITRY | JEAN-MARIE COCHETEAU

6660039_dream_150.indd 1 29/04/09 12:34

@

@iii

Table des matières

Avant-propos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix

Chapitre 1 – Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

À propos de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Que propose Dreamweaver ?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Historique de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Les nouveautés de la version CS4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Site web et pages web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Le site web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

La page web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Site statique et site dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Le site statique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Le site dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Le wysiwyg . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Hyperliens et répertoires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Les hyperliens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Les répertoires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

9782100525713-MoitryCocheteau-Tdm.indd 3 29/04/2009 16:32:37

Dreamweaver CS4 ____________________________________________________________________________

@iv

Nommage et extensions des fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Le nommage des fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Les extensions de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Chapitre 2 – Démarrer avec Dreamweaver CS4 . . . . . . . . . . . . . . . . . . . . 15

Comment démarrer ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Définir un nouveau site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Gérer le site défini . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Gérer les fichiers du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

L’onglet « Fichier » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Supprimer un fichier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Déplacer un fichier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Créer une page, l’enregistrer, la nommer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Configurer son espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Les composants classiques de l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Le panneau « Insertion » et ses onglets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

La fenêtre « Document » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

La barre d’état du document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Les panneaux des propriétés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Les nouveautés CS4 dans l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

Les extensions du menu principal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Les espaces de travail préconfigurés ou personnels. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Outil de recherche sur la documentation en ligne Adobe . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Nouvelle ergonomie du groupe de panneaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

L’affichage en direct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Le code en direct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Accès au « Code » des fichiers apparentés au document ouvert . . . . . . . . . . . . . . . . . . . . . . . 47

Accès au code source ou au code en direct du document principal . . . . . . . . . . . . . . . . . . . . . . 47

Mode CSS du panneau des Propriétés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

L’explorateur de code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Les propriétés de la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Insérer et manipuler des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50


_____________________________________________________________________________ Table des matières

@v

Insérer une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

Optimiser une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

Recadrer une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Rééchantillonner une image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Autres modifications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Insérer un objet image dynamique Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Créer une image survolée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Chapitre 3 – Initiation au code HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Principes de fonctionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Qu’est-ce que le HTML ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Le principe des balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

Aperçu du code HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

Le principe des attributs de balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

Mise en forme HTML du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Les niveaux d’en tête : tutoriel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Les listes : tutoriel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Les liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Les hyperliens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

La cible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Les ancres. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Les liens de messagerie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

La carte image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

Chapitre 4 – Les feuilles de styles (CSS) . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Principe de base des styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Inconvénients des structures sans CSS, avec emploi abusif des tableaux . . . . . . . . . . . . . . . . . . 90

Avantages des CSS et des blocs de type DIV . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

Quelques exemples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

Les aides CSS proposées par Dreamweaver CS4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

Champ et mode d’action des CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Dreamweaver CS4 et les CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104


Dreamweaver CS4 ____________________________________________________________________________

@vi

Création du site Music on ZeNet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

Le panneau de contrôle CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

Panneau de création CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Les CSS et les navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

Les principaux navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

Quel navigateur utiliser ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

Firefox et ses extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

Chapitre 5 – Anciennes structures : les tableaux . . . . . . . . . . . . . . . . . . . 127

Que deviennent les tableaux ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Création de tableaux avec Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

Chapitre 6 – Nouvelles structures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

Les éléments de structure et CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

Éléments de type BLOC et EN LIGNE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

Le FLUX courant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

Les éléments flottants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143

Positionnement des éléments blocs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

La mise en page en colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149

La bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149

Le modèle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

Chapitre 7 – Animer les interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

Le DHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

Qu’est-ce que le DHTML ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

Les Div PA (ou calques) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164

Les actions et les comportements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176

Principes des actions et des comportements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176

L’action « Atteindre l’URL » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176

Les roll-overs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

Ajax et les effets Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184


_____________________________________________________________________________ Table des matières

@vii

Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

Les Widgets Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186

Les effets Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214

Intégrer des Rich medias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

Complément sur les Rich medias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

La sécurité du player Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

Intégrer une vidéo Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228

Intégration du son avec ActiveX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230

Chapitre 8 – Les formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233

Chapitre 9 – Introduction à la gestion de sites dynamiques . . . . . . . . . . 241

Généralités . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241

Préparation du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

Côté hébergeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

Côté plate-forme de développement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Chapitre 10 – L’atelier-site : Music on ZeNet . . . . . . . . . . . . . . . . . . . . . .263

Site Music on ZeNet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

Enrichissement du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274

Création d’un menu horizontal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274

Création d’une nouvelle page : SPRY.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

Création de la page « galerie.html » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

Insertion d’un bloc « News » au sein de la page d’accueil . . . . . . . . . . . . . . . . . . . . . . . . . . 285

Gérer l’hébergement d’un site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

L’accès au réseau Internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

L’hébergement du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

Le nom de domaine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

L’écriture du code du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291

Autres besoins logiciels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291


Dreamweaver CS4 ____________________________________________________________________________

@viii

Le transfert des fichiers vers le serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292

Mise à jour des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

Gérer le positionnement d’un site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

Le positionnement naturel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295

Le positionnement payant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296

Annexes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297

Glossaire HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297

Liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302

Bibliographie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .305


@

@15

l l l

2Démarrer avec

Dreamweaver CS4

OBJECTIFCe chapitre, riche de contenus et de méthodes, est destiné à la fois aux débutants mais aussi à ceux qui souhaitent découvrir de nouvelles fonctionnalités avec Dreamweaver.La première partie est consacrée à l’apprentissage des bases du logiciel (définition d’un site web, création d’une page web, etc.) et à sa prise en main.La seconde partie dresse un panorama des fonctionnalités classiques du logiciel avant de se pencher sur les nouveautés de la version CS4 !La troisième partie développe les fondamentaux de manipulation dynamique des images grâce à l’asso-ciation de Dreamweaver et de Photoshop et aborde les techniques de roll-over image sans adjonction de JavaScript.

Comment démarrer ?

Lorsque vous lancez Dreamweaver CS4, une page de démarrage s’affiche dès l’ouverture du logiciel, et réapparaîtra aussitôt que vous fermerez le dernier document, à moins que vous ne cochiez la case Ne plus afficher (voir figure ci-après).

9782100525713-MoitryCocheteau-Chap02.indd 15 30/04/2009 11:08:30

Dreamweaver CS4 ____________________________________________________________________________

@16

Page de démarrage

Cette page s’organise en trois colonnes : la première est destinée à l’ouverture d’un document déjà enregistré, la deuxième vous propose la création d’un nouveau document web classé par catégorie de langage de développement.

Remarque : Dans cet ouvrage nous travaillerons principalement avec des fichiers de type HTML.

La dernière colonne propose des tutoriels (vidéos) sur les nouvelles fonctionnalités de Dreamweaver CS4 sur le site ADOBE TV.

Astuce : En sélectionnant les items de la troisième colonne vous serez dirigé vers des démonstrations en anglais. Pour des versions françaises, nous vous conseillons cette adresse web :« http://tv.adobe.com/fr/#pd+Dreamweaver » ou la consultation de ces vidéos sur le deuxième DVD de votre pack d’installation Dreamweaver CS4. Bon visionnage !


_____________________________________________________ Chapitre 2. Démarrer avec Dreamweaver CS4

@17

l l l Définir un nouveau site

Dans cette section, nous commencerons par la création d’un site web et aborderons à cette occasion les menus liés à la définition et à la gestion d’un nouveau site et les principaux panneaux de l’interface.

Principe de la « Définition d’un site »

Dans la conception d’un site web statique local ou en ligne, la première étape dans Dreamweaver consiste à définir un nouveau site. En effet, en définissant le site, Dreamweaver considérera que l’en-semble des fichiers de votre site fait partie d’un ensemble commun. Ainsi, à chaque modification d’em-placement et de liens, Dreamweaver vous préviendra et vous demandera si une mise à jour de l’ensem-ble du site est souhaitable.

En outre, vous pourrez, grâce à la définition du site, accéder à des fonctionnalités avancées comme l’intégration d’un document Photoshop, la liaison de vos pages web, la gestion des modèles, les com-portements serveur, etc.

Structure du dossier local et du dossier distant

Pour définir un site, il vous faudra d’abord concevoir une arborescence conforme à la structuration des données. Ainsi, un site est généralement constitué de la page d’accueil (index.html) placée à la racine de votre dossier de travail et d’un nombre variable de sous-dossiers pour les images et les fichiers annexés. Bien évidemment, pour un site de plus grande ampleur, la structure peut être infiniment plus complexe. Toutefois, il est dans tous les cas indispensable que tou tes les pages d’un même site soient contenues dans un même dossier.

Avant de mettre votre site en ligne vous allez tout d’abord le construire et le tester locale ment, c’est-à-dire sur votre machine, puis le transférer sur le serveur (« le dossier distant » dans le menu Gérer les sites).

Remarque : Il est indispensable que la structure du site local soit identique à celle du site dis tant ; dans le cas contraire, les liens liant les éléments des pages (images, bouton, menu…) vers leurs cibles seront ino-pérants, car pointant vers de mauvaises adresses de destination, ce que l’on nomme des « liens cassés »

Tutoriel : définir un site

Dans Dreamweaver, plusieurs accès vous sont proposés par :

la page de Démarrage de Dreamweaver ; 3le menu général « Site/Nouveau site… ». 3


Dreamweaver CS4 ____________________________________________________________________________

@18

Méthode 1

Sur la page de Démarrage de Dreamweaver, choisissez au bas de la deuxième colonne « Site Dreamweaver… ».

Méthode 2

Vous pouvez aussi aller dans le menu général : « Site/Nou veau site… ». À ce stade, les deux méthodes se rejoignent et nous allons voir comment finaliser la défini tion d’un site en cinq étapes.

Remarque : Pour définir un site, comme nous ne connaissons pas vos accès FTP, dans le cas où vous seriez déjà hébergé, nous avons pris le parti de vous apprendre à définir un site en local en choisissant le mode « Elémentaire ». Lorsque vous serez plus aguerri sur la création ou la modification d’un site, vous pourrez passer au mode « Avancé » qui offre plus de fonctionnalités.

Étape 1 : 3 Dans la fenêtre de définition du site, il vous est proposé de définir le nom de votre site. Nommez-le « creasite1 » (il s’agit là d’une information interne à Dreamweaver CS4) puis cliquez sur « Suivant ».



@19

Étape 2 : 3 Vous arrivez alors dans la partie 2 de la modification de fichiers. Cochez la case « Non, je ne veux pas utiliser… » (car les technologies de serveur ne concer nent que les sites dynami-ques que vous aborderez plus tard au chapitre 9), puis cliquez sur « suivant ».

Étape 3 : 3 Choisissez « Modifier les copies locales sur ma machine… », ainsi vous ne mettrez en ligne votre site qu’après avoir vérifié en local son bon fonctionnement. Désignez ensuite le ré-pertoire qui contiendra l’ensemble de votre site, c’est-à-dire le répertoire racine, soit pour notre exemple : « C:\tutoriaux-dunod\ch02\gestion- site\site1\ ».

Étape 4 : 3 Dans notre exemple, pour définir le site des tutoriels en local, nous n’avons pas besoin de définir un accès ftp pour mettre en ligne nos fichiers. Nous choisirons donc « Aucun » dans le menu : « Comment vous connectez-vous à votre serveur distant ? ».

Pour la procédure de mise en ligne, référez-vous au chapitre 10.


Dreamweaver CS4 ____________________________________________________________________________

@20

Étape 5 : 3 Cette dernière étape vous présente un résumé de vos choix sur la définition de votre site. Pour valider celui-ci, cliquez sur « Terminer ».

Une fois la validation du site effectuée, sa création est prise en compte dans le panneau « Fichier ».



@21

l l l

l l l Gérer le site défini

Grâce à la boîte de dialogue « Gérer les sites » accessible depuis le menu général « Site/Gérer les sites », vous allez pouvoir modifier le site après l’avoir défini, créer un nouveau site comme nous venons de le faire, mais aussi supprimer ou dupliquer un site.

Voici l’explication des fonctionnalités de la fenêtre « Gérer les sites » :

« Nouveau… » 3 permet de créer un site.« Modifier… » 3 permet de modifier ou de compléter la définition d’un site déjà exis tant.« Dupliquer… » 3 permet de créer une copie du site sélectionné.« Supprimer » 3 permet d’effacer un site (sa définition mais pas les éléments qui le composent).« Exporter… » 3 permet d’exporter les paramètres d’un site sous la forme d’un fichier au format « .ste ».« Importer… » 3 permet de récupérer les paramètres d’un site au format « .ste ».

Gérer les fichiers du site

L’onglet « Fichier »

Les fonctions présentes dans cet onglet vous permettent la gestion de l’ensemble des fichiers du site et des liens qui les organisent (voir plus loin « Déplacer un fichier ») ainsi que la mise en ligne de ceux-ci (voir chapitre 10).


Dreamweaver CS4 ____________________________________________________________________________

@22

Supprimer un fichier

Méthode 1

Pour supprimer un fichier, sélectionnez-le puis appuyez sur « Suppr » de votre clavier. Un message d’alerte arrive alors. Il vous demande si vous êtes sûr de vouloir supprimer le fichier. Cliquez sur « OK » pour confirmer la suppression du fichier.

Méthode 2

Étape 1 3 : Sélectionnez le fichier à supprimer.Étape 2 3 : Sur un clic droit (Windows) ou un Commande + Clic (Macintosh), choisis sez succes-sivement « Edition » puis « Supprimer ».Étape 3 3 : Confirmez la suppression du fichier.

Raccourcis clavier

N’hésitez pas à utiliser les raccourcis clavier pour ce type d’opération courante Ils permettent un gain de temps considérable, remplacez « Ctrl » (Windows) par « Commande » (Macintosh).

Couper Ctrl+X

Copier Ctrl+C

Coller Ctrl+V

Supprimer Suppr

Dupliquer Ctrl+D

Renommer F2



@23

l l l

Déplacer un fichier

Le déplacement d’un fichier justifie à lui seul l’étape préalable de la définition d’un site. Sans celle-ci, les relations URL entre les différentes pages du site ne fonctionneraient pas ! Pour ce faire, nous allons ainsi créer un nouveau dossier nommé « pages » dans lequel nous allons déplacer toutes nos pages sauf le fichier « index ».

Étape 1 3 : Sélectionnez dans l’onglet « Fichiers » le dossier racine (pour que le nouveau dossier se place à ce niveau), ou bien utilisez le clic droit/Ctrl clic/« Nouveau dossier ».Étape 2 3 : Nommez le dossier « pages ».Étape 3 3 : Faites glisser les pages 1, 2 et 3 dans le dossier « pages ».Étape 4 3 : Cliquez sur « Mettre à jour »

Les fichiers ont bien été déplacés et surtout les liens sont toujours opérants, ce qui n’aurait pas été le cas si le site n’avait pas été défini auparavant.

Créer une page, l’enregistrer, la nommer

Nous allons voir maintenant comment créer une page web, la nommer et l’enregistrer.

Tutoriel

Objectif

Apprendre trois méthodes différentes pour créer une nouvelle page web.

Méthode 1 – Passer par la page de démarrage du logiciel

À l’ouverture du logiciel, choisissez « Créer » une page « HTML ».


Dreamweaver CS4 ____________________________________________________________________________

@24

Méthode 2 – Passer par le menu général

Étape 1 3 : Dirigez-vous vers le menu général, allez dans « Fichier » et cliquez sur « Nouveau… ».Étape 2 3 : Une fenêtre apparaît alors. Cliquez sur « Page vierge » puis sélectionnez le type de page : « HTML » et sa mise en forme : « <aucun(e)> ».

Étape 3 3 : Cliquez sur Créer.Étape 4 3 : Allez sur « Fichier/Enregistrer sous… » et nommez la page web à votre convenance.

Méthode 3 – Passer par l’onglet « Fichiers »

Étape 1 : 3 Dans l’onglet « Fichiers » du panneau « Fichiers », sélectionnez par exem ple le réper-toire correspondant à l’enregistrement de la page web.

Astuce : Vous pouvez créer un nouveau fichier avec un clic droit (Windows) ou Commande + clic (Macintosh).

Étape 2 : 3 Cliquez sur l’icône dans le coin supérieur droit du groupe de panneaux et sélectionnez « Fichier/Nouveau fichier ».



@25

l l l

Étape 3 3 : Enfin, nommez votre fichier web.

Remarque : Pour effacer un fichier depuis l’onglet « Fichiers », sélectionnez celui-ci et appuyez sur la touche « Delete » ou « Suppr » de votre clavier. Un écran apparaîtra alors pour vous demander de confir-mer votre choix.

Configurer son espace de travail

Avant de commencer l’étude approfondie de l’espace de travail du logiciel et de tous ses nombreux composants, commençons par voir les différentes configurations de travail qu’offre Dreamweaver CS4. Dans cette nouvelle version, Adobe propose aujourd’hui tout un panel de configurations possibles de l’interface logiciel en fonction des besoins essentiels des utilisateurs de Dreamweaver et de leurs spéci-ficités dans le monde professionnel de la création et du développement web.

Tutoriel : Configurer votre espace de travail

Objectif

Vous montrer les différentes interfaces de travail de Dreamweaver.

Étape 1 3 : Commencez par créer une nouvelle page web vierge. Pour passer d’un espace de tra-vail à un autre, deux solutions. La première consiste à passer par le menu principal puis à cli-quer sur le bouton situé à gauche du champ Recherche en choisissant, par exemple, le mode « Classique ». Le second accès possible consiste, cette fois-ci, à cliquer sur « Présentation de l’es-pace de travail » du menu fenêtre situé dans le menu principal. Vous pouvez également choisir « Classique » ou un autre mode. Les deux accès sont montrés sur la figure ci-dessous.


Dreamweaver CS4 ____________________________________________________________________________

@26

Étape 2 3 : Nous vous laissons tester les différentes configurations possibles !

Étape 3 3 : Au fur et à mesure de votre progression sur Dreamweaver et de votre méthode de tra-vail, vous aurez certainement une configuration préférée dans les choix proposés par ce logiciel ou peut-être voudrez-vous personnaliser davantage votre interface utilisateur.Pour ce faire, commencez par changer les dimensions et les emplacements des différents 3composants de l’interface comme démontré sur la vidéo Adobe suivante depuis le lien direct « http://tv.adobe.com/fr/#vi+f15274v1001 » ou depuis le catalogue du site Adobe TV « http://tv.adobe.com/fr » en sélectionnant « Dreamweaver » puis dans la playlist générée en retrouvant « Utilisation des différentes vues et des espaces de travail ». Enfin, suivez les différentes étapes indiquées sur la création d’un espace de travail personnel.



@27

l l l Les composants classiques de l’espace de travail

Remarque : Dans cet ouvrage, nous vous présenterons Dreamweaver CS4, en mode d’affichage « Classique » pour que les utilisateurs des versions précédentes de Dreamweaver se familiarisent plus vite avec l’interface CS4.

Jusqu’à présent, l’espace de travail est composé d’un certain nombre de composants réunis en différen-tes parties, comme indiqué sur la figure ci-après. Nous verrons à la section « Les nouveautés CS4 dans l’espace de travail » les nouveaux composants Dreamweaver.


Dreamweaver CS4 ____________________________________________________________________________

@28

L’espace de travail de Dreamweaver CS4 avec ses composants classiques :

A. Menu principal E. Panneau des « Propriétés » H. Outils liés au document

B. Espace Code F. Panneau « Insertion » des outils I. Groupe de panneaux

C. Espace Création G. Nom du document principal J. Panneau de gestion des « Fichiers »

D. Barre d’état

Le panneau « Insertion » et ses onglets

Le panneau « Insertion » présente la boîte à outils de Dreamweaver sous forme d’icônes. Ces objets sont regroupés par catégorie sous forme d’onglets.

L’onglet « Commun 3 » – Dans un premier temps, vous utiliserez essentiellement l’onglet « Commun » qui comprend les fonctionnalités les plus courantes comme la création de ta-bleaux, l’insertion d’images, les ancres de liens mail, etc.


190 x 220 — 15 mm

Le livre Véritable guide d’apprentissage et outil de travail, Dreamweaver CS4, pour PC et Mac, est l’ouvrage qu’il vous faut pour découvrir Dreamweaver et les nouveautés de sa version CS4 et ainsi apprendre à créer des sites web riches, actuels et fonctionnels :g réalisez des sites modernes et optimisés en utilisant les CSS ;g pimentez vos sites avec des navigations efficaces et interactives ;g valorisez vos pages web en intégrant des contenus Flash multimédias ;g familiarisez-vous avec les sites dynamiques ;g ajoutez d’impressionnants effets visuels grâce aux technologies Ajax ;g découvrez la mise en ligne d’un site et son référencement.Les suppléments en ligne (www.dunod.com) Les aspects théoriques développés dans l’ouvrage sont illustrés par de nombreux tutoriels et par la création, pas à pas, d’un véritable site web.Résolument pédagogique et appliqué, l’ouvrage profite pleinement de l’expérience de nos auteurs, formateurs et créateurs de sites, et vous permettra d’être rapidement opérationnel sous Dreamweaver CS4.

Frédéric Moitryest web designer depuis 1996. En 2003, il devient indépendant et s’oriente davantage vers le conseil et la formation professionnelle. Il est notamment formateur à l’école des Gobelins.

Jean-Marie Cocheteauest infographiste, réalisateur-développeur multimédia et formateur au CNA-CEFAG. Il collabore à de nombreuses réalisations multimédias depuis plus de 20 ans.www.graphicwebpro.com

barbary-courte.com

Dreamweaver CS4

Frédéric Moitry, Jean-Marie Cocheteau

ISBN 978-2-10-052571-3

F. M

OIT

RY

J.-M

. CO

CH

ETEA

UD

REA

MW

EAV

ER C

S46660039

-:HSMBKA=ZWZ\VX:

Créez des sites et des applications nouvelle génération

CRÉ@

www.dunod.com

Avecce livre :

nombreux fi chiers

téléchargeables

gratuitement !

Créez des sites et des applicationsnouvelle génération

CS4DreamweaverAdobe

pour PC et Mac

FRÉDÉRIC MOITRY | JEAN-MARIE COCHETEAU

6660039_dream_150.indd 1 29/04/09 12:34

vx - medias.dunod.commedias.dunod.com/document/9782100525713/feuilletage.pdf · dreamweaver cs4...

Documents