Tri-Edre FreeWay Manuel utilisateur

Utiliser Freeway
Préface
Copyright et remerciements
La version française est réalisée par TRI-EDRE.
Ce guide concerne Freeway Pro 4.
Contacts
Copyright © 1997-2006 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 d’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/.
ii
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
83 510 LORGUES (France)
Tél. : (+33) 04 98 10 10 50
Fax : (+33) 04 98 10 10 55
Web : http://www.tri-edre.fr/
E-mail : 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/ - E-mail : info@softpress.com
i
Définir l'apparence des liens
Définir une zone cliquable
33
33
Créer un site
1
Travailler avec du texte
35
Créer un nouveau site
Enregistrer les fichiers
Restaurer une sauvegarde
2
3
3
Publier et prévisualiser
5
Publier le site
Prévisualiser votre site
Transférer votre site vers un serveur web
Publier votre site avec le Partage Web personnel de Mac OS X
6
6
7
8
Inclusion de texte dans une page
Créer des blocs texte
Spécifier les apparences du texte
Éditer du texte
Vérification orthographique
Appliquer des effets au texte graphique
Travailler avec les styles
Travailler avec des feuilles de styles
36
37
39
41
42
43
46
50
Images
53
Utiliser les images sur vos pages Web
Créer des images
Manipuler des blocs graphiques
Redimensionner les images
Ajouter des effets aux images
Fusionner les images
Contrôle de l'exportation des images
54
55
57
59
60
63
64
Multimédia
Gestion des ressources
Problèmes de publication
64
67
67
Créer des tableaux
69
Créer des tableaux
Déplacer et redimensionner les tableaux
Sélectionner les cellules
Redimensionner les lignes ou colonnes
Modifier les tableaux
70
71
72
72
73
Concevoir son site
11
Changer l'affichage
Créer des mises en pages précises
Aligner les blocs
Travailler avec les couleurs
12
13
17
17
Créer des pages
21
Créer des pages
Mise en page fixe, utilisation des maquettes
Créer des Maquettes
Appliquer une maquette
Structurer votre site
Lien vers une page
Liens à l'intérieur d'une page
Liens vers d'autres sites
Gestion des liens dans la carte des liens
22
23
24
25
26
29
30
32
32
Chapitres
Utiliser Freeway
iii
74
75
Créer des formulaires
77
À quoi servent les formulaires ?
Conception d'un formulaire
Bouton
Case à cocher
Bouton radio
Menu/Liste
Champ d'édition
Zone de texte
Régler le formulaire
78
78
79
80
80
80
82
82
83
Créer des effets
85
À quoi servent les actions
Aperçu des actions
Boutons dynamiques et texte
Images esclaves et calques
Animations
Fenêtres surgissantes (pop up)
86
86
90
93
94
96
Navigation
Actions graphiques
Chapitres
Réunir et scinder des cellules
Régler l'apparence des tableaux
99
100
iv
des effets dynamiques. Ce guide est conçu pour vous aider à traduire votre
vision dans un site Web complet et pleinement fonctionnel.
Pour éviter toute ambiguïté, ce guide adopte les conventions
typographiques suivantes :
Cette documentation est commune aux deux versions Freeway Pro et
Freeway Express. Les informations qui sont uniquement réservées à
Freeway Pro sont indiquées par le sigle ������������������
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.
Contrôle,
Option,
Commande,
Entrée,
Majuscule
Représente les touches spéciales du clavier :
Controle, Option (ou Alt), Commande, Entrée et
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
Préface
Conventions
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.
v
Créer un site
Ce chapitre explique comment créer un nouveau site,
en partant d'un modèle ou d'un document vierge
personnalisé. Il explique aussi comment ajouter des
pages, visualiser les fichiers du site dans la palette
Site, voir la structure complète du site dans la
Carte des liens ������������������ .
Créer un site
Créer un nouveau site
Freeway enregistre toutes les informations à propos d'un site dans un seul
et unique document.
Soit :
• Cliquer sur l'onglet Personnalisé vous donnant accès aux réglages
techniques du site pour un document vierge ������������������ :
Pour créer un nouveau document
• Ouvrir le menu Fichier et choisir Nouveau…
La fenêtre Nouveau Document apparaît et vous permet de choisir les
réglages que vous voulez pour votre site.
Vous pouvez soit :
• Cliquer sur l'onglet Modèles pour afficher des modèles fournis avec
Freeway qui vous aident à créer la base de votre site :
2
Voici les différentes options :
Option
Description
HTML par défaut
Spécifie la norme utilisée pour le code HTML
généré. Vous pouvez changer individuellement
page par page ce réglage plus tard.
Taille par défaut
Spécifie la taille en pixel des nouvelles pages
du site. Choisissez un format prédéfini ou
entrez les valeurs désirées dans les champs
correspondants.
Dossier site
Spécifie le dossier dans lequel seront créées les
pages HTML du site.
Description
Ressources
Vous permet de définir où les images et les
autres ressources sont enregistrées lorsque le
site est publié : Dossier commun enregistre
les images dans un dossier unique, Dossiers
séparés enregistre les images dans des dossiers
séparés pour chaque sous dossiers du site, Avec
les fichiers HTML enregistre les images de
façon mélangées avec les pages HTML.
Nom des fichiers
Spécifie le format utilisé pour les noms
des pages HTML, afin d'avoir la meilleure
compatibilité possible. Choisissez
Alphanumérique pour une compatibilité
maximum avec les anciens serveurs web, DOS
pour les serveurs MS-DOS, UNIX/Windows
pour les serveurs actuels Mac OS X, Linux ou
Windows.
• Cliquez sur OK pour créer le site.
Si vous choisissez un modèle, il vous sera demandé d'enregistrer le fichier.
Freeway crée un dossier site qui contient les pages HTML et les ressources
générées lorsque vous publiez le site ainsi qu'un dossier Media contenant
les maquettes et les images nécessaires :
Enregistrer les fichiers
Pour enregistrer le site
• Ouvrir le menu Fichier et choisissez Enregistrer.
La première fois que vous enregistrez, la fenêtre d'enregistrement s'affiche.
Entrez le nom que vous voulez pour votre projet et choisissez un dossier de
destination :
Créer un site
Option
Si vous voulez enregistrer le document comme un modèle :
• Sélectionnez le bouton Modèle.
• Cliquez sur Enregistrer.
Restaurer une sauvegarde
Freeway crée automatiquement des copies de vos documents lorsque
vous enregistrez le projet pour la première fois et à chaque ouverture. La
sauvegarde a le même nom que l'original mais avec le suffixe .fwbackup.
Si le fichier est corrompu, ou que vous n'arrivez pas à l'ouvrir, par exemple
à cause d'un problème de disque, vous pouvez toujours ouvrir votre projet
grâce à la sauvegarde.
3
Créer un site
4
Pour restaurer une sauvegarde
• Double-cliquez sur le fichiers de sauvegarde.
Le projet s'ouvrira comme si c'était un nouveau document sans titre.
Publier et prévisualiser
���
Ce chapitre décrit les options de prévisualisation
de votre site, dans Freeway ou dans un navigateur
externe de votre choix. Il explique également
comment publier le site et le transférer vers les
serveurs de votre hébergeur.
���
Publier et prévisualiser
Publier le site
La publication génère les pages HTML avec leurs images associées ainsi
que les autres ressources.
Pour prévisualiser votre site dans un Navigateur
• Ouvrez le menu Fichier et choisissez Prévisualiser dans un
navigateur, sélectionnez ensuite le navigateur de votre choix dans le
sous menu :
Pour publier votre site :
• Ouvrez le menu Fichier et choisissez Publier le site.
Notez que la publication va automatiquement remplacer tous les éléments
obsolètes, pages HTML ou images. Vous ne devez pas utiliser un autre
logiciel pour éditer les pages générées, sinon elles seront écrasées par
Freeway.
Prévisualiser votre site
La prévisualisation de votre site crée automatiquement des fichiers dans
le dossier du site et charge la page dans le navigateur web spécifié par
vos soins. Cela peut vous permettre d'essayer votre site sur plusieurs
navigateurs et/ou plateformes.
Pour prévisualiser votre site dans Freeway
• Cliquez sur l'onglet Prévisualiser dans le coin en bas à droite de la
fenêtre de Freeway :
Par défaut le menu ne montre que Safari, le navigateur fournit avec Mac
OS X, mais vous pouvez ajouter d'autres navigateurs en utilisant l'item
Réglage du navigateur… voir section suivante.
Pour ajouter un navigateur
• Ouvrez le menu Fichier et choisissez Prévisualiser dans un
navigateur, puis choisissez Réglage du navigateur…
La page actuellement à l'écran sera alors prévisualisée.
6
La fenêtre affiche la liste des navigateurs que vous avez sélectionnés pour
la prévisualisation, et vous permet d'en ajouter ou d'en supprimer :
Transférer votre site vers un serveur web
Pour que votre site soit accessible sur Internet, vous devez copier les pages
HTML ainsi que les ressources vers un serveur web.
La procédure dépend du type d'accès au serveur web, par exemple un
serveur FTP, un compte .Mac ou encore une copie simple de fichiers.
Transfert vers un serveur FTP
Pour ajouter un nouveau navigateur
• Cliquez sur le bouton Nouveau…, puis choisissez le navigateur dans
votre disque dur.
Si votre espace vous est fourni par votre fournisseur d'accès, la méthode
la plus courante est le transfert FTP. Pour transférer, vous devez connaître
le nom du serveur, votre nom d'utilisateur et votre mot de passe. Ces
informations vous sont fournies par votre hébergeur.
Publier et prévisualiser
���
• Ouvrez le menu Fichier et choisissez Transférer…, ensuite choisissez
FTP dans le menu déroulant :
Pour supprimer un navigateur
• Sélectionnez le navigateur et cliquez sur le bouton Effacer.
Pour chercher tous les navigateurs installés
• Cliquez sur le bouton Maj.
Pour choisir le navigateur par défaut
Le navigateur par défaut est indiqué par une coche dans la colonne
Défaut.
• Cliquez dans la colonne Défaut pour choisir le navigateur adéquat.
• Remplissez les champs demandés.
Le champ Répertoire est facultatif et peut être laissé vide.
Si vous laissez un des deux champs Utilisateur ou Mot de passe vide,
Freeway vous demandera les valeurs nécessaires à chaque transfert.
• Sélectionnez le Mode FTP Passif (PASV) si votre fournisseur le
nécessite ou si les transferts échouent.
7
���
Publier et prévisualiser
• Laissez Enregistrer log FTP désactivé sauf si votre fournisseur vous
demande les erreurs de transaction, en cas de problème.
Dans certain cas, un fournisseur d'accès peut vous demander de saisir
des commandes FTP. Utilisez pour cela un script en cliquant sur le bouton
Script…
• Cliquez sur le bouton OK pour transférer les fichiers via FTP.
Transfert vers un compte .Mac
• Ouvrez le menu Fichier et choisissez Transférer…, ensuite choisissez
.Mac dans le menu déroulant :
• Entrez votre nom et mot de passe dans les champs appropriés et cliquez
sur le bouton OK pour transférer le site.
Votre site peut être accessible à l'adresse :
http://homepage.mac.com/votreNom/
où votreNom est votre nom d'utilisateur .Mac.
Notez que la page ouverte par défaut doit avoir comme nom de fichier
index.html, vérifiez que ce nom est bien présent dans la palette
Inspecteur de la page d'accueil.
8
Publier votre site avec le Partage Web
personnel de Mac OS X
Vous pouvez utiliser le partage web personnel de Mac OS X pour héberger
votre site. Dans ce cas, vous utilisez une copie de fichiers pour le transfert.
Activer le partage web personnel
• Ouvrez le panneau Partage dans les Préférences Systèmes.
• Dans l'onglet Services activez Partage Web personnel :
Transférer avec une copie de fichier
• Ouvrez le menu Fichier et choisissez Transfert…, puis copie fichier :
• Cliquez sur le bouton Sélectionner… et choisissez le dossier dans
Publier et prévisualiser
���
lequel vous désirez envoyer/copier le site.
Si vous utilisez le partage web personnel, il existe un dossier Sites dans
votre répertoire de connexion (maison).
Vous pouvez ensuite accéder à votre site avec une adresse de la forme :
http://xxx.xxx.xxx.xxx/monnom/
où xxx.xxx.xxx.xxx est l'adresse IP de votre machine, et monnom est
votre nom d'utilisateur.
9
���
Publier et prévisualiser
10
Concevoir son site
Ce chapitre explique la façon générale de concevoir
votre site, et la façon de travailler avec Freeway, les
changements d'affichage, les règles, l'alignement
des blocs et toutes les options de couleur.
Concevoir son site
Changer l'affichage
Lorsque vous travaillez sur une page du site ou sur la maquette, vous
pouvez choisir l'échelle à laquelle vous voulez travailler, en visualisant
une page de façon plus globale, vous pouvez travailler sur la disposition
générale des blocs. Vous pouvez avoir plusieurs "vues" ou fenêtres pour la
même page, avec des zooms différents par exemple.
Pour changer d'échelle
• Choisissez l'échelle dans le menu déroulant Zoom en bas à droite de la
fenêtre :
• Entrez la valeur de l'échelle et cliquez sur le bouton OK pour zoomer.
Pour afficher la page dans toute la fenêtre
• Ouvrez le menu Affichage et choisissez Ajuster la page à la fenêtre,
ou choisissez le même item dans le menu déroulant du zoom en bas à
droite de la fenêtre.
Pour déplacer la page dans la vue
•Maintenez la touche Option (alt).
Le pointeur de la souris prend la forme d'une main.
• Déplacez la page grâce à la souris en cliquant et maintenant celle-ci.
Pour travailler avec plusieurs fenêtres
������������������
• Ouvrez le menu Fenêtre et choisissez Nouvelle fenêtre pour afficher
une nouvelle fenêtre contenant la page courante.
Ceci vous permet d'avoir deux visualisations différentes de la même page,
par exemple pour avoir une vue générale, et une autre plus "proche" afin de
travailler sur des détails.
Pour spécifier un Zoom précis
• Choisissez
Autre… dans le menu déroulant Zoom.
La fenêtre suivante s'affiche et vous permet de spécifier le zoom désiré
entre 5 % et 1 600 % :
12
• Déplacez la croix vers la nouvelle origine :
Freeway fournit plusieurs outils vous permettant de créer des mises en
page et d'aligner des blocs de façon précise :
• Règles en haut et à gauche, avec origine modifiable.
• Guides permettant de placer des repères afin d'aligner les éléments
correctement.
• Grilles horizontales et verticales avec un intervalle donné
������������������ .
• Guides de marge afin d'avoir une bordure uniforme autour de la page
Concevoir son site
Créer des mises en pages précises
������������������ .
Les guides et les règles vous aident à aligner les objets verticalement ou
horizontalement, vous pouvez également faire "coller" les objets aux guides.
Les guides et les règles ne sont apparents que lors de la création et sont
invisibles lors de la publication.
Pour afficher les règles
• Ouvrez le menu Affichage et choisissez Afficher les règles ou
Masquer les règles.
Les règles sont affichées par défaut lorsque vous créez un nouveau
document. Elles sont étalonnées en pixels et par défaut l'origine est en
haut à gauche de la page.
Remettre à zéro l'origine des règles
• Double-cliquez l'indicateur px à l'intersection des règles.
Ajouter un guide à la page
• Assurez-vous que les règles sont visibles. Si nécessaire, ouvrez le menu
Affichage et choisissez Afficher les règles.
Vérifiez
que Guides est coché dans le menu Affichage
•
Positionnez
la souris au dessus d'une des règle pour avoir le pointeur en
•
forme de symbole de déplacement.
Changer l'origine des règles
• Glissez le coin où est inscrit le symbole px en haut à gauche de la
fenêtre à l'intersection des règles.
La croix va suivre le pointeur de la souris.
13
Concevoir son site
• Glissez le guide vers le centre de la page afin de le positionner :
Suppression d'un guide
• Glissez le guide en dehors de la page.
Afficher une grille ������������������
• Ouvrez le menu Page et choisissez Grille…
La fenêtre Grille vous permet de définir les dimensions d'une grille
horizontalement et verticalement. Vous pouvez également l'appliquer à la
page courante seulement ou à toutes les pages :
Rendre magnétique les guides ou les grilles
• Ouvrez le menu Affichage et choisissez Guides magnétiques.
Lorsque vous déplacerez le bord d'un objet près d'un guide ou de la grille,
l'objet se collera automatiquement à la bordure.
Afficher les guides à l'avant des objets
• Ouvrez le menu Affichage et choisissez Guides devant.
ou horizontale.
Par défaut, les guides sont placés à l'arrière des objets sur la page. Si cette
option est active, les guides seront toujours visibles devant les objets.
• Dans les champs Largeur et Hauteur saisissez l'espacement désiré
Vérouiller les guides
• Si vous voulez ajouter de l'espace entre deux lignes de la grille, saisissez
• Ouvrez le menu Affichage et choisissez Guides verrouillés.
Ceci permet d'empêcher le déplacement involontaire d'un guide ou d'une
règle une fois qu'ils sont correctement positionnés.
14
• Sélectionnez Vertical et/ou Horizontal pour dessiner une grille verticale
entre les lignes de la grille.
l'espace dans les champs Gouttière.
• Pour décaler la grille vers l'intérieur de la page (à partir du coin supérieur
gauche) saisissez l'espace dans les champs Gauche et Haut.
Les champs Droite et Bas seront automatiquement remplis en fonction de
l'emplacement du coin inférieur droit de la page.
page courante seulement, ou Document pour l'appliquer à chaque page
du site.
• Cliquez sur le bouton Appliquer pour visualiser la grille :
• Dans la partie Marges remplissez les champs Haut, Gauche, Bas, et
Droite.
Concevoir son site
• Choisissez Page dans le menu déroulant Sur pour appliquer la grille à la
• Choisissez Page dans le menu déroulant Sur pour appliquer les marges
• Cliquez sur le bouton OK pour utiliser la grille
Pour aligner les blocs sur la grille ������������������
à la page courante ou Document pour appliquer les marges à toutes les
pages.
• Cliquez sur le bouton Appliquer pour visualiser les marges :
• Sélectionnez un ou plusieurs blocs.
• Ouvrez le menu Bloc et choisissez Aligner sur la grille.
Chaque bloc sera déplacé afin que les bords supérieurs et gauches soient
collés à la grille la plus proche.
Définir les marges ������������������
• Ouvrez le menu Page et choisissez Grille…
15
Concevoir son site
• Cliquez sur le bouton OK pour utiliser les marges que vous avez définies.
Couleurs des guides
• Modifiez les valeurs pour le Pas grille magnétique et Pas guide
magnétique :
• Ouvrez le menu Freeway et choisissez Préférences…
• Cliquez sur Grilles & Guides les options apparaissent :
Une valeur de 5 pixels est recommandée. Au-delà de cette distance, les
objets ne "collent" plus à la grille ou aux guides.
• Cliquez les différents champs colorés afin de définir les couleurs que
vous souhaitez utiliser.
Activez
la case Lien pour faire en sorte que les guides verticaux et
•
horizontaux aient la même couleur.
Définir la distance de magnétisme des grilles et
guides ������������������
• Ouvrez le menu Freeway et choisissez Préférences…
• Cliquez sur Grilles & Guides les options apparaissent.
16
Travailler avec les couleurs
Vous pouvez aligner deux blocs ou plus, horizontalement ou verticalement
pour une mise en page plus claire.
Freeway supporte les couleurs de texte, d'images et d'autres
objets sur votre site en utilisant la palette Styles et Couleurs
������������������ .
Alignement de blocs
• Sélectionnez deux blocs ou plus sur la page.
• Ouvrez le menu Bloc et choisissez Aligner…
La fenêtre Alignement apparaît et vous permet de spécifier comment vous
souhaitez aligner vos blocs. :
Freeway conserve une liste de toutes les couleurs utilisées dans votre
document, et vous permet de les nommer afin de les retrouver plus
facilement. Vous pouvez également créer votre propre bibliothèque de
couleurs, afin de garder des réglages constants sur tout votre site.
Appliquer une couleur
Concevoir son site
Aligner les blocs
• Ouvrez le menu Fenêtre et choisissez Styles et couleurs pour afficher
la palette Styles et couleurs.
• Cliquez sur l'icône des couleurs en haut de la palette afin d'afficher les
couleurs disponibles pour le document :
• Dans la section Horizontal cliquez sur l'icône appropriée, pas
d'alignement, alignement à gauche, alignement au centre, alignement à
droite.
Dans
la section Vertical cliquez sur l'icône appropriée, pas d'alignement,
•
alignement en haut, alignement au centre ou alignement en bas.
• Cliquez sur le bouton OK pour aligner les blocs.
• Sélectionnez l'objet auquel appliquer la couleur dans le menu déroulant
Sur.
17
Concevoir son site
Les différentes options disponibles, suivant l'élément sélectionné sont
présentées ci-dessous :
Sélection
Modification possible
Rien
Couleur de fond de la page.
Bloc HTML
Couleur de fond ou de bordure.
Tableau
Couleur de fond ou de bordure.
Bloc graphique
Couleur d'ombre, de flou, fond, premier plan ou
contours.
Texte dans un bloc
HTML
Couleur de texte ou de fond.
Texte dans un bloc
graphique
Couleur de texte, fond, ombre, flou ou contours.
• Cliquez sur l'icône Couleurs Web en haut de la palette Styles et
Couleurs :
• Sélectionnez l'attribut sur lequel vous voulez appliquer la couleur.
Les options dépendent du type de bloc ou d'élément sélectionné.
• Cliquez sur la couleur que vous désirez appliquer à l'élément sélectionné.
Appliquer une Couleur Web sur un objet
������������������
Les Couleurs Web sont un ensemble de 216 couleurs recommandées
pour être utilisées sur Internet. Ces couleurs sont supportées par tous les
navigateurs quel que soit la plateforme.
• Sélectionnez un objet sur la page.
18
• Cliquez sur la couleur que vous avez choisie.
La nouvelle couleur sera ajoutée à la fin de la liste des couleurs utilisées
dans le document avec un nom similaire à Couleur 1 :
������������������
La fenêtre Couleur vous permet de définir une nouvelle couleur et de lui
donner un nom personnalisé :
• Cliquez sur l'icône des options de couleurs en haut à droite de la palette
Styles et Couleurs, et choisissez Nuancier… dans le menu déroulant :
Le Nuancier vous permet de choisir de cinq façons différentes la couleur
que vous voulez personnaliser.
Ajouter une couleur à la liste des couleurs du
document
Concevoir son site
Appliquer une couleur personnalisée à un objet
• Sélectionnez une des couleurs Compatible Web ou cliquez sur le
nuancier pour créer une autre couleur.
Cliquez
sur le bouton OK pour ajouter la couleur dans la liste des
•
couleurs du document :
• Cliquez sur l'icône des options de couleurs en haut à droite de la palette
Styles et Couleurs, et choisissez Nouvelle Couleur… dans le menu
déroulant.
19
Concevoir son site
Éditer les couleurs du document ������������������
Créer une nouvelle couleur ������������������
• Cliquez sur l'icône des options de couleurs en haut à droite dans la
• Cliquez sur le bouton Nouveau… et procédez de la même façon que
palette Styles et Couleurs et choisissez Éditer les couleurs… dans le
menu déroulant.
La fenêtre Édition des Couleurs affiche une liste de toutes les couleurs de
votre document, et vous permet d'ajouter de nouvelles couleurs, d'importer
des couleurs d'un autre document ou de modifier les couleurs :
Importer des couleurs permanentes depuis un autre
document ������������������
• Cliquez sur le bouton Importer… trouvez le document de l'autre site et
cliquez sur le bouton Ouvrir… Les couleurs de l'autre document seront
importées.
Les couleurs incluses dans Freeway sont signalées par un cadenas dans
la colonne la plus à gauche. Vous ne pouvez ni modifier ni effacer ces
couleurs.
Les couleurs permanentes sont conservées dans le document même si
elles ne sont pas ou plus utilisées dans le document.
Éditer une couleur personnalisée ������������������
• Sélectionnez la couleur et cliquez sur le bouton Éditer…
Effacer une couleur personnalisée ������������������
• Sélectionnez la couleur et cliquez sur le bouton Effacer.
Si la couleur est utilisée dans le document, Freeway vous demandera de
choisir une autre couleur de remplacement.
20
pour ajouter une nouvelle couleur.
Créer des pages
Ce chapitre décrit les options disponibles pour
créer des pages dans Freeway, créer et utiliser les
maquettes, créer des liens entre les pages ou à
l'intérieur d'une page ainsi que la gestion de tous les
liens avec la carte des liens.
Créer des pages
Créer des pages
Chaque page de votre site sera une page séparée dans le document
Freeway.
Spécifier le titre et le nom du fichier d'une page
• Cliquez sur l'icône de la page en haut de la palette Inspecteur pour
afficher les réglages généraux de la page :
Pages
Dans Freeway, les pages sont dessinées dans la fenêtre d'édition. Elles
sont représentées par un contour noir avec une ombre portée. La zone en
dehors de ce contour est appelée le presse-papiers. Vous pouvez utiliser
cette zone comme zone de travail pour placer des éléments etc. mais les
éléments ne seront pas visibles dans les pages créées.
Maquettes
Chaque page est associée à une maquette. Tous les éléments placés sur
la maquette apparaissent sur chaque page qui utilise la maquette comme
base.
Créer une nouvelle page
• Ouvrez le menu Page et choisissez Nouvelles Pages…
• Entrez un titre pour la/les page(s) dans la fenêtre qui apparaît :
• Entrez le titre de la page et le nom du fichier qui contiendra cette page
dans les champs Titre et Fichier.
La page d'accueil doit avoir comme nom de fichier index.html sauf si votre
hébergeur vous précise un autre nom. Cette page sera affichée par défaut
lorsqu'un utilisateur se connectera à votre site.
Appliquer une couleur de fond à une page
• Cliquez sur l'icône pinceau en haut de la palette Inspecteur pour
afficher les réglages d'apparence de la page courante.
• Si nécessaire, cliquez sur le triangle pour afficher la section Fond du
panneau Page.
• Choisissez la couleur dans le menu déroulant Couleur :
• Entrez le nombre de pages que vous souhaitez créer.
• Sélectionnez la maquette que vous voulez utiliser dans le menu
déroulant Maquette.
• Cliquez sur le bouton OK.
22
Par défaut, Freeway crée des pages qui seront affichées avec un fond blanc
dans les navigateurs.
Vous pouvez sélectionner une image dans les formats suivants, GIF, JPEG,
ou PNG pour la placer en fond de page.
Soit :
• Glissez-déposez une image depuis le Finder ou une autre application
dans une partie de la page non occupée par un bloc, tout en maintenant
la touche Majuscule (shift).
Mise en page fixe, utilisation des
maquettes
Une maquette permet de créer très facilement une série de pages avec
un "fond" commun. Tous les éléments que vous placerez sur la Maquette
(images, menus etc.) seront automatiquement répercutés sur toutes les
pages dépendantes de cette maquette. Par exemple, vous pouvez créer un
en-tête particulier sur la maquette, ainsi toutes les pages auront le même
en-tête :
Créer des pages
Appliquez une image de fond à une page
Soit :
• Cliquez sur l'icône du pinceau en haut de la palette Inspecteur ;
• Si nécessaire, cliquez sur le triangle pour afficher la section Fond du
panneau Pagel ;
• Choisissez Sélectionner… dans le menu déroulant Image :
• Sélectionnez l'image de votre choix et cliquez sur le bouton Ouvrir.
Par défaut, l'image sera répétée horizontalement et verticalement
(mosaïque) pour remplir la totalité de la page. Vous pouvez modifier ce
comportement avec les menus déroulants Horizontal et Vertical.
23
Créer des pages
Toutes les pages dépendantes de cette Maquette, auront le bandeau en
haut de la page :
Visualiser la maquette de la page courante
• Cliquez sur l'onglet Maquette en bas à droite de la fenêtre de Freeway :
Créer des Maquettes
Vous pouvez définir autant de Maquettes que vous le souhaitez, afin d'avoir
plusieurs mises en pages "standards" que vous pourrez utiliser au choix, et
très rapidement, dès que vous créez une nouvelle page.
Lorsque vous créez une nouvelle page, elle est automatiquement basée
sur une maquette, et est donc son exacte copie car le contenu de la
page est vide, et elle ne représente que la Maquette. Il ne vous reste plus
qu'à ajouter des blocs pour remplir la page et ainsi la différencier de la
Vous pouvez créer des maquettes complètement vierges ou alors vous
servir d'une page existante comme base de départ.
Création d'une Maquette vierge
• Ouvrez le menu Page et choisissez Nouvelle Maquette…
Une fenêtre apparaît vous demandant d'entrer le nom de la nouvelle
Maquette :
Maquette.
Si vous modifiez un des éléments sur la Maquette, alors la modification
sera visible et répercutée sur toutes les pages dépendantes de cette
Maquette, sauf si vous avez déplacé un élément de la maquette sur une
des pages. Le déplacement d'un élément de la Maquette par le biais d'une
page duplique l'élément sur la page courante L'élément, pour cette page
uniquement, n'appartient plus à la maquette.
24
• Entrez un nom pour la Maquette ;
• Cliquez sur le bouton OK.
Après avoir créé une page, vous pouvez vous rendre compte qu'elle pourrait
être utilisée comme maquette pour plusieurs pages de votre site. Vous
pouvez alors créer une maquette en vous servant de la page courante
comme base.
• Sélectionnez la page à utiliser ;
• Ouvrez le menu Page et choisissez Créer une maquette avec cette
Appliquer une maquette
Pour changer la maquette de la page courante
• Cliquez sur l'icône page en haut de la palette Inspecteur pour afficher
les réglages généraux de la page.
• Choisissez la maquette à appliquer à cette page dans le menu déroulant
Maquette :
page…
Créer des pages
Création d'une Maquette à partir d'une page
La fenêtre suivante apparaît, entrez le nom que vous souhaitez donner à la
maquette :
• Entrez un titre pour la maquette ;
• Cliquez sur le bouton OK.
Une nouvelle maquette sera créée avec le contenu de la page courante.
Réappliquer une maquette
• Ouvrez le menu Page et choisissez Appliquer la maquette à cette
page.
Si, par le biais d'une page vous déplacez des éléments de la maquette,
ces éléments sont dupliqués et transférés vers la page. La maquette n'est
pas modifiée pour les autres pages mais les éléments le sont pour la
page courante. Si vous désirez replacer les éléments tels qu'ils étaient à
l'origine, utilisez cette fonction. Il est possible que vous ayez à supprimer
les doublons.
25
Créer des pages
Structurer votre site
La zone Site, à gauche de la fenêtre principale de Freeway, vous donne un
aperçu de la structure complète de votre site. Vous pouvez créer, supprimer
ou déplacer les pages, créer des dossiers, modifier l'arborescence des
éléments ou des maquettes.
Changer la page courante
• Cliquez sur l'icône d'une page dans la zone Site :
La partie haute de la zone Site affiche les différentes maquettes
disponibles dans votre document. La partie basse affiche la structure des
dossiers et des fichiers qui composent votre site. Ces éléments sont dans
le dossier que vous avez choisi pour la publication de votre site, le Dossier
Site :
Créer de nouvelles pages depuis la zone Site
• Cliquez sur l'icône des options en bas de la zone Site et choisissez
Nouvelles pages… dans le menu déroulant :
La fenêtre Nouvelles Pages apparaît :
26
Le dossier sera ajouté en bas de la zone Site :
Créer un nouveau dossier dans la zone Site
Si votre site contient un grand nombre de pages, il peut être intéressant de
fractionner le site en plusieurs dossiers distincts.
Quand vous publierez le site, la structure des dossiers sera
automatiquement gérée par les pages HTML créées par Freeway.
• Ouvrez le menu déroulant des options de la zone Site et choisissez
Nouveau dossier…
Créer des pages
• Entrez le Titre et le nombre de pages, puis cliquez sur le bouton OK
Renommer une page, une maquette, ou un dossier
dans la zone Site
• Maintenez la touche Option (Alt.) et cliquez sur un élément ;
• Entrez le nouveau nom pour l'élément édité :
La fenêtre suivante apparaît et vous permet de saisir un nom pour le
dossier créé :
• Entrez un nom et cliquez sur le bouton OK.
27
Créer des pages
Supprimer une page, une maquette, ou un dossier
dans la zone Site
• Sélectionnez l'élément dans la zone Site ;
Déplacer une page dans un dossier
• Glissez et déposez la page sélectionnée où bon vous semble dans la
hiérarchie de la zone Site :
Vous pouvez sélectionner plusieurs éléments simultanément en maintenant
soit la touche Majuscule, soit la touche Commande lorsque vous cliquez :
• Cliquez sur le bouton – en bas de la zone Site ou appuyez sur la touche
La page sera affichée légèrement vers la droite, indiquant qu'elle est bien
dans un dossier :
d'effacement sur le clavier.
Réorganiser les pages
Vous pouvez utiliser la zone Site pour modifier l'ordre des pages dans votre
document. Cela n'a aucun effet sur la façon dont les pages sont visualisées
par un visiteur, mais cela vous permet de "ranger" à votre guise.
• Glissez et déposez les pages vers le haut ou vers le bas dans la zone
Site.
Créer une maquette à partir d'une page
• Dans la zone Site glissez et déposez une page vers la partie haute
de la palette contenant les maquettes. Cela transformera la page en
maquette.
28
Le bloc graphique apparaîtra avec une icône de lien, et le nom de la page
liée sera affiché dans le champ Hyperlien :
• Cliquez sur le bouton OK pour créer une nouvelle maquette.
Lien vers une page
Les liens, aussi appelés Hyperliens, sont des éléments sur la page, en
général des parties de textes ou d'images, qui se comportent comme des
boutons et permettent lorsqu'ils sont cliqués de charger une autre page du
site, ou amènent le visiteur vers un autre site.
Définir un hyperlien avec un bloc graphique
• Sélectionnez un bloc graphique ;
• Glissez-déposez la page de destination du lien de la zone Site vers le
champ Hyperlien en bas de la fenêtre de Freeway :
Créer des pages
Freeway vous demandera de saisir un nouveau nom pour la nouvelle
maquette créée :
Définir un hyperlien avec une sélection de texte
• Sélectionnez un texte ou un morceau de texte dans un bloc HTML ou
dans un bloc graphique, que vous voulez transformer en lien ;
Glissez-déposez
une page de la zone Site dans le champ Hyperlien en
•
bas de la fenêtre de Freeway :
29
Créer des pages
Si vous créez un hyperlien pour du texte qui est dans un bloc HTML, le
texte sera alors affiché en utilisant le style des liens (par défaut bleu
souligné).
Créer une ancre
• Sélectionnez le texte ou insérez le curseur à l'endroit où vous voulez
créer l'ancre.
• Ouvrez le menu Édition et choisissez Ancre…
• Dans la fenêtre Définir Ancre entrez un nom pour l'ancre et cliquez sur
le bouton OK :
Si vous créez un hyperlien pour du texte dans un bloc graphique, Freeway
créera une zone cliquable au-dessus du texte sélectionné.
Vous pouvez également définir les liens en utilisant la fenêtre Édition du
lien :
• Ouvrez le menu Édition et choisissez Lien vers…, ou cliquez sur le
Un symbole d'ancre sera affiché dans le texte sélectionné ou au point
d'insertion :
Pour plus d'information sur les différentes options, reportez-vous aux
sections suivantes.
Créer un lien vers une ancre
bouton à gauche du champ Hyperlien en bas de la fenêtre de Freeway,
et choisissez Autre… dans le menu déroulant.
Liens à l'intérieur d'une page
En plus de pouvoir relier plusieurs pages différentes entre elles, vous
pouvez également créer un lien vers un autre endroit de la même page.
Ces liens sont appelés des ancres. Lorsque l'utilisateur clique sur le lien, la
page défile automatiquement jusqu'à l'ancre définie.
Les ancres sont très utiles si vous avez une seule page très longue avec un
index ou un sommaire au début, pour des FAQ par exemple.
30
• Ouvrez le menu Édition et choisissez Lien vers…, ou cliquez le bouton
à gauche du champ Hyperlien en bas de la fenêtre, puis choisissez
Autre… dans le menu déroulant.
sur la page qui contient l'ancre, puis sélectionnez l'ancre correspondante
dans le menu déroulant Ancre :
• Choisissez _blank dans le menu déroulant Cible :
Créer des pages
• Dans la fenêtre Édition du lien sélectionnez l'onglet Interne, cliquez
Les autres options du menu ne sont utilisées que lorsque vous avez des
cadres. Consultez le manuel Références Freeway pour plus de détails.
• Cliquez sur le bouton OK.
Spécifier une cible pour un lien
Normalement, lorsqu’un utilisateur clique sur un lien, la nouvelle page est
affichée dans la même fenêtre que la page précédente.
Vous pouvez spécifier que la nouvelle page doit s'ouvrir dans une nouvelle
fenêtre séparée. Cela permet à l'utilisateur de revenir rapidement à la page
précédente par exemple après avoir visualisé une aide sur une partie de
votre site.
• Ouvrez le menu Édition et choisissez Lien vers…
Pour suivre un lien sur un bloc graphique
• Sélectionnez le bloc graphique contenant le lien.
• Ouvrez le menu Édition et choisissez Suivre le lien…
Pour suivre un lien interne sur un bloc texte
• Sélectionnez le texte dans le bloc HTML ou dans le bloc graphique qui
contient le lien, ou placez le curseur dans le mot contenant le lien.
• Ouvrez le menu Édition et choisissez Suivre le lien…
La page courante dans le document Freeway changera. La nouvelle page
affichée sera celle qui est la cible du lien suivi.
31
Créer des pages
Liens vers d'autres sites
La fenêtre Édition d'URL affiche une liste des URLs et vous permet de
modifier, vérifier ou supprimer les différentes adresses :
Pour créer un lien vers une adresse externe
• Dans la fenêtre Édition du lien cliquez sur l'onglet Externe et tapez
l'adresse complète de la page de destination :
Gestion des liens dans la carte des liens
Pour afficher la carte des liens ������������������
• Cliquez sur l'onglet Liens au bas de la fenêtre de Freeway.
Ceci affiche les liens internes et externes présents dans la page courante,
à gauche les liens qui pointent vers la page, à droite les liens qui amènent
vers une autre page :
Si vous préférez, vous pouvez choisir le préfixe du protocole utilisé dans le
menu déroulant Protocole.
Afficher la liste des adresses externes dans le
document
• Ouvrez le menu Édition et choisissez Liste des URLs…
32
Définir les styles de lien
• Cliquez sur les cercles en bout de ligne.
Si le format de vos pages est l'HTML 4.01 ou le XHTML vous pouvez définir
le style des liens en CSS.
Pour changer la page courante ������������������
• Cliquez sur l'icône de la page désirée.
������������������
Pour afficher la page ������������������
• Double-cliquez sur l'icône d'une page dans la carte des liens.
Définir l'apparence des liens
Par exemple, si vous voulez changer les liens en texte en rouge italique
lorsque la souris passe au dessus :
• Créez un style à utiliser pour ce type de lien, voir section Travailler avec
les styles, page 46.
Choisissez
le style dans le menu déroulant Survolé :
•
Créer des pages
Pour suivre l'arborescence ������������������
Par défaut, les liens textes sont affichés en bleu souligné, les liens activés
sont en rouge soulignés, les liens visités en violet souligné.
Alternativement, vous pouvez changer ces réglages pour chaque page et
spécifier comment chaque type de lien est affiché.
Pour définir la couleur des liens
• Cliquez l'icône du pinceau en haut de la palette Inspecteur pour afficher
les réglages de l'apparence de la page.
Cliquez
sur le triangle à gauche de la section Liens pour afficher les
•
options des liens.
L'apparence des liens sera modifiée et reflétera ces styles.
• Choisissez les couleurs que vous désirez pour chaque type de lien dans
les menus déroulants Normal, Actif, et Visité :
Définir une zone cliquable
Lorsque vous assignez un lien à un bloc graphique, quel que soit l'endroit
où vous cliquez, vous suivrez le même lien.
La couleur des liens sera transformée pour refléter la couleur choisie dans
le menu déroulant Normal.
Il est cependant possible de créer des zones cliquables sur une image, qui
vont emmener à des pages différentes, c’est-à-dire que sur une même
image, suivant l'endroit cliqué, les liens peuvent être différents. Ces zones
sont invisibles.
33
Créer des pages
Créer une zone cliquable
• Dessinez un bloc graphique et importez une image à l'intérieur, ou glissez
une image depuis le Finder pour créer un bloc automatiquement.
• Cliquez et maintenez bouton Zone cliquable dans la barre d'outils, un
menu déroulant va apparaître pour vous montrer les différents outils.
• Utilisez l'outil de votre choix pour définir les différentes zones qui sont
cliquables et qui utilisent un lien.
• Dessinez les zones comme bon vous semble afin de définir les
différentes parties cliquables sur l'image :
Le tableau suivant explique l'utilisation des différents types de Zones
cliquables :
Icône
Outil
Description
Zone
cliquable
Cliquez-déplacez le curseur afin de
dessiner un rectangle.
Zone
cliquable
ovale
Cliquez-déplacez le curseur pour
dessiner un ovale.
Zone
cliquable
polygonale
Cliquez à chaque coin de la forme
souhaitez, cela va créer un polygone
suivant tous les endroits cliqués.
Cliquez-déplacez pour créer un arc.
Cliquez sur le premier point placé
pour terminer la forme.
Une fois la forme terminée, vous pouvez la modifier en cliquant sur un des
coins, puis déplacez-le à votre guise.
Vous pouvez également utiliser les outils de déformation ou de miroir pour
transformer la zone cliquable.
34
Travailler avec du texte
Ay
Ce chapitre décrit les options permettant d'incorporer
du texte dans les pages Web en utilisant soit
les blocs HTML, soit les blocs graphiques. Les
différences entre les deux seront abordées ainsi que
la description des différentes options et la création
de styles.
Ay
Travailler avec du texte
Inclusion de texte dans une page
Il existe deux façons de procéder pour inclure du texte dans une page :
en utilisant les blocs HTML ou les blocs graphiques (texte HTML et texte
graphique).
Texte HTML
Le texte présent dans un bloc graphique sera converti en image lors de la
publication des pages. Ce type de texte est recommandé pour les titres,
ou les logos, tous les endroits où vous avez absolument besoin d'avoir la
même présentation quelle que soit la machine, et le système utilisé par le
visiteur.
Le texte HTML est la manière le plus efficace pour représenter du texte
dans une page, et est recommandé pour le texte du corps de la page. Le
texte est représenté comme une chaîne de caractère avec des informations
de formatage, puis le texte est généré et visualisé formaté dans la page
visualisée par le navigateur.
Avec le texte graphique, vous pouvez choisir n'importe quelle police, style,
ou taille, car comme ce type de texte est converti en image, il sera vu de
la même façon sur tous les navigateurs. Vous pouvez aussi appliquer des
effets graphiques au texte, comme des ombres, du biseautage, du flou etc.
Si vous ne modifiez pas le formatage du texte, le navigateur qui visualisera
la page utilisera ses paramètres par défaut, qui peuvent varier suivant le
logiciel et la plateforme. Vous pouvez par contre spécifier une liste des
polices préférées pour afficher votre texte, cela s'appelle un jeu de polices.
Dans ce cas, le navigateur va chercher dans le jeu, quelle est la première
police demandée qu'il connaît, puis va essayer de l'utiliser. Les navigateurs
n'incluent en standard qu'un certain nombre de polices, utilisez-les afin
d'être sûr que la visualisation sera la plus universelle possible.
Freeway permet également de définir le texte HTML en utilisant des
Feuilles de styles (CSS). Grâce au CSS, vous avez accès à beaucoup de
paramètres de présentation, la taille, la couleur, le décalage des mots,
l'espacement entre les mots, les couleurs de fond etc.
36
Texte Graphique
Représenter le texte sous forme graphique est moins efficace que du
texte HTML. Il prend plus temps à s'afficher car c'est une image entière
qui doit être affichée, et il n'est pas indexé par les moteurs de recherche.
De plus un visiteur ne peut pas utiliser les fonctions de recherche de son
navigateur, car le texte n'est pas accessible. Conservez donc ce format pour
les titres utilisant une police non conventionnelle, passez au texte HTML
pour le corps de la page.
Créer des blocs texte
Création d'un bloc HTML
• Cliquez sur l'icône HTML dans la barre d'outils :
• Glissez-déplacez le curseur pour dessiner un rectangle de la taille voulue.
Le bloc HTML sera sélectionné, vous pouvez le déplacer ou le modifier :
Les blocs HTML sont identifiés par une bordure bleue, ou une bordure verte
s'ils sont gérés comme des calques CSS.
Création d'un bloc graphique
• Cliquez sur l'icône Image dans la barre d'outils :
Saisir du texte dans un bloc HTML ou graphique
• Double-cliquez sur le bloc pour passer en mode saisie. Le curseur se
placera en haut à gauche du bloc.
• Tapez le texte que vous voulez dans le bloc :
Si vous créez du texte dans un bloc graphique, le texte peut "dépasser" les
bordures du bloc, prenez garde, par exemple, aux lettres "descendantes" :
Travailler avec du texte
Ay
Dans ce cas, Freeway crée automatiquement un bloc assez "grand" pour
contenir les lettres descendantes et montantes.
Vous pouvez également saisir du texte dans un bloc ovale ou dans une
courbe de Bézier, reportez-vous à la section Créer des blocs graphiques,
page 55.
• Glissez-déplacez le curseur de la souris pour dessiner un rectangle de la
taille voulue :
Les blocs graphiques (ou image) sont représentés avec une bordure grise.
37
Ay
Travailler avec du texte
Insérer le texte d'un fichier
Redimensionner un bloc HTML ou un bloc graphique
• Positionnez le curseur dans le bloc où vous voulez importer le texte.
• Ouvrez le menu Fichier et choisissez Importer texte… :
• Cliquez sur un bloc avec l'outil de sélection. pour faire apparaître les
poignées de redimensionnement sur la bordure du bloc.
• Déplacez une poignée pour redimensionner le bloc :
• Maintenez la touche Majuscule pour forcer l'outil à créer un carré ou un
rond, ou Option + Majuscule pour conserver la proportionnalité.
Transformer un bloc graphique
• Cliquez sur un des outils de transformation :
• Cliquez sur un bloc graphique afin de faire apparaître les poignées de
• Sélectionnez le fichier texte à importer et cliquez sur le bouton Ouvrir
pour l'insérer.
Déplacer un bloc HTML ou graphique
• Positionnez le curseur de la souris sur le bloc.
• Glissez le bloc à une nouvelle position avec l'outil de Sélection.
Copier un bloc HTML ou un bloc graphique
• Positionnez la souris sur un bloc.
• Déplacez le bloc vers une nouvelle position avec l'outil de Sélection et
appuyez sur la touche Option (Alt) et relâchez la souris.
38
redimensionnement.
• Déplacez une des poignées pour transformer le bloc :
• Quand vous lâcherez le bouton de la souris, le bloc sera redessiné
transformé :
Texte HTML, HTML 3.2 ������������������
Les polices sont restreintes aux polices standards du Web. Le corps (taille)
est relatif à la taille par défaut :
Vous ne pouvez pas transformer un bloc HTML.
Spécifier les apparences du texte
Vous pouvez spécifier les apparences du texte en sélectionnant le texte
puis en modifiant les différentes options dans la palette Inspecteur. Les
options disponibles sont divisées en deux parties, les options s'appliquant
aux Caractères et celles s'appliquant aux Paragraphes, elles dépendent
également du type de bloc, HTML ou graphique, ainsi que de la version du
langage que vous utilisez pour générer les pages (HTML 3.2/4.01, XHTML
etc.).
Les options dans la section Caractères s'appliquent aux caractères
sélectionnés dans le bloc, cela vous permet d'appliquer différentes options
à des caractères différents dans un même mot ou une même phrase.
Travailler avec du texte
Ay
Texte HTML, HTML 4.0
Avec le HTML 4.0 (ou les options XHTML ������������������ ) Freeway
peut utiliser les Feuilles de styles (CSS) et vous fournit des options
supplémentaires, comme des tailles absolues, des paragraphes avec
alinéas etc. :
Les options de la section Paragraphes s'appliquent au paragraphe entier.
39
Ay
Travailler avec du texte
Texte graphique
Avec les textes graphiques, vous pouvez utiliser n'importe quelle police
disponible sur votre machine, à n'importe quelle taille :
Sélectionnez tout le texte dans un bloc, graphique
ou HTML
• Double-cliquez dans le bloc pour entrer en mode saisie, puis dans le
menu Édition choisissez Tout sélectionner.
Créer un bloc graphique dans un bloc HTML
Si vous voulez placer une image ou un mot dans une police spécifique à
l'intérieur d'un texte HTML, vous pouvez créer un bloc graphique à l'intérieur
du bloc HTML. Lorsque les pages seront créées par Freeway, le texte sera
remplacé par une image.
• Sélectionnez le texte à convertir en image :
Vous pouvez également utiliser un grand nombre d'effets en utilisant les
options sur l'apparence du texte dans la palette Inspecteur :
• Cliquez sur l'icône texte en haut de la palette Inspecteur pour afficher
les réglages de caractères et paragraphes.
Dans
la section Caractères choisissez GIF dans le menu déroulant Type
•
pour convertir la sélection en image GIF. :
Changer l'apparence du texte
• Sélectionnez le texte à modifier.
• Sélectionnez les options désirées pour les caractères et les paragraphes
dans la palette Inspecteur.
40
Les différentes options vont alors changer pour s'adapter au nouveau type :
Convertir un paragraphe en texte graphique
Vous pouvez convertir tout un paragraphe en image.
La fenêtre Chercher apparaît et vous permet de spécifier ce que vous
souhaitez trouver dans le texte :
• Positionnez le curseur dans le paragraphe à modifier ;
• Cliquez sur l'icône texte en haut de la palette Inspecteur ;
• Dans la section Paragraphe choisissez GIF dans le menu déroulant
Type pour convertir tout le paragraphe en image :
• Choisissez où rechercher avec le menu déroulant Dans, sélectionnez
Document, pour chercher dans tout le document Freeway, Chaînage
pour chercher dans tous les blocs chaînés au bloc contenant le curseur,
ou Bloc pour chercher dans le bloc contenant le curseur.
• Dans le champ Chercher saisissez le texte que vous voulez trouver.
Les différentes options vont être modifiées pour refléter les options des
images.
Par défaut, Freeway cherche en partant du point d'insertion vers la fin du
document.
Éditer du texte
• Sélectionnez En arrière pour chercher vers le début du document ;
• Sélectionnez En boucle pour continuer à chercher quand la fin du
Vous pouvez utiliser les techniques standards d'édition de texte comme le
Couper, Copier, et Coller, sélection et déplacement de texte à l'aide du
curseur de la souris etc.
De plus, Freeway inclut les outils de recherche/remplacement de texte,
vérification orthographique et la césure automatique.
Rechercher du texte
• Ouvrez le menu Édition et choisissez Rechercher/Remplacer, puis le
sous-élément Chercher…
Travailler avec du texte
Ay
document ou le début du document est atteint.
Par défaut Ignorer casse est sélectionné, les minuscules et majuscules
ne sont pas respectées, ainsi site et Site seront détectés comme
identiques.
• Décochez Ignorer casse pour chercher en respectant les majuscules.
• Sélectionnez Mot entier pour chercher le mot de façon indépendante,
non collé à un suffixe ou un préfixe.
Remplacer du texte
• Ouvrez le menu Édition et choisissez Rechercher/Remplacer, puis
choisissez Remplacer… dans le sous-menu.
41
Ay
Travailler avec du texte
La fenêtre Remplace inclut un champ additionnel Remplacer avec :
Vérifier l'orthographe
• Ouvrez le menu Édition et choisissez Orthographe…
• Choisissez Document dans le menu déroulant Tester pour vérifier
le document entier, Chaînage pour vérifier les blocs liés au bloc
sélectionné, Bloc pour vérifier uniquement le bloc sélectionné.
• Cliquez sur Débuter pour commencer la vérification.
Les suggestions les plus probables vous sont présentées dans le champ
Suggestions.
• Entrez le texte de remplacement dans le champ Remplacer avec ;
• Cliquez sur le bouton Remplace pour remplacer la prochaine occurrence
du texte recherché ou sur le bouton Tout modifier pour remplacer
toutes les occurrences du texte recherché.
Continuer la recherche/remplacement
• Sélectionnez Laisser le dialogue ouvert pour que la fenêtre reste
ouverte afin de pouvoir cliquer à nouveau sur les boutons de recherche
pour trouver d'autres occurrences.
Vous pouvez également ouvrir le menu Édition et choisir Rechercher/
Remplacer, puis Chercher suivant ou Remplacer suivant pour chercher
ou remplacer la prochaine occurrence du texte recherché.
Vérification orthographique
Freeway inclut un correcteur orthographique qui met en surbrillance chaque
mot suspect dans les documents Freeway, et indique si possible d'autres
choix plus plausibles.
Le texte sera modifié en fonction de ce que vous aurez choisi, ou du texte
entré dans le champ Remplacer par.
• Cliquez sur le bouton Changer pour modifier le texte par le mot
sélectionné.
• Cliquez sur le bouton Ignorer pour passer à un autre mot à vérifier.
Tout modif. et Tout ignor. s'appliquent pour toutes les occurrences
identiques trouvées.
• Cliquez sur le bouton Créer pour ajouter le mot inconnu à votre
dictionnaire personnel. Les occurrences suivantes ne seront alors plus
détectées comme une erreur.
42
Si vous cliquez sur le bouton Créer et qu'aucun dictionnaire utilisateur n'est
sélectionné, la boîte de dialogue suivante va apparaître vous permettant de
créer un nouveau dictionnaire ou de sélectionner un dictionnaire existant :
• Cliquez sur le bouton Ouvrir pour choisir un dictionnaire utilisateur déjà
existant, ou sur le bouton Créer pour créer un nouveau dictionnaire.
Créer un dictionnaire utilisateur
Vous pouvez créer un dictionnaire spécifique pour chaque projet, et
sélectionner le dictionnaire adéquat dans le menu déroulant Utilisateur
dans la fenêtre de vérification d'orthographe.
• Cliquez sur le bouton Options… dans la fenêtre de vérification.
La fenêtre Options orthographe affiche la liste des dictionnaires
utilisateurs existants, ou vous permet d'en créer un nouveau :
• Entrez un nom approprié pour le dictionnaire et cliquez sur le bouton
Enregistrer :
Vous pouvez modifier le dictionnaire dans la fenêtre Options orthographe
et cliquez sur le bouton Éditer…
Appliquer des effets au texte graphique
Travailler avec du texte
Ay
Lorsque vous utilisez un bloc graphique pour créer du texte, vous pouvez
appliquer des effets spécifiques sur celui-ci, comme une ombre portée,
couleur de fond, filtres de déformation, surlignage etc.
Vous pouvez combiner plusieurs effets afin d'obtenir un résultat particulier,
votre texte reste éditable, vous pouvez le modifier, ajouter ou supprimer des
caractères, sans appliquer à nouveau les différents effets.
• Cliquez sur l'icône du pinceau dans la palette Inspecteur pour afficher
les effets :
• Cliquez sur le bouton Nouveau… pour créer un nouveau dictionnaire.
43
Ay
Travailler avec du texte
Ajouter un effet de forme
• Cliquez sur le triangle au début de la section Effet de forme pour voir
Comme pour les craquelures, modifiez les différents paramètres comme
bon vous semble :
les effets disponibles.
• Choisissez l'effet désiré dans le menu déroulant Effet.
Craquelure ajoute des craquelures aléatoires sur les caractères :
Vous pouvez modifier l'effet en modifiant les différents paramètres
correspondants, la profondeur par exemple :
Ajouter une ombre portée à du texte
• Cochez la case Ombre, cliquez sur le triangle en début de section pour
afficher les différentes options :
Ondulation transforme le contour en forme d'ondes :
• Choisissez la Couleur dans le menu déroulant, et le Flou de l'ombre
portée.
• Laissez Global coché si vous désirez que l'ombre utilise l'angle global
d'éclairage de toute la page. Si vous décochez la case, l'ombre peut
avoir un angle d'éclairage différent des autres blocs sur la page.
44
• Spécifiez l'angle désiré en déplaçant le curseur sur le cercle Angle.
• Utilisez le curseur Décalage pour modifier "l'espace" entre le texte et son
ombre, le curseur Flou pour modifier la dispersion de l'ombre :
Ajouter une couleur de fond à du texte
• Cochez Fond et cliquez sur le triangle pour afficher les options dans la
palette Inspecteur :
Ajouter une lueur externe
• Cochez Lueur et cliquez sur le triangle pour afficher les options de la
section dans la palette Inspecteur :
• Choisissez la couleur de fond dans le menu déroulant Couleur et ajustez
l'opacité de celle-ci grâce au curseur :
Travailler avec du texte
Ay
Changer la couleur de texte
• Choisissez la couleur pour la lueur dans le menu déroulant Couleur et
ajustez les différentes propriétés comme nécessaire :
• Cliquez sur le triangle à gauche de la section Texte pour afficher toutes
les options :
• Choisissez la couleur dans le menu déroulant Couleur.
45
Ay
Travailler avec du texte
• Choisissez les options afin d'afficher le texte suivant votre choix.
• Utilisez le curseur Opacité pour modifier l'opacité du texte :
• Utilisez le menu déroulant Filtre pour ajouter un effet sur le texte,
Biseautage, Flou, ou Dispersion :
• Cliquez sur le triangle pour afficher les options, comme par exemple la
Couleur du contour.
Travailler avec les styles
������������������
Freeway permet de sauvegarder des combinaisons spécifiques de polices
de caractères, couleurs, effets, sous un nom particulier, par exemple Titre
de Chapitre. Vous pouvez ensuite appliquer les mêmes réglages à un autre
texte simplement en sélectionnant le style défini dans la palette Styles et
couleurs.
Les styles permettent de garder facilement la même présentation de texte
partout sur votre site, sans avoir à redéfinir les différentes propriétés pour
chaque morceau de texte. De plus, si vous décidez de modifier le style, par
exemple la taille du texte, tous les morceaux de texte assujettis à ce style
seront automatiquement modifiés.
Attributs
Ajouter un contour à du texte ������������������
• Cochez la case Contour et cliquez sur le triangle pour afficher les
options dans la palette Inspecteur :
Chaque style est un ensemble d'attributs, comme la Police, la Taille, et
l'Alignement. Les attributs sont divisés en plusieurs familles, les attributs
CSS et graphiques, et les attributs caractères et paragraphe.
Attributs CSS et attributs graphiques
Les attributs CSS sont appliqués au texte HTML. Les attributs graphiques
sont appliqués au texte graphique, et au texte GIF dans les blocs HTML.
Vous pouvez choisir les attributs visualisables dans le menu déroulant Vue
de la fenêtre Édition des styles.
46
Quand un attribut, comme les Polices, a des options différentes pour le
texte CSS et le texte graphique, la fenêtre Édition des styles affiche deux
contrôles vous permettant de choisir les options séparément :
De plus, les Attributs graphiques possèdent une section Effets texte
graphique qui sont des effets applicables à des caractères à l'intérieur d'un
texte graphique :
Attributs caractères et attributs paragraphes
Définir un nouveau style ������������������
Dans la fenêtre Édition des styles les attributs sont séparés en deux
sections, Caractère et Paragraphe.
• Cliquez sur l'icône Style en haut de la palette Styles et Couleurs pour
Les attributs caractère peuvent être appliqués à des caractères seuls dans
un morceau de texte donné.
Travailler avec du texte
Ay
afficher les styles du document.
• Cliquez sur le bouton des options dans la palette Styles et Couleurs
puis choisissez Nouveau Style… dans le menu déroulant :
Les attributs paragraphes s'appliquent à un paragraphe entier, à tous les
caractères contenus dans le paragraphe.
47
Ay
Travailler avec du texte
La fenêtre Ajouter un Style s'affiche vous permettant de définir les
attributs du nouveau Style :
• Entrez un nom pour le style dans le champ Nom.
• Pour spécifier une balise HTML à utiliser pour le texte, vous pouvez la
saisir dans le champ Balise.
Vous pouvez également choisir une balise prédéfinie dans le menu
déroulant.
Par exemple, pour utiliser les balises de titre standard de l'HTML, entre au
choix h1, h2, ou h3. Cela permet à un visiteur n'utilisant pas un navigateur
compatible avec les CSS d'utiliser le style HTML de la balise.
48
• Pour définir les attributs des caractères, cliquez sur le symbole + à
droite de la section Caractères puis dans la liste choisissez l'attribut que
vous voulez spécifier :
Une ligne sera rajoutée avec les options de l'attribut sélectionné :
• Répétez ceci autant de fois que nécessaire afin d'obtenir le style de
caractère qui correspond à vos besoins.
Une ligne sera rajoutée à la section Paragraphe et vous pourrez modifier
les options comme nécessaire :
Vous pouvez enlever un attribut dans la section Caractère en cliquant sur
le bouton - qui est sur la même ligne que l'attribut à supprimer.
• Pour définir les attributs d'un paragraphe cliquez sur le signe + à la
droite de la section Paragraphe et choisissez les attributs que vous
souhaitez ajouter :
Travailler avec du texte
Ay
Quand vous avez terminé de spécifier les caractéristiques du style :
• Cliquez sur le bouton OK pour enregistrer.
Le nouveau style sera affiché dans la palette Styles et Couleurs. Si vous
ajoutez à ce style des attributs pour le paragraphe, le symbole paragraphe
(¶) sera affiché à gauche du nom du style :
49
Ay
Travailler avec du texte
Créer un style basé sur un texte existant
������������������
Freeway crée automatiquement un style dès que vous modifiez les
caractéristiques par défaut d'un texte dans la palette Inspecteur. Vous
pouvez créer un style en partant de ces attributs.
Les styles temporaires créés par Freeway se nomment .style1, .style2,
etc., et sont listés dans le panneau Styles de la palette Styles et
Couleurs.
• Cliquez sur un style temporaire en maintenant la touche Contrôle et
choisissez Éditer le style… dans le menu contextuel :
Travailler avec des feuilles de styles
������������������
Freeway vous permet de créer plusieurs feuilles de styles pour votre
document. Pour chaque page vous pouvez spécifier quelle feuille de style
est utilisée.
Par exemple, si votre site est divisé en plusieurs sections, chacune avec un
thème différent, vous pouvez créer des feuilles de styles différentes pour
chaque thème.
Gérer les styles dans votre document
Soit :
• Dans le menu Édition choisissez Styles…
Soit :
• Cliquez sur l'icône en haut à droite de la palette Styles et Couleurs et
choisissez Éditer les styles… dans le menu déroulant :
La fenêtre Éditer le style s'affiche et vous permet de modifier les différents
attributs du style.
• Entrez le nom du style, et cliquez Permanent pour conserver ce style
dans le document.
• Procédez ensuite comme lors de la création d'un nouveau style.
Appliquer un style à du texte ������������������
• Sélectionnez le texte à modifier, puis cliquez sur le nom du style que
vous souhaitez utiliser dans la palette Styles et Couleurs.
50
La fenêtre Édition des Styles s'ouvre et affiche la liste des feuilles de
styles, et les styles qui sont présents dans chaque feuille. Vous pouvez
éditer chaque style en modifiant leurs attributs.
Pour afficher les styles d'une feuille de styles
������������������
• Cliquez sur le triangle à gauche du nom de la feuille de styles, dans la
• Cliquez sur le bouton Choix pour afficher la liste complète de tous les
attributs Caractère, Effet texte graphique, et Paragraphe, cliques sur
les cases à cocher correspondantes afin d'ajouter de nouveaux attributs :
colonne de gauche de la fenêtre Édition des Styles.
Dans tous les documents, la première feuille est nommée sheet1, mais
vous pouvez créer autant de feuilles que nécessaire en utilisant les boutons
et le menu déroulant en dessous de la liste.
Afficher les attributs d'un style ������������������
• Sélectionnez le style dans la colonne de gauche.
Tous les attributs du style apparaissent sur la droite. Vous pouvez modifier
les valeurs, ajouter ou supprimer d'autres attributs :
Travailler avec du texte
Ay
• Cliquez à nouveau le bouton Choix pour revenir à l'édition des attributs.
Ajouter un style ������������������
• Cliquez sur le bouton + sous la liste, et spécifiez les attributs du
nouveau style.
51
Ay
Travailler avec du texte
Pour supprimer un style ������������������
• Sélectionnez le style dans la liste et cliquez sur le bouton - sous la liste.
Si le document contient du texte utilisant le style que vous souhaitez
supprimer, Freeway va vous demander quel style appliquer à la place du
style supprimé :
• Sélectionnez le style à utiliser, ou [Sans Style] pour laisser le texte par
défaut sans style et cliquez sur le bouton OK.
Pour sélectionner la feuille de styles utilisée
������������������
• Cliquez sur le fond de la page pour qu'aucun bloc ne soit sélectionné.
• Cliquez sur l'icône de la page dans la palette Inspecteur pour afficher
les paramètres de la page.
• Choisissez la feuille de styles dans le menu déroulant CSS :
52
Images
Ce chapitre décrit les options pour travailler avec les
images dans vos pages Web. Vous verrez comment
importer et manipuler les images, ajouter des
effets afin de créer des résultats impressionnants,
uniquement en utilisant Freeway.
Images
Utiliser les images sur vos pages Web
Images modifiables
Lors de la publication, Freeway exporte les images dans un format
compatible avec Internet : GIF, JPEG, ou PNG, optimisant chaque image
pour avoir le meilleur compromis entre qualité d'image et temps de
téléchargement. Vous pouvez laisser Freeway choisir le format, ou bien faire
les réglages vous-même, pour chaque bloc graphique.
Le tableau suivant propose une comparaison rapide des formats :
Freeway peut importer des images de plusieurs formats différents, et
vous permet de les modifier. Vous pouvez découper, mettre à l'échelle ou
déformer les images en appliquant des effets sans sortir de Freeway.
Les formats suivants sont utilisables par Freeway pour les images
modifiables :
• GIF (Graphics Interchange Format)
• JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphics)
• PICT (un format Mac standard)
• TIFF (Tagged Image File format)
• Adobe Photoshop (PSD)
• Adobe Illustrator
• PDF (Portable Document Format)
• BMP (Windows Bitmap)
• EPS (Encapsulated PostScript)
• QDGX (un ancien format Mac)
• Tous formats dont vous possédez un plug-in d'import/export pour
Photoshop.
54
Format
Plus et moins
GIF
Recommandé pour des images simples contenant un
nombre limité de couleurs, comme des diagrammes, ou du
texte graphique.
JPEG
Recommandé pour les photos.
PNG
Une alternative récente au GIF, supportant la transparence
sur 8 bits, mais non supporté par des navigateurs plus
anciens.
Images originales
Si vous avez vous-même préparé des images pour votre site, et que vous
ne voulez pas que Freeway les travaille à nouveau, vous pouvez importer
les images telles que. Vous ne pouvez plus les modifier dans Freeway. Pour
cela lors de l'importation, cochez Garder l'original.
Utiliser des plug-ins
Vous pouvez utiliser les plug-ins Photoshop pour supporter des formats
d'images additionnels. Pour cela, placez les plug-ins ou un alias des plugins dans le dossier Bibliothèque/Application Support/Freeway 4/PlugIns.
Quand vous importez une image dans un bloc ovale, l'image sera découpée
pour n'afficher que ce qui est visible dans l'ovale :
Pour créer un bloc graphique rectangulaire
• Cliquez sur le bouton Image dans la barre d'outils :
• Cliquez sur la page puis dessinez un rectangle de la taille désirée.
Le bloc graphique sera sélectionné, des poignées s'afficheront aux coins et
sur chaque bord :
Images
Créer des images
Créer un bloc graphique avec un contour arbitraire
• Cliquez sur l'icône Polygone dans la barre d'outils en maintenant cliquez
sur le bouton Image :
• Cliquez sur la page pour créer des points, ou cliquez-glissez pour créer
Créer un bloc graphique ovalisé
• Cliquez sur le bouton Ovale dans la barre d'outils :
des courbes.
Cliquez
à nouveau sur le premier point créé pour fermer le contour :
•
• Cliquez sur la page puis dessinez un ovale de la taille désirée.
55
Images
Importer des images dans un bloc graphique
• Sélectionner le bloc graphique sur la page.
• Ouvrez le menu Fichier et choisissez Importer…
• Sélectionnez l'image à importer dans le bloc :
qui vous permet de ne pas les déplacer ou de les supprimer par erreur. Ce
dossier Media peut être placé dans le dossier de votre projet de site.
Glisser-déposer une image
Vous pouvez utiliser un simple glissé-déposé d'un document dans le Finder
vers une fenêtre de Freeway.
• Glissez l'image d'une fenêtre Finder, comme par exemple depuis le
dossier Media.
• Relâchez l'image dans la page, ou dans un bloc graphique préalablement
créé :
• Pour importer une image telle que, cochez la case Garder l'original.
• Cliquez sur le bouton Ouvrir pour importer.
L'image sera alors affichée dans le bloc graphique :
Si vous placez l'image dans un bloc existant, elle sera découpée pour tenir
dans le bloc.
Si vous la glissez directement sur la page, un bloc sera créé de la taille de
l'image.
Note : Il est utile de créer un dossier spécifique à l'intérieur duquel vous
allez stocker les images et les vidéos qui vont servir de fichiers source à
Freeway. Ainsi, vous gardez dans un dossier les éléments non modifiés, ce
56
• Cochez l'option Garder l'original dans la fenêtre Importer… et cliquez
sur le bouton Ouvrir pour importer l'image.
Glisser-déposer une image sans la modifier
• Faites glisser l'image depuis le Finder, et maintenez la touche Option (Alt)
avant de relâcher l'image sur la page.
Importer une image avec un plug-in
Si vous avez le plug-in d'importation approprié installé, ils apparaîtront
automatiquement dans le sous menu Acquérir et vous pourrez les utiliser
pour importer des images ; voir Utiliser des plug-ins, page 54. Par exemple,
avec un scanner et son plug-in, vous pouvez numériser les images
directement dans Freeway.
• Sélectionnez un bloc graphique.
• Ouvrez le menu Fichier et choisissez Acquérir…, puis suivez les
instructions du Plug-in choisi.
Manipuler des blocs graphiques
Vous pouvez manipuler les blocs graphiques de plusieurs façons, changer
les dimensions, découper, étendre, ou encore modifier leurs formes.
Images
Importer une image sans la modifier
Avec les images non modifiables (garder l'original), le bloc doit être
suffisamment grand pour accueillir l'image, sinon le bloc affiche une croix
bleue et le bloc n'est pas publié.
Redimensionner un bloc graphique
• Après avoir cliqué sur un bloc, déplacez une de ses poignées avec l'outil
de Sélection :
Lorsque vous lâchez la souris, le bloc sera redimensionné :
L'image sera importée directement dans Freeway. Vous pouvez ensuite la
manipuler comme n’importe quelle autre image importée.
Effacer une image à l'intérieur d'un bloc graphique
• Sélectionnez un bloc graphique, puis dans le menu Édition choisissez
Effacer le contenu.
Autre possibilité, si vous importez une nouvelle image dans un bloc qui en
contient déjà une, l'ancienne image sera effacée et la nouvelle image sera
dans le bloc.
Vous pouvez forcer le bloc à être carré en maintenant la touche Majuscule
lors du redimensionnement, ou redimensionner l'image en préservant la
proportionnalité en maintenant les touches Majuscule+Option(Alt).
Par défaut, redimensionner un bloc graphique ne modifie pas la taille et
la position de l'image contenue. Alternativement, vous pouvez spécifier le
comportement du redimensionnement, voir Redimensionner les images
page 59.
57
Images
Pour remplir un bloc ou mettre à l'échelle une image
• Sélectionnez un bloc graphique.
• Ouvrez le menu Bloc, et choisissez Image, puis dans le sous menu
• Cliquez-déplacez l'image dans le bloc :
choisissez une des fonctions suivantes :
Fonction
Description
Positionner une image numériquement
Taille originale
Met l'image à sa taille originale.
Ajuster la taille du
Redimensionne le bloc à la taille de l'image qu'il
• Sélectionnez le bloc graphique.
• Ouvrez le menu Bloc et choisissez Modifier…, ou double cliquez sur le
bloc à l'image
contient.
Centré
Le contenu du bloc est centré.
Ajuster la taille de
l'image au bloc
L'image est redimensionnée aux dimensions du
bloc graphique
Mettre à l'échelle et
centrer
L'image est redimensionnée pour rentrer dans
le bloc graphique, mais elle conserve ses
proportions, puis elle est centrée.
Agrandir
L'image est agrandie de 5 % dans le bloc
graphique.
Réduire
L'image est réduite de 5 % dans le bloc
graphique.
Positionner une image dans un bloc graphique
• Sélectionnez le bloc graphique.
Une croix de déplacement est affichée au centre du bloc graphique :
bloc graphique.
La fenêtre Image apparaît et montre les informations sur l'image.
• Cliquez sur l'onglet Image et entrez les valeurs que vous désirez utiliser
pour place l'image à l'intérieur du bloc :
Les valeurs ont pour origine le coin en haut à gauche du bloc graphique.
Transformer un bloc graphique
• Sélectionnez un des outils de transformation :
• Déplacez le curseur de la souris au-dessus de la croix, afin d'obtenir un
curseur en forme de main.
58
• Cliquez sur le bloc à modifier pour afficher les poignées.
transformer le bloc :
Redimensionner les images
Pour chaque bloc graphique, vous pouvez spécifier le comportement du
contenu lors du redimensionnement du bloc graphique. Les quatre options
sont expliquées dans le tableau suivant :
Option
• Quand vous relâchez le bouton de la souris :
Description
Clavier
Conserver la
taille
Redimensionner le bloc
ne change pas la taille
ou la position de l'image
contenue.
Contrôle
Mettre
l'image à
l'échelle
L'image est redimensionnée
à l'échelle du bloc,
mais sans conserver les
proportions.
Commande
Mettre
l'image à
l'échelle et
centrer
L'image est mise à
l'échelle en conservant ses
proportions, et est déplacée
dans le bloc.
Commande
+ Option
Mettre à
l'échelle et
découper
L'image est mise à
l'échelle en conservant les
proportions pour entrer
dans le bloc graphique,
l'image est découpée si
nécessaire pour conserver la
proportionnalité.
Option
Transformer un bloc numériquement
������������������
• Sélectionnez le bloc graphique.
• Ouvrez le menu Bloc et choisissez Transformation…
Dans la fenêtre, spécifiez les différents paramètres que vous souhaitez
utiliser pour transformer votre bloc et son contenu :
Exemple
Images
• Déplacez une des poignées à l'aide de l'outil de votre choix pour
Vous pouvez spécifier le comportement lors du redimensionnement de
façon permanente, ou modifier le comportement de façon temporaire en
utilisant les raccourcis de la colonne Clavier du tableau ci-dessus.
59
Images
Spécifier le comportement du redimensionnement
• Sélectionnez un bloc graphique.
• Ouvrez le menu Bloc et choisissez Modifier…
• Dans la fenêtre Image cliquez sur l'onglet Image.
• Choisissez l'option de redimensionnement, dans le menu déroulant Si
• Cliquez l'icône du pinceau dans la palette Inspecteur pour afficher les
paramètres d'apparence :
redimensionné :
Les différents réglages sont décrits ci-dessous.
Appliquer un effet craquelure ou ondulation à une
image
• Dans la section Effet de forme choisissez Craquelure ou Ondulation
dans le menu déroulant Effet :
Ajouter des effets aux images
Freeway vous permet d'ajouter toute une gamme d'effets à vos images,
comme des ombres portées, rajout de flou, de contours, de couleurs de
fond etc.
En plus des transformations, vous pouvez également créer des
compositions complexes sans avoir à utiliser un autre logiciel que Freeway,
et avec la flexibilité de modifier tous les paramètres des effets à n'importe
quel moment.
• Sélectionnez le bloc graphique.
60
L'effet Craquelure fournit les contrôles période, aléatoire, marge et
profondeur pour les craquelures.
Ajouter une ombre portée
• Dans la section Ombre cochez la case Ombre :
• Choisissez la couleur de l'ombre en utilisant le menu déroulant Couleur,
et l'opacité de celle-ci avec le curseur Opacité.
• Laissez Global coché si vous voulez que l'ombre portée utilise l'angle
• Utilisez le curseur Décalage pour spécifier l'écart entre l'ombre et
l'image, le curseur Flou pour modifier la tonalité du flou de l'ombre :
Images
L'effet Ondulation fourni les contrôles période, aléatoire, déviation, lissage
pour l'ondulation :
Ajouter une lueur à une image
• Dans la section Lueur cochez la case Lueur :
• Choisissez la couleur de la lueur dans le menu déroulant Couleur.
• Utilisez les contrôles Opacité, Diffusion, et Flou pour modifier les
caractéristiques de la lueur :
d'éclairage global de la page. Modifier l'Angle modifie alors tous les
effets d'éclairages de la page. Si vous décochez Global, seule l'ombre de
ce bloc sera modifiée.
• Spécifiez l'angle d'éclairage à l'aide du contrôle Angle.
61
Images
Appliquer une couleur de fond
• Dans la section Fond choisissez la couleur désirée dans le menu
déroulant Couleur :
Un bloc graphique avec une couleur de premier plan va teinter le texte
dans un bloc disposé sous lui :
Si l'image à un fond transparent, la couleur choisie pour le fond remplira le
bloc autour de l'image contenue dans le bloc :
Ajouter une bordure autour d'un bloc graphique
• Dans la section Bordure cochez la case Bordure :
Appliquer une couleur de premier plan
������������������
• Dans la section Premier plan choisissez la couleur désirée dans le
menu déroulant Couleur :
• Choisissez la couleur dans le menu déroulant Couleur.
• Spécifiez l'épaisseur de celle-ci avec le champ Taille et le style de trait
avec le menu déroulant Trait.
62
la bordure par rapport au contour du bloc, Dehors, Centré, ou Dedans
dans le menu déroulant Position.
• Ajoutez un effet sur la bordure en choisissant Biseautage, Flou, ou
Dispersion dans le menu déroulant Filtre et modifiez ses propriétés.
Spécifier le réglage des images fusionnées
• Cliquez sur le bouton Paramètres de publication en haut à droite de la
palette Inspecteur.
Modifiez les paramètres pour tous les blocs suivant votre choix :
Images
• Pour les bordures avec un trait plein, vous pouvez spécifier la position de
Fusionner les images
Si vous créez deux blocs qui ne sont pas des calques et que ces deux blocs
se superposent, par défaut Freeway va créer une seule image avec les deux
blocs, entourant ceux-ci par un rectangle bleu :
Exporter des images non fusionnées
• Sélectionner des blocs superposés.
• Cliquez dans le panneau en haut à gauche de la palette Inspecteur
pour afficher les paramètres généraux.
Dans
la section Propriétés décochez Fusionner Images :
•
Dans certains cas, il est préférable d'avoir deux exportations différentes
pour chaque bloc, pour par exemple utiliser deux formats d'images
différents pour chaque bloc, JPEG pour une image et GIF pour du texte.
Vous pouvez maintenant spécifier des réglages différents pour chaque bloc
graphique indépendamment.
63
Images
Contrôle de l'exportation des images
Spécifier un texte alternatif
Par défaut, Freeway exporte les blocs graphiques utilisant 256 couleurs au
maximum au format GIF, et avec plus de 256 couleurs au format JPEG.
Cependant, vous pouvez modifier le format explicitement pour chaque bloc.
Le texte alternatif pour une image met un texte à la place de l'image dans
le cas d'une utilisation d'un navigateur en mode texte, ou si l'utilisateur
demande à son navigateur de ne pas charger les images. Les moteurs de
recherches peuvent également indexer ces mots afin d'affiner la pertinence
de leurs résultats.
Modifier l'exportation
• Sélectionnez le bloc graphique.
• Cliquez sur l'icône des paramètres en haut à droite de la palette
Inspecteur pour afficher les réglages :
Pour plus d'informations sur les différents réglages, consultez le manuel
Freeway Référence.
Par défaut, le texte alternatif est égal au nom donné au bloc graphique.
• Pour modifier le texte alternatif, utilisez la palette Inspecteur et entrez le
texte dans le champ Texte Alt :
Multimédia
Freeway peut incorporer des films et des animations dans plusieurs
formats :
• Séquences au format QuickTime, créées par les logiciels comme Adobe
Premiere, Apple Final Cut Pro, et iMovie.
• Animations au format Macromedia Shockwave créées par des
applications comme Macromedia Director, Flash, ou FreeHand.
64
Importer un fichier multimédia
Soit :
• Glissez-déposez le fichier depuis une fenêtre Finder directement dans
une page Freeway.
Images
Ces deux types d'animations sont très répandus sur le Web, et même si les
navigateurs nécessitent les plug-ins correspondants pour lire ces formats,
la plupart des utilisateurs les ont déjà installés.
Un bloc HTML sera créé à la taille du contenu.
Soit :
• Cliquez sur l'icône HTML dans la barre des outils et dessiner un bloc sur
la page.
• Avec le bloc sélectionné, ouvrez le menu Fichier et choisissez
Importer…
• Sélectionnez le fichier multimédia à utiliser et cliquez sur le bouton
Ouvrir.
Si le format est supporté par QuickTime, le bloc HTML affichera un aperçu
du fichier. Dans le cas contraire, une image générique montrant un plug-in
sera affichée :
Quand le site est publié, le fichier spécifié sera copié dans le dossier de
votre site.
Pour chaque type, la palette Inspecteur vous permettra de spécifier le
comportement de lecture du fichier.
65
Images
Options d'une Séquence QuickTime
Quand la séquence est jouée dans un navigateur, le contrôleur sera affiché :
• Sélectionnez le bloc HTML contenant la séquence.
• Cliquez sur l'icône de paramétrage en haut à droite de la palette
Inspecteur pour afficher les réglages :
Options d'une animation Flash
• Sélectionnez Auto pour jouer la séquence automatiquement lorsque la
• Sélectionnez le bloc HTML contenant l'animation.
• Cliquez sur l'icône des paramètres dans la palette Inspecteur :
page est chargée.
• Ouvrez le menu Boucle et utilisez Non pour jouer la séquence une seule
fois, Oui pour jouer en boucle la séquence, ou Aller-retour pour jouer la
séquence dans un sens, puis dans le sens inverse.
Afficher le contrôleur de séquence
• Cochez Contrôleur dans la palette Inspecteur.
• Ouvrez le menu Bloc, choisissez Image, puis Ajuster la taille du bloc
à l'image dans le sous menu, pour que le bloc HTML soit assez grand
pour contenir la séquence et le contrôleur QuickTime :
66
• Sélectionnez Boucle pour jouer l'animation sans arrêt.
• Sélectionnez Jouer pour lancer l'animation lorsque la page sera chargée.
• Choisissez la Qualité dans le menu déroulant.
La fenêtre Ressources contient une liste des images et des autres fichiers
utilisés dans le document. La fenêtre affiche les informations sur chaque
bloc, et vous permet de supprimer, mettre à jour ou recréer les images.
Vous pouvez également spécifier si un bloc doit ou non être publié.
Afficher les ressources
• Ouvrez le menu Édition et choisissez Ressources… :
Mettre à jour toutes les images d'un document
• Cliquez sur le bouton Mise à jour.
Ceci met à jour les aperçus des images dans Freeway.
Images
Gestion des ressources
Recréer les images
• Cliquez sur le bouton Tout recréer.
Ceci génère à nouveau tous les aperçus, améliorant la qualité des images
que vous avez modifiées dans Freeway.
Éditer, afficher, ou supprimer une image
• Sélectionnez une image dans la liste et cliquez sur Afficher pour
montrer l'image dans Freeway.
Sélectionnez
une image et cliquez sur Éditer pour afficher la fenêtre
•
Contenu fichier.
• Sélectionnez une image et cliquez sur Effacer pour supprimer l'image.
Problèmes de publication
La fenêtre affiche les informations suivantes :
Colonne
Description
Fichier
Nom du fichier, avec éventuellement son chemin
d'accès. Utilisez le menu déroulant pour l'afficher.
Type
Type du fichier.
État
OK si l'image est à jour, Manquant si le fichier n'existe
plus ou Modifié si le fichier n'est pas le bon.
Page
Nom de la page où est l'image.
Publier
Cochez si l'image doit être publiée ou non.
Si Freeway ne peut localiser un ou plusieurs fichiers, une fenêtre de
problème de publication apparaîtra :
67
Images
Avec cette fenêtre vous pouvez :
Redéfinir un fichier source pour une image déplacée
• Cliquez sur le bouton Éditer les ressources…
L'image manquante est affichée avec l'état Manquant dans la colonne
État.
• Sélectionnez le fichier manquant, cliquez sur le bouton Éditer…, puis
sur le bouton Choix… et ouvrez le fichier source.
Pour sauvegarder une liste des images manquantes dans un fichier texte,
cliquez sur Enregistrer…
Si une image est définitivement perdue
• Cliquez sur le bouton OK dans la fenêtre Problèmes de publication
pour publier le site en utilisant l'image déjà créée pour l'aperçu. Cela
peut donner un résultat acceptable, suivant l'image.
Vous pouvez exporter l'aperçu en utilisant la commande Exporter du menu
Fichier, et ensuite attribuer à nouveau cette image pour le bloc afin d'éviter
les problèmes de publication, mais rien ne remplacera le fichier source
original de l'image.
68
Créer des tableaux
Ce chapitre décrit les options pour créer des
tableaux dans Freeway, éditer et régler leur
apparence.
Créer des tableaux
Créer des tableaux
Les tableaux fournissent un moyen efficace pour présenter des informations
dans une grille, en ligne et en colonnes. Chaque cellule peut contenir du
texte, une image, ou une combinaison des deux.
Soit :
• Ouvrez le menu Insertion et choisissez Tableau…
Dans les deux cas, la fenêtre Insérer tableau apparaît pour vous
permettre de saisir les dimensions et caractéristiques du tableau :
• Entrez le nombre de lignes, colonnes et spécifiez les dimensions de la
Vous pouvez changer la largeur des lignes et des colonnes
indépendamment, et contrôler l'apparence des tableaux, par exemple
l'épaisseur de la bordure entre les cellules, la couleur du tableau ou la
couleur de fond des cellules.
Bordure, Espace entre cellules, et du Contours de cellule.
• Cliquez sur le bouton OK pour créer le tableau :
Vous pouvez choisir comment les informations sont alignées dans chaque
cellule et vous pouvez fusionner deux cellules adjacentes ou plus.
Créer un tableau
Soit :
• Cliquez l'icône Tableau dans la barre des outils :
Notez que vous pouvez rajouter ou supprimer des lignes ou des colonnes
plus tard si nécessaire.
Saisir du texte HTML dans une cellule
• Double-cliquez dans une cellule avec l'outil de sélection pour positionner
le curseur d'insertion.
• Entrez le texte dans la cellule comme dans un bloc HTML.
• Cliquez-glissez l'outil dans la page pour dessiner un tableau.
70
Déplacer et redimensionner les tableaux
Vous pouvez importer du texte tabulé, séparé par des virgules ou par des
espaces dans un tableau. Les champs seront transformés en cellules, la
taille se mettant automatiquement à la taille des éléments contenus.
Freeway permet de déplacer et redimensionner un tableau entier, ou les
lignes et colonnes.
• Double-cliquez dans la première cellule pour positionner le curseur
Ces opérations peuvent être faites soit en modifiant directement le tableau
sur la page, soit en utilisant la palette Inspecteur.
d'insertion.
Ouvrez
le menu Fichier et choisissez Importer texte…
•
Dans
la
fenêtre Importer… sélectionnez le fichier adéquat et choisissez
•
le format du fichier importé dans le menu déroulant en bas de la
fenêtre :
Déplacer un tableau
• Positionnez le curseur sur le tableau, et cliquez-glissez celle-ci.
Redimensionnez le tableau
Créer des tableaux
Importer du texte dans un tableau
• Pointez le bord du tableau avec l'outil de Sélection jusqu'à ce que le
curseur affiche un outil de redimensionnement, puis cliquez-déplacez la
bordure pour modifier sa position.
• Maintenez la touche Majuscule pour forcer le tableau à rester carré, ou
Majuscule + Option (Alt) pour conserver la proportionnalité.
Toutes les lignes et colonnes du tableau seront redimensionnées
proportionnellement.
Si le tableau n'est pas assez grand Freeway vous demandera si vous voulez
agrandir automatiquement le tableau ou tronquer le texte.
• Cliquez sur le bouton OK pour agrandir le tableau, ou Tronquer texte
pour ignorer une partie du fichier importé.
Déplacer/redimensionner un tableau numériquement
• Sélectionnez un tableau.
• Cliquez sur les réglages généraux en haut à gauche de la palette
Inspecteur.
71
Créer des tableaux
• Dans la section Dimensions éditez les valeurs X, Y, L, et H pour
Elles seront entourées d'une fine bordure indiquant la sélection :
spécifier la position et la taille du tableau :
Sélectionner une ligne ou colonne entièrement
• Déplacez le curseur au-dessus d'une colonne ou sur la gauche d'une
ligne jusqu'à ce que le curseur prenne la forme d'une flèche :
Sélectionner les cellules
Sélectionner une ou plusieurs cellules
• Cliquez sur la première cellule avec l'outil de Sélection.
La cellule sera mise en surbrillance avec une fine bordure :
• Cliquez pour sélectionner la ligne ou la colonne entièrement.
• Maintenez la touche Majuscule et cliquez à nouveau pour rajouter des
colonnes ou des lignes à la sélection.
Sélectionner toutes les cellules
Pour en sélectionner d'autres :
• Maintenez la touche Majuscule et cliquez sur les cellules à rajouter à la
sélection.
• Sélectionner une cellule comme décrit plus haut.
• Ouvrez le menu Édition et choisissez Tout sélectionner.
Redimensionner les lignes ou colonnes
Redimensionner une ligne ou une colonne
• Utilisez l'outil de Sélection, pointez la bordure entre deux lignes
ou deux colonnes jusqu'à ce que le curseur change en curseur de
redimensionnement.
Glissez-déplacez
la bordure à la nouvelle position :
•
72
Freeway permet d'ajouter ou de supprimer des lignes ou des colonnes,
découper ou joindre des cellules pour former des lignes ou des colonnes
plus ou moins larges.
Quand vous relâchez la souris, la ligne ou la colonne sera modifiée à la
taille désirée, modifiant la taille du tableau pour conserver la taille des
autres lignes et colonnes.
Si vous voulez modifier la taille d'une ligne ou d'une colonne sans modifier
les dimensions du tableau :
• Maintenez la touche Contrôle pendant le déplacement, puis relâchez la
Insérer des lignes ou des colonnes
• Sélectionnez le tableau, ou des cellules dans le tableau.
• Ouvrez le menu Bloc, et choisissez Tableau, puis Insérer des
rangées… ou Insérer des colonnes… dans le sous-menu.
Créer des tableaux
Modifier les tableaux
La fenêtre suivante apparaîtra et vous permettra de spécifier le nombre de
lignes et de colonnes à insérer là où vous avez cliqué dans le tableau :
touche après avoir lâché le bouton de la souris.
Notez qu'une cellule ne peut être plus petite que son contenu.
Redimensionner une ligne/colonne numériquement
• Sélectionner une ou plusieurs cellules dans le tableau.
• Cliquez sur l'icône des cellules de tableaux en haut à gauche de la
palette Inspecteur pour afficher les réglages :
• Sélectionnez Début de tableau ou Fin de tableau pour insérer avant
ou après les premières ou dernières lignes et colonnes.
Si vous avez sélectionné une cellule dans le tableau, vous pouvez
également choisir la position par rapport à la sélection.
• Dans la section Cellule éditez les champs L et H pour spécifier la
• Sélectionnez Avant la sélection ou Après la Sélection.
• Cliquez sur le bouton OK pour ajouter les lignes ou colonnes spécifiées.
largeur et la hauteur de la (les) cellule(s).
73
Créer des tableaux
Ajouter une ligne ou colonne en glissant une ligne
ou colonne dans le tableau
• En utilisant l'outil de Sélection, pointez une séparation entre deux lignes
ou deux colonnes jusqu'à ce que le curseur de déplacement apparaisse.
• Cliquez-déplacez la bordure pour déplacer la bordure, appuyez sur la
touche Option pendant le déplacement et maintenez la touche tant que
vous n'avez pas lâché la souris.
Effacer des lignes ou des colonnes
• Sélectionnez une ou plusieurs cellules.
• Ouvrez le menu Bloc et choisissez Tableau, puis choisissez Supprimer
rangée ou Supprimer colonne dans le sous-menu.
Les lignes et colonnes contenant la cellule sélectionnée seront supprimées.
Réunir et scinder des cellules
Vous pouvez réunir plusieurs cellules dans une seule, en ligne ou en
colonne. C'est utile pour ne pas avoir, par exemple, le même nombre de
lignes d'une colonne à l'autre :
74
Réunir deux cellules ou plus
• Sélectionnez les cellules à réunir.
• Ouvrez le menu Bloc et choisissez Tableau, puis Réunir les cellules
dans le sous-menu.
Les cellules seront fusionnées en une seule, suivant la sélection faite.
Scinder une cellule
• Sélectionnez une cellule.
• Ouvrez le menu Bloc et choisissez Tableau, puis choisissez Scinder les
cellules dans le sous-menu.
La fenêtre suivante apparaît vous permettant de spécifier le comportement
du découpage :
Spécifier la bordure, l'espacement, et le contour de
cellules
• Sélectionnez un tableau.
• Cliquez sur l'icône des réglages généraux en haut à gauche de la palette
Inspecteur pour afficher les paramètres.
La section Cellules affiche les différents paramètres disponibles :
Spécifier la couleur d'une cellule
• Sélectionnez une ou plusieurs cellules.
Soit :
• Cliquez la couleur dans la palette Styles et couleurs
������������������ .
Soit :
• Cliquez sur l'icône de la cellule en haut à gauche de la palette
Inspecteur pour afficher les réglages de cellules.
Créer des tableaux
Régler l'apparence des tableaux
• Dans la section Cellule choisissez la couleur dans le menu déroulant
Couleur :
• Modifiez les valeurs suivant vos besoins à l'aide du tableau ci-dessous :
Paramètre
Description
Bordure
Épaisseur de la bordure autour du tableau.
Espace entre
cellules
Épaisseur entre les lignes et colonnes.
Contour des
cellules
Espace entre la bordure et le contenu de chaque
cellule.
Les cellules seront colorées :
75
Créer des tableaux
Spécifier la couleur d'un tableau entier
• Sélectionnez le tableau.
Soit :
• Cliquez la couleur dans la palette Styles et couleurs
������������������ .
Soit :
• Cliquez sur l'icône du tableau en haut de la palette Inspecteur pour
afficher les réglages des tableaux.
• Choisissez la couleur dans le menu déroulant Fond :
Le tableau sera coloré :
76
Créer des formulaires
Ce chapitre décrit comment créer des formulaires
dans Freeway permettant aux visiteurs de votre site
de saisir des informations et soumettre celles-ci au
serveur.
Créer des formulaires
À quoi servent les formulaires ?
Conception d'un formulaire
Un formulaire permet à un visiteur de saisir des données sur une page
et ces données peuvent être envoyées à votre serveur pour effectuer une
action spécifique. Vous pouvez utiliser un formulaire pour demander le
nom et le courrier électronique d'un visiteur, lui demander de voter pour
son élément favori dans une liste, ou permettre de passer une commande
directement sur votre site. Dans tous les cas, le visiteur fourni des
informations et clique sur un bouton de type Soumettre (Submit) pour
envoyer les informations.
Pour créer un formulaire sur votre page web, placez simplement les
différents éléments qui sont dans la barre d'outils puis dans le sous menu
de l'outil Bloc HTML. Ensuite, vous paramétrez le comportement de ces
éléments dans la fenêtre Réglages formulaire.
Les informations sont envoyées au serveur, et elles sont en général
analysées par un script spécifiquement dédié à cette tâche. Le script
renvoie en général une page dans le navigateur indiquant au visiteur que
les informations ont bien été reçues.
• Sélectionnez l'outil dont vous avez besoin.
• Cliquez-glissez la souris pour dessiner un rectangle correspondant au
Utilisation des formulaires
Pour utiliser un formulaire sur votre site web, vous devez utiliser un script
qui sera placé sur le serveur de votre hébergeur et qui sera en charge de
recevoir les différents paramètres et d'effectuer une action en fonction de
ceux-ci. La création d'un tel script sort du cadre de ce manuel. Contactez
votre hébergeur afin de savoir quelles possibilités vous sont offertes.
78
Création d'un formulaire
• Cliquez et maintenez l'outil HTML dans la barre d'outils, un menu
déroulant va apparaître :
bloc désiré :
Inspecteur pour modifier les réglages du bloc :
Utiliser une image comme bouton de validation
������������������
Au lieu d'avoir un bouton Soumettre vous pouvez utiliser un bouton
personnalisé.
Les paramètres disponibles dépendent de l'outil utilisé.
Note : Vous pouvez placer les éléments d'un formulaire dans un Tableau
afin de les aligner.
• Sélectionnez le bloc graphique.
• Cliquez sur l'icône de paramétrage de publication en haut à droite de la
palette Inspecteur pour afficher les options.
• Cochez Soumettre et entrez la valeur du bouton :
Créer des formulaires
• Cliquez sur l'icône de publication en haut à droite de la palette
Bouton
Permet d'envoyer le formulaire ou d'effacer le contenu déjà saisi.
Les paramètres suivants sont disponibles :
Paramètre
Description
Nom
Nom du paramètre envoyé au script sur le serveur.
Valeur
Étiquette du bouton affichée sur la page et valeur
envoyée au script.
Type
Soumettre crée un bouton d'envoi du formulaire.
Zéro crée un bouton optionnel qui met à zéro tous
les éléments du formulaire. Bouton crée un bouton
pour exécuter une commande JavaScript.
Quand l'utilisateur cliquera sur l'image, deux paramètres seront envoyés au
script indiquant les coordonnées du click dans l'image, sur les axes X et Y,
par exemple :
Ajouter.X 35
Ajouter.Y 8
79
Créer des formulaires
Case à cocher
Permet au visiteur de sélectionner plusieurs options facultatives :
Les paramètres suivants sont disponibles :
Paramètre
Description
Nom
Nom identifiant le groupe de bouton radio auquel il
appartient. Il sera envoyé au script
Valeur
Valeur identifiant le bouton. Elle sera envoyée au
script, chaque bouton du groupe doit avoir une
valeur différente.
Les paramètres suivants sont disponibles :
Paramètre
Description
Texte
Étiquette du bouton.
Nom
Nom du paramètre identifiant la case à cocher.
Chaque case doit avoir un nom unique.
Coché
État par défaut du bouton radio.
Valeur
Valeur envoyée au script lorsque la case est cochée.
Texte
Étiquette de la case à cocher
Menu/Liste
Coché
État par défaut de la case à cocher.
Permet au visiteur de sélectionner un élément dans une liste.
Bouton radio
Les éléments peuvent être affichés dans un menu déroulant :
Permet au visiteur de sélectionner un seul et unique choix exclusif :
Ils apparaîtront ainsi dans le navigateur :
Les boutons radios sont dépendants entre eux, et cliquer sur un, décoche
les autres.
Les éléments peuvent également être affichés dans une liste déroulante
permettant au visiteur de faire un choix multiple :
80
Ajouter un élément dans un menu ou une liste
• Cliquez le bouton Nouveau en bas à gauche de la palette Inspecteur :
Les paramètres suivants sont disponibles :
Paramètres
Description
Nom
Nom du paramètre envoyé au script.
Taille
Spécifiez 1 pour un menu déroulant, plus de 1 pour
avoir une liste.
Multiple
Si cochée, permet une sélection multiple d'éléments.
Choix
Une étiquette optionnelle permettant d'identifier un
choix dans le menu ou la liste.
Valeur
Valeur envoyée au script, si l'utilisateur choisit cet
élément. Si aucune valeur n'est spécifiée, le nom de
l'élément est renvoyé.
Sélection
initiale
Active ou non par défaut la sélection de certains
éléments.
Créer des formulaires
La liste apparaîtra comme ceci dans le navigateur :
La fenêtre Éditer choix apparaît et vous permet de spécifier les différents
paramètres de l'élément :
• Saisissez les valeurs adéquates et cliquez sur le bouton OK.
Modifier un élément
• Double-cliquez sur un élément ou sélectionnez-le et cliquez sur le bouton
d'édition en bas de la palette :
81
Créer des formulaires
Supprimer un élément
• Sélectionnez l'élément et cliquez sur l'outil de suppression en bas de la
palette :
Zone de texte
Permet au visiteur d'entrer plusieurs lignes de texte. Si nécessaire, une
barre de défilement apparaîtra.
Changer l'ordre des éléments
• Sélectionnez un élément et cliquez sur les boutons en forme de flèche
en bas à droite de la palette.
La liste sera affichée comme ci-dessous dans un navigateur :
Champ d'édition
Permet au visiteur d'entrer une ligne de texte.
Les paramètres suivants sont disponibles :
Dans la majorité des navigateurs, si le visiteur appuie sur la touche Entrée,
le formulaire est envoyé.
Les paramètres suivants sont disponibles :
82
Paramètre
Description
Nom
Paramètre envoyé au script.
Valeur
Valeur par défaut qui peut être affichée dans le
champ.
Mot de passe
Cache le texte saisi.
Longueur max.
Nombre de caractères maximum dans le champ.
Taille
Largeur du champ, en nombre de caractères.
Paramètre
Description
Nom
Nom du paramètre envoyé au script.
Texte
Texte par défaut affiché dans le champ.
Habiller
Spécifie si le texte doit rester dans le champ.
Normalement ignoré par les navigateurs.
Lignes,
colonnes
Dimension de la zone, en caractères.
Une fois que vous avez créé votre formulaire, il vous faut paramétrer son
action.
Définir l'action du formulaire
• Ouvrez le menu Page et choisissez Réglages formulaire…
La fenêtre Réglage formulaire apparaît vous permettant de spécifier ce
qui se passe lorsque le visiteur soumet le formulaire. Vous pouvez aussi
ajouter des champs cachés pour envoyer des informations supplémentaires
au script.
Spécifier les champs cachés
Vous pouvez envoyer des informations supplémentaires au script dans
des champs cachés, ils se comportent comme des champs visibles pour
le formulaire et pour le script. Chaque champ caché a un nom qui est le
paramètre envoyé au formulaire et une valeur envoyée comme valeur du
paramètre.
Par exemple, vous pouvez avoir un questionnaire avec plusieurs réponses
Oui, Non, ou Je ne sais pas sur des pages séparées sur votre site. Vous
pouvez alors analyser les réponses avec le même script, en passant le
numéro de la page en cours dans un champ caché.
Définir un champ caché
Créer des formulaires
Régler le formulaire
• Cliquez sur l'onglet Champs cachés.
• Choisissez le mode POST (le plus courant), ou GET (moins utilisé, qui
met les paramètres dans l'URL envoyée).
Dans
le champ Action spécifiez l'URL du script qui doit recevoir les
•
informations.
• Spécifiez l'encodage nécessaire dans le champ Codage.
• Cliquez sur le bouton OK pour valider les réglages.
• Cliquez sur le bouton Nouveau… pour définir un nouveau champ :
83
Créer des formulaires
84
• Entez un nom pour le champ ainsi que sa valeur et cliquez sur OK pour
enregistrer.
Notez que vous devez impérativement donner un nom unique pour chaque
élément pour que le script qui reçoive les valeurs sache correctement
identifier les valeurs qu'il reçoit, sans risque d'erreur. Si vous donnez le
même nom à plusieurs champs, le script recevra une liste de valeurs au
lieu d'une valeur unique.
Créer des effets
Ce chapitre explique le fonctionnement des
actions dans Freeway et donne des détails sur
l'utilisation des rollovers, des images esclaves, des
animations… afin de créer un site avec des effets
impressionnants.
Créer des effets dynamiques
À quoi servent les actions
Les actions sont des objets que vous pouvez ajouter à votre page pour
ajouter des fonctionnalités ou créer des effets dynamiques. Chaque
action rajoute du code HTML ou JavaScript pour arriver à un résultat
qui vous aurait demandé beaucoup de programmation. Ces objets sont
indépendants de Freeway et utilisent souvent des mots Anglais. Voici
quelques exemples de ce que les actions peuvent faire :
Boutons dynamiques et texte
Vous pouvez créer des boutons dynamiques qui changent d'apparence
lorsque la souris passe au-dessus, c'est un rollover.
Effets sur les Images
Freeway vous permet d'appliquer des effets directement sur les images du
site, comme du flou, modification de couleurs, luminosité, et contraste.
Aperçu des actions
Le tableau suivant donne un rapide aperçu des actions :
Catégorie
Nom
Type
Description
Fenêtre
Lien vers
nouvelle fenêtre
Bloc
Affiche une fenêtre
surgissante après un clic
utilisateur.
Image vers
nouvelle fenêtre
Bloc
Affiche une image dans une
fenêtre surgissante.
Lien texte vers
nouvelle fenêtre
Objet
affiche une fenêtre
surgissante lors d'un clic sur
un lien texte.
Fenêtre
surgissante
Page
Affiche une fenêtre
surgissante quand une page
est ouverte.
Fenêtre
Page
Crée une fenêtre
Images esclaves et calques
Les images esclaves (Slave images) et les actions sur les calques (layers)
permettent de définir des blocs qui sont affichés ou masqués quand le
visiteur clique ou pointe un bouton, un lien, une image…
Fenêtres surgissantes
Ces fenêtres (pop-up) peuvent être ouvertes automatiquement, ou lorsque
l'utilisateur clique sur une image, un bouton ou un lien. Ces fenêtres sont
souvent utilisées pour afficher des informations complémentaires à la page
principale.
surgissante à
fermeture auto.
Animation
Les actions d'animations vous laissent définir des événements qui
apparaissent automatiquement quand le visiteur charge la page, par
exemple un texte défile, ou des images s'animent.
Navigation
Les actions de navigation fournissent une autre façon de naviguer dans
votre site au lieu d'utiliser les hyperliens classiques, par exemple une barre
de navigation, une carte du site, une barre de menu etc.
86
Déclencheur
Minuterie
surgissante qui se ferme
automatiquement lorsque la
page principale change.
Page
Envoie un événement à un
bloc à un intervalle de temps
donné après l'ouverture de la
page.
Esclave
Nom
Type
Description
Catégorie
Nom
Type
Description
Rollover
aléatoire
Bloc
Affiche ou masque des
blocs image, et envoie un
événement aléatoire lorsque
le bloc est pointé ou cliqué.
Redirection
Redirection
minutée
Page
Redirige le visiteur vers une
autre page après un intervalle
de temps spécifié.
Bloc
Affiche ou masque des blocs
graphiques et envoie un
événement lorsque le bloc est
pointé ou cliqué.
Redirection sur
version
Page
Rollover
Redirige le visiteur vers une
autre page en fonction de la
version du navigateur.
Calque
Animation
calque
Bloc
Anime un calque.
Autre
Liste de pays
Objet
Ajoute une liste de pays à un
formulaire.
Date courante
Objet
Affiche la date courante.
Menu de
navigation
Objet
Permet au visiteur de naviguer
vers une autre page en
choisissant la destination
dans un menu déroulant.
Pas de cache
Page
Empêche le navigateur
d'enregistrer la page dans le
cache.
Acrobat
Objet
Télécharge un fichier Adobe
Acrobat quand un lien texte
est cliqué.
Icône Acrobat
Bloc
Télécharge un fichier Adobe
Acrobat quand une image est
cliquée.
Musique de
fond
Page
Joue un son lorsque la page
est chargée.
Director
Objet
Incruste un fichier Director
dans la page.
Séquence
aléatoire
Page
Envoie une séquence
aléatoire d'événements après
l'ouverture de la page.
Séquence
minutée
Page
Envoie une séquence
d'événements à des blocs
après l'ouverture de la page.
Texte Rollover
Objet
Modifie un bloc lorsqu’un lien
texte est pointé ou cliqué.
Image esclave
Bloc
Affiche de une à vingt images
lorsqu’un événement est reçu.
Chargement
cadre esclave
Page
Charge une page dans un
cadre lorsqu'un événement
est reçu.
Afficher/
masquer image
esclave
Bloc
Affiche ou masque une image
lorsqu'un événement est reçu.
Afficher/
masquer calque
esclave
Bloc
Affiche ou masque un calque
lorsqu'un événement est reçu.
Contenu
Créer des effets dynamiques
Catégorie
87
Créer des effets dynamiques
88
Catégorie
Navigation
Nom
Type
Description
Nom
Type
Description
Téléchargement
fichier
Objet
Télécharge un fichier lorsqu'un
lien texte est cliqué.
Rotation palette
des couleurs
Bloc
Change la palette de couleur
de l'image.
Icône
téléchargement
Bloc
Télécharge un fichier
lorsqu'une image est cliquée.
Relief
Bloc
Donne l'impression que
l'image a un relief.
Animation Flash
Bloc
Incruste une animation Flash
dans la page.
Flou linéaire
Bloc
Applique un flou rendant une
sensation de vitesse.
Séquence
QuickTime
Bloc
Incruste une séquence
QuickTime dans la page.
Saturation
Bloc
Modifie la saturation de
l'image.
Barre de menus
Bloc
Crée une barre de menus
pour la navigation basée sur
un tableau.
Netteté
Bloc
Renforce la netteté de
l'image.
Solarisation
Bloc
Barre de
navigation
Objet
Crée automatiquement une
barre de navigation pour aller
sur une autre page du site.
Donne l'apparence d'une
photographie sur ou sous
exposée.
Filigrane
Bloc
Carte du site
Objet
Crée automatiquement une
carte du site affichant la
structure et permettant à
l'utilisateur de naviguer d'une
page à l'autre.
Applique une image en
filigrane.
Bichromie
Bloc
Convertit l'image en utilisant
deux ou trois couleurs.
Fondu
Bloc
Applique un dégradé à
l'image.
Catégorie
Carte de
navigation
Bloc
Permet la conversion d'un
bloc HTML en zone cliquable.
Remplissage
Bloc
Remplit un bloc graphique
avec un dégradé de couleurs.
Boutons
Boutons
Bloc
Convertit un bloc graphique
en bouton en 3 dimensions.
Bordure
Bloc
Ajoute un cadre autour d'une
image.
Images
Dégradé
complexe
Bloc
Applique un dégradé vertical
ou horizontal.
Photo Magic
Bloc
Flou
Bloc
Applique un flou
Ajoute les contrôles de
luminosités, couleurs,
contraste etc.
Filtre
chromatique
Bloc
Rend transparente dans
l'image les couleurs choisies.
Postérisation
Bloc
Réduit le nombre de niveaux
dans une image.
Nom
Type
Description
Zébrures
Bloc
Ajoute un maillage de lignes
à l'image.
Ajouter une action de type objet
Soit :
• Ouvrez le menu Insertion, choisissez Bloc Action, puis choisissez
l'action dans le sous-menu…
La colonne Type donne le genre de l'action, à savoir si elle s'applique sur
un bloc, une page, ou bien si c'est un objet autonome.
Soit :
• Cliquez sur le bouton Action dans la barre d'outils, choisissez l'action
dans le menu déroulant, puis dessinez le bloc sur la page.
Ces objets sont des blocs qui peuvent être déplacés ou redimensionnés,
comme un bloc graphique ou HTML :
Créer des effets dynamiques
Catégorie
Appliquer une action sur un bloc
• Sélectionnez le bloc.
• Ouvrez le menu Bloc, et choisissez Actions, puis choisissez l'action dans
le sous menu.
Les actions sont appliquées au bloc sélectionné sur la page. La majorité
des actions peuvent être appliquées aux blocs graphiques. Certaines
actions doivent être appliquées aux blocs HTML et aux tableaux.
Quand une action est appliquée, son nom est affiché en haut à gauche du
bloc :
89
Créer des effets dynamiques
Appliquer une action sur une page
Supprimer une action
• Affichez la page.
• Ouvrez le menu Page, choisissez Actions, sélectionnez l'action désirée
• Cliquez sur la croix en haut à gauche des onglets dans la palette
dans le sous-menu.
Les actions de page affectent la page affichée.
Le nom de l'action apparaît en haut à gauche de la page :
Actions.
Boutons dynamiques et texte
Les boutons dynamiques changent d'apparence quand l'utilisateur passe le
curseur sur eux. C'est un Rollover. Cet effet est aussi possible sur du texte.
Créer des boutons en rollover
• Créez trois versions de votre bouton : la version normale, la version à
afficher lors du survol et la version lorsqu'il est appuyé :
Appliquer plusieurs actions
Vous pouvez appliquer plusieurs actions à un même bloc ou à la même
page. Les actions seront listées les unes sous les autres en haut à gauche
du bloc :
• Pour plus de facilité, pensez à nommer les différents blocs, par exemple
Normal, Survol, et Cliqué dans la palette Inspecteur :
La palette Actions affiche un onglet par action présente, cliquez sur celui
qui vous intéresse pour accéder aux paramètres :
• Sélectionnez les trois blocs.
• Ouvrez le menu Bloc et choisissez Aligner…
• Cliquez sur l'alignement au centre, pour les paramètres Horizontal et
Vertical puis cliquez sur OK :
90
L'action Rollover texte peut être utilisée pour déclencher des effets sur un
groupe esclave lorsque la souris passe au-dessus d'un lien.
• Positionnez le curseur dans un bloc HTML là où vous souhaitez utiliser
l'action :
Les items seront superposés les uns sur les autres :
• Ouvrez le menu Bloc, choisissez Actions, puis Rollover dans le sousmenu.
• Ouvrez le menu Fenêtre et choisissez Actions pour afficher la palette
Actions.
• Ouvrez le menu Insertion et choisissez Bloc Action, puis Rollover texte
dans le sous-menu.
Un rollover sera inséré dans le texte.
• Cliquez en dehors du bloc HTML, puis cliquez sur le bloc action :
Créer des effets dynamiques
Créer un rollover sur du texte
Par défaut, il y aura trois coches, une pour chaque bloc et toutes dans la
colonne Normal, tous les blocs sont visibles.
• Cliquez pour enlever les coches de la colonne "normal" pour les blocs
Survol et Cliqué, puis cochez dans la colonne Souris sur pour le bloc
survol et Clic pour le bloc Cliqué :
• Ouvrez la palette Actions dans le menu Fenêtre.
• Dans le champ, saisissez le texte à afficher.
• Choisissez Indigo dans le menu déroulant Groupe esclave.
Vous pouvez cliquer sur les titres des colonnes pour prévisualiser le
résultat. Pour l'utiliser, passez en mode Prévisualisation.
91
Créer des effets dynamiques
• Choisissez le numéro de l'image que vous souhaitez afficher dans le
•Dans l'onglet Paramètres assurez-vous que le groupe est le même que
Vous avez spécifié que l'action envoie un événement à l'item 1 du groupe
esclave Indigo. L'étape suivante est de définir le bloc esclave.
L'image sera maintenant affichée lorsque le texte est survolé :
menu déroulant Souris sur # :
Une utilisation classique des rollover est d'afficher une image cachée
lorsque le visiteur pointe le texte.
• Sélectionnez un bloc graphique contenant une image.
• Ouvrez le menu Bloc, et choisissez Actions, puis Image esclave dans
le sous-menu.
Dans
la palette Actions enlevez la marque dans la colonne Normal, cela
•
va rendre l'image invisible, et mettez une marque dans Image 1, l'image
sera visible sur l'événement 1 :
92
celui spécifié dans le rollover, ici Indigo :
Si vous voulez que le Rollover agisse comme un lien, vous pouvez définir
la destination exactement comme vous le feriez pour un bloc graphique en
utilisant la fenêtre d'Édition du lien.
• Choisissez un élément dans le menu Groupe esclave, mettez Souris sur
# à 1:
Les actions esclaves sont des actions qui peuvent faire apparaître une
image, afficher un calque ou ouvrir une fenêtre surgissante.
Ces actions sont déclenchées par une autre action qui envoie un
événement à un moment donné.
Pour afficher une ou plusieurs images esclaves
L'action Image esclave permet d'afficher plusieurs images en fonction d'un
numéro d'événement.
Par exemple, vous pouvez placer deux rollovers avec deux images
différentes :
• Sélectionnez le bloc graphique contenant l'image à afficher.
• Ouvrez le menu Bloc et choisissez Image esclave dans le sous-menu
• Sélectionnez le bloc graphique.
• Ouvrez le menu Bloc, choisissez Actions, puis Rollover dans le sous-
Actions.
Dans
la palette Actions mettez le même groupe dans le paramètre
•
Groupe esclave que celui spécifié pour le rollover, et mettez Image 1 à
Blocs :
Créer des effets dynamiques
Images esclaves et calques
menu.
• Dans la palette Actions cliquez sur l'onglet Paramètres.
93
Créer des effets dynamiques
Vous pouvez utiliser cette technique pour définir plusieurs boutons qui
affichent des images différentes lorsqu'un utilisateur pointe le bouton :
Animations
Les actions liées aux animations permettent de créer des effets
dynamiques sur votre page.
Paramétrer une séquence minutée
Afficher ou masquer une image esclave
L'action Afficher/masquer image esclave vous permet de contrôler
l'apparition d'une image en réponse à des événements.
• Sélectionnez le bloc graphique contenant l'image.
• Ouvrez le menu Bloc, choisissez Actions, puis Afficher/masquer image
esclave dans le sous menu.
• Dans la palette Actions, mettez Initialement à Caché si vous voulez
L'action Séquence minutée vous permet de piloter jusqu'à 20 actions
esclaves dans un ordre et une vitesse prédéterminée.
• Ouvrez le menu Page, choisissez Actions, puis Séquence minutée
dans le sous-menu.
• Dans la palette Actions mettez Boucle à Oui pour jouer l'animation en
boucle.
• Choisissez un groupe dans le menu déroulant Groupe esclave.
• Pour chaque numéro d'esclave à déclencher, mettez les menus à Oui :
que l'image soit rendue visible par l'événement, ou Visible si vous voulez
que l'événement cache l'image.
• Mettez Groupe esclave à la même valeur que celui du déclencheur, et
Esclave # au numéro spécifié dans le déclencheur :
• Dans le champ Vitesse, spécifiez le délai entre chaque événement en
millième de secondes. Par défaut, 500, soit une demi-seconde.
• Placez une action esclave sur chaque image devant être pilotée ; par
exemple Afficher/masquer une image esclave.
• Prévisualiser la page pour voir le résultat du déclenchement.
94
L'action Séquence aléatoire est identique à l'action Séquence minutée,
sauf que les événements sont envoyés dans un ordre aléatoire aux
esclaves.
• Sélectionnez l'icône du réglage général en haut de la palette Inspecteur
pour afficher les paramètres généraux du bloc, et cochez Calque dans la
section Propriétés :
Pour déclencher plusieurs événements après un
délai précis
L'action Minuterie est similaire à l'action Séquence minutée, sauf que les
événements sont envoyés simultanément aux actions esclaves désignées
après le délai spécifié.
• Ouvrez le menu Page et choisissez Minuterie dans le sous-menu
Actions.
Dans
la palette Actions spécifiez le délai dans le champ Vitesse en
•
millième de secondes et mettez tous les menus déroulants des esclaves
à déclencher à Oui :
• Ouvrez le menu Bloc, choisissez Actions, puis choisissez Animation de
calque dans le sous-menu.
• Dans la palette Actions spécifiez les paramètres en vous aidant du
tableau ci-dessous :
Paramètre
Description
Vitesse
Intervalle de temps en millième de seconde
entre chaque déplacement.
X
Distance parcourue horizontalement à chaque
déplacement, en pixels. Un chiffre négatif donne
Créer des effets dynamiques
Afficher une séquence aléatoire
un déplacement vers la gauche.
Animer un calque ������������������
L'action Animation de calque déplace un bloc HTML, graphique ou tableau
à condition qu'il soit un calque. Ceci peut être utilisé par exemple pour
attirer l'attention de l'utilisateur sur une partie du site, le bloc animé peut
aussi être associé à d'autres actions, comme des rollover par exemple.
X-Limit
Distance de déplacement horizontale maximale
en pixels.
Y
Distance parcourue verticalement à chaque
déplacement, en pixels. Un chiffre négatif donne
un déplacement vers le haut.
Y-Limit
Distance de déplacement verticale maximale en
pixels.
• Sélectionnez le bloc graphique.
95
Créer des effets dynamiques
Paramètre
Description
• Sélectionnez un bloc graphique sur la page "source" ou un bloc image
Boucle
Mettez Oui pour répéter le déplacement
en boucle ou Non pour arrêter après un
déplacement.
• Ouvrez le menu Bloc et choisissez Lien vers une nouvelle fenêtre
inséré dans un bloc HTML.
dans le sous-menu Actions.
• Dans la palette Actions spécifiez un nom pour la fenêtre, la page à
afficher ainsi que les différents paramètres de taille et d'apparence de la
fenêtre surgissante.
Fenêtres surgissantes (pop up)
Ces actions permettent d'afficher une nouvelle fenêtre au-dessus de la
fenêtre principale. Ces fenêtres sont en général utilisées pour afficher
un complément d'information pour compléter le contenu de la fenêtre
principale ou pour apporter de l'aide.
Quand vous cliquez sur l'image, une fenêtre sera affichée montrant le
contenu de la page spécifiée :
Note : Vous ne pouvez pas prévisualiser le fonctionnement de cette action
à l'intérieur de l'onglet de prévisualisation de Freeway. Il vous faut utiliser un
navigateur en utilisant Prévisualiser dans un navigateur dans le menu
Fichier.
Afficher une fenêtre lors d'un clic sur une image
L'action Lien vers une nouvelle fenêtre ouvre une page dans une fenêtre
surgissante quand l'utilisateur clique sur un bloc graphique.
• Créez une nouvelle page contenant le contenu à afficher dans la fenêtre
surgissante.
96
Vous pouvez utiliser l'action Fenêtre surgissante à fermeture
automatique pour fermer la fenêtre automatiquement.
L'action Lien texte vers une nouvelle fenêtre ouvre une fenêtre lorsqu'un
lien est cliqué.
• Créez une nouvelle page avec le contenu de la fenêtre surgissante.
• Placez le curseur d'insertion dans un bloc HTML sur la page source.
• Ouvrez le menu Insertion et choisissez Lien texte vers une nouvelle
Si le paramètre Utiliser lien est à Oui vous pouvez faire en sorte que
lors du clic le lien est suivi et simultanément une fenêtre surgissante est
ouverte.
Quand vous cliquez le lien, une fenêtre sera affichée :
fenêtre dans le sous-menu Bloc actions.
Cliquez
en dehors du bloc HTML puis sélectionnez le nouveau bloc
•
inséré.
Les paramètres vont apparaître dans la palette Actions.
• Sélectionnez la page à afficher dans la fenêtre surgissante dans le menu
déroulant Page.
Les autres options permettent de spécifier les dimensions et l'apparence de
la fenêtre :
Afficher une image dans une fenêtre surgissante
Créer des effets dynamiques
Définir un lien vers une fenêtre surgissante
L'action Image vers nouvelle fenêtre est similaire à l'action Lien vers
une nouvelle fenêtre sauf qu'elle affiche une image spécifique. C'est utile
pour afficher une version plus grande d'une image par exemple.
• Sélectionnez un bloc graphique contenant l'image originale.
• Ouvrez le bloc Menu et choisissez Image vers une nouvelle fenêtre.
• Dans la palette Actions sélectionnez l'image à afficher dans la fenêtre
surgissante.
97
Créer des effets dynamiques
• Spécifiez la largeur et la hauteur de la fenêtre ainsi que les différents
attributs de celle-ci :
Afficher une fenêtre surgissante
L'action Fenêtre surgissante affiche automatiquement une fenêtre
surgissante lorsque la page est chargée dans le navigateur. Ceci peutêtre utilisé pour afficher de la publicité, un avertissement ou des outils de
navigation sur le site :
Quand l'image sera cliquée, une version agrandie apparaîtra dans la fenêtre
surgissante :
• Créez une nouvelle page contenant le contenu à afficher dans la fenêtre
surgissante.
• Sélectionnez la page où la fenêtre devra apparaître.
• Ouvrez le menu Page et choisissez Fenêtre surgissante dans le sousmenu Actions.
• Dans la palette Actions sélectionnez la page à afficher, spécifiez la
position initiale de la fenêtre dans les champs Gauche et Haut et la
taille de la fenêtre dans les champs Largeur et Hauteur.
• Spécifiez ensuite les attributs de la fenêtre suivant ce que vous désirez
afficher.
98
d'afficher la fenêtre surgissante.
Navigation
Cette série d'actions fournit un moyen de naviguer entre les pages du site.
Redirection minutée
L'action Redirection minutée redirige simplement l'utilisateur vers une
page différente que celle qui est demandée après un délai spécifié.
• Ouvrez le menu Page et choisissez Redirection minutée dans le sous
menu Actions.
• Dans la palette Actions choisissez la page vers laquelle vous voulez
rediriger le visiteur dans le menu déroulant Destination et le nombre de
secondes à attendre dans le champ Délai :
Créer une fenêtre surgissante avec fermeture
automatique
Créer des effets dynamiques
• Dans le champ Délai spécifiez le nombre de secondes à attendre avant
• Sélectionnez la page qui représente le contenu de la fenêtre surgissante.
• Ouvrez la fenêtre Page et choisissez Fenêtre surgissante avec
fermeture automatique dans le sous-menu Actions.
L'action n'a pas de paramètre, mais fait simplement s'afficher une
fenêtre surgissante lorsque la page principale est chargée, puis la fenêtre
surgissante se ferme seule lorsque la page principale change :
Redirection sur version
L'action Redirection sur version redirige automatiquement l'utilisateur
vers une autre page si la version du navigateur utilisée ne correspond pas
au minimum spécifié. Vous pouvez vous servir de cette action pour afficher
un message d'alerte ou rediriger vers une page optimisée pour tel ou tel
navigateur.
• Ouvrez le menu Page, et choisissez Actions, puis Redirection sur
version dans le sous-menu.
Dans
le menu Destination choisissez la page de destination de la
•
redirection, et dans les champs Netscape Vers et IE Vers entrez les
versions des navigateurs concernées par la redirection :
99
Créer des effets dynamiques
La palette Actions vous permet de modifier les différents réglages comme
bon vous semble :
Actions graphiques
Ces actions sont appliquées aux blocs graphiques et permettent d'ajuster
la colorimétrie, ou d'appliquer des effets particuliers comme du flou par
exemple.
Chaque action graphique possède une case à cocher Activé :
• Utilisez les curseurs afin d'agir sur les paramètres et ajuster l'image à vos
besoins.
• Cochez Activé pour appliquer l'action et prévisualiser son effet sur
l'image.
Décochez
Activé pour ne plus appliquer l'action à l'image mais laisser
•
l'action dans la palette Actions. Cela permet de l'appliquer à nouveau
plus tard.
Faire des corrections d'images
L'action Photo Magic vous permet de contrôler des paramètres de l'image
et appliquer des corrections.
• Sélectionnez le bloc graphique sur lequel appliquer l'action.
• Ouvrez le menu Bloc et choisissez Photo Magic dans le sous menu
Actions.
100
Le bouton Valeurs par défaut remet les paramètres à leurs valeurs
initiales.
">