Manuel Freeway 7 - TRI-EDRE

ManuelFreeway 7

Droits dauteur et remerciements

Copyright copy 2008 et 2014 Softpress Systems Ltd Tous droits reacuteserveacutesLe logiciel Freeway et cette documentation sont soumis aux droits dauteur Aucune partie du logiciel Freeway ne peut ecirctre reproduite transmise transcrite stockeacutee ou traduite dans une autre langue ou un langage informatique sous quelque forme et par quelque moyen que ce soit sans lautorisation eacutecrite preacutealable de Softpress Systems Ltd et de TRI-EDRE (pour la version franccedilaise) Des copies suppleacutementaires de ce guide peuvent ecirctre faites et distribueacutees agrave condition quils contiennent cet avis de droit dauteurSoftpress Systems Ltd conserve speacutecifiquement la proprieacuteteacute du logiciel Freeway Le logiciel deacutecrit dans ce manuel est fourni sous contrat de licence et ne peut ecirctre installeacute utiliseacute ou copieacute quen accord avec les termes de cette licenceSoftpress est une marque deacuteposeacutee de Softpress Systems Ltd aux Etats-Unis et dans dautres pays Freeway est une marque deacuteposeacutee de Softpress Systems Ltd qui peut ecirctre deacuteposeacutee dans certains pays Apple Macintosh Power Macintosh le logo Universal et le logo Mac sont des marques deacuteposeacutees dApple Computer Inc Tous les autres noms de produits sont des marques commerciales ou des marques deacuteposeacutees de leurs proprieacutetaires respectifs

Limitation de responsabiliteacute

Les informations contenues dans ce guide sont consideacutereacutees comme eacutetant correctes agrave la date de publication Cependant notre politique est de poursuivre le deacuteveloppement et linformation dans ce guide est sujette agrave changement sans preacuteavis et ne constitue pas un engagement de la part de Softpress Systems Ltd

Agrave propos de ce guide

Ce guide dutilisation de Freeway explique certains des concepts sous-jacents de Freeway Il vous fera deacutecouvrir linterface intuitive les menus et les palettes que vous allez utiliser pour importer ou creacuteer des eacuteleacutements graphiques et ajouter des fonctionnaliteacutes webIl y a aussi un tutoriel eacutetape par eacutetape dans lequel vous allez concevoir et produire facilement et rapidement un site web avec Freeway Vous verrez combien il est facile de faire un site web multi-pages avec des graphiques du texte et des liensCe guide couvre lutilisation de Freeway Express et de Freeway Pro Les deux versions fonctionnent essentiellement de la mecircme faccedilon mais Freeway Pro inclut de nombreuses fonctionnaliteacutes puissantes suppleacutementaires Lorsque les meacutethodes de travail sont sensiblement diffeacuterentes elles sont mises en eacutevidence dans ce manuelDe plus amples informations sur le travail avec Freeway se trouvent sur le site Web SoftpressTrois films de tutoriel mentionneacutes dans ce guide peuvent ecirctre trouveacutes agrave httpwwwsoftpresscomsupporttutorialshtml ougrave ils sont appeleacutes Getting Started with Freeway Veuillez noter que certains des films plus anciens ont eacuteteacute faits en utilisant Freeway 5 ou 6 mais ils sont encore tregraves pertinents

Configuration requise

Freeway Pro ou Express neacutecessite un Mac Intel avec Mac OS X 106 (Snow Leopard) ou supeacuterieur

2

M a n u e l F r e e w a y 7

Avant-proposFeacutelicitations pour avoir choisi Freeway lrsquoapplication la plus orienteacutee vers le design des sites Web Avant de commencer il est important de comprendre comment Freeway travaille et comment vous pouvez lrsquoutiliser au mieuxLrsquoapproche de Freeway vous permet de vous concentrer sur la mise en page et les fonctions de votre site pas sur les problegravemes drsquooptimisation de code et de compatibiliteacute Agrave cause de cela si vous venez drsquoune application de creacuteation de site baseacutee sur le code vous devez vous deacuteshabituer de certaines logiques propres au code Heureusement rien de tregraves complexeLa chose la plus importante agrave comprendre est que Freeway est un geacuteneacuterateur de code HTML et non pas un eacutediteur de code Vous utilisez les outils de mise en page de Freeway pour concevoir le design de vos pages et il geacuteneacuterera pour vous du code optimiseacute agrave partir de votre travail Cela signifie que vous nrsquoavez pas agrave vous soucier de la mise en page agrave bas niveau un problegraveme classique des eacutediteurs HTML Dans Freeway la geacuteneacuteration de code est nouvelle agrave chaque fois Les reacuteparations neacutecessaires sont effectueacutees afin de creacuteer des pages au comportement le plus semblable quel que soit le navigateur vous ecirctes libre de passer de lrsquoHTML au XHTML drsquoun seul clic Freeway creacuteera des pages compatibles avec les speacutecifications du W3C automatiquement Avec tous ces aspects techniques disparus vous pouvez vous concentrer sur ce qui compte le design de vos pagesFreeway vous offre la liberteacute de conception et la qualiteacute drsquoun outil professionnel de deacuteveloppement Web gracircce agrave ses fonctions intelligentes permettant aux utilisateurs novices comme aux deacuteveloppeurs chevronneacutes drsquoavoir les meilleurs sitesKeith MartinSenior Lecturer London College of Communication

Liens utilesPour plus de deacutetails astuces et des actions suppleacutementaires vous pouvez vous connecter agrave la base de connaissances (en Anglais) wwwsoftpress comkb et utiliser le savoir des autres utilisateurs de FreewayLe forum Freewaytalk est disponible agrave lrsquoadresse wwwfreewaytalknetTutoriels videacuteo httpwwwsoftpresscomsupporttutorialshtmlActionsForge (retrouvez sur ce site toutes les actions Freeway de SoftPress et de tierce parties) httpwwwactionsforgecom

Consultez notre site wwwtri-edrefr pour des liens vers le forum et astuces en Franccedilais

3


Agrave propos de Softpress et Freeway 8Freeway Pro et Freeway Express 8Premier lancement de Freeway 8

Le World Wide Web 9Bienvenue sur le World Wide Web 9Comment puis-je acceacuteder au web 9HTML - Parler le bon langage 9Quels sont HTTP et FTP 10Comment fonctionne Freeway 10

Penser design 11Plans de conception 11Formats de page 11Type 11Styles 11Graphiques 11Optimisation 11Code 11Sortie 12Teacuteleacutecharger 12

Tour rapide 13Fenecirctre principale de Freeway 13Barre des menus 13Barre doutils 13Panneau Site et pages 13Les boutons de site 14La zone deacutedition 14Les boutons de mode de page 14Les boutons de largeur de meacutedia 14Hyperliens 14LInspecteur 14Les autres palettes 14

Tutoriels 15

Tutoriel 1 15

4


Commencer et enregistrer le projet 15Reacuteglages des dimensions de la page et de lrsquoalignement 15Reacutegler les dimensions de la page et son alignement 16Ajout drsquoune image de fond 16Agrave propos des blocs 16Ajout drsquoun texte graphique 16Importer une image 17Importer des photos 18Dupliquer des blocs 18Importer du texte 19Preacutevisualiser votre page 20

Tutoriel 2 21Maquettes concepts de base 21Le panneau Site 21Creacuteation drsquoune maquette 22Nommer les pages et les fichiers 22Travailler sur la Maquette 22Ajouter des pages agrave un site 23Titres et noms des pages 23Ajouter du contenu aux nouvelles pages 23Ajouter des hyperliens 25Preacutevisualiser dans un Navigateur 26

Tutoriel 3 27Images et hyperliens 27Creacuteer un menu avec Rollover 28Creacuteer une galerie photos simple 29Autres types drsquoactions 30

Transfeacuterer votre site sur le web 32Transfert FTP 32Transfert de votre site avec Freeway 32Transfert par un client FTP 32

Travailler avec Freeway 33Creacuteer un nouveau document Freeway 33Travailler publier et preacutevisualiser 33

5


Travailler avec des pages 33Mise en page CSS ou par tableaux 33Travailler avec des blocs 33Travailler avec des images 33Hieacuterarchie des blocs 33Travailler avec des tableaux 34Les styles de texte 34Les couleurs 34Hyperliens et ancres 34

Actions Freeway 35

Showcase (Application et Action) 35

Mise en page relative (Version Pro) 35Travailler avec la Mise en page relative 37Autres actions de lensemble Mise en page relative 37

Creacuteation de-mails 37Utiliser laction Creacuteation de-mails 37

Actions Moteur de recherche (Version Pro seulement) 38Appliquer laction de dossier 38Creacuteation du formulaire de recherche 38Affichage des reacutesultats 38Comment le moteur de recherche reacutefeacuterence les pages 39

Actions Carte du site 39Action de dossier 39Envoi de la carte du site 39Reacuteglages page par page 40

Actions Partenaire Amazon 40Action Lien texte Partenaires Amazon 40Action Partenaires Amazon sur un bloc graphique 41Action Liens Produits Partenaire Amazon 41

Application Showcase Creacuteation de galeries 41Fenecirctre Principale 42Linspecteur 42

6


Enregistrement du document 43

Laction Showcase Inteacutegration de la galerie 44

Ressources suppleacutementaires 44

7


Agrave propos de Softpress et FreewaySoftpress Systems a eacuteteacute creacuteeacute en 1993 agrave Oxford en Angleterre pour combler les besoins des professionnels de la publication Freeway est une application de deacuteveloppement de site Web conccedilue depuis le deacutebut pour des personnes ayant besoin de concevoir et assembler du contenu pour internet sans connaicirctre le langage HTML et sans avoir agrave utiliser le moindre code pour construire des sites drsquoune grande qualiteacuteFreeway utilise des approches et des outils similaires agrave ceux trouveacutes dans les logiciels de publication traditionnels Dessinez simplement des blocs sur votre page remplissez-les avec du texte ou des images creacuteez des liens entre les diffeacuterentes pages ajoutez du contenu dynamique ou bien encore tout ce que vous pouvez imaginer drsquoautre Ensuite demandez agrave Freeway de publier et de mettre en ligne votre site Web pour vous Freeway geacuteneacuterera le code neacutecessaire Ce code sera toujours propre et efficace et conforme aux standards en vigueur Vous nrsquoaurez jamais agrave utiliser du code sauf si vous le deacutesirez vraimentAvec ces bases proches des logiciels de publication Freeway est le logiciel de choix pour les personnes travaillant dans les meacutetiers de lrsquoimpression et de la publicationFreeway srsquoadresse agrave toutes les cateacutegories drsquoutilisateurs les Photographes peuvent publier leurs portfolios les commerccedilants peuvent creacuteer une vitrine et vendre leurs produits en ligne les associations peuvent preacutesenter leurs activiteacutes et se faire connaicirctre il nrsquoy a pas de limite

Freeway Pro et Freeway ExpressFreeway existe en deux versions Freeway Pro et Freeway Express Freeway Express est la version la plus simple adresseacutee aux personnes deacutesirant creacuteer des sites de petite taille et ne neacutecessitant pas de fonctions avanceacutees Freeway Pro contient plusieurs fonctions avanceacutees permettant la creacuteation de sites modernes et un grand nombre de fonctionnaliteacutes ameacuteliorant la productiviteacute Quelques fonctions preacutesentes dans Freeway Pro uniquement

bull Publication dans divers formats (HTML 5 HTML 401 XHTML Transitionnel et Strict)bull Choix multiple drsquoencodage de pagesbull Gestions complegravetes des styles et couleurs pour lrsquoensemble du sitebull Capaciteacute drsquoimport drsquoimages eacutetendue Import des formats Illustrator Photoshop fichiers TIFF et plusbull Rapport drsquoaccessibiliteacutebull Utilisation de feuilles de styles multiples pour chaque documentbull Styles CSS complets pour les textes et mise en page CSSbull Possibiliteacute de speacutecifier la position des blocs de maniegravere relative ou par pourcentagesbull Gestion des contours habillages marges et bordures (HTML seulement) seacutepareacutes pour chaque cocircteacute

drsquoun blocbull Effets visuels avanceacutes gracircce agrave lrsquoutilisation des actions Scriptaculousbull Utilisation des Styles pour les liens des blocs calques HTMLbull Carte des Liens aperccedilu rapide des liens agrave lrsquointeacuterieur de votre documentbull Fenecirctres multiples pour un mecircme documentbull Palettes segmenteacutees pour une meilleure gestion de lrsquoespace de travailbull Transformation des blocsbull Addition de plusieurs effets possibles (ombres lueurs)bull Enregistrement des blocs et pages sous forme drsquoimagesbull Eacutecriture et utilisation drsquoactions de tierce partie

Premier lancement de FreewayAu premier lancement vous devrez saisir les informations concernant votre enregistrement pour deacutebloquer le logiciel Vous ne devrez le faire qursquoune seule fois Les mises agrave jour futures de Freeway peuvent demander agrave nouveau le numeacutero ne le perdez pas

bull Ouvrez le dossier Applications du disque dur de votre Mac puis cliquez deux fois sur lrsquoapplication Freeway Freeway se lance et affiche la fenecirctre drsquoenregistrement

bull Saisissez votre numeacutero de seacuterie votre nom et le nom de votre Entreprise Le Nom et lrsquoEntreprise sont facultatifs Nrsquooubliez pas de cocher la case laquoJrsquoaccepte la Licenceraquo pour activer le bouton OK

bull Cliquez sur le bouton OK pour valider votre numeacutero de seacuterie Freeway va terminer son deacutemarrage

8


Le World Wide Web

Bienvenue sur le World Wide WebSi vous avez surfeacute sur le web mais que vous navez jamais creacuteeacute votre propre site web vous pensez peut-ecirctre que les sites Web sont un peu comme des stations de radio et que pour utiliser votre navigateur Web pour acceacuteder agrave un site web cest comme reacutegler votre navigateur sur la station de radioCette analogie est assez bonne agrave part une diffeacuterence majeure le web est tout agrave fait deacutemocratique Vous navez pas besoin dune licence ou de tout eacutequipement hautement speacutecialiseacute pour publier votre site sur le monde tout ce dont vous avez besoin est un ordinateur connecteacute agrave Internet et un nom de domaine inscrit ce qui coucircte quelques dollars de sorte que les gens savent ougrave vous trouver

Comment puis-je acceacuteder au web Pour publier votre site Web sur le World Wide Web et le rendre accessible agrave dautres utilisateurs vous avez simplement besoin de lancer un programme appeleacute un serveur Web sur votre ordinateur et donner agrave lordinateur un nom enregistreacute dans une autoriteacute centraliseacutee afin que les autres utilisateurs puissent vous trouver sur InternetSauf si vous avez une connexion permanente agrave Internet et que vous pouvez laisser votre ordinateur allumeacute en permanence vous trouverez probablement quil est plus pratique davoir votre site web heacutebergeacute par une socieacuteteacute speacutecialiseacutee appeleacutee un fournisseur de services Internet ou FAISi vous avez deacutejagrave un compte de messagerie (compte email) il a probablement un espace web gratuit inclus avec ce compte et votre FAI vous fournira des instructions sur la faccedilon de teacuteleacutecharger vos pages web sur votre espace web gratuit et vous indiquera le nom ou ladresse que les utilisateurs devront utiliser pour se connecter agrave vos pagesSi vous navez pas despace web gratuit inclus avec votre forfait ou si vous voulez des fonctionnaliteacutes suppleacutementaires pour votre site web vous aurez besoin de payer un FAI pour un service laquodaccueilraquo qui peut aussi proposer lenregistrement dun nom de domaineLe nom de domaine est le nom indiqueacute par les visiteurs dans le champ de ladresse Web dun navigateur pour acceacuteder agrave un site Les noms de domaine peuvent avoir de nombreux suffixes diffeacuterents agrave la fin de ladresse comme fr com net org etc

HTML - Parler le bon langageAu cœur du Web est un langage appeleacute HTML qui signifie HyperText Markup Language Le HTML remplit deux fonctions de base il deacutecrit ce que la page doit afficher et fournit des liens vers dautres pages

Par exemple voici la page que lutilisateur voit sur son navigateur

Et voici le code HTML que le navigateur interpregravete pour afficher la page

La description de page en langage HTML se compose dune seacuterie de deacuteclarations qui disent des choses comme Mettez ce graphique en haut de la page Mettez ce texte en dessous Lorsque le navigateur lit et interpregravete le code HTML il reconstruit la page que le concepteur a creacuteeacuteeLa deuxiegraveme partie importante du HTML appeleacute laquohyperliensraquo rend le World Wide Web autre chose quun simple panneau daffichage Chaque page peut acceacuteder agrave dautres pages du mecircme site Web ou agrave des pages sur dautres sites partout ailleurs sur le webTout comme vous navez pas besoin de comprendre les codes internes que votre traitement de texte utilise pour stocker des informations sur votre document vous navez pas besoin de connaicirctre le langage HTML pour concevoir des pages Web

9


Quels sont HTTP et FTP Ce sont deux autres termes que vous pourriez rencontrer et il est tout aussi bien de savoir ce quils signifientbull HTTP ou HyperText Transfer Protocol est un ensemble de conventions pour le transfert de pages Web entre un serveur web et un navigateur Web Il est rappeleacute agrave chaque fois que vous surfez sur le Web par le http que votre navigateur insegravere devant ladresse dans la barre dadresse

bull FTP qui signifie protocole de transfert de fichiers est une convention pour transfeacuterer des fichiers sur Internet entre deux ordinateurs FTP est le moyen standard de teacuteleacutechargement des fichiers sur un serveur web et cest la meacutethode que Freeway utilise pour mettre agrave jour votre site web agrave distance sur lespace Web de votre fournisseur de services Internet

Comment fonctionne FreewayQue vous soyez nouveau dans la conception de site web ou un designer expeacuterimenteacute Freeway vous permet de creacuteer des sites complexes rapidement et facilement avec peu ou aucune connaissance du code HTMLFreeway fonctionne dune maniegravere tregraves semblable aux programmes de PAO en utilisant un environnement WYSIWYG (What You See Is What You Get) Avec son interface conviviale et intuitive Freeway permet de vous concentrer sur la conception et la fonctionnaliteacute que vous voulez atteindre sans la distraction davoir agrave vous soucier de la faccedilon dont il sera codeacute en HTMLGeacuterer les noms et les emplacements des ressources agrave votre site (graphiques photos films etc) est entiegraverement pris en charge par Freeway Toute la conception de votre site est contenue dans un document unique Lorsque vous ecirctes precirct agrave visualiser votre site web Freeway va geacuteneacuterer le code HTML et les ressources neacutecessaires et les placera dans lemplacement de votre choixLimportation et loptimisation des images et autres ressources graphiques est eacutegalement geacutereacute de maniegravere transparente par Freeway Plutocirct que de preacuteparer vos graphiques dans une application externe avant de les utiliser dans votre site Freeway importe les graphiques dans de nombreux formats qui seront convertis au format et agrave la taille optimale lorsque vous publiez votre site de sorte que votre site sera toujours optimiseacute pour un chargement rapide par le navigateurLe code HTML geacuteneacutereacute lorsque vous publiez votre fichier Freeway est 100 valide ce qui signifie que votre site doit afficher un aperccedilu parfait dans les diffeacuterents navigateurs tout en veillant agrave ce quil adhegravere aux directives daccessibiliteacute pour les personnes handicapeacutees Votre site valide signifie eacutegalement quil doit ecirctre relativement peacuterenneUne fois que vous avez publieacute votre fichier et que le code HTML a eacuteteacute geacuteneacutereacute vous pouvez fournir agrave Freeway les reacuteglages de connexion agrave votre espace web et il pourra teacuteleacutecharger votre site et tous les fichiers neacutecessaires par FTP Vous pouvez aussi teacuteleacutecharger vos fichiers manuellement en utilisant votre application client FTP preacutefeacutereacutee

10


Penser designpar Keith Martin Maicirctre de confeacuterences London College of Communication

Plans de conceptionCommencez par penser agrave vos plans globaux de conception de site Y at-il des parties de la mise en page qui seront reacutepeacuteteacutees sur plusieurs pages Ce sont des choses ideacuteales pour les pages maquettes une des cleacutes pour travailler rapidement et efficacement dans FreewayConfigurez vos guides grilles zones de texte HTML et des graphiques sur une page maquette puis faites de nouvelles pages agrave partir de cette maquette et modifiez ce qui est neacutecessaire Vous pouvez avoir plusieurs pages maquettes dans un site un truc utile si vous avez une structure de mise en page pour certaines pages et dautres tregraves diffeacuterentes pour dautres pagesMais ne vous inquieacutetez il nest pas neacutecessaire de tout planifier avant de commencer Freeway est tregraves indulgent comme tout outil de conception orienteacutee conception devrait lecirctre

