▼
Scroll to page 2
of
84
Freeway Référence Préface Copyright et remerciements Contacts Ce guide concerne Freeway Pro 4.0. Vous pouvez contacter TRI-EDRE, le distributeur de la version française de Freeway, aux coordonnées ci-dessous : Copyright © 1997-2005 Softpress Systems Ltd. Tous droits réservés. Le logiciel Freeway et sa documentation sont protégés par le droit d'auteur. Aucune partie du logiciel Freeway ne peut être reproduite, transmise, transcrite, stockée dans un système de récupération ou traduite dans n'importe quelle langue, ou dans tout langage informatique, sous toute forme et sous tout moyen sans l'autorisation écrite expresse de Softpress Systems Ltd. Des copies additionnelles de ce guide peuvent être faites et distribuées à la condition qu'elles incluent cette note de copyright. Softpress Systems Ltd se réserve spécifiquement tous les droits sur tous les logiciels Freeway. Le logiciel décrit dans ce guide est fourni sous licence d'agrément et ne peut être installé, utilisé ou copié qu'en accord avec les termes de cet agrément. Softpress est une marque commerciale de Softpress Systems Ltd aux États-Unis et autres pays. Freeway est une marque commerciale de Softpress Systems Ltd, qui peut être déposée dans certains pays. Apple, Macintosh, Power Macintosh et le logo Mac Logo sont des marques déposées de Apple Computer Inc. Tous les autres noms de produits sont des marques ou des marques déposées de leurs propriétaires respectifs. Limitation de garantie Les informations de ce guide sont censées être correctes à la date de publication. Cependant, de par le développement continu de ce produit, les informations de ce guide peuvent être modifiées sans préavis et ne représentent aucun engagement de la part de Softpress Systems Ltd. Ce guide a été conçu et produit par Human-Computer Interface Ltd, http://www.interface.co.uk/. La version française est réalisée par TRI-EDRE. ii TRI-EDRE SARL 22 Place de l'Église BP 111 83510 LORGUES (France) Tél. : (+33) 04 98 10 10 50 Fax : (+33) 04 98 10 10 55 Web : http://www.tri-edre.fr/ Email : [email protected] Contact de Softpress Systems Ltd (United Kingdom) Tél. : (+44) 1993 882588 - Fax : (+44) 1993 883970 Web : http://www.softpress.com/ - Email : [email protected] 1 Préférences Réglages du document 2 4 Utilisation de la palette Cadres Éditer des pages avec cadres Spécifier la mise en page de pages basées sur des cadres Créer des hyperliens dans des pages avec cadres 57 57 60 63 Outils et palettes 11 Personnaliser le HTML 65 Barre d'outils Outils Palettes Palette Inspecteur Palette Inspecteur – Réglages Palette Inspecteur – Réglages Palette Inspecteur – Réglages Palette Inspecteur – Réglages Palette Inspecteur – Réglages Palette Inspecteur – Réglages Palette Styles et Couleurs Palette Cadres Palette Actions 12 13 15 15 16 18 28 36 37 39 42 43 43 Inclure des Meta Tags (balises meta) Ajouter du HTML personnalisé à votre site Référencer un contenu externe 66 67 69 Raccourcis clavier 73 Menu Freeway Menu Fichier Menu Édition Menu Page Menu Bloc Menu Style Menu Insertion Menu Affichage Menu Fenêtre Sélection et édition de texte 74 74 74 75 75 75 76 76 77 77 Blocs Graphiques Tableaux 78 78 79 Boîtes de dialogue et palettes Contrôle du Zoom Caractères de texte spéciaux Général 79 80 80 80 de page de bloc de texte des cellules de tableaux des jeux de cadres des éléments de formulaire Options avancées 45 Importer des fichiers HTML et texte Blocs flexibles Jeux de polices Chaîner des blocs HTML ou graphiques 46 46 48 50 Utiliser des cadres 53 Qu'est-ce que les cadres ? 54 Pourquoi est-ce que l'utilisation de cadres n'est plus recommandée ? 55 Concevoir avec des cadres 56 Table des matières Préférences iii Préface Conventions Pour éviter toute ambiguïté, ce guide adopte les conventions typographiques suivantes : Convention Signification Gras Identifie un nom ou un label apparaissant sur l'écran de l'ordinateur. Exemple : Cliquez sur le bouton OK. Computer Identifie un texte entré sur le clavier de l'ordinateur. CONTROL, ALT, COMMAND, RETOUR, SHIFT Représente les touches spéciales du clavier : Control, Option (ou Alt), Command, Return et Shift (Majuscule). À propos de la documentation Freeway Premiers pas avec Freeway Le guide Premiers pas avec Freeway est l'endroit idéal pour commencer à apprendre comment tirer le meilleur de Freeway. Il inclut un aperçu des fonctions et des apports uniques de Freeway, des informations sur la création et la publication de votre site sur le Web, une visite guidée des principales fonctions de Freeway, et un ensemble de trois tutoriels qui vous montreront comment utiliser Freeway pour créer des sites Web étonnants. Utiliser Freeway Le guide Utiliser Freeway fournit des instructions claires et progressives pour utiliser les principales fonctions de Freeway, y compris comment régler, prévisualiser et publier un site, comment travailler avec des pages, du texte, des images, des tableaux et des formulaires, et comment créer des effets dynamiques. Ce guide est conçu pour vous aider à traduire votre vision dans un site Web complet et pleinement fonctionnel. iv Freeway Référence Le guide Freeway Référence est destiné aux utilisateurs avancés de Freeway, et fournit des informations détaillées sur les fonctions avancées de la conception Web qui ne sont pas nécessaires à tous les utilisateurs. Il fournit aussi des informations sur la migration de sites existants créés avec d'autres programmes, et un résumé des Préférences de Freeway, des palettes et des raccourcis clavier. Aide en ligne Freeway comporte une aide en ligne contextuelle exhaustive que vous pouvez utiliser à tout moment pour trouver des informations sur les fonctions que vous êtes en train d'utiliser. Cette aide comporte les mêmes informations que les guides Utiliser Freeway et Freeway Référence. La base de connaissances Le site Softpress propose une base de connaissances avancée contenant une vaste gamme d'informations sur chaque aspect de l'utilisation de Freeway, y compris des notes techniques sur des fonctions spécifiques, des tutoriels illustrant comment réaliser des effets particuliers, des réponses aux questions les plus fréquentes, et des exemples de sites créés par des concepteurs utilisant Freeway. La base de connaissance contient des fonctions de recherche, et est mise à jour chaque semaine pour répondre à toutes les questions que peuvent se poser les utilisateurs de Freeway. Note : la base de connaissances sur le site de Softpress est en anglais. Réglages du document. Préférences Ce chapitre décrit les options de la boîte de dialogue Préférences que vous utilisez pour personnaliser le fonctionnement de Freeway, et les options spécifiques au document dans la boîte de dialogue Préférences Préférences Les options du dialogue Préférences affectent l'environnement de travail de tous les documents. Pour afficher la boîte de dialogue Préférences • Ouvrir le menu Freeway et choisir Préférences…. • Cliquer sur une des icônes dans la barre d'icônes pour afficher le panneau des préférences correspondant. Général Fournit les options générales des préférences. 2 Ces options sont résumées dans le tableau ci-dessous : Option Description Pas du déplacement Spécifie le pas de déplacement des objets avec les touches flèches. Sauvegardes Spécifie si Freeway doit effectuer une sauvegarde de votre document quand vous l'ouvrez, avec l'extension .fwbackup. Comportement ancienne sélection Active le comportement des anciennes versions de Freeway lors de la sélection d'objets. AppleScript dans les Actions Autorise la possibilité de lancer des AppleScripts dans les Actions Freeway. Palettes magnétiques Colle automatiquement les palettes de Freeway les unes aux autres pour les ranger proprement. Ajuster la taille des blocs ayant un contour Modifie la taille des blocs graphiques et HTML lors de l'ajout d'un contour, pour conserver la même taille intérieure. Afficher les balises d'aide Affiche une aide contextuelle quand la souris pointe sur les contrôles et les boutons. Apparence Accède aux options concernant le texte dans la fenêtre de Freeway : Ce panneau vous permet de changer les couleurs utilisées pour identifier chaque type de bloc : Option Description Taille mini pour lissage Spécifie la taille minimale pour appliquer le lissage aux textes graphiques. Couleur des caractères invisibles Spécifie la couleur utilisée pour afficher les caractères invisibles, comme les espaces et les retours chariot. Option Description Blocs graphiques Spécifie la couleur du contour des blocs graphiques. Blocs positionnés par tableau Spécifie la couleur du contour des blocs HTML n'étant pas dans des calques. Blocs positionnés Spécifie la couleur du contour des blocs HTML par CSS dans des calques. Zone cliquable Spécifie la couleur du contour des blocs de zone cliquable. Rétablir Restaure les couleurs à leurs valeurs par défaut. Préférences Texte 3 Préférences Grilles & Guides Accède aux options relatives aux lignes des guides et des grilles : Pour spécifier les grilles et les marges d'une maquette ou d'une page de document, utilisez la commande Grille… du menu Page. Réglages du document Les options du dialogue Réglages du document permettent de modifier les réglages du document courant et les sorties générées lors de la publication du site. Pour afficher le dialogue Réglages du document • Ouvrir le menu Fichier et choisir Réglages du document…. • Cliquer sur l'onglet approprié pour afficher la page de réglages désirée. Pour modifier les réglages d'un document particulier, ouvrir ce document et choisir Réglages du document…. Pour modifier les réglages par défaut appliqués à tout nouveau document, choisir Réglages du document… lorsqu'aucun document n'est ouvert dans Freeway. 4 Option Description Couleur de grille Spécifie la couleur des lignes de grille. Pas grille magnétique Spécifie la distance d'action du magnétisme, par rapport à la grille, en pixels. Couleur du guide Horizontal/Vertical Spécifie les couleurs du guide horizontal et du guide vertical. Cochez Lier pour leur donner la même couleur. Couleur marge Spécifie la couleur des marges. Pas guide magnétique Spécifie la distance d'action du magnétisme, par rapport aux guides, en pixels. Option Description Accès à la taille des pages et à l'emplacement des fichiers Freeway : Fichier image Spécifie la profondeur de couleurs pour les images enregistrées dans le document Freeway : 256 couleurs donne la taille la plus réduite pour le document Freeway. Préférences Document Millions de couleurs enregistre les images avec la meilleure qualité dans le document Freeway, ce qui permet de générer les images du site avec la meilleure qualité si les images originales ne sont plus disponibles. Option Description Taille par défaut Spécifie la taille par défaut des pages de votre site. Vous pouvez choisir une des tailles prédéfinies dans le menu déroulant, ou Personnalisé si vous préférez une Largeur et une Hauteur spécifique. Hauteur/Largeur Taille explicite des pages. Dossier site Cliquez sur Choisir… pour indiquer l'emplacement du dossier où Freeway rangera les fichiers HTML et autres ressources lors de la publication du site. Largeur table de montage Spécifie la zone utilisable pour le montage, autour de la page. 5 Préférences Sortie Option Fournit les options affectant le HTML généré et le nom des fichiers créés lors de la publication du site : HTML par défaut Spécifie le standard HTML généré par défaut par Freeway. Description 3.2 offre la meilleure compatibilité avec les anciens navigateurs Web, mais ne gère pas les feuilles de style (CSS). 4.01 est le réglage recommandé fournissant du HTML dynamique et le support des feuilles de style CSS avec les navigateurs récents. XHTML 1.0 Transitionnel et XHTML 1.0 Strict génère du code compatible XHTML, pour utilisation avec les applications qui le nécessitent. Code HTML Détermine le format du HTML généré par Freeway. Notez que cette option n'a aucun effet sur l'apparence des pages dans un navigateur. Plus efficace supprime les espaces optionnels et la mise en page pour faire des fichiers aussi petits que possible. Plus lisible rend le HTML plus facile à lire avec une mise en page formatée de la sortie. Retour à la ligne 6 Macintosh, DOS et UNIX utilisent des caractères de retour à la ligne différents. Avec les choix DOS ou UNIX, les fichiers texte HTML sont lus plus facilement sur des Systèmes DOS/UNIX. Ceci n'a aucune importance pour les navigateurs, mais peut être important pour les scripts CGI, etc. Description Option Description Ressources Spécifie où sont enregistrés les fichiers images et autres ressources quand le site est publié. Code créateur Spécifie le code créateur des images exportées. Le menu déroulant offre les options suivantes : Dossier commun stocke toutes les ressources dans un même dossier. Dossiers séparés : les ressources de chaque dossier du site sont enregistrées dans un sousdossier nommé Resources. Avec les fichiers HTML enregistre les fichiers de ressources au même niveau que les fichiers HTML. Nom des fichiers Spécifie les conventions utilisées pour générer les noms des fichiers HTML et ressources lors de la publication du site. Sans spécifie aucun type créateur. Autre vous permet d'indiquer explicitement le code créateur à 4 caractères. Préférences Option Navigateur par défaut met comme code créateur celui du navigateur par défaut défini par la commande Réglage du navigateur… du menu Fichier. Choix Application… donne le code créateur d'une application que vous choisissez sur votre disque dur. Alphanumérique restreint les noms aux lettres et aux chiffres, conformément aux anciens serveurs. DOS restreint au format 8.3 pour une compatibilité maximale avec les serveurs Web MS-DOS. UNIX/Windows (recommandé) génère des noms de fichiers convenant aux serveurs UNIX ou Windows. Forcer les tableaux Renforce les tableaux avec des images GIF invisibles. Feuilles de style externe Enregistre les feuilles de style CSS dans un fichier séparé du HTML. Balises en majuscules (non XHTML) Spécifie si les balises HTML sont générées en majuscules au lieu des minuscules. Non applicable aux options de sortie XHTML. Longueur max. des noms Spécifie la longueur maximale des noms de fichiers générés automatiquement. 7 Préférences Transfert Texte Spécifie le mode et les réglages par défaut utilisé quand le site est transféré sur le serveur Web par la commande Transférer… du menu Fichier : Spécifie l'encodage et la langue par défaut pour les fichiers HTML générés quand le site est publié, ainsi que les polices utilisées pour afficher le texte dans le document Freeway lors de l'édition du site : Pour plus d'informations, reportez-vous au guide Utiliser Freeway. 8 Option Description Encodage par défaut Choisir Automatique pour un encodage automatique basé sur le texte du site, ou un des encodages du menu déroulant. Langage pour l'orthographe Spécifie la langue utilisée pour la correction orthographique et les césures. Description Option Description Police pour encodage Vous pouvez spécifier la police et la taille d'affichage des textes (en standard et fixe) dans votre document Freeway pour chacun des encodages que vous désirez utiliser. Choisissez l'encodage dans le menu déroulant et les polices et tailles dans les menus Standard et Largeur fixe au dessous. GIF/PNG Spécifie la palette de couleurs par défaut, et si les images sont entrelacées. JPEG Spécifie si les images JPEG sont progressives et le niveau de compression par défaut. Échantillonnage bilinéaire Spécifie si les images sont mises à l'échelle en utilisant le filtre bilinéaire, qui donne des résultats plus lissés. Cela peut être inapproprié pour des images vectorielles. Rééchantillonner en 256 couleurs ou moins Rééchantillonne automatiquement les images avec moins de 256 couleurs pour améliorer leur qualité. Images Spécifie les options par défaut pour l'export des images GIF, PNG et JPEG : Préférences Option 9 Préférences 10 Outils et palettes Ce chapitre donne des informations détaillées sur les outils de la barre d'outils et les options de chacune des palettes de Freeway. Outils et palettes Barre d'outils La barre d'outils affiche les outils utilisés pour créer et éditer les blocs de votre page Freeway : Pour restaurer la barre par défaut • Glisser dans la barre d'outils le jeu par défaut qui se trouve en bas du dialogue de personnalisation. Touches de modification Le comportement des outils est modifié lorsque l'on enfonce certaines touches du clavier : Pour personnaliser la barre d'outils • Dans le menu Affichage choisir Personnaliser la barre d'outils…. • Glisser les éléments vers ou depuis la barre d'outils pour la personnaliser Modifier Description ALT Change temporairement les outils (excepté le Zoom) en main pour déplacer la page dans la fenêtre. Change l'outil Zoom d'agrandissement en réduction. Command Active temporairement l'outil Choix pour pouvoir sélectionner, désélectionner ou déplacer les blocs. SHIFT + CONTROL Active temporairement l'outil Zoom. en fonction de vos besoins. Vous pouvez utiliser les éléments Séparateur, Espace et Espace réglable pour présenter les éléments de votre barre d'outils. Lorsque vous avez fini la personnalisation de la barre d'outils : • Cliquer sur Terminé. 12 Outil Les outils vous permettent de créer ou de manipuler les différents types de blocs de Freeway. Le tableau ci-dessous décrit chaque outil : Description Ce qu'il fait Action Ajoute une action Freeway à la page. Image Dessine un bloc graphique rectangulaire, pour ajouter une image ou du texte GIF. Ovale Dessine un bloc graphique avec un contour ovale. Zone cliquable rectangulaire Dessine une zone rectangulaire cliquable sur les images. Outils standards Outil Description Ce qu'il fait Précédent/ Suivant Affiche les pages récemment visitées. Outil de sélection Sélectionne ou manipule les blocs ou édite le texte. Rotation Rotation des blocs graphiques. Augmente ou réduit le zoom d'affichage de la fenêtre Freeway. Chaînage Lie des blocs HTML ou image pour que le texte soit chaîné entre ces blocs. Inspecteur Affiche ou masque la palette Inspecteur. Outil zoom Mise en page CSS Spécifie si les nouveaux blocs ajoutés dans la page utilisent la mise en page CSS ou des tableaux invisibles (compatible avec les anciens navigateurs). HTML Dessine un bloc HTML sur votre page, pour entrer du texte HTML dans votre site. Tableau Dessine un tableau sur votre page, avec un nombre de lignes et de colonnes spécifiés. Outils et palettes Outils 13 Outils et palettes Outils optionnels Outil Description Ce qu'il fait Radio Ajoute un bouton radio dans un formulaire. Champ d'édition Ajoute un champ d'édition de texte dans un formulaire. Description Ce qu'il fait Séparateur Ajoute une ligne de séparation dans la barre d'outils. Menu/Liste Ajoute un menu déroulant ou une liste dans un formulaire. Ajoute un espace dans la barre d'outils. Zone de texte Ajoute une zone de texte dans un formulaire. Ajoute un espace qui aligne à droite les icônes suivantes de la barre d'outils. Zone cliquable ovale Crée une zone ovale cliquable sur une image. Zone cliquable polygonale Crée une zone cliquable de contour arbitraire sur une image. Inclinaison Incline les blocs graphiques. Miroir Effet miroir sur les blocs graphiques. Styles et Couleurs Affiche ou masque la palette Styles et Couleurs. Espace Espace flexible Personnaliser 14 Outil Ils sont disponibles dans les sous-menus des outils standards, et vous pouvez les ajouter dans la barre d'outils avec l'option Personnaliser la barre d'outils… du menu Affichage. Affiche le dialogue Personnaliser la barre d'outils. Supprimer chaînage Délie les blocs HTML ou image qui ont été liés avec l'outil Chaînage. Polygone Dessine un bloc graphique avec un contour arbitraire de lignes et de courbes. Bouton Ajoute un bouton dans un formulaire. Case à cocher Ajoute une case à cocher dans un formulaire. Pour éditer un champ dans une palette Freeway dispose des palettes suivantes : Soit : • Éditer la valeur et appuyez sur RETOUR pour confirmer la modification. Palette Fonction Inspecteur Affiche les options concernant le bloc sélectionné et permet de les modifier. Styles et Couleurs Affiche les styles et couleurs du texte utilisé dans le document et permet de les éditer. Actions Affiche les actions Freeway appliquées à un objet et permet de modifier les paramètres. Palette Inspecteur Cadres Affiche la structure du jeu de cadres sélectionné et permet de modifier les cadres. La palette Inspecteur affiche les options affectant l'objet sélectionné. Pour afficher une palette • Ouvrir le menu Fenêtre et sélectionner le nom de la palette désirée. Soit : • Éditer la valeur et appuyez sur la touche TABULATION pour confirmer la modification et passer au champ suivant. Outils et palettes Palettes Quand rien n'est sélectionné sur la page, la palette Inspecteur affiche les réglages de la page courante. Les sections suivantes décrivent les panneaux principaux de la palette Inspecteur et leurs options. Pour redimensionner une palette • Utiliser la case de redimensionnement en bas à droite. La palette Inspecteur ne peut pas être redimensionnée. Pour masquer toutes les palettes • Ouvrir le menu Fenêtre et choisir Masquer les palettes. 15 Outils et palettes 16 Palette Inspecteur – Réglages de page Les réglages de Page sont affichés quand aucun élément n'est sélectionné dans la page. Réglages d'apparence Fond de page Réglages de page généraux Option Description Titre Donne le nom de la page, qui sera le titre de la fenêtre quand elle sera affichée dans un navigateur. Fichier Nom du fichier HTML quand la page sera publiée. L, H Largeur et hauteur de la page. Aligner Alignement de la page quand elle sera affichée dans la fenêtre du navigateur. Maquette Choix de la maquette utilisée pour cette page. CSS Spécifie la feuille de style appliquée à cette page. Option Description Couleur Couleur donnée au fond de la page. Image Permet de choisir une image pour le fond de la page. Horizontal, Vertical* Choix d'un alignement Gauche, Centré ou Droite de l'image de fond, ou Mosaïque pour répéter l'image. Fond défilant* Spécifie que l'image de fond défile avec la page. * Affiché uniquement avec un réglage de sortie HTML 4.01 ou XHTML et si une image de fond a été définie. Option Description HTML Spécifie le type de HTML généré pour cette page. Option Description Normal, Actif, Visité Spécifie les couleurs utilisées pour chaque type de lien. La couleur de lien Normal est utilisée pour les liens dans du texte HTML. La couleur de lien Actif est utilisée quand la souris clique sur un lien, et la couleur de lien Visité s'affiche quand l'utilisateur a déjà visité cette page. Si aucune couleur n'est spécifiée, les valeurs par défaut du navigateur sont utilisées. Code Plus efficace crée un HTML compact. Plus lisible crée du HTML formaté plus facile à lire. Position forcée Ajoute des caractères de remplissage dans les tableaux pour leur conserver une taille plus consistante quand la fenêtre du navigateur est redimensionnée. Uniquement pour le XHTML. Balises en majuscules Génère des balises en majuscules au lieu de minuscules. Non applicable en XHTML. Permet de spécifier un style CSS pour chaque état correspondant du lien. Le style Actif est utilisé quand la souris clique sur un lien, le style Survolé quand la souris passe sur un lien, le style Lien est le style normal et le style Visité indique que l'utilisateur a déjà visité cette page. Codage Langue d'encodage de la page. Cible Spécifie le mode des liens par défaut. Quand on clique sur un lien, permet d'ouvrir la page dans un cadre particulier ou dans une nouvelle fenêtre au lieu du cadre contenant le lien. Voir Pour spécifier la cible d'un lien, page 63. Actif, Survolé, Lien, Visité Outils et palettes Réglages de la génération HTML Liens 17 Outils et palettes Palette Inspecteur – Réglages de bloc Les réglages de Bloc sont affichés quand un bloc est sélectionné. Réglages généraux Propriétés Option Description Publier Spécifie si le bloc doit être publié. Fusionner image/ Fusionner avec enfants* Fusionne les blocs (sans calque) ou les blocs avec enfants (avec calque) se chevauchant pour créer une image unique quand le site est publié. Fond † Spécifie la couleur de fond du tableau. * Blocs graphiques uniquement. † Blocs tableaux uniquement. Dimensions 18 Option Description Titre Donne le nom du bloc. Calque Spécifie si le bloc est positionné par des calques CSS au lieu de tableaux invisibles. Si la case est cochée, un menu permet les choix Absolu, pour positionner le bloc par rapport à la page, ou Fixe dans la fenêtre, pour le positionner par rapport à la fenêtre du navigateur. Verrouiller Verrouille le bloc. Les blocs verrouillés ne peuvent être déplacés, redimensionnés ou supprimés. Afficher Affiche le bloc. Si la case est décochée, le bloc n'est pas affiché dans la fenêtre de Freeway mais sera publié. Option Description Gauche, Haut* Position du bloc par rapport au coin en haut à gauche de la page. Largeur,Hauteur* Largeur et hauteur du bloc. Droite, Bas* Position du bloc par rapport au coin en bas à droite de la page. Description Option Description Décalage Décale le contenu du bloc. Choisir Personnaliser… pour donner des valeurs différentes pour chaque côté. L, H Dimensions du bloc, en pixels ou en pourcentage de la taille du bloc contenant ce bloc. Flottant Contour Définir une marge pour l'habillage de textes d'autres blocs passant autour de ce bloc. Choisir Personnaliser… pour donner des valeurs différentes pour chaque côté. Habiller Habillage des textes d'autres blocs se trouvant sous ce bloc. Spécifie comment le bloc flotte par rapport au texte qui l'entoure. Sans si aucun contenu n'est à gauche ou à droite. Gauche permet au contenu de contourner le bloc à droite, et Droite permet de le contourner par la gauche (laissant ce bloc à droite du texte). Effacer Permet de contrôler si ce bloc coule autour des autres blocs insérés. Sans est le comportement normal, Gauche interrompt le flux autour des blocs Flottant Gauche. Droite interrompt le flux autour des blocs Flottant Droite, et Les deux interrompt le flux autour des blocs Flottant Gauche et Flottant Droite. Décalage Décale le contenu du bloc vers l'intérieur. Choisir Personnaliser… pour des réglages différents pour chaque côté. Marge Défini une marge d'écoulement pour les contenus habillant ce bloc. Choisir Personnaliser… pour des marges différentes pour chaque côté. * Chacune de ces valeurs peut être indiquée en pixels (par ex. 110px) ou en pourcentage de la largeur de la page (ex. 20%). Dimensions (blocs HTML insérés) Outils et palettes Option Pour insérer un bloc HTML dans un autre bloc HTML, cliquez dans ce bloc pour éditer son contenu, puis choisissez Bloc HTML dans le menu Insertion. 19 Outils et palettes Dimensions (blocs graphiques insérés) Pour insérer un bloc graphique dans un bloc HTML ou un bloc graphique, cliquez dedans pour afficher le point d'insertion et choisir Bloc graphique du menu Insertion. 20 Option Description L, H Dimensions du bloc, en pixels. Aligner Spécifie comment le texte s'aligne sous le bloc inséré. Les options sont celles de l'alignement vertical standard du CSS : Haut, Texte en haut, Dessus, Milieu, Ligne de base, Dessous, Texte en bas et Bas. Décalage Décale le contenu du bloc vers l'intérieur. Choisir Personnaliser… pour des réglages différents pour chaque côté. Marge Défini une marge d'écoulement pour les contenus habillant ce bloc. Choisir Personnaliser… pour des marges différentes pour chaque côté. Cellules (tableaux uniquement) Option Description Lignes Nombre de lignes du tableau. Les lignes sont ajoutées ou supprimées en bas du tableau. Colonnes Nombre de colonnes du tableau. Les colonnes sont ajoutées ou supprimées à droite du tableau. Bordure Largeur de la bordure autour du tableau. Espace entre cellules Spécifie l'espacement entre les cellules. Contour des cellules Spécifie l'espacement entre une cellule et son contenu. Option Description X, Y Position sur l'écran. L, H Dimensions sur l'écran, ajustées en fonction du décalage. Option Description Forme La forme du bloc graphique : Rectangle, Ovale ou Polygone. Arrondi Rayon des coins arrondis pour les blocs rectangulaires. Choisir Personnaliser… pour des rayons différents pour chaque coin. Interligne initial Indique la position verticale de la première ligne de texte. Direction du Indique si le texte doit être écrit horizontalement ou texte verticalement. Outils et palettes Autre (blocs graphiques uniquement) Mesures écran 21 Outils et palettes Réglages d'apparence Bordure Fond Option Description Couleur Couleur de remplissage du bloc. Opacité* Spécifie l'opacité du bloc graphique. Filtre* Applique le filtre d'effet Biseautage, Flou ou Dispersion au bloc graphique. * Blocs graphiques uniquement. Option Description Couleur Couleur de la bordure du bloc. Opacité* Spécifie l'opacité de la bordure du bloc graphique. Taille Spécifie l'épaisseur de la bordure. Style/Trait Type de ligne de la bordure. Position* Pour une bordure solide, indique si la bordure est en dedans ou en dehors du bloc graphique. Filtre* Applique le filtre d'effet Biseautage, Flou ou Dispersion à la bordure du bloc graphique. * Blocs graphiques uniquement. 22 Lueur de contour (blocs graphiques uniquement) Outils et palettes Ombre (blocs graphiques uniquement) Applique une lueur de contour à un bloc graphique. Les options sont : Applique une ombre au bloc graphique. Les options sont : Option Description Option Description Couleur Spécifie la couleur de la lueur. Couleur Spécifie la couleur de l'ombre. Opacité Spécifie l'opacité de la lueur. Opacité Spécifie l'opacité de l'ombre. Diffusion Spécifie la distance de la lueur. Angle Spécifie l'angle de la source lumineuse. Flou Spécifie le flou appliqué à la lueur. Global Spécifie si on doit utiliser l'angle de la source lumineuse global de cette page. Décalage Spécifie le décalage de l'ombre. Flou Spécifie le flou appliqué à l'ombre. Premier plan (blocs graphiques uniquement) 23 Outils et palettes Applique une couleur de premier plan au bloc graphique. Les options sont : Option Description Couleur La couleur de premier plan, qui va colorer le texte des blocs graphiques se trouvant sous ce bloc. Opacité L'opacité du premier plan. Effet de forme – Ondulation (blocs graphiques uniquement) Effet de forme – Craquelure (blocs graphiques uniquement) Applique un effet d'ondulation. Les options sont : Applique un effet de craquelure. Les options sont : 24 Option Description Période La période des craquelures, de 0 à 100 pixels. Aléatoire La variation des craquelures, de 0 à 100%. Marge La quantité enlevée par les craquelures, de 0 à 100 pixels. Profondeur La profondeur des craquelures, de 0 à 100 pixels. Option Description Période La période des ondulations, de 0 à 100 pixels. Aléatoire La variation des ondulations, de 0 à 100%. Déviation La taille des ondulations, de 0 à 100 pixels. Lissage Le lissage des ondulations, de 0 (aigu) à 100% (lisse). Bloc HTML (calque) Fournit les options spécifiques au format de publication du bloc. Bloc HTML (non-calque) Option Description Largeur adaptable Spécifie si le bloc peut s'élargir quand la fenêtre du navigateur est élargie. Hauteur adaptable Spécifie si la hauteur du bloc rétrécit pour s'adapter au contenu lorsque la taille du texte est plus petite dans le navigateur. Fichiers GIF entrelacés Spécifie si le texte GIF de ce bloc est entrelacé. Lissage Spécifie si le texte GIF de ce bloc est lissé et, si oui, la couleur utilisée pour le lissage. Auto choisit automatiquement la couleur en fonction des couleurs de fond. Option Description Fichiers GIF entrelacés Spécifie si le texte GIF de ce bloc est entrelacé. Débordement Spécifie comment le navigateur traite le texte qui ne rentre pas dans le bloc. Visible autorise le texte à déborder du bloc, Caché tronque le texte qui dépasse, Ascenseur ajoute des barres de Outils et palettes Réglages de sortie défilement au bloc et Auto n'ajoute des barres de défilement qu'en cas de besoin. Lissage Spécifie si le texte GIF de ce bloc est lissé et, si oui, la couleur utilisée pour le lissage. Auto choisit automatiquement la couleur en fonction des couleurs de fond. 25 Outils et palettes 26 Bloc GIF Option Description Taille La taille de l'image en octets. Affiché uniquement si Prévisualisation des images est coché dans le menu Affichage ou si l'image a été publiée. Couleurs Spécifie la palette de couleurs utilisée pour l'image : Adaptatif choisit les couleurs les plus proches de l'image originale. Web 216 choisit pour chaque couleur la plus proche dans la palette des couleurs Web. Mac 256 choisit pour chaque couleur la plus proche dans la palette des couleurs du Système Macintosh. Curseur couleurs Nombre de couleurs à utiliser pour l'image. Les images GIF ont un maximum de 256 couleurs. Réduire le nombre de couleurs peut réduire la taille du fichier généré. Bilinéaire Met les images à l'échelle avec lissage. Ce réglage peut être inadapté pour certains dessins vectoriels. Option Description Ajuster Utilise une trame de pixels pour mieux correspondre à l'image originale tout en se limitant au nombre de couleurs spécifié. Entrelacé Les images GIF entrelacées sont affichées graduellement à mesure qu'elles sont chargées par le navigateur. Les visiteurs voient les images se former pendant le chargement complet. Ce réglage est désactivé par défaut car il donne des fichiers légèrement plus gros. La valeur par défaut de cette option peut être modifiée dans le dialogue Réglages du document. Lissage Lisse les sorties de texte et formes GIF. La couleur utilisée pour le lissage peut être choisie dans le menu. Auto choisit automatiquement la couleur en fonction des couleurs de fond. Vous pouvez spécifier une taille de texte minimale pour le lissage dans le dialogue Préférences. Texte Alternatif Spécifie le texte alternatif à afficher si le navigateur ne peut pas afficher l'image, ou si l'utilisateur a désactivé l'affichage des images. Envoi Permet d'utiliser le bloc comme bouton d'envoi dans un formulaire. Quand Envoi est coché, un champ vous permet d'indiquer la valeur retournée comme Nom du bouton d'envoi. Bloc PNG Les options PNG sont identiques à celles des images GIF, sauf que le menu Couleurs contient aussi l'option Millions. Option Description Taille La taille de l'image en octets. Affiché uniquement si Prévisualisation des images est coché dans le menu Affichage ou si l'image a été publiée. Bloc URL Curseur qualité La qualité de l'image, de 100% (meilleure qualité) à 1% (compression maximale et fichier le plus réduit). Un bloc réglé pour être un bloc URL prend son contenu dans un fichier externe lorsqu'il est affiché sur le Web. Bilinéaire Met à l'échelle les images avec lissage. Ce réglage peut être inadapté pour certains dessins vectoriels. Progressif Le JPEG s'affiche graduellement à mesure que le fichier se charge. Lissage Lisse les sorties de texte et de forme. Le format JPEG n'est pas recommandé pour du texte. Texte Alternatif Spécifie le texte alternatif à afficher si le navigateur ne peut pas afficher l'image, ou si l'utilisateur a Outils et palettes Bloc JPEG désactivé l'affichage des images. Envoi Permet d'utiliser le bloc comme bouton d'envoi dans un formulaire. Un champ vous permet d'indiquer la valeur retournée comme Nom du bouton d'envoi. Option Description Contenu Spécifie si le contenu du bloc est une image ou est un fichier HTML fourni par un serveur Web. URL Spécifie l'adresse URL du contenu externe. 27 Outils et palettes 28 Option Description Palette Inspecteur – Réglages de texte Texte Alternatif Spécifie le texte alternatif à afficher si le navigateur ne peut pas afficher l'image, ou si l'utilisateur a désactivé l'affichage des images. Les réglages de Texte sont affichés quand un texte est sélectionné dans un bloc HTML ou graphique. Envoi Permet d'utiliser le bloc comme bouton d'envoi dans un formulaire. Réglages Caractère et Paragraphe – Texte HTML Caractère Bloc Zone cliquable Option Description Texte Alternatif Spécifie le texte alternatif à afficher si le navigateur ne peut pas afficher l'image, ou si l'utilisateur a désactivé l'affichage des images. Spécifie le format des caractères pour un texte HTML. Option Description Type Choix d'une sortie HTML ou GIF pour une sélection de texte. Police Choix d'un des jeux de polices disponibles ou permet d'en créer un nouveau. Couleur Couleur du texte. Équivalent à l'option Couleur de la section Texte des réglages d'apparence. Style Choix des styles gras, italique, souligné, barré, surligné ou clignotement. Surligné n'est disponible que pour les options HTML 4.01 ou XHTML. Taille Spécifie la taille du texte. Décalage Applique un décalage HTML. Cette section est affichée quand un filet horizontal est sélectionné dans un bloc : Spécifie le formatage de paragraphe du texte HTML. Option Description Type Spécifie si la sortie est HTML ou GIF. Aligner Indique si le paragraphe HTML est aligné à gauche, à droite, centré ou justifié. Liste Spécifie le style de liste numérotée (où les éléments sont précédés d'un numéro) ou non (éléments précédés d'une marque ronde ou autre). Indentation première ligne, gauche, droite* Spécifie les indentations du paragraphe. Outils et palettes Règle de filet Paragraphe Pour insérer un filet, positionner le point d'insertion dans un bloc HTML ou graphique et choisir Filet dans le menu Insertion. Option Description Aligner Spécifie l'alignement du filet dans le bloc. Taille Spécifie l'épaisseur du filet. Retrait Spécifie le décalage du filet dans le bloc. Filet plein Spécifie si le filet doit être plein ou tridimensionnel. * Avec l'option de sortie HTML 3.2 cette option est remplacée par Alinéa avec les valeurs Sans ou 1 à 5. 29 Outils et palettes Réglages Caractère et Paragraphe – Texte GIF Caractère Spécifie le format des paragraphes d'un texte GIF. Spécifie le format des caractères d'un texte GIF. 30 Paragraphe Option Description Police Choix d'une police parmi toutes celles installées dans le Système. Couleur Couleur du texte. Équivalent à l'option Couleur de la section Texte des réglages d'apparence de texte. Style Spécifie les réglages gras, italique, souligné, mot souligné, contour et ombré. Taille Permet de sélectionner une taille dans le menu ou d'entrer une taille explicite. Espace Indique l'espacement entre les caractères. Option Description Aligner Indique si le paragraphe GIF est aligné à gauche, à droite, centré, justifié ou justifié forcé. Interligne Règle l'interligne en pourcentage ou en taille absolue en pixels. Indentation Spécifie l'indentation de la première ligne, l'indentation à gauche et à droite. Effet de forme – Ondulation (texte GIF uniquement) Effet de forme – Craquelure (texte GIF uniquement) Applique un effet de craquelure ou de corrosion au texte. Les options vous permettent d'ajuster les effets sur le texte : Outils et palettes Apparence Applique un effet d'ondulation ou d'irrégularité au texte. Les options vous permettent d'ajuster les effets sur le texte : Option Description La période des ondulations, de 0 à 100%. Option Description Période Période La période des craquelures, de 0 à 100%. Aléatoire La variation des ondulations, de 0 à 100%. Aléatoire La variation des craquelures, de 0 à 100%. Déviation La taille de l'ondulation, de 0 à 100%. Marge La quantité enlevée par les craquelures, de 0 à 100%. Lissage Le lissage des ondulations, de 0 (aigu) à 100% (lisse). Profondeur La profondeur des craquelures, de 0 à 100% 31 Outils et palettes Ombre (texte GIF uniquement) Lueur contour (Texte GIF uniquement) Les options qui permettent de contrôler l'effet lueur sont : Fournit les contrôles suivants : 32 Option Description Option Description Couleur La couleur de la lueur externe. Couleur Spécifie la couleur de l'ombre. Opacité L'opacité de la lueur. Opacité Spécifie l'opacité de l'ombre. Diffusion La diffusion de la lueur entre 0 et 10. Angle Spécifie l'angle de la source lumineuse. Flou Le degré de flou de la lueur, entre 0 et 20. Global Spécifie si l'effet utilise l'angle global de la page. Décalage Spécifie le décalage de l'ombre en pixels ou en pourcentage. Flou Un nombre entre 0 et 20 définissant le degré de flou de l'ombre. Fond Outils et palettes Texte Spécifie la couleur de fond du texte. Les paramètres suivants sont disponibles : Option Description Option Description Couleur La couleur du fond. Couleur Spécifie la couleur du texte. Opacité* L'opacité du fond. Opacité* Spécifie l'opacité du texte. Afficher* Spécifie le style de dessin du texte : Solide, Bord seul ou Solide et épaisseur. Un champ permet de modifier l'épaisseur du bord pour les options Bord seul et Solide et épaisseur. Filtre* Applique un filtre Biseautage, Flou ou Dispersion au texte. Voir les sections suivantes. * Texte GIF uniquement. * Texte GIF uniquement. 33 Outils et palettes Filtre Flou Filtre Biseautage Les options du filtre Flou sont : Des options supplémentaires permettent le contrôle de l'effet biseautage : Option Description Angle, Altitude Spécifie l'angle et l'altitude de la source lumineuse pour l'effet biseautage. Global Spécifie si l'effet utilise l'angle et l'altitude globaux de la page. Reflet Contrôle le pourcentage des reflets. Les valeurs hautes donnent un objet lisse et brillant. Diffuse 34 Spécifie le pourcentage de lumière diffuse. Les valeurs hautes donnent un objet rugueux ou mat. Option Description Flou La taille du flou, entre 0 et 20. Contours Les options du filtre dispersion sont : Contours vous permet de créer une seconde couche de texte au-dessus de la couche principale, avec des réglages différents pour Afficher, Couleur, Opacité et Filtre pour obtenir une variété d'effets bicolores. Option Description Rayon En nombre entre 0 et 20 qui détermine la distance de dispersion de chaque pixel du texte. Outils et palettes Filtre Dispersion Option Description Couleur Spécifie la couleur des contours. Opacité Spécifie l'opacité des contours. Afficher Spécifie le style de dessin du texte : Solide, Bord seul ou Solide et épaisseur. Un champ permet de modifier l'épaisseur du bord pour les options Bord seul et Solide et épaisseur. Filtre Applique un filtre d'effets aux contours. Les options sont identiques aux filtres de la section Texte. 35 Outils et palettes Palette Inspecteur – Réglages des cellules de tableaux Polices Affiché quand une ou plusieurs cellules sont sélectionnées dans un tableau. Réglages des cellules de tableau Ligne courante Cette section affiche les fonctions OpenType de la police sélectionnée. Cette section n'est disponible que pour les polices OpenType. Les options disponibles dépendent de la police sélectionnée, et peuvent comporter par exemple : 36 Fonction Description Option Description Ligatures Substitue des caractères de ligature spéciaux pour les paires de caractères correspondantes : ex “Fi”. H Spécifie la hauteur de la ligne courante. Extension Casse des lettres Mise en majuscules ou en minuscules. Permet d'ajouter des attributs à la balise <tr> de la ligne du tableau. Espacement des nombres Permet de choisir entre espacement fixe ou proportionnel pour les nombres. Marqueur Permet d'ajouter un marqueur HTML avant ou après la ligne. Parafes Positionnement des parafes. Position verticale Position du texte en indice ou exposant. Caractères alternatifs Choix de versions alternatives de certains caractères. Options de style Choix de styles alternatifs inclus dans la police. Casse nombres Choix entre nombres minuscules et majuscules Colonne courante Description L Spécifie la largeur de la colonne sélectionnée. Palette Inspecteur – Réglages des jeux de cadres Les réglages de Jeu de cadres sont affichés lorsque la page courante est une page constituée de cadres. Cellule Jeu de cadres Général Option Description L Spécifie la largeur de la cellule sélectionnée. H Spécifie la hauteur de la cellule sélectionnée. Aligner Option Description Titre Spécifie le titre de la page, qui apparaît comme titre de la fenêtre dans le navigateur. Spécifie l'alignement vertical dans la cellule. Fichier Nom du fichier de cette page. Couleur Spécifie la couleur de fond de la cellule. Bordure Spécifie la largeur de la bordure entre les cadres. Vide Spécifie si la cellule est vide dans le tableau publié. Extension Permet d'ajouter des attributs à la balise <tr> de la cellule. Outils et palettes Option 37 Outils et palettes Jeu de cadres courant Cadre courant Affiché quand un cadre est sélectionné. Affiché quand un cadre est sélectionné. Option Description Vertical Spécifie si le jeu de cadres est orienté horizontalement ou verticalement. Taille* Permet d'indiquer la taille du jeu de cadres, en valeur fixe ou en pourcentage. * Uniquement pour les jeux de cadres enfants 38 La section Cadre courant concerne le cadre sélectionné. Option Description Nom Spécifie le nom du cadre, utilisé pour définir la destination des hyperliens vers ce cadre. Source Spécifie la page chargée initialement dans ce cadre. Ascenseur Spécifie si des ascenseurs sont affichés dans le navigateur. Oui les affiche toujours, Non ne les affiche jamais et Auto n'affiche les ascenseurs qu'en cas de besoin. Taille fixe Cochez cette case pour empêcher l'utilisateur de redimensionner ce cadre. Taille Spécifie la taille du cadre, en valeur fixe ou en pourcentage. Bouton radio Ces sections sont affichées quand un des éléments d'un formulaire est sélectionné. Les réglages de sortie dépendent du type d'élément. Case à cocher Option Description Nom Le nom de l'élément du formulaire. Valeur La valeur retournée quand l'élément est coché dans le navigateur. Texte Le titre de la case à cocher. Coché État initial de la case à cocher dans le navigateur. Option Description Nom Le nom du groupe de boutons radio. La sélection de ce bouton dans le navigateur va désélectionner tous les boutons du même groupe. Valeur La valeur retournée quand ce bouton radio est sélectionné dans le navigateur. Texte Le titre du bouton radio. Coché État initial du bouton radio dans le navigateur. Outils et palettes Palette Inspecteur – Réglages des éléments de formulaire 39 Outils et palettes 40 Champ d'édition Bouton Option Description Nom Le nom du bouton. Valeur Le titre dans le bouton. S'il est omis, un titre par défaut est affiché. Type Soumettre pour soumettre le formulaire, Zéro pour remettre à zéro le contenu du formulaire ou Bouton pour un bouton sans action. Option Description Nom Le nom du champ. Valeur Le texte qui est affiché par défaut. Mot de passe Spécifie si le contenu du champ est masqué (par exemple pour un champ de mot de passe). Longueur max Nombre maximum de caractères autorisés dans ce champ. Taille La largeur du champ. Outils et palettes Zone de texte Menu/Liste Option Description Nom Le nom de la zone de texte. Option Description Texte Le texte qui est affiché par défaut. Nom Le nom du menu ou de la liste. Habiller Si le texte peut habiller la zone de texte. Taille Le nombre de choix dans le menu ou la liste. Mettre à 1 pour un menu déroulant. Lignes Spécifie le nombre de lignes de texte dans la zone de texte. Multiple Si sélectionné, l'utilisateur peut choisir plusieurs éléments dans la liste. Colonnes Spécifie le nombre de colonnes dans chaque ligne. Choix/Valeur Une liste de noms et les valeurs associées. Doublecliquer sur un élément pour l'éditer. Les boutons en bas à gauche permettent d'ajouter, éditer ou supprimer un élément. Les flèches en bas à droite modifient l'ordre des éléments. 41 Outils et palettes Palette Styles et Couleurs La palette Styles et Couleurs possède trois panneaux : le panneau Styles du document, le panneau Couleurs du document et le panneau Couleurs Web. Styles de paragraphe Les styles de paragraphe ont leur nom précédé du symbole “¶” dans la liste, pour les différencier des autres styles. Panneau Couleurs du document Affiche les couleurs utilisées dans le document et les couleurs par défaut. Le bouton Options en haut à droite affiche un menu d'options pour le panneau en cours. Panneau Styles du document Affiche une liste des styles permanents et temporaires du document : Vous pouvez créer une nouvelle couleur avec la commande Nouvelle couleur… du menu Options. Vous pouvez créer un nouveau style permanent avec la commande Nouveau style… du menu Options. Styles permanents Les styles permanents sont affichés en gras dans la palette. Ils restent définis même s'ils ne sont plus utilisés dans le document. Styles temporaires Les styles temporaires sont affichés en texte normal et sont créés automatiquement lorsque vous éditez du texte dans le document. 42 Couleurs permanentes Les couleurs affichées en gras sont les couleurs permanentes, qui restent définies même lorsqu'elles ne sont pas utilisées dans le document. Couleurs temporaires Les couleurs en texte normal sont les couleurs temporaires, qui ne sont listées que si elles sont appliquées à un objet. Cliquer sur une couleur l'applique à l'attribut sélectionné dans le menu déroulant Appliquer en haut de la palette. Affiche les 216 couleurs Web standard et permet de les sélectionner : Les boutons en haut de la palette vous permettent de supprimer un cadre, d'ajouter un jeu de cadres, ou d'ajouter un nouveau cadre. Palette Actions Cette palette vous permet de régler les paramètres des actions. Quand plusieurs actions ont été appliquées à un bloc de la page, chaque action du bloc qui est sélectionné apparaît dans un onglet dans la palette. Pour plus d'informations sur l'utilisation des actions, voir Utiliser des actions dans le guide Utiliser Freeway. Outils et palettes Panneau des Couleurs Web Palette Cadres Affiche la structure du jeu de cadres défini pour la page courante et un menu Options de commandes pour gérer les cadres HTML. 43 Outils et palettes 44 Options avancées Ce chapitre décrit les options avancées pour travailler en HTML dans Freeway, y compris l'import de fichiers HTML, les blocs flexibles, les jeux de polices et le chaînage entre blocs HTML ou blocs graphiques. Options avancées Importer des fichiers HTML et texte Freeway peut importer des pages HTML existantes, préservant au maximum le contenu et la mise en page de l'original. Cependant, comme Freeway ne travaille pas directement en HTML, il sera parfois nécessaire d'ajuster la mise en page et d'éditer les pages HTML importées. Importer une page HTML dans un document existant • Ouvrir le menu Fichier et choisir Lire HTML…. • Localiser le fichier HTML que vous désirez importer et cliquer sur Ouvrir. Freeway crée une nouvelle page dans le document, basée sur les Réglages du document par défaut, et importe le contenu du fichier HTML. Pour importer un dossier de pages HTML dans un document existant • Ouvrir le menu Fichier et choisir Lire HTML…. • Sélectionner un des fichiers HTML dans le dossier contenant les fichiers HTML que vous désirez importer et cliquer sur Importer "..." : Freeway crée de nouvelles pages dans votre document, basées sur les Réglages du document, et importe le contenu des fichiers HTML. Pour convertir un fichier HTML par glisser-déposer • Glisser-déposer le fichier HTML que vous désirez convertir sur l'icône Freeway dans le Finder ou le Dock. Freeway crée un nouveau document, basé sur les Réglages du document par défaut, et importe le contenu du fichier HTML dans des blocs HTML de la page. Pour glisser du texte d'une autre application • Sélectionner le texte que vous désirez importer. • Glisser et déposer le texte sur la page Freeway pour créer un nouveau bloc HTML, ou dans un bloc existant pour insérer le texte dans ce bloc. Blocs flexibles Normalement, les blocs HTML et les blocs graphiques ont une taille et une position fixe sur la page, et ils demeurent fixes quand l'utilisateur modifie la taille de la fenêtre du navigateur. Freeway fournit deux options vous permettant de créer des blocs flexibles dont la taille se modifie en fonction de la taille de la fenêtre du navigateur. Blocs calques L'option recommandée, si vous utilisez le mode de sortie HTML 4.01 ou XHTML, est de définir le bloc comme un bloc calque qui utilisera la mise en page CSS pour spécifier la taille et la position du bloc. Chaque dimension d'un bloc calque peut être définie comme un pourcentage de la dimension de la fenêtre du navigateur, au lieu d'une valeur absolue en pixels. 46 Freeway utilise une mise en page basée sur des tableaux pour positionner les blocs non-calques dans la page. Vous pouvez rendre un bloc HTML noncalque flexible horizontalement, pour qu'il se dilate en fonction de la taille de la fenêtre du navigateur, et/ou flexible verticalement pour qu'il s'adapte au contenu. Pour définir des dimensions flexibles à un bloc calque • Spécifier les dimensions que vous désirez flexibles en pourcentage dans la section Dimensions de la palette Inspecteur : Pour définir un bloc calque • Sélectionner le bloc. • Cliquer sur l'icône des réglages généraux en haut de la palette Inspecteur pour afficher ces réglages. Options avancées Blocs non-calques • Dans la section Propriétés cocher Calque. • Choisir Absolu dans le menu Calque pour que le bloc soit positionné par rapport au coin en haut à gauche de la page, ou Fixe dans la fenêtre pour que le bloc soit positionné par rapport au coin en haut à gauche de la fenêtre du navigateur : Pour spécifier le comportement en débordement de blocs calques HTML • Sélectionner le bloc. • Vérifier que Calque est coché dans le panneau des réglages généraux de la palette Inspecteur. • Cliquer sur l'icône des réglages de sortie en haut de la palette Inspecteur pour afficher ces réglages. Note : Fixe dans la fenêtre peut donner des résultats différents suivant le navigateur Web. Le menu Débordement offre quatre options pour déterminer ce qui arrive quand le contenu déborde du bloc HTML dans le navigateur Web : 47 Options avancées Les options disponibles sont : Option Description Visible Le contenu peut déborder et est visible audessous du bloc. Masqué Le contenu est tronqué à la taille du bloc. Ascenseur Un ascenseur vertical est affiché pour permettre à l'utilisateur de déplacer le contenu dans la vue. Auto Un ascenseur vertical est affiché uniquement en cas de débordement. Pour définir une largeur flexible à un bloc HTML noncalque • Cliquer sur l'icône des réglages généraux en haut de la palette Inspecteur pour afficher ces réglages. • Cocher Largeur adaptable : Quand la page est publiée, le bloc HTML s'agrandit en proportion de la largeur de la fenêtre du navigateur. Pour définir une hauteur flexible à un bloc HTML non-calque • Cliquer sur l'icône des réglages généraux en haut de la palette Inspecteur pour afficher ces réglages. • Cocher Hauteur adaptable : Quand la page est publiée, la hauteur du bloc HTML s'adapte en fonction de son contenu. Jeux de polices Quand vous appliquez une police en HTML, cette police doit être présente sur la machine du visiteur pour que le texte soit affiché comme prévu. Malheureusement, le résultat peut être différent, car même les noms des polices standards varient entre les différentes plateformes. Les jeux de polices résolvent ce problème en vous autorisant à définir une série de noms de polices alternatives que le navigateur essaiera d'utiliser pour afficher le texte. Le navigateur va tester chacune des polices de la liste, de gauche à droite, jusqu'à en trouver une présente sur l'ordinateur du visiteur. S'il n'en trouve pas, la police par défaut du navigateur sera utilisée. Freeway fournit par défaut les jeux de polices suivants : Courier, Georgia, Helvetica, Symbol, Times, Trebuchet MS et Verdana. Vous pouvez les éditer ou définir de nouveaux jeux de polices dans le dialogue Jeux de polices. 48 • Choisir Jeux de polices… dans le menu Édition : • Entrer une liste de noms des polices additionnelles que vous désirez utiliser, séparés par des virgules, dans l'ordre d'utilisation désiré : Options avancées Pour définir un nouveau Jeu de polices • Cliquer sur OK pour enregistrer ce jeu. Pour éditer un jeu de polices • Dans le dialogue Édition des Jeux de polices cliquer sur Nouveau…. • Spécifier un nom pour le nouveau jeu. Ce nom apparaîtra dans le menu déroulant Police HTML de la palette Inspecteur et dans les menus styles. • Dans le dialogue Édition des Jeux de polices sélectionner le jeu de polices et cliquer sur le bouton Éditer. Pour supprimer un jeu de polices • Dans le dialogue Édition des Jeux de polices sélectionner le jeu de polices et cliquer sur le bouton Effacer. • Choisir une police d'écran. La police d'écran est utilisée dans Freeway pour afficher les textes auxquels cette police s'applique. La police est automatiquement ajoutée dans la liste des polices alternatives. 49 Options avancées Chaîner des blocs HTML ou graphiques Freeway vous permet de chaîner deux ou plusieurs blocs HTML ou blocs graphiques, de manière que le texte coule automatiquement entre les blocs quand vous éditez la page. Le texte placé dans le premier bloc s'écoulera dans les blocs chaînés jusqu'à placer tout le texte. Pour supprimer le chaînage entre blocs • Cliquer sur le menu de l'outil Chaînage et sélectionner l'outil Supprimer chaînage. Notez que l'écoulement du texte n'est actif que pendant l'édition du document Freeway. Lorsque vous publiez le site, le texte est découpé en blocs séparés. Quand vous sélectionnez des blocs chaînés, une flèche rouge indique le lien : • Cliquer sur un des blocs chaînés pour afficher les liens. • Cliquer sur la ligne rouge liant les blocs. Le bloc pointé par le lien est supprimé du chaînage de texte, et le texte s'arrête dans le bloc qui le précède. Si c'est un bloc HTML, il est redimensionné verticalement pour afficher tout le texte. Vous pouvez sélectionner du texte dans des blocs chaînés de la manière habituelle, avec la souris ou avec Tout sélectionner du menu Édition. Si c'est un bloc graphique, une icône de débordement est affichée en bas à droite du bloc indiquant qu'une partie du texte ne peut être affichée. Pour supprimer un bloc de texte d'un chaînage Pour chaîner deux blocs ou plus • Sélectionner le bloc et supprimez-le. • Sélectionner l'outil Chaînage. Le texte va s'écouler entre les blocs de texte chaînés restants. Couper un bloc texte chaîné Couper un bloc d'une chaîne est identique à le supprimer. Le texte s'écoulera entre les blocs chaînés restants. • Cliquer sur le premier bloc puis sur chaque bloc successif dans l'ordre désiré d'écoulement du texte. 50 Vous pouvez insérer un saut à un endroit particulier pour que le texte saute au bloc suivant de la chaîne. • Positionner le curseur à l'emplacement où vous désirez le saut. • Ouvrir le menu Insertion et choisir Saut, ou taper COMMAND + RETOUR. Options avancées Pour insérer un saut vers le prochain bloc texte chaîné 51 Options avancées 52 Utiliser des cadres Ce chapitre aborde le pourquoi et le comment de l'utilisation de pages basées sur des cadres dans votre site Web, et décrit les fonctions de Freeway concernant la création de pages avec cadres, la conception et l'édition des cadres et le contrôle du contenu des cadres. Utiliser des cadres Qu'est-ce que les cadres ? Les cadres sont une extension du HTML pour permettre à plusieurs documents d'être affichés dans des sous-fenêtres séparées et autonomes dans la fenêtre du navigateur Web. Sans les cadres, le navigateur affiche une seule page Web dans sa fenêtre et, si la page est trop grande pour la fenêtre du navigateur, des ascenseurs s'affichent pour pouvoir visualiser tout le contenu. Quand vous avez un lien vers une autre page, tout le contenu de la fenêtre est mis à jour avec le contenu de cette page. Dans une page basée sur des cadres, la fenêtre du navigateur Web est découpée en zones séparées, appelées cadres, qui se comportent comme des fenêtres indépendantes. Si le contenu est trop gros pour tenir dans le cadre, des ascenseurs peuvent être affichés pour que le visiteur puisse parcourir le cadre indépendamment du reste de la fenêtre du navigateur Web. Cliquer sur un lien dans un cadre peut faire mettre à jour le contenu de ce cadre, ou remplacer le contenu de n'importe quel autre cadre. Comment les cadres fonctionnent-ils ? La manière de fonctionner des pages avec cadres est conceptuellement assez simple. Quand le visiteur se connecte sur une page avec cadres, il charge la définition du jeu de cadres qui dit au navigateur comment diviser la fenêtre en cadres séparés. Il indique aussi au navigateur le contenu à charger dans chaque cadre et donne des informations sur les propriétés de chaque cadre, en particulier les possibilités de défilement et de changement de taille permises à l'utilisateur. À partir de là, le navigateur se comporte comme si chaque cadre était une fenêtre indépendante. De plus, il existe des extensions mineures au HTML standard permettant au contenu d'un cadre d'affecter le contenu d'un autre cadre. 54 Quelle est l'utilisation des cadres ? L'utilisation la plus commune des cadres est de fournir des barres de navigation statiques qui demeurent visibles même quand on fait défiler ou qu'on change le contenu principal de la page. Par exemple, une page basée sur des cadres peut comporter des boutons en haut de la page, des liens à gauche de la page, et une zone principale que l'utilisateur peut faire défiler : La plupart des concepteurs Web et des standards Web sont maintenant réticents à l'utilisation de cadres. La raison principale en est que la plupart des bénéfices de l'utilisation de cadres ont été démodés par des extensions plus standards du HTML, dont le HTML dynamique et les feuilles de style CSS. De plus, des outils comme Freeway rendent facile, grâce aux maquettes, la conception de sites avec des barres de navigation uniformisées sur chaque page, et réduisent l'intérêt d'utiliser les cadres. Les désavantages des cadres Les principaux désavantages de l'utilisation de cadres sont : Désavantage Explication Moteurs de recherche Les moteurs de recherche comme Google indexent habituellement chaque cadre d'une page séparément, et quand vous allez à la page contenant le terme recherché, c'est uniquement le contenu du cadre qui est affiché au lieu de la page complète avec ses différents cadres. Impression Les navigateurs Web récents impriment uniquement le cadre en cours et l'utilisateur ne peut avoir une copie de la page complète avec tous ses cadres. Signets URL Comme une page avec cadre affiche son contenu à partir de deux ou plusieurs URL, il n'y a aucun moyen d'enregistrer un signet de la page pour pouvoir y revenir avec le contenu exact tel qu'il était au moment de la consultation. Désavantage Explication Problèmes d'accessibilité Les pages basées sur des cadres peuvent poser des problèmes aux visiteurs malvoyants car nombre d'outils conçus pour eux ne fonctionnent pas avec les cadres. Historique du navigateur Les boutons Précédent et Suivant d'un navigateur peuvent donner des résultats inattendus pour des pages avec cadres. En dépit de ces désavantages, de nombreux sites continuent à utiliser des pages avec cadres, et les navigateurs vont très certainement continuer à les supporter. Freeway inclut le support de la conception de pages basées sur des cadres, et rend très facile la conception de telles pages. Utiliser des cadres Pourquoi est-ce que l'utilisation de cadres n'est plus recommandée ? 55 Utiliser des cadres Concevoir avec des cadres • Cliquer sur l'icône correspondant au modèle de cadres désiré. La façon la plus simple de créer avec Freeway une page basée sur des cadres est de choisir une des mises en page prédéfinies. Une nouvelle page avec cadres sera créée dans le document, ainsi que les pages blanches correspondant au contenu de chacun des cadres. Si vous voulez qu'une page soit créée automatiquement pour chacun des cadres de la page : Vous pouvez aussi convertir n'importe quelle page d'un document Freeway en page avec deux ou plusieurs cadres avec les commandes Partage horizontal ou Partage vertical du menu Page. Pour créer une page avec cadres prédéfinie • Ouvrir le menu Page et choisir Nouvelle page avec cadres… dans le sous-menu Cadres. Le dialogue Nouvelle page avec cadres affiche les différents types de cadres prédéfinis : • Choisir un titre pour la page de jeu de cadres. • Choisir la maquette et la largeur de bordure. 56 • Cocher Créer les pages. • Choisir la maquette pour ces pages dans le menu déroulant. • Cliquer sur OK pour créer le jeu de cadres que vous avez spécifié. Par exemple, pour un jeu de cadres avec une barre de navigation en haut, une barre à gauche et une zone principale, Freeway va créer une page pour le jeu de cadres et trois pages de contenu appelées upper, left et main : Éditer des pages avec cadres La palette Cadres facilite la visualisation et la gestion d'un jeu de cadres. Elle montre comment les cadres de la page sont imbriqués, ainsi que l'orientation et le nombre de cadres de chaque jeu. Quand vous sélectionnez une page avec jeu de cadres dans le panneau Site, Freeway affiche la mise en page du jeu de cadres avec le contenu initial de chaque cadre : Quand un cadre est sélectionné dans la fenêtre principale, il est affiché en gris sombre dans la palette Cadres : Utiliser des cadres Utilisation de la palette Cadres Si un objet est sélectionné dans un cadre particulier, ce cadre est affiché avec des hachures : Les icônes en haut de la palette Cadres vous permettent de supprimer le cadre sélectionné, d'ajouter une nouvelle page avec cadres ou un nouveau cadre. De plus, le menu Options offre un ensemble d'options supplémentaires pour la gestion des cadres. 57 Utiliser des cadres Vous pouvez choisir d'éditer directement les pages depuis cette vue, ou vous pouvez sélectionner une des pages du contenu des cadres dans le panneau Site et éditer le contenu de cette page : Pour spécifier la source d'un cadre • Sélectionner le cadre en cliquant dessus dans la fenêtre de Freeway. Le cadre est affiché avec une bordure hachurée grise : • Cliquer sur l'icône des cadres en haut de la palette Inspecteur. • Cliquer sur le triangle d'ouverture de la section Cadre courant pour afficher les réglages de ce cadre. • Sélectionner le document que vous désirez spécifier comme source dans le menu Source : 58 • Cliquer sur Externe et entrer l'URL de la page HTML externe : • Procéder comme précédemment, et choisir Autre… dans le menu Source : Le dialogue Source du cadre affiche les sources possibles et vous permet de choisir une source interne ou externe : Utiliser des cadres Pour spécifier une page HTML externe comme source du cadre Pour définir le contenu à afficher si le visiteur ne peut pas afficher de cadres Chaque page avec cadres peut avoir une page spécifique qui sera affichée si le navigateur du visiteur ne supporte pas les cadres. Habituellement, cette fonction est utilisée pour afficher un message conseillant l'utilisation d'un navigateur plus récent. • Sélectionner la page avec jeu de cadres dans le panneau Site. • Cliquer sur le bouton Sans cadres en bas à droite de la fenêtre de Freeway. 59 Utiliser des cadres Vous pouvez alors éditer le contenu qui sera affiché si les cadres ne sont pas supportés : Spécifier la mise en page de pages basées sur des cadres La page avec son jeu de cadres vous permet de spécifier la mise en page et le comportement des cadres, y compris : • S'il y a une bordure entre les cadres et, si oui, sa largeur. • Si les cadres ont des hauteurs et largeurs fixes, ou si elles changent en proportion de la taille de la fenêtre du navigateur. Si • les ascenseurs sont affichés dans le cas où le contenu du cadre ne tient pas dans celui-ci. Si • un cadre peut être redimensionné par les visiteurs. Pour spécifier la largeur ou la hauteur d'un cadre. Soit : • Dans la fenêtre de Freeway, positionner le pointeur de la souris sur le bord entre deux cadres (le curseur devient une icône de déplacement). Glisser pour modifier la taille du cadre. • Soit : • Cliquer sur le cadre dans la fenêtre du jeu de cadres pour le sélectionner. • Cliquer sur l'icône des cadres dans la palette Inspecteur. • Cliquer sur le triangle pour ouvrir les options de la section Cadre courant. 60 Pour spécifier les ascenseurs des cadres • Cliquer sur l'icône des options de cadres dans la palette Inspecteur. • Dans la section Cadre courant, choisir l'option désirée dans le menu déroulant Ascenseur : • Cliquer sur le bouton px pour spécifier une valeur fixe en pixels, ou sur le Utiliser des cadres • Éditer la taille dans le champ Taille : bouton % pour une taille en pourcentage de la largeur ou de la hauteur de la fenêtre du navigateur. Pour qu'un cadre remplisse la fenêtre du navigateur Un besoin typique pour la barre de navigation en haut d'une page, comme pour la barre sur la gauche, est d'avoir d'une part une taille fixe et d'autre part d'occuper toute la hauteur ou la largeur de la fenêtre du navigateur. • Régler la taille des cadres upper et left avec des valeurs fixes. • Sélectionner le cadre main et décocher la case Taille : Les options suivantes sont disponibles : Option Description Auto Affiche les ascenseurs uniquement lorsque cela est nécessaire au contenu du cadre. Oui Affiche systématiquement les ascenseurs. Non N'affiche jamais les ascenseurs (même si le contenu ne tient pas dans le cadre). Le cadre main va maintenant s'agrandir pour occuper la fenêtre du navigateur. 61 Utiliser des cadres Pour spécifier une bordure entre les cadres Pour ajouter plus de cadres au même niveau • Sélectionner le jeu de cadres. • Cliquer sur l'icône des options de cadres dans la palette Inspecteur. • Dans la section Général éditer la valeur du champ Bordure : • Sélectionner un des cadres existants. • Ouvrir le menu Page, choisir Insérer un cadre… dans le sous-menu Cadres, ou cliquer sur l'icône Ajouter cadre de la palette Cadres : Une boîte de dialogue vous permet de choisir la position où le cadre sera inséré : Les cadres seront affichés avec la bordure que vous avez spécifiée. Pour créer un nouveau jeu de cadres dans un cadre Cette technique est nécessaire quand vous ajoutez des cadres d'une orientation différente de celle des autres cadres de la fenêtre. • Sélectionner le cadre en cliquant dedans. Le cadre est indiqué avec une bordure grise. • Ouvrir le menu Page et choisir Partage vertical ou Partage horizontal dans le sous-menu Cadres. Un jeu de cadres imbriqué est créé dans le cadre, divisant ce cadre en deux parties. Pour chacun de ces deux cadres, on peut indiquer une page source ou le subdiviser avec les commandes Partage vertical ou Partage horizontal. • Spécifier la position du cadre et cliquer sur le bouton OK. Un nouveau cadre est ajouté dans le même jeu de cadres que le cadre sélectionné. Pour ajouter un cadre par glisser-déposer Soit : • Enfoncer la touche OPTION et glisser la bordure de division entre deux cadres du même jeu pour ajouter un nouveau cadre au même niveau. Soit : • Enfoncer la touche OPTION et glisser la bordure de division entre un cadre et le bord de la fenêtre pour ajouter un nouveau cadre dans le même jeu, ou créer un nouveau cadre dans le jeu inclus. 62 Si vous essayez de supprimer un des deux derniers cadres d'une page, Freeway affiche un dialogue vous demandant de confirmer votre choix : • Sélectionner le jeu de cadres, ou un cadre dans ce jeu. • Cliquer sur l'icône des options de cadres dans la palette Inspecteur. • Cliquer sur le triangle Jeu de cadres courant pour l'afficher : • Cliquer sur OK pour supprimer le jeu de cadres et revenir à une page normale. • Cocher la case Vertical si vous désirez un cadre vertical, ou décocher pour un cadre horizontal. Pour supprimer un cadre • Sélectionner le cadre. Soit : • Ouvrir le menu Page et choisir Supprimer le cadre dans le sous-menu Cadres. Soit : • Enfoncer la touche SUPPRESSION ou EFFACEMENT. Soit : • Cliquer l'icône Supprimer dans la palette Cadres. Le cadre sélectionné sera supprimé. Utiliser des cadres Pour changer l'orientation des cadres dans un jeu de cadres Créer des hyperliens dans des pages avec cadres Quand vos visiteurs cliquent sur un hyperlien dans une page avec cadres, dans le comportement habituel la page de destination remplace le contenu du cadre contenant le lien, les autres cadres restant inchangés. Mais vous pouvez aussi définir une cible pour l'hyperlien de façon à ce que la destination soit affichée dans un autre cadre de la page, remplace le contenu de la fenêtre entière du navigateur, ou soit affichée dans une nouvelle fenêtre. Pour spécifier la cible d'un hyperlien • Sélectionner le texte ou le bloc graphique que vous voulez transformer en lien. • Ouvrir le menu Édition et choisir Lien vers…. Le dialogue Édition du Lien vous permet de spécifier la destination du lien et les options de la cible. • Spécifier la destination du lien de la manière habituelle. 63 Utiliser des cadres • Spécifier la cible de l'hyperlien dans le menu Cible. • Pour que la destination soit affichée dans un cadre spécifique, sélectionner le nom du cadre dans le menu Cible : • Les cibles prédéfinies sont décrites ci-dessous : Target Description _parent Affiche la page destination dans le jeu contenant le cadre dans lequel était l'hyperlien. S'il n'y a qu'un seul jeu, le résultat est le même qu'avec l'option _top. _top Affiche la page de destination dans la totalité de la fenêtre du navigateur. _blank Affiche la page de destination dans une nouvelle fenêtre du navigateur. _self Affiche la page de destination dans le cadre contenant le lien. C'est le comportement par défaut. Pour définir la cible par défaut d'une page Vous pouvez définir la cible par défaut pour tous les hyperliens d'une page, et éviter ainsi d'avoir à redéfinir chaque lien individuellement. • Cliquer l'icône des réglages de sortie HTML dans la palette Inspecteur : • Choisir l'option désirée dans le menu Cible. 64 Personnaliser le HTML Ce chapitre décrit les fonctions que Freeway offre pour vous permettre d'insérer du code HTML dans vos pages pour des applications spéciales ou des effets personnalisés. Personnaliser le HTML Inclure des Meta Tags (balises meta) Les balises Meta Tags sont des portions de HTML insérées dans une page et qui ajoutent des informations additionnelles sur le contenu de la page. Ces balises n'affectent pas l'apparence de la page dans un navigateur Web, mais sont utilisées par les moteurs de recherche et les autres outils automatiques du Web. Les balises meta tags les plus communes offrent les fonctions suivantes : Nom Meta Tag Description DESCRIPTION Une description de la page. KEYWORDS Une liste des mots-clés relatifs à cette page. GENERATOR Le nom du logiciel utilisé pour créer le site. REFRESH Charge une autre page automatiquement. Pour définir une nouvelle balise meta tag • Cliquer sur le bouton Nouveau… dans le dialogue Meta Tags. Il vous est proposé d'entrer le nom et la valeur de la balise. • Entrer le nom approprié de la balise meta tag dans le champ Nom et la valeur dans le champ Valeur : Pour ajouter une balise meta tag • Cliquer sur le bouton OK pour ajouter cette balise meta tag. • Ouvrir le menu Page et choisir Meta Tags (Balises Meta)…. La nouvelle balise meta tag est affichée dans le dialogue Meta Tags : Le dialogue Meta Tags affiche la liste des balises déjà définies et vous permet de les éditer et d'en ajouter d'autres : 66 Par défaut, Freeway inclut la balise meta tag GENERATOR avec comme valeur Freeway Pro. • Sélectionner la balise meta tag dans le dialogue Meta Tags. • Cliquer sur le bouton Éditer ou Effacer. Pour charger une autre page automatiquement Le dialogue Meta Tags vous permet de définir des balises meta tags Système. La plus utile est la balise REFRESH qui fait recharger la page après un certain temps, ou charger une autre page automatiquement. • Ouvrir le menu Page et choisir Meta Tags…. • Dans le dialogue Meta Tags cliquer sur System (HTTP-EQUIV) pour afficher les balises Système. Cliquer sur le bouton Nouveau… et taper REFRESH dans le champ • Nom. • Taper une valeur dans le champ Valeur. Par exemple : 5;URL=newpage.html où 5 est le nombre de secondes d'attente avant que la redirection prenne place, et newpage.html est l'URL de la nouvelle page : Ajouter du HTML personnalisé à votre site Freeway offre plusieurs options pour ajouter dans votre site du HTML spécifique personnalisé. Toutes ces méthodes vous permettent d'ajouter du code HTML via l'interface utilisateur de Freeway, et vous n'avez pas besoin d'éditer le HTML directement. Le HTML que vous avez ajouté est enregistré comme partie intégrante de votre site et est automatiquement intégré dans le code HTML généré par Freeway chaque fois que vous publiez ou prévisualisez votre site. Freeway fournit les méthodes suivantes pour ajouter du code HTML à votre site : Personnaliser le HTML Pour éditer ou supprimer une balise meta tag • Ajouter le code à une page spécifique. • Étendre le code généré pour des objets spécifiques. • Faire référence à des contenus externes quand la page est visualisée. • Insérer du code à un point spécifique d'une page. • Importer du HTML externe dans un document. • Utiliser une action Freeway. Ces options sont décrites en détail dans les sections suivantes. Note : Faites attention quand vous ajoutez votre propre code HTML à un site. Les erreurs peuvent ne pas être détectées mais peuvent interférer avec l'apparence correcte de vos pages ou les opérations du site. Pour ajouter du code HTML à une page • Ouvrir le menu Page et choisir Marqueur HTML…. • Choisir une option dans le menu Insérer pour spécifier à quel endroit vous voulez ajouter le code dans la page. 67 Personnaliser le HTML Vous pouvez entrer un morceau de code pour chacune des options du menu Insérer. Pour étendre le code généré pour des objets spécifiques Les options pour lesquelles vous avez défini du code sont affichées soulignées dans le menu : Freeway fournit une commande Extension à différents endroits de l'interface utilisateur pour ajouter des paramètres additionnels à la balise HTML associée avec l'objet que vous avez sélectionné sur la page. Le tableau suivant affiche les différents contextes dans lesquels vous pouvez utiliser la commande Extensions : Contexte Ce qui est affecté Menu Page La balise <body> de la page courante. Dialogue Hyperlien La balise <a>. Menu Bloc pour un bloc graphique La balise <img>. Menu Bloc pour un bloc multimédia La balise <embed>. Menu Bloc pour un tableau La balise <table>. • Sélectionner le bloc que vous désirez étendre, ou aucun bloc pour affecter la page courante. • Cliquer sur le bouton OK pour ajouter le code HTML. Par exemple, pour ajouter du code JavaScript à la page, vous l'ajoutez typiquement dans la section Avant </HEAD>. Vous serez ainsi assuré qu'il sera exécuté avant le corps de la page (BODY) ou le chargement du contenu de la page. 68 • Ouvrir le menu Page ou Bloc et choisir Extensions…. Quand la page est chargée dans un navigateur, le code ajouté fait afficher une alerte JavaScript : • Cliquer sur le bouton Nouveau… pour ajouter une balise et entrer le Référencer un contenu externe nom et la valeur que vous désirez insérer : Personnaliser le HTML La boîte de dialogue vous permet de définir les paires nom/valeur à ajouter à la balise HTML appropriée : Freeway vous permet d'inclure dans votre site du contenu qui se trouve à un emplacement externe. Par exemple une bannière de publicité, un compteur enregistrant le nombre de visiteurs de votre page, ou du texte informant des dernières nouveautés d'un fournisseur externe. Pour référencer du contenu externe dans un bloc URL • Cliquer sur OK pour ajouter la paire nom/valeur. • Cliquer sur le bouton OK pour fermer le dialogue Attributs étendus. • Cliquer sur l'icône HTML de la barre d'outils et dessiner un bloc pour le contenu externe. • Cliquer sur l'icône des réglages de sortie de la palette Inspecteur et choisir URL dans le menu déroulant Type. L'exemple ci-dessus ajoute un paramètre à la balise <body> : <body OnLoad="alert('Veuillez vous enregistrer')"> 69 Personnaliser le HTML • Régler Contenu sur Image pour afficher une image fixe externe, ou HTML pour inclure un morceau de HTML d'un serveur "server side include" et entrer l'URL du contenu externe dans le champ URL : Pour insérer du code à un emplacement spécifique de la page • Ouvrir le menu Insertion et choisir Bloc Marqueur…. Un dialogue vous permet de rentrer le code HTML à insérer dans la page : • Pour définir un texte alternatif pour ce bloc, cocher Texte Alt et taper le texte désiré. Quand vous spécifiez un bloc URL avec Contenu réglé sur Image, l'URL que vous spécifiez est inséré dans la sortie générée par Freeway à l'intérieur d'une balise <img>. Par exemple : • Entrer le code à insérer et cliquer sur le bouton OK. Un bloc marqueur est affiché dans la page : <img src="/cgi-bin/counter.cgi"border=0> Quand vous spécifiez un bloc URL avec Contenu réglé sur HTML, l'URL que vous spécifiez est inséré dans la sortie générée par Freeway dans une instruction #include. Par exemple : <!- - #include virtual="included.inc"- -> Note : Référencer un HTML externe en utilisant la balise #include ne fonctionne que si la page est hébergée sur un serveur Web qui supporte le "server side includes". Vérifiez avec votre ISP si cette option est disponible sur votre serveur. 70 Vous pouvez déplacer et redimensionner le bloc comme vous le désirez sur la page. Le code contenu dans le bloc marqueur sera inséré dans la page à l'endroit correspondant à l'emplacement du bloc dans la page. • Placer le point d'insertion dans un bloc HTML où vous désirez ajouter le bloc marqueur. Le HTML importé ne peut pas être affiché ou édité dans Freeway, mais il sera inséré quand la page sera prévisualisée ou publiée. Par exemple, vous pouvez insérer un message standard de copyright dans un fichier HTML et l'inclure sur chaque page de votre site dans un bloc HTML : • Ouvrir le menu Insertion et choisir Bloc Marqueur…. Une icône sera affichée pour indiquer la position du bloc marqueur : Chaque fois que le site est publié, la dernière version du texte de copyright sera incorporée sur chaque page du site. Personnaliser le HTML Pour ajouter un bloc marqueur dans un texte • Pour éditer le code HTML, double-cliquer sur l'icône. Pour importer un contenu HTML dans un bloc HTML Si vous avez un morceau de code HTML standard que vous désirez inclure dans une page existante, vous pouvez importer un fichier texte HTML dans un bloc HTML. • Sélectionner le bloc HTML : • Ouvrir le menu Fichier et choisir Importer…. • Sélectionner le fichier contenant le bout de code HTML et cliquer sur le bouton Ouvrir. 71 Personnaliser le HTML 72 Raccourcis clavier Ce chapitre décrit les raccourcis clavier disponibles dans Freeway. Raccourcis clavier 74 Menu Édition Menu Freeway Raccourci Commande Raccourci Command Command , Préférences… Command Z Annuler Command H Masquer Freeway Pro Command X Couper Command Option H Masque les autres Command C Copier Command Q Quitter Freeway Pro Command Option C Copier contenu Command Shift Option C Copier en tant qu'image (externalise le presse-papiers) Command V Colle Command B Effacer contenu Command A Tout sélectionner Command K Lien vers… Command Shift Option K Suivre le lien…/Vérifier le lien… Command Shift A Ancre… Command F Chercher… Command G Chercher suivant Command Shift G Chercher précédent Command Control H Chercher sélection Command Shift Control H Chercher sélection précédente Command R Remplacer… Command T Remplacer suivant Command Shift T Remplacer précédent Menu Fichier Raccourci Commande Command N Nouveau… Command O Ouvrir… Command Option O Ouvrir sauvegarde… Command W Fermer Command Option W Tout fermer Command S Enregistrer Command Shift S Enregistrer sous… Command E Importer Texte…/Importer… Command Option E Exporter… Command P Publier le site Command Control P Tout publier Command Option B Prévisualiser (navigateur par défaut) Command U Transférer… Command Raccourci Commande Command L Orthographe… Command Shift K Graphique : Taille originale Command Shift D Graphique : Ajuster le bloc à l'image Command Shift M Graphique : Centrer Menu Page Raccourci Commande Command Shift F Graphique : Ajuster au bloc Command Option N Nouvelles pages… Command Shift Option F Graphique : Ajuster et centrer Command Option F Réglages formulaire… Command Shift Option . Graphique : Agrandir Command Shift Option , Graphique : Réduire Command Effacer Tableau : Réunir cellules Menu Bloc Raccourci Commande Command Option T Transformer… Command Option Shift M Modifier…/Modifier Texte… Raccourci Commande Command Option X Extensions… Command Shift \ Taille : Autre… Command Option L Verrouiller Command Shift . Taille : Taille supérieure Command Shift Option L Déverrouiller Command Shift , Taille : Taille inférieure Command = Au premier plan Command Shift Option . Taille : Agrandir taille Command - À l'arrière-plan Command Shift Option , Taille : Réduire taille Command / Aligner sur la grille Command Shift P Style : Normal Command Option G Grouper/Dégrouper Command Shift B Style : Gras Command Y Aligner… Command Shift I Style : Italique Command T Espacer… Command Shift U Style : Souligné Command D Dupliquer… Command Shift W Style : Mot souligné Raccourcis clavier Raccourci Menu Style 75 Raccourcis clavier 76 Raccourci Commande Raccourci Commande Command Shift O Style : Contour Command Shift ; Interligne : Diminuer de 1px ou 10% Command Shift Option \ Largeur : Autre… Command Shift Option ‘ Command Shift 9 Largeur : Augmenter largeur de 5% Interligne : Augmenter de 1/10 px ou 1% Command Shift 0 Largeur : Diminuer largeur de 5% Command Shift Option ; Interligne : Diminuer de 1/10 px ou 1% Command Option Shift 9 Largeur : Augmenter largeur de 1% Command Option Shift 0 Largeur : Diminuer largeur de 1% Command Shift ] Espacement : Augmenter de 5% Raccourci Commande Command Shift [ Espacement : Diminuer de 5% Command Enter Saut (au bloc suivant du chaînage) Command Shift Option ] Espacement : Augmenter de 1% Shift Retour Nouvelle ligne Command Shift Option [ Espacement : Diminuer de 1% Command Shift Retour Filet Command Shift = Décalage : Monter de 5% Command Shift - Décalage : Descendre de 5% Command Shift Option = Décalage : Monter de 1% Raccourci Commande Command Shift Option - Décalage : Descendre de 1% Command Option Z Zoom… Command Shift L Alignement : Gauche Command 1 Taille réelle Command Shift C Alignement : Centrer Command 0 Ajuster à la fenêtre Command Shift R Alignement : Droite Command Shift Option I Caractères invisibles Command Shift J Alignement : Justifié Command Shift Option O Contours Command Shift Option J Alignement : Forcé Command Shift Option T Titres Command Shift E Interligne : Autre… Command Shift Option G Guides Command Shift ‘ Interligne : Augmenter de 1px ou 10% Command Shift Option P Prévisualisation des images Menu Insertion Menu Affichage Commande Raccourci Commande Command Shift Option H Mise en page HTML Shift Flèche gauche Surligne le caractère précédent Command [ En arrière Shift Flèche bas Surligne la ligne suivante Command ] En avant Shift Flèche haut Surligne la ligne précédente Command Option M Maquette Option Shift Flèche droite Command Option P Prévisualisation dans Freeway Surligne le texte jusqu'au début du mot suivant Command Option R Masquer/Afficher les règles Option Shift Flèche gauche Surligne le texte depuis le début du mot Command Option S Masquer/Afficher le panneau Site Option Shift Flèche bas Surligne le texte jusqu'au début du paragraphe suivant Option Shift Flèche haut Surligne le texte depuis le début du paragraphe Menu Fenêtre Raccourci Commande Option Flèche droite Aller au début du mot suivant Command Shift N Nouvelle fenêtre Option Flèche gauche Aller au début du mot précédent Command Option I Inspecteur Option Flèche bas Aller à la fin du paragraphe Command Option Y Styles et Couleurs Option Flèche haut Aller au début du paragraphe Command Option A Actions Command Flèche gauche Aller au début de la ligne Command Shift H Masquer/Afficher les palettes Command Flèche droite Aller à la fin de la ligne Command Flèche haut Aller au début du bloc de texte Command Flèche bas Aller à la fin du bloc de texte Shift Effacer Efface le caractère suivant Sélection et édition de texte Raccourci Commande Retour Place le curseur de texte dans le bloc sélectionné Shift Flèche droite Surligne le caractère suivant Raccourcis clavier Raccourci 77 Raccourcis clavier 78 Graphiques Blocs Raccourci Commande Raccourci Commande Enfoncer Shift et dessiner Contraint le forme à un carré/cercle Command Option T Affiche le dialogue Transformation Commencer à dessiner et enfoncer Option Dessine du centre Command Shift K Restaure l'image à sa taille originale Touches flèches Déplace le bloc par pas Command Shift D Ajuste le bloc à l'image Option + flèches Déplace par 1/10 de pas (minimum 1 pixel) Command Shift M Centre l'image dans le bloc Command Shift F Ajuster l'image au bloc Shift + flèches Redimensionne le bloc par pas Command Shift Option F Shift Option + flèches Redimensionne le bloc par 1/10 de pas (minimum 1 pixel) Ajuster l'image au bloc en conservant les proportions Command Shift Option . Agrandir le contenu de 5% Glisser poignées et Shift Contraint le forme à un carré/cercle Command Shift Option , Réduire le contenu de 5% Glisser poignées et Option Shift Contraint en gardant les proportions (et ajuste l'image) Commencer à redimensionner le bloc puis enfoncer Control Préserver la taille temporairement Command Shift D Ajuster le bloc à l'image Mettre à l'échelle temporairement Glisser + Shift Déplacement horizontal ou vertical Commencer à redimensionner le bloc puis enfoncer Command Glisser avec l'outil Choix puis enfoncer Option Déplace et clone le bloc Commencer à redimensionner puis enfoncer Command Option Mettre à l'échelle et centrer temporairement Glisser avec l'outil Rotation puis enfoncer Option Tourne et clone le bloc Commencer à redimensionner le bloc puis enfoncer Option Mettre à l'échelle et tailler temporairement Glisser avec l'outil Inclinaison puis enfoncer Option Incline et clone le bloc Glisser avec l'outil Miroir puis enfoncer Option Effet miroir et clone le bloc Shift + cliquer sur le bloc Ajoute le bloc à la sélection Raccourci Commande Raccourci Commande Command Clic sur une cellule Sélectionner une cellule Retour ou Enter OK dans le dialogue Command Option Clic sur une cellule déjà sélectionnée Sélectionner le tableau Escape Annuler dans le dialogue Command Clic n'importe où dans un tableau et glisser Déplacer un tableau Tab Sélectionne le texte suivant dans le dialogue ou la palette Sélectionner des cellules et taper Command Effacer Joindre les cellules Shift Tab Sélectionne le texte précédent dans le dialogue ou la palette Cliquer sur la bordure entre deux lignes ou colonnes et glisser pour redimensionner Redimensionne une ligne ou une colonne (affecte la taille globale du tableau) Command clic sur la couleur d'une palette Affiche le dialogue Couleurs Clic sur la bordure entre deux lignes ou colonnes et glisser + Command Redimensionne une ligne ou une colonne sans modifier la taille du tableau Command clic sur un style surligné dans la palette Styles et Couleurs Supprime le style du texte ou bloc sélectionné Édite le nom du style Clic sur la bordure entre deux lignes ou colonnes et glisser + Option Insère une ligne ou une colonne Option clic sur un nom de style dans la palette Styles et Couleurs Édite le nom Command B Efface le contenu des cellules sélectionnées Option clic sur un nom dans le panneau Site Option clic sur un nom de couleur dans la palette Styles et Couleurs Édite le nom de la couleur Command Control Tab Affiche la palette des outils et sélectionne l'outil suivant Command Control Shift Tab Affiche la palette des outils et sélectionne l'outil précédent Raccourcis clavier Boîtes de dialogue et palettes Tableaux 79 Raccourcis clavier Contrôle du Zoom Raccourci Commande Control Shift clic ou Control Shift glisser Agrandir Control Shift Option clic Réduire Caractères de texte spéciaux Raccourci Commande Option - Tiret cadratin Shift Option - Tiret demi-cadratin Option Space Espace insécable Option [ “ Shift Option [ ” Option ] ‘ Shift Option ] ’ Général 80 Raccourci Commande Control clic sur un objet Affiche un menu contextuel avec les commandes concernant cet objet.