Navigation FAST Pack Guide d’Utilisation Introduction Qu’est-ce que le Navigation Pack? Le Navigation FAST pack est un ensemble de quatre Actions Freeway permettant de créer facilement des fonctions de navigation complexes, qui autrement prendraient beaucoup de temps et seraient difficiles à créer et à faire évoluer. Actions Navigation Il y a quatre Actions Navigation : Menu Bar (Barre de menu)—Crée des barres de menu avec menus déroulants. Navigation Map (Plan de navigation)—Crée des cartes hiérarchiques de navigation. Navigation Bar (Barre de navigation)—Génère automatiquement une barre de menu de navigation, éventuellement avec des menus déroulants. Site Map (Plan du site)—Génère automatiquement un plan de votre site hiérarchisé. Comment installer Le Navigation FAST pack est installé en lançant le Navigation FAST pack installer. Activation Les Actions du Navigation FAST pack nécessitent une clé FAST d’activation appropriée pour pouvoir être utilisées. Lors de l’utilisation de la première action, la palette Actions affiche un message indiquant qu’une clé est requise. Un bouton vous permet d’entrer votre clé FAST, pour activer les Actions Navigation. Vous devez donc tout d’abord utiliser une Action Navigation (n’importe laquelle), par exemple en suivant les étapes ci-dessous : 1 Tracez un bloc HTML. 2 Attachez une action Navigation Map au bloc, soit en sélectionnant l’action dans le sous-menu Actions du menu Bloc, soit en cliquant sur l’icône Ajouter une Action dans la palette Actions et en sélectionnant l’action de Navigation dans la liste. 3 Dans la palette Actions, si le message “Action Disabled” (Action désactivée) apparaît, cliquez sur le bouton et entrez votre clé. Si le message n’est pas affiché, votre Navigation FAST Pack est déjà activé La clé Navigation Pack FAST Key vous a été envoyée par email lors de votre achat. Sélectionnez le texte, en incluant le caractère “<” au début, et “>” à la fin. Cliquez le bouton Enter Key dans la palette Actions et collez la clé dans le dialogue affiché. Cliquez sur le bouton OK et votre FAST Pack doit être activé. Si vous n’avez pas reçu de clé Navigation Pack FAST Key, ou si vous ne pouvez pas activer le Navigation FAST Pack, veuillez nous contacter à support@tri-edre.fr. Menu Bar (Barre de menu) Que fait l’action Menu Bar ? L’action Menu Bar permet la création de barres de menu qui s’ouvrent lorsque la souris survole les titres de menu dans le navigateur. Une barre de menu Un menu ouvert Si la souris descend dans le menu, le visiteur de votre site peut sélectionner un élément du menu pour naviguer vers d’autres pages dans le navigateur. Un menu avec un élément sélectionné L’action Menu Bar permet la création de menus hiérarchiques, comportant des sousmenus affichés lorsque la souris survole le titre du sous-menu. Un menu hiérarchique L’utilisation de barres de menu dans votre site Web permet une navigation aisée tout en occupant un minimum de place à l’écran. Mots clé Barre de menu (Menu bar) Une barre contenant les titres de menu. Zone de titres La partie de la Barre de menu contenant les titres de chaque menu. Titre Menu Le titre ou le nom d’un menu. Quand la souris passe sur un Titre menu le menu correspondant s’ouvre. Menu Une liste d’éléments apparaissant quand le menu est ouvert. Il y a en général des Eléments de menu pour chaque titre de la Barre de menu. Elément de menu Chaque menu est composé d’éléments de menu, qui sont typiquement du texte avec un lien. Usuellement, lorsque l’utilisateur sélectionne un élément, le navigateur suit un hyperlien vers une autre page. Sous-menu Un Menu attaché à un élément de menu dans un autre menu. Le Sous-menu s’ouvre quand l’utilisateur place la souris sur cet élément et se ferme lorsque la souris est déplacée hors de l’élément. Tableau de barre de menu Le tableau tracé dans Freeway auquel l’action Barre de menu est attachée. Le contenu et la structure de ce tableau forme la Barre de menu (Menu Bar). Tableau des éléments du menu Le tableau tracé dans Freeway qui contient le texte utilisé pour les éléments du menu. Créer une Barre de menu (Menu Bar) Une Barre de menu est créée à partir d’un tableau auquel est appliquée une Action Barre de menu (Menu Bar). C’est le Tableau de barre de menu. Le contenu de ce tableau (généralement du texte) forme les titres du menu, alors que les attributs du tableau (position, couleur, espacement, etc.) contrôlent l’apparence de la Zone de titres (voir le chapitre “Tableaux” dans le manuel de Freeway). 1 Tracez un tableau avec une rangée et deux (ou plus) colonnes dans Freeway. Ce sera le Tableau de barre de menu. 2 Coloriez le tableau. 3 Entrez du texte dans chaque cellule du tableau pour les titres du menu. Note : il est en général préférable d’utiliser un mot unique pour chaque titre d’un menu horizontal. 4 Affectez éventuellement un style pour le texte. Astuce : pour assurer une uniformité, créez un style que vous utiliserez pour chaque texte de votre barre de menu. 5 Sélectionnez le tableau et dans la palette Spécifications, réglez espacement, retrait et épaisseur à zéro. Note : la sélection de tableau sans bords peut être délicat. Vous pouvez le faire avec un Command-clic sur une cellule du tableau, puis Command-Option-clic sur la cellule sélectionnée. 6 Attachez une Action Barre de menu (Menu Bar) au tableau, soit avec le sous-menu Actions du menu Bloc, soit avec la palette Actions. Note : cette Action ne fonctionne que dans des pages HTML 4. Vous pouvez changer le format de la page dans la palette Spécifications. 7 Dans la palette Actions définissez les couleurs pour Link (Lien), Hover (Survol) et Highlight (Sélection). Link définit la couleur du texte dans la Barre de menu au repos. Les couleurs Hover et Highlight définissent les couleurs du texte et de la cellule quand la souris survole un titre de la Barre de menu. 8 Pour voir votre Barre de menu, vous devez prévisualiser votre page dans le navigateur. Note : pour que vos visiteurs puissent naviguer à l’aide de votre barre de menu, attachez des hyperliens au texte du tableau. Voir la création des hyperliens dans le manuel de Freeway. Création de menus déroulants Les menus déroulants sont créés avec le texte entré dans un second tableau (le Tableau des éléments du menu), qui est connecté à la Barre de menu. 1 Créez une Barre de menu comme décrit précédemment. 2 Tracez un tableau avec une seule rangée et le même nombre de colonnes que la Barre de menu. C’est votre Tableau des éléments du menu. Il va contenir les éléments du menu. Astuce : mettez le Tableau des éléments du menu hors de votre page pour ne pas modifier votre mise en page. 3 Dans la palette Spécifications, nommez le tableau “MyItems” (par exemple) pour qu’il soit facile à identifier. 4 Entrez du texte dans les deux colonnes de votre Tableau des éléments du menu pour vos éléments du menu. La colonne 1 de votre Tableau des éléments du menu correspond à la colonne 1 du menu. Chaque élément d’un menu est défini par un paragraphe du texte dans la cellule. Ainsi, pour définir les différents éléments du premier menu, entrez chaque texte séparé par un Retour dans la cellule de la première colonne. Faites de même pour la colonne 2. 5 Ajoutez les hyperliens pour chaque élément du menu. 6 Dans la palette Actions sélectionnez le tableau de barre de menu avec le menu déroulant, pour établir la connexion entre les tires du menu et les éléments du menu. Note : le menu déroulant liste par leur nom tous les tableaux qui n’ont pas d’action Barre de menu associée. Il est donc judicieux de nommer votre Tableau des éléments du menu dans la palette Spécifications. 7 Dans la palette Actions, définissez les différentes couleurs des éléments du menu. 8 Choisissez une apparence pour les menus de votre Barre de menu. 9 Prévisualisez votre menu. Créer des menus hiérarchiques Les sous-menus sont définis en ajoutant un caractère de marque spécial, “+” (signe plus), en début du texte dans le Tableau des éléments du menu qui doit apparaître dans un sous-menu. L’Action détecte ces caractères pendant la publication et génère un menu hiérarchique pour ces éléments. 1 Créez une Barre de menu avec des éléments de menu. 2 Dans le Tableau des éléments du menu, mettez un “+” devant les éléments qui doivent apparaître dans un sous-menu. Voici un exemple du tableau et du résultat obtenu dans le navigateur. 3 Si vous avez besoin de plusieurs niveaux de sous-menus, vous utilisez des “+” additionnels (par exemple “++” pour un sous-sous-menu). Il est possible d’avoir autant de niveaux que désiré. Attention : les sous-menus apportent souvent de la confusion pour vos visiteurs. Il est conseillé de limiter l’emploi des sous-menus, et encore plus des sous-sous-menus. 4 Prévisualisez dans un navigateur. Utilisation de vos propres images L’action Barre de menu (Menu Bar) fournit plusieurs apparences prédéfinies pour le fond et les flèches utilisés dans les Menus. Vous pouvez aussi utiliser vos propres images. 1 Créez une Barre de menu avec des éléments. 2 Dans le menu déroulant Apparence (Appearance), sélectionnez les fichiers personnels (Custom Files). 3 Les menus déroulants Flèche (Arrow) et Fond (Background) vous permettent de sélectionner vos propres images pour ces parties du menu. Définir un jeu d’images personnelles Si vous avez des images (fond et symbole de flèche) que vous utilisez fréquemment, vous pouvez créer un dossier et sélectionner ce dossier au lieu des fichiers individuels. 1 Créez deux images – une pour le fond du menu et une pour le symbole de la flèche. Vous devez faire des images au format GIF, JPEG ou PNG seulement. 2 Nommez ces images ainsi : Fond du menu : Flèche du menu : 3 bg.gif, bg.jpeg ou bg.png arrow.gif, arrow.jpeg ou arrow.png Dans le menu déroulant Apparence (Appearance) choisissez “Choix dossier...” (Select Folder…) et choisissez le dossier dans lequel se trouvent vos images. Menus verticaux L’action Barre de menu (Menu Bar) permet aussi de générer des barres de menu verticales. Les menus verticaux sont obtenus avec des tableaux des éléments du menu ayant une colonne et plusieurs rangées, au lieu d’une rangée et plusieurs colonnes. Note : un tableau avec une seule cellule crée un menu horizontal. Options de calque L’action Barre de menu a un jeu d’options disponible si le tableau de barre de menu est un calque (voir le manuel de Freeway). Cette option permet de générer une barre de menu occupant la pleine largeur de la page et d’aligner les titres du menu dans celle-ci. Lorsqu’appliqué à un calque, l’Action supporte ces réglages additionnels (options non disponibles dans Freeway Express, qui ne supporte pas les calques). Navigation Map (Plan de navigation) Que fait l’action Navigation Map ? L’action Navigation Map permet de créer des éléments de navigation hiérarchisés d’hyperliens qui représentent les pages et les dossiers (contenant d’autres pages et dossiers). Une fonction clé des Navigation Map est la possibilité d’ouvrir et de fermer les dossiers du plan de navigation. Navigation Map est souvent utilisé dans les cadres pour fournir un système de navigation sophistiqué pour le site. Créer un Plan de Navigation simple L’action Navigation Map est appliquée à des blocs HTML. Les dossiers et pages qui sont dans le Navigation Map sont définis par le texte se trouvant dans le bloc. 1 Tracez un bloc HTML. 2 Attachez une action Navigation Map au bloc HTML (soit par le sous-menu Actions du menu Blocs, soit avec la palette Actions). 3 Vérifiez que la palette Actions est visible. N.B. cette Action ne fonctionne que dans des pages de format HTML 4 (format de page modifiable dans la palette Spécification). 4 Entrez le texte dans le bloc. Chaque élément de plan Navigation Map est défini par un paragraphe du texte (séparé par un Retour). 5 La hiérarchie est définie en mettant un ou plusieurs signes “+” (suivant le niveau hiérarchique désiré pour chaque élément). Voici un exemple de texte et du résultat obtenu par l’action Navigation Map : 6 Réglez le style du texte. 7 Attachez des hyperliens au texte. 8 Sélectionnez le bloc HTML sur lequel l’action Navigation Map est appliquée. Choisissez l’apparence désirée dans le menu déroulant Appearance de la palette Actions. 9 Prévisualisez le résultat obtenu dans votre navigateur. Conserver l’état du menu Une personne visitant votre site peut, en cliquant sur un triangle de contrôle, ouvrir ou fermer des portions de la hiérarchie de navigation pour n’afficher que la partie intéressante. L’action Navigation Map peut préserver cet état des différentes portions ouvertes ou fermées. L’Action comporte dans ses réglages une case à cocher pour mémoriser cet état en utilisant des cookies. Note : les cookies ne sont pas forcément appréciés par vos visiteurs. Tenez-en compte avant d’activer cette fonction. Note : le système de cache des navigateurs peut interférer avec le mécanisme des cookies. Vous pouvez désactiver l’exécution des actions en cas de cache (voir manuel de Freeway). Définir un jeu d’images personnalisé Vous pouvez créer des arborescences avec vos propres graphismes, en créant des images portant un nom approprié. Voici par exemple les résultats obtenus avec les apparences prédéfinies Seattle et Glass. Il n’est pas nécessaire d’avoir toutes les images pour une apparence. Par exemple, le style “Glass” ne fait pas de différence entre les dossiers ouverts ou fermés, et il n’a pas d’image pour les coins ou les lignes. L’action Navigation Map utilise les images disponibles et substitue ou omet celles qui manquent. 1 Creéez des images GIF, JPEG ou PNG, avec la convention de noms suivante : Opener (ouverture) : opener.gif, opener.jpeg or opener.png. Closer (fermeture) : closer.gif, closer.jpeg or closer.png. End Opener (fin ouv.) : endopener.gif, endopener.jpeg or endopener.png. End Closer (fin ferm.) : endcloser.gif, endcloser.jpeg or endcloser.png. Branch (branche) : branch.gif, branch.jpeg or branch.png Corner (coin) : corner.gif, corner.jpeg or corner.png Branch (branche) : branch.gif, branch.jpeg or branch.png Folder (dossier) : folder.gif, folder.jpeg or folder.png Open Folder (dossier ouvert) : openfolder.gif, openfolder.jpeg or openfolder.png Page (page) : page.gif, page.jpeg or page.png. Note : toutes les images doivent être de la même taille pour que l’Action travaille proprement. 2 Dans le menu déroulant Apparence (Appearance) choisissez “Choix dossier...” (Select Folder…) et choisissez le dossier dans lequel se trouvent vos images. 3 Prévisualisez dans le navigateur. Navigation Bar (Barre de navigation) Que fait l’action Navigation Bar ? L’action Navigation Bar permet de créer un site avec une Barre de menu qui reflète automatiquement la structure de votre site. Pour un site ayant une structure hiérarchique, l’action Navigation Bar indique la position du visiteur dans le site, en affichant automatiquement la page courante. Si vous créez un site complexe, une telle barre de navigation aidera vos visiteur à se positionner dans le site, et à se déplacer. L’action Navigation Bar a une option pour créer les menus de navigation automatiquement. Ces menus s’ouvriront lorsque la souris survole les titres de la barre de navigation. Mots clé Navigation Bar La portion du menu visible lorsque le menu est en état de repos. Les titres du menu affichent la position courante dans le site. Menu Title (Titre menu) Le nom d’un menu. Quand la souris survole un titre, le menu correspondant s’ouvre. Menu La liste des éléments affichés lorsqu’un menu est ouvert. Menu Item (élément de menu) Chaque menu est composé d’éléments de menu. Un élément est un texte avec un lien qui permet la navigation vers une autre page. Home Item (Départ) La racine de la page d’accueil. Créer une barre de navigation L’action Navigation Bar génère son contenu à partir de la structure de votre site. L’organisation de votre site est donc important pour les résultats obtenus par cette action (voir la création de pages et de dossiers dans le manuel de Freeway). 1 Organisez votre site dans des dossiers dont les noms et la hiérarchie reflètent la structure que vous désirez présenter à vos visiteurs. 2 Dans le menu Insertion, choisissez Navigation Bar dans le sous-menu Bloc Action, ou utilisez le menu déroulant des actions dans la palette Outils, et tracez un bloc à l’endroit où vous désirez faire apparaître la barre de navigation dans la page. Astuce : dans un site important (ou ce genre d’action est le plus utile), il est judicieux de créer cette action dans une ou plusieurs maquettes. 3 Affichez la palette Actions. Note : cette action ne fonctionne que dans des pages HTML 4. Vous pouvez changer le format de la page dans la palette Spécifications. 4 Entrez le titre du point de départ (Home) dans le champ Home Title. Ce sera le nom du menu le plus à gauche de la barre. 5 Choisissez une apparence pour la barre de navigation Navigation Bar et les menus. Le menu déroulant apparence (Appearance) définit les images de fond (Background) et de flèches (Arrow) à partir de jeux prédéfinis. 6 Réglez le style du texte : police (Font), couleur (Color), taille (Size) et surlignage (Hover). 7 Visualisez la Navigation Bar dans votre navigateur. Créer une Navigation Bar avec menus 1 Créez une barre de navigation. 2 Sélectionnez le bloc Navigation Bar. Dans la palette Actions cochez la case Navigation Menus (menus de navigation). Cela fera créer des menus à l’Action lors de la publication. Avec cette option activée, des réglages de menu sont disponibles. 3 Prévisualisez dans un navigateur. L’action va créer les éléments de menu pour les dossiers et les pages. Les éléments de menu qui sont générés dans le Menu sont des hyperliens vers les pages et les dossiers se trouvant dans le même dossier parent. L’utilisateur a ainsi la sensation de suivre un lien vers une autre page en sélectionnant un élément d’un menu. Dans le cas ou un élément d’un menu correspond à un dossier, le lien va vers la page de départ (home page) de ce dossier : Soit La page de nom index.htm ou index.html Soit Une page de nom home.htm ou home.html Soit La première page du dossier. L’Action n’inclut que les pages ayant elles-même une action Navigation Menu. De même, seuls les dossiers comportant de telles pages sont inclus. Pages et dossiers apparaissent comme éléments de menu dans le même ordre que dans la palette Site de Freeway. Vous pouvez modifier l’ordre des pages et dossiers dans la palette Site. Vous pouvez modifier le texte affiché dans le menu en changeant le nom des pages et dossiers de votre site. Utilisation d’images personnalisées L’action Navigation Bar est installée avec des jeux d’images prédéfinis pour le fond et les flèches utilisés dans les menus. Vous pouvez cependant utiliser vos propres images. 1 Créez une barre de navigation avec menus. 2 Dans le menu déroulant Appearance sélectionnez Custom Files (fichiers personnalisés). 3 Les menus déroulants Arrow (Flèche) et Background (Fond) vous permettent de sélectionner des images particulières pour votre menu. Définir un jeu d’images Si vous avez des jeux d’images (fond et symbole pour les flèches) que vous utilisez fréquemment, vous pouvez créer un dossier et le sélectionner au lieu des images individuelles. 1 Créez deux images – une pour l’image de fond du menu et une pour le symbole de flèche hiérarchique. Seules les images GIF, JPEG ou PNG sont acceptées. 2 Nommez ces images ainsi : Menu Background (Fond): Menu Arrow (Flèche) : 3 bg.gif, bg.jpeg ou bg.png arrow.gif, arrow.jpeg ou arrow.png Dans le menu déroulant Apparence (Appearance) choisissez “Choix dossier...” (Select Folder…) et choisissez le dossier dans lequel se trouvent vos images. Site Map (Plan du site) Que fait l’action Site Map ? L’action Site Map génère automatiquement un plan de navigation (Navigation Map) des pages et dossiers de votre site. Avec l’action Site Map, le plan est généré automatiquement. Si vous modifiez la structure de votre site (ajouter des pages, modifier le nom des pages, etc.), le plan du site sera mis à jour automatiquement. Mots clé Folder (dossier) Un élément de navigation pouvant contenir des pages et dossiers. Open Folder (dossier ouvert) Un dossier dont le contenu est visible. Closed Folder (dossier fermé) Page Un dossier dont le contenu est caché. Une page Web. Navigational Item (élément de navigation) Une page ou dossier du Navigation Map. Disclosure Control (contrôle d’ouverture/fermeture) dossier qund on clique dessus. Home Page (Page de départ) Une image qui ouvre ou ferme le La page racine du site. Créer un plan du site L’action Site Map génère son contenu à partir de la structure de votre site. L’organisation de votre site est donc important pour les résultats obtenus par cette action (voir la création de pages et de dossiers dans le manuel de Freeway). 1 Organisez votre site dans des dossiers dont les noms et la hiérarchie reflètent la structure que vous désirez présenter à vos visiteurs. 2 Dans le menu Insertion, choisissez Site Map dans le sous-menu Bloc Action, ou utilisez le menu déroulant des actions dans la palette Outils, et tracez un bloc à l’endroit où vous désirez faire apparaître le plan dans la page. Astuce : dans un site important (ou ce genre d’action est le plus utile), il est judicieux de créer cette action dans une ou plusieurs maquettes. 3 Affichez la palette Actions. Note : cette action ne fonctionne que dans des pages HTML 4. Vous pouvez changer le format de la page dans la palette Spécifications. 4 Entrez le titre du point de départ (Home) dans le champ Home Title. Ce sera le nom du menu le plus à gauche de la barre. 5 Choisissez une apparence pour les images de votre plan du site. Le menu déroulant apparence (Appearance) définit les images à partir de jeux prédéfinis. 6 Réglez le style du texte : police (Font), couleur (Color), taille (Size) et survol (Hover). 7 Visualisez dans votre navigateur. Omettre des pages dans le plan du site Le comportement normal de l’action Site Map est de lister toutes les pages et les dossiers. L’action Site Map permet d’omettre certaines pages et dossiers dont les noms ont certain préfixe. 1 Sélectionnez l’action Site Map. Dans la palette Actions cochez la case Omit Pages and Folders (Omettre pages et dossiers), et entrez le préfixe désiré. Lors de la génératiion du plan du site, l’action Site Map passera les fichiers et dossiers dont le nom de fichier commence par ce texte. Par défaut, le préfixe est un underscore “_” (souligné), mais vous pouvez le modifier à votre convenance. 2 Pour chaque page que vous désirez omettre dans le plan du site, modifiez son nom de fichier dans la palette Spécifications. Note : l’Action regarde le nom du fichier, et non le titre de la page. 3 Faites de même pour les dossiers à omettre. Préserver l’état du plan Une personne visitant votre site peut, en cliquant sur un triangle de contrôle, ouvrir ou fermer des portions de la hiérarchie de navigation pour n’afficher que la partie intéressante. L’action Site Map peut préserver cet état des différentes portions ouvertes ou fermées. L’Action comporte dans ses réglages une case à cocher pour mémoriser cet état en utilisant des cookies. Note : les cookies ne sont pas forcément appréciés par vos visiteurs. Tenez-en compte avant d’activer cette fonction. Note : le système de cache des navigateurs peut interférer avec le mécanisme des cookies. Vous pouvez désactiver l’exécution des actions en cas de cache (voir manuel de Freeway). Définir un jeu d’images personnalisé Vous pouvez créer des arborescences avec vos propres graphismes, en créant des images portant un nom approprié. Voici par exemple les résultats obtenus avec les apparences prédéfinies Seattle et Glass. Il n’est pas nécessaire d’avoir toutes les images pour une apparence. Par exemple, le style “Glass” ne fait pas de différence entre les dossiers ouverts ou fermés, et il n’a pas d’image pour les coins ou les lignes. L’action Site Map utilise les images disponibles et substitue ou omet celles qui manquent. 1 Creéez des images GIF, JPEG ou PNG, avec la convention de noms suivante : Home (départ): Opener (ouverture) : Closer (fermeture) : home.gif, home.jpeg or home.png. opener.gif, opener.jpeg or opener.png. closer.gif, closer.jpeg or closer.png. End Opener (fin ouv.) : endopener.gif, endopener.jpeg or endopener.png. End Closer (fin ferm.) : endcloser.gif, endcloser.jpeg or endcloser.png. Branch (branche) : branch.gif, branch.jpeg or branch.png Corner (coin) : corner.gif, corner.jpeg or corner.png Branch (branche) : branch.gif, branch.jpeg or branch.png Folder (dossier) : folder.gif, folder.jpeg or folder.png Open Folder (dossier ouvert) : openfolder.gif, openfolder.jpeg or openfolder.png Page (page) : page.gif, page.jpeg or page.png. Note : toutes les images doivent être de la même taille pour que l’Action travaille proprement. 2 Dans le menu déroulant Apparence (Appearance) choisissez “Choix dossier...” (Select Folder…) et choisissez le dossier dans lequel se trouvent vos images. 3 Prévisualisez dans le navigateur. ">
Public link updated
The public link to your chat has been updated.