Manuel du propriétaire | MACROMEDIA FIREWORKS 8-BIEN DMARRER AVEC FIREWORKS Manuel utilisateur

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
1
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.
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 Ce nouveau panneau est un emplacement central
d’image
depuis lequel vous pouvez accéder aux outils
d’édition d’image, filtres et autres commandes de
menu couramment utilisés.
Davantage de formats Fireworks 8 prend désormais en charge
de fichiers
l’importation des formats de fichiers QuickTime
importables
Image, MacPaint, SGI & JPEG 2000 (plug-in
QuickTime requis pour la prise en charge de
QuickTime).
Optimisation du
processus de
traitement par lots
6
Présentation
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.
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)
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.
Compatibilité
vectorielle
Les attributs vectoriels (remplissages, traits,
filtres et modes de fondu) sont préservés lorsque
vous déplacez des objets entre Flash et
Fireworks.
Davantage d’options
de découpe
Des découpes polygonales sont insérées
automatiquement quand un objet sélectionné est
un trajet polygonal.
Reconnaissance des
valeurs de couleur
ActionScript
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.
Utilisez la commande
Dans la boîte de dialogue « Enregistrer sous »,
« Enregistrer sous »
sélectionnez des formats de sortie dans un
pour enregistrer vos
fichier unique, tels que gif, jpg, tiff.
bitmaps dans différents
types de fichiers.
Logique d’ouverture,
d’enregistrement et
d’exportation évoluée
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.
Grilles moins intrusives Comme dans Flash, les grilles utilisent désormais
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
25 nouveaux choix pour modifier l’aspect de vos
couleurs et de vos objets.
Ombre de perspective Ajoutez une ombre de perspective pour ouvrir des
trajets et des objets texte.
Ombre unie
Nouveau filtre en direct qui estompe l’objet auquel
il est appliqué plusieurs fois.
Composants
d’interface mobile
Créez rapidement une maquette de votre interface
mobile à l’aide des composants d’interface
bitmap.
Exemples de boutons, Démarrez rapidement avec de nouveaux actifs,
tels que des boutons, des animations, des thèmes
d’animations, de
et des puces.
thèmes et de puces
Panneau Propriétés
Ce nouveau panneau permet de modifier les
de forme automatique propriétés de forme automatique, telles que
Forme automatique Etoile, Forme automatique
Flèche ou Forme automatique Polygone
intelligent.
8
Présentation
Cadre direct et
conversion de
sélections
(conversion de cadre
de sélection en trajet
et inversement)
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.
Texte de
dénomination
automatique
Les calques sont automatiquement nommés à
l’aide du texte que vous y entrez.
Panneau Caractères
spéciaux
Utilisez ce nouveau panneau pour insérer des
caractères spéciaux directement dans des blocs
de texte.
Remise en forme de
texte sur un trajet
Modifiez les points du trajet quand un texte y est
attaché.
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
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.
Enregistrement de
plusieurs sélections
Enregistrez, restaurez, nommez et supprimez
plusieurs cadres de sélection dans des fichiers
PNG.
Sélectionnez les
objets qui partagent
un bord dans le
panneau Calques
Maintenez la touche Maj enfoncée et cliquez pour
sélectionner des objets qui partagent un bord ou
une limite dans le panneau Calques.
Enregistrement
automatique des
préférences
Fireworks 8 enregistre automatiquement les
préférences plus fréquemment.
Groupement de
déplacements
consécutifs
Les déplacements consécutifs sont traités comme
un seul mouvement.
Prise en charge de
tablette améliorée
La prise en charge de tablette a été améliorée
pour les outils Modulateur de trajet et la sensibilité
à la pression du trait.
Verrouillage d’objets
Verrouillage individuel d’objets dans le panneau
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 :
3.
■
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.
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
2
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.
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.
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.
Extension de Fireworks
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) :
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
1.
Pour rechercher une
phrase spécifique,
entourez-la de
guillemets.
Utilisation du système d’aide de Fireworks
13
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 doublecliquez dessus pour afficher les informations indexées.
CONSEIL
Pour utiliser l’index (Macintosh) :
Vous pouvez
commencer à entrer
un mot-clé dans la
zone de texte pour
accéder rapidement
à une entrée d’index.
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.
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.
14
Apprentissage de Fireworks
CHAPITRE 3
Concepts de base de
Fireworks
3
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
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.
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.
18
Concepts de base 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 :
REMARQUE
20
Concepts de base de Fireworks
■
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.
Sous Windows, le menu Options est disponible uniquement lorsque
l’Inspecteur des propriétés est ancré.
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.
contient les formes automatiques qui ne s’affichent
pas dans le panneau Outils.
Le panneau Formes
vous permet de stocker et de réutiliser des
combinaisons de caractéristiques d’objets ou de sélectionner un
style stocké.
Le panneau Styles
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.
vous permet de créer des bibliothèques contenant des
URL fréquemment utilisées.
Le panneau URL
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.
(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 Comportements
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.
(Fenêtre > Aligner) contient les commandes
d’alignement et de distribution des objets dans le document.
Le panneau Aligner
22
Concepts de base de Fireworks
(Fenêtre > Propriétés de
forme automatique) vous permet de définir les propriétés de formes
automatiques.
Le panneau Propriétés de forme automatique
(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 Modification d’image
(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.
Le panneau Caractères spéciaux
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.
■
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.
C ON S E I L
Pour fermer un panneau, exécutez l’une des actions suivantes :
Un e c o ch e à c ô t é
d u no m d ’ u n
p a n n ea u d a n s l e
m e n u Fe n êt r e
in d i q u e q u e le
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.
p a n n ea u es t
ouvert.
Se familiariser avec l’espace de travail Fireworks
23
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 audessus 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.
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 :
24
Concepts de base de Fireworks
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 GoLive et
Illustrator, ou en afficher un aperçu dans le navigateur de votre choix.
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.
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.
26
Concepts de base 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.
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.
JPEG
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.
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 :
28
Concepts de base de Fireworks
■
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.
1.
Cliquez sur Fichier > Ouvrir.
2.
Dans la boîte de dialogue Ouvrir, sélectionnez le fichier, puis cliquez sur
Ouvrir.
C ON S E I L
Pour ouvrir un fichier :
Pour ouvrir un
fichier sans
é c r a s er la v er s io n
p r éc éd e n te,
c l i q uez s u r O u v r i r
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.
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
en tant que Sans
titre, puis
enregistrez le
f i ch i e r e n u t i li s a n t
u n a u t r e no m .
30
Concepts de base de Fireworks
CHAPITRE 4
Didacticiel : Création de
maquettes de page
4
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
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.
3.
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/
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/
36
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.
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.
42
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.
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
Echelle
horizontale
Taille
Interlignage
Couleur de
remplissage
Boutons de style
Boutons d’alignement
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.
3.
■
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.
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/
46
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.
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 faitesle 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 :
3.
48
■
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.
Répétez cette procédure pour les trois premiers mots du second
paragraphe.
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
5
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.
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.
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.
C ON S E I L
Pendant l’exécution du didacticiel, pensez à enregistrer fréquemment votre
travail en cliquant sur Fichier > Enregistrer.
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, assurezvous 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.
3.
■
Dans la zone de texte Qualité, entrez 75 ou utilisez le curseur
Qualité.
■
Sélectionnez l’option Bords couleur plus nets.
■
Cliquez sur Exporter.
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
Taille 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
Nom de fichier
Dimensions du
fichier
Taille 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
Images finales
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
6
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
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 :
3.
■
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.
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.
REMARQUE
Sur Macintosh, sélectionnez l’option Ajouter l’extension du nom de fichier,
si ce n’est pas déjà fait.
6.
66
Nommez le fichier banner_graphic.png.
Cliquez sur Enregistrer.
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
C ON S E I L
5.
■
Modifiez l’ordre d’empilage des calques en cliquant sur le calque
Graphiques et en le faisant glisser sous le calque Logo.
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.
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.
Organisation de vos objets à l’aide de calques
71
y
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 objets à 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.
72
Dans le panneau Calques, cliquez sur le calque Logo.
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
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 semitransparent s’affiche sur le logo.
CONSEIL
5.
Augmentez le
grossissement du
document afin de
fignoler votre travail.
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.
76
Cliquez sur le calque Arrière-plan dans le panneau Calques.
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.
78
Enregistrez votre travail.
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 :
4.
■
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.
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 audessus 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.
80
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.
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.
83
Assurez-vous que le menu contextuel Type (Windows) ou Enregistrer
sous (Macintosh) indique Images uniquement, puis cliquez sur
Exporter.
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
7
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
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.
92
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 :
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.
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.
94
Didacticiel : Création d’une page Web
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.
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.
C O N S E IL
12. Lorsque vous avez terminé, cliquez sur le bouton Original en haut de la
Si l’ i m ag e se mb le
u n p eu sa u t er ou si
la transition entre
le s g r ap h iq u es n e
se mb le pa s fl uide ,
ma sq ue z le s
d éc o up es et
ajustez la position
d e l’ im a g e d e
p er m u t a t i o n d a n s
I ma ge 2 à l’ a i de d e
l’ I n s p ec te u r d e s
p r o p r ié t é s. S es
co o r d o n n ée s x e t y
d o iv e n t
correspondre aux
co o r d o n n ée s d e
l’im ag e G r eat
W ee k en d R a t es
(1 1 , 2 02 ) .
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.
98
Entrez Mon bouton dans la zone de texte Nom, sélectionnez le type de
symbole Bouton, puis cliquez sur OK.
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
4.
Une fois l’onglet Au-dessus activé, veillez à ne sélectionner que le
graphique rectangulaire du bouton et non son texte.
Pour sélectionner le rectangle, sélectionnez l’outil Sous-sélection (ou
appuyez sur A), puis survolez avec précaution le bord gauche ou droit
du graphique du bouton. Les contours de deux objets qui se
chevauchent doivent apparaître. Le rectangle comporte 4 points de
sélection, tandis que le texte en comporte 6. Sélectionnez
soigneusement le contour à l’aide des 4 points de sélection. Si le nom
de l’objet dans l’Inspecteur des propriétés est « Bouton rectangle », vous
avez sélectionné le rectangle avec succès.
5.
Activez le sélecteur de couleur de remplissage dans l’Inspecteur des
propriétés, puis sélectionnez la couleur noire.
Le rectangle est désormais noir, tandis que le texte reste en blanc.
6.
Cliquez sur l’onglet Enfoncé en haut de l’Editeur de boutons, et cliquez
sur le bouton Copier le graphisme Au-dessus.
Le graphique du bouton est copié à partir de l’onglet Au-dessus. L’état
Enfoncé d’un bouton est son aspect après qu’un utilisateur a cliqué
dessus. Cette fois-ci, vous ne changerez pas la couleur du rectangle,
vous la laisserez comme telle.
7.
Cliquez sur Terminé dans l’Editeur de boutons pour appliquer vos
modifications au symbole du bouton.
8.
Cliquez sur le bouton Aperçu dans la fenêtre Document et testez les
états du bouton.
Si nécessaire, désactivez les découpes. Lorsque vous avez terminé,
cliquez sur le bouton Original, puis réactivez les découpes.
9.
Enregistrez votre travail.
Création de boutons pour une barre de navigation
101
Création d’occurrences de bouton
multiples
Vous allez maintenant créer plusieurs occurrences du symbole du bouton.
1.
Sélectionnez le bouton dans l’espace de travail, si cela n’a pas encore été
fait.
2.
Cliquez sur Edition > Cloner.
Une nouvelle occurrence du bouton s’affiche en haut du bouton
d’origine.
3.
Maintenez la touche Maj enfoncée tout en appuyant sur la touche
fléchée droite de manière répétée pour déplacer la nouvelle occurrence
vers la droite.
Le maintien de la touche Maj enfoncée permet de déplacer l’occurrence
par incréments de 10 pixels. Si nécessaire, utilisez uniquement les
touches fléchées afin de déplacer la sélection d’un pixel à la fois.
Positionnez l’occurrence directement à droite de l’occurrence d’origine,
mais sans la superposer, comme indiqué dans l’illustration suivante :
4.
Clonez deux autres occurrences du bouton, et positionnez-les à droite
de la précédente occurrence.
En guise de raccourci, vous pouvez appuyer sur Alt (Windows) ou
Option (Macintosh) tout en faisant glisser l’occurrence sélectionnée
avec le pointeur afin d’en faire une copie. Une fois que la nouvelle
occurrence est positionnée immédiatement à droite de la précédente
occurrence, cliquez sur Edition > Répéter Dupliquer pour créer et
placer automatiquement une autre copie de l’occurrence.
102 Didacticiel : Création d’une page Web
Changement du texte de l’occurrence d’un
bouton
Maintenant que vous avez créé tous les boutons de votre barre de
navigation, vous devez assigner un texte unique à chaque bouton. Vous
pouvez facilement changer le texte de l’occurrence d’un bouton à l’aide de
l’Inspecteur des propriétés.
1.
Sélectionnez l’occurrence du bouton à l’extrême gauche.
Les propriétés de l’occurrence du bouton s’affichent dans l’Inspecteur
des propriétés. A l’exception du menu contextuel Paramètres
d’exportation, ces propriétés s’appliquent uniquement à l’occurrence
sélectionnée. Apporter des modifications ici n’affectera pas le symbole
du bouton d’origine dans la bibliothèque.
2.
Dans l’Inspecteur des propriétés, remplacez le texte de la zone de texte
par le mot ACCUEIL écrit en majuscules. Appuyez sur Entrée.
Le texte du bouton change pour refléter votre saisie.
3.
Pour les trois boutons restants, changez respectivement le texte des
boutons par VEHICULES, TARIFS et NOUS CONTACTER.
Association d’URL aux boutons
Vous allez ensuite affecter une URL unique à chaque occurrence de
bouton. Une URL est l’adresse ou l’emplacement d’une page sur le Web.
Vous pouvez aisément affecter des URL à des boutons à l’aide de
l’Inspecteur des propriétés.
1.
Sélectionnez l’occurrence de bouton nommée Accueil.
Création de boutons pour une barre de navigation 103
2.
Entrez index.htm dans la zone de texte Lien de l’Inspecteur des
propriétés.
Si le bouton Accueil est cliqué dans un navigateur Web, il permet
d’accéder à une page nommée index.htm. Plus loin dans le didacticiel,
vous découvrirez pourquoi vous avez associé le bouton Accueil à cette
page.
3.
Sélectionnez l’occurrence de bouton Véhicules et entrez votre URL
préférée dans la zone de texte Lien de l’Inspecteur des propriétés.
Pour ce didacticiel, n’importe quelle URL fonctionnelle convient. Si
vous créiez un site Web réel, vous entreriez l’URL vers laquelle vous
voudriez que le bouton Véhicules pointe.
REMARQUE
Assurez-vous de bien entrer l’URL d’un site Web existant, de manière à ce
que vous puissiez ensuite tester vos liens.
4.
Associez une URL à chacune des occurrences de bouton restantes. Une
fois encore, n’importe quelle URL fonctionnelle convient.
5.
Cliquez sur Fichier > Aperçu dans le navigateur, puis sélectionnez un
navigateur.
REMARQUE
Si aucun navigateur n’est répertorié, vous devez sélectionner un navigateur
en cliquant sur Fichier > Aperçu dans le navigateur > Sélectionner le
navigateur principal.
Pour tester les liens des boutons, vous devez prévisualiser le document
dans un navigateur.
Lorsque le document s’affiche dans votre navigateur, testez les boutons
que vous avez créés. Mis à part le bouton Accueil, qui renvoie vers un
fichier que vous n’avez pas encore créé, chaque bouton doit renvoyer
vers le lien que vous avez spécifié dans Fireworks.
104 Didacticiel : Création d’une page Web
Modification du symbole du bouton
Ensuite, vous allez modifier le symbole du bouton d’origine. Les
modifications apportées seront automatiquement appliquées à toutes les
occurrences de bouton de votre barre de navigation.
Vous vous demandez peut-être à quoi peut ressembler le symbole du
bouton d’origine, à présent que vous avez changé le texte de plusieurs de ses
occurrences.
1.
Dans l’espace de travail, double-cliquez sur l’une des occurrences du
bouton.
L’Editeur de boutons s’ouvre avec le symbole du bouton d’origine et le
texte affichés dans l’espace de travail. Le symbole du bouton d’origine
est intact et il affiche le texte d’origine.
Lorsque vous avez changé le texte de chaque bouton de l’espace de
travail, vous avez uniquement modifié des occurrences de bouton. Si
vous apportez ici des modifications au niveau de l’aspect du rectangle
ou du texte, vous changeriez le symbole d’origine, et ces modifications
se reflèteraient dans toutes les occurrences de l’espace de travail.
2.
Cliquez sur l’onglet Au-dessus.
3.
Sélectionnez le rectangle noir.
Pour sélectionner le rectangle, sélectionnez l’outil Sous-sélection (ou
appuyez sur A), puis sélectionnez soigneusement le contour
comprenant 4 points de sélection, pas celui qui en comprend 6. Si le
nom de l’objet dans l’Inspecteur des propriétés est « Bouton rectangle »,
vous avez sélectionné le rectangle avec succès.
4.
Activez le sélecteur de couleur de remplissage dans l’Inspecteur des
propriétés, entrez FF6633 comme valeur de couleur, puis appuyez sur
Entrée pour appliquer le changement de couleur.
Le rectangle est maintenant orange.
5.
Cliquez sur Terminé dans l’Editeur de boutons pour appliquer les
modifications au symbole de bouton.
Création de boutons pour une barre de navigation 105
6.
Cliquez sur le bouton Aperçu de la fenêtre Document et testez les
boutons.
Chaque bouton appartenant à l’état Au-dessus est maintenant orange.
Vous avez changé uniquement le symbole du bouton, mais les
modifications ont été appliquées à toutes les occurrences de bouton de
votre barre de navigation.
7.
Cliquez sur le bouton Original dans la fenêtre Document, puis
double-cliquez sur n’importe quelle occurrence de bouton dans
l’espace de travail.
Vous décidez de modifier l’aspect du texte dans le symbole de bouton.
8.
Sous l’onglet Relevé, sélectionnez le texte du bouton.
Pour sélectionner le texte, sélectionnez l’outil Sous-sélection (ou
appuyez sur A), puis sélectionnez soigneusement le contour
comprenant 6 points de sélection, pas celui qui en comprend 4. Si le
nom de l’objet dans l’Inspecteur des propriétés est « Bouton texte »,
vous avez sélectionné le texte avec succès.
9.
Dans l’Inspecteur des propriétés, sélectionnez la police Arial.
10. Répétez
11.
l’opération pour chacun des états de bouton.
Avec l’outil Texte, double-cliquez sur le bloc de texte dans l’Editeur de
boutons, puis supprimez le mot BOUTON.
12. Dans
le panneau Outils, cliquez sur l’outil Pointeur afin de
désélectionner le bloc de texte.
106 Didacticiel : Création d’une page Web
13.
Dans la boîte de message qui vous demande si vous voulez changer le
texte des autres états de bouton, cliquez sur Oui.
Examinez les différents états de bouton dans l’Editeur de boutons. Les
changements de texte d’un état se reflètent dans tous les états de
bouton. Rappelez-vous lorsque vous avez changé la police : vous aviez
également dû la changer dans chacun des états. Cela est dû au fait que
vous pouvez appliquer différents attributs graphiques et de texte à
chaque état de bouton. C’est utile si vous voulez que la couleur du texte
change lorsqu’un utilisateur survole un bouton, par exemple.
14. Cliquez
sur Terminé pour quitter l’Editeur de boutons.
La police de chaque occurrence de bouton change afin de refléter la
nouvelle sélection de police, mais le texte reste le même. Les
occurrences de bouton reflètent uniquement les modifications
apportées à l’aspect graphique d’un symbole de bouton, y compris
ses attributs de texte, mais pas les modifications apportées au texte
lui-même.
Les symboles de bouton vous permettent de changer rapidement
l’aspect graphique de toutes les occurrences de bouton d’une barre de
navigation, tout en conservant le texte unique de chaque occurrence.
15.
Enregistrez votre travail.
Création et modification d’un
menu contextuel
Un menu contextuel est un menu qui s’affiche lorsque, dans un navigateur,
vous déplacez le pointeur sur une image de déclenchement. Il contient une
liste d’éléments qui créent des liens vers d’autres pages Web.
Dans cette section, vous allez créer et modifier un menu contextuel qui
répertorie les emplacements des aéroports de Global.
Création et modification d’un menu contextuel 107
Création d’éléments de liste d’un menu
contextuel
Vous allez commencer par créer les éléments de liste du menu à l’aide de
l’Editeur de menus contextuels.
1.
Sélectionnez la découpe recouvrant le graphique Worldwide Airports.
2.
Cliquez sur Modification > Menu contextuel > Ajouter menu
contextuel.
L’Editeur de menus contextuels s’affiche.
108 Didacticiel : Création d’une page Web
3.
Double-cliquez sur le premier champ dans la colonne Texte, entrez
Amérique du Nord, puis appuyez sur Entrée.
Le champ suivant dans la colonne est en surbrillance, prêt à accueillir
une autre entrée.
4.
Entrez Europe et appuyez sur Entrée.
5.
Créez trois entrées supplémentaires pour Afrique, Moyen-Orient et
Asie/Pacifique.
6.
Double-cliquez sur le premier champ dans la colonne Lien, entrez
l’URL fonctionnelle de votre choix, puis appuyez sur Entrée.
Pour ce didacticiel, n’importe quelle URL convient. Assurez-vous qu’il
s’agit bien d’une URL existante, de manière à ce que vous puissiez
tester vos liens ultérieurement.
7.
Entrez des URL pour les entrées restantes.
REMARQUE
Il y a toujours une ligne supplémentaire en bas de la liste des entrées de
l’Editeur de menus contextuels. Elle vous permet d’ajouter facilement de
nouvelles entrées sans avoir à cliquer sur le bouton Ajouter un menu.
Création et modification d’un menu contextuel 109
8.
Cliquez sur Terminé pour fermer l’Editeur de menus contextuels.
Dans l’espace de travail, le contour de votre menu contextuel apparaît
attaché à la découpe.
9.
Pour tester votre menu contextuel, cliquez sur Fichier > Aperçu dans le
navigateur, puis sélectionnez un navigateur pour prévisualiser le
document.
REMARQUE
Les menus contextuels doivent être prévisualisés dans un navigateur. Ils ne
sont pas visibles sous l’onglet Aperçu dans Fireworks.
Lorsque le document s’affiche dans votre navigateur, déplacez le
pointeur sur le graphique Worldwide Airports. Le menu contextuel que
vous avez créé s’affiche. Cliquez sur chaque entrée pour tester les liens.
10. Enregistrez
110
Didacticiel : Création d’une page Web
votre travail.
Personnalisation du menu contextuel
Vous allez ensuite retourner dans l’Editeur de menus contextuels pour
modifier l’aspect du menu contextuel.
1.
Dans Fireworks, double-cliquez sur le contour du menu contextuel.
L’Editeur de menus contextuels s’ouvre en affichant vos entrées.
2.
Cliquez sur le bouton Suivant.
L’onglet Aspect s’affiche. Dans cet onglet, vous pouvez changer les
couleurs et les polices utilisées dans les menus contextuels.
3.
Sélectionnez le type de cellule HTML et Menu vertical pour
l’alignement.
4.
Sélectionnez les polices Verdana, Arial, Helvetica, sans-serif et une taille
de police de 12.
Création et modification d’un menu contextuel
111
5.
Dans la section Etat relevé, définissez une couleur de texte noire, si le
noir n’a pas encore été sélectionné. Activez ensuite le sélecteur de
couleur de cellule. Si CCCCCC ne s’affiche pas encore dans la zone de
texte en haut de la fenêtre contextuelle des couleurs, entrez CCCCCC,
puis appuyez sur Entrée.
Ces valeurs de couleur sont les couleurs par défaut sélectionnées dans
l’Editeur de menus contextuels si vous n’avez jamais créé un menu
contextuel auparavant. Une fois que vous avez modifié ces couleurs,
elles seront utilisées à chaque fois que vous créerez un menu contextuel,
jusqu’à ce que vous sélectionniez d’autres couleurs.
112
6.
Dans la section Etat au-dessus, définissez une couleur de texte blanche,
si elle n’a pas encore été sélectionnée et activez le sélecteur de couleur de
cellule. Avec le pointeur de la pipette, cliquez sur le rectangle bleu du
document qui entoure le graphique Worldwide Airports, comme
illustré ci-après :
7.
Cliquez sur le bouton Suivant.
Didacticiel : Création d’une page Web
L’onglet Avancé s’affiche. L’onglet Avancé vous permet de changer
différentes propriétés de cellules et de bordures. Vous décidez
d’augmenter la largeur de cellule afin d’élargir le menu contextuel.
8.
Dans le menu contextuel Largeur de cellule, sélectionnez Pixels.
Cela active la case Largeur de cellule.
9.
Entrez 137 pour la largeur de cellule.
10. Dans
le menu contextuel Hauteur de cellule, cliquez sur Automatique,
puis sur le bouton Suivant.
Création et modification d’un menu contextuel
113
L’onglet Position s’affiche. C’est là que vous pouvez spécifier la position
d’affichage du menu contextuel à l’écran. Les coordonnées 0,0
signifient que le coin supérieur gauche du menu contextuel sera aligné
sur le coin supérieur gauche de la découpe qui déclenche son affichage.
Vous pouvez également choisir entre plusieurs positions prédéfinies.
11.
Entrez 3 dans les cases X et Y de Position du menu, puis cliquez sur
Terminé.
REMARQUE
Vous pouvez également repositionner un menu contextuel en faisant glisser
son contour dans l’espace de travail.
12. Prévisualisez
dans un navigateur les modifications de votre menu
contextuel.
Déplacez le pointeur sur le graphique Worldwide Airports. Le menu
contextuel est positionné différemment et apparaît plus large. Survolez
chaque entrée du menu pour observer vos changements de couleur.
13.
114
Enregistrez votre travail.
Didacticiel : Création d’une page Web
Modification du menu contextuel
Vous allez ensuite utiliser l’Editeur de menus contextuels pour ajouter une
autre entrée au menu contextuel. Vous allez également modifier l’ordre des
entrées et ajouter un sous-menu.
1.
Dans Fireworks, double-cliquez sur le contour du menu contextuel.
2.
Sélectionnez l’entrée Europe.
3.
Cliquez sur le bouton Plus (+) au-dessus de la liste des entrées pour
insérer un élément de menu vide.
4.
Double-cliquez sur le champ Texte de la nouvelle entrée, entrez
Amérique latine/du Sud, puis cliquez n’importe où en dehors du champ
Texte pour appliquer l’entrée.
Les Amériques ne sont pas ensemble dans la liste.
5.
Faites glisser l’entrée Amérique latine/du Sud d’une ligne vers le haut et
relâchez le bouton de la souris.
Lorsque vous faites glisser l’entrée, une ligne noire indique l’endroit où
serait déposée l’entrée si vous relâchiez le bouton de la souris à ce
moment précis.
L’entrée est déposée à l’endroit que vous avez spécifié.
6.
Sélectionnez l’entrée Amérique du Nord, puis cliquez sur le bouton Plus
(+) pour ajouter un autre élément de menu.
Création et modification d’un menu contextuel
115
7.
Double-cliquez sur le champ Texte de la nouvelle entrée, entrez EtatsUnis, puis cliquez n’importe où en dehors des champ d’entrée.
REMARQUE
Veillez à ne pas sélectionner d’autre entrée.
8.
Sélectionnez l’entrée Etats-Unis, si cela n’a pas déjà été fait, et cliquez
sur le bouton Menu Renfoncement.
L’entrée est renfoncée sous l’entrée Amérique du Nord.
9.
Cliquez de nouveau sur le bouton Plus (+), puis créez une nouvelle
entrée pour le Canada.
Vous venez juste de créer un sous-menu qui s’affichera lorsque, dans un
navigateur, vous survolerez l’entrée Amérique du Nord.
10. Associez
des URL à toutes les nouvelles entrées.
Vous pouvez éventuellement supprimer le lien Amérique du Nord car
les utilisateurs choisiront des éléments dans son sous-menu.
11.
Cliquez sur Terminé pour fermer l’Editeur de menus contextuels, puis
prévisualisez les modifications du menu contextuel dans un navigateur.
12. Enregistrez
116
Didacticiel : Création d’une page Web
votre travail.
Optimisation du document
Votre document est presque prêt pour le Web. La seule chose que vous avez
besoin de faire avant de l’exporter est de l’optimiser. Avant d’exporter un
document Fireworks, vous devez toujours commencer par l’optimiser.
L’optimisation assure que vos graphiques seront exportés avec le meilleur
compromis possible entre la compression et la qualité.
Lorsque différents types de graphiques se trouvent dans le même
document, il est judicieux de choisir pour chacun un format de fichier et
des paramètres de compression appropriés. La page Web Global est
composée de divers éléments : des bitmaps, des objets vectoriels et du texte.
1.
Si le panneau Optimiser est réduit ou invisible, cliquez sur Fenêtre >
Optimiser pour l’ouvrir.
Fireworks choisit le GIF comme format de fichier d’exportation par
défaut et Websnap Adaptive comme palette de couleurs par défaut. La
plupart des graphiques de la page Web de la société de location de
voitures Global auront un très bon rendu avec ces paramètres.
Toutefois, l’image bitmap Vintage contient une photographie et un
dégradé. Compte tenu des variations de couleur complexes de cette
image, il est préférable de l’exporter dans un autre format.
Optimisation du document
117
2.
Dans la fenêtre Document, cliquez sur le bouton d’aperçu 2 en 1.
Le bouton d’aperçu 2 en 1 vous permet d’afficher le résultat de vos
paramètres d’optimisation et de les comparer avec l’original. Vous avez
probablement déjà noté la couche de découpe blanche qui s’affiche
chaque fois que vous utilisez une des fenêtres Aperçu. La couche vous
permet de cibler uniquement la zone que vous voulez optimiser.
3.
Dans l’aperçu à droite, cliquez sur la découpe pour l’image Vintage.
La couche de la découpe disparaît, de telle sorte que vous pouvez
afficher l’image située sous la découpe. Au bas de l’aperçu, le format de
fichier d’exportation de la découpe sélectionnée est affiché, de même
que l’estimation de la taille du fichier d’exportation et le temps de
téléchargement du graphique à partir du Web.
C O N S E IL
Utilisez l’outil
M a i n d e l a se ct i o n
A f fi c ha ge d u
panneau Outils
p o u r a ffic h er un e
plus grande partie
d e l’ i m a g e d a n s l e
c a s o ù e l le n e
s er a i t p a s
e n t i èr e m en t
v is i bl e.
118
Didacticiel : Création d’une page Web
4.
Masquez provisoirement les découpes en cliquant sur le bouton
Masquer les découpes et les références dans la section Web du panneau
Outils.
Cela vous permet de comparer l’aperçu à l’original et de voir la
différence entre les deux graphiques. L’aperçu à droite possède des
bandes dans le dégradé.
5.
Réactivez les découpes et cliquez sur l’image Vintage dans le volet
gauche avec l’outil Pointeur.
6.
Dans le panneau Optimiser, sélectionnez JPEG – Fichier réduit dans le
menu contextuel Paramètres.
Les bandes de dégradé ont maintenant disparu du volet droit et la taille
du fichier a sensiblement diminué. Cela est dû au fait que les
photographies et les images comportant des variations de couleur
complexes sont mieux optimisées et compressées en fichiers JPEG
qu’en fichiers GIF.
Optimisation du document
119
Maintenant que la taille du fichier a été diminuée, l’image est devenue
floue.
7.
Pour améliorer l’aspect du bitmap, faites glisser le curseur Qualité du
panneau Optimiser sur la valeur 77 et définissez l’option Lissage sur 0.
Le bitmap est plus clair, mais la taille du fichier a également augmenté.
Il permet toutefois d’obtenir une amélioration au niveau de la taille du
fichier par rapport au moment où l’image a été optimisée en tant que
fichier GIF.
8.
Cliquez sur le bouton Original pour revenir à l’affichage normal.
9.
Enregistrez votre travail.
Exportation de HTML
HTML, ou HyperText Markup Language, est la première méthode utilisée
sur Internet pour créer et afficher des pages Web. Vous n’êtes pas obligé de
comprendre le langage HTML pour utiliser Fireworks, mais il est utile de
garder à l’esprit que les découpes de Fireworks deviennent des cellules dans
une table HTML lors de leur exportation.
Dans cette section, vous allez exporter et afficher votre document terminé
dans un navigateur Web. Vous allez également examiner le code HTML
que Fireworks exporte.
120 Didacticiel : Création d’une page Web
Définition des préférences HTML
Avant d’exporter le document, vous devez définir les préférences
d’exportation HTML.
1.
Cliquez sur Fichier > Configuration HTML.
La boîte de dialogue Configuration HTML s’affiche. Les options que
vous définissez dans cette boîte de dialogue affecteront tous les futurs
documents Fireworks que vous créerez, à l’exception des options de
l’onglet Propre au document.
2.
Sous l’onglet Général, sélectionnez un style HTML.
Si vous utilisez un éditeur HTML tel que Macromedia Dreamweaver
ou Microsoft FrontPage, sélectionnez-le dans ce menu contextuel. Agir
de la sorte vous permet d’ouvrir et de modifier facilement le fichier
exporté dans cet éditeur HTML. Si vous n’utilisez pas un éditeur
HTML ou si vous en utilisez un qui ne se trouve pas dans cette liste,
sélectionnez Générique HTML.
3.
Sélectionnez l’extension de fichier .htm.
Exportation de HTML
121
4.
Cliquez sur l’onglet Table.
L’onglet Table vous permet de changer les propriétés de la table
HTML.
5.
Dans le menu contextuel Espace avec, sélectionnez Espace transparent
de 1 pixel.
Si vous sélectionnez cette option, Fireworks exporte un fichier
graphique nommé spacer.gif, qui représente une image transparente de
1 pixel. Les concepteurs Web utilisent des espaces pour faciliter la mise
en page. Ils gardent ouvertes les cellules vides d’une table HTML. Sans
ces espaces, les cellules vides des tableaux HTML disparaîtraient,
modifiant la mise en page initialement prévue. Vous verrez le fichier
spacer.gif un peu plus tard, lorsque vous afficherez vos fichiers exportés.
Vous n’avez pas besoin de comprendre ce que sont les espaces, mais il
est utile de connaître cette option si vous souhaitez la réutiliser
ultérieurement.
122 Didacticiel : Création d’une page Web
6.
Cliquez sur l’onglet Propre au document.
7.
Cliquez sur OK pour accepter les paramètres de l’onglet Propre au
document et fermez la boîte de dialogue Configuration HTML.
C ON S E I L
L’onglet Propre au document vous permet de sélectionner diverses
préférences spécifiques au document, y compris une convention de
dénomination personnalisée pour vos fichiers exportés. Rappelez-vous
que les options que vous définissez ici s’appliquent uniquement au
document Fireworks actif.
Vous pouvez
a p p l iq u er le s
p a r a m èt r es d e
l’ o n g l et P r o p r e a u
d o cu m e nt à t ou s
le s n o u v e a u x
d o cu m e nt s en
cl i q uan t su r l e
bouton
P a r a m èt r es p a r d é
fau t .
123 Didacticiel : Création d’une page Web
Exportation du document au format HTML
Votre document est maintenant prêt pour l’exportation.
1.
Cliquez sur Fichier > Exporter.
2.
Dans la boîte de dialogue Exporter, ouvrez le dossier suivant de votre
disque dur :
local_sites/global/
3.
Assurez-vous que Documents HTML et Images est sélectionné dans le
menu contextuel Exporter, puis entrez index.htm pour le nom de
fichier. Nommer la page d’accueil index.htm est une convention
communément utilisée sur le Web. De nombreux navigateurs affichent
même automatiquement la page index.htm lorsqu’une URL pointe sur
un emplacement et non pas un nom de page.
En outre, plus tôt dans le didacticiel, vous avez associé l’URL
d’index.htm au bouton Accueil. Comme il n’y a actuellement qu’une
seule page sur le site Web Global, associer cette page à elle-même
n’aurait pas beaucoup de sens à ce stade. En revanche, si vous créez
d’autres pages pour ce site dans le futur, vous pourrez utiliser la barre de
navigation sur toutes les pages afin d’offrir aux utilisateurs une
méthode de navigation cohérente.
124 Didacticiel : Création d’une page Web
4.
Assurez-vous que l’option Exporter le fichier HTML est sélectionnée
dans le menu contextuel HTML et que l’option Exporter les découpes
est sélectionnée dans le menu contextuel Découpes.
5.
Sélectionnez les options suivantes, en laissant toutes les autres
désactivées :
■
Inclure les zones sans découpes
■
Placer les images dans des sous-dossiers
Si vous sélectionnez l’option Placer les images dans des sous-dossiers,
Fireworks vous permet de sélectionner un dossier dans lequel stocker
vos fichiers graphiques exportés. S’il n’existe pas, Fireworks crée pour
vous le dossier. Si vous ne sélectionnez pas de dossier, Fireworks choisit
par défaut un dossier nommé images. Pour ce didacticiel, acceptez les
paramètres par défaut.
6.
Cliquez sur Exporter.
Les fichiers sont exportés à l’emplacement que vous avez spécifié.
7.
Cliquez sur Fichier > Enregistrer pour enregistrer votre fichier PNG
source.
Test du fichier terminé
Vos fichiers ont été exportés ; il est maintenant temps de prévisualiser ce
que vous avez créé.
Affichage de la liste des fichiers exportés
Commencez par examiner la liste des fichiers exportés par Fireworks. Les
nouveaux fichiers créés pendant le processus d’exportation figurent dans le
dossier global.
1.
Ouvrez l’explorateur de fichiers et accédez au dossier global.
Fireworks a créé un fichier HTML nommé index.htm. Il s’agit de la
page d’accueil du site Web Global. Fireworks a également créé un
fichier nommé mm_menu.js, qui contient le code nécessaire pour
afficher les menus contextuels.
125 Didacticiel : Création d’une page Web
2.
Ouvrez le sous-dossier des images.
Fireworks a également exporté des fichiers graphiques pour tout votre
travail graphique. Les découpes effectuées dans Fireworks ont toutes été
exportées sous forme de fichiers graphiques distincts. Il y a plusieurs
fichiers GIF et un fichier JPEG. Le fichier JPEG est l’image bitmap que
vous avez optimisée. Le fichier nommé spacer.gif est le résultat de
l’option d’espacement que vous avez sélectionnée dans la boîte de
dialogue Configuration HTML et il sera utilisé pour faciliter la
création de la mise en page.
Affichage du fichier HTML de Fireworks
dans un navigateur
Maintenant que vous avez examiné les fichiers exportés, vous êtes prêt à
tester la page Web dans un navigateur.
1.
A partir du dossier global, faites glisser le fichier index.htm vers un
navigateur Web ouvert.
2.
Dans le navigateur, cliquez sur les boutons que vous avez ajoutés pour
tester les liens, puis retournez au fichier index.htm.
3.
Testez les autres fonctions que vous avez ajoutées.
4.
Ouvrez le fichier index.htm dans un éditeur de texte tels que Bloc-notes
(Windows) ou TextEdit (Macintosh), puis faites défiler le code source.
126 Didacticiel : Création d’une page Web
Si vous connaissez le HTML et le JavaScript, vous reconnaîtrez le code
que Fireworks a créé pour vous. Si vous ne connaissez pas le HTML ni
le JavaScript, vous apprécierez sans doute que Fireworks rende superflu
l’apprentissage de ces langages.
Dans ce didacticiel, vous avez suivi le processus de production permettant
de créer une page Web avec Fireworks. Vous avez appris à ouvrir un
document, y importer des graphiques et découper ce document. Vous avez
également créé un survol, des boutons et un menu contextuel. Et pour
finir, vous avez appris à optimiser et à exporter votre document terminé.
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.
127 Didacticiel : Création d’une page Web
128 Didacticiel : Création d’une page Web