Formats de pageDonnez agrave vos pages Freeway des largeurs approprieacutees pour votre auditoire typique Quelque chose autour de 900 agrave 950 pixels de large est raisonnable pour la grande majoriteacute des internautes mais si votre visiteur normal a tendance agrave utiliser de plus grands eacutecrans essayez 1000 pixels ou plus Cela ne fige pas la taille de la fenecirctre du navigateur du visiteur mais vous aurez une bonne base de conception pour vous aider agrave creacuteer un ensemble coheacuterent et professionnel de mises en pageUtilisez loption Aligner de linspecteur pour aligner le contenu de votre page agrave gauche au centre ou agrave droite Sinon laissez lalignement de la page deacutesactiveacute et explorez les liaisons des tailles et positions des blocs sur les cocircteacutes de la page en utilisant le volet Dimensions de la palette InspecteurAvec des eacuteleacutements en couche en particulier (qui sont produits par les controcircles CSS) ce qui peut rendre les structures de pages particuliegraverement dynamiques et fluides avec la souplesse de suivre la taille des fenecirctres du navigateur

TypeLe reacuteglage du type est facile agrave faire et dans Freeway vous avez deux choix principaux graphiques ou HTML Le type graphique (dans des blocs graphiques) est deacutedieacute aux images bitmap Le type HTML est codeacute comme du texte dans la page WebVous avez beaucoup moins de choix typographiques avec du texte HTML ougrave vous ecirctes limiteacute agrave des polices qui sont geacuteneacuteralement disponibles sur les ordinateurs de chacun Dautre part les moteurs de recherche ignorent les graphiques et ne lisent que le texte HTML Les textes mis dans des blocs graphiques ne peuvent jamais ecirctre trouveacutes Utilisez le type graphique lorsque vous voulez un aspect preacutecis pour un titre ou quelque chose qui doit fusionner avec une image sinon vous devez normalement choisir le texte HTML Oui cela signifie que vous avez moins doptions pour peaufiner votre composition mais cest la maniegravere de proceacuteder avec le design web afin que moteurs de recherche et visiteurs puissent utiliser au mieux votre site Quoi quil en soit les options de mise en forme agrave base de CSS de Freeway vous donnent plus de controcircle sur le type HTML standard que vous pourriez penser

StylesLa creacuteation et lutilisation de modegraveles sont une partie importante de la conception web moderne et il est un eacuteleacutement cleacute de la faccedilon dont fonctionne FreewayQuand vous mettez en forme du texte les styles sont creacuteeacutes automatiquement et sont precircts agrave ecirctre appliqueacutes ailleurs Modifiez les styles et votre texte suit le mouvementVous pouvez rationaliser votre travail en creacuteant un jeu de styles puis les appliquer agrave votre texte Vous pouvez appliquer des styles personnaliseacutes dans un bloc et affecter tout son contenu dun seul coup puis donner agrave des parties choisies du nouveau texte un style selon les besoinsSi vous voulez aller plus loin vous pouvez ameacuteliorer vos scores dans les moteurs de recherche et laccessibiliteacute agrave laide de modegraveles structurels traditionnels pour controcircler diffeacuterents eacuteleacutements dans votre mise en page automatique des paragraphes en-tecircte et structures de listes baseacutes sur les balises aux identificateurs dobjets et ainsi de suite Commencez par eacutediter le style p dans la fenecirctre Styles pour controcircler la faccedilon dont saffichent les paragraphes de texte sans mise en forme personnaliseacutee

GraphiquesNe perdez pas un temps preacutecieux agrave concevoir des graphiques optimiseacutes pour le web avant de vous lancer dans Freeway De mecircme que les fichiers tous precircts PNG GIF JPEG Freeway Pro peut importer vos images haute reacutesolution dorigine si elles sont en format TIFF PDF SVG ou mecircme le format natif de Photoshop ou Illustrator (Utilisation de 24 bits PNG si vous avez Freeway Express) Si vous avez une gestion de la transparence dans vos graphiques originaux vous la retrouverez dans FreewayMise agrave leacutechelle deacutecoupage et empilement de vos images votre conception sera toujours geacuteneacutereacutee avec la bonne reacutesolution deacutecran en JPEG GIF ou PNG optimiseacute pour le web agrave votre choixSi vous deacutesirez des images en tranches - utiles pour des rollover ou des animations par exemple - alors deacutecochez loption Combiner graphiques dans la palette Inspecteur Ceci produit des graphiques deacutecoupeacutes pour le Web sans que vous ayez agrave prendre des ciseaux virtuels pour vos images originales Il suffit de deacuteplacer lobjet pour ajuster la tranche

OptimisationUtilisez la palette Inspecteur pour modifier le format de sortie de limage et les niveaux de compression afin dobtenir le juste eacutequilibre entre la taille du fichier et la qualiteacute visuelle Vous pouvez voir comment les controcircles de compression affectent lapparence de vos images en activant loption Aperccedilu graphique dans le menu Affichage Si vous avez beaucoup de grands graphiques dans la mise en page cela peut ralentir un peu laffichage car Freeway lit chaque fichier image original et geacutenegravere la version finale optimiseacutee pour le web agrave la voleacutee Mais noubliez pas de cette fonction qui vous permet de voir preacuteciseacutement comment vos eacuteleacutements vont safficher dans votre mise en page

CodeLa publication personnaliseacutee de Freeway peut ecirctre faite en utilisant la large seacutelection dactions des outils et plugins qui eacutetendent le jeu de fonctionnaliteacutes de FreewayVous pouvez eacutegalement ajouter du code personnaliseacute agrave des endroits speacutecifiques dans la mise en page en utilisant la fenecirctre de balise HTML pour atteindre des parties speacutecifiques de la structure geacuteneacuterale du code ou par addition dun balisage eacutetendu directement agrave des eacuteleacutements et des modegraveles Vous pouvez mecircme faire vos propres actions pour simplifier les tacircches creacuteer des codes conditionnels complexes et reproductibles

11


SortieUne fois que vous avez mis en place quelques pages vous aurez besoin de veacuterifier comment ils saffichent directement dans un navigateur Vous pouvez consulter les pages uniques dans lAperccedilu interne de Freeway mais pour veacuterifier les liens et autres il est preacutefeacuterable de preacutevisualiser dans un navigateur Que vous soyez un utilisateur de Safari Firefox ou Opeacutera vous devriez veacuterifier vos pages avec autant de navigateurs modernes que vous pouvez (ne vous embecirctez pas avec Internet Explorer pour Mac il nest pas lieacute agrave des versions de Windows et est mort depuis longtemps) Freeway geacutenegravere des pages qui sont geacuteneacuteralement compatibles tant que cest raisonnablement possible mais certaines dispositions ne peuvent tout simplement pas rendre aussi bien dans certains navigateurs Internet Explorer de Microsoft 6 et 7 sont les plus grands deacutelinquants ici donc utilisez un PC si vous en avez agrave proximiteacute ou lun des services de rendu de navigateur en ligne Si vous avez un cyber cafeacute agrave proximiteacute ce peut ecirctre une faccedilon agreacuteable de contourner le problegraveme

TeacuteleacutechargerVous pouvez utiliser nimporte quel logiciel de client FTP pour transfeacuterer la sortie de Freeway sur votre site web mais si vous faites cela avec Freeway lui-mecircme alors vos fichiers seront geacutereacutes pour vous Les eacuteleacutements que vous supprimez de vos pages seront retireacutes du site et ainsi de suite Cela peut sembler minime mais il peut vous faire eacuteconomiser beaucoup de temps de prise de tecircte et despace perdu sur le serveur

12


Tour rapide

Fenecirctre principale de FreewayCest dans cette fenecirctre que vous creacuteez et eacuteditez votre site les diffeacuterentes pages qui le composent tous les eacuteleacutements de chaque page et les hyperliens entre pages ou vers dautres sitesEn dehors de la fenecirctre principale des palettes flottantes (Inspecteur Actions etc) permettent un accegraves facile aux reacuteglages

Barre des menusIl sagit de la barre de menu deacuteroulant qui apparaicirct en haut de leacutecran sur tous les programmes en cours dexeacutecution sur un ordinateur MacintoshDans ce guide nous navons pas la place pour examiner chaque menu en deacutetail Voici un rapide aperccedilu des menus

Menu FreewayCest lagrave que vous pouvez configurer vos preacutefeacuterences et cacher ou quitter Freeway

Menu FichierLe menu pour toutes les fonctions agrave faire avec votre document principal telles que louverture la souvegarde le teacuteleacutechargement etc Il contient eacutegalement des options pour limportation de texte graphiques et autres ressources

Menu EditionComme avec la plupart des applications Macintosh cest lagrave que vous pouvez couper copier et coller Pour Freeway cest aussi lagrave que vous pouvez eacutediter vos URL et des listes de ressources etc

Menu PageComme son nom lindique ce menu est pour les fonctions qui sont speacutecifiques agrave la page telles que lajout ou la suppression de pages lapplication dune action Freeway agrave une page etc

Menu BlocLe menu de fonctions du bloc seacutelectionneacute Ici entre autres choses vous pouvez verrouiller les blocs deacuteplacer des blocs agrave lavant ou les envoyer agrave larriegravere dupliquer des blocs transformer les blocs (Pro uniquement) et appliquer au bloc des actions Freeway

Menu StyleCe menu contient des options pour le style de texte

Menu InsertionVous pouvez inseacuterer des types particuliers darticle sur votre page de ce menu Ce menu est principalement utiliseacute pour inseacuterer des eacuteleacutements en seacutequences de texte

Menu AffichageDans ce menu vous pouvez choisir des valeurs de zoom basculer les guides voir les caractegraveres invisibles etc

Menu FenecirctreCe menu vous permet douvrir une des palettes de Freeway et de basculer entre les fenecirctres ouvertes du document

Barre doutilsLa barre doutils contient les principaux outils de Freeway Vous pouvez personnaliser les outils afficheacutes avec un Controcircle+clic sur la barre doutils

Panneau Site et pagesLe panneau agrave gauche de la zone deacutedition de la page permet de basculer entre le plan du site et le plan de la page en cliquant sur la barre de titre qui affiche site ou page en haut de la listePar deacutefaut le panneau affiche le plan du site

Le plan du siteLe plan de site affiche une liste de toutes les pages et dossiers qui composent votre site avec les pages maquette en haut et les pages creacuteeacutees agrave partir des pages maquettes au dessous Lutilisation des pages maquettes est deacutetailleacutee dans la section Tutoriel

13


Si vous modifiez une page de votre site un point noir apparaicirct agrave gauche de licocircne de la page dans la liste (ce qui indique que des modifications ont eacuteteacute apporteacutees depuis la derniegravere fois que le site a eacuteteacute publieacute)Vous pouvez modifier lordre dans lequel les pages apparaissent dans la liste du panneau de site en cliquant et en les faisant glisser agrave un endroit diffeacuterentEn cliquant sur le triangle agrave gauche de licocircne dun dossier la liste de toutes les pages contenues dans ce dossier est afficheacuteeVous pouvez eacutegalement voir dans cette liste si une page ou un dossier a une action Freeway qui lui est appliqueacutee Si une action est appliqueacutee une petite icocircne action Freeway apparaicirct sur la page ou le dossier dans la liste Seacutelectionnez la page ou le dossier et regardez dans la palette Actions pour voir quelles Actions sont appliqueacutees

Le plan de la pageCliquez sur la barre de titre du panneau du site pour basculer laffichage du plan de page Ce panneau indique la page qui est afficheacutee dans la zone deacutedition de pageLa liste des blocs et autres ressources de votre page doit safficher sinon cliquez sur le triangle agrave gauche de licocircne de la pageComme pour le plan de site une icocircne action Freeway action indique les eacuteleacutements qui ont une action Freeway Seacutelectionnez leacuteleacutement et regardez dans la palette Actions pour voir les Actions qui sont appliqueacutees

Les boutons de siteCes boutons en bas du panneau Site et Pages vous permettent dajouter ou de supprimer des pages ou des dossiers agrave votre siteLe bouton - supprime les pages ou dossiers seacutelectionneacutesLe menu deacuteroulant vous permet de creacuteer des pages ou dossiers

La zone deacuteditionCest la zone principale au centre de la fenecirctre Elle affiche la page seacutelectionneacutee dans le panneau de gauche Elle vous permet de placer vos blocs et vos images et de creacuteer et modifier votre mise en page

Les boutons de mode de pageIl y a trois boutons au-dessus de la zone deacutedition Maquette Page et Preacutevisualisation Les deux premiers permutent rapidement entre laffichage de la maquette utiliseacutee par la page et la page elle-mecircme Le troisiegraveme bouton affiche une preacutevisualisation de la page (telle quelle apparaicirctra dans un navigateur web)Il y a aussi un bouton Liens qui affiche graphiquement tous les liens qui arrivent ou partent de cette page

Les boutons de largeur de meacutediaJuste en dessous des boutons de mode se trouvent des boutons de largeur des meacutedias Chaque bouton repreacutesente une largeur speacutecifique agrave partir de laquelle la mise en page de la page peut se modifier suivant la largeur de la fenecirctre du navigateur ou si la page est afficheacutee sur un appareil mobileSi vous navez pas besoin de ce comportement laissez le choix par deacutefaut

HyperliensLorsquun bloc ou du texte est seacutelectionneacute dans la page cette zone (en bas de la zone deacutedition) affiche si un lien est appliqueacuteElle vous permet aussi dappliquer un lien soit vers une autre page du site soit vers un lien externe lenvoi dun email etc

LInspecteurLInspecteur est la palette principale et certainement celle que vous utiliserez le plus souvent Son contenu est fonction de leacuteleacutement seacutelectionneacute (page bloc graphique bloc HTML texte etc)Suivant le contexte et le type deacuteleacutement seacutelectionneacute diffeacuterents boutons en haut de la palette accegravedent aux reacuteglages speacutecifiques format de page dimension des blocs apparence format des caractegraveres effets graphiques reacuteglages de sortie etc

Les autres palettesDautres palettes sont accessibles par le menu Fenecirctre par exemple la palette Actions pour les reacuteglages des actions Freeway la palette Couleurs pour les reacuteglages et la creacuteation des couleurs utiliseacutees etc

14


TutorielsNous allons utiliser Freeway pour creacuteer un site Web pour un photographe (fictif) nommeacute Maurice Cowley Nous allons proceacuteder en trois eacutetapes chacune drsquoelle dans un tutoriel seacutepareacuteTout ce qui est fait ici peut lrsquoecirctre dans Freeway Express et dans Freeway Pro Si vous utilisez Freeway Pro vous trouverez des diffeacuterences entre les copies drsquoeacutecran du tutoriel et lrsquointerface de votre logiciel la majoriteacute des copies venant de Freeway ExpressChaque tutoriel prend environ 30 minutes si vous suivez les instructions pas agrave pas Vous ecirctes libre de faire vos propres tests et drsquoessayer les outils comme bon vous semble Crsquoest le meilleur moyen drsquoapprendreAgrave la fin du troisiegraveme tutoriel vous aurez creacuteeacute un site Web pleinement fonctionnel Le site que vous allez fabriquer contiendra des rollovers des liens une galerie drsquoimages avec des vignettes drsquoimages Vous serez surpris de voir comment un site si complexe peut ecirctre reacutealiseacute tregraves rapidement et sans connaissance de lrsquoHTMLAfin de vous preacutesenter toutes les fonctionnaliteacutes de maniegravere approprieacutee le tutoriel ne suivra pas exactement une meacutethodologie de travail classique Vous adapterez votre propre meacutethode de travail lorsque vous travaillerez sur votre projetLes tutoriels vous guideront pas agrave pas Voici les diffeacuterents points abordeacutes dans chacun drsquoentre euxTutoriel 1 Creacuteation drsquoun nouveau document apprendre la structure du site ajouter divers eacuteleacutements et veacuterifier les pages dans la preacutevisualisationTutoriel 2 Creacuteer la structure drsquoun site contenant plusieurs pages utilisation des Maquettes ajout de liens pour la navigation agrave lrsquointeacuterieur du site preacutevisualisation du site dans un navigateurTutoriel 3 Ajout de fonctionnaliteacutes ajout drsquoeffets dynamiques comme des rollovers des images cible etc en utilisant les actions de FreewayNote Les images utiliseacutees sont agrave lrsquointeacuterieur du dossier Tutoriel de Freeway Vous pouvez eacutegalement les teacuteleacutecharger sur notre site internetIMPORTANT utilisateur de Freeway Pro Avant de commencer assurez-vous que le bouton Mise en page CSS dans la barre drsquooutils ne soit pas activeacute afin de terminer les tutoriels correctement

Tutoriel 1

Commencer et enregistrer le projetFreeway est livreacute avec des modegraveles que vous pouvez utiliser pour creacuteer un site rapidement Vous pouvez les choisir dans la partie gauche de la fenecirctre de creacuteation de nouveaux documentsPour notre exemple nous allons partir drsquoun document vierge Cliquez sur laquoBlankraquo et choisissez laquoVideraquo

bull Lancez Freeway La fenecirctre Nouveau Document srsquoouvre automatiquement ou seacutelectionnez Nouveau dans le menu Fichier

bull Dans la liste agrave gauche seacutelectionnez Blank puis cliquez sur Vide agrave droite Pour terminer cliquez sur OK

bull Lorsque vous utilisez un modegravele Freeway va immeacutediatement vous demander ougrave vous voulez enregistrer le nouveau site Ceci permet drsquoecirctre sucircr que vous aurez un projet bien structureacute

bull Saisissez laquoTutoriel1raquo comme nom de projet choisissez un dossier de destination (Documents par exemple) et cliquez sur le bouton Enregistrer

Le nouveau document sera ouvert pour vous intituleacute laquoTutoriel1raquo avec une page blanche afficheacutee

Reacuteglages des dimensions de la page et de lrsquoalignementSpeacutecifier les dimensions drsquoune page et lrsquoalignement de celle-ci sont des tacircches faciles dans Freeway en utilisant la palette Inspecteur Si lrsquoinspecteur nrsquoest pas ouvert cliquez sur le bouton Inspecteur dans la barre drsquooutils

Concepts de base et terminologie de lrsquoInspecteurLrsquoinspecteur est lrsquooutil le plus utiliseacute dans Freeway il est important de bien comprendre son fonctionnement Comme nous lrsquoavons indiqueacute preacuteceacutedemment le contenu de lrsquoInspecteur deacutepend du contexte crsquoest-agrave-dire de ce qui est seacutelectionneacute sur la page Lorsque rien nrsquoest seacutelectionneacute ce sont les proprieacuteteacutes de la page qui sont afficheacuteesLe contenu peut donc changer mais la structure reste la mecircme une laquobarre de titreraquo des laquoongletsraquo et des laquopanneauxraquo ouverts ou fermeacutes La barre de titre changera en fonction de lrsquoeacuteleacutement seacutelectionneacute (laquoBloc HTMLraquo laquoBloc graphiqueraquo etc) Si vous nrsquoavez pas seacutelectionneacute de bloc sur la page le titre de lrsquoInspecteur sera laquoPageraquoSous la barre de titre vous trouverez les onglets En cliquant sur un des onglets vous allez afficher les options concernant certains types de fonctionnaliteacutes Le premier onglet concerne les paramegravetres geacuteneacuteraux de lrsquoobjet le deuxiegraveme est lieacute agrave toutes les options drsquoapparence de lrsquoobjet le troisiegraveme gegravere les options de publicationsDans Freeway Pro il y a toujours un onglet suppleacutementaire nommeacute laquoInspecteur de StylesraquoLrsquoicocircne du premier onglet affiche la mecircme icocircne que lrsquooutil qui a servi agrave creacuteer le bloc seacutelectionneacute Tout ce qui concerne le nom drsquoun bloc sa taille ou sa position se trouve dans cet onglet

15


Lrsquoonglet Apparence a comme icocircne un pinceau Vous pouvez y modifier les options de couleurs de bordure et drsquoeffetsLe troisiegraveme onglet Publication a pour icocircne la fenecirctre drsquoun navigateur Cet onglet gegravere la partie technique de la publication du bloc comme son format sa qualiteacute sa compression (pour une image) ou encore le texte alternatif attacheacute agrave lrsquoobjet etcAgrave lrsquointeacuterieur de chaque onglet se trouvent divers laquopanneauxraquo qui peuvent ecirctre ouverts ou fermeacutes afin de masquer ou drsquoafficher certaines cateacutegories drsquooptions applicables agrave lrsquoobjet seacutelectionneacute Pour ouvrir ou fermer un des panneaux il suffit de cliquer sur le titre de celui-ci ou sur le triangle agrave gauche du titrePour les blocs HTML et les blocs graphiques le premier clic seacutelectionne le bloc Si vous cliquez une deuxiegraveme fois vous allez entrer en mode eacutedition Vous aurez ainsi la possibiliteacute de saisir du texte agrave lrsquointeacuterieur du bloc Lorsque vous ecirctes en mode drsquoeacutedition lrsquoInspecteur changera agrave nouveau et deviendra lrsquoInspecteur laquoTexteraquo Seuls les onglets laquoGeacuteneacuteralraquo et laquoApparenceraquo seront alors afficheacutesLe mode eacutedition ne fonctionne pas sur les blocs graphiques contenant une image Il faut que le bloc soit vide pour pouvoir saisir du texte agrave lrsquointeacuterieur drsquoun bloc graphique

