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