ADOBE Fireworks 8 User Manual [fr]

Bien démarrer avec Fireworks

Marques commerciales

1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central,
ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite,
FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML,
RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev et
WebHelp sont des marques déposées ou des marques commerciales de Macromedia, Inc. et peuvent être déposées aux Etats-Unis
ou dans d’autres juridictions, y compris au niveau international. D’autres noms de produits, logos, concepts, titres, mots ou
phrases mentionnés dans la présente publication peuvent être des marques commerciales, des marques de service ou des noms
commerciaux de Macromedia, Inc. ou d’autres entités et peuvent être déposés dans certaines juridictions, y compris au niveau
international.

Informations sur les tiers

Le présent guide contient des liens vers les sites Web de tierces parties qui ne sont pas contrôlés par Macromedia, qui n’est pas
responsable du contenu de sites liés. Vous accédez auxdits sites sous votre propre responsabilité. Macromedia mentionne lesdits
liens pour faciliter votre travail et l’inclusion desdits liens n’implique pas que Macromedia approuve le contenu desdits sites tiers
ou en accepte la responsabilité.

Copyright © 2005 Macromedia, Inc. Tous droits réservés. Le présent manuel ne peut pas être copié, photocopié,
reproduit, traduit ou converti sous forme électronique ou informatique, en partie ou en totalité, sans l’autorisation écrite
préalable de Macromedia, Inc. Nonobstant ce qui précède, le propriétaire ou l’utilisateur autorisé d’une copie valide du
logiciel fourni avec le présent manuel peut imprimer une copie dudit manuel à partir d’une version électronique de ce
dernier dans le seul et unique but pour ledit propriétaire ou utilisateur autorisé de se familiariser avec ledit logiciel, à
condition qu’une partie dudit manuel ne puisse être imprimée, reproduite, distribuée, revendue ou transférée dans tout
autre but, y compris, et ce sans limitation, dans un but commercial, tel que la vente de copies de la présente documentation
ou la fourniture de service de support payant. Numéro de référence ZFW80M100F.

Remerciements

Gestion de projet : Charles Nadeau, Debi Robson

Rédaction : David Sullivan, Rosanne Conroy, Charles Nadeau

Edition : Melba Lancaster, Shawn Jackson, Linda Adler

Gestion de la production : Patrice O’Neill

Conception et production du support : Adam Barnett, Aaron Begley, Arena Reed, Paul Rangel, John Francis, Mario Reynoso

Gestion de projet de localisation : Luciano Arruda

Spécialiste de production de localisation : Masayo Noda

Remerciements particuliers à Jon Varese, Jennifer Rowe, Jay Armstrong, Alan Musselman, Maureen Keating, Matt Hoffberg,
David Spells, Sheila McGinn, Andrew Wilson, Rosana Francescato, Kristin Conradi, Yuriko Ando, Rubric, Inc. et aux équipes de
développement et de contrôle de la qualité de Fireworks.

Première édition : Août 2005

Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103

Table des matières

Chapitre 1: Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Finalités de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Nouveautés de Fireworks 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6

Installation de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Chapitre 2: Apprentissage de Fireworks . . . . . . . . . . . . . . . . . . . . .11

Par où commencer ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11

Avantages de la documentation Fireworks . . . . . . . . . . . . . . . . . . . . . . . .11

Utilisation du système d’aide de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . 13

Chapitre 3: Concepts de base de Fireworks . . . . . . . . . . . . . . . . . 15

Se familiariser avec l’espace de travail Fireworks. . . . . . . . . . . . . . . . . . 15

Exécution de tâches de base dans Fireworks . . . . . . . . . . . . . . . . . . . . 26

Chapitre 4: Didacticiel : Création de maquettes de page. . . . . . . 31

Création d’un dossier de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Examen de votre tâche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Création et sauvegarde d’un nouveau document . . . . . . . . . . . . . . . . . 34

Importation et placement d’images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Création d’une image composite de la zone de contenu. . . . . . . . . . . .37

Placement de texte et d’images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Exportation de l’image pour le Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

Chapitre 5: Didacticiel : Traitement des photographies . . . . . . . 53

Examen de votre tâche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Traitement par lots de fichiers d’image de grande taille. . . . . . . . . . . . 54

Composition des images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Aperçu avant exportation et exportation des images . . . . . . . . . . . . . . . 61

Affichage des images optimisées finales . . . . . . . . . . . . . . . . . . . . . . . . 63

3

Chapitre 6: Didacticiel : Création d’une bannière de page . . . . . 65

Examen de votre tâche. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

Ajout d’un arrière-plan et placement du logo . . . . . . . . . . . . . . . . . . . . . 66

Organisation de vos objets à l’aide de calques . . . . . . . . . . . . . . . . . . . . 70

Création d’un arrière-plan contrasté pour le logo. . . . . . . . . . . . . . . . . . 72

Création d’un contour autour de la bannière . . . . . . . . . . . . . . . . . . . . . . 76

Création d’un effet de bord oblique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

Ajout d’une ligne de balise à la bannière. . . . . . . . . . . . . . . . . . . . . . . . . . 80

Exportation d’un fichier d’image optimisé . . . . . . . . . . . . . . . . . . . . . . . . 81

Chapitre 7: Didacticiel : Création d’une page Web . . . . . . . . . . . . 87

Affichage de la page Web finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

Ouverture du fichier source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Importation d’une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Découpage du document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

Création d’un survol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

Création de boutons pour une barre de navigation . . . . . . . . . . . . . . . . 98

Création et modification d’un menu contextuel. . . . . . . . . . . . . . . . . . . 107

Optimisation du document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

Exportation de HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

Test du fichier terminé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

4 Table des matières

CHAPITRE 1

Présentation

Macromedia Fireworks 8 est la solution de référence pour la production et
la conception de graphiques Web professionnels. Il s’agit du premier
environnement de production permettant d’aborder et de résoudre les défis
particuliers posés aux concepteurs et aux développeurs de graphiques Web.

Ce chapitre couvre les rubriques suivantes :

Finalités de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Nouveautés de Fireworks 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Installation de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Finalités de Fireworks

Créez, modifiez et animez des graphiques Web avec Fireworks, ajoutez des
fonctions d’interactivité avancées et optimisez les images dans un
environnement professionnel. Fireworks permet de créer et de modifier des
graphiques bitmap et vectoriels dans une seule application. Tout reste
entièrement modifiable, à tout moment. En outre, vous pouvez
automatiser le déroulement du travail pour satisfaire aux exigences de
longues mises à jour et modifications.

Fireworks s’intègre aux autres produits Macromedia, tels que
Dreamweaver, Flash, FreeHand et Director, ainsi qu’à vos applications
graphiques préférées et aux éditeurs HTML pour offrir une solution Web
réellement intégrée. Exportez facilement vos graphiques Fireworks avec les
codes HTML et JavaScript qui ont été personnalisés pour l’éditeur HTML
que vous utilisez.

1

5

Nouveautés de Fireworks 8

Vous pouvez créer et optimiser des images pour le Web en disposant d’un
contrôle précis, dans un environnement intuitif et personnalisable. La
nouvelle prise en charge des formats ActionScript et CSS (Cascading Style
Sheet) permet à Fireworks d’interopérer encore plus efficacement avec
Dreamweaver et Flash. Les nouveaux formats de fichiers pris en charge, les
nouveaux panneaux et le flux de travail sensiblement rationalisé vous
permettent à la fois de gagner du temps et d’obtenir des images optimales.

Optimisation

Panneau Modification
d’image

Davantage de formats
de fichiers
importables

Optimisation du
processus de
traitement par lots

Ce nouveau panneau est un emplacement central
depuis lequel vous pouvez accéder aux outils
d’édition d’image, filtres et autres commandes de
menu couramment utilisés.

Fireworks 8 prend désormais en charge
l’importation des formats de fichiers QuickTime
Image, MacPaint, SGI & JPEG 2000 (plug-in
QuickTime requis pour la prise en charge de
QuickTime).

La rationalisation du système de changement de
nom de fichier, la possibilité de contrôler les
dimensions d’un fichier lors d’une mise à l’échelle
dans le cadre d’un traitement par lots et l’ajout
d’une barre d’état et d’un fichier journal ne sont
que quelques-unes des améliorations apportées
au processus.

6Présentation

Tirez parti du processus intégré de Fireworks pour créer et optimiser des
images pour Dreamweaver 8 et Flash Professional 8 sans perte
d’informations ni de temps à les éditer. Bénéficiez de la compatibilité avec
CSS et ActionScript, ainsi qu’avec les autres produits Studio.

Processus intégré

Menus contextuels
CSS (Cascading Style
Sheet)

Compatibilité
vectorielle

Davantage d’options
de découpe

Reconnaissance des
valeurs de couleur
ActionScript

Utilisez la commande
« Enregistrer sous »
pour enregistrer vos
bitmaps dans différents
types de fichiers.

Logique d’ouverture,
d’enregistrement et
d’exportation évoluée

Grilles moins intrusives Comme dans Flash, les grilles utilisent désormais

Fireworks 8 utilise le format CSS pour créer des
menus contextuels interactifs. Cela permet
d’obtenir un code clair et aisément
personnalisable qui s’intègre bien avec les sites
créés dans Dreamweaver.

Les attributs vectoriels (remplissages, traits,
filtres et modes de fondu) sont préservés lorsque
vous déplacez des objets entre Flash et
Fireworks.

Des découpes polygonales sont insérées
automatiquement quand un objet sélectionné est
un trajet polygonal.

Fireworks reconnaît les valeurs de couleur
ActionScript lorsqu’elles sont copiées de Flash
et collées dans des champs de valeurs de
couleur de Fireworks.

Dans la boîte de dialogue « Enregistrer sous »,
sélectionnez des formats de sortie dans un
fichier unique, tels que gif, jpg, tiff.

La logique utilisée pour déterminer les dossiers
par défaut dans les boîtes de dialogue Ouvrir,
Enregistrer, Enregistrer sous, Enregistrer une
copie et Exporter, a été améliorée en réduisant le
nombre d’opérations de navigation requises.

une ligne pointillée et une couleur de grille par
défaut plus claire.

Nouveautés de Fireworks 8 7

Grâce à Fireworks, vous disposez d’outils visuels pour créer des graphiques
et animations Web de qualité professionnelle, tels que des survols et des
menus contextuels, sans devoir recourir à la programmation. Vous pouvez
également contrôler précisément vos images à l’aide d’une pléthore de
nouvelles options créatives.

Création sans complexité

25 nouveaux modes
de fondu

Ombre de perspective Ajoutez une ombre de perspective pour ouvrir des

Ombre unie Nouveau filtre en direct qui estompe l’objet auquel

Composants
d’interface mobile

Exemples de boutons,
d’animations, de
thèmes et de puces

Panneau Propriétés
de forme automatique

Cadre direct et
conversion de
sélections
(conversion de cadre
de sélection en trajet
et inversement)

Texte de
dénomination
automatique

Panneau Caractères
spéciaux

Remise en forme de
texte sur un trajet

25 nouveaux choix pour modifier l’aspect de vos
couleurs et de vos objets.

trajets et des objets texte.

il est appliqué plusieurs fois.

Créez rapidement une maquette de votre interface
mobile à l’aide des composants d’interface
bitmap.

Démarrez rapidement avec de nouveaux actifs,
tels que des boutons, des animations, des thèmes
et des puces.

Ce nouveau panneau permet de modifier les
propriétés de forme automatique, telles que
Forme automatique Etoile, Forme automatique
Flèche ou Forme automatique Polygone
intelligent.

Convertissez des sélections actives en trajets
vectoriels modifiables et inversement. Obtenez
instantanément le résultat des filtres et des
paramètres appliqués aux sélections.

Les calques sont automatiquement nommés à
l’aide du texte que vous y entrez.

Utilisez ce nouveau panneau pour insérer des
caractères spéciaux directement dans des blocs
de texte.

Modifiez les points du trajet quand un texte y est
attaché

.

8Présentation

Economisez votre temps et vos efforts grâce aux nombreuses améliorations
apportées aux tâches courantes.

Améliorations du processus

Mémorisation des
derniers paramètres
utilisés pour les
polices et
l’optimisation

Enregistrement de
plusieurs sélections

Sélectionnez les
objets qui partagent
un bord dans le
panneau Calques

Enregistrement
automatique des
préférences

Groupement de
déplacements
consécutifs

Prise en charge de
tablette améliorée

Verrouillage d’objets Verrouillage individuel d’objets dans le panneau

Les polices récemment utilisées s’affichent à
présent dans le haut des menus de polices.
L’optimisation est désormais paramétrée, par
défaut, à l’aide des derniers paramètres utilisés.

Enregistrez, restaurez, nommez et supprimez
plusieurs cadres de sélection dans des fichiers
PNG.

Maintenez la touche Maj enfoncée et cliquez pour
sélectionner des objets qui partagent un bord ou
une limite dans le panneau Calques.

Fireworks 8 enregistre automatiquement les
préférences plus fréquemment.

Les déplacements consécutifs sont traités comme
un seul mouvement.

La prise en charge de tablette a été améliorée
pour les outils Modulateur de trajet et la sensibilité
à la pression du trait.

Calques.

Pour plus d’informations sur les nouvelles fonctions, voir la
page Fireworks du site Web de Macromedia à l’adresse

www.macromedia.com/go/fireworks_fr.

Nouveautés de Fireworks 8 9

Installation de Fireworks

Cette section explique comment installer Fireworks.

Veillez à lire les notes de publication sur le site Web de Macromedia à
l’adresse http://www.macromedia.com/go/fw_documentation_fr pour
prendre connaissance des toutes dernières informations ou instructions.

Pour installer Fireworks :

1. Insérez le CD Fireworks dans votre lecteur de CD-ROM.

2. Exécutez l’une des actions suivantes :

■ Sous Windows, le programme d’installation de Fireworks démarre

automatiquement.

■ Sur Macintosh, double-cliquez sur l’icône d’installation de

Fireworks figurant sur le bureau.

3. Suivez les instructions affichées à l’écran.

Le programme d’installation vous invite à entrer les informations
requises.

4. Si nécessaire, redémarrez votre ordinateur.

Installation de Fireworks 10

CHAPITRE 2

Apprentissage de Fireworks

Macromedia Fireworks 8 comprend un certain nombre de ressources
d’apprentissage du programme vous permettant d’être rapidement
opérationnel et de créer vos propres graphiques Web avec efficacité.

Ce chapitre couvre les rubriques suivantes :

Par où commencer ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Avantages de la documentation Fireworks . . . . . . . . . . . . . . . . . . . . 11

Utilisation du système d’aide de Fireworks . . . . . . . . . . . . . . . . . . . 13

Par où commencer ?

Si vous ne connaissez pas du tout Fireworks, commencez par lire le chapitre

Chapitre 3, Concepts de base de Fireworks, page 15, puis consultez les

didacticiels.

Si la création de graphiques Web vous est familière, commencez par
consulter les didacticiels dans ce guide, puis lisez la section « Concepts de
base de Fireworks » dans le manuel Utilisation de Fireworks.

2

Avantages de la documentation Fireworks

Fireworks comprend un certain nombre de supports d’apprentissage du
programme vous permettant d’être rapidement opérationnel et de créer vos
propres images avec efficacité.

11

Utilisation de Fireworks est le manuel utilisateur de Fireworks.

