Bien démarrer avec Fireworks Marques commerciales 1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central, ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite, FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev et WebHelp sont des marques déposées ou des marques commerciales de Macromedia, Inc. et peuvent être déposées aux Etats-Unis ou dans d'autres juridictions, y compris au niveau international. D'autres noms de produits, logos, concepts, titres, mots ou phrases mentionnés dans la présente publication peuvent être des marques commerciales, des marques de service ou des noms commerciaux de Macromedia, Inc. ou d'autres entités et peuvent être déposés dans certaines juridictions, y compris au niveau international. Informations sur les tiers Le présent guide contient des liens vers les sites Web de tierces parties qui ne sont pas contrôlés par Macromedia, qui n'est pas responsable du contenu de sites liés. Vous accédez auxdits sites sous votre propre responsabilité. Macromedia mentionne lesdits liens pour faciliter votre travail et l'inclusion desdits liens n'implique pas que Macromedia approuve le contenu desdits sites tiers ou en accepte la responsabilité. Copyright © 2005 Macromedia, Inc. Tous droits réservés. Le présent manuel ne peut pas être copié, photocopié, reproduit, traduit ou converti sous forme électronique ou informatique, en partie ou en totalité, sans l'autorisation écrite préalable de Macromedia, Inc. Nonobstant ce qui précède, le propriétaire ou l'utilisateur autorisé d'une copie valide du logiciel fourni avec le présent manuel peut imprimer une copie dudit manuel à partir d'une version électronique de ce dernier dans le seul et unique but pour ledit propriétaire ou utilisateur autorisé de se familiariser avec ledit logiciel, à condition qu'une partie dudit manuel ne puisse être imprimée, reproduite, distribuée, revendue ou transférée dans tout autre but, y compris, et ce sans limitation, dans un but commercial, tel que la vente de copies de la présente documentation ou la fourniture de service de support payant. Numéro de référence ZFW80M100F. Remerciements Gestion de projet : Charles Nadeau, Debi Robson Rédaction : David Sullivan, Rosanne Conroy, Charles Nadeau Edition : Melba Lancaster, Shawn Jackson, Linda Adler Gestion de la production : Patrice O'Neill Conception et production du support : Adam Barnett, Aaron Begley, Arena Reed, Paul Rangel, John Francis, Mario Reynoso Gestion de projet de localisation : Luciano Arruda Spécialiste de production de localisation : Masayo Noda Remerciements particuliers à Jon Varese, Jennifer Rowe, Jay Armstrong, Alan Musselman, Maureen Keating, Matt Hoffberg, David Spells, Sheila McGinn, Andrew Wilson, Rosana Francescato, Kristin Conradi, Yuriko Ando, Rubric, Inc. et aux équipes de développement et de contrôle de la qualité de Fireworks. Première édition : Août 2005 Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103 Table des matières Chapitre 1: Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Finalités de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Nouveautés de Fireworks 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Installation de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Chapitre 2: Apprentissage de Fireworks . . . . . . . . . . . . . . . . . . . . .11 Par où commencer ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 Avantages de la documentation Fireworks . . . . . . . . . . . . . . . . . . . . . . . .11 Utilisation du système d'aide de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . 13 Chapitre 3: Concepts de base de Fireworks . . . . . . . . . . . . . . . . . 15 Se familiariser avec l'espace de travail Fireworks. . . . . . . . . . . . . . . . . . 15 Exécution de tâches de base dans Fireworks . . . . . . . . . . . . . . . . . . . . 26 Chapitre 4: Didacticiel : Création de maquettes de page. . . . . . . 31 Création d'un dossier de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Examen de votre tâche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Création et sauvegarde d'un nouveau document . . . . . . . . . . . . . . . . . 34 Importation et placement d'images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Création d'une image composite de la zone de contenu . . . . . . . . . . . .37 Placement de texte et d'images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Exportation de l'image pour le Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Chapitre 5: Didacticiel : Traitement des photographies . . . . . . . 53 Examen de votre tâche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Traitement par lots de fichiers d'image de grande taille. . . . . . . . . . . . 54 Composition des images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Aperçu avant exportation et exportation des images . . . . . . . . . . . . . . . 61 Affichage des images optimisées finales . . . . . . . . . . . . . . . . . . . . . . . . 63 3 Chapitre 6: Didacticiel : Création d'une bannière de page . . . . .65 Examen de votre tâche. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Ajout d'un arrière-plan et placement du logo . . . . . . . . . . . . . . . . . . . . . 66 Organisation de vos objets à l'aide de calques . . . . . . . . . . . . . . . . . . . . 70 Création d'un arrière-plan contrasté pour le logo . . . . . . . . . . . . . . . . . . 72 Création d'un contour autour de la bannière . . . . . . . . . . . . . . . . . . . . . . 76 Création d'un effet de bord oblique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Ajout d'une ligne de balise à la bannière. . . . . . . . . . . . . . . . . . . . . . . . . . 80 Exportation d'un fichier d'image optimisé . . . . . . . . . . . . . . . . . . . . . . . . 81 Chapitre 7: Didacticiel : Création d'une page Web . . . . . . . . . . . . 87 Affichage de la page Web finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Ouverture du fichier source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Importation d'une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Découpage du document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Création d'un survol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Création de boutons pour une barre de navigation . . . . . . . . . . . . . . . . 98 Création et modification d'un menu contextuel. . . . . . . . . . . . . . . . . . . 107 Optimisation du document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Exportation de HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 Test du fichier terminé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 4 Table des matières CHAPITRE 1 Présentation Macromedia Fireworks 8 est la solution de référence pour la production et la conception de graphiques Web professionnels. Il s'agit du premier environnement de production permettant d'aborder et de résoudre les défis particuliers posés aux concepteurs et aux développeurs de graphiques Web. Ce chapitre couvre les rubriques suivantes : Finalités de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Nouveautés de Fireworks 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Installation de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 1 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 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. 6 Présentation Tirez parti du processus intégré de Fireworks pour créer et optimiser des images pour Dreamweaver 8 et Flash Professional 8 sans perte d'informations ni de temps à les éditer. Bénéficiez de la compatibilité avec CSS et ActionScript, ainsi qu'avec les autres produits Studio. Processus intégré Menus contextuels CSS (Cascading Style Sheet) Fireworks 8 utilise le format CSS pour créer des menus contextuels interactifs. Cela permet d'obtenir un code clair et aisément personnalisable qui s'intègre bien avec les sites créés dans Dreamweaver. Les attributs vectoriels (remplissages, traits, filtres et modes de fondu) sont préservés lorsque vous déplacez des objets entre Flash et Fireworks. Des découpes polygonales sont insérées automatiquement quand un objet sélectionné est un trajet polygonal. Fireworks reconnaît les valeurs de couleur ActionScript lorsqu'elles sont copiées de Flash et collées dans des champs de valeurs de couleur de Fireworks. Compatibilité vectorielle Davantage d'options de découpe Reconnaissance des valeurs de couleur ActionScript 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 Composants d'interface mobile Nouveau filtre en direct qui estompe l'objet auquel il ...