ManuelFreeway 6

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 pagesPour 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 wwwfreewaytalknetFreeway 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 CommunicationConsultez notre site wwwtri-edrefr pour des liens vers le forum et astuces en Franccedilais

2

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 pagesPour 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 wwwfreewaytalknetFreeway 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 CommunicationConsultez notre site wwwtri-edrefr pour des liens vers le forum et astuces en Franccedilais

2

Agrave propos de Softpress et Freeway13 5Freeway Pro et Freeway Express13 5

Premier lancement de Freeway13 5

Tutoriel 113 6Commencer et enregistrer le projet13 6

Reacuteglages des dimensions de la page et de lrsquoalignement13 6Reacutegler les dimensions de la page et son alignement13 6

Ajout drsquoune image de fond13 7Agrave propos des blocs13 7

Ajout drsquoun texte graphique13 7Importer une image13 7Importer des photos13 9Dupliquer des blocs13 9

Importer du texte13 10Preacutevisualiser votre page13 11

Tutoriel 213 12Maquettes concepts de base13 12

Le panneau Site13 12Creacuteation drsquoune maquette13 13

Nommer les pages et les fichiers13 13Travailler sur la Maquette13 13Ajouter des pages agrave un site13 14

Titres et noms des pages13 14Ajouter du contenu aux nouvelles pages13 14

Ajouter des hyperliens13 16Preacutevisualiser dans un Navigateur13 17

Tutoriel 313 18Images et hyperliens13 18

Creacuteer un menu avec Rollover13 18Creacuteer une galerie photos simple13 20

Autres types drsquoactions13 21

Showcase (Application et Action)13 22

Mise en page relative (Version Pro)13 22Travailler avec la Mise en page relative13 24

3

Autres actions de lensemble Mise en page relative13 24

Creacuteation de-mails13 24Utiliser laction Creacuteation de-mails13 24

Actions Moteur de recherche (Version Pro seulement)13 25Appliquer laction de dossier13 25

Creacuteation du formulaire de recherche13 25Affichage des reacutesultats13 26

Comment le moteur de recherche reacutefeacuterence les pages 13 26

Actions Carte du site13 27Action de dossier13 27

Envoi de la carte du site13 27Reacuteglages page par page13 27

Actions Partenaire Amazon13 27Action Lien texte Partenaires Amazon13 27

Action Partenaires Amazon sur un bloc graphique13 28Action Liens Produits Partenaire Amazon13 28

Application Showcase Creacuteation de galeries13 28Fenecirctre Principale13 29

Linspecteur13 29Enregistrement du document13 30

Laction Showcase Inteacutegration de la galerie13 31

Ressources suppleacutementaires13 31

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

4

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 productiviteacuteQuelques 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 deacutemarrageNous 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

5

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 fermeacutesLa 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

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 seacutelectionneacutePour 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

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

6

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 lisibleIl 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 navigateurLrsquooption 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 taillene 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 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

7

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

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

8

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 blocUtilisez 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 Au tour 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

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

9

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

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 preacuteceacutedentLorsque 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

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

10

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

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

11

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 maquettesCeci 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

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

12

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 Entreacutee

Vous 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

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

13

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

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

14

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

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

15

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

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

16

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

17

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

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

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

18

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 clic

La coche permet de choisir si un bloc est visible pour un eacutetat donneacutePar 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 existant

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

19

Nos 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 tidejpgraquo2 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

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

20

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 laquoNormalraquobull 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 dateVous 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

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

21

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-ci

Preacutevisualisez 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

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

22

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

Autres actions de lensemble Mise en page relative13 24

Creacuteation de-mails13 24Utiliser laction Creacuteation de-mails13 24

Actions Moteur de recherche (Version Pro seulement)13 25Appliquer laction de dossier13 25

Creacuteation du formulaire de recherche13 25Affichage des reacutesultats13 26

Comment le moteur de recherche reacutefeacuterence les pages 13 26

Actions Carte du site13 27Action de dossier13 27

Envoi de la carte du site13 27Reacuteglages page par page13 27

Actions Partenaire Amazon13 27Action Lien texte Partenaires Amazon13 27

Action Partenaires Amazon sur un bloc graphique13 28Action Liens Produits Partenaire Amazon13 28

Application Showcase Creacuteation de galeries13 28Fenecirctre Principale13 29

Linspecteur13 29Enregistrement du document13 30

Laction Showcase Inteacutegration de la galerie13 31

Ressources suppleacutementaires13 31

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

4

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 productiviteacuteQuelques 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 deacutemarrageNous 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

5

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 fermeacutesLa 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

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 seacutelectionneacutePour 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

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

6

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 lisibleIl 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 navigateurLrsquooption 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 taillene 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 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

7

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

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

8

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 blocUtilisez 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 Au tour 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

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

9

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

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 preacuteceacutedentLorsque 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

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

