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 ">
Публичная ссылка обновлена
Публичная ссылка на ваш чат обновлена.