Vous pouvez y accéder à tout moment dans l’aide de Fireworks
(Aide > Utilisation de Fireworks). Le manuel est également
disponible au format PDF sur le site Web de Macromedia à
l’adresse http://www.macromedia.com/go/fw_documentation_fr.

Bien démarrer avec Fireworks présente de façon interactive les

principales fonctions de Fireworks. Vous pouvez utiliser les didacticiels
qui traitent des tâches Fireworks courantes, telles que l’utilisation
d’outils de dessin et de modification, l’optimisation d’images, la
création de survols, de barres de navigation et d’autres éléments
interactifs. Vous pouvez accéder au manuel à tout moment dans l’aide
de Fireworks (Aide > Bien démarrer avec Fireworks). Le manuel est
également disponible au format PDF sur le site Web de Macromedia à
l’adresse http://www.macromedia.com/go/fw_documentation_fr.

L’

application Fireworks comporte de nombreuses boîtes de dialogue et

info-bulles pour faciliter l’utilisation du programme. Les info-bulles
apparaissent lorsque vous placez le pointeur sur un élément de l’interface
utilisateur.

Le

Centre de support de Fireworks à l’adresse

www.macromedia.com/go/fireworks_support_fr offre des

informations de support et de résolution de problèmes.

Le

Centre des développeurs de Fireworks à l’adresse

http://www.macromedia.com/fr/devnet/ fournit des

informations vous permettant d’améliorer et d’élargir vos
compétences.

Le

groupe de discussion de Fireworks permet de communiquer

en direct avec les autres utilisateurs de Fireworks, les techniciens du
support technique et l’équipe de développement de Fireworks.
Utilisez un lecteur de groupes de discussion pour accéder à

news://forums.macromedia.com/macromedia.fireworks.

Extension de Fireworks indique comment automatiser les tâches de

Fireworks à l’aide du code JavaScript. Vous pouvez contrôler chaque
commande ou paramètre de Fireworks à l’aide de commandes JavaScript
spéciales que Fireworks peut interpréter. Ce manuel est disponible dans
l’aide et sur le site Web de Macromedia au format PDF téléchargeable.

12 Apprentissage de Fireworks

Utilisation du système d’aide de Fireworks

Le système d’aide en ligne, disponible dans le menu Aide, fournit des
informations détaillées sur toutes les tâches exécutables avec Fireworks.

Accès à l’Aide

Vous pouvez accéder à l’aide en ligne pendant que vous travaillez dans
Fireworks.

Pour ouvrir l’Aide de Fireworks :

■ Cliquez sur Aide > Aide de Fireworks.

Recherche dans l’Aide

Vous pouvez effectuer une recherche en texte intégral dans l’Aide de
Fireworks.

Pour effectuer une recherche dans l’aide en ligne (Windows) :

1. Dans l’Aide de Fireworks, cliquez sur l’onglet Rechercher.

2. Entrez un mot ou une phrase dans la zone de texte, puis cliquez sur Liste

des rubriques.

3. Double-cliquez sur une rubrique dans la liste des résultats pour

l’afficher.

Pour effectuer une recherche dans l’aide en ligne (Macintosh) :

1. Dans l’Aide de Fireworks, entrez un mot ou une phrase dans la zone de

texte Poser une question, puis appuyez sur Entrée.

2. Double-cliquez sur une rubrique dans la liste des résultats pour

l’afficher.

CONSEIL

Pour rechercher une
phrase spécifique,
entourez-la de
guillemets.

Utilisation du système d’aide de Fireworks 13

CONSEIL

Vous pouvez
commencer à entrer
un mot-clé dans la
zone de texte pour
accéder rapidement
à une entrée d’index.

Utilisation de l’index

L’index vous permet de trouver des informations rapidement.

Pour utiliser l’index (Windows) :

1. Dans l’Aide de Fireworks, cliquez sur l’onglet Index.

2. Faites défiler la liste alphabétique jusqu’à une entrée d’index et double-

cliquez dessus pour afficher les informations indexées.

Pour utiliser l’index (Macintosh) :

1. Dans l’Aide de Fireworks, cliquez sur le lien Index dans le sommaire.

2. Cliquez sur une lettre et faites défiler la liste jusqu’à une entrée d’index.

3. Cliquez sur un numéro à côté de l’entrée pour afficher les informations

indexées.

Utilisation de la page de démarrage

Lorsque vous lancez Fireworks sans ouvrir de document, la page de
démarrage de Fireworks s’affiche dans l’environnement de travail. Cette
page vous permet d’accéder rapidement aux didacticiels Fireworks, aux
fichiers récents et à Fireworks Exchange, d’où vous pouvez améliorer les
fonctions de Fireworks. La page de démarrage s’utilise comme une page
Web. Il vous suffit de cliquer sur une fonction à l’écran pour l’utiliser.

14 Apprentissage de Fireworks

Pour désactiver la page de démarrage :

1. Lancez Fireworks sans ouvrir de document.

La page de démarrage s’affiche.

2. Cliquez sur Ne plus afficher.

Impression de la documentation de Fireworks

Les ouvrages suivants sont également disponibles au
format PDF sur le site Web de Macromedia à l’adresse

http://www.macromedia.com/go/fw_documentation_fr :

■ Utilisation de Fireworks

■ Bien démarrer avec Fireworks

■ Extension de Fireworks

Vous pouvez imprimer la totalité ou une partie du fichier PDF sur votre
propre imprimante ou vous adresser à un centre de reprographie.

CHAPITRE 3

Concepts de base de Fireworks

Macromedia Fireworks 8 est une application polyvalente pour la
conception de graphiques Web. Vous pouvez créer et modifier des
images bitmap et vectorielles, créer des effets pour le Web, tels que des
survols et des menus contextuels, recadrer et optimiser des graphiques
afin de réduire la taille de leur fichier et gagner du temps en
automatisant les tâches répétitives. Ses solutions novatrices permettent
de résoudre les principaux problèmes posés aux concepteurs et aux
webmasters.

Ce chapitre couvre les rubriques suivantes :

Se familiariser avec l’espace de travail Fireworks . . . . . . . . . . . . . 15

Exécution de tâches de base dans Fireworks . . . . . . . . . . . . . . . . .26

Se familiariser avec l’espace de travail Fireworks

3

Lorsque vous ouvrez pour la première fois un document dans
Fireworks, Fireworks active l’environnement de travail, y compris le
panneau Outils, l’Inspecteur des propriétés, les menus et d’autres
panneaux.

15

Le panneau Outils, à gauche de l’écran, contient des catégories étiquetées,
incluant les groupes d’outils bitmap, vectoriels et Web. L’Inspecteur des
propriétés s’affiche au bas du document en présentant initialement les
propriétés du document ; les propriétés changent lorsque vous sélectionnez
un nouvel outil ou un objet dans le document. Les panneaux sont
initialement ancrés en groupes le long du bord droit de l’écran.

16 Concepts de base de Fireworks

Utilisation du panneau Outils

Le panneau Outils se divise en six catégories : Sélection, Bitmap, Vecteur,
Web, Couleurs et Affichage.

Graphiques vectoriels et bitmap

Les ordinateurs affichent des graphiques au format vectoriel ou bitmap.
Comprendre la différence entre les deux formats vous aidera à comprendre
Fireworks, qui contient des outils vectoriels et bitmap et qui est capable
d’ouvrir ou d’importer les deux formats.

Se familiariser avec l’espace de travail Fireworks 17

Les graphiques bitmap sont composés de points, appelés pixels, organisés
dans une grille. Lorsque vous modifiez un graphique bitmap, vous
modifiez des pixels et non des lignes et des courbes. Les graphiques bitmap
dépendent de la résolution, ce qui signifie que les données décrivant
l’image sont conditionnées par une grille de taille spécifique.
L’agrandissement d’un graphique bitmap modifie la distribution des pixels
dans la grille et produit souvent une image aux bords dentelés.

Les

graphiques vectoriels reproduisent des images en utilisant des lignes

et des courbes, appelées vecteurs, qui incluent des informations de couleur
et de position. Lorsque vous modifiez un graphique vectoriel, vous
modifiez les propriétés des lignes et des courbes qui en décrivent la forme.
Les graphiques vectoriels ne dépendent pas de la résolution, ce qui signifie
que vous pouvez déplacer, redimensionner, reformer ou changer la couleur
d’un graphique vectoriel et l’afficher sur des écrans de diverses résolutions,
sans affecter la qualité de son aspect.

Vous pouvez vous exercer à utiliser les outils vectoriels et bitmap sur un
document vierge dans Fireworks afin de voir la différence entre les deux
formats.

Modification des options des outils

Lorsque vous sélectionnez un outil, l’Inspecteur des propriétés affiche les
options de l’outil. Certaines options restent affichées lorsque vous travaillez
avec l’outil. Pour d’autres outils, tels que les outils des formes de base, la
Plume et la Ligne, l’Inspecteur des propriétés affiche les propriétés des
objets sélectionnés. Pour plus d’informations sur l’Inspecteur des
propriétés, voir « Utilisation de l’Inspecteur des propriétés » dans l’Aide de
Fireworks.

18 Concepts de base de Fireworks

Pour afficher, dans l’Inspecteur des propriétés, les options
d’un outil que vous êtes déjà en train d’utiliser :

■ Cliquez sur Sélection > Désélectionner pour désélectionner tous les

objets.

Pour plus d’informations sur des options d’outils spécifiques, voir les
sections qui présentent les différents outils dans Utilisation de Fireworks.

Sélection d’un outil parmi un groupe d’outils

Un petit triangle dans le coin inférieur droit d’un outil dans le panneau
Outils indique qu’il fait partie d’un groupe d’outils. Par exemple, l’outil
Rectangle fait partie du groupe des outils de formes de base, qui inclut les
outils Rectangle arrondi, Ellipse et Polygone, ainsi que tous les outils de
formes intelligentes figurant sous la ligne de séparation.

Pour sélectionner un autre outil dans un groupe d’outils :

1. Cliquez sur l’icône de l’outil et maintenez enfoncé le bouton de la souris.

Un menu contextuel s’affiche avec les icônes des outils, le nom des
outils et les touches de raccourci. L’outil actuellement sélectionné
possède une coche à gauche de son nom.

2. Faites glisser le pointeur afin de sélectionner l’outil souhaité et relâchez

le bouton de la souris.

L’outil s’affiche dans le panneau Outils, et les options de l’outil dans
l’Inspecteur des propriétés.

Utilisation de l’Inspecteur des propriétés

L’Inspecteur des propriétés vous permet de modifier les propriétés de la
sélection, de l’outil ou du document en cours. Par défaut, l’Inspecteur des
propriétés est ancré au bas de l’espace de travail.

Se familiariser avec l’espace de travail Fireworks 19

La fenêtre de l’Inspecteur des propriétés peut s’afficher à mi-hauteur,
présentant deux lignes de propriétés, ou quatre en pleine hauteur. Vous
pouvez également masquer totalement l’Inspecteur des propriétés en le
laissant dans l’espace de travail.

REMARQUE

Dans le manuel Utilisation de Fireworks, la plupart des procédures partent
du principe que la fenêtre de l’Inspecteur des propriétés est affichée en
pleine hauteur.

Pour annuler l’ancrage de l’Inspecteur des propriétés :

■ Faites glisser la poignée du coin supérieur gauche vers un autre endroit

de l’espace de travail.

Pour ancrer l’Inspecteur des propriétés au bas de l’espace de
travail (Windows uniquement) :

■ Faites glisser la barre latérale de l’Inspecteur des propriétés en bas de

l’écran.

Pour agrandir la fenêtre mi-hauteur de l’Inspecteur des
propriétés en pleine hauteur afin d’afficher des options
supplémentaires :

■ Cliquez sur la flèche d’extension située dans le coin inférieur droit de

l’Inspecteur des propriétés.

■ Cliquez sur l’icône en haut à droite de l’Inspecteur des propriétés, puis

dans le menu Options de l’Inspecteur des propriétés, cliquez sur Pleine
hauteur.

REMARQUE

Sous Windows, le menu Options est disponible uniquement lorsque
l’Inspecteur des propriétés est ancré.

20 Concepts de base de Fireworks

Pour réduire la taille d’affichage de l’Inspecteur des propriétés
à mi-hauteur :

■ Cliquez sur la flèche d’extension située dans le coin inférieur droit de

l’Inspecteur des propriétés.

■ Dans le menu Options de l’Inspecteur des propriétés, cliquez sur

Demi-hauteur.

Pour réduire l’Inspecteur des propriétés lorsqu’il est ancré :

■ Cliquez sur la flèche d’extension ou sur le titre de l’Inspecteur des

propriétés.

■ Dans le menu Options de l’Inspecteur des propriétés ancré, cliquez sur

Réduire le groupe de panneaux.

Pour plus d’informations sur des options spécifiques de l’Inspecteur des
propriétés, voir les sections appropriées du manuel Utilisation de Fireworks.

Utilisation des panneaux

Les panneaux permettent de modifier l’aspect d’un objet sélectionné ou
d’éléments du document. Ils permettent de travailler sur des images, des
calques, des symboles, etc. Il est possible de faire glisser les panneaux de
façon à les regrouper en fonction de vos préférences.

Certains panneaux ne s’affichent pas par défaut mais vous pouvez les
afficher si vous le souhaitez. Certains panneaux ne sont pas groupés avec
d’autres panneaux par défaut mais vous pouvez les grouper si vous le
souhaitez. Lorsque vous regroupez des panneaux, tous les noms du groupe
de panneaux s’affichent dans la barre de titre du groupe de panneaux. Vous
pouvez toutefois renommer les groupes de panneaux comme bon vous
semble.

Le panneau Optimiser vous permet de gérer les paramètres qui contrôlent

la taille et le type de fichier et de travailler avec la palette de couleurs du
fichier ou de la découpe à exporter.

Le panneau Calques vous permet d’organiser la structure d’un document

et comporte des options de création, suppression et manipulation des
calques.

Le panneau Images inclut des options de création d’animations.

Se familiariser avec l’espace de travail Fireworks 21

Le panneau Historique répertorie les commandes que vous avez utilisées

récemment de façon à vous permettre de les annuler et de les rétablir
rapidement. En outre, vous pouvez sélectionner des actions multiples, puis
les enregistrer et les réutiliser en tant que commandes. Pour plus
d’informations, voir « Utilisation du panneau Historique pour annuler ou
répéter plusieurs actions » dans le manuel Utilisation de Fireworks.

Le panneau Formes contient les formes automatiques qui ne s’affichent

pas dans le panneau Outils.

Le panneau Styles vous permet de stocker et de réutiliser des

combinaisons de caractéristiques d’objets ou de sélectionner un
style stocké.

Le panneau Bibliothèque comporte des symboles de graphique, de

bouton et d’animation. Vous pouvez facilement faire glisser les occurrences
de ces symboles du panneau Bibliothèque vers votre document. Vous
pouvez modifier l’ensemble des occurrences en modifiant uniquement le
symbole.

Le panneau URL vous permet de créer des bibliothèques contenant des

URL fréquemment utilisées.

Le panneau Mélangeur (Fenêtre > Mélangeur) vous permet de créer de

nouvelles couleurs que vous pouvez ensuite ajouter à la palette de couleurs
du document actif ou appliquer à des objets sélectionnés.

Le panneau Nuanciers (Fenêtre > Nuanciers) gère la palette de couleurs

