Tri-Edre FreeWay Manuel utilisateur

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