10

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

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

11

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 maquettesCeci 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

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

12

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 Entreacutee

Vous 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

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

13

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

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

14

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

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

15

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

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

16

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

17

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

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

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

18

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 clic

La coche permet de choisir si un bloc est visible pour un eacutetat donneacutePar 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 existant

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

19

Nos 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 tidejpgraquo2 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

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

20

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 laquoNormalraquobull 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 dateVous 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

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

21

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-ci

Preacutevisualisez 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

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

22

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

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 productiviteacuteQuelques 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 deacutemarrageNous 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

5

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 fermeacutesLa 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

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 seacutelectionneacutePour 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

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

6

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 lisibleIl 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 navigateurLrsquooption 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 taillene 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 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

7

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

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

8

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 blocUtilisez 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 Au tour 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

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

9

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

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 preacuteceacutedentLorsque 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

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

10

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

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

11

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 maquettesCeci 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

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

12

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 Entreacutee

Vous 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

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

13

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

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

14

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

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

15

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

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

16

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

17

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

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

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

18

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 clic

La coche permet de choisir si un bloc est visible pour un eacutetat donneacutePar 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 existant

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

19

Nos 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 tidejpgraquo2 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

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

20

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 laquoNormalraquobull 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 dateVous 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

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

21

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-ci

Preacutevisualisez 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

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

22

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

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 fermeacutesLa 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

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 seacutelectionneacutePour 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

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

6

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 lisibleIl 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 navigateurLrsquooption 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 taillene 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 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

7

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

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

8

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 blocUtilisez 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 Au tour 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

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

9

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

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 preacuteceacutedentLorsque 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

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

10

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

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

11

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 maquettesCeci 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

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

12

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 Entreacutee

Vous 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

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

13

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

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

14

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

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

15

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

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

16

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

17

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

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

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

18

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 clic

La coche permet de choisir si un bloc est visible pour un eacutetat donneacutePar 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 existant

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

19

Nos 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 tidejpgraquo2 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

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

20

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 laquoNormalraquobull 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 dateVous 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

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

21

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-ci

Preacutevisualisez 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

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

22

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

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 lisibleIl 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 navigateurLrsquooption 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 taillene 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 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

7

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

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

8

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 blocUtilisez 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 Au tour 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

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

9

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

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 preacuteceacutedentLorsque 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

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

10

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

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

11

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 maquettesCeci 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

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

12

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 Entreacutee

Vous 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

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

13

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

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

14

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

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

15

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

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

16

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

17

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

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

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

18

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 clic

La coche permet de choisir si un bloc est visible pour un eacutetat donneacutePar 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 existant

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

19

Nos 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 tidejpgraquo2 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

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

20

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 laquoNormalraquobull 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 dateVous 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

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

21

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-ci

Preacutevisualisez 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

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

22

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

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

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

8

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 blocUtilisez 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 Au tour 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

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

9

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

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 preacuteceacutedentLorsque 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

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

10

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

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

11

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 maquettesCeci 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

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

12

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 Entreacutee

Vous 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

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

13

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

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

14

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

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

15

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

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

16

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

17

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

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

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

18

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 clic

La coche permet de choisir si un bloc est visible pour un eacutetat donneacutePar 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 existant

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

19

Nos 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 tidejpgraquo2 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

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

20

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 laquoNormalraquobull 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 dateVous 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

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

21

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-ci

Preacutevisualisez 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

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

22

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

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 blocUtilisez 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 Au tour 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

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

9

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

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 preacuteceacutedentLorsque 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

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

10

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

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

11

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 maquettesCeci 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

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

12

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 Entreacutee

Vous 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

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

13

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

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

14

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

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

15

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

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

16

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

17

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

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

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

18

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 clic

La coche permet de choisir si un bloc est visible pour un eacutetat donneacutePar 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 existant

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

19

Nos 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 tidejpgraquo2 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

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

20

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 laquoNormalraquobull 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 dateVous 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

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

21

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-ci

Preacutevisualisez 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

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

22

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

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

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 preacuteceacutedentLorsque 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

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

10

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

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

11

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 maquettesCeci 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

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

12

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 Entreacutee

Vous 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

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

13

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

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

14

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

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

15

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

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

16

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

17

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

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

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

18

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 clic

La coche permet de choisir si un bloc est visible pour un eacutetat donneacutePar 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 existant

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

19

Nos 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 tidejpgraquo2 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

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

20

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 laquoNormalraquobull 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 dateVous 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

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

21

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-ci

Preacutevisualisez 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

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

22

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

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

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

11

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 maquettesCeci 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

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

12

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 Entreacutee

Vous 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

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

13

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

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

14

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

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

15

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

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

16

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

17

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

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

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

18

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 clic

La coche permet de choisir si un bloc est visible pour un eacutetat donneacutePar 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 existant

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

19

Nos 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 tidejpgraquo2 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

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