du document actif.

Le panneau Info (Fenêtre > Info) fournit des informations sur les

dimensions des objets sélectionnés et les coordonnées exactes du pointeur
au cours de son déplacement dans le document.

Le panneau Comportements (Fenêtre > Comportements) gère les

comportements qui déterminent ce qui se produit lorsque des références ou
des découpes réagissent aux déplacements de la souris.

Le panneau Rechercher (Fenêtre > Rechercher) vous permet de

rechercher et de remplacer des éléments, tels que du texte, des URL, des
polices et des couleurs dans un ou plusieurs documents.

Le panneau Aligner (Fenêtre > Aligner) contient les commandes

d’alignement et de distribution des objets dans le document.

22 Concepts de base de Fireworks

Le panneau Propriétés de forme automatique (Fenêtre > Propriétés de

forme automatique) vous permet de définir les propriétés de formes
automatiques.

Le panneau Modification d’image (Fenêtre > Modification d’image)

regroupe en un seul endroit les outils les plus fréquemment utilisés pour la
retouche de photos.

Le panneau Caractères spéciaux (Fenêtre > Caractères spéciaux) vous

permet d’insérer des caractères spéciaux dans votre texte directement dans
Fireworks, au lieu de devoir les copier et les coller au départ d’une autre
source.

Organisation des panneaux et des groupes de panneaux

Par défaut, certains panneaux Fireworks sont ancrés dans la partie droite de
l’espace de travail. Certains panneaux sont organisés en groupes de
panneaux. D’autres panneaux ne sont pas affichés initialement mais vous
pouvez les ouvrir depuis le menu Fenêtre. Vous pouvez annuler l’ancrage
des groupes de panneaux, ajouter des panneaux à un groupe, annuler
l’ancrage de panneaux individuels, réorganiser l’ordre des groupes de
panneaux ancrés et réduire et fermer des groupes de panneaux. Vous
pouvez également ouvrir et fermer des panneaux individuels.

Pour ouvrir un panneau fermé :

■ Dans le menu Fenêtre, cliquez sur le nom du panneau.

Pour fermer un panneau, exécutez l’une des actions suivantes :

■ Dans le menu Fenêtre, cliquez sur le nom de panneau.

■ Lorsque le panneau n’est pas ancré, cliquez sur le bouton Fermer dans

la barre de titre du panneau.

Pour annuler l’ancrage ou déplacer un groupe de panneaux :

■ Faites glisser la poignée du coin supérieur gauche du panneau et

déplacez-la hors de la zone d’ancrage des panneaux dans la partie droite
de l’écran.

Se familiariser avec l’espace de travail Fireworks 23

CONSEIL

Une coche à côté

du nom d’un

panneau dans le

menu Fenêtre

indique que le

panneau est

ouvert.

Pour ancrer un groupe de panneaux :

■ Faites glisser la poignée du panneau vers la zone d’ancrage des

panneaux.

Lorsque vous faites glisser un panneau ou un groupe de panneaux au­dessus de la zone d’ancrage des panneaux, une ligne ou un rectangle
d’aperçu du placement montre où s’effectuera le placement au sein des
groupes.

Pour réduire ou développer un groupe de panneaux ou un
panneau, exécutez l’une des actions suivantes :

■ Cliquez sur le titre du groupe de panneaux ou du panneau.

REMARQUE

La barre de titre est encore visible si le groupe de panneaux ou le panneau
est réduit.

■ Cliquez sur la flèche d’extension située dans le coin supérieur gauche

du groupe de panneaux ou du panneau.

Pour annuler l’ancrage d’un panneau dans un groupe de
panneaux :

■ Dans le menu Options de la barre de titre du groupe de panneaux,

cliquez sur Grouper avec > Nouveau groupe de panneaux (le nom de la
commande Grouper avec change en fonction du nom du panneau
actif). Le panneau s’affiche dans un nouveau groupe de panneaux
distinct.

24 Concepts de base de Fireworks

Pour ancrer un panneau dans un groupe de panneaux :

■ Cliquez sur le nom d’un groupe de panneaux dans le sous-menu

Grouper avec du menu Options du groupe de panneaux (le nom de la
commande Grouper avec change en fonction du nom du panneau
actif).

Pour renommer un groupe de panneaux :

1. Cliquez sur l’icône située en haut à droite du groupe de panneaux, puis

sur Renommer le groupe de panneaux dans le menu Options.

2. Entrez le nouveau nom.

Pour rétablir les positions par défaut des panneaux
correspondant à votre résolution d’écran, exécutez l’une des
actions suivantes :

■ Cliquez sur Fenêtre > Dispositions d’espace de travail > 1024 x 768.

■ Cliquez sur Fenêtre > Dispositions d’espace de travail > 1280 x 1024.

Pour masquer tous les panneaux et l’Inspecteur des
propriétés :

■ Cliquez sur Fenêtre > Masquer les panneaux. Pour afficher des

panneaux masqués, cliquez de nouveau sur Fenêtre > Masquer les
panneaux.

REMARQUE

Les panneaux qui sont masqués lorsque vous cliquez sur Masquer les
panneaux restent masqués lorsque vous désactivez cette commande.

Bouton Exportation rapide

Le bouton Exportation rapide vous permet d’exporter vos fichiers
Fireworks vers diverses applications Macromedia, telles que Dreamweaver,
Flash, Director et Macromedia FreeHand MX. Vous pouvez en outre
exporter vos fichiers vers Photoshop, FrontPage, Adobe
Illustrator, ou en afficher un aperçu dans le navigateur de votre choix.

GoLive et

Se familiariser avec l’espace de travail Fireworks 25

Navigation et affichage d’un document

Vous pouvez contrôler le zoom du document, le nombre de fenêtres et le
mode d’affichage. En outre, vous pouvez facilement afficher une vue
panoramique d’un document, ce qui est particulièrement utile lorsque,
après avoir effectué un zoom avant, vous ne pouvez plus voir l’ensemble du
document.

Lorsque l’affichage de votre document est en mode plein écran dans
Windows, vous pouvez facilement passer d’un document ouvert à un autre
à l’aide des onglets figurant dans le haut de la fenêtre du document. Le
nom de fichier de chaque document ouvert s’inscrit sur un onglet.

26 Concepts de base de Fireworks

Exécution de tâches de base dans Fireworks

Fireworks est une application polyvalente de création, d’édition et
d’optimisation de graphiques Web. Cette section décrit comment
accomplir des tâches de base, telles que la création, l’ouverture et
l’enregistrement de fichiers. Elle explique également comment convertir
des fichiers en d’autres formats. Pour plus d’informations, voir « Concepts
de base de Fireworks » dans le manuel Utilisation de Fireworks.

Fichiers graphiques

Fireworks vous permet de travailler avec divers types de fichiers. Par
exemple, vous pouvez commencer avec un fichier PNG, puis l’enregistrer
au format JPEG ou GIF. Vous pouvez créer des fichiers HTML contenant
du code JavaScript. Vous pouvez également exporter ou enregistrer une
image sous un format de fichier spécifique à une autre application, telle que
Photoshop ou Macromedia Flash, si vous voulez continuer à travailler dans
cette application.

Voici les types de fichiers les plus couramment utilisés dans Fireworks :

PNG (Portable Network Graphic) est le format de fichier natif de

Fireworks. Le format PNG est un format de fichier graphique Web
polyvalent pouvant prendre en charge les couleurs 32 bits, inclure une
transparence ou une couche alpha et rendre des images progressives.

GIF (Graphics Interchange Format) est un format graphique Web très

utilisé pour les dessins animés, les logos, les graphiques comportant
des zones transparentes et les animations. Il contient un maximum de
256 couleurs.

JPEG a été développé par le Joint Photographic Experts Group pour les

besoins spécifiques des images photographiques ou comportant un nombre
très élevé de couleurs. Le format JPEG est idéal pour des photographies
numériques ou numérisées, des images comportant des textures ou des
dégradés, ou toute autre image nécessitant plus de 256 couleurs.

Pour plus d’informations sur les autres types de fichiers dans Fireworks,
voir « Sélection d’un type de fichier » dans le manuel Utilisation de
Fireworks.

Création de nouveaux fichiers dans Fireworks

Lorsque vous créez un nouveau fichier dans Fireworks, vous créez un
fichier de type PNG (Portable Network Graphic). PNG est le format de
fichier natif de Fireworks. Vous pouvez aisément convertir le fichier dans
un autre format de graphique Web, tel que JPEG ou GIF. Pour plus
d’informations, voir Conversion de fichiers dans d’autres formats, page 29.

Exécution de tâches de base dans Fireworks 27

Pour créer un nouveau fichier :

1. Cliquez sur Fichier > Nouveau

La boîte de dialogue Nouveau document s’affiche.

2. Entrez la largeur et la hauteur du document en pixels, pouces ou

centimètres.

3. Entrez une résolution en pixels par pouce ou pixels par centimètre.

4. Choisissez une couleur de fond blanche, transparente ou personnalisée.

REMARQUE

Utilisez la fenêtre contextuelle du sélecteur de couleurs Personnalisé pour
sélectionner une couleur de fond personnalisée.

28 Concepts de base de Fireworks

5. Cliquez sur OK pour créer le nouveau document.

Fireworks crée un fichier PNG. L’utilisation d’un fichier PNG comme
fichier source présente les avantages suivants :

■ Le fichier PNG source est toujours modifiable. Vous pouvez faire

marche arrière et effectuer des modifications supplémentaires, même
après l’exportation du fichier dans le but de l’utiliser sur le Web.

■ Vous pouvez découper des graphiques complexes en plusieurs parties

dans le fichier PNG et les exporter sous différents formats et paramètres
d’optimisation.

Ouverture de fichiers dans Fireworks

Dans Fireworks, vous pouvez facilement ouvrir et modifier des images
vectorielles et bitmap.

Pour ouvrir un fichier :

1. Cliquez sur Fichier > Ouvrir.

2. Dans la boîte de dialogue Ouvrir, sélectionnez le fichier, puis cliquez sur

Ouvrir.

Enregistrement de fichiers dans Fireworks

Après avoir créé des fichiers graphiques dans Fireworks, vous pouvez les
enregistrer dans un nouvel emplacement ou les renommer.

Pour enregistrer un fichier :

■ Cliquez sur Fichier > Enregistrer.

Pour enregistrer un fichier dans un nouvel emplacement ou le
renommer :

1. Cliquez sur Fichier > Enregistrer sous.

2. Dans la boîte de dialogue Enregistrer sous, naviguez jusqu’à

l’emplacement souhaité ou entrez le nouveau nom du fichier.

3. Cliquez sur Enregistrer.

CONSEIL

Pour ouvrir un

fichier sans

écraser la version

précédente,

cliquez sur Ouvrir

en tant que Sans

titre, puis

enregistrez le

fichier en utilisant

un autre nom.

Conversion de fichiers dans d’autres formats

Vous pouvez aisément convertir des fichiers dans d’autres formats de
graphiques Web, tels que JPEG ou GIF.

Pour convertir un fichier dans un nouveau format de fichier :

1. Cliquez sur Fichier > Enregistrer sous.

2. Dans le menu contextuel Type de la boîte de dialogue Enregistrer sous,

sélectionnez un nouveau type de fichier.

3. Cliquez sur Enregistrer.

29 Concepts de base de Fireworks

30 Concepts de base de Fireworks

CHAPITRE 4

Didacticiel : Création de maquettes de page

Le présent didacticiel vous guide dans les tâches de base liées à la création
d’une maquette de page Web à l’aide de Macromedia Fireworks 8. Les
maquettes de page sont généralement utilisées pour présenter des projets de
pages à des collègues ou des clients. Une fois un projet approuvé, les
concepteurs Web peuvent utiliser la maquette comme ébauche pour créer
leur page.

Dans le cadre de ce didacticiel, vous allez accomplir les tâches suivantes :

Création d’un dossier de travail. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32

Examen de votre tâche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32

Création et sauvegarde d’un nouveau document . . . . . . . . . . . . . .34

Importation et placement d’images . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Création d’une image composite de la zone de contenu. . . . . . . . 37

Placement de texte et d’images . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43

Exportation de l’image pour le Web. . . . . . . . . . . . . . . . . . . . . . . . . .50

4

31

Création d’un dossier de travail

Avant de commencer, créez un dossier de travail incluant les exemples de
fichiers indiqués dans les didacticiels du manuel Bien démarrer. Cette tâche
consiste à créer le dossier de travail sur votre disque dur, puis à copier les
exemples de fichiers du dossier de l’application Fireworks vers le dossier de
travail.

1. Créez un nouveau dossier nommé local_sites quelque part sur votre

disque dur. Par exemple, créez un dossier nommé local_sites dans l’un
des emplacements suivants :

■ (Windows) C:\Documents and Settings\your_user_name\

Mes documents\local_sites

■ (Macintosh) /Users/your_user_name/Documents/local_sites

Sur Macintosh, il existe un dossier nommé Sites figurant déjà dans
votre dossier utilisateur. N’utilisez pas le dossier Sites comme dossier
local ; le dossier Sites est l’emplacement où vous placez vos pages pour
les rendre accessibles au public lorsque vous utilisez l’ordinateur
Macintosh comme serveur Web.

2. Repérez le dossier cafe_townsend et les dossiers globaux dans le dossier

de l’application Fireworks sur votre disque dur. Si vous avez installé
Fireworks dans son emplacement par défaut, le chemin d’accès des
dossiers est le suivant :

■ (Windows) C:\Program Files\Macromedia\

Fireworks 8\Tutorial_assets\

■ (Macintosh) /Applications/Macromedia Fireworks 8/

Tutorial_assets/

3. Copiez le dossier cafe_townsend et les dossiers globaux dans votre

dossier local_sites.

Examen de votre tâche

Café Townsend, un restaurant fictif, a engagé votre équipe pour concevoir
et créer son site Web. Lors des étapes initiales de planification du projet,
des membres de votre équipe ont rencontré des représentants de Café
Townsend afin de dégager des idées pour le site Web. Durant la réunion,
votre équipe a ébauché des projets possibles sur des serviettes de table (la
réunion s’est tenue dans le restaurant Café Townsend).

32 Didacticiel : Création de maquettes de page

De retour au bureau, l’équipe vous a informé que le client avait
particulièrement apprécié deux projets, esquissés sur les serviettes de table
suivantes :

Examen de votre tâche 33

La tâche qui vous a été attribuée est de créer une maquette de page à partir
du second projet, afin de la présenter au client. La maquette ressemble à
une véritable page Web, mais n’en a pas les fonctionnalités.

Création et sauvegarde d’un nouveau document

Après avoir prévisualisé la maquette terminée, vous êtes prêt à entamer
l’élaboration du projet.

1. Dans Fireworks, cliquez sur Fichier > Nouveau.

2. Dans la boîte de dialogue Nouveau document, entrez 700 pour la valeur

de largeur et 600 pour la valeur de hauteur. Assurez-vous que les deux
mesures sont exprimées en pixels.

3. Définissez la valeur de Couleur du fond sur Personnalisée, puis

sélectionnez la couleur noire dans le menu des couleurs personnalisées.

La boîte de dialogue Nouveau document doit s’afficher comme suit :

4. Cliquez sur OK pour créer le document.

Une fenêtre Document, ayant comme titre Sans Titre-1.png
(Windows) ou Sans Titre-1 (Macintosh), s’affiche.