Reacutegler les dimensions de la page et son alignementNous allons commencer agrave modifier notre site en creacuteant une page presque carreacutee ici 700x709 pixels de cocircteacute

bull Cliquez sur lrsquoonglet Geacuteneacuteral dans lrsquoInspecteur Saisissez 700 dans le champ L et 709 dans H Note vous devez appuyer sur la touche Entreacutee ou Tabulation pour valider les valeurs

bull Dans le menu deacuteroulant Aligner choisissez Centreacutebull Ce nrsquoest pas neacutecessaire de saisir lrsquouniteacute laquopxraquo Freeway les ajoutera pour vous

Ajout drsquoune image de fondBeaucoup de choses ont eacuteteacute eacutecrites agrave propos des fonds de pages et de ce qui est consideacutereacute de bon goucirct et lisible Il est courant pour un deacuteveloppeur Web deacutebutant de vouloir mettre une image de fond Le piegravege est de mettre une image tregraves lourde agrave charger les pages deviennent alors illisibles ou encore drsquoutiliser une mosaiumlque de petites images qui peuvent donner une apparence de site amateurPour notre page nous allons importer une image de petite taille afin de creacuteer un bandeau Vous trouverez ce fichier dans le dossier du Tutoriel qui est dans le dossier de Freeway

bull Seacutelectionnez lrsquoonglet Apparence dans lrsquoInspecteur puis cliquez sur le menu deacuteroulant Image et choisissez Seacutelectionner

bull Naviguez jusqursquoau dossier du tutoriel puis dans le dossier laquoTutorial1_mediaraquo choisissez le fichier laquoheader_ bargifraquo Cliquez sur Ouvrir

bull Deux options suppleacutementaires vont apparaicirctre dans lrsquoInspecteur en dessous du menu deacuteroulant Horizontal et Vertical Ces deux options gegraverent lrsquoalignement de lrsquoimage que nous venons de choisir Choisissez laquoCentreacuteraquo pour Horizontal et laquoHautraquo pour Vertical

Si vous choisissez un des autres modes lrsquoimage va se reacutepeacuteter et remplir le fond de la page et donc le fond entier de la fenecirctre du navigateur

Lrsquooption laquoFond deacutefilantraquo (cocheacutee par deacutefaut) est preacutesente eacutegalement Si elle nrsquoest pas cocheacutee lrsquoimage de fond sera fixe dans la fenecirctre du navigateur le contenu de la page deacutefilera au-dessus de lrsquoimageIl est temps drsquoenregistrer votre travail

bull Choisissez Enregistrer dans le menu Fichier

Agrave propos des blocsUn bloc peut contenir du texte un dessin une photo ou encore une forme dessineacutee sur la page avec les outils de FreewayDegraves qursquoun bloc est creacuteeacute Freeway lui attribue un nom unique par deacutefaut laquoitem1raquo laquoitem2raquo etc Ceci permet drsquoidentifier chaque bloc facilementCe tutoriel va vous preacutesenter les deux types de blocs principaux les blocs HTML et les blocs graphiques

Ajout drsquoun texte graphiqueUne des fonctions puissantes de Freeway est de pouvoir creacuteer une image contenant du texte un texte graphique Creacuteons un titre pour le site de MauriceGardez agrave lrsquoesprit que les textes graphiques seront publieacutes sous forme drsquoimages Cela signifie que la taille ne peut pas ecirctre modifieacutee dans un navigateur et que le contenu nrsquoest pas indexeacute par les moteurs de recherche Cela peut eacutegalement poser des problegravemes aux personnes handicapeacutees utilisant des peacuteripheacuteriques drsquoaccegraves universel Utilisez ces blocs pour les titres qui neacutecessitent une police particuliegravere par exemple (Logo en-tecircte)

bull Cliquez sur lrsquooutil Image dans la barre des menus Dessinez un nouveau bloc sur la page Pour cela effectuez un cliqueacuteglisseacute ougrave vous voulez sur la page Creacuteez un rectangle assez grand puis lacircchez le bouton de la souris

bull Le bloc est seacutelectionneacute il est entoureacute par une bordure qui est composeacutee de poigneacutees permettant de modifier la taille du bloc

bull Pour positionner le bloc cliquez sur lrsquoonglet Geacuteneacuteral de lrsquoInspecteur puis allez dans le panneau Dimensions Ouvrez-le si neacutecessaire

bull Dans le champ X saisissez la valeur 10px Appuyez sur Tabulation dans le champ Y saisissez 50px Pressez tabulation agrave nouveau dans le champ L tapez 400px encore une fois Tabulation puis saisissez 60px dans le champ H Terminez en tapant une derniegravere fois sur Entreacutee ou Tabulation

Le coin de reacutefeacuterence est le coin en haut agrave gauche Ainsi X et Y repreacutesentent les coordonneacutees du coin hautgauche du bloc par rapport agrave lrsquoorigine de la page le coin en haut agrave gauche de celle-ci Une valeur de 10px pour X deacutecale le bloc de 10 pixels sur la droite 50px pour Y deacutecale le bloc de 50 pixels vers le basLes valeurs L et H sont respectivement la Largeur et la Hauteur du blocMaintenant que le bloc est positionneacute sur la page nous allons saisir du texte Contrairement aux blocs HTML dans un bloc graphique vous pouvez utiliser nrsquoimporte quelle police

bull Entrez en mode Eacutedition dans le bloc (double clic sur le bloc) Vous verrez le curseur de saisie de texte clignotant apparaicirctre

bull Tapez laquomauricecowleyraquo Seacutelectionnez le texte EacuteditiongtTout seacutelectionner puis allez dans lrsquoonglet Geacuteneacuteral de lrsquoInspecteur Choisissez laquoBig Caslonraquo dans le menu Police et entrez 60px dans le champ Taille Nrsquooubliez pas de valider en appuyant sur Entreacutee

bull Seacutelectionnez uniquement les lettres laquomauriceraquo puis dans lrsquoonglet Apparence cliquez sur le menu Couleurs (dans la version Pro vous devez ouvrir lrsquoonglet Texte) Comme preacuteceacutedemment choisissez

16


Autre dans le menu deacuteroulant Couleur utilisez les curseurs RVB et creacuteez une couleur avec les valeurs 204 204 204 ou la couleur Web CCCCCC

bull Maintenant seacutelectionnez les lettres laquocowleyraquo et appliquez la couleur laquoVertraquo qui est dans le menu couleur de lrsquoInspecteur

De la mecircme maniegravere que vous modifiez la taille et la couleur des polices vous pouvez ajouter des effets comme des ombres porteacutees des effets de lueurs etc Les effets se trouvent dans lrsquoonglet ApparenceLe fonctionnement nrsquoest pas le mecircme dans Freeway Express et Pro Nous allons donc voir les deux faccedilons de proceacuteder pour appliquer une ombre agrave notre logoAssurez-vous de seacutelectionner le texte et non pas le bloc lui-mecircme car certains effets peuvent srsquoappliquer au bloc ou au texte agrave lrsquointeacuterieur de celui-ci

Freeway Expressbull Seacutelectionnez le texte allez dans lrsquoonglet Apparence puis seacutelectionnez lrsquoeffet Ombre porteacuteebull Si le panneau de lrsquoOmbre porteacutee nrsquoest pas ouvert cliquez sur le titre ou

le triangle Entrez 75 drsquoopaciteacute 4 pour le deacutecalageFreeway Probull Seacutelectionnez le texte allez dans lrsquoonglet Apparence puis cliquez sur lrsquoeffet Ombre Porteacutee Notez que

lrsquoeffet laquoNormalraquo est lui aussi activeacutebull Ouvrez le panneau Ombre porteacutee si neacutecessaire en cliquant sur le titre ou le triangle puis saisissez

75 drsquoopaciteacute 4 pour le deacutecalageLe texte et les effets sont toujours modifiables mecircme si vous avez deacutejagrave transfeacutereacute ou publieacute votre site Faites vos modifications puis publiez agrave nouveau

Importer une imageMaurice utilise un Logo qui est sa marque de fabrique nous allons donc lrsquoutiliser et le placer sur la droite de la page par-dessus la barre drsquoen-tecircte que nous avons placeacutee en fond Nous allons importer une image qui contient des parties transparentes la mettre agrave lrsquoeacutechelle puis la positionner

bull Dessinez un bloc graphique sur la page choisissez FichiergtImporter naviguez jusqursquoau dossier laquoTutorial1_ mediaraquo seacutelectionnez le fichier laquomauricecowley_logogifraquo puis cliquez sur Ouvrir

bull Faites un Controcircle-clic (ou un clic droit avec une souris agrave deux boutons) sur le bloc puis seacutelectionnez ImagegtMettre agrave lrsquoeacutechelle et centrer Refaites un Controcircle-clic puis choisissez dans le menu Ajuster le bloc au contenu

Lorsque vous importez une image le fichier importeacute aura la mecircme taille que lrsquooriginal Comme nous venons drsquoutiliser la mise agrave lrsquoeacutechelle Freeway va utiliser une copie du fichier qui va correspondre agrave la nouvelle taille et sera moins laquolourdraquo que le ficher originalLrsquooutil ImagegtMettre agrave lrsquoeacutechelle et centrer va creacuteer une image la plus grande possible en fonction du bloc tout en gardant les proportions de lrsquooriginal

Une astuce pour creacuteer des fichiers de petite taille est drsquoutiliser la fonction de reacuteeacutechantillonagebull Pour reeacutechantillonner les images cliquez deux fois sur le bloc image Une fenecirctre

concernant lrsquoimage va srsquoouvrir Cliquez sur le bouton Reeacutechantill puis cliquez sur le bouton OK

bull Cet outil permet de forcer Freeway agrave creacuteer une version de lrsquoimage adapteacutee agrave votre site

Les plus des blocs textes HTMLIl est tentant drsquoutiliser des images car on peut y appliquer des effets et la police que lrsquoon veutCependant les blocs HTML sont plus rapides agrave charger dans un navigateur et contrairement aux images ils sont compatibles avec les peacuteripheacuteriques drsquoaccegraves universel ou les eacutecrans en BrailleUn autre avantage est que les moteurs de recherche analysent le texte sur vos pages Plus vous aurez du texte plus votre classement sera bonLa fonction ajuster le bloc au contenu ne modifie pas lrsquoimage mais recadre le bloc graphique agrave la dimension de lrsquoimageMaintenant nous allons mettre lrsquoimage exactement agrave la bonne taille afin de lrsquointeacutegrer sur notre site

bull Ouvrez lrsquoonglet Geacuteneacuteral de lrsquoInspecteur pour voir les dimensions du bloc Maintenez enfonceacutees les touches Majuscule+Option puis cliquezglissez un des coins du bloc Agrandissez-le ou diminuez-le pour que la Hauteur et la largeur indiqueacutees dans lrsquoInspecteur soient de 95px Lrsquoappui sur ces touches permet de garder les proportions lors de lrsquoagrandissement et surtout de modifier le contenu du bloc (lrsquoimage) en mecircme temps que le bloc lui-mecircme

bull Ouvrez lrsquoonglet Apparence et appliquez une Ombre porteacutee avec les valeurs 75 pour lrsquoopaciteacute et 4px pour le deacutecalage (comme pour le titre preacuteceacutedemment) Dans la version Pro les reacuteglages de lrsquoombre porteacutee sont dans le panneau sous-panneau Ombre porteacutee du panneau Effets

bull Retournez dans lrsquoonglet Geacuteneacuteral puis sur la page elle-mecircme deacuteplacez le bloc vers le coin en haut agrave droite Surveillez les valeurs X et Y Le bloc doit avoir 590px pour la valeur X et 16px pour la valeur Y Pour ecirctre plus preacutecis vous pouvez placer le bloc approximativement agrave la souris et finir de le deacuteplacer en utilisant les flegraveches sur votre clavier

Ajout de texte HTMLPour finir notre en-tecircte nous allons ajouter un peu de texte Nous pourrions utiliser des images agrave nouveau mais le texte HTML sera plus avantageux dans ce cas

bull Cliquez une fois sur lrsquooutil HTML dans la barre des menus Dessinez un nouveau bloc sur la page Cliquez agrave lrsquointeacuterieur du bloc dessineacute afin de rentrer en mode Eacutedition Saisissez le mot laquophotographeraquo

bull Seacutelectionnez le mot puis dans la palette inspecteur choisissez la police Helvetica et 18px pour la taille Si le bloc nrsquoest pas assez grand glissez les poigneacutees pour lrsquoagrandir suffisamment Maintenant que le texte est precirct cliquez en dehors du bloc sur le fond de la page par exemple puis cliquez agrave nouveau une fois sur le bloc pour le seacutelectionner Vous pouvez aussi faire un Commande+clic pour arriver au mecircme reacutesultat

bull Saisissez dans lrsquoinspecteur 10px pour X 125px pour Y 300px pour L et 20px pour H

17


Importer des photosPour importer des photos il vous suffit de proceacuteder exactement comme nous lrsquoavons fait pour importer le Logo Nous avons preacuteceacutedemment utiliseacute la fenecirctre drsquoimportation nous allons ici utiliser le glisseacute deacuteposeacute depuis le Finder

bull Dans le Finder ouvrez une fenecirctre avec le contenu du dossier laquoTutorial1_mediaraquo Seacutelectionnez le fichier laquobeach hutsjpgraquo puis glissez le fichier vers la page de Freeway dans une zone sans bloc puis lacircchez le bouton de la souris La photo apparaicirctra un bloc graphique agrave la dimension de lrsquoimage aura eacuteteacute automatiquement creacuteeacute pour vous

bull Mettez la photo agrave lrsquoeacutechelle en deacuteplaccedilant le coin en bas agrave droite en appuyant sur les touches Majuscule+Option La dimension finale doit ecirctre 208px de large et 139px de haut

bull Les photos venant drsquoun appareil numeacuterique peuvent ecirctre tregraves grandes lorsqursquoelles sont placeacutees sur la page Dans ce cas il peut ecirctre plus facile de creacuteer le bloc et drsquoutiliser le menu FichiergtImporter

Ajoutons agrave preacutesent un effet Bordure avec ombre

Freeway Expressbull Seacutelectionnez le bloc cliquez sur lrsquoonglet Apparence puis cliquez sur lrsquoeffet Bordure avec ombrebull Si les effets ne sont pas visibles pensez agrave ouvrir le panneau effets Pour la Bordure choisissez la

couleur blanche et une taille de 9px (veacuterifiez que le menu Trait soit sur une ligne pleine et position sur Dehors) Pour lrsquoOmbre porteacutee opaciteacute de 50 et un deacutecalage de 8px

Freeway Probull Seacutelectionnez le bloc et cliquez sur lrsquoonglet Apparencebull Dans Bordure choisissez la couleur Blanc et 9px pour la Taillebull Dans le panneau Effets activez lrsquoOmbre porteacutee saisissez 50 pour lrsquoOpaciteacute et 8px pour le

deacutecalage

Dupliquer des blocsNous allons agrave preacutesent dupliquer notre photo Lrsquoavantage est que nous nrsquoaurons pas agrave refaire les reacuteglages des effets sur la copie Freeway conserve eacutegalement les valeurs de mise agrave lrsquoeacutechelle la position de lrsquoimage dans le bloc etc Un autre avantage est que vous pouvez choisir le nombre de copies et lrsquoeacutecart entre chaque nouveau bloc

Un raccourci pour la duplicationbull Une faccedilon rapide de dupliquer un eacuteleacutement est de cliquer et laisser cliqueacute la souris sur un

bloc puis en maintenant enfonceacutee la touche Option deacuteplacez le bloc vers un autre endroit de la page Attention agrave ne pas cliquer sur les flegraveches agrave lrsquointeacuterieur du bloc image sinon cela ne fonctionnera pas

bull Seacutelectionnez le bloc choisissez menu BlocgtDupliquer pour ouvrir la fenecirctre de duplication saisissez 2 pour le Nombre de copies deacutecalage horizontal agrave 0px et deacutecalage vertical agrave 170px puis cliquez sur OK

bull Apregraves la duplication les deux nouveaux blocs sont seacutelectionneacutes Cliquez sur la page pour deacuteseacutelectionner les blocs puis seacutelectionnez le premier des deux nouveaux blocs Dans le Menu FichiergtImporter choisissez le fichier laquosailing bargejpgraquo et cliquez sur Ouvrir

Agrandissons un peu lrsquoimagebull Faites un Controcircle+clic (ou clic droit) sur le bloc pour afficher le menu puis choisissez

ImagegtAgrandir Vous pouvez le faire deux ou trois foisNous venons drsquoagrandir lrsquoimage elle nrsquoest peut-ecirctre pas cadreacutee comme vous le souhaitez Nous allons maintenant placer lrsquoimage agrave lrsquointeacuterieur du bloc Utilisez les flegraveches qui sont dessineacutees au milieu du bloc pour deacuteplacer lrsquoimage agrave lrsquointeacuterieur du bloc sans deacuteplacer le bloc lui-mecircme

bull Deacuteplacez la souris au-dessus du bloc Le curseur de la souris est transformeacute et prend la forme drsquoune main

bull Cliquez sur les flegraveches puis faites un cliqueacuteglisseacute de lrsquoimage agrave lrsquoendroit qui vous paraicirct le mieux pour la mettre en valeur

Cliquez ensuite sur la page pour deacuteselectionner le bloc Autour du troisiegraveme bloc graphique nous allons importer une image et utiliser une nouvelle meacutethode de mise agrave lrsquoeacutechelle

bull Seacutelectionnez le blocbull Menu FichiergtImporter choisissez le fichier laquolow tide runnels in the sunlightjpgraquo et cliquez sur

Ouvrirbull Faites un Controcircle+clic (ou Clic droit) sur lrsquoimage et choisissez dans ImagegtMettre agrave lrsquoeacutechelle et

rognerCette mise agrave lrsquoeacutechelle fonctionne comme la preacuteceacutedente sauf que cette fois la dimension la plus petite est choisie pour remplir le bloc Lrsquoimage deacutepasse donc du bloc Le rognage va deacutecouper ce qui est en dehors afin drsquoavoir une image qui occupe tout le blocNos images sont precirctes nous allons maintenant faire de la mise en page et placer les photos pour faire comme si elles eacutetaient tombeacutees sur une table (comme sur la copie drsquoeacutecran de la page suivante)

bull Deacuteplacez les images lrsquoune apregraves lrsquoautre vers la gauche de la page sous le mot laquophotographeraquo

bull Seacutelectionnez la photo du haut cliquez sur lrsquooutil Rotation dans la barre drsquooutils puis cliquezglissez une des poigneacutees de seacutelection du bloc Lrsquoimage va tourner sur elle-mecircme

bull Effectuez une rotation des deux autres images comme bon vous semble puis deacuteplacez les images pour qursquoelles se superposent leacutegegraverement

Dessiner les blocs sur vos pagesbull Lorsque vous dessinez un nouveau bloc sur votre page assurez-vous que lorsque vous

commencez le dessin du bloc vous cliquez sur une zone non utiliseacutee de la pagebull Si vous dessinez agrave lrsquointeacuterieur drsquoun bloc existant le nouveau bloc deviendra un bloc fils

Nous vous deacuteconseillons de faire chevaucher les blocs HTML avec drsquoautres types de blocs Le reacutesultat est impreacutevisible

18


Si vous glissez une des images au-dessus du bloc texte laquophotographeraquo le bloc texte va disparaicirctre et indiquer une grande croix agrave lrsquointeacuterieur Cela signifie qursquoil ne peut pas ecirctre publieacute Deacuteplacez agrave nouveau lrsquoimage pour ne pas chevaucher le bloc texte le texte reviendra automatiquement agrave son eacutetat preacuteceacutedent Lorsque vous avez termineacute cliquez sur lrsquooutil Seacutelection dans la barre drsquooutilsSi vous seacutelectionnez une des images dans lrsquoonglet Geacuteneacuteral de lrsquoInspecteur vous verrez que lrsquooption Fusionner Images est cocheacutee par deacutefaut Cela signifie que Freeway lors de la publication creacuteera qursquoune seule image pour les trois blocs diminuant ainsi le nombre de fichiers agrave utiliser sur votre site Web

Importer du texteNotre page contient un en-tecircte ainsi que quelques images nous allons maintenant placer du texte

bull Cliquez sur lrsquooutil HTML dans la barre drsquooutils et dessinez un bloc texte dans une partie non utiliseacutee de la page sur la droite des photos

bull Entrez en mode Eacutedition dans le bloc texte en cliquant sur le bloc puis allez dans le menu FichiergtImporter du Texte choisissez le fichier laquowelcometxtraquo du dossier du tutoriel et cliquez sur le bouton Ouvrir

bull Seacutelectionnez le texte importeacute puis dans la palette Inspecteur seacutelectionnez la police Georgia et choisissez la taille 14px Seacutelectionnez agrave preacutesent seulement le titre le panneau Paragraphe Choisissez la police Helvetica et la taille de 12px

bull Amusez-vous agrave changer le style de certains passages comme bon vous semble en utilisant le gras ou lrsquoitalique afin de mettre en valeur lrsquoannonce

