Vous êtes sur la page 1sur 426

Comment nous contacter

Notre bureau principal (Royaume-Uni, Europe) :


Pour accder l'assistance client, aux informations sur les produits et aux coordonnes, consultez : www.serif.com/FR/contact.aspx Pour toute demande professionelle, contactez notre siege social.

Sige social de Serif: (UK, Europe):


The Software Center PO Box 2000, Nottingham, NG11 7GW, Royaumme-Uni Tl. : (0115) 914 2000 Fax : (0115) 914 2020 Internet: www.serif.com/fr

Le manuel et le logiciel qu'il dcrit font l'objet d'un contrat de consommateur final inclus dans le produit. Le contrat en indique les usages autoriss 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 socits sont rservs. Images numriques 2008 Hemera Technologies Inc. Tous droits rservs. Images numriques 2008 Jupiterimages Corporation. Tous droits rservs. Images numriques 2008 Jupiterimages France SAS. Tous droits rservs. Contenu 2008 Jupiterimages Corporation. Tous droits rservs. 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 rservs. THE PROXIMITY/COLLINS DATABASE 1990 William Collins Sons & Co. Ltd. ; 1990 Proximity Technology Inc. THE PROXIMITY/MERRIAM-WEBSTER DATABASE 1990 MerriamWebster Inc. ; 1990 Proximity Technology Inc. Correcteur orthographique Sentry 2000 Wintertree Software Inc. Thsaurus ThesDB 1993-97 Wintertree Software Inc. Correcteur grammatical WGrammar 1998 Wintertree Software Inc. Andrei Stcherbatchenko, Ferdinand Prantl eBay 1995-2008 eBay Inc. Tous droits rservs. PayPal 1999-2008 PayPal. Tous droits rservs. Roman Cart 2008 Roman Interactive Ltd. Tous droits rservs. Mal's 1998 2003 Mal's e-commerce Ltd. Tous droits rservs. iTunes 2000 2008 Apple Computer, Inc. Tous droits rservs. 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 rservs.

ODF Translator 2006-2008, Clever Age, DIaLOGIKa, Sonata Software Ltd. Tous droits rservs. Office Binary Translator to OpenXML Copyright 2008-2009, DIaLOGIKa. Tous droits rservs. Anti-Grain Geometry - Version 2.4 Copyright 2002-2005 Maxim Shemanarev (McSeem) SlideShowPro Dominey Design Inc. Tous droits rservs. 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 dposes de Microsoft Corporation. Toutes les autres marques sont reconnues. WebPlus est une marque enregistre de Serif (Europe) Ltd. 2010 Serif (Europe) Ltd. Tous droits rservs. Il est interdit de reproduire tout ou partie du manuel sous quelque forme que ce soit sans l'accord exprs crit de Serif (Europe) Ltd. Serif WebPlus X4 2010 Serif (Europe) Ltd.

Table des matires


1. Bienvenue ............................................... 1
Bienvenue ...................................................................... 3 Caractristiques principales ........................................... 4 Nouvelles fonctions ...................................................... 16 Installation .................................................................... 20

2. Dmarrage ............................................ 23
Assistant de dmarrage ............................................... 25 Crer un site partir d'un modle ................................ 26 Crer un site de toutes pices...................................... 29 Ouvrir un site existant .................................................. 30 Travailler sur plusieurs sites .......................................... 32 Enregistrer votre site Web............................................. 32

3. Dvelopper des sites et des pages........ 33


Prsentation de la structure du site et de la navigation 35 Dfinir les proprits du site......................................... 38 Optimisation pour les moteurs de recherche................ 44 Utiliser le Gestionnaire de site...................................... 52 Prsentation des pages et des maquettes ................... 55 Ajouter, supprimer et rorganiser les pages ................ 60 Dfinir les proprits de la page................................... 67 Crer des pages HTML ................................................ 71 Afficher les pages......................................................... 74

WebPlus X5 Guide dutilisation

4. Navigation et liens hypertextes .............. 79


Ajouter des barres de navigation ................................. 81 Ajouter des menus contextuels .................................... 94 Ajouter des boutons ..................................................... 96 Ajouter des liens hypertextes et des ancres .............. 100

5. Ajouter des objets Web ........................ 107


Ajouter un champ de recherche ................................. 109 Utiliser la Galerie........................................................ 111 Ajouter une carte Google ........................................... 115 Ajouter une publicit .................................................. 119 Utiliser des tables lumineuses.................................... 122 Insrer des panneaux ................................................ 126 Ajouter des zones dynamiques .................................. 132 Ajouter des images survoles .................................... 136 Options des images survoles ................................... 137 Ajouter des images survoles (popups) ..................... 139

6. Ajouter des objets Web dynamiques .... 145


Joindre un code HTML ............................................... 147 Ajouter des formulaires .............................................. 154 Flux RSS et podcasts ................................................ 170 Qu'est-ce que l'E-Commerce ..................................... 178 Insrer un objet E-Commerce (PayPal) ..................... 181 Utiliser la fusion de la base de donnes .................... 187 Les objets intelligents................................................. 201 Accs utilisateur ......................................................... 213

Table des matires

7. Utiliser du texte .................................... 225


Importer du texte partir d'un fichier .......................... 227 Utiliser les zones de texte .......................................... 229 Utiliser le texte artistique ............................................ 236 Aligner du texte sur trac ........................................... 237 diter le texte sur la page .......................................... 241 Utiliser la fonction Rechercher et remplacer .............. 244

8. Mettre en forme du texte ..................... 247


Dfinir les proprits du texte .................................... 249 Utiliser les polices ...................................................... 249 Utiliser les styles de texte ........................................... 251 Crer une liste puces ou numrote ....................... 255 Insrer le profil utilisateur ........................................... 257 Insrer des variables .................................................. 260

9. Utiliser des tableaux ............................ 263


Crer des tableaux de texte ....................................... 265 Insrer un calendrier .................................................. 267

WebPlus X5 Guide dutilisation

10. Modifier des objets ............................... 271


Slectionner un objet ................................................. 273 Slectionner plusieurs objets ..................................... 276 Copier, coller et dupliquer des objets ......................... 277 Dplacer des objets ................................................... 280 Redimensionner des objets ....................................... 281 Faire pivoter un objet ................................................. 282 Recadrer et combiner des objets ............................... 284 Joindre les contours d'objets...................................... 288 Mettre jour et enregistrer les paramtres par dfaut 290

11. Organiser des objets ............................ 293


Agencer les objets ..................................................... 295 Aligner et rpartir des objets ...................................... 296 Associer un objet au texte .......................................... 298 Crer des groupes ..................................................... 302

12. Images, animation et multimdia.......... 303


Ajouter des cadres d'image........................................ 305 Importer des images .................................................. 307 Utiliser la Barre des mdias ....................................... 312 Dfinir les options d'exportation des images .............. 317 Importer des images TWAIN ...................................... 324 Appliquer des filtres PhotoLab ................................... 325 Utiliser le Studio de dcoupe d'images ...................... 332 Ajouter des animations .............................................. 337 Ajouter du son et de la vido ..................................... 339 La Galerie photos....................................................... 346 Lier des images distantes .......................................... 354

Table des matires

13. Lignes, contours, formes et effets........ 355


Tracer et modifier des lignes ...................................... 357 Dfinir les proprits du contour ................................ 361 Tracer et modifier des formes .................................... 364 Appliquer des effets de filtre 2D ................................. 367 Appliquer des effets de filtre 3D ................................. 372 Utiliser les styles d'objets ........................................... 374 Ajouter une troisime dimension (3D instantane)..... 376

14. Couleur, remplissages et transparence . 379


Appliquer des couleurs unies ..................................... 381 Utiliser des combinaisons de couleurs ....................... 384 Utiliser les remplissages dgrads et bitmap ............. 391 Dfinir la transparence ............................................... 396

15. Prvisualiser et publier ........................ 401


Afficher un aperu de votre site Web ......................... 403 Publier le site sur le Web ........................................... 405

WebPlus X5 Guide dutilisation

Bienvenue

Bienvenue

Bienvenue

Bienvenue
Bienvenue dans WebPlus X5 , la solution la plus simple pour prsenter votre entreprise, votre association ou votre famille sur le Web ! Pour vous faciliter la vie, WebPlus est fourni avec une impressionnante slection de modles, de barres de navigation, de galeries cratives et de styles. Ainsi, une publication de qualit professionnelle est possible pour les utilisateurs expriments comme pour les dbutants ! Vous pourrez galement rutiliser 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 dcoupe d'images pour dcouper les images, et PhotoLab pour un rglage performant des images et des combinaisons d'effets. Vous ne pouvez pas les rater ! WebPlus X5 ne se contente pas de vous offrir une publication Web "statique", toute sa puissance nest rellement visible que lorsque vous ajoutez et grez du contenu dynamique, tel que des blogs, des forums, des Systmes de gestion de contenu (SGC), des compteurs, etc. Vous pouvez mme faire appel aux outils Ecommerce pour accder la fonction de panier d'achat. Une fois satisfait de votre site WebPlus, publiez-le simplement sur Internet pour le partager avec vos collgues, vos clients, vos amis ou votre famille. Serif vous propose des offres d'hbergement Web prix comptitif, pour une publication sans difficults ! Pour de plus amples informations, rendez-vous sur le site d'hbergement Web de Serif (http://go.serif.com/hosting). Pour un rsum plus dtaill des fonctions de WebPlus , reportezvous la rubrique Caractristiques principales (p. 4).

Bienvenue

Mise niveau ?
Si vous avez effectu une mise niveau partir d'une version antrieure du produit, cette nouvelle dition de WebPlus inclut une multitude de nouvelles fonctionnalits intressantes (p. 16) grce auxquelles WebPlus dame le pion ses concurrents, pour un prix infrieur ! Nous esprons que vous apprcierez cette amlioration des performances.

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 dveloppements et des mises jour venir.

Caractristiques principales
Avant de prendre en main WebPlus, nous vous recommandons de vous familiariser avec les principales caractristiques et fonctionnalits de WebPlus. Mise en page

Mise en page thmatique Modles Choisissez un thme tel qu'Arctique ou Naturel pour votre site ! Chaque thme propose un choix de types de pages classiques propos, Galerie, Produits, Contact, etc. Slectionnez plusieurs mises en page pour vos nouvelles pages, puis remplacez simplement les images fictives par vos images personnelles. Modles prts l'emploi Concevez des sites Web "sur-mesure" et en un clin d'il d'aprs un modle et un thme dfini. Tous les modles professionnels proposent un large choix d'images libres de droits.

Bienvenue

Outils professionnels de mise en page Des rgles dplaables, des repres et une grille de points servent d'aides la mise en page et vous permettent de positionner les objets avec prcision. Grce au magntisme, collez un objet un repre ou une grille. Utilisez les repres magntiques, une mthode commode pour dplacer simultanment tous les objets colls par magntisme vos repres. Dplacez le repre et les objets suivront ! Alignez et redimensionnez les objets l'aide du magntisme des repres dynamiques, sans faire appel des rgles ou des transformations d'objet prcises. Contrle des pages Ajoutez et supprimez des pages en quelques clics sous l'onglet Site. Glissez-dposez des pages sous l'onglet pour rorganiser la slection. Affectez des maquettes plusieurs pages d'un site simultanment pour gagner du temps et garantir une meilleure homognit dans la conception. Vous pouvez mme affecter plusieurs maquettes une page Web spcifique, pour une conception de page plus varie.

Informations essentielles pour la conception d'un site Web

Barre de cration rapide Pour une conception Web facile Prise en main rapide de WebPlus dplacement de pages, barres de navigation, zones de texte, images, contenu Flash, galeries photos, boutons, ou objets intelligents directement sur la page pour un rsultat rapide sans connaissance pralable de l'interface utilisateur. Structurez votre site en toute simplicit L'onglet hirarchique Site vous offre un aperu global de la mise en page de votre site.

Bienvenue

Barres de navigation Utilisez des barres de navigation intelligentes pour naviguer sur votre site ; toutes les barres se mettent jour automatiquement pour inclure toute nouvelle page ajoute et peuvent adopter divers styles. Vous pouvez aussi inclure un forum, un blog et des articles de SGC dans les sous-menus dynamiques des barres de navigation . 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 Contrlez la manire 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. Protgez vos donnes personnelles tout en offrant aux visiteurs potentiels de votre site des informations prcises dans les rsultats de recherche. E-Commerce Vendez, vendez, vendez ! WebPlus acclre et facilite le positionnement d'articles vendre sur votre site Web, grce une prise en charge intgre des fournisseurs de panier d'achat ECommerce (PayPal, etc.) ! En ajoutant simplement des formulaires E-Commerce, des boutons E-Commerce, ou mme un lien hypertexte d'objet WebPlus (texte, images ou formes), vous accderez au panier d'achat de votre choix. Grce aux options Acheter maintenant, Ajouter au panier d'achat, Dons, et Formulaires d'abonnement, vous accderez des options d'achat et de validation de formulaire. Abonnez-vous directement des paniers d'achat ou utilisez des comptes existants.

Bienvenue

Formulaires conus pour le Web Appliquez des formulaires vos pages Web en utilisant lAssistant de formulaires Web pour utiliser des formulaires standard prts lemploi pour les coordonnes, les remarques et commentaires des utilisateurs, les sondages dopinion ou le tlchargement de documents (CV p. ex.) ou d'images. Construisez vos formulaires plus rapidement partir de formulaires standard ! Transmettez les donnes de formulaires par les Ressources Web Serif, la passerelle gratuite d'envoi de donnes par e-mail de Serif (les donnes sont envoyes directement votre adresse email ds la transmission du formulaire) ou envoyez les donnes un script distant ou local. Dfinissez l'ordre des champs accessibles par les touches de tabulation afin d'amliorer la navigation dans le formulaire. Objets intelligents Les ressources Web Serif, le service d'hbergement d'objets intelligents, propose une srie de fonctionnalits de site interactif :

Visiteurs connects Indique le nombre de personnes consultant actuellement la page Web. Blogs Ajoutez des profils personnels, des signets et utilisez des rtroliens pour le rfrencement crois inter-blog. Modifiez l'apparence du blog en utilisant diffrents styles visuels prdfinis (ou utilisez votre propre style !) Utilisez des groupes d'diteurs pour la publication d'articles multi-auteurs. Systme 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.

Bienvenue

Forum Encourage les discussions animes bases sur un flux dans une fentre grand format. Vous pouvez crer plusieurs forums et les grer indpendamment (en modrant les discussions et en dfinissant les autorisations d'accs). Compteur de visites Ajoute un dcompte du nombre de visites de la page courante. Infos Pour des messages simples annonant les mises jour du site ou les prochaines dates de runion de l'association. Sondage Ajoute un questionnaire en ligne pour connatre les opinions des visiteurs de votre site. Rservation de ressourcesUtilisez la rservation de ressources base sur le calendrier pour grer vous-mmes des rservations (hbergement, salles de confrence et de runion, courts de squash, etc.). Messagerie instantane Ajoute une fentre interactive de messagerie instantane votre page Web. Liste d'utilisateurs Permet de contrler l'accs une page ou au site en grant de groupes d'utilisateurs runis par "zone" (par exemple : Personnel). Les internautes peuvent s'inscrire l'aide d'un identifiant (avec activation facultative par courrier lectronique).

Cadres flottants actifs Les liens hypertextes peuvent ouvrir une page dans un cadre de document sur une autre page. Dfinissez une URL absolue pour une navigation plus prcise entre les cadres.

Bienvenue

Google Maps Intgrez une carte Google directement dans votre page Web "Coordonnes". Ajoutez des marqueurs pour indiquer des emplacements tels qu'un bureau, un dpt, un lieu d'intrt, ou un vnement. Gnrez des revenus grce Google AdSense Ajoutez un espace publicitaire Google votre site Web... et Google vous paiera, 24/7! Flux RSSAjoutez des flux de tiers ou crez vos propres flux !) Tenez vos visiteurs informs des dernires nouvelles en provenance de vos sites favoris (BBC News, CNN, Reuters, FTSE, NASDAQ) l'aide de l'outil Lecteur RSS. Ou devenez vous-mme journaliste en crant directement votre propre flux RSS directly sur votre site : l'outil Flux RSS permet de dfinir les flux, les titres, les rsums et les liens vers des URL. Outils de gestion de site Grez toutes les proprits 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 gres individuellement, par slection ou globalement. Le Vrificateur de site analyse la navigation sur le site, la mise en forme du texte les problmes rencontrs par les formulaires ou l'e-commerce et tente d'y remdier automatiquement. Suivi de l'utilisation du site Inscrivez-vous Google Analytics pour obtenir un suivi et une surveillance complte des donnes relatives aux visiteurs de votre site Web. Analysez tout moment les donnes en ligne, grce des graphes et des cartes faciles interprter.

10

Bienvenue

Images

Importer des images Importez des formats de fichier standard, notamment tous les plus rcents formats RAW pour appareils photo numriques, fichiers Photoshop, photos HD et mtafichiers Serif (pour le partage d'images entre les applications Serif). Importez plusieurs images et collezles une par une. Des photos plus accessibles grce la Barre des mdias Finie l'importation rptitive des photos ! Toutes vos photos sont porte de clic dans la Barre des mdias. Il suffit de glisser-dposer les photos depuis la Barre des mdias sur les photos remplacer. Recherchez des photos en utilisant les mtadonnes. Contrlez les dimensions et l'alignement des photos dans leur cadre. Des galeries photos en ligne extraordinaires ! tonnez vos amis, votre famille et vos collgues par des galeries photos SlideShowPro (Flash), Flash, et JavaScript. 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. Tirez profit de la prise en charge des balises ( l'aide de donnes EXIF), et crez et grez des albums. Dcoupe d'images simple et rapide Le Studio de dcoupe d'images vous permet de dcouper facilement vos images, directement dans WebPlus. Utilisez les pinceaux pour supprimer les arrire-plans uniformes (ciel, murs, etc.) ou conserver les sujets qui vous intressent (personnes, objets, etc.). Rglages d'images Appliquez des rglages (luminosit, contraste, yeux rouges, etc.) ou slectionnez Modifier dans PhotoPlus pour accder au produit de retouche d'image de Serif, unanimement salu (s'il est install).

Bienvenue

11

PhotoLab pour des filtres de rglage et d'effets non destructeurs Le puissant studio PhotoLab contient une impressionnante slection de rglages modifiables, d'effets cratifs et artistiques (crayon, aquarelle, huile, etc.). Utilisez les outils intgrs Redresser, Recadrer, Yeux rouges et Correction des traces pour effectuer une retouche rapide. Appliquez des filtres aux zones slectionnes dans votre photo, grce un masquage l'aide du pinceau. Enregistrez des combinaisons de rglages/d'effets comme favoris, pour une utilisation ultrieure. Un format mtafichier polyvalent Importez et exportez des mtafichiers Serif (.SMF), un format d'image propritaire avec des amliorations du format Windows Metafile (WMF). Grce de meilleures dfinitions de ligne, de remplissage et de texte, ces fichiers sont parfaits pour le partage d'images entre les diffrentes applications Serif. Image survole (Popup) Crez votre propre galerie photos ; affichez une version agrandie d'une photo en cas de survol de sa miniature par la souris. Cadres photo dcoratifs Des cadres photos prtes l'emploi peuvent tre directement appliques des images depuis l'onglet Galerie.

Mdia

Vidos YouTube Choisissez vos vidos YouTube prfres et insrez-les dans votre page Web.

12

Bienvenue

Podcasts Crez vos propres flux podcast et diffusez rgulirement vos propres pisodes audio et vido. Les visiteurs Web peuvent s'abonner en utilisant tous les navigateurs Web connus et via Google Reader, My Yahoo! et Apple iTunes.

Cratif

Outils de dessin Dessinez d'intressantes images vectorielles l'aide des outils Crayon, Stylo et Ligne droite, et ajoutez des fins de ligne telles que des ttes de flche, des losanges ou des stylos plumes. Par ailleurs, la gamme de Formes pleines entirement personnalisables vous permet de crer 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 crer toutes les formes possibles et imaginables ! Les enveloppes de maillage ajoutent une perspective, une inclinaison ou un bombement tout objet. Styles prts l'utilisation Sous l'onglet Styles, slectionnez divers effets de filtre, des lumires, des ombres, des textures et des matriaux. Personnalisez les styles prdfinis ou crez-en. Transparence Ajoutez une transparence vos arrire-plans, zones de texte, tableaux, formes et textes pour obtenir un rsultat professionnel. Comme avec les remplissages de couleur, vous pouvez appliquer des transparences unies, dgrades et bitmap, et mme crer des transparences bitmap partir de votre collection d'images.

Bienvenue

13

Combinaisons de couleurs intelligentes Utilisez le Gestionnaire de combinaisons pour modifier les couleurs de votre site Web, le tout par un simple clic ! Utilisez les combinaisons prdfinies ou composez vos propres combinaisons personnalises en utilisant des tendues de couleurs bases sur la thorie de couleur accepte. Nouveaux effets de filtre 2D/3D Ajoutez des reflets sur un objet. C'est idal pour les titres des pages Web et les photos ! Floutez un objet ou tracez un trait de couleur unie ou dgrade sur les contours d'un objet (trait ayant un nouveau remplissage Contour qui applique un remplissage dgrad depuis le contour intrieur jusqu'au contour extrieur). Les effets 3D sont renforcs par des imitations de verre ralistes, comme le contrle de la transparence de surfaces rflchissantes et non rflchissantes et divers clairages colors. Tous les effets de filtre peuvent tre appliqus en mode d'aperu ou l'objet sur la page. Utilisez le nouvel outil Ombre pour contrler l'ombre sur la page. 3D Instantane avec transformations l'cran Transformez des objets 3D in situ grce aux fonctions d'dition 3D d'une barre d'outils contextuelle. Appliquez des effets de lumire multicolores fantastiques (avec contrle directionnel) avec des profils de biseau et de tour pour crer des contours personnaliss uniques. L'acclration matrielle du rendu amliore considrablement les performances de retraage (fonctionnalit dpendante de votre matriel).

Texte

Importer des documents texte Word et Open Office Ajoutez sans difficults le contenu d'un traitement de texte une zone de texte. Pour une importation, l'application ne doit pas ncessairement tre installe localement. Utilisez divers convertisseurs pour optimiser l'importation de texte.

14

Bienvenue

Texte artistique et zone de texte WebPlus gre le texte de la mme manire qu'un outil de traitement de texte. Le texte artistique peut tre utilis pour rendre votre site Web encore plus original. Il s'adapte particulirement bien aux titres et l'ajout un trac. Les zones de texte HTML assurent la compatibilit HTM avec l'Ajustement automatique ou l'ajustement manuel du texte. Toutes les fonctionnalits d'dition sont compatibles avec les meilleurs traitements de texte. Zones de texte Composez des articles dans des zones de texte, puis positionnez-les ou adaptez la zone vos besoins. Le contour englobant et dtour implique un meilleur contrle sur le dplacement du texte ainsi que sur son apparence. Importez, collez, exportez du texte au format Unicode. Utilisez une langue trangre ou des polices et des caractres spciaux. Les tracs de texte peuvent galement tre ajust intelligemment. Polices Remplacez les polices manquantes l'ouverture de projets tiers. Vrifiez les polices de caractres actuellement installes sous l'onglet Polices, y compris les polices rcemment appliques au texte, vos polices favorites et les polices optimises pour le Web. Dplacez le curseur sur une des polices rpertories pour en afficher un aperu de la police in situ sur le texte slectionn 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 ! Associez et positionnez des formes et des images du texte Contrlez la position des formes et des images dans vos zones de texte HTML ou cratives (ou par rapport aux titres du texte artistique).

Bienvenue

15

Tableaux et calendriers Choisissez parmi une gamme de formats prdfinis ou concevez votre propre tableau ou calendrier personnalis. Utilisez la pratique barre d'outils contextuelle pour trier des donnes, mettre en forme des cellules et choisir parmi une large gamme de fonctions de tableurs (utiliser des rfrences de cellules absolues). Pour amliorer leurs fonctionnalits, les calendriers sont bass sur des tableaux et prennent en charge la mise jour de l'anne, les vnements en ligne et les jours fris ! Rechercher et remplacer Recherchez des mots et des phrases dans le texte d'un articles, mais galement des attributs de texte, des polices particulires, des couleurs, des caractres spciaux (Unicode), des expressions rgulires, ou des mots des positions spcifiques dans des phrases. Base de donnes Il peut s'agir d'une base de donnes Serif (.SDB), Microsoft Access (.MDB), dBASE, de donnes de serveur ODBC ou d'autres formats de bases de donnes connus, ainsi que des fichiers Microsoft Excel, HTML et de texte dlimit. tablissez des listes, des listes de diffusion, des catalogues. En bref, toutes les informations contenues dans des bases de donnes peuvent tre publies sur le Web. Placez du texte ou des photos dans des zones rcurrentes, des formulaires d'e-commerce rcurrents Acheter maintenant ou Ajouter au panier, ou encore des fragments de code HTML. Crez votre propre base de donnes de photos (avec des champs EXIF) en prvision d'une fusion.

Publication Web

Aperu de votre travail Testez votre nouvelle page Web ou votre site entier dans divers navigateurs Web installs.

16

Bienvenue

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 modifies. Utilisez la Publication rapide pour charger et afficher un aperu de la page affiche, ce qui est particulirement utile pour contrler en ligne les pages individuelles lorsque vous crez votre site Web.

Nouvelles fonctions

Studio de boutons (p. 98) Crez vos propres boutons personnaliss pour vos barres de navigation dans le Studio de boutons, une environnement conu sur mesure et ddi la conception de boutons. Vous pouvez modifier chaque tat de bouton de tous les outils importants de WebPlus (p. ex., Normal, Cliqu, Survol) et ajuster intelligemment l'chelle des boutons. Vous pouvez galement utiliser les boutons comme objets autonomes ou mme les convertir en barre de navigation en un seul clic ! Nouvelles barres de navigation (p. 81) Prenez le temps d'explorer les nouvelles barres de navigation, de divers types : Bloc, Image, Bulle, Onglet, Standard et Traditionnel. Les modles de boutons, de sparateurs et d'arrire-plan pour les barres et les menus contextuels peuvent tre personnaliss ou crs de toutes pices dans les tout nouveaux Studio de boutons et de modles, qui vous donnent un contrle absolu. Menus contextuels (p. 94) partir de la structure du site (ou d'une structure personnalise), crez un menu navigation contextuel s'affichant avec l'objet WebPlus de votre choix (bouton, objet de galerie, Forme pleine, ou image).

Bienvenue

17

Panneaux (p. 126) Crez des panneaux sosu forme de conteneurs permettant d'afficher des informations complmentaires, des astuces, des raccourcis, des barres de navigation converties, des formulaires PayPal Acheter maintenant... en fait, n'importe quel objet souhait. Vous avez la possibilit de faire flotter des panneaux ancrs de faon permanente votre fentre de navigateur (mme lors du dfilement de la page). Par le biais d'actions, vous pouvez associer tout objet un panneau masqu afficher au clic ou au survol de l'objet correspondant (pratique pour les boutons, les objets de galerie, ou les images). Les actions vous permettent galement d'afficher des messages d'alerte ou de lancer une impression via des boutons placs sur votre page. Mini paniers PayPal ! (p. 179) Dfinissez une fentre de panier d'achat E-commerce flottante qui s'affiche lorsque des articles sont ajouts puis est rduite tout en restant accessible tout moment. Parfait pour conserver une trace de vos achats ! Cartes Google amliores (p. 115) partir de n'importe quel marqueur de carte sur lequel vous cliquez, marquez directement l'emplacement exact de "photos" l'aide de Google Street View. Google Maps prend dsormais en charge un nombre illimit de marqueurs de carte !

Simplicit d'emploi

Indication de la slection (p. 273) Pour les mises en page Web complexes comportant plusieurs objets, ces objets "brillent" au survol lorsqu'ils peuvent tre slectionns.

18

Bienvenue

Slection Lasso (p. 274) L'outil Lasso vous permet de slectionner plus facilement des objets spcifiques dans des dessins complexes. Faites simplement glisser le pointeur autour de l'objet "cible" pour l'inclure dans la slection. Objets de maquette indpendants (p. 59) Pour une plus grande libert de cration, convertissez les objets de la maquette en les dtachant pour leur permettre d'tre modifis. Pour vous aider visuellement, les objets de maquette se distinguent dsormais des objets de page par la couleur diffrente de leur cadre de slection ; vous pouvez galement diffrencier les objets de diffrentes maquettes ! Profil utilisateur professionnel pour chaque site ! (p. 257) Crez des profils utilisateur professionnels, appels Thmes professionnels ; appliquez un thme professionnel chaque site. Idal pour les dveloppeurs WebPlus recherchant une flexibilit de conception pour plusieurs sites. Variables personnalises (p. 260) Dfinissez des variables pour mettre automatiquement jour les termes rcurrents dans votre site Web. Vous pouvez ainsi facilement mettre jour simultanment le nom, le prix, la version et la langue de produits. Un rcapitulatif des objets de chaque page Pratique pour rpertorier les objets de votre page/maquette/table de montage, l'onglet Objets vous permet galement de reprer et de rorganiser les objets, et d'associer des maquettes dans des mises en page complexes.

Bienvenue

19

Cratif

Remplissages dgrads et bitmap et Transparence sur des contours (p. 391) Soyez encore plus cratifs grce nos contours d'objets ! Appliquez des remplissages linaires, elliptiques, coniqueset bitmap, et ajoutez une transparence autour de formes et de zones de texte afin de crer un modle accrocheur. Des combinaisons de couleurs intressantes et modernes (p. 384) Dcouvrez une impressionnante slection de combinaisons thmatiques capables de transformer l'aspect de votre site en un simple clic. Idal pour mettre jour un site partir d'un modle de mise en page thmatique. Le Gestionnaire de combinaisons propose dsormais une Pipette vous permettant de baser votre combinaison personnalise sur n'importe quelle couleur de l'espace de travail.

Images

Images par tables lumineuses (p. 122) Cliquez sur une image miniature pour en afficher un agrandissement dans une table lumineuse contextuelle. Cela vous permet notamment de gagner de l'espace pour l'affichage de champs d'inscription, de formulaires ou de pages Web flottantes. Toutes les tables lumineuses flottent au-dessus de votre page et disposent de fonctions optionnelles de diaporama, de lgende et de style du plus bel effet ! Importer des images vectorises volutives (p. 307) Ajoutez des logos, des boutons et d'autres dessins vectoriels votre page grce au format SVG (et SVG compress) moderne et optimis pour les navigateurs.

20

Bienvenue

Importer des documents Microsoft Word 2010 (p. 227) l'instar des documents Word 2007, vous pouvez dsormais directement importer des documents Word 2010 dans des zones de texte ! Importer des paramtres utilisateur personnaliss lors de la mise niveau Vous effectuez une mise niveau partir de WebPlus X4 ? Dans WebPlus X5, vous pouvez maintenant conserver le contenu personnalis de votre Galerie, les styles d'objets, les prfrences, les dictionnaires personnels, les raccourcis clavier, les profils PDF, etc. L'aide de WebPlus rpertorie les amliorations mineures du produit par rapport aux prcdentes versions. Pour plus d'informations, reportez-vous la rubrique Nouvelles fonctionnalits de l'aide.

Installation
Configuration requise
Minimum :

PC Windows avec lecteur de DVD et souris Systme d'exploitation Microsoft Windows XP (32 bits), Windows Vista, ou Windows 7 512 Mo de RAM 336 Mo d'espace disque disponible Rsolution d'cran 1024 x 768 Internet Explorer 5.5 (6.0 ou version suivante compatible avec les objets intelligents)

Bienvenue

21

Des ressources disque et mmoire supplmentaires sont ncessaires pour modifier les sites complexes et/ou de grande taille. Facultatif :

Imprimante compatible Windows Scanner et/ou appareil numrique compatible TWAIN Carte d'acclration graphique 3D avec prise en charge de DirectX 9 (ou version suprieure) ou d'OpenGL .NET 2.0 pour filtre d'importation de texte (Word 2007/2010 + OpenOffice) (install par dfaut) Compte et connexion Internet requis pour les fonctions de publication Web et pour accder aux ressources en ligne

Premire installation
Pour installer WebPlus X5, il vous suffit d'insrer le DVD Programme dans votre lecteur de DVD. La fonction d'excution automatique lance automatiquement l'installation. Il suffit de rpondre aux questions poses l'cran pour installer le programme.

Rinstaller
Pour rinstaller le logiciel ou pour modifier l'installation ultrieurement, slectionnez Paramtres/Panneau de configuration dans le menu Dmarrer de Windows, puis cliquez sur l'icne Ajout/Suppression de programmes. Assurez-vous que le DVD Programme de WebPlus X5 est insr dans votre lecteur de DVD, cliquez sur le bouton Installer..., puis suivez les instructions qui apparaissent l'cran.

Dmarrage

23

Dmarrage

24

Dmarrage

Dmarrage

25

Assistant de dmarrage
Au lancement, l'Assistant de dmarrage s'affiche, offrant diffrentes fonctionnalits de WebPlus :

Les options se passent d'explications : un site peut tre cr de toutes pices ou partir de modles de conception fournis. Les sites existants peuvent tre ouverts ou les pages Web qui n'ont pas t cres dans WebPlus peuvent tre importes sur votre site partir d'un fichier ou d'une URL.

Crer un site, pour crer votre site. Utiliser un modle, pour crer immdiatement un site partir d'un modle prtabli. Plus, pour accder une gamme de ressources gratuits et de modles (payants).* Hbergement WebPlus, pour hberger votre site WebPlus publi auprs de Serif. Ouvrir, pour accder aux derniers sites ouverts. Survolez une entre pour afficher un aperu rapide !

26

Dmarrage

Zone d'apprentissage, pour accder aux didacticiels, aux informations techniques, etc.

* Il est possible que certaines options ne soient pas disponibles dans cette version de WebPlus X5. Le menu droulant Espace de travail vous permet de slectionner l'aspect de votre espace de travail (notamment la position et la taille des onglets du Studio, afficher/masquer l'onglet Position). Lorsque vous slectionnez diffrents profils dans le menu, votre espace de travail affiche successivement les dispositions d'onglets correspondantes. L'Assistant de dmarrage s'affiche par dfaut lorsque vous lancez WebPlus. Vous pouvez le dsactiver (ou le ractiver) en cochant ou en dsactivant l'option Ne plus afficher cet assistant sur l'cran de l'Assistant de dmarrage lui-mme ou par l'option Utiliser l'assistant de dmarrage dans l'onglet Gnral de la bote de dialogue Outils/Options. (utilisez l'option de menu Options/Gnral).

Crer un site partir d'un modle


WebPlus vous propose une gamme complte de modles de mise en page classs par catgories permettant d'acclrer le processus de cration de toutes sortes de sites Web. Chaque modle propose :

un modle complmentaire : un modle professionnel fort impact. Combinaisons : choisissez une combinaison de couleurs pour dfinir une apparence particulire (par exemple, Atlantis).

Dmarrage

27

Pages : choisissez toutes les pages du modle ou quelques-unes seulement (par exemple, Accueil, Produits, propos de nous, etc.) comme base de votre nouveau site.

Deux types de modles existent : les mises en page thmatiques, dans lesquels vous choisissez vos images personnelles, ou les modles pros prdfinis, dj dots d'images. Mises en page thmatiques Elles proposent une slection de thmes (p. ex., Gribouillage) sur laquelle votre site se base ; des images fictives remplacent les images relles. Ajoutez simplement vos images personnelles aux images fictives, ditez le texte, puis publiez.

Modles pros prdfinis Classs par catgories, ces modles contiennent des images libres de droits que vous pouvez adopter pour crer rapidement votre site Web. Il ne vous reste qu' personnaliser le texte de l'image fictive, puis publier.

Pour crer un site partir d'un modle : 1. Lancez WebPlus ou excutez la commande Fichier/Assistant de dmarrage pour afficher l'Assistant de dmarrage. Cliquez sur Utiliser un modle.

2.

28

Dmarrage

3.

Dans la bote de dialogue, slectionnez une mise en page thmatique ou un modle pro depuis le volet principal.

Mises en page thmatiques

Modles pros

Les modles pros sont runis par catgories de sujet ; utilisez la barre de dfilement ou dveloppez une catgorie pour accder d'autres options (cliquez sur le bouton en regard du nom de la catgorie). Le volet de droite affiche alors les miniatures des pages disponibles pour ce modle. 4. Dans le volet de droite, choisissez les pages que vous voulez intgrer votre site Web. Cochez ou dcochez chaque page slectionner, ou cliquez sur Slectionner tout pour slectionner toutes les pages (ou Dslectionner tout pour annuler la slection).

Dmarrage

29

5.

Slectionnez une combinaison de couleurs dans la liste en haut de la bote de dialogue (les trois premires combinaisons sont conues spcifiquement pour le modle choisi). Les miniatures des pages sont mises jour pour reflter la nouvelle apparence des pages. Pour un examen plus en dtail, utilisez les boutons Zoom avant/Zoom arrire ou les glissires de zoom au bas de la bote de dialogue. Cliquez sur Ouvrir.

6.

La premire page (la page d'accueil) du site apparat, avec l'onglet Site du Studio affich droite et prsentant les diverses pages qui constituent le site avec son arborescence Structure du site.

Remarques
Outre les modles pros WebPlus X5, les catgories de modles vous donnent accs aux modles payants de Serif. Comme chaque modle est bas sur une combinaison de couleurs, vous pouvez tout moment remplacer la combinaison pour modifier les couleurs du site. Tout site WebPlus peut tre enregistr sous la forme d'un fichier de modle (*.wpx) sur la base duquel vous pourrez crer d'autres sites. Voir "Enregistrer vos propres modles" dans l'aide de WebPlus.

Crer un site de toutes pices


Bien que les modles de mise en page facilitent vos choix de conception, vous pouvez tout aussi facilement crer un site partir de zro.

30

Dmarrage

Pour crer un site l'aide de l'Assistant de dmarrage :

Lancez WebPlus. - ou Cliquez sur standard. Nouveau site dans la barre d'outils

Slectionnez Crer/Crer un site.

Le nouveau site apparat dans une page vierge utilisant les proprits de page par dfaut. Si vous cliquez sur Annuler dans l'Assistant de dmarrage, vous obtiendrez le mme rsultat. Pour crer un site au cours dune session WebPlus :

Excutez la commande Fichier/Nouveau.

Pour faciliter la cration d'un site, WebPlus propose la Barre de cration rapide. L'onglet correspondant propose des objets et des fonctions courantes que vous pouvez appliquer votre page Web par glisser-dposer. Ainsi, vous n'tes pas oblig de matriser immdiatement la gamme complte de barres d'outils de WebPlus.

Ouvrir un site existant


Vous pouvez ouvrir un site WebPlus existant partir de l'Assistant de dmarrage, 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 le menu Fichier. (Voir l'aide de WebPlus pour plus d'informations.)

Dmarrage

31

Pour ouvrir un site WebPlus existant laide de lAssistant de dmarrage : 1. Dans l'Assistant de dmarrage, parcourez vos sites depuis la section Ouvrir. Le dernier site ouvert s'affichera en tte de liste. Pour afficher l'aperu d'un site avant de l'ouvrir, placez le pointeur au-dessus du nom de fichier dans la liste. Cliquez sur le nom d'un fichier pour l'ouvrir. Si votre site n'a pas t ouvert rcemment, cliquez sur Parcourir pour y accder.

2.

Pour ouvrir un site WebPlus existant (lorsque WebPlus est ouvert) : 1. 2. Cliquez sur le bouton standard. Ouvrir dans la barre d'outils

Dans la bote de dialogue Ouvrir, slectionnez le dossier et le nom du fichier. Pour slectionner plusieurs sites, maintenez la touche Maj enfonce pour slectionner plusieurs fichiers adjacents ou maintenez la touche Ctrl enfonce pour slectionner des fichiers spars. Cliquez sur le bouton Ouvrir.

3.

Pour ouvrir des sites par glisser-dplacer :

Cliquez sur la miniature d'aperu du site dans l'explorateur de Windows et faites glisser la slection dans l'espace de travail de WebPlus.

Pour restaurer la version prcdemment enregistre d'un site ouvert :

Excutez la commande Fichier/Version prcdente.

32

Dmarrage

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 installees sur l'ordinateur. La bote de dialogue qui apparat permet aussi de remplacer manuellement une police manquante, si ncessaire. Voir l'aide de WebPlus pour plus d'informations.

Travailler sur plusieurs sites


Si vous ouvrez plusieurs sites Web simultanment, vous pouvez facilement passer de l'une l'autre par diffrentes mthodes. Cliquez sur l'onglet Fentre en haut de l'espace de travail pour le rendre actif (p. ex., w456.wpp). Vous pouvez aussi slectionner le nom d'un site ouvert dans le menu Fentre. Le nom des sites Web non enregistrs est suivi d'un astrisque ; le site actif est prcd d'une coche. Dans l'exemple ci-contre, le site w456.wpp est actif et non enregistr.

Enregistrer votre site Web


Pour enregistrer votre travail :

Cliquez sur le bouton d'outils standard.

Enregistrer dans la barre

Pour l'enregistrer sous un autre nom, excutez la commande Fichier/Enregistrer sous. Le nom d'un site non enregistr est suivi d'un astrisque dans son onglet ou dans le menu de Fentre.

Dvelopper des sites et des pages

34

Dvelopper des sites et des pages

Dvelopper des sites et des pages

35

Prsentation de la structure du site et de la navigation


Contrairement une publication imprime, un site Web ne repose pas sur une succession linaire 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 muse que des personnes visiteraient. En rgle gnrale, vous pouvez supposer que les visiteurs y entreront par la porte principale (la page d'accueil), mais la suite de la visite dpendra des liens que vous aurez prvus. Les passerelles de navigation sont comparables aux couloirs reliant les pices du muse. C'est vous, en tant qu'architecte, de prvoir 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 reprsenter visuellement la structure de votre site, puis ajouter des barres de navigation, qui s'adaptent de faon dynamique la structure que vous avez dfinie.

Structure du site
Contrairement au muse 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 conserves. Il s'agit plutt de l'organisation logique du contenu du site de manire y simplifier la navigation. L'un des principes d'organisation les plus efficaces, dfendu par WebPlus, est une structure en arbre invers qui commence par la page d'accueil partir desquelles les ramifications se dveloppent vers d'autres pages. Du point de vue du visiteur qui parcourt votre site, cette disposition prsente le contenu d'une manire hirarchique familire, structure en sections et en niveaux.

Une section est une catgorie de contenu, telle que "Galerie", "Produits", ou "Contact". Les diverses sections principales sont gnralement rpertories sur la page d'accueil du site, dans une barre de navigation. Dans l'idal, chaque page du site appartient une section

36

Dvelopper des sites et des pages

particulire et, moins qu'il n'y ait qu'une seule page dans une section donne, la section a sa propre page principale qui sert gnralement de menu pour les pages subsidiaires.

Le niveau est le nombre d'tapes (de liens) sparant une page donne de la page d'accueil. La page d'accueil rside 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 situes un niveau "en dessous" des pages de menus des sections se trouvent au niveau 2 et sont considres comme les pages enfant de la page "parent". Par exemple, une page parent "Produits" pourrait comporter deux pages enfant appeles Produit1 et Produit2.

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. Voici un exemple de structure pouvant apparatre 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 manire adapte au contenu que vous avez offrir. videmment, un site Web est vritablement un rseau de pages lies les unes aux autres et l'arborescence ne vous empche pas de prvoir des liens entre deux pages. Mais elle matrialise la reprsentation des passerelles

Dvelopper des sites et des pages

37

principales (vers le haut, vers le bas et sur les cts) l'intrieur du site. L'organisation logique par sections et par niveaux simplifie la navigation l'intrieur du site. Avec WebPlus, vous pouvez facilement crer des barres de navigation qui refltent la structure du site et qui guident les visiteurs le long de ces artres principales. Il convient de noter que WebPlus gre galement les pages HTML et les liens externes qui peuvent tre insrs dans la Structure du site comme toute autre page. Les icnes de page HTML et de lien externe sont lgrement diffrentes d'une page Web standard pour indiquer qu'elles ne sont bases que sur du code HTML (p. 63) ou qu'elles pointent vers un emplacement l'extrieur du site Web.

Navigation
Dans WebPlus, la navigation entre vos pages Web est facilite par des barres de navigation, programmes pour comprendre la structure de votre site, de manire faciliter la conception d'un site dont la navigation est simple. Il suffit de slectionner 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 reprsent dans l'arborescence ci-dessus. Les boutons constituent des liens vers la page d'accueil et les pages de menus de sections (toutes au niveau 1) et des menus droulants qui pointent vers des pages enfants (niveau 2 en l'occurrence).

Pour plus d'informations, reportez-vous Ajouter des barres de navigation p. 81.

38

Dvelopper des sites et des pages

Dfinir les proprits du site


Les proprits du site permettent de dfinir des rglages qui s'appliqueront la totalit du site. De manire gnrale, choisissez les paramtres du site au moment de la prparation du site. Une fois dfinis, les paramtres n'ont gnralement pas besoin d'tre modifis (mme si vous pouvez le faire tout moment). Certaines proprits du site, telles que les paramtres d'apparence de la page et d'optimisation pour les moteurs de recherche s'appliquent aussi aux pages (via les Proprits de la page, p. 67). Cela permet de remplacer ou de complter les proprits "globales" du site, respectivement et d'appliquer des paramtres "locaux" des pages particulires. Pour afficher ou modifier les paramtres du site :

Slectionnez Proprits du site dans le menu Fichier. La bote de dialogue Proprits du site apparat, chaque option de menu affiche reprsentant un aspect des proprits du site. Proprit

Option de menu Page (dfaut)

Alignement de la page par dfaut WebPlus vous permet de dfinir un alignement de page horizontal par dfaut (gauche ou centr). Taille de la page par dfaut Les rglages de largeur et de hauteur par dfaut dterminent les dimensions des nouvelles pages Web standard ou des maquettes. Apparence de la page Dfinit les couleurs thmatiques ou non thmatiques pour les liens hypertextes, la couleur de la page, et la couleur d'arrire-plan de tout le site.

Dvelopper des sites et des pages

39

Noms des fichiers

Extension de fichier par dfaut L'extension par dfaut des pages publies est .HTML. Certains serveurs web requirent une extension diffrente. Avertir en cas de majuscules dans les noms de fichiers Lors de la cration de pages, l'utilisateur est averti si des caractres en majuscules sont utiliss dans le nom de fichier de la page. Noms des fichiers de ressources Contrle la mise en forme des noms de fichiers de ressources afin de garantir la russite du chargement des fichiers chez les FAI qui imposent des contraintes de noms de fichiers.

Publication

URL du site Dfinit l'adresse URL complte. C'est indispensable pour l'optimisation des moteurs de recherche avec des sitemaps ou des flux RSS. Compte FTP Dfinit le compte FTP par dfaut utilis pour la publication Web. Paramtres de compte FTP Affiche les paramtres de compte FTP par dfaut.

Images

Options globales d'exportation des images Applique les paramtres par dfaut de mise en forme, de rchantillonnage, de nom, d'optimisation, de texte sous forme de courbe, et de largeur/hauteur maximale pour les images associes.

40

Dvelopper des sites et des pages

HTML

HTML et identifiants HTML par dfaut Dtermine la cration de vos pages web par la slection de plusieurs mthodes diffrentes de codage et le choix de la manire dont les identifiants HTML sont gnrs. En-tte des pages Ajoute les informations sur l'auteur et le copyright aux en-ttes des pages de votre site.

Caractristiques Objets intelligents Remplace les couleurs de blog, de forum, ou de SCG par les couleurs de votre choix, non associes une combinaison, ou par les combinaisons de couleurs actuelles de votre site. Caractristiques Objets intelligents Applique la combinaison de couleurs du site courant aux objets intelligents tels que les blogs, les forums et le SGC. Table lumineuse Paramtres gnraux Dfinit les paramtres des tables lumineuses pour tout le site. Vous pouvez configurer les paramtres de bordure, de couleur de bordure, de couleur/opacit de contenu et de lecture. Paramtres de lgende Dfinit la police d'une lgende, sa position, sa taille, la couleur/opacit de la police, et la couleur d'arrire-plan du texte. Paramtres de l'arrire-plan Dfinit la couleur/opacit de l'arrire-plan. Aperu de la table lumineuse Cliquez sur Aperu de la table lumineuse pour tester les paramtres de la table lumineuse que vous venez de dfinir.

Dvelopper des sites et des pages

41

Icne des favoris

Affiche une icne des favoris. Dfinit un fichier d'icne (une image) qui s'affichera lorsqu'un visiteur inclura votre site Web dans ses signets. Descripteurs pour les moteurs de recherche Permet d'inclure des informations descriptives facultatives et des mots-cls pour le site. 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 mta-donne Robots (ou un fichier robots.txt) contrle quelles pages doivent tre exclues de l'indexation. Rsum et statistiques Permet d'afficher et de modifier les informations du site courant.

Rechercher

Moteur de recherche

Rsum

Dfinir la taille et l'alignement de la page


Les proprits de Largeur et de Hauteur par dfaut du site dterminent les dimensions de toute page ou maquette nouvelle. Un paramtre par dfaut des proprits du site relatif l'alignement ( gauche ou centr) dfinit la manire dont le contenu de la page est align dans le navigateur. Quand vous crez un nouveau site de toutes pices, l'une des premires choses faire est de vrifier que ses dimensions par dfaut sont adaptes. Les paramtres de dimension peuvent tre modifis tout moment. En gnral, il est toutefois prfrable de dfinir de nouvelles dimensions avant de modifier la mise en page. En gnral, utilisez un paramtre de Largeur de page convenant un moniteur standard (750 pixels est un choix sr) qui ne contraindra pas les utilisateurs faire dfiler l'cran horizontalement.

42

Dvelopper des sites et des pages

Pour les dimensions et l'alignement des pages, vous pouvez remplacer le paramtre du site pour une page particulire, comme dcrit dans Dfinir les proprits de la page p. 67. Pour dfinir les paramtres de dimensions des pages pour l'ensemble du site :

Dans l'option de menu Page de la bote de dialogue, slectionnez des valeurs diffrentes de Largeur et/ou de Hauteur appliquer aux pages.

Vous pouvez aussi modifier le paramtre Alignement de la page par dfaut en tant que proprit du site. Pour dfinir les paramtres d'alignement des pages pour l'ensemble du site :

Dans l'option de menu Page de la bote de dialogue, slectionnez "Gauche" ou "Centr" dans le menu droulant Alignement de la page par dfaut.

Dfinir l'apparence de la page


Dans les proprits du site, vous pouvez dfinir globalement la couleur des liens hypertextes, la couleur de la page, la couleur d'arrire-plan, ainsi que votre image d'arrire-plan. Cela signifie que toutes les pages Web que vous avez cres adopteront ces paramtres, mme si vous avez toujours la possibilit de remplacer les paramtres de couleur de la page et de couleur d'arrire-plan de chaque page. Voir Dfinir les proprits de la page p. 67. Par dfaut, les sites bass sur un modle ou crs de toutes pices utilisent des combinaisons de couleurs pour les liens hypertextes et sur la page. Ces couleurs appartiennent la combinaison actuelle du site, mais vous pouvez appliquer une autre combinaison ou modifier individuellement les couleurs. Voir Utiliser des combinaisons de couleurs p. 384.

Dvelopper des sites et des pages

43

Pour dfinir la couleur des liens hypertexte, la couleur de la page, et la couleur d'arrire-plan : 1. Dans l'option de menu Page de la bote de dialogue, dans la section Apparence de la page, cliquez sur la flche bas et slectionnez la couleur modifier. Slectionnez une couleur diffrente dans la liste droulante, o figurent des couleurs de combinaison numrotes, accompagnes d'autres couleurs. Slectionnez Plus de couleurs pour faire ventuellement votre choix dans un Slecteur de couleur. Cliquez sur OK.

2.

3.

Pour dfinir une image d'arrire-plan : 1. 2. Dans la section Apparence de la page, cliquez sur Image d'arrire-plan. Cochez Utiliser une image d'arrire-plan, puis slectionnez l'image dans la bote de dialogue Importer une image. Cliquez sur Ouvrir.

Utilisez Options d'exportation pour indiquer si l'image doit tre convertie l'exportation ou conserve telle quelle. Si l'option Dfilement avec la page est coche, l'arrire-plan de l'image dfile indpendamment du contenu de la page, dans la fentre du navigateur ; si l'option est dcoche, l'arrire-plan ne peut pas dfiler avec le contenu de la page. Le menu droulant Rpter contrle la faon dont votre image se rpte sur l'arrire-plan (Horizontal, Vertical, ou Mosaque). L'option Aucun place une image unique.

44

Dvelopper des sites et des pages

Le menu droulant Position dfinit la position de votre image (p. ex., Centre haut). Pour des arrireplans rcurrents, l'image se rpte partir de sa position initiale. Vous pouvez aussi spcifier une position personnalise, qui dfinit la position de l'image par rapport son angle suprieur gauche.

3.

Cliquez sur OK. Si vous utilisez une image d'arrire-plan dote de zones transparentes, la couleur d'arrire-plan est toujours active et apparat en transparence ; sinon, l'image vient recouvrir la couleur d'arrire-plan. Si vous paramtrez la couleur de la page de sorte qu'elle soit transparente, l'arrire-plan de l'image apparat et les limites de la page deviennent invisibles (le contenu reste limit aux dimensions de la page).

Pour plus d'informations sur les autres paramtres d'onglets, reportez-vous l'aide de WebPlus.

Optimisation pour les moteurs de recherche


L'indexation dsigne la collecte automatique d'informations sur vos pages Web par des moteurs de recherche tels que Google, Yahoo, etc. En "rcoltant" ces informations via leur moteur de recherche, l'utilisateur peut exploiter ces informations indexes pour obtenir un rsultat rapide et prcis, correspondant aux critres de recherche dfinis. Par dfaut, le contenu de chaque page Web publie (surtout le texte de l'en-tte) est index. Toutefois, sachant que des milliards de pages Web sont constamment indexes sur Internet, les dveloppeurs Web peuvent optimiser la procdure d'indexation pour permettre aux pages de leur site d'tre mieux classes dans les rsultats de la recherche.

Dvelopper des sites et des pages

45

L'optimisation des pages Web pour les moteurs de recherche peut s'effectuer de diffrentes manires :

Titres de page : des titres de page peuvent tre crs pour complter les noms de page. Cela permet aux rsultats de recherche d'afficher vos pages avec un titre plus vocateur que le simple nom de page. Par exemple, dans les rsultats de recherche, la page d'accueil d'un site d'ornithologie pourrait s'intituler "Site d'ornithologie" plutt que "Page d'accueil" suivi d'une description de la page. Voir Dfinir les titres, les noms des pages et des fichiers. Mta-balises Description et Mots cls : Vous pouvez ajouter au site ou une page spcifique un texte descriptif qui sera inclus dans tout rsultat de recherche associ votre site/page. Les mots cls permettent une meilleure corrlation entre le texte saisi dans le moteur de recherche ( la manire de ce que vous saisissez dans Google) et les mots cls que vous avez associ avec votre site ou page Web. De plus, une mta-balise "Robots" permet aussi d'inclure/exclure le site ou les pages de l'indexation ; il est aussi possible d'empcher l'exploration des liens hypertextes vers d'autres pages. Texte ALT d'image : Texte alternatif, utilis la place d'une image impossible afficher, et exploitables par les robots des moteurs de recherche. Voir Dfinir les options d'exportation des images. Titre de lien hypertexte : texte complmentaire descriptif (p. ex., "Voir notre nouvelle gamme de produits") affich au survol de la destination d'un lien hypertexte, galement exploitable par les robots des moteurs de recherche. Voir Ajouter des liens hypertextes et des ancres. 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 mme manire que les

46

Dvelopper des sites et des pages

mta-balise 'Robots' mais il utilise un fichier texte (robots.txt) pour indiquer aux robots ou aux araignes ce qu'ils ne doivent pas indexer. Le fichier numre simplement des rfrences de dossiers ou de pages exclus du site Web.

Sitemaps : inverse du concept de "robots" ; les pages peuvent tre incluses pour faciliter et optimiser l'indexation et l'analyse intelligentes. Les rfrences des pages du site Web sont conserves dans un fichier sitemap ddi (sitemap.xml).

Que vous utilisiez des mta-balises, des robots ou des cartes de site indpendamment ou conjointement, WebPlus simplifie la configuration. Comme ces rglages peuvent tre tablis ou modifis pour tous le site (Proprits du site ; option de menu Moteur de recherche), toute nouvelle page adopte les rglages de moteur de recherche du site. Si vous modifiez les paramtres du site, toutes les pages Web sont automatiquement mises jour pour adopter les nouveaux rglages. Toutefois, vous pouvez annuler les rglages du site sur une page Web particulire (Proprits de la page ; option de menu Moteur de recherche) tout moment. Lorsque la page n'emploie pas les rglages du site, les modifications apportes ces rglages sont toujours ignores pour ces pages.

Utiliser des titres, des descriptions et des balises


Si vous souhaitez augmenter la probabilit que votre site Web soit remarqu par les principaux moteurs de recherche du Web, nous vous conseillons d'optimiser les titres de vos pages et de dfinir des descripteurs et des balises appropris. Cette dmarche reste toutefois facultative. Les moteurs de recherche possdent des catalogues de pages Web, souvent compils grce des moteurs de balayage ou d'autres programmes qui sillonnent le Web la recherche de donnes sur les sites et leur contenu. En apportant des titres descriptifs, des descriptions et des balises, vous aidez ces moteurs de recherche traiter les informations de votre site. Vous pouvez dfinir globalement ou individuellement les titres, les

Dvelopper des sites et des pages

47

descriptions et les balises des pages de votre site. Par exemple, pour un simple site web ornithologique, vous pouvez avoir les dtails suivants, refltant le contenu de votre site ou de votre page : Dans les Proprits de la site Titre N/D Dans les Proprits de la page Oiseaux amricains : Galerie d'aigrettes et de hrons Dcouvrez les espces de grande taille vivant dans les marais d'eau douce, les lagons ctiers et mme sur le littoral. aigrette garde-bufs, aigrette sacre, hron stri

Description

Ce joli site de galeries photos prsente la beaut et la diversit des oiseaux d'Amrique du Nord. oiseaux, amricains, Audubon

Mots cls

Pour saisir des descripteurs destins aux moteurs de recherche : 1. (Pour le site) Slectionnez Fichier/Proprits du site. - ou (Pour une page) Effectuez un clic droit sur l'espace de travail (ou l'onglet Site) et slectionnez Proprits de la page... (ou choisissez l'option dans le menu dition). 2. 3. Cliquez sur l'option de menu Rechercher de la bote de dialogue. Dans la fentre du haut, saisissez une brve description de votre site. La description n'est pas limite en longueur, mais les dix premiers mots sont les plus importants.

48

Dvelopper des sites et des pages

4.

Dans la fentre du bas, saisissez autant de mots cls, spars par des virgules, qu'il vous semble bon d'indiquer pour dcrire votre site/page. Mettez-vous la place d'un visiteur potentiel. Quels mots-cls saisirait-il s'il cherchait exactement ce que propose votre site ou votre page ? Choisissez le code de langue dans le menu droulant pour identifier la langue utilise. La plupart des moteurs de recherche permettent de filtrer les pages web par langue ; votre site figurera dans les rsultats fournis en fonction du code de langue dfini.

5.

Exclure des pages de l'indexation (mtabalises "robots")


Une mta-balise "robots" peut tre utilise pour contrler la manire dont les robots des moteurs de recherche accdent au site Web ou la page. L'ensemble du site Web (et des pages) peut tre dfini pour tre index ou non, les liens hypertextes des pages peuvent tre suivis ou non ou une combinaison de ces rglages. Les rglages sont appliqus au niveau du site en cochant Indexer les pages de ce site et Liens suivis des pages ou uniquement aux proprits de pages particulires. Pour activer la gnration de la mta-balise "robots" : 1. (Pour le site) Slectionnez Fichier/Proprits du site. - ou (Pour une page) Effectuez un clic droit sur l'espace de travail (ou l'onglet Site) et slectionnez Proprits de la page... (ou choisissez l'option dans le menu dition). 2. Slectionnez l'option de menu Moteur de recherche et cochez l'option Crer une mta-balise 'Robots' (pour une page, vous devez annuler et remplacer les rglages au niveau du site).

Dvelopper des sites et des pages

49

3.

(Pour le site) Utilisez deux sous-options pour autoriser ou empcher les moteurs de recherche d'indexer la totalit du site (cochez/dcochez l'option Indexer les pages de ce site) ou pour autoriser ou empcher l'indexation de toutes les pages lies partir d'une page indexe (cochez/dcochez l'option Liens suivis des pages). - ou (Pour la page) Vrifiez que l'option Remplacer les paramtres de moteur de recherche du site est active, puis cochez Crer une mta-balise 'Robots' et cochez/dcochez les sous-options quivalentes pour la page choisie.

Exclure des pages de l'indexation (fichier "robots")


L'objectif de cette mthode est la mme que celle de l'utilisation d'une mta-balise 'Robots', mais un fichier robots.txt est cr et aucune mta-balise 'Robots' n'est ajoute 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 vrifier les pages et les dossiers exclus. Pour activez un fichier robots.txt : 1. 2. Slectionnez Proprits du site dans le menu Fichier. Dans l'option de menu Moteur de recherche, cochez l'option Crer un fichier 'Robots' de moteur de recherche. (Pour le site) Pour autoriser ou empcher les moteurs de recherche d'indexer la totalit du site (cochez/dcochez l'option Indexer les pages de ce site ). - ou -

3.

50

Dvelopper des sites et des pages

(Pour une page) Pour empcher les moteurs de recherche d'indexer la page, vrifiez que l'option Remplacer les paramtres du moteur de recherche du site est active, puis dcochez l'option Indexer cette page.

Inclure des pages dans l'indexation


Jusqu'ici, nous nous sommes surtout intresss des mthodes permettant d'exclure des pages Web de l'indexation. Sans ces contrles, les pages Web sont indexes en dcouvrant les liens hypertextes sur les pages et en les suivant, en rcoltant les mots cls, les descriptions et le texte des pages indexer. Toutefois, cette procdure n'est pas toujours efficace car il peut y avoir un nombre limit de liens hypertextes entre les pages et prsents sur la totalit du site. Par consquent, un fichier sitemap de moteur de recherche (sitemap.xml) peut tre cr pour servir de rfrence locale aux moteurs avant l'analyse du site. Le fichier numre simplement les pages du site Web que vous avez dfinies comme pouvant tre indexes. Le fichier indique aussi aux moteurs de recherche quand les pages ont t modifies, les informe du moment o ils doivent vrifier la page et l'importance des pages les unes par rapport aux autres. Comme les fichiers "robots", le rglage des proprits du site et de la page cre 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 ncessit de dclarer 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 transfrs sur votre site lorsqu'ils cliquent sur le lien dans les rsultats de la recherche.

Dvelopper des sites et des pages

51

Pour activer les sitemaps des moteurs de recherche : 1. 2. Slectionnez Proprits du site dans le menu Fichier. Dans l'option de menu Moteur de recherche, cochez l'option Crer un fichier 'Robots' de moteur de recherche. (Facultatif) Lorsque l'option ci-dessus est coche, le fichier sitemap.xml par dfaut peut tre renomm. Cliquez sur le bouton Modifier et effectuez les modifications requises. (Pour le site) Pour renseigner le fichier sitemap avec la liste de toutes les pages Web du site (pour une meilleure "dcouverte" des pages), cochez l'option Indexer les pages de ce site. Dcochez pour crer un fichier un fichier sitemap.xml vide. - ou (Pour une page) Dans les proprits de la page, pour ajouter la page au fichier sitemap, vrifiez que les options Remplacer les paramtres du moteur de recherche du site et Indexer cette page sont coches. Cela suppose que le site dans sa globalit n'a pas t list dans le fichier sitemap.xml. Cochez/dcochez les rglages sitemap, y compris :

3.

4.

5.

Date et heure de la dernire modification de la page. Frquence de modification de la page (rglez Toutes les heures, Tous les jours, Toutes les semaines, Tous les mois, Tous les ans ou Jamais) : cela indique au moteur de recherche quelle frquence la page est susceptible d'tre modifie. Le moteur de recherche choisit la frquence d'indexation de la page en fonction de ce rglage.

52

Dvelopper des sites et des pages

Niveau de priorit de la page : 0.0 (faible) 1.0 (leve). Dfinit une priorit des pages par rapport aux autres pages Web indexes par les moteurs de recherche. Le rglage par dfaut peut concerner les proprits du site avec des rglages spcifiques aux pages ayant une priorit suprieure ou infrieure au rglage par dfaut.

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 fentre contrle par des menus. L'outil vous permet de consulter les proprits des pages/maquettes et de faire votre choix dans une slection d'outils de gestion pour consulter et modifier les liens hypertexte, les ressources, le texte, les polices, etc. Parmi les fonctionnalits du Gestionnaire, il faut citer :

La possibilit de contrler l'tendue et de grer de la mme manire une page unique, une slection de pages ou toutes les pages de votre site. Les colonnes peuvent tre tries par ordre croissant ou dcroissant, ce qui permet de rorganiser rapidement les informations. Rechercher et Remplacer. Lorsque c'est possible, il s'agit d'une mthode rapide pour appliquer des changements au texte travers toutes les pages Web simultanment.

Tandis que la plupart des outils de gestion prsentent toujours un intrt un stade quelconque du dveloppement de sites Web, la gestion des ressources et du texte, allie l'utilisation du Vrificateur de site, sont essentielles pour la vrification du site Web juste avant sa publication sur le Web.

Dvelopper des sites et des pages

53

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 fonctionnalits de chaque Gestionnaire peuvent tre rsumes de la manire suivante : Type de gestion Pages/maquettes Vous permet de... Inclure les pages dans la navigation, associer des maquettes, dfinir l'alignement et les dimensions des pages, renommer les pages, dfinir un arrire-plan, ajouter du son, optimiser les pages pour les moteurs de recherche et appliquer des redirections, des transitions ou un accs utilisateur. Afficher et modifier les noms de pages HTML, les noms (et chemin d'accs) de fichiers, inclure des pages la navigation (avec contrle des sparateurs), ouvrir dans la fentre. Afficher et diter les liens hypertextes, accder aux liens hypertextes de la page, rechercher et remplacer les liens de destination. Afficher et modifier le nom et l'emplacement des ancres, inclure des pages la navigation (avec contrle des sparateurs), accder aux ancres.

Proprits de la page HTML

Lien hypertexte

Ancre

54

Dvelopper des sites et des pages

Ressource

Afficher les images, les mdias, les fichiers associs, les ressources de code HTML, les scripts ou les applications dans votre site. Accder toutes les ressources de la page, passer de l'tat d'image lie celui d'image intgre, remplacer ou rchantillonner les images. Voir les objets d'e-commerce sur les pages de votre site. Afficher et diter le texte (dans WritePlus), nommer les articles, remettre en forme le texte, appliquer des styles, convertir les cadres cratifs et les tableaux en texte compatible HTML. Vrifier les polices et leur disponibilit, accder des polices de la page et remplacer des polices. 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. Afficher des problmes de mise en page communs dcouverts dans le site.

E-commerce Texte

Police

Fichier

Vrificateur de site

Dvelopper des sites et des pages

55

Prsentation des pages et des maquettes


Du point de vue de la conception, chaque page WebPlus comporte une page au premier plan et une maquette l'arrire-plan.

Les Maquettes sont un moyen flexible de stocker des lments d'arrire-plan que vous souhaitez voir apparatre sur plusieurs pages, par exemple un logo, un arrire-plan, un en-tte, un pied de page, une bordure, ou une barre de navigation. Le point essentiel est qu'une maquette particulire est gnralement partage par plusieurs pages, comme illustr ci-dessous. En plaant un lment de la conception sur une maquette et en affectant plusieurs pages cette maquette, vous vous assurez que toutes les pages incorporent cet lment. Bien sr, chaque page individuelle peut comporter ses propres lments.

56

Dvelopper des sites et des pages

L'onglet Site du Studio comporte une section suprieure Maquettes contenant vos maquettes, et aining your master page(s), et une section Structure du site dans le fentre Pages contenant vos pages standard. La maquette utilise pour chaque page est indique dans la fentre. Pour une conception plus varie des pages de votre site, vous pouvez crer plusieurs maquettes (voir Ajouter, supprimer et rorganiser les pages p. 60). Lorsque vous disposez de plusieurs maquettes, vous pouvez les associer des pages distinctes ou les combiner sur la mme page.

Associer une autre maquette


Par dfaut, une maquette (Maquette A) est automatiquement associe aux pages cres dans de nouveaux sites. Toutefois, si vous souhaitez utiliser une autre maquette, vous pouvez l'associer la page plutt qu' la maquette d'origine. Pour associer une autre maquette une page : 1. 2. Sous l'onglet Site, faites un clic droit sur la page exclure et slectionnez Proprits de la page. Dans l'option de menu Arrire-plan de la bote de dialogue, dcochez la maquette d'origine, puis cochez la maquette que vous souhaitez utiliser. Cliquez sur OK.

3.

Pour dissocier une maquette :

Dcochez son entre dans la bote de dialogue Proprits de la page (option de menu Arrire-plan). Si vous dcochez toutes les maquettes, la page utilisera l'apparence du site (Proprits du site).

Dvelopper des sites et des pages

57

Associer plusieurs maquettes


WebPlus vous permet d'appliquer plusieurs maquettes la page Web slectionne, pour une conception de pages plus complexes. Vous pouvez galement organiser l'ordre des maquettes ainsi que le contenu des pages. Par exemple, si deux modles se situent sur deux maquettes distinctes ("Maquette A" et "Maquette B"), Dans les proprits de la page, vous pouvez placer la "Maquette B" (contenant le texte IPSUM) devant la page slectionne, la maquette A tant utilise comme arrire-plan de la page.

Pour associer plusieurs maquettes une page Web : 1. 2. Sous l'onglet Site, faites un clic droit sur la page exclure et slectionnez Proprits de la page. Dans l'option de menu Arrire-plan de la bote de dialogue, slectionnez plusieurs maquettes.

3.

Cliquez sur OK. La page utilisera dsormais les lments de page de toutes les maquettes.

58

Dvelopper des sites et des pages

La structure du site de l'onglet Site affiche une page Web accompagne d'un signe "+" si plusieurs maquettes sont associes (au lieu de A, B, C, etc.).

La bote de dialogue ci-dessus vous permet de contrler 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'entre situe en tte de liste s'afficheront devant les objets des maquettes "infrieures". Vous pouvez galement rorganiser les maquettes entre elles. Les nouvelles maquettes sont ajoutes en bas de la pile et apparatront donc derrire tout autre contenu. Dans l'exemple ci-contre, la Maquette B est positionne au-dessus de tout autre contenu. Pour rorganiser le contenu de la page et les maquettes :

Slectionnez l'entre de page dans la bote de dialogue Proprits de la page (option de menu Arrire-plan) et cliquez sur le bouton Haut ou Bas. - ou -

Dplacez une page en faisant glisser son nom vers une nouvelle position dans la liste. - ou -

Sous l'onglet Objets, slectionnez une page, puis rorganisez les maquettes.

Dvelopper des sites et des pages

59

Modifier les objets de la maquette


Si vous modifiez des pages associes des maquettes, les objets de ces maquettes contribueront la conception de votre page. Ces objets peuvent facilement et rapidement tre modifis sur la page l'aide d'une barre de commande situe sous chaque objet slectionn.

Pour modifier un objet de la maquette : 1. Sur votre page Web, slectionnez un objet de la maquette pour afficher la barre de commande. Modifier sur la maquette. La Cliquez sur maquette s'affiche et vous pouvez la modifier.

2.

Vous souhaiterez parfois dtacher un objet de votre page de sa maquette. Vous pouvez ensuite modifier cet objet en le faisant monter de la maquette sur la page Web, remplaant ainsi l'objet de maquette original par une copie modifiable. Pour faire monter un objet de la maquette : 1. Sur votre page Web, slectionnez un objet de la maquette pour afficher la barre de commande affiche sous l'objet. Convertir la maquette. Vous crez Cliquez sur une copie de l'objet original que vous pouvez modifier indpendamment sans affecter la maquette. Toutes les autres pages associes la maquette restent inchanges.

2.

60

Dvelopper des sites et des pages

Si vous changez d'avis tout moment, vous pouvez rattacher l'objet la maquette, laissant votre page telle qu'elle tait ' l'origine. Pour rattacher l'objet : 1. Sur votre page standard, slectionnez un objet converti pour afficher la barre de commande affiche sous l'objet. Cliquez sur Rtablir la maquette.

2.

Ajouter, supprimer et rorganiser les pages


l'aide de l'onglet Site du Studio, vous pouvez :

ajouter des pages standard ou HTML ; supprimer des pages ; ajouter une ou plusieurs maquettes ; utiliser un glisserdposer pour rorganiser les pages dans la structure de votre site. ajouter des pages partir de modles installs ; ajouter des liens externes ; dfinir une page comme page d'accueil.

Dvelopper des sites et des pages

61

La fentre Maquettes de l'onglet Site permet d'accder aux maquettes et la fentre Page (arborescence centrale Structure du site) permet d'accder aux pages.

Ajouter des pages


Pour ajouter une nouvelle page vide : 1. Dans la section Pages (structure du site) de l'onglet Site du Studio, slectionnez la page la suite de laquelle vous voulez ajouter une nouvelle page. Ajouter, Cliquez sur la flche bas du bouton situ juste au-dessus de la fentre Pages de l'onglet Site. Dans le menu droulant, choisissez Nouvelle page.

2.

3.

Dans la bote de dialogue Proprits de la page, spcifiez les diffrentes options de la nouvelle page (voir Dfinir les proprits de la page p. 67). Cliquez sur OK.

4.

Une nouvelle page apparat l'emplacement indiqu dans la structure du site. La page utilise les proprits du site p. 38 pour ses dimensions. Vous pouvez toujours dplacer la page un autre emplacement ou niveau ou activer une autre maquette (voir Rorganiser les pages ou Associer des maquettes p. 62 et 56). Toute page cre utilisera les proprits de site actuellement dfinies (menu Fichier), telles que la taille et l'alignement par dfaut de la page, moins que vous ne remplaciez les proprits du site dans la bote de dialogue prvue cet effet.

62

Dvelopper des sites et des pages

La page "vierge" peut galement tre base sur une maquette, par exemple si le site a t cr partir d'un modle, et peut de ce fait accueillir un contenu dfini par la maquette de la page vierge.

Ajouter des maquettes


Pour ajouter une nouvelle maquette : 1. Sous longlet Site du Studio, vrifiez que le bouton Maquettes est activ pour dvelopper la fentre Maquettes. Cliquez sur le bouton fentre Maquettes. Ajouter au-dessus de la

2.

Une nouvelle page de maquette figure dans la fentre Maquettes sous l'onglet Site. Pour raffecter des pages des maquettes spcifiques, reportez-vous la rubrique Prsentation des pages et des maquettes p. 55.

Supprimer des pages


Pour supprimer une page ou une maquette : 1. Sous l'onglet Site du Studio, slectionnez la page (ou la maquette) supprimer en cliquant sur son entre. Cliquez sur le bouton de la fentre approprie. Supprimer situ au-dessus

2.

Dvelopper des sites et des pages

63

Lorsque vous supprimez une page, vous avez la possibilit de supprimer tout lien hypertexte prsent 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 supprime peuvent ventuellement tre supprim).

Ajouter des pages HTML


Des pages HTML peuvent tre ajoutes toute structure de site de l'onglet Site. Ces pages peuvent tre incluses dans la navigation de la mme manire que les pages ordinaires. Pour ajouter une page HTML : 1. Dans la section Pages (structure du site) de l'onglet Site du Studio, slectionnez la page la suite de laquelle vous voulez ajouter une nouvelle page. Cliquez sur la flche vers le bas du bouton Ajouter, immdiatement au-dessus de la fentre Pages. Dans le menu droulant, choisissez Nouvelle page HTML

2.

Une nouvelle page HTML est ajoute l'onglet Site. Voir Crer des pages HTML (p. 71) pour plus d'informations.

Rorganiser les pages


L'arborescence de la Structure du site permet d'ajouter et de supprimer des pages, mais aussi de les rorganiser. A l'aide de la structure parent/enfant, la rorganisation des pages est une procdure intuitive pouvant tre ralise par glisser-dplacer ou en cliquant sur des boutons. Vous pouvez dplacer une page de la manire suivante :

64

Dvelopper des sites et des pages

Vers un autre emplacement dans la succession de page (vers le haut ou vers le bas) au mme niveau de la structure Vers un niveau (parent) suprieur Vers un niveau (enfant) infrieur

Pour dplacer une page : 1. 2. 3. Affichez l'onglet Site du Studio. Cliquez pour slectionner la page dans la structure du site. (Par glisser-dposer) Faites glisser l'entre 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 : dplace la page au-dessous et au mme niveau que la page cible slectionne. fait de la page un enfant de la page situe sous la page cible slectionne.

Ajouter des pages de modle


Tandis que l'ajout de pages standard vous permet de commencer concevoir une page de toutes pices, vous pouvez vous simplifier la tche en adoptant des pages prtes l'emploi partir des modles WebPlus installs. Pour conserver la prsentation d'origine de la page, toute maquette associe la page ajoute est "importe" avec la page.

Dvelopper des sites et des pages

65

Pour ajouter une nouvelle page partir d'un modle : 1. Dans la section Pages (structure du site) de l'onglet Site du Studio, slectionnez la page la suite de laquelle vous voulez ajouter une nouvelle page. Cliquez sur la flche vers le bas du bouton Ajouter, immdiatement au-dessus de la fentre Pages. Dans le menu droulant, choisissez Nouvelle page de modle. Dans la bote de dialogue Ajouter une nouvelle page depuis un modle, slectionnez un modle dans le volet de gauche et cochez la page ajouter (cochez d'autres pages ajouter, si ncessaire).

2.

3.

4.

WebPlus vous permet de vrifier si une maquette associe est copie avec la page. Choisissez l'une des commandes proposes dans le menu droulant situ en haut et gauche :

Copier la maquette. Pour toujours copier la maquette dans votre site. Comparer et copier la maquette. Vrifie si la maquette existe dj dans votre site, puis la copie si elle n'y figure pas.

66

Dvelopper des sites et des pages

5.

Aucune maquette. La maquette n'est jamais copie dans votre site.

Cliquez sur le bouton Ouvrir. Les pages sont ajoutes l'onglet Site.

Ajouter des liens externes


Vous pouvez galement ajouter un lien externe votre structure de site. Il s'agit gnralement 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 apparat 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. Pour ajouter un lien externe : 1. Dans la section Pages (structure du site) de l'onglet Site du Studio, slectionnez la page la suite de laquelle vous voulez ajouter une nouvelle page. Cliquez sur la flche vers le bas du bouton Ajouter, immdiatement au-dessus de la fentre Pages. Dans le menu droulant, choisissez Nouveau lien externe. Dans la bote 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). Cliquez pour slectionner le type de destination du lien et saisissez la cible du lien externe (voir Slectionner la cible d'un lien hypertexte p. 100) et la fentre o vous souhaitez que la cible apparaisse. Laissez l'option Inclure la navigation coche si le lien doit apparatre dans la navigation du site.

2.

3.

4.

Dvelopper des sites et des pages

67

Cochez Avant et/ou Aprs pour appliquer des lignes horizontales au-dessus/en dessous de la page en tant qu'lment de sous-menu dans les barres de navigation. Ajoutez une Description pour ajouter du texte relatif la page sur l'lment de sous-menu de la barre.

5.

Cliquez sur OK.

Dfinir votre page d'accueil


Pour utiliser une page Web comme page d'accueil :

Effectuez un clic droit sur une page standard de votre onglet Site, puis slectionnez Dfinir comme page d'accueil.

Dfinir les proprits de la page


Votre site WebPlus comporte son propre cadre de travail, compos du site lui-mme, d'une ou plusieurs maquettes et d'un certain nombre de pages distinctes. Chaque aspect de ce cadre de travail est dfini par divers paramtres de proprit qui contribuent l'apparence et au comportement de votre site lorsqu'il est publi. Que vous commenciez par un modle WebPlus ou partir de zro, vous pouvez utiliser les paramtres par dfaut ou les modifier selon vos besoins. Les proprits des pages peuvent tre consultes 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 trs performant pour consulter mais aussi pour modifier les proprits de plusieurs pages simultanment. Cochez simplement les pages voulues et modifier une ou plusieurs proprits de la page. Toutes les pages coches adoptent les nouveaux rglages.

68

Dvelopper des sites et des pages

Pour consulter les rglages de proprits des maquettes :

Cliquez sur le bouton Gestionnaire de maquettes au-dessus de la fentre Maquettes sur l'onglet Site. Le Gestionnaire de maquettes apparat.

Pour consulter les rglages de proprits des pages Web :

Dans l'espace de travail, cliquez avec le bouton droit de la souris sur la page et slectionnez Proprits de la page.

La bote de dialogue Proprits de la page apparat. Nom de l'onglet Proprit

Navigation Titre, nom des pages et des fichiers Chaque page comporte un nom de page "visible" ou (dfaut) un nom de fichier affich dans l'arborescence Structure du site, dans l'onglet Site. Vous pouvez modifier ces deux lments et choisir un titre diffrent du nom de la page. Inclure la navigation Par dfaut, toutes les pages sont incluses dans les barres de navigation. Cette option vous permet d'exclure la page de la navigation. Sparateurs et description Cochez Avant et/ou Aprs pour appliquer des lignes de sparation entre les options de menu des barres de navigation et les options de menus contextuels. Ajoutez une Description pour ajouter du texte relatif la page sous l'lment 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 prcdemment.

Dvelopper des sites et des pages

69

Positionnement Cette option place votre nouvelle page avant, aprs, ou en tant qu'enfant de la page choisie dans la liste droulante. Cette option ne s'affiche que lorsque vous ajoutez une page. Apparence Largeur et hauteur Dfinit les dimensions de pages ou de maquettes spcifiques, en remplaant la Taille de la page par dfaut (dans Fichier/Proprits du site) utilise lors de la cration de la page. Vous pouvez galement faire glisser le bord droit ou infrieur de la page pour modifier respectivement la largeur ou la hauteur de page. Alignement de la page L'alignement dtermine l'apparence du contenu de la page dans un navigateur. Utilisez le paramtre Alignement de la page par dfaut du site (Utiliser les paramtres du site) ou choisissez Gauche ou Centr la place. Slection Choisissez une couleur unique pour distinguer les objets placs sur cette page de ceux placs sur une maquette associe. La couleur s'affiche au survol et sur le contour de l'objet slectionn. Copier Duplique les lments de conception d'une page Web existante sur votre nouvelle page. Cochez Copier les objets de la page et slectionnez la page dans la liste active. Vous avez la possibilit de copier le contenu HTML associ. Cette option ne s'affiche que lorsque vous ajoutez une page.

70

Dvelopper des sites et des pages

Arrireplan

Maquettes Dfinit les maquettes associes votre page. Cochez l'option pour associer une maquette, dcochez-la pour dissocier une maquette, ou faites glisser les maquettes ( l'aide des boutons haut/bas) pour ragencer leur ordre. Arrire-plan La liste droulante propose plusieurs mthodes d'affichage de l'arrire-plan de la page.

Utiliser l'apparence du site : utilise l'apparence de l'arrire-plan du site dfinie dans Fichier/Proprits du site/Page. Utiliser l'arrire-plan de la maquette : utilise les paramtres d'arrire-plan d'une maquette associe. Ces paramtres remplaceront l'arrire-plan du site (cidessus). Utiliser un arrire-plan personnalis : utilise une couleur de page, une couleur d'arrire-plan ou une image d'arrireplan spcifique la page actuelle. Si "Utiliser un arrire-plan personnalis" est slectionn, les options sont disponibles.

Rechercher tiquettes de recherche Ajoutez des informations facultatives et des motscls sur certaines pages pour remplacer les paramtres de moteurs de recherche du site. Moteur de Sitemaps et robots recherche 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 rglages remplacent les paramtres du moteur de recherche du site.

Dvelopper des sites et des pages

71

Scurit de Scurit de la page Appliquez le contrle d'accs vos page(s) Web en la page associant la page un groupe d'utilisateurs (via l'objet intelligent Liste d'utilisateurs des ressources Web Serif). Rediriger Rediriger vers Une page est redirige vers une nouvelle destination (autre page, image, e-mail etc.) par un lien hypertexte aprs un intervalle de temps configurable. Transitions d'entre/de sortie de page Des transitions d'entre et de sortie de page peuvent tre appliques lors de la navigation d'une page une autre. Utiliser un fichier son Vous pouvez slectionner un son d'arrire-plan charger et lire automatiquement lors du premier affichage d'une page.

Effets

Crer des pages HTML


Le langage HTML correspond aux codes des balises que le navigateur du visiteur de votre site Web lit et interprte pour prsenter votre page. Le code et les balises utilises sont des instructions de prsentation 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 dveloppement de pages Web en code HTML. Vous pouvez ajouter des pages dans la fentre Structure du site de l'onglet Site. Une nouvelle icne de page HTML s'affiche.

Les pages HTML sous l'onglet Site peuvent tre contrles de la mme manire que les pages ordinaires, c'est--dire que vous pouvez les dplacer, les renommer, les prvisualiser, les inclure

72

Dvelopper des sites et des pages

dans la barre de navigation, insrer des liens hors site et valuer la dure de chargement. Toutefois, les pages HTML ne peuvent pas tre associes des maquettes. De plus, un double-clic sur l'icne de la page HTML ouvre la fentre Source de la page HTML pour en diter le code (il ne s'agit pas d'une prsentation l'identique d'une page ordinaire). La fentre Source contient des balises HTML basiques qui vous seront familires si vous tes un dveloppeur HTML expriment.

Il n'y a pas d'aperu lorsqu'on travaille directement au niveau du code source HTML. A ce stade, il est ncessaire de modifier la structure HTML du "modle". Gnralement, on insre du texte (qui est soit saisi, soit copi) entre la balise d'ouverture <body> et celle de fermeture </body> mme si la section <head> peut galement tre dite ; chaque paragraphe de la section <body> commence par la balise <p> et se termine par la balise </p>. Vous pouvez galement insrer des marqueurs d'annotation dans votre code HTML (reportez-vous Joindre du code HTML p. 147) en cliquant sur le bouton droit de la souris puis en slectionnant Insrer un marqueur). 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>.

Dvelopper des sites et des pages

73

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 dbut, vous trouverez certainement des didacticiels consacrs au HTML sur Internet. Lisez-les attentivement avant daborder ldition en HTML. Pour crer une page HTML : 1. Dans la section Pages (structure du site) de l'onglet Site du Studio, slectionnez la page la suite de laquelle vous voulez ajouter une nouvelle page. Un simple clic sur l'entre de la page suffit pour slectionner la page (le nom de la page est affich en gras) ; un double-clic affiche aussi la page dans l'espace de travail. Cliquez sur la flche vers le bas du bouton Ajouter une page ou un lien, immdiatement au-dessus de la fentre Pages. Dans le menu droulant, choisissez Nouvelle page HTML pour ajouter une page aprs la page d'origine.

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.

Si vous souhaitez annuler toutes les modifications apportes au code HTML, slectionnez le bouton Supprimer les modifications dans la barre d'outils contextuelle situe au-dessus de la fentre HTML.

74

Dvelopper des sites et des pages

Pour une publication rapide de la page HTML (pour une vrification 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 dfaut.

Pour retourner la Vue du dessin :

Slectionnez contextuelle.

Vue du dessin dans la barre d'outils

Afficher les pages


Lespace de travail dune publication de WebPlus consiste en une page et en une table de montage.

La page (A) est l'endroit o vous placez le texte, les images et autres lments que vous souhaitez faire apparatre sur votre page web finale. La table de montage (B) est l'endroit o vous placez gnralement les lments positionner sur la page. Lorsque vous

Dvelopper des sites et des pages

75

publiez le site partir du site WebPlus, tout ce qui se trouve sur la page apparat, et tout ce qui se trouve entirement sur la table de montage n'apparat pas. La table de montage, qui est partage par toutes les pages et maquettes, est utile pour copier ou dplacer des objets d'une page une autre. Pour dplacer 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 enfonce. Affichez la page cible (voir Passer dune page une autre ci-dessous). Faites glisser (en maintenant la touche Ctrl enfonce si vous souhaitez copier) l'objet de la table de montage la page de destination.

2. 3.

WebPlus vous permet de visualiser facilement votre travail et propose diverses options d'affichage allant de l'affichage d'une page entire un zoom avant sur une petite zone. Ainsi, vous pouvez utiliser les barres de dfilement situes en bas droite de la fentre principale pour dplacer la page et la table de montage par rapport la fentre principale. L'affichage se recentre automatiquement mesure que vous faites glisser les objets vers le ct de l'cran. La barre d'outils Affichage situe en haut de l'cran propose l'outil Dplacer, qui offre une autre manire de se dplacer dans la zone de travail. Vous pouvez galement procder un zoom avant ou arrire avec les boutons correspondants afin de pouvoir contrler et/ou modifier la page divers niveaux de dtails.

76

Dvelopper des sites et des pages

Passer d'une page une autre


WebPlus offre diverses faons d'atteindre rapidement la partie du site sur laquelle vous travaillez actuellement. L'onglet Site du Studio constitue un centre de contrle proposant la fois l'arborescence de la Structure du site qui reflte la hirarchie des pages du site (voir Prsentation de la structure du site et de la navigation p. 35) ainsi que les icnes des maquettes du site. Diffrence entre slection et affichage d'une page : un simple clic sur une entre de page/maquette slectionne simplement la page. Pour vraiment afficher la page/maquette associe, il est ncessaire de double-cliquer sur une entre. Une entre orange (avec le nom de la page en gras) correspond une page slectionne. L'icne de l'oeil dsigne la page actuellement affiche et que vous pouvez modifier dans l'espace de travail. Cet exemple montre que la page est affiche et slectionne. Une icne de maquette en surbrillance dans la fentre suprieure sous l'onglet Site dsigne une maquette slectionne. Une icne dil dans licne de la maquette dsigne la page actuellement affiche. Cette illustration prsente une maquette affiche et slectionne.

Dvelopper des sites et des pages

77

Pour afficher une page/maquette spcifique : Plusieurs mthodes permettent d'afficher une page :

Dans la barre d'tat, utilisez les boutons navigation parmi les pages. - ou -

pour la

Cliquez sur l'entre de la page ou maquette dans la liste Identificateur de page.

Sous l'onglet Site du Studio, double-cliquez sur l'entre de la page ou maquette afficher. A l'intrieur de l'onglet, la fentre Structure du site comporte une arborescence des pages du site, alors que la fentre Maquettes n'affiche les maquettes que sous forme de miniatures. Vous devrez peut-tre cliquer sur le bouton Maquettes pour afficher la fentre Maquettes. Cliquez sur le bouton Structure du site de la barre d'tat ou dans la fentre Page de l'onglet Site. Slectionnez l'entre de la page dans l'arborescence de la bote de dialogue (double-cliquez si ncessaire sur les entres de l'arborescence pour les dvelopper). Cliquez ensuite sur le bouton Aperu de la page.

78

Dvelopper des sites et des pages

Pour les maquettes :

Dans l'onglet Site du Studio, cliquez sur le bouton Maquettes> pour afficher la fentre Maquettes. Une ou plusieurs icnes de maquettes s'affichent. Double-cliquez sur l'icne de la maquette que vous voulez afficher.

Pour passer de la page la maquette :

Cliquez sur le bouton d'tat.

Page/Maquette de la barre

Si plusieurs maquettes sont associes une page, seule la premire est active. Raccourci d'affichage de la page d'accueil du site :

Cliquez sur le bouton d'tat.

Page d'accueil dans la barre

Navigation et liens hypertextes

80

Navigation et liens hypertextes

Navigation et liens hypertextes

81

Ajouter des barres de navigation


Dans WebPlus, des barres de navigation sont programmes pour comprendre la structure de votre site, de manire faciliter la conception d'un site dont la navigation est simple. Les barres de navigation facilitent les dplacements entre les diffrentes sections et diffrents niveaux d'un site (p. 35), fournissant des liens vers la page d'accueil et vers diffrentes pages des sections principales, tandis que les menus contextuels offrent des liens vers les pages enfant de chaque section. Vous pouvez aisment insrer des barres de navigation n'importe quel niveau de votre site, puis reconfigurer ceux-ci afin de les relier une section spcifique du site, modifier la prsentation d'une barre de navigation et exclure certaines pages spcifiques de la navigation, selon vos besoins.

Niveaux et structure de site


Pour rappel, la rubrique Prsentation de la structure du site et de la navigation (p. 35) vous explique que la structure d'un site est base sur une section et des niveaux. Lorsque vous dfinissez une barre de navigation, vous pouvez choisir le niveau de page affich dans cette barre. Imaginez cela comme un lment pointant vers les parties du site associer, par rapport la page de la barre de navigation. Vous pouvez spcifier "Niveau racine", "Mme niveau", "Niveau enfant", "Prcdent/Suivant", etc. Pour vous aider comprendre cette relation entre les pages et ces niveaux rfrencs, un repre visuel est ajout lorsque vous crez votre barre de navigation (dans chaque miniature Type de navigation). Les rectangles vert indiquent le niveau de page utiliser, et le point noir () la page sur laquelle votre barre de navigation est place.

82

Navigation et liens hypertextes

Niveau racine

Mme niveau

Niveau enfant

Prcdent et Suivant

Les modles d'icnes sont des exemples ne reprsentant pas la vritable structure de votre site. Comme les barres de navigation "comprennent" la structure de votre site, elles se mettent jour dynamiquement lorsque des pages sont dplaces vers des niveaux diffrents !

Crer des barres de navigation


Les barres de navigation peuvent tre ajoutes sur n'importe quelle page, mais on choisit gnralement la maquette pour viter d'avoir coller le mme lment sur plusieurs pages. La barre de navigation se comporte, sur une maquette, comme si elle tait prsente sur chaque page, sachant que ses boutons et menus sont dfinis par rapport la position de chaque page dans la structure globale du site. Lorsque vous ajoutez une barre de navigation, vous pouvez dfinir son apparence sur votre page en choisissant :

Type : la nature de votre barre de navigation (p. ex., bloc, bulle, traditionnelle). Type de navigation : le site ou la structure personnalise sur laquelle se base la barre de navigation. Apparence : le bouton, le sparateur et le modle d'arrire-plan de la barre de navigation. Vous pouvez utiliser des modles prdfinis ou personnaliss. Menus contextuels : le bouton, le sparateur et le modle d'arrire-plan de tout menu contextuel associ la barre de navigation (si des pages enfant sont utilises dans la structure de votre site).

Navigation et liens hypertextes

83

Pour ajouter une barre de navigation : 1. 2. Slectionnez la page (ou la maquette). Dans la palette Navigation de la barre d'outils Objets Web, cliquez sur Insrer une barre de navigation. Sous l'onglet Type de la bote de dialogue, parcourez les types de barres de navigation dans la liste droulante Type, en dveloppant les options du menu si ncessaire. Utilisez les flches du clavier pour une navigation plus rapide ! Dans la fentre d'aperu adjacente, survolez les options de menu pour modifier l'apparence des menus contextuels. 4. 5. Slectionnez un type de navigation, p. ex. Bloc 2. Sous l'onglet Type de navigation, indiquez si vous souhaitez directement baser votre barre de navigation sur la structure du site (activez Bas sur la structure du site). - ou Personnalisez les options de la barre de navigation (activez Personnaliser ; voir Personnaliser les barres de navigation p. 85). Lors de la slection de la structure du site :

3.

Slectionnez les boutons inclure dans la barre de navigation : Niveau racine, Niveau parent, Mme niveau, etc. En fonction des lments slectionns, vous pouvez dcidez d'inclure la page enfant, les ancres, la page d'accueil, la page parent, et/ou de masquer la page courante ou dsactiver les liens.

84

Navigation et liens hypertextes

Activez une option Attribution des noms si vous utilisez des liens relatifs tels que Accueil, Haut, Prcdent et Suivant. Une fois l'option Utiliser les noms dfinis active, les noms relatifs s'affichent, p. ex., "Suivant" ; l'option Utiliser le nom des pages affiche le nom rel de la page, dfini dans les proprits de cette page. Vous pouvez cliquer sur Personnaliser pour modifier le nom d'un lien relatif. Dfinissez l'option Fentre ou cadre cible pour indiquer quel emplacement la nouvelle page doit s'ouvrir. Slectionnez Mme fentre (option la plus utilise), Nouvelle fentre (utile dans le cas d'un renvoi vers une page externe au site), Haut de la fentre courante, Fentre parente, Fentre nomme et Cadre du document.

6.

(Facultatif) Sous l'onglet Apparence, vous pouvez au besoin slectionner des modles diffrents pour les boutons, les sparateurs ou l'arrire-plan. Ces modles apparatront sur votre barre de navigation principale. Procdez comme suit pour slectionner des modles :

Slectionnez un modle dans la palette en cliquant sur la flche bas de la miniature du bouton, p. ex. pour les boutons prdfinis. - ou -

Cliquez sur Modifier pour crer un modle personnalis, bas sur le bouton actif. Vous pourrez modifier la police, la taille et la couleur du texte, ainsi que les arrire-plans des diffrents tats du bouton Reportez-vous l'aide de WebPlus pour plus d'informations.

Navigation et liens hypertextes

85

7.

(Facultatif) Sous l'onglet Menus contextuels, slectionnez des modles, comme dcrit pour l'onglet Apparence, mais concernant les pages 'enfant" de la structure de votre site. Cliquez sur OK. Le barre de navigation s'affiche sur votre page. Des combinaisons de couleurs sont appliques aux barres de navigation, ce qui vous permet de mieux contrler leur apparence. Voir Utiliser des combinaisons de couleurs p. 384.

8.

Pour modifier une barre de navigation : 1. Faites un double-clic sur la barre de navigation. - ou Slectionnez - ou Effectuez un clic droit sur la barre, puis slectionnez Modifier la barre de navigation. 2. Modifiez les paramtres disponibles sous chaque onglet . Modifier la barre de navigation.

Personnaliser la structure des barres de navigation


Par dfaut, la structure de la barre de navigation se base sur la structure de votre site. Si vous souhaitez rorganiser l'ordre ou la hirarchie des lments de votre barre de navigation pour la distinguer de la structure de votre site, WebPlus vous permet de personnaliser toute barre de navigation en crant une arborescence personnalise. Vous pouvez ajouter, modifier ou supprimer des lments pointant vers divers types de destination (voir Ajouter des liens hypertextes et des ancres p. 100), comme avec l'option Structure du site de l'onglet Site.

86

Navigation et liens hypertextes

Si vous utilisez une arborescence personnalise, la barre de navigation ne se mettra plus jour automatiquement lorsque de nouvelles pages seront ajoutes au site. Si vous souhaitez une mise jour de la barre de navigation, vous devez baser votre barre sur la structure du site. Pour personnaliser une barre de navigation slectionne : 1. 2. 3. Double-cliquez sur la barre de navigation. Sous l'onglet Type de navigation, activez l'option Personnaliser. Ragencez les lments de la barre de navigation par glisser-dplacer (ou utilisez les boutons Vers le haut, Vers le bas, Page enfant ou Page parente). Cliquez sur le bouton Ajouter un lien pour ajouter un nouveau lien en bas de votre arborescence personnalise, gnralement pour insrer un page ajoute ultrieurement votre site. Une destination de lien, un cadre ou une fentre cible et un titre sont attribus au nouvel lment dans la bote de dialogue qui s'affiche. Cliquez sur OK. Cliquez une nouvelle fois sur OK. La barre de navigation utilise dsormais l'arborescence personnalise pour afficher les options de menu.

4.

5.

Cliquez sur Rtablir pour rtablir la structure de site de l'arborescence, ou sur Supprimer tout pour supprimer toutes les entres de l'arborescence. L'arborescence personnalise peut galement tre enregistre dans votre site, en vue d'une utilisation dans d'autres barres de navigation.

Navigation et liens hypertextes

87

Pour enregistrer votre barre de navigation personnalise :

Cliquez sur Valeurs par dfaut, puis slectionnez Enregistrer dans la palette. Entrez le nom de votre arborescence personnalise (p. ex., arbo_perso-1). Cliquez sur OK. L'arborescence est stocke dans votre site.

Vous pouvez ultrieurement rcuprer votre arborescence enregistre pour l'appliquer d'autres barres de navigation, l'aide de l'option Valeurs par dfaut (palette Charger).

Modifier des boutons, des sparateurs et des arrire-plans


Lorsque vous crez ou modifiez une barre de navigation, vous pouvez conserver son type de navigation et sa structure, tout en modifiant ou en personnalisant les boutons, les sparateurs et l'arrire-plan composant la barre de navigation. Vous pouvez crer des barres supplmentaires partir de toute barre de navigation prsente dans votre site. Commencez simplement par slectionner une barre de navigation. Cela peut vous permettre d'obtenir plus rapidement l'effet escompt. Pour afficher les paramtres des boutons, des sparateurs et des arrire-plans :

Sous l'onglet Apparence, vous pouvez modifier ou personnaliser des boutons, des sparateurs et l'arrireplan aprs les avoir slectionns dans une fentre de slection.

88

Navigation et liens hypertextes

Les options de la bote de dialogue changent en fonction de l'lment de barre de navigation slectionn. Pour remplacer des boutons de barre de navigation (par un autre bouton prdfini) : 1. 2. Cliquez sur la liste droulante de la miniature Simple pour afficher la palette Modles. Slectionnez un bouton dans l'une des catgories (qui correspondent aux catgories Type de la barre de navigation). (Facultatif) Rglez les options Sparation et Alignement. Les options horizontales et verticales affectent respectivement les boutons affichs horizontalement et verticalement dans la barre de navigation. Cliquez sur OK. Vous pouvez crer des boutons de toutes pices l'aide du Studio de boutons de WebPlus. (Voir Crer des boutons personnaliss p. 98). Pour remplacer des sparateurs de barre de navigation (par un autre modle) : 1. 2. 3. 4. Cliquez sur la liste droulante de la miniature Sparateur pour afficher la palette Modles. Slectionnez un sparateur dans l'une des catgories. (Facultatif) Rglez les options d'chelle et crez des sparateurs. Cliquez sur OK.

3.

4.

Navigation et liens hypertextes

89

Vous pouvez crer des sparateurs de toutes pices l'aide du Studio de modles de WebPlus. (Voir Crer des boutons personnaliss p. 98). Pour remplacer un arrire-plan de barre de navigation (par un autre modle) : 1. 2. 3. 4. Cliquez sur la liste droulante de la miniature Arrireplan pour afficher la palette Modles. Slectionnez un arrire-plan dans l'une des catgories. (Facultatif) Rglez le remplissage et les autres options. Cliquez sur OK.

Modifier des menus contextuels


Les menus contextuels font partie intgrante des barres de navigation qui sont bases sur les structures de site utilisant des pages enfant. Ils n'apparaissent que lorsque le pointeur de la souris survole un bouton de la barre de navigation, et disparaissent lorsque le pointeur s'loigne du bouton.

l'image des boutons, les menus contextuels sont personnalisables, la diffrence qu'ils peuvent tre configurs en tant que Menus contextuels de texte et comme Menus contextuels d'image. Le type de barre de navigation (Bloc, Surbrillance, Bulle, etc.) peut utiliser ces deux types de menus contexuels selon le modle.

90

Navigation et liens hypertextes

Pour afficher les paramtres des menus contextuels : 1. Sous l'onglet Menus contextuels, vous pouvez personnaliser votre menu en choisissant un type : Menus contextuels de texte ou Menus contextuels d'image. Cela vous permet de slectionner des objets pour composer les menus. Slectionnez une option de menu. Les options de la bote de dialogue changent en fonction de l'option slectionne. Adaptez les champs de saisie, les listes droulantes, les boutons radio et les cases cocher votre modle de menu contextuel. Les paramtres de menu contextuel d'image pour les boutons, les sparateurs et l'arrire-plan sont similaires ceux des boutons.

2.

3.

Afficher des sparateurs


Pour toute page, tout lien externe ou toute ancre incluse dans la navigation et prsente sur votre barre de navigation (ou dans ses menus contextuels), vous pouvez contrler l'affichage des sparateurs situs entre les options de menu. Pour contrler l'affichage des sparateurs sur la barre de navigation : 1. Dans la bote de dialogue Paramtres de la barre de navigation, slectionnez l'onglet Apparence, puis l'option Sparateurs. Activez l'option Insrer un sparateur si spcifi par l'arborescence. Cliquez sur OK. Sous l'onglet Site, effectuez un clic droit sur la page/le lien externe, puis slectionnez Proprits de la page.

2. 3. 4.

Navigation et liens hypertextes

91

5.

Dans l'option de menu Navigation, cochez Avant et/ou Aprs pour appliquer une ligne de sparateur audessus/en dessous de l'lment du menu contextuel de la page. Cliquez sur OK. Les ancres d'objet disposent d'options de sparateurs quivalents lorsque vous effectuez un clic droit sur un objet et slectionnez Ancre.

6.

Pour contrler l'affichage des sparateurs dans les menus contextuels : 1. Dans la bote de dialogue Paramtres de la barre de navigation, slectionnez l'onglet Menus contextuels.

Pour les Menus contextuels de texte (activez le bouton radio), slectionnez Lignes/contour et bordure, puis cochez Insrer un sparateur si spcifi par l'arborescence. - ou Pour les Menus contextuels d'image (activez le bouton radio), slectionnez Sparators, puis activez l'option mentionne ci-dessus.

2. 3.

Cliquez sur OK. Rptez les tapes 4 6 ci-dessus.

Enregistrer les options de barre de navigation


Si vous avez personnalis les boutons, les sparateurs, l'arrire-plan d'une barre de navigation, ainsi que son menu contextuel, vous pouvez enregistrer ces paramtres combins dans un mme emplacement, l'aide de l'option Valeurs par dfaut. Cela est pratique pour appliquer la mme apparence aux autres barres de navigation que vous crez pour votre site.

92

Navigation et liens hypertextes

Inclure/exlure des pages dans la navigation


Par dfaut, toutes les pages sont incluses dans la navigation. Autrement dit, elles peuvent tre relies par des barres de navigation. Vous pouvez cependant exclure certaines pages (sauf la Page d'accueil) de faon ce qu'elles ne soient pas prises en compte par les barres de navigation. Par exemple, imaginons que votre site comporte une section de rfrences 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 systme de navigation ne supprimera pas la page du site. La page apparatra toujours dans la structure du site et vous pourrez toujours y insrer des liens hypertextes. Simplement, elle n'apparatra pas dans une barre de navigation. 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 slectionnez Proprits de la page. Dcochez Inclure la navigation. Les pages incluses affichent, dans leur entre 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.

Utiliser des barres de navigation dynamiques


Jusqu' prsent, nous sommes partis du principe que les barres de navigation sont bases sur la structure de votre site et affichent des pages statiques comme lments de menu. Toutefois, pour des barres de navigation plus dynamiques, vous pouvez complter 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.

Navigation et liens hypertextes

93

Supposons que vous utilisez dj un lien externe pour vous connecter votre forum, votre SGC et votre blog, et que le lien externe est inclus dans la navigation. Pour crer une barre de navigation dynamique :

Effectuez un clic droit sur le lien externe de l'onglet Site, puis cliquez sur Proprits du lien externe.... Dans la bote de dialogue Lien externe, modifiez le menu droulant de la section Information sur l'objet intelligent pour ajouter des lments de flux (c'est--dire des titres d'articles publis) comme enfants du sous-menu de la barre. Chaque titre d'article est cliquable et ouvre l'article associ dans une fentre, gnralement spare.

Convertir en panneau
Vous pouvez convertir votre barre de navigation en panneau, bnficiant ainsi d'une plus grande libert dans le positionnement des boutons de votre barre de navigation (dans le panneau) et de la possibilit de laisser les barres de navigation visibles tout moment. Pour convertir une barre de navigation en panneau : 1. 2. Slectionnez la barre de navigation. Dans la barre d'outils contextuelle, slectionnez Convertir en panneau.

Pour plus d'informations sur les panneaux, reportez-vous la rubrique Ajouter des panneaux p. 126.

94

Navigation et liens hypertextes

Ajouter des menus contextuels


Les menus contextuels font partie intgrante des barres de navigation (p. 81), ne s'affichant sous forme de menus que lorsqu'un bouton est survol. Les lments de menu contextuel reprsentent des pages enfant situes aux niveaux infrieurs de votre site. Dans WebPlus, vous pouvez aussi ajouter des menus contextuels tout objet (Forme pleine, image, lment de galerie, mais dans la plupart des cas un bouton). Ces menus sont similaires ceux intgrs aux barres de navigation. Comme les barres de navigation, les lments de menu contextuel peuvent tre configurs, adaptant soit la structure complte (ou partielle) du site, soit votre propre structure personnalise. Les menus contextuels sont particulirement utiles lorsque vous souhaitez afficher un nombre dfini de liens de navigation, parfois apparents, tel qu'un groupe de produits. Vous gardez une parfaite matrise du niveau que vous souhaitez prsenter dans le menu contextuel. Dans l'exemple ci-contre, le menu contextuel est bas sur des pages enfant appartenant une page parent Produits (hbergeant probablement le bouton et le menu contextuel).

Navigation et liens hypertextes

95

Pour crer un menu contextuel : 1. 2. Slectionnez un objet auquel associer le menu contextuel. Slectionnez Menu contextuel dans le menu Insertion. - ou Effectuez un clic droit sur un objet et slectionnez Menu contextuel. 3. Sous l'onglet Type de navigation de la bote de dialogue, cochez l'option Afficher un menu contextuel pour permettre l'association de liens de navigation l'objet. Activez Bas sur la structure du site ou Personnaliser pour utiliser les liens de navigation de votre site dans votre menu ou pour baser le menu contextuel sur votre structure personnalise (p. 85), respectivement. Sous l'onglet Apparence du menu de la bote de dialogue, slectionnez Menus contextuels de texte ou Menus contextuels d'image. Cela vous permet de slectionner des objets pour composer les menus. Slectionnez une option de menu dans le champ, puis adaptez les champs de saisie, les listes droulantes, les boutons radio et les cases cocher votre modle de menu contextuel. Les paramtres de menu contextuel d'image pour les boutons, les sparateurs et l'arrire-plan sont similaires ceux des boutons. Toutes les options sont dcrites en dtails dans Modifier des menus contextuels p. 89. 7. Cliquez sur OK.

4.

5.

6.

96

Navigation et liens hypertextes

Ajouter des boutons

Les boutons font partie intgrante des barres de navigation (p. 81) de WebPlus, mais vous pouvez galement les ajouter comme objets indpendants sur votre page Web, en les associant la destination d'un lien hypertexte ou en affichant un menu contextuel. Dans WebPlus, les boutons peuvent tre bass sur un modle prdfini ou tre crs de toutes pices dans le Studio de boutons. Il n'est pas rare de choisir un modle puis de l'adapter vos besoins. Quel que soit votre choix, vous pourrez modifier le libell pour l'adapter facilement et simplement la fonction de votre bouton. Pour ajouter un bouton prdfini : 1. 2. Dans la palette Navigation de la barre d'outils Objets Web, cliquez sur Insrer un bouton. Dans la bote de dialogue Modifier le bouton, cliquez sur l'aperu du bouton.

Navigation et liens hypertextes

97

3.

Slectionnez un type de bouton prdfini dans la palette. L'aperu s'actualise pour afficher le modle de bouton choisi. Entrez une lgende de bouton pour identifier le bouton, par exemple "Accueil", "Images", "Aide", etc. Slectionnez une Action qui sera appele lorsque vous cliquerez sur le bouton.

4. 5.

L'option Lien hypertexte dirigera l'utilisateur vers une cible (p. ex. une page Internet, une page de site, ou un fichier) via un lien hypertexte (p. 100). Cliquez sur Modifier pour slectionner le type de cible et la fentre de destination. Envoyer le formulaire cre un bouton Envoyer permettant de transmettre les donnes de formulaire. La lgende du bouton sera toujours remplace par Envoyer, mais vous pourrez tout de mme la modifier par la suite. L'action du bouton est appele lorsque le bouton est insr dans un formulaire. Rtablir le formulaire cre un bouton Rtablir utilis dans les formulaires pour effacer les donnes saisies dans les champs. Les boutons Envoyer et Rtablir sont gnralement placs cte cte. Script personnalis vous permet d'entrer votre propre code JavaScript dans le champ de saisie (sans avoir inclure les balises <script language="JavaScript"> et </script>).

6. 7.

(Facultatif) Cochez Dsactiv pour rendre l'lment inactif moins qu'il soit activ par un script. (Facultatif) Cochez Bouton initialement l'tat Cliqu pour que le bouton semble avoir t cliqu (au lieu d'tre l'tat Normal).

98

Navigation et liens hypertextes

8. 9.

Cliquez sur OK. Placez le pointeur l'endroit o vous souhaitez placer votre bouton.

10. Pour insrer le bouton une taille par dfaut, cliquez une fois. - ou Pour dfinir la taille du bouton, tracez un rectangle de slection et relchez le bouton de la souris. Pour modifier un bouton :

Double-cliquez sur un bouton et modifiez-le comme dcrit ci-dessus.

Crer des boutons personnaliss


Si vous souhaitez modifier un modle de bouton (ou en crer un de toutes pices), vous pouvez utiliser le Studio de boutons, un environnement de conception intgr WebPlus et qui vous permet de vous consacrer la conception sans tre distrait par les autres objets de la page. En effet, le modle est ainsi isol.

Navigation et liens hypertextes

99

Le Studio de boutons vous permet de modifier l'apparence de votre bouton personnalis dans chacun de ses tats, c'est--dire Normalstate, Cliqu et Survol. Le Studio de boutons est quip d'un onglet Guides interactifs vous assistant dans la cration de votre bouton personnalis. Cet onglet contient de plus amples informations sur la modification des diffrents tats du bouton et sur l'utilisation des repres et des options d'tirement pour dterminer les lments conserver ou tirer. Pour crer un bouton personnalis : 1. (Facultatif) Dans la bote de dialogue Bouton, slectionnez un modle de bouton sur lequel baser votre nouveau bouton. Dans cette mme bote de dialogue, cliquez sur le bouton Modifier. Le Studio de boutons s'ouvre et la taille de votre bouton s'adapte votre espace de travail. l'tat Normal (voir l'onglet tats du bouton), utilisez les outils et onglets WebPlus standard pour personnaliser le modle de bouton votre gr. Sous l'onglet tats du bouton, en bas de votre espace de travail, rptez l'opration pour chaque tat (slectionnez Cliqu, Survol, Dsactiv, etc.) pour modifier chaque tat de votre bouton. Les options Menu droite et et Menu bas concernent uniquement les menus contextuels. 5. Cliquez sur Valider les modifications dans la barre d'outils principale pour quitter. Le bouton modifi est actualis son emplacement d'origine.

2.

3.

4.

100

Navigation et liens hypertextes

Comment diter mon texte ? Le Studio de boutons se concentre sur la conception de boutons plutt que sur l'attribution de lgendes. Pour modifier la lgende, double-cliquez sur le bouton sur la page, puis apportez vos changements l'aide de l'option Lgende du bouton de la bote de dialogue. Aprs avoir ajout votre bouton la page, vous pouvez toujours utiliser le Studio de boutons pour modifier tout moment son modle. Pour modifier un modle de bouton :

Slectionnez Modifier le modle de bouton dans la barre d'outils contextuelle.

Convertir en barre de navigation


Vous pouvez tout moment convertir votre bouton en barre de navigation (p. 81), lui appliquant les caractristiques inhrentes toute barre de navigation : elle prsentera la structure de votre site (ou une structure personnalise). Pour convertir un bouton en barre de navigation : 1. 2. Slectionnez le bouton. Dans la barre d'outils contextuelle, slectionnez Convertir en barre de navigation.

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 dclencher un vnement. L'vnement est gnralement un saut vers un lment qui peut tre :

Navigation et liens hypertextes

101

Page du site page Internet ; une fentre de composition d'un message lectronique ; un fichier sur le disque dur local ou sur le rseau ; une ancre (cible dsigne l'intrieur d'une page Web) ; un objet intelligent (plus spcifiquement un forum, un blog ou le SGC sur le serveur de ressources Web Serif) ; un flux RSS ou un podcast ; un panier d'achat ; un lment de navigation ; des donnes sur l'utilisateur ; un image.

Les liens hypertextes, lorsqu'ils sont appliqus mthodiquement, constituent un aspect essentiel de la structure d'un site. En effet, ils permettent aux visiteurs de naviguer sur votre site et compltent parfaitement les liens logiques entre ses diffrentes pages, savoir l'arborescence du site. (Mais ne sous-estimez pas le temps gagn grce l'utilisation de barres de navigation.) Vous pouvez grer l'ensemble des liens hypertextes et des ancres compris dans votre site par l'intermdiaire du Gestionnaire de site accessible par le biais de la barre d'outils contextuelle ou la barre d'tat.

102

Navigation et liens hypertextes

Pour ajouter un lien hypertexte : 1. l'aide de l'outil Pointeur, slectionnez l'objet ou le groupe d'objets ou mettez en surbrillance la plage de texte qui doit tre li par un lien hypertexte. Slectionnez Lien hypertexte dans la palette Liens hypertexte de la barre d'outils verticale. La bote de dialogue Liens hypertextes s'ouvre. 3. 4. Slectionnez le type de destination du lien, p. ex. une page de site, une page Internet, un objet intelligent, etc. Slectionnez les options spcifiques du type de lien dans le volet de droite afin de dfinir la cible du lien hypertexte. Toute une gamme de fentres ou de cadres peut tre choisie selon la manire dont vous souhaitez afficher la destination du lien. Selon les rsultats attendus, vous avez le choix entre les types suivants :

2.

5.

Mme fentre : la destination du lien apparat dans la fentre qui contenait le lien sur lequel vous avez cliqu. Nouvelle fentre : Une nouvelle fentre affiche la destination du lien. Ses proprits (dimensions, position et apparence) peuvent tre dfinies l'aide du bouton Paramtres (cochez tout d'abord la case Utiliser du code JavaScript pour la popup). La fentre initiale reste ouverte. Haut de la fentre courante: la destination du lien s'affiche dans la fentre de premier niveau. Destin aux liens crs l'intrieur d'un cadre sur une page (ou dans un cadre l'intrieur d'un cadre).

Navigation et liens hypertextes

103

Fentre parente : la destination du lien apparat dans le cadre parent ou la fentre parent du cadre qui contenait le lien sur lequel vous avez cliqu. Destin aux liens crs l'intrieur d'un cadre sur une page (ou dans un cadre l'intrieur d'un cadre). (Voir l'aide de WebPlus.) Fentre nomme : une fentre personnalise peut tre dfinie par la saisie d'un nouveau nom de fentre dans le menu droulant de droite. Ses proprits peuvent tre dfinies comme ci-dessus pour une nouvelle fentre. Vous pouvez galement utiliser une fentre nomme existante dans le mme menu droulant. Cadre du document : la destination du lien s'affiche dans un cadre dj cr ( l'aide de l'outil Cadre flottant). L'identifiant HTML (par exemple ifrm_1) de tout cadre existant se slectionne dans le menu droulant de droite. (Voir l'aide de WebPlus). Si la destination du lien est un cadre de document actif, slectionnez le cadre actif dans la liste droulante Ouvrir dans la fentre du document actif. Si le cadre souhait ne s'affiche pas dans la liste, vous devez l'activer : pour ce faire, doublecliquez sur le cadre et cochez la case Cadre du document actif.

Table lumineuse : la destination du lien s'affiche dans une table lumineuse contextuelle, superpose votre page Web. Cliquez sur Options de la table lumineuse si vous souhaitez ventuellement dfinir une lgende, modifier les dimensions de la table lumineuse, ou l'intgrer un diaporama. Voir Utiliser des tables lumineuses p. 122.

6.

Vous pouvez dfinir d'autres proprits, telles que le titre (texte dcrivant la destination du lien et s'affichant l'cran lorsque l'utilisateur place le pointeur de la souris sur le lien) et une touche de raccourci.

104

Navigation et liens hypertextes

7.

Utilisez la liste droulante Style pour choisir la mise en forme du texte du lien (si le texte est associ un lien hypertexte). Les couleurs pour Normal, Visit, Actif et Survol sont dfinies en fonction de divers critres de mise en forme disponibles dans la liste droulante. Cliquez sur OK.

8.

Pour modifier ou supprimer un lien hypertexte : 1. l'aide de l'outil Pointeur, slectionnez l'objet ou cliquez pour afficher un point d'insertion au sein du texte vers lequel le lien doit pointer. (Il n'est pas ncessaire de dplacer le lien hypertexte en dehors du texte.) Lien hypertexte dans la Cliquez sur le bouton palette Lien hypertexte de la barre d'outils verticale.

2.

La bote de dialogue Liens hypertextes apparat 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, slectionnez un nouveau type de destination, de cible et/ou de nouvelles options. Pour supprimer le lien hypertexte, cliquez sur le bouton Aucun lien hypertexte.

Pour afficher ou modifier un lien hypertexte existant :

Slectionnez Gestionnaire de site/Gestionnaire de liens hypertextes dans le menu Outils pour afficher, renommer ou supprimer un lien hypertexte.

Navigation et liens hypertextes

105

Insrer une ancre


Une ancre est un emplacement spcifique au sein d'une page, qui correspond la destination d'un lien hypertexte. Invisible pour le visiteur de la page Web, elle marque gnralement un point prcis au sein d'un texte (par exemple, le dbut d'une section) ou une image plus bas sur la page. Les ancres s'avrent particulirement utiles si le contenu de votre page est suffisamment long pour tre divis en diffrentes sections mais pas suffisamment pour tre rparti sur des pages spares. Ainsi, le lecteur peut accder directement au contenu associ sans quitter la page consulte. De mme, permettre aux visiteurs de rester sur une mme page vite le risque de les "perdre" pendant la consultation des informations sur votre site. Pour insrer une ancre : 1. l'aide de l'outil Pointeur, slectionnez l'objet cible ou cliquez pour afficher un point d'insertion l'intrieur du texte cible. 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. 3. 4. Dans la bote de dialogue qui s'affiche, attribuez un nom l'ancre, puis cliquez sur OK. (Facultatif) Activez l'option Inclure l'ancre dans la navigation pour faire en sorte que l'ancre (gnralement l'objet slectionn) soit accessible par le biais d'une barre de navigation, et non par le biais d'un lien hypertexte. Vous devez au pralable activer l'option Inclure les ancres au niveau de votre barre de navigation. Dfinissez l'intitul de l'ancre.

2.

106

Navigation et liens hypertextes

Cochez Avant et/ou Aprs pour appliquer des lignes horizontales au-dessus/en dessous de l'ancre en tant qu'lment de sous-menu dans les barres de navigation. Ajoutez une Description pour ajouter du texte relatif la page sur l'lment de sous-menu de la barre.

5.

Cliquez sur OK.

Pour voir ou diter des ancres existants :

Slectionnez Gestionnaire de site/Gestionnaire des ancres dans le menu Outils pour afficher, renommer ou supprimer une ancre associe un objet spcifique. Vous pouvez galement inclure une ancre dans la navigation.

Ajouter des objets Web

108

Ajouter des objets Web

Ajouter des objets Web

109

Ajouter un champ de recherche


WebPlus utilise une fonction de recherche puissante qui recherche les critres saisis par l'utilisateur dans le texte qui apparat sur votre site dans le texte artistique, les zones de texte ou les tableaux. Cela facilite l'extraction du contenu des pages Web hberges. La fonction de recherche utilise l'outil Champ de recherche et l'outil Rsultats de la recherche, tous deux hbergs dans la palette Recherche de la barre d'outils Objets Web. Chaque outil est utilis pour crer des objets qui fonctionnent ensemble. Rsultats de la recherche : cre une fentre dans laquelle les rsultats de la recherche sont affichs. En gnral, la fentre est place et dimensionne 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 recherchs. Ce champ est gnralement ajout une maquette et apparat sur toutes les pages du site.

110

Ajouter des objets Web

Par exemple, le mot "Nulla" qui est recherch ci-dessus pourrait donner des rsultats prsentant les pages Web qui contiennent le mot recherch. L'utilisateur clique sur le bouton Rechercher pour lancer la recherche.

Les rsultats de la recherche prsentent le titre d'une page constituant un lien hypertexte ainsi que le texte de la page Web associe pour rfrence. Il suffit de cliquer sur le lien hypertexte pour accder la page Web. Pour ajouter les Rsultats de la recherche : 1. Rsultats de la recherche dans Cliquez sur l'outil la palette Recherche de la barre d'outils Objets Web. l'emplacement voulu, puis Placez le pointeur cliquez et faites glisser pour mettre en place la fentre des rsultats de la recherche.

2.

Pour ajouter l'objet Champ de recherche : 1. Champ de recherche dans la Cliquez sur l'outil palette Recherche de la barre d'outils Objets Web. 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 apparat alors sur la page.

2.

Ajouter des objets Web

111

Placez l'objet Champ de recherche dans la partie suprieure de la maquette afin que la fonction de recherche puisse s'appliquer la totalit du site. La recherche sur le site ne prsente aucun intrt sans un moyen quelconque pour prsenter les rsultats de la recherche l'utilisateur. Cela s'effectue en utilisant l'objet Rsultats 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 gnralement redimensionn pour occuper la totalit de la page avant sa mise en place (il doit afficher toutes les pages Web trouves les unes la suite des autres). Conservez les rsultats de la recherche sur une (nouvelle) page spare qui peut aussi avoir une apparence bien distincte (double-cliquez sur l'objet pour modifier la prsentation de la page).

Utiliser la Galerie

112

Ajouter des objets Web

L'onglet Galerie propose un riche contenu cratif, conu par des professionnels et qui donnera un aspect moderne votre site Web ! Une large palette de catgories est disponible :

Cadres photo Badges et autocollants Boutons E-Commerce Drapeaux Bannires Flash Icnes et jeux d'icnes Remarques Symboles

L'onglet sert galement stocker tous les objets personnels que vous souhaitez rutiliser sur le mme site Web ou sur d'autres sites. Lorsque vous avez copi un lment dans votre Galerie, il est disponible sur tous les sites : il suffit d'ouvrir la Galerie ! La Galerie (ci-dessus) est compos de deux parties : une liste droulante Catgories, en haut, et la fentre Modles, en bas, qui contient une liste de miniatures reprsentant les lments de la catgorie slectionne. Pour afficher votre galerie : 1. 2. Cliquez sur l'onglet Galerie du Studio. Slectionnez une catgorie dans le menu droulant. Les lments de la premire sous-catgorie rpertorie s'affichent par dfaut.

Ajouter des objets Web

113

Pour utiliser un lment de la Galerie :

Cliquez sur sa miniature dans la catgorie de modles et faites-la glisser sur la page. La Galerie conserve une copie de l'lment tant que vous ne le supprimez pas. Certains lements de la Galerie sont modifiables et peuvent donc servir de point de dpart vos crations.

Stocker vos modles personnels


L'onglet Galerie vous permet galement de stocker vos propres modles personnaliss dans la section Mes modles. Ils deviennent disponibles pour n'importe quel site WebPlus.

la premire installation de WebPlus, la galerie Mes modles est vide. Vous pouvez lui ajouter des modles personnaliss. Pour dplacer ou copier un objet dans la catgorie Mes modles : 1. 2. Slectionnez la catgorie Mes modles dans la liste droulante Catgories. Faites glisser l'objet de la page vers la fentre Modles.

114

Ajouter des objets Web

3.

Dans la bote de dialogue, attribuez un nom au modle et slectionnez OK. Une miniature reprsentant l'objet apparat dans la fentre Modles. Pour copier votre modle plutt que de le dplacer, appuyez sur la touche Ctrl avant de faire glisser le pointeur.

Pour renommer ou supprimer un modle :

Slectionnez une miniature de modle, cliquez sur le bouton qui s'affiche dans le coin infrieur droit lorsque vous survolez la miniature avec la souris et effectuez une slection dans le menu.

Pour organiser vos modles en catgories, vous pouvez ajouter des sous-catgories Mes modles ou crer une catgorie personnalise la place de Mes modles. Une fois cres, vos catgories et sous-catgories peuvent tre supprimes ou renommes. Pour ajouter, supprimer ou renommer des souscatgories personnalises :

Pour ajouter une sous-catgorie, slectionnez une catgorie et cliquez sur Ajouter une sous-catgorie... dans le bouton Menu de l'onglet de l'onglet. Pour supprimer ou renommer une sous-catgorie, slectionnez une option dans le menu droulant de la barre de titre de la sous-catgorie.

En cas d'ajout d'une sous-catgorie, vous devez la nommer dans une bote de dialogue. Pour un renommage ou une suppression, slectionnez la sous-catgorie avant de slectionner l'option.

Ajouter des objets Web

115

Pour ajouter, supprimer ou renommer des catgories personnalises : 1. L'onglet Galerie tant slectionn, cliquez sur le bouton de menu de l'onglet et slectionnez Ajouter une catgorie, Supprimer la catgorie ou Renommer la catgorie dans le menu droulant. La bote de dialogue vous permet de saisir et/ou confirmer la modification. Tous les modles contenus dans une catgorie supprime sont aussi supprims.

2.

Ajouter une carte Google


Utilisez les cartes Google intgres votre page Web pour vrifier qu'un client trouvera votre sige, que des participants d'une runion ou d'un vnement trouveront la salle, ou pour identifier des centres d'intrt. En les intgrant une page Web "Coordonnes" spcialement conue cet effet, vous pourrez ajouter votre site une carte accompagne d'indications.

116

Ajouter des objets Web

Chaque carte pourra contenir des marqueurs afin d'identifier chaque emplacement. Chaque marqueur peut appeler les lments suivants lorsque vous cliquez dessus :

une bulle proposant du texte brut (p. ex., une adresse postale et/ou Web), une bulle proposant du texte avec mise en forme HTML, une fentre StreetView.

Pour ajouter une carte Google : 1. 2. Insrer une carte Google dans Cliquez sur le bouton la palette Mdia de la barre d'outils Objets Web. Dans la bote de dialogue Carte Google, entrez votre code postal ou votre adresse dans le champ Rechercher un lieu, puis cliquez sur Rechercher. WebPlus utilise le golocalisateur de Google pour dtecter votre localit et afficher les adresses locales. Naviguez sur la carte l'aide des contrles de dplacement et de zoom vous pouvez vous dplacer sur la carte l'aide du pointeur en forme de main. Utilisez le curseur de zoom et les boutons pour agrandir ou rduire la carte. Si vous utilisez une souris molette, vrifiez que l'option Activer le zoom avec la molette est active pour obtenir un contrle optimal du zoom. (Facultatif) Dans la liste droulante Contrle de navigation, slectionnez Complet (dplacement, boutons de zoom, et curseur de zoom), Compact (boutons de zoom uniquement), ou Aucun (pour masquer toutes les commandes de navigation). (Facultatif) Dans la liste droulante Contrle de type de carte, slectionnez Barre (options Carte et Satellite en vis-vis), Menu droulant (modes Carte, Satellite et Terrain), ou Aucun (pour masquer les commandes de type de carte).

3.

4.

5.

Ajouter des objets Web

117

6. 7.

Cliquez sur OK. Le pointeur de la souris se transforme en curseur d'insertion. Les oprations suivantes vous permettent de dterminer la taille et l'emplacement de dpart de la carte. Pour insrer la carte une taille par dfaut, cliquez une fois. - ou Pour adapter la taille de la carte la conception de votre page, cliquez et dplacez la souris pour dfinir une zone, puis relchez le bouton de la souris. L'icne Vue de la rue peut tre dplace sur votre carte pour afficher l'emplacement slectionn en mode Vue de la rue. Cliquez sur pour quitter la fentre Vue de la rue. Si vous ne voulez pas que cette fonctionnalit soit accessible aux internautes, dcochez Afficher le contrle de la rue dans la bote de dialogue.

Ajouter des marqueurs

Vous pouvez ajouter un nombre illimit de marqueurs rouges votre carte Google. Chaque marqueur peut afficher des informations complmentaire au survol et au clic. Pour ajouter un marqueur : 1. Dans la bote de dialogue Carte Google, cliquez sur Ajouter.

118

Ajouter des objets Web

2. 3.

Placez le pointeur cliquez.

sur l'emplacement souhait, puis

Dans la bote de dialogue Marqueur Google Map, attribuez un nom au marqueur. Cette "astuce" s'affiche au survol et peut tre un nom de socit ou de site. Affectez une action de clic au marqueur, c'est--dire l'lment qui s'affiche aprs un clic sur le bouton. Slectionnez l'une des options suivantes :

4.

tiquette par dfaut : le texte est saisi dans le champ tiquette. Aprs publication, un clic affiche du texte brut dans une bulle. Considrer l'tiquette comme un script : le texte est saisi avec des balises HTML dans le champ tiquette. Aprs publication, un clic affiche une bulle avec mise en forme HTML. Vue de la rue : Aprs publication, une fentre agrandie Vue de la rue s'affiche au-dessus de votre carte. Cliquez sur pour quitter la fentre Vue de la rue.

5.

Cliquez sur OK. Le marqueur apparat en vert dans l'aperu de la carte (pour indiquer la slection active). Recommencez cette procdure pour chaque marqueur.

Vous pouvez modifier, localiser, dplacer ou supprimer un marqueur sur votre carte Google. Pour modifier les marqueurs de votre carte Google :

Double-cliquez sur la carte Google. Dans la bote de dialogue, slectionnez un marqueur dans la liste droulante Marqueurs de carte, puis :

Ajouter des objets Web

119

Pour modifier l'tiquette d'un marqueur, cliquez sur Modifier et ditez le texte dans la zone droulante tiquette. Pour dplacer le marqueur, cliquez sur Dplacer, puis replacez le pointeur sur la carte. Pour supprimer le marqueur, cliquez sur Supprimer.

Pour enregistrer votre paramtre Vue de la rue : 1. Aprs avoir rgl l'action de clic sur le mode Vue de la rue, utilisez les commandes de panoramique et de zoom pour dfinir l'affichage ; vous dfinissez ainsi la direction (Cap), l'angle (Pas), l'agrandissement (Zoom). Cliquez sur Enregistrer la vue.

2.

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 publicits correspondant au type de contenu de votre site le visiteur bnficie d'un accs facile des produits adapts pendant que vous, en tant que dveloppeur Web, gagnez de l'argent pour compenser le cot d'hbergement ou devenez rapidement riche ! Pour faire de la publicit, les dveloppeurs Web doivent disposer d'un compte Google Adsense certifi (www.google.com/adsense) grce auquel ils pourront choisir le type et le format de la publicit afficher (on parle d'unit). Vous pouvez copier pour chaque unit un morceau de code gnr par le site Web Google Adsense puis le coller dans la bote de dialogue de publicit Google Adsense de WebPlus. Les types de publicit sont les suivants : publicit simple, image, lien et vido. Les formats de publicit diffrent selon le type

120

Ajouter des objets Web

d'unit. Parmi ces formats : Leaderboard (728 x 90 pixels), Bannire (468 x 60), Demi-bandeau (234 x 60), Bouton (125 x 125), de diverses tailles Gratte-ciel, carrs et rectangulaires. Google Adsense propose galement des rapports d'utilisation complets, une gestion des comptes, un filtrage, ainsi que des ressources. Pour plus d'informations, rendez-vous sur www.google.com/adsense. 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 utilise, et devront accepter les termes et conditions de Google. Lors de l'enregistrement, vous devrez attendre que Google valide votre site Web. La rponse de Google vous sera fournie par e-mail. Si elle est positive, vous pouvez crer et grer les publicits. La procdure d'enregistrement analysera votre site Web et proposera des publicits adaptes au contenu de votre site Web.

Pour crer et grer les publicits : 1. 2. Connectez-vous Google Adsense. Dans Adsense Setup, slectionnez Adsense for Content, puis suivez l'assistant pour slectionner une unit, son format, son style d'angle, et un canal de suivi.

Ajouter des objets Web

121

3.

Copiez le morceau de code Adsense gnr, fourni pour l'unit. Vous en aurez besoin pour le coller dans WebPlus.

Pour insrer des publicits sur votre page Web : 1. Slectionnez la page Web (ou la maquette) sur laquelle vous souhaitez placer votre publicit. Insrer une publicit Google Cliquez sur le bouton Adsense dans la palette E-Commerce de la barre d'outils Objets Web. Pour coller le morceau de code pralablement copi pour l'unit, cliquez sur Coller. Le morceau apparat dans votre bote de dialogue et ne peut tre modifi. Cliquez sur OK. Le pointeur de la souris se transforme en curseur d'insertion. Placez le pointeur l'endroit o vous voulez insrer la publicit, puis cliquez pour insrer la publicit sa taille d'origine. La publicit ne peut tre redimensionne.

2.

3.

4. 5.

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. Double-cliquez sur la publicit. Pour coller le morceau de code dans le champ de texte, cliquez sur Coller. Cliquez sur OK.

2. 3. 4.

122

Ajouter des objets Web

Utiliser des tables lumineuses


Les tables lumineuses constituent un moyen simple d'afficher un agrandissement des miniatures que vous ajoutez votre page Web. Si vous avez utilis la fonction Galerie photos, ce concept vous est dj familier. Les tables lumineuses prsentent l'norme avantage de pouvoir afficher sur demande des images agrandies et de se superposer votre page Web au terme d'une animation.

WebPlus propose aussi une fonction de diaporama (p. 123) pour prsenter les images prsentes sur la mme page Web. Pour crer une table lumineuse pour une image de votre page Web : 1. 2. Slectionnez une image (de prfrence une miniature). Crez un lien hypertexte pointant vers l'image (commande Insertion/Lien hypertexte ou menu contextuel, voir p. 100). Slectionnez Image dans le menu, puis choisissez une fentre cible dans la liste droulante Type. (Facultatif) Cliquez sur Options de la table lumineuse pour ajouter une lgende l'image dans la table lumineuse, l'aide du champ prvu cet effet. Cliquez sur OK.

3. 4.

5.

Ajouter des objets Web

123

Pour limiter la taille d'affichage de cette image associe, WebPlus rduit la taille des images trop grandes en leur appliquant une rsolution maximale (800 x 660 pixels, par dfaut) tout en conservant toujours leurs proportions. Les images dont les dimensions natives sont infrieures ces dimensions maximales restent inchanges. La largeur et la hauteur maximales peuvent tre modifies. (Voir Dfinir les proprits du site p. 38). Pour crer une table lumineuse pour une image locale :

Comme ci-dessus, mais cliquez sur l'option Fichier au lieu d'Image.

Vous pourrez intgrer ou associer l'image. Dans tous les cas, l'image s'affiche toujours dans ses dimensions natives.

Diaporamas de table lumineuse


Vous pouvez crer des diaporamas de table lumineuse simples, bass sur les images prsentes sur une mme page Web. La table lumineuse elle-mme affichera des commandes de navigation pour votre diaporama. Pour crer un diaporama de table lumineuse : 1. 2. 3. Crez une table lumineuse pour une image de votre page Web (voir ci-dessus). Dans la bote de dialogue Liens hypertextes, cliquez sur Options de la table lumineuse. Dans la bote de dialogue Options de la table lumineuse, attribuez un nom dans la liste droulante Diaporama. Ce nom sera appliqu aux autres images ajoutes ce diaporama. Cliquez sur OK. Rptez l'opration pour l'image suivante sur la mme page. Le nom de diaporama dfini sera attribu aux autres images. Slectionnez le nom de diaporama inclure.

4.

124

Ajouter des objets Web

5. 6.

(Facultatif) Ajoutez un texte de lgende. Cliquez sur OK. Les diaporamas de table lumineuse ne s'appliquent qu'aux images d'une mme page. Si vous ajoutez un diaporama des images provenant de diffrentes pages, un nouveau diaporama sera cr pour chaque page.

Tables lumineuses pour toute cible de lien hypertexte


Les tables lumineuses ne se limitent pas l'affichage d'images. Comme il s'agit d'un type de fentre, elles peuvent contenir toute cible de lien hypertexte, gnralement une page de votre site (p. ex. un formulaire ou une page de connexion), une page Internet, un blog, un forum, ou un flux RSS. Vous pouvez aussi afficher dans votre table lumineuse le contenu d'un fichier Word, d'un PDF, ou de tout autre type de fichier (via l'option Fichier). Pour crer une table lumineuse pour toute cible de lien hypertexte : 1. 2. Slectionnez un objet (image, bouton, ou tout autre objet). Crez un lien hypertexte pointant vers l'image (commande Insertion/Lien hypertexte ou menu contextuel). Vrifiez que la fentre cible de la liste droulante Type est dfinie sur Table lumineuse. (Facultatif) Cliquez sur Options de la table lumineuse pour dfinir la largeur et la hauteur de la table lumineuse.

3. 4.

Ajouter des objets Web

125

Dfinir les proprits globales d'une table lumineuse


Comme pour la plupart des paramtres de WebPlus, vous pouvez personnaliser les proprits de table lumineuse du site courant. Vous pouvez rgler les paramtres gnraux de la table lumineuse (y compris le type de bordure), la lgende (police, taille, couleur, opacit), et l'arrire-plan (couleur et opacit). Pour modifier les proprits de table lumineuse de votre site : 1. 2. 3. Dans Fichier/Proprits du site, slectionnez l'option de menu Table lumineuse. Modifiez les paramtres des sections Gnral, Lgende et Arrire-plan. (Facultatif) Le bouton Aperu de la table lumineuse vous permet d'afficher un aperu et d'ajuster les paramtres.

Tables lumineuses de galeries photos


Vous pouvez crer des galeries photos de style table lumineuse vous utilisez une galerie photos JavaScript ; chaque table lumineuse est accompagn d'un style de galerie spcifique.

Si vous choisissez ce style, vous pouvez configurer les paramtres de table lumineuse qui remplaceront les proprits globales du site.

126

Ajouter des objets Web

Insrer des panneaux


Les panneaux sont des champs d'information rectangulaires superposs votre page Web. Ils hbergent des informations textuelles et/ou graphiques. La superposition de panneaux permet d'augmenter le volume d'informations disponibles pour l'internaute sans modifier le contenu de la page Web sous-jacente. Vous pouvez dfinir des panneaux n'apparaissant que lorsque vous survolez ou cliquez sur des boutons, des objets de galerie, ou des images donnes. Les panneaux peuvent galement s'afficher en permanence, ce qui est idal pour obtenir des barres de navigation ne disparaissant pas lors du dfilement de la fentre ! Les panneaux sont polyvalents et peuvent tre utiliss pour prsenter :

des vnements, des informations de vente, des formulaires PayPal Acheter maintenant, des trucs et astuces, des informations d'accs rapide, telles que coordonnes et raccourcis clavier, une navigation "permanente" (convertie partir d'une barre de navigation p. 93), une loupe.

Pour vous assister dans la cration de panneaux professionnels, WebPlus propose une impressionnante slection d'arrire-plans modernes pouvant servir de base votre panneau. Vous pouvez aussi personnaliser un modle d'arrire-plan ou crer un arrireplan de panneau de toutes pices partir du Studio de modles de WebPlus (p. 130).

Ajouter des objets Web

127

Insrer votre panneau


Pour insrer un panneau : 1. 2. Dans la palette Navigation de la barre d'outils Objets Web, cliquez sur Insrer un panneau. (Facultatif) Dans cette bote de dialogue, dfinissez l'identifiant HTML du panneau. Cet identifiant sera toujours unique. Dans la bote de dialogue, cliquez sur l'aperu du panneau. Slectionnez un type de panneau prdfini dans la palette. L'aperu s'actualise pour afficher le modle de panneau choisi. (Facultatif) Rglez la glissire Transparence pour dfinir la transparence du panneau sur son arrire-plan. Vous devrez afficher l'aperu de votre page pour consulter vos modifications. Cochez Aligner le panneau avec la fentre du navigateur pour que votre panneau reste visible et ancr une position dfinie lorsque l'internaute fait dfiler la page Web. Dfinissez un alignement horizontal et vertical pour contrler la position du panneau. (Facultatif) Cochez Le panneau est masqu initialement pour masquer le panneau la fermeture de la bote de dialogue. Dans un premier temps, vous pouvez laisser cette option dcoche pour pouvoir paramtrer votre panneau. Cliquez sur OK. Positionnez le pointeur l'endroit o vous souhaitez placer l'angle suprieur gauche de votre panneau.

3. 4.

5.

6.

7.

8. 9.

128

Ajouter des objets Web

10. Pour insrer le panneau une taille par dfaut, cliquez une fois. - ou Pour dfinir la taille du panneau, tracez un rectangle de slection et relchez le bouton de la souris. Comme tout objet dans WebPlus, les panneaux peuvent tre dplacs et redimensionns. Pour modifier un panneau :

Double-cliquez sur le panneau et modifiez-le comme dcrit ci-dessus.

Ajouter du contenu votre panneau


Considrez votre panneau comme un bloc constitutif vide pouvant tre dvelopp l'aide des outils et fonctionnalits standard de WebPlus. Lorsque vous crez les objets suivants dans le panneau, ils appartiennent ce dernier : zones de texte, texte artistique, tableaux, Formes pleines et images. Lorsque vous dplacez le panneau, les objets associs l'accompagnent.

Afficher/masquer votre panneau


Quelle raison auriez-vous de vouloir masquer votre panneau aprs l'avoir conu ? L'intrt des panneaux rside dans le fait qu'ils peuvent tre masqus et affichs lorsque le pointeur survole ou clique sur un objet de la page. Cela signifie que les boutons, les images et les objets de galerie peuvent afficher des informations plus dtailles seulement lorsque cela est ncessaire. Pour cela, vous devez "donner vie" l'objet, c'est-dire lui associer une action dclencher en rponse au survol ou au clic.

Ajouter des objets Web

129

Commencez par affecter l'objet une action ainsi qu'un panneau existant. Pour affecter une action et un panneau : 1. 2. 3. Effectuez un clic droit sur l'objet et slectionnez Actions. Dans la bote de dialogue qui s'affiche, cliquez sur Ajouter et slectionnez Visibilit dans la palette. Slectionnez le panneau dans la liste droulante ID panneau, puis un vnement dans la liste droulante vnment. L'vnement dsigne l'action qui se dclenche lorsque vous cliquez sur l'objet ou le survolez. (Facultatif) Une animation Fondu du panneau est applique par dfaut, avec vitesse de fondu paramtrable, mais vous pouvez dsactiver l'effet d'animation en dcochant la case Fondu. Cliquez sur OK.

4.

5.

Une fois conu, le panneau sera masqu par un simple clic. Pour masquer un panneau slectionn :

Dans la barre d'outils contextuelle, slectionnez Masquer le panneau.

Le panneau est remplac par une icne Panneau masqu. Le panneau reste prsent et peut tre affich en cliquant sur le bouton Masquer le panneau (pour le dsactiver). L'option Masquer le panneau est similaire l'option Le panneau est masqu initialement de la bote de dialogue. Aprs la publication de votre page, le panneau s'affichera au survol de l'objet.

130

Ajouter des objets Web

Crer des arrire-plans de panneau personnaliss


Si vous souhaitez modifier un modle d'arrire-plan (ou en crer un de toutes pices), vous pouvez utiliser le Studio de modles, un environnement de conception similaire au Studio de boutons et qui vous permet de vous consacrer la conception d'arrire-plans sans tre distrait par les autres objets de la page. En effet, le logo est ainsi isol et centr sur la page.

Pour crer un arrire-plan personnalis : 1. (Facultatif) Dans la bote de dialogue Proprits du panneau, slectionnez un modle sur lequel baser votre nouvel arrire-plan. Dans cette mme bote de dialogue, cliquez sur le bouton Modifier. Le Studio de modles s'ouvre et la taille de votre arrire-plan s'adapte votre espace de travail.

2.

Ajouter des objets Web

131

3.

l'aide des outils et onglets standard de WebPlus, personnalisez vos arrire-plans votre gr. L'onglet Guides interactifs vous permet de concevoir votre arrire-plan de faon interactive. Cliquez sur Valider les modifications dans la barre d'outils principale pour quitter. L'arrire-plan modifi est actualis son emplacement d'origine. Le Studio de modles vous permet d'empcher de faon slective la mise l'chelle ou l'tirement des objets du panneau ; les palettes chelle horizontale et chelle verticale de la barre d'outils du Studio offrent un contrle absolu des objets. Reportez-vous l'onglet Guides interactifs pour plus d'informations.

4.

Insrer des sparateurs


Au lieu de crer des sparateurs lors de la conception de votre barre de navigation personnalise, vous pouvez dfinir des sparateurs indpendants des barres de navigation. Ces sparateurs autonomes sont principalement utiliss entre les boutons de panneaux prcdemment convertis partir d'une barre de navigation. Pour insrer un sparateur : 1. 2. 3. 4. Dans la palette Navigation de la barre d'outils Objets Web, cliquez sur Insrer un sparateur. Dans la bote de dialogue, cliquez sur l'chiquier pour afficher un groupe de palettes de modles. Slectionnez un sparateur prdfini. Cliquez sur OK.

132

Ajouter des objets Web

Pour crer un sparateur personnalis : 1. 2. Dans la bote de dialogue prcdente, cliquez sur Modifier. Dans le Studio de modles (voir ci-dessus), utilisez les outils et onglets standard de WebPlus pour personnaliser votre sparateur votre gr. L'onglet Guides interactifs vous permet de concevoir votre sparateur de faon interactive.

Ajouter des zones dynamiques


Une zone dynamique est un lien hypertexte transparent sur une page Web. Gnralement places au-dessus des images, les zones dynamiques agissent comme des boutons actifs lorsque l'on clique dessus dans un navigateur Web. Elles sont tout particulirement utiles si vous souhaitez que le visiteur puisse cliquer sur diffrentes zones d'une image. Vous pour dessiner et modifier des zones dynamiques manuellement ou les crer afin de les ajuster une forme ou une zone existante. Pour dessiner une zone dynamique : 1. 2. Insrer une zone dynamique Cliquez sur le bouton dans la barre d'outils Objets Web. Cliquez et faites glisser le curseur pour tracer une zone dynamique rectangulaire. La bote de dialogue Liens hypertextes apparat. Slectionnez le type de destination du lien, puis saisissez la cible du lien hypertexte (reportez-vous Slectionner une cible de lien hypertexte p. 100).

3.

Ajouter des objets Web

133

4.

Cliquez sur OK. Une zone dynamique apparat sur la page.

Pour ajuster une zone dynamique en fonction d'une forme existante : 1. Dessinez la zone dynamique comme dcrit ci-dessus, puis crez la forme, comme dcrit dans la rubrique Tracer et modifier des formes p. 364.

2.

Ensuite, slectionnez les deux objets et choisisse Ajuster la zone dynamique la forme dans le menu Outils. La zone dynamique est adapte au contour de la forme. la publication, seule la forme rpond un survol du pointeur.

La zone dynamique et la forme demeurent spares. Vous pouvez donc aisment supprimer la forme si vous n'en avez plus besoins aprs l'avoir utilise comme modle pour gnrer une zone dynamique dans la forme de votre choix.

134

Ajouter des objets Web

Pour modifier le lien hypertexte d'une zone dynamique :

l'aide de l'outil Pointeur, double-cliquez sur la zone dynamique.

La bote de dialogue Liens hypertextes apparat et affiche la cible du lien de la zone dynamique active.

Pour modifier le lien hypertexte, slectionnez un nouveau type de destination et/ou une nouvelle cible. Pour supprimer le lien, rglez sa destination sur Aucun lien hypertexte.

Modifier des zones dynamiques


Tout comme les autres objets, vous pouvez dplacer et redimensionner les zones dynamiques sur la page. Une zone dynamique slectionne comporte la fois une zone de dlimitation extrieure et un contour intrieur, dont les objectifs sont diffrents.

Ajouter des objets Web

135

Pour dplacer ou redimensionner une zone dynamique :

Cliquez pour slectionner la zone dynamique, puis :

Pour la dplacer, cliquez et faites glisser le pointeur partir du centre ou partir de la zone de dlimitation de la zone dynamique. Pour figer le dplacement de la zone dynamique sur un axe vertical ou horizontal, maintenez la touche Maj enfonce en faisant glisser le curseur. Pour la redimensionner, cliquez et faites glisser ses poignes extrieures (rectangle de dlimitation).

En modifiant le contour intrieur, vous pouvez convertir les zones dynamiques rectangulaires en formes libres de faon ce qu'elles correspondent le plus possible la forme des images que vous souhaitez dfinir comme zone dynamique. Pour modifier le contour, dplacez tout d'abord le pointeur de la souris sur le contour intrieur de la zone dynamique jusqu' ce que le curseur change de forme pour indiquer que vous survolez un nud ou une ligne.

136

Ajouter des objets Web

Pour crer un nouveau nud dans une zone dynamique :

Cliquez un endroit quelconque sur le contour de la zone dynamique lorsque le curseur apparat. Positionnez le nouveau nud pour modifier le contour de la zone dynamique.

Pour modifier la forme du contour d'une zone dynamique :

Cliquez et faites glisser un nud lorsque le pointeur apparat.

Ajouter des images survoles


L'expression "image survole" fait rfrence une interaction entre la souris et une image. Ainsi, vous pouvez survoler une image avec la souris et constater que celle-ci se transforme en une image diffrente (ci-dessous). Toute image dont l'apparence change en rponse une action de la souris est appele une image survole. Une action de souris peut par exemple tre un clic ou un survol de la souris ; l'tat de l'image change en rponse l'action de la souris, affichant une autre variante de l'image d'origine. Vous pouvez importer directement des lments survols dans DrawPlus, de Serif. (Reportez-vous l'aide de WebPlus pour plus d'informations.)

Ajouter des objets Web

137

Options des images survoles


L'ajout d'images survoles repose fondamentalement sur le choix de l'tat ou des tats que vous souhaitez dfinir et sur la spcification d'une variante d'image pour chaque tat choisi. WebPlus propose plusieurs options :

Normal correspond l'tat standard de l'image, c'est-dire l'tat de l'image lorsqu'elle n'est pas survole.

Survol est l'tat dclench 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 dclench par un clic sur l'image, tout en maintenant le bouton enfonc.

L'tat Cliqu survol (non illustr) concerne un survol de la souris sur une image l'tat "Cliqu", c'est--dire aprs un clic sur l'objet. Vous pouvez galement spcifier un vnement avec lien hypertexte, par exemple un renvoi vers une page Web cible, dclench lorsque l'utilisateur relche le bouton de la souris lorsque l'tat Cliqu est actif. Il vous est mme possible de regrouper des boutons sur une page afin qu'ils fonctionnent conjointement et qu'un seul bouton puisse tre actionn la fois.

138

Ajouter des objets Web

Pour crer une image survole : 1. Dans un programme d'dition graphique, crez les images source pour chaque tat de survolement que vous allez dfinir. (Voir "Crer des variantes d'images" cidessous.) Insrer une image survole dans la Cliquez sur palette Image de la barre d'outils Objets standard. Indiquez les tats d'image survole (voir ci-dessus) activer pour chaque image en cochant les cases concernes dans la bote de dialogue Image survole. Pour chaque tat, utilisez le bouton Parcourir pour rechercher l'image source correspondante et spcifiez les Options d'exportation de cette image (reportez-vous Dfinir les options d'exportation des images p. 317). Activez l'option Intgrer les fichiers au site si vous souhaitez intgrer les images au site. Cochez l'option Normal ou Cliqu pour dfinir l'tat initial de l'image survole du bouton. (Facultatif) Cliquez sur Dfinir... pour dfinir la cible du lien hypertexte du bouton. Cochez l'option Bouton radio si vous souhaitez associer tous les boutons (sur une page donne) pour lesquels cette option est active de telle sorte qu'un seul du groupe puisse tre activ la fois. Cliquez sur OK.

2. 3.

4. 5. 6. 7.

8.

WebPlus affiche l'image correspondant l'tat Normal. Il s'agit de la mthode idale pour prvisualiser la page, tester chaque image survole, puis revenir WebPlus et effectuer les modifications ventuelles. Lorsque vous prvisualisez ou publiez le site, WebPlus se charge de l'exportation d'un fichier image pour chaque tat de l'image survole et le fichier .html de la page publie comprend le code JavaScript destin capturer l'vnement d'image survole.

Ajouter des objets Web

139

Pour modifier une image survole : 1. Effectuez un clic droit (ou double-cliquez) sur l'image survole et slectionnez la commande Modifier l'image survole.... Effectuez de nouvelles slections si ncessaire et cliquez sur OK.

2.

Crer des variantes d'images


Pour chaque objet comportant au moins un tat d'image survole activ, vous devez fournir une image source. Cela constitue la diffrence 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.

Ajouter des images survoles (popups)


La fonction Image survole (popup) de WebPlus est le plus souvent utilise pour crer une miniature dont la version grand format apparat l'cran lorsque le pointeur de la souris de l'internaute la survole. L'image grand format s'affiche gnralement ct de la miniature originale. Cette fonction est simple utiliser et repose sur le mme principe qu'une autre fonction plus avance, la fonction Galerie photos. Les images survoles 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 diffrentes de taille identique.

140

Ajouter des objets Web

WebPlus vous permet de dfinir 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. Si vous dcidez d'ajouter une lgende une image survole, celleci apparat l'cran ct de l'image l'tat Survol. Vous pouvez modifier la police, la taille et la couleur du texte de la lgende, et lui appliquer d'autres attributs de mise en forme (gras et italique). Pour crer une image survole (Popup) : 1. 2. Image survole de la palette Cliquez sur le bouton Image, dans la barre d'outils Objets standard. Dans la bote de dialogue qui s'affiche, commencez par slectionner l'image l'tat Normal. Pour ce faire, cliquez sur le bouton Parcourir, recherchez l'image, slectionnez-la, puis cliquez sur Ouvrir. L'image que vous avez slectionne pour l'tat Normal est utilise par dfaut comme image l'tat Survol (ce qui convient pour la cration d'albums photos). Toutefois, vous pouvez cliquer sur Parcourir et slectionner une autre image.

3.

Ajouter des objets Web

141

4.

(Facultatif) Pour appliquer un lien hypertexte l'image l'tat Normal, cliquez sur le bouton Dfinir et entrez une URL. L'utilisateur accdera directement la page dfinie comme destination du lien hypertexte lorsqu'il cliquera sur l'image. (Facultatif) Cliquez sur Options d'exportation pour dfinir les options d'exportation des images (reportezvous Dfinir les options d'exportation des images p. 317). (Facultatif) Activez l'option Intgrer les images au site si vous souhaitez intgrer les images au site.

5.

6.

Toutefois, pour que votre image survole donne les rsultats escompts, vous devez positionner l'image l'tat Normal et celle l'tat Survol sur la page. Vous utiliserez pour cela une bote de dialogue ddie dans laquelle vous pourrez dplacer ou redimensionner chacune des images, soit par glisser-dplacer, soit en dfinissant des valeurs absolues en pixels. Dans cette bote de dialogue, chacune des images se voit appliquer une bordure de couleur vert pour l'tat Normal, bleu pour l'tat Survol. Pour positionner une image survole : 7. Cliquez sur le bouton Dfinir la position de l'lment survol situ au bas de la bote de dialogue Image survole. Slectionnez une image dans la bote de dialogue qui s'affiche. La liste droulante indique l'tat de l'lment slectionn :

8.

Normal Slection : l'image l'tat Normal est slectionne (bordure verte). Survol Slection : l'image l'tat Survol est slectionne (bordure bleue).

142

Ajouter des objets Web

Lgende Slection : la lgende est slectionne (bordure rouge). Disponible uniquement si vous avez dfini une lgende.

Si vous dslectionnez une image, la liste droulante indique Non Slection. 9. Pour repositionner et/ou redimensionner une image, faites glisser l'une de ses poignes d'angle (les proportions sont conserves lorsque vous redimensionnez une image par glisser-dplacer). Vous pouvez galement entrer des valeurs dans les champs Gauche, Haut, Largeur et Hauteur pour dfinir prcisment la position des images. Les flches vers le bas situes en regard des champs donnent accs aux trois dernires valeurs dfinies pour les images l'tat Normal, les images l'tat Survol et les lgendes (de haut en bas), ce qui permet d'aligner prcisment les images.

10. (Facultatif) Activez l'option Position relative l'image normale pour que la position de l'image l'tat Survol soit toujours dfinie par rapport l'image l'tat Normal (lorsque celle-ci est redimensionne). 11. (Facultatif) Dsactivez 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 procder par glisser-dplacer). 12. Cliquez sur OK. L'image l'tat Normal s'affiche sur la page. Vous devez gnrer un aperu ou publier le site pour que l'image l'tat Survol apparaisse l'cran. Vous pouvez ajouter votre page Web plusieurs images survoles pour crer une galerie d'images stylise, les diffrentes images l'tat Normal formant une suite de miniatures sur lesquelles l'utilisateur peut cliquer.

Ajouter des objets Web

143

Pour modifier une image survole (Popup) :

Double-cliquez sur l'image l'tat Normal dispose sur la page. La bote de dialogue Image survole s'affiche. Modifiez les paramtres selon les besoins.

Pour ajouter une lgende une image l'tat Survol : 1. 2. 3. Dans la bote de dialogue Image survole, cochez la case Afficher la lgende avec l'image survole. Entrez le texte de la lgende dans la zone de saisie Lgende. Dfinissez les attributs du texte de la lgende au moyen des listes droulantes Police et Taille et des cases cocher Gras et Italique. Pour appliquer une couleur au texte, utilisez la liste droulante Couleur du texte. Activez l'option Appliquer une couleur d'arrire-plan pour pouvoir slectionner une couleur dans la liste droulante adjacente. Cliquez sur OK.

4.

5.

La lgende ne s'applique qu' l'image l'tat Survol. Pour dfinir la position de la lgende sur l'image l'tat Survol, vous devez donc double-cliquer sur l'image l'tat Normal dispose sur la page. Cliquez sur le bouton Dfinir la position de l'lment survol dans la bote de dialogue qui s'affiche, puis repositionnez la lgende (la procdure tant la mme que pour les images l'tat Normal ou l'tat Survol). Lorsque vous slectionnez une lgende, celle-ci est entoure d'une bordure rouge dans la fentre d'aperu.

Ajouter des objets Web dynamiques

145

Ajouter des objets Web dynamiques

146

Ajouter des objets Web dynamiques

Ajouter des objets Web dynamiques

147

Joindre un code HTML


Dans WebPlus, vous pouvez crer des pages HTML (voir Crer des pages HTML p. 71). WebPlus vous permet aussi joindre du code vos objets (cadre ou cellule de tableau par exemple) et vos pages pour accrotre les performances et optimiser l'interactivit. L'objet ou la page peuvent soit gnrer du contenu de manire dynamique, soit changer d'apparence suite l'intgration d'un script. Il n'est pas possible d'diter le code HTML proprement dit (ce qui ne prsente aucun avantage). En revanche, il est possible d'accder certaines zones du code pour y ajouter du code supplmentaire. Ainsi des champs fictifs clairement identifiables (texte avec un contour blanc en surbrillance) apparaissent dans l'onglet Source.

La liste ci-dessus prsente certains des champs fictifs modifiables prsents 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 diffrents en fonction du type d'lment). Par exemple, le dernier champ fictif de la liste ci-dessus est spcifique au code source d'une page et n'apparat ni pour un objet, ni pour un fragment HTML.

148

Ajouter des objets Web dynamiques

Le code peut tre insr par copier-coller toutes les positions d'espaces rservs. Gnralement, vous pouvez inclure des marqueurs, du code HTML ou des scripts spcifiques, par exemple en JavaScript. Ce code peut servir dfinir un comportement des images survoles qui ne pourrait s'effectuer sans script, par exemple un gestionnaire de clic sur une image.

Ajouter du code HTML


WebPlus vous permet galement de "visualiser le code source" d'une page. Vous pouvez ainsi ajouter du code HTML supplmentaire la page. Grce cette approche, vous pouvez inclure des fragments que vous avez soit copis depuis une autre page Web soit ventuellement crits vous-mme. 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 Slectionner tout et Copier d'un navigateur), grce la commande Fichier/Collage spcial de WebPlus. Avant d'importer votre code HTML, WebPlus vous demande de positionner une fentre Code HTML sur votre page. Vous ne pourrez visualiser l'effet cr par le code HTML que lors de l'aperu du site export. Veillez donc placer correctement les repres. Vous devez absolument vrifier le rsultat de votre page Web dans un navigateur. En cas de problme, vrifiez le code que vous avez saisi, ainsi que sa position sur la page WebPlus (redimensionnez celle-ci si ncessaire). 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.

Ajouter des objets Web dynamiques

149

Pour ajouter un code HTML une page : 1. Copiez le code HTML dans le Presse-papiers, partir de sa source d'origine. Cliquez sur le bouton Insrer un code HTML dans la barre d'outils Objets Web. Cliquez sur la page ou sur la table de montage pour crer une fentre de code HTML employant les dimensions par dfaut ou cliquez et faites glisser pour crer une fentre aux dimensions de votre choix. Dans la bote de dialogue, utilisez le bouton Coller dans la balise HEAD ou Coller dans la balise BODY pour insrer le texte du Presse-papiers dans l'en-tte du fichier ou dans le corps de texte principal. - ou Utilisez la fentre droulante de code. Saisissez un ou plusieurs fragments de code HTML dans les champs correspondants. 5. (Facultatif) Si le code ncessite des fichiers externes, cliquez sur le bouton Ajouter pour les slectionner. Cliquez sur le bouton Lier si vous souhaitez que les fichiers restent spars du site. Cliquez sur OK pour fermer la bote de dialogue. Le code apparatra sur votre page dans la fentre Code HTML.

2. 3.

4.

6.

Ajout de code JavaScript


Pour trouver une large gamme d'chantillons de code JavaScript, recherchez "javascript snippets" dans votre moteur de recherche prfr. 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

150

Ajouter des objets Web dynamiques

galement de slectionner le code JavaScript et de le copier pour le coller dans une fentre source de fragment HTML, d'objet ou de page, dans une cellule de tableau HTML ou directement sur la page. Nous allons maintenant examiner comment ajouter du JavaScript (provenant de sources externes ou que vous avez crits vous-mme si vous avez des connaissances en programmation JavaScript). A titre d'illustration, comparez les deux exemples de code cidessous. Un script JavaScript trs simple est ajout la fentre Source pour afficher la date du jour sur votre page Web. La premire partie comporte le dernier champ fictif de la liste cidessus (<!--Page Body Start-->), la seconde indique quoi ressemble le code lorsque le champ fictif a t remplac par un script.

Code avec champ fictif

Code aprs ajout du JavaScript

Cet exemple montre o se trouve un code simple dans une fentre source. Pour attacher un code un fragment HTML ou un objet : 1. 2. Slectionnez un fragment ou un objet HTML existant. Dans le menu Format, slectionnez Joindre du code HTML.... - ou -

Ajouter des objets Web dynamiques

151

Slectionnez cette option aprs avoir cliqu avec le bouton droit de la souris sur l'objet. 3. Dans la bote de dialogue, faite dfiler la fentre source pour trouver des champs fictifs modifiables. Les champs fictifs choisis dpendent du rsultat vis. Slectionnez l'ensemble du champ fictif et collez le code HTML, le script ou tout autre chane de texte pour le remplacer. - ou Slectionnez 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. Vous pouvez utiliser des marqueurs pour ajouter une srie de variables votre code HTML. Ces marqueurs sont utiles dans un modle de navigation de type "fil d'Ariane" o les liens se mettent jour de faon dynamique si vous ajoutez, supprimez ou modifiez des pages l'intrieur du site. Pour des scripts plus complexes, il peut tre ncessaire dajouter des fichiers complmentaires (images, fichiers texte etc.) pouvant tre utiliss par le script insr. Ces fichiers peuvent tre intgrs ou lis, ce qui signifient que les fichiers sont conservs avec le site (intgrs) ou quils y sont lis par une refrence externe ( la manire dun lien hypertexte). Tenez compte de la taille finale du site en cas dintgration de plusieurs images. Pour ajouter des fichiers complmentaires : 1. Cliquez sur le bouton Ajouter.

4.

152

Ajouter des objets Web dynamiques

2.

Dans la bote de dialogue Ouvrir, slectionnez un ou plusieurs fichiers (cliquez sur les lments en maintenant la touche Ctrl ou Maj enfonce pour une slection non contigu ou contigu, respectivement). Cliquez sur Ouvrir. Les fichiers, qui apparaissent dans la liste Fichiers, seront intgrs dans votre site par dfaut. Si vous prfrez ne pas les intgrer (pour que le site soit moins volumineux), slectionnez chaque fichier et cliquez sur le bouton Lier. Cliquez sur OK.

3.

4.

Vous pouvez tout moment Ajouter, Supprimer et modifier des Options d'exportation d'un fichier. Pour joindre un code une page : 1. 2. Joindre du code HTML Cliquez sur le bouton dans la barre d'outils standard. Dans la bote de dialogue, faite dfiler la fentre pour trouver des champs fictifs modifiables. Les champs fictifs choisis dpendent du rsultat vis. Slectionnez l'ensemble du champ fictif et collez le code HTML, le script ou tout autre chane de texte pour le remplacer. - ou Slectionnez 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 suprieure de la fentre source.

3.

Ajouter des objets Web dynamiques

153

Utilisation d'identifiants
Des objets, des colonnes de texte, des lignes et des cellules de tableaux reoivent toujours un identifiant HTML alphanumrique unique, p. ex. un identifiant "fp_1", "fp_2", etc. serait cr pour une nouvelle Forme pleine. Ces identifiants peuvent tre crits lors de l'exportation pour permettre le rfrencement dans les langages script dans votre site publi. Par dfaut, ils ne sont pas crits lors de l'exportation pour tous les objets (globalement) mais ils peuvent tre exports pour chaque objet individuellement. Pour crire (exporter) un identifiant (pour chaque objet) : 1. 2. Cliquez avec le bouton droit de la souris sur l'objet et slectionnez Identifiant.... Dans la bote de dialogue, slectionnez "Oui" dans la liste droulante crire l'identifiant de cet objet. L'option "Rglages par dfaut du site" active le paramtre dfini dans la bote de dialogue Proprits du site l'identifiant de l'objet est crit lors de l'exportation, ou ne l'est pas, selon que la valeur est "Oui" ou "Non", quel que soit le paramtre par dfaut du site. Pour crire (exporter) des identifiants (globalement) :

Sous Fichier//Proprits du site (option de menu HTML), cochez les cases correspondant aux objets, aux colonnes de texte, aux lignes ou aux cellules de tableaux.

154

Ajouter des objets Web dynamiques

Si l'objet est copi sur la mme page ou sur un autre site Web, l'identifiant est remplac par un autre identifiant. Si vous devez attribuer votre identifiant un nom personnalis, utilisez la bote de dialogue Modifier l'identifiant de l'objet. Pour modifier le nom d'un identifiant d'objet : 1. 2. Cliquez avec le bouton droit de la souris sur l'objet et slectionnez Identifiant.... Dans la bote de dialogue, modifiez la valeur de l'identifiant HTML.

Marqueurs
WebPlus comporte divers groupes de marqueurs d'annotation HTML qui peuvent tre joints des fragments HTML, des objets ou des pages. Ils sont remplacs par les valeurs "relles" correspondantes lors de l'exportation dans un fichier ou de la prvisualisation de la page. L'ajout de marqueurs consiste simplement insrer des chanes de texte , par copier-coller ou par saisie directe, l'emplacement d'un champ fictif dans tout code source HTML. Vous trouverez la liste complte des jetons dans lAide de WebPlus.

Ajouter des formulaires


Les formulaires Web permettent de collecter de faon efficace et moderne des informations auprs des personnes visitant votre site Web. Tout comme les formulaires traditionnels sur papier sont utiliss pour runir des informations, les formulaires Web s'appuient sur le mme principe de renseignement de champs mais ils tirent profit d'Internet comme puissant vhicule d'informations.

Ajouter des objets Web dynamiques

155

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 donnes de formulaires peuvent tre collectes de diverses manires par e-mail, via un fichier script local ou distant ou par le biais des ressources Web Serif.

Structure des formulaires


Un formulaire peut se composer de diffrents blocs : texte, graphiques et champs de formulaire. Les champs de formulaires peuvent collecter de faon intelligente des donnes sur les visiteurs de votre site, ils peuvent tre dplacs et modifis un peu comme les objets familiers de WebPlus tels que graphiques et lments de tableaux. Un champ 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 slectionne des donnes l'aide de cases cocher, de boutons radio ou de listes droulantes. Les informations saisies peuvent tre des valeurs numriques, du texte ou les deux, selon le type de champ. L'ordre dans lequel les champs doivent tre renseigns (ordre des tabulations) peut tre configur, de mme que le systme de validation des donnes saisies (reportez-vous l'aide WebPlus pour plus d'informations sur l'ordre des tabulations et la validation). Chaque champ comporte ses propres proprits relatives son apparence, ses valeurs, sa validation et l'opration attendue pour le champ. Le formulaire ne devient fonctionnel qu'une fois le site Web publi (vous pouvez tout de mme obtenir un aperu de vos formulaires dans WebPlus ; reportez-vous Afficher un aperu de votre site, p. 403). Lorsqu'un visiteur saisit des informations dans les champs

156

Ajouter des objets Web dynamiques

ou active une option, les donnes sont transmises une destination spcifique au moment de l'envoi du formulaire. Javascript permet d'activer une interactivit dans vos formulaires Web. Il gre la mise en forme, la validation, les calculs et les oprations, c'est--dire toutes les fonctions cls dans le dveloppement de formulaires Web. O les donnes sont-elles envoyes ? Aprs l'envoi, les donnes du formulaire peuvent tre transmises l'une des destinations suivantes :

une adresse e-mail (celle du dveloppeur 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 donnes d'un serveur. Ressources Web Serif : pour le transfert des donnes de formulaire votre e-mail (via Serif).

Comme c'est le cas gnralement dans la gestion des formulaires Web, il est possible de dfinir le type d'encodage, la fentre ou les cadres de destination, les mthodes d'envoi (POST ou GET).

Crer des formulaires


l existe plusieurs mthodes de cration de formulaires : vous pouvez crer un formulaire standard prdfini prt l'emploi (cicontre), slectionner des champs de formulaire ou crer un formulaire de toutes pices ; les deux premires mthodes font appel un Assistant de cration 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.

Ajouter des objets Web dynamiques

157

Pour crer un formulaire standard : 1. Cliquez sur le bouton Assistant de cration de formulaire dans la palette Formulaire de la barre d'outils Objets Web. Dans la bote de dialogue, cliquez sur l'icne Utiliser et adapter un formulaire standard, puis sur Suivant>. Dans la liste de formulaires, slectionnez un type de formulaire en utilisant le volet d'aperu situ au bas de la bote de dialogue. Cliquez sur Suivant>. Dans la fentre suivante, choisissez d'ajouter, de modifier ou de supprimer des champs.

2. 3.

4. 5.

Pour ajouter, cliquez sur un bouton de la section Ajouter. Pour modifier un objet standard, slectionnez un champ existant dans la fentre et choisissez Modifier le champ. Pour plus d'informations, reportez-vous Modifier les champs de formulaire, p. 163. Pour supprimer un objet standard, slectionnez un champ existant dans la fentre et choisissez Supprimer (ou appuyez sur la touche Suppr.). Pour rorganiser l'ordre des champs, utilisez les boutons Vers le haut et Vers le bas.

6.

Aprs avoir cliqu sur Suivant>, choisissez une destination pour les donnes du formulaire en cliquant sur un bouton de destination. Cliquez sur Terminer pour fermer l'Assistant.

158

Ajouter des objets Web dynamiques

7.

Pour insrer le formulaire une taille par dfaut, positionnez le curseur de positionnement du formulaire et cliquez.

Si vous souhaitez plus de libert dans votre cration, WebPlus fournit un formulaire vide et des objets de formulaire partir desquels vous pouvez concevoir votre formulaire de toutes pices. Vous pouvez ajouter des champs ou des objets de formulaire standard, ou les deux. Reportez-vous l'aide de WebPlus pour plus d'informations. Pour crer un formulaire personnalis ( l'aide d'un assistant de cration de formulaire) : 1. Assistant de cration de Cliquez sur le bouton formulaire dans la palette Formulaire de la barre d'outils Objets Web. Dans la bote de dialogue, cliquez sur l'icne Crer un formulaire avec l'assistant, puis sur Suivant>. Dans l'cran suivant, ajoutez les champs de formulaire qui constitueront votre formulaire. Effectuez l'une des oprations suivantes partir de la section Ajouter :

2. 3.

Pour crer un champ de formulaire prt l'emploi, cliquez sur le bouton Prdfini, et slectionnez le champ de formulaire de votre choix. Double-cliquez sur le nouveau champ dans la fentre pour le renommer. - ou -

1.

Ajoutez d'autres champs de formulaire pour crer un formulaire de toutes pices. Reportez-vous Champs de formulaire p. 160 pour obtenir une description de chaque champ.

Ajouter des objets Web dynamiques

159

2.

Dans la bote de dialogue, conservez le nom interne attribu au champ ( des fins d'identification) ou modifiez-le. Vous pouvez galement dfinir l'tiquette associe au champ (libell qui apparat l'cran). Pour modifier le champ, cliquez sur le bouton Modifier le champ. La bote de dialogue qui s'affiche vous permet de dfinir le systme de validation, la longueur du formulaire ainsi que d'autres attributs de champs. Pour plus d'informations, reportez-vous Modifier les champs de formulaire p. 163. Si vous avez modifi une valeur, cliquez sur OK.

4.

Rptez ventuellement la procdure ci-dessus pour tous les champs de formulaire choisis. Ils sont prsents (dans l'ordre de cration) dans la fentre suprieure. Avant de continuer, vous devez ajouter un champ Envoyer votre formulaire. Cet lment est essentiel l'envoi des donnes leur destination. Cliquez sur le bouton Envoyer pour ajouter automatiquement le bouton au formulaire. Ce bouton est gnralement accompagn d'un bouton Effacer utilis pour effacer les donnes des champs des formulaires qui n'ont pas encore t envoys. Cliquez sur Suivant>. Dans la bote de dialogue suivante, choisissez une destination pour les donnes du formulaire en cliquant sur un bouton de destination (e-mail, fichier script local ou distant ou Ressources Web Serif) et saisissez un nom dsignant le formulaire. (Reportez-vous Transmission de formulaires p. 164). Cliquez sur Terminer pour fermer l'Assistant. Pour insrer un formulaire sa taille par dfaut, placez le curseur l'emplacement o vous souhaitez que le formulaire apparaisse sur la page, puis cliquez.

5.

6. 7.

Formulaire vide de la Vous pouvez aussi cliquer sur le bouton palette Formulaire de la barre d'outils Objets Web, faites glisser le pointeur pour dfinir une zone de formulaire, puis ajoutez des champs de formulaire la zone.

160

Ajouter des objets Web dynamiques

Champs de formulaire
Chaque champ de formulaire est un objet "intelligent" diffrent 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 champ peut tre dplac comme les autres objets, mais il n'est pas possible de lui attribuer une couleur ou une transparence, de paramtrer ses bordures ou de le redimensionner. Divers champs de formulaires sont accessibles dans l'Assistant de cration de formulaire ou directement partir de la palette Formulaire de la barre d'outils Objets Web. Il faut associer un nom unique interne chaque lment, puis dfinir diverses proprits ; chaque champ de formulaire dispose de proprits qui peuvent tre modifies. Icne de champ de formulaire Nom de champ de formulaire Bouton de formulaire Utilisation

Permet de spcifier une action effectuer lors d'un clic sur ce bouton. Vous pouvez crer toute une gamme de boutons dont le motif et la fonction diffrent.

Des boutons Envoyer et Effacer sont disponibles dans l'Assistant de cration de formulaire. Ils permettent respectivement d'envoyer le formulaire et d'effacer toutes les donnes saisies. Zone de saisie Pour saisir du texte, des valeurs numriques ou une combinaison des deux, sur une seule ligne. Par exemple, un nom de famille.

Ajouter des objets Web dynamiques

161

Zone de texte

Pour saisir du texte, des valeurs numriques ou une combinaison des deux, sur plusieurs lignes. Gnralement utilise pour la saisie de texte ou de valeurs numriques, par exemple, saisie d'une requte, d'une recette ou d'une liste de chiffres. Pour slectionner un lment dans une liste droulante o un seul lment peut tre slectionn par dfaut (ex. : Masculin ou Fminin). Les listes droulantes permettent aussi d'effectuer une slection dans une liste autorisant la slection multiple. Vous pouvez cliquer tout en maintenant la touche Maj enfonce pour slectionner une plage d'lments contigus. Lorsque vous crez une liste droulante autorisant la slection multiple, dplacez le haut ou le bas de la zone de liste pour que plusieurs lments soient affichs par dfaut.

Liste droulante

Case cocher

Idale lorsque vous souhaitez permettre la slection de plusieurs options affiches cte cte. Il s'agit d'une bonne alternative la liste droulante lorsque l'espace le permet. Le visiteur clique une fois pour slectionner ou dslectionner la case, par exemple :

Souhaitez-vous tre inform des prochains vnements ?


Bouton radio

Permet la slection d'un lment exclusif des autres dans un sous-ensemble d'options. Par exemple, plusieurs boutons radio peuvent tre utiliss pour dfinir l'entre Sexe (Masculin/Fminin) du formulaire. Utilisez l'explorateur de fichiers pour permettre aux visiteurs de votre site de transfrer des fichiers depuis leur ordinateur. Le visiteur clique sur un bouton Parcourir et slectionne le fichier de son choix. Cela permet par exemple de tlcharger des images, des CV, des dessins et des instructions.

Explorateur de fichiers

CAPTCHA

Un objet CAPTCHA est un systme de scurit permettant de se protger contre le spam. Une chane de texte alatoire s'affiche au niveau du champ et le visiteur doit reproduire cette chane dans une zone de texte. Si le rsultat du contrle est positif, l'envoi du formulaire est autoris, mais uniquement via les Ressources Web Serif.

Une vrification par passerelle CAPTCHA p. 169 est toujours effectue si ce champ n'est pas prsent sur votre formulaire. Si vous utilisez ce champ de formulaire, la vrification par passerelle CAPTCHA ne sera pas applique.

Modifier les champs de formulaire


Tous les types de champs de formulaire (boutons, zones de saisie etc.) ont des caractristiques diffrentes et donc des valeurs diffrentes pouvant tre modifies. Les valeurs peuvent tre modifies au moment de la cration du formulaire ou aprs, lorsque le champ a t plac dans le formulaire. Le bouton Modifier le champ de l'Assistant de cration de formulaire vous permet de modifier le champ au cours de la cration du formulaire. Le champ peut aussi tre modifi ultrieurement en cliquant sur le champ de formulaire avec le bouton droit de la souris sur la page Web et en slectionnant l'option Modifier, par ex. Modifier la zone de texte du formulaire.

164

Ajouter des objets Web dynamiques

Transmission de formulaires
Tous les formulaires ont un point commun : ils doivent tre envoys pour que les donnes soient collectes. Pour ce faire, vous pouvez soit crer vous-mme un bouton Envoyer, soit utiliser le bouton prt l'emploi propos par l'Assistant de cration de formulaire. Le bouton doit tre prsent sur le formulaire et est gnralement associ un bouton Effacer pour effacer les donnes saisies dans tous les champs du formulaire. Il existe plusieurs mthodes de transmission de donnes de formulaire. Les donnes du formulaire ne sont pas transmises. Cette option est utile pour dsactiver temporairement la collecte des donnes, ou si vous n'avez pas encore dfini les scripts ou les ressources Web Serif. Vous pouvez modifier le formulaire ultrieurement (cliquez sur le bouton droit de la souris puis slectionnez Editer les proprits du formulaire) et choisir une mthode de transmission adapte. Utilisez cette option pour viter les mthodes de transmission POST/GET habituelles. Lorsque le visiteur clique sur le bouton Envoyer, son programme de messagerie par dfaut est ouvert. Les donnes du formulaire (transmises sous la forme d'une chane unique) sont ajoutes dans le corps du message et sont prtes tre envoyes la destination e-mail configure. Cela s'avre particulirement utile lorsqu'aucun script local ou distant n'a t dfini. Cette mthode de transmission nest pas scurise. Les informations prives ou confidentielles ne sont pas encryptes.

Aucune action

Une adresse e-mail

Ajouter des objets Web dynamiques

165

Pour configurer l'envoi direct par e-mail : 1. 2. L'icne tant active, ajoutez un nom de formulaire. Saisissez l'adresse e-mail de destination (ou slectionnez une adresse e-mail connue dans le menu droulant).

Un script sur mon disque dur

Cette option est destine aux dveloppeurs Web expriments bnficiant d'une expertise dans le dveloppement de scripts. Pour configurer un fichier de script local : 1. 2. L'icne Fichier script tant active, ajoutez un nom de formulaire. Accdez votre fichier de script local (gnralement un fichier .PHP, .JS, .CFM, .CGI, .PL, .DLL ou .EXE) l'aide du bouton Parcourir. Cochez Intgrer le fichier pour inclure le script dans le site. Si l'option n'est pas coche, le fichier script n'est pas reli au site (toute modification apporte au script ne s'appliquera pas dans le cadre du site). Si vous le souhaitez, vous pouvez dfinir un nom de fichier et un dossier pour le script l'aide du bouton Options d'exportation. Choisissez une mthode de transmission, un type d'encodage, une fentre ou un cadre cible et un jeu de caractres.

3.

4.

5.

166

Ajouter des objets Web dynamiques

Un script distant

Utilisez cette option si votre FAI ne vous autorise pas excuter 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 gnral, le script transmet les donnes du formulaire votre adresse de messagerie (dj dfinie auprs du FAI). Pour configurer un fichier de script distant : 1. 2. 3. L'icne Un script distant tant active, ajoutez un nom de formulaire. Saisissez une URL pointant directement vers un fichier script. Choisissez une mthode de transmission, un type d'encodage, une fentre ou un cadre cible et un jeu de caractres.

Ressources Web Serif

Puisque tout le monde n'a pas accs ou ne souhaite pas disposer de son propre serveur Web, vous pouvez utiliser les Ressources Web Serif p. 201. Il s'agit d'un service gratuit de passerelle du Web vers une messagerie lectronique. Il recueille les donnes de formulaire via Serif et les envoie votre adresse e-mail personnelle. Pour bnficier de ce service, vous devez disposer d'un compte client (pour des raisons de scurit) vous permettant l'accs aux ressources Web Serif, grce auquel vous pouvez crer, diter et supprimer vos destinations de messagerie (appeles Destinataires de formulaire). Pour configurer les ressources Web Serif : 1. L'icne Ressources Web Serif tant active, ajoutez un nom de formulaire.

Ajouter des objets Web dynamiques

167

2.

Cliquez sur le bouton Slectionner (connectez-vous aux ressources Web Serif). Slectionnez les informations d'e-mail de destination dans la bote de dialogue qui s'affiche.

3.

Saisissez une adresse e-mail de destination dans le champ Adresse e-mail. Personnalisez le sujet, la ligne qui apparatra dans l'adresse email 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, dfinissez la langue dans laquelle le message de confirmation sera envoy.

En crant un champ 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 vrifier que l'option RWS : Envoyer un e-mail de confirmation est coche dans les proprits de la zone de saisie. Une vrification anti-spam sera effectue si un champ de formulaire CAPTCHA est ajout au formulaire ; dans le cas contraire, une vrification est effectue sur la passerelle CAPTCHA.

168

Ajouter des objets Web dynamiques

Cochez Rpondez-moi dans la bote de dialogue ci-dessus afin d'insrer l'adresse e-mail du dveloppeur Web dans le champ Rpondre de l'email de confirmation. Cela permet au visiteur de contacter directement par e-mail le dveloppeur Web. 4. Cliquez sur Ajouter. L'entre est cre et ajoute la liste Destinataires disponibles. Vous constaterez que l'entre est classe comme tant "Non confirme". 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'entre devient alors "Confirme". (Facultatif) Rptez la procdure prcdente pour ajouter des destinataires, puis slectionnez une entre pour l'activer. Cliquez sur OK pour fermer la bote de dialogue.

5.

6.

Le visiteur reoit une page de confirmation basique gnre par les Ressources Web Serif pour confirmer la bonne rception des donnes du formulaire. Vous pouvez crer et affecter votre propre page Web d'accus rception 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 mme style et avec le mme aspect que le reste de votre site.

Ajouter des objets Web dynamiques

169

Pour ajouter une page de confirmation personnalise : 1. Cliquez avec le bouton droit de la souris sur le formulaire (les donnes doivent tre transmises via les Ressources Web Serif) et slectionnez Modifier les proprits du formulaire. Ouvrez l'onglet Champs masqus, cliquez sur le bouton Ajouter et ajoutez le mot "redirect" au champ Nom et votre URL cible, prcde de http:// (c'est--dire l'adresse Web de votre propre page d'accus de rception) dans le champ Valeur. Cliquez sur OK. La nouvelle page Web est affiche lors de la prochaine transmission de formulaire. Aucune donne personnelle n'est stocke sur les serveurs Web de Serif. Toutes les donnes de formulaires sont rediriges en temps rel. Passerelle CAPTCHA Pour vous protger contre les spams, les Ressources Web Serif utilisent une passerelle CAPTCHA si vous n'avez pas directement ajout de champ CAPTCHA votre formulaire (voir Champs de formulaire p. 160). Lors de la transmission de formulaires, un systme de scurit est activ et prsente au visiteur une chane de texte alatoire qu'il doit saisir dans une zone de texte.

2.

3.

170

Ajouter des objets Web dynamiques

Si le rsultat du contrle est positif, alors l'envoi du formulaire est autoris.

Flux RSS et podcasts


Les flux RSS (Really Simple Syndication) sont des flux d'informations mis jour en permanence, trs utiliss 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 rgulirement des sites d'informations. Sur le . L'utilisateur Web, les flux RSS sont signals par le symbole peut cliquer sur ce symbole pour s'abonner manuellement au automatiquement au flux RSS correspondant, par l'intermdiaire d'un lecteur RSS. Les podcasts sont des flux de syndication comme les flux RSS. Leur fonction est toutefois lgrement diffrente dans la mesure o ils s'appuient sur des supports numriques tels que des fichiers audio et vido. 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 crer vos propres flux RSS ou podcasts que vous pourrez alors publier et mettre jour rgulirement. Vous deviendrez alors l'diteur (plutt que le lecteur) d'un ou de plusieurs services d'informations donnant accs des bulletins d'informations, des rsums de site Web ou vos propres articles. Si vous dcidez de publier des podcasts, vous diffuserez des clips multimdia 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'accder diffrents mdias ( la fois audio et vido).

Ajouter des objets Web dynamiques

171

Les procdures de configuration d'un flux RSS et de configuration d'un podcast dans WebPlus sont similaires. Pour crer votre flux RSS ou votre podcast, vous utiliserez d'ailleurs le mme outil WebPlus, savoir l'outil Flux RSS. Si vous voulez rutiliser un flux RSS/podcasts tiers et l'ajouter votre page Web, vous pouvez intgrer un lecteur dans votre page par le biais de l'outil Lecteur RSS.

Crer des flux RSS ou des podcasts


L'outil Flux RSS vous permet de crer 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 dfinir un certain nombre de paramtres le concernant : titre et description du flux, images associes, informations sur les droits d'auteur, catgories, mots cls, etc. Pour insrer un flux RSS ou un podcast : 1. 2. Outil Flux RSS dans la Cliquez sur le bouton palette RSS de la barre d'outils Objets Web. Cliquez sur le bouton Ajouter un flux RSS ou Ajouter un podcast pour crer un nouveau flux RSS ou un nouveau podcast. Le nom du nouveau flux (Nouveau flux RSS ou Nouveau podcast) apparat dans le menu situ gauche. Slectionnez ce flux pour afficher la liste des paramtres modifiables. Cliquez sur la colonne Valeur pour effectuer les modifications ncessaires. Vous pouvez ajouter, slectionner ou modifier des valeurs par l'intermdiaire des menus droulants, des botes de dialogue et des zones de saisie qui vous sont proposs. Voici la liste des paramtres que vous pouvez dfinir Cliquez sur OK.

3.

172

Ajouter des objets Web dynamiques

4.

Pour placer le flux sur la page, positionnez le curseur l'emplacement de votre choix puis cliquez sur la page. Un bouton ou (flux RSS et podcast, respectivement) apparat 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 utilise pour l'abonnement.

Pour remplacer un flux par un autre :

Aprs avoir cr un flux RSS ou un podcast, doublecliquez sur le flux de la page pour rediriger le bouton vers un autre flux. Il vous suffit de slectionner une autre entre et de cliquer sur OK. Si vous mettez en place un podcast, la bote de dialogue vous permet de slectionner l'application devant tre utilise pour l'abonnement automatique (Google Reader, My Yahoo! ou iTunes). Faites votre choix dans la liste droulante 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 p. 405). Pour ajouter ou mettre jour des articles ou des pisodes : 1. Outil Flux RSS de la barre Cliquez sur le bouton d'outils Objets Web de WebPlus.

Ajouter des objets Web dynamiques

173

2.

Dans la bote de dialogue Flux RSS, slectionnez le flux adquat, puis cliquez sur le bouton Gestionnaire de flux RSS. Cliquez sur le bouton Ajouter un article ou Ajouter un pisode situ dans la partie droite de la bote de dialogue. Une nouvelle entre apparat sous le flux slectionn. Un titre provisoire lui est attribu : Nouvel article (pour un flux RSS) ou Nouvel pisode (pour un podcast). Modifiez votre article/pisode ainsi que ses paramtres (voir ci-dessous). Voici la liste des paramtres que vous pouvez dfinir. Cliquez sur OK, puis de nouveau sur OK. Si vous diffusez des fichiers mdia stocks en local, vous serez invit dfinir l'URL du site (p. 38) lors de la publication. Cela permet de rendre les fichiers locaux accessibles aux utilisateurs.

3.

4.

5.

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 vrifier plusieurs lments : identifiant de connexion adquat, problmes techniques et prsence ventuelle d'un langage explicite, de contenu caractre injurieux ou de contenu soumis droits d'auteur. Si votre podcast est accept, les utilisateurs d'iTunes pourront s'y abonner. Pour soumettre un podcast iTunes : 1. 2. 3. Lancez iTunes. Cliquez sur Podcasts dans la section BIBLIOTHQUE. Slectionnez le Rpertoire des podcasts au bas de la fentre iTunes.

174

Ajouter des objets Web dynamiques

4.

Dans la section RACCOURCIS PODCASTS situe en haut droite de l'cran, cliquez sur Soumettre un podcast. 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). Cliquez sur Continuer.

5.

6.

Abonnement
S'abonner des flux RSS et des podcasts Les visiteurs de votre site Web peuvent s'abonner ces flux de diffrentes manires. Type d'abonnement manuelle Mthode Il suffit l'internaute de cliquer sur un symbole de diagnostic indiquant le type de flux : Pour les flux RSS 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. - ou

Ajouter des objets Web dynamiques

175

Pour les podcasts Cliquez pour ajouter votre podcast la page d'accueil iGoogle ou Google Reader. Pour ITunes, une fois qu'un diffuseur a soumis son flux iTuneset que ce flux a t accept, un utilisateur peut s'abonner au podcast via iTunes. Pour ce faire : 1. 2. 3. Lancez iTunes. Cliquez sur S'abonner au podcast dans le menu Avanc. Collez l'URL du flux dans la zone de saisie de la bote de dialogue, puis cliquez sur OK. Le podcast apparat sous forme d'entre dans la fentre. Pour obtenir l'URL, cliquez sur le symbole du podcast et copiez l'URL rsultante dans la fentre du navigateur.

automatique (podcasts uniquement)

(ou le lien L'internaute clique sur l'icne hypertexte associ). Le podcast et le lecteur tant dfinis de manire explicite, l'abonnement s'effectue de faon automatique. Pour cela, double-cliquez sur le podcast et choisissez une option dans la liste droulante Ouvrir le Podcast avec.

Au lieu d'un bouton d'accs direct, il est possible de crer un lien hypertexte (p. 100) permettant d'accder directement au nouveau flux. On utilise alors un type de lien spcial appel Flux RSS.

176

Ajouter des objets Web dynamiques

Inclure des flux tiers


Plutt que de crer 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 intgrer un flux dans une page Web et recevoir automatiquement les articles ou les pisodes correspondants (notez toutefois qu'il existe d'autres faons 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 d'actualits Reuters a t ajout une page WebPlus :

Ajouter des objets Web dynamiques

177

Pour ajouter un flux RSS ou un podcast votre page : 1. Recherchez un flux RSS sur un site d'informations. Reprez l'un des boutons suivants :

2.

Pour copier l'URL du flux dans le Presse-papiers, effectuez un clic droit sur le symbole (ou lien hypertexte), puis slectionnez Copier le raccourci (Internet Explorer) ou Copier l'adresse du lien (Mozilla Firefox et Google Chrome). Outil Lecteur RSS dans la Cliquez sur le bouton palette RSS de la barre d'outils Objets Web. Dans la bote de dialogue, collez l'URL du flux dans le champ URL des donnes RSS. (Facultatif) Slectionnez une couleur, une police, une taille de caractres ou un style pour le titre, la manchette et le rsum du flux RSS. (Facultatif) Dfinissez l'heure locale de votre site dans la liste droulante Fuseau horaire. (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-tte de l'article. Cliquez sur OK. s'affiche. Pour insrer la fentre du Le pointeur flux RSS sa taille par dfaut, cliquez sur la page. - ou Pour dfinir la taille de la fentre du flux RSS, tracez un cadre par glisser-dplacer et relchez le bouton de la souris.

3. 4. 5.

6. 7.

8. 9.

178

Ajouter des objets Web dynamiques

La fentre du flux (de couleur orange) s'affiche, prsentant l'URL. Vous devez publier la page pour obtenir un aperu du nouveau flux. Gardez l'esprit que le contenu est automatiquement mis jour mesure qu'il est actualis sur son site d'origine. Pour les podcasts, les utilisateurs qui accdent au flux peuvent couter chacun des pisodes proposs : il leur suffit pour cela de cliquer sur un lien audio donnant gnralement accs un fichier MP3. Une fois tlcharg et enregistr, le fichier peut tre lu sur le lecteur dfini comme lecteur par dfaut (par exemple, Windows Media Player).

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 trs certainement dj 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 gnralement un systme de panier d'achats et un systme 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 lie un systme de traitement des paiements (qui remplace la caisse du supermarch). Pour les grandes entreprises, la technologie du panier d'achat est dveloppe en interne (mme si le traitement des paiements est parfois ralis par une socit tierce). Pour les socits ou organismes plus petits, le panier est normalement une solution fournie par un tiers, en raison de cots/ressources limits. Les fournisseurs de panier d'achat sont nombreux tous fonctionnant sur la base d'un compte et quips pour accepter les cartes de crdit plutt qu'un systme de paiement plus traditionnel (tlphone, 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 pralablement slectionns et, d'autre part, il vous permet de se connecter au fournisseur de panier par l'intermdiaire d'un

Ajouter des objets Web dynamiques

179

formulaire ou d'un lien (un simple bouton ou un lien hypertexte associ un objet) sur la page WebPlus. Les formulaires permettent de dfinir 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 fonctionnalits varient considrablement en fonction des fournisseurs.

Configurer le fournisseur de panier d'achat


WebPlus permet de configurer plusieurs fournisseurs de panier d'achat diffrents, les plus courants, et vous en connaissez peut-tre certains, comme PayPal, en tant que client eBay, par exemple. Le processus de configuration vous dirige vers le site Web du fournisseur, o vous pouvez vous enregistrer comme utilisateur. Parcourez le site Web du prestataire pour plus dinformations sur les fonctionnalits du panier. Pour configurer un fournisseur de panier d'achat : 1. Configuration de l'ECliquez sur le bouton Commerce dans la palette E-Commerce de la barre d'outils Objets Web. La bote de dialogue Configuration E-Commerce vous propose le choix entre deux options selon que vous tes ou non dj utilisateur de l'un des fournisseurs de panier d'achat :

2.

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 fentre de navigateur o vous pouvez vous enregistrer auprs de ce fournisseur.

180

Ajouter des objets Web dynamiques

Si vous tes dj utilisateur, cliquez sur le bouton correspondant votre fournisseur, puis sur Suivant>. Cette option se contente de dfinir un fournisseur de panier par dfaut pour votre site Web (au lieu de configurer un compte fournisseur).

3.

La bote de dialogue varie en fonction du prestataire et peut proposer des options diffrentes. Par exemple, le choix de PayPal permet de dfinir (dans une bote de dialogue) une adresse e-mail o seront envoys les paiements et les frais de dossier du panier, ou un mode "Sandbox", c'est--dire un outil de test permettant d'essayer votre panier d'achat avant de le mettre en ligne. Cliquez sur Suivant>. Pour tester le mode Sandbox, cliquez sur le bouton En savoir plus pour dfinir un identifiant de connexion "Sandbox" distinct, en plus de votre "vrai" identifiant PayPal.

4.

(Facultatif ; PayPal uniquement) Dans la bote de dialogue suivante, cochez Utiliser le Mini-panier PayPal pour afficher un panier "flottant" (en superposition) qui apparatra lors de l'ajout de produits au panier (le panier est ensuite rduit en haut gauche de la fentre de l'explorateur ; les articles sont conservs dans votre panier jusqu' ce que vous procdiez au paiement).

Dans la bote de dialogue, vous pouvez galement configurer la position du mini-panier dans votre explorateur, puis modifier ou supprimer le texte affich par dfaut dans le minipanier.

Ajouter des objets Web dynamiques

181

5.

Cliquez sur le bouton Terminer pour achever la configuration du panier d'achat.

Aprs avoir configur le panier d'achat, vous devez insrer un objet e-commerce.

Insrer un objet E-Commerce (PayPal)


La cration 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) en renseignant une succession de botes de dialogue. Le choix d'utiliser des formulaires ou des liens dpend des caractristiques des articles que vous prvoyez de vendre et de la manire dont vous voulez les vendre. Si, par exemple, vous tes un ngociant, vous pouvez crer un bouton ECommerce (sous la forme d'un lien Acheter maintenant). Ce choix suppose que la transaction est de mme style, c'est--dire que la quantit, la taille, le style et la couleur sont fixs. En effet, le lien est uniquement un bouton, qui ne peut contenir les options d'achat "interactives" ncessaires pour un achat plus complexe. Le clic d'un acheteur achte un produit standard rien de plus. Utile dans certaines situations, cette solution peut tre compltement inadapte dans d'autres. Les achats plus classiques utilisent des formulaires E-Commerce, qui offrent des options d'achat interactives (quantit, taille, etc.). 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 donnes Serif conue spcialement pour l'E-Commerce. Il vous suffit ensuite d'insrer des formulaires rcurrents (ou des zones rcurrentes) dans votre page Web pour que les articles enregistrs dans la base de donnes soient rpertoris et proposs la vente sur

182

Ajouter des objets Web dynamiques

votre site, l'issue de la fusion de celui-ci avec la base. Reportezvous Utiliser la fusion de base de donnes avec l'E-Commerce dans l'aide de WebPlus. La bote de dialogue affiche lorsque vous ajoutez un objet ECommerce dpend entirement du fournisseur de panier d'achat (reportez-vous Configurer le fournisseur de panier d'achat). Les procdures suivantes prsupposent que PayPal est configur comme panier. Pour insrer un objet E-Commerce : 1. Cliquez sur le bouton Insrer un objet ECommerce dans la palette E-Commerce de la barre d'outils Objets Web. Dans la bote de dialogue Ajouter un objet PayPal, choisissez l'adresse e-mail qui doit recevoir les informations sur le paiement. WebPlus utilise l'adresse email dfinie lors de la configuration du panier d'achat. Mais vous pouvez galement dsactiver la case Utiliser le compte par dfaut du site et dfinir une autre adresse e-mail pour remplacer celle dfinie par dfaut pour le site. Slectionnez un type d'objet dans la section Formulaire PayPal. Slectionnez une option "Formulaire" si vous souhaitez crer un formulaire E-Commerce proposant des options d'achat (couleur ou quantit par exemple). Si aucune option d'achat n'est propose pour le produit en vente, vous pouvez utiliser un objet de type "Lien" (afin de crer un bouton E-Commerce) sur lequel l'utilisateur peut cliquer. Les zones et formulaires rcurrents vous permettent d'extraire des fiches articles d'une base de donnes, plutt que de les dfinir explicitement via une bote de dialogue Informations sur l'article (reportez-vous Utiliser la fusion de base de donnes avec l'ECommerce dans l'aide de WebPlus). Cliquez sur Suivant>.

2.

3.

Ajouter des objets Web dynamiques

183

(Facultatif) Si un formulaire ou un bouton ne rpond pas vos attentes, activez plutt la dernire option afin de coller un code dans la bote de dialogue suivante. Le code est gnr par le site Web PayPal (aprs la connexion, sous Merchant Services). Cliquez sur Suivant pour quitter l'assistant et coller le fragment de code HTML sur votre page. 4. Dans la bote de dialogue suivante, dfinissez le bouton utiliser. Il est possible d'activer un bouton de texte standard (saisissez une chane de caractres lorsqu'il est activ) ou un bouton image standard (lorsqu'il est activ, slectionnez l'un des nombreux boutons prdfinis proposs dans la fentre droulante). Certaines images prennent en charge les survols automatiques.

Cliquez sur Suivant. 5. Les informations relatives l'identification des articles, au prix, la taxation et au poids peuvent tre dfinies dans la bote de dialogue Informations sur l'article. Les options slectionnables sont les suivantes :

Nom de l'article : nom de l'article vendre. Apparat dans le formulaire et dans le panier d'achat. Autoriser le client spcifier le nom de l'article : cochez cette case pour remplacer le nom d'article cidessus par une zone de texte dans laquelle le visiteur de votre site pourra saisir son nom d'article (peut galement servir spcifier des informations sur un don). Identifiant de l'article : ajoutez une chane de caractres identifiable pour assurer le suivi de l'article chez PayPal.

184

Ajouter des objets Web dynamiques

Unit : dfinit la devise dans laquelle la transaction s'effectuera. Prix : prix de l'article. S'affiche l'cran par dfaut. Autoriser le client spcifier 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 paramtres de taxe : cochez cette case pour ignorer le paramtre de taxe dfini par le fournisseur pour l'article, puis indiquez un taux fixe de taxe pour l'article, par exemple 0 % pour les dons (exonrs de TVA) des organismes de charit. Poids : Dfinissez le poids d'un article si vous utilisez un mode d'expdition bas sur le poids (tats-Unis uniquement), dfini dans votre profil PayPal. Gnralement, l'unit de mesure utilise est la livre (lb), mais vous pouvez choisir le kilogramme (kg) si besoin.

Configurez les paramtres ci-dessus en fonction des besoins et cliquez sur Suivant>. Si vous utilisez une base de donnes E-Commerce, la bote de dialogue Informations sur l'article vous permet de slectionner une base de donnes E-Commerce adapte spcifiquement au fournisseur slectionn. N'oubliez pas de dfinir la devise dans laquelle les transactions seront effectues.

Ajouter des objets Web dynamiques

185

6.

Pour les formulaires E-Commerce uniquement, deux botes de dialogue s'affichent :

La bote de dialogue Description de l'article vous permet d'inclure une image (p. ex., pour afficher un aperu de l'article en vente), et des descriptions courtes et longues qui s'afficheront dans le formulaire. Cliquez sur Suivant>. La bote de dialogue Options des articles vous permet de crer des zones de saisie, des listes droulantes, des boutons radio, et des noms fixes (jusqu' 10 options par formulaire peuvent tre slectionnes dans PayPal ; une option de modification de prix uniquement) vous pouvez tout crer de toutes pices ou utiliser des champs d'options pralablement enregistrs. Cliquez sur Suivant>. Ces options ne sont pas disponibles dans le cas d'un formulaire rcurrent.

7.

Dans la bote de dialogue Informations sur l'article, dfinissez une quantit par dfaut dans la zone de saisie ou cochez la case pour laisser l'utilisateur spcifier une quantit lors du paiement (options non disponibles dans le cas d'un formulaire rcurrent). - ou Cochez l'option Ajouter une zone de saisie pour laisser le client dfinir la quantit commander. Pour les frais de livraison et de manutention associs la commande, saisissez un montant dfini pour les frais d'expdition, de manutention et supplmentaires. Si vous laissez ce champ vide, le profil PayPal par dfaut sera utilis. Ces options ne sont pas disponibles dans le cas d'un formulaire rcurrent. Cliquez sur Suivant>.

186

Ajouter des objets Web dynamiques

8.

Dans la bote de dialogue Informations complmentaires, 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 fentre d'dition. Cliquez sur Suivant>. La bote de dialogue Pages de paiement propose des rglages concernant le paiement :

9.

Saisissez le nom du Style de la page de paiement (si elle a dj t dfinie via la connexion PayPal). Choisissez la langue de la page de connexion PayPal. Faites votre choix dans la liste droulante. Modifiez le texte du bouton Continuer sur la page de confirmation. Si ncessaire, dfinissez une page de paiement valide et/ou une page de paiement non valide. Saisissez l'URL de la page ou slectionnez une entre dans la liste droulante.

10. Si vous crez un formulaire E-Commerce, slectionnez une mise en page de formulaire dans la bote de dialogue correspondante. Cochez ou dcochez les lments selon qu'ils doivent figurer ou non dans la mise en page du formulaire. Vous pouvez dcider de masquer le prix et, si vous utilisez des zones rcurrentes, d'afficher ou de masquer l'image de l'article, la description courte, la description longue, la valeur des options fixes et une quantit fictive dans la zone de saisie. Vous pouvez galement reformater le formulaire l'aide de l'option Reformater le formulaire maintenant. 11. Cliquez sur Terminer.

Ajouter des objets Web dynamiques

187

12.

Pour insrer le formulaire ou le bouton, positionnez le curseur o vous souhaitez que l'lment apparaisse sur la page, puis cliquez.

Pour modifier un formulaire ou un bouton E-Commerce : 1. 2. Double-cliquez sur le formulaire ou le bouton. Modifiez les paramtres d'E-Commerce cran par cran dans la bote de dialogue affiche.

Pour convertir un formulaire standard :

Cliquez sur un formulaire E-Commerce existant et slectionnez Convertir en formulaire.

Utiliser la fusion de la base de donnes


La fusion de base de donnes consiste extraire le contenu d'une base de donnes existante (base de donnes Serif .SDB, Microsoft Access, dBASE), d'un fichier HTML ou Excel, d'une source de donnes ODBC ou d'un fichier texte dlimit, et prsenter les donnes d'une certaine manire, par exemple les insrer dans une zone rcurrente ou dans une zone de code HTML. Le contenu en question, que l'on appelle source de donnes peut tre une liste de diffusion, une liste d'employs, une liste de produits, un inventaire ou une liste des ventes. Toute information qu'il est possible de stocker peut tre utilise comme contenu.

188

Ajouter des objets Web dynamiques

Les fonctions de fusion ne se limitent pas aux donnes texte puisque vous pouvez galement fusionner des donnes d'images, par exemple une photothque numrique, dans des champs spars, ou bien crer une mosaque d'images et de texte en vue d'laborer un catalogue ou un album photos. WebPlus vous permet d'autre part de crer une base de donnes photographique, c'est--dire une base de donnes simple au format .SDB (Serif Database), partir des images contenues dans un dossier. Vous pouvez fusionner des images dans un mme champ ou gnrer automatiquement une zone rcurrente avec un quadrillage adapt aux catalogues et albums photos.

Introduction
Pour vos besoins lmentaires en termes de bases de donnes, WebPlus fournit son propre format de fichier de base de donnes : SDB (Serif Database). Les "fichiers SDB" (ainsi appels parce qu'ils utilisent l'extension *.sdb) conviennent parfaitement pour le stockage de donnes textuelles brutes et sans mise en forme, gnralement utilises pour les listes d'articles. Toutefois, ils peuvent galement convenir d'autres tches. Vous pouvez dresser une liste en crant un nouveau fichier SDB puis en "remplissant les blancs". L'un des avantages offerts par le format de fichier de base de donnes est qu'il vous permet de modifier vos donnes (mais aussi d'ajouter de nouveaux champs et informations) directement depuis WebPlus. Naturellement, les sources de donnes plus complexes prsentent leurs propres avantages et WebPlus permet galement le publipostage de donnes externes dans une panoplie d'autres formats. Vous pouvez importer des fichiers de texte brut (par exemple, exports depuis un programme de messagerie

Ajouter des objets Web dynamiques

189

lectronique), des tableaux extraits de pages Web HTML, des fichiers de bases de donnes issus de programmes tels qu'Access, Outlook, Excel... et mme de serveurs ODBC activs ! Quelle que soit votre source de donnes, une fois celle-ci choisie dans WebPlus, vous avez la possibilit de modifier la liste de fusion (les donnes fusionner) en indiquant les enregistrements inclure ou exclure, mais aussi d'appliquer certaines fonctions avances de filtre/tri afin d'affiner les donnes. Vous devez ensuite insrer des champs fictifs dans des zones rcurrentes de votre page Web ; les donnes seront insres dans ces zones rcurrentes. Vous serez alors prt lancer la fusion : les zones rcurrentes seront alors reproduites dans un nouveau site, les donnes de chacun des enregistrements apparaissant les unes la suite des autres. Des fonctions de fusion avances sont galement disponibles : vous pouvez notamment utiliser des ancres de fusion pour crer des liens hypertextes entre les rsums et les pages principales pour chaque enregistrement. Vous pouvez galement insrer des champs de fusion dans des titres de page pour permettre la navigation entre les listes de rsums et les pages principales. Reportez-vous Paramtres avancs de la fusion de base de donnes. Si vous crez un site d'E-Commerce et que vous souhaitez exploiter les fonctionnalits de fusion de base de donnes, vous pouvez utiliser une base de donnes E-Commerce Serif, ainsi que des formulaires rcurrents Acheter maintenant ou Ajouter au panier. Vous pouvez galement utiliser des zones rcurrentes, mais notez que les formulaires E-Commerce permettent de raliser des transactions directement avec le fournisseur de panier d'achat (par exemple, PayPal, Mal's, etc.) par le biais de boutons Acheter maintenant/Ajouter au panier. (Reportez-vous Utiliser la fusion de base de donnes avec l'E-Commerce dans l'aide de WebPlus.)

Crer une source de donnes


Vous pouvez facilement crer un fichier de base de donnes Serif (*.SDB) dans WebPlus. Aprs avoir rempli cette base, vous pourrez l'utiliser comme source des donnes qui seront fusionnes dans votre page Web.

190

Ajouter des objets Web dynamiques

Pour crer un fichier de base de donnes (*.sdb) : 1. Cliquez sur le bouton Crer une base de donnes de la barre d'outils Base de donnes (vous devez activer celle-ci au pralable).. Assurez-vous que le format Base de donnes Serif (*.SDB) est bien slectionn dans le champ Type, accdez au dossier souhait, attribuez un nom au nouveau fichier, puis cliquez sur Enregistrer. Dans la bote de dialogue Personnaliser la base de donnes, cliquez sur le bouton Insrer. Pour ce faire, entrez le nom d'un champ et cliquez sur le bouton OK. Recommencez l'opration pour tous les champs. Les champs s'affichant dans la bote de dialogue Personnaliser la base de donnes.

2.

3. 4.

5.

Pour supprimer un champ, slectionnez son nom et cliquez sur Supprimer. Pour renommer un champ, slectionnez son nom et cliquez sur Renommer. Pour modifier l'ordre des champs dans la liste, slectionnez le nom d'un champ et cliquez sur Vers le haut ou sur Vers le bas.

6. 7.

Cliquez sur OK. La bote de dialogue Modifier la base de donnes apparat et affiche le premier enregistrement avec six champs visibles. Si ncessaire, faites dfiler l'cran afin d'afficher les autres champs. Comme il s'agit d'une nouvelle base de donnes, les champs apparaissent vides. Vous pouvez prsent saisir des informations (c'est--dire ajouter un enregistrement) ou les saisir ultrieurement. Pour entrer

Ajouter des objets Web dynamiques

191

des informations, saisissez-les simplement dans un champ. Pour crer un nouvel enregistrement, cliquez sur Ajouter. Recommencez l'opration pour chaque enregistrement, puis cliquez sur OK. 8. Cliquez sur OK pour fermer la bote de dialogue Liste de fusion et revenir sur le site. WebPlus vous permet de crer vos propres bases de donnes photographiques afin d'exposer vos crations numriques. Les donnes EXIF sont galement prises en charge. Voir l'Aide de WebPlus pour plus d'informations.

Insrer les zones rcurrentes destines recevoir les donnes


Pour que la fusion donne les rsultats attendus, vous devez insrer le contenu de la source de donnes dans une page Web. WebPlus vous donne la possibilit de crer rapidement une mise en page rcurrente permettant d'agencer des champs fictifs sur la page. Ensuite, WebPlus gnre un nouveau site comportant le nombre de pages ncessaires et remplit les champs en utilisant le texte ou les images issues de la source de donnes spcifie. Vous pouvez crer autant de sources de donnes que vous le souhaitez, mais vous ne pouvez en ouvrir qu'une seule par zone rcurrente. Chaque zone rcurrente est associe sa propre source de donnes ; une page Web ne peut tre occupe que par une seule zone rcurrente. Une mise en page rcurrente commence par une zone rcurrente, savoir une cellule individuelle dont la taille dtermine le nombre d'enregistrements prsents sur votre page, en hauteur et en largeur. Au sein de cette zone rcurrente, vous pouvez insrer les lments de votre choix, par exemple :

192

Ajouter des objets Web dynamiques

un ou plusieurs champs de texte dont les donnes seront extraites du mme enregistrement ; un ou plusieurs champs image o apparatront les images issues d'un enregistrement de donnes spcifique ; d'autres objets, tels que du texte sur courbe, des Formes pleines... bref, tout ce que vous souhaitez !

Il vous suffit de crer la zone rcurrente et d'insrer les champs (ou d'autres lments) ; WebPlus se charge de les dupliquer sur la base de la mise en page en mosaque que vous avez dfinie, puis de fusionner les donnes de la source indique dans un nouveau site Web. Chaque zone rcurrente est reproduite dans le nouveau site Web, les donnes des diffrents enregistrements apparaissant les unes la suite des autres. Pour crer une zone rcurrente : 1. 2. Slectionnez une source de donnes approprie. Insrer une zone rcurrente Cliquez sur le bouton de la barre d'outils Base de donnes (vous devez activer celle-ci au pralable). Dans la bote de dialogue Slectionner une base de donnes, cliquez sur le bouton Parcourir pour slectionner une source de donnes, sur le bouton Ouvrir, puis sur OK. Vous pouvez galement crer une base de donnes ce stade de la procdure : pour ce faire, cliquez sur le bouton Nouveau (reportez-vous Crer une source de donnes ci-dessus). La bote de dialogue Rglage de la matrice de la zone rcurrente affiche une mise en page initiale compose d'une mosaque 1x4 : une zone rcurrente sur la largeur de la page et quatre sur sa hauteur. La zone d'aperu situe droite reflte les paramtres slectionns dans la bote de dialogue.

3.

4.

Ajouter des objets Web dynamiques

193

5.

Vous pouvez dfinir des proprits spcifiques pour la zone rcurrente (unit de base) au sein de la bote de dialogue ou fermer celle-ci et ajuster manuellement la taille et la forme de votre zone. Vous pouvez galement combiner ces deux mthodes en rouvrant la bote de dialogue aussi souvent que vous le souhaitez.

Dans cette bote de dialogue, prcisez la Mise en page de votre grille, en indiquant le nombre de zones rcurrentes souhaites sur la largeur et sur la hauteur. Vous pouvez modifier d'autres paramtres, parmi lesquels la position gauche et en haut par rapport la page, la largeur et la hauteur, de la zone rcurrente ainsi que les carts facultatifs horizontaux ou verticaux entre les zones rcurrentes. Vous pouvez activer l'option Agrandir la page pour l'adapter la matrice pour que tous les enregistrements s'affichent sur une mme page (option tout particulirement recommande dans le cas d'une liste de rsums tenant sur une seule ligne) l'option de mise en page Verticale tant alors ignore. Vous pouvez faire glisser la zone rcurrente sur la page afin de la dplacer ou faire glisser l'une de ses poignes afin de la redimensionner.

Lorsque vous enregistrez un site, WebPlus "mmorise" la source de donnes utilise et l'ouvre automatiquement "en arrire-plan" chaque fois que vous accdez votre page Web. Autrement dit, tant que vous utilisez la mme source, il n'est pas ncessaire de l'ouvrir chaque fois. Pour modifier une mise en page rcurrente existante : 1. Slectionnez la zone rcurrente, puis cliquez sur le bouton Mise en page de la zone rcurrente de la barre d'outils contextuelle.

194

Ajouter des objets Web dynamiques

2.

La bote de dialogue Rglage de la matrice de la zone rcurrente s'affiche, vous permettant de modifier la mise en page de la zone rcurrente.

Ouvrir une autre source de donnes


WebPlus vous permet non seulement de crer un fichier de base de donnes Serif, mais aussi d'ouvrir un autre fichier de base de donnes Serif existant ou une autre source de donnes externe, telle qu'un fichier texte (de largeur fixe ou dlimit par des virgules), une autre base de donnes, une feuille de calcul, etc. Vous pouvez modifier, slectionner, filtrer et/ou trier les donnes fusionner. Pour ouvrir une autre source de donnes : 1. Slectionnez la zone rcurrente, puis cliquez sur le bouton Modifier la base de donnes de la barre d'outils contextuelle. Dans la bote de dialogue qui s'affiche, cliquez sur le bouton Parcourir, cliquez sur la flche vers le bas en regard de la liste des formats de fichier (situe ct de la liste droulante Nom du fichier), slectionnez le type de source de donnes que vous souhaitez ouvrir, puis cliquez sur Ouvrir. Selon le type de source de donnes slectionn, suivez les instructions fournies par WebPlus. Par exemple :

2.

Si la source de donnes se compose de plusieurs tables : vous serez invit prciser la table importer. Si vous avez slectionn un fichier texte (.txt, .csv, .tab, .asc) avec des donnes source dlimites ou de longueur fixe : WebPlus ouvre la bote de dialogue Format des donnes, ainsi qu'un aperu des donnes du fichier slectionn.

Ajouter des objets Web dynamiques

195

Dans le premier cran, indiquez Dlimit ou Largeur fixe. Si le premier enregistrement de donnes rpertorie les en-ttes des diffrentes colonnes, activez l'option La premire ligne contient les en-ttes des colonnes. Si votre fichier source utilise un sparateur de champ (par exemple, des guillemets sans lesquelles un champ contenant des virgules, par exemple, "14, rue Voltaire, Appt. 3", serait considr comme une suite de champs spars), slectionnez le caractre appropri dans la liste. Cliquez sur Suivant. Le contenu de l'cran suivant varie selon que vous aurez slectionn un fichier dlimit ou largeur fixe. Vous pouvez soit prciser le caractre de sparation, soit vrifier (et corriger, le cas chant) les enchanements entre les champs de donnes. Assurez-vous que l'aperu des donnes est correct, puis cliquez sur Terminer. Remarque : si vous souhaitez modifier la mise en forme de vos donnes aprs avoir ferm l'assistant, ouvrez de nouveau le fichier source et parcourez la bote de dialogue Format des donnes en modifiant les paramtres selon vos besoins.

3.

Une fois ces tapes intermdiaires termines, la bote de dialogue Slectionner une base de donnes apparat. Si vous cliquez sur Modifier, la bote de dialogue Liste de fusion s'affiche, prsentant les donnes sous forme de lignes et de colonnes. Elle vous permet de slectionner, filtrer et/ou trier les donnes fusionner. Vous pouvez apporter les modifications ncessaires ds prsent ou ultrieurement. Cliquez sur OK pour fermer la bote de dialogue Liste de fusion et revenir votre page Web. La source de donnes ouverte prcdemment demeure la source de donnes active.

4.

196

Ajouter des objets Web dynamiques

Modifier des fichiers de base de donnes


Chaque enregistrement d'un fichier de base de donnes (*.sdb) contient 20 champs standard. En ce qui concerne les donnes stockes au format .SDB, la bote de dialogue Modifier la base de donnes vous permet de crer ou de supprimer des enregistrements, de saisir des informations, de localiser les occurrences d'un texte spcifique ou de modifier l'ordre des champs, ainsi que d'ajouter de nouveaux champs et des donnes. Les autres fichiers de bases de donnes ne sont pas modifiables. Pour modifier un fichier de base de donnes (*.sdb) : 1. Slectionnez la zone rcurrente, puis cliquez sur le bouton Modifier la base de donnes de la barre d'outils contextuelle. Dans la bote de dialogue ainsi ouverte, cliquez sur le bouton Modifier. (Si celui-ci apparat gris, la source de donnes active n'est pas un fichier SDB.) La bote de dialogue Liste de fusion s'affiche, prsentant les donnes sous forme de lignes et de colonnes. Elle vous permet de slectionner, filtrer et/ou trier les donnes fusionner. Vous pouvez apporter les modifications ncessaires ds prsent ou ultrieurement. Cliquez sur le bouton Modifier. Le premier enregistrement de la base de donnes en cours apparat, avec six champs (faites dfiler l'cran pour afficher les autres champs). Utilisez la bote de dialogue Modifier la base de donnes pour modifier les donnes.

2.

3.

4.

Pour entrer des informations, saisissez-les simplement dans un champ. Chaque champ est limit un maximum de 255 caractres. Pour crer un nouvel enregistrement, cliquez sur Ajouter

Ajouter des objets Web dynamiques

197

Utilisez les boutons flchs pour passer d'un enregistrement l'autre ou saisissez un numro d'enregistrement, puis appuyez sur Entre. Pour supprimer l'enregistrement actif, cliquez sur Supprimer. Si vous cliquez sur Supprimer sur le premier enregistrement, ses informations sont effaces mais le formulaire d'enregistrement est conserv. Pour trouver des occurrences d'un texte spcifique, cliquez sur Rechercher... et indiquez le Champ o le texte doit tre recherch. La liste des enregistrements affiche tout texte apparaissant dans ce champ sur l'intgralit de la base de donnes. Double-cliquez alors sur une entre (ou slectionnez-la et cliquez sur OK) pour consulter cet enregistrement spcifique. Pour personnaliser les champs de la base de donnes, cliquez sur Personnaliser. Dans la bote de dialogue, cliquez sur Insrer pour crer un nouveau champ ou slectionnez un champ et cliquez sur Supprimer pour le supprimer. Pour renommer un champ, slectionnez-le et cliquez sur Renommer. Vous pouvez galement cliquer sur Dplacer vers le haut ou sur Dplacer vers le bas pour modifier l'ordre des champs dans la liste.

5.

Pour actualiser la liste et quitter la bote de dialogue, cliquez sur OK. La fermeture de la bote de dialogue Modifier la base de donnes n'entrane pas la fermeture du fichier de base de donnes. Celui-ci demeure la source de donnes active pour la fusion. En revanche, toutes les modifications apportes sont enregistres sur le disque ce stade.

198

Ajouter des objets Web dynamiques

Insrer des paramtres fictifs pour vos donnes


Pour fusionner les donnes d'une source de donnes structure dans une page Web, vous devez ajouter des champs fictifs dans la zone rcurrente que vous avez cre (voir ci-dessus) afin d'indiquer WebPlus quels champs doivent tre utiliss. Il existe deux types de paramtres fictifs. Les champs texte permettent, comme leur nom l'indique, de manipuler des donnes texte, telles que des listes d'adresses ; les champs image permettent d'ajouter des images qui seront rcupres au moyen du chemin d'accs enregistr dans votre base de donnes. Pour insrer un champ fictif de type texte ou image : 1. Slectionnez la zone rcurrente, puis cliquez sur le Insrer un champ texte ou Insrer bouton un champ image de la barre d'outils contextuelle. Une bote de dialogue s'affiche, prsentant une liste de champs (de type texte ou image) disponible dans la source de donnes active. 2. 3. Dans la liste droulante, double-cliquez sur le champ insrer (ou slectionnez-le et cliquez sur Insrer). Le champ s'affiche dans votre page Web. La bote de dialogue demeure ouverte afin que vous puissiez insrer d'autres champs, le cas chant. Faites glisser chaque champ de faon le positionner dans les limites de la zone rcurrente (redimensionnez-le si ncessaire). Il se produit alors un "verrouillage" subtil (avec magntisme activ ou dsactiv) au moment o le champ se fixe sur la zone rcurrente. Le contenu du champ apparat gris : dornavant, lorsque vous ferez glisser la zone rcurrente, les lments qu'elle contient se dplaceront galement.

4.

Ajouter des objets Web dynamiques

199

Dans le cas d'un champ image, vous pouvez rgler les proprits d'affichage, telles que la taille de l'image et l'alignement au sein du champ. Pour ce faire, cliquez sur le champ avec le bouton droit de la souris et slectionnez Proprits du cadre. L'option Taille minimale convient plus particulirement aux champs image. Vous pouvez galement redimensionner le cadre en faisant glisser ses poignes. 5. Pour quitter la bote de dialogue, cliquez sur Fermer.

Slectionner, filtrer et trier la liste de fusion


Quel que soit le type de source de donnes utilis, vous pouvez, tout moment, visualiser vos donnes sous la forme de lignes et de colonnes. Vous avez galement la possibilit de personnaliser la liste de fusion (les donnes fusionner) en prcisant les enregistrements inclure ou exclure. Vous pouvez procder "manuellement" ou l'aide des fonctions puissantes de tri et de filtre. Celles-ci vous permettent d'inclure certains enregistrements spcifiques ou d'organiser vos enregistrements en fonction du contenu de certains champs spcifiques. Par exemple, dans le cas d'une liste d'adresses ou une base de donnes de contacts, vous pouvez trier les enregistrements sur le code postal, puis sur le nom. Pour modifier la liste de fusion active : 1. Slectionnez la zone rcurrente, puis cliquez sur le bouton Modifier la base de donnes de la barre d'outils contextuelle. Utilisez le bouton Modifier pour accder la bote de dialogue Liste de fusion. Indiquez les enregistrements inclure ou exclure (cochez ou dcochez les cases correspondantes) et utilisez les fonctions de filtre/tri avances (par le biais du bouton Filtre) pour affiner la slection. Cliquez sur OK.

2. 3.

4.

200

Ajouter des objets Web dynamiques

Fusionner et publier
Aprs avoir slectionn les enregistrements fusionner (votre liste de fusion) et insr tous les champs fictifs ncessaires comme expliqu ci-dessus, vous tes prt fusionner le contenu de la base de donnes dans un site Web temporaire, puis publier le site. Pour fusionner les donnes dans un nouveau site Web : 1. 2. Fusionner dans un nouveau site dans Cliquez sur la barre d'outils contextuelle. WebPlus gnre ensuite un nouveau site dans une fentre distincte, en reproduisant la zone rcurrente autant de fois que le nombre d'enregistrements prsents dans vos donnes. La mise en page reprend le quadrillage dfini. Chaque cellule inclut les donnes d'un seul enregistrement, en suivant l'ordre des enregistrements tabli dans la liste de fusion. Si ncessaire, WebPlus insre de nouvelles pages afin de prendre en compte l'ensemble des enregistrements. la zone rcurrente n'est plus prsente. Elle a t convertie en un quadrillage fond sur les donnes fusionnes, lesquelles remplacent les champs avec paramtres fictifs. Si vous souhaitez modifier les proprits d'affichage, par exemple la taille de l'image et l'alignement d'un cadre d'image spcifique, cliquez sur ce cadre avec le bouton droit de la souris, puis slectionnez Proprits du cadre. Le site original demeure ouvert dans sa propre fentre. Veillez le sauvegarder, au cas o vous devriez rpter ce processus de fusion avec un autre jeu de donnes ! Si le site produit ne vous satisfait pas, revenez simplement l'original, modifiez-le, puis relancez le processus de fusion.

Ajouter des objets Web dynamiques

201

Pour publier votre site : Vrifiez que le site dans lequel la base de donnes a t fusionne est actif, choisissez Publier le site dans le menu Fichier, puis slectionnez l'une des Publier sur le Web. Par dfaut, la fusion est effectue automatiquement avant la publication. Si vous ne souhaitez pas que la fusion soit effectue chaque fois que vous publiez le site, dsactivez l'option Fusionner avant la publication de la bote de dialogue Publier sur le Web.

Les objets intelligents


Pour les fonctions Web interactives modernes (compteurs, forums, blogs, rservation de ressources, etc.), WebPlus utilise les objets intelligents ct serveur placs sur la page. Les objets intelligents stockent sur le serveur Serif scuris les donnes recueillies relatives aux visiteurs de votre site Web. Ces objets sont disponibles dans les Ressources Web Serif, un service en ligne scuris permettant non seulement de crer et d'insrer des objets intelligents, mais galement de stocker et de ger les donnes d'objets une fois que votre site est publi et en ligne. Examinons les diffrents objets intelligents disponibles parmi les Ressources Web et leur rle. Nom Rle Permet d'indiquer combien de personnes consultent actuellement la page Web. Visiteurs connects

202

Ajouter des objets Web dynamiques

Blog

Un blog est un journal de bord intgr votre site Web dans lequel vous pouvez faire figurer des articles rdigs dans un diteur de texte simple utiliser. Les visiteurs de votre page Web peuvent commenter vos articles. Si vous dcidez de crer un blog, vous pouvez :

ajouter votre profil personnel ; ajouter des liens vers des sites de partage de signets ; utiliser des rtroliens pour tablir des rfrences croises entre plusieurs blogs (il est possible galement d'utiliser des rtroliens reus) ; classer les articles en catgories 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 rcents) par le biais de lecteurs de flux RSS ; Mettre en uvre le systme de protection anti-spam CAPTCHA. appliquer un style visuel (thme) votre blog ; Utiliser des groupes d'diteurs pour la publication d'articles multi-auteurs (p. 224).

Ajouter des objets Web dynamiques

203

Forum

Vous avez la possibilit d'ajouter un forum de discussion votre site. Les forums s'articulent autour de "fils de discussion" et peuvent tre consults en mode Plein cran. Si vous dcidez de crer un forum, vous pouvez : crer diffrentes catgories (par exemple, Automobile) contenant plusieurs sous-forums (Vhicules anciens, Tuning, Sport automobile, etc.) ;

tablir un accs utilisateur pour les utilisateurs et les modrateurs (p. 224) ; dfinir le niveau de confidentialit du forum (public ou priv) ; appliquer un thme (style) l'objet forum pris dans son ensemble ; crer, dfinir et attribuer des rangs d'utilisateur ; dfinir 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. Un dcompte du nombre de visites de la page courante (rinitialis selon les besoins). Diffrents styles peuvent tre adopts.

Compteur de visites

204

Ajouter des objets Web dynamiques

Infos

Vous pouvez ajouter une fentre 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 mdias et mme l'dition du code HTML source. Vous pouvez tablir un questionnaire en ligne pour connatre les opinions des visiteurs de votre site. Permet au dveloppeur 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 catgories, crer, diter et supprimer. Les visiteurs du site peuvent commenter et attribuer des notes aux articles. Les couleurs de votre SGC peuvent tre personnalises. Hberge la rservation en ligne de chambres d'htel, de salles de runion, de salles de rptition, de places de thtre, etc. Rservez plusieurs heures ou jours, priodiquement, et avec des options de prix pour les diffrents groupes d'ges. Sert de fentre de tchat interactive, similaire Windows Messenger. Permet vos visiteurs de discuter entre eux.

Sondage

Systme de gestion du contenu (SGC)

Gestionnaire de rservation de ressources

Messagerie instantane

Liste d'utilisateurs

L'objet intelligent Liste d'utilisateurs propose deux modes (que vous pouvez slectionner dans une fentre contextuelle) :

Ajouter des objets Web dynamiques

205

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 vnement, des renseignements, etc. Les listes peuvent tre gres manuellement ou par inscription automatique. Mode Accs utilisateur : Contrle l'accessibilit aux pages, aux forums, aux blogs et au CMS en se basant sur des groupes d'utilisateurs. Reportezvous Accs utilisateur p. 213, pour plus d'informations.

Mettre en uvre le systme de protection anti-spam CAPTCHA lors de l'enregistrement des utilisateurs. Crer 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'accs des utilisateurs.

tant donn que les objets intelligents sont stocks dans les Ressources Web Serif, vous pouvez utiliser les boutons d'aide associs (lors de la cration et la gestion des objets intelligents) pour obtenir de plus amples informations.

206

Ajouter des objets Web dynamiques

Pour des raisons de scurit, 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 crer un compte Ressources Web.

Si votre adresse e-mail est dj connue de Serif (vous venez de vous enregistrer ou vous l'avez fait prcdemment), quelques questions vous seront poses pour achever l'enregistrement de votre compte. Si vous ne vous tes jamais inscrit auprs de Serif, vous devrez rpondre davantage de questions en suivant les instructions affiches l'cran.

Pour crer un compte Ressources Web Serif : 1. 2. 3. Outil Objet intelligent de la Cliquez sur le bouton barre d'outils Objets Web. Dans la bote de dialogue de connexion, cliquez sur le lien Crer compte sous les zones de saisie. Dans la bote de dialogue suivante, saisissez votre adresse email courante, votre nom de connexion et votre mot de passe deux fois. Vous devez lire et accepter les termes et conditions Serif (cochez la case correspondante). Cliquez sur le bouton S'inscrire. Une bote de dialogue supplmentaire 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 spciales. Un message de confirmation sera envoy votre adresse lectronique. Ds 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).

4. 5.

6.

Ajouter des objets Web dynamiques

207

Pour nettoyer les informations sur le compte :

Slectionnez Outils/Options et cliquez sur Purger Dtails des comptes dans le menu Options/Gnral. Les informations de connexion aux Ressources Web Serif seront effaces et la connexion ne pourra plus tre tablie automatiquement. Vous devrez saisir ces informations la prochaine fois que vous souhaiterez accder au service. Assurez-vous donc de ne pas avoir oubli votre mot de passe.

Pour accder aux Ressources Web : 1. 2. Outil Objet intelligent de la Cliquez sur le bouton barre d'outils Objets Web. l'invite, saisissez votre identifiant et votre mot de passe. Cochez la case Mmoriser les informations pour accder directement aux Ressources Web par la suite (sans cran de connexion). Cliquez sur le bouton Connexion. La bote de dialogue Objets intelligents apparat. Vous pouvez vrifier les informations de votre compte dans la bote de dialogue Objets intelligents en cliquant sur le bouton Mon compte.

3.

Crer des objets intelligents


Considrons d'une faon gnrale les objets intelligents comme les lments que vous utiliserez sur votre page comme indiqu prcdemment. Ils ne sont pas ajouts directement sur la page partir des Ressources Web Serif, mais ils sont tout d'abord ajouts dans votre bibliothque d'objets personnelle (les objets peuvent tre grs et modifis dans la bibliothque). Les objets peuvent ensuite tre ajouts immdiatement ou ultrieurement dans la page Web.

208

Ajouter des objets Web dynamiques

Certains objets intelligents ne peuvent tre utiliss que si un autre objet intelligent a t cr au pralable. Par exemple, vous ne pouvez utiliser l'objet intelligent Forum que si vous avez cr l'objet intelligent Liste d'utilisateurs au pralable. Vous pouvez organiser les objets intelligents dans des profils classs, ce qui est particulirement utile si vous grez plusieurs sites Web, car vous pouvez grouper les objets intelligents dans un profil ddi au site. Pour crer des profils d'objets intelligents : 1. Dans la bote de dialogue Objets intelligents, cliquez sur le bouton Grer les profils en bas du volet Ma bibliothque d'objets intelligents. Cliquez sur Nouveau profil, puis entrez un nouveau Nom dans la zone de texte. Cliquez sur Enregistrer, puis sur Quitter.

2. 3.

Le profil est ajout en haut du volet Ma bibliothque d'objets intelligents. Vous pouvez alors ajouter par glisser-dposer des objets intelligents existants votre nouveau profil. Pour ajouter un objet la bibliothque : 1. 2. Dans la bote de dialogue Objets intelligents, cliquez sur Nouveau. Dans la bote de dialogue Crer un objet intelligent, utilisez la barre de dfilement pour parcourir la liste, puis slectionnez un objet intelligent. (Facultatif) Si vous souhaitez utiliser les objets intelligents dans une langue autre que le franais, slectionnez la langue souhaite dans le menu droulant Langue.

3.

Ajouter des objets Web dynamiques

209

4.

Slectionnez OK. La bote de dialogue de cration qui s'affiche propose des options spcifiques l'objet intelligent slectionn. Dans la fentre qui apparat :

5.

Dfinissez le Nom de l'objet. (Facultatif) Si vous avez pralablement cr un Profil, slectionnez-le dans le menu droulant. (Facultatif) Ajoutez un lien Filtre hors site (l'accs l'objet sera limit au domaine indiqu et empchera la copie de l'URL). (Facultatif) Vous pouvez aussi modifier les rglages propres l'objet. Pour certains objets, vous pouvez aussi dfinir les lgendes, les couleurs (du corps, du texte et des bordures), ainsi que l'paisseur du contour, le cas chant.

6.

Cliquez sur Crer.

L'objet nomm apparat dans la liste qui s'affiche dans le volet gauche de la bote de dialogue Mes objets intelligents.

210

Ajouter des objets Web dynamiques

Tous les types d'objets intelligents peuvent tre insrs dans une page Web. Toutefois, si vous crez par exemple un forum ou un blog, il est plus judicieux de mettre en place un accs direct aux ressources Web Serif, (par l'intermdiaire de liens hors ligne ou de liens hypertextes, voir p. 66 ou p. 100, respectivement), plutt que d'insrer l'objet dans la page Web. Le principal avantage de ce systme 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 dfiler la fentre). Pour ajouter un objet intelligent votre page web : 1. Slectionnez l'objet souhait dans le volet gauche de la bote de dialogue Objets intelligents et cliquez sur le bouton Insrer.

2.

Pour insrer l'objet sa taille par dfaut, placez le curseur l'emplacement o vous souhaitez que l'objet apparaisse sur la page, puis cliquez.

Un aperu de l'objet intelligent s'affiche automatiquement sur la page, ce qui vous permet de voir quoi il ressemblera une fois le site publi.

Modifier des objets intelligents


Lorsqu'un objet est cr, il peut tre modifi dans la bibliothque d'objets intelligents ou directement sur la page. Vous aurez peuttre besoin de modifier l'apparence de l'objet par rapport ses rglages d'origine, de corriger une question d'un sondage ou de rinitialiser un compteur. La modification d'un objet ne change que l'objet lui-mme et ne modifie pas les donnes saisies. Les options permettant de crer et de modifier des objets intelligents sont les mmes.

Ajouter des objets Web dynamiques

211

Pour modifier un objet intelligent dans la bibliothque :

Dans la bote de dialogue Objets intelligents, cliquez sur le bouton Modifier en bas du volet Ma bibliothque d'objets intelligents.

Pour modifier un objet intelligent dans la page :

Double-cliquez sur l'objet pour afficher sa bote de dialogue de modification. Si vous modifiez un objet sur la page web, les modifications apparaissent aussi dans la bibliothque d'objets et vice versa.

Appliquer des couleurs aux objets intelligents Vous pouvez modifier les couleurs de votre blog, de votre forum ou du SCG en cours d'dition ou de gestion. Chaque type d'objet intelligent prsente des paramtres de couleurs personnaliss : Objet intelligent Blog Forum SGC Comment configurer la couleur Liste droulante Style visuel de la bote de dialogue diter - Nouveau blog. Liste droulante Thmes du forum de la bote de dialogue Grer - Mon forum. Boutons Titre, Corps et Infos de la bote de dialogue diter - Nouveau SGC.

Outre ces paramtres de couleurs, vous pouvez remplacer la couleur du texte et des liens hypertextes de votre objet intelligent par celle du texte et des liens hypertextes de votre site. Ainsi, vos objets intelligents seront parfaitement adapts l'apparence de votre site. Par dfaut, la couleur du texte et des liens hypertextes de votre site est applique.

212

Ajouter des objets Web dynamiques

Pour remplacer la couleur du texte et des liens hypertextes d'un objet intelligent : 1. 2. 3. Dans le menu Fichier, cliquez sur Proprits du site.... Dans la bote de dialogue, cliquez sur Fonctions. Cochez Remplacer les couleurs des objets intelligents.

Si vous ne modifiez pas les listes droulantes Texte et Liens hypertextes, les combinaisons de couleurs dfinies (indiques par des numros) seront utilises. Toutefois, vous pouvez slectionner d'autres couleurs ou combinaisons de couleurs.

Grer 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 grer les donnes de l'objet, telles qu'elles sont collectes lors de la publication du site Web. Certains objets intelligents, tels que les compteurs n'ont pas besoin d'tre grs car ils ne font que dcompter chaque passage sur le site (en revanche, les compteurs peuvent tre rinitialiss). D'autres objets intelligents plus complexes, tels que les blogs/forums, les gestionnaires de ressources, les listes d'utilisateurs et les messageries instantanes, contiennent des donnes donnes recueillies relatives aux visiteurs : des commentaires d'articles, des adresses e-mail, les rsultats des sondages et un journal des discussions. L'objet intelligent SGC ne peut tre gr qu' partir du navigateur Web, depuis l'URL www.serifwebresources.com. Pour grer un objet intelligent partir de la bibliothque :

Dans la bote de dialogue Objets intelligents, cliquez sur le bouton Grer en bas du volet Ma bibliothque d'objets intelligents. Les options de gestion diffrent en fonction du type d'objet intelligent.

Ajouter des objets Web dynamiques

213

Voir l'aide de WebPlus pour plus dinformations sur les fonctions de gestion. Pour grer un objet intelligent directement via Internet :

Connectez-vous www.serifwebresources.com pour grer tous vos objets intelligents indpendamment de votre site WebPlus. Utilisez vos paramtres habituels de connexion aux ressources Web.

Supprimer des objets intelligents


Pour supprimer un objet de la bibliothque :

Slectionnez l'entre de l'objet dans le panneau Ma bibliothque d'objets intelligents et cliquez sur le bouton Supprimer. Un message de confirmation s'affiche.

Toutes les pages Web transfres qui comportent lobjet affiche un espace vide jusqu ce que lobjet soit supprim de la page web correspondante dans WebPlus et que la page Web soit nouveau transfre. Pour supprimer un objet de la page :

Slectionnez l'objet et appuyez sur la touche Suppr.

Accs utilisateur
L'accs utilisateur vous permet d'appliquer des mesures de scurit travers votre site Web, soit pour limiter l'accs des pages spcifiques, soit pour contrler l'accs utilisateur aux forums et autres fonctions des ressources Web Serif.

214

Ajouter des objets Web dynamiques

Pour la scurit des pages : identifiez-vous sur un page protge par mot de passe ou via un champ d'identification sur la page. Cette mthode est gnralement employe sur les sites Web personnels ou de petites entreprises. Il est possible de laisser la majorit du site en accs libre, avec un nombre limit de pages accessibles des visiteurs Web slectionns. Par exemple, une page de galerie de photos de famille peut tre rendue "prive" tout en tant partage par vos proches (par la saisie d'un mot de passe). Les informations d'identification sont conserves dans un groupe d'utilisateurs associ la page qui contient une liste d'utilisateurs autoriss ; les utilisateurs sont ajouts manuellement par l'administrateur du site Web, et les nouveaux utilisateurs peuvent s'inscrire. Pour la scurit des objets intelligents : accs utilisateur aux forums, aux blogs et au SGC. (p. 224)

Forums : pour la gestion des utilisateurs et la modration de groupes. Blogs : pour ajouter et supprimer des articles via un Groupe des diteurs. SGC : pour administrer les articles de votre SGC.

L'accs utilisateur 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 mthode d'identification. Les Ressources Web Serif sont un service en ligne scuris, hberg par Serif, qui conserve les objets intelligents (p. 201) et toutes les donnes gnres. Vous pouvez grer votre objet intelligent Liste d'utilisateurs de la mme manire que les autres objets intelligents et tout moment, partir de WebPlus ou via www.serifwebresources.com.

Ajouter des objets Web dynamiques

215

Pour un accs utilisateur russi sur votre site Web, les tapes suivantes sont essentielles :

Configurer votre objet intelligent Liste d'utilisateurs Ajouter des utilisateurs (manuellement ou par inscription) Activer l'accs utilisateur Ajouter un champ d'identification Accs utilisateur avanc

Configurer votre objet intelligent Liste d'utilisateurs


Vous devrez d'abord crer un objet intelligent Liste d'utilisateurs puis un ou plusieurs groupes connects cet objet intelligent. Normalement, un objet intelligent par site suffit. Les diffrents groupes permettent de contrler l'accs des pages spcifiques ou des ressources d'objets intelligents. Pour crer un objet intelligent Liste d'utilisateurs : 1. 2. Outil Objet intelligent de la Cliquez sur le bouton barre d'outils Objets Web. Connectez-vous aux Ressources Web Serif (voir Les objets intelligents, p. 201). Cela prsuppose que vous disposez d'un identifiant valide ; sinon, vous devez vous inscrire. Dans la bote de dialogue, cliquez sur le bouton Nouveau en bas du volet Ma bibliothque d'objets intelligents.

3.

216

Ajouter des objets Web dynamiques

4.

Dans la bote de dialogue, utilisez la barre de dfilement pour parcourir la liste d'objets intelligents, puis slectionnez Liste d'utilisateurs, et cliquez sur OK. Dans la bote de dialogue contextuelle, slectionnez Accs utilisateur. Dans cette bote de dialogue, attribuez un nom votre objet intelligent, enregistrez-le dans un profil, puis modifiez la couleur et la police du titre, du texte/des tiquettes, des boutons, ou de la bordure. Cliquez sur Crer. Le nouvel objet intelligent figure dans votre bibliothque d'objets intelligents. Cliquez sur Quitter pour vous dconnecter des ressources Web Serif.

5. 6.

7. 8.

Aprs avoir cr votre objet intelligent, vous pouvez lui associer des groupes d'utilisateurs l'aide de la fonction Grer. Pour contrler la connexion et la scurit : 1. 2. Outil Objet intelligent de la Cliquez sur le bouton barre d'outils Objets Web. Slectionnez l'objet intelligent Liste d'utilisateurs dans le volet Ma bibliothque d'objets intelligents, puis cliquez sur le bouton Grer pour afficher la bote de dialogue Utilisateurs. Pour activer une identification des utilisateurs par inscription l'objet intelligent, cochez la case Activer l'identification des utilisateurs. Un lien S'inscrire apparat alors dans un champ d'identification. Pour une scurit accrue lors de l'inscription des utilisateurs, cochez la case CAPTCHA activ. CAPTCHA est une technique anti-spam qui affiche un texte gnre arbitrairement par le serveur ; le visiteur Web saisit le texte qui est ensuite valid.

3.

4.

Ajouter des objets Web dynamiques

217

5.

Entrez une URL de redirection dans le champ Rediriger aprs la connexion si vous souhaitez diriger l'utilisateur vers une page Web spcifique aprs une connexion russie. Cliquez sur Mettre jour.

6.

Pour crer un groupe d'utilisateurs : 1. 2. Dans la bote de dialogue, cliquez sur Groupes dans le menu suprieur. Dans la bote de dialogue Crer un groupe, entrez un nom de groupe correspondant l'utilisation prvue pour le groupe, par exemple "AccsPhotos". Cliquez sur le bouton Crer un groupe, vrifiez les paramtres de la bote de dialogue, puis cliquez sur Termin. Le groupe est ajout la liste droulante Groupe.

3.

Pour grer un groupe d'utilisateurs :

Slectionnez le nom du groupe dans la liste droulante Groupe, puis cliquez sur Grer un groupe.

Dans la bote 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.

218

Ajouter des objets Web dynamiques

Ajouter des utilisateurs (manuellement ou par inscription)


ajouter des utilisateurs manuellement En gnral, l'ajout manuel d'utilisateurs convient bien dans le cas d'environnements contrls, 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 spar par des virgules par l'administrateur Web. Il est possible d'utiliser une identification unique (tout le monde utilise les mmes coordonnes de connexion) ou de crer une connexion par utilisateur, pour un contrle accru (p. ex., pour les listes de membres). identification des utilisateurs par inscription Inversement, l'identification des utilisateurs est destine un accs public o il est difficile de contrler les utilisateurs. L'utilisateur peut simplement s'enregistrer puis s'identifier l'aide de leurs donnes de connexion. L'administrateur Web a toujours la possibilit de grer ces utilisateurs l'intrieur de leurs groupes par l'intermdiaire de l'objet intelligent Liste d'utilisateurs. Cette mthode requiert l'insertion d'un champ d'identification sur la page (gnralement une maquette). Vous pouvez ajouter plusieurs utilisateurs au mme groupe d'utilisateurs. Le mme utilisateur peut appartenir plusieurs groupes d'utilisateurs.

Ajouter des objets Web dynamiques

219

Pour ajouter un utilisateur manuellement : 1. 2. Cliquez sur le bouton Outil Objet intelligent de la barre d'outils Objets Web. Slectionnez l'objet intelligent Liste d'utilisateurs dans le volet Ma bibliothque d'objets intelligents, puis cliquez sur le bouton Grer de l'objet pour afficher la bote de dialogue Utilisateurs. Dans la rubrique Ajouter un utilisateur dans le bas de la bote de dialogue, saisissez l'adresse lectronique de l'utilisateur dans le champ E-mail.

3.

Lorsque Demander l'activation est coch, un lien d'activation est envoy par courrier lectronique l'utilisateur en mme temps qu'un mot de passe autognr. Lorsque l'option n'est pas coche, un mot de passe gnr automatiquement est envoy. 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 mthode (tlphone ou verbalement). 4. Cliquez sur le bouton Ajouter un utilisateur. L'utilisateur est ajout la liste d'utilisateurs dans la section Utilisateurs.

220

Ajouter des objets Web dynamiques

5. 6.

Pour affecter des utilisateurs un groupe, cliquez sur Groupes dans le menu suprieur. Slectionnez le groupe dans la liste droulante Groupe, puis ajoutez l'utilisateur slectionn 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 faon ce que les utilisateurs s'inscrivent eux-mmes, vous vitant de devoir ajouter et grer manuellement tous les utilisateurs comme dcrit ci-dessus. Utilisez pour cela les ressources Web Serif. Pour activer l'identification des utilisateurs par inscription : Cette mthode 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). 1. 2. Cliquez sur le bouton Outil Objet intelligent de la barre d'outils Objets Web. Slectionnez l'objet intelligent Liste d'utilisateurs dans le volet Ma bibliothque d'objets intelligents, puis cliquez sur le bouton Grer de l'objet pour afficher la bote de dialogue Utilisateurs. Cliquez sur Groupes dans le menu suprieur. Dans la bote de dialogue, slectionnez un groupe existant dans la liste droulante Groupe, puis cliquez sur Grer un groupe.

3. 4.

Ajouter des objets Web dynamiques

221

5.

Cochez Ajouter de nouveaux utilisateurs la connexion : les informations de connexion des utilisateurs seront ajoutes au groupe d'utilisateurs lors de l'enregistrement. Lorsque cette option est coche, la connexion donne accs tous les groupes dont l'identification des utilisateurs est active. Dans le cas contraire, les pages accs limit seront protges. Cliquez sur Mettre jour un groupe, puis sur Termin.

6.

Activer l'accs utilisateur


Pour activer l'accs utilisateur sur votre page Web : 1. 2. Lorsque la page Web est affiche, cliquez sur Scurit de la page dans la barre d'outils contextuelle. Cochez Protger la page par un mot de passe pour activer l'accs utilisateur. 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. Dans la bote de dialogue Groupes d'utilisateurs, slectionnez le groupe, par exemple AccsPhotos, puis cliquez sur OK. L'onglet Scurit de la page doit indiquer si la page est protge par un mot de passe et que le groupe d'utilisateurs a t dfini.

3.

222

Ajouter des objets Web dynamiques

4.

Cliquez sur OK, puis encore sur OK pour fermer les botes de dialogue. Vous remarquerez alors que la page de l'onglet Site affichera un symbole en forme de cl indiquant que la scurit de la page est dfinie.

Ajouter un champ d'identification


WebPlus vous permet d'ajouter un champ de saisie de connexion/dconnexion sur une page de votre site Web. Cela signifie qu'un internaute enregistr peut accder aux pages accs limit en s'identifiant sur le site. Le champ d'identification est une reprsentation visuelle de l'objet intelligent Liste d'utilisateurs ; il est insr sur la page et prsent 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.

Ajouter des objets Web dynamiques

223

Pour ajouter un champ d'identification de l'utilisateur : 1. Suivez la procdure d'activation de l'accs utilisateur (p. 221), mais au lieu de fermer la bote de dialogue, choisissez une page dans laquelle placer le champ d'inscription, puis cliquez sur le bouton Insrer.

2.

Coller l'endroit o vous Placez le pointeur voulez insrer le champ d'identification de l'utilisateur, puis cliquez pour insrer l'objet avec ses dimensions par dfaut. Activez l'identification des utilisateurs par inscription comme dcrit prcdemment (p. 220).

3.

Contrle de l'utilisateur avanc


Certaines fonctions complmentaires vous permettent d'importer/exporter, suspendre, et interdire/accepter les utilisateurs d'un groupe. L'interdiction d'un utilisateur est globale (l'accs tous les groupes d'utilisateurs est empch). Un utilisateur peut tre supprim ou momentanment suspendu pour avoir enfreint les rgles du site (par exemple, pour avoir publi des propos diffamatoires sur des forums publics hbergs). 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'accs aux objets des ressources Web Serif (forums, etc.). En dernier recours, le fournisseur d'accs ou l'organisation laquelle l'adresse lectronique de l'utilisateur appartient peut tre interdite d'accs. Cette dernire option n'est gnralement pas recommande mais peut tre ncessaire pour empcher les actes de malveillance, tels que le spamming professionnel. Voir l'aide de WebPlus pour plus d'informations.

224

Ajouter des objets Web dynamiques

Accs utilisateur pour les forums, les blogs et le SGC


Pour paramtrer l'accs utilisateur pour les forums : 1. Slectionnez l'objet intelligent Liste d'utilisateurs dj cr pour l'accs utilisateur lors de la cration d'un forum. WebPlus crera 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. Pour paramtrer le groupe de modration d'un forum, vous devrez crer un groupe de modration, ajouter manuellement des modrateurs, grer le forum et choisir le groupe dans le menu droulant Modration par le groupe.

2.

Pour paramtrer l'accs utilisateur pour les blogs et le SGC :

Vous devrez crer un groupe d'diteurs, ajouter manuellement des diteurs, puis : Pour les blogs, cliquez sur Grer et choisissez le groupe dans le menu droulant Groupe des diteurs. - ou Pour le SGC, cliquez sur Grer et choisissez Autorisations partir de l'adresse www.serifwebresources.com. Le menu prcdent est de nouveau propos.

Utiliser du texte

225

Utiliser du texte

226

Utiliser du texte

Utiliser du texte

227

Importer du texte partir d'un fichier


Importer du texte depuis un fichier cr avec un traitement de texte est une mthode rapide pour rcuprer du contenu texte pour votre site (mais vous pouvez aussi crer un article en utilisant WritePlus). Si vous utilisez votre traitement de texte habituel (tel que Microsoft Word) pour crer 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 imports, notamment : ANSI Microsoft Word 2007/2010 Microsoft Word 2000/2003 MS Works Open Office Format RTF Wordperfect crire .txt .docx/.dotx

.doc/.dot .wps .odt .rtf .wpd .wri

Pour les formats Microsoft Word crs dans tout systme d'exploitation Windows, inutile d'installer Microsoft Word localement. Cela signifie que vous pouvez rutiliser un contenu texte tiers dans WebPlus sans disposer de l'application associe.

228

Utiliser du texte

WebPlus importe le texte dans une nouvelle zone de texte crative (en prenant en charge le flux du texte entre les zones) ou dans un cadre HTML ou une zone de texte crative slectionne (les cadres HTML ne prennent pas en charge le flux du texte) qui se trouve dj sur la page Web. Pour plus d'informations, reportez-vous Zones de texte p. 229. WebPlus conserve la mise en forme des textes imports partir d'un traitement de texte. Cependant, si vous utilisez votre traitement de texte pour crer 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 imports. Pour importer du texte partir d'un fichier : 1. (Facultatif) Si vous utilisez une zone de texte vide existante, commencez par slectionner la zone. Si vous insrez du texte dans une zone de texte renseigne, cliquez pour dfinir un point d'insertion (ou slectionnez une partie de texte remplacer). Choisissez Fichier texte dans le menu Insertion. Dans la bote de dilogue Ouvrir, choisissez le format du fichier source importer et slectionnez le fichier. Cochez la case Conserver le format pour conserver les styles de mise en forme du fichier source. Dslectionnez la case pour rejeter ces informations. Dans les deux cas, WebPlus conserve les proprits de base des caractres (italique, gras et soulign) et des paragraphes (alignement gauche, centr, droite, justifi). Cliquez sur Ouvrir.

2. 3. 4.

5.

Utiliser du texte

229

Le texte sera import dans l'objet de texte prslectionn ou dans une nouvelle zone de texte. Le texte peut dpasser des zones HTML. Pour rsoudre ce problme, reportez-vous la rubrique Gestion des dpassements de texte p. 233. Pour les zones cratives, si tout le texte import ne tient pas dans la zone de texte active, une bote de dialogue vous invitera crer des zones de texte supplmentaires pour accueillir le texte qui dborde (cliquez sur Oui) ou placer le texte dans une zone de dpassement masque (cliquez sur Non).

Utiliser les zones de texte


Le texte dans WebPlus vient gnralement se placer dans des zones de texte HTML pouvant contenir des mots simples ou des paragraphes et des articles autonomes. Vous pouvez galement utiliser du texte artistique pour le texte autonome comportant des effets spciaux ou du texte de tableau (voir Crer des tableaux avec du texte p. 265) pour l'affichage sous forme de lignes et de colonnes.

Qu'est-ce qu'une zone de texte ?


Une zone de texte est en ralit une mini-page contenant gnralement un ou plusieurs paragraphes de texte habillant la zone. Dans WebPlus, le texte d'une zone est appel article.

Lorsque vous slectionnez une zone de texte, sa zone de dlimitation est indique par une bordure ainsi que par des poignes d'angle et de ct. Par ailleurs, si vous cliquez l'aide de l'outil Pointeur, un curseur apparat 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 p. 241.) Lorsque vous dplacez une zone de texte, le texte de son article se dplace avec elle.

230

Utiliser du texte

Lorsque vous redimensionnez une zone de texte, le texte de l'article s'adapte aux nouvelles dimensions.

Crer des zones de texte HTML


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 slectionner, dplacer et redimensionner la zone mais vous ne pouvez pas modifier sa forme de base (p. 273, 280 et 281, respectivement) Pour crer une zone de texte : 1. Zone de texte HTML dans la Cliquez sur l'outil palette Zones de texte de la barre d'outils Objets standard. Cliquez sur la page ou sur la table de montage pour crer une zone de texte une taille par dfaut. - ou Tracez une zone de texte de la dimension souhaite. Pour supprimer une zone de texte :

2.

Slectionnez la zone de texte et appuyez sur la touche Suppr. (Si un point de slection se trouve dans le texte, la touche Suppr supprimera les caractres placs aprs le curseur.)

Utiliser du texte

231

Placer du texte dans une zone de texte


Diffrentes mthodes permettent de placer du texte dans une zone. Le texte est converti en code compatible HTML. diteur WritePlus : Une fois la zone de texte slectionne, cliquez sur WritePlus dans la barre d'outils contextuelle. Cliquez avec le bouton droit de la souris sur la zone de texte et slectionnez Insrer/Fichier texte... (raccourci Ctrl+T) pour importer du texte. Slectionnez 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 p. 241.) Collage via le Presse-papiers : Glisserdposer : partir d'un point d'insertion dans votre texte, appuyez sur Ctrl+V. Slectionnez un texte (dans un fichier de traitement de texte, par exemple), puis faitesle glisser sur la page WebPlus. Si vous le dposez sur une zone slectionne, le texte est coll au point d'insertion. Sinon, une nouvelle zone de texte est cre spcialement.

Importation de texte :

Saisie dans la zone de texte :

232

Utiliser du texte

Dfinir et mettre en forme la zone de texte


La disposition des zones de texte dtermine la manire dont le texte remplit la zone de texte. Lorsqu'une zone est slectionne et que les valeurs de marges sont dfinies, ces marges apparaissent sous forme de repres gris en pointills. Ces repres dterminent la manire dont le texte s'tale l'intrieur de la zone, en fournissant un remplissage entre le texte et le cadre de la zone. Le texte ne dborde pas des marges de la zone.

Pour crer des marges de zone de texte :

Slectionnez la zone de texte, puis faites glisser les repres de marges pour rgler les limites de la colonne.

(1 )

(2 )

(3 )

L'illustration ci-dessus montre la transformation du pointeur lorsque vous survolez le cadre de dlimitation avec la souris (1), aprs avoir fait glisser la marge de zone de texte vers l'intrieur pour modifier la largeur de cette dernire (2) et aprs avoir fait glisser vers le bas la marge suprieure pour la dplacer (3).

Utiliser du texte

233

Pour pouvoir dfinir des marges de zone de texte, vrifiez que la zone est slectionne (et non son texte). Le cadre de slection de la zone de texte est alors uni. Pour un positionnement prcis des marges, vous pouvez ventuellement crer les marges de zone de texte l'aide des options de marge gauche, droite, suprieure, ou infrieure d'une bote de dialogue. Pour crer des marges de zone de texte via une bote de dialogue : 1. Une fois la zone de texte HTML slectionne, cliquez sur Mise en page de la zone dans la barre d'outils contextuelle. Dans la bote de dialogue, vous pouvez dfinir des marges de zone de texte en dfinissant les valeurs Gauche, Droite, Haut et Bas.

2.

Gestion des dpassements de texte


L'ajustement prcis du texte dans des zones de texte est une notion fondamentale de la mise en forme d'un site Web. Si le texte est trop long pour tenir dans votre zone de texte, WebPlus le stocke dans une zone de dpassement invisible (mais bien relle !) situe en bas de la zone de texte. Le bouton Dbordement du texte est prsent sous la zone de texte prsentant un dpassement pour indiquer ce texte masqu. Il est donc important de s'assurer que le texte s'affiche de nouveau, sinon votre article restera tronqu. Pour ce faire, plusieurs choix s'offrent vous :

Redimensionnez votre zone de texte si l'espace est suffisant. Voir Redimensionner des objets p. 281.

234

Utiliser du texte

Envisagez de rcrire votre article, en le rendant plus concis ! Redimensionnez votre texte, comme dcrit ci-dessus.

Pour redimensionner le texte aprs avoir dfini la taille et la position des zones de texte, vous pouvez utiliser les diffrents outils disponibles dans la barre d'outils contextuelle. La palette Taille de texte propose trois outils permettant de contrler la faon dont le texte est dimensionn dans la zone de texte. Il s'agit d'oprations "exceptionnelles" (contrairement aux options Ajustement automatique "continues", mentionnes ci-dessous). Adapter le texte Cliquez pour mettre la taille du texte de l'article l'chelle de telle sorte qu'il soit exactement adapt aux zones de texte disponibles ; l'ajout d'un texte supplmentaire dans la zone entranera un dpassement du texte. Vous pouvez utiliser cette fonction au dbut, afin d'valuer comment l'article s'adapte, ou en phase finale pour apporter la dernire touche. La fonction Adapter le texte applique tout d'abord de faibles modifications de la taille, puis de faibles modifications de l'interligne, puis des diminutions de l'espacement du paragraphe jusqu' ce que le texte soit ajust. Agrandir le cadre Cliquez pour agrandir d'une unit la taille du texte de l'article (env. 2 %). Rduire le texte Cliquez pour rduire d'une unit la taille du texte de l'article.

Utiliser du texte

235

Le texte de l'article de chaque zone peut adopter un ajustement automatique individuel, comme suit : La palette Options d'ajustement automatique propose trois options d'ajustement automatique agissant continuellement sur l'article d'une zone slectionne. Sans ajustement auto Il s'agit du mode de fonctionnement normal : si le texte est slectionn, sa taille ne changera pas automatiquement dans la zone de texte slectionne. Rduire le texte si dpassement Si vous slectionnez un texte supplmentaire ajout une zone de texte slectionn, sa taille rduira pour viter tout dpassement. Ajustement automatique Si la zone de texte est slectionne, la taille de texte sera toujours ajuste automatiquement (contrairement l'option Adapter le texte, o le texte est adapt une fois, tout ajout de texte causant un dpassement). Pour les zones de texte cratives, le bouton Associer de la dernire zone de texte se transforme en en cas de dpassement ; un bouton Cration automatique apparat en regard du bouton Associer. Il vous est possible d'diter l'article ou de lui attribuer plus de place en ajoutant une ou deux zones la squence. Un clic sur le bouton Ajout automatique ajoute automatiquement les zones de texte et les pages ncessaires.

236

Utiliser du texte

Utiliser le texte artistique


Le texte artistique est un texte autonome que vous saisissez directement sur une page. Particulirement utile pour les en-ttes, les slogans et tous les textes particuliers, il est facile mettre en forme avec les outils de texte standard.

Pour crer un texte artistique : 1. 2. Texte artistique dans la palette Slectionnez l'outil Texte de la barre d'outils Objets standard. Cliquez n'importe quel endroit de la page pour dfinir le point d'insertion une taille par dfaut ou faites glisser pour obtenir une taille donne, tel qu'illustr ci-dessous.

3.

Dfinissez les proprits d'origine du texte ncessaires avant la saisie (police, style etc.) via la barre d'outils contextuelle Texte, le menu Texte ou le menu contextuel (slectionnez la commande Mise en forme du texte). Saisissez directement le texte sur la page pour crer du texte artistique.

4.

Une fois l'objet texte artistique cr, vous pouvez le slectionner, le dplacer, le redimensionner, le supprimer et le copier comme vous le feriez avec une zone de texte. Des remplissages de couleur unie, dgrads/bitmap, ainsi que de la transparence peuvent lui tre appliqus.

Utiliser du texte

237

Pour redimensionner un texte artistique :

Faites glisser les poignes d'angle de l'objet pour le redimensionner tout en conservant ses proportions.

Pour le redimensionner librement, maintenez la touche Maj enfonce en faisant glisser le pointeur.

Pour modifier du texte artistique :

faites glisser le pointeur pour slectionner du texte, surlign en bleu.

Vous pouvez galement double-cliquer pour slectionner un mot. Vous pouvez maintenant saisir un nouveau texte, appliquer une mise en forme aux caractres et au paragraphe, modifier le texte dans WritePlus, appliquer des options de correction orthographique, etc.

Aligner du texte sur trac


Le texte artistique "ordinaire" en ligne droite est en fait tout sauf ordinaire, mais vous pouvez tendre ses possibilits cratives encore davantage en le faisant suivre un trac courbe.

238

Utiliser du texte

Le rsultat a toutes les proprits du texte artistique, et le trac qu'il suit est une courbe de Bzier que vous pouvez modifier avec l'outil Pointeur aussi facilement que toute autre courbe. Mais il peut galement tre modifi par des mthodes qui lui sont spcifiques, comme indiqu ci-dessous. Pour appliquer un trac curviligne prdfini un texte : 1. 2. Crez un objet texte artistique. Ce texte tant slectionn, cliquez sur la palette Trac de la barre d'outils contextuelle et choisissez un trac prdfini.

Le texte pouse le trac spcifi, par exemple "Trac - Cercle suprieur".

Pour placer du texte artistique le long d'un contour ou d'une forme existante : 1. Tracez une ligne main leve, droite ou courbe (voir Tracer et modifier des lignes p. 357) ou une forme (voir Tracer et modifier des formes p. 364). Texte artistique dans la palette Slectionnez l'outil Texte de la barre d'outils verticale.

2.

Utiliser du texte

239

3.

Placez le pointeur tout prs du contour. Lorsqu'il se transforme en courbe, cliquez o vous souhaitez faire commencer le texte.

4.

Commencez votre saisie au point d'insertion. Le texte pouse le contour, qui a t converti en trac.

Pour adapter du texte artistique existant le long d'un contour ou d'une forme existante : 1. 2. 3. Crez un objet texte artistique. Crez une forme ou une ligne main leve droite ou courbe. Slectionnez les deux objets. Dans le menu Outils, slectionnez Ajuster le texte la courbe. Le texte pouse le trac spcifi.

Pour crer simultanment le texte et son trac : 1. Slectionnez l'un des outils Texte sur courbe dans la palette Texte : L'outil Texte main leve permet de dessiner librement une ligne courbe L'outil Texte sur droite sert tracer une ligne droite

240

Utiliser du texte

L'outil Texte sur courbe permet de joindre une srie de segments (courbes ou droits) par des clics reliant des points. 2. Tracez une ligne sur la page. Votre ligne apparat sous la forme d'un trac avec un point d'insertion son dbut (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 dbut du trac). Commencez votre saisie au point d'insertion. Le texte pouse le trac.

3.

Pour ajuster la ligne de base et la position de dpart du texte, dplacez les poignes et situes au dbut du trac du texte.

Pour supprimer le trac du texte : 1. 2. Slectionnez l'objet texte sur trac. 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 dfinitivement.

Utiliser du texte

241

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 slectionner et saisir du texte, dfinir des retraits de paragraphe et des taquets de tabulation, modifier les proprits du texte, appliquer des styles de texte et utiliser les fonctions Rechercher et remplacer (p. 244). Pour l'dition de longs articles et pour des fonctions plus avances, utilisez WritePlus (Modifier l'article dans le menu dition).

Slectionner et saisir du texte


La slection de texte dans des zones de texte, le texte artistique et le texte des tableaux s'effectue de la mme manire que dans un traitement de texte. La zone de slection est marque par un bleu semi-transparent pour faciliter l'dition.

Cliquez deux, trois ou quatre fois pour slectionner 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 slection de mots non-adjacents ou sur la touche Maj pour les suites de mots. Pour modifier du texte sur la page : 1. Slectionnez l'outil Pointeur et cliquez (ou faites glisser le curseur pour tracer un rectangle de slection) sur l'objet texte. Un point d'insertion standard apparat l'emplacement o vous avez cliqu (voir ci-dessous) - ou Slectionnez un mot, un paragraphe ou une portion de texte.

242

Utiliser du texte

2.

Saisissez le nouveau texte insrer ou remplacez le texte slectionn, respectivement.

Pour crer un paragraphe :

Appuyez sur Entre.

Pour crer une nouvelle ligne dans le mme paragraphe ( l'aide d'un saut de ligne ou d'un retour forc) :

Appuyez sur Maj+Entre.

Pour faire passer du texte dans la colonne suivante (saut de colonne) ou dans la zone suivante (saut de zone de texte) :

Zone de texte crative uniquement : Appuyez respectivement sur Ctrl+Entre ou Alt+Entre, ou slectionnez les lments dans le sous-menu Insertion/Saut.

Pour passer du mode Insertion au mode crasement :

Appuyez sur la touche Insr.

Pour rpter une opration lie au texte :

Excutez la commande dition/Rpter 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 Rpter pour lui appliquer la mme mise en forme.

Utiliser du texte

243

Pour afficher les caractres spciaux :

Dans le menu Affichage, slectionnez Caractres spciaux (marques et sauts de paragraphes ; voir cidessous) ou Espaces (Afficher les caractres spciaux, plus les espaces inscables et les espaces normaux "remplis").

Copier, coller et dplacer un texte


Vous pouvez facilement copier et coller du texte l'aide des commandes standard ; le glisser-dplacer 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.

Dfinir des retraits de paragraphe


Pour dfinir les retraits du paragraphe actif :

Faites glisser le ou les repres de rgles appropris. - ou Pour crer rapidement des retraits gauche, slectionnez le bouton Augmenter le retrait ou Diminuer le retrait pour augmenter ou rduire le retrait. Ce retrait correspond la distance du taquet de tabulation par dfaut.

244

Utiliser du texte

- ou Pour rgler les retraits partir d'une bote de dialogue, slectionnez Paragraphe... dans le menu Texte. Dans la zone Retrait, vous pouvez saisir des valeurs pour les retraits de Gauche, Droite, 1re ligne et Positif.

Utiliser du texte Unicode


WebPlus prend entirement en charge Unicode, ce qui permet d'incorporer des caractres trangers ou des symboles spciaux.

Pour coller du texte Unicode du Presse-papiers sur la page, cliquez sur dition/Collage spcial puis slectionnez "Texte Unicode non mis en forme". Insrez directement des caractres Unicode dans le texte en saisissant leur valeur hexadcimale, puis en appuyant sur Alt+X. Le raccourci clavier Alt-X sert de bascule entre le caractre affich (@, par exemple) et sa valeur hexadcimale (U+0040 en l'occurrence). Pour exporter du texte au format Unicode, utilisez WritePlus.

Utiliser la fonction Rechercher et remplacer


Vous pouvez rechercher une extraordinaire varit d'lments dans le texte d'un site : non seulement des mots ou des lments de mots, mais de nombreux attributs de caractres et de paragraphes tels que les polices, les styles, les alignements, les puces et la numrotation, les polices manquantes, les lettrines, etc., mme les graphiques incorpors et bien davantage encore ! Avec la bote 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.

Utiliser du texte

245

Pour utiliser la fonction Rechercher et remplacer : 1. 2. Excutez la commande dition/Rechercher et remplacer. Dans la bote de dialogue, saisissez le texte rechercher dans la zone Rechercher et le texte lui substituer, le cas chant, dans la zone Remplacer. Cliquez sur les flches vers le bas pour voir les lments rcents. Cliquez sur le bouton de l'une des deux zones pour accder aux menus droulants permettant de slectionner des formats ou des caractres spciaux ou encore de dfinir une expression rgulire (similaire une recherche avec des caractres gnriques). Slectionnez la plage de texte sur laquelle la recherche doit porter. Slectionnez la plage de texte sur laquelle la recherche doit porter. Article courant (uniquement l'objet texte ou l'article slectionn), Tous les articles (tout le texte) ou Slection (uniquement avec la fonction Remplacer tout pour qu'elle s'applique uniquement la portion slectionne du texte). Slectionnez Mot entier pour rechercher les squences de caractres comportant un espace blanc (espace, tabulation, etc.) ou un signe de ponctuation chaque extrmit, ou situes au dbut ou la fin d'un paragraphe. Slectionnez Respecter la casse pour que la recherche distingue les majuscules des minuscules. Slectionnez Expression rgulire pour traiter le contenu de la zone Rechercher comme une expression et non comme une chane littrale. Cliquez sur Suivant pour localiser la premire occurrence du texte recherch. - ou Cliquez sur Slectionner tout pour mettre en surbrillance simultanment toutes les occurrences du texte recherch sur votre site.

3.

4.

5.

246

Utiliser du texte

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 faon approprie jusqu' ce que vous atteigniez la fin du site. - ou Cliquez sur Remplacer tout pour remplacer simultanment toutes les occurrences du texte recherch par le texte de substitution. WebPlus vous avertit lorsque la recherche est termine.

7.

Cliquez sur Fermer pour fermer la bote de dialogue Rechercher et remplacer.

Mettre en forme du texte

248

Mettre en forme du texte

Mettre en forme du texte

249

Dfinir les proprits du texte


WebPlus vous permet d'exercer un contrle important sur les moindres dtails de la prsentation typographique, que ce soit dans les zones de texte, les tableaux ou le texte artistique. Pour appliquer une mise en forme de base au texte : 1. 2. Slectionnez le texte. Utilisez les boutons de la barre d'outils contextuelle Texte pour modifier la police, la taille des caractres, le style de police ou l'alignement des paragraphes.

Pour effacer la mise en forme locale (restaurer les proprits du texte brut/par dfaut) :

Slectionnez une plage de texte l'aide du pointeur. Appuyez sur les touches Ctrl+Barre espace de votre clavier.

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 diffrentes un caractre ou un paragraphe entier peut communiquer des messages diffrents votre public cible.

250

Mettre en forme du texte

Il est trs facile d'appliquer une police dans WebPlus. Vous pouvez utiliser l'onglet Polices, la barre d'outils contextuelle ou la bote de dialogue Caractre (accessible par un clic droit ou partir du menu Texte).

L'onglet Polices est automatiquement masqu par dfaut, 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 optimises pour le Web sont un sous-ensemble de polices spciales et configurables qui offrent les meilleures correspondances de polices entre votre site Web (au cours de sa ralisation) et l'ordinateur de vos visiteurs Web (au cours de la navigation). Au moment de la publication, les polices optimises pour le Web sont uniquement rfrences (et non pixellises) car elles sont supposes tre disponibles sur l'ordinateur du visiteur Web. En gnral, il est conseill de s'en tenir la liste standard des polices "sres" affiches dans l'onglet Polices moins que vous ne soyez certain de la prsence des polices sur les ordinateurs du public que vous ciblez. Elles sont toujours runies dans la catgorie Optimise pour le Web de l'onglet (une catgorie quivalente existe dans le menu droulant Polices de la barre d'outils contextuelle Texte).

Mettre en forme du texte

251

Utiliser les styles de texte


Dans WebPlus, vous pouvez utiliser des styles de texte nomms (prdfinis ou dfinis par l'utilisateur) qui peuvent tre appliqus aux zones de texte, au texte des tableaux ou au texte artistique. Un style de texte est un ensemble d'attributs de caractre et/ou de paragraphe enregistr en groupe. Lorsque vous appliquez un style au texte, vous appliquez simultanment tout ce groupe d'attributs. Vous pouvez par exemple utiliser des styles nomms de paragraphes des lments particuliers de la mise en page tels que "En-tte", "Citations" ou "Corps de texte" et des styles de caractres aux noms vocateurs comme "Italique", "Code" ou "Rfrence". Les styles peuvent tre appliqus aux caractres ou aux paragraphes partir de la barre d'outils contextuelle ou de l'onglet Styles de texte. Les styles de paragraphes et de caractres peuvent tre grs partir de la palette Styles de texte. L'onglet Styles de texte vous permet aussi de crer de nouveaux styles de toutes pices, de crer des styles dfinis partir de proprits de texte existantes et de remplacer un style par un autre sur la totalit du site en un seule opration. Tous les styles peuvent tre vrifis en les appliquant directement un paragraphe slectionn sur la page. Pour plus d'informations sur ces fonctions, reportez-vous l'aide de WebPlus.

Styles de paragraphe et styles de caractre


Un style de paragraphe consiste en une spcification complte 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.

252

Mettre en forme du texte

Type de texte Zone de texte (HTML ou crative) Artistique Tableau/Calendrier

Style de paragraphe utilis Corps de texte Corps artistique Corps de tableau

Bas sur Normal Normal Normal

Un style de caractres ne comporte que des attributs de police (nom, force de corps, gras, italique, etc.) et s'applique au niveau du caractre, en fait une plage de caractres, plutt qu'au paragraphe entier.

Utiliser des styles nomms


Le style nomm du texte slectionn s'affiche dans l'onglet Styles de texte ou dans la liste droulante Styles de la barre d'outils contextuelle. Le style affich peut tre un style de caractres (si ce style est appliqu localement), sinon c'est un style de paragraphe. Pour appliquer un style : 1. l'aide de l'outil Pointeur, cliquez dans un paragraphe (si vous appliquez un style de paragraphe) ou slectionnez une plage de texte (si vous appliquez un style de caractre). Affichez l'onglet Styles de texte et slectionnez un style dans la liste de styles. - ou Dans la barre d'outils contextuelle, cliquez sur la flche pour drouler la liste Styles et slectionnez le nom du style.

2.

Mettre en forme du texte

253

L'onglet Style de texte met en surbrillance le style de paragraphe ou de caractre appliqu un texte slectionn. tant donn que vous pouvez appliquer une mise en forme des paragraphes et des caractres un mme texte, la mise en forme de tout le texte actif s'affiche dans le champ Format actif de l'onglet. Pour modifier un style existant : 1. Depuis l'onglet Styles de texte :

Cliquez avec le bouton droit de la souris sur le style de caractre ou de paragraphe modifier et slectionnez Modifier <style>... - ou Aprs avoir slectionn un style, cliquez sur le bouton Grer les styles sous l'onglet Styles de texte, puis cliquez sur le bouton Modifier.

2.

Dans la bote de dialogue Style de texte, dfinissez (ou modifiez) le nom du style, son style de base et tous les attributs de caractre ou de paragraphe, onglets, puces et lettrines inclure dans la dfinition du style. Cliquez sur OK pour appliquer les proprits du style ou sur Annuler pour abandonner les modifications. Cliquez sur Appliquer pour mettre jour le texte ou sur Fermer pour conserver le style dans le projet en vue d'une utilisation ultrieure.

3. 4.

Vous pouvez aussi choisir Palette de style de texte dans le menu Texte pour modifier les styles et les valeurs par dfaut du texte (p. 290).

254

Mettre en forme du texte

Pour supprimer une ou plusieurs styles de texte :

Effectuez un clic droit sur un style de texte et slectionnez Modifier <style>... Dans la bote 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 utiliss, cliquez sur les boutons appropris. La suppression de styles est une opration dlicate. Les styles bass sur un style "parent" coch seront slectionns en vue d'une suppression.

Modifier les styles courants


Le changement d'un style de caractre ou de paragraphe est trs simple sur une portion unique de texte. Mais dans WebPlus, il est aussi facile de substituer un style un autre en slectionnant plusieurs occurrences d'un style et en en slectionnant un autre. La substitution s'effectue simultanment dans tous les paragraphes et articles. Pour slectionner (et modifier) un style dans l'ensemble de votre site : 1. 2. Cliquez avec le bouton droit de la souris sur un style affich dans l'onglet Styles de texte. Si ce style est utilis sur votre site, vous voyez un message Slectionner les n occurrences (n reprsentant le nombre d'occurrences du style). Si le style n'est pas utilis, l'option est grise. 3. 4. Cliquez sur le libell du message. Le texte auquel le style slectionn est appliqu est mis en surbrillance. Dplacez le pointeur sur des noms de style dans la liste. Cliquez sur un style pour l'appliquer au texte slectionn.

Mettre en forme du texte

255

Crer une liste puces ou numrote


Pour toutes les zones de texte, il est possible d'appliquer des puces et des numros aux listes et aux paragraphes. Les puces conviennent plus particulirement l'numration d'lments n'obissant pas un ordre particulier de prfrence et les listes numrotes sont utilises pour la prsentation de procdures par tapes (dsignes par un numro ou une lettre). WebPlus vous permet d'appliquer de la mme manire le style de liste au texte normal (en tant que mise en forme locale) ou aux styles de texte. Des icnes de puces simples, des numros (arabes ou romaines) et des lettres peuvent tre appliqus aux zones de texte HTML. Mais si vous utilisez des zones de texte cratives, vous pouvez employer des listes puces ou numrote basique ou complexe en slectionnant l'un des modles prdfinis (voir ci-dessous) ou en crant votre propre style de liste personnalis (vous pouvez alors crer vos propres symboles, numros et formats de lettre). Vous pouvez ensuite remplacer un style prdfini existant par votre propre style prdfini bas sur votre style de liste personnalis.

Liste puces

Liste numrote

Pour crer une liste puces ou numrote simple : 1. Slectionnez un ou plusieurs paragraphes. - ou Cliquez dans le texte d'un paragraphe. 2. Liste puces ou Liste Slectionnez numrote dans la barre d'outils contextuelle.

256

Mettre en forme du texte

Le style de liste utilis est le premier modle affich dans la bote de dialogue Puces et numros dcrite ci-dessous. Pour crer une liste puces ou numrote ( partir de modles) : 1. Slectionnez un ou plusieurs paragraphes. - ou Cliquez dans le texte d'un paragraphe. 2. 3. Slectionnez Puces et numros... dans le menu Texte. Depuis la bote de dialogue Style de texte, vous pouvez :

Pour le texte dans les zones de texte HTML, cliquez sur une icne prdfinie dans la bote de dialogue. - ou -

Pour de texte dans les zones de texte cratives, choisissez Puce ou Numro dans le menu droulant Style, puis slectionnez l'un des formats prdfinis proposs par dfaut. - ou -

Pour une liste personnalise, slectionnez un modle prdfini, puis cliquez sur le bouton Dtails pour modifier les options personnalises.

4.

Cliquez sur OK pour appliquer la mise en forme la liste.

Chaque fois que vous insrez un saut de ligne, la nouvelle ligne commence par le symbole spcifi. L'insertion de deux sauts de ligne successifs (lorsque vous appuyez deux fois sur la touche Entre) annule les puces ou la numrotation et reprend la mise en forme normale du texte.

Mettre en forme du texte

257

Dsactivez 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 numros aux styles. (Voir l'aide de WebPlus.)

Insrer le profil utilisateur


Vous pouvez vous servir de la bote de dialogue Profil utilisateur pour stocker des informations frquemment utilises ou mises jour de manire ne pas avoir les ressaisir en permanence. Pensez au nombre de fois qu'un numro de tlphone mobile ou une adresse e-mail change ! Cette bote de dialogue permet de consulter d'un coup d'oeil toutes les informations sur l'utilisateur et de mettre jour les champs directement dans votre site Web. Pour grer simultanment le profil utilisateur de plusieurs sites professionnels, WebPlus prend en charge diffrents thmes professionnels (un ensemble de profils utilisateurs) que vous pouvez appliquer chaque site Web. Ces champs doivent tre prsents sur les pages de votre site avant leur actualisation et devront ventuellement tre insrs manuellement l'aide de la commande Insertion/Information/Profil utilisateur. Notez que ces champs de profil utilisateur sont dj prsents dans divers modles, dans les pages de coordonnes par exemple. Vous pouvez galement utiliser cette bote de dialogue Profil utilisateur pour dfinir des variables globales ou spcifiques, appliquer respectivement tous les sites WebPlus ou seulement au site en cours. (Voir Insrer des variables p. 260.)

258

Mettre en forme du texte

Pour ajouter, diter ou modifier le profil utilisateur : 1. Cliquez sur le bouton Dfinir le profil utilisateur de la barre d'outils contextuelle par dfaut (dslectionnez les objets afficher). Pour un profil utilisateur professionnel, saisissez de nouvelles informations sous l'onglet Thmes professionnels. Vrifiez que la liste droulante Slectionner un thme est rgle sur Dfaut si vous ne pensez utiliser qu'un profil utilisateur professionnel. Cette liste vous permet de slectionner un groupe de profils utilisateurs professionnels diffrents, le cas chant. (Voir Crer des thmes professionnels p. 259.) Pour un profil utilisateur priv, utilisez l'onglet Priv. Ces champs sont diffrents de ceux dfinis sous l'onglet Thmes professionnels. Un onglet Calendriers apparatra si votre site contient un calendrier. Vous pouvez ainsi modifier l'anne et afficher/masquer les jours fris et les vnements personnels.

2.

3.

Insrer et mettre jour un profil utilisateur


Vous pouvez tout moment insrer un ou plusieurs champs de profil utilisateur sur votre site. Pour insrer un champ de profil utilisateur : 1. 2. Slectionnez l'outil Pointeur, puis cliquez dans le texte pour dfinir un point d'insertion. Slectionnez Information dans le menu Insertion, puis Profil utilisateur dans le sous-menu.

Mettre en forme du texte

259

3.

Slectionnez une entre Profil utilisateur et, le cas chant, un Prfixe ou Suffixe de texte inclure, par exemple Nom :. Cliquez sur OK.

4.

Pour un site existant, les champs (dj modifis) peuvent tre mis jour par un clic sur un bouton. Pour mettre jour les champs :

Saisissez la nouvelle information dans la bote de dialogue Profil utilisateur (accessible par le menu Outils/Dfinir le profil utilisateur). Cliquez sur le bouton Mettre jour pour mettre jour automatiquement tout champ modifi plac sur votre site. Ce champ restera li au profil utilisateur jusqu' ce que vous le supprimiez.

Crer des thmes professionnels


Vis vous dveloppez plusieurs sites professionnels, vous pouvez stocker et affecter chaque site des thmes diffrents. Voyez un thme professionnel comme un profil nomm et contenant diverses informations sur l'utilisateur. Pour crer un thme professionnel : 1. 2. Dans la bote de dialogue Profil utilisateur (onglet Thmes professionnels), cliquez sur Nouveau. Saisissez le nouveau nom du thme professionnel et cliquez sur OK. Votre nouveau thme est appliqu comme indiqu dans la liste droulante Slectionner un thme. Saisissez l'information dans la bote de dialogue Profil utilisateur, puis cliquez sur Mettre jour.

3.

260

Mettre en forme du texte

Aprs que vous avez cr un thme professionnel et l'avoir appliqu votre site, les paramtres sont stocks avec le site. Les thmes professionnels vous permettent de stocker diffrents profils utilisateurs pour chaque site Web que vous crez. Pour passer un thme professionnel dffrent :

Slectionnez un autre thme dans la liste droulante Slectionner un thme, puis cliquez sur Mettre jour.

Pour renommer ou supprimer un thme professionnel : 1. 2. Slectionnez le thme professionnel dans la liste droulante Slectionner un thme. Slectionnez Renommer ou Supprimer.

Insrer des variables


Pour remplacer un texte rcurrent de votre site par un autre texte, vous pouvez avoir recours des variables. Typiquement, cette opration vous permet de modifier un nom ou une version de produit, facilitant la mise jour de votre site. Les champs de variables changent automatiquement, adoptant les nouvelles valeurs. L'utilisation de variables est similaire celle des informations sur l'utilisateur (p. 257). Comme les champs Informations sur l'utilisateur, les variables peuvent tre insres et mises jour partir de la bote de dialogue Informations sur l'utilisateur. Une variable peut tre stocke dans un site ou s'appliquer globalement d'autres sites, ce qui est particulirement pratique pour les noms de produits susceptibles d'tre rutiliss, dans un environnement professionnel.

Mettre en forme du texte

261

Pour ajouter, modifier ou supprimer des variables : 1. Cliquez sur le bouton Dfinir le profil utilisateur de la barre d'outils contextuelle par dfaut (dslectionnez les objets afficher). Slectionnez l'onglet Global ou Site si vous souhaitez que la variable ajoute soit disponible pour tous les sites ou uniquement pour le site, respectivement. Sous l'un des onglets, cliquez sur le bouton Ajouter. Dans la liste de variables, saisissez le nom de la Variable cre, en dfinissant une chane unique permettant d'identifier facilement la variable.

2.

3. 4.

5.

Cliquez dans la colonne adjacente la nouvelle variable et entrez la valeur de la variable (c'est--dire le texte qui apparatra sur la page).

6. 7.

Si besoin, ajoutez des variables l'onglet Site ou l'onglet Global. Cliquez sur Mettre jour.

Aprs avoir choisi vos variables, vous pouvez les insrer sous formes de champs remplaant le texte "statique". Avant d'utiliser des variables, vous devez en insrer dans votre site.

262

Mettre en forme du texte

Pour insrer un champ de variable : 1. 2. 3. Cliquez dans le texte pour ajouter un point d'insertion (ou slectionner un texte). Slectionnez Information dans le menu Insertion, puis Variable... dans le sous-menu. Dans la liste droulante de la bote de dialogue, slectionnez votre variable l o vous l'avez stocke dans le Profil utilisateur (Global ou Site). Slectionnez une entre de variable et, le cas chant, un Prfixe ou Suffixe de texte inclure avec votre variable. Cliquez sur OK.

4. 5.

Si vous souhaitez modifier la variable, il vous suffit de modifier et de mettre jour la valeur de la variable. Les champs de variables de votre site se mettent automatiquement jour, adoptant les nouvelles valeurs. Pour mettre jour les variables : 1. Dfinir le profil utilisateur Cliquez sur le bouton de la barre d'outils contextuelle par dfaut (dslectionnez les objets afficher). Attribuez une nouvelle valeur la variable existante.

2.

3.

Cliquez sur Mettre jour.

Utiliser des tableaux

264

Utiliser des tableaux

Utiliser des tableaux

265

Crer des tableaux de texte


Avec leurs fonctions incorpores de feuilles de calcul, les tableaux sont l'outil idal pour la prsentation de texte et de donnes sous forme de lignes et de colonnes facilement personnalisables et varies.

Chaque cellule d'un tableau se comporte comme une mini-zone de texte. Comme dans une zone de texte, vous pouvez modifier les proprits des caractres et des paragraphes, appliquer des styles de texte choisis, incorporer des images ancres, appliquer des remplissages de couleur unie au texte et utiliser des options de rvision, telles que la correction orthographique et la Correction grammaticale, et des fonctions spciales telles que la mise en forme des nombres et l'insertion de formules. Deux types de tableaux peuvent tre appliqus la page WebPlus : le tableau HTML et le tableau cratif. Le type de tableau les plus souvent utilis dans WebPlus est le tableau HTML, car il est compatible HTML, ce qui garantit un rsultat de qualit sur tous les explorateurs Internet. Toutefois, vous pouvez utiliser des tableaux cratifs la place des tableaux HTML pour accder des fonctions telles que la rotation de tableau, les remplissages dgrads/bitmap, la transparence de texte, les effets de filtre, la 3D instantane, et les effets de distorsion.

266

Utiliser des tableaux

Crer des tableaux


WebPlus est fourni avec une slection de formats de tableau prdfinis, c'est--dire des modles que vous pouvez slectionner et dont vous pouvez remplir les cellules avec un contenu. Dans WebPlus, vous pouvez :

modifier le format prdfini avant d'ajouter un nouveau tableau la page, crer vos propres formats sans crer de tableau (voir Crer des formats de tableau personnaliss dans l'aide de WebPlus), adapter la taille de tableaux existants un autre format (prdfini ou personnalis).

Pour crer un tableau : 1. 2. Dans la barre d'outils Objets standard (palette Tableau), slectionnez Outil Tableau HTML. Cliquez sur la page ou la table de montage ou tracez un rectangle de slection pour dfinir les dimensions du tableau. La bote de dialogue Crer un tableau s'affiche avec une slection de formats de tableau prdfinis dans la fentre Format. Parcourez la liste pour visualiser les formats et slectionnez-en un. Pour commencer avec un tableau simple, slectionnez (Par dfaut). (Facultatif) Cliquez sur Modifier pour personnaliser le format choisi. Dfinissez la Taille du tableau. Il s'agit du nombre de lignes et de colonnes composant la mise en forme du tableau.

3.

4. 5.

Utiliser des tableaux

267

6.

Cliquez sur OK. Le nouveau tableau s'affiche sur la page.

Pour modifier la structure et le contenu des cellules de tableaux, reportez-vous la rubrique Manipuler les tableaux de l'aide de WebPlus.

Insrer un calendrier
L'Assistant Calendrier vous aide crer un calendrier mensuel utiliser sur votre page Web.

Ce calendrier est un tableau de texte redimensionnable dont vous pouvez modifier le texte l'aide des outils de texte standard. Les proprits d'un calendrier slectionn sont similaires celles d'un tableau et peuvent tre modifies de la mme manire (voir Manipuler les tableaux). Pour insrer un calendrier : 1. Cliquez sur la palette Tableau de la barre d'outils Objets standard et slectionnez Insrer un calendrier. Cliquez une nouvelle fois sur votre page ou faites glisser le pointeur pour dfinir la taille souhaite du calendrier.

2.

268

Utiliser des tableaux

3.

Dans l'Assistant Calendrier qui s'affiche, dfinissez les options de votre calendrier, notamment l'anne et le mois, le style de calendrier (carr ou une ou plusieurs colonnes), le premier jour de la semaine, l'espace rserv aux annotations, les options d'affichage, l'activation d'vnements/vacances et le format du calendrier. Pour que les jours fris de votre pays s'affichent, cochez l'option Ajouter des jours fris dans l'Assistant et slectionnez un Pays dans le menu droulant associ. Pour ajouter des vnements personnels, cochez aussi l'option Ajouter des vnements personnels.

4.

Cliquez sur Terminer pour fermer l'assistant. Si vous prvoyez d'utiliser votre calendrier dans les annes qui viennent, mettez simplement jour le paramtre Anne dans le menu Outils/Dfinir le profil utilisateur.

Pour afficher et modifier les proprits d'un calendrier slectionn : 1. 2. Cliquez sur le bouton Modifier le calendrier dans la barre d'outils contextuelle. Slectionnez l'onglet appropri (Date, Style, Evnements etc.) et apportez votre modification, puis appuyez sur OK.

Un clic avec le bouton droit de la souris lorsque l'option Calendrier est slectionne permet galement de slectionner, d'insrer, de rpartir, de supprimer, et d'ajuster la largeur/hauteur des lignes (ou descolonnes), mais veillez ne pas dtruire le formatage du tableau !

Utiliser des tableaux

269

Ajouter des jours fris


Lorsque vous crez un calendrier, vous pouvez dfinir les vacances du pays o vous habitez. Les jours fris s'afficheront automatiquement sur le calendrier si l'option Ajouter des jours fris est coche dans Proprits du calendrier. Pour activer les jours fris : 1. Slectionnez le cadre de slection de votre calendrier et, dans la barre d'outils contextuelle, cliquez sur Modifier le calendrier. Sous l'onglet vnements, cochez Ajouter des jours fris. (Facultatif) Changez les jours fris d'un calendrier existant l'aide de la liste droulante Pays. Cliquez sur OK.

2. 3. 4.

Pour afficher les jours fris : 1. 2. 3. Slectionnez le cadre de slection de votre calendrier. Cliquez sur vnements du calendrier dans la barre d'outils contextuelle. Activez l'option Afficher les jours fris.

Ajouter des vnements personnels


Vous pouvez complter vos listes de jours fris et vacances (vacances de Pques, par exemple) en ajoutant des vnements personnels tels que des anniversaires et des chances de paiement (malheureusement !) pour que ces vnements s'affichent sur votre calendrier. Utilisez le bouton vnements du calendrier dans la barre d'outils contextuelle d'un calendrier slectionn. Les vnements s'afficheront automatiquement sur votre calendrier la date indique.

270

Utiliser des tableaux

Pour ajouter un vnement : 1. 2. 3. Slectionnez le cadre de slection de votre calendrier. Cliquez sur vnements du calendrier dans la barre d'outils contextuelle. (Facultatif) Cochez Afficher les vnements par date pour ajouter, modifier et supprimer des vnements en utilisant une mise en page de calendrier traditionnelle. Ne cochez pas l'option pour une numration de dates ou d'vnements range par range. Cliquez sur Nouvel vnement.

4. 5.

Dans la bote de dialogue, saisissez une date, slectionnez-la avec les flches vers le haut/bas ou Parcourir. l'aide du bouton Saisissez votre texte d'vnement dans la zone de saisie de texte. Cela affiche votre calendrier la date choisie. Si l'vnement est un anniversaire ou un autre vnement annuel, cochez vnement annuel. Cliquez sur OK. L'vnement apparat dans la liste la date choisie. Lorsque vous avez fini d'ajouter des vnements, cliquez sur Enregistrer. Utilisez les boutons diter l'vnement ou Supprimer l'vnement pour modifier ou supprimer un vnement existant.

6. 7. 8. 9.

10

Modifier des objets

272

Modifier des objets

Modifier des objets

273

Slectionner un objet
Pour modifier un objet, vous devez commencer par le slectionner l'aide de l'un des outils suivants dans la palette Slection de la barre d'outils verticale : Outil Pointeur Utilisez l'outil Pointeur afin de slectionner, dplacer, copier, redimensionner ou faire pivoter des objets. Outil Lasso Cliquez pour utiliser l'outil Lasso pour tracer une zone main leve dans laquelle tous les objets seront slectionns. Outil Rotation Cliquez pour utiliser l'outil Rotation pour faire pivoter un objet autour de son point de rotation (gnralement centr). Voir Faire pivoter un objet p. 282. Avant toute slection, les objets WebPlus seront entours d'une surbrillance de slection. Dans un groupe d'objets complexe, cela indique les objets qui seront slectionns.

274

Modifier des objets

Pour slectionner un objet :

Cliquez sur l'objet l'aide de l'un des outils reprsents ci-dessus pour afficher un cadre de slection autour de l'objet.

Si des objets sont superposs, cliquez en maintenant la touche Alt enfonce jusqu' ce que l'objet souhait soit slectionn. Pour slectionner un objet l'aide de l'outil Lasso : 1. 2. Slectionnez l'outil Lasso.

Tracez un "lasso" autour des objets que vous souhaitez slectionner. Une zone contraste est cre autour de l'objet.

3.

Relchez le bouton de la souris. Tous les objets situs l'intrieur de la zone dfinie sont slectionns.

Modifier des objets

275

En cas de slection 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 slectionner l'objet et de placer le pointeur de slection de texte clignotant l'intrieur du texte de l'objet. Dans ce mode, il vous est possible d'diter le texte (p. 241).

Cliquez deux, trois ou quatre fois pour slectionner un mot, un paragraphe ou tout le texte. Pour slectionner uniquement la zone de texte, cliquez sur son cadre de slection. Un simple clic sur un groupe slectionne le groupe d'objets. Cliquez en maintenant la touche Ctrl enfonce pour slectionner un objet individuel dans un groupe.

Slectionner des objets sous l'onglet Objets


Pour slectionner un objet : 1. 2. 3. Sous l'onglet Objets, slectionnez la page contenant vos objets. Dveloppez l'entre de la page en cliquant sur Dvelopper, faisant apparatre les objets sur la page. Slectionnez votre objet. puis Maintenez les touches Ctrl et Maj enfonce cliquez pour slectionner plusieurs entres d'objets adjacentes ou non-adjacentes.

276

Modifier des objets

Slectionner plusieurs objets


La slection de plusieurs objets simultanment, c'est--dire la cration d'une slection multiple, vous permet de :

positionner ou redimensionner tous les objets simultanment ; Crer un groupe d'objets partir d'une slection multiple pouvant alors tre considre comme un seul et mme objet, avec possibilit de restaurer les diffrents objets ultrieurement. Voir Crer des groupes p. 302.

Pour crer une slection multiple :

Faites glisser un cadre de slection autour des objets que vous souhaitez slectionner.

Vous pouvez aussi maintenir la touche Maj enfonce et cliquer tour tour sur chaque objet, ou utiliser l'outil Lasso (p. 273) pour slectionner les objets. Le dernier objet slectionn comporte un cadre plus fonc que les autres objets slectionns. Pour ajouter ou supprimer un objet d'une slection multiple :

Maintenez la touche Maj enfonce et cliquez sur chaque objet ajouter ou supprimer.

Modifier des objets

277

Pour dslectionner tous les objets d'une slection multiple :

Cliquez sur une zone vierge de l'espace de travail.

Pour slectionner tous les objets de la page (ou de la maquette) :

Slectionnez Slectionner tout dans le menu dition, ou appuyez sur Ctrl+A.

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-dplacer et reproduire plusieurs copies d'un objet dans des formations prcises. Vous pouvez galement transfrer la mise en forme d'un objet un autre, avec la possibilit de spcifier des attributs spcifiques lors de la reproduction de la mise en forme. Pour copier un objet (ou une slection multiple) dans le Presse-papiers Windows :

Cliquez sur le bouton standard.

Copier dans la barre d'outils

Si vous utilisez une autre application Windows, vous avez gnralement la possibilit de copier et coller des objets l'aide du Presse-papiers.

278

Modifier des objets

Pour coller un objet partir du Presse-papiers :

Cliquez sur

Coller dans la barre d'outils standard.

La commande standard Coller insre l'objet au point d'insertion ou, dans le cas d'un objet spar, au centre de la page. Pour insrer un objet spar au mme emplacement de la page que l'objet copi, utilisez la commande Coller l'emplacement. Pour slectionner l'un des divers formats du Pressepapiers :

Excutez la commande dition/Collage spcial.

Pour copier un objet : 1. 2. 3. Slectionnez l'objet et appuyez sur la touche Ctrl. Dplacez lobjet l'aide du bouton relchez le bouton de la souris. Dplacer, puis

Pour que la copie reste la mme position horizontale ou verticale, maintenez la touche Maj enfonce en faisant glisser l'objet. La copie de l'objet apparat au nouvel emplacement.

Dupliquer des objets


La duplication d'un objet consiste en faire une copie la fois. La commande Dupliquer vous permet de crer plusieurs copies en une seule tape et vous permet de contrler la disposition des copies en srie linaire ou en matrice. Vous pouvez inclure une ou plusieurs transformations pour gnrer un tableau attractif d'objets pivots et/ou redimensionns. Cette technique est idale pour les arrires-plans rptitifs ou pour les montages d'images ou d'objets parfaitement aligns.

Modifier des objets

279

Pour dupliquer un objet : 1. Slectionnez l'objet dupliquer et excutez la commande dition/Dupliquer. La bote de dialogue Dupliquer apparat, avec sa droite une zone d'aperu. Pour organiser les copies sur une ligne droite, slectionnez Crer contour. Pour obtenir une disposition de quadrillage X-Y, slectionnez Crer quadrillage. Spcifiez 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 paramtre Ligne pour inclure un nombre impair d'objets dans une grille. Dfinissez l'espacement entre les objets en tant que Dcalage (mesur entre les angles suprieurs gauches des objets successifs) ou en tant qu'Espace (entre les angles infrieurs droits et suprieurs gauches). Vous pouvez spcifier un intervalle Horizontal et/ou Vertical et/ou une Rotation d'angle. Pour dfinir un intervalle horizontal ou vertical particulier, cochez Absolu ; dcochez cette case pour spcifier l'intervalle en pourcentage de la taille de l'objet d'origine. Cliquez sur OK.

2.

3.

4.

5.

280

Modifier des objets

Le rsultat constitue une slection multiple. Cliquez sur son bouton Associer si vous souhaitez que les objets spars restent associs pour d'autres manipulations.

Reproduire la mise en forme d'un objet


Aprs 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 slectionn. Dans le menu dition, Coller le format Plus affiche une bote de dialogue de "commande centrale" permettant de slectionner ou de dslectionner des attributs spcifiques inclure dans la mise en forme copier. Pour plus d'informations, reportezvous Enregistrer des styles d'objet p. 376.

Dplacer des objets


Pour dplacer un objet (y compris une slection multiple) :

Faites glisser l'objet slectionn l'aide de son bouton Dplacer. Lorsque vous voyez un curseur de dplacement, vous pouvez commencer faire glisser le pointeur de la souris.

Pour dfinir des positions horizontales et verticales exactes, utilisez l'onglet Transformer.

Modifier des objets

281

Pour limiter le dplacement d'un objet sur un axe horizontal ou vertical :

Slectionnez l'objet et utilisez les touches de direction du clavier (flches haut, bas, gauche, droit).

Redimensionner des objets


WebPlus fournit plusieurs mthodes pour redimensionner les lignes, les formes, le texte artistique, les zones de texte et les tableaux. La plus simple est le glisser-dplacer, mais la barre d'tat vous fournira de nombreux conseils et raccourcis selon le contexte. Pour redimensionner un objet (cas gnral) : 1. 2. Slectionnez l'objet. Cliquez sur l'une des poignes de l'objet pour le dplacer jusqu' son nouvel emplacement tout en maintenant le bouton gauche de la souris enfonc.

Lorsque vous cliquez et dplacez la souris partir d'une poigne de ct, vous pouvez redimensionner l'un des cts, en le dplaant. Glisser partir d'une poigne d'angle permet de redimensionner deux dimensions, en dplaant deux bords. Pour redimensionner librement :

Faites glisser la souris partir d'une poigne d'angle (ou d'une extrmit de contour).

282

Modifier des objets

Pour limiter une forme, une zone de texte ou un tableau lors du redimensionnement :

Maintenez la touche Maj enfonce et cliquez et dplacez une poigne d'angle (ou une extrmit de contour).

Pour les formes, cela permet de conserver la forme carre d'un carr, la forme ronde d'un cercle, etc. Pour les images, les dimensions seront figes lors du dplacement d'une poigne d'angle. Faites glisser le pointeur tout en maintenant la touche Maj enfonce pour redimensionner une image librement.

Faire pivoter un objet


l'aide de la poigne de rotation d'un objet ou de l'outil Rotation, vous pouvez faire pivoter des objets, notamment des images, des objets texte et des groupes. Pour faire pivoter un objet slectionn ( l'aide de sa poigne de rotation) :

Faites glisser la poigne de rotation partant du cadre de slection (utilisez la touche Maj pour une rotation par pas de 15).

Modifier des objets

283

Pour faire pivoter un objet ( l'aide de l'outil Rotation) : 1. 2. Dans la palette d'outils Slection de la barre d'outils verticale, slectionnez l'outil Rotation. Cliquez pour slectionner l'objet, survolez l'une de ses poignes latrales ou d'angle avec la souris jusqu' ce que le pointeur de rotation apparaisse. Maintenez le bouton de la souris enfonc et faites glisser le pointeur dans la direction o l'objet doit pivoter, puis relchez le bouton. Pour contraindre la rotation des intervalles de 15, maintenez la touche Maj enfonce.

3.

Pour annuler une rotation (puis restaurer l'orientation initiale) :

Double-cliquez sur l'objet. Pour restaurer la rotation, double-cliquez une nouvelle fois.

Pour modifier l'origine de la rotation : 1. Slectionnez l'outil slectionner l'objet. Rotation et cliquez pour

2.

par rapport sa Dplacez l'origine de la rotation position originale et placez-le o bon vous semble sur la page. Le repre peut aussi tre plac l'extrieur de l'objet, ce qui est idal pour faire pivoter des objets groups autour d'un point central. Dplacez la poigne de rotation un nouvel angle de rotation. L'objet tourne alors autour de sa nouvelle origine.

3.

Pour rtablir l'origine de la rotation, double-cliquez simplement dessus.

284

Modifier des objets

Pour faire pivoter un objet de 90 vers la gauche ou vers la droite :

Slectionnez l'objet et choisissez la commande Rotation gauche ou Rotation droite dans le menu Organiser.

Recadrer et combiner des objets


Recadrer signifie masquer des parties d'un objet, par exemple pour amliorer la composition ou crer un effet spcial. L'objet sousjacent ne s'en trouve pas modifi. Deux types de recadrage sont possibles : carr ou irrgulier.

recadrage carr

recadrage irrgulier

La combinaison utilise plusieurs objets pour crer un objet composite spcial, contenant un ou plusieurs "trous" dans lesquels les remplissages des objets initiaux se chevauchent les uns les autres (ce qui est pratique pour crer des effets de masque ou de pochoir). Pour recadrer en utilisant le contour d'origine de l'objet : 1. 2. Recadrage carr Slectionnez l'objet, puis l'outil dans la palette Effets de la barre d'outils verticale. Pour recadrer sans conserver les proportions, faites glisser vers l'intrieur l'une de ses poignes de bordure ou d'angle. Appuyez simultanment sur la touche Maj pendant le dplacement afin de conserver les proportions.

Modifier des objets

285

Pour redimensionner l'objet dans le contour de recadrage, appuyez sur Ctrl et faites glisser le pointeur vers le haut ou le bas. Pour recadrer un objet en modifiant son contour :

Slectionnez l'objet, puis l'outil Recadrage irrgulier dans la palette Effets de la barre d'outils verticale. La barre d'outils contextuelle apparat et vous permet de contrler les nuds affichs et les segments de connexion qui dfinissent le contour de recadrage de l'objet. Voir Modifier des lignes p. 360.

Pour dplacer un nud (point de contrle) lorsque vous apercevez le pointeur , faites-le simplement glisser. Pour dplacer un segment de ligne (entre deux nuds) lorsque vous visualisez le curseur, faites-le glisser.

Pour positionner un objet recadr dans son contour de recadrage :

Aprs avoir slectionn l'un des outils de recadrage, cliquez sur l'objet et dplacez son centre (lorsque vous voyez le pointeur en forme de main).

Pour flouter le contour de recadrage :

Aprs avoir slectionn l'un des outils de recadrage, cliquez sur l'objet. Dans la barre d'outils contextuelle, dfinissez une valeur de dgrad l'aide des flches haut/bas, de la glissire ou par saisie directe. Le dgrad est appliqu hors du contour de recadrage selon la force de corps dfinie.

286

Modifier des objets

Pour annuler un recadrage (rendre l'objet entirement visible) :

Cliquez sur le bouton Supprimer le recadrage de la barre d'outils contextuelle.

Recadrer sur une forme


La commande Recadrer exige la slection pralable de deux objets. L'un ou l'autre de ces objets (ou les deux) peut tre un groupe d'objets. L'objet infrieur (celui qui est plac sous l'autre) est dtour suivant le contour de l'objet suprieur, donnant ainsi naissance une forme correspondant la zone de chevauchement des deux objets.

Pour recadrer sur une forme : 1. Placez l'objet de "dtourage" 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 (Bulle de pense) a t place par-dessus un jour de cong. Les deux objets tant slectionns ou associs, slectionnez Recadrer dans le menu Outils.

2.

Modifier des objets

287

Combiner des lignes et des formes


Combiner des courbes est un excellent moyen pour crer un objet composite partir de plusieurs lignes ou formes traces. Comme pour le recadrage d'une forme (voir ci-dessus), l'objet suprieur dtoure le ou les objets placs sous lui, laissant apparatre 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 une mise en forme (tel qu'un contour ou un remplissage) l'objet combin et continuer diter les nuds et les segments individuels avec l'outil Pointeur. Contrairement au rsultat des autres mthodes, un objet combin conserve de faon permanente les proprits de contour et de remplissage de l'objet suprieur. La combinaison est rversible, mais les objets initiaux conservent les proprits de contour et de remplissage de l'objet combin. La combinaison est un moyen rapide pour crer un masque ou un pochoir :

Formes pleines

Convertir en courbes

Combiner les courbes

Ombre porte ajoute

288

Modifier des objets

Pour combiner plusieurs lignes ou formes slectionnes : 1. 2. Tracez vos deux lignes ou Formes pleines. Placez l'objet de "dtourage" sur l'objet recadrer, en utilisant cet effet le menu Organiser et/ou la barre d'outils Organiser. Slectionnez chaque objet, puis Outils/Convertir en courbes. Slectionnez les deux objets. Choisissez la commande Organiser/Combiner les courbes.

3. 4. 5.

Pour restaurer les formes initiales qui composent un objet combin :

Slectionnez l'objet combin, puis choisissez la commande Organiser/Fractionner les courbes.

Joindre les contours d'objets


WebPlus comprend des outils puissants permettant de dcouper de nouvelles formes partir d'anciennes formes. Les commandes Ajouter, Soustraire, Intersection ou Exclure vous permettent de crer un objet dfinitif (avec un nouveau contour) partir d'objets slectionns. L'objet joint peut tre modifi en ajustant les nuds de la nouvelle forme. Pour joindre les contours : 1. 2. Slectionner des objets. Slectionnez une option dans le sous-menu Joindre les contours du menu Organiser.

Modifier des objets

289

Ajouter

Cre un nouvel objet partir des deux autres slectionns.

Les objets ne doivent pas ncessairement se superposer.

Soustraire

limine l'intersection entre l'objet suprieur et infrieur. L'objet infrieur est galement limin. Cette commande est utile pour tronquer rapidement des formes et des images avec un autre objet.

Les objets doivent ncessairement se superposer.

Intersection

La superposition est conserve alors que le reste est supprim.

Exclure

Fusionne plusieurs objets dans un objet composite et cre un vide transparent l'intersection entre des zones pleines.

290

Modifier des objets

Mettre jour et enregistrer les paramtres par dfaut


Les proprits par dfaut des objets sont les paramtres de proprits sauvegards 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 dfaut sont enregistres sparment 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, grce la commande Mettre jour l'objet par dfaut de la bote de dialogue Palette de styles de texte. Vous pouvez toutefois changer facilement les paramtres par dfaut de tout type d'objet. Les paramtres par dfaut sont toujours locaux, c'est--dire que leurs modifications s'appliquent au site actif, et sont automatiquement enregistrs avec lui. Ils s'appliqueront donc nouveau lorsque vous rouvrirez le site. Toutefois, vous pouvez aussi utiliser la commande Enregistrer les paramtres par dfaut du menu Outils pour enregistrer les paramtres actuels comme paramtres globaux, qui s'appliqueront par la suite tous les nouveaux sites. Pour dfinir les remplissages locaux par dfaut pour un type d'objet particulier : 1. Crez un exemple d'objet et dterminez les proprits souhaites, ou utilisez un objet existant prsentant les proprits adquates. Pour les images, vous pouvez utiliser un contour, une forme ou un rectangle car leurs paramtres par dfaut sont identiques.

Modifier des objets

291

2.

Slectionnez l'objet servant de base aux nouveaux paramtres par dfaut, puis excutez la commande Format/Mettre jour l'objet par dfaut.

Ou, pour les couleurs de ligne et de remplissage, y compris les styles de ligne : 1. Lorsqu'aucun objet n'est slectionn, slectionnez les couleurs de ligne et/ou de remplissage dans l'onglet Couleur ou chantillons (voir Appliquer des couleurs unies p. 381). Utilisez l'onglet Contour pour dfinir une paisseur et un style de ligne par dfaut, ainsi qu'une forme d'angle. Dessinez votre objet sur la page, qui adoptera automatiquement les nouveaux couleurs et styles dfinis par dfaut.

2.

Pour afficher et modifier les proprits du texte par dfaut : 1. 2. Choisissez Palette de style de texte dans le menu Texte. Cliquez sur Texte par dfaut, puis slectionnez une option (p. ex., Texte artistique) dans la liste de types de texte qui s'affiche alors. Cliquez sur Modifier... pour afficher les paramtres actuels du type de texte slectionn. Utilisez la bote de dialogue Style de texte pour modifier les proprits des caractres, des paragraphes et des listes puces ou numrotes.

3. 4.

292

Modifier des objets

Pour enregistrer tous les paramtres par dfaut actifs comme paramtres globaux : 1. 2. Slectionnez la commande Enregistrer les paramtres par dfaut du menu Outils. Dans la bote de dialogue, cochez des options pour mettre jour globalement des valeurs par dfaut spcifiques :

Paramtres par dfaut des documents et des objets - enregistre les paramtres actuels des sites (taille de page, orientation) et des objets (paramtres 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 personnaliss de l'onglet Styles. Formats des tableaux et des calendriers enregistre les formats personnaliss enregistrs dans la bote de dialogue Formats de tableau.

3.

Cliquez sur Enregistrer pour confirmer que tous les nouveaux sites devront utiliser les paramtres par dfaut de l'objet slectionn.

11

Organiser des objets

294

Organiser des objets

Organiser des objets

295

Agencer les objets


Lorsque vous crez des objets, ils sont superposs sur chaque calque dans l'ordre de leur cration, d'arrire 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. Pour dplacer l'objet d'un niveau vers l'avant ou l'arrire :

Cliquez sur En avant ou En arrire dans la barre d'outils Organiser, respectivement.

Pour dplacer l'objet slectionn vers le bas ou le haut de la pile :

Cliquez sur Arrire-plan ou Premier plan dans la barre d'outils Organiser, respectivement.

Si vous utilisez des dispositions d'objets complexes, ncessitant ventuellement un contrle accru lors de la rorganisation, vous pouvez avoir recours l'onglet Objets. Pour dplacer des objets l'aide de l'onglet Objets : 1. 2. 3. Sous l'onglet Objets, slectionnez la page contenant vos objets. Dveloppez l'entre de la page en cliquant sur Dvelopper, faisant apparatre les objets sur la page. Slectionnez et faites glisser votre objets vers une nouvelle position dans la liste d'objets. Maintenez les touches Ctrl et Maj enfonce puis cliquez pour slectionner plusieurs entres d'objets adjacentes ou non-adjacentes. L'objet suprieur apparat en haut de la liste.

296

Organiser des objets

Aligner et rpartir des objets


L'alignement consiste prendre un groupe d'objets slectionns et les aligner en une seule opration sur leurs bords haut, bas, gauche ou droite. Vous pouvez aussi rpartir les objets de manire ce que vos objets (via une slection multiple) soient rpartis quitablement (ventuellement intervalles espacs). L'alignement ou la rpartition peut se drouler entre les objets les plus loigns de votre page (slection active), les marges de page ou le bord de page. L'alignement sur le dernier objet slectionn vous permet de choisir un objet spcifique dans une slection multiple, afin d'aligner d'autres objets. Pour aligner les bords de plusieurs objets dans une slection : 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 slection autour d'eux pour crer une slection multiple. Slectionnez l'onglet Aligner. Slectionnez une option d'alignement vertical et/ou horizontal. Slectionnez Haut, Bas, Gauche, Droite, Centre horizontal ou Centre vertical.

2. 3.

Organiser des objets

297

Pour rpartir plusieurs objets sur une slection :

Slectionnez Intervalle horizontal rgulier ou Intervalle vertical rgulier pour rpartir les objets slectionns de faon uniforme entre les objets les plus loigns de la slection active (horizontalement ou verticalement) ou selon une valeur dfinie (cochez Espac et dfinissez une valeur dans une unit de mesure quelconque).

Plutt que de travailler dans la zone de slection actuelle, vous pouvez aligner ou rpartir les objets sur les marges de la page (si elles sont dfinies) ou sur les bords de la page. Pour aligner/rpartir les objets sur les marges ou les bords de la page :

Dans le menu droulant Relatif , indiquez si vous souhaitez aligner les objets slectionns avec les marges ou les bords de la page, puis choisissez l'un des boutons d'alignement ou de rpartition dcrits prcdemment.

Pour un contrle plus prcis de l'alignement, vous pouvez aligner plusieurs objets par rapport au dernier objet slectionn (maintenez la touche Maj enfonce pour slectionner tour tour les objets) l'aide l'option de liste droulante Relatif : Dernire slection. Le dernier objet slectionn comporte un cadre plus fonc que les autres objets slectionns.

298

Organiser des objets

Associer un objet au texte


WebPlus propose deux mthodes 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 :

Flotter avec le texte. Cette option est idale pour les images et les formes, etc.

Une forme associe un texte artistique tel qu'un titre

Une image dans une zone de texte

Position aligne avec les caractres. L'objet associ est plac sous forme de caractre 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 mthodes est que l'objet associ se dplacera conjointement votre texte. Pour les zones de texte en particulier, lorsque le texte est rparti lors de l'ajout d'un nouveau contenu la zone, l'objet associ se dplacera avec le texte.

Organiser des objets

299

Pour associer un objet au texte : 1. 2. 3. Placez l'objet au-dessus ou prs du texte artistique ou de la zone de texte laquelle il doit tre associ. Slectionnez Ancrer au texte... dans le menu Organiser. Dans la bote de dialogue, slectionnez une option de positionnement.

Pour un objet flottant : 1. 2. Activez Flotter avec le texte. Il s'agit de l'option de positionnement par dfaut. Rglez l'option Position sur le texte pour dfinir la position de l'objet par rapport au texte artistique ou la zone de texte. Slectionnez Gauche ou Droite, ou indiquez une valeur Retrait de pour dfinir un retrait gauche (en pixels). Aprs le positionnement, vous pouvez prciser la distance du texte : l'cart entre le contour de l'objet et le texte adjacent. Cliquez sur OK. Aprs l'association, l'objet affiche un bouton Ancrer au texte sous l'objet. Cliquez pour modifier les proprits. point d'ancrage est un Le emplacement dfini dans le texte artistique ou la zone de texte partir duquel l'objet est positionn. Dfinissez un autre emplacement dans le texte pour dplacer simultanment le point d'ancrage et l'objet.

3.

4.

300

Organiser des objets

Pour un objet ancr : 1. 2. Cochez Position ancre sous forme de caractre. Pour dfinir l'alignement vertical de l'objet par rapport au texte adjacent, slectionnez un option Aligner avec le texte. Le texte n'habillera pas l'objet ancr. (Facultatif) Entrez une valeur Dcalage de pour dfinir le pourcentage de dplacement vertical de l'objet par rapport sa hauteur. (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 conserve. Une valeur de 100 % applique la force de corps active. Aprs le positionnement, vous pouvez prciser la distance du texte : l'cart entre le contour de l'objet et le texte adjacent. (Facultatif) Cochez Utiliser ces paramtres lors de la copie pour actualiser les valeurs par dfaut de flottement et d'ancrage. Par la suite, toute copie d'objet adoptera les paramtres enregistrs lorsque l'option tait coche. Cliquez sur OK. L'objet est ancr au texte et est accompagn d'une icne Ancrer au texte.

3.

4.

5.

4.

5.

Organiser des objets

301

Pour afficher les proprits de l'objet associ : 1. 2. Slectionner un objet associ. Cliquez sur Ancrer au texte, sous l'objet.

La bote de dialogue Proprits de l'objet joint s'affiche. Les options diffrent selon l'option de positionnement active. 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 dconnect. Vous pouvez aussi dconnecter le point d'ancrage via la bote de dialogue Proprits de l'objet joint. Pour dconnecter un objet associ :

Dans la bote de dialogue Proprits de l'objet joint, cochez Dtacher du texte.

302

Organiser des objets

Crer des groupes


Vous pouvez aisment convertir une slection multiple en un groupe d'objets. Lorsque des objets sont regroups, vous pouvez tous les positionner, les redimensionner ou les faire pivoter simultanment. Pour crer un groupe partir d'une slection multiple :

Cliquez sur le bouton .

Pour dissocier les lments d'un groupe (convertir le groupe en une slection multiple) :

Cliquez sur le bouton. Le groupe redevient une slection multiple.

Cliquez simplement sur un lment d'un groupe pour slectionner l'objet groupe. En gnral, toute opration effectue sur un groupe slectionn affecte tous ses objets. Les objets composant un groupe restent cependant inchangs et vous pouvez galement slectionner et diter un objet individuel d'un groupe. Pour slectionner un objet individuel d'un groupe :

Ctrl+clic sur l'objet.

303

Images, animation et multimdia

12

Images, animation et multimdia

304

Images, animation et multimdia

Images, animation et multimdia

305

Ajouter des cadres d'image

Un cadre d'image est un conteneur dot d'une forme dans lequel est place votre image, l'image des cadres photos sur les murs d'une maison ! Dans WebPlus, vous pouvez utiliser deux types de cadres d'image :

Des cadres d'image bordure sous l'onglet Galerie. - ou

Des cadres d'image sans bordure dans la barre d'outils verticale.

WebPlus vous permet d'importer directement une image dans le cadre ou d'y insrer une image partir de la Barre des mdias. Les cadres d'image vides s'affichent sous forme d'lments fictifs en forme d'enveloppes. tout moment, vous pouvez remplacer l'image l'intrieur du cadre. Sous tous les cadres slectionns 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 degrs dans le sens antihoraire), un zoom avant ou un zoom arrire, et de remplacer l'image).

306

Images, animation et multimdia

Pour ajouter un cadre d'image bordure : 1. 2. 3. Sous l'onglet Galerie, slectionnez Cadres d'image dans la liste droulante. Slectionnez une sous-catgorie (p. ex., Mtallique, Naturel). Faites glisser la miniature du modle de cadre vers votre page.

Pour ajouter un cadre d'image sans bordure : 1. Dans le cas d'un cadre d'image rectangulaire vide, slectionnez 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 dtermine les dimensions et la position initiales du cadre d'image. Pour insrer le cadre une taille par dfaut, vous n'avez qu' cliquer sur le bouton gauche de la souris. - ou Pour dfinir la taille du cadre, tracez un rectangle de slection et relchez le bouton de la souris.

3.

Images, animation et multimdia

307

Pour ajouter une image dans un cadre :

partir de l'album affich dans la Barre des mdias, faites glisser une photo directement sur le cadre d'image. - ou Remplacer l'image Cliquez sur le bouton directement sous le cadre slectionn, puis reprez et slectionnez une image. Cliquez sur Ouvrir.

L'image est ajoute au cadre selon les proprits par dfaut de Cadre d'image, c'est--dire qu'elle est mise l'chelle de manire occuper le maximum du cadre ; les proportions sont toujours conserves. Vous pouvez nanmoins modifier la taille de l'image, son orientation et sa position par rapport au cadre l'aide des boutons affichs sous l'image slectionne ou Proprits du cadre dans la barre d'outils contextuelle.

Importer des images


Il existe diffrentes manires 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 mdias de WebPlus (p. 312), coller l'image partir du Presse-papiers ou importer l'image sous forme de fichier par le biais d'une bote de dialogue.

Les images dissocies flottent librement sur la page, alors que les images ancres se trouvent l'intrieur d'un objet texte. Les images intgres font partie intgrante du projet WebPlus, alors que l'association place une copie de rfrence de l'image sur la page et conserve un lien vers le fichier d'origine. Chaque mthode a ses avantages et inconvnients (reportez-vous Intgrer ou associer p. 312).

308

Images, animation et multimdia

WebPlus vous permet de placer votre image sur la page sa taille d'origine. Par dfaut, l'image n'est pas recadre. Cependant, vous pouvez choisir de recadrer l'image et d'ajuster les proprits du cadre d'image en ce qui concerne le positionnement et les dimensions de l'image dans le cadre. Pour ajouter une image partir de la barre des mdias :

Faites glisser une miniature d'image VERS la page partir de l'un des albums affichs dans la Barre des mdias de WebPlus (agrandissez la Barre des mdias en bas de votre espace de travail). Vous pouvez galement faire glisser la miniature vers une image existante pour remplacer cette dernire.

Pour importer une image partir d'un fichier : 1. (Facultatif) Si vous souhaitez ancrer l'image, cliquez dans un objet texte pour dfinir un point d'insertion. Pour que l'image soit dissocie, assurez-vous qu'aucun objet texte n'est slectionn. Dans la fentre principale :

2.

Cliquez sur le bouton Importer une image... dans la palette Image de la barre d'outils Objets standard.

Dans WritePlus :

3. 4.

Choisissez Fichier image dans le menu Insertion.

Utilisez la bote de dialogue Importer une image pour slectionner le fichier image ouvrir. Slectionnez Intgrer l'image ou Lier l'image. Voir Intgrer ou associer p. 312.

Images, animation et multimdia

309

5.

Cliquez sur Ouvrir. Si la fentre principale comporte un point d'insertion, votre image sera insre dans le texte et ancre au point d'insertion. Si vous avez ouvert une image via la Barre de cration rapide, l'image s'affichera automatiquement sur la page. Dans le cas contraire, le pointeur de la souris prendra la forme d'un curseur de copie d'image. L'action suivante dtermine la taille initiale et la position de l'image dissocie.

Pour insrer l'image sa taille d'origine, cliquez simplement sur la page. - ou Pour dfinir la taille de l'image insre, cliquez et dplacez la souris pour dfinir une zone, puis relchez le bouton de la souris. Utilisez la touche Maj pour placer l'image sans maintenir ses proportions (les proportions de l'image sont conserves par dfaut).

Pour coller plusieurs images, slectionnez plusieurs images dans la bote de dialogue Ouvrir puis collez chaque image une par une sur la page (en cliquant chaque fois sur la page).

Remplacer des images


L'option Remplacer l'image vous permet de remplacer une image par une autre n'importe quel moment. Cette option est particulirement 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 (recadre ou non).

310

Images, animation et multimdia

Pour remplacer une image :

Cliquez sur le bouton Remplacer l'image juste en dessous de l'image slectionne puis allez chercher une image et slectionnez-la. Cliquez sur Ouvrir.

Pour remplacer une image par le biais de la Barre des mdias :

Faites glisser une miniature d'image vers une image existante partir de l'un des albums affichs dans la Barre des mdias de WebPlus (commencez par agrandir la Barre des mdias en bas de votre espace de travail).

Ajuster les images recadres


WebPlus propose des options supplmentaires permettant de travailler avec les images recadres. Ces images sont soit des images que vous avez recadres en utilisant les outils de recadrage (barre d'outils verticale), soit des images remplaables dj prsentes dans les modles. Par exemple, vous pouvez dplacer l'image ou lui appliquer un zoom afin de dfinir la partie de l'image qui doit s'afficher dans son "cadre". Vous pouvez galement modifier les dimensions de l'image et ses paramtres d'alignement en ajustant les proprits de son cadre. Lorsque vous slectionnez une image recadre avec l'outil Pointeur, une barre de commande apparat sous l'image. Vous y trouverez des options de dplacement, de rotation, de zoom avant, de zoom arrire, ainsi que l'option Remplacer l'image.

Pour repositionner une image recadre l'intrieur de son "cadre", cliquez sur, puis cliquez sur l'image et faites-la glisser.

Images, animation et multimdia

311

Pour faire pivoter une image par pas de 90 dans le sens antihoraire, cliquez sur le bouton. Pour raliser un zoom avant ou un zoom arrire sur l'image, cliquez sur l'un des outils de zoom avant/arrire. Pour remplacer une image, cliquez sur , puis recherchez la nouvelle image et cliquez sur Ouvrir.

Pour modifier les proprits du cadre : 1. Cliquez sur une image recadre avec le bouton droit de la souris et choisissez Proprits du cadre. - ou Slectionnez l'image et choisissez Proprits du cadre dans la barre d'outils contextuelle Image. 2. Dans la bote de dialogue, vous pouvez agrandir/rduire 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 (Ne pas redimensionner). Pour modifier l'alignement vertical de l'image l'intrieur du cadre, slectionnez Haut, Milieu ou Bas. Pour modifier l'alignement horizontal, slectionnez Gauche, Centre ou Droite. Lorsque vous slectionnez une image qui n'est pas recadre, seul un bouton Remplacer l'image vous est propos.

3. 4.

312

Images, animation et multimdia

Intgrer ou associer
L'intgration signifie que l'image dans WebPlus est dsormais distincte du fichier d'origine. L'intgration produit un fichier WebPlus volumineux. Si vous devez modifier une image intgre, vous devez la rimporter aprs dition. Il s'agit cependant de la meilleure mthode si la taille du fichier n'est pas un problme et si les images sont dfinitives. L'association permet d'insrer une copie du fichier image dans la publication WebPlus associe au fichier d'origine de telle sorte que toute modification apporte ultrieurement dans l'application d'origine soient automatiquement reportes dans WebPlus. L'association vous permet de limiter la taille du fichier de site. D'autre part, vous devez grer rigoureusement les fichiers associs externes, en vous assurant, par exemple, de tous les inclure si vous dplacez le fichier WebPlus sur un autre lecteur. Les deux options n'affectent pas votre site Web publi, mais uniquement votre site WebPlus.

Utiliser la Barre des mdias


La Barre des mdias fonctionne comme un panier rassemblant les photos inclure sur votre site. Son usage principal est de faciliter le processus de cration en amliorant la productivit (en vitant d'importer les photos une par une) et la commodit (en plaant les photos toujours porte de la main). Pour les sites Web comportant beaucoup de photos en particulier, bass par exemple sur des modles WebPlus, la Barre des mdias est un outil prcieux pour faire glisser des photos directement sur des images dont on ne veut pas et que l'on souhaite remplacer.

Images, animation et multimdia

313

La Barre des mdias peut tre utilise pour stocker de faon temporaire des photos avant de les placer dans votre site Web ou pour crer des albums photos permanents partir desquels vous pourrez extraire des photos tout moment par la suite. Par dfaut, les photos sont ajoutes 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 dmarrage 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 intgres ou associes votre site avant mme 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 mtadonnes EXIF, IPTC ou XMP. Il est mme possible d'diter les mtadonnes XMP l'intrieur de WebPlus. L'album charg qui est affich dans votre Barre des mdias restera visible quel que soit le site ouvert. Vous pouvez faire glisser des miniatures directement de la Barre des mdias vers une image existante sur votre page afin de la remplacer. Vous pouvez galement ajouter une nouvelle image en la plaant sur votre page sa taille d'origine.

314

Images, animation et multimdia

Pour afficher la Barre des mdias :

Si elle n'est pas dj affiche, cliquez sur la poigne en bas de l'espace de travail.

Pour ajouter des photos un album temporaire : 1. La Barre des mdias tant visible avec un album temporaire charg, cliquez sur son espace de travail pour afficher la bote de dialogue Importer une image. Dans la bote de dialogue, slectionnez un dossier puis des photos importer. Cliquez sur Ouvrir. Les photos apparaissent sous forme de miniatures dans l'espace de travail de la Barre des mdias. Si vous ne l'enregistrez pas, l'album temporaire et les photos qu'il contient ne seront pas conservs lorsque vous fermerez WebPlus. vous pouvez faire glisser directement un ou plusieurs fichiers partir d'un dossier quelconque de Windows verre la Barre des mdias. Si vous cliquez avec le bouton droit de la souris sur une image de la barre des mdias et slectionnez Ouvrir dans l'Explorateur, le dossier de la photo s'ouvre dans l'Explorateur de Windows, ce qui est bien pratique pour un glisser-dplacer ou simplement pour la gestion gnrale des fichiers !

2. 3.

Images, animation et multimdia

315

Pour enregistrer un album temporaire en lui donnant un nom : 1. 2. Cliquez sur la flche vers le bas sur le bouton Ajouter. Dans le menu, slectionnez Nouvel album. Dans la bote de dialogue Nouvel album, dans le champ Nom de l'album, saisissez un nom permettant d'identifier votre album par la suite. (Facultatif) Vous pouvez modifier l'tat intgr/associ de toute photo avant mme de la placer sur la page : cliquez sur un champ de paramtre Positionnement d'une photo et utilisez le menu droulant de ce champ pour le modifier. Vous pouvez galement modifier ces paramtres au moment o vous faites glisser l'image sur la page. Cliquez sur OK.

3.

4.

Pour inclure les photos d'un album temporaire dans album enregistr existant, cliquez sur le bouton Ajouter et slectionnez le nom d'un album dans le menu. Pour crer un album dot d'un nom : 1. 2. Cliquez sur le bouton Nouvel album de la barre.

Dans la bote de dialogue, dans le champ Nom de l'album, saisissez un nom permettant d'identifier votre album pour un usage futur. Cliquez sur le bouton Ajouter un dossier. Ajouter une image ou

3. 4.

Dans la bote de dialogue, accdez une photo ou un dossier, puis cliquez sur Ouvrir.

316

Images, animation et multimdia

5.

La bote de dialogue Nouvel album rpertorie les fichiers inclure. Modifiez ventuellement les options de positionnement d'intgration/d'association en cliquant sur le champ de paramtre de chaque photo et en slectionnant une valeur dans le menu droulant correspondant. Pour supprimer une photo, slectionnez-la et cliquez sur le bouton Supprimer l'image. Cliquez sur OK.

6. 7.

Pour charger un album enregistr :

Slectionnez le nom d'un album enregistr dans le menu droulant situ dans le coin suprieur droit de la barre. Les photos de l'album s'affichent dans l'espace de travail de la Barre des mdias.

Vous pouvez slectionner un album de la manire explique ci-dessus, puis le modifier l'aide du bouton Grer (affich uniquement pour les albums enregistrs existants). Vous pouvez ajouter des photos/dossiers, supprimer des photos et changer l'tat intgr/associ. Pour supprimer un album :

Slectionnez un nom d'un album dans le menu droulant en haut droite et cliquez sur Supprimer l'album.

Pour trier les rsultats d'un album :

Dans la zone de recherche Trier par, choisissez Nom de fichier, Note ou Date de cration pour rorganiser les photos dans l'ordre de votre choix.

Images, animation et multimdia

317

Ajouter des photos la page


Pour ajouter une photo la page : 1. Affichez l'album temporaire de la Barre des mdias ou chargez un album enregistr partir du menu droulant en haut droite. Faites glisser la miniature d'une photo d'un album vers la page, puis relchez le bouton de la souris.

2.

Dfinir les options d'exportation des images


Lorsque vous publiez votre site, WebPlus applique des paramtres gnraux pour dterminer de quelle manire chaque image (qu'elle soit dessine, colle ou importe) devient un bitmap spar affich sur la page web. Voici une prsentation rapide des paramtres de conversion tels que dfinis au dpart pour la publication Web :

Chaque image rfrence est exporte dans un fichier spar. Chaque image insre au format .gif, .jpeg ou .png est exporte en tant que fichier d'origine et conserve son nom de fichier d'origine. Les mtafichiers insrs ainsi que toutes les autres images sont rgnrs sous forme d'images PNG.

Vous pouvez modifier ces paramtres 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 dfaut dans lequel toutes les images seront converties lors de l'exportation, mais vous pouvez dfinir des exceptions cette rgle en spcifiant certains types d'images devant conserver leur format

318

Images, animation et multimdia

de fichier d'origine. Initialement, .png est le format par dfaut, mais il existe un jeu de remplacements pour les .gif et les .jpeg. C'est la raison pour laquelle, si vous utilisez les paramtres d'origine cidessus, les images .PNG ne sont pas modifies alors que toutes les autres images sont converties au format .PNG. Vous pouvez vrifier et modifier ces paramtres dans la bote de dialogue Proprits du site (menu Fichier). Les paramtres de ce type d'images sont gnraux et s'appliquent toutes les images du site mais, l encore, vous pouvez dfinir des exceptions, en l'occurrence pour des images spares. Pour ce faire, aprs avoir slectionn une image, vous avez le choix entre les actions suivantes :

Utilisez Options d'exportation (menu Format) ou le Gestionnaire d'exportation des images (menu Outils) pour paramtrer le format d'exportation d'images particulires au cas par cas. - ou Convertissez pralablement certaines images un format spcifique en utilisant Outils/Convertir en image.

Cette combinaison de paramtres globaux et locaux vous permet de contrler pratiquement compltement (si vous vous donnez la peine de le faire) l'apparence des images dans vos pages web. Commenons par examiner les paramtres globaux. Pour dfinir les options gnrales d'exportation de vos images Web : 1. 2. Excutez la commande Fichier/Proprits du site et slectionnez l'option de menu Images. Slectionnez un format d'exportation prfr dans la section Format de fichier d'exportation. Toutes les images seront converties dans ce format l'exportation, moins que vous ne dfinissiez des exceptions. Vous pouvez attribuer des valeurs de compression aux fichiers JPG. Pour les images PNG, les options Utiliser la

Images, animation et multimdia

319

transparence et Rtro-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 Rchantillonnage, slectionnez une mthode de rchantillonnage pour obtenir une qualit optimale, une bonne qualit, des images plus nettes ou plus lisses, quel que soit le format ; plus la qualit est leve, plus l'exportation est lente. La qualit optimale utilise le surchantillonnage pour obtenir un niveau de dtails maximal dans les images exportes. Cochez l'option Ne pas rchantillonner... pour viter le rchantillonnage des images lorsque la taille de l'image exporte est proche de celle d'origine. 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 enregistres la racine de votre site Web en ligne. 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) cre une seule image partir d'une imbrication d'images. L'effet de cette option dpend de la mise en page. Plutt que d'utiliser cette mthode globale, vous pouvez excuter la commande Outils/Convertir en image dans certains cas. Dans la section Texte, vous pouvez cocher Tracer le texte en courbes lisses pour lisser l'aspect du texte export sous forme d'image. Parfait pour le texte artistique ! Dans la section Images associes, dfinissez une largeur et une hauteur maximales pour l'exportation d'images. Cela permet d'viter que les images s'affichent avec des dimensions natives inutilement grandes. Cela est particulirement utile pour crer un lien hypertexte pointant vers un agrandissement d'une image.

4.

5.

6.

7.

320

Images, animation et multimdia

Dfinir 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 dfinir le format de fichier d'exportation pour les diffrentes 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 paramtres locaux et image par image remplacent les paramtres gnraux (tels que dfinis avec la commande Fichier/Proprits du site) utiliss par WebPlus pour dterminer le format d'exportation. Vous pouvez lancer l'Assistant pour vrifier une seule image slectionne, la page courante ou le site entier. Vous pouvez enregistrer chaque image par diffrentes mthodes : Utilisez l'une des deux mthodes suivantes :

Choisissez un format spcifique (GIF, JPEG ou PNG) comme format de destination (ou utilisez simplement les paramtres par dfaut du site). Vous pouvez attribuer un niveau de compression aux fichiers JPEG. - ou -

Enregistrez le fichier l'emplacement choisi et sous le nom dfini lors de l'exportation. Vous voudrez peut-tre ajouter des noms plus explicites aux images lors de l'exportation (ce qui est particulirement utile lors de la maintenance du site Web) au lieu d'exporter les images sous des noms gnrs automatiquement.

Laissez vos yeux dcider. La meilleure solution est de conserver l'option Rglages par dfaut du site pour toutes les images de dpart. L'utilisation des paramtres gnraux d'origine signifie que les images .gif, .jpeg et .png seront exportes sous leurs fichiers d'origine alors que les autres, notamment les formes rapides et les formes fermes, seront publies au format .png. Affichez ensuite un aperu de votre site et voyez si vous souhaitez modifier les paramtres gnraux ou essayer un autre format spcifique pour des images donnes.

Images, animation et multimdia

321

Mme si vous ne modifiez aucun paramtre de format, vous pouvez dfinir un titre qui apparatra 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 dfinir un texte alternatif (manuellement ou automatiquement) des fins d'accessibilit. Pour dfinir un format dexportation, un titre et/ou un autre texte : 1. Si vous souhaitez dfinir les options d'exportation d'une image spcifique, vous pouvez d'abord la slectionner, puis choisir Options d'exportation dans le menu Format ou dans le menu contextuel. - ou Pour dfinir 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 rglages doivent porter sur l'objet slectionn, sur la page courante ou sur le site tout entier, puis cliquez sur Continuer. L'assistant parcourt les images de la plage spcifie et les affiche une par une avec la bote de dialogue Options d'exportation des images. Dans la section Enregistrer l'image sous de la bote de dialogue, vous avez le choix entre les options suivantes :

3.

Laisser WebPlus choisir le nom et le format. Le format de l'image est tel que dfini dans la bote de dialogue Proprits du site (Images ; Format par dfaut) ; le nom est gnr de manire automatique, par exemple, wp479d0ea6.

322

Images, animation et multimdia

Enregistrer dans le format suivant en laissant WebPlus choisir le nom. Cliquez sur le bouton radio GIF, JPEG ou PNG pour spcifier le format d'exportation de l'image courante. Cochez la case Rglages par dfaut du site si vous souhaitez que le format par dfaut associ au site soit conserv, mais que le nom de l'image soit automatiquement dfini par WebPlus. Si vous slectionnez le format JPEG, choisissez un niveau de compression dans le menu droulant Compression. Enregistrer sous le nom et l'emplacement choisi. Cliquez sur le bouton Slectionner le fichier. La bote de dialogue qui s'affiche vous permet d'exporter l'image avec son nom de fichier d'origine (activez Nom par dfaut) 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 mthodes, vous pouvez naviguer jusqu'au dossier dans lequel vous souhaitez enregistrer l'image exporte. Le format de fichier utilis sera celui dfini dans les paramtres par dfaut du site. Vous pouvez toujours ignorer les paramtres par dfaut du site en modifiant l'extension de fichier dans le champ Choisir un nom, en remplaant par exemple .GIF par .PNG.

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 chant) soient fusionnes en une seule image. (Facultatif) Slectionnez l'une des mthodes de rchantillonnage. WebPlus peut effectuer un rchantillonnage si cela s'avre ncessaire. Le fichier peut tre toujours rchantillonn (par exemple, lorsqu'un fichier .jpg est redimensionn) ou jamais (l'image d'origine est utilise). Cliquez sur le bouton radio appropri. L'image est toujours rchantillonne en cas de changement de format. Le rchantillonnage peut

5.

Images, animation et multimdia

323

appliquer la qualit dfinie dans les Proprits du site (cidessus) ou une qualit (Qualit optimale, Bonne qualit, des images plus nettes ou plus lisses) spcifique l'image. 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. Dans le mme onglet, attribuez une chane de texte ALT votre image pour l'accessibilit Web. La chane 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 dfaut. Si vous optez pour la deuxime solution, l'image sera exporte de la manire suivante :

7.

Si les images sont dcoratives (elles ne contiennent pas de texte), elles ne possderont 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, Prcdent, Suivant, etc.), le texte de l'image est automatiquement export sous forme de balise ALT (c'est dire, Prcdent, Suivant) et prsent 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.

324

Images, animation et multimdia

Importer des images TWAIN


Si votre scanner ou votre appareil photo numrique propose une prise en charge TWAIN, vous pouvez numriser des photos directement dans WebPlus l'aide de la norme TWAIN ou enregistrer l'image numrise, puis l'importer dans WebPlus. Pour configurer le priphrique TWAIN pour l'importation :

Pour obtenir des instructions relatives au fonctionnement, consultez la documentation fournie avec votre scanner.

Pour importer une image numrise :

Excutez la commande Insertion/Image, puis slectionnez TWAIN et Numriser dans les sous-menus pour ouvrir la bote de dialogue de slection de fichier.

Si plusieurs priphriques compatibles TWAIN sont installs, vous devrez probablement slectionner la source utiliser pour la numrisation. Pour slectionner une source TWAIN diffrente en vue de la numrisation : 1. Excutez la commande Insertion/Image, puis slectionnez TWAIN et Slectionner une source dans le sous-menu. Dterminez le priphrique que vous souhaitez utiliser en tant que source TWAIN.

2.

Images, animation et multimdia

325

Appliquer des filtres PhotoLab


Vous pouvez appliquer et grer des filtres depuis PhotoLab, un puissant studio permettant d'appliquer des filtres de rglage et d'effets vos images, individuellement ou en combinaison tous les filtres sont instantanment appliqus ! PhotoLab propose les fonctionnalits cls suivantes :

Filtres de rglage Appliquez des filtres de tons, de couleur, d'objectif, et d'accentuation. Filtres d'effet Appliquez des effets stylistiques, artistiques, de dformation, 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. Opration non destructrice Tous les filtres sont appliqus sans affecter l'image d'origine et peuvent tre modifis tout moment. Combinaisons de filtres performantes Crez des combinaisons de filtres de rglage, de retouche et d'effet, pour la rptition d'oprations. Masquage slectif Appliquez des filtres des zones slectionnes, l'aide de masques. Enregistrer et grer les favoris Enregistrez des combinaisons de filtres grce un onglet Favoris trs pratique.

326

Images, animation et multimdia

Commandes d'affichage Comparez les aperus avant et aprs, grce aux commandes des modes double cran et cran fractionn. Utilisez la commande de zoom et de dplacement pour dplacer votre image. Commandes de verouillage Protgez vos filtres appliqus de toute modification indsirable, puis appliquez-les ventuellement d'autres images de la slection.

L'espace de travail de PhotoLab hberge des onglets de filtres, une barre d'outils principale, ainsi qu'une pile de filtres appliqus.

(A) barre d'outils principale, (B) espace de travail principal, (C) pile de filtres, (D) onglets de filtres, (E) onglet Images

Images, animation et multimdia

327

Pour dmarrer PhotoLab : 1. Slectionnez l'image laquelle vous souhaitez appliquer un filtre. Cliquez sur contextuelle. PhotoLab dans la barre d'outils

2.

Utiliser l'onglet Images


Les images prsentes dans votre site Web apparatront dans votre onglet Images (ci-dessus) si l'onglet est ouvert. Cet onglet est affich par dfaut dans PhotoLab, mais peut tre masqu par un en bas de l'espace de travail. clic sur Pour rechercher des images dans un site : 1. 2. 3. Cliquez sur le bouton Filtre de l'onglet Images. Slectionnez et dfinissez une taille d'image minimale et maximale, si ncessaire. Slectionnez ou dslectionnez RVB, CMJN et Niveaux de gris pour n'afficher que les images de ces modes colorimtriques. Cliquez sur OK.

4.

L'onglet Images affiche uniquement les images correspondant aux critres dfinis prcdemment. Une fois l'onglet Images ouvert, vous pourrez slectionner et modifier toutes les images sans avoir quitter PhotoLab.

328

Images, animation et multimdia

Appliquer un filtre
Les filtres sont stocks dans les onglets Favoris, Rglages et Effets de PhotoLab, qui regroupent les filtres en catgories logiques (p. ex., Retouches rapides pour des filtres de correction rapides et courants). L'onglet Favoris offre des filtres courants (individuels ou combins). Vous pouvez les complter avec des filtres prdfinis. Pour appliquer un filtre tester : 1. 2. Cliquez sur la miniature d'un filtre. Ds qu'un filtre est slectionn, il est temporairement insr dans la Zone de test qui vous permet de tester librement vos paramtres personnaliss pour ce filtre ; l'image est actualise automatiquement pour reflter vos nouveaux rglages. Ajustez les glissires (ou saisissez des valeurs) pour adapter le filtre vos besoins. Certains filtres comportent des cases cocher, des menus droulants et des commandes supplmentaires (Paramtres avancs, p. ex.). Tout nouveau filtre slectionn remplace le filtre actif.

3.

Images, animation et multimdia

329

Tout filtre peut tre temporairement dsactiv, rtabli ou supprim de la zone de test. Pour dsactiver un filtre : Cliquez sur ractiver. puis sur pour

Pour rtablir :

Cliquez sur . Toute modification est annule et les paramtres par dfaut du filtre sont rtablis. Cliquez sur .

Pour supprimer :

Si vous tes sr de vouloir conserver votre filtre, vous devrez l'ajouter votre pile de filtres. 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 crer des filtres supplmentaires l'aide de la mme mthode. Les rglages sont appliqus de telle manire que le dernier filtre effectu apparat en bas de la liste et s'applique en dernier l'image (aprs les autres filtres situs avant lui dans la liste).

Pour rorganiser les filtres :

Glissez-dposez votre filtre n'importe o dans la pile. Une ligne en pointills indique l'emplacement o sera plac le filtre si vous relchez le bouton de la souris.

330

Images, animation et multimdia

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 matriaux. Outil Recadrer, pour redresser et recadrer une image, ou appliquer des proportions fixes ou libres, avec une orientation Paysage ou Portrait.

Masquage slectif
Au lieu d'appliquer un filtre pour modifier de faon uniforme l'apparence de votre image, vous pouvez ne modifier que les zones slectionnes. 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.

Images, animation et multimdia

331

Pour appliquer un masque : 1. Dans le menu droulant Nouveau masque. Masque, slectionnez

2.

Dans le volet Paramtres de l'outil, slectionnez l'outil Ajouter des zones pour masquer des zones en dessinant. Adaptez les paramtres vos besoins, notamment en modifiant la taille du pinceau pour dessiner des zones plus grandes ou plus complexes. Dans le menu droulant Mode, remplacez Slectionner par Protger pour protger les zones dessines contre le masquage (contraire de l'option Ajouter des zones).

3.

4.

l'aide du pointeur affich, dessinez des zones (en vert pour un ajout, en rouge pour une protection). Si votre trac n'est pas aussi prcis que vous l'auriez voulu, vous pouvez cliquer sur Supprimer des zones, puis dessinez sur les zones peintes indsirables.

5.

Accepter pour enregistrer vos Cliquez sur modifications de masquage. Le bouton de masque devient jaune lorsqu'un masque est appliqu.

Pour modifier un masque :

Cliquez sur la flche bas du bouton , slectionnez le nom du masque puis Modifier le masque.

332

Images, animation et multimdia

Enregistrer des favoris


Si vous souhaitez conserver un paramtre de filtre spcifique (ou une combinaison de filtres) pour une utilisation ultrieure, vous pouvez l'enregistrer facilement comme favori. PhotoLab stocke tous vos favoris sous l'onglet Favoris. Vous pouvez mme crer des catgories (p. ex. Mes rglages) sous l'onglet.

Pour enregistrer un ou plusieurs filtres comme nouveau favori :

Cliquez sur

Enregistrer le filtre.

Dans la bote de dialogue qui s'affiche, entrez un nom de favori et slectionnez la catgorie dans laquelle vous souhaitez enregistrer le filtre. (Cliquez sur pour crer une catgorie)

Si vous voulez organiser vos favoris en catgories personnalises, cliquez sur l'option du Menu de l'onglet.

Utiliser le Studio de dcoupe d'images


Les Studio de dcoupe d'images est une puissant solution intgre vous permettant de dcouper des objets dans leur arrire-plan. Selon la composition de vos images, vous pouvez sparer le sujet d'intrt de son arrire-plan, soit en conservant le sujet (gnralement des personnes ou des objets, etc.) ou supprimer un arrire-plan uniforme simple (ciel, studio backdrop, p. ex.). Dans les deux cas, l'image dcoupe rsultante fait ressortir votre site du lot.

Images, animation et multimdia

333

Pour ouvrir le Studio de dcoupe d'images : 1. 2. Slectionnez une image dcouper. Cliquez sur Studio de dcoupe d'images dans la barre d'outils contextuelle qui s'affiche alors. Le Studio de dcoupe d'images s'ouvre.

Choisir un format de rendu


Il est essentiel de choisir un type de rendu avant de slectionner les zones conserver/supprimer. Avant la slection, vous pouvez choisir comme type de rendu un bitmap canal alpha ou dcoupage vectoriel. Votre choix dpend 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 diffrences.

334

Images, animation et multimdia

Type de rendu Bitmap canal alpha

Description et utilisation Pour dcouper des objets dont les bords ne sont pas nets. La transparence et le mlange des pixels sont utiliss sur le bord du contour pour produire des rsultats professionnels avec une interfrence ngligeable des couleurs d'arrire-plan. Le terme "alpha" dsigne le canal de transparence alpha d'une image 32 bits. Pour les bords plus nets. Une image dcoupe avec un contour de recadrage est cre. Vous pouvez ultrieurement 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'arrire-plan.

Bitmap dcoupage vectoriel

Pour crer un bitmap canal alpha : 1. 2. Slectionnez Bitmap canal alpha dans le menu droulant Type de rendu. (Facultatif) Dplacez la glissire Largeur pour dfinir le degr d'application du dgrad alpha l'intrieur du bord de la dcoupe. (Facultatif) Rglez la glissire Flou pour lisser le bord de la dcoupe.

3.

Pour crer un bitmap dcoupage vectoriel : 1. 2. Slectionnez Bitmap dcoupage vectoriel dans le menu droulant Type de rendu. (Facultatif) Rglez la glissire Dgrad pour appliquer un bord lisse ou flou l'intrieur du bord de la dcoupe.

Images, animation et multimdia

335

3. 4.

(Facultatif) Rglez la glissire Lissage pour lisser le bord de la dcoupe. (Facultatif) La glissire Dcompression agit comme un dcalage positif ou ngatif par rapport au bord de la dcoupe. Vous devrez cliquer sur Aperu pour vrifier chaque fois les paramtres de rendu.

Slectionner 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 gnralement le cas. Avec ces deux outils, le pinceau dessine une zone contour que vous souhaitez supprimer ou conserver (selon le type de pinceau slectionn). Un nombre paramtrable de pixels adjacents au contour se voit appliquer un dgrad. Pour faciliter l'opration de slection, plusieurs modes d'affichage sont disponibles pour afficher la slection. Les boutons Original, Teint et Transparent affiche respectivement l'image avec :

les zones de slection uniquement diverses teintes facilitant les slections complexes. les zones slectionner, sous forme d'un chiquier de transparence.

336

Images, animation et multimdia

Couleur d'arrire-plan

Pour le mode Transparent, une couleur d'arrire-plan diffrente peut tre dfinie (en bas du Studio) pour diffrencier les zones conserver ou supprimer.

Pour slectionner les zones d'image conserver/supprimer :

1.

Dans le Studio de dcoupe d'images, cliquez sur Pinceau Conserver ou sur Pinceau Supprimer gauche de l'espace de travail du Studio. (Facultatif) Slectionnez une taille de pinceau adapte la zone concerne.

2.

3.

(Facultatif) Dfinissez une valeur de Tolrance de croissance pour agrandir automatiquement la zone slectionne sous le pointeur (en dtectant les couleurs similaires celles de la slection active). Plus la valeur est leve, plus la zone slectionne s'tendra. Dslectionnez l'option pour dsactiver la fonction. l'aide du pointeur circulaire, tracez la zone conserver ou supprimer (en fonction de l'outil slectionn). Vous pouvez rpter l'opration jusqu' ce que vous soyez satisfait de la slection effectue. Le bouton effectue. Annuler rtablit la dernire slection

4.

Pour ajuster votre slection, vous pouvez alterner entre les pinceaux Conserver et Supprimer en appuyant temporairement sur la touche Alt.

Images, animation et multimdia

337

5.

Si vous avez choisi un rendu bitmap canal alpha, vous pouvez ajuster la zone conserver/supprimer l'aide du Studio de dcoupe d'images (uniquement aprs l'aperu). Les images dcoupage vectoriel peuvent tre dcoupes l'aide des outils standard de WebPlus. Cliquez sur OK pour crer votre dcoupe.

6.

Utilisez les outils Rtablir ou Gommer la retouche pour ajuster votre bitmal canal alpha aprs l'aperu.

Ajouter des animations


WebPlus permet d'ajouter plusieurs sortes d'effets d'animation spectaculaires une page web quelconque : des textes dfilants, des animations GIF (voir l'aide de WebPlus) et des fichiers Flash (.SWF). Vous pouvez prvisualiser l'animation et/ou personnaliser l'effet. Une fois positionnes 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.

Textes dfilants
La fonction Texte dfilant permet d'animer un titre ou un slogan sur un axe horizontal. Pour crer un texte dfilant :

Cliquez sur le bouton Insrer un texte dfilant dans la palette Mdia de la barre d'outils Objets Web.

338

Images, animation et multimdia

Pour modifier un texte dfilant dj dfini :

Double-cliquez sur la bannire. La bote de dialogue Insrer un texte dfilant rapparat et affiche les paramtres actifs.

Fichiers Flash
Un fichier Flash (*.SWF) est une animation utilisant le format Flash Player. (Flash est un programme vectoriel destin crer et afficher de petits fichiers sur le Web.) Des fichiers Flash peuvent tre ajouts votre page (un peu comme une image) et s'animent sans que vous ne soyez oblig d'en afficher un aperu dans votre navigateur (ni dans le volet d'aperu de WebPlus). Vous pouvez les couper, copier, dplacer et redimensionner comme d'autres images. Pour obtenir un aperu de quelques fichiers Flash, utilisez l'onglet Galerie qui propose une collection impressionnante de bannires Flash (chacune associe des paramtres Flash dj configurs) que vous pourrez facilement exploiter. Ces bannires sont conues pour vous permettre de personnaliser leur aspect (texte, images et combinaison de couleurs) sans exprience pralable du format Flash. Pour insrer un fichier Flash : 1. 2. Insrer un fichier Flash Cliquez sur le bouton dans la palette Mdia de la barre d'outils Objets Web. Utilisez la bote de dialogue qui s'affiche pour slectionner le fichier Flash ouvrir (cliquez sur Parcourir puis slectionnez votre fichier .SWF). Cliquez sur Options d'exportation pour dfinir si vous le souhaitez un nom de fichier et/ou un emplacement de fichier diffrents. Pour maintenir l'animation spare du fichier WebPlus (en utilisant un lien vers le fichier source), dsactivez la case Intgrer les fichiers dans le site.

Images, animation et multimdia

339

3.

(Facultatif) Dans le volet Paramtres, cliquez sur le bouton Ajouter... (ou Modifier) pour ajouter (ou modifier) des paramtres comme le nom ou la valeur du fichier. (Facultatif) Dans la zone Fichiers supplmentaires, constituez une bibliothque de fichiers (par exemple, des images) qui seront utilises dans l'animation Flash. Vous n'aurez ainsi aucune peine les retrouver. Cliquez sur le bouton Ajouter pour rechercher puis slectionner les fichiers ajouter (utilisez Ctrl+clic ou Maj+clic pour la slection de fichiers contigus ou non contigus). (Facultatif) La zone Afficher dtermine la prsentation de l'animation Flash sur votre page WebPlus. Faites des essais de rglages des options de lecture en boucle, de transparence, d'alignement, de dimension et de qualit. Cliquez sur OK.

4.

5.

6.

7.

apparat. Cliquez Le pointeur de collage d'image pour insrer le fichier une taille par dfaut ou faites glisser le pointeur afin d'en personnaliser la taille.

Pour modifier une bannire Flash :

Double-cliquez sur votre animation Flash

Ajouter du son et de la vido


WebPlus permet d'enrichir vos pages Web de fichiers audio et vido dans divers formats standard, en flux continu (streaming) ou non. En outre, WebPlus vous permet d'inclure dans votre site des vidos d'autres personnes dj hberges sur www.youtube.com.

340

Images, animation et multimdia

Son

En fait, PagePlus propose deux options de lecture audio : son d'arrire-plan, dans laquelle un son est charg et lu automatiquement lorsqu'une page donne est affiche pour la premire fois dans le navigateur du visiteur, et son associ, dclench par un clic (sur une icne 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.

Vido

La vido associe fonctionne comme le son associ. Les formats vido associs 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 tlchargs sur l'ordinateur de l'utilisateur avant de pouvoir tre lus, alors que les fichiers en flux continu (streaming) ncessitent un lecteur spcial qui place les donnes en mmoire tampon au fur et mesure de leur arrive et peut les lire avant que la totalit du clip soit tlcharge.) Vous pouvez inclure sur votre page Web des vidos YouTube dj publies sur Internet. Les vidos ellesmmes ne sont pas intgres dans votre projet. Lorsque vous placez une vido YouTube sur votre page, c'est son identifiant unique qui y est intgr. Il s'agit d'un lien cr sur votre page Web qui renvoie vers le site www.youtube.com. Cette mthode vous permet d'ajouter du contenu multimdia votre page Web sans devoir publier de vidos volumineuses.

Images, animation et multimdia

341

Grce au son d'arrire-plan et au son associ (ou vido associe), vous avez la possibilit d'intgrer le fichier source votre site, au lieu de le conserver sparment (rappelez-vous qu'il est impossible d'intgrer des vidos YouTube votre site). Mme si l'intgration d'un fichier augmente la taille du site, il s'agit de l'option par dfaut car elle vite de jongler entre des fichiers spars 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 intgrs et non intgrs. Pour ajouter un son d'arrire-plan sur une page : 1. Dans l'espace de travail, cliquez avec le bouton droit de la souris sur la page et slectionnez Proprits de la page. Sous l'onglet Effets, cochez Utiliser un fichier son, puis, dans la bote de dialogue Ouvrir, recherchez le fichier audio ajouter. Lorsque vous l'avez slectionn, cliquez sur OK. Si vous ne souhaitez pas intgrer le fichier, dsactivez l'option Intgrer 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. (Facultatif) Configurez les Options d'exportation... de manire attribuer un nom et un emplacement physique au fichier export (reportez-vous Dfinir les options d'exportation des images p. 317.)

2.

3. 4. 5.

342

Images, animation et multimdia

6.

Cliquez sur OK.

Le fichier son est tlcharg et lu lorsque la page Web est affiche dans un navigateur. Vous devez prvoir comment le visiteur pourra dmarrer la lecture d'un fichier mdia donn. WebPlus propose les mmes options de base pour les deux types de mdia :

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 mdia ou vous utilisez une zone dynamique sur une image. partir d'une miniature vido : vous cliquez sur la miniature d'une vido intgre pour lancer la lecture de la vido (vidos YouTube uniquement). partir d'une icne : WebPlus propose une icne prassocie au fichier mdia. Vous positionnez alors l'icne sur votre page. partir d'une image : vous slectionnez un fichier image externe que WebPlus importe et associe ensuite au fichier mdia. Ancr : un lecteur de mdia apparat sur votre page Web publie (plutt que d'apparatre une fois que l'utilisateur a cliqu sur un lien, une icne ou une image). Dans WebPlus, un marqueur apparat sur la page l'emplacement du lecteur.

Avec les deux premires options, le fichier mdia reste externe et ne peut pas tre intgr au site. Les options 3 5 vous offrent la possibilit d'intgrer le fichier mdia.

Images, animation et multimdia

343

Pour ajouter un son ou une vido associe un objet ou une zone dynamique : 1. Slectionnez l'objet ou la zone dynamique puis cliquez sur 2. Lien hypertexte dans la barre d'outils verticale.

Dans la bote de dialogue, slectionnez Fichier pour crer un lien hypertexte vers un fichier son sur votre disque dur Cliquez sur Parcourir, recherchez le fichier mdia utiliser, puis cliquez sur Ouvrir. Si vous ne souhaitez pas intgrer le fichier, dsactivez l'option Intgrer l'image au site. (Facultatif) Configurez les Options d'exportation... de manire attribuer un nom et un emplacement physique au fichier export (reportez-vous Dfinir les options d'exportation des images p. 317.) Toute une gamme de fentres ou de cadres peut tre choisie selon la manire dont vous souhaitez afficher la destination du lien. (Reportez-vous Ajouter des liens hypertextes et des ancres p. 100.). Cliquez sur OK.

3. 4. 5.

6.

7.

Pour intgrer une vido YouTube : 1. Ouvrez le site Web www.youtube.com dans votre navigateur et choisissez la vido YouTube que vous souhaitez associer votre page. Copiez l'adresse URL de la vido (ou le code d'intgration). Ils contiennent un identifiant alphanumrique, par exemple ySnp4YXU6JQ, qui identifie le clip vido de manire unique.

2.

344

Images, animation et multimdia

3. 4. 5.

Cliquez sur le bouton Intgrer une vido YouTube dans la palette Mdia de la barre d'outils Objets Web. Dans la bote de dialogue, collez dans la zone de saisie l'URL de la vido. (Facultatif) Cochez/dcochez les cases pour activer/dsactiver les options suivantes :

Dmarrage automatique Lit automatiquement la vido une fois la page charge. Boucle Lit la vido en boucle continue. Afficher les infos sur la vido Affiche le titre et la note de la vido. Autoriser le mode Plein cran Ajoute la fentre de la vido un bouton permettant l'utilisateur de visionner la vido en mode Plein cran. Inclure les vidos associes (Si l'option Boucle est coche, la fonction Inclure les vidos associes est automatiquement dsactive. Pour l'activer, vous devez dsactiver la case cocher Boucle.) Affiche, la fin de la vido, les vidos recommandes associes au contenu de la vido en cours de lecture sur votre page. Affiche galement une barre de recherche permettant l'utilisateur de parcourir et de lire d'autres vidos YouTube sur votre site. Lire en HD Lit la vido en haute dfinition (si l'option est disponible).

Images, animation et multimdia

345

Afficher la bordure Ajoute une bordure autour de la fentre de la vido video window. Cliquez sur les deux boutons pour accder aux menus droulants et slectionnez jusqu' deux couleurs.

6.

Coller Cliquez sur OK. Positionnez le curseur l'endroit o vous souhaitez placer le coin suprieur gauche de votre vido. Pour insrer la vido une taille par dfaut, cliquez une fois sur la page. - ou Pour dfinir la taille de la vido insre, faites glisser le pointeur puis relchez le bouton de la souris. Vous pouvez conserver les proportions en maintenant la touche Maj enfonce pendant que vous faites glisser le pointeur.

7.

Sur certains sites Web, il peut tre ncessaire que la ou les vidos YouTube soient remplaces par une autre de manire occasionnelle ou rgulire. Par exemple, le site peut contenir un "top 10" de vidos qui change rgulirement ou bien des vidos concernant l'actualit. Dans tous les cas, WebPlus peut remplacer les vidos sans modifier leur emplacement sur la page. Pour remplacer votre vido YouTube par une autre, double-cliquez sur une vido YouTube existante. Dans la bote de dialogue, collez dans la zone de saisie une URL de vido que vous avez pralablement copie. Pour crer un lien partir d'un bouton, d'une image ou d'un lecteur ancr : 1. Insrer un son ou Cliquez sur le bouton Insrer une vido dans la palette Mdia de la barre d'outils Objets Web.

346

Images, animation et multimdia

2. 3. 4. 5.

Parcourez vos dossiers pour localiser le nom du fichier mdia. Si vous ne souhaitez pas intgrer le fichier, dsactivez l'option Intgrer l'image au site. Slectionnez une option d'affichage du lien (bouton, lecteur ou image). Cliquez sur OK pour fermer la bote de dialogue, puis cliquez (ou cliquez et faites glisser le pointeur) pour positionner l'icne, l'image ou le marqueur sur votre page.

La Galerie photos
La gnralisation simultane de l'utilisation des appareils photo numriques et des connexions haut dbit a runi les conditions optimales pour la diffusion des collections de photos sur des pages Web. Diverses raisons peuvent inciter le faire et en voici un chantillon :

publication de photos familiales l'intention de parents gographiquement loigns ; occasions particulires (ftes, Nol, runions, vacances) ; collections (par exemple, animaux, timbres, etc.).

Dans WebPlus, vous pouvez ajouter une galerie photos Flash ou JavaScript n'importe quelle page Web. Grce la puissance du format Flash, vous pouvez galement adopter des styles de galerie accrocheurs, offrant chacun une manire diffrente de faire dfiler les photos. Les galeries photos vous permettent de naviguer parmi les photos en utilisant une barre de commande suprieure ou infrieure ou bien, en fonction du style de galerie, en utilisant les moyens suivants :

Images, animation et multimdia

347

survol des miniatures (ci-contre) miniatures verticales grilles de photos piles de photos tables lumineuses

Les photos peuvent tre importes partir d'un fichier ou d'un dossier, ou partir d'un priphrique TWAIN (appareil photo numrique/scanner). Par dfaut, les photos de grande taille importes dans la galerie sont automatiquement redimensionnes et exportes la rsolution maximale de 720 x 540 pixels. Si la rsolution des photos est infrieure 720 x 540 pixels, elles restent inchanges. Lors de l'importation, vous pouvez grer simultanment plusieurs photos slectionnes.

Rorganisez vos photos selon vos prfrences d'affichage. Effectuez une dition "en gros". Vous pourrez ajouter une lgende, effectuer une rotation*, et rgler la luminosit et le contraste. Affectez des balises Exif et crez des lgendes personnalises. Crez et grez vos albums photos.

*La rotation automatique des photos numriques (paysage portrait) est possible (si elle est prise en charge par lappareil photo).

348

Images, animation et multimdia

Crer la galerie photos


La galerie photos est insre sur la page, comme une simple image, lorsque les images ont t rcupres partir d'un fichier, d'un dossier, d'un appareil photo ou d'un scanner. Toutes les photos sont affiches au format JPG quels que soient le type initial de la photo et les paramtres dfinis dans Fichier/Proprits du site/Images. Pour insrer une galerie photos : 1. Cliquez sur le bouton Insrer une galerie photos dans la palette Image de la barre d'outils Objets standard. (Facultatif) Cliquez sur Avanc pour modifier la taille par dfaut et les paramtres de qualit des photos. La taille par dfaut de la photo correspond la rsolution maximale laquelle les images sont exportes. Slectionnez le type de galerie photos que vous souhaitez utiliser ;

2.

3.

Galerie photos Flash professionnelle (les visiteurs de votre site doivent installer Flash 9 et ultrieur.) Galerie photos Flash (les visiteurs de votre site doivent installer Flash 8 et ultrieur.) Galerie photos JavaScript

Images, animation et multimdia

349

4.

Cliquez sur Suivant. La bote de dialogue qui apparat vous permet :

d'ajouter des fichiers individuels Cliquez sur le bouton Ajouter des fichiers pour rechercher et slectionner le(s) fichier(s) image(s) ouvrir. Maintenez la touche Ctrl ou Maj enfonce pour slectionner plusieurs fichiers non adjacents ou adjacents. La fentre Aperu vous permet de prvisualiser les photos que vous ajoutez votre slection. - ou -

d'ajouter toutes les photos d'un dossier Cliquez sur le bouton Ajouter un dossier pour rechercher un dossier et le slectionner pour ajouter les photos qu'il contient. - ou -

d'ajouter des photos provenant d'un appareil photo numrique ou d'un scanner Cliquez sur le bouton Ajouter une interface TWAIN. Si ncessaire, slectionnez votre source TWAIN avant le processus d'acquisition en utilisant l'option Slectionner une source dans le menu droulant. Vous pouvez aussi spcifier un dossier dans lequel les photos seront enregistrs aprs avoir t numriss l'aide de l'option Dfinir un dossier d'exportation dans le menu droulant. Cliquez sur Numriser pour obtenir vos photos. Pour supprimer une ou toutes les miniatures, slectionnez-les et cliquez sur le bouton Supprimer.

Vos photos apparaissent sous forme de miniatures dans la bote de dialogue Galerie photos.

350

Images, animation et multimdia

5.

(Facultatif) Slectionnez une ou plusieurs miniatures de la galerie pour effectuer les oprations suivantes ;

Pour modifier l'ordre des photos, utilisez les boutons Haut et Bas en bas de la bote de dialogue. - ou Cliquez sur de position. Dplacer vers et entrez un numro

Pour une rotation par pas de 90 dans le sens horaire, cliquez sur le bouton Rotation. - ou Cliquez sur la colonne Rotation droite et slectionnez un incrment de rotation dans la liste droulante.

Pour ajouter une lgende, cliquez sur la colonne Lgende et saisissez du texte, des numros et des caractres. Pour crer des lgendes partir de balises Exif, IPTC et XMP, cliquez sur Mise en forme des lgendes. Slectionnez un type de balise dans la liste droulante, puis cliquez sur Ajouter une balise. Un aperu s'affichera dans le champ Aperu de la lgende. Slectionnez o ajouter les lgendes : Ajouter au dbut de la lgende, Ajouter la fin de la lgende ou craser la lgende. Cliquez sur OK. Pour rechercher et remplacer des lgendes, cliquez sur Trouver une lgende. (Voir la rubrique Utiliser la fonction Rechercher et remplacer p. 244.)

Images, animation et multimdia

351

Pour rgler la luminosit et le contraste, cliquez sur les colonnes respectives et entrez des valeurs comprises entre 0 et 100. Pour remplacer une photo, effectuez un clic droit et cliquez sur le bouton Replacer l'image. (Galerie photos Flash professionnelle uniquement) Pour organiser des photos dans des albums, cliquez Modifier les albums. Cochez la case sur Activer les albums dans la galerie et slectionnez le nombre d'albums utiliser, jusqu' un maximum de 24. Attribuez vos albums un Titre, une Description et ventuellement une Musique de fond jouer lorsque l'album s'affiche dans la galerie. Cliquez sur OK.

(Galerie photos Flash professionnelle uniquement) Pour ajouter des liens hypertextes aux photos, Modifier le lien hypertexte. Dans cliquez sur la bote de dialogue, choisissez un type de lien hypertexte ; vous pouvez ne pas dfinir de lien, dfinir des liens hypertextes vers l'image originale, ou vers une autre cible de lien (p. ex. une page du site ou une page Internet). Pour cette dernire option, vous devez double-cliquer sur "Aucun lien" pour choisir la cible du lien.

6.

Pour inclure les photos slectionnes sur votre site, cochez Intgrer les images. Par dfaut, les photos ne sont pas incluses dans le fichier WebPlus, mais associes par des liens menant au fichier source. Cliquez sur Suivant.

7.

352

Images, animation et multimdia

8.

Choisissez un style de galerie dans le volet Style de la galerie qui se trouve en haut de la bote de dialogue. Chaque type de galerie propose un moyen diffrent de naviguer d'une photo l'autre. Essayez chaque style jusqu' ce que vous trouviez un style qui vous plat dans la fentre Aperu. Vous remarquerez qu'une barre de commande apparat dans chaque style pour permettre aux visiteurs de naviguer parmi les photos une fois votre site publi. (Facultatif) Une fois le style slectionn, utilisez le volet de droite pour modifier diverses options de la galerie (musique de fond, couleur de la police, lecture automatique, etc.). Certaines options sont spcifiques un style de galerie. Il en est ainsi de l'activation/dsactivation du survol des miniatures, du nombre de miniatures affiches, du nombre de photos par piles, de la cible de lien hypertexte, etc. L'option quantit de flou permet de dfinir l'intensit du flou lors du passage d'une photo l'autre. La fonction de lecture automatique permet de dmarrer automatiquement la lecture du diaporama intervalles fixes dont la dure peut tre configure (en secondes). Si cette fonction n'est pas active, il est possible d'utiliser la barre de commande qui s'affiche sur la galerie photos pour lancer le diaporama une fois le site en ligne.

9.

10. Cliquez sur Terminer.

11.

Pour insrer une galerie la taille par dfaut, placez le pointeur o vous souhaitez que la galerie apparaisse sur la page, puis cliquez. - ou Pour dfinir la taille de la galerie, tracez une zone avec le pointeur, puis relchez le bouton de la souris.

Images, animation et multimdia

353

Modifier la galerie photos


Une fois la galerie photos ajoute la page Web, cette dernire peut tre modifie. Il est possible d'ajouter, de supprimer et de faire pivoter des photos, de leur ajouter des lgendes ou de leur appliquer des rglages de luminosit et de contraste. Vous pouvez galement modifier le style de galerie, les liens hypertextes des photos, la musique de fond et la couleur des lgendes, et activer la lecture automatique (les photos dfileront automatiquement). Si plusieurs galeries sont disponibles sur votre site, vous pouvez grer les liens hypertextes dfinis l'aide de l'option Lien hypertexte du Gestionnaire de site. Slectionnez Image de la galerie dans le menu droulant Type. Pour modifier une galerie photos : 1. 2. Slectionnez une galerie dj prsente sur votre page Web. Double-cliquez sur la galerie. La bote de dialogue Galerie photos apparat. Les options proposes sont identiques celles disponibles au moment de la cration de la galerie. 3. Pour modifier un attribut commun toutes les photos, slectionnez les photos l'aide de la case cocher situe en haut de la colonne des images, puis apportez vos modifications l'aide des options situes en bas de la liste de photos.

Une fois que vous avez plac une galerie sur la page, vous pouvez galement faire glisser un angle de l'objet galerie afin de le redimensionner. Appuyez simultanment sur la touche Ctrl pendant le dplacement afin de conserver les proportions.

354

Images, animation et multimdia

Lier des images distantes


Il est possible de crer un lien vers toute image prsente sur Internet. Nanmoins, pour viter toute infraction un copyright, il est conseill d'utiliser des images provenant d'un service d'hbergement d'images fiable. Certes, vous pouvez toujours crer des liens directs vers des images d'autres sites (celui d'un ami ou d'un collgue, par exemple) lorsque vous ne risquez pas de poursuite en justice, mais la moindre des politesses exige de commencer par en demander l'autorisation ! Pour insrer une image distante : 1. 2. 3. 4. Ouvrez le menu Insertion/Image/Lien distant. Dans la bote de dialogue, saisissez l'URL absolue de l'image. Cliquez sur OK. Le pointeur de la souris prend la forme d'un curseur de . Les oprations suivantes vous collage d'image permettent de dterminer la taille et l'emplacement de dpart de l'image. 5. Pour insrer l'image sa taille par dfaut, vous n'avez qu' cliquer sur le bouton gauche de la souris. - ou Pour dfinir la taille de l'image insre, cliquez et dplacez la souris pour dfinir une zone, puis relchez le bouton de la souris.

13

Lignes, contours, formes et effets

356

Lignes, contours, formes et effets

Lignes, contours, formes et effets

357

Tracer et modifier des lignes


WebPlus propose des outils Crayon, Ligne droite et Plume pour tracer des lignes droites, des lignes main leve et des lignes courbes. L'outil Crayon permet de dessiner des lignes et des formes courbes main leve.

L'outil Ligne droite sert tracer des lignes droites, des traits en haut ou en bas de la page ou des lignes horizontales pour sparer des sections ou mettre en valeur des titres.

L'outil Plume permet de joindre une srie de segments de lignes (courbes ou droits) en reliant les points par des clics de souris.

Vous pouvez fermer une courbe (en joignant les extrmits de ligne) pour crer une forme personnalise (voir Tracer et modifier des formes p. 364 pour plus d'informations)

358

Lignes, contours, formes et effets

Tracer des lignes


Pour tracer une ligne main leve (avec l'outil Crayon) : 1. 2. Crayon dans la palette Ligne de Slectionnez l'outil la barre d'outils Objets standard. Cliquez l'emplacement o vous souhaitez commencer la ligne, et maintenez le bouton de la souris enfonc pendant que vous dessinez. La ligne apparat immdiatement et suit les mouvements de votre souris. Pour terminer la ligne, relchez le bouton de la souris. La ligne est automatiquement lisse, utilisant un minimum de nuds. Pour prolonger la ligne, placez le pointeur sur l'un des nuds de fin rouges. Le pointeur se transforme alors en symbole +. Cliquez sur le nud et dplacez le pointeur pour ajouter un segment.

3.

4.

Pour tracer une ligne droite ( l'aide de l'outil Ligne droite) : 1. 2. Ligne droite dans la palette Slectionnez l'outil Ligne de la barre d'outils Objets standard. Cliquez l'emplacement o vous souhaitez commencer la ligne, et dplacez la souris. La ligne apparat immdiatement. Pour chelonner des angles de 15 par rapport la ligne droite, maintenez la touche Maj enfonce tout en faisant glisser la souris. Ceci permet de crer aisment des lignes verticales ou horizontales. 3. Pour prolonger la ligne, placez le pointeur sur l'un des nuds de fin rouges. Le pointeur se transforme alors en symbole +. Cliquez sur le nud et dplacez le pointeur pour ajouter un segment.

Lignes, contours, formes et effets

359

Pour tracer un ou plusieurs segments de ligne (avec l'outil Plume) : 1. Plume dans la palette Ligne de Slectionnez l'outil la barre d'outils Objets standard. Dans la barre d'outils contextuelle, trois boutons permettent de slectionner le type de segment tracer : Un segment droit est simplement une ligne droite reliant deux nuds. (Raccourci : appuyez sur 1) Un segment de Bzier est courb, avec des poignes de contrle permettant un ajustement prcis. (Raccourci : appuyez sur 2)

Les segments intelligents, qui n'ont pas de poignes de contrle visibles, relient chaque nud par une courbe calcule automatiquement. Ils sont particulirement utiles pour tracer des lignes autour d'objets et d'images courbes. (Raccourci : appuyez sur 3) 2. Slectionnez 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 crer un nouveau nud l'endroit o vous souhaitez terminer le segment. Tout en maintenant la touche Maj enfonce, cliquez pour aligner le segment par angles multiples de 15 (utile pour les jonctions rapides angle droit).

360

Lignes, contours, formes et effets

Pour un segment de Bzier, cliquez de nouveau pour dfinir un nouveau nud et tirez sur une poigne de contrle partir de ce nouveau nud. Les poignes de contrle fonctionnent comme des aimants pour modeler la courbe. La distance entre les poignes dtermine la profondeur de la courbe qui en rsulte. Cliquez de nouveau l'endroit o le segment doit s'arrter. Un segment courbe apparat. Le segment termin devient slectionnable.

Pour dessiner un segment intelligent, cliquez nouveau pour crer un nouveau nud. Le segment apparat sous la forme d'une courbe lisse et rgulire (sans poignes de contrle visibles) entre le nouveau nud et le nud prcdent. Avant de relcher le bouton de la souris, vous pouvez faire glisser votre souris afin d'inflchir le trait comme pour incurver un morceau de fil de fer. Si le nud d'angle prcdent sur le trait est galement intelligent, le mouvement de flexibilit s'tendra jusqu'au segment prcdent. Tout en maintenant la touche Maj enfonce, cliquez sur la page pour crer un nouveau nud align par angles de 15 avec le nud prcdent. Pour tendre une ligne existante, rptez l'tape 2 pour chaque nouveau segment. Chaque segment peut tre d'un type diffrent. Pour terminer la ligne, appuyez sur chap, effectuez un double-clic n'importe o ou slectionnez un autre outil.

3.

4.

Modifier des lignes


Utilisez l'outil Pointeur avec la barre contextuelle pour ajuster les lignes une fois dessines. Les techniques sont identiques, que vous modifiiez un objet ligne spar ou le contour d'une forme ferme. Lorsque vous slectionnez un type de ligne, des nuds carrs vous permettent de remodeler les lignes.

Lignes, contours, formes et effets

361

Voir lAide de WebPlus pour plus dinformations sur la modification des traits.

Dfinir les proprits du contour


Toutes les lignes, y compris les contours qui englobent des formes, prsentent de nombreux attributs, tels que la couleur, l'paisseur, l'chelle, l'extrmit, la jointure (angle) et l'alignement de la passe. Vous pouvez modifier ces proprits pour les lignes main leve, droites ou courbes, ainsi que pour le contour des formes. Les zones de texte, les images, les tableaux et les textes artistiques comportent galement des proprits de contour. Dans WebPlus, vous pouvez contrler la position de la passe (largeur de contour) par rapport au trac de l'objet, c'est--dire le contour qui dfinit la limite de l'objet. Pour modifier les proprits du contour d'un objet slectionn :

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 slectionn partir d'un mlangeur de couleurs. Le contour et le remplissage de l'objet peuvent tre de couleur unie ou dgrade et tre dots d'effets bitmaps et de transparence.

Utilisez l'onglet Contour, la barre d'outils contextuelle (qui s'affiche lorsqu'une ligne est slectionne) ou la bote de dialogue Contour et cadre pour modifier l'paisseur ou le type de la bordure de la forme, ou d'autres proprits. Slectionnez une paisseur de ligne et utilisez les listes droulantes pour slectionner le type de ligne.

Dans l'onglet Contour, la barre d'outils contextuelle, ou la bote de dialogue Contour et cadre, le menu droulant propose les styles suivants : Aucun, Simple, Calligraphique, ainsi que plusieurs

362

Lignes, contours, formes et effets

styles de ligne Pointill et Double, comme le montre l'illustration ci-dessous.

Les lignes peuvent galement tre personnalises par d'autres techniques : Pour les pointills, slectionnez parmi cinq styles de lignes (voir ci-dessus). - ou (onglet et bote de dialogue uniquement) Dplacez la glissire Contour tiret pour dfinir la longueur d'ensemble du motif (le nombre de cases gauche de la glissire) et la longueur des traits (le nombre de ces cases qui sont noires). Les illustrations ci-dessous reprsentent 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 dessins l'aide d'un stylet pointe carre tenu un certain angle), slectionnez le style de ligne calligraphique (cicontre) dans le menu droulant, puis utilisez la case Angle calligraphique afin de dfinir l'angle de la pointe du stylet, comme illustr dans les exemples ci-dessous.

Vous pouvez galement modifier l'extrmit et la jointure (angle) d'une ligne, l'endroit o deux lignes se rejoignent. La bote de dialogue Contour et bordure offre toutes les proprits de contour, parmi lesquelles les options Slection de la bordure, la nuance/teinte, l'chelle des extrmits de ligne, ainsi que les bordures dcoratives pour encadrer les photos. Pour accder l'ensemble des proprits du contour :

Cliquez sur le bouton Contour/Bordure dans la palette Remplissage de la barre d'outils verticale. Dans la bote de dialogue, l'onglet Contour permet de rgler toutes les proprits de contour (dcrites cidessus), tandis que l'onglet Bordure propose des bordures de photos.

364

Lignes, contours, formes et effets

Tracer et modifier des formes


Les Formes pleines sont des objets prdfinis, de diverses formes, que vous pouvez placer immdiatement sur la page.

Aprs avoir trac une Forme pleine, vous pouvez transformer sa forme d'origine l'aide de poignes de contrle et modifier ses proprits par exemple appliquer des couleurs unies/dgrades, des bitmaps (notamment avec vos propres images bitmap !) et des effets de transparence au contour comme au remplissage de l'objet. Un autre moyen de crer une forme consiste tracer une ligne (ou une srie de segments de lignes) et connecter son nud de dpart et son nud de fin pour crer une forme ferme.

Formes pleines
La palette Forme pleine de la barre d'outils Objets standard comprend de nombreuses formes frquemment utilises, notamment des rectangles, des ovales, des flches, des polygones, des toiles, des cubes et des cylindres.

Une fois ajoute la page, la palette des Formes pleines, situe audessus de l'espace de travail, vous permet galement d'ajuster l'paisseur du contour, la couleur et le style, etc.

Lignes, contours, formes et effets

365

Pour crer une Forme pleine : 1. 2. Cliquez sur la palette Forme pleine de la barre d'outils Objets standard et slectionnez une forme. Cliquez sur la page pour crer une forme avec une taille par dfaut. - ou Faites glisser le pointeur sur la page pour dfinir la taille de la forme. Lorsque la forme obtient la taille souhaite, relchez le bouton de la souris. Pour dessiner une forme contrainte (comme un cercle) :

Maintenez la touche Maj enfonce tandis que vous faites glisser le pointeur.

Toutes les Formes pleines peuvent tre positionnes et redimensionnes, mais aussi faire l'objet d'une rotation et d'un remplissage. En outre, vous pouvez les transforme l'aide des poignes ajustables situes autour de la Forme pleine. Chaque forme est modifie de faon logique. Pour modifier l'aspect d'une Forme pleine : 1. Cliquez sur la Forme pleine pour afficher une ou plusieurs poignes coulissantes autour de sa forme. Elles sont diffrentes des poignes de slection "intrieures". Chaque Forme pleine comporte des poignes spcifiques ayant une fonction particulire. Pour modifier l'aspect d'une Forme pleine, faites glisser ses poignes. Pour connatre la fonction de chaque poigne avec une forme particulire, dplacez l'outil Pointeur sur la poigne et lisez la barre d'tat.

2.

366

Lignes, contours, formes et effets

Formes fermes
Ds que vous dessinez ou slectionnez une ligne, les nuds de la ligne apparaissent. Les nuds symbolisent les extrmits de chacun des segments d'une ligne. Les courbes main leve comportent gnralement plusieurs nuds ; les segments de ligne droite ou courbe n'en comptent que deux. Vous pouvez crer une forme en traant une ligne partir de son point de dpart.

Pour transformer une ligne slectionne en une forme :

Slectionnez la ligne l'aide de l'outil Pointeur et cliquez sur le bouton Fermer la courbe de la barre d'outils contextuelle.

Vous pouvez galement ouvrir une forme pour lui ajouter un ou plusieurs segments.

Lignes, contours, formes et effets

367

Pour briser une ligne ou une forme : 1. l'aide de l'outil Pointeur, slectionnez le nud l'endroit o vous souhaitez ouvrir la forme. Ouvrir la courbe de la barre Cliquez sur le bouton d'outils contextuelle. La ligne est divise en deux. Une forme devient alors une ligne dont le nud slectionn est divis en deux nuds situs aux extrmits de la nouvelle ligne. Vous pouvez prsent utiliser l'outil Pointeur pour remodeler la ligne si ncessaire.

2.

3.

Modifier des formes

Utilisez la glissire Largeur de l'onglet Contour pour modifier l'paisseur du trait ou le type de bordure de la forme. Pour un style de ligne diffrent (pointills, tirets, etc.), cliquez sur la liste droulante centrale pour l'appliquer. Utilisez l'onglet Couleur ou chantillons pour modifier le contour de la forme ou sa couleur de remplissage (unie, dgrad, bitmap). Pour plus d'informations, reportez-vous Appliquer des couleurs unies ou Utiliser des remplissages dgrads et bitmap. Utilisez l'onglet Transparence pour appliquer un effet de transparence dgrade ou bitmap. Pour plus de dtails, voir Utiliser des effets de transparence.

Appliquer des effets de filtre 2D


WebPlus fournit diffrents effets de filtre qu'il est possible d'utiliser pour transformer un objet. Les effets de filtre 3D vous permettent de crer l'illusion d'une surface texture ; ces effets sont prsents dans une autre section (p. 372). Cette section est

368

Lignes, contours, formes et effets

consacre exclusivement aux effets 2D. Les exemples ci-dessous montrent chacun des effets de filtre 2D appliqus la lettre "A".

Ombre porte

Ombre interne

Lumire externe

Lumire interne

Biseau interne

Biseau externe

Relief

Estampage creux

Flou gaussien

Flou zoom

Flou radial

Flou directionnel

Remplissage de couleur

Dgrad

Contour

Rflexion

Lignes, contours, formes et effets

369

L'onglet Styles du Studio offre un ventail d'effets de filtre 2D prts l'emploi. Chacune des diffrentes catgories propose un ensemble d'effets prdfinis tels que des ombres, des biseaux, des reflets, de flous, etc. De subtiles variations de l'effet sont proposes dans chaque catgorie. Cliquez sur une miniature pour appliquer l'effet l'objet slectionn.

Pour une matrise parfaite de vos effets de filtre 2D, vous pouvez utiliser Effets de filtre. Pour appliquer un effet de filtre 2D : 1. Effets Slectionnez un objet et cliquez sur le bouton de filtre dans la palette Effets de la barre d'outils verticale. Pour appliquer un effet particulier, cochez la case correspondante dans la liste de gauche. Pour ajuster les proprits d'un effet spcifique, slectionnez son nom et dfinissez les options de la bote de dialogue. Rglez les glissires ou saisissez des valeurs spcifiques pour modifier l'effet associ. Vous pouvez galement slectionner une glissire et utiliser les flches du clavier. Les options peuvent changer d'un effet l'autre.

2. 3.

370

Lignes, contours, formes et effets

4.

Cliquez sur OK pour appliquer l'effet l'objet slectionn ou sur Annuler pour abandonner les modifications.

Crer des rflexions


L'ajout d'une rflexion verticale un objet est un moyen trs simple de donner du relief une page Web. L'effet est particulirement saisissant lorsqu'il est appliqu une image mais donne des rsultats tout aussi intressants lorsqu'il est appliqu du texte artistique, par exemple au titre d'une page ou au texte d'une bannire. Un ensemble de paramtres vous permettent de dfinir la hauteur, l'opacit, le dcalage et le niveau de flou.

Crer des contours


WebPlus vous permet d'ajouter un contour de couleur un objet, notamment un caractre ou une forme (en tant qu'effet de filtre). Vous pouvez dfinir la couleur de remplissage, les paramtres de transparence et le mode de fusion. Vous pouvez galement appliquer au contour un remplissage de type dgrad, 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'intrieur ou l'extrieur 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 dsactiv. 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 bote de dialogue Effets de filtre.

Lignes, contours, formes et effets

371

Utiliser l'outil Ombre


Les ombres sont trs utiles pour ajouter un certain style et de la profondeur votre travail, notamment sur les images, les objets texte et les formes. Pour vous aider en crer 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 complte libert dans la cration des effets d'ombre, vous permettant d'ajouter des ombres de base ou bords inclins rglables tout objet WebPlus.

Ombres de base (gauche) et oblique (droite) appliques une Forme pleine carre. Le rglage de la couleur des ombres, de leur opacit, de leur flou, et de leur chelle/distance est possible directement sur la page grce des nuds qui peuvent tre dplacs (ou par une barre d'outils contextuelle). Il est possible de modifier les nuds vers l'intrieur ou l'extrieur partir de l'origine de l'ombre pour modifier le flou et l'opacit. Pour appliquer une couleur diffrente, slectionnez le nud couleur, puis choisissez une couleur dans l'onglet Couleur ou chantillons. Selon qu'il s'agit d'une ombre de base ou incline, l'origine peut se trouver au centre (illustration cidessous) ou au bord de l'objet.

372

Lignes, contours, formes et effets

(A) Flou , (B) Origine de l'ombre, (C) Opacit, (D) Couleur, (E) Mise l'chelle Aprs avoir cr une ombre, vous pouvez l'ajuster selon vos besoins dans la bote de dialogue Effets de filtre.

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 crer l'illusion d'une surface texture sur l'objet. Vous pouvez utiliser la bote de dialogue Effets de filtre pour appliquer un ou plusieurs effets au mme objet. Gardez l'esprit qu'un effet 3D ne donne aucun rsultat sur un objet sans remplissage.

L'onglet Styles du Studio est un point de dpart pour commencer tester les effets de filtre 3D. Chacune des diffrentes catgories propose un ensemble d'effets 2D et 3D prdfinis, comportant diffrents paramtres.

Lignes, contours, formes et effets

373

Vous verrez divers modles de surfaces et de textures 3D runis dans des catgories thmatiques (Modles Dfaut, Modles - Amusant, Modles - Matriaux, et Texture). La catgorie Modles - Matriaux propose des effets ralistes tels que Verre, Mtallique, Bois, etc. Cliquez sur une miniature pour l'appliquer l'objet slectionn. Si l'objet est de la mme couleur, le rsultat sera instantan ! Vous pouvez aussi personnaliser l'un des effets proposs dans l'onglet Styles ou appliquer un ou plusieurs effets spcifiques l'aide de l'option Effets de filtre. Pour appliquer des effets de filtre 3D : 1. 2. 3. Effets de filtre de la palette Cliquez sur le bouton Effets dans la barre d'outils verticale Cochez la case Effets 3D gauche. La case clairage 3D est coche par dfaut. Ajustez les glissires principales pour modifier les proprits gnrales des effets 3D que vous avez slectionns.

Flou dtermine l'intensit du lissage. Plus le flou est lev, plus les modifications de hauteur semblent graduelles et importantes. Profondeur dtermine l'tendue des modifications de la profondeur.

374

Lignes, contours, formes et effets

Le bouton est enfonc par dfaut. Il associe les deux glissires afin que les modifications importantes de la profondeur soient adoucies par le paramtre Flou. Pour rgler les glissires sparment, cliquez sur le bouton.

4.

(Facultatif) Si ncessaire, cliquez sur le bouton Afficher/Masquer l'aperu pour afficher le volet d'aperu. Si vous affichez ce volet, les effets seront uniquement appliqus l'objet prsent dans la zone d'aperu. Si vous masquez ce volet (en cliquant de nouveau sur ce bouton), les effets de filtre seront appliqus directement l'objet sur la page. La premire mthode vous permet de paramtrer les effets de filtre sans tre gn par la prsence d'autres objets. Utilisez les boutons d'augmentation ou de rduction du facteur de zoom ou entrez un facteur de zoom pour augmenter ou rduire le niveau de dtails. Dans la liste des effets 3D, slectionnez un effet et testez les paramtres disponibles.

5.

Utiliser les styles d'objets


Les styles de l'objet rcompensent vos efforts de la mme manire que les styles de texte et les combinaisons de couleurs. Lorsque vous avez dfini un ensemble d'attributs souhait, des proprits telles que la couleur de ligne, le remplissage, la bordure, etc., vous pouvez enregistrer cet ensemble sous un style. WebPlus reconnat les objets utilisant ce style, ce dernier apparat dans l'onglet Styles et peut ainsi tre appliqu de nouveaux objets.

Lignes, contours, formes et effets

375

L'onglet Styles comporte diffrentes galeries de styles prdfinis que vous pouvez appliquer tout objet ou personnaliser selon vos gots. Les catgories d'effets proposent des galeries telles que Flous, 3D, Contour, Maillages, Ombres, Matriaux (mtaux, p. ex.), etc. Chaque catgorie comporte des souscatgories. Pour appliquer un style de l'objet un ou plusieurs objets : 1. 2. Cliquez sur l'onglet Styles. Dveloppez la liste droulante pour slectionner une catgorie de styles (p. ex., Flous), puis choisissez une sous-catgorie dans la fentre infrieure. Affichez sous forme de miniatures les styles disponibles (les rouages s'affichent par dfaut) dans la fentre. Cliquez sur une miniature de style pour l'appliquer aux objets slectionns.

3. 4.

Pour supprimer un style de l'objet d'une galerie :

Cliquez avec le bouton droit de la souris sur la miniature et slectionnez la commande Supprimer.

Pour dissocier un objet de sa dfinition de style :

Cliquez avec le bouton droit de la souris sur l'objet et choisissez Format/Style de l'objet/Dissocier.

376

Lignes, contours, formes et effets

Enregistrer des styles d'objet


Pour crer 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/Crer.

Pour enregistrer un style d'objet d'un site globalement : 1. 2. Slectionnez la commande Enregistrer les paramtres par dfaut du menu Outils. Dans la bote de dialogue, cochez Styles d'objets, puis cliquez sur Enregistrer.

Ajouter une troisime dimension (3D instantane)


La fonction 3D instantane permet de transformer facilement des formes plates (voir ci-dessous) et du texte en objets trois dimensions.

WebPlus permet de contrler les paramtres d'effets 3D suivants :

biseau : vous pouvez utiliser plusieurs effets prdfinis concaves ou convexes ou crer votre propre effet l'aide d'un diteur de profil de biseau personnalis. clairage : jusqu' huit sources de lumire colores ditables peuvent tre positionnes sparment pour produire des effets de lumire spectaculaires.

Lignes, contours, formes et effets

377

effets de tour : l'diteur de profil de rotation et la la commande d'extrusion permettent de crer des objets dots d'un contour (un bouchon de lige, par exemple). texture : vous pouvez contrler l'extrusion de la texture sur les remplissages qui ne sont pas unis. rotation : fait pivoter l'objet en trois dimensions. matriau : commande l'intensit des effets de lumire sur les surfaces des objets (superbe pour le texte artistique en 3D !).

Affiche en permanence au-dessus de votre espace de travail, une barre d'outils contextuelle 3D permet de configurer les paramtres ci-dessus, chaque paramtre contribuant l'effet 3D appliqu l'objet slectionn. Vous pouvez convertir sur la page mme 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 nuds du cercle rouge ou sur la reprsentation filaire.

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 enfonce tout en effectuant la transformation. Vous pouvez galement rgler l'angle et l'lvation de chaque source de lumire active sur la page en faisant glisser son pointeur. Aprs chaque transformation, l'objet d'origine reste ditable.

378

Lignes, contours, formes et effets

Pour ajouter une troisime dimension : 1. Slectionnez l'objet et cliquez sur le bouton de l'outil 3D instantane dans la palette Effets de la barre d'outils Outils. Un cercle rouge s'affiche au premier plan de l'objet, qui adopte immdiatement des caractristiques 3D. 2. Cliquez sur une catgorie d'effet 3D dans le premier menu droulant de la barre contextuelle 3D. Les options de la barre changent de faon dynamique selon la catgorie slectionne. Reportez-vous l'aide en ligne de WebPlus pour plus de dtails. Cliquez sur Paramtres par dfaut dans la barre d'outils contextuelle pour revenir la transformation initiale de l'objet. Pour dsactiver les effets 3D :

Cliquez sur le bouton Supprimer la 3D de la barre d'outils contextuelle. Vous pourrez toujours cliquer sur le bouton 3D instantane de la barre d'outils par la suite pour rinstaller l'effet.

Pour diter les proprits de base d'un objet 3D :

Slectionnez l'objet 3D, puis cliquez sur le bouton Modifier l'objet de base dans le coin infrieur droit de l'objet 3D.

La forme d'origine de l'objet s'affiche, ce qui permet de manipuler ses poignes de slection pour la redimensionner ou la faire pivoter.

14

Couleur, remplissages et transparence

380

Couleur, remplissages et transparence

Couleur, remplissages et transparence

381

Appliquer des couleurs unies


Vous pouvez utiliser l'onglet Couleur, l'onglet chantillons ou une bote de dialogue pour appliquer des couleurs unies un objet.

Les boutons d'chantillons des onglets proposent plusieurs mthodes permettant d'appliquer des couleurs unies sur diffrents 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 fermes (reportez-vous Tracer et modifier des formes p. 364) ont la fois des proprits de contour et de remplissage.

Les lignes main leve ou les courbes peuvent adopter des couleurs de contour mais galement une couleur de remplissage pour crer des formes fermes directement partir de la ligne. Le texte artistique et les zones de texte cratives peuvent adopter un remplissage d'arrire-plan, un contour et une couleur de texte. La couleur de texte correspond au remplissage du texte, le remplissage d'arrire-plan est la zone situe immdiatement derrire le texte. Une zone de texte HTML applique uniquement un remplissage d'arrire-plan et une couleur de texte.

382

Couleur, remplissages et transparence

Les zones de texte (illustration) et les cellules des tableaux peuvent possder un remplissage d'arrire-plan indpendant des caractres qu'elles contiennent.

Pour appliquer une couleur unie l'aide de l'onglet Couleur : 1. 2. Slectionnez le(s) objet(s) ou mettez en surbrillance un ensemble de texte. Cliquez sur l'onglet Couleur et slectionnez l'un des diffrents modes colorimtriques (RVB, CMJN, TSL, ou Niveaux de gris) dans la liste droulante. Cliquez sur le bouton Remplissage, Contour ou Texte en haut de l'onglet pour dterminer l'emplacement o la couleur sera applique. La couleur du trait de soulignement indique celle de l'objet slectionn. Pour la zone de texte slectionne, la couleur de remplissage correspond la couleur d'arrire-plan du texte (et non pas la couleur d'arrire-plan de la zone). Slectionnez une couleur dans le spectre des couleurs ou utilisez les glissires en fonction du mode couleur slectionn.

3.

4.

Pourquoi ne pas utiliser l'outil Pipette pour dfinir la couleur ? Aprs avoir choisi l'outil, cliquez un endroit quelconque de l'espace de travail pour "prlever" la couleur sous le curseur. En mode couleur RVB, vous pouvez utiliser les codes de couleur hexadcimaux. Pour ce faire, slectionnez le bouton Menu des onglets de l'onglet Couleur.

Couleur, remplissages et transparence

383

Pour appliquer une couleur unie partir de l'onglet chantillons : 1. 2. 3. Slectionnez le(s) objet(s) ou mettez en surbrillance un ensemble de texte. Cliquez sur l'onglet chantillons. Cliquez sur le bouton Remplissage, Contour ou Texte en haut de l'onglet pour dterminer l'emplacement o la couleur sera applique. Slectionnez un chantillon de couleur dans la Palette du site (couleurs frquemment utilises et couleurs dj appliques votre site) ou dans la Palette standard (couleurs standard RVB ou thmes prdfinis tels que WebSafe (couleurs optimises pour le Web)).

4.

Vous pouvez galement utiliser la commande Format/Remplir pour appliquer une couleur partir d'une bote de dialogue. Pour modifier la nuance/teinte d'une couleur unie (luminosit) : 1. 2. 3. Slectionnez l'objet et cliquez sur le bouton Remplissage, Contour ou Texte adquat dans l'onglet Couleur. Dans le menu de slection du mode colorimtrique, slectionnez Teinte. Dplacez la glissire Nuance/Teinte vers la gauche ou vers la droite pour foncer ou claircir la couleur de dpart. Vous pouvez galement saisir un pourcentage dans le champ (saisissez 0 dans la zone de saisie pour revenir la couleur d'origine).

384

Couleur, remplissages et transparence

Vous pouvez galement paramtrer la teinte des objets en utilisant l'onglet chantillons : rglez le pourcentage de la teinte l'aide des glissires ou par saisie directe. WebPlus ajoute automatiquement les couleurs utilises la Palette du site situe dans l'onglet chantillons. 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 slection de palettes thmatiques. Vous pouvez ajouter, modifier et supprimer des couleurs de la Palette du site, mais pas des autres palettes.

Utiliser des combinaisons de couleurs


WebPlus fournit une impressionnante slection de combinaisons de couleurs que vous pouvez slectionner pour crer un site partir d'un modle. Si vous choisissez un site bas sur un modle, la slection d'une combinaison de couleurs dfinira l'apparence de votre site en terme de couleurs, car tous les modles sont dj associs des combinaisons. Un simple clic sur une combinaison de couleurs aura un effet considrable sur les lments de votre mise en page ! Lorsque vous crez votre site partir d'un modle, vous pouvez soit slectionner l'une des trois combinaisons conues spcifiquement pour ce modle, soit utiliser simplement l'une des combinaisons de couleurs globales. Voir Crer un site partir d'un modle p. 26.

Couleur, remplissages et transparence

385

Crer des combinaisons de toutes pices


Les sites Web crs de toutes pices peuvent utiliser une combinaison de couleurs globale, mais vous devrez pralablement affecter une combinaison aux objets lorsque vous les crez afin que la combinaison de couleurs soit applicable. Les couleurs seront radicalement modifies si vous modifiez ultrieurement les combinaisons de couleurs.

Comment fonctionnent les combinaisons de couleurs ?

Vous pouvez utiliser un modle de mise en page thmatique pour avoir une ide de la faon dont les couleurs de combinaison peuvent tre affectes aux diffrents lments de page de votre site.

Testez diffrentes combinaisons l'aide du fichier d'exemple "Combinaisons - Modle" disponible dans l'Assistant de dmarrage de WebPlus ou dans le menu Fichier. Chargez le fichier et modifiez la combinaison de couleurs l'aide du Gestionnaire de combinaisons.

Combinaisons de liens hypertextes, de couleurs de page et d'arrire-plans


Chacune des 12 combinaisons de couleurs peut tre applique aux liens hypertextes, la couleur sur la page et l'arrire-plan de votre site. Pour les liens hypertextes en particulier, les tats Normal, Visit, Actif et Survol sont par dfaut associs une combinaison. Ils adoptent tous la mme Combinaison de couleurs 10, comme illustr ci-dessus, mais en affectant diffrentes couleurs dans les Proprits du site (p. 38), vous pouvez modifier la couleur du lien hypertexte en fonction de diffrents types d'interactivit (clic, survol, etc.). Par dfaut, les couleurs sur la page ne sont pas associes une combinaison, mais vous pouvez tout moment leur en affecter une dans les Proprits du site. l'inverse, les arrire-plan de site sont par dfaut associs l'chantillon de couleur 1, mais vous pouvez tout moment leur affecter une autre couleur de combinaison. Pour de plus amples informations sur les couleurs de page et d'arrire-plan, consultez la rubrique Dfinir l'apparence de la page p. 42.

Couleur, remplissages et transparence

387

Autres applications des combinaisons de couleurs


Comme tout autre objet, les styles de texte peuvent tre associs des combinaisons de couleurs. Cela est particulirement utile si vous souhaitez confrer vos en-ttes une apparence similaire. Bien sr, vous pouvez tout moment modifier la combinaison et actualiser immdiatement la couleur de tous vos en-ttes. Diffrentes couleurs de combinaison peuvent galement tre appliques aux liens hypertextes des styles de texte de votre site. Cela peut tre utilise pour diffrencier les couleurs des liens hypertextes dans les en-ttes (p. ex. En-tte 1, En-tte 2) de celles utilises dans le corps de texte. Voir Dfinir les proprits du texte et Utiliser les styles de texte p. 249 et p. 251.

Slectionner des combinaisons de couleurs


Pour slectionner une combinaison de couleurs prdfinie : 1. Gestionnaire de combinaisons dans la Cliquez sur barre d'outils contextuelle par dfaut. - ou Ouvrez l'onglet chantillons pour afficher la combinaison de couleur active, p. ex.

Cliquez sur le bouton

388

Couleur, remplissages et transparence

2.

Sous l'onglet Combinaisons de couleurs de la bote de dialogue, double-cliquez sur l'chantillon d'une autre combinaison dans la liste (ou cliquez sur Charger), puis sur OK.

Tous les lments du site qui ont t associs l'un des douze numros de couleur de la combinaison sont mis jour avec la couleur correspondante dans la nouvelle combinaison. 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 enregistre avec le site. Le Gestionnaire de combinaisons vous permet galement de modifier les couleurs et mme de crer vos combinaisons de couleurs personnalises.

Couleur, remplissages et transparence

389

Appliquer des couleurs de combinaisons des objets


Si vous crez des objets dans un modle de site Web ou si vous crez un site de toutes pices, 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 adaptes, le processus est simple. Vous devez simplement attribuer l'une des couleurs de la combinaison au contour et/ou au remplissage d'un objet. Attribuer une couleur de combinaison un objet :

1.

Slectionnez l'objet et cliquez sur le bouton Remplissage, Contour ou Texte en haut de l'onglet chantillons selon l'effet souhait. Dans la partie infrieure de l'onglet Echantillons, cliquez sur une couleur de la combinaison appliquer au remplissage, au contour et au texte (vous pouvez galement faire glisser la couleur).

2.

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 slectionn.

Modifier les combinaisons de couleurs


Si, aprs avoir test diffrentes combinaisons de couleurs, vous n'en avez trouv aucune qui convienne, vous avez la possibilit de modifier les couleurs d'une combinaison existante. Pour modifier une combinaison de couleurs : 1. Gestionnaire de combinaisons dans la Cliquez sur barre d'outils contextuelle par dfaut.

390

Couleur, remplissages et transparence

2.

Sous l'onglet Combinaisons de couleurs, slectionnez la combinaison modifier (double-cliquez sur une combinaison ou cliquez sur Charger). Dans la bote de dialogue, chacun des numros de la combinaison de couleurs comporte un menu droulant illustrant les couleurs disponibles dans la palette WebPlus. et Cliquez sur la flche du menu droulant slectionnez une couleur (ou cliquez sur Plus de couleurs... pour accder un plus grand choix de couleurs). La nouvelle couleur s'applique la combinaison. Rptez l'opration pour modifier d'autres couleurs de la combinaison.

3.

4.

Cliquez sur OK pour appliquer la combinaison au site actif. La combinaison de couleurs du site est alors mise jour. Les combinaisons qui ont t modifies sont stockes sur le site. Vous pouvez toutefois enregistrer globalement les combinaisons personnalises, ce qui vous permet d'utiliser tout moment le jeu de combinaisons complet pour de nouveaux sites. Pour crer une combinaison base sur ces couleurs, cliquez sur Enregistrer sous. Vous pouvez aussi slectionner Enregistrer pour craser la combinaison existante.

Pour une conception plus avance l'aide de combinaisons de couleurs recommandes, reportez-vous l'aide de WebPlus.

Couleur, remplissages et transparence

391

Utiliser les remplissages dgrads et bitmap


Les remplissages dgrads apportent une progression de l'tendue du spectre entre plusieurs points d'un objet. Un remplissage dgrad comporte un trac modifiable constitu de nuds marquant l'origine de chacune de ces couleurs cls. Un remplissage bitmap utilise une image bitmap dote d'un nom, souvent une image reprsentant un matriau, un motif ou un arrire-plan pour remplir un objet.

Linaire

Elliptique

Conique

Bitmap

Vous pouvez faire glisser des remplissages dgrads et bitmap prdfinis de l'onglet chantillons vers le remplissage ou le contour d'une forme ou d'une zones de texte ; un texte artistique peut galement comporter un remplissage dgrad ou bitmap (pour le texte, son contour, et l'arrire-plan).

392

Couleur, remplissages et transparence

Le texte d'une zone crative et d'un tableau cratif, ainsi que les bordures et l'arrire-plan de cellules de tableau cratif spcifiques, peuvent galement se voir appliquer un remplissage dgrad ou bitmap (pour le texte, le contour, et l'arrire-plan). L'application de diffrents effets de transparence ( l'aide de l'onglet Transparence) n'affecte en rien les paramtres de remplissage de l'objet, mais peut modifier de faon significative l'aspect rel du remplissage.

Appliquer un remplissage dgrad ou bitmap


Il existe plusieurs manires d'appliquer un remplissage dgrad ou bitmap : vous pouvez utiliser l'onglet chantillons, l'outil Remplissage ou une bote de dialogue. La manire la plus simple d'appliquer un remplissage dgrad ou un remplissage bitmap consiste utiliser l'une des miniatures chantillons disponibles dans la palette Dgrad ou Bitmap de l'onglet chantillons. L'outil Remplissage et la bote de dialogue Remplir sont des mthodes alternatives permettant de crer des remplissages dgrads (ces mthodes sont abordes dans l'aide de WebPlus).

Couleur, remplissages et transparence

393

Pour appliquer un remplissage dgrad ou bitmap l'aide de l'onglet chantillons :

1.

Cliquez sur l'onglet chantillons et vrifiez que Remplissage ou Contour est slectionn (pour le remplissage ou le contour d'un objet, respectivement). La couleur du soulignement est celle de l'objet slectionn. Pour les remplissages dgrads, slectionnez Linaire, Elliptique ou Conique comme type de dgrad dans le menu droulant du bouton Dgrad. - ou Pour les remplissages bitmap, slectionnez une catgorie dans le menu droulant du bouton Bitmap.

2.

3.

Slectionnez le ou les objets et cliquez sur l'chantillon de remplissage appropri dans la galerie. - ou Pour les remplissages uniquement, faites glisser l'chantillon depuis la galerie vers l'objet et relchez le bouton de la souris.

4.

Si ncessaire, rglez la Teinte du remplissage en bas de l'onglet l'aide de la glissire ou dfinissez la valeur d'un pourcentage dans le champ de saisie.

394

Couleur, remplissages et transparence

Pour appliquer un remplissage dgrad avec l'outil Remplissage : 1. 2. 3. Slectionnez un objet. Outil Remplissage dans la Cliquez sur le bouton palette Remplissage de la barre d'outils verticale. Cliquez et faites glisser le pointeur sur l'objet pour dfinir le trac de remplissage. L'objet se voit alors appliquer un remplissage linaire simple allant de la couleur de l'objet un blanc monochrome, par exemple.

Si l'objet est dj blanc (ou ne comporte pas de remplissage), un dgrad du blanc au noir est utilis.

Modifier le trac de remplissage


Lorsque vous slectionnez un objet pouvant tre rempli, l'outil Remplissage devient accessible (sinon, il apparat gris). Si l'objet utilise un remplissage dgrad, le trac de remplissage apparat sous la forme d'une ligne lorsque l'outil Remplissage est slectionn. Des nuds indiquent quels endroits le spectre commence et finit entre chaque couleur cl. Le repositionnement des nuds permet de dterminer la diffusion actuelle des couleurs entre les nuds. Vous pouvez galement modifier le remplissage dgrad en ajoutant, en supprimant ou en modifiant des couleurs cl.

Couleur, remplissages et transparence

395

Remplissage linaire bas sur les couleurs cls (A)

Objet rempli avec trac de remplissage (B)

Pour rgler le trac du remplissage dgrad d'un objet slectionn : 1. Ouvrez l'onglet chantillons et vrifiez que Remplissage ou Contour est slectionn (pour le remplissage ou le contour d'un objet, respectivement). Outil Remplissage dans la Cliquez sur le bouton palette Remplissage de la barre d'outils verticale. Le trac du remplissage apparat sur le remplissage ou le contour de l'objet. Utilisez l'outil Remplissage pour faire glisser les nuds de dpart et de fin du trac ou cliquez sur l'objet pour dfinir un nouveau nud de dpart et crer un trac de remplissage. Le dgrad commence l'emplacement dtermin du nud de dpart et se termine l'emplacement dtermin du nud de fin.

2.

3.

Chaque type de remplissage dgrad possde un trac caractristique. Ainsi, les remplissages linaires possdent des chemins une seule ligne, tandis que les remplissages radiaux possdent des chemins deux lignes (afin que vous puissiez rgler l'tendue du remplissage dans deux directions diffrentes, partir du centre). Si l'objet utilise un remplissage bitmap, le chemin de remplissage apparat sous la forme de deux lignes qui se rejoignent en un point central. Les nuds indiquent le centre et les bords du remplissage.

396

Couleur, remplissages et transparence

Dfinir la transparence
Les effets de transparence sont trs utiles en termes de reprsentation des ombres, des tons clairs et des tons foncs, et de simulation d'un rendu raliste. Ils peuvent faire toute la diffrence 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 dgrad, ou bitmap. Par exemple, dans l'illustration ci-dessous, les papillons ont une transparence unie (100 % opaque), une transparence dgrade (100 % 0 % opaque) et une transparence unie (50 % opaque) de gauche droite.

La transparence fonctionne plutt comme un remplissage utilisant une encre invisible la place de la couleur. un endroit donn, plus on applique de transparence, plus les objets situs en dessous rapparaissent. Tout comme un remplissage en dgrad peut varier du clair vers le fonc, la transparence peut varier plus ou moins, tre translucide ou opaque, comme sur l'illustration :

Couleur, remplissages et transparence

397

A - Transparence linaire, B - Trac, C - Effet sur l'objet L'onglet Transparence propose les types suivants :

La transparence unie rpartit la transparence de faon uniforme. Les transparences en dgrad comportent des effets linaire, elliptique et conique qui vont du transparent l'opaque. Les transparences bitmap comportent des maillages de texture bass sur une slection de bitmaps de l'onglet chantillons.

Appliquer de la transparence
Vous pouvez appliquer une transparence dgrade et bitmap de l'onglet Transparence au remplissage ou au contour d'une forme ou d'une zone de texte ; un texte artistique peut galement utiliser les mmes effets de transparence (pour le texte, son contour, et l'arrire-plan).

398

Couleur, remplissages et transparence

Pour appliquer de la transparence l'aide de l'onglet Transparence :

1.

Aprs avoir slectionn votre objet, ouvrez l'onglet Transparence et vrifiez que Remplissage ou Contour est slectionn (pour le remplissage ou le contour d'un objet, respectivement). Pour une transparence unie, cliquez sur le bouton Uni et choisissez une miniature dans la galerie des transparences unies. Les miniatures plus claires reprsentent davantage de transparence (exprime en pourcentage d'opacit). - ou Pour une transparence dgrade, cliquez sur le bouton Dgrad et choisissez une miniature. - ou Pour une transparence bitmap, cliquez sur le bouton Bitmap et choisissez une miniature parmi une gamme de catgories.

2.

3.

L'effet de transparence est appliqu au remplissage ou au contour de l'objet.

Vous pouvez galement faites glisser la miniature de votre choix depuis la galerie vers l'objet, puis relcher le bouton de la souris.

Couleur, remplissages et transparence

399

Pour appliquer une transparence en dgrad l'aide de l'outil Transparence : 1. Slectionnez lobjet et rglez lchantillon Remplissage/Contour sous l'onglet Transparence. Outil Transparence dans la Cliquez sur le bouton palette Transparence de la barre d'outils verticale. - ou Slectionnez Format/Transparence. 3. Faites glisser votre pointeur sur l'objet et relchez le bouton de la souris. L'objet se voit appliquer une transparence linaire simple, avec un dgrad de 100 % 0 % d'opacit (totalement transparent).

2.

Dfinir la transparence par dfaut


La transparence par dfaut est la transparence qui sera applique au prochain objet cr. Les paramtres par dfaut locaux ne s'appliquent qu'aux objets du site en cours. Sur le rglage des paramtres par dfaut dans WebPlus, voir Mettre jour et enregistrer les paramtres par dfaut p. 290.

Prvisualiser et publier

401

15

Prvisualiser et publier

402

Prvisualiser et publier

Prvisualiser et publier

403

Afficher un aperu 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 apparatra votre site aux yeux du visiteur. Vous pouvez afficher n'importe quel moment un aperu d'une page ou du site entier, soit depuis WebPlus (grce une fentre interne base sur le navigateur Internet Explorer), soit partir de n'importe quel navigateur install sur votre systme. Pour afficher un aperu de votre site : 1. 2. Cliquez sur la flche bas du bouton site de la barre doutils Standard. Aperu du

Slectionnez une option dans le sous-menu :

L'option Aperu dans une fentre (raccourci : Alt+P) ouvre le site dans une nouvelle fentre interne WebPlus avec son propre onglet permettant de basculer d'une fentre l'autre. En cas d'aperu dans une fentre, vous pouvez utiliser le barre de contexte Aperu pour commander le fentre d'aperu. Cliquez sur les boutons de la barre d'outils pour passer la page prcdente (bouton Prcdent) ou suivante (bouton Suivant), Actualiser ou Fermer l'aperu et rafficher la page l'une des diffrentes rsolutions d'cran standard ou personnalises (le tout partir d'un menu droulant).

Slectionnez Afficher la page dans... ou Afficher le site dans... pour utiliser un navigateur externe. Les noms qui apparaissent indiquent les navigateurs installs sur votre PC, par exemple Afficher la page dans Internet Explorer. Si plusieurs navigateurs sont installs sur votre ordinateur, vous pouvez

404

Prvisualiser et publier

slectionner celui ou ceux utiliser dans le sousmenu. La page ou le site est alors export dans un dossier temporaire et s'affiche dans le navigateur spcifi. Pour personnaliser la liste des navigateurs dans le sous-menu : 1. Choisissez Aperu du site dans le menu Fichier (ou dans la palette Aperu de la barre d'outils standard) et slectionnez Liste des navigateurs dans le sous-menu. La bote de dialogue affiche une liste des navigateurs installs sur votre systme. Le sous-menu Aperu de WebPlus les rpertorie dans l'ordre affich ici. 2. Effectuez ventuellement des modifications dans la bote de dialogue :

Cliquez sur Dtection auto pour actualiser automatiquement la liste, ou sur Ajouter pour afficher une bote de dialogue permettant de localiser un navigateur particulier ajouter la liste. Pour supprimer une entre de la liste, slectionnezla et cliquez sur Supprimer. Vous pouvez rorganiser la liste en slectionnant une entre et en cliquant sur Vers le haut ou Vers le bas. Pour modifier le nom de l'entre dans le sous-menu ou son chemin d'accs, slectionnez-la et cliquez sur Modifier. Par exemple, vous pouvez remplacer le nom "Internet Explorer" par "IE7".

3.

Cliquez sur OK pour valider vos modifications.

Prvisualiser et publier

405

il peut tre judicieux d'installer plusieurs des navigateurs les plus courants afin de voir quoi ressemblera votre site sur d'autres systmes. WebPlus vous permet d'afficher la dure de tlchargement estime 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. Utilisez pour cela la palette Aperu du site de la barre d'outils standard.

Publier le site sur le Web


La publication d'un site sur le Web consiste transfrer le site vers le serveur de l'hbergeur de sites Web. Le site est ainsi mis en ligne et tous les internautes du monde entier peuvent le consulter. Vous pouvez dcider de publier la totalit de votre site Web ou, si vous faites une mise jour du site, uniquement les pages qui ont t modifies depuis la dernire publication. Avant de publier le site sur le Web, il est conseill de rechercher les problmes potentiels en excutant le Vrificateur de site (Outils/Gestionnaire de site/Vrificateur 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. Voir l'aide de WebPlus pour plus d'informations.

406

Prvisualiser et publier

Pour mettre en ligne votre site sur le Web : 1. Choisissez Proprits du site dans le menu Fichier et vrifiez les paramtres d'exportation, notamment ceux de l'option de menu Images. Publier le site dans la barre Cliquez sur le bouton d'outils standard (ou choisissez Publier le site dans le menu Fichier, puis Publier sur le Web dans le sousmenu).

2.

Si vous n'avez pas encore dfini d'informations de compte FTP, vous devez configurer au moins un compte avant de pouvoir continuer. Il sera utilis pour toute publication Web ultrieure. 3. 4. 5. Cliquez sur le bouton Comptes pour afficher la bote de dialogue Charger sur le serveur. Cliquez sur Ajouter. Dans la bote 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 grer). L'Adresse FTP de votre hte est une adresse URL spcifique commenant par "ftp://" ; elle vous est communique par votre hbergeur. Numro de port : moins que votre fournisseur ne vous le dconseille, laissez le numro 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 sousdossier spcifique de votre dossier racine.

Prvisualiser et publier

407

Vous devez galement connatre l'identifiant et le mot de passe que vous a attribus votre fournisseur de services. Le plus souvent, ils correspondent vos paramtres de connexion de messagerie. Veillez saisir correctement le mot de passe, en utilisant les majuscules et les minuscules bon escient, sinon votre serveur hte pourrait ne pas le reconnatre. Cochez l'option Enregistrer le mot de passe pour que votre ordinateur le mmorise et ne vous le demande pas nouveau pour chaque transfert. Mode passif : laissez cette option coche moins que vous ayez des problmes de connexion FTP (vrifiez avec votre hbergeur). Les hbergeurs 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 bote de dialogue aprs le tlchargement par FTP. Dans le champ Avanc, vous pouvez activer le FTP scuris en chargeant l'un des deux protocoles de cryptage : TLS 1.0 et SSL 3.0. Cochez Crypter la connexion, puis slectionnez 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 dfaut ou sur un port personnalis (modifiez le numro de port). Cliquez sur OK pour fermer la bote de dialogue Infos sur le compte.

cette tape, vous pouvez utiliser la bote de dialogue Charger sur le serveur pour ajouter un autre compte et copier, modifier ou supprimer un compte slectionn dans le menu droulant. C'est une bonne ide de tester votre compte nouveau ou modifi en cliquant sur le bouton Tester. Si le test est russi, une bote de dialogue s'affiche pour indiquer que la connexion a russi.

408

Prvisualiser et publier

Si vous ajoutez des comptes, vous devrez indiquer lequel utiliser partir de la liste droulante du champ Compte FTP. Vous pouvez dcider d'enregistrer les dtails du compte FTP sur votre machine (les dtails du compte seront enregistrs dans WebPlus, vitant ainsi toute perte, mme aprs un dmarrage avec la touche Ctrl enfonce) ou sur le site courant. 6. Si vous avez dfini au moins un compte et cliqu sur Mettre jour un compte, la bote de dialogue Publier sur le Web s'affiche avec le dernier nom de compte utilis dans le menu droulant et ses paramtres dans les fentres suivantes. Le menu droulant permet de changer de compte. Slectionnez le compte utiliser (si vous en avez plusieurs). Si votre site Web utilise une base de donnes, la case Fusionner avant la publication est coche. Si des modifications ont t apportes la base de donnes mais que vous ne souhaitez pas relancer la fusion, dsactivez cette option (l'option est grise si aucune base de donnes/aucune modification n'est dtecte). Pour plus d'informations sur les bases de donnes, reportez-vous Utiliser la fusion de base de donnes dans l'aide de WebPlus. Pour pouvoir contrler le processus de publication de bout en bout, assurez-vous que la case Publication automatique est dcoche. Vous pourrez ainsi passer en revue les modifications devant tre apportes au site Web avant qu'elles ne soient appliques. Cela vous permettra galement d'annuler la publication si vous dtectez un problme. (Pour en savoir plus sur cette fonction, reportez-vous Opration automatique p. 411.) Slectionnez les pages mettre en ligne, cochez la ou les pages dans la fentre ou slectionnez Publier toutes les pages. Les boutons Slectionner/Dslectionner, Slect./Dslect. la branche et Slectionner tout facilitent la slection des pages.

7.

8.

9.

Prvisualiser et publier

409

10. 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. 11. Cliquez sur OK. WebPlus recherche une connexion Internet, puis : 12. S'il s'agit de la premire mise en ligne, les fichiers slectionns sont tlchargs directement. -ouSi le site a dj t publi, la bote de dialogue Chargement des fichiers s'affiche. Cette bote de dialogue indique les oprations qui seront effectues 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 utiliss pour que WebPlus supprime automatiquement toutes les images et toutes les pages non utilises. Choisissez Mise jour incrmentielle ou Chargement complet. Slectionnez la premire option pour ne charger que les fichiers qui ont t modifis depuis la dernire mise jour. Si vous procdez une mise jour incrmentielle, vous pouvez faire en sorte que WebPlus recherche les fichiers manquants (activez l'option Rechercher les fichiers manquants). Notez toutefois que cette option est dsactive par dfaut car elle ralentit normment la publication. Un message apparat lorsque tous les fichiers ont t copis avec succs. Cliquez sur Fermer. 13. Dans le menu droulant de la bote de dialogue Publication du site Web, slectionnez le navigateur dans lequel vous souhaitez afficher votre site, puis cliquez sur Afficher cette URL. Vous pouvez maintenant consulter votre site en ligne.

410

Prvisualiser et publier

Si vous renommez/supprimez des fichiers, puis republiez une ou plusieurs pages sur le Web, les anciens fichiers ne sont pas supprims 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 Opration automatique), vous pouvez faire en sorte que tous les fichiers non utiliss soient supprims ; il vous suffit pour cela d'activer l'option Supprimer les fichiers inutiliss.

Grer les informations du compte FTP


WebPlus vous offre la possibilit d'enregistrer les informations de votre compte FTP sur la machine ou sur le site courant, ou les deux. Par dfaut, les informations du compte sont conserves sur l'ordinateur, mais en les enregistrant sur votre site, vous pouvez transfrer 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 scurit, les mots de passe ne sont jamais stocks sur les sites. Un option complmentaire vous permet d'exporter toutes les informations de compte FTP (y compris les mots de passe) sur un autre ordinateur. Pour enregistrer les informations de compte FTP sur votre site : 1. 2. 3. Dans la bote de dialogue Publier sur le Web, cliquez sur Comptes. Dans la section Enregistrer les dtails du compte FTP de la bote de dialogue, cochez Dans le site actif. Cliquez sur Mettre jour un compte.

Prvisualiser et publier

411

Lorsque le site est ouvert sur une autre machine, les informations seront uniquement stockes 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. Pour exporter toutes les informations du compte FTP : 1. 2. 3. 4. Dans la bote de dialogue Publier sur le Web, cliquez sur Comptes. Dans la section Compte FTP de la bote de dialogue, cliquez sur Exporter tout. Slectionnez un emplacement et un nom de fichier pour le fichier de Registre (.reg), puis cliquez sur Enregistrer. Transfrez le fichier .reg sur un autre ordinateur, puis double-cliquez sur le fichier. Tout compte FTP existant sur l'ordinateur cible sera remplac.

Opration automatique
Si votre site Web est trs volumineux, il peut tre judicieux d'utiliser la fonction Opration automatique. Le processus est quasiment le mme que la publication sur le Web, mais vous n'avez pas cliquer sur "OK" dans chaque bote de dialogue qui s'affiche pendant le transfert du site. Cette fonction est particulirement utile si vous mettez jour un site contenant une grande base de donnes d'images. 1. Cochez Publication automatique. Les options suivantes sont galement actives ;

Cochez Utiliser une publication incrmentielle pour remplacer uniquement les fichiers qui ont t modifis depuis la dernire publication (si vous

412

Prvisualiser et publier

avez dj publi le site Web dans le mme dossier FTP). Cette mthode de publication est efficace car vous avez moins de fichiers transfrer. Lorsque cette option est active, vous pouvez galement cocher Vrifier les fichiers distants pour demander WebPlus de vrifier manuellement chaque fichier avant de le remplacer. Cela rduit la vitesse de chargement par rapport au fonctionnement normal, mais il s'agit d'une mthode de publication plus approfondie.

Cochez Supprimer les fichiers inutiliss pour supprimer du dossier FTP des fichiers superflus pour le site Web que vous publiez (pertinent par exemple si vous chargez un site Web compltement diffrent dans votre dossier FTP).

2.

Slectionnez les pages mettre en ligne, cochez la ou les pages dans la fentre ou slectionnez Publier toutes les pages. Les boutons Slectionner/Dslectionner, Slect./Dslect. la branche et Slectionner tout facilitent la slection des pages. 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. Cliquez sur OK pour commencer le processus de publication. (C'est le moment de faire une pause...) Une fois la publication termine, la bote de dialogue Chargement des fichiers reste affiche jusqu' ce que vous cliquiez sur Fermer. Dans le menu droulant de la bote de dialogue Publication du site Web, slectionnez le navigateur dans lequel vous souhaitez afficher votre site, puis cliquez sur Afficher cette URL. Vous pouvez maintenant consulter votre site en ligne.

3.

4. 5.

6.

Prvisualiser et publier

413

Consulter votre site en ligne


Une fois votre site publi, vous pouvez slectionner l'option Aperu du site en ligne dans le menu droulant Aperu du site de la barre d'outils standard. Cette option permet d'afficher la version la plus rcente de votre site dans le navigateur par dfaut. Au moment de la premire activation de cette commande, une bote de dialogue apparat pour vous demander de saisir l'URL par dfault du site. Vous pouvez modifier l'URL tout moment via la bote de dialogue Proprits du site. Gardez l'esprit que les modifications effectues aprs la publication ne seront pas visibles. Pour obtenir un aperu des modifications non publies, utilisez le bouton Aperu du site. (Reportez-vous Afficher un aperu de votre site Web p. 403.)

Configurer votre espace Web


Serif propose un hbergement Web prix comptitif et offrant divers niveaux de service en fonction de vos besoins. Pour plus d'informations, rendez-vous l'adresse go.serif.com/hosting.

Publication rapide
La Publication rapide vous permet de charger et d'afficher rapidement un aperu de la page affiche, ce qui est particulirement utile pour contrler en ligne les pages individuelles lorsque vous crez votre site Web. Pour mettre en place la Publication rapide, vous devez d'abord paramtrer les informations de votre compte l'aide de la bote de dialogue Configuration de la Publication rapide.

414

Prvisualiser et publier

Configurer la Publication rapide 1. Publier le site de la barre Cliquez sur la palette d'outils Standard, puis sur Configuration de la Publication rapide. -ouCliquez sur Fichier/Publier le site/Configuration de Publication rapide... 2. Dans la bote de dialogue :

Entrez les informations ou slectionnez dans le menu droulant l'URL du site que vous souhaitez utiliser pour la publication. Slectionnez le navigateur dans lequel vous souhaitez afficher votre page aprs sa publication. Slectionnez dans le menu droulant le compte FTP utiliser. Pour mettre jour les paramtres du compte ou ajouter un nouveau compte, cliquez sur Grer les comptes FTP.

C'est une bonne ide de tester votre compte nouveau ou modifi en cliquant sur le bouton Tester. Si le test est russi, une bote de dialogue s'affiche pour indiquer que la connexion a russi. 3. Cliquez sur OK.

Prvisualiser et publier

415

Publication rapide sur le Web : Cliquez sur la palette Publier le site de la barre d'outils Standard, puis sur Publication rapide sur le Web. -ouCliquez sur Fichier/Publier le site/Publication rapide sur le Web. Si vous tentez d'utiliser la Publication rapide sans configurer pralablement les paramtres de votre compte, la bote de dialogue Configuration de la Publication rapide s'ouvrira automatiquement. La bote de dialogue Chargement des fichiers apparat brivement avant que votre page s'affiche dans le navigateur de votre choix.

Crer 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 particulirement utile pour les tudiants devant prsenter leurs sites un jury, au format document.

416

Prvisualiser et publier

1.

Cliquez sur la palette Publier le site de la barre d'outils Standard, puis sur Exporter le site au format PDF... - ou -

Excutez la commande Fichier/Publier le site/Exporter le site au format PDF... 2. Dans la bote de dialogue Publier au format PDF, attribuez un nom de fichier, accdez au dossier o vous souhaitez enregistrer votre PDF, puis cliquez sur Enregistrer.

Le PDF est gnr et s'ouvrira automatiquement si une visionneuse PDF approprie est installe sur votre systme. Si des problmes ont t identifis lors de la gnration du PDF, la liste s'afficher.

Vous aimerez peut-être aussi