Si la fenêtre Document n’est pas agrandie, c’est-à-dire si elle n’occupe
pas toute la surface centrale de l’écran, agrandissez-la en cliquant sur le
bouton Agrandir (Windows) ou en activant la case Zoom (Macintosh)
dans le haut de la fenêtre Document. Cette opération agrandit
considérablement votre espace de travail.

34 Didacticiel : Création de maquettes de page

5. Cliquez sur Fichier > Enregistrer, puis accédez au dossier suivant de

votre disque dur :

local_sites/cafe_townsend/fireworks_assets/

6. Nommez le fichier homepage-mockup.

REMARQUE

Sur Macintosh, sélectionnez l’option Ajouter l’extension du nom de fichier,
si ce n’est pas déjà fait.

7. Cliquez sur Enregistrer.

La barre de titre affiche le nouveau nom de fichier avec une extension
.png. PNG est le format de fichier natif de Fireworks. Le fichier PNG
est votre fichier source. Il s’agit de l’emplacement où vous effectuez tout
votre travail dans Fireworks. A la fin de ce didacticiel, vous apprendrez
à exporter votre document vers un autre format compatible avec le
Web.

Importation et placement d’images

Ensuite, importez des images et positionnez-les sur le document Fireworks
afin de voir comment elles sont disposées sur la page Web finale.

Importation du graphique de bannière

Le graphique de bannière est une maquette de la bannière que vous allez
utiliser sur la page réelle. Vous allez produire la version finale de la bannière
dans le cadre du Didacticiel : Création d’une bannière de page, page 65.

1. Cliquez sur Fichier > Importer, puis accédez au dossier suivant de votre

disque dur :

local_sites/cafe_townsend/fireworks_assets/

2. Sélectionnez le fichier banner-mockup.jpg, puis cliquez sur Ouvrir.

Un pointeur d’insertion s’affiche, indiquant la position du coin
supérieur gauche du graphique.

Importation et placement d’images 35

3. Alignez le pointeur sur le coin supérieur gauche du document, puis

cliquez pour insérer le graphique de bannière.

Le graphique de bannière s’affiche entouré d’un cadre bleu indiquant
qu’il s’agit de l’objet actuellement sélectionné.

4. Utilisez les touches fléchées du clavier pour aligner précisément le

graphique de bannière sur le haut du document.

La bannière est correctement alignée si les valeurs de ses coordonnées X
et Y dans l’Inspecteur des propriétés sont égales à 0. L’Inspecteur des
propriétés se trouve au bas de la fenêtre Document. S’il n’est pas visible,
cliquez sur Fenêtre > Propriétés.

5. Cliquez n’importe où en dehors du graphique de bannière sélectionné

pour le désélectionner.

6. Enregistrez votre travail.

Importez l’image d’espace réservé du diaporama.

Ensuite, importez une image d’espace réservé représentant la taille et la
position d’un diaporama photo de type Flash qui figurera sur la page Web
finale. Les images d’espace réservé sont précieuses pour représenter l’aspect
d’un élément de composition sans devoir gérer la grande taille de fichier ni
devoir créer l’élément complexe sous sa forme finale.

1. Cliquez sur Fichier > Importer, puis accédez au dossier suivant de votre

disque dur :

local_sites/cafe_townsend/fireworks_assets/

2. Double-cliquez sur slideshow-placeholder.jpg.

3. Positionnez le pointeur d’insertion environ 6 pixels sous le graphique de

bannière importé précédemment, puis cliquez pour insérer l’espace
réservé du diaporama.

36 Didacticiel : Création de maquettes de page

4. Tandis que l’image de l’espace réservé est sélectionnée, utilisez les

touches fléchées du clavier pour ajuster sa position sur le document.

L’image d’espace réservé est correctement alignée si les valeurs de ses
coordonnées X et Y dans l’Inspecteur des propriétés sont égales
respectivement à 0 et à 98.

5. Cliquez n’importe où en dehors de l’image sélectionnée pour la

désélectionner.

6. Enregistrez votre travail.

Création d’une image composite de la zone de contenu

Vous êtes désormais prêt à créer une maquette de la zone de contenu de la
page Web. Vous allez tracer des objets vectoriels Fireworks afin de
représenter graphiquement les zones de la page Web.

Avant de commencer, examinez l’esquisse sur la serviette de table afin de
vous rafraîchir la mémoire concernant le projet.

Création d’une image composite de la zone de contenu 37

Création et modification d’un rectangle arrondi

Le premier objet à créer est un rectangle arrondi représentant les barres
supérieure et inférieure de la zone de contenu. Vous décidez de créer un
grand rectangle arrondi définissant l’étendue totale de la zone de contenu.

1. Dans la section Vecteur du panneau Outils, sélectionnez l’outil

Rectangle arrondi.

L’outil Rectangle arrondi est un outil de forme. Cliquez sur l’icône
d’extension sur l’icône de forme pour la sélectionner.

2. Dans la fenêtre Document, positionnez le pointeur en forme de croix

sur le document, puis faites-le glisser vers le bas et vers la droite afin de
créer la forme.

Vous pouvez tracer le rectangle arrondi n’importe où sur le document.
A ce stade, ne vous préoccupez pas de la taille et de la position de la
forme ; vous pourrez la redimensionner et la positionner plus tard au
cours de la procédure.

38 Didacticiel : Création de maquettes de page

3. Lorsque vous relâchez le bouton de la souris, un rectangle arrondi

s’affiche, sélectionné, dans la zone que vous avez définie.

Vous pouvez voir qu’un objet est sélectionné grâce à des points bleus
qui s’affichent dans les coins. La plupart des objets possèdent également
une surbrillance bleue autour de leurs bords extérieurs, mais les
rectangles sont des exceptions. Une forme de rectangle arrondi
comporte également des points de contrôle qui s’affichent sous la forme
de losanges jaunes. Ces points de contrôle vous permettent de modifier
la taille et l’arrondi des angles du rectangle.

4. Tandis que le rectangle arrondi est sélectionné, dans l’Inspecteur des

propriétés, activez la case Couleur de remplissage à côté de l’icône du pot
de peinture.

La fenêtre contextuelle Couleur de remplissage s’affiche.

5. Entrez 6B1101 dans la zone de texte située dans le haut de la fenêtre,

puis appuyez sur Entrée.

6. Activez la case Couleur de trait à côté de l’icône du crayon, puis cliquez

sur le bouton Transparent dans le haut de la fenêtre contextuelle
Couleur de trait (il n’est pas sélectionné par défaut).

Désormais, le rectangle arrondi présente un remplissage rouge foncé et
aucun trait.

Vous devez ensuite redimensionner et positionner le rectangle arrondi.
Vous décidez de le faire précisément à l’aide de l’Inspecteur des propriétés.

Création d’une image composite de la zone de contenu 39

1. Tandis que le rectangle arrondi est sélectionné, dans l’Inspecteur des

propriétés, entrez 700 dans la case de largeur (L), 340 dans la case de
hauteur (H), 0 pour la position X, 255 pour la position Y, puis appuyez
sur Entrée pour appliquer la dernière valeur.

REMARQUE

La position Y n’est qu’une approximation. Vous pouvez également utiliser les
touches fléchées pour déplacer le rectangle arrondi vers le haut ou vers le
bas, jusqu’à ce qu’il se trouve environ 6 pixels sous l’image de l’espace
réservé du diaporama.

Une fois le rectangle arrondi redimensionné, vous constatez que les bords
arrondis apparaissent distordus. Vous souhaitez les ajuster afin de créer les
angles arrondis de façon appropriée.

Le rectangle arrondi est une forme automatique de Fireworks. Vous pouvez
donc utiliser le panneau Propriétés de forme automatique pour ajuster
l’arrondi des angles.

1. Tandis que le rectangle arrondi est sélectionné, ouvrez le panneau

Propriétés de forme automatique en cliquant sur Fenêtre > Propriétés de
forme automatique (pas sur Fenêtre > Formes automatiques).

2. Entrez 20 pour l’arrondi du premier angle, puis appuyez sur Entrée.

Comme les valeurs sont verrouillées, la modification de la valeur d’un
arrondi entraîne la modification de toutes les autres valeurs.

En même temps, Fireworks ajuste les angles de la forme sur le
document.

40 Didacticiel : Création de maquettes de page

3. Fermez le panneau Propriétés de forme automatique, puis cliquez en

dehors du document pour désélectionner le rectangle arrondi.

4. Enregistrez votre travail.

Création d’une zone de barre latérale de navigation

Ensuite, vous décidez de créer un rectangle afin de définir la barre latérale
de navigation pour la page Web.

1. Dans la section Vecteur du panneau Outils, sélectionnez l’outil

Rectangle.

2. Positionnez le pointeur en forme de croix dans le rectangle arrondi tracé

précédemment, puis faites-le glisser vers le bas et vers la droite afin de
créer un rectangle vertical pour la barre latérale.

Vous pouvez tracer le rectangle n’importe où sur le document. Vous le
redimensionnerez et le positionnerez ultérieurement.

Lorsque vous relâchez le bouton de la souris, un rectangle s’affiche,
sélectionné, dans la zone que vous avez définie.

Vous devez ensuite attribuer au rectangle un remplissage orange.

1. Tandis que le rectangle est sélectionné, dans l’Inspecteur des propriétés,

activez la case Couleur de remplissage à côté de l’icône du pot de
peinture.

La fenêtre contextuelle Couleur de remplissage s’affiche.

2. Entrez A3210A dans la zone de texte située dans le haut de la fenêtre,

puis appuyez sur Entrée.

3. Activez la case Couleur de trait à côté de l’icône du crayon, puis cliquez

sur le bouton Transparent dans le haut de la fenêtre contextuelle
Couleur de trait.

Désormais, le rectangle présente un remplissage orange et aucun trait.

Création d’une image composite de la zone de contenu 41

Vous devez ensuite redimensionner et positionner le rectangle. Vous
décidez de le faire précisément à l’aide de l’Inspecteur des propriétés.

1. Tandis que le rectangle est sélectionné, dans l’Inspecteur des propriétés,

entrez 140 dans la case de largeur (L), 295 dans la case de hauteur (H),
0 pour la position X, 278 pour la position Y, puis appuyez sur Entrée

pour appliquer la dernière valeur.

REMARQUE

La position Y n’est qu’une approximation. Vous pouvez également utiliser les
touches fléchées pour déplacer le rectangle vers le haut ou vers le bas,
jusqu’à ce qu’il soit centré verticalement par rapport au rectangle arrondi
tracé précédemment. La différence de hauteur entre les deux objets est de
45 pixels, de sorte que le haut du rectangle orange doit se trouver 22 ou 23
pixels sous le haut du rectangle arrondi rouge foncé.

2. Enregistrez votre travail.

Création de la zone de copie

Enfin, vous devez créer un rectangle blanc cassé pour représenter la zone
dans laquelle s’affichera le texte de la page Web.

1. Dans la section Vecteur du panneau Outils, sélectionnez l’outil

Rectangle.

2. Positionnez le pointeur en forme de croix dans le rectangle arrondi tracé

précédemment, puis faites-le glisser vers le bas et vers la droite afin de
créer un rectangle horizontal pour la zone de copie.

Vous pouvez tracer le rectangle n’importe où sur le document. Vous le
redimensionnerez et le positionnerez ultérieurement.

Lorsque vous relâchez le bouton de la souris, un rectangle s’affiche,
sélectionné, dans la zone que vous avez définie.

Vous devez à présent attribuer au rectangle un remplissage blanc cassé.

1. Tandis que le rectangle est sélectionné, dans l’Inspecteur des propriétés,

activez la case Couleur de remplissage à côté de l’icône du pot de
peinture.

La fenêtre contextuelle Couleur de remplissage s’affiche.

2. Entrez F7EEDF dans la zone de texte située dans le haut de la fenêtre,

puis appuyez sur Entrée.

3. Activez la case Couleur de trait à côté de l’icône du crayon, puis cliquez

sur le bouton Transparent dans le haut de la fenêtre contextuelle
Couleur de trait.

42 Didacticiel : Création de maquettes de page

Désormais, le rectangle présente un remplissage blanc cassé et aucun trait.

Vous devez ensuite redimensionner et positionner le rectangle arrondi.
Vous décidez de le faire précisément à l’aide de l’Inspecteur des propriétés.

1. Tandis que le rectangle est sélectionné, dans l’Inspecteur des propriétés,

entrez 560 dans la case de largeur (L), 295 dans la case de hauteur (H),
140 pour la position X, 278 pour la position Y, puis appuyez sur Entrée

pour appliquer la dernière valeur.

REMARQUE

La position Y doit être identique à la position Y du rectangle de la barre
latérale.

Placement de texte et d’images

Après avoir créé la maquette de la zone de contenu, vous décidez de créer
des zones de texte pour représenter le contenu et les liens de navigation,
puis d’importer des images afin de représenter les autres fonctions de la
zone de contenu.

Placement du texte d’espace réservé pour les liens

Le premier élément à créer est le texte représentant les liens de navigation.

1. Dans la section Vecteur du panneau Outils, sélectionnez l’outil Texte,

puis déplacez le pointeur sur la fenêtre Document.

Le pointeur prend l’aspect d’un rayon laser et l’Inspecteur des
propriétés affiche les propriétés du texte.

Police Taille

horizontale

Couleur de
remplissage

Boutons d’alignementInterlignageEchelle

Boutons de style

Placement de texte et d’images 43

2. Dans l’Inspecteur des propriétés, définissez les propriétés d’outil

suivantes :

■ Dans le menu contextuel Police, cliquez sur TrebuchetMS.

REMARQUE

Si vous ne disposez pas de la police TrebuchetMS, cliquez sur la police
Verdana ou une police similaire à la place.

■ Cliquez sur le bouton Gras.

■ Entrez 14 pour la taille de la police.

■ Sélectionnez Anticrénelage lissé comme niveau d’anticrénelage.

■ Cliquez sur l’icône Couleur à côté du menu de la taille de police,

puis sélectionnez la nuance blanche.

■ Cliquez sur le bouton Alignement à gauche.

■ Entrez 200 comme pourcentage d’interlignage à côté de l’icône de

flèche verticale à deux pointes.

3. Avec le pointeur en forme de rayon laser, cliquez une fois près du coin

supérieur gauche du rectangle de barre latérale.

Cette opération crée un bloc de texte vide.

4. Entrez Cuisine dans le bloc de texte, puis appuyez sur Entrée pour

entamer une nouvelle ligne.

La largeur du bloc de texte augmente à mesure que vous entrez du
texte.

44 Didacticiel : Création de maquettes de page

5. Entrez les éléments suivants, en appuyant chaque fois sur Entrée pour

entamer une nouvelle ligne :

■ Chef Ipsum

■ Articles

■ Evénements spéciaux

■ Situation

■ Menu

■ Nous contacter

Une fois cette étape terminée, vous disposez d’un bloc de texte
représentant les liens de navigation.

6. Dans le panneau Outils, cliquez sur l’outil Pointeur afin de

désélectionner la zone de texte.

7. Enregistrez votre travail.

Placement d’une image d’espace réservé pour la vidéo

Ensuite, vous ajoutez une image d’espace réservé dans la zone de contenu
principale afin de représenter une vidéo qui s’affichera sur la page Web
finale. Voir Examen de votre tâche, page 32.