bull Faites un Commande+clic sur le bloc dans lrsquoonglet Apparence choisissez la couleur Blancbull Dans lrsquoonglet Geacuteneacuteral entrez une valeur de 10px pour le Remplissage pour mettre de lrsquoespace entre le

texte et les bords du blocEntrez les valeurs 348px pour X 395px pour Y 328px pour L du texte laquoBienvenue sur mon site Webraquo cliquez sur le bouton Gras dans les boutons de Style puis choisissez une taille de 18px

Importation de textebull Certains logiciels utilisent des caractegraveres cacheacutes pour mettre en page le texte de leurs

documents Lorsque le texte est importeacute dans Freeway vous allez avoir des caractegraveres parasites Restez donc simple et enregistrez le document drsquoorigine en format texte (txt) au lieu drsquoautres formats dits laquorichesraquo ou des formats speacutecifiques (rtf ou doc) Il peut aussi ecirctre inteacuteressant drsquoenlever les retours agrave la ligne le codage pouvant ecirctre diffeacuterent

Maintenant que le texte est importeacute nous devons positionner le bloc texte Faites un commande+clic sur le bloc pour sortir du mode eacutedition et garder le bloc seacutelectionneacute Modifiez ensuite les reacuteglages comme suit

bull Dans lrsquoonglet Geacuteneacuteral de lrsquoInspecteur mettez X agrave 348px Y agrave 180px L et H agrave 350px et 210px respectivement

19


Pour terminer notre page nous allons placer une annonce concernant la prochaine exposition de Maurice Encore une fois gracircce agrave du texte HTML

bull Dessinez un nouveau bloc HTML avec lrsquooutil adeacutequat sous le bloc de bienvenuebull Entrez en mode eacutedition dans ce nouveau bloc en cliquant agrave lrsquointeacuterieur puis choisissez

FichiergtImporter du texte puis choisissez le fichier laquoexhibitiontxtraquo et cliquez sur Ouvrirbull Seacutelectionnez tout le texte dans le bloc puis dans lrsquoInspecteur choisissez Centreacute pour lrsquoAlignement

bull Pour terminer utilisez la fonction BlocgtAjuster le bloc au contenu Seule la hauteur du bloc sera modifieacutee par cette fonction

bull Choisissez FichiergtEnregistrer pour sauvegarder votre documentVous venez de creacuteer votre premiegravere page dans Freeway Jusqursquoagrave preacutesent vous avez seulement vu la page depuis lrsquointeacuterieur de Freeway Aucun code HTML nrsquoa eacuteteacute geacuteneacutereacute par Freeway

Preacutevisualiser votre pageIl est inteacuteressant de veacuterifier au fur et agrave mesure de lrsquoavanceacutee de votre travail que la page se preacutesente drsquoune maniegravere correcte lorsque le code HTML est interpreacuteteacute par un navigateur Freeway possegravede un outil appeleacute Preacutevisualisation qui utilise le mecircme moteur de rendu que Safari le navigateur drsquoAppleEn dessous de la barre drsquooutils vous trouverez trois boutons permettant de basculer entre les modes Maquette Page (celui dans lequel nous sommes) et Preacutevisualiser

bull Cliquez sur le bouton Preacutevisualiser Freeway passe en mode preacutevisualisation et une barre de progression sera afficheacutee pendant que Freeway geacutenegravere le code HTML Apregraves quelques secondes la page apparaicirctra

Notez que la barre drsquooutils change Vous trouverez plusieurs outils vous permettant de tester la page pour voir si elle respecte les regravegles drsquoaccessibiliteacute pour les personnes handicapeacutees Vous pouvez eacutegalement tester la page avec certaines fonctions deacutesactiveacutees (JavaScript images) afin de voir si la page reste utilisable tout de mecircmeLa preacutevisualisation vous permet de tester seulement la page en coursCet outil est suffisant pour tester une page mais pour tester un site entier vous devrez utiliser un navigateur notamment pour tester les liens entre pages Nous verrons cela dans le prochain tutoriel

bull Cliquez sur le bouton Page pour revenir agrave notre page de travailChaque fois que vous cliquez sur Preacutevisualiser Freeway geacutenegravere le code HTML de votre page ainsi que les images optimiseacutees Ces fichiers sont placeacutes dans le dossier de publication sur votre disque dur Crsquoest ce que nous appelons laquopublicationraquo dans FreewayLorsque vous preacutevisualisez dans un navigateur le code HTML du site entier est geacuteneacutereacute et pas seulement le code de la page courante Une autre faccedilon de proceacuteder est drsquoutiliser la commande FichiergtPublier le siteApregraves la premiegravere publication les prochaines publications ne modifieront le code que des pages qui ont eacuteteacute modifieacutees dans Freeway depuis la derniegravere publication Ceci termine le premier tutoriel Dans le suivant nous allons utiliser celui-ci comme point de deacutepart et creacuteer un site avec plusieurs pages et des liens entre elles

20


Tutoriel 2Dans le premier tutoriel nous avons creacuteeacute une page unique la page drsquoaccueil Agrave la fin de ce tutoriel nous aurons creacuteeacute un site avec plusieurs pages ainsi que des liens pour naviguer drsquoune page agrave lrsquoautreSi nous travaillions sur un laquovrai projetraquo nous aurions commenceacute par creacuteer une maquette qui reprend les eacuteleacutements communs pour toutes les pages afin de ne pas avoir agrave refaire le mecircme travail sur toutes les pages Nous allons donc aborder les notions lieacutees aux maquettes avant de continuer le deacuteveloppement du site de Maurice

Maquettes concepts de baseDans Freeway le terme de Maquette agrave la mecircme signification que dans les logiciels de PAO Les maquettes permettent drsquoutiliser un mecircme contenu sur plusieurs pages automatiquementLorsqursquoelles sont correctement utiliseacutees les maquettes permettent de gagner du temps et surtout de conserver une mise en page constante dans tout votre siteTout eacuteleacutement placeacute sur la maquette apparaicirct sur toutes les pages qui utilisent la maquette Les proprieacuteteacutes sont conserveacutees (actions couleur effets etc)Lorsqursquoune modification est faite agrave la maquette toutes les pages utilisant la maquette seront modifieacutees Cela permet en faisant une modification qursquoune seule fois de modifier un grand nombre de pages Cependant si vous modifiez un eacuteleacutement de la maquette en eacutetant sur la page lrsquoeacuteleacutement modifieacute est deacutetacheacute de la maquette et est ensuite geacutereacute par la page Les modifications faites sur la maquette ne seront donc plus reacutepercuteacutees sur la pagePour eacuteviter cela il est possible de verrouiller les blocs sur la maquette afin de les rendre non modifiables depuis les pagesSi vous deacuteplacez un bloc de la maquette depuis une page par erreur vous pouvez re-creacuteer la connexion du bloc avec la maquette en utilisant les fonctions Utiliser contenu maquette et Utiliser reacuteglages maquette dans lrsquoonglet Geacuteneacuteral de lrsquoInspecteur du bloc deacuteplaceacuteIl nrsquoy a pas que les blocs qui rendent les maquettes indispensables Toutes les proprieacuteteacutes des pages sont conserveacutees comme la taille des pages la couleur de fond les actions de pagesVous pouvez eacutegalement creacuteer plusieurs maquettes Ceci permet par exemple drsquoavoir des chartes graphiques diffeacuterentes pour plusieurs sections de votre site Dans ce cas vous creacuteez une maquette par section et vous attribuez la maquette de votre choix pour les pages concerneacutees par la section Pour gagner du temps vous pouvez dupliquer une maquette existante Cliquez sur la maquette puis dans le Menu PagegtDupliquer cette page

Utiliser une taille de page unique pour le sitebull Vous pouvez changer la taille drsquoune page au coup par coup dans les proprieacuteteacutes de la pagebull Vous pouvez speacutecifier une taille agrave utiliser par deacutefaut pour toute nouvelle maquette ou page

de votre site en utilisant le menu FichiergtReacuteglages du document puis modifiez les valeurs pour la taille par deacutefaut Cela modifiera toutes les pages dont les dimensions nrsquoont pas eacuteteacute modifieacutees dans lrsquoInspecteur ainsi que les nouvelles

Le panneau SiteLorsque lrsquoon travaille sur un site composeacute de plusieurs pages le panneau Site agrave gauche de la fenecirctre principale est lrsquooutil qui permet de manipuler la structure du site les Maquettes et les PagesLe panneau site est composeacute de deux parties les Maquettes en haut les pages du site en bas

Vous pouvez basculer du panneau Site au panneau Page en cliquant sur le titre du panneau En mode Page vous ne verrez que les blocs de la page couranteLe mode Page est souvent utiliseacute lorsque vous recherchez un eacuteleacutement particulier dont vous voulez eacutediter les proprieacuteteacutes surtout lorsque vous avez plusieurs couches de blocs ou des calques superposeacutes ne pouvant pas ecirctre seacutelectionneacutes dans la page principale

Pour modifier le nom des Maquettes des pages des dossiers ou des blocs directement dans le panneau Site ou page vous devez faire un Option+Clic sur lrsquoeacuteleacutement Vous aurez alors la possibiliteacute drsquoeacutediter le nom

21


Creacuteation drsquoune maquetteNous avons commenceacute le premier tutoriel avec un document vierge puis nous avons travailleacute directement sur une page du site Freeway vous laisse travailler de la maniegravere que vous preacutefeacuterez certaines personnes preacutefegraverent preacuteparer leur site en amont drsquoautres le modifier au fur et agrave mesure du deacuteveloppement sans plan preacuteeacutetabliMaintenant que notre premiegravere page est creacuteeacutee nous savons quels blocs nous pourrions utiliser sur toutes nos pages donc ceux que nous pourrions mettre sur une MaquetteSi vous aviez travailleacute sur la conception du site avant de vous lancer dans Freeway vous auriez commenceacute par creacuteer la maquette de votre site Pour ce tutoriel nous allons creacuteer une maquette en utilisant la page que nous avons creacuteeacutee au premier tutoriel Nous allons copier les blocs neacutecessaires de notre premiegravere page vers notre maquette

bull Ouvrez le fichier creacuteeacute au Tutoriel 1bull Choisissez FichiergtNouveau pour creacuteer un nouveau projet en utilisant le modegravele vierge nommez le

laquoTutoriel 2raquobull Dans le nouveau document cliquez sur la maquette laquoMaster 1raquo du panneau Site puis dans

lrsquoInspecteur reacuteglez la taille agrave 700px par 700px et choisissez lrsquoalignement centreacutebull Speacutecifiez la mecircme couleur de fond que dans le premier tutoriel CCFFCC (Couleur Web Seacutecuriseacutee)

ou 204 255 et 244 (couleur RGB)bull Importez le fichier image laquoheader_bargifraquo comme image de fond de la page pour lrsquoattribut

Horizontal choisissez laquoCentreacuteraquo et pour Vertical laquohautraquobull Dans la barre des menus FenecirctregtTutoriel 1 pour basculer sur le premier projet cliquez une fois sur

le texte Logo puis faites des Majuscule+Clic pour seacutelectionner le bloc texte laquophotographeraquo et lrsquoimage du logo Les trois blocs sont seacutelectionneacutes en mecircme temps

bull Menu EacuteditiongtCouperbull Dans la barre des menus FenecirctregtTutoriel 2 seacutelectionnez laquoMaster1raquo dans le panneau Site agrave gauche

puis menu EacuteditiongtCollerFreeway conserve la position des blocs drsquoorigine et va les placer au mecircme endroit sur notre maquette Aucune intervention pour repositionner les blocs nrsquoest neacutecessaire

bull Choisissez menu FenecirctregtTutoriel 1 agrave nouveau pour revenir au premier documentbull Choisissez EacuteditiongtTout seacutelectionner pour seacutelectionner les blocs restants puis EacuteditiongtCouper

Fermez le document en choisissant FichiergtFermer sans enregistrer les modificationsbull Dans le nouveau tutoriel seacutelectionnez agrave gauche la page laquoUntitledraquo et utilisez le menu EacuteditiongtColler

Nommer les pages et les fichiersFreeway nomme par deacutefaut les pages laquoUntitled1raquo laquoUntitled2raquo (ou laquoSans titre 1raquo) etc Nous allons renommer la page du site afin qursquoelle soit facilement identifiable

bull Faites Option+clic sur le nom de la page dans le panneau Site Le nom sera alors en surbrillance et sera eacuteditable

bull SaisissezlaquoBienvenueraquopuis appuyez sur EntreacuteeVous pouvez proceacuteder de la mecircme maniegravere pour renommer les Maquettes

Travailler sur la MaquetteVous remarquerez que lorsque vous seacutelectionnez une Maquette dans le panneau site les regravegles sur le bord de la page sont teinteacutees de jaune Ceci vous indique que vous ecirctes en train de modifier la Maquette (et non pas la page) Pour basculer entre la page et sa maquette cliquez simplement sur les boutons Page et Maquette dans la partie en haut agrave gauche de la zone de travailPreacuteceacutedemment dans ce tutoriel nous avons vu qursquoun bloc perd la connexion agrave sa maquette srsquoil est deacuteplaceacute depuis la page Pour eacuteviter cela nous allons verrouiller les blocs qui sont sur notre maquette

bull Cliquez sur la maquette dans le panneau Sitebull Seacutelectionnez un des blocs puis dans le menu BlocgtVerrouiller ou faites un Controcircle+Clic sur le bloc

et choisissez Verrouiller dans le menu contextuelbull Reacutepeacutetez ceci pour tous les blocs de la maquette

Un bloc verrouilleacute est signaleacute par des poigneacutees de redimensionnement en rougeVous pouvez creacuteer plusieurs maquettes dans Freeway pour diffeacuterencier plusieurs parties de votre site par exemple pour des langues diffeacuterentes

22


Ajouter des pages agrave un siteNous avons agrave preacutesent une maquette contenant les blocs communs agrave toutes nos pages Nous allons ajouter deux nouvelles pages au site de Maurice une page galerie qui preacutesente son travail et une page de contact permettant aux visiteurs de lui envoyer un message

bull Choisissez le menu PagegtNouvelles pagesbull La fenecirctre Nouvelles pages apparaicirct Saisissez le titre laquoGalerieraquo laissez le champ Pages agrave 1 et cliquez

OKbull Refaites lrsquoopeacuteration pour le titre mettez laquoPage de contactraquo et cliquez sur le bouton OK

Trois pages sont maintenant dans le panneau site la page drsquoaccueil une page galerie et une page de contact Vous pouvez cliquer sur chacune drsquoelle vous constaterez qursquoelles contiennent les mecircmes blocs que la maquette Les blocs preacutesents sur la maquette ont permis de creacuteer les trois pages sans avoir agrave dupliquer trois fois chaque eacuteleacutement Ils sont positionneacutes strictement au mecircme endroit et ont conserveacute leurs proprieacuteteacutes

Titres et noms des pagesChaque page agrave deux attributs distincts pour leur nom vous les trouverez dans lrsquoonglet Geacuteneacuteral de lrsquoInspecteur Le premier est le Titre qui est le nom qui sera afficheacute dans la barre de titre de la fenecirctre du navigateur Le second est Fichier qui est le nom du fichier HTML geacuteneacutereacute par Freeway lors de la publicationFreeway va creacuteer le nom du fichier en fonction du titre que vous rentrez mais vous pouvez eacutevidemment le modifier par la suiteLe nom du fichier a peu drsquoimportance sauf dans un cas la premiegravere page de votre site Le nom du fichier de la premiegravere page doit se nommer indexhtml sinon elle ne sera pas automatiquement chargeacutee par les navigateurs lorsque les visiteurs taperont lrsquoadresse de votre site Freeway speacutecifiera automatiquement le nom indexhtml pour la premiegravere page creacuteeSeacutelectionnez la premiegravere page du site notre page drsquoaccueil veacuterifiez que laquoBienvenueraquo soit dans le champ Titre et que le nom du fichier correspondant est laquoindexhtmlraquo dans le champ Fichier de lrsquoonglet Geacuteneacuteral de lrsquoInspecteur

Nommer le fichier de votre page drsquoaccueilbull Bien que laquoindexhtmlraquo soit le nom le plus couramment utiliseacute cela peut deacutependre de votre

heacutebergeur La documentation technique que vous envoie votre heacutebergeur vous confirmera le nom agrave donner au fichier de votre page drsquoaccueil Si en utilisant le nom laquoindexhtmlraquo vous nrsquoarrivez pas agrave voir votre page drsquoaccueil consultez la documentation technique et les FAQ de votre heacutebergeur vous y trouverez certainement lrsquoinformation

Ajouter du contenu aux nouvelles pagesPour notre page de contact nous allons placer un bloc texte au mecircme endroit que le texte de bienvenue sur la page drsquoaccueil Crsquoest tregraves simple car Freeway meacutemorise la position des blocs lorsque lrsquoon colle un bloc copieacute drsquoune autre page

bull Seacutelectionnez la page Bienvenue dans la colonne de gauche seacutelectionnez le bloc qui contient le texte de bienvenue sur la page puis choisissez EacuteditiongtCopier

bull Cliquez sur la page Contact puis choisissez EacuteditiongtCollerbull Entrez en mode eacutedition de texte dans le bloc que lrsquoon vient de coller seacutelectionnez tout le texte et

supprimez-lebull Toujours en mode eacutedition choisissez FichiergtImporter du texte choisissez le fichier laquocontacttxtraquo

dans le dossier du tutoriel puis cliquez sur Ouvrirbull Seacutelectionnez le texte importeacute et veacuterifiez dans la palette Inspecteur qursquoil utilise bien la police Georgia

avec une taille de 14px Seacutelectionnez ensuite la premiegravere ligne et mettez-la en gras en utilisant lrsquoInspecteur puis choisissez une taille de 18px

Ajoutons quelques eacuteleacutements visuels sur la pagebull Dessinez un petit bloc image agrave la gauche du texte Dans lrsquoonglet Geacuteneacuteral de lrsquoInspecteur saisissez

10px pour X 165px pour Y 288px pour L et 490px pour H Maintenant importons une photo Pensez bien agrave terminer la saisie dans lrsquoInspecteur en appuyant sur Entreacutee ou Tabulation (Voir astuce en bas de page)

bull Avec le bloc image seacutelectionneacute choisissez FichiergtImporter puis ouvrez le fichier laquobacklit shells jpgraquo Cliquez sur Ouvrir Faites un Controcircle+Clic (ou un clic droit avec une souris agrave deux boutons) sur le bloc et choisissez ImagegtMettre agrave lrsquoeacutechelle et rogner

23


Ajoutons maintenant des eacuteleacutements agrave la Galerie Ici nous allons juste faire la mise en page nous ajouterons des fonctionnaliteacutes dans le Tutoriel 3

bull Cliquez sur la page Galerie agrave gauche Seacutelectionnez lrsquooutil Image et dessinez un bloc graphique sur la page

bull Saisissez agrave lrsquointeacuterieur le mot laquoGalerieraquo Seacutelectionnez tout le texte Dans lrsquoonglet Geacuteneacuteral de lrsquoInspecteur changez la police en Helvetica Regular et la taille agrave 24px Cliquez sur le bouton Paragraphe centreacute dans la section Paragraphe de lrsquoInspecteur

bull Toujours avec le texte seacutelectionneacute entrez la valeur 40 dans le champ Espace puis appuyez sur la touche Entreacutee ou Tabulation Si le texte disparaicirct agrandissez le bloc graphique

bull Faites un Commande+clic sur le bloc saisissez 0px pour X 195px pour Y 700px pour L et 32px pour H

La valeur 40 repreacutesente lrsquoespace entre deux lettres agrave lrsquointeacuterieur drsquoun mot Cette option nrsquoexiste que pour les blocs graphiquesLa galerie preacutesentera une seacuterie de vignettes qui pourront ecirctre agrandies lorsque le visiteur en seacutelectionne une Nous allons preacuteparer la mise en page les fonctions seront ajouteacutees dans le prochain tutoriel

bull Dessinez un petit bloc graphique sur la page il doit ecirctre carreacute de 60px de cocircteacute Appliquez une Bordure dans lrsquoonglet Apparence seacutelectionnez blanc pour la couleur 5px pour la Taille Choisissez Dedans pour la Position de la bordure

bull Positionnez le bloc en utilisant 10 px pour X 247px pour YCe premier bloc va nous servir agrave creacuteer une rangeacutee de vignettes ce qui est tregraves simple dans Freeway

bull Veacuterifiez que le bloc est toujours seacutelectionneacute puis choisissez BlocgtDupliquer ou faites un Controcircle+Clic sur le bloc et choisissez Dupliquer Entrez 8 pour le nombre de copies puis 77px pour le Deacutecalage horizontal 0px pour le deacutecalage vertical Terminez en cliquant sur OK

Nous avons agrave preacutesent une rangeacutee de 8 blocs identiques il nous reste agrave importer des images agrave lrsquointeacuterieurbull Seacutelectionnez les blocs un par un puis importez les images correspondantes dans lrsquoordre ci-dessous

