- Ordinateurs et électronique
- Logiciel
- Logiciels multimédia
- Logiciels graphiques
- Serif
- SERIF WEBPLUS X4
- Manuel du propriétaire
Manuel du propriétaire | Serif SERIF WEBPLUS X4 Manuel utilisateur
Ajouter à Mes manuels152 Des pages
▼
Scroll to page 2
of
152
![Manuel du propriétaire | Serif SERIF WEBPLUS X4 Manuel utilisateur | Fixfr Manuel du propriétaire | Serif SERIF WEBPLUS X4 Manuel utilisateur | Fixfr](http://vs1.fixfr.com/store/data/000640902_1-5376da5f56515ca07a32e94554b38673-360x466.png)
WebPlus X4 Manuel d’utilisation Le manuel et le logiciel qu'il décrit font l'objet d'un contrat de consommateur final inclus dans le produit. Le contrat en indique les usages autorisés et interdits. Images ©1997-2002 Nova Development Corporation ; ©1995 Expressions Computer Software ; ©1996-98 CreatiCom, Inc. ; ©1996 Cliptoart ; ©1996-99 Hemera ; ©1997 Multimedia Agency Corporation ; ©1997-98 Seattle Support Group. Les droits de chacune de ces sociétés sont réservés. Images numériques ©2008 Hemera Technologies Inc. Tous droits réservés. Images numériques ©2008 Jupiterimages Corporation. Tous droits réservés. Images numériques ©2008 Jupiterimages France SAS. Tous droits réservés. Contenu ©2008 Jupiterimages Corporation. Tous droits réservés. Technologie d'exportation/d'importation des images © AccuSoft Corp. & Eastman Kodak Company & LEAD Technologies, Inc. THE PROXIMITY HYPHENATION SYSTEM © 1989 Proximity Technology Inc. Tous droits réservés. THE PROXIMITY/COLLINS DATABASE © 1990 William Collins Sons & Co. Ltd. ; © 1990 Proximity Technology Inc. THE PROXIMITY/MERRIAM-WEBSTER DATABASE © 1990 Merriam-Webster Inc. ; © 1990 Proximity Technology Inc. Correcteur orthographique Sentry © 2000 Wintertree Software Inc. Thésaurus ThesDB © 1993-97 Wintertree Software Inc. Correcteur grammatical WGrammar © 1998 Wintertree Software Inc. Andrei Stcherbatchenko, Ferdinand Prantl eBay © 1995-2008 eBay Inc. Tous droits réservés. PayPal © 1999-2008 PayPal. Tous droits réservés. Roman Cart © 2008 Roman Interactive Ltd. Tous droits réservés. Mal's © 1998 à 2003 Mal's e-commerce Ltd. Tous droits réservés. iTunes © 2000 à 2008 Apple Computer, Inc. Tous droits réservés. YouTube © 2008 YouTube, LLC phpBB © 2000, 2002, 2003, 2007 phpBB Group FontForge © 2000,2001,2002,2003,2004,2005,2006,2007,2008 par George Williams. Des parties de ce logiciel sont font l'objet d'un copyright © 2008 The FreeType Project (www.freetype.org). Tous droits réservés. ODF Translator © 2006-2008, Clever Age, DIaLOGIKa, Sonata Software Ltd. Tous droits réservés. Office Binary Translator to OpenXML Copyright © 2008-2009, DIaLOGIKa. Tous droits réservés. Anti-Grain Geometry - Version 2.4 Copyright © 2002-2005 Maxim Shemanarev (McSeem) SlideShowPro © Dominey Design Inc. Tous droits réservés. Echantillons de cliparts fournis par Serif ArtPacks © Serif (Europe), Ltd. et Paul Harris Echantillons de polices TrueType extraits de Serif FontPacks © Serif (Europe) Ltd. Microsoft, Windows et le logo Windows sont des marques déposées de Microsoft Corporation. Toutes les autres marques sont reconnues. WebPlus est une marque enregistrée de Serif (Europe) Ltd. © 2009 Serif (Europe) Ltd. Tous droits réservés. Il est interdit de reproduire tout ou partie du manuel sous quelque forme que ce soit sans l'accord exprès écrit de Serif (Europe) Ltd. Serif WebPlus X4 © 2009 Serif (Europe) Ltd. Table des matières 1 Introduction__________________________________________________________________________________ 6 1.1 1.2 1.3 1.4 2 6 6 6 6 6 6 7 8 8 8 9 9 9 10 10 10 11 11 Démarrage __________________________________________________________________________________ 12 2.1 2.2 2.3 2.4 2.5 2.6 3 Bienvenue 1.1.1 Mise à niveau ? 1.1.2 Enregistrement Caractéristiques principales 1.2.1 Mise en page 1.2.2 Informations essentielles pour la conception d'un site Web 1.2.3 Images 1.2.4 Média 1.2.5 Images 1.2.6 Texte 1.2.7 Publication Web Nouvelles fonctions 1.3.1 Plus puissant 1.3.2 Plus de créativité 1.3.3 Simplicité d'emploi 1.3.4 Images 1.3.5 Texte Nous contacter Assistant de démarrage Créer un site à partir d'un modèle Créer un site de toutes pièces Ouvrir un site existant 2.4.2 Remplacement des polices Travailler sur plusieurs sites Enregistrer votre site Web 12 12 14 14 15 15 15 Développer des sites et des pages ______________________________________________________________ 16 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 Présentation de la structure du site et de la navigation 3.1.1 Structure du site 3.1.2 Navigation Présentation des pages et des maquettes Afficher les pages 3.3.2 Passer d'une page à une autre Ajouter, supprimer et réorganiser les pages 3.4.2 Réorganiser les pages 3.4.3 Affecter une maquette particulière 3.4.4 Affecter plusieurs maquettes Ajouter des barres de navigation 3.5.1 Types de navigation 3.5.2 Créer des barres de navigation 3.5.3 Personnaliser des barres de navigation 3.5.4 Utiliser des styles de barre de navigation 3.5.5 Inclure/exlure des pages dans la navigation 3.5.6 Utiliser des séparateurs de pages dans des menus déroulants 3.5.7 Utiliser des barres de navigation dynamiques 3.5.8 Tester vos barres de navigation Utiliser les outils de mise en page 3.6.2 Création de repères de règles 3.6.3 Règles 3.6.4 Des règles comme outil de mesure 3.6.5 Utiliser la grille de points Définir les propriétés du site 3.7.2 Définir la taille et l'alignement de la page Définir les propriétés de la page Utiliser le Gestionnaire de site 16 16 17 17 18 18 19 22 22 22 23 24 24 25 26 27 27 27 27 28 28 29 29 30 30 31 32 33 ii Table des matières 3.10 3.11 3.12 3.13 3.14 3.15 4 4.3 4.4 4.5 4.6 5.4 48 49 49 49 50 51 51 52 52 54 55 55 57 57 57 58 Définir les propriétés du texte Utiliser les polices Utiliser les styles de texte 5.3.1 Styles de paragraphe et styles de caractère 5.3.2 Utiliser des styles nommés Créer une liste à puces ou numérotée 59 59 60 60 60 61 Utiliser des tableaux__________________________________________________________________________ 63 6.1 6.2 7 Importer du texte à partir d'un fichier Utiliser les zones de texte 4.2.1 Qu'est-ce qu'une zone de texte ? 4.2.2 HTML et zones créatives 4.2.3 Création de zones de texte 4.2.4 Placer du texte dans une zone de texte 4.2.5 Configuration et mise en forme des zones créatives 4.2.6 Gestion des dépassements du texte (zones HTML) Utiliser le texte artistique Aligner du texte sur tracé Éditer le texte sur la page 4.5.1 Sélectionner et saisir du texte 4.5.2 Copier, coller et déplacer un texte 4.5.3 Définir des retraits de paragraphe 4.5.4 Utiliser du texte Unicode Utiliser la fonction Rechercher et remplacer Mettre en forme des caractères et des paragraphes _______________________________________________ 59 5.1 5.2 5.3 6 34 35 36 37 38 38 39 39 40 40 41 41 42 43 44 45 46 Utiliser du texte______________________________________________________________________________ 48 4.1 4.2 5 Contrôle d'accès 3.10.1 Configurer votre objet intelligent Liste d'utilisateurs 3.10.2 Ajouter des utilisateurs (manuellement ou par inscription) 3.10.3 Activer le contrôle d'accès 3.10.4 Ajouter un champ d'identification 3.10.5 Contrôle de l'utilisateur avancé 3.10.6 Contrôle d'accès pour les forums, les blogs et le SGC Optimisation pour les moteurs de recherche 3.11.1 Utiliser les méta-balises de descripteurs des moteurs de recherche 3.11.2 Exclure des pages de l'indexation (méta-balises "robots") 3.11.3 Exclure des pages de l'indexation (fichier "robots") 3.11.4 Inclure les pages dans l'indexation Effectuer une recherche sur des sites Web Utiliser la Galerie Ajouter une carte Google 3.14.2 Utiliser des cartes Google avancées Ajouter une publicité Créer des tableaux de texte 6.1.1 Tableaux HTML et tableaux créatifs Insérer un calendrier 6.2.2 Ajouter des vacances 6.2.3 Ajouter des événements personnels 63 63 64 65 66 Editer les objets de la page ____________________________________________________________________ 67 7.1 7.2 7.3 7.4 7.5 7.6 7.7 Sélectionner un objet Sélectionner plusieurs objets Copier, coller et dupliquer des objets 7.3.2 Dupliquer des objets 7.3.3 Reproduire la mise en forme d'un objet Déplacer des objets Redimensionner des objets Faire pivoter un objet Recadrer et combiner des objets 67 67 68 69 69 70 70 71 72 iii WebPlus X4 Manuel d’utilisation 7.8 7.9 7.10 8 73 73 74 74 75 Organiser des objets _________________________________________________________________________ 77 8.1 8.2 8.3 8.4 8.5 9 7.7.2 Recadrer une forme d'après le contour d'une autre forme 7.7.3 Combiner des lignes et des formes Joindre les contours d'objets Verrouiller la taille ou l’emplacement d’un objet Mettre à jour et enregistrer les paramètres par défaut Agencer les objets Aligner et répartir des objets Magnétisme 8.3.2 Magnétisme à l'aide des guides dynamiques Associer un objet au texte Créer des groupes 77 77 78 78 78 80 Lignes, contours, formes et effets ______________________________________________________________ 81 9.1 9.2 9.3 9.4 9.5 9.6 9.7 9.8 Tracer et modifier des lignes 9.1.1 Tracer des lignes 9.1.2 Éditer des lignes Définir les propriétés du contour Tracer et modifier des formes 9.3.1 Formes pleines 9.3.2 Formes fermées Appliquer des effets de filtre 2D 9.4.2 Créer des réflexions 9.4.3 Créer des contours 9.4.4 Erreur ! Signet non défini.Utiliser l'outil Ombre Appliquer des effets de filtre 3D Ajouter une troisième dimension (3D instantanée) Ajouter des bordures Utiliser les styles d'objets 9.8.2 Enregistrer des styles d'objet 81 81 82 82 83 84 84 85 86 86 87 87 88 89 90 91 10 Images, animation et multimédia _______________________________________________________________ 92 10.1 10.2 10.3 10.4 10.5 10.6 10.7 10.8 10.9 Ajouter des cadres d'image Importer des images 10.2.2 Remplacer des images 10.2.3 Ajuster les images recadrées 10.2.4 Intégrer ou associer Utiliser la Barre des médias 10.3.2 Ajouter des photos à la page Définir les options d'exportation des images 10.4.2 Définir des options d'exportation, un titre et un texte de remplacement pour chacune des images 98 Importer des images TWAIN Appliquer des filtres PhotoLab 10.6.2 Appliquer un filtre 10.6.3 Retoucher 10.6.4 Masquage sélectif 10.6.5 Enregistrer des favoris 10.6.6 Quitter PhotoLab Utiliser le Studio de découpe d'images 10.7.2 Choisir un format de rendu 10.7.3 Sélectionner les zones à conserver ou supprimer Ajouter des animations 10.8.1 Textes défilants 10.8.2 Fichiers Flash Ajouter du son et de la vidéo 10.9.1 Son 10.9.2 Vidéo 92 93 94 94 95 95 97 97 99 99 100 101 101 102 102 102 103 104 105 105 105 106 106 106 11 Couleur, remplissages et transparence _________________________________________________________ 109 iv Table des matières 11.1 11.2 11.3 11.4 Appliquer des couleurs unies Utiliser des combinaisons de couleurs 11.2.1 Comment fonctionnent les combinaisons de couleurs ? 11.2.2 Couleurs supplémentaires 11.2.3 Appliquer des couleurs de combinaisons à des objets 11.2.4 Modifier les combinaisons de couleurs Utiliser les remplissages en dégradé et bitmap 11.3.1 Appliquer un remplissage dégradé ou bitmap Définir la transparence 11.4.1 Appliquer de la transparence 11.4.2 Définir la transparence par défaut 109 110 111 111 112 112 113 113 113 114 115 12 Ajouter des liens hypertextes et de l'interactivité _________________________________________________ 116 12.1 12.2 12.3 12.4 12.5 Ajouter des liens hypertextes et des ancres 12.1.2 Insérer une ancre Ajouter des zones dynamiques à la page 12.2.2 Modifier des zones dynamiques Ajouter des images survolées Options des images survolées 12.4.2 Créer des variantes des images sources Ajouter des images survolées (popups) 116 117 118 119 119 119 120 120 13 Ajouter du contenu dynamique________________________________________________________________ 123 13.1 13.2 13.3 13.4 13.5 13.6 Créer des pages HTML Joindre un code HTML 13.2.1 Ajouter du code HTML 13.2.2 Ajout de code JavaScript 13.2.3 Utilisation d'identifiants 13.2.4 Marqueurs Ajouter des formulaires 13.3.1 Structure des formulaires 13.3.2 Créer des formulaires 13.3.3 Éléments de formulaire 13.3.4 Modifier les éléments de formulaire 13.3.5 Transmission de formulaires Flux RSS et podcasts 13.4.1 Créer des flux RSS ou des podcasts 13.4.2 Soumission de podcasts 13.4.3 Abonnement 13.4.4 Inclure des flux tiers E-commerce 13.5.1 Qu'est-ce que l'E-Commerce 13.5.2 Insérer un objet E-Commerce (PayPal) Objets intelligents 13.6.1 Les objets intelligents 123 124 124 125 127 128 128 128 129 130 132 132 134 134 136 136 137 138 138 139 141 141 14 Imprimer, prévisualiser et publier sur le Web ____________________________________________________ 147 14.1 14.2 Afficher un aperçu de votre site Web Publier le site sur le Web 14.2.2 Gérer les informations du compte FTP 14.2.3 Opération automatique 14.2.4 Résolution des problèmes 14.2.5 Consulter votre site en ligne 14.2.6 Publication rapide 14.2.7 Créer des fichiers PDF 147 148 150 150 151 151 151 152 v 1 Introduction 1.1 Bienvenue Bienvenue dans WebPlus X4, la solution la plus simple pour présenter votre entreprise, votre association ou votre famille sur le Web ! Pour vous faciliter la vie, WebPlus est fourni avec une impressionnante sélection de modèles, de barres de navigation, de galeries créatives et de styles. Ainsi, une publication de qualité professionnelle est possible pour les utilisateurs expérimentés comme pour les débutants ! Vous pourrez également réutiliser un contenu textuel existant en important des documents provenant d'un traitement de texte. Pour tirer le meilleur parti des images de votre site, vous pouvez utiliser le Studio de découpe d'images pour découper les images, et PhotoLab pour un réglage performant des images et des combinaisons d'effets. Vous ne pouvez pas les rater ! WebPlus X4 ne se contente pas de vous offrir une publication Web "statique", toute sa puissance n’est réellement visible que lorsque vous ajoutez et gérez du contenu dynamique, tel que des blogs, des forums, des Systèmes de gestion de contenu (SGC), des compteurs, etc. Vous pouvez même faire appel aux outils Ecommerce pour accéder à la fonction de panier d'achat. Une fois satisfait de votre site WebPlus, chargez-le simplement sur votre espace Web Serif (ou chez un FAI équivalent) pour le partager avec vos collègues, vos clients, vos amis ou votre famille. Pour un résumé plus détaillé des fonctions de WebPlus , reportez-vous à la rubrique Caractéristiques principales. 1.1.1 Mise à niveau ? Si vous avez effectué une mise à niveau à partir d'une version antérieure du produit, cette nouvelle édition de WebPlus inclut une multitude de nouvelles fonctionnalités intéressantes grâce auxquelles WebPlus dame le pion à ses concurrents, pour un prix inférieur ! Nous espérons que vous apprécierez cette amélioration des performances. 1.1.2 Enregistrement N'oubliez pas d'enregistrer votre copie du logiciel à l'aide de l'Assistant d'enregistrement, dans le menu Aide. Vous serez ainsi informé des nouveaux développements et des mises à jour à venir. 1.2 Caractéristiques principales Avant de prendre en main WebPlus, nous vous recommandons de vous familiariser avec les principales caractéristiques et fonctionnalités de WebPlus. 1.2.1 Mise en page • Modèles de conception multipage Concevez des sites Web "sur-mesure" et en un clin d'œil d'après un modèle et un thème défini. Choisissez un modèle de présentation parmi les nombreuses catégories. • Outils professionnels de mise en page Des règles déplaçables, des repères et une grille de points servent d'aides à la mise en page et vous permettent de positionner les objets avec précision. Grâce au magnétisme, collez un objet à un guide ou une grille. Utilisez les guides magnétiques, une méthode commode pour déplacer simultanément tous les objets collés par magnétisme à vos repères. Déplacez le guide et les objets suivront ! • Contrôle des pages Ajoutez et supprimez des pages en quelques clics sous l'onglet Site. Glissez-déposez des pages sous l'onglet pour réorganiser la sélection. Affectez des maquettes à plusieurs pages d'un site simultanément pour gagner du temps et garantir une meilleure homogénéité dans la conception. 1.2.2 Informations essentielles pour la conception d'un site Web • Structurez votre site en toute simplicité L'onglet hiérarchique Site vous offre un aperçu global de la mise en page de votre site. 6 Introduction • Barres de navigation Faites votre choix parmi le vaste éventail de barres de navigation, avec divers styles et modèles au choix. • Outil Champ de recherche Effectuez des recherches sur le texte de la totalité du site Web à l'aide du puissant outil Champ de recherche. • Optimisation pour les moteurs de recherche Contrôlez la manière dont les moteurs de recherche indexent votre site Web. Il est possible d'inclure ou d'exclure des pages de l'indexation en utilisant un fichier de moteur de recherche sitemap ou des fichiers robot. Protégez vos données personnelles tout en offrant aux visiteurs potentiels de votre site des informations précises dans les résultats de recherche. • Objets intelligents Les ressources Web Serif, le service d'hébergement d'objets intelligents, propose une série de fonctionnalités de site interactif : • Forum Encourage les discussions animées basées sur un flux dans une fenêtre grand format. Vous pouvez créer plusieurs forums et les gérer indépendamment (en modérant les discussions et en définissant les autorisations d'accès). • Liste d'utilisateurs Permet de contrôler l'accès à une page ou au site en gérant de groupes d'utilisateurs réunis par "zone" (par exemple : Personnel). Les internautes peuvent s'inscrire à l'aide d'un identifiant (avec activation facultative par courrier électronique). • Statistiques Collecte et présente les statistiques des pages Web relatives aux visites sur le site, aux informations sur le navigateur, les référents et les termes de recherche. • Messages Pour des messages simples annonçant les mises à jour du site ou les prochaines dates de réunion de l'association. • Blogs Ajoutez des profils personnels, des signets et utilisez des rétroliens pour le référencement croisé inter-blog. Modifiez l'apparence du blog en utilisant différents styles visuels prédéfinis (ou utilisez votre propre style !) Utilisez des groupes d'éditeurs pour la publication d'articles multi-auteurs. • Cadres flottants actifs Les liens hypertextes peuvent ouvrir une page dans un cadre de document sur une autre page. Définissez une URL absolue pour une navigation plus précise entre les cadres. • Outils de gestion de site Gérez toutes les propriétés des pages et des maquettes, les ressources, les polices, le texte, les liens hypertextes et les ancres depuis le Gestionnaire de site de WebPlus. Les pages Web peuvent être gérées individuellement, par sélection ou globalement. Le Vérificateur de site analyse la navigation sur le site, la mise en forme du texte les problèmes rencontrés par les formulaires ou l'e-commerce et tente d'y remédier automatiquement. 1.2.3 Images • Importer des images Importez des formats de fichier standard, notamment tous les plus récents formats RAW pour appareils photo numériques et fichiers Photoshop. Importez plusieurs images et collez-les une par une. • Des photos plus accessibles grâce à la Barre des médias Finie l'importation répétitive des photos ! Toutes vos photos sont à portée de clic dans la nouvelle Barre des médias. Il suffit de faire glisser-déplacer les photos depuis la Barre des médias sur les photos à remplacer. Recherchez des photos en utilisant les métadonnées. Contrôlez les dimensions et l'alignement des photos dans leur cadre. • Des galeries photos en ligne extraordinaires ! Étonnez vos amis, votre famille et vos collègues par des galeries photos basées Flash. Divers styles de galerie permettent de parcourir les photos sous forme de miniatures, des miniatures avec effet de survol, des planches ou des piles de photos. Utilisez la fonction de lecture automatique pour la lecture en boucle des diaporamas. • Réglages d'images Appliquez des réglages (luminosité, contraste, yeux rouges, etc.) ou sélectionnez Éditer dans PhotoPlus pour accéder au produit de retouche d'image de Serif, unanimement salué (s'il est installé). • Un format métafichier polyvalent Importez et exportez des métafichiers Serif (.SMF), un format d'image propriétaire avec des améliorations du format Windows Metafile (WMF). Grâce à de meilleures définitions de ligne, de remplissage et de texte, ces fichiers sont parfaits pour le partage d'images entre les différentes applications Serif. 7 WebPlus X4 Manuel d’utilisation • Image survolée (Popup) Créez votre propre galerie photos — affichez une version agrandie d'une photo en cas de survol de sa miniature par la souris. 1.2.4 Média • Vidéos YouTube® Choisissez vos vidéos YouTube préférées et insérez-les dans votre page Web. • Podcasts Créez vos propres flux podcast et diffusez régulièrement vos propres épisodes audio et vidéo. Les visiteurs Web peuvent s'abonner en utilisant tous les navigateurs Web connus et via Google Reader®, My Yahoo!® et Apple iTunes®. 1.2.5 Images • Outils de dessin Dessinez d'intéressantes images vectorielles à l'aide des outils Crayon, Stylo et Ligne droite, et ajoutez des fins de ligne telles que des têtes de flèche, des losanges ou des stylos plumes. Par ailleurs, la gamme de Formes pleines entièrement personnalisables vous permet de créer rapidement des contours pour vos objets, tandis que les options Convertir en courbes et Recadrer, ainsi que le tracé de courbes, offrent une totale flexibilité vous permettant de créer toutes les formes possibles et imaginables ! Les enveloppes de maillage ajoutent une perspective, une inclinaison ou un bombement à tout objet. • Styles prêts à l'utilisation Sous l'onglet Styles, sélectionnez divers effets de filtre, des lumières, des ombres, des textures et des matériaux. Personnalisez les styles prédéfinis ou créez-en. • Transparence Ajoutez une transparence à vos arrière-plans, zones de texte, tableaux, formes et textes pour obtenir un résultat professionnel. Comme avec les remplissages de couleur, vous pouvez appliquer des transparences unies, dégradées et bitmap, et même créer des transparences bitmap à partir de votre collection d'images. • Combinaisons de couleurs intelligentes Choisissez en un clic parmi une douzaine de combinaisons de couleurs installées pour modifier l'apparence générale de votre site. • Nouveaux effets de filtre 2D/3D Ajoutez des reflets sur un objet. C'est idéal pour les titres des pages Web et les photos ! Floutez un objet ou tracez un trait de couleur unie ou dégradée sur les contours d'un objet (trait ayant un nouveau remplissage Contour qui applique un remplissage dégradé depuis le contour intérieur jusqu'au contour extérieur). Les effets 3D sont renforcés par des imitations de verre réalistes, comme le contrôle de la transparence de surfaces réfléchissantes et non réfléchissantes et divers éclairages colorés. Tous les effets de filtre peuvent être appliqués en mode d'aperçu ou à l'objet sur la page. Utilisez le nouvel outil Ombre pour contrôler l'ombre sur la page. • 3D Instantanée avec transformations à l'écran Transformez des objets 3D in situ grâce aux fonctions d'édition 3D d'une barre d'outils contextuelle. Appliquez des effets de lumière multicolores fantastiques (avec contrôle directionnel) avec des profils de biseau et de tour pour créer des contours personnalisés uniques. L'accélération matérielle du rendu améliore considérablement les performances de retraçage (fonctionnalité dépendante de votre matériel). 1.2.6 Texte • Texte artistique et zone de texte WebPlus gère le texte de la même manière qu'un outil de traitement de texte. Le texte artistique peut être utilisé pour rendre votre site Web encore plus original. Il s'adapte particulièrement bien aux titres et à l'ajout à un tracé. Les cadres de texte HTML assurent la compatibilité HTML, tandis que les zones de texte créatives peuvent être automatiquement remplies avec du texte grâce à l'option Création automatique ou par un ajustement manuel du texte. Toutes les fonctionnalités d'édition sont compatibles avec les meilleurs traitements de texte. • Zones de texte Composez des articles dans des zones de texte HTML ou créatives, puis positionnez-les ou adaptez la zone à vos besoins ; les zones de texte créatives reliées contiennent le même article et peuvent être automatiquement remplies grâce à l'option Création automatique ou par un ajustement manuel du texte. Le contour englobant et détouré implique un meilleur contrôle sur le déplacement du texte ainsi que sur son apparence. Importez, collez, exportez du texte au format Unicode. Utilisez une langue étrangère ou des polices et des caractères spéciaux. Les tracés de texte peuvent également être ajusté intelligemment. 8 Introduction • Polices Remplacez les polices manquantes à l'ouverture de projets tiers. Vérifiez les polices de caractères actuellement installées sous l'onglet Polices, y compris les polices récemment appliquées au texte, vos polices favorites et les polices optimisées pour le Web. Déplacez le curseur sur une des polices répertoriées pour en afficher un aperçu de la police in situ sur le texte sélectionné — et il suffit ensuite de cliquer pour lui appliquer la police si cela vous plait ! Substituez facilement toutes les occurrences d'une polices courante par une autre police en moins de temps qu'il n'en faut pour le dire ! • Tableaux et calendriers Choisissez parmi une gamme de formats prédéfinis ou concevez votre propre tableau. Utilisez la pratique barre d'outils contextuelle pour trier des données, mettre en forme des cellules et choisir parmi une large gamme de fonctions de tableurs (utiliser des références de cellules absolues). Pour améliorer leurs fonctionnalités, les calendriers sont basés sur des tableaux et prennent en charge la mise à jour de l'année, les événements en ligne et les jours fériés ! • Rechercher et remplacer Recherchez des mots et des phrases dans le texte d'un articles, mais également des attributs de texte, des polices particulières, des couleurs, des caractères spéciaux (Unicode), des expressions régulières, ou des mots à des positions spécifiques dans des phrases. • Base de données Il peut s'agir d'une base de données Serif (.SDB), Microsoft Access (.MDB), dBASE, de données de serveur ODBC ou d'autres formats de bases de données connus, ainsi que des fichiers Microsoft Excel, HTML et de texte délimité. Etablissez des listes, des listes de diffusion, des catalogues. En bref, toutes les informations contenues dans des bases de données peuvent être publiées sur le Web. Placez du texte ou des photos dans des zones récurrentes, des formulaires d'e-commerce récurrents Acheter maintenant ou Ajouter au panier, ou encore des fragments de code HTML. Créez votre propre base de données de photos (avec des champs EXIF) en prévision d'une fusion. 1.2.7 Publication Web • Aperçu de votre travail Testez votre nouvelle page Web ou votre site entier dans divers navigateurs Web installés. • Publier votre site Publiez dans un dossier local ou chargez directement votre site par FTP via votre FAI ; chargez progressivement toutes les pages nouvelles ou modifiées. 1.3 Nouvelles fonctions • De toutes nouvelles barres de navigation Utilisez les barres de navigation en Flash ou JavaScript pour naviguer sur votre site. Flexibles et personnalisables, elles vous proposent divers modèles de styles — appliquez des styles globalement pour conférer une homogénéité à vos barres de navigation. Vous pouvez aussi inclure un forum, un blog et des articles de SGC dans les sous-menus dynamiques des barres de navigation. Le Gestionnaire de navigation contrôle toutes les barres de navigation. Ajoutez des séparateurs entre les éléments des sous-menus. • Réservation de ressources Utilisez la réservation de ressources basée sur le calendrier pour gérer vous-mêmes des réservations (hébergement, salles de conférence et de réunion, courts de squash, etc.) par heure ou par jour, et périodiquement. Définissez en toute simplicité les tarifs. • Gérer le contenu Web à distance Le nouveau Système de gestion de contenu (SGC) permet aux fournisseurs de contenu d'ajouter et de mettre à jour un contenu Web depuis n'importe quel lieu, sans WebPlus et sans devoir republier le site. 1.3.1 Plus puissant • Grâce à Google Maps, les clients ne se perdent plus ! Intégrez une carte Google directement dans votre page Web "Coordonnées". Ajoutez des marqueurs pour indiquer des emplacements tels qu'un bureau, un dépôt, un lieu d'intérêt, ou un événement. Le mode Avancé offre un API JavaScript pour un nombre illimité de marqueurs et un étiquetage HTML des marqueurs. • Suivi de l'utilisation du site Inscrivez-vous à Google Analytics pour obtenir un suivi et une surveillance complète des données relatives aux visiteurs de votre site Web. Analysez à tout moment les données en ligne, grâce à des graphes et des cartes faciles à interpréter. • Gagnez de l'argent pour votre site grâce à Google AdSense Ajoutez un espace publicitaire Google à votre site Web... et Google vous paiera, 24/7! 9 WebPlus X4 Manuel d’utilisation 1.3.2 Plus de créativité • Mise en page thématique Sélectionnez un thème tel qu'Arctique ou Naturel pour votre site ! Chaque thème propose un choix de types de pages classiques — À propos, Galerie, Produits, Contact, etc. Sélectionnez plusieurs mises en page pour vos nouvelles pages, puis remplacez simplement les images fictives par vos images personnelles. • Gestionnaire de combinaisons Composez vos propres combinaisons de couleurs en utilisant des étendues de couleurs basées sur la théorie de couleur acceptée (Monochrome, Complémentaire, Triadique, etc.). Sélectionnez une couleur de départ et effectuez un choix parmi les couleurs recommandées et associées — sélectionnez les couleurs une à une ou attribuez automatiquement les couleurs de la nouvelle combinaison. • Bordures à partir de photos De toute nouvelles bordures prêtes à l'emploi peuvent être appliquées autour des zones de texte, des tableaux ou des images. Créez et enregistrez des bordures personnalisées à partir de vos compositions sur ordinateurs ou de cadres d'image numérisés ! Les mêmes bordures sont déjà appliquées aux cadres d'image de l'onglet Galerie. • Joindre les contours d'objets Combinez des Formes pleines, des formes dessinées et du texte artistique pour créer des objets à contour plus complexes, que vous pouvez éditer ultérieurement. Utilisez Ajouter, Soustraire, Intersection et Exclure pour produire des divers résultats intéressants. • Créer des formats automatiques de tableaux et de calendriers Personnalisez une large sélection de formats automatiques attrayants pour vos modèles de tableaux personnalisés. À partir d'un environnement de création de tableau simple d'utilisation, modifiez la disposition des cellules d'un tableau et les styles de cellules des en-têtes, des lignes ou des pieds de page. Une fois les modifications effectuées, enregistrez les formats automatiques pour une utilisation ultérieure. • Utilisez plusieurs maquettes ! Pour une conception de page plus variée, appliquez plusieurs maquettes à une page Web spécifique. 1.3.3 Simplicité d'emploi • Barre de Création rapide Prise en main rapide de WebPlus — déplacement de pages, barres de navigation, zones de texte, images, contenu Flash, galeries photos, ou objets intelligents directement sur la page pour un résultat rapide sans connaissance préalable de l'interface utilisateur. • Prise en main de WebPlus Grâce à la nouvelle Zone d'apprentissage de l'Assistant de démarrage, tirez le meilleur parti de WebPlus. Des didacticiels (sous forme de fichiers PDF et de vidéos) sont publiés avec diverses ressources et informations sur le produit. • Publication rapide Chargez et affichez rapidement un aperçu de la page affichée, ce qui est particulièrement utile pour contrôler en ligne les pages individuelles lorsque vous créez votre site Web. • Accès utilisateur Nouveau et plus intuitif, l'accès utilisateur offre désormais un système de sécurité par CAPTCHA lors de l'enregistrement de l'utilisateur. Les mots de passe peuvent être créés ou reproduits manuellement. À l'inscription, les internautes peuvent être redirigés vers une page Web publiée spécifique. L'inscription des utilisateurs peut être activée ou désactivée globalement. • Alignement de la passe Pour un positionnement précis, alignez une forme ou la passe d'un texte créatif avec l'intérieur, l'extérieur, ou le centre de son tracé. • Guides dynamiques Alignez et redimensionnez les objets à l'aide du magnétisme des guides dynamiques, sans faire appel à des règles ou à des transformations d'objet précises. 1.3.4 Images • 10 Des galeries photos renversantes Sélectionnez l'un des trois types de galeries photos — optimisés avec SlideShowPro™ (Flash), Flash, et JavaScript. Tirez profit de la prise en charge des légendes (à l'aide de données EXIF), et créez et gérez des albums. Introduction • PhotoLab pour des filtres de réglage et d'effets non destructeurs Le puissant studio PhotoLab contient une impressionnante sélection de réglages éditables, d'effets créatifs et artistiques (crayon, aquarelle, huile, etc). Utilisez les outils intégrés Redresser, Recadrer, Yeux rouges et Réparation des tons directs pour effectuer une retouche rapide. Appliquez des filtres aux zones sélectionnées dans votre photo, grâce à un masquage à l'aide du pinceau. Enregistrez des combinaisons de réglages/d'effets comme favoris, pour une utilisation ultérieure. • Des découpes d'images simples et rapides Le Studio de découpe d'images vous permet de découper facilement vos images, directement dans WebPlus. Utilisez les pinceaux pour supprimer les arrière-plans uniformes (ciel, murs, etc.) ou conserver les sujets qui vous intéressent (personnes, objets, etc.). • Nouveaux formats d'importation et d'exportation d'images Importez au format Photo HD Microsoft ou au format de métafichiers propriétaire Serif (.smf). Grâce à de meilleures définitions de ligne, de remplissage et de texte (par rapport au format Windows Metafile), ces fichiers sont parfaits pour le partage d'images entre les différentes applications Serif. 1.3.5 Texte • Importer des documents texte Word 2007 et Open Office Ajoutez sans difficultés le contenu d'un traitement de texte à une zone de texte. Pour une importation, l'application ne doit pas nécessairement être installée localement. Utilisez divers convertisseurs pour optimiser l'importation de texte. • Styles de texte et mise en forme Affichez la mise en forme actuelle— les styles de paragraphe et de caractère, ainsi que la mise en forme locale. Supprimez plusieurs styles simultanément. • Associez et positionnez des formes et des images à du texte Contrôlez la position des formes et des images dans vos zones de texte HTML ou créatives (ou par rapport aux titres du texte artistique). • 1.4 Nous contacter Micro Application 20 /22 rue des petits hôtels 75010 Paris France • Pour consulter le site Web de Micro Application, cliquez sur www.microapp.com • Pour enregistrer ce produit, cliquez sur www.microapp.com/support/e-carte.cfm?ref_produit=2605 • Pour accéder aux informations sur le produit, cliquez sur www.microapp.com/fiche_produit.cfm?ref_produit=2605 • Pour accéder au support technique, cliquez sur www.microapp.com/fiche_technique.cfm?ref_produit=2605 • Pour poser une question au support technique, envoyez un message à l'adresse [email protected] 11 2 Démarrage 2.1 Assistant de démarrage Une fois WebPlus installé, vous pouvez le lancer. L'installation ajoute un élément Serif WebPlus X4 dans le sousmenu (Tous les) Programmes du menu Démarrer de Windows. • Utilisez le bouton Démarrer de Windows pour dérouler le menu, puis cliquez sur Tous les programmes, enfin sélectionnez WebPlus. L'Assistant de démarrage vous offre plusieurs possibilités : Les options se passent d'explications : un site peut être créé de toutes pièces ou à partir de modèles de conception fournis. Les sites existants peuvent être ouverts ou les pages Web qui n'ont pas été créées dans WebPlus peuvent être importées sur votre site à partir d'un fichier ou d'une URL. • Créer un site, pour créer votre site. • Utiliser un modèle, pour créer immédiatement un site à partir d'un modèle préétabli. • Ouvrir un site, pour ouvrir un site WebPlus enregistré préalablement. • Importer un site, pour utiliser un site existant comme base de votre nouveau site. • Zone d'apprentissage, pour accéder aux vidéos, aux didacticiels, aux informations techniques, etc. Le menu déroulant Espace de travail vous permet de sélectionner l'aspect de votre espace de travail (notamment la position et la taille des onglets du Studio, afficher/masquer l'onglet Position). Lorsque vous sélectionnez différents profils dans le menu, votre espace de travail affiche successivement les dispositions d'onglets correspondantes. L'Assistant de démarrage s'affiche par défaut lorsque vous lancez WebPlus. Vous pouvez le désactiver (ou le réactiver) en cochant ou en désactivant la case Ne plus afficher cet assistant sur l'écran de l'Assistant de démarrage lui-même ou par l'option Utiliser l'assistant de démarrage dans l'onglet Général de la boîte de dialogue Outils/Options. (utilisez l'option de menu Options/Général). 2.2 Créer un site à partir d'un modèle WebPlus vous propose une gamme complète de modèles de mise en page classés par catégories permettant d'accélérer le processus de création de toutes sortes de sites Web. Les catégories de modèles vont des modèles Professionnels et E-Commerce à d'autres plus ludiques (Personnels, Divertissement et Loisirs). Chaque modèle propose : • un modèle complémentaire : un modèle professionnel à fort impact. 12 Démarrage • Combinaisons: choisissez une combinaison de couleurs pour définir une apparence particulière (par exemple, Atlantis). • Pages : choisissez toutes les pages du modèle ou quelques-unes seulement (par exemple, Accueil, Produits, À propos de nous, etc.) comme base de votre nouveau site. Deux types de modèles existent : les mises en page thématiques, dans lesquels vous choisissez vos images personnelles, ou les modèles prédéfinis, déjà dotés d'images. Mises en page thématiques Elles proposent une sélection de thèmes (p. ex., Arctique) sur laquelle votre site se base ; des images fictives remplacent les images réelles. Ajoutez simplement vos images personnelles aux images fictives, éditez le texte, puis publiez. Modèles prédéfinis Classés par catégories, ces modèles contiennent des images libres de droits que vous pouvez adopter pour créer rapidement votre site Web. Il ne vous reste qu'à personnaliser le texte de l'image fictive, puis publier. Vous pouvez accéder à encore plus de modèles si vous avez acheté le CD de ressources de WebPlus X4. 2.2.1.1 Pour créer un site à partir d'un modèle : 1. Lancez WebPlus ou exécutez la commande Fichier/Assistant de démarrage pour afficher l'Assistant de démarrage. 2. Cliquez sur Utiliser un modèle. 3. Dans la boîte de dialogue, sélectionnez un thème ou un modèle depuis le volet principal. Les modèles sont réunis par catégories de sujet ; utilisez la barre de défilement ou développez une catégorie pour accéder à d'autres options (cliquez sur le bouton en regard du nom de la catégorie). Le volet de droite affiche alors les miniatures des pages disponibles pour ce modèle. 13 WebPlus X4 Manuel d’utilisation 4. Dans le volet de droite, choisissez les pages que vous voulez intégrer à votre site Web. Cochez ou décochez chaque page à sélectionner, ou cliquez sur Sélectionner tout pour sélectionner toutes les pages (ou Aucun pour annuler la sélection). 5. Sélectionnez une combinaison de couleurs dans la liste en haut de la boîte de dialogue (les trois premières combinaisons sont conçues spécifiquement pour la mise en page thématique). Les miniatures des pages sont mises à jour pour refléter la nouvelle apparence des pages. Pour un examen plus en détail, utilisez les boutons Zoom avant/Zoom arrière ou les glissières de zoom au bas de la boîte de dialogue. 6. Cliquez sur Ouvrir. La première page (la page d'accueil) du site apparaît, avec l'onglet Site du Studio affiché à droite et présentant les diverses pages qui constituent le site avec son arborescence Structure du site. Comme chaque modèle est basé sur une combinaison de couleurs, vous pouvez à tout moment remplacer la combinaison et l'apparence du site par une autre combinaison. 2.3 Créer un site de toutes pièces Bien que les modèles de mise en page facilitent vos choix de conception, vous pouvez tout aussi facilement créer un site à partir de zéro. 2.3.1.1 • Pour créer un site à l'aide de l'Assistant de démarrage : Démarrez WebPlus et sélectionnez Créer un site. Le nouveau site apparaît dans une page vierge utilisant les propriétés de page par défaut. Si vous cliquez sur Annuler (ou si vous appuyez sur Échap) dans l'Assistant de démarrage, vous obtiendrez le même résultat. 2.3.1.2 • Pour créer un site au cours d’une session WebPlus : Exécutez la commande Fichier/Nouveau. Pour faciliter la création d'un site, WebPlus propose la Barre de création rapide. L'onglet correspondant propose des objets et des fonctions courantes que vous pouvez appliquer à votre page Web par glisser-déposer. Ainsi, vous n'êtes pas obligé de maîtriser immédiatement la gamme complète de barres d'outils de WebPlus. 2.4 Ouvrir un site existant Vous pouvez ouvrir un site WebPlus existant à partir de l'Assistant de démarrage, de la barre d'outils Standard ou du menu Fichier. Il est aussi possible d'importer des pages Web depuis des sites Web HTML existant via l'Assistant de démarrage. (Voir l'Aide en ligne pour plus d'informations.) 14 Démarrage 2.4.1.1 1. Sélectionnez l'option Ouvrir un site. Dans le volet Documents de la boîte de dialogue Ouvrir un site, vous verrez soit la structure du dossier contenant vos sites web (onglet Dossiers), soit une liste des dernièrs sites web utilisés (onglet Historique). Selon la vue en cours, des miniatures d'aperçu ou les détails du site peuvent apparaître dans le volet adjacent. 2. Cliquez sur un nom de fichier ou un échantillon, puis sur Ouvrir. Le site s'ouvre à la première page (Démarrage). 2.4.1.2 Pour ouvrir un site WebPlus existant (lorsque WebPlus est ouvert) : Ouvrir dans la barre d'outils standard. 1. Cliquez sur le bouton 2. Dans la boîte de dialogue Ouvrir, sélectionnez le répertoire et le nom du fichier, puis cliquez sur le bouton Ouvrir. 2.4.1.3 • Pour ouvrir un site WebPlus existant à l’aide de l’Assistant Démarrage : Pour restaurer la version précédemment enregistrée d'un site ouvert : Exécutez la commande Fichier/Version précédente. 2.4.2 Remplacement des polices WebPlus prend en charge le remplacement automatique de la police à l'ouverture du site WebPlus si le site contient des polices qui ne sont pas installéees sur l'ordinateur. La boîte de dialogue qui apparaît permet aussi de remplacer manuellement une police manquante, si nécessaire. Consultez l'aide en ligne pour plus d'informations. 2.5 Travailler sur plusieurs sites Si vous ouvrez plusieurs sites Web simultanément, vous pouvez facilement passer de l'une à l'autre par différentes méthodes. Cliquez sur l'onglet Fenêtre en haut de l'espace de travail pour le rendre actif (p. ex., Design657.wpp). Vous pouvez aussi sélectionner le nom d'un site ouvert dans le menu Fenêtre. Le nom des sites Web non enregistrés est suivi d'un astérisque ; le site actif est précédé d'une coche. Dans l'exemple ci-contre, le site Design657.wpp est actif et non enregistré. 2.6 Enregistrer votre site Web 2.6.1.1 Pour enregistrer votre travail : • Cliquez sur le bouton Enregistrer dans la barre d'outils standard. • Pour l'enregistrer sous un autre nom, exécutez la commande Fichier/Enregistrer sous. Le nom d'un site non enregistré est suivi d'un astérisque dans son onglet ou dans le menu de Fenêtre. 15 3 Développer des sites et des pages 3.1 Présentation de la structure du site et de la navigation Contrairement à une publication imprimée, un site Web ne repose pas sur une succession linéaire de pages. Lorsque vous concevez un site, il est plus logique de le penser en termes d'espace, avec une structure telle que celle d'un musée que des personnes visiteraient. En règle générale, vous pouvez supposer que les visiteurs y entreront par la porte principale (la page d'accueil), mais la suite de la visite dépendra des liens que vous aurez prévus. Les passerelles de navigation sont comparables aux couloirs reliant les pièces du musée. C'est à vous, en tant qu'architecte, de prévoir une disposition intelligente des pages et des liens pour que les visiteurs s'y retrouvent facilement, sans se perdre. Dans WebPlus, vous pouvez utiliser l'arborescence Structure du site pour représenter visuellement la structure de votre site, puis ajouter des barres de navigation, qui s'adaptent de façon dynamique à la structure que vous avez définie. 3.1.1 Structure du site Contrairement au musée de notre analogie, la structure d'un site Web n'a aucun rapport avec son organisation physique ou avec l'endroit où les pages sont conservées. Il s'agit plutôt de l'organisation logique du contenu du site de manière à y simplifier la navigation. L'un des principes d'organisation les plus efficaces, défendu par WebPlus, est une structure en arbre inversé qui commence par la page d'accueil à partir desquelles les ramifications se développent vers d'autres pages. Du point de vue du visiteur qui parcourt votre site, cette disposition présente le contenu d'une manière hiérarchique familière, structurée en sections et en niveaux. • Une section est une catégorie de contenu, telle que Actualités, Produits, Contact ou Liens. Les diverses sections principales sont généralement répertoriées sur la page d'accueil du site, dans une barre de navigation. Dans l'idéal, chaque page du site appartient à une section particulière et, à moins qu'il n'y ait qu'une seule page dans une section donnée, la section a sa propre page principale qui sert généralement de menu pour les pages subsidiaires. • Le niveau est le nombre d'étapes (de liens) séparant une page donnée de la page d'accueil. La page d'accueil réside toujours au niveau 1, normalement avec les pages de menus des sections principales. Cela permet aux barres de navigation de fonctionner facilement et automatiquement. Les pages situées un niveau "en dessous" des pages de menus des sections se trouvent au niveau 2 etc. Dans WebPlus, l'arborescence Structure du site (dans l'onglet Site) apporte une aide visuelle permettant d'organiser le contenu du site en sections et en niveaux, c'est-à-dire en une hiérarchie de pages parents reliées à des pages enfants. Voici un exemple de structure pouvant apparaître dans l'arborescence Structure du site de WebPlus : L'utilisation de l'arborescence facilite la visualisation des relations entre les pages et l'organisation du site d'une manière adaptée au contenu que vous avez à offrir. Évidemment, un site Web est véritablement un réseau de pages liées les unes aux autres et l'arborescence ne vous empêche pas de prévoir des liens entre deux pages. Mais elle matérialise la représentation des passerelles principales (vers le haut, vers le bas et sur les côtés) à l'intérieur du site. L'organisation logique par sections et par niveaux simplifie la navigation à l'intérieur du site. Avec WebPlus, vous pouvez facilement créer des barres de navigation qui reflètent la structure du site et qui guident les visiteurs le long de ces artères principales. 16 Développer des sites et des pages 3.1.2 Navigation Dans WebPlus, la navigation entre vos pages Web est facilitée par des barres de navigation, programmées pour comprendre la structure de votre site, de manière à faciliter la conception d'un site dont la navigation est simple. Il suffit de sélectionner une barre d'outils Objets Web et WebPlus fait le reste ! Voici, par exemple, une barre de navigation que nous avons choisie pour le site représenté dans l'arborescence cidessus. Les boutons constituent des liens vers la page d'accueil et les pages de menus de sections (toutes au niveau 1) et à des menus déroulants qui pointent vers des pages enfants (niveau 2 en l'occurrence). Pour plus d'informations, reportez-vous à Ajouter des barres de navigation. 3.2 Présentation des pages et des maquettes La page est l'unité de base de la conception Web. WebPlus permet de structurer le contenu de votre site en organisant les pages dans une arborescence, qui aidera les internautes à naviguer sur votre site. Du point de vue de la conception, chaque page WebPlus comporte une page au premier plan et une maquette à l'arrière-plan. Les maquettes font partie de la structure de votre site WebPlus et constituent un moyen flexible de stocker des éléments d'arrière-plan que vous souhaitez faire apparaître sur plusieurs pages : par exemple, un logo, un arrièreplan, une bordure, ou une barre de navigation. Le point essentiel est qu'une maquette particulière est généralement partagée par plusieurs pages, comme illustré ci-dessous. En plaçant un élément de la conception sur une maquette et en affectant plusieurs pages à cette maquette, vous vous assurez que toutes les pages incorporent cet élément. Bien sûr, chaque page individuelle peut comporter ses propres éléments. 17 WebPlus X4 Manuel d’utilisation L'onglet Site du Studio comporte une section supérieure Maquettes avec une icône pour chaque maquette et une section Structure du site indiquant quelle maquette est utilisée par chacune des pages Web : 3.3 Afficher les pages L’espace de travail d’une publication de Web Studio consiste en une page et en une zone de travail. La page est l'endroit où vous placez le texte, les images et autres éléments que vous souhaitez faire apparaître sur votre page web finale. La table de montage est l'endroit où vous placez généralement les éléments à positionner sur la page. Lorsque vous publiez le site à partir du site WebPlus, tout ce qui se trouve sur la page apparaît, et tout ce qui se trouve entièrement sur la table de montage n'apparaît pas. La table de montage, qui est partagée par toutes les pages et maquettes, est utile pour copier ou déplacer des objets d'une page à une autre. 3.3.1.1 Pour déplacer ou copier un objet entre des pages via la table de montage : 1. Faites glisser l'objet de la page source sur la table de montage. Si vous souhaitez le copier, maintenez la touche Ctrl enfoncée. 2. Affichez la page cible (voir Passer d’une page à une autre ci-dessous). 3. Faites glisser (en maintenant la touche Ctrl enfoncée si vous souhaitez copier) l'objet de la table de montage à la page de destination. WebPlus vous permet de visualiser facilement votre travail et propose diverses options d'affichage allant de l'affichage d'une page entière à un zoom avant sur une petite zone. Ainsi, vous pouvez utiliser les barres de défilement situées en bas à droite de la fenêtre principale pour déplacer la page et la table de montage par rapport à la fenêtre principale. L'affichage se recentre automatiquement à mesure que vous faites glisser les objets vers le côté de l'écran. La barre d'outils Affichage située en haut de l'écran propose l'outil Déplacer, qui offre une autre manière de se déplacer dans la zone de travail. Vous pouvez également procéder à un zoom avant ou arrière avec les boutons correspondants afin de pouvoir contrôler et/ou modifier la page à divers niveaux de détails. 3.3.2 Passer d'une page à une autre WebPlus offre diverses façons d'atteindre rapidement la partie du site sur laquelle vous travaillez actuellement. L'onglet Site du Studio constitue un centre de contrôle proposant à la fois l'arborescence de la Structure du site qui reflète la hiérarchie des pages du site (voir Présentation de la structure du site et de la navigation) ainsi que les icônes des maquettes du site. Différence entre sélection et affichage d'une page : un simple clic sur une entrée de page/maquette sélectionne simplement la page. Pour vraiment afficher la page/maquette associée, il est nécessaire de double-cliquer sur une entrée. Une entrée orange (avec le nom de la page en gras) correspond à une page sélectionnée. L'icône de l'oeil désigne la page actuellement affichée et que vous pouvez modifier dans l'espace de travail. Cet exemple montre que la page est affichée et sélectionnée. Une autre maquette est utilisée (B au lieu de A). Une icône de maquette en surbrillance dans la fenêtre supérieure sous l'onglet Site désigne une maquette sélectionnée. Une icône d’œil dans l’icône de la maquette désigne la page actuellement affichée. Cette illustration présente une maquette affichée (mais pas sélectionnée). 18 Développer des sites et des pages 3.3.2.1 Pour afficher une page/maquette spécifique : Plusieurs méthodes permettent d'afficher une page : • Dans la barre d'état, utilisez les boutons pour la navigation parmi les pages. OU Cliquez sur l'entrée de la page ou maquette dans la liste Identificateur de pages. • Sous l'onglet Site du Studio, double-cliquez sur l'entrée de la page ou maquette à afficher. A l'intérieur de l'onglet, la fenêtre Structure du site comporte une arborescence des pages du site, alors que la fenêtre Maquettes n'affiche les maquettes que sous forme de miniatures. Vous devrez peut-être cliquer sur le bouton Maquettes pour afficher la fenêtre Maquettes. • Cliquez sur le bouton Structure du site de la barre d'état ou dans la fenêtre Page de l'onglet Site. Sélectionnez l'entrée de la page dans l'arborescence de la boîte de dialogue (double-cliquez si nécessaire sur les entrées de l'arborescence pour les développer). Cliquez ensuite sur le bouton Aperçu de la page. Pour les maquettes : • Dans l'onglet Site du Studio, cliquez sur le bouton Maquettes> pour afficher la fenêtre Maquettes. Une ou plusieurs icônes de maquettes s'affichent. • Double-cliquez sur l'icône de la maquette que vous voulez afficher. 3.3.2.2 • Cliquez sur le bouton 3.3.2.3 • Pour passer de la page à la maquette : Page/Maquette de la barre d'état. Raccourci d'affichage de la page d'accueil du site : Cliquez sur le bouton Page d'accueil dans la barre d'état. 3.4 Ajouter, supprimer et réorganiser les pages L'onglet Site du Studio permet d'ajouter ou de supprimer rapidement des pages standard ou HTML à un niveau quelconque de la structure de votre site et d'y réorganiser les pages par glisser-déplacer selon vos besoins, ajouter de nouvelles maquettes, réaffecter des maquettes à des pages et ajouter des liens externes. 19 WebPlus X4 Manuel d’utilisation La fenêtre Maquettes de l'onglet Site permet d'accéder aux maquettes et la fenêtre Page (arborescence Structure du site centrale) permet d'accéder aux pages. Des pages (vides ou ayant de contenu) peuvent aussi être ajoutées depuis des modèles multipages. 3.4.1.1 3. Pour ajouter une nouvelle page vide : 1. Cliquez sur la flèche bas du bouton Ajouter, situé juste au-dessus de la fenêtre Pages de l'onglet Site. Dans le menu déroulant, choisissez Nouvelle page. 2. Dans la boîte de dialogue Propriétés de la nouvelle page, spécifiez les options de la nouvelle page sous l'onglet Apparence (voir Définir les propriétés de la page) ainsi que des options disponibles uniquement dans cette boîte de dialogue : • Dupliquer les éléments de conception dessin d'une page Web existante. Cochez Copier les objets de la page et sélectionnez la page dans la liste activée. • Spécifier la position de la nouvelle page dans la structure du site. Dans la section Emplacement, insérez la page Avant, Après, ou comme page enfant de la page nommée. Cliquez sur OK. Une nouvelle page apparaît à l'emplacement indiqué dans la structure du site. La page utilise les propriétés du site pour ses dimensions. Vous pouvez toujours déplacer la page à un autre emplacement ou niveau ou activer une autre maquette (voir Réorganiser les pages ou Associer des maquettes). Tandis que l'ajout de pages standard vous permet de commencer à concevoir une page de toutes pièces, vous pouvez vous simplifier la tâche en adoptant des pages prêtes à l'emploi à partir des modèles WebPlus fournis. Pour conserver la présentation d'origine de la page, toute maquette associée à la page ajoutée peut éventuellement être "importée" avec la page. 3.4.1.2 5. 20 Pour ajouter une nouvelle page à partir d'un modèle : 1. Dans la section Pages (structure du site) de l'onglet Site du Studio, sélectionnez la page à la suite de laquelle vous voulez ajouter une nouvelle page. 2. Cliquez sur la flèche vers le bas du bouton Ajouter, immédiatement au-dessus de la fenêtre Pages. Dans le menu déroulant, choisissez Nouvelle page de modèle. 3. Dans la boîte de dialogue Ajouter une nouvelle page depuis un modèle, sélectionnez un modèle dans le volet de gauche et cochez la page à ajouter (cochez d'autres pages à ajouter, si nécessaire). 4. WebPlus vous permet de vérifier si une maquette associée est copiée avec la page. Choisissez l'une des commandes proposées dans le menu déroulant situé en haut et à gauche : • Copier la maquette. Pour toujours copier la maquette dans votre site. • Comparer et copier la maquette. Vérifie si la maquette existe déjà dans votre site, puis la copie si elle n'y figure pas. • Aucune maquette. La maquette n'est jamais copiée dans votre site. Cliquez sur le bouton Ouvrir. Les pages sont ajoutées à l'onglet Site. Développer des sites et des pages Au lieu de pages Web vides ou de modèles, des pages HTML peuvent être ajoutées à la Structure du site sous l'onglet Site. Ces pages peuvent être incluses dans la navigation de la même manière que les pages ordinaires. 3.4.1.3 Pour ajouter une page HTML : 1. Dans la section Pages (structure du site) de l'onglet Site du Studio, sélectionnez la page à la suite de laquelle vous voulez ajouter une nouvelle page. 2. Cliquez sur la flèche vers le bas du bouton Ajouter, immédiatement au-dessus de la fenêtre Pages. Dans le menu déroulant, choisissez Nouvelle page HTML Une nouvelle page HTML est ajoutée à l'onglet Site. Voir Créer des pages HTML pour plus d'informations. Vous pouvez aussi ajouter un lien externe à votre structure de site. Il s'agit généralement d'une page ou d'une ressource n'appartenant pas à votre site, mais que vous souhaitez inclure dans sa structure de navigation. Le lien externe apparaît dans l'arborescence de la Structure du site et dans les barres de navigation et vous pouvez donc le manipuler comme si c'était une page de votre site. 3.4.1.4 5. Pour ajouter un lien externe : 1. Dans la section Pages (structure du site) de l'onglet Site du Studio, sélectionnez la page à la suite de laquelle vous voulez ajouter une nouvelle page. 2. Cliquez sur la flèche vers le bas du bouton Ajouter, immédiatement au-dessus de la fenêtre Pages. Dans le menu déroulant, choisissez Nouveau lien externe. 3. Dans la boîte de dialogue, saisissez le Nom du menu pour identifier le lien externe dans l'arborescence de la Structure du site (l'équivalent du nom de la page). 4. Cliquez pour sélectionner le type de destination du lien et saisissez la cible du lien externe (voir Sélectionner la cible d'un lien hypertexte) et la fenêtre où vous souhaitez que la cible apparaisse. Laissez l'option Inclure à la navigation cochée si le lien doit apparaître dans la navigation du site. • Cochez Avant et/ou Après pour appliquer des lignes horizontales au-dessus/en dessous de la page en tant qu'élément de sous-menu dans les barres de navigation. • Ajoutez une Description pour ajouter du texte relatif à la page sur l'élément de sous-menu de la barre. Cliquez sur OK. 3.4.1.5 Pour ajouter une nouvelle maquette : 1. Sous l’onglet Site du Studio, vérifiez que le bouton Maquettes> est activé pour développer la fenêtre Maquettes. 2. Cliquez sur le bouton Ajouter au-dessus de la fenêtre Maquettes. Une nouvelle page de maquette figure dans la fenêtre Maquettes sous l'onglet Site. Pour distinguer facilement les différentes maquettes, vous pouvez leur attribuer des noms distincts. Les maquettes adopteront des identifiants comme suffixes, p. ex. A, B, C, etc. Vous pouvez ainsi consulter l'affectation des maquettes dans la structure de votre site. 3.4.1.6 1. Faites un clic droit sur la miniature d'une maquette et cliquez sur Propriétés.... 2. Modifiez le Nom de la page. 3.4.1.7 • Pour nommer une maquette : Pour reproduire une page : Sous l'onglet Site du Studio, cliquez avec le bouton droit de la souris sur une page sélectionnée et choisissez Copier la page. Une copie est insérée au-dessous de la page sélectionnée. 3.4.1.8 1. Pour supprimer une page ou une maquette : Sous l'onglet Site du Studio, sélectionnez la page (ou la maquette) à supprimer en cliquant sur son entrée. 21 WebPlus X4 Manuel d’utilisation 2. Cliquez sur le bouton Supprimer situé au-dessus de la fenêtre appropriée. Lorsque vous supprimez une page, vous avez la possibilité de supprimer tout lien hypertexte présent sur votre site et pointant sur celle-ci ou de rediriger ces liens vers une autre page de votre choix (les liens hypertextes vers des ancres sur la page supprimée peuvent éventuellement être supprimé). 3.4.2 Réorganiser les pages L'arborescence de la Structure du site permet d'ajouter et de supprimer des pages, mais aussi de les réorganiser. A l'aide de la structure parent/enfant, la réorganisation des pages est une procédure intuitive pouvant être réalisée par glisser-déplacer ou en cliquant sur des boutons. Vous pouvez déplacer une page de la manière suivante : • Vers un autre emplacement dans la succession de page (vers le haut ou vers le bas) au même niveau de la structure • Vers un niveau (parent) supérieur • Vers un niveau (enfant) inférieur 3.4.2.1 Pour déplacer une page : 1. Affichez l'onglet Site du Studio. 2. Cliquez pour sélectionner la page dans la structure du site. 3. (Par glisser-déplacer) Faites glisser l'entrée de la page vers le haut ou vers le bas dans l'arborescence. L'apparence du pointeur signale la nouvelle position par rapport à la page sur laquelle il pointe : déplace la page au-dessous et au même niveau que la page cible sélectionnée. fait de la page un enfant de la page située sous la page cible sélectionnée. 3.4.3 Affecter une maquette particulière Si vous avez défini plusieurs maquettes pour votre site, vous pouvez utiliser plusieurs méthodes pour réassocier une maquette particulière à différentes pages, une par une. Vous pouvez également paramétrer une page pour qu'aucune maquette ne lui soit affectée, si vous importez une page HTML dont vous ne souhaitez afficher que les propres éléments de mise en page sans lui en ajouter d'autres à partir d'une maquette. (Voir Présentation des pages et des maquettes.) 3.4.3.1 • Pour affecter une maquette à une page : Dans l'onglet Site du Studio, cliquez sur la miniature de la maquette (dans la section Maquettes) et faites-la glisser sur l'entrée de la page (dans la section Structure du site de l'onglet). 3.4.4 Affecter plusieurs maquettes Pour les pages de conception plus variée, vous pouvez affecter plusieurs maquettes à chaque page Web à l'aide de l'onglet Maquettes. Par exemple, si deux conceptions se situent sur deux maquettes distinctes ("Maquette A" et "Maquette B"), à l'aide de l'onglet Maquettes, vous pouvez placer la "Maquette B" (contenant le texte IPSUM) devant la page sélectionnée, la maquette A étant utilisée comme arrière-plan de la page. 22 Développer des sites et des pages Vous devrez créer plusieurs maquettes avant d'utiliser l'onglet Maquettes. 3.4.4.1 Pour affecter plusieurs maquettes à une page Web : 1. Sous l'onglet Site, sélectionnez la page à laquelle vous souhaitez affecter plusieurs maquettes. 2. Cliquez sur le bouton Ajouter sous l'onglet Maquettes. 3. Dans le menu déroulant de la boîte de dialogue, choisissez une maquette déjà créée puis et cliquez sur OK. La maquette supplémentaire est ajoutée à l'onglet (ci-dessous) et la page Web utilisera les éléments de la maquette nouvellement affectée. La structure du site de l'onglet Site affiche une page Web accompagnée d'un signe "+" si plusieurs maquettes sont affectées (au lieu de A, B, C, etc.). L'onglet Maquettes vous permet de contrôler l'ordre d'affichage du contenu de la page et de la maquette. À l'image des calques dans un programme de dessin, les objets de l'entrée située au premier plan peuvent s'afficher devant les objets des maquettes "inférieures". Vous pouvez également réorganiser les maquettes entre elles. Les nouvelles maquettes sont ajoutées en bas de la pile et apparaîtront donc derrière tout autre contenu. Dans l'exemple ci-contre, la Maquette B est positionnée au-dessus de tout autre contenu. 3.4.4.2 • Pour réorganiser le contenu de la page et les maquettes : Sélectionnez l'entrée sous l'onglet et cliquez sur le bouton Haut ou Bas. Pour masquer temporairement une maquette, décochez son entrée sous l'onglet. 3.4.4.3 • Pour supprimer l'affectation d'une maquette : Sélectionnez l'entrée sous l'onglet et cliquez sur le bouton Supprimer. 3.5 Ajouter des barres de navigation Dans WebPlus, des barres de navigation sont programmées pour comprendre la structure de votre site, de manière à faciliter la conception d'un site dont la navigation est simple. Les barres de navigation facilitent le mouvement entre les différentes sections et niveaux d'un site. Par exemple, dans les barres de navigation ci-dessous, les boutons incluent des liens vers la page d'accueil et vers différentes pages des sections principales, tandis que les menus contextuels offrent des liens vers les pages enfants (Article 1 et Article 2) de chaque section. 23 WebPlus X4 Manuel d’utilisation Vous pouvez aisément insérer des barres de navigation à n'importe quel niveau de votre site, puis reconfigurer ceuxci afin de les relier à une section spécifique du site, modifier la présentation d'une barre de navigation et exclure certaines pages spécifiques de la navigation, selon vos besoins. 3.5.1 Types de navigation WebPlus propose divers types de barres de navigation en fonction du niveau de fonctionnalité et de design recherché pour votre barre de navigation. Les barres de navigation utilisent différentes technologies, en particulier JavaScript ou Flash. Types de barres de navigation Pour : Basique (JavaScript) Barres de navigation à base de texte, sans arrière-plan. Créateur (JavaScript) Barres de navigation à base de texte, avec bouton et barre en arrière-plan. Divers (JavaScript) Zone de liste, plan de site vertical, barres de navigation pliables ou en accordéon (image coulissante). Basique (Flash) Barres de navigation Flash avec survols animés, popups et palettes. Créateur (Flash) Barres de navigation Flash avec effets graphiques professionnels (survols, popups, 23 palettes et pages roulées. 1 2 1 23 1 Se présentent sous la forme de texte HTML pris en compte lors des recherches. Barres de navigation horizontales et verticales disponibles. 3 Lecteur Flash requis. Vous trouverez un lecteur Flash dans votre dossier d'installation WebPlus. 2 3.5.2 Créer des barres de navigation Les barres de navigation peuvent être ajoutées sur n'importe quelle page, mais on choisit généralement la maquette pour éviter d'avoir à coller le même élément sur plusieurs pages. La barre de navigation se comporte, sur une maquette, comme si elle était présente sur chaque page, sachant que ses boutons et menus sont définis par rapport à la position de chaque page dans la structure globale du site. Lorsque vous ajoutez une barre de navigation, vous pouvez définir un type, des options et un style. Après l'ajout, la barre peut être modifiée à tout moment. Vous pouvez créer des barres supplémentaires à partir de toute barre de navigation présente dans votre site. 3.5.2.1 Pour ajouter une barre de navigation : 1. Sélectionnez la page (ou la maquette). 2. Cliquez sur 3. Sous l'onglet Type de la boîte de dialogue, une galerie de barres de navigation par défaut apparaît. Pour un type de navigation différent, effectuez une sélection dans le menu déroulant Type situé dans la partie supérieure droite. Insérer une barre de navigation dans la barre d'outils Objets Web. La galerie de barres de navigation vous permet de sélectionner une barre de navigation de ce type, par exemple. 4. Sous l'onglet Type de navigation, indiquez si vous souhaitez directement baser votre barre de navigation sur la Structure du site (cochez Basé sur la structure du site) ou persionnaliser les options de la barre de navigation (cochez Personnaliser ; reportez-vous à Personnaliser des barres de navigation). Pour la première méthode : • 24 Sélectionnez les boutons à inclure dans la barre de navigation : Niveau racine, Niveau parent, Même niveau, Niveau enfant, Accueil, Précédent et suivant, Précédent, Suivant, Haut, Fil d'Ariane, Ancres, Retour ou Personnaliser. Développer des sites et des pages • En fonction des éléments sélectionnés, vous pouvez décidez d'inclure la page enfant, les ancres, la page d'accueil, la page parent, et/ou de masquer la page courante. • Cochez Ne pas utiliser le nom des pages pour personnaliser le nom des boutons. Dans le cas contraire, les boutons porteront des noms fonctionnels tels que "Précédent" ou "Accueil". • Définissez l'option Fenêtre ou cadre cible pour indiquer à quel emplacement la nouvelle page doit s'ouvrir. Sélectionnez Même fenêtre (option la plus utilisée), Nouvelle fenêtre (utile dans le cas d'un renvoi vers une page externe au site), Haut de la fenêtre courante, Fenêtre parente, Fenêtre nommée et Cadre du document. 5. (Facultatif ; pour les barres de navigation JavaScript uniquement) Sous l'onglet Options, vous pouvez paramètrer le fonctionnement de la barre de navigation. Vous pouvez notamment modifier les options d'alignement et de positionnement des popups et des menus. 6. (Facultatif) Sous l'onglet Style, vous pouvez sélectionner des propriétés différentes pour les objets et le texte des menus et sous-menus. 7. Cliquez sur OK. Le barre de navigation s'affiche sur votre page. Lorsque vous incluez des ancres dans les barres de navigation, vous pouvez parcourir différentes sections dans des pages longues ou des zones dupliquées comme options de menu. Vous pouvez à tout moment modifier la barre de navigation, pour régler le type de navigation, ses options ou son style. 3.5.2.2 Pour modifier une barre de navigation : 1. Double-cliquez sur la barre de navigation ou cliquez dessus avec le bouton droit de la souris, puis choisissez Modifier la barre de navigation... 2. Modifiez les paramètres proposés sous les onglets Type de navigation et Style. Vous pouvez modifier la barre de navigation sélectionnée, mais pas son type (p. ex., remplacer une barre de navigation JavaScript basique par une barre Flash). Dans WebPlus, vous pouvez baser une nouvelle barre de navigation sur une barre présente sur votre site, au lieu d'en utiliser une depuis la galerie Barre de navigation. Ainsi, vous n'êtes pas obligé de personnaliser une barre de navigation de la galerie. 3.5.2.3 Pour créer une barre de navigation à partir d'une barre de navigation existante : 1. Sous l'onglet Type de la boîte de dialogue, cochez Copier la barre de navigation existante. La galerie est actualisée et affiche les barres de navigation utilisées sur votre site. 2. Cliquez sur Sélectionnez en regard de la barre de navigation choisie, puis modifiez le type ou le style de navigation, comme décrit dans la rubrique Pour ajouter une barre de navigation. 3. Cliquez sur OK. 3.5.3 Personnaliser des barres de navigation Par défaut, les éléments des barres de navigation se basent sur la structure de votre site. Si vous souhaitez réorganiser l'ordre ou la hiérarchie des éléments de votre barre de navigation de sorte qu'ils soient différents de la Structure du site, WebPlus permet de personnaliser toutes les barres de navigation en créant une arborescence personnalisée — vous pouvez également ajouter, supprimer ou modifier des éléments donnant accès à toute une gamme de destinations de liens (voir Ajouter des liens hypertextes et des ancres) exactement comme dans la Structure du site figurant sous l'onglet Site. Si vous utilisez une arborescence personnalisée, la barre de navigation ne se mettra plus à jour automatiquement lorsque de nouvelles pages seront ajoutées au site. Si vous souhaitez une mise à jour de la barre de navigation, vous devez baser votre barre sur la structure du site. 3.5.3.1 1. Pour personnaliser une barre de navigation sélectionnée : Double-cliquez sur la barre de navigation. 25 WebPlus X4 Manuel d’utilisation 2. Sous l'onglet Type de navigation, cochez l'option Personnaliser et vérifiez que l'option Nouvelle arborescence est cochée. 3. (Facultatif) Attribuez un nom à l'arborescence dans le champ prévu à cet effet. 4. Réagencez les éléments de la barre de navigation par glisser-déplacer (ou utilisez les boutons Vers le haut, Vers le bas, Page enfant ou Page parente). 5. Cliquez sur le bouton Ajouter un lien pour ajouter un nouveau lien en bas de la liste de la barre de navigation. Une destination de lien, un cadre ou une fenêtre cible et un titre sont attribués au nouvel élément dans la boîte de dialogue qui s'affiche. Cliquez sur OK. (Facultatif) Cliquez sur Rétablir pour rétablir la structure initiale de l'arborescence. Options d'exportation... vous permet de contrôler l'emplacement et le nom du fichier JavaScript utilisé pour afficher votre arborescence personnalisée. Cliquez une nouvelle fois sur OK. La barre de navigation utilise désormais l'arborescence personnalisée pour afficher les options de menu. 6. L'arborescence personnalisée que vous enregistrez se voit attribuer un nom (p. ex., arboperso-1) et est automatiquement stockée sur votre site. Si vous prévoyez de créer d'autres barres de navigation pour votre site, vous pouvez réutiliser la même arborescence personnalisée en la sélectionnant dans la boîte de dialogue. Les barres existantes peuvent aussi être remplacées pour utiliser la nouvelle arborescence lors de la modification. Vous pouvez aussi cliquer sur le bouton Copier... pour copier l'arborescence utilisée dans une barre de navigation présente sur votre site. L'arborescence active sera ainsi remplacée. 3.5.4 Utiliser des styles de barre de navigation Lorsque vous créez ou modifier une barre de navigation, vous pouvez conserver son type de navigation et sa structure, tout en personnalisant son aspect. Le style modifié peut être écrasé ou copié sous forme de nouveau style. Si vous utilisez plusieurs barres et styles de navigation, faites appel au Gestionnaire de navigation pour échanger les styles des barres. 3.5.4.1 Pour modifier un style de barre de navigation : 1. Sous l'onglet Style, les palettes et menus déroulants vous permettent de créer un style unique. Vous pouvez définir les couleurs d'objet, les propriétés de police des menus et sous-menus, les marges, l'espacement, et les options d'échelle des boutons. 2. (Facultatif) Définissez un nom de style différent. Les noms se basent sur le nom d'origine de la barre de navigation. 3. Cliquez sur OK. Si vous n'avez pas renommé le style, le style d'origine est écrasé. Si vous avez renommé le style, un nouveau style est créé. Cochez Copier le style pour créer un style identique. OU 1. Effectuez un clic droit sur la barre de navigation de la page, puis choisissez Modifier un style... 2. Dans la boîte de dialogue, modifiez les paramètres de style explicites. 3. (Facultatif) Définissez un nom de style différent. 4. Cliquez OK. Si vous êtes satisfait du style de la barre de navigation que vous avez créée ou qui résulte de la modification d'une barre de navigation existante, vous pouvez la réutiliser ultérieurement. Le style créé peut être appliqué à diverses barres de navigation via le Gestionnaire de navigation. 26 Développer des sites et des pages 3.5.5 Inclure/exlure des pages dans la navigation Par défaut, toutes les pages de l'arborescence sont incluses dans la navigation. Autrement dit, elles peuvent être reliées par des barres de navigation. Vous pouvez cependant exclure certaines pages (sauf la Page d'accueil) de façon à ce qu'elles ne soient pas prises en compte par les barres de navigation. Par exemple, imaginons que votre site comporte une section de références ou d'archives que vous ne souhaitez pas rendre accessibles aux visiteurs. Si vous excluez de la navigation la page parent de cette section, elle sera inaccessible par la barre de navigation. Remarque : l'exclusion de cette page du système de navigation ne supprimera pas la page du site. La page apparaîtra toujours dans la structure du site et vous pourrez toujours y insérer des liens hypertextes. Simplement, elle n'apparaîtra pas dans une barre de navigation. 3.5.5.1 Pour exclure une page de la navigation : • Dans l'onglet Site du Studio, cliquez avec le bouton droit de la souris sur la page dans l'arborescence Structure du site et sélectionnez Propriétés de la page. Sous l'arborescence, désactivez Inclure à la navigation. • Les pages incluses affichent, dans leur entrée de page, le signe dans la structure du site de l'onglet Site. Les pages exclues n'affichent pas ce symbole et apparaissent en grisé. 3.5.6 Utiliser des séparateurs de pages dans des menus déroulants Dans le sous-menu, vous pouvez régler les propriétés de toute page, tout lien externe ou toute ancre incluse dans la navigation (et présente dans un sous-menu) afin de contrôler les séparateurs et le texte explicatif de la page. • Cochez Avant et/ou Après pour appliquer des lignes horizontales au-dessus/en dessous de la page en tant qu'élément de sous-menu dans les barres de navigation. • Ajoutez une Description pour ajouter du texte relatif à la page sous l'élément de sous-menu de la barre. 3.5.7 Utiliser des barres de navigation dynamiques Jusqu'à présent, nous sommes partis du principe que les barres de navigation sont basées sur la structure de votre site et affichent des pages statiques comme éléments de menu. Toutefois, pour des barres de navigation plus dynamiques, vous pouvez compléter les sous-menus de votre barre de navigation avec un forum en évolution constant, un SGC, et des titres d'articles de blog ; cliquez simplement sur un titre pour afficher l'article correspondant. Supposons que vous utilisez un lien externe pour vous connecter à votre forum, votre SGC et votre blog, et que le lien externe est inclus dans la navigation. 3.5.7.1 Pour créer une barre de navigation dynamique : • Effectuez un clic droit sur le lien externe de l'onglet Site, puis cliquez sur Propriétés du lien externe.... • Dans la boîte de dialogue Lien externe, modifiez le menu déroulant de la section Information sur l'objet intelligent pour ajouter des éléments de flux (c'est-à-dire des titres d'articles publiés) comme enfants du sousmenu de la barre. Chaque titre d'article est cliquable et ouvre l'article associé dans une fenêtre, généralement séparée. 3.5.8 Tester vos barres de navigation Le Gestionnaire de navigation donne un aperçu de toutes les barres de navigation utilisées sur votre site depuis le Gestionnaire de site. (Pour une présentation basique des barres de navigation, voir Présentation de la structure du site et de la navigation.) 27 WebPlus X4 Manuel d’utilisation 3.5.8.1 Pour afficher le Gestionnaire de navigation : • Cliquez sur Gestionnaire de site dans la barre contextuelle (ou la barre d'état située en bas de l'espace de travail), puis sélectionnez l'option de menu Navigation. OU Sélectionnez Gestionnaire de site/Gestionnaire de navigation... dans le menu Outils. Le Gestionnaire de site s'ouvre par défaut avec le Gestionnaire de navigation. 3.6 Utiliser les outils de mise en page Les guides de mise en page sont des repères visuels qui vous aident à positionner vos différents éléments, soit "à l'oeil" soit en activant le magnétisme. Lorsque le magnétisme est activé, les objets que vous créez, déplacez ou redimensionnez s'alignent sur les guides de mises en page et les règles visibles les plus proches. WebPlus comporte divers outils de mise en page pour vous aider : marges de la page, repères des lignes et colonnes et repères des règles. • Les paramètres des marges de la page sont essentiels à votre mise en page et doivent généralement être définis dès le début lorsque vous créez un site. Au départ, il est conseillé de définir des marges étroites. Les marges de la page sont indiquées sous la forme de quatre traits bleus en haut, en bas, à gauche et à droite de la page, délimitant les réglages des marges. Si vous le souhaitez, vous pouvez définir des marges correspondant aux paramètres de l'imprimante installée. • Les repères des lignes et des colonnes sont des aides sous-jacentes qui permettent de séparer la page en rangées ou en colonnes représentées par des repères à tirets bleus. • Les repères des règles sont les lignes rouges "collantes" librement positionnables qui sont très utiles pour aligner verticalement ou horizontalement des objets. 3.6.1.1 • Pour définir des guides de mise en page : Cliquez sur Guides de mise en page dans la barre d'outils contextuelle par défaut. L'onglet Marges vous permet de définir les guides pour les marges, les lignes et les colonnes de la page. Vous pouvez définir les marges de gauche, de droite, du haut et du bas séparément. La boîte de dialogue vous propose également l'option Marges équilibrées, permettant de faire correspondre les marges de droite à celles de gauche et celles du haut à celles du bas. La rubrique Repères des lignes et colonnes permet de définir des guides pour les rangées et les colonnes avec un blanc (écart) intermédiaire. Si vous souhaitez obtenir des lignes et des colonnes de largeur inégale, placezles tout d'abord à intervalles réguliers puis, dans un second temps, faites-les glisser sur les guides pour les repositionner comme vous le souhaitez. L'onglet Guides vous permet d'ajuster l'emplacement des repères des règles en précisant un positionnement absolu des pixels (les guides peuvent aussi être déplacés sur la page à partir des règles de WebPlus ; voir Créer des repères de règles. 3.6.1.2 • Pour afficher ou masquer les guides de mise en page : Dans le menu Affichage, activez ou désactivez l'option Repères. Ce réglage affecte également tous les guides de règles placés sur la page. 3.6.2 Création de repères de règles WebPlus vous permet de définir des repères de règles horizontaux et verticaux : il s'agit de lignes non imprimables que vous pouvez utiliser pour aligner les manchettes, les images et d'autres éléments de mise en page. Les repères sont magnétisés par défaut de sorte que les objets qui les touchent peuvent être déplacés sur la page avec leur repère de règle — une manière pratique de déplacer en groupe et simultanément des objets précédemment alignés. 28 Développer des sites et des pages • Pour créer un repère de règle, cliquez sur une règle, maintenez le bouton de la souris enfoncé et faites glisser le curseur sur la page. Une ligne rouge symbolisant le repère de règle apparaît parallèle à la règle (faites glisser le pointeur en maintenant la touche Alt enfoncée pour créer le repère à un angle de 90 degrés par rapport à la règle). • Pour déplacer un repère, faites-le simplement glisser à l'aide de la souris. • Pour supprimer un repère, glissez-déplacez-le n'importe où en dehors de la zone de la page. • Pour démagnétiser un objet sélectionné, cliquez sur l'un des deux petits repères triangulaires rouges affichés au point où l'objet est fixé au repère. Vous observez un curseur de lien ( ) lorsque vous survolez le repère de guide magnétique avec la souris. • Pour activer et désactiver les guides magnétiques, cochez/désélectionnez Guides magnétiques dans le menu Outils/Options/Mise en page/Mise en page. Les objets déjà "magnétisés" le restent après la désactivation des guides magnétiques. Vous devez les "décoller" manuellement. 3.6.3 Règles Les règles de WebPlus rappellent le té du metteur-en-page et ont de multiples fonctions : • Elles servent d'outil de mesure ; • Elles permettent de créer des repères pour l'alignement et le magnétisme ; • définir et afficher les retraits de paragraphes. La taille de l'intervalle réel des marques de la règle dépend du pourcentage de zoom actif. Dans un affichage en zoom arrière, de 50 % par exemple, la distance entre les marques de la règle est moins importante qu'avec un pourcentage de zoom de 150 %. Dans le cas où vous souhaiteriez exercer un contrôle plus important et des incréments de magnétisme plus faibles, cliquez sur un bouton zoom pour agrandir la page. 3.6.3.1 Ajuster les règles Par défaut, la règle horizontale s'étend en haut de la fenêtre de WebPlus et la règle verticale à gauche. Par défaut, l'intersection des règles se trouve dans le coin supérieur gauche de la table de montage. L'origine par défaut (0 sur chacune des règles) se situe dans le coin supérieur gauche de la page. Mais il est possible de définir un autre emplacement. 3.6.3.2 • Pour définir un nouveau point zéro : Faites glisser le marqueur de tabulation sur l’intersection des règles vers le nouveau point zéro sur la page ou la zone de travail (ne faites glisser que sur le marqueur triangulaire !) 3.6.3.3 Pour déplacer les règles : • Maintenez la touche Maj enfoncée, cliquez et faites glisser la flèche sur l'intersection des règles. Les règles horizontale et verticale se détachent et peuvent être déplacées sur la page. Le point zéro n'est pas modifié. • Double-cliquez sur l'intersection des règles pour faire passer les règles et leur origine vers le coin supérieur gauche de la page ou sur un objet préalablement sélectionné. C'est pratique pour mesurer les objets sur la page. 3.6.3.4 • Double-cliquez sur le repère de tabulation à l'intersection des règles. 3.6.3.5 • Pour rétablir la position de la règle et le point zéro d'origine : Pour verrouiller les règles et éviter qu'elles ne soient déplacées : Exécutez la commande Outils/Options/Mise en page, sélectionnez l'onglet Règles, puis cochez Verrouiller les règles. 3.6.4 Des règles comme outil de mesure La fonction la plus évidente des règles est celle d'un outil de mesure. Tandis que vous déplacez le pointeur, de petites lignes le long de chaque règle affichent les positions horizontale et verticale actuelles du curseur. Lorsque vous cliquez pour sélectionner un objet, les zones bleues de la règle indiquent les coins gauche, droit, supérieur et inférieur de l'objet. Chaque zone comporte un point zéro correspondant au coin supérieur gauche de l'objet de telle sorte que vous pouvez connaître les dimensions de l'objet en un simple coup d'œil. 29 WebPlus X4 Manuel d’utilisation 3.6.5 Utiliser la grille de points La grille de points est une matrice de points ou de lignes basée sur les unités de la règle couvrant les zones de la page et de la zone de travail. Comme les guides de règle, la grille de points est pratique pour l'alignement et le magnétisme. 3.6.5.1 • Pour activer/désactiver la grille de points : Activez (ou désactivez) le bouton Grille de points dans le menu Affichage. Vous pouvez définir l'espacement, le style et la couleur du quadrillage dans la boîte de dialogue Options. 3.7 Définir les propriétés du site Les propriétés du site permettent de définir des réglages qui s'appliqueront à la totalité du site. Les paramètres par défaut de la page, les contrôles HTML, l'optimisation des moteurs de recherche, l'auteur/copyright et les informations statistiques sur l'utilisation du Web peuvent être définis depuis les onglets des Propriétés du site. De manière générale, choisissez les paramètres du site au moment de la préparation du site. Une fois définis, les paramètres n'ont généralement pas besoin d'être modifiés (même si vous pouvez le faire à tout moment). Certaines propriétés du site, telles que les paramètres de la page et d'optimisation pour les moteurs de recherche s'appliquent aussi aux pages (via les Propriétés de la page). Cela permet de remplacer ou de compléter les propriétés "globales" du site, respectivement et d'appliquer des paramètres "locaux" à des pages particulières. 3.7.1.1 • Pour afficher ou modifier les paramètres du site : Sélectionnez Propriétés du site dans le menu Fichier. Une boîte de dialogue du même nom s'affiche. La boîte de dialogue est divisée en onglets représentant chacun un aspect des propriétés du site. Onglet Propriété Options (défaut) Alignement de la page par défaut WebPlus vous permet de définir une largeur et une hauteur par défaut pour les pages Web. Taille de la page par défaut Les réglages de largeur et de hauteur par défaut déterminent les dimensions des nouvelles pages Web standard ou des maquettes. Favoris Définit un fichier d'icône (une image) qui s'affichera lorsqu'un visiteur inclura votre site Web dans ses signets. Extension de fichier par défaut L'extension par défaut des pages publiées est .HTML. Certains serveurs web requièrent une extension différente. Avertir en cas de majuscules dans les noms de fichiers Lors de la création de pages, l'utilisateur est averti si des caractères en majuscules sont utilisés dans le nom de fichier de la page. 30 Développer des sites et des pages Noms des fichiers de ressources Contrôle la mise en forme des noms de fichiers de ressources afin de garantir la réussite du chargement des fichiers chez les FAI qui imposent des contraintes de noms de fichiers. Caractéristiques Google Maps Utiliser cette option pour paramétrer les cartes Google (mode Avancé uniquement). Correspondance de combinaisons des ressources Web Serif Applique la combinaison de couleurs de votre site aux objets intelligents publiés. Arborescence Spécifie le fichier script utilisé pour contrôler les barres de navigation. Images Options globales d'exportation des images Applique les paramètres par défaut de format et de rééchantillonnage lors de l'exportation d'images. HTML HTML et identifiants HTML par défaut Détermine la création de vos pages web par la sélection de plusieurs méthodes différentes de codage et le choix de la manière dont les identifiants HTML sont générés. En-tête des pages Ajoute les informations sur l'auteur et le copyright aux en-têtes des pages de votre site. Publication URL du site Définit l'adresse URL complète. C'est indispensable pour l'optimisation des moteurs de recherche avec des sitemaps ou des flux RSS. Compte FTP Définit le compte FTP par défaut utilisé pour la publication Web. Paramètres de compte FTP Affiche les paramètres de compte FTP par défaut. Rechercher Descripteurs pour les moteurs de recherche Permet d'inclure des informations descriptives facultatives et des mots-clés pour le site. Moteur de recherche Sitemaps et robots Indiquent aux moteurs de recherche ou aux robots s'ils peuvent parcourir le site, analyser et indexer la page courante. Un fichier sitemap inclut les pages Web à indexer, tandis qu'une méta-donnée Robots (ou un fichier robots.txt) contrôle quelles pages doivent être exclues de l'indexation. Statistiques Résumé et statistiques Permet d'afficher et de modifier les informations du site courant. 3.7.2 Définir la taille et l'alignement de la page Les propriétés de Largeur et de Hauteur par défaut du site déterminent les dimensions de toute page ou maquette nouvelle. Un paramètre par défaut des propriétés du site relatif à l'alignement (à gauche ou centré) définit la manière dont le contenu de la page est aligné dans le navigateur. Quand vous créez un nouveau site de toutes pièces, l'une des premières choses à faire est de vérifier que ses dimensions par défaut sont adaptées. Les paramètres de dimension peuvent être modifiés à tout moment. En général, il est toutefois préférable de définir de nouvelles dimensions avant de modifier la mise en page. En général, utilisez un paramètre de Largeur de page convenant à un moniteur standard (750 pixels est un choix sûr) qui ne contraindra pas les utilisateurs à faire défiler l'écran horizontalement. Pour les dimensions et l'alignement des pages, vous pouvez remplacer le paramètre du site pour une page particulière, comme décrit dans Définir les propriétés de la page. 3.7.2.1 • Pour définir les paramètres de dimensions des pages pour l'ensemble du site : Dans l'onglet Options de la boîte de dialogue, sélectionnez des valeurs différentes de Largeur et/ou de Hauteur à appliquer aux maquettes. 31 WebPlus X4 Manuel d’utilisation Vous pouvez aussi modifier le paramètre par défaut d'alignement de la page en tant que propriété du site ou le remplacer pour une page particulière. 3.7.2.2 • Pour définir les paramètres d'alignement des pages pour l'ensemble du site : Dans l'onglet Options de la boîte de dialogue, sélectionnez "À gauche" ou "Centré" dans le menu déroulant Taille de la page par défaut. Pour plus d'informations sur les autres paramètres d'onglets, reportez-vous à l'aide en ligne. 3.8 Définir les propriétés de la page Votre site WebPlus comporte son propre cadre de travail, composé du site lui-même, d'une ou plusieurs maquettes et d'un certain nombre de pages distinctes. Chaque aspect de ce cadre de travail est défini par divers paramètres de propriété qui contribuent à l'apparence et au comportement de votre site lorsqu'il est publié. Que vous commenciez par un modèle WebPlus ou à partir de zéro, vous pouvez utiliser les paramètres par défaut ou les modifier selon vos besoins. Les propriétés des pages peuvent être consultées via l'onglet Site, par un clic droit sur la page active dans l'espace de travail ou via le Gestionnaire de site. Le Gestionnaire de site constitue un outil très performant pour consulter mais aussi pour modifier les propriétés de plusieurs pages simultanément. Cochez simplement les pages voulues et modifier une ou plusieurs propriétés de la page. Toutes les pages cochées adoptent les nouveaux réglages. 3.8.1.1 • Cliquez sur le bouton Gestionnaire de maquettes au-dessus de la fenêtre Maquettes sur l'onglet Site. Le Gestionnaire de maquettes apparaît. 3.8.1.2 • Pour consulter les réglages de propriétés des maquettes : Pour consulter les réglages de propriétés des pages Web : Dans l'espace de travail, cliquez avec le bouton droit de la souris sur la page et sélectionnez Propriétés de la page. La boîte de dialogue Propriétés de la page apparaît. Nom de l'onglet Propriété Navigation (défaut) Titre, nom des pages et des fichiers Chaque page comporte un nom de page "visible" ou un nom de fichier affiché dans l'arborescence Structure du site, dans l'onglet Site. Vous pouvez modifier ces deux éléments et choisir un titre différent du nom de la page. Inclure à la navigation Par défaut, toutes les pages sont incluses dans les barres de navigation. Cette option vous permet d'exclure la page de la navigation. Séparateurs et description Cochez Avant et/ou Après pour appliquer des lignes horizontales au-dessus/en dessous de la page en tant qu'élément de sous-menu dans les barres de navigation. Ajoutez une Description pour ajouter du texte relatif à la page sous l'élément de sous-menu de la barre. Cadre du document actif Les pages peuvent être ouvertes dans un cadre du document actif si le cadre a été créé précédemment. Redirection de page Une page est redirigée vers une nouvelle destination (autre page, image, e-mail etc.) par un lien hypertexte après un intervalle de temps configurable. Apparence Alignement de la page L'alignement détermine l'apparence du contenu de la page dans un navigateur. Utilisez le paramètre par défaut de l'alignement des pages du site (Utiliser les paramètres du site) ou choisissez Gauche ou Centré à la place. Largeur et Hauteur Chaque maquette définit toujours la taille des pages qui l'utilisent. Pour les différentes pages qui n'utilisent pas de maquette, vous pouvez définir des dimensions de page personnalisées. Pour les pages qui utilisent une maquette, seule la Hauteur peut être modifiée. Dans le Gestionnaire de maquettes (bouton Propriétés), vous pouvez remplacer le réglage du site 32 Développer des sites et des pages d'une maquette donnée. Arrière-plan Maquettes Associez une ou plusieurs maquettes à une page donnée, ou n'associez aucune maquette à une page. Utiliser les paramètres du gestionnaire de combinaisons Adopte la combinaison de couleurs du site en arrière-plan ou utilise une couleur sur la page personnalisée et/ou une couleur/image d'arrière-plan. Effets Transitions d'entrée/de sortie de page Des transitions d'entrée et de sortie de page peuvent être appliquées lors de la navigation d'une page à une autre. Utiliser un fichier son Vous pouvez sélectionner un son d'arrière-plan à charger et à lire automatiquement lors du premier affichage d'une page. Sécurité de la page Sécurité de la page Appliquez le contrôle d'accès à vos page(s) Web en associant la page à un groupe d'utilisateurs (via l'objet intelligent Liste d'utilisateurs des ressources Web Serif). Rechercher Descripteurs de moteurs de recherche Ajoutez des informations descriptives facultatives et des mots-clés sur certaines pages pour remplacer les paramètres de moteurs de recherche du site. Moteur de recherche Sitemaps et robots Indique aux moteurs de recherche ou aux robots s'ils peuvent parcourir le site, analyser et indexer la page courante. Un fichier sitemap inclut la page courante dans l'indexation, tandis qu'une balise Robots (ou un fichier robots.txt) exclut la page. Ces réglages remplacent les paramètres du moteur de recherche du site. 3.9 Utiliser le Gestionnaire de site Le Gestionnaire de site de WebPlus contient un volume important d'informations utiles sur l'ensemble du site qui sont accessibles depuis une simple fenêtre contrôlée par des menus. L'outil vous permet de consulter les propriétés des pages/maquettes et de faire votre choix dans une sélection d'outils de gestion pour consulter et modifier les liens hypertexte (voir ci-dessous), les ressources, le texte, les polices, etc. Parmi les fonctionnalités du Gestionnaire, il faut citer : • La possibilité de contrôler l'étendue et de gérer de la même manière une page unique, une sélection de pages ou toutes les pages de votre site. • Les colonnes peuvent être triées par ordre croissant ou décroissant, ce qui permet de réorganiser rapidement les informations. • Rechercher et Remplacer. Lorsque c'est possible, il s'agit d'une méthode rapide pour appliquer des changements au texte à travers toutes les pages Web simultanément. Tandis que la plupart des outils de gestion présentent toujours un intérêt à un stade quelconque du développement de sites Web, la gestion des ressources et du texte, alliée à l'utilisation du Vérificateur de site, sont essentielles pour la vérification du site Web juste avant sa publication sur le Web. 33 WebPlus X4 Manuel d’utilisation 3.9.1.1 • Pour ouvrir le Gestionnaire de site : Cliquez sur le bouton Gestionnaire de site dans la barre d'état dans le bas de l'espace de travail (ou dans la barre d'outils contextuelle). Les fonctionnalités de chaque Gestionnaire peuvent être résumées de la manière suivante : Type de gestion Vous permet de... Pages/maquettes Inclure les pages dans la navigation (avec contrôle des séparateurs), associer des maquettes, définir l'alignement et les dimensions des pages, renommer les pages, définir un arrière-plan, ajouter du son, optimiser les pages pour les moteurs de recherche et appliquer des redirections, des transitions ou un accès utilisateur. Propriétés de la page HTML Afficher et modifier les noms de pages HTML, les noms (et chemin d'accès) de fichiers, inclure des pages à la navigation (avec contrôle des séparateurs). Lien hypertexte Afficher et éditer les liens hypertextes, accéder aux liens hypertextes de la page, rechercher et remplacer les liens de destination. Ancre Afficher et modifier le nom et l'emplacement des ancres, inclure des pages à la navigation (avec contrôle des séparateurs), accéder aux ancres. Navigation Afficher les barres de navigation utilisées sur votre site. Ressource Afficher les images, les liens de médias, les ressources de code HTML, les scripts ou les applications dans votre site. Accéder à toutes les ressources de la page, passer de l'état d'image liée à celui d'image intégrée, remplacer ou rééchantillonner les images. E-commerce Voir les objets d'e-commerce sur les pages de votre site. Texte Afficher et éditer le texte (dans WritePlus), nommer les articles, remettre en forme le texte, appliquer des styles, convertir les cadres créatifs et les tableaux en texte compatible HTML. Police Vérifier les polices et leur disponibilité, accéder à des polices de la page et remplacer des polices. Fichier Afficher la structure du site avec le nom des fichiers des pages au lieu du nom des pages. Ajouter des fichiers à votre site. Renommer des fichiers ou modifier leur emplacement. Vérificateur de site Afficher des problèmes de mise en page communs découverts dans le site. 3.10 Contrôle d'accès Le contrôle d'accès vous permet d'appliquer des mesures de sécurité à travers votre site Web, soit pour limiter l'accès à des pages spécifiques, soit pour contrôler l'accès utilisateurs aux forums et autres fonctions des ressources Web Serif. • Pour la sécurité des pages : identifiez-vous sur un page protégée par mot de passe ou via un champ d'identification sur la page. Cette méthode est généralement employée sur les sites Web personnels ou de petites entreprises. Il est possible de laisser la majorité du site en accès libre, avec un nombre limité de pages accessibles à des visiteurs Web sélectionnés. Par exemple, une page de galerie de photos de famille peut être rendue "privée" tout en étant partagée par vos proches (par la saisie d'un mot de passe). Les informations d'identification sont conservées dans un groupe d'utilisateurs associé à la page qui contient une liste d'utilisateurs autorisés ; les utilisateurs sont ajoutés manuellement par l'administrateur du site Web, et les nouveaux utilisateurs peuvent s'inscrire. • Pour la sécurité des objets intelligents : contrôle d'accès aux forums, aux blogs et au SGC. 34 • Forums : pour la gestion des utilisateurs et la modération de groupes. • Blogs : pour ajouter et supprimer des articles via un Groupe des éditeurs. Développer des sites et des pages • SGC : pour administrer les articles de votre SGC. Le contrôle d'accès est possible via les ressources Web Serif à partir d'un objet intelligent Liste d'utilisateurs, qui peut être créé pour administrer les groupes d'utilisateurs et les utilisateurs, ainsi que leur méthode d'identification. Les Ressources Web Serif sont un service en ligne sécurisé, hébergé par Serif, qui conserve les objets intelligents et toutes les données générées. Vous pouvez gérer votre objet intelligent Liste d'utilisateurs de la même manière que les autres objets intelligents et à tout moment, à partir de WebPlus ou via www.serifwebresources.com. Pour un contrôle d'accès réussi sur votre site Web, les étapes suivantes sont essentielles : • Configurer votre objet intelligent Liste d'utilisateurs • Ajouter des utilisateurs (manuellement ou par inscription) • Activer le contrôle d'accès • Ajouter un champ d'identification • Contrôle de l'utilisateur avancé 3.10.1 Configurer votre objet intelligent Liste d'utilisateurs Vous devrez d'abord créer un objet intelligent Liste d'utilisateurs puis un ou plusieurs groupes connectés à cet objet intelligent. Normalement, un objet intelligent par site suffit. Les différents groupes permettent de contrôler l'accès à des pages spécifiques ou à des ressources d'objets intelligents. 3.10.1.1 Pour créer un objet intelligent Liste d'utilisateurs : Outil Objet intelligent de la barre d'outils Objets Web. 1. Cliquez sur le bouton 2. Connectez-vous aux ressources Web Serif (voir Utiliser les objets intelligents ;). Cela présuppose que vous disposez d'un identifiant valide ; sinon, vous devez vous inscrire. 3. Dans la boîte de dialogue, cliquez sur le bouton Nouveau en bas du volet Ma bibliothèque d'objets intelligents. 4. Dans la boîte de dialogue Créer un objet intelligent, utilisez la barre de défilement pour parcourir la liste d'objets intelligents, puis sélectionnez Liste d'utilisateurs, et cliquez sur OK. 5. (Facultatif) Nommez votre objet intelligent et modifiez les couleurs du texte, des boutons, de l'arrière-plan ou de la bordure, puis cliquez sur Créer. Le nouvel objet intelligent figure dans votre bibliothèque d'objets intelligents. 6. Cliquez sur Quitter pour vous déconnecter des ressources Web Serif. Après avoir créé votre objet intelligent, vous pouvez lui associer des groupes d'utilisateurs à l'aide de la fonction Gérer. 3.10.1.2 Pour contrôler la connexion et la sécurité : Outil Objet intelligent de la barre d'outils Objets Web. 1. Cliquez sur le bouton 2. Sélectionnez l'objet intelligent Liste d'utilisateurs dans le volet Ma bibliothèque d'objets intelligents, puis cliquez sur le bouton Gérer pour afficher la boîte de dialogue Utilisateurs. 3. Pour activer une identification des utilisateurs par inscription à l'objet intelligent, cochez la case Activer l'identification des utilisateurs. Un lien S'inscrire apparaît alors dans un champ d'identification. 4. Pour une sécurité accrue lors de l'inscription des utilisateurs, cochez la case CAPTCHA activé. CAPTCHA est une technique anti-spam qui affiche un texte générée arbitrairement par le serveur ; le visiteur Web saisit le texte qui est ensuite validé. 5. Entrez une URL de redirection dans le champ Rediriger après la connexion si vous souhaitez diriger l'utilisateur vers une page Web spécifique après une connexion réussie. 6. Cliquez sur Mettre à jour. 35 WebPlus X4 Manuel d’utilisation 3.10.1.3 Pour créer un groupe d'utilisateurs : 1. Dans la boîte de dialogue, cliquez sur Groupes dans le menu supérieur. 2. Dans la boîte de dialogue Créer un groupe, entrez un nom de groupe correspondant à l'utilisation prévue pour le groupe, par exemple "AccèsPhotos". 3. Cliquez sur le bouton Créer un groupe, vérifiez les paramètres de la boîte de dialogue, puis cliquez sur Terminé. Le groupe est ajouté à la liste déroulante Groupe. 3.10.1.4 Pour gérer un groupe d'utilisateurs : • Sélectionnez le nom du groupe dans la liste déroulante Groupe, puis cliquez sur Gérer un groupe. Dans la boîte de dialogue, vous pouvez renommer le groupe et afficher le nombre d'utilisateurs. Vous pouvez faire des corrections en cliquant sur le bouton Mettre à jour un groupe ou supprimer le groupe en cliquant sur le bouton Supprimer un groupe. 3.10.2 Ajouter des utilisateurs (manuellement ou par inscription) ajouter des utilisateurs manuellement En général, l'ajout manuel d'utilisateurs convient bien dans le cas d'environnements contrôlés, tels que les petites entreprises, les organisations ou les associations dont les utilisateurs sont "connus". Pour chaque groupe d'utilisateurs créé, un groupe d'utilisateurs peut être ajouté à chaque groupe d'utilisateurs par saisie manuelle ou par importation depuis un fichier texte séparé par des virgules par l'administrateur Web. Il est possible d'utiliser une identification unique (tout le monde utilise les mêmes coordonnées de connexion) ou de créer une connexion par utilisateur, pour un contrôle accru (p. ex., pour les listes de membres). identification des utilisateurs par inscription Inversement, l'identification des utilisateurs est destinée à un accès public où il est difficile de contrôler les utilisateurs. L'utilisateur peut simplement s'enregistrer puis s'identifier à l'aide de leurs données de connexion. L'administrateur Web a toujours la possibilité de gérer ces utilisateurs à l'intérieur de leurs groupes par l'intermédiaire de l'objet intelligent Liste d'utilisateurs. Cette méthode requiert l'insertion d'un champ d'identification sur la page (généralement une maquette). Vous pouvez ajouter plusieurs utilisateurs au même groupe d'utilisateurs. Le même utilisateur peut appartenir à plusieurs groupes d'utilisateurs. 3.10.2.1 Pour ajouter un utilisateur manuellement : Outil Objet intelligent de la barre d'outils Objets Web. 1. Cliquez sur le bouton 2. Sélectionnez l'objet intelligent Liste d'utilisateurs dans le volet Ma bibliothèque d'objets intelligents, puis cliquez sur le bouton Gérer de l'objet pour afficher la boîte de dialogue Utilisateurs. 3. Dans la rubrique Ajouter un utilisateur dans le bas de la boîte de dialogue, saisissez l'adresse électronique de l'utilisateur dans le champ E-mail. Lorsque Demander l'activation est coché, un lien d'activation est envoyé par courrier électronique à l'utilisateur en même temps qu'un mot de passe auto-généré. Lorsque l'option n'est pas cochée, un mot de passe généré automatiquement est envoyé. 36 Développer des sites et des pages Lorsque E-mail utilisateur est coché, un e-mail est envoyé à l'utilisateur ; dans le cas inverse, aucun e-mail n'est envoyé mais l'utilisateur est ajouté. Le mot de passe doit être communiqué à l'utilisateur par une autre méthode (téléphone ou verbalement). 4. Cliquez sur le bouton Ajouter un utilisateur. L'utilisateur est ajouté à la liste d'utilisateurs dans la section Utilisateurs. 5. Pour affecter des utilisateurs à un groupe, cliquez sur Groupes dans le menu supérieur. 6. Sélectionnez le groupe dans la liste déroulante Groupe, puis ajoutez l'utilisateur sélectionné dans le champ Utilisateurs au champ Groupe en cliquant sur le bouton Ajouter (si vous ajoutez tous les utilisateurs, cliquez sur Ajouter tout). L'utilisateur appartient alors au groupe d'utilisateurs. Pour le supprimer, utilisez les boutons Supprimer (ou Supprimer tout) du groupe. Vous pouvez configurer les options de façon à ce que les utilisateurs s'inscrivent eux-mêmes, vous évitant de devoir ajouter et gérer manuellement tous les utilisateurs comme décrit ci-dessus. Utilisez pour cela les ressources Web Serif. 3.10.2.2 Pour activer l'identification des utilisateurs par inscription : Cette méthode requiert l'insertion d'un champ d'identification sur la maquette. Un nouveau visiteur sur le site peut s'inscrire pour devenir un utilisateur enregistré (cliquez sur le lien S'inscrire du champ d'identification). Outil Objet intelligent de la barre d'outils Objets Web. 1. Cliquez sur le bouton 2. Sélectionnez l'objet intelligent Liste d'utilisateurs dans le volet Ma bibliothèque d'objets intelligents, puis cliquez sur le bouton Gérer de l'objet pour afficher la boîte de dialogue Utilisateurs. 3. Cliquez sur Groupes dans le menu supérieur. 4. Dans la boîte de dialogue, sélectionnez un groupe existant dans la liste déroulante Groupe, puis cliquez sur Gérer un groupe. 5. Cochez Ajouter de nouveaux utilisateurs à la connexion : les informations de connexion des utilisateurs seront ajoutées au groupe d'utilisateurs lors de l'enregistrement. Lorsque cette option est cochée, la connexion donne accès à tous les groupes dont l'identification des utilisateurs est activée. Dans le cas contraire, les pages à accès limité seront protégées. 6. Cliquez sur Mettre à jour un groupe, puis sur Terminé. Si vous créez un groupe, n'oubliez pas de cliquer sur Ajouter de nouveaux utilisateurs à la connexion dans la section Créer un groupe. Effectuez un clic droit sur un champ d'identification et sélectionnez Gestion de l'objet intelligent. Lorsque les utilisateurs s'inscrivent via un champ d'identification, ils apparaissent dans tous les groupes d'utilisateurs dont l'identification des utilisateurs est activée. 3.10.3 Activer le contrôle d'accès 3.10.3.1 Pour activer le contrôle d'accès sur votre page Web : Sécurité de la page dans la barre d'outils 1. Lorsque la page Web est affichée, cliquez sur contextuelle. 2. Cochez Protéger la page par un mot de passe pour activer le contrôle d'accès. Notez que le bouton Modifier / Administrer est activé. Cliquez sur ce bouton pour afficher les groupes d'utilisateurs disponibles (en gras) et l'objet intelligent Liste d'utilisateurs correspondants. 37 WebPlus X4 Manuel d’utilisation 3. Dans la boîte de dialogue Groupes d'utilisateurs, sélectionnez le groupe, par exemple AccèsPhotos, puis cliquez sur OK. L'onglet Sécurité de la page doit indiquer si la page est protégée par un mot de passe et que le groupe d'utilisateurs a été défini. 4. Cliquez sur OK, puis encore sur OK pour fermer les boîtes de dialogue. Vous remarquerez alors que la page de l'onglet Site affichera un symbole en forme de clé indiquant que la sécurité de la page est définie. 3.10.4 Ajouter un champ d'identification WebPlus vous permet d'ajouter un champ de saisie de connexion/déconnexion sur une page de votre site Web. Cela signifie qu'un internaute enregistré peut accéder aux pages à accès limité en s'identifiant sur le site. Le champ d'identification est une représentation visuelle de l'objet intelligent Liste d'utilisateurs ; il est inséré sur la page et présent dans les ressources Web Serif. Vous pouvez ajouter des utilisateurs manuellement dans les ressources Web Serif ou via l'identification des utilisateurs par inscription. Ajoutez le champ d'identification sur la maquette du site Web. Toutes les pages Web utilisant la maquette permettent alors à l'utilisateur de se connecter au site Web. 3.10.4.1 Pour ajouter un champ d'identification de l'utilisateur : 1. Suivez la procédure d'activation du contrôle d'accès, mais au lieu de fermer la boîte de dialogue, choisissez une page dans laquelle placer le champ d'inscription, puis cliquez sur le bouton Insérer. 2. Placez le pointeur Coller à l'endroit où vous voulez insérer le champ d'identification de l'utilisateur, puis cliquez pour insérer l'objet avec ses dimensions par défaut. 3. Activez l'identification des utilisateurs par inscription comme décrit précédemment. 3.10.5 Contrôle de l'utilisateur avancé Certaines fonctions complémentaires vous permettent d'importer/exporter, suspendre, et interdire/accepter les utilisateurs d'un groupe. L'interdiction d'un utilisateur est globale (l'accès à tous les groupes d'utilisateurs est empêché). Un utilisateur peut être supprimé ou momentanément suspendu pour avoir enfreint les règles du site (par exemple, pour avoir publié des propos diffamatoires sur des forums publics hébergés). À la prochaine tentative de connexion de l'utilisateur, le message "Votre compte a été suspendu" est affiché. Si une action plus radicale est requise, l'adresse IP de l'utilisateur peut être interdite d'accès aux objets des ressources Web Serif (forums, etc.). En dernier recours, le fournisseur d'accès ou l'organisation à laquelle l'adresse électronique de l'utilisateur appartient peut être interdite d'accès. Cette dernière option n'est généralement pas recommandée mais peut être nécessaire pour empêcher les actes de malveillance, tels que le spamming professionnel. Consultez l'aide en ligne pour plus d'informations. 38 Développer des sites et des pages 3.10.6 Contrôle d'accès pour les forums, les blogs et le SGC 3.10.6.1 Pour paramétrer le contrôle d'accès pour les forums : 1. Sélectionnez l'objet intelligent Liste d'utilisateurs déjà créé pour le contrôle d'accès lors de la création d'un forum. WebPlus créera automatiquement un groupe d'utilisateurs pour permettre à un utilisateur de s'inscrire et de se connecter. Le visiteur du forum devra cliquer sur le lien d'enregistrement et s'inscrire. 2. Pour paramétrer le groupe de modération d'un forum, vous devrez créer un groupe de modération, ajouter manuellement des modérateurs, gérer le forum et choisir le groupe dans le menu déroulant Modération par le groupe. 3.10.6.2 Pour paramétrer le contrôle d'accès pour les blogs et le SGC : • Vous devrez créer un groupe d'éditeurs, ajouter manuellement des éditeurs, puis : • Pour les blogs, cliquez sur Gérer et choisissez le groupe dans le menu déroulant Groupe des éditeurs. OU Pour le SGC, cliquez sur Gérer et choisissez Autorisations à partir de l'adresse www.serifwebresources.com. Le menu précédent est de nouveau proposé. 3.11 Optimisation pour les moteurs de recherche L'indexation implique la collecte automatique d'informations à propos des pages Web par les moteurs de recherche tels que Google, Yahoo!, Live Search etc. En "glanant" des informations auprès des moteurs de recherche, les utilisateurs tirent profit des informations indexées pour obtenir des résultats de recherche rapides et précis qui répondent aux critères de recherche saisis par l'utilisateur. Par défaut, le contenu de chaque page Web publiée (surtout le texte de l'en-tête) est indexé. Toutefois, sachant que des milliards de pages Web sont constamment indexées sur Internet, les développeurs Web peuvent optimiser la procédure d'indexation pour permettre aux pages de leur site d'être mieux classées dans les résultats de la recherche. L'optimisation des pages Web pour les moteurs de recherche peut s'effectuer de différentes manières : • Méta-balises : les balises contiennent des descripteurs pour les moteurs de recherche (c'est-àdire un mot-clé et une description) correspondant au site et/ou à une page particulière. Ces balises sont utilisées pour permettre une meilleure corrélation entre le texte saisi dans le moteur de recherche (à la manière de ce que vous saisissez dans Google) et les mots-clés que vous avez associé avec votre site ou page Web. De plus, une méta-balise 'Robots' permet aussi d'inclure/exclure le site ou les pages de l'indexation ; il est aussi possible d'empêcher l'exploration des liens hypertextes vers d'autres pages. • Robots : des pages (ou dossiers) peuvent être exclues de l'indexation par les moteurs de recherche en utilisant un fichier "robot". Il fonctionne de la même manière que les méta-balise 'Robots' mais il utilise un fichier texte (robots.txt) pour indiquer aux robots ou aux araignées ce qu'ils ne doivent pas indexer. Le fichier énumère simplement des références de dossiers ou de pages exclus du site Web. • Sitemaps : à l'opposé du concept des "robots" ; les pages peuvent être incluses pour faciliter et optimiser l'indexation et l'analyse intelligentes. Les références des pages du site Web sont conservées dans un fichier sitemap dédié (sitemap.xml). Que vous utilisiez des méta-balises, des robots ou des cartes de site indépendamment ou conjointement, WebPlus simplifie la configuration. Comme ces réglages peuvent être établis ou modifiés pour tous le site (Propriétés du site ; onglet Moteur de recherche), toute nouvelle page adopte les réglages de moteur de recherche du site. Si vous modifiez les paramètres du site, toutes les pages Web sont automatiquement mises à jour pour adopter les nouveaux réglages. Toutefois, vous pouvez annuler les réglages du site sur une page Web particulière (Propriétés de la page ; onglet Moteur de recherche) à tout moment. Lorsque la page n'emploie pas les réglages du site, les modifications apportées à ces réglages sont toujours ignorées par la page. 39 WebPlus X4 Manuel d’utilisation 3.11.1 Utiliser les méta-balises de descripteurs des moteurs de recherche Si vous souhaitez augmenter la probabilité que votre site Web soit remarqué par les principaux moteurs de recherche du Web, nous vous conseillons de définir des descripteurs. Cette démarche reste toutefois facultative. Les moteurs de recherche possèdent des catalogues de pages Web, souvent compilés grâce à des moteurs de balayage ou d'autres programmes qui sillonnent le Web à la recherche de données sur les sites et leur contenu. En apportant des informations descriptives et des mots-clés, vous aidez ces moteurs de recherche à classifier correctement votre site. Vous pouvez insérer des descripteurs pour l'intégralité de votre site ainsi que pour certaines pages spécifiques si vous le souhaitez. Par exemple, pour un simple site web ornithologique, vous pouvez avoir les descripteurs suivants, reflétant le contenu de votre site ou de votre page : Propriétés du site Propriétés de la page Description Site des oiseaux américains Page des variétés d'aigrettes et de hérons Mots-clés oiseaux, américains, Audubon aigrette garde-bœufs, aigrette sacrée, héron strié Il est judicieux de prévoir les descripteurs utilisés pour le site et les pages. S'ils sont définis, les descripteurs du site complètent les descripteurs spécifiques aux pages. 3.11.1.1 Pour saisir des descripteurs destinés aux moteurs de recherche : 1. (Pour le site) Sélectionnez Fichier/Propriétés du site. OU (Pour une page) Cliquez avec le bouton droit de la souris dans l'espace de travail ou dans l'onglet Site et sélectionnez Propriétés de la page (ou sélectionnez cet élément dans le menu Édition). 2. Cliquez sur l'onglet Rechercher de la boîte de dialogue. 3. Dans la fenêtre du haut, saisissez une brève description de votre site. La description n'est pas limitée en longueur, mais les dix premiers mots sont les plus importants. 4. Dans la fenêtre du bas, saisissez autant de mots-clés, séparés par des virgules, qu'il vous semble bon d'indiquer pour décrire votre site. Mettez-vous à la place d'un visiteur potentiel. Quels mots-clés saisirait-il s'il cherchait exactement ce que propose votre site ou votre page ? 5. Choisissez le code de langue de votre site dans la liste déroulante pour identifier la langue utilisée sur votre site. La plupart des moteurs de recherche permettent de filtrer les pages web par langue ; votre site figurera dans les résultats fournis en fonction du code de langue défini. 3.11.2 Exclure des pages de l'indexation (méta-balises "robots") Une méta-balises "robots" peut être utilisée par les robots des moteurs de recherche pour contrôler la manière dont ils accèdent au site Web ou à la page. L'ensemble du site Web (et des pages) peut être défini pour être indexé ou non, les liens hypertextes des pages peuvent être suivis ou non ou une combinaison de ces réglages. Les réglages sont appliqués au niveau du site en cochant Indexer les pages de ce site et Liens suivis des pages ou uniquement aux propriétés de pages particulières. 3.11.2.1 Pour activer la génération de la méta-balise "robots" : 40 1. (Pour le site) Sélectionnez Fichier/Propriétés du site. OU (Pour une page) Cliquez avec le bouton droit de la souris dans l'espace de travail ou dans l'onglet Site et sélectionnez Propriétés de la page (ou sélectionnez cet élément dans le menu Édition). 2. Sélectionnez l'onglet Moteur de recherche et cochez l'option Créer une méta-balise 'Robots' (pour une page, vous devez annuler et remplacer les réglages au niveau du site). 3. (Pour le site) Utilisez deux sous-options pour autoriser ou empêcher les moteurs de recherche d'indexer la totalité du site (cochez/décochez l'option Indexer les pages de ce site) ou pour autoriser ou empêcher l'indexation de toutes les pages liées à partir d'une page indexée (cochez/décochez l'option Liens suivis des pages). OU (Pour la page) Cochez Remplacer les paramètres de moteur de recherche du site et Créer une méta-balise 'Robots', puis cochez/décochez les sous-options équivalentes pour la page choisie. Développer des sites et des pages 3.11.3 Exclure des pages de l'indexation (fichier "robots") L'objectif de cette méthode est la même que celle de l'utilisation d'une méta-balise 'Robots', mais un fichier robots.txt est créé et aucune méta-balise 'Robots' n'est ajoutée dans les pages Web. Le fichier robots.txt est enregistré dans le dossier racine du site Web et peut être ouvert dans un éditeur de texte pour vérifier les pages et les dossiers exclus. 3.11.3.1 Pour activez un fichier robots.txt : 1. Sélectionnez Propriétés du site dans le menu Fichier. 2. Sous l'onglet Moteur de recherche, cochez l'option Créer un fichier 'Robots' de moteur de recherche. 3. (Pour le site) Pour autoriser ou empêcher les moteurs de recherche d'indexer la totalité du site (cochez/décochez l'option Indexer les pages de ce site ). OU (Pour une page) Pour empêcher les moteurs de recherche d'indexer la page, cochez Remplacer les paramètres du moteur de recherche du site, puis décochez l'option Indexer cette page. 3.11.4 Inclure les pages dans l'indexation Jusqu'ici, nous nous sommes surtout intéressés à des méthodes permettant d'exclure des pages Web de l'indexation. Sans ces contrôles, les pages Web sont indexées en découvrant les liens hypertextes sur les pages et en les suivant, en récoltant les mots clés, les descriptions et le texte des pages à indexer. Toutefois, cette procédure n'est pas toujours efficace car il peut y avoir un nombre limité de liens hypertextes entre les pages et présents sur la totalité du site. Par conséquent, un fichier sitemap de moteur de recherche (sitemap.xml) peut être créé pour servir de référence locale aux moteurs avant l'analyse du site. Le fichier énumère simplement les pages du site Web que vous avez définies comme pouvant être indexées. Le fichier indique aussi aux moteurs de recherche quand les pages ont été modifiées, les informe du moment où ils doivent vérifier la page et l'importance des pages les unes par rapport aux autres. La méthode Sitemap est particulièrement efficace pour promouvoir les pages de votre site Web, avec une plus forte probabilité de bon classement de vos pages dans les résultats de la recherche de l'utilisateur. Comme les fichiers "robots", le réglage des propriétés du site et de la page crée le fichier sitemap (qui est publié avec votre site Web) ; le fichier est conservé avec le dossier Web racine (probablement avec le fichier robots.txt). L'une des conditions requises pour utiliser les sitemaps des moteurs de recherche est la nécessité de déclarer une URL absolue. Cela permet d'indexer l'adresse URL exacte (par exemple, www.serif.com), qui permet à son tour aux utilisateurs d'être directement transférés sur votre site lorsqu'ils cliquent sur le lien dans les résultats de la recherche. 3.11.4.1 Pour activer les sitemaps des moteurs de recherche : 1. Sélectionnez Propriétés du site dans le menu Fichier. 2. Cochez l'option Créer un fichier de moteur de recherche Sitemap. 3. (Facultatif) Lorsque l'option ci-dessus est cochée, le fichier sitemap.xml par défaut peut être renommé. Cliquez sur le bouton Modifier et effectuez les modifications requises. 4. (Pour le site) Pour renseigner le fichier sitemap avec la liste de toutes les pages Web du site (pour une meilleure "découverte" des pages), cochez l'option Indexer les pages de ce site. Décochez pour créer un fichier un fichier sitemap.xml vide. OU (Pour une page) Dans les propriétés de la page, pour ajouter la page au fichier sitemap, cochez l'option Remplacer les paramètres du moteur de recherche du site, puis Indexer cette page. Cela suppose que le site dans sa globalité n'a pas été listé dans le fichier sitemap.xml. 5. Cochez/décochez les réglages sitemap, y compris : • Date et heure de la dernière modification de la page. • Fréquence de modification de la page (réglez Toutes les heures, Tous les jours, Toutes les semaines, Tous les mois, Tous les ans ou Jamais) : cela indique au moteur de recherche à quelle fréquence la page est susceptible d'être modifiée. Le moteur de recherche choisit la fréquence d'indexation de la page en fonction de ce réglage. 41 WebPlus X4 Manuel d’utilisation • Niveau de priorité de la page : 0.0 (faible) à 1.0 (élevée). Définit une priorité des pages par rapport aux autres pages Web indexées par les moteurs de recherche. Le réglage par défaut peut concerner les propriétés du site avec des réglages spécifiques aux pages ayant une priorité supérieure ou inférieure au réglage par défaut. 3.12 Effectuer une recherche sur des sites Web WebPlus utilise une fonction de recherche puissante qui recherche les critères saisis par l'utilisateur dans le texte qui apparaît sur votre site dans le texte artistique, le code HTML ou les cadres de texte créatif et les tableaux. Cela facilite l'extraction du contenu des pages Web hébergées. La fonction de recherche utilise l'outil Champ de recherche et l'outil Résultats de la recherche, tous deux hébergés dans la palette Recherche de la barre d'outils Objets Web. Chaque outil est utilisé pour créer des objets qui fonctionnent ensemble. Résultats de la recherche : crée une fenêtre dans laquelle les résultats de la recherche sont affichés. En général, la fenêtre est placée et dimensionnée sur sa propre page et elle ne figure pas dans la structure de navigation du site. Vous placerez normalement le champ de recherche avant d'ajouter l'objet Champ de recherche. Champ de recherche : champ de texte dans lequel les utilisateurs saisissent le mot ou l'expression recherchés. Ce champ est généralement ajouté à une maquette et apparaît sur toutes les pages du site. Par exemple, le mot "Nulla" qui est recherché ci-dessus pourrait donner des résultats présentant les pages Web qui contiennent le mot recherché. L'utilisateur clique sur le bouton Rechercher pour lancer la recherche. Les résultats de la recherche présentent le titre d'une page constituant un lien hypertexte ainsi que le texte de la page Web associée pour référence. Il suffit de cliquer sur le lien hypertexte pour accéder à la page Web. Selon les règles de sécurité, la recherche s'applique par défaut à toutes les pages Web. Toutefois, les pages protégées par un mot de passe sont toujours exclues des résultats de la recherche. Voir Accès utilisateur pour plus d'informations sur la protection par mot de passe. 3.12.1.1 Pour ajouter les Résultats de la recherche : 42 Résultats de la recherche dans la palette Recherche de la barre d'outils 1. Cliquez sur l'outil Objets Web. 2. Placez le pointeur à l'emplacement voulu, puis cliquez et faites glisser pour mettre en place la fenêtre des résultats de la recherche. Développer des sites et des pages 3.12.1.2 Pour ajouter l'objet Champ de recherche : Champ de recherche dans la palette Recherche de la barre d'outils Objets 1. Cliquez sur l'outil Web. 2. Faites glisser le pointeur de mise en place à l'endroit choisi sur la page Web ou la maquette et cliquez pour placer votre objet Champ de recherche, qui apparaît alors sur la page. Placez l'objet Champ de recherche dans la partie supérieure de la maquette afin que la fonction de recherche puisse s'appliquer à la totalité du site. La recherche sur le site ne présente aucun intérêt sans un moyen quelconque pour présenter les résultats de la recherche à l'utilisateur. Cela s'effectue en utilisant l'objet Résultats de la recherche qui, comme l'outil Recherche, peut être ajouté sur une page Web à l'aide du pointeur de mise en place. Toutefois, l'objet est généralement redimensionné pour occuper la totalité de la page avant sa mise en place (il doit afficher toutes les pages Web trouvées les unes à la suite des autres). Conservez les résultats de la recherche sur une (nouvelle) page séparée qui peut aussi avoir une apparence bien distincte (double-cliquez sur l'objet pour modifier la présentation de la page). 3.13 Utiliser la Galerie L'onglet Galerie sert à stocker tous les objets personnels que vous souhaitez réutiliser sur le même site Web ou sur d'autres sites. Lorsque vous avez copié un élément dans votre Galerie, il est disponible sur tous les sites : il suffit d'ouvrir la Galerie ! De plus, l'onglet contient des éléments prédéfinis classés dans des catégories et que vous pouvez personnaliser et utiliser comme point de départ de vos propres conceptions (vous disposerez de davantage de catégories et d'éléments si vous achetez et installez le CD de ressources de xWebPlus X4). La Galerie est composé de deux parties : un menu déroulant Catégories, en haut, et la fenêtre Modèles, en bas, qui contient une liste de miniatures représentant les éléments de la catégorie sélectionnée. Vous pouvez adopter un élément en le faisant glisser sur la page. L'onglet Galerie vous permet également de stocker votre propres compositions dans la section Mes créations. Elles deviennent disponibles pour n'importe quel site WebPlus. À la première installation de WebPlus, la galerie Mes créations est vide. Vous pouvez lui ajouter des compositions personnalisées. Vous pouvez créer des catégories à tout moment. Pour réorganiser vos compositions en groupes logiques, vous pouvez ajouter des sous-catégories à Mes créations ou à toute catégorie personnalisée ou prédéfinie. La catégorie Mes créations est conçue spécialement pour stocker vos objets personnalisés. 3.13.1.1 Pour utiliser un élément de la Galerie : • Cliquez sur sa miniature dans la catégorie de conceptions et faites-la glisser sur la page. La Galerie conserve une copie de l'élément tant que vous ne le supprimez pas. 3.13.1.2 Pour afficher votre galerie : 1. Cliquez sur l'onglet Galerie du Studio. 2. Sélectionnez une catégorie dans le menu déroulant. Les éléments de la première sous-catégorie répertoriée s'affichent par défaut. 3.13.1.3 Pour ajouter, supprimer ou renommer des catégories personnalisées : 1. L'onglet Galerie étant sélectionné, cliquez sur le bouton de menu de l'onglet et sélectionnez Ajouter une catégorie, Supprimer la catégorie ou Renommer la catégorie dans le menu déroulant. 2. La boîte de dialogue vous permet de saisir et/ou confirmer la modification. En cas d'ajout d'une catégorie, vous devez la nommer dans une boîte de dialogue. Pour un renommage ou une suppression, sélectionnez la catégorie avant de sélectionner l'option. 43 WebPlus X4 Manuel d’utilisation Toutes les conceptions contenues dans une catégorie supprimée sont aussi supprimées. 3.13.1.4 Pour ajouter, supprimer ou renommer des sous-catégories personnalisées : • Pour ajouter une sous-catégorie, sélectionnez une catégorie et cliquez sur Ajouter une sous-catégorie... dans le bouton • Menu de l'onglet de l'onglet. Pour supprimer ou renommer une sous-catégorie, sélectionnez une option dans le menu déroulant barre de titre de la sous-catégorie. de la 3.13.1.5 Pour déplacer ou copier un objet dans la Galerie : 1. Dans le menu déroulant Catégories, sélectionnez la catégorie dans laquelle vous souhaitez ajouter l'objet. Parcourez les sous-catégories, en les développant si nécessaire. 2. Depuis la page, faites glisser l'objet vers la catégorie ou sous-catégorie cible (faites-le glisser vers la barre de titre d'une sous-catégorie vide pour l'ajouter). Pour le copier, appuyez sur la touche Ctrl avant de faire glisser le pointeur. Une miniature représentant l'objet apparaît dans la fenêtre Compositions. 3.13.1.6 Pour renommer ou supprimer un élément de la Galerie : • Sélectionnez une miniature de conception, cliquez sur le bouton qui s'affiche dans le coin inférieur droit lorsque vous survolez la miniature avec la souris et effectuez une sélection dans le menu. 3.14 Ajouter une carte Google Utilisez les cartes Google intégrées à votre page Web pour vérifier qu'un client trouvera votre siège, que des participants d'une réunion ou d'un événement trouveront la salle, ou pour identifier des centres d'intérêt. En les intégrant à une page Web "Coordonnées" spécialement conçue à cet effet, vous pourrez ajouter à votre site une carte accompagnée d'indications. Chaque carte pourra contenir jusqu'à 10 marqueurs afin d'identifier chaque emplacement. Une fonction Carte plus avancée est également disponible pour des cartes plus complexes incluant un nombre illimité de marqueurs et la possibilité d'utiliser du code HTML comme texte de marqueur. 3.14.1.1 Pour ajouter une carte Google simple : 44 Insérer une carte Google dans la palette Média de la barre d'outils 1. Cliquez sur le bouton Objets Web. 2. Dans la boîte de dialogue Configurer une carte Google, entrez votre code postale ou votre adresse dans le champ Rechercher un lieu. WebPlus utilise le géolocalisateur de Google pour détecter votre localité et afficher les adresses locales. Développer des sites et des pages 3. Naviguez sur la carte à l'aide des contrôles de déplacement et de zoom — vous pouvez vous déplacer sur la carte à l'aide du pointeur en forme de main. Utilisez le curseur de zoom et les boutons pour agrandir ou réduire la carte. Si vous utilisez une souris à molette, cochez Activer le zoom avec la molette pour naviguer plus rapidement sur la carte. 4. Pour ajouter un marqueur, cliquez sur Ajouter, puis placez le pointeur effectuez un clic. 5. Dans la boîte de dialogue, nommez le marqueur et entrez son texte, puis cliquez sur OK. Le marqueur apparaît sur l'aperçu de la carte et son texte s'affiche lorsque vous cliquez sur le marqueur. Recommencez cette procédure pour chaque marqueur. 6. (Facultatif). Cochez Afficher la commande de navigation pour le mode complet (déplacement, boutons de zoom, et curseur de zoom) ou compact (+/- zoom avant/arrière uniquement). 7. (Facultatif). Cochez Afficher la commande de type de carte pour une barre ou un menu déroulant (proposant tous les deux les modes Carte, Satellite, Hybrid et Terrain). 8. Cliquez sur OK. 9. Le pointeur de la souris se transforme en curseur d'insertion. Les opérations suivantes vous permettent de déterminer la taille et l'emplacement de départ de la carte. • Pour insérer la carte à une taille par défaut, cliquez une fois. OU Pour adapter la taille de la carte à la conception de votre page, cliquez et déplacez la souris pour définir une zone, puis relâchez le bouton de la souris. sur l'emplacement choisi, puis Vous pouvez déplacer ou supprimer un marqueur en modifiant la carte Google. 3.14.1.2 Pour modifier les marqueurs de votre carte Google : • Double-cliquez sur la carte Google. • Dans la boîte de dialogue, sélectionnez un marqueur dans la liste déroulante Marqueurs de carte, puis : • Pour modifier l'étiquette d'un marqueur, éditez le texte dans la zone déroulante Étiquette. • Pour déplacer le marqueur, cliquez sur Déplacer, puis replacez le pointeur • Pour supprimer le marqueur, cliquez sur Supprimer. sur la carte. 3.14.2 Utiliser des cartes Google avancées Essayez les cartes Google avancées si vous avez besoin de plus de 10 marqueurs et souhaitez ajouter des étiquettes et un texte de marqueur contenant du code HTML, avec des liens hypertextes et des liens hypertextes d'accompagnement. Vous devrez acquérir une clé Google Maps au niveau du site pour activer cette fonction. Une seule clé est autorisée par site. 3.14.2.1 Pour activer le mode Carte avancée : 1. Cochez Cartes avancées. Vous devrez alors enregistrer un compte Google et obtenir une clé Google API au niveau du site ! 2. Cliquez sur le bouton Accès au site Web Google Maps pour demander une clé. 45 WebPlus X4 Manuel d’utilisation 3. Collez la clé copiée sur le site Web Google.com dans le champ de texte Clé Google Maps. 4. Pour saisir du code HTML, tapez directement le texte dans le champ Étiquette. Pour du code plus avancé, il est recommandé de copier/coller le code HTML dans le champ développé indépendamment de la boîte de dialogue Google Maps. 5. Cliquez sur OK. Pour afficher vos modifications, vous devez publier votre site. 3.15 Ajouter une publicité Google Adsense est un service gratuit Google qui vous permet de placer un espace publicitaire sur vos pages Web. Les visiteurs de vos pages verront s'afficher des publicités correspondant au type de contenu de votre site — le visiteur bénéficie d'un accès facile à des produits adaptés pendant que vous, en tant que développeur Web, gagnez de l'argent pour compenser le coût d'hébergement ou devenez rapidement riche ! Pour faire de la publicité, les développeurs Web doivent disposer d'un compte Google Adsense certifié (www.google.com/Adsense) grâce auquel ils pourront créer et gérer jusqu'à trois publicités par page (on parle d'unités). Vous pouvez copier pour chaque unité un morceau de code généré par le site Web Google Adsense puis le coller dans la boîte de dialogue de publicité Google Adsense de WebPlus. Parmi les formats de publicité pris en charge : Leaderboard (728 x 90 pixels), Bannière (468 x 60), Demi-bandeau (234 x 60), Bouton (125 x 125), de diverses tailles Gratte-ciel, carrés et rectangulaires. Google Adsense propose également des rapports d'utilisation complets, une gestion des comptes, ainsi que des ressources. Pour plus d'informations, rendez-vous sur www.google.com/adsense. 3.15.1.1 Pour vous connecter à Google Adsense : • Rendez-vous sur www.google.com/adsense pour vous inscrire ou vous connecter à Google Adsense. Cliquez sur le bouton Souscrire maintenant si vous êtes un nouvel utilisateur ou connectez-vous simplement à l'aide de votre profil utilisateur existant. Les nouveaux utilisateurs devront saisir l'URL du site et la langue utilisée, et devront accepter les termes et conditions de Google. Lors de l'enregistrement, vous devrez attendre que Google valide votre site Web. La réponse de Google vous sera fournie par e-mail dans un délai d'une semaine. Si elle est positive, vous pouvez créer et gérer les publicités. La procédure d'enregistrement analysera votre site Web et proposera des publicités adaptées au contenu de votre site Web. Le développeur Web ne contrôle pas le contenu publicitaire de son site. 3.15.1.2 Pour créer et gérer les publicités : 1. Connectez-vous à Google Adsense. 2. Dans Adsense Setup, sélectionnez Adsense for Content, puis suivez l'assistant pour créer une unité et sélectionner son format et son style de couleur. 3. Copiez le morceau de code Adsense généré, fourni pour l'unité. Vous en aurez besoin pour le coller dans WebPlus. 3.15.1.3 Pour intégrer des publicités sur votre page Web : 46 1. Sélectionnez la page Web (ou la maquette) sur laquelle vous souhaitez placer votre publicité. 2. Cliquez sur le bouton Intégrer une publicité Google Adsense dans la palette E-Commerce de la barre d'outils Objets Web. 3. Pour coller le morceau de code préalablement copié pour l'unité, cliquez sur Coller. Le morceau apparaît dans votre boîte de dialogue et ne peut être modifié. Développer des sites et des pages 4. Cliquez sur OK. 5. Le pointeur de la souris se transforme en curseur d'insertion. Placez le pointeur à l'endroit où vous voulez insérer la publicité, puis cliquez pour insérer la publicité à sa taille d'origine. La publicité ne peut être redimensionnée. WebPlus vous permet de remplacer votre publicité par une publicité de format, de couleur, de police ou de style d'angle différents. 3.15.1.4 Pour modifier votre publicité : 1. Modifiez le format et la couleur de votre unité à l'aide de l'option Adsense Setup du site Google Adsense, puis copiez le morceau de code. 2. Double-cliquez sur la publicité. 3. Pour coller le morceau de code dans le champ de texte, cliquez sur Coller. 4. Cliquez sur OK. 47 4 Utiliser du texte 4.1 Importer du texte à partir d'un fichier Importer du texte depuis un fichier créé avec un traitement de texte est une méthode rapide pour récupérer du contenu texte pour votre site (mais vous pouvez aussi créer un article en utilisant WritePlus). Si vous utilisez votre traitement de texte habituel (tel que Microsoft Word) pour créer les fichiers texte de votre site, vous pouvez importer un nombre quelconque de fichiers sur votre site. Outre le format WritePlus (.stt), divers formats de traitement de texte peuvent être importés, notamment : ANSI .txt Microsoft Word 2007 .docx/.dotx Microsoft Word 2000/2003 .doc/.dot MS Works .wps Open Office .odt Format RTF .rtf Wordperfect .wpd Ecrire .wri Pour les formats Microsoft Word créés dans tout système d'exploitation Windows, inutile d'installer Microsoft Word localement. Cela signifie que vous pouvez réutiliser un contenu texte tiers dans WebPlus sans disposer de l'application associée. WebPlus importe le texte dans une nouvelle zone de texte créative (en prenant en charge le flux du texte entre les zones) ou dans un cadre HTML ou une zone de texte créative sélectionnée (les cadres HTML ne prennent pas en charge le flux du texte) qui se trouve déjà sur la page Web. Pour plus d'informations, reportez-vous à Zones de texte. WebPlus conserve la mise en forme des textes importés à partir d'un traitement de texte. Cependant, si vous utilisez votre traitement de texte pour créer du texte exclusivement destiné à WebPlus, vous gagnerez du temps en ne saisissant que le texte et en appliquant la mise en forme a posteriori dans WebPlus. Les tableaux ne peuvent pas être importés. 4.1.1.1 Pour importer du texte à partir d'un fichier : 1. (Facultatif) Si vous utilisez une zone de texte vide existante, commencez par sélectionner la zone. Si vous insérez du texte dans une zone de texte renseignée, cliquez pour définir un point d'insertion (ou sélectionnez une partie de texte à remplacer). 2. Choisissez Fichier texte dans le menu Insertion. 3. Dans la boîte de dilogue Ouvrir, choisissez le format du fichier source à importer et sélectionnez le fichier. 4. Cochez la case Conserver le format pour conserver les styles de mise en forme du fichier source. Désélectionnez la case pour rejeter ces informations. Dans les deux cas, WebPlus conserve les propriétés de base des caractères (italique, gras et souligné) et des paragraphes (alignement à gauche, centré, à droite, justifié). 48 Utiliser du texte 5. Cochez la case Ignorer les retours si le fichier a été enregistré avec un retour chariot à la fin de chaque ligne et si vous souhaitez supprimer tous ces retours. Si ce n'est pas le cas, ne cochez pas la case. 6. Cliquez sur Ouvrir. 7. Le texte sera importé dans l'objet de texte présélectionné ou dans une nouvelle zone de texte. Si tout le texte importé ne tient pas dans la zone de texte active, une boîte de dialogue vous avertira. Vous pouvez créer des zones de texte supplémentaires pour le texte qui déborde (cliquez sur Oui) ou placer le texte dans une zone de dépassement masquée (cliquez sur Non). 4.2 Utiliser les zones de texte Le texte dans WebPlus vient généralement se placer dans des zones de texte pouvant contenir des mots simples, des paragraphes autonomes, des articles de plusieurs pages ou du texte de chapitre. Vous pouvez également utiliser du texte artistique pour le texte autonome comportant des effets spéciaux ou du texte de tableau (voir Créer des tableaux avec du texte ) pour l'affichage sous forme de lignes et de colonnes. 4.2.1 Qu'est-ce qu'une zone de texte ? Une zone de texte est en réalité une mini-page comportant : • des guides de marges et de colonnes permettant de contrôler le déplacement du texte • éventuellement, des zones de texte de texte précédents et suivants • du texte et, éventuellement, des images ancrées qui se déplacent entre les zones de texte (de la zone précédente à la suivante). Le texte d'une zone de texte est appelé article. • lorsque vous déplacez une zone de texte, le texte de son article se déplace avec elle ; • lorsque vous redimensionnez une zone de texte, le texte de l'article s'adapte aux nouvelles dimensions. Les zones peuvent être associées les unes aux autres de telle sorte qu'un article se poursuive d'une zone sur l'autre. Mais elles peuvent également être autonomes. Dans un site Web, vous pouvez donc créer du texte dans une seule zone, répartir un article dans plusieurs zones et/ou inclure plusieurs successions de zones indépendantes. Lorsque vous sélectionnez une zone de texte, sa zone de délimitation (voir Zone 1 ci-dessus) est indiquée par une bordure grise, ainsi que par des poignées d'angle et de côté. Par ailleurs, si vous cliquez, un pointeur apparaît dans le texte de la zone de texte. Dans ce mode, vous pouvez éditer le texte à l'aide de l'outil Pointeur. Pour plus d'informations, voir la rubrique Éditer du texte sur la page.) 4.2.2 HTML et zones créatives Deux types de zones peuvent être appliquées à la page WebPlus : la zone de texte HTML et la zone de texte créative. Le tableau ci-dessous permet de les comparer facilement. Zones HTML Zones créatives Analysable par les moteurs de recherche (Google etc.) Insertion de scripts pour générer du contenu dynamique 49 WebPlus X4 Manuel d’utilisation Repères des marges et des colonnes Sauts (colonne, page et zone de texte) Redimensionner/déplacer la zone de texte Recadrer la zone de texte Faire pivoter la zone de texte 1 Lier la zone de texte Colonnes Joindre des objets Exporter en tant que texte 2 Copier-coller un texte exporté Couleur de contour et de remplissage unie Remplissage dégradé et bitmap Styles compatibles HTML Transparence 1 Bordures 1 Distorsion 1 Effets de filtre 2D/3D 1 3D instantanée 1 1 Si cette fonction est appliquée, la zone est exportée sous forme de graphique. En cas de rotation, recadrage ou application d'une transparence uniquement, aucune bordure ni effet de filtre ne sont appliqués. 2 Le tableau ci-dessus se rapporte à la zone de texte en tant qu'objet et non au texte qu'elle contient. Pour plus d'informations sur le texte, reportez-vous à Définir les propriétés du texte. Quelle est la différence entre une zone HTML et une zone créative ? Les zones HTML ont toujours des poignées d'angle et de côté bleu foncé lorsqu'elles sont sélectionnées tandis que les poignées d'une zone créative sont grises. 4.2.3 Création de zones de texte Vous pouvez ajouter des zones de texte dans une page comme vous le feriez pour tout autre objet. Quelle que soit la forme choisie, vous pouvez sélectionner, déplacer et redimensionner la zone mais vous ne pouvez pas modifier sa forme de base. 4.2.3.1 50 Pour créer une zone de texte : 1. Cliquez sur l'outil Zone HTML ou l'outil barre d'outils Objets standard. Zone créative dans la palette Zones de texte de la 2. Cliquez sur la page ou sur la table de montage pour créer une zone de texte à une taille par défaut. - ou Tracez une zone de texte de la dimension souhaitée. Utiliser du texte 4.2.3.2 • Pour supprimer une zone de texte : Sélectionnez la zone de texte et appuyez sur la touche Suppr. (Si un point de sélection se trouve dans le texte, la touche Suppr supprimera les caractères placés après le curseur.) Vous pouvez sélectionner, déplacer et redimensionner les zones de texte comme n'importe quel autre objet. 4.2.4 Placer du texte dans une zone de texte Différentes méthodes permettent de placer du texte dans une zone HTML ou créative. Pour les zones HTML, le texte est converti en code compatible HTML. Éditeur WritePlus : Une fois la zone de texte sélectionnée, cliquez sur d'outils contextuelle. WritePlus dans la barre Importation de texte : Cliquez avec le bouton droit de la souris sur la zone de texte et sélectionnez Fichier texte... (raccourci Ctrl+T) pour importer du texte. Saisie dans la zone de texte : Sélectionnez l'outil Pointeur , puis cliquez au point d'insertion afin de saisir le texte directement dans la zone de texte ou modifier un texte existant. (Voir Éditer le texte sur la page.) Collage via le Pressepapiers : À partir d'un point d'insertion dans votre texte, appuyez sur Ctrl+V. Glisser-déplacer : Sélectionnez un texte (dans un fichier de traitement de texte, par exemple), puis faites-le glisser sur la page WebPlus. Si vous le déposez sur une zone sélectionnée, le texte est collé au point d'insertion. Sinon, une nouvelle zone de texte est créée spécialement. 4.2.5 Configuration et mise en forme des zones créatives La mise en page d'une zone créative détermine la manière dont le texte s'étale dans la zone. La zone peut contenir plusieurs colonnes. Lorsqu'une zone est sélectionnée, ses marges de colonnes apparaissent sous forme de repères en pointillés (si des valeurs sont définies pour les délimitations et les marges des colonnes). Notez que contrairement aux guides de marges et de lignes/colonnes, destinés à faciliter le positionnement des éléments sur la page, les guides de colonnes des zones de texte déterminent la disposition du texte à l'intérieur de chaque zone. Le texte ne déborde pas des marges de colonnes. Vous pouvez faire glisser les guides de colonnes ou utiliser une boîte de dialogue pour régler les délimitations de colonne en haut et en bas, ainsi que les marges de colonnes à gauche et à droite. (A) Repères des colonnes ; (B) Délimitations des marges 4.2.5.1 • Pour modifier directement les propriétés de la zone de texte : Sélectionnez la zone de texte, puis faites glisser les guides des colonnes pour régler les limites de la colonne. 51 WebPlus X4 Manuel d’utilisation (1) (2) (3) L'illustration ci-dessus montre la transformation du pointeur lorsque vous survolez le cadre de délimitation avec la souris tout en appuyant sur Ctrl (1), après avoir fait glisser la marge de colonne vers l'intérieur pour modifier la largeur de cette dernière (2) et après avoir fait glisser vers le bas la marge supérieure pour la déplacer (3). 4.2.5.2 Pour modifier les propriétés de la zone de texte à l'aide d'une boîte de dialogue : Attributs de la zone de texte dans la 1. Sélectionnez la zone créative et cliquez sur le bouton barre d'outils contextuelle. 2. Dans la boîte de dialogue, vous pouvez modifier le Nombre de colonnes, l'Espacement (distance entre les colonnes), la Marge à gauche, la Marge à droite et activer/désactiver l'habillage du texte autour d'un objet. 3. Pour modifier les largeurs des colonnes et les marges hautes et basses des zones, cliquez sur une cellule du tableau et saisissez une nouvelle valeur. 4.2.6 Gestion des dépassements du texte (zones HTML) Les zones HTML devant se conformer au règles du code HTML, elles ne peuvent associer des articles (contrairement aux zones créatives). C'est pourquoi une décision est nécessaire sur la gestion des dépassements de texte. Les zones HTML dont le texte dépasse sont clairement indiquées lorsqu'elles sont sélectionnées. Un bouton Lien qui s'affiche en bas à droite de la zone signale le Dépassement. Si vous le voyez, vous pouvez laisser le texte masqué, autoriser le Dépassement ou permettre l'affichage de tout le texte grâce à une barre de défilement. 4.2.6.1 Pour contrôler le dépassement du texte : 1. Sélectionnez la zone de texte HTML présentant un dépassement. 2. Cliquez avec le bouton droit de la souris sur la zone, ouvrez le menu Mise en forme du texte/Dépassement du texte et sélectionnez : • Masqué - La zone sera affichée dans le navigateur telle qu'elle apparaît sur votre page. Le texte restera masqué. • Dépassement - La zone sera agrandie pour afficher tout le texte qu'elle contient. • Barre de défilement automatique - Une barre de navigation s'affiche uniquement si le texte dépasse de la zone. • Barre de défilement fixe - Une barre de défilement s'affiche en permanence, mais apparaît en grisé si le texte ne dépasse pas. N’hésitez pas à afficher un aperçu des cadres HTML (via un aperçu dans une fenêtre ou dans le navigateur), surtout lorsque le Dépassement est activé. 4.3 Utiliser le texte artistique Le texte artistique est un texte autonome que vous saisissez directement sur une page. Particulièrement utile pour les en-têtes, les slogans et tous les textes particuliers, il est facile à mettre en forme avec les outils de texte standard. 52 Utiliser du texte 4.3.1.1 4. Pour créer un texte artistique : Texte artistique dans la palette Texte de la barre d'outils Objets 1. Sélectionnez l'outil standard. 2. Définissez les propriétés d'origine du texte nécessaires avant la saisie (police, style etc.) via la barre d'outils contextuelle Texte, le menu Texte ou le menu contextuel (sélectionnez la commande Mise en forme du texte). 3. Cliquez à n'importe quel endroit de la page pour définir le point d'insertion à une taille par défaut ou faites glisser pour obtenir une taille donnée, tel qu'illustré ci-dessous. Saisissez directement le texte sur la page pour créer du texte artistique. Une fois l'objet texte artistique créé, vous pouvez le sélectionner, le déplacer, le redimensionner, le supprimer et le copier comme vous le feriez avec une zone de texte. Des remplissages de couleur unie, dégradés/bitmap, ainsi que de la transparence peuvent lui être appliqués. 4.3.1.2 Pour redimensionner un texte artistique : • Faites glisser les poignées de l'objet pour le redimensionner tout en conservant ses proportions. • Pour le redimensionner librement, maintenez la touche Maj enfoncée en faisant glisser le pointeur. 4.3.1.3 • Pour modifier du texte artistique : Faites glisser le pointeur pour sélectionner du texte, surligné en bleu. Vous pouvez également double-cliquer pour sélectionner un mot. Vous pouvez maintenant saisir un nouveau texte, appliquer une mise en forme aux caractères et au paragraphe, modifier le texte dans WritePlus, appliquer des options de correction orthographique, etc. 53 WebPlus X4 Manuel d’utilisation 4.4 Aligner du texte sur tracé Le texte artistique "ordinaire" en ligne droite est en fait tout sauf ordinaire, mais vous pouvez étendre ses possibilités créatives encore davantage en le faisant suivre un tracé courbe. Le résultat a toutes les propriétés du texte artistique, et le tracé qu'il suit est une courbe de Bézier que vous pouvez modifier avec l'outil Pointeur aussi facilement que toute autre courbe. Mais il peut également être modifié par des méthodes qui lui sont spécifiques, comme indiqué ci-dessous. 4.4.1.1 Pour appliquer un tracé curviligne prédéfini à un texte : 1. Créez un objet texte artistique. 2. Ce texte étant sélectionné, cliquez sur la palette choisissez un tracé prédéfini. Tracé de la barre d'outils contextuelle et Le texte épouse le tracé spécifié, par exemple "Tracé - Cercle supérieur". 4.4.1.2 4. 1. Créez une ligne à main levée, droite ou courbe (voir Tracer et modifier des lignes), ou une forme (voir Tracer et modifier des formes). 2. Sélectionnez l'outil 3. Placez le pointeur tout près du contour. Lorsqu'il se transforme en courbe, cliquez où vous souhaitez faire commencer le texte. Texte artistique dans la palette Texte de la barre d'outils verticale. Commencez votre saisie au point d'insertion. Le texte épouse le contour, qui a été converti en tracé. 4.4.1.3 54 Pour placer du texte artistique le long d'un contour ou d'une forme existante : Pour adapter du texte artistique existant le long d'un contour ou d'une forme existante : 1. Créez un objet texte artistique. 2. Créez une forme ou une ligne à main levée droite ou courbe. Utiliser du texte 3. 4.4.1.4 1. Sélectionnez les deux objets. Dans le menu Outils, sélectionnez Ajuster le texte à la courbe. Le texte épouse le tracé spécifié. Pour créer simultanément le texte et son tracé : Sélectionnez l'un des outils Texte sur courbe dans la palette Texte : L'outil Texte à main levée permet de dessiner librement une ligne courbe L'outil Texte sur droite sert à tracer une ligne droite L'outil Texte sur courbe permet de joindre une série de segments (courbes ou droits) par des clics reliant des points. 2. Tracez une ligne sur la page. Votre ligne apparaît sous la forme d'un tracé avec un point d'insertion à son début (pour un tracé courbe, vous pouvez saisir directement le texte à un endroit quelconque du tracé ou appuyer sur Échap ou double-cliquer pour que le point d'insertion se place au début du tracé). 3. Commencez votre saisie au point d'insertion. Le texte épouse le tracé. Pour ajuster la ligne de base et la position de départ du texte, déplacez les poignées situées au début du tracé du texte. 4.4.1.5 Pour supprimer le tracé du texte : 1. Sélectionnez l'objet texte sur tracé. 2. Cliquez sur le bouton Tracé - Aucun de la palette Tracé dans la barre d'outils contextuelle. Le texte reste sous la forme de texte artistique en ligne droite, et le tracé est supprimé définitivement. 4.5 Éditer le texte sur la page Vous pouvez utiliser l'outil Pointeur pour modifier directement le texte de zones de texte, celui des tableaux ou le texte artistique. Sur la page, vous pouvez sélectionner et saisir du texte, définir des retraits de paragraphe et des taquets de tabulation, modifier les propriétés du texte, appliquer des styles de texte et utiliser les fonctions Rechercher et remplacer . Pour l'édition de longs articles et pour des fonctions plus avancées, utilisez WritePlus (Modifier l'article… dans le menu Édition). 4.5.1 Sélectionner et saisir du texte La sélection de texte dans des zones de texte, le texte artistique et le texte des tableaux s'effectue de la même manière que dans un traitement de texte. La zone de sélection est marquée par un bleu semi-transparent pour faciliter l'édition. 55 WebPlus X4 Manuel d’utilisation Cliquez deux, trois ou quatre fois pour sélectionner un mot, un paragraphe ou tout le texte, respectivement. Vous pouvez aussi appuyer sur la touche Ctrl pendant que vous cliquez ou faites glisser la sélection de mots nonadjacents ou sur la touche Maj pour les suites de mots. 4.5.1.1 1. Sélectionnez l'outil Pointeur et cliquez (ou faites glisser le curseur pour tracer un rectangle de sélection) sur l'objet texte. Un point d'insertion standard apparaît à l'emplacement où vous avez cliqué (voir cidessous) OU Sélectionnez un mot, un paragraphe ou une portion de texte. 2. Saisissez le nouveau texte à insérer ou remplacez le texte sélectionné, respectivement. 4.5.1.2 • Pour créer un paragraphe : Appuyez sur Entrée. 4.5.1.3 • Pour modifier du texte sur la page : Pour créer une nouvelle ligne dans le même paragraphe (à l'aide d'un saut de ligne ou d'un retour forcé) : Appuyez sur Maj+Entrée. Les deux options suivantes ne s'appliquent qu'aux textes contenus dans des zones de texte. Vous pouvez utiliser ces raccourcis ou sélectionner les éléments dans le sous-menu accessible via la commande Insertion/Saut. 4.5.1.4 • Appuyez respectivement sur Ctrl+Entrée ou Alt+Entrée. 4.5.1.5 • Pour passer du mode Insertion au mode Écrasement : Appuyez sur la touche Inser. 4.5.1.6 • Pour faire passer du texte dans la colonne suivante (saut de colonne) ou dans la zone suivante (saut de zone de texte) : Pour répéter une opération liée au texte : Exécutez la commande Édition/Répéter ou appuyez sur Ctrl+Y. Par exemple, si vous avez appliqué une nouvelle mise en forme à un paragraphe, vous pouvez cliquer dans un autre paragraphe et utiliser la commande Répéter pour lui appliquer la même mise en forme. 4.5.1.7 • 56 Pour afficher les caractères spéciaux : Dans le menu Affichage, sélectionnez Caractères spéciaux (marques et sauts de paragraphes ; voir cidessous) ou Espaces (Afficher les caractères spéciaux, plus les tabulations, les espaces insécables, les points de césure, et les espaces normaux "remplis"). Utiliser du texte 4.5.2 Copier, coller et déplacer un texte Vous pouvez facilement copier et coller du texte à l'aide des commandes standard ; le glisser-déplacer de texte est également pris en charge. Si vous ne placez pas de point d'insertion, le texte peut être collé directement dans une nouvelle zone de texte. 4.5.3 Définir des retraits de paragraphe Lorsqu'un objet texte est sélectionné, des repères sur la règle horizontale indiquent le retrait à gauche, le retrait de première ligne et le retrait à droite du paragraphe actif. Vous pouvez régler les marqueurs ou utiliser une boîte de dialogue pour définir des retraits de paragraphe. (A) Retrait à gauche ; (B) Retrait de première ligne ; (C) Retrait à droite. • Le retrait à gauche est défini par rapport à la marge de gauche de l'objet. • Le retrait de première ligne est défini par rapport au retrait à gauche. • Le retrait à droite est défini par rapport à la marge de droite de l'objet. Pour plus de détails sur la configuration des marges de zones de texte, voir Configurer et mettre en forme la zone de texte. 4.5.3.1 • Pour définir les retraits du paragraphe actif : Faites glisser le ou les repères de règles appropriés. OU Pour créer rapidement des retraits à gauche, sélectionnez le bouton Augmenter le niveau ou Diminuer le niveau pour augmenter ou réduire le retrait. Ce retrait correspond à la distance du taquet de tabulation par défaut. OU Pour régler les retraits à partir d'une boîte de dialogue, sélectionnez Paragraphe... dans le menu Texte. Dans la zone Retrait, vous pouvez saisir des valeurs pour les retraits de Gauche, Droite, 1ère ligne et Positif. 4.5.4 Utiliser du texte Unicode WebPlus prend entièrement en charge Unicode, ce qui permet d'incorporer des caractères étrangers ou des symboles spéciaux. • Pour coller du texte Unicode du Presse-papiers sur la page, cliquez sur Edition/Collage spécial puis sélectionnez Texte unicode sans mise en forme. • Insérez directement des caractères Unicode dans le texte en saisissant leur valeur hexadécimale, puis en appuyant sur Alt+X. Le raccourci clavier Alt-X sert de bascule entre le caractère affiché (@, par exemple) et sa valeur hexadécimale (U+0040 en l'occurrence). • Pour exporter du texte au format Unicode, utilisez WritePlus. 57 WebPlus X4 Manuel d’utilisation 4.6 Utiliser la fonction Rechercher et remplacer Vous pouvez rechercher une extraordinaire variété d'éléments dans le texte d'un site : non seulement des mots ou des éléments de mots, mais de nombreux attributs de caractères et de paragraphes tels que les polices, les styles, les alignements, les puces et la numérotation, les polices manquantes, les lettrines, etc., même les graphiques incorporés et bien davantage encore ! Avec la boîte de dialogue Rechercher et remplacer, qui peut rester ouverte sans interrompre votre travail jusqu'à ce que vous cliquiez sur le bouton Fermer, vous pouvez effectuer un remplacement global ou occurrence par occurrence. 4.6.1.1 Pour utiliser la fonction Rechercher et remplacer : 1. Exécutez la commande Édition/Rechercher et remplacer. 2. Dans la boîte de dialogue, saisissez le texte à rechercher dans la zone Rechercher et le texte à lui substituer, le cas échéant, dans la zone Remplacer. Cliquez sur les flèches vers le bas pour voir les éléments récents. Cliquez sur le bouton de l'une des deux zones pour accéder aux menus déroulants permettant de sélectionner des formats ou des caractères spéciaux ou encore de définir une expression régulière (similaire à une recherche avec des caractères génériques). 3. Sélectionnez la plage de texte sur laquelle la recherche doit porter. Sélectionnez la plage de texte sur laquelle la recherche doit porter. Article courant (uniquement l'objet texte ou l'article sélectionné), Tous les articles (tout le texte) ou Sélection (uniquement avec la fonction Remplacer tout pour qu'elle s'applique uniquement à la portion sélectionnée du texte). 4. Sélectionnez Mot entier pour rechercher les séquences de caractères comportant un espace blanc (espace, tabulation, etc.) ou un signe de ponctuation à chaque extrémité, ou situées au début ou à la fin d'un paragraphe. Sélectionnez Respecter la casse pour que la recherche distingue les majuscules des minuscules. Sélectionnez Expression régulière pour traiter le contenu de la zone Rechercher comme une expression et non comme une chaîne littérale. 5. Cliquez sur Suivant pour localiser la première occurrence du texte recherché. OU Cliquez sur Sélectionner tout pour mettre en surbrillance simultanément toutes les occurrences du texte recherché sur votre site. 6. Cliquez sur Remplacer si vous souhaitez substituer le texte de remplacement. Vous pouvez également cliquer de nouveau sur Suivant pour passer à l'occurrence suivante. Continuez à utiliser l'option Remplacer de façon appropriée jusqu'à ce que vous atteigniez la fin du site. OU Cliquez sur Remplacer tout pour remplacer simultanément toutes les occurrences du texte recherché par le texte de substitution. WebPlus vous avertit lorsque la recherche est terminée. 7. Cliquez sur Fermer pour fermer la boîte de dialogue Rechercher et remplacer. 58 5 Mettre en forme des caractères et des paragraphes 5.1 Définir les propriétés du texte WebPlus vous permet d'exercer un contrôle important sur les moindres détails de la présentation typographique, que ce soit dans les zones de texte, les tableaux ou le texte artistique. 5.1.1.1 Pour appliquer une mise en forme de base au texte : 1. Sélectionnez le texte. 2. Utilisez les boutons de la barre d'outils contextuelle Texte pour modifier la police, la taille des caractères, le style de police ou l'alignement des paragraphes. Par défaut, la taille du texte de vos pages Web publiées est définie de manière à varier selon le paramétrage du navigateur qui l'affiche. Si vous le souhaitez, vous pouvez ignorer ce réglage dans le cadre d'une option globale de WebPlus, pour que le texte apparaisse dans le navigateur dans la même taille en points que celle utilisée dans WebPlus. Pour vérifier ou modifier ce paramètre, sélectionnez le menu Fichier/Propriétés du site. Dans l'onglet HTML, cochez Taille de texte absolue pour ignorer le paramètre par défaut de taille variable. 5.1.1.2 Pour effacer la mise en forme locale (restaurer les propriétés du texte brut/par défaut) : • Sélectionnez une plage de texte à l'aide du pointeur. • Cliquez sur l'option Effacer la mise en forme dans la liste déroulante des styles de texte de la barre d'outils contextuelle Texte (ou dans l'onglet Styles de texte). 5.2 Utiliser les polices L'un des moyens les plus spectaculaires pour modifier l'apparence de votre site consiste à modifier les polices du texte artistique, des zones de texte ou du texte dans les tableaux. L'application de polices différentes à un caractère ou à un paragraphe entier peut communiquer des messages différents à votre public cible. Il est très facile d'appliquer une police dans WebPlus. Vous pouvez utiliser l'onglet Polices, la barre d'outils contextuelle ou la boîte de dialogue Caractère (accessible par un clic droit ou à partir du menu Texte). 59 WebPlus X4 Manuel d’utilisation L'onglet Polices est automatiquement masqué par défaut, mais peut être affiché par un clic à gauche de l'espace de travail. Vous devrez peut-être également cliquer sur le libellé Polices pour afficher l'onglet Polices. Les polices optimisées pour le Web sont un sous-ensemble de polices spéciales et configurables qui offrent les meilleures correspondances de polices entre votre site Web (au cours de sa réalisation) et l'ordinateur de vos visiteurs Web (au cours de la navigation). Au moment de la publication, les polices optimisées pour le Web sont uniquement référencées (et non pixellisées) car elles sont supposées être disponibles sur l'ordinateur du visiteur Web. En général, il est conseillé de s'en tenir à la liste standard des polices "sûres" affichées dans l'onglet Polices à moins que vous ne soyez certain de la présence des polices sur les ordinateurs du public que vous ciblez. Elles sont toujours réunies dans la catégorie Optimisée pour le Web de l'onglet (une catégorie équivalente existe dans le menu déroulant Polices de la barre d'outils contextuelle Texte). 5.3 Utiliser les styles de texte Dans WebPlus, vous pouvez utiliser des styles de texte nommés (prédéfinis ou définis par l'utilisateur) qui peuvent être appliqués aux zones de texte, au texte des tableaux ou au texte artistique. Un style de texte est un ensemble d'attributs de caractère et/ou de paragraphe enregistré en groupe. Lorsque vous appliquez un style au texte, vous appliquez simultanément tout ce groupe d'attributs. Vous pouvez par exemple utiliser des styles nommés de paragraphes à des éléments particuliers de la mise en page tels que En-tête, Citations ou Corps de texte et des styles de caractères aux noms évocateurs comme Mise en valeur, Code ou Référence. Les styles peuvent être appliqués aux caractères ou aux paragraphes à partir de la barre d'outils contextuelle ou de l'onglet Styles de texte. Les styles de paragraphes et de caractères peuvent être gérés à partir de la palette Styles de texte. L'onglet Styles de texte vous permet aussi de créer de nouveaux styles de toutes pièces, de créer des styles définis à partir de propriétés de texte existantes et de remplacer un style par un autre sur la totalité du site en un seule opération. Tous les styles peuvent être vérifiés en les appliquant directement à un paragraphe sélectionné sur la page. Pour plus d'informations sur ces fonctions, reportez-vous à l'aide en ligne. 5.3.1 Styles de paragraphe et styles de caractère Un style de paragraphe consiste en une spécification complète de l'apparence d'un paragraphe, notamment de toutes les polices et des attributs de format du paragraphe. Chaque paragraphe dans WebPlus se voit attribuer un style de paragraphe. Un style de caractères ne comporte que des attributs de police (nom, force de corps, gras, italique, etc.) et s'applique au niveau du caractère, en fait à une plage de caractères, plutôt qu'au paragraphe entier. 5.3.2 Utiliser des styles nommés Le style nommé du texte sélectionné s'affiche dans l'onglet Styles de texte ou dans la liste déroulante Styles de la barre d'outils contextuelle. Le style affiché peut être un style de caractères (si ce style est appliqué localement), sinon c'est un style de paragraphe. 5.3.2.1 Pour appliquer un style : 1. À l'aide de l'outil Pointeur, cliquez dans un paragraphe (si vous appliquez un style de paragraphe) ou sélectionnez une plage de texte (si vous appliquez un style de caractère). 2. Affichez l'onglet Styles de texte et sélectionnez un style dans la liste de styles. OU Dans la barre d'outils contextuelle, cliquez sur la flèche pour dérouler la liste Styles et sélectionnez le nom du style. L'onglet Style de texte met en surbrillance le style de paragraphe ou de caractère appliqué à un texte sélectionné. Étant donné que vous pouvez appliquer une mise en forme des paragraphes et des caractères à un même texte, la mise en forme de tout le texte actif s'affiche dans le champ Format actif de l'onglet. 5.3.2.2 1. 60 Pour modifier un style existant : Depuis l'onglet Styles de texte : Mettre en forme des caractères et des paragraphes • Cliquez avec le bouton droit de la souris sur le style de caractère ou de paragraphe à modifier et sélectionnez Modifier <style>.... OU • Après avoir sélectionné un style, cliquez sur le bouton texte, puis cliquez sur le bouton Modifier. Gestion des styles sous l'onglet Styles de 2. Dans la boîte de dialogue Style de texte, définissez (ou modifiez) le nom du style, son style de base et tous les attributs de caractère ou de paragraphe, onglets, puces et lettrines à inclure dans la définition du style. 3. Cliquez sur OK pour appliquer les propriétés du style ou sur Annuler pour abandonner les modifications. 4. Cliquez sur Appliquer pour mettre à jour le texte ou sur Fermer pour conserver le style dans le projet en vue d'une utilisation ultérieure. Vous pouvez aussi choisir Palette de style de texte dans le menu Texte pour modifier les styles et les valeurs par défaut du texte. 5.3.2.3 Pour supprimer une ou plusieurs styles de texte : • Effectuez un clic droit sur un style de texte et sélectionnez Modifier <style>.... • Dans la boîte de dialogue, cliquez sur Supprimer. Pour la suppression de plusieurs styles, cochez plusieurs noms de styles. Pour supprimer tous les styles ou les styles non utilisés, cliquez sur les boutons appropriés. La suppression de styles est une opération délicate. Les styles basés sur un style "parent" coché seront sélectionnés en vue d'une suppression. 5.4 Créer une liste à puces ou numérotée Pour toutes les zones de texte, il est possible d'appliquer des puces et des numéros aux listes et aux paragraphes. Les puces conviennent plus particulièrement à l'énumération d'éléments n'obéissant pas à un ordre particulier de préférence et les listes numérotées sont utilisées pour la présentation de procédures par étapes (désignées par un numéro ou une lettre). WebPlus vous permet d'appliquer de la même manière le style de liste au texte normal (en tant que mise en forme locale) ou aux styles de texte. Des icônes de puces simples, des numéros (arabes ou romaines) et des lettres peuvent être appliqués aux zones de texte HTML. Mais si vous utilisez des zones de texte créatives, vous pouvez employer des listes à puces ou numérotée basique ou complexe en sélectionnant l'un des modèles prédéfinis (voir ci-dessous) ou en créant votre propre style de liste personnalisé (vous pouvez alors créer vos propres symboles, numéros et formats de lettre). Vous pouvez ensuite remplacer un style prédéfini existant par votre propre style prédéfini basé sur votre style de liste personnalisé. Liste à puces 5.4.1.1 Liste numérotée Pour créer une liste à puces ou numérotée simple : 1. Sélectionnez un ou plusieurs paragraphes. OU Cliquez dans le texte d'un paragraphe. 2. Sélectionnez Liste à puces ou Liste numérotée dans la barre d'outils contextuelle. Le style de liste utilisé est le premier modèle affiché dans la boîte de dialogue Puces et numéros décrite ci-dessous. 61 WebPlus X4 Manuel d’utilisation 5.4.1.2 4. Pour créer une liste à puces ou numérotée (à partir de modèles) : 1. Sélectionnez un ou plusieurs paragraphes. OU Cliquez dans le texte d'un paragraphe. 2. Sélectionnez Puces et numéros... dans le menu Texte. 3. Depuis la boîte de dialogue Style de texte, vous pouvez : • Pour le texte dans les zones de texte HTML, cliquez sur une icône prédéfinie dans la boîte de dialogue (voir ci-dessus). OU • Pour de texte dans les zones de texte créatives, choisissez Puce ou Numéro dans le menu déroulant Style, puis sélectionnez l'un des formats prédéfinis proposés par défaut. OU • Pour une liste personnalisée, sélectionnez un modèle prédéfini, puis cliquez sur le bouton Détails pour modifier les options personnalisées. Cliquez sur OK pour appliquer la mise en forme à la liste. Chaque fois que vous insérez un saut de ligne, la nouvelle ligne commence par le symbole spécifié. L'insertion de deux sauts de ligne successifs (lorsque vous appuyez deux fois sur la touche Entrée) annule les puces ou la numérotation et reprend la mise en forme normale du texte. Désactivez la mise en forme des listes en cliquant une nouvelle fois sur les boutons ou de la barre d'outils contextuelle. WebPlus vous permet aussi d'associer des puces et des numéros aux styles. (Voir l'aide de WebPlus.) 62 6 Utiliser des tableaux 6.1 Créer des tableaux de texte Avec leurs fonctions incorporées de feuilles de calcul, les tableaux sont l'outil idéal pour la présentation de texte et de données sous forme de lignes et de colonnes facilement personnalisables et variées. Chaque cellule d'un tableau se comporte comme une mini-zone de texte. Comme dans une zone de texte, vous pouvez modifier les propriétés des caractères et des paragraphes, appliquer des styles de texte choisis, incorporer des images ancrées, appliquer des remplissages de couleur au texte (unie, dégradé ou bitmap) et utiliser des options de révision telles que la correction orthographique et des fonctions spéciales telles que la mise en forme des nombres et l'insertion de formules. 6.1.1 Tableaux HTML et tableaux créatifs Deux types de tableaux peuvent être appliqués à la page WebPlus : le tableau HTML et le tableau créatif. Le tableau suivant permet de les comparer. Certaines fonctions s'appliquent aux deux, ou seulement à l'un ou à l'autre. Tableaux HTML Tableaux créatifs Analysable par les moteurs de recherche (Google etc.) Insertion de scripts pour générer du contenu dynamique Redimensionner/déplacer le tableau Détourer le tableau Faire pivoter le tableau 1 Faire pivoter le texte du tableau (dans une cellule) 1 Trier la table des matières Couleur de contour et de remplissage unie Remplissage dégradé et bitmap Styles compatibles HTML Transparence 1 Bordures 1 Distorsion 1 Effets de filtre 2D/3D 1 3D instantanée 1 63 WebPlus X4 Manuel d’utilisation Suppression rapide/Saisie rapide/Format automatique Modifier le texte des cellules dans WritePlus Voir le texte des cellules dans le Gestionnaire de site Importer des fichiers Excel et des fichiers texte 1 Appliqué, exporte le tableau sous forme de graphique. WebPlus est fourni avec une sélection de formats de tableau prédéfinis, c'est-à-dire des modèles que vous pouvez sélectionner et dont vous pouvez remplir les cellules avec un contenu. Dans WebPlus, vous pouvez : • modifier le format prédéfini avant d'ajouter un nouveau tableau à la page, • créer vos propres formats sans créer de tableau (voir Créer des formats de tableau personnalisés dans l'aide en ligne), • adapter la taille de tableaux existants à un autre format (prédéfini ou personnalisé). 6.1.1.1 1. Pour créer un tableau : Dans la palette Tableau de la barre d'outils Objets standard, sélectionnez l'outil HTML ou Tableau Tableau créatif. 2. Cliquez sur la page ou la table de montage ou tracez un rectangle de sélection pour définir les dimensions du tableau. La boîte de dialogue Créer un tableau s'affiche avec une sélection de formats de tableau prédéfinis dans la fenêtre Format. 3. Parcourez la liste pour visualiser les formats et sélectionnez-en un. Pour commencer avec un tableau simple, sélectionnez (Par défaut). 4. (Facultatif) Cliquez sur Modifier pour personnaliser le format choisi. 5. Définissez la Taille du tableau. Il s'agit du nombre de lignes et de colonnes composant la mise en forme du tableau. 6. Cliquez sur OK. Le nouveau tableau s'affiche sur la page. Pour différencier les types de tableaux de la page, les tableaux HTML ont toujours des poignées d'angle et de côté bleu foncé lorsqu'ils sont sélectionnés tandis que les poignées d'un tableau créatif sont grises. Pour modifier la structure et le contenu des cellules de tableaux HTML ou créatifs, reportez-vous à la rubrique Manipuler les tableaux de l'aide en ligne. 6.2 Insérer un calendrier L'Assistant Calendrier vous aide à créer un calendrier mensuel à utiliser sur votre page Web. 64 Utiliser des tableaux Ce calendrier est un tableau de texte redimensionnable dont vous pouvez modifier le texte à l'aide des outils de texte standard. Les propriétés d'un calendrier sélectionné sont similaires à celles d'un tableau et peuvent être modifiées de la même manière (voir Manipuler les tableaux). À l'instar des formats de tableau personnalisés, vous pouvez créer des formats de calendrier personnalisés. 6.2.1.1 Pour insérer un calendrier : 1. Cliquez sur la palette Tableau de la barre d'outils Objets standard et sélectionnez un calendrier. Insérer 2. Cliquez une nouvelle fois sur votre page ou faites glisser le pointeur pour définir la taille souhaitée du calendrier. 3. Dans l'Assistant Calendrier qui s'affiche, définissez les options de votre calendrier, notamment l'année et le mois, le style de calendrier (carré ou à une ou plusieurs colonnes), le premier jour de la semaine, l'espace réservé aux annotations, les options d'affichage, l'activation d'événements/vacances et le format du calendrier. Pour que les jours fériés de votre pays s'affichent, cochez l'option Ajouter des jours fériés dans l'Assistant et sélectionnez un Pays dans le menu déroulant associé. Pour ajouter des événements personnels, cochez aussi l'option Ajouter des événements personnels. 4. 6.2.1.2 Cliquez sur Terminer pour fermer l'assistant. Pour afficher et modifier les propriétés d'un calendrier sélectionné : 1. Cliquez sur le bouton Modifier le calendrier dans la barre d'outils contextuelle. 2. Sélectionnez l'onglet approprié (Date, Style, Evénements etc.) et apportez votre modification, puis appuyez sur OK. Un clic avec le bouton droit de la souris lorsque l'option Calendrier est sélectionnée permet également de sélectionner, d'insérer, de répartir, de supprimer, et d'ajuster la largeur/hauteur des lignes (ou descolonnes), mais veillez à ne pas détruire le formatage du tableau ! 6.2.1.3 Pour mettre à jour globalement les informations du calendrier : 1. Sélectionnez la commande Outils/Définir le profil utilisateur. 2. Sous l'onglet Calendriers de la boîte de dialogue, sélectionnez dans le menu déroulant l'année représentée sur le calendrier. OU 3. Dans la section Événements, cochez Afficher les jours fériés et/ou Afficher les événements personnels si tous vos calendriers doivent adopter les vacances et les événements déjà configurés dans le Gestionnaire d'événements du calendrier (pour modifier des événements personnels, cliquez sur le bouton Événements). 6.2.2 Ajouter des vacances Lorsque vous créez un calendrier, vous pouvez définir les vacances du pays où vous habitez. Les jours fériés s'afficheront automatiquement sur le calendrier si l'option Ajouter des jours fériés est cochée dans Propriétés du calendrier. 6.2.2.1 Pour activer les jours fériés : 1. Sélectionnez le cadre de sélection de votre calendrier et, dans la barre d'outils contextuelle, cliquez sur Modifier le calendrier. 2. Sous l'onglet Événements, cochez Ajouter des jours fériés. 3. (Facultatif) Changez les jours fériés d'un calendrier existant à l'aide de la liste déroulante Pays. 4. Cliquez sur OK. 6.2.2.2 1. Pour afficher les jours fériés : Sélectionnez le cadre de sélection de votre calendrier. 65 WebPlus X4 Manuel d’utilisation 2. Cliquez sur Événements du calendrier dans la barre d'outils contextuelle. 3. Activez l'option Afficher les jours fériés. 6.2.3 Ajouter des événements personnels Vous pouvez compléter vos listes de jours fériés et vacances (vacances de Pâques, par exemple) en ajoutant des événements personnels tels que des anniversaires et des échéances de paiement (malheureusement !) pour que ces événements s'affichent sur votre calendrier. Utilisez le bouton Événements du calendrier dans la barre d'outils contextuelle d'un calendrier sélectionné. Les événements s'afficheront automatiquement sur votre calendrier à la date indiquée. 6.2.3.1 Pour ajouter un événement : 1. Sélectionnez un calendrier. 2. Cliquez sur Événements du calendrier dans la barre d'outils contextuelle. 3. (Facultatif) Cochez Afficher les événements par date pour ajouter, modifier et supprimer des événements en utilisant une mise en page de calendrier traditionnelle. Ne cochez pas l'option pour une énumération de dates ou d'événements rangée par rangée. Si vous utilisez la dernière méthode, activez le bouton Afficher les événements personnels. 4. Cliquez sur 5. Dans la boîte de dialogue, saisissez une date, sélectionnez-la avec les flèches vers le haut/bas ou à l'aide du bouton Parcourir. 6. Saisissez le texte de l'événement dans la zone de saisie de texte. Cliquez pour ajouter un point d'insertion, puis commencez la saisie. Le texte entré s'affichera dans votre calendrier sous la date choisie. 7. Si l'événement est un anniversaire ou un autre événement annuel, cochez Événement annuel. 8. Cliquez sur OK. 9. Lorsque vous avez fini d'ajouter des événements, cliquez sur Enregistrer. Nouvel événement. Utilisez les boutons Éditer l'événement ou supprimer un événement existant. Supprimer l'événement pour modifier ou N'oubliez pas de vous assurer que Ajouter des événements personnels est coché dans Propriétés du calendrier. 66 7 Editer les objets de la page 7.1 Sélectionner un objet Pour modifier un objet, vous devez commencer par le sélectionner à l'aide de l'un de ces outils de la barre d'outils verticale : Outil Pointeur Utilisez l'outil Pointeur afin de sélectionner, déplacer, copier, redimensionner ou faire pivoter des objets. Outil Rotation Cliquez pour utiliser l'outil Rotation pour faire pivoter un objet autour de son point de rotation (généralement centré). Voir Faire pivoter un objet. 7.1.1.1 • Pour sélectionner un objet : Cliquez sur l'objet à l'aide de l'un des outils représentés ci-dessus. L'exemple ci-dessous montre un objet non sélectionné et sélectionné (avec les boutons Déplacer et Grouper). • Si les objets se chevauchent, cliquez en maintenant la touche Alt enfoncée jusqu'à ce que l'objet voulu soit sélectionné. 7.1.1.2 En cas de sélection d'un objet texte à l'aide de l'outil Pointeur : • Cliquer sur un objet texte (texte artistique ou zone de texte) à l'aide de l'outil Pointeur permet de sélectionner l'objet et de placer le pointeur de sélection de texte clignotant à l'intérieur du texte de l'objet. Dans ce mode, il vous est possible d'éditer le texte. • Cliquez deux, trois ou quatre fois pour sélectionner un mot, un paragraphe ou tout le texte. • Pour sélectionner uniquement la zone de texte, cliquez sur son cadre de sélection. • Un simple clic sur un groupe sélectionne le groupe d'objets. Cliquez en maintenant la touche Ctrl enfoncée pour sélectionner un objet individuel dans un groupe. 7.2 Sélectionner plusieurs objets La sélection de plusieurs objets simultanément, c'est-à-dire la création d'une sélection multiple, vous permet de : • positionner ou redimensionner tous les objets simultanément ; • Créer un groupe d'objets à partir d'une sélection multiple pouvant alors être considérée comme un seul et même objet, avec possibilité de restaurer les différents objets ultérieurement. Voir Créer des groupes. 67 WebPlus X4 Manuel d’utilisation 7.2.1.1 • Pour créer une sélection multiple : Faites glisser un cadre de sélection autour des objets que vous souhaitez sélectionner. Vous pouvez aussi maintenir la touche Maj enfoncée et cliquer tour à tour sur chaque objet. 7.2.1.2 • Maintenez la touche Maj enfoncée et cliquez sur chaque objet à ajouter ou à supprimer. 7.2.1.3 • Pour sélectionner tous les objets de la page (ou de la maquette) : Sélectionnez Sélectionner tout dans le menu Édition, ou appuyez sur Ctrl+A. 7.2.1.5 • Pour désélectionner tous les objets d'une sélection multiple : Cliquez sur une zone vierge de la page. 7.2.1.4 • Pour ajouter ou supprimer un objet d'une sélection multiple : Pour sélectionner tous les objets d'un type sur la page (ou sur la maquette) : Maintenez la touche Ctrl enfoncée et double-cliquez sur un objet de ce type. OU Cliquez sur un objet pour le sélectionner et choisissez Sélection similaire dans le menu Édition. 7.3 Copier, coller et dupliquer des objets En plus de l'utilisation du presse-papiers de Windows pour copier et coller des objets, vous pouvez en dupliquer facilement par glisser-déplacer et reproduire plusieurs copies d'un objet dans des formations précises. Vous pouvez également transférer la mise en forme d'un objet à un autre, avec la possibilité de spécifier des attributs spécifiques lors de la reproduction de la mise en forme. 7.3.1.1 • Pour copier un objet (ou une sélection multiple) dans le Presse-papiers Windows : Cliquez sur le bouton Copier dans la barre d'outils standard. Si vous utilisez une autre application Windows, vous avez généralement la possibilité de copier et coller des objets à l'aide du Presse-papiers. 7.3.1.2 • Pour coller un objet à partir du Presse-papiers : Cliquez sur Coller dans la barre d'outils standard. La commande standard Coller insère l'objet au point d'insertion ou, dans le cas d'un objet séparé, au centre de la page. Pour insérer un objet séparé au même emplacement de la page que l'objet copié, utilisez la commande Coller à l'emplacement. 7.3.1.3 • Exécutez la commande Édition/Collage spécial. 7.3.1.4 1. 68 Pour sélectionner l'un des divers formats du Presse-papiers : Pour copier un objet : Sélectionnez l'objet et appuyez sur la touche Ctrl. Editer les objets de la page Déplacer, puis relâchez le bouton de la souris. 2. Déplacez l’objet à l'aide du bouton 3. Pour que la copie reste à la même position horizontale ou verticale, maintenez la touche Maj enfoncée en faisant glisser l'objet. La copie de l'objet apparaît au nouvel emplacement. 7.3.2 Dupliquer des objets La duplication d'un objet consiste à en faire une copie à la fois. La commande Dupliquer vous permet de créer plusieurs copies en une seule étape et vous permet de contrôler la disposition des copies en série linéaire ou en matrice. Vous pouvez inclure une ou plusieurs transformations pour générer un tableau attractif d'objets pivotés et/ou redimensionnés. Cette technique est idéale pour les arrières-plans répétitifs ou pour les montages d'images ou d'objets parfaitement alignés. 7.3.2.1 Pour dupliquer un objet : 1. Sélectionnez l'objet à dupliquer et exécutez la commande Édition/Dupliquer. La boîte de dialogue Dupliquer apparaît, avec à sa droite une zone d'aperçu. 2. Pour organiser les copies sur une ligne droite, sélectionnez Créer contour. Pour obtenir une disposition de quadrillage X-Y, sélectionnez Créer quadrillage. 3. Spécifiez une Ligne (le nombre d'objets, y compris l'original) dans la disposition ou la taille de la grille. Notez que vous pouvez utiliser le paramètre Ligne pour inclure un nombre impair d'objets dans une grille. 4. Définissez l'espacement entre les objets en tant que Décalage (mesuré entre les angles supérieurs gauches des objets successifs) ou en tant qu'Espace (entre les angles inférieurs droits et supérieurs gauches). Vous pouvez spécifier un intervalle Horizontal et/ou Vertical et/ou une Rotation d'angle. Pour définir un intervalle horizontal ou vertical particulier, cochez Absolu ; décochez cette case pour spécifier l'intervalle en pourcentage de la taille de l'objet d'origine. 5. Cliquez sur OK. Le résultat constitue une sélection multiple. Cliquez sur son bouton séparés restent associés pour d'autres manipulations. Associer si vous souhaitez que les objets 7.3.3 Reproduire la mise en forme d'un objet Après avoir copié un objet dans le Presse-papiers, vous pouvez utiliser la commande Coller le format (menu Édition) pour appliquer ses attributs de mise en forme à un autre objet sélectionné. Dans le menu Édition, Coller le format Plus affiche une boîte de dialogue de "commande centrale" permettant de sélectionner ou de désélectionner des attributs spécifiques à inclure dans la mise en forme à copier. Pour plus d'informations, reportezvous à Enregistrer des styles d'objet. 69 WebPlus X4 Manuel d’utilisation 7.4 Déplacer des objets 7.4.1.1 • Pour déplacer un objet (y compris une sélection multiple) : Faites glisser l'objet sélectionné à l'aide de son bouton Déplacer. Lorsque vous voyez un curseur de déplacement, vous pouvez commencer à faire glisser le pointeur de la souris. Pour définir des positions horizontales et verticales exactes, utilisez l'onglet Transformer. 7.4.1.2 • Pour limiter le déplacement d'un objet sur un axe horizontal ou vertical : Sélectionnez l'objet et utilisez les touches de direction du clavier (flèches haut, bas, gauche, droit). 7.5 Redimensionner des objets WebPlus fournit plusieurs méthodes pour redimensionner les lignes, les formes, le texte artistique, les zones de texte et les tableaux. La plus simple est le glisser-déplacer, mais la barre d'état vous fournira de nombreux conseils et raccourcis selon le contexte. 7.5.1.1 Pour redimensionner un objet (cas général) : 1. Sélectionnez l'objet. 2. Cliquez sur l'une des poignées de l'objet pour le déplacer jusqu'à son nouvel emplacement tout en maintenant le bouton gauche de la souris enfoncé. Lorsque vous cliquez et déplacez la souris à partir d'une poignée de côté, vous pouvez redimensionner l'un des côtés, en le déplaçant. Glisser à partir d'une poignée d'angle permet de redimensionner deux dimensions, en déplaçant deux bords. Vous pouvez également figer le redimensionnement ; notez que les images se comportent généralement différemment des lignes, des formes et des objets texte. 7.5.1.2 • Faites glisser la souris à partir d'une poignée d'angle (ou d'une extrémité de contour). 7.5.1.3 • Pour redimensionner librement : Pour limiter une forme, une zone de texte ou un tableau lors du redimensionnement : Maintenez la touche Maj enfoncée et cliquez et déplacez une poignée d'angle (ou une extrémité de contour). Pour les formes, cela permet de conserver la forme carrée d'un carré, la forme ronde d'un cercle, etc. 70 Editer les objets de la page Pour les images, les dimensions seront figées lors du déplacement d'une poignée d'angle. Faites glisser le pointeur tout en maintenant la touche Maj enfoncée pour redimensionner une image librement. 7.6 Faire pivoter un objet À l'aide de l'outil Rotation, vous pouvez faire pivoter des objets, notamment des images, des objets texte et des groupes. 7.6.1.1 3. Pour faire pivoter un objet : Rotation de la barre d'outils verticale. 1. Sélectionnez l'outil 2. Cliquez pour sélectionner l'objet, survolez l'une de ses poignées avec la souris jusqu'à ce que le pointeur de rotation (ci-dessous) apparaisse. Maintenez le bouton de la souris enfoncé et faites glisser le pointeur dans la direction où l'objet doit pivoter, puis relâchez le bouton. Pour contraindre la rotation à des intervalles de 15°, maintenez la touche Maj enfoncée. 7.6.1.2 Pour annuler la rotation (restaurer l'orientation d'origine) : • Double-cliquez sur l'objet. • Pour restaurer la rotation, double-cliquez une nouvelle fois. 7.6.1.3 Rotation de la barre d'outils verticale et cliquez pour sélectionner l'objet. 1. Sélectionnez l'outil 2. Déplacez l'origine de la rotation par rapport à sa position originale et placez-le où bon vous semble sur la page. Le repère peut aussi être placé à l'extérieur de l'objet, ce qui est idéal pour faire pivoter des objets groupés autour d'un point central. 3. Déplacez le pointeur de rotation à un nouvel angle de rotation. L'objet tourne alors autour de son nouveau pivot. 7.6.1.4 • Pour modifier l'origine de la rotation : Pour faire pivoter un objet de 90° vers la gauche ou vers la droite : Sélectionnez l'objet et choisissez la commande dans le menu Organiser. Rotation à gauche ou Rotation à droite 71 WebPlus X4 Manuel d’utilisation 7.7 Recadrer et combiner des objets Recadrer signifie masquer des parties d'un objet, par exemple pour améliorer la composition ou créer un effet spécial. L'objet sous-jacent ne s'en trouve pas modifié. Deux types de recadrage sont possibles : carré ou irrégulier. recadrage carré recadrage irrégulier La combinaison utilise plusieurs objets pour créer un objet composite spécial, contenant un ou plusieurs "trous" dans lesquels les remplissages des objets initiaux se chevauchent les uns les autres (ce qui est pratique pour créer des effets de masque ou de pochoir). 7.7.1.1 Pour recadrer en utilisant le contour d'origine de l'objet : Recadrage carré dans la palette Effets de la barre d'outils 1. Sélectionnez l'objet, puis l'outil verticale. 2. Pour recadrer sans conserver les proportions, faites glisser vers l'intérieur l'une de ses poignées de bordure ou d'angle. Appuyez simultanément sur la touche Maj pendant le déplacement afin de conserver les proportions. Pour redimensionner l'objet dans le contour de recadrage, appuyez sur Ctrl et faites glisser le pointeur vers le haut ou le bas. 7.7.1.2 • Pour recadrer un objet en modifiant son contour : Sélectionnez l'objet, puis l'outil Recadrage irrégulier dans la palette Effets de la barre d'outils verticale. La barre d'outils contextuelle apparaît et vous permet de contrôler les nœuds affichés et les segments de connexion qui définissent le contour de recadrage de l'objet. Voir Modifier les lignes. • Pour déplacer un nœud (point de contrôle) lorsque vous apercevez le pointeur glisser. • , faites-le simplement Pour déplacer un segment de ligne (entre deux nœuds) lorsque vous visualisez le curseur, faites-le glisser. 7.7.1.3 • Pour positionner un objet recadré dans son contour de recadrage : Après avoir sélectionné l'un des outils de recadrage, cliquez sur l'objet et déplacez son centre (lorsque vous voyez le pointeur en forme de main). 7.7.1.4 Pour flouter le contour de recadrage : • Après avoir sélectionné l'un des outils de recadrage, cliquez sur l'objet. • Dans la barre d'outils contextuelle, définissez une valeur de dégradé à l'aide des flèches haut/bas, de la glissière ou par saisie directe. Le dégradé est appliqué hors du contour de recadrage selon la force de corps définie. 7.7.1.5 • 72 Pour annuler un recadrage (rendre l'objet entièrement visible) : Cliquez sur le bouton Supprimer le recadrage de la barre d'outils contextuelle. Editer les objets de la page 7.7.2 Recadrer une forme d'après le contour d'une autre forme La commande Recadrer exige la sélection préalable de deux objets. L'un ou l'autre de ces objets (ou les deux) peut être un groupe d'objets. L'objet inférieur (celui qui est placé sous l'autre) est détouré suivant le contour de l'objet supérieur, donnant ainsi naissance à une forme correspondant à la zone de chevauchement des deux objets. 7.7.2.1 Pour recadrer une forme d'après le contour d'une autre forme : 1. Placez l'objet de "détourage" sur l'objet à recadrer, en utilisant à cet effet le menu Organiser et/ou la barre d'outils Organiser. Dans l'illustration ci-dessus, une Forme pleine a été placée par-dessus un cadre de texte. 2. Les deux objets étant sélectionnés ou associés, sélectionnez Recadrer dans le menu Outils. 7.7.3 Combiner des lignes et des formes Combiner des courbes est un excellent moyen pour créer un objet composite à partir de plusieurs lignes ou formes tracées. Comme pour le recadrage d'une forme (voir ci-dessus), l'objet supérieur détoure le ou les objets placés sous lui, laissant apparaître dans ce cas un ou plusieurs "trous" dans lesquels les objets initiaux se chevauchent. Comme vous le feriez lors d'un regroupement, vous pouvez appliquer un formatage (tel qu'un contour ou un remplissage) à l'objet combiné et continuer à éditer les nœuds et les segments individuels avec l'outil Pointeur. Contrairement au résultat des autres méthodes, un objet combiné conserve de façon permanente les propriétés de contour et de remplissage de l'objet supérieur. La combinaison est réversible, mais les objets initiaux conservent les propriétés de contour et de remplissage de l'objet combiné. La combinaison est un moyen rapide pour créer un masque ou un pochoir : Formes pleines 7.7.3.1 Convertir en courbes Combiner les courbes Ombre portée ajoutée Pour combiner plusieurs lignes ou formes sélectionnées : 1. Tracez vos deux lignes ou Formes pleines. 2. Placez l'objet de "détourage" sur l'objet à recadrer, en utilisant à cet effet le menu Organiser et/ou la barre d'outils Organiser. 3. Sélectionnez chaque objet, puis Outils/Convertir en courbes. 4. Sélectionnez les deux objets. 5. Choisissez la commande Organiser/Combiner les courbes. 73 WebPlus X4 Manuel d’utilisation 7.7.3.2 • Pour restaurer les formes initiales qui composent un objet combiné : Sélectionnez l'objet combiné, puis choisissez la commande Organiser/Fractionner les courbes. 7.8 Joindre les contours d'objets WebPlus comprend des outils puissants permettant de découper de nouvelles formes à partir d'anciennes formes. Les commandes Ajouter, Soustraire, Intersection ou Exclure vous permettent de créer un objet définitif (avec un nouveau contour) à partir d'objets sélectionnés. L'objet joint peut être modifié en ajustant les nœuds de la nouvelle forme. 7.8.1.1 • Pour joindre des contours (sélectionnés à l'aide du rectangle de sélection) : Sélectionnez une option dans le sous-menu Joindre les contours du menu Organiser. Ajouter Soustraire Crée un nouvel objet à partir des deux autres sélectionnés. Élimine l'intersection entre l'objet supérieur et inférieur. L'objet inférieur est également éliminé. Cette commande est utile pour tronquer rapidement des formes et des images avec un autre objet. Intersection Exclure La superposition est conservée alors que le reste est supprimé. Fusionne plusieurs objets dans un objet composite et crée un vide transparent à l'intersection entre des zones pleines. 7.9 Verrouiller la taille ou l’emplacement d’un objet Pour éviter de déplacer, redimensionner, renverser ou faire pivoter accidentellement un objet, vous pouvez le verrouiller. 74 Editer les objets de la page 7.9.1.1 • Cliquez avec le bouton droit de la souris sur l'objet et cochez la commande Organiser/Verrouiller les objets. 7.9.1.2 • Pour verrouiller un objet : Pour déverrouiller un objet : Cliquez avec le bouton droit de la souris sur l'objet et cochez la commande Organiser/Déverrouiller les objets. 7.10 Mettre à jour et enregistrer les paramètres par défaut Les propriétés par défaut des objets sont les paramètres de propriétés sauvegardés que WebPlus applique aux nouveaux objets : • contours et formes (couleur de contour et de remplissage, ombre, motif, transparence, etc.) • zones (marges, colonnes, etc.) • texte (police, taille, couleur, alignement, etc.). Les valeurs par défaut sont enregistrées séparément selon qu'il s'agisse du texte d'une forme, d'une zone ou d'un tableau, ou d'un texte artistique. Vous pouvez facilement modifier ces valeurs pour tout type d'objet, grâce à la commande Mettre à jour l'objet par défaut de la boîte de dialogue Palette de styles de texte. Vous pouvez toutefois changer facilement les paramètres par défaut de tout type d'objet. Les paramètres par défaut sont toujours locaux, c'est-à-dire que leurs modifications s'appliquent au site actif, et sont automatiquement enregistrés avec lui. Ils s'appliqueront donc à nouveau lorsque vous rouvrirez le site. Toutefois, vous pouvez aussi utiliser la commande Enregistrer les paramètres par défaut du menu Outils pour enregistrer les paramètres actuels comme paramètres globaux, qui s'appliqueront par la suite à tous les nouveaux sites. 7.10.1.1 Pour définir les remplissages locaux par défaut pour un type d'objet particulier : 1. Créez un exemple d'objet et déterminez les propriétés souhaitées, ou utilisez un objet existant présentant les propriétés adéquates. Pour les images, vous pouvez utiliser un contour, une forme ou un rectangle car leurs paramètres par défaut sont identiques. 2. Sélectionnez l'objet servant de base aux nouveaux paramètres par défaut, puis exécutez la commande Format/Mettre à jour l'objet par défaut. Ou, pour les couleurs de ligne et de remplissage, y compris les styles de ligne : 1. Lorsqu'aucun objet n'est sélectionné, sélectionnez les couleurs de ligne et/ou de remplissage dans l'onglet Couleur ou Échantillons (voir Appliquer des couleurs unies). Utilisez l'onglet Ligne pour définir une épaisseur et un style de ligne par défaut, ainsi qu'une forme d'angle. 2. Dessinez votre objet sur la page, qui adoptera automatiquement les nouveaux couleurs et styles définis par défaut. 7.10.1.2 Pour afficher et modifier les propriétés du texte par défaut : 1. Choisissez Palette de style de texte dans le menu Texte. 2. Cliquez sur Texte par défaut, puis sélectionnez une option (p. ex., Texte artistique) dans la liste de types de texte qui s'affiche alors. 3. Cliquez sur Modifier... pour afficher les paramètres actuels du type de texte sélectionné. 4. Utilisez la boîte de dialogue Style de texte pour modifier les propriétés des caractères, des paragraphes et des listes à puces ou numérotées. 7.10.1.3 Pour enregistrer tous les paramètres par défaut actifs comme paramètres globaux : 1. Sélectionnez la commande Enregistrer les paramètres par défaut du menu Outils. 2. Dans la boîte de dialogue, cochez des options pour mettre à jour globalement des valeurs par défaut spécifiques : 75 WebPlus X4 Manuel d’utilisation 3. 76 • Paramètres par défaut des documents et des objets - enregistre les paramètres actuels des sites (taille de page, orientation) et des objets (paramètres de la barre d'outils contextuelle). • Styles de texte - enregistre les styles de texte actuels dans la palette des styles de texte. • Styles d'objets - enregistrer les styles personnalisés de l'onglet Styles. • Formats des tableaux et des calendriers - enregistre les formats personnalisés enregistrés dans la boîte de dialogue Formats de tableau. Cliquez sur Enregistrer pour confirmer que toutes les nouvelles publications devront utiliser les paramètres par défaut de l'objet sélectionné. 8 Organiser des objets 8.1 Agencer les objets Lorsque vous créez des objets, ils sont superposés sur chaque calque dans l'ordre de leur création, d'arrière en avant, chaque nouvel objet venant devant les autres. À tout moment, vous pouvez changer l'ordre de superposition, ce qui modifie l'aspect de la page. 8.1.1.1 • Cliquez sur 8.1.1.2 • Pour déplacer l'objet d'un niveau vers l'avant ou l'arrière : En avant ou En arrière dans la barre d'outils Organiser, respectivement. Pour déplacer l'objet sélectionné vers le bas ou le haut de la pile : Cliquez sur Arrière-plan ou Premier plan dans la barre d'outils Organiser, respectivement. 8.2 Aligner et répartir des objets L'alignement consiste à prendre un groupe d'objets sélectionnés et à les aligner en une seule opération sur leurs bords haut, bas, gauche ou droite. Vous pouvez aussi répartir les objets de manière à ce que vos objets (via une sélection multiple) soient répartis équitablement (éventuellement à intervalles espacés). L'alignement ou la répartition peut se dérouler entre les objets les plus éloignés de votre page (sélection active), les marges de page ou le bord de page. Vous trouverez les options d'alignement soit dans l'onglet Aligner, soit dans Organiser/Aligner les objets. Un autre moyen d'aligner les objets consiste à utiliser des outils comme les règles et la grille magnétique, qui vous aident à placer les objets sur la page. L'option Magnétisme permet d'aligner les objets le long de guides magnétiques ou de guides non-magnétiques. Pour plus d'informations, reportez-vous aux rubriques Utiliser les outils de mise en page et Magnétisme ( et). 8.2.1.1 1. À l'aide de l'outil Pointeur, appuyez sur la touche Maj et cliquez sur tous les objets que vous souhaitez aligner ou tracez un rectangle de sélection autour d'eux pour créer une sélection multiple. 2. Sélectionnez l'onglet Aligner. 3. Sélectionnez une option d'alignement vertical et/ou horizontal. Sélectionnez Haut, Bas, Gauche, Droite, Centre horizontal ou Centre vertical. 8.2.1.2 • Pour aligner les bords de plusieurs objets dans une sélection : Pour répartir plusieurs objets : Sélectionnez Intervalle horizontal régulier ou Intervalle vertical régulier pour répartir les objets sélectionnés de façon uniforme entre les objets les plus éloignés de la sélection active (horizontalement ou verticalement) ou selon une valeur définie (cochez Espacé et définissez une valeur dans une unité de mesure quelconque). Plutôt que de travailler dans la zone de sélection actuelle, vous pouvez aligner ou répartir les objets sur les marges de la page (si elles sont définies) ou sur les bords de la page. 8.2.1.3 • Pour aligner/répartir les objets sur les marges ou les bords de la page : Dans le menu déroulant Relatif à, indiquez si vous souhaitez aligner les objets sélectionnés avec les marges ou les bords de la page, puis choisissez l'un des boutons d'alignement ou de répartition décrits précédemment. 77 WebPlus X4 Manuel d’utilisation 8.3 Magnétisme La fonction Magnétisme facilite le positionnement et l'alignement des objets déplacés ou redimensionnés en les aimantant aux grilles de points et aux règles. Vous pouvez également also aimanter des objets à d'autres guides de la page, tels que les marges, les lignes et les colonnes, le bord de la page, ainsi que le centre de la page ou de la marge (c'est-à-dire le centre de la page par rappord au bord ou aux marges de la page). En outre, des guides dynamiques peuvent être utilisés pour redimensionner des objets et les aligner avec le contour et le centre d'objets existants, grâce au magnétisme. Des guides apparaissent dynamiquement lorsque vous faites glisser des objets. 8.3.1.1 • Pour activer/désactiver la fonction Magnétisme : Cliquez sur le bouton Magnétisme dans la barre d'état (ne cliquez pas sur la flèche pointée vers le bas). Le bouton est de couleur orange lorsque le magnétisme est activé. Après avoir activé le magnétisme, vous pouvez activer/désactiver individuellement les différentes options correspondantes (règles, grille de points, etc). 8.3.1.2 • Pour activer/désactiver individuellement les options de magnétisme : Cliquez sur la flèche bas du bouton magnétisme dans le menu déroulant. Magnétisme (barre d'état) et cochez/décochez une option de L'option de menu Magnétisme donne accès à toutes les options de magnétisme. Vous pouvez notamment contrôler la Distance de magnétisme, c'est-à-dire la distance à laquelle un objet commencera à être aimanté à un point, un guide, etc. 8.3.2 Magnétisme à l'aide des guides dynamiques Pour un redimensionnement et un alignement précis des objets, vous pouvez utiliser les guides dynamiques au lieu de régler manuellement les règles, ou d'effectuer une sélection, une transformation et un alignement. Ces guides de couleur rouge s'affichent entre l'objet manipulé et les vertex des trois derniers objets sélectionnés sur la page, puis suggèrent à l'écran les options de magnétisme possibles, par exemple à gauche, à droite, au centre, en haut, en bas de l'objet placé, ou au centre de la page. Vous pouvez inclure les objets à magnétiser en déplaçant le pointeur de la souris sur ces objets. Pour l'alignement 8.3.2.1 • Pour le redimensionnement Pour activer les guides dynamiques : Cliquez sur la flèche bas du bouton dans le menu déroulant. Magnétisme (barre d'état) et cliquez sur Guides dynamiques Pour un magnétisme au centre de la page, vous devez en outre cocher la case Centre de la page dans Outils/Options/Mise en page/Magnétisme. 8.4 Associer un objet au texte WebPlus propose deux méthodes vous permettant de positionner des formes, des images ou des objets de la galerie par rapport au texte (artistique ou zone de texte) de votre site : • 78 Flotter avec le texte. Cette option est idéale pour les images et les formes, etc. Organiser des objets Une forme associée à un texte artistique tel qu'un titre • Une image dans une zone de texte Position alignée avec les caractères. L'objet associé est placé sous forme de caractère dans le texte et aligné verticalement par rapport au texte qui l'entoure. Un objet de la galerie associé au titre d'un texte artistique Un objet de la galerie "Fun" aligné dans une zone de texte L'avantage des deux méthodes est que l'objet associé se déplacera conjointement à votre texte. Pour les zones de texte en particulier, lorsque le texte est réparti lors de l'ajout d'un nouveau contenu à la zone, l'objet associé se déplacera avec le texte. 8.4.1.1 3. Pour associer un objet au texte : 1. Placez l'objet au-dessus ou près du texte artistique ou de la zone de texte à laquelle il doit être associé. 2. Sélectionnez Ancrer au texte... dans le menu Organiser. Dans la boîte de dialogue, sélectionnez une option de positionnement. Pour un objet flottant : 1. Activez Flotter avec le texte. Il s'agit de l'option de positionnement par défaut. 2. Réglez l'option Position sur le texte pour définir la position de l'objet par rapport au texte artistique ou à la zone de texte. Sélectionnez Gauche ou Droite, ou indiquez une valeur Retrait de pour définir un retrait à gauche (en pixels). 3. Après le positionnement, vous pouvez préciser la distance du texte : l'écart entre le contour de l'objet et le texte adjacent. 4. Cliquez sur OK. Après l'association, l'objet affiche un bouton Ancrer au texte sous l'objet. Cliquez pour modifier les propriétés. Le point d'ancrage est un emplacement défini dans le texte artistique ou la zone de texte à partir duquel l'objet est positionné. Définissez un autre emplacement dans le texte pour déplacer simultanément le point d'ancrage et l'objet. Pour un objet ancré : 1. Cochez Position ancrée sous forme de caractère. 2. Pour définir l'alignement vertical de l'objet par rapport au texte adjacent, sélectionnez un option Aligner avec le texte. Le texte n'habillera pas l'objet ancré. 79 WebPlus X4 Manuel d’utilisation 3. (Facultatif) Entrez une valeur Décalage de pour définir le pourcentage de déplacement vertical de l'objet par rapport à sa hauteur. 4. (Facultatif) Cochez Échelle pour redimensionner l'objet en pourcentage de la force de corps du texte adjacent. Ainsi, si la taille du texte change, la taille relative est conservée. Une valeur de 100 % applique la force de corps active. 5. Après le positionnement, vous pouvez préciser la distance du texte : l'écart entre le contour de l'objet et le texte adjacent. 4. (Facultatif) Cochez Utiliser ces paramètres lors de la copie pour actualiser les valeurs par défaut de flottement et d'ancrage. Par la suite, toute copie d'objet adoptera les paramètres enregistrés lorsque l'option était cochée. 5. Cliquez sur OK. L'objet est ancré au texte et est accompagné d'une icône 8.4.1.2 Ancrer au texte. Pour afficher les propriétés de l'objet associé : 1. Sélectionner un objet associé. 2. Cliquez sur Ancrer au texte, sous l'objet. La boîte de dialogue Propriétés de l'objet joint s'affiche. Les options diffèrent selon l'option de positionnement activée. Si vous souhaitez modifier la position d'un point d'ancrage, vous pouvez le faire glisser vers un emplacement de votre zone de texte. Si vous faites glisser le pointeur vers une zone hors du texte artistique/de la zone de texte, votre objet associé sera déconnecté. Vous pouvez aussi déconnecter le point d'ancrage via la boîte de dialogue Propriétés de l'objet joint. 8.4.1.3 • Pour déconnecter un objet associé : Dans la boîte de dialogue Propriétés de l'objet joint, cochez Détacher du texte. 8.5 Créer des groupes Vous pouvez aisément convertir une sélection multiple en un groupe d'objets. Lorsque des objets sont regroupés, vous pouvez tous les positionner, les redimensionner ou les faire pivoter simultanément. 8.5.1.1 Pour créer un groupe à partir d'une sélection multiple : • 8.5.1.2 Cliquez sur le bouton . Pour dissocier les éléments d'un groupe (convertir le groupe en une sélection multiple) : • Cliquez sur le bouton . Le groupe redevient une sélection multiple. Cliquez simplement sur un élément d'un groupe pour sélectionner l'objet groupe. En général, toute opération effectuée sur un groupe sélectionné affecte tous ses objets. Les objets composant un groupe restent cependant inchangés et vous pouvez également sélectionner et éditer un objet individuel d'un groupe. 8.5.1.3 • 80 Pour sélectionner un objet individuel d'un groupe : Ctrl+clic sur l'objet. 9 Lignes, contours, formes et effets 9.1 Tracer et modifier des lignes WebPlus propose des outils Crayon, Ligne droite et Stylo pour tracer des lignes droites, des lignes à main levée et des lignes courbes. L'outil Plume permet de dessiner des lignes et des formes courbes à main levée. L'outil Ligne droite sert à tracer des lignes droites, des traits en haut ou en bas de la page ou des lignes horizontales pour séparer des sections ou mettre en valeur des titres. L'outil Plume permet de joindre une série de segments de lignes (courbes ou droits) en reliant les points par des clics de souris. Lorsque vous sélectionnez un type de ligne, des nœuds carrés vous permettent de remodeler les lignes. Vous pouvez fermer une courbe (en joignant les extrémités de ligne) pour créer une forme personnalisée (voir Tracer et modifier des formes pour plus d'informations) 9.1.1 Tracer des lignes 9.1.1.1 Pour tracer une ligne à main levée (avec l'outil Crayon) : Crayon dans la palette Ligne de la barre d'outils Objets standard. 1. Sélectionnez l'outil 2. Cliquez à l'emplacement où vous souhaitez commencer la ligne, et maintenez le bouton de la souris enfoncé pendant que vous dessinez. La ligne apparaît immédiatement et suit les mouvements de votre souris. 3. Pour terminer la ligne, relâchez le bouton de la souris. La ligne est automatiquement lissée, utilisant un minimum de nœuds. 4. Pour prolonger la ligne, placez le pointeur sur l'un des nœuds de fin rouges. Le pointeur se transforme alors en symbole +. Cliquez sur le nœud et déplacez le pointeur pour ajouter un segment. 9.1.1.2 Pour tracer une ligne droite (à l'aide de l'outil Ligne droite) : Ligne droite dans la palette Ligne de la barre d'outils Objets standard. 1. Sélectionnez l'outil 2. Cliquez à l'emplacement où vous souhaitez commencer la ligne, et déplacez la souris. La ligne apparaît immédiatement. Pour échelonner des angles de 15° par rapport à la ligne droite, maintenez la touche Maj enfoncée tout en faisant glisser la souris. Ceci permet de créer aisément des lignes verticales ou horizontales. 81 WebPlus X4 Manuel d’utilisation 3. Pour prolonger la ligne, placez le pointeur sur l'un des nœuds de fin rouges. Le pointeur se transforme alors en symbole +. Cliquez sur le nœud et déplacez le pointeur pour ajouter un segment. 9.1.1.3 1. Pour tracer un ou plusieurs segments de ligne (avec l'outil Plume) : Sélectionnez l'outil Plume dans la palette Ligne de la barre d'outils Objets standard. Dans la barre d'outils contextuelle, trois boutons permettent de sélectionner le type de segment à tracer : Un segment Droit est simplement une ligne droite reliant deux nœuds. (Raccourci : appuyez sur 1) Un segment de Bézier est courbé, avec des poignées de contrôle permettant un ajustement précis. (Raccourci : appuyez sur 2) Les segments Intelligents, qui n'ont pas de poignées de contrôle visibles, relient chaque nœud par une courbe calculée automatiquement. Ils sont particulièrement utiles pour tracer des lignes autour d'objets et d'images courbes. (Raccourci : appuyez sur 3) 2. Sélectionnez un type de segment, puis cliquez à l'endroit où vous souhaitez commencer votre ligne. • Pour dessiner un segment droit, cliquez à nouveau (ou faites glisser la souris) pour créer un nouveau nœud à l'endroit où vous souhaitez terminer le segment. Tout en maintenant la touche Maj enfoncée, cliquez pour aligner le segment par angles multiples de 15° (utile pour les jonctions rapides à angle droit). • Pour un segment de Bézier cliquez de nouveau pour définir un nouveau nœud et tirez sur une poignée de contrôle à partir de ce nouveau nœud. Cliquez à nouveau pour définir la fin du segment. Un segment courbé apparaît. Le segment terminé devient sélectionnable. • Pour dessiner un segment intelligent, cliquez à nouveau pour créer un nouveau nœud. Le segment apparaît sous la forme d'une courbe lissée et régulière (sans poignées de contrôle visibles) entre le nouveau nœud et le nœud précédent. Avant de relâcher le bouton de la souris, vous pouvez faire glisser votre souris afin d'infléchir le trait comme pour incurver un morceau de fil de fer. Si le nœud d'angle précédent sur le trait est également intelligent, le mouvement de flexibilité s'étendra jusqu'au segment précédent. Toute en maintenant la touche Maj enfoncée, cliquez sur la page pour créer un nouveau nœud aligné par angles de 15° avec le nœud précédent. 3. Pour étendre une ligne existante, répétez l'étape 2 pour chaque nouveau segment. Chaque segment peut être d'un type différent. 4. Pour terminer la ligne, appuyez sur Échap, effectuez un double-clic n'importe où ou sélectionnez un autre outil. 9.1.2 Éditer des lignes Utilisez l'outil Pointeur avec la barre contextuelle pour ajuster les lignes une fois dessinées. Les techniques sont identiques, que vous éditiez un objet ligne séparé ou le contour d'une forme fermée. Voir l’Aide de Web Studio pour plus d’informations sur l’édition des traits. 9.2 Définir les propriétés du contour Toutes les lignes, y compris les contours qui englobent des formes, présentent de nombreux attributs, tels que la couleur, l'épaisseur, l'échelle, l'extrémité, la jointure (angle) et l'alignement de la passe. Vous pouvez modifier ces propriétés pour les lignes à main levée, droites ou courbées, ainsi que pour le contour des formes (reportez-vous à Dessiner et éditer des formes). Les zones de texte, les tableaux et les textes artistiques comportent également des propriétés de contour. Dans WebPlus, vous pouvez contrôler la position de la passe (largeur de contour) par rapport à la trajectoire de l'objet, c'est-à-dire le contour qui définit la limite de l'objet. 82 Lignes, contours, formes et effets 9.2.1.1 Pour modifier les propriétés du contour d'un objet sélectionné : • Utilisez l'onglet Échantillons pour modifier la couleur et/ou la teinte du contour. Vous pouvez également utiliser l'onglet Couleur pour appliquer une couleur à l'objet sélectionné à partir d'un mélangeur de couleurs. • Utilisez l'onglet Contour, la barre d'outils contextuelle (qui s'affiche lorsqu'une ligne est sélectionnée) ou la boîte de dialogue Contour et cadre pour modifier l'épaisseur ou le type de la bordure de la forme, ou d'autres propriétés. Sélectionnez une épaisseur de ligne et utilisez les listes déroulantes pour sélectionner le type de ligne. La barre d'outils contextuelle peut également servir à régler l'échelle des extrémités de ligne en pourcentage. Dans l'onglet Contour, la barre d'outils contextuelle, ou la boîte de dialogue Contour et cadre, le menu déroulant propose les styles suivants : Aucun, Simple, Calligraphique, ainsi que plusieurs styles de ligne Pointillé et Double, comme le montre l'illustration ci-dessous. Les lignes peuvent également être personnalisées par d'autres techniques : Pour les pointillés, sélectionnez parmi cinq styles de lignes (voir ci-dessus). OU (onglet et boîte de dialogue uniquement) Déplacez la glissière Motif des pointillés pour définir la longueur d'ensemble du motif (le nombre de cases à gauche de la glissière) et la longueur des traits (le nombre de ces cases qui sont noires). Les illustrations ci-dessous représentent des lignes avec des longueurs de traits équivalentes à (1) 4 et 2, et (2) 5 et 4 : Pour les lignes doubles, choisissez parmi les quatre styles de ligne Double (voir ci-dessus). Pour obtenir des lignes calligraphiques de largeur variable (comme dessinés à l'aide d'un stylet à pointe carrée tenu à un certain angle), sélectionnez le style de ligne calligraphique (ci-contre) dans le menu déroulant, puis utilisez la case Angle calligraphique afin de définir l'angle de la pointe du stylet, comme illustré dans les exemples ci-dessous. Vous pouvez également modifier l'extrémité et la jointure (angle) d'une ligne, à l'endroit où deux lignes se rejoignent. 9.3 Tracer et modifier des formes Les formes pleines sont des objets prédéfinis, de diverses formes, que vous pouvez placer immédiatement sur la page. 83 WebPlus X4 Manuel d’utilisation Après avoir tracé une forme pleine, vous pouvez transformer sa forme d'origine à l'aide de poignées de contrôle et modifier ses propriétés — par exemple lui appliquer un remplissage en dégradé ou bitmap (notamment avec vos propres images bitmap !) ou des effets de transparence. Un autre moyen de créer une forme consiste à tracer une ligne (ou une série de segments de lignes) et à connecter son nœud de départ et son nœud de fin pour créer une forme fermée. 9.3.1 Formes pleines La palette Forme pleine comprend de nombreuses formes fréquemment utilisées, notamment des rectangles, des ovales, des flèches, des polygones et des étoiles. Vous pouvez utiliser le bouton Forme pleine pour obtenir : Vous pouvez aisément convertir vos formes en boutons Web en y insérant des liens hypertextes ou des zones dynamiques. La forme pleine "QuickButton" (indiquée) a été spécialement conçue pour la création de boutons stylisés ! Il est également possible d'utiliser la palette des formes pleines située au-dessus de l'espace de travail pour ajuster l'épaisseur du contour, la couleur et le style, etc. 9.3.1.1 Pour créer une forme pleine : 1. Cliquez sur la palette Forme pleine de la barre d'outils Objets standard et sélectionnez une forme. L'icône du bouton correspond à la forme sélectionnée. 2. Cliquez sur la page pour créer une forme avec une taille par défaut. - ou Faites glisser le pointeur sur la page pour définir la taille de la forme. Lorsque la forme obtient la taille souhaitée, relâchez le bouton de la souris. 9.3.1.2 • Pour dessiner une forme contrainte (comme un cercle) : Maintenez la touche Maj enfoncée tandis que vous faites glisser le pointeur. Toutes les formes pleines peuvent être positionnées et redimensionnées, mais aussi faire l'objet d'une rotation et d'un remplissage. En outre, vous pouvez les transforme à l'aide des poignées ajustables situées autour de la forme pleine. Chaque forme est modifiée de façon logique. 9.3.1.3 Pour modifier l'aspect d'une forme pleine : 1. Cliquez sur la forme pleine pour afficher une ou plusieurs poignées coulissantes autour de sa forme. Elles sont différentes des poignées de sélection "intérieures". Chaque forme pleine comporte des poignées spécifiques ayant une fonction particulière. 2. Pour modifier l'aspect d'une forme pleine, faites glisser ses poignées. Pour connaître la fonction de chaque poignée avec une forme particulière, déplacez l'outil Pointeur sur la poignée et lisez la barre d'état. 9.3.2 Formes fermées Dès que vous dessinez ou sélectionnez une ligne, les nœuds de la ligne apparaissent. Les nœuds symbolisent les extrémités de chacun des segments d'une ligne. Les courbes à main levée disposent généralement de plusieurs nœuds ; les segments de droite ou de courbe n'en comportent que deux (1). Il est possible de créer une forme en traçant une ligne entre deux extrémités (2) ou simplement en fermant la courbe (3). 84 Lignes, contours, formes et effets 9.3.2.1 • Pour transformer une ligne sélectionnée en une forme : Sélectionnez la ligne à l'aide de l'outil Pointeur et cliquez sur le bouton d'outils contextuelle. Fermer la courbe de la barre Vous pouvez également ouvrir une forme pour lui ajouter un ou plusieurs segments. 9.3.2.2 Pour briser une ligne ou une forme : 1. À l'aide de l'outil Pointeur, sélectionnez le nœud à l'endroit où vous souhaitez ouvrir la forme. 2. Cliquez sur le bouton Ouvrir la courbe de la barre d'outils contextuelle. La ligne est divisée en deux. Une forme devient alors une ligne dont le nœud sélectionné est divisé en deux nœuds situés aux extrémités de la nouvelle ligne. 3. Vous pouvez à présent utiliser l'outil Pointeur pour remodeler la ligne si nécessaire. Voir l’Aide en ligne pour plus d’informations sur l’édition des formes. 9.4 Appliquer des effets de filtre 2D WebPlus fournit différents effets de filtre qu'il est possible d'utiliser pour transformer un objet. Les effets de filtre 3D vous permettent de créer l'illusion d'une surface texturée ; ces effets sont présentés dans une autre section. Cette section est consacrée exclusivement aux effets 2D. Les exemples ci-dessous montrent chacun des effets de filtre 2D appliqués à la lettre "A". Ombre portée Ombre interne Lumière externe Lumière interne Biseau interne Biseau externe Relief Estampage creux Flou gaussien Flou zoom Flou radial Flou directionnel Remplissage de couleur Flouter Contour Réflexion 85 WebPlus X4 Manuel d’utilisation L'onglet Styles du Studio offre un éventail d'effets de filtre 2D prêts à l'emploi. Chacune des différentes catégories propose un ensemble d'effets prédéfinis tels que des ombres, des biseaux, des reflets, de flous, etc. De subtiles variations de l'effet sont proposées dans chaque catégorie. Cliquez sur une miniature pour appliquer l'effet à l'objet sélectionné. WebPlus fournit également l'outil Ombre qui permet d'appliquer une ombre à un objet directement sur la page Web. Des poignées de contrôle peuvent être utilisées pour ajuster le niveau de flou, l'opacité et la couleur de l'ombre. 9.4.1.1 Pour appliquer un effet de filtre 2D : Effets de filtre dans la palette Effets de la barre 1. Sélectionnez un objet et cliquez sur le bouton d'outils verticale. 2. Pour appliquer un effet particulier, cochez la case correspondante dans la liste de gauche. 3. Pour ajuster les propriétés d'un effet spécifique, sélectionnez son nom et définissez les options de la boîte de dialogue. Réglez les glissières ou saisissez des valeurs spécifiques pour modifier l'effet associé. Vous pouvez également sélectionner une glissière et utiliser les flèches du clavier. Les options peuvent changer d'un effet à l'autre. 4. Cliquez sur OK pour appliquer l'effet à l'objet sélectionné ou sur Annuler pour abandonner les modifications. 9.4.2 Créer des réflexions L'ajout d'une réflexion verticale à un objet est un moyen très simple de donner du relief à une page Web. L'effet est particulièrement saisissant lorsqu'il est appliqué à une image mais donne des résultats tout aussi intéressants lorsqu'il est appliqué à du texte artistique, par exemple au titre d'une page ou au texte d'une bannière. Un ensemble de paramètres vous permettent de définir la hauteur, l'opacité, le décalage et le niveau de flou. 9.4.3 Créer des contours WebPlus vous permet d'ajouter un contour de couleur à un objet, notamment à un caractère ou à une forme (en tant qu'effet de filtre). Vous pouvez définir la couleur de remplissage, les paramètres de transparence et le mode de fusion. Vous pouvez également appliquer au contour un remplissage de type dégradé, de type Contour (le remplissage s'étend du bord interne au bord externe du contour) ou de type Texture. Enfin, il est possible de positionner le contour à l'intérieur ou à l'extérieur des bords de l'objet, ou de le centrer sur les bords de l'objet. Comme tous les autres effets, l'effet contour peut être activé ou désactivé. D'autre part, vous pouvez combiner votre effet Contour avec d'autres effets 2D ou des effets 3D : il vous suffit pour cela de cocher d'autres options dans la boîte de dialogue Effets de filtre. 86 Lignes, contours, formes et effets 9.4.4 Erreur ! Signet non défini.Utiliser l'outil Ombre Les ombres sont très utiles pour ajouter du style et de la profondeur à votre travail, notamment sur les images et les objets texte, mais également sur les formes, les zones de texte et les tableaux. Pour vous aider à en créer en quelques clics, WebPlus met à votre disposition l'outil Ombre dans la palette Effets de la barre d'outils verticale. Cet outil vous apporte une complète liberté dans la création des effets d'ombre, vous permettant d'ajouter des ombres de base ou à bords inclinés réglables à tout objet WebPlus. Ombres de base (gauche) et oblique (droite) appliquées à une forme pleine carrée. Le réglage de la couleur des ombres, de leur opacité, de leur flou, et de leur échelle/distance est possible directement sur la page grâce à des nœuds qui peuvent être déplacés (ou par une barre d'outils contextuelle). Il est possible de modifier les nœuds vers l'intérieur ou l'extérieur à partir de l'origine de l'ombre pour modifier le flou et l'opacité. Pour appliquer une couleur différente, sélectionnez le nœud couleur, puis choisissez une couleur dans l'onglet Couleur ou Échantillons. Selon qu'il s'agit d'une ombre de base ou inclinée, l'origine peut se trouver au centre (illustration) ou au bord de l'objet. Après avoir créé une ombre, vous pouvez l'ajuster selon vos besoins dans la boîte de dialogue Effets de filtre. 9.5 Appliquer des effets de filtre 3D Les effets de filtre 3D vont au-delà des simples effets de filtre 2D (tels que les effets d'ombre, de lueur, de biseautage et d'estampage) pour créer l'illusion d'une surface texturée sur l'objet. Vous pouvez utiliser la boîte de dialogue Effets de filtre pour appliquer un ou plusieurs effets au même objet. Gardez à l'esprit qu'un effet 3D ne donne aucun résultat sur un objet sans remplissage. L'onglet Styles du Studio est un point de départ pour commencer à tester les effets de filtre 3D. Chacune des différentes catégories propose un ensemble d'effets 2D et 3D prédéfinis, comportant différents paramètres. Vous verrez divers modèles de surfaces et de textures 3D réunis dans des catégories thématiques (Verre, Métallique, Bois, etc.). Cliquez sur une miniature pour l'appliquer à l'objet sélectionné. Si l'objet est de la même couleur, le résultat sera instantané ! Vous pouvez aussi personnaliser l'un des effets proposés dans l'onglet Styles ou appliquer un ou plusieurs effets spécifiques à l'aide de l'option Effets de filtre. 87 WebPlus X4 Manuel d’utilisation 9.5.1.1 3. Pour appliquer des effets de filtre 3D : Effets de filtre de la palette Effets dans la barre d'outils verticale 1. Cliquez sur le bouton 2. Cochez la case Effets 3D à gauche. La case Éclairage 3D est cochée par défaut. • Effets 3D est primordial et ses paramètres de Flou et de Profondeur ont une importance considérable. Vous pouvez cliquer sur le bouton "+" pour les dissocier en vue d'un réglage individuel. • La case Éclairage 3D fournit une "source de lumière" sans laquelle toute donnée de profondeur serait sans effet. Les paramètres d'éclairage vous permettent d'éclairer votre paysage 3D et de varier ses propriétés réflectives. Ajustez les glissières principales pour modifier les propriétés générales des effets 3D que vous avez sélectionnés. • Flou détermine l'étendue de l'adoucissement. Plus le flou est élevé, plus les modifications de la hauteur semblent graduelles et importantes. • Profondeur détermine l'étendue des modifications de la profondeur. • Le bouton est activé par défaut. Il associe les deux glissières afin que les modifications importantes de la Profondeur soient adoucies par le paramètre Flou. Pour régler les glissières séparément, cliquez sur le bouton. 4. (Facultatif) Si nécessaire, cliquez sur le bouton Afficher/Masquer l'aperçu pour afficher le volet d'aperçu. Si vous affichez ce volet, les effets seront uniquement appliqués à l'objet présenté dans la zone d'aperçu. Si vous masquez ce volet (en cliquant de nouveau sur ce bouton), les effets de filtre seront appliqués directement à l'objet sur la page. La première méthode vous permet de paramétrer les effets de filtre sans être gêné par la présence d'autres objets. Utilisez les boutons d'augmentation ou de réduction du facteur de zoom ou entrez un facteur de zoom pour augmenter ou réduire le niveau de détails. 5. Dans la liste des effets 3D, sélectionnez un effet et testez les paramètres disponibles. 9.6 Ajouter une troisième dimension (3D instantanée) La fonction 3D instantanée permet de transformer facilement des formes plates (voir ci-dessous) et du texte en objets à trois dimensions. WebPlus permet de contrôler les paramètres d'effets 3D suivants : • biseau : vous pouvez utiliser plusieurs effets prédéfinis concaves ou convexes ou créer votre propre effet à l'aide d'un éditeur de profil de biseautage personnalisé. • éclairage : jusqu'à huit sources de lumière colorées éditables peuvent être positionnées séparément pour produire des effets de lumière spectaculaires. • effets de tour : l'éditeur de profil de rotation et la la commande d'extrusion permettent de créer des objets dotés d'un contour (un bouchon de liège, par exemple). • texture : vous pouvez contrôler l'extrusion de la texture sur les remplissages qui ne sont pas unis. • rotation : fait pivoter l'objet en trois dimensions. • matériau : commande l'intensité des effets de lumière sur les surfaces des objets (superbe pour le texte artistique en 3D !). Affichée en permanence au-dessus de votre espace de travail, une barre d'outils contextuelle 3D permet de configurer les paramètres ci-dessus, chaque paramètre contribuant à l'effet 3D appliqué à l'objet sélectionné. Vous pouvez convertir sur la page même les objets en 3D, à l'aide d'un cercle rouge qui permet de faire pivoter l'objet autour des axes X, Y et Z par rapport à la page. Observez le curseur changer d'aspect lorsque vous positionnez le pointeur de la souris sur les nœuds du cercle rouge ou sur la représentation filaire. 88 Lignes, contours, formes et effets rotation sur l'axe X rotation sur l'axe Y rotation sur l'axe Z rotation sur les axes X et Y effectuez les transformations autour des axes des objets 3D et non autour des axes de la page, en maintenant la touche Ctrl enfoncée tout en effectuant la transformation. Vous pouvez également régler l'angle et l'élévation de chaque source de lumière active sur la page en faisant glisser son pointeur. Après chaque transformation, l'objet d'origine reste éditable. 9.6.1.1 Pour ajouter une troisième dimension : 1. Sélectionnez l'objet et cliquez sur le bouton de l'outil 3D instantanée dans la palette Effets de la barre d'outils Outils. Un cercle rouge s'affiche au premier plan de l'objet, qui adopte immédiatement des caractéristiques 3D. 2. Cliquez sur une catégorie d'effet 3D dans le premier menu déroulant de la barre contextuelle 3D. Les options de la barre changent de façon dynamique selon la catégorie sélectionnée. Consultez l'aide en ligne pour plus d'informations. Cliquez sur Paramètres par défaut dans la barre d'outils contextuelle pour revenir à la transformation initiale de l'objet. 9.6.1.2 • Cliquez sur le bouton Supprimer la 3D de la barre d'outils contextuelle. Vous pourrez toujours cliquer sur le bouton 3D instantanée de la barre d'outils par la suite pour réinstaller l'effet. 9.6.1.3 • Pour désactiver les effets 3D : Pour éditer les propriétés de base d'un objet 3D : Sélectionnez l'objet 3D, puis cliquez sur le bouton Editer dans le coin inférieur droit de l'objet 3D : La forme d'origine de l'objet s'affiche, ce qui permet de manipuler ses poignées de sélection pour la redimensionner ou la faire pivoter. 9.7 Ajouter des bordures Une bordure est un élément décoratif récurrent que vous pouvez définir pour entourer des objets tels que des zones de texte, des images et des tableaux. WebPlus propose une impressionnante palette de styles de bordure basés sur des images, classés par catégorie. Toutefois, si vous souhaitez créer vos propres bordures personnalisées, vous pouvez importer un modèle sous forme d'image et l'enregistrer pour une utilisation ultérieure. Vous pouvez appliquer un effet à la bordure sélectionnée : côtés, haut, bas, gauche, droite, bas et haut (opposé). La catégorie Cadres d'image de l'onglet Galerie propose les mêmes styles de bordure, mais déjà appliqués à des cadres d'image fictifs. (Voir.) 89 WebPlus X4 Manuel d’utilisation 9.7.1.1 Pour ajouter une bordure à un objet : Contour/Bordure de la palette Remplissage dans la barre d'outils 1. Cliquez sur le bouton verticale. 2. Pour définir la bordure, sélectionnez l'onglet Bordure puis un modèle de bordure dans la liste déroulante Style. Vous pouvez visualiser chaque bordure dans la fenêtre de droite, lorsque vous faites défiler la liste à l'aide des flèches haut/bas de votre clavier. Pour supprimer une bordure, sélectionnez Aucune en haut de la liste. 3. Sélectionnez une largeur de bordure. Vous devrez peut-être effectuer quelques essais avant de trouver une largeur adaptée à la taille de votre objet. 4. Pour appliquer la bordure à des bords spécifiques de l'objet, utilisez le menu déroulant Contour. Vous pouvez activer et désactiver les bordures afin de tester diverses combinaisons. 5. 6. Définissez les autres options selon vos besoins : • Sélectionnez un Type de bordure. Mosaïque répète le motif de la bordure, Étirer permet simplement d'étirer le motif ; Simple adapte la taille de l'image d'origine à l'objet. Comme le type de chaque modèle est prédéfini, il vous suffit de l'adapter à vos bordures personnalisées. • Sélectionnez un paramètre d'Alignement pour aligner la bordure sur l'Extérieur, l'Intérieur ou le Centre du cadre de sélection de l'objet. • Si la case Derrière le contenu est cochée, la moitié interne de la bordure s'étend derrière l'objet. Dans le cas contraire, l'ensemble de la bordure apparaît au premier plan (plus la bordure est large, plus elle chevauche la zone remplie). • Si la case Adapter à la taille de l'objet est cochée, la bordure et l'objet sont modifiés lorsque vous redimensionnez ce dernier. Dans le cas contraire, la largeur de la bordure reste identique lors du redimensionnement. • Si l'option Tracer le centre n'est pas cochée (défini par défaut), les zones internes d'une image encadrée (utilise pour créer votre bordure) resteront vides. Vous n'aurez donc pas à supprimer manuellement les centres d'image indésirables. Si l'option est cochée, la zone située à l'intérieur d'un cadre personnalisé est répétée. Cliquez ensuite sur OK. Utilisez le bouton Importer pour baser vos bordures sur votre modèle d'image à bordure. Après avoir adapté de façon optimale le modèle à votre nouvelle bordure, vous pouvez l'enregistrer en vue d'une utilisation ultérieure. La bordure est stockée et vous pouvez l'utiliser dans d'autres publications. 9.7.1.2 • Pour enregistrer votre bordure personnalisée : Cliquez sur Enregistrer sous. 9.8 Utiliser les styles d'objets Les styles de l'objet récompensent vos efforts de la même manière que les styles de texte et les combinaisons de couleurs. Lorsque vous avez défini un ensemble d'attributs souhaité, des propriétés telles que la couleur de ligne, le remplissage, la bordure, etc., vous pouvez enregistrer cet ensemble sous un style. WebPlus reconnaît les objets utilisant ce style, ce dernier apparaît dans l'onglet Styles et peut ainsi être appliqué à de nouveaux objets. 90 Lignes, contours, formes et effets L'onglet Styles comporte différentes galeries de styles prédéfinis que vous pouvez appliquer à tout objet ou personnaliser selon vos goûts. Les catégories d'effets proposent des galeries telles que Flous, 3D, Contour, Maillages, Ombres, Matériaux (métaux, p. ex.), etc. Chaque catégorie comporte des sous-catégories. 9.8.1.1 1. Cliquez sur l'onglet Styles. 2. Développez le menu déroulant pour sélectionner une catégorie de styles (p. ex., Flous), puis choisissez une sous-catégorie dans la fenêtre inférieure. 3. Affichez sous forme de miniatures les styles disponibles (les rouages s'affichent par défaut) dans la fenêtre. 4. Cliquez sur une miniature de style pour l'appliquer aux objets sélectionnés. 9.8.1.2 • Pour supprimer un style de l'objet d'une galerie : Cliquez avec le bouton droit de la souris sur la miniature et sélectionnez la commande Supprimer. 9.8.1.3 • Pour appliquer un style de l'objet à un ou plusieurs objets : Pour dissocier un objet de sa définition de style : Cliquez avec le bouton droit de la souris sur l'objet et choisissez Format/Style de l'objet/Dissocier. 9.8.2 Enregistrer des styles d'objet 9.8.2.1 1. 9.8.2.2 Pour créer un style de l'objet basé sur les attributs d'un objet existant : Cliquez avec le bouton droit de la souris sur l'objet et choisissez Format/Style de l'objet/Créer. Pour enregistrer un style d'objet d'un site globalement : 1. Sélectionnez la commande Enregistrer les paramètres par défaut du menu Outils. 2. Dans la boîte de dialogue, cochez Styles d'objets, puis cliquez sur Enregistrer. 91 10 Images, animation et multimédia 10.1 Ajouter des cadres d'image Similaire à une zone de texte, un cadre d'image (à ne pas confondre avec une bordure décorative) est un conteneur doté d'une forme. Vous pouvez sélectionner au choix : • Des cadres d'image à bordure sous l'onglet Galerie. - ou - • Des cadres sans bordure dans la barre d'outils verticale. WebPlus vous permet d'importer directement une image dans le cadre ou d'y insérer une image à partir de la Barre des médias. Les cadres d'image vides s'affichent sous forme d'éléments fictifs en forme d'enveloppes. À tout moment, vous pouvez remplacer l'image à l'intérieur du cadre. Sous tous les cadres sélectionnés contenant une image s'affichera une barre d'outils Cadre d'image qui vous permet d'activer une vue panoramique, d'effectuer une rotation (90 degrés dans le sens antihoraire), un zoom avant ou un zoom arrière, et de remplacer l'image). 10.1.1.1 Pour ajouter un cadre d'image à bordure : 1. Sous l'onglet Galerie, sélectionnez Cadres d'image dans la liste déroulante. 2. Sélectionnez une sous-catégorie (p. ex., Métallique, Naturel). 3. Faites glisser la miniature du modèle de cadre vers votre page. 10.1.1.2 Pour ajouter un cadre d'image sans bordure : 1. Dans le cas d'un cadre d'image rectangulaire vide, sélectionnez Image/Cadre vide... dans le menu Insertion. 2. Le pointeur de la souris prend la forme d'un curseur de copie d'image. L'action suivante détermine les dimensions et la position initiales du cadre d'image. 3. Pour insérer le cadre à une taille par défaut, vous n'avez qu'à cliquer sur le bouton gauche de la souris. - ou Pour définir la taille du cadre, tracez un rectangle de sélection et relâchez le bouton de la souris. 10.1.1.3 Pour ajouter une image dans un cadre : • À partir de l'album affiché dans la Barre des médias, faites glisser une photo directement sur le cadre d'image. - ou Cliquez sur le bouton Remplacer l'image directement sous le cadre sélectionné, puis repérez et sélectionnez une image. Cliquez sur Ouvrir. Tirez profit de l'onglet Galerie pour faire glisser sur votre page des cadres d'image avec ou sans bordure. Vous avez le choix entre des cadres d'orientations et de styles différents. 92 Couleur, remplissages et transparence L'image est ajoutée au cadre selon les propriétés par défaut de Cadre d'image, c'est-à-dire qu'elle est mise à l'échelle de manière à occuper le maximum du cadre ; les proportions sont toujours conservées. Vous pouvez néanmoins modifier la taille de l'image, son orientation et sa position par rapport au cadre à l'aide du bouton affiché sous l'image sélectionnée ou Propriétés du cadre dans barre d'outils contextuelle. 10.2 Importer des images Il existe différentes manières d'ouvrir une image dans WebPlus. Vous pouvez faire glisser un fichier d'un dossier Windows externe directement vers votre page, faire glisser une miniature depuis la Barre des médias de WebPlus, coller l'image à partir du Presse-papiers ou importer l'image sous forme de fichier par le biais d'une boîte de dialogue. • Les images dissociées flottent librement sur la page, alors que les images ancrées se trouvent à l'intérieur d'un objet texte. • Les images intégrées font partie intégrante du projet WebPlus, alors que l'association place une copie de référence de l'image sur la page et conserve un lien vers le fichier d'origine. Chaque méthode a ses avantages et inconvénients (reportez-vous à Intégrer ou associer). WebPlus vous permet de placer votre image sur la page à sa taille d'origine. Par défaut, l'image n'est pas recadrée. Cependant, vous pouvez choisir de recadrer l'image et d'ajuster les propriétés du cadre d'image en ce qui concerne le positionnement et les dimensions de l'image dans le cadre. 10.2.1.1 Pour ajouter une image à partir de la barre des médias : • Faites glisser une miniature d'image VERS la page à partir de l'un des albums affichés dans la Barre des médias de WebPlus (agrandissez la Barre des médias en bas de votre espace de travail). Vous pouvez également faire glisser la miniature vers une image existante pour remplacer cette dernière. 10.2.1.2 Pour importer une image à partir d'un fichier : 1. (Facultatif) Si vous souhaitez ancrer l'image, cliquez dans un objet texte pour définir un point d'insertion. Pour que l'image soit dissociée, assurez-vous qu'aucun objet texte n'est sélectionné. 2. Dans la fenêtre principale : • cliquez sur le bouton standard • Insertion. Importer une image... dans la palette Image de la barre d'outils Objets Dans WritePlus : • sélectionnez Fichier image dans le menu Insertion. 3. Utilisez la boîte de dialogue Importer une image pour sélectionner le fichier image à ouvrir. 4. Sélectionnez Intégrer l'image ou Lier l'image. Voir Intégrer ou associer. 5. Cliquez sur Ouvrir. Si vous avez ouvert une image via la Barre de création rapide, l'image s'affichera automatiquement sur la page. 6. Si la fenêtre principale comporte un point d'insertion, un message vous demande si vous souhaitez insérer l'image à l'emplacement du curseur. Cliquez sur Oui si c'est ce que vous souhaitez. S'il n'y a pas de point d'insertion (ou si vous avez répondu "Non" à la question), le pointeur de la souris se transforme en curseur de collage d'image. L'action suivante détermine la taille initiale et la position de l'image dissociée. 7. Pour insérer l'image à sa taille d'origine, cliquez simplement sur la page. OU Pour définir la taille de l'image insérée, cliquez et déplacez la souris pour définir une zone, puis relâchez le bouton de la souris. Utilisez la touche Maj pour placer l'image sans maintenir ses proportions (les proportions de l'image sont conservées par défaut). 93 WebPlus X4 Manuel d’utilisation Pour coller plusieurs images, sélectionnez plusieurs images dans la boîte de dialogue Ouvrir puis collez chaque image une par une sur la page (en cliquant à chaque fois sur la page). 10.2.2 Remplacer des images L'option Remplacer l'image vous permet de remplacer une image par une autre à n'importe quel moment. Cette option est particulièrement utile si vous devez remplacer une image par une autre, mais que vous souhaitez conserver la position et les dimensions de l'image originale. Vous pouvez l'utiliser sur n'importe quelle image (recadrée ou non). 10.2.2.1 Pour remplacer une image : • Cliquez sur le bouton Remplacer l'image juste en dessous de l'image sélectionnée puis allez chercher une image et sélectionnez-la. Cliquez sur Ouvrir. 10.2.2.2 Pour remplacer une image par le biais de la Barre des médias : • Faites glisser une miniature d'image vers une image existante à partir de l'un des albums affichés dans la Barre des médias de WebPlus (commencez par agrandir la Barre des médias en bas de votre espace de travail). 10.2.3 Ajuster les images recadrées WebPlus propose des options supplémentaires permettant de travailler avec les images recadrées. Ces images sont soit des images que vous avez recadrées en utilisant les outils de recadrage (barre d'outils verticale), soit des images remplaçables déjà présentes dans les modèles. Par exemple, vous pouvez déplacer l'image ou lui appliquer un zoom afin de définir la partie de l'image qui doit s'afficher dans son "cadre". Vous pouvez également modifier les dimensions de l'image et ses paramètres d'alignement en ajustant les propriétés de son cadre. Lorsque vous sélectionnez une image recadrée avec l'outil Pointeur, une barre de commande apparaît sous l'image. Vous y trouverez des options de déplacement, de rotation, de zoom avant, de zoom arrière, ainsi que l'option Remplacer l'image. • Pour repositionner une image recadrée à l'intérieur de son "cadre", cliquez sur faites-la glisser. • Pour faire pivoter une image par pas de 90° dans le sens antihoraire, cliquez sur le bouton • Pour réaliser un zoom avant ou un zoom arrière sur l'image, cliquez sur l'un des outils de zoom avant/arrière , puis cliquez sur l'image et . . • Pour remplacer une image, cliquez sur , puis recherchez la nouvelle image et cliquez sur Ouvrir. 10.2.3.1 Pour modifier les propriétés du cadre : 1. Cliquez sur une image recadrée avec le bouton droit de la souris et choisissez Propriétés du cadre. OU Sélectionnez l'image et choisissez Propriétés du cadre dans la barre d'outils contextuelle Image. 2. Dans la boîte de dialogue, vous pouvez agrandir/réduire l'image au maximum, utiliser une mise à l'échelle optimale pour adapter l'image au cadre (Étirer) ou utiliser la taille d'origine de l'image (Sans échelle). 3. Pour modifier l'alignement vertical de l'image à l'intérieur du cadre, sélectionnez Haut, Milieu ou Bas. 4. Pour modifier l'alignement horizontal, sélectionnez Gauche, Centre ou Droite. Lorsque vous sélectionnez une image qui n'est pas recadrée, seul un bouton Remplacer l'image vous est proposé. 94 Couleur, remplissages et transparence 10.2.4 Intégrer ou associer L'intégration signifie que l'image dans WebPlus est désormais distincte du fichier d'origine. L'intégration produit un fichier WebPlus volumineux. Si vous devez modifier une image intégrée, vous devez la réimporter après édition. Il s'agit cependant de la meilleure méthode si la taille du fichier n'est pas un problème et si les images sont définitives. L'association permet d'insérer une copie du fichier image dans la publication WebPlus associée au fichier d'origine de telle sorte que toute modification apportée ultérieurement dans l'application d'origine soient automatiquement reportées dans WebPlus. L'association vous permet de limiter la taille du fichier de site. D'autre part, vous devez gérer rigoureusement les fichiers associés externes, en vous assurant, par exemple, de tous les inclure si vous déplacez le fichier WebPlus sur un autre lecteur. Les deux options n'affectent pas votre site Web publié, mais uniquement votre site WebPlus. 10.3 Utiliser la Barre des médias La Barre des médias fonctionne comme un panier rassemblant les photos à inclure sur votre site. Son usage principal est de faciliter le processus de création en améliorant la productivité (en évitant d'importer les photos une par une) et la commodité (en plaçant les photos toujours à portée de la main). Pour les sites Web comportant beaucoup de photos en particulier, basés par exemple sur des modèles WebPlus, la Barre des médias est un outil précieux pour faire glisser des photos directement sur des images dont on ne veut pas et que l'on souhaite remplacer. La Barre des médias peut être utilisée pour stocker de façon temporaire des photos avant de les placer dans votre site Web ou pour créer des albums photos permanents à partir desquels vous pourrez extraire des photos à tout moment par la suite. Par défaut, les photos sont ajoutées à un album temporaire, mais n'oubliez pas de cliquer sur le bouton Nouvel album si vous voulez l'enregistrer pour l'utiliser par la suite. À chaque démarrage de WebPlus, il suffit de charger cet album enregistré (ou un autre album enregistré) ou de travailler simplement avec un album temporaire — à vous de choisir ! Vous pouvez importer un nombre illimité de photos par fichier ou par dossiers entiers et choisir si elles seront intégrées ou associées à votre site avant même de les placer sur la page. Dans les collections importantes de photos, il est possible d'effectuer une recherche sur tous les albums par nom de fichier et métadonnées EXIF, IPTC ou XMP. Il est même possible d'éditer les métadonnées XMP à l'intérieur de WebPlus. L'album chargé qui est affiché dans votre Barre des médias restera visible quel que soit le site ouvert. Vous pouvez faire glisser des miniatures directement de la Barre des médias vers une image existante sur votre page afin de la remplacer. Vous pouvez également ajouter une nouvelle image en la plaçant sur votre page à sa taille d'origine. 10.3.1.1 Pour afficher la Barre des médias : • Si elle n'est pas déjà affichée, cliquez sur la poignée en bas de l'espace de travail. 10.3.1.2 Pour ajouter des photos à un album temporaire : 1. La Barre des médias étant visible avec un album temporaire chargé, cliquez sur son espace de travail pour afficher la boîte de dialogue Importer une image. 95 WebPlus X4 Manuel d’utilisation 2. Dans la boîte de dialogue, sélectionnez un dossier puis des photos à importer. Par défaut, les photos sont associées. 3. Cliquez sur Ouvrir. Les photos apparaissent sous forme de miniatures dans l'espace de travail de la Barre des médias. Si vous ne l'enregistrez pas, l'album temporaire et les photos qu'il contient ne seront pas conservés lorsque vous fermerez WebPlus. vous pouvez faire glisser directement un ou plusieurs fichiers à partir d'un dossier quelconque de Windows verre la Barre des médias. Si vous cliquez avec le bouton droit de la souris sur une image de la barre des médias et sélectionnez Ouvrir dans l'Explorateur, le dossier de la photo s'ouvre dans l'Explorateur de Windows, ce qui est bien pratique pour un glisser-déplacer ou simplement pour la gestion générale des fichiers ! 10.3.1.3 Pour enregistrer un album temporaire en lui donnant un nom : Ajouter. Dans le menu, sélectionnez Nouvel 1. Cliquez sur la flèche vers le bas sur le bouton album. 2. Dans la boîte de dialogue Nouvel album, dans le champ Nom de l'album, saisissez un nom permettant d'identifier votre album par la suite. 3. (Facultatif) Vous pouvez modifier la résolution de toute photo (initiale ou 96 dpi) ou son état intégré/associé avant même de la placer sur la page : cliquez sur un champ de paramètre de la photo (DPI, Emplacement) et utilisez le menu déroulant de ce champ pour le modifier. Vous pouvez également modifier ces paramètres au moment où vous faites glisser l'image sur la page. 4. Cliquez sur OK. Pour inclure les photos d'un album temporaire dans album enregistré existant, cliquez sur le bouton Ajouter à et sélectionnez le nom d'un album dans le menu. 10.3.1.4 Pour créer un album doté d'un nom : Nouvel album de la barre. 1. Cliquez sur le bouton 2. Dans la boîte de dialogue, dans le champ Nom de l'album, saisissez un nom permettant d'identifier votre album pour un usage futur. 3. Cliquez sur le bouton 4. Dans la boîte de dialogue qui s'affiche, accédez à une photo ou à un dossier et choisissez éventuellement de placer les photos à leur résolution initiale ou à 96 dpi, de les intégrer ou de les associer (l'intégration accroît sensiblement la taille du fichier). Cliquez sur Ouvrir. 5. La boîte de dialogue Nouvel album répertorie les fichiers à inclure. Modifiez éventuellement les options de résolution et d'intégration/association en cliquant sur le champ de paramètre de chaque photo et en sélectionnant une valeur dans le menu déroulant correspondant. 6. Cliquez sur OK. Ajouter une image ou Ajouter un dossier. 10.3.1.5 Pour charger un album enregistré : • Sélectionnez le nom d'un album enregistré dans le menu déroulant situé dans le coin supérieur droit de la barre. Les photos de l'album s'affichent dans l'espace de travail. Vous pouvez sélectionner un album de la manière expliquée ci-dessus, puis le modifier à l'aide du bouton Gestion (affiché uniquement pour les albums enregistrés existants). Vous pouvez ajouter des photos/dossiers, supprimer des photos, modifier la résolution et changer l'état intégré/associé. 10.3.1.6 Pour renommer ou supprimer un album : • 96 Cliquez avec le bouton droit de la souris sur le nom d'un album dans le menu déroulant en haut à droite et sélectionnez Renommer l'album ou Supprimer l'album. Couleur, remplissages et transparence 10.3.1.7 Pour trier les résultats d'un album : • Dans la zone de recherche Trier par, choisissez Nom de fichier, Note ou Date de création pour réorganiser les photos dans l'ordre de votre choix. 10.3.2 Ajouter des photos à la page 10.3.2.1 Pour ajouter une photo à la page : 1. Affichez l'album temporaire de la Barre des médias ou chargez un album enregistré à partir du menu déroulant en haut à droite. 2. Faites glisser la miniature d'une photo d'un album vers la page, puis relâchez le bouton de la souris. 10.4 Définir les options d'exportation des images Lorsque vous publiez votre site, WebPlus applique des paramètres généraux pour déterminer de quelle manière chaque image (qu'elle soit dessinée, collée ou importée) devient un bitmap séparé affiché sur la page web. Voici une présentation rapide des paramètres de conversion tels que définis au départ pour la publication Web : • Chaque image référencée est exportée dans un fichier séparé. • Chaque image insérée au format .gif, .jpeg ou .png est exportée en tant que fichier d'origine et conserve son nom de fichier d'origine. • Les métafichiers insérés ainsi que toutes les autres images sont régénérés sous forme d'images PNG. Vous pouvez modifier ces paramètres mais avant de le faire, vous devez revoir la logique que WebPlus applique pour la publication d'images Web. Tout d'abord, WebPlus utilise un format par défaut dans lequel toutes les images seront converties lors de l'exportation, mais vous pouvez définir des exceptions à cette règle en spécifiant certains types d'images devant conserver leur format de fichier d'origine. Initialement, .png est le format par défaut, mais il existe un jeu de remplacements pour les .gif et les .jpeg. C'est la raison pour laquelle, si vous utilisez les paramètres d'origine ci-dessus, les images .gif ne sont pas modifiées alors que toutes les autres images sont converties au format .png. Vous pouvez vérifier et modifier ces paramètres dans la boîte de dialogue Propriétés du site (menu Fichier). Les paramètres de ce type d'images sont généraux et s'appliquent à toutes les images du site mais, là encore, vous pouvez définir des exceptions, en l'occurrence pour des images séparées. Pour ce faire, après avoir sélectionné une image, vous avez le choix entre les actions suivantes : • Utilisez Options d'exportation des images (menu Format) ou le Gestionnaire d'exportation des images (menu Outils) pour paramétrer le format d'exportation d'images particulières au cas par cas. OU Convertissez préalablement certaines images à un format spécifique en utilisant Outils/Convertir en image. Cette combinaison de paramètres globaux et locaux vous permet de contrôler pratiquement complètement (si vous vous donnez la peine de le faire) l'apparence des images dans vos pages web. Commençons par examiner les paramètres globaux. 10.4.1.1 Pour définir les options générales d'exportation de vos images Web : 1. Exécutez la commande Fichier/Propriétés du site et sélectionnez l'onglet Images. 2. Sélectionnez un format d'exportation préféré dans la section Format de fichier d'exportation. Toutes les images seront converties dans ce format à l'exportation, à moins que vous ne définissiez des exceptions. Vous pouvez attribuer des valeurs de compression aux fichiers JPG. Pour les images PNG, les options Utiliser la transparence et Rétro-compatibilité permettent respectivement d'utiliser la transparence PNG et d'obtenir une transparence alpha correcte (dans Internet Explorer 5.5 et 6.0). 3. Dans la section Rééchantillonnage, sélectionnez une méthode de rééchantillonnage pour obtenir une qualité optimale, des images plus nettes ou plus lisses, quel que soit le format ; plus la qualité est élevée, plus l'exportation est lente. Cochez l'option Ne pas rééchantillonner... pour éviter le rééchantillonnage des images lorsque la taille de l'image exportée est proche de celle d'origine. 4. Pour exporter les noms des images originales, cochez la case Utiliser les noms des images originales dans la section Attribution des noms. Les images seront alors enregistrées à la racine de votre site Web en ligne. 97 WebPlus X4 Manuel d’utilisation 5. Dans la section Optimisation, cochez la case Optimiser les imbrications d'images afin que WebPlus analyse le site et (dans le cas où un plus petit fichier serait produit) crée une seule image à partir d'une imbrication d'images. L'effet de cette option dépend de la mise en page. Plutôt que d'utiliser cette méthode globale, vous pouvez exécuter la commande Outils/Convertir en image dans certains cas. 10.4.2 Définir des options d'exportation, un titre et un texte de remplacement pour chacune des images Le Gestionnaire d'exportation des images est un assistant qui vous permet de définir le format de fichier d'exportation pour les différentes images de votre site ou pour des objets, tels que du texte ayant subi une rotation, qui seront convertis en images lors de l'exportation. Ces paramètres locaux et image par image remplacent les paramètres généraux (tels que définis avec la commande Fichier/Propriétés du site) utilisés par WebPlus pour déterminer le format d'exportation. Vous pouvez lancer l'Assistant pour vérifier une seule image sélectionnée, la page courante ou le site entier. Vous pouvez enregistrer chaque image par différentes méthodes : Utilisez l'une des deux méthodes suivantes : • Choisissez un format spécifique (GIF, JPEG ou PNG) comme format de destination (ou utilisez simplement les paramètres par défaut du site). Vous pouvez attribuer un niveau de compression aux fichiers JPEG. OU • Enregistrez le fichier à l'emplacement choisi et sous le nom défini lors de l'exportation. Vous voudrez peut-être ajouter des noms plus explicites aux images lors de l'exportation (ce qui est particulièrement utile lors de la maintenance du site Web) au lieu d'exporter les images sous des noms générés automatiquement. Laissez vos yeux décider. La meilleure solution est de conserver l'option Réglages par défaut du site pour toutes les images de départ. L'utilisation des paramètres généraux d'origine signifie que les images .gif, .jpeg et .png seront exportées sous leurs fichiers d'origine alors que les autres, notamment les formes rapides et les formes fermées, seront publiées au format .png. Affichez ensuite un aperçu de votre site et voyez si vous souhaitez modifier les paramètres généraux ou essayer un autre format spécifique pour des images données. Même si vous ne modifiez aucun paramètre de format, vous pouvez définir un titre qui apparaîtra normalement sous forme d'info-bulle lorsqu'un internaute fera passer le pointeur de sa souris sur l'image dans un navigateur. Vous pouvez également définir un texte alternatif (manuellement ou automatiquement) à des fins d'accessibilité. 10.4.2.1 Pour définir un format d'exportation, un titre et/ou un texte de remplacement : 98 1. Si vous souhaitez définir les options d'exportation d'une image spécifique, vous pouvez d'abord la sélectionner, puis choisir Options d'exportation des images dans le menu Format ou dans le menu contextuel. OU Pour définir les options d'exportation de l'ensemble des images du site, choisissez Gestionnaire d'exportation des images dans le menu Outils. 2. (Uniquement pour les utilisateurs du Gestionnaire d'exportation des images) Dans l'assistant, indiquez si vos réglages doivent porter sur l'objet sélectionné, sur la page courante ou sur le site tout entier, puis cliquez sur Continuer. L'assistant parcourt les images de la plage spécifiée et les affiche une par une avec la boîte de dialogue Options d'exportation des images. 3. Dans la section Enregistrer l'image sous de la boîte de dialogue, vous avez le choix entre les options suivantes : • Laisser WebPlus choisir le nom et le format. Le format de l'image est tel que défini dans la boîte de dialogue Propriétés du site (Images générées ; Format par défaut) ; le nom est généré de manière automatique, par exemple, wp479d0ea6. • Enregistrer dans le format suivant en laissant WebPlus choisir le nom. Cliquez sur le bouton radio GIF, JPEG ou PNG pour spécifier le format d'exportation de l'image courante. Cochez la case Réglages par défaut du site si vous souhaitez que le format par défaut associé au site soit conservé, mais que le nom de l'image soit automatiquement défini par WebPlus. Si vous sélectionnez le format JPEG, choisissez un niveau de compression dans le menu déroulant Compression. • Enregistrer sous le nom et l'emplacement choisi. Cliquez sur le bouton Sélectionner le fichier. La boîte de dialogue qui s'affiche vous permet d'exporter l'image avec son nom de fichier d'origine (activez Nom par défaut) ou choisissez un nouveau nom d'image (activez le bouton Choisir un nom et saisissez un nouveau nom de fichier). Pour chacune de ces deux méthodes, vous pouvez naviguer jusqu'au dossier dans lequel vous souhaitez enregistrer l'image exportée. Le format de fichier utilisé sera celui défini dans les paramètres par défaut du site. Vous pouvez toujours ignorer les paramètres par défaut du site en modifiant l'extension de fichier dans le champ Choisir un nom, en remplaçant par exemple .gif par .png. Couleur, remplissages et transparence 4. Activez l'option Exclure cette image de l'optimisation si vous souhaitez éviter que l'image et les images qu'elles chevauchent (le cas échéant) soient fusionnées en une seule image. 5. (Facultatif) Sélectionnez l'une des méthodes de rééchantillonnage. WebPlus peut effectuer un rééchantillonnage si cela s'avère nécessaire. Le fichier peut être toujours rééchantillonné (par exemple, lorsqu'un fichier .jpg est redimensionné) ou jamais (l'image d'origine est utilisée). Cliquez sur le bouton radio approprié. L'image est toujours rééchantillonnée en cas de changement de format. 6. Pour ajouter un titre à une image, affichez l'onglet ALT et TITLE puis saisissez le texte de votre choix. Il s'affichera lorsqu'un internaute fera passer le pointeur de sa souris sur l'image. 7. Dans le même onglet, attribuez une chaîne de texte ALT à votre image pour l'accessibilité Web. La chaîne de texte est lue par le lecteur d'écran lorsque le pointeur de la souris la survole. Vous pouvez saisir le texte dans une zone de saisie, ou bien cocher la case Utiliser le texte de la balise ALT par défaut. Si vous optez pour la deuxième solution, l'image sera exportée de la manière suivante : • Si les images sont décoratives (elles ne contiennent pas de texte), elles ne posséderont pas de balise ALT. OU • Si l'image est une image sur laquelle il est possible de cliquer, telle qu'un bouton étiqueté, (par exemple, Précédent, Suivant, etc.), le texte de l'image est automatiquement exporté sous forme de balise ALT (c'est à dire, Précédent, Suivant) et présenté à un lecteur d'écran. S'il s'agit d'une image avec titre, le texte du titre est utilisé comme balise ALT. 8. Cliquez sur OK. 10.5 Importer des images TWAIN Si votre scanner ou votre appareil photo numérique propose une prise en charge TWAIN, vous pouvez numériser des photos directement dans WebPlus à l'aide de la norme TWAIN ou enregistrer l'image numérisée, puis l'importer dans WebPlus. 10.5.1.1 Pour configurer le périphérique TWAIN pour l'importation : • Pour obtenir des instructions relatives au fonctionnement, consultez la documentation fournie avec votre scanner. 10.5.1.2 Pour importer une image numérisée : • Exécutez la commande Insertion/Image, puis sélectionnez TWAIN et Numériser dans les sous-menus pour ouvrir la boîte de dialogue de sélection de fichier. Si plusieurs périphériques compatibles TWAIN sont installés, vous devrez probablement sélectionner la source à utiliser pour la numérisation. 10.5.1.3 Pour sélectionner une source TWAIN différente en vue de la numérisation : 1. Exécutez la commande Insertion/Image, puis sélectionnez TWAIN et Sélectionner une source dans le sous-menu. 2. Déterminez le périphérique que vous souhaitez utiliser en tant que source TWAIN. 10.6 Appliquer des filtres PhotoLab Vous pouvez appliquer et gérer des filtres depuis PhotoLab, un puissant studio permettant d'appliquer des filtres de réglage et d'effets à vos images, individuellement ou en combinaison — tous les filtres sont instantanément appliqués ! PhotoLab propose les fonctionnalités clés suivantes : • Filtres de réglage Appliquez des filtres de tons, de couleur, d'objectif, et d'accentuation. • Filtres d'effet Appliquez des effets stylistiques, artistiques, de déformation, de flou, de bruit, de rendu, et divers autres effets. • Filtres de retouche Appliquez une suppression des yeux rouges, une correction des traces, un redressement, ou un recadrage. • Opération non destructrice Tous les filtres sont appliqués sans affecter l'image d'origine et peuvent être modifiés à tout moment. 99 WebPlus X4 Manuel d’utilisation • Combinaisons de filtres performantes Créez des combinaisons de filtres de réglage, de retouche et d'effet, pour la répétition d'opérations. • Masquage sélectif Appliquez des filtres à des zones sélectionnées, à l'aide de masques. • Enregistrer et gérer les favoris Enregistrez des combinaisons de filtres grâce à un onglet Favoris très pratique. • Commandes d'affichage Comparez les aperçus avant et après, grâce aux commandes des modes double écran et écran fractionné. Utilisez la commande de zoom et de déplacement pour déplacer votre image. • Commandes de verouillage Protégez vos filtres appliqués de toute modification indésirable, puis appliquez-les éventuellement à d'autres images de la sélection. L'espace de travail de PhotoLab héberge des onglets de filtres, une barre d'outils principale, ainsi qu'une pile de filtres appliqués. Les images présentes dans votre publication apparaîtront dans votre onglet Images si l'onglet est ouvert. Cet onglet est masqué par défaut dans PhotoLab, mais peut être affiché par un clic sur en bas de l'espace de travail. 10.6.1.1 Pour démarrer PhotoLab : 1. Sélectionnez l'image à laquelle vous souhaitez appliquer un filtre. 2. Cliquez sur PhotoLab dans la barre d'outils contextuelle. 10.6.2 Appliquer un filtre Les filtres sont stockés dans les onglets Favoris, Réglages et Effets de PhotoLab, qui regroupent les filtres en catégories logiques (p. ex., Retouches rapides pour des filtres de correction rapides et courants). L'onglet Favoris propose des filtres courants (individuels ou combinés). Vous pouvez les compléter avec vos filtres personnalisés. 10.6.2.1 Pour appliquer un filtre à tester : 1. Cliquez sur la miniature d'un filtre. 2. Dès qu'un filtre est sélectionné, il est temporairement inséré dans la Zone de test qui vous permet de tester librement vos paramètres personnalisés pour ce filtre ; l'image est actualisée automatiquement pour refléter vos nouveaux réglages. 3. Ajustez les glissières (ou saisissez des valeurs) pour adapter le filtre à vos besoins. Certains filtres comportent des cases à cocher, des menus déroulants et des commandes supplémentaires (Paramètres avancés, p. ex.). Tout nouveau filtre sélectionné remplace le filtre actif. Tout filtre peut être temporairement désactivé, rétabli ou supprimé de la zone de test. 100 Couleur, remplissages et transparence 10.6.2.2 Pour désa ctive r un filtre : 10.6.2.3 Pour réta blir : 10.6.2.4 Pour sup prim er : Cliquez sur puis sur pour réactiver. Cliquez sur . Toute modification est annulée et les paramètres par défaut du filtre sont rétablis. Cliquez sur . Si vous êtes sûr de vouloir conserver votre filtre, vous devrez l'ajouter à votre pile de filtres. 10.6.2.5 Pour ajouter un filtre : • Cliquez sur Valider pour accepter vos modifications. Le filtre est alors ajouté à la pile de filtres de droite, dans laquelle vous pouvez ajouter et créer des filtres supplémentaires à l'aide de la même méthode. Les réglages sont appliqués de telle manière que le dernier filtre effectué apparaît en bas de la liste et s'applique en dernier à l'image (après les autres filtres situés avant lui dans la liste). 10.6.2.6 Pour réorganiser les filtres : • Glissez-déposez votre filtre n'importe où dans la pile. Une ligne en pointillés indique l'emplacement où sera placé le filtre si vous relâchez le bouton de la souris. 10.6.3 Retoucher La barre d'outils de PhotoLab propose des outils de retouche pratiques à l'aide desquels vous pouvez corriger vos photos avant d'appliquer une correction de couleur et des effets. • Outil Yeux rouges, pour supprimer les yeux rouges sur un sujet humain. • Outil Correction de traces, pour supprimer les imperfections de la peau humaine et de la surface de matériaux. • Outil Recadrer, pour redresser et recadrer une image, ou appliquer des proportions fixes ou libres, avec une orientation Paysage ou Portrait. 10.6.4 Masquage sélectif Au lieu d'appliquer un filtre pour modifier de façon uniforme l'apparence de votre image, vous pouvez ne modifier que les zones sélectionnées. Dans PhotoLab, vous pouvez masquer des zones d'image. Dessinez pour cela des zones auxquelles vous souhaitez affecter des filtres ou que vous souhaitez laisser tel quel. 101 WebPlus X4 Manuel d’utilisation 10.6.4.1 Pour appliquer un masque : Masque, sélectionnez Nouveau masque. 1. Dans le menu déroulant 2. Dans le volet Paramètres de l'outil, sélectionnez l'outil zones en dessinant. 3. Adaptez les paramètres à vos besoins, notamment en modifiant la taille du pinceau pour dessiner des zones plus grandes ou plus complexes. Ajouter des zones pour masquer des Dans le menu déroulant Mode, remplacez Sélectionner par Protéger pour protéger les zones dessinées contre le masquage (contraire de l'option Ajouter des zones). 4. À l'aide du pointeur affiché, dessinez des zones (en vert pour un ajout, en rouge pour une protection). Supprimer des Si votre tracé n'est pas aussi précis que vous l'auriez voulu, vous pouvez cliquer sur zones, puis dessinez sur les zones peintes indésirables. 5. Cliquez sur pour enregistrer vos modifications de masquage. Le bouton de masque devient jaune lorsqu'un masque est appliqué ( ). 10.6.4.2 Pour modifier un masque : • Cliquez sur la flèche bas du bouton , sélectionnez le nom du masque puis Éditer un masque. 10.6.5 Enregistrer des favoris Si vous souhaitez conserver un paramètre de filtre spécifique (ou une combinaison de filtres) pour une utilisation ultérieure, vous pouvez l'enregistrer facilement comme favori. PhotoLab stocke tous vos favoris sous l'onglet Favoris. Vous pouvez même créer des catégories (p. ex. Mes réglages) sous l'onglet. 10.6.5.1 Pour enregistrer un ou plusieurs filtres comme nouveau favori : • Cliquez sur Enregistrer le filtre. • Dans la boîte de dialogue qui s'affiche, entrez un nom de favori et sélectionnez la catégorie dans laquelle vous souhaitez enregistrer le filtre. (Cliquez sur pour créer une catégorie) Si vous voulez organiser vos favoris en catégories personnalisées, cliquez sur l'option du Menu de l'onglet. 10.6.6 Quitter PhotoLab • Cliquez sur Ok. 10.7 Utiliser le Studio de découpe d'images Les Studio de découpe d'images est une puissant solution intégrée vous permettant de découper des objets dans leur arrière-plan. Selon la composition de vos images, vous pouvez séparer le sujet d'intérêt de son arrièreplan, soit en conservant le sujet (généralement des personnes ou des objets, etc.) ou supprimer un arrière-plan uniforme simple (ciel, studio backdrop, p. ex.). Dans les deux cas, l'image découpée résultante fait ressortir votre publication du lot. 102 Couleur, remplissages et transparence La méthode de suppression de l'arrière-plan est illustrée dans l'exemple suivant, concernant plusieurs images. L'arrière-plan blanc initial est supprimé, laissant un échiquier de transparence intermédiaire, et vous pouvez utiliser une autre image comme arrière-plan plus attrayant. Une teinte rouge est utilisée sur l'arrière-plan de la seconde image pour indiquer les zones à supprimer. 10.7.1.1 Pour ouvrir le Studio de découpe d'images : 1. Sélectionnez une image à découper. 2. Cliquez sur Studio de découpe d'images dans la barre d'outils contextuelle qui s'affiche alors. Le Studio de découpe d'images s'ouvre. 10.7.2 Choisir un format de rendu Il est essentiel de choisir un type de rendu avant de sélectionner les zones à conserver/supprimer. Avant la sélection, vous pouvez choisir comme type de rendu un bitmap à canal alpha ou à découpage vectoriel. Votre choix dépend de l'image, notamment de la netteté de ses bords. Zoomez sur votre image pour examiner ses bords et ainsi choisir le type de rendu. Nous allons maintenant observer les types de rendu et leurs différences. Type de rendu Description et utilisation Bitmap à canal alpha Pour découper des objets dont les bords ne sont pas nets. La transparence et le mélange des pixels sont utilisés sur le bord du contour pour produire des résultats professionnels avec une interférence négligeable des couleurs d'arrière-plan. Le terme "alpha" désigne le canal de transparence alpha d'une image 32 bits. Bitmap à découpage vectoriel Pour les bords plus nets. Une image découpée avec un contour de recadrage est créée. Vous pouvez ultérieurement la manipuler à l'aide des outils de recadrage. Vous pouvez éventuellement appliquer un lissage au bord de l'image mais pas supprimer la couleur d'arrière-plan. 10.7.2.1 Pour créer un bitmap à canal alpha : 1. Sélectionnez Bitmap à canal alpha dans le menu déroulant Type de rendu. 103 WebPlus X4 Manuel d’utilisation 2. (Facultatif) Déplacez la glissière Largeur pour définir le degré d'application du dégradé alpha à l'intérieur du bord de la découpe. 3. (Facultatif) Réglez la glissière Flou pour lisser le bord de la découpe. 10.7.2.2 Pour créer un bitmap à découpage vectoriel : 1. Sélectionnez Bitmap à découpage vectoriel dans le menu déroulant Type de rendu. 2. (Facultatif) Réglez la glissière Dégradé pour appliquer un bord lisse ou flou à l'intérieur du bord de la découpe. 3. (Facultatif) Réglez la glissière Lissage pour lisser le bord de la découpe. 4. (Facultatif) La glissière Décompression agit comme un décalage positif ou négatif par rapport au bord de la découpe. 10.7.3 Sélectionner les zones à conserver ou supprimer Deux pinceaux vous permettent de conserver ou supprimer des zones de l'image. Il s'agit des outils Pinceau Conserver et Pinceau Supprimer que vous pouvez utiliser individuellement ou combiner, ce qui sera généralement le cas. Avec ces deux outils, le pinceau dessine une zone à contour que vous souhaitez supprimer ou conserver (selon le type de pinceau sélectionné). Un nombre paramétrable de pixels adjacents au contour se voit appliquer un dégradé. Pour faciliter l'opération de sélection, plusieurs modes d'affichage sont disponibles pour afficher la sélection. Les boutons Original, Teinté et Transparent affiche respectivement l'image avec : Couleur d'arrièreplan • les zones de sélection uniquement • diverses teintes facilitant les sélections complexes. • les zones à sélectionner, sous forme d'un échiquier de transparence. Pour le mode Transparent, une couleur d'arrière-plan différente peut être définie (en bas du Studio) pour différencier les zones à conserver ou à supprimer. 10.7.3.1 Pour sélectionner les zones d'image à conserver/supprimer : 1. Dans le Studio de découpe d'images, cliquez sur Pinceau Conserver ou sur Supprimer à gauche de l'espace de travail du Studio. 2. (Facultatif) Sélectionnez une taille de pinceau adaptée à la zone concernée. 3. (Facultatif) Définissez une valeur de Tolérance de croissance pour agrandir automatiquement la zone sélectionnée sous le pointeur (en détectant les couleurs similaires à celles de la sélection active). Plus la valeur est élevée, plus la zone sélectionnée s'étendra. 4. À l'aide du pointeur circulaire, tracez la zone à conserver. Vous pouvez répéter l'opération jusqu'à ce que vous soyez satisfait de la sélection effectuée. Le bouton 5. 6. 104 Pinceau Annuler rétablit la dernière sélection effectuée. Si vous avez choisi un rendu bitmap à canal alpha, vous pouvez ajuster la zone à conserver/supprimer à l'aide des outils Gommer la retouche et Rétablir la retouche du Studio de découpe d'images (uniquement après l'aperçu). Les images à découpage vectoriel peuvent être découpées à l'aide des outils standard de WebPlus. Cliquez sur OK pour créer votre découpe, ou sur Annuler. Couleur, remplissages et transparence Utilisez les outils Rétablir ou votre bitmal à canal alpha après l'aperçu. Gommer la retouche pour ajuster 10.8 Ajouter des animations WebPlus permet d'ajouter plusieurs sortes d'effets d'animation spectaculaires à une page web quelconque : des textes défilants, des animations GIF (voir l'aide en ligne) et des fichiers Flash (.SWF). Vous pouvez prévisualiser l'animation et/ou personnaliser l'effet. Une fois positionnées dans votre site Web, les animations semblent statiques mais elles prendront vie lorsque le site sera exporté et qu'un visiteur affichera votre page dans un navigateur Web. 10.8.1 Textes défilants La fonction Texte défilant permet d'animer un titre ou un slogan sur un axe horizontal. 10.8.1.1 Pour créer un texte défilant : • Cliquez sur le bouton Insérer un texte défilant dans la palette Média de la barre d'outils Objets Web/, puis sélectionnez . 10.8.1.2 Pour modifier un texte défilant déjà défini : • Double-cliquez sur la bannière. La boîte de dialogue Insérer un texte défilant réapparaît et affiche les paramètres actifs. 10.8.2 Fichiers Flash Un fichier Flash (*.SWF) est une animation utilisant le format Flash™ Player. (Flash est un programme vectoriel destiné à créer et à afficher de petits fichiers sur le Web.) Des fichiers Flash peuvent être ajoutés à votre page (un peu comme une image) et s'animent sans que vous ne soyez obligé d'en afficher un aperçu dans votre navigateur (ni dans le volet d'aperçu de WebPlus). Vous pouvez les couper, copier, déplacer et redimensionner comme d'autres images. Pour obtenir un aperçu de quelques fichiers Flash, utilisez l'onglet Galerie qui propose une collection impressionnante de bannières Flash (chacune associée à des paramètres Flash déjà configurés) que vous pourrez facilement exploiter. Ces bannières sont conçues pour vous permettre de personnaliser leur aspect (texte, images et combinaison de couleurs) sans expérience préalable du format Flash. 10.8.2.1 Pour insérer un fichier Flash : 6. Insérer un fichier Flash dans la palette Média de la barre d'outils 1. Cliquez sur le bouton Objets Web. 2. Utilisez la boîte de dialogue qui s'affiche pour sélectionner le fichier Flash à ouvrir (cliquez sur Parcourir puis sélectionnez votre fichier .SWF). Cliquez sur Options d'exportation pour définir si vous le souhaitez un nom de fichier et/ou un emplacement de fichier différents. Pour maintenir l'animation séparée du fichier WebPlus (en utilisant un lien vers le fichier source), désactivez la case Intégrer les fichiers dans le site. 3. (Facultatif) Dans le volet Paramètres, cliquez sur le bouton Ajouter... (ou Modifier) pour ajouter des paramètres comme le nom ou la valeur du fichier. 4. (Facultatif) Dans la zone Fichiers supplémentaires, constituez une bibliothèque de fichiers (par exemple, des images) qui seront utilisées dans l'animation Flash. Vous n'aurez ainsi aucune peine à les retrouver. Cliquez sur le bouton Ajouter pour rechercher puis sélectionner les fichiers à ajouter (utilisez Ctrl+clic ou Maj+clic pour la sélection de fichiers contigus ou non contigus). 5. (Facultatif) La zone Afficher détermine la présentation de l'animation Flash sur votre page WebPlus. Faites des essais de réglages des options de lecture en boucle, de transparence, d'alignement, de dimension et de qualité. Cliquez sur OK. 105 WebPlus X4 Manuel d’utilisation 7. Le curseur de collage d'image apparaît. Cliquez pour insérer le fichier à une taille par défaut ou faites glisser le curseur afin d'en personnaliser la taille. 10.8.2.2 Pour modifier une bannière Flash : • Double-cliquez sur votre animation Flash 10.9 Ajouter du son et de la vidéo WebPlus permet d'enrichir vos pages Web de fichiers audio et vidéo dans divers formats standard, en flux continu (streaming) ou non. En outre, WebPlus vous permet d'inclure dans votre site des vidéos d'autres personnes déjà hébergées sur www.youtube.com. 10.9.1 Son • En fait, PagePlus propose deux options de lecture audio : son d'arrière-plan, dans laquelle un son est chargé et lu automatiquement lorsqu'une page donnée est affichée pour la première fois dans le navigateur du visiteur, et son associé, déclenché par un clic (sur une icône ou un objet avec lien hypertexte par exemple). Les formats audio pris en charge sont les suivants : .AIFF, .AU, MIDI (.mid, .midi), .MP3, RealAudio (.ra, .ram) et .WAV. 10.9.2 Vidéo • La vidéo associée fonctionne comme le son associé. Les formats vidéo associés sont les suivants : .avi, QuickTime (.mov, .qt), MPEG (.mpg, .mpeg, .mpe, .mpv) et RealVideo (.ram, .rv). (Les fichiers qui ne sont pas en flux continu doivent être totalement téléchargés sur l'ordinateur de l'utilisateur avant de pouvoir être lus, alors que les fichiers en flux continu (streaming) nécessitent un lecteur spécial qui place les données en mémoire tampon au fur et à mesure de leur arrivée et peut les lire avant que la totalité du clip soit téléchargée.) • Vous pouvez inclure sur votre page Web des vidéos YouTube déjà publiées sur Internet. Les vidéos ellesmêmes ne sont pas intégrées dans votre projet. Lorsque vous placez une vidéo YouTube sur votre page, c'est son identifiant unique qui y est intégré. Il s'agit d'un lien créé sur votre page Web qui renvoie vers le site www.youtube.com. Cette méthode vous permet d'ajouter du contenu multimédia à votre page Web sans devoir publier de vidéos volumineuses. Grâce au son d'arrière-plan et au son associé (ou vidéo associée), vous avez la possibilité d'intégrer le fichier source à votre site, au lieu de le conserver séparément (rappelez-vous qu'il est impossible d'intégrer des vidéos YouTube à votre site). Même si l'intégration d'un fichier augmente la taille du site, il s'agit de l'option par défaut car elle évite de jongler entre des fichiers séparés et donc élimine tout risque de suppression involontaire de l'un d'entre eux. Lors de la publication de votre site, WebPlus se charge de l'exportation et de la copie des fichiers intégrés et non intégrés. 10.9.2.1 Pour ajouter un son d'arrière-plan sur une page : 4. 106 1. Dans l'espace de travail, cliquez avec le bouton droit de la souris sur la page et sélectionnez Propriétés de la page. 2. Sous l'onglet Effets, cochez Utiliser un fichier son, puis, dans la boîte de dialogue Ouvrir, recherchez le fichier audio à ajouter. Lorsque vous l'avez sélectionné, cliquez sur OK. 3. Si vous ne souhaitez pas intégrer le fichier, désactivez l'option Intégrer le fichier son au site. Pour que le son soit lu en boucle, cochez Son en boucle. Dans le cas contraire, le son ne sera lu qu'une seule fois. Couleur, remplissages et transparence 5. (Facultatif) Configurez les Options d'exportation... de manière à attribuer un nom et un emplacement physique au fichier exporté (reportez-vous à Définir les options d'exportation des images.) 6. Cliquez sur OK. Le fichier son est téléchargé et lu lorsque la page Web est affichée dans un navigateur. Vous devez prévoir comment le visiteur pourra démarrer la lecture d'un fichier média donné. WebPlus propose les mêmes options de base pour les deux types de média : • À partir d'un objet (ou d'une zone dynamique) avec un lien hypertexte :vous commencez avec un objet existant du site et vous lui attribuez un lien hypertexte pointant sur le fichier média ou vous utilisez une zone dynamique sur une image. • À partir d'une miniature vidéo : vous cliquez sur la miniature d'une vidéo intégrée pour lancer la lecture de la vidéo (vidéos YouTube uniquement). • À partir d'une icône : WebPlus propose une icône pré-associée au fichier média. Vous positionnez alors l'icône sur votre page. • À partir d'une image : vous sélectionnez un fichier image externe que WebPlus importe et associe ensuite au fichier média. • Ancré : un lecteur de média apparaît sur votre page Web publiée (plutôt que d'apparaître une fois que l'utilisateur a cliqué sur un lien, une icône ou une image). Dans WebPlus, un marqueur apparaît sur la page à l'emplacement du lecteur. Avec les deux premières options, le fichier média reste externe et ne peut pas être intégré au site. Les options 3 à 5 vous offrent la possibilité d'intégrer le fichier média. 10.9.2.2 Pour ajouter un son ou une vidéo associée à un objet ou une zone dynamique : Lien hypertexte dans la barre d'outils 1. Sélectionnez l'objet ou la zone dynamique puis cliquez sur verticale. 2. Dans la boîte de dialogue, sélectionnez Fichier pour créer un lien hypertexte vers un fichier son sur votre disque dur 3. Cliquez sur Parcourir, recherchez le fichier média à utiliser, puis cliquez sur Ouvrir. 4. Si vous ne souhaitez pas intégrer le fichier, désactivez l'option Intégrer l'image au site. 5. (Facultatif) Configurez les Options d'exportation... de manière à attribuer un nom et un emplacement physique au fichier exporté (reportez-vous à Définir les options d'exportation des images.) 6. Toute une gamme de fenêtres ou de cadres peut être choisie selon la manière dont vous souhaitez afficher la destination du lien. (Reportez-vous à Ajouter des liens hypertextes et des ancres.). 7. Cliquez sur OK. 10.9.2.3 Pour intégrer une vidéo YouTube : 1. Ouvrez le site Web www.youtube.com dans votre navigateur et choisissez la vidéo YouTube que vous souhaitez associer à votre page. 2. Copiez l'adresse URL de la vidéo (ou le code d'intégration). Ils contiennent un identifiant alphanumérique, par exemple ySnp4YXU6JQ, qui identifie le clip vidéo de manière unique. 3. Cliquez sur le bouton Intégrer une vidéo YouTube dans la palette Média de la barre d'outils Objets Web. OU Choisissez Média dans le menu Insertion, puis Vidéo YouTube dans le sous-menu. 4. Dans la boîte de dialogue, collez dans la zone de saisie l'URL de la vidéo. 5. (Facultatif) Cochez/décochez les cases pour activer/désactiver les options suivantes : • Démarrage automatique Lit automatiquement la vidéo une fois la page chargée. 107 WebPlus X4 Manuel d’utilisation • Boucle Lit la vidéo en boucle continue. • Afficher les infos sur la vidéo Affiche le titre et la note de la vidéo. • Autoriser le mode Plein écran Ajoute à la fenêtre de la vidéo un bouton permettant à l'utilisateur de visionner la vidéo en mode Plein écran. • Inclure les vidéos associées (Si l'option Boucle est cochée, la fonction Inclure les vidéos associées est automatiquement désactivée. Pour l'activer, vous devez désactiver la case à cocher Boucle.) Affiche, à la fin de la vidéo, les vidéos recommandées associées au contenu de la vidéo en cours de lecture sur votre page. Affiche également une barre de recherche permettant à l'utilisateur de parcourir et de lire d'autres vidéos YouTube sur votre site. • Lire en HD Lit la vidéo en haute définition (si l'option est disponible). • Afficher la bordure Ajoute une bordure autour de la fenêtre de la vidéo video window. Cliquez sur les deux boutons pour accéder aux menus déroulants et sélectionnez jusqu'à deux couleurs. 6. Cliquez sur OK. Positionnez le curseur gauche de votre vidéo. Coller à l'endroit où vous souhaitez placer le coin supérieur 7. Pour insérer la vidéo à une taille par défaut, cliquez une fois sur la page. OU Pour définir la taille de la vidéo insérée, faites glisser le pointeur puis relâchez le bouton de la souris. Vous pouvez conserver les proportions en maintenant la touche Maj enfoncée pendant que vous faites glisser le pointeur. Sur certains sites Web, il peut être nécessaire que la ou les vidéos YouTube soient remplacées par une autre de manière occasionnelle ou régulière. Par exemple, le site peut contenir un "top 10" de vidéos qui change régulièrement ou bien des vidéos concernant l'actualité. Dans tous les cas, WebPlus peut remplacer les vidéos sans modifier leur emplacement sur la page. Pour remplacer votre vidéo YouTube par une autre, double-cliquez sur une vidéo YouTube existante. Dans la boîte de dialogue, collez dans la zone de saisie une URL de vidéo que vous avez préalablement copiée. 10.9.2.4 Pour créer un lien à partir d'un bouton, d'une image ou d'un lecteur ancré : 5. 108 1. Cliquez sur le bouton Insérer un son ou barre d'outils Objets Web. Insérer une vidéo dans la palette Média de la 2. Parcourez vos dossiers pour localiser le nom du fichier média. 3. Sélectionnez une option d'affichage du lien (bouton, lecteur ou image). 4. Si vous ne souhaitez pas intégrer le fichier, désactivez l'option Intégrer l'image au site. Cliquez sur OK pour fermer la boîte de dialogue, puis cliquez (ou cliquez et faites glisser le pointeur) pour positionner l'icône, l'image ou le marqueur sur votre page. Couleur, remplissages et transparence 11 Couleur, remplissages et transparence 11.1 Appliquer des couleurs unies Vous pouvez utiliser l'onglet Couleur, l'onglet Échantillons ou une boîte de dialogue pour appliquer des couleurs unies à un objet. Les boutons d'échantillons des onglets proposent plusieurs méthodes permettant d'appliquer des couleurs unies sur différents types d'objets : • Vous pouvez appliquer des couleurs unies au contour ou au remplissage d'un objet. Comme vous pouvez l'imaginer, les formes rapides et les formes fermées (reportez-vous à Dessiner et éditer des formes ) ont à la fois des propriétés de contour et de remplissage. • Les lignes à main levée ou les courbes peuvent adopter des couleurs de contour mais également une couleur de remplissage pour créer des formes fermées directement à partir de la ligne. • Le texte artistique et les zones de texte créatives peuvent adopter un remplissage d'arrière-plan, un contour et une couleur de texte. La couleur de texte correspond au remplissage du texte, le remplissage d'arrière-plan est la zone située immédiatement derrière le texte. Une zone de texte HTML applique uniquement un remplissage d'arrière-plan et une couleur de texte. • Les zones de texte (illustration) et les cellules des tableaux peuvent posséder un remplissage d'arrièreplan indépendant des caractères qu'elles contiennent. 11.1.1.1 Pour appliquer une couleur unie à l'aide de l'onglet Couleur : 1. Sélectionnez le(s) objet(s) ou mettez en surbrillance un ensemble de texte. 2. Cliquez sur l'onglet Couleur et sélectionnez l'un des différents modes colorimétriques (RVB, CMJN ou TSL) dans la liste déroulante. 3. Cliquez sur le bouton Remplissage, Contour ou Texte en haut de l'onglet pour déterminer l'emplacement où la couleur sera appliquée. La couleur du trait de soulignement indique celle de l'objet sélectionné. Pour la zone de texte sélectionnée, la couleur de remplissage correspond à la couleur d'arrière-plan du texte (et non pas à la couleur d'arrière-plan de la zone). 4. Sélectionnez une couleur dans le spectre des couleurs ou utilisez les glissières en fonction du mode couleur sélectionné. En mode couleur RVB, vous pouvez utiliser les codes de couleur hexadécimaux. Pour ce faire, sélectionnez le bouton Menu des onglets de l'onglet Couleur. 11.1.1.2 Pour appliquer une couleur unie à partir de l'onglet Échantillons : 1. Sélectionnez le(s) objet(s) ou mettez en surbrillance un ensemble de texte. 2. Cliquez sur l'onglet Échantillons. 109 WebPlus X4 Manuel d’utilisation 3. Cliquez sur le bouton Remplissage, Contour ou déterminer l'emplacement où la couleur sera appliquée. Texte en haut de l'onglet pour 4. Sélectionnez un échantillon de couleur dans la Palette de publication (couleurs fréquemment utilisées et couleurs déjà appliquées à votre site) ou dans la Palette standard (couleurs standard RVB ou thèmes prédéfinis tels que WebSafe (couleurs optimisées pour le Web)). Vous pouvez également utiliser la commande Format/Remplir pour appliquer une couleur à partir d'une boîte de dialogue. 11.1.1.3 Pour modifier la teinte rabattue/dégradée d'une couleur unie (luminosité) : 1. Sélectionnez l'objet et cliquez sur le bouton Remplissage, Contour ou Texte adéquat dans l'onglet Couleur. 2. Dans le menu de sélection du mode colorimétrique, sélectionnez Teinte. 3. Déplacez la glissière Ombre/Teinte vers la gauche ou vers la droite pour foncer ou éclaircir la couleur de départ. Vous pouvez également saisir un pourcentage dans le champ (saisissez 0 dans la zone de saisie pour revenir à la couleur d'origine). Vous pouvez également paramétrer la teinte des objets en utilisant l'onglet Échantillons : réglez le pourcentage de la teinte à l'aide des glissières ou par saisie directe. WebPlus ajoute automatiquement les couleurs utilisées à la Échantillons. Palette de publication située dans l'onglet 11.1.1.4 Pour modifier la palette active : • Cliquez sur le bouton Palette pour afficher et adopter des couleurs à partir d'une palette RVB standard, d'une palette Websafe, ou d'une sélection de palettes thématiques. Vous pouvez ajouter, modifier et supprimer des couleurs de la Palette de publication, mais pas des autres palettes. 11.2 Utiliser des combinaisons de couleurs WebPlus fournit une impressionnante sélection de combinaisons de couleurs que vous pouvez sélectionner pour créer un site à partir d'un modèle. Si vous choisissez un site basé sur un modèle, la sélection d'une combinaison de couleurs définira l'apparence de votre site en terme de couleurs, car tous les modèles sont déjà associés à des combinaisons. Les sites Web créés à partir d'un modèle peuvent soit utiliser l'une des trois combinaisons conçues spécifiquement pour ce modèle, soit utiliser simplement les combinaisons de couleurs globales. Les sites Web créés de toutes pièces utilisent des combinaisons de couleurs proposées globalement. Bien sûr, vous pouvez toujours utiliser une combinaison de couleurs mais vous devrez affecter une combinaison aux objets lorsque vous les créez. Les couleurs seront radicalement modifiées si vous modifiez ultérieurement les combinaisons de couleurs. Vous pouvez à tout moment modifier la combinaison de couleurs à l'aide du Gestionnaire de combinaisons grâce auquel vous modifiez les couleurs et créez même vos combinaisons de couleurs personnalisées. 110 Couleur, remplissages et transparence Les combinaisons qui ont été modifiées sont stockées sur le site. Vous pouvez toutefois enregistrer globalement les combinaisons personnalisées, ce qui vous permet d'utiliser à tout moment le jeu de combinaisons complet pour de nouveaux sites. 11.2.1 Comment fonctionnent les combinaisons de couleurs ? Dans WebPlus, la combinaison de couleurs fonctionne comme un jeu de "peinture avec des cases numérotées" : les différentes zones d'une présentation sont codées à l'aide de petits numéros et une couleur de base spécifique est affectée à chaque zone (par un numéro). À titre d'exemple, imaginez le pétale ci-contre, libellé avec des numéros allant de 1 à 5. Pour le remplir, vous utiliserez des pots de peinture numérotés de 1 à 5. En intervertissant les couleurs et en conservant les mêmes numéros sur le dessin, vous pourrez produire automatiquement un pétale de couleur différente. Chaque combinaison comprend également des couleurs supplémentaires appliquées spécifiquement aux liens hypertextes (par défaut H, visités F, actifs A, survolés R), à l'arrière-plan du navigateur (couleur visible au-delà de la page) (B), et aux couleurs des pages ellesmêmes (O). Une seule combinaison de couleurs peut être active sur chaque site ; la combinaison de couleurs du site s'affiche toujours sous l'onglet Échantillons. Lorsque vous enregistrez un site, sa combinaison de couleurs active est enregistrée avec le site. 11.2.1.1 Pour sélectionner une combinaison de couleurs prédéfinie : 1. Cliquez sur Gestionnaire de combinaisons dans la barre d'outils contextuelle par défaut. - ou Ouvrez l'onglet Échantillons pour afficher la combinaison de couleur active, p. ex. Cliquez sur le bouton 2. . Sous l'onglet Combinaisons de couleurs de la boîte de dialogue, double-cliquez sur l'échantillon d'une autre combinaison dans la liste (ou cliquez sur Charger), puis sur OK. Tous les éléments du site qui ont été associés à l'un des cinq numéros de couleur de la combinaison sont mis à jour avec la couleur correspondante dans la nouvelle combinaison. Les couleurs supplémentaires sont également mises à jour. Vous pouvez répéter ce processus de sélection à l'infini. 11.2.2 Couleurs supplémentaires Outre cinq couleurs de base, chaque combinaison comprend six couleurs supplémentaires qui contrôlent la couleur en fonction de l'interactivité du lien hypertexte ; la couleur de la page et les arrière-plans hors page (fenêtre) sont également affectés. Ces couleurs supplémentaires peuvent être modifiées pour les couleurs 1-5, à l'exception de la couleur/l'image d'arrière-plan et de la couleur de la page. • La couleur du lien hypertexte (libellée H) s'applique au texte souligné avant qu'il n'ait été activé par un clic. • La couleur Lien hypertexte suiv. (libellée F), s'applique au texte du lien après qu'un internaute a cliqué sur celui-ci pour "suivre" le lien. 111 WebPlus X4 Manuel d’utilisation • La couleur Lien hypertexte actif (libellée A) s'applique au texte du lien lorsqu'un internaute enfonce le bouton de la souris sur le lien. Il s'agit généralement de la couleur affichée après le clic et avant que la page vers laquelle le lien pointe ne soit affichée. • La couleur Lien hypertexte survolé (libellée R) s'applique au texte du lien lorsqu'un visiteur passe dessus avec sa souris. • La couleur d'arrière-plan (libellée B) s'applique soit à une couleur, soit à une image d'arrière-plan, visible au-delà de la page lorsque l'utilisateur redimensionne la fenêtre du navigateur et que celle-ci est de plus grande taille que la page Web. • La couleur de la page (libellée O), est utilisée pour remplir l'arrière-plan de la page. Si vous la paramétrez de sorte qu'elle soit transparente, l'arrière-plan sous-jacent défini apparaît et les limites de la page deviennent invisibles (le contenu reste limité aux dimensions de la page). 11.2.3 Appliquer des couleurs de combinaisons à des objets Si vous créez des objets dans un modèle de site Web ou si vous créez un site de toutes pièces, comment faire pour appliquer une combinaison de couleurs aux nouveaux objets ? Bien que vous deviez passer du temps à essayer les combinaisons de couleurs les plus adaptées, le processus est simple. En reprenant l'exemple de la peinture par numéros décrit ci-dessus, vous devez simplement attribuer l'une des cinq couleurs de la combinaison au contour et/ou au remplissage d'un objet. 11.2.3.1 Attribuer une couleur de combinaison à un objet : 1. Sélectionnez l'objet et cliquez sur le bouton Remplissage, haut de l'onglet Échantillons selon l'effet souhaité. Contour ou Texte en 2. Dans la partie inférieure de l’onglet Échantillons, cliquez sur une combinaison de couleurs (numérotées de 1 à 5) à appliquer au remplissage, au contour et au texte (vous pouvez également faire glisser-déplacer la couleur). Si le remplissage d'un objet utilise une couleur d'une combinaison, l'échantillon correspondant dans l'onglet Échantillons est mis en surbrillance lorsque l'objet est sélectionné. 11.2.4 Modifier les combinaisons de couleurs Si, après avoir testé différentes combinaisons de couleurs, vous n'en avez trouvé aucune qui convienne, vous avez la possibilité de modifier les couleurs d'une combinaison existante. 11.2.4.1 Pour modifier une combinaison de couleurs : Gestionnaire de combinaisons dans la barre d'outils contextuelle par défaut. 1. Cliquez sur 2. Sous l'onglet Combinaisons de couleurs, sélectionnez la combinaison à modifier (double-cliquez sur une combinaison ou cliquez sur Charger). 3. Dans la boîte de dialogue, chacun des cinq numéros de la combinaison de couleurs (plus les couleurs supplémentaires) comporte un menu déroulant illustrant les couleurs disponibles dans la palette WebPlus. Cliquez sur la flèche du menu déroulant et sélectionnez une couleur (ou cliquez sur Plus de couleurs... pour accéder à un plus grand choix de couleurs). La nouvelle couleur s'applique à la combinaison. Répétez l'opération pour modifier d'autres couleurs de la combinaison. 4. Cliquez sur OK pour appliquer la combinaison au site actif. La combinaison de couleurs du site est alors mise à jour. Le bouton Modifier vous permet de sélectionner une image à combinaisons à utiliser comme arrière-plan de la fenêtre du navigateur . Pour créer une combinaison basée sur ces couleurs, cliquez sur Enregistrer sous.... Vous pouvez aussi sélectionner Enregistrer pour écraser la combinaison existante. 112 Couleur, remplissages et transparence Pour une conception plus avancée à l'aide de combinaisons de couleurs recommandées, reportez-vous à l'aide en ligne. 11.3 Utiliser les remplissages en dégradé et bitmap Les remplissages dégradés apportent une progression de l'étendue du spectre entre plusieurs points d'un objet. Un remplissage en dégradé comporte une trajectoire modifiable constituée de nœuds marquant l'origine de chacune de ces couleurs clés. Un remplissage bitmap utilise une image bitmap dotée d'un nom, souvent une image représentant un matériau, un motif ou un arrière-plan pour remplir un objet. Linéaire Elliptique Conique Bitmap Vous pouvez appliquer un remplissage en dégradé ou bitmap prédéfini à des formes, des zones de texte, des table cellules de tableaux, du texte artistique, des zones créatives et des tableaux créatifs à partir de l'onglet Échantillons (mais ni à des zones de texte HTML ni à des tableaux HTML). Vous pouvez utiliser l'outil Remplissage disponible dans la palette Remplissage de la barre d'outils verticale (ou exécuter la commande Format/Remplir) pour modifier la trajectoire du remplissage sur un objet dans le but d'obtenir différents effets (voir l'aide en ligne). L'application de différents effets de transparence (à l'aide de l'onglet Transparence) n'affecte en rien les paramètres de remplissage de l'objet, mais peut modifier de façon significative l'aspect réel du remplissage. 11.3.1 Appliquer un remplissage dégradé ou bitmap Il existe plusieurs manières d'appliquer un remplissage en dégradé ou bitmap : vous pouvez utiliser l'onglet Échantillons, l'outil Remplissage ou une boîte de dialogue. La manière la plus simple d'appliquer un remplissage en dégradé ou un remplissage bitmap consiste à utiliser l'une des miniatures échantillons disponibles dans la palette Dégradé ou Bitmap de l'onglet Échantillons. L'outil Remplissage et la boîte de dialogue Remplir sont des méthodes alternatives permettant de créer des remplissages en dégradé (ces méthodes sont abordées dans l'aide en ligne). 11.3.1.1 Pour appliquer un remplissage dégradé ou bitmap à l'aide de l'onglet Échantillons : 1. Cliquez sur l'onglet Échantillons et vérifiez que le Remplissage est activé. La couleur du soulignement est celle de l'objet sélectionné. 2. Pour les remplissages en dégradé, sélectionnez Linéaire, Elliptique ou Conique comme type de dégradé dans le menu déroulant du bouton Dégradé. OU Pour les remplissages bitmap, sélectionnez une catégorie dans le menu déroulant du bouton Bitmap. 3. Sélectionnez le ou les objets et cliquez sur l'échantillon de remplissage approprié dans la galerie. OU Faites glisser l'échantillon depuis la galerie vers l'objet et relâchez le bouton de la souris. 4. Si nécessaire, réglez la Teinte du remplissage en bas de l'onglet à l'aide de la glissière ou définissez la valeur d'un pourcentage dans le champ de saisie. Voir Mettre à jour et enregistrer les paramètres par défaut pour plus d'informations. 11.4 Définir la transparence Les effets de transparence sont très utiles en termes de représentation des ombres, des tons clairs et des tons foncés, et de simulation d'un rendu réaliste. Ils peuvent faire toute la différence entre des illustrations plates et des images ayant de la profondeur et du mouvement. WebPlus prend totalement en charge la transparence variable et vous permet d'appliquer facilement des transparences unies, en dégradé, ou bitmap. 113 WebPlus X4 Manuel d’utilisation La transparence fonctionne plutôt comme un remplissage utilisant une encre invisible à la place de la couleur. À un endroit donné, plus on applique de transparence, plus les objets situés en dessous réapparaissent. Tout comme un remplissage en dégradé peut varier du clair vers le foncé, la transparence peut varier plus ou moins, être translucide ou opaque, comme sur l'illustration : (A) Transparence linéaire Dans WebPlus, le fonctionnement des effets de transparence ressemble fortement à celui des remplissages en niveaux de gris. Tout comme les remplissages... • Pour appliquer des effets de transparence, utilisez le Studio, plus précisément l'onglet Transparence des galeries de type uni, dégradé et bitmap. • La galerie de l'onglet Transparence comporte des miniatures en niveaux de gris, où les parties les plus claires représentent une transparence plus importante. Pour appliquer une transparence, cliquez sur les miniatures ou faites-les glisser sur les objets. • La majorité des effets de transparence possède une trajectoire que vous pouvez modifier à l'aide de l'outil Transparence. 11.4.1 Appliquer de la transparence Vous pouvez appliquer une transparence en dégradé ou une transparence bitmap à des formes, des zones de texte, des cellules de tableaux, du texte artistique, des zones créatives et des tableaux créatifs à partir de l'onglet Transparence (mais ni à des zones de texte HTML ni à des tableaux de texte HTML). 11.4.1.1 Pour appliquer de la transparence à l'aide de l'onglet Transparence : 1. Après avoir sélectionné l'objet, ouvrez l'onglet Transparence. 2. Pour une transparence unie, cliquez sur le bouton Uni et choisissez une miniature dans la galerie des transparences unies. Les miniatures plus claires représentent davantage de transparence (exprimée en pourcentage d'opacité). OU : Pour une transparence en dégradé, cliquez sur le bouton OU Pour une transparence bitmap, cliquez sur le bouton une gamme de catégories. 3. Dégradé et choisissez une miniature. Bitmap et choisissez une miniature parmi L'effet de transparence est appliqué à l'objet. Vous pouvez également faites glisser la miniature de votre choix depuis la galerie vers l'objet, puis relâcher le bouton de la souris. 11.4.1.2 Pour appliquer une transparence en dégradé à l'aide de l'outil Transparence : 114 1. Sélectionnez un objet en couleur. 2. Cliquez sur le bouton Outil Transparence dans la palette Transparence de la barre d'outils verticale. - ou Sélectionnez Format/Transparence. Couleur, remplissages et transparence 3. Faites glisser votre pointeur sur l'objet et relâchez le bouton de la souris. L'objet se voit appliquer une transparence linéaire simple, avec un dégradé de 100 % à 0 % d'opacité (totalement transparent). 11.4.2 Définir la transparence par défaut La transparence par défaut est la transparence qui sera appliquée au prochain objet créé. Les paramètres par défaut locaux ne s'appliquent qu'aux objets du site en cours. Sur le réglage des paramètres par défaut dans WebPlus, voir Mettre à jour et enregistrer les paramètres par défaut. 115 12 Ajouter des liens hypertextes et de l'interactivité 12.1 Ajouter des liens hypertextes et des ancres Si vous ajoutez un lien hypertexte à un objet tel qu'une forme, un mot ou une image, le visiteur de votre site peut cliquer sur cet objet pour déclencher un événement. L'événement est généralement un saut vers un élément qui peut être : • page d'un site ; • page Internet ; • une fenêtre de composition d'un message électronique ; • un fichier sur le disque dur local ou sur le réseau ; • une ancre (cible désignée à l'intérieur d'une page Web) ; • un objet intelligent (plus spécifiquement un forum, un blog ou le SGC sur le serveur de ressources Web Serif) ; • un flux RSS ou un podcast ; • un panier d'achat ; • une barre de navigation ; • des données sur l'utilisateur ; • un image. Les liens hypertextes, lorsqu'ils sont appliqués méthodiquement, constituent un aspect essentiel de la structure d'un site. En effet, ils permettent aux visiteurs de naviguer sur votre site et complètent parfaitement les liens logiques entre ses différentes pages, à savoir l'arborescence du site. (Mais ne sous-estimez pas le temps gagné grâce à l'utilisation de barres de navigation.) Vous pouvez gérer l'ensemble des liens hypertextes et des ancres compris dans votre site par l'intermédiaire du Gestionnaire de site accessible par le biais de la barre d'outils contextuelle ou la barre d'état. 12.1.1.1 Pour ajouter un lien hypertexte : 1. À l'aide de l'outil Pointeur, sélectionnez l'objet ou le groupe d'objets ou mettez en surbrillance la plage de texte qui doit être lié par un lien hypertexte. 2. Cliquez sur le bouton Lien hypertexte de la barre d'outils verticale. La boîte de dialogue Liens hypertextes s'ouvre. 3. Sélectionnez le type de destination du lien, puis saisissez la cible du lien hypertexte (par exemple une page de site, une page Internet, un objet intelligent, une adresse e-mail, etc.) 4. Sélectionnez les options spécifiques du type de lien 5. Toute une gamme de fenêtres ou de cadres peut être choisie selon la manière dont vous souhaitez afficher la destination du lien. Selon les résultats attendus, vous avez le choix entre les types suivants : • Même fenêtre : la destination du lien apparaît dans la fenêtre qui contenait le lien sur lequel vous avez cliqué. • Nouvelle fenêtre : la destination du lien est affichée dans une nouvelle fenêtre dont les propriétés (dimensions, position ou utilisation d'une barre de navigation) peuvent être définies à l'aide du bouton Paramètres. La fenêtre initiale reste ouverte. • Haut de la fenêtre courante: la destination du lien s'affiche dans la fenêtre de premier niveau. Destiné aux liens créés à l'intérieur d'un cadre sur une page (ou dans un cadre à l'intérieur d'un cadre). 116 Ajouter des liens hypertextes et de l'interactivité • Fenêtre parente : la destination du lien apparaît dans le cadre parent ou la fenêtre parent du cadre qui contenait le lien sur lequel vous avez cliqué. Destiné aux liens créés à l'intérieur d'un cadre sur une page (ou dans un cadre à l'intérieur d'un cadre). (Voir l'aide en ligne.) • Fenêtre nommée : une fenêtre personnalisée peut être définie par la saisie d'un nouveau nom de fenêtre dans le menu déroulant de droite. Ses propriétés (dimensions, position et apparence) peuvent être définies à l'aide du bouton Paramètres (cochez tout d'abord la case Utiliser du code JavaScript pour la popup). Vous pouvez également utiliser une fenêtre nommée existante dans le même menu déroulant. • Cadre du document : la destination du lien s'affiche dans un cadre déjà créé (à l'aide de l'outil Cadre flottant). L'identifiant HTML (par exemple ifrm_1) de tout cadre existant se sélectionne dans le menu déroulant de droite. (Voir l'aide en ligne). Si la destination du lien est un cadre de document actif, sélectionnez le cadre actif dans la liste déroulante Ouvrir dans la fenêtre du document actif. Si le cadre souhaité ne s'affiche pas dans la liste, vous devez l'activer : pour ce faire, double-cliquez sur le cadre et cochez la case Cadre du document actif. 6. Vous pouvez définir d'autres propriétés, telles que le titre (texte qui s'affiche à l'écran lorsque l'utilisateur place le pointeur de la souris sur le lien) et une touche de raccourci. Remarque :Comme aide visuelle, notez que les mots auxquels un lien hypertexte a été appliqué sont soulignés et qu'ils apparaissent dans la couleur définie dans le Gestionnaire de combinaisons ou ailleurs (voir la rubrique Utiliser des combinaisons de couleurs). 7. Cliquez sur OK. 12.1.1.2 Pour modifier ou supprimer un lien hypertexte : 1. À l'aide de l'outil Pointeur, sélectionnez l'objet ou cliquez pour afficher un point d'insertion au sein du texte vers lequel le lien doit pointer. (Il n'est pas nécessaire de déplacer le lien hypertexte en dehors du texte.) 2. Cliquez sur le bouton verticale. Lien hypertexte dans la palette Lien hypertexte de la barre d'outils La boîte de dialogue Liens hypertextes apparaît et indique la cible du lien hypertexte actif. Si le lien se trouve dans le texte, il se met en surbrillance. • Pour modifier le lien hypertexte, sélectionnez un nouveau type de destination, de cible et/ou de nouvelles options. • Pour supprimer le lien hypertexte, cliquez sur le bouton Aucun lien hypertexte. 12.1.1.3 Pour afficher ou modifier un lien hypertexte existant : • Sélectionnez Gestionnaire de site/Gestionnaire de liens hypertextes dans le menu Outils pour afficher, renommer ou supprimer un lien hypertexte. 12.1.2 Insérer une ancre Une ancre est un emplacement spécifique au sein d'une page, qui correspond à la destination d'un lien hypertexte. Invisible pour le visiteur de la page Web, elle marque généralement un point précis au sein d'un texte (par exemple, le début d'une section) ou une image plus bas sur la page. Les ancres s'avèrent particulièrement utiles si le contenu de votre page est suffisamment long pour être divisé en différentes sections mais pas suffisamment pour être réparti sur des pages séparées. Ainsi, le lecteur peut accéder directement au contenu associé sans quitter la page consultée. De même, permettre aux visiteurs de rester sur une même page évite le risque de les "perdre" pendant la consultation des informations sur votre site. 12.1.2.1 Pour insérer une ancre : 3. 1. À l'aide de l'outil Pointeur, sélectionnez l'objet cible ou cliquez pour afficher un point d'insertion à l'intérieur du texte cible. 2. Cliquez sur le bouton Ancre dans la palette Lien hypertexte de la barre d'outils verticale. OU Choisissez Ancre dans le menu Insertion ou le menu contextuel. Dans la boîte de dialogue qui s'affiche, attribuez un nom à l'ancre, puis cliquez sur OK. 117 WebPlus X4 Manuel d’utilisation 4. (Facultatif) Activez l'option Inclure l'ancre dans la navigation pour faire en sorte que l'ancre (généralement l'objet sélectionné) soit accessible par le biais d'une barre de navigation, et non par le biais d'un lien hypertexte. Vous devez au préalable activer l'option Inclure les ancres au niveau de votre barre de navigation. Définissez l'intitulé de l'ancre. • Cochez Avant et/ou Après pour appliquer des lignes horizontales au-dessus/en dessous de l'ancre en tant qu'élément de sous-menu dans les barres de navigation. • Ajoutez une Description pour ajouter du texte relatif à la page sur l'élément de sous-menu de la barre. 5. Cliquez sur Supprimer pour supprimer l'ancre de façon méthodique, c'est-à-dire en intervenant également les liens hypertextes qui renvoient à cette ancre (vous pouvez décider de les ignorer, de les supprimer ou de modifier leur cible). 6. Cliquez sur OK. Les ancres sont spécifiques à une page. Vous pouvez donc parfaitement utiliser le même nom d'ancre sur différentes pages. WebPlus crée automatiquement des noms d'ancre par séries pour chaque page, utilisant des préfixes pour chaque type d'objet. Cependant, il peut s'avérer plus simple de gérer vos ancres sur l'ensemble du site si vous leur attribuez le nom de votre choix. À vous de décider. 12.1.2.2 Pour voir ou éditer des ancres existants : • Sélectionnez Gestionnaire de site/Gestionnaire des ancres dans le menu Outils pour afficher, renommer ou supprimer une ancre associée à un objet spécifique. Vous pouvez également inclure une ancre dans la navigation. 12.2 Ajouter des zones dynamiques à la page Une zone dynamique est un lien hypertexte transparent sur une page Web. Généralement placées au-dessus des images, les zones dynamiques agissent comme des boutons actifs lorsque l'on clique dessus dans un navigateur Web. Elles sont tout particulièrement utiles si vous souhaitez que le visiteur puisse cliquer sur différentes zones d'une image, dans un menu graphique ou sur le plan d'un site par exemple. Vous pour dessiner et modifier des zones dynamiques manuellement ou les créer afin de les ajuster à une forme existante. 12.2.1.1 Pour dessiner une zone dynamique : Insérer une zone dynamique dans la barre d'outils Objets Web. 1. Cliquez sur le bouton 2. Cliquez et faites glisser le curseur pour tracer une zone dynamique rectangulaire. La boîte de dialogue Liens hypertextes apparaît. 3. Sélectionnez le type de destination du lien, puis saisissez la cible du lien hypertexte (reportez-vous à Sélectionner la cible d'un lien hypertexte). 4. Cliquez sur OK. 12.2.1.2 Pour ajuster une zone dynamique en fonction d'une forme existante : 1. Dessinez la zone dynamique comme décrit ci-dessus, puis créez la forme, comme décrit dans la rubrique Tracer et modifier des formes. 2. Ensuite, sélectionnez les deux objets et choisisse Ajuster la zone dynamique à la forme dans le menu Outils. Les deux objets demeurent séparés. Vous pouvez donc aisément supprimer la forme si vous n'en avez plus besoins après l'avoir utilisée comme modèle pour générer une zone dynamique dans la forme de votre choix. 12.2.1.3 Pour modifier le lien hypertexte d'une zone dynamique : • À l'aide de l'outil Pointeur, double-cliquez sur la zone dynamique. La boîte de dialogue Liens hypertextes apparaît et affiche la cible du lien de la zone dynamique active. • Pour modifier le lien hypertexte, sélectionnez un nouveau type de destination et/ou une nouvelle cible. • Pour supprimer le lien, réglez sa destination sur Aucun lien hypertexte. 118 Ajouter des liens hypertextes et de l'interactivité 12.2.2 Modifier des zones dynamiques Tout comme les autres objets, vous pouvez déplacer et redimensionner les zones dynamiques sur la page. Une zone dynamique sélectionnée comporte à la fois une zone de délimitation extérieure et un contour intérieur, dont les objectifs sont différents. 12.2.2.1 Pour déplacer ou redimensionner une zone dynamique : • Cliquez pour sélectionner la zone dynamique, puis : • Pour la déplacer, cliquez et faites glisser le pointeur à partir du centre ou à partir de la zone de délimitation de la zone dynamique. Pour figer le déplacement de la zone dynamique sur un axe vertical ou horizontal, maintenez la touche Maj enfoncée en faisant glisser le curseur. • Pour la redimensionner, cliquez et faites glisser ses poignées extérieures (rectangle de délimitation). En modifiant le contour intérieur, vous pouvez convertir les zones dynamiques rectangulaires en formes libres de façon à ce qu'elles correspondent le plus possible à la forme des images que vous souhaitez définir comme zone dynamique. Pour modifier le contour, déplacez tout d'abord le pointeur de la souris sur le contour intérieur de la zone dynamique jusqu'à ce que le curseur change de forme pour indiquer que vous survolez un nœud ou une ligne. 12.2.2.2 Pour créer un nouveau nœud dans une zone dynamique : • Cliquez à un endroit quelconque sur le contour de la zone dynamique lorsque le curseur apparaît. 12.2.2.3 Pour modifier la forme du contour d'une zone dynamique : • Cliquez et faites glisser un nœud lorsque le pointeur apparaît. 12.3 Ajouter des images survolées L'expression "image survolée" fait référence à une interaction entre l'action de la souris et l'objet à l'écran. Ainsi, vous pouvez survoler une image de page Web avec la souris et constater que celui-ci change immédiatement de couleur ou d'aspect. Lorsque vous survolez un objet d'une page Web, le pointeur de votre souris se place physiquement dans la zone de l'écran occupée par l'objet. Cette opération crée une action appelée effet de survol et, si le code est destiné à "piéger" cette action, elle peut en déclencher une autre telle que le passage à une autre image au même emplacement. Un objet dont l'aspect change par permutation avec une autre image en réponse aux actions de la souris est appelé image survolée—l'état de l'image change en réponse aux événements à l'écran. Vous pouvez importer directement des éléments survolés dans DrawPlus, de Serif. (Reportez-vous à l'aide en ligne pour plus d'informations.) 12.4 Options des images survolées L'ajout d'images survolées repose fondamentalement sur le choix de l'état ou des états de l'image survolée que vous souhaitez définir pour un objet particulier et sur la spécification d'une image pour chaque état. WebPlus propose plusieurs options : Normal est l'état initial de l'image, avant d'être survolée ; cet état est toujours défini. Survolé est l'état déclenché par un effet de survol, c'està-dire lorsque le pointeur de la souris se trouve exactement au-dessus de l'image. Cliqué est l'état déclenché par un clic sur l'image. 119 WebPlus X4 Manuel d’utilisation L'état Cliqué survolé (non illustré) concerne un survol de la souris sur une image à l'état "Cliqué", c'est-à-dire après un clic sur l'objet. Vous pouvez également spécifier un événement avec lien hypertexte, par exemple un renvoi vers une page Web cible, déclenché lorsque l'utilisateur clique sur l'objet. Il vous est même possible de regrouper des boutons sur une page afin qu'ils fonctionnent conjointement et qu'un seul bouton puisse être actionné à la fois. 12.4.1.1 Pour créer une image survolée : 1. Dans un programme d'édition graphique, créez les images source pour chaque état de survolement que vous allez définir. (Voir "Créer des variantes d'images" ci-dessous.) 2. Cliquez sur standard. 3. Indiquez les états d'image survolée (voir ci-dessus) à activer pour chaque graphique en cochant les cases concernées dans la boîte de dialogue Image survolée. Pour chaque état, utilisez le bouton Parcourir pour rechercher l'image source correspondante et spécifiez les Options d'exportation de cette image (reportez-vous à Définir les options d'exportation des images). 4. Activez l'option Intégrer les fichiers au site si vous souhaitez intégrer les images au site. 5. Cochez l'option Normal ou Cliqué pour définir l'état initial de l'image survolée du bouton. 6. Cliquez sur Définir... pour définir la cible du lien hypertexte du bouton. 7. Cochez l'option Bouton radio si vous souhaitez associer tous les boutons (sur une page donnée) pour lesquels cette option est activée de telle sorte qu'un seul du groupe puisse être activé à la fois. 8. Cliquez sur OK. À la première définition d'un état d'image survolée, les calques des images survolées apparaissent définis dans le document. Insérer une image survolée dans la palette Image de la barre d'outils Objets WebPlus affiche l'image correspondant à l'état Normal. Il s'agit de la méthode idéale pour prévisualiser la page, tester chaque image survolée, puis revenir à WebPlus et effectuer les modifications éventuelles. Lorsque vous prévisualisez ou publiez le site, WebPlus se charge de l'exportation d'un fichier image pour chaque état de l'image survolée et le fichier .html de la page publiée comprend le code JavaScript destiné à capturer l'événement d'image survolée. 12.4.1.2 Pour éditer une image survolée : 1. Effectuez un clic droit (ou double-cliquez) sur l'image et sélectionnez la commande Modifier l'image survolée.... 2. Effectuez de nouvelles sélections si nécessaire et cliquez sur OK. 12.4.2 Créer des variantes des images sources Pour chaque objet comportant au moins un état d'image survolée activé, vous devez fournir une image source. Cela constitue la différence subtile entre l'image Normal et ses variantes qui font que l'objet semble passer d'un état à un autre. Par exemple, si vous avez coché l'état Survolé pour un objet, vous devez inclure une image variante que la page Web pourra afficher lorsque le bouton sera survolé par la souris. Si le texte du bouton, noir à l'état normal, doit devenir jaune, l'état "survolé" nécessite une image dont le texte est en jaune. 12.5 Ajouter des images survolées (popups) La fonction Image survolée (popup) de WebPlus est le plus souvent utilisée pour créer une miniature dont la version grand format apparaît à l'écran lorsque le pointeur de la souris de l'internaute la survole. L'image grand format s'affiche généralement à côté de la miniature originale. Cette fonction est simple à utiliser et repose sur le même principe qu'une autre fonction plus avancée, la fonction Galerie photos. Les images survolées comportent uniquement deux états (normal et survolé) et affichent l'image à sa taille normale ou à une taille agrandie à l'état survolé ; comparez cela aux survols WebPlus qui comportent jusqu'à quatre états et reposent sur des images différentes de taille identique. 120 Ajouter des liens hypertextes et de l'interactivité WebPlus vous permet de définir l'emplacement et la taille de l'image à l'état Survolé par rapport à la miniature ; vous pouvez également remplacer ou redimensionner la miniature à tout moment. WebPlus vous permet de définir deux états : • Normal correspond à l'état standard de l'image, c'est-à-dire l'état de l'image lorsqu'elle n'est pas survolée. Cet état doit obligatoirement être défini. Vous pouvez utiliser des miniatures, mais également des icônes agencées sous forme de liste (numérotée ou à puces) si vous souhaitez créer un catalogue, un quizz, etc. • Survolé correspond à l'état de l'image lorsqu'un événement "mouseover" se produit : l'image à l'état Survolé apparaît à l'écran lorsque l'internaute place le pointeur de sa souris sur l'image et disparaît dès qu'il retire le pointeur de la zone occupée par la miniature. Si vous décidez d'ajouter une légende à une image survolée, celle-ci apparaît à l'écran à côté de l'image à l'état Survolé. Vous pouvez modifier la police, la taille et la couleur du texte de la légende, et lui appliquer d'autres attributs de mise en forme (gras et italique). 12.5.1.1 Pour créer une image survolée (Popup) : Image survolée de la palette Image, dans la barre d'outils Objets 1. Cliquez sur le bouton standard. 2. Dans la boîte de dialogue qui s'affiche, commencez par sélectionner l'image à l'état Normal. Pour ce faire, cliquez sur le bouton Parcourir, recherchez l'image, sélectionnez-la, puis cliquez sur Ouvrir. 3. L'image que vous avez sélectionnée pour l'état Normal est utilisée par défaut comme image à l'état Survolé (ce qui convient pour la création d'albums photos). Toutefois, vous pouvez cliquer sur Parcourir et sélectionner une autre image. 4. (Facultatif) Pour appliquer un lien hypertexte à l'image à l'état Normal, cliquez sur le bouton Définir et entrez une URL. L'utilisateur accédera directement à la page définie comme destination du lien hypertexte lorsqu'il cliquera sur l'image. 5. (Facultatif) Cliquez sur Options d'exportation pour définir les options d'exportation des images (reportez-vous à Définir les options d'exportation des images). 6. (Facultatif) Activez l'option Intégrer les images au site si vous souhaitez intégrer les images au site. À ce stade de la procédure, vous avez défini les images qui seront utilisées à l'état Normal et à l'état Survolé. Pour que votre image survolée donne les résultats escomptés, vous devez positionner l'image à l'état Normal et celle à l'état Survolé sur la page. Vous utiliserez pour cela une boîte de dialogue dédiée dans laquelle vous pourrez déplacer ou redimensionner chacune des images, soit par glisser-déplacer, soit en définissant des valeurs absolues en pixels. Dans cette boîte de dialogue, chacune des images se voit appliquer une bordure de couleur —vert pour l'état Normal, bleu pour l'état Survolé. D'autre part, les images survolées créées précédemment s'affichent dans la fenêtre d'aperçu et les valeurs Gauche, Haut, Largeur et Hauteur définies précédemment sont indiquées pour vous permettre d'aligner facilement l'image survolée en cours de création avec les images survolées existantes. 121 WebPlus X4 Manuel d’utilisation 12.5.1.2 Pour positionner une image survolée : 7. Cliquez sur le bouton Définir la position de l'élément survolé situé au bas de la boîte de dialogue Image survolée. 8. Sélectionnez une image dans la boîte de dialogue qui s'affiche. La liste déroulante indique l'état de l'élément sélectionné : • Normal Sélection : l'image à l'état Normal est sélectionnée (bordure verte). • Survol Sélection : l'image à l'état Survolé est sélectionnée (bordure bleue). • Légende Sélection : la légende est sélectionnée (bordure rouge). Disponible uniquement si vous avez défini une légende. Si vous désélectionnez une image, la liste déroulante indique Non Sélection. 9. Pour repositionner et/ou redimensionner une image, faites glisser l'une de ses poignées d'angle (les proportions sont conservées lorsque vous redimensionnez une image par glisser-déplacer). Vous pouvez également entrer des valeurs dans les champs Gauche, Haut, Largeur et Hauteur pour définir précisément la position des images. Les flèches vers le bas situées en regard des champs donnent accès aux trois dernières valeurs définies pour les images à l'état Normal, les images à l'état Survolé et les légendes (de haut en bas), ce qui permet d'aligner précisément les images. 10. (Facultatif) Activez l'option Position relative à l'image normale pour que la position de l'image à l'état Survolé soit toujours définie par rapport à l'image à l'état Normal (lorsque celle-ci est redimensionnée). 11. (Facultatif) Désactivez l'option Conserver les proportions pour pouvoir redimensionner l'image à l'état Normal ou celle à l'état Survolé sans conserver ses proportions. Si vous souhaitez modifier les proportions de l'image, vous devez utiliser les zones de saisie (il n'est pas possible de procéder par glisser-déplacer). 12. Cliquez sur OK. L'image à l'état Normal s'affiche sur la page. Vous devez générer un aperçu ou publier le site pour que l'image à l'état Survolé apparaisse à l'écran. Vous pouvez ajouter à votre page Web plusieurs images survolées pour créer une galerie d'images stylisée, les différentes images à l'état Normal formant une suite de miniatures sur lesquelles l'utilisateur peut cliquer. 12.5.1.3 Pour modifier une image survolée : • Double-cliquez sur l'image à l'état Normal disposée sur la page. La boîte de dialogue Image survolée s'affiche. Modifiez les paramètres selon les besoins. 12.5.1.4 Pour ajouter une légende à une image à l'état Survolé : 1. Dans la boîte de dialogue Image survolée, cochez la case Afficher la légende avec l'image survolée. 2. Entrez le texte de la légende dans la zone de saisie Légende. 3. Définissez les attributs du texte de la légende au moyen des listes déroulantes Police et Taille et des cases à cocher Gras et Italique. Pour appliquer une couleur au texte, utilisez la liste déroulante Couleur du texte. 4. Activez l'option Appliquer une couleur d'arrière-plan pour pouvoir sélectionner une couleur dans la liste déroulante adjacente. 5. Cliquez sur OK. La légende ne s'affiche que lorsque l'image à l'état Survolé apparaît à l'écran. Pour définir la position de la légende sur l'image à l'état Survolé, vous devez donc double-cliquer sur l'image à l'état Normal disposée sur la page. Cliquez sur le bouton Définir la position de l'élément survolé dans la boîte de dialogue qui s'affiche, puis repositionnez la légende (la procédure étant la même que pour les images à l'état Normal ou à l'état Survolé). Lorsque vous sélectionnez une légende, celle-ci est entourée d'une bordure rouge dans la fenêtre d'aperçu. 122 13 Ajouter du contenu dynamique 13.1 Créer des pages HTML Le langage HTML correspond aux codes des balises que le navigateur du visiteur de votre site Web lit et interprète pour présenter votre page. Le code et les balises utilisées sont des instructions de présentation de la page. Il est donc crucial que le code soit correctement structuré et qu'il respecte les conventions du HTML. WebPlus prend en charge le développement de pages Web en code HTML. Vous pouvez ajouter des pages dans la fenêtre Structure du site de l'onglet Site. Une nouvelle icône de page HTML s'affiche. Les pages HTML sous l'onglet Site peuvent être contrôlées de la même manière que les pages ordinaires, c'est-àdire que vous pouvez les déplacer, les renommer, les prévisualiser, les inclure dans la barre de navigation, insérer des liens hors site et évaluer la durée de chargement. Toutefois, les pages HTML ne peuvent pas être associées à des maquettes. De plus, un double-clic sur l'icône de la page HTML ouvre la fenêtre Source de la page HTML pour en éditer le code (il ne s'agit pas d'une présentation à l'identique d'une page ordinaire). La fenêtre Source contient des balises HTML basiques qui vous seront familières si vous êtes un développeur HTML expérimenté. Il n'y a pas d'aperçu lorsqu'on travaille directement au niveau du code source HTML. A ce stade, il est nécessaire de modifier la structure HTML du "modèle". Généralement, on insère du texte (qui est soit saisi, soit copié) entre la balise d'ouverture <body> et celle de fermeture </body> même si la section <head> peut également être éditée ; chaque paragraphe de la section <body> commence par la balise <p> et se termine par la balise </p>. Vous pouvez également insérer des marqueurs d'annotation dans votre code HTML (reportez-vous à Joindre un code HTML ) en cliquant sur le bouton droit de la souris puis en sélectionnant Insérer un jeton). Vous n'avez pas besoin de modifier le reste du code HTML situé en dehors de la balise d'ouverture <body> et celle de fermeture </body>. Pour modifier le code HTML, vous devez d'abord comprendre le langage HTML ainsi que ses conventions. Si vos modifications sont incorrectes, votre code risque d'être corrompu au niveau de la page ou du site. Si vous être novice en HTML et si vous devez commencer par le début, vous trouverez certainement des didacticiels consacrés au HTML sur Internet. Lisez-les attentivement avant d’aborder l’édition en HTML. 13.1.1.1 Pour créer une page HTML : 1. Dans la section Pages (structure du site) de l'onglet Site du Studio, sélectionnez la page à la suite de laquelle vous voulez ajouter une nouvelle page. Un simple clic sur l'entrée de la page suffit pour sélectionner la page (le nom de la page est affiché en gras) ; un double-clic affiche aussi la page dans l'espace de travail. 2. Cliquez sur la flèche vers le bas du bouton Ajouter, immédiatement au-dessus de la fenêtre Pages. Dans le menu déroulant, choisissez Nouvelle page HTML pour ajouter une page après la page d'origine. 13.1.1.2 Pour modifier la source d'une page HTML : • Double-cliquez sur la page HTML (voir ci-dessus) dans la Structure du site de l'onglet Site et modifiez le code affiché. 123 WebPlus X4 Manuel d’utilisation Si vous souhaitez annuler toutes les modifications apportées au code HTML, sélectionnez le bouton Supprimer les modifications dans la barre d'outils contextuelle située au-dessus de la fenêtre HTML. 13.1.1.3 Pour une publication rapide de la page HTML (pour une vérification en direct) : • Cliquez sur Publication rapide sur le Web dans la barre d'outils contextuelle pour publier la page active via votre compte FTP par défaut. 13.1.1.4 Pour retourner à la Vue du dessin : • Sélectionnez Vue du dessin dans la barre d'outils contextuelle. 13.2 Joindre un code HTML Dans WebPlus, vous pouvez créer des pages HTML (voir Créer des pages HTML). WebPlus vous permet aussi joindre du code à vos objets (cadre ou cellule de tableau par exemple) et à vos pages pour accroître les performances et optimiser l'interactivité. L'objet ou la page peuvent soit générer du contenu de manière dynamique, soit changer d'apparence suite à l'intégration d'un script. Il n'est pas possible d'éditer le code HTML proprement dit (ce qui ne présente aucun avantage). En revanche, il est possible d'accéder à certaines zones du code pour y ajouter du code supplémentaire. Ainsi des champs fictifs clairement identifiables (texte avec un contour blanc en surbrillance) apparaissent dans l'onglet Source. La liste ci-dessus présente certains des champs fictifs modifiables présents dans le code source d'un fragment HTML, d'un objet ou d'une page (en fait, il existe des champs fictifs portant des noms différents en fonction du type d'élément). Par exemple, le dernier champ fictif de la liste ci-dessus est spécifique au code source d'une page et n'apparaît ni pour un objet, ni pour un fragment HTML. Le code peut être inséré par copier-coller à toutes les positions d'espaces réservés. Généralement, vous pouvez inclure des marqueurs, du code HTML ou des scripts spécifiques, par exemple en JavaScript. Ce code peut servir à définir un comportement des images survolées qui ne pourrait s'effectuer sans script, par exemple un gestionnaire de clic sur une image. 13.2.1 Ajouter du code HTML WebPlus vous permet également de "visualiser le code source" d'une page. Vous pouvez ainsi ajouter du code HTML supplémentaire à la page. Grâce à cette approche, vous pouvez inclure des fragments que vous avez soit copi��s depuis une autre page Web soit éventuellement écrits vous-même. Vous pouvez également importer du texte HTML formaté à partir d'un navigateur ou d'un programme de courrier électronique par le biais du Presse-papiers (par exemple, à l'aide des commandes Sélectionner tout et Copier d'un navigateur), grâce à la commande Fichier/Collage spécial de WebPlus. 124 Ajouter du contenu dynamique Avant d'importer votre code HTML, WebPlus vous demande de positionner une fenêtre Code HTML sur votre page. Vous ne pourrez visualiser l'effet créé par le code HTML que lors de l'aperçu du site exporté. Veillez donc à placer correctement les repères. Vous devez absolument vérifier le résultat de votre page Web dans un navigateur. En cas de problème, vérifiez le code que vous avez saisi, ainsi que sa position sur la page WebPlus (redimensionnez celleci si nécessaire). Si vous connaissez un peu le langage HTML, examinez la page source dans un éditeur de texte tel que le bloc-notes de Windows ou utilisez la fonction "Afficher la source" de votre navigateur. 13.2.1.1 Pour ajouter un code HTML à une page : 1. Copiez le code HTML dans le Presse-papiers, à partir de sa source d'origine. 2. Cliquez sur le bouton 3. Cliquez sur la page ou sur la zone de travail pour créer une fenêtre de code HTML employant les dimensions par défaut ou cliquez et faites glisser pour créer une fenêtre aux dimensions de votre choix. 4. Dans la boîte de dialogue, utilisez le bouton Coller dans la balise HEAD ou Coller dans la balise BODY pour insérer le texte du Presse-papiers dans l'en-tête du fichier ou dans le corps de texte principal. OU Utilisez la fenêtre déroulante de code. Saisissez un ou plusieurs fragments de code HTML dans les champs correspondants. 5. (Facultatif) Si le code nécessite des fichiers externes, cliquez sur le bouton Ajouter pour les sélectionner. Cliquez sur le bouton Lier si vous souhaitez que les fichiers restent séparés du site. 6. Cliquez sur OK pour fermer la boîte de dialogue. Le code apparaîtra sur votre page dans la fenêtre Code HTML. Insérer un code HTML dans la barre d'outils Objets Web. 13.2.2 Ajout de code JavaScript Pour trouver une large gamme d'échantillons de code JavaScript, recherchez "javascript snippets" dans votre moteur de recherche préféré. Vous trouverez des milliers de sites proposant gratuitement de petits scripts. La plupart de ces sites indiquent clairement l'usage de ces scripts. Normalement, ils permettent également de sélectionner le code JavaScript et de le copier pour le coller dans une fenêtre source de fragment HTML, d'objet ou de page, dans une cellule de tableau HTML ou directement sur la page. Voici quelques exemples d'utilisation de codes dans des pages Web : • Désactivation du clic droit sur des objets de la page • Ajout d'un bouton d'impression de la page courante • Ajout de la date et de l'heure sur la page • Modification de la couleur d’un objet lorsqu’il est sélectionné Nous allons maintenant examiner comment ajouter du JavaScript (provenant de sources externes ou que vous avez écrits vous-même si vous avez des connaissances en programmation JavaScript). A titre d'illustration, comparez les deux exemples de code ci-dessous. Un script JavaScript très simple est ajouté à la fenêtre Source pour afficher la date du jour sur votre page Web. La première partie comporte le dernier champ fictif de la liste ci-dessus (<!--Page Body Start-->), la seconde indique à quoi ressemble le code lorsque le champ fictif a été remplacé par un script. 125 WebPlus X4 Manuel d’utilisation Code avec champ fictif Code après ajout du JavaScript Cet exemple montre où se trouve un code simple dans une fenêtre source. 13.2.2.1 Pour attacher un code à un fragment HTML ou un objet : 126 1. Sélectionnez un fragment ou un objet HTML existant. 2. Dans le menu Format, sélectionnez Joindre du code HTML.... OU Sélectionnez cette option après avoir cliqué avec le bouton droit de la souris sur l'objet. 3. Dans la boîte de dialogue, faite défiler la fenêtre source pour trouver des champs fictifs modifiables. Les champs fictifs choisis dépendent du résultat visé. 4. Sélectionnez l'ensemble du champ fictif et collez le code HTML, le script ou tout autre chaîne de texte pour le remplacer. OU Sélectionnez l'ensemble du champ fictif et saisissez directement le code à cet emplacement (en écrasant également le texte du champ fictif). 5. Cliquez sur le bouton OK pour revenir à la vue normale de la page. Ajouter du contenu dynamique Vous pouvez utiliser des marqueurs pour ajouter une série de variables à votre code HTML. Ces marqueurs sont utiles dans un modèle de navigation de type "fil d'Ariane" où les liens se mettent à jour de façon dynamique si vous ajoutez, supprimez ou modifiez des pages à l'intérieur du site. Pour des scripts plus complexes, il peut être nécessaire d’ajouter des fichiers complémentaires (images, fichiers texte etc.) pouvant être utilisés par le script inséré. Ces fichiers peuvent être intégrés ou liés, ce qui signifient que les fichiers sont conservés avec le site (intégrés) ou qu’ils y sont liés par une reférence externe (à la manière d’un lien hypertexte). Tenez compte de la taille finale du site en cas d’intégration de plusieurs images. 13.2.2.2 Pour ajouter des fichiers complémentaires : 1. Cliquez sur le bouton Ajouter. 2. Dans la boîte de dialogue Ouvrir, sélectionnez un ou plusieurs fichiers (cliquez sur les éléments en maintenant la touche Ctrl ou Maj enfoncée pour une sélection non contiguë ou contiguë, respectivement). Cliquez sur Ouvrir. 3. Les fichiers, qui apparaissent dans la liste Fichiers, seront intégrés dans votre site par défaut. Si vous préférez ne pas les intégrer (pour que le site soit moins volumineux), sélectionnez chaque fichier et cliquez sur le bouton Lier. 4. Cliquez sur OK. Vous pouvez à tout moment Ajouter, Supprimer et modifier des Options d'exportation d'un fichier. 13.2.2.3 Pour joindre un code à une page : Joindre un code HTML dans la barre d'outils standard. 1. Cliquez sur le bouton 2. Dans la boîte de dialogue, faite défiler la fenêtre pour trouver des champs fictifs modifiables. Les champs fictifs choisis dépendent du résultat visé. 3. Sélectionnez l'ensemble du champ fictif et collez le code HTML, le script ou tout autre chaîne de texte pour le remplacer. OU Sélectionnez l'ensemble du champ fictif et saisissez directement le code à cet emplacement (en écrasant également le texte du champ fictif). 4. Pour revenir à la vue ordinaire de la page, cliquez sur l'onglet du projet dans la partie supérieure de la fenêtre source. 13.2.3 Utilisation d'identifiants Tous les objets de WebPlus sont munis d'identifiants alphanumériques distinctifs pour leur référencement dans les langages script. Par défaut, les identifiants sont générés automatiquement pour chaque objet, colonne de texte, ligne et cellule de tableau. Par exemple, une forme qui vient d'être tracée reçoit automatiquement le texte d'identifiant "qs_1", une seconde forme sera "qs_2", les images seront "pic_1", "pic_2" etc. Il est tout à fait possible d'utiliser ces identifiants attribués de façon automatique dans vos scripts, mais vous pouvez également désactiver la création automatique d'identifiants au niveau du site dans l'onglet HTML de la boîte de dialogue Propriétés du site (sélectionnez Propriétés du site dans le menu Fichier) si vous souhaitez attribuer vos propres identifiants. Désactivez l'option pour l'objet, la colonne de texte, la ligne et/ou la cellule de tableau et cliquez sur OK. Vous pouvez alors placer votre propre identifiant dans le champ fictif disponible : Si l'objet est copié sur la même page ou sur un autre site Web, l'identifiant est remplacé par un autre identifiant. Tous les identifiants d'objets peuvent être modifiés lorsque l'objet se trouve sur la page Web. Un autre nom peut être utilisé ou, si vous ne voulez pas afficher d'identifiant d'objet (alors que vous voulez continuer à générer les identifiants au niveau du site), vous pouvez empêcher l'affichage des identifiants dans le code source. 13.2.3.1 Pour modifier un identifiant d'objet : 1. Cliquez avec le bouton droit de la souris sur l'objet et sélectionnez Identifiant.... 2. Dans la boîte de dialogue, modifiez la valeur de l'identifiant HTML. 127 WebPlus X4 Manuel d’utilisation 3. (Facultatif) Choisissez d'Ecrire l'identifiant pour cet objet ou non. L'option "Utiliser les paramètres par défaut du site" active le paramètre défini dans l'onglet HTML de la boîte de dialogue Propriétés du site — l'identifiant de l'objet est toujours affiché ou ne l'est jamais selon que la valeur est "Oui" ou "Non", quel que soit le paramètre par défaut du site. 13.2.4 Marqueurs WebPlus comporte divers groupes de marqueurs d'annotation HTML qui peuvent être joints à des fragments HTML, des objets ou des pages. Ils sont remplacés par les valeurs "réelles" correspondantes lors de l'exportation dans un fichier ou de la prévisualisation de la page. L'ajout de marqueurs consiste simplement à insérer des chaînes de texte , par copier-coller ou par saisie directe, à l'emplacement d'un champ fictif dans tout code source HTML. Vous trouverez la liste complète des jetons dans l’Aide de WebPlus. 13.3 Ajouter des formulaires Les formulaires web permettent de collecter de façon efficace et moderne des informations auprès des personnes visitant votre site web. Tout comme les formulaires traditionnels sur papier sont utilisés pour réunir des informations, les formulaires Web s'appuient sur le même principe de renseignement de champs mais ils tirent profit d'Internet comme puissant véhicule d'informations. Les types de formulaires les plus courants sont les formulaires de demande d'informations, les formulaires de recueil de commentaires et les livres d'or. Les données de formulaires peuvent être collectées de diverses manières par e-mail, via un fichier script local ou distant ou par le biais des ressources Web Serif. 13.3.1 Structure des formulaires Un formulaire peut se composer de différents blocs : texte, graphiques et éléments de formulaire. Les commandes de formulaires peuvent collecter de façon intelligente des données sur les visiteurs de votre site, elles peuvent être déplacées et modifiées un peu comme les objets familiers de WebPlus tels que graphiques et éléments de tableaux. Un élément peut être un bouton, une zone de saisie, une zone de texte, une zone de liste, une case à cocher, un bouton radio, un objet CAPTCHA ou un explorateur de fichiers. Un formulaire typique, tel qu'un formulaire d'envoi de commentaires par e-mail contient plusieurs de ces champs. Le visiteur saisit les informations dans des zones de saisie ou sélectionne des données à l'aide de cases à cocher, de boutons radio ou de listes déroulantes. Les informations saisies peuvent être des valeurs numériques, du texte ou les deux, selon le type de champ. L'ordre dans lequel les champs doivent être renseignés (ordre des tabulations) peut être configuré, de même que le système de validation des données saisies (reportez-vous à l'aide WebPlus pour plus d'informations sur l'ordre des tabulations et la validation). Chaque champ comporte ses propres propriétés relatives à son apparence, ses valeurs, sa validation et l'opération attendue pour le champ. Le formulaire ne devient fonctionnel qu'une fois le site Web publié (vous pouvez tout de même obtenir un aperçu de vos formulaires dans WebPlus ; reportez-vous à Afficher un aperçu de votre site). Lorsqu'un visiteur saisit des informations dans les champs ou active une option, les données sont transmises à une destination spécifique au moment de l'envoi du formulaire. Javascript permet d'activer une interactivité dans vos formulaires Web. Il gère la mise en forme, la validation, les calculs et les opérations, c'est-à-dire toutes les fonctions clés dans le développement de formulaires Web. 13.3.1.1 Où les données sont-elles envoyées ? Après l'envoi, les données du formulaire peuvent être transmises à l'une des destinations suivantes : • une adresse e-mail (celle du développeur du site Web). • un fichier de script (enregistré au niveau local ou distant) ; le script peut écrire un texte dans un fichier texte ou sur la base de données d'un serveur. • Ressources Web Serif : pour le transfert des données de formulaire à votre e-mail (via Serif). Comme c'est le cas généralement dans la gestion des formulaires Web, il est possible de définir le type d'encodage, la fenêtre ou les cadres de destination, les méthodes d'envoi (POST ou GET). 128 Ajouter du contenu dynamique 13.3.2 Créer des formulaires l existe plusieurs méthodes de création de formulaires : vous pouvez créer un formulaire standard prédéfini prêt à l'emploi (ci-contre), sélectionner des éléments de formulaire ou créer un formulaire de toutes pièces ; les deux premières méthodes font appel à un Assistant de création de formulaire simple d'utilisation. Les formulaires standard sont disponibles pour les informations de contact, les commentaires d'utilisateurs, les CV, les opinions et les adresses. 13.3.2.1 Pour créer un formulaire standard : 1. Cliquez sur le bouton Assistant de création de formulaire dans la palette Formulaire de la barre d'outils Objets Web. 2. Dans la boîte de dialogue, cliquez sur l'icône Utiliser et adapter un formulaire standard, puis sur Suivant>. 3. Dans la liste de formulaires, sélectionnez un type de formulaire en utilisant le volet d'aperçu situé au bas de la boîte de dialogue. 4. Cliquez sur Suivant>. 5. Dans la fenêtre suivante, choisissez d'ajouter, de modifier ou de supprimer des éléments. • Pour ajouter, cliquez sur un bouton de la section Ajouter. • Pour modifier un objet standard, sélectionnez un élément existant dans la fenêtre et choisissez Modifier le champ. Pour plus d'informations, reportez-vous à Modifier les éléments de formulaire. • Pour supprimer un objet standard, sélectionnez un élément existant dans la fenêtre et choisissez Supprimer (ou appuyez sur la touche Suppr.). • Pour réorganiser l'ordre des éléments, utilisez les boutons Vers le haut et Vers le bas. 129 WebPlus X4 Manuel d’utilisation 6. Après avoir cliqué sur Suivant>, choisissez une destination pour les données du formulaire en cliquant sur un bouton de destination. Cliquez sur Terminer pour fermer l'Assistant. 7. Pour insérer le formulaire à une taille par défaut, positionnez le curseur de positionnement du formulaire et cliquez. Si vous souhaitez plus de liberté dans votre création, WebPlus fournit un formulaire vide et des objets de formulaire à partir desquels vous pouvez concevoir votre formulaire de toutes pièces. Vous pouvez ajouter des commandes de formulaire, des objets de formulaire standard, ou les deux. Voir l'Aide de WebPlus pour plus d'informations. 13.3.2.2 Pour créer un formulaire personnalisé (à l'aide d'un assistant) : 1. Cliquez sur le bouton Assistant de création de formulaire dans la palette Formulaire de la barre d'outils Objets Web. 2. Dans la boîte de dialogue, cliquez sur l'icône Créer un formulaire avec l'assistant, puis sur Suivant>. 3. Dans l'écran suivant, ajoutez les éléments de formulaire qui constitueront votre formulaire. Effectuez l'une des opérations suivantes à partir de la section Ajouter : • Pour créer un élément de formulaire prêt à l'emploi, cliquez sur le bouton Prédéfini, et sélectionnez l'élément de formulaire de votre choix. Double-cliquez sur le nouvel élément dans la fenêtre pour le renommer. OU 1. Ajoutez d'autres éléments de formulaire pour créer un formulaire de toutes pièces. Reportez-vous à Eléments de formulaire pour obtenir une description de chaque élément. 2. Dans la boîte de dialogue, conservez le nom interne attribué à l'élément (à des fins d'identification) ou modifiez-le. Vous pouvez également définir l'étiquette associée à l'élément (libellé qui apparaît à l'écran). Pour modifier l'élément, cliquez sur le bouton Modifier le champ. La boîte de dialogue qui s'affiche vous permet de définir le système de validation, la longueur du formulaire ainsi que d'autres attributs d'éléments. Pour plus d'informations, reportez-vous à Modifier les éléments de formulaire. Si vous avez modifié une valeur, cliquez sur OK. 4. Répétez éventuellement la procédure ci-dessus pour tous les éléments de formulaire choisis. Ils sont présentés (dans l'ordre de création) dans la fenêtre supérieure. Avant de continuer, vous devez ajouter un élément Envoyer à votre formulaire. Cet élément est essentiel à l'envoi des données à leur destination. Cliquez sur le bouton Envoyer pour ajouter automatiquement le bouton au formulaire. Ce bouton est généralement accompagné d'un bouton Effacer utilisé pour effacer les données des champs des formulaires qui n'ont pas encore été envoyés. Cliquez sur Suivant>. 5. Dans la boîte de dialogue suivante, choisissez une destination pour les données du formulaire en cliquant sur un bouton de destination (e-mail, fichier script local ou distant ou Ressources Web Serif) et saisissez un nom désignant le formulaire. (Reportez-vous à Transmission de formulaires). 6. Cliquez sur Terminer pour fermer l'Assistant. 7. Pour insérer un formulaire à sa taille par défaut, placez le curseur à l'emplacement où vous souhaitez que le formulaire apparaisse sur la page, puis cliquez. Vous pouvez aussi cliquer sur le bouton Formulaire vide de la palette Formulaire de la barre d'outils Objets Web, faites glisser le pointeur pour définir une zone de formulaire, puis ajoutez des éléments de formulaire à la zone. 13.3.3 Éléments de formulaire Chaque élément de formulaire est un objet "intelligent" différent des autres objets de WebPlus. Ils sont intelligents car ils peuvent conserver les saisies des visiteurs et les transmettre à un emplacement centralisé au cours de la transmission du formulaire. Un élément peut être déplacé comme les autres objets, mais il n'est pas possible de lui attribuer une couleur ou une transparence, de paramétrer ses bordures ou de le redimensionner. Divers éléments de formulaires sont accessibles dans l'Assistant de création de formulaire ou directement à partir de la palette Formulaire de la barre d'outils Objets Web. Il faut associer un nom unique interne à chaque élément, puis définir diverses propriétés ; chaque élément de formulaire dispose de propriétés qui peuvent être modifiées. 130 Ajouter du contenu dynamique Icône de l'élément Nom de l'élément Utilisation Bouton de formulaire Permet de spécifier une action à effectuer lors d'un clic sur ce bouton. Vous pouvez créer toute une gamme de boutons dont le motif et la fonction diffèrent. Des boutons Envoyer et Effacer sont disponibles dans l'Assistant de création de formulaire. Ils permettent respectivement d'envoyer le formulaire et d'effacer toutes les données saisies. Zone de saisie Pour saisir du texte, des valeurs numériques ou une combinaison des deux, sur une seule ligne. Par exemple, un nom de famille. Zone de texte Pour saisir du texte, des valeurs numériques ou une combinaison des deux, sur plusieurs lignes. Généralement utilisée pour la saisie de texte ou de valeurs numériques, par exemple, saisie d'une requête, d'une recette ou d'une liste de chiffres. Liste déroulante Pour sélectionner un élément dans une liste déroulante où un seul élément peut être sélectionné par défaut (ex. : Masculin ou Féminin). Les listes déroulantes permettent aussi d'effectuer une sélection dans une liste autorisant la sélection multiple. Vous pouvez cliquer tout en maintenant la touche Maj enfoncée pour sélectionner une plage d'éléments contigus. Lorsque vous créez une liste déroulante autorisant la sélection multiple, déplacez le haut ou le bas de la zone de liste pour que plusieurs éléments soient affichés par défaut. Case à cocher Idéale lorsque vous souhaitez permettre la sélection de plusieurs options affichées côte à côte. Il s'agit d'une bonne alternative à la liste déroulante lorsque l'espace le permet. Le visiteur clique une fois pour sélectionner ou désélectionner la case, par exemple : Souhaitez-vous être informé des prochains événements ? Bouton radio Permet la sélection d'un élément exclusif des autres dans un sousensemble d'options. Par exemple, plusieurs boutons radio peuvent être utilisés pour définir l'entrée Sexe (Masculin/Féminin) du formulaire. Explorateur de fichiers Utilisez l'explorateur de fichiers pour permettre aux visiteurs de votre site de transférer des fichiers depuis leur ordinateur. Le visiteur clique sur un bouton Parcourir et sélectionne le fichier de son choix. Cela permet par exemple de télécharger des images, des CV, des dessins et des instructions. CAPTCHA Un objet CAPTCHA est un système de sécurité permettant de se protéger contre le spam. Une chaîne de texte aléatoire s'affiche au niveau de l'élément et le visiteur doit reproduire cette chaîne dans une zone de texte. Si le résultat du contrôle est positif, l'envoi du formulaire est autorisé, mais uniquement via la transmission de formulaire Ressources Web Serif. Vous pouvez aussi le régler pour qu'il s'affiche uniquement lorsque le visiteur soumet les données du formulaire (voir Transmission de formulaires). N'utilisez qu'une méthode lors de l'utilisation de formulaires. 131 WebPlus X4 Manuel d’utilisation 13.3.4 Modifier les éléments de formulaire Tous les types d'éléments de formulaire (boutons, zones de saisie etc.) ont des caractéristiques différentes et donc des valeurs différentes pouvant être modifiées. Les valeurs peuvent être modifiées au moment de la création du formulaire ou après, lorsque le champ a été placée dans le formulaire. Le bouton Modifier le champ de l'Assistant de création de formulaire vous permet de modifier l'élément au cours de la création du formulaire. Le champ peut aussi être modifié ultérieurement en cliquant sur l'élément de formulaire avec le bouton droit de la souris sur la page Web et en sélectionnant l'option Modifier, par ex. Modifier la zone de texte du formulaire. 13.3.5 Transmission de formulaires Tous les formulaires ont un point commun : ils doivent être envoyés pour que les données soient collectées. Pour ce faire, vous pouvez soit créer vous-même un bouton Envoyer, soit utiliser le bouton prêt à l'emploi proposé par l'Assistant de création de formulaire. Le bouton doit être présent sur le formulaire et est généralement associé à un bouton Effacer pour effacer les données saisies dans tous les champs du formulaire. Il existe plusieurs méthodes de transmission de données de formulaire. Aucune action Les données du formulaire ne sont pas transmises. Cette option est utile pour désactiver temporairement la collecte des données, ou si vous n'avez pas encore défini les scripts ou les ressources Web Serif. Vous pouvez modifier le formulaire ultérieurement (cliquez sur le bouton droit de la souris puis sélectionnez Editer les propriétés du formulaire) et choisir une méthode de transmission adaptée. Adresse e-mail Utilisez cette option pour éviter les méthodes de transmission POST/GET habituelles. Lorsque le visiteur clique sur le bouton Envoyer, son programme de messagerie par défaut est ouvert. Les données du formulaire (transmises sous la forme d'une chaîne unique) sont ajoutées dans le corps du message et sont prêtes à être envoyées à la destination e-mail configurée. Cela s'avère particulièrement utile lorsqu'aucun script local ou distant n'a été défini. Cette méthode de transmission n’est pas sécurisée. Les informations privées ou confidentielles ne sont pas encryptées. 13.3.5.1 Pour configurer l'envoi direct par e-mail : Ressources Web Serif 1. L'icône étant activée, ajoutez un nom de formulaire. 2. Saisissez l'adresse e-mail de destination (ou sélectionnez une adresse e-mail connue dans le menu déroulant). Puisque tout le monde n'a pas accès ou ne souhaite pas disposer de son propre serveur Web, vous pouvez utiliser les ressources Web Serif. Il s'agit d'un service gratuit de passerelle du Web vers une messagerie électronique. Il recueille les données de formulaire via Serif et les envoie à votre adresse e-mail personnelle. Pour bénéficier de ce service, vous devez disposer d'un compte client (pour des raisons de sécurité) vous permettant l'accès aux ressources Web Serif, grâce auquel vous pouvez créer, éditer et supprimer vos destinations de messagerie (appelées Destinataires de formulaire). 13.3.5.2 Pour configurer les ressources Web Serif : 132 1. L'icône Ressources Web Serif étant activée, ajoutez un nom de formulaire. 2. Cliquez sur le bouton Sélectionner (connectez-vous aux ressources Web Serif). 3. Sélectionnez les informations d'e-mail de destination dans la boîte de dialogue qui s'affiche. • Saisissez une adresse e-mail de destination dans le champ Adresse e-mail. • Personnalisez le sujet, la ligne qui apparaîtra dans l'adresse e-mail du visiteur de votre site, p. ex. Envoi d'e-mail de Rainbow_WWW: Contact. • Ajoutez une message de confirmation qui s'affichera lorsque l'internaute cliquera sur le bouton Envoyer. • Dans le champ Langue, définissez la langue dans laquelle le message de confirmation sera envoyé. Ajouter du contenu dynamique En créant un élément de formulaire Zone de saisie pour les adresses e-mail uniquement, vous pouvez également envoyer directement des e-mails de confirmation au visiteur du site. Vous devrez vérifier que l'option RWS: Envoyer un e-mail de confirmation est cochée dans les propriétés de la zone de saisie. Cochez Répondez-moi dans la boîte de dialogue ci-dessus afin d'insérer l'adresse e-mail du développeur Web dans le champ Répondre de l'e-mail de confirmation. Cela permet au visiteur de contacter directement par e-mail le développeur Web. 4. Cliquez sur Ajouter. L'entrée est créée et ajoutée à la liste Destinataires disponibles. Vous constaterez que l'entrée est classée comme étant "Non confirmée". Avant que le service ne commence, vous recevrez un message de confirmation d'e-mail à votre adresse électronique. Cliquez sur le lien pour activer le service. L'entrée devient alors "Confirmée". 5. (Facultatif) Répétez la procédure précédente pour ajouter des destinataires, puis sélectionnez une entrée pour l'activer. 6. Cliquez sur OK pour fermer la boîte de dialogue. 13.3.5.3 Pour activer la sécurité CAPTCHA au cours de la transmission : 1. Cochez la case Utiliser le portail CAPTCHA pour activer un système de sécurité au moment où le visiteur de votre site envoie le formulaire. Ce système permet de se protéger contre le spam. Une boîte de dialogue apparaît et présente au visiteur une chaîne de texte aléatoire qu'il doit saisir dans une zone de texte. Si le résultat du contrôle est positif, alors l'envoi du formulaire est autorisé. 2. Choisissez une méthode de transmission, un type d'encodage et une fenêtre ou un cadre cible. Le visiteur reçoit une page de confirmation basique générée par les ressources Web Serif pour confirmer la bonne réception des données du formulaire. Vous pouvez créer et affecter votre propre page web d'accusé réception à utiliser au lieu de cette page de base. Votre propre page est une page web comme les autres, sur laquelle vous pouvez ajouter vos propres informations et que vous pouvez mettre en forme dans le même style et avec le même aspect que le reste de votre site. 13.3.5.4 Pour ajouter une page de confirmation personnalisée : 1. Cliquez avec le bouton droit de la souris sur le formulaire (les données doivent être transmises via les ressources Web Serif) et sélectionnez Editer les propriétés du formulaire. 2. Ouvrez l'onglet Champs masqués, cliquez sur le bouton Ajouter et ajoutez le mot "redirect" au champ Nom et votre URL cible, précédée de http:// (c'est-à-dire l'adresse Web de votre propre page d'accusé de réception) dans le champ Valeur. 3. Cliquez sur OK. La nouvelle page Web est affichée lors de la prochaine transmission de formulaire. Aucune donnée personnelle n'est stockée sur les serveurs web de Serif. Toutes les données de formulaires sont redirigées en temps réel. Cette option est destinée aux développeurs Web expérimentés bénéficiant d'une expertise dans le développement de scripts. Fichier script sur mon disque dur 13.3.5.5 Pour configurer un fichier de script local : 1. L'icône Un script sur mon disque dur étant activée, ajoutez un nom de formulaire. 2. Accédez à votre fichier de script local (généralement un fichier .CGI, .PL, .DLL ou 133 WebPlus X4 Manuel d’utilisation .EXE) à l'aide du bouton Parcourir. Un script distant 3. Cochez Intégrer pour inclure le script dans le site. Si l'option n'est pas cochée, le fichier script n'est pas relié au site (toute modification apportée au script ne s'appliquera pas dans le cadre du site). 4. Si vous le souhaitez, vous pouvez définir un nom de fichier et un dossier pour le script à l'aide du bouton Options d'exportation. 5. Choisissez une méthode de transmission, un type d'encodage, une fenêtre ou un cadre cible et un jeu de caractères. Utilisez cette option si votre FAI ne vous autorise pas à exécuter vos propres scripts sur votre espace Web personnel. Votre FAI vous fournit peut-être à la place un fichier de script basique pouvant être lié à votre page Web. En général, le script transmet les données du formulaire à votre adresse de messagerie (déjà définie auprès du FAI). 13.3.5.6 Pour configurer un fichier de script distant : 1. L'icône Un script distant étant activée, ajoutez un nom de formulaire. 2. Saisissez une URL pointant directement vers un fichier de script, généralement un fichier .CGI, .PL, .DLL ou .EXE. 3. Choisissez une méthode de transmission, un type d'encodage, une fenêtre ou un cadre cible et un jeu de caractères. 1. 13.4 Flux RSS et podcasts Les flux RSS (Really Simple Syndication) sont des flux d'informations mis à jour en permanence, très utilisés sur les sites Web dont le contenu ne cesse d'évoluer. La technologie des flux RSS est devenue incontournable, comme vous pouvez le constater si vous consultez régulièrement des sites d'informations. Sur le Web, les flux RSS sont signalés par le symbole . L'utilisateur peut cliquer sur ce symbole pour s'abonner manuellement au automatiquement au flux RSS correspondant, par l'intermédiaire d'un lecteur RSS. Les podcasts sont des flux de syndication comme les flux RSS. Leur fonction est toutefois légèrement différente dans la mesure où ils s'appuient sur des supports numériques tels que des fichiers audio et vidéo. Pour dire les choses simplement, les flux RSS permettent la publication d'articles, tandis que les podcasts permettent la diffusion d'informations sous forme d'épisodes. Dans WebPlus, vous pouvez créer vos propres flux RSS ou podcasts que vous pourrez alors publier et mettre à jour régulièrement. Vous deviendrez alors l'éditeur (plutôt que le lecteur) d'un ou de plusieurs services d'informations donnant accès à des bulletins d'informations, à des résumés de site Web ou à vos propres articles. Si vous décidez de publier des podcasts, vous diffuserez des clips multimédia sous forme d'épisodes. Dans les exemples ci-dessous, nous évoquerons le podcast d'un établissement scolaire fictif. Ce podcast, constamment mis à jour, se compose de liens permettant à l'utilisateur d'accéder différents médias (à la fois audio et vidéo). Les procédures de configuration d'un flux RSS et de configuration d'un podcast dans WebPlus sont similaires. Pour créer votre flux RSS ou votre podcast, vous utiliserez d'ailleurs le même outil WebPlus, à savoir l'outil Flux RSS. Si vous voulez réutiliser un flux RSS/podcasts tiers et l'ajouter à votre page Web, vous pouvez intégrer un lecteur dans votre page par le biais de l'outil Lecteur RSS. 13.4.1 Créer des flux RSS ou des podcasts L'outil Flux RSS vous permet de créer un ou plusieurs flux RSS/podcasts auxquels les visiteurs de votre site Web pourront s'abonner via leur lecteur de flux autonome, leur navigateur Internet ou bien Apple iTunes®. Une fois le flux créé, vous pouvez définir un certain nombre de paramètres le concernant : titre et description du flux, images associées, informations sur les droits d'auteur, catégories, mots clés, etc. 13.4.1.1 Pour insérer un flux RSS ou un podcast : 1. 134 Cliquez sur le bouton Outil Flux RSS dans la palette RSS de la barre d'outils Objets Web. Ajouter du contenu dynamique 2. Cliquez sur le bouton Ajouter un flux RSS ou Ajouter un podcast pour créer un nouveau flux RSS ou un nouveau podcast. Le nom du nouveau flux (Nouveau flux RSS ou Nouveau podcast) apparaît dans le menu situé à gauche. Sélectionnez ce flux pour afficher la liste des paramètres modifiables. Cliquez sur la colonne Valeur pour effectuer les modifications nécessaires. Vous pouvez ajouter, sélectionner ou modifier des valeurs par l'intermédiaire des menus déroulants, des boîtes de dialogue et des zones de saisie qui vous sont proposés. Voici la liste des paramètres que vous pouvez définir Si nous reprenons l'exemple du podcast et des épisodes listés mis en place par le collège, nous obtenons les paramètres suivants : Vous remarquerez une série d'épisode répertoriée sous le flux de podcast (podcast de l'école Bluewood). Nous aborderons plus tard la procédure à suivre pour ajouter les épisodes. 3. Cliquez sur OK. 4. Pour placer le flux sur la page, positionnez le curseur page. Un bouton ou à l'emplacement de votre choix puis cliquez sur la (flux RSS et podcast, respectivement) apparaît à l'emplacement du pointeur. Dans le cas d'un abonnement automatique au podcast (abonnement en un clic), ajoutez une étiquette au symbole du podcast pour indiquer l'application qui sera utilisée pour l'abonnement. 13.4.1.2 Pour remplacer un flux par un autre : • Après avoir créé un flux RSS ou un podcast, double-cliquez sur le flux de la page pour rediriger le bouton vers un autre flux. Il vous suffit de sélectionner une autre entrée et de cliquer sur OK. Si vous mettez en place un podcast, la boîte de dialogue vous permet de sélectionner l'application devant être utilisée pour l'abonnement automatique (Google Reader, My Yahoo! ou iTunes). Faites votre choix dans la liste déroulante Ouvrir le Podcast avec. Pour un abonnement manuel au flux RSS ou au podcast, utilisez l'option RSS Standard. Une fois le flux RSS ou le podcast créé, vous pouvez ajouter des articles ou des épisodes au flux, puis les publier. Si vous mettez à jour votre page Web, vous devez la republier (reportez-vous à Publier le site sur le Web). 13.4.1.3 Pour ajouter ou mettre à jour des articles ou des épisodes : Outil Flux RSS de la barre d'outils Objets Web de WebPlus. 1. Cliquez sur le bouton 2. Dans la boîte de dialogue Flux RSS, sélectionnez le flux adéquat, puis cliquez sur le bouton Gestionnaire de flux RSS. 3. Cliquez sur le bouton Ajouter un article ou Ajouter un épisode situé dans la partie droite de la boîte de dialogue. Une nouvelle entrée apparaît sous le flux sélectionné. Un titre provisoire lui est attribué : Nouvel article (pour un flux RSS) ou Nouvel épisode (pour un podcast). 4. Modifiez votre article/épisode ainsi que ses paramètres (voir ci-dessous). Voici la liste des paramètres que vous pouvez définir. 135 WebPlus X4 Manuel d’utilisation Si nous reprenons une nouvelle fois l'exemple du podcast mis en place par le collège (voir ci-dessus), nous obtenons un premier épisode configuré de la façon suivante : 5. Cliquez sur OK, puis de nouveau sur OK. Si vous diffusez des fichiers média stockés en local, vous serez invité à définir l'URL du site lors de la publication. Cela permet de rendre les fichiers locaux accessibles aux utilisateurs. 13.4.2 Soumission de podcasts Si vous souhaitez diffuser votre podcast par iTunes, vous devez, en tant que diffuseur, soumettre votre podcast à iTunes. Le personnel d'iTunes examinera votre podcast afin de vérifier plusieurs éléments : identifiant de connexion adéquat, problèmes techniques et présence éventuelle d'un langage explicite, de contenu à caractère injurieux ou de contenu soumis à droits d'auteur. Si votre podcast est accepté, les utilisateurs d'iTunes pourront s'y abonner. 13.4.2.1 Pour soumettre un podcast à iTunes 7 : 1. Lancez iTunes. 2. Cliquez sur Podcasts dans la section BIBLIOTHÈQUE. 3. Sélectionnez le bouton Répertoire des podcasts au bas de la fenêtre iTunes. 4. Faites défiler la fenêtre jusqu'à ce que la zone Pour les podcasteurs apparaisse à l'écran. Cliquez sur Soumettez un podcast. 5. Dans l'écran qui s'affiche, collez l'URL de votre flux dans la zone URL de flux du podcast. L'URL de votre flux doit se terminer par un nom de fichier xml (par exemple, rss_1.xml). 6. Cliquez sur Continuer. 13.4.3 Abonnement 13.4.3.1 S'abonner à des flux RSS et des podcasts Les visiteurs de votre site Web peuvent s'abonner à ces flux de différentes manières. Type d'abonnement Méthode manuelle Il suffit à votre visiteur de cliquer sur un symbole de diagnostic indiquant le type de flux : pour les flux RSS pour les podcasts Le flux RSS ou le podcast que vous avez publié est associé à un bouton d'abonnement sur lequel l'utilisateur peut cliquer. Vous pouvez ajouter le flux aux favoris de votre navigateur. 136 Ajouter du contenu dynamique automatique (podcasts uniquement) L'utilisateur clique sur une icône (ou le lien hypertexte associé) suivant l'application avec laquelle il souhaite s'abonner. Le podcast et le lecteur étant définis de manière explicite, l'abonnement s'effectue de façon automatique. Au lieu d'un bouton d'accès direct, il est possible de créer un lien hypertexte permettant d'accéder directement au nouveau flux. On utilise alors un type de lien spécial appelé Flux RSS. 13.4.3.2 Abonnement via iTunes Une fois qu'un diffuseur a soumis son flux à iTunes et que ce flux a été accepté, un utilisateur peut s'abonner au podcast via iTunes. Pour ce faire : 1. Lancez iTunes. 2. Cliquer sur S'abonner au podcast dans le menu Avancé. 3. Entrer l'URL du flux dans la zone de saisie de la boîte de dialogue, puis cliquer sur OK. Le podcast apparaît sous forme d'entrée dans la fenêtre. Les boutons Obtenir et Obtenir tout, situés en regard de chaque épisode ou flux, vous permettent de télécharger les nouveaux épisodes (effectuez un clic droit sur un flux et sélectionnez Actualiser le podcast. Les fichiers média sont alors téléchargés et peuvent être lus directement dans iTunes. Pour se désabonner du flux, l'utilisateur doit cliquer sur le bouton Se désabonner situé au bas de la fenêtre. 13.4.4 Inclure des flux tiers Plutôt que de créer votre propre flux RSS ou podcast, vous pouvez inclure sur votre page Web un flux RSS provenant d'un autre site. Si vous ajoutez le lecteur de flux RSS à votre page, l'abonnement au flux RSS ou podcast choisi est automatiquement mis en place. Cette section explique comment intégrer un flux dans une page Web et recevoir automatiquement les articles ou les épisodes correspondants (notez toutefois qu'il existe d'autres façons de s'abonner à un flux RSS ou à un podcast, par le biais de navigateurs Web ou d'iTunes par exemple). Dans cet exemple, un flux RSS financier a été ajouté à notre page WebPlus : 13.4.4.1 Pour ajouter un flux RSS ou un podcast à votre page : 1. Recherchez un flux RSS sur un site d'informations. Repérez l'un des boutons suivants : 2. Copiez et collez l'URL du flux dans le Presse-papiers. Dans Internet Explorer, vous pouvez cliquer avec le bouton droit de la souris sur le bouton/lien d'abonnement et sélectionner Copier le raccourci. Dans Mozilla Firefox, vous pouvez cliquer avec le bouton droit de la souris sur le bouton/lien d'abonnement et sélectionner Copier l'adresse du lien. 3. Cliquez sur le bouton 4. Dans la boîte de dialogue, collez l'URL du flux dans le champ URL des données RSS. 5. (Facultatif) Sélectionnez une couleur, une police, une taille de caractères ou un style pour le titre, la manchette et le résumé du flux RSS. Outil Lecteur RSS dans la palette RSS de la barre d'outils Objets Web. 137 WebPlus X4 Manuel d’utilisation 6. (Facultatif) Définissez l'heure locale de votre site dans la liste déroulante Fuseau horaire. 7. (Facultatif) Modifiez le Format de la date (MM/JJ ou JJ/MM) pour la date de publication de l'article, qui s'affiche dans l'en-tête de l'article. 8. Cliquez sur OK. 9. Le pointeur s'affiche. Pour insérer la fenêtre du flux RSS à sa taille par défaut, cliquez sur la page. OU Pour définir la taille de la fenêtre du flux RSS, tracez un cadre par glisser-déplacer et relâchez le bouton de la souris. La fenêtre du flux (de couleur orangée) s'affiche, présentant l'URL. Vous devez publier la page pour obtenir un aperçu du nouveau flux. Gardez à l'esprit que le contenu est automatiquement mis à jour à mesure qu'il est actualisé sur son site d'origine. En général, les podcasts publiés se présentent comme le montre l'illustration ci-dessous. Les utilisateurs qui accèdent au flux peuvent écouter chacun des épisodes proposés : il leur suffit pour cela de cliquer sur un lien audio donnant généralement accès à un fichier MP3. Une fois téléchargé et enregistré, le fichier peut être lu sur le lecteur défini comme lecteur par défaut (par exemple, Windows Media Player). 13.5 E-commerce 13.5.1 Qu'est-ce que l'E-Commerce L'E-Commerce concerne l'achat et la vente de marchandises sur the Internet. De nos jours, il est difficile d'échapper au commerce en ligne lorsqu'on consulte Internet — Vous avez très certainement déjà fait des achats sur Internet pour vous procurer des CD, des livres, des billets d'avion, etc. Les sites Web qui exercent ce genre de commerce électronique utilisent généralement un système de panier d'achats et un système de traitement des paiements. Un panier d'achat est un panier virtuel (pensez à un chariot de supermarché) stockant les articles que vous choisissez et dont l'utilisation est liée à un système de traitement des paiements (qui remplace la caisse du supermarché). Pour les grandes entreprises, la technologie du panier d'achat est développée en interne (même si le traitement des paiements est parfois réalisé par une société tierce). Pour les sociétés ou organismes plus petits, le panier est normalement une solution fournie par un tiers, en raison de coûts/ressources limités. Les fournisseurs de panier d'achat sont nombreux — tous fonctionnant sur la base d'un compte et équipés pour accepter les cartes de crédit plutôt qu'un système de paiement plus traditionnel (téléphone, par exemple). Où intervient WebPlus dans ce contexte? D'une part, WebPlus vous permet de choisir l'un des fournisseurs de panier que nous avons préalablement sélectionnés et, d'autre part, il vous permet de se connecter au fournisseur de panier par l'intermédiaire d'un formulaire ou d'un lien (un simple bouton ou un lien hypertexte associé à un objet) sur la page WebPlus. Les formulaires permettent de définir les options d'achat (couleur, quantité), ainsi que de calculer le montant des taxes, des frais d'envoi etc. Les liens permettent d'effectuer des achats en un clic sans options d'achat. Les fonctionnalités varient considérablement en fonction des fournisseurs. 13.5.1.1 Configurer le fournisseur de panier d'achat Différents fournisseurs de panier peuvent être configurés dans WebPlus. Ils s’agit des plus couramment employés et vous en avez sans doute déjà utilisés certains, tels que PayPal®, si vous être client d’eBay®. La procédure de configuration vous dirige vers le site Web du prestataire auprès duquel vous pouvez vous inscrire. Parcourez le site Web du prestataire pour plus d’informations sur les fonctionnalités du panier. 13.5.1.1.1 1. 138 Pour configurer un fournisseur de panier d'achat : Cliquez sur le bouton Configuration de l'E-Commerce dans la palette E-Commerce de la barre d'outils Objets Web. Ajouter du contenu dynamique 2. La boîte de dialogue Configuration E-Commerce vous propose le choix entre deux options selon que vous êtes ou non déjà utilisateur de l'un des fournisseurs de panier d'achat : • Si vous êtes un nouvel utilisateur, choisissez un fournisseur en cliquant sur son bouton radio, puis sur le bouton Souscrire maintenant. Le site Web du fournisseur s'affiche dans une nouvelle fenêtre de navigateur où vous pouvez vous enregistrer auprès de ce fournisseur. • Si vous êtes déjà utilisateur, cliquez sur le bouton correspondant à votre fournisseur, puis sur Suivant>. Cette option se contente de définir un fournisseur de panier par défaut pour votre site Web (au lieu de configurer un compte fournisseur). 3. La boîte de dialogue suivante varie en fonction du prestataire et peut proposer des options de test, des sélections de fenêtres, des identifiants, des options concernant la monnaie et les taxes. 4. Cliquez sur le bouton Terminer pour achever la configuration du panier d'achat. Par exemple, le choix de PayPal permet de définir une adresse e-mail où seront envoyés les paiements ou un mode "Sandbox", c'est-à-dire un outil de test permettant d'essayer votre panier d'achat avant de le mettre en ligne (pour ne pas commencer à encaisser de l'argent avant d'être prêt). Cliquez sur le bouton En savoir plus pour définir un identifiant de connexion "Sandbox" séparé en plus de votre "vrai" identifiant PayPal. Après avoir configuré le panier d'achat, vous devez Insérer un formulaire e-commerce. 13.5.2 Insérer un objet E-Commerce (PayPal) La création d'objets E-Commerce dans WebPlus s'effectue avec un assistant. Un objet E-Commerce peut être ajouté à la page Web sous la forme d'un formulaire ou d'un lien (c'est-à-dire d'un simple bouton ou d'un lien hypertexte) en renseignant une succession de boîtes de dialogue. Le choix d'utiliser des formulaires ou des liens dépend des caractéristiques des articles que vous prévoyez de vendre et de la manière dont vous voulez les vendre. Si, par exemple, vous êtes un négociant cherchant à vendre une certaine quantité de briques, vous pouvez créer un bouton E-Commerce (sous la forme d'un lien Acheter maintenant). Ce choix suppose que toutes les briques sont du même style et de la même couleur, et que l'acheteur souhaite acheter une quantité fixée. En effet, le lien est uniquement un bouton, qui ne peut contenir les options d'achat "interactives" nécessaires pour un achat plus complexe. Le clic d'un acheteur achète un produit standard rien de plus. Utile dans certaines situations, cette solution peut être complètement inadaptée dans d'autres. Les achats plus complexes utilisent des formulaires E-Commerce, qui apportent interactivité et souplesse à l'utilisateur. Si vous comptez mettre en place une solution d'E-Commerce et proposer à la vente un grand nombre d'articles, vous pouvez enregistrer les informations sur ces articles dans une base de données Serif conçue spécialement pour l'ECommerce. Il vous suffit ensuite d'insérer des formulaires récurrents (ou des zones récurrentes) dans votre page Web pour que les articles enregistrés dans la base de données soient répertoriés et proposés à la vente sur votre site, à l'issue de la fusion de celui-ci avec la base. Reportez-vous à Utiliser la fusion de base de données avec l'ECommerce dans l'aide en ligne. La boîte de dialogue affichée lorsque vous ajoutez un objet E-Commerce dépend entièrement du fournisseur de panier d'achat (reportez-vous à Configurer le fournisseur de panier d'achat). Les procédures suivantes présupposent que PayPal est configuré comme panier. 13.5.2.1.1 Pour insérer un objet E-Commerce : Insérer un objet E-Commerce dans la palette E-Commerce de la barre 1. Cliquez sur le bouton d'outils Objets Web. 2. Dans la boîte de dialogue Ajouter un objet PayPal, choisissez l'adresse e-mail qui doit recevoir les informations sur le paiement. WebPlus utilise l'adresse e-mail définie lors de la configuration du panier d'achat. Mais vous pouvez également désactiver la case Utiliser le compte par défaut du site et définir une autre adresse e-mail pour remplacer celle définie par défaut pour le site. 139 WebPlus X4 Manuel d’utilisation 3. Sélectionnez un type d'objet dans la section Formulaire PayPal. Sélectionnez une option "Formulaire" si vous souhaitez créer un formulaire E-Commerce proposant des options d'achat (couleur ou quantité par exemple). Si aucune option d'achat n'est proposée pour le produit en vente, vous pouvez utiliser un objet de type "Lien" (afin de créer un bouton E-Commerce) sur lequel l'utilisateur peut cliquer. Les zones et formulaires récurrents vous permettent d'extraire des fiches articles d'une base de données, plutôt que de les définir explicitement via une boîte de dialogue Informations sur l'article (reportez-vous à Utiliser la fusion de base de données avec l'E-Commerce dans l'aide en ligne). 4. (Facultatif). Si un formulaire ou un bouton ne répond pas à vos attentes, activez plutôt la dernière option afin de coller un code dans la boîte de dialogue suivante. Le code est généré par le site Web PayPal (sous Merchant Tools). Cliquez sur Suivant>. 5. Dans la boîte de dialogue suivante, définissez le bouton à utiliser. Il est possible d'activer un bouton de texte standard (saisissez une chaîne de caractères lorsqu'il est activé), d'activer un bouton image standard (lorsqu'il est activé, sélectionnez l'un des nombreux boutons prédéfinis proposés dans la fenêtre déroulante) ou de charger un bouton image (lorsque le bouton est activé, cliquez sur Parcourir pour accéder à votre image et la sélectionner). Les images sont intégrées au site par défaut, à moins que vous ne désactiviez la dernière option. Cliquez sur Suivant>. 6. Les informations relatives à l'identification des articles, au prix, à la taxation et au poids peuvent être définies dans la boîte de dialogue Informations sur l'article. Les options sélectionnables sont les suivantes : • Nom de l'article : nom de l'article à vendre. Apparaît dans le formulaire et dans le panier d'achat. • Autoriser le client à spécifier le nom de l'article : cochez cette case pour remplacer le nom d'article ci-dessus par une zone de texte dans laquelle le visiteur de votre site pourra saisir son nom d'article (peut également servir à spécifier des informations sur un don). • Identifiant : ajoutez une chaîne de caractères identifiable pour assurer le suivi de l'article chez PayPal. • Unité : définit la devise dans laquelle la transaction s'effectuera. • Prix : prix de l'article. S'affiche à l'écran par défaut. • Autoriser le client à spécifier le montant : cochez cette case pour remplacer le prix ci-dessus par une zone de texte dans laquelle le visiteur pourra saisir son propre prix. A utiliser dans les formulaires de don, où le client fixe le prix. • Annuler les paramètres de taxe : cochez cette case pour ignorer le paramètre de taxe défini par le fournisseur pour l'article, puis indiquez un taux fixe de taxe pour l'article, par exemple 0% pour les dons (exonérés de TVA) à des organismes de charité. • Poids : Définissez le poids d'un article si vous utilisez un mode d'expédition basé sur le poids (États-Unis uniquement), défini dans votre profil PayPal. Généralement, l'unité de mesure utilisée est la livre (lb), mais vous pouvez choisir le kilogramme (kg) si besoin. Configurez les paramètres ci-dessus en fonction des besoins et cliquez sur Suivant>. Si vous utilisez une base de données E-Commerce, la boîte de dialogue Informations sur l'article vous permet de sélectionner une base de données E-Commerce adaptée spécifiquement au fournisseur sélectionné. N'oubliez pas de définir la devise dans laquelle les transactions seront effectuées. 7. 8. Pour les formulaires E-Commerce uniquement, deux boîtes de dialogue s'affichent : • La boîte de dialogue Description de l'article vous permet d'inclure une image (p. ex., pour afficher un aperçu de l'article en vente), et des descriptions courtes et longues qui s'afficheront dans le formulaire. Cliquez sur Suivant>. • La boîte de dialogue Options des articles vous permet de créer des zones de saisie, des listes déroulantes, des boutons radio, et des noms fixes (jusqu'à 10 options par formulaire peuvent être sélectionnées dans PayPal ; une option de modification de prix uniquement) — vous pouvez tout créer de toutes pièces ou utiliser des champs d'options préalablement enregistrés. Cliquez sur Suivant>. Ces options ne sont pas disponibles dans le cas d'un formulaire récurrent. Dans la boîte de dialogue Informations sur l'article, définissez une quantité par défaut dans la zone de saisie ou cochez la case pour laisser l'utilisateur spécifier une quantité lors du paiement (options non disponibles dans le cas d'un formulaire récurrent). OU Cochez l'option Ajouter une zone de saisie pour laisser le client définir la quantité à commander. Pour les frais de livraison et de manutention associés à la commande, saisissez un montant défini pour les frais d'expédition, de manutention et supplémentaires. 140 Ajouter du contenu dynamique Si vous laissez ce champ vide, le profil PayPal par défaut sera utilisé. Ces options ne sont pas disponibles dans le cas d'un formulaire récurrent. Cliquez sur Suivant>. 9. Dans la boîte de dialogue Informations complémentaires, vous avez le choix entre inviter le client à saisir une adresse, ne pas lui demander ou lui imposer de saisir une adresse. Vous pouvez également poser une question au client dans la fenêtre d'édition. Cliquez sur Suivant>. 10. La boîte de dialogue Pages de paiement propose des réglages concernant le paiement : • Saisissez le nom du Style de la page de paiement (si elle a déjà été définie via la connexion PayPal). • Choisissez la langue de la page de connexion PayPal. Faites votre choix dans la liste déroulante. • Modifiez le texte du bouton Continuer sur la page de confirmation. • Si nécessaire, définissez une page de paiement valide et/ou une page de paiement non valide. Saisissez l'URL de la page ou sélectionnez une entrée dans la liste déroulante. 12. Si vous créez un formulaire E-Commerce, sélectionnez une mise en page de formulaire dans la boîte de dialogue correspondante. Cochez ou décochez les éléments selon qu'ils doivent figurer ou non dans la mise en page du formulaire. Vous pouvez décider de masquer le prix et, si vous utilisez des zones récurrentes, d'afficher ou de masquer l'image de l'article, la description courte, la description longue, la valeur des options fixées et une quantité fictive dans la zone de saisie. Vous pouvez également reformater le formulaire à l'aide de l'option Reformater le formulaire maintenant. 13. Cliquez sur Terminer. 14. Pour insérer le formulaire ou le bouton, positionnez le curseur où vous souhaitez que l'élément apparaisse sur la page, puis cliquez. 13.5.2.1.2 1. Sélectionnez le formulaire, cliquez avec le bouton droit de la souris sur celui-ci et sélectionnez Modifier le formulaire E-Commerce. OU Sélectionnez le bouton, cliquez avec le bouton droit de la souris sur celui-ci et sélectionnez Modifier le formulaire E-Commerce. 2. Modifiez les paramètres d'E-Commerce écran par écran dans la boîte de dialogue affichée. 13.5.2.1.3 • Pour modifier un formulaire ou un bouton E-Commerce : Pour convertir un formulaire standard : Cliquez sur un formulaire E-Commerce existant et sélectionnez Convertir en formulaire. 13.6 Objets intelligents 13.6.1 Les objets intelligents Pour les fonctions Web interactives modernes (compteurs, forums, blogs, réservation de ressources, etc.), WebPlus utilise les objets intelligents côté serveur placés sur la page. Les objets intelligents stockent sur le serveur Serif sécurisé les données recueillies relatives aux visiteurs de votre site Web. Ces objets sont disponibles dans les Ressources Web Serif, un service en ligne sécurisé permettant non seulement de créer et d'insérer des objets intelligents, mais également de stocker et de géer les données d'objets une fois que votre site est publié et en ligne. Examinons les différents objets intelligents disponibles parmi les Ressources Web et leur rôle. Nom Rôle Permet d'indiquer combien de personnes consultent actuellement la page Web. Visiteurs actuels Blog Un blog est un journal de bord intégré à votre site Web dans lequel vous pouvez faire figurer des articles rédigés dans un éditeur RTF simple à utiliser. Les visiteurs de votre page Web peuvent commenter vos articles. Si vous décidez de créer un blog, vous pouvez : 141 WebPlus X4 Manuel d’utilisation Forum • ajouter votre profil personnel ; • ajouter des liens vers des sites de partage de signets ; • utiliser des rétroliens pour établir des références croisées entre plusieurs blogs (il est possible également d'utiliser des rétroliens reçus) ; • classer les articles en catégories à l'aide d'étiquettes pour que les utilisateurs puissent les retrouver plus facilement ; • donner aux utilisateurs la possibilité de s'abonner à des articles (ils peuvent ainsi recevoir les articles/commentaires les plus récents) par le biais de lecteurs de flux RSS ; • mettre en oeuvre le système de protection anti-spam CAPTCHA. • appliquer un style visuel (thème) à votre blog ; • Utiliser des groupes d'éditeurs pour la publication d'articles multi-auteurs. Vous avez la possibilité d'ajouter un forum de discussion à votre site. Les forums s'articulent autour de "fils de discussion" et peuvent être consultés en mode Plein écran. Si vous décidez de créer un forum, vous pouvez : • créer différentes catégories (par exemple, Automobile) contenant plusieurs sousforums (Véhicules anciens, Tuning, Sport automobile, etc.) ; • établir un accès utilisateur pour les utilisateurs et les modérateurs ; • définir le niveau de confidentialité du forum (public ou privé) ; • appliquer un thème (style) à l'objet forum pris dans son ensemble ; • créer, définir et attribuer des rangs d'utilisateur ; • définir les permissions des utilisateurs. Les utilisateurs peuvent consulter un certain nombre de rubriques et de posts, afficher le dernier post envoyé, et bien entendu, soumettre leur propre post sur le forum. Compteur de visites Infos Sondage Système de gestion du contenu (SGC) Gestionnaire de réservation de ressources Messagerie instantanée 142 Un décompte du nombre de visites de la page courante (réinitialisé selon les besoins). Différents styles peuvent être adoptés. Vous pouvez ajouter une fenêtre d'ajout de messages (news) à votre page Web. L'objet prend en charge l'édition au format RTF, ainsi que les styles de paragraphe, les liens hypertexte, l'insertion de médias et même l'édition du code HTML source. Vous pouvez établir un questionnaire en ligne pour connaître les opinions des visiteurs de votre site. Permet au développeur Web d'ajouter un contenu aux pages Web, sans avoir à effectuer la publication via WebPlus. Le contenu est basé sur des articles que vous pouvez classer par catégories, créer, éditer et supprimer. Les visiteurs du site peuvent commenter et attribuer des notes aux articles. Héberge la réservation en ligne de chambres d'hôtel, de salles de réunion, de salles de répétition, de places de théâtre, etc. Réservez plusieurs heures ou jours, périodiquement, et avec des options de prix pour les différents groupes d'âges. Sert de fenêtre de tchat interactive, similaire à Windows Messenger. Permet à vos visiteurs de discuter entre eux. Ajouter du contenu dynamique L'objet intelligent Liste d'utilisateurs propose deux modes : Liste d'utilisateurs Statistiques du site • Mode Liste de diffusion : Vous pouvez donner à vos visiteurs la possibilité de s'inscrire à une liste de diffusion qui leur permettra de recevoir une lettre d'informations, la confirmation d'un événement, des renseignements, etc. Les listes peuvent être gérées manuellement ou par inscription automatique. • Mode Accès utilisateur : Contrôle l'accessibilité aux pages, aux forums, aux blogs et au CMS en se basant sur des groupes d'utilisateurs. Reportez-vous à Contrôle d'accès, pour plus d'informations. • Mettre en œuvre le système de protection anti-spam CAPTCHA lors de l'enregistrement des utilisateurs. • Créer des groupes utilisateur (et si on le souhaite, permettre aux visiteurs d'ouvrir un compte, de se connecter automatiquement et de se connecter à des objets intelligents). • Ajouter des utilisateurs à un groupe d'utilisateurs ou en retirer ; suspendre ou interdire l'accès à des utilisateurs. Permet d'obtenir et d'afficher des statistiques de fréquentation d'un site Web par l'intermédiaire du système d'analyse Web. Vous pouvez activer cette fonction par le biais de la boîte de dialogue Propriétés du site mais vous ne pouvez pas l'intégrer à votre site. Pour des raisons de sécurité, ces objets ne sont accessibles que par connexion aux Ressources Web Serif à partir de WebPlus. Si vous n'avez pas d'identifiant et de mot de passe valides, vous devez commencer par créer un compte Ressources Web. • Si votre adresse e-mail est déjà connue de Serif (vous venez de vous enregistrer ou vous l'avez fait précédemment), quelques questions vous seront posées pour achever l'enregistrement de votre compte. • Si vous ne vous êtes jamais inscrit auprès de Serif, vous devrez répondre à davantage de questions en suivant les instructions affichées à l'écran. 13.6.1.1.1 Outil Objet intelligent de la barre d'outils Objets Web. 1. Cliquez sur le bouton 2. Dans la boîte de dialogue de connexion, cliquez sur le lien Créer compte sous les zones de saisie. 3. Dans la boîte de dialogue suivante, saisissez votre adresse email courante et votre mot de passe deux fois. Vous devez lire et accepter les termes et conditions Serif (cochez la case correspondante). 4. Cliquez sur le bouton S'inscrire. 5. Une boîte de dialogue supplémentaire vous demande de saisir des informations personnelles et de cocher quelques cases pour indiquer si vous voulez recevoir les lettres d'information de Serif, les offres spéciales. 6. Un message de confirmation sera envoyé à votre adresse électronique. Dès que vous aurez cliqué sur le lien figurant dans le message, vous aurez la possibilité de vous connecter aux Ressources Web Serif (vous devrez pour cela cliquer de nouveau sur le bouton Outil Objet intelligent). 13.6.1.1.2 • Pour créer un compte Ressources Web Serif : Pour nettoyer les informations sur le compte : Sélectionnez Outils/Options et cliquez sur Purger Détails des comptes dans le menu Options/Général. Les informations de connexion aux Ressources Web Serif seront effacées et la connexion ne pourra plus être établie automatiquement. Vous devrez saisir ces informations la prochaine fois que vous souhaiterez accéder au service. Assurez-vous donc de ne pas avoir oublié votre mot de passe. 13.6.1.1.3 Pour accéder aux Ressources Web : Outil Objet intelligent de la barre d'outils Objets Web. 1. Cliquez sur le bouton 2. À l'invite, saisissez votre identifiant et votre mot de passe. Cochez la case Mémoriser les informations pour accéder directement aux Ressources Web par la suite (sans écran de connexion). 3. Cliquez sur le bouton Connexion. La boîte de dialogue Objets intelligents apparaît. 143 WebPlus X4 Manuel d’utilisation Vous pouvez vérifier les informations de votre compte dans la boîte de dialogue Objets intelligents en cliquant sur le bouton Mon compte. 13.6.1.2 Créer des objets intelligents Considérons d'une façon générale les objets intelligents comme les éléments que vous utiliserez sur votre page comme indiqué précédemment. Les objets intelligents ne sont pas ajoutés directement à la page à partir des Ressources Web Serif, mais tout d'abord à votre propre bibliothèque d'objets (la bibliothèque qui vous permet de gérer et de modifier chaque objet) ils peuvent ensuite être ajoutés — immédiatement ou par la suite — à la page Web. Certains objets intelligents ne peuvent être utilisés que si un autre objet intelligent a été créé au préalable. Par exemple, vous ne pouvez utiliser l'objet intelligent Forum que si vous avez créé l'objet intelligent Liste d'utilisateurs au préalable. Vous pouvez organiser les objets intelligents dans des profils classés, ce qui est particulièrement utile si vous gérez plusieurs sites Web, car vous pouvez grouper les objets intelligents dans un profil dédié au site. 13.6.1.2.1 Pour créer des profils d'objets intelligents : 1. Dans la boîte de dialogue Objets intelligents, cliquez sur le bouton Gérer les profils en bas du volet Ma bibliothèque d'objets intelligents. 2. Cliquez sur Nouveau profil, puis entrez un nouveau Nom dans la zone de texte. 3. Cliquez sur Enregistrer, puis sur Quitter. Le profil est ajouté en haut du volet Ma bibliothèque d'objets intelligents. Vous pouvez alors ajouter par glisserdéposer des objets intelligents existants à votre nouveau profil. 13.6.1.2.2 5. 6. Pour ajouter un objet à la bibliothèque : 1. Dans la boîte de dialogue Objets intelligents, cliquez sur Nouveau. 2. Dans la boîte de dialogue Créer un objet intelligent, utilisez la barre de défilement pour parcourir la liste, puis sélectionnez un objet intelligent. 3. (Facultatif) Si vous souhaitez utiliser les objets intelligents dans une langue autre que le français, sélectionnez la langue souhaitée dans le menu déroulant Langue. 4. Sélectionnez OK. La boîte de dialogue de création qui s'affiche propose des options spécifiques à l'objet intelligent sélectionné. Dans la fenêtre qui apparaît : • Définissez le Nom de l'objet. • (Facultatif) Si vous avez préalablement créé un Profil, sélectionnez-le dans le menu déroulant. • (Facultatif) Ajoutez un lien Filtre hors site (l'accès à l'objet sera limité au domaine indiqué et empêchera la copie de l'URL). • (Facultatif) Vous pouvez aussi modifier les réglages propres à l'objet. Pour certains objets, vous pouvez aussi définir les légendes, les couleurs (du corps, du texte et des bordures), ainsi que l'épaisseur du contour, le cas échéant. Cliquez sur Créer. L'objet nommé apparaît dans la liste qui s'affiche dans le volet gauche de la boîte de dialogue Objets intelligents. Voici un exemple de sélection d'objets intelligents, dont certains sont groupés sous un profil personnalisé appelé Objets arc-en-ciel WWW. 144 Ajouter du contenu dynamique Tous les types d'objets intelligents peuvent être insérés dans une page Web. Toutefois, si vous créez par exemple un forum ou un blog, il est plus judicieux de mettre en place un accès direct aux ressources Web Serif, (par l'intermédiaire de liens hors ligne ou de liens hypertextes), plutôt que d'insérer l'objet dans la page Web. Le principal avantage de ce système est que vous n'avez plus à vous soucier de faire tenir l'objet intelligent dans les limites de votre page (vos visiteurs n'ont pas à faire défiler la fenêtre). 13.6.1.2.3 Pour ajouter un objet intelligent à votre page web : 1. Sélectionnez l'objet souhaité dans le volet gauche de la boîte de dialogue Objets intelligents et cliquez sur le bouton Insérer. 2. Pour insérer l'objet à sa taille par défaut, placez le curseur à l'emplacement où vous souhaitez que l'objet apparaisse sur la page, puis cliquez. Un aperçu de l'objet intelligent s'affiche automatiquement sur la page, ce qui vous permet de voir à quoi il ressemblera une fois le site publié. 13.6.1.3 Modifier des objets intelligents Lorsqu'un objet est créé, il peut être modifié dans la bibliothèque d'objets intelligents ou directement sur la page. Vous aurez peut-être besoin de modifier l'apparence de l'objet par rapport à ses réglages d'origine, de corriger une question d'un sondage ou de réinitialiser un compteur. La modification d'un objet ne change que l'objet lui-même et ne modifie pas les données saisies. Les options permettant de créer et de modifier des objets intelligents sont les mêmes. 13.6.1.3.1 • Dans la boîte de dialogue Objets intelligents, cliquez sur le bouton Modifier en bas du volet Ma bibliothèque d'objets intelligents. 13.6.1.3.2 • Pour modifier un objet intelligent dans la bibliothèque : Pour modifier un objet intelligent dans la page : Double-cliquez sur l'objet pour afficher sa boîte de dialogue de modification. Si vous modifiez un objet sur la page web, les modifications apparaissent aussi dans la bibliothèque d'objets et vice versa. 13.6.1.4 Gérer les objets intelligents Tandis que la modification d'un objet intelligent concerne le fonctionnement de l'objet, la gestion d'un objet intelligent permet de gérer les données de l'objet, telles qu'elles sont collectées lors de la publication du site Web. Certains objets intelligents, tels que les compteurs n'ont pas besoin d'être gérés car ils ne font que décompter chaque passage sur le site (en revanche, les compteurs peuvent être réinitialisés). D'autres objets intelligents plus complexes, tels que les blogs/forums, les gestionnaires de ressources, les listes d'utilisateurs et les messageries instantanées, contiennent des données données recueillies relatives aux visiteurs : des commentaires d'articles, des adresses e-mail, les résultats des sondages et un journal des discussions. L'objet intelligent SGC ne peut être géré qu'à partir du navigauter Web, depuis l'URL www.serifwebresources.com. 145 WebPlus X4 Manuel d’utilisation 13.6.1.4.1 • Pour gérer un objet intelligent à partir de la bibliothèque : Dans la boîte de dialogue Objets intelligents, cliquez sur le bouton Gérer en bas du volet Ma bibliothèque d'objets intelligents. Les options de gestion diffèrent en fonction du type d'objet intelligent. Voir l’Aide en ligne pour plus d’informations sur les fonctions de gestion. Certains objets intelligents, tels que les blogs et les forums, sont plus longs à configurer. C'est la raison pour laquelle une aide plus complète est fournie pour chaque objet intelligent au niveau des ressources Web Serif. Vous trouverez un bouton d'aide en regard de chaque objet intelligent dans la bibliothèque d'objets intelligents. 13.6.1.4.2 • Pour gérer un objet intelligent directement via Internet : Connectez-vous à www.serifwebresources.com pour gérer tous vos objets intelligents indépendamment de votre site WebPlus. Utilisez vos paramètres habituels de connexion aux ressources Web. 13.6.1.5 Exporter des objets intelligents Les objets intelligents que vous avez créés sont liés à votre compte Resources Web Serif. Toutefois, vous pouvez en toute simplicité exporter un objet intelligent vers un autre compte. Tout ce dont vous avez besoin est l'identifiant (l'adresse e-mail) de ce compte cible. 13.6.1.5.1 Pour exporter un objet intelligent sélectionné : • Dans la boîte de dialogue Objets intelligents, cliquez sur le bouton Accéder au compte en bas du volet Ma bibliothèque d'objets intelligents. • Entez l'identifiant, c'est-à-dire l'adresse e-mail associée au compte. Si vous avez un doute sur l'identifiant exact, vous pouvez cliquer sur le bouton Rechercher un utilisateur ; les ressources Web Serif vous aideront à retrouver un compte existant. En cas de correspondance, la boîte de dialogue vous permet d'exporter le fichier grâce au bouton Déplacer un objet. L'objet intelligent est déplacé au cours de cette opération et ne sera plus disponible dans le compte Ressources Web Serif actuel. 13.6.1.6 Supprimer des objets intelligents 13.6.1.6.1 • Pour supprimer un objet de la bibliothèque : Sélectionnez l'entrée de l'objet dans le panneau Ma bibliothèque d'objets intelligents et cliquez sur le bouton Supprimer. Un message de confirmation s'affiche. Toutes les pages Web transférées qui comportent l’objet affiche un espace vide jusqu’à ce que l’objet soit supprimé de la page web correspondante dans WebPlus et que la page Web soit à nouveau transférée. 13.6.1.6.2 • 146 Pour supprimer un objet de la page : Sélectionnez l'objet et appuyez sur la touche Suppr. 14 Imprimer, prévisualiser et publier sur le Web 14.1 Afficher un aperçu de votre site Web La visualisation de votre site dans un navigateur Web constitue une étape essentielle avant sa publication sur le Web. Il s'agit de la seule possibilité vous permettant de voir comment apparaîtra votre site aux yeux du visiteur. Vous pouvez afficher à n'importe quel moment un aperçu d'une page ou du site entier, soit depuis WebPlus (grâce à une fenêtre interne basée sur le navigateur Internet Explorer), soit à partir de n'importe quel navigateur installé sur votre système. 14.1.1.1 Pour afficher un aperçu de votre site : Aperçu du site de la barre d’outils Standard. 1. Cliquez sur la flèche bas du bouton 2. Sélectionnez une option dans le sous-menu : • L'option Aperçu dans une fenêtre (raccourci : Alt+P) ouvre le site dans une nouvelle fenêtre interne à WebPlus avec son propre onglet permettant de basculer d'une fenêtre à l'autre. En cas d'aperçu dans une fenêtre, vous pouvez utiliser le barre de contexte Aperçu pour commander le fenêtre d'aperçu. Cliquez sur les boutons de la barre d'outils pour passer à la page précédente (bouton Précédent) ou suivante (bouton Suivant), Actualiser ou Fermer l'aperçu et réafficher la page à l'une des différentes résolutions d'écran standard ou personnalisées (le tout à partir d'un menu déroulant). • Sélectionnez Afficher la page dans... ou Afficher le site dans... pour utiliser un navigateur externe. Les noms qui apparaissent indiquent les navigateurs installés sur votre PC, par exemple Afficher la page dans Internet Explorer. Si plusieurs navigateurs sont installés sur votre ordinateur, vous pouvez sélectionner celui ou ceux à utiliser dans le sous-menu. La page ou le site est alors exporté dans un dossier temporaire et s'affiche dans le navigateur spécifié. 14.1.1.2 Pour personnaliser la liste des navigateurs dans le sous-menu : 1. 2. 3. Choisissez Aperçu du site dans le menu Fichier (ou dans la palette Aperçu de la barre d'outils standard) et sélectionnez Liste des navigateurs dans le sous-menu. La boîte de dialogue affiche une liste des navigateurs installés sur votre système. Le sous-menu Aperçu de WebPlus les répertorie dans l'ordre affiché ici. Effectuez éventuellement des modifications dans la boîte de dialogue : • Cliquez sur Détection auto pour actualiser automatiquement la liste, ou sur Ajouter pour afficher une boîte de dialogue permettant de localiser un navigateur particulier à ajouter à la liste. • Pour supprimer une entrée de la liste, sélectionnez-la et cliquez sur Supprimer. • Vous pouvez réorganiser la liste en sélectionnant une entrée et en cliquant sur Vers le haut ou Vers le bas. • Pour modifier le nom de l'entrée dans le sous-menu ou son chemin d'accès, sélectionnez-la et cliquez sur Modifier. Par exemple, vous pouvez remplacer le nom "Internet Explorer" par "IE7". Cliquez sur OK pour valider vos modifications. il peut être judicieux d'installer plusieurs des navigateurs les plus courants afin de voir à quoi ressemblera votre site sur d'autres systèmes. WebPlus vous permet d'afficher la durée de téléchargement estimée pour chaque page de votre site. Il fournit des informations telles que le nombre de fichiers de chaque page et la taille totale des fichiers. Vous pouvez ainsi estimer la durée de chargement de vos pages dans divers navigateurs et créer un site sur lequel les internautes pourront naviguer rapidement et facilement. 14.1.1.3 Pour afficher la durée de téléchargement estimée : 1. Vérifiez que la page affichée est celle pour laquelle vous souhaitez afficher la durée de téléchargement estimée. 2. Cliquez sur la flèche bas du bouton Aperçu du site de la barre d’outils Standard, puis cliquez sur Temps de téléchargement estimé. 147 WebPlus X4 Manuel d’utilisation 3. La boîte de dialogue Estimation de la durée de téléchargement affiche les informations suivantes : • Page: (p. ex., Article 02) • Nombre de fichiers: (p. ex., 15) • Taille totale: (p. ex., 153 Ko) • Durée de téléchargement (Modem 56K) : (p. ex., 40 secondes) • Durée de téléchargement (ADSL 512K Large Bande) : (p. ex., 4 secondes) 14.2 Publier le site sur le Web La publication d'un site sur le Web consiste à transférer le site vers le serveur de l'hébergeur de sites Web. Le site est ainsi mis en ligne et tous les internautes du monde entier peuvent le consulter. Vous pouvez décider de publier la totalité de votre site Web ou, si vous faites une mise à jour du site, uniquement les pages qui ont été modifiées depuis la dernière publication. Avant de publier le site sur le Web, il est conseillé de rechercher les problèmes potentiels en exécutant le Vérificateur de site (Outils/Gestionnaire de site/Vérificateur de site...). Gardez à l'esprit que vous pouvez publier le site dans un dossier à tout moment, ce qui vous permet de tester votre site hors ligne (en local) avant de le publier sur Internet. Reportez-vous à l'Aide en ligne pour plus d'informations. 14.2.1.1 Pour mettre en ligne votre site sur le Web : 1. Choisissez Propriétés du site dans le menu Fichier et vérifiez les paramètres d'exportation, notamment ceux de l'onglet Images. 2. Cliquez sur le bouton Publier le site dans la barre d'outils standard (ou choisissez Publier le site dans le menu Fichier, puis Publier sur le Web dans le sous-menu). S'il s'agit de votre toute première publication sur le Web, la boîte de dialogue Publier sur le Web ne contient pas d'informations de comptes (vous voyez le site Web local prêt à être transféré). Vous devez définir au moins un compte avant de pouvoir continuer. 148 1. Cliquez sur le bouton Comptes pour afficher la boîte de dialogue Charger sur le serveur. 2. Cliquez sur Ajouter. 3. Dans la boîte de dialogue Infos sur le compte, entrez : • Le Nom du compte. Ce nom peut être celui de votre choix. Vous l'utiliserez pour identifier ce compte dans WebPlus (au cas où vous auriez plusieurs comptes à gérer). • L'Adresse FTP de votre hôte est une adresse URL spécifique commençant par "ftp://" ; elle vous est communiquée par votre hébergeur. • Numéro de port : À moins que votre fournisseur ne vous le déconseille, laissez le numéro de port sur "21". • Laissez la case Dossier vide, à moins que votre fournisseur ne vous demande le contraire ou que vous ne souhaitiez publier votre site dans un sous-dossier spécifique de votre dossier racine. • Vous devez également connaître l'identifiant et le mot de passe que vous a attribués votre fournisseur de services. Le plus souvent, ils correspondent à vos paramètres de connexion de messagerie. Veillez à saisir correctement le mot de passe, en utilisant les majuscules et les minuscules à bon escient, sinon votre serveur hôte pourrait ne pas le reconnaître. • Cochez l'option Enregistrer le mot de passe pour que votre ordinateur le mémorise et ne vous le demande pas à nouveau pour chaque transfert. • Mode passif : laissez cette option cochée à moins que vous ayez des problèmes de connexion FTP (vérifiez avec votre hébergeur). Les hébergeurs peuvent utiliser des modes FTP passifs ou actifs. • Adresse du site Web : indiquez l'URL de votre site. Cela vous permet d'afficher le site à partir d'une boîte de dialogue après le téléchargement par FTP. Ajouter du contenu dynamique • Dans le champ Avancé, vous pouvez activer le FTP sécurisé en chargeant l'un des deux protocoles de cryptage : TLS 1.0 et SSL 3.0. Cochez Crypter la connexion, puis sélectionnez le Protocole. Vous devrez demander à votre FAI la confirmation que le cryptage (et le protocole) est pris en charge, et s'il est implicite ou non. L'option SSL implicite demande au serveur FTP du FAI de crypter au contact initial sur le port 990 par défaut ou sur un port personnalisé (modifiez le numéro de port). • Cliquez sur OK pour fermer la boîte de dialogue Infos sur le compte. À cette étape, vous pouvez utiliser la boîte de dialogue Charger sur le serveur pour ajouter un autre compte et copier, modifier ou supprimer un compte sélectionné dans le menu déroulant. C'est une bonne idée de tester votre compte nouveau ou modifié en cliquant sur le bouton Tester. Si le test est réussi, une boîte de dialogue s'affiche pour indiquer que la connexion a réussi. Vous pouvez décider d'enregistrer les détails du compte FTP sur votre machine (les détails du compte seront enregistrés dans WebPlus, évitant ainsi toute perte, même après un démarrage avec la touche Ctrl enfoncée) ou sur le site courant. 4. Si vous avez défini au moins un compte et cliqué sur Mettre à jour un compte, la boîte de dialogue Publier sur le Web s'affiche avec le dernier nom de compte utilisé dans le menu déroulant et ses paramètres dans les fenêtres suivantes. Le menu déroulant permet de changer de compte. Sélectionnez le compte à utiliser (si vous en avez plusieurs). 5. Si votre site Web utilise une base de données, la case Fusionner avant la publication est cochée. Si des modifications ont été apportées à la base de données mais que vous ne souhaitez pas relancer la fusion, désactivez cette option (l'option est grisée si aucune base de données/aucune modification n'est détectée). Pour plus d'informations sur les bases de données, reportez-vous à Utiliser la fusion de base de données. 6. Pour pouvoir contrôler le processus de publication de bout en bout, assurez-vous que la case Publication automatique est décochée. Vous pourrez ainsi passer en revue les modifications devant être apportées au site Web avant qu'elles ne soient appliquées. Cela vous permettra également d'annuler la publication si vous détectez un problème. (Pour en savoir plus sur cette fonction, reportez-vous à Opération automatique.) 7. Sélectionnez les pages à mettre en ligne, cochez la ou les pages dans la fenêtre ou sélectionnez Publier toutes les pages. Les boutons Sélectionner/Désélectionner, Sélect./Désélect. la branche et Sélectionner tout facilitent la sélection des pages. 8. Pour sauvegarder votre projet WebPlus, cochez l'option Effectuer une sauvegarde du document sur le serveur distant. Si le site n'est pas enregistré, vous êtes invité à l'enregistrer. 9. Cliquez sur OK. WebPlus recherche une connexion Internet, puis : 10. S'il s'agit de la première mise en ligne, les fichiers sélectionnés sont téléchargés directement. -ouSi le site a déjà été publié, la boîte de dialogue Chargement des fichiers s'affiche. Cette boîte de dialogue indique les opérations qui seront effectuées pour chacun des fichiers (Ajouter : le fichier sera ajouté. Remplacer : le fichier en ligne sera remplacé, Passer : le fichier en ligne ne sera pas mis à jour). Activez l'option Supprimer les fichiers distants non utilisés pour que WebPlus supprime automatiquement toutes les images et toutes les pages non utilisées. Choisissez Mise à jour incrémentielle ou Chargement complet. Sélectionnez la première option pour ne charger que les fichiers qui ont été modifiés depuis la dernière mise à jour. Si vous procédez à une mise à jour incrémentielle, vous pouvez faire en sorte que WebPlus recherche les fichiers manquants (activez l'option Rechercher les fichiers manquants). Notez toutefois que cette option est désactivée par défaut car elle ralentit énormément la publication. Un message apparaît lorsque tous les fichiers ont été copiés avec succès. Cliquez sur OK. 11. Dans le menu déroulant de la boîte de dialogue Publication du site Web, sélectionnez le navigateur dans lequel vous souhaitez afficher votre site, puis cliquez sur Afficher cette URL. Vous pouvez maintenant consulter votre site en ligne. Si vous renommez/supprimez des fichiers, puis republiez une ou plusieurs pages sur le Web, les anciens fichiers ne sont pas supprimés automatiquement. Vous devez donc les supprimer manuellement à l'aide de la fonction Publier le site/Maintenance du site Web disponible dans le menu Fichier. Toutefois, si vous republiez l'ensemble du site en mode automatique (via l'option Opération automatique), vous pouvez faire en sorte que tous les fichiers non utilisés soient supprimés ; il vous suffit pour cela d'activer l'option Supprimer les fichiers inutilisés. 149 WebPlus X4 Manuel d’utilisation 14.2.2 Gérer les informations du compte FTP WebPlus offre au développeur Web la possibilité d'enregistrer les informations de son compte FTP sur la machine ou sur le site courant, ou les deux. Par défaut, les informations du compte sont conservées sur l'ordinateur, mais en les enregistrant sur votre site, vous pouvez transférer votre site sur une autre machine sans perdre les informations de votre compte, puis les republier à partir de cet autre ordinateur. Pour des raisons de sécurité, les mots de passe ne sont jamais stockés sur les sites. Un option complémentaire vous permet d'exporter toutes les informations de compte FTP (y compris les mots de passe) sur un autre ordinateur. 14.2.2.1 Pour enregistrer les informations de compte FTP sur votre site : 1. Dans la boîte de dialogue Publier sur le Web, cliquez sur Comptes. 2. Dans la section Enregistrer les détails du compte FTP de la boîte de dialogue, cochez Dans le site actif. 3. Cliquez sur Mettre à jour un compte. Lorsque le site est ouvert sur une autre machine, les informations seront uniquement stockées sur le site. Vous pouvez éventuellement cocher l'option Sur cette machine pour stocker les informations du compte sur la machine ainsi que sur le site. 14.2.2.2 Pour exporter toutes les informations du compte FTP : 1. Dans la boîte de dialogue Publier sur le Web, cliquez sur Comptes. 2. Dans la section Compte FTP de la boîte de dialogue, cliquez sur Exporter tout. 3. Sélectionnez un emplacement et un nom de fichier pour le fichier de Registre (.reg), puis cliquez sur Enregistrer. 4. Transférez le fichier .reg sur un autre ordinateur, puis double-cliquez sur le fichier. Tout compte FTP existant sur l'ordinateur cible sera remplacé. 14.2.3 Opération automatique Si votre site Web est très volumineux, il peut être judicieux d'utiliser la fonction Opération automatique. Le processus est quasiment le même que la publication sur le Web, mais vous n'avez pas à cliquer sur "OK" dans chaque boîte de dialogue qui s'affiche pendant le transfert du site. Cette fonction est particulièrement utile si vous mettez à jour un site contenant une grande base de données d'images. 1. Cochez Publication automatique. Les options suivantes sont également activées ; • Cochez Utiliser une publication incrémentielle pour remplacer uniquement les fichiers qui ont été modifiés depuis la dernière publication (si vous avez déjà publié le site Web dans le même dossier FTP). Cette méthode de publication est efficace car vous avez moins de fichiers à transférer. Lorsque cette option est activée, vous pouvez également cocher Vérifier les fichiers distants pour demander à WebPlus de vérifier manuellement chaque fichier avant de le remplacer. Cela réduit la vitesse de chargement par rapport au fonctionnement normal, mais il s'agit d'une méthode de publication plus approfondie. • Cochez Supprimer les fichiers inutilisés pour supprimer du dossier FTP des fichiers superflus pour le site Web que vous publiez (pertinent par exemple si vous chargez un site Web complètement différent dans votre dossier FTP). 2. Sélectionnez les pages à mettre en ligne, cochez la ou les pages dans la fenêtre ou sélectionnez Publier toutes les pages. Les boutons Sélectionner/Désélectionner, Sélect./Désélect. la branche et Sélectionner tout facilitent la sélection des pages. 3. Pour sauvegarder votre site, cochez l'option Effectuer une sauvegarde du document sur le serveur distant. Si le site n'est pas enregistré, vous êtes invité à l'enregistrer. 4. Cliquez sur OK pour commencer le processus de publication. (C'est le moment de faire une pause...) 150 Ajouter du contenu dynamique 5. Une fois la publication terminée, la boîte de dialogue Chargement des fichiers reste affichée jusqu'à ce que vous cliquiez sur Fermer. 6. Dans le menu déroulant de la boîte de dialogue Publication du site Web, sélectionnez le navigateur dans lequel vous souhaitez afficher votre site, puis cliquez sur Afficher cette URL. Vous pouvez maintenant consulter votre site en ligne. 14.2.4 Résolution des problèmes Une fois votre site Web publié, vous pourrez peut-être constater que certaines modifications n'ont pas été appliquées. Avant de relancer le processus de publication, essayez de vider le cache de votre navigateur. Pour ce faire, appuyez sur Ctrl+F5. Cette opération permet dans bien des cas de régler les problèmes relatifs à l'affichage des images et des objets. Si le problème persiste, il vous faudra peut-être supprimer manuellement les anciens fichiers images ou les anciens objets. Pour connaître la procédure, reportez-vous à Maintenance du site Web de l'Aide en ligne. 14.2.5 Consulter votre site en ligne Une fois votre site publié, vous pouvez sélectionner l'option Aperçu du site en ligne dans la barre d'outils standard. Cette option permet d'afficher la version la plus récente de votre site dans le navigateur par défaut. Au moment de la première activation de cette commande, une boîte de dialogue apparaît pour vous demander de saisir l'URL par défault du site. Vous pouvez modifier l'URL à tout moment via la boîte de dialogue Propriétés du site. Gardez à l'esprit que les modifications effectuées après la publication ne seront pas visibles. Pour obtenir un aperçu des modifications non publiées, utilisez le bouton votre site Web.) Aperçu du site. (Reportez-vous à Afficher un aperçu de 14.2.6 Publication rapide La Publication rapide vous permet de charger et d'afficher rapidement un aperçu de la page affichée, ce qui est particulièrement utile pour contrôler en ligne les pages individuelles lorsque vous créez votre site Web. Pour mettre en place la Publication rapide, vous devez d'abord paramétrer les informations de votre compte à l'aide de la boîte de dialogue Configuration de la Publication rapide. 14.2.6.1 Configurer la Publication rapide 1. Cliquez sur la palette Publier le site de la barre d'outils Standard, puis sur Configuration de la Publication rapide. -ouCliquez sur Fichier/Publier le site/Configuration de Publication rapide... 2. Dans la boîte de dialogue : • Entrez les informations ou sélectionnez dans le menu déroulant l'URL du site que vous souhaitez utiliser pour la publication. • Sélectionnez le navigateur dans lequel vous souhaitez afficher votre page après sa publication. • Sélectionnez dans le menu déroulant le compte FTP à utiliser. Pour mettre à jour les paramètres du compte ou ajouter un nouveau compte, cliquez sur Gérer les comptes FTP. C'est une bonne idée de tester votre compte nouveau ou modifié en cliquant sur le bouton Tester. Si le test est réussi, une boîte de dialogue s'affiche pour indiquer que la connexion a réussi. 3. Cliquez sur OK. 151 WebPlus X4 Manuel d’utilisation 14.2.6.2 Publication rapide sur le Web : 1. Cliquez sur la palette rapide sur le Web. Publier le site de la barre d'outils Standard, puis sur Publication -ouCliquez sur Fichier/Publier le site/Publication rapide sur le Web. Si vous tentez d'utiliser la Publication rapide sans configurer préalablement les paramètres de votre compte, la boîte de dialogue Configuration de la Publication rapide s'ouvrira automatiquement. La boîte de dialogue Chargement des fichiers apparaît brièvement avant que votre page s'affiche dans le navigateur de votre choix. 14.2.7 Créer des fichiers PDF WebPlus vous permet de publier votre site complet sous forme de fichier PDF et d'exporter le structure du site comme signet cliquable dans le document PDF. La publication en PDF est particulièrement utile pour les étudiants devant présenter leurs sites à un jury, au format document. 1. Cliquez sur la palette site au format PDF... Publier le site de la barre d'outils Standard, puis sur Exporter le - ou - Exécutez la commande Fichier/Publier le site/Exporter le site au format PDF... 2. Dans la boîte de dialogue Publier au format PDF, attribuez un nom de fichier, accédez au dossier où vous souhaitez enregistrer votre PDF, puis cliquez sur Enregistrer. Le PDF est généré et s'ouvrira automatiquement si une visionneuse PDF appropriée est installée sur votre système. Si des problèmes ont été identifiés lors de la génération du PDF, la liste s'affichera. 152