1. Cliquez sur Fichier > Importer, puis accédez au dossier suivant de votre

disque dur :

local_sites/cafe_townsend/fireworks_assets/

2. Sélectionnez video-placeholder.jpg, puis cliquez sur Ouvrir.

Placement de texte et d’images 45

3. Positionnez le pointeur d’insertion environ 6 pixels en dessous et à

droite du coin supérieur gauche de la zone de copie blanc cassé, puis
cliquez pour insérer l’image.

4. Tandis que l’image de l’espace réservé est sélectionnée, utilisez les

touches fléchées du clavier pour ajuster sa position.

5. Cliquez n’importe où en dehors de l’image sélectionnée pour la

désélectionner.

6. Enregistrez votre travail.

Placement d’une image d’espace réservé pour l’élément présenté

Ensuite, vous ajoutez une image d’espace réservé dans la zone de contenu
principale afin de représenter un élément de menu présenté à afficher sur la
page Web finale. Voir Examen de votre tâche, page 32.

1. Cliquez sur Fichier > Importer, puis accédez au dossier suivant de votre

disque dur :

local_sites/cafe_townsend/fireworks_assets/

2. Sélectionnez feature-placeholder.jpg, puis cliquez sur Ouvrir.

3. Positionnez le pointeur d’insertion environ 6 pixels sous l’image

d’espace réservé de la vidéo, puis cliquez pour insérer l’image.

46 Didacticiel : Création de maquettes de page

4. Tandis que l’image de l’espace réservé est sélectionnée, utilisez les

touches fléchées du clavier pour ajuster sa position.

Vous souhaitez positionner l’image de façon à ce que son bord gauche
soit aligné sur le bord gauche de l’image d’espace réservé de la vidéo.

5. Cliquez n’importe où en dehors de l’image sélectionnée pour la

désélectionner.

6. Enregistrez votre travail.

Ajout d’un texte d’espace réservé pour la copie de page

Enfin, vous allez tracer une zone de texte vide et y importer du texte
d’espace réservé afin de représenter la copie de page.

1. Dans la section Vecteur du panneau Outils, cliquez sur l’outil Texte.

2. Dans l’Inspecteur des propriétés, définissez les propriétés d’outil

suivantes :

■ Dans le menu contextuel Police, cliquez sur Verdana.

■ Entrez 11 pour la taille de la police.

■ Assurez-vous que le bouton Gras n’est pas sélectionné.

■ Cliquez sur la zone Couleur, entrez 240E0A dans la zone de texte

située dans le haut de la fenêtre Couleur, puis appuyez sur Entrée.

■ Entrez 200 comme pourcentage d’interlignage à côté de l’icône de

flèche verticale à deux pointes.

Placement de texte et d’images 47

3. Positionnez le pointeur en forme de rayon laser environ à 6 pixels du

coin supérieur droit de l’image d’espace réservé de la vidéo, puis faites­le glisser vers le bas et vers la droite pour tracer une zone de texte.

Assurez-vous qu’il y a une marge d’environ 6 pixels tout autour.

4. Entrez ou collez environ deux paragraphes de texte d’espace réservé dans

la zone de texte.

Comme le texte représente l’emplacement où le texte doit être inséré
pour la page Web, il ne doit pas nécessairement avoir de sens. Vous
pouvez coller le texte du fichier loremipsum.txt situé dans le dossier
suivant :

local_sites/cafe_townsend/fireworks_assets/

A présent que vous avez créé les blocs de texte de base, vous décidez de
modifier une partie du texte de façon à ce que les paragraphes commencent
par du texte en surbrillance et qu’il y ait du texte simulant des liens à la fin
de chacun d’eux.

1. Dans la section Vecteur du panneau Outils, cliquez sur l’outil Texte,

puis sélectionnez les trois premiers mots du premier paragraphe.

2. Dans l’Inspecteur des propriétés, exécutez les actions suivantes :

■ Cliquez sur le bouton Gras.

■ Activez la case Couleur, entrez 6B1101 dans la zone de texte située

dans le haut de la fenêtre Couleur, puis appuyez sur Entrée.

3. Répétez cette procédure pour les trois premiers mots du second

paragraphe.

48 Didacticiel : Création de maquettes de page

Vous ajoutez à présent une ligne de texte à la fin de chaque paragraphe et
faites en sorte qu’elle ressemble à un lien Web.

1. Cliquez sur le pointeur en forme de rayon laser à la fin du premier

paragraphe, puis appuyez sur la barre d’espace du clavier.

2. Entrez En savoir plus, puis sélectionnez le texte que vous venez d’entrer.

3. Dans l’Inspecteur des propriétés, exécutez les actions suivantes :

■ Cliquez sur le bouton Souligné.

■ Activez la case Couleur, entrez 32596E dans la zone de texte située

dans le haut de la fenêtre Couleur, puis appuyez sur Entrée.

4. Cliquez sur le pointeur en forme de rayon laser à la fin du second

paragraphe, puis appuyez sur la barre d’espace du clavier.

5. Entrez Faire une réservation, puis sélectionnez le texte que vous venez

d’entrer.

6. Dans l’Inspecteur des propriétés, exécutez les actions suivantes :

■ Cliquez sur le bouton Souligné.

■ Activez la case Couleur, entrez 32596E dans la zone de texte située

dans le haut de la fenêtre Couleur, puis appuyez sur Entrée.

7. Dans le panneau Outils, cliquez sur l’outil Pointeur afin de

désélectionner le texte.

8. Enregistrez votre travail.

49 Didacticiel : Création de maquettes de page

Exportation de l’image pour le Web

La maquette de la page d’accueil de Café Townsend que vous avez créée
doit ressembler à ceci :

Ensuite, vous décidez d’exporter le fichier PNG au format JPEG afin de
pouvoir l’afficher sur un site Web interne ou dans un message électronique
adressé à vos collègues ou au client.

50 Didacticiel : Création de maquettes de page

1. Cliquez sur Fichier > Aperçu de l’image.

2. Dans le menu contextuel Format, cliquez sur JPEG.

3. Dans la zone de texte Qualité, entrez 90 ou utilisez le curseur Qualité.

Comme cette image ne sera pas utilisée sur une page Web accessible au
public, vous ne devez pas vous préoccuper de la taille du fichier ni du
temps de téléchargement. Autrement, un paramètre de qualité 90
pourrait être trop élevé.

Dans la zone située au-dessus de l’image d’aperçu, vous pouvez voir la
manière dont vos paramètres affectent la taille de fichier et le temps de
téléchargement.

4. Cliquez sur Exporter.

La boîte de dialogue Exporter s’affiche.

5. Ouvrez le dossier suivant :

local_sites/cafe_townsend/fireworks_assets/

6. Cliquez sur Exporter.

Fireworks crée une version JPEG de votre maquette de page dans le
dossier fireworks_assets. Votre fichier PNG existe encore et vous devez
l’utiliser pour modifier la maquette suite à un commentaire. Après
avoir apporté les modifications nécessaires, exportez-le de nouveau.

51 Didacticiel : Création de maquettes de page

Dans le cadre de ce didacticiel, vous avez créé une maquette de page. Vous
avez appris à créer et enregistrer des fichiers Fireworks, à importer et placer
des images, à tracer des formes vectorielles, à placer du texte et des images
et à exporter des images.

Pour plus d’informations sur certaines des fonctions mentionnées dans ce
didacticiel et sur d’autres fonctions de Fireworks, voir le manuel Utilisation
de Fireworks.

52 Didacticiel : Création de maquettes de page

CHAPITRE 5

Didacticiel : Traitement des photographies

Le présent didacticiel vous guide dans les tâches de base liées à
l’optimisation de photographies à l’aide de Macromedia Fireworks 8.
Il explique comment traiter les fichiers par lots et composer et exporter
un groupe d’images.

Dans le cadre de ce didacticiel, vous allez accomplir les tâches
suivantes :

Examen de votre tâche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .53

Traitement par lots de fichiers d’image de grande taille . . . . . . . . 54

Composition des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .56

Aperçu avant exportation et exportation des images. . . . . . . . . . . 61

Affichage des images optimisées finales . . . . . . . . . . . . . . . . . . . . . 63

Examen de votre tâche

Conformément à la maquette de page que vous avez créée
précédemment, le site Web de Café Townsend inclut un diaporama
photo de type Flash.

5

53

Vous recevez six photographies numériques de plats figurant au menu du
restaurant. Votre tâche est de préparer les images pour le diaporama. Ces
clichés doivent être de bonne qualité mais suffisamment petits pour que
leur téléchargement s’effectue rapidement. De même, la taille de chaque
image doit être de 700 sur 150 pixels pour être adaptée aux dimensions du
diaporama.

REMARQUE

Pour accéder à un didacticiel sur la création du diaporama dans Flash, voir les

didacticiels de Macromedia Flash 8.

Traitement par lots de fichiers d’image de grande taille

Si la source de vos fichiers d’image est un appareil photo numérique, vous
ne pouvez probablement pas utiliser les images directement comme
graphiques Web. La taille et la résolution sont beaucoup trop importantes.
Il se peut également que vous souhaitiez modifier la composition de façon à
n’utiliser que certaines parties des photographies.

Si tous les fichiers d’image nécessitent les mêmes ajustements, vous pouvez
faire l’économie du processus laborieux d’ouverture et de modification de
chaque fichier en traitant les fichiers d’image par lots.

Pour le projet Café Townsend, vous décidez de traiter par lots les six
fichiers JPEG téléchargés à partir d’un appareil photo numérique. Vous
souhaitez effectuer les actions suivantes sur tous les fichiers :

■ Comme les images ont des dimensions différentes, vous souhaitez les

redimensionner de façon à ce qu’elles aient toutes la même largeur.

■ Comme les noms de fichiers sont peu parlants, vous souhaitez leur

ajouter le préfixe « plat_ » afin de mieux décrire les images.

La première étape consiste à sélectionner les fichiers que vous souhaitez
traiter.

54 Didacticiel : Traitement des photographies

Si vous n’avez pas encore crée un dossier de travail, vous devez le faire avant
de commencer. Pour obtenir des instructions, voir Création d’un dossier de

travail, page 32.

1. Dans Fireworks, cliquez sur Fichier > Traitement par lots.

La boîte de dialogue Lots s’affiche.

2. Ouvrez le dossier suivant de votre disque dur :

local_sites/cafe_townsend/fireworks_assets/camera_files

Le dossier contient six images JPEG téléchargées à partir d’un appareil
photo numérique.

3. Pour sélectionner rapidement tous les fichiers composant le lot, cliquez

sur Ajouter tout, puis sur Suivant.

La boîte de dialogue Traitement par lots s’affiche. Cette boîte de
dialogue vous permet de spécifier les actions que vous souhaitez
effectuer sur un lot de fichiers. Dans ce cas, vous devez mettre à
l’échelle et renommer vos fichiers.

4. Sous Options de traitement par lots, sélectionnez Mise à l’échelle, puis

cliquez sur Ajouter pour inclure l’action dans le traitement par lots.

5. Dans la zone Mise à l’échelle, au bas de la boîte de dialogue, sélectionnez

Mise à l’échelle avec cette taille dans la liste, puis définissez les
dimensions comme suit :

■ Entrez 750 dans la case de la largeur.

■ Pour la hauteur, sélectionnez Variable dans la liste.

6. Sous Options de traitement par lots, sélectionnez Renommer, puis

cliquez sur Ajouter pour inclure l’action dans le traitement par lots.

7. Dans la zone Renommer au bas de la boîte de dialogue, sélectionnez

l’option Ajouter un préfixe, puis entrez plat_ dans la zone de texte.

8. Cliquez sur Suivant pour passer à l’écran suivant.

Traitement par lots de fichiers d’image de grande taille 55

9. Assurez-vous que l’option Même emplacement que le fichier d’origine

est sélectionnée, puis cliquez sur Lots pour lancer le traitement par lots.

Fireworks met à l’échelle toutes les images et ajoute le préfixe plat_ à
chaque nom de fichier. Lorsque vous y êtes invité, cliquez sur OK pour
terminer le traitement.

En examinant les fichiers figurant dans le dossier camera_files, vous
pouvez constater que Fireworks a placé les fichiers d’image originaux
dans un dossier nommé Original Files. Vous pouvez également
constater que l’opération de mise à l’échelle a sensiblement réduit la
taille des fichiers.

Composition des images

L’étape suivante consiste à composer les images qui doivent s’afficher dans
le diaporama. La taille de chaque image doit être de 700 sur 150 pixels
pour être adaptée aux dimensions du diaporama. Toutefois, comme les
images que vous avez traitées par lots sont d’une taille supérieure aux
dimensions du diaporama, vous devez sélectionner ou composer une
portion intéressante de 700 x 150 pixels de l’image.

Une option possible consiste à ouvrir chaque image, la recadrer, puis
l’exporter. Vous décidez néanmoins d’adopter une approche plus efficace
en créant un seul fichier d’image contenant les six images dans lequel vous
pouvez composer et exporter les images à tout moment.

56 Didacticiel : Traitement des photographies

Vous commencez par créer le fichier source de l’image. Dans la section
suivante, vous allez ajouter des cadres au fichier, placer une image dans
chaque cadre, puis composer les images. Vous pouvez ensuite exporter les
six images en une seule opération.

1. Dans Fireworks, cliquez sur Fichier > Nouveau.

2. Dans la boîte de dialogue Nouveau document, entrez 700 pour la valeur

de largeur et 150 pour la valeur de hauteur.

Assurez-vous que les deux mesures sont exprimées en pixels.

3. Définissez la couleur du document sur Blanc, puis cliquez sur OK pour

créer le fichier source de l’image.

4. Si la fenêtre Document n’est pas agrandie, c’est-à-dire si elle n’occupe

pas toute la surface centrale de l’écran, agrandissez-la en cliquant sur le
bouton Agrandir (Windows) ou en activant la case Zoom (Macintosh)
dans le haut de la fenêtre Document. Cette opération agrandit
considérablement votre espace de travail.

5. Cliquez sur Fichier > Enregistrer.

6. Ouvrez le dossier suivant de votre disque dur :

local_sites/cafe_townsend/fireworks_assets/

7. Nommez le fichier ImageSource.png, puis cliquez sur Enregistrer.

Pendant l’exécution du didacticiel, pensez à enregistrer fréquemment votre
travail en cliquant sur Fichier > Enregistrer.

Création et dénomination de cadres

Ensuite, vous créez plusieurs cadres dans le fichier ImageSource.png pour y
insérer les fichiers d’image que vous avez traités antérieurement.

Les cadres sont une fonction de Fireworks généralement utilisée pour créer
des animations et des survols. Dans ce cas, vous utilisez des cadres pour
insérer les photos individuelles avant de les exporter simultanément dans
des fichiers distincts.

1. Assurez-vous que le fichier ImageSource.png est ouvert dans Fireworks.

2. Cliquez sur Fenêtre > Cadres pour ouvrir le panneau Cadres.

CONSEIL

Pendant l’exécution
du didacticiel, il peut
être utile d’annuler
une partie de vos
modifications.
Fireworks peut
annuler plusieurs de
vos modifications
récentes, en fonction
du nombre
d’annulations défini
dans la boîte de
dialogue
Préférences. Pour
annuler la
modification la plus
récente, cliquez sur
Edition > Annuler.

Composition des images 57

3. Cliquez sur le menu contextuel dans le coin supérieur droit du panneau,