Pour chaque image importeacutee pensez agrave utiliser la fonction ImagegtMettre agrave lrsquoeacutechelle et rogner 1 laquobeach hutsjpgraquo2 laquoweathered sea walljpgraquo3 laquobirds at low tidejpgraquo4 laquofootprints in wet sandjpgraquo5 laquogroynes in winterjpgraquo6 laquolow tide runnels in the sunlightjpgraquo7 laquomarshjpgraquo8 laquomisty riversidejpgraquo9 laquowheeling gullsjpgraquo

Pour terminer la galerie de ce tutoriel nous allons creacuteer le bloc qui servira plus tard agrave stocker la version grand format de la vignette

bull Avec lrsquooutil Image dessinez un nouveau bloc en dessous des 8 blocs creacuteeacutes Utilisez les valeurs suivantes 145px pour X 345px pour Y 399px pour L 266px pour H

bull Pensez agrave valider puis dans le bloc creacuteeacute utilisez FichiergtImporter et choisissez le fichier laquobeach huts jpgraquo dans le dossier du tutoriel Cliquez sur Ouvrir

bull Faites un Controcircle+clic sur lrsquoimage et utilisez le menu ImagegtMettrez agrave lrsquoeacutechelle et rognerbull Dans lrsquoOnglet Apparence de lrsquoInspecteur ajoutez une Bordure avec Ombre puis modifiez les

proprieacuteteacutes en seacutelectionnant une Taille de 9px la Couleur Blanc la Position Dehors une Opaciteacute de 50 et un Deacutecalage de 8px

24


Ajouter des hyperliensLes pages sur Internet sont relieacutees entre elles par des liens En cliquant sur un lien le navigateur charge la page pointeacutee par le lienLes Hyperliens sont tregraves importants pour la navigation sur votre site Ils doivent permettre une navigation logique permettant drsquoacceacuteder avec un nombre de clic minimum aux informations cleacutes stockeacutees sur vos pages Ils peuvent eacutegalement lancer un logiciel de messagerie avec un nouveau message preacute-rempli ouvrir de nouvelles fenecirctres pointer vers des pages sur drsquoautres sites qui nrsquoont pas eacuteteacute creacuteeacutes par vous etcDans ce tutoriel nous allons aborder les bases des liens Les autres faccedilons de creacuteer des liens seront abordeacutees dans le tutoriel suivantCommenccedilons par la page drsquoaccueil

bull Cliquez sur la page Bienvenue agrave gauchebull Entrez en mode eacutedition dans le bloc texte de bienvenue puis seacutelectionnez le texte laquoGalerieraquo dans le

second paragraphe Choisissez EacuteditiongtLien vers bull En haut de la fenecirctre lrsquoonglet Interne doit ecirctre activeacute Seacutelectionnez laquoGalerieraquo dans la liste des pages

puis cliquez sur OKVous remarquerez que le mot laquoGalerieraquo est maintenant en bleu souligneacute Crsquoest le style par deacutefaut des liens

Nous allons aussi creacuteer un lien vers la page de contact bull Seacutelectionnez le mot laquoContactraquo dans le troisiegraveme paragraphe Faites un Controcircle+Clic sur le mot

seacutelectionneacute puis choisissez Lien vers dans le menu contextuelbull Dans la fenecirctre Eacutedition du lien seacutelectionnezlaquoPage de contactraquo puis cliquez sur le bouton OK

Maintenant au tour de la page de Contact Nous allons creacuteer drsquoautres liens mais les types de liens seront diffeacuterents par rapport agrave ceux que nous avons creacuteeacutes preacuteceacutedemment Le premier sera un lien drsquoenvoi de courrier (e-mail) le deuxiegraveme un lien vers un autre site

bull Cliquez sur la page de contact dans le panneau Sitebull Seacutelectionnez les mots laquoEnvoyez moi un e-mailraquo dans lebull texte puis ouvrez la fenecirctre drsquoEacutedition du lien comme nous lrsquoavons fait preacuteceacutedemment Cliquez sur

lrsquoonglet Externe puis choisissez le protocole mailto dans le menu deacuteroulantbull Freeway ajoutera laquomailtoraquo dans le champ principal Saisissez une adresse e-mail apregraves les laquo raquo (sans

espace) par exemple laquomauricecowleysoftpresscomraquo puis cliquez sur OKAjoutons maintenant un lien vers un autre site

bull Seacutelectionnez le mot laquoTRI-EDREraquo dans le dernier paragraphe puis Menu EacuteditiongtLien versbull Dans lrsquoonglet Externe de la fenecirctre choisissez http dans le menu Protocolebull Freeway ajoute automatiquement laquohttpraquo dans le champ texte il ne vous reste plus qursquoagrave ajouter le

nom de domaine par exemple laquowwwtri-edrefrraquo

bull Comme nous voulons que ce lien ouvre une nouvelle fenecirctre choisissez laquo_blankraquo dans le menu Cible puis cliquez sur le bouton OK

Nous avons maintenant quelques liens mais il serait impossible pour un visiteur de naviguer correctement sur notre siteDans le prochain tutoriel nous creacuteerons une barre de navigation avec des rollovers cependant certains visiteurs peuvent avoir le support de JavaScript deacutesactiveacute ou les images deacutesactiveacutees dans les preacutefeacuterences du navigateur Il est donc inteacuteressant de creacuteer une barre de navigation en texteComme la barre de navigation doit ecirctre preacutesente sur toutes les pages nous allons la creacuteer sur la maquette

bull Cliquez sur la maquette dans le panneau Site et dessinez un bloc HTML dans une partie vierge de la maquette

bull Cliquez deux fois sur le bloc pour y ajouter du textebull Saisissez laquoBienvenue | Galerie | Page de Contactraquo (le

caractegravere laquo|raquo se fait en appuyant sur Option+Majuscule+L)

bull Seacutelectionnez tout le texte saisi puis choisissez la Police Georgia de Taille 14px dans lrsquoInspecteur Choisissez lrsquoAlignement Centreacute dans le panneau Paragraphe de lrsquoInspecteur

bull Seacutelectionnez le mot laquoBienvenueraquo ouvrez la fenecirctre drsquoEacutedition du Lien et creacuteez un lien vers la page Bienvenue Faites de mecircme pour laquoGalerieraquo et laquoPage de Contactraquo en modifiant la destination du lien en fonction de la page

bull Faites un Commande+Clic sur le bloc modifiez la position et la taille du bloc avec les valeurs suivantes 349px pour X 677px pour Y 350px pour L 22px pour H

Si vous cliquez sur nrsquoimporte quelle page dans le panneau site vous allez voir que la barre est bien preacutesente sur toutes les pages avec les diffeacuterents liens en bleu souligneacute

bull Enregistrez les modifications en utilisant le menu FichiergtEnregistrer

25


Preacutevisualiser dans un NavigateurNous avons deacutejagrave testeacute une page unique dans le premier tutoriel en utilisant le bouton Preacutevisualiser Cependant pour tester les liens un navigateur est neacutecessaire

bull Choisissez le menu FichiergtPreacutevisualiser dans un navigateur et seacutelectionnez un des navigateurs preacutesenteacute dans la liste

La premiegravere fois que Freeway est lanceacute apregraves son installation il analyse le contenu du disque dur de votre machine afin de trouver tous les navigateurs installeacutes Ils sont ensuite automatiquement afficheacutes dans ce menuSi vous voulez utiliser un navigateur speacutecifique qui nrsquoest pas preacutesent dans la liste ouvrez le menu Preacutevisualiser dans un navigateur puis choisissez Reacuteglages du navigateur Vous pouvez ainsi cliquer sur le bouton Nouveau pour ajouter le navigateur de votre choixVous pouvez eacutegalement supprimer les navigateurs qui ne vous inteacuteressent pas ainsi que le navigateur par deacutefaut accessible par le raccourci clavierUne publication sera faite automatiquement lorsque vous demanderez une preacutevisualisation Contrairement au bouton laquoPreacutevisualiserraquo laquoPreacutevisualiser dans un navigateurraquo publiera toutes les pages du siteSi vous avez fait beaucoup de modifications depuis la derniegravere publication cela peut prendre quelques secondesLorsque le navigateur choisi sera lanceacute vous pourrez essayer les diffeacuterents liens que nous avons creacuteeacutes sur le siteVous pouvez tester le lien drsquoenvoi de courriel sur la page de contact votre logiciel de messagerie doit se lancer en mettant comme destinataire lrsquoadresse que nous avons speacutecifieacutee dans le lienTestez ensuite le lien externe qui pointe vers TRI-EDRE une nouvelle page doit srsquoafficher ou un nouvel onglet peut ecirctre creacuteeacute cela deacutepend des navigateursVous avez peut-ecirctre remarqueacute la puce noire agrave gauche des pages dans le panneau Site juste avant la publication Cela indique que la page est diffeacuterente de celle publieacutee deacutejagrave existante Si vous modifiez la maquette toutes les pages qui deacutependent de la maquette modifieacutee seront alors indiqueacutees comme neacutecessitant une publication Dans ces cas la publication peut ecirctre plus longue que drsquohabitude

Ceci termine ce deuxiegraveme tutoriel Pour le prochain nous allons utiliser le mecircme document Freeway et nous allons y ajouter des effets dynamiques gracircce aux actions

26


Tutoriel 3La diffeacuterence majeure entre Internet et un livre est que vous pouvez animer les pages sur Internet Dans ce tutoriel nous allons utiliser quelques effets dynamiques pour ameacuteliorer le site de MauriceLa creacuteation de ces effets sans Freeway pourrait prendre beaucoup de temps mais les actions sont lagrave pour nous permettre de travailler tregraves viteLes actions de Freeway sont comparables agrave des plug-ins Elles permettent drsquoajouter des fonctionnaliteacutes agrave Freeway Freeway est livreacute avec un certain nombre drsquoactions par deacutefaut vous pouvez en teacuteleacutecharger de nouvelles sur Internet (version Pro uniquement)Les actions utilisent du JavaScript mais lrsquoutilisation depuis Freeway est transparente et vous nrsquoavez rien de technique agrave apprendre Tout est afficheacute dans la palette ActionsDans ce tutoriel nous allons utiliser deux types drsquoactions des actions de blocs et des actions autonomes Il existe aussi des actions de page vous en apprendrez davantage plus loin dans ce guide

Images et hyperliensDans le tutoriel preacuteceacutedent nous avons creacuteeacute des liens texte Nous pouvons aussi creacuteer des liens agrave partir drsquoimages Ces liens ne sont pas identifiables aussi facilement que les liens texte Dans Freeway les images utilisant un lien auront lrsquoicocircne drsquoun globe terrestre en haut agrave gauche de lrsquoimageLes liens graphiques sont creacuteeacutes comme les liens textes ici nous allons utiliser une nouvelle faccedilon de proceacuteder

bull Cliquez sur la maquette dans le panneau Site puis seacutelectionnez le bloc graphique contenant le texte laquomauricecowleyraquo Le bloc est verrouilleacute mais il peut tout de mecircme ecirctre seacutelectionneacute

bull Lorsque le bloc est seacutelectionneacute cliquez sur le menu Hyperlien dans le coin en bas agrave gauche de la zone de travail agrave droite du globe Il doit indiquer laquoPas de lienraquo

bull Cela va faire apparaicirctre toutes les pages internes que nous avons creacuteeacutees dans Freeway Choisissez la page Bienvenue

bull Maintenant que lrsquoimage a un lien dans son coin haut gauche vous verrez apparaicirctre un globe bleu indiquant que le clic sur lrsquoimage dans un navigateur va faire changer le navigateur de page

27


Creacuteer un menu avec RolloverUn Rollover est une image qui change pour afficher une autre image lorsqursquoun eacuteveacutenement se produit Il existe plusieurs types drsquoeacuteveacutenement clic de souris survol de la souris ou deacuteclenchement envoyeacute par drsquoautres actions Les Rollovers doivent ecirctre creacuteeacutes avec des blocs graphiquesNous allons creacuteer trois rollovers qui changent de couleur et affichent une ombre lorsqursquoils sont survoleacutes par la souris Lorsqursquoils seront cliqueacutes ils serviront de lien vers une autre page Au final ces rollovers creacuteeront une barre de navigationDans Freeway un rollover est une combinaison drsquoau moins deux blocs graphiques Comme nous allons le voir chaque bloc peut avoir de un agrave trois eacutetats diffeacuterents Ces eacutetats deacutetermineront si le bloc est visible ou non dans le navigateurLes trois eacutetats sont laquoNormalraquo (aucune action de lrsquoutilisateur) laquoSurvolraquo (lrsquoutilisateur pointe le bloc en placcedilant la souris au-dessus) laquoClicraquo (Lrsquoutilisateur a cliqueacute sur le rollover)Pour notre site nous allons utiliser un rollover de trois eacuteleacutements un bloc graphique pour lrsquoeacutetat normal un pour lrsquoeacutetat survol et un autre qui contiendra du texte au-dessus des deux autres blocs

Vous pouvez voir sur les copies drsquoeacutecran de cette page les diffeacuterents eacutetats que nous allons utiliser Par deacutefaut nous afficherons un fond gris puis lors du survol le bloc changera de fond et aura une ombre porteacuteeComme crsquoest une barre de navigation il faut qursquoelle soit preacutesente sur toutes les pages Nous allons donc la creacuteer sur la MaquetteCommenccedilons par le premier eacutetat

bull Cliquez sur la maquette dans le panneau Sitebull Dessinez un bloc graphique dans une zone vierge

utilisez les valeurs de taille suivantes 100px pour L et 24px pour H dans lrsquoonglet Geacuteneacuteral de lrsquoInspecteur

bull Dans le panneau Apparence appliquez la mecircme couleur laquogrisraquo que nous avons utiliseacutee pour le mot laquomauriceraquo dans lrsquoen-tecircte Comme la couleur est deacutejagrave utiliseacutee elle sera disponible dans le menu Couleur de Lrsquoinspecteur

bull Cliquez sur le bouton Bordure seacutelectionnez le Blanc une Taille de 1px et la position Dedans Creacuteez des coins arrondis en mettant une valeur de 12px dans le champ Coin de la section Forme dans lrsquoonglet Apparence lrsquoInspecteur

bull Positionnez le bloc avec les valeurs 349px pour X et 129px pour YNous avons notre premier eacuteleacutement Nous allons le dupliquer deux fois et creacuteer une laquopileraquo drsquoeacuteleacutements Ensuite nous appliquerons lrsquoaction rollover

bull Seacutelectionnez le bloc graphique que nous venons de creacuteer puis choisissez la fonction Dupliquerbull Dans la fenecirctre de duplication entrez les valeurs 2 pour le Nombre de copies 50px pour le Deacutecalage

horizontal 50px pour le Deacutecalage vertical puis cliquez sur OKCela va placer deux nouveaux blocs deacutecaleacutes vers le bas Seacutelectionnez le bloc du milieu nous allons creacuteer notre bloc pour lrsquoeacutetat Survol Il aura la mecircme bordure blanche mais avec un fond vert et une ombre porteacutee

bull Seacutelectionnez le bloc du milieubull Dans lrsquoonglet Apparence de lrsquoInspecteur appliquez la couleur Vert que nous avons preacuteceacutedemment

utiliseacutee pour le mot laquocowleyraquo de lrsquoen-tecircte Laissez la bordure de 1pxbull Cliquez ensuite sur lrsquoeffet Bordure avec Ombre modifiez les proprieacuteteacutes comme suit pour lrsquoombre

Opaciteacute agrave 50 Deacutecalage de 6pxMaintenant modifions le bloc du bas il contiendra le texte qui est le nom de la page de destination du clic

bull Cliquez une fois sur le bloc du bas pour le seacutelectionnerbull Enlevez la couleur de fond en choisissant laquoSansraquo dans le menu deacuteroulant Couleurbull Cliquez agrave nouveau sur le bloc pour entrer en mode eacutedition tapez le texte laquoBienvenueraquo Seacutelectionnez

le texte puis modifiez la Police choisissez Georgia Regular cliquez sur Gras et mettez la Taille agrave 14px Modifiez lrsquoalignement choisissez Centreacute

bull Le mot nrsquoest pas encore centreacute verticalement choisissez menu StylegtDeacutecalagegtAutre entrez une valeur de -40 puis cliquez sur OK

Les trois eacuteleacutements de notre rollover sont precircts Ils ont leur propre couleur et effets La prochaine eacutetape consiste agrave aligner les trois blocs Freeway peut le faire automatiquement et de maniegravere preacutecise

bull Seacutelectionnez les trois blocs sur la page puis choisissez le menu BlocgtAlignerbull Dans la fenecirctre drsquoalignement choisissez Gauche pour lrsquoalignement Horizontal Haut pour

lrsquoalignement Vertical puis cliquez sur OKLes trois blocs se sont maintenant aligneacutes sur le bloc les plus en haut agrave gauche de nos trois blocs Comme nous avions dupliqueacute les blocs et qursquoils ont la mecircme taille au pixel pregraves ils sont parfaitement superposeacutes

Comme nous lrsquoavons dit preacuteceacutedemment il est pratique de verrouiller les blocs qui sont sur la maquette Pour les rollover crsquoest encore plus important ccedila eacutevite de deacuteplacer un des blocs par erreur et donc de deacutetruire notre rollover

bull Dessinez une seacutelection autour des trois blocs du rollover puis choisissez le menu BlocgtVerrouillerBien que le rollover soit composeacute de trois blocs nous pouvons appliquer lrsquoaction qursquoune seule fois car dans Freeway les blocs graphiques peuvent ecirctre fusionneacutes ce qui est le cas ici Seacutelectionnez le premier bloc du rollover (celui qui est le plus laquoen hautraquo des trois) puis dans lrsquoInspecteur ouvrez lrsquoonglet Geacuteneacuteral Vous verrez que la case Fusionner images est cocheacutee Dans ce cas lors de la publication les trois blocs ne seront en reacutealiteacute qursquoune seule et mecircme imageAppliquons agrave preacutesent lrsquoaction Rollover agrave notre pile drsquoimages

bull Si la palette Actions nrsquoest pas ouverte utilisez le menu FenecirctregtActionsbull Assurez-vous que le bloc du rollover est toujours seacutelectionneacute puis choisissez dans le menu

BlocgtActionsgtRolloverbull Lorsque lrsquoaction est appliqueacutee un onglet apparaicirct dans la palette Actions

Dans la palette vous verrez trois lignes qui correspondent aux trois blocs du rollover Sur la gauche vous trouverez les noms des trois blocs puis sur la droite les trois eacutetats possibles dont nous parlions plus tocirct dans ce guide Normal Survol et Clic Par deacutefaut lrsquoonglet Images est seacutelectionneacuteDans ce Tutoriel nous nrsquoutiliserons pas le clicLa coche permet de choisir si un bloc est visible pour un eacutetat donneacute

28


Par deacutefaut tous les eacuteleacutements du rollover sont marqueacutes comme visibles pour lrsquoeacutetat Normal Pour faire fonctionner notre rollover nous allons agrave lrsquoaide des coches personnaliser le comportement Pour ajouter une coche cliquez dans la case vide pour la supprimer cliquez agrave nouveau sur une cocheLa liste des blocs est creacuteeacutee en respectant lrsquoordre de superposition des blocs Le bloc le plus laquobasraquo dans la pile est celui qui occupe la premiegravere ligne de la listePar deacutefaut chaque fois qursquoun bloc est creacuteeacute il lrsquoest au-dessus du bloc preacuteceacutedemment creacuteeacute Cela signifie que dans notre cas le premier creacuteeacute (celui en gris) est en haut celui en vert est sur la deuxiegraveme ligne le texte est donc sur la troisiegraveme ligne

bull Pour la premiegravere ligne cochez uniquement la colonne Normal Ainsi le bloc gris sera afficheacute quelle que soit la position de la souris

bull Pour la ligne du milieu deacutecochez Normal et cochez la case Survol Le bloc en vert apparaicirctra uniquement lorsque la souris sera au-dessus du bloc

bull Le dernier bloc qui contient le titre doit ecirctre visible dans deux eacutetats Normal et Survol Placez donc une coche dans les deux colonnes pour la troisiegraveme ligne

Vous pouvez tester la visibiliteacute des blocs en cliquant sur le titre des colonnes des diffeacuterents eacutetats Freeway va alors afficher les blocs correspondants Vous ne pouvez pas preacutevisualiser la page car nous sommes en train de travailler sur la maquetteUne fois que lrsquoaffichage est bon nous pouvons dupliquer notre pile afin de creacuteer les autres eacuteleacutements de notre barre de navigation Rappelez-vous que lorsque vous utilisez les copieacutescolleacutes les proprieacuteteacutes des blocs sontconserveacutees Les actions font partie des proprieacuteteacutes donc si on duplique notre pile fonctionnelle nous allons avoir un nouveau rollover precirct agrave lrsquoemploi

bull Faites une seacutelection des trois blocs puis choisissez le menu BlocgtDupliquerbull Dans la fenecirctre de duplication choisissez un nombre de copies de 2 un deacutecalage horizontal de 122px

