▼
Scroll to page 2
of
382
Manuel d’Utilisation de Freeway 3.5 2 Préliminaires Introduction Introduction Introduction Bienvenue dans le Manuel d'Utilisation de Freeway. Freeway est un éditeur de sites web pour Mac qui a été conçu et développé spécialement pour les créateurs. Il a pour but de rendre la création de sites web intuitive et accessible à tous. Ressources Le Guide de prise en main Si l'utilisation de Freeway vous est totalement inconnue, c'est un excellent point de départ. Il contient des informations générales sur Freeway pour vous permettre de vous habituer à l'environnement de travail du logiciel, ses fonctions de base... Le Manuel d'Utilisation de Freeway Le Manuel d'Utilisation de Freeway fournit de manière simple des informations spécifiques et détaillées sur les fonctions proposées par Freeway ainsi que sur les techniques de travail et le web en général. Il contient les chapitres suivants : • Document : Mise en place de votre environnement de travail et création d'un nouveau site. • Contenu : Travail sur les images, le texte et les objets multimédias qui composent votre site web. • Actions : Utilisation des Actions Freeway. • Publication : Publication et prévisualisation de votre site. • Avancées : Techniques avancées et astuces pour améliorer votre site. • Référence : Manuel de référence complet sur les fenêtres et palettes de Freeway, les raccourcis claviers et quelques conseils de dépannage. Exercices L'installeur de Freeway contient des exercices de bases qui peuvent vous permettre de vous entraîner avec le logiciel avant de commencer votre premier site. Vous trouverez sur le site de Softpress (http://www.softpress.com/) de nouveaux exercices qui portent sur des points plus spécifiques de l'utilisation de Freeway. Autres sources d'information D'autres sources d'information sont disponibles pour les utilisateurs de Freeway : 3 4 Introduction Sur le site web de TRI-EDRE (http://www.tri-edre.com), vous pourrez télécharger la dernière version de Freeway et des fichiers associés à Freeway (Actions, exemples, etc.) et consulter des informations relatives à Freeway. Le support technique par e-mail est gratuit. Si vous ne trouvez pas une réponse à vos problèmes dans la section Dépannage de ce manuel ou sur notre site web, envoyez-nous simplement un e-mail à [email protected] en précisant le problème que vous rencontrez. Le site web de SoftPress (l'éditeur Anglais de Freeway) constitue également une source d'information très riche (http://www.softpress.com). Les rubriques Support et Actions sont particulièrement utiles. Vous aurez également la possibilité d'effectuer une recherche sur le site en général, ainsi que parmi les messages de la mailing-liste "FreewayTalk". La mailing-liste FreewayTalk permet aux utilisateurs de Freeway de communiquer entre eux. C'est une communauté très active qui discute de sujets variés allant de la création de sites web en général à des aspects plus techniques. Si vous ne comprenez pas quelque chose ou si vous avez besoin d'aide sur un sujet particulier, ou si vous souhaitez simplement donner votre opinion, cette mailing-liste pourra vous aider. Ces différentes sources d'information vous aideront à exploiter au maximum les capacités de Freeway. Freeway Express Ce manuel couvre les versions Pro et Express de Freeway. Ce symbole signale des passages dans le guide pour traitant des différences entre Freeway Pro et Freeway Express. Si vous possédez Freeway Express et que vous désirez passer à la version Pro, merci de consulter notre site Web pour plus d'informations. (http://www.tri-edre.com/). Voici les différences entre Freeway Pro et Freeway Express. Dans Freeway Pro : Feuilles de styles (CSS) : permettent d'allouer un style particulier aux textes HTML, comme dans un traitement de texte, ce qui n'est pas possible avec l'HTML pur. Le texte peut être justifié, la police du texte changée ainsi que la taille. Vous pouvez également créer des effets dynamiques comme des changements de couleur du texte. Mise en page CSS : permet de positionner des éléments de façon absolue sur la page (en utilisant des calques), ce qui offre de nouvelles possibilités dans la présentation. Ceci peut aussi être utilisé pour déplacer dynamiquement des images, des animations et du texte. Possibilité d'importer différents formats d'images comme les formats Photoshop, Illustrator, TIFF. Vous pouvez les transformer directement dans le format web approprié (JPEG ou GIF). Freeway Pro vous permet Introduction également d'importer des formats d'images gérés par des plug-ins de Photoshop ainsi que le format PDF sous Mac OS X. Actions Freeway personnalisables : vous pouvez créer vos propres actions en plus de celles fournies en standard dans Freeway et dans les packs FAST. Vérification orthographique sur l'ensemble du site web : les dictionnaires sont fournis en standard pour les langages suivants : Français, Anglais (américain et international), Allemand, Espagnol, Italien, Hollandais, Danois, Norvégien et Suédois. Support des polices PostScript Type-1 La possibilité d'ouvrir des fenêtres multiples pour le même document. Une carte des liens qui permet de visualiser graphiquement tous les liens entre la page courante et toutes les autres pages du site. FAST Les fonctions originelles de Freeway peuvent être augmentées grâce aux packs d’actions, nommés «FAST packs» (FAST est l'acronyme Anglais de «Freeway Advanced Site Outils»). Ces packs contiennent des Actions qui ont été spécialement conçues pour être parfaitement intégrées dans Freeway, afin de rajouter des fonctionnalités plus techniques et spécifiques à certaines utilisations. Pour le moment les packs disponibles sont les suivants : Buttons Ce pack vous permet de créer des boutons avec des reflets, effets de surbrillance. Graphics Ce pack permet de générer des dégradés, travailler sur les couleurs des images. Il ajoute des fonctionnalités destinées à travailler les images, sans avoir à lancer une application de graphisme et sans avoir à modifier vos images originales. Navigation Ce pack permet de créer des systèmes de navigation avancés, comme des menus, des cartes de site, des barres de navigations... directement dans Freeway, sans avoir à créer des scripts Java complexes. Comme tous les autres liens dans Freeway, ces objets sont automatiquement modifiés au fur et à mesure que vos pages sont modifiées. Et plus encore De nouveaux «FAST pack» seront créés au fil du temps. Pensez à consulter notre site web pour connaître les dernières nouveautés ! 5 6 Document Introduction Préparation Préparation Débuter un site web Ce chapitre est conçu pour vous donner un rapide aperçu des fonctions proposées par Freeway pour créer un site web. Quand vous créez un site web avec Freeway, vous pouvez soit définir à l'avance mise en page, structure et contenu, soit les faire évoluer au fur et à mesure que vous créez le site web. Il est conseillé d'avoir déjà un aperçu de ce que vous désirez réaliser avant de commencer, par exemple il est conseillé de connaître la taille des pages sur lesquelles vous allez travailler et l'organisation générale du site. Il est important de bien comprendre comment Freeway fonctionne avant de débuter la création du site web dans Freeway, particulièrement si vous étiez habitué à travailler avec un autre éditeur de sites web. Freeway n'est pas un éditeur HTML, c'est un logiciel de mise en page qui génère automatiquement les fichiers HTML afin d'afficher votre site web dans un navigateur web. L'utilisation de Freeway ressemble beaucoup à celle d'un logiciel de Publication Assistée par Ordinateur (PAO). En PAO, l'utilisateur travaille sur un fichier qui ne peut être lu qu'à l'aide du logiciel de création, et ensuite ce document est imprimé en PostScript. Freeway utilise la même démarche. Vous travaillez sur des documents qui ne peuvent être lus que par Freeway. Puis les pages HTML et les images associées sont générées pour être affichées par les navigateurs web. Freeway sépare complètement la création des pages web du code HTML. Cela vous permet de vous concentrer sur la création du site, sans vous préoccuper des problèmes techniques liés au codage HTML. Freeway génère du code HTML propre et performant. Freeway offre également des avantages par rapport aux éditeurs HTML classiques, par exemple : • Options de mise en page avancées : les blocs textes et les blocs Graphiques peuvent se positionner où vous le désirez, et ils peuvent être facilement superposés. • Typographie avancée : Freeway offre des outils professionnels de typographie qui sont habituellement utilisés en PAO. Tout en restant modifiables, les attributs typographiques sont conservés lors de la conversion automatique des textes en images. • Gestion avancée des images : les images peuvent être importées à partir de formats standards (comme le TIFF) pour être enregistrés dans des formats pour le web (tels que GIF, JPEG et PNG) puis optimisée afin de créer des fichiers de petite taille qui permettront à votre site de s'afficher rapidement. 7 8 • Préparation Modifications simples : le site web peut être très rapidement et facilement redessiné. Créer un nouveau site web Pour créer un nouveau site web, vous devez d'abord créer un nouveau document Freeway. À l'intérieur de ce document, vous pourrez définir autant de pages que vous le souhaitez, chacune d'elle correspondant à une page HTML qui sera créée lors de l'exportation ou de la publication du site. Chaque page HTML est un fichier pouvant être affiché par un navigateur web, par exemple Microsoft Internet Explorer, Netscape Navigator, Safari... Sur les pages, vous pouvez créer des blocs contenant du texte, des images ou des fichiers multimédias. Ces blocs pourront être convertis en images au moment de la publication. Vous pouvez aussi construire des maquettes, qui seront utilisées pour définir l'apparence générale des pages de votre document. N'importe quels blocs, tels qu'un logo ou une barre de navigation, qui doivent apparaître sur toutes les pages d'une section particulière du site peuvent être créés sur la maquette, qui pourra ensuite être appliquée à une ou plusieurs pages. À l'intérieur du document, vous pouvez aussi définir des dossiers et des sous-dossiers pour organiser la structure physique de votre site. La navigation est l'un des thèmes les plus importants auxquels vous devez penser lors de la création d'un nouveau site, il est important de construire une démarche cohérente pour vos visiteurs. Il faut aussi que la structure du site semble logique au visiteur. Pensez à créer un site simple à consulter, indiquez au visiteur où le conduira chaque lien et assurez-vous que les visiteurs savent constamment à quel endroit ils se trouvent sur votre site. Publication et prévisualisation du site Après avoir créé un document avec ses pages, ses blocs et ses liens, l'étape suivante consiste à publier le site pour transformer le document en pages HTML. Vous pourrez alors transférer les fichiers créés sur un serveur web qui les rendra accessibles aux visiteurs. La publication est l'étape pendant laquelle Freeway génère les pages HTML avec leurs ressources associées (c’est-à-dire les fichiers images et les fichiers multimédias). Pour cela, vous devez sélectionner la commande Publier le site ou Prévisualiser. Ces deux commandes publient le site dans un dossier local, la commande Prévisualiser ouvre aussi un navigateur web pour afficher la page actuelle. Lorsque vous publiez un site en utilisant l'une de ces commandes, vous devez indiquer dans quel dossier les fichiers générés seront stockés. Pendant que vous travaillerez, vous aurez besoin de prévisualiser régulièrement le site. Chaque fois, les pages nouvelles ou les éléments modifiés seront recréés. Si vous supprimez une page dans le document, le fichier HTML et les images associées seront également détruites. Préparation 9 Après avoir publié le site localement, vous pouvez utiliser la commande Transférer afin de l'envoyer sur un serveur web pour rendre le site accessible aux autres personnes. Étapes de travail La création d'un site web avec Freeway se décompose en plusieurs étapes : 1 2 3 4 5 6 7 8 9 Préparer la création du site Imaginer la mise en page Préparer et regrouper le contenu Créer un nouveau document Freeway Définir des grilles, des maquettes et une méthode de navigation Ajouter les pages et les mettre en page Prévisualiser le site et effectuer des corrections Publier et transférer le site sur un serveur web Maintenir et faire évoluer le site web 1 Préparer la création du site Généralement, il est bénéfique de passer du temps pour préparer le site web avant de commencer, même si cette étape ne dure que quelques minutes, pour vous permettre de rassembler vos pensées. Cela vous évitera de prendre un mauvais départ. Si vous créez le site pour un client, il est essentiel que vous compreniez ses besoins et ses attentes avant de commencer le travail. Par exemple, vous découvrirez peut être qu'il envisagera d'ajouter par la suite des fonctions avancées telles que des fichiers multimédia, des animations, l'intégration d'une base de données ou de la vente en ligne. Dans ce cas votre conception du site devra prendre en compte ces facteurs. Vous voudrez peut être aussi clarifier votre rôle avec votre client. Allez-vous juste lui fournir les pages HTML avec leurs images ou devez-vous transférer directement le site web sur un serveur ? Est-ce que vous devrez héberger le site ? Devrez-vous aussi déposer le nom de domaine ? Qui prendra en charge la maintenance et l'évolution du site ? 2 Imaginer la mise en page Comme pour concevoir un document papier, vous devrez probablement mettre vos idées sur papier avant de vous asseoir devant votre ordinateur. Même les concepteurs professionnels de sites web ont du mal à avoir de l'inspiration en se mettant face à un écran blanc ! Si vous travaillez pour un client, durant les premières étapes vous travaillerez probablement avec lui. Le site devra peut être respecter l'identité de l'entreprise, vous devrez peut être travailler avec certaines polices, certaines couleurs ou même réaliser des choses qui vous sembleraient bizarres ; ou au contraire, vous devrez peut être inventer vous-même une identité pour le site 10 Préparation web. Dans chaque cas, vous voudrez probablement avoir l'approbation de votre client avant de poursuivre plus en avant la création du site. Freeway permet très facilement de concrétiser vos idées pour produire rapidement des brouillons à montrer à votre client. Ne soyez pas inquiet si votre client vous demande des modifications mineures de dernière minute tant que ces changements peuvent être corrigés directement dans Freeway. Ce sont sur tout les éléments graphiques, dessinés avec difficulté à l'aide d'autres logiciels, qui risquent de poser problème si votre client vous demande de les modifier. Prenez soin de faire vérifier les polices et les couleurs utilisées par votre client si vous devez créer des animations, des dessins 3D ou retoucher des images pour créer le contenu du site. A la fin de cette étape, vous et votre client devez être conscient des polices, couleurs et des technologies qui seront utilisées. 3 Préparer et regrouper le contenu Après avoir terminé le dessin de la mise en page, vous êtes prêt à créer et à regrouper le contenu du site. Cela inclut la saisie des pages de texte ainsi que les images ou éléments multimédias qui ne peuvent pas être créés directement dans Freeway, par exemple les GIF animés, les images bitmap qui utilisent des effets de transparence ou d'ombres et les photos. C'est souvent une bonne idée de regrouper tous ces éléments dans un seul endroit avant de les importer dans Freeway, simplement pour des raisons d'organisation. Lorsque vous aurez terminé le projet, vous pourrez placer ces fichiers à côté du document Freeway et du dossier contenant les pages HTML. Lorsque vous dessinez des images pour le web, il est conseillé de travailler en 72 dpi pour les images bitmap. Ainsi, vous attendrez moins longtemps dans Photoshop ou vous passerez plus de temps à la création. Il n'est pas nécessaire d'enregistrer vos images en GIF ou en JPEG pour les utiliser dans Freeway. Au contraire ce sera plus facile pour vous de les conserver dans leurs formats d'origine. De plus, des compressions répétées d'une image en JPEG détériore petit à petit la qualité de cette image à chaque enregistrement. Evitez juste d'utiliser le format PICT pour manipuler des grandes images bitmap avec Freeway. Il n'est pas nécessaire de créer le texte et les dessins simples dans un logiciel de dessin spécialisé car Freeway vous permet de manipuler ces éléments avec un contrôle et une flexibilité plus grande. Lorsque vous préparez le contenu du site, pensez à identifier tout ce qui peut être créé avec Freeway pour utiliser au maximum Freeway, les modifications de dernière minute en seront beaucoup facilitées. Enfin, lorsque vous importez des éléments dans Freeway, Freeway créera une liaison entre le document Freeway et les documents importés. Il conservera aussi la dernière version du fichier importé à l'intérieur du document Freeway. Préparation 11 L'original sera réutilisé lors de la publication du site, mais s'il est absent, Freeway possède généralement assez d'informations pour créer un résultat acceptable. Si vous créez des dessins vectoriels à l'aide d'un logiciel tel que Illustrator ou Freehand, vous pourrez utiliser la nouvelle fonction qui permet à Freeway Pro d'importer les fichiers Illustrator. Vous pouvez importez directement les fichiers Illustrator dans Freeway ou passer par l'intermédiaire du format EPS. Vous pouvez aussi enregistrer votre dessin vectoriel en EPS puis utiliser Photoshop pour le pixeliser. Ensuite, vous pourrez enregistrer l'image pixelisée en TIFF pour l'importer dans Freeway. Les dernières versions de ces logiciels de dessin vectoriel vous permettent aussi d'enregistrer directement un fichier pixelisé. Freeway vous permet d'importer de nombreux types d'images, donc si vous travaillez avec des images bitmap (telles que celles créées par Photoshop), vous pourrez importer les fichiers Photoshop (les calques de l'image seront aplatis) en plus des fichiers TIFF (le format conseillé) ou n'importe quel autre format reconnu par Freeway. En fait, Freeway peut reconnaître la plupart des formats reconnus par les modules externes de Photoshop. La nouvelle commande Acquérir vous permet également de scanner directement des documents depuis Freeway. Freeway Express ne peut pas importer des fichiers au format TIFF ou Photoshop. Vous pouvez utiliser le format PNG, ou le format PICT pour conserver une image de bonne qualité. 4 Créer un nouveau document Freeway Après avoir défini une mise en page générale et regroupé le contenu du site, vous pouvez maintenant créer le document Freeway. Votre document Freeway contiendra l'ensemble des pages du site, en dehors des polices et des fichiers associés. Le document peut contenir autant de pages que vous le souhaitez, il permet aussi de définir la structure hiérarchique du site. Ce document ne sera pas envoyé sur le serveur web, il restera sur votre ordinateur. Seul Freeway peut ouvrir ce document. Pour consulter le site à l'aide d'un navigateur, vous devez le publier en pages HTML dans un dossier de destination. Ce dossier contiendra le site, ce sera le contenu de ce dossier qui devra être transféré sur le serveur web pour rendre le site accessible. Lorsque vous souhaitez faire des modifications, ouvrez le document Freeway, modifiez-le, puis publiez à nouveau les pages HTML. 5 Définir des grilles, des maquettes et une méthode de navigation Après avoir créé un nouveau document, votre première tâche consistera à créer une grille de mise en page utilisée par une ou plusieurs maquettes. Ces 12 Préparation maquettes serviront de base pour les vraies pages que vous créerez. Les guides et les grilles de ces maquettes seront utilisables sur chacune des pages basées sur ces maquettes. De même, chaque bloc placé sur la maquette apparaîtra sur chacune des pages utilisant cette maquette. Les maquettes peuvent être utilisées pour créer une mise en page, une identité visuelle et un mode de navigation cohérents sur l'ensemble du site. Si vous utilisez des images en tant que liens, pensez également à ajouter les mêmes liens sous la forme de texte en HTML afin que les visiteurs puissent consulter votre site même si les images ne sont pas chargées. Vous devez également être prudent lorsque vous définissez des textes alternatifs pour les images, ces textes doivent décrire les images quand elles ne sont pas affichées. Freeway vous permet de créer automatiquement les textes alternatifs pour les images importées. Souvenez-vous que chaque visiteur ne consultera qu'une seule page à la fois et qu'il devra naviguer sur votre site à partir de la page actuelle pour atteindre la page recherchée. Posez-vous la question : Est-ce que je peux dire dans quelle partie du site je me trouve ? Est-ce que je sais où aller maintenant ? Est-ce que je peux revenir facilement à la page d'accueil ? 6 Ajouter les pages et les mettre en page En dehors des tâches habituelles qui consistent à ajouter du texte, des images ou d'autres éléments, vous devez conserver différents éléments à l'esprit. Vous devez utiliser le titre de chaque page pour permettre aux visiteurs de savoir où ils se trouvent. Utilisez le champ Titre de la palette Spécifications pour le modifier et le rendre utile et informatif. Le titre de la page d'accueil est particulièrement important car c'est ce nom qui sera enregistré si le visiteur crée un signet pour votre site. Pensez aussi à donner un nom à la page d'accueil tel que "index.html" ou "default.html" (en fonction des noms qui sont gérés par votre serveur web). Ainsi, si un visiteur ne donne pas le nom de la page qu'il souhaite visiter, cette page sera automatiquement affichée. Pour modifier le nom de la page, utilisez le champ Fichier de la palette Spécifications. Important : Ne déplacez jamais et ne renommez jamais les fichiers HTML en dehors de Freeway, cela casserait les liens entre les pages et les images ne pourraient plus se charger lors de l'affichage des pages. 7 Prévisualiser le site et effectuer des corrections Vous trouverez utile de prévisualiser vos pages dans un navigateur de temps en temps pendant que vous travaillez. Bien que l'affichage dans Freeway soit excellent, il risque d'être légèrement différent du résultat affiché par les navigateurs. En prévisualisant régulièrement le site dans un navigateur, vous pourrez découvrir d'éventuels problèmes. Préparation 13 Pensez à prévisualiser votre site à l'aide de différents navigateurs et surtout en utilisant Netscape Navigator, Microsoft Internet Explorer et le Navigateur d'Apple, Safari. En effet, une page qui s'affiche correctement dans l'un peut ne pas s'afficher correctement dans l'autre. Lorsque vous créez une page, il est conseillé de la prévisualiser dans un navigateur réglé pour afficher les polices avec des caractères plus grands qu'habituellement. C'est essentiel pour vérifier que la mise en page ne se casse pas ou ne se déforme pas dans certaines conditions. De même, sachez que les caractères affichés sur les PC fonctionnant avec Windows sont généralement un tiers plus grands que sur Mac donc des problèmes peuvent survenir lorsqu'une page semblant correcte est affichée sur un PC. Si vous ne possédez pas de PC fonctionnant avec Windows pour tester vos pages, demandez à un ami ou à un collègue ayant un PC de tester votre site, ou inscrivez-vous sur une mailing-liste dédiée à la création de sites web pour demander à quelqu'un de tester votre site. Vous serez surpris par l'amabilité des personnes qui participent à ces listes, mais vous devrez rendre votre site accessible sur le web pour que tout le monde puisse le tester. Des émulateurs PC, tels que Connectix Virtual PC, sont également disponibles, ils fournissent une vision assez correcte de votre site sur PC. 8 Publier et transférer le site sur un serveur web Prévisualiser votre site sur votre propre ordinateur ou sur le réseau local est une chose, mais si d'autres personnes doivent le consulter, vous devrez placer les fichiers (notamment les pages HTML, les images et les sons) sur un serveur web. Que vous ayez un serveur web sur votre réseau local ou que vous souhaitiez envoyer vos fichiers chez votre hébergeur par FTP, Freeway peut le faire automatiquement grâce à la commande Transférer. Afin d'établir la connexion avec votre hébergeur, vous devez connaître certaines informations sur ce serveur, le chemin d'accès à votre dossier, votre nom d'utilisateur (login) et votre mot de passe (password). Si vous ne connaissez pas ces informations, vous devrez prendre contact avec l'administrateur de votre serveur web ou le support technique de votre hébergeur qui pourront vous donner ces renseignements. 9 Maintenir et faire évoluer le site web Lorsque vous devrez faire des modifications sur le site, la solution la plus simple consistera à ouvrir le document Freeway, faire les modifications puis utiliser à nouveau la commande Transférer pour envoyer le site web. Lorsque vous utilisez la commande Transférer, le dossier local contenant le site ainsi que le dossier sur le serveur web seront automatiquement mis à jour. 14 Créer un nouveau document Créer un nouveau document Pour créer un nouveau document, choisissez Nouveau dans le menu Fichier. La fenêtre du Nouveau Document s'affiche. Le dialogue Nouveau document La boîte de dialogue des nouveaux documents vous permet de créer un nouveau document en utilisant des modèles prédéfinis ou un document vierge avec des réglages personnalisés. Modèle Cet onglet vous permet de choisir un modèle déjà définit qui vous servira de base pour la création d'une nouvelle page. Vous pouvez créer un document HTML 4.0 vierge en choisissant le modèle correspondant. Les autres modèles vous permettent de créer une mise en page rapide en fonction du thème du site que vous voulez créer. Freeway va créer un nouveau document et ses ressources nécessaires dans votre dossier «Documents» (vous pouvez changer la destination en cliquant sur le bouton en haut à droite. avec une icône de dossier). Vous pouvez également changer le nom du fichier. Personnalisée Cet onglet va vous permettre de spécifier plus en détail les caractéristiques de votre page HTML. HTML par défaut Créer un nouveau document 15 Ce menu vous permet de choisir quelle version du langage HTML sera utilisée lors de la publication du site. Elle détermine aussi la disponibilité ou non de certaines fonctionnalités dans Freeway. Pour plus d'information sur les options HTML, consultez le paragraphe Mise en page HTML 4.0. Taille par défaut Freeway vous permet de définir une taille standard pour les pages de votre document. Cette taille est utilisée pour définir les limites de la page dans Freeway. Seuls les blocs placés dans les limites des pages seront exportés lorsque le site sera publié. Cependant, les dimensions des pages lorsqu'elles sont affichées dans le navigateur sont déterminées par les positions des blocs, et non pas par la taille standard définie dans Freeway. Cela signifie que vous pouvez travailler sur des pages plus larges ou plus hautes que nécessaire, sans prendre le risque d'afficher une barre de défilement inutile dans le navigateur s'il n'y a plus de contenu à faire défiler. La taille par défaut est utilisée pour définir la taille des maquettes et des pages dans le document, donc toutes les nouvelles pages créées utiliseront cette taille. Vous pouvez aussi définir individuellement la taille de chaque page en utilisant l'onglet Page de la palette Spécifications. Si vous modifiez la taille des pages individuellement, les changements effectués dans le dialogue Nouveau Document ou dans la fenêtre Réglages Document n'auront pas d'effet sur ces pages. Le menu Taille par défaut contient quelques exemples de tailles, mais vous pouvez entrer vos propres valeurs pour la largeur et la hauteur en saisissant des valeurs dans les champs Largeur et Hauteur. Freeway propose différentes tailles de page par défaut, vous pouvez commencer par une largeur de 550 pixels pour être sûr que votre page web restera visible sur les petits écrans. Si vous envisagez de créer des pages qui contiennent plus de contenu que ce qui peut être visible à l'écran, assurezvous que les visiteurs devront seulement faire défiler les pages verticalement et non pas horizontalement. Pour plus d'information sur les tailles de pages et les résolutions des écrans, consultez Choisir une dimension de page. Dossier du site Lors de la publication, Freeway crée les pages HTML dans le dossier spécifié à l'aide du bouton Dossier du Site. Vous devez créer un nouveau dossier pour chaque site web que vous créez. Si vous créez un site de taille importante, il peut être intéressant de séparer votre site en plusieurs documents Freeway pour faciliter le travail et gagner du temps. Dans ce cas, vous devez vérifier que chaque document Freeway publie ses pages dans le dossier principal du site. Les dossiers définis à l'intérieur du document Freeway seront créés à l'intérieur du dossier du site en tant que sous-dossiers. Le dossier du site correspond au 16 Créer un nouveau document dossier de base de votre site web et, comme tous les dossiers de base, il doit contenir les principaux éléments requis tels que la page d'accueil. Pour plus d'information, consultez Choisir le dossier du site. Ressources Lorsque vous publiez le site, Freeway crée un fichier HTML pour chaque page, ainsi que des fichiers pour toutes les images nécessaires. Les fichiers images référencés par chacune des pages HTML sont appelés les ressources de cette page. Vous avez trois options pour choisir l'emplacement des ressources : • • • Un dossier commun pour toutes les ressources du site Des dossiers séparés pour chacun des sous-dossiers Enregistrer les ressources à côté des fichiers HTML Pour plus d'information, consultez Dossier des Ressources. Nom des fichiers Le menu Nom des fichiers vous permet de décider si vous voulez utiliser des noms de fichiers longs (comme sur Mac OS ou Unix) , des noms courts de type DOS,, ou des noms alphanumériques longs. Par défaut, les pages HTML ainsi que les autres fichiers créés pour votre site seront nommés avec des noms de fichiers longs. Cela permet d'utiliser des caractères autres que des chiffres ou des lettres pour les fichiers générés à partir de votre document Freeway. Tandis que les noms longs alphanumériques n'autorisent que des lettres, des chiffres, des tirets (-) et des tirets-bas (_) dans le nom du fichier (en dehors du point qui sera utilisé avant l'extension du fichier) ; certains hébergeurs imposent l'utilisation de noms courts. Lorsque Freeway génère automatiquement les noms des fichiers à partir du titre des blocs ou des pages du document, les caractères non autorisés seront supprimés. La manière dont les fichiers sont nommés est importante lorsque les fichiers sont mis sur le serveur web. Tous les Macintosh ainsi que les ordinateurs fonctionnant avec Windows 95/98, Windows NT ou Unix gèrent les noms longs. Si vous avez besoin de transférer les fichiers de votre site via un PC fonctionnant avec le DOS, ou si vous rencontrez des problèmes indiquant que les noms des fichiers ont été tronqués, vous pouvez demander à Freeway d'utiliser des noms DOS. De même, si Freeway vous affiche un message d'erreur indiquant que les pages n'ont pas pu être envoyées car les noms des fichiers ne sont pas autorisés, vous pouvez demander à Freeway d'utiliser des noms alphanumériques. Vous pouvez changer ce réglage à tout moment. Si vous changez ce réglage après la création du site, vous devrez le publier à nouveau pour être sûr que les liens seront correctement mis à jour. Modifier les réglages du document En plus d'indiquer les réglages du site lorsque vous créez un nouveau document, vous pouvez changer les réglages du document en sélectionnant Réglages document... dans le menu Fichier. Lorsque vous utilisez le menu Créer un nouveau document Fichier, le dialogue Réglages document est séparé en deux sections : les options du site et les options de transfert. Le dialogue Nouveau document n'affiche que les options du site. Pour plus d'information sur les options de transfert, consultez Transférer le site. 17 18 Enregistrer et ouvrir les fichiers Enregistrer et ouvrir les fichiers Après avoir créé le document, vous devez l'enregistrer. Freeway enregistre le document dans son propre format, pas en HTML. Seul Freeway peut ouvrir et enregistrer les documents Freeway. Pour exporter un document en HTML, vous devez utiliser les commandes Publier le site ou Prévisualiser. Enregistrer votre document Pour enregistrer un fichier qui n'a pas encore été enregistré, sélectionnez Enregistrer dans le menu Fichier. Freeway affichera le dialogue d'enregistrement standard que vous pourrez utiliser pour indiquer où vous souhaitez enregistrer le document. Choisissez un emplacement pour le fichier puis donnez un nom à votre document Freeway. Vous devez choisir un nom de document simple et informatif afin de pouvoir l'identifier facilement dans le futur. Le nom du document n'a pas d'importance, car ce fichier reste sur votre ordinateur, il n'est pas envoyé sur le web. Vous voudrez peut être conserver le document Freeway et le dossier du site au même endroit pour des raisons d'organisation. Cependant, ce n'est pas une bonne idée d'enregistrer le document Freeway dans le dossier du site. Au contraire mieux vaut les placer tous les deux dans un nouveau dossier. Pour plus d'informations sur le dossier contenant le site, consultez Choisir le dossier du site. Note : si vous créez un document à partir d'un modèle, Freeway enregistre automatiquement une copie lors de la création et n'affiche pas l'item "Enregistrer sous..." lorsque vous sauvegardez pour la première fois. Lorsque vous avez effectué des modifications sur le document, utilisez à nouveau la commande Enregistrer. Lorsque vous sélectionnez la commande Enregistrer avec un document qui a déjà été enregistré, Freeway met Enregistrer et ouvrir les fichiers 19 automatiquement à jour les informations de ce document sans vous demander à nouveau un nom pour ce fichier. Freeway n'effectue pas d'enregistrement automatique pendant que vous travaillez. Comme dans tous les logiciels, pensez à enregistrer fréquemment votre document pour réduire les risques de perte de données. Enregistrer votre document avec un nouveau nom Pour créer une copie de votre document avec un nouveau nom, vous pouvez soit dupliquer le fichier dans le Finder, soit utiliser la commande Enregistrer sous… dans Freeway pour lui attribuer un nouveau nom. Sauvegardes automatiques Freeway effectue automatiquement une copie d'un document lorsque vous enregistrez pour la première fois le document après l'avoir ouvert. La copie de sauvegarde est créée dans le même dossier que l'original et possède le même nom avec le suffixe ".bak". Cela signifie que lorsque vous arrêtez de travailler sur un document après l'avoir enregistré puis fermé, vous posséderez une copie d'un fichier tel qu'il était avant d'avoir effectué les dernières modifications. Si le document principal ne peut plus être ouvert pour une raison quelconque, vous pourrez utiliser le fichier de sauvegarde pour récupérer votre travail tel qu'il était à cette étape. Seule la dernière sauvegarde est conservée par le mécanisme de sauvegarde automatique de Freeway. Lorsque vous ouvrez à nouveau le document et que vous l'enregistrez, l'ancien fichier de sauvegarde est écrasé. Pour une protection accrue, vous pouvez faire des copies de votre document manuellement, ou utiliser un logiciel de sauvegarde automatique. Ouvrir un document sauvegardé automatiquement Dans Freeway, ouvrez le document en sélectionnant la commande Ouvrir... dans le menu Fichier. Utilisez le dialogue d'ouverture standard pour retrouver le document Freeway souhaité. Freeway n'affiche pas automatiquement les fichiers de sauvegarde dans le dialogue d'ouverture car normalement vous ne devriez jamais ouvrir un fichier de sauvegarde, à moins que le document principal ne soit endommagé. Si vous souhaitez ouvrir un fichier de sauvegarde, vous pouvez utiliser l'une des méthodes suivantes : Double-cliquez sur l'icône du fichier de sauvegarde dans le Finder, cela provoquera l'ouverture du fichier dans Freeway. 20 Enregistrer et ouvrir les fichiers Ou bien, si Freeway est ouvert, vous pouvez maintenir la touche Option enfoncée pendant que vous sélectionnez Ouvrir dans le menu Fichier, cela provoquera l'affichage des fichiers de sauvegarde dans le dialogue d'ouverture. Importer des fichiers HTML 21 Importer des fichiers HTML Freeway peut importer des fichiers HTML existant. Lorsque vous utilisez cette fonction, Freeway créera une nouvelle page dans le document actuel et il essaiera de conserver au maximum le contenu et la mise en page de la page HTML Cette fonction vous permettra de débuter rapidement lorsque vous souhaitez travailler sur des anciens sites avec Freeway. Cependant, il est important de noter que Freeway ne travaille pas directement en HTML, donc l'importation ne sera probablement pas une copie conforme du site importé. Vous devrez revoir le site et corriger des détails après avoir importé les pages HTML. Freeway Express ne peut pas importer de l'HTML. Freeway Express n’a pas la possibilité d’importer des fichiers. Vous pouvez créer à nouveau un site existant en déplaçant son contenu depuis la fenêtre d’un navigateur web vers une fenêtre de Freeway. Importer des pages HTML Il y a deux méthodes pour importer des pages HTML dans Freeway : soit vous les importez dans un document Freeway déjà existant (cela crée des nouvelles pages correspondant aux pages importées), soit vous glissez-déposez le fichier HTML sur l'icône du logiciel Freeway dans le Finder (cela crée un nouveau document Freeway basé sur la page importée). En utilisant la technique de l'importation, il est possible d'ajouter une seule page ou le contenu entier d'un dossier. Freeway est aussi capable de recevoir par glisser-déposer des morceaux de code HTML en provenance de logiciels tels que FMLINK de BlueWorld (un logiciel permettant de connecter des bases de données FileMaker avec les éditeurs de sites web). Importer une page HTML dans un document existant 1 Ouvrez ou créez un nouveau document 2 Sélectionnez Lire HTML... dans le menu Fichier 3 Sélectionnez le fichier HTML à importer puis cliquez sur Ouvrir Freeway créera une nouvelle page dans votre document. Elle sera basée sur les réglages par défaut indiqués dans la fenêtre Réglages document et son contenu sera basé sur le fichier HTML importé. Importer un dossier de pages HTML dans un document existant 1 Ouvrez ou créez un nouveau document 2 Sélectionnez Lire HTML dans le menu Fichier Importer des fichiers HTML 22 3 Sélectionnez le dossier contenant les pages HTML que vous souhaitez importer puis cliquer sur le bouton Importer... Freeway créera de nouvelles pages dans votre document. Elles seront basées sur les réglages par défaut du dialogue Réglages document. Importer une page HTML par Glisser-Déposer 1 Localisez le logiciel Freeway dans le Finder 2 Glissez-déposez le fichier HTML à importer sur l'icône de Freeway Freeway créera un nouveau document contenant le fichier HTML importé. Glisser-Déposer du code HTML à partir d'autres logiciels 1 Sélectionnez le morceau de code HTML à importer 2 Glissez-déposez-le sur la page dans Freeway. S'il contient du code HTML, il sera importé dans Freeway Attributs HTML reconnus Le texte, avec la plupart de ses attributs, les images et autres ressources référencées dans le code HTML seront importés, tout comme les réglages de la page, les scripts dans la partie <HEAD> du fichier, les formulaires et les cadres. Cependant, pensez à vérifier minutieusement chacune des pages importées. Même si elles semblent globalement correctes, des détails mineurs peuvent vous avoir échappés. Pages, dossiers et maquettes 23 Pages, dossiers et maquettes Choisir une dimension de page Chaque page web consultée par un visiteur sur un site web est en fait un fichier HTML individuel. Chaque page que vous créez dans Freeway sera exportée dans un fichier HTML individuel lors de la publication du site. L'une des choses les plus importantes à faire lorsque vous déterminez la taille des pages est de prévoir la structure du site, bien que vous puissiez créer les pages quand vous en avez besoin, il est conseillé d'avoir une vision précise des grandes rubriques du site avec leur contenu. Les pages web ne sont pas limitées dans leurs dimensions. De plus, si vous créez des pages plus larges ou plus hautes que la zone visible dans la fenêtre du navigateur web, la fenêtre du navigateur affichera des barres de défilement pour permettre au visiteur de voir les parties de la page qui ne sont pas affichées. Cependant, il est peu recommandé de créer des pages qui forcent l'utilisateur à les faire défiler horizontalement pour voir le reste de la page. Certaines personnes n'utilisent que la zone visible à l'intérieur de la fenêtre standard du navigateur. Vos pages pourront être consultées dans différents environnements, avec des petits écrans d'un affichage 640 x 480 pixels ou des grands écrans en 1280 x 1024 pixels ou plus. La résolution de l'écran correspond à ses dimensions en pixels, donc un écran 640 x 480 affiche 640 pixels en largeur et 480 pixels en hauteur. Les résolutions les plus courantes sont 640 x 480, 800 x 600 et 1024 x 768 pixels. Si vous souhaitez créer des pages pour des sites commerciaux sans utiliser de barre de défilement, vous devrez définir avec attention la taille de vos pages dans Freeway pour qu'elle rentrent correctement dans les fenêtres des navigateurs. La taille choisie doit notamment permettre d'afficher la barre de menus, les barres de boutons et la barre d'état à l'écran. Les visiteurs qui utilisent des écrans ayant des résolutions importantes préfèrent généralement utiliser une fenêtre de la taille respectant les proportions d'une feuille de papier, au lieu d'agrandir au maximum la fenêtre à l'écran pour remplir leur champ de vision. Freeway vous permet d'indiquer la taille des pages pour tout le document dans le dialogue Réglages document, mais vous pouvez aussi définir des tailles différentes pour chacune des pages en utilisant l'onglet Page de la palette Spécifications 24 Pages, dossiers et maquettes . Utiliser la palette Site Dans la palette Site, des icônes suivies par le nom des pages représentent les pages de votre document. Vous pouvez changer les noms des pages, les déplacer dans le document, créer ou effacer certaines pages. La palette Site possède un menu qui vous donne un accès rapide aux commandes les plus utilisées. Vous pouvez créer des dossiers pour organiser votre site et déplacer les pages dedans. Freeway surveille automatiquement les changements et vérifie que tous les liens restent à jour. Utilisez les maquettes pour définir, créer et gérer vos pages. Les réglages des pages proviennent de ceux qui sont choisis pour leurs maquettes respectives, à moins que vous ne changiez ces réglages en modifiant individuellement les réglages des pages. De plus, tous les blocs présents dans une maquette seront automatiquement recopiés dans les pages utilisant cette maquette dans votre document. Créez différentes maquettes pour vous aider à gérer les différentes parties de votre site. Utiliser les onglets Freeway affiche des onglets en haut de chaque fenêtre de document pour vous permettre facilement d'afficher la maquette, les liens et la page. Pages, dossiers et maquettes 25 Freeway Express n'a pas d'onglet «Liens». Manipuler les pages Dans un document Freeway, les pages sont affichées à l'écran dans un rectangle noir doté d'une ombre. En dehors de cette zone se trouve la table de montage. Vous pouvez utiliser cette zone pour travailler, mais seuls les blocs qui se trouvent à l'intérieur du rectangle de la page seront publiés dans les pages web. Ajouter des pages Les nouvelles pages sont insérées après la page actuelle, dans le même dossier. Vous pouvez ajouter des pages en suivant la méthode suivante : 1 Sélectionnez Nouvelles pages dans le menu Page ou dans le menu de la palette Site. Vous pouvez aussi cliquer sur l'icône Nouvelles pages en bas à gauche de la palette Site. 2 Entrez un nom pour les pages dans le dialogue qui s'affiche. 3 Entrez le nombre de pages que vous souhaitez ajouter au document. 4 Si vous souhaitez utiliser une maquette différente de celle qui est sélectionnée, sélectionnez son nom dans le menu Maquette. 5 Cliquez sur OK. La première des pages créées s'affiche. Vous pouvez également ajouter une page en glissant-déposant l'icône d'une maquette à partir de la partie supérieure (section Maquettes) de la palette Site dans la partie inférieure de la palette (section Pages). Le dialogue Nouvelles pages s'affiche alors, il vous demande d'entrer un nom pour la nouvelle page. Les titres des pages et les noms des fichiers Il est important de donner des titres significatifs aux pages. Cela vous aidera non seulement à naviguer parmi les pages de votre document, mais en plus, cela détermine le titre de la fenêtre du navigateur lorsque cette page sera affichée, ainsi que le nom qui sera utilisé pour créer un signet de cette page. Il peut aussi jouer un rôle important si votre site web est analysé par des moteurs de recherche, donc il doit également décrire la page. Entrez le titre dans le champ Titre de l'onglet Page de la palette Spécifications. Freeway générera automatiquement le nom du fichier HTML à partir de ce titre, mais vous pouvez modifier ce nom de fichier dans le champ Fichier si vous le souhaitez. 26 Pages, dossiers et maquettes Si la page actuelle est la page principale du site (c’est-à-dire la première page que les visiteurs consulteront quand ils arriveront sur votre site web), vous devez habituellement choisir "index.html" comme nom de fichier. Cela indiquera au serveur web qu'il doit afficher cette page par défaut. Il est conseillé de choisir des noms de fichiers en minuscules pour éviter une confusion si votre serveur web distingue minuscules et majuscules. Pour plus d'information sur le changement de titre des pages, consultez Modifier le titre d'une page dans la palette Spécifications. Afficher les pages Lorsque vous consultez un document dans Freeway, vous ne voyez qu'une seule page à la fois dans la fenêtre du document, mais passer d'une page à une autre est simple. Vous pouvez afficher une nouvelle page en utilisant la palette Site, le menu Page en bas de la fenêtre du document, l'onglet Liens en haut du document, ou bien encore en suivant l'un des liens hypertextes de la page. Afficher une page avec la palette Site L'icône de la page courante est assombrie dans la palette Site et son titre est affiché en gras. Pour afficher une nouvelle page, cliquez sur l'icône (et non pas le nom) de la page souhaitée. Cliquer sur le nom d'une page permet de la supprimer ou de la renommer. Afficher une page avec le menu Page Différents menus se trouvent en bas à gauche de la fenêtre du document. Le premier vous permet de modifier la taille d'affichage de la page. Le second, qui Pages, dossiers et maquettes 27 indique le titre de la page actuelle, contient la liste de toutes les maquettes et de toutes les pages du document. En cliquant sur ce menu, vous pourrez sélectionner la page que vous souhaitez afficher. Afficher une page en suivant un lien Hypertexte Vous pouvez tester la navigation dans votre site en suivant les liens hypertexte entre les différentes pages, sans utiliser la prévisualisation dans un navigateur. Pour suivre un lien dans Freeway, sélectionnez le bloc ou le texte qui sert de lien puis sélectionnez Validez ce lien dans le menu Edition. Lorsqu'un lien est sélectionné, une icône avec le nom de la page de destination du lien est affichée en bas de la fenêtre du document. Si vous maintenez la touche Commande enfoncée pendant que cliquez sur ce nom, le lien sera aussi suivi et vous irez à cette page. Afficher une page à partir de l'onglet Liens Vous pouvez suivre les liens hypertexte dans Freeway en utilisant l’onglet Liens. L'onglet Liens présente visuellement les relations entre les différentes pages du site : les pages conduisant à la page sélectionnée sont affichées à gauche et les pages pouvant être consultées à partir de la page sélectionnée sont affichées à droite. Freeway Express n'a pas l'onglet liens Pour sélectionner une nouvelle page centrale dans l'onglet Liens, cliquez simplement sur l'icône de la page désirée. Elle passe alors au centre de la fenêtre, son icône est plus grande et assombrie. Si vous double-cliquez sur la page sélectionnée, Freeway passera automatiquement dans l'onglet Page. Vous pouvez afficher ou masquer les liens sortant ou entrant de l'une des autres pages en cliquant sur le bouton rond placé à côté de ces pages. Si vous 28 Pages, dossiers et maquettes maintenez la touche Option enfoncée pendant que vous cliquez sur l'un de ces boutons, tous les liens qui se trouvent au même niveau dans la hiérarchie de votre site seront affichés. Si une page comporte un lien qui pointe vers la page elle-même, les liens seront affichés en italique et leurs boutons seront désactivés. Sélectionner une page, un dossier ou un bloc dans la palette Site Vous pouvez effacer un ou plusieurs pages/dossiers, ou les déplacer dans un sous-dossier différent si vous avez créé un site avec une structure hiérarchique. Vous pouvez sélectionner ces éléments dans la palette "Site". Vous pouvez sélectionner une page en cliquant sur son nom (et non pas son icône) dans la palette Site. Vous pouvez cliquer sur le nom ou sur l'icône des dossiers et des blocs pour les sélectionner. Vous pouvez sélectionner les blocs d'une page à partir de la palette Site si l'option Afficher les blocs est cochée dans le menu de la palette Site. Lorsque vous sélectionnez un bloc dans la page, son nom et son icône sont sélectionnés dans la palette Site. Maintenez la touche majuscule pour sélectionner plusieurs éléments simultanément. Vous pouvez également sélectionner une page en cliquant sur son nom (et non pas son icône) dans l'onglet Liens. Supprimer une page Vous pouvez supprimer la page actuelle à tout moment en sélectionnant Supprimer pages... dans le menu de la palette Site ou en cliquant sur l'icône Corbeille située en bas en gauche de la palette Site. Si plusieurs pages sont sélectionnées dans la palette Site, vous pouvez soit supprimer la page actuelle, soit toutes les pages sélectionnées. Vous pouvez également supprimer des pages (ou dossiers) sélectionnés dans la palette Site en pressant la touche Effacer ou Supprimer du clavier. Déplacer une page Vous pouvez modifier l'ordre des pages dans le document, bien que cela n'ait aucun effet sur la manière dont le site sera présenté au visiteur (la navigation sur un site est uniquement déterminée par les liens hypertexte que vous avez volontairement ajouté dans ce but). Cependant, il est parfois utile d'organiser les pages dans un certain ordre pour faciliter son travail. Pour modifier l'ordre des pages, déplacez simplement une page par glisserdéposer en utilisant soit son icône, soit son nom. Pendant le glisser, vous pourrez voir où la page sera déplacée. Vous pouvez modifier l'ordre des pages à l'intérieur d'un même dossier, ou les glisser dans un autre dossier. Pages, dossiers et maquettes 29 Copier une page Pour copier une page, sélectionnez-la comme décrit ci-dessus puis sélectionnez Copier dans le menu Edition. Vous ne pouvez copier qu'une seule page à la fois. Modifier une page Vous pouvez changer le titre d'une page, le nom du fichier, sa maquette, sa couleur de fond, son image de fond, etc. Les modifications de ce genre sont habituellement effectuées à partir de la palette Site ou de la palette Spécifications. Lorsque vous cliquez à un endroit de la page ou de la table de montage dépourvu de blocs, deux onglets seront affichés dans la palette Spécifications : l'onglet Page et l'onglet Apparence de page. Alors que l'onglet Page permet notamment de modifier le titre de la page, le nom du fichier et les dimensions de la page actuelle, l'onglet Apparence de page concerne la couleur de fond, l'image de fond, ainsi que les couleurs des liens. Modifier le titre d'une page dans la palette Spécifications Pour modifier le titre de la page actuelle avec la palette Spécifications : 1 Cliquer a un endroit de la page ou de la table de montage dépourvu de blocs pour désactiver toute sélection et afficher l'onglet Page dans la palette Spécifications. 2 Dans le champ Titre, entrer le nouveau titre. 30 3 Pages, dossiers et maquettes Appuyez sur la touche Retour ou cliquez à nouveau dans la page pour confirmer le changement du titre. Modifier le titre d'une page dans la palette Site 1 Maintenez la touche Option enfoncée pendant que vous cliquez sur le titre de la page dans la palette Site. 2 Le titre existant est sélectionné, entrez le nouveau titre. 3 Appuyez sur la touche Retour ou cliquez à nouveau dans la page pour confirmer le changement du titre. Freeway renomme la page et change le titre dans la palette Site. Freeway met à jour automatiquement les noms des fichiers pour qu'ils correspondent aux titres des pages, sauf si vous avez modifié volontairement le nom du fichier. Modifier la Maquette utilisée Pour appliquer une nouvelle maquette à la page actuelle : 1 Cliquer a un endroit de la page ou de la table de montage dépourvu de blocs pour désactiver les éléments sélectionnés et afficher l'onglet Page dans la palette Spécifications. 2 Dans le menu Maquette de la palette choisissez celle qui est à appliquer. Modifier la couleur de fond d'une page Par défaut, Freeway crée des pages qui seront affichées dans les navigateurs avec un fond blanc. Pour changer la couleur de fond de la page actuelle, sélectionnez une nouvelle couleur dans la palette Couleurs lorsque rien n'est sélectionné dans la page. Vous pouvez également : Pages, dossiers et maquettes 31 1 Cliquer n'importe où sur la page ou la table de montage pour désactiver les éléments sélectionnés puis provoquer l'affichage de l'onglet Page dans la palette Spécifications. 2 Cliquer sur l'onglet Apparence de page 3 Sélectionner une couleur prédéfinie dans le menu Couleur ou bien sélectionner Autre... pour choisir une autre couleur à l'aide du nuancier. Modifier l'image de fond d'une page Il est possible de définir une image qui sera utilisée comme fond de page dans le navigateur. L'image sélectionnée sera automatiquement répétée pour couvrir la surface totale de la fenêtre, en commençant à partir du coin supérieur gauche de la fenêtre du navigateur. L'image de fond n'est pas considérée comme un bloc et elle ne propose pas les mêmes options que les images importées qui sont affichées dans des blocs Graphiques. Pour utiliser une image en fond, elle doit être de type GIF, JPEG ou PNG. Les autres types ne pourront pas être utilisés. Pour modifier l'image de fond de la page actuelle, vous pouvez soit glisserdéposer une image à partir du Finder ou d'une autre application vers une zone vide de la page actuelle (en maintenant la touche Majuscule enfoncée), soit : 1 Cliquer n'importe où sur la page ou la table de montage pour désactiver les éléments sélectionnés puis provoquer l'affichage de l'onglet Page dans la palette Spécifications. 2 Cliquer sur l'onglet Apparence de page 3 Choisir Sélectionner... dans le menu Image de la palette puis localiser le fichier GIF, JPEG ou PNG qui sera utilisé en image de fond. 4 Cliquer sur Ouvrir. Freeway utilise l'image choisie en image de fond et la répète pour couvrir toute la page. Pour supprimer une image de fond, sélectionnez Sans dans le menu Image. 32 Pages, dossiers et maquettes Manipuler les dossiers Lorsque vous créez un site web, s'il comporte un nombre important de pages, vous souhaiterez peut-être diviser le site en sous-dossiers pour conserver certaines pages ensemble. Vous pouvez ajouter des dossiers dans le document Freeway. Lorsque le site sera publié, la structure que vous avez définie sera reproduite dans le dossier qui contiendra le site. Créer un nouveau dossier Vous pouvez créer un nouveau dossier en sélectionnant Nouveau dossier... dans le menu Page ou dans le menu de la palette Site. Vous pourrez alors nommer ce nouveau dossier. Le nouveau dossier sera inséré après la dernière page du dossier actuel. Déplacer des pages ou dossiers dans un sous-dossier Vous pouvez glisser-déposer des pages ou des dossiers à l'intérieur d'autres dossiers dans le document. Pour cela, vous devez sélectionner la page ou le dossier que vous souhaitez déplacer dans la palette Site pour le glisser-déposer sur un autre dossier. Lorsque vous déposez la page ou le dossier, il doit apparaître à droite du dossier parent. Supprimer un dossier Pour supprimer un dossier, sélectionnez-le dans la palette Site puis appuyez sur la touche Effacer ou Supprimer, ou sélectionnez Effacer dans le menu Edition. Renommer un dossier Pour renommer un dossier, cliquer sur son nom dans la palette Site en maintenant la touche Option enfoncée. Note : le dossier principal du site est modifiable avec le menu "Réglages document" du menu "Fichier". Manipuler les maquettes Les maquettes sont composées de blocs que vous souhaitez faire apparaître à l'identique sur plusieurs pages. Par exemple, vous pouvez placer une barre de titre, des boutons de navigation ou un logo sur la maquette, ainsi ils apparaîtront automatiquement sur les pages qui utiliseront cette maquette. Les maquettes sont comme des pages normales sauf qu'elles ne sont pas publiées. Les maquettes sont affichées dans la partie supérieure de la palette Site, au-dessus de la ligne horizontale noire. Vous pouvez afficher une maquette en cliquant sur son icône dans la palette Site ou en sélectionner le nom de la maquette à afficher dans le menu Page placé en bas à gauche de la fenêtre du document. Pages, dossiers et maquettes 33 Les maquettes peuvent aussi comporter des guides ou des grilles qui faciliteront un positionnement uniforme des blocs sur l'ensemble des pages utilisant cette maquette (les guides n'apparaîtront pas sur les pages web publiées). De plus, dans la maquette, vous pouvez chaîner les blocs de texte placés dans différents cadres pour contrôler la répartition du texte dans les pages. Par défaut, un nouveau document contient une première maquette et une première page. Si vous utilisez une mise en page simple, vous pouvez modifier la première maquette pour la faire correspondre à vos besoins. Placez-vous sur la maquette pour définir les cadres, guides et grilles comme vous le souhaitez. Si vous souhaitez travailler avec plusieurs maquettes, vous pouvez créer de nouvelles maquettes. Créer une nouvelle maquette 1 Sélectionnez Nouvelle maquette... dans le menu Page ou dans le menu de la palette Site. 2 Nommez cette nouvelle maquette puis cliquez sur OK. Appliquer la maquette à une page Les changements effectués sur la maquette sont automatiquement répercutés sur les pages qui utilisent cette maquette. Lorsque vous ajouterez une nouvelle page dans le document, vous pourrez choisir sur quelle maquette elle sera basée. Pour appliquer une maquette à une page déjà existante : 1 Affichez la page dont vous souhaitez changer la maquette. 2 Cliquez n'importe où sur la page ou la table de montage pour désactiver les éléments sélectionnés puis provoquez l'affichage de l'onglet Page dans la palette Spécifications. 3 Sélectionnez la maquette dans le menu Maquette. Freeway appliquera cette maquette à la page sélectionnée et recopiera les guides, grilles et blocs de cette maquette dans la page. Renommer une maquette Pour modifier le titre de la maquette actuelle : 1 Affichez la maquette, depuis la palette Site ou avec l'onglet Maquette 2 Cliquez n'importe où sur la page ou la table de montage pour désactiver les éléments sélectionnés puis provoquez l'affichage de l'onglet Page dans la palette Spécifications. 3 Entrez un nouveau nom dans le champ Titre. 4 Appuyez sur la touche Retour ou cliquez à nouveau dans la page pour confirmer le changement du titre. Pages, dossiers et maquettes 34 Vous pouvez également cliquer sur le titre de la maquette dans la fenêtre Site en maintenant la touche Option enfoncée pour le sélectionner et le modifier. Ré-appliquer une maquette Lorsque vous travaillez sur une page, vous pouvez déplacer ou modifier des blocs qui appartenaient à la maquette de cette page. Cependant, après ces changements, les modifications que vous ferez sur la maquette ne seront plus répercutées sur cette page. En conséquence, il peut être utile de pouvoir ré-appliquer la maquette. Pour cela, vous devez sélectionner Appliquer la maquette à cette page dans le menu Page. Les éléments modifiés sur la page seront conservés et les éléments originaux de la maquette seront à nouveau ajoutés. Vous devrez alors supprimer avec précaution les éléments en double qui ne sont plus nécessaires. Créer une maquette à partir d'une page (avec les menus) Les pages peuvent être utilisées pour créer des maquettes. C'est utile si vous avez créé une page et si vous souhaitez l'utiliser pour créer une maquette pour d'autres pages. Pour créer une nouvelle maquette à partir de la page actuelle : 1 Sélectionner Créer une maquette avec cette page... dans le menu Page. 2 Entrez le nom de la nouvelle maquette dans le dialogue puis cliquez sur OK. Freeway ajoute une nouvelle maquette basée sur la page actuelle. Créer une maquette à partir d'une page (avec la palette Site) Vous pouvez également transformer une page en maquette en la sélectionnant dans la palette Site puis en la glissant-déposant au-delà de la ligne horizontale noire qui sépare les maquettes et les pages dans cette palette. Ensuite, vous pourrez indiquer le nom de cette nouvelle maquette dans le dialogue. Modifier la taille d'affichage de la page Pour visualiser la page avec plus ou moins de détails, vous pouvez l'agrandir ou la réduire. Vous disposez de plusieurs méthodes pour cela : vous pouvez utiliser le menu Zoom en bas à gauche de la fenêtre du document, utiliser l'outil Loupe disponible dans la palette Outils, ou utiliser le menu Affichage. Soyez prudent si vous modifiez la taille d'affichage de la page car seule la prévisualisation avec un affichage 100 % correspondra à ce qui sera affiché par les navigateurs web. Vous pouvez agrandir la page jusqu'à 1000 % et la réduire jusqu'à 5 %. Modifier l'affichage avec le menu Zoom Pages, dossiers et maquettes 35 Lorsque vous cliquez sur le menu Zoom en bas à gauche de la fenêtre du document, vous verrez une liste d'agrandissement ou de réductions prédéfinis. Vous pouvez également entrer une valeur personnalisée en sélectionnant Autre... dans ce menu ou faire apparaître la totalité de la page à l'écran en sélectionnant Ajuster la page à la fenêtre. Modifier l'affichage avec l'outil Loupe Vous pouvez utiliser l'outil Loupe de la palette Outils pour agrandir ou réduire la taille d'affichage de la fenêtre. Vous pouvez soit cliquer avec l'outil Loupe, soit l'utiliser pour sélectionner une partie de la page. En cliquant avec la loupe, la taille d'affichage sera augmentée de 25 %. En maintenant la touche Option pendant que vous cliquez, vous réduirez la taille d'affichage dans la même proportion. Vous pouvez également utiliser la loupe pour sélectionner une partie de la page, elle sera alors agrandie au maximum pour tenir dans la fenêtre du document. Lorsque vous utilisez l'outil Loupe, vous pouvez momentanément appuyer sur la touche Commande pour utiliser temporairement l'outil Sélection. Modifier l'affichage en utilisant un autre outil Pour utiliser temporairement l'outil Loupe lorsque vous travaillez avec un autre outil, vous pouvez maintenir enfoncé la touche Control pour agrandir la page ou Control+Option pour la réduire. Ensuite, il suffit de cliquer ou de sélectionner une partie de la page pour l'agrandir ou la réduire. Utiliser le menu Affichage Vous pouvez choisir directement deux tailles d'affichage dans le menu Affichage : Taille réelle affiche le document à 100 %. Ajuster la page à la fenêtre affiche une vue d'ensemble de la page. Pour rétablir un affichage à 100 %, double-cliquez simplement sur le bouton Loupe dans la palette Outils. Travailler avec plusieurs fenêtres Vous pouvez afficher simultanément plusieurs fenêtres du même document. Chaque changement effectué dans une fenêtre sera répercuté dans les autres fenêtres. Cette option n'est pas disponible dans Freeway Express. Pages, dossiers et maquettes 36 En créant de nouvelles fenêtres puis en les empilant ou en les plaçant en mosaïque, vous pourrez avoir simultanément une vue précise (avec un fort agrandissement) et une vue d'ensemble (avec une forte réduction), ou une page et sa maquette simultanément. Afficher plusieurs fenêtres Pour afficher une nouvelle fenêtre, sélectionnez Nouvelle fenêtre dans le menu Fenêtre. Freeway Pro ouvrira une nouvelle fenêtre qui sera placée audessus de la fenêtre originale et qui utilisera la même taille d'affichage. La première fenêtre possède un "1" accolé à la fin de son nom dans sa barre de titre. La nouvelle fenêtre possédera le même nom de document avec un "2" accolé et ainsi de suite... L'option "Nouvelle fenêtre" n'est pas disponible dans Freeway Express. Chaque fenêtre devient active quand vous cliquez dessus pour la faire passer devant. Lorsqu'une fenêtre est active, les menus et les commandes qui ne sont pas utilisables par cette fenêtre sont désactivés et apparaissent en gris. Comme d'habitude, vous pouvez déplacer ou redimensionner les fenêtres pour en voir plusieurs simultanément. Les fenêtres ouvertes sont listées dans le menu Fenêtre, vous passer de l'une à l'autre en sélectionnant le nom de la fenêtre à activer dans le menu Fenêtre. Fermer une fenêtre Pour fermer une fenêtre : 1 Rendez-la active en cliquant dessus. 2 Sélectionnez Fermer dans le menu Fichier ou cliquez dans sa case de fermeture. Freeway ferme la fenêtre. Si c'est l'unique fenêtre du document et si des modifications non enregistrées ont été apportées à ce document, une fenêtre s'affiche pour vous demander si vous souhaitez enregistrer les modifications. Cliquez sur Sauver ou Annuler en fonction de votre choix. Placer les fenêtres en mosaïque Deux types de mosaïques sont disponibles dans le menu Fenêtre, ils organisent tous les deux les fenêtres pour remplir l'écran. Mosaïque organise les fenêtres horizontalement, par exemple deux fenêtres seront positionnées l'une audessus de l'autre, tandis que Mosaïque verticale organise les fenêtres verticalement, les fenêtres seront placées côte à côte. Si vous ouvrez une nouvelle fenêtre, les fenêtres placées en mosaïques précédemment seront masquées. Choisissez à nouveau Mosaïque ou Mosaïque verticale dans le menu Fenêtre pour réorganiser les fenêtres. Empiler les fenêtres Lorsque vous sélectionnez Empiler dans le menu Fenêtre, Freeway positionne les fenêtres ouvertes les unes au-dessus des autres avec un léger décalage. Pages, dossiers et maquettes 37 Vous pouvez sélectionner une fenêtre empilée en cliquant sur sa bordure. La fenêtre sélectionnée passera alors au premier plan et deviendra active. Travailler sur plusieurs documents Vous pouvez travailler simultanément sur plusieurs documents. Il est inutile de fermer le document ouvert pour en ouvrir un autre. Règles, grilles et guides 38 Règles, grilles et guides Afin de vous aider à créer une mise en page cohérente et à aligner les blocs avec précision, Freeway propose différentes règles, guides et grilles : 1 Les règles situées sur les bords supérieurs et gauches des fenêtres affichent les positions horizontales et verticales de vos éléments. 2 Les guides sont des lignes horizontales ou verticales qui vous aident à aligner précisément les blocs. 3 Les grilles sont composées de lignes verticales et horizontales qui sont répétées à intervalle régulier. 4 Les marges vous permettent de laisser un espace libre sur les bords de la page. Les règles ne sont pas utilisables lorsque vous travaillez sur une page comportant plusieurs cadres. Règles Dans Freeway, les règles situées les bords supérieurs et gauches des fenêtres vous donnent une indication sur la position du bloc sélectionné par rapport au point d'origine de la règle. Par défaut, l'origine de la règle est située dans le coin supérieur gauche. Cependant, si vous travaillez sur une zone particulière de la page, vous pouvez déplacer les règles pour plus de facilité. L'affichage de la règle varie en fonction des éléments sélectionnés dans la page. Par exemple, lorsqu'un bloc texte est en cours d'édition, la règle horizontale affiche les marges du bloc de texte. Masquer et afficher les règles Vous pouvez afficher ou masquer les règles le long des bords supérieurs et gauches de la fenêtre. Les règles sont affichées par défaut lors de l'ouverture d'un document. Sélectionnez Règles dans le menu Affichage pour masquer les règles et augmenter l'espace visible dans la zone de travail. Sélectionnez à nouveau cette commande pour afficher les règles. Modifier l'origine des règles Vous pouvez modifier le point d'origine utilisé pour effectuer les mesures en repositionnant le point 0 (qui correspond à l'origine de la règle). Cela affectera l'ensemble du document, pas uniquement la page sur laquelle vous travaillez. Le positionnement actuel des blocs sur la page n'est pas modifié par les changements liés à la règle. Pour modifier l'origine de la règle, vérifiez que les règles sont visibles, puis : Règles, grilles et guides 39 1 Déplacez le curseur sur le point d'intersection entre la règle horizontale et la règle verticale dans l'angle supérieur gauche. 2 Maintenez le bouton de la souris enfoncé puis glissez le curseur sur la page. Des lignes de repère affichent la position de la nouvelle origine de la règle. 3 Relâchez le bouton de la souris pour fixer le nouveau point d'origine de la règle. Restaurer l'origine des règles Pour restaurer le point d'origine des règles à l'angle supérieur gauche, doublecliquez simplement dans l'angle supérieur gauche de la fenêtre. Les Guides Freeway vous permet de placer des guides temporaires pour vous aider à positionner les blocs lorsque vous faîtes la mise en page. Ces lignes peuvent être affichées ou masquées pendant que vous travaillez, mais elles ne seront jamais publiées sur vos pages web. Vous pouvez aligner des objets en utilisant les guides. Ajouter un guide Pour ajouter un guide sur la page : 1 Vérifiez que les règles sont visibles sur les bords gauches et supérieur de la fenêtre. Si ce n'est pas le cas, sélectionnez Règles dans le menu Affichage. 2 Vérifiez que les guides sont visibles. Si ce n'est pas le cas, sélectionnez Guides dans le menu Affichage. 3 Pour ajouter un guide vertical, cliquez sur la règle verticale située le long du bord gauche de la fenêtre du document, maintenez la souris enfoncée puis déplacez le curseur vers l'intérieur de la page. Pour ajouter un guide horizontal, cliquez sur la règle horizontale située le long du bord supérieur de la fenêtre du document, maintenez la souris enfoncée puis déplacez le curseur vers l'intérieur de la page. Une ligne noire indiquant la position actuelle est affichée pendant que vous bougez la souris. 4 Lorsque vous avez atteint la position souhaitée, relâchez le bouton de la souris pour ajouter le guide. Règles, grilles et guides 40 Modifier les couleurs des guides, grilles et marges La couleur par défaut pour les guides est verte clair et celle par défaut pour les grilles est bleue. Vous pouvez modifier ces couleurs : 1 Sélectionnez Préférences... dans le menu Fichier. 2 Cliquez sur l'icône Grilles/Guides. 3 Si vous souhaitez utiliser une couleur différentes pour les guides verticaux et les guides horizontaux, décochez la case Lier. 4 Cliquez sur les couleurs des guides, grilles et marges pour afficher le nuancier et sélectionner une nouvelle couleur. 5 Cliquez sur OK pour valider la couleur puis cliquez à nouveau sur OK pour fermer la fenêtre des préférences. Déplacer un guide avec la souris Utilisez l'outil Sélection pour déplacer le guide à la nouvelle position puis relâchez la souris. Lorsque vous essayez de déplacer un guide, vous pouvez sélectionner par erreur un cadre proche ou la règle à la place du guide. Si cela se produit, essayez de saisir le guide d'un autre point. Si vous souhaitez déplacer le guide vers une nouvelle partie de la page qui n'est pas visible actuellement, maintenez la touche Majuscule enfoncée pendant que vous glissez le guide pour permettre à la fenêtre de défiler automatiquement. Déplacer un guide à l'aide valeurs numériques Double-cliquez sur le guide déjà existant pour afficher le dialogue Guide. Entrez une nouvelle valeur pour la position du guide par rapport au point d'origine de la règle puis cliquez sur OK. Supprimer un guide Pour supprimer un guide, utilisez l'outil Sélection pour glisser le guide souhaité en dehors de la page. Aligner un bloc sur un guide Vous pouvez rendre les guides magnétiques, ainsi lorsqu'un bloc sera approché d'un guide ou d'une ligne de la grille, il se sera automatiquement aligné sur celui-ci. L'alignement sur les guides est activé par défaut, vous pouvez désactiver cette fonction avec Guides magnétiques dans le menu Affichage. Règles, grilles et guides 41 Modifier le pas du magnétisme des guides et de la grille Par défaut, la distance du magnétisme est réglée sur 5 pixels pour les guides et les lignes de la grilles, mais cette valeur peut être changée dans le dialogue Préférences : 1 Sélectionnez Préférences... dans le menu Fichier. 2 Cliquez sur l'icône Grilles/Guides. 3 Entrez la valeur à utiliser en pixels dans le champ Pas du magnétisme dans la section Guides et dans la section Grilles. 4 Cliquez sur OK. Masquer et afficher les guides et la grille Vous trouverez peut-être utile de masquer les guides et la grille lorsque vous travaillez sur un document. Pour cela, sélectionnez Guides dans le menu Affichage. Les guides et la grille sont alors masqués dans le document. Cependant le magnétisme des guides et de la grille reste actif. Pour afficher à nouveau les guides et la grille, sélectionnez Guides dans le menu Affichage. Afficher les guides et la grille au-dessus ou en dessous Vous pouvez afficher les guides et les lignes de la grille au-dessus ou en dessous des blocs de la page. Pour modifier la position d'affichage des guides et de la grille, sélectionnez ou non Guides devant dans le menu Affichage. La Grille Pour vous aider à positionner les blocs ou la règle, vous pouvez mettre en place une grille composée de lignes espacées de manière régulière. Vous pouvez utiliser ces grilles sur une seule page ou sur le document entier. Si vous souhaitez l'utiliser sur une seule page, vous pouvez indiquer un point de départ et une limite pour décaler la grille à partir du bord de la page ou de la marge. Règles, grilles et guides 42 Créer une grille horizontale ou verticale Pour ajouter une grille horizontale ou verticale : 1 Sélectionnez Grille... dans le menu Page. 2 Dans le menu Appliquer à vous pouvez choisir d'appliquer la grille à la page actuelle ou au document entier. 3 Activez le type de grille que vous souhaitez en cochant Vertical et/ou Horizontal. 4 Indiquez l'espacement des lignes dans les champs Largeur et Hauteur. 5 Cliquez sur le bouton Appliquer pour afficher la grille et conserver le dialogue Grille ouvert ou cliquez simplement sur le bouton OK si vous avez terminé les réglages. La nouvelle grille créée est affichée au-dessus de la page. Note : Si la nouvelle grille ne s'affiche pas, vérifiez le réglage de Freeway. Sélectionnez "Guides" dans le menu "Affichage" pour afficher ou masquer la grille. Supprimer une grille Pour supprimer une grille existante : 1 Sélectionnez Grille dans le menu Page. 2 Décochez les cases appropriées. 3 Cliquez sur Appliquer. Règles, grilles et guides 43 Note : Cela réinitialise les réglages du dialogue "Grille" au réglages par défaut. Le dialogue Grille propose aussi un bouton Initialiser. Si la grille de la page actuelle est différente de celle de la maquette, les réglages sont réinitialisés à ceux de la maquette. Si vous éditez la grille de la maquette, les réglages seront réinitialisés à ceux du document. Les marges Vous pouvez définir des marges pour votre document en utilisant le dialogue Grille. Cela peut vous aider à placer de manière cohérente les blocs des différentes pages. Les marges peuvent être modifiées sur n'importe quelle page ou sur la maquette. Vous pouvez également les appliquer au document entier. Pour ajouter des marges : 1 Sélectionnez Grille dans le menu Page. 2 Entrez les valeurs souhaitées pour les marges hautes, basse, gauche et droite puis cliquez sur OK. Pour effacer une marge, réglez sa valeur à 0 pt. 44 Mise en page flexible Mise en page flexible Freeway est particulièrement efficace pour créer des mises en pages qui sont reproduites aussi précisément que possible dans les limites imposées par le HTML. Lorsque vous éditez un site dans Freeway, vous pouvez être quasiment certain que le positionnement horizontal et vertical des différents blocs sur la page seront reproduits précisément, quel que soit le navigateur utilisé. Cependant, dans certaines situations, la mise en page verticale de votre page peut varier dans le navigateur web. Ceci peut se produire lorsque vous placez du texte dans un bloc HTML sur une page Freeway, car ce texte pourra s'étendre ou se contracter verticalement en fonction du navigateur utilisé, des polices disponibles et de la plate-forme utilisée pour consulter la page. Si le texte d'un bloc HTML occupe plus de place que prévu, votre mise en page risque de se déformer verticalement d'une manière inattendue. Ceci peut avoir pour effet de détruire la mise en page, ce qui peut être frustrant pour un graphiste qui souhaite avoir un contrôle total sur l'apparence de la page. Freeway peut également utiliser la nature flexible du HTML pour produire une mise en page variable. Par exemple, si vous souhaitez centrer horizontalement une image sur la page, deux possibilités sont disponibles. La première consiste à centrer horizontalement tous les blocs HTML de la page, la seconde consiste à utiliser un bloc HTML de largeur variable pour la mise en page. Cadrage de la page Par défaut, Freeway crée des pages de taille fixe et les blocs de ces pages sont positionnés par rapport au bord gauche de la fenêtre du navigateur. Cela signifie que si la fenêtre du navigateur est plus large que la page créée dans Freeway, il y aura un espace vide entre le contenu de la page et le bord droit de la fenêtre du navigateur. Freeway crée des pages qui seront alignées à gauche dans la fenêtre des navigateurs. Il est également possible de centrer le contenu de la page dans la fenêtre du navigateur, ou même de l'aligner à droite. Ces options ouvrent un grand nombre de possibilités très intéressantes pour créer votre site. Mais vous ne devriez pas utiliser ces options si la mise en page repose sur un alignement précis des blocs par rapport à l'image de fond de la page. Les images de fond débutent toujours dans l'angle supérieur gauche de la fenêtre du navigateur, elles ne peuvent pas suivre l'alignement du contenu de la page si vous le centrez ou l'alignez à droite. Modifier le cadrage de la page 1 Affichez la page ou la maquette dont vous souhaitez modifier le cadrage. 2 Dans l'onglet Page de la palette Spécifications, recherchez le menu Cadrage, sélectionnez l'une des options suivantes : Mise en page flexible 45 • - Gauche : positionne le contenu de la page par rapport au bord gauche de la fenêtre du navigateur. • - Centrer : centre le contenu de la page dans la fenêtre du navigateur. • - Droite : positionne le contenu de la page par rapport au bord droit de la fenêtre du navigateur. 3 Lorsque la page sera prévisualisée dans le navigateur web, son contenu sera positionné en fonction du cadrage choisi. Note : l'effet de ces changements n'est pas visible dans Freeway. Les changements sont visibles lorsque la page est affichée dans un navigateur. L'espace inutilisé entre les blocs placés sur la page et les bords de la page sera supprimé ainsi : • Pages cadrées à gauche : l'espace inutilisé à droite est ignoré. • Pages centrées : l'espace inutilisé à gauche et à droite est ignoré. • Pages cadrées à droite : l'espace inutilisé à gauche est ignoré. Vous pouvez afficher les tableaux de mise en page créés par Freeway au moment de la publication (pour savoir si un espace inutilisé est ajouté ou ignoré) en sélectionnant Mise en page HTML dans le menu Affichage. Les tableaux de mise en page sont affichés en pointillés. Note : le cadrage à droite d'une page HTML n'est pas géré dans Netscape Navigator 2.0. Blocs flexibles Dans une page centrée, la sélection Mise en page HTML dans le menu Affichage provoque l'affichage des tableaux utilisés par Freeway lors de la génération du code HTML de cette page. Si une page est centrée, la totalité des blocs de cette page seront placés au centre dans le navigateur. Comment faire si vous souhaitez placer un bloc à gauche, un autre à droite et un troisième au centre ? Pour accomplir cette tâche sans créer de tableau vous devez utiliser des blocs à largeur variable. Comportement des blocs flexibles Principalement deux méthodes permettent d'utiliser les blocs HTML flexibles : D'abord, les blocs HTML peuvent avoir une largeur variable. Cela signifie que leur largeur variera en fonction de la largeur de la fenêtre du navigateur, au lieu d'utiliser un largeur fixe. En effet, ils s'agrandiront automatiquement pour utiliser l'espace inutilisé dans la fenêtre du navigateur. Cependant, les blocs à largeur variable ne sont pas totalement flexibles. Ils ont une taille minimum, déterminée par la taille actuelle du bloc dans la page. Peu importe comment la fenêtre du navigateur sera redimensionnée, les blocs HTML à largeur variable 46 Mise en page flexible ne peuvent pas occuper une largeur (en pixels) inférieure à celle définie dans Freeway. Ensuite, les blocs HTML peuvent avoir une hauteur variable. Comme pour la variabilité horizontale, les blocs HTML variables en hauteur le sont dans une certaine limite, ils occuperont toujours au moins la hauteur fixée dans la page Freeway. Si leur contenu grandit, ils s'agrandiront automatiquement verticalement. Donc rendre un bloc HTML flexible verticalement consiste à transforme un bloc ayant une hauteur fixe (qui s'agrandit uniquement en fonction de son contenu) en un bloc de hauteur totalement variable (qui s'agrandit en fonction de la taille de la fenêtre du navigateur). Créer des blocs flexibles Seuls les blocs HTML peuvent avoir des tailles variables. Créer un bloc de largeur variable Pour créer un bloc de largeur variable : 1 Créez ou sélectionnez le bloc. 2 Dans la palette Spécifications, cliquez sur l'onglet Exportation. 3 Cochez la case Largeur extensible. 4 Lorsque la page sera publiée, ce bloc HTML aura une largeur variable, il pourra s'agrandir pour occuper l'espace inutilisé dans la fenêtre du navigateur. Souvenez-vous que les blocs flexibles de largeur variable possèdent toujours une largeur minimum et, bien qu'ils puissent s'agrandir dans la fenêtre des navigateurs, ils ne pourront jamais se réduire en dessous de cette taille. Attention : Les blocs à largeur variable peuvent casser horizontalement les mises en page de la même manière qu'une augmentation de la taille des polices dans le navigateur peut casser verticalement une mise en page. Vous pouvez utiliser des tableaux imbriqués pour éviter aux blocs d'être séparés. Pour plus d'information sur les tableaux imbriquées, consultez Créer des tableaux imbriqués. Contrôler la largeur variable d'un bloc Vous voudrez peut être contrôler plus précisément la largeur des blocs HTML de taille variable, par exemple contrôler la largeur d'un bloc en fonction de la largeur totale de la fenêtre. Cela peut être assez compliqué à réaliser et demande de l'expérience pour y parvenir. Il est important de comprendre que votre mise en page, donc la largeur d'un bloc HTML de taille variable, est prise en charge par un tableau de mise en page lors de la génération du code HTML. Ce tableau sera de la taille réelle du bloc dans la page, et non pas de la taille du bloc affiché dans Freeway. Cela Mise en page flexible 47 peut produire des effets inattendus si un bloc de largeur variable placé à droite de la page occupe subitement la largeur totale de la page. Si vous placez des blocs de taille variable sur une page, il est nécessaire de vous assurer que suffisamment d'espace libre est inclus dans le tableau de mise en page. Cette technique peut être utile pour créer une marge à droite d'un bloc HTML de largeur variable contenant du texte. Contrôler l'apparence d'un bloc de largeur variable 1 Créez ou sélectionnez le bloc à modifier. 2 Dans la palette Spécifications, cliquez sur l'onglet Exportation. 3 Cochez la case Largeur extensible. 4 Créez un deuxième bloc occupant l'espace entre le premier bloc et la limite de la zone dont la taille variera (c'est à dire habituellement la marge droite de la page). 5 Lorsque la page sera publiée, le bloc HTML aura une taille variable et il occupera l'espace inutilisé dans la fenêtre du navigateur mais le bloc à sa droite l'empêchera d'utiliser l'espace situé à sa droite. Astuce : cette technique peut aussi être utilisée pour conserver un bloc le long du bord droit de la fenêtre du navigateur quelle que soit sa taille. Créer un bloc de hauteur variable Pour créer un bloc de hauteur variable : 1 Créez ou sélectionnez le bloc. 2 Dans la palette Spécifications, cliquez sur l'onglet Exportation. 3 Cochez la case Hauteur adaptable. 4 Lorsque la page sera publiée, ce bloc HTML aura une hauteur variable, il pourra s'agrandir pour occuper l'espace inutilisé dans la fenêtre du navigateur. Comme indiqué précédemment, l'option Hauteur adaptable modifie la manière dont les blocs HTML sont affichés dans le navigateur web pour qu'ils se réduisent juste à la taille nécessaire à leur contenu (ou au contenu des blocs adjacents) lorsqu'ils sont affichés dans le navigateur. Les blocs de hauteur variable sont utiles lorsqu'un bloc HTML contenant du texte est suivi par d'autres blocs sur la page. Si le bloc HTML utilise une 48 Mise en page flexible hauteur variable, il s'adaptera à la hauteur du texte qu'il contient, peu importe la taille de la police du navigateur. Cela évite d'afficher un espace inutilisé entre ce bloc HTML et les blocs suivants. Vous devez laisser cette option décochée si vous souhaitez que le bloc HTML occupe une hauteur fixe. Cela sera probablement le cas de la plupart des blocs ne contenant pas de texte. Note : Les blocs qui n'ont pas une hauteur variable s'agrandissent toujours pour recevoir leur contenu. En activant, l'option "Hauteur adaptable", ils sont aussi capable de se réduire. Travailler avec des Blocs Flexibles Cet exemple montre comment centrer un bloc en utilisant des blocs de tailles variables. 1 Vérifiez que le cadrage de la page positionne son contenu à gauche en cliquant sur la page puis en vérifier le menu Cadrage de l'onglet Page de la palette Spécifications. 2 Créez un bloc HTML ou Graphique de 150 x 150 pixels sur la page. 3 Créez un second bloc HTML d'une largeur de 100 pixels et d'une hauteur de 150 pixels et placez-le juste à la droite du premier bloc. Remplissez-le avec une couleur différente, en le conservant sélectionné cliquez sur l'onglet Export de la palette Spécifications puis cochez Largeur extensible. 4 Copiez ce dernier bloc créé et placez sa copie à gauche du premier bloc. Vous pouvez faire cela en copiant/collant le blanc ou en sélectionnant puis en le glissant en maintenant la touche Option enfoncée (en appuyant sur la touche Option pendant le déplacement d'un bloc, cela crée une copie). 5 Sélectionnez les trois blocs puis déplacez-les sur le bord gauche de la page. Prévisualisez la page dans un navigateur. Lorsque vous redimensionnerez la fenêtre, vous constaterez que les blocs à largeur variable sont utilisés pour conserver le premier bloc au centre de la page. Vous pouvez également créer un bloc dont le positionnement sera variable mais pas forcément centré. Par exemple, si vous suivez la technique expliquée précédemment mais si vous attribuez une largeur de 50 pixels au bloc de droite et si vous conservez une largeur de 100 pixels au bloc de gauche, vous Mise en page flexible constaterez que le premier bloc sera conservé à une distance proportionnelle du bord droit de la fenêtre. 49 50 Utiliser les couleurs Utiliser les couleurs L'une des différences importante entre l'impression de documents et la publication sur le web est la méthode utilisée pour définir les couleurs et le nombre de couleurs disponibles. Bien que de nombreux écrans gèrent des milliers ou des millions de couleurs, de nombreux ordinateurs utilisés pour consulter des sites web sont des PC utilisant Windows avec 256 couleurs, et l'utilisation de téléphones portables et de terminaux Internet est en augmentation. Cela peut entraîner un ajustement inattendu des couleurs sur l'écran du visiteur et détériorer la qualité des couleurs. Freeway vous permet de définir des couleurs et de les appliquer aux fonds ainsi qu'aux textes et autres blocs créés sur la page. La méthode habituelle pour modifier une couleur consiste à utiliser les menus proposés dans la palette Spécifications. La palette Couleurs offre aussi une alternative pratique. Couleurs standard du Web Les 256 couleurs standard sont légèrement différentes entre les Mac et les PC utilisant Windows, donc si vous voulez être sûr que les visiteurs voient les couleurs telles que vous le souhaitez, vous devrez utiliser les 216 couleurs utilisables sur le web, particulièrement pour les aplats tels que les fonds de bloc ou de page. Ces 216 sont automatiquement proposées lorsque vous souhaitez utiliser une nouvelle couleur dans Freeway. Il est aussi possible d'utiliser d'autres couleurs, en dehors de ces 216 couleurs. Sur le web, les couleurs sont définies en RVB avec des nombres en hexadécimal (base 16). L'hexadécimal utilise les chiffres de 0 à 9 et les lettres de A à F pour symboliser les nombres de 0 à 15. Les couleurs utilisables sur le web sont définies en combinant six pourcentages possibles pour le rouge, le vert et le bleu. Ces pourcentages sont 100 %, 80 %, 60 %, 40 %, 20 % et 0 %. Les nombres en hexadécimal correspondant à ces pourcentages sont FF pour 100 %, CC pour 80 %, 99 pour 60 %, 66 pour 40 %, 33 pour 20 % et 00 pour 0 %. Ces pourcentages peuvent aussi être utilisés pour fixer des valeurs en rouge, vert, bleu dans Photoshop. Les valeurs correspondantes sont 255, 204, 153, 102, 51 et 0. Seules 216 combinaisons des valeurs contenues dans ce tableau sont possibles lorsqu'on utilise les trois composantes rouge, vert et bleu, ces combinaisons forment les 216 couleurs utilisables sur le web. Chaque couleur composée en RVB en utilisant une combinaison des valeurs ci-dessus est utilisable sur le web et sera reproduite sans dégradation. Vous pouvez utiliser la palette des couleurs web lorsque vous modifiez les couleurs des blocs Graphiques pour la publication des images GIF ou PNG. Cela peut dégrader la qualité de l'image mais le résultat sera meilleur avec un affichage en dessous des millions de couleurs pour les images GIF ou PNG. Utiliser les couleurs 51 Une palette adaptative donne de meilleurs résultats dans la majorité des cas mais les résultats sont moins prévisibles car l'image peut utiliser des couleurs n'appartenant pas aux couleurs standard du web. Couleurs temporaires et couleurs permanentes Les couleurs affichées dans la palette Couleurs ou dans les menus de la palette Spécifications peuvent être soit temporaires soit permanentes : • Les couleurs temporaires apparaissent avec une police normale dans la palette Couleurs. • Les couleurs temporaires sont détruites lorsqu'elles ne sont plus utilisées. Vous pouvez les transformer en couleurs permanentes pour les éviter cela (voir Transformer une couleur temporaire en permanente). • Les couleurs permanentes apparaissent avec un nom en gras dans la palette Couleurs. Les couleurs permanentes par défaut sont Sans, Noir, Blanc, Cyan, Magenta, Jaune, Rouge, Vert et Bleu. La transparence (voir Texte transparent) n'est disponible que pour les textes des blocs Graphiques. • Les couleurs permanentes sont conservées dans le document, même si elles ne sont pas utilisées actuellement. La palette Styles La palette Couleurs propose un onglet Couleurs du document et un onglet Palette web. Changez d'onglet en cliquant sur les onglets. Onglet Couleurs du document Vous pouvez créer de nouvelles couleurs et les ajouter aux couleurs du document dans la palette Couleurs. Les couleurs appliquées aux blocs du document sont affichées automatiquement dans cette liste. Les couleurs affichées en gras sont permanentes, tandis que celles écrites dans un style normal sont temporaires. Les couleurs ajoutées dans la liste au cours de votre travail et les nouvelles couleurs crées peuvent être modifiées, vous 52 Utiliser les couleurs pouvez les modifier ou les supprimer de la palette. Les couleurs incluses par défaut ne sont pas modifiables. Onglet Couleurs du Web Pour afficher les couleurs utilisables sur le web, cliquez sur l'onglet Palette Web dans la palette Couleurs. Pour appliquer l'une de ces couleurs, sélectionnez le bloc à modifier puis cliquer sur sa nouvelle couleur dans la liste des couleurs web. Les couleurs appliquées au texte et au contour du bloc sont affichées avec un cadre noir lorsque le bloc est sélectionné. Vous ne pouvez pas ajouter de nouvelles couleurs à la liste des couleurs utilisables sur le web, en revanche les couleurs web utilisées dans le document sont ajoutées à la liste des couleurs du document. Le Menu de la palette Couleurs Le menu de la palette Couleurs contient les commandes permettant de gérer les couleurs. Créer une Couleur La sélection de Nouvelle couleur... dans le menu de la palette Couleurs affiche le dialogue Couleur qui donne la liste des couleurs web. De plus, ce dialogue vous permet de visualiser et de modifier les valeurs RVB (en hexadécimal) des couleurs et vous permet de leur attribuer un nom. Vous pouvez également cliquer sur le bouton Couleur... pour afficher le nuancier et l'utiliser pour créer une nouvelle couleur. Lorsque le nuancier de Mac OS 8 ou 9 est affiché, vous pouvez maintenir la touche Option enfoncée pour le curseur pipette qui permet de sélectionner une couleur qui est affichée ailleurs à l'écran. En sélectionnant Autre... dans les menus qui permettent de sélectionner les couleurs dans la palette Spécifications, ce même dialogue permettant de choisir une couleur s'affichera. De même, le bouton qui permet de créer une nouvelle couleur en bas à gauche de la palette Couleurs provoque l'affichage de ce dialogue. Modifier une couleur Sélectionnez Editez les couleurs... dans le menu de la palette Couleurs pour afficher le dialogue permettant de modifier la couleur. Vous pouvez également cliquer sur le bouton d'édition des couleurs en bas à gauche de la palette Couleurs. Dans cette fenêtre, vous pourrez gérer la liste des couleurs personnalisées définies dans le document. Par exemple, vous pourrez dupliquer ou supprimer une couleur existante. Utiliser les couleurs 53 Nuancier La commande Nuancier... provoque l'affichage du nuancier de Mac OS permettant d'utiliser l'une de ses fonctions pour sélectionner une couleur. En sélectionnant une couleur, vous créerez une nouvelle couleur permanente dans la liste des couleurs du document. Afficher héxa Sélectionnez Afficher héxa pour afficher les valeurs RVB des couleurs personnalisées dans l'onglet Couleurs du document à côté de chaque couleur, en utilisant des valeurs hexadécimal. Couleurs Internet L'option Couleurs Internet est cochée par défaut dans le menu de la palette Couleurs. Lorsqu'elle est activée, les couleurs qui n'appartiennent pas aux couleurs web sont précédées d'une case à cocher qui permet de les remplacer automatiquement par la couleur web la plus proche. Appliquer une couleur Ce paragraphe explique comment appliquer une couleur à un texte ou à un bloc dans un document Freeway. Pour modifier la couleur de fond d'une page, consultez Modifier la couleur de fond d'une page. Vous pouvez colorer le texte et les blocs en appliquant : • Une couleur déjà existante dans le document. 54 Utiliser les couleurs • Une nouvelle couleur créée ou modifiée. • Une couleur importée à partir d'un autre document Freeway. Vous pouvez utiliser les onglets Couleurs du document ou Couleurs du web de la palette Couleurs, les menus permettant de changer les couleurs dans la palette Spécifications, les menus de Freeway et les dialogues pour appliquer une nouvelle couleur. Vous pouvez, par exemple, sélectionner simplement un bloc puis cliquer sur une couleur dans l'un des onglets de la palette Couleurs (si la palette Couleurs n'est pas déjà visible à l'écran, sélectionnez Couleurs dans le menu Fenêtre). En haut de la palette Couleurs, il y a un menu Appliquer à qui peut être utilisé pour modifier couleur du fond, de la bordure, du texte, du fond de texte, du premier plan et de la page. Ces options sont décrites plus loin dans ce chapitre. Appliquer une couleur au texte La technique la plus simple pour modifier la couleur du texte consiste à sélectionner le texte puis à choisir une couleur dans le menu Couleur de la palette Spécifications. Vous pouvez utiliser cette technique pour afficher des mots de différentes couleurs dans un même bloc. Appliquer une couleur à un bloc Sélectionnez le bloc (vous pouvez aussi sélectionnez le texte contenu dans le bloc puis choisir Fond dans le menu Appliquer à) puis choisissez la nouvelle couleur dans la palette Couleurs ou à l'aide de la palette Spécifications. Lorsque le bloc est sélectionné, sa couleur actuelle est sélectionnée dans la liste des couleurs. Si plusieurs blocs utilisant des couleurs de fond sont sélectionnés alors chaque couleur utilisée sera sélectionnée dans la palette Couleurs. Appliquer une couleur à la bordure d'un bloc Sélectionnez le bloc puis choisissez Bordure dans le menu Appliquer à située en haut de la palette Couleurs. Cliquez sur une couleur dans la palette Couleurs. Si le bloc ne possède pas encore de bordure (une bordure peut être ajoutée en sélectionnant Bordure... dans le menu Bloc), une bordure de 1 point sera ajoutée. Seuls les blocs Graphiques peuvent utiliser une bordure. Créer une nouvelle couleur Vous pouvez utiliser le nuancier pour créer une nouvelle couleur et l'ajouter à la liste des couleurs du document dans la palette, ou éditer une couleur déjà existante. Le nuancier vous propose également différentes méthodes pour choisir la couleur. Pour créer une nouvelle couleur, vous pouvez entrer des valeurs hexadécimales ou afficher simplement le nuancier, pour cela vous disposez de trois méthodes : • Sélectionnez Couleurs... dans le menu Edition, cliquez sur Ajouter puis sur Couleur.... Utiliser les couleurs 55 • Sélectionnez Nouvelle couleur... dans le menu de la palette Couleurs puis cliquez sur Couleur.... • Sélectionnez Nuancier... dans le menu de la palette Couleurs. Le nuancier s'affiche avec ses différentes méthodes pour choisir une couleur. Pour utiliser les différentes méthodes de sélection, cliquez sur l'une des icônes dans la colonne qui se trouve à gauche dans la fenêtre du Nuancier puis choisissez la couleur dans la partie droite. Modifier, dupliquer et supprimer une couleur Après avoir créé une couleur dans Freeway, vous pourrez la modifier, la dupliquer ou la supprimer. Modifier une couleur dans Freeway Vous pouvez modifier une couleur comme cela : 1 Vous devez d'abord afficher le dialogue Edition des Couleurs, pour cela vous pouvez : cliquer sur une couleur dans la liste des couleurs de la palette Couleurs tout en maintenant la touche Commande enfoncée, cliquer sur le bouton d'édition des couleurs en bas à gauche de la palette Couleurs, sélectionner Editer les couleurs... dans le menu de la palette Couleurs, sélectionner Couleurs dans le menu Edition, sélectionner Autre... dans les menus de couleur de la palette Spécifications. 2 Lorsque le dialogue Edition des Couleurs est affiché, choisissez une couleur. 3 Cliquez sur le bouton OK. Freeway modifie désormais la couleur dans la palette et les menus. Tout objet utilisant l'ancienne couleur utilisera désormais la nouvelle couleur. Dupliquer une couleur Vous pouvez dupliquer une couleur non éditable pour pouvoir modifier la nouvelle couleur créée. Vous pouvez dupliquer une couleur existante comme cela : 1 Sélectionnez Couleurs dans le menu Edition, ou dans la palette Couleurs sélectionnez Editer les couleurs... dans le menu ou cliquez sur le bouton d'édition des couleurs en bas à gauche. 2 Sélectionnez la couleur à dupliquer dans la liste. 3 Cliquez sur Dupliquer. Freeway crée une copie de la couleur puis ajoute la nouvelle couleur à la suite de son original en lui attribuant le nom de la couleur originale suivi de "copie". 56 Utiliser les couleurs Vous pouvez maintenant modifier la nouvelle couleur (par exemple changer son nom si vous le souhaitez). Supprimer une Couleur 1 Sélectionnez Couleurs dans le menu Edition, ou dans la palette Couleurs sélectionnez Editer les couleurs... dans le menu ou cliquez sur le bouton d'édition des couleurs en bas à gauche. 2 Sélectionnez la couleur à supprimer dans la liste. Si cette couleur peut être supprimée, le bouton Effacer sera activé. Vous ne pouvez pas modifier ou supprimer les couleurs non éditables (Sans, Transparent, Noir, Bleu, Cyan, Vert, magenta, Rouge, Blanc et Jaune). 3 Cliquez sur le bouton Effacer ou appuyer sur la touche Effacer ou Supprimer. Si la couleur était utilisée dans le document, Freeway affichera un dialogue vous permettant de sélectionner la couleur qui remplacera la couleur supprimée. 4 Sélectionnez cette couleur puis cliquez sur OK. 5 Cliquez sur OK pour fermer le dialogue Edition des couleurs. Freeway supprime la couleur de la liste. Si l'ancienne couleur était utilisée par des textes ou des images dans le document, Freeway la remplace par la nouvelle couleur choisie. Importer des couleurs Vous pouvez importer directement des couleurs dans un document Freeway. Importer des couleurs d'un autre document Freeway Pour importer les couleurs d'un autre document Freeway, vérifiez que des couleurs permanentes sont présentes puis suivez cette démarche : 1 Sélectionnez Couleurs dans le menu Edition, ou dans la palette Couleurs sélectionnez Editer les couleurs... dans le menu, ou cliquez sur le bouton d'édition des couleurs en bas à gauche. 2 Cliquez sur le bouton Importer.... 3 Trouvez puis sélectionnez le fichier contenant les couleurs à importer. 4 Cliquez sur OK. Freeway importe les couleurs contenues dans le document sélectionné puis les ajoute dans la palette Couleurs en tant que couleurs permanentes. Les couleurs importées conserveront leur nom original. Si des couleurs différentes de même nom sont déjà présentes dans le document actuel, ces couleurs à importer ne seront pas ajoutées. Dans ce cas, Freeway vous préviendra. Si vous le souhaitez, vous pouvez renommer les couleurs du document d'origine ou du document actuel pour pouvoir procéder à l'importation. Utiliser les couleurs 57 Transformer une couleur temporaire en permanente Pour rendre une couleur temporaire permanente, utilisez le dialogue d'édition des couleurs ou le dialogue Couleurs. Pour afficher le dialogue d'édition des couleurs : • Cliquez sur le bouton d'édition des couleurs en bas à gauche de la palette des couleurs. • Sélectionnez Editer les couleurs... dans le menu de la palette Couleurs. • Sélectionnez Couleurs... dans le menu Edition. Sélectionnez dans la liste la couleur à transformer puis cochez sa case dans la colonne Permanent. Pour utiliser le dialogue Edition des couleurs, cliquez sur une couleur dans la liste de la palette Couleurs en maintenant la touche Commande enfoncée puis cochez la case Permanent. Freeway transforme alors la couleur temporaire en couleur permanente et affiche son nom en gras dans la palette Couleurs. Cette couleur ne sera pas automatiquement effacée si elle n'est pas utilisée dans le document, contrairement à une couleur temporaire. 58 Les cadres Les cadres Les cadres peuvent faciliter la navigation et renforcer l'identité de votre site lorsqu'ils sont bien utilisés mais ils peuvent aussi perturber le visiteur s'ils sont mal utilisés. Par rapport à un site web dépourvu de cadres, l'ajout de cadres ne pose que quelques problèmes mineurs. Les cadres et les jeux de cadres? Les cadres permettent principalement une présentation différente de celle utilisée pour afficher une page HTML unique dans un navigateur web. Lorsque vous affichez une page HTML normale (c'est à dire sans cadres) cette page est la seule affichée dans la fenêtre du navigateur. Si vous souhaitez consulter deux pages ensembles, chacune doit être affichée dans une fenêtre séparée. Tandis qu'avec les cadres, une seule fenêtre du navigateur peut être utilisée pour afficher plusieurs pages HTML simultanément, en utilisant des fonctions pour séparer la fenêtre en différentes parties. Les différentes parties crées en séparant la fenêtre s'appellent des cadres, chaque cadre affiche une page HTML différente. Une des utilisations des cadres permet de créer une barre de navigation du site dans un premier cadre et le contenu du site dans un second cadre. Ainsi, si le contenu de la page est important et nécessite d'utiliser les barres de défilement, la barre de navigation restera visible. Habituellement, lorsque l'utilisateur clique sur un lien dans la barre de la navigation, la page correspondante est affichée dans le second cadre de la fenêtre. Pour simplifier, chaque cadre permet d'afficher une page web différente. Pour indiquer au navigateur comment la fenêtre doit être séparée et quelles pages HTML sont affichées dans chaque cadre, une page HTML spéciale est utilisée, elle est appelée Page avec cadres. Lorsque cette page est affichée dans un navigateur capable de gérer les cadres, cette page n'affiche pas son propre contenu, elle indique simplement comment la fenêtre doit être séparée et quelles pages doivent être affichées dans chaque cadre. C'est ce que l'on appelle la définition des cadres. 59 Les cadres Après avoir créé le jeu de cadres, vous disposez simplement d'un container pour les autres pages web. Il ne vous reste plus qu'à utiliser Freeway pour définir les liens dans ces cadres pour que, lorsque l'utilisateur clique sur un lien, la page correspondante s'affiche dans le cadre souhaité. Le jeu de cadres définit le nombre et la position des cadres qui seront créés dans la fenêtre du navigateur, ainsi que la façon dont chaque cadre devra se comporter. Vous pouvez indiquer : • Si une bordure doit être affichée entre les cadres, et dans ce cas, quelle sera sa largeur. • Si les cadres sont de taille fixe ou de taille proportionnelle par rapport à la taille de la fenêtre. • Si les barres de défilement doivent être affichées. • Si le cadre peut être redimensionné par le visiteur du site. Voici un résumé des mots clés utilisés pour comprendre les cadres : Cadre Page avec cadres une partie de la fenêtre du navigateur, lorsque celle-ci a été divisée pour afficher simultanément plusieurs pages HTML. : la page contenant les cadres. Les jeux de cadres peuvent être imbriqués pour créer des mises en page complexes. La page du jeu de cadre la page HTML contenant un ou plusieurs jeu de cadre. La page d’un cadre une page HTML affichée à l'intérieur d'un cadre dans le navigateur. : Le jeu de cadre peut également contenir des informations qui seront affichées uniquement dans les navigateurs ne pouvant pas afficher les cadres. Ce contenu ne sera pas vu par la majorité des visiteurs qui utilisent des navigateurs capables d'afficher les cadres. Il est important d'afficher ces informations de base pour permettre aux personnes qui utilisent des navigateurs ne gérant pas les cadres de vous contacter. Vous pouvez par exemple les rediriger vers une page de votre site dépourvue de cadre. Créer des liens dans les cadres Lorsque l'utilisateur clique sur un lien dans une page affichée dans un cadre, par défaut le navigateur affichera la nouvelle page dans le même cadre. Parfois, il est préférable de procéder autrement. Par exemple, si le lien pointe vers un autre site web ou lorsque des cadres séparés sont utilisés pour afficher d'une part des liens et d'autre part le contenu du site. Pour vous permettre de gérer cela, deux idées importantes sont liées à l'utilisation des cadres : d'une part la possibilité d'attribuer un nom à chaque cadre, et d'autre part la possibilité de définir la cible d'un lien pour provoquer 60 Les cadres l'affichage de la page dans un cadre différent de celui contenant la page du lien. En utilisant les cibles des liens, vous pouvez par exemple indiquer au navigateur que, au lieu de remplacer le contenu du cadre actuel par la nouvelle page, la nouvelle page doit être affichée ailleurs (dans un cadre différent de la même page ou dans une nouvelle page) ou remplacer complètement le contenu de la fenêtre actuelle (en faisant disparaître les cadres affichés actuellement). Pour afficher une page dans un cadre différent de celui contenant la page de ce lien, vous devez pouvoir indiquer au navigateur quel cadre sera la cible de ce lien. Pour cela, vous pouvez donner n'importe quel nom unique aux cadres que vous créez afin de les identifier. Après avoir nommé un cadre, vous pourrez choisir ce cadre pour cible des liens que vous créez. Vous pouvez choisir une cible différente pour chaque lien créé. Cependant, pour économiser du temps et vous faciliter la tâche, tous les liens d'une même page peuvent cibler par défaut le même cadre. Si vous avez choisi une cible par défaut pour la page, tous les liens n'ayant pas de cible particulière, afficheront les pages dans le cadre correspondant à la cible par défaut de la page. Les avantages des cadres Comme indiqué précédemment, un bon usage des cadres permet d'améliorer le site, de faciliter la navigation et de renforcer l'identité du site. Cela peut aussi faciliter la maintenance du site et résoudre des problèmes de mise en page. Rapidité accrue Lorsque des cadres séparés sont utilisés pour afficher d'une part une barre de navigation avec les éléments marquant l'identité du site et d'autre part le contenu du site, cela peut augmenter considérablement la vitesse. En effet, les éléments identiques placés sur chaque page ne sont plus rechargés à l'affichage de chaque page. Le contenu des pages devient aussi plus petit et plus simple, en conséquence le téléchargement et l'affichage de la page sera plus rapide. Navigation facilitée Lorsque les liens permettant la navigation sur le site se trouvent sur la même page que le contenu, cela peut compliquer la navigation des visiteurs, particulièrement si les pages peuvent défiler verticalement et faire disparaître les liens de l'écran. En utilisant un cadre séparé pour les liens permettant la navigation sur le site, même si le visiteur fait défiler le contenu du cadre principal, les liens resteront toujours visibles à l'écran. Les cadres 61 Identité du Site Comme pour les barres de navigation, lorsque les éléments marquant l'identité du site, tels que le nom de l'entreprise ou le logo, sont placés dans un cadre séparé, cela permet de les conserver toujours visibles à l'écran et de renforcer l'identité du site, l'utilisateur sait toujours où il se trouve. Si vous ajoutez un bandeau publicitaire sur le site, il pourra bénéficier de ces mêmes avantages s'il est placé dans un cadre séparé : la publicité restera constamment affichée à l'écran et sera plus efficace. Maintenance facilitée L'utilisation de cadres séparés pour la navigation et le contenu facilite la maintenance du site. Les pages affichées dans ces deux cadres offrent les mêmes avantages que les pages créées avec des maquettes dans Freeway, comme en PAO : les éléments répétitifs du site ne sont placés qu'une seule fois sur une seule page et ensuite ils sont répétés automatiquement. Donc si vous souhaitez effectuer une modification sur le site, vous devrez juste modifier une seule page, au lieu de chacune des pages. Avantages pour la mise en page Vous pouvez utiliser les cadres lorsque vous construisez un site pour résoudre des problèmes de mise en page qui pourraient être gênants sans l'utilisation des cadres. Voici quelques exemples : • Véritable alignement horizontal et vertical des blocs de la page dans la fenêtre du navigateur. • Découpage d'une image de fond à une taille précise. • Utilisation de différentes couleurs de fond dans une unique fenêtre du navigateur. • Utilisation de différentes couleurs de liens dans une unique fenêtre du navigateur. Inconvénients des cadres Bien que les avantages de l'utilisation de cadres soient importants, ils peuvent être longs à créer et à utiliser, particulièrement la première fois. Ils peuvent aussi perturber les débutants. Il y a également d'autres désavantages que vous devez comprendre pour peser le pour et le contre. Note : l'utilisation de cadres dans un site va à l'encontre des principes théoriques qui considèrent le web comme un espace d'information. Jakob Nielsen, un des principaux critiques du web, critique beaucoup l'utilisation des cadres. Son article "Cadres suck most of the time" est disponible à http://www.useit.com/alertbox/9612.html 62 Les cadres Compatibilité des Navigateurs A l'origine, les cadres étaient une extension propriétaire du langage HTML qui est devenue populaire chez les utilisateurs et les concepteurs de site bien avant qu'ils ne soient standardisés en HTML. Statistiquement parlant, lorsque ce manuel a été écrit, presque tous les visiteurs de votre site web utiliseront un navigateur capable de gérer les cadres. Les études montrent qu'entre 95 et 100 % des visiteurs de sites web utilisent des navigateurs capables de gérer les cadres. Cependant, vous devez vous souvenir que certains navigateurs permettent de désactiver la reconnaissance des cadres dans les préférences. Donc, même si quelqu'un utilise un navigateur capable de gérer les cadres, il se peut qu'il ne puisse pas voir les cadres de votre site si la reconnaissance des cadres est désactivée (volontairement ou par accident). Parmi les visiteurs qui utilisent un navigateur incapable de reconnaître les cadres, il y a les personnes qui utilisent des PDA, les handicapés qui utilisent des navigateurs à synthèse vocale et les personnes utilisant des navigateurs tels que Lynx ou Mosaic. Les concepteurs de sites web doivent décider s'ils souhaitent utiliser des cadres, fournir un contenu alternatif ou un site aux visiteurs utilisant des navigateurs incapables de reconnaître les cadres, ou au contraire s'ils peuvent ignorer le problème en fonction du site qu'ils sont en train de créer et des visiteurs qu'il concernera. Cela peut aider de voir ce que les autres créateurs de sites ont réalisé en créant des sites similaires au votre avec des cadres. Vous pouvez par exemple visiter les sites qui concernent les mêmes visiteurs pour regarder si le jeu de cadre principal de ces sites prévoit un contenu sans cadres. Une autre méthode consiste à utiliser un navigateur MacWeb ou Microsoft Internet Explorer 2.0 qui ne reconnaît pas les cadres afin de l'utiliser pour visiter de nombreux sites. Un grand nombre de sites utilisant des cadres ne propose aucune autre alternative pour les navigateurs incapables de gérer les cadres, sans sembler pénaliser les visiteurs. Création de signets L'une des grandes forces du web en tant que source d'information est sa possibilité de retrouver n'importe quelle page à n'importe quel moment en utilisant simplement son adresse, l'URL de la page. Cependant, lorsque vous consulter des pages à l'intérieur de cadres au lieu de les consulter dans des fenêtres individuelles, la fenêtre n'affiche plus l'URL de la page actuelle mais simplement l'URL de la page contenant le jeu de cadres affiché actuellement. Donc si vous créez un signet pour cette adresse après avoir consulté plusieurs pages dans les cadres, puis si vous utilisez à nouveau ce signet pour revenir sur le site, vous reviendrez aux pages initialement affichées dans le jeu de cadres. Beaucoup de personnes trouvent ce problème agaçant. Les cadres 63 D'autres problèmes sont liés à ce phénomène. A l'origine du web, les pages étaient autonomes (elles contenaient toutes les informations fournies par l'auteur, par exemple le contexte, les liens) donc lorsque l'utilisateur visitait à nouveau une page déjà visitée, les mêmes informations et les mêmes options étaient affichées. Cependant, dans un site où le logo, les liens et le contenu sont répartis dans différentes pages, cet aspect d'autonomie a disparu. Supposons que vous arriviez à créer un signet pour l'un des cadres du site, si vous utilisez ce signet par la suite, seule cette page sera affichée sans les autres cadres. Pour afficher exactement ce qui était affiché, vous devrez afficher à nouveau le jeu du cadre puis cliquer sur les mêmes liens pour arriver à la page souhaitée. Problèmes d'impression Les navigateurs web sont généralement très mauvais pour imprimer les pages web. De plus les problèmes qui s'ajoutent lorsque des cadres sont affichés les rendent presque impossibles à imprimer. Par exemple, est-ce que tous les cadres doivent être imprimés ou seuls certains ? Comment faire lorsque certains cadres utilisent des barres de défilement et pas d'autres ? Les concepteurs de sites web expérimentés fournissent généralement un deuxième type de présentation pour les pages lorsqu'ils pensent que les visiteurs du site pourront avoir besoin de les imprimer. Moteurs de recherche Les moteurs de recherches utilisent différentes techniques pour indexer les sites et rencontrent souvent des problèmes lorsqu'ils doivent indexer des sites utilisant des cadres. Pour connaître l'expérience des autres créateurs de site et pour savoir comment rendre un site indexable, consultez http://www.ehsco.com/opinion/19980209.html. Un autre problème peut aussi survenir si un visiteur arrive sur votre site à partir d'une page directement référencée par un moteur de recherche. Si le logo et la barre de navigation sont placés dans des cadres différents, les visiteurs qui arrivent directement sur une page de contenu ne sauront pas sur quel site ils se trouvent et ils ne pourront pas utiliser les liens de la barre de navigation pour se déplacer dans le site. Pour cette raison, de nombreux concepteurs de sites reprennent les principaux liens sous la forme de liens HTML en bas de chaque page, ainsi les visiteurs peuvent retrouver les pages importantes du site telles que la page d'accueil. Choix des utilisateurs Bien que de nombreuses personnes apprécient de consulter des sites dotés de cadres, particulièrement les sites qui utilisent les cadres de façon élégante, il y a un petit nombre de personnes qui n'aiment pas ce genre de sites. Pour certains, ce rejet est logique et basé sur certaines des raisons évoquées précédemment. Pour d'autres, il semble que ce soit simplement un choix Les cadres 64 personnel. Vous devez garder à l'esprit que tous les visiteurs n'apprécieront peut être pas votre nouveau site utilisant des cadres, quels que soient les avantages qu'ils procurent. Créer une Page avec des cadres La technique la plus simple pour créer un jeu de cadres dans Freeway consiste à sélectionner Nouvelle page avec cadres... dans le sous-menu Cadres du menu Page. Cela affiche un dialogue qui vous permet de faire votre choix parmi quelques jeux de cadres prédéfinis. Ensuite, une nouvelle page avec cadres sera ajoutée dans le document. Vous pouvez demander à Freeway de créer automatiquement ou non les pages des cadres. De plus, chaque page créée dans Freeway peut être transformée en page contenant un jeu de cadres en sélectionnant Partage horizontal ou Partage vertical. Chaque cadre peut accueillir une page du document ou une page HTML située en dehors du document, ce sont les pages des cadres. Si l'une des pages de cadre n'est pas présente lorsque la page avec cadres est affichée dans le navigateur, le navigateur peut afficher un message d'erreur. Freeway vous préviendra si vous tentez de publier des jeux de cadres avec des pages de cadres manquantes. La même page peut être affichée simultanément dans plusieurs cadres, c'est souvent le cas lorsque des pages vides (qui ne contiennent habituellement rien d'autre qu'une couleur de fond) sont utilisées dans un jeu de cadres. Les pages des cadres sont de simples pages HTML, bien qu'il soit aussi possible de placer un nouveau jeu de cadres à l'intérieur d'un page (pour créer ainsi des jeux de cadres imbriqués) ou n'importe quel autre fichier accessible sur le web (par exemple une image ou un fichier multimédia). Créer un jeu de cadres à partir des jeux prédéfinis 1 Sélectionnez Nouvelle page avec cadres... dans le sous-menu Cadres du menu Page ou cliquez sur l'icône Nouveau jeu de cadres en bas à gauche de la palette Cadres. Les cadres 65 2 Donnez un nom descriptif au jeu de cadre. 3 Sélectionnez l'encodage, vous travaillerez peut être avec des alphabets non latins. Pour plus d'informations, consultez Encodage du texte (Codage). 4 Sélectionnez la mise en page des cadres de votre choix puis indiquer l'épaisseur souhaitée pour les bordures des cadres. 5 Cochez Création page des cadres si vous souhaitez que Freeway crée également les pages qui seront affichées à l'intérieur des cadres et sélectionnez la maquette utilisée pour ces pages. 6 Cliquez sur OK. Une nouvelle page avec cadres sera créée dans le document, les cadres seront dotés de noms et d'attributs par défauts. Afficher les pages, le jeu de cadres et le contenu sans cadres Après avoir créé le jeu de cadres, vous ne verrez plus une seule page dans Freeway mais le jeu de cadres sur lequel vous travaillez. L'onglet Page en haut de la fenêtre est remplacé par deux nouveaux onglets : Cadres et Sans cadres. Vous pouvez travailler dans chaque cadre tel qu'il apparaît dans la fenêtre, ou bien, vous pouvez utiliser l'onglet Liens ou la palette Site pour afficher la page souhaitée en cliquant sur son icône. Lorsqu'une page est affichée, les onglets Cadres et Sans cadres en haut de la fenêtre disparaissent pour laisser revenir Les cadres 66 l'onglet Page. Vous pouvez à nouveau afficher le jeu de cadres en cliquant sur son icône dans l'onglet Liens ou dans la palette Site. Transformer une page en jeu de cadres La technique décrite dans ce paragraphe peut être utile si vous souhaitez afficher l'une des pages déjà existantes lorsqu'un visiteur utilise un navigateur incapable de gérer les cadres. Cela crée un jeu de cadres vides, chaque cadre pourra ensuite afficher la page souhaitée. Transformer une page en jeu de cadres est simple : 1 Affichez la page qui sera transformée en jeu de cadres. 2 Sélectionnez soit Partage horizontal, soit Partage vertical dans le sousmenu Cadres du menu Page. Le contour habituel de la page ainsi que la table de montage vont disparaître, mais ils ne sont pas détruits, si vous effacer le jeu de cadre, le contenu initial de la page réapparaîtra. Le contenu initial de la page est transformé en contenu sans cadres qui sera affiché par les navigateurs incapables de gérer les cadres. Ce contenu sera quand même téléchargé par les navigateurs capables d'afficher les cadres donc il ralentira le téléchargement. Dans la palette Site, les pages contenant des jeux de cadres sont affichées avec une icône différente. Contenu sans cadres Le contenu sans cadres est affiché lorsqu'une page contenant un jeu de cadres est affichée par un navigateur incapable d'afficher les cadres, tel que Microsoft Les cadres 67 Internet Explorer 2.0, ou lorsqu'une telle page est affichée dans un navigateur dont l'affichage des cadres a été désactivé. Il y a deux méthodes pour créer le contenu sans cadres dans Freeway. D'abord, comme décrit précédemment, le contenu de chaque page transformée en jeu de cadres sera considéré comme le contenu sans cadres de ce jeu de cadres. Deuxièmement, vous pouvez modifier le contenu affiché sans les cadres d'un jeu de cadres déjà existant en cliquant sur l'onglet Sans cadres en haut de la fenêtre. Certains concepteurs de sites web ne prévoient aucun contenu sans cadres, cela peut être gênant pour les utilisateurs d'anciens navigateurs. Si aucun contenu sans cadres n'est spécifié, les visiteurs arrivant sur votre site ne verront absolument rien, pas même un message d'erreur s'ils utilisent un navigateur incapable d'afficher les cadres. Pour chaque jeu de cadres, vous pouvez définir un contenu sans cadres afin qu'il informe au moins les visiteurs pour leur expliquer que sans un navigateur capable d'afficher les cadres, ils ne pourront pas voir votre site. C'est une bonne idée de placer sur cette page votre adresse e-mail et les informations de base pour vous contacter. Vous pouvez aussi fournir une liste de liens pour accéder directement au contenu de votre site. Cela aide non seulement les visiteurs utilisant des logiciels incapables d'afficher les cadres, mais cela rendra aussi l'indexation de votre site web plus efficace par les moteurs de recherche. Options utilisables avec les cadres Les options permettant de modifier l'utilisation des cadres sont accessibles en bas du menu Page, dans la palette Spécifications et dans la palette Cadres. Remarquez qu'il peut y avoir un onglet Cadre dans la fenêtre Spécifications qu'il ne faut pas confondre avec la palette Cadres. Lorsqu'une page contenant un jeu de cadres est affichée, un panneau Page avec cadres est affiché dans la palette Spécifications, il est différent du panneau Page habituel. Ce panneau vous permet de donner un titre au jeu de cadres, changer le nom du fichier qui sera généré pour cette page et changer l'épaisseur des bordures entre les cadres dans la fenêtre du navigateur. Lorsqu'un cadre est sélectionné, vous pourrez également utiliser l'onglet Cadre dans la palette Spécifications qui propose des options sur ce cadre et le jeu de cadres qui le contient. Enfin, comme vous pouvez éditer une page affichée à l'intérieur d'un cadre dans un jeu de cadres, vous pouvez afficher l'onglet Page dans la palette Spécifications à côté du panneau Page avec cadres. Après avoir créé un jeu de cadres, vous pouvez : • Sélectionner l'un des cadres et indiquer la page qui sera affichée dedans. Cette page peut se trouver dans le document Freeway, mais elle peut aussi être un fichier HTML extérieur. Les cadres 68 • Partager un cadre pour qu'il puisse contenir d'autres cadres imbriqués. Les jeux de cadres imbriqués contenus dans des cadres ne sont pas obligés d'être disposés de la même manière que le jeu de cadres qui les contient. • Ajouter de nouveaux cadres dans le jeu de cadres courant, créer un jeu de cadres avec plusieurs cadres (les cadres ajoutés dans un jeu de cadres doivent respecter la même orientation verticale ou horizontale). • Modifier l'orientation des cadres dans le jeu de cadres actuel. • Modifier l'épaisseur de la bordure qui sépare les cadres. Afficher une page existante dans un cadre 1 Sélectionner le cadre en cliquant dedans. Un rectangle de sélection va apparaître autour du cadre, la palette Spécifications va notamment afficher un nouvel onglet Cadre. 2 Dans la partie Cadre de l'onglet Cadre de la palette Spécifications, sélectionnez la page que vous souhaitez afficher dans ce cadre à l'aide du menu Source. Le cadre affiche le contenu de cette page. Vous pouvez modifier les blocs de cette page comme si cette page était directement affichée dans Freeway. Créer une nouvelle page pour l'afficher dans un cadre 1 Sélectionner le cadre en cliquant dedans. Un rectangle de sélection va apparaître autour du cadre, la palette Spécifications va notamment afficher un nouvel onglet Cadre. 2 Dans la partie Cadre de la palette Spécifications, sélectionnez Autre... dans le menu Source. Le dialogue Source du cadre s'affiche. Les cadres 3 Cliquez sur le bouton Créer page puis sélectionnez la maquette qui sera utilisée pour créer la nouvelle page. 4 Cliquez sur OK. Le dialogue Nouvelle page s'affiche, entrez le nom de la page puis cliquez sur OK. 69 Le cadre affiche le contenu de cette page. Vous pouvez modifier les blocs de cette page comme si cette page était directement affichée dans Freeway. Afficher une page HTML extérieure dans un cadre Pour cela, vous devez d'abord connaître le nom de la page HTML que vous souhaitez afficher dans ce cadre ainsi que sa position par rapport à la page contenant le jeu de cadre actuel. Pour en savoir plus sur les adresses URL relatives, consultez Adresse relative. 1 Sélectionner le cadre en cliquant dedans. Un rectangle de sélection va apparaître autour du cadre, la palette Spécifications va notamment afficher un nouvel onglet Cadre. 2 Dans la partie Cadre de la palette Spécifications, sélectionnez Autre... dans le menu Source. Le dialogue Source du cadre s'affiche. 3 Cliquez sur le bouton URL puis tapez ou collez l'adresse URL du fichier que vous souhaitez afficher dans le cadre. L'adresse de cette page apparaîtra dans le cadre sur un fond coloré. Lorsque cette page sera affichée dans un navigateur, il essaiera de charger ce fichier pour l'afficher. Afficher et modifier des pages à l'intérieur d'un jeu de cadres Contrairement à d'autres éditeurs de sites web, Freeway vous permet de visualiser et de modifier le contenu des pages affichées dans les cadres, tant qu'elles se trouvent dans le même document Freeway et qu'elles ne contiennent pas elles-mêmes d'autres jeux de cadres. Cela vous offre un grand avantage pour créer votre site web, puisque vous pouvez visualiser le résultat final sans être obligé d'afficher constamment le résultat dans un navigateur web. La bordure de la page affichée dans le cadre est indiquée par une ligne en pointillés. Vous pouvez créer, modifier ou supprimer des blocs dans ces pages, entrer du texte ou modifier les attributs des blocs en utilisant la palette Spécifications, comme si cette page était affichée au lieu du jeu de cadres. Vous pouvez également prévisualiser d'autres pages à travers ces cadres sans les choisir comme page source de ces cadres. Sélectionnez un cadre ou un bloc contenu à l'intérieur d'un cadre puis maintenez la touche Commande enfoncée pendant que vous sélectionnez la page à prévisualiser dans le menu Page situé en bas de la fenêtre du document. Bien que vous n'ayez pas modifié la page source affichée dans ce cadre, la page sélectionnée apparaît dans ce Les cadres 70 cadre. Afin d'afficher à nouveau la page normale, sélectionnez la dans le menu Page en bas de la fenêtre en maintenant la touche Commande enfoncée, ou sélectionnez Sans cadres en haut de la fenêtre puis sélectionnez à nouveau le panneau Cadre. Créer un nouveau jeu de cadres dans un cadre Cette technique est nécessaire pour créer des cadres avec des orientations différentes de ceux qui sont affichés dans le premier jeu de cadres. 1 Sélectionnez le cadre en cliquant dedans. Un rectangle de sélection va apparaître autour du cadre. 2 Sélectionnez Partage horizontal ou Partage vertical dans le sous-menu Cadres du menu Page. Un jeu de cadres imbriqué sera créé, divisant le cadre en deux nouveaux cadres. Chaque nouveau cadre peut afficher une page ou être à nouveau divisé horizontalement ou verticalement. Ajouter un nouveau cadre dans le même jeu de cadres 1 Sélectionnez l'un des cadres existants. 2 Sélectionnez Insérer un cadre... dans le sous-menu Cadres du menu Page ou cliquez sur l'icône Nouveau cadre en bas à gauche de la palette Cadres. Un dialogue s'affiche vous permettant de choisir où le nouveau cadre doit être inséré. 3 Cliquez sur OK. Un nouveau cadre est ajouté dans le même jeu de cadres que celui contenant le premier cadre sélectionné. Ajouter un nouveau cadre avec la souris Il est également possible d'ajouter des cadres en utilisant la souris. Vous pouvez faire cela en maintenant la touche Option enfoncée pendant que vous réalisez un glisser-déposer à partir du bord de l'un des cadres. Un glisser-déposer avec la touche Option enfoncée entre deux cadres appartenant au même jeu de cadres ajoutera un nouveau cadre dans ce jeu de cadres. Un glisser-déposer avec la touche Option enfoncée entre un cadre et le bord de la fenêtre ajoutera un nouveau cadre dans ce jeu de cadres ou créera un nouveau jeu de cadres incluant le nouveau cadre et le jeu de cadres actuel. Les cadres 71 Modifier l'orientation d'un cadre 1 Sélectionnez un jeu de cadres ou un cadre. 2 Dans l'onglet Cadre de la palette Spécifications cochez ou non la case Vertical pour indiquer si le cadre doit être vertical ou horizontal. Supprimer un cadre 1 Sélectionnez le cadre. 2 Sélectionnez Supprimer le cadre dans le sous-menu Cadres du menu Page, ou appuyez sur la touche Effacer ou Supprimer, ou cliquez sur l'icône Corbeille de la palette Cadres. Le cadre sera supprimé. Si vous utilisez uniquement deux cadres, supprimer l'un d'entre eux provoquera la suppression du jeu de cadres et transformera la page contenant le jeu de cadres en une page normale. Si vous essayez de supprimer un cadre appartenant à un jeu de cadres ne comportant que deux cadres, Freeway vous avertira pour vous demander de confirmer. Sélectionner un cadre Pour sélectionner un cadre, cliquez dessus en utilisant l'outil Sélection. Vous pouvez aussi sélectionner un cadre en utilisant la palette Cadres. Si vous cliquez sur un cadre dans la fenêtre du document ou dans la palette Cadres il sera sélectionné. En cliquant sur la bordure qui sépare deux cadres, vous pourrez sélectionner le jeu de cadres. Si vous cliquez, sur une bordure située sur les bords de la page ou dans la palette Cadres, le jeu de cadres qui contient tous les cadres et éventuellement les autres jeux de cadres sera sélectionné. Un seul cadre ou un seul jeu de cadres peut être sélectionné à la fois. Astuce : En utilisant la palette Cadres, vous pouvez sélectionner le jeu de cadres contenant un cadre en cliquant sur le nom de ce cadre avec la touche Option enfoncée jusqu'à ce que le jeu de cadre souhaité soit sélectionné. Désélectionner un cadre Pour retirer la sélection au cadre actuel, vous pouvez cliquer à l'intérieur du cadre en maintenant la touche Majuscule enfoncée. Si vous cliquez en effectuant un glissé sur une partie inutilisée du cadre, le cadre perdra sa sélection, de même si vous cliquez sur un bloc à l'intérieur du cadre. Utiliser la palette cadres La palette Cadres peut être très utile pour visualiser la structure d'un jeu de cadres. Elle montre comment les différents jeux de cadres sont imbriqués, leur orientation et le nombre de cadres qu'ils contiennent. En fait, c'est une vue simplifiée des cadres qui vous permettra de voir comment les cadres et les jeux de cadres sont structurés. Les dimensions des cadres affichés dans la palette Cadres ne correspondent pas aux tailles réelles définies pour ces cadres. 72 Les cadres Cette palette affiche le cadre sélectionné ainsi que son nom, s'il en possède un. Lorsqu'un cadre est sélectionné, la palette Cadres affiche en cadre en gris foncé, au lieu de gris clair. Cependant, si un bloc est sélectionné ou si du texte est sélectionné à l'intérieur d'un cadre, ce cadre sera affiché en gris clair avec des rayures en diagonale dans la palette Cadres. Note : Il se peut aussi qu'un page soit prête à recevoir les instructions du clavier sans qu'un bloc soit sélectionné sur cette page, cela se produit par exemple quand vous faites un glissé avec l'outil Sélection sur cette page sans sélectionner d'objet. Cela peut être utile pour provoquer l'affichage de l'onglet Page dans la palette Spécifications en même temps que l'onglet Page avec cadres. Lorsqu'une page est sélectionnée de cette manière, son cadre est affiché en gris clair avec des rayures en diagonale dans la palette Cadres. Vous pouvez également utiliser la palette Cadres pour sélectionner individuellement cadres ou jeux de cadres. Cliquez sur un cadre dans la palette Cadres pour le sélectionner. Si vous cliquez en maintenant la touche Majuscule enfoncée sa sélection est inversée. Cliquez avec la touche Option enfoncée pour sélectionner le jeu de cadres contenant ce cadre. Vous pouvez également sélectionner un jeu de cadres en utilisant la palette Cadres pour cliquer sur la bordure qui sépare de cadre, ou sur la bordure proche du bord de la palette. Vous pouvez également utiliser la palette Cadres pour sélectionner des cadres invisibles. Ce sont des cadres qui ne peuvent pas être affichés actuellement car les autres cadres occupent trop de place dans la fenêtre. Modifier la taille d'un cadre Que la bordure d'un cadre soit visible ou non, vous pouvez modifier la taille d'un cadre dans Freeway. Vous pouvez soit utiliser la souris, soit entrer une valeur numérique pour redimensionner un cadre. Comme les cadres sont le résultat d'un partage de la fenêtre, et non pas des blocs indépendants, le redimensionnement d'un cadre provoquera aussi le changement de taille d'au moins l'un des autres cadres. Peu importe que vous utilisiez la souris ou que vous saisissiez des valeurs numériques pour modifier la taille d'un cadre, chaque cadre peut avoir une taille définie soit en fonction de la taille globale du jeu de cadres (taille proportionnelle), soit une taille fixe définie en pixels. Les cadres 73 Sauf si vous utilisez un jeu de cadres prédéfini, les cadres sont initialement créés avec une taille proportionnelle. Cela signifie que leur taille réelle, lorsqu'ils seront affichés, dépendra de la taille de la fenêtre du navigateur. Lorsqu'un visiteur redimensionnera la fenêtre du navigateur, la taille des cadres sera modifiée. Si un cadre devient trop petit pour afficher tout son contenu, il peut faire apparaître des barres de défilement pour permettre au visiteur de consulter le reste de son contenu. Il est aussi possible de définir un cadre qui n'affiche pas automatiquement des barres de défilement si son contenu ne peut pas être affiché en une seule fois. Vous pouvez également modifier le cadre pour qu'il ait une taille fixe au lieu d'une taille proportionnelle. Si tous les cadres utilisent une taille fixe, ils seront modifiés en fonction de la taille de la fenêtre du navigateur. Le résultat peut être imprévisible si le visiteur redimensionne la fenêtre de son navigateur en utilisant la souris. Généralement, le concepteur du site ne peut pas réagir si le visiteur modifie la taille de la fenêtre, à moins d'utiliser des scripts complexes en JavaScript. Dans ce cas, vous pouvez intervenir lorsqu'une nouvelle fenêtre est créée pour afficher une page afin de modifier la taille de la fenêtre. Il est impossible d'intervenir si le visiteur redimensionne la fenêtre. Pour ces raisons, vous devrez prendre en considération les différentes tailles de fenêtre de navigateur pour utiliser au moins un cadre de taille proportionnelle. Tirer partie des cadres proportionnels est l'une des étapes qui vous transformeront en concepteur de sites web expérimenté. Note : Si la mise en page d'un site est basée sur un positionnement précis des cadres, cela risque de poser des problèmes lors de l'affichage dans différents navigateurs. Les logiciels Netscape risquent de modifier la largeur des cadres d'une façon imprévisible. De plus, les logiciels Netscape ont tendance à faire défiler les cadres de 8 pixels lorsque le visiteur provoque leur rafraîchissement ou lorsqu'il les affiche à nouveau. Il sera nécessaire de tester avec précaution votre site avec différents navigateurs si vous souhaitez faire un usage intensif des cadres. Modification de la taille des cadres par le visiteur Lorsque les bordures des cadres sont affichées, par défaut, le visiteur peut utiliser sa souris pour redimensionner les cadres et modifier leur affichage. Si vous utilisez des cadres pour créer une mise en page précise, cela peut être gênant et il peut être nécessaire d'interdire aux visiteurs de redimensionner les cadres. Dans la plupart des navigateurs (pas tous), le fait de régler l'épaisseur des bordures de cadres à 0 pt dans l'onglet Page de cadres de la palette Spécifications empêchera les visiteurs de redimensionner les cadres. Bien que généralement vous voudrez créer des cadres qui ne pourront pas être redimensionnés par les visiteurs, le contraire peut causer des problèmes. Par exemple, sur certains sites qui affichent des bandeaux publicitaires dans un cadre séparé, ce cadre peut être réduit pour faire disparaître la publicité. Donc c'est négatif pour les annonceurs, mais certains visiteurs peuvent apprécier et Les cadres 74 cela peut augmenter la fréquentation du site et être bénéfique pour vous et l'annonceur. Modifier la taille des cadres avec la souris Déplacez le curseur sur le bord d'un cadre. Le curseur se transforme en une double flèche, même si la bordure est réglée sur 0 pt. Si vous avez du mal à localiser le bord du cadre, cliquez sur l'un des cadres pour le sélectionner. Cela vous indiquera où se trouve le bord du cadre. Cliquez et glissez la bordure pour redimensionner la cadre comme vous le souhaitez. Modifier la taille des cadres avec des valeurs numériques 1 Sélectionnez le cadre à modifier. 2 Dans l'onglet Cadre de la palette Spécifications, entrez la valeur souhaitée dans le champ Taille. Suivant la méthode utilisée pour créer le cadre, cette valeur doit être entrée en pourcentage de la taille de la fenêtre ou en pixels. 3 Utilisez le menu à droite du champ Taille pour modifier l'unité utilisée (% ou pt). Utiliser une taille variable Si vous souhaitez modifier un cadre pour que sa taille soit complètement flexible, attribuez une taille fixe aux autres cadres de ce jeu de cadres puis attribuez une taille proportionnelle à ce cadre. Le même résultat peut être obtenu en indiquant explicitement que ce cadre utilise une taille variable : 1 Sélectionnez le cadre à modifier. 2 Décochez la case à gauche du champ Taille dans l'onglet Cadre de la palette Spécifications. Dans le code HTML, la taille de ce cadre sera marquée "*", au lieu d'utiliser par exemple une valeur en pourcentage "75%". Empêcher la modification de la taille d'un cadre Pour empêcher les visiteurs de redimensionner un cadre dans la fenêtre du navigateur, vous pouvez utiliser une largeur de bordure de 0 pt en utilisant l'option Bordure de l'onglet Page avec cadres de la palette Spécifications. Vous pouvez également indiquer explicitement au navigateur que l'un des cadres ne doit pas être redimensionné. Vous devez le faire pour empêcher un cadre d'être redimensionné si sa bordure est visible. Pour modifier un cadre afin qu'il ne puisse pas être redimensionné : 1 Sélectionnez le cadre. 2 Cochez Taille fixe dans l'onglet Cadre de la palette Spécifications. Les cadres 75 Le cadre sélectionné ne pourra pas être redimensionné même si les bordures sont visibles. Remarquez que, selon le nombre de cadres dans la fenêtre, cela peut empêcher les cadres voisins d'être redimensionnés. Modes d'affichage des cadres Trois options sont disponibles pour contrôler le comportement des cadres lorsque tout leur contenu ne peut pas être affiché à l'intérieur du cadre. Par défaut, les cadres créés afficheront automatiquement une barre de défilement si nécessaire (sauf si tout leur contenu peut être visible à l'intérieur du cadre) : c'est le mode automatique. Vous avez aussi la possibilité d'afficher constamment des barres de défilement (elles seront grisées s'il n'y a rien à faire défiler) ou de ne jamais afficher les barres de défilement. Modifier les barres de défilement des cadres 1 Sélectionnez le cadre. 2 Utilisez le menu Ascenseur de l'onglet Cadre dans la palette Spécifications : • - Auto : affiche uniquement les barres de défilement si nécessaire. • - Oui : affiche toujours les barres de défilement • - Non : n'affiche jamais les barres de défilement Important : Si vous choisissez Auto, les navigateurs risquent d'afficher une barre de défilement même si le contenu du cadre peut théoriquement entrer dans le cadre. Vous devez laisser une petite marge supplémentaire pour éviter de faire apparaître automatiquement les barres de défilement. Freeway vous indique le mode d'affichage de chaque cadre de la manière suivante : • Les cadres réglés sur Auto affichent le contour des barres de défilement ou des vraies barres de défilement si le contenu ne rentre pas dans le cadre. • Les cadres réglés sur Oui affichent des barres de défilement grisées ou actives si le contenu ne rentre pas dans le cadre. • Les cadres réglés sur Non n'affichent pas de barres de défilement, même si le contenu ne rentre pas dans le cadre. Lorsque vous modifiez la largeur d'un cadre réglé sur Auto, vous devez laisser 15 pixels libres à l'intérieur du cadre en plus de la largeur de son contenu pour permettre aux barres de défilement de s'afficher, autrement une barre de défilement horizontale risque de s'afficher. Freeway est conçu pour vous donner une vue la plus exacte possible dans ces situations, mais vous devriez tester les pages avec différents navigateurs pour vérifier que les différences entre les navigateurs ne posent pas de problème. Note 1 : Les barres de défilement horizontales et verticales ne se comportent pas toujours de la même manière lorsque le contenu ne rentre pas dans un Les cadres 76 cadre réglé sur Auto. Si le contenu rentre en largeur mais si le contenu dépasse la hauteur du cadre, seule une barre de défilement verticale sera affichée. Cependant, si le contenu rentre en hauteur mais pas en largeur, les barres de défilement horizontales et verticales seront habituellement affichées. Note 2 : Soyez prudent si vous utilisez un cadre réglé sur Non. Si le contenu ne rentre pas dans le cadre, le visiteur ne pourra pas le faire défiler et il ne pourra pas deviner qu'une partie du contenu n'est pas affiché. Note 3 : Lorsqu'une bordure est affichée, les logiciels Netscape et le logiciel Microsoft diffèrent dans leur mode de calcul de la taille du contenu des cadres. Modifier les bordures des cadres Pour modifier la taille des bordures des cadres dans un jeu de cadres : 1 Affichez l'onglet Page avec cadres dans la palette Spécifications. 2 Dans le champ Bordure indiquez l'épaisseur souhaitée pour les bordures en pixels. Si l'épaisseur de la bordure est réglée sur 0, les navigateurs afficheront les cadres sans bordures pour les séparer. Note : bien qu'en HTML il soit possible d'utiliser différentes tailles de bordures pour des jeux de cadres imbriqués, ce n'est pas géré par les logiciels de Netscape. Donc Freeway ne vous permet d'utiliser qu'une taille de bordure pour toute la page. Modifier les noms des cadres Pour modifier le nom d'un cadre, afin qu'il puisse être explicitement référencé pour devenir la cible d'un lien ou pour être utilisé par un script : 1 Sélectionnez le cadre. 2 Dans l'onglet Cadre de la palette Spécifications, saisissez ou collez le nom souhaité dans le champ Nom puis pressez la touche Retour. Note : Modifier le nom d'un cadre ne modifie ni le nom de la page, ni le nom du fichier qui sera utilisé. L'utilisation de mots réservés par le langage HTML ou JavaScript pour le nom d'un cadre peut produire des résultats inattendus. Si les cibles des liens ou si les références vers ce cadre dans un script ne fonctionnent pas correctement, essayez d'utiliser un autre nom pour ce cadre. Attribuer une cible aux liens En attribuant une cible à un lien, vous pourrez indiquer dans quel cadre la page correspondant à ce lien devra être affichée. La page correspondant au lien peut remplacer le contenu affiché dans un autre cadre ou dans un autre jeu de cadre du jeu de cadre de la page. Elle peut aussi remplacer le contenu entier de la fenêtre ou s'afficher dans une nouvelle fenêtre du navigateur. D'une part, vous pouvez définir la cible d'un lien particulier dans le dialogue Edition des liens et d'autre part vous pouvez définir la cible par défaut de tous les liens d'une page dans l'onglet Page de la palette Spécifications. Des cibles Les cadres 77 sont prédéfinies, mais vous pouvez en utiliser d'autres en attribuant des noms aux cadres utilisés. Choisir un cadre comme cible d'un lien 1 Attribuez un nom au cadre qui servira de cible. Ce nom sera ajouté à la liste des cibles possibles dans le document. 2 Sélectionnez le texte ou le bloc que vous souhaitez changer en lien. 3 Sélectionnez Liens vers... dans le menu Edition pour afficher le dialogue Edition du lien. 4 Utilisez le menu Cible pour sélectionner le nom du cadre souhaité. Le nom du cadre apparaîtra dans le champ Cible. Maintenant, lorsque ce lien sera activé dans la fenêtre du navigateur, sa page correspondante sera affichée dans le cadre choisi. Note 1 : Vous pouvez entrer le nom du cadre directement dans le champ Cible. C'est utile si le cadre souhaité est nommé dans un autre document Freeway ou dans page HTML extérieure. Les cadres 78 Note 2 : Lorsque vous attribuez une cible à un lien, vous pouvez taper le nom du cadre dans le champ Cible avant d'avoir nommé ce cadre. Cependant, si vous faites une faute de frappe ou si pour une quelconque raison le navigateur ne peut pas trouver le cadre cible, il affichera la page correspondante à ce lien dans un nouvelle fenêtre. Cela se produira également si vous avez supprimé ou renommé un cadre. Donc il est conseillé de nommer d'abord le cadre puis de le sélectionner ensuite dans le menu Cible. Ensuite, si vous modifiez le nom de ce cadre, pensez à mettre à jour les liens qui utilisent ce cadre comme cible. Choisir un cadre comme cible par défaut pour la page Bien que vous puissiez choisir indépendamment la cible de chaque lien, cela peut être fastidieux et peu efficace si une grande partie des liens de la page utilisent tous la même cible. Vous pouvez définir une cible par défaut pour les liens d'une page, ainsi tous les liens de cette page utiliseront cette cible sans aucune autre modification. Pour définir une cible par défaut : 1 Affichez la page contenant ces liens. 2 Dans l'onglet Page de la palette Spécifications, sélectionnez le nom du cadre souhaité dans le menu Cible. Tous les liens de la page utiliseront désormais ce cadre comme cible, à moins que vous ne définissiez individuellement une autre cible pour certains liens de la page. Utiliser les cibles prédéfinies Dans les menus Cibles, vous verrez quatre cibles prédéfinies. Vous pouvez les utiliser afin que la page correspondant au lien qui utilise cette cible : • Remplace le contenu actuelle de la fenêtre complète. • Remplace le contenu du jeu de cadre actuel. • Ouvre une nouvelle fenêtre. • Remplace le contenu du cadre actuel (c'est le comportement par défaut, donc inutile de le préciser). Pour utiliser une cible prédéfinie : 1 Sélectionnez le texte ou le bloc qui sera transformé en lien puis sélectionnez Lien vers... dans le menu Edition (ou localisez le menu Cible de l'onglet Page de la palette Spécifications si vous souhaitez utiliser ce cadre par défaut pour les liens de la page). 2 Dans le menu Cible, sélectionnez l'une de ces cibles : Les cadres 79 _parent Affiche la page dans le jeu de cadres ou dans la fenêtre contenant le cadre actuel (par exemple utilisez cette option si vous souhaitez que la nouvelle page remplace le jeu de cadre de la page actuelle). _top Affiche la nouvelle page dans la fenêtre entière, en remplaçant le jeu de cadres actuel. _blank Affiche la page dans une nouvelle fenêtre du navigateur. _self Affiche la page dans le cadre contenant le lien (c'est le comportement par défaut). Modifier les balises FRAME et FRAMESET Si vous souhaitez ajouter du code dans les balises <FRAME> ou <FRAMESET> qui sont générées pour le jeu de cadres, sélectionnez un cadre ou un jeu de cadres puis choisissez Extensions... dans le menu Bloc. Vous pourrez alors définir les couples Nom/Valeur qui seront insérés dans le code HTML généré par Freeway pour le cadre ou le jeu de cadres sélectionné. Pour plus d'information sur les possibilités d'extension du code HTML généré Freeway consultez Personnaliser le code HTML généré. 80 Mise en page HTML 4.0 Mise en page HTML 4.0 Dans Freeway Pro, vous pouvez utiliser les nouvelles fonctions proposées par le langage HTML 4.0 pour créer des pages attractives et dynamiques. Principalement en utilisant la mise en page à l'aide des Feuilles de Styles (CSS), qui offrent plus d'options de mise en page que le texte HTML et en utilisant les calques qui offrent de nouvelles possibilités de mise en page. Freeway Express travaille en HTML 4.0 seulement, sans avoir la possibilité d'utiliser des calques et les extensions offertes par les CSS. Lorsque vous créez un document ou lorsque vous travaillez sur une page, vous pouvez choisir ou non d'utiliser ces fonctions avancées. Lorsque vous souhaitez une mise en page avec les CSS, les calques ou les deux, vous devez choisir le niveau de compatibilité du code HTML de la page. Voici les fonctions accessibles à partir des différentes versions du langage HTML : Version HTML Description Mise en page Formatage HTML 3.2 C'est la version de base qui doit être utilisée pour la création de sites web standards Tableaux de mise en page invisibles. Fonctions de base. HTML 3.2 + CSS Ajoute les options de formatage des CSS Tableaux de mise en page invisibles. Fonctions de base et fonctions avancées grâce aux CSS quand nécessaire. HTML 4.0 Utilise le mode de mise en page du HTML 4.0 et permet la création de calques Tableaux de mise en page invisibles ou positionnemen t exact de blocs Fonctions de base et fonctions avancées. Le code généré utilise uniquement les CSS Options de mise en page (Freeway Pro)) Les calques offrent de nouvelles possibilités, mais leur utilisation entraîne aussi des contraintes, comparé à une mise en page classique dans Freeway. Pour comprendre les avantages et les inconvénients des calques, vous devez comprendre comment Freeway reproduit habituellement la mise en page en HTML. Mise en page HTML 4.0 81 Lorsque vous dessinez des blocs sur une page dans Freeway, ces blocs forment une mise en page qui sera reproduite en HTML lors de la publication du site. Pour recréer la mise en page en HTML, Freeway crée des tableaux de mise en page invisibles, constitués de rangées et de colonnes qui forment des cellules. Comme les blocs créés dans Freeway sont placés dans les cellules correspondantes, dans cette grille à deux dimensions il est impossible que les contenus de deux cellules différentes se chevauchent, sauf si vous utilisez des calques. Les avantages des calques Freeway Express ne permet pas d'utiliser les calques. Tous les blocs normaux qui constituent une page dans Freeway seront placés dans des tableaux de mise en page ce qui entraîne les restrictions évoquées. Les calques sont publiés différemment : ils sont posés au-dessus des tableaux de mise en page dans le code HTML et leur position est relative au coin supérieur gauche de la fenêtre du navigateur. Cette différence rend les calques extrêmement utiles pour la mise en page. Leur position sur la page peut être recréée dans la fenêtre du navigateur de façon précise, sans avoir besoin de créer des tableaux de mise en pages. Ils peuvent se chevaucher sans nécessiter que certains d'entre eux soient découpés, recadrés ou regroupés dans le même calque. Enfin, comme les calques sont des objets autonomes dans le code HTML, il offre un large éventail de possibilités permettant de réaliser des animations et de rendre votre site web interactif grâce au HTML dynamique (DHTML)), par exemple en créant des scripts en JavaScript, pour spécifier leur comportement. Ainsi, un calque peut être animé pour apparaître sur le bord de la page puis traverser l'écran en suivant un chemin particulier. Note 1 : L'utilisation de calque pour créer la mise en page est également considérée comme un technique plus propre que l'utilisation de tableaux de mise en page invisibles, puisque leur usage ne devrait pas poser de problème pour les navigateurs particuliers. Par exemple, les navigateurs à synthèse vocale utilisés par les aveugles peuvent être perturbés lorsqu'ils rencontrent des tableaux de mise en page. Comme de plus en plus d'utilisateurs adoptent les versions 4.0 des navigateurs, les concepteurs de sites sont de moins en moins obligés d'utiliser les tableaux de mise en page. Note 2 : Freeway crée les calques en utilisant des blocs CSS-2 indiqués par les balises <DIV> et repérés avec des positions absolues. La balise <LAYER> qui n'est reconnue que par les logiciels de Netscape n'est pas utilisée. Limitations des Navigateurs Les anciens navigateurs (Netscape 3 et Internet Explorer 3 et précédents) n'affichent pas correctement les calques. Ils vont s'afficher l'un en dessous des autres verticalement dans la page. 82 Mise en page HTML 4.0 Il peut être utile de créer une deuxième version des pages sans calques pour fournir aux visiteurs qui utilisent un navigateur antérieur aux versions 4.0, une présentation plus convenable. Vous pouvez utiliser une technique de redirection pour emmener automatiquement les visiteurs qui utilisent des navigateurs ayant ces fonctions avancées vers les pages dotées de calques. Note : Si vous transformez un bloc en calque, cela signifie qu'il sera dessiné relativement à l'angle supérieur gauche de la fenêtre du navigateur lorsque la page sera visualisée dans un navigateur compatible HTML 4.0. Bien que d'autres blocs puissent être centrés sur la page ou alignés sur la droite de la page, les calques conserveront toujours leur position par rapport au coin supérieur gauche. Donc l'utilisation de calques sur des pages cadrées au centre ou à droite peut produire un résultat inattendu dans le navigateur. Choisir la version HTML utilisé Freeway Express n'a pas d'option pour choisir la version du code HTML. Toutes les pages sont au format HTML 4, mais sans le support des calques et des feuilles de style (CSS). Avant de commencer à créer des calques dans une page Freeway, vous devez définir la version du langage HTML utilisée par cette page avec le dialogue Nouveau document, ou en sélectionnant Réglages document... dans le menu Fichier, ou bien encore en utilisant l'onglet Page de la palette Spécifications. Après avoir choisi d'utiliser le langage HTML 4.0, vous pourrez sélectionner n'importe quel bloc sur la page pour indiquer qu'il devra être publié en tant que calque. Tous les blocs qui ne seront pas définis en tant que calques seront positionnés à l'aide de tableaux de mise en page lors de la publication. Les choix proposés sont HTML 3.2 (le plus répandu et le plus compatible), HTML 3.2 + CSS (mise en page normal avec les améliorations des CSS) et HTML 4.0 (le moins compatible qui vous permet d'utiliser les calques et toutes les options de style des CSS). Vous pouvez choisir d'utiliser la même version du langage HTML pour tout votre document Freeway ou le modifier page par page. Note : Il est important de commencer par modifier la version du langage HTML utilisée avant de créer des calques ou d'utiliser les CSS car ces options ne seront pas disponibles si vous utilisez une ancienne version du langage HTML. Modifier la version HTML par défaut du document Lorsque vous créez un nouveau document, sélectionnez la version du langage HTML souhaitée dans le menu du dialogue Nouveau documents. Vous pouvez utiliser la commande Réglages document... du menu Fichier pour changer les réglages du document (y compris pour les prochaines pages ou maquettes créées) à n'importe quel moment. Mise en page HTML 4.0 83 Modifier la version HTML pour une page particulière Vérifiez qu'aucun bloc n'est sélectionné. La palette Spécifications affiche l'onglet Page. Choisissez la version du langage HTML que vous souhaitez utiliser dans le menu HTML située dans la partie Fonctions HTML. Créer des blocs calque Freeway Express ne permet pas d'utiliser les calques. Chaque bloc placé sur une page pourra être converti en calque utilisant le positionnement fixe du HTML 4.0. De plus, les blocs Graphiques peuvent être paramétrés pour être fusionnés ou rester distinct et se chevaucher. Par défaut, tous les blocs dessinés sur la page seront positionnés à l'aide d'un tableau de mise en page, c'est ce qui impose les restrictions pour certains types de recouvrement entre des blocs et cela explique pourquoi les images sont découpées lorsqu'elles sont recouvertes par des blocs HTML par exemple. Tandis que lorsque les blocs sont réglés pour devenir des calques, ils ne seront plus inclus dans les tableaux de mise en page et ils seront libérés de ces contraintes. Les calques peuvent se chevaucher sans problème, ils seront empilés dans la page HTML dans le même ordre que dans la page Freeway. Si un tableau de mise en page est créé à cause de la présence sur la page de blocs n'utilisant pas les calques, il sera mis le plus en arrière dans la mise en page. Les calques sont toujours considérés comme se trouvant au-dessus des tableaux de mise en page. Il est donc impossible de publier un bloc n'utilisant pas les calques au-dessus d'un bloc les utilisant. Les blocs HTML peuvent être positionnés avec une liberté totale lorsqu'ils sont réglés pour devenir des calques, ils n'entreront pas en confrontation les uns avec les autres. Leur ordre d'empilement peut être modifié en utilisant les commandes Au premier plan et A l'arrière plan ou en glissant déposant leur icône dans la palette Site lorsque l'option Afficher les blocs est activée dans la palette Site. Les blocs Graphiques n'entreront pas en conflit avec des blocs HTML qui se chevauchent lorsque l'un d'entre eux est réglé pour devenir un calque. De même ils n'entreront pas en conflit avec des blocs Graphiques qui se chevauchent lorsque l'un d'entre eux est réglé pour devenir un calque. Cependant, lorsque deux blocs Graphiques qui se chevauchent sont tous les deux des calques, ils seront fusionnés au moment de la publication, sauf si l'option Fusionner images est désactivée pour l'un ou l'autre. Créer un bloc calque Utilisez le langage HTML 4.0 pour la page concernée ou pour tout le document puis : 1 Cochez la case Calques dans la palette Outils. 84 2 Mise en page HTML 4.0 Créez un nouveau bloc en utilisant l'un des outils. Modifier un bloc pour le publier en calque 1 Utilisez le langage HTML 4.0 pour la page concernée. 2 Sélectionnez le bloc à publier en calque puis cochez Calque dans l'onglet Exportation de la palette Spécifications. Le bloc affiche maintenant une petite icône dans son coin supérieur gauche si l'option Contours est cochée dans le menu Affichage. Faire référence à un calque avec le DHTML ou les Actions Lorsqu'un bloc est publié en calque, il possède un nom unique et une position indiqués dans la balise <DIV>. Cette balise indique une section du document, son contenu peut être considéré comme un objet individuel lorsque vous utilisez le langage JavaScript pour modifier le contenu du document. Vous pouvez modifier le nom du calque qui sera utilisé lors de la publication. Pour modifier le nom d'un calque, sélectionnez simplement le bloc puis entrez le nom désiré dans le champ Titre de l'onglet Bloc de la palette Spécifications. Si vous souhaitez conserver plusieurs blocs dans le même calque, vous pouvez les insérer dans un bloc calque HTML. Modifier un formulaire pour le publier en calque Si vous souhaitez transformer un formulaire en calque pour le positionner, vous devez insérer tous les éléments du formulaire dans un seul calque ou dans un tableau qui sera transformé en calque. Les calques sont publiés avec les balises <DIV> qui créent des sections dans le document. En HTML, un formulaire ne peut pas être réparti dans plusieurs sections. Pour plus d'information, consultez Formulaires. Fusionner des calques de blocs Graphiques Freeway Express ne permet pas d'utiliser les calques. Freeway Pro offre une souplesse exceptionnelle dans la manière dont les blocs sont publiés. Par exemple, deux blocs Graphiques qui se chevauchent peuvent être publiés sous la forme de : Mise en page HTML 4.0 85 • Une seule image positionnée à l'aide d'un tableau de mise en page (HTML 3.2). • Une seule image publiée en calque (HTML 4.0). • Deux images indépendantes publiées dans deux calques différents (HTML 4.0). • Différentes images positionnées à l'aide d'un tableau de mise en page (HTML 3.2). La manière dont les images sont publiées dépend principalement de la version du langage HTML utilisée et de l'état de l'option Fusionner images, comme indiqué précédemment. Si l'option Fusionner images est activée pour les blocs Graphiques ils seront fusionnés dans une nouvelle image lors de la publication, tandis que si l'option Fusionner images n'est pas cochée pour l'un d'entre eux ou pour les deux, ils seront publiés en tant que deux images distinctes. Pour fusionner les blocs au moment de la publication, sélectionnez un bloc Graphique (qui peut contenir une image ou du texte graphique) puis dans l'onglet Exportation de la palette Spécifications, cochez la case Fusionner images. Pour plus d'information sur les textes graphiques, consultez Texte Graphique. Pour plus d'information sur les images, consultez Utiliser les images. Note : Deux blocs Graphiques réglés pour être publiés en calques ne pourront pas être fusionnés s'il y a un autre bloc HTML ou un bloc Graphique entre ces deux blocs Graphiques dont l'option Fusionner images n'est pas cochée. Problèmes de mise en page avec les calques Freeway Express ne permet pas d'utiliser les calques. Lorsque les blocs Freeway Pro sont publiés en calques, ils ont un comportement légèrement différent des blocs publiés dans des tableaux de mise en page. Certaines de ces différences sont présentées ici. Position fixe Les blocs publiés en calques sont définis en fonction d'une position fixe à partir du coin supérieur gauche de la fenêtre du navigateur. Ils ne peuvent pas être centrés ou alignés à droite dans la fenêtre du navigateur, comme les blocs normaux le peuvent. Bien qu'il soit possible de régler le cadrage de la page au centre ou à droite, en utilisant le menu Cadrage de l'onglet Page de la palette Spécifications, cela ne concernera que les blocs positionnés dans les tableaux de mise en page, et non pas les calques de cette page. Largeur variable Les blocs publiés en calques possèdent une largeur fixe et ne peuvent pas être publiés pour utiliser une largeur variable comme les blocs normaux. 86 Mise en page HTML 4.0 Comportement en cas de débordement Lorsque le contenu à afficher à l'intérieur d'un calque est plus grand que le calque lui-même dans la fenêtre du navigateur (par exemple, si la police du navigateur est réglée sur une taille plus grande que d'habitude), vous pouvez choisir la méthode utilisée par le bloc publié en calque pour gérer le débordement : visible, masqué, défilement et automatique. Par défaut, les calques s'agrandissent pour occuper plus de place que ce qui était prévu à l'origine, c'est le comportement visible. Vous pouvez aussi modifier la gestion du débordement pour que le contenu du bloc reste toujours dans les limites du calque, c'est le comportement masqué. Les méthodes défilement et automatique ne sont pas gérées par les navigateurs en version 4.0. La méthode défilement permet d'afficher des barres de défilement sur les côtés du calque pour permettre au visiteur de voir le contenu situé hors du calque. La méthode auto affiche également les barres de défilement, mais elles n'apparaissent qu'en cas de débordement (lorsque la méthode défilement est utilisée, elles sont toujours visibles). Vous pouvez empêcher le débordement lorsque du texte HTML est contenu dans un calque en appliquant une taille fixe à ce texte. Pour plus d'informations, consultez Attributs de caractère pour le texte HTML. Dossier des Ressources 87 Dossier des Ressources Freeway vous permet de choisir où vous souhaitez publier les ressources associées à chaque page. Vous avez le choix entre un dossier commun au premier niveau du site, un dossier séparé à l'intérieur de chaque dossier du site, ou bien vous pouvez simplement les placer à côté des pages HTML. Par défaut, Freeway utilise des dossiers séparés à l'intérieur de chaque dossier. Cela peut faciliter la gestion des fichiers publiés pour votre site. Cela peut aussi vous accélérer la publication du site, puisqu'en séparant les ressources dans des dossiers séparés, il y a moins de fichiers dans chaque dossier, or le système de gestion de fichiers Mac OS a tendance à être lent lorsqu'un nombre très important de fichiers se trouve dans le même dossier. Lorsqu'un dossier commun ou lorsque des dossiers séparés sont utilisés pour un site, chaque image, film, applet Java ou tout autre fichier utilisé par votre site sera publié dans un dossier nommé ressources, laissant les vrais fichiers HTML ensemble. Indiquer le dossier des ressources L'emplacement pour la publication des ressources peut être modifié dans le dialogue Nouveau document (lorsque vous créez un nouveau document Freeway) ou dans le dialogue Réglages document accessible en sélectionnant Réglages document... dans le menu Fichier. Le menu Ressources de la fenêtre Nouveau document propose les choix suivants : 88 Dossier commun : Dossier séparés : Dossier des Ressources Toutes les ressources seront enregistrées dans un seul dossier ressources situé à la racine du dossier du site. Les ressources seront enregistrées dans un dossier ressources dans chaque sous-dossier du site, ainsi qu'à la racine du site. C'est le réglage par défaut pour les nouveaux documents. Avec les fichiers HTML : Les ressources seront enregistrées dans les mêmes dossiers que les fichiers HTML. Note 1 : Si vous utilisez des noms de fichiers DOS, le dossiers des ressources seront nommés resource au lieu de ressources. Note 2 : Si une ressource est utilisée par plusieurs pages situées dans différents dossiers, et que l'option Dossier commun ou Dossier séparés est choisie, la ressource ne sera publiée que dans un seul dossier, elle ne sera pas dupliquée dans chaque dossier. Les Préférences 89 Les Préférences Le dialogue Préférences du document (accessible avec Préférences... dans le menu Fichier sous OS 9 ou le menu portant le nom de l’Application sous Mac OS X) propose des options que vous pouvez utiliser pour personnaliser votre environnement de travail ainsi que le code généré par Freeway. Ce dialogue est divisé en cinq panneaux, chacun étant accessible en cliquant dans la liste à gauche de la fenêtre. Ces panneaux sont : • Général • Texte • Grilles / Guides • Sortie • Images Les modifications effectuées dans ce dialogue concernent le document sur lequel vous travaillez. Pour utiliser ces réglages comme préférences par défaut pour les nouveaux documents, cliquez sur le bouton par défaut. Général Le panneau Général contient les options générales. 90 Les Préférences Couleurs bitmap Lorsque vous importez une image bitmap dans Freeway, Freeway mémorise la position du fichier original. Il crée également une version à 72 dpi de cette image et la mémorise à l'intérieur du document Freeway. Vous pouvez modifier le nombre de couleurs utilisées pour créer ces images internes lorsqu'une image est importée est enregistrée. Par défaut, cette option est réglée sur Milliers de couleurs, mais vous pouvez choisir 256 ou des millions de couleurs. Il n'est pas conseillé de régler le nombre de couleurs des images bitmap sur 256 pour un usage normal car Freeway ne disposera pas d'informations suffisantes pour publier l'image avec une qualité raisonnable si l'image originale est indisponible. Utilisez uniquement cette option pour réduire la taille du document si vous avez importé de nombreuses images et si vous considérez que les images mémorisées dans le document occupent trop de place. Si vous réglez le nombre de couleurs sur des millions de couleurs, la taille des documents Freeway sera plus importante et Freeway créera des images d'une qualité légèrement meilleure si les originaux sont perdus ou déplacés. Il est toujours meilleur de conserver les images originales. Cette option s'applique aux nouvelles images importées. Si vous souhaitez importer à nouveau des images, sélectionnez Ressources... dans le menu Edition puis cliquez sur Tout échantillonner. Pas du déplacement Dans Freeway, vous pouvez déplacer ou redimensionner les blocs sélectionnés à l'aide des touches flèches du clavier. Le champ Pas du déplacement permet de modifier la distance du déplacement. Largeur table de montage La largeur de la table de montage est de 500 pt par défaut, ce qui est suffisant habituellement. Si vous manquez d'espace dans la table de montage, vous pouvez modifier cette valeur. Sauvegardes automatiques Lorsque vous enregistrez un document pour la première fois, Freeway crée automatiquement une copie de sauvegarde au même endroit en ajoutant ".bak" à la fin du nom du fichier. Ainsi, si votre document est perdu ou endommagé, vous posséderez une copie de sauvegarde que vous pourrez utiliser. Si vous ne souhaitez pas utiliser cette fonction, décochez la case Sauvegardes automatiques. Vous devrez alors faire vos sauvegardes manuellement. Afficher les balises d’aide Lorsque cette option est activée, une petite note d'aide est affichée lorsque vous passez le curseur sur les éléments dans les palettes ou dans les dialogues. Les Préférences 91 Comportement ancienne sélection Cette fonction vous permet de remettre le comportement de Freeway comme il l’était dans les anciennes versions, lorsqu’un élément est sélectionné. Actuellement si vous cliquez sur un élément, il est sélectionné, et vous devez cliquer une deuxième fois pour l'éditer. Dans les anciennes versions, vous deviez cliquer sur un coin, ou faire un Commande+clic. Marges Navigateur (HTML 3.2) Lorsque vous créez des pages compatibles HTML 3.2, Freeway utilise par défaut une marge de navigateur de 0 pixel pour vous permettre de placer les blocs immédiatement sur le bord de la page. Cependant, Netscape 3.0 n'affichera pas correctement ces blocs, donc vous voudrez peut-être utiliser une marge de 8 pixels pour permettre à votre site web de s'afficher de la même manière dans tous les navigateurs. En cochant Marges Navigateur (HTML 3.2), une marge de 8 pixels sera utilisée dans Freeway. Freeway Express sauvegarde tous les fichiers en HTML 4.0, cette option n’est donc pas disponible. Autoriser AppleScript dans les Actions La possibilité d'exécuter des scripts AppleScript dans les actions est activée par défaut. Si vous avez téléchargé des actions dont vous ne connaissez pas l'origine, vous pouvez désactiver les scripts AppleScript à l'aide de cette option. Pour plus d'information sur les scripts AppleScript dans les actions, consultez Actions. Texte Le panneau texte propose certaines options qui affectent votre environnement de travail dans Freeway et d'autres qui modifient la publication des pages. 92 Les Préférences Encodage par défaut Détermine le jeu de caractères utilisé lors de la publication du texte HTML par Freeway. Vous pouvez modifier ce réglage pour chaque page individuellement. Polices pour l'encodage Bien que l'encodage d'une page détermine le jeu de caractères utilisé lors de la génération de la publication des pages, les options de la partie Encodage par défaut n'ont pas d'influence sur la publication des pages, elles déterminent l'apparence à l'écran du texte HTML affiché dans le document Freeway. Les options Police fixe et Proportionnelle vous permettent de prévisualiser comment le texte HTML sera affiché en utilisant différentes polices dans le navigateur du visiteur. Pour plus d'information, consultez Travailler sur le texte. Couleur des caractères invisibles Lorsque vous choisissez d'afficher les caractères invisibles (comme les espaces ou les retours à la ligne) quand vous travaillez dans Freeway, vous pouvez modifier la couleur utilisée pour les afficher. Affichez ou masquez les caractères invisibles en sélectionnant Caractères invisibles dans le menu Affichage. Les Préférences 93 Taille mini pour le lissage Cette option vous permet de définir une taille minimum pour l'utilisation du lissage des polices. Comme le lissage adouci les contours des lignes, les petites polices peuvent sembler floues lorsque le lissage est utilisé. Style par défaut... Pour modifier le style par défaut que Freeway utilise lors de la création de blocs textes, cliquez sur ce bouton puis modifiez les attributs souhaités. Grille / Guides Le panneau Grille / Guides propose des options liées à l'affichage et au magnétisme des grilles et guides non imprimables. Couleur de Guide / Grille Vous pouvez modifier indépendamment la couleur utilisée pour les lignes horizontales et verticales des guides, des marges et des Grilles. Cliquez sur la couleur à côté de l'option souhaitée puis sélectionnez une nouvelle couleur en utilisant le nuancier qui s'affiche. Vous pouvez modifier la couleur des guides horizontaux ou verticaux indépendamment ou ensemble. Pour modifier les couleurs indépendamment, décochez la case Lier avant de sélectionner les couleurs. Pas du magnétisme (pixels)) Lorsque vous déplacez ou redimensionnez des blocs proches d'un guide, d'une marge ou d'une ligne de la grille, par défaut, les contours du bloc seront 94 Les Préférences alignés sur ces lignes lorsque le bloc approche à une certaine distance. Cette distance est modifiée dans ces champs (valeur indiquée en pixels). Sortie Le panneau Sortie propose des options qui affectent la génération du code HTML ainsi que les noms des fichiers créés lors de la publication du site. Quatre options sont liées à la génération du code HTML : Code HTML, Balises HTML, Renforcement tableaux et Retour à la ligne. Elles se trouvent dans la partie Sortie. Deux options sont liées à la création des fichiers : Longueur max noms et Code créateur. Elles se trouvent dans la partie Fichiers. Code HTML Cette option permet de choisir le type de code HTML généré par Freeway. Par défaut, Freeway utilise l'option Plus efficace qui élimine le plus d'espaces blancs inutilisés possibles. Cela diminue légèrement la taille des fichiers, au dépend de la lisibilité, et c'est la meilleure option à choisir si personne n'a besoin de travailler sur le code HTML après. Si les fichiers doivent être modifiés par quelqu'un d'autre ou traités après leur création, vous pouvez choisir l'option Plus lisible. Cela rend le code HTML plus facile à lire. Balises HTML Vous pouvez indiquer si Freeway doit utiliser des balises en majuscule ou en minuscule dans le code HTML généré lors de la publication. Cela n'intervient pas sur la manière dont les pages sont affichées dans le navigateur, mais si le Les Préférences 95 code HTML doit être modifié par quelqu'un d'autre, vous voudrez peut-être utiliser cette option pour utiliser les conventions de cette personne. Par défaut, les balises sont en minuscules. Renforcement tableaux Pour des raisons techniques, les tableaux de mise en page générés par Freeway ont besoin d'être renforcés pour éviter que les navigateurs ne modifient la mise en page. Deux méthodes peuvent être utilisées. La première consiste à insérer des images GIF invisibles de largeur précise pour renforcer le tableau. La seconde consiste à insérer des espaces invisibles reconnus par les logiciels de Netscape ainsi que des images invisibles lorsque c'est nécessaire. La seconde méthode est préférée par de nombreux concepteurs de site, c'est la méthode par défaut. Cependant, dans certaines situations, les navigateurs peuvent modifier la mise en page. Si vous pensez que c'est le cas, utilisez l'option GIFs invisibles pour le renforcement des tableaux puis publiez à nouveau votre site. Retour à la ligne Les systèmes Mac OS, DOS et Unix utilisent différents caractères pour marquer un retour à la ligne. Si vous sélectionnez DOS ou Unix, les fichiers HTML générés pourront être plus facilement relus avec des systèmes DOS ou Unix. Ce n'est pas important pour les navigateurs, mais cela peut avoir de l'importance pour les scripts CGI. Longueur max noms Freeway génère les noms des fichiers automatiquement en utilisant le titre de la page ou du premier bloc. La longueur maximale des noms de fichiers peut être modifiée à l'aide de cette option. Par défaut, les noms de fichiers longs sont limités à 21 caractères en comptant l'extension du fichier. Entrez une nouvelle valeur pour modifier la longueur maximale des noms. Note : Cette option n'a aucun effet si vous utilisez des noms de fichiers DOS. Code créateur Lorsque Freeway crée des fichiers d'images, ils sont dotés d'un code créateur qui indique quel logiciel doit être utilisé pour les ouvrir. Par défaut, c'est le navigateur choisi dans les options de prévisualisation. Vous pouvez utiliser le code créateur d'un autre logiciel. Vous pouvez soit entrer un nouveau code créateur (pensez à respecter les minuscules/majuscules) soit sélectionner le logiciel qui sera utilisé pour ouvrir les fichiers d'images en sélectionnant Choix application.... Images Freeway utilise des réglages par défaut pour la création des images GIF, JPEG et PNG. Ils peuvent être modifiés image par image en utilisant l'onglet 96 Les Préférences Exportation de la palette Spécifications, vous pouvez aussi modifier les réglages utilisés par défaut par Freeway. GIF / PNG Vous pouvez sélectionner une palette de couleur par défaut et indiquer si par défaut les images doivent être ajustées ou entrelacées. JPEG Vous pouvez définir le taux de compression et indiquer si par défaut les images JPEG doivent s'afficher progressivement. Texte Alternatif Les textes alternatifs remplacent les images d'une page web lorsqu'elle n'est pas affichée dans le navigateur. Cela peut être très utile pour les visiteurs, particulièrement si la page web contient de nombreuses images. Le texte alternatif sera visible pendant le téléchargement des images dans le navigateur. Lorsque Auto est sélectionné, Freeway génère automatiquement le texte alternatif pour les images. Les textes alternatifs sont générés de deux manières : en utilisant le champ Titre de la palette Spécifications correspondant au bloc, ou en utilisant le début d'un texte (non pixelisé) dans un bloc Graphique. Les Préférences Échantillonnage bilinéaire Cette option permet de choisir si vous voulez utiliser l'échantillonnage bilinéaire lorsque la taille des images est changée. Cela permet en général d'avoir des images plus lissées. 97 98 Liens Hypertexte Liens Hypertexte Le contenu d'un site peut être impeccable, mais il ne sera d'aucune utilité aux visiteurs s'ils ne peuvent pas naviguer sur le site. Il est essentiel que vous considériez la navigation comme une partie importante de la création de votre site. Pour permettre aux visiteurs de naviguer sur votre site, vous devez définir des liens hypertexte. Un lien hypertexte peut être appliqué à un morceau de texte ou à n'importe quel bloc dessiné dans Freeway, sauf les blocs HTML contenant du texte. Vous pouvez créer des liens soit entre des pages d'un même document, soit vers des pages ou des fichiers extérieurs se trouvant n'importe où sur le web, en utilisant les liens hypertexte définis dans Freeway. Vous pouvez également indiquer dans quelle fenêtre doit s'afficher la page correspondant au lien. Il existe de nombreux types de liens, ce chapitre va vous les présenter. Les plus importants sont ceux que vous créez entre deux pages dans votre document. Liens entre pages d'un même document Avant de dessiner vos pages, vous devez définir la structure de votre site, c’està-dire quelles pages doivent être reliées et comment vous souhaitez que les visiteurs puissent les consulter. Pour définir le mode de navigation d'un site vous devez d'abord créer la mise en page de base des pages web. Lors de la création des maquettes, il est important que vous vérifiiez que la navigation soit cohérente et simple. En fait, la création des liens vers les autres pages peut être faite à n'importe quelle étape dans la conception du site. Si la page de destination se trouve dans le même document que celui où vous souhaitez placer le lien, vous pouvez simplement sélectionner son nom dans la liste des pages existantes. Si la page de destination n'existe pas encore, vous pouvez l'ajouter lors de la création du lien hypertexte. Lorsque vous créez un lien vers une page du même document (ce qu'on appelle un lien interne), le titre de la page de destination et son nom de fichier n'a pas d'importance. Dans Freeway, les pages d'un même document sont considérées comme des objets et liens sont considérés comme des liens entre ces objets. Les titres et les noms de fichiers de ces pages peuvent être changés avant la publication. Cela vous offre une grande liberté et une grande souplesse dans la création de votre site car vous pouvez continuer à modifier les titres des pages ou les noms des fichiers jusqu'à la publication du site, sans craindre de briser les liens déjà créés. Liens Hypertexte 99 Lorsque les pages sont publiées en HTML, les liens internes sont convertis en références explicites vers les noms réels des fichiers tels qu'ils sont indiqués dans la palette Spécifications. Liens vers des pages externes Quelques fois vous devez définir un lien vers une page qui n'appartient pas au même document Freeway. Lorsque vous faites cela, vous devez taper ou coller l'adresse de cette page dans le dialogue Edition du lien vous-même. Pour cela, vous pouvez soit indiquer l'adresse de cette page avec une adresse absolue en utilisant son URL (Uniform Resource Locator), soit avec une adresse relative si la page de destination se trouve sur le même site web que la page d'origine. Lorsque vous entrez l'adresse d'une page, vous devez faire attention à l'orthographe et aux minuscules/majuscules utilisées. Adresse absolue Si vous utilisez une adresse absolue, elle indique sur quel serveur web se trouve la page, son chemin d'accès ainsi que le nom du fichier. Si vous créez un lien vers une page qui se trouve sur un autre serveur web que celui où sera publié votre site, vous devez utiliser une adresse absolue en indiquant l'URL complète de la page. Voici un exemple d'URL : http://www.robotsfrommars.com/my_folder/page1.htmlCette URL indique une page nommée "page1.html" qui se trouve dans le dossier "my_folder" sur le serveur "www.robotsfrommars.com". Peu importe où se trouvera la page contenant ce lien, ce lien fonctionnera toujours si la page de destination ne change pas d'adresse. Adresse relative Si vous utilisez une adresse relative, le nom du serveur contenant la page de destination ne sera pas mentionné, le lien supposera que la page de départ et la page de destination se trouvent sur le même serveur. Cette méthode présente de nombreux avantages si vous souhaitez bénéficier d'une grande souplesse pour pouvoir déplacer vos pages vers un autre serveur, sans être obligé de modifier tous vos liens. Par exemple, si un client vous a demandé quelques pages et si vous souhaitez les tester sur votre propre serveur avant de les donner à votre client pour les placer sur son serveur web, vous devrez utiliser des adresses relatives. Souvenez-vous que cela ne fonctionne que si la page de départ et la page de destination ne se trouvent pas dans le même document Freeway. Voici trois exemples d'adresses relatives : 1 page2.html 2 marketing/index.html 3 /marketing/index.html 100 Liens Hypertexte Le premier exemple pourra être utilisé pour créer un lien vers une page dont le fichier qui s'appelle "page2.html" se trouve dans le même dossier que la page de départ. Si vous déplacez la page de départ ou la page de destination vers un autre dossier, le lien sera brisé. Le second exemple pourra être utilisé pour créer un lien vers la page "index.html" qui se trouve dans le dossier "marketing", qui se trouve lui-même dans le même dossier que la page de départ. Si vous déplacez la page de départ en dehors du dossier qui contient le dossier "marketing", le lien sera brisé. Mais vous pouvez les déplacer tous les deux ensemble vers un autre endroit du site. Le troisième exemple pourra être utilisé pour créer un lien vers la page "index.html" qui se trouve dans le dossier "marketing", qui se trouve lui-même à la racine du site web. Vous pouvez déplacer la page de départ vers n'importe quel autre endroit du site, le lien fonctionnera toujours. Mais le lien ne fonctionnera plus si vous déplacez la page de départ vers un serveur web différent ou si vous déplacez le dossier "marketing" en dehors du dossier à la racine du site web. Vous pouvez également créer une adresse relative qui fait référence aux dossiers parents. Par exemple, cela peut être utile pour créer un lien relatif vers une page qui se trouve dans un dossier au même niveau que le dossier parent. Voici un exemple de lien à partir d'une page se trouvant dans le dossier "marketing" vers une page nommée "ventes.html" qui se trouve dans le dossier "ventes" qui se trouve lui-même au même niveau que le dossier "marketing" : ../ventes/ventes.html En utilisant deux points (..) vous pouvez faire référence au dossier parent sans être obligé de le nommer. Dans ce cas, ".." fait référence au dossier contenant le dossier "marketing" et le dossier "ventes", nous n'avons pas besoin de connaître son nom. ../../tableaux Ce lien fait référence à un dossier nommé "tableaux" qui se trouve dans le dossier parent du dossier contenant "ventes". Créer des liens Hypertexte dans Freeway Dans Freeway, des liens hypertexte peuvent être créés sur n'importe quel morceau de texte (qui peut soit être dans un bloc HTML soit dans un bloc Graphique) ou sur n'importe quel bloc créé à l'aide des outils Freeway (sauf un bloc HTML entier contenant du texte). Ce paragraphe vous explique comment : Liens Hypertexte • Créer un lien interne vers une page existante avec le dialogue Edition du lien. • Créer un lien interne vers une page existante à l'aide du menu Liens internes en bas de la fenêtre document. • Créer un lien vers une page externe avec le dialogue Edition du lien. • Glisser Déposer des liens dans Freeway. • Supprimer des liens. 101 Créer un lien interne vers une page existante avec le dialogue 1 Sélectionnez le texte ou le bloc sur lequel vous souhaitez créer le lien. 2 Sélectionnez Lien vers dans le menu Edition ou cliquez dans la zone d'information qui se trouve en bas de la fenêtre du document pour afficher le dialogue Edition du lien. 3 Sélectionnez une page parmi les pages existantes puis cliquez sur OK. 4 Le lien apparaîtra en bleu souligné pour les textes des blocs HTML ou une icône sera affichée dans l'angle supérieur gauche du bloc. Le lien sera indiqué dans la zone d'information qui se trouve en bas de la fenêtre du document lorsque le texte ou le bloc est sélectionné. Si des ancres sont définies dans la page de destination, le menu Ancre apparaîtra à côté du menu Liens internes en bas de la fenêtre du document. Cela vous permettra de créer un lien vers une ancre d'une autre page. Les ancres sont décrites en détail dans le chapitre Les ancres. Créer un lien interne vers une page existante à l'aide du menu 1 Sélectionnez le texte ou le bloc sur lequel vous souhaitez créer le lien. 2 Sélectionnez une page parmi la liste des pages existantes dans le menu Liens internes qui se trouve en bas de la fenêtre du document. 102 3 Liens Hypertexte Le lien affiché sera bleu et souligné. Le lien sera affiché également dans la barre d'état au pied du document quand le texte sera surligné ou si le bloc est sélectionné. Créer un lien vers une page externe à l'aide du dialogue 1 Sélectionnez le texte ou le bloc sur lequel vous souhaitez créer le lien. 2 Sélectionnez Lien vers dans le menu Edition ou cliquez dans la zone d'information qui se trouve en bas de la fenêtre du document pour afficher le dialogue Edition du lien. 3 Sélectionnez le type de lien dans le menu URL puis tapez ou collez l'adresse de la page dans le champ. Si vous utilisez une adresse relative, n'indiquez pas le type de l'URL. Vérifiez que l'adresse remplace le texte "http://" affiché par défaut. 4 Le lien affiché sera bleu et souligné. Le lien sera affiché également dans la barre d'état au pied du document quand le texte sera surligné ou si le bloc est sélectionné. Créer une nouvelle page en même temps que le lien 1 Sélectionnez le texte ou le bloc sur lequel vous souhaitez créer le lien. 2 Sélectionnez Lien vers dans le menu Edition ou cliquez dans la zone d'information qui se trouve en bas de la fenêtre du document pour afficher le dialogue Edition du lien. 3 Cliquez sur le bouton Créer page et sélectionnez une maquette pour la nouvelle page si vous le souhaitez. 4 Cliquez sur OK. Vous devrez entrer le nom de la nouvelle page. 5 Le lien affiché sera bleu et souligné. Le lien sera affiché également dans la barre d'état au pied du document quand le texte sera surligné ou si le bloc est sélectionné. Glisser Déposer de liens Hypertexte Vous pouvez glisser déposer des liens hypertexte à partir des fenêtres des navigateurs. Vous pouvez uniquement les déposer sur les blocs dans Freeway, ils ne peuvent pas être déposés sur du texte sélectionné. Pour copier le lien hypertexte dans un bloc Freeway, ouvrez une page web avec votre navigateur puis trouvez le lien à copier. Avant de glisser le lien, Liens Hypertexte 103 vous devez créer un bloc Graphique dans Freeway et arranger les fenêtres du navigateur et celles de Freeway pour que vous puissiez voir simultanément le lien dans le navigateur et le bloc dans Freeway. Placer le curseur sur le lien à glisser dans le navigateur puis glissez-le sur le bloc dans le document Freeway. L'URL correspondante à ce lien sera copiée dans le document Freeway, appliquée au bloc puis affichée dans la zone d'information qui se trouve en bas de la fenêtre du document lorsque vous reviendrez dans Freeway. Supprimer un lien Vous pouvez supprimer un lien en sélectionnant le texte ou le bloc en question, puis en affichant le dialogue Edition du lien comme précédemment et en sélectionnant Sans. Vous pouvez aussi sélectionner Sans dans le menu Liens internes en bas de la fenêtre. Afficher et sélectionner les liens d'une page Pour afficher les liens du document, sélectionnez Afficher les liens dans la palette Site. Les liens et les ancres définis sur chaque page seront affichés en dessous du nom de la page. Les liens sont affichés en caractères latins soulignés, tandis que les ancres sont affichées en italique. En cliquant sur un lien ou une ancre dans la palette Site, le texte ou le bloc correspondant à ce lien sera affiché dans la page et sélectionné. Choisir une fenêtre cible Pour définir la fenêtre dans laquelle la page correspondant au lien sera affichée, utilisez le menu Cible du dialogue Edition du lien. Pour plus d'information sur cela, consultez Attribuer une cible aux liens. Les zones de liens Au lieu de créer un seul lien sur une image entière, il est possible de créer plusieurs liens afin que le visiteur soit emmené sur une page différente en fonction de la partie de l'image sur laquelle il a cliqué. C'est ce qu'on appelle une zone de liens (ou image map en Anglais). Freeway utilise des blocs spéciaux pour définir les zones de liens, ils sont affichés avec un contour violet et ils ne peuvent ni recevoir de contenu, ni avoir une couleur de fond ou une bordure. Vous pouvez créer une zone de lien en sélectionnant ces outils dans la palette Outils : Créer une zone de liens dans Freeway Les zones de liens sont faciles à créer dans Freeway en délimitant des zones sur l'image sur laquelle vous souhaitez créer des liens. 104 Liens Hypertexte 1 Importez une image, positionnez-la et redimensionnez-la. 2 Créez un bloc de zone de liens sur chaque zone de l'image que vous souhaitez transformer en lien. 3 Attribuez à chaque zone de lien de l'image un lien unique comme expliqué précédemment. Vous pouvez créer une zone de liens en utilisant l'un des trois outils : rectangle, ovale ou courbe de Béziers Freeway crée des zones de liens gérées par la plupart des navigateurs actuels. Note : Si vous placez un lien sur un bloc graphique qui est découpé en plusieurs images lors de l'exportation, le lien sera recréé en utilisant une zone de liens lors de la publication. Couleurs des liens Lorsque les liens sont affichés sous la forme de texte HTML dans un navigateur, ils sont habituellement affichés avec une couleur particulière et ils sont soulignés pour les distinguer du texte normal. Si vous n'indiquez rien, les couleurs de liens choisies dans le navigateur seront utilisées. Trois couleurs peuvent être définies pour les liens sur du texte HTML. Ce sont : la couleur des liens qui n'ont pas encore été visités, la couleur des liens lorsque le visiteur clique dessus et enfin, la couleur des liens déjà visités dans le navigateur. Les navigateurs mémorisent les pages qui ont été visitées. Grâce au changement de couleur, les visiteurs peuvent voir les liens qui n'ont pas encore été consultés. Il est important que la couleur des liens soit différente de la couleur du fond de la page, sinon les visiteurs auront du mal à lire le texte et ils ne distingueront pas les liens sur la page. N'utilisez que des couleurs différentes du fond. Les couleurs par défaut des navigateurs sont bien visibles sur une page avec un fond blanc ou gris, mais elles risquent de ne pas être très visibles sur un fond noir par exemple. Vous devez alors choisir vos propres couleurs pour les liens. Notez que les visiteurs ont tendance à s'attendre à voir des liens bleus. Modifier la couleur des liens Vous pouvez modifier les couleurs des trois types de liens en utilisant l'onglet Apparence de la page de la palette Spécifications. Pour utiliser les mêmes Liens Hypertexte 105 couleurs sur différentes pages, vous pouvez modifier ces couleurs dans la maquette. Sur la page ou la maquette, vous devez : 1 Afficher l'onglet Apparence de la page de la palette Spécifications. 2 Sélectionner une couleur dans le menu Normal pour modifier la couleur des liens qui n'ont pas encore été visités. 3 Sélectionner une couleur dans le menu Actif pour modifier la couleur des liens lorsqu'ils sont cliqués. 4 Sélectionner une couleur dans le menu Visité pour modifier la couleur des liens déjà visités. Tous les liens sur du texte HTML utiliseront désormais la couleur choisie dans le menu Normal. Le texte GIF (tout comme les images) n'affichera pas cette couleur dans Freeway et dans le navigateur. Modifier les couleurs à l'aide des CSS Cette option n'est pas disponible dans Freeway Express. Il est possible de modifier la couleur des liens à l'aide des CSS si la version du langage HTML de la page est réglée sur HTML 3.2 + CSS ou HTML 4.0. Ce n'est pas conseillé pour la création d'un site web normal car les couleurs des liens ne seront utilisées que dans les navigateurs compatibles CSS. Cependant, les liens de type CSS permettent un nouvel état qui est reconnu par Microsoft Internet Explorer 4.0 : la couleur du lien peut changer lorsque le curseur de la souris passe dessus. C'est l'état survol. Pour rester compatible avec les anciens navigateurs, vous pouvez utiliser la méthode habituelle pour définir les liens comme indiqué précédemment et définir également une couleur de survol pour les visiteurs qui utilisent un navigateur comme Microsoft Internet Explorer 4.0. Pour définir les styles CSS : 1 Afficher l'onglet Apparence de la page de la palette Spécifications. 2 Dans la partie Styles de liens, sélectionnez le style désiré pour les liens, ou créez en de nouveaux. Note : afin que le style de liens survolés soit utilisé, vous devez définir un style pour les liens normaux de la page. 106 Liens Hypertexte Tester la navigation dans Freeway Lorsque vous mettez en place les éléments de navigation entre les pages de votre site, il est essentiel de les tester pour être sûr que les liens arrivent au bon endroit et que la navigation est agréable. Vous pouvez le faire en prévisualisant le site dans votre navigateur web, mais vous pouvez également tester les liens internes dans Freeway. Tester un lien interne dans Freeway 1 Sélectionnez le texte ou le bloc qui comporte le lien à tester. 2 Sélectionnez Suivre ce lien dans le menu Edition ou cliquez en maintenant la touche Commande enfoncée dans la zone d'information en bas de la fenêtre (là ou le lien est affiché). 3 Freeway affiche automatiquement la page de destination du lien. Pour tester les liens externes, vous devez prévisualiser le site dans un navigateur web. Types de liens Hypertexte Comme indiqué précédemment, il existe de nombreux types de liens hypertexte, vous pouvez en choisir un dans le dialogue Edition du lien pour créer un lien externe. Voici une description rapide des différents types de liens : file : L'adresse d'un fichier sur le disque dur contenant le navigateur web. Utilisez ce type d'adresse pour indiquer un fichier local lorsque les pages ne sont consultées que localement, pas sur un serveur web. ftp : L'adresse d'un fichier se trouvant sur un serveur FTP. http L'adresse d'une autre page HTML ou de n'importe quel fichier se trouvant sur un serveur web. https: L'adresse d'une autre page HTML ou de n'importe quel fichier se trouvant sur un serveur web sécurisé. Lorsqu'un navigateur charge une page qui se trouve sur un serveur sécurisé, les informations envoyées entre le navigateur et le serveur sont Liens Hypertexte 107 cryptées pour éviter qu'un tiers puisse les intercepter et les lire. mailto : Une adresse e-mail. Lorsque les navigateurs sont correctement réglés, si le visiteur clique sur une adresse de type mailto le logiciel d'e-mail sera automatiquement lancé sur l'ordinateur du visiteur et un nouvel e-mail avec l'adresse e-mail du lien sera créé. news : L'adresse d'un newsgroups. Lorsqu'un tel lien est activé, le navigateur essaye d'ouvrir un logiciel capable de lire les newsgroups et se connecte sur le serveur de newsgroups s'il est indiqué. Freeway permet aussi de créer des liens de type gopher, telnet et wais. Lorsque vous utilisez une adresse absolue pour indiquer un fichier se trouvant sur un serveur web, vous devez choisir "http". Lorsque vous utilisez une adresse relative, vous ne devez rien écrire avant cette adresse. Si vous avez entré une adresse dans le champ et si vous modifiez le type du lien, Freeway conservera l'adresse en modifiant uniquement son préfixe. Gérer les liens Le dialogue qui affiche la liste des URL est utilisé pour gérer les liens externes contenus dans votre document. Il vous permet de voir et de modifier ces liens sans être obligé de les chercher séparément et de les mettre à jour manuellement. Sélectionnez Liste des URLs... dans le menu Edition pour afficher le dialogue Edition d'URL 108 Liens Hypertexte Les adresses sont classées par ordre alphabétique. Pour modifier une URL, sélectionnez-la dans la liste puis cliquez sur le bouton Editer.... Un dialogue s'affiche pour taper la nouvelle adresse. Modifiez l'adresse puis cliquez sur OK quand vous avez fini. Pour supprimer une URL, cliquez sur le bouton Effacer ou appuyez sur la touche Effacer ou Supprimer. La colonne de droite affichera "[Supprimé]". Lorsque vous avez fini de modifier les URL, cliquez sur OK pour appliquer les modifications. Si vous cliquez sur Annuler, aucune modification ne sera prise en compte. Les ancres En créant des liens entre différentes pages, vous permettez aux visiteurs de votre site de naviguer d'une page à une autre. Lorsque la nouvelle page est affichée, si son contenu dépasse la taille de la fenêtre, une barre de défilement apparaîtra pour permettre au visiteur d'atteindre la partie souhaitée de la page. Sur certaines grandes pages il peut être utile de permettre aux visiteurs d'arriver directement sur une partie de la page, au lieu du haut de la page. C'est ce que permettent les ancres. Qu'est-ce qu'une ancre ? ? Les ancres marquent une position verticale dans une page. Cette position pourra devenir la destination des liens que vous créerez vers cette page. Lorsque quelqu'un clique sur un lien vers une ancre, la page de destination sera chargée puis son contenu défilera jusqu'à la position de l'ancre, si elle n'est pas déjà visible dans la fenêtre. Pourquoi utiliser des ancres ? Les ancres sont utiles sur les grandes pages. Si vous souhaitez créer un lien vers une information qui se trouve au milieu d'une page, l'ancre pourra emmener le visiteur directement à cette information. Vous pouvez également placer des liens en haut de la page pour accéder aux principaux titres contenus dans la page. Les ancres peuvent être utilisées pour créer une table des matières et pour faciliter la navigation à l'intérieur de la page actuelle. Il est aussi fréquent d'ajouter des liens sur les grandes pages pour que le visiteur puisse revenir rapidement en haut de la page. Ces liens sont habituellement placés à la fin de chaque section ainsi qu'en bas de la page. Comment fonctionnent les ancres ? ? Pour chaque position verticale que vous souhaitez transformer en cible d'un lien, vous devez créer une ancre. Lorsque vous créez une ancre, vous lui Liens Hypertexte 109 donnez un nom. Une ancre doit avoir un nom unique dans une même page. Chaque ancre est utilisée par son nom, pour créer des liens. Une fois les ancres définies dans le document Freeway, elles sont utilisables pour créer des liens. Vous devez commencer par créer un lien simplement vers la page souhaitée, ensuite vous avez la possibilité d'ajouter une option pour indiquer une ancre de cette page. Vous pouvez également créer des liens vers des ancres situées sur des pages externes. Lorsque vous créez des ancres, il est conseillé de leur attribuer des noms descriptifs. Bien qu'il soit plus rapide et plus simple de leur donner simplement des numéros ou des lettres, des noms descriptifs aideront les visiteurs lors de leur navigation sur votre site. Des noms descriptifs peuvent aider les visiteurs car lorsque le curseur de l'utilisateur passe sur un lien dans son navigateur, la destination de ce lien s'affiche habituellement en bas de la fenêtre du navigateur, y compris le nom de l'ancre. Si vous choisissez les noms des ancres avec précaution, cela aidera le visiteur à déterminer s'il est utile de cliquer sur ce lien. Par exemple, si vous avez placé les informations pour vous contacter en bas d'une page, vous pouvez créer une ancre à cet endroit et la nommer contact. Ensuite, vous pourrez créer des liens vers ces informations à partir de la même page ou à partir d'autres pages sur le site. Créer une ancre Dans Freeway, vous pouvez créer une ancre à n'importe quel endroit dans un texte d'un bloc HTML ou sur un bloc Graphique. Pour créer une ancre : 1 Sélectionnez le texte ou le bloc à transformer en ancre. 2 Sélectionnez Ancre... dans le menu Edition pour afficher le dialogue Définir ancre. 3 Entrez un nom pour cette ancre. 4 Cliquez sur OK. Cette ancre sera maintenant disponible dans le menu des ancres lorsque vous créerez des liens. 110 Liens Hypertexte Afficher et sélectionner les ancres d'une page Pour afficher les ancres dans un document, affichez la palette Site puis sélectionnez Afficher les liens dans son menu. Les liens et les ancres de chaque page apparaîtront sous le nom de la page. Les liens sont affichés en souligné tandis que les ancres sont affichées en italique. En cliquant sur un lien ou une ancre dans la palette Site, le texte ou le bloc qui contient ce lien sera sélectionné dans la fenêtre du document. Pour modifier une ancre : 1 Sélectionnez le texte ou le bloc qui contient l'ancre. 2 Sélectionnez Ancre... dans le menu Edition. Vous devez voir le nom de l'ancre dans la boîte de dialogue qui s'affiche. 3 Modifiez son nom puis cliquez sur OK. L'ancre sera mise à jour avec son nouveau nom et tous liens du document actuel qui utilisaient cette ancre seront également mis à jour. Si vous avez déjà créé des liens vers cette ancre à partir d'une page située à l'extérieur du document actuel, vous devrez modifier manuellement ces liens externes pour les mettre à jour. Pour supprimer une ancre : 1 Sélectionnez le texte ou le bloc qui contient l'ancre. 2 Sélectionnez Ancre... dans le menu Edition, vous devez voir le nom de l'ancre dans la boîte de dialogue qui s'affiche. 3 Effacez son nom puis cliquez sur OK. L'ancre sera supprimée et n'apparaîtra plus dans le menu des ancres. Note : Lorsque vous travaillez sur des ancres dans un texte, si le texte sélectionné ne correspond pas exactement à ce qui était sélectionné lors de la création de l'ancre, vous pouvez obtenir des résultats inattendus si vous essayez de modifier ou de supprimer cette ancre. Si la sélection contient du texte supplémentaire qui ne faisait pas partie de la sélection d'origine, un tiret () sera affiché pour vous indiquer que vous n'avez pas uniquement sélectionné Liens Hypertexte 111 l'ancre dans sa totalité. De même, si vous ne sélectionnez pas complètement l'ancre lors de sa suppression, elle ne sera pas complètement supprimée de la page. Créer un lien vers une ancre À l'Intérieur du même document Vous pouvez créer un lien en sélectionnant Lien vers... dans le menu Edition, ou en utilisant le menu situé en bas de la fenêtre du document. En utilisant l'une de ces méthodes, vous pourrez créer des liens vers une ancre d'une page donnée. Créer un lien avec le dialogue Edition du Lien 1 Sélectionnez le texte ou le bloc qui servira de lien. 2 Sélectionnez Lien vers dans le menu Edition pour afficher le dialogue Edition du Lien. 3 Sélectionnez la page de destination qui contient l'ancre souhaitée dans la liste Page existante. 4 Sélectionnez l'ancre de la page de destination vers laquelle vous souhaitez créer le lien puis cliquez sur OK. Le nom de l'ancre est affiché dans la zone d'information en bas de la fenêtre du document après le titre de la page la contenant suivie d'un "#". Créer un lien avec les menus 1 Sélectionnez le texte ou le bloc qui servira de lien. 2 Utilisez le menu Liens en bas de la fenêtre du document pour sélectionner la page contenant l'ancre vers laquelle vous souhaitez créer le lien. Le menu Ancres apparaîtra à côté du menu Liens si la page sélectionnée contient des ancres. Si la page actuelle contient des ancres, le menu Ancres les affichera sans que vous ayez besoin de sélectionner une page dans le menu Liens. 3 Utilisez le menu Ancres pour sélectionner l'ancre sur la page de destination. Le nom de l'ancre est affiché dans la zone d'information en bas de la fenêtre du document après le titre de la page la contenant suivie d'un "#". Supprimer un lien vers une ancre 1 Sélectionnez le texte ou le bloc qui contient le lien. 2 Vous pouvez soit sélectionner Sans dans le menu Ancres situé en bas de la fenêtre du document, pour supprimer le lien vers cette ancre mais pour conserver le lien vers cette page, soit sélectionner Sans dans le menu Liens pour supprimer complètement le lien. Supprimer un bloc contenant une ancre 112 Liens Hypertexte Lorsque vous supprimez un bloc (ou du texte) contenant une ancre (soit directement, soit en supprimant sa page, son dossier ou sa maquette), un dialogue apparaîtra pour vous prévenir que tous les liens vers ce bloc seront supprimés. En cliquant sur OK, vous supprimerez ce bloc ainsi que tous les liens qui l'utilisaient dans ce document. En cliquant sur Annuler, vous conserverez votre document intact. Liens Hypertexte Contenu 113 114 Blocs Blocs Types de blocs Les éléments créés sur vos pages Freeway sont appelés Blocs. Afin de créer des blocs, utiliser les outils de dessin dans la palette Outils ou choisissez parmi les commandes du menu Insertion. Les types de blocs suivants peuvent être ajoutés à vos pages : Bloc HTML Les blocs HTML ont un contour bleu. Leur contenu est exporté vers le Web en utilisant les balises HTML standard. Les images importées dans les blocs HTML sont publiées dans leur format d'origine et ne peuvent être redimensionnées ou modifiées dans Freeway. Les blocs HTML peuvent contenir du texte, des images au format GIF, JPEG ou PNG, ou du contenu multimédia. Des types de blocs HTML supplémentaires incluent des contrôles de formulaire, des tableaux, des blocs Action, etc. Bloc Graphique Les blocs Graphiques ont un contour gris. Ces blocs peuvent contenir du texte ou des images au format GIF, JPEG, PNG, TIFF, PICT, EPS ou BMP. Freeway 3 peut aussi importer les formats Illustrator, Photoshop et tout autre format supporté par les Modules externes d'importation Photoshop. Le contenu des blocs images est publié sous la forme d'images 72dpi au format GIF, JPEG ou PNG. Freeway Express supporte un nombre plus restreint de type de fichiers : GIF, JPEG, PNG et PICT. Bloc Zone de Lien Les blocs Zone de Lien ont un contour violet. Ces blocs indiquent la zone active d'un lien hypertexte dans un bloc. Contrairement aux blocs HTML ou Graphique, les zones de liens ne possèdent aucun contenu propre. Bloc Calque (Freeway Pro) Freeway Express ne permet pas d’utiliser les calques. Les blocs Calque ont un contour bleu ou gris suivant leur nature (bloc HTML ou bloc Graphique) et affichent un carré bleu dans le coin supérieur gauche. Les blocs Calque ne sont disponibles que lorsque la version HTML de votre page est réglée sur 4.0. Des blocs HTML ou Graphique existant deviennent des blocs Calque lorsque leur option Calque est cochée dans la palette Spécifications. Des blocs Calque peuvent être aussi créés en cochant l'option Calque dans la palette Outils. Blocs 115 Modifier les options des blocs Lorsqu'un bloc est sélectionné, la palette Spécifications affiche les différents réglages de ce bloc, les options de base étant disponibles dans le panneau Bloc. Les options présentent dans le panneau Export permettent de contrôler le rendu du bloc lorsque le site est publié. Panneau Bloc Le panneau Bloc contrôle la position et les dimensions d'un bloc, mais aussi son titre, sa couleur de fond, ses bordures et d'autres attributs. Reportez-vous à Utiliser les palettes pour plus d'information sur le panneau Bloc et ses options. Panneau Export Utilisez le panneau Export pour sélectionner le type d'exportation du bloc ainsi que les attributs de son contenu lors de la publication. Reportez-vous à Utiliser les palettes pour plus d'informations sur le panneau Export et ses options. Panneau Export des fusions d'images Lorsque des blocs Graphiques GIF ou JPEG se chevauchent et sont combinés pour former une seule image lors de la publication, le panneau Export des images fusionnées est affiché. Ce panneau permet de contrôler les options d'exportations pour l'image résultante. 116 Blocs Afficher les blocs dans la palette Site Les blocs peuvent être affichés dans la palette Site. Cette option est désactivée par défaut. Sélectionnez Afficher les blocs dans le menu de la palette Site afin de montrer l'empilement des blocs dans la page. Les blocs de chaque page sont affichés en dessous et légèrement sur la droite de l'icône de la page. Si un bloc est sur la table de montage ou déborde de la boîte le contenant, une petite croix est affichée au centre de son icône. Création de blocs Les blocs sont habituellement créés en dessinant un rectangle sur la page. La palette Outils de Freeway contient une sélection d'outils de dessin qui peuvent être utilisés pour créer des blocs HTML, Graphique et des contrôles de formulaire. Vous pouvez aussi créer des blocs en utilisant les commandes du menu Insertion. Les outils de création de blocs de Freeway Freeway dispose de quatre outils de création : deux outils Rectangle, un outil Ovale et un outil Crayon pour créer des blocs formés de polygones ou de courbes de Béziers. Les blocs dessinés avec les outils de création sont par défaut des blocs HTML (contour bleu) ou GIF (contour gris) mais leur type d'exportation peut être modifié dans le panneau Export. Le type d'exportation d'un bloc détermine la manière suivant laquelle son contenu est reproduit dans un navigateur Web Blocs 117 lorsque le site est publié. Les six types d'exportations principaux sont : HTML, GIF, JPEG, PNG, URL et Zone de Lien. Si vous souhaitez après coup changer le type d'exportation d'un bloc dans Freeway, sélectionnez le, affichez le panneau Export dans la palette Spécifications et choisissez un autre format. Le type d'exportation peut aussi changer automatiquement lorsqu'une image ou un autre contenu est importé. Lorsque vous voulez un bloc contenant du texte Le contenu d'un bloc conçu pour contenir du texte est publié comme du texte HTML ou comme une image. Vous prenez généralement cette décision lorsque vous dessinez le bloc. Freeway vous permet de dessiner des blocs de texte HTML ou de texte image à l'aide d'outils distincts. Les blocs de texte graphique peuvent avoir une forme quelconque alors que les blocs de texte HTML sont obligatoirement rectangulaires. Lorsque vous voulez un bloc contenant une image Une image peut être importée dans n'importe quel bloc HTML ou Graphique. Les images importées dans des blocs HTML vides sont exportées par défaut en gardant l'original (voir Images Tel quel (avec option Garder l'original)) et ne sont pas traitées par Freeway. Dans ce cas, les images importées devraient être dans un format compatible Web (web-ready) (GIF, JPEG ou PNG). Au contraire, les images importées dans des blocs Graphiques sont traitées par Freeway et peuvent être de n'importe quel format supporté par Freeway. Lorsque vous voulez un bloc de couleur Vous pouvez créer un bloc vide et choisir une couleur de remplissage. Un bloc de couleur peut être exporté soit en tant qu'objet HTML, soit en tant qu'image. Les éléments HTML augmentent peu la taille de la page et permettent ainsi un téléchargement plus rapide. Lorsque vous voulez un bloc avec un lien vers un contenu externe Les blocs devant contenir des éléments extérieurs, référencés sur le Web (lorsque la page est visualisée dans un navigateur), sont appelés des blocs URL. Leur type d'exportation peut être : Graphique ou HTML. Un bloc HTML ou Graphique vide peut être transformé en bloc URL en modifiant son type dans la Palette Spécifications. Ces blocs sont utiles pour inclure sur vos pages des références vers des compteurs, des modules de serveur ou d'autres types de contenu. Dessiner des Blocs Dessiner un bloc rectangulaire 1 Sélectionnez l'outil Bloc HTML ou Bloc Graphique, 118 2 Positionnez la souris à l'endroit où vous voulez commencer le bloc, 3 Cliquez et glissez le curseur en diagonale, 4 Relâchez le bouton de la souris lorsque le bloc a la taille désirée. Blocs Le nouveau bloc est sélectionné, affichant des "poignées" pour le redimensionner et un contour bleu ou gris. Si vous souhaitez masquer le contour afin d'avoir une prévisualisation de la page plus réaliste, désélectionnez Contours depuis le menu Affichage. Dessiner un bloc ovale 1 Sélectionnez l'outil Bloc Ovale, 2 Positionnez la souris à l'endroit où vous souhaitez débuter le bloc, 3 Cliquez et glissez le curseur en diagonale, 4 Relâchez le bouton de la souris lorsque le bloc a la taille désirée. Créer un bloc Graphique polygonal Pour créer un bloc polygonal en positionnant chaque coin à l'aide de l'outil Crayon : 1 Sélectionnez l'outil Crayon, 2 Positionnez la souris où vous souhaitez commencer le dessin et cliquez une fois, 3 Placez la souris où vous désirez que le second coin soit créé et cliquez à nouveau. Répétez cette étape jusqu'à ce que vous ayez dessiné la forme voulue. 4 Pour terminer le bloc, placez la souris au-dessus du premier point et cliquez - le curseur affiche un cercle lorsqu'il est au-dessus du point pour vous indiquer que vous allez fermer le bloc. Vous pouvez aussi doublecliquer n'importe où pour terminer le dessin du bloc et le laisser ouvert. Créer un bloc Graphique courbe Pour créer un bloc utilisant des courbes, glissez l'outil Crayon pendant que vous cliquez pour positionner le point suivant. 1 Sélectionnez l'outil Crayon, 2 Positionnez la souris à l'endroit où vous souhaitez commencer le bloc 3 Cliquez sur la page et maintenez le bouton de la souris enfoncé. Blocs 119 4 Glissez le curseur pour générer les poignées de direction qui détermineront la courbe du segment vers le point que vous dessinez. Relâchez le bouton afin de créer la courbe. 5 Répétez l'étape précédente pour compléter la forme. 6 Cliquez sur le premier point pour terminer le bloc. Note : vous pouvez dessiner des blocs contenant courbes et segments de droite. Modifier le comportement des outils de dessin Vous pouvez modifier le comportement des outils de dessin de Freeway en utilisant différentes touches du clavier. Conserver l'outil de dessin sélectionné afin de créer d'autres blocs Normalement, lorsque vous avez fini de dessiner un bloc, l'outil actif dans la palette Outils est automatiquement désélectionné au profit de l'outil Sélection. Si vous voulez créer plus d'un bloc du même type sans avoir à resélectionner l'outil à chaque fois, maintenez la touche Option au moment où vous cliquez sur l'outil. L'outil est alors affiché en gris foncé et reste sélectionné jusqu'à ce que vous en choisissiez un autre. Dessiner un bloc en partant de son point central Les blocs sont habituellement dessinés en diagonal, d'un coin à un autre cependant il existe des situations où vous voulez créer les blocs en partant de leur point central. Pour dessiner un bloc de cette manière, maintenez enfoncé la touche Option après avoir commencé à glisser le curseur pour définir le bloc et ce jusqu'à ce que vous relâchiez le bouton de la souris. Note : si vous enfoncez la touche Option avant de commencer à dessiner le bloc, vous activerez la "main", qui déplace la page dans la fenêtre. Dessiner un bloc carré ou rectangulaire Afin de contraindre l'outil Rectangle ou Ovale, maintenez la touche Majuscule enfoncée quand vous dessinez le bloc. Le résultat sera un carré ou un cercle suivant l'outil sélectionné. Manipuler les blocs Une fois que vous avez créé un bloc, vous pouvez le modifier de différentes façons. Par exemple, vous pouvez modifier ses dimensions et sa forme, le déplacer, le transformer ou modifier ses caractéristiques comme sa couleur de bordure ou de remplissage. Sélectionner un bloc 120 Blocs Avant d'appliquer des changements à un bloc, vous devez tout d'abord le sélectionner en utilisant une de ces quatre méthodes : • Maintenez enfoncée la touche Commande et cliquez n'importe où sur le bloc. (Il s'agit probablement de la manière la plus simple de sélectionner un bloc) • Si Afficher les blocs a été sélectionné dans le menu de la palette Site, cliquez sur le bloc dans cette palette. • Cliquez sur le bord d'un bloc en utilisant l'outil Sélection • Cliquez sur un bloc en maintenant les touches Commande et Option enfoncées afin de sélectionner le bloc derrière lui. Une fois que le bloc est sélectionné, les poignées de sélection (petits carrés noirs) apparaissent sur le contour du bloc. Sélectionner plusieurs blocs Il y a cinq façon de sélectionner plusieurs blocs : • Dans la palette Site, cliquez sur un premier bloc puis cliquez sur les blocs suivants en maintenant la touche Majuscule enfoncée. • Cliquez sur chaque bloc en maintenant les touches Commande et Majuscule enfoncées, • Avec l'outil Sélection, faites glisser le rectangle de sélection autour ou sur les blocs que vous voulez sélectionner. • Choisissez la commande Sélectionner Tout du menu Edition. (Tous les blocs de la page et de la table de montage sont sélectionnés), • Cliquez sur les blocs successifs, empilés les uns derrière les autres, en maintenant les touches Commande, Option et Majuscules enfoncées. Désélectionner un bloc Pour désélectionner un bloc, vous pouvez sélectionner quelque chose d'autre, cliquer à nouveau sur le bloc en maintenant les touches Commande et Majuscule enfoncées, ou cliquer sur toute zone vide de la page ou de la table de montage. Supprimer un bloc Pour supprimer un bloc, sélectionnez le et appuyez soit sur la touche Effacement ou Supprimer du clavier, ou choisissez la commande Effacer du menu Edition. Supprimer le contenu d'un bloc Vous pouvez supprimer le contenu d'un bloc et le laisser sur votre page. S'il contient une image ou un plug-in, sélectionnez le bloc et choisissez Effacer le contenu dans le menu Edition. S'il contient du texte, cliquez dans le bloc, choisissez Tout sélectionner puis Effacer depuis le menu Edition. Blocs 121 Afficher ou masquer les contours de bloc Vous pouvez masquer ou afficher les contours, qui sont affichés par défaut. Pour cela, choisissez Contours dans le menu Affichage. Redimensionner les blocs Vous pouvez redimensionner un bloc en utilisant l'outil Sélection et en glissant les poignées de dimensionnement du bloc. Pour spécifier une taille de manière plus précise, utilisez le dialogue Transformation (menu Bloc), la palette Spécifications ou les commandes clavier. Redimensionner un bloc avec l'outil Sélection 1 Sélectionnez le bloc afin d'afficher les poignées de dimensionnement. Lorsque vous pointez une poignée, le curseur se change en flèche sans queue, 2 Faites glisser une des poignées. Les poignées situées dans les coins vous permettent de dimensionner le bloc dans n'importe quelle direction alors que les poignées sur les bords ne permettent qu'une modification horizontale ou verticale. Maintenez la touche Majuscule enfoncée pendant le dimensionnement d'un rectangle ou d'un ovale afin d'obtenir un carré ou un cercle. Redimensionner un bloc avec la palette Spécifications 1 Sélectionnez le bloc, 2 Dans le panneau Bloc de la palette Spécifications, entrez de nouvelles valeurs dans les champs L (Largeur) et H (Hauteur), puis appuyez sur la touche Retour pour valider les modifications. Pour redimensionner un bloc avec le clavier Maintenez la touche Majuscule enfoncée en même temps que vous modifiez la taille avec les flèches du clavier. Par défaut, cela va modifier les dimensions de 1 pixel en 1 pixel. Vous pouvez changer le pas de déplacement dans les préférences. Redimensionner un bloc avec le dialogue Transformation 1 Sélectionnez le bloc et choisissez Transformation depuis le menu Bloc 2 Entrez les nouvelles valeurs pour les pourcentages de mise à l'échelle et cliquez sur OK. Cette opération redimensionne le bloc et son contenu. Déplacer les blocs Il existe plusieurs façons de déplacer un bloc, dans la mesure où il n'est pas verrouillé. Avec l'outil Sélection • Choisissez l'outil Sélection 122 • Blocs Pointez le bord du bloc (pas les poignées de dimensionnement), cliquez et glissez la souris vers la position souhaitée. Vous pouvez aussi le déplacer en maintenant la touche Commande enfoncée, puis en cliquant n'importe où dans le bloc et en le glissant à la position désirée. Note 1 : Faire glisser des blocs près des guides ou des grilles entraînera leur positionnement automatique sur la ligne du guide ou de la grille, si l'option Guides Magnétiques est activée depuis le menu Affichage. Note 2 : Pour contraindre le déplacement d'un bloc horizontalement, verticalement ou en diagonale, maintenez la touche Majuscule enfoncée après avoir commencé le déplacement. Avec la palette Spécifications 1 Sélectionnez le bloc 2 Entrez les nouvelles valeurs dans les champs X et Y dans le panneau Bloc. (Ceux-ci correspondent normalement au coin supérieur gauche du rectangle englobant le bloc). 3 Appuyez sur la touche Entrée ou Retour. Avec les touches de direction du clavier Pour déplacer un bloc sur la page en utilisant les touches de direction du clavier : 1 Sélectionnez le bloc 2 Utilisez les quatre touches de direction du clavier pour faire varier sa position de 1 pixel vers le haut, le bas, la droite ou la gauche. Vous pouvez modifier la valeur de l'incrément (1 pixel par défaut) dans les Préférences. Astuce : Si vous avez réglé l'incrément à une valeur supérieure ou égale à 10 pixels, vous pouvez déplacer les blocs d' 1/10e de l'incrément en maintenant la touche Option pendant le déplacement au clavier. Déplacer un bloc vers une autre page avec la palette Site Vous pouvez déplacer un bloc vers une autre page à l'intérieur de la palette Site. Faites simplement glisser l'icône du bloc, dans la palette Site, sur l'espace juste en dessous de l'icône de la page souhaitée. Si les blocs ne sont pas visibles dans la palette Site, choisissez Afficher les Blocs dans le menu de la palette. Verrouiller et déverrouiller un bloc Vous avez la possibilité de verrouiller la position d'un bloc afin d'éviter de le déplacer par inadvertance. Pour cela, sélectionnez le bloc et choisissez Verrouiller depuis le menu Bloc ou cliquez sur la case à cocher Verrouiller dans le panneau Bloc de la palette Spécifications. Blocs 123 Modifier la forme d'un bloc Vous pouvez modifier la forme d'un bloc Graphique ou Zone de Lien. Par exemple, vous pouvez dessiner un ovale et plus tard le convertir en rectangle : 1 Sélectionnez le bloc et affichez le panneau Bloc dans la palette Spécifications , 2 Choisissez un type différent dans le menu déroulant Type. Les Blocs HTML ne peuvent être que rectangulaire. Redimensionner un polygone Vous pouvez redimensionner un bloc dessiné avec l'outil Crayon, déplacer, ajouter ou supprimer des points ou modifier les courbes. Utilisez l'outil Sélection pour éditer la forme du bloc et l'outil Crayon pour ajouter ou supprimer des points. Déplacer des points 1 En utilisant l'outil Sélection, sélectionnez le bloc pour afficher les carrés vides, aussi dénommés "poignées de redimensionnement". 2 Pointez une de ces poignées - le curseur de souris changera en flèche vide, sans queue. 3 Faites glisser la poignée appropriée vers la nouvelle position. Ajouter des points Vous pouvez ajouter de nouveaux points au polygone à l'aide de l'outil Crayon : 1 Sélectionnez le bloc. 2 Activez l'outil Crayon et déplacez la souris sur la position du polygone où vous voulez ajouter un point. Le curseur de souris affichera alors un signe "+". 3 Cliquez pour ajouter le point, ou maintenez la touche Majuscule enfoncée pour ajouter un point de courbe. Supprimer des points Vous pouvez supprimer des points d'un polygone à l'aide de l'outil Crayon : 1 Sélectionnez le bloc 2 Activez l'outil Crayon et déplacez le curseur de la souris sur le point que vous voulez supprimer. Le curseur affiche un signe "-". 3 Cliquez sur le point à supprimer. Modifier les courbes 1 Sélectionnez le bloc pour afficher ses points et poignées de direction. 2 Faites glisser les points ou les poignées de direction pour modifier la courbe. 124 Blocs Créer un bloc Graphique à bords arrondis 1 Sélectionnez le bloc et affichez le panneau Bloc dans la palette Spécifications. 2 Entrez la nouvelle valeur dans le champ Arrondi 3 Validez par la touche Retour. Les quatre coins du bloc seront modifiés suivant la valeur saisie. De petits cercles apparaissent dans le bloc, près de chaque coin (en fait, à l'origine du rayon de la courbe). Vous pouvez modifier la forme de chacun des coins en faisant glisser les cercles. Les blocs HTML ne peuvent avoir de coins arrondis. Transformer les blocs Les blocs Graphiques peuvent subir des rotations, des inclinaisons, des mises à l`échelle ou des effets miroir en utilisant soit le dialogue Transformation ou les outils Rotation, Inclinaison et Miroir. Vous pouvez aussi transformer le contenu d'un bloc indépendamment du bloc lui-même. Les blocs HTML ne peuvent pas être transformés. Rotation avec l'outil de rotation Vous pouvez effectuer des rotations d'angles quelconques sur les blocs. Utilisez l'outil Rotation : • Sélectionnez le bloc • Sélectionnez l’outil rotation dans la palette Outils • Faites glisser n'importe quelle poignée afin de tourner le bloc. Afin d'éviter que le contenu ne tourne avec le bloc, maintenez la touche Majuscule enfoncée pendant le déplacement. Les blocs HTML ne peuvent subir de rotation. Rotation avec le dialogue Transformation 1 Sélectionnez le bloc et choisissez Transformation dans le menu Bloc. 2 Sous la section Bloc du dialogue, entrez l'angle voulu dans le champ rotation. Une valeur positive effectue une rotation dans le sens inverse des aiguilles d'une montre. Une valeur négative effectuant une rotation dans l'autre sens. Afin d'éviter que le contenu ne subisse la rotation, entrez l'inverse de la valeur de l'angle pour le bloc. Blocs 125 Inclinaison avec l'outil Inclinaison Vous pouvez incliner les blocs horizontalement ou verticalement d'un angle quelconque : 1 Sélectionnez le bloc 2 Sélectionnez l’outil Inclinaison dans la palette Outils 3 Faites glisser une des poignées pour incliner le bloc (un meilleur contrôle de l'inclinaison est obtenu en manipulant une poignée de bordure plutôt qu'une poignée de coin). Maintenez la touche Majuscule enfoncée pour éviter que le contenu ne soit incliné. Les blocs HTML ne peuvent pas être inclinés. Inclinaison avec le dialogue Transformation 1 Sélectionnez le bloc et choisissez Transformation dans le menu Bloc. 2 Pour incliner le bloc horizontalement, entrez une valeur dans le champ Inclinaison (X). Pour incliner le bloc verticalement, entrez une valeur dans le champ Inclinaison (Y). 3 Cliquez sur OK Effet miroir sur un objet avec l'outil Miroir L'outil Miroir vous permet d'inverser un bloc et en même temps de le tourner. 1 Sélectionnez le bloc 2 Sélectionnez l'outil Miroir dans la palette Outils 3 Faites glisser n'importe quelle poignée de sélection pour tourner et inverser le bloc en même temps. Pour effectuer une symétrie suivant un axe vertical, cliquez simplement sur une poignée. Pour effectuer une symétrie suivant un axe horizontal, faites glisser la poignée de la bordure gauche à travers l'axe central du bloc et relâcher le bouton de la souris. Les blocs HTML ne peuvent subir d'effet miroir. Effet Miroir avec le dialogue Transformation 1 Sélectionnez le bloc et choisissez Transformation dans le menu Bloc. 2 Pour effectuer une symétrie suivant un axe vertical, cochez la case Miroir. Pour effectuer une symétrie suivant un axe horizontal, cochez la case Miroir et entrez une valeur de 180 dans le champ Rotation. 3 Cliquez sur OK. Mettre à l'échelle un bloc avec l'outil Sélection 1 Sélectionnez le bloc. 2 Avec l'outil Sélection, faites glisser une des poignées pour redimensionner le bloc. 126 Blocs • Pour redimensionner un bloc Graphique et son contenu, maintenez la touche Commande enfoncée pendant le déplacement de la poignée. • Pour préserver les proportions de l'image mais la couper pour qu'elle tienne dans le bloc, maintenez la touche Option enfoncée. • Pour préserver les proportions de l'image mais l'obliger à tenir dans le bloc (pour que l'image ne soit pas coupée), maintenez les touches Commande et Option enfoncées. • Pour modifier proportionnellement la taille du bloc et de son contenu en conservant tout découpage maintenez les touches Commande, Option et Majuscule enfoncées pendant le déplacement d'une poignée de coin. Pour plus d'informations, voir Redimensionner les blocs. Mettre à l'échelle un bloc avec le dialogue Transformation 1 Sélectionnez le bloc et choisissez Transformation dans le menu Bloc. 2 Cliquez sur Garder Proportions si vous voulez conserver les proportions originales du bloc. 3 Dans la section Bloc du dialogue, entrez les nouvelles valeurs pour l'échelle horizontale (X) et l'échelle verticale (Y). 4 Cliquez sur OK. Changer les attributs d'un bloc Titres de bloc Lorsqu'un bloc est créé, Freeway lui donne un titre par défaut comme "Bloc 1", "Bloc 2" etc. Le titre d'un bloc est affiché dans le panneau Bloc de la palette Spécifications. Vous pouvez changer ce titre à tout moment. Lorsque vous importez une image dans un bloc, son titre est modifié en fonction du nom du fichier image. Les titres de bloc sont utilisés par Freeway pour générer les noms des images lors de la publication HTML du site. Il est donc conseillé d'éviter les caractères tels que "-" dans les noms d'image afin d'éviter les conflits avec les actions JavaScript, comme les Rollovers. Pour modifier le titre d'un bloc : 1 Sélectionnez le bloc. 2 Dans le panneau Bloc de la palette Spécifications, sélectionnez le nom existant dans le champ Titre et entrez un nouveau nom. 3 Validez le changement avec la touche Retour. Vous pouvez aussi cliquer sur le bloc avec la touche Option enfoncée dans la palette Site si l'option Afficher les blocs est active. Empêcher un bloc d'être publié Blocs 127 Il se peut que vous ne souhaitiez pas qu'un bloc soit inclus lors de la publication de la page, par exemple, lorsque vous ajoutez des notes d'informations à une page. Pour cela : 1 Sélectionnez le bloc et affichez le panneau Bloc de la palette Spécifications 2 Décochez la case Publier. Utiliser les contenus des blocs d'une maquette Vous pouvez concevoir des pages maquettes dont les blocs seront affichés dans toutes les pages. Si vous modifiez le contenu d'un bloc sur une page "non-maquette", vous pouvez le restaurer tel qu'il est dans la maquette : 1 Sélectionnez le bloc et affichez le panneau Bloc dans la palette Spécifications. 2 Cochez la case Utiliser contenu maquette. Utiliser les attributs des blocs d'une maquette Les maquettes sont utiles car elle permettent à des blocs d'apparaître automatiquement sur chaque page. Si vous avez modifié la position ou d'autres attributs d'un bloc, vous pouvez les restaurer : 1 Sélectionnez le bloc et affichez le panneau Bloc de la palette Spécifications 2 Cochez la case Utiliser réglages maquette. Appliquer une bordure à un bloc 1 Sélectionnez le bloc et choisissez Bordure dans le menu Bloc. 2 Choisissez Ligne dans le menu déroulant. 3 Spécifiez la largeur, la couleur et la position de la ligne. 4 Cliquez sur OK. Une bordure ne peut être appliquée qu'à un bloc Graphique (dont le contour est gris dans Freeway). Astuce : Pour créer une bordure pour un bloc HTML existant (contour bleu), commencez par dessiner un autre bloc HTML, puis choisissez une couleur de remplissage correspondant à la couleur de la bordure que vous souhaitez. Ensuite, placez ce bloc HTML sous le bloc HTML existant. Si le bloc de premier plan est transparent, il prendra la couleur du bloc derrière lui, lors de l'affichage dans un navigateur. Réglez alors la couleur de remplissage du bloc de premier plan dans la palette de couleurs. Copier/Coller, dupliquer et arranger les blocs Il est possible de modifier l'ordre d'empilement des blocs sur une page. Vous pouvez aussi copier, dupliquer et coller des blocs dans un document. Couper, copier et coller 128 Blocs 1 Sélectionnez le(s) bloc(s) à couper ou copier. 2 Choisissez Couper ou Copier dans le menu Edition pour transférer les blocs sélectionnés dans le presse-papier. (Couper enlève les blocs de la page, alors que Copier les laisse). 3 Allez dans une autre page ou un nouveau document et choisissez Coller dans le menu Edition. Freeway colle alors les blocs à la position qu'ils avaient dans la page d'origine. Dupliquer les blocs avec le glisser-touche Option Pour effectuer une copie rapide, commencez à faire glisser un bloc avec l’outil Sélection, puis pressez la touche Option et continuer à glisser le bloc jusqu'à la position souhaitée. Vous pouvez aussi utiliser la touche Option afin de créer des copies avec les outils Miroir, Inclinaison et Rotation. Notez que vous devez enfoncer la touche Option après avoir commencer le glisser. Si vous appuyez sur la touche Option avant le glisser, le curseur de souris se transformera en "main" afin d'ajuster la position de la page dans la fenêtre. Si vous maintenez la touche Majuscule enfoncée en déplaçant un bloc, le mouvement sera contraint horizontalement, verticalement ou en diagonale. Dupliquer un bloc avec le dialogue Dupliquer Vous pouvez dupliquer un bloc en autant de copies que nécessaire, en assignant simultanément un décalage horizontal et vertical à chaque nouvel exemplaire. 1 Le bloc étant sélectionné, choisissez Dupliquer dans le menu Bloc. 2 Entrez le nombre de copies désiré, ainsi que le décalage horizontal et vertical. 3 Cliquez sur OK. Aligner les blocs Vous pouvez aligner les blocs sélectionnés par rapport à leurs bords ou à leurs centres : 1 Sélectionnez les blocs à aligner. 2 Choisissez Aligner dans le menu Bloc. Le dialogue Alignement apparaît avec les dernières options d'alignement utilisées. Blocs 3 Cliquez sur les icônes d'alignement horizontal et vertical souhaités. 4 Cliquez sur OK. 129 Modifier l'empilement des blocs à partir du menu Bloc Freeway empile les blocs de chaque page suivant un ordre devant-derrière. Vous pouvez modifier l'ordre des blocs en amenant certains d'entre eux au premier plan, d'autre en arrière plan ou encore d'un niveau vers l'avant ou l'arrière. Pour cela: 1 Sélectionnez le bloc 2 Choisissez A l'arrière plan, Au premier plan depuis le menu Bloc. Choisissez En avant ou En arrière pour modifier d'un niveau la position du bloc dans l'empilement. Modifier l'empilement des blocs avec la palette Site 1 Sélectionnez le bloc. 2 Assurez-vous que l'option Afficher les blocs est active, dans le menu de la palette Site. Puis déplacez le bloc sélectionné vers le haut ou le bas de la liste. Le bloc de premier plan correspond au bloc le plus en bas dans la palette Site. Répartir les blocs Dans le menu Bloc, l'option Espacer... devient disponible dès que vous avez sélectionné plusieurs blocs dans la page. Cette option vous permet d'espacer les blocs sélectionnés suivant trois méthodes: • Espacement par rapport au premier et au dernier bloc sélectionné. • Espacement sur toute la page. • Espacement d'une distance choisie. Vous pouvez répartir les blocs sélectionnés verticalement ou horizontalement, en utilisant leurs bordures, leurs centres ou des délimitations particulières. 130 Blocs Lorsque vous espacez des blocs, vous voudrez sans doute garder la même distance entre chacun d'eux. Cependant, il se peut que vous ne vouliez pas cet espacement régulier et préfériez un espacement basé sur leurs cotés ou leurs centres. Cela peut être utile lorsque les blocs sont de tailles différentes mais sont visuellement centrés, ou alignés à gauche ou à droite. Utilisation de la commande Espacer... 1 Sélectionnez les blocs que vous souhaitez espacer. 2 Choisissez Espacer... dans le menu Bloc. Le dialogue de répartition apparaît montrant une prévisualisation des options sélectionnées et qui affecteront les blocs. Vous pouvez choisir les options ci-dessous : • Direction (Horizontale ou Verticale). • Mode (Entre blocs, Sur la page, Distance fixe). • Distance (en points - seulement disponible avec le mode Distance fixe). • Entre (Blocs, Côtés Gauche/Sommet, Centres, Côtés Droite/Bas) 3 Lorsque vous êtes satisfait des positions des blocs dans la prévisualisation, cliquez sur OK. Si le résultat n'est pas tout à fait bon, vous pouvez utiliser la commande Annuler du menu Edition pour rendre aux blocs leurs positions initiales et essayer à nouveau. Espacer régulièrement les blocs Pour ajuster les positions des blocs afin qu'ils soient espacés régulièrement entre le premier et le dernier bloc sélectionnés, choisissez Entre blocs dans le menu Mode. Assurez-vous que l'option Entre est réglée sur Blocs - c'est normalement la meilleure option. Espacer régulièrement les blocs sur la page Pour ajuster les positions des blocs sélectionnés afin qu'ils soient espacés régulièrement sur la page, choisissez Sur la page dans le menu Mode. Assurezvous ensuite que l'option Entre est réglée sur Blocs. 131 Blocs Espacer les blocs d'une distance fixée Pour espacer les blocs d'une distance fixée, choisissez Distance fixe dans le menu Mode. Choisissez ensuite une des options suivantes dans le menu Entre : • Blocs : positionne les blocs de telle sorte que la distance entre la fin d'un bloc et le début du suivant corresponde à la distance saisie. • Gauches/Sommets : positionne les blocs pour que la distance entre le haut du bloc (lorsqu'une direction verticale est choisie) ou le coté gauche du bloc (lorsqu'une direction horizontale est choisie) et son voisin corresponde à la distance spécifiée. • Centres : positionne les blocs pour que la distance entre les centres d'un bloc et de ses voisins corresponde à la distance saisie. • Droites/Bas : positionne les blocs pour que la distance entre le bas du bloc (lorsqu'une direction verticale est choisie) ou le côté droit du bloc (lorsqu'une direction horizontale est choisie) et son voisin corresponde à la distance spécifiée. Intégrer des blocs et du texte Vous pouvez modifier le comportement du texte dans les blocs Graphiques en utilisant le dialogue Modifier texte. Créer un retrait interne dans les blocs Graphiques Un retrait interne crée un espace entre les cotés du bloc et le texte qu'il contient. Cet espace peut être nécessaire si le bloc a une bordure ou si le texte contient des "avancements" (partie des caractères minuscules comme le b ou le d qui s'étend au-dessus des autres caractères minuscules) que vous voulez garder dans la zone du bloc. Retrait interne = 0 Retrait interne = 8 Pour modifier le retrait interne : 1 Sélectionnez le bloc. 2 Choisissez Modifier texte dans le menu Bloc ou double-cliquez sur le bloc en maintenant la touche Commande enfoncée. 3 Entrez une nouvelle valeur dans le champ Retrait interne. 4 Cliquez sur OK. 132 Blocs Régler l'interligne de la première ligne (interligne initial) L'interligne de la première ligne correspond à l'espace entre le haut d'un bloc et la base de la première ligne de texte. Pour régler cet interligne dans un bloc Graphique : 1 Sélectionnez le bloc. 2 Choisissez Modifier texte dans le menu Bloc ou double-cliquez sur le bloc en maintenant la touche Commande enfoncée. 3 Choisissez parmi les options disponibles dans le menu déroulant Interligne initial : • Capitales : espace laissant la place aux majuscules de plus grande taille de la première ligne • Capitales Accentuées : espace laissant la place pour toutes les majuscules de la première ligne et leurs accents. • Décalage : espace laissant la place pour les avancements de la première ligne. 4 Cliquez sur OK Habillage du texte dans un bloc Graphique Vous pouvez faire que le texte d'un bloc Graphique contourne un bloc chevauchant en utilisant les outils du panneau Bloc dans la palette Spécifications. 1 Sélectionnez le bloc chevauchant. 2 Affichez le panneau Bloc de la palette Spécifications. 3 Cochez la case Habiller. 4 Saisissez une valeur pour la marge entre le texte et le bloc chevauchant, puis validez par la touche Retour. Blocs 133 Le texte dans les blocs derrière le bloc chevauchant est alors placé à la distance spécifiée. La valeur d'habillage ne s'applique qu'au texte graphique derrière le bloc. L'habillage du Texte est désactivé par défaut. Habillage du texte dans un bloc HTML Le texte dans un bloc HTML sera réparti au-dessus et sous tout bloc chevauchant autre qu'une zone de lien (map). Vous ne pouvez pas ajuster le décalage entre le texte HTML et le bloc devant lui. Vous pouvez faire que le texte entoure un élément graphique en positionnant cette image dans le texte HTML en tant qu'élément incrusté. Puis en la sélectionnant et en choisissant Aligner à Gauche (habillage) ou à Droite (habillage) dans le panneau Elément Incrusté. Pour plus d'information voir Blocs Incrustés. Créer des filets horizontaux Les filets horizontaux peuvent être utilisés pour séparer ou organiser visuellement les éléments ou les sections d'une page. Ils peuvent aussi servir à donner de l'importance à du texte ou à un titre, ou simplement à ajouter un effet visuel à votre page. Créer un filet graphique avec l'outil Crayon 1 Sélectionnez l'outil Crayon, et cliquez pour positionner le point de départ de la ligne. 2 Cliquez ailleurs sur la page pour définir le point final. Maintenez la touche Majuscule enfoncée avant de positionner le point d'extrémité pour obtenir une ligne inclinée de 45°. Cliquez pour positionner le point d'extrémité et cliquez à nouveau, pendant que le curseur affiche un cercle fermé, afin de fermer la forme. 3 Choisissez Bordure dans le menu Bloc et réglez la couleur et la largeur de la ligne 4 Cliquez sur OK Créer un Filet Texte 1 Le curseur d'insertion clignotant dans un bloc de texte HTML ou Graphique, choisissez Filet dans le menu Insertion. 134 Blocs 2 Pour modifier les attributs du filet, cliquez dessus avec l'outil Sélection. 3 En utilisant le panneau Filet de la palette Spécifications, ajustez les options pour l'alignement, la taille et le retrait et pour choisir entre un filet plein ou ombré. Relier des blocs Texte pour former une chaîne Vous pouvez spécifier la façon dont le texte remplit les blocs les uns après les autres, en chaînant des blocs Texte entre eux. Déplacer un bloc Texte ne modifiera alors pas le remplissage, et vous pouvez relier les blocs Texte avant ou après avoir saisi du texte. Un bloc texte, qui est trop petit pour montrer tout le texte, affiche une petite icône de débordement dans le coin inférieur droit. Modifier la forme ou la taille d'un bloc lié entraîne le ré arrangement du texte. Chaîner plusieurs blocs Texte 1 Sélectionnez l'outil de chaînage de texte dans la palette d'outils. 2 Cliquez sur le premier bloc et ensuite sur les autres blocs dans l'ordre de remplissage souhaité. Après avoir chaîner des blocs texte, une ligne rouge épaisse reliant les blocs apparaît, indiquant les liens entre les blocs. Des petites flèches blanches seront aussi visibles dans la ligne rouge, montrant le sens de remplissage. Le texte entré dans le premier bloc remplira les blocs chaînés suivants jusqu'à ce que tout le texte soit saisi Afficher le chaînage Blocs 135 Pour voir comment le texte remplit les blocs les uns après les autres, sélectionnez un bloc Texte avec l'outil de chaînage ou de fin de chaînage. L'ensemble des liens reliant les autres blocs Texte à la sélection seront affichés. Sélectionner du texte dans des blocs chaînés Vous avez plusieurs possibilités pour sélectionner du texte dans des blocs chaînés : 1 Cliquez dans le texte avec l'outil Sélection et choisissez Tout sélectionner dans le menu Edition. Tout le texte dans les blocs de ce chaînage sera sélectionné. 2 Placez le curseur au début de la sélection, puis maintenez la touche Majuscule enfoncée et cliquez à l'endroit où vous souhaitez que la sélection se termine. L'ensemble du texte entre ces deux positions sera sélectionné. 3 Cliquez et glissez le long du texte que vous voulez sélectionner. Supprimer le chaînage de blocs Texte Pour casser un lien entre deux blocs Texte : 1 Sélectionnez l'outil de fin de chaînage. 2 Cliquez sur un des blocs chaînés pour afficher les liens. 3 Cliquez sur la ligne rouge reliant les blocs. Le bloc en aval du lien (bloc vers lequel pointent les flèches blanches) est enlevé de la chaîne. Le texte remplit à nouveau les blocs en amont. Si le bloc en amont du lien est un bloc HTML, il est redimensionné verticalement pour contenir le nouveau texte. Si ce bloc est un bloc Graphique, il affichera une icône de débordement dans son coin inférieur gauche montrant qu'il y a plus de texte dans le bloc que d'espace pour l'afficher. Ajouter un bloc Texte dans une chaîne existante Pour ajouter un nouveau bloc Texte dans une chaîne de blocs : 1 Créer le nouveau bloc 2 Utilisez l'outil Chaînage de texte pour cliquer sur le bloc devant venir avant le nouveau dans la chaîne. 3 Cliquez sur le bloc qui vient d'être créé. 4 Cliquez sur le bloc qui le suivra dans la chaîne. Supprimer un bloc Texte de la chaîne de remplissage Lorsque vous supprimez un bloc de la chaîne, le remplissage est à nouveau effectué dans les blocs restants. Pour cela, sélectionnez le bloc avec l'outil Sélection et supprimez le. Couper/Copier et coller un bloc chaîné 136 Blocs Vous pouvez couper ou copier un bloc Texte d'une chaîne. Couper le bloc revient à le supprimer de la chaîne et entraîne le remplissage des blocs restants avec le texte. Insérer un saut vers le bloc chaîné suivant Vous pouvez insérer un saut dans le remplissage du texte depuis un bloc vers le bloc suivant dans la chaîne. Positionnez le curseur où vous souhaitez le saut et sélectionnez Saut dans le menu Insertion (ou utilisez les touches Commande-Entrée simultanément). Si le bloc n'est pas relié en aval à un autre bloc, un "x" sera affiché dans le coin inférieur droit du bloc où vous avez inséré le saut et le texte situé après le point d'insertion disparaîtra de la vue. Vous pouvez cependant créer un autre bloc et le chaîner au bloc contenant le saut. Le texte remplira automatiquement le nouveau bloc. Blocs Incrustés Il existe deux méthodes pour ajouter des blocs à une page : en tant que blocs indépendants et en tant que blocs incrustés. Lorsque vous créez un bloc en utilisant les outils de création, le résultat sera toujours un bloc indépendant cela signifie qu'il peut être déplacé librement, n'importe où sur la page. Cependant, le menu Insertion vous permet d'ajouter des blocs incrustés. Ces derniers sont des blocs ayant été insérés dans le texte d'un bloc Texte, et sont inclus dans le texte. Ils ne peuvent pas être déplacés librement sur la page, mais remplissent le bloc, tout comme le texte. Ils offrent d'autres possibilités d'agencement. Par exemple, une image relative à une partie de texte HTML peut être incluse avant ou après ce texte dans le même bloc Texte, de sorte qu'elle se déplace avec le texte adjacent. Les blocs Graphiques incrustés permettent aussi au texte HTML d'habiller proprement l'image. Les types de blocs suivants peuvent être incrustés: • Blocs Graphique, • Blocs Action, • Contrôles de formulaire • Blocs Marque, • Contenu multimédia Créer des blocs incrustés Les blocs peuvent être incrustés dans un flot de texte HTML en utilisant les commandes du menu Insertion ou en collant un bloc adéquat depuis le presse-papier. Pour créer un bloc incrusté : 137 Blocs 1 Cliquez à l'intérieur du bloc HTML ou de la cellule du tableau pour créer un point d'insertion de texte. 2 Après avoir copié un bloc dans le presse-papier, choisissez Coller dans le menu Edition ou choisissez un bloc à insérer dans le menu Insertion. Le bloc est inséré dans le texte HTML. Sélectionner un bloc incrusté Pour sélectionner un bloc incrusté, cliquer, avec la touche Commande enfoncée, sur le bloc en utilisant l'outil Sélection. Si le point d'insertion de texte clignote déjà dans le bloc qui contient l'élément incrusté, cliquez sur une partie vide de la page ou de la table de montage pour tout désélectionner avant de sélectionner le bloc incrusté. Redimensionner des blocs incrustés Pour redimensionner un bloc incrusté, sélectionner le, de manière à ce que ses poignées soient affichées et manipulez ces dernières ou utilisez le panneau Bloc Incrusté de la palette Spécifications pour le redimensionner. Aligner le texte à côté d'un bloc incrusté Lorsque les blocs incrustés sont insérés dans une ligne de texte, vous pouvez contrôler la position de la ligne de base du texte relativement au bloc incrusté. Sélectionnez simplement le bloc incrusté et choisissez un alignement dans le menu Aligner. Les alignements disponibles sont : en Haut : le haut du texte adjacent est aligné par rapport au haut du bloc incrusté. au Milieu/Centré : le texte adjacent est aligné suivant le milieu vertical du bloc incrusté. Dans Netscape, le milieu de l'image est aligné avec la ligne de base du texte, mais il est aligné avec le milieu du texte dans Internet Explorer. Milieu absolu : le texte adjacent est aligné, de façon sûre, avec le milieu vertical du bloc incrusté. en Bas/Ligne de Base : la lige de base du texte adjacent est alignée avec le bas du bloc incrusté. Bas absolu : les "Descentes"( (la partie des caractères minuscules, tels que le p et e q, qui s'étend en dessous des autres caractères minuscules) du 138 Blocs texte adjacent sont alignés avec le bas du bloc incrusté. à Gauche (habillage) : le bloc incrusté est placé tout à gauche dans la colonne et le texte se place à côté de lui. à Droite (habillage) : le bloc incrusté est placé tout à droite dans la colonne et le texte se place à côté de lui. Certains blocs HTML ne peuvent pas avoir d'habillage de texte autour d'eux. Il s'agit des blocs Formulaires, Marques et certains blocs Action. Contrôler l'espace autour des blocs incrustés Lorsque des blocs et du texte sont adjacents, le décalage entre le texte et le bord du bloc incrusté peut être contrôlé en utilisant les options Espace horizontal et Espace vertical. Par défaut, le texte adjacent est parfaitement collé au bloc incrusté, mais vous pouvez saisir une nouvelle valeur pour ajuster ce décalage. Pour modifier l'Espace Horizontal ou Vertical autour d'un bloc incrusté : 1 Sélectionnez le bloc incrusté 2 Entrez une nouvelle valeur pour les champs Espace horizontal et Espace vertical dans la palette Spécifications et validez par la touche Retour. Insérer des blocs avec le menu Insertion Vous pouvez utiliser le menu Insertion à la place des outils de création pour ajouter de nouveaux blocs. Lorsque vous créez un bloc de cette façon, il est inséré en tant que bloc incrusté dans le texte seulement si un point d'insertion clignote dans le texte avant la création. Dans le cas contraire, le bloc est créé au milieu de la vue dans la fenêtre du document, il est alors indépendant. Note : Lorsque la page courante comporte des cadres, les commandes du menu Insertion ne seront disponibles que si vous travaillez sur une des pages sources affichées dans les cadres. Les blocs, pouvant être créés par l'intermédiaire du menu Insertion, sont : • Blocs HTML • Blocs Graphique • Blocs Action • Contrôle de formulaire (case à cocher, bouton radio, bouton, menu/liste, champ et zone de texte) • Tableaux (peuvent être insérés uniquement en tant que bloc indépendant) Blocs • Blocs Marque 139 140 Travailler sur le texte Travailler sur le texte Lorsque vous travaillez sur du texte dans Freeway, vous disposez de trois options de base : texte HTML version 3.2 standard, texte HTML utilisant le "Feuilles de Styles" (CSS) ou texte graphique. Pour le texte HTML, le standard HTML 3.2 est le plus compatible avec l'ensemble des navigateurs, mais offre des contrôles sur les styles limités. Le standard CSS fournit des moyens de contrôle du texte supplémentaires, tout en générant du HTML. L'inconvénient est que si le navigateur n'est pas compatible CSS, aucun style ne sera affiché. C'est pour cela que Freeway permet de mixer les attributs de formatage du CSS et du HTML 3.2 dans un mode de compatibilité spécial. Dans ce mode, les attributs CSS étendus sont disponibles, comme les attributs HTML normaux. Lorsque le formatage est appliqué lors de la publication, Freeway utilisera le HTML 3.2 autant que possible à la place du CSS. Il n'utilisera le CSS que lorsque les attributs rencontrés ne sont pas disponibles en HTML 3.2. La seule façon d'être sûr que les utilisateurs verront le texte exactement comme vous l'avez formaté est de l'exporter sous forme d'image, le plus souvent dans le format GIF. Mais cela a un inconvénient majeur. Les utilisateurs ne peuvent faire ni recherche sur les textes graphiques, ni copier-coller sous la forme d'un texte éditable. Cela augmente aussi les tailles de fichiers et ralentit le téléchargement. De plus, les utilisateurs ayant des besoins spécifiques, comme les malvoyants, ne pourront pas accéder à votre texte, alors que ceux qui préfèrent afficher le texte avec des polices ou des tailles différentes dans leur navigateur, ne pourront le faire. Pour finir, les moteurs de recherche ne peuvent pas non plus lire le texte graphique, ce qui peut affecter le classement de votre site. En résumé, le texte graphique ne dispose pas des avantages de l'accessibilité et de la souplesse du texte HTML. (Visitez le site http://www.w3.org/ pour une description des idéaux de la conception du HTML et du Web). Le texte HTML possède les avantages suivants face au texte GIF : • Il peut être recherché dans les navigateurs • Il est rapide à télécharger et est rapidement affiché dans les navigateurs • Il peut être copié et collé en tant que texte éditable • Il peut être accessible pour les utilisateurs ayant des besoins spéciaux • Il peut être redimensionné dans les navigateurs (à moins qu'une taille fixe soit spécifiée dans un texte CSS) • Il est utilisé par les moteurs de recherche pour évaluer le contenu d'une page. Travailler sur le texte 141 En conclusion, beaucoup de concepteurs utilisent le texte HTML pour la majorité du contenu d'une page, réservant le texte graphique pour des éléments de décors comme les titres, les logos et les barres de navigation. Ce chapitre explique comment travailler sur le texte dans un document Freeway. Vous pouvez taper le texte vous-même ou importer du texte existant depuis une autre source. Une fois que vous avez saisi le texte dans votre document, vous pouvez : • le copier-coller, • l'éditer, le corriger et le modifier, • faire des recherches et du remplacement de chaîne de caractères • vérifier l'orthographe, • appliquer des attributs et modifier les styles. Ajouter du texte Il existe plusieurs méthodes pour ajouter du texte dans un document Freeway. Vous pouvez importer du texte sauvé dans un fichier au format texte seulement, texte stylisé ou au format RTF (Rich Text Format). Freeway n'importe, pour le moment, pas les autres formats. Pour ajouter du texte : 1 Tapez le nouveau texte directement, 2 Importez un fichier texte préparé auparavant dans une autre application, 3 Collez du texte placé dans le presse-papier par Freeway ou une autre application, 4 Glissez le texte depuis une autre application supportant le Glisser/Déposer. Saisir le texte Pour taper le texte directement dans un bloc HTML ou Graphique : 1 Cliquez dans le bloc avec l'outil Sélection pour position le curseur. Une barre verticale clignotante apparaît au point d'insertion. 2 S’il y a déjà du texte dans le bloc, vous pouvez déplacer le point d'insertion vers une autre position, soit en utilisant les touches de direction du clavier soit en cliquant sur une nouvelle position. 3 Commencez à taper. Pour débuter un nouveau paragraphe, pressez la touche Retour. Le style du nouveau texte dépend de l'endroit où vous avez commencé la frappe. Si vous commencez à taper dans un morceau de texte existant, le nouveau texte aura le même style que le reste du texte. Si aucun style n'avait été paramétré, le texte apparaît dans le style par défaut. Importer un fichier texte avec la commande Importer Texte... 142 Travailler sur le texte Pour importer un fichier texte préparé dans un traitement de texte ou toute autre application, et sauvé au format texte seul, texte stylisé ou RTF (Rich Text Format) : 1 Avec l'outil Sélection, cliquez dans le bloc pour positionner le curseur à l'endroit où vous désirez importer le texte. 2 Choisissez Importer Texte dans le menu Fichier. Le dialogue de sélection affiche tous les fichiers textes disponibles à l'emplacement courant. 3 Trouvez et sélectionnez le nom du fichier que vous voulez. 4 Cliquez sur Ouvrir. Le texte est importé dans le bloc sélectionné. Le nouveau texte se verra affecté le style du texte l'entourant, si celui-ci en a déjà un. Importer du texte avec le glisser déposer à partir du Finder 1 Dans le Finder, localisez le fichier texte que vous voulez importer. 2 Faites glissez le fichier sur la fenêtre du document Freeway, positionnez le sur le bloc destinataire et relâchez le bouton de la souris. Le texte est importé dans le bloc à la position du curseur. Importer du texte avec le glisser déposer depuis une autre application 1 Ouvrez la fenêtre du document de l'application contenant le texte à glisser dans Freeway. 2 Positionnez et redimensionnez la fenêtre de façon à voir le bloc sur la page Freeway. 3 Sélectionnez le texte à glisser. 4 Glissez le texte dans le bloc Freeway. Coller du texte depuis le presse-papier 1 Ouvrez le document contenant le texte que vous souhaitez insérer. 2 Sélectionnez le texte et choisissez Copier dans le menu Edition pour le copier dans le presse-papier. 3 Placez le curseur sur le point d'insertion dans votre document Freeway et choisissez Coller dans le menu Edition. Quand le texte ne tient pas dans un bloc Si le texte est trop grand pour le bloc qui le contient (soit parce que vous travaillez avec une grande taille de police ou parce qu'il y a trop de mots), ce qui va arriver dépend en partie de la nature du bloc, HTML (contour bleu) ou Graphique (contour gris). Dans les deux cas, si le texte est trop grand pour tenir dans la largeur du bloc, le texte disparaît et une icône de débordement (petit "x" noir) apparaît dans le coin inférieur droit du bloc. Pour ajuster le texte au bloc, vous pouvez soit réduire sa taille s'il est toujours sélectionné ou augmenter la taille du bloc. Travailler sur le texte 143 Si le texte est trop grand pour tenir dans la hauteur du bloc, le texte d'un bloc Graphique débordera et l'icône de débordement sera affichée. Par contre, un bloc HTML verra sa taille verticale augmentée de sorte que l'ensemble du texte soit affiché. Si nécessaire, la hauteur de la page sera aussi augmentée pour s'ajuster à la nouvelle taille du bloc. Les blocs HTML qui ont grossi à cause d'un débordement de texte peuvent voir leur hauteur diminuée dès que l'espace nécessaire au texte change. Vous pouvez aussi obliger le texte à remplir un second bloc en les chaînant avant ou après avoir importé le texte. Pour plus de détails sur le chaînage de blocs, voir Relier des blocs Texte pour former une chaîne. Edition du texte Pour utiliser les options de Freeway en matière d'édition de texte, vous devez avant tout sélectionner du texte. Pour éditer le texte : Double-cliquez sur un bloc en utilisant l’outil Sélection. Sélectionner du texte avec l'outil Sélection Utilisez l'une des techniques suivantes pour sélectionner du texte : • Faites glisser le curseur sur un morceau de texte. • Placez le curseur sur un mot et double cliquez dessus. • Placez le curseur dans un bloc et appuyez sur les touches Commande-A pour sélectionner l'ensemble du texte (dans un bloc comme dans un chaînage de blocs). Vous pouvez cliquer plusieurs fois sur du texte avec l'outil Sélection : • Double cliquez pour sélectionner un mot, • Cliquez trois fois pour sélectionner la ligne, • Cliquez quatre fois pour sélectionner le paragraphe, • Cliquez cinq fois pour sélectionner l'ensemble du texte. Vous pouvez aussi utiliser les raccourcis clavier pour sélectionner du texte pour plus d'information, voir Raccourcis-Clavier. Déplacer du texte Pour déplacer du texte, coupez-le (pour le placer dans le presse-papier) et collez-le à la nouvelle position. Rappelez-vous que lorsque vous déplacez du texte vers une autre partie d'un document, il peut prendre le style du texte qui l'entoure. 144 Travailler sur le texte Rechercher et remplacer du texte Vous pouvez trouver et remplacer des mots simples, des combinaisons de mots et des caractères dans un texte sélectionné, un chaînage de blocs ou un document. Trouver une chaîne de caractère Pour rechercher une chaîne dans Freeway : 1 Choisissez Chercher dans le sous-menu Rechercher/Remplacer du menu Edition. 2 Freeway affiche le dialogue de recherche. 3 Taper le mot, la combinaison de mots ou de caractères que vous souhaitez rechercher. 4 Choisissez la partie du document à scruter à partir du menu déroulant Domaine : 5 6 • Document : la recherche a lieu dans l'ensemble du document • Chaînage : la recherche a lieu dans le chaînage où se trouve le curseur (si rien n'est sélectionné, l'option n'est pas disponible) • Bloc : la recherche a lieu dans le bloc contenant le curseur (indisponible si rien n'est sélectionné) Choisissez parmi les options suivantes: • En arrière : recherche dans le texte situé avant le curseur. • En boucle : recherche jusqu'à la fin d'un chaînage (ou au début, si En arrière est sélectionné), retourne au début du texte et continue la recherche jusqu'au curseur. Si En boucle est décoché, Freeway recherche jusqu'à la fin du domaine choisi. • Ignorer casse : recherche parmi les caractères minuscules et majuscules sans distinction. • Mot entier : fait correspondre le texte à des mots entiers et ne recherche pas le texte à l'intérieur des mots. Par exemple, utilisez Mot entier pour rechercher le mot "photo" mais ignorer le mot "photographe". • Laisser le dialogue ouvert : laisse le dialogue de recherche ouvert après que la recherche soit terminée. Dans ce mode, lorsque Freeway passe la fin du document ou de la sélection, un dialogue d'avertissement est affiché. Cliquez sur OK Trouver une sélection Sélectionnez le texte que vous avez besoin de trouver et choisissez Chercher sélection dans le sous-menu Rechercher/Remplacer du menu Edition. Freeway trouvera alors la prochaine occurrence du texte sélectionné. Notez que la Travailler sur le texte 145 commande Chercher suivant trouve les occurrences suivantes du texte sélectionné. Remplacer une chaîne de caractères ou une sélection Vous pouvez rechercher une chaîne de caractères (ou les occurrences d'un texte sélectionné) et la remplacer par une autre chaîne : 1 Choisissez Remplacer depuis le sous-menu Rechercher/Remplacer du menu Edition. Le dialogue suivant apparaît. 2 Choisissez le domaine dans lequel vous voulez scruter (menu déroulant Dans). 3 Saisissez le texte à remplacer dans le champ Chercher. 4 Saisissez le texte de remplacement dans le champ Remplacer par. 5 Choisissez les autres options. Elles sont identiques à celle du dialogue de recherche. 6 Cliquez sur Changer pour remplacer la prochaine occurrence du texte et s'arrêter. Cliquez sur Tout changer pour remplacer toutes les occurrences du texte (dans le domaine spécifié). Note : Vous pouvez annuler un remplacement mais pas le remplacement de tout. Freeway cherche et remplace alors le texte. Si vous avez coché la case Laisser le dialogue ouvert, le dialogue reste ouvert afin que vous puissiez l'utiliser à nouveau. Si vous avez fermé le dialogue, la commande Remplacer suivant remplace l'occurrence suivante du texte sans afficher le dialogue. 146 Travailler sur le texte Vérification orthographique et césures Cette option n'est pas disponible dans Freeway Express. Vous pouvez vérifier l'orthographe des mots de votre document grâce aux dictionnaires installés. Ces dictionnaires doivent être dans le même dossier que l'application Freeway. Si Freeway trouve un mot non référencé, il propose si possible des alternatives. Comme cette vérification est indépendante du contexte, Freeway n'indiquera pas les mots écrits correctement mais mal placés ou mal conjugués. Mais il indiquera des répétitions suspectes. Si un mot est écrit correctement, mais qu'il n'est pas dans le dictionnaire courant, Freeway l'identifiera comme inconnu. Vous pourrez alors l'ajouter au dictionnaire. Vous pouvez utiliser plusieurs langues différentes pour travailler sur le texte. Vous pouvez appliquer une langue à un texte sélectionné avec le menu Texte ou définir la langue par défaut dans le dialogue Style. Une fois que la langue est identifiée et que le dictionnaire adéquat est installé, Freeway utilisera automatiquement le bon dictionnaire pour effectuer les vérifications. Freeway est livré avec des dictionnaires pour le Français, l'Anglais US, GB et Australien, l'Allemand ainsi que pour d'autres langues. Pour installer de nouvelles langues, lancer l'installeur de Freeway depuis le CDROM et choisissez Installation Personnalisée. Vérifier le texte dans une langue précise Si le texte est sélectionné lorsque vous utilisez la vérification orthographique, Freeway suppose que c'est le texte que vous souhaitez vérifier. Autrement, vous pouvez utiliser le dialogue Orthographe pour déterminer le domaine de la vérification (chaînage, document ou bloc Texte). Pour vérifier l'orthographe : 1 Choisissez Orthographe depuis le menu Edition. Freeway affiche le dialogue Orthographe, dont le titre indique le dictionnaire courant (Orthographe : Français, par exemple). 2 Si nécessaire, choisissez Document, Chaînage ou Bloc pour indiquer à Freeway la partie du document à vérifier. 3 Cliquer sur Débuter pour lancer la vérification. Si un mot inconnu est trouvé, il est affiché et des orthographes de rechange sont proposées dans la liste Suggestions. La suggestion la plus probable est placée dans le champ Remplacer par. Vous pouvez aussi choisir un mot dans la liste en cliquant dessus ou taper un autre mot dans le champ Remplacer par. 4 Une fois que le mot corrigé est saisi, cliquez sur un des boutons suivants: Travailler sur le texte 5 • Changer : modifie cette occurrence du mot. • Tout changer : modifie toutes les occurrences du mot. • Ignorer : ignore cette occurrence du mot • Tout ignorer : ignore toutes les occurrences du mot. 147 Fermez le dialogue Orthographe. Vérifier l'orthographe de plusieurs langues Si vous vérifiez une sélection de texte qui contient plus d'un style de langue, vous devez cliquer sur Options dans le dialogue Orthographe et vous assurer que Langue du style est sélectionné. Freeway pourra alors utiliser le dictionnaire approprié pendant la vérification. 1 Choisissez Orthographe dans le menu Edition. Freeway affiche le dialogue. 2 Cliquez sur Options afin d'afficher le dialogue des options. 3 Le menu déroulant Langue affiche la langue courante. L'option Langue du Style indique à Freeway d'utiliser le dictionnaire approprié au vu de la langue appliquée au texte. Sinon, vous pouvez vérifier le texte avec un dictionnaire précis. Dans ce cas, sélectionnez la langue dans le menu. 4 Cliquez sur OK 5 Cliquez sur Débuter pour lancer la vérification. Freeway recherche automatiquement dans les bons dictionnaires lorsqu'il rencontre un texte de langue différente. Dictionnaires utilisateurs En plus des dictionnaires installés, vous pouvez créer vos propres dictionnaires pour les mots particuliers de certains documents. Ils sont très pratiques, par exemple, si votre document contient beaucoup de noms propres ou de termes 148 Travailler sur le texte scientifiques. Vous pouvez aussi copier les fichiers de dictionnaires utilisateurs et les utiliser pour d'autres documents Freeway. Créer un dictionnaire utilisateur 1 Choisissez Orthographe dans le menu Edition pour afficher le dialogue Orthographe. 2 Cliquez sur Options. Freeway affiche le dialogue Options orthographe. 3 Cliquez sur Ajouter. 4 Entrez un nom du dictionnaire et localisez l'emplacement où stocker le dictionnaire. 5 Cliquez sur Enregistrer. Freeway crée un nouveau fichier pour le dictionnaire et revient au dialogue Options orthographe. Ajouter des mots dans un dictionnaire utilisateur pendant la vérification 1 Lancez une vérification orthographique. 2 Lorsque Freeway atteint un mot qui n'est pas dans un dictionnaire installé, sélectionnez un dictionnaire dans le menu déroulant Dictionnaire. 3 Cliquez sur Ajouter. Freeway ajoute le mot au dictionnaire utilisateur choisi. Ajouter des mots dans un dictionnaire utilisateur avec le dialogue 1 Affichez le dialogue Orthographe. 2 Cliquez sur Options. 3 Sélectionnez un dictionnaire dans la liste. 4 Cliquez sur Editer. Freeway affiche le dialogue Dictionnaire Utilisateur. 5 Vous pouvez maintenant ajouter, modifier ou supprimer des mots du dictionnaire. Vous pouvez aussi importer un autre dictionnaire ou exporter celui qui est en cours d'édition. 6 Cliquez sur OK quand vous avez terminé. Contrôler les césures Les césures ne sont disponibles dans Freeway que pour les textes graphiques. En effet, le HTML ne supporte pas les césures. Les césures sont désactivées par défaut pour les textes graphiques. Si vous désirez activer la césure, éditez le Style par défaut dans les options Texte des Préférences et cochez la case Césure. Cette option affectera tout le texte dans le document courant. Travailler sur le texte 149 Si vous ne désirez activer la césure que pour un bloc donné, sélectionnez le texte et choisissez Césure dans le menu Style. Pour un contrôle plus fin de l'application des césures, vous pouvez définir un style de paragraphe dans lequel vous activez ou non les césures, et définissez les espacements de caractères minimums, optimum et maximum devant être utilisés. Ajouter des exceptions de césures dans un dictionnaire installé 1 Choisissez Césure dans le menu Edition pour afficher le dialogue Exceptions de césure. 2 Entrer le mot dans le champ texte, en tapant les traits d'union aux endroits de coupure, si nécessaire. Vous pouvez entrer un trait d'union insécable avec le caractère "=". Tout mot ne devant pas être coupé doit être saisi sans trait d'union. 3 Sélectionnez le dictionnaire auquel ajouter le mot et cliquez sur Ajouter. Freeway ajoute les exceptions de césures dans un fichier qui est utilisé avec le dictionnaire choisi. Vous pouvez importer ce fichier d'exceptions dans un autre document en utilisant le bouton Importer... dans le dialogue Exceptions de césure. 150 Travailler sur le texte Exporter du texte Pour exporter le contenu du bloc courant dans un fichier texte, assurez-vous d'avoir un point d'insertion dans le bloc ou un texte sélectionné. Choisissez alors Exporter dans le menu Fichier. Sélectionnez Texte seul dans le menu déroulant au bas du dialogue. Le texte du bloc sera exporté dans un fichier texte. Styles Lorsque vous modifiez les options de formatage, il faut savoir que les attributs sont regroupés en deux catégories : • Attributs Caractères que la police et la taille - appliqués à un texte entier ou à un simple caractère. • Attributs Paragraphe que l'alignement et l'interlignage - appliqués aux paragraphes entiers. Dans Freeway, vous pouvez appliquer les attributs directement à du texte sélectionné, mais cela peut être long et fastidieux s'il y a plusieurs attributs identiques à appliquer à différents morceaux de texte dans le document. Afin de gagner du temps, un ensemble d'attributs peut être sauvé en tant que style et appliqué en une seule opération à n'importe quelle partie de texte. L'application des styles donne un aspect cohérent à votre document. Freeway génère des styles temporaires au vol pendant que vous travaillez, ce qui vous évite la création de vos propres styles à partir de rien. Freeway dispose de styles au niveau caractères comme au niveau paragraphe. Il vous donne ainsi les avantages des styles pour les mots ou les caractères et des styles pour les paragraphes entiers. Ce chapitre explique comment créer, appliquer et manipuler les styles par l'intermédiaire du dialogue Style et de la palette Styles. Ainsi, vous allez apprendre à modifier les attributs de style comme la police et l'alignement de paragraphe, par le biais de quelques exemples. Concepts de base Cette section introduit les concepts de base dont vous aurez besoin pour travailler avec les styles. Les sections suivantes détailleront les marches à suivre pour créer et manipuler les styles. Créer, appliquer et changer les styles Il y a plusieurs méthodes pour travailler avec les styles dans Freeway : • Vous pouvez modifier les attributs de caractères et de paragraphe pour chaque morceau de texte, en utilisant le panneau Texte de la palette Spécifications ou le menu Styles. À chaque fois que vous modifiez les attributs du texte de cette façon, un nouveau style temporaire est créé dans Travailler sur le texte 151 la palette Style. Les nouveaux styles sont créés uniquement pour un ensemble de réglages unique. Si vous appliquez à deux textes le même ensemble de paramètres, Freeway utilisera le style existant. • Vous pouvez modifier la définition d'un style existant, avec le dialogue Style, et ainsi modifier l'apparence de l'ensemble du texte du document (utilisant ce style). • Vous pouvez changer l'apparence du texte sélectionné en appliquant un style différent depuis la palette Styles. • Vous pouvez définir un style complètement nouveau avec le dialogue Styles et ensuite l'appliquer au texte en utilisant la palette Styles. La palette Styles La palette Styles affiche les styles existant dans un document et indique quels sont ceux qui sont appliqués au texte sélectionné. Vous pouvez aussi utiliser cette palette pour appliquer des styles différents. Styles temporaires et permanents Un style peut être temporaire ou permanent. À chaque modification d'un attribut de caractère ou de paragraphe dans un bout de texte, un style temporaire est créé. Ce style n'existe que tant qu'il est utilisé (appliqué à un ou plusieurs morceaux de texte). Si le texte est supprimé ou si ses attributs sont modifiés, le style est effacé. Par exemple, si vous tapez un mot et que vous changez sa police, vous créerez un style temporaire appelé "Style1". Si vous changer la taille de la police de ce mot, "Style1" disparaîtra et "Style2" sera créé. Cependant, vous pouvez définir un style permanent qui sera conservé dans le document, même s'il n'est pas utilisé. Les noms de style temporaire sont affichés avec une police normale dans la palette Styles, alors que les noms de style permanent sont affichés en gras. Style de texte HTML et graphique Les attributs de formatage disponibles sont différents pour les textes HTML et graphiques. Lors de la définition d'un style, vous pouvez sélectionner des 152 Travailler sur le texte attributs HTML ou GIF. Cependant, le fait de prendre un style défini avec un ensemble d'attributs de publication dans un format et de le sélectionner pour la publication dans l'autre format conduira à des résultats différents - seuls les attributs pertinents pour le format d'exportation choisi seront appliqués. Sans Style et Style par défaut Dans un nouveau document, vous ne verrez que "Sans Style" listé dans la palette Styles. Lorsque vous taperez du texte pour la première fois dans le document, "Sans Style" lui sera appliqué. Parce qu'il n'a aucun attribut de caractère ou de paragraphe spécifié par l'utilisateur, il sera affiché avec les attributs du Style par défaut. Pour définir le style par défaut du document, utilisez le panneau Texte du dialogue Préférences. Vous pouvez alors spécifier chaque attribut de formatage du texte. Styles de caractère et de paragraphe Vous pouvez créer à la fois des styles de caractère et de paragraphe. Les styles de caractère contiennent les attributs appliqués à un seul caractère, par exemple la police, la taille, le style et la couleur. Les styles de paragraphe incluent les attributs comme l'alignement, l'interlignage (l'espace vertical entre les lignes) et les alinéas. Ils sont affichés dans la palette Styles avec le symbole "¶". Le panneau Texte de la palette Spécifications et le menu Style vous donnent accès à certains attributs de caractère et de paragraphe du texte HTML ou GIF. Le dialogue Style propose l'ensemble des attributs de caractère et de paragraphe. Si vous avez appliqué un style de caractère à une partie d'un paragraphe et un style de paragraphe à celui-ci, vous verrez les deux styles sélectionnés dans la palette Styles lorsque le texte sera sélectionné. Création et édition des styles Cette section vous apprend à créer les nouveaux styles ou à modifier les styles existant, avec le dialogue Style. Si vous modifiez un style, toutes les occurrences de texte avec ce style changeront. Vous pouvez créer un style à partir de rien, sans référence à un autre style ou modifier un style existant. Afficher le dialogue Style Pour créer ou modifier un style, vous devez afficher le dialogue Style. Il existe plusieurs moyens de le faire : • Dans la palette Styles, choisissez Nouveau Style dans le menu ou cliquez sur l'icône Nouveau Style dans le coin inférieur gauche de la palette. • Choisissez Styles dans le menu Edition et cliquez sur Ajouter ou Editer dans le dialogue d'édition des styles. Travailler sur le texte • 153 Pour modifier un style, cliquez avec la touche Commande enfoncée ou double cliquez sur son nom dans la palette Styles. Définir un style Une fois que vous avez affiché le dialogue Style, vous pouvez définir les attributs spécifiques de caractère et de paragraphe. 1 Si nécessaire, entrez ou modifiez le nom du style dans le champ Nom. 2 Réglez les valeurs et les menus déroulants dans les panneaux Caractère et Paragraphe. 3 Lorsque les modifications sont terminées, cliquez sur OK pour fermer le dialogue Style. Vous devrez peut-être cliquer sur OK dans le dialogue Edition des Styles. Si vous avez créé un nouveau style, il est alors affiché dans la palette Style et sera appliqué au texte. Si vous avez édité un style, tout le texte l'utilisant dans le document sera changé pour refléter les modifications. Appliquer un style La palette Styles affiche tous les styles en cours d'utilisation dans un document. Dès qu'un style est créé, vous pouvez l'appliquer au texte : 154 Travailler sur le texte 1 Sélectionnez le texte auquel vous souhaitez appliquer le style. 2 Dans la palette Styles, cliquez sur le nom du style que vous voulez. Note: Si la palette Styles n'est pas visible, ouvrez la en choisissant Styles depuis le menu Fenêtre. Si vous sélectionnez un morceau de texte ayant plusieurs styles appliqués, tous les styles seront sélectionnés dans la palette Styles. Pour appliquer un style à un morceau de texte, sélectionnez le texte et ensuite cliquez sur le nom du style dans la palette Styles. Vous pouvez cliquer sur un style déjà sélectionné comme sur un style totalement différent. Renommer un style Vous pouvez changer les noms des styles pour les rendre facilement identifiable. Pour cela : 1 Dans la palette Styles, double cliquez sur le nom du style ou cliquez sur l'icône Edition des Styles dans le coin inférieur gauche pour ouvrir le dialogue Style. 2 Entrez le nouveau nom dans le champs Nom. 3 Cliquez sur OK pour fermer le dialogue Style. Vous pouvez aussi cliquer, avec la touche Option enfoncée, sur le nom du style dans la palette Styles pour sélectionner le nom existant - saisissez le nouveau nom et validez par la touche Retour. Les noms de style ne peuvent contenir que des caractères alphanumériques, les autres caractères ne sont pas autorisés. Enlever un style d'un texte Vous pouvez enlever tous les styles appliqués à un texte : 1 Sélectionnez le texte. 2 Cliquez sur [Sans Style] dans la palette Styles. Freeway enlève tous les attributs de formatage et applique le style par défaut. Importer des styles Vous pouvez importer des styles permanents dans un document Freeway différent : 1 Choisissez Styles dans le menu Edition. 2 Cliquez sur Importer... pour ouvrir le dialogue listant les autres documents Freeway. 3 Localiser le document (celui duquel vous voulez importer les styles), sélectionnez le et cliquez sur Ouvrir. 4 Cliquez sur OK pour fermer le dialogue Edition des Styles. Freeway importe tous les styles permanents du document sélectionné. Si un style importé porte le même nom qu'un style du document en cours, le texte Travailler sur le texte 155 avec ce style change. Un avertissement est affiché avant que cela n'arrive. Cliquez sur Renommer pour appliquer des nouveaux noms aux styles importés ou Remplace pour substituer les styles. Tout style importé avec un nom unique est ajouté à la liste des styles. Rendre un style temporaire permanent Un style permanent est toujours affiché dans la palette Styles, même s'il n'est pas utilisé. Pour rendre un style permanent : 1 Double cliquez sur le style temporaire dans la palette Styles. 2 Cochez la case Permanent dans le dialogue Style. 3 Cliquez sur OK pour fermer le dialogue. Masquer et afficher les styles temporaires La liste affichée dans la palette Styles peut afficher uniquement les styles permanents ou à la fois les styles permanents et les styles temporaires. Cliquez sur l'icône du menu de la palette Styles et choisissez Styles temporaires ou Styles permanents uniquement. Utiliser le Style par défaut Le style par défaut est utilisé par Freeway pour formater le texte n'ayant pas de style spécifique. Vous pouvez modifier et utiliser le style par défaut ou l'ignorer et utiliser uniquement les styles que vous aurez créés. Le style par défaut n'apparaît pas dans la palette Styles, mais tout texte ayant [Sans Style] pour style seront affichés avec les attributs du style par défaut. Modifier les attributs du style par défaut Vous pouvez changer le style par défaut à tout moment ; mais si vous décidez de travailler avec le style par défaut, vous voudrez probablement le changer au moment de la création d'un nouveau document Freeway. Pour cela: 1 Choisissez Préférences dans le menu Fichier. 2 Sélectionnez le panneau Texte 3 Cliquez sur le bouton Style par défaut... 4 Entrez les attributs que vous désirez dans le dialogue Style. 156 5 Travailler sur le texte Cliquez sur OK pour confirmer les réglages puis sur OK dans le dialogue Préférences du document. Les attributs choisis sont alors appliqués à tout texte GIF n'ayant pas de style. Texte HTML L'apparence du texte HTML est déterminée par les réglages de votre navigateur, à moins que vous n'appliquiez un formatage spécifique. Vous pouvez vous limiter aux options de formatage HTML 3.2 ou utiliser aussi les attributs du standard CSS (Feuilles de Styles). Vous pouvez choisir si le style de formatage de vos pages Web est purement HTML 3.2, un mélange de HTML 3.2 et de CSS ou uniquement CSS. Freeway Express outputs HTML 4.0 without support for calques or CSS styles. Réglez ces options en choisissant le niveau HTML de la page avec le panneau Page de la palette Spécifications ou pour le document avec le dialogue Réglage document : HTML 3.2 Le rendu est créé avec des tableaux invisibles. Les blocs Calque et les options CSS ne sont pas disponibles. HTML 3.2 + CSS Le rendu est créé avec des tableaux invisibles. Les blocs Calque ne sont pas disponibles. Le formatage CSS est disponible mais le formatage utilise les options HTML 3.2 autant que possible pour garantir une compatibilité maximale avec les anciennes versions de navigateurs. HTML 4.0 Le rendu est créé avec des tableaux invisibles par défaut, mais on peut régler les éléments de la page pour qu'ils utilisent les calques HTML 4.0. Le formatage CSS est disponible et tout le formatage de texte HTML est fait par des balises CSS. Les pages n'ont plus de marges inutilisables. Feuilles de Styles (CSS, Freeway Pro)) Les navigateurs compatible HTML 4.0 sont capables de gérer un nouveau standard : le Feuilles de Styles (CSS). Avec le CSS, la typographie sur le Web a fait un grand pas en avant, offrant des contrôles typographique équivalent à ceux des logiciels de PAO et les traitements de texte. Freeway vous permet d'utiliser le formatage CSS pour contrôler l'apparence du texte HTML, en accord avec les spécifications HTML 4.0. Cependant, l'utilisation du formatage CSS reste problématique avec les anciens navigateurs. À moins que les visiteurs n'utilisent Explorer 3 ou Navigator 4, ils ne verront que du texte non formaté. 157 Travailler sur le texte Pour cela, Freeway offre la possibilité de mixer le formatage CSS et HTML3.2 dans un "mode compatibilité". Dans ce mode, les attributs CSS étendus sont disponibles comme les attributs normaux du texte HTML. Lorsque le formatage est appliqué pour la publication, Freeway utilisera le plus possible la méthode HTML 3.2 plutôt que le CSS. Il n'utilisera le CSS que si cela est nécessaire. Cela signifie que lorsque les pages sont lues par des navigateurs gérant le CSS, formatages conventionnels et CSS sont affichés. Le formatage appliqué au texte HTML ne sera donc pas totalement perdu lorsque les visiteurs n'utilisent pas une version récente des navigateurs. Régler le niveau HTML des pages au HTML 4.0 entraînera un rendu en CSS et aussi permettra aux blocs individuels d'être considérés comme des calques HTML 4.0. Avec le formatage CSS, il faut savoir que certains attributs ne sont pas supportés par Internet Explorer 4.0 ou Netscape 4.0. De plus, certains attributs donneront un résultat différent suivant le navigateur. Dans la description des attributs suivants, toute différence entre les navigateurs est indiquée. Comme toujours, il est essentiel de tester vos pages avec plusieurs navigateurs afin d'éviter les mauvaises surprises. Attributs HTML Les attributs disponibles varient selon que le formatage CSS est utilisé ou non. Le tableau suivant décrit les attributs disponibles. Attribut HTML 3.2 CSS Police Taille Style typé Couleur Décalage Casse Couleur de fond Espacement des lettres Espacement de mots Curseur Langue Alignement Liste Alinéa Interlignage Espace avant Espace après Oui Oui Oui Oui Oui Oui Oui Oui Oui Oui Oui Oui Oui Oui Oui Oui Oui Oui Oui Oui Oui Oui Oui Oui Oui Oui Attributs de caractère pour le texte HTML Police 158 Travailler sur le texte Le texte HTML est affiché avec une police proportionnelle par défaut dans le navigateur si aucun attribut n'est spécifié pour la Police dans Freeway. Pour la plupart des navigateurs, cette police est initialement le Times ou un équivalent, mais les utilisateurs changent fréquemment la police par défaut de leur navigateur. Il en résulte que vous ne pouvez pas être certain des polices qui apparaîtront dans un navigateur à moins d'en spécifier une en particulier dans Freeway. À propos des jeux de polices Lorsque vous appliquez une police en HTML, la police exacte doit être présente sur la machine du visiteur afin que le texte soit affiché correctement. Malheureusement, même les nom des polices standard varient suivant les plate-formes. Les jeux de polices permettent de contourner ce problème. Dans un jeu de polices, vous définissez une série de noms de polices alternatives, que le navigateur essaye d'utiliser pour afficher le texte. Le navigateur essaiera chaque police listée dans le jeu jusqu'à ce qu'il en trouve une présente sur l'ordinateur du visiteur. S'il n'en trouve pas, la police par défaut est utilisée. Freeway fournit une liste de quatre jeux de polices par défaut, dénommés : Times, Courier, Helvetica et Symbol. Les versions de ces polices sont communément trouvées sur la plupart des ordinateurs et seront utilisées si le navigateur peut lire les balises de police et si l'utilisateur dispose des polices sur son ordinateur. Comme les noms de polices varient suivant les systèmes, les noms alternatifs sont indiqués dans la définition du jeu de polices. Vous pouvez les éditer, ou créer vos propres jeux de polices en utilisant le dialogue Jeu de polices de Freeway. Vous pouvez appliquer un jeu de polices différent à un morceau de texte avec le menu déroulant dans le panneau Texte de la palette Spécifications ou le dialogue Style. Les jeux de polices définis dans Freeway peuvent aussi être appliqués avec le CSS. De plus, vous pouvez ajouter les termes "serif" ou "sans-serif" à la fin de la liste de polices dans le jeu. Le navigateur sélectionnera automatiquement la police par défaut serif ou sans-serif. Un exemple de jeu de caractère pourrait être : "Verdana, Geneva, Arial, Helvetica, Sans-serif". Définir un nouveau jeu de polices 1 Choisissez Jeux de polices dans le menu Edition ou choisissez Nouveau... dans le menu déroulant Police du panneau Texte HTML. 2 Si vous choisissez Jeux de polices dans le menu Edition, le dialogue Jeux de Polices apparaît. Cliquez sur Ajouter. 3 Spécifiez un nom représentant votre jeu de polices. Ce nom apparaîtra dans le menu déroulant Police HTML. Travailler sur le texte 159 4 Choisissez une police écran. La police écran sera utilisée dans Freeway pour afficher le texte qui a cette police. La police est automatiquement ajoutée à la liste de noms. 5 Entrez une liste de noms de polices additionnelles que vous désirez utiliser, séparés par des virgules, dans l'ordre dans lequel elles doivent être utilisées. Il serait bon d'essayer les polices de votre jeu de polices pour être sûr d'être satisfait du rendu pour chaque police et pour la taille choisie. Créez un jeu de polices spécial pour expérimenter le rendu du texte suivant la police écran. Éditer et supprimer des jeux de polices Choisissez Jeux de polices dans le menu Edition. Le dialogue Edition des Jeux de Polices apparaît. Vous pouvez y définir de nouveaux jeux de polices ou éditer les jeux existant. Sélectionnez un jeu et cliquez sur Editer si vous souhaitez le modifier ou le renommer. Cliquez sur Effacer pour le supprimer. Cliquez sur OK lorsque vous avez terminé. Les attributs de caractères CSS (Freeway Pro)) Pour pouvoir utiliser la plupart des attributs suivants, le niveau HTML 3.2+CSS ou HTML 4.0 doit être sélectionné pour la page courante ou le document. Ces attributs sont modifiables à partir du menu Style ou du dialogue Edition des Styles : 1 Choisissez Styles dans le menu Edition, cliquez sur l'icône d'édition des styles dans la palette Styles ou cliquez, avec la touche Commande enfoncée, sur un style de la palette. 2 Dans le dialogue Edition des Styles, sélectionnez un style et cliquez sur Editer. 3 Si le menu déroulant Caractère affiche GIF, placez le sur HTML. 4 Cochez la case Afficher attributs CSS. Taille 160 Travailler sur le texte La taille du texte HTML peut être spécifiée dans différentes unités Freeway Express supporte seulement les tailles standard de l'HTML 3.2. A moins qu'elle n'aie été réglée pour utiliser des valeurs fixes en CSS, la taille de base des caractères HTML est définie dans les préférences des navigateurs. Le texte HTML 3.2 est restreint à un jeu de tailles relatives. En HTML 3.2, il n'est pas possible de choisir une taille spécifique telle que le "12 point". Les polices sont affichées différemment suivant la plate-forme (un tiers plus grand sur les PC sous Windows que sur Macintosh). À moins que vous n'utilisiez des tailles CSS fixes, vous ne pourrez pas prévoir le nombre de lignes qu'occupera votre texte, ni le nombre de mots contenus dans une ligne. Pour une analyse des problèmes du HTML, reportez-vous à Autres Problèmes du texte HTML. Pour une comparaison générale des textes HTML et Graphiques, reportez-vous à Travailler sur le texte. Pour fixer la taille d'un caractère HTML ou d'une sélection, utilisez la palette Spécifications, le menu Style ou le dialogue Style. Pour une liste des raccourcis clavier de Freeway modifiant la taille de caractère, voir RaccourcisClavier. Les unités disponibles pour régler les tailles sont : Points Vous pouvez spécifier une taille en points avec des valeurs numériques. Tailles relatives Vous pouvez spécifier une taille relative à la taille de la police de base du navigateur. Tailles nommées Vous pouvez définir un texte comme XX-petit, Xpetit, Petit, Moyen, Grand, X-grand, XX-grand. Style Les styles de texte disponibles incluent normal, gras, italique, souligné, barré, surligné (CSS seulement) ou clignotant. Le style clignotant ne fonctionnera que sur Netscape (CSS ou HTML). Le surlignage ne fonctionnera que sur Internet Explorer 4.0 et supérieur. Couleur La couleur de texte HTML utilise des valeurs RVB. Vous pouvez les choisir depuis la liste de couleurs du document, depuis le nuancier de couleurs Web ou depuis le nuancier Mac OS. Pour plus d'information, reportez-vous à Utiliser les couleurs. Décalage Vous pouvez appliquer trois degrés d'indice et d'exposant au texte HTML avec l'option Décalage. Celle-ci modifie normalement la taille du texte ainsi que sa ligne de base. Travailler sur le texte 161 Casse (CSS, Freeway Pro) Les styles suivants peuvent être appliqués au texte CSS : Capitale (écrit la première lettre de chaque mot en majuscule), Majuscule (écrit toutes les lettres en majuscules), Minuscule (transforme tout le texte en minuscules), Petites majuscules (écrit tout le texte en majuscules mais rend la première lettre de chaque mot un peu plus grande). Couleur de fond (CSS, Freeway Pro)) Avec le formatage CSS, les paragraphes peuvent avoir une couleur de fond, qui donne l'effet d'un surlignage au marqueur. Espace Lettres (CSS, Freeway Pro)) Utilisez cette option pour augmenter ou réduire l'espace entre les lettres. Espace mots (CSS, Freeway Pro)) Utilisez cette option pour augmenter ou réduire l'espace entre les mots. Curseur (CSS, Freeway Pro)) Utilisez cette option pour spécifier la forme du curseur apparaissant au-dessus de certaines zone du texte HTML. Les possibilités sont : Réticule, Texte, Attente, Aide, Auto, Ouest - Changer taille, Nord-Ouest-Changer taille, NordChanger taille, Nord-Est-Changer taille, Est-Changer taille, Sud-Est-Changer taille, Sud-Changer taille, Sud-Ouest-Changer taille. Langue (Freeway Pro) Utilisez cette option pour spécifier le dictionnaire utilisé dans Freeway pour vérifier l'orthographe et les césures (ceci ne change pas le jeu de caractères du texte pour son rendu dans le navigateur). Encodage du texte (Codage) Le menu Codage du panneau Page de la palette Spécifications vous permet de sélectionner la langue cible. Cela vous permet des pages en Japonais, Russe ou toute autre langue dont vous disposez. Freeway consulte les convertisseurs d'encodage de Mac OS pour déterminer la restitution du texte dans les blocs HTML. Voici comment fonctionne le codage dans Freeway : Lorsque vous sélectionnez un codage pour une page, un Meta Tag est ajouté au document pour spécifier la langue. Les éléments du menu codage montrent les noms de ces langues sur le Web. Les navigateurs utilisent ces codages pour déterminer le jeu de caractères à utiliser pour afficher la page - cela signifie que les caractères accentués peuvent être affichés directement dans le HTML (comme "Ö" plutôt que "&ouml;"). Si vous sélectionnez comme codage "Sans", tous les caractères spéciaux seront traduits en codes HTML. Les options de codage sont aussi liées aux polices sélectionnées dans le panneau Texte des Préférences de Freeway. Chaque codage est associé à la 162 Travailler sur le texte fois à une police fixe et une police proportionnelle, qui seront utilisées pour l'affichage dans Freeway. Les polices fixes et proportionnelles sont utilisées pour représenter les polices par défaut de ces codages dans les navigateurs. Pour sélectionner d'autres polices pour le texte HTML, vous devez utiliser le dialogue Jeux de polices depuis le menu Edition. Freeway doit choisir, au lancement de l'application, les polices appropriées pour chaque codage. Si vous n'avez pas les polices spécifiques ou si vous n'avez pas installé les scripts de langue spécifiques nécessaires pour saisir du texte dans ces langues (ainsi, vous aurez besoin du kit de langue Cyrillique pour le Russe), la police Latin sera choisie par défaut. Les cases à cocher et les boutons radio des blocs Formulaire utilisent la police fixe, tout comme le texte HTML dont la police a été spécifiée fixe. En plus du texte dans les blocs HTML, d'autres champs (comme Titre, Texte Alt et éléments de formulaires) sont aussi affectés par le codage. Cela signifie que pour une page non Latine (telle qu'en Russe ou Japonais), ces champs peuvent être entrés soit dans la langue spécifique soit en Latin. Note : Pour le texte HTML dans une langue non Latine, le navigateur du visiteur exigera un support de la langue pour afficher la page correctement. Attributs de paragraphe du texte HTML Alignement Le texte HTML peut être aligné à gauche, centré, aligné à droite ou justifié. L'alignement justifié est une option CSS, uniquement dans Freeway Pro. Liste Des options sont disponibles pour formater des paragraphes en tant que liste : • Marques rondes pleines • Marques carrées • Marques rondes vides • Numéroté • Latin (majuscule) • Latin (minuscule) • Alphabétique (majuscule) • Alphabétique (minuscule) • Sans marque • Sans alinéa Interligne (CSS, Freeway Pro)) Travailler sur le texte 163 La hauteur de ligne ou "interligne" du texte HTML formaté en CSS peut être donné avec n'importe quelle valeur, en utilisant un pourcentage par rapport à la taille du texte ou une valeur en points. L'interlignage n'est pas supporté par tous les navigateurs. Alinéa Les alinéas peuvent être réglés pour utiliser des niveaux de retrait standard spécifiés par le HTML, ou toute valeur numérique. Pour spécifier une valeur (CSS, Freeway Pro seulement), choisissez Autre... depuis le sous-menu Alinéa du menu Style, ou simplement sélectionnez le champ Alinéa dans le panneau Texte de la palette Spécifications et entrez un nombre. Espace avant, Espace après (CSS, Freeway Pro uniquement)) Un espace peut être ajouté entre les paragraphes en l'ajoutant avant ou après chaque paragraphe. Vous pouvez spécifier toute valeur numérique en points. Espace avant et Espace après ne sont pas supportés par tous les navigateurs. Autres Problèmes du texte HTML Par nature, le texte HTML est flexible. En conservant cela à l'esprit, vous pouvez concevoir un site Web souple, qui s'affichera correctement dans la plupart des conditions. Les différences entre l'utilisation du texte HTML ou graphique ont déjà été évoquées, mais d'autres problèmes doivent être expliqués. Retours à la ligne Avec le texte HTML, la vieille technique consistant à formater son texte avec la barre d'espace et les retours à la ligne ne s'applique pas réellement. En général, avec du texte HTML, vous ne devriez pas "forcer" les retours à la ligne - à moins de le faire avec beaucoup de soin. Par exemple, voici un texte tapé dans Freeway, en forçant le retour après le mot "ici" (ci-dessous à gauche). Dans le navigateur il apparaît normalement comme ci-dessous au centre, sauf si la taille d'affichage du navigateur est plus importante (ci-dessous à droite) : Texte tapé dans Freeway Résultat attendu dans le navigateur 164 Travailler sur le texte Dans un navigateur avec une taille de caractères plus importante La solution est de ne pas forcer les retours à la ligne mais de laisser le texte s'adapter naturellement, dans la mesure du possible. Sinon, vous pouvez le concevoir en texte graphique ou utiliser des tailles CSS fixes. Mais la meilleure méthode est d'accepter la nature flexible du texte HTML et de faire avec. Sauts de ligne En HTML, les retours à la ligne sont affichés dans les navigateurs (et dans Freeway) avec un espace important entre les lignes (comme ci-dessus). Si vous ne désirez pas un espace aussi grand, le HTML permet de taper des "Sauts de ligne" qui gardent le formatage de la ligne précédente sans insérer l'espace de nouveau paragraphe (bien que vous puissiez ajuster l'espace entre paragraphes avec le formatage CSS, il n'existe rien de tel en HTML 3.2). Vous insérerez un saut de ligne en maintenant la touche Majuscule enfoncée en appuyant sur la touche Retour. Le résultat sera : Dans Freeway Dans le navigateur Espaces/ Espaces non sécable En HTML, les espaces consécutifs sont traités comme un seul espace. Si vous voulez qu'ils soient reconnus dans le texte HTML, vous devez utiliser les "espaces non sécables". Pour insérer un espace non sécable dans Freeway, maintenez la touche Option enfoncée en tapant l'espace. Tabulations Les tabulations ne sont pas supportées dans Freeway, et l'appui sur la touche Tabulation insérera uniquement un espace. Si nécessaire, vous pouvez créer un tableau et utiliser les lignes et les colonnes pour organiser le contenu. Pour plus d'informations au sujet des tableaux, reportez-vous Importer dans un tableau. Guillemets Si vous voulez insérer des guillemets courbes ou droits dans votre texte HTML, vous devez les saisir manuellement : appuyez sur Option-" pour le guillemet Travailler sur le texte 165 courbe gauche et Majuscule-Option-" pour le guillemet courbe droit. Pour les apostrophes courbes, appuyez sur Option-' et Majuscule-Option-'. Texte Graphique Contrairement à beaucoup d'éditeurs HTML, Freeway offre la possibilité de publier du texte sous la forme d'image lissée, compatible Web qui reste totalement éditable dans Freeway. Cela évite l'utilisation de programme d'édition d'images pour créer des dessins de qualité pour l'édition du site Web. Les textes graphiques peuvent être créés de deux façons : • Créez un bloc de texte graphique qui sera publié comme une image au format GIF. • Sélectionnez un morceau de texte et transformez le en texte graphique en sélectionnant GIF dans les menus déroulants Caractère ou Paragraphe du panneau Texte de la palette Spécifications. Lorsque vous travaillez sur du texte graphique, les options de formatage disponibles sont plus importantes que celles du texte HTML. Le résultat final est garanti puisque le texte est publié sous la forme d'une image. Le texte graphique reste éditable dans Freeway et son apparence peut être prévisualisée avec Lissage ou Prévisualisation des images dans le menu Affichage. Notez que Lissage ne vous donnera pas forcément le meilleur aperçu de comment le texte sera affiché dans le navigateur - ceci est spécialement vrai si vous avez, par exemple, limité le nombre de couleurs dans un bloc texte GIF. Pour un aperçu aussi précis que possible, utilisez Prévisualisation des images (cette option est toutefois plus lente que l'option Lissage). Attributs de caractères des textes graphiques Vous pouvez appliquer aux textes graphiques les attributs de caractères comme la police, la taille, la couleur ou l'espacement, grâce aux options du menu Style, de la palette Spécifications ou du dialogue Style (reportez-vous au chapitre Styles). Comme vous allez créer une image et non exporter du texte, vous disposez d'une palette d'attributs plus large qu'avec le texte HTML. Cependant, l'inconvénient de l'utilisation des textes graphiques est qu'ils sont plus lents à télécharger et n'ont pas toutes les capacités du texte HTML, 166 Travailler sur le texte comme l'accessibilité et la capacité d'être recherché (pour plus de détails reportez-vous à Travailler sur le texte). Police Vous pouvez appliquer une police différente à un morceau de texte en utilisant le menu déroulant Police dans la section Caractère de la palette Spécifications, dans le dialogue Style ou à partir du menu Style. Certaines polices sont disponibles en plusieurs versions (comme Book, Oblique, Black). Si vous voulez passer du texte en gras, par exemple, il est préférable de choisir la version Gras de la police plutôt que d'appliquer le style gras à la police normale, spécialement si le texte doit être affiché en grande taille. Polices manquantes Si vous ouvrez un document contenant du texte avec une police qui n'a pas d'équivalent installé, Freeway affichera le dialogue de remplacement de polices. Depuis ce dialogue, vous pouvez choisir une police de remplacement pour chaque police manquanteen cliquant sur Editer. Freeway supporte à la fois les polices de Type 1 PostScript et True Type. Freeway Express supporte les polices TrueType mais pas les polices TrueTypeType 1. Style Si aucune version spécifique de la police n'existe, vous pouvez appliquer un style de base en choisissant parmi les options du sous-menu Style du menu Style ou en utilisant les boutons de la palette Spécifications. Les styles de base disponibles incluent le Gras, Italique, Caractère souligné, Mot souligné, Relief et Ombre. Le sous-menu Style offre ces options plus Condensé et Etendu. Travailler sur le texte 167 Taille de caractère Vous pouvez modifier la taille d'un caractère ou d'une sélection à l'aide du menu Style, du panneau Texte de la palette Spécifications ou du dialogue Styles. Freeway fournit aussi des raccourcis clavier pour modifier cette taille (reportez-vous à Raccourcis-Clavier). La taille de caractère peut être comprise entre 1 et 3000 points. Largeur de caractère Vous pouvez changer la largeur du texte avec le menu Style. Ces valeurs appliquent un étirement artificiel aux caractères. Épaisseur Vous pouvez changer l'épaisseur d'un caractère avec le menu Style ou avec le dialogue Style. Ces valeurs épaississent artificiellement les caractères. Choisissez directement les épaisseurs standard ou appliquez une épaisseur personnalisée. Inclinaison Vous pouvez modifier l'inclinaison d'un caractère avec le menu Style ou le dialogue Style. Vous pouvez utiliser les valeurs par défaut listées dans le menu. Les valeurs positives inclinent le texte vers la droite et les valeurs négatives vers l'arrière. Espacement Vous pouvez augmenter ou diminuer l'espace entre les caractères. Vous pouvez utiliser cette méthode pour "coller" des caractères les uns aux autres. L'espacement de caractères peut être changé dans le menu Style, le panneau Texte de la palette Spécifications ou le dialogue Style. Freeway fournit aussi des raccourcis clavier pour modifier l'espacement de caractères. Vous pouvez modifier l'espacement en choisissant Augmenter espacement ou Diminuer espacement dans le sous-menu Espacement du menu Style. L'espacement est modifié par pas de 5%. Si vous maintenez la touche Option enfoncée avant de choisir le menu, le changement ne sera que de 1%. L'application de l'attribut d'espacement, avec le curseur d'insertion (point d'insertion clignotant) entre deux caractères, collera cette paire de caractères. 168 Travailler sur le texte Les raccourcis clavier pour coller des caractères sont les mêmes que pour l'espacement. La différence apparaît lorsque le curseur d'insertion est placé entre deux caractères. Si plusieurs caractères sont sélectionnés, la modification intervient sur toute la sélection. Décalage Vous pouvez modifier le décalage vertical d'un morceau de texte par rapport à la ligne de base en utilisant la commande Décalage du menu Style ou les raccourcis claviers. Couleur Vous pouvez modifier la couleur des caractères avec le menu Style, la palette Spécifications, le dialogue Style ou la palette Couleurs. Langue (Freeway Pro)) Dans Freeway, un texte a toujours une langue associée. Vous pouvez utiliser plusieurs langues dans un document. La langue par défaut (définie dans le Style par défaut paramétré dans le dialogue Préférences) est automatiquement appliquée si vous ne spécifiez pas une langue pour un morceau de texte. La langue appliquée au texte permettra a Freeway de choisir le bon dictionnaire pour la vérification orthographique et les césures. Reportez-vous à Vérification orthographique et césures. Attributs de paragraphe des textes graphiques Vous pouvez régler les attributs de paragraphe pour les textes graphiques comme l'alignement, les alinéas, l'interlignage et l'espacement. Pour cela utilisez le menu Style, la palette Spécifications et le dialogue Style (cf. Styles). Si vous travaillez sur du texte HTML et que vous choisissez le formatage de paragraphe GIF, les attributs de caractères seront aussi ceux du formatage GIF. Lorsque vous sélectionnez un paragraphe GIF, le menu déroulant Format de la section Caractère du panneau Texte disparaît et le panneau change pour refléter les options de caractères GIF. Les attributs de caractères HTML sont alors traduits en attributs GIF équivalents. Interligne L'interligne est l'espace qui sépare les lignes de texte. Elle est modifiable par le menu Style, le panneau Texte de la palette Spécifications ou le dialogue Style Travailler sur le texte 169 Vous pouvez configurer l'interligne pour qu'elle soit automatique ou fixée. L'interligne automatique est spécifié par un pourcentage. Le réglage par défaut de 100 % signifie que l'espace est le même que la taille de la police. L'interligne fixe permet de spécifier un espacement régulier indépendamment de la taille de la police. Par exemple, une interligne de 14 point entraîne un espacement de 14 points entre les lignes quelque soit la taille de la police du texte dans le paragraphe. Vous pouvez choisir des valeurs absolues ou des pourcentages dans le sousmenu Interligne du menu Style. En choisissant Augmenter interligne ou Diminuer interligne, vous modifierez l'espace de 1 point ou de 10 % suivant que l'interligne est en mode automatique ou fixe. Si vous maintenez la touche Option enfoncée en sélectionnant le menu, l'interligne changera de 0,1 point ou de 1%. Des raccourcis clavier sont aussi disponibles. La commande Autre... du sous-menu Interligne du menu Style affiche un dialogue dans lequel vous allez saisir une valeur personnalisée. Alignement Vous modifiez l'alignement d'un paragraphe avec le menu Style ou les boutons de la palette Spécifications. Sélectionnez le texte ou placez le point d'insertion dans le paragraphe, choisissez Alignement dans le menu Style (ou utilisez le panneau Texte de la palette Spécifications ou le dialogue Style) et sélectionnez l'alignement désiré. Les alignements disponibles sont Gauche, Droit, Centré, Justifié ou Forcé. La différence entre Justifié et Forcé réside dans l'espacement des mots de la dernière ligne du paragraphe - La justification Forcé étale les mots afin de remplir la totalité de la dernière ligne alors que la justification normale aligne la dernière ligne à gauche. Alinéas Vous pouvez appliquer des retraits aux paragraphes en utilisant la règle horizontale au-dessus de la page, grâce à la palette Spécifications ou au dialogue Style. Les options disponibles dans le panneau Texte de la palette Spécifications sont : retrait de la première ligne, retrait gauche du paragraphe et retrait droit du paragraphe. Pour fixer les retraits avec la règle horizontale, sélectionnez le texte que vous voulez modifier et glissez les triangles dans le ruban aux positions voulues pour la première ligne, le côté gauche et le côté droit. Vous ne pouvez utiliser les triangles que pour les textes GIF, ils ne sont pas disponibles pour le texte HTML. 170 Travailler sur le texte Pour régler la distance entre le texte et la boîte qui le contient dans un bloc Graphique, reportez-vous à Créer un retrait interne dans les blocs Graphiques. Espace avant et Espace après les paragraphes Vous pouvez spécifier l'espace avant et après les paragraphes avec Espace avant... et Espace après... du menu Style. Les valeurs peuvent être des pourcentages ou des valeurs en points. Césures Les coupures automatiques de mots peuvent être activées ou désactivées pour les textes GIF depuis le menu Style ou le dialogue Style. Par défaut, les césures sont désactivées. Si elles sont activées, Freeway coupe les mots en fonction de la langue appliquée au texte. Des exceptions de césures peuvent être définies dans le dictionnaire de la langue grâce à la commande Césures du menu Edition. Pour activer les césures manuellement depuis le menu Style, sélectionnez Césures dans ce menu. Le paragraphe sélectionné sera traité et le menu sera alors coché. Pour plus d'information sur les césures, reportez-vous à Dictionnaires utilisateurs. Espacement de mots et de caractères Le dialogue Style vous permet de créer de nouvelles règles d'espacement de mots et de caractères pour un texte justifié. Tous les changements sont stockés dans un nouveau style et utilisés quand celui-ci est appliqué au texte. Les espacements de mots et de caractères standard sont appliqués avec le style par défaut. Vous pouvez modifier les valeurs minimum, optimum et maximum pour chaque type d'espacement. Texte vertical Pour rendre un texte vertical, placez le curseur de la souris n'importe où dans le bloc graphique (ne sélectionnez pas le bloc lui-même) et, dans le panneau Bloc de la palette Spécifications, cliquez sur l'icône Texte vertical. Le texte sera alors orienté de haut en bas et de droite à gauche. Travailler sur le texte 171 172 Images Images Bien que vous puissiez utiliser les outils de création de blocs de Freeway pour créer des formes graphiques simple, vous voudrez certainement importer des images conçues à l'aide de programmes graphiques dédiés. Freeway peut importer de telles images aussi bien en tant que graphique éditable (qui peut être découpé, redimensionné, fusionné avec du texte et d'autres graphiques, etc. dans Freeway) ou en tant qu'image non modifiable (qui seront publiées tel quel). Images éditables Vous pouvez importer les formats de fichiers suivants comme graphiques éditables : • GIF (Graphics Interchange Format), • JPEG (Joint Photographic Experts Group), • TIFF (Tagged Image File Format) (Freeway Pro), • PICT (un format standard de bitmap Mac)), • PNG (Portable Network Graphics), • BMP (Bitmap Windows) (Freeway Pro), • QDGX (QuickDraw GX) (Freeway Pro), • Adobe Illustrator (Freeway Pro), • Adobe Photoshop (Freeway Pro), • PDF (Freeway Pro, OS X seulement), • EPS (Encapsulated PostScript) (Freeway Pro), • Tout format pour lequel vous disposez d'un module externe d'Import/Export Photoshop (Freeway Pro). Lorsque vos pages Web sont publiées, Freeway exporte les graphiques éditables au format GIF, JPEG ou PNG, suivant le format d'exportation qui leur est appliqué. Le GIF est normalement utilisé pour des graphiques simples, contenant un nombre limité de couleurs, alors que le JPEG est utilisé pour des images de qualité photographique ou avec des variations de tons continues. Freeway est capable de choisir le format approprié pour chaque graphique. Le PNG n'est pas utilisé par défaut car la plupart des navigateurs ne le supportait pas (jusqu'à récemment). Freeway vous propose de nombreuses options d'édition et d'optimisation des images qui ne sont normalement disponibles que dans les programmes dédiés à l'édition d'images. Vous pouvez ainsi redimensionner, découper et transformer les images, modifier la palette de couleurs des images GIF et PNG et le taux de compression des images JPEG, choisir le codage Entrelacé (GIF) Images 173 ou Progressif (JPEG). Freeway peut importer directement le TIFF, le PICT et beaucoup d'autres formats standards, et les convertit automatiquement dans un format pour le Web. Vous pouvez aussi, dans Freeway, optimiser le rapport Qualité/Taille de vos images et vérifier le résultat obtenu immédiatement. Freeway permet aussi de partitionner vos images, si nécessaire, pour rendre le téléchargement de vos pages le plus efficace et le plus rapide possible. Note 1 : Lorsqu'une image EPS est importée, Freeway ne lit pas les données PostScript, mais la prévisualisation. Nous vous recommandons de sauver vos fichiers EPS au format Illustrator ou d'utiliser un logiciel tel que Photoshop pour les rendre bitmap et les sauver au format TIFF avant de les importer dans Freeway. Note 2 : L'importation de fichiers Illustrator peut être lente et utilise beaucoup de mémoire. Il est recommandé d'augmenter la mémoire allouée à Freeway lorsque vous voulez importer de gros fichiers Illustrator. Pour cela, sélectionnez l'icône de l'application Freeway dans le Finder - assurez-vous que c'est bien l'icône de l'application et non un alias. Choisissez alors Mémoire depuis le sous-menu Lire les informations du menu Fichier. Lorsque le dialogue apparaît, augmenter la taille souhaitée de quelques milliers de Ko. Si vous déplacez le document dans un autre dossier du disque, Freeway gardera le lien avec les fichiers images sources. De plus, Si vous déplacer le document et tous les fichiers images importés dans un autre disque, en gardant une arborescence relative inchangée, vous n'aurez pas besoin d'importer à nouveau les images lors de l'ouverture suivante du document parce que Freeway utilise des chemins d'accès relatifs en ce qui concerne les images. Utiliser les images Les images dans les documents Freeway sont contenues dans des boîtes. Ensemble, l'image et sa boîte sont considérés comme un bloc. Vous pouvez importer des images dans tout bloc vide de Freeway, mais seuls les fichiers GIF, JPEG et PNG peuvent être importés en tant qu'images avec l'option Garder l'original. Le TIFF est le format de prédilection pour importer des images éditables dans Freeway Pro (utilisez des PNG ou PICT dans Freeway Express). À moins que vous ne souhaitiez importer un GIF transparent, il est conseillé de ne pas sauver votre fichier avec une palette de couleurs (couleurs indexées) avant son importation dans Freeway, spécialement si l'image va être fusionnée avec d'autres (Voir Images fusionnées) ou si elle est exportée en JPEG. Utiliser les modules externes (Plug-ins, Freeway Pro)) Vous pouvez utiliser les modules externes d'importation/exportation de Photoshop afin d'importer d'autres formats de fichiers dans Freeway. Créez simplement un alias du dossier contenant vos modules externes et placez cet alias dans le dossier de Freeway sur votre ordinateur avec comme nom "Plug- 174 Images Ins". Pour créer un alias, sélectionnez le dossier de modules externes dans le dossier Photoshop et choisissez Créer un alias dans le menu Fichier du Finder. Glissez l'icône dans le dossier de Freeway, en vous assurant que le dossier est nommé exactement "Plug-Ins". Importer une image avec la commande Importer 1 Cliquez sur un bloc de manière à faire apparaître ses poignées, puis choisissez Importer dans le menu Fichier. Si la commande n'est pas disponible, vérifiez qu'il n'y a pas déjà du texte dans le bloc. 2 Utilisez le dialogue affiché pour trouver et sélectionner le fichier d'image que vous voulez importer. 3 Si vous décidez d'importer l'image tel qu'elle est, cochez la case Gardez l'original si cela n'est pas déjà fait - la case est par défaut cochée lorsque vous importez des images dans des blocs HTML et décochée lors de l'importation dans des blocs Graphiques. Images 4 175 Cliquez sur Ouvrir Freeway importe l'image choisie dans le bloc sélectionné et établit le lien avec le fichier source. Importer une image avec la commande Acquérir Pour utiliser la commande Acquérir, vous aurez besoin d'un dossier "Plug-Ins" dans le dossier de Freeway. (Voir Utiliser les modules externes (Plug-ins, Freeway Pro)). 1 Sélectionnez un bloc existant ou créez-en un nouveau 2 Sélectionnez Acquérir dans le menu Fichier et choisissez la méthode d'acquisition que vous allez utiliser. L'image scannée est importée directement dans Freeway. Vous pouvez la manipuler comme tout autre image. Note : Certains plug-ins d'acquisition peuvent indiquer dans Freeway des messages d'erreurs inadaptés s'ils n'ont pas assez de mémoire. Vous pouvez remédier à cela en modifiant la taille mémoire allouée à Freeway (voir Images éditables). Importer des images par glisser déposer 1 Sélectionnez un bloc existant ou créez-en un nouveau. 2 Localisez le fichier sur le bureau ou dans une fenêtre du Finder ou ouvrez une application supportant le glissé déposer. 3 Glissez le fichier ou l'image sur le bloc dans le document Freeway (lorsque vous passez le curseur au-dessus des différents blocs, leur contour est sélectionné). 4 Relâchez le bouton de la souris sur le bloc approprié. Un bloc ne peut contenir qu'une seule image. Si vous essayez de copier ou d'importer une image dans un bloc déjà occupé, la première image est remplacée par la seconde. Remplacer du texte par une image Un bloc peut contenir soit du texte, soit une image, mais pas les deux. Si un bloc contient du texte et que vous souhaitez le remplacer par une image, vous devez auparavant l'effacer totalement. Pour cela, choisissez Tout sélectionner dans le menu Edition et supprimez le texte à l'aide des touches du clavier. Coller une image depuis le presse-papier Si vous avez préalablement copié ou coupé une image dans le presse-papier, vous pouvez simplement la coller dans le bloc sélectionné en choisissant Coller dans le menu Edition. 176 Images Supprimer une image Si vous avez fait une erreur ou si vous avez changé d'avis, vous pouvez simplement supprimer ou remplacer une image. Il y a plusieurs méthodes pour y arriver : • Sélectionnez le bloc contenant l'image et appuyez sur les touches Retour arrière ou Suppr. Cela supprime le bloc et son contenu. • Sélectionnez le bloc contenant l'image, puis choisissez Effacer le contenu dans le menu Edition. Seul le contenu du bloc est effacé. • Sélectionnez le bloc contenant l'image et importez une autre image dans ce bloc. La première image sera remplacée. Lorsque vous remplacez une image existante en important une nouvelle image, la nouvelle image conserve toutes les transformations appliquées à la première (inclinaison, rotation, etc.). Si vous effacez la première image, les transformations sont supprimées. Positionner manuellement une image dans son bloc Pour positionner manuellement une image dans son bloc : 1 Avec l'outil Sélection, déplacez le curseur sur le bloc. Le curseur se transforme en main. 2 Glissez l'image à sa nouvelle position. Positionner une image dans son bloc à l'aide du dialogue Fichier Image 1 Double-cliquez sur l'image pour afficher le dialogue Fichier Image ou sélectionnez Modifier dans le menu Bloc (Voir Utiliser le dialogue Fichier Image). 2 Entrez de nouvelles valeurs de position dans les champs Décalage horizontal et vertical. 3 Cliquez sur OK Centrer automatiquement une image dans son bloc Vous pouvez centrer une image dans son bloc en le sélectionnant et en choisissant Centrer depuis le sous-menu Image du menu Bloc. Images 177 Copier des images dans le presse-papier Lorsqu'une image se trouve dans un bloc Freeway, vous pouvez copier le bloc ou son contenu dans le presse-papier de plusieurs manières. Sélectionnez le bloc, et : • Choisissez Copier dans le menu Edition pour copier le bloc dans le pressepapier. • Maintenez la touche Option enfoncée et sélectionnez Copier dans le menu Edition pour copier le contenu du bloc dans le presse-papier sous la forme d'une image PICT - cela vous permet de faire du copier-coller d'images de Freeway vers d'autres applications. • Maintenez les touches Option et Majuscule enfoncées et choisissez Copier dans le menu Edition pour copier le contenu du bloc dans le presse-papier et qu'il soit directement utilisable dans un autre bloc de Freeway. Exporter des images depuis Freeway Vous pouvez exporter, en tant qu'image, une sélection de blocs Graphiques ou des pages entières en utilisant la commande d'export de Freeway : 1 Sélectionnez les blocs Graphiques ou activez la page que vous souhaitez exporter. 2 Choisissez Exporter dans le menu Fichier. 3 Sélectionnez le format d'exportation dans le menu déroulant. 4 Si vous voulez ajuster ou vérifier les options d'export, cliquez sur le bouton Options et faites les changements nécessaires. Cliquez sur OK dans le dialogue Options. 5 Entrez un nom pour le fichier exporté et cliquez sur Enregistrer. Lorsque vous exportez des blocs, il est important de se rappeler que la couleur de fond de la page n'est pas exportée avec eux. Vous devrez peut-être sélectionner une couleur de lissage dans les Options ou donner aux blocs une couleur de remplissage pour contrôler la couleur des parties lissées et éviter qu'un halo ne se forme si l'image exportée est utilisée sur un fond coloré. Pour plus d'informations, reportez-vous à Options de prévisualisation de Freeway. Redimensionner les images Après avoir mis à l'échelle une image importée, Freeway re-échantillonne automatiquement l'image résultante en 72dpi lors de l'exportation ou lors de la publication de votre site. Pour re-échantillonner l'image, double-cliquez dessus et cliquez ensuite sur le bouton Reéchantill. dans le dialogue Fichier Image. 178 Images Redimensionner une image pour l'ajuster au bloc Vous pouvez faire coïncider exactement une image au bloc la contenant en choisissant Ajuster la taille de l'image au Bloc dans le sous-menu Image du menu Bloc. Redimensionner une image dans son bloc, en gardant les proportions Vous pouvez redimensionner une image afin qu'elle s'adapte au mieux au bloc, tout en conservant les proportions de l'image. Pour cela, sélectionnez Mettre à l'échelle et centrez du sous-menu Image du menu Bloc. Ajuster un bloc à son contenu Vous pouvez aussi redimensionner un bloc pour qu'il s'adapte à l'image qu'il contient en choisissant Ajuster la taille du bloc à l'image dans le sous-menu Image du menu Bloc. Contrôler le dimensionnement des images Freeway vous propose quatre façons de contrôler ce qui arrive à une image lorsque son bloc est redimensionné. Elles sont réglées dans le dialogue Fichier Image - pour y accéder, sélectionnez un bloc Graphique contenant une image et choisissez Modifier dans le menu Bloc, ou simplement double-cliquez sur le bloc. Les exemples suivants illustrent ces notions de Freeway avec, à gauche: 179 Images l'image originale Conserver la taille : l'image est découpée si le bloc est réduit, sans changer son échelle. Mettre à l'échelle : l'image colle parfaitement à son bloc. Les proportions ne sont pas conservées. Garder les proportions : L'image est redimensionnée pour s'adapter à la plus petite dimension du bloc. Les proportions de l'image sont conservées et l'image est centrée. Découper : L'image est redimensionnée pour s'adapter à la plus grande dimension du bloc. Les proportions de l'image sont conservées. Si nécessaire, l'image est coupée. Redimensionner un bloc Graphique avec la souris et le clavier Vous pouvez utiliser la souris et les touches Commande, Option et Majuscule pour redimensionner les blocs Graphiques et leur contenu. • Pour redimensionner un bloc et son contenu, glissez n'importe quelle poignée de sélection tout en enfonçant la touche Commande (voir Mettre à l'échelle ci-dessus). • Pour redimensionner et Découper un bloc Graphique, glissez n'importe quelle poignée de sélection tout en enfonçant la touche Option (voir Découper ci-dessus). 180 Images • Pour redimensionner un bloc Graphique et garder les proportions, glissez n'importe quelle poignée de sélection tout en enfonçant les touches Commande et Option (voir Garder les proportions ci-dessus). • Pour redimensionner un bloc Graphique et son contenu, tout en conservant les paramètres de découpe et d'échelle en cours, glissez toute poignée de sélection en enfonçant les touches Commande, Option et Majuscule. Redimensionner une image avec le dialogue Transformation Vous pouvez sélectionner un bloc Graphique et le redimensionner ainsi que l'image qu'il contient en utilisant le dialogue Transformation, comme expliqué dans Transformer les blocs. Augmenter ou diminuer la taille d'une image Vous pouvez augmenter ou diminuer la taille d'une valeur de 5% en sélectionnant l'image ou son bloc et en choisissant Agrandir ou Réduire dans le sous-menu Image du menu Bloc. Restaurer la taille originale d'une image Vous pouvez restaurer la taille originale d'une image en choisissant Taille originale dans le sous-menu Image du menu Bloc. Gérer les images importées Le dialogue Fichier Image affiche les informations relatives à l'image, comme sa localisation sur le disque, sa date de modification et son état. Utiliser le dialogue Fichier Image Les informations relatives à une image sont disponibles dans le dialogue Fichier Image, incluant son nom, sa taille, son type, son état et sa date de modification. Images 181 Note : Si vous sélectionnez une image collée depuis le presse-papier ou si l'originale est sur une page maquette, Freeway affiche une version allégée de ce dialogue qui omet les informations sur le fichier. Note 2 : Si vous sélectionnez une image venant d'un plug-in, la boîte de dialogue omettra certains réglages graphiques. • Cliquez sur Choix pour afficher le dialogue vous permettant de trouver et d'ouvrir les fichiers. Utiliser cette option pour localiser les images manquantes. • Cliquez sur Mise à jour pour actualiser l'image, utile pour les images modifiées. • Cliquez sur Reéchantill. pour re-échantillonner l'image après redimensionnement. Ce processus retraite les données du fichier original qui a été importé dans Freeway. Une image ayant été élargie s'affichera mieux à l'écran, et une image ayant été réduite tiendra moins de place en mémoire. Définir si une image doit être publié ou non 1 Double cliquez sur l'image pour afficher le dialogue Fichier Image. 2 Décochez la case Publier image. L'image ne sera pas publiée. Son bloc sera publié uniquement si une couleur de remplissage ou une bordure a été définie. 182 Images Le dialogue Ressources Le dialogue Ressources contient une liste de toutes les images et de tous les autres contenus de fichiers qui sont utilisés dans le document en cours. Ce dialogue fournit des informations sur chaque image individuellement et vous permet de les supprimer, de les mettre à jour ou de les reéchantillonner. Vous pouvez aussi définir si une image particulière sera exportée lors de la publication des pages Web. Pour afficher le dialogue Ressources, choisissez Ressources dans le menu Edition. Les informations et les options disponibles sont : Fichier : Affiche le nom de fichier, et éventuellement le chemin d'accès. Le menu de la colonne Fichier permet de choisir entre Noms de fichiers seuls ou Chemin d'accès. Type : Donne le type de fichier Etat : Affiche les informations suivantes : • OK : l'image est à jour. • Manquant : le fichier n'est pas présent. • Modifié : le fichier a été modifié. Page : Affiche la page sur laquelle l'image apparaît. Publié : Montre si l'image sera ou non exportée lors de la publication des pages Web. Cochez la case pour publier l'image. Images 183 Pour changer l'ordre de tri des images dans le dialogue Ressources, cliquez sur le titre d'une colonne. Par exemple, pour trier par page, cliquez sur la zone entourant le mot Page. Cela peut être utile pour afficher toutes les ressources d'une page donnée. • Cliquez sur Tout à jour pour mettre toutes les images du document à jour. • Cliquez sur Tout échantillonner pour re-échantillonner les images suivant leur taille courante. • Sélectionnez une image dans la liste et cliquez sur Afficher pour afficher l'image dans la fenêtre du document. • Sélectionnez une image dans la liste et cliquez sur Editer pour afficher le dialogue Fichier Image. • Sélectionnez une image dans la liste et appuyez sur Backspace ou Suppr. du clavier pour supprimer l'image. Texte alternatif pour les images Texte Alt., abréviation pour texte alternatif, est une courte description qui s'affichera dans le navigateur à la place de l'image si elle n'est pas montrée. Certains internautes préfèrent ne pas afficher les images tout en surfant car leur taille peut ralentir le téléchargement d'une page. Ils verront donc le texte alternatif à la place à la place de l'image. Sur les PC sous Windows, le texte alternatif peut aussi être affiché dans des info-bulles lorsque le visiteur passe sa souris au-dessus de l'image. Vous pouvez demander à Freeway de créer les textes alternatifs automatiquement ou entrer vos propres descriptions. Pour cela, utilisez le menu déroulant Alt du panneau Export dans la palette Spécifications. Affecter un Texte Alt à un bloc Graphique 1 Sélectionnez le bloc et affichez le panneau Export de la palette Spécifications. 2 Dans le menu déroulant Alt, choisissez Auto ou Autre. Auto met comme texte alternatif le nom de fichier de l'image importée ou le contenu du bloc (dans le cas ou le bloc Graphique contient du texte). Autre vous permet d'éditer le texte alternatif. Pour plus d'information sur l'automatisation des Textes Alt, voir Texte Alternatif. Noms de fichiers Freeway génère automatiquement les noms de fichiers pour les images et les autres ressources lors de la publication du site. Ces noms de fichiers sont 184 Images généralement dérivés des noms des blocs associés. Vous pouvez donc contrôler les noms des images publiées par le biais des titres de bloc, excepté si les images sont utilisées plusieurs fois. Lorsque votre site Web est publié, Freeway vérifie les images identiques dans l'ensemble du site. S'il en trouve, un seul fichier image est publié dans le dossier du site. Freeway créera plusieurs références vers le fichier publié, une par instance dans le site. Par exemple, si Freeway a trouvé cinq images identiques lors de la publication, il ne publiera qu'un exemplaire de l'image dans le dossier du site. Il créera cinq références vers ce fichier dans le code HTML généré. Cette utilisation optimisée des images permet de diminuer les temps de téléchargement des sites que vous concevez. Cependant, du fait de cette optimisation, le nom de l'image publiée ne sera pas nécessairement dérivé du nom des blocs Freeway. Regardons la relation entre le titre d'un bloc et le nom de l'image publiée. Lorsque vous travaillez sur une maquette, vous définirez sans doute un bloc graphique représentant la bannière de la page et souhaiterez l'appeler "banner.gif" lors de la publication. Pour cela, le bloc a pour titre "banner" dans le panneau Bloc de la palette Spécifications. Lorsque le site est construit, si Freeway ne trouve aucune réutilisation de l'image, son nom sera "banner.gif". S'il y a déjà une autre image s'appelant "banner.gif", le nom de fichier sera alors "bannera.gif" ou "bannerb.gif". Enfin, si Freeway trouve une image identique à cette image, le nom de fichier sera dérivé de cette première instance. Note : Freeway ne remplace jamais les images (ou les fichiers d'autres ressources) qu'il n'a pas créées. Cependant, il remplacera les fichiers HTML. Formats de publication Lorsque les blocs Images de votre page sont exportés en GIF, JPEG ou PNG, vous pouvez utiliser différentes options pour configurer leur exportation. Elles se trouvent normalement dans le panneau Export de la palette Spécifications. Certaines des options par défaut peuvent être ajustées avec la commande Préférences du menu Fichier. Les deux formats principaux d'images pour le Web sont le JPEG et le GIF. En général, utilisez le JPEG pour des images nuancées, comme les photographies ou les images avec des dégradés. Utilisez le GIF pour les images ayant peu de couleurs : textes graphiques, boutons et logos. Le JPEG permet d'afficher des images en millions de couleurs et leur qualité dépend du moniteur du visiteur. Le GIF utilise un maximum de 256 couleurs. Les fichiers GIF sont en général plus petits (quand peu de couleurs sont utilisées) et leur aspect est en général préservé dans les navigateurs. Ceci est spécialement vrai si vous utilisez la palette de 216 couleurs dédiée au Web qui est supportée à la fois par les Mac et les PC sous Windows. Images 185 Il est conseillé de tester les résultats avec différents navigateurs et sur différents systèmes, en considérant la qualité des images et la taille des fichiers. Notez que généralement, les images apparaîtront plus sombres sur un PC sous Windows que sur un Mac. Réglages de publication GIF Taille de fichier Le champ Taille affiche la taille en octets du fichier GIF. Cette valeur dépend des dimensions, des couleurs et d'autres attributs de vos images. L'information relative à la taille n'est disponible que lorsque l'option Prévisualisation des images est activée (par le menu Affichage) ou si le fichier concerné a été publié dans votre site. Vous pouvez aussi avoir une estimation de la taille totale de la page lorsque vous avez prévisualisé ou publié le site, en activant Afficher la taille des fichiers dans le menu de la palette Site. Nombre de couleurs Les images GIF utilisent un maximum de 256 couleurs, mais vous pouvez sélectionner ces couleurs (voir Palettes de couleurs GIF ci-après). Freeway vous permet de modifier le nombre de couleurs définies dans les fichiers GIF publiés en utilisant un curseur ou en saisissant le nombre de couleurs directement. Réduire le nombre de couleurs peut réduire la taille du fichier résultant. Palettes de couleurs GIF L'ensemble des valeurs de couleurs utilisées dans un fichier GIF est appelé la palette de couleurs. Freeway vous permet de choisir, pour vos images GIF, entre différentes palettes : 186 Images Adaptative Les valeurs de couleurs sont choisies parmi les couleurs de l'image originale. La palette sera constituée des couleurs les plus fréquemment utilisées. Si le nombre de couleurs est diminué, les couleurs les moins utilisées seront écartées en premier. Cette option restituera une approximation la plus proche possible des tons originaux de l'image. Web 216 Chaque couleur est comparée à la palette afin de trouver la couleur la plus proche dans les 216 valeurs disponibles. Mac 256 Chaque couleur est comparée à la palette afin de trouver la couleur la plus proche dans la palette système du Macintosh. La palette par défaut peut être configurée dans les Préférences. Entrelacer les images GIF Les images GIF entrelacées sont affichées progressivement pendant le téléchargement par le navigateur. Les visiteurs voient les images se former pendant le téléchargement. Cet effet est désactivé par défaut. L'entrelacement peut augmenter légèrement la taille des fichiers. Pour activer l'entrelacement, cochez la case Entrelacé. Cette option peut être activée ou désactivée par défaut dans les Préférences. Ajustage des couleurs des images GIF L'ajustage des couleurs essaie de faire coïncider les couleurs de votre image uniquement avec celles qui sont disponibles dans le navigateur. Par exemple, une image utilisant des milliers de couleurs doit être exportée en GIF n'utilisant qu'un maximum de 256 couleurs. L'ajustage permet de donner l'illusion que vos images utilisent beaucoup plus de couleurs. Notez, cependant, que l'ajustage augmente généralement la taille des fichiers. Cette option est activée par défaut pour les images GIF. Décochez la case Ajuster pour la désactiver. Elle peut aussi être activée ou désactivée par défaut dans les Préférences. Lissage L'option de lissage vous permet d'adoucir les contours de vos textes GIF et des formes des blocs lorsqu'ils sont affichés par le navigateur. Les textes lissés de petite taille peuvent être lus avec difficulté, car le contour des lettres est flou. L'effet de lissage est activé par défaut. Sélectionnez Sans dans le menu déroulant Lissage pour le désactiver. Vous pouvez aussi choisir une couleur de fond de lissage. Pour pré visualiser le lissage dans Freeway, choisissez Lissage dans le menu Affichage. Lorsqu'une image est lissée, sa couleur de lissage est celle du fond du bloc qui la contient. Si le bloc GIF a un fond blanc ou n'a pas de fond, l'image est exportée transparente. Ceci peut, avec le lissage, produire un halo indésirable. Lorsque vous utilisez Freeway pour exporter un fichier GIF et que vous ne 187 Images souhaitez pas qu'il soit transparent, assurez-vous que son bloc a une couleur de remplissage. Comme Freeway lissera par défaut les texte graphiques, vous pouvez déterminer la taille de police minimum à partir de laquelle le lissage doit être appliqué. Choisissez Préférences dans le menu Fichier et sélectionné le panneau Texte. Le champ Taille mini pour le lissage indique une taille par défaut de 12 points. Une valeur minimum plus grande entraînera que les polices plus petites ne seront pas lissées. Vous pouvez toujours choisir de lisser un texte dans le panneau Export de la palette Spécifications. Pour plus d'informations sur le lissage, voir Options de prévisualisation de Freeway. Calque Détermine si le bloc est un bloc Calque. Uniquement disponible pour les pages en HTML 4.0 (voir Mise en page HTML 4.0). Alt Détermine si un texte alternatif pour les images doit être montré dans le navigateur lorsque le visiteur a choisi de ne pas afficher les images. Fusionner Détermine si un bloc doit être fusionné avec les blocs le chevauchant. (Voir Images fusionnées) Envoi permet au bloc d'être utilisé comme un bouton d'envoi dans un formulaire. Le contenu du champ Envoi sera retourné comme Nom du bouton d'envoi (voir Les différentes parties d'un formulaire). Réglages de publication JPEG 188 Images Taille du fichier La zone Taille affiche la taille en octet de vos fichiers JPEG. Cette valeur dépend des dimensions, des couleurs et d'autres attributs de vos images et est seulement affichée lorsque vous avez activé l'option Prévisualisation des Images dans le menu Affichage ou si vous avez publié le site avec ces images. Vous pouvez aussi avoir une estimation de la taille totale de la page lorsque vous avez prévisualisé ou publié le site, en activant Afficher la taille des fichiers dans le menu de la palette Site. Qualité JPEG Vous pouvez choisir le taux de compression appliqué aux images exportées. Ce taux affecte la qualité de l'image affichée dans le navigateur. Un réglage sur 100% donne la meilleure qualité et applique une compression minimale. Déplacez le curseur ou saisissez une valeur dans le champ texte pour modifier la qualité de vos images JPEG. Il est important de garder à l'esprit que le JPEG est une méthode de compression "avec perte" et dégrade légèrement l'image à chaque compression, même avec une qualité de 100%. Il est donc recommandé d'éviter d'importer des images JPEG dans Freeway (sauf en tant qu'images avec l'option Garder l'original cochée), puisqu'elles vont être décompressées et compressées lors de la publication. Le taux de compression par défaut peut être réglé dans les Préférences. Affichage progressif des images JPEG Les navigateurs peuvent afficher les images JPEG progressivement pendant que les fichiers sont téléchargés de manière à ce que le visiteur voit les images se former sur leur page. Notez que les images JPEG progressives sont généralement plus grandes et prennent un peu plus de temps à être téléchargées. Par défaut, Freeway publiera les fichiers JPEG en non progressif. La valeur par défaut de cette option peut être modifiée dans les Préférences. Échantillonnage Bilinéaire Cette option permet de redimensionner les images de façon plus lisse. Vous devriez activer cette option si votre image contient des lignes par exemple. Lissage L'option de lissage vous permet d'adoucir les contours de texte et les formes des blocs lorsqu'ils sont affichés dans les navigateurs. Les textes lissés de petite taille peuvent être difficile à lire, car leur contour est flou. Il n'est pas recommandé d'inclure du texte dans les images JPEG, car les artefacts liés à la compression JPEG peuvent détériorer leur rendu. Calque Détermine si le bloc est un bloc Calque. Uniquement disponible pour les pages en HTML 4.0 (voir Mise en page HTML 4.0). Alt Détermine si un texte alternatif pour les images doit être montré dans le navigateur lorsque le visiteur a choisi de ne pas afficher les images. 189 Images Fusionner Détermine si un bloc doit être fusionné avec les blocs le chevauchant. (Voir Images fusionnées). Envoi permet au bloc d'être utilisé comme un bouton d'envoi dans un formulaire. Le contenu du champ Envoi sera retourné comme Nom du bouton d'envoi (voir Les différentes parties d'un formulaire). Images PNG Le format PNG (Portable Network Graphics) a été développé comme une alternative au GIF mais n'est pas supporté par tous les navigateurs. Le développement du PNG a débuté lorsque Unisys commença à poursuivre les développeurs utilisant la compression LZW. Le PNG a aussi d'autres avantages par rapport au GIF, comme : • Le stockage d'images en millions de couleurs. Le GIF ne supportant qu'un maximum de 256 couleurs. • Transparence par canal alpha. Les images GIF ne supportent que deux niveaux de transparence, activé ou désactivé. Dans les images PNG, toute couleur peut être opaque, partiellement transparente, ou complètement transparente. • Une option d'entrelacement qui permet à une image d'être affichée plus rapidement qu'avec l'entrelacement GIF. • La compression PNG produit souvent des fichiers plus petits que la compression LZW du GIF. Cependant, le PNG ne possède pas les options d'animation et la transparence n'est pas correctement supportée sur tous les navigateurs. En comparaison avec les images JPEG, les images PNG qui contiennent des millions de couleurs ne perdent pas de qualité lorsqu'elles sont compressées, mais donnent des fichiers plus gros. Dans des circonstances normales, il est préférable d'utiliser le JPEG pour les images en millions de couleurs (photographies par exemple), et le GIF ou le PNG pour les images en 256 couleurs ou moins. Support du PNG dans les navigateurs Le format PNG est directement supporté par les navigateurs Netscape en version 4.04 et supérieure et par Microsoft Internet Explorer 5. Importer des images PNG Les images PNG qui sont importées en tant qu'images éditables seront publiées par défaut en GIF ou en JPEG - les images PNG avec 256 couleurs ou moins en GIF, et les images en millions de couleurs en JPEG. Les images PNG éditables peuvent être publiées en PNG si le format PNG est sélectionné dans le panneau Export de la palette Spécifications. Exporter des images PNG 190 Images Une image est exportée au format PNG si l'option PNG est sélectionnée dans le panneau Export ou le panneau Export Groupe de la palette Spécifications. Les pages ou les sélections individuelles peuvent aussi être exportées au format PNG par la commande Exporter du menu Fichier. Les images PNG ont les mêmes options de publication que les images GIF, excepté le fait qu'elles peuvent être exportées en millions de couleurs (mais ce n'est pas toujours une bonne idée). Certaines options ne sont applicables qu'à des images contenant 256 couleurs au plus (ajustage, palette, nombre de couleurs) - elles sont indisponibles si Millions de couleurs est sélectionné. Images fusionnées Bien que, dans Freeway, vous puissiez concevoir une page avec des blocs se chevauchant, le HTML standard ne peut afficher deux objets se chevauchant sur une page Web sans recours aux calques CSS. Pour contourner cette limitation, Freeway peut fusionner les blocs en une nouvelle image ou découper l'image se trouvant en dessous afin qu'elle soit affichée en plusieurs parties. Lorsque des images sont fusionnées, le contour de la nouvelle image à publier est affiché dans Freeway en gris clair, entourant les blocs fusionnés. Lorsque Freeway fusionne au moins deux blocs image, la nouvelle image prend les options et les attributs de format du bloc inférieur. Ils sont affichés dans le panneau Export fusionné de la palette Spécifications. Le panneau Export pour les blocs originaux n'affiche alors plus que le menu déroulant Type. Si l'option Fusionner est désactivée pour un bloc Graphique qui en chevauche un autre, il coupera le bloc inférieur, exactement comme le ferait un bloc HTML. Désactiver la fusion Vous pouvez éviter que des blocs Graphiques se chevauchant ne soient fusionnés en sélectionnant l'un d'eux et en décochant la case Fusionner dans le panneau Export de la palette Spécifications. Fusionner des images de formats d'export différents Il est possible de fusionner des blocs Graphiques qui ont des formats de publication différents. Comme la nouvelle image récupère les caractéristiques du bloc inférieur, le format de publication affiché dans le panneau Export fusionné dépend du format du bloc inférieur. Lorsque vous sélectionnez un bloc Graphique fusionné avec d'autres et modifiez les réglages dans le panneau Export fusionné, vous modifiez uniquement les réglages du bloc inférieur. Si vous séparez alors les blocs, les changements opérés dans le panneau Groupe ne seront conservés que pour le bloc inférieur. Images publiées en JPEG Images 191 Le format JPEG ne supporte pas les pixels transparents. Si vous fusionnez des blocs Images alors que le bloc inférieur doit être publié en JPEG, ou utilise un bloc de forme non rectangulaire, les pixels que Freeway insère pour remplir le groupe sont opaques et obscurciront toute image de fond de la page. Pour plus d'informations, voir Fusionner des calques de blocs Graphiques (Freeway Pro). GIFs animés Les GIF animés sont des images GIF spéciales qui contiennent plusieurs images. Lorsqu'ils sont visualisés dans les navigateurs, les images sont jouées, comme le serait un morceau de film. Les GIF animés sont largement supportés et sont un excellent moyen de placer des animations simples sur le Web sous une forme accessible sans téléchargement ni installation d'un plug-in pour le navigateur. Freeway ne peut pas être utilisé pour créer des GIF animés, mais vous pouvez les importer. Ils peuvent être fusionnés avec d'autres blocs Graphiques, mais leur performance peut être dégradée et les fichiers encombrants. Lorsque vous travaillez avec des GIFs animés, il est préférable de les importer en tant qu'images avec Garder l'original ou de désactiver leur option Fusionner. Cela évite les fusions avec les autres éléments de la page et donne de meilleures performances. Images Tel quel (avec option Garder l'original) Les images "Tel quel" sont des images que Freeway publie sans en modifier le contenu. Vous pouvez importer une image comme image "tel quel" si vous avez déjà optimisé sa palette de couleurs dans un autre programme (L'option Adaptative de Freeway permet aussi de garder les palettes de couleurs existantes). Ces images devraient être normalement des formats GIF, JPEG ou PNG, car les autres formats ne sont pas directement reconnus par les navigateurs. Si vous importez d'autres formats (comme le TIFF ou le PICT) en tant qu'images "tel quel", Freeway les traitera comme contenu de plug-in, et les navigateurs ne les afficheront que si un plug-in dédié est installé - cela est vrai même si l'image apparaît dans Freeway. En général, il n'est pas conseillé d'utiliser Garder l'original avec des formats graphiques autre que le PNG, le GIF ou le JPEG. Les images publiées dans les formats standards du Web, comme le GIF ou le JPEG, peuvent être visualisées dans tous les navigateurs sans plug-ins. Les images qui ne sont pas déjà dans le format GIF ou JPEG devraient être importées dans des blocs Graphiques, de manière à ce que Freeway puisse les convertir dans le format approprié. Pour importer une image en gardant l'original : 192 Images 1 Créez ou sélectionnez un bloc HTML et choisissez Importer dans le menu Fichier. 2 Utilisez le dialogue Fichier pour trouver et sélectionner le fichier image à importer. 3 Cliquez sur Ouvrir. Vous pouvez aussi importer des images "tel quel" dans un bloc Graphique rectangulaire en sélectionnant l'option Garder l'original dans le dialogue Fichier. Le bloc sera converti en bloc HTML après l'importation de l'image. Les images "tel quel" ne peuvent pas être redimensionnées, découpées ou transformées sur la page Freeway. A moins qu'elles ne soient configurées comme blocs Calque (uniquement possible sur des pages HTML 4.0), elles ne peuvent pas être chevauchées par d'autres blocs. Si l'image est plus grande que le bloc la recevant, elle ne sera pas affichée, ni publié - une croix bleue sera affichée au travers du bloc. Pour ajuster le bloc à la taille de l'image importée, choisissez Ajuster à l'image dans le sous-menu Image du menu Bloc. Si, après avoir fait cela, l'image n'apparaît toujours pas, il se peut que la page elle-même soit trop petite pour contenir l'image. Rendez la page assez grande en utilisant le panneau Page de la palette Spécifications afin d'augmenter sa largeur et/ou sa hauteur. Gestion du multimédia 193 Gestion du multimédia Certaines des pages les plus intéressantes du Web utilisent des éléments multimédias comme du son, des films ou des animations. Si vous souhaitez afficher des éléments multimédias sur vos pages, vous pouvez les ajouter dans les documents Freeway de la même façon que du texte ou des images - en créant des blocs pour les contenir. De tels contenus multimédias peuvent être créés par une large gamme de programmes (certains sont listés dans la suite de cette section). Ces contenus nécessitent des logiciels additionnels dans les navigateurs afin de les afficher correctement. Ces programmes additionnels sont généralement disponibles sous la forme de plug-ins ou d'un fichier devant se placer dans le dossier Plugins, dans le dossier du navigateur. Le plug-in est alors lancé au démarrage du navigateur. Notez que ces plug-ins de navigateur ne devraient pas être confondus avec les plug-ins d'import/export de Photoshop. Ils permettent simplement aux visiteurs de voir ou d'interagir avec certains types de contenus. C'est pour cela que dans Freeway, les contenus multimédias sont souvent associés aux contenus "Plug-in". Ces contenus ne peuvent pas être prévisualisés dans Freeway, mais doivent l'être dans un navigateur équipé du plug-in approprié. Notez que les films QuickTime et Flash peuvent être prévisualisés mais pas joués dans Freeway. Avec certains contenus, vous pouvez spécifier des paramètres additionnels pour contrôler leur affichage. (Reportez-vous à "QuickTime", plus loin dans cette section). Si vous utilisez des contenus "plug-in" sur vos pages Web, il est généralement conseillé d'avertir les visiteurs du type de contenu qu'ils vont rencontrer. Cela leur permet de décider librement s'ils souhaitent le voir ou non. Souvent, ces contenus sont de taille importante et peuvent frustrer les visiteurs utilisant une connexion lente. De nombreux types de contenu requièrent aussi beaucoup plus de mémoire que le navigateur en utilise habituellement ; et certaines personnes trouvent que certains types de contenus entraînent une instabilité de leur système. Il est essentiel que, lors de l'utilisation de contenus de plug-in, vous informiez le visiteur du logiciel dont il va avoir besoin pour l'afficher, et que vous fournissiez les liens vers les sites permettant le téléchargement de ces programmes. Sans cela, vous risquez de gêner fortement et de frustrer le visiteur. Certains formats, comme le format Flash de Macromedia, permettent aux auteurs des sites de spécifier un contenu alternatif pour les visiteurs ne pouvant les afficher. Une image alternative peut alors être automatiquement affichée. 194 Gestion du multimédia Contenus multimédias typiques QuickTime QuickTime est le moyen le plus commun de créer des films pour le multimédia et le Web. Les applications comme Premiere d'Adode ou Final Cut Pro ou iMovie d'Apple sont utilisées pour digitaliser et éditer les vidéos, et les sauver au format QuickTime. QuickTime est parfois utilisé pour exporter des animationscréées avec des logiciels de modélisation 3D. Les deux navigateurs principaux sont installés par défaut avec les plug-ins QuickTime (sur Mac), mais pour fonctionner ils nécessitent la présence de QuickTime sur l'ordinateur. Les films QuickTime peuvent contenir du son, des images ou à la fois du son et des images. Ils sont identifiés normalement par ".mov" à la fin du nom de fichier. Pour importer un film QuickTime, créez un bloc HTML (bloc affiché avec un contour bleu dans Freeway). Sélectionnez le et choisissez Importer dans le menu Fichier. L'image de prévisualisation du film apparaît alors dans le bloc. Pour modifier les paramètres de relecture de ce film, utiliser les options du panneau Bloc dans la palette Spécifications : Contrôleur Affiche la barre de contrôle QuickTime. Si la case Contrôleur est cochée et que le bloc est redimensionné pour coller aux dimensions du film (en utilisant Ajuster à l'image depuis le sous-menu Image du menu Bloc), Freeway ajuste le bloc afin qu'il contienne aussi le contrôleur (comme dans l'exemple cidessus). Gestion du multimédia 195 Auto Le film sera joué automatiquement lors du chargement de la page. Boucle Le film sera rejoué continuellement. Si l'option Palindrome est choisie, le film sera rejoué entièrement à l'endroit et à l'envers à l'infini. Calque Détermine si le bloc est un bloc Calque. Cette option n'est disponible qu'en HTML 4.0 (voir Mise en page HTML 4.0). Alt Détermine si un texte alternatif doit être affiché dans le navigateur lorsque le visiteur a choisi de ne pas afficher les images (reportez-vous à Texte alternatif pour les images) Comme le film QuickTime est un contenu de plug-in, vous ne pourrez pas le redimensionner (voir Utiliser des contenus de plug-in dans Freeway). Si vous redimensionnez le bloc, le film sera découpé lors de son affichage dans le navigateur. D'autres fonctionnalités peuvent être ajoutées aux films QuickTime en utilisant les actions QuickTime Extras, expliquées dans le chapitre Actions. Shockwave et Flash Shockwave est sans doute le moyen le plus répandu sur le Web pour afficher des animationsautres que les GIFs animés et est fourni sous deux formes : Director et Flash. Shockwave est un standard propriétaire développé et maintenu par Macromedia. Vous pouvez créer des éléments Shockwave en utilisant Director, Flash ou FreeHand de Macromedia. Pour afficher des contenus Shockwave, les visiteurs doivent télécharger le plug-in approprié sur le site Web de Macromedia http://www.macromedia.com/. Il existe deux plug-ins : (1) le player Shockwave, qui joue à la fois les fichiers Shockwave et Flash, et (2) le player Flash, qui ne relit que les fichiers Flash. Le format Flash utilise la technologie vectorielle pour créer des animations compactes, qui s'exécutent et se téléchargent rapidement. Director est un environnement de conception multimédia et est utilisé pour créer beaucoup de présentations trouvées sur CD-ROM. Il est plus ancien que Flash et utilise en premier lieu des informations bitmap (comme Photoshop et les autres outils d'édition d'images) plutôt que vectorielles. Cela signifie que les animations Director sont plus grosses que les animations Flash et peuvent être plus longues à télécharger. Si possible, créez des animations au format Flash plutôt qu'en Director. Freeway vous permet d'importer les fichiers Flash (normalement identifiés avec un ".swf" à la fin du nom de fichier) directement dans votre document. Dessinez un bloc HTML et choisissez Importer depuis le menu Fichier. La première image du film apparaîtra dans le bloc. Contrairement aux contenus de plug-ins, les éléments Flash peuvent être redimensionnés, de sorte que le Gestion du multimédia 196 fichier Flash soit affiché aux dimensions que vous aurez choisies pour son bloc. Pour modifier les paramètres de relecture du fichier Flash dans le navigateur, utilisez les options dans le panneau Export de la palette Spécifications : Boucle le fichier Flash est relu indéfiniment. Jouer le fichier Flash est lu automatiquement lorsque la page est chargée. Qualité quatre options sont disponibles afin de régler la qualité de lecture du fichier dans le navigateur. Calque Détermine si le bloc est un bloc Calque. Cette option n'est disponible qu'en HTML 4.0.(voir Mise en page HTML 4.0). Alt Détermine si un texte alternatif doit être affiché dans le navigateur lorsque le visiteur a choisi de ne pas afficher les images. (reportez-vous à Texte alternatif pour les images) Pour des options additionnelles, reportez-vous aux actions Flash Extras expliquées dans le chapitre Actions. Shockwave Director Pour lire des fichiers Shockwave Director (.dcr), il est préférable d'utiliser les Actions Director expliquées dans le chapitre Actions. Les fichiers Director ordinaires sont aussi supportés, mais leurs tailles peuvent être très importantes. Acrobat Adobe Acrobat est un outil standard utilisé pour créer les fichiers PDF (Portable Document Format) - un format utilisé pour créer et transférer des documents Gestion du multimédia 197 électroniques. Ces documents sont transférables par le Web et imprimable localement. Pour voir ou imprimer un fichier PDF, le logiciel Acrobat Reader est requis. Acrobat Reader est librement disponible depuis le site Web d'Adobe et se trouve souvent sur les CD-ROMS informatiques. Les fichiers PDF ne sont pas vraiment des contenus "Plug-In» ; vous ne pouvez pas les importer directement dans les blocs Freeway, mais vous pouvez créer des liens sur eux depuis une page Freeway. Si le visiteur a installé et configuré correctement Acrobat Reader 3 ou supérieur avec le plug-in Acrobat WebLink, les fichiers PDF peuvent être téléchargés et visualisés directement dans le navigateur. Le Reader ajoute temporairement les contrôles de navigation Acrobat au navigateur, et les documents PDF peuvent incorporer des liens hypertexte afin de permettre aux visiteurs de continuer à naviguer plutôt que d'avoir à revenir en arrière. Reportez-vous à l'Action Download Acrobat, expliquée dans le chapitre Actions. Applets Java Java est un langage de programmation (à ne pas confondre avec le JavaScript, un langage différent) qui est indépendant de la plate-forme. Cela signifie que le même fichier programme (ou "applet Java") sera exécuté sur n'importe quel ordinateur ou navigateur supportant Java. Les applets peuvent fonctionner comme des objets graphiques, incorporer des animationset de l'interactivité ou effectuer d'autres tâches utiles. De nombreux applets disponibles en téléchargement donnent les mêmes fonctions que les Actions JavaScript ou les films Flash. Il est à noter que l'exécution des applets Java requiert beaucoup de ressources systèmes sur la machine du visiteur, et que certains navigateurs sont configurés avec le support Java désactivé par défaut. Si l'Applet n'arrive pas à s'exécuter, le visiteur n'aura peut-être qu'une boîte vide sur son écran sans aucune explication sur le problème. Les applets Java peuvent être importées dans un bloc Freeway comme tout autre contenu. Vous pouvez ajouter des paramètres additionnels à l'Applet dans le dialogue Extensions accessible par le menu Bloc. Les paramètres de l'Applet sont insérés dans la section Paramètres de ce dialogue. S'il y en a un grand nombre, il est préférable d'insérer un bloc Marqueur dans la page et d'y coller le code. Vous devrez aussi transférer séparément l'Applet sur le serveur Web. Il y a trois problèmes à connaître lors de l'utilisation des Applets Java : • Les applets Java doivent souvent être stockées dans le même dossier que le fichier HTML qui y fait référence. Cela signifie que vous devriez vérifier que vous avez sélectionné l'option Avec les fichiers HTML pour les Ressources dans le dialogue Réglages document. 198 Gestion du multimédia • Les applets Java peuvent requérir d'autres fichiers sur votre site. Vous aurez besoin de les transférer vous-même. • Les applets Java, normalement, ne peuvent pas être renommés. Si vous les renommez, ils ne s'exécuteront peut-être pas. Utiliser des contenus de plug-in dans Freeway Voici comment importer un élément multimédia dans Freeway : 1 Créez un bloc rectangulaire en utilisant l'outil création de bloc HTML ou Graphique. 2 Le bloc étant sélectionné, choisissez Importer depuis le menu Fichier (Freeway ne connaît pas à l'avance lesquels des nombreux formats multimédias vous souhaiterez importer. Il affiche donc tous les fichiers disponibles - même les applications - dans le dialogue, sans tenir compte du fait que Freeway reconnaissent ou pas leur type). 3 Sélectionnez le fichier que vous souhaitez importer et cliquez sur OK. Si le fichier que vous sélectionnez ne peut être identifié comme une image, il sera importé en tant que contenu de plug-in. Dans le bloc Freeway, vous verrez une prévisualisation (si le contenu du plugin est supporté par QuickTime) ou une icône de plug-in avec le nom du fichier associé. Lorsque le site est publié, le fichier que vous avez spécifié sera copié dans le dossier de votre site. Si le fichier est identifié comme un applet Java, vous verrez l'icône d'Applet et une description de fichier. La plupart des applets Java sont fournis sous la forme de plusieurs fichiers qui sont tous requis. Seul le fichier sélectionné sera copié dans le dossier de votre site, et vous devrez copier les autres à la main. Utiliser des paramètres personnalisés pour les contenus de plug-ins Certains formats permettent de configurer la relecture du contenu par le biais de commandes étendues, appelées paramètres. Vous pouvez les ajouter en utilisant l'option Extensions du menu Bloc. Les paramètres sont spécifiés en tant que paires Nom/Valeur et dépendent du format concerné. Pour plus d'informations sur les code d'extension, reportez-vous à Compléter le code généré pour des éléments spécifiques. Pour des informations sur les contrôles disponibles pour QuickTime, visitez la page suivante sur le site Web d'Apple : http://developer.apple.com/quicktime/ Gestion du multimédia 199 Utiliser les Actions Freeway pour gérer du multimédia Freeway offre un nombre d'Actions sans cesse croissant, pour vous aider à gérer les contenus multimédias. Reportez-vous au chapitre Actions et visitez le site Web de SoftPress ou celui de TRI-EDRE. 200 Tableaux Tableaux Dans Freeway, les tableaux sont de puissants moyens pour organiser et présenter correctement et facilement des informations tabulaires (en rangées et colonnes). Les tableaux sont pratiques pour la présentation de contenus comme des listes de prix, des horaires ou des spécifications de produits. Il peuvent aussi permettre la conception de formulaires complexes, où les contrôles (voir Formulaires) et les textes doivent être soigneusement agencés. Un tableau consiste en une suite de "cellules" rectangulaires, arrangées côte à côte afin de former les rangées et les colonnes. Lorsque vous créez un tableau dans Freeway, vous devez spécifier son nombre de rangées et de colonnes. Une fois le tableau créé, vous pouvez ajuster la largeur et la hauteur des cellules, les fusionner, saisir du texte et placer des images incrustées ou des contrôles de formulaire. Les tableaux sont considérés dans Freeway comme des blocs HTML, ce qui signifie qu'ils se comportent comme des blocs de texte HTML, des images "tel quel" ou des contrôles de formulaire. Tout comme les contrôles de formulaires dans Freeway, les tableaux ne peuvent avoir de bloc devant eux et peuvent causer le découpage des blocs Graphiques derrière eux. Après avoir créé un tableau, toutes les rangées auront la même hauteur et les colonnes la même largeur. Vous pouvez alors redimensionner individuellement les rangées et les colonnes. Vous pouvez ajouter ou supprimer des rangées et des colonnes à tout moment. Comme les autres blocs HTML, la taille verticale d'un tableau sur votre page peut varier lorsque la page est visualisée dans un navigateur, celui-ci pouvant en effet avoir des tailles de textes par défaut différentes. Utiliser des tableaux pour concevoir des présentations complexes requiert le même soin que l'utilisation de blocs de texte HTML ou de contrôles de formulaire. En effet, ceux-ci peuvent s'étendre et entraîner des coupures ou le décalage d'autres éléments lorsque votre page est visualisée. Pour plus de renseignements sur le comportement des blocs HTML, reportez-vous à Mise en page flexible. En plus du nombre de rangées et de colonnes et de leurs tailles, vous pouvez aussi contrôler d'autres aspects du tableau. Ils incluent la possibilité d'avoir ou non des bordures plus ou moins épaisses entre les cellules, de choisir une couleur de remplissage pour le tableau ou une couleur de fond pour une cellule et l'alignement vertical des contenus des cellules. Vous pouvez aussi choisir de fusionner plusieurs cellules adjacentes, ce qui donne encore plus de flexibilité à la présentation de vos données. Créer des tableaux Les tableaux peuvent être créés dans Freeway en utilisant l'outil de création Tableau ou en choisissant la commande Tableau du menu Insertion. Quelque Tableaux 201 soit la méthode utilisée, le logiciel vous demandera de spécifier le nombre de rangées et de colonnes souhaitées. Créer un tableau avec l'outil Tableau Pour dessiner un tableau à l'aide cet outil : 1 Sélectionnez l'outil Tableau dans la palette Outils . 2 Cliquez et glissez le curseur sur la page afin de définir une zone rectangulaire. Cette zone définit la taille et la position du nouveau tableau. 3 Dans le dialogue qui apparaît, entrez les valeurs numériques du nombre de rangées et de colonnes que vous désirez et cliquez sur OK. Vous pourrez modifier ces nombres plus tard si vous le souhaitez. Un nouveau tableau, avec les attributs par défaut, apparaît sur la page, dans la zone que vous aviez définie avec l'outil de création. Les rangées et les colonnes sont espacées régulièrement et s'ajustent à la taille du tableau. Créer un tableau à l'aide du menu Insertion En utilisant la commande Tableau du menu Insertion, vous pouvez créer un tableau sur la page, en tant que bloc indépendant. Pour cela : 1 Assurez-vous qu'aucun texte ne soit sélectionné ou qu'aucun point d'insertion de texte ne soit actif. 2 Choisissez Tableau dans le menu Insertion. Le dialogue Tableau apparaît alors. 3 Dans ce dialogue, entrez les valeurs numériques des nombres de rangées et de colonnes que vous désirez et cliquez sur OK. Vous pourrez modifier ces réglages par la suite. Un nouveau tableau, avec des attributs par défaut, apparaît au centre de la fenêtre du document avec une taille par défaut. C'est un bloc indépendant. Les rangées et les colonnes sont espacées régulièrement pour s'ajuster aux dimensions du tableau. 202 Tableaux Modifier les tableaux De nombreuses options peuvent être spécifiées pour les tableaux et les cellules. Pour accéder à la plupart d'entre elles, Freeway propose de deux panneaux dans la palette Spécifications - le panneau Tableau et le panneau Cellule. Le premier panneau est disponible permet de travailler sur le tableau global. Le second panneau permet de modifier les caractéristiques de chaque cellule. Il existe aussi des commandes relatives aux tableaux dans les menus Bloc et Insertion. Vous pouvez contrôler les options de tableaux suivantes : • Position • Taille • Nombre de rangées et de colonnes • Tailles de cellule, de rangée ou de colonne • Largeur de bordure • Espacement des cellules • Couleur de fond des tableaux et des cellules • Fusionner/Scinder des cellules • Retrait dans les cellules • Alignement vertical du contenu des cellules Tableaux 203 Positionner les tableaux Les tableaux peuvent être déplacés et positionnés sur une page Freeway comme les autres objets, soit en les glissant à l'aide la souris, soit en utilisant la palette Spécifications. Positionner un tableau avec la souris 1 Avec l'outil Sélection, placez le curseur sur la bordure du tableau, jusqu'à ce qu'il se transforme en flèche vide. 2 Cliquez et glissez pour déplacer le tableau. Un contour vous indique la position du tableau pendant l'opération, et le panneau Bloc de la palette Spécifications affiche ses coordonnées. Astuce : Pour déplacer un tableau, vous pouvez aussi placer le curseur dans le tableau et maintenir la touche Commande enfoncée. Le curseur se transforme en flèche vide. Toujours avec la touche Commande enfoncée, cliquez et glissez le tableau. Positionner un tableau avec les coordonnées de page 1 Sélectionnez le tableau. 2 Dans le panneau Bloc de la palette Spécifications, entrez dans les champs X et Y les décalages par rapport au coin supérieur-gauche de la page. Utilisez la touche Tabulation pour changer de champ et la touche Retour pour valider les changements. Redimensionner les tableaux Les tableaux peuvent être redimensionnés à l'aide de la souris ou en saisissant une nouvelle largeur et une nouvelle hauteur dans le panneau Bloc de la palette Spécifications. Un tableau ne peut pas être plus petit que son contenu. Il est important de noter que beaucoup des actions effectuées sur des rangées, des colonnes ou des cellules dans le tableau peuvent aussi affecter la taille globale. Par exemple, la colonne de droite ou la dernière rangée peuvent être redimensionnées en glissant la bordure droite ou la bordure inférieure du tableau et la taille globale du tableau sera alors modifiée. Redimensionner un tableau avec la souris 1 Sélectionnez le tableau en cliquant dans une cellule avec la touche Commande enfoncée, puis cliquez à nouveau dans la cellule avec les touches Commande et Option enfoncées, de manière à faire apparaître les poignées de sélection du tableau. 2 Avec l'outil Sélection, pointez une poignée. Le curseur se change en flèche noire sans queue. 204 3 Tableaux Cliquez et glissez pour redimensionner le tableau. Toutes les rangées et les colonnes du tableau seront redimensionnées proportionnellement. Redimensionner un tableau à l'aide de valeurs numériques 1 Sélectionnez le tableau 2 Dans le panneau Bloc de la palette Spécifications, utilisez les champs W et H pour saisir la nouvelle largeur et la nouvelle hauteur. Vous pouvez utiliser la touche Tabulation pour changer de champ et la touche Retour pour valider les changements. Sélectionner des cellules, des rangées et des colonnes Pour modifier les couleurs de fond des cellules ou pour fusionner ou scinder des cellules, vous devez avant tout sélectionner les cellules concernées. De plus, pour fusionner des cellules dans les contenus et les couleurs de fond sont différentes, vous devez pouvoir spécifier la cellule dont les réglages seront conservés. Freeway vous permet de sélectionner une ou plusieurs cellules dans un tableau, même si les cellules ne sont pas adjacentes. Lors de la sélection de plusieurs cellules, la première sélectionnée est marquée comme "Maîtresse". Si vous effectuez une fusion de cellules, les réglages et le contenu de cette cellule seront utilisés pour le résultat (voir Fusionner ou scinder des cellules pour plus d'explications). Lorsque plusieurs cellules sont sélectionnées, la cellule maîtresse est affichée avec un contour plus épais (ci-dessous la cellule colonne 2, rangée 1), et le reste des cellules sélectionnées sont indiquées à l'aide d'un contour de sélection se déplaçant (ci-dessous 4 cellules ont été sélectionnées). Freeway permet aussi de sélectionner rapidement des rangées ou des colonnes entières en cliquant sur la bordure supérieure ou la bordure gauche - une flèche est affichée pour montrer la rangée ou la colonne sélectionnée en cas de clic. Sélectionner une cellule Avec l'outil Sélection, maintenez la touche Commande enfoncée et cliquez sur la cellule à sélectionner. Vous pouvez déplacer la sélection en utilisant la touche Tabulation ou les touches fléchées. Tableaux 205 Sélectionner plusieurs cellules 1 Avec l'outil Sélection, maintenez la touche Commande enfoncée et cliquez sur la première cellule à sélectionner. Cette cellule sera la cellule maîtresse de la sélection. 2 Puis, maintenez la touche Majuscule enfoncée avec la touche Commande et cliquez sur les cellules suivantes. Les cellules n'ont pas besoin d'être adjacentes. Vous pouvez aussi utiliser les touches fléchées du clavier avec la touche Majuscule pour étendre la sélection aux cellules voisines. Note : Si vous souhaitez désélectionner une cellule, cliquez à nouveau dessus avec les touches Commande et Majuscule enfoncées. Sélectionner une rangée ou une colonne entière 1 Déplacez la souris sur le haut d'une colonne ou la gauche d'une rangée jusqu'à ce que le curseur se change en petite flèche pleine. 2 Cliquez pour sélectionner la colonne ou la rangée. Vous pouvez aussi sélectionner plusieurs rangées ou colonnes : sélectionnez la première rangée ou la première colonne, maintenez la touche Majuscule enfoncée et sélectionnez-en une autre. Les sélections peuvent être contiguës ou disjointes (par exemple vous pouvez sélectionner la seconde et la cinquième rangée d'un tableau pour supprimer ou modifier rapidement le formatage des cellules ou de leurs contenus). La sélection n'est pas limitée seulement aux colonnes ou seulement aux rangées - vous pouvez avoir des rangées et des colonnes sélectionnées simultanément. Note : Toute fusion de cellule ne sera sélectionnée que si elle débute dans la rangée ou la colonne sélectionnée. Sélectionner un tableau 1 Cliquez dans une cellule avec la touche Commande enfoncée. 2 Cliquez à nouveau avec les touches Commande et Option enfoncées pour sélectionner le tableau. Ajouter et supprimer des rangées et des colonnes Vous pouvez ajouter ou supprimer des rangées et des colonnes à tout moment. Pour modifier le nombre de rangées et de colonnes, éditez les paramètres dans le panneau Tableau de la palette Spécifications ou insérez ou supprimez 206 Tableaux directement les rangées et les colonnes en un point particulier du tableau. Une cellule individuelle d'un tableau ne peut pas être supprimé (seules les rangées ou colonnes peuvent l'être). Lorsque vous utilisez la palette Spécifications pour modifier le nombre de rangées et de colonnes, les rangées sont ajoutées à la fin du tableau et les colonnes à sa droite. Lorsque vous utilisez la commande Insérer du sous-menu Tableau du menu Bloc, Freeway affiche un dialogue pour choisir l'emplacement où insérer la rangée ou la colonne. Changer le nombre total de rangées et de colonnes d'un tableau 1 Sélectionnez le tableau et affichez le panneau Tableau de la palette Spécifications. 2 Indiquez dans les champs Rangées et Colonnes les nouvelles valeurs. La touche Tabulation permet de changer de champ et la touche Retour de valider les changements. Le tableau sera mis à jour et si des rangées ou des colonnes doivent être ajoutées ou supprimées, elles le seront en partant du coin inférieur droit du tableau. Supprimer une ou plusieurs rangées ou colonnes Vous pouvez simplement supprimer des rangées ou des colonnes spécifiques dans un tableau. Deux méthodes sont disponibles, suivant que vous ayez sélectionné une rangée ou une colonne entière ou une cellule dans la rangée souhaitée (la seconde ne s'appliquant qu'aux rangées). 1 Sélectionnez les rangées et les colonnes entières (voir ci-dessus). Une fois la sélection effectuée, appuyez sur la touche "Effacement". 2 Si vous avez sélectionné une seule cellule, vous pouvez supprimer la rangée ou la colonne contenant la cellule en choisissant Supprimer Rangée ou Supprimer Colonne depuis le sous-menu Tableau du menu Bloc. Ajouter des rangées et des colonnes 1 Sélectionnez le tableau, une cellule ou un groupe de cellules dans le tableau. 2 Depuis le sous-menu Tableau du menu Bloc, choisissez Insérer Rangées ou Insérer Colonnes. Vous pourrez peut-être constater que certaines de ces options sont indisponibles, suivant la sélection en cours - par exemple, si vous sélectionnez une rangée entière, vous ne pourrez pas insérer de colonne, vice-versa. 3 Freeway affiche un dialogue vous permettant de choisir le nombre, la taille et la position des colonnes ou des rangées à insérer. Cliquez sur OK pour valider vos choix. Tableaux 4 207 Les nouvelles rangées ou colonnes sont ajoutées. Astuces : Vous pouvez rapidement créer une nouvelle rangée ou colonne comme ceci : 1 Commencez à glisser la bordure séparant deux rangées ou deux colonnes (comme décrit dans Redimensionner les rangées et les colonnes). 2- Enfoncez la touche Option en continuant de glisser. 3- Relâchez le bouton de la souris ainsi que la touche Option. Supprimer le contenu des cellules Pour supprimer le contenu des cellules, des rangées ou des colonnes, sélectionnez les et choisissez Effacer le contenu depuis le menu Edition ou taper Commande-B. Toutes les cellules garderont leurs options de formatage comme leur couleur de fond. Cellules vides En HTML, des cellules peuvent être définies comme "vide", ce qui signifie qu'aucune cellule n'est affichée dans le tableau à cette position - celles-ci sont différentes des cellules ordinaires ne contenant rien. Par exemple, les cellules vides n'affiche pas de bordure s'il en existe une pour le tableau. Vous pouvez sélectionner toute cellule pour les rendre vides, entraînant la perte de tout contenu existant. Rendre vide une cellule 1 Sélectionnez une ou plusieurs cellules. 2 Dans le panneau Cellule de la palette Spécifications, cochez la case Vide. Tout contenu existant sera supprimé, et la cellule sera affichée comme une zone vierge dans le tableau. 3 Pour recréer une cellule, cliquez avec la touche Commande enfoncée à la position où devrait être la cellule et décochez la case Vide dans le panneau Cellule de la palette Spécifications. Le fait de cliquer avec l'outil Sélection à cette position et de saisir un contenu recréera aussi la cellule. 208 Tableaux Redimensionner les rangées et les colonnes Lorsque vous redimensionnez une rangée ou une colonne avec la souris, vous pouvez choisir si la taille ou la position de la rangée ou de la colonne adjacente doit être modifiée. Vous pouvez aussi spécifier la taille des rangées et des colonnes en utilisant des valeurs numériques. Modifier les dimensions des rangées et des colonnes avec la souris 1 Avec l'outil Sélection, pointez la bordure entre deux rangées ou deux colonnes de manière à ce que le curseur prenne la forme de l'outil de redimensionnement. 2 Cliquez et glissez la bordure pour la repositionner et redimensionner la rangée du dessus ou la colonne de gauche. La rangée ou la colonne adjacente sera repositionnée. Note 1 : Vous pouvez obliger la rangée ou la colonne adjacente à être redimensionnée plutôt que décalée, en maintenant la touche Commande enfoncée après avoir commencé le glissé et en relâchant la touche après le bouton de la souris. Note 2 : Les rangées et les colonnes ont une taille minimum lorsqu'elles sont vides et ne peuvent pas être plus petite. Si des cellules contiennent du texte, elle ne peuvent pas être rendues plus petites que la taille requise pour contenir le texte. Lorsqu'une cellule contient un bloc incrusté, son contenu débordera si la cellule est trop petite pour afficher le bloc entier. Modifier les bordures des tableaux Lorsqu'un tableau est affiché dans un navigateur, il peut avoir des bordures en relief autour des cellules et du tableau. Vous pouvez les activer ou désactiver et en spécifier l'épaisseur. Par défaut, les tableaux créés dans Freeway ont une bordure de 5 points d'épaisseur. Modifier la bordure du tableau 1 Sélectionnez le tableau. Tableaux 2 209 Dans la palette Spécifications, entrez une nouvelle valeur numérique dans le champ Epaisseur bordure du panneau Tableau et validez avec la touche Retour. Enlever la bordure d'un tableau 1 Sélectionnez le tableau. 2 Dans la palette Spécifications, entrez la valeur 0 dans le champ Epaisseur bordure du panneau Tableau et validez par la touche Retour Petite bordure et texte en retrait Bordure tableau et espacement cellules Modifier l'espacement des cellules Les cellules de chaque rangée ou colonne peuvent être séparées par un espace plus ou moins important - appelé espacement de cellule. Par défaut, cet espacement est de 5 points dans les tableaux créés dans Freeway. Cette épaisseur modifie l'ensemble des dimensions du tableau. Changer l'espacement de cellules 1 Sélectionnez le tableau. 2 Dans la palette Spécifications, entrez une nouvelle valeur dans le champ Espacement du panneau Tableau et validez par la touche Retour. Supprimer l'espacement de cellules 1 Sélectionnez le tableau. 2 Dans la palette Spécifications, entrez la valeur 0 point dans le champ Espacement du panneau Tableau et validez par la touche Retour. Changer le retrait dans les cellules Dans chaque cellule de tableau, vous pouvez spécifier un retrait entre le bord intérieur de la cellule et son contenu. Le retrait est réglé sur 0 point par défaut. Changer le retrait interne 1 Sélectionnez le tableau 2 Dans la palette Spécifications, entrez la nouvelle valeur dans le champ Retrait texte du panneau Tableau et validez par la touche Retour. 210 Tableaux Supprimer le retrait interne 1 Sélectionnez le tableau. 2 Dans la palette Spécifications, entrez la valeur 0 point dans le champ Retrait texte du panneau Tableau et validez par la touche Retour. Changer l'alignement des cellules Le contenu de chaque cellule du tableau peut être aligné en haut, centré ou en bas en utilisant le menu déroulant Aligner du panneau Cellule de la palette Spécifications. Appliquer une couleur Vous pouvez appliquer une couleur de fond au tableau ou à certaines cellules. Pour appliquer une couleur : 1 Sélectionnez le tableau, une cellule ou un groupe de cellules. 2 Choisissez la couleur souhaitée dans le panneau Tableau ou Cellule (suivant le cas) de la palette Spécifications ou depuis la palette Couleurs. Fusionner ou scinder des cellules Il est possible de fusionner plusieurs cellules afin de définir une nouvelle cellule unique qui chevauche deux ou plusieurs rangées ou colonnes. Les cellules ainsi créées sont utilisées comme en-têtes dans le tableau ou pour regrouper des catégories de cellules ensembles. Les cellules (fusionnées ou non) peuvent être scindées en autant de cellules que souhaité. Pour fusionner plusieurs cellules 1 Sélectionnez les cellules comme expliqué dans Sélectionner plusieurs cellules. La première cellule sélectionnée sera utilisée pour déterminer le contenu et les paramètres de formatage de la cellule fusionnée qui sera créée. 2 Choisissez Réunir les cellules dans le sous-menu Tableau du menu Bloc ou pressez les touches Commande-Retour arrière. Les cellules seront fusionnées en une seule cellule dont le contenu et les réglages seront ceux de la première cellule sélectionnée. Tableaux 211 Note : si les cellules sélectionnées n'étaient pas adjacentes dans la même rangée ou colonne, Freeway crée une cellule fusionnée dans le rectangle définit par les cellules les plus extrêmes. Scinder une cellule Pour scinder une cellule, sélectionnez la et choisissez Scinder les cellules dans le sous-menu Tableau du menu Bloc. Choisissez le nombre de nouvelles cellules et la direction de découpage (verticale ou horizontale), puis cliquez sur OK. Si le découpage de la cellule entraîne la création d'une nouvelle rangée ou colonne, la cellule est divisée en autant de parties égales. Cependant, si la cellule scindée avait été créée en regroupant des cellules existantes, les divisions originales seront rétablies si le nombre de cellules désirées correspond au nombre original. Formater le texte dans plusieurs cellules d'un tableau Freeway permet de formater du texte dans plusieurs cellules en même temps, cependant il n'est pas possible de sélectionner du texte dans plus d'une cellule à la fois. Sélectionnez les cellules contenant le texte à formater en cliquant sur chacune d'elles avec les touches Commande-Majuscules enfoncées, puis appliquez le formatage voulu. Copier/Coller des données dans un tableau Vous pouvez copier/coller des sélections entre les tableaux de vos documents. 1 Cliquez sur les cellules avec les touches Commande-Majuscule pour les sélectionner. 2 Choisissez Copier depuis le menu Edition. 3 Sélectionnez une cellule dans le tableau de destination et faites Coller du menu Edition. Importer dans un tableau Les cellules de tableau se comportent comme des blocs de texte HTML et sont supposées contenir du texte ou des valeurs numériques. Si vous souhaitez qu'une cellule contienne des images ou d'autres contenus (dont du multimédia), vous aurez besoin de créer un bloc incrusté dans la cellule. 212 Tableaux Ajouter du texte Vous pouvez ajouter du texte à une cellule en le tapant, en le collant ou en l'important. Lorsque vous ajoutez du texte, vous le faîtes dans une cellule unique. Cependant, il existe une possibilité pour importer du texte dans plusieurs cellules. Lorsque vous importez du texte délimité par des tabulations, des virgules ou des espaces dans une cellule, Freeway met automatiquement chaque morceau de texte dans une cellule du tableau. Chaque ligne de texte du fichier original deviendra une rangée. Lorsque vous créez des fichiers textes dans ce but, vous pouvez séparer les données par des tabulations, des espaces ou des virgules. Ajouter du texte à une cellule Cliquez dans la cellule en utilisant l'outil Sélection pour créer un point d'insertion. Pour ajoute le texte : • Tapez le texte désiré, ou • Collez les textes depuis le presse-papier, ou • Utilisez la commande Importer texte depuis le menu Fichier. Pendant que vous saisissez le texte, celui-ci crée une nouvelle ligne lorsqu'il atteint le bord de la cellule. Si aucune nouvelle ligne ne rentre dans la cellule, la cellule grandira vers le bas pour s'adapter au texte. Ceci entraînera l'agrandissement de toute la rangée. Importer du texte délimité dans un tableau 1 Créez un fichier texte dans un traitement de texte, en utilisant des virgules, des espaces ou des tabulations pour délimiter chaque entrée sur une ligne. 2 Créez un tableau. 3 Cliquez avec l'outil Sélection dans la première cellule du tableau afin d'y créer un point d'insertion. 4 Choisissez Importer texte dans le menu Fichier, sélectionnez le type de délimiteur de texte dans le menu déroulant Importer, puis trouvez le fichier à importer. Cliquez sur Ouvrir. Freeway importera le contenu du fichier dans le tableau. Freeway mettra automatiquement chaque entrée dans une cellule du tableau et chaque ligne Tableaux 213 dans une rangée. Si des rangées ou des colonnes additionnelles sont requises, Freeway offre l'option de les créer ou de tronquer le contenu importé. Importer d'autres contenu dans une cellule 1 Cliquez dans la cellule avec l'outil Sélection pour créer un point d'insertion. 2 Choisissez Bloc Graphique dans le menu Insertion pour insérer un bloc Graphique incrusté. 3 Cliquez sur le nouveau bloc avec la touche Commande enfoncée pour le sélectionner et choisissez alors Importer depuis le menu Fichier. Astuce : Si le bloc Graphique est trop large, il débordera du tableau. Dans ce cas, il est conseillé de dessiner le bloc Graphique en premier sur la page, d'importer l'image et de redimensionner le bloc afin de l'adapter à son contenu en utilisant la combinaison Commande-Majuscule-D. Sélectionnez et copiez le bloc Graphique, puis cliquez dans la cellule du tableau et collez le dedans. Vous pourrez ensuite ajuster la largeur de la colonne. Régler la hauteur de la cellule à 0 entraînera un bon ajustement de celle-ci par rapport au bloc. 214 Formulaires Formulaires Utiliser les formulaires Vous avez certainement rencontré des formulaires sur beaucoup de sites Web. Dès que vous saisissez une information sur une page Web, vous utilisez un formulaire : moteurs de recherche, livres d'or, pages de commande en ligne, etc. Avec Freeway et en utilisant des scripts ou des applications présents sur le serveur, vous pouvez créer des formulaires permettant aux utilisateurs de vous envoyer des informations, permettant d'interfacer votre site avec des bases de données ou d'implémenter des applications de vente en ligne. Serveurs et navigateurs Pour comprendre les formulaires, vous devez connaître le fonctionnement des serveurs Web et comment les navigateurs communiquent avec eux. Si vous voulez voir une page Web sur Internet, vous devez saisir son URL (Universal Resource Locator, qui est simplement son adresse) dans le navigateur qui recherche sur le réseau le serveur Web qui contient la page voulue. Si vous avez tapé une adresse du type "http://www.macintouch.com/", le navigateur lit le premier segment ("http:") comme le protocole (méthode de communication) et recherche le serveur http://www.macintouch.com/. Après s'être connecté au serveur, le navigateur lui demande alors d'envoyer la page requise. Si vous n'avez pas spécifié de page, le serveur enverra la page par défaut. C'est pour cela que votre site doit avoir une page avec comme nom "index.html" ou "index.htm". Le système de récupération des pages est plus ou moins statique : le visiteur utilise le navigateur pour demander une page et le serveur Web la lui renvoie. Le navigateur interprète alors le code HTML et affiche la page. Le niveau suivant de récupération est dynamique : plutôt que de demander simplement une page, le navigateur peut envoyer des informations et demander au serveur de faire quelque chose avec, ce qui se passe avec les formulaires. Vous pouvez utiliser Freeway pour créer des formulaires afin que, lorsque l'utilisateur clique sur le bouton d'envoi, l'information qu'il a fournie dans les champs du formulaire soit envoyée sur le serveur à un endroit où se trouve un script (habituellement un script CGI). Par exemple, "/cgibin/formmail.pl" est un chemin typique de script sur le disque du serveur. Si le formulaire envoie l'information à cet endroit, le script la traitera automatiquement en fonction des méthodes qui y sont incluses. Les différentes parties d'un formulaire Il existe trois parties dans un formulaire. La première est composée des éléments de formulaire qui sont affichés à l'écran et permettent à l'utilisateur 215 Formulaires de saisir les informations demandées. Vous pouvez insérer ces contrôles avec les outils de Freeway. La seconde partie est constituée par les instructions qui doivent être données au navigateur lorsque l'utilisateur clique le bouton d'envoi - où doivent être envoyées les informations et ce qui doit leur arriver, par exemple. Ces instructions doivent être entrées dans le dialogue Réglages formulaire depuis le menu Page de Freeway. La dernière partie est un script, un programme ou un autre service sur le serveur Web qui se charge des informations recueillies dans le formulaire (typiquement, les scripts "Perl" placés dans le dossier "cgi-bin" du serveur. L'administrateur du serveur Web en a normalement la responsabilité. Si vous publiez votre site par l'intermédiaire d'un fournisseur d'accès Internet, vous devez le contacter pour savoir quelles sont les options qu'il peut vous proposer. Il dispose souvent déjà de scripts "Perl" mais vous pouvez parfois transférer les vôtres. Freeway vous permet de travailler facilement sur les deux premières parties grâce à son interface. En utilisant les outils Formulaires, vous pouvez créer des blocs Formulaire ainsi que les contrôles sur vos pages. Les formulaires peuvent avoir les caractéristiques suivantes : Nom Permet au formulaire d'être identifié. Il peut couvrir un seul élément ou un groupe. Si vous avez un groupe de boutons radio, ils auront le même nom (avec des boutons radio, l'utilisateur choisit parmi différentes options). Les autres contrôles auront généralement des noms distincts. Valeur Ce que le formulaire envoie au gestionnaire de formulaire. Il s'agit de l'information que vous souhaitez recevoir de la part du visiteur. Action L'endroit où se trouve le script traitant le formulaire (à ne pas confondre avec les Actions Freeway). Dans la plupart des formulaires, les visiteurs fournissent les informations et cliquent sur le bouton d'envoi. Le script de traitement prend en charge le formulaire et vous renvoie le résultat ou les informations par mail grâce à l'adresse que vous aurez saisie dans le dialogue Réglages Formulaire. Le formulaire peut aussi être configuré pour fournir un retour au visiteur, en le redirigeant vers la page "Remerciements". Mettre en place un formulaire Créer des formulaires simples dans Freeway est facile - vous devez simplement dessiner les blocs et les nommer convenablement pour indiquer au visiteur l'information requise. Mais, pour que le formulaire fonctionne, il vous faut ajouter quelques fonctions. Vous devez créer un bouton Envoi pour envoyer des informations au serveur. 216 Formulaires Vous devez aussi entrer l'action à accomplir dans le dialogue Réglages Formulaire (depuis le menu Page, reportez vous à Réglages du Formulaire). L'action est habituellement l'emplacement du script de traitement sur le serveur Web. Ce que vous saisissez dans le dialogue Réglages Formulaire dépend du script ou du programme qui traitera l'information. Si vous savez déjà comment utiliser les formulaires et si vous avez accès aux scripts ou programmes appropriés, vous disposez de tous les éléments pour commencer. Dans le cas contraire, vous devrez obtenir de l'aide de la part de l'administrateur de votre serveur Web sur les options disponibles pour le traitement des formulaires. Si vous louez les services d'un fournisseur d'accès Internet, il devrait normalement avoir des programmes et scripts standards en "Perl" vers lesquels vous dirigerez vos formulaires (en d'autres termes, configurer vos formulaires pour qu'ils envoient les informations au script approprié). Le service technique du fournisseur devrait être capable de vous indiquer ce qui est disponible, ce que police les programmes et les scripts et ce que vous devez inclure dans vos formulaires pour les utiliser. Sinon, vous avez peut-être un accès direct au serveur ou les droits pour transférer vos propres scripts dans le répertoire "cgi-bin" (mais cela est moins courant, pour des raisons de sécurité). Dans ce cas, vous trouverez sur Internet une large gamme de scripts et de programmes - souvent libres de droit. Certains serveurs fournissent aussi des scripts gratuits qui vous permettront de traiter vos données. Si vous avez besoin de plus d'aide, contactez le support technique de TRI-EDRE ou celui de SoftPress. Utiliser "mailto:” Il est possible de configurer les formulaires sans aucune référence à un script de traitement sur le serveur. En guise d'action de formulaire, vous pouvez entrer "mailto:" suivi par une adresse email. Si le navigateur des visiteurs est configuré correctement, il peut générer une réponse email contenant les informations du formulaire qui sera envoyée automatiquement dans votre boîte aux lettres. Cependant, cette méthode est peu sûre pour traiter les informations. Nous vous recommandons d'utiliser un script ou un programme de traitement adapté et conçu pour cela plutôt que la balise "mailto:". Exemple de formulaire Voici un exemple de configuration d'un formulaire. La copie d'écran suivant indique le formulaire dans Freeway et le résultat obtenu dans le navigateur : 217 Formulaires Édition du formulaire dans Freeway Résultat dans le navigateur Les résultats d'un formulaire sont les informations que vous récupérerez lorsque le formulaire sera envoyé et traité. Reportez-vous à Réglages du Formulaire pour plus de renseignements sur la configuration de vos formulaires. Les résultats que vous recevrez devraient ressembler à cela : ------ BEGIN FORM -----* boxdocumentation=ON * boxcontact=ON * langue=f * adresse=PERSO * [email protected] * comments=Veuillez m'envoyer plus de détails. ------- END FORM -------A gauche des signes "=" se trouve le nom du contrôle et à droite la valeur. Outils Formulaire La palette Outils fournit six outils pour créer des contrôles : Case à cocher, Bouton radio, Bouton, Champ d'édition, Menu déroulant ou Liste et Zone de texte. Vous pouvez aussi utiliser le menu Insertion pour ajouter les contrôles à votre page. Créer des blocs de formulaire Les blocs de formulaires sont un type unique de blocs dans Freeway et se comportent comme les blocs avec un contenu "Plug-in". Vous les créez de la même manière que les autres blocs, mais une fois qu'ils sont dessinés, vous ne pouvez pas les convertir en d'autres types de blocs. Vous ne pouvez pas faire chevaucher des contrôles de formulaire à moins que vous ne les créiez en tant que calques (voir Mise en page HTML 4.0). 218 Formulaires Pour créer un contrôle Formulaire, sélectionnez l'outil approprié au type de contrôle voulu et dessinez le bloc. Le contrôle sera affiché lorsque vous relâcherez le bouton de la souris. Vous pouvez déplacer et redimensionner les éléments de formulaires comme les autres blocs. Vous pouvez spécifier les options des contrôles avec les panneaux Bloc et Contrôle de formulaire de la palette Spécifications. Les options disponibles dépendront du type de contrôle sélectionné. Vous pouvez aussi insérer des contrôles de formulaire dans des cellules de tableau ou dans un texte d'un bloc HTML, en utilisant les commandes du menu Insertion. Les tableaux sont particulièrement utiles pour aligner les contrôles et leur associer des textes. Astuce : Vous pouvez aussi dessiner un texte graphique et créer un contrôle (comme une case à cocher ou un bouton radio) à côté de lui. Le contrôle étant sélectionné, activez le panneau Contrôle de formulaire dans la palette Spécifications et effacez le champ Texte, puis redimensionnez le contrôle. Pour vous assurer que le formatage restera correct, il est conseillé d'utiliser la technique des tableaux. Case à cocher Les cases à cocher permettent aux visiteurs de sélectionner différentes options, limitées par le nombre de cases que vous aurez créées. Les visiteurs peuvent alors cocher une, deux ou plusieurs cases ou même aucune. Freeway n'impose pas de limite sur le nombre d'options que vous pouvez créer, ni sur le nombre que le visiteur peut cocher. Options de case à cocher Après avoir créé une case à cocher, vous pouvez régler ses caractéristiques en utilisant le panneau Contrôle de formulaire dans la palette Spécifications. Texte contient le texte de la case à cocher affiché dans Freeway et sur la page Web. Nom contient le nom identifiant la case à cocher. Par défaut, il est identique au Titre (dans le panneau Bloc de la palette Spécifications), mais vous pouvez saisir un autre nom. Il n'est pas affiché sur la page mais est envoyé lorsque le formulaire est soumis par le visiteur. 219 Formulaires Valeur il s'agit de la valeur envoyée au serveur afin d'indiquer l'état du contrôle. La valeur par défaut est vide, et cela est normal puisque par défaut "ON" sera envoyé au serveur. Mais vous pouvez souhaiter la modifier pour envoyer "Oui" si cela a plus de sens dans le contexte. Coché configure l'état initial de la case lorsque la page est affichée. Par défaut, les cases ne sont pas cochées. Dans l'exemple ci-dessus, le résultat du formulaire serait : boxcontact=ON Astuce : Si vous insérez une case à cocher (ou un bouton radio) en tant que bloc incrusté, vous pouvez saisir le texte et modifier son style vous-même. Bouton radio Les boutons radios sont utilisés pour permettre aux visiteurs de choisir une parmi plusieurs options mutuellement exclusives. Les boutons radios sont regroupés en groupe. Seul un des boutons du groupe peut être actif à un instant donné. Lorsqu'un nouveau bouton est cliqué, le bouton actif précédent est désactivé. Vous pouvez avoir plusieurs groupes de boutons radio sur une page. Tous les boutons d'un même groupe doivent avoir le même Nom (qui est différent pour chaque groupe). Options de bouton radio Vous pouvez régler les options d'un bouton radio en utilisant les panneaux Bloc et Contrôle de formulaire dans la palette Spécifications. Titre (panneau Bloc) Saisissez y un titre pour le bouton radio - il s'agit du texte affiché dans la page Web. Le titre par défaut est celui du bloc dans la page Freeway. Nom Cette option correspond au nom du groupe auquel appartient le bouton. Par défaut, ce nom est "Cluster1". Entrez un nouveau nom si vous souhaitez que le bouton appartienne à un autre groupe. Le nom sera envoyé au serveur. Valeur Il s'agit de l'information renvoyée au serveur si le bouton est actif au moment de l'envoi. Par défaut, elle est réglée sur la même valeur que le champ Titre, mais vous pouvez donner une autre valeur. 220 Coché Formulaires Correspond à l'état initial du bouton radio quand la page est affichée. Il ne peut y avoir qu'un seul bouton coché par groupe. Dans l'exemple ci-dessus, le résultat du formulaire serait : radio1= PERSO Bouton Il existe trois type de boutons : Soumettre, Initialiser ou Bouton.. Vous devez ajouter un bouton Soumettre à votre formulaire, pour que le visiteur puisse envoyer le formulaire complété au serveur. Il est possible de transformer n'importe quel élément graphique en bouton de soumission, avec l'option Envoi du panneau Export de la palette Spécifications . Le bouton Initialiser est optionnel. Il efface complètement le formulaire, ce qui est utile si le visiteur a commis plusieurs erreurs en complétant le formulaire ou s'il souhaite effacer le formulaire et revenir à son état initial. Un bouton de type Bouton n'est pas utilisé dans les formulaires conventionnels, mais peut servir à exécuter une commande JavaScript. Options de Bouton Vous pouvez régler les options de bouton avec le panneau Contrôle de formulaire de la palette Spécifications. Nom Il permet d'identifier le bouton dans les JavaScript et est aussi renvoyé avec le formulaire. Pour les formulaires normaux, vous n'avez pas besoin de changer sa valeur. Valeur Il s'agit du texte affiché sur le bouton dans Freeway et sur la page Web. Type Ces boutons radio vous permettent de régler le type du bouton : Soumettre, Initialiser ou Bouton, comme expliqué ci-dessus. 221 Formulaires Champ d'édition de texte Un champ texte est une zone d'une ligne de hauteur où un visiteur peut saisir du texte. Vous pouvez configurer le nombre de caractères que le champ acceptera ainsi que sa taille physique. Si le nombre de caractères est plus important que la taille du champ, le champ fera défiler son contenu au gré des mouvements du curseur. L'ensemble du texte apparaît sur une seule ligne, pour avoir des textes multi-lignes, utilisez un bloc Zone Texte. Options de champ d'édition Vous pouvez régler les options du champ d'édition en utilisant le panneau Contrôle de formulaire de la palette Spécifications. Nom il définit le champ texte. Il n'est pas affiché sur la page, mais est envoyé comme partie de la réponse lors de la soumission du formulaire. Le nom peut aussi être utilisé pour identifier le champ en JavaScript. Valeur Vous pouvez saisir la valeur par défaut que vous souhaitez, elle sera alors affichée dans le champ lorsque le formulaire sera visionné. Les visiteurs peuvent la laisser inchangée, la remplacer ou ajouter du texte. Longueur Max Vous pouvez empêcher les visiteurs de saisir plus de texte qu'il n'en faut, en configurant cette option. Taille Cette option règle la largeur du champ. L'exemple ci-dessus affichera une boîte de 22 caractères de large dans le navigateur. Mot de passe parfois, les formulaires sont utilisés comme contrôle d'accès à une partie de site et un mot de passe peut être demandé au visiteur. En choisissant cette option, le texte que saisira l'utilisateur sera masqué (remplacé par des ronds noirs), de sorte qu'il ne puisse pas être lu par une autre personne regardant l'écran. Le résultat de l'exemple ci-dessus devrait être : email = [email protected] 222 Formulaires Menu déroulant et liste de sélection Si un visiteur doit choisir une option dans une liste préétablie, il est souvent plus adapté de la présenter dans un formulaire contenant soit un menu déroulant, soit une liste de sélection. Ces contrôles sont très utiles si le nombre d'options est trop important pour afficher des cases à cocher ou des boutons radio. Utilisez un menu déroulant si le visiteur doit choisir une seule option (par exemple un pays), ou une liste de sélection si vous souhaitez que plus d'une option soient affichées en même temps, ou si le visiteur peut en choisir plusieurs à la fois. Si vous permettez une sélection multiple dans la liste, cochez la case Sélection Multiple dans le panneau Menu/Liste de formulaire. Pour sélectionner plusieurs options, le visiteur peut maintenir la touche Commande enfoncée (ou la touche Contrôle sur un PC sous Windows) tout en sélectionnant les options dans la liste. Il est conseillé d'indiquer au visiteur comment effectuer la sélection multiple si elle est disponible. Le nombre d'éléments affichés dans le menu ou la liste dépend de la hauteur du bloc contenant le contrôle. Si le bloc a une hauteur ne permettant d'afficher qu'une seule ligne, le contrôle s'affichera comme un menu déroulant. Vous pouvez entrer le nombre de lignes que vous souhaitez afficher dans le champ Taille du panneau Menu/Liste. Si le bloc a une hauteur permettant d'afficher plusieurs lignes, le contrôle sera affiché comme une liste de sélection. Options de menu/liste Nom Il identifie le contrôle. Il n'est pas affiché sur la page, mais renvoyé comme partie de la réponse lorsque le formulaire est soumis au serveur. Il peut aussi servir à identifier le contrôle en JavaScript. 223 Formulaires Sélection Multiple Taille Liste Choix/Valeur Activez cette option afin de permettre la sélection multiple. Désactivée, un seul choix est possible à la fois. Ce champ vous permet de saisir le nombre de lignes de texte qui peuvent être affichées. Cette liste vous permet de spécifier le options qui seront offertes aux visiteurs. Pour chacune d'elles, vous devez fournir un nom (Choix) qui sera affiché dans la liste et une valeur (Valeur) qui sera renvoyée au serveur lorsque le formulaire est soumis. Utilisez Ajouter pour créer une nouvelle paire Choix/Valeur, Editer ou doubleclic pour modifier une paire existante, Effacer pour supprimer la paire sélectionnée. Vous pouvez modifier l'ordre des options en sélectionnant une paire dans la liste et en utilisant les boutons Monter et Descendre. L'option active initialement est choisie en cochant l'option Sélection initiale dans le dialogue d'édition de la paire Choix/Valeur voulue. Une seule option peut être activée à la fois dans une liste (sauf si vous avez choisi la sélection multiple). Si vous aviez déjà choisi une option dans la liste et si vous activez une autre option, la première est alors désactivée. Le résultat de l'exemple ci-dessus devrait être : langage = f Zone de texte Vous pouvez créer des champs plus grand afin que les visiteurs puissent y saisir plus d'informations que dans un champ texte d'une ligne - ces champs s'appellent des Zones de texte. Dans un navigateur, ces zones ont des barres de défilement qui s'activent lorsque l'utilisateur ajoute plus de texte que le champ ne peut en afficher. 224 Formulaires Options de zone de texte Nom Il identifie le contrôle. Il n'est pas affiché sur la page, mais renvoyé au serveur lors de la soumission du formulaire. Il peut aussi servir à identifier le contrôle en JavaScript. Texte Ce champ vous permet de saisir le texte initialement affiché dans le contrôle et que les visiteurs peuvent modifier s'ils le souhaitent. Il est optionnel. Colonnes Ce champ vous permet de spécifier le nombre de caractères pouvant être affichés dans une ligne. Rangées Ce champ vous permet de spécifier le nombre de lignes de texte qui peuvent être affichées verticalement en même temps. Le contrôle devrait donner le résultat suivant : comments = Veuillez me faire parvenir les informations sur votre produit. Réglages du Formulaire Afin d'indiquer au navigateur ce qu'il doit faire du formulaire au moment de la soumission, vous devez saisir des informations dans le dialogue Réglages formulaire. Choisissez Réglages formulaire... dans le menu Page, pour la page contenant le formulaire. Options du dialogue Réglages formulaire Note : Cette section se réfère à l'exemple présenté page suivante. <FORM METHOD=POST ACTION="/cgi-bin/FormMail.pl"> 225 Formulaires Mode Vous pouvez choisir deux méthodes pour envoyer au serveur les données du formulaire, POST et GET. À moins que l'on vous demande le contraire, vous devriez toujours laisser l'option par défaut, POST. Celle-ci envoie les données au serveur sous la forme d'un flot de données alors que GET l'envoie comme partie de l'URL. Action Vous y spécifiez l'emplacement du script ou du programme qui traitera l'information. Notez que cet emplacement peut être sur n'importe quel serveur dans le monde, et ne doit pas forcément pointer sur le serveur hébergeant votre site. Normalement l'action est exprimée sous la forme d'une URL. Ne la saisissez pas entre guillemets dans le dialogue Réglages formulaire. Vous pouvez tester votre formulaire en le faisant pointer vers une des URL suivantes - Ce service est gratuit par le NCSA (National Center for Supercomputing Applications), et renverra une page au navigateur montrant les informations qui lui ont été envoyées. Vous ne pouvez pas utiliser ce service avec un formulaire que vous publierez sur le Web, car c'est le visiteur qui recevra le résultat, pas vous ! Utilisez-le uniquement pour tester les formulaires pendant leur élaboration, et n'en abusez pas car il est gratuit. Pour tester les formulaires avec le protocole POST : http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query Pour tester les formulaires avec le protocole GET : http://hoohoo.ncsa.uiuc.edu/cgi-bin/query Codage Si vous souhaitez soumettre les informations de votre formulaire dans une autre langue, vous pouvez spécifier le type d'encodage. Vous n'avez normalement pas besoin de saisir d'information dans ce champ. Champs cachés Beaucoup de programmes ou de scripts de traitement requièrent des informations supplémentaires (paramètres) devant être retounées avec le contenu du formulaire. Par exemple, un programme qui redirige le formulaire vers une adresse email doit être informé de l'adresse à utiliser et du sujet du message. Pour plus d'information sur les champs cachés reportez-vous à Champs cachés. Configurer vos scripts de formulaire Lorsque vous demandez à votre fournisseur d'accès des informations sur les formulaires, il peut vous donner des instructions au format HTML. Il peut être un peu difficile de saisir ces informations dans Freeway par le biais du 226 Formulaires dialogue Réglages formulaire. Le fournisseur d'accès peut vous donner un script comme dans l'exemple ci-dessous : Exemple de code de configuration de formulaire : <FORM METHOD=POST ACTION="/cgi-bin/FormMail.pl"> <INPUT TYPE=HIDDEN NAME="recipient" VALUE="[email protected]"> <INPUT TYPE=HIDDEN NAME="subject" VALUE="The email subject"> <INPUT TYPE=HIDDEN NAME="redirect" VALUE="http://www.domain.com/thankspage.html"> <INPUT TYPE=TEXT NAME="email"> </FORM> Cela peut paraître déconcertant, mais intégrer ces informations dans Freeway est simple. Copiez le script (il vous sera envoyé par email ou sera disponible sur une page Web du site du fournisseur) dans le presse-papier à l'aide de la commande Copier du menu Edition du programme que vous utilisez. Placezvous sur la page Freeway contenant le formulaire et choisissez Coller spécial depuis le menu Edition. Maintenant, vérifiez que les informations apparaissent dans le dialogue Réglages formulaire. Autrement, vous pouvez saisir ces informations vous-même. La première ligne d'informations qui commence par "<FORM" et finit par ">" doit être mise dans le dialogue Réglages formulaire. "METHOD=POST" signifie que vous devez sélectionner "POST" dans le menu déroulant Mode. C'est le réglage le plus commun. Le texte entre guillemet après "ACTION=" doit être placé dans le champ Action. Il s'agit du lien qui traitera le formulaire sur le serveur. Ne copiez pas les guillemets puisque Freeway les placera pour vous. Toute balise commençant avec "<INPUT" et contenant "TYPE=HIDDEN" doit être ajoutée comme Champ caché dans le dialogue Réglages formulaire. Ils sont invisibles pour le visiteur, mais sont transmis avec le formulaire. Vous pouvez souvent ajouter des champs cachés de votre cru afin de retourner des informations supplémentaires (par exemple pour savoir quelle page de votre site a envoyé le formulaire). Dans l'exemple, nous avons trois champs cachés. Chacun a un nom et une valeur. Le nom est entre guillemets après le texte "NAME=" et la valeur est entre guillemets après "VALUE=". Dans chaque cas, cliquez sur le bouton Ajouter du dialogue Réglages formulaire. Le texte après "NAME=" va dans le champ Nom et le texte après "VALUE=" va dans le champ Valeur. Vous ne devez pas ajouter les guillemets car Freeway le fait pour vous. Parfois, le script requiert des champs obligatoires. Il s'agit souvent de l'adresse email du visiteur. Vous pouvez les ajouter dans vos formulaires et vous devez vous assurer que le champ Nom est configuré correctement. L'élément dans 227 Formulaires l'exemple ci-dessus (INPUT TYPE=TEXT NAME="email") devrait créer un contrôle Champ d'édition sur la page et configurer le nom dans le panneau Champ d'édition de la palette Spécifications avec la valeur "email". Champs cachés Voici quelques champs cachés, qui peuvent être utilisés dans votre formulaire. Note : Cette section se réfère aux instructions de l'exemple exposé page précédente. recipient indique où vous voulez que l'email soit envoyé. La valeur est une adresse email. Il peut être appelé send to dans certains formulaires. subject indique le sujet du message que vous recevrez. La valeur peut être quelque chose comme "Résultat de formulaire du site Web" (sans les guillemets) ou ce que vous voulez. redirect indique la page où doit être envoyé le visiteur après avoir rempli le formulaire (par exemple une page de remerciements : "Merci d'avoir complété les informations..."). La valeur doit être une URL complète de la page (par exemple http://www.votredomaine.com/merci.html). Vous devez créer cette page dans le site Web et vous assurez qu'elle est disponible sur le site. Si vous n'ajouter pas le champ redirect, un message par défaut apparaîtra à la place lorsque le visiteur soumettra le formulaire. Il peut être appelé resulturl dans certains formulaires. Champs cachés moins communs : required c'est une liste des champs obligatoires que le visiteur doit compléter (les entrées de la liste sont séparées par des virgules). La valeur pourrait être par exemple : email, nom, adresse1, adresse2 et ainsi de suite (il est conseillé de la limiter à ce qui est vraiment requis, et d'indiquer par un "*" sur le formulaire les champs obligatoires). sort détermine comment les champs seront triés dans l'email. La valeur peut être soit alphabétique, soit un ordre : nom1, nom2, nom3. Vous trouverez les détails spécifiques du formulaire auprès de votre fournisseur d'accès. Validation du formulaire Il est souvent conseillé d'avoir une vérification automatique du contenu du formulaire avant la soumission au serveur ou l'envoi par email. Par exemple, si vous avez besoin de renvoyer des informations à la personne par le courrier normal, vous voudrez sans doute que tous les champs de l'adresse soient remplis. Le script peut avoir une vérification intégrée, mais vous pouvez aussi 228 Formulaires ajouter un JavaScript additionnel pour vérifier les champs du formulaire. Nous avons un ensemble d'Actions Freeway appelées "Validate Form Suit" qui le feront pour vous, sur la page Web des Actions Freeway "http://www.softpress.com/actions". Sécurité du formulaire Si votre formulaire envoie des informations sur les cartes de crédit ou sur des informations confidentielles, vous devriez être sûr qu'elles sont transmises en toute sécurité et ne peuvent pas être interceptées par des hackers. Le meilleur moyen de le faire est de faire soumettre le formulaire par le biais d'un serveur sécurisé. Lorsque vous utilisez un tel serveur, le navigateur crypte les informations avant la transmission sur le Web. Votre fournisseur devrait être capable de fournir un serveur sécurisé pour traiter vos formulaires - il peut aussi faire payer cette prestation. Si vous faites de la vente en ligne, vous vous apercevrez peut-être que les consommateurs n'osent pas acheter vos produits si les informations concernant leur carte de crédit ne sont pas sécurisées. Une autre option est de rappeler le client pour lui demander ces informations. Vous pouvez passer des accords avec une société de facturation sur Internet afin de vous affranchir des transactions financières - une tierce partie traitera les transactions par carte de crédit et créditera votre compte. Cependant, cela peut impliquer un surcoût substantiel. Où trouver des informations sur les formulaires Vous trouverez souvent ces informations sur le site Web de votre hébergeur (recherchez dans la section support les informations relatives aux formulaires, aux CGI ou aux scripts). Ou appelez-le pour obtenir ces informations. S'il n'a pas de service de traitement des formulaires, demandez lui si vous pouvez installer le votre. Problèmes avec les formulaires Voici quelques réponses aux problèmes courants rencontrés lors de la conception de formulaires : 1 Une erreur de serveur ou de navigateur est déclenchée lors de la soumission du formulaire. Assurez-vous que vous êtes en ligne lorsque vous testez le formulaire. De plus, assurez-vous que le site a été transféré sur le bon serveur Web. Certains scripts ne peuvent être appelés que depuis une page située sur le même serveur, de sorte qu'un script fonctionnant correctement sur un de vos sites Web ne fonctionnera plus si vous l'essayez sur un autre serveur. Vérifiez le champ Action pour être sûr qu'il est correctement saisi. 2 De mauvais caractères sont affichés en haut de la page (par exemple, "<") et le formulaire ne fonctionne pas du tout. Cela arrive lorsque vous n'avez pas saisi les bonnes informations dans le dialogue Réglages formulaires - par exemple, si vous avez placé des Formulaires 229 guillemets additionnels autour des éléments, ou si vous avez placé la totalité de la ligne "<form action=..." dans le champ action, plutôt que l'URL. 3 L'email me revient, mais des informations manquent Avant tout, vérifiez que vous avez saisi les champs Nom de tous les contrôles du formulaire. Si l'un d'eux n'a pas de nom, aucune information n'est renvoyée. De plus, certains formulaires ne retourneront que certaines informations, donc vérifiez les instructions. Par exemple, certains scripts peuvent n'autoriser le retour que d'un seul champ et vous devez permettre à l'utilisateur de saisir les informations dans un seul champ. 4 L'email revient, mais les champs ne sont pas triés. Certains scripts trient les informations de façon alphabétique ou simplement dans l'ordre de réception. Parfois, vous pouvez ajouter un champ caché pour spécifier l'ordre de tri des champs mais souvent il faudra faire avec. 5 le formulaire fonctionne bien, mais le visiteur n'est pas redirigé vers ma page de remerciement. Certains scripts ne permettent pas la redirection du visiteur. D'autres problèmes pourraient être : Le formulaire requiert une adresse URL complète et vous avez saisi un lien relatif; vous avez placé des guillemets autour de l'URL; la page n'existe pas; ou vous avez saisi un nom incorrect pour le champ caché Redirection. 6 J'utilise des boutons radio, mais ils ne fonctionnent pas correctement lorsque je sélectionne une option, les autres ne sont pas désactivées. Assurez-vous que les boutons radio qui sont regroupés ont le même Nom. Assurez-vous que chaque groupe a son propre Nom. 7 Les informations me reviennent, mais il est difficile de reconnaître les champs Assurez-vous que vous avez donné à chaque contrôle un nom judicieux dans le panneau Bloc de la palette Spécifications - les noms par défaut ne sont pas forcément les plus pratiques. Si vous pensez que vous avez correctement tout rempli mais que le formulaire ne fonctionne pas, contactez votre hébergeur. Cependant, si vous souhaitez lui fournir le code de la page, activez l'option Plus lisible dans le panneau Sortie des Préférences. 230 Effets spéciaux de Texte Effets spéciaux de Texte Freeway offre deux effets spéciaux sur le texte que vous trouverez sans doute utiles. Cette section explique comment et où les utiliser. Texte transparent Freeway a une couleur spéciale, Transparent, dans la palette Couleurs, qui n'est applicable qu'au texte d'un bloc Graphique. Avec cette couleur, un morceau de texte devient transparent. Dans cet état, il créera un trou ou un découpage dans le fond du bloc contenant le texte. Les images ou à tout autre objet placé derrière le bloc est visible à travers ce contour. Si le bloc contenant le texte n'a pas de couleur de remplissage, le texte semblera simplement disparaître, mais en changeant la couleur de fond du bloc, il réapparaîtra. Pour appliquer cet effet, donnez une couleur de fond au bloc, puis : 1 Sélectionnez le texte. 2 Dans la palette Couleurs, sélectionnez Texte dans le menu Appliquer à. 3 Cliquez sur Transparent dans la palette Couleurs. Couleur de premier plan La couleur de premier plan est un effet qui vous permet de superposer une couleur sur une portion de texte. Pour le faire, vous avez besoin d'un bloc Graphique contenant du texte et, devant lui, un bloc Graphique ayant une couleur de premier plan. 1 Créez un bloc Graphique et saisissez du texte comme vous le souhaitez. 2 Placez un bloc Graphique devant le premier bloc Graphique. Pour le bloc de premier plan, choisissez Premier Plan dans le menu Appliquer à de la palette Couleurs. Choisissez ensuite une couleur. À l’endroit ou les deux blocs se chevauchent, le texte du bloc d'arrière plan prendra la couleur de premier plan de l'image le recouvrant. Effets spéciaux de Texte 231 232 Actions Actions Qu'est-ce que les Actions Freeway ? Freeway est fourni avec un certain nombre d'actions que vous pouvez utiliser pour ajouter des fonctionnalités et des actions dynamiques sur votre site web. Les actions peuvent être comparées à des plug-in, qui vous permettent de créer des effets qui demanderaient une programmation lourde dans d’autres logiciels. En plus des actions par défaut, il existe des packs «FAST packs» qui permettent d'ajouter des fonctionnalités spécifiques. Veuillez consulter notre site web (http://www.tri-edre.com/) pour plus de détails. Types d'Actions Il y a trois types d'Actions Freeway : • Les Actions de bloc -elles sont appliquées sur des blocs existant dans votre page. Par exemple, un Rollover remplace une image par une autre lorsque la souris passe dessus. • Les blocs d'Action autonomes -comme les autres blocs dans Freeway, ils sont créés sur la page, ou insérés à l'aide du menu Insertion. Par exemple, un menu avec une liste de pays qui pourra être ajouté dans un formulaire. • Les Actions de page -elles s'appliquent à la page elle-même. Par exemple, une musique (Background sound) jouée lorsque la page est chargée ou une redirection (Timed redirect) qui envoie automatiquement le visiteur vers une autre page après un certain temps. Les Actions peuvent être utilisées pour gérer une connexion à une base de données, une animation DHTML, des bandeaux publicitaires, des compteurs, etc... Quelques Actions sont fournies avec Freeway et d'autres sont disponibles gratuitement sur le site web de SoftPress. Vous pouvez les déposer directement dans le dossier "Freeway Actions" dans le dossier de Freeway. Vous pouvez les utiliser immédiatement, vous n'avez pas besoin de quitter Freeway pour l'ouvrir à nouveau avant d'utiliser les nouvelles Actions. Comment utiliser une Action Lorsque quelqu'un crée une nouvelle Action, son auteur indique de quelle sorte d'Action il s'agit, cela détermine comment l'Action pourra être utilisée dans Freeway. Les Actions apparaissent à différents endroits dans l'interface de Freeway, en fonction de leur type : • Les Actions de bloc sont appliquées à un bloc en utilisant le sous-menu Actions du menu Bloc. Actions 233 • Les blocs d'Action autonomes sont créés en utilisant le menu Actions de la palette Outils pour les dessiner sur la page, ou en les ajoutant sur la page en utilisant le sous-menu Bloc Action du menu Insérer. • Les Actions de Page sont appliquées à une page en utilisant le sous-menu Actions du menu Page. Les Actions de bloc et les Actions de page peuvent également être appliquées en cliquant sur le bouton Ajouter Actions dans la palette Actions. Si la palette Actions n'est pas visible, vous pouvez l'afficher en sélectionnant Actions dans le menu Fenêtre. Les options d'une Action peuvent être modifiées dans la palette Actions. Elle affiche les options pour le bloc actuellement sélectionné, s'il possède une Action, ou pour la page si aucun bloc n'est sélectionné et si la page possède une Action. La palette Actions possède deux modes d'affichage : le mode Paramètres et le mode Paramètres graphiques. Le mode Paramètres affiche le maximum d'options. Le mode Paramètres graphiques n'est utilisé que pour les Actions de bloc et il est décrit plus en détail dans l'exemple du Rollover ci-dessous. Les deux petits boutons en haut de la palette Actions permettent de passer d'un mode d'affichage à l'autre. Certains paramètres pour certaines Actions peuvent être requis. Si vous publiez ou prévisualisez le document sans choisir un paramètre requis, un message d'alerte sera affiché. 234 Actions Appliquer une Action à un bloc (Actions de bloc)) L'utilisation la plus habituelle des Actions dans Freeway consiste probablement à créer un effet de Rollover (qui substitue une image avec une autre lorsque la souris passe dessus dans le navigateur). Nous allons le prendre comme exemple ici (voir Rollover (Action Déclencheur) qui indique en détail comment appliquer une Action à un bloc existant). Vous devez tout d'abord créer le bloc Graphique sur lequel vous allez travailler (celui qui sera remplacé par un autre bloc lorsque la souris passera dessus). Utilisez l'un des trois outils de création de bloc Graphique (blocs qui s'affichent avec un contour gris dans Freeway) pour dessiner un bloc Graphique et importez une image dedans. Après avoir créé ce bloc, vous devez lui appliquer l'Action souhaitée. Sélectionnez le bloc en cliquant dessus en maintenant la touche Commande enfoncée, puis appliquez l'Action en utilisant l'une des méthodes suivantes : • Dans le sous-menu Actions du menu Bloc, sélectionnez Rollover. • Ou cliquez sur le bouton Ajouter Action dans l'angle inférieur gauche de la palette Actions puis sélectionnez Rollover dans le dialogue qui s'affiche. Le mot "Rollover" apparaît en texte jaune sur le bloc (si l'option Contours est cochée dans le menu Affichage). Maintenant, vous devez définir l'image qui remplacera l'image normale lorsque la souris passe dessus (état "MouseOver"). Lorsque le bloc est sélectionné, la palette Actions affiche le panneau "Rollover". Changez le mode d'affichage dans la palette Actions (affichage Paramètres graphiques) pour choisir l'image souhaitée pour l'état "MouseOver" et pour modifier les autres options (voir Rollover (Action Déclencheur)). Actions 235 Dans certains cas, vous pouvez appliquer plusieurs Actions à un bloc. Les Actions appliquées au bloc sont indiquées par le texte en jaune et gris dans le coin supérieur gauche du bloc, ainsi que par une marque dans le sous-menu Actions du menu Bloc. Vous pouvez supprimer une Action qui a été appliquée à un bloc en sélectionnant le bloc puis en choisissant à nouveau cette Action dans le sousmenu Action du menu Bloc pour la décocher, ou en cliquant sur l'icône Supprimer Action (l'icône de la Corbeille) dans l'angle inférieur gauche de la palette Actions. Créer un bloc Action (bloc d'Action autonome)) Certaines Actions sont des éléments individuels et autonomes, tels qu'un menu contenant une liste de pays sélectionnables par l'utilisateur ou une horloge. La création de tels blocs est différente de l'application d'une Action à un bloc (tel qu'un Rollover) car vous créez une Action en tant qu'entité individuelle. Beaucoup de personnes utilisent les blocs d'Action autonomes pour afficher la date du jour. Voici comment créer un tel bloc : 1 Dans le sous-menu Bloc Action du menu Insertion (ou dans le menu Actions de la palette Outils), sélectionnez "Current date". Le curseur sera transformé en croix. Dessinez le bloc où vous souhaitez qu'il apparaisse sur le page. 236 2 Actions La palette Action affiche le panneau Current date. Vous pouvez choisir d'afficher le jour de la semaine en plus de la date. C'est le seul paramètre pour cette Action. Lorsque la page sera affichée dans un navigateur, la date apparaîtra là où vous avez placé le bloc sur la page. Les blocs d'Action sont affichés avec un contour bleu. Ils possèdent une étiquette jaune et grise dans leur coin supérieur gauche (qui indique leur nom) ainsi que le logo Freeway dans le coin supérieur droit (qui indique qu'il s'agit d'un bloc d'Action autonome). Les blocs d'Action autonomes peuvent aussi être créés en tant qu'éléments incrustés. Pour incruster un bloc d'Action dans un texte, cliquez sur le texte afin que le curseur clignote puis utilisez le sous-menu Bloc Action du menu Insertion pour sélectionner l'Action souhaitée. Note : vous ne pouvez pas appliquer une Action à un bloc d'Action autonome. Appliquer une Action à une page (Actions de page)) Les Actions de page ne s'appliquent pas à des blocs spécifiques mais à la page en général. La plupart d'entre eux sont utilisés lors du chargement de la page. Par exemple, une musique (Background sound). Pour ajouter une Action à une page, cliquez sur une partie vide de la fenêtre ou de la table de montage pour être sûr qu'aucun bloc n'est sélectionné. Puis : 1 Dans le sous-menu Actions du menu Page, sélectionnez "Background sound". 2 Ou cliquez sur le bouton Ajouter Action dans l'angle inférieur gauche de la palette Actions puis sélectionnez "Background sound" dans le dialogue qui s'affiche. La palette Actions affiche le panneau "Background sound". Sélectionnez un fichier son avec le menu Sound file puis cochez éventuellement Loop pour répéter la musique en boucle. 237 Actions Quelques son sont présents sur le CD de Freeway. Vous pouvez les utiliser pour faire des tests, mais sachez que les fichiers sons sont de taille importante, et sont donc très longs à télécharger. Vous pouvez appliquer plusieurs Actions à une page. Les Actions appliquées à la page sont indiquées par le texte en jaune et gris dans le coin supérieur gauche de la page, ainsi que par une marque dans le sous-menu Action du menu Page. Vous pouvez supprimer une Action qui a été appliquée à la page en choisissant à nouveau cette Action dans le sous-menu Action du menu Page pour la décocher, ou en cliquant sur l'icône Supprimer Action (l'icône de la Corbeille) dans l'angle inférieur gauche de la palette Actions. Lorsqu'une Action est appliquée à une page, un nouveau panneau d'Action est affiché dans la palette Actions. Ce panneau contient les options correspondant à cette Action. Ce panneau est visible lorsque aucun bloc n'est sélectionné dans la page. Comment utiliser les Actions Déclencheur et Esclave Des Actions sont fournies en standard avec Freeway. Nous allons commencer par vous présenter deux types importants d'Actions qui travaillent ensemble : les déclencheurs (triggers) et les esclaves (slaves), à l'aide des exemples du "Rollover" (un déclencheur) et du "Slave Image" (un esclave) Rollover (Action Déclencheur) Qu'est-ce qu'un Rollover ? Un Rollover est une image qui se modifie lorsque la souris passe dessus dans le navigateur. Les Rollovers peuvent beaucoup améliorer l'apparence et l'impact des pages web, par exemple pour mettre en valeur les liens. L'Action "Rollover" vous permet de créer et de gérer un Rollover sur n'importe quel bloc Graphique dans une page Freeway. L'Action Rollover est aussi capable de déclencher des esclaves qui vous permettent de modifier d'autres images ou calques, ou même des pages lorsque la souris passe sur le Rollover dans le navigateur. Mots clés : Bloc Rollover Image "Normal" Le bloc qui est doté du Rollover. Lorsque la souris passera sur ce bloc, il changera. L'image qui apparaît lorsque la page est chargée. Cette image sera remplacée par une autre lorsque la souris passera dessus. 238 Actions Image "MouseOver" L'image qui apparaîtra lorsque l'utilisateur passera la souris sur le bloc qui possède le Rollover. Elle remplace l'image normale. Image "Click" L'image qui apparaîtra lorsque l'utilisateur cliquera sur le bloc qui possède le Rollover. Déclencheur Un bloc qui modifie un autre bloc sur la page, sur une autre page ou dans un cadre. Esclave Un bloc qui a reçu un message en provenance d'un déclencheur (tel qu'un Rollover). Ce concept sera présenté par la suite car de nombreuses Actions s'appliquent à des esclaves. Numéro d'esclave Pour indiquer quel esclave doit recevoir le message du déclencheur, vous devez l'identifier en donnant son numéro. Par exemple, si vous souhaitez qu'un bloc Rollover modifie plusieurs images sur la page, toutes ces images devront être dotées du même numéro (par exemple "MouseOver number 1"). Ainsi, un autre déclencheur située sur la même page pourra déclencher un autre groupe d'esclaves ("MouseOver number 2"). Groupe d'esclave Vous pouvez utiliser différents groupes d'esclaves (chacun peut contenir jusqu'à vingt numéros d'esclaves). Les groupes d'esclaves correspondent à des couleurs (indigo par défaut). A moins d'avoir plus de vingt effets sur une page ou deux groupes séparés d'effets (par exemple, deux groupes de Rollovers qui agissent indépendamment), vous n'aurez pas besoin d'utiliser plusieurs groupes. Créer une Action Rollover Il y a deux méthodes pour créer un Rollover dans Freeway. Pour la première méthode, un fichier image externe doit être sélectionné pour l'image MouseOver. Pour la seconde vous utilisez un autre bloc de la page en tant qu'image MouseOver. Chaque méthode possède ses propres avantages en fonction du type de Rollover que vous souhaitez créer. Utiliser un fichier image externe comme image "MouseOver" 1 Créez un bloc sur la page avec l'un des trois outils de création de bloc Graphique. 2 Importez une image en sélectionnant Importer dans le menu Fichier. Cette image sera l'image "normale". Note : vous n'avez pas forcément besoin d'importer une image dans le bloc. Vous pouvez simplement taper du texte ou remplir le bloc d'une couleur. 3 Sélectionnez le bloc. Actions 239 4 Appliquez une Action Rollover au bloc, soit en sélectionnant Rollover dans le sous-menu Actions du menu Bloc, soit en cliquant sur l'icône Ajouter Action dans la palette Actions puis sélectionnant Rollover dans le dialogue. 5 Dans la palette Actions, cliquez sur le bouton Paramètres pour modifier le mode d'affichage. 6 Choisissez Sélectionner... dans le menu MouseOver pour choisir l'image "MouseOver". Sélectionnez l'image dans le dialogue d'ouverture. Cette image doit être dans un format prêt pour le web, c’est-à-dire GIF ou JPEG. Pour transformer ce bloc Rollover en lien, sélectionnez le bloc et attachez-lui un lien (consultez Créer des liens Hypertexte dans Freeway). Afin de voir l'effet produit par le Rollover, vous devez prévisualiser la page dans un navigateur. Lorsqu'elle est affichée dans le navigateur, si l'image n'apparaît pas, vous devrez rafraîchir la page en tapant Commande R. Chaque fois que vous modifiez le Rollover et que vous prévisualisez la page dans le navigateur, si l'image n'est pas mise à jour, vous devrez placer le curseur audessus du Rollover et taper Commande R. Note : le fichier image sélectionné pour l'image "MouseOver" sera mis à l'échelle pour correspondre aux dimensions du bloc Rollover. Pour de meilleurs résultats, vérifiez que l'image que vous utilisez est exactement de la même taille que le bloc Rollover, sinon elle apparaîtra déformée ou mal alignée dans le navigateur. Astuce : pour être sûr que le bloc Rollover est exactement de la taille de l'image "MouseOver", importez temporairement l'image "MouseOver" dans le bloc, puis sélectionnez Ajuster la taille du bloc à l'image dans le sous-menu Image du menu Bloc (Commande Majuscule D). Ensuite, une fois que le bloc est de la bonne taille, vous pouvez retirer l'image (Commande B) et importer n'importe quelle autre image. Utiliser un bloc de la page en tant qu'image "MouseOver" Cette méthode vous permet de créer un Rollover avec des images qui se trouvent déjà dans la page Freeway. Alors que la méthode précédente nécessite que vous sélectionniez une image prête pour le web, celle-ci utilise 240 Actions n'importe quel type d'image ou de bloc Graphique créé à partir de texte graphique, ou de formes dessinées avec les outils de dessin de Freeway. 1 Créez un bloc sur la page avec l'un des trois outils de création de bloc Graphique. 2 Importez une image avec la commande Importer du menu Fichier. Cette image sera l'image "normale". Note : vous n'avez pas forcément besoin d'importer une image dans le bloc. Vous pouvez simplement taper du texte ou remplir le bloc d'une couleur. 3 Faites une copie de ce bloc :sélectionnez ce bloc, glissez-le, enfoncez la touche Option et relâchez le bouton de la souris (ou faites Dupliquer... avec le menu Bloc). 4 Sélectionnez le bloc créé puis importez une image, ce sera l'image "MouseOver". Note : si vous souhaitez taper du texte dans le nouveau bloc créé, vous devrez effacer son image, ce qui peut-être fait en sélectionnant le bloc puis en tapant Commande B. 5 Sélectionnez les deux blocs puis sélectionnez Aligner dans le menu Bloc pour les placer l'un au-dessus de l'autre. 6 Cliquez sur le premier bloc en maintenant la touche Commande enfoncée pour appliquer l'Action Rollover. 7 Dans la palette Actions, cliquez sur le bouton Ajouter Action. 8 Dans le dialogue, sélectionnez "Rollover". 9 Le panneau "Rollover" apparaît dans la palette Actions. Vérifiez que le mode d'affichage Paramètres graphiques a été sélectionné et que le panneau ressemble à cela : 10 Pour indiquer l'image "MouseOver", vous devez d'abord définir la source de cette image. Par défaut la colonne "MouseOver" est grisée pour indiquer qu'elle est désactivée, c’est-à-dire qu'aucune image "MouseOver" n'a été sélectionnée. Actions 241 11 Les deux blocs possèdent une coche dans la colonne "Normal". Choisissez les images "Normal" et "MouseOver" en cliquant dans leurs colonnes respectives. Astuce : certaines touches permettent d'utiliser d'autres fonctions dans le mode d'affichage Paramètres graphiques : • En cliquant sur une coche avec la touche Control enfoncée, tous les blocs de cette colonne seront désactivés. • En cliquant sur une coche avec la touche Option enfoncée, le bloc sera désactivé pour tous les états. • En cliquant dans la zone de coche avec la touche Option enfoncée, le curseur sera transformé en main pour vous déplacer parmi une longue liste de blocs. • En cliquant sur un titre de colonne avec la touche Option enfoncée, la colonne sera activée/désactivée. 12 Pour transformer le bloc Rollover en lien, sélectionnez-le puis attribuez-lui un lien (consultez Créer des liens Hypertexte dans Freeway). Afin de voir l'effet du rollover, vous devez prévisualiser la page dans le navigateur. Astuce : voici une autre méthode pour créer un Rollover à l'aide du mode d'affichage Paramètres graphiques dans la palette Actions : 1 Créez un bloc. 2 Dupliquez le bloc en sélectionnant Dupliquer... dans le menu Bloc. Réglez le décalage sur 0. 3 Appliquez l'Action Rollover au bloc sélectionné. 4 Modifiez son état "Normal" (par exemple en important une image). 5 Dans la palette Actions, décochez le bloc dupliqué dans la colonne "Normal" puis sélectionnez-le dans la colonne "MouseOver". 6 Modifiez l'état "MouseOver" de ce bloc. Révéler des images L'une des utilisation des Rollovers consiste à révéler des images masquées lorsque la souris passe à un certain endroit de la page. Par exemple, lorsque la souris passe sur une certaine zone d'une carte, une image de vignoble peut apparaître, sur une autre zone une image de fleurs, etc. Pour cela, vous devez placer la carte puis suivre ces étapes : 1 Créez des blocs Graphiques vides sur l'image de la carte, dans les zones où vous souhaitez que les images cachées apparaissent quand on passe dessus. 242 Actions 2 Désactiver l'option Fusionner dans le panneau Exportation de la palette Spécifications pour chacun des blocs Graphiques puis appliquez une Action Rollover à chacun d'eux. 3 Importez les images que vous souhaitez faire apparaître dans chaque bloc. 4 Dans le mode d'affichage Paramètres graphiques, cochez pour chaque bloc les images masquées dans l'état "Normal" (en cliquant dans la colonne "Normal" pour retirer les coches correspondantes à ces blocs) mais affichés dans l'état "MouseOver". Note : dans la figure ci-dessus, l'image "carte" apparaît en italique car le Rollover a été appliqué à l'image "vigne" et ces images ont été réglées pour ne pas fusionner. L'image "carte" ne fait pas partie de l'effet Rollover, mais elle est affichée comme image de fond dans les deux états du Rollover. Image incrustée Pour placer un bloc Graphique derrière un Rollover afin que le Rollover apparaisse incrusté, créez un bloc puis décochez l'option Fusionner du panneau Exportation de la palette Spécifications. Ensuite, placez-le sur le Rollover et sélectionnez A l'arrière plan dans le menu Bloc. Note 1 : lorsqu'un bloc doté d'une Action est recouvert par un autre bloc qui provoque leur fusion, l'Action sera appliquée à l'image fusionnée entière. Si vous ne souhaitez pas que cela se produise, il faut désactiver l'option Fusionner du bloc ayant l'Action (dans le panneau Exportation de la palette Spécifications). Si un bloc est placé derrière un bloc doté d'un Action de telle sorte qu'ils soient fusionnés, l'Action ne fonctionnera plus. En effet, les Actions doivent toujours être appliqués aux blocs situés en dessous d'un groupe d'images fusionnées. Le texte décrivant l'Action dans l'angle supérieur gauche du bloc sera affichée en italique pour indiquer qu'elle ne fonctionnera pas. Note 2 : lorsque vous prévisualisez une page qui contient des Rollovers ou des images esclaves, vous constaterez peut-être que votre navigateur n'affiche pas la dernière version des pages. Pour rafraîchir l'image "MouseOver" dans le navigateur, placez le curseur au-dessus du bloc Rollover puis tapez Commande R. 243 Actions Options pour les Actions "Rollover" Le panneau Rollover a deux modes d'affichage : Paramètres et Paramètres graphiques. Le mode d'affichage "Paramètres" MouseOver C'est l'image qui apparaît lorsque le curseur de la souris est placé sur le bloc. Si vous n'indiquez pas d'image "MouseOver", le Rollover ne changera pas l'image lorsque le curseur passera dessus. Cependant, vous pourrez quand même l'utiliser pour déclencher un esclave (nous traiterons les esclaves plus loin). Options pour "MouseOver" : • Sans : Freeway ne publiera pas d'image "MouseOver". Il n'y aura pas de changement visible lorsque l'utilisateur passera la souris sur l'image dans le navigateur. • Blocs : indique que l'image "MouseOver" sera définie dans le mode d'affichage Paramètres graphiques (voir les pages suivantes). • Sélectionner : permet de sélectionner un fichier image externe pour l'utiliser en tant qu'image "MouseOver". Cette image peut être un fichier GIF ou JPEG. Cette image sera mise à l'échelle de l'image normale qu'elle remplacera, donc si vous ne souhaitez pas 244 Actions que la taille de cette image soit modifiée, vous devez vérifier qu'elle est exactement de la taille du bloc dans Freeway. Une différence de quelques pixels peut déformer votre image et ralentir son affichage dans le navigateur. Click Indique l'image qui sera affichée lorsque le visiteur clique sur le Rollover. Les choix sont les mêmes que pour l'état "MouseOver" (Sans, Blocs et Sélectionner). Restore Indique ce qui doit se produire lorsque la souris quitte le bloc Rollover. • Yes : le Rollover revient à son état normal lorsque la souris le quitte. • No : l'image "MouseOver" reste affichée lorsque la souris le quitte. • Sticky :l'image "MouseOver" reste affichée jusqu'à ce que la souris entre sur un autre Rollover appartenant au même groupe d'esclaves (exemple : créer un menu dans lequel vous souhaitez conserver le choix sélectionné jusqu'à ce que la souris passe sur un autre). Cette option affecte les esclaves déclenchés par le Rollover. Preload Détermine si l'image "MouseOver" doit être préchargée et placée dans le cache du navigateur. En choisissant No, cela empêchera l'image d'être préchargée. Bien que cela puisse être bénéfique lorsque de grandes images sont utilisées, cela provoquera un temps d'attente lorsque la souris passera sur l'image la première fois. En choisissant Yes, cela forcera le navigateur a charger les images "MouseOver" après avoir terminé le chargement de la page. Bien que cela permette d'avoir des Rollovers plus réactifs, cela augmente le temps de téléchargement. Yes est le réglage par défaut, car généralement il est préférable de précharger les images "MouseOver". Slave Group Cette option est liée à l'utilisation des Rollovers comme déclencheur d'esclaves. Elle définit le groupe d'esclaves auquel sont envoyées les commandes "MouseOver" et "Click". Le groupe par défaut est Indigo. MouseOver # Cette option est liée à l'utilisation des Rollovers comme déclencheur d'esclaves. Elle indique le numéro de l'esclave (dans le groupe défini par "Slave Group") qui sera déclenché lorsque l'utilisateur passera la souris sur le bloc Rollover. Grâce à cela, vous pouvez créer un 245 Actions bloc Rollover qui produit un effet sur d'autres blocs de la page, ou même sur d'autres pages. Le Rollover déclenchera tous les esclaves qui possèdent ce numéro (vous pouvez attribuer le même numéro à plusieurs esclaves pour les déclencher simultanément). Click # Indique le numéro de l'esclave qui sera déclenché lorsque l'utilisateur cliquera sur le bloc Rollover (voir "MouseOver #"). Le mode d'affichage "Paramètres graphiques" Le mode d'affichage Paramètres graphiques affiche les blocs liés à l'utilisation du Rollover que vous avez créé. Normal La colonne "Normal" indique les blocs affichés dans le navigateur lorsque la souris n'est pas sur le Rollover (image normale). MouseOver La colonne "MouseOver" indique les blocs qui sont affichés lorsque le curseur de la souris passe sur le Rollover dans le navigateur (image "MouseOver"). Il y a quatre options dans le menu "MouseOver" : Activer/Désactiver : détermine si Freeway publiera l'image "MouseOver". Aucun : active la fonction Rollover mais n'utilise aucun bloc "MouseOver". Tous : active et sélectionne tous les blocs. Sélectionner :permet de sélectionner un fichier image externe à utiliser en tant qu'image "MouseOver". Click Cette colonne indique les blocs qui apparaîtront lorsque le visiteur cliquera sur le Rollover. Ce sont les mêmes options que pour "MouseOver" ( Activer, Aucun, Tous et Sélectionner). Slave Image (Action Esclave) Il est important de bien comprendre le fonctionnement des esclaves pour comprendre comment les Actions Freeway fonctionnent. Dans le paragraphe précédent, nous avons vu qu'un Rollover peut remplacer sa propre image 246 Actions lorsque la souris passe dessus. Mais un Rollover peut aussi déclencher d'autres événements, par exemple remplacer des images placées ailleurs sur la page. Les blocs modifiés par les déclencheurs s'appellent des esclaves. Les esclaves attendent les ordres des déclencheurs. Un esclave peut être un bloc de la page, un nouveau cadre ou une nouvelle page. Le déclencheur qui s'adresse à lui peut être de n'importe quel type, par exemple un bloc Graphique, du texte ou un timer. Mots clés Vous devez comprendre les concepts de Rollovers et de déclencheurs, pour utiliser les esclaves efficacement. Il est conseillé de vous familiariser avec les paragraphes précédents de ce chapitre, et en particulier les mot clés des Rollover (Action Déclencheur). Voici deux nouveaux états liés aux esclaves : Etat "Normal" C'est l'état dans lequel se trouve l'esclave lorsqu'il n'est pas déclenché, c'est à dire lorsqu'il n'est pas modifié par un déclencheur tel qu'un Rollover ou un timer. Etat "Déclenché" C'est l'état dans lequel se trouve l'esclave lorsqu'il est déclenché. Utiliser des esclaves avec les Actions Freeway Les exemples suivants utilisent un Rollover pour déclencher une image esclave. Vous devez maîtriser les concepts et les techniques expliqués dans le paragraphe Rollover (Action Déclencheur). Pour utiliser un bloc esclave, vous devez d'abord créer un Rollover comme expliqué précédemment. Dans ces exemples, le bloc esclave sera déclenché lorsque le visiteur passera la souris sur le bloc Rollover. Il y a deux moyens pour créer un bloc esclave dans Freeway. Utiliser un fichier image externe pour l'état "Déclenché" 1 En utilisant l'un des trois outils de dessin, créez un bloc Graphique sur la page. 2 Modifiez son contenu en important une image, en utilisant une couleur de remplissage ou en entrant du texte. 3 Appliquez une action "Slave Image" à ce bloc soit en sélectionnant Slave Image dans le sous-menu Actions du menu Bloc, soit en cliquant sur l'icône Ajouter action dans la palette Actions puis en sélectionnant Slave Image dans le dialogue. 4 Dans la palette Action, activez le mode d'affichage Paramètres en cliquant sur le bouton en haut à gauche. 5 Choisissez Sélectionner... dans le menu "Image 1" de la palette pour sélectionner l'image esclave (c'est à dire celle qui remplacera l'image normale de ce bloc lorsque la souris passera sur le bloc Rollover). Sélectionnez une image dans le dialogue d'ouverture. Cette image doit être prête pour le web, c'est à dire au format GIF ou JPEG. Actions 247 6 Vérifiez que le menu Restore est réglé sur Yes. Ainsi, l'image normale du bloc esclave sera automatiquement réaffichée lorsque la souris quittera le bloc Rollover. 7 Maintenant, sélectionnez le bloc Rollover. Dans la palette Actions, activez le mode d'affichage Paramètres. Dans le menu MouseOver #, sélectionnez "1". Cela correspond à l'image esclave 1 qui a été sélectionnée précédemment. Notez que le bloc Rollover et que les blocs esclaves appartiennent au même groupe Indigo (option Chain name dans la palette). C'est le groupe par défaut. Prévisualisez la page dans un navigateur. Déplacez la souris sur le bloc Rollover, l'image du bloc esclave sera modifiée. Utiliser un bloc de la page pour l'état "Déclenché" Assurez-vous d'avoir déjà créé le bloc Rollover sur la page. 1 En utilisant l'un des trois outils de dessin, créez un bloc Graphique sur la page. 2 Modifiez son contenu en important une image ou en entrant du texte. 3 Faites une copie de ce bloc. 4 Sélectionnez le nouveau bloc créé puis importez dedans une image : ce sera l'image esclave (c’est-à-dire l'image qui remplacera l'image normale de ce bloc lorsque la souris passera sur le bloc Rollover). Note : pour entrer du texte dans le nouveau bloc, vous devez effacer son image en tapant Commande B. 5 Sélectionnez les deux blocs puis utilisez la commande Aligner du menu Bloc pour les placer l'un au-dessus de l'autre. 6 Cliquez sur un bloc en maintenant la touche Commande enfoncée pour le sélectionner et appliquez-lui l'action "Slave Image", soit en sélectionnant Slave Image dans le sous-menu Actions du menu Bloc, soit en cliquant sur 248 Actions l'icône Ajouter action dans la palette Actions puis en sélectionnant "Slave Image" dans le dialogue. 7 Le panneau Slave Image apparaît dans la palette Actions. Vérifiez que le mode d'affichage Paramètres graphiques est sélectionné (comme cidessous à gauche) : 8 Pour indiquer l'image esclave, vous devez définir la source de cette image. Par défaut la colonne Image 1 sera grisée pour indiquer qu'elle est désactivée, c’est-à-dire qu'aucune image esclave n'a été sélectionnée. 9 Les deux blocs possèdent une coche dans la colonne Normal. Pour désactiver l'image qui ne doit pas apparaître dans l'état normal, cliquez dans la colonne Normal pour la décocher. De la même manière, choisissez l'image appropriée dans la colonne Image 1. 10 Activez le mode d'affichage Paramètres en cliquant sur le bouton correspondant. 11 Vérifiez que le menu Restore est réglé sur Yes. Ainsi, l'image Normal du bloc esclave sera automatiquement réaffichée lorsque la souris quittera le bloc rollover. 12 Sélectionnez le bloc Rollover. Dans la palette Actions, activez le mode d'affichage Paramètres en cliquant sur le bouton correspondant. Dans le menu MouseOver #, sélectionnez "1". Cela correspond à l'image esclave 1 qui a été sélectionnée précédemment. Notez que le bloc Rollover et que les bloc esclaves appartiennent au même groupe Indigo (option Chain name dans la palette). C'est le groupe par défaut. 249 Actions Prévisualisez la page dans un navigateur. Déplacez la souris sur le bloc Rollover, l'image du bloc esclave sera modifiée. Utilisation de l'Action de bloc "Slave Image" Les menus MouseOver# et Click# de l'onglet Rollover de la palette Actions vous permettent de sélectionner un nombre entre 1 et 20. Chaque bloc esclave peut posséder jusqu'à vingt images esclaves différentes, chacune d'elle correspondant à un numéro. Cela vous permet de déclencher jusqu'à vingt effets différents sur un bloc esclave de la page. Vous pouvez, par exemple, créer différents blocs Rollovers sur la page (par exemple, des boutons de navigation) possédant chacun un numéro différent dans le menu MouseOver #. Ainsi chaque Rollover pourra faire afficher une image différente dans le même bloc esclave pour décrire la page qui sera chargée si l'utilisateur clique sur le bouton. Options pour les Actions "Slave Images" Le panneau Slave Images a les modes d'affichage Paramètres et Paramètres graphiques. Le mode d'affichage "Paramètres" Chain Name Cette option permet de choisir le groupe d'esclaves auquel ce bloc appartient. Dans chaque groupe, vous pouvez avoir au maximum vingt esclaves différents. Le groupe par défaut est Indigo. Restore Indique ce qui doit se produire lorsque la souris quitte le bloc qui déclenche cet esclave. Il y a deux options : Yes (le bloc esclave revient à son état normal) et No (l'image esclave reste affichée). Preload Détermine si les images esclaves doivent être préchargées et placées dans le cache du navigateur. En choisissant No, les images ne sont pas préchargées, alors que Yes forcera le 250 Actions navigateur a charger toutes les images esclaves après avoir terminé le chargement de la page. No est le réglage par défaut, car le préchargement de nombreuses images esclaves peut avoir un impact important sur le temps de chargement. Image 1...20 Permet de choisir l'image affichée lorsque le bloc est déclenché. Vous utilisez ce numéro pour l'option "MouseOver #" du rollover ou du bloc qui déclenchera cet esclave. Il y a trois options pour les menus «Images" : • Sans : Freeway ne publiera pas l'image esclave. Avec cette option, il n'y aura pas de changement visible lorsque cet esclave sera déclenché. • Bloc : indique que l'image esclave sera définie dans le mode d'affichage Paramètres graphiques (voir les pages suivantes). • Sélectionner : permet de sélectionner un fichier image externe pour l'utiliser en tant qu'image esclave. Cette image peut être un fichier GIF ou JPEG. Cette image sera mise à l'échelle de l'image normale qu'elle remplacera, donc si vous ne souhaitez pas que la taille de cette image soit modifiée, vous devez vérifier qu'elle est exactement de la taille du bloc dans Freeway. Une différence de quelques pixels peut déformer votre image et ralentir son affichage dans le navigateur. Le mode d'affichage "Paramètres graphiques" Le mode d'affichage Paramètres graphiques affiche les blocs liés à l'utilisation du bloc esclave que vous avez créé. Normal La colonne "Normal" indique l'image affichée lorsque le bloc n'est pas déclenché (image "Normale"). Image 1...20 Les colonnes "Image 1...20" indiquent les images qui remplaceront les images normales lorsque l'esclave sera 251 Actions déclenché par un autre bloc tel qu'un Rollover. Le bloc esclave peut répondre à vingt messages de déclenchement différents en affichant des images différentes : • Activer/Désactiver : détermine si Freeway publiera l'image esclave. • Aucun : active l'esclave, mais aucune image ne sera affichée. En conséquence, lorsque l'esclave sera déclenché, il disparaîtra complètement. • Tous : active et sélectionne tous les blocs. • Sélectionner : sélectionne un fichier image externe comme image esclave. Autres Actions "Déclencheur" et "Esclave" Les concepts de déclencheurs (triggers) et d'esclaves (slaves) ont été abordé dans les sections précédentes de ce chapitre. Dans cette section, nous examinerons d'autres Actions soit déclenchant des effets esclaves, soit étant déclenchées lorsque un message est envoyé par une Action telle qu'un Rollover. 1 Text Rollover • Action indépendante. • Déclencheur (Trigger). • Requiert JavaScript. Cette Action indépendante peut être utilisée pour déclencher des effets lorsque la souris passe au dessus d'un lien texte. L'Action Text Rollover peut être créée soit en cliquant sur le menu déroulant de création d'Action de la palette Outils et en sélectionnant Text Rollover ou en sélectionnant Text Rollover dans le sous-menu Bloc Action du menu Insertion. Si le Texte Rollover est inséré en tant que bloc incrusté dans un flot de texte, il prendra le style du texte l'entourant. Note : Afin de configurer un lien sur le bloc Text Rollover, sélectionnez le bloc et attachez lui un lien (voir Créer des liens Hypertexte dans Freeway). Si vous 252 Actions n'appliquez pas de lien, le Text Rollover peut toujours déclencher des éléments esclaves mais le fait de cliquer dessus n'engendrera aucun résultat. Vous pouvez modifier les options suivantes dans la palette Actions : Text Il s'agit du texte qui sera affiché dans le navigateur avec un lien. Tout effet esclave sera déclenché lorsque la souris passera sur ce lien. Slave Group désigne le groupe vers lequel le déclenchement est envoyé. Le réglage par défaut est Indigo. MouseOver # vous permet de spécifier quel bloc du groupe est déclenché. 2 Slave Show/Hide Image • Action de bloc. • Esclave. • Requiert JavaScript. Cette Action de bloc vous permet d'afficher ou de masquer une image en réponse à un déclencheur. Elle peut être initialement masquée puis affichée lors du déclenchement ou inversement. L'action Slave Show/Hide Image est appliquée à un bloc Graphique sélectionné sur la page. Pour l'appliquer, sélectionnez Slave Show/Hide Image dans le sous-menu Actions du menu Bloc ou cliquez sur le bouton Ajouter action en bas à gauche de la palette Actions et choisissez "Slave Show/Hide Image". Vous pouvez modifier les options suivantes dans la palette Actions : Initially Détermine si l'image est visible lorsque la page est affichée pour la première fois. L'image est visible par défaut. Restore Se réfère à ce qui se passe lorsque la souris sort du bloc Rollover ou de son déclencheur. Deux choix sont possibles : 253 Actions • Yes : le bloc retrouve son état initial lorsque la souris sort du bloc Rollover. • No : le bloc reste dans l'état déclenché lorsque la souris sort du bloc Rollover. Preload Définit si l'image est préchargée et placée dans le cache du navigateur. Cette option est inutile si l'image est initialement visible. No empêche le préchargement automatique. Yes est le réglage par défaut. Slave # Règle le numéro de déclencheur auquel est rattachée l'Action. Slave Group Règle le nom du groupe auquel appartient l'image esclave. Le réglage par défaut est Indigo. 3 Slave Show/Hide Layer • Action de bloc. • Esclave. • Requiert JavaScript • Ne peut être appliqué qu'a des claques. Freeway Express ne supporte pas cette option, ainsi que toutes les actions liées aux calques. Cette Action ne devrait être appliquée qu'à un bloc configuré pour être un calque. Les calques ne sont utilisés que si le niveau HTML de la page est HTML 4.0. Elle est similaire à l'Action "Slave Show/Hide Image", mais comme elle est appliquée à un bloc calque, elle peut être utilisée pour afficher ou cacher des blocs HTML ou des blocs Graphiques. Cette flexibilité signifie que vous pouvez créer des Rollovers plus intéressants. Par exemple, vous pourriez créer un menu déroulant en associant des blocs avec des liens dans un bloc calque. 254 Actions Pour appliquer cette Action au bloc calque choisi, sélectionnez Slave Show/Hide Layer dans le sous-menu Actions du menu Bloc ou cliquez sur le bouton Ajouter Action en bas à gauche de la palette Actions et choisissez "Slave Show/Hide Layer". Vous pouvez modifier les options suivantes dans la palette Actions : Initially Détermine si le calque est visible ou pas lorsque la page est chargé pour la première fois. Par défaut, le calque est visible. Restore Se réfère à ce qui se passe lorsque la souris sort du bloc Rollover ou d'un autre déclencheur de l'action. Deux choix sont possibles : • Yes (le bloc retrouve son état initial lorsque la souris sort du bloc), • No (le bloc reste dans son état déclenché lorsque la souris sort). Slave # Règle le numéro de déclencheur auquel est rattachée l'Action. Chain Name Règle le nom du groupe auquel appartient l'image esclave. Le réglage par défaut est Indigo. 4 Sequence Timer • Action de page. • Déclencheur. • Requiert JavaScript. Cette Action de page vous permet de contrôler des Actions esclaves. Elle peut déclencher jusqu'à vingt esclaves séquentiellement - c'est à dire qu'ils seront déclenchés les uns après les autres à l'intervalle de temps déterminé dans le champ Speed de l'Action. Après le dernier déclenchement, la séquence recommence depuis le début. L'action Sequence Timer peut être utilisée avec un certain nombre d'actions Show/Hide Image pour faire afficher des images séquentiellement à différents emplacements sur la page. Vous pouvez l'utiliser aussi avec une seule action Slave Image pour créer une animation simple avec un jeu d'images. Cependant, il est peut-être plus judicieux d'utiliser des GIF animés dans ce cas. Pour appliquer l'Action Sequence Timer à une page, assurez-vous que rien n'est sélectionné sur la page. Puis sélectionnez Sequence Timer depuis le sousmenu Actions du menu Page ou cliquez sur le bouton Ajouter Action en bas à gauche de la palette Actions et choisissez "Sequence Timer". Vous pouvez modifier les options suivantes dans la palette Actions : 255 Actions Speed Définit l'intervalle de temps entre chaque déclenchement dans la séquence (exprimé en millièmes de second). La valeur par défaut est 500, ce qui signifie que l'intervalle de temps est d'une demi seconde. Slave Group Règle le nom du groupe vers lequel sont envoyés les déclenchements. Le réglage par défaut est Indigo. Trigger 1...20 Chacun de ces menus déroulants correspondent à un numéro dans la chaîne d'esclaves. Sélectionner Yes dans un menu déroulant signifie que le déclenchement sera envoyé à cet esclave du groupe. 5 Random Sequence • Action de Page. • Déclencheur (Trigger) • Requiert JavaScript L'Action Random Sequence est identique à l'Action "Sequence Timer", excepté que les déclenchements sont envoyés dans un ordre aléatoire plutôt que dans un ordre prédéfini. 6 Blast Timer • Action de Page • Déclencheur (Trigger) • Requiert JavaScript. Cette Action de Page déclenche simultanément toutes les Actions esclaves d'un certain groupe de la page. Elle le fait à intervalles de temps réguliers, ce qui est utile pour déclencher simultanément un grand nombre d'Actions ayant des déclencheurs différents. 256 Actions Pour appliquer l'Action Blast Timer à une page, assurez-vous que rien n'est sélectionné sur la page. Puis sélectionnez Blast Timer dans le sous-menu Actions du menu Page ou cliquez sur le bouton Ajouter Action en bas à gauche de la palette Actions et choisissez Blast Timer. Vous pouvez modifier les options suivantes dans la palette Actions : Speed Définit l'intervalle de temps entre chaque déclenchement (en millièmes de seconde). La valeur par défaut est 500 millisecondes, ce qui signifie que l'intervalle de temps est d'une demi seconde. Slave Group Règle le nom du groupe rattaché à l'Action Blast Timer. Le réglage par défaut est Indigo. Trigger 1...20 Chacun de ces menus déroulants correspondent à un numéro d'esclave. Sélectionner Yes dans un menu déroulant signifie que le déclenchement sera envoyé à tous les esclaves ayant ce numéro. 7 Slave Load Frame • Action de Page. • Esclave. • Requiert JavaScript. L'Action Slave Load Frame est appliquée à une page contenant des cadres. Elle est conçue pour répondre à un déclenchement en chargeant une page dans un cadre. Elle peut être utilisée pour afficher des informations dans un petit cadre en bas de l'écran pour décrire chaque élément survolé par la souris. La capacité de charger une page entière dans un jeu de cadre en réponse à un Rollover ou à un autre déclencheur est un moyen facile de charger n'importe quel type de contenu - HTML, Image, multimedia. Cependant, vous devriez être sûr que toute page chargée par l'action Slave Load Frame sera rapidement téléchargée de manière à ce que la page réponde rapidement. Si vous déclenchez cette Action en utilisant Sequence Timer, assurez-vous que Actions 257 l'intervalle de temps est assez long pour permettre à chaque page de se télécharger et de s'afficher. Appliquer l'Action Slave Load Frame L'action Slave Load Frame devrait être appliquée à la page contenant les cadres elle-même et non pas à une des pages contenues. Le moyen le plus facile de sélectionner la page est d'utiliser la palette Cadres. Si cette palette n'est pas affichée, sélectionnez Cadres dans le menu Fenêtre. Pour sélectionner le jeu de cadre, cliquez sur la bordure externe dans la palette Cadres comme indiqué dans l'illustration ci-dessous. Lorsque vous avez correctement sélectionné le jeu de cadre, appliquez l'Action Slave Load Frame en choisissant Slave Load Frame depuis le sousmenu Actions du menu Page ou Cliquez sur le bouton Ajouter Action en bas à gauche de la palette Actions et choisissez Slave Load Frame. Note 1 : Comme vous appliquez l'action au jeu de cadres, la boîte grise avec le texte jaune qui affiche normalement le nom de l'action en haut de la page n'apparaîtra pas. Note 2 : Le panneau "Slave Load Frame" n'apparaîtra dans la palette Action que lorsque le jeu de cadre sera sélectionné comme expliqué ci-dessus. Vous pouvez modifier les options suivantes dans la palette Actions : 258 Actions Frame Nom du cadre dans lequel sera chargée la page (cible). Si le nom de cadre n'existe pas dans le jeu, l'Action ne fera rien. Slave Group Définit le nom du groupe auquel l'action répond. Le réglage par défaut est Indigo. Source 1...20 Chaque menu déroulant peut être utilisé pour sélectionner une page à charger dans le cadre en réponse à un déclencheur spécifique. Si une page est sélectionnée dans un menu Source, l'esclave la chargera dans le cadre nommé lorsque le déclenchement de même numéro est reçu. Si une source n'est pas configurée pour un déclenchement particulier et si l'esclave reçoit ce déclenchement, rien ne se passe. 8 Text Link To New Window • Action Indépendante. • Déclencheur (Trigger). • Requiert JavaScript. Cette action indépendante peut être utilisée pour ouvrir une nouvelle fenêtre d'une largeur et d'une hauteur données lorsqu'un lien est cliqué. Le bloc Action Text Link To New Window peut être créé dans le menu déroulant Création Actions de la palette Outils, en sélectionnant "Text Link To New Window", ou dans le sous-menu Actions du menu Insertion. Si l'Action est insérée en tant que bloc incrusté dans un flot de texte, il prendra le style du texte l'entourant. Vous pouvez modifier les options suivantes dans la palette Actions : 259 Actions Text Il s'agit du texte affiché dans le navigateur avec un lien. Cliquer sur le lien ouvre une nouvelle fenêtre. Window Name Nom utilisé pour identifier la fenêtre dans laquelle la page sera ouverte. Si le lien est cliqué et qu'une fenêtre portant ce nom est déjà affichée, elle sera utilisée pour le lien. Si vous avez une liste de liens sur votre page, et si vous souhaitez que chacun s'ouvre dans la même fenêtre, utilisez le même Window Name à chaque fois. Par contre, si vous voulez que chaque lien ouvre sa propre fenêtre, assurez-vous que les Window Names sont tous différents. Page Indique la page à afficher dans la nouvelle fenêtre. Width/Height Les dimensions de la nouvelle fenêtre. Note : Netscape et Explorer traite les dimensions de manières différentes. Dans Netscape, elles définissent l'intérieur de la fenêtre - sans les barres d'outils qui sont affichées. Dans Explorer les dimensions concernent la fenêtre entière. Toolbar Détermine si la nouvelle fenêtre contient une barre d'outils. Scrollbars Détermine si la nouvelle fenêtre contient des barres de défilement. Resizable Détermine si la fenêtre peut être redimensionnée. Use Link Vous permet d'ouvrir une nouvelle page dans la fenêtre courante ainsi que la nouvelle fenêtre en sélectionnant Yes et en appliquant un lien au bloc avec le dialogue Editeur du lien. 260 Actions 9 Link To New Window/Picture To New Window • Actions de bloc. • Déclencheurs (Trigger). • Requièrent JavaScript. Ces Actions de bloc ressemblent beaucoup à l'Action Text Link To New Window. L'Action Link To New Window ouvre une page dans une nouvelle fenêtre lorsque un élément est cliqué. L'Action Picture To New Window ouvre une image dans une nouvelle fenêtre. Elle peut être utilisée pour afficher une version haute résolution d'une image lorsque le visiteur clique sur une vignette sur la page. Les Actions Link To New Window et Picture To New Window peuvent être appliquées à un bloc Graphique sélectionné sur la page. Pour cela, sélectionnez l'Action depuis le sous-menu Action du menu Bloc ou cliquez sur le bouton Ajouter Action en bas à gauche de la palette Actions et choisissez l'Action dans le dialogue. Les paramètres pour ces Actions sont pratiquement les mêmes que ceux de l'Action Text Link To New Window. Seule l'Action Picture To New Window a une option supplémentaire : Image Vous permet de sélectionner l'image dans un format compatible Web (GIF, JPEG, PNG) à afficher dans la nouvelle fenêtre. Actions de Redirection (Redirections) Les "Redirections" sont des actions qui envoient les visiteurs sur une page ou un site différent. Par exemple, vous souhaitez utiliser un "splash écran" (fenêtre d'accueil ponctuelle) avant de diriger les utilisateurs vers votre page; ou vous voulez envoyer automatiquement les visiteurs ayant un navigateur récent vers une version différente du site contenant des éléments comme des calques HTML 4.0, que les visiteurs avec d'ancienne version de navigateurs ne peuvent pas visualiser. 1 Timed Redirect • Action de Page • Ne requiert pas JavaScript Cette Action de page redirige l'utilisateur sur une page différente après un certain nombre de secondes. L'usage le plus commun est dédié au "splash écran" - un écran qui se charge, souvent affichant une image ou une courte animation pendant quelques secondes avant que le visiteur ne soit redirigé vers la page principale du site. Cette action ne requiert pas JavaScript et est supportée par la plupart des navigateurs, cependant il est conseillé de mettre un lien sur la page de présentation de manière à permettre au visiteur de cliquer s'il n'était pas redirigé automatiquement. 261 Actions Vous devriez vous assurer de laisser assez de temps au "splash écran" pour se charger complètement avant de rediriger le visiteur sur la page suivante. Si vous avez une image importante, les visiteurs ayant une connexion lente risquent de ne pas la voir du tout. Pour appliquer l'Action Timed Redirect à une page, assurez-vous en premier lieu que rien n'est sélectionné sur la page. Puis choisissez Timed Redirect depuis le sous-menu Actions dans le menu Page ou cliquez sur le bouton Ajouter Action en bas à gauche de la palette Actions et choisissez "Timed Redirect" dans le dialogue. Vous pouvez modifier les options suivantes dans la palette Actions : Destination Il s'agit de la page qui sera chargée après que le "splash écran" ait été affiché pendant la durée de temps spécifiée dans le champ Delay. Delay Il définit le délai (en secondes) avant la redirection du visiteur. 2 Version Redirect • Action de Page • Ne requiert pas JavaScript Cette Action vous permet d'envoyer automatiquement le visiteur vers une autre page si son navigateur est plus récent que la version spécifiée. Elle peut être utilisée si vous voulez avoir deux versions différentes de votre site - par exemple, si vous voulez utiliser les capacités de l'HTML 4.0 dans une section mais aussi fournir une section dont les pages peuvent être visualisées avec des navigateurs plus anciens. Pour appliquer l'Action Version Redirect à une page, assurez-vous en premier lieu que rien n'est sélectionné sur la page. Puis choisissez Version Redirect depuis le sous-menu Actions du menu Page ou cliquez sur le bouton Ajouter Action en bas à gauche de la palette Actions et choisissez "Version Redirect" dans le dialogue. Vous pouvez modifier les options suivantes dans la palette Actions : 262 Destination Actions Définit la page qui sera chargée si la version du navigateur est identique ou supérieure à la version spécifiée. Netscape Vers Les navigateurs Netscape de cette version (ou +) seront redirigés. IE Vers Les navigateurs Explorer de cette version (ou +) seront redirigés. 3 Not In Frameset Redirect • Action de Page • Requiert JavaScript Cette Action de page vous permet de rediriger les visiteurs vers une page contenant des cadres si la page n'a pas été chargée dans un jeu de cadres. Cela peut arriver si votre site utilise les cadres et que les visiteurs sont arrivés directement sur une page de votre site, par un moteur de recherche par exemple. Dans beaucoup de cas, s'ils ne sont pas redirigés vers le jeu de cadre correct, ils ne pourront sans doute pas naviguer dans votre site. Vous pouvez alors vouloir les rediriger vers la page principale du site. Pour appliquer l'Action Not In Frameset Redirect à une page, assurez-vous en premier lieu que rien n'est sélectionné dans la page. Puis choisissez Not In Frameset Redirect dans le sous-menu Actions du menu Page ou cliquez sur le bouton Ajouter Action en bas à gauche de la palette Actions et choisissez "Not In Frameset Redirect" dans le dialogue. Vous pouvez modifier les options suivantes dans la palette Actions : 263 Actions Destination Il s'agit de la page qui remplacera la page ayant l'Action, si celle-ci est chargée en dehors de son jeu de cadres normal. Note: Cette Action constitue une solution partielle au problème. Certaines personnes préfère charger le contenu des cadres dans une nouvelle fenêtre afin de les voir séparément du reste de la page. Si vous utilisez cette Action, quiconque essaiera de faire cela sera redirigé vers le jeu de cadres. Une autre conséquence est qu'un visiteur parcourant votre site avec les cadres désactivés sera aussi redirigé. Actions Multimédia Les éléments multimédia peuvent être importés directement dans Freeway et ils seront traités par des plug-ins dans le navigateur (reportez-vous à Gestion du multimédia). Les Actions fournissent un moyen de régler des options spécifiques pour ces types de plug-ins. Les options standards QuickTime ou Flash sont gérés par Freeway dans le panneau Export de la palette Spécifications, mais QuickTime et Flash Extras fournissent des options supplémentaires. 1 QuickTime Extras Les films QuickTime peuvent être importés et affichés dans Freeway, et de nombreuses options sont disponibles dans le panneau Export. Pour profiter d'options supplémentaires, l'Action de bloc QuickTime Extras peut être appliquée à un bloc contenant un film QuickTime importé. Pour appliquer cette Action au bloc choisi, sélectionnez QuickTime Extras dans le sous-menu Actions du menu Bloc ou cliquez sur le bouton Ajouter Action en bas à gauche de la palette Actions et choisissez "QuickTime Extras" dans le dialogue. Vous pouvez modifier les options suivantes dans la palette Actions : 264 Movie Scale Actions Cette option affecte la taille du film dans le navigateur : • Actual Size : Le film est affiché dans sa taille originale. • Aspect : redimensionné par rapport à son conteneur en conservant les proportions. • To Fit : redimensionné pour tenir dans son conteneur sans garder les proportions. All cadres Cette option vous permet de régler l'affichage de toutes les images du film ou le saut de certaines d'entre elles, afin de rester synchronisé. Volume Cette option vous permet de régler le volume initial avec une valeur allant de 100% à 0% 2 Flash Extras Les films Flash peuvent être importés et affichés dans Freeway et de nombreuses options sont disponibles dans le panneau Export. L'Action Flash Extras peut être appliquée à un bloc contenant un film Flash, ajoutant les fonctionnalités d'une "Image Alt". Pour appliquer cette Action au bloc choisi, sélectionnez Flash Extras dans le sous-menu Action du menu Bloc ou cliquez sur le bouton Ajouter Action en bas à gauche de la palette Actions et choisissez "Flash Extras" dans le dialogue. Vous pouvez modifier les options suivantes dans la palette Actions : 265 Actions Alt Image Cette option correspond à une image qui sera affichée dans le navigateur si le film Flash ne peut être joué (cas où le plug-in ne serait pas disponible). Cette image doit être au format GIF ou JPEG. Edit Movie Ceci permet d'accéder à des réglages avancés qui contrôlent les réglages internes de l'animation (ce n'est pas visible sur l'aperçu de Freeway, mais exécuté lors de la visualisation). Scale Movie Permet de redimensionner l'animation à la taille du bloc. Si ce n'est pas sélectionné, l'animation sera tronquée par son bloc. Protect Movie Les animations Flash ont une option interne qui les protège, pour qu'elles ne soient pas ouvertes dans les logiciels d'édition Flash. Activer cette option va forcer Freeway à protéger l'animation. Change BG Color Permet de changer la couleur de fond de l'animation. Item permet de choisir la couleur de l'animation, other permet d'afficher un menu contextuel pour choisir une couleur particulière. Links Affiche les liens définis à l'intérieur de l'animation. Vous pouvez redéfinir les liens vers des pages de votre site web, si vous ne changez pas les réglages, les liens par défaut sont conservés. Note : Si vous modifiez les animations dans Freeway, utilisez des noms compréhensibles pour les liens, cela permettra aux visiteurs de votre site de mieux exploiter les options supplémentaires de leur lecteur Flash. 3 Director Cette Action indépendante vous permet d'inclure un fichier Director (.dcr) dans votre page Freeway. Notez que le fichier Director ne sera pas visible dans Freeway, mais que vous le verrez lorsque vous prévisualiserez la page dans le navigateur. Les visiteurs auront besoin du plug-in adéquat afin de voir le fichier. Vous pouvez modifier les options suivantes dans la palette Actions : 266 Actions Director File Sélectionne le fichier Director à afficher. Alt Image Vous pouvez spécifier une image alternative qui sera affichée si la personne visualisant votre site n'a pas le plug-in adéquat. Alt Text Vous pouvez spécifier un texte qui remplacera l'image alternative si elle n'était pas chargée. 4 Background Extras Les pages dans Freeway peuvent avoir un fond constitué d'une image. Normalement, cette image est positionnée et haut à gauche de la fenêtre du navigateur, et répétée le nombre de fois nécessaire pour couvrir toute la fenêtre. Vous pouvez ici définir l'emplacement, la répétition etc... de l'image de fond avec les formats HTML 3.2+CSS et HTML 4. Les changements ne sont visibles que lorsque vous publiez le site. Pour appliquer cette action à une page, assurez vous que rien n'est sélectionné dans la page. Ensuite sélectionné Option du fond dans le menu Actions du menu Page, ou cliquez sur l'icône d'Ajout d'action en bas à gauche de la palette d'actions. Vous pouvez utiliser les options suivantes dans la palette d'actions : Horizontal Permet de positionner l'image horizontalement. L'image peut être positionnée à gauche, au centre ou à droite dans la fenêtre du navigateur, ou alors répétée horizontalement depuis la gauche delà fenêtre. Vertical Permet de positionner l'image verticalement dans la fenêtre du navigateur. L'image peut être positionnée en haut, au centre ou en bas dans la fenêtre du navigateur, ou alors répétée verticalement depuis le haut delà fenêtre. Background Scrolls Si cette option est activée, l'image de fond va défiler sur le contenu de la page. Cependant, elle est affichée a une position fixe à l'intérieur de la fenêtre et ne sera pas déplacée avec le contenu de l'image. 267 Actions 5 Background Sound Cette Action de page vous permet de jouer un son lorsque la page est chargée dans la fenêtre du navigateur. Vous voudrez probablement utiliser un son qui pourra être lu par les visiteurs sans plug-in supplémentaire. Les meilleurs formats à utiliser sont le WAV, MIDI ou AIF. MIDI est un format particulièrement bon car les fichiers sont très petits en comparaison avec les formats digitalisés comme le WAV et le AIF. Les fichiers MIDI sont les analogues des fichiers vectoriels pour les images, alors que le WAV ou le AIF sont analogues à des bitmaps. Pour appliquer l'Action Background Sound à une page, assurez-vous en premier lieu que rien n'est sélectionné dans la page. Puis choisissez Background Sound dans le sous-menu Actions du menu Page ou cliquez sur le bouton Ajouter Action en bas à gauche de la palette Actions et choisissez "Background Sound" dans le dialogue. Vous pouvez modifier les options suivantes dans la palette Actions : Sound File Utilisez ce menu déroulant pour sélectionner le fichier audio à jouer. Cette option vous permet de sélectionner n'importe quel type de fichier - les fichiers sons n'ont pas souvent le type Macintosh correct, ce qui signifie que Freeway ne peut pas toujours les reconnaître par avance. Loop Si cette option est réglée sur True le son sera joué en boucle. Actions de Téléchargement (Download) 1 Acrobat Cette Action indépendante peut être utilisée pour ajouter un lien à votre page qui permettra au visiteur de télécharger un fichier PDF Adobe Acrobat. L'Action Acrobat peut être créée en cliquant sur l'outil de création d'Action dans la palette Outils et en sélectionnant Acrobat dans le menu ou en sélectionnant Acrobat dans le sous-menu Actions du menu Insertion. Si l'Action Acrobat est insérée en tant que bloc incrusté dans un flot de texte, elle prendra le style du texte l'entourant. Actions 268 Vous pouvez modifier les options suivantes dans la palette Actions : File Sélection du fichier PDF Acrobat à télécharger. If Displayed Cette option permet de spécifier comment le fichier PDF apparaîtra si l'utilisateur dispose du plug-in Acrobat Weblink, qui permet d'afficher les fichiers PDF directement dans le navigateur. Ces options n'auront aucun effet si le plug-in n'est pas installé. Trois choix sont possibles : • In Place :affiche le fichier PDF dans le cadre ou la fenêtre courante. C'est l'option par défaut. • Full Window: charge le fichier PDF dans la totalité de la fenêtre du navigateur si vous utilisez les cadres. • New Window : ouvre une nouvelle fenêtre pour afficher le fichier PDF. Ce choix est particulièrement recommandé si vous utilisez des cadres. Name Ce texte apparaîtra comme le lien que le visiteur activera pour télécharger le fichier PDF. 2 Acrobat Icon Le but de cette Action de bloc est similaire à celui de l'Action Acrobat. Mais cette Action est appliquée à un bloc de la page. Vous pouvez configurer une image pour le téléchargement d'un fichier PDF Acrobat. Les options sont identiques à celles de l'Action Acrobat. 3 Download File Cette Action indépendante vous permet d'ajouter un lien à votre page donnant la possibilité au visiteur de télecharger un fichier. Freeway transférera automatiquement le fichier sur votre site Web afin que vous créiez le bon lien. L'Action Download File peut être créée avec le bouton de création d'Action dans la palette Outils ou en sélectionnant Download File dans le sous-menu Actions du menu Insertion. Si l'Action Download File est insérée comme bloc incrusté dans un flot de texte, elle prendra le style du texte l'entourant. 269 Actions Vous pouvez modifier les options suivantes dans la palette Actions : File Permet de sélectionner le fichier à télécharger grâce au lien. Name Ce texte sera utilisé comme lien qui pourra être activé par le visiteur pour le téléchargement. Autres Actions 1 Move Layer (Freeway Pro)) Cette Action de bloc ne devrait être appliquée que sur un bloc configuré comme calque. Les calques ne peuvent être utilisés que si le niveau HTML de la page est réglé sur HTML 4.0. Freeway Express ne supporte pas cette action ainsi que toutes celles liées aux calques. Vous pouvez utiliser cette Action pour qu'un élément se déplace sur la page en ligne droite. Le calque peut être déplacé horizontalement, verticalement ou en diagonale. Cela peut créer des effets dynamiques intéressants. De plus, les autres Actions telles que Rollovers ou Slave Image peuvent aussi être appliquées au bloc. Cependant, il n'est pas conseillé d'avoir trop de bloc mobiles sur la page car ils peuvent occasionner une distraction visuelle importante. Pour appliquer cette Action à un bloc calque choisi, sélectionnez Move Layer dans le sous-menu Actions du menu Bloc ou cliquez sur le bouton Ajouter Action en bas à gauche de la palette Actions et choisissez "Move Layer" dans le dialogue. Vous pouvez modifier les options suivantes dans la palette Actions : Actions 270 Speed Définit l'intervalle de temps entre chaque mouvement du bloc Calque (en millièmes de seconde). X Variation horizontale à chaque déplacement (en pixels). X-Limit Le calque est stoppé lorsqu'il a parcouru cette distance en X. Y Distance de déplacement vertical à chaque déplacement (en pixels). Y-Limit Le calque est stoppé lorsqu'il a parcouru cette distance en Y. Loop Permet d'effectuer le mouvement en boucle. 2 Navigation Pop-up Cette Action vous permet d'utiliser des menus déroulants pour la navigation plutôt que des liens conventionnels. Cette navigation est plus élégante et occupe moins de place que les listes de liens, mais elle requiert que JavaScript soit activé dans le navigateur pour fonctionner. L'Action Navigation Pop-up peut être créée en cliquant sur l'outil de création d'Action dans la palette Outils et en sélectionnant Navigation Pop-up dans le menu déroulant ou en sélectionnant "Navigation Pop-up" dans le sous-menu Actions du menu Insertion. Vous pouvez modifier les options suivantes dans la palette Actions : 271 Actions Target Désigne la cible pour la page qui sera affichée. Trois options sont disponibles : • Whole Window : La page sera chargée dans la fenêtre courante du navigateur (si le menu déroulant se trouve dans un cadre, la page y sera chargée remplaçant le cadre courant). • New Window : La page sera chargée dans une nouvelle fenêtre du navigateur. • Other : Le nom de cible est alors pris dans le champ Other Target. Other Target Définit le nom de la cible si vous avez sélectionné Other dans le menu déroulant Target. Par exemple, si vous voulez que la page se charge dans le cadre appelé "main", vous entreriez "main" dans ce champ. Option 1...20 Chaque option est le texte affiché dans la ligne correspondant du menu déroulant dans un navigateur. URL 1...20 Chaque option est le lien à ouvrir lorsque l'élément correspondant dans le menu est choisi (depuis le navigateur). 3 Country List/Liste Pays Cette Action indépendante peut être utilisée pour insérer un menu déroulant sur votre page, proposant une liste des pays basée sur les informations du site Web du Département d'Etat des Etats Unis. Vous devriez normalement utiliser ce menu déroulant comme composante d'un formulaire de façon à permettre aux visiteurs de choisir leur pays d'origine. Actions 272 L'Action Country List peut être créée en cliquant sur l'outil de création d'Action dans la palette Outils et en sélectionnant Country List dans le menu déroulant ou en sélectionnant "Country List" dans le sous-menu Actions du menu Insertion. Vous ne pouvez modifier qu'une option dans la palette Actions : Name Cette option vous permet de régler ce que le menu déroulant renverra au script traitant le formulaire. Pour plus d'information, reportez vous à Formulaires. Par exemple, si le champ Name est réglé sur "country" (qui est le choix par défaut), le formulaire retournerait quelque chose comme "country = Belgium". Note : l'Action Liste Pays VF est la version française de cette Action. 4 Date Courante/Date Courante Cette Action a déjà été expliquée en détail dans la section Créer un bloc Action (bloc d'Action autonome). Note : l'Action Date Courante VF est la version française de cette Action. 5 Pop-up Window Cette Action de page peut servir à afficher une nouvelle fenêtre à une position et avec des dimensions données, lorsque la page est chargée. La fenêtre pourrait être utilisée pour afficher une bannière de publicité ou comme barre de navigation. Pour utiliser cette Action, créer en premier lieu la page à afficher dans cette fenêtre. Puis retourner sur la page depuis laquelle la fenêtre sera ouverte et appliquez lui l'Action Pop-up Window. Pour cela, sélectionnez Pop-up Window dans le sous-menu Actions du menu Page ou cliquez sur le bouton Ajouter Action en bas à gauche de la palette Actions et choisissez "Pop-up Window" dans le dialogue. Vous pouvez modifier les options suivantes dans la palette Actions : Actions 273 Window Name Identifie la fenêtre dans laquelle la page sera ouverte. Si une fenêtre portant le même nom est déjà ouverte, cette fenêtre sera utilisée. Si vous avez une liste de lien sur la page et que vous souhaitez tous les ouvrir dans la même fenêtre, utilisez le même Window Name pour tous. Cependant, si vous voulez que chaque lien ouvre sa propre fenêtre, assurez-vous que chaque lien a un Window Name différent. Page Identifie la page à afficher dans la nouvelle fenêtre. Left/Top Position de la fenêtre à l'écran (Gauche/Haut). Width/Height Dimensions de la fenêtre (Largeur/hauteur). Note : Netscape et Explorer traitent ces dimensions de manières différentes. Dans Netscape, elles définissent l'intérieur de la fenêtre sans inclure les barres d'outils, alors que Explorer considère ces dimensions comme celles de la fenêtre entière. Toolbar Détermine si la nouvelle fenêtre aura une barre d'outils. Close Réglez cette option sur "Yes" si vous voulez que la fenêtre se ferme automatiquement lorsqu'une nouvelle page est chargée, remplaçant celle contenant l'Action. Afin que cela fonctionne correctement, vous aurez aussi besoin d'appliquer l'Action Self Closing Pop-up Window à la page qui sera affichée dans la nouvelle fenêtre. Important : Si vous réglez Close sur "Yes", Des erreurs JavaScript peuvent être déclenchées si vous n'avez pas appliqué l'Action Self Closing Pop-up Window (voir ci-après) à la page affichée dans la nouvelle fenêtre. 274 Actions Si la nouvelle fenêtre est utilisée pour la navigation, vous devez vous assurez que les liens ont pour cible la fenêtre principale. Dans la page de la nouvelle fenêtre, réglez le champ Target de chaque liens sur "opener". 6 Self Closing Pop-up Window Cette Action de page est conçue pour être appliquée de paire avec l'Action Pop-up Window. Elle doit être utilisée sur la page ouverte dans une nouvelle fenêtre afin que celle-ci se ferme dès qu'une nouvelle page est ouverte dans la fenêtre origine. Activez la page qui sera affichée dans la nouvelle fenêtre et appliquez l'Action Self Closing Pop-up Window. Pour cela, sélectionnez Self Closing Pop-up Window depuis le sous-menu Actions du menu Page ou cliquez sur le bouton Ajouter Action en bas à gauche de la palette Actions puis choisissez "Self Closing Pop-up Window" dans le dialogue. 7 No Cache Dans certaines circonstances, il est préférable d'empêcher le navigateur de copier dans le cache une page web, si vous utilisez du code JavaScript spécialisé (ou des Actions qui en génèrent) et qui doivent être exécutés chaque fois que la page apparaît dans le navigateur. L'action "Sans cache" oblige Freeway à mettre les balises HTML requises pour empêcher le navigateur web de copier la page dans son cache. Pour appliquer cette action à une page, vérifiez bien que rien n'est sélectionné sur la page. Ensuite, sélectionnez "Sans cache" dans le sous-menu Actions du menu Page, ou cliquez sur l'icône d'Ajout d'action en bas à gauche de la palette d'actions. Cette action n'a qu'une seule option (par défaut) qui va rajouter une balise "<head>" après la balise "<body>" pour empêcher la page d'être enregistrée, dans les futures versions d'Internet Explorer. Ce n'est pas du code HTML standard. Gérer les Actions Fichiers d'Actions Les Actions Freeway sont enregistrées dans des fichiers textes dans le dossier Freeway Actions. Chaque fichier peut stocker une ou plusieurs Actions. Les fichiers d'Actions sont organisés en sous-dossiers dans le dossier Freeway Actions suivant leur fonctionnalité. Par exemple, toutes les Actions concernant la redirection vers une autre page - telle que Timed Redirect - sont stockées dans le dossier Redirect. Les Actions stockées dans le même dossier seront regroupées dans Freeway. Dans le menu déroulant de création d'Action sur la palette Outils et dans les sous-menus Actions des menus Page, Bloc et Insertion, ces Actions sont listées ensembles, chaque groupe étant séparé des autres par un séparateur. Actions 275 Ajouter de nouvelles Actions Les Actions peuvent être téléchargées depuis le site de SoftPress ou de TRIEDRE : http://www.softpress.com/support/actions http://www.tri-edre.com/ Lorsqu'un nouveau fichier d'Action a été téléchargé, vous pouvez le déposer dans le dossier Freeway Actions. Dans Freeway, vous verrez l'Action apparaître à la bonne place. Vous n'avez pas besoin de redémarrer Freeway pour utiliser cette nouvelle Action. Note : Certaines Actions peuvent contenir du code AppleScript. AppleScript est un langage de script qui peut être utilisé pour contrôler de nombreuses applications sur le Macintosh, ce qui le rend très flexible. Cependant, si vous installez de nouvelles Actions de source inconnue, il y a une possibilité que le code AppleScript qu'elles contiennent endommage vos applications et vos fichiers sur le disque dur. Vous pouvez désactiver l'option Autoriser AppleScript dans les Actions en décochant la case correspondante dans le panneau Général du dialogue Préférences. Mettre à jour des Actions Les Actions standard fournies avec Freeway sont mises à jour de temps à autre. Vous devriez toujours pouvoir trouver les dernières versions d'une Action particulière sur le site Web consacré aux Actions. Lorsque vous téléchargez une nouvelle version d'une Action standard, vous devriez pouvoir remplacer la version que vous avez dans le dossier Freeway Actions avec la nouvelle. Tout document Freeway utilisant cette Action sera automatiquement mise à jour avec la nouvelle version lorsque vous publierez à nouveau le site. Le dialogue "Edition des Actions" Le dialogue Edition des Actions peut être activé depuis le menu Edition en choisissant Actions.... Ce dialogue est similaire au Gestionnaire d'Extensions Mac OS et vous permet d'activer et de désactiver des Actions ou des groupes d'Actions. 276 Actions Il y a 5 colonnes dans la Fenêtre d’édition des actions On/Off Vous permet de désactiver une action de manière à ce qu'elle n'apparaisse plus dans Freeway. Nom Affiche le nom des Actions et les fichiers et dossiers les contenant. Type Indique le type de l'Action : Objet (indépendante), Page ou Bloc. Utilisé Indique le nombre d'utilisations de l'Action dans le document courant. Date de modification Vous informe de la date de dernière modification du fichier d'une Action Freeway particulière. Cela peut aider à vous assurez que vous avez la dernière version de l'Action. Actions en double Si vous avez deux Actions du même type et portant le même nom, Freeway désactivera la plus ancienne par défaut et vous avertira lorsque vous lancerez ou activerez Freeway. Si vous regardez dans le dialogue Editer Actions, vous trouverez laquelle a été désactivée. Si vous souhaitez utiliser une Action différente, vous pouvez désactiver l'Action en cours et activer celle qui était désactivée. Actions 277 Modifier les Actions Les Actions Freeway étant contenues dans des fichiers textes, cela signifie que vous pouvez les modifier pour les adapter à vos besoins. Cependant, soyez prudent et faites des copies de sauvegarde de toute Action que vous modifierez, au cas ou vous fassiez une erreur et que l'Action devienne inutilisable. Certaines Actions sont très simples et d'autres très complexes et peuvent interagir avec d'autres Actions, il est donc conseillé de ne pas les éditer (à moins que vous sachiez ce que vous faites). Concevoir des Actions (Freeway Pro)) Si vous souhaitez écrire vos propres Actions, consultez la documentation disponible en téléchargement sur le site Web consacré aux Actions. Vous pouvez aussi souhaiter partager, avec d'autres utilisateurs de Freeway, les Actions que vous aurez conçues. Si vous voulez soumettre des Actions pour les inclure au site Web des Actions, contactez le support Technique de SoftPress à l'adresse [email protected]. Il serait aussi très utile que vous puissiez fournir une documentation complète et des exemples pour que les autres utilisateurs de Freeway sachent comment s'en servir. 278 Publication Actions Options de prévisualisation de Freeway 279 Options de prévisualisation de Freeway Freeway propose de nombreuses options de prévisualisation qui sont principalement accessibles dans le menu Affichage, en dehors de la commande Prévisualiser. La commande Prévisualiser située dans le menu Fichier publie le site complet sous la forme de pages HTML puis affiche la page actuelle dans un navigateur web. Pendant que vous travaillez dans Freeway, vous bénéficiez déjà d'une prévisualisation WYSIWYG, Freeway essayant d'afficher au maximum les pages telles qu'elles apparaîtront dans le navigateur en utilisant les réglages habituels des navigateurs. Cependant, il y a d'autres options proposées par Freeway qui peuvent vous fournir des informations détaillées sur ce qui sera publié. Prévisualiser le texte Si vous le souhaitez, vous pouvez modifier les polices utilisées par défaut dans Freeway à l'aide de l'option Texte dans les préférences. Ainsi vous pourrez voir ce qui se produirait si l'un des visiteurs de votre site utilisait une police pour son navigateur différente de la police habituellement utilisée. Souvenezvous que de nombreux visiteurs augmentent la taille de la police dans leur navigateur pour faciliter la lecture à l'écran. Il faut se rappeler que le texte sera plus large lorsqu'il sera affiché sur des ordinateurs fonctionnant avec Windows. Ceci est dû au fait que la résolution habituellement utilisée par Windows est 96 dpi, tandis que la résolution habituellement utilisée sur Mac est 72 dpi. Pour prévisualiser le texte tel qu'il apparaîtra sous Windows, si vous n'avez pas accès à un PC utilisant Windows, utilisez Microsoft Internet Explorer puis cliquez sur le bouton Plus large dans la barre d'outils pour agrandir la taille du texte. De même, dans les logiciels Netscape, vous pouvez utiliser une police de taille 16 dans les préférences. Cela vous montrera où les problèmes de mise en page peuvent surgir sur votre page, mais ça ne remplace pas une prévisualisation sur un PC utilisant Windows. Lissage Lorsque vous exportez le texte ou des blocs colorés sous la forme d'images GIF, il est probable que les courbes se pixelisent, à cause de la faible résolution des écrans d'ordinateur. Cette pixelisation crée des images de mauvaise qualité. 280 Options de prévisualisation de Freeway La technique de lissage des logiciels de retouche photo professionnels est utilisée dans Freeway pour créer des images bitmap sans cet effet de pixelisation. Cette méthode atténue les escaliers des bords des courbes en modifiant la couleur des pixels situés le long du bord. Sans lissage Avec lissage (Ces images ont été agrandies pour mettre en valeur l'effet du lissage) Les images créées par Freeway sont automatiquement lissées par défaut, bien que vous puissiez désactiver cette fonction si vous le souhaitez (voir Formats de publication). Freeway vous offre la possibilité de prévisualiser les images telles qu'elles seront publiées, sans lancer la publication du site, à l'aide de la commande Lissage du menu Affichage. Les textes et les blocs publiés sous la forme d'images lissées seront affichés avec des bords adoucis artificiellement. Donc il est conseillé de désactiver la fonction Lissage pour avoir une vue plus précise de la page pendant que vous la modifiez. De plus, cela utilise légèrement plus de mémoire que d'habitude pour afficher la page et cela ralentit légèrement les performances, bien qu'il soit difficile de s'en rendre compte. Prévisualiser les images Lorsque vous importez une image (en dehors des images importées en gardant l'original, voir Images Tel quel (avec option Garder l'original)), Freeway utilise l'image importée comme base pour créer la nouvelle image qui sera publiée. Au cours de cette procédure, Freeway vous propose des options précises pour ajuster la compression, l'entrelacement, la palette, ou bien encore le nombre de couleurs de l'image publiée. Cependant, ces options peuvent avoir un impact important sur la taille de l'image publiée et son apparence. Il est utile de pouvoir prévisualiser le résultat final lorsque vous modifiez les options proposées. Lorsque vous modifiez les options d'une image dans le panneau Exportation de la palette Spécifications, pour prévisualiser l'impact de vos modifications, vous pouvez utiliser la commande Prévisualisation des images du menu Affichage. Lorsque vous activez cette commande, toutes les images de la page sont traitées comme lors de la publication et le résultat est directement affiché sur la page dans Freeway, tel qu'il le serait dans un navigateur. La prévisualisation des images peut prendre quelques secondes, pendant lesquelles un motif en forme damier est affiché au lieu des images en cours de traitement. Des flèches tournantes dans l'angle supérieur droit de la fenêtre indiquent que Freeway est en train de travailler. Les images sont affichées individuellement après leur traitement. En utilisant le panneau Exportation de la palette Spécifications, vous pouvez modifier les Options de prévisualisation de Freeway 281 options de cette image. Lorsque vous modifiez les réglages d'une image, la fenêtre va afficher les flèches tournantes puis la nouvelle image mise à jour. Les modifications importantes, telles que le passage du format GIF au format JPEG ou le découpage d'une image dans son bloc provoquera à nouveau l'affichage du damier. Après l'affichage de l'image, le champ Taille de l'onglet Exportation indique la taille exactede l'image en octets. À tout moment, lorsque la prévisualisation des images est en cours, vous pouvez l'interrompre ou la désactiver pour déplacer par exemple des blocs. Cependant, après l'avoir interrompue, elle devra reprendre depuis le début, si vous souhaitez à nouveau l'utiliser. La prévisualisation des images nécessite un traitement intensif et peut utiliser beaucoup de mémoire. Elle peut aussi ralentir votre travail jusqu'à un niveau inacceptable (surtout sur les Mac lents), donc il est conseillé de ne l'activer que lorsque vous souhaitez modifier les options d'exportation des images et de la désactiver aussitôt après. Mise en page HTML Dans Freeway, vous pouvez placer un bloc HTML au-dessus d'un bloc Graphique. Dans ce cas, le bloc HTML découpe le bloc Graphique situé en dessous, ce qui affiche la couleur ou l'image de fond de la page. C'est ainsi que la page apparaîtra dans les navigateurs. Lorsque vous publiez le site, Freeway découpe les images placées en dessous pour les exporter en plusieurs morceaux qui seront regroupés à l'aide du HTML. Le texte HTML pourra s'étendre dans deux directions pour remplir l'espace disponible défini par la taille du bloc HTML. Si le texte devient trop large dans le navigateur, la zone utilisée par le bloc HTML s'agrandira. Cela peut poser des problèmes dans certaines circonstances : lorsque le bloc HTML s'agrandit, il risque de repousser certains morceaux de l'image découpée qui était située en dessous de ce bloc. En activant l'option Mise en page HTML du menu Affichage, vous pouvez éviter ce problème. Freeway affiche les découpes faites dans les images (s'il y en a) à l'aide de lignes grises. Là où le bloc HTML peut poser des problème, la zone de danger est indiquée par des flèches rouges. Ces flèches indiquent les zones où la mise en page peut être détruite si la taille du texte utilisée dans le navigateur est trop grande. 282 Options de prévisualisation de Freeway Vous découvrirez peut-être que la mise en page est détruite lorsque la page est affichée sur un PC utilisant Windows, alors qu'elle semblait parfaite lorsqu'elle était affichée avec une grande police sur Mac. Cela est dû au fait que les polices Windows peuvent utiliser des tailles plus grandes que sur Mac. Si vous créez un site professionnel, il est essentiel d'afficher vos pages dans des navigateurs fonctionnant sous Windows. Vous pouvez également utiliser Netscape Navigator pour visualiser vos pages avec une police proportionnelle de taille 72 ou utiliser un émulateur PC tel quel Virtual PC. Note : Lorsque l'affichage Mise en page HTML est activé, il est conseillé de désactiver l'affichage des Contours dans le menu Affichage pour ne pas confondre les tableaux de mise en page avec les contours des blocs. 283 Publier le site Publier le site Lorsque vous publiez le document, Freeway crée les pages et les images qui ont été modifiées depuis la dernière publication du site, en vérifiant que le dossier du site contient une version complète et mise à jour du site.. Pour éviter que le dossier du site ne soit encombré d'anciens fichiers, Freeway détruit les fichiers inutiles lors de chaque publication. Si vous souhaitez modifier le dossier du site à un moment quelconque, vous pouvez sélectionner Réglages du document... dans le menu Fichier. La prochaine fois que vous prévisualiserez le site, Freeway créera une nouvelle version de tous les fichiers. Freeway conserve les informations indiquant quels fichiers doivent être placés dans le dossier du site à l'intérieur d'un petit fichier nommé "_siteinfo" qui se trouve également dans le dossier du site. Les informations sur le dossier contenant le site sont enregistrées directement dans le document Freeway. Lorsque vous êtes prêt à publier le document sur le web, Freeway peut transférer tous les fichiers nécessaires sur un serveur web. Les trois commandes liées à la publication du site sont : Publier le site : met à jour le dossier du site. Prévisualiser : met à jour le dossier du site et affiche la page actuelle dans un navigateur. Transférer : met à jour le dossier du site et envoie les fichiers nécessaires sur le serveur web. Chaque fois que vous modifierez le document original, vous devrez republier le site en utilisant l'une des commandes décrites ci-dessus afin que les modifications soient répercutées dans le dossier du site. Lorsque vous modifiez le contenu d'une page ou lorsque vous en créez une nouvelle, la palette Site affiche un point noir à côté de son icône pour indiquer qu'elle doit être publiée à nouveau. Le code HTML généré par Freeway peut être personnalisé à l'aide des options Sortie des préférences.. Vous pouvez décider de rendre le code HTML plus compact ou plus lisible, utiliser des balises en majuscules ou en minuscules. Vous pouvez également indiquer comment les tableaux de mise en page doivent être renforcés et sélectionner le type de retour à la ligne utilisé. Choisir le dossier du site Le dossier du site peut être choisi dans le dialogue Nouveau document lors de la création d'un nouveau document ou à tout moment en sélectionnant Réglages du document dans le menu Fichier. Cependant, si vous n'avez pas encore défini de dossier pour le site, vous devrez en choisir un ou en créer un lors de la publication du site si vous utilisez les commandes Publier le site, 284 Publier le site Prévisualiser ou Transférer.... Freeway affiche un dialogue permettant de sélectionner le dossier de votre choix ou d'en créer un nouveau. Lorsque le dossier souhaité est sélectionné, cliquez sur Choisir pour utiliser ce dossier en tant que dossier du site. Publier totalement le site Occasionnellement, vous pourrez avoir besoin de créer totalement une nouvelle version du site web. Vous pouvez faire cela de deux manières. Soit en sélectionnant un nouveau dossier pour le site en sélectionnant Réglages du document dans le menu Fichier, soit en utilisant la commande Tout publier. La commande Tout publier force Freeway à recréer totalement les pages HTML à partir du document, c'est une technique utile pour être sûr que les fichiers sont totalement à jour. Pour obtenir la commande Tout publier, maintenez la touche Control enfoncée puis sélectionnez Tout publier dans le menu Fichier. Forcer la reconstruction d'une page Pour forcer la page actuelle à être recréée lors de la prochaine publication du site, sélectionnez Forcer la reconstruction dans le menu Page. Un point noir apparaîtra à côté de l'icône de cette page dans la palette Site. Choisir entre code HTML compact ou lisible Dans les préférences du document, vous pouvez choisir si le code HTML généré pour le site doit être aussi compact que possible pour accélérer son téléchargement, ou légèrement moins efficace mais plus facile à lire. Par défaut, Freeway génère du code HTML sans aucun retour à la ligne ni espace inutile pour réduire au maximum la taille du fichier. Cependant, si quelqu'un a besoin par la suite de relire le code HTML, ce manque de retours à la ligne et d'espaces peut le rendre difficile à modifier. Dans ce cas, il est conseillé de régler Freeway pour qu'il génère du code HTML plus lisible. Pour rendre le code HTML plus lisible, sélectionnez Préférences... dans le menu Fichier, cliquez sur Sortie puis sélectionnez Plus lisible dans le menu Code HTML. Pour prévisualiser votre site dans un éditeur de texte (tel que SimpleText ou BBEdit), au lieu d'un navigateur, consultez Afficher le code HTML du document. Publier le site 285 Retours à la ligne Freeway propose trois options pour les retours à la ligne : Mac OS, Unix ou DOS. En sélectionnant la bonne plate-forme, le fichiers HTML seront plus facilement lisibles. Cette option ne modifiera pas l'affichage dans le navigateur, mais elle peut avoir de l'importance pour l'exécution des scripts CGI par exemple. Pour modifier le type de retours à la ligne utilisé, sélectionnez Préférences... dans le menu Fichier, cliquez sur Sortie puis sélectionnez le système d'exploitation souhaité dans le menu Retour à la ligne. Choisir le mode de renforcement des tableaux Lorsque vous positionnez des blocs sans calque sur une page, Freeway recrée la mise en page à l'aide de tableaux de mise en page invisibles. Ces tableaux sont automatiquement renforcés par Freeway pour éviter une distorsion de la mise en page lors de l'affichage dans certains navigateurs. Par défaut, Freeway les renforce à l'aide des balises <spacer> reconnues par les logiciels de Netscape et avec des images GIF d'un seul pixel lorsque c'est nécessaire. Mais si vous le souhaitez, vous pouvez demander à Freeway de n'utiliser que des images GIF. Ce renforcement à l'aide d'images GIF rend les pages plus robustes, mais cela peut provoquer l'apparition de petits points lorsque les pages sont affichées dans certains navigateurs bogués. La différence de temps de chargement pour les pages utilisant ces deux méthodes de renforcement est négligeable. La méthode avec la balise <spacer> peut être légèrement plus rapide. Pour forcer Freeway à utiliser des images GIF invisibles au lieu des balises <spacer>, sélectionnez Préférences... dans le menu Fichier, cliquez sur Sortie puis sélectionnez GIFs invisibles dans le menu Renforcement tableaux. Réutilisation des images Lorsque vous publiez votre site, Freeway vérifie chaque image générée pour voir si une image identique a déjà été publié. Si c'est le cas, Freeway ne publiera pas une nouvelle copie de cette image. À la place, le code HTML fera référence au premier fichier créé pour cette image. Cela entraîne une plus grande rapidité lorsque les pages sont affichées sur le web. L'une des conséquences de cette réutilisation automatique des images est que vous ne pourrez pas être sûr que chaque image sera transformée en fichier dans le dossier du site. Une image précédente déjà publiée pourra simplement être réutilisée à la place. Pour plus d'information, consultez Noms de fichier. 286 Prévisualisation dans un navigateur Prévisualisation dans un navigateur La prévisualisation de votre travail dans un navigateur est une partie essentielle de la création du site. Il est important de tester vos pages dans différentes versions des logiciels Netscape ou de Microsoft Internet Explorer pour être sûr qu'elles apparaissent comme vous le souhaitez. Il y a des différences entre l'affichage des pages dans les différents navigateurs. Freeway essaie de vous donner la meilleure prévisualisation possible lorsque vous travaillez sur une page dans Freeway, mais c'est en réalité un compromis entre l'affichage de cette page dans ces deux principaux navigateurs. Il est aussi important de vérifier comment vos pages s'afficheront sur un PC sous Windows. Des tailles de police équivalentes étant affichées un tiers plus grand dans Windows que dans Mac OS, cela peut entraîner des problèmes. Si vous n'avez pas accès à un PC, prévisualisez vos pages dans Internet Explorer en réglant la taille des polices au maximum, ou utilisez Netscape Communicator et utilisez une police de taille 16 au lieu de 12. Cela vous donnera une idée de ce qui se passera lorsque les pages seront affichées avec Windows. Freeway conserve une liste des navigateurs installés sur votre Mac pour faciliter la prévisualisation de votre travail dans le navigateur de votre choix. Lorsque vous ouvrez Freeway pour la première fois, il recherche tous les navigateurs actuellement installés. Ensuite, vous pouvez ajouter ou supprimer des navigateurs, ou demander à Freeway de détecter les nouveaux navigateurs pour mettre à jour automatiquement la liste. Vous pouvez également choisir le navigateur par défaut pour la prévisualisation des pages. C'est aussi ce navigateur qui sera utilisé pour l'affichage de l'aide en ligne ou lorsque vous utilisez le raccourci clavier pour prévisualiser la page actuelle dans un navigateur. Lorsque vous ouvrez Freeway pour la première fois, il choisit par défaut le navigateur sélectionné dans le tableau de bord Internet. Gérer la liste des navigateurs 1 Sélectionnez Réglages prévisualisation dans le sous-menu Prévisualiser du menu Fichier. 2 Freeway affiche une liste des navigateurs installés sur votre ordinateur et affiche une marque à côté du navigateur par défaut. Prévisualisation dans un navigateur 287 3 Cliquez sur le bouton Ajouter pour ajouter un nouveau navigateur dans cette liste. Pour supprimer un navigateur dans la liste, sélectionnez-le plus cliquez sur Effacer. Pour sélectionner le navigateur par défaut, sélectionnez-le puis cochez-le dans la colonne Défaut. Pour que Freeway mette automatiquement cette liste à jour, cliquez sur Mise à jour. 4 Cliquez sur OK. Pour prévisualiser la page actuelle dans le navigateur par défaut, appuyez sur Commande-Option-P. Afficher le code HTML du document Il y a deux méthodes pour visualiser le code HTML généré par Freeway. Vous pouvez prévisualiser le site dans votre navigateur puis sélectionner Source (Internet Explorer) ou Source de la page (Netscape) dans le menu Affichage du navigateur. Ou bien, dans Freeway, sélectionnez un éditeur de texte (tel que SimpleText ou BBEdit) comme navigateur. Suivez la méthode décrite précédemment pour ajouter un navigateur mais ajoutez l'éditeur de texte de votre choix. Dans chaque cas, lorsque vous avez besoin d'afficher le code HTML, sélectionnez Plus lisible dans le menu Code HTML du panneau Sortie des préférences. Note : Si vous utilisez un éditeur de texte comme navigateur, pensez à fermer le fichier dans l'éditeur de texte afin de publier à nouveau votre site. 288 Prévisualisation dans un navigateur Rafraîchir le navigateur Les navigateurs conservent souvent les images dans leur mémoire cache, ce qui peut poser des problèmes lorsque vous prévisualisez un site plus d'une fois à partir de Freeway. Cela peut poser encore plus de problèmes si vous travaillez avec des cadres (voir Les cadres) ou des rollover (voir Rollover (Action Déclencheur)). La solution consiste à recharger ou rafraîchir la page dans le navigateur. Pour cela, sélectionnez Recharger (Netscape) ou Rafraîchir (Internet Explorer) dans le menu Affichage, ou cliquez sur les boutons correspondant en haut de la fenêtre, ou pressez Commande-R. Vous pourrez aussi avoir besoin de forcer le rafraîchissement en maintenant la touche Option enfoncée lors du rafraîchissement. Si cela ne fonctionne pas, affichez les préférences du navigateur puis effacez le cache dans les préférences avancées. Vous pouvez aussi quitter puis ouvrir à nouveau le logiciel. Astuce : Lorsque vous travaillez sur des rollovers, vous pouvez rafraîchir l'image du rollover en plaçant le curseur dessus puis en pressant Commande-R. Transférer le site 289 Transférer le site Après avoir publié le site dans son dossier, l'étape suivante consiste transférer les fichiers vers votre espace web. Cela peut être un serveur web situé sur votre réseau local, mais habituellement vous transférerez vos fichiers par FTP (File Transfer Protocol) vers un serveur web distant. Dans chaque cas, vous pouvez utiliser la commande Transférer... de Freeway pour publier le site et le rendre accessible sur Internet. Pour publier votre site sur le web, sélectionnez Transférer... dans le menu Fichier. Freeway mettre à jour le dossier du site puis commencera à synchroniser les fichiers se trouvant sur votre serveur web avec ceux du dossier local. Freeway détecte les fichiers modifiés dans votre site et transfère automatiquement les fichiers qui ont besoin d'être mis à jour, de même il efface les fichiers ou dossiers devenus inutiles. Si vous utilisez un autre logiciel indépendant de Freeway pour transférer votre site, vous devrez identifier vousmême les fichiers modifiés pour les envoyer sur le serveur, donc ça sera beaucoup moins fiable. Pour vous connecter sur votre site web par FTP, vous devez connaître le nom du serveur, le nom de votre dossier, votre nom d'utilisateur (login) et votre mot de passe (password). Si vous avez des doutes sur ces informations, contactez l'administrateur du serveur web ou contactez le support technique de votre hébergeur sur Internet ou par téléphone. Vous pouvez entrer ces informations dans le dialogue Réglages du document après avoir créé le document. Vous pourrez aussi entrer ces informations lorsque vous utilisez la commande Transférer pour la première fois. Méthode de transfert Le site peut être transféré sur le serveur web par FTP (File Transfer Protocol) ou par une simple copie de fichiers. Utilisez le menu Transfert dans le dialogue Réglages du document ou Transfert pour choisir la méthode de transfert requise. Un site hébergé sur un serveur distant auquel on ne peut se connecter que via Internet (ou à travers d'un réseau local TCP/IP) devra être transféré par FTP. C'est la méthode habituelle que vous devrez utiliser si vous louez un espace web chez un hébergeur de sites. Un site hébergé sur un disque local (ou sur un serveur accessible via le réseau local) devra être transféré par copie de fichiers. C'est la méthode que vous devrez utiliser si vous possédez votre propre serveur web ou si vous utilisez le tableau de bord Partage Web sur votre propre ordinateur (ou un logiciel similaire). Comme pour le transfert FTP, la copie de fichiers détermine les changements effectués sur le site et ne copie ou n'efface que les fichiers modifiés (voir Options de transfert pour la copie de fichiers page #). 290 Transférer le site Le transfert par FTP nécessite qu'Open Transport soit installé. Il est inclus dans Mac OS. Le transfert par FTP sera désactivé si Open Transport n'est pas installé. Modifier les options de transfert Avant d'utiliser les fonctions de transfert pour envoyer votre site web, vous devez indiquer à Freeway où il se trouve et quelle méthode vous souhaitez utiliser. Vous devrez peut-être aussi entrer un nom d'utilisateur et un mot de passe. Vous pouvez faire cela à l'aide du dialogue Réglages du document, ou lors de la première utilisation de la commande Transférer. Les options de transfert, y compris le mot de passe si vous le souhaitez, sont enregistrées dans votre document Freeway. Si vous indiquez les options de transfert et si vous enregistrez votre document, elles seront conservées pour les prochaines séances de travail. Vous devrez entrer à nouveau les options de transfert pour chaque nouveau document créé dans Freeway. Pour modifier les options de transfert 1 Sélectionnez Réglages du document... dans le menu Fichier. Le dialogue Réglages du document s'affiche. 2 Indiquez les options de transfert que vous souhaitez utiliser dans la partie Transfert. 3 Cliquez sur OK pour valider les modifications et revenir au document. Pour modifier les options de transfert lors du premier transfert 1 Sélectionnez Transférer... dans le menu Fichier. Le dialogue Transfert s'affiche. 2 Indiquez les options de transfert que vous souhaitez utiliser. 3 Cliquez sur OK pour débuter le transfert du site. Les options que vous avez indiquées seront conservées et utilisées la prochaine fois que vous utiliserez la commande Transférer.... Elles sont enregistrées dans votre document. Le dialogue Transfert s'affiche chaque fois que vous transférez votre site. Transférer le site 291 Options de transfert pour le FTP Lorsque vous transférez votre site par FTP en utilisant la commande Transférer, vous devez indiquer les informations suivantes : • Serveur • Répertoire • Nom d'utilisateur • Mot de passe À partir du dialogue Transfert, vous pouvez également utiliser le mode FTP passif, enregistrer un historique des transferts, ou utiliser votre propre script de connexion. Pour connaître les informations requises, vous devez contacter votre administrateur ou le support technique de votre hébergeur. Si vous louez un espace web ou si votre fournisseur d'accès Internet vous offre un espace web, visitez son site web ou contactez son support technique. Les informations nécessaires pour transférer le site doivent être entrées avec précaution : s'il y a une erreur d'orthographe, ou si le symbole "/" est confondu avec le symbole "\", Freeway ne pourra pas transférer vos fichiers. Si vous obtenez ces informations sur le site web de votre hébergeur ou par e-mail de leur support technique, vous pourrez directement copier/coller ces informations dans les champs correspondants dans Freeway. Si vous entrez vous-même ces informations, faîtes attention à les recopier exactement. 292 Transférer le site Serveur C'est le nom du serveur FTP sur lequel vous allez transférer votre site web. Par exemple : ftp.softpress.com L'adresse du serveur FTP peut être sous la forme d'un nom de domaine (comme ci-dessus) ou sous la forme d'une adresse IP (telle que 236.26.127.7). Elle peut éventuellement contenir un numéro de port (par exemple : ftp.softpress.com:21). Note : le serveur peut aussi être appelé serveur FTP ou hôte (serveur FTP, hostname et host en Anglais). Répertoire Dans certains cas, vous devrez entrer le nom du répertoire se trouvant sur le serveur FTP dans lequel vous souhaitez copier vos fichiers. Voici un exemple : homepages/~yajworld Ce dossier doit déjà exister sur le serveur web. Si votre hébergeur ne vous a pas communiqué le nom d'un répertoire FTP particulier, laissez ce champ vide. Note : le répertoire peut aussi être appelé dossier ou chemin d'accès (directory, folder, path et pathname en Anglais). Utilisateur Pour arriver à transférer vos fichier, vous devez entrer votre nom d'utilisateur. Une fois de plus, prenez soin de l'entrer correctement. Vous pouvez l'entrer dans les options de transfert lorsque vous entrez les autres informations, ou le laisser blanc. Si vous laissez le champ Utilisateur vide, Freeway vous demandera de l'entrer dans un deuxième dialogue la première fois que vous utiliserez la commande Transférer... lors de chaque session de travail, ce nom d'utilisateur ne sera pas enregistré dans le document. Si vous entrez le nom d'utilisateur dans la première fenêtre, Freeway le mémorisera et le réutilisera puisqu'il sera enregistré dans votre document. Habituellement, il est conseillé d'entrer ces options de transfert dans le premier dialogue. Note : le nom d'utilisateur peut aussi être appelé login, user id et login name en Anglais. Mot de passe Vous devez également entrer un mot de passe avant que Freeway puisse transférer votre site, mais (comme pour le nom d'utilisateur) vous avez la possibilité de l'entrer dans les options de transfert ou de laisser le champ vide. Si vous entrez le mot de passe dans les options de transfert, Freeway le mémorisera et pourra le réutiliser puisqu'il sera enregistré dans le document (il sera crypté dans le fichier pour des raisons de sécurité). C'est moins sûr car toute personne ayant accès à votre document pourra modifier votre site web à Transférer le site 293 l'aide de la commande Transférer.... Si vous laissez le champ Mot de passe vide, Freeway vous demandera de l'entrer dans un second dialogue chaque fois que vous utiliserez la commande Transférer.... Ce mot de passe ne sera jamais enregistré. Mode FTP passif C'est une option FTP qui peut accélérer le transfert des fichiers avec certains serveurs (tous les serveurs ne gèrent pas cette option). En général, il est conseillé de ne pas l'utiliser. Enregistrer Log FTP Cela crée un fichier FTP log dans le dossier contenant Freeway. C'est un fichier texte, qui peut avoir une taille assez importante. A moins que vous ne souhaitiez conserver un historique des transferts FTP réalisés par Freeway, vous ne devez pas activer cette option. Si vous rencontrez des problèmes lors des transferts FTP, le support technique de Freeway pourra vous demander une copie de ce fichier. Script Dans certaines situations très rares, votre hébergeur peut vous demander d'entrer certaines commandes FTP pour pouvoir accéder à votre espace web. Le script de connexion contient les commandes FTP qui sont envoyées au serveur après que Freeway ait établi la connexion en utilisant le nom d'utilisateur et le mot de passe. Cela vous permet d'envoyer des commandes de connexion spécifiques à votre serveur (telles que ACCT pour indiquer un compte FTP). Dans ce script de connexion, chaque commande FTP doit être sur une ligne séparée, la ligne suivante doit indiquer un ou plusieurs codes de réponse que le serveur FTP peut retourner lorsque la commande a été exécutée avec succès. Par exemple : site groupe test1 200 201 Ce script envoie la commande "site group test1" puis attend que le serveur réponde "200" ou "201" pour indiquer que la commande a été exécutée avec succès. Si le serveur renvoie un code différent, il sera interprété comme une erreur et la connexion avec le serveur sera interrompue. Les commandes FTP peuvent aussi inclure les expressions <input> ou <password> qui demandent à Freeway d'afficher un dialogue pour permettre à l'utilisateur d'entrer une valeur. Par exemple : site group <input> 200 201 Ce script provoque l'affichage d'un dialogue demandant à l'utilisateur d'entrer le texte qui doit être envoyé après "site group". Si le script contient <password> 294 Transférer le site au lieu de <input>, cela produit le même effet, sauf que la saisie du texte sera masquée et l'écran et dans le ficher d'historique. Seule une expression <input> ou <password> peut être incluse par commande. Le script complet ne peut pas utiliser plus de huit fois ces expressions. Options de transfert pour la copie des fichiers Les options requises pour la copie de fichiers sont plus simples que pour le FTP car ce transfert copie simplement les fichiers du site vers un dossier sur un disque local ou sur un serveur qui se trouve sur le réseau local. Chemin Freeway a besoin de connaître l'emplacement du dossier destination dans lequel il doit transférer le site. Cliquez sur le bouton Chemin... pour sélectionnez le dossier que vous souhaitez utiliser comme destination pour le transfert. S'il se trouve sur un serveur, vérifiez que ce volume est monté avant d'essayer de le sélectionner. Cliquez sur le bouton Choisir pour sélectionner le dossier souhaité. Transférer le site Pour transférer votre site 1 Sélectionnez Transférer... dans le menu Fichier. Si vous n'avez pas déjà défini le dossier du site, Freeway vous demandera de le sélectionner ou de le créer. 2 Ensuite, Freeway affichera le dialogue Transfert qui contient déjà les informations entrées dans la partie Transfert du dialogue Réglages du document. Si nécessaire, entrez ou modifiez les informations affichées. 3 Cliquez sur OK pour débuter le transfert. Freeway va d'abord publier le site dans le dossier du site pour le mettre à jour avec les dernières modifications apportées au document. 4 Avant de débuter le transfert, Freeway vous demandera le nom d'utilisateur et le mot de passe si vous ne les avez pas indiqués dans le dialogue Réglages du document ou Transfert. En entrant votre nom et votre mot de passe à cette étape, le nom d'utilisateur sera mémorisé pendant toute votre Transférer le site 295 séance de travail dans Freeway mais il vous demandera à nouveau le mot de passe lors de chaque connexion. 5 Ensuite, Freeway comparera les fichiers qui se trouvent dans la destination du transfert avec ceux qui se trouvent dans le dossier du site puis il enverra les fichiers modifiés. Il fera aussi le nettoyage nécessaire pour supprimer les anciens fichiers ou les dossiers qui ne sont plus utilisés. Comment les fichiers sont transférés Pendant le transfert, Freeway affiche une fenêtre indiquant la progression du transfert ainsi que le nombre de fichiers restant à transférer. Vous pouvez interrompre le transfert à tout moment en cliquant sur le bouton Stop de cette fenêtre. Lorsque le transfert est en cours, vous pouvez continuer à travailler dans Freeway ou dans d'autres logiciels. Durant le transfert, Freeway copie tous les fichiers modifiés depuis le dernier transfert du site et supprime tous les fichiers qui ne sont plus nécessaires. Les fichiers sont également transférés s'ils ont été supprimés sur le serveur ou si leur date ou taille ne correspond pas à ceux se trouvant sur le serveur. Les fichiers ne sont pas transférés s'ils n'ont pas été modifiés. Le transfert des fichiers est effectué en tâche de fond et la fenêtre de transfert restera ouverte même si vous avez d'autres fenêtres par dessus. Vous pouvez continuer à modifier le document en cours de transfert, travailler sur un autre document ou passer dans un autre logiciel. Vous ne pouvez pas publier un document lorsqu'il est en cours de transfert (la commande Publier le site est désactivée), mais vous pouvez prévisualiser les pages si elles n'ont pas été modifiées depuis le début du transfert (la commande Prévisualiser est désactivée pour la page ayant été modifiées). La fenêtre de progression indique le nombre de fichiers restant à traiter (c'est à dire le nombre de fichiers à comparer qu'il faudra peut être transférer sur le serveur) ainsi qu'une barre de progression et un texte décrivant l'action en cours. Plusieurs sites peuvent être transférés simultanément. Si cette fenêtre est cachée par une autre fenêtre (par exemple, la fenêtre d'un document), elle peut être ramenée au premier plan en la sélectionnant dans le menu Fenêtre, où les fenêtres de progression sont affichées dans une section séparée. La fenêtre de progression du document actuel peut aussi être ramenée au devant de l'écran en sélectionnant Transférer... dans le menu Fichier lorsque le site est en cours de transfert. Un document en cours de transfert ne peut pas être fermé accidentellement dans Freeway. Si vous essayez de le fermer, Freeway affichera un message vous demandant si vous souhaitez abandonner le transfert. Des messages similaires sont affichés si vous essayez de quitter Freeway pendant qu'un site est en cours de transfert ou si d'autres messages sont encore affichés. 296 Transférer le site Annuler un transfert Le transfert peut être interrompu en cliquant sur le bouton Stop de la fenêtre de progression ou en appuyant sur la touche Escape lorsque la fenêtre de progression est au premier plan. Erreurs en cours de transfert Si une erreur se produit pendant le transfert d'un site, Freeway affichera un message d'erreur dans la fenêtre de progression puis la fera passer au premier plan si elle n'y est pas déjà. Si Freeway n'est pas l'application de premier plan, le son d'erreur sera joué et l'icône de Freeway clignotera dans le menu Application. Informations FTP sur quelques hébergeurs populaires Les exemples suivants montrent quels types de renseignements votre hébergeur doit vous fournir. Il y a de nombreux hébergeurs, en voici quelques uns. Les informations concernant votre hébergeur sont disponibles sur son site web ou chez son support technique. AOL Serveur : members.aol.com Répertoire : (laissez vide) Utilisateur : ftp Mot de passe : votre adresse e-mail (par exemple, [email protected]) Vous devez être connecté avec AOL pour envoyer votre site, vous ne pouvez pas le faire depuis un autre fournisseur d'accès Internet. Note : Avec AOL, vous devez utiliser des noms de fichiers alphanumériques dans Freeway (voir Nom des fichiers) car certains caractères, comme les guillemets ou les espaces, ne sont pas autorisés sur les serveurs AOL. Yahoo / Geocities Serveur : ftp.geocities.com Répertoire : (laissez vide) Utilisateur : votre nom de membre Geocities Mot de passe : votre mot de passe Geocities Pour plus d'information, consultez http://geocities.yahoo.com/ Angelfire Serveur : ftp.angelfire.com Répertoire : / Utilisateur : votre catégorie / votre nom (par exemple, "games/pierre.dupont") Mot de passe : votre mot de passe Transférer le site 297 Note :Lorsque vous créez un site chez Angelfire, vous devez choisir une catégorie pour votre site site (par exemple, games) qui sera utilisée dans le champ Utilisateur. EarthLink Serveur : ftp-www.earthlink.net Répertoire :(laissez vide) Utilisateur : votre nom d'utilisateur FTP Mot de passe : votre mot de passe FTP Pour plus d'information, consultez http://support.earthlink.net/ Messages d'erreur pendant le transfert Les erreurs suivantes peuvent se produire pendant un transfert FTP : 1 Impossible de se connecter car le nom de serveur FTP est invalide Le nom du serveur FTP n'est pas un nom de domaine ou une adresse IP valide. Vérifiez que le nom du serveur est correct dans le dialogue Réglages du document ou Transfert. 2 Impossible de se connecter car le nom de serveur FTP ne peut être résolu Freeway n'a pas pu se connecter au serveur FTP. Vérifiez que le nom du serveur est correct dans le dialogue Réglages du document ou Transfert. Cela peut aussi signifier qu'il y a un problème plus général avec les réglages TCP/IP de votre ordinateur. Pour vérifier que vos réglages TCP/IP fonctionnent correctement, vous pouvez essayer d'envoyer un e-mail, par exemple. Vérifiez aussi que vous êtes bien connecté chez le bon fournisseur d'accès Internet. 3 Impossible de se connecter car votre nom d'utilisateur n'a pas été reconnu Le serveur FTP n'a pas reconnu votre nom d'utilisateur. Vérifiez qu'il est correct dans le dialogue Réglages du document ou Transfert. Vérifiez aussi que vous êtes bien connecté sur le bon serveur FTP. 4 Impossible de se connecter car votre mot de passe ou votre nom est incorrect Le serveur FTP n'a pas accepté votre mot de passe. Vérifiez que votre nom d'utilisateur et que votre mot de passe sont corrects dans le dialogue Réglages du document ou Transfert. 5 Impossible de terminer le transfert car le serveur n'a pu ouvrir une connexion passive (PASV) 298 Transférer le site Le serveur FTP ne gère probablement pas les connexions passives. Décochez la case Connexion passive (PASV) dans le dialogue Réglages du document ou Transfert puis essayez à nouveau. 6 Impossible de... car le nom de fichier (ou dossier) n'est pas accepté Un nom de fichier ou de dossier comporte des caractères qui ne sont pas autorisés par le serveur FTP. Vous devriez sélectionnez des noms de fichiers alphanumériques dans le dialogue Réglages du document ou Transfert. Certains noms de dossiers ne peuvent pas être utilisés sur les serveurs Windows NT car ils sont réservés pour des périphériques systèmes (tels que "CON" et "DEV"). 7 Impossible de... car vous avez dépassé votre place de stockage FTP allouée Le serveur FTP ne vous autorisera plus à transférer des fichiers car vous avez dépassé la capacité qui vous était allouée sur le disque. Vous pouvez soit utiliser un client FTP (comme Interarchie) pour supprimer certains fichiers inutiles soit demander à votre hébergeur de vous accorder plus d'espace disque. 8 Impossible de... car le serveur FTP n'a pas une place de stockage suffisante Les disques durs du serveur FTP sont pleins. Contactez votre hébergeur pour savoir s'il y a un problème. 9 Impossible de... car il y a une erreur FTP Une erreur FTP s'est produite pendant la manipulation d'un fichier ou d'un dossier. Vérifiez que le répertoire FTP dans le dialogue Réglages du document ou Transfert est correct. Il y a peut être aussi un problème avec le serveur FTP, vous pouvez attendre dix minutes puis essayer à nouveau. Si le problème se produit sur un fichier ou dossier particulier (indiqué dans la fenêtre de progression), il se peut que vous n'ayez pas les droits nécessaires (sur le serveur FTP) pour renommer ou supprimer ce fichier ou dossier. Vérifiez avec votre hébergeur, votre compte n'a peut être pas été créé correctement, ou vous ne vous êtes pas connecté au bon serveur. 10 Impossible de terminer le transfert car il y a une erreur TCP Une erreur TCP/IP s'est produite. Vérifiez vos réglages dans les tableaux de bord "TCP/IP" et Modem. Vérifiez que vous êtes connecté à Internet. Logiciels FTP spécialisés La fonction de transfert FTP incluse dans Freeway propose tout ce qui est nécessaire pour transférer votre site sur un serveur web, manipuler les fichiers et supprimer ceux devenus inutiles. Cependant, il y a certaines choses que vous aurez peut être besoin de faire avec un logiciel FTP spécialisé. Freeway ne supprimera pas les fichiers qui se trouvaient précédemment sur le serveur FTP, il les écrasera uniquement si nécessaire. En effet, il se peut que vous ayez transféré des pages sur le serveur à partir d'un autre document Transférer le site 299 Freeway ou que quelqu'un d'autre ait modifié les fichiers. Lorsque vous transférez un document Freeway, les seuls fichiers qui seront supprimés sont ceux qui ont été générés par ce document Freeway. Vous devrez utiliser un autre logiciel si vous souhaitez complètement supprimer tous les fichiers du site ou si vous souhaitez supprimer un ancien site. Lorsque vous transférez votre site, si vous souhaitez le transférer vers un dossier qui n'existe pas encore, vous devrez utiliser un logiciel comme Anarchie (ou Interarchie) ou Fetch pour créer d'abord ce répertoire sur le serveur FTP. Vous voudrez peut être faire cela si vous voulez transférer le site pour quelqu'un d'autre dans un dossier à l'intérieur de votre site ou si vous souhaitez tester un site sans remplacer votre site actuel. Anarchie et Fetch sont disponibles sur Internet en tant que sharewares, vous pouvez les télécharger sur des sites tels que http://download.com/. La première étape consiste à vous connecter sur le serveur en utilisant le logiciel de votre choix. Ouvrez le logiciel puis entrez les informations utilisées pour les transferts dans Freeway. Dans la version anglaise d'Anarchie, vous devez sélectionner Get via FTP dans le menu File pour entrer les informations puis cliquer sur List. Dans la version anglaise de Fetch, vous devez sélectionnez New Connection dans le menu File puis entrer les informations et cliquer sur OK. Supprimer des fichiers Une fenêtre affichant le contenu du dossier sur le serveur s'affiche. Cliquez sur les fichiers à supprimer, ou utilisez Select all. Puis sélectionnez Delete ou Delete directory or file dans le menu Remote. Créer un dossier ou répertoire Dans Anarchie, sélectionnez New Directory dans le menu Remote puis entrez le nom du nouveau dossier. Dans Fetch, sélectionnez Create new directory dans le menu Directories. Vous aurez peut être besoin d'utiliser Anarchie ou Fetch si vous avez besoin d'envoyer des fichiers qui ne sont pas automatiquement transférés par Freeway, par exemple des fichiers utilisés par des applets Java, ou un script à utiliser sur le site. Pour cela, vous devez vous connecter sur le serveur FTP comme expliqué précédemment puis glisser les fichiers dans la fenêtre pour les transférer. Note : Dans Fetch, pensez à vérifier les préférences de transfert avant de transférer un fichier. Pour cela, sélectionnez Preferences dans le menu Customize. Affichez le panneau Upload puis vérifiez que le menu Default nontexte est réglé sur Raw data et non pas sur MacBinary. Si vous transférez vos fichiers en MacBinary, il seront transférés dans un nouveau format et ils seront renommés donc ils ne fonctionneront peut être pas. Cette option n'est utilisable que pour transférer des logiciels Mac téléchargeables par d'autres personnes. 300 Gérer votre site Gérer votre site La gestion du site ne consiste pas seulement à le créer et à le transférer. L'un des avantages du web, par rapport à l'impression traditionnelle sur papier, est la facilité avec laquelle les informations peuvent être mises à jour. De nombreux sites sont mis à jour quotidiennement. Des mises à jour régulières encouragent les visiteurs à revenir sur votre site. Utilisez la page d'accueil pour mettre en valeur les nouvelles informations et les nouvelles zones. Les visiteurs réguliers apprécient de voir des nouveautés lorsqu'ils reviennent sur votre site. Lorsque vous modifiez votre document pour ajouter de nouvelles informations et que vous utilisez les commandes Prévisualiser, Publier ou Transférer, Freeway envoie uniquement les fichiers modifiés depuis la dernière publication du site. Fragmenter vos documents Freeway Dans certaines situations, il peut être utile de fragmenter votre site en plusieurs documents. Par exemple si vous voulez déplacer une partie du site vers un serveur web différent (par exemple, si vous utilisez un serveur spécial pour la section Ventes de votre site) ou si différentes personnes doivent travailler simultanément. C'est exactement la même démarche que la fragmentation d'un livre PageMaker ou la fragmentation d'un fichier QuarkXPress en documents séparés pour chaque chapitre. Comment fragmenter un document Freeway Idéalement, la fragmentation du site devrait être prévue lorsque vous commencez à travailler sur le site. Vous devez prévoir le développement de votre site en terme de travail et d'organisation. Si après avoir créé un document Freeway, vous souhaitez le fragmenter, cela soulève un certain nombre de questions. Quelles sont les grandes parties du site (par exemple, Vente, Support et Contact), quelles parties doivent être séparées du document principal pour faciliter leur mise à jour (par exemple, une partie Communiqués de Presse ou Actualité) ? Pour fragmenter votre site, commencez par en créer une copie en sélectionnant Enregistrer sous dans le menu Fichier. Après avoir effectué la copie, vous pouvez supprimer les pages qui ne sont pas nécessaires dans chaque document. Lorsque vous supprimerez une page, Freeway vous proposera de remplacer les liens vers les pages supprimées par des liens avec des adresses relatives pour vous éviter de les rentrer plus tard manuellement. Il est conseillé de fragmenter le document Freeway de telle sorte que chaque document contienne les fichiers d'un dossier précis du site. Par exemple, si vous avez une partie Ventes et une partie Support, vous pourrez fragmenter le site pour que chaque partie corresponde à un dossier. Gérer votre site 301 Commencez par créer deux nouveaux dossiers dans Freeway pour les ventes et le support en sélectionnant Nouveau dossier dans le menu de la palette Site. Ensuite, sélectionnez les pages de la partie Ventes dans la palette Site en cliquant sur leurs noms avec la touche Majuscule enfoncée puis glissez-les dans le dossier Ventes. De même, glissez les pages de la partie Support dans le dossier Support. Cela permettra à Freeway de recréer facilement les liens entre les deux parties du site. Utilisez la commande Enregistrer sous... pour créer une copie du document pour la partie Ventes et une deuxième copie pour la partie Support. Ouvrez dans Freeway le document correspondant à la partie Support puis supprimez les pages qui n'appartiennent pas à cette partie (c'est à dire les pages de la partie Ventes et les pages de la partie principale). Freeway vous demandera si vous souhaitez supprimer les liens vers ces pages ou utiliser de nouvelles adresses relatives pour ces pages. Cliquez sur le bouton pour utiliser les adresses relatives. Freeway supposera que les dossiers et les pages resteront aux mêmes positions que dans l'ancienne structure du document. Supprimez ensuite les pages inutiles dans le document Ventes et dans le document principal. Lorsque plusieurs fichiers constituent votre site web, vous devrez créer des liens entre eux. Vous ne pourrez pas utiliser les liens internes vers les pages qui sont contenues dans les autres document Freeway. Vous devrez utiliser des adresses relatives. Une adresse relative permet d'indiquer la position d'une page dans le même site, par rapport à la page actuelle. On appelle cela une adresse relative car elle indique la position de la page de destination relativement à la position de la page actuelle. Pour plus d'information, consultez Liens vers des pages externes. Créer des liens relatifs Sélectionnez le texte ou le bloc que vous souhaitez transformer en lien puis sélectionnez Lien vers... dans le menu Edition. Entrez une adresse relative dans le champ URL du dialogue Edition du lien (effacez le texte "http://" si c'est un nouveau lien). Dans ce dialogue, vous entrez le nom du fichier HTML vers lequel vous souhaitez créer le lien Le nom du fichier est affiché dans l'onglet Page de la palette Spécifications de la page concernée. Si le fichier vers lequel vous souhaitez créer le lien se trouve dans le même dossier que la page de départ, entrez juste son nom. Par exemple, si vous souhaitez créer un lien vers une page nommée "Page d'accueil Entreprise" dont le fichier s'appelle "index.html", vous devrez entrer "index.html" dans le champ URL. Si le fichier vers lequel vous souhaitez créer le lien se trouve dans un dossier à l'intérieur du dossier qui contient la page de départ, vous devrez indiquer le nom du dossier avant le nom de la page. L'exemple ci-dessous montre un dossier appelé "nouveausite" qui contient la page d'accueil (index.html) et de deux dossier ventes et support. Si vous souhaitez créer un lien à partir de la page d'accueil vers une page nommée "offres.html" située à l'intérieur du dossier ventes, vous devrez taper "ventes/offres.html". 302 Gérer votre site Si le fichier vers lequel vous souhaitez créer le lien se trouve dans un dossier qui contient la page de départ, vous devrez ajouter deux points et un slash "../" (cela signifie "remonter au dossier parent"). Par exemple, si vous souhaitez créer un lien à partir d'une page située dans le dossier ventes vers la page d'accueil du dossier parent, vous devrez taper "../index.html". Si le fichier vers lequel vous souhaitez créer le lien se trouve dans un dossier qui est dans le même dossier que le dossier contenant la page de départ, vous devrez indiquer "../" suivi du nom du dossier. Par exemple, si vous souhaitez créer un lien à partir d'une page située dans le dossier ventes vers une page nommée "faq.html" qui se trouve dans le dossier support, vous devrez taper "../support/faq.html". Généralement, vous devez éviter d'utiliser ce genre de liens autant que possible car ils sont plus difficiles à gérer que les liens internes dans un même document Freeway. Pour éviter d'utiliser trop de liens de ce type, vérifiez que votre site est organisé de telle sorte qu'il n'y ait qu'un seul moyen d'entrer dans la section ventes et que la plupart des liens à l'intérieur de cette section pointent vers d'autres pages situées dans le document ventes. Cela réduit le nombre de liens que vous devrez vérifier et entrer manuellement. Cela facilite aussi la navigation sur votre site, par exemple si quelqu'un veut des informations sur les ventes, il pourra trouver les informations qu'il recherche dans une seule partie du site, sans avoir besoin de passer dans les différentes sections du site web. La commande Liste des URLs du menu Edition vous permet de gérer ces liens et d'effectuer des modifications globales. Vous pouvez également utiliser l'onglet Liens de la fenêtre du document. Avant d'effectuer un changement aussi important pour votre site web, il est conseillé de conserver une copie de votre document Freeway, cela pourra être utile si vous supprimez quelque chose par erreur. C'est aussi une bonne idée de créer des petits documents de test pour vous entraîner à créer des liens entre ces document pour que vous compreniez bien comment cela fonctionne. Meta Tags et moteurs de recherche 303 Meta Tags et moteurs de recherche Utiliser des Meta Tags Bien qu'ils soient invisibles pour les visiteurs du site, les Meta Tags jouent une rôle important dans l'efficacité de votre site. Les Meta Tags permettent principalement de faciliter la découverte de votre site aux visiteurs potentiels en leur donnant des informations sur votre site et ce qu'il peut leur apporter. Sans Meta Tags corrects pour aider les moteurs de recherche à amener des visiteurs sur votre site, l'impact de votre site sera considérablement réduit, même s'il est bien conçu et si son contenu est intéressant. Les Meta Tags ajoutés à une page HTML ne sont pas visibles lorsque la page est affichée dans un navigateur, mais ils peuvent être vus lors de l'affichage du code HTML de la page. Si vous découvrez la conception de sites web, il est conseillé de visiter des sites similaires à celui que vous êtes en train de créer pour regarder leur code HTML afin de voir s'il contient des Meta Tags. Vous découvrirez que les sites qui ont du succès ainsi que ceux conçus par des créateurs professionnels possèdent des Meta Tags correctement spécifiés tandis que ceux créés par des débutants n'en ont pas. Plusieurs utilisations des Meta Tags sont possibles, voici les plus communes : • Décrire le contenu de la page • Donner une liste de mots clés pour cette page • Enregistrer le nom de l'auteur du site • Enregistrer le nom du logiciel utilisé pour créer le site • Charger automatiquement une autre page Les utilisations les plus importantes sont les deux premières, ce sont la description et la liste des mots clés qui ont le plus d'effet sur les moteurs de recherche pour enregistrer correctement votre site et le retrouver en réponse aux requêtes des visiteurs de moteur de recherche.. Pensez à définir correctement les Meta Tags de description et de mots clés pour la page d'accueil de votre site, pour bénéficier au mieux des moteurs de recherche. Devez-vous mettre des Meta Tags sur chaque page ? Tout le monde n'est pas d'accord pour dire que c'est une bonne chose d'ajouter une description et des mots clés sur chaque page de votre site. Il est probablement préférable de ne les définir que pour la page d'accueil du site. La raison étant que, une fois que votre site est terminé et qu'il a été indexé par 304 Meta Tags et moteurs de recherche différents moteurs de recherche, les références vers votre site seront nombreuses et cela limitera beaucoup vos possibilités de le modifier. Cela devient un problème si ensuite vous souhaitez déplacer ou renommer des pages référencées à l'extérieur, car les liens vers vos pages seront brisés et ça sera beaucoup plus difficile pour les personnes d'accéder à votre site. La seule page qui restera toujours à la même place et dont le titre ne changera probablement pas est la page d'accueil. Une autre raison est qu'habituellement, vous préférez que les visiteurs arrivent sur votre site par la page d'accueil pour leur permettre de voir les nouvelles informations ajoutées depuis leur dernière visite. Comment ajouter des Meta Tags dans Freeway ? Vous pouvez ajouter des Meta Tags aux pages dans Freeway en utilisant la commande Meta Tags (Balises Meta) dans le menu Page. Si vous souhaitez qu'un Meta Tag particulier apparaisse sur plusieurs pages, vous pouvez ajouter des Meta Tags aux maquettes. Voici un exemple de Meta Tag : <META NAME="GENERATOR" CONTENT="Freeway Pro 3.5"> Par défaut, cette balise est ajoutée à toute page générée par Freeway. Lorsque vous utilisez la commande Meta Tags (Balises Meta) dans Freeway, elle affiche le dialogue Meta Tags qui est composé de deux parties : Variables système et Variables utilisateur. Vous pouvez ajouter de nouvelles balises en utilisant les boutons Ajouter, Effacer et Editer affichés à côté de chaque partie. Créer un nouveau Meta Tag Pour ajouter un nouveau Meta Tag dans une page : 1 Sélectionnez Meta Tags (Balises Meta) dans le menu Page. 2 Cliquez sur le bouton Ajouter pour ajouter un nouvelle balise dans les parties Variables système ou Variables utilisateur (normalement, vous devez entrer les balises dans la partie Variables utilisateur). Le dialogue Meta Tags et moteurs de recherche 305 Edition Nom/Valeur s'affiche pour vous permettre d'entrer le couple Nom/Valeur. 3 Entrez le texte que vous souhaitez faire apparaître après NAME ou HTTPEQUIV dans le champ Nom. 4 Entrez le texte que vous souhaitez faire apparaître après CONTENT dans le champ Valeur. 5 Cliquez sur OK pour revenir au dialogue Meta Tags. 6 Cliquez sur Ajouter pour ajouter un nouvelle balise ou cliquez sur OK pour enregistrer les modifications. 7 La prochaine fois que vous prévisualiserez ou publierez le site, les balises que vous venez de définir seront ajoutées dans le code HTML de cette page. Ajouter des mots clés pour une page Pour ajouter des mots clés sur une page : 1 Affichez la page sur laquelle vous souhaitez ajouter les mots clés. 2 Sélectionnez Meta Tags (Balises Meta) dans le menu Page. 3 Cliquez sur le bouton Ajouter pour définir une nouvelle variable utilisateur. 4 Dans le champ Nom, entrez "KEYWORDS". 5 Dans le champ Valeur, entrez des mots clés pertinents en les séparant par des virgules et des espaces. 6 Cliquez sur OK pour revenir au dialogue Meta Tags. 7 La prochaine fois que vous prévisualiserez ou publierez le site, la balise que vous venez de définir sera ajoutée dans le code HTML de cette page. Par exemple : <META NAME="KEYWORDS" CONTENT="Freeway, Web, Design, Software"> Ajouter une description pour une page Lorsque les moteurs de recherche affichent une liste de sites trouvés en relation avec les critères entrés par l'utilisateur, ils proposent souvent une option pour afficher une description du contenu de ces sites. Si vous avez défini un Meta Tag "DESCRIPTION", son contenu sera utilisé pour décrire votre site dans la liste des pages trouvées. Si vous n'avez pas défini de Meta Tag DESCRIPTION, soit rien ne sera affiché en dessous de l'URL et du titre de votre site dans la liste des pages trouvées, soit les premières phrases de la page seront affichées. Pour ajouter une description sur une page : 1 Affichez la page sur laquelle vous souhaitez ajouter les mots clés. 2 Sélectionnez Meta Tags (Balises Meta) dans le menu Page. Meta Tags et moteurs de recherche 306 3 Cliquez sur le bouton Ajouter pour définir une nouvelle variable utilisateur. 4 Dans le champ Nom, entrez "DESCRIPTION". 5 Dans le champ Valeur, entrez la description de la page. 6 Cliquez sur OK pour revenir au dialogue Meta Tags. 7 La prochaine fois que vous prévisualiserez ou publierez le site, la balise que vous venez de définir sera ajoutée dans le code HTML de cette page. Par exemple : <META NAME="DESCRIPTION" CONTENT="SoftPress Systems, créateurs de Freeway - l'éditeur de sites web pour les créateurs"> Charger automatiquement une autre page En utilisant le Meta Tag "REFRESH", vous pouvez provoquez le rafraîchissement automatique de la page au delà d'un certain délai. En indiquant une URL dans ce Meta Tag, vous pourrez charger une nouvelle page automatiquement. Cette balise est fréquemment utilisée lorsqu'une page ou lorsqu'un site très connu a changé d'adresse. Habituellement, une page spéciale est laissée à l'ancienne dresse pour informer les visiteurs du changement d'adresse et leur demander de mettre à jour leurs signets. Elle peut aussi être utilisée pour rediriger automatiquement le visiteur vers une nouvelle page après un délai pré-défini. Cette technique de redirection peut aussi être utilisée pour créer un effet : lorsque le visiteur arrive sur le site, une page d'accueil est affichée pendant quelques secondes puis la page principale du site est automatiquement affichée. La méthode la plus simple pour utiliser une redirection dans Freeway consiste à utiliser une action Freeway (voir Timed Redirect) mais cette méthode fonctionne aussi : 1 Affichez la page sur laquelle vous souhaitez ajouter les mots clés. 2 Sélectionnez Meta Tags (Balises Meta) dans le menu Page. 3 Cliquez sur le bouton Ajouter pour définir une nouvelle variable système (elles utilisent la syntaxe HTTP-EQUIV au lieu NAME). 4 Dans le champ Nom, entrez "REFRESH". 5 Dans le champ Valeur, entrez l'exemple qui suit en remplaçant "5" par un autre délai en secondes et en remplaçant "page2.html" par l'adresse de la page vers laquelle vous souhaitez rediriger le visiteur : 5;URL=page2.html 5 Cliquez sur OK pour revenir au dialogue Meta Tags puis cliquez à nouveau sur OK. Meta Tags et moteurs de recherche 6 307 La prochaine fois que vous prévisualiserez ou publierez le site, la balise que vous venez de définir sera ajoutée dans le code HTML de cette page. Par exemple : <META HTTP-EQUIV="REFRESH" CONTENT="5;URL=page2.html"> Plus d'information sur les Meta Tags Il peut être très utile d'en apprendre plus sur les Meta Tags, leur origine et leur utilisation. L'une des sources d'information les plus intéressantes est http://vancouver-Webpages.com/META Les moteurs de recherche : se faire connaître sur le web Face à l'expansion sans limite du web, les moteurs de recherche jouent un rôle important pour amener les visiteurs vers votre site. En fait, en dehors d'autres méthodes comme des publicités coûteuses, les moteurs de recherche sont la principale source qui permettra d'augmenter la fréquentation de votre site. Ce petit guide vous explique comment construire un site pour tirer parti des moteurs de recherche ainsi que quelques conseils ou astuces pour faire référencer votre site efficacement. Les trois points importants sont : • Les Meta Tags • Le contenu des pages • L'inscription aux moteurs de recherche Ajouter des Meta Tags D'abord nous allons parler de l'ajout des Meta Tags. Pour rendre votre page compréhensible par les moteurs de recherche, vous devez lui ajouter deux balises : • DESCRIPTION • KEYWORDS. Ces deux balises sont utilisées par la plupart des moteurs de recherche pour évaluer le contenu de votre site. Pour les ajouter, sélectionnez simplement Meta Tags (Balises Meta) dans le menu Page. Par exemple, si vous vendez des voitures, vous devrez écrire des balises DESCRIPTION et KEYWORDS comme celles-ci : <META NAME="DESCRIPTION" CONTENT="Vendeur de Voitures audi, saab et autre."> <META NAME="KEYWORDS" CONTENT="voiture, vendeur de voitures, audi, saab, etc..."> 308 Meta Tags et moteurs de recherche Lorsqu'un moteur de recherche arrive sur une page web, il utilise la balise DESCRIPTION pour déterminer le sujet du site et la balise KEYWORDS pour le faire correspondre avec les mots clés entrés par la personne qui utilise le moteur de recherche. Si quelqu'un effectue une recherche sur "vendeur de voitures", le moteur de recherche affichera votre site parmi les réponses. Cependant, la position de votre site dans la liste des résultats est un autre problème qui mérite d'être pris en considération. Améliorer votre classement Pour obtenir un meilleur classement dans un moteur de recherche, vous devez choisir un titre efficace pour votre page (voir Les titres des pages et les noms des fichiers) avec des balises KEYWORDS et DESCRIPTION correctement construites. Pour rendre une balise efficace, vous devez utiliser quelques techniques qui fonctionnent avec tous les moteurs de recherche. Par exemple, imaginons que vous vendez des voitures en France. Vous devrez construire les balises comme cela : Titre de la page : "Vendeur de Voitures en France pour Audi, Saab, Volvo et autre". Balise description : "Vendeur de Voitures en France pour Audi, Saab, Volvo, Rover, Ford et de nombreuses autres marques ou modèles". Balise mots clés : "Vendeur de Voitures, France, audi, saab, volvo, rover, ford, renault, bmw, voitures en france, etc...". Consultez Utiliser des Meta Tags pour plus d'information. Contenu de la page Remarquez que nous utilisons les mêmes phrases pour le titre et les deux Meta Tags de l'exemple. C'est utile car lorsque le moteur de recherche consultera ces balises, il notera ces mots et les considérera comme importants lors d'une recherche particulière. L'autre point à noter est que, si le contenu de la page ne contient pas l'expression "Vendeur de Voitures en France", alors le moteur de recherche accordera moins d'importance à votre site qu'aux sites contenant cette expression dans leur page. Donc vous devez construire votre page en incluant cette phrase plusieurs fois mais sans donner l'impression de vouloir la répéter, les moteurs de recherche peuvent déterminer si vous essayez de les noyer en répétant plusieurs fois les mêmes mots pour obtenir un meilleur classement. Contenu sans cadres Le contenu sans cadres d'une page avec cadres (voir Contenu sans cadres) peut être utile lorsque vous soumettez une site à un moteur de recherche. Si vous utilisez un jeu de cadres, vérifiez que vous avez défini un contenu sans cadres. Vous pourrez y ajouter une description de votre site en plus des mots clés. Il peut aussi être intéressant d'indiquer aux visiteurs pourquoi ils voient cette page au lieu du site normal. Ne les laissez pas devant une page vide qui Meta Tags et moteurs de recherche 309 affiche simplement "Désolé, votre navigateur ne gère pas les cadres". Une bonne description de votre site peut être utile car les moteurs de recherche analyseront ce texte. De plus, si le contenu sans cadres comporte des liens vers les autres pages de votre site, le moteur de recherche sera peut être capable de les suivre et d'accéder au contenu de votre site. Points importants • Ne répétez pas excessivement le même mot clé dans les balises. Les moteurs de recherche ne distinguent pas les minuscules/majuscules donc si vous avez entré "vendeur de voitures", n'ajoutez pas "Vendeur de Voitures". • Essayez de limiter votre description à 150 caractères. Même si certains moteurs de recherche en tolèrent plus, beaucoup ne les accepteront pas. • Bien que certaines personnes considèrent qu'il y a une limite au nombre de répétitions possibles d'un mot, vous découvrirez que si vous choisissez vos mots avec précaution, vous ne serez pas pénalisé par les répétitions. Si vous utilisez plusieurs expressions intéressantes, vous pouvez les ajouter dans les balises mots clés. • Utilisez au maximum 950 caractères pour les mots clés. Vous ne pouvez pas en ajouter trop. • N'utilisez pas des textes invisibles sur votre page (par exemple du texte de la même couleur que le fond de la page) et ne remplissez pas la page de mots clés. Les moteurs de recherche l'ignoreraient et cela augmenterait la taille de votre page. • Essayez de soumettre une page inférieure à 100 Ko. Si la page contient beaucoup de texte et si les mots clés se trouvent à la fin de la page, il y a de fortes chances pour qu'ils soient ignorés. Le moteur de recherche risque de ne lire que le début de la page et pas réellement tout son contenu. Où référencer le site Il existe des milliers de moteurs de recherche mais comme ils ont tendance à se partager les informations, il est inutile de référencer votre site sur chacun d'entre-eux, ce serait une perte de temps. Il existe des services qui référencent votre site à votre place mais ces procédures sont automatisées donc si un moteur de recherche rencontre des problèmes au moment du référencement ou si leur fonction de référencement ne fonctionnait pas, les chances que votre site soit réellement enregistré sont faibles. La meilleure solution consiste à référencer votre site manuellement. Vous pourrez d'abord tester votre site sur quelques moteurs de recherche pour voir quels résultats vous obtenez. S'ils ne correspondent pas à ce que vous attendiez, faîtes quelques modifications puis essayez à nouveau. Développer une technique pour améliorer le classement de votre site peut être long et difficile, mais en utilisant les méthodes décrites ici, vous économiserez du temps et de l'argent à long terme. Voici les principaux moteurs de recherche et annuaires sur le web : 310 Meta Tags et moteurs de recherche Lycos : http://www.lycos.com/ Hotbot : http://www.hotbot.com/ Infoseek : http://www.infoseek.com/ Excite : http://www.excite.com/ WebCrawler : http://www.webcrawler.com/ DMOZ : http://www.dmoz.org/ Yahoo : http://www.yahoo.com/ Altavista : http://www.altavista.com/ Northern Light : http://www.northernlight.com Looksmart : http://www.looksmart.com/ Direct Hit : http://www.directhit.com/ Netfind : http://www.netfind.co.uk/ Search UK : http://www.searchuk.com/ MSN : http://search.msn.com/ UK Plus : http://www.ukplus.co.uk/ Google : http://www.google.com/ Mirago : http://www.mirago.co.uk/ Websearch : http://www.websearch.com.au/uk Voilà : http://www.voila.fr/ Nomade : http://www.nomade.fr/ Lokace : http://www.lokace.fr/ Les bases de données partagées La liste ci-dessus ne contient que quelques moteurs de recherche parmi des milliers. Mais souvenez-vous que si vous êtes référencé sur la majorité d'entreeux, vous avez de fortes chances d'être référencé par d'autres moteurs de recherche tels que Webferret, Dogpile, Metacrawler ou Infind. De nombreux moteurs de recherches et annuaires, y compris HotBot et Yahoo, utilisent la base de données d'Inktomi, donc si vous référencez votre site sur HotBot, cela augmentera votre visibilité. Sur Yahoo, lorsqu'un résultat n'est pas trouvé dans son propre annuaire, les réponses d'Inktomi sont affichées. Notez aussi que DMOZ (l'Open Directory Project) devient de plus en plus populaire. Cet annuaire, comme ceux de Yahoo et Lycos, est basé sur une vérification humaine des sites soumis, comme pour le moteur de recherche d'AOL (http://search.aol.com/) et Lycos. Décrivez réellement votre site dans ces annuaires, n'utilisez pas simplement des mots clés, vous seriez pénalisé ou probablement totalement exclus. Meta Tags et moteurs de recherche 311 Un autre point à noter est que vous devrez attendre pour que votre site apparaisse dans les moteurs de recherche. Par exemple, en septembre 1999, les sites soumis à Infoseek avaient un retard de 1 ou 2 jours. Subitement, cette période est passée à 6 semaines pour voir éventuellement son site référencé ! Lorsque vous référencez votre site sur un moteur de recherche ou un annuaire, vérifiez le temps d'attente approximatif qui est généralement indiqué dans le paragraphe Add URL de la page Help. Si le temps d'attente est estimé à deux semaines pour référencer votre site, et s'il n'apparaît pas au delà de cette période, attendez encore quelques jours puis soumettez à nouveau votre site. Si vous n'arrivez toujours pas à être référencé, allez sur la page d'aide du moteur de recherche puis envoyez un e-mail au support technique pour leur soumettre votre problème. Vous serez étonné par leur obligeance. Pour plus d'information sur les moteurs de recherche, visitez : http://www.searchenginewatch.com/ 312 Meta Tags et moteurs de recherche Notions avancées Astuces et techniques pour produire du code HTML efficace 313 Astuces et techniques pour produire du code HTML efficace Freeway est conçu pour vous aider à créer des sites web sans que vous ayez besoin de savoir comment la mise en page sera traduite en HTML dans le document. Cependant, quelques connaissances sur ce fonctionnement vous permettront de créer de meilleurs sites web. Ce chapitre explique comment diagnostiquer les problèmes de mise en page et comment optimiser le code HTML généré par Freeway : • Comment Freeway conserve la mise en page. • Les marges des navigateurs. • Pourquoi les images sont quelques fois découpées. • Les mises en pages qui peuvent se détruire. • Les blocs publiés sous la forme d'une seule image. • Utiliser la commande Mise en page HTML pour identifier les problèmes. • Réduire la taille des fichiers pour gagner en vitesse. • Utiliser la palette Site pour optimiser les pages. • Créer des tableaux imbriqués • Aligner les objets pour créer un meilleur code HTML Comment Freeway conserve la mise en page Lorsque vous créez une page web dans Freeway, vous pouvez positionner les blocs où vous le souhaitez sur la page. Pour être sûr que ces blocs seront exactement positionnés au même endroit lorsque la page sera affichée dans un navigateur, Freeway effectue un travail considérable sans vous le dire, lors de la publication de la page en fichier HTML. A moins que les blocs de la page ne soit réglés pour être exportés sous la forme de calques (voir Mise en page HTML 4.0), la mise en page est créée dans le code HTML généré à l'aide de tableaux de mise en page. Freeway met en place des colonnes et des lignes invisibles qui formeront un tableau de cases correspondant aux blocs de la page, aux espaces entre les blocs ainsi qu'aux espaces entre les blocs et les bords de la page. Pour faire une mise en page 314 Astuces et techniques pour produire du code HTML efficace avec d'autres éditeurs de sites web, vous seriez obligé de mettre en place ces tableaux vous-même, ce qui peut être compliqué et long. Dans certaines situations, lorsque ces tableaux sont affichés dans les navigateurs web, le navigateur les compresse, ce qui déforme la mise en page. Pour éviter cela, les tableaux de mise en page sont renforcés par des images invisibles. En utilisant une image GIF transparente d'un pixel de largeur, Freeway est sûr que les navigateurs ne modifieront pas les tableaux de mise en page. Cette image GIF d'un pixel de largeur est utilisée plusieurs fois dans le code HTML généré et elle est mise à la bonne échelle dans le code HTML. L'image transparente utilisée s'appelle "_clear.gif", elle est publiée dans le dossier des Ressources à côté des autres images du site. Dans de nombreux cas, ces images invisibles peuvent être remplacées par les balises <spacer> des logiciels Netscape, que Freeway utilise par défaut (sauf là où la mise en page peut se casser dans certains logiciels comme Microsoft Internet Explorer). L'une des raisons qui explique l'utilisation des balises <spacer> de Netscape au lieu des images GIF invisibles est que, quelques fois, les images transparentes apparaissent en pointillés sur les pages à cause d'un bug de certains navigateurs. Si vous préférez utiliser systématiquement des images invisibles, vous pouvez modifier l'option correspondante dans les préférences : sélectionnez Préférences... dans le menu Fichier, cliquez sur Sortie dans la liste à gauche du dialogue puis sélectionnez GIFs invisibles dans le menu Renforcements tableaux. Vous voudrez peut être faire cela si vous rencontrez des problèmes avec des blocs qui ne semblent pas positionnés correctement dans le navigateur. Les marges des navigateurs Les marges des navigateurs sont les espaces inutilisés ajoutés le long du bord gauche et du bord supérieur de la fenêtre du navigateur. Cet espace était ajouté dans Netscape 3.0 et dans les versions précédentes. Ces marges sont automatiquement créées par défaut, il n'y a aucun moyen pour modifier leur taille ou les faire disparaître. Cela signifie qu'il est impossible de positionner des blocs juste le long du bord supérieur ou du bord gauche de la fenêtre de Netscape (sauf pour les images de fond). Cependant, Microsoft Internet Explorer et Netscape 4.0 proposent des marges modifiables et le contenu peut éventuellement être affiché près du bord gauche ou supérieur. Lorsque vous créez une page avec du code HTML 3.2, Freeway utilisera par défaut des marges de 0 pixel pour vous permettre de placer des images juste le long des bords de la page. Cependant, comme cela sera ignoré par Netscape 3.0, vous pouvez utiliser des marges de 8 pixels afin que la mise en page de votre site soit identique dans tous les navigateurs. Pour cela, sélectionnez Préférences... dans le menu Fichier, cliquez sur l'icône Général puis cochez Marges navigateur (HTML 3.2). Astuces et techniques pour produire du code HTML efficace 315 La zone correspondant aux marges du navigateur est affichée dans Freeway par des lignes en pointillés le long des bords gauche et supérieur de la page. Les blocs Graphiques placés dans cette zone seront découpés. Le contenu des blocs HTML sera décalé s'il déborde sur la zone correspondant aux marges du navigateur. Si la page utilise du code HTML 4.0, les marges des navigateurs n'existeront pas. Pourquoi les images sont quelques fois découpées Dans Freeway, chaque image placée sur la page est publiée dans une case individuelle dans les tableaux de mise en page invisibles. Cependant il y a une exception : si un bloc HTML (tel qu'un bloc de texte HTML, un élément de formulaire, une image qui conserve son original ou un élément multimédia) recouvre un bloc Graphique, le bloc Graphique sera découpé par Freeway et la partie recouverte par le bloc HTML ne sera pas publiée. Chaque partie découpée sera publiée dans sa propre case dans les tableaux de mise en page. Une image peut aussi être découpée si une image qui la recouvre a été réglée pour ne pas fusionner avec les autres images (voir Images fusionnées). Vous pourrez voir cet effet en déplaçant un bloc HTML contenant du texte pour qu'il recouvre partiellement une image. La zone de l'image située derrière le bloc HTML disparaîtra pour afficher la couleur ou l'image de fond. Le reste de l'image sera découpé horizontalement le long du haut et du bas du bloc HTML. Lorsque l'image sera publiée, les morceaux de l'image seront nommés individuellement, habituellement en utilisant le titre de l'image suivi des lettres a, b, c, etc... Les images découpées peuvent provoquer des problèmes de mise en page, comme indiqué dans le paragraphe suivant. 316 Astuces et techniques pour produire du code HTML efficace Les mises en pages qui peuvent se détruire Vous découvrirez peut être que vous avez créé une mise en page qui se casse lorsque la page sera affichée dans un navigateur dans certaines circonstances. Cela peut se produire lorsque la page est affichée sur un PC fonctionnant avec Windows ou lorsque le navigateur utilisé par le visiteur est réglé pour utiliser des polices plus grandes qu'habituellement. Ces problèmes sont généralement causés par des images qui sont découpées à cause d'un bloc HTML qui les couvre. Si le contenu du bloc HTML devient plus large que la case dans le tableau de mise en page qui le contient, la case du tableau de mise en page s'agrandira verticalement et les parties découpées de l'image seront repoussées plus loin. Cela peut aussi se produire lorsque des éléments de formulaire, tels que des boutons ou des champs, sont placés sur des images car ils sont souvent affichés avec des tailles différentes dans les différents navigateurs. Pour essayer de conserver ensemble les différentes partie d'une image découpée lorsque des cases adjacentes s'agrandissent, les commandes d'alignement en HTML sont utilisées pour placer chaque image le long du bord de sa case, afin que les parties adjacentes d'une image restent ensemble si les cases deviennent plus grandes que les images elles-mêmes. Il peut y avoir un problème lorsque trois morceaux sont placés dans la même ligne : les deux extrémités peuvent être alignées pour se rapprocher du centre, mais le morceau du centre ne peut pas être aligné le long des deux autres simultanément. Le morceau du centre sera isolé si le tableau s'étend, un vide sera affiché entre lui et les morceaux situés dessous et dessus. Dans l'exemple suivant, les lignes en pointillés montrent (à gauche) les cases créées dans le tableau de mise en page utilisé par Freeway pour mettre en page les blocs. Lorsque la page est affichée dans un navigateur, quand la case contenant le texte en HTML s'agrandit pour accueillir une police large, l'image se casse (cidessus à droite). Vous devez ajouter beaucoup d'espace dans ces blocs HTML pour que leur contenu puisse grandir sans augmenter la taille de la case du tableau de mise en page de cette façon, c'est particulièrement important lorsque vous créez des blocs de texte HTML. Lorsqu'un bloc Graphique risque d'être découpé, pensez à laisser suffisamment d'espace en créant des blocs de texte HTML plus grands que ce qui est nécessaire. Astuces et techniques pour produire du code HTML efficace 317 L'un des secrets que vous ne pouvez pas deviner lorsque vous commencez à créer un site web sur Mac est que les tailles des polices sont environ un tiers plus grandes sur les PC fonctionnant avec Windows. Cela signifie que, même si quelqu'un consulte vos pages sous Windows sans avoir augmenté la taille par défaut des polices dans son navigateur, la mise en page risquera quand même d'être détruite. La meilleure façon d'être sûr que vos images ne seront pas découpées est d'éviter de recouvrir les blocs Graphiques par des blocs HTML quand c'est possible, mais il existe aussi d'autres solutions : • Vous pouvez créer des pages utilisant le HTML 3.2 + CSS, cela vous permettra de choisir la taille des polices en points. Cela évitera qu'elles ne soient affichées avec une taille plus grande sur PC. • Vous pouvez créer des pages utilisant le HTML 4.0 et utiliser les calques pour vous permettre de recouvrir des blocs sans avoir besoin de les découper. Freeway Express does not support CSS styles or layer éléments. Les blocs publiés sous la forme d'une seule image Les problèmes qui peuvent apparaître Les blocs d'images qui se chevauchent dans Freeway sont regroupés en une seule image lors de la publication. L'image qui est créée lors de la publication sera un rectangle de taille suffisamment grande pour englober complètement les deux images d'origine. Si un autre bloc, qui n'était pas initialement superposé aux blocs précédents, se trouve sur le rectangle englobant les deux images, il va être à son tour intégré dans l'image unique. Cela peut alors créer un "effet boule de neige" allant beaucoup plus loin que ce qui était initialement prévu. Un tel positionnement peut causer des problèmes si les blocs fusionnés dans la grande image sont des blocs de texte HTML. C'est particulièrement vrai si les blocs de texte HTML n'ont pas été correctement dimensionnés pour permettre à leur contenu de s'agrandir sans problème comme indiqué précédemment. 318 Astuces et techniques pour produire du code HTML efficace Faites attention aux chevauchements non voulus car ils peuvent causer des problèmes par la suite. Si vous ne souhaitez pas que les images qui se chevauchent fusionnent, décochez l'option Fusionner images dans l'onglet Exportation de la palette Spécifications. Fusionner les images pour être efficace L'utilisation judicieuse des chevauchements peuvent cependant rendre vos pages plus efficaces et plus rapides à télécharger. Considérez par exemple une page qui est composée uniquement de dix boutons graphiques, chacun d'entre eux serait publié sous la forme d'une image individuelle. Cette page pourra être lente à télécharger, même si chaque image est petite. Cela est causé par différents facteurs. D'abord, le tableau HTML qui sera utilisé pour reproduire cette mise en page sera relativement complexe, surtout si les boutons ne sont pas de la même taille ou s'ils ne sont pas alignés correctement, ce qui augmente la taille du fichier HTML. Ensuite le serveur devra traiter dix demandes pour les dix images, ce qui augmente le travail du serveur et ralentit globalement le serveur. Troisièmement, il y a un surcroît de travail pour chaque image individuelle et certaines informations seront dupliquées inutilement dans chaque image. Une solution à ce problème consiste à fusionner les images ensemble. Cela facilitera les choses : le tableau de mise en page sera simplifié et le fichier HTML plus petit, une seule image sera demandée sur le serveur web et les images sont mieux compressées. Pour fusionner plusieurs images, dessinez simplement un bloc Graphique au dessus des images de la page. Cela provoquera leur fusion dans une seule image et leur publication sous la forme d'un seul fichier. Astuces et techniques pour produire du code HTML efficace 319 Utiliser la commande "Mise en page HTML" pour identifier les problèmes Vous pouvez voir comment la mise en page sera reproduite lors de la publication en activant la fonction Mise en page HTML dans le menu Affichage. Cette option provoque l'affichage des tableaux de mise en page invisibles et l'affichage des lignes de découpe dans les images à l'aide de lignes colorées. Lorsqu'une image est découpée, des flèches rouges indiquent les parties de l'image qui risquent potentiellement de perdre leur alignement. Avec ces flèches, vous pouvez localiser les blocs HTML qui causent ce découpage et augmenter leurs tailles pour que leur contenu puisse grandir sans obliger la case du tableau de mise en page à s'agrandir. Réduire la taille des fichiers pour gagner en vitesse L'un des objectifs importants lors de la conception d'un site web consiste à réduire au minimum la taille des fichiers. Vous devez vous souvenir que, même si vos visiteurs sont connectés à Internet via une connexion T1 très rapide ou via un modem à 56 Kbps, le réseau devient lent lorsque beaucoup de personnes l'utilisent. La vitesse de transfert des données peut être lente avec n'importe quel type de connexion. Plus vos fichiers sont gros, plus les pages prendront de temps à se télécharger sur les ordinateurs de vos visiteurs. Plus un site est lent, plus il y a de chances pour que vos visiteurs partent vers un autre site. Vous pouvez considérer que 1 Ko de données prendra environ 1 seconde à télécharger via une connexion lente ou si le réseau est surchargé à ce moment. Cela signifie qu'une page de 30 Ko, en comptant les images, prendra jusqu'à 30 secondes pour s'afficher complètement. 30 secondes, ça peut être très long pour quelqu'un qui est pressé. Lorsque vous vérifiez la taille des fichiers dans le Finder, vous devez savoir que ces nombres ne représentent pas toujours la taille réelle d'un fichier. Généralement, vous aurez l'impression que vos fichiers sont plus gros que ce qu'ils sont réellement. 320 Astuces et techniques pour produire du code HTML efficace Les tailles de fichiers dans le Finder peuvent être trompeuses Tout d'abord, les tailles des fichiers affichés dans les fenêtres présentées par liste dans le Finder sont trompeuses car elles sont données en multiples de la taille d'un bloc de votre disque dur. Par exemple, si les blocs du disque ont une taille élémentaire de 8 Ko, la taille affichée pour un fichier de 1 Ko sera de 8 Ko. Pour le vérifier, sélectionnez le dossier de votre site dans le Finder puis sélectionnez Lire les informations dans le menu Fichier. Deux valeurs sont données pour la taille du dossier. La première est la taille cumulée des tailles des blocs utilisés. La seconde, qui est plus petite, est la taille réelle cumulée des fichiers. Utiliser la palette Site pour optimiser les pages La palette Site fournit de nombreuses informations intéressantes. Vous pouvez ainsi afficher les tailles des fichiers générés. Pour cela, sélectionnez Afficher la taille des fichiers dans le menu de la palette Site. Chaque fois que vous utiliserez les commandes Prévisualiser ou Publier, Freeway calculera la taille totale de chaque page en octets, y compris les images générées pour cette page. Il est fortement conseillé de créer des pages qui occupent moins de 32 000 octets. Si la taille de certaines de vos pages dépasse cette valeur, vous devriez envisager de réduire leur taille d'une façon ou d'une autre. Dans la palette site, activez l'option Afficher les blocs dans le menu de la palette Site puis vérifiez la taille des blocs Graphiques se trouvant sur la page. Cela permet de voir facilement si vous avez quelques grosses images dont la taille peut être facilement réduite avec quelques ajustements. Si ce n'est pas le cas, vous pouvez envisager de séparer le contenu de la page en plusieurs nouvelles pages. Si vous souhaitez ajuster la taille de certains bloc Graphique, activez l'option Prévisualisation des images dans le menu Affichage puis utilisez les bouton de l'onglet Exportation de la palette Spécifications pour optimiser la compression des images JPEG ou les palettes et le nombre de couleurs des images GIF. Essayez d'utiliser un format JPEG au lieu de GIF ou vice-versa pour voir si c'est Astuces et techniques pour produire du code HTML efficace 321 efficace. Cela vous aidera aussi à apprendre quel format est le meilleur pour les différents types d'images. Créer des tableaux imbriqués Freeway génère quelques fois des tableaux imbriqués dans le code HTML. Un tableau imbriqué est un tableau qui se trouve lui-même à l'intérieur d'un autre tableau, permettant de grouper des blocs ensemble. Cela permet de préserver une mise en page en HTML qui pourrait être cassée lors de l'affichage dans le navigateur. Les tableaux imbriqués peuvent être affichés en utilisant la commande Mise en page HTML du menu Affichage : les contours des tableaux sont affichés en traits pleins. Freeway génère des tableaux imbriqués automatiquement, mais vous pouvez également en créer manuellement. Astuce : Il est plus facile de voir la mise en page HTML, si l'option Contours est désactivée dans le menu Affichage. Tableaux imbriqués créés automatiquement Des tableaux imbriqués sont générés automatiquement pour éviter que la mise en page ne soit cassée. Cela se produit habituellement lorsque plusieurs bloc Graphique se trouvent dans la même zone horizontale que des blocs texte HTML ou des éléments de formulaire. Comme indiqué précédemment dans la section Les mises en pages qui peuvent se détruire, lorsque du texte HTML est affiché dans un navigateur, le tableau de mise en page peut s'agrandir verticalement pour des raisons de place si la taille de la police utilisée dans le navigateur est plus grande que celle utilisée dans Freeway. Cela se produit habituellement avec les navigateurs PC fonctionnant dans Windows car ils utilisent des polices plus grandes que les tailles équivalentes sur Mac. Freeway détecte les situations dans lesquelles cela peut se produire et il place les blocs Graphiques dans un tableau imbriqué pour qu'ils restent ensemble si le tableau principal est agrandi par le navigateur. Tableaux imbriqués créés manuellement Les tableaux imbriqués peuvent également être créés manuellement en plaçant des blocs à l'intérieur d'un bloc HTML qui ne contient rien (bien qu'il puisse avoir une couleur de fond). C'est le même principe que pour les images fusionnées lorsqu'elles sont contenues dans un bloc Graphique plus grand, sauf que les tableaux imbriqués ne peuvent pas être recouverts par d'autres blocs. Les blocs HTML utilisés pour créer les tableaux imbriqués ne peuvent pas être recouverts (même partiellement) par d'autres blocs. Il doivent également posséder une largeur d'au moins un pixel entre leurs bordures droite et inférieure et les blocs contenus dedans. C'est nécessaire pour créer la structure du tableau en HTML. 322 Astuces et techniques pour produire du code HTML efficace Les tableaux ne peuvent pas être imbriqués à l'intérieur d'autres tableaux imbriqués (il ne peut y avoir qu'un seul niveau d'imbrication). Si vous déplacez des blocs qui forment un tableau imbriqué à l'intérieur d'un autre bloc HTML, les limites du tableau imbriqué seront redéfinies par les limites du bloc situé à l'extérieur. Essayez de faire cela avec l'option Mise en page HTML activée, ainsi vous pourrez voir la manière dont la structure des tableaux de mise en page se modifie. Les tableaux imbriqués sont habituellement utiles lorsqu'un groupe d'images adjacentes devrait normalement être brisé lorsque la page est affichée dans le navigateur (c'est habituellement ce qui se produit lorsque la taille d'un des blocs de texte adjacents augmente). En plaçant les images à l'intérieur d'un tableau imbriqué, vous pouvez éviter que cela se produise. Les tableaux imbriqués créés par l'utilisateur passent en priorité par rapport aux tableaux imbriqués créés automatiquement. Vous pouvez empêcher Freeway de regrouper des blocs différents dans un même tableau imbriqué en utilisant vos propre tableaux imbriqués pour éviter ce regroupement. Aligner les objets pour créer un meilleur code HTML Les créateurs de site utilisent fréquemment les guides et les grilles pour la mise en page, ce qui les aide à conserver les blocs alignés sur la page, avec une mise à page propre et une impression visuelle cohérente qui joue un rôle important dans la qualité et la taille du site. Si vous utilisez des blocs qui ne sont pas bien alignés avec les autres blocs de la page, le tableau de mise en page nécessaire pour reproduire la page sera beaucoup plus complexe avec de nombreux petites cellules créées là où les bords des blocs ne sont pas alignés. Prenez soin d'aligner vos blocs sur les mêmes guides ou les bords de la page dès que c'est possible (consultez Règles, grilles et guides). Même lorsque les blocs n'ont pas besoin de se toucher, il est conseillé de les faire se toucher pour réduire le nombre de cases créées dans les tableaux de mise en page lors de la publication. Une fois de plus, vous pouvez utiliser la palette Site avec l'option Afficher la taille des fichiers activée pour voir l'impact de l'alignement des blocs sur la taille des fichiers générés. Par faire un test simple, créez quelques blocs de Astuces et techniques pour produire du code HTML efficace 323 tailles différentes qui ne sont pas alignés les uns avec les autres sur la page, affichez la palette Site, appuyez sur Commande P (pour publier le site) pour voir la taille des fichiers créés. Ensuite, alignez ces blocs en utilisant un guide et vérifiez qu'ils sont tous de la même taille, appuyez à nouveau sur Commande P. Vous pourrez constater une réduction intéressante de la taille du fichier HTML créé. Utilisez cette même technique sur vos propres pages pour voir comment vous pouvez réduire leur taille. 324 Personnaliser le code HTML généré Personnaliser le code HTML généré Freeway est conçu pour aider les utilisateurs qui ne souhaitent pas passer leur temps à écrire du code HTML. Cette libération du code est complétée par les Actions Freeway qui offrent la possibilité d'étendre les fonctions de Freeway sans avoir besoin d'éditer de code HTML. Cependant, dans certaines circonstances, vous aurez peut être besoin d'insérer du code HTML supplémentaire ou tout autre code dans les fichiers générés par Freeway. Ce chapitre explique comment vous pouvez ajouter du code HTML au code généré par Freeway. Bien sûr, pour cela vous devez connaître le langage HTML ou JavaScript (au moins pour ce que vous souhaitez ajouter). Vous devez aussi connaître la structure d'un document HTML pour savoir où placer le code. Enfin, il faut savoir que cela peut être long, par exemple si vous voulez ajouter des effets spéciaux et les vérifier et les corriger s'il y a des problèmes. Cela peut être beaucoup plus long que les autres étapes déjà accomplies sur le site web. Ajouter du code au code HTML généré par Freeway Important : A cause de la méthode de travail de Freeway (il génère une nouvelle page HTML à chaque fois qu'une modification est apportée au document), il n'est pas conseillé d'éditer les fichiers HTML créés par Freeway après leur publication. Car si vous modifiez les pages dans Freeway et publiez à nouveau le site, toutes les modifications faites dans les anciens fichiers HTML seront perdues. Au lieu d'éditer les fichiers HTML générés par Freeway, vous pouvez demander à Freeway d'insérer le code personnalisé lors de la publication des pages. Pour cela, vous devez ajouter le code dans le document Freeway. Il sera intégré aux fichiers HTML lors de la prochaine publication ou prévisualisation du site. Vous pouvez utiliser l'une des méthodes suivantes pour ajouter du code dans le document Freeway, en fonction de ce que vous souhaitez faire : • Utiliser une boîte de dialogue pour ajouter du code dans la page. • Compléter le code généré pour des éléments spécifiques. • Inclure le contenu d'une URL externe à l'affichage de la page. • Insérer du code à des endroits précis d'une page. • Importer du code HTML dans le document. Personnaliser le code HTML généré • 325 Utiliser une action de Freeway Utilisez la boîte de dialogue pour ajouter du code Le dialogue Marqueurs HTML propose un moyen simple mais puissant pour ajouter tout type de code HTML ou de script sur une page. Sélectionnez Marqueur HTML... dans le menu Page, sélectionnez dans le menu déroulant la partie du fichier HTML dans laquelle vous souhaitez que le code soit inséré puis collez ou tapez le code dans la zone d'édition. Freeway vous permet d'enregistrer des morceaux de code séparés pour chacune des différentes parties du fichiers HTML créé pour la page. Par exemple, vous pouvez ajouter du code dans la partie HEAD ainsi que dans la partie BODY de la même page. Ce dialogue peut être utilisé lorsque vous avez besoin d'ajouter du code JavaScript dans une page. Le meilleur endroit pour ajouter du code JavaScript est "Avant </HEAD>". Il sera placé dans la partie qui sera traitée avant la partie BODY qui contient le contenu de la page. Compléter le code généré pour des éléments spécifiques Lorsque vous avez besoin d'ajouter du code au code HTML généré pour un élément spécifique, vous pouvez utiliser la commande Extensions.... Cette commande apparaît à différents endroits dans Freeway : dans le menu Bloc, dans le menu Page et dans le dialogue Edition du lien. Vous pouvez également compléter le code généré pour les cadres et les rangées ou cellules des tableaux créés dans Freeway. Cette méthode permet de compléter le code HTML en insérant du code supplémentaire dans une balise HTML générée par Freeway pour un objet 326 Personnaliser le code HTML généré particulier. Lorsque vous utilisez la commande Extensions..., une boîte de dialogue apparaît pour vous permettre d'ajouter de nouveaux couples Nom/Valeur pour cet objet. Vous pouvez ajouter un nouveau couple Nom/Valeur en cliquant sur le bouton Ajouter du dialogue. La balise qui sera complétée par le nouveau couple Nom/Valeur dépend du type du bloc sélectionné lorsque vous utilisez la commande Extensions.... Le nom de cette balise est affiché dans le titre du dialogue. • Lorsque vous sélectionnez Extensions... dans le menu Page, les couples Nom/Valeur définis seront ajoutés dans la balise <BODY> de la page. • Lorsque vous cliquez sur Extensions dans le dialogue Edition du lien, les couples Nom/Valeur définis seront ajoutés dans la balise <A HREF>. Vous devez terminer la création du lien sur le bloc sélectionné pour que les couples Nom/Valeur définis soient ajoutés lors de la publication de la page. • Lorsque vous sélectionnez Extensions... dans le menu Bloc, les couples Nom/Valeurs définis seront ajoutés dans la balise correspondante au bloc sélectionné. Par exemple, elle peut être <IMG> si un bloc Graphique est sélectionné, ou <EMBED> si un élément multimédia est sélectionné. Les autres objets qui peuvent être complétés de cette manière sont les cadres et les jeux de cadres (en sélectionnant Extensions... dans le menu Bloc lorsqu'un cadre ou un jeu de cadres est sélectionné), les blocs publiés en calques, les blocs de formulaire et les styles (CSS uniquement). Les couples Nom/Valeur sont définis pour que le texte que vous tapiez dans les deux champs soit ajouté de chaque côté du symbole "=". De plus, le contenu Personnaliser le code HTML généré 327 du champ Valeur sera encadré par deux guillemets lors de la publication. Par exemple, si vous sélectionnez Extensions... dans le menu Page pour compléter la balise <BODY>, vous pouvez ajouter un couple Nom/Valeur comme cela : Nom : onUnload Valeur : alert('bye'); La balise sera publiée sous cette forme : <BODY... onUnload="alert('bye');">. Elle provoquera l'affichage d'un dialogue affichant "bye" lorsqu'un visiteur quittera votre site. Important : Comme Freeway utilise des guillemets pour contenir le champ Valeur, vous ne devez utiliser que des apostrophes dans le champ Valeur. Inclure le contenu d'une URL externe dans une page Dans certains cas, vous souhaiterez que la page web inclue dynamiquement une image ou le contenu d'une page HTML qui change ou qui est mise à jour plus fréquemment que votre page. Par exemple, des bandeaux publicitaires, des compteurs qui enregistrent le nombre de visiteurs passant sur votre site, ou bien encore des cotations boursières mises à jour à partir d'une base de données accessible sur le web. Il serait très laborieux ou impossible d'importer le nouveau contenu, de publier le site et de transférer les fichiers à chaque fois que ce contenu change. A la place, vous laissez un espace libre dans votre page pour ce contenu externe qui ne sera ajouté que lorsqu'un visiteur consultera la page. Vous disposez de deux méthodes pour accomplir cela, en fonction du type de contenu que vous souhaitez inclure : soit une image, habituellement générée par un script se trouvant sur un serveur web, soit un fichier texte contenant du code HTML, appelé également module de serveur ("Server Side Includes" en Anglais). Utiliser un bloc URL pour inclure un contenu externe Pour inclure un contenu dans une page Freeway : 1 Créez un bloc de la taille nécessaire dans la page. 2 Positionnez-le là où vous souhaitez faire apparaître le contenu externe. 3 Affichez le panneau Exportation de la palette Spécifications. 4 Sélectionnez URL dans le menu Type de la palette. 5 De nouvelles options apparaissent dans le panneau d'exportation. Cliquez sur les boutons radios Image ou HTML en fonction du type de contenu à inclure : fichier image ou fichier texte contenant du code HTML. 328 6 Personnaliser le code HTML généré Tapez ou collez l'URL du contenu externe dans le champ de la palette. Lorsque la page sera publiée, Freeway laissera simplement un espace de la taille du bloc dans la page pour référencer ou inclure l'URL indiquée. Lorsque la page sera affichée dans un navigateur, tant que le contenu externe sera disponible à l'URL indiquée, la page apparaîtra correctement avec le contenu externe inclus au bon endroit. Lorsque vous utilisez un bloc URL pour inclure une image, l'URL indiquée sera insérée dans une balise "IMG" lors de la publication : <IMG SRC="/cgi-bin/counter.cgi" BORDER=0> Lorsque vous utilisez un bloc URL pour inclure du code HTML, l'URL indiquée sera insérée dans une expression "include" lors de la publication : <!-- #include virtual="included.inc" --> Personnaliser le code HTML généré 329 Rien ne sera affiché lorsque la page sera affichée localement, mais lorsque la page sera demandée sur un serveur web, le serveur extraira automatiquement ce commentaire et le remplacera par le code contenu dans le fichier référencé. Ce fichier peut être une page HTML complète, mais c'est mieux s'il ne contient que le code HTML nécessaire pour atteindre le but souhaité. Important : Si vous indiquez un contenu externe dans un bloc URL à l'aide de l'option HTML, il ne pourra être prévisualisé que lorsque les pages seront disponibles sur un serveur web. Vous ne pourrez pas voir le code HTML inclus en prévisualisant la page localement dans votre navigateur. En effet, le commentaire utilisé pour inclure le fichier HTML externe n'est pas une instruction reconnue par les navigateurs, mais une instruction destinée aux serveurs web. Cela suppose aussi que votre serveur web soit configuré pour accepter les modules de serveur ("Server Side Includes" en Anglais). Cette option est désactivée sur de nombreux serveurs pour des raisons de sécurité. Insérer du code à un endroit précis d'une page Occasionnellement il peut être nécessaire d'ajouter du code personnalisé à des endroits précis dans vos pages. Par exemple, vous pouvez ajouter du code pour afficher un compteur ou une applet Java. Vous pouvez utiliser les blocs marqueurs pour cela. Ils sont créés en utilisant Bloc Marqueur... dans le menu Insertion dans Freeway. Ils peuvent être ajoutés en tant que blocs indépendants ou en tant que blocs incrustés dans un morceau de texte HTML. 330 Personnaliser le code HTML généré Lorsque vous créez un bloc marqueur, Freeway affiche un dialogue dans lequel vous pouvez taper ou coller le code HTML ou le script que vous souhaitez insérer dans le code publié. Vous devez être sûr que ce code HTML est correct, Freeway l'insérera sans le modifier. L'exemple ci-dessus insère simplement un compteur "linkexchange" sur la page. Le code inséré apparaîtra exactement tel que vous l'avez entré. Pour modifier un bloc marqueur, double-cliquez dessus sur la page. Utilisez le dialogue Marqueur HTML pour le modifier. Ajouter un bloc marqueur indépendant 1 Sélectionnez Bloc Marqueur... dans le menu Insertion. 2 Saisissez ou collez le code nécessaire dans le dialogue puis cliquez sur OK 3 Freeway crée un bloc marqueur d'une taille par défaut sur la page. Vous pouvez le redimensionner et modifier sa position comme vous le souhaitez. Le code contenu dans ce bloc marqueur sera inséré dans le code HTML généré lors de la publication. Voici par exemple le code généré par le marqueur de la copie d'écran précédente : <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=458> <TR VALIGN=TOP> <TD COLSPAN=2></TD> <TD HEIGHT=72></TD> </TR> <TR VALIGN=TOP> <TD></TD> <TD><img src="http://fastcounter.linkexchange.com/ fastcounter?159645+319297" border=0></TD> <TD HEIGHT=100></TD> </TR> Ajouter un bloc Marqueur incrusté 1 Placez le curseur à l'intérieur du texte d'un bloc HTML là où vous souhaitez ajouter le bloc Marqueur. Personnaliser le code HTML généré 331 2 Sélectionnez Bloc Marqueur... dans le menu Insertion. 3 Saisissez ou collez le code nécessaire dans le dialogue puis cliquez sur OK 4 Freeway crée un bloc Marqueur dans le texte. Le code contenu dans ce bloc marqueur sera inséré dans le code HTML généré lors de la publication. Note 1 : Freeway ne lit pas et ne modifie pas le code ajouté dans le bloc Marqueur. Si ce code fait référence à des images ou à d'autres fichiers qui doivent être transférés sur votre serveur web, vous devrez les transférer manuellement (voir Logiciels FTP spécialisés). Note 2 : Il est important d'attribuer suffisamment d'espace dans le navigateur pour ce code inséré en créant un bloc marqueur suffisamment grand pour contenir son contenu. Cela évitera que ce bloc ne détruise la mise en page. Cela sera également utile pour ajouter ce bloc dans le reste de la mise en page. Importer du code HTML dans le document Si vous possédez un fichier HTML dont vous souhaitez faire apparaître le contenu dans une page existante dans Freeway, vous pouvez importer ce fichier texte HTML dans un bloc de Freeway. Le code HTML importé ne pourra pas être affiché ni modifié dans Freeway mais il sera visible lors de la prévisualisation de la page dans un navigateur. Le fichier externe devra être disponible lors de la publication du site. Vous pouvez également importer des pages HTML entières dans votre document. Consultez le paragraphe Importer des fichiers HTML. Importer le contenu d'un fichier HTML 1 Créez un bloc rectangulaire puis vérifiez qu'il est sélectionné et que ses poignées sont visibles. Important : vérifiez que vous n'avez pas cliqué à l'intérieur de ce bloc pour faire apparaître un curseur d'édition de texte. 2 Sélectionnez Importer... dans le menu Fichier puis sélectionnez le fichier contenant le code HTML que vous souhaitez importer. Note : le fichier à importer doit se terminer par ".htm", ".html", ".asp" ou ".inc". 3 Lorsque le fichier sera importé avec succès, une icône de fichier texte avec la position du fichier importé sera affichée dans le bloc sur la page. Vous pouvez importer des pages HTML complètes si vous le souhaitez, bien que cela puisse causer un comportement surprenant chez certains navigateurs. 332 Personnaliser le code HTML généré Si vous utilisez cette fonction, nous vous conseillons de modifier le fichier HTML importé pour qu'il ne contienne que la partie du code réellement nécessaire. Pensez que le code HTML contenu dans le fichier importé peut entrer en conflit avec le code généré par Freeway, ce qui peut causer des résultats inattendus dans les navigateurs. C'est par exemple le cas si le fichier importé contient un formulaire : les autres éléments de formulaire créés dans Freeway risqueront de ne pas s'afficher correctement dans le navigateur lorsque les deux pages seront réunies. Publication de bases de données 333 Publication de bases de données Introduction Freeway est particulièrement bien conçu pour la publication de bases de données. Il propose un contrôle précis de la mise en page, de nombreuses fonctions pour insérer des balises et il permet d'utiliser les actions Freeway qui fournissent un interface simple et compréhensible pour la création et la gestion de balises complexes. Lorsqu'une page HTML est utilisée pour publier une base de données, elle doit contenir des balises supplémentaires qui seront interprétées par le serveur web de la base de données. Lorsque le serveur rencontre ces balises, il les remplace par des données extraites de la base de données. Par exemple, lorsque le serveur web de FileMaker rencontre une balise <FMP-field name>, il la remplacera par la valeur du champ "name" de l'enregistrement actuel. Cette substitution sera effectuée de manière transparente : le serveur web recevra une page dans laquelle ces balises auront déjà été remplacées. Pour que Freeway génère des pages fonctionnant avec une base de données, vous devez insérer des balises supplémentaires dans ces pages. Pour cela, vous devez insérer des marqueurs, compléter des balises et mettre en place des formulaires. Une méthode simple pour insérer des marqueurs consiste à utiliser les actions de Freeway. Les actions permettent d'ajouter des marqueurs en utilisant l'interface normale de Freeway. Cela signifie qu'en créant un jeu d'actions appropriées, la création d'un site pour publier une base de données deviendra très facile, aussi facile que de créer une page normale. Tous les paramètres peuvent être réglés à l'aide de menus et de champs dans la palette Spécifications. Vous pouvez également télécharger un Tutorial pour FileMaker sur le site de Softpress : Data Designer L’une des façons les plus faciles pour générer une base de données depuis Freeway est d’utiliser le pack Data Designer. Merci de consulter le site web de Softpress. 334 Manuel de référence Publication de bases de données Utiliser les palettes 335 Utiliser les palettes Vous disposez de sept palettes qui vous permettent de contrôler de nombreuses fonctions dans Freeway : Palette Fonction Outils Contient les outils permettant de créer et de modifier les blocs sur les pages. Spécifications Affiche des panneaux fonction du contexte, vous permettant de modifier les options du bloc sur lequel vous travaillez. Site Affiche le contenu du site : dossiers, pages, blocs et maquettes. Styles Affiche les styles de texte disponibles et vous permet de les utiliser. Couleurs Affiche les couleurs disponibles et vous permet de les utiliser. Cadres Affiche la structure des jeux de cadres de la page actuelle et vous permet de les sélectionner. Actions Vous permet de sélectionnez les actions Freeway et de modifier leurs paramètres. Vous pouvez afficher ces palettes en sélectionnant leurs noms dans le menu Fenêtre. Gérer les palettes Vous pouvez afficher ou masquer ces différentes palettes en fonction de vos besoins et de la partie du document sur laquelle vos travaillez. Comme il est peu probable que vous ayez besoin simultanément de toutes les palettes à l'écran, vous pouvez les déplacer à d'autres endroits de l'écran, les redimensionner et faire défiler leur contenu. Les palettes ont des positions par défaut où elles sont affichées la première fois. Vous pouvez les déplacer à des endroits de l'écran qui vous conviennent mieux en les glissant par leur barre de titre. Redimensionner une palette Vous pouvez redimensionner une palette en utilisant sa case de redimensionnement située dans le coin inférieur droit de la palette. Lorsqu'elle est affichée, vous pouvez également cliquer dans la case de zoom pour agrandir la palette et rendre tout son contenu visible. 336 Utiliser les palettes Sous Mac OS X, vous pouvez faire disparaitre une fenêtre en cliquant dans la «bulle verte» en maintenant la touche majuscule enfoncée. Afficher une palette Lorsque vous ouvrez Freeway, les palettes affichées sont celles qui étaient affichées lorsque vous aviez quitté Freeway la dernière fois. Leurs positions sont aussi conservées. Pour afficher ou masquer une palette, sélectionnez son nom dans le menu Fenêtre. Un coche apparaîtra à côté du nom des palettes affichées dans le menu Fenêtre. La palette Outils La palette Outils vous permet de créer et de modifier les blocs sur la page. Travailler avec les outils Sélectionner un outil Pour sélectionner un outil, cliquez sur son icône dans la palette Outils. La forme du curseur change en fonction de l'outil sélectionné. La plupart des outils reviennent à l'outil de sélection après leur utilisation. Cependant, si vous sélectionnez un outil en maintenant la touche Option enfoncée, il restera sélectionné après son utilisation, vous pourrez ensuite le réutiliser sans être obligé de le sélectionner à nouveau dans la palette Outils. Vous pouvez modifier le fonctionnement des outils à l'aide de certaines touches du clavier. Les outils de dessin, de transformation et de liaison sont décrits plus en détails dans le chapitre Blocs. Touches spéciales Utiliser les palettes 337 En maintenant certaines touches enfoncées lorsque vous utilisez un outil, le fonctionnement de cet outil est modifié jusqu'à ce que vous relâchiez la touche. Option : Remplace temporairement l'outil actuel (sauf l'outil de zoom) par une main permettant de déplacer la page dans la fenêtre. Lorsque vous utilisez l'outil de zoom, la touche Option permet de réduire l'affichage au lieu de l'augmenter. Commande : Remplace temporairement l'outil actuel par l'outil de sélection pour vous permettre de sélectionner, désélectionner et déplacer les blocs. Control : Remplace temporairement l'outil actuel par l'outil de zoom. Outil de sélection L'outil de sélection peut être utilisé pour sélectionner, désélectionner, redimensionner, déplacer les blocs sur la page, sélectionner du texte, déplacer le curseur dans un morceau de texte, déplacer les images à l'intérieur de leurs blocs et découper les images en redimensionnant leurs blocs. Outil de zoom Vous pouvez utiliser cet outil pour agrandir ou réduire l'affichage du document. L'outil de zoom est décrit en détail dans Modifier l'affichage avec l'outil Loupe. Outils de création de bloc L'outil de création de bloc HTML ainsi que les outils Rectangle, Ovale et Crayon sont utilisés pour créer des blocs pouvant contenir du texte, des images ou du multimédia. Ces outils sont décrits en détails dans Les outils de création de blocs de Freeway. Outil de création de tableau Vous pouvez utiliser cet outil pour créer des tableaux. Cet outil est décrit en détails dans Créer des tableaux. Outil de création de bloc action 338 Utiliser les palettes Lorsque vous cliquez puis maintenez le bouton de la souris enfoncé sur cet outil, un menu vous permettant de sélectionner l'action souhaitée parmi les actions Freeway apparaîtra.Les actions sont décrites en détails dans Actions. Outils de création de zone de liens Les outils de création de zone de liens peuvent être utilisés pour créer des zones de liens, c'est à dire pour transformer une partie d'une image en lien. Ils sont décrits en détails dans Les zones de liens. Outils de transformation Les outils de rotation, inclinaison et miroir sont utilisés pour modifier les blocs Graphiques (ils ne peuvent pas être utilisés sur les blocs HTML). Ils sont décrits en détails dans Transformer les blocs. Outils de chaînage de texte Les outils de chaînage de texte permettent de répartir les textes dans plusieurs blocs. Ils sont décrits en détails dans Relier des blocs Texte pour former une chaîne. Outils de création de formulaire Les outils Case à cocher, Bouton radio, Bouton, Champ, Menu ou liste et Zone de texte sont utilisés pour créer des éléments de formulaires. Ils sont décrits en détails dans Formulaires. La case à cocher Calque) La case à cocher Calque n'est disponible que pour les pages autorisant le HTML 4.0. Si vous cochez cette case, tous les nouveaux blocs créés seront des blocs calques. Ils sont décrits en détails dans Créer des blocs calque (Freeway Pro). Utiliser les palettes 339 La palette Spécifications La palette Spécifications joue un rôle vital dans la conception d'un site web dans Freeway. Elle contient la plupart des options nécessaires pour contrôler l'apparence et les attributs des pages, blocs, textes et images exportées. Les options dans la palette Spécifications sont groupées sur différents panneaux qui s'adaptent au contexte de votre travail. Lorsque rien n'est sélectionné dans la page, la palette Spécifications n'affiche que les onglets correspondants à la page, tandis que lorsque vous sélectionnez un bloc sur la page, vous avez accès aux panneaux Exportation et Bloc. Lorsque vous sélectionnez un bloc ou du texte, le panneau affiché en premier est celui dont vous aurez le plus souvent besoin. Pour afficher un panneau masqué, cliquez simplement sur l'onglet correspondant à ce panneau. Les paragraphes suivants décrivent les principaux panneaux de la palette Spécifications ainsi que leurs options. Les autres panneaux qui apparaîtront pendant votre travail seront présentés dans les paragraphes correspondants. Si vous entrez des informations dans les champs, vous pouvez confirmer les modifications en appuyant sur Retour ou Entrée après avoir terminé. Si vous entrez une série de valeurs, vous pouvez utiliser la touche Tabulation pour confirmer la valeur entrée et déplacer le curseur dans le champ suivant. Panneau Page Les panneaux Page et Apparence de la page apparaissent lorsqu'aucun bloc n'est sélectionné dans la page. Titre Permet de modifier le titre de la page, qui apparaîtra dans le titre de la fenêtre affichée dans un navigateur. 340 Utiliser les palettes Fichier Permet de modifier le nom du fichier qui sera utilisé pour créer la page HTML lors de la publication. L, H Affiche la largeur et la hauteur de la page. HTML Permet d'indiquer si les CSS ou les fonctions du HTML 4.0 seront utilisables sur cette page Aligner Permet de régler l'alignement des blocs de la page lorsqu'elle est affichée dans la fenêtre d'un navigateur. Codage Permet de modifier l'encodage de la page. Maquette Permet d'indiquer sur quelle maquette la page actuelle est basée. Utilisez ce menu pour choisir une nouvelle maquette. Cible Permet de sélectionner un cadre par défaut, ainsi lorsque que quelqu'un clique sur un lien sur la page actuelle, il sera affiché dans le cadre indiqué (et non pas dans le cadre contenant le lien). Le panneau Page est décrit plus précisément dans Modifier une page. Panneau Apparence de la page Couleur Permet de choisir la couleur de fond de la page. Image Permet de choisir une image de fond. Cette image sera répétée sur la page pour la remplir, quelle que soit la taille de la page. Liens Permet de modifier les couleurs des liens. La couleur Normal est utilisée pour les liens placés dans le texte HTML. La couleur Actif est utilisée quand le lien est cliqué. La couleur Visité est utilisée lorsque le visiteur a déjà consulté la page de 341 Utiliser les palettes ce lien. Si aucune couleur n'est définie, les couleurs par défaut du navigateur seront utilisées. Styles de liens Permet de modifier les styles, en dehors de la couleur, des liens normaux, actifs et visités. Ces styles ne sont disponibles que sur les pages acceptant les CSS. Le style Survolé est utilisé lorsque le curseur de la souris est au dessus du lien. Le panneau Apparence de la page est décrit plus précisément dans Modifier une page. Les styles de liens sont présentés dans Couleurs des liens. Panneau Bloc Le panneau bloc apparaît seulement lorsqu’un seul bloc est sélectionné. Titre Permet de donner un titre au bloc. X, Y Permet d'indiquer la position de bloc par rapport au coin supérieur gauche de la page. L, H Permet d'indiquer la largeur et la hauteur du bloc. Orientation Permet d'afficher le texte horizontalement ou verticalement. Arrondi Permet de modifier le rayon d'arrondi pour les blocs Graphiques rectangulaires. Verrouiller Permet de verrouiller le bloc. Les blocs verrouillés ne peuvent plus être déplacés ou redimensionnés avec la souris. 342 Utiliser les palettes Afficher Permet de masquer le bloc. Bien qu'il n'apparaisse plus dans la fenêtre Freeway, il sera quand même publié. Publier Permet d'empêcher un bloc d'être publié. Si cette case n'est pas cochée, le bloc ne sera pas publié. Utiliser contenu maquette Indique si le contenu du bloc provient d'un bloc d'une maquette. Utiliser réglages maquette Indique si les attributs du bloc proviennent de ceux d'un bloc d'une maquette. Habiller Indique si le texte contenu dans un bloc situé derrière le bloc actuel doit être habillé. Marge Définit une marge entre le bloc actuel et le texte habillé qui se trouve dans le bloc derrière lui. Ce champ est désactivé tant que l'option Habiller n'est pas cochée. Fond Permet de modifier la couleur de fond du bloc Type Indique si le bloc est un rectangle, un ovale ou un polygone. Ces options sont décrites plus précisément dans Changer les attributs d'un bloc. Panneau Bloc incrusté 343 Utiliser les palettes Le panneau Bloc incrusté s'affiche lorsqu'un bloc qui est inséré à l'intérieur d'un morceau de texte est sélectionné. Les options disponibles sont les mêmes que celles du panneau Bloc sauf pour ces exceptions : Espace horizontal Définit une marge horizontale entre le bloc et le texte adjacent. Espace vertical Définit une marge verticale entre le bloc et le texte adjacent. Aligner Modifie l'alignement du bloc dans le texte où il est inséré. Les blocs incrustés sont décrits plus précisément dans Blocs Incrustés. Panneau Exportation Ce panneau n'est affiché que lorsqu'un seul bloc est affiché. Il propose des options spécifiques au format dans lequel le bloc sera publié. Cependant, quelques options sont communes pour tous les formats : Type Détermine comment le bloc sera exporté lors de la publication du site. Calque Détermine si le bloc est un bloc calque. Cette option n'est disponible que pour les pages en HTML 4.0. Alt Détermine si un texte alternatif est affiché pour les blocs Graphiques lorsque le visiteur du site a désactivé l'affichage des images dans son navigateur. Fusionner images Indique si ce bloc doit être fusionné avec les blocs qui le recouvrent. 344 Envoi Utiliser les palettes Permet d'utiliser ce bloc en tant que bouton d'envoi d'un formulaire.. Certaines options ne sont pas disponibles pour les blocs fusionnés. Elles apparaîtront dans le panneau Exportation images fusionnées. Les options spécifiques au format d'exportation sont affichées dans une zone en haut du panneau. La copie d'écran ci-dessus affiche les options GIF. Le panneau d'exportation est expliqué en détail dans Formats de publication. Options GIF Taille Affiche la taille du bloc en octets (cette zone restera vide si le bloc a été modifié depuis la dernière publication du site, à moins que l'option Prévisualisation des images ne soit activée dans le menu Affichage). Lissage Permet de choisir si les bordures du bloc seront lissées. Vous pouvez aussi choisir par rapport à quelle couleur elles seront lissées. Couleurs Détermine la palette utilisée pour cette image lors de la publication. Curseur de couleurs Détermine le nombre de couleurs utilisées pour l'image. Ajuster Détermine si les couleurs de l'image doivent être ajustées avec celles de la palette. Entrelacé Détermine si l'image sera entrelacée pendant son téléchargement dans le navigateur. Options JPEG 345 Utiliser les palettes Qualité Détermine le taux de compression utilisé. Progressif Détermine si l'image s'affichera progressivement dans le navigateur. Options PNG Les options PNG sont très proches de celles des images GIF, sauf qu'elles proposent des millions de couleurs. Options HTML Largeur extensible Détermine si le bloc s'agrandira en largeur lorsque la fenêtre du navigateur sera agrandie en largeur. Hauteur adaptable Détermine si la hauteur du bloc doit se réduire pour correspondre à la taille de son contenu si la taille de la police du navigateur est plus petite. GIF entrelacés Détermine si les images GIF incrustées dans ce bloc devront être entrelacées. Lissage Détermine si les images GIF incrustées dans ce bloc devront être lissées. Options URL 346 Utiliser les palettes Un bloc URL puise son contenu dans un fichier externe lorsqu'il est affiché sur le web. Le champ en haut est utilisé pour indiquer l'adresse de ce contenu externe. Image Indique que le contenu du bloc sera une image. HTML Indique que le contenu du bloc sera fourni par un module de serveur (Server Side Include). Les blocs URL sont décrits en détails dans Utiliser un bloc URL pour inclure un contenu externe. Options QuickTime Contrôleur Provoque l'affichage du contrôleur QuickTime. Auto Provoque la lecture automatique du film au chargement de la page. Boucle Provoque la lecture en continu du film.Si l'option Palindrome est activée, le film sera lu en entier du début à la fin puis en entier de la fin au début et ainsi de suite. Pour plus d'information sur l'utilisation des films QuickTime dans Freeway, consultez Gestion du multimédia. Utiliser les palettes Options Flash Boucle Provoque la lecture en continu du fichier Flash. Jouer Provoque l'exécution du fichier Flash au chargement de la page. Qualité Détermine la qualité de l'affichage du fichier Flash dans le navigateur. Pour plus d'information sur l'utilisation de Flash avec Freeway, consultez Gestion du multimédia. Panneau Exportation images fusionnées Si le bloc sélectionné est fusionné avec d'autres blocs, les options d'exportation s'appliquent à l'ensemble de ces blocs, elles peuvent être modifiées à l'aide du panneau Exportation images fusionnées : 347 348 Panneau Export Utiliser les palettes Panneau Export Fusionné Panneau Texte Le panneau Texte apparaît dès que vous travaillez sur du texte. Il propose les options de formatage disponibles en fonction du type de bloc utilisé : HTML ou Graphique. Vous trouverez plus d'information sur ces information dans Texte HTML. Options de texte HTML Utiliser les palettes 349 Caractère Permet d'indiquer si le texte sélectionné est du texte HTML ou du texte sous la forme d'image GIF. Police Choix d'une police dans la liste ou création d'une nouvelle. Style Permet d'appliquer les styles gras, italique, souligné, barré, audessus du texte et clignotant. Le style au-dessus du texte n'est pas disponible pour la pages HTML 3.2. Taille Choix de la taille parmi les tailles disponibles en HTML 3.2. Couleur Permet de modifier la couleur du texte. Décalage Permet de placer le texte en exposant ou en indice. Paragraphe Permet d'indiquer si le paragraphe courant est du texte HTML ou du texte sous la forme d'image GIF. Aligner Permet d'aligner le paragraphe courant à gauche, au centre ou à droite. Liste Permet de créer des listes ordonnées (avec des lignes précédées de numéros ou de lettres) ou des listes sans ordre (avec des lignes précédées de points noirs par exemple). Alinéa Permet de modifier l'alinéa du paragraphe courant. Options de texte Graphique Police Choix de la police dans la liste ou création d'une nouvelle. Style Choix des styles gras, italique, souligné, mot souligné, relief et ombré. Taille Choix de la taille dans le menu ou d'entrer une nouvelle taille. 350 Utiliser les palettes Couleur Permet de modifier la couleur du texte. Espace Permet de modifier l'espacement entre les caractères. Aligner Permet d'aligner le paragraphe courant à gauche ou à droite, de le centrer, de le justifier ou de forcer la justification. Interligne Choix de l'interligne en pourcentage de la taille de caractères actuelle. Alinéa Permet de modifier l'alinéa, la marge gauche et la marge droite du paragraphe courant. Panneau Filet Lorsqu'un filet horizontal est sélectionné, le panneau Filet apparaît. Aligner Permet de modifier l'alignement du filet par rapport au texte. Taille Détermine l'épaisseur du filet. Retrait Détermine le retrait du filet par rapport aux bords du bloc HTML. Filet plein Détermine si le filet est plein ou en relief. Les filets sont décrits en détails dans Créer des filets horizontaux. Panneau Tableau Le panneau Tableau est affiché lorsqu'un tableau est sélectionnée ou lorsqu'une cellule de tableau est sélectionnée. Les panneaux Tableau et Cellule de tableau sont décrits en détails dans Modifier les tableaux. Utiliser les palettes 351 Rangées Permet de modifier le nombre de rangées dans le tableau. Les rangées seront ajoutées ou supprimées en bas du tableau. Colonnes Permet de modifier le nombre de colonnes. Les colonnes seront ajoutées ou supprimées à droite du tableau. Espacement Permet de modifier l'espacement entre les cellules du tableau. Retrait texte Choix du retrait du texte par rapport aux bords de la cellule. Epaisseur bordure Permet de modifier l'épaisseur de la bordure autour du tableau. Panneau Cellule de tableau Le panneau Cellule de tableau est affiché lorsqu'une cellule de tableau est sélectionnée. 352 Utiliser les palettes Largeur Permet de modifier la largeur de la cellule sélectionnée. Hauteur Permet de modifier la hauteur de la cellule sélectionnée. Aligner Permet de modifier l'alignement à l'intérieur de la cellule sélectionnée. Couleur Permet de modifier la couleur de fond de la cellule sélectionnée. Vide Détermine si la cellule sera conservée vide lors de la publication. Extension (Cellule) Permet de compléter la balise correspondant à la cellule. Hauteur (Rangée) Permet de modifier la hauteur de la rangée actuelle. Marqueur Permet d'ajouter des marqueurs HTML avant et après la balise correspondant à la rangée actuelle. Extension (Rangée) Permet de compléter la balise correspondant à la rangée actuelle. Largeur (Colonne) Permet de modifier la largeur de la colonne actuelle. Panneau Jeu de cadres Ce panneau apparaît lorsque la page actuelle est un jeu de cadres. Il permet de modifier le titre et le nom du fichier de la page, ainsi que l'épaisseur de la bordure entre les cadres. Ce panneau, ainsi que le panneau Cadre est décrit en détails dans Les cadres. Utiliser les palettes 353 Titre Permet de modifier le titre du jeu de cadres. Il apparaîtra dans la barre de titre de la fenêtre du navigateur. Fichier Permet de modifier le nom du fichier correspondant à ce jeu de cadres. Bordure Détermine l'épaisseur de la bordure entre les cadres. Panneau Cadre Ce panneau affiche les options correspondant au cadre actuel. Il est séparé en deux zones. La zone Jeu de cadres fait référence au jeu de cadres contenant le cadre actuel (certaines de ces options ne sont pas disponibles si le jeu de cadres n'est pas le jeu de cadres principal de la fenêtre). Vertical Détermine l'orientation du jeu de cadres. Taille Permet de modifier la taille du jeu de cadres en pourcentage ou fixe. 354 Utiliser les palettes La zone Cadre fait référence au cadre sélectionné. Source Permet de choisir la page qui sera affichée par défaut dans ce cadre. Nom Permet de modifier le nom du cadre actuel (ce nom sera utilisé pour indiquer la cible des liens si vous le souhaitez). Taille Permet de modifier la taille du cadre en pourcentage ou fixe. Taille fixe Détermine si le cadre peut être redimensionné dans la fenêtre du navigateur. Ascenseur Détermine si les barres de défilement doivent être affichées dans le navigateur. Panneau de formulaire Lorsqu'un élément de formulaire est sélectionné, un panneau affichant les options spécifiques à ce bloc sera affiché. Les icônes pour les panneaux case à cocher, bouton radio, bouton, champ, menu/liste et zone de texte sont affichées ci-dessus. Ces panneaux sont décrits en détails dans Formulaires. La palette Site La palette Site affiche la structure de votre site, avec des icônes représentant les pages, les maquettes, les blocs sur ces pages et les dossiers. Les objets dans cette palette peuvent être déplacés, renommés ou supprimés en utilisant cette palette. Le menu de cette palette propose une sélection de commandes qui vous permettent de créer des nouvelles pages, dossiers ou maquettes, ainsi que de changer la manière dont ces objets sont affichés dans la palette. Les deux icônes dans l'angle inférieur gauche de la palette vous permettent de supprimer et ajouter des pages. Consultez Utiliser la palette Site. Utiliser les palettes 355 La palette Styles Les styles jouent un rôle important dans votre travail dans Freeway, la palette Styles vous permet de les modifier et de les appliquer. Les styles peuvent être créés de deux manières dans Freeway. La première manière est automatique, Freeway créant les styles pendant que vous travaillez. La seconde manière consiste à créer manuellement un style à partir de rien puis en modifiant ses attributs. Les styles que vous créez vous-même sont appelés styles permanents et ils sont affichés en gras dans la palette. Les styles générés automatiquement par Freeway sont appelés styles temporaires et ils sont affichés en style standard. Un autre avantage lié à la gestion des styles dans Freeway est que, en plus des styles pour les paragraphes, vous pouvez travailler sur des styles pour des caractères. Les styles pour les paragraphes sont affichés dans la palette avec un symbole paragraphe (¶) devant leur nom, tandis que ceux sans cette icône sont des styles pour des caractères. Vous pouvez créer un nouveau style à partir de rien en sélectionnant Nouveau style... dans le menu de la palette Styles ou en cliquant sur le bouton Nouveau style en bas à gauche de la palette. Pour modifier un style, cliquez sur le bouton Editer les styles dans l'angle inférieur gauche de la palette Styles ou utilisez la palette Site pour afficher le dialogue Edition des styles. Vous pouvez également utiliser le menu de la palette Styles pour afficher ou masquer les styles temporaires dans la palette. Consultez Styles.. La Palette de style 356 Couleurs du Document Utiliser les palettes Couleurs du Web La palette de Style permet d'afficher 3 sous-panneaux : le style du texte, les couleurs Internet et les couleurs personnalisées. Les styles font partie intégrante du travail sur le texte dans Freeway, et les styles de texte sont créés dans Freeway. Vous pouvez créer des styles de deux façons : Freeway va automatiquement générer des styles au fur et à mesure que vous saisissez du texte et que vous le modifiez. vous pouvez également créer un style en modifiant les propriétés du style et l'appliquer ensuite au texte. Les styles que vous créez vous-même sont appelés permanents et sont affichés en gras dans la palette. Les styles automatiques, générés pas Freeway sont appelés temporaires et sont affichés en italiques. Un autre avantage de pouvoir travailler les styles directement dans Freeway et que, en plus d'avoir des feuilles de styles au niveau des paragraphes, vous pouvez aussi travailler des styles au niveau des caractères. Les styles des paragraphes sont signalés dans la palette par le caractère "¶", les autres styles sont des styles pour les caractères. Vous pouvez créer un nouveau style en partant de zéro en utilisant la commande "Nouveau style" dans la palette des styles. Pour éditer des styles, cliquez sur "Éditer des styles" Utiliser les palettes 357 La palette Cadres La palette Cadres propose une vue des jeux de cadres définis dans la page actuelle ainsi qu'un menu contenant les commandes principales pour travailler avec les jeux de cadres. La palette affiche les noms des cadres dans le jeu de cadres et vous permet de sélectionner un cadre en cliquant dessus. Pour sélectionner un jeu de cadres, cliquez sur une bordure séparant deux cadres. Les boutons dans l'angle inférieur gauche permettent de supprimer un jeu de cadres, ajouter un jeu de cadres, supprimer un cadre ou ajouter un nouveau cadre. Cette palette est présentée dans Les cadres. La palette Actions La palette Actions vous permet de modifier les paramètres des actions de la page, des blocs d'action et des blocs d'action indépendants. Différentes options sont disponibles en fonction de chaque action. La présentation par paramètres est disponible pour chaque action, tandis que la présentation graphique peut être désactivée pour certaines actions. Lorsque plusieurs actions sont appliquées sur un bloc ou une page, chaque action apparaîtra dans un onglet à l'intérieur de la palette Actions lorsque le bloc ou la page sera sélectionnée. Les actions sont décrites en détail dans Actions. 358 Raccourcis-Clavier Raccourcis-Clavier Menu Fichier Commande - N Nouveau... Commande - O Ouvrir... Commande - Option - O Ouvrir Sauvegarde... Commande - W Fermer Commande - Option - W Tout Fermer Commande - S Enregistrer Commande - Shift - Option - S Enregistrer sous... Commande - Option - H Lire HTML... Commande - E Importer Texte.../Importer... Commande - Option - E Exporter Commande - P Publier le Site Commande - Control - P Tout publier Commande - Option - P Prévisualiser (dans le navigateur par défaut) Commande - U Transférer... Commande - Y Préférences... Commande - Q Quitter Menu Edition Commande-Z Annuler Commande-X Couper Commande-C Copier Commande-Option-C Copier en tant qu'image (externalise le presse-papier) Commande-Shift-Option-C Copier contenu Commande-V Coller Commande-B Effacer le contenu Commande-A Select All 359 Raccourcis-Clavier Commande - K Lien vers... Commande-Shift-Option-K Suivre lien Commande-Shift-A Ancre... Commande-F Chercher... Commande-G Chercher suivant Commande-Shift-G Chercher précédent Commande - Control - H Chercher sélection Commande - Shift - Control - H Chercher sélection précédent Commande-R Remplacer... Commande-T Remplacer suivant Commande-Shift-T Remplacer précédent Commande-L Orthographe... Menu Page Commande-Option-N Nouvelles Pages... Commande-Option-G Grilles... Commande-Option-F Réglages formulaire... Menu Bloc Commande - Option - T Transformation... Commande - Option - B Bordure... Commande - Option - M Modifier.../Modifier Texte... Commande - Option - X Extension... Commande - Option - L Verrouiller Commande - Shift - Option - L Déverrouiller Commande - = Au premier plan Commande - - A l'arrière plan Commande - / Aligner sur la grille Commande - , Aligner... Commande - Option - D Espacer... Commande - D Dupliquer... 360 Raccourcis-Clavier Commande - Shift - K Image: Taille originale Commande - Shift - D Image: Ajuster la taille du bloc à l'Image Commande - Shift - M Image: Centrer dans la bloc Commande - Shift - F Image:Ajuster la taille de l'image au bloc Commande - Shift - Option - F Image: Mettre à l'échelle et centrer Commande - Shift - Option -. Image: Agrandir Commande - Shift - Option - , Image: Réduire Commande – Backspace Tableau: Joindre Cellules Menu Style Commande - Shift - \ Taille: Autre... Commande - Shift -. Taille: Taille supérieure Commande - Shift - , Taille: Taille inférieure Commande - Shift - Option -. Taille: Augmenter la Taille Commande - Shift - Option - , Taille: Réduire la Taille Commande - Shift - P Style: Normal Commande - Shift - B Style: Gras Commande - Shift - I Style: Italique Commande - Shift - U Style: Souligné Commande - Shift - W Style: Mot Souligné Commande - Shift - O Style: Relief Commande - Shift - S Style: Barré/Ombré Commande - Shift - = Décalage: Monter la ligne de base Commande - Shift - - Décalage: Descendre la ligne de base Commande - Shift - Option - \ Largeur: Autre... Commande - ] Largeur: Augmenter largeur (de 5%) Commande - [ Largeur: Diminuer largeur (de 5%) Commande - Option - ] Largeur: Augmenter largeur (de 1%) Commande - Option - [ Largeur: Diminuer largeur (de 1%) Commande - Shift - ] Espacement: Augmenter espacement (d 5%) 361 Raccourcis-Clavier (de 5%) Commande - Shift - [ Espacement: Diminuer espacement (de 5%) Commande - Shift - Option - ] Espacement: Augmenter espacement (de 1%) Commande - Shift - Option - [ Espacement: Diminuer espacement (de 1%) Commande - Shift - L Alignement: Gauche Commande - Shift - C Alignement: Centré Commande - Shift - R Alignement: Droite Commande - Shift - J Alignement: Justifié Commande - Shift - Option - J Alignement: Justifié forcé Commande - Shift - E Interligne: Autre... Commande - Shift - ' Interligne: Augmenter interligne (de 1 pt ou 10%) Commande - Shift - ; Interligne: Diminuer interligne (de 1 pt ou 10%) Commande - Shift - Option - ' Interligne: Augmenter interligne (de 1/10th pt ou 1%) Commande - Shift - Option - ; Interligne: Diminuer interligne (de 1/10th pt ou 1%) Menu Insertion Commande - Enter Saut (au bloc suivant dans un chaînage) Shift - Return Nouvelle ligne Commande - Shift - Return Filet Menu Affichage Commande - Option - Z Zoom... Commande - 1 Taille réelle Commande - 0 Ajuster la page à la fenêtre Commande - Option - R Règles 362 Raccourcis-Clavier Commande - Shift - Option - I Caractères invisibles Commande - Shift - Option - O Contours Commande - Shift - Option - T Titres Commande - Shift - Option - G Guides Commande - Shift - Option - A Lissage Commande - Shift - Option - P Prévisualisation des images Commande - Shift - Option - H Mise en page HTML Menu Fenêtre Commande - Shift - N Nouvelle fenêtre Commande - Option - I Spécifications Commande - Option - S Site Commande - Option - K Couleurs Commande - Option - Y Styles Commande - Option - A Actions Sélection et édition du texte Entrée Place le curseur de texte dans le bloc sélectionné Shift-Flèche droite Sélectionne caractère suivant Shift-Flèche gauche Sélectionne caractère précédent Shift-Flèche bas Sélectionne jusqu'à la ligne suivante Shift-Flèche haut Sélectionne jusqu'à la ligne précédente Option-Shift-Flèche droite Sélectionne le texte jusqu'au début du mot suivant Option-Shift-Flèche gauche Sélectionne le texte jusqu'au début du mot précédent Option-Shift-Flèche bas Sélectionne le texte jusqu'au début du paragraphe suivant Option -Shift-Flèche haut Sélectionne le texte jusqu'au début du paragraphe 363 Raccourcis-Clavier Option-Flèche droite Déplace au début du mot suivant Option-Flèche gauche Déplace au début du mot précédent Option-Flèche bas Déplace à la fin du paragraphe Option-Flèche haut Déplace au début du paragraphe Commande-Flèche gauche Déplace au début de la ligne Commande -Flèche droite Déplace à la fin de la ligne Commande-Flèche haut Déplace au début du bloc texte Commande-Flèche bas Déplace à la fin du bloc texte Shift-Backspace Supprime le caractère suivant Blocs Shift enfoncé en dessinant Force un carré Dessiner puis enfoncer Option Bloc centré Touches fléchées Déplace le bloc de la distance prédéfinie Option-Touches fléchées Déplace le bloc de la distance prédéfinie / 10 (minimum 1 pixel) Shift-Touches fléchées Redimensionne le bloc de la distance prédéfinie Shift-Option-Touches fléchées Redimensionne le bloc de la distance prédéfinie / 10 Commande-Touches fléchées Déplace le bloc de la distance prédéfinie Commande-Option -Touches fléchées Déplace le bloc de la distance prédéfinie / 10 Commande-Shift-Touches fléchées Redimensionne le bloc de la distance prédéfinie Commande-Shift -Option-Touches fléchées Redimensionne le bloc de la distance prédéfinie / 10 Déplacer poignée et Shift Force un carré Déplacer poignée et Option-Shift Conserve les proportions (met à l'échelle le contenu graphique) Commande-Shift-D Ajuste le bloc à l'image Shift-outil de rotation Tourne la boite mais pas le contenu 364 Raccourcis-Clavier Shift-outil d'inclinaison Incline la boite mais pas le contenu Shift-outil miroir Boite miroir mais pas le contenu Shift-glisser Déplace avec contrainte horizontale/verticale Option-glisser Déplace et duplique le bloc Option-outil de rotation Tourne et duplique le bloc Option-outil d'inclinaison Incline et duplique le bloc Option-outil miroir Fonction miroir et duplique le bloc Shift-Déplacement Augmente la taille du bloc suivant la direction Shift-clic Ajoute le bloc à la sélection Images Commande-Option-T Affiche le dialogue de transformation Commande-Shift-K Image à sa taille originale Commande-Option-D Ajuste la bloc à l'image Commande-Shift-M Centre l'image dans le bloc Commande-Shift-F Ajuste l'image au bloc Commande-Shift-Option-F Ajuste l'image au bloc en conservant les proportions Commande-Shift-Option-. Augmente l'échelle de 5% Commande-Shift-Option-, Diminue l'échelle de 5% Redimensionner bloc-Control Redimensionner bloc-Control Préserve la taille Redimensionner bloc-Commande Met à l'échelle Redimensionner bloc-CommandeOption Met à l'échelle et centre Redimensionner bloc-Option Decoupage Tableaux Commande-Clic sur cellule Sélectionne une cellule Commande-Option-Clic sur ll l él ti é Sélectionne le tableau 365 Raccourcis-Clavier cellule sélectionnée Commande-Clic sur tableau Déplace le tableau Sélectionner une cellule; Commande-Shift-Clic sur autre cellule; puis Commande Backspace Joint les cellules Clic sur bordure Redimensionne colonne/rangee Avec la commande redimensionner – déplacez la bordure entre deux lignes ou colonnes Redimensionne à lignes ou colonnes (la taille du tableau ne change pas) Clic sur bordure-Option Ajoute colonne/rangée Commande-B Efface le contenu des cellules sélectionnées Boites de dialogue et palettes Return ou Enter OK dans la boite de dialogue Escape Annuler Tabulation Sélectionne champ suivant Shift-Tabulation Sélectionne champ précédent Commande-clic sur couleur dans palette Affiche le dialogue de couleur Commande-clic sur style dans palette Affiche le dialogue de style Commande-clic sur dossier palette site Affiche le dialogue de changement du nom du dossier Option-clic sur nom de style dans palette Edite le nom du Style Option-clic sur nom dans palette site Edite le nom Option-clic sur nom dans palette Couleurs Edite nom de la couleur Commande-Control-Tab Affiche palette Outil et sélectionne outil suivant Commande-Control-Shift-Tab Affiche palette Outil et sélectionne outil précédent 366 Raccourcis-Clavier Commande-Shift-Option-1 Sélectionne le premier panneau de la palette Spécifications Commande-Shift-Option-2 Sélectionne le deuxième panneau de la palette Spécifications Option-clic sur le triangle de page Ouvre/Ferme toutes les pages de la palette Site Commande-Majuscules-H Afficher/masquer toutes les palettes Contrôle du Zoom Control-clic ou Control-glisser Augmentation zoom Control-Option-clic Diminution zoom Caractères spéciaux Option-- Trait d'union très long Shift-Option-- Trait d'union long Option-Espace Espace non sécable Option-[ “ Shift - Option - [ ” Option - ] ‘ Shift - Option - ] ’ Autres Majuscule-clic sur bouton de zoom (pastille verte dans la barre des fenêtres) Réduit la fenêtre (OS X) Option-Redimensionnement fenêtre Redimensionnement actif de la fenêtre (OS X) Dépannage dans Freeway 367 Dépannage dans Freeway Il est peu probable que vous rencontriez des problèmes avec Freeway, mais si c'est le cas, reportez-vous à ce chapitre pour savoir si vos problèmes sont décrits ici et lisez le fichier «Lisez-moi» qui est installé à côté de Freeway car il contient les dernières informations. Vous pouvez également contacter notre support technique ([email protected]) et consultez les questions/réponses concernant Freeway sur http://www.tri-edre.com/dans la rubrique «Support Technique». Messages d'erreur au démarrage de l'ordinateur Si un message d'erreur apparaît dès le démarrage de votre Mac, consultez le paragraphe «Conflits de logiciels». Freeway affiche un message d'erreur et refuse de s'ouvrir Si un message d'erreur apparaît lorsque vous tentez d'ouvrir Freeway et s'il refuse de s'ouvrir, cela signifie que vous ne possédez pas la configuration requise pour utiliser Freeway. Consultez le paragraphe «Configuration requise». Si vous utilisez Freeway 3.5 avec Mac OS 9, l'extension CarbonLib 1.5 est requise. Si elle n'est pas installée sur votre Mac, allez sur www.triedre.com, cliquez sur «Support technique», puis sur «Freeway», téléchargez CarbonLib 1.5, installez-la, puis redémarrez votre Mac. Messages d'erreur à propos de ColorSync Freeway 3.5 nécessite ColorSync 2 ou ultérieur. ColorSync est automatiquement installé avec Mac OS 9 et Mac OS X. Ouvrez le tableau de bord «Gestionnaire d'extensions», activez ColorSync puis redémarrez votre Mac. Si ColorSync n'est plus installé, utilisez le CD d'installation de Mac OS pour le réinstaller. Conflits de logiciels Il est peu probable que vous rencontriez un conflit de logiciel. Si vous rencontrez des problèmes avec Freeway et si vous utilisez Mac OS 9, redémarrez votre Mac en désactivant les extensions puis testez à nouveau Freeway. 368 Dépannage dans Freeway Polices endommagées Freeway a besoin de lire les polices disponibles sur votre Système pendant qu’il démarre, et il peut rencontrer un problème si une de ces polices est endommagée. Des polices endommagées ne posent pas forcément des problèmes dans d’autres logiciels. Pour vérifier que ce soit bien une police endommagée qui pose problème, vous pouvez temporairement désactiver les logiciels de gestion de polices, et enlever les polices de leur dossier (par exemple placez les polices dans un dossier temporaire sur le bureau). Si Freeway arrive à démarrer normalement, c’est qu’un des polices pose problème. Remettez les une à une dans le bon dossier, et essayez de lancer Freeway, vous trouverez ainsi quelle police est endommagée. Si vous utilisez Mac OS 9, le dossier des polices est dans le Dossier Système. Sous Mac OS X, il en existe plusieurs : 1. Le dossier police (Fonts) dans le dossier Bibliothèque (Library) dans votre dossier de connexion (Home). Il existe des dossiers identiques à la racine de votre disque dur, mais les logiciels ne doivent pas installer les polices à l’intérieur. 2. Le dossier Polices à l’intérieur du Dossier Système Mac OS 9 (Classic). Les polices placées dans ce dossier sont aussi utilisées par Mac OS X. Conflits logiciels Il se peut qu’un autre logiciel installé sur votre Système empêche Freeway de fonctionner correctement, consultez notre site web ou contactez notre support technique pour connaître les incompatibilités connues. Consultez notre site Web pour avoir les dernières informations sur les éventuels problèmes et solutions découvertes après l'écriture de ce manuel. Index 369 Index Acrobat, 196 Acrobat Action, 267 Action Acrobat Icon, 268 Action Background Extras, 266 Action Background Sound, 267 Action Blast Timer, 255 Action Country List, 271 Action Date Courante, 235 Action de redirections, 260 Action déclencheur, 245, 251 Action Director, 265 Action Flash Extras, 264 Action Link to New Window, 260 Action Move Layer, 269 Action Navigation pop-up, 270 Action No Cache, 274 Action Not In Frameset Redirect, 262 Action Picture to New Window, 260 Action Pop-up Window, 272 Action QuickTime Extras, 263 Action Random Sequence, 255 Action Rollover, 237 Action Self Closing Pop-up Window, 274 Action Sequence Timer, 254 Action Slave Load Frame, 256 Action Téléchargement de fichiers, 268 Action Text Link to New Window, 258 Action Timed Redirect, 260, 306 Action Version Redirect, 261 Actions, 232 Acrobat, 267 Acrobat Icon, 268 Actions en double, 276 Ajouter de nouvelles actions, 275 Background Extras, 266 Background Sound, 267 Blast Timer, 255 bloc Action, 232 bloc d’Action autonome, 232, 235 Country List, 271 Date Courante, 235 DHTML, 253, 269 Director, 265 écrire des actions, 277 esclaves et déclencheurs, 245, 251 FAST, 5 Fenêtre d’édition des actions, 275 Flash Extras, 264 Gérer les Actions, 274 Link to New Window, 260 mettre à jour Actions, 275 mode d’affichage Paramètres, 243 modifier les actions, 277 Move Layer, 269 multimédia, 263 Navigation Pop-up, 270 No Cache, 274 Not in Frameset Redirect, 262 page Actions, 232 Picture to New Window, 260 Pop-up Window, 272 preload, 244 QuickTime Extras, 263 Random Sequence, 255 Redirections, 260 Rollover, 237 Self Closing Pop-up Window, 274 Sequence Timer, 254 Slave Image, 249 Slave Load Frame, 256 Slave Show/Hide Image, 252 Slave Show/Hide Layer, 253 sur un bloc, 234 sur une page, 236 Téléchargement de fichiers, 268 370 Téléchargementss, 267 Text Link to New Window, 258 Text Rollover, 251 Timed Redirect, 260, 306 types, 232 utilisation, 232, 333 Version Redirect, 261 Actions de Téléchargement, 267 Actions esclaves, 245, 251 Actions multimédia, 263 afficher blocs graphiques, 183 grilles, 41 guides des marges, 41 règles, 38 règles et guides, 41 ajouter pages, 25 ajuster bloc au contenu, 178 alignement cellules de tableau, 210 pages HTML, 44 texte graphique, 169 texte HTML, 162 aligner bloc, 128, 322 grilles, 40 règles et guides, 40 texte à côté d’un bloc incrusté, 137 alinéa, 131, 132 alinéas, 163, 169 ancres création, 109 édition, 110 relier, 111 sélection, 110 suppression, 110, 111 supprimer lien, 111 utilisation, 108 visualisation, 110 animation, 81, 191, 232 aperçu dans un navigateur, 8 applets, 197 Index attributs Feuilles de Styles, 159 attributs caractères, 152, 157, 165 attributs paragraphes, 152, 162, 168 barres de défilement, 60 bloc ajuster au contenu, 178 aligner, 128, 322 attributs HTML supplémentaires, 325 bloc Action, 232, 235 bloc flexibles, 45 bloc formulaire, 217 bloc HTML, 114 bloc URL, 117, 327 blocs graphiques, 114 blocs marqueur, 329, 330 bordures, 127 calques, 114 contours, 121 copier et coller, 127 couleur, 54 couleur de la bordure, 54 création, 116, 117, 118, 136, 138 curved, 118 d’une maquette, 127 dans la palette Site, 28, 116 de couleur, 117 de texte, 117 déplacer, 121, 122 dessin, 116, 117, 118, 119 disposition, 129 dupliquer, 128 édition, 115, 119 effet miroir, 125 filets, 133 graphique, 117 hauteur flexible, 45 HTML importé, 331 incliner, 125 incrustation, 136, 137, 138 largeur flexible, 45, 46, 47 lissage, 186, 188 mettre à l’échelle, 125, 126 Index modifier la forme, 123 modifier la forme des courbes de Bézier, 123 non-publication, 126 oval, 118 polygone, 118 rectangulaire, 117 redimensionnement automatique, 142 redimensionner, 121, 137 répartition, 129, 130, 131 rotating, 124 round-cornered, 124 sélection, 119, 120, 137 suppression, 120 suppression du contenu, 120 titres, 126 transformer, 121, 124, 125, 126 types, 114 vérouillage, 122 zones de liens, 114 bloc marqueur HTML, 329, 330 blocs. Voir aussi blocs HTML; blocs graphiques; blocs URL; Actions; zones de liens blocs flexibles, 45 blocs graphiques, 114 afficher, 183 ajuster bloc à, 178 ajuster les couleurs, 186 BMP, 172 centrer, 176 compression, 188 contrôle du dimensionnement, 178 copier, 177 couleur palettes, 185 découpage, 190, 281, 315 échantillonnage bilinéaire, 97, 188 editable, 172 enregistrés dans le document Freeway, 90 entrelacé, 186, 189 EPS, 172 exporter, 177 371 format d’exportation, 184, 189, 190 fusionner, 83, 84, 190, 191, 317, 318 GIF, 172, 185, 186 GIFs animés, 191 Illustrator, 172 importation, 174, 175, 191 incrustation, 136 JPEG, 172, 187, 188, 190 JPEG progressif, 188 localiser, 181 mettre à jour, 181, 183 mettre à l’échelle, 177, 178, 179, 180 nombre de couleurs, 185 noms des fichiers, 183 noms du fichier, 183, 285 non-publication, 181 optimizer, 320 PDF, 172 Photoshop, 172 PICT, 172 PNG, 172, 189 positionner, 176 préférences, 95 prévisualiser, 280 publication, 182 QDGX, 172 qualité JPEG, 188 reéchantillonner, 181, 183 rognage, 178 suppression, 176 tailles de fichiers, 185, 188, 319, 320 Tel quel, 191 texte alternatif, 183 TIFF, 172 transparent, 189, 190 travailler avec, 173 blocs graphiques éditables, 172 blocs graphiques entrelacés, 186, 189 blocs graphiques GIF, 172, 185, 186 372 blocs graphiques JPEG, 172, 187, 188, 190 blocs graphiques PNG, 172, 189 blocs graphiques Tel quel, 191 blocs HTML, 114 blocs URL, 117, 327 blocs-outils de création, 337 BMP blocs graphiques, 172 bordures bloc, 127 cadres, 76 tableaux, 208, 209 bouton de validation. Voir formulaires boutons. Voir formulaires cadres avantages, 60 barres de défilement, 60 bordures, 76 cible par défaut, 60, 78 compatibilité, 62 comportement du défilement, 75 contenu sans cadres, 66 création de signets, 62 créer une page avec des cadres, 64, 66 définir la cible, 59, 76, 77, 78 éditisur une page sources, 69 inconvénients, 61 insertion, 70 jeu de cadres, 59 jeu de cadres emboîtés, 70 liens, 59 moteurs de recherche, 63 nommage, 59, 76 non-redimensionnable, 74 options supplémentaires, 79 orientation, 71 page du jeu de cadre, 59 page source, 59, 64, 68, 69 redimensionner, 72, 73, 74 sélection, 71 suppression, 71 terminologie, 58 travailler avec, 58, 67 Index calques avantages, 81 bloc formulaire, 84 création, 83, 84 débordement, 86 empêcher les débordements, 86 empiler, 83 fixes, 85 programmer, 84 utilisation, 80, 81, 85 Carte des Liens, 27 case à cocher. Voir formulaires césure, 148, 149, 170 chainage de blocs Texte, 134, 135, 136 champ d’édition. Voir formulaires cible hyperliens, 76 liens entre cadres, 59, 76, 77, 78 cible par défaut cadres, 78 classement pages, 28 compression, 188 compteurs, 117, 327 contenu sans cadres, 66 copier bloc, 127 blocs graphiques, 177 cellules de tableau, 211 couleur de fond CSS texte, 161 pages, 30 couleur de premier plan, 230 couleurs appliquer, 53 couleurs Internet, 50, 52, 53 création, 52, 54 dupliquer, 55 édition, 52, 55 hexadécimal, 50, 53 importation, 56 permanentes, 51, 57 personnaliser, 51 pourcentages RVB, 50 Index suppression, 56 temporaires, 51 utilisation, 50 courbe, 118, 123. Voir courbes de Bézier courbes de Bézier ajouter points, 123 ajouter un point au tracés, 123 courbe, 118, 123 dessin, 118, 133 modifier la forme, 123 création ancres, 109 bloc, 116, 117, 118, 136, 138 couleurs, 52, 54 documents, 11, 14 grilles, 42 guides des marges, 43 jeux de polices, 158, 159 maquettes, 33, 34 page avec cadres, 64, 66 règles et guides, 39 répertoire sur un serveur, 299 sites, 7, 11 styles, 150, 152, 153 tableaux, 200, 201 CSS. Voir Feuilles de Styles débordement calques, 86 texte, 142 décalage de texte, 160, 168 défilement cadres, 75 delimited texte, 212 dépannage, 367 déplacer bloc, 121, 122 règles et guides, 40 descentes, 137 dessin bloc, 116, 117, 118, 119 courbe, 118 courbes de Bézier, 118, 133 filets, 133 lines, 118 documents 373 création, 11, 14 enregistrement, 18, 19 fermeture, 36 HTML par défaut, 14, 82 modèles, 14 ouvrir un document sauvegardé, 19 réglages, 14 sauvegardes automatiques, 19, 90 taille par défaut, 15 DOS noms des fichiers, 16 dossier des ressources, 87 dossier du site. Voir sites: dossier du site dupliquer bloc, 128 couleurs, 55 édition ancres, 110 bloc, 115, 119 couleurs, 52, 55 pages sources d’un cadre, 69 styles, 152, 153 tableaux, 202 texte, 143 effet miroir bloc, 125 effets spéciaux de texte couleur de premier plan, 230 texte transparent, 230 utilisation, 230 élément hauteur flexible, 47 enregistrement documents, 18, 19 envoi des fichiers annuler un transfert, 296 chemin, 294 comment envoyer, 289, 294 comment le site est transféré, 295 création d’un répertoire, 299 enregistrer fichiers log, 293 FTP détails, 296 logiciels FTP spécialisés, 298 374 messages d’erreur, 297 méthode de transfert, 13, 289 mode FTP passif, 293 mot de passe, 292 options, 290 répertoire FTP, 292 script, 293 serveur FTP, 292 suppression de fichiers, 299 transfert, 294 transfert FTP, 13, 289, 291 Utilisateur, 292 épaisseur du texte, 167 EPS blocs graphiques, 172 espace entre caractère texte graphique, 167 espace lettres CSS, 161 texte graphique, 167 espace mots (CSS), 161 exporter blocs graphiques, 177 texte, 150 FAST, 5 Fenêtre d’édition des actions, 275 Fenêtre de Style, 152, 153 fenêtre Image, 180 Fenêtre noms des fichiers, 16 fenêtre Ressources, 182 fenêtres empiler, 36 fenêtres multiples, 35 fermeture, 36 mosaïque, 36 fermeture documents, 36 fenêtres, 36 Feuilles de Styles (CSS), 80, 156, 157, 159 attributs, 159 fichiers. Voir documents FileMaker, 333 filets. Voir bloc: filets; texte: filets Flash, 193, 195 formulaires action, 215, 224 Index bouton de validation, 215, 220, 344 bouton radio, 219 boutons, 220 case à cocher, 218 champ d’édition, 221 champs cachés, 224 création, 215 création blocs formulaire, 217 et les calques, 84 listes de sélection, 222 mailto, 216 mode, 224 pop-up menus, 222 réglages, 215, 224 résultats, 217, 224 scripts, 225 tests, 225 utilisation, 214 zones de texte, 223, 224 Freeway Express, 4 Freeway Pro, 4 FTP, 13, 289, 291 détails, 296 log, 293 répertoire, 292 script, 293 serveur, 292 fusion cellules de tableau, 210 fusionner blocs graphiques, 83, 84, 190, 191, 317, 318 génération de l’HTML efficace/lisible, 94, 284 optimizer, 319, 320, 322 personnalisation, 324, 325 préférences, 94, 95, 283 renforcement de tableaux, 95, 285 retour à la ligne, 95, 285 visualisation, 287 GIFs animés, 191 grilles afficher, 41 alignement, 40 Index couleur, 40, 93 création, 42 pas du magnétisme, 41, 93 suppression, 42 utilisation, 11, 38, 41 guides. Voir règles et guides; marges et guides guides des marges. Voir aussi règles et guides afficher, 41 couleur, 40, 93 création, 43 pas du magnétisme, 41, 93 suppression, 43 utilisation, 38 guillemets, 164 guillemets courbes, 164 hauteur flexible, 45, 47 horizontal filets. Voir bloc: filets; texte: filets HTML 3.2, 80 HTML 4.0, 80, 156 HTML dynamique (DHTML), 81, 84, 232 HTML dynamique (DHTML) Actions, 252 hyperliens. Voir aussi ancres Adresse relative, 99 ancres, 111 appliquer, 100, 101, 102 cibles, 76 couleurs, 104, 105 dans les cadres, 59 externe, 99, 102, 107 following, 27 FTP, 106 gérer les liens, 107 HTTP, 106 HTTPS, 106 interne, 98, 101, 102 mailto, 107 news, 107 options supplémentaires, 325 sélection, 103 suppression, 103, 111 tests, 106 375 types, 106 URLs, 99 utilisation, 98 vers une nouvelle page, 102 visualisation, 103 zones de liens, 103 Illustrator blocs graphiques, 172 images. Voir blocs graphiques images de fond, 31 Import/Export plug-ins, 172, 173 importation blocs graphiques, 174, 175, 191 couleurs, 56 delimited texte, 212 depuis scanners, 175 fichiers HTML, 21 sites, 21 styles, 154 texte, 141, 142 importer depuis scanners, 175 incliner bloc, 125 inline éléments. Voir bloc:incrustation insertion cadres, 70 cellules de tableau, 205 colonnes de tableau, 205, 206 lignes de tableau, 205, 206 interligne, 132 CSS, 162 texte graphique, 168 interligne de la première ligne, 132 Java, 197 JavaScript, 84, 197, 220, 324 jeux de polices création, 158, 159 utilisation, 158 JPEG progressif, 188 langue encodage, 161 largeur flexible, 45, 46, 47 liens. Voir hyperliens lines. Voir courbes de Bézier lissage, 93, 186, 188, 279 376 prévisualiser, 279 liste des navigateurs, 286 listes de sélection. Voir formulaires lists, 162 localiser blocs graphiques, 181 logiciels FTP spécialisés, 298 création d’un répertoire, 299 suppression de fichiers, 299 maquettes appliquer, 30, 33 création, 33, 34 ré-appliquer, 34 utilisation, 24, 32 messages d’erreur, 367 meta tags ajouter, 304 contenu description, 303, 305 contenu mots clés, 303, 305 et les moteurs de recherche, 303 redirection, 306 utilisation, 303, 307 méthode de transfert, 289 mettre à jour blocs graphiques, 181, 183 mettre à l’échelle bloc, 125, 126 blocs graphiques, 177, 178, 179, 180 mise en page HTML cadrage de la page, 44 calques, 80, 81, 83, 84, 85 compatibilité des navigateurs, 81 flexible, 44 HTML 3.2, 80 HTML 3.2 + CSS, 80 HTML 4.0, 80 marges navigateurs, 314 problèmes, 281, 316, 317, 319 tableau, 80, 83, 285, 313 tableaux imbriqués, 321 visualisation, 319 modèles, 14 modifier la forme bloc, 123 Index courbes de Bézier, 123 moteurs de recherche, 303, 307 mots clés. Voir meta tags multimedia Acrobat, 196 Actions Freeway, 199 applets Java, 197 Flash, 195 plug-ins, 193, 198 QuickTime, 193, 194 Shockwave Director, 196 Shockwave Flash, 193 utilisation, 193 navigateur rafraîchissement, 288 navigateurs compatibilité, 81 compatibilité du PNG, 189 marges, 314 mise en cache, 274 rediriger, 81 support de l’HTML 4.0, 81 nommage cadres, 59, 76 pages, 12, 25, 29, 30 noms des fichiers alphanumeric, 16 DOS, 16 Fenêtres, 16 for pages HTML, 12 graphique, 183 longueur maximale, 95 UNIX, 16 non-publication bloc, 126 blocs graphiques, 181 nouvelle fenêtre hyperliens, 76 Nuancier, 53, 54 Onglet Apparence de page, 29, 340 Onglet Page, 29, 339 optimizer blocs graphiques, 320 génération de l’HTML, 319, 320, 322 Index options supplémentaires bloc, 325 cadres, 79 hyperliens, 325 orientation cadres, 71 orthographe césure, 148, 149 dictionnaires utilisateurs, 147, 148 langues, 147 vérification, 146, 147 outil Action, 337 outil de sélection, 337 outil de zoom, 337 outil formulaire, 338 outil zone de liens, 338 Outils sélection, 119 outils de transformation, 338 page nom du fichier, 25 pop-up menu, 26 titre, 25 page d’accueil, 26 page index, 26 page par défaut, 26 pages. Voir aussi maquettes; grilles, guides des marges; règles et guides ajouter, 25 aller à une page, 26 cadrage de la page HTML, 44 classement, 28 couleur de fond, 30 dans la palette Site, 24, 25, 26, 28, 30 doit être publiée, 283 image de fond, 31 marqueurs HTML, 325 naming, 12 nommage, 29, 30 noms des fichiers, 12 réarrangement, 28 redirection du navigateur, 306 suppression, 28 377 tableau de montage, 25, 90 taille, 15, 23 taille recommandée, 23 travailler avec, 25 version de l’HTML, 83, 156 palette d’image, 185 palette d’Outils blocs-outils de création, 337 case à cocher Calque, 338 outil Action, 235, 337 outil de sélection, 337 outil de zoom, 337 outil formulaire, 217, 338 outil zone de liens, 338 outils de création, 116, 119 outils de transformation, 338 tableaux-outils de création, 337 texte-chaînage, 338 touches spéciales, 336 utilisation, 336 palette des Cadres, 67, 71, 357 Palette Inspecteur, 29, 115 Form Items panels, 354 Onglet Apparence de page, 340 Onglet Page, 339 palette d’Actions, 357 panneau Bloc, 115, 341 panneau Bloc Incrusté, 342 panneau Cadre, 67, 353 panneau Cellule de Tableau, 351 panneau Export, 115, 343 panneau Export des images fusionnées, 115, 347 panneau Filet, 350 panneau Jeu de cadres, 352 panneau Tableau, 350 panneau Texte, 348 utilisation, 339 palette Site, 24, 25, 26, 28, 30, 116, 129, 283, 320, 354 Palette Styles, 51, 151, 153, 355 Onglet Couleurs Internet, 52, 355 Onglet Couleurs personnalisées, 51, 355 378 pop-out menu, 52 palettes. Voir aussi palette d’image Cadres, 67, 71, 357 Inspecteur, 29, 67, 115, 339 Outils, 116, 119, 217, 235, 336 Site, 24, 25, 26, 28, 30, 116, 129, 283, 320, 354 Styles, 51, 52, 151, 153, 355 utilisation, 335, 336 panneau Bloc, 341 panneau Bloc Incrusté, 342 panneau Export, 343 panneau Filet, 350 panneau Jeu de cadres, 352 panneau Tableau, 350 panneau Texte, 348 PDF blocs graphiques, 172 personnalisation génération de l’HTML, 324, 325 Photoshop blocs graphiques, 172 PICT blocs graphiques, 172 plug-ins, 193, 198 Import/Export, 172, 173 polices HTML, 92, 157, 158 polices manquantes, 166 problèmes avec, 368 sur PC, 13, 279, 281, 317 texte graphique, 166 polices manquantes, 166 polices PC, 13, 279, 281, 317 pop-up menus. Voir formulaires positionner blocs graphiques, 176 tableaux, 203 préférences AppleScript, 91 application, 89 balises d’aide, 90 blocs graphiques, 95 comportement de la sélection, 91 couleur invisible, 92 couleurs bitmap, 90 document, 89 échantillonnage bilinéaire, 97 Index général, 89 génération de l’HTML, 94, 95 GIF/PNG, 96 grilles et guides, 93 JPEG, 96 largeur tableau de montage, 90 marges navigateur, 91 pas du déplacement, 90 polices, 92 retour à la ligne, 95 sauvegardes, 90 style par défaut, 93 taille mini pour le lissage, 93 texte, 91 texte alternatif, 96 preload, 244 prévisualisation blocs graphiques, 280 dans un navigateur, 12, 286 génération de l’HTML, 287 lissage, 279 mise en page HTML, 281, 319 texte, 279 programmer calques, 84 publication, 8, 13, 283. Voir aussi génération de l’HTML blocs graphiques, 182 dossier du site, 283 fichiers modifiés, 283, 300 forcer la reconstruction, 284 préférences HTML, 284, 285 tout le site, 284 publication de bases de données, 333 QuickTime, 193, 194 raccourcis claviers autres, 366 blocs, 363 blocs graphiques, 364 boîtes de dialogue et palettes, 365 charactères spéciaux, 366 menu Affichage, 361 menu Bloc, 359 menu Edition, 358 Index menu Fenêtre, 362 menu Fichier, 358 menu Insertion, 361 menu Page, 359 menu Style, 360 sélection texte, 362 tableaux, 364 valeur du pas du déplacement, 90 zoom, 366 réarrangement pages, 28 rechercher et remplacer du texte, 144, 145 redimensionner bloc, 121, 137 blocs graphiques, 177, 178 cadres, 72, 73, 74 lignes de tableau et colonnes, 208 tableaux, 203, 204 rediriger pages dans un navigateur, 306 reéchantillonner blocs graphiques, 181, 183 règles afficher, 38 origine, 38 utilisation, 38 règles et guides. Voir aussi guides des marges afficher, 41 alignement, 40 couleur, 40, 93 création, 39 déplacer, 40 pas du magnétisme, 41, 93 suppression, 40 utilisation, 11, 38, 39 relier ancres, 111 renommage styles, 154 répartition bloc, 129, 130, 131 résolution 379 écran, 23 ressources, 16 retour à la ligne, 95, 163 retrait, 131 rognage blocs graphiques, 178 rotating bloc, 124 saut insertion, 136 sauts de ligne, 164 sauvegardes, 19, 90 scinder cellules de tableau, 210, 211 scinder documents, 300 scripts de connexion, 293 sélection ancres, 110 bloc, 119, 120, 137 cadres, 71 cellules de tableau, 204, 205 cellules de tableaux, 204 hyperliens, 103 tableau lignes ou colonnes, 204, 205 tableaux, 205 texte, 135, 143 séparer le site en plusieurs documents, 15 serveurs et navigateurs, 214 serveurs Web fonctionnement, 214 Shockwave, 193, 196 site management, 300 sites. Voir aussi documents; prévisualiser; publication; envoi des fichiers contenu, 10 création, 7, 11 dossier des ressources, 87 dossier du site, 15, 283 Étapes de travail, 9 importation, 21 mise en page, 9 navigation, 11 noms des fichiers, 16 380 préparation de la création, 9 ressources, 16 séparer en plusieurs documents, 15 sous dossiers, 24, 28, 32 Slave Image Action, 249 Slave Show/Hide Image Action, 252 Slave Show/Hide Layer Action, 253 sous dossiers. Voir sites: sous dossiers splash écran, 260, 306 style par défaut, 93, 152, 155 styles alignement (HTML), 162 alignement (texte graphique), 169 alinéa (HTML), 163 alinéa (texte graphique), 169 appliquer, 150, 153 attributs caractères, 152, 157, 165 attributs paragraphes, 152, 162, 168 case (CSS), 161 césure (texte graphique), 148, 149, 170 compatibilité des navigateurs, 156, 157 couleur, 160, 168 couleur de fond (CSS), 161 création, 150, 152, 153 curseur (CSS), 161 décalage (HTML), 160 décalage (texte graphique), 168 édition, 152, 153 enlever, 154 épaisseur (texte graphique), 167 espace lettres (CSS), 161, 170 espace lettres (texte graphique), 170 espace mots (CSS), 161, 170 espacement (texte graphique), 167, 170 expace avant/après (CSS), 163 Index expace avant/après (texte graphique), 170 Feuilles de Styles, 80, 156, 157, 159 graphique, 151 HTML, 151, 156, 157 HTML 3.2, 156 HTML 3.2 + CSS, 156 HTML 4.0, 156 hyperliens (CSS), 105 importation, 154 inclinaison (texte graphique), 167 interligne (CSS), 162 interligne (texte graphique), 168 langue, 161, 168 liste (HTML), 162 modifier, 150 permanent, 151, 155 police (HTML), 92, 157 police (texte graphique), 166 renommer, 154 sans style, 152 style par défaut, 93, 152, 155 taille (HTML), 159 taille (texte graphique), 167 temporaires, 151, 155 travailler avec, 150 type de style (HTML), 160 type de style (texte graphique), 166 width (texte graphique), 167 suivre un hyperlien, 27 suppression ancres, 110, 111 bloc, 120 blocs graphiques, 176 cadres, 71 cellules de tableau, 205 colonnes de tableau, 205, 206 contenu, 120 contenu des cellules, 207 couleurs, 56 fichiers sur un serveur, 299 grilles, 42 guides des marges, 43 Index hyperliens, 103, 111 lignes de tableau, 205, 206 pages, 28 règles et guides, 40 survol, 105 tableau de montage, 25, 90 tableaux ajouter contenu, 211, 212 alignement des cellules, 210 bordures, 208, 209 cellules vides, 207 copier et coller dans un tableau, 211 couleurs, 210 création, 200, 201 édition, 202 espacement des cellules, 209 formatter le texte, 211 fusionner des cellules, 210 importation blocs graphiques, 213 importation de texte tabulé, 212 insertion de cellules, 205 insertion de colonnes, 205, 206 insertion de lignes, 205, 206 positionner, 203 redimensionner, 203, 204 redimensionner lignes et colonnes, 208 renforcement, 95, 285 retrait des cellules, 209, 210 saisie texte, 212 scinder les cellules, 210, 211 sélection, 205 sélection des cellules, 204, 205 sélection lignes ou colonnes, 204, 205 spans, 210 suppression cells, 205 suppression de colonnes, 205, 206 suppression de lignes, 205, 206 suppression du contenu des cellules, 207 utilisation, 200 tableaux-outils de création, 337 381 tabulations dans le texte, 164 tailles de fichiers, 185, 188, 319, 320 tests hyperliens, 106 Text Action Rollover, 251 texte aligner avec un bloc incrusté, 137 alinéa, 131, 132 attributs, 157, 168 chainage de blocs, 134, 135, 136 couleur, 54 débordement, 142 descentes, 137 édition, 143 espace entre caractère, 167 exporter, 150 filets, 133 graphique, 165, 166, 167, 168, 169, 170 guillemets, 164 habillage, 132, 133, 138 HTML, 156, 157, 158, 159, 160, 161, 162, 163 importation, 141, 142 insérer un saut, 136 interligne de la première ligne, 132 lissage, 186, 188 rechercher et remplacer, 144, 145 redimensionnement automatique, 142 retrait, 131 saisie, 141 sélection, 135, 143 tabulations, 164 texte vertical, 170 travailler avec, 140 texte alternatif, 96, 183 texte taille, 159, 167 texte transparent, 230 texte vertical, 170 382 texte-chaînage, 338 TIFF blocs graphiques, 172 titre, 25 modifier, 29 transformer bloc, 121, 124, 125, 126 transparent blocs graphiques, 189, 190 type de style, 160, 166 UNIX noms des fichiers, 16 URL. Voir hyperliens vérification orthographe, 146, 147 Index vérouillage bloc, 122 visualisation ajuster à la fenêtre, 35 fenêtres multiples, 35 génération de l’HTML, 287 grossissements, 34 hyperliens, 103 invisibles, 92 taille réelle, 35 zones de liens, 103, 114 zones de texte. Voir formulaires zoom, 34