Premiers pas avec Freeway Préface Copyright et remerciements Contacts Ce guide concerne Freeway Pro 4.0. Vous pouvez contacter TRI-EDRE, le distributeur de la version française de Freeway, aux coordonnées ci-dessous : Copyright © 1997-2005 Softpress Systems Ltd. Tous droits réservés. Le logiciel Freeway et sa documentation sont protégés par le droit d'auteur. Aucune partie du logiciel Freeway ne peut être reproduite, transmise, transcrite, stockée dans un système de récupération ou traduite dans n'importe quelle langue, ou dans tout langage informatique, sous toute forme et sous tout moyen sans l'autorisation écrite expresse de Softpress Systems Ltd. Des copies additionnelles de ce guide peuvent être faites et distribuées à la condition qu'elles incluent cette note de copyright. Softpress Systems Ltd se réserve spécifiquement tous les droits sur tous les logiciels Freeway. Le logiciel décrit dans ce guide est fourni sous licence d'agrément et ne peut être installé, utilisé ou copié qu'en accord avec les termes de cet agrément. Softpress est une marque commerciale de Softpress Systems Ltd aux États-Unis et autres pays. Freeway est une marque commerciale de Softpress Systems Ltd, qui peut être déposée dans certains pays. Apple, Macintosh, Power Macintosh et le logo Mac Logo sont des marques déposées de Apple Computer Inc. Tous les autres noms de produits sont des marques ou des marques déposées de leurs propriétaires respectifs. Limitation de garantie Les informations de ce guide sont censées être correctes à la date de publication. Cependant, de par le développement continu de ce produit, les informations de ce guide peuvent être modifiées sans préavis et ne représentent aucun engagement de la part de Softpress Systems Ltd. Ce guide a été conçu et produit par Human-Computer Interface Ltd, http://www.interface.co.uk/. La version française est réalisée par TRI-EDRE. ii TRI-EDRE SARL 22 Place de l'Église BP 111 83510 LORGUES (France) Tél. : (+33) 04 98 10 10 50 Fax : (+33) 04 98 10 10 55 Web : http://www.tri-edre.fr/ Email : [email protected] Contact de Softpress Systems Ltd (United Kingdom) Tél. : (+44) 1993 882588 - Fax : (+44) 1993 883970 Web : http://www.softpress.com/ - Email : [email protected] 1 Comment fonctionne Freeway Applications 2 3 Planifier votre site 5 Utiliser le bon langage Planifier votre site Web 6 7 Visite rapide 11 Le document de site de Freeway Publier un site Travailler avec Freeway La fenêtre Freeway Outils Panneaux Palettes Menus contextuels 12 12 14 15 15 17 18 20 Tutoriel 2 Un site multipages 35 Conception de la barre de navigation Créer les pages du site Créer la page À propos Créer la page Recettes Créer la page Culture du piment Et maintenant ? 36 40 43 44 47 49 Tutoriel 3 Effets dynamiques 51 Introduction Créer un logo pour le site Créer des boutons rollover Ajouter les images esclaves Et maintenant ? 52 52 54 57 59 Contenu Introduction Tutoriel 1 Créer une page d'accueil 21 Démarrer le site Dessiner un logo Ajouter une introduction Ajouter des images dans la page Transférer votre site via FTP Transférer le site sur un compte .Mac Et maintenant ? 22 25 28 30 33 33 34 iii Préface Conventions Pour éviter toute ambiguïté, ce guide adopte les conventions typographiques suivantes : Convention Signification Gras Identifie un nom ou un label apparaissant sur l'écran de l'ordinateur. Exemple : Cliquez sur le bouton OK. Computer Identifie un texte entré sur le clavier de l'ordinateur. CONTROL, ALT, COMMAND, RETOUR, SHIFT Représente les touches spéciales du clavier : Control, Option (ou Alt), Command, Return et Shift (Majuscule). À propos de la documentation Freeway Premiers pas avec Freeway Le guide Premiers pas avec Freeway est l'endroit idéal pour commencer à apprendre comment tirer le meilleur de Freeway. Il inclut un aperçu des fonctions et des apports uniques de Freeway, des informations sur la création et la publication de votre site sur le Web, une visite guidée des principales fonctions de Freeway, et un ensemble de trois tutoriels qui vous montreront comment utiliser Freeway pour créer des sites Web étonnants. Utiliser Freeway Le guide Utiliser Freeway fournit des instructions claires et progressives pour utiliser les principales fonctions de Freeway, y compris comment régler, prévisualiser et publier un site, comment travailler avec des pages, du texte, des images, des tableaux et des formulaires, et comment créer des effets dynamiques. Ce guide est conçu pour vous aider à traduire votre vision dans un site Web complet et pleinement fonctionnel. iv Freeway Référence Le guide Freeway Référence est destiné aux utilisateurs avancés de Freeway, et fournit des informations détaillées sur les fonctions avancées de la conception Web qui ne sont pas nécessaires à tous les utilisateurs. Il fournit aussi des informations sur la migration de sites existants créés avec d'autres programmes, et un résumé des Préférences de Freeway, des palettes et des raccourcis clavier. Aide en ligne Freeway comporte une aide en ligne contextuelle exhaustive que vous pouvez utiliser à tout moment pour trouver des informations sur les fonctions que vous êtes en train d'utiliser. Cette aide comporte les mêmes informations que les guides Utiliser Freeway et Freeway Référence. La base de connaissances Le site Softpress propose une base de connaissances avancée contenant une vaste gamme d'informations sur chaque aspect de l'utilisation de Freeway, y compris des notes techniques sur des fonctions spécifiques, des tutoriels illustrant comment réaliser des effets particuliers, des réponses aux questions les plus fréquentes, et des exemples de sites créés par des concepteurs utilisant Freeway. La base de connaissance contient des fonctions de recherche, et est mise à jour chaque semaine pour répondre à toutes les questions que peuvent se poser les utilisateurs de Freeway. Note : la base de connaissances sur le site de Softpress est en anglais. Introduction Bienvenue dans Freeway, le logiciel de création de sites Web le plus naturel pour réaliser votre projet sur le Web ! Que vous soyez un concepteur de sites Web débutant ou expérimenté, Freeway vous fournit les outils nécessaires pour obtenir des résultats impressionnants avec le minimum d'efforts. Introduction Comment fonctionne Freeway Traditionnellement, la création de sites Web nécessite l'écriture en HTML, le langage utilisé pour décrire le contenu des pages, et le transfert sur l'ordinateur auquel accèdent les visiteurs du site. Même si les logiciels de conception Web offrent le WYSIWYG, vous avez souvent besoin de revenir au HTML et d'en tenir compte pour les éléments de votre page Web. Freeway change radicalement cette approche. Il vous laisse vous concentrer sur la création et le résultat que vous désirez obtenir, et s'occupe de l'encodage en HTML. Freeway vous libère de la nécessité d'apprendre le HTML, un langage complexe initialement développé pour être facile à comprendre par les ordinateurs. Freeway offre aussi nombre d'avantages : La gestion intégrée de site Un site Web terminé se compose de dossiers contenant de nombreux fichiers HTML et images, et d'autres ressources utilisées par le site. Gérer les noms et l'emplacement de ces fichiers peut devenir un cauchemar. Le simple fait de renommer un fichier peut conduire à un site qui ne fonctionne plus correctement car un lien a pu être brisé. De nombreux logiciels offrent des outils de gestion de site pour garder trace des fichiers du site et les mettre à jour lorsque vous effectuez des modifications. Avec Freeway rien de tout cela n'est nécessaire. La conception entière de votre site est contenue dans un seul document, qui inclut toutes les pages, les textes et les graphiques utilisés pour le site. Lorsque vous publiez le site Freeway génère automatiquement le dossier de fichiers HTML et graphiques avec les liens corrects entre eux, ce qui supprime toute possibilité de liens incorrects ou de noms invalides. En d'autres termes, il n'y a plus aucun problème de gestion du site. Optimisation des performances Les sites Web n'ont pas uniquement besoin d'avoir un bel aspect. Ils doivent aussi être réactifs et rapides pour donner aux visiteurs une 2 impression positive lorsqu'ils naviguent dans les informations que vous offrez. Souvent, avec les outils de conception de sites Web, vous avez besoin de préparer vos images avec d'autres outils avant de les importer dans votre projet, afin de les optimiser pour un affichage rapide. Avec Freeway ce n'est plus un problème. Vous pouvez incorporer tout type de graphique dans votre conception, les mettre à l'échelle ou les découper dans Freeway pour obtenir exactement le résultat souhaité. Quand vous publiez le site, Freeway génère automatiquement une version optimisée de chaque image. Les débutants peuvent travailler avec Freeway en toute quiétude car il créera de toute façon un site optimisé, et les utilisateurs plus expérimentés apprécieront le temps gagné. Interface intuitive Freeway accomplit tout ceci à travers une interface intuitive conçue pour s'adapter à la manière de travailler d'un concepteur graphique. Une page dans Freeway représente la page Web que vous êtes en train de concevoir, et vous pouvez tout simplement glisser-déposer textes et images sur cette page et les positionner exactement où vous le désirez. Un ensemble de fonctions vous permet de mettre en page les éléments avec précision, incluant des règles, des guides et des grilles, ainsi que des maquettes pour uniformiser l'aspect graphique d'une série de pages. Les actions ajoutent des effets sans aucun codage De nombreux sites Web incluent maintenant des effets dynamiques, comme les rollovers ou les images changeantes, qui vont bien au-delà du HTML standard. Freeway vous permet d'ajouter ces effets à votre site sans aucun code spécial, en prenant avantage des actions intégrées à Freeway. Chaque action vous permet de spécifier quels composants de la page vous désirez contrôler, et insère le code JavaScript approprié quand vous publiez le site, sans aucun besoin de programmation de votre part. Freeway vous permet de créer un site complet de plusieurs pages en quelques heures. Mais il est aussi capable de créer de vastes sites, comme des sites Web ou des intranets d'entreprises, ou des sites commerciaux avec boutique de vente en ligne. Cette partie indique quelques sites entièrement créés avec Freeway, pour illustrer les domaines d'applications que peut couvrir Freeway, et pour lesquels il a été réellement utilisé. Sites Web de sociétés Le site Web de la société Blue Iceberg, une société de développement de sites Web et de marketing : Introduction Applications Sites Web personnels Le site Web personnel de David Dunnico, un photographe basé à Manchester, UK : 3 Introduction Sites Web commerciaux Magazines Web en ligne Le site Web de Fiesta Crafts, fabriquant de jouets et de cadeaux : Colorado Woman News, un magazine Web en ligne : Vous trouverez d'autres exemples dans la Galerie du site Web de Softpress, à l'adresse : http://www.softpress.com/en/freeway/gallery 4 Si vous avez déjà créé des sites Web avec d'autres outils de conception, vous pouvez passer au chapitre suivant, Tour rapide, pour un aperçu des fonctions uniques de Freeway. Planifier votre site ��� Ce chapitre est destiné à ceux qui n'ont jamais créé de site Web auparavant, et expose les problèmes de planification, de création et d'hébergement d'un site. ��� Planifier votre site Bienvenue dans le World Wide Web Si vous avez surfé sur le Web mais que vous n'avez à ce jour jamais créé de site Web, vous pouvez penser que les sites Web sont un peu comme les stations de radio, et que l'utilisation d'un navigateur Web pour visiter un site est comme régler une radio sur une station particulière. Cette analogie est assez bonne, sauf sur une différence majeure : le Web est totalement démocratique. Vous n'avez pas besoin d'une licence ou d'un transmetteur coûteux pour rendre public votre site et l'ouvrir au monde. En pratique, la seule chose nécessaire est un ordinateur connecté à l'Internet et un nom de domaine enregistré (ce qui ne coûte que quelques Euros) afin que les gens sachent où vous trouver : hébergé par une société spécialisée, appelée fournisseur d'accès (Internet Service Provider ou ISP). Si vous avez déjà un compte e-mail, il intègre probablement un espace Web gratuit, et votre fournisseur d'accès vous donnera les instructions pour transférer vos pages Web sur l'espace mis à votre disposition, et vous indiquera l'adresse à utiliser pour que vos visiteurs puissent se connecter sur vos pages. Utiliser le bon langage Au cœur du Web est un langage appelé le HTML (HyperText Markup Language). Le HTML remplit deux fonctions de base : la description des pages, et les liens vers d'autres pages. �� � �� Par exemple, voici ce que l'utilisateur verra : �� � � �� �� �� ��� � ��� �� ��� � � �� � �� ��� Comment je me rattache ? Pour publier votre site sur le Web et le rendre accessible aux autres, vous avez seulement besoin de lancer un logiciel Serveur de Web sur votre ordinateur et de donner à votre ordinateur un nom enregistré sur un centre agréé de façon à ce que les autres utilisateurs vous trouvent sur le Web. Sauf si vous avez une connexion permanente à Internet et que vous ne voyiez pas d'inconvénient à laisser votre ordinateur connecté en permanence, vous trouverez sûrement plus pratique d'avoir votre site Web 6 Et voici le HTML qui donne le résultat précédent : Qu'est-ce que le HTTP et le FTP ? Ce sont deux autres acronymes que vous pourrez rencontrer, et il peut être intéressant d'en connaître la signification. HTTP (HyperText Transfer Protocol) est un ensemble de conventions pour transférer des pages Web entre un serveur de Web et un navigateur Web. Vous l'utilisez en permanence quand vous surfez sur le Web, et votre navigateur ajoute http:// devant l'adresse que vous avez tapée. FTP (File Transfer Protocol) est une convention pour le transfert de fichiers sur Internet entre deux ordinateurs. FTP est le moyen standard pour transférer des fichiers sur le serveur Web, et c'est la méthode utilisée par Freeway pour mettre à jour votre site Web chez votre hébergeur. Planifier votre site ��� Planifier votre site Web La description de page dans le HTML consiste en une série d'instructions qui disent quelque chose comme "Mettre cette image en haut de la page", "Mettre ce texte sous l'image", etc. Quand le navigateur reçoit le HTML, il reconstruit la page que le concepteur a créée. La deuxième partie du HTML, les “liens hypertexte”, est ce qui transforme le World Wide Web en un réseau plutôt que juste en un ensemble de pages de présentation. Chaque page peut mener à d'autres pages sur le même site Web, ou n'importe où ailleurs sur le Web. De même que vous n'avez pas besoin de connaître le code du processeur servant à faire tourner votre ordinateur, vous n'avez aucune nécessité de connaître le HTML pour concevoir des pages Web. Avant de vous lancer dans la conception d'un site Web, il est bon de décider du résultat que vous désirez obtenir, car cela va influer sur votre approche. Un site Web est un média comme les autres. Il doit avoir une cible clairement définie et doit communiquer efficacement vers cette cible. Si votre site Web est conçu pour fournir essentiellement de l'information, comme un site éducatif, il doit transporter cette information clairement et simplement. Une bonne conception va rendre l'information plus facile à lire, alors qu'une mauvaise va miner l'apport de votre site. Si votre site Web est un site de promotion qui doit attirer de l'activité vers votre société, vérifiez qu'il y a un marché clairement ciblé et qu'il communique efficacement vers ce marché. Votre site doit informer les clients potentiels sur ce que vous pouvez faire pour eux, et leur dire comment procéder : vous contacter par e-mail ou par téléphone, ou vous commander un produit. 7 ��� Planifier votre site Organiser la structure Quel que soit le type de site que vous concevez, soyez certain qu'il sera facile de naviguer à travers les pages et offrez à vos visiteurs une structure de site qui soit intuitive. Évitez la tentation d'arranger votre site comme un disque dur, avec une structure hiérarchique de dossiers et de sous-dossiers. Ce type de structure arborescente est souvent confus pour les utilisateurs et les oblige à revenir en arrière pour aller visiter d'autres zones de votre site. Il est en général plus facile de naviguer dans une structure à plat limitée à deux ou trois niveaux de hiérarchie. Si vous avez absolument besoin d'une structure arborescente, ajoutez des informations sur la position de l'utilisateur, ainsi que des liens directs pour remonter dans la structure et pour aller directement vers les autres zones importantes de votre site. Planifier les changements Un utilisateur pourra visiter votre site plusieurs fois avant de décider de vous contacter ou de faire un achat. Il est donc judicieux que votre site apporte un plus à chaque visite et que les informations soient régulièrement mises à jour. Si les visiteurs voient de nouvelles informations apparaître sur le site, ils seront encouragés à revenir. Si le site ne bouge pas pendant des mois, les visiteurs se demanderont si vous êtes toujours en activité. Si vous n'avez pas le temps de refaire entièrement votre site régulièrement, mettez à jour au moins une partie du site, telle que la page d'accueil. Concevoir la mise en page Tout comme pour des documents imprimés, vous voudrez probablement passer quelque temps à mettre des idées sur une feuille avant de vous mettre sur votre ordinateur. Même les concepteurs expérimentés trouvent 8 que commencer sur une page blanche devant l'ordinateur n'est pas le meilleur endroit pour trouver de l'inspiration ! Si vous réalisez un travail pour des clients, le site peut avoir besoin de s'intégrer à une identité existante, ou on pourra attendre de vous une identité nouvelle. Dans tous les cas, vous aurez certainement besoin de l'approbation de votre client avant d'aller trop loin dans la création du site. Freeway permet de mettre rapidement quelques idées ensemble et de produire deux ou trois maquettes de sites à montrer aux clients. Préparer le contenu Une fois l'étape de conception terminée, vous pouvez commencer à créer et à assembler le contenu du site. Cela inclut le texte de base pour les pages et les éléments graphiques et multimédias qui peuvent être facilement créés dans Freeway, comme les images et les GIF animés. Il est recommandé que vous rassembliez les ressources avant de les importer dans Freeway. Quand le projet sera terminé, les fichiers originaux pourront ainsi être facilement archivés en même temps que le site. Quand vous créez des images bitmap pour le Web, il est préférable de travailler en 72 dpi. Vous n'avez pas besoin d'enregistrer vos images en GIF ou en JPEG. Freeway peut importer des images TIFF, PDF ou au format natif Photoshop. Cependant, dans de nombreux cas vous pourrez créer vos images directement dans Freeway. Si vous créez des illustrations, vous pouvez importer directement des fichiers Illustrator dans Freeway, puis mettre à l'échelle et transformer les illustrations vectorielles dans Freeway sans perte de qualité. Définir les maquettes des pages Si vous créez un site de plus de quelques pages, vous gagnerez du temps en créant une grille de mise en page avec une ou plusieurs maquettes. Ces maquettes peuvent ensuite former les bases des pages que vous créez pour le site. Les maquettes peuvent être utilisées pour assurer une conception cohérente, pour des bandeaux de la marque comme pour la navigation dans votre site. Lors de l'utilisation de liens sur des images pour la navigation, dupliquez ces liens dans du texte HTML quelque part sur la page pour que vos visiteurs qui désactivent l'affichage des images ou qui utilisent de vieux navigateurs puissent quand même naviguer et se déplacer sur votre site. Prévisualiser le site Planifier votre site ��� Faites attention à prévisualiser le site avec différents navigateurs, ainsi que sur des ordinateurs Macintosh et PC. Tous n'affichent pas de la même façon, et une mise en page peut donner un bon résultat sur un navigateur mais pas nécessairement sur d'autres. 9 ��� Planifier votre site 10 Visite rapide Ce chapitre est conçu pour vous donner un aperçu de la manière dont Freeway travaille, avec une visite guidée du programme afin de vous présenter ses fonctions clés. Visite rapide Le document de site de Freeway Publier un site Quand vous travaillez sur un site dans Freeway, un dossier de travail typique contient les quatre éléments suivants : La création d'un site dans Freeway implique de concevoir les pages dans le document du site, en utilisant un ensemble d'outils pour placer le texte et les images, et ajouter les liens entre les pages. Vous pouvez prévisualiser vos pages pendant que vous travaillez, avec le navigateur Web inclus dans Freeway : Site de Pierre est le document Freeway contenant toutes les informations sur votre site. Que votre site soit une simple page Web ou constitué de centaines de pages, toutes les informations sur le site sont stockées dans un seul document Freeway. Un fichier .fwbackup, qui est une sauvegarde de votre document Freeway pour le cas où le document principal serait endommagé, comme par exemple cela peut arriver après un plantage de l'ordinateur. Le dossier du site Dossier du Site contient tous les fichiers HTML et les images associées créés quand vous publiez le site. Le dossier Medias est l'emplacement recommandé de tous les fichiers images, films, sons et autres ressources que vous désirez inclure dans votre site. 12 Vous pouvez aussi prévisualiser le site dans tout navigateur Web installé sur votre ordinateur pour comparer comment vos pages seront vues par les autres utilisateurs. Quand votre site est terminé, vous pouvez le publier pour créer un ensemble complet de fichiers HTML, d'images et autres fichiers nécessaires à votre site. Quand vous publiez votre site, Freeway génère automatiquement tout le HTML correct pour obtenir l'apparence que vous avez conçue, et optimise toutes les images incluses dans votre site avec le meilleur compromis qualité/temps de chargement. Images Une utilisation judicieuse des images aide à l'impact visuel de vos pages Web. Cependant, les images alourdissent la taille des pages et donc le temps de chargement par le navigateur Web. Lorsque vous incorporez des images dans une page Web, il est important d'optimiser leur taille pour minimiser le temps nécessaire à leur affichage par le navigateur. Freeway rend très facile la création de texte en images, appelées texte GIF. Le texte reste éditable dans votre document Freeway, et vous pouvez lui appliquer les styles et effets visuels désirés, comme des ombres. Le texte sera automatiquement converti en une image de qualité lorsque vous publierez le site. Liens Visite rapide Freeway vous libère et prend en charge l'intégration des images dans votre site Web. Il vous permet de travailler librement avec des images de n'importe quel format et résolution, les met à l'échelle et les recoupe pour obtenir l'effet que vous désirez. Quand vous publiez le site, Freeway génère automatiquement les images optimisées, en tenant compte des mises à l'échelle, des coupes et des autres transformations pour arriver au résultat correct que verront vos visiteurs. Texte HTML La manière la plus efficace de représenter du texte sur une page Web est le texte HTML, qui est affiché avec les polices installées sur l'ordinateur de votre visiteur. Quand vous concevez une page avec du texte HTML, Freeway offre automatiquement le jeu de polices universellement installées sur la plupart des ordinateurs, comme le Times, Helvetica, Verdana, etc. Cela assure que la page sera affichée correctement pour tous les utilisateurs, sans tenir compte des autres polices installées. Vous pouvez créer un lien sur une image ou une portion de texte, tout simplement en le sélectionnant et en utilisant la commande Lien vers.... Freeway gère automatiquement les liens à l'intérieur de votre site, en leur assignant les noms appropriés lorsque vous publiez le site. Vous n'avez pas à vous préoccuper de maintenir les liens à jour, ni à vous soucier de liens rompus dans votre site final. Autres ressources En plus du texte et des images gérés par Freeway dans votre document, vous pouvez aussi incorporer des ressources externes, comme des films, des sons, des documents PDF et des liens vers d'autres sites. Texte GIF Dans certains cas, vous voudrez inclure du texte dans une police spéciale non standard sur votre page Web. Par exemple, vous pouvez vouloir inclure un logo avec sa police, ou inclure des en-têtes dans une police que vous avez choisie pour aller avec l'aspect général de la page. Pour obtenir ce résultat, vous pouvez transformer ces portions de texte en images qui seront ainsi affichées exactement telles que vous le désirez, et ceci quelles que soient les polices installées sur l'ordinateur de vos visiteurs. 13 Visite rapide Travailler avec Freeway Cette section vous offre une visite guidée de la fenêtre principale de Freeway et explique ce que fait chacune des fonctions, y compris les outils de la barre d'outils, la palette Inspecteur et les autres palettes. Chacune des fonctions est décrite en détail dans les paragraphes suivants. La figure ci-dessous montre les éléments clés de l'interface de Freeway : ������������� ������������������ ���������� �������������� ������� ���������� ��������������� ��������������� ��������� ��������������� 14 ������������������ ���� Outil Description Ce qu'il fait Mise en page CSS La Boite Hyperliens vous permet de créer un lien au texte ou à l'image sélectionné en glissant l'icône d'une page depuis le Panneau du site dans cette boîte. Lorsqu'un bloc est sélectionné, cliquez dans la Boite Hyperliens pour afficher le dialogue d'édition Editeur du lien. Spécifie si les nouveaux blocs ajoutés dans la page utilisent la mise en page CSS ou des tableaux invisibles (compatible avec les anciens navigateurs). HTML Dessine un bloc HTML sur votre page, pour entrer du texte HTML dans votre site. Les boutons Mode changent les informations affichées dans la zone de page. Tableau Outils Dessine un tableau sur votre page, avec un nombre de lignes et de colonnes spécifiés. Action Ajoute une action Freeway à la page. Image Dessine un bloc graphique rectangulaire, pour ajouter une image ou du texte GIF. Ovale Dessine un bloc graphique avec un contour ovale. Zone cliquable rectangulaire Dessine une zone rectangulaire cliquable sur les images. Le Menu zoom indique l'échelle d'affichage de la page en cours et permet de la modifier. Les outils sont là pour créer et manipuler les différents types de bloc avec lesquels vous travaillez dans Freeway. Le tableau ci-dessous indique les fonctions de chaque outil : Outils standards Outil Description Ce qu'il fait Précédent/ Suivant Affiche les pages récemment visitées. Outil de sélection Sélectionne ou manipule les blocs ou édite le texte. Rotation Rotation des blocs graphiques. Outil zoom Augmente ou réduit le zoom d'affichage de la fenêtre Freeway. Chaînage Lie des blocs HTML ou image pour que le texte soit chaîné entre ces blocs. Visite rapide La fenêtre Freeway 15 Visite rapide Outil Description Ce qu'il fait Inspecteur Affiche ou masque la palette Inspecteur. Description Ce qu'il fait Bouton Ajoute un bouton dans un formulaire. Case à cocher Ajoute une case à cocher dans un formulaire. Radio Ajoute un bouton radio dans un Outils optionnels Ils sont disponibles dans les sous-menus des outils standards, et vous pouvez les ajouter dans la barre d'outils avec l'option Personnaliser la barre d'outils… du menu Affichage. Outil Description Ce qu'il fait Séparateur Ajoute une ligne de séparation dans la barre d'outils. Espace Espace flexible Personnaliser 16 Outil Ajoute un espace dans la barre d'outils. Ajoute un espace qui aligne à droite les icônes suivantes de la barre d'outils. Affiche le dialogue Personnaliser la barre d'outils. Supprimer chaînage Délie les blocs HTML ou image qui ont été liés avec l'outil Chaînage. Polygone Dessine un bloc graphique avec un contour arbitraire de lignes et de courbes. formulaire. Champ d'édition Ajoute un champ d'édition de texte dans un formulaire. Menu/Liste Ajoute un menu déroulant ou une liste dans un formulaire. Zone de texte Ajoute une zone de texte dans un formulaire. Zone cliquable ovale Crée une zone ovale cliquable sur une image. Zone cliquable polygonale Crée une zone cliquable de contour arbitraire sur une image. Inclinaison Incline les blocs graphiques. Miroir Effet miroir sur les blocs graphiques. Description Ce qu'il fait Panneau Site Styles et Couleurs Affiche ou masque la palette Styles et Couleurs. Le Panneau Site affiche les maquettes et les pages disponibles de votre site, ainsi que la structure des fichiers HTML du dossier de votre site : Panneaux Visite rapide Outil Carte des liens La Carte des liens offre un moyen facile pour voir la structure de votre site, et vous permet de cliquer sur vos pages pour afficher les liens qui vont de et vers cette page : Vous pouvez utiliser les boutons sous le Panneau Site pour restructurer votre site, ajouter ou supprimer des pages ou des maquettes, ajouter des dossiers ou renommer les pages. 17 Visite rapide Panneau Page Si vous cliquez sur le titre du panneau Site vous passez du panneau Site au panneau Page. Le panneau Page affiche la structure des fichiers graphiques et autres ressources de la page courante. Si vous sélectionnez un bloc de la liste, il est sélectionné dans la page et vous pouvez l'éditer. Palettes Palette Inspecteur La palette Inspecteur fournit des informations sur l'objet sélectionné et permet de modifier ses réglages. Par exemple, si vous avez sélectionné un bloc graphique, vous pouvez modifier ses dimensions, ajouter des effets et spécifier le format de sortie dans la palette Inspecteur. Si vous avez sélectionné du texte, vous pouvez modifier les réglages de style et de paragraphe, la couleur et les effets avec la palette Inspecteur. La palette Inspecteur offre en général plusieurs groupes de réglages, que vous sélectionnez en cliquant sur l'icône appropriée en haut de la palette. Le tableau suivant résume les principaux groupes de réglages pour différents types d'objets : Icône 18 Nom Description Réglages généraux Le nom du bloc, ses dimensions et sa position dans la page. Réglages d'apparence Réglages affectant l'apparence du bloc, dont la couleur et les effets. Réglages de style et de paragraphe Le réglage des caractères et des paragraphes du texte. Réglages des cellules de tableau La taille et l'alignement d'une cellule d'un tableau. Nom Description Palette Styles et Couleurs Réglages de sortie Réglages relatifs au HTML généré pour le bloc quand le site est publié. La palette Styles et Couleurs s'applique au style du texte, à l'apparence des textes HTML et des textes graphiques et au choix des couleurs à utiliser dans vos pages : Dans certains groupes de la palette Inspecteur, les réglages sont séparés en sections que vous pouvez afficher ou masquer en cliquant sur le triangle à gauche des titres. Visite rapide Icône Par exemple, les réglages de l'apparence d'un bloc graphique dans la palette Inspecteur sont divisés en sections Effet de forme, Ombre, Contour, Fond, Premier plan et Bordure : 19 Visite rapide Palette Actions Des actions peuvent être ajoutées aux pages ou aux blocs pour créer des effets dynamiques comme les boutons rollover. La palette Actions affiche et édite les réglages associés à chaque action : Dans la plupart des cas, cliquer sur une page ou un objet tout en enfonçant la touche CONTROL fait afficher un menu déroulant contextuel avec les commandes appropriées à cette page ou cet objet. Par exemple, un clic + Control sur un bloc graphique offre les commandes pour éditer, transformer, lier, arranger ou dupliquer l'image : Palette Cadres La palette Cadres permet de créer et d'éditer les pages constituées de cadres, avec des zones de défilement séparées dans une unique page : 20 Menus contextuels Dans ce tutoriel, vous allez créer un site contenant une seule page, la page d'accueil de l'artiste Zoe Marx, qui sera une vitrine de son travail. Tutoriel 1 Créer une page d'accueil Ceci est le premier de trois tutoriels conçus pour vous présenter les fonctions clés de Freeway et montrer combien il est facile de créer un site Web en quelques étapes simples. Tutoriel 1 Créer une page d'accueil Démarrer le site • Entrez Site de Zoe et cliquez sur Enregistrer pour continuer : Lancer Freeway • Double-cliquez sur l'icône de Freeway : Elle est normalement dans votre dossier Applications. Le dialogue Nouveau document s'affiche : Une fenêtre avec un document blanc est ouverte pour vous dans Freeway, avec comme titre Site de Zoe et un dossier Site de Zoe est créé pour le site dans le dossier Documents : Ce dossier contient les éléments suivants : Site de Zoe, le document Freeway contenant toutes les pages du site, y compris les textes et les images. Freeway est fourni avec un ensemble de modèles que vous pouvez prévisualiser dans la fenêtre Nouveau document et sélectionner comme point de départ de votre site. • Sélectionnez Blank dans la section Générales pour commencer avec un document vide, et cliquez sur le bouton OK pour continuer. Il vous est demandé un nom pour votre nouveau site. 22 Site Folder, utilisé par Freeway pour enregistrer les fichiers HTML et les images quand vous publiez votre site. En principe, vous ne devez pas modifier le contenu de ce dossier. Media, qui est l'emplacement recommandé pour mettre les images et autres ressources originales que vous utilisez dans votre site. Le diagramme ci-dessous indique les fonctions clés de la fenêtre de Freeway : Barre de menu Affiche la palette Inspecteur. Outils de conception. Maquettes Affichage/édition des informations sur le bloc sélectionné. Affiche la structure des fichiers de votre site. Affichage/édition des styles pour le texte et des couleurs utilisées dans le site. Tutoriel 1 Créer une page d'accueil Quand vous créez un nouveau site, la fenêtre de Freeway affiche une page blanche sans titre. Voici où vous concevez vos pages Web. Édition des maquettes, affichage des liens du site, édition de la page courante et prévisualisation de la page. 23 Tutoriel 1 Créer une page d'accueil Donnez un titre à la page d'accueil • Cliquez sur l'icône pinceau en haut de la palette Inspecteur pour Quand aucun bloc n'est sélectionné dans la page, la palette Inspecteur affiche les réglages généraux de la page. • Choisissez Sélectionner dans le menu déroulant Image et sélectionnez •Changez le Titre de Untitled à Zoe Marx – Designer : afficher les réglages de couleur et d'image de la page. paper.jpg dans le dossier Media : Ce sera le titre de la fenêtre quand la page sera affichée dans un navigateur, et le nom apparaissant dans les moteurs de recherche comme Google. • Changez le nom du Fichier en index.html sauf si votre ISP vous dit d'utiliser un autre nom pour la page d'accueil. Ce sera la page affichée si quelqu'un se connecte sur votre site. Ajoutez une image de fond Les pages peuvent inclure une image de fond, utilisée pour obtenir une texture ou un fond en arrière-plan de tout ce qui sera affiché sur la page. Pour le fond de la page d'accueil de notre site, nous allons utiliser un scan de papier texturé pour représenter le papier que les illustrateurs utilisent souvent pour leurs illustrations à main levée. • Copiez le fichier depuis le dossier Tutorial 1 (dans le dossier de l'application Freeway) dans le dossier Media de votre dossier Site de Zoe. 24 • Cliquez sur Ouvrir pour charger cette image. La première étape est de créer un bloc graphique pour le logo. • Cliquez sur l'outil Image dans la barre d'outils : • Cliquez-glissez pour dessiner un rectangle en haut de la page. Quand vous relâchez le bouton de la souris, l'outil de sélection Choix est automatiquement sélectionné : L'image est automatiquement répétée ou tronquée pour remplir la page du navigateur de l'utilisateur. Dessiner un logo Tutoriel 1 Créer une page d'accueil Cette image sera affichée comme arrière-plan de la page : L'étape suivante est la création d'un titre pour le site, en utilisant les fonctions de texte et d'image intégrées dans Freeway. Créer un texte graphique Pour le logo principal, nous désirons utiliser une police spéciale disponible sur notre ordinateur. Comme ce logo est destiné à créer une identité visuelle pour le site, il est important qu'il soit affiché avec la police correcte, que les visiteurs aient ou n'aient pas cette police sur leur ordinateur. • Double-cliquez n'importe où dans le bloc graphique que vous venez de créer et tapez le texte : Zoe Marx Designer Nous allons donc rendre le logo sous forme d'image, de façon à ce qu'il s'affiche correctement dans tous les cas. Un avantage supplémentaire d'afficher le logo en tant qu'image est que nous pouvons utiliser des effets et des transformations qui ne sont pas disponibles dans du texte HTML. 25 Tutoriel 1 Créer une page d'accueil • Sélectionnez le texte que vous venez juste de taper : • Sélectionnez le bloc et déplacez un des coins pour que le texte tienne dans le bloc. Notez que, comme la police que nous avons choisie a des queues de caractères longues, les caractères peuvent dépasser du bloc graphique : Vous pouvez éditer la police, le style, la taille et les autres caractéristiques du texte dans la palette Inspecteur. • Cliquez sur l'icône Texte en haut de la palette Inspecteur pour afficher les réglages des caractères et paragraphes. Choisissez la police Zapfino, une Taille de 38px et un Interligne de • 50%: 26 Si le texte ne rentre pas dans le bloc, une icône de débordement est affichée dans le coin inférieur droit du bloc. Freeway va automatiquement prendre en compte ce dépassement lorsque nous publierons le site, et créera une image suffisamment grande pour contenir le texte complet. Faire pivoter le texte • Sélectionnez le texte. • Cliquez sur l'icône Pinceau en haut de la palette Inspecteur pour • Sélectionnez l'outil Rotation : afficher les réglages d'apparence du texte. • Choisissez Autre… dans le menu déroulant Couleur pour le texte : • Cliquez sur le bloc graphique pour le sélectionner. • Glissez le bloc graphique par un des coins pour le faire pivoter : La boite de dialogue Couleur vous permet de modifier la couleur du texte. • Sélectionnez la dernière couleur de la quatrième rangée, une couleur marron, et cliquez sur OK pour l'appliquer au texte : Tutoriel 1 Créer une page d'accueil Changer la couleur du texte Appliquer une ombre L'étape suivante consiste à appliquer une ombre légère au texte avec les effets intégrés de Freeway. Ceci illustre comment vous pouvez obtenir des effets graphiques sophistiqués sans avoir besoin d'un autre programme. • Sélectionnez le texte. • Cliquez sur l'icône Pinceau de la palette Inspecteur pour afficher les réglages d'apparence. • Cliquez sur le triangle à gauche de l'effet Ombre pour afficher les réglages. 27 Tutoriel 1 Créer une page d'accueil • Cliquez sur la case à cocher Ombre pour activer cet effet et réglez le Décalage à 8%: • Cliquez sur l'outil HTML de la barre d'outils : • Dessinez un rectangle à droite du logo pour le texte d'introduction. Quand vous relâchez le bouton de la souris, l'outil Choix est sélectionné : Vous pouvez laisser les autres réglages à leur valeur par défaut. Une légère ombre est ajoutée au texte. Ajouter une introduction L'étape suivante consiste à ajouter un paragraphe de texte expliquant l'objet du site et introduisant les autres composantes de la page. Pour ce texte, nous allons utiliser un bloc HTML, avec un texte affiché dans une des polices Web installées dans la plupart des navigateurs. Créer le texte HTML Un texte HTML est préférable pour le corps de texte d'une page Web car il se charge plus rapidement qu'une image et qu'il est indexé par les moteurs de recherche. Les utilisateurs trouveront donc votre site s'ils font une recherche avec des mots se trouvant dans votre texte. • Cliquez dans le bloc HTML et tapez le texte suivant : Zoe Marx est une jeune graphiste innovante, spécialisée dans les illustrations à main levée et les calligraphies. Ce site montre des exemples de quelques-uns de ses travaux récents pour différents clients. • Sélectionnez tout le texte avec la souris, ou avec la fonction Tout sélectionner du menu Édition. 28 Prévisualiser le résultat • Dans la section Caractère sélectionnez la police Georgia et une Taille Pour voir l'aspect qu'aura la page dans un navigateur Web, vous pouvez prévisualiser la page courante à tout moment. • Dans la section Paragraphe cliquez sur le bouton d'alignement centré : • Cliquez sur le bouton Prévisualiser en bas à droite de la fenêtre de les réglages du texte. de 14px. Freeway pour afficher une prévisualisation de la page courante. La page sera affichée telle que les utilisateurs la verront avec un navigateur Web standard, comme Safari. Le texte sera formaté avec les réglages que vous avez choisis : Tutoriel 1 Créer une page d'accueil • Cliquez sur l'icône Texte en haut de la palette Inspecteur pour afficher • Cliquez sur le bouton Page en bas à droite de la fenêtre de Freeway pour revenir à l'édition de la Page. 29 Tutoriel 1 Créer une page d'accueil Ajouter des images dans la page L'étape suivante consiste à importer dans la page trois images montrant des exemples du travail de Zoe. Freeway vous permet de rogner, de redimensionner et de transformer les images sans se soucier de leur taille ou de leur qualité. Quand vous publierez le site, elles seront optimisées pour le meilleur compromis qualité/rapidité d'affichage sur le Web. • Glissez l'image par une de ses poignées tout en enfonçant les touches SHIFT et ALT pour redimensionner l'image tout en conservant les proportions correctes : Importer des images • Glissez un par un chacun des fichiers pic1.gif, pic2.gif et pic3.gif depuis le dossier Media et déposez-les sur la page Web dans Freeway. Un bloc graphique sera automatiquement créé pour chaque image. Ensuite, redimensionnez chaque image pour les arranger dans la page comme indiqué ci-dessous : • Sélectionnez une image en cliquant sur elle avec l'outil Choix activé. • Utilisez les commandes Au premier plan, À l'arrière-plan, En avant ou En arrière du menu Bloc pour modifier la manière dont les images se chevauchent. 30 • Sélectionnez l'adresse email dans le bloc HTML : Maintenant, nous allons ajouter une information de contact en bas de la page pour que vos visiteurs sachent comment vous contacter : • Dessinez un bloc HTML de la pleine largeur de la page et entrez le texte suivant : Contactez Zoe Marx pour de plus amples renseignements : [email protected] • Utilisez la palette Inspecteur pour mettre ce texte en Georgia, 14px et centré. Finalement, nous allons ajouter un lien sur cette adresse email afin que les visiteurs n'aient qu'à cliquer dessus pour ouvrir un email déjà rempli avec la bonne adresse. Tutoriel 1 Créer une page d'accueil Ajouter une information de contact • Sélectionnez Lien vers… dans le menu Édition pour afficher la boite de dialogue Edition du lien. • Cliquez sur Externe pour définir un hyperlien externe (destiné à autre chose qu'un lien vers une des pages à l'intérieur du site). • Choisissez mailto: dans le menu déroulant Protocole. 31 Tutoriel 1 Créer une page d'accueil 32 • Dans le champ d'édition, tapez [email protected] à la suite de mailto: : • Cliquez sur OK pour valider le lien. • Finalement, prévisualisez le site pour voir le résultat : Quand votre site est terminé, l'étape suivante consiste à le transférer sur l'espace Web mis à votre disposition par votre ISP, pour qu'il soit accessible aux autres utilisateurs d'Internet. Transférer le site • Dans le menu Fichier sélectionnez Transférer… Cet exemple suppose que vous transférez en FTP, la méthode habituelle. • Choisissez FTP dans le menu déroulant Transfert. • Entrez les informations qui vous ont été fournies par votre hébergeur : Champ Description Serveur L'adresse du serveur FTP de votre ISP. En voici un exemple : ftp.internetcompany.com. Répertoire Le répertoire qui vous est donné par votre ISP. C'est souvent votre nom d'utilisateur. Utilisateur Le nom d'utilisateur de votre compte. Mot de passe Le mot de passe de votre compte. Les fichiers seront transférés dans l'espace FTP et Freeway confirmera si le transfert a été correctement effectué. Se connecter sur le site En supposant que vous connaissiez l'adresse URL correcte de votre espace Web, qui a dû vous être donnée par votre ISP, vous pouvez maintenant vous connecter sur votre site et le vérifier depuis votre navigateur. Notez que si vous effectuez des modifications sur votre site et que vous le transférez à nouveau, Freeway va déterminer les fichiers qui ont été modifiés et va transférer uniquement ces fichiers pour mettre à jour le site sur le serveur. Transférer le site sur un compte .Mac Si vous n'avez pas de compte chez un ISP, vous pouvez envisager d'ouvrir un compte .Mac. C'est facile à faire, et il y a une période d'essai gratuite de 60 jours. Initialiser un compte .Mac Tutoriel 1 Créer une page d'accueil Transférer votre site via FTP • Ouvrez la boite de dialogue Préférences Système de votre ordinateur et cliquez sur l'icône .Mac : • Dans la boîte de dialogue .Mac cliquez sur le bouton En savoir plus. • Complétez les informations .Mac dans le formulaire et cliquez sur le bouton Continuer pour enregistrer votre compte. Transférer le site Une fois votre compte .Mac enregistré, procédez comme suit : 33 Tutoriel 1 Créer une page d'accueil • Dans le menu Fichier sélectionnez Transférer… • Dans la boîte de dialogue Transfert sélectionnez .Mac dans le menu déroulant Transfert. • Entrez votre Identifiant (votre nom de membre) et le Mot de passe : Et maintenant ? Félicitations ! Vous avez créé votre premier site Web avec Freeway. Ce tutoriel vous a montré comment régler un nouveau site, comment incorporer des images et du texte, comment éditer la mise en page du site, et comment le publier sur votre serveur Web. • Cliquez sur OK pour transférer vos fichiers. Le site sera transféré sur votre espace idisc .Mac : Se connecter sur le site Vous pouvez alors vous connecter sur votre site Web par l'adresse : homepage.mac.com/votrenom/ où votrenom est le nom que vous avez choisi lors de la création de votre compte. 34 Notez que vous auriez aussi pu copier votre site sur l'espace .Mac en glissant-déposant le contenu de votre dossier Site Folder (qui contient les fichiers HTML et images générés par Freeway) dans le dossier Sites de votre idisk. Cependant, il est plus pratique d'utiliser la fonction de Transfert de Freeway, qui conserve vos réglages et ne copie que les fichiers nécessaires, ceux qui ont été modifiés. Le tutoriel suivant montrera comment créer un site plus complexe avec plusieurs pages et des liens pour que les utilisateurs puissent naviguer entre les pages. Il montrera aussi l'utilisation des maquettes dans Freeway pour créer des sites ayant un style uniformisé et cohérent sur plusieurs pages apparentées. Pour ce tutoriel, nous allons créer un site donnant des informations sur les piments. Il comporte une page d'accueil, une page de recettes et une page d'information sur les différentes variétés de piments. Tutoriel 2 Un site multipages Ce second tutoriel décrit comment créer un site plus important contenant plusieurs pages et utilisant des onglets pour la navigation entre les pages. Vous apprendrez aussi à utiliser les maquettes pour uniformiser le style du site et faciliter les liens entre les pages. Tutoriel 2 Un site multipages Conception de la barre de navigation Pour faciliter la navigation entre les pages, notre site Piments va avoir une série d'étiquettes en haut de chaque page, dessinées pour ressembler à des onglets. La page courante est indiquée par un onglet en avant-plan et vous pourrez cliquer sur chacun des onglets pour aller à la page associée. Créer une maquette Freeway vous permet de créer une ou plusieurs maquettes, chaque maquette contenant des éléments que vous voulez inclure sur les pages associées du site. Vous pourrez ensuite utiliser une maquette comme point de départ pour les pages du site que vous créez. Définir une grille Tout d'abord, nous allons définir une grille qui nous aidera à positionner précisément chaque élément sur la page. • Ouvrez le menu Page et choisissez Grille… Le dialogue Grille est affiché. • Choisissez Document dans le menu déroulant Sur pour appliquer la grille à toutes les pages du site. • Cochez Vertical et Horizontal pour définir une grille horizontale et verticale et entrez 32px dans les champs Largeur et Hauteur pour indiquer l'espacement de la grille. • Entrez 20px dans le champ Gauche pour décaler la grille à 20 pixels du bord gauche : • Dans le dialogue Nouveau document sélectionnez le modèle Blank et cliquez sur le bouton OK. • Dans le dialogue Enregistrer entrez le nom Site Piments et cliquez sur le bouton Enregistrer. • Copiez les fichiers du dossier Tutorial 2 se trouvant dans le dossier de l'application Freeway, dans le dossier Media du dossier Site Piments. • Cliquez sur le bouton Maquette en bas à droite dans la fenêtre Freeway pour afficher la maquette par défaut du site : Dans la maquette, nous allons mettre tous les onglets dans leur état normal. Puis, sur chaque page, nous allons modifier l'apparence de l'onglet correspondant pour en changer la couleur et le mettre au évidence. 36 • Cliquez sur OK pour valider la grille que vous avez choisie. Nous allons utiliser les fonctions de dessin de Freeway pour dessiner les onglets de la barre de navigation. Nous allons tout d'abord dessiner le bandeau d'où seront prolongés les onglets. • Cochez Fond et choisissez la couleur rouge dans le menu déroulant à droite de l'en-tête Fond : • Cliquez sur l'icône Image de la barre d'outils : • Dessinez un bloc graphique de toute la largeur de la page. • Cliquez sur l'icône des réglages généraux en haut de la palette Inspecteur pour afficher ces réglages. • Glissez la barre sur la première ligne horizontale de la grille : La palette reflète les caractéristiques de l'élément sélectionné. Tutoriel 2 Un site multipages Dessiner la barre de navigation • Dans la partie Dimensions réglez la Hauteur à 20px : Dessiner l'onglet de navigation Nous allons définir l'image de chaque onglet dans son état non-sélectionné. • Cliquez sur l'icône Pinceau en haut de la palette Inspecteur pour • Dessinez un autre bloc graphique rectangulaire. • Cliquez sur l'icône des réglages généraux en haut de la palette Inspecteur pour afficher ces réglages. afficher les réglages d'apparence. 37 Tutoriel 2 Un site multipages • Si nécessaire, cliquez sur le triangle à gauche de la section Dimensions pour l'afficher et modifiez la taille en 128px par 52px : • Cochez la case Bordure pour ajouter un bord noir, et sélectionnez Dedans dans le menu Position pour que le bord soit dessiné à l'intérieur du bloc : • Cliquez sur le triangle à gauche de Autre pour afficher ces réglages. • Éditez le champ Arrondi à 12px pour donner à l'onglet des coins arrondis : Nous avons maintenant défini l'onglet avec sa bordure : Ajouter un remplissage graduel Nous allons utiliser une des actions graphiques pour ajouter un remplissage graduel au bloc graphique. Sélectionnez ce bloc et : • Ouvrez le menu Bloc, sélectionnez dans Actions le sous-menu Fill Master. Ceci ajoute l'action Fill Master au bloc graphique. • Cliquez sur l'icône Pinceau en haut de la palette Inspecteur. • Cliquez sur le triangle à gauche de Bordure pour afficher ces réglages. 38 • Ouvrez le menu Fenêtre et sélectionnez Actions pour afficher la palette Actions. Ajouter un titre à l'onglet • Choisissez Linéaire dans le menu Contenu pour définir un remplissage Vous allez ajouter un titre à l'onglet pour l'identifier dans la barre de navigation. graduel linéaire entre deux couleurs. • Choisissez Blanc dans le menu Début et Noir dans le menu Fin et modifiez l'angle à -90 pour créer un remplissage allant verticalement du blanc au noir. • Réglez l'Opacité à 25%: Le bloc est rempli avec un dégradé qui va du blanc au gris 25% : • Double-cliquez sur le bloc graphique pour positionner le point d'insertion en haut à gauche et tapez À propos. Sélectionnez le texte et modifiez la section Caractère de la palette • Inspecteur pour régler le texte en Verdana 12px. • Cliquez sur l'icône d'alignement centré dans la section Paragraphe : Tutoriel 2 Un site multipages Dans cette palette, vous pourrez éditer les paramètres de l'action. • Ajoutez un Retour chariot au début du texte pour qu'il soit positionné sur la seconde ligne et donc centré dans le bouton. Ce bouton sera affiché avec un titre centré : 39 Tutoriel 2 Un site multipages • Glissez le bouton en haut de la page et à 20px de la gauche : Vous pouvez utiliser la section Dimensions de la palette Inspecteur pour voir la position du bloc pendant que vous le déplacez. Créer les autres onglets • Sélectionnez le bouton que vous venez de créer, et choisissez la fonction Dupliquer… dans le menu Bloc. Dans le dialogue Dupliquer entrez un nombre de copies de 3 et un • Décalage horizontal de 128px : • Enfin, sélectionnez la barre graphique et choisissez Au premier plan dans le menu Bloc pour amener la barre devant les onglets : Créer les pages du site Nous allons maintenant créer trois nouvelles pages blanches pour le site et lier les onglets de la maquette à ces pages. Créer les pages du site • Ouvrez le menu Page et choisissez Nouvelles pages… Le dialogue Nouvelles pages est affiché. • Tapez 3 dans le champ Pages et cliquez sur OK : • Cliquez sur OK pour créer les copies. • Éditez les titres de chaque copie en Recettes, Culture et Où acheter. 40 du piment • Glissez la page À propos du panneau Site et déposez-la sur la boîte d'Hyperliens sous la zone de la page : • Dans le panneau Site cliquez sur la première page avec la touche ALT enfoncée et modifiez son nom en À propos : • De même, modifiez le nom des autres pages en Recettes, Culture du piment et Où acheter. Lier les onglets à chaque page Une icône de lien est affichée sur le bloc graphique pour indiquer qu'il est lié à une autre page et le nom de la page liée, À propos, est affiché dans la boîte Hyperliens en bas de la fenêtre : Tutoriel 2 Un site multipages Trois nouvelles pages nommées Sans titre1, Sans titre2 et Sans titre3 seront créées. L'étape suivante consiste à lier chaque onglet de la maquette à la page appropriée du site. La création de ces liens sur la maquette évitera d'avoir à le refaire sur chaque page du site. • Cliquez sur l'icône Master1 dans le panneau Site pour afficher la maquette. Cliquez sur l'onglet À propos pour le sélectionner. • • Liez de la même manière les trois autres onglets aux trois pages correspondantes. 41 Tutoriel 2 Un site multipages Créer les onglets sur les pages de contenu L'onglet de la page À propos a maintenant un dégradé rouge : Maintenant, nous allons créer les onglets corrects sur chacune des pages de contenu. • Cliquez sur l'onglet À propos dans la maquette. • Ouvrez le menu Édition et choisissez Suivre le lien… La page À propos liée à cet onglet est affichée. • Sélectionnez l'onglet À propos, cliquez sur l'icône à gauche de la boîte Hyperliens et choisissez Sans dans le menu déroulant, car nous voulons que cet onglet ne soit pas lié (nous sommes déjà sur la page correspondant à cet onglet). • Dans la palette Actions, réglez les paramètres de l'action Fill Master avec une opacité de 100% et la couleur Rouge dans le menu Fin : • Cliquez sur le second onglet, ouvrez le menu Édition et choisissez Suivre le lien… pour aller à la seconde page. • Répétez les étapes précédentes pour régler les onglets de chacune des pages Recettes, Culture du piment et Où acheter. Prévisualiser le site Vous pouvez maintenant prévisualiser le site et vérifier que vous pouvez naviguer entre les pages en cliquant sur les onglets : • Ouvrez le menu Fichier et sélectionnez Prévisualiser dans un navigateur, puis choisissez dans le sous-menu le navigateur que vous désirez utiliser pour voir votre site. 42 • Cliquez sur l'icône HTML dans la barre d'outils : Nous allons maintenant dessiner la page "À propos" de notre site Web Piment. Cette page est destinée à la présentation du site. Créer l'en-tête de la page • Cliquez sur l'icône À propos du panneau Site pour afficher la page À propos. Dessinez un bloc graphique juste dessous la barre de navigation, sur • toute la largeur de la page. • Tapez le texte : Bienvenue sur le Site Piments ! • Sélectionnez tout le texte et utilisez la palette Inspecteur pour modifier ses réglages avec la police Sand, 24px, Rouge et centré : • Dessinez deux blocs HTML de part et d'autre de l'image. • Double-cliquez sur le bloc HTML de gauche, choisissez Importer texte… du menu Fichier et sélectionnez text1.txt dans le dossier Media. • De même, importez le texte text2.txt dans le bloc HTML de droite. • Sélectionnez le texte des blocs HTML et réglez-le en Verdana, 14px. • Sélectionnez les titres et mettez-les en gras. • Positionnez les blocs pour obtenir la mise en page suivante : Tutoriel 2 Un site multipages Créer la page À propos Ajoutez le contenu • Glissez l'image chillies.jpg depuis le dossier Media et déposez-la au centre de la page. 43 Tutoriel 2 Un site multipages Créer la page Recettes • Avec les poignées, agrandissez-le pour remplir la page : Nous allons créer la page Recettes qui donnera une liste de recettes à base de piment. Créer l'en-tête D'abord, il faut créer l'en-tête : • Sélectionnez le bloc graphique d'en-tête de la page À propos, ouvrez le menu Édition et choisissez Copier. • Allez à la page Recettes, ouvrez le menu Édition et choisissez Coller. Le bloc graphique sera collé à la même position sur la page. • Sélectionnez tout le texte et remplacez-le par : Recettes. Ajoutez les recettes • Cliquez sur l'icône HTML de la barre d'outils et dessinez un rectangle au centre de la page. • Double-cliquez dans le bloc HTML et choisissez Importer texte… dans le menu Fichier. • Sélectionnez le fichier recipes.txt et cliquez sur Ouvrir pour l'importer. Le bloc HTML ainsi que la page vont s'agrandir pour contenir tout le texte. Ce texte contient quatre recettes. Nous allons utiliser les styles pour les formater d'une manière cohérente. Définir un style pour les noms de recettes Nous allons définir un style pour les titres des recettes. • Sélectionnez Chilli Corn Chowder à la première ligne du texte. • Dans la palette Inspecteur réglez la Police sur Verdana, le Style en gras et la Taille en 14px : 44 Éditer le style… dans le menu déroulant : Nous allons maintenant définir ce style en lui donnant le nom Nomrecette. • Si nécessaire, ouvrez le menu Fenêtre et choisissez Styles pour afficher la palette Styles et Couleurs. Un nom temporaire, tel que style5, est donné automatiquement dans la palette Styles et Couleurs à chaque style créé dans votre site. De plus, vous pouvez créer des styles permanents qui resteront disponibles en permanence. Les styles permanents sont affichés en gras. • Dans le champ Nom entrez le nom Nomrecette que vous donnez au style, et cochez Permanent : Tutoriel 2 Un site multipages • Cliquez sur ce style avec la touche CONTROL enfoncée et choisissez • Cliquez sur l'icône Texte en haut de la palette Styles et Couleurs pour afficher les styles du document. Le style temporaire créé pour le texte que vous venez juste de formater est surligné dans la liste des Styles. • Cliquez sur OK pour enregistrer les modifications de ce style. 45 Tutoriel 2 Un site multipages Appliquer le nouveau style Maintenant que vous avez défini un style, vous pouvez l'appliquer à tout texte de votre document en le sélectionnant dans la palette Styles. rondes pleines dans le menu Liste : • Sélectionnez le titre de la seconde recette, Guacamole. • Cliquez sur Nomrecette dans la palette Styles. Le style du texte sera changé suivant le nouveau style que vous avez défini. • Répétez l'opération pour les deux autres recettes, Mexican Tabouleh et Salsa Verde. Définir les styles pour la description des recettes Nous allons définir deux autres styles pour le contenu de chaque recette : • Sélectionnez la description de la première recette et utilisez la palette Inspecteur pour le changer en Verdana, 12px. • Cliquez sur le style surligné avec la touche CONTROL enfoncée, choisissez Éditer le style… dans le menu déroulant, cochez Permanent et nommez-le Instructions. Définir le style pour les ingrédients Finalement, nous allons créer un style utilisant le formatage de paragraphe pour ajouter une marque ronde en face de chaque ingrédient. • Cliquez l'icône des options en haut à droite de la palette Styles et Couleurs et choisissez Nouveau style… dans le menu déroulant. Choisissez Attributs CSS dans le menu déroulant Vue pour n'afficher • que les attributs de texte HTML. • Entrez comme nom Ingredients. • Cliquez sur le bouton + à droite de Caractère et choisissez Police dans le menu déroulant. • Choisissez Verdana dans le menu déroulant Police. • De même, ajoutez Taille dans Caractère et réglez la Taille à 12px. 46 • Enfin, ajoutez Liste dans la section Paragraphe et choisissez Marques • Cliquez sur OK pour enregistrer le nouveau style. • Sélectionnez la liste des ingrédients de la première recette et cliquez sur Ingredients dans la palette Styles pour appliquer ce style au texte : Créer la page Culture du piment Finalement, la page Culture du piment va présenter des informations sur différentes variétés de piments, indiquer combien ils sont épicés et s'il est facile de les faire pousser. Pour cette page nous allons utiliser un tableau et importer du texte tabulé dans ce tableau. Ensuite, nous ajouterons des photographies de différents piments. Création de l'en-tête • Sélectionnez le bloc graphique de l'en-tête Recettes et choisissez Copier dans le menu Édition. Cliquez sur la page Culture du piment dans le panneau Site. • Choisissez Coller dans le menu Édition. • Modifiez le texte d'en-tête en Culture du piment. • Importer du texte dans un tableau Tutoriel 2 Un site multipages La première recette est maintenant présentée correctement : • Cliquez sur l'icône Tableau dans la barre d'outils : • Formatez les autres recettes de la même manière avec les styles que vous avez créés. • Dessinez un petit tableau sur la page. Le dialogue Insérer tableau s'affiche : • Laissez les réglages par défaut (tableau 2 x 2) et cliquez sur OK. 47 Tutoriel 2 Un site multipages • Double-cliquez pour insérer le point d'insertion du texte dans la cellule en haut à gauche du tableau : • Ouvrez le menu Fichier et choisissez Importer texte… • Sélectionnez le fichier Chillies.tab dans le dossier Media et choisissez Séparateur tabulation dans le menu déroulant Import : • Cliquez sur Ouvrir pour importer le texte. Une boîte de dialogue est affichée pour vous indiquer que le tableau n'est pas assez grand pour importer tout le texte : • Cliquez sur OK pour agrandir automatiquement le tableau avec le nombre correct de lignes et de colonnes pour contenir tout le texte. 48 La page Culture du piment est maintenant terminée : • Cliquez le bord du tableau pour sélectionner le tableau entier. • Dans la palette Styles cliquez sur Instructions pour régler le texte du tableau avec le style Instructions défini plus tôt. Redimensionner le tableau Nous allons maintenant redimensionner le tableau pour l'adapter au texte qu'il contient. • Glissez la poignée droite du tableau presque jusqu'au bord droit de la page. Modifiez la taille des deux premières colonnes du tableau pour que le texte tienne juste dans une seule ligne : Tutoriel 2 Un site multipages Maintenant, utilisez un des styles définis précédemment pour modifier le style du texte du tableau : • Cliquez glissez n'importe où sur la séparation verticale entre les deux premières colonnes en gardant la touche COMMAND enfoncée pour conserver inchangée la taille totale du tableau. • Cliquez glissez les séparations horizontales pour enlever tout espace superflu de chaque rangée. Et maintenant ? Ceci termine le second tutoriel, dans lequel vous avez créé un site Web multipages en utilisant les maquettes pour uniformiser la mise en page de chaque page. Le dernier tutoriel montrera comment ajouter des effets dynamiques à votre site grâce aux actions intégrées de Freeway. 49 Tutoriel 2 Un site multipages 50 Ce tutoriel prend comme base un site destiné à être la vitrine du travail d'un photographe, et les effets dynamiques sont utilisés pour présenter de manière percutante les images du photographe. Tutoriel 3 Effets dynamiques Ce dernier tutoriel va démontrer combien il est facile de créer des sites Web affichant des effets dynamiques impressionnants grâce aux actions intégrées dans Freeway. Tutoriel 3 Création d'effets dynamiques Introduction Comment ces actions fonctionnent Les actions Freeway permettent d'ajouter des effets dynamiques à votre site Web, effets qui ne pourraient être obtenus avec du HTML standard. Cette partie donne quelques exemples de ce que vous pouvez réaliser avec les actions. Pour chaque action, vous spécifiez les informations nécessaires dans une série de panneaux de la palette Actions. Les paramètres dépendent de l'action que vous êtes en train de définir, mais dans la plupart des cas ils spécifient quand l'action doit se déclencher (par exemple lorsque la souris passe sur une image) et quels sont les effets de l'action (par exemple afficher une image esclave). Boutons Rollover Les boutons Rollover changent d'apparence quand le curseur de la souris survole le bouton, ou quand l'utilisateur clique sur le bouton. Par exemple, vous pouvez faire un bouton qui s'illumine quand le curseur de la souris passe sur lui. Images esclaves (Slave images) Vous pouvez combiner de boutons rollover avec des images esclaves pour que, quand l'utilisateur clique ou passe la souris sur ce bouton, une image (appelée image esclave) apparaisse à un autre endroit sur la page. Par exemple, vous pouvez l'utiliser pour afficher une image quand l'utilisateur pointe sur différentes parties d'une carte. Fenêtres surgissantes (Pop-up windows) Un troisième jeu d'actions fait afficher une page de votre site dans une fenêtre au-dessus de la page courante. Cela peut-être utile pour afficher des informations complémentaires pour la page courante, comme du texte d'aide ou une version en haute résolution d'une image. Les fenêtres surgissantes sont normalement affichées sans barre d'adresse ni barre d'outils, afin de réduire leur taille, et elles peuvent soit rester en permanence sur l'écran, soit être fermées automatiquement après un certain temps. 52 Vous pouvez créer plusieurs actions indépendantes sur une même page en définissant des groupes esclaves. Vous serez ainsi certain que les blocs impliqués dans une action n'interfèreront pas avec les blocs impliqués dans les autres actions. Chaque groupe esclave est identifié par un nom unique, comme par exemple Indigo. Créer un logo pour le site Nous allons tout d'abord créer un logo pour le site. Pour cela, nous allons utiliser une fonction spéciale de Freeway, le texte transparent. Importer une image pour le remplissage du texte • Lancez Freeway et créez un nouveau site basé sur le modèle Blank. • Enregistrez le site en le nommant Photographe. • Copiez les fichiers du dossier Tutorial 3 (dans le dossier de Freeway) dans le dossier Media du dossier du site Photographe. Glissez l'image cloud.jpg du dossier Media sur la page blanche. • Placez l'image dans le coin en haut à gauche de la page. • Glissez le coin en bas à droite de l'image à la largeur de la page, tout en • maintenant enfoncées les touches SHIFT et ALT pour mettre l'image à l'échelle. 172px : Créer le texte transparent Créez un second bloc graphique qui va contenir le nom du site. • Cliquez sur l'outil Image dans la barre d'outils et dessinez un bloc graphique sous l'image des nuages. Dans la palette Inspecteur modifiez la taille avec les mêmes valeurs • que l'image des nuages, 550px par 172px : • Glissez l'image dans son bloc avec la poignée qui se trouve au centre de l'image pour déplacer les nuages de l'image comme ceci : Tutoriel 3 Création d'effets dynamiques • Dans la palette Inspecteur changez la hauteur du bloc graphique à • Cliquez sur l'icône Pinceau en haut de la palette Inspecteur pour afficher les réglages d'apparence. • Cochez la case Fond pour définir la couleur de remplissage blanche par défaut : 53 Tutoriel 3 Création d'effets dynamiques • Cliquez dans le bloc graphique et tapez le texte : Quand vous relâchez la souris, l'image des nuages va être redessinée en transparence sous le texte : Philip Smith Photographe • Sélectionnez le texte, puis cliquez sur l'icône Texte en haut de la palette Inspecteur pour afficher les réglages de caractère et paragraphe. • Changez la Police en Impact, la Couleur en Transparent, la Taille en 80px et cliquez sur l'icône Aligner centré : Créer des boutons rollover La police Impact est une police épaisse, idéale pour découper l'image qui se trouve derrière elle. • Déplacez le bloc graphique contenant le texte sur le bloc graphique contenant les nuages et superposez-les exactement. Nous allons maintenant créer quatre boutons rollover qui changeront d'apparence quand la souris les survolera. Dessiner un bouton 3D Nous allons utiliser l'action intégrée Boutons de Freeway pour créer les boutons. • Cliquez sur l'icône Image dans la barre d'outils et dessinez un rectangle pour le premier bouton. • Ouvrez le menu Bloc et choisissez Boutons dans le sous-menu Actions. • Si nécessaire, sélectionnez Actions dans le menu Fenêtre pour afficher la palette Actions donnant accès aux paramètres de cette action. 54 Le bouton doit être affiché sur la page comme ceci : Ombre : Ajoutez un titre dans le bouton • Double-cliquez dans le bloc graphique et tapez le texte : Queens College • Sélectionnez le texte. • Dans la palette Inspecteur réglez la Police sur Impact, la Couleur sur Blanc, la Taille en 18px et cliquez sur l'icône Aligner centré : • Dans la palette Inspecteur renommez le bouton en Bouton1Off et changez sa taille en 160px par 64px : Tutoriel 3 Création d'effets dynamiques • Choisissez Noir dans le menu déroulant Couleur et cochez l'option Enfin, positionnez le texte verticalement ainsi : • Cliquez dans le texte et choisissez Autre… dans le sous-menu Décalage du menu Style. Réglez le décalage à -100%: • 55 Tutoriel 3 Création d'effets dynamiques • Cliquez sur OK pour valider. Le texte est maintenant centré verticalement dans le bouton : Créer l'effet rollover Nous allons maintenant utiliser l'action Rollover pour que le bouton s'illumine et s'affiche en bleu lorsque le curseur de la souris passe dessus. • Sélectionnez le bloc graphique du bouton, ouvrez le menu Bloc et choisissez Dupliquer…. • Dans le dialogue Dupliquer laissez les décalages à 0px et cliquez sur OK : • Avec la souris, cliquez-glissez autour de la pile d'images (les deux boutons superposés) pour les sélectionner tous les deux : • Ouvrez le menu Bloc et choisissez Rollover dans le sous-menu Actions. Un onglet supplémentaire Rollover apparaît dans la palette Actions. • Cliquez sur l'onglet Rollover pour afficher ses paramètres. Le panneau Rollover comporte deux sections (Images et Paramètres) et vous pouvez passer de l'une à l'autre en cliquant sur les onglets. Initialement, c'est la section Images qui est affichée. Les marques indiquent si une image est visible dans les états Normal et Souris sur. Initialement, les deux images sont visibles dans l'état Normal. • Pour Button1On cliquez dans les colonnes pour enlever la marque de l'état Normal et pour ajouter une marque dans la colonne Souris sur : Le résultat est la création d'une copie superposée sur le bloc original, ce qui donne une pile d'images. • Dans la palette Inspecteur renommez la copie du bouton en Bouton1On. • Dans la palette Actions changez la Couleur du bouton Bouton1On en Bleu. Vous pouvez cliquer sur l'en-tête de chaque colonne pour visualiser l'état correspondant des images. 56 esclave 1. Nous l'utiliserons plus tard : Aligner les boutons • Sélectionnez les trois boutons en cliquant-glissant un rectangle sur ces trois boutons. • Ouvrez le menu Bloc et choisissez Aligner…. • Dans le dialogue Alignement cliquez sur l'icône de centrage Vertical : Les autres options peuvent être laissées à leur valeur par défaut. • Répétez l'opération pour créer deux autres boutons nommés Pont de Sighs, avec Clic # à 2, et Librairie Bodlean, avec Clic # à 3 : • Cliquez sur OK pour aligner les trois boutons. • Prévisualisez le résultat en cliquant sur le bouton Prévisualiser en bas à droite de la fenêtre de Freeway. • Cliquez sur le bouton Page pour revenir à la vue de page. Ajouter les images esclaves Tutoriel 3 Création d'effets dynamiques • Cliquez sur le bouton Paramètres. • Changez le menu Clic # en 1 pour que ce bouton déclenche l'action Nous allons maintenant ajouter les images esclaves qui seront affichées lorsque l'on clique sur chacun des boutons. Importer les images • Cliquez sur l'icône Image dans la barre d'outils. • Dessinez un grand bloc graphique sous les boutons, de la largeur totale de la page. • Ouvrez le menu Bloc et choisissez Dupliquer…. 57 Tutoriel 3 Création d'effets dynamiques • Indiquez un Nombre de copies de 2 avec des décalages de 100px : • Cliquez sur OK pour créer l'ensemble de 3 blocs graphiques. • Glissez l'image college.jpg du dossier Media dans le premier bloc graphique. Ouvrez le menu Bloc et choisissez Mettre à l'échelle et centrer dans • le sous-menu Image. Ceci met l'image à l'échelle pour remplir le bloc, tout en conservant un rapport proportionnel, et la centre si nécessaire. • Glissez l'image sighs.jpg dans le second bloc graphique et mettez-la à l'échelle de la même façon. • Répétez pour l'image bodlean.jpg dans le troisième bloc graphique. • Sélectionnez les trois images et utilisez la commande Aligner pour les superposer exactement. Vous avez maintenant une pile d'images sur la page. • En ayant les trois images toujours sélectionnées, ouvrez le menu Bloc et choisissez Slave Image dans le sous-menu Actions. Dans la palette Actions cliquez sur le bouton Images, supprimez les • marques de la colonne Normal en cliquant sur ces marques, et assignez 58 avec des marques chaque image au numéro de déclenchement que nous avons défini pour les boutons rollover : Et maintenant ? Félicitations ! Vous venez de terminer le troisième tutoriel et vous avez utilisé les actions de Freeway pour ajouter des effets dynamiques à votre site. Maintenant, vous pouvez vous référer au guide Utiliser Freeway lorsque vous avez besoin d'informations détaillées sur l'utilisation d'images, de textes, de tableaux, de formulaires et d'actions pour créer vos propres sites avec Freeway. Tutoriel 3 Création d'effets dynamiques • Utilisez le mode Prévisualiser pour voir le site terminé : 59 Tutoriel 3 Création d'effets dynamiques 60 ">
Lien public mis à jour
Le lien public vers votre chat a été mis à jour.