et un deacutecalage vertical de 0px puis cliquez sur OKNous venons de creacuteer deux nouveaux boutons parfaitement fonctionnels Il nous reste agrave changer le titre pour quelque chose de plus approprieacute

bull Cliquez sur le deuxiegraveme rollover pour entrer en mode eacutedition dans le texte graphique supprimez le texte et saisissez laquoGalerieraquo

bull Mecircme chose pour le troisiegraveme rollover saisissez laquoContactsraquo agrave la place du texte existantNos boutons sont dynamiques Maintenant rajoutons des liens pour permettre aux visiteurs de se deacuteplacer drsquoune page agrave lrsquoautre

bull Seacutelectionner le bloc texte du premier rollover puis dans le menu Hyperlien en bas de la fenecirctre choisissez la page laquoBienvenueraquo

bull Idem pour le deuxiegraveme et le troisiegraveme rollover choisissez respectivement les pages laquoGalerieraquo et laquoPage de contactraquo

bull Enregistrez votre travail avec le menu FichiergtEnregistrer puis testez vos boutons en faisant FichiergtPreacutevisualiser dans un Navigateur

Si les rollovers nrsquoaffichent pas ce que vous attendiez revenez sur la Maquette et jouez avec les coches dans la palette Actions Pensez eacutegalement agrave tester les liens ils doivent vous amener sur la bonne page

Creacuteer une galerie photos simpleDepuis la version 55 de Freeway vous pouvez utiliser lapplication Showcase livreacutee avec Freeway Nous allons donc voir une meacutethode diffeacuterente plus basique mais permettant de vous faire manipuler Freeway ce qui est apregraves tout le but de ce manuelMaurice veut que les visiteurs de son site puissent visualiser une version grand format de ses photos mais il souhaiterait que toutes les photos soient regroupeacutees sur une page unique Ceci peut ecirctre fait simplement en utilisant un rollover sur chaque vignette de sa galerie Dans Freeway nous appelons cela des images laquociblesraquoEn plus de lrsquoaffichage de la version grand format lors du survol de la vignette il est aussi inteacuteressant de fournir un rappel de contexte crsquoest-agrave-dire indiquer au visiteur quelle image est en visualisation Nous allons donc ajouter une image suppleacutementaire sur les vignettes qui apparaicirctra au survol de la vignette

bull Cliquez sur la page Galerie dans le panneau Sitebull Dessinez une seacutelection autour de toutes les vignettes puis choisissez le menu BlocgtDupliquer Entrez

les valeurs suivantes 1 pour le nombre de copies 0px pour les deux deacutecalages Cliquez sur OKbull Cliquez sur un endroit vide de la page pour tout deacuteseacutelectionner puis cliquez agrave nouveau sur la

premiegravere vignette pour la seacutelectionnerbull La vignette a toujours les mecircmes attributs de bordure que lrsquooriginal nous allons la modifier Dans

lrsquoonglet Apparence de lrsquoInspecteur ajoutez une Ombre mettez lrsquoOpaciteacute agrave 50 et le deacutecalage agrave 6pxbull Faites la mecircme opeacuteration pour les autres vignettes restantes

Nous appliquerons lrsquoaction Rollover plus tard en premier lieu nous devons creacuteer notre pile drsquoimages cibles grand format Chaque image aura un numeacutero speacutecifique qursquoil sera neacutecessaire de saisir afin que chaque rollover puisse appeler lrsquoimage qui lui correspond Les images cibles seront creacuteeacutees comme une pile drsquoimages de grand format une pour chaque vignette preacutesente en haut de la page Nous avons deacutejagrave la premiegravere image placeacutee laquobeach hutsraquo qui est la version agrandie de la premiegravere vignette Nous allons donc dupliquer le bloc de la grande image importer lrsquoimage correspondant agrave la vignette suivante et ainsi de suite Comme les images importeacutees sont toutes diffeacuterentes nous devons travailler sur chacune agrave tour de rocircle

bull Seacutelectionnez le bloc grand format de lrsquoimage utilisez le menu BlocgtDupliquer assurez-vous que le nombre de copies est agrave 1 et les deacutecalages agrave 0px puis cliquez sur OK

bull Choisissez le menu FichiergtImporter et seacutelectionnez lrsquoimage de la seconde vignette dans le dossier du tutoriel (laquoweathered sea walljpgraquo) puis cliquez sur Ouvrir Faites un Controcircle+Clic sur le bloc utilisez la fonction ImagegtMettre agrave lrsquoeacutechelle et rogner

bull Reacutepeacutetez la mecircme manipulation pour toutes les images nous avons les deux premiegraveres qui sont faites voici pour meacutemoire la liste des vignettes restantes

1 laquobirds at low tidejpgraquo

29


2 laquofootprints in wet sandjpgraquo3 laquogroynes in winterjpgraquo4 laquolow tide runnels in the sunlightjpgraquo5 laquomarshjpgraquo6 laquomisty riversidejpgraquo7 laquowheeling gullsjpgraquo

Lorsque toutes les images sont creacuteeacutees nous pouvons appliquer lrsquoaction Image Cible agrave la pile drsquoimagesbull Seacutelectionnez le premier bloc graphique sur le haut de la pile utilisez le menu BlocgtActionsgtImage

ciblebull Ouvrez si neacutecessaire la palette Action en utilisant le menu FenecirctresgtActions

Lrsquoaction Image cible a une interface tregraves proche de lrsquoaction Rollover Chaque photo apparaicirct dans une table dans lrsquoordre drsquoimportation La coche est dans la colonne Normal pour toutes les photosComme dans lrsquoaction Rollover il existe deux onglets Images (qui est activeacute par deacutefaut) et Paramegravetres

bull Deacutecochez toutes les lignes de la colonne Normal puis cochez dans chaque colonne chaque image comme dans la copie drsquoeacutecran en haut de page

bull Placez une coche dans la colonne Image1 pour laquobeachhutsraquo Image 2 pour laquoweatheredseawallraquo et ainsi de suite

bull Pour terminer placez une coche dans la colonne Normal pour lrsquoimage laquowheelinggullsraquo car nous voulons que cette image soit visible lorsque le visiteur arrive sur la page

Le numeacutero de lrsquoimage est tregraves important car crsquoest gracircce agrave lui que nous allons faire le lien entre la vignette qui deacuteclenche le rollover et lrsquoimage cible correspondante Comme nous avons creacuteeacute les blocs de maniegravere successive et dans lrsquoordre cela sera facile mais lorsque vous travaillerez sur vos projets et que vous aurez une modification de votre site agrave faire il vous faudra prendre soin de bien veacuterifier ces valeurs

bull Cliquez sur lrsquoonglet Paramegravetres dans la palette Actionsbull Choisissez laquoNonraquo dans le menu Restaurer

Cette fenecirctre peut sembler complexe mais pour ce tutoriel nous pouvons ignorer le reste des paramegravetres Vous pouvez en apprendre plus en lisant le manuel Freeway ReacutefeacuterenceMaintenant que chaque cible a un numeacutero attribueacute nous allons nous assurer que chaque vignette appelle le bon numeacutero lorsqursquoelle est survoleacutee

bull Seacutelectionnez la premiegravere vignette utilisez le menu BlocgtActionsgtRolloverbull Sur la premiegravere ligne de la palette Actions placez une coche dans la colonne laquoNormalraquo dans la

deuxiegraveme ligne placez une coche dans laquoSurvolraquo et deacutecochez la coche laquoNormalraquo

bull Cliquez sur Paramegravetresbull Choisissez laquoColleacuteraquo dans le menu Restaurerbull Choisissez laquo1raquo dans le menu Souris sur

Le mode laquocolleacuteraquo nous permet de conserver lrsquoimage en grand format sur la page tant qursquoun autre rollover nrsquoa pas eacuteteacute deacuteclencheacute

bull Reacutepeacutetez ces eacutetapes pour chaque vignette pour les transformer en rollover La seule diffeacuterence et le chiffre dans le menu Souris sur qui change agrave chaque fois pour pointer sur le numeacutero de lrsquoimage cible correspondant crsquoest-agrave-dire que la deuxiegraveme vignette doit avoir le chiffre 2 la troisiegraveme 3 et ainsi de suite jusqursquoau chiffre 9

bull Pour optimiser les rollovers choisissez le menu EacuteditiongtRessources puis cliquez sur le bouton Tout re-eacutechantilloner cliquez sur Terminer

bull Utilisez le menu FichiergtEnregistrerbull Testez le site dans un navigateur en utilisant le menu FichiergtPreacutevisualiser dans un navigateur

Lorsque vous deacuteplacez la souris au-dessus des vignettes la vignette pointeacutee doit avoir une ombre porteacutee Lorsque vous deacuteplacez la souris ailleurs lrsquoombre doit resterLrsquoimage en grand format correspondante agrave la vignette doit apparaicirctre Si lrsquoimage nrsquoest pas la bonne alors vous ne pointez pas sur le bon chiffre assurez-vous que vous nrsquoavez pas fait drsquoerreur dans les reacuteglages des images cibles et des rollovers dans la palette Actions

Autres types drsquoactionsNous venons drsquoutiliser les actions de blocs qui srsquoappliquent en utilisant le menu BlocgtActions Cependant drsquoautres actions existent et ne sont pas lieacutees agrave un blocNous allons utiliser une action indeacutependante pour afficher la date courante sur la page

bull Cliquez sur la maquette dans le panneau Site puis utilisez le menu InsertiongtBloc ActiongtDate Courante Un nouveau bloc est creacuteeacute sur la maquette

bull Dans le coin en haut agrave gauche est afficheacute le nom de lrsquoaction laquoDate couranteraquo Lrsquoicocircne en haut agrave droite du bloc indique que crsquoest une action

bull Dans lrsquoonglet Geacuteneacuteral de lrsquoInspecteur positionnez le bloc avec les valeurs suivantes 10 pour X 682 pour Y 327 pour L 12 pour H

Le bloc nrsquoaffiche aucun contenu lorsqursquoil est sur la page car lrsquoaction ne geacuteneacuterera son reacutesultat que dans un navigateur Le code de lrsquoaction sera ajouteacute lors de la publication Freeway modifiera le code source pour vous Lrsquoaction date courante contient tout le code neacutecessaire pour afficher la date du jour sur votre page la seule chose que vous ayez agrave faire est de positionner le bloc ougrave vous voulez

Pour voir le reacutesultat nous devrons preacutevisualiser le site dans un navigateur mais commenccedilons par modifier les proprieacuteteacutes de lrsquoaction

bull Seacutelectionnez le bloc action et ouvrez la palette Actions si elle nrsquoest pas ouvertebull Vous trouverez dans lrsquoonglet Date Courante de la palette actions plusieurs paramegravetres choisissez la

langue puis seacutelectionnez laquoOuiraquo dans le menu Jour afin de faire afficher le jour dans la date

30


Vous pouvez agrave preacutesent preacutevisualiser dans un navigateur vous verrez le reacutesultat obtenu Les actions indeacutependantes sont tregraves simples agrave utiliser la contrepartie est que vous ne pouvez pas speacutecifier les proprieacuteteacutes de lrsquoaffichage comme la police ou la taille Il existe deux autres types drsquoactions les actions de dossier et les actions de page Pour ajouter une action de page utilisez le menu PagegtActions de page vous trouverez une liste des actions disponibles Les actions de dossier peuvent ecirctre appliqueacutees lorsqursquoun dossier est seacutelectionneacute dans le panneau Site Ouvrez la palette Actions puis cliquez sur le bouton laquo+raquo en bas agrave gauche de la palette vous aurez la liste des actions disponiblesCeci termine les tutoriels de Freeway Nous espeacuterons que vous avez pu suivre toutes les instructions et que vous avez une ideacutee plus preacutecise du fonctionnement de Freeway Il ne vous reste plus qursquoagrave commencer

31


Transfeacuterer votre site sur le webUne fois votre site precirct leacutetape suivante consiste agrave le transfeacuterer sur le World Wide Web afin que dautres personnes puissent le visiterLe site est constitueacute dun ensemble de fichiers (HTML ressources images et autres etc) qui sont geacuteneacutereacutes par Freeway localement (par deacutefaut dans un dossier reacuteserveacute agrave cet effet dans le mecircme dossier que le document Freeway) Il faut que tous ces fichiers soient transfeacutereacutes sur le serveur pour que votre site soit afficheacute par un navigateur (Nota une page de votre site utilise en geacuteneacuteral plusieurs fichiers cest pourquoi il faut que tous les fichiers soient transfeacutereacutes)Dans la plupart des cas Freeway gegravere tous les eacuteleacutements (fichiers HTML ressources etc) de votre site et se charge de transfeacuterer ou de mettre agrave jour toutes les pages et tous les fichiers utilesSi vous avez des eacuteleacutements suppleacutementaires comme par exemple des fichiers teacuteleacutechargeables par des liens sur vos pages il sera neacutecessaire que vous les transfeacuteriez avec votre client FTP habituel

Transfert FTPSauf si vous avez un accegraves direct au serveur qui heacutebergera votre site (agrave travers un reacuteseau local par exemple) la meacutethode la plus simple pour transfeacuterer votre site est le transfert FTP (File Transfer Protocol)Pour utiliser le transfert FTP vous avez besoin des informations speacutecifiques pour acceacuteder au serveur qui heacutebergera votre site Votre heacutebergeur (celui qui gegravere le serveur) vous a creacuteeacute un compte et doit vous donner ces informations

bull Serveur adresse ougrave teacuteleacutecharger les fichiers donneacutee par lheacutebergeurbull Reacutepertoire En geacuteneacuteral votre site sera placeacute dans un sous-reacutepertoire du serveur qui vous est indiqueacute

par lheacutebergeurbull Nom dutilisateur le nom qui vous a eacuteteacute attribueacute par lheacutebergeur pour acceacuteder agrave votre compte sur le

serveurbull Mot de passe le mot de passe associeacute agrave votre nom dutilisateur

Attention ces informations sont sensibles agrave la casse Il faut les entrer correctement telles quelles vous ont eacuteteacute fournies par lheacutebergeur

Transfert de votre site avec FreewayFreeway peut transfeacuterer et mettre agrave jour votre site apregraves chaque modificationAu premier transfert Freeway geacutenegraverera localement (publiera) tous les fichiers neacutecessaires (HTML ressources etc) puis copiera ces fichiers sur votre serveurEnsuite apregraves des modifications seuls les fichiers ajouteacutes ou modifieacutes seront transmis

Reacuteglage du transfert FTPFreeway conserve vos reacuteglages de transfert vers le serveur dans le document Freeway de votre site Avant tout transfert vous devez indiquer les informations agrave FreewayVous reacuteglez le transfert par le menu Fichier gt Reacuteglages du documenthellip puis en seacutelectionnant longlet Transfert Entrez chaque information dans le champ correspondant Les champs Port et Adresse Web peuvent ecirctre laisseacutes vides sauf si votre heacutebergeur vous demande dutiliser un port speacutecial ou si une action Freeway neacutecessite ladresse web

Vous pouvez laisser le champ du mot de passe vide si vous deacutesirez que le mot de passe soit demandeacute avant chaque transfert

Dialogue de reacuteglage du transfert

Transfert FTP de votre sitePour transfeacuterer votre site utilisez le menu Fichier gt TransfeacutererhellipFreeway commence par veacuterifier et mettre agrave jour les fichiers HTML ressources etc qui le neacutecessitent avant de les transfeacuterer sur le serveur

En cas de problegraveme de transfertEn premier veacuterifiez vos reacuteglages FTP et essayez dutiliser le mode de transfert PASSIFEssayez avec un autre logiciel client FTP pour veacuterifier que les reacuteglages sont corrects

Transfert par un client FTPVous pouvez aussi utiliser un client FTP (comme Cyberduck Fetch Transmit Captain FTPhellip) pour le transfert Dans ce cas veacuterifiez que vous transfeacuterez tous les fichiers

Il est conseilleacute dutiliser Freeway pour le transfert du site car il geacuterera automatiquement tout ajout modification ou suppression deacuteleacutements

32


Travailler avec FreewayComme nous lavons deacutejagrave vu lensemble dun site (ou dune partie dun site) est deacutecrit dans un document Freeway dans lequel vous deacutefinissez les pages les liens les images la preacutesentation etc de votre siteAgrave tout moment vous pouvez faire geacuteneacuterer par Freeway les pages HTML les fichiers images optimiseacutes pour le web et les autres ressources avec la fonction Publier

Il est important davoir un dossier deacutedieacute uniquement agrave la publication

Creacuteer un nouveau document FreewayUtilisez le menu Fichier gt NouveauhellipVous pouvez creacuteer un document agrave partir dun des modegraveles proposeacutes par Freeway (onglet Modegraveles du dialogue de creacuteation de document) y compris un modegravele vide Blank WebsiteSi vous partez dun modegravele (y compris le modegravele vide) Freeway creacuteera automatiquement un dossier qui regroupera le document Freeway lui-mecircme mais aussi le dossier destineacute agrave la publication locale du site et un dossier pour les ressources (images etc)Vous pouvez aussi partir de zeacutero avec longlet Personnaliseacute Dans ce cas cest agrave vous de deacutefinir le dossier ougrave sera publieacute le site

Travailler publier et preacutevisualiserLe travail avec Freeway est simple Vous creacuteez des pages pour votre site vous y inseacuterez images textes etc ainsi que des liens pour naviguer dans votre siteAgrave tout moment vous pouvez publier votre site par le menu Fichier gt Publier le site (cest-agrave-dire geacuteneacuterer les fichiers HTML et les ressources en local dans le dossier deacutedieacute) et preacutevisualiser chaque page de votre site pour en veacuterifier lapparence (bouton Preacutevisualiser au-dessus de la zone deacutedition de la page en cours)Vous pouvez aussi faire preacutevisualiser votre site en local sur un des navigateurs web installeacutes sur votre machine (menu Fichier gt Preacutevisualiser dans un navigateur)Lorsque vous ecirctes precirct vous pouvez transfeacuterer votre site sur le serveur afin quil soit reacuteellement accessible par dautres

Travailler avec des pagesChaque page dans Freeway correspond agrave une page de votre siteLors de la creacuteation de chaque nouvelle page Freeway vous proposera dutiliser une des maquettes existantesVous disposez de pages maquettes pour faciliter luniformisation et la coheacuterence de lensemble de votre site Chaque page du site peut utiliser une des maquettes Un changement sur une maquette modifiera toutes les pages utilisant cette maquetteLes maquettes sont donc tregraves puissantes pour avoir facilement par exemple un en-tecircte personnaliseacute reproduit sur toutes vos pages ou une mise en page speacutecifique appliqueacutee agrave certaines pages de votre siteVous pouvez creacuteer autant de pages maquettes que neacutecessaire En regravegle geacuteneacuterale il est conseilleacute de limiter le nombre des maquettes afin davoir un site uniforme et coheacuterent dont les pages reprennent les mecircmes codes et chartes graphiques

Mise en page CSS ou par tableauxLe bouton CSS de la barre doutils permet de deacutefinir la faccedilon dorganiser la mise en page par deacutefaut avec une mise en page baseacutee sur les CSS ou sur les tableauxCela modifie significativement le comportement de votre site dans le navigateurAvec la mise en page par tableaux lensemble de la page est deacutecoupeacute par Freeway et organiseacute pour suivre au mieux votre mise en page dans un contexte particulier Mais toute modification du contexte peut entrainer des deacutecalages de certains blocsA linverse avec les CSS la page est geacutereacutee avec des calques

Nota Dans lInspecteur vous pouvez choisir le comportement de chaque bloc avec loption Calque

Travailler avec des blocsSur chaque page vous creacuteerez des blocs Les blocs sont des conteneurs dans lesquels vous mettez textes et graphiquesVous disposez de blocs HTML principalement utiliseacutes pour contenir du texte Il est important de noter que le texte contenu dans ces blocs peut ecirctre analyseacute par les moteurs de recherche (contrairement au texte mis dans un bloc graphique)Les blocs graphiques sont utiliseacutes pour contenir des images mais peuvent aussi ecirctre utiliseacutes pour contenir du texte dont vous pouvez controcircler exactement la mise en page et le format Notez cependant que lors de la publication Freeway geacutenegraverera des fichiers images pour ces blocs et que leur contenu textuel ne sera donc pas accessible aux moteurs de recherche Vous pouvez deacutefinir un texte alternatif agrave un bloc graphique qui sera utiliseacute si le bloc ne peut pas ecirctre afficheacute par le navigateurVous utilisez la barre doutils pour creacuteer un bloc et la palette Inspecteur pour en reacutegler les caracteacuteristiques dimensions position apparence etcVous pouvez aligner ou distribuer les blocs seacutelectionneacutes avec le menu Bloc

Travailler avec des imagesComme nous lavons vu les images sont contenues dans un bloc graphiquePour importer une image vous pouvez glisser le fichier sur la page dans la zone deacutedition Vous pouvez aussi creacuteer un bloc graphique et utiliser le menu Fichier gt Importerhellip pour choisir le fichier imageVous pouvez dans Freeway redimensionner couper et modifier les images Vous pouvez aussi superposer des images qui se chevauchent