puis sélectionnez Ajouter des images.

4. Dans la boîte de dialogue Ajouter des images, entrez le chiffre 5, assurez-

vous que l’option Après l’image courante est sélectionnée, puis cliquez
sur OK.

Fireworks ajoute les cinq nouveaux cadres au cadre existant, pour un
total de six.

58 Didacticiel : Traitement des photographies

Par défaut, Fireworks nomme les nouveaux cadres Frame 2, Frame 3,
etc. Vous souhaitez renommer les cadres afin que leurs noms
correspondent aux noms de fichiers des images que vous exporterez
ultérieurement dans le cadre de ce didacticiel.

5. Dans le panneau Cadres, double-cliquez sur Frame 1.

6. Entrez Image0 dans la zone de texte qui s’affiche, puis appuyez sur

Entrée pour valider le nouveau nom.

REMARQUE

Le développeur Flash chargé de créer le diaporama vous a demandé de
commencer la numérotation à 0 pour des raisons d’encodage.

7. Continuez à renommer les cadres Image 1, Image 2, etc.

Lorsque vous exporterez les images ultérieurement dans ce didacticiel,
Fireworks nommera automatiquement les fichiers exportés à l’aide des
noms de cadres.

8. Enregistrez votre travail.

Placement et composition d’une image dans chaque cadre

A présent que vous avez créé six cadres, vous souhaitez importer les fichiers
que vous avez créés précédemment dans chaque cadre. Une fois les images
importées, vous pouvez aisément les composer en les faisant glisser sur le
document. L’utilisation de cadres pour stocker et manipuler les images vous
permet également d’exporter toutes celles-ci simultanément à l’aide des
paramètres de fichier de votre choix.

1. Dans le panneau Cadres, sélectionnez le premier cadre.

2. Cliquez sur Fichier > Importer, puis accédez au dossier suivant de votre

disque dur :

local_sites/cafe_townsend/fireworks_assets/camera_files

3. Sélectionnez plat_1013.jpg, puis cliquez sur Ouvrir.

Composition des images 59

4. Alignez le pointeur d’insertion légèrement à l’extérieur du coin

supérieur gauche du document, comme dans l’illustration suivante, puis
cliquez pour insérer l’image.

L’image s’affiche, sélectionnée, sur le document.

L’image est plus grande que le document, comme l’indique le contour
bleu. Au lieu de recadrer l’image, vous la déplacez jusqu’à ce que la
portion d’image souhaitée figure dans la « fenêtre » créée par le
document. Lorsque vous exporterez l’image ultérieurement dans le
cadre de ce didacticiel, elle sera recadrée de façon à ce que sa hauteur et
sa largeur correspondent à la taille du document (700 x 150 pixels).

60 Didacticiel : Traitement des photographies

5. Pour composer l’image, faites-la glisser jusqu’à afficher la portion

souhaitée dans la fenêtre créée par le document.

6. Cliquez n’importe où en dehors de l’image sélectionnée pour la

désélectionner.

7. Répétez les étapes 1 à 6 pour les cinq images restantes, en veillant à

sélectionner un nouveau cadre vide avant d’importer chaque image.

8. Enregistrez votre travail.

Aperçu avant exportation et exportation des images

Le fichier source de l’image contient six cadres dans lesquels figurent six
images. Le maintien des images dans les cadres vous permet de les exporter
toutes en même temps avec les paramètres de fichier de votre choix, comme
suit.

Aperçu avant exportation et exportation des images 61

1. Cliquez sur Fichier > Aperçu de l’image.

2. Dans la boîte de dialogue Aperçu de l’image, exécutez les actions

suivantes :

■ Dans le menu contextuel Format, cliquez sur JPEG.

Le format JPEG est idéal pour des photographies numériques ou
numérisées, des images comportant des textures ou des dégradés, ou
toute autre image nécessitant plus de 256 couleurs. Pour plus
d’informations sur la sélection des formats, voir Fichiers graphiques,

page 27.

■ Dans la zone de texte Qualité, entrez 75 ou utilisez le curseur

Qualité.

■ Sélectionnez l’option Bords couleur plus nets.

■ Cliquez sur Exporter.

3. Dans la boîte de dialogue Exporter qui s’affiche, ouvrez le dossier

suivant de votre disque dur :

local_sites/cafe_townsend/images/

4. Dans le menu contextuel Exporter, cliquez sur Images vers fichiers.

5. Assurez-vous que l’option Rogner les images n’est pas sélectionnée.

6. Cliquez sur Exporter.

Fireworks exporte chaque cadre dans un fichier d’image distinct du
dossier images en lui attribuant le nom que vous avez attribué au cadre.

62 Didacticiel : Traitement des photographies

Affichage des images optimisées finales

Après avoir exporté les images, vous pouvez voir leur aspect en les ouvrant
dans Fireworks.

Vous pouvez observer ce qui suit :

■ Toutes les images sont recadrées afin d’afficher la composition que vous

avez créée en positionnant les images sur le document.

■ Toutes les images ont une largeur de 700 pixels, une hauteur de 150

pixels et une résolution de 72 pixels par pouce.

Les tableaux ci-après montrent comment les images finales diffèrent des
fichiers JPEG originaux créés à l’aide de l’appareil photo numérique :

Fichiers originaux de l’appareil photo numérique

Nom de fichier Dimensions du

fichier

1013.jpg 1679 x 1170 pixels 402 Ko

1088.jpg 2920 x 1876 pixels 1732 Ko

1095.jpg 2063 x 1444 pixels 753 Ko

1111.jpg 3040 x 1840 pixels 2831 Ko

1320.jpg 3284 x 1855 pixels 1364 Ko

1396.jpg 3346 x 2000 pixels 1435 Ko

Images finales

Nom de fichier Dimensions du

fichier

Image0 700 x 150 pixels 12 Ko

Image1 700 x 150 pixels 16 Ko

Image2 700 x 150 pixels 23 Ko

Image3 700 x 150 pixels 19 Ko

Image4 700 x 150 pixels 21 Ko

Image5 700 x 150 pixels 14 Ko

Taille du fichier

Taille du fichier

Affichage des images optimisées finales 63

Les images finales ont les dimensions uniformes dont vous avez besoin et
leur taille est beaucoup plus petite, ce qui est essentiel pour les sites Web
publics.

Dans le cadre de ce didacticiel, vous avez appris à traiter par lots des fichiers
d’image volumineux, à créer et nommer des cadres, à placer des images
dans des cadres, ainsi qu’à prévisualiser et exporter des fichiers. Pour plus
d’informations sur certaines des fonctions mentionnées dans ce didacticiel
et sur d’autres fonctions de Fireworks, voir le manuel Utilisation de
Fireworks.

64 Didacticiel : Traitement des photographies

CHAPITRE 6

Didacticiel : Création d’une bannière de page

Le présent didacticiel vous guide dans la tâche de conception d’une
bannière de page avec Macromedia Fireworks 8. Vous allez apprendre
à importer des actifs d’image, à manipuler des calques, des formes, des
masques et du texte, ainsi qu’à optimiser et exporter le graphique de
bannière terminé.

Dans le cadre de ce didacticiel, vous allez accomplir les tâches
suivantes :

Examen de votre tâche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .65

Ajout d’un arrière-plan et placement du logo. . . . . . . . . . . . . . . . . .66

Organisation de vos objets à l’aide de calques . . . . . . . . . . . . . . . . 70

Création d’un arrière-plan contrasté pour le logo . . . . . . . . . . . . . . 72

Création d’un contour autour de la bannière . . . . . . . . . . . . . . . . . . 76

Création d’un effet de bord oblique . . . . . . . . . . . . . . . . . . . . . . . . . . 79

Ajout d’une ligne de balise à la bannière . . . . . . . . . . . . . . . . . . . . . . 80

Exportation d’un fichier d’image optimisé . . . . . . . . . . . . . . . . . . . . 81

6

Examen de votre tâche

Durant les étapes de planification du site Café Townsend, plusieurs
projets de graphiques de bannière possibles ont été discutés. Voici une
esquisse du projet approuvé par les représentants de Café Townsend :

Vous recevez un ensemble d’actifs. Votre tâche consiste à créer la bannière
finale pour le site Web en vous basant sur l’esquisse du projet.

65

Ajout d’un arrière-plan et placement du logo

Après avoir créé un nouveau fichier PNG pour la bannière, vous souhaitez
importer une photo devant servir d’image d’arrière-plan pour le graphique.
Vous souhaitez également importer le logo de Café Townsend.

Vous commencez par créer un nouveau fichier PNG pour la bannière.

Si vous n’avez pas encore crée un dossier de travail, vous devez le faire avant
de commencer. Pour obtenir des instructions, voir Création d’un dossier de

travail, page 32.

1. Dans Fireworks, cliquez sur Fichier > Nouveau.

2. Dans la boîte de dialogue Nouveau document, exécutez les actions

suivantes :

■ Entrez 700 pour la largeur et 92 pour la hauteur. Assurez-vous que

les deux mesures sont exprimées en pixels.

■ Définissez la valeur de Couleur du fond sur Personnalisée, puis

sélectionnez la couleur noire dans le menu des couleurs
personnalisées.

3. Cliquez sur OK pour créer le document.

Si la fenêtre Document n’est pas agrandie, c’est-à-dire si elle n’occupe
pas toute la surface centrale de l’écran, agrandissez-la en cliquant sur le
bouton Agrandir (Windows) ou en activant la case Zoom (Macintosh)
dans le haut de la fenêtre Document. Cette opération agrandit
considérablement votre espace de travail.

4. Cliquez sur Fichier > Enregistrer, puis ouvrez le dossier suivant de votre

disque dur :

local_sites/cafe_townsend/images/

5. Nommez le fichier banner_graphic.png.

REMARQUE

Sur Macintosh, sélectionnez l’option Ajouter l’extension du nom de fichier,
si ce n’est pas déjà fait.

6. Cliquez sur Enregistrer.

66 Didacticiel : Création d’une bannière de page

Importation de l’image d’arrière-plan

L’arrière-plan du graphique de bannière consiste en une photographie de
l’intérieur d’un restaurant Café Townsend. Vous pouvez importer la
photographie dans votre document, puis l’ajuster pour qu’elle corresponde
aux dimensions de la bannière.

1. Tandis que le fichier banner_graphic.png est ouvert dans Fireworks,

cliquez sur Fichier > Importer, puis ouvrez le dossier suivant de votre
disque dur :

local_sites/cafe_townsend/fireworks_assets/

2. Sélectionnez cafePhoto.jpg, puis cliquez sur Ouvrir.

3. Alignez le pointeur d’insertion sur le coin supérieur gauche du

document, comme dans l’illustration suivante, puis cliquez pour insérer
l’image.

L’image s’affiche, sélectionnée, sur le document. L’image est plus grande
que le document, comme l’indique le contour bleu. Pour l’insérer
comme vous le souhaitez, mettez à l’échelle et positionnez la photo.

4. Tandis que l’image est sélectionnée, cliquez sur l’outil Mise à l’échelle

dans le panneau Outils (ou appuyez sur Q).

Ajout d’un arrière-plan et placement du logo 67

5. Effectuez un zoom arrière pour afficher la photo tout entière en utilisant

le menu contextuel de définition du grossissement figurant dans le coin
inférieur droit de la fenêtre Document.

6. A l’aide de l’outil Mise à l’échelle, réduisez la taille de la photo d’environ

25 pour cent en cliquant sur le point de sélection dans le coin inférieur
droit de la photo, puis en faisant glisser la souris vers le coin supérieur
gauche.

Le déplacement d’un point de sélection d’angle à l’aide de l’outil Mise à
l’échelle permet de redimensionner la photo en préservant ses
proportions.

.

68 Didacticiel : Création d’une bannière de page

7. Cliquez sur la photo, puis faites-la glisser de façon à ce que le document

affiche la portion de la photo qui doit être visible dans la bannière.

Déplacez la photo afin de composer une image intéressante pour
l’arrière-plan du graphique de bannière.

8. Lorsque l’image vous convient, enregistrez votre travail.

Importation du logo

Vous importez ensuite un graphique vectoriel du logo Café Townsend. Les
graphiques vectoriels sont l’un des types de graphiques que vous créez,
importez ou modifiez dans Fireworks. Pour plus d’informations, voir

Graphiques vectoriels et bitmap, page 17.

Le fichier que vous importez a été créé comme graphique vectoriel dans
Fireworks et enregistré au format Adobe Illustrator (fichier AI),
couramment utilisé pour les travaux de conception graphique.

1. Tandis que le fichier banner_graphic.png est ouvert dans Fireworks,

effectuez un zoom avant jusqu’à l’afficher dans la taille d’origine en
sélectionnant la valeur 100 % dans le menu contextuel de définition du
grossissement si vous ne l’avez pas encore fait.

2. Cliquez sur Fichier > Importer, puis accédez au dossier suivant de votre

disque dur :

local_sites/cafe_townsend/fireworks_assets/

Ajout d’un arrière-plan et placement du logo 69

3. Sélectionnez cafeLogo.ai, puis cliquez sur Ouvrir.

La boîte de dialogue Options de fichier vectoriel s’affiche. Vous pouvez
y définir le mode d’importation d’un fichier vectoriel.

4. Cliquez sur OK pour accepter les options par défaut.

5. Positionnez le pointeur d’insertion à l’intérieur du coin supérieur

gauche de la bannière, puis cliquez pour insérer le graphique.

A ce stade, le logo n’est pas clairement visible parce qu’il s’affiche en
noir et transparent sur une image d’arrière-plan sombre. Vous le
mettrez en surbrillance ultérieurement afin qu’il se détache mieux.

6. Enregistrez votre travail.

Organisation de vos objets à l’aide de calques

A présent que vous avez importé deux graphiques dans votre document,
vous souhaitez les organiser en calques de façon à pouvoir plus aisément
composer la bannière et manipuler ses éléments.

70 Didacticiel : Création d’une bannière de page

Vous souhaitez en particulier organiser les éléments sur trois calques ; un
pour l’arrière-plan, un second pour le logo et un troisième pour d’autres
graphiques. Pour mieux identifier les éléments de chaque calque, vous
souhaitez attribuer aux calques un nom indiquant clairement leur contenu.

1. Assurez-vous que le fichier banner_graphic.png est ouvert dans

Fireworks.

2. Si le panneau Calques n’est pas déjà ouvert, cliquez sur Fenêtre >

Calques.

A ce stade, le graphique de bannière contient un seul calque nommé
Calque 1.

3. Au bas du panneau, cliquez sur le bouton Nouveau calque/Dupliquer à

deux reprises pour créer deux calques supplémentaires.

4. Renommez les calques en double-cliquant sur chacun d’eux, puis en

entrant les noms suivants dans la zone de texte Nom du calque qui
s’affiche :

■ Pour Calque 3, Graphiques

■ Pour Calque 2, Logo

■ Pour Calque 1, Arrière-plan

5. Modifiez l’ordre d’empilage des calques en cliquant sur le calque

Graphiques et en le faisant glisser sous le calque Logo.

Une ligne sombre indique l’endroit où l’objet sera déposé si vous
relâchez le bouton de la souris à ce moment précis. Pour placer un
élément sur un calque, relâchez le bouton de la souris lorsque la ligne
sombre s’affiche au bas du calque.

CONSEIL