20

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 laquoNormalraquobull 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 dateVous 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

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

21

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-ci

Preacutevisualisez 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

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

22

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

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 maquettesCeci 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

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

12

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 Entreacutee

Vous 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

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

13

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

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

14

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

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

15

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

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

16

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

17

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

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

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

18

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 clic

La coche permet de choisir si un bloc est visible pour un eacutetat donneacutePar 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 existant

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

19

Nos 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 tidejpgraquo2 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

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

20

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 laquoNormalraquobull 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 dateVous 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

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

21

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-ci

Preacutevisualisez 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

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

22

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

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 Entreacutee

Vous 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

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

13

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

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

14

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

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

15

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

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

16

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

17

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

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

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

18

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 clic

La coche permet de choisir si un bloc est visible pour un eacutetat donneacutePar 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 existant

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

19

Nos 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 tidejpgraquo2 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

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

20

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 laquoNormalraquobull 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 dateVous 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

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

21

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-ci

Preacutevisualisez 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

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

22

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

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

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

14

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

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

15

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

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

16

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

17

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

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

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

18

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 clic

La coche permet de choisir si un bloc est visible pour un eacutetat donneacutePar 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 existant

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

19

Nos 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 tidejpgraquo2 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

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

20

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 laquoNormalraquobull 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 dateVous 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

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

21

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-ci

Preacutevisualisez 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

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

22

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

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

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

15

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

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

16

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

17

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

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

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

18

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 clic

La coche permet de choisir si un bloc est visible pour un eacutetat donneacutePar 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 existant

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

19

Nos 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 tidejpgraquo2 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

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

20

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 laquoNormalraquobull 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 dateVous 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

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

21

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-ci

Preacutevisualisez 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

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

22

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

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

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

16

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

17

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

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

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

18

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 clic

La coche permet de choisir si un bloc est visible pour un eacutetat donneacutePar 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 existant

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

19

Nos 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 tidejpgraquo2 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

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

20

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 laquoNormalraquobull 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 dateVous 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

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

21

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-ci

Preacutevisualisez 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

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

22

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

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

17

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

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

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

18

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 clic

La coche permet de choisir si un bloc est visible pour un eacutetat donneacutePar 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 existant

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

19

Nos 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 tidejpgraquo2 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

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

20

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 laquoNormalraquobull 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 dateVous 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

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

21

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-ci

Preacutevisualisez 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

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

22

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

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

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

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

18

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 clic

La coche permet de choisir si un bloc est visible pour un eacutetat donneacutePar 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 existant

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

19

Nos 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 tidejpgraquo2 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

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

20

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 laquoNormalraquobull 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 dateVous 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

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

21

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-ci

Preacutevisualisez 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

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

22

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

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 clic

La coche permet de choisir si un bloc est visible pour un eacutetat donneacutePar 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 existant

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

19

Nos 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 tidejpgraquo2 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

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

20

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 laquoNormalraquobull 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 dateVous 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

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

21

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-ci

Preacutevisualisez 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

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

22

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

Nos 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 tidejpgraquo2 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

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

20

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 laquoNormalraquobull 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 dateVous 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

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

21

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-ci

Preacutevisualisez 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

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

22

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

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 laquoNormalraquobull 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 dateVous 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

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

21

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-ci

Preacutevisualisez 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

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

22

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

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-ci

Preacutevisualisez 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

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

22

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

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 CSSDeacutesormais 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

23

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

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-mailsDe 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

24

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

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 documentgtTransfert

Entrez 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 Inspecteur

Mecircme 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 droite

25

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

Maintenant 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 InspecteurLe 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

26

Actions Carte du siteLes 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

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 AmazonLe 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

27

Actions Carte du siteLes 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

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 AmazonLe 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

27

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 galeriesLapplication Showcase est preacutesente dans le dossier Freeway 55 Cliquez deux fois sur son icocircne pour la lancer

28

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 images

29

Longlet 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

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 arrondisReflet 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

30

Laction Showcase Inteacutegration de la galerieNous 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 suppleacutementairesCe guide nest quune preacutesentation rapide des nouvelles fonctionnaliteacutes de la version 6 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-edrecomforumhttpwwwfreewaytalknet

bull Guides videacuteos httpwwwsoftpresscomsupportusingfreeway

bull Teacuteleacutecharger des actions suppleacutementaires httpwwwactionsforgecom

31

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 images

29

Longlet 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

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 arrondisReflet 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

30

Laction Showcase Inteacutegration de la galerieNous 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 suppleacutementairesCe guide nest quune preacutesentation rapide des nouvelles fonctionnaliteacutes de la version 6 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-edrecomforumhttpwwwfreewaytalknet

bull Guides videacuteos httpwwwsoftpresscomsupportusingfreeway

bull Teacuteleacutecharger des actions suppleacutementaires httpwwwactionsforgecom

31