Hieacuterarchie des blocsOutre leur position dans la page les blocs sont positionneacutes de larriegravere-plan au premier plan (dans lordre de leur creacuteation) Cet ordre a de limportance par exemple une image pourra en masquer une autre Vous pouvez passer agrave tout moment un bloc au premier plan (ou agrave larriegravere-plan) par le menu Bloc

Nota Le panneau de gauche lorsquil affiche le deacutetail de la page en cours indique lordre des blocs

33


Un bloc peut en contenir un autre par exemple un bloc de texte HTML peut contenir un bloc contenant une image Si vous modifiez le texte limage suivra automatiquement

Travailler avec des tableauxLes tableaux sont des blocs particuliers pouvant contenir des lignes et des colonnes Ils peuvent servir par exemple agrave preacutesenter des donneacutees en tableau Les tableaux sont creacuteeacutes par le bouton de la barre doutilsVous pouvez reacutegler la bordure et lespace entre cellules la couleur etc avec la palette InspecteurChaque cellule peut contenir du texte mais aussi des blocs (graphiques ou autres)

Les styles de texteChaque fois que vous affectez un style particulier agrave du texte il est enregistreacute dans la palette Styles Vous pourrez alors reacuteutiliser le mecircme style pour du texte dans dautres parties de votre siteVous pouvez eacutediter un style particulier pour modifier globalement tous les textes utilisant ce style

Les couleursChaque bloc peut avoir une couleur de fond et les textes une couleur de policeLes couleurs sont geacutereacutees dans la palette Couleurs qui donne accegraves aux couleurs preacutedeacutefinies mais aussi aux couleurs personnaliseacutees selon vos propres besoins

Hyperliens et ancresLes liens servent agrave naviguer entre vos pages ou vers dautres sitesVous pouvez affecter un lien agrave un bloc ou agrave un texte un mot etcSeacutelectionnez le bloc ou le texte deacutesireacute et utilisez le menu Edition gt Lien vershellip Vous pourrez alors choisir une page ou un lien externe Un clic sur le lien fera afficher la page choisieDe mecircme vous pouvez creacuteer une ancre agrave linteacuterieur dun texte et ensuite un lien vers cette ancre Un clic sur le lien fera afficher la page agrave lemplacement de lancre

34


Actions Freeway

Showcase (Application et Action)Creacuteer une galerie pour preacutesenter des photos (Vignettes et images agrandies) pour un site internet peut ecirctre fastidieux Ceci prend du temps et beaucoup de manipulations reacutepeacutetitives Nous avons deacutecideacute de creacuteer une application et une action afin dautomatiser la creacuteation de galeries pour FreewayLapplication Showcase vous permet de creacuteer une galerie ou un diaporama en quelques minutes en personnalisant les dimensions la mise en page et les couleurs afin de respecter la charte graphique de votre site Un deacutebutant peut donc creacuteer sans effort une galerie en partant de zeacutero avec un reacutesultat professionnelIl y a deux eacutetapes dans lutilisation de Showcase La premiegravere consiste agrave utiliser lapplication Showcase pour creacuteer un fichier de description de votre galerie La deuxiegraveme eacutetape permet agrave Freeway dutiliser ce fichier Il suffit dappliquer laction Showcase dans une page Freeway Personnalisez les couleurs les tailles comme bon vous semble puis publiez

Plus de deacutetails dans les chapitres Application Showcase Creacuteation de galeries et Laction Showcase Inteacutegration de la galerie plus bas dans ce manuel

Mise en page relative (Version Pro)Cette action ne peut ecirctre utiliseacutee que si vous placez des calques sur votre page La mise en page produite par cette action utilise les technologies CSS les plus reacutecentes afin de vous permettre davoir une mise en page suffisamment flexible pour avoir une page identique dans tous les navigateurs quelle que soit la police le zoom ou le Systegraveme dexploitation utiliseacute par le visiteurLes blocs vont donc grossir et se deacuteplacer en fonction des paramegravetres du navigateur vous pouvez eacutegalement utiliser un pied de page Ceci paraicirct anodin mais les creacuteateurs de sites expeacuterimenteacutes savent que ce nest pas si simple sur un site internetPour vous montrer lutilisation de cette action nous allons prendre un exemple

bull Lancez Freeway utilisez le menu FichiergtNouveau cliquez sur longlet Modegraveles seacutelectionnez Charcoal et cliquez sur le bouton OK Choisissez ensuite un dossier ougrave enregistrer le projet et cliquez sur le bouton Enregistrer

La page daccueil du modegravele Charcoal est maintenant chargeacutee dans Freeway Laction mise en page relative est appliqueacutee par deacutefaut Pour voir la diffeacuterence nous allons commencer par supprimer laction

bull Ouvrez la palette Actions (Menu Fenecirctre)bull Seacutelectionnez le dossier du site (Site folder) dans la colonne de gauche de Freeway Dans la

palette action cliquez sur la croix agrave gauche du nom de laction pour supprimer celle-ciPreacutevisualisez le site dans un navigateur qui supporte le zoom sur le texte HTML Safari et Firefox le font Si vous utilisez Safari utilisez le menu PreacutesentationgtReacuteduireagrandir le texte seulement Pour Firefox utilisez le menu AffichagegtZoomgtZoom texte seulement

Maintenant que cette option est cocheacutee seule la taille du texte va ecirctre modifieacutee Ce comportement est utiliseacute pour simuler la visualisation sous Windows les textes eacutetant afficheacutes leacutegegraverement plus gros que sur Macintosh Utilisez les commandes de Zoom du navigateur (Commande +) pour faire grossir le texte et regardez ce qui se passe

35

Page avec taille par deacutefaut

Texte grossi 3 fois

Comme vous pouvez le constater le reacutesultat nest pas acceptable Les textes deacutebordent de la mise en page Ce comportement ne vient pas de Freeway mais de la technologie CSS standard qui ne supporte pas ce genre de comportement on parle ici de positionnement absolu des calques Cest pour cela que la mise en page relative a eacuteteacute ajouteacutee au CSS

Deacutesormais laction Mise en page relative permet de contourner ce problegraveme et dutiliser les calques CSS pleinement Nous allons appliquer agrave nouveau laction pour voir le changement de comportement

bull Dans Freeway seacutelectionnez le dossier du site (Site Folder) puis utilisez le menu PagegtActions de dossiersgtMise en page relative

Preacutevisualisez agrave nouveau dans un navigateur et augmentez la taille du texte comme preacuteceacutedemment Voici le reacutesultat avec le texte grossi 3 fois

Contrairement agrave la copie deacutecran preacuteceacutedente les textes sont toujours visibles les blocs ont simplement glisseacute vers le bas et ont changeacute de dimensions Eacutevidemment le grossissement est extrecircme et ne se produira pas dans la reacutealiteacute mais vous tout reste lisible sur la page

36

Travailler avec la Mise en page relativePour utiliser la mise en page relative la page ne doit contenir que des calques (CSS) Pour creacuteer automatiquement des calques activez le bouton Mise en page CSS dans la barre des menus il doit ecirctre en bleu comme sur limage agrave droite Si vous aviez deacutejagrave commenceacute agrave travailler sur votre site sans ce bouton activeacute vous devez alors seacutelectionner les blocs preacuteceacutedemment creacuteeacutes et cocher la case Calque dans la palette Inspecteur Une fois que cest fait et que vous avez placeacute vos blocs sur votre page utilisez le menu PagegtActions de pagegtMise en page relative Cette action ne propose quune seule option dans la palette Actions la Toleacuterance de chevauchement Votre page peut contenir des blocs qui se chevauchent afin de creacuteer une mise en page particuliegravere Ceci peut perturber la mise en page relative Cette option permet donc de deacutefinir sur quel critegravere laction seacutepare les blocs afin de deacuteplacer la mise en page Jouez avec ce reacuteglage en fonction de votre mise en page pour avoir le meilleur reacutesultatLaction Mise en page relative peut ecirctre appliqueacutee agrave un dossier entier comme dans lexemple preacuteceacutedent ou page par page

Note La Mise en page relative nest pas la solution universelle Certaines mises en pages sont trop complexes pour utiliser ce type de mise en page Il vaut mieux alors utiliser une mise en page absolue

Autres actions de lensemble Mise en page relativeSupprimer de la mise en page relative

Pour la majoriteacute des sites laction Mise en page relative va fonctionner Cependant dans certains cas il est impossible dutiliser certaines fonctions avec ce type de mise en page Il existe dont deux possibiliteacutes Appliquer laction page par page et ne pas lappliquer sur les pages ou la mise en page relative est impossibleAppliquer laction agrave tout un dossier et exclure les pages ou la mise en page relative est impossible en utilisant laction Supprimer de la mise en page relativeLaction Supprimer de la mise en page relative peut ecirctre appliqueacutee agrave une page entiegravere ou aux blocs sur une page Ceci peut vous permettre dexclure un ensemble de blocs et de les conserver en positionnement absoluPour appliquer laction agrave une page Menu PagegtActions de pagegtSupprimer de la mise en page relativePour appliquer laction agrave un bloc Menu BlocgtActionsgtSupprimer de la mise en page relative

Modifier HauteurLaction Modifier hauteur sapplique aux blocs Elle permet de supprimer toute notion de taille verticale dun bloc Ainsi le bloc sadapte au contenu de celui-ci Pour lappliquer seacutelectionnez un bloc puis utilisez le menu BlocgtActionsgt Modifier hauteur

Creacuteation de-mails

De plus en plus de socieacuteteacutes envoient des courriers sous forme de Newsletter Ces envois se font par e-mail Nous avons donc deacutecideacute dinclure dans Freeway une action permettant de geacuteneacuterer automatiquement une page compatible avec les logiciels de messagerieIl est cependant important de garder agrave lesprit que les logiciels de messagerie ne sont pas de vrais navigateurs Le rendu des pages est donc limiteacute Il vous faut donc creacuteer des pages simples afin de les envoyer par e-mail Nous vous recommandons de nutiliser quune mise en page par tableau (pas de CSS) et de ne pas utiliser de scripts ou deffets danimation sur les pages Cela signifie que vous ne devez pas utiliser laction Rollover par exemple et dans Freeway Pro veillez agrave ce que le bouton Mise en page CSS soit deacutesactiveacutePlus la preacutesentation sera basique meilleure sera la lisibiliteacute de votre message

Utiliser laction Creacuteation de-mailsIl vous faudra stocker les images que vous souhaitez utiliser dans le message sur votre serveur FTP Les logiciels de messagerie iront prendre les images sur votre serveur directement elles ne sont pas transfeacutereacutees dans le message Pour cela vous devez utiliser une application appeleacutee client FTP (Cyberduck Transmit Fetch etc) Transfeacuterez les images dans un dossier preacutevu pour cela utilisez un nom simple (email newsletter)Une fois que le dossier est creacuteeacute utilisons Freeway pour creacuteer un message Creacuteez un nouveau document Utilisez le menu FichiergtReacuteglages du document puis cliquez sur longlet Sortie Veacuterifiez que loption Feuilles de style externes nest pas cocheacutee Maintenant cliquez sur longlet Transfert et remplissez le champ Adresse Web avec ladresse de votre site Si vous avez choisi comme nom de dossier newsletter pour stocker vos images vous taperez httpwwwvotredomainecomnewsletterCliquez sur le bouton OK pour fermer la fenecirctreUtilisez le menu PagegtActions de pagegtCreacuteation de-mails Deux choix sont disponibles dans la palette Actions pour loption Utiliser des liens absolus Oui preacutevisualiser sur le serveur cette option permettra aux logiciels de messagerie de prendre les fichiers sur votre serveurNon preacutevisualisation locale cette option provoquera le stockage des images dans le dossier Ressource de Freeway Vous pourrez donc preacutevisualiser le reacutesultat en local mais pas dans un logiciel de messagerie distant

Envoyer les fichiers et obtenir le code source agrave utiliserNous vous recommandons dutiliser des liens absolus pour le vrai message Durant la phase de creacuteation de la page utilisez les liens locaux afin de pouvoir rapidement preacutevisualiser le reacutesultat Lorsque vous avez termineacute la mise en page de votre message dans Freeway pensez agrave modifier la palette Actions pour utiliser les liens absolus puis preacutevisualisez la page dans un navigateur Ceci va forcer Freeway agrave recreacuteer les liens et agrave charger les images qui sont sur le serveurLe navigateur vous indiquera sil manque des images il vous faut alors les transfeacuterer avec votre client FTP vers le dossier newsletter de votre serveur (si vous avez choisi ce nom) Lorsque tout fonctionne correctement copiez le code source de la page dans le navigateur (dans Safari menu PreacutesentationgtCode source) Collez le code source dans un eacutediteur de texte (pas un traitement de texte) au format texte brut et enregistrez le fichier sur votre disque dur Nous utiliserons ce code plus tard

37

Creacuteer un e-mail en texte brutVous pouvez utiliser laction pour creacuteer un e-mail en texte brut afin que votre message soit lisible par les clients de messagerie qui ne supportent pas lHTML Lorsque vous avez preacutevisualiseacute la page dans un navigateur dans la palette Actions cliquez sur le bouton E-mail en texte brutUne fenecirctre contenant le texte de la page souvrira Vous pouvez copier le texte et le copiercoller dans le logiciel que vous utilisez pour envoyer votre newsletterFreeway essaye dextraire de la page le texte brut mais il est possible que certaines preacutesentations len empecircchent une eacutedition du texte sera alors neacutecessaire pour ces cas speacutecifiques

Envoyer le messageIl existe plusieurs solutions pour envoyer le message La plus simple est dutiliser Safari car vous navez pas besoin de copier le code comme nous lavons fait preacuteceacutedemmentPreacutevisualisez le message dans Safari puis utilisez le menu FichiergtEnvoyer le contenu de cette page par courrier eacutelectronique Lapplication Mail dApple va se lancer et creacuteer un message contenant le code de la page automatiquement Tout ce quil vous reste agrave faire est de saisir les adresses des destinataires dans le champ Cci un sujet pour le message et de cliquer sur EnvoyerCette meacutethode est pratique pour un petit nombre de destinataires et si vous utilisez Mailapp Si vous utilisez une autre application ou si vous avez un grand nombre de destinataires vous trouverez sur Internet des entreprises speacutecialiseacutees dans la diffusion de newsletters Il vous faudra leur fournir le code HTML que vous avez enregistreacute gracircce au traitement de texte (voir plus haut) Ainsi ils pourront diffuser le message et les images seront chargeacutees sur votre serveur

Actions Moteur de recherche (Version Pro seulement)

Cet ensemble dactions permet dajouter un moteur de recherche simple agrave votre site Plusieurs actions doivent ecirctre appliqueacutees afin davoir un moteur de recherche fonctionnelIl y a trois actions distinctes une action de dossier une action appliqueacutee au champ de texte ougrave lutilisateur tape sa recherche et une action autonome qui se place sur une page pour afficher les reacutesultatsContrairement aux moteurs traditionnels celui-ci utilise du Javascript au lieu dune technologie cocircteacute serveur comme une base de donneacutees et du PHP Les avantages sont multiples vous pouvez tester le moteur sur votre machine en preacutevisualisant les pages et le moteur est fonctionnel mecircme si vous distribuez votre site sur CDDVD pour le montrer agrave vos clients avant de le mettre en ligne

Appliquer laction de dossierLa premiegravere action est celle qui concerne le dossier du site Pour commencer il vous faut veacuterifier que le nom de votre site soit speacutecifieacute dans le menu FichiergtReacuteglages du documentgtTransfertEntrez ladresse complegravete (URL) de votre site puis cliquez sur OK Maintenant dans la colonne de gauche de Freeway seacutelectionnez le dossier qui contient toutes les pages et utilisez le menu PagegtActions de dossiergtMoteur de recherche Dans la palette Actions un nouveau message va apparaicirctre vous indiquant quelle autre action doit ecirctre appliqueacutee sur la page En loccurrence laction Reacutesultats moteur de recherche

Creacuteation du formulaire de rechercheNous allons creacuteer ici un formulaire permettant au visiteur de saisir sa requecircte Nous navons besoin que dun champ texte ougrave saisir divers mots (comme sur la page daccueil de Google)

Vous pouvez creacuteer ce formulaire sur plusieurs pages diffeacuterentes ou encore sur la maquette afin davoir un champ de recherche sur toutes les pages abonneacutees agrave la maquetteCommenccedilons par creacuteer un champ texte Cliquez et maintenez le bouton HTML dans la barre des outils de Freeway comme sur limage agrave gauche puis seacutelectionnez la ligne Champ deacuteditionEnsuite dessinez le champ quelque part sur la page ou la maquette Cela va creacuteer un champ deacutedition HTML vous pouvez changer la taille et ses attributs dans la palette InspecteurMecircme manipulation pour creacuteer un bouton qui permet de valider la saisie Personnalisez le bouton afin de faire apparaicirctre le texte que vous souhaitez Une fois termineacute le formulaire peut ressembler agrave limage agrave droiteMaintenant nous devons dire agrave Freeway que ce champ est agrave utiliser pour le moteur de recherche Seacutelectionnez le champ en cliquant une fois dessus puis utilisez le menu BlocgtActionsgtMoteur de recherche

Affichage des reacutesultatsNous avons reacutegleacute le dossier dans lequel la recherche doit ecirctre faite le champ qui sert agrave la saisie des termes agrave chercher Il nous reste agrave afficher les reacutesultats les reacutesultats peuvent ecirctre afficheacutes sur la mecircme page que le formulaire de recherche ou sur une page speacutecifique deacutedieacutee agrave cela Cest la solution la plus simple si vous laissez le champ de recherche partout sur votre site Ainsi cela sera toujours la mecircme page qui sera ouverte dans le navigateur pour afficher le reacutesultatPour creacuteer la zone daffichage des reacutesultats cliquez et maintenez le bouton Actions dans la barre des outils de Freeway et choisissez laction Moteur de recherche Ensuite dessinez la zone daffichage des reacutesultats sur la page La zone affiche un texte exemple qui vous permet de veacuterifier le design et les couleurs des reacutesultats Le texte sera modifieacute en fonction des reacuteglages que vous faites dans la palette Inspecteur

38

Le moteur de recherche est maintenant termineacute et fonctionnel Il ne vous reste plus quagrave personnaliser laffichage des reacutesultats gracircce agrave la palette Inspecteur

Comment le moteur de recherche reacutefeacuterence les pages Le moteur creacuteeacute par laction sera efficace uniquement si vous prenez le temps de remplir les balises meta des pages Pour modifier les balises meta sur une page utilisez le menu PagegtMeta Tags (Balises Meta)Par deacutefaut seule la balise generator existe Le moteur de recherche utilise les balises suivantes title Titre de la page texte bleu souligneacute dans limage preacuteceacutedentedescription Description du contenu de la page Cest le texte qui est en noir sous le titre de la page dans limage preacuteceacutedente

Attention Les balises meta font partie du langage HTML Elles sont donc TOUJOURS en Anglais et en minuscule

Actions Carte du site

Les moteurs de recherche sur Internet utilisent un fichier index pour faciliter lanalyse des pages dun site Cet index est une sorte de reacutepertoire de vos pages sur votre site Les robots danalyse vont se servir de cet index pour preacutesenter des reacutesultats organiseacutesCette suite dactions fabrique un fichier XML qui peut ecirctre envoyeacute agrave diffeacuterents moteurs de recherche Dans les versions preacuteceacutedentes ceci devait ecirctre fait manuellement cette action permet dautomatiser le processus

Action de dossierVous devez appliquer laction Carte du site au dossier du site Pour cela seacutelectionnez le dossier dans la colonne de gauche de Freeway puis utilisez le menu PagegtActions de dossiergtCarte du siteComme pour laction Moteur de recherche il faut que ladresse du site soit dans les Reacuteglages du document (voir ici)La palette Actions affiche maintenant les reacuteglages disponibles Si vous deacutecochez la case Carte XML la carte nest pas geacuteneacutereacutee et nest pas envoyeacutee aux moteurs de recherche Vous pouvez geacuterer la freacutequence denvoi et la prioriteacute page par page en utilisant laction Carte du site mais sur la page (menu PagegtActionsgtCarte du site)Vous pouvez compresser le fichier de la carte cela est tregraves utile sur un site de grande taille avec un nombre important de pages afin deacuteconomiser de la bande passanteLa section Envoi de la carte du site permet de cocher ou de deacutecocher les moteurs de recherche auxquels vous souhaitez envoyer la carte Les moteurs de recherche utiliseacutes sont

1 askcom2 bingcom3 googlecom4 yahoocom

La derniegravere option Yahoo liste dadresses permet de creacuteer un fichier nommeacute urllisttxt qui joue le mecircme rocircle que les cartes de site XML mais est speacutecifique au moteur de recherche Yahoo

Envoi de la carte du sitePar deacutefaut la carte du site nest pas envoyeacutee Le reacutefeacuterencement eacutetant important pour la visibiliteacute dun site vous ne le ferez que lorsque votre site sera precirct ou presqueUne fois que votre site est precirct envoyez-le sur votre serveur et veacuterifiez son fonctionnement Si tout est correct dans la palette action cochez Oui le site est en ligne sur le serveur puis cliquez sur le bouton juste en dessous Envoyer la carte Ceci aura pour effet dactiver les moteurs de recherche qui se mettront agrave jour lorsque leurs robots respectifs auront de la disponibiliteacute