Il est toujours
judicieux de nommer
vos calques afin de
les identifier
facilement par la
suite. Lorsqu’un
document prend du
volume et contient
de nombreux
calques et objets, il
peut devenir difficile
de les gérer s’ils ne
portent pas de noms
uniques.

Organisation de vos objets à l’aide de calques 71

y

j

A savoir...

En savoir plus sur les calques Les calques divisent un document Fireworks en plusieurs plans
distincts. Un document peut être composé de nombreux calques pouvant chacun contenir de nombreux
objets. Dans Fireworks, le panneau Calques répertorie les calques d’un document et les objets que
chacun d’eux contient.
Les objets et les calques figurant dans le panneau Calques indiquent l’ordre d’empilage de ces éléments
dans la composition. Les calques et les objets situés dans la partie supérieure du panneau recouvrent les
calques et les objets situés en dessous dans le panneau. En modifiant l’ordre d’empilage des calques ou
des ob

ets à l’intérieur d’un calque, vous pouvez créer l’effet d’objets masquant d’autres objets.

6. Faites glisser l’image du logo (nommée « Groupe : 3 objets ») du calque

Arrière-plan vers le calque Logo.

Le panneau Calques doit ressembler à ceci :

7. Enregistrez votre travail.

Création d’un arrière-plan contrasté pour le logo

Le logo Café Townsend n’est pas clairement visible parce qu’il s’affiche en
noir et transparent sur un arrière-plan sombre. Vous décidez de placer un
rectangle de couleur plus claire derrière le logo afin de le faire ressortir
davantage.

1. Dans le panneau Calques, cliquez sur le calque Logo.

72 Didacticiel : Création d’une bannière de page

2. Dans le panneau Outils, cliquez sur l’outil Rectangle.

3. Dans l’Inspecteur des propriétés, définissez les propriétés suivantes pour

l’outil :

a. Activez la case Catégorie de remplissage, puis cliquez sur Dégradé >

Linéaire.

.

Création d’un arrière-plan contrasté pour le logo 73

b. Activez le sélecteur de couleur de remplissage situé à côté de l’icône

du pot de peinture, puis cliquez sur le bouton juste au-dessus de
l’étiquette Prédéfini dans la boîte de dialogue qui s’affiche.

Une fenêtre contextuelle s’affiche, qui vous permet de sélectionner
la première couleur de dégradé.

74 Didacticiel : Création d’une bannière de page

c. Entrez F7EFE3 dans la zone de texte située dans le haut de la

fenêtre, puis appuyez sur Entrée.

La couleur initiale du dégradé change en fonction de votre choix.

d. Cliquez sur le second bouton de couleur de dégradé (dans la partie

droite de la boîte de dialogue), puis cliquez sur la nuance blanche
avec le pointeur de la pipette.

La couleur finale du dégradé change en fonction de votre choix.

e. Cliquez sur le bouton Opacité correspondant à la seconde couleur

de dégradé dans le coin supérieur droit de la boîte de dialogue :

La fenêtre contextuelle Opacité s’affiche.

f. Utilisez le curseur pour définir l’opacité de la seconde couleur de

dégradé sur 50 %.

Création d’un arrière-plan contrasté pour le logo 75

CONSEIL

Augmentez le
grossissement du
document afin de
fignoler votre travail.

4. Appuyez sur Entrée pour accepter les paramètres, puis tracez un

rectangle sur le logo Café Townsend dans la bannière.

Lorsque vous relâchez le bouton de la souris, un rectangle semi­transparent s’affiche sur le logo.

5. Sélectionnez l’outil Pointeur (ou appuyez sur V), puis faites glisser les

points d’angle bleus du rectangle afin de positionner et de
redimensionner celui-ci de façon à ce qu’il s’inscrive à l’intérieur du
logo.

Le rectangle masque partiellement le logo situé en dessous. Vous
souhaitez modifier l’ordre d’empilage des deux objets de façon à ce que
le rectangle se trouve sous le logo.

6. Dans le calque Logo du panneau Calques, faites glisser l’objet rectangle de

façon à ce qu’il se trouve sous l’objet logo (nommé « Groupe : 3 objets »).

Le logo s’affiche à présent correctement, avec le rectangle mettant en
évidence au lieu de masquer partiellement le logo.

7. Enregistrez votre travail.

Création d’un contour autour de la bannière

Vous souhaitez créer un contour noir autour de la bannière. Pour créer cet
effet, vous décidez d’utiliser un rectangle arrondi comme masque vectoriel.

Un masque vectoriel recadre ou découpe l’objet sous-jacent en fonction de
la forme de son trajet, en créant un effet d’emporte-pièce.

1. Cliquez sur le calque Arrière-plan dans le panneau Calques.

76 Didacticiel : Création d’une bannière de page

2. Dans la section Vecteur du panneau Outils, sélectionnez l’outil

Rectangle arrondi.

3. Dans l’Inspecteur des propriétés, définissez les propriétés suivantes pour

l’outil :

■ Dans le menu contextuel Catégorie de remplissage, cliquez sur

Aucune.

■ Activez le sélecteur de couleur à côté de l’icône du crayon, puis

définissez la couleur de trait sur une nuance de gris clair, telle que
#666666.

■ Définissez la pointe de trait sur 1 et la catégorie de trait sur 1 pixel

adouci.

Création d’un contour autour de la bannière 77

4. Sur le document, tracez et positionnez le rectangle arrondi à l’intérieur

de la bannière.

La zone à l’extérieur du rectangle arrondi s’affiche en noir, formant le
contour de la bannière.

Utilisez les points de sélection bleus pour ajuster la taille de la forme.
Utilisez les points de contrôle en forme de losange jaune pour ajuster
l’arrondi des angles.

5. Tandis que le rectangle arrondi est sélectionné, cliquez sur Edition >

Couper.

6. Dans le panneau Calques, cliquez sur la photo d’arrière-plan (appelée «

Bitmap ») sur le calque Arrière-plan.

Vous souhaitez appliquer le masque à cet objet.

7. Cliquez sur Edition > Coller en tant que masque pour appliquer le

masque à la photo.

Sur le document, la zone couverte par le rectangle arrondi est visible. La
zone extérieure est masquée.

Dans le panneau Calques, une vignette de masque s’affiche à côté de la
photo d’arrière-plan. La surbrillance verte autour de la vignette du
masque indique qu’elle est sélectionnée.

8. Enregistrez votre travail.

78 Didacticiel : Création d’une bannière de page

Création d’un effet de bord oblique

Vous souhaitez créer un effet de bord oblique dans la bannière, comme
illustré dans l’esquisse de bannière (voir Examen de votre tâche, page 65).
Pour produire cet effet, vous décidez de créer une forme et de l’utiliser
comme masque.

1. Dans le panneau Calques, cliquez sur le calque Graphiques.

2. Dans le panneau Outils, cliquez sur l’outil Plume.

3. Dans l’Inspecteur des propriétés, définissez les propriétés suivantes pour

l’outil Plume :

■ Activez le sélecteur de couleur de trait à côté de l’icône du crayon,

puis cliquez sur le bouton Transparent.

■ Dans le menu contextuel Catégorie de remplissage, cliquez sur

Unie.

■ Activez le sélecteur de couleur de remplissage à côté de l’icône du

pot de peinture, puis sélectionnez la nuance noire à l’aide du
pointeur de la pipette.

4. Dans la fenêtre Document à l’extérieur du document, cliquez quatre fois

pour tracer une forme rectangulaire, puis cliquez sur le premier point
pour fermer la forme.

Votre rectangle doit être un peu plus haut que le graphique de bannière
et doit avoir environ un tiers de sa longueur.

Création d’un effet de bord oblique 79

5. Sélectionnez l’outil Pointeur (ou appuyez sur V), puis déplacez la forme

de façon à ce qu’elle couvre le côté gauche de la bannière.

REMARQUE

Comme la forme se trouve sur le calque Graphiques, elle masque
partiellement l’image d’arrière-plan mais pas le logo. Conformément à l’ordre
d’empilage indiqué dans le panneau Calques, le calque Logo se trouve au­dessus du calque Graphiques tandis que le calque Arrière-plan se trouve en
dessous.

6. Cliquez sur l’outil Sous-sélection (ou appuyez sur A), puis sur les points

d’ancrage de la forme afin de l’ajuster de façon à ce que son côté droit
soit oblique, comme suit.

7. Enregistrez votre travail.

Ajout d’une ligne de balise à la bannière

Ensuite, vous ajoutez la ligne de balise de la société, Nouveau World
Cuisine, à la bannière.

1. Dans le panneau Calques, cliquez sur le calque Graphiques.

2. Dans le panneau Outils, cliquez sur l’outil Texte.

3. Dans l’Inspecteur des propriétés, définissez les propriétés suivantes pour

l’outil :

■ Dans le menu contextuel Police, cliquez sur Arial.

■ Entrez 14 pour la taille de la police.

■ Cliquez sur le bouton Gras.

■ Activez la zone Couleur, entrez F7EFE3 comme couleur de texte,

puis appuyez sur Entrée.

■ Cliquez sur le bouton Alignement à gauche.

80 Didacticiel : Création d’une bannière de page

4. Cliquez sous le graphique du logo, puis entrez Nouveau World Cuisine.

5. Cliquez une fois en dehors du bloc de texte pour appliquer votre entrée

de texte.

Fireworks crée un nouvel objet texte sur le calque Graphiques, dont le
nom par défaut correspond au texte que vous avez entré. Cette fonction
vous offre la possibilité d’identifier rapidement les objets texte que vous
utilisez dans votre composition.

6. Enregistrez votre travail.

Exportation d’un fichier d’image optimisé

A présent que vous avez terminé le graphique de bannière, vous êtes prêt à
optimiser et exporter l’image comme fichier JPEG.

y

A savoir...

La gageure de la conception de graphiques Web consiste à créer des images sophistiquées pouvant être
chargées le plus vite possible. Pour ce faire, vous devez réduire la taille de fichier de votre image, tout en
préservant le plus possible la qualité. Cette recherche du meilleur compromis est appelée optimisation :
elle consiste à trouver les valeurs les mieux adaptées pour le nombre de couleurs, le niveau de
compression et la qualité.

Exportation d’un fichier d’image optimisé 81

Optimisation et aperçu de l’image

Avant d’exporter un document Fireworks, vous devez toujours commencer
par l’optimiser. L’optimisation permet d’exporter une image avec le
meilleur compromis possible entre compression et qualité.

1. Si le panneau Optimiser n’est pas encore ouvert, cliquez sur Fenêtre >

Optimiser pour l’ouvrir.

2. Dans le menu contextuel Paramètres, cliquez sur JPEG – Qualité

supérieure.

Les options du panneau se modifient afin de refléter le nouveau
paramètre.

Il est possible de modifier ces paramètres mais, pour ce didacticiel, vous
utiliserez les paramètres par défaut.

82 Didacticiel : Création d’une bannière de page

3. Cliquez sur le bouton Aperçu en haut à gauche de la fenêtre Document.

Fireworks affiche le document tel qu’il se présentera après exportation
avec les paramètres actuels.

En bas à gauche de la fenêtre, Fireworks affiche la taille du fichier
exporté et l’estimation du temps nécessaire pour afficher l’image sur le
Web.

REMARQUE

Lors de l’aperçu de l’image, vous pouvez essayer différents paramètres de
qualité dans le panneau Optimiser et voir leur effet sur l’image.

Exportation de l’image

Après avoir sélectionné vos paramètres d’optimisation, exportez l’image
comme fichier JPEG.

1. Cliquez sur Fichier > Exporter.

Le nom de fichier répertorié possède une extension .jpg. Fireworks a
choisi ce format de fichier car vous l’avez sélectionné dans le panneau
Optimiser.

2. Ouvrez le dossier suivant de votre disque dur :

local_sites/cafe_townsend/images/

3. Assurez-vous que le menu contextuel Type (Windows) ou Enregistrer

sous (Macintosh) indique Images uniquement, puis cliquez sur
Exporter.

83 Didacticiel : Création d’une bannière de page

Le fichier JPEG est exporté vers le dossier images.

Rappelez-vous que le fichier PNG est votre fichier source ou fichier de
travail. Bien que vous ayez exporté votre document au format JPEG,
vous devez également enregistrer le fichier PNG de manière à ce que
toute modification apportée par vos soins se reflète également dans le
fichier source.

4. Cliquez sur Fichier > Enregistrer pour enregistrer les modifications dans

le fichier PNG.

Affichage de l’image exportée

Votre graphique de bannière est terminé. Comparez le fichier JPEG créé
durant le processus d’exportation au fichier PNG sur lequel vous avez
travaillé.

■ Dans Fireworks, cliquez sur Fichier > Ouvrir, ouvrez le dossier images,

puis double-cliquez sur le fichier banner_graphic.jpg.

REMARQUE

Si le fichier ne figure pas dans le dossier images, dans le menu contextuel
Fichiers de type, cliquez sur JPEG.

L’image JPEG s’ouvre dans Fireworks. Comme les images JPEG sont des
bitmaps, l’ensemble des objets et des calques sont fusionnés dans le
panneau Calques.

L’Inspecteur des propriétés n’affiche que quelques propriétés. Toutes les
propriétés disponibles dans le fichier PNG ne sont plus disponibles dans
un fichier JPEG.

84 Didacticiel : Création d’une bannière de page

Vous disposez toujours de votre fichier PNG source de sorte que, si vous
devez travailler davantage sur le projet, vous pouvez modifier le fichier
PNG et l’exporter de nouveau. Il est toujours possible de modifier un
fichier PNG, même si vous exportez l’image sous un autre format, tel que
JPEG.

Dans le cadre de ce didacticiel, vous avez accompli le travail requis pour
créer un graphique de bannière dans Fireworks. Vous avez appris à créer un
nouveau document et à importer des images. Vous avez également
manipulé des calques, des formes, des masques et du texte. Enfin, vous avez
optimisé et exporté l’image terminée.

Pour plus d’informations sur certaines des fonctions mentionnées dans ce
didacticiel et sur d’autres fonctions de Fireworks, voir le manuel Utilisation
de Fireworks.

85 Didacticiel : Création d’une bannière de page

86 Didacticiel : Création d’une bannière de page

CHAPITRE 7

Didacticiel : Création d’une page Web

Le présent didacticiel vous guide dans les tâches de base de conception
et de création d’une page Web avec Macromedia Fireworks 8. Vous
apprendrez également à créer des éléments interactifs, tels que des
boutons, des survols et des menus contextuels.

Avant de commencer, vous devez créer un dossier de travail. Pour
obtenir des instructions, voir Création d’un dossier de travail, page 32.

Dans le cadre de ce didacticiel, vous allez accomplir les tâches
suivantes :

Affichage de la page Web finale. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

Ouverture du fichier source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Importation d’une image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .89

Découpage du document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .90

Création d’un survol. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

Création de boutons pour une barre de navigation. . . . . . . . . . . . . 98

Création et modification d’un menu contextuel. . . . . . . . . . . . . . . 107

Optimisation du document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .117

Exportation de HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

Test du fichier terminé. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

7

87

Affichage de la page Web finale

Commencez par afficher le fichier finalisé du didacticiel pour voir
comment se présentera votre projet une fois exporté au format
HTML.

1. Démarrez votre navigateur Web.

2. Dans votre explorateur de fichiers, localisez et ouvrez le dossier suivant

de votre disque dur :

local_sites/global/Complete/

3. Sélectionnez le fichier final.htm et faites-le glisser vers la fenêtre du

navigateur active.

Dans le cadre de ce didacticiel, vous devez réaliser la pré-version d’une
page Web pour Global, une société de location de voitures.

4. (Internet Explorer) Si le navigateur affiche un message indiquant une

restriction de l’affichage du contenu actif du fichier, cliquez sur le
message pour afficher les options, puis sélectionnez Autoriser le contenu
bloqué.

5. Positionnez le pointeur sur le grand graphique Vintage dans la partie

droite de la page.

Lorsque le pointeur passe au-dessus du graphique, une autre image de
la page change. C’est ce que l’on appelle un survol séparé.

6. Positionnez le pointeur sur la barre de navigation située en haut de la

page.

Les boutons changent lorsque le pointeur les survole.

7. Cliquez sur le bouton Tarifs pour tester le lien.

Le lien vous envoie vers la page de Fireworks à l’adresse
www.macromedia.com (en anglais). Dans le cadre du didacticiel, vous
entrerez votre propre URL pour ce lien et d’autres éléments.

8. Utilisez le bouton Précédente de votre navigateur pour retourner à la

page final.htm.

9. Déplacez le pointeur sur le graphique Worldwide Airports. Un menu

contextuel s’affiche. Positionnez le pointeur sur chaque élément du
menu, y compris le premier contenant un sous-menu.

10. Cliquez sur Etats-Unis pour tester le lien, puis retournez à la page

final.htm.

88 Didacticiel : Création d’une page Web

11. Après avoir affiché la page Web, vous pouvez la conserver ouverte

comme référence ou bien la refermer.

REMARQUE

Le dossier Complete inclut également le fichier PNG à partir duquel le fichier
HTML a été généré. Pour afficher ce fichier, double-cliquez sur final.png.

Ouverture du fichier source

Après avoir affiché le fichier final.htm dans un navigateur, vous êtes prêt à
commencer.

1. Dans Fireworks, cliquez sur Fichier > Ouvrir, puis accédez au dossier

suivant de votre disque dur :

local_sites/global/Start/

2. Double-cliquez sur le fichier global.png pour l’ouvrir dans Fireworks.

3. Cliquez sur Fichier > Enregistrer sous, puis enregistrez le fichier dans le

dossier suivant :

local_sites/global/

REMARQUE

L’enregistrement du fichier dans un autre emplacement vous évite d’écraser
le fichier original si vous devez recommencer.

Importation d’une image

Après avoir ouvert et enregistré le projet non terminé de la page Web de
Global, vous y ajoutez le grand graphique Vintage.

1. Cliquez sur Fichier > Importer, puis accédez au dossier suivant :

local_sites/global/Assets/

2. Sélectionnez vintage.jpg et cliquez sur Ouvrir.

3. Cliquez n’importe où dans l’espace vide et blanc du document pour

insérer le graphique.

Importation d’une image 89

4. Faites glisser l’image, de façon à la positionner conformément à

l’illustration suivante.

5. Enregistrez votre travail.

Découpage du document

Les concepteurs Web utilisent un processus nommé découpage pour couper
une image en éléments plus petits. Les petites images se téléchargent plus
rapidement sur le Web, de telle sorte que les utilisateurs peuvent observer
un chargement progressif de la page au lieu d’attendre le chargement d’une
grande image. En outre, le découpage permet d’optimiser différemment
diverses parties d’un document. Le découpage est également nécessaire
pour ajouter de l’interactivité.

Au cours de cette étape, vous créez des découpes pour certains éléments
graphiques d’une page Web. Plus tard, vous ajouterez de l’interactivité à ces
découpes et vous leur définirez des paramètres d’optimisation et de
compression.

90 Didacticiel : Création d’une page Web

1. Tandis que le graphique Vintage est sélectionné sur le document,

cliquez sur Edition > Insérer > Découpe rectangulaire.

Une découpe rectangulaire est insérée en haut du graphique. Les
découpes possèdent une superposition verte par défaut.

2. Cliquez en dehors de la découpe pour la désélectionner.

Les repères de découpe rouges définissent la découpe, entourant la
largeur et la hauteur du document. Lorsque vous avez créé la découpe,
Fireworks a découpé automatiquement le reste du document.

REMARQUE

Si vous ne voyez pas les repères de découpe rouges, cliquez sur Affichage >
Repères de découpe.

3. Maintenez la touche Maj enfoncée et cliquez sur le graphique du bouton

Worldwide Airports et sur le graphique Great Weekend Rates dans la
partie gauche du document afin de les sélectionner simultanément.

4. Cliquez sur Edition > Insérer > Découpe rectangulaire, puis sélectionnez

Multiple dans la boîte de message qui s’affiche.

Cette étape vous permet d’insérer simultanément plusieurs découpes.

Les découpes sont insérées en haut de chaque graphique sélectionné.
L’ajout de découpes supplémentaires change la mise en page des
découpes automatiques dans le reste du document.

Découpage du document 91

5. Cliquez en dehors des découpes pour les désélectionner.

Il y a maintenant un espace entre la découpe Vintage et la découpe
Great Weekend Rates. Il s’agit d’une fine découpe automatique.

6. Placez le pointeur sur le repère de découpe gauche de l’image Vintage.

Le pointeur se transforme en un pointeur de déplacement de repère,
indiquant que vous pouvez saisir le repère de la découpe et le faire
glisser. En faisant glisser le repère d’une découpe, vous pouvez changer
la forme d’une découpe.

7. Cliquez sur Affichage > Repères > Accrocher aux repères pour activer

l’option Accrocher aux repères si elle n’est pas déjà sélectionnée.

8. Faites glisser le repère de la découpe vers la gauche, jusqu’à ce qu’il

s’accroche au repère de la découpe droite du graphique Great Weekend
Rates, comme illustré ci-après :

92 Didacticiel : Création d’une page Web

9. Relâchez le bouton de la souris.

La découpe Vintage s’étend à présent tout le long de la découpe Great
Weekend Rates, et la minuscule découpe automatique est supprimée.
Représentez-vous les découpes comme étant les cellules d’un tableau
dans un tableur ou un traitement de texte. Par exemple, le fait de glisser
les repères d’une découpe pour la redimensionner provoque le
redimensionnement d’autres découpes, tout comme le glissement des
bords d’une cellule d’un tableau redimensionne d’autres cellules du
tableau. Si vous faites glisser un repère de découpe sur et au-delà des
découpes automatiques, les repères de découpe fusionnent et les
découpes automatiques inutiles sont supprimées.

10. Si le panneau Calques est réduit ou invisible, cliquez sur

Fenêtre > Calques pour l’ouvrir.

Le calque Web se trouve en haut du panneau. Il contient tous les objets
Web d’un document. Les trois découpes que vous avez créées sont
répertoriées ici. Dans tout document, le calque Web est toujours le
calque le plus haut. Il ne peut être ni déplacé, ni renommé ni supprimé.

11. Enregistrez votre travail.

Découpage du document 93

Création d’un survol

A présent que vous avez découpé votre document, vous pouvez créer des
éléments interactifs. Vous décidez d’utiliser deux des quatre découpes pour
créer un survol.

Il existe deux sortes de survols : les survols simples et les survols séparés.
Dans un navigateur Web, un survol simple affiche une image différente
lorsque le pointeur passe dessus. Un survol séparé engendre le changement
d’une autre image dans une autre partie de l’écran lorsque le pointeur passe
dessus. Vous créerez ici un survol séparé.

1. Sélectionnez la découpe recouvrant le graphique Vintage.

L’icône ronde au centre de la découpe est appelée poignée de
comportement. Elle vous permet d’ajouter des comportements ou de
l’interactivité à une découpe. Si vous êtes familier avec les
comportements dans Macromedia Dreamweaver, vous reconnaîtrez de
nombreux comportements identiques dans Fireworks.

94 Didacticiel : Création d’une page Web

Poignée de comportement

Vous pouvez également appliquer des comportements à l’aide du
panneau Comportements. Toutefois, pour une interactivité simple telle
que les survols, il est plus rapide et plus simple d’appliquer un
comportement à l’aide de la poignée de comportement de la découpe.

2. Faites glisser la poignée de comportement sur la découpe Great

Weekend Rates et relâchez le bouton de la souris.

Une ligne de comportement bleue s’étend de la poignée de
comportement au coin de la découpe, et la boîte de dialogue Permuter
les images s’affiche.

3. Dans le menu contextuel Permuter l’image à partir de, assurez-vous que

Image 2 est sélectionné, puis cliquez sur OK.

Dans un navigateur, si le pointeur est positionné sur la découpe
Vintage, l’image dans Image 2 remplace le graphique Great Weekend
Rates. Le graphique Vintage est considéré comme étant l’élément
déclencheur de l’effet de survol, et l’image qui remplace le graphique
Great Weekend Rates comme l’image de permutation.

L’étape suivante consiste à ajouter l’image de permutation à Image 2.

4. Si le panneau Images est réduit ou invisible, cliquez sur Fenêtre > Images

pour l’ouvrir.

Le panneau Images répertorie les images disponibles dans le document
actif. Il n’y a actuellement qu’une seule image dans le document. Le
panneau Images est généralement utilisé pour l’animation. Dans le cas
de survols, il est utilisé pour conserver les images de permutation.

Création d’un survol 95

5. Cliquez sur le bouton Nouvelle image/Dupliquer dans la partie

inférieure du panneau.

Une nouvelle image, nommée Image 2, est créée dans le panneau
Images. Comme le montre l’espace de travail, le cadre est vide, à
l’exception des découpes que vous avez insérées (les découpes sont
réparties dans tous les cadres).

6. Cliquez sur Fichier > Importer, puis accédez au dossier suivant :

local_sites/global/Assets.

7. Sélectionnez le fichier rates.gif, puis cliquez sur Ouvrir.

8. Positionnez le pointeur sur la découpe à l’emplacement où le graphique

Great Weekend Rates se trouvait dans Image 1.

Alignez le pointeur le mieux possible sur le coin supérieur gauche de la
découpe.

96 Didacticiel : Création d’une page Web

9. Cliquez pour insérer le graphique.

Le graphique Vintage Classic Rates s’affiche.

10. Cliquez sur le bouton Aperçu en haut de la fenêtre Document, puis

masquez les découpes du document en cliquant sur le bouton Masquer
les découpes et les références dans la section Web du panneau Outils.

11. Déplacez le pointeur sur le graphique Vintage.

L’image Great Weekend Rates change lorsque le pointeur survole le
graphique Vintage.

12. Lorsque vous avez terminé, cliquez sur le bouton Original en haut de la

fenêtre Document pour revenir à l’affichage normal, et réactivez les
découpes en cliquant sur le bouton Afficher les découpes et les références
dans le panneau Outils.

13. Enregistrez votre travail.

Vous venez de créer un survol séparé. Vous pouvez créer des survols simples
de la même manière : Lorsque vous faites glisser la poignée de
comportement d’une découpe, comme vous l’avez fait à l’étape 2, il vous
suffit de la faire glisser sur la même découpe.

En général, les concepteurs Web ajoutent un effet de survol à une image
pour fournir aux utilisateurs un signe visuel leur indiquant que l’on peut
cliquer sur l’image. Si le site Web Global était un site réel sur Internet, vous
voudriez certainement que les images Vintage et Rates renvoient vers
d’autres pages fournissant davantage d’informations. Pour ce didacticiel,
vous laisserez le survol séparé tel qu’il est. Dans la section suivante, vous
allez pouvoir expérimenter l’insertion de liens vers d’autres objets Web.

CONSEIL

Si l’image semble

un peu sauter ou si

la transition entre

les graphiques ne

semble pas fluide,

masquez les

découpes et

ajustez la position

de l’image de

permutation dans

Image 2 à l’aide de

l’Inspecteur des

propriétés. Ses

coordonnées x et y

doivent

correspondre aux

coordonnées de

l’image Great

Weekend Rates

(11, 202).

Création d’un survol 97

Création de boutons pour une barre de navigation

Les boutons sont des objets Web qui renvoient vers d’autres pages Web.
Leur aspect change généralement selon le mouvement de la souris de
l’utilisateur ou d’autres actions, telles que le clic de souris, comme un signe
visuel témoignant d’une interactivité. Par exemple, l’effet de survol d’un
bouton diffère selon que vous passez le pointeur sur le bouton ou que vous
cliquez dessus.

Une barre de navigation est une série de boutons qui s’affichent sur une ou
plusieurs pages d’un site Web. En général, tous les boutons d’une barre de
navigation ont le même aspect, mis à part leur texte.

Au cours de cette étape, vous allez créer les boutons de la barre de
navigation du site Web de Global.

Création d’un symbole de bouton

Le graphique et le texte initiaux d’un bouton ont déjà été créés pour vous.
Vous allez convertir ce graphique en un symbole de bouton.

1. Dans Fireworks, sélectionnez le graphique du bouton nommé

BOUTON TEXTE dans le coin supérieur gauche du document.

2. Cliquez sur Modification > Symbole > Convertir en symbole.

La boîte de dialogue Propriétés du symbole s’affiche.

3. Entrez Mon bouton dans la zone de texte Nom, sélectionnez le type de

symbole Bouton, puis cliquez sur OK.

98 Didacticiel : Création d’une page Web

Une découpe s’affiche en haut du graphique du bouton, et une icône de
raccourci s’affiche à gauche de la découpe. Cela signifie que la sélection
dans l’espace de travail est une occurrence du symbole que vous venez
juste de créer. Les symboles sont comme des copies maître de vos
graphiques. Lorsque vous changez un symbole, toutes les occurrences
de ce symbole présentes dans votre document changent
automatiquement. Les symboles se trouvent dans la bibliothèque.

4. Si le panneau Bibliothèque est réduit ou invisible, cliquez sur Fenêtre >

Bibliothèque.

Votre symbole est répertorié dans le panneau Bibliothèque.

Création d’états de bouton

Vous allez ensuite créer différents états pour le symbole du bouton. Les
états d’un bouton correspondent aux différents aspects qu’un bouton prend
lorsque vous le survolez ou cliquez dessus dans un navigateur Web.

Création de boutons pour une barre de navigation 99

1. Double-cliquez sur l’occurrence du bouton que vous avez créée.

L’Editeur de boutons s’affiche avec le graphique du bouton affiché dans
la zone de travail.

2. Cliquez sur les onglets placés en haut de l’Editeur de boutons.

Les quatre premiers onglets représentent les états de bouton. Le dernier
onglet, Zone active, représente la zone active du bouton, autrement dit
la partie sur laquelle un utilisateur doit cliquer ou passer pour activer les
états de bouton. La zone active est également la zone de permutation
du bouton, autrement dit la zone qui change avec chacun des états de
bouton. Il n’y a actuellement aucun état pour le symbole du bouton
mis à part l’état Relevé, l’état du bouton avant qu’il ne soit survolé ou
cliqué.

3. Cliquez sur l’onglet Au-dessus, puis sur le bouton Copier le graphisme

Relevé.

Le graphique du bouton est copié à partir de l’onglet Relevé. L’état
Au-dessus d’un bouton est son aspect lorsque le pointeur le survole.
Pour donner à l’utilisateur un effet visuel de réaction, vous décidez de
modifier la couleur du rectangle derrière le texte.

100 Didacticiel : Création d’une page Web