39

Reacuteglages page par pageLaction appliqueacutee au dossier entier permet davoir lensemble du site mais utilise les mecircmes reacuteglages de prioriteacute et de freacutequence sur toutes les pagesIl est possible de modifier cela page par page en utilisant le menu PagegtActionsgtCarte du siteLes reacuteglages utiliseacutes sur la page preacutevalent sur les reacuteglages globaux de laction de dossier

Actions Partenaire Amazon

Le programme Partenaires Amazon permet aux creacuteateurs de site dinteacutegrer des publiciteacutes sur un site pour des produits en vente sur AmazonSi un visiteur clique sur le produit il peut en voir la description et eacuteventuellement proceacuteder agrave un achat chez Amazon Pour plus de deacutetails visitez le site httpspartenairesamazonfrCette suite dactions incluse dans Freeway 55 permet dinterfacer tregraves facilement le site Amazon afin de faire de la publiciteacute et de vendre vos produits Pour utiliser ces actions vous devez creacuteer un compte Partenaire Amazon sur la page donneacutee en lien plus hautIl existe trois types dactions Vous pouvez utiliser un lien texte dans un paragraphe une image ou encore un panneau contenant une image et du texte qui renverront vers le site AmazonChaque produit en vente sur Amazon possegravede un code unique qui lidentifie Ce code devra ecirctre utiliseacute dans la palette Actions Il existe deux types de codes utiliseacutes par Amazon lISBN qui est un numeacutero unique international pour deacutesigner les livres et certaines publications LASIN qui est un code geacutereacute par Amazon pour identifier les autres produits Ces nombres sont donneacutes par Amazon dans la page concernant le produit

Ces nombres sont speacutecifiques agrave Amazon et peuvent changer dun pays agrave un autre

Action Lien texte Partenaires AmazonCette action permet dinseacuterer un lien HTML dans le texte de votre page Lorsque le visiteur clique sur ce lien le navigateur affichera la page concernant le produit sur le site Amazon Si le visiteur achegravete le produit votre compte Partenaire Amazon sera creacutediteacutePour utiliser cette action placez le curseur deacutedition agrave la position adeacutequate dans le texte dun bloc HTML Utilisez le menu InsertiongtBloc ActiongtLien texte Partenaires Amazon

40

Dans la palette Actions modifiez le pays speacutecifiez le numeacutero ASINISBN le texte afficheacute puis preacutevisualisez dans limage suivant vous pouvez voir leacutetat dans Freeway puis apregraves publication

ID Partenaire Votre identifiant personnel AmazonBoutique Amazon Seacutelectionnez le pays utiliseacute par votre compteASINISBN du produit Code unique qui repreacutesente le produit que vous souhaitez vendreTexte du lien Texte qui sera inseacutereacute et visible dans le navigateurLien de destination Permet de choisir ce que va afficher le lien apregraves ouverture Vous pouvez choisir dafficher les deacutetails concernant le produit ou une liste de marchands vendant ce produitOuvrir le lien dans une nouvelle fenecirctre Lorsque le visiteur cliquera sur le lien une nouvelle page du navigateur va souvrir si cette option est cocheacuteeAjouter un script de preacutevisualisation produit Le script ne sera actif que lorsque le site sera sur un serveur Au survol de la souris un message apparaicirctra au-dessus du texte avec la description du produit (comme un rollover)

Action Partenaires Amazon sur un bloc graphiqueCette action est similaire agrave la preacuteceacutedente mais permet dutiliser un bloc graphique (une image) sur la page au lieu dun textePour utiliser cette action placez une image sur votre page et modifiez-la Ensuite seacutelectionnez le bloc en cliquant une fois dessus puis utilisez le menu BlocgtActionsgtPartenaires Amazon Les options dans la palette Actions sont identiques agrave laction preacuteceacutedente La seule diffeacuterence est le champ Nom du produit agrave la place du lien texte Ceci vous permet didentifier facilement le bloc sur la page lorsque vous avez plusieurs images

Action Liens Produits Partenaire AmazonAmazon a creacuteeacute des bandeaux publicitaires precircts agrave lemploi Cette action vous permet de les utiliser

Pour inseacuterer un panneau utilisez le menu InsertiongtBloc Actiongt Liens Produits Partenaire AmazonLes options sont identiques aux actions preacuteceacutedentes Cette action dispose neacuteanmoins doptions permettant de personnaliser les couleurs du panneau afin de correspondre au mieux agrave la charte graphique de votre site Par deacutefaut le panneau utilise une taille de 120240 pixelsOptions des prix Cette option vous permet de choisir quels types de prix sont afficheacutesCouleurs Personnalisez les couleurs du panneauActiver preacutevisualisation en direct Si cette option est active Freeway affichera le vrai panneau en fonction des codes entreacutes pour le produitLorsque vous utilisez un code ISBN (pour les livres) vous devez utiliser le code ISBN-10 pour afficher un visuel complet du livre Si vous utilisez le code ISBN-13 le bouton Acheter redirigera vers la page par deacutefaut dAmazonIl arrive que pour certains livres limage de couverture ne soit pas disponible Dans cette situation le panneau affichera une image geacuteneacuterique

Application Showcase Creacuteation de galeries

Lapplication Showcase est preacutesente dans le dossier Freeway 55 Cliquez deux fois sur son icocircne pour la lancer

41

Fenecirctre PrincipaleLapplication est composeacutee dune fenecirctre principale et dune palette Inspecteur

Zone de mise en pageLors de louverture de Showcase il ny a aucune image Pour ajouter des images utilisez le menu FichiergtImporter des images ou faites glisser vos images depuis le Finder dans la fenecirctre de ShowcasePar deacutefaut la vue Vignette est afficheacutee Les images sont afficheacutees par ordre alphabeacutetique Cet ordre affecte lordre des images dans les diaporamas et dans la galerieLordre dapparition des images peut ecirctre modifieacute en deacuteplaccedilant limage dans la fenecirctre agrave un nouvel emplacement Pour supprimer une image seacutelectionnez-la en cliquant une fois dessus puis appuyez sur la touche Delete du clavier ou utilisez le menu EacuteditiongtSupprimerVous ne pouvez importer que 200 images simultaneacutement dans Showcase Showcase supporte les formats JPEG PNG TIFF Photoshop (psd) et PDF

Navigateur dimagesLe navigateur dimage permet dafficher les photos des logiciels iPhoto ou Aperture si ceux-ci sont installeacutesDeacutepliez les triangles dans la colonne de droite et seacutelectionnez les Albums dont vous voulez voir les photos Vous pouvez ensuite glisser les photos dans la partie gauche de la fenecirctre afin de les utiliser

La barre doutilsDe gauche agrave droite

Bouton dajout dimage Permet drsquoajouter des images agrave la galerieBouton denregistrement et dexport Ce bouton permet denregistrer le document Showcase et de limporter dans FreewayBouton de rafraicircchissement daffichage Utilisez ce bouton pour rafraicircchir laffichage si par exemple une des images utiliseacutees dans la galerie a eacuteteacute modifieacutee avec un autre logicielOnglet Vignette ou Image Permet de modifier la mise en page des Vignettes et des images en grand format correspondantes en fonction de longlet choisiTaille des Vignettes et des Images Barre de deacutefilement permettant de modifier la taille des Vignettes et des Images en fonction de longlet choisiShowcase montre agrave quoi ressemblera la future galerie utiliseacutee dans Freeway La modification de la taille par exemple modifiera eacutegalement la taille des images dans la page Freeway

LinspecteurComme Freeway Showcase dispose dune palette Inspecteur qui permet de modifier divers paramegravetres Si linspecteur nest pas visible utilisez le menu VuegtInspecteurLinspecteur possegravede trois onglets Geacuteneacuteral Apparence et Publication La majoriteacute des reacuteglages que vous faites dans Showcase peuvent par la suite ecirctre modifieacutes dans Freeway Consideacuterez le travail effectueacute ici comme un brouillon avanceacute Les reacuteglages et les petits deacutetails seront ensuite affineacutes directement dans votre page Freeway Il est ainsi plus facile de travailler avec la galerie dans son contexte de mise en pageVoici les reacuteglages qui ne peuvent pas ecirctre modifieacutes dans Freeway

bull La taille des vignettes et des images (grand format)bull Bordures des imagesbull Reflets et Ombres des imagesbull Coins arrondis des imagesbull Leacutegende des imagesLonglet Geacuteneacuteral

Dans cet Onglet vous pouvez deacutefinir les paramegravetres geacuteneacuteraux concernant le document ShowcaseType du document Galerie ou Diaporama Ceci ne change pas la preacutesentation dans Showcase mais cela va modifier le comportement du document dans FreewayMise en page Les options sont diffeacuterentes en fonction du Type preacuteceacutedent Vous pouvez utiliser une mise en page en reacuteglant lespacement entre les images ou encore un nombre de colonnesTaille des cellules Les deux barres de deacutefilement font la mecircme chose que celles dans la barre doutils Cependant elles vous permettent de rentrer des valeurs numeacuteriques preacutecises et de modifier les deux tailles directement sans avoir agrave changer donglet dans la fenecirctre principaleAfficher les leacutegendes Lorsque cette case agrave cocher est active vous pouvez saisir des leacutegendes pour chaque image dans la fenecirctre principale Cela modifie eacutegalement lespace occupeacute par chaque image

42

Longlet Apparence

Dans cet onglet vous pouvez modifier lapparence des vignettes qui sont dans la fenecirctre principale

Bordure Le champ Taille modifie leacutepaisseur de la bordure Plus la bordure est eacutepaisse plus limage sera reacuteduite Cette option nrsquoaffecte que les VignettesRayon des angles Permet de creacuteer des coins arrondis

Reflet Affiche un reflet de limage sous celle-ci Modifiez sa taille et son opaciteacute en fonction de vos besoinsOmbre Affiche une ombre porteacutee de limage lorsque la case est cocheacuteeFond Permet de modifier le fond de la page et le fond des cellules dans lesquelles les images sont afficheacutees

Longlet PublicationCet onglet vous permet de modifier les critegraveres techniques des images qui seront utiliseacutees sur votre site internet afin den optimiser la qualiteacute et le temps de chargementSi vous cochez la case Image Originale Showcase utilisera limage sans la modifier Vous avez ensuite le choix dans le format de limage Le PNG produira des images de meilleure qualiteacute mais plus longues agrave charger Le format JPEG permet de compresser les images ce qui peut ecirctre inteacuteressant pour des images de dimensions moyenne agrave faibles qui ne neacutecessitent pas une grande qualiteacute (pas dimpression par exemple)

Enregistrement du documentUne fois vos reacuteglages termineacutes enregistrez le document Showcase en utilisant le menu FichiergtEnregistrer Stockez-le par exemple dans le dossier Media de votre projet Freeway afin de le retrouver facilementMaintenant exportez le document en format utilisable par Freeway en utilisant le deuxiegraveme bouton de la barre doutils ou le menu FichiergtExporter vers FreewayVous pouvez mettre les deux documents dans le dossier Media

Le document spg est celui que vous devrez ouvrir avec Showcase afin de le modifier Le document fwgallery est celui qui sera utiliseacute par laction Showcase dans une page Freeway

43

Laction Showcase Inteacutegration de la galerie

Nous avons creacuteeacute un document gracircce agrave lapplication Showcase Ce document contient les images et les proprieacuteteacutes de votre galerie ou de votre diaporama Il nous faut maintenant linteacutegrer agrave FreewayPressez et maintenez le bouton Actions dans la barre doutils de FreewayEnsuite dessinez un bloc sur la page avec cet outil seacutelectionneacute La palette Actions contient les paramegravetres suivants

Modifiez le menu Fichier Galerie et seacutelectionnez le document Showcase que nous avons creacuteeacute preacuteceacutedemment La galerie va alors se charger automatiquementModifiez les paramegravetres en fonction de vos besoins Vous pouvez utiliser des thegravemes preacutedeacutefinis ou encore creacuteer vos propres thegravemes en fonction de vos besoins pour les utiliser plus tardLa case agrave cocher Utiliser les reacuteglages par deacutefaut permet de revenir aux reacuteglages qui sont enregistreacutes dans le document Showcase

Ressources suppleacutementaires

Ce guide nest quune preacutesentation rapide des nouvelles fonctionnaliteacutes de la version 7 de Freeway Le logiciel eacutetant en perpeacutetuel changement voici une liste de sites ougrave vous pourrez trouver les renseignements les plus agrave jour

bull Mise agrave jour du produit Documentation et reacutefeacuterences httpwwwtri-edrecomdownloaddownloaddownloadfreewayhtml

bull Forum de discussion httpwwwtri-edrecomforum httpwwwfreewaytalknet

bull Guides videacuteos httpwwwsoftpresscomsupportusingfreeway

bull Teacuteleacutecharger des actions suppleacutementaires httpwwwactionsforgecom

44

Droits dauteur et remerciements

Copyright copy 2008 et 2014 Softpress Systems Ltd Tous droits reacuteserveacutesLe logiciel Freeway et cette documentation sont soumis aux droits dauteur Aucune partie du logiciel Freeway ne peut ecirctre reproduite transmise transcrite stockeacutee ou traduite dans une autre langue ou un langage informatique sous quelque forme et par quelque moyen que ce soit sans lautorisation eacutecrite preacutealable de Softpress Systems Ltd et de TRI-EDRE (pour la version franccedilaise) Des copies suppleacutementaires de ce guide peuvent ecirctre faites et distribueacutees agrave condition quils contiennent cet avis de droit dauteurSoftpress Systems Ltd conserve speacutecifiquement la proprieacuteteacute du logiciel Freeway Le logiciel deacutecrit dans ce manuel est fourni sous contrat de licence et ne peut ecirctre installeacute utiliseacute ou copieacute quen accord avec les termes de cette licenceSoftpress est une marque deacuteposeacutee de Softpress Systems Ltd aux Etats-Unis et dans dautres pays Freeway est une marque deacuteposeacutee de Softpress Systems Ltd qui peut ecirctre deacuteposeacutee dans certains pays Apple Macintosh Power Macintosh le logo Universal et le logo Mac sont des marques deacuteposeacutees dApple Computer Inc Tous les autres noms de produits sont des marques commerciales ou des marques deacuteposeacutees de leurs proprieacutetaires respectifs

Limitation de responsabiliteacute

Les informations contenues dans ce guide sont consideacutereacutees comme eacutetant correctes agrave la date de publication Cependant notre politique est de poursuivre le deacuteveloppement et linformation dans ce guide est sujette agrave changement sans preacuteavis et ne constitue pas un engagement de la part de Softpress Systems Ltd

Agrave propos de ce guide

Ce guide dutilisation de Freeway explique certains des concepts sous-jacents de Freeway Il vous fera deacutecouvrir linterface intuitive les menus et les palettes que vous allez utiliser pour importer ou creacuteer des eacuteleacutements graphiques et ajouter des fonctionnaliteacutes webIl y a aussi un tutoriel eacutetape par eacutetape dans lequel vous allez concevoir et produire facilement et rapidement un site web avec Freeway Vous verrez combien il est facile de faire un site web multi-pages avec des graphiques du texte et des liensCe guide couvre lutilisation de Freeway Express et de Freeway Pro Les deux versions fonctionnent essentiellement de la mecircme faccedilon mais Freeway Pro inclut de nombreuses fonctionnaliteacutes puissantes suppleacutementaires Lorsque les meacutethodes de travail sont sensiblement diffeacuterentes elles sont mises en eacutevidence dans ce manuelDe plus amples informations sur le travail avec Freeway se trouvent sur le site Web SoftpressTrois films de tutoriel mentionneacutes dans ce guide peuvent ecirctre trouveacutes agrave httpwwwsoftpresscomsupporttutorialshtml ougrave ils sont appeleacutes Getting Started with Freeway Veuillez noter que certains des films plus anciens ont eacuteteacute faits en utilisant Freeway 5 ou 6 mais ils sont encore tregraves pertinents

Configuration requise

Freeway Pro ou Express neacutecessite un Mac Intel avec Mac OS X 106 (Snow Leopard) ou supeacuterieur

2





3






Tutoriels 15

Tutoriel 1 15

4







5



Actions Freeway 35








6





7










8


Le World Wide Web







9





10










11




12


Tour rapide















13











14



Tutoriel 1









15























16
























17










deacutecalage




















18














19











20









21




















22


















23


















24
























25






26








27

























28

























29




























30



31
















32













33







34


Actions Freeway









35


Texte grossi 3 fois






36










37









38










39






40








41









42

Longlet Apparence







43










44





3






Tutoriels 15

Tutoriel 1 15

4







5



Actions Freeway 35








6





7










8


Le World Wide Web







9





10










11




12


Tour rapide















13











14



Tutoriel 1









15























16
























17










deacutecalage




















18














19











20









21




















22


















23


















24
























25






26








27

























28

























29




























30



31
















32













33







34


Actions Freeway









35


Texte grossi 3 fois






36










37









38










39






40








41









42

Longlet Apparence







43










44






Tutoriels 15

Tutoriel 1 15

4







5



Actions Freeway 35








6





7










8


Le World Wide Web







9





10










11




12


Tour rapide















13











14



Tutoriel 1









15























16
























17










deacutecalage




















18














19











20









21




















22


















23


















24
























25






26








27

























28

























29




























30



31
















32













33







34


Actions Freeway









35


Texte grossi 3 fois






36










37









38










39






40








41









42

Longlet Apparence







43










44







5



Actions Freeway 35








6





7










8


Le World Wide Web







9





10










11




12


Tour rapide















13











14



Tutoriel 1









15























16
























17










deacutecalage




















18














19











20









21




















22


















23


















24
























25






26








27

























28

























29




























30



31
















32













33







34


Actions Freeway









35


Texte grossi 3 fois






36










37









38










39






40








41









42

Longlet Apparence







43










44



Actions Freeway 35








6





7










8


Le World Wide Web







9





10










11




12


Tour rapide















13











14



Tutoriel 1









15























16
























17










deacutecalage




















18














19











20









21




















22


















23


















24
























25






26








27

























28

























29




























30



31
















32













33







34


Actions Freeway









35


Texte grossi 3 fois






36










37









38










39






40








41









42

Longlet Apparence







43










44





7










8


Le World Wide Web







9





10










11




12


Tour rapide















13











14



Tutoriel 1









15























16
























17










deacutecalage




















18














19











20









21




















22


















23


















24
























25






26








27

























28

























29




























30



31
















32













33







34


Actions Freeway









35


Texte grossi 3 fois






36










37









38










39






40








41









42

Longlet Apparence







43










44










8


Le World Wide Web







9





10










11




12


Tour rapide















13











14



Tutoriel 1









15























16
























17










deacutecalage




















18














19











20









21




















22


















23


















24
























25






26








27

























28

























29




























30



31
















32













33







34


Actions Freeway









35


Texte grossi 3 fois






36










37









38










39






40








41









42

Longlet Apparence







43










44


Le World Wide Web







9





10










11




12


Tour rapide















13











14



Tutoriel 1









15























16
























17










deacutecalage




















18














19











20









21




















22


















23


















24
























25






26








27

























28

























29




























30



31
















32













33







34


Actions Freeway









35


Texte grossi 3 fois






36










37









38










39






40








41









42

Longlet Apparence







43










44





10










11




12


Tour rapide















13











14



Tutoriel 1









15























16
























17










deacutecalage




















18














19











20









21




















22


















23


















24
























25






26








27

























28

























29




























30



31
















32













33







34


Actions Freeway









35


Texte grossi 3 fois






36










37









38










39






40








41









42

Longlet Apparence







43










44










11




12


Tour rapide















13











14



Tutoriel 1









15























16
























17










deacutecalage




















18














19











20









21




















22


















23


















24
























25






26








27

























28

























29




























30



31
















32













33







34


Actions Freeway









35


Texte grossi 3 fois






36










37









38










39






40








41









42

Longlet Apparence







43










44




12


Tour rapide















13











14



Tutoriel 1









15























16
























17










deacutecalage




















18














19











20









21




















22


















23


















24
























25






26








27

























28

























29




























30



31
















32













33







34


Actions Freeway









35


Texte grossi 3 fois






36










37









38










39






40








41









42

Longlet Apparence







43










44


Tour rapide















13











14



Tutoriel 1









15























16
























17










deacutecalage




















18














19











20









21




















22


















23


















24
























25






26








27

























28

























29




























30



31
















32













33







34


Actions Freeway









35


Texte grossi 3 fois






36










37









38










39






40








41









42

Longlet Apparence







43










44











14



Tutoriel 1









15























16
























17










deacutecalage




















18














19











20









21




















22


















23


















24
























25






26








27

























28

























29




























30



31
















32













33







34


Actions Freeway









35


Texte grossi 3 fois






36










37









38










39






40








41









42

Longlet Apparence







43










44