Copyright 2011 Incomedia. All rights reserved.

Official Website :

www.websitex5.com

info@incomedia.eu - www.incomedia.eu

 Copyright 2011 Incomedia. Tous droits rservs. Les informations contenues dans ce manuel peuvent tre soumises des modifications sans pravis. Aucune partie de ce manuel ne peut tre reproduite ou transmise sous une forme quelconque ou travers un moyen quelconque, lectronique ou mcanique, pour nimporte quel but, sans lautorisation crite spcifique de Incomedia. Noubliez pas que les vidos, les sons ou les images que vous souhaitez utiliser dans votre projet pourraient tre protgs par la loi du copyright. Linsertion non autorise de ce matriel dans votre travail peut constituer une violation des droits dauteur. Vrifier davoir obtenu les autorisations de la part des auteurs relatifs. Incomedia, Web Site X5, Web Site X5 Evolution sont des marques Incomedia s.r.l. Dautres marques ou noms de produit mentionns ci-aprs sont des marques ou des marques enregistres appartenant leur propritaire respectif. Ecrit et conu par Incomedia srl

Sommaire
Bienvenue dans Incomedia WebSite X5................................................................................... 11 Bienvenue dans Incomedia WebSite X5 ............................................................................. 12 Information sur la guide .......................................................................................................... 13 tape 0. ................................................................................................................................................. 15 Comment commencer .................................................................................................................... 15 Travailler avec WebSite X5 ...................................................................................................... 16 Environnement de Travail ....................................................................................................... 17 Barre d'outils suprieure ..................................................................................................... 17 Barre d'outils latrale ........................................................................................................... 18 Barre d'outils infrieure....................................................................................................... 19 Bienvenue dans Incomedia WebSite X5 ............................................................................. 19 Fentre Prfrences ............................................................................................................... 20 Choix du projet ............................................................................................................................ 22 Choix du projet | Importer projet ..................................................................................... 23 Pratiquement ........................................................................................................................... 23 tape 1. Paramtres gnraux. .................................................................................................... 25 Paramtres gnraux ................................................................................................................ 26 Paramtres gnraux| Section Gnrales ...................................................................... 26 Comme grer les langues pour les textes insrs automatiquement ........................ 27 Pratiquement ........................................................................................................................... 28 Paramtres gnraux| Section Avances ....................................................................... 29 Que faire pour pouvoir utiliser Google Webmaster Central ................................... 30 Comment activer un service de statistiques comme, par exemple, Google Analytics..................................................................................................................................... 31 Comment crer et connecter le Plan du site ................................................................. 32 Pratiquement ........................................................................................................................... 32 Slection du modle .................................................................................................................. 34 4

Comment est organis le dossier Modles relatif aux modles prinstalls .... 36 Modle personnalis ................................................................................................................. 37 Modifier le modle ..................................................................................................................... 40 Modifier le modle| Barre d'outils ................................................................................... 42 Modifier le modle| Cadre En-tte / Pied de page ..................................................... 43 Modifier le modle | Cadre Texte ...................................................................................... 43 Modifier le modle | Cadre Image .................................................................................... 43 Modifier le modle | Cadre Animation Flash ................................................................ 44 Modifier le modle | Cadre Diaporama .......................................................................... 44 Modifier le modle | Cadre Code HTML ......................................................................... 45 Modifier le modle | Cadre Champ de recherche........................................................ 46 Comment fonctionne le moteur de recherche interne de WebSite X5 ............ 46 Modifier le modle| Cadre Effets ...................................................................................... 47 tape 2. Cration du plan. ............................................................................................................. 49 Cration du plan.......................................................................................................................... 50 Le schma du plan du site ....................................................................................................... 50 La barre d'outils du plan du site ........................................................................................... 52 Fentre Proprits de page ................................................................................................. 54 Crer le plan du site ................................................................................................................... 57 Plan du site et SiteMap ............................................................................................................. 58 tape 3. Cration de la page. ........................................................................................................ 59 Cration de la page..................................................................................................................... 60 La grille de mise en page dans la Cration de la page ............................................... 60 La Barre doutils ...................................................................................................................... 62 La liste des objets lors de la cration de la page ......................................................... 63 Le Box Model dans WebSite X5 ......................................................................................... 64 Objet texte ..................................................................................................................................... 65 Pratiquement ........................................................................................................................... 66 5

Paramtres RollOver ............................................................................................................. 68 Objet Image ................................................................................................................................... 70 Pratiquement ........................................................................................................................... 70 Objet Image | Section Gnral ............................................................................................ 71 Objet Image | Section Affichage ......................................................................................... 73 Objet Image | Section Plan du site .................................................................................... 75 Objet Tableau ............................................................................................................................... 75 Pratiquement ........................................................................................................................... 76 Objet Animation Flash .............................................................................................................. 77 Pratiquement ........................................................................................................................... 77 Objet Animation Flash | Section Gnrales ................................................................... 78 Objet Animation Flash | Section Avances .................................................................... 79 Objet Vido/Audio ..................................................................................................................... 79 Pratiquement ........................................................................................................................... 79 Objet Vido/Audio| Section Gnral ............................................................................... 80 Objet Vido/Audio | Section Plan du site....................................................................... 81 Objet de la galerie ....................................................................................................................... 82 Pratiquement ........................................................................................................................... 83 Objet de la galerie | Section Style...................................................................................... 84 Objet de la galerie | Section Liste ...................................................................................... 86 Objet de la galerie | Section Miniatures .......................................................................... 88 Objet Formulaire d'envoi d'email ......................................................................................... 89 Pratiquement ........................................................................................................................... 89 Objet Formulaire d'envoi d'email | Section Liste ........................................................ 90 Fentre Insertion de champ................................................................................................ 91 Objet Formulaire d'envoi d'email| Section Envoi ....................................................... 95 Objet Formulaire d'envoi d'email| Section Style ......................................................... 98 Objet Liste des produits ........................................................................................................ 100 6

Pratiquement ........................................................................................................................ 100 Objet Liste des produits | Section Liste ....................................................................... 101 Objet Liste des produits| Section Paramtres ........................................................... 101 Objet HTML et Widgets ......................................................................................................... 103 Pratiquement ........................................................................................................................ 103 Objet HTML et Widgets | Section Code HTML .......................................................... 103 Objet HTML et Widgets | Section Avances ............................................................... 105 tape 3. Fonctions Communes. ................................................................................................ 107 Editeur graphique ................................................................................................................... 108 Editeur graphique | Section Rogner et pivoter ......................................................... 109 Editeur graphique | Section Filtres ............................................................................... 109 Editeur graphique | Section Filigrane .......................................................................... 109 Editeur graphique | Section Masque ............................................................................ 110 Editeur graphique | Section Cadre ................................................................................ 110 Editeur graphique | Section Effets................................................................................. 111 Editeur graphique| Section Bibliothque ................................................................... 111 Pratiquement ........................................................................................................................ 112 Style de cellule ............................................................................................................................... 112 Pratiquement ........................................................................................................................ 113 Style de cellule | Section Style ......................................................................................... 113 Style de cellule| Section Textes ....................................................................................... 115 Style de cellule| Section Bibliothque .......................................................................... 116 Pratiquement ........................................................................................................................ 117 Comment crer une image d'arrire-plan qui s'adapte aux dimensions de la cellule ....................................................................................................................................... 118 Lien ............................................................................................................................................... 120 Pratiquement ........................................................................................................................ 121 Lien | Section Action ........................................................................................................... 121 7

Lien | Section Description ................................................................................................ 124 Fentre Couleur........................................................................................................................ 125 Fentre Proprits de l'effet ................................................................................................ 125 Fentre Tlcharger le fichier associ.............................................................................. 127 tape 4. Paramtres avancs . ................................................................................................... 129 Paramtres avancs ................................................................................................................ 130 Style du menu de premier niveau...................................................................................... 131 Pratiquement ........................................................................................................................ 132 Style du menu de premier niveau | Section Gnral ............................................... 132 Style du menu de premier niveau | Section lments de menu ......................... 133 Style du menu de premier niveau | Section Style 3D .............................................. 134 Style de Menu droulant ............................................................................................................ 135 Pratiquement ........................................................................................................................ 135 Style de menu droulant | Section Gnral ................................................................ 135 Style de menu droulant | Section lments de menu .......................................... 137 Style de menu droulant| Section Style 3D ................................................................ 137 Style du menu de la page ...................................................................................................... 138 Pratiquement ........................................................................................................................ 139 Style du menu de la page | Section Gnral ............................................................... 139 Style du menu de la page| Section lments de menu........................................... 140 Styles et modles ..................................................................................................................... 140 Pratiquement ........................................................................................................................ 141 Styles et modles| Section Textes .................................................................................. 141 Styles et modles| Section Bote d'affichage ............................................................. 142 Styles et modles| Section Info-bulle ........................................................................... 144 Styles et modles| Section E-mail .................................................................................. 145 Page de Bienvenue .................................................................................................................. 147 Pratiquement - Page de Bienvenue ............................................................................... 147 8

Langue de consultation - Pratiquement ...................................................................... 148 Message publicitaire............................................................................................................... 150 Pratiquement ........................................................................................................................ 150 Blog ............................................................................................................................................... 153 Pratiquement ........................................................................................................................ 154 Blog | Section Articles ........................................................................................................ 154 Fentre Paramtres article............................................................................................... 155 Blog | Section Mise en forme ........................................................................................... 157 Fentre Blocs latraux ..................................................................................................... 1558 Blog| Section Commentaires ........................................................................................... 161 Flux RSS....................................................................................................................................... 162 Pratiquement ........................................................................................................................ 162 Fentre Paramtres article............................................................................................... 163 Gestion de l'accs .................................................................................................................... 163 Pratiquement ........................................................................................................................ 163 Fentre Nouvel utilisateur................................................................................................ 166 Panier virtuel e-commerce .................................................................................................. 166 Pratiquement ........................................................................................................................ 166 Panier virtuel e-commerce| Section Produits ........................................................... 167 Fentre Paramtres de produit ...................................................................................... 169 Panier virtuel e-commerce | Section Paiement ........................................................ 172 Fentre type d'expdition ................................................................................................ 172 Fentre Type de paiement................................................................................................ 174 Panier virtuel e-commerce | Section Dtails client ................................................. 175 Panier virtuel e-commerce | Section Options ........................................................... 176 Comment dfinir les contenus de l'email de confirmation de commande ..... 178 Panneau de contrle ............................................................................................................... 180 Comme grer les commentaires des Blog partir du panneau de contrle .. 181 9

tape 5. Exporter. .......................................................................................................................... 185 Exporter ...................................................................................................................................... 186 Exportation du site sur Internet ........................................................................................ 186 Pratiquement ........................................................................................................................ 189 Exportation termine............................................................................................................. 190 Exportation sur disque .......................................................................................................... 191 Exportation du projet ............................................................................................................ 191

10

Bienvenue dans Incomedia WebSite X5

11

Bienvenue dans Incomedia WebSite X5

WebSite X5 est le logiciel idal pour crer les sites Web que vous auriez toujours voulu avoir. Il ne requiert aucune connaissance de programmation et il permet de travailler de manire entirement visuelle travers une interface intuitive et riche en aperus mis jour en temps rel. WebSite X5 vous guide ainsi jusqu' la publication du site en garantissant la simplicit d'emploi, la flexibilit et de grands espaces de personnalisation. En fonction des choix effectus et des paramtres dfinis, WebSite X5 engendre automatiquement le code des pages HTML5+CSS 2.1 ou 3 en garantissant ainsi la pleine compatibilit avec tous les navigateurs et les dispositifs mobiles, ainsi qu'une indexation correcte de la part des moteurs de recherche. Il faut souligner que, bien que simple utiliser, WebSite X5 offre une large gamme d'outils professionnels pour :

Magasins enligne avec carte de

crdit Blog avec Podcast et Videocast Moteur de recherche interne Formulaires d'email avec filtres anti-spam News et Flux RSS

Zoom et images panoramiques Galerie d'images et vidos Gestion des accs et des zones Gestion des bannires publici Cration de sites multilingue
taires rserves

Par ailleurs, WebSite X5 permet d'conomiser du temps et de la fatigue car il comprend tout ce qu'il faut pour crer un site : diteur pour les modale 1.500 modles personnalisables diteur pour les images 6.000 images royalty free Crateur de menus Bibliothques de boutons Widgets de collecte Moteur FTP interne Ce mlange de simplicit et d'exhaustivit est la raison du succs de WebSite X5 : le bon logiciel pour tous ceux qui veulent crer des sites Web.

12

Information sur la guide

Ce manuel est un guide oprationnel pour ceux qui veulent commencer travailler immdiatement avec WebSite X5 pour crer leur site, Blog ou magasin ecommerce. En suivant tape par tape le chemin de dveloppement propos, on obtient une description prcise de l'interface du programme, de toutes les commandes et des options prsentes dans les menus, les panneaux et les fentres prvues. Les explications et les approfondissement proposs, associs au caractre intuitif de la logique de travail et la disponibilit du nombreux aperus mis jour en temps rel, permettront de mieux travailler avec WebSite X5 et d'obtenir des sites attrayants, trs prenants et professionnels. Ce guide de WebSite X5 se rfre la version EVOLUTION v. 9 mais, si l'on tient compte des limitations spcifiques, sa consultation est utile mme pour travailler avec d'autres versions du programme.

13

14

tape 0. Comment commencer

15

Travailler avec WebSite X5

WebSite X5 opre comme un assistant qui vous guide travers le processus en s'assurant que vous compltiez toutes les tapes ncessaires pour que votre site ait un aspect professionnel et soit esthtiquement satisfaisant. Les tapes ncessaires pour la cration de votre site sont 5 en tout : 1. Paramtres gnraux Aprs avoir choisi le projet sur lequel vous voulez travailler et avoir insr quelques informations indispensables, entre autres la Description et les Mots Cl ncessaires l'indexation sur les moteurs de recherche, WebSite X5 vous permet de dfinir l'aspect graphique du site. Vous pouvez choisir parmi plus de 1.500 modles prdfinis ou librer votre crativit et dfinir un modle ex novo. L'diteur interne permet de personnaliser librement l'en-tte et le pied de page des modles. 2. Cration du plan partir de la page d'accueil, WebSite X5 permet de dfinir la structure sous forme arborescente. Vous pouvez prvoir tous les niveaux d'approfondissement ncessaires pour organiser un nombre illimit de pages. Le menu de navigation sera cr dynamiquement en fonction du plan. Vous pourrez, tout moment, modifier le plan du site pour le mettre jour. 3. Cration des pages Pour crer une page et la mettre en page, faites glisser simplement les objets voulus : textes, tableaux, images, animations, vidos et audio, galeries, formulaires de collecte des donnes et d'envoi de mail, liste des produits, code HTML et Widget. Les objets importants peuvent tre personnaliss et complts par des liens vers des ressources internes et externes. Grce un diteur graphique intgr, vous pourrez faire pivoter l'image, corriger ou appliquer des filtres, des masques et des cadres sur les images importes sans avoir recours un logiciel extrieur. 4. Dfinition des paramtrages avancs Pour complter la personnalisation du site, vous pouvez dfinir le style d'lments comme le menu de navigation, les textes, la fentre ShowBox et l'e-mail. L'diteur permet galement de crer des boutons tridimensionnels pour lesquels vous pouvez prvoir l'effet qui apparat lors du passage du pointeur de la souris (effet mouse over). Par ailleurs, le site peut tre complt avec des outils tels que : page d'accueil avec bande sonore et choix de la langue de consultation; zones rserves avec gestion des accs et des utilisateurs ; messages publicitaires ; flux RSS ; blog ; panier e-commerce.

16

5. Exporter WebSite X5 permet aussi de publier sur Internet le site cr : le programme active une session FTP travers laquelle tous les fichiers ncessaires sont transfrs sur le serveur pour afficher le site directement sur le Web. WebSite X5 supporte la connexion sre et permet d'conomiser du temps en travaillant en multi-connexion et en publiant seulement les fichiers modifis. En plus de la publication sur Internet, vous pouvez exporter un projet sur un autre disque de votre ordinateur ou crer facilement une copie de sauvegarde.

Environnement de Travail
Comme il s'agit d'un guide, WebSite X5 propose une srie de fentres permettant d'insrer les informations ncessaires pour crer et publier un site Internet complet, fonctionnel et graphiquement attractif. Toutes les pages-crans du programme ont la mme interface graphique avec une barre d'outils, en haut, en bas et sur le cot, et une fentre centrale qui change en fonction de la phase de travail et par consquent des informations requises.

Barre d'outils suprieure Aide : permet d'afficher l'aide enligne. La flche gauche du bouton Aide permet aussi d'accder aux commandes : - Sommaire : pour afficher l'Aide en ligne. - Didacticiel vido : pour accder une srie de Didacticiels vido expliquant comment travailler avec le programme. 17

- WebSite X5 Gallery : pour accder une riche galerie de sites crs avec WebSite X5 et signals directement par leurs auteurs. - WebSite X5 Templates : pour afficher et tlcharger de nouveaux modles graphiques, en les choisissant parmi ceux proposs par Incomedia ou d'autres auteurs, aussi bien gratuits que payants. - Assistance technique : pour accder au service d'assistance technique et consulter les archives des FAQ ou ouvrir un ticket d'assistance. - www.websitex5.com : pour accder au site Internet de rfrence du programme. - Informations sur WebSite X5 : pour ouvrir une fentre contenant des informations relatives au programme.

Enregistrer [CTRL+S] : permet d'enregistrer le projet sous le mme nom. Le

projet est automatiquement stock dans le Dossier de projets indiqu dans la fentre Prfrences. Pour crer une copie du projet, au lieu de la commande Enregistrer sous, slectionnez la commande Dupliquer dans la fentre Choix du projet.

Tester : permet d'afficher travers le navigateur interne un aperu du site ralis.

Si vous slectionnez l'option Mettre jour les pages au cours de la modification du Projet dans la fentre Prfrences, au terme de chaque modification (quand vous cliquez par exemple sur le bouton Ok ou sur Suivant), le programme recre tout ce qui est relatif la modification. Cela permet de maintenir toujours jour l'aperu du site et de l'afficher sans attendre. Par ailleurs, si vous slectionnez l'option Enregistrer chaque Aperu, dans la fentre Prfrences, quand vous cliquerez sur le bouton Tester, le programme enregistrera aussi le projet. Pour forcer la cration de l'aperu du site, vous pouvez maintenir enfonce la touche CTRL et cliquer sur le bouton Tester.

Barre d'outils latrale

WebSite X5 permet de raliser un site Internet en 5 tapes. Les boutons situs dans la colonne gauche de la fentre du programme indiquent la phase du processus de cration du site en cours ou permettent de sauter directement l'une des phases sans suivre l'ordre propos.

18

Barre d'outils infrieure Prcdent : permet de revenir la fentre prcdente pour modifier les configurations dj effectues.

Suivant : permet de passer la fentre suivante pour poursuivre la cration du site.

Bienvenue dans Incomedia WebSite X5

Cette fentre de bienvenue apparat quand vous lancez WebSite X5, elle propose des liens vers des ressources et le matriel enligne utiles pour bien travailler avec le logiciel. Ces liens apparaissent sous forme d'un tableau boutons latral organis comme suit : Didacticiel vido Affiche une srie de Didacticiels vido utiles pour comprendre comment commencer travailler avec le programme. Gallery Pour visiter la Gallery, savoir les archives enligne des sites raliss avec WebSite X5 qui ont t signals directement par leurs auteurs. Tlcharger de nouveaux modles Pour accder la section Modles X5 du site officiel de WebSite X5 et tlcharger de nouveaux modles ajouter la liste des modles prinstalls. Assistance Pour se connecter au Centre assistance, disponible en italien, anglais et allemand, et consultez les rponses aux questions les plus frquentes ou demander l'assistance. Prfrences Pour rappeler la fentre Prfrences permettant de dfinir certains paramtres gnraux relatifs au fonctionnement du programme. Rechercher des mises jour Pour vrifier la disponibilit de mises jour enligne pour la version installe de WebSite X5. Outre ces boutons, la fentre de Bienvenue prsente des contenus qui peuvent tre mis jour (si la connexion Internet est active) au cours du temps en proposant des sujets comme : des informations sur l'tat de mise jour du programme install, des News, des contenus spciaux (Messages d'approfondissement, WhitePaper, Tips&Tricks), de nouveaux Didacticiels vido, des promotions en cours.

19

Si la connexion Internet n'est pas disponible, la fentre de Bienvenue montre une page standard. Cette page s'affiche galement si vous dsactivez l'option Rechercher des mises jour au dmarrage du programme dans la fentre Prfrences. Aprs avoir explor les contenus de la fentre de Bienvenue, vous pouvez commencer la cration d'un site en cliquant sur le bouton Dmarrer.

Fentre Prfrences
Cette fentre, rappele l'aide du bouton Prfrences de la Page de Bienvenue, permet de dfinir certains paramtres gnraux relatifs au fonctionnement du programme. Les options disponibles sont :

Dossier de projets : permet d'indiquer

le dossier o sera enregistr le fichier de projet (fichier Project.IWP), en cas de cration d'un nouveau projet ou d'importation d'un projet dj existant (voir Choix du projet| Importer projet). Si vous slectionnez cette option, quand vous cliquerez sur le bouton Enregistrer pendant le travail de dveloppement du site, le projet sera directement enregistr sans vous demander dans quel dossier de destination.

Rechercher des mises jour au d-

marrage du programme : active par dfaut, permet de vrifier automatiquement la disponibilit des mises jour chaque lancement du programme. Pour effectuer cette recherche, le programme se connecte au serveur Incomedia via Internet. Il est conseill de laisser cette option slectionne pour avoir la certitude de travailler toujours avec la version la plus jour de WebSite X5.

Enregistrer chaque Aperu : permet d'enregistrer automatiquement le projet chaque fois que vous demandez l'aperu dans le navigateur travers la commande Tester.

Crer une copie de sauvegarde chaque enregistrement : active par dfaut, fait en sorte que le programme cre automatiquement une copie de sauvegarde (fichier Backup.IWP) avant chaque enregistrement du projet. 20

 Crer copie de sauvegarde lors de chaque tlchargement en amont : fait

en sorte que le programme cre automatiquement une copie de sauvegarde (fichier Uploaded_TimesTemp.IWP, o "TimesTemp" indique la date et l'heure de la cration de la sauvegarde) du projet chaque fois que vous publiez un site enligne (voir Exportation du site sur Internet). Selon l'option dfinie, chaque enregistrement ou publication, le programme cre automatiquement une copie de sauvegarde de la version du projet prcdent l'enregistrement ou la publication : cette copie est stocke avec le nom Backup.IWP ou Uploaded_TimesTemp.IWP dans le Dossier des projets. Pour rtablir une copie de sauvegarde il faut, aprs avoir supprimer le fichier de projet Project.IWP, renommer le fichier Backup.IWP ou le fichier Uploaded_TimesTemp.IWP en Project.IWP.

Mettre jour les pages au cours de la modification du Projet : active par

dfaut, fait en sorte que les pages relatives au site soient cres pendant la modification du projet. Dans le dtail, chaque fois que vous terminez une modification (en cliquant par exemple sur un bouton OK ou Suivant), le programme recre tout ce qui concerne la modification. Cela permet de maintenir toujours jour l'aperu du site et de l'afficher sans attendre.

Nombre max de traitements simultans : permet de dfinir le nombre de

processus (ou Thread) lancs par le programme qui doivent tre excuts simultanment par l'ordinateur. Le partage d'un processus en plusieurs processus excuts simultanment est nomm Multithreading et, pour fonctionner, il doit tre support par l'ordinateur. Plus simplement, le Multithread essai d'exploiter au mieux l'unit de calcul de l'ordinateur en lui faisant excuter plusieurs threads en parallle. Grce cette technique, un programme comme WebSite X5, qui a t dvelopp en partageant la charge de travail en plusieurs threads, peut avoir des amliorations considrables au niveau des performances. Pour obtenir un avantage rel du Multithreading, vous devez bien valuer la configuration matrielle de votre ordinateur. Il est conseill de commencer par 5 processus simultans et d'augmenter progressivement ce paramtre pour identifier le meilleur nombre rpondant vos exigences.

Type de script du formulaire de courriel : permet de choisir le script utiliser pour envoyer l'email gr par le programme relatif, par exemple, l'utilisa21

tion de l'Objet Formulaire d'envoi d'email ou la cration d'un Panier ecommerce. Par dfaut, le programme utilise le Script standard : si ce script ne fonctionne pas cause des configurations du serveur utilis, il est conseill d'essayer de le remplacer et de dfinir les options Script serveur de basse qualit ou Script bas niveau.

Soumission des donnes du formulaire de courriel : permet de choisir la

mthode d'envoi des donnes utiliser pour envoyer des donnes de l'Objet Formulaire d'envoi d'email. Par dfaut, le programme utilise la mthode POST mais, comme certains serveur pourraient ne pas tre dfinis correctement pour le supporter, vous pouvez choisir d'utiliser la mthode GET.

Vous savez que le protocole HTTP (Hypertext transfert Protocol) est utilis comme systme principal pour la transmission d'informations sur le Web. Ce protocole fonctionne selon un mcanisme de question/rponse o le Client pose une question et le serveur donne une rponse. En gnral, le Client correspond au navigateur et le serveur au site web. Les messages HTTP de question/rponse ont, bien videmment, leur propre syntaxe. Notamment, dans les messages de question, il faut indiquer une mthode et, parmi celles disponibles, les plus courantes sont GET et POST. La mthode GET est utilise pour obtenir le contenu de la ressource indique comme objet de la question (par exemple la page web voulue). La mthode POST, en revanche, est utilise en gnral pour envoyer des informations au serveur (par exemple les donnes d'un formulaire). Donc, dans le cas spcifique du formulaire e-mail, la mthode POST est la plus approprie mais, comme elle n'est pas supporte par le serveur, WebSite X5 permet d'utiliser la mthode GET.

Choix du projet
Aprs avoir lanc WebSite X5, vous accdez la Page de Bienvenue puis vous ouvrez la fentre Choix du projet o vous devez indiquer le projet sur lequel vous voulez travailler. Vous pouvez crer un nouveau projet ou modifier un projet existant.

Crer un nouveau Projet : si vous slectionnez cette option, vous procdez la

ralisation d'un nouveau site dont vous devez indiquer immdiatement le nom dans le champ situ au-dessous. Pour enregistrer le projet cr, cliquez sur le bouton Enregistrer situ dans la barre d'outils suprieure. Pendant les oprations d'enregistrement, vous ne devez pas indiquer le chemin car les projets sont automatiquement grs par le programme et enregistrs dans le Dossier des projets dfini travers la fentre Prfrences.

22

 Modifier un Projet existant : si vous slectionnez cette option, vous ouvrez un

projet cr prcdemment afin de le modifier ou le mettre jour. Tous les projets dj existants sont affichs dans la liste approprie. Pour slectionner plus facilement le projet ouvrir, vous disposez de diffrents affichages: Grandes icnes, Titres, Liste et Dtails. Par ailleurs, la

commande Afficher les groupes permet de regrouper tous les projets et de les afficher en fonction de la date de dernire modification. La liste des projets existants peut tre gre travers les commandes suivantes: - Importer : permet de dfinir, dans la fentre Importer projet, un projet cr prcdemment et export (voir Exporter le projet) avec WebSite X5 partir d'un PC diffrent. - Renommer : permet de modifier le nom du projet slectionn. - Dupliquer : permet de crer une copie du projet slectionn. - Supprimer : permet de supprimer le projet slectionn.

Choix du projet | Importer projet

Cette fentre, rappele en cliquant sur le bouton Importer prsent dans la section Choix du projet, permet de dfinir un projet cr prcdemment sur un ordinateur diffrent et de l'exporter l'aide de la fonction Exporter le projet. Grce cette fonction spcifique d'exportation, vous pouvez obtenir un seul fichier comprim (format .IWZIP) contenant le fichier projet d'origine (format .IWP) et tous les fichiers qui y sont relis (par exemple, relatifs aux images, aux vidos ou aux animations importes). Dans le dtail, la fentre Importer projet prsente les rubriques suivantes :

Fichier Projet importer : permet de slectionner le fichier projet (format

.IWZIP) importer.

Copier tous les fichiers lis au projet dans ce dossier : permet d'indiquer le

dossier l'intrieur duquel les fichiers associs au fichier projet seront copis. Vous savez ainsi quel dossier vous devez ouvrir pour pouvoir rappeler les fichiers associs au projet.

Pratiquement
Aprs avoir cr un projet sur l'ordinateur A, si vous voulez le dplacer sur un ordinateur B, procdez comme suit :

Sur l'ordinateur A
23

- Ouvrez le projet et, dans l'tape 5 - Exporter, choisissez l'option Exporter le projet. - Indiquez le Dossier de destination pour le projet et confirmez.

Transfrez le fichier comprim obtenu de l'exportation ( savoir le fichier MonProjet.iwzip, o "MonProjet" est le nom du projet de dpart) de l'ordinateur A l'ordinateur B.

Sur l'ordinateur B
- Ouvrez le programme et dans la fentre Choix du projet, cliquez sur le bouton Importer : utilisez la fentre Importer projet pour slectionner le fichier comprim prcdemment export et transfr ( savoir MonProjet.iwzip). - Toujours dans la fentre Importer projet, indiquez le dossier o vous voulez copier tous les fichiers associs au fichier projet. - Au terme de l'importation, slectionnez le projet et cliquez sur le bouton Suivant pour excuter le dveloppement ou la mise jour du site. Nous avons dj dit que le fichier .IWZIP obtenu avec l'exportation est un fichier comprim contenant le fichier projet d'origine et les fichiers qui y sont relis. Aprs l'importation, ce fichier est automatiquement dcomprim :

le fichier projet .IWP est enregistr dans le Dossier des projets dfini dans la fentre Prfrences et est affich dans la liste des projets de la fentre Choix du projet ; organis en sous-dossiers selon le critre suivant :

les fichiers associs sont en revanche enregistrs dans le dossier indiqu qui est
- Sous-dossier Gnral : il contient les fichiers dfinis dans les Paramtres gnraux tels que l'icne du site, les images/animations utilises dans le modle personnalis ou pour personnaliser l'en-tte de titre. - Sous-dossiers ObjImage, ObjVido, ObjFlash, etc. : ils contiennent les fichiers utiliss pour crer les objets insrs dans les pages du site. - Sous-dossier Advanced : il contient les fichiers dfinis dans les Paramtres avancs tels que le curseur pour les liens, les images des listes puces des sous-menus, les icnes du panier e-commerce, les drapeaux pour choisir la langue de consultation, etc. - Sous-dossier Links : il contient les fichiers associs aux liens prsents dans le site. - Sous-dossier Aspect : il contient les fichiers utiliss pour dfinir l'aspect des cellules de la grille de mise en page.

24

tape 1. Paramtres gnraux

25

Paramtres gnraux
Cette fentre initiale, la premire de l'tape 1, sert collecter dans des champs appropris certaines informations ncessaires pour configurer les paramtres de base du projet sur lequel vous tes en train de travailler. Il est important, par exemple, de dfinir un titre, d'indiquer l'URL, de dfinir une langue et de prvoir les codes et les Mta tags ncessaires pour activer des services supplmentaires comme celui des statistiques d'accs. Tous ces paramtres peuvent tre dfinis immdiatement ou par la suite. Dans le dtail, les options disponibles sont prsentes dans les sections suivantes :

Section Gnrales Section Avances Paramtres gnraux| Section Gnrales

La section Gnrales de la fentre Paramtres gnraux permet d'indiquer les paramtres suivants :

Titre du site : dans ce champ, tapez le titre du site. Ce titre qui sera affich dans

la barre de titre du Navigateur est, bien videmment, un paramtre important pour permettre aux utilisateurs et aux moteurs de recherche d'identifier correctement le site. Comme titre du site, le programme prend automatiquement le nom affect au projet (voir Choix du projet) : en tout cas, le titre du site peut tre modifi et tabli en fonction du sujet trait et des exigences d'optimisation spcifiques. site. Le nom de l'auteur est indiqu dans le code HTML des pages ralises comme valeur du Mta tag <author> : vous mettez ainsi votre signature sur votre travail. quelle le site sera disponible aprs sa publication. Cette information est ncessaire pour le bon fonctionnement d'ventuels Flux RSS, du Panier e-commerce et du Plan du site qui est automatiquement cr et reli par le programme. du site doit tre succincte, efficace et prcise : elle sera en effet utilise dans le code HTML comme contenu du Mta tag <description> et sera analyse par les spiders des moteurs de recherche. mots cl (spars par une virgule) qui sont importants pour le site. Les mots-cl seront insrs dans le code HTML comme valeur du Mta tag <keywords> et

Auteur du site : tapez le nom de la personne ou de la socit tant l'auteur du

Adresse Url du site : tapez l'adresse URL (ex, http ://www.monsite.com) la-

Description du site : tapez une brve description de votre site. La description

Mots-cl pour la recherche : dans ce champ, vous pouvez entrer une liste de
26

pourront tre utiliss par les moteurs de recherche. La description du site et la liste des mots-cl insrs dans ces champs sont automatiquement associes la page d'accueil du site. Pour optimiser le site, il est conseill d'associer chaque page, ou au moins aux plus importantes, une description et une liste des mots-cl spcifiques. Pour ce faire, accdez la fentre Cration du plan, slectionnez la page voulue et cliquez sur la commande Proprits de page.

Langue du contenu : dans ce champ, vous dfinissez la langue du site. Selon la

langue choisie, le programme utilise la version relative des textes qu'il insre automatiquement : des liens vers des ancres internes, des tiquettes de l'Objet Formulaire d'envoi d'email, des tiquettes et des textes du Panier e-commerce, des textes du Plan du site. Pour modifier les textes insrs automatiquement par le programme ou ajouter une nouvelle langue, cliquez sur le bouton et utilisez les options de la fentre Gestion du contenu linguistique (voir Comment grer les langues pour les textes insrs automatiquement).

Icne du site : ce champ permet de choisir une icne (fichier .ico ou .png) associer aux pages Web du site. Cette icne sera affiche gauche de l'URL dans la barre d'adresses du navigateur Internet.

Comme icne associe un site (ou favicon, de l'anglais favorites icon), vous pouvez utiliser une image au format .ICO, .PNG, .GIF et .JPG. Alors que les fichiers .ICO sont utiliss tels qu'ils sont, pour les fichiers au format .PNG, .GIF et .JPG, de n'importe quelle taille, WebSite X5 cre automatiquement une copie en fichier .PNG de 16x16 pixels et utilise cette copie comme favicon.

Comme grer les langues pour les textes insrs automatiquement

Certains textes prsents dans les pages cres avec WebSite X5 sont automatiquement insrs par le programme ; il s'agit, par exemple, de liens internes, de boutons de l'Objet de la galerie, d'tiquettes de l'Objet Formulaire d'envoi d'email, d'tiquettes et de textes du Panier e-commerce, de textes du Plan du site. Pour que ces textes insrs automatiquement apparaissent dans la bonne langue, il faut indiquer la langue principale du site travers l'option Langue du contenu disponible dans la fentre Paramtres gnraux. 27

Par dfaut, WebSite X5 permet de choisir parmi un certain nombre de langues (italien, anglais et allemand) dont il dispose de toutes les traductions ncessaires. En tout cas, les traductions prdfinies peuvent tre modifies, vous pouvez aussi ajouter ou importer de nouvelles langues ou bien supprimer les langues qui ne servent pas. Pour ce faire, il faut accder la fentre Gestion du contenu linguistique en cliquant sur le bouton Choisir... en regard de l'option Langue du contenu.

La fentre Gestion du contenu linguistique propose, gauche, la liste des langues disponibles et, droite, un tableau contenant les traductions en diffrentes langues. La premire colonne du tableau montre une description utile pour identifier o sont utilises les diffrentes rubriques ; il y a ensuite une colonne pour chaque langue active. L'expression langue active correspond une langue coche parmi celles prsentes dans la liste des langues disponibles. Vous pouvez donc travailler directement sur ce tableau pour modifier ou ajouter des rubriques. La fentre Gestion du contenu linguistique prsente, enfin, les boutons suivants : Ajouter une nouvelle langue : permet d'insrer, dans la bote de dialogue qui apparat, le nom d'une nouvelle langue crer. Le nom de la langue doit tre insr en respectant le format suivant : "ID - NomLangue", par exemple "EN English". Supprimer... Langue : permet de supprimer la langue slectionne dans la liste.

Pratiquement
Modifier une rubrique dj introduite Un exemple de texte insr automatiquement par le programme sont les tiquettes des boutons "Envoyer" et "Rinitialiser" prvus au terme du formulaire de contact. Supposons de remplacer l'tiquette "Remise zro" par "Annuler", aprs avoir dfini "franais" comme Langue du contenu, procdez comme suit :

Dans la fentre Gestion du contenu linguistique, si elle n'est pas encore active,
cliquez sur la langue franais pour voir la colonne relative dans le tableau des contenus.

28

 Dans la premire colonne du tableau des contenus, identifiez la rubrique "la-

bel_form" qui est celle relative l'tiquette modifier : dplacez-vous sur la ligne pour arriver la cellule correspondant dans la colonne de la langue franais. Double-cliquez dans la cellule pour faire apparatre le curseur : supprimez le texte "Rinitialiser" et tapez "Annuler".

Confirmez et enregistrer.
Ajouter une nouvelle Langue Pour crer un site dans une langue non encore prvue (par exemple, en portugais) et viter que les textes grs automatiquement soient insrs dans la version anglaise (qui est utilise par dfaut), vous devez prdisposer une nouvelle langue et entrer les traductions requises. Si vous avez les comptences linguistiques ncessaires, cette opration est trs simple :

Dans la fentre Gestion du contenu linguistique, cliquez sur le bouton Ajouter

Langue et, dans la bote de dialogue qui apparat, tapez l'inscription "PT - Portugus" : ainsi la nouvelle rubrique apparat au bas de la liste des langues disponibles. langue dans le tableau des traductions. les traductions ncessaires.

Cliquez sur la rubrique "PT - Portugus" pour afficher la colonne relative cette Cliquez dans les diffrentes cellules de la colonne "PT - Portugus" pour entrer Les traductions tant saisies, confirmez et enregistrez. Paramtres gnraux| Section Avances
La section Avances de la fentre Paramtres gnraux permet d'indiquer les paramtres suivants :

Code personnalis pour la section HEAD : tapez le code HTML que vous vou-

lez insrer dans la section <head> de chaque page. Cette fonction est particulirement utile pour inclure des bibliothques ou des feuilles de style (CSS) externes ou internes. de vrification ncessaire pour pouvoir utiliser les outils offerts par Google Webmaster Central.

Mta Tag de vrification pour Google WebMaster Tools : tapez le Mta tag

Pour plus d'informations sur le service Google WebMaster Central et pour obtenir un compte, cliquez sur le bouton et accdez au site officiel : http ://www.google.com/webmasters/ 29

 Code pour l'activation des statistiques : tapez le code ncessaire pour activer
les services de statistiques du site, par exemple Google Analytics, et obtenir des informations utiles sur la quantit et la qualit des visites qu'il reoit.

Pour plus d'informations sur le service Google Analytics et pour obtenir un compte, cliquez sur le bouton et accdez au site officiel : http ://www.google.com/analytics/

Crer automatiquement le SiteMap : active par dfaut, cette option fait en

sorte que le Plan du site soit automatiquement cr et reli. Pour bien construire le Plan du site et pour qu'il fonctionne correctement, il faut taper une adresse URL valide dans le champ Adresse Url du site prsent dans la section Gnrales de la fentre Paramtres gnraux.

Activer la protection d'accs code HTML : si vous slectionnez cette option,

les pages du site publi sont protges en dsactivant le clic du bouton droit de la souris pour demander l'affichage du code source ou la copie des images prsentes.

Que faire pour pouvoir utiliser Google Webmaster Central

Google Webmaster Central c'est un ensemble d'outils mis gratuitement disposition par Google pour permettre au Webmaster de rendre les sites conformes ses indications. Ces outils expliquent comment Google voit un site et vous aident diagnostiquer les ventuels problmes : si vous les utilisez correctement, ils vous aideront amliorer la visibilit de votre site sur le Moteur. Pour utiliser Google WebMaster Central, vous devez disposer d'un compte Google puis dmontrer que vous tes le vritable propritaire du site analyser. Une des mthodes pour dmontrer cela est de copier un Mta Tag fourni par Google et de le coller sur la page d'accueil du site dans la premire section <head> de la page, avant la section <body>. Rsumons les tapes suivre :

Vous devez disposer d'un compte sur Google. Accdez la page de prsentation de Google Webmaster Central et connectezvous.

Dans la Page d'accueil, cliquez sur le bouton Ajouter un site, , tapez l'URL du site
que vous voulez contrler et validez en cliquant sur Continuer.

30

 Dans la page Vrifier Proprits qui apparat , choisissez comme mthode de

vrification Ajouter un Mta tag la page d'accueil de votre site.

Copiez le Mta tag fourni par Google et collez-le dans le champ Mta tag de vrification pour Google Webmaster Central de la fentre Paramtres gnraux | Section Avances de WebSite X5 : le programme veillera insrer le Mta tag dans la bonne position l'intrieur du code HTML de la Page d'accueil. Le Mta tag de contrle fourni par Google se prsente comme suit : <meta name="verify-v1" content="VOPR4uw/YqV+MWVmJt0niEQ=" />

Aprs avoir publi le site enligne, revenez sur cette page de Google Webmaster
Central et terminez la procdure en cliquant sur Vrifier.

Comment activer un service de statistiques comme, par exemple, Google Analytics

Le rseau offre de nombreux services de statistiques dont le plus connu est celui fourni par Google : Google Analytics. Cet outil, compltement gratuit, permet de prdisposer de nombreux rapports pour contrler et analyser, mme d'une manire approfondie, les accs au site. Google Analytics peut tre utilis diffrents niveaux : vous pouvez demander simplement le nombre de visites effectues ou contrler la progression des campagnes publicitaires rpandues par le programme Google AdSense. Pour pouvoir exploiter Google Analytics, il faut indiquer au moteur le site analyser et notamment les pages contrler rgulirement : pour ce faire, il faut insrer un code de contrle dans le code des pages du site. Rsumons les tapes suivre :

Vous devez disposer d'un compte sur Google. Accdez la page de prsentation de Google Analytics et connectez-vous. Dans la page Paramtres Analytics, tapez le site analyser l'aide de la commande Ajouter nouveau profil.

Le profil tant cr, dans la page Vue d'ensemble cliquez sur le bouton Modifier
dans la colonne Actions pour le site web voulu.

Dans la page Paramtres profil qui apparat, vous verrez l'inscription "contrle

inconnu" : cliquez sur vrifier l'tat pour afficher le code utiliser pour contrler les pages. Code d'activation des statistiques de la fentre Paramtres gnraux| Section Avances de WebSite X5 : le programme veillera insrer le Mta tag dans la bonne position l'intrieur du code HTML des pages du site. 31

Copiez le code pour le contrle fourni par Google et collez-le dans le champ

Le code du contrle fourni par Google se prsente comme suit : <script type="text/javascript"> var gaJsHost = (("https :" == document.location.protocol) ? "https ://ssl." : "http ://www.") ; document.write(unescape("%3Cscript src='" + gaJsHost + "googleanalytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")) ; </script>

Comment crer et connecter le Plan du site

WebSite X5 est en mesure de crer le Plan du site XML et de l'associer au code HTML des pages travers le Mta tag <sitemap>. Un plan du site est un fichier XML contenant la liste des pages d'un site : il a t introduit par Google (et il est prsent utilis par Yahoo ! et MSN) pour amliorer et rendre plus rapide le balayage des sites Web. En d'autres mots, en crant et en envoyant le Plan du site, les Webmasters peuvent s'assurer qu'un moteur de recherche, dans ce cas Google, connaisse toutes les pages prsentes dans un site, y compris celles qui risqueraient de ne pas tre dtermines travers la procdure de balayage normale. travers le Plan du site, vous pouvez vhiculer aux moteurs de recherche mme des informations relatives aux contenus du site comme des vidos, des images, des nouvelles, etc. ; par ailleurs, le Plan du site peut contenir des informations supplmentaires comme : avec quelle frquence chaque page est mise jour ; la date de la dernire modification des pages ; l'importance de chaque page dans l'conomie du site (cette priorit n'a aucun effet sur le positionnement des pages dans les rsultats de recherche).

Pratiquement
Pour crer et connecter le Plan du site un site, il suffit de laisser active, comme par dfaut, l'option Crer automatiquement le SiteMap prsente dans Paramtres gnraux| Section Avances. Ceci tant fait, vous pouvez faire en sorte que le Plan du site contienne certaines informations supplmentaires, spcifiques de chaque page, comme suit :

A l'tape 2 - Cration du plan, slectionnez la page sur laquelle vous voulez travailler. Cliquez sur le bouton
vrez la section Avance. pour rappeler la fentre Proprits de la page et ou-

Dfinissez la Frquence de mise jour et la Priorit des contenus. Rptez ces oprations pour les diffrentes pages du site.
32

Ajouter les images dans le Plan du site Le Plan du site peut tre utilis pour passer Google des informations supplmentaires sur les images prsentes dans un site, en l'aidant ainsi trouver des images qui diffremment ne seraient pas releves (par ex. celles comprises dans des formulaires JavaScript) et comprendre quelles sont les informations les plus importantes. Par exemple, si vous n'insrez pas dans le Plan du site les images qui font partie du modle graphique ou qui ont une valeur purement ornementale, vous indiquez Google qu'elles sont moins importantes que d'autres. Google spcifie que vous pouvez insrer 1000 images au maximum pour chaque page l'intrieur d'un Plan du site et que l'indexation de toutes les images ou l'utilisation de toutes les informations insres n'est pas garantie. Aprs avoir lanc la cration du Plan du site, vous pouvez ajouter les informations sur une image d'une faon trs simple :

Double-cliquez sur l'objet image relatif l'image sur laquelle vous voulez travailler pour accder la fentre Objet Image. du site.

Ouvrez la section Plan du site et slectionnez l'option Ajouter image au Plan Si vous voulez, vous pouvez remplir les champs Titre, Description brve, Position
gographique et URL du fichier de licence. dans le site.

Rptez les oprations dcrites pour toutes les images importantes contenues
plus d'informations, voir objet Image | Section Plan du site. Ajouter les informations sur les vidos dans le Plan du site Le Plan du site peut tre utilis pour passer Google des informations sur les vidos prsents dans un site. Dans ce cas galement, Google ne donne pas de garanties mais l'insertion de vidos dans le Plan du site peut faire en sorte que ces contenus soient plus facilement relevs et donc compris dans la recherche sur Google Vido. travers le Plan du site, vous pouvez indiquer une srie d'informations supplmentaires, comme par exemple le titre, la description et la dure du vido, qui peuvent simplifier la recherche. Ces informations et d'autres informations sont reproposes dans les pages avec les rsultats des recherches (SERP). Il faut toutefois souligner que, en cas de diffrences, Google pourrait dcider d'utiliser dans le SERP le texte disponible dans les pages du vido au lieu des contenus prdisposs travers le Plan du site. 33

Pour complter le Plan du site en ajoutant les informations sur les vidos prsents, il suffit de procder comme suit :

Double-cliquez sur l'objet relatif au vido sur lequel vous voulez travailler pour
accder la fentre Objet Vido/Audio. du site.

Ouvrez la section Plan du site et slectionnez l'option Ajouter le vido au Plan Dfinissez les informations qui doivent tre obligatoirement prsentes l'intrieur du Plan du site : Titre, Description brve et Image d'aperu. Mots cl, Date de publication, Dure et Contenu adapt tous. le site.

Vous pouvez, si vous le souhaiter, dfinir les paramtres suivants : Catgorie, Rptez les oprations dcrites pour tous les vidos importants contenus dans
Pour plus d'informations, voir objet Vido/Audio | Section Plan du site. Supprimer une page du Plan du site Par dfaut, aprs avoir lanc la cration du Plan du site, toutes les pages d'un site y sont comprises. En tout cas, si vous voulez que les Moteurs de recherche ne prennent pas en considration une ou plusieurs pages, il suffit de les supprimer du Plan du site. Pour ce faire, il suffit de :

Dans la fentre Cration du plan (tape 2), slectionnez la page supprimer du

Plan du site.

Cliquez sur le bouton

pour rappeler la fentre Proprits de la page et ou-

vrez la section Avances.

Retirez la coche de l'option Ajouter cette page au plan du site. Confirmez et enregistrez.

Slection du modle
L'un des facteurs qui concourent dterminer le succs d'un site web est srement l'aspect graphique. Avant d'arriver aux contenus et la structure de navigation, l'aspect du site frappe en effet le navigateur, en influenant de manire dterminante son jugement. Un design soign et professionnel est interprt comme l'indice d'un site de qualit qui vaut la peine d'approfondir ses contenus. WebSite X5 permet de dfinir l'aspect du site en choisissant le modle graphique appliquer dans une galerie de plus de 1.500 modles, ou en crant un modle personnalis ex novo. 34

Tous les modles prdfinis ont t tudis dans les plus petits dtails pour garantir un trs bon rsultat et ils offrent 4 variantes diffrentes de style s'adaptant facilement aux exigences spcifiques. Grce l'diteur interne, tous les modles prdfinis peuvent tre largement personnaliss.

Tout d'abord, pour dfinir le style graphique du site, slectionnez une des options suivantes :

Modle personnalis : pour dfinir votre propre style. Modle prdfini : pour appliquer un modle prdfini choisi parmi les modles proposs. Si vous dcidez de choisir un modle prdfini, parcourez la liste des modles disponibles. Comme les modles sont trs nombreux, pour faciliter le choix, ils sont partags en catgories thmatiques. Aprs avoir slectionn une catgorie dans le menu appropri, le programme affiche une miniature de tous les modles qu'elle comprend. Si vous slectionnez une miniature, vous affichez un Aperu plus grand. Aprs avoir slectionn un modle, vous pouvez dfinir les Options suivantes :

Type de menu : permet de dfinir la structure du site en choisissant comment

prdisposer le menu de navigation fixe. Vous pouvez choisir parmi les structures Menu vertical ou Menu horizontal. Dans les versions prcdentes de WebSite X5, le choix entre le menu horizontal et le menu vertical tait effectu dans la fentre Choix du menu qui n'existe plus dans la version 9.

35

 Styles : pour chaque modle, vous disposez de 4 variantes de style, chacune

reprsente dans un petit aperu. Pour agrandir l'aperu d'une variante ou pour la slectionner, cliquez sur celui-ci.

Dans la version 8 de WebSite X5, chaque modle disposait de 4 Couleurs : les variantes de style actuelles ont des palettes de couleurs, des paramtrages et des lments graphiques diffrents.

Tonalits : en plus des 4 variantes de style prdfinies, vous pouvez agir sur le

curseur Effet Masque pour obtenir une variante de couleur originale. Grce cette option, les variantes graphiques deviennent presque infinies. Les modles sont optimiss pour un cran rsolution 1024 par 768 pixels. Si vous voulez crer un site avec une rsolution diffrente, choisissez le Modle personnalis. Vous voulez ajouter de nouveaux modles la galerie de modles graphiques ? Vous avez cr de nouveaux modles et vous voulez les mettre la disposition de la communaut des utilisateurs de WebSite X5 ? Pour ce faire, rappelez l'adresse www.websitex5.com/templates et accdez la section WebSite X5 Templates consacre aux modles graphiques. Sur WebSite X5 Templates vous trouverez de nombreux modles graphiques, raliss par Incomedia ou d'autres utilisateurs, aussi bien gratuits que payants, que vous pourrez tlcharger et utiliser pour votre projet. Vous pourrez par ailleurs enrichir ces archives des modles que vous avez crs. N'oubliez donc pas de rendre visite priodiquement WebSite X5 Templates pour voir les nouveauts : vous pouvez galement souscrire le Flux RSS pour qu'il soit constamment mis jour.

Comment est organis le dossier Modles relatif aux modles prinstalls

Pour modifier un modle prinstall ou ajouter dans la liste des modles disponibles un propre modle, vous devez savoir comment et o les modles sont enregistrs lors de l'installation de WebSite X5. Les fichiers graphiques relatifs aux diffrents modles prdfinis sont stocks dans le sous-dossier /Templates du dossier d'installation du programme. 36

Par exemple, les fichiers relatifs au modle "City" prsent dans la catgorie "2.Travel" sont enregistrs avec les chemins suivants :

/Templates/2.Travel/City/Hor - pour les modles avec le menu de navigation

horizontal ; vertical.

/Templates/2.Travel/City /Ver - pour les modles avec le menu de navigation

Les sous-dossiers /Hor et /Ver contiennent d'autres sous-dossiers numrots de 1 4. Ces 4 sous-dossiers correspondent chacun une variante de style du modle. En effet, dans la fentre Slection du modle, si vous pointez la souris sur les boutons permettant de choisir la variante de style appliquer, le programme affiche une info-bulle indiquant le numro correspondant au nom du sous-dossier. Le sous-dossier du modle (/Templates/2.Travel/City) contient le fichier settings.xml. Ce fichier de texte contient certains paramtres de base comme : ContentHorWidth et ContentVerWidth (la largeur des contenus pour le modle au menu horizontal ou vertical), MenuHorWidth (la largeur du menu horizontal), MenuHorHeight (la hauteur du menu horizontal). Les valeurs de ces paramtres sont exprimes en pixels. Les sous-dossiers #1, #2, #3 et #4 accueillent les fichiers graphiques (fichier JPG) relatifs aux images utilises pour composer le modle. En plus des 4 sous-dossiers cits, les dossiers /Hor et /Ver contiennent les fichiers suivants, communs aux 4 variantes de style :

index.html : contient le code relatif la structure de base du modle. template.css : c'est la feuille de style o figurent les instructions ncessaires
pour dfinir certaines prdispositions de base sur la prsentation des contenus.

Modle personnalis
WebSite X5 permet de crer un modle de style personnalis ex novo : pour ce faire, slectionnez l'option Modle personnalis dans la fentre Slection du modle et cliquez sur le bouton Suivant. Pour faciliter le travail, la fentre Modle personnalis offre un Aperu montrant une reprsentation schmatique de la page. Vous pouvez choisir la section modifier dans la liste ou cliquer directement sur les diffrentes zones de la structure de la page pour les slectionner, modifier leur aspect l'aide des commandes appropries et voir immdiatement le rsultat des actions excutes.

37

Pour crer un modle personnalis, vous devez indiquer tout d'abord le Type de menu, savoir quel endroit et dans quel sens doit tre positionn le menu de navigation l'intrieur des pages du site. Les possibilits sont : Horizontal Menu au-dessus de l'en-tte Horizontal Menu sous l'en-tte Dans les versions prcdentes de WebSite X5, le choix entre le menu horizontal et le menu vertical tait effectu dans la fentre Choix du menu qui n'existe plus dans la version 9. Aprs avoir choisi le type de menu, slectionnez la section de la page sur laquelle vous voulez travailler. Voici les sections de la page : Arrire-plan de la page : c'est la zone externe de la page qui est affiche quand la fentre du navigateur est ouverte avec une taille dpassant la rsolution du site. En-tte : c'est l'en-tte, ou bannire suprieure, une section principalement graphique idale pouvant contenir des lments tels que le titre et le sous titre du site, le logo de la compagnie, des champs de recherche, le menu de service avec des liens, par exemple pour afficher le Plan ou choisir la langue de consultation. Menu : c'est la zone destine accueillir la navigation fixe, savoir les rubriques de premier niveau du menu qui ne changent pas dans chaque page du site. Bien videmment, la position de cette zone change en fonction de la structure du site choisie. 38 Vertical Menu gauche

Contenu de la page : c'est la zone destine accueillir le contenu des pages et, ventuellement, les sous-menus de navigation. Pied de page : c'est le pied de page, une autre section principalement graphique qui a pour but de terminer visuellement la page. En gnral, cette zone contient des lments comme des remarques, des avis de nonresponsabilit, le copyright, le code de Siret, des adresses email. Arrire-plan du pied de page : c'est la partie de l'arrire-plan du site qui commence exactement la hauteur du pied de page. Si elle est dfinie comme Transparent l'arrire-plan du pied de page est trait comme partie intgrante de l'arrire-plan de la page et prend le mme aspect. Dans des cas particuliers (par exemple, si vous voulez une bande pour le pied de page qui occupe toute la largeur de la fentre du navigateur), il peut tre utile de choisir un arrire-plan du pied de page diffrent de l'arrire-plan de la page. Pour toutes les zones mentionnes ci-dessus, vous pouvez utiliser les options suivantes:

Couleur : permet de dfinir la couleur d'arrire-plan pour la zone de la page

slectionne en rappelant la fentre Couleur.

Fichier image : permet de dfinir une image (.jpg, .gif ou .png) appliquer

comme arrire-plan de la page slectionne. Dans le cas de l'En-tte ou du Pied de page, vous pouvez prvoir mme une animation Flash (.swf). arrire-plan de la cellule. L'image peut tre rpte horizontalement, verticalement ou dans les deux sens pour remplir tout l'espace disponible. Par ailleurs, seulement pour la section Arrire-plan de la page, vous pouvez adapter l'image, savoir la redimensionner pour qu'elle couvre tout l'arrire-plan : dans ce cas, les proportions d'origine ne sont pas respectes.

Disposition : permet de dfinir s'il faut rpter ou non l'image utilise comme

Alignement : permet de choisir l'alignement de l'image sur la page.

Seulement pour la zone Arrire-plan de la page vous disposez de l'option :

Image d'arrire-plan fixe : si vous slectionnez cette option, l'image insre

comme arrire-plan de la page reste fixe mme quand vous faites dfiler le contenu de la page l'aide de la barre de dfilement.

Pour les zones En-tte et Menu vous disposez de l'option :

Largeur : indique la valeur exprime en pixels de la largeur de la zone de la

page slectionne. Pour le menu Vertical, la largeur est dfinie par dfaut sur 960 pixels pour la section En-tte et 120 pixels pour la section Menu mais vous pouvez les modifier votre gr. Pour le menu Horizontal, la largeur dfinie pour l'En-tte est automatiquement applique au menu, au contenu de la page et au Pied de page. 39

La largeur dfinie par dfaut est calcule pour obtenir un affichage du site optimis 1024x768 pixels. Pour les zones En-tte, Menu (seulement pour le menu Horizontal) et Pied de page vous disposez de l'option :

Hauteur : indique la valeur exprime en pixels de la hauteur de la zone de la

page slectionne. Enfin, pour les sections Arrire-plan de la page, Menu et Contenu de la page vous disposez des options :

Marge suprieure / Marge du bas : permettent d'indiquer, respectivement, la

valeur en pixels dfinir pour les marges suprieure et infrieure. La marge correspond l'espace vide entre la bordure de la section et son contenu.

Seulement pour les sections Menu et Contenu de la page vous disposez aussi des options :

Marge gauche / Marge droite : permettent d'indiquer, respectivement, la valeur en pixels dfinir pour les marges gauche et droite. La largeur effective de la page du site est donne par la largeur du Contenu de la page (qui dpend de la largeur de l'En-tte) laquelle il faut soustraire la marge gauche et la marge droite.

Modifier le modle
Aprs avoir choisi l'un des modles prdfinis dans la fentre Slection du modle ou avoir cr un modle ex novo dans la fentre Modle personnalis, vous accdez la fentre Modifier le modle. Les sections En-tte et Pied de page de cette fentre permettent de personnaliser, respectivement, l'en-tte et le pied de page du modle en ajoutant des textes, des images, des animations Flash, des diaporamas, un code HTML, des champs de recherche et des liens. Quand vous travaillez sur l'image de l'En-tte ou celle du Pied de page, les commandes et les options disponibles sont identiques. Dans les sections En-tte ou Pied de page, si vous insrez comme arrire-plan une animation Flash, la fentre Modifier le modle ne permet pas de la personnaliser. 40

La fentre prsente un diteur graphique o, sous la barre d'outils, le programme prend automatiquement l'image utilise comme arrire-plan de l'En-tte ou du Pied de page du modle choisi (aussi bien prdfini que personnalis) : l'image est affiche l'chelle 1 :1 et vous pouvez, si ncessaire, la faire dfiler l'aide de barre de dfilement horizontal. Le programme montre en temps rel toutes les modifications effectues sur cette image travers les commandes disponibles. Sous l'image charge se trouve une barre d'tat indiquant :

Position : affiche les coordonnes x et y qui identifient la position de l'angle

suprieur droit de l'objet slectionn. l'objet slectionn.

Taille : affiche la valeur exprime en pixels de la largeur et de la hauteur de

Aprs avoir insr un objet l'aide de la commande approprie de la barre d'outils, vous pouvez le slectionner et le modifier travers les options prsentes dans le cadre portant le nom de cet objet. Vous pouvez donc avoir un :

cadre En-tte / Pied de page cadre Texte cadre Image cadre Animation Flash

cadre Diaporama cadre Code HTML cadre Champ de recherche

Par ailleurs, vous disposez du cadre Effets qui est commun aux objets Texte, Image et Diaporama.

41

Modifier le modle| Barre d'outils

Dans la fentre Modifier le modle, la barre d'outils de l'diteur graphique prsente les commandes suivantes : Couper [CTRL+X] / Copier [CTRL+C] / Coller [CTRL+V] Permettent, respectivement, de couper, copier et coller l'objet slectionn. Annuler [CTRL+Z] Permet d'annuler la dernire opration. Mettre au premier plan / Mettre au second plan Permettent, respectivement, de mettre l'objet slectionn en premier ou second plan, savoir au-dessus ou au-dessous des autres objets ventuellement superposs. Associer un lien Permet de dfinir un lien sur le texte, sur l'image ou sur les images du Diaporama slectionnes. Vous pouvez dfinir les configurations du lien dans la fentre Lien. Position et taille Permet de dfinir, dans la fentre rappele, les coordonnes qui dterminent la position et les dimensions de l'objet slectionn. L'option Conserver la proportion, active par dfaut, fait en sorte que les oprations de redimensionnement ne changent pas les proportions d'origine de l'objet. Insrer texte / Insrer image / Insrer animation Flash / Insrer Diaporama / Insrer code HTML / Insrer champ de recherche Permettent, respectivement, d'insrer un texte, une image, une animation Flash, un diaporama, un code HTML ou un champ de recherche. Le diaporama est compos d'une squence d'images qui dfilent automatiquement l'une aprs l'autre : il peut tre utile pour crer des bannires publicitaires. Si vous entrez un code HTML, vous pouvez ajouter n'importe quel type de contenu : ainsi, vous avez bien plus de possibilits que celles offertes par les commandes. Enfin, le champ de recherche exploite un moteur interne permettant d'excuter des recherches sur les contenus du site. Les animations Flash et les objets Code HTML insrs s'affichent seulement quand vous ouvrez le site dans le navigateur. 42

Modifier le modle| Cadre En-tte / Pied de page

Dans la fentre Modifier le modle, si vous cliquez directement sur l'image d'arrire-plan des sections En-tte et Pied de page, vous la slectionnez et vous pouvez alors agir sur les options du cadre En-tte / Pied de page :

Fichier image : permet d'afficher le chemin du fichier graphique utilis.

L'image prsente peut tre remplace par une nouvelle image : vous pouvez utiliser les fichiers au format JPG, GIF, PNG, BMP, PSD, TIF, DIB, PCX, RLE, TGA, WMF. Texte et Image ajouts dans l'En-tte/Pied de Page seront fondus avec l'image d'arrire-plan utilise qui sera automatiquement enregistre comme un nouveau fichier au format PNG. Le choix du format PNG permet de maintenir les ventuelles transparences dfinies. Si vous ne devez pas grer des transparences particulires, vous pouvez slectionnez l'option Enregistrer comme image JPG pour obtenir une image d'arrire-plan plus petite. Il est utile de connatre le chemin du fichier utilis comme arrire-plan de l'En-tte/Pied de page pour l'identifier plus facilement, l'ouvrir, le modifier avec un diteur externe et enregistrer une copie qui remplacera l'original.

Enregistrer comme image JPG : lors de la phase de cration du site, les objets

Modifier le modle | Cadre Texte

Dans la fentre Modifier le modle, si vous slectionnez un objet du texte insr dans les sections En-tte et Pied de page, vous pouvez agir sur les options du cadre Texte :

Contenu : permet de saisir le contenu du texte. Police : permet de dfinir le type de police, le style et la taille en points du texte. Couleur texte / Couleur d'arrire-plan : permettent de dfinir, dans la fentre
Couleur, la couleur des caractres et de l'arrire-plan du texte insr.

Modifier le modle | Cadre Image

Dans la fentre Modifier le modle, si vous slectionnez un objet Image insr dans les sections En-tte et Pied de page, vous pouvez agir sur les options du cadre Image :

Fichier image : permet de slectionner le fichier graphique relatif l'image

insrer. Vous pouvez utiliser les fichiers au format JPG, GIF, PNG, BMP, PSD, TIF, DIB, PCX, RLE, TGA, WMF. 43

Fichier image au passage de la souris : permet de slectionner un second fi-

chier graphique qui sera affich lors du passage de la souris sur l'image. Cette option est particulirement utile pour crer des boutons avec l'effet enfonc/relch.

Activer la transparence : si vous slectionnez cette option, la transparence est

applique l'image pour rendre invisible une couleur donne. Couleur de transparence : permet de dfinir, dans la fentre Couleur, la couleur de l'image qui doit devenir invisible quand l'option Activer transparence est slectionne. Dans ce cas, l'outil "compte-gouttes" est particulirement utile, car il permet de capturer la couleur directement partir de l'image. rence. Plus la valeur de tolrance est grande, plus la zone de l'image devenue transparente est grande.

Tolrance : permet de dfinir le facteur de tolrance pour appliquer la transpa-

Modifier le modle | Cadre Animation Flash

Dans la fentre Modifier le modle, si vous slectionnez un objet Animation Flash insr dans les sections En-tte et Pied de page, vous pouvez agir sur les options du cadre Animation Flash :

Fichier animation : permet de slectionner le fichier SWF relatif l'animation

Flash insrer.

Arrire-plan transparent : si vous slectionnez cette option, l'arrire-plan de

l'animation devient invisible.

Modifier le modle | Cadre Diaporama

Dans la fentre Modifier le modle, si vous slectionnez un objet Diaporama insr dans les sections En-tte et Pied de page, vous pouvez agir sur les options du cadre Diaporama :

Liste des images : affiche la liste des images composant le Diaporama. Pour

chaque image insre, le programme indique le chemin du fichier ainsi que l'effet et le lien associs (s'ils sont prsents). Si vous slectionnez un fichier de la liste, celui-ci est affich dans l'aperu. Vous pouvez aussi effectuer une slection multiple des fichiers l'aide des commandes CTRL+clic et SHIFT+clic. images ou de supprimer les images slectionnes dans la liste de celles composant le diaporama. La fentre Slection fichier permet de slectionner plusieurs fichiers simultanment. ne avant ou aprs l'image prcdente/suivante dans la liste d'images afficher dans le Diaporama.

Ajouter / Supprimer... : permettent, respectivement, d'ajouter de nouvelles

En haut / En bas : permettent, respectivement, de dplacer l'image slection44

 Effet : permet de rappeler la fentre Proprits de l'effet permettant de dfinir

les effets d'entre, le mouvement, le zoom et les liens pour les images du Diaporama slectionnes parmi celles prsentes dans la liste d'images afficher. porama parte automatiquement.

Lecture automatique : active par dfaut, cette option fait en sorte que le Dia Afficher dans un ordre fortuit : si vous slectionnez cette option, les images
insres dans le Diaporama sont reproduites dans un ordre fortuit et non pas dans l'ordre o elles apparaissent dans la liste d'images afficher.

Modifier le modle | Cadre Code HTML

Dans la fentre Modifier le modle, si vous slectionnez un objet HTML insr dans les sections en-tte et Pied de page, vous pouvez agir sur les options du cadre Code HTML :

Code HTML : permet de saisir le code HTML relatif l'objet crer. Afficher les barres de dfilement : si cette option est slectionne, toutes les
barres de dfilement apparaissent sur la page. Par ailleurs, vous pouvez cliquer sur le bouton rappel, choisir si vous voulez insrer : Insrer Snippet et, dans le menu

La date de publication [DATE] : permet d'insrer automatiquement la date de L'heure courante [HOUR] : permet d'insrer automatiquement l'indication de
l'heure courante. Par exemple, vous pouvez taper : "Il est [HOUR]". Par exemple, vous pouvez taper : "Aujourd'hui c'est le [NOW]".

publication de la page. Par exemple, vous pouvez taper : "Page mise jour le [DATE]".

La date courante [NOW] : permet d'insrer automatiquement le jour courant. La dconnexion de la zone rserve [LOGOUT] : permet d'insrer automatiquement le terme Logout avec le lien ncessaire pour permettre l'utilisateur de quitter la zone rserve (compose des Pages protges auxquelles il peut accder en saisissant ses donnes d'accs) et revenir la Page d'accueil du site. Ce lien vers la dconnexion (Logout) n'est affich que si l'utilisateur s'est connect (Login) prcdemment. Le terme "Logout" peut tre modifi dans la fentre Gestion du contenu linguistique.

45

Modifier le modle | Cadre Champ de recherche

Dans la fentre Modifier le modle, si vous slectionnez le Champ de recherche insr dans les sections en-tte et Pied de page, vous pouvez agir sur les options du cadre Champ de recherche :

Nom du bouton : permet de dfinir le texte afficher sur le bouton qui lance la
recherche.

Police : permet de dfinir le type de police, le style et la taille en points du texte. Couleurs du champ : permet de dfinir la couleur du texte et de l'arrire-plan
du champ dans la fentre Couleur.

Couleurs de bouton : permet de dfinir la couleur du texte et de l'arrire-plan

du bouton dans la fentre Couleur.

Comment fonctionne le moteur de recherche interne de WebSite X5

WebSite X5 permet d'insrer dans les sites crs un champ pour y rechercher des titres et des contenus de pages. Les rsultats de la recherche, rangs en fonction de leur pertinence, apparaissent dans des pages cres automatiquement par le programme. Pour exploiter au mieux le moteur de recherche interne de WebSite X5, sachez que:

Pages - Les lments de la page pris en considration par le moteur sont : Titre,

Description et Mot cl (voir la fentre Proprits de page| Gnral) mais aussi les contenus textuels. Comme les occurrences identifies dans les titres des pages ont une grande importance , elles sont automatiquement multiplies pour un facteur de correction avant d'tre associes aux autres occurrences. En fonction du nombre d'occurrences ainsi calcul, le programme dfinit l'importance, et donc la position, de chaque rsultat prsent dans la page d'affichage des rsultats de la recherche. (dans une Zone rserve) ne sont pas prises en considration par le moteur de recherche interne si l'utilisateur n'a pas pralablement effectu la connexion.

Zone rserve - Les pages protges par un nom utilisateur et un mot de passe Pages non visibles - Les pages dfinies comme Non visibles sur le Menu de navigation font normalement partie de celles considres par le moteur de recherche interne.

Pour exclure une page de la recherche - Pour faire en sorte qu'une page ne

soit pas prise en considration par le moteur de recherche interne, slectionnez-la dans le Plan, rappelez la fentre Proprits de page et dans la section Avance dcochez l'option Ajouter cette page au plan du site.

46

 Majuscules/Minuscules - Le moteur de recherche n'est pas case sensitive :

c'est--dire qu'il ne fait pas la diffrence entre les lettres majuscules et minuscules. sultats de la recherche sont automatiquement cres par le programme : l'aspect graphique de ces pages est tabli par les prdispositions dfinies dans l'tape 4 - Paramtres avancs, de la section Styles et modles.

Pages d'affichage des rsultats de la recherche - Les pages affichant les r-

Modifier le modle| Cadre Effets

Dans la fentre Modifier le modle, si vous slectionnez un objet Texte, un objet Image ou un objet Diaporama insr, vous pouvez agir sur les options du cadre Effets :

Type d'effet : permet de slectionner et d'activer un ou plusieurs effets appliquer l'objet slectionn. Sur chaque objet texte, image et diaporama, vous pouvez appliquer plusieurs effets simultanment ; pour chaque effet, vous pouvez modifier diffrents paramtres : Effet Ombre Paramtres Diffusion : permet de dfinir jusqu' quel point l'ombre doit tre diffuse. Couleur : permet de dfinir la couleur de l'ombre appliquer l'aide de la fentre Couleur. Distance X / Distance Y : permettent de dfinir jusqu' quel point l'ombre doit tre dplace horizontalement par rapport l'objet auquel elle est applique. En insrant une valeur positive, vous obtenez un dplacement de l'ombre, respectivement, vers la droite ou le bas ; en revanche, si vous tapez une valeur ngative, vous obtenez un dplacement de l'ombre vers la gauche ou vers le haut. Reflet Diffusion : permet de dfinir jusqu' quel point le reflet doit tre diffus, savoir quelle sera sa grandeur. Distance : permet de dfinir jusqu' quel point le reflet doit tre distant de l'objet auquel il est appliqu. Bordure colore Distance : permet de dfinir jusqu' quel point le reflet doit tre distant de l'objet auquel il est appliqu. Couleur : permet de dfinir la couleur de la bordure appliquer l'aide de la fentre Couleur. 47

Lueur externe

Diffusion : permet de dfinir jusqu' quel point la lueur doit tre diffuse. Couleur : permet de dfinir la couleur de la lueur appliquer l'aide de la fentre Couleur.

Bomb

Profondeur : permet de dfinir jusqu' quel point l'effet bomb doit tre accentu. Diffusion : permet de dfinir jusqu' quel point l'effet bomb doit tre diffus. Angle : permet de dfinir l'angle de l'effet bomb appliquer.

Rotation

Angle : permet de slectionner la valeur de l'angle de rotation (effectu dans le sens des aiguilles d'une montre) appliquer. Opacit : permet de saisir une valeur de 0 255 pour dfinir le degr d'opacit de l'image. Plus les valeurs se rapprochent du 0, plus l'opacit de l'image devient transparente. Diffusion : permet de dfinir jusqu' quel point le flou doit tre diffus. Diffusion : permet de dfinir la grandeur de la vague. Frquence : permet de dfinir de combien les vagues doivent tre rapproches entre elles.

Opacit

Flou Vague

Perspective

Horizontale : permet de dfinir l'angle de fuite pour obtenir un effet de perspective vers la droite (valeurs positives) ou vers la gauche (valeurs ngatives). Verticale : permet de dfinir l'angle de fuite pour obtenir un effet de perspective vers le bas (valeurs positives) ou vers le haut (valeurs ngatives).

Distorsion

Horizontale : permet de positionner le point vers lequel vous voulez dfinir la distorsion le long du plan horizontal, droite (valeurs positives) ou gauche (valeurs ngatives). Verticale : permet de positionner le point vers lequel vous voulez dfinir la distorsion le long du plan vertical, en haut (valeurs positives) ou en bas (valeurs ngatives).

48

tape 2. Cration du plan

49

Cration du plan
Un site Web peut tre dfini comme un ensemble structur de pages. Dfinir correctement cette structure est trs important car elle dtermine comment les pages seront associes entre elles et elle dfinit les chemins de navigation disponibles portant aux informations. Une bonne structure permettra l'utilisateur de ne pas se perdre pendant la navigation, de savoir toujours o il se trouve et de russir atteindre, en quelques passages, les informations qu'il recherche. En revanche, une mauvaise structure provoquera une dsorientation et de la frustration qui, dans le pire des cas, pousseront l'utilisateur abandonner le site. La fentre Cration du plan permet de dfinir la structure du site en insrant toutes les pages ncessaires et en les organisant en niveaux et sous-niveaux. Aprs avoir dessin le Plan comme une structure vide sans contenus, vous pouvez passer la cration de chaque page.

La fentre propose les sections suivantes :

Une reprsentation schmatique du Plan ; Une barre d'outils situe au-dessus de la reprsentation du Plan ; Une srie de commandes pour dessiner le Plan.

Le schma du plan du site

Dans la fentre Cration du plan, la plus grande partie de l'espace est occupe par la reprsentation schmatique du Plan construire Par dfaut, le programme propose une structure com50

pose d'une Page d'accueil et d'un dossier Menu contenant 3 pages. En ajoutant les niveaux et les pages l'aide des commandes appropries, ces lments sont insrs dans le dossier Menu du Plan qui prend forme au fur et mesure. Si, travers les sections de l'tape 4 - Paramtres avancs, le site est complt avec l'introduction d'une Page d'accueil, un Blog, une zone rserve (il suffit qu'une seule page ait t dfinie comme Page protge) ou un Panier e-commerce, le programme ajoute la structure du plan le dossier Pages spciales avec les rubriques correspondantes : Page d'accueil, Blog, Page de connexion et Panier virtuel ecommerce. En plus de la structure arborescente du Plan, le programme montre, pour les pages insres, certaines informations supplmentaires utiles comme le titre complet et la description. Bien videmment, pour que ces informations soient affiches, il faut les dfinir prcdemment dans la fentre Proprits de page. En travaillant directement sur le Plan, vous pouvez excuter certaines oprations :

En cliquant une seconde fois sur un niveau ou une page slectionn, y compris

la Page d'accueil, vous pouvez le/la renommer (ou bien utilisez le bouton Renommer). Mme les alias des pages spciales insrs dans le dossier Menu peuvent tre renomms, tandis que les pages spciales non. description pour modifier les textes insrs (ou bien ouvrez la fentre Proprits de page). pages qu'il contient, ou le fermer (vous pouvez aussi utiliser les boutons Ouvrir et Fermer). De mme, vous pouvez ouvrir et fermer un niveau en cliquant sur la flche prcdant le nom. permettant de construire une page.

Aprs avoir slectionn une page, cliquez directement sur le titre complet ou la Si vous double-cliquez sur un niveau, vous pouvez l'ouvrir et voir toutes les

Si vous double-cliquez sur une page, vous ouvrez la fentre Cration de la page Un double-clic sur une page spciale, ouvre la fentre de l'tape 4 - Paramtres
avancs pour crer ou mettre jour la page.

Si vous slectionnez un niveau et vous le faites glisser dans une nouvelle position, vous dplacez toutes les pages qu'il contient (vous pouvez aussi utiliser les boutons En haut et En bas).

Si vous slectionnez une ou plusieurs pages, vous pouvez les faire glisser et les

dplacer dans une nouvelle position (vous pouvez aussi utiliser les boutons En haut et En bas). Pour effectuer une slection multiple, vous pouvez utiliser les combinaisons CTRL+clic ou SHIFT+clic. savoir entre les pages et les niveaux du menu de navigation, le programme cr

Si vous slectionnez une page spciale et la faites glisser dans le dossier Menu,
51

un niveau qui se comporte comme un alias de la page spciale. Ce niveau porte donc le nom de la page spciale et prvoit un lien vers la page spciale. Vous pouvez ainsi insrer, dans le Menu de navigation, une rubrique active donnant accs la Page d'accueil, au Blog, la page de connexion ou au panier ecommerce.

Si vous slectionnez une ou plusieurs pages, vous pouvez les copier et les coller

dans le mme projet ou un projet diffrent ouvert dans une autre fentre du programme. Les oprations Copier et Coller peuvent tre effectues l'aide des commandes appropries de la Barre d'outils, du menu Popup rappel avec un clic droit de la souris, ou les combinaisons de touches CTRL+C et CTRL+V. Bien videmment, vous ne pouvez pas utiliser les commandes Copier et Coller avec les pages spciales.

La barre d'outils du plan du site

Dans la fentre Cration du plan, immdiatement au-dessus de la reprsentation schmatique du Plan, vous disposez d'une barre d'outils avec les commandes suivantes : Couper [CTRL+X] / Copier [CTRL+C] / Coller [CTRL+V] Elles permettent respectivement de couper, copier et coller les pages slectionnes l'intrieur du mme projet ou dans diffrents projets. Ces commandes sont aussi disponibles dans le menu Popup rappel l'aide d'un clic droit de la souris en pointant le Plan. Page invisible dans le menu Si vous slectionnez cette option, la page ou le niveau slectionn n'est pas affich dans le menu de navigation. Lorsqu'un niveau est invisible, toutes les pages qu'il contient deviennent automatiquement invisibles. Les pages invisibles sur le menu peuvent tre utilises comme pages d'approfondissement et tre rappeles par des liens internes. Il est ncessaire de crer au moins un lien vers les pages invisibles. La Page d'accueil peut aussi disparatre du menu : il est conseill d'utiliser cette possibilit seulement si vous avez l'intention de mettre un lien vers cette page d'autres endroits du site, par exemple dans l'en-tte. Page protge Permet d'ouvrir la fentre Page protge permettant de dfinir une page comme protge en cochant simplement l'option Dfinir cette page comme page protge. 52

Aprs cela, vous devez indiquer quels groupes et/ou utilisateurs peuvent accder cette page protge, en cliquant dans la liste propose. Activer un groupe ou activer tous les utilisateurs appartenant un groupe, ce n'est pas la mme chose : dans le premier cas seulement, si de nouveaux utilisateurs seront ajouts au groupe par la suite, ils pourront automatiquement accder la page protge.

Pour crer de nouveaux Groupes/Utilisateurs, il suffit d'accder la fentre Gestion de l'accs de l'tape 4 - Paramtres avancs Proprits de la page Elle est active quand vous slectionnez une page insre dans le plan et permet de rappeler la fentre Proprits de page permettant de dfinir une srie de proprits pour l'optimisation, la personnalisation graphique et l'ajout ventuels de portions de code. Les options disponibles sont articules en 3 sections. - Section Gnral, Section Graphiques, Section Avances. Proprits du niveau Elle est active quand vous slectionnez un niveau insr dans le plan et permet de rappeler la fentre Proprits du niveau permettant de dfinir les proprits suivantes : - Masquer le menu droulant pour ce niveau : si vous slectionnez cette option, le menu Popup relatif la rubrique n'apparat pas au passage de la souris. - Lien excuter en cliquant sur l'objet : permet de dfinir un lien direct vers la rubrique l'aide de la fentre Lien. - Icne afficher sur le menu : permet de slectionner une image (fichier .JPG, .GIF, .PNG) qui sera affiche sur le Menu de navigation, ct de la rubrique. 53

Il peut tre utile de choisir de "Ne pas afficher le menu Popup pour un niveau" en slectionnant l'option "Lien excuter en cliquant sur l'objet", par exemple, pour insrer un lien un site externe directement comme rubrique de menu, ou pour remplacer un sous-menu contenant un nombre lev de rubriques avec l'ouverture d'une page cre expressment pour accorder l'accs aux diffrentes sections internes. Si, travers les sections de l'tape 4 - Paramtres avancs, le site est complt avec l'introduction d'une Page d'accueil, un Blog, une zone rserve (il suffit qu'une seule page ait t dfinie comme Page protge) ou un Panier ecommerce, le programme ajoute la structure du plan le dossier Pages spciales avec les rubriques correspondantes. Toutes les commandes de la barre d'outils n'ont aucun effet sur les pages spciales.

Fentre Proprits de page

La fentre Proprits de page permettant de dfinir une srie de proprits pour l'optimisation, la personnalisation graphique et l'ajout ventuels de portions de code. Les options disponibles sont articules en 3 sections :

Section Gnral Section Graphiques

Section Avances

Les options de la section Gnral de la fentre Proprits de page permettent de dfinir une srie de paramtres ncessaires pour optimiser correctement la page:

Titre complet : permet de dfinir un

titre diffrent de celui du plan du site. Le nom que vous donnez la page lors de la construction du plan est repris comme rubrique dans le menu de navigation ; l'ventuel titre complet indiqu dans les Proprits de la page est en revanche affich comme titre effectif de la page. Pour la Page d'accueil, le titre n'est pas affich l'intrieur de la page mais vous pouvez indiquer le Titre complet : le titre indiqu est utilis dans le menu, tandis que le titre ou le titre

54

complet (si indiqu) est utilis pour composer le Mta tag <title> dans le code HTML de la page.

Description de page : permet d'insrer une description spcifique pour la

page. La description doit tre courte et prcise : elle est insre comme valeur du Mta tag <description> dans le code HTML de la page et est utilise par les moteurs de recherche pour l'indexation. fiques pour la page. Les mots-cl sont insrs comme valeur du Mta Tag <keywords> dans le code HTML de la page et sont utiliss par les moteurs de recherche pour l'indexation. la page. moins qu'il ne soit spcifi diffremment, comme nom du fichier HTML le programme prend automatiquement le nom donn la page lors de la construction du Plan. Donnez des noms brefs et significatifs aux fichiers pour obtenir des adresses simples et faciles mmoriser, cela sera galement positif pour l'indexation effectue par les moteurs de recherche. Cette option n'est pas disponible pour la Page d'accueil.

Mots-cl pour la recherche : permet d'insrer une srie de mots-cl spci-

Nom du fichier cr : permet de dfinir le nom du fichier HTML correspondant

Les options de la section Graphiques de la fentre Proprits de page permettent d'agir sur certains aspects graphiques importants de la page sur laquelle vous tes en train de travailler :

Icne pour l'lment de Menu : permet de slectionner une image (fichier .JPG, .GIF, .PNG) qui sera affiche sur le Menu de navigation, ct de la rubrique.

Image d'arrire-plan du Site pour la

page : permet de slectionner une image (.JPG, .GIF, .PNG) qui sera affiche comme arrire-plan de la page au lieu de l'image ou de la couleur prvue en fonction du modle dfini (voir Slection du modle). permet de slectionner une image (fichier .JPG, .GIF, .PNG) qui sera affiche comme arrire-plan du contenu de la page. Cette image est superpose la couleur ou l'image prvue en fonction du modle dfini (voir Slection du modle). tenu de la page doit tre rpte ou non. L'image peut tre rpte horizonta55

Arrire-plan du contenu de la page :

Disposition : permet d'indiquer si l'image insre comme arrire-plan du con-

lement, verticalement ou dans les deux sens pour remplir tout l'espace disponible.

Alignement : permet de choisir l'alignement de l'image insre comme arrireplan du contenu de la page.

Crer la page sans le modle : fait en sorte que le modle de style choisi ou

cr comme modle personnalis ne soit pas appliqu la page (voir Slection du modle). Si vous slectionnez cette option, la page est cre en maintenant seulement son contenu sans y appliquer ni le modle de style ni le menu de navigation. slectionn l'option Crer la Page sans le modle, elles permettent respectivement d'indiquer la valeur en pixels de la largeur de la page et la couleur d'arrire-plan appliquer.

Largeur Page / Couleur d'arrire-plan : disponibles seulement si vous avez

Les options de la section Avance de la fentre Proprits de page permettent de travailler sur le Plan du site et d'agir manuellement sur le code HTML cr pour la page sur laquelle vous tes en train de travailler :

Extension du fichier cr : permet de

dfinir l'extension qui accompagnera le fichier relatif la page. Le programme propose par dfaut l'extension .html, mais vous pouvez aussi choisir entre .php, .asp, .cfm et .jsp. Vous pouvez aussi enregistrer, avec une extension diffrente. le fichier index.html relatif la Page d'accueil : cette extension sera ventuellement reprise pour la Page d'accueil. Pour les pages protges seulement, vous ne pouvez pas modifier le format du fichier cr qui reste obligatoirement .php. cette option, active par dfaut, fait en sorte que la page soit comprise dans la cration du Plan du site. mise jour. Ce paramtre est indiqu dans le SiteMap cr.

Ajouter cette page au plan du site :

Frquence de mise jour : permet de dfinir avec quelle frquence la page est Proprits des contenus : permet d'affecter des points la page, pour indiquer son importance par rapport aux autres pages du site. Ce paramtre est indiqu dans le SiteMap cr.

56

Pour plus dinformation sur le Plan du Site, reportez-vous Comment crer et connecter le Plan du site.

Code personnalis : permet d'insrer des portions de code l'intrieur du

code HTML de la page. l'aide du menu appropri, vous pouvez dfinir la position l'intrieur du code de la page o doit tre insr le code personnalis : Avant le tag <HTML>, Avant le tag </HEAD>, A l'intrieur du tag <BODY> ( savoir l'intrieur de l'instruction <BODY>, par exemple : <BODY onload="alert('Hello !')">), Avant le tag </BODY>, Aprs le tag </BODY>. La position tant slectionne, vous disposez d'un champ o vous devez saisir ou coller la portion de code insrer. L'option Code personnalis insrer est utile quand, par exemple, vous voulez relier des feuilles de styles (CSS) particulire, ou vous devez lancer des vnements sur l'onload de la page. Notamment, pour le bon fonctionnement de certains JavaScript, qui peuvent tre insrs travers l'Objet HTML et Widgets appropri, il faut entrer des lignes de code spcifiques dans la section <HEAD> et dans la section <BODY> du fichier HTML de la page.

Crer le plan du site

Avec WebSite X5, le Plan prend la structure arborescente typique : on part de la Page d'accueil et on descend vers les diffrents niveaux contenant les pages insres. La cration du Plan prvoit donc la prsence de la Page d'accueil et d'une srie de pages relies travers le menu : pour cette raison, il faut insrer toutes les pages en organisant, simultanment, les niveaux diffrents du menu. Voici les commandes permettant de dfinir le plan :

Nouveau niveau [CTRL+L] : permet d'insrer un nouveau niveau de menu. Il

n'y a pas de limite au nombre de niveaux et sous-niveaux pouvant tre insrs. tiquement place au niveau slectionn.

Nouvelle page [CTRL+P] : permet de crer une nouvelle page qui sera automa Sparateur : permet d'insrer un sparateur pour organiser visuellement les
rubriques du menu. Le sparateur peut tre un espace ou un titre ; il est particulirement utile pour crer des menu sur plusieurs colonnes (voir Style de menu Popup| Section lments de menu l'tape 4 - Paramtres avancs).

Supprimer [CANC] : permet de supprimer la page ou le niveau slectionn. Renommer [F2] : permet de modifier le nom de la Page d'Accueil, de la page ou
du niveau slectionn. Il est conseill de bien choisir les noms des pages et des 57

niveaux puisqu'ils seront repris dans le menu de navigation comme titres des pages et noms des fichiers HTML associs aux pages, moins qu'il ne soit spcifi diffremment dans la fentre Proprits de la page.

En haut [CTRL+U] / En bas [CTRL+D] : permettent de modifier l'ordre des Ouvrir / Fermer : permettent, respectivement, d'ouvrir ou de fermer le niveau
slectionn pour afficher/fermer les pages qu'il contient.

pages ou des niveaux. Elles dplacent la page ou le niveau slectionn respectivement au-dessus ou au-dessous de la page/niveau prcdent.

Plan du site et SiteMap

En fonction du plan dfini l'tape 2, le programme cre automatiquement une page proposant le plan du site. Les rubriques du plan du site sont des liens actifs vers une page : le plan reprsente donc un outil utile d'orientation et de navigation mis la disposition de l'utilisateur. L'affichage des rubriques du plan peut tre gr l'aide des commandes Tout ouvrir et Tout ferme. Le plan du site peut tre disponible en insrant des liens appropris sur les textes et les images des pages (dans fentre Style des liens, voir l'action Plan du site) ou dans le menu situ au bas de la page o le programme insre automatiquement le lien vers le plan (pour l'activer, slectionnez l'option Afficher pour l'lment Menu de pied de page dans Styles et modles| Section Textes). Pour que les informations concernant la frquence de mise jour et l'importance des pages d'un site soient comprises dans le SiteMap, il faut slectionner les options disponibles dans la fentre Proprits de la page| Avances qui peut tre rappele pendant la Cration du Plan.

58

tape 3. Cration de la page

59

Cration de la page
Aprs avoir articul le Plan du projet, vous pouvez commencer la cration de chaque page insre dans le site. La fentre Cration de la page permet de dfinir la structure de mise en page et d'entrer les contenus. Le chemin et le titre de la page sur laquelle vous tes en train de travailler sont indiqus comme Page courante.

La fentre propose les sections suivantes :

une reprsentation schmatique (ou grille) de la page permettant de dfinir la

mise en page appliquer ;

la liste des types d'Objets pour crer des pages ; une barre doutils ; l'aperu pour afficher l'objet contenu dans la cellule slectionne de la grille de
mise en page.

La grille de mise en page dans la Cration de la page

Pour rendre plus intuitive la mise en page des contenus, WebSite X5 propose une grille qui est compose, par dfaut, de 2 lignes et 2 colonnes : il suffit de faire glisser les objets l'intrieur des cellules de cette grille (un objet par cellule), pour composer la page. Bien videmment, vous pouvez ajouter des lignes et des colonnes pour disposer d'un plus grand nombre de cellules et aussi dfinir manuellement la largeur de chaque colonne. Grce ces possibilits de dessin de la grille et au fait de pouvoir placer un objet dans plusieurs cellules adjacentes, vous pouvez obtenir des mises en page trs raffines. 60

Une prcision importante : l'utilisation de la grille sert seulement simplifier et guider la mise en page des contenus. Exception faite pour quelques cas particuliers spcifiques , reprsents par des combinaisons de mise en page trs complexes, la grille de mise en page n'est pas "traduite" en un tableau au code HTML des pages. Dans tous les cas, la grille de mise en page non sera jamais visible pendant la navigation avec le navigateur. Tel que dit prcdemment, chaque cellule de la grille peut contenir un seul objet mais chaque objet peut tre plac sur plusieurs cellules adjacentes horizontalement ou verticalement, de faon occuper un plus grand espace sur la page. L'aspect des cellules de la grille de mise en page change selon les diffrents tats de la cellule :

si elle contient un objet qui n'a pas encore t

construit, elle montre l'icne correspondant au type d'objet sur un arrire-plan compos de lignes obliques grises ; elle montre l'icne correspondant au type d'objet sur un arrire-plan bleu ciel uniforme ; primtre et les poignes de slection.

si elle contient un objet qui a dj t construit,

si elle contient l'objet slectionn, elle montre le

Automatiquement, toutes les lignes et les colonnes de la grille de mise en page ont la mme largeur et la mme hauteur. Vous pouvez dfinir manuellement la valeur absolue (en pixels) ou relative (en pourcentage) des colonnes en agissant sur les curseurs prsents au bas de la grille de mise en page :

Si vous cliquez et faites glisser un curseur, vous dplacez la ligne qui dlimite la

colonne. Ainsi la colonne prend la largeur spcifie dans la remarque affiche lors du glissement du curseur. Si vous maintenez enfonce la touche CTRL pendant le glissement du curseur, il se dplace d'un pixel la fois : sinon, le dplacement se produit avec un pas gal un dixime de l'espace disponible. lonne dans le menu Popup, et tapez directement la valeur en pixels de la largeur de la colonne.

Avec un clic droit sur la souris, slectionnez l'option Spcifier la largeur de co-

Avec un clic droit de la souris, choisissez l'option Rtablir la mme largeur de colonne dans le menu Popup, pour ramener toutes les colonnes la mme largeur.

61

La Barre doutils
Les commandes de la barre d'outils permettent de dfinir la structure et les paramtres graphiques de la grille de mise en page. Voici les commandes disponibles pour modifier la grille de mise en page : Contenu objet : elle est active quand vous slectionnez un objet dj insr dans une cellule et permet d'accder la fentre de cration de l'objet. La fentre rappele varie selon le type d'objet. Style de cellule : elle est active quand vous slectionnez un objet dj insr dans une cellule et permet de rappeler la fentre Style de cellule pour dfinir l'aspect graphique de la cellule courante. Marges de la cellule : elle est active quand vous slectionnez un objet dj insr dans une cellule et permet de rappeler la fentre Marge de cellule pour dfinir la valeur en pixels de la marge externe et interne de la cellule courante. Vous pouvez aussi slectionner l'option Marges personnalises pour pouvoir dfinir des valeurs diffrentes pour la marge de chaque ct de la cellule : Suprieure, Droite, Infrieure et Gauche. (voir Le Box Model dans WebSite X5) Alignement du contenu de la cellule : elle est active quand vous slectionnez un objet dj insr dans une cellule et permet d'aligner l'objet en Haut/Centre/Bas et Gauche/Centre/Droite par rapport sa cellule. Ajouter une ligne / Supprimer une ligne : permettent, respectivement, d'ajouter une ligne avant la ligne contenant la cellule slectionne et de supprimer la ligne contenant la cellule slectionne. Vos grilles peuvent avoir au maximum 64 lignes. Ajouter une colonne / Supprimer une colonne : permettent, respectivement, d'ajouter une nouvelle colonne avant la colonne contenant la cellule slectionne et de supprimer la colonne contenant la cellule slectionne. Vos grilles peuvent avoir au maximum 12 colonnes. Si vous slectionnez une cellule vide, les nouvelles lignes/colonnes sont insres dans la cellule qui se trouve immdiatement avant celle-ci. En revanche, si vous slectionnez un objet, les nouvelles lignes/colonnes sont insres de faon prcder la premire cellule occupe par l'objet. Enfin, si vous ne slectionnez aucune Cellule/Objet, les nouvelles lignes/colonnes sont insres au bas de la grille.

62

La liste des objets lors de la cration de la page

Pour insrer un objet dans une page, il suffit de slectionner l'icne relative dans la liste des objets disponibles, puis de la glisser-relcher dans la grille de mise en page, au niveau de la cellule voulue.

Chaque cellule de la grille de mise en page peut contenir un seul objet, mais un objet peut occuper plusieurs cellules adjacentes aussi bien horizontalement que verticalement. Vous pouvez en effet faire glisser l'icne de l'objet slectionn sur la bordure des cellules : ainsi l'objet occupera les deux cellules. Par ailleurs, vous pouvez agir sur les points de slection de l'objet insr pour l'tendre sur plusieurs cellules. Quand vous avez dfini le nombre de cellules devant tre occupes par un objet, ce nombre est maintenu, compatiblement avec la prsence d'autres objets, mme si l'objet est dplac dans d'autres points de la grille. Pour plus de facilit, vous pouvez utiliser les touches flches pour travailler sur la grille :

touches flches : elles dplacent la slection d'une cellule l'autre de la grille

de mise en page.

CTRL + touches flches : elles dplacent l'objet slectionn (sans modifier

ses dimensions) parmi les cellules de la grille de mise en page.

SHIFT + touches flches : elles modifient les dimensions de l'objet slectionn en les tendant (compatiblement avec les autres objets prsents) ou en les rduisant sur un nombre diffrent de cellules de la grille de mise en page. Si vous cliquez l'aide du bouton droit de la souris sur l'icne de l'objet insr dans une cellule ou dans une cellule vide de la grille de mise en page, vous affichez un menu Popup comprenant les commandes Couper, Copier, Coller, Supprimer..., Proprits de la cellule, Insrer une ligne, Insrer une colonne, Supprimer une ligne et Supprimer une colonne. Ces commandes permettent de crer une copie d'un objet en le collant dans une autre cellule ou une autre page, ou bien de supprimer un objet. Pour supprimer un objet de la page, faites-le glisser l'extrieur de la grille de mise en page ou appuyez sur la touche SUPPR. De toute faon, quand vous insrez un nouvel objet dans une cellule dj occupe, le premier est automatiquement 63

supprim. Toutefois, si vous faites glisser un objet dj existant dans une cellule dj occupe, les deux objets concerns s'changent la place. Les commandes Copier style et Coller style, prsentes dans le sous-menu rappel l'aide la commande Style de cellule, permettent d'appliquer automatiquement dans une deuxime cellule les prdispositions dfinies dans la fentre Style de cellule pour une cellule. Aprs avoir insr un objet, vous pouvez rappeler la fentre permettant de dfinir son contenu, en double-cliquant sur la cellule de la grille de mise en page qui le contient ou en slectionnant l'objet et en cliquant sur le bouton Contenu objet.

Il n'est pas obligatoire de remplir toutes les cellules de votre grille de mise en page : sachez nanmoins qu'une cellule vide correspond un espace vide sur votre page. Pour mieux comprendre comment exploiter au mieux les possibilits de mise en page, sachez que le fonctionnement du logiciel observe les rgles suivantes:

La largeur de la page est dtermine par le modle. La largeur des colonnes de la grille de mise en page est obtenue en partageant la largeur de la page par le nombre de colonnes insres. Par dfaut, toutes les colonnes ont la mme largeur mais vous pouvez modifier manuellement ce paramtre. page ont la mme hauteur : par dfaut, cette valeur est dtermine par l'objet le plus haut parmi ceux contenus dans ces cellules. la taille des cellules de la grille de mise en page.

Toutes les cellules places sur la mme range que la grille de mise en

Les objets insrs sont automatiquement redimensionns en fonction de Le Box Model dans WebSite X5
Pour mieux comprendre ce que signifie Marge et russir agir avec prcision sur la mise en page des contenus, il faut comprendre le terme Box Model. Quand vous crivez le code d'une page Web, tous les lments HTML sont considrs comme des blocs (ou box) et l'ensemble des rgles qui gre l'aspect visuel des lments du bloc se nomme Box Model. Chaque box comprend un certain nombre de composants de base, chacun modifiable avec les proprits des CSS : marges, bordures, paddings et contenu.

64

L'image suivante illustre les parties du Box Model :

Dans WebSite X5, la grille de mise en page propose identifie une srie de cellules o vous pouvez insrer diffrents contenus : pour chaque cellule, on applique le Box Model illustr. Par consquent, les lments sont :

Contenu (zone verte) : c'est le contenu insr en faisant glisser l'un des objets. Marge intrieure (zone rose) : c'est l'espace entre le contenu actuel et la bordure.

Bordure : c'est la bordure dessine autour du contenu ; l'aspect de cette bordure peut tre dfini l'aide des options de la fentre Style de cellule. dfinissent la Grille de mise en page.

Marge extrieure (zone jaune) : c'est l'espace entre la bordure et les lignes qui
tant donnes ces dfinitions, l'espace entre deux objets cte cte (horizontalement ou verticalement) est gal la somme des marges extrieures dfinies pour les cellules contenant ces objets.

Objet texte
En plus des images, des vidos et des animations pouvant tre utiliss, les contenus principaux d'un site sont vhiculs, dans la plupart des cas, travers les textes. crire pour le rseau ce n'est pas comme crire en pensant l'impression : chaque moyen a ses particularits et Internet se distingue principalement pour son support (le moniteur d'un ordinateur ou l'cran d'un dispositif mobile), son mode de lecture (ressemblant davantage une lecture rapide qu' une lecture squentielle) et la disponibilit d'un nombre relativement illimit de possibilits (si l'on considre le nombre de sites qui s'occupent du mme sujet). Pour capturer l'attention d'un lecteur, le pousser lire et, dans la meilleure des hypothses, le persuader de la qualit de ce que nous lui proposons, les contenus textuels doivent se conformer la publication sur le rseau : ils doivent tout d'abord prsenter des contenus d'intrts d'une manire succincte, mais pas cryptique, et 65

efficace. Il convient de diviser le discours en priodes brves, il sera ainsi plus simple comprendre et visuellement moins compact et lourd. Enfin, pour amliorer la lisibilit des textes, il est important de soigner la typographie, savoir l'agencement des caractres (titres, mises en vidence, corps principal, lgendes et autre). Il est trs important de rflchir sur ces aspects et de soigner la rdaction des textes pour crer un site web qui recevra un jugement positif de la part des visiteurs. Un contenu peu intressant, exprim d'une manire approximative avec des phrases pleines de fautes de grammaire ou d'orthographe, entranerait l'ide d'un site nglig ne mritant pas une seconde visite. Ces brves mais justes considrations sur le thme du Web Writing tant faites, WebSite X5 permet de composer les textes ncessaires travers un diteur interne et de les formater. Bien videmment, vous pouvez reprendre des textes crs avec d'autres programmes et les insrer travers un simple Copier-Coller.

Pratiquement
Si vous double-cliquez sur l'objet Texte dans la Grille de mise en page, vous ouvrez la fentre Objet texte. Cette fentre, qui propose un diteur, permet de taper directement et de formater des textes. L'diteur de texte se prsente comme suit :

Vous disposez des commandes suivantes : Couper [CTRL+X] / Copier [CTRL+C] / Coller [CTRL+V] Permettent, respectivement, de couper, copier et coller le texte slectionn. Dans ce cas, avant de coller le texte, le programme lui enlve toutes les informations ventuellement associes l'origine et lui attribue celle dfinies dans l'diteur. Coller spcial Permet de coller le texte prcdemment coup ou copi l'aide des commandes Couper et Copier. Le texte coll garde toutes les informations d'origine. Grce aux commandes Couper, Copier et Coller, vous pouvez reprendre des textes crs prcdemment, mme avec des diteurs diffrents. 66

Annuler [CTRL+Z] / Restaurer [ALT+MAIUSC+BACKSPACE] Permettent, respectivement, d'annuler et de rtablir la dernire opration excute/annule. Insrer lien [CTRL+L] Permet de dfinir un lien hypertextuel sur le (ou les) mot(s) slectionn(s). Vous pouvez dfinir les configurations du lien dans la fentre Lien. Insrer image Permet d'insrer une image (au format .JPG, .GIF, .PNG, .BMP) l'intrieur du texte. Les images insres dans l'objet Texte sont automatiquement redimensionnes si leur taille dpasse celle de la cellule de la Grille de mise en page. Par ailleurs, vous pouvez redimensionner librement les images insres l'aide des poignets de slection : pour les mises en page particulires, il est toutefois conseill d'utiliser l'Objet Image. Activer code HTML Permet de saisir directement le code HTML l'intrieur de la page de texte. Pratiquement, en mode HTML, les caractres < et > ne sont pas interprts comme "infrieur" et "suprieur", ce qu'ils contiennent correspond un tag HTML. Paramtres RollOver Permet de dfinir le RollOver sur le texte : ainsi le texte n'est plus statique mais il dfile. Pour dfinir les options du RollOver, rappelez la fentre Paramtres RollOver. Adapter la largeur de la cellule Permet de simuler l'aspect que prendra le texte en fonction de la taille de la cellule de mise en page qui l'accueillera. Arrire-plan clair/fonc Permet de dfinir une couleur claire ou fonce pour l'arrire-plan de la fentre de l'diteur de texte : il est ainsi plus simple, par exemple, de composer les textes qui, pour avoir un bon contraste par rapport l'arrire-plan prvu par le modle graphique appliqu, doivent tre blancs. Choix des polices / Taille de police Permettent, respectivement, de choisir le type de police (font) utiliser et de dfinir les dimensions. La liste droulante propose toutes les polices prsentes sur l'ordinateur. Si la police utilise n'est pas installe sur l'ordinateur de l'utilisateur qui navigue sur votre site, elle sera automatiquement remplace par une police semblable. 67

Gras [CTRL+B] / Italique [CTRL+I] / Soulign [CTRL+U] Permettent, respectivement, de mettre le texte slectionn en gras, italique ou soulign. Couleur du texte / Couleur d'arrire-plan du texte Permettent de dfinir, dans la fentre Couleur, la couleur appliquer au texte slectionn ou l'arrire-plan du texte slectionn. Liste puces Permet de crer une liste puces contenant des rubriques. Mettre en retrait / Annuler le retrait Permettent, respectivement, d'augmenter et rduire le retrait du paragraphe slectionn. Alignement gauche / Alignement au centre / Alignement droite / Alignement justifi Permettent, respectivement, d'aligner gauche, au centre, droite ou de justifier le texte slectionn. Disposer le texte droite / Disposition normale / Disposer le texte gauche Activs quand vous slectionnez une image insre dans le texte, ils permettent de faire dfiler le texte le long du ct droit de l'image, d'insrer l'image dans le flux du texte comme un mot quelconque ou de faire dfiler le texte le long du ct gauche de l'image. Si vous cliquez sur le bouton droit de la souris, vous affichez un menu contextuel qui propose de nouveau les commandes : Annuler, Couper, Copier, Coller, Coller spcial, Effacer et Slectionner tout.

Paramtres RollOver
Cette fentre, rappele l'aide du bouton de l'diteur de l'Objet Texte ou de l'Objet Tableau, permet de dfinir les paramtres du RollOver des textes. Tout d'abord, vous devez activer l'effet en slectionnant l'option Activer RollOver. L'effet tant activ, vous pouvez dfinir son aspect l'aide des options du cadre Mode:

Mouvement : permet de dfinir comment le texte dfilera. Vous pouvez choisir

parmi les options suivantes :

68

Aucun - Afficher la barre de dfilement : le texte ne dfile pas mais, comme vous fixez la hauteur de la cellule (voir l'option Hauteur), si celle-ci ne suffit pas pour afficher tout le texte, une barre de dfilement sera automatiquement insre. Dfilement unique : le texte dfile dans le sens indiqu et il s'arrte la fin. Dfilement continu : le texte dfile dans le sens indiqu et, la fin, il repart du dbut sans s'arrter. Dfilement altern : le texte dfile dans le sens indiqu et, la fin, il dfile dans le sens oppos. Dfilement par sections : le texte est virtuellement dcompos en fiches, savoir en blocs de hauteur gale celle dfinie avec l'option Hauteur Le dfilement du texte entrane l'affichage de la premire section, suivi d'une pause avant d'afficher la deuxime section. Il continue ainsi en repartant du dbut aprs avoir affich la dernire section. Pour que l'effet ait un rendement optimal, le texte doit tre crit et format de sorte pouvoir le partager en sections en dfinissant une Hauteur approprie.

Sens : permet de dfinir la direction de dfilement du texte. Le glissement peut

avoir lieu vers le Haut, le Bas, la Gauche ou la Droite. Par ailleurs, dans le cadre Options vous disposez des rubriques suivantes :

Effet : permet de choisir entre les effets Linaire, Altern et Swing pour tous les
types de mouvement, sauf pour le Dfilement continu. texte.

Hauteur : permet de dfinir la valeur pour la hauteur de la cellule contenant le Dure (sec.) : permet de dfinir pendant combien de secondes doit durer l'effet. Si vous avez activ le Dfilement unique, continu ou altern, la dure dfinit l'intervalle de temps o se dveloppe le mouvement, avant de repartir. En revanche, si vous avez activ le Dfilement par sections, la dure dfinit le temps d'affichage d'une section, avant de passer la section suivante. le glissement s'arrte lors du passage de la souris.

Arrter le mouvement au passage de la souris : permet de faire en sorte que

69

L'option Hauteur n'est disponible que si le RollOver dfini est vertical (direction : vers le haut ou le bas). En revanche, si le RollOver dfini est horizontal (direction : vers la gauche ou la droite), l'effet est meilleur si l'objet texte occupe une ligne entire de la Grille de mise en page.

Objet Image
Les images sont l'un des lments les plus utiliss lors de la cration d'une page Web. Entre autres, elles permettent d'illustrer une ide, de montrer un produit, de vhiculer un message ou d'embellir simplement. De toute faon, les images sont importantes car elles concourent dfinir l'aspect d'ensemble du site et faire en sorte qu'il soit beau, soign et professionnel. WebSite X5 permet de dfinir tous les principaux formats graphiques et mette disposition un Editeur graphique interne fonctionnel pour mener bien toutes les oprations de retouche photo les plus courante : coupe, rotation, correction, ajout de masques, filtres et cadres. Par ailleurs, il permet de travailler sur les images pour obtenir des visions panoramiques spectaculaires et des zooms. Il faut souligner que WebSite X5 affronte aussi le problme de la copie non autorise des images prises sur Internet en proposant un systme de protection qui empche de remonter au fichier d'origine et peut prvoir l'application d'une filigrane et l'indication du copyright. Si vous voulez utiliser des images de haute qualit dans vos sites, accdez au panneau de contrle sur my.websitex5.com : vous y trouverez 6.000 images exclusives et royalty free parmi lesquelles vous pourrez choisir les images de votre gr.

Pratiquement
Si vous double-cliquez sur l'objet Image insr l'intrieur de la Grille de mise en page, vous ouvrez la fentre Objet Image. Dans cette fentre, vous pouvez indiquer le fichier importer, dfinir les proprits, dfinir les effets de zoom et panoramique, dcider de l'insrer dans le Plan du site et donc entrer les informations ncessaires. Les commandes ncessaires pour crer un objet sont articules en trois sections :

Section Gnral Section Affichage Section Plan du site

70

Objet Image | Section Gnral

Les commandes de la Section Gnral de la fentre Objet Image permettent de dfinir et d'diter l'objet Image.

WebSite X5 permet de dfinir tous les formats graphiques les plus courants (.JPG,.GIF, .PNG, .PSD, .BMP, .TIF, .DIB, .PCX, .RLE, .TGA, .WMF) en slectionnant simplement la ressource utiliser parmi celles prsentes sur l'ordinateur ou directement enligne sur Internet. L'aperu de l'image importe est affich dans le cadre Aperu. Si vous cliquez sur le bouton Modifier prsent sous l'aperu, vous pouvez rappeler l'Editeur graphique interne pour modifier l'image importe. Pour l'image insre, vous pouvez dfinir une srie de Proprits :

Titre : c'est le titre de l'image ; dans le code HTML des pages, le texte introduit
sera affect l'attribut title du tag <img>.

Texte alternatif c'est le texte qui est prsent la place de l'image quand celleci ne peut pas tre affiche. Dans le code HTML des pages, le texte introduit sera affect l'attribut alt du tag <img>.

Le titre et le texte alternatif sont deux paramtres qu'il faut valuer et composer avec attention car ils sont importants pour l'accessibilit et l'optimisation des sites Web.

Lien : permet de dfinir un lien vers l'image. Si vous cliquez sur le bouton

vous ouvrez la fentre Lien permettant de choisir le type d'action et les options relatives. l'image en .JPG. Toutes les images importes sont automatiquement converties au 71

Qualit : permet d'indiquer le niveau de qualit maintenir pour enregistrer

format .JPG ou, si vous avez dfini la transparence, au format .PNG. Pour l'enregistrement en .JPG, plus le taux de compression est lev, plus la qualit sera basse. Il est conseill d'insrer les fichiers graphiques au format .GIF ou .JPG. Toutes les images insres, dans un format diffrent de .JPG, .GIF et .PNG, sont automatiquement converties au format JPG, selon le niveau de compression indiqu. La conversion au format .JPG ou, pour les images pour lesquelles vous avez dfini la transparence, au format .PNG est effectue mme si l'image a une taille suprieure celle de la cellule de la Grille de mise en page qui la contient et si vous la modifiez travers l' Editeur graphique. Dans tous les autres cas, l'image est copie tel quel. Cela est ncessaire pour maintenir l'effet de transparence appliqu aux images .GIF. Enfin, vous pouvez utiliser les options de Protection pour essayer de contraster la copie non autorise des images :

Protger l'image contre la copie : si vous slectionnez cette option, vous pouvez protger l'image en empchant qu'elle soit facilement copie l'aide de la commande Enregistrer image sous des menus Popup des diffrents Navigateurs. Pratiquement, l'image est incorpore dans un objet Flash : ainsi, elle ne peut pas tre copie et on ne peut pas trouver le nom du fichier en affichant le code HTML de la page.

Ajouter le filigrane numrique et le Copyright : comme autre protection, si

vous slectionnez cette option, l'image est "masque" en y superposant une image de filigrane. En plus du filigrane, il y a une inscription indiquant le Copyright : cette inscription est compose automatiquement en reprenant le nom de l'auteur indiqu dans la fentre Paramtres gnraux| Section Gnrales, tape 1. Voici quelques remarques sur le fonctionnement du systme de protection des images :

Si vous activez le systme de protection, les images sont insres dans un

objet Flash : ainsi Titre et Texte alternatif ne sont pas indiqus dans le code HTML et personne ne pourra les utiliser pour optimiser les pages.

Les images protges ne peuvent pas tre insres dans le Plan du site.

Pour que le systme de protection soit entirement efficace, il ne faut pas insrer les images protges dans le Plan du site : si oui, travers le fichier XML du Plan du site, on peut trouver le nom du fichier de l'image originale et donc le tlcharger. vez agir directement sur les images travers l'diteur graphique en slectionnant une image de filigrane dans la section approprie.

Si vous ne voulez pas activer le systme de protection propos, vous pou72

Objet Image | Section Affichage

Les commandes de la section Affichage de la fentre Objet Image permettent de dfinir certains Mode d'affichage pour obtenir une image panoramique avec des effets zoom et dplacement. Voici les Mode d'affichage disponibles : Redimensionnement automatique de l'image : active par dfaut, cette option redimensionne automatiquement l'image pour l'adapter aux dimensions de la cellule Grille de mise en page qui la contient. Agrandir et dplacer manuellement l'image : si vous slectionnez cette option, vous pouvez agrandir l'image l'aide d'un clic jusqu' atteindre les dimensions prvues par le zoom dfini. L'image tant agrandie, vous pouvez la dplacer pour mettre en premier plan le dtail voulu. Dans ce cas, le dplacement doit tre effectu manuellement, en cliquant sur l'image et en la faisant glisser jusqu' la position voulue. Pour obtenir cet effet, les dimensions de l'image sont d'abord rduites celles de la cellule de la Grille de mise en page puis recalcules en fonction du facteur dfini pour le Zoom initial(si vous choisissez le Dplacement libre comme Mode de dplacement) ou en fonction de la Hauteur tablie (si vous choisissez l'option Photo panoramique horizontale ou Photo panoramique verticale comme Mode de dplacement). Ainsi l'image sera plus grande que la zone d'affichage et vous pourrez vous dplacer l'intrieur de celle-ci. Agrandir et dplacer automatiquement l'image : semblable l'option prcdente, toutefois le dplacement se produit en approchant simplement la souris des bordures de l'image. Aprs avoir slectionn l'option Agrandir et dplacer manuellement l'image ou l'option Agrandir et dplacer automatiquement l'image, vous pouvez agir sur les Paramtres du zoom suivants :

Modalits de dplacement : permet d'indiquer dans quelle direction l'image

peut tre dplace manuellement ou automatiquement. - Dplacement libre : L'image peut tre glisse aussi bien dans le sens horizontal que vertical. Dans ce cas, vous devez spcifier la valeur de Zoom maximum : par exemple, un facteur d'agrandissement dfini 200% double les dimensions d'origine de l'image. - Photo panoramique horizontale : L'image peut tre glisse seulement dans le sens horizontal. Pour bien exploiter cet effet, la base de l'image doit tre beaucoup plus grande que sa hauteur. Dans ce cas, vous devez spcifier la valeur en pixels de la hauteur de l'image dans le champ Hauteur appropri. 73

- Photo panoramique verticale : l'image peut tre glisse seulement dans le sens vertical. prsent, vous devez utiliser des images ayant une hauteur beaucoup plus grande que la base et dfinir dans le champ Hauteur la valeur en pixels que vous voulez maintenir pour la cellule de la Grille de mise en page.

Zoom max. : disponible seulement pour le mode Dplacement libre, elle permet
de dfinir le facteur d'agrandissement appliquer l'image pour qu'elle soit plus grande que la zone d'affichage. En effet, si l'image n'tait pas agrandie, vous ne pourriez pas la faire glisser.

Hauteur : disponible seulement pour le mode de dplacement Photo panoramique horizontale et Photo panoramique verticale, elle permet de dfinir, dans le premier cas, la valeur en pixels de la hauteur de l'image, ou, dans le second cas, la hauteur de la cellule de la Grille de mise en page o l'image est affiche. cir l'image l'aide d'un clic. Quand vous ouvrez la page, l'image apparat dans sa taille d'origine et l'icne situe au bas droite indique la possibilit de faire le zoom. Quand vous cliquez sur l'image, elle s'agrandit en fonction du facteur de zoom dfini. est active, elle permet d'afficher une barre pour rgler et dfinir le zoom. cette option, l'utilisateur pourra rappeler le navigateur. Le navigateur est une petite fentre positionne sur l'image contenant une miniature de l'image. La fonction du navigateur est de montrer l'image complte et de mettre en vidence la portion actuellement visible dans un cadre. Les actions possibles sont : - Cliquer sur le cadre qui met en vidence la portion visible de l'image et le faire glisser l'endroit voulu : cela quivaut dplacer manuellement l'image. - Cliquer l'intrieur du navigateur, en dehors du cadre qui met en vidence la portion visible de l'image, et le faire glisser : cela permet de dplacer le navigateur l'intrieur de la fentre Image. - Cliquer dans le coin en bas droite du navigateur et le faire glisser en oblique : cela permet de redimensionner le navigateur.

Agrandir l'image : active par dfaut, cette option permet d'agrandir et rtr-

Afficher la barre de zoom : disponible seulement si l'option Agrandit l'image Afficher le navigateur : si vous slectionnez

74

 Activer le mouvement continu automatique : fait en sorte que l'image conti-

nue se dplacer automatiquement tout le temps qu'elle est affiche. Cela est utile pour faire comprendre l'utilisateur qu'il peut agrandir l'image. L'utilisateur peut prendre le contrle du mouvement en approchant simplement la souris des bordures de l'image, et il peut faire le zoom en cliquant une fois pour agrandir et une seconde fois pour rtrcir.

Objet Image | Section Plan du site

Les commandes de la section Plan du site de la fentre Objet Image permettent d'insrer dans le Plan du site des informations supplmentaires sur l'image sur laquelle vous tes en train de travailler. Slectionnez tout d'abord l'option Ajouter l'image au Plan du site : ainsi le Plan du site qui est cr automatiquement par WebSite X5 (voir Crer automatiquement le SiteMap dans Paramtres gnraux| Section Avances) est complt par les informations relatives l'image. ce stade, vous devez dfinir les paramtres suivants :

Titre : c'est un paramtre optionnel permettant de donner un titre l'image. Brve description : c'est un paramtre optionnel permettant d'indiquer une
description ou une lgende pour l'image.

Position gographique : c'est un paramtre optionnel permettant d'indiquer Licence URL : c'est un paramtre optionnel permettant d'indiquer l'URL du
fichier contenant la licence d'emploi de l'image.

des informations, comme l'adresse, la ville ou le Pays servant localiser gographiquement l'image.

Dans le Plan du site, vous ne pouvez pas insrer des images sur lesquelles vous avez activ la protection contre le tlchargement et l'utilisation non autorise (voir Protection dans Objet Image | Section Gnral).

Objet Tableau
Les tableaux sont un trs bon outil pour organiser et prsenter des donnes. Trs souvent un tableau permet de rsumer et prsenter d'une manire efficace une quantit de donnes qui exigeraient sinon la rdaction d'un texte descriptif long et prolixe. Par exemple, un tableau avec les tarifs d'un htel, rangs par type de chambre et priode de l'anne, est beaucoup plus facile lire et interprter qu'un texte contenant les mmes informations. Par ailleurs, les tableaux offrent un lment graphique qui embellit la page et brise la monotonie d'un texte long. 75

Bien videmment, il est ncessaire que les tableaux soient bien structurs, ne soient pas trop complexes et aient un bel aspect.

Pratiquement
Si vous double-cliquez sur l'objet Tableau insr dans la Grille de mise en page, vous ouvrez la fentre Objet Tableau. Cette fentre propose un diteur permettant de crer directement le tableau.

Par dfaut, le programme propose un tableau compos de deux lignes et trois colonnes, dimensionn de sorte occuper compltement la largeur de la cellule de la grille de mise en page qui le contient. Bien videmment, vous pouvez ajouter ou supprimer des lignes et des colonnes, dfinir les dimensions, unir et sparer les cellules pour crer des tableaux plus ou moins complexes. Vous disposez des commandes suivantes : Ajouter une ligne / Supprimer une ligne / Ajouter une colonne / Supprimer une colonne Permettent, respectivement, d'ajouter une ligne ou une colonne aprs celle o se trouve le curseur ou de supprimer la ligne ou la colonne o se trouve le curseur. Fusionner les cellules / Sparer les cellules Permettent, respectivement, de fusionner plusieurs cellules adjacentes slectionnes de faon former une seule cellule, ou de sparer la cellule courante en deux cellules adjacentes horizontalement. Style de la bordure de la cellule Permet de dfinir, dans la fentre rappele, le style des bordures de la cellule courante. Vous pouvez dfinir la couleur et l'paisseur des bordures qui dlimitent les lignes et/ou les colonnes du tableau. Alignement en haut / Alignement au milieu / Alignement en bas Permettent, respectivement, d'aligner verticalement en haut, au centre ou en bas le texte slectionn.

76

Un clic droit de la souris rappelle un menu Popup proposant de nouveau les commandes Annuler, Couper, Copier, Coller, Coller spcial, Effacer, mais aussi les commandes :

Hauteur lignes

Permet de dfinir, dans la fentre approprie, la valeur en pixels correspondant la hauteur des lignes slectionnes. Si vous dfinissez la valeur 0, les lignes prennent automatiquement la hauteur minimum ncessaire pour afficher le contenu insr. Permet de dfinir, dans la fentre approprie, la valeur en pixels relative la largeur des colonnes slectionnes. Vous pouvez aussi modifier la taille des lignes, des colonnes ou de chaque cellule en positionnant le curseur sur les bordures et en les faisant glisser jusqu' la taille voulue en maintenant enfonc le bouton gauche de la souris. Si vous slectionnez une cellule et que vous dplacez la bordure gauche et/ou droite, vous modifiez uniquement la taille de la cellule courante. Si un tableau ne contient aucun texte, il est considr comme tant vide et ne sera pas affich.

Largeur colonnes

Objet Animation Flash

WebSite X5 permet d'insrer dans les pages diffrents types d'animations et d'effets pour les rendre plus prenantes et spectaculaires. Vous pouvez importer n'importe quelle animation Flash (format SWF) : de la bannire avec textes et images, aux vidos plus complexes et interactifs, enregistrs sur l'ordinateur local ou dj publis sur Internet. Grce aux fonctions avances disponibles, vous pouvez joindre les ventuels fichiers ncessaires pour reproduire correctement l'animation.

Pratiquement
Si vous double-cliquez sur l'objet Animation Flash insr dans la Grille de mise en page, vous ouvrez la fentre Objet Animation Flash. Cette fentre permet d'indiquer le fichier importer, de dfinir les proprits et de joindre les ventuels fichiers associs.

77

Les commandes disponibles sont articules en deux sections :

Section Gnrales Section Avances Objet Animation Flash | Section Gnrales

Les commandes de la section Gnrales de la fentre Objet Animation Flash permettent de choisir le fichier utiliser pour composer l'objet Animation Flash. L'animation Flash peut tre insre en important soit un fichier prsent sur l'ordinateur soit un fichier dj publi sur Internet. Dans le premier cas, slectionnez l'option Fichier local sur l'ordinateur, cliquez sur le bouton pour parcourir les ressources disponibles et dterminez un fichier au format SWF. Dans le second cas, slectionnez l'option Fichier sur Internet et tapez dans le champ appropri l'adresse laquelle la ressource est dj disponible enligne. Slectionnez l'option Aperu pour afficher l'animation importe dans la fentre approprie. Pour afficher l'aperu de l'animation, vous devez installer le Player de Macromedia Flash. Les Proprits suivantes sont disponibles pour l'animation insre :

Texte alternatif : permet d'insrer le texte qui remplace l'animation Flash

quand celle-ci ne peut pas tre affiche.

Largeur : permet d'indiquer les dimensions en pixels de la largeur de l'animation Flash. L'expression entre parenthses indique la valeur maximum admise pour la largeur de l'objet : cette valeur est dtermine par la Grille de mise en page dfinie. tion Flash.

Hauteur : permet d'indiquer les dimensions en pixels de la hauteur de l'anima Version du lecteur : permet d'indiquer la version du Player Flash requise pour
afficher l'animation insre. Si l'utilisateur ne possde pas la version du Player Flash indique, le programme affiche automatiquement une fentre de demande de mise jour. transparent l'arrire-plan de l'animation.

Arrire-plan transparent : si cette option est active, elle permet de rendre

78

Objet Animation Flash | Section Avances

Les commandes de la section Avance de la fentre Objet Animation Flash permettent d'indiquer, si ncessaire, quels fichiers associs l'animation Flash doivent tre imports pour qu'elle puisse fonctionner correctement. Tous les fichiers associs l'animation Flash indiqus figurent dans un tableau rcapitulatif indiquant leur nom et le chemin relatif sur le serveur. Pour composer la liste des fichiers associs l'animation Flash, vous pouvez utiliser les commandes suivantes :

Ajouter : permet, dans la fentre Tlcharger le fichier associ, d'insrer un

nouveau fichier avec lien.

Modifier : permet de rappeler la fentre Tlcharger le fichier associ pour modifier les prdispositions dfinies pour le fichier slectionn dans le tableau rcapitulatif des fichiers associs. dans le tableau rcapitulatif des fichiers associs.

Supprimer... : permet de supprimer le fichier slectionn parmi ceux prsents

Vous disposez aussi de l'option :

Nom du chemin d'accs pour tlcharger le fichier Flash : permet d'indiquer le chemin du dossier o doit tre publi le fichier SWF relatif l'animation Flash.

Objet Vido/Audio
WebSite X5 permet de crer des sites entretenant plaisamment les utilisateurs, par exemple avec des vidos et des morceaux de musique. Actuellement les vidos ont atteint un niveau de diffusion qui tait impensable il y a quelques annes : faire un vido, le mettre sur l'ordinateur, l'diter et le mettre sur le web est aujourd'hui un processus la porte de tous. Avec WebSite X5, vous pouvez importer trs simplement n'importe quel type de vido, l'insrer dans votre site et ainsi le partager. WebSite X5 accepte tous les principaux formats et utilise un lecteur interne pour reproduire le fichier FLV et MP4. Permet de dfinir des fichiers locaux et des fichiers dj publis enligne, y compris ceux de portails comme YouTube et Vimeo.

Pratiquement
Si vous double-cliquez sur l'objet Vido/Audio insr l'intrieur de la Grille de mise en page, vous ouvrez la fentre objet Vido/Audio. Dans cette fentre vous pouvez indiquer le fichier importer, dfinir les proprits, dcider de l'inclure 79

dans le Plan du site et, dans ce cas, insrer les informations ncessaires. Les commandes ncessaires pour crer un objet Vido/Audio sont articules en deux sections :

Section Gnral Section Plan du site Objet Vido/Audio| Section Gnral

Les commandes de la section Gnral de la fentre Objet Vido/Audio permettent de choisir le fichier utiliser pour crer l'objet Vido/Audio ainsi que certains paramtres relatifs au mode de reproduction. Selon la ressource importer, vous pouvez insrer l'objet Vido/Audio de diffrentes faons :

Fichier local sur l'ordinateur : quand cette option est active, il suffit de cliquer sur le bouton pour parcourir les ressources disponibles et dterminer le fichier au format .MP4, .FLV, .AVI, .WMV, .MPG, .MOV, .MP3, .WMA, .WAV, .MID, .AIF, .M4A importer.

Fichier sur Internet quand cette option est active, il faut taper dans le champ URL YouTube Video/Vimeo : quand cette option est active, il faut taper dans
le champ appropri l'adresse URL de la page de portails comme YouTube ou Vimeo contenant les Vidos/Audios importer.

appropri l'adresse URL laquelle le fichier du vido ou de l'audio est dj disponible enligne.

Quand vous insrez de cette faon un vido publi sur YouTube, les dimensions d'origine sont modifies en fonction des paramtres de WebSite X5. Pour mieux contrler les dimensions, il est conseill d'importer le vido YouTube travers l'Objet HTML et Widgets et non pas travers l'objet Vido/Audio. Pour afficher l'aperu de l'objet Vido/Audio, slectionnez l'option Aperu dans la fentre approprie : Lecteur WebSite X5 Media Player Microsoft Windows Media Player QuickTime Player 80 Fichier Vido .MP4 e .FLV .AVI, .WMV e .MPG .MOV e .AIF Fichier audio .MP3 .WAV e .WMA .M4A

Quel que soit le lecteur utilis pour l'affichage/reproduction du fichier import, vous pouvez dfinir les Proprits suivantes :

Texte alternatif permet d'insrer le texte qui remplace le vido ou l'audio ne

pouvant pas tre affich.

Largeur : permet d'indiquer les dimensions en pixels de la largeur du vido ou

de la barre de commande du son. L'expression entre parenthses indique la valeur maximum admise pour la largeur de l'objet : cette valeur est dtermine par la Grille de mise en page dfinie. de la barre de commande du son. L'expression entre parenthses indique que la valeur maximum admise pour la hauteur de la barre de commande du son est de 35 pixels. La valeur minimum est 15 pixels. tenant toutes les commandes ncessaires pour grer des vidos et des audios. reproduction du vido ou de l'audio.

Hauteur : permet d'indiquer les dimensions en pixels de la hauteur du vido ou

Afficher la barre des commandes : permet d'afficher une barre d'outils con Lecture automatique : permet de prdisposer le lancement automatique de la
Pour l'affichage/reproduction du fichier import, seulement si vous utilisez WebSite X5 Media Player, vous disposez galement des Proprits suivantes :

Activer l'affichage plein cran : si vous slectionnez cette option, la barre de

commande contient une option permettant de mettre en plein cran la fentre affichant le vido.

Objet Texte : si vous slectionnez cette option, la barre de commande n'est affi-

che que lors du passage de la souris sur la fentre de reproduction du Vido/Audio. leur, la couleur de la barre de commande.

Couleur de la barre de commande : permet d'indiquer, dans la fentre CouObjet Vido/Audio | Section Plan du site
Les commandes de la section Plan du site de la fentre Objet Vido/Audio permettent d'insrer dans le Plan du site les informations supplmentaires sur le vido sur lequel vous tes en train de travailler. Slectionnez tout d'abord l'option Ajouter le vido la carte du site : ainsi le Plan du site qui est cr automatiquement par WebSite X5 (voir Crer automatiquement le SiteMap dans Paramtres gnraux| Section Avances) est complt par les informations relatives au vido. ce stade, vous devez dfinir les paramtres suivants :

Titre c'est un paramtre obligatoire demandant d'indiquer un titre pour le vi81

do. La limite impose par Google pour la longueur des titres est de 100 caractres.

Brve description : c'est un paramtre obligatoire demandant d'indiquer un

bref texte descriptif pour le vido. La limite impose par Google pour la longueur des descriptions est de 2048 caractres : les descriptions plus longues sont coupes. laquelle le vido pourrait appartenir en raison de son contenu. Google spcifie que chaque vido peut appartenir une seule catgorie et fixe la longueur du nom de la catgorie 256 caractres. quer une liste de tags, savoir de brves descriptions des concepts cl associs au vido. Google spcifie que chaque vido peut avoir au maximum de 32 tags.

Catgorie : c'est un paramtre optionnel permettant d'indiquer une catgorie

Mots-cl pour la recherche : c'est un paramtre optionnel permettant d'indi Aperu de l'image pour le vido : c'est un paramtre obligatoire demandant

d'indiquer une image d'aperu associer au vido. Google conseille d'utiliser pour ces miniatures une dimension minimum de 120x90 pixels et de les enregistrer au format .JPG, .PNG ou .GIF. cation du vido.

Publi le : c'est un paramtre optionnel permettant d'indiquer la date de publi Dure : c'est un paramtre optionnel permettant d'indiquer la dure en secondes du vido. Google recommande fortement d'insrer cette information et il prcise que la valeur insre doit tre comprise entre 0 et 28800 (quivalant 8 heures).

Contenu adapt tous : c'est un paramtre optionnel permettant d'indiquer si

le contenu du vido convient un public mineur. Google avertit que si un vido n'est pas dfini comme appropri aux mineurs, il sera disponible seulement pour les utilisateurs dont le filtre SafeSearch est dsactiv. Nous vous rappelons que la fonction SafeSearch de Google filtre les sites aux contenus sexuels ou pornographiques explicites et les supprime des rsultats de la recherche.

Objet de la galerie
La diffusion incroyable de camras photos numriques et de services enligne facilite de faon extraordinaire la publication et le partage de collections photographiques travers le Web. Ainsi, vous pouvez publiciser les photos de famille pour les montrer vos parents et amis lointains ou bien crer des albums et des catalogues pour vos loisirs ou votre travail. 82

WebSite X5 permet d'insrer des galeries magnifiques pour voir vos photos et vos vidos. Les galeries disponibles sont faites avec Flash ou JavaScript et elles utilisent diffrents effets et mthodes de navigation/affichage : elles peuvent, par exemple, prsenter une barre de commande, une squence ou une grille de miniatures. En gnral, les Galeries en JavaScript se distinguent des Galeries en Flash pour la technologie utilise, l'utilisation de la fentre ShowBox et l'affichage des images agrandies. Dans ces cas, l'utilisateur clique sur l'une des miniatures disponibles et l'image ou le vido correspondant s'ouvre dans une fentre superpose la page principale. ce stade, s'il pointe l'image rappele, il affiche les boutons permettant de passer directement l'image prcdente/suivante sans revenir aux miniatures.

Vous pouvez entirement personnaliser l'aspect de la fentre ShowBox : l'aide des options prsentes dans la section Styles et modles| Section Bote d'affichage de l'tape 4 - Paramtres avancs vous pouvez, par exemple, dfinir les couleurs, l'ombre, l'opacit et les effets d'ouverture.

Pratiquement
Si vous double-cliquez sur l'objet Galerie insr dans la Grille de mise en page, vous ouvrez la fentre Objet de la galerie. Cette fentre permet de choisir le type de Galerie en Flash ou JavaScript raliser, de crer la liste des images/vidos utiliser, de dfinir les prdispositions ncessaires pour la personnaliser et, si ncessaire, de travailler sur l'aspect graphique des miniatures. Les commandes ncessaires pour crer une Galerie sont articules en trois sections :

Section Style Section List

Section Miniatures

83

Les Galeries en JavaScript peuvent tre lances mme travers un lien appropri insr dans les pages : pour plus d'informations, reportez-vous Lien.

Objet de la galerie | Section Style

Les commandes de la section Style de la fentre Objet de la galerie permettent de choisir le type de Galerie raliser et de dfinir des paramtres gnraux. Tel que dit prcdemment, WebSite X5 permet de choisir 2 types de Galerie : les Galeries en Flash et les Galeries en JavaScript. Les Galeries en Flash disponibles sont :

Diaporama classique - C'est une galerie o les images

et les vidos sont prsents en squence, l'un aprs l'autre : si vous slectionnez cette option, le mode d'affichage des images dpend du type d'effet d'entre. Le passage d'une image l'autre peut tre gr l'aide des commandes de la barre de commande. Dans la barre de commande, vous pouvez prvoir l'affichage de petites miniatures pour permettre l'utilisateur d'ouvrir immdiatement les images ou les vidos. miniatures, positionnes horizontalement au-dessus ou au-dessous de l'image en premier plan. Il suffit de pointer les miniatures pour les faire dfiler vers la droite/gauche : si vous cliquez sur une miniature, l'image ou le vido correspondant s'affiche en premier plan. Les images agrandies sont affiches en fonction de l'effet d'entre ventuellement dfini. cdente toutefois elle prsente les miniatures affiches verticalement droite ou gauche par rapport l'image en premier plan.

Galerie horizontale - Cette Galerie propose une srie de

Galerie verticale - Cette Galerie est semblable la pr-

Voici les galeries en JavaScript disponibles :

Miniatures - Cette Galerie prsente une grille contenant

toutes le miniatures : si vous cliquez sur une miniature, l'image ou le vido correspondant s'ouvre en premier plan dans la Bote d'affichage (ShowBox).

84

 Miniatures par cadre - Cette Galerie est semblable la

prcdente mais, si vous devez entrer de nombreuses images, elle permet de les partager en fiches en dfinissant le nombre maximum de ranges de miniatures afficher : l'utilisateur pourra passer d'une fiche l'autre, l'aide des boutons appropris, en restant toujours sur la mme page du site. seule bande horizontale de miniatures. Si vous cliquez sur une miniature, l'image ou le vido apparat dans la Bote d'affichage.

Miniatures horizontales - Cette Galerie montre une

Miniatures verticales - Cette Galerie, semblable la prcdente, prsente toutefois les miniatures verticalement.

Selon le type de galerie slectionn, vous disposez de diffrents Paramtres. Pour les Galeries en Flash, les Paramtres disponibles sont :

Largeur : Permet de dfinir la dimension maximum en pixels de la largeur que Hauteur : Permet de dfinir la dimension maximum en pixels de la hauteur que

les images peuvent prendre. Disponible pour : Diaporama classique, Galerie horizontale, Galerie verticale. les images peuvent prendre. Disponible pour : Diaporama classique, Galerie horizontale, Galerie verticale. option fait en sorte que la barre de commande, affiche au passage de la souris, contienne en plus des boutons, les miniatures de toutes les images. Ainsi l'utilisateur n'est pas obliger de consulter les images dans l'ordre, il peut afficher immdiatement les images ou les vidos qui l'intressent. Disponible pour : Diaporama classique. de l'image principale. Disponible pour : Galerie horizontale, Galerie verticale.

Afficher Miniature dans la barre de commande : Active par dfaut, cette

Miniatures visibles : Permet de dfinir le nombre de miniatures afficher ct Position Miniatures : Permet de dfinir o doivent tre affiches les miniatures par rapport l'image principale. Disponible pour : Galerie horizontale, Galerie verticale.

Pour les Galeries en Flash, vous pouvez utiliser les Proprits suivantes :

Afficher la barre de commande : active par dfaut, elle permet de dfinir

85

l'affichage, au passage de la souris, d'une barre de commande pour grer la navigation entre les images et les vidos de la Galerie. Comme base, la barre de commande prsente les boutons dente et Image suivante. Dmarrer prsentation, Image prc-

Lecture automatique : permet de lancer automatiquement la reproduction

d'images et de vidos ds que la Galerie est affiche. de l'ordre d'entre mais d'une squence fortuite. leur, la couleur de la barre de commande. de l'arrire-plan de la galerie.

Affichage alatoire : les images et les vidos ne sont pas proposs en fonction Couleur de la barre de commande : permet d'indiquer, dans la fentre Cou Couleur d'arrire-plan permet d'indiquer, dans la fentre Couleur, la couleur Taille de police : permet de dfinir la taille du texte prsent en premier plan
comme lgende de l'image ou du vido.

Bande sonore : permet de dfinir un fichier musical (format .MP3) reproduire comme bande sonore pendant l'affichage de la galerie. Pour les galeries en JavaScript les Paramtres disponibles sont :

Miniatures visibles permet de dfinir combien de miniatures il faut effectivement afficher.

Lignes par page : disponible seulement pour la Galerie Miniatures par cadre,
elle permet de dfinir le nombre de lignes de la matrice o les miniatures sont organises.

Afficher l'image agrandie sur clic dans une bote d'affichage : active par
dfaut, cette option permet de dfinir sur la miniature le lien qui mne l'affichage de l'image ou du vido correspondant l'intrieur de la Bote d'affichage. sur clic dans une bote d'affichage est slectionne, elles permettent de dfinir la valeur maximum de la largeur et de la hauteur de la Bote d'affichage.

Largeur / Hauteur : disponibles seulement si l'option Afficher l'image agrandie

Objet de la galerie | Section Liste

Les commandes de la section Liste de la fentre Objet de la galerie permettent de composer la liste des images et des vidos insrer dans la Galerie. Tous les fichiers dj imports sont affichs dans la Liste des fichiers : si vous slectionnez un fichier dans la liste, vous pouvez voir son aperu dans la fentre approprie. 86

Pour chaque image et vido insr, la Liste des fichiers indique le chemin du fichier, l'effet d'entre ventuellement associ, une coche signalant l'association d'un lien et d'une description.

Voici les commandes disponibles pour composer l'objet de la Galerie :

Ajouter / Supprimer... : permettent, respectivement, d'ajouter de nouveaux

fichiers ou de supprimer les fichiers slectionns parmi ceux dj insrs. Vous pouvez importer des fichiers graphiques au format : .JPG, .GIF, .PNG, .PSD, .BMP, .TIF, .DIB, .PCX, .RLE, .TGA, .WMF. Par ailleurs, vous pouvez importer des fichiers vidos au format : .FLV et .MP4. Si vous cliquez sur le triangle du bouton Ajouter, vous affichez un sous-menu offrant les options suivantes : Ajouter Image, Ajouter Vido et Ajouter Vido YouTube/Vimeo.

La fentre rappele l'aide de la commande Ajouter Vido YouTube/Vimeo permet d'indiquer l'adresse URL du vido dj publi sur des portails comme YouTube ou Vimeo que vous voulez insrer.

En haut / En bas : permettent de dplacer le fichier slectionn avant/aprs le

fichier prcdent/suivant dans la Liste des fichiers. l'image slectionne dans la Liste des fichiers.

Modifier : permet de rappeler l'Editeur graphique interne pour modifier

87

En fonction du type de Galerie choisie (voir objet Galerie | Section Style) pour chaque image/vido insr, vous pouvez dfinir certaines Options :

Effet : si vous cliquez sur le bouton

vous ouvrez la fentre Proprits de l'effet permettant de dfinir l'effet d'entre, le mouvement et le zoom pour les images et les vidos de la Galerie slectionns parmi ceux prsents dans la Liste des fichiers. Les effets dfinis sont reproduits seulement dans les Galeries en Flash. Dans les Galeries en JavaScript, l'effet Fondu est prvu sur toutes les images et les vidos insrs. vous ouvrez la fentre Lien permettant de dfinir le lien associer l'image slectionne parmi celles prsentes dans la Liste des fichiers. Pour les Galeries en JavaScript, le lien ainsi dfini remplace celui avec l'image agrandie mme si vous slectionnez l'option Afficher l'image agrandie sur clic dans une bote d'affichage. Pour les Galeries en Flash, le lien peut aussi tre dfini sur les vidos. slectionn dans la Liste des fichiers. Le texte de description figure au bas de la fentre montrant l'image ou le vido agrandi.

Lien : si vous cliquez sur le bouton

Description permet d'insrer un texte de description pour l'image ou le vido

Objet de la galerie | Section Miniatures

Les commandes de la section Miniature de la fentre Objet de la galerie permettent de dfinir les prdispositions relatives l'aspect graphique des miniatures des Galeries qui les prvoient. La miniature, cre automatiquement par le programme, est une version rtrcie de l'image ou du vido insr dans la Galerie. Pour qu'elles soient plus belles, les miniatures sont prsentes dans un cadre comme les diapositives, les photogrammes d'une pellicule, les post-it, etc. Pour dfinir l'aspect des miniatures, vous pouvez utiliser :

Image prdfinie : permet de choisir le cadre appliquer aux miniatures en le

slectionnant parmi ceux proposs.

Image personnalise : permet de rappeler le fichier graphique (au format .JPG,

.GIF, .PNG, .BMP, .PSD, .TIF, .DIB, .PCX, .RLE, .TGA, .WPG) correspondant au cadre utiliser. Pour crer un nouveau cadre, il suffit de prparer l'image et de l'enregistrer dans un fichier spcifique : il est prfrable que l'image du cadre soit carre et s'il faut maintenir une transparence externe, enregistrez-la sous le format .PNG.

88

Pour les miniatures, vous disposez galement des Options suivantes :

Marge extrieure l'image (%) : permet de dfinir la marge qu'il faut maintenir entre l'image de la miniature et le cadre qui l'entoure.

Activer variante de couleur : si vous slectionnez cette option, vous pouvez

dfinir dans la fentre Couleur, la couleur vers laquelle tendra le cadre des miniatures. Vous appliquez donc un effet "Coloris" au cadre de sorte qu'il tende vers la couleur voulue. L'effet variante de couleur ne peut pas tre utilis sur des cadres noirs ou blancs : si tel est le cas, l'option "Coloris" n'entrane aucune variation de couleur.

Objet Formulaire d'envoi d'email

Lorsque on navigue sur Internet, on rencontre souvent des pages contenant des formulaires remplir pour envoyer les donnes collectes via email. Ces formulaires sont utiliss comme de simples formulaires de contact, pour demander l'inscription des services particuliers ou l'accs des zones rserves travers un mot de passe ou bien pour effectuer des sondages et des recherches. Quelque soit le but, WebSite X5 permet de crer trs facilement un formulaire d'envoi email, d'indiquer les champs ncessaires, d'agir sur la mise en page et l'aspect graphique et, surtout, d'tablir comment doivent avoir lieu l'envoi et la collecte des donnes.

Pratiquement
Si vous double-cliquez sur l'objet Formulaire d'envoi d'email dans la Grille de mise en page, vous ouvrez la fentre homonyme. Celle-ci permet de dfinir les champs du formulaire, le mode d'envoi et de collecte des donnes, l'aspect graphique du formulaire. Les diffrentes options sont regroupes dans des sections appropries :

Section Liste Section Envoi

Section Style

Quand vous testez le fonctionnement du site sur votre ordinateur, un message vous avertit que l'e-mail contenant les donnes collectes travers le formulaire ne sera pas envoy. Le formulaire email fonctionne entirement aprs la publication du site sur le serveur. 89

Pour que le formulaire d'envoi email fonctionne correctement, le serveur sur lequel le site sera publi doit supporter le langage de programmation PHP et la commande MAIL doit tre active. La section WebSite Test du Panneau de contrle enligne donne des informations de diagnostic sur le serveur. Si des problmes se vrifient durant l'envoi des emails, il se peut que le serveur utilis ne soit pas configur en mode standard. Dans ces cas, essayez de modifier les prdispositions relatives au script et la mthode utilise pour l'envoi de l'email l'aide de l'option approprie prsente dans la fentre Prfrences. Pour plus d'informations ce sujet, veuillez contacter votre fournisseur d'accs au Web.

Objet Formulaire d'envoi d'email | Section Liste

Les commandes de la section Liste de la fentre Objet du formulaire email permettent de dfinir la liste des champs composant le formulaire email. Tous les champs crs sont affichs dans un tableau rcapitulatif qui indique, pour chacun d'entre eux : Nom de champ, Type de champ, Largeur, si la rponse a t dfinie comme Obligatoire ou pas et Description. Tous ces paramtres peuvent tre dfinis pendant la phase de cration du champ, dans la fentre Insertion de champ.

Le tableau, qui rsume les donnes principales de tous les champs insrs, est un outil utile permettant d'excuter diffrentes oprations :

Si vous double-cliquez sur un champ, vous ouvrez la fentre Insertion de champ

permettant de modifier ce champ ;

Si vous cliquez deux fois sur un champ dj slectionn, vous pouvez modifier Aprs avoir slectionn un champ, vous pouvez utiliser les boutons disponibles

son nom : ce qui quivaut ouvrir la fentre Insertion de champ et modifier le texte insr comme Etiquette ; sur le ct pour crer une copie, le supprimer, le dplacer en haut ou en bas et modifier les paramtres.

90

Par ailleurs, le tableau vous permet de contrler l'emplacement des champs dans le formulaire. Tout d'abord, les tirets indiquent les lignes o se trouvera le formulaire. Par ailleurs, si un champ est plac en regard du champ prcdent, prs de sa largeur, vous verrez l'icne . Enfin, si la largeur des champs placs cte cte sur la mme ligne dpassent 100% de l'espace disponible, l'icne du point d'exclamation signale l'erreur : si vous ne modifiez pas leur largeur, les champs seront placs sur des lignes diffrentes. En regard du tableau se trouvent les commandes permettant de crer la liste des champs composant le formulaire :

Ajouter : permet de rappeler la fentre Insertion de champ pour entrer un nouveau champ dans le formulaire. rant dans le formulaire. dans le formulaire.

Dupliquer : permet de crer une copie du champ slectionn parmi ceux figu Supprimer... : permet de supprimer le champ slectionn parmi ceux figurant En haut / En bas : permettent, respectivement, de dplacer le champ slectionn avant ou aprs le champ prcdent ou suivant parmi ceux dj insrs dans le formulaire. paramtrages du champ slectionn parmi ceux dj insrs dans le formulaire.

Modifier : permet de rappeler la fentre Insertion de champ pour modifier les

Les boutons Envoi pour envoyer le formulaire rempli et Rinitialiser pour effacer ventuellement les rponses donnes sont crs automatiquement par le programme et positionns la fin du formulaire.

Fentre Insertion de champ

La fentre Insertion de champ rappele l'aide des commandes Ajouter et Modifier permet de dfinir effectivement les champs. Cette fentre possde deux sections :

Section Type de champ Section Options

Les options de la section Type de champ de la fentre Insertion de champ permettent de crer la liste de champs composant le formulaire email. Vous disposez des types de champ suivants : Champ Texte : champ de texte dispos sur une seule ligne qui est affich comme une case vide o l'utilisateur peut entrer librement la rponse la plus approprie. 91

Courriel : champ de texte spcifique pour demander l'utilisateur de fournir une adresse courriel. Dans ces cas, le programme dfini automatiquement un filtre pour contrler l'exactitude de la donne saisie : par exemple, pour qu'une adresse soit valide, elle doit contenir le caractre "@" et un point dans le texte qui suit. Zone de texte : champ de texte dispos sur plusieurs lignes permettant l'utilisateur d'entrer un commentaire ou une question. Date : champ de texte o l'utilisateur doit entrer une date. La date requise peut tre tape ou dfinie l'aide du calendrier. Liste droulante : les possibilits sont groupes dans une liste o l'utilisateur pourra choisir une seule rponse. Liste : il s'agit d'une liste de rponses parmi lesquelles l'utilisateur peut en choisir une seule. Choix multiple : les rponses sont prsentes dans une liste puces permettant l'utilisateur de slectionner plusieurs rubriques. Choix unique : l'utilisateur peut slectionner un seul choix dans la liste. Mot de passe : champ de texte o les caractres entrs sont automatiquement masqus, savoir affichs comme des "pois" ou des astrisques (selon le systme d'exploitation utilis). Permet aux utilisateurs d'indiquer le mot de passe d'inscription pour accder un service. Fichier annex : champ de texte o l'utilisateur, en cliquant sur le bouton permettant de parcourir les ressources disponibles, peut spcifier le fichier envoyer comme annexe. Pour le bon fonctionnement des fichier annexs, contactez votre fournisseur d'accs et vrifiez que le service est actif. Question de contrle : champ de texte o l'utilisateur doit entrer la rponse une question pose dans le but de distinguer les utilisateurs rels des programmes qui exploitent les formulaires de contact publis enligne pour envoyer des courriels non dsirs. Conditions d'acceptation : champ de texte o sont indiques les conditions que l'utilisateur doit accepter pour envoyer les donnes. Dans ce champ, vous pouvez par exemple entrer la norme de rfrence sur la confidentialit du traitement des donnes collectes. Selon le champ slectionn, le programme propose diffrentes options. Les options communes tous le champs sont : 92

 tiquette : permet d'insrer la description du champ. Ce texte qui sera affich

au-dessus, en regard ou l'intrieur du champ, permet de spcifier l'information requise ou d'entrer le texte de la question poser. allant de 5% 100 % de l'espace disponible.

Largeur : permet de dfinir la largeur du champ qui peut prendre une valeur Afficher sur la mme ligne que le champ prcdent : si vous slectionnez
cette option, le champ n'est pas positionn sur une nouvelle ligne mais ct du champ prcdent. Pour mettre deux champs cte cte sur la mme ligne, la somme de leur largeur ne doit pas dpasser 100 % de l'espace disponible.

Etablir comme champ obligatoire : si vous slectionnez cette option, la rponse de l'utilisateur est obligatoire. L'option n'est pas disponible pour les champ Choix multiple mais elle est active par dfaut pour les champs Question de contrle.

En plus des options communes, pour chaque type de champ, vous disposez des options spcifiques suivantes : Champ Texte :

Max caractres : permet d'indiquer le nombre maxi-

mum de caractres entrer dans le champ. Par exemple, vous pouvez fixer 15 le nombre maximum de caractres pour un champ de texte destin accueillir le code fiscal de l'utilisateur. tude des donnes saisies par l'utilisateur dans le champ. Vous pouvez choisir parmi les filtres suivants : - Aucun : dans ce cas, les caractres et les chiffres sont accepts. - Numrique : seuls les chiffres pourront tre saisis. - Numro de tlphone/fax : accepte la saisie des chiffres, du caractre "-" et de l'espace. - Date : accepte la saisie des chiffres, et du caractre "/".

Filtre de saisie du texte : permet de contrler l'exacti-

Courriel :

Demander une confirmation d'Adresse email : si vous

slectionnez cette option, un champ est automatiquement ajout pour que l'utilisateur saisisse une seconde fois son adresse email. L'exactitude de l'adresse entre sera automatiquement contrle dans les deux champs et, si ncessaire, un message d'alerte apparatra. 93

Zone de texte :

Max caractres : permet d'indiquer le nombre maximum de caractres entrer dans le champ.

Nombre de lignes : permet de dfinir la hauteur du

champ en spcifiant le nombre de lignes utilisables (30 au maximum). en indiquant les formules nationales et internationales habituelles.

Date :

Format de date : permet de choisir le format de la date Afficher l'icne "Calendrier" : active par dfaut, elle

permet d'afficher ct du champ Date l'icne "Calendrier". Si vous cliquez sur cette icne, vous affichez un calendrier permettant de dfinir la date requise sans la taper manuellement. champ en indiquant le nombre de lignes affiches (30 au maximum). colonnes accueillant les rponses.

Liste :

Nombre de lignes : permet de dfinir la hauteur du

Choix Multiple/ Unique Mot de passe :

Nombre de colonnes : permet de dfinir le nombre de Demande de confirmation de mot de passe : si vous

slectionnez cette option, un champ est automatiquement ajout pour que l'utilisateur saisisse une seconde fois son mot de passe. L'exactitude du mot de passe saisi sera automatiquement contrle dans les deux champs et, si ncessaire, un message d'alerte apparatra. recte qui sera confronte celle donne par l'utilisateur.

Question de contrle : Conditions d'acceptation :

Rponse correcte : permet de dfinir la rponse cor Texte de la condition : permet d'insrer le texte des

conditions que l'utilisateur doit accepter avant d'envoyer les donnes.

Enfin, pour les champs Liste droulante, Liste, Choix multiple et Choix unique vous pouvez crer la liste des rponses possibles l'aide des commandes suivantes :

Ajouter / Supprimer... : permettent, respectivement, d'ajouter une nouvelle

rponse ou de supprimer la rponse slectionne. Il suffit de cliquer une seconde fois sur une rubrique slectionne pour la modifier.

94

 En haut / En bas : permettent, respectivement, d'agir sur la commande d'affi Modifier : permet de modifier la rponse slectionne.
Les options de la section Options de la fentre Insertion de champ permettent de grer certaines proprits avances des champs d'un formulaire d'envoi d'email. Dans le dtail, les options disponibles sont :

chage des rponses possibles, en dplaant vers le haut ou le bas celle slectionne.

Description de champ : permet d'insrer un message expliquant le type d'in-

formation que l'utilisateur doit taper dans le champ. si ce texte a t dfini, il y aura en regard du champ une icne (personnalisable) indiquant la disponibilit d'autres informations : quand vous passez la souris sur cette icne, vous affichez une info-bulle contenant les informations disponibles. du champ lors de la cration du code HTML relatif au formulaire. Cette option est utile quand, par exemple comme mthode d'Envoi des donnes (voir : Objet Formulaire d'envoi d'email| Section Envoi), vous dfinissez Envoyer les donnes un fichier de script. du champ lors de la cration du code HTML relatif au formulaire. Cette option est utile quand, par exemple comme mthode d'Envoi des donnes (voir : Objet Formulaire d'envoi d'email| Section Envoi), vous dfinissez Envoyer les donnes un fichier de script.

Attribut <name> : permet d'indiquer la valeur associer l'attribut <name>

Attribut <name> : permet d'indiquer la valeur associer l'attribut <name>

Objet Formulaire d'envoi d'email| Section Envoi

Les commandes de la section Envoi de la fentre Objet du formulaire email permettent de dfinir les modalits relatives l'envoi via email des donnes collectes travers le formulaire cr. Dans le cadre Envoi des donnes, indiquez comment les donnes collectes travers le formulaire doivent tre envoyes au grant du site. Envoyer les donnes via email : c'est l'option prvue par dfaut. Les donnes saisies dans le formulaire sont envoyes via e-mail en exploitant un script PHP dj prdispos. Envoyer les donnes une base de donnes : les donnes saisies dans le formulaire sont envoyes automatiquement la base de donnes MySQL indique, travers un script PHP dj prdispos. Envoyer les donnes un fichier de script : les donnes saisies dans le formulaire sont gres en exploitant le script indiqu (PHP, ASP, etc.). Cette 95

option est utile si vous voulez utiliser votre propre script, par exemple pour envoyer les donnes si PHP n'est pas disponible sur votre serveur, ou si vous voulez activer des procdures et des gestions particulires. Selon la mthode d'envoi slectionne, il faut indiquer une srie de paramtres : Envoyer les donnes via email :

Adresse email de l'expditeur : si vous slectionnez

cette option, vous pouvez indiquer l'adresse utiliser comme expditeur de l'email envoy avec les donnes saisies dans le formulaire cr. Par dfaut, le programme utilise comme email de l'expditeur celui du destinataire qui, dans ce cas, correspond au grant du site. Si vous indiquez comme email de l'expditeur l'adresse de l'utilisateur qui a rempli le formulaire, vous pourrez, par exemple, utiliser directement la commande Rpondre du programme de Courriel. l'adresse laquelle il faut envoyer les donnes. Vous pouvez indiquer plus d'une adresse email : pour ce faire, tapez toutes les adresses email spares d'un point-virgule. les donnes collectes.

Destination Adresse email : permet de dfinir

Objet : permet de dfinir l'objet de l'email contenant Message : permet de taper le texte qui introduit dans le
message les donnes collectes.

Ajouter les donnes collectes au format CSV : permet d'enregistrer les donnes collectes galement dans un fichier au format CSV joint l'email. Dans un fichier CSV, les donnes sont indiques sous forme textuelle, comme une longue liste de rubriques spares par un point-virgule : vous pouvez importer facilement ces fichiers dans les programmes de gestion des feuilles de calcul (par ex. Microsoft Excel).

Envoyer les donnes une base de donnes :

Nom d'hte : c'est l'adresse URL du serveur MySQL o

se trouve la base de donnes enligne utiliser. Dans la plupart des cas, la base de donnes se trouve sur le serveur qui accueille le site web auquel elle est associe, par consquent vous pouvez la trouver en cherchant l'expression "localhost". De toute faon, il convient de vrifier cette donne auprs du fournisseur.

96

 Nom de base de donnes : dans ce champ, tapez le Nom de tableau : dans ce champ, tapez le nom du ta-

nom de la base de donnes (communique par le fournisseur) sur laquelle vous voulez travailler. bleau, l'intrieur de la base de donnes, o vous voulez collecter les donnes. Les tableaux peuvent tre crs en accdant la base de donnes l'aide de l'application enligne. En tout cas, si vous tapez le nom d'un tableau qui n'existe pas, celui-ci sera automatiquement cr. teur (communiqu par le fournisseur) pour pouvoir accder votre base de donnes enligne. (communiqu par le fournisseur) pour pouvoir accder votre base de donnes enligne. permet de dfinir le fichier de traitement utiliser pour collecter les donnes du formulaire et les envoyer. Dans ce cas, le fichier de traitement doit tre cr manuellement pour excuter la tche voulue.

Nom utilisateur : dans ce champ, tapez le Nom Utilisa Mot de passe : dans ce champ, tapez le Mot de passe

Envoyer les donnes un fichier de script :

Fichier de traitement des donnes (ex : PHP, ASP) :

Le cadre Mail de confirmation pour l'utilisateur prsente les options suivantes :

Envoyer un mail de confirmation l'utilisateur : si vous slectionnez cette Adresse email de l'expditeur : si vous slectionnez cette option, vous pouvez

option, aprs avoir rempli le formulaire et envoy les donnes, l'utilisateur recevra automatiquement un email de confirmation. taper une adresse email valide et active utiliser comme expditeur de l'email de confirmation. Par dfaut, le programme utilise comme email de l'expditeur, dans ce cas celui du grant du site, l'adresse saisie comme Destination Adresse email de la section Envoi des donnes. Si vous tapez une Adresse email de l'expditeur diffrente, vous pouvez envoyer l'email de confirmation partir d'une adresse diffrente de celle o arrivent les emails venant du formulaire. Cette option est utile si vous prfrez utiliser pour les communications avec les utilisateurs une adresse gnrique (info@monentreprise.com ou noreply@monentreprise.com) au lieu d'une adresse personnelle (prnom.nom@monentreprise.com).

97

 Destination Adresse email : permet d'indiquer dans quel champ du formulaire le programme doit prendre l'adresse courriel de l'utilisateur qui doit recevoir l'email de confirmation.

Objet : permet de dfinir l'objet de l'email de confirmation. Message : permet d'indiquer le message de l'email de confirmation. Ajouter les donnes collectes : permet de joindre l'email de confirmation
des donnes saisies dans le formulaire. Enfin, le cadre Options propose les options suivantes :

Activer le contrle anti-spam "Captcha" : permet d'ajouter, au terme du formulaire, le contrle anti-spam du Captcha. Le programme insre l'image de quelques lettres dformes sur un arrire-plan flou : l'utilisateur doit recopier correctement les lettres dans un champ appropri pour pouvoir envoyer le message.

Confirmation aprs envoi des donnes : permet d'accder au plan du site

pour dfinir la page visualiser automatiquement quand le formulaire sera rempli et les donnes auront t envoyes via e-mail. Au lieu de renvoyer directement la Page d'accueil, il vaut mieux prdisposer une page spcifique avec un message de remerciement : cette page devra tre Non visible sur le menu l'aide de la commande disponible dans l'tape 2 - Cration du plan. Pour personnaliser l'aspect graphique des emails envoys automatiquement travers le formulaire cr, utilisez les options proposes dans la fentre Styles et modles| Section e-mail de l'tape 4 - Paramtres avancs.

Objet Formulaire d'envoi d'email| Section Style

Les commandes de la section Style de la fentre Objet Formulaire d'envoi d'email permettent de dfinir certains paramtres graphiques du formulaire que vous tes en train de crer. Vous devez, tout d'abord, slectionnez l'lment du formulaire sur lequel vous voulez travailler : pour cela, utilisez la bote liste droulante de l'option homonyme ou cliquez directement sur l'lment dans la fentre Aperu. Voici les lments sur lesquels vous pouvez agir : tiquettes de texte : c'est le texte qui dcrit le champ o vous pouvez taper l'information requise ou le texte de la question poser. Champs : c'est le cadre o l'utilisateur pourra saisir l'information requise.

98

Boutons "Envoi" et "Rinitialiser" : ces boutons sont insrs automatiquement au bas du formulaire d'envoi d'email. Ils servent, respectivement, envoyer toutes les donnes entres dans les champs et supprimer les valeurs ventuellement prsentes dans les champs. Information et validation des donnes : il s'agit de messages donnant des informations supplmentaires (comment remplir les champs), invitant corriger une donne saisie ou exhortant remplir un champ obligatoire. En fonction de l'lment du formulaire slectionn, vous pouvez agir sur les diffrentes options de la section Style : tiquettes de texte :

Type de police : permet d'indiquer, dans la fentre rappele, le type de police, le style et les dimensions du texte. couleur utiliser pour le texte.

Couleur : permet d'indiquer, dans la fentre Couleur, la Disposition : permet de dfinir o l'tiquette doit tre
place par rapport au champ. Vous disposez des trois options suivantes : Afficher les tiquettes au-dessus des champs, Afficher les tiquettes l'intrieur des champs et Afficher les tiquettes gauche des champs. Si vous positionnez les tiquettes gauche des champs, vous pouvez dfinir la largeur (%), savoir le pourcentage d'espace de la ligne qui sera occupe par l'tiquette. couleur qui doit tre utilise pour le texte (en tat normal et "sur slection"), pour l'arrire-plan (en tat normal et "sur slection") et pour la bordure (en tat normal et "sur erreur". couleur utiliser pour le texte, pour l'arrire-plan et la bordure des boutons.

Champs :

Couleur : permet d'indiquer, dans la fentre Couleur, la

Boutons Envoi et Rinitialiser :

Couleur : permet d'indiquer, dans la fentre Couleur, la Image d'arrire-plan : permet de dfinir un fichier Afficher le bouton "Rinitialiser" : active par dfaut,
elle affiche automatiquement au bas du formulaire le bouton "Rinitialiser" (qui permet de vider les champs dj remplis) en plus du bouton "Envoi".

graphique (format .JPG, .GIF et .PNG) utiliser comme image d'arrire-plan des boutons.

99

Information et validation des donnes :

Fichier icne Description de champ : permet de dfinir un fichier graphique (format .JPG, .GIF et .PNG) utiliser comme icne associer au champ pour indiquer la disponibilit d'autres informations. vous slectionnez cette option, le message contenant les informations supplmentaires s'affiche automatiquement quand vous cliquez sur le champ. donnes : permet de choisir comment doit apparatre le message prvu au cas o un champ ne serait pas rempli correctement ou si un champ Obligatoire est laiss vide. Vous disposez des options suivantes : Afficher la bote de dialogue du navigateur, Afficher la fentre contextuelle interne ou Afficher le Conseil ct du champ invalide.

Afficher la description sur la slection de champ : si

Si une erreur survient au cours de la validation des

Pour personnaliser l'aspect graphique des emails envoys automatiquement travers le formulaire cr, utilisez les options proposes dans la fentre Styles et modles| Section e-mail de l'tape 4 - Paramtres avancs

Objet Liste des produits

Une des fonctions les plus intressantes de WebSite X5 est la cration et la gestion de sites E-commerce permettant non seulement de prsenter vos produits dans une vitrine qui donne sur le monde entier mais aussi de les vendre directement enligne. WebSite X5 permet non seulement d'entrer des produits et de grer un panier ecommerce mais aussi de prparer un catalogue enligne l'aide de l'objet nomm Liste de produits. Cet objet permet de prsenter un groupe de produits, slectionns parmi ceux dj insrs dans le Panier virtuel e-commerce, travers des fiches produit rsumant les informations principales et permettant de les acheter.

Pratiquement
Si vous double-cliquez sur l'objet Liste de produits insr dans la Grille de mise en page, vous ouvrez la fentre Liste de produits. Dans cette fentre, vous pouvez crer la liste de tous les produits que vous voulez prsenter et dfinir le mode d'affichage des fiches produit. 100

Les commandes disponibles sont articules en deux sections :

Section Liste Section Paramtres

Pour que l'objet Liste des produits fonctionne correctement, vous devez pralablement insrer des produits dans le panier e-commerce l'aide des commandes de la section Panier virtuel e-commerce de l'tape 4 - Paramtres avancs.

Objet Liste des produits | Section Liste

Dans la section Liste de la fentre Objet Liste des produits, vous pouvez indiquer les produits devant figurer dans l'objet Liste des produits. La fentre propose la Liste complte des catgories et des produits insrs pendant la cration du Panier e-commerce disponible l'tape 4 - Paramtres avancs. En regard de chaque catgorie et chaque produit, se trouve une case cocher : cliquez sur la case correspondant aux catgories et/ou produits que vous voulez insrer dans l'objet Liste des produits que vous tes en train de composer. Slectionner une catgorie ou tous les produits appartenant une catgorie, ce n'est pas la mme chose : dans le premier cas seulement, si vous ajoutez par la suite de nouveaux produits une catgorie, ils seront automatiquement insrs dans la Liste de produits laquelle ils sont associs.

Objet Liste des produits| Section Paramtres

Les options de la section Paramtres de la fentre Objet Liste des produits permettent de dfinir certains paramtres graphiques relatifs aux fiches prsentant les produits figurant dans la liste. Vous devez tout d'abord indiquer le Type d'affichage en choisissant parmi les types suivants de fiches produit : Seulement texte - Les informations suivantes figurent une aprs l'autre dans la fiche : Nom du produit, description, liste droulante avec les variantes (si elles sont disponibles), cot et champ d'entre de la quantit avec le bouton "Acheter". Image et texte - Dans la fiche, l'image du produit apparat gauche tandis que les informations relatives sont affiches droite.

101

Texte et image - Dans la fiche, les informations relatives au produit apparaissent gauche tandis que l'image du produit est affiche droite. Seulement image - Dans ce cas, toutes les informations associes, sauf la description tendue, apparaissent sous l'image. Alterner Image et texte - Dans ce cas le programme alterne les fiches produit avec l'image et le texte droite aux fiches produit avec l'image et le texte gauche. Les fonctions du cadre Paramtres des cadres permettent de dfinir :

Fiches par ligne : permet d'indiquer combien de fiches doivent tre places
cte cte sur une seule ligne.

Hauteur des fiches : permet d'indiquer la valeur en pixels correspondant la

hauteur de chaque fiche des produits. En fonction de ce paramtre, les images associes aux produits sont redimensionnes automatiquement. Si les textes de description des produits sont trop longs pour tre affichs entirement, la barre de dfilement apparat automatiquement. tation o le texte et l'image sont cte cte, combien d'espace sur la fiche doit tre occup par l'image et combien par le texte. Si l'image occupe 30% de la largeur de la fiche, le texte en occupera 70%. produit et son contenu. Cette option permet de dfinir l'espace entourant le contenu par rapport la bordure de la fiche produit.

Largeur Image (%) :permet d'indiquer, si vous avez choisi un type de prsen-

Marge intrieure : la marge correspond l'espace entre la bordure de la fiche

Les fonctions du cadre Graphiques permettent de dfinir :

Police : permet de dfinir le type de police, le style et la taille en points du texte. Couleur texte / couleur darrire-plan / Couleur bordure : permettent, respectivement, de dfinir dans la fentre Couleur, la couleur des caractres et de l'arrire-plan des fiches produit.

Epaisseur bordure permet d'indiquer l'paisseur de la bordure de la fiche.

Vous disposez aussi des Options suivantes :

Afficher le champ quantit : si vous slectionnez cette option, la fiche produit

contiendra le champ Quantit pour indiquer la quantit de produit insrer dans le panier. aussi le prix du produit.

Afficher le prix : si vous slectionnez cette option, la fiche produit contiendra

102

 Activer le Lien sur l'image : si vous slectionnez cette option, le lien vers les
images agrandies est automatiquement dfini sur les diffrentes images des fiches du produit. Ces images agrandies sont affiches dans la fentre ShowBox.

Vous pouvez entirement personnaliser l'aspect de la fentre ShowBox : l'aide des options prsentes dans la section Styles et modles| Section Bote d'affichage de l'tape 4 - Paramtres avancs vous pouvez, par exemple, dfinir les couleurs, l'ombre, l'opacit et les effets d'ouverture.

Objet HTML et Widgets

WebSite X5 propose un objet spcifique pour chaque type de contenu insrer dans une page : texte, image, animation, formulaire email, etc., grce la possibilit de grer aussi l'objet HTML et Widgets, les choix deviennent virtuellement illimits. La fonction objet HTML et Widgets permet d'insrer directement des portions de code et donc d'excuter des fonctions particulires non prvues. Les Widgets disponibles sont particulirement utiles : il s'agit d'applications dj prtes permettant d'excuter une tche particulire. L'exemple le plus simple est celui du Widget pour Google Maps : en dfinissant quelques paramtres, il permet de crer et d'insrer le plan du lieu voulu sans le configurer directement sur le site de Google Maps.

Pratiquement
Si vous double-cliquez sur l'objet HTML et Widgets insr dans la Grille de mise en page, vous ouvrez la fentre Objet HTML et Widgets. Cette fentre propose un diteur de texte pour entrer le code HTML et/ou CSS. Vous pouvez tapez un code ex novo, le copier et le coller dans les sites proposant des codes, l'insrer en choisissant simplement un Widget. Vous disposez des sections suivantes :

Section Code HTML Section Avances Objet HTML et Widgets | Section Code HTML
Les commandes de la section Code HTML de la fentre Objet HTML et Widgets proposent un diteur permettant de composer le code HTML introduire dans la page, en le tapant manuellement ou en double-cliquant sur l'un des Widgets.

103

L'diteur disponible dans le cadre Code HTML propose les commandes suivantes : Couper [CTRL+X] / Copier [CTRL+C] / Coller [CTRL+V] Elle permettent, respectivement, de couper, copier et coller la portion de code slectionn. Annuler [CTRL+Z] / Restaurer [ALT+MAIUSC+BACKSPACE] Elle permettent, respectivement, d'annuler et de rtablir la dernire opration excute/annule. Pour faciliter l'criture/lecture du code, l'diteur HTML est pourvu de la commande Mise en vidence de la syntaxe (Syntax highlighting). Cette fonction utilise diffrentes couleurs pour mettre en vidence certains lments du code sans modifier le sens du texte. Grce la mise en vidence, la structure du code devient claire et, par consquent, on trouve plus facilement les erreurs ventuelles. Le cadre Liste Widget propose en revanche la liste de tous les Widgets disponibles. Si vous double-cliquez sur le Widget voulu, vous affichez la fentre Widget permettant de dfinir les paramtres prvus. Si vous confirmez, le code HTML relatif au Widget est compos et automatiquement insr dans l'diteur. Enfin, le cadre Proprits dispose des options suivantes :

Largeur : permet d'afficher la largeur de l'objet HTML et Widgets ; cette valeur

est automatiquement dfinie selon l'espace disponible dans la Grille de mise en page.

Hauteur : permet de dfinir la hauteur de l'objet HTML et Widgets. Afficher les barres de dfilement : active par dfaut, elle affiche automatiquement la barre de dfilement si l'objet HTML et Widgets a une hauteur suprieure celle dfinie avec l'option Hauteur.

104

Objet HTML et Widgets | Section Avances

Les commandes de la section Avances de la fentre Objet HTML et Widgets permettent de crer une feuille de style (CSS) et/ou de dfinir la liste des fichiers joindre l'objet HTML et Widgets sur lequel vous tes en train de travailler. Le cadre Code CSS propose un diteur (analogue celui prsent dans la section Code HTML) permettant d'entrer les instructions pour composer la feuille de style. Nous vous rappelons que le but de ces CSS est de dfinir l'aspect graphique des pages HTML auxquelles ils sont associs. Le cadre Fichiers associs au code HTML montre tous les fichiers associs dans un tableau rcapitulatif indiquant le nom du fichier et le chemin relatif sur le serveur. Pour composer la liste des fichiers associs au Code HTML, utilisez les commandes suivantes :

Ajouter : permet, dans la fentre Tlcharger le fichier associ, d'insrer un

nouveau fichier avec lien.

Modifier : permet de rappeler la fentre Tlcharger le fichier associ pour modifier les prdispositions dfinies pour le fichier slectionn dans le tableau rcapitulatif des fichiers associs. dans le tableau rcapitulatif des fichiers associs.

Supprimer... : permet de supprimer le fichier slectionn parmi ceux prsents

105

106

tape 3. Fonctions Communes

107

Editeur graphique
WebSite X5, offre une procdure automatique pour optimiser les images importes ainsi qu'un diteur graphique intgr polyvalent permettant d'excuter des oprations de retouches photos. Pour rappeler l'diteur graphique, cliquez sur le bouton Modifier disponible, en gnral, dans les fentres permettant d'importer un fichier graphique, par exemple, celles relatives Objet Image, Objet de la galerie, ou la cration d'un nouveau produit dans le Panier e-commerce.

L'diteur graphique est organis dans les sections suivantes :

Section Rogner et
pivoter

Section Filtres Section Filigrane

Section Masque Section Cadre Section Effets

Section
Bibliothque

L'diteur graphique propose les boutons suivants :

Ok : permet de quitter l'diteur et revenir la fentre principale tout en enregistrant les modifications effectues sur l'image.

Annuler : permet de quitter l'diteur et revenir la fentre principale sans enregistrer les modifications effectues sur l'image. mat .PNG.

Enregistrer sous : permet d'enregistrer une copie de l'image originale au for-

108

Editeur graphique | Section Rogner et pivoter

Vous pouvez dessiner la zone de coupe directement sur l'aperu de l'image et utiliser les poignets de slection pour la modifier. Vous pouvez dplacer la slection de la coupe pour mettre en premier plan la zone voulue : pour ce faire, cliquez sur celle-ci l'aide du bouton gauche de la souris et positionnez-la l'endroit voulu. Il n'est pas ncessaire de confirmer la coupe : la portion externe la slection de la coupe (plus fonce que l'original) ne sera pas considre. Pour annuler la coupe, cliquez sur l'image en dehors de la zone slectionne. En regard de l'image, vous disposerez des botes suivantes :

Rogner : indique les valeurs en pixels de la Coordonne X et de la Coordonne Y

qui identifient l'angle suprieur gauche de la zone slectionne par la coupe, en plus de sa Largeur et Hauteur. Les valeurs des paramtres peuvent tre prises directement selon la zone de coupe dessine, tapes dans les champs appropris ou dfinies l'aide des curseurs. et/ou vertical (selon l'axe horizontal). 0, 90, 180 ou 270.

Reflet : permet de rflchir l'image dans le sens horizontal (selon l'axe vertical) Rotation : permet de tourner l'image dans le sens des aiguilles d'une montre de Editeur graphique | Section Filtres
Les commandes de la section Filtres de l'Editeur graphique permettent de corriger les principaux rglages de couleur et de dfinir certains effets graphiques sur l'image importe.

Filtres : indique la liste des filtres pouvant tre appliqus l'image. La liste

comprend : Luminosit/Contraste, Equilibrage (RGB), Intensit (HSL), Dtail, Flou, Noir et blanc, Spia, Mosaque, Portrait, Diffusion, Peinture l'huile, Zone de dessin, Bruit, Marbre. Pour appliquer un filtre, il suffit de le cocher.

Paramtres : indique les paramtres permettant de dfinir le filtre slectionn. Editeur graphique | Section Filigrane
Les commandes de la section Filigrane de l'Editeur graphique permettent d'appliquer une filigrane l'image importe pour la protger contre les copies non autorises. Le but de la filigrane est, en effet, d'altrer l'image, en indiquant par exemple explicitement le copyright, pour dcourager la copie et l'utilisation.

Filigrane : fournit la liste des filigranes pouvant tre appliques l'image. En

plus des images de filigrane disponibles, vous pouvez appliquer une filigrane personnelle : pour cela, il suffit de slectionner le deuxime aperu de la liste 109

(Personnel...) et d'importer le fichier graphique prpar.

Paramtres : permet de tourner de 90, 180 ou 270 ou de rflchir horizontalement ou verticalement la filigrane applique l'Image. Il faut prparer la filigrane comme un fichier graphique au format .GIF, .PNG, .PSD ou .WMF et dfinir sa transparence : la filigrane est superpose l'image originale pour afficher seulement les parties correspondant aux zones transparentes. Comme le format .GIF ne gre qu'un niveau de transparence, tandis que les formats .PNG et .PSD en grent 256, il est conseill d'enregistrer les filigranes dans l'un de ces formats.

Editeur graphique | Section Masque

Les commandes de la section Masque de l'Editeur graphique permettent d'appliquer un masque l'image importe pour modifier sa forme.

Masque : contient la liste des masques pouvant tre appliqus l'image. En

plus des masque proposs, vous pouvez appliquer un masque personnel : pour cela, il suffit de slectionner le deuxime aperu de la liste (Personnel...) et d'importer le fichier graphique prpar. talement ou verticalement le masque appliqu l'image.

Paramtres : permet de tourner de 90, 180 ou 270, ou de rflchir horizonLe masque est une image 256 couleurs en niveaux de gris : le masque est appliqu l'image originale de sorte que les parties couvertes par le noir soient invisibles et celles couvertes par le blanc restent visibles.

Editeur graphique | Section Cadre

Les commandes de la section Cadre de l'Editeur graphique permettent d'appliquer un cadre l'image importe.

Cadre : contient la liste des cadres pouvant tre appliqus l'image importe.

En plus des cadres proposs, vous pouvez appliquer un cadre personnel : pour cela, il suffit de slectionner le deuxime aperu de la liste (Personnel...) et d'im-

110

porter le fichier graphique prpar.

Paramtres : permet de tourner de 90, 180 ou 270 ou de rflchir horizontalement ou verticalement le cadre appliqu l'image. Il faut prparer le cadre comme un fichier graphique au format .GIF, .PNG, .PSD ou WMF et dfinir sa transparence : le cadre est superpos l'image originale pour afficher seulement les parties correspondant aux zones transparentes. Comme le format .GIF ne gre qu'un niveau de transparence, tandis que les formats .PNG et .PSD en grent 256, il est conseill d'enregistrer les cadres dans l'un de ces formats.

Editeur graphique | Section Effets

Les commandes de la section Effets de l'Editeur graphique permettent de corriger les principaux rglages de couleur et de dfinir certains effets graphiques sur l'image importe.

Effets : montre la liste des effets pouvant tre appliqus l'image. La liste comprend : Ombre, Reflet, Lueur externe, Bordure colore, Cadre, Bordure nuance, Haut-relief, Bas-relief, Bomb, Opacit, Distorsion, Perspective et Rotation. Pour appliquer un effet, cochez la case de l'effet voulu.

Paramtres : rtablit les paramtres permettant de dfinir l'effet slectionn. Editeur graphique| Section Bibliothque
La section Bibliothque de l'Editeur graphique permet de choisir un kit de paramtres, enregistrs comme Style, et de l'appliquer l'image courante ou bien d'enregistrer les prdispositions dfinies pour l'image courante dans un nouveau Style que vous pourrez rappeler et appliquer d'autres images. La bibliothque prsente une liste de tous les Styles prdfinis et des Styles personnaliss dj crs. En plus, vous disposez des commandes suivantes :

Appliquer : permet d'appliquer l'image courante tous les paramtrages prvus pour le style slectionn.

Ajouter : permet d'enregistrer toutes les prdispositions dfinies dans les sections prcdentes de l'diteur graphique pour l'image courante dans un Style, et de l'ajouter la liste des Styles personnaliss. 111

 Supprimer... : permet de supprimer le style slectionn dans la liste Styles personnaliss. Vous ne pouvez pas supprimer les Styles prdfinis.

Pratiquement
La bibliothque permet de rduire les temps de travail : si vous voulez attribuer les mmes paramtrages graphiques plusieurs images, dfinissez-les pour la premire image, enregistrez le style et appliquez-le, sans le rcrer chaque fois, pour les autres images. Pour crer une nouveau style

Ouvrez la section Gnral de la fentre Objet Image et cliquez sur le bouton Modifier, situ sous l'aperu, pour accder l'Editeur graphique. phique pour obtenir le rsultat voulu.

Utilisez les options disponibles dans les diffrentes sections de l'diteur gra Ouvrez la section Bibliothque et cliquez sur le bouton Ajouter : un nouveau
style est cr selon les prdispositions dfinies. Un aperu du style cr est ajout dans la liste des Styles personnaliss.

Pour appliquer un style

Ouvrez la section Gnral de la fentre Objet Image et cliquez sur le bouton Modifier, situ sous l'aperu, pour accder l'Editeur graphique.

Ouvrez directement la section Bibliothque et slectionnez l'aperu du style

voulu dans la liste des Styles prdfinis ou des Styles personnaliss.

Cliquez sur le bouton Appliquer.

Style de cellule
WebSite X5 permet de crer chaque page d'un site l'aide d'une grille de mise en page qui partage l'espace disponible en cellules. Le nombre de cellules disponibles dpend du nombre de lignes et de colonnes insres et, pour chaque cellule, vous pouvez insrer un contenu diffrent ( l'aide du Glisser & Dplacer des objets disponibles). La cellule quivaut donc un espace dtermin de la page : elle a un contenu et elle peut avoir un aspect graphique particulier. l'aide des marges, des bords et de l'arrire-plan de la cellule vous pouvez crer des botes l'intrieur de la page pour organiser les contenus et mettre certains contenus en premier plan.

112

Pratiquement
Quand vous travaillez la Cration d'une page, aprs avoir fait glisser l'un des Objets l'intrieur d'une cellule de la Grille de mise en page, vous pouvez dfinir l'aspect graphique de cette cellule en cliquant sur le bouton en slectionnant les options proposes dans la fentre Style de cellule qui apparat. Les options disponibles sont articules en 3 sections :

Section Style Section Textes Style de cellule | Section Style

Section Bibliothque

Les commandes de la section Style de la fentre Style de cellule permettent de dfinir les paramtrages graphiques de la cellule courante de la Grille de mise en page. Tout d'abord, il faut dfinir le type d'Arrire-plan souhait pour la cellule, en choisissant entre : Arrire-plan color : l'arrire-plan de la cellule est color en teinte unie. Arrire-plan dgrad : l'arrire-plan de la cellule est rempli par un gradient dont vous pouvez dfinir les couleurs de dpart et de fin ainsi que la direction du dgrad. Arrire-plan image : l'arrire plan de la cellule est cr en important une image. Ajuster la cellule : l'arrire plan de la cellule est cr en important une image qui est coupe en blocs et recompose pour l'adapter parfaitement aux dimensions de la cellule. (voir Comment crer une image d'arrire-plan qui s'adapte aux dimensions de la cellule). Selon le type d'arrire-plan, vous pouvez agir sur diffrentes options du cadre Paramtres. Pour l'Arrire-plan color, les options disponibles sont :

Couleur d'arrire-plan : permet de dfinir dans la fentre Couleur, la couleur

utiliser pour remplir l'arrire-plan de la cellule.

Opacit : permet de dfinir le degr d'opacit de la couleur d'arrire-plan applique. Plus les valeurs se rapprochent du 0, plus l'opacit diminue et l'arrireplan de la cellule devient transparent en laissant voir l'arrire-plan de la page.

Pour l'Arrire-plan dgrad, les options disponibles sont :

Couleur initiale / Couleur finale : permettent d'indiquer, dans la fentre Couleur, les couleurs de dpart et de fin utiliser pour composer le dgrad. 113

 Diffusion : permet d'tablir si la premire ou la dernire couleur doit tre pr-

dominante dans le dgrad, en dfinissant l'espace (en pixels) l'intrieur duquel doit avoir lieu la transition du premier au second. Par exemple, dans un dgrad vertical o l'on passe du gris au blanc avec une diffusion 250, le gradient est compos dans les premiers 250 px, aprs quoi l'arrire-plan restera uniformment blanc. Haut, d'en Bas, de la Gauche ou de la Droite.

Sens : permet de choisir le type de nuance appliquer, savoir partir d'en Opacit : permet de dfinir le degr d'opacit du dgrad d'arrire-plan appliquer. Plus les valeurs se rapprochent du 0, plus l'opacit diminue et l'arrireplan de la cellule devient transparent en laissant voir l'arrire-plan de la page.

Pour l'Arrire-plan image, les options disponibles sont :

Couleur d'arrire-plan : permet de dfinir dans la fentre Couleur, la couleur

utiliser pour remplir l'arrire-plan de la cellule.

Fichier image : permet de slectionner le fichier graphique relatif l'image

utiliser comme arrire-plan de la cellule. Vous pouvez utiliser les fichiers au format .JPG, .GIF, .PNG. arrire-plan de la cellule. L'image peut tre rpte horizontalement, verticalement ou dans les deux sens pour remplir tout l'espace disponible. zone occupe par la cellule.

Disposition : permet de dfinir s'il faut rpter ou non l'image utilise comme

Alignement : permet de dfinir l'alignement de l'image utilise par rapport la Variante de couleur : permet d'indiquer, dans la fentre Couleur, la couleur
vers laquelle tendra l'image insre comme arrire-plan de la cellule. Vous appliquez donc un effet "Coloris" l'image de sorte qu'elle tende vers la couleur voulue.

Opacit : permet de dfinir le degr d'opacit de l'image d'arrire-plan appli-

quer. Plus les valeurs se rapprochent du 0, plus l'opacit diminue et l'arrireplan de la cellule devient transparent en laissant voir l'arrire-plan de la page.

Pour Ajuster la cellule, les options disponibles sont :

Couleur d'arrire-plan : permet de dfinir dans la fentre Couleur, la couleur

utiliser pour remplir l'arrire-plan de la cellule.

Fichier image : permet de slectionner le fichier graphique relatif l'image

utiliser comme arrire-plan de la cellule. Vous pouvez utiliser les fichiers au format .JPG, .GIF, .PNG.

Largeur bloc / Hauteur bloc : permettent de dfinir les dimensions des blocs

formant l'image d'arrire-plan de sorte dterminer quelles portions de 114

l'Image doivent restes inaltres et quelles portions doivent tre rptes. (voir Comment crer une image d'arrire-plan qui s'adapte aux dimensions de la cellule).

Variante de couleur : permet d'indiquer, dans la fentre Couleur, la couleur

vers laquelle tendra l'image insre comme arrire-plan de la cellule. Vous appliquez donc un effet "Coloris" l'image de sorte qu'elle tende vers la couleur voulue.

Opacit : permet de dfinir le degr d'opacit de l'image d'arrire-plan appli-

quer. Plus les valeurs se rapprochent du 0, plus l'opacit diminue et l'arrireplan de la cellule devient transparent en laissant voir l'arrire-plan de la page..

Pour finir, les options du cadre Bordure permettent de dfinir :

Couleur et paisseur : la premire option permet d'indiquer, dans la fentre

Couleur, la couleur de bordure de la cellule, la deuxime option dfinit l'paisseur de la bordure. finir indpendamment la couleur ou l'paisseur de chaque bordure de la cellule. La couleur de bordure est utilise aussi comme couleur pour la transparence de l'image.

Bordures personnalises : si vous slectionnez cette option, vous pouvez d-

Style de cellule| Section Textes

Les commandes de la section Textes de la fentre Style de cellule permettent d'insrer et dfinir l'aspect graphique des lments texte qui compltent le style de la cellule courante grille de mise en page. Vous devez tout d'abord dfinir l'lment, Texte ou Image, que vous voulez insrer et sur lequel vous voulez travailler. Vous pouvez choisir parmi les options suivantes: Titre : c'est le texte qui est affich comme titre de la cellule courante. Image de l'en-tte : c'est une image que vous pouvez insrer dans l'en-tte de la cellule courante, ventuellement en regard du titre. Texte de description : c'est le texte qui est affich comme lgende de la cellule courante. Aprs l'insertion, les diffrents lments peuvent tre slectionns soit l'aide de la bote liste droulante soit en cliquant sur l'image d'aperu. Selon le type d'lment slectionn, vous pouvez agir sur diffrentes options du cadre Paramtres. 115

Pour les lments Titre et Texte de description, les options disponibles sont :

Contenu : permet de taper le titre ou le texte de description de la cellule. Couleur texte : permet d'indiquer, dans la fentre Couleur , la couleur du texte
sur lequel vous tes en train de travailler. du texte.

Police : permet de dfinir le type de caractre, le style et la dimension en points Alignement : permet d'indiquer si le texte doit tre align Gauche, au Centre
ou Droite par rapport la cellule.

Marge horizontale / Marge verticale : permettent de dfinir la valeur en

pixels pour les marges du texte, afin de le positionner avec prcision en dcidant la distance par rapport aux bordures de la cellule.

En revanche, pour l'lment Image de l'en-tte, les options disponibles sont :

Fichier image : permet de slectionner le fichier graphique relatif l'image

utiliser. Vous pouvez utiliser les fichiers au format .JPG, .GIF, .PNG. Centre ou a Droite par rapport la cellule.

Alignement : permet d'indiquer si l'image insre doit tre aligne Gauche, au Marge horizontale / Marge verticale : permettent de dfinir la valeur en
pixels pour les marges de l'image insre, pour la positionner avec prcision par rapport aux bordures de la cellule et donc par rapport au titre ventuellement prsent.

Style de cellule| Section Bibliothque

La Section Bibliothque de la fentre Style de cellule permet de choisir un ensemble de paramtrages, enregistrs comme Style, et de les appliquer la cellule courante ou bien d'enregistrer les prdispositions dfinies pour la cellule courante dans une nouveau Style que vous pourrez rappeler par la suite et appliquer d'autres cellules.

La bibliothque prsente une liste de tous les Styles prdfinis et des Styles personnaliss dj crs. En plus, vous disposez des commandes suivantes : 116

 Appliquer : permet d'appliquer la cellule courante tous les paramtrages

prvus pour le style slectionn.

Ajouter : permet d'enregistrer tous les paramtrages graphiques dfinis dans

les sections Style et Textes pour la cellule courante dans un style et de l'ajouter la liste des Styles personnaliss. sonnaliss. Vous ne pouvez pas supprimer les Styles prdfinis.

Supprimer... : permet de supprimer le style slectionn dans la liste Styles perLors de la composition d'un style, tous les paramtrages graphiques dfinis pour la cellule restent inchangs tandis que les contenus peuvent varier d'une cellule l'autre. Ainsi, par exemple, dans le style vous enregistrez la Couleur texte ou la Police mais pas le Contenu spcifi pour les lments comme le Titre et le Texte de description associ une cellule.

Pratiquement
La bibliothque permet de rduire les temps de travail : si vous voulez attribuer les mmes paramtrages graphiques plusieurs cellules, dfinissez-les pour la premire cellule, enregistrez le style et appliquez-le, sans le rcrer chaque fois, pour les autres cellules. Pour crer une nouveau style

Dans la grille de mise en page, slectionnez la cellule voulue et cliquez sur le

bouton pour rappeler la fentre Style de cellule.

Utilisez les options des sections Style et Textes pour obtenir le rsultat voulu. Ouvrez la section Bibliothque et cliquez sur le bouton Ajouter : un nouveau
style est cr selon les prdispositions dfinies. Un aperu du style cr est ajout dans la liste des Styles personnaliss.

Pour appliquer un style

Dans la grille de mise en page, slectionnez la cellule voulue et cliquez sur le

bouton pour rappeler la fentre Style de cellule.

Ouvrez directement la section Bibliothque et slectionnez l'aperu du style

voulu dans la liste des Styles prdfinis ou des Styles personnaliss.

Cliquez sur le bouton Appliquer.

117

Comment crer une image d'arrire-plan qui s'adapte aux dimensions de la cellule
Dans la fentre Style de cellule | Section Style, vous pouvez dfinir l'aspect graphique de la cellule courante de la Grille de mise en page. Vous pouvez, par exemple, importer une image (fichier au format .JPG, .GIF, .PNG) et l'utiliser comme arrire-plan de cette cellule. Selon le type d'image importe, vous devez choisir l'option Arrire-plan image puis dfinir des paramtres diffrents pour les options Disposition et Alignement, ou bien utiliser l'option Ajuster la cellule pour obtenir le meilleur rsultat. Exemple 1 L'image importe a la mme taille que la cellule. Arrire-plan : Arrire-plan image Disposition Ne pas rpter Alignement Haut-Gauche

Exemple 2 L'image importe est une pattern, c'est--dire une image cre de sorte que si l'on unit deux ou plusieurs images identiques, aussi bien horizontalement que verticalement, on ne voit pas le point de conjonction. Arrire-plan : Arrire-plan image Disposition Rpter dans les deux sens Alignement Haut-Gauche

118

Exemple 3 L'image importe est celle d'un cadre qu'il faut adapter des cellules de taille diffrente. Arrire-plan : Ajuster la cellule Largeur bloc / Hauteur bloc : dfinir les dimensions des bloc les plus appropries.

Pour mieux comprendre comment fonctionne l'option Ajuster la cellule, que sont les blocs et comment dfinir correctement leurs dimensions, regardez les images ci-dessous :

Image 1

Image 2

Image 3

119

L'image originale (image 1) montre un cadre trs labor mais qui peut tre facilement coup en blocs et adapter n'importe quelle taille de la cellule : les lments ornementaux ajouts dans les coins occupent en effet une zone bien dfinie et facilement dlimitable et tous les dgrads peuvent tre rpts comme une pattern sans obtenir de brusques changements de tonalit. L'image 2 montre les blocs dont il faut dfinir les dimensions (options Largeur bloc et Hauteur bloc). Les valeurs relatives la largeur et la hauteur des blocs (tous identiques) sont dfinies en pourcentage par rapport la largeur et la hauteur de l'image originale, elles peuvent varier entre 5% et 45 %. Dans ce cas, il faut dfinir la dimension de la coupe 35% pour les deux cts des blocs afin qu'ils comprennent entirement l'image positionne dans les coins. L'image 3 identifie les blocs A, B, C, D et 5 sections, a, b, c, d, e : ce sont les coupes effectues par le programme pour tirer de l'image originale toutes les images ncessaires pour composer l'arrire-plan de la cellule. Par consquent, alors que les images correspondant aux blocs A, B, C, D restent intactes et sont simplement positionnes dans les coins, les images correspondant aux section a, b, c, d, e sont rptes pour remplir l'espace ncessaire. Il est donc vident que cette procdure permet une flexibilit considrable : en partant d'une seule image ralise comme il se doit, on s'occupe de l'aspect de cellules ayant des dimensions trs diffrentes.

Lien
En plus des menus de navigation fixe, crs automatiquement en fonction du Plan, WebSite X5 permet d'insrer sur Textes et Images les liens ncessaires pour rsoudre une srie d'oprations diffrentes : ouvrir des pages internes ou externes, rappeler un fichier, afficher des images, ajouter un produit au panier, etc. Pour dfinir un lien, vous pouvez choisir le type d'action mais aussi dfinir et personnaliser l'info-bulle associe expliquant ce qui se passe en cliquant.

120

Pratiquement
Chaque fois que vous pouvez insrer un lien sur un texte ou une image, utilisez la commande Associer/Insrer un lien : si vous cliquez sur ce bouton, vous affichez la fentre homonyme permettant de dfinir le type de lien hypertextuel insrer. Les diffrentes options sont regroupes dans des sections appropries :

Section Action Section Description Lien | Section Action

Les commandes de la section Action de la fentre Lien permettent d'indiquer le type d'action associer au lien : Page du site - Permet d'tablir un lien vers une autre page du site. Le bouton permet de parcourir le plan du site et de slectionner la page associer. Vous pouvez indiquer si la page associe doit tre affiche dans la mme fentre, dans une nouvelle fentre du Navigateur ou dans une fentre PopUp. Dans ce dernier cas, le programme ouvre comme PopUp une nouvelle fentre du navigateur dont vous pouvez dfinir la taille (Largeur et Hauteur). Fichier ou URL - Permet d'tablir un lien vers une ressource quelconque, un fichier ou une page HTML, prsente sur l'ordinateur ou dj publie sur le Web. Pour choisir le fichier associer, slectionnez l'option Fichier local et cliquez sur le bouton pour parcourir les ressources enregistres sur le systme, ou slectionnez l'option URL ou Fichier sur Internet et saisissez l'adresse (URL) qui identifie sa position dans le rseau. Dans ce cas galement, vous pouvez indiquer si la ressource associe doit tre affiche dans la mme fentre, dans une nouvelle fentre du Navigateur ou dans une fentre Popup dont vous pouvez dfinir la taille (Largeur et Hauteur). Fichier ou URL avec Showbox - Permet de dfinir un lien vers un fichier quelconque, prsent sur votre ordinateur ou dj publi sur le Web, dans une bote d'affichage approprie. Contrairement la fentre Popup, dans la Bote d'affichage le fichier apparat en premier plan sur la page d'origine qui devient automatiquement plus opaque et claire/fonce. Pour choisir le fichier associer, slectionnez l'option Fichier local et cliquez sur le bouton pour parcourir les ressources enregistres sur le systme, ou slectionnez l'option URL ou Fichier sur Internet et saisissez l'adresse (URL) qui identifie sa position dans le rseau. Les options disponibles permettent de dfinir la taille (Largeur et Hauteur) de la bote d'affichage ainsi qu'une lgende 121

qui sera affiche au bas. Le lien vers la bote d'affichage est particulirement indiqu pour visualiser des images, mais vous pouvez aussi l'utiliser pour afficher des ressources diffrentes comme, par exemple, les documents .PDF. Galerie fichier avec ShowBox - Permet de dfinir un lien pour lancer la reproduction d'images dans une bote d'affichage. Pour crer la liste des images, utilisez les commandes disponibles : Ajouter, Supprimer..., En haut et En bas. Par ailleurs, vous pouvez dfinir la taille (Largeur et Hauteur) de la bote d'affichage. Vous pouvez entirement personnaliser l'aspect de la bote d'affichage : l'aide des options prsentes dans la section Styles et modles | Section Bote d'affichage de l'tape 4 - Paramtres avancs vous pouvez, par exemple, dfinir les couleurs, l'ombre, l'opacit et les effets d'ouverture. Courriel - Permet d'tablir un lien vers le programme courriel prdispos pour envoyer un email. Pour dfinir ce type de lien, il suffit de taper l'Adresse email laquelle le message doit tre envoy. Si vous slectionnez l'option Activer la protection du courriel, l'Adresse email spcifie sera crypte dans le code HTML de la page : ainsi, elle ne sera pas reconnue par les robots qui sondent le rseau la recherche d'adresses pour les campagnes de spam. Appel Internet - Permet de dfinir un lien qui active un logiciel d'appel tlphonique via Internet (par exemple Skype) pour appeler un autre Utilisateur. L'utilisateur appeler doit tre spcifi dans un champ appropri. Par ailleurs, vous pouvez indiquer le type d'action en choisissant parmi : Appeler, Ajouter un contact, Chat, Afficher le profil, Messagerie vocale Skype et Envoyer le fichier. Son - Permet de dfinir un lien qui lance la reproduction d'un son. Pour choisir le fichier associer, slectionnez l'option Fichier local et cliquez sur le bouton pour parcourir les ressources enregistres sur le systme, ou slectionnez l'option URL ou Fichier sur Internet et saisissez l'adresse (URL) qui identifie sa position dans le rseau. Vous pouvez associer des fichiers au format .MP3. Quand vous cliquez sur le lien, vous affichez une info-bulle contenant le bouton Play/Pause pour lancer/interrompre la reproduction du son. Quand vous loignez la souris de l'info-bulle, elle s'arrte et la reproduction du son est coupe. L'info-bulle sur le lien avec le son est cre automatiquement par le programme : son aspect est dfini par les prdispositions actives dans la fentre Styles et modles | Section Info-bulle de l'tape 4 - Paramtres avancs. 122

Imprimer la page - Permet d'tablir un lien qui lance l'impression de la page affiche. Message d'alerte - Permet de dfinir un lien qui affiche un message d'alerte. Pour dfinir ce type de lien, tapez le texte du message dans le champ appropri. Si vous slectionnez l'option Afficher dans une fentre contextuelle, le message d'alerte apparat dans une bote de dialogue style Windows. Pages par dfaut et Favoris - Permet d'tablir un lien qui ouvre la fentre Internet Explorer pour ajouter le site Internet indiqu la liste des favoris (Ajouter le site Web aux Favoris) ou dfinir le site spcifi comme page par dfaut pour l'ouverture du Navigateur Internet (Configurer le site Web comme page d'accueil par dfaut du navigateur). Pour dfinir ce type de lien, indiquez l'URL du site et le titre du site proposer. Flux RSS - Permet d'afficher le flux RSS du site : ce lien n'est actif que si vous avez effectivement cr un Flux RSS dans la fentre approprie de l'tape 4 Paramtres avancs. Quand vous testez sur votre ordinateur le fonctionnement du site, un message vous avertit que les Flux RSS ne seront affichs que lorsque le site sera publi enligne. Blog - Permet de dfinir un lien ouvrant le Blog associ au site courant. Pour que ce lien fonctionne correctement, vous devez crer prcdemment un Blog dans la section approprie de l'tape 4 - Paramtres avancs. Les options disponibles permettent d'indiquer si le Blog associ doit tre affich dans la mme fentre ou dans une nouvelle fentre du Navigateur. Plan du site - Permet de dfinir un lien affichant le Plan du site complet dans une page approprie. Les rubriques du plan du site, cr automatiquement, sont des liens actifs vers une page : le plan reprsente donc un outil utile d'orientation et de navigation mis la disposition de l'utilisateur. L'affichage des rubriques du plan peut tre gr l'aide des commandes Tout ouvrir et Tout fermer. Mme si le lien Plan du site n'est pas utilis, le Plan du site XML est cr et associ au code HTML des pages travers le Mta tag <sitemap>, pour permettre une meilleur indexation des contenus de la part des moteurs de recherche. Afficher le panier - Permet de dfinir un lien qui mne la page du panier contenant la liste de tous les produits dj commands. 123

Ajouter au panier - Permet de dfinir un lien permettant l'utilisateur d'accder au panier e-commerce pour passer la commande ou d'insrer directement un produit indiqu parmi ceux acheter. Dans le premier cas, slectionnez l'option Afficher la lise de Produits de la catgorie slectionne et slectionnez la catgorie voulue dans le schma reproduisant tout le catalogue des produits. Dans le second cas, slectionnez l'option Ajouter le produit slectionn directement dans le chariot et slectionnez le produit dans la liste approprie. Par ailleurs, vous pouvez indiquer la variante et la quantit du produit qui sera insr dans le panier. Pour que les liens Afficher le panier et Ajouter au panier fonctionnent correctement, vous devez prcdemment crer le panier e-commerce l'aide des commandes de la section Panier virtuel e-commerce de l'tape 4 - Paramtres avancs.

Lien | Section Description

Les commandes de la section Description de la fentre Lien permettent d'associer une description au lien. Cette description est insre comme valeur de l'attribut <title> de l'lment <a> dans le code HTML et est utilise pour composer un commentaire, nomm "info-bulle" ou "Tip". L'info-bulle s'affiche quand vous pointez un lien et elle explique ce qui se passe si vous cliquez sur ce dernier : vous passerez une page ou un site diffrent, vous afficherez une image, vous lancerez le tlchargement d'un fichier, etc. Les commandes disponibles pour composer une info-bulle sont :

Texte : permet de dfinir un texte de description du lien. Image : permet de dfinir une image qui sera affiche dans l'info-bulle et qui
remplace ou accompagne la description du lien.

Largeur : permet de dfinir la largeur en pixels de l'info-bulle.

Comme les paramtres Texte, Image et Largeur changent d'un lien l'autre, il faut les dfinir au fur et mesure. Vous pouvez dfinir d'autres paramtres graphiques, relatifs l'aspect de l'info-bulle et donc communs tous, dans la fentre Styles et modles| Section Info-bulle de l'tape 4 - Paramtres avancs.

124

Fentre Couleur
Chaque fois que vous pouvez dfinir la couleur d'un lment, le programme propose l'option Couleur accompagne d'un bouton portant la couleur par dfaut ou celle dfinie prcdemment par l'utilisateur. Si vous cliquez sur le bouton situ prs de l'option Couleur, vous affichez un menu contenant une palette de 48 couleurs : pour slectionner la couleur voulue, cliquez sur celle-ci. En plus de la palette principale, la fentre prsente les lments suivants : Transparent : cette commande, propose seulement si l'opration est possible, permet de rendre invisible l'lment courant. Dernires couleurs : la ligne situe sous la palette principale propose les 8 dernires couleurs utilises. Autres couleurs... : cette commande permet d'ouvrir une autre fentre pour dfinir des couleurs personnalises. Compte-goutte (Pipette) : cet outil permet de reprendre la couleur de n'importe quel lment affich, mme l'extrieur de la fentre WebSite X5. Il suffit de cliquer sur l'outil compte-goutte et de maintenir enfonc le bouton droit de la souris jusqu' ce que le pointeur arrive sur la couleur que vous voulez "capturer".

Fentre Proprits de l'effet

Cette fentre prsente les commandes ncessaires pour dfinir un effet d'entre sur les images slectionnes de l'objet Diaporama, disponible dans l'diteur pour l'option Modifier le modle, et sur les images slectionnes de l'Objet de la galerie. Les commandes disponibles sont articules dans les sections suivantes :

Section Type d'effet Section Mouvement et Zoom Section Page

1. Section Type d'effet - Cette section permet de choisir le type d'effet en entre appliquer aux images sur lesquelles vous tes en train de travailler.

125

 Liste des effets : prsente la liste de tous les effets disponibles. Si vous slec-

tionnez la rubrique "1 - Alatoire" l'effet appliquer est automatiquement choisi de manire alatoire. Chaque fois que vous slectionnez un effet, le programme affiche un aperu dans la fentre approprie. l'image est affiche.

Heure d'affichage : permet de dfinir le temps (en secondes) durant lequel

2. Section Mouvement et Zoom - Cette section permet de dfinir le type de mouvement et d'agrandissement appliquer aux images sur lesquelles vous tes en train de travailler.

Position de dpart : permet de dfinir le facteur d'agrandissement et les coordonnes X et Y qui dfinissent la position initiale d'o part le mouvement de l'image.

Position finale : permet de dfinir le facteur d'agrandissement et les coordonnes X et Y qui dfinissent la position finale o termine le mouvement de l'image. Dans les deux cas, vous pouvez agir directement sur l'aperu pour le faire glisser dans la position voulue et dfinir ainsi les positions initiale et finale du mouvement. Sur cette image, vous pouvez aussi dfinir un effet en entre ou un effet prvoyant le mouvement et le zoom. Dans ce cas, le programme applique d'abord l'effet en entre et l'image est affiche selon les coordonnes et les dimensions dfinies pour la position initiale. Par consquent, il reproduit le dplacement, et ventuellement le redimensionnement, pour que l'image atteigne les coordonnes et les dimensions dfinies pour la position finale. 126

Seulement pour les images de l'objet Diaporama, disponible dans l'diteur pour la personnalisation de la Modification du modle, vous disposez des sections suivantes. 3. Section Page - Dans cette section, vous pouvez indiquer les pages du site o les images slectionnes du Diaporama doivent tre affiches. Pour cela, il suffit de cocher les pages voulues, directement sur le plan du site propos. Pour les messages publicitaires, par exemple, il est trs utile d'indiquer dans quelles pages d'un site vous voulez afficher certaines images d'un Diaporama. Le Diaporama permet de dfinir toutes les bannires utiliser dans le site et faire en sorte que seulement les messages pertinents soient affichs dans les pages ou les sections.

Fentre Tlcharger le fichier associ

Cette fentre est rappele l'aide du bouton Ajouter... relatif la composition de la liste des fichiers associs ou une Animation Flash (voir Objet Animation Flash| Section Avances) ou un code HTML (voir , Objet HTML et Widgets| Section Avances). Les commandes disponibles sont :

Fichier annexe tlcharger sur le serveur : permet de dfinir un fichier reli l'animation Flash sur laquelle vous tes en train de travailler. chier import, savoir reli l'objet, doit tre publi.

Chemin d'accs au serveur : permet d'indiquer le chemin du dossier o le fi Crer un lien entre le fichier et la Page (fichiers .js et .css seulement) : si le
fichier import est un fichier JavaScript (format .js) ou une feuille de Style (format .css), il doit tre reli la page pour fonctionner. Dans ces cas, si vous slectionnez cette option, le code ncessaire est automatiquement insr dans la section <HEAD> du code HTML de la page.

127

128

tape 4 . Paramtres avancs

129

Paramtres avancs
Aprs avoir dessin le plan du site l'tape 2 et cr chaque page en insrant tous les contenus ncessaires l'tape 3, vous pouvez passer l'tape 4 o est propose une srie de sections contenant de nombreuses fonctions avances. Vous pouvez ainsi dfinir le style des diffrents menus de navigation et des textes mais aussi crer des sections importantes du site comme le panier e-commerce, le blog ou la zone rserve. Dans le dtail, les fonctions avances disponibles sont : Menu principal Cette section permet de dfinir l'aspect graphique des rubriques du menu de premier niveau, savoir le menu qui est toujours visible en haut (structure menu horizontal) ou sur le ct (structure menu vertical) du site reprsentant la navigation fixe. Liste droulante Cette section permet de dfinir l'aspect graphique des rubriques du menu Popup qui apparat au passage de la souris sur une rubrique du menu principal. Menu de la page Cette section permet de dfinir l'aspect graphique du menu de la page, savoir le menu proposant la liste des pages du niveau courant. Styles et modles Cette section permet de dfinir les styles appliquer aux diffrents lments de texte prsents dans les pages, la fentre ShowBox lie l'Objet de la galerie, aux ToolTip pouvant tre associs aux Liens et aux courriels crs si vous utilisez l'Objet Formulaire d'envoi d'email ou si vous crez un Panier e-commerce. Page d'accueil Cette section permet de dfinir une page d'accueil qui introduit le site, en prvoyant une bande sonore et les liens ncessaires pour choisir la langue de consultation. Message publicitaire Cette section permet de dfinir et de personnaliser un message publicitaire qui sera affich seulement dans la page d'accueil ou sur toutes les pages du site, l'endroit indiqu. 130

Blog et Gestion des commentaires Cette section permet de crer et de grer un Blog, une sorte d'agenda sur le Web pour publier des nouvelles que les utilisateurs pourront commenter. Flux RSS Cette section permet de crer un Flux RSS, servant de canal d'informations constamment mis jour. Gestion de l'accs Cette section permet de crer les profils utilisateurs qui pourront accder aux pages protges du site et les grer en groupes. Les pages protges, dfinies dans l'tape 2 pendant la Cration du Plan, constituent une zone rserve laquelle les utilisateurs ne pourront accder qu'en effectuant la connexion : les donnes d'accs utilises dterminent quelles pages protges peuvent tre effectivement affiches. Panier virtuel e-commerce Cette section permet de crer et de grer un panier e-commerce, en dfinissant des aspects tels que : la liste des produits, les mthodes d'expdition et de paiement, la composition du formulaire remplir pour l'envoi de la commande.

Style du menu de premier niveau

Cette fentre propose les commandes permettant de dfinir certains paramtres avancs relatifs au style graphique des boutons servant afficher les rubriques de premier niveau du menu. Les menus sont crs et mis automatiquement jour par le programme en fonction du plan du site conu l'tape 2 - Cration du plan. Le menu principal prsente les rubriques de premier niveau du Plan composant la navigation fixe du site. Dans les sites menu horizontal, le menu principal est toujours visible, positionn immdiatement au-dessus ou au-dessous de l'en-tte. Dans les sites menu vertical, le menu principal est toujours visible, positionn dans une colonne gauche ou droite du contenu de la page. En fonction des paramtrages de style dfinis, WebSite X5 crera les boutons relatifs aux rubriques du menu principal selon l'un des modes suivants :

Bouton graphique : si vous gardez la forme rectangulaire, en choisissant une

couleur plate teinte unie, les boutons du menu sont crs comme texte et leur aspect est dfini travers les feuilles de style (CSS). Les boutons graphiques offrent l'avantage d'tre plus lgers lors du chargement et de l'affichage enligne. 131

 Bouton 3D : si vous choisissez une forme diffrente du rectangle et vous dfinis-

sez un style 3D, les boutons du menu sont crs comme image graphique, savoir le programme enregistre une image pour chaque bouton. Les boutons 3D offrent un plus grand choix de paramtrages graphiques et de polices.

Pratiquement
Aprs avoir dfini la structure du site en choisissant entre Menu horizontal ou Menu vertical (tape 1 - Slection du modle ou tape 1 - Modle personnalis) et avoir dessin le plan du site (tape 2 - Cration du plan), WebSite X5 est en mesure de crer le Menu et de permettre la navigation entre les pages. Accdez l'tape 4 Paramtres avancs et cliquez sur Style du menu de premier niveau pour personnaliser l'aspect du menu de navigation fixe. Les commandes ncessaires pour personnaliser les boutons sont organises dans les sections suivantes :

Section Gnral Section Style 3D Section lments de menu Style du menu de premier niveau | Section Gnral
Les options de la section Gnral de la fentre Style du menu de premier niveau permettent de dfinir certaines prdispositions gnrales du menu principal.

Les options disponibles dans le cadre Style sont :

Largeur : permet de dfinir la valeur en pixels de la largeur des boutons contenant les rubriques de menu.

Marge horizontale / Marge verticale : la marge est l'espace entre la bordure

du bouton et le texte qu'il contient. travers ces options vous pouvez dfinir l'espace horizontal et/ou vertical autour du texte l'intrieur du bouton.

132

 Distance entre les boutons : permet de dfinir la marge extrieure, savoir

l'espace situ entre deux boutons. Les options prsentes dans le cadre Texte sont :

Police : permet d'indiquer, dans la fentre rappele, le type de police, le style et

les dimensions du texte.

Alignement : permet de dfinir l'alignement du texte Gauche, au Centre ou

Droite par rapport au bouton.

Utiliser l'antialias pour afficher visualiser le texte : si vous slectionnez

cette option, vous appliquez un effet antialias au texte qui rend les contours moins dentels.

Enfin, le cadre Options propose :

Dfilement automatique du menu Vertical si vous slectionnez cette option,

le menu de navigation dfile automatiquement avec le contenu de la page et est toujours visible sur l'cran.

La largeur des boutons doit tre dfinie en considrant l'espace total disponible pour le menu : si vous n'utilisez pas un modle graphique prdfini, vous pouvez modifier ce paramtre votre gr (voir Modle personnalis).

Style du menu de premier niveau | Section lments de menu

Les options de la section lments de menu de la fentre Style du menu de premier niveau permettent de dfinir les couleurs, les images d'arrire-plan et le style des textes pour les diffrents tats des boutons du menu principal. Dans ce cas galement, vous devez tout d'abord slectionner l'lment de menu sur lequel vous voulez travailler : vous pouvez dfinir l'aspect de la lment de menu et celui de l' lment sur mouseover / Page courante. Pour slectionner l'lment du menu, vous pouvez soit utiliser la liste droulante soit agir directement sur l'image d'Aperu qui est constamment mise jour en fonction des modifications effectues. Pour les deux lments du menu, vous pouvez utiliser les options suivantes du cadre Style :

Couleur darrire-plan / Couleur texte / Couleur bordure : permettent de

dfinir, dans la fentre Couleur, la couleur de l'arrire-plan, du texte et de la bordure du bouton.

133

 Image d'arrire-plan : permet de dfinir l'image qui doit tre affiche comme

arrire-plan du bouton. Pour slectionner l'image utiliser, cliquez sur le bouton pour parcourir les ressources disponibles : vous pouvez utiliser des fichiers au format .JPG, .GIF, .PNG.

Style de police pour l'lment Rubrique Active, vous pouvez dfinir le style du

texte du bouton en choisissant parmi Aucun, Bas-relief, Haut-relief et Ombre. L'option lment sur mouseover / Page courante prend automatiquement la prdisposition dfinie pour l'option Rubrique Active : par ailleurs, vous pouvez ajouter l'un des styles suivants : Normal, Gras, Italique et Gras Italique.

Style du menu de premier niveau | Section Style 3D

Les commandes de la section Style 3D de la fentre Style du menu de premier niveau permettent de dfinir la forme et l'aspect 3D des boutons. l'aide des options du cadre Forme vous pouvez dfinir :

Forme : permet de dfinir la forme du bouton, en la choisissant parmi celles qui

sont proposes.

Arrondissement : permet de dfinir le facteur d'arrondissement sur les formes

de bouton qui prvoient des angles arrondis ou diffrents d'un rectangle.

Fusionner la forme des boutons : si vous slectionnez cette option, les boutons sont unis et la forme choisie est applique l'ensemble des boutons. Le cadre Style 3D dispose des options :

Style : permet de dfinir l'aspect du bouton comme Bomb, Plat, Bomb plat,
Creux, etc. ton. ton.

Direction de la lumire : permet de dfinir l'effet lumire dfini pour le bou Facteur dgrad permet de dfinir le facteur de dgrad appliquer au bou Transparence image permet de dfinir le facteur de transparence pour les
images insres sur les boutons du menu travers les options de la section lments de menu.

Enfin, le cadre Bordure 3D propose les options suivantes :

Bordure : permet de dfinir le style de la bordure du bouton comme Normal,

Bomb, Creux.

Epaisseur extrieure / Epaisseur intrieure : permettent, respectivement, de

dfinir l'paisseur externe et interne de la bordure du bouton. 134

 Bordure externe uniquement : si vous slectionnez cette option , la bordure

est dessine, en fonction des prdispositions dfinies, non pas pour chaque bouton mais pour tout le bloc des boutons considrs dans son ensemble.

Style de Menu droulant

Cette fentre propose les commandes permettant de dfinir certains paramtres avancs relatifs au style graphique des menus Popup. Les menus sont crs et mis automatiquement jour par le programme en fonction du plan du site conu l'tape 2 - Cration du plan. Les listes droulantes sont affiches au passage de la souris sur une rubrique du menu principal. Comme pour le menu principal, en fonction des paramtrages de style dfinis, WebSite X5 crera les boutons relatifs aux rubriques de la liste droulante soit comme Boutons graphiques soit comme Boutons 3D (voir Style du menu de premier niveau).

Pratiquement
Aprs avoir dfini la structure du site en choisissant entre le Menu horizontal ou le Menu vertical (tape 1 - Slection du modle ou tape 1 - Modle personnalis) et avoir dessin le plan du site (tape 2 - Cration du plan), WebSite X5 est en mesure de crer le menu et de permettre la navigation entre les pages. Accdez l'tape 4 Paramtres avancs et cliquez sur Style de menu droulant pour personnaliser l'aspect de ce menu. Les commandes ncessaires pour personnaliser les boutons sont organises dans les sections suivante :

Section Gnral Section Style 3D Section lments de menu Style de menu droulant | Section Gnral
Les options de la section Gnral de la fentre Style de menu droulant permettent de dfinir certains paramtrages gnraux. Vous devez dfinir tout d'abord le Type de menu en choisissant parmi : Organiser sur une colonne : toutes les rubriques de la liste droulante sont organises en une seule colonne, une aprs l'autre. Organiser sur plusieurs colonnes : les rubriques de la liste droulante sont organises en plusieurs colonnes cte cte. Le programme cre automatiquement une nouvelle colonne quand : - le nombre de rubriques dpasse la valeur dfinie pour l'option Elments max. par Colonne ; 135

- la liste des pages est interrompue par un sparateur (voir Crer le plan du site). Par ailleurs, si dans la fentre Slection du modle ou Modle personnalis vous avez dfini le Menu vertical, vous disposez aussi de : Accordon vertical : toutes les rubriques de la liste droulante sont organises en une seule colonne ; quand l'utilisateur clique sur une rubrique, toutes les rubriques suivantes se dplacent vers le bas pour afficher les sousrubriques associes.

Aprs avoir choisi le Type de menu, vous pouvez dfinir les options proposes dans le cadre Style :

Largeur permet de dfinir la valeur en pixels de la largeur des boutons contenant les rubriques de menu.

Marge horizontale / Marge verticale : la marge est l'espace entre la bordure

du bouton et le texte qu'il contient. travers ces options vous pouvez dfinir l'espace horizontal et/ou vertical autour du texte l'intrieur du bouton.

lments max. par colonne : active seulement pour le type de menu Organi-

ser sur plusieurs colonnes, elle permet de dfinir le nombre maximum d'lments pouvant tre contenus dans chaque colonne de la liste droulante.

Les options prsentes dans le cadre Texte sont :

Police : permet d'indiquer, dans la fentre rappele, le type de police, le style et

les dimensions du texte.

Alignement : permet de dfinir l'alignement du texte Gauche, au Centre ou

Droite par rapport au bouton. Enfin, le cadre Options propose :

Effet : permet de dfinir l'effet d'affichage pour la liste droulante, en choisissant

parmi Aucun, Fondu, Rebond suprieur, Rebond gauche, Rebond suprieur gauche. 136

Style de menu droulant | Section lments de menu

Les options de la section lments de menu de la fentre Style de menu droulant permettent de dfinir les couleurs, les images d'arrire-plan et le style des textes pour les diffrents tats des boutons de la liste droulante. Dans ce cas galement, vous devez tout d'abord slectionner l'lment de menu sur lequel vous voulez travailler : vous pouvez dfinir l'aspect de la lment de menu, de l' lment sur mouseover et du Sparateur. Pour slectionner l'lment du menu, vous pouvez soit utiliser la liste droulante soit agir directement sur l'image d'Aperu qui est constamment mise jour en fonction des modifications effectues. Pour les lments du menu, vous pouvez utiliser les options suivantes du cadre Style :

Couleur darrire-plan / Couleur texte / Couleur bordure : permettent de

dfinir, dans la fentre Couleur, la couleur de l'arrire-plan, du texte et de la bordure du bouton. Pour l'lment Sparateur vous disposez seulement de la commande Couleur texte.

Image d'arrire-plan : pour les lments lment de menu et lment sur mouseover, elle permet de dfinir l'image qui doit tre affiche comme arrire-plan du bouton. Pour slectionner l'image utiliser, cliquez sur le bouton pour parcourir les ressources disponibles : vous pouvez utiliser des fichiers au format .JPG, .GIF, .PNG.

Style de police pour les lment sur mouseover et Sparateur, elle permet de Icne de puce : permet de dfinir l'image qui doit tre utilise comme liste
puce en regard des rubriques des boutons ou des sparateurs insrs. Dans ce cas galement, cliquez sur le bouton .JPG, .GIF, .PNG. et slectionnez un fichier au format

dfinir le style du texte en choisissant parmi Normal, Gras, Italique et Gras Italique.

Style de menu droulant| Section Style 3D

Les commandes de la section Style 3D de la fentre Style de menu droulant permettent de dfinir la forme et l'aspect 3D des boutons. l'aide des options du cadre Forme vous pouvez dfinir :

Forme : permet de dfinir la forme du bouton, en la choisissant parmi celles qui

sont proposes.

137

 Arrondissement : permet de dfinir le facteur d'arrondissement sur les formes

de bouton qui prvoient des angles arrondis ou diffrents d'un rectangle.

Fusionner la forme des boutons : si vous slectionnez cette option, les boutons sont unis et la forme choisie est applique l'ensemble des boutons. Le cadre Style 3D dispose des options :

Aspect : permet de dfinir laspect du Bouton comme Bomb, Plat, Bomb- plat,
creux, etc.

Direction de la lumire : permet de dfinir l'effet lumire dfini pour le bouton. Facteur dgrad : permet de dfinir le facteur de dgrad appliquer au bouton. Transparence image : permet de dfinir le facteur de transparence pour les

images insres sur les boutons du menu travers les options de la section lments de menu.

Enfin, le cadre Bordure 3D propose les options suivantes :

Bordure permet de dfinir le style de la bordure du bouton comme Normal,

Bomb, Creux.

Epaisseur extrieure / Epaisseur intrieure : permettent, respectivement, de

dfinir l'paisseur externe et interne de la bordure du bouton.

Bordure externe uniquement : si vous slectionnez cette option, la bordure

est dessine, en fonction des prdispositions dfinies, non pas pour chaque bouton mais pour tout le bloc des boutons considrs dans son ensemble.

Style du menu de la page

Cette fentre propose les commandes permettant de dfinir certains paramtres avancs relatifs au style graphique des boutons du menu de la page. Les menus sont crs et mis automatiquement jour par le programme en fonction du plan du site conu l'tape 2 - Cration du plan. Les menus de la page sont ceux qui peuvent tre affichs en option pour proposer la liste des pages du niveau courant. En d'autres mots, si vous ouvrez une page qui appartient un niveau et que ce niveau contient d'autres pages, le menu de la page propose la liste de toutes les pages de ce niveau. Les menus de la page sont toujours proposs comme menus verticaux, positionns droite ou gauche des contenus de page. Comme pour le menu de premier niveau, en fonction des paramtrages de style dfinis, WebSite X5 crera les boutons relatifs aux rubriques du menu de la page soit comme Boutons graphiques soit comme Boutons 3D (voir Style du menu de premier niveau). 138

Pratiquement
Aprs avoir dfini la structure du site en choisissant entre Menu horizontal ou Menu vertical (tape 1 - Slection du modle ou tape 1 - Modle personnalis) et avoir dessin le plan du site (tape 2 - Cration du plan), WebSite X5 est en mesure de crer le Menu et de permettre la navigation entre les pages. Accdez l'tape 4 Paramtres avancs et cliquez sur Style du menu de la page pour personnaliser l'aspect de ce menu. Les commandes ncessaires pour personnaliser les boutons sont organises dans les sections suivantes :

Section Gnral Section lments de menu Style du menu de la page | Section Gnral
Les options de la section Gnral de la fentre Style du menu de la page permettent de dfinir certains paramtres gnraux du menu de page. Tout d'abord, si vous voulez afficher un menu de la page contenant la liste des pages du niveau courant, slectionnez l'option Afficher le menu de la page. ce stade, vous pouvez agir sur les options du cadre Style :

Position menu : permet d'indiquer si le menu de la page doit tre affich sur le
ct droit ou gauche de la page. nu de la page.

Largeur : permet de dfinir la largeur en pixels des boutons composant le me Marge horizontale / Marge verticale : la marge est l'espace entre la bordure
du bouton et le texte qu'il contient. travers ces options vous pouvez dfinir l'espace horizontal et/ou vertical autour du texte l'intrieur du bouton. l'espace situ entre deux boutons.

Distance entre les boutons : permet de dfinir la marge extrieure, savoir

Les options prsentes dans le cadre Texte sont :

Police : permet d'indiquer, dans la fentre rappele, le type de police, le style et

les dimensions du texte.

Alignement : permet de dfinir l'alignement du texte Gauche, au Centre ou

Droite par rapport au bouton. Enfin, le cadre Bordure propose les options suivantes :

Couleur bordure permet de dfinir, dans la fentre Couleur, la couleur de la

bordure du bouton. 139

 Epaisseur permet de dfinir l'paisseur de la bordure du bouton. Style du menu de la page| Section lments de menu
Les options de la section lments de menu de la fentre Style du menu de la page permettent de dfinir certains paramtres graphiques pour dfinir l'aspect des rubriques du menu de la page. Dans ce cas galement, vous devez tout d'abord slectionner l'lment de menu sur lequel vous voulez travailler : vous pouvez dfinir l'aspect de la lment de menu, de l' lment sur mouseover / Page courante, du Sparateur et du Sparateur de lignes. Pour slectionner l'lment du menu, vous pouvez soit utiliser la liste droulante soit agir directement sur l'image d'Aperu qui est constamment mise jour en fonction des modifications effectues.

Couleur darrire-plan / Couleur texte / Couleur de ligne : permettent de

dfinir, dans la fentre Couleur, la couleur de l'arrire-plan et du texte de la lment de menu, de l'lment sur mouseover / Page courante et du Sparateur, ainsi que la couleur de la ligne pour le Sparateur de ligne. Page courante et Sparateur, permet de dfinir l'image (fichier au format .JPG, .GIF, .PNG) qui doit prcder les rubriques du menu de la page, comme s'il s'agissant d'une liste puce.

Icne de puce : disponible pour la lment de menu, lment sur mouseover /

Style de police pour les options lment sur mouseover / Page courante et Sparateur permet de dfinir le style du texte du bouton en choisissant parmi Normal, Gras, Italique et Gras Italique.

Style de ligne : disponible seulement pour le Sparateur de lignes permet de

dfinir le type de ligne en choisissant parmi Solide, En tirets, Point, Bas-relief, Haut-relief.

Styles et modles
Cette fentre prsente les commandes permettant de dfinir les styles appliquer aux diffrents lments de texte prsents dans les pages, la Bote d'affichage lie aux lments comme Objet de la galerie et Objet Liste des produits, aux info-bulles pouvant tre associes aux Liens et aux emails crs avec l'Objet Formulaire d'envoi d'email ou si vous crez un Panier e-commerce. En gnral, un style peut tre dfini comme un ensemble de caractristiques de formatage du texte et graphique pouvant tre appliques un lment pour modifier son aspect. L'application d'un style permet donc d'associer plusieurs formats simultanment travers une seule opration. 140

Pratiquement
Aprs avoir dessin le plan du site (tape 2 - Cration du plan) et insr les contenus des pages (tape 3 - Cration des pages), vous pouvez accder l'tape 4 - Paramtres avancs et dfinir les styles pour personnaliser l'aspect de certains lments rptitifs du site. Les diffrentes options sont regroupes dans des sections appropries :

Section Textes Section Bote d'affichage Styles et modles| Section Textes

Section Info-bulle Section E-mail

Les commandes de la section Textes de la fentre Styles et modles permettent de dfinir les styles disponibles pour les textes prsents dans le site. Tout d'abord, vous devez choisir l'lment de page dont vous voulez dfinir le style, en le slectionnant dans la liste droulante ; vous pouvez galement cliquer directement sur son Aperu. Dans le dtail, les lments de page auxquels vous pouvez appliquer un style sont : Titre de la page : il s'agit du titre des pages du site. Il est pris dans le nom donn aux pages lors de la phase de construction du plan dans la fentre Cration du plan ou, s'il est spcifi diffremment, dans le Titre complet de la fentre Proprits de page. Chemin de la page : il s'agit du texte situ sous le titre de la page qui permet de reconstruire le chemin logique (navigation par miettes de pain) conduisant cette page. Le chemin logique est automatiquement recr par le programme. Texte de la page : c'est le texte des paragraphes insrs travers l'Objet texte. Le style de cet lment est appliqu par dfaut quand vous ouvrez l'diteur relatif l'Objet texte : grce aux commandes fournies par l'diteur, vous pouvez effectuer d'autres modifications et d'autres personnalisations. Le style dfini pour ce type d'lment est appliqu tous les textes crs et insrs automatiquement par le programme comme, par exemple, les pages de la Zone rserve, du Blog, du Moteur de recherche interne et du Plan du site. Lien actif / Lien au passage de la souris / Lien cliqu : ce sont les liens hypertextuels crs travers l'Objet texte. Un lien peut avoir un aspect diffrent selon son tat : actif, au passage de la souris (effet mouseover) ou cliqu. Distinguer visuellement un lien actif d'un lien dj cliqu simplifie la navigation de l'utilisateur, en lui rappelant les sections qu'il a dj explor Menu de pied de page : c'est le menu, situ au bas de chaque page, proposant les options du menu de premier niveau. 141

Aprs avoir slectionn l'lment de page, vous pouvez modifier son style l'aide des options du cadre Style :

Afficher : si vous slectionnez cette option, vous pouvez faire en sorte que

l'lment de page soit visible ou non. Cette option, bien videmment, n'est pas disponible pour le Texte de la page et les diffrents tats du Lien qui ne peuvent pas tre invisibles. Il est important de souligner que rendre un lment de la page invisible ne signifie pas le supprimer du code de la page : vous pouvez, par exemple, rendre invisible le Titre de la page car vous prfrez utiliser une image mais, dans ce cas galement, le tag <title> ne sera pas supprim du code HTML. fentre Couleur, la couleur de l'arrire-plan et du texte de l'lment de page slectionn. Pour le Texte de la page, vous ne pouvez pas dfinir la couleur de l'arrire-plan car elle est dfinie en fonction du modle choisi (voir Slection du modle ou Modle personnalis) et/ou de l'Aspect de la cellule o est insr l'Objet texte. texte.

Couleur darrire-plan / Couleur de texte : permettent d'indiquer, dans la

Police permet de dfinir le type de police, le style et la dimension en points du Alignement : permet d'indiquer l'alignement de l'lment de page, en choisissant parmi Gauche, Centre et Droite. Cette option n'est pas disponible pour les diffrents tats du Lien car l'alignement des liens hypertextuels est dfini, quel que soit le style, lors de la cration de l'Objet texte. dfinir le style du texte comme Normal ou Soulign.

Style de textes : disponible pour le Lien dans ses diffrents tats, permet de Pointeur disponible seulement pour le Lien actif, mais il est automatiquement
hrit par les deux autres tats du lien, il permet d'indiquer l'aspect du pointeur de la souris lors du passage sur le lien. Si vous cliquez sur lectionner le fichier .CUR, .ICO utiliser. vous pouvez s-

Bordure suprieure / Bordure infrieure : permet d'indiquer, dans la fentre

Couleur, la couleur de la bordure suprieure et/ou infrieure qui peut tre ajoute au Titre de la page, au Chemin de la page et au Menu de bas de page.

Styles et modles| Section Bote d'affichage

Les commandes de la section Bote d'affichage de la fentre Styles et modles permettent de dfinir le style de la Bote d'affichage utilise dans les Galeries en JavaScript (voir Objet de la galerie), dans le Lien Galerie Showbox (voir Lien| Section Action) et dans l'Objet Liste des produits. La Bote d'affichage, qui s'ouvre en cliquant sur un lien, sert afficher une image agrandie, un vido ou une squence entire d'images : quand vous cliquez sur le lien, la fentre du navigateur devient fonce 142

pour mettre en vidence la Bote d'affichage qui est superpose selon l'effet d'entre choisi.

Les options disponibles dans la section Style sont :

Aspect : permet de dfinir un effet d'entre pour la Bote d'affichage en choisissant parmi Aucun, Fondu et Dplacer du haut.

Couleur de l'arrire-plan externe / Couleur de l'arrire-plan interne :

permettent de dfinir, dans la fentre Couleur, la couleur de l'arrire-plan externe et/ou interne la Bote d'affichage. La couleur de l'arrire-plan externe est celle qui devient semi-transparente (selon la valeur dfinie pour l'option Opacit Arrire-plan) et est utilise pour foncer la fentre du navigateur. plan externe la Bote d'affichage. Plus la valeur d'opacit est leve, moins la fentre du navigateur situe au-dessous sera visible. ombre sera affiche seulement sur les navigateurs qui supportent CSS3.

Opacit de l'arrire-plan : permet de dfinir la valeur d'opacit de l'arrire Afficher ombre : permet d'ajouter une ombre la Bote d'affichage. Cette
Le cadre Bordure propose les options suivantes :

Couleur bordure : permet de dfinir, dans la fentre Couleur, la couleur de la

bordure de la Bote d'affichage.

Epaisseur : permet de dfinir l'paisseur de la bordure de la Bote d'affichage.

Enfin, les options prsentes dans le cadre Texte sont :

Police : permet d'indiquer, dans la fentre rappele, le type de police, le style et

les dimensions du texte de la Bote d'affichage. Droite par rapport la Bote d'affichage. de la Bote d'affichage.

Alignement : permet de dfinir l'alignement du texte Gauche, au Centre ou Couleur de texte permet de dfinir la couleur du texte dans la fentre Couleur
143

Styles et modles| Section Info-bulle

Les commandes de la section Info-bulle de la fentre Styles et modles permettent de dfinir le style appliquer aux info-bulles associes aux liens insrs sur les textes ou les images travers la commande Insrer lien. L'info-bulle est un bref texte d'aide, affich dans une bote lors du passage de la souris sur un lien : sa fonction est d'offrir une explication sur ce qui se passera en cliquant. Pour dfinir l'aspect de l'info-bulle vous pouvez, en premier lieu, utiliser les options prsentes dans le cadre Style :

Position : permet d'indiquer la position des info-bulles par rapport au lien auquel elles sont associes, en choisissant parmi Haut, Bas, Gauche et Droite. d'entre comme fondu ou Altern. de l'arrire-plan des info-bulles. tre arrondis.

Aspect : permet de choisir si les info-bulles doivent tre affiches avec un effet Couleur d'arrire-plan : permet d'indiquer, dans la fentre Couleur, la couleur Arrondissement : permet de dfinir combien les angles des info-bulles doivent Afficher ombre : permet de dfinir une ombre autour du profil des info-bulles. Afficher l'aileron : permet d'ajouter la bulle des info-bulles une flche pointant vers le lien auxquels elles sont associes. Le cadre Bordure propose les options suivantes :

Couleur bordure permet de dfinir, dans la fentre Couleur, la couleur de la

bordure des info-bulles.

Epaisseur : permet de dfinir l'paisseur de la bordure des info-bulles.

Enfin, les options prsentes dans le cadre Texte sont :

Police : permet d'indiquer, dans la fentre rappele, le type de police, le style et

les dimensions du texte des info-bulles. Droite par rapport l'info-bulle. des info-bulles.

Alignement : permet de dfinir l'alignement du texte Gauche, au Centre ou Couleur de texte : permet de dfinir la couleur du texte dans la fentre Couleur
Comme les paramtres de style sont valides pour tout le projet, toutes les info-bulles auront le mme aspect graphique. Pour dfinir le contenu (texte et image) de chaque info-bulle, utilisez la section Description de la fentre Lien. 144

Styles et modles| Section E-mail

Les commandes de la section E-mail de la fentre Styles et modles permettent de dfinir le style des emails crs par l'Objet Formulaire d'envoi d'email ou le Panier e-commerce. Tout d'abord, vous devez slectionner l'lment de courriel dont vous voulez dfinir le style en le slectionnant dans la liste droulante, pouvez galement cliquer directement sur son Aperu. Dans le dtail, les lments de l'e-mail auxquels vous pouvez appliquer un style sont : Mise en page du message : les emails crs par le programme ont une structure identique qui prvoit un cadre externe d'arrire-plan et un corps central avec le message. Entre le chssis externe et le corps central, vous pouvez prvoir une bordure qui spare ou cre une profondeur et une paisseur. Image/Logo socit : c'est une image que vous pouvez ajouter dans l'entte de l'email. Vous pouvez choisir le logo de l'entreprise ou une bannire qui occupe toute la largeur de l'email. Contenu du message : c'est le corps de l'email contenant le message. Note de pied de page : ce sont les remarques de fermeture de l'email qui contiennent, en gnral, un message standard ; elles se distinguent visuellement du corps du message car leur taille de police est plus petite.

Selon l'lment de courriel slectionn, vous pouvez agir sur les diffrentes options de la section Style : Mise en page du message :

Couleur de l'arrire-plan externe / Couleur de l'arrire-plan interne : permettent d'indiquer, dans la fentre Couleur, la couleur de l'arrire-plan externe, savoir du cadre, et de l'arrire-plan interne, savoir du corps central de l'email.

145

 Couleur bordure / Epaisseur permettent, respecti-

vement, d'indiquer la couleur et l'paisseur de la bordure qui spare le cadre externe du corps de l'email. dans l'en-tte de l'email. Il suffit de cliquer sur pour slectionner le fichier graphique au format .JPG, .GIF ou .PNG importer.

Image/ Logo socit :

Fichier image permet de slectionner l'image insrer

Alignement permet d'indiquer l'alignement de l'image

insre, en choisissant parmi Gauche, Centre et Droite.

Position : permet d'indiquer si l'image insre doit tre

positionne l'intrieur ou en dehors du cadre relatif au corps de l'email. de l'image et permet de la modifier librement. La largeur maximum des images est de 700 pixels et dpend de la structure de l'email. Ce paramtre garantit un bon affichage de la part de tous les clients courriel Couleur, la couleur du texte du message de l'email.

Largeur indique automatiquement la largeur originale

Contenu du message :

Couleur de texte permet d'indiquer, dans la fentre Police permet de dfinir le type de police, le style et la
dimension en points du texte du message de l'email.

Note de pied de page :

Couleur de texte : permet d'indiquer, dans la fentre Police : permet de dfinir le type de police, le style et la

Couleur, la couleur du texte des remarques figurant au bas de l'email. dimension en points du texte des remarques indiques au bas de l'email. de pied de page, en choisissant entre Gauche, Centre et Droite. page doivent tre positionnes l'Intrieur ou En dehors du cadre relatif au corps de l'email. de pied de page. Par dfaut, le programme propose un texte sur la confidentialit du message.

Alignement : permet d'indiquer l'alignement des Notes

Position : permet d'indiquer si les Notes de pied de Texte permet de composer le texte composant la Note

146

Page de Bienvenue
Cette fentre propose les commandes permettant de crer une page d'introduction au site et de la prdisposer pour la consultation en plusieurs langues. Tel que l'indique son nom, la Page de Bienvenue est une sorte de couverture initiale du site : en gnral, elle prsente une image, un vido ou une animation Flash, et elle permet d'accder la vritable Page d'accueil au terme du dlai programm ou du clic sur le lien. Si ncessaire, cette page d'introduction peut aussi proposer les liens permettant de choisir la langue de consultation du site.

Pratiquement - Page de Bienvenue

Comme la Page de bienvenue est un lment facultatif d'un site, pour l'insrer il faut tout d'abord slectionner l'option Afficher la Page de bienvenue. Si elle est prsente, la Page de bienvenue est la premire s'afficher et au terme du dlai programm ou du clic sur un lien, le programme affiche la Page d'accueil du site. Vous pouvez composer la Page de Bienvenue en dfinissant l'arrire-plan et le contenu, mais aussi une ventuelle bande sonore. Les options du cadre Arrire-plan de la page sont :

Couleur d'arrire-plan : permet

d'indiquer, dans la fentre Couleur, la couleur d'arrire-plan de la Page de Bienvenue.

Fichier image : permet de dfinir le

fichier graphique (au format .JPG, .GIF, .PNG) utiliser comme arrireplan de la Page de Bienvenue. faut rpter ou non l'image utilise comme arrire-plan de la cellule. L'image peut tre rpte horizontalement, verticalement ou dans les deux sens pour remplir tout l'espace disponible. Par ailleurs, vous pouvez adapter l'image, savoir la redimensionner pour qu'elle couvre tout l'arrire-plan : dans ce cas, les proportions d'origine ne sont pas respectes. gateur.

Disposition : permet de dfinir s'il

Alignement : permet de choisir l'alignement de l'image sur la fentre du navi147

Les options du cadre Contenu de la page sont :

Type : permet d'indiquer le type de contenu insrer dans la Page de Bienvenue, en choisissant parmi Image, Animation Flash, Vido et Code HTML.

Fichier : si vous choisissez comme Type de contenu l'Image, l'Animation Flash

ou le Vido, vous pouvez dfinir le fichier graphique (au format .JPG, .GIF, .PNG), le fichier Animation Flash (au format .SWF) ou le fichier Vido (au format .FLV, .MP4) utiliser. entrer le code insrer dans la Page de Bienvenue.

Code HTML si vous choisissez comme Type de contenu Code HTML, vous devez Largeur / Hauteur : permettent d'indiquer la largeur et la hauteur en pixels de
l'image, de l'animation Flash, du vido ou du code HTML insrs. Enfin, le cadre Options contient les options suivantes :

Son l'ouverture : permet de dfinir le fichier audio (au format .MP3) utiliser comme fond musical lors de l'affichage de la Page de Bienvenue.

Ouvrir la page d'accueil aprs : si vous slectionnez cette option, vous devez

indiquer le nombre de secondes durant lesquelles la Page de Bienvenue sera affiche. Au terme de ce dlai, la Page d'accueil est automatiquement affiche.

Langue de consultation - Pratiquement

Si le site peut tre consult en plusieurs langues, pour permettre l'utilisateur de slectionner la langue voulue travers les boutons insrs dans la page de Bienvenue, vous devez tout d'abord slectionner l'option Afficher les liens vers d'autres langues. Dans le cadre Liste de langues, vous devez composer la liste des langues disponibles. Par dfaut, le programme propose une liste compose de 5 langues que vous pouvez modifier librement l'aide des commandes disponibles :

Ajouter / Supprimer... : permettent

de composer la liste des langues de consultation respectivement en ajoutant une nouvelle Langue (dans la fentre Slection des langues) ou en supprimant une langue dj insre. la liste, en dplaant vers le haut ou le bas la langue slectionne.

En haut / En bas : permettent de modifier l'ordre des langues prsentes dans Prslection : permet de dfinir la langue slectionne dans la Liste de langues
148

comme "prdfinie". La langue "prdfinie" est celle laquelle on accde immdiatement avant de choisir la langue de consultation prfre. Le site ayant une langue prdfinie est le seul prsentant la Page de Bienvenue.

Modifier : permet de rappeler la fentre Slection des langues pour modifier les
paramtres dfinis pour la langue slectionne parmi celles dj insres dans la liste.

Vous disposez aussi de l'option :

Excuter le lien dans une nouvelle fentre : si vous slectionnez cette option,

le site est ouvert dans une nouvelle fentre du navigateur, diffrente de celle o est dj ouverte la Page de Bienvenue.

La fentre Slection des langues prsentes les options suivantes :

Nom de la langue afficher : permet d'insrer le nom de la langue qui sera

disponible. Si vous cliquez sur la flche situe ct du champ, vous ouvrez une liste droulante permettant de slectionner la langue voulue ; vous pouvez galement taper directement le nom de la langue. drapeau) : permet de dfinir le fichier graphique utiliser pour crer le bouton associ la langue. Si vous cliquez sur pouvez slectionner le fichier .JPG, .GIF ou .PNG utiliser, par exemple, pour crer un bouton avec l'image du drapeau relatif la Langue. Si vous n'associez aucune image, au lieu du bouton graphique, le programme cre automatiquement un lien textuel portant le Nom de la langue comme texte et il dfinit la couleur qui contraste le mieux avec celle de l'arrireplan de la page.

Fichier image pour la langue (ex :

Chemin d'accs au serveur ou URL du site Web de cette langue : permet

d'indiquer le nom du sous-dossier sur le serveur o sera publi le site relatif la langue sur laquelle vous tes en train de travailler, par exemple "En" pour le site en anglais. Vous pouvez galement taper l'URL complte du site que vous voulez associer, par exemple "http ://www.miosito.com/en/index.html". Si vous travaillez sur la langue dfinie comme Prdfinie, vous ne pouvez pas indiquer une URL pour la publication mais seulement un sous-dossier sur le serveur. 149

 Affiche cette langue mais indique qu'elle n'est pas encore disponible : si

vous slectionnez cette option, vous pouvez prvoir une langue de consultation dont la version relative du site n'a pas encore t cre et/ou publie. Si vous cliquez sur le bouton (ou le lien textuel) relatif cette langue, l'utilisateur recevra automatiquement un message l'informant que la langue requise n'est pas encore disponible. Mme si la fentre de la page de Bienvenue parle explicitement de langues, vous pouvez exploiter cette situation pour permettre l'utilisateur de choisir non seulement une langue de consultation mais, plus en gnral, diffrentes versions du site. Par exemple, vous pouvez dfinir le choix entre "version HTML / version Flash" ou entre "version convenant aux mineurs / version adresse seulement aux adultes".

Message publicitaire
Cette fentre prsente les commandes permettant de prdisposer un message publicitaire sur la page d'accueil ou toutes les pages du Site. Le message publicitaire peut tre cr comme une image ou une animation flash affiche un endroit dtermin de la page contenant un lien vers une Landing Page (ou page de destination). Bien videmment la Landing Page, qui est une page interne du site, doit tre conue pour convaincre l'utilisateur mener bien l'action voulue : remplir un formulaire, effectuer un achat, etc.

Pratiquement
Pour insrer un message publicitaire , vous devez tout d'abord activer l'option Afficher le message publicitaire. Vous pouvez choisir le Type de message dfinir en slectionnant l'une des options suivantes : Afficher les annonces dans le coin suprieur droit : elle correspond l'effet nomm PagePeel, en positionnant la souris en haut droite de la page, on dcouvre le message publicitaire prcdemment masqu. Afficher les annonces dans une case : le message publicitaire est insr dans une case affiche un endroit dtermin de la fentre du navigateur en surimpression sur le contenu de la page. Afficher les annonces dans une barre horizontale : le message publicitaire est propos dans une barre horizontale affiche au sommet de la fentre du navigateur, avant le contenu rel de la page, ou sur l'arrire-plan de la fentre du navigateur, en surimpression sur le contenu de la page.

150

Quel que soit le Type de message slectionn, vous pouvez utiliser l'option de la bote Paramtres :

Fichier image/animation : permet de spcifier le fichier graphique (au format

.JPG, .GIF, .PNG) ou le fichier de l'animation Flash (au format .SWF) contenant le message publicitaire voulu.

L'option Afficher les annonces dans le coin suprieur droit dispose des options suivantes :

Style : permet de choisir, en plus de l'effet classique du coin de la page plie

(PagePeel), d'autres animations thmes. De toute faon, le fonctionnement de l'effet ne change pas : quand la souris glisse sur l'animation, l'utilisateur ouvre le message publicitaire relatif. la hauteur de la zone devant accueillir le message publicitaire.

Largeur/hauteur : permet d'indiquer la valeur en pixels relative la largeur et

L'option Afficher les annonces dans une case dispose des options suivantes :

Position : permet d'tablir la position o sera affich le message publicitaire

l'intrieur de la fentre du navigateur. Vous pouvez le positionner au Centre, en Haut Gauche, en Haut Droite, en Bas Gauche et en Bas Droite. vers le bas, Balayage vers le haut, Balayage vers la droite, Balayage vers la gauche.

Effet : permet de dfinir l'un des effets d'affichage suivants Fondu, Balayage Afficher ce message seulement une fois : si cette option est active, le message publicitaire n'est affich qu'une fois, la premire ouverture d'une page du site. Quand vous ouvrirez une nouvelle session de navigation, le message publicitaire sera de nouveau propos.

Pour finir, l'option Afficher les annonces dans une barre horizontale dispose des options suivantes :

Position : permet de dfinir si la barre contenant le message publicitaire doit

tre affiche en haut avant les contenus de la page , ou au fond en surimpression. leur d'arrire-plan de la barre horizontale contenant le message publicitaire.

Couleur d'arrire-plan : permet de dfinir, travers la fentre Couleur, la cou Afficher ce message seulement une fois : si cette option est active, le message publicitaire n'est affich qu'une fois, la premire ouverture d'une page du site. Quand vous ouvrirez une nouvelle session de navigation, le message publicitaire sera de nouveau propos. 151

Voici les options contenues dans la case Options communes tous les types de message :

Son l'ouverture : permet de dfinir le fichier audio (au format .MP3) repro Page lie : permet de dfinir la page (Landing Page) qui sera lie au message
publicitaire, en la slectionnant directement dans le plan du site rappel l'aide du bouton . duire pendant l'affichage du message publicitaire.

Qu'est-ce qu'une Landing page ? La Landing Page est la page qui accueille le visiteur, elle s'affiche parce qu'elle est lie, par exemple, un lien ou une bannire publicitaire. Tel que l'indique son nom, c'est la page o l'utilisateur "atterre", elle doit donc tre construite de sorte qu'il trouve immdiatement les informations voulues, lui vitant ainsi de naviguer dans le site pour les rechercher. Le mcanisme peut tre expliqu par un exemple : supposons que vous vouliez publier une bannire pour faire la rclame d'un produit. Les informations vhicules par la bannire sont peu nombreuses et essentielles, mais vous pouvez dfinir un lien pour guider l'utilisateur vers votre site. Dans ce cas, il ne convient pas de crer un lien vers la Page d'accueil de votre site : celle-ci est trop gnrale et obligerez l'utilisateur entreprendre une navigation interne avant de trouver les informations ncessaires sur le produit et la procdure suivre pour l'acheter. Vous risquez ainsi de perdre un client potentiel. La meilleure solution est de construire une page spcifique l'aspect simple et fonctionnel o figurent toutes les informations sur le produit indiqu dans la bannire y compris la procdure d'achat. Trs souvent, il faut construire expressment une page de ce type mais si elle est bien conue, elle guide vers l'objectif voulu (par exemple, l'achat du produit) l'utilisateur qui a t attir par le message publicitaire. Enfin, la case Mode d'affichage dispose des options suivantes :

Montrer uniquement dans la page d'accueil / Montrer dans toutes les

pages du site : permettent de dfinir quel endroit doit tre affich le message publicitaire, uniquement dans la page d'accueil ou dans toutes les pages du site.

152

Blog
Cette fentre propose les outils et les options ncessaires pour crer un Blog et grer les commentaires laisss ventuellement par les utilisateurs comme rponse aux Articles publis. Le Blog est un genre d'agenda Internet o l'auteur raconte ce qu'il veut travers une srie d'articles (ou Post) publis avec une frquence et une rgularit variables. Aprs la publication, le Blog cr avec WebSite X5 reprsente une section individuelle du site principal et il est automatiquement ajout dans le Plan sous le dossier Pages spciales (voir Cration du plan). Pour insrer la rubrique "Blog" dans le Menu de navigation, vous devez crer un alias de la page spciale en la slectionnant et la faisant glisser dans le dossier Menu. Comme le Blog fait partie intgrante du site web, il a le mme graphique et reprend automatiquement le modle graphique dfini. Le Blog cr est publi l'URL www.monsite.fr/blog o www.monsite.fr est l'URL du site auquel il est reli. La page principale du Blog montre la liste de tous les Articles (ou Post) publis, rangs dans l'ordre chronologique en partant du plus rcent. Pour tous les articles, vous verrez le titre, le nom de l'auteur, la catgorie, la date et l'heure de publication, la description brve et le lien "Lire tout". Pour le premier article seulement, au lieu de la description brve, vous verrez le contenu entier. Le lien "Lire tout" mne une page consacre entirement un post : dans ce cas, le programme affiche tout l'article suivi de la liste des commentaires dj publis et du formulaire que les lecteurs peuvent utiliser pour envoyer un nouveau commentaire. Hormis les contenus individuels, toutes les pages du Blog prsentent une structure analogue qui prvoit une colonne, place droite, prsentant des outils comme : la section avec les articles rcents, les archives par mois ou catgories, les nuages. Selon vos exigences, vous pouvez personnaliser cette colonne et dcider quels seront les outils disponibles et leur ordre de prsentation. Enfin, nous avons dj dit qu'une des caractristiques du Blog est de permettre au lecteur d'entrer un commentaire : ainsi en partant de l'article publi, une discussion peut s'ouvrir entre celui qui crit et ceux qui lisent. Il est ncessaire de grer les commentaires pour viter les rponses vexantes ou non relatives au thme : pour ce faire, WebSite X5 met votre disposition un Panneau de contrle enligne. Pour plus dinformations, voir le Panneau de Contrle et, notamment, Comment grer les commentaires aux Posts du Blog travers le panneau de contrle. 153

Pratiquement
Pour crer un Blog, il suffit de dfinir certains paramtres gnraux et de crer la liste des nouvelles diffuser. Les commandes ncessaires pour configurer un Blog et crer les articles sont prsentes dans trois sections :

Section Articles Section Mise en forme Section Commentaires

Le Blog tant dfini, il faut maintenir vif l'intrt des lecteurs en proposant rgulirement et frquemment de nouveaux posts. ce sujet, pour publier seulement les mises jour relatives au Blog en phase d'exportation, slectionnez l'option Exporter seulement le Blog et les Flux RSS dans la fentre Exportation du site sur Internet.

Blog | Section Articles

Les commandes proposes dans la Section Articles de la fentre Blog permettent de dfinir certains paramtres gnraux et de composer la liste des articles (ou Post) publier dans le Blog. Le cadre Paramtres gnraux comprend les options suivantes :

Titre : dans ce champ, tapez le titre du Blog. Ce titre qui sera affich dans la

barre de titre du Navigateur est un paramtre important pour permettre aux utilisateurs et aux moteurs de recherche d'identifier correctement le Blog. Si vous n'indiquez aucun titre pour le Blog, le programme lui affecte automatiquement le titre associ au site travers l'option approprie de la fentre Paramtres gnraux | Section Gnrales. La description du blog doit tre succincte, efficace et prcise : cette description sera en effet utilise dans le code HTML comme contenu du Mta tag <description> et sera analyse par les spiders des moteurs de recherche. Dans ce cas galement, si vous n'indiquez aucune description pour le Blog, le programme lui affecte automatiquement la description associe au site travers l'option approprie de la fentre Paramtres gnraux | Section Gnrales. faut, provoque la cration automatique d'un Flux RSS avec tous les articles du Blog.

Description : dans ce champ, vous pouvez taper une brve description du Blog.

Crer RSS Feed en incluant le contenu du Blog : cette option, active par d-

154

Le cadre Liste de messages propose un tableau rcapitulatif indiquant le Titre, l'Auteur, la Catgorie et la Date de lancement de tous les Posts dj insrs ainsi que les commandes ncessaires pour crer la liste des articles :

Ajouter : permet de rappeler la fentre Paramtres article pour entrer un nouvel article.

Supprimer... : permet de supprimer l'article slectionn parmi ceux prsents

dans la Liste des articles.

Modifier : permet de rappeler la fentre Paramtres article pour modifier l'article slectionn parmi ceux prsents dans la Liste des articles.

Fentre Paramtres article

La fentre Paramtres article rappele l'aide de la commande Ajouter ou Modifier apparat comme illustr ci-dessous, elle est articule en deux sections :

Section Gnrales Section Avances

Les commandes prsentes dans la section Gnrales de la fentre Paramtres article sont :

Titre : permet d'indiquer le titre de l'article. Publi le : permet de dfinir la date de publication de l'article en la slectionnant dans le calendrier.

Auteur : permet d'indiquer l'auteur de l'article. Dans ce champ, vous pouvez

taper directement le nom de l'auteur, ou ouvrir la liste droulante et slectionner un nom parmi ceux insrs prcdemment. 155

 Catgorie : permet d'indiquer la catgorie de l'article. Comme pour le champ

Auteur, vous pouvez taper le nom d'une nouvelle catgorie, ou slectionner l'une des catgories insres prcdemment.

Balise : permet d'indiquer une liste de balises, savoir de brves descriptions

des concepts cl associs l'article. Vous pouvez associer plusieurs balises chaque article, en les crivant l'une aprs l'autre, spares par une virgule (par exemple : " tag1, tag2, tag3., ..."). ponible pour l'Objet texte.

Contenu : permet d'crire l'article en utilisant un diteur analogue celui dis Brve description : permet d'indiquer une brve description associer l'article.
En revanche, les commandes prsentes dans la section Avances de la fentre Paramtres article sont les suivantes :

Audio/Vido li : permet d'indiquer un fichier audio (au format .MP3, .WMA,

.WAV, .MID, .AIF, .M4A) ou un fichier vido (au format .MP4, .FLV, .AVI, .WMV, .MPG, .MOV) associer l'article. Cette option permet de crer automatiquement un lien vers un fichier audio/vido affich au bas de l'article. Est-ce que je peux insrer l'intrieur d'un article un vido que l'on peut voir immdiatement ? Vous pouvez faire en sorte que le vido soit directement affich dans l'article en insrant manuellement le code HTML ncessaire dans l'diteur de texte lors de la composition de l'article. Par exemple, vous pouvez copier le code d'un vido YouTube tel qu'il est fourni par le portail et le coller l'intrieur de l'article.

Poster sources : permet de crer la liste des sources utilises pour composer
l'article l'aide des commandes suivantes : - Ajouter / Supprimer... : permettent respectivement d'ajouter une nouvelle source ou de supprimer celle slectionne. Il suffit de cliquer une seconde fois sur une rubrique slectionne pour la modifier. - En haut / En bas : permettent de ranger la liste, en dplaant vers le haut ou le bas la rubrique slectionne. - Modifier : permet de modifier la rubrique slectionne. Pour insrer correctement une source, il faut crire le nom du site suivi de l'URL comprise entre les caractres < > (par exemple : "WebSite X5 < http ://www.websitex5.com>") : comme source sera affich seulement le texte et l'URL sera utilise pour crer le lien associ. 156

 Ne pas habiliter les commentaires pour cet article : si vous slectionnez

cette option, vous empchez les utilisateurs de laisser des commentaires pour l'article courant.

Blog | Section Mise en forme

Les commandes proposes dans la Section Mise en forme de la fentre Blog permettent de dfinir certains aspects graphiques du Blog. Le cadre Gnral dispose des options suivantes :

Afficher bouton "AddThis" pour le partage des contenus sur Internet : si

vous slectionnez cette option, le bouton "AddThis" apparat automatiquement sous chaque article du Blog. En cliquant sur ce bouton, le lecteur affiche un sous-menu contenant une liste des Social Network les plus connus : s'il dispose d'un profil sur l'un de ces circuits, il pourra le slectionner et partager le lien vers le Post avec ses contacts. sant parmi les propositions graphiques contenues dans la liste droulante.

Type de bouton : permet de dfinir l'aspect du bouton "AddThis" en choisis Compte AddThis : permet, si vous disposez d'un Compte AddThis, de le spcifier. Avoir un compte permet d'afficher certaines statistiques sur l'utilisation du service AddThis de la part des lecteurs.

Pour plus d'informations sur le service AddThis et pour obtenir un compte, cliquez sur le bouton et accdez au site officiel : www.addthis.com.

Le cadre Blocs latraux propose un tableau rcapitulatif indiquant le Titre, le Type et la Largeur de tous les blocs de contenu insrs dans la barre latrale ainsi que 157

les commandes ncessaires pour crer la liste de ces blocs :

Ajouter : permet de rappeler la fentre Bloc latral pour entrer un nouveau bloc. Dupliquer : permet de crer une copie du bloc slectionn parmi ceux dj insrs. Supprimer... : permet de supprimer le bloc slectionn parmi ceux prsents
dans la liste Blocs latraux.

En haut / En bas : permettent, respectivement, de dplacer le bloc slectionn

avant/aprs le bloc prcdent/suivant parmi ceux dj insrs dans la liste Blocs latraux. lectionn parmi ceux prsents dans la liste Blocs latraux.

Modifier : permet de rappeler la fentre Bloc latral pour modifier le bloc sFentre Blocs latraux
La fentre Bloc latral rappele l'aide de la commande Ajouter ou Modifier permet de dfinir les blocs de contenu insrer dans la colonne latrale de toutes les pages du Blog. Cette fentre possde deux sections. Cette fentre possde deux sections :

Section Gnral Section Style

Les commandes prsentes dans la section Gnral de la fentre Blocs latraux (voir Blog | Section Mise en forme) permettent de crer la liste des blocs qui devront complter la page du Blog. Vous pouvez choisir parmi les types de bloc suivants : Articles rcents : bloc o sont affichs tous les Posts les plus rcents publis sur le Blog. Si vous cliquez sur le titre, vous accdez la page affichant l'article. Catgories : bloc o est affiche la liste de toutes les catgories composant les Posts du Blog. Si vous cliquez sur une catgorie, vous affichez la liste des articles insrs. Articles mensuels : bloc o est indique la liste des Posts publis, organiss par mois. Nuages : bloc o est indique la liste de toutes les catgories ou de toutes les balises associes aux articles publis. Dans ce cas, les noms des catgories ou les balises sont affichs avec des dimensions diffrentes selon le nombre de Posts relis : plus le nombre de Posts relis est grand, plus les dimensions de l'inscription sont grandes. Si vous cliquez sur une rubrique (Catgorie ou balise), vous affichez la liste des articles qui y sont relis. 158

Blogoliste : bloc d'affichage de la liste du Blogoliste, savoir d'autres sites Web ou Blogs que vous voulez lier pour suggrer leur visite vos lecteurs. Facebook : bloc qui exploite le Social Plug-in "Like Box" de Facebook pour permettre aux utilisateurs de : - voir combien de personnes et/ou propres amis la page Facebook propose plat ; - lire les Posts rcents publis sur la page Facebook propose ; - dire que la page Facebook propose plat sans devoir par force la visiter. Google AdSense Adverts : bloc d'affichage des messages publicitaires fournis par le circuit Google AdSense. Code HTML : bloc compltement personnalisable qui peut tre utilis pour insrer n'importe quelle fonction non prvue en mode automatique par le programme. Selon le type de bloc slectionn, le programme prsente diffrentes options sur lesquelles vous pouvez agir. Les options communes tous les blocs sont :

Titre : permet d'insrer le titre associer et afficher pour le bloc. Largeur : permet de dfinir la largeur en pixels du bloc.
En plus des options communes, pour chaque type de bloc, vous disposez des options spcifiques suivantes : Articles rcents / Catgories/ Articles mensuels: Nuages :

Nombre maximum d'lments : permet d'indiquer le

nombre maximum de rubriques qui doit tre affich l'intrieur du bloc.

Afficher les Catgories dans un nuage / Afficher les

Balises dans un nuage : permettent de choisir si dans le bloc Nuages, il faut indiquer les Catgories ou les Balises utilises pour les articles dj publis. travers les commandes suivantes :

Blogoliste :

Blogoliste : permet de composer la liste du Blogoliste - Ajouter / Supprimer... : permettent, respectivement,

d'ajouter un nouveau Blogoliste ou de supprimer un site slectionn. Il suffit de cliquer une seconde fois sur une rubrique slectionne pour la modifier. plaant vers le haut ou le bas la rubrique slectionne.

- En haut / En bas : permettent de ranger la liste, en d159

- Modifier : permet de modifier la rubrique slectionne.

Pour insrer correctement un Blogoliste, il faut crire le nom du site suivi de l'URL comprise entre les caractres <> (ex: "WebSiteX5 < http ://www.websitex5.com>") : seulement le texte sera affich comme Blogoliste et l'URL sera utilise pour crer le lien associ. Facebook :

URL Facebook : permet d'indiquer l'URL de la page

Facebook que vous voulez proposer. plan Clair ou Fonc pour le bloc.

Couleur d'arrire-plan : permet de dfinir un Arrire Hauteur : permet de dfinir la hauteur en pixels du bloc. Afficher les connexions : si vous slectionnez cette
option, le bloc montre aussi les photos des profils des amis ( savoir des connexions).

Afficher flux : si vous slectionnez cette option, les derniers Posts publis dans le tableau de la page Facebook propose sont automatiquement affichs dans le bloc. option, une en-tte de Facebook est affiche dans le bloc.

Afficher en-tte FaceBook : si vous slectionnez cette

Google AdSense Adverts : Code HTML :

Code HTML Google AdSense : permet de saisir le code

HTML fourni par Google AdSense pour afficher un bloc de messages publicitaires. un bloc compltement personnalis.

Code HTML : permet de saisir le code HTML pour crer

Les commandes prsentes dans la section Style de la fentre Blocs latraux (voir Blog | Section Style) permettent de dfinir l'aspect graphique des blocs qui devront complter la page du Blog. Les options prsentes dans le cadre Texte sont :

Police : permet d'indiquer, dans la fentre rappele, le type de caractre, le style

et les dimensions du texte. textes du bloc.

Couleur de texte : permet de dfinir, dans la fentre Couleur, la couleur des

160

 Marge horizontale / Marge verticale : la marge dfinit l'espace entre le bord

de la cellule et son contenu. Ces options permettent donc de dfinir l'espace horizontal et vertical autour du texte l'intrieur du bloc.

Le cadre Arrire-plan dispose des options suivantes :

Couleur darrire-plan / Couleur bordure : permettent de dfinir, dans la

fentre Couleur, la couleur de l'arrire-plan et de la bordure du bloc.

Epaisseur bordure : permet de dfinir l'paisseur de la bordure du bloc. Fichier image : permet d'indiquer une image (.jpg, .gif ou .png) insrer
comme arrire-plan du bloc.

Disposition : permet d'indiquer si l'image insre comme arrire-plan du bloc

doit tre rpte ou non. L'image peut tre rpte horizontalement, verticalement ou dans les deux sens pour remplir tout l'espace disponible. rire-plan par rapport au bloc.

Alignement : permet d'indiquer comment aligner l'image insre comme arBlog| Section Commentaires
Les commandes de la Section Commentaires de la fentre Blog permettent de grer l'entre des commentaires laisss par les visiteurs comme raction aux articles publis dans le Blog. Les options disponibles dans la section Gnral sont :

Permettre l'entre de commentaires pour les articles du blog : si vous activez cette option, vous permettez aux utilisateurs de laisser des commentaires relatifs aux articles publis dans le Blog.

Dossier du serveur avec l'accs par criture : dans ce champ, indiquez le

chemin sur le serveur du dossier avec l'accs par criture, savoir le dossier ayant l'accs l'criture du fichier de la part du code PHP. Normalement les Fournisseurs permettent l'accs l'criture pour chaque dossier du serveur : dans ce cas, il n'est pas ncessaire d'indiquer le chemin du dossier public. En revanche, pour connatre le chemin complet du dossier public, contactez votre Fournisseur d'accs au Web. Dans la section WebSite Test du Panneau de contrle enligne, vous pouvez vrifier si le dossier ayant l'accs l'criture existe et, si oui, s'il permet effectivement l'criture des donnes.

Activer le contrle anti-spam "Captcha" : permet d'ajouter au terme du formulaire pour l'entre d'un commentaire, le contrle anti-spam du Captcha. Le 161

programme insre l'image de quelques lettres dformes sur un arrire-plan flou : l'utilisateur doit recopier correctement les lettres dans un champ appropri pour pouvoir envoyer le commentaire. Le cadre Gestion des commentaires dispose des options suivantes :

E-mail pour l'envoi accus de rception des commentaires : permet d'indiquer l'adresse e-mail laquelle vous voulez recevoir l'avis de rception des commentaires sur les articles publis dans le Blog.

Afficher immdiatement les commentaires insrs / Afficher commen-

taires aprs l'approbation dans le panneau de contrle : permettent de choisir si les commentaires laisss par les visiteurs peuvent tre affichs immdiatement sur les pages du Blog, ou s'ils doivent tre pralablement approuvs travers les commandes de la section Blog du Panneau de contrle enligne.

Flux RSS
Cette fentre propose les outils et les options ncessaires pour crer un Flux RSS, l'un des formats les plus populaires pour la distribution de contenus Web. Le Flux RSS est un outil trs polyvalent, utile pour divulguer des nouvelles, des images ou des vidos : il est trs utile quand on a beaucoup de nouvelles proposer avec une certaine frquence ou quand on veut signaler des vnements, des mises jour effectues l'intrieur du site, les nouveaux posts ou les commentaires publis sur un blog. En souscrivant le Flux RSS associ au site web, les utilisateurs pourront tre constamment jour et recevoir/lire les nouvelles directement travers leur programme news aggregator.

Pratiquement
Pour crer un Feed RSS , il suffit de dfinir certains paramtres gnraux et de crer la liste des nouvelles diffuser. Le cadre Liste des articles propose un tableau rcapitulatif indiquant le titre et la date de lancement de toutes les nouvelles dj insres ainsi que les commandes ncessaires pour crer la liste des articles :

Ajouter : permet de rappeler la fentre Paramtres article pour entrer un nouvel article.

Supprimer... : permet de supprimer l'article slectionn parmi ceux prsents

dans la Liste des articles.

162

 Modifier : permet de rappeler la fentre Paramtres article pour modifier l'article slectionn parmi ceux prsents dans la Liste des articles. Aprs avoir cr la liste des informations, vous devez spcifier les paramtres suivants compris dans le cadre Paramtres gnraux pour le Flux RSS :

Titre : demande d'indiquer le titre du Flux RSS reli au site web. Ce paramtre
est obligatoire.

Image : permet d'indiquer une image (fichier au format .JPG, .GIF, .PNG) associer au Flux RSS ; cette image (le logo de l'entreprise ou du site web) sera affiche par le programme news aggregator. web. Ce paramtre est galement obligatoire.

Description : demande d'indiquer une description du Flux RSS reli au site Fentre Paramtres article
La fentre Paramtres article rappele l'aide de la commande Ajouter ou Modifier apparat comme illustr ci-dessous :

Titre : permet d'indiquer le titre de l'article. Publi le : permet de dfinir la date de publication de l'article en la slectionnant dans le calendrier.

Contenu : permet d'crire l'article en utilisant un diteur analogue celui disponible pour l'Objet texte. relie l'article.

Page lie : permet d'accder au Plan du site pour dfinir la page devant tre
Les Flux RSS ne fonctionneront que lorsque le site sera publi enligne.

Gestion de l'accs
Cette fentre contient les commandes permettant de crer et grer des profils utilisateurs pouvant accder la zone rserve du site, savoir les pages qui ont t dfinies comme protges pendant la phase de Cration du plan.

Pratiquement
Le cadre Groupes et Utilisateurs qui peuvent accder aux pages protges propose un tableau rcapitulatif indiquant le Groupes/Utilisateurs dj insrs, le Login et les Remarques affectes chaque utilisateur. 163

En regard du tableau se trouvent les commandes permettant de crer la liste des groupes et des utilisateurs autoriss accder aux pages protges du site :

Nouveau groupe : permet d'insrer un nouveau Groupe, de sorte organiser

les utilisateurs en catgories homognes plus faciles grer. Les groupes n'ont pas de paramtrages particuliers : ce sont de simples "rcipients" qui sont insrs directement dans le tableau rcapitulatif. Pour renommer un groupe dj insr, double-cliquez sur celui-ci. Pour mieux organiser l'accs des utilisateurs, vous pouvez crer des sous-groupes : vous pouvez former autant de groupes et sous-groupes que vous le souhaitez. Deux groupes sont prsents par dfaut : Administrateur et Utilisateurs. le groupe Administrateur est form des administrateurs du site qui ont automatiquement accs toutes les Pages protges du site. En saisissant leur Nom utilisateur et Mot de passe, tous les utilisateurs du groupe Administrateur peuvent accder au Panneau de contrle enligne (disponible l'URL www.monsite.fr/admin o www.monsite.fr est l'URL du site) permettant de grer les commentaires aux Post du Blog, les messages du Guestbook (voir objet HTML et Widgets) et afficher les informations de diagnostic ou sur l'optimisation du site pour les moteurs de recherche.

Nouvel utilisateur : permet de rappeler la fentre Nouvel utilisateur pour insrer dans le groupe slectionn un nouvel utilisateur avec ses donnes d'accs relatives.

Supprimer... : permet de supprimer le groupe ou l'utilisateur slectionn parmi

ceux dj insrs. Vous ne pouvez supprimer ni le Groupe Administrateurs ni l'utilisateur Admin du groupe car ils sont prvus par dfaut. paramtrages de l'utilisateur slectionn.

Modifier : permet de rappeler la fentre Nouvel utilisateur pour modifier les

164

 Crer Alias : permet de crer un Alias pour l'utilisateur slectionn. Cette option est utile quand il faut insrer le mme utilisateur dans diffrents groupes pour l'autoriser accder diffrentes pages protges, elle n'est pas active pour les utilisateurs du groupe Administrateur qui ont automatiquement accs toutes les pages protges. L'alias reste li l'utilisateur de sorte que toute modification effectue l'un est automatiquement applique l'autre. Pour crer rapidement un alias, vous pouvez galement slectionner un utilisateur, le faire glisser et, appuyer sur la touche CTRL, avant de le relcher dans le groupe.

En plus du tableau rcapitulatif, le cadre Paramtrages pour la page d'accs de la zone rserve propose les options suivantes :

Message de bienvenue : permet d'crire le texte qui s'affichera quand l'utilisateur essaiera d'accder une page protge sans avoir pralablement excut la connexion. Dans ce cas, l'utilisateur est radress vers une page, cre automatiquement par le programme, compose des lments suivants : - le message de bienvenue spcifi ; - les champs d'entre du Nom Utilisateur et du Mot de passe ; - le bouton S'enregistrer, si vous avez slectionn l'option Page d'inscription (voir ci-dessous).

Page d'inscription : permet d'accder au plan du site pour indiquer la page

afficher quand l'utilisateur clique sur le bouton S'enregistrer pour demander le Nom Utilisateur et le Mot de passe ncessaires pour accder aux Pages protges.

Aprs avoir cr les utilisateurs avec les donnes d'accs relatives et les avoir organiss en groupes, vous pouvez revenir l'Etape 2 - Cration du plan pour dfinir les pages qui doivent tre protges et tablir le droit d'accs des Groupes/Utilisateurs pour chaque Page protge. Quand vous testez le fonctionnement du site cr sur la machine, une fentre d'avertissement vous informe que les pages protges seront affiches sans la demande d'accs. Les pages protges sont actives seulement aprs la publication du Site sur le serveur. Pour que la zone rserve fonctionne correctement, il est ncessaire que le serveur accueillant le site supporte le langage de programmation PHP et les sessions. La section WebSite Test du Panneau de contrle enligne donne des informations de diagnostic sur le serveur.

165

Fentre Nouvel utilisateur

La fentre Nouvel utilisateur rappele l'aide de la commande Nouvel utilisateur ou Modifier se prsente comme illustr ci-dessous :

Prnom et nom : permet d'indiquer le nom de l'utilisateur auquel vous voulez

accorder l'accs certaines Pages protges du site.

Nom Utilisateur / Mot de passe : permettent d'indiquer le nom utilisateur et

le mot de passe que l'utilisateur devra saisir pour pouvoir afficher les Pages protges auxquelles il a le droit d'accs. Le programme propose automatiquement un mot de passe compos de 8 caractres (lettres et chiffres) choisis travers une procdure alatoire : vous pouvez toutefois modifier librement ce mot de passe. quand l'utilisateur a saisi ses donnes d'accs.

Page d'accs : permet d'accder au plan du site pour indiquer la page afficher Remarque : permet d'insrer certaines remarques facultatives sur l'utilisateur. Date d'inscription : permet d'insrer, l'aide de la fentre Calendrier, la date
d'inscription de l'utilisateur. Les informations relatives aux options Remarque et Date d'inscription ne sont pas comprises dans le code du site web ralis : elles servent seulement amliorer la gestion des utilisateurs de la part de l'administrateur du site.

Panier virtuel e-commerce

Cette fentre propose les outils et les options ncessaires pour crer et grer un panier e-commerce permettant d'effectuer la vente enligne des produits offerts sur le site web.

Pratiquement
Pour crer un panier e-commerce, il faut tout d'abord dfinir le catalogue des produits disponibles en les organisant par catgories et sous-catgorie homognes. Pour chaque produit il faut bien videmment insrer une srie d'informations indispensables comme le nom, la description et le prix mais vous pouvez aussi associer une ou plusieurs images et prvoir des variantes (de coupe, de couleur, de modle , etc. ). Le catalogue tant cr, vous devez dfinir les mthodes d'expdition et de paiement activer et dfinir le bon de commande en configurant aussi les emails qui seront envoys par le panier aussi bien au grant du site qu' la personne qui passe la commande. 166

Dans le dtail, les diffrentes options pour dfinir les lments et le fonctionnement du panier e-commerce sont prsentes dans les sections suivantes :

Section Produits Section Paiement

Section Dtails client Section Options

Aprs avoir cr le panier e-commerce, il faut insrer dans le site les informations et les liens ncessaires afin que les utilisateurs puissent afficher les informations sur les produits et effectuer l'achat. Pour ce faire, vous pouvez procder de diffrentes faons : 1. Vous pouvez crer des pages spcifiques prsentant les produits de la faon la plus approprie (avec des images, des textes, des tableaux, etc.) et y insrer le bouton "Acheter". Dans ce cas, le bouton "Acheter" peut tre cr travers le lien Ajouter au panier (voir Style des liens). 2. Vous pouvez crer des pages prsentant les produits travers des fiches o figurent le bouton "Acheter". Dans ce cas, il faut utiliser l'objet Liste des produits. Quand vous testez le fonctionnement du site cr sur la machine, un message vous avertit que la commande ne sera pas envoye et le programme effectue un redirect automatique la page de confirmation de la commande. Le panier e-commerce ne fonctionne entirement qu'aprs la publication du site sur le serveur. Pour que le panier e-commerce fonctionne correctement, le serveur sur lequel le site sera publi doit supporter le langage de programmation PHP et la commande MAIL doit tre active. La section WebSite Test du Panneau de contrle enligne donne des informations de diagnostic sur le serveur. Si des problmes se vrifient durant l'envoi des emails, il se peut que le serveur utilis ne soit pas configur en mode standard. Dans ces cas, essayez de modifier les prdispositions relatives au script utilis pour l'envoi de l'email l'aide de l'option approprie prsente dans la fentre Prfrences. Pour plus d'informations ce sujet, veuillez contacter votre fournisseur d'accs au Web.

Panier virtuel e-commerce| Section Produits

Les options de la section Produits de la fentre Panier virtuel e-commerce permettent d'entrer des produits dans le panier, en les organisant par catgories.

167

Les produits dj insrs sont affichs dans le tableau rcapitulatif qui indique, pour toutes les catgories prvues, tous les produits insrs avec leur Description et leur Prix. Le tableau rcapitulatif prsente une barre d'outils suprieure contenant les commandes suivantes : Couper [CTRL+X] / Copier [CTRL+C] / Coller [CTRL+V] Elle permettent, respectivement, de couper, copier et coller les produits slectionns. Ces commandes sont aussi disponibles dans le menu Popup rappel l'aide d'un clic droit de la souris en pointant la liste des produits. En plus de la barre d'outils, pour dfinir la liste des Produits grer travers le panier enligne, vous disposez des commandes suivantes :

Nouvelle catgorie : permet d'entrer une nouvelle catgorie pour organiser les

produits disponibles. Les catgories n'ont pas de paramtrages particuliers : ce sont de simples "rcipients" qui sont insrs directement dans le tableau rcapitulatif. Pour renommer une catgorie dj insre, double-cliquez sur son nom. Pour mieux organiser le catalogue des produits, vous pouvez aussi crer des sous-catgories : vous pouvez former autant de catgories et souscatgories que vous le souhaitez. entrer un nouveau produit dans la catgorie slectionne.

Nouveau produit : permet de rappeler la fentre Paramtres de produit pour Supprimer... : permet de supprimer la catgorie slectionne, avec tous les
produits qu'elle contient, ou seulement les produits slectionns. les paramtrages du produit slectionn.

Modifier : permet de rappeler la fentre Paramtres de produit pour modifier

Pour dplacer un produit d'une catgorie l'autre, vous pouvez agir directement sur la liste des produits : slectionnez le produit , faites-le glisser et relchez-le l'endroit voulu (Drag&Drop). Vous pouvez slectionner plusieurs produits l'aide des touches CTRL et SHIFT.

168

Aprs avoir insr les catgories et les produits relatifs dans le panier virtuel e-commerce, vous pouvez utiliser l'objet Liste des produits pour crer un vritable catalogue enligne.

Fentre Paramtres de produit

La fentre Paramtres de produit rappele l'aide de la commande Ajouter ou Modifier permet de dfinir et d'entrer un nouveau produit, elle est organise en trois sections :

Section Gnral Section Image

Section Options

Les options de la section Gnral de la fentre Paramtres de produit permettent d'insrer certaines informations de base sur un nouveau produit proposer travers le Panier e-commerce. Les options disponibles pour dfinir le nouveau produit ajouter la liste sont :

Nom/Code : permet d'insrer ou d'afficher le nom ou le code d'identification

du produit que vous voulez crer ou modifier. ficher une description du produit que vous voulez crer ou modifier. der au plan du site pour indiquer la page relier au produit courant. duit courant.

Description : permet d'insrer ou d'af Page de produits lis : permet d'acc Prix : permet d'indiquer le prix du pro TVA (%) : si elle est active, elle permet
d'indiquer la TVA appliquer au produit courant. Cette option n'est disponible que si vous avez slectionn l'option Dfinir la valeur de la TVA pour chaque produit de la section Options. Selon la manire dont vous voulez dfinir le panier, vous pouvez entrer les prix des produits toute taxe comprise ou, pour les articles exigeant l'application d'une TVA diffrente, insrer les prix hors taxe et indiquer part la taxe appliquer cas par cas. 169

 Poids : permet d'indiquer le poids du produit courant pour pouvoir calculer les
frais d'expdition appliquer (voir Section Paiement| Type de livraison). Selon le type de produits traits dans le panier, vous pouvez utiliser l'option Poids pour indiquer un poids en kilogrammes ou en grammes, plutt qu'un volume exprim en litres ou en mtres cubes ou n'importe quelle autre unit de mesure utile. Pour que les cots d'expdition soient calculs correctement, il est important de choisir une unit de mesure et de l'utiliser pour tous les produits du panier. Les options de la section Image de la fentre Paramtres de produit permettent d'associer, au produit proposer travers le Panier e-commerce, une ou plusieurs images le prsentant. En important plusieurs images, vous pouvez crer un vritable diaporama : si vous cliquez sur une image, vous pouvez agrandir son affichage dans la fentre ShowBox. Il faut prciser que seulement la premire des images associes au produit sera affiche dans le panier. Toutes les autres images ventuellement insres seront affiches dans les fiches composes si vous utilisez l'Objet Liste des produits. Les options disponibles pour crer la liste d'images associer au produit sont :

Ajouter / Supprimer... : permettent, respectivement, d'ajouter de nouvelles

images ou de supprimer les images slectionnes dans la liste de celles composant le diaporama. La fentre Slection fichier permet de slectionner plusieurs fichiers simultanment. tionne.

Modifier : permet de rappeler l'Editeur graphique pour modifier l'image slec Modifica : permette di richiamare l'Editor grafico per modificare l'immagine
selezionata. Par ailleurs, dans le cadre Proprits de la bote d'affichage, les options suivantes sont disponibles :

Largeur maximum / Hauteur maximum : permettent de dfinir les valeurs

maximum de la bote d'affichage o apparaissent les images agrandies. Pour plus d'informations sur comment personnaliser l'aspect de la bote d'affichage, voir l'tape 4 - Paramtres avancs de la section Styles et modles | Bote d'affichage. Les options de la section Options de la fentre Paramtres de produit permettent d'insrer certains paramtres supplmentaires pour grer le nouveau produit proposer travers le Panier e-commerce. 170

Tout d'abord, il faut prvoir des Variantes pour le produit. Comme variantes de produit, vous pouvez introduire les tailles ou les couleurs disponibles d'un vtement ou bien les diffrents modles d'un article. Toutes les variantes introduites sont affiches dans la liste approprie du panier ou de la section cre si vous utilisez l'Objet Liste des produits. Les commandes disponibles pour crer cette liste de variantes sont :

Ajouter / Supprimer... : permettent,

respectivement, d'ajouter de nouvelles variantes de produit ou de supprimer les variantes slectionnes dans la liste.

Modifier : permet de modifier la va-

riante de produit slectionne. Pour ce faire, vous pouvez aussi double-cliquer sur une variante. tivement, de dplacer la variante de produit slectionne avant ou aprs la variante prcdente/suivante.

En haut / En bas : permettent, respec-

Par ailleurs, si vous cochez l'option Activer la remise quantit, vous pouvez crer une liste contenant les remises appliquer en fonction de la quantit de produit commande. Dans ce cas galement, toutes les remises de quantit introduites sont affiches dans une liste approprie et les commandes disponibles pour les crer sont :

Ajouter : permet de dfinir et d'ajouter, dans la

fentre Remise quantit, une remise sur la quantit pour le produit courant. En pratique elle permet de dfinir la quantit de produit qu'il faut rejoindre ou dpasser dans la commande afin de pouvoir appliquer la Remise (%) prvue. la liste.

Supprimer... : permet de supprimer la remise sur la quantit slectionne dans Modifier : permet de rappeler la fentre Remise quantit pour modifier la remise sur la quantit slectionne. Pour ce faire, vous pouvez aussi doublecliquer sur la remise.

171

Panier virtuel e-commerce | Section Paiement

Les options de la section Paiement de la fentre Panier virtuel e-commerce permettent de dfinir les types d'expdition et de paiement disponibles pour le panier. Le cadre Liste de types de livraison propose la liste de tous les types d'expdition disponibles, en indiquant pour chacun d'entre eux le nom, la description et le prix associs. Voici les commandes disponibles pour crer la liste des types d'expdition activs pour le panier :

Ajouter : permet de rappeler la fentre Type de livraison pour dfinir un nouveau type d'expdition.

Dupliquer : permet de crer une copie du type d'expdition slectionn pour

dfinir plus rapidement un autre type rendre disponible.

Supprimer... : permet de supprimer le type d'expdition slectionn. Modifier : permet de rappeler la fentre Type de livraison pour modifier le type

d'expdition slectionn. Pour ce faire, vous pouvez aussi double-cliquer sur le type. tion slectionn avant ou aprs le type prcdent/suivant.

En haut / En bas : permettent, respectivement, de dplacer le type d'expdiDe mme, le cadre Liste de types de paiement montre tous les types de paiement disponibles sur le panier et indique pour chacun d'entre eux le nom, la description et le prix associs.

Fentre type d'expdition

La fentre type d'expdition, rappele l'aide de la commande Ajouter ou Modifier prsentes dans le cadre Liste de types de livraison de la section Paiement, permet de dfinir et d'insrer les mthodes d'expdition activer sur le Panier ecommerce. La fentre Type d'expdition est articule en 3 sections :

Section Gnral Section Cot

Section Message email

La section Gnral dispose des options suivantes :

Nombre : permet d'affecter un nom au type d'expdition pour l'identifier travers une expression claire et synthtique.

Description : permet d'entrer une explication complte du type d'expdition.

172

La section Cot permet d'indiquer le montant des frais supplmentaires appliqus si le client choisi le type d'expdition courant. Ce montant peut tre dfini avec l'une des mthodes suivantes :

Cot fixe : permet d'indiquer un seul cot fixe pour le type d'expdition courant. Ce cot ne change pas quel que soit le paramtre relatif la commande.

Cot relatif la quantit de la com-

mande : permet de crer une ou plusieurs gammes de cot pour la mthode d'expdition courante, en fonction du total de la commande atteint. Pratiquement, travers les boutons Ajouter et Modifier, vous rappelez la fentre Cot de l'expdition permettant de dfinir le total de la commande qui doit tre atteint ou dpass pour pouvoir appliquer le cot d'expdition indiqu. cot pour la mthode d'expdition courante, en fonction du total du poids atteint par les produits insrs dans la commande. Dans ce cas galement, travers les boutons Ajouter et Modifier vous rappelez la fentre Cot de l'expdition permettant de dfinir le poids total qui doit tre atteint ou dpass pour pouvoir appliquer le cot d'expdition indiqu. Pour que les cots d'expdition soient calculs correctement, il est important d'indiquer le poids de chaque produit prsent dans le panier travers l'option approprie prsente dans la fentre Paramtres de produit.

Cot associ au poids total : permet de crer une ou plusieurs gammes de

Par ailleurs, vous disposez de l'option :

TVA (%) : si elle est active, elle permet d'indiquer la TVA appliquer au cot

associ au type d'expdition. Cette option n'est disponible que si vous avez slectionn l'option Dfinir la valeur de la TVA pour chaque produit de la section Options.

Enfin, la section Message email prsente un champ permettant d'insrer un texte qui dcrit et explique le type d'expdition courant. Il convient de bien composer ce message car il sera utilis dans l'email de confirmation de la commande qui sera envoy au client.

173

Fentre Type de paiement

La fentre Type de paiement, rappele travers la commande Ajouter ou Modifier du cadre Liste de types de paiement de la section Paiement, permet de dfinir et d'insrer les mthodes de paiement activer sur le Panier e-commerce. La fentre Type de paiement est articule en 3 sections :

Section Gnral Section Type

Section Message email

La section Gnral dispose des options suivantes

Nombre : permet d'affecter un nom la mthode de paiement pour l'identifier

travers une expression claire et synthtique. paiement.

Description : permet d'entrer une explication complte de la mthode de

La section Type permet d'indiquer le type de paiement requis en choisissant entre :

Payer plus tard : dans ce cas, le client passe sa commande et effectue le paiement un moment successif. Il est indiqu, par exemple, en cas de paiements par virement bancaire. diatement. Il est indiqu en cas de paiements par PayPal, ou d'autres circuits analogues, ou bien par carte de crdit.

Payer maintenant : dans ce cas, le client passe sa commande et la solde imm-

Si vous slectionnez l'option Payer maintenant, vous devez dfinir le type de paiement requis ; selon le type choisi, vous devez dfinir certains paramtres : PayPal/Carte de crdit :

Compte PayPal : permet d'entrer le compte obtenu

comme un utilisateur PayPal enregistr.

Page de confirmation du paiement : permet d'affi Page d'erreur du paiement : permet d'afficher le
plan du site et de slectionner la page qui apparat en cas d'erreur pendant la procdure de paiement.

cher le plan du site et de slectionner la page qui apparat pour confirmer que le paiement a t effectu.

Code personnalis

Code HTML pour le bouton 'Payer maintenant' : si

vous dcidez d'utiliser un systme de paiement alternatif PayPal, cette option permet de saisir le code HTML fourni, aprs l'inscription, par le grant du service de transaction choisi.

174

Le code HTML fourni par votre Fournisseur de Service de Paiement est utilis pour crer le bouton 'Pay Now' ou 'Payer Maintenant'. Ce code doit tre complt par le numro de commande et le montant total de la commande du client. Pour que le panier fonctionne, vous devez taper manuellement dans le code les tags suivants : [ORDER_NO] - identifie le numro de commande ; [PRICE] - identifie le montant total payer. Par ailleurs, vous disposez aussi des options :

Cot : permet d'indiquer le montant des frais supplmentaires appliqus si le

client choisit la mthode de paiement courante.

TVA (%) : si elle est active, elle permet d'indiquer la TVA appliquer au cot
associ la mthode de paiement. Cette option n'est disponible que si vous avez slectionn l'option Impt de la TVA pour chaque produit dans la section Options.

La section Message email prsente un champ permettant d'insrer un texte qui dcrit et explique la mthode de paiement. Il convient de bien composer ce message car il sera utilis dans l'email de confirmation de la commande qui sera envoy au client.

Panier virtuel e-commerce | Section Dtails client

Les options de la section Dtails client de la fentre Panier virtuel e-commerce permettent de dfinir la composition du formulaire que l'utilisateur doit remplir pour effectuer la commande travers le panier e-commerce. Le cadre bon de commande offre une liste Champs que vous pouvez utiliser pour composer le bon de commande. Pour insrer un champ dans le module, cochez la case correspondant la colonne Visible. En revanche pour que le champ soit obligatoirement rempli lors de la commande, cochez la case de la colonne Obligatoire. La liste propose par dfaut contient tous les champs gnralement utiliss dans un formulaire d'inscription. Le dernier champ propos dans la liste est le champ email : vous ne pouvez pas rendre invisible ce champ ou non obligatoire car il est ncessaire de connatre l'email de l'utilisateur qui envoie la commande. En plus de la liste Champs, vous disposez des options suivantes : 175

 Afficher les conditions contractuelles : si vous slectionnez cette option, vous

pourrez ajouter au bas du formulaire un champ contenant les conditions que l'utilisateur doit accepter avant d'envoyer la commande. Vous pouvez utiliser ce champ, par exemple, pour prsenter les normes relatives la confidentialit pour le traitement des donnes collectes. tions que l'utilisateur devra accepter afin d'effectuer la commande.

Messages des conditions contractuelles : permet d'insrer le texte des condiLe cadre Courriel de la liste des commande prsente les options suivantes :

Adresse e-mail o recevoir les commandes : permet d'indiquer l'adresse email laquelle l'administrateur du site veut recevoir les commandes effectues par les utilisateurs travers le panier.

Joindre les donnes dans le format CSV : si vous slectionnez cette option,

vous pouvez faire en sorte que les donnes collectes soient aussi enregistres dans un fichier au format .CSV, ajout l'e-mail. Dans un fichier .CSV, les donnes sont indiqus sous forme textuelle comme une longue liste de rubriques spares d'un point-virgule : vous pouvez importer facilement ces fichiers dans les programmes de gestion des feuilles de calcul (par ex. Microsoft Excel).

Enfin, le cadre Courriel de confirmation de la commande utilisateur contient des champs permettant d'indiquer le texte d'en-tte et le texte de pied de page pour l'email de confirmation de la commande qui sera automatiquement envoy l'utilisateur. Cet email de confirmation de la commande propose, en plus du texte d'entte et du texte de pied de page, les descriptions relatives aux mthodes d'expdition et de paiement choisies.

Panier virtuel e-commerce | Section Options

Les options de la section Options de la fentre Panier virtuel e-commerce permettent de dfinir certains paramtres graphiques, en plus de ceux relatifs la devise et la TVA, pour le panier e-commerce. Le cadre Dfinition de la devise propose les options suivantes :

Devise : permet de dfinir la devise utiliser dans le panier. Le menu Popup

divises, cliquez sur le bouton qui rappelle la fentre Liste de devises.

propose dj certaines devises : pour modifier la composition de cette liste de

Groupement des chiffres : permet de choisir comment crire le prix des produits, en choisissant si les milliers doivent tre spares par un point et les dcimaux par une virgule (1.000,00) ou inversement (1,000.00).

176

 Afficher la devise droite : si vous slectionnez cette option, le symbole de la

devise sera affich droite des prix.

Afficher deux chiffres aprs la virgule : si vous slectionnez cette option, les
prix seront affichs avec deux chiffres aprs la virgule. Le cadre Paramtres TVA comprend les options suivantes :

Le prix des produits est TVA comprise : slectionne par dfaut, elle dfinit le
panier de sorte que les prix des produits comprennent la TVA.

Dfinir la valeur de la TVA pour chaque Produit : slectionnez cette option

pour afficher les prix des produits hors taxe et avoir la possibilit d'indiquer la valeur de la TVA cas par cas.

Valeur TVA par dfaut (%) : elle n'est disponible que si vous avez activ l'option Dfinir la valeur de la TVA pour chaque Produit., elle permet d'indiquer une valeur par dfaut pour la TVA. Cette valeur est applique quand la TVA d'un produit n'est pas indique travers l'option de la fentre Paramtres de produit| Gnral.

Le cadre Options prsente les commandes suivantes :

Autorise les commandes uniquement pour des quantits minimales : fait Montant total minimum : elle n'est disponible que si vous avez slectionn

en sorte que la commande ne soit accepte que si elle atteint le montant minimum tabli. l'option Autorise les commandes uniquement pour des quantits minimales, elle permet de dfinir la valeur du montant minimum qui doit tre atteint par le total de la commande pour tre accept

Le cadre Paramtres graphiques du tableau de produits prsente les commandes ncessaires pour dfinir l'aspect des tableaux prsentant les produits disponibles et/ou insrs dans le panier :

Arrire-plan de l'en-tte / Texte de l'en-tte / Arrire-plan des cellules /

Texte des cellules / Bordure de tableau : permettent de dfinir, dans la fentre Couleur, la couleur des diffrents lments du tableau Produits. quer les images utiliser pour crer les boutons 'Ajouter au panier' et 'Enlever du panier'', savoir les boutons que l'utilisateur peut utiliser pour insrer ou enlever du panier un produit dtermin.

Image 'Ajouter au panier' / Image 'Enlever du panier' : permettent d'indi-

Image 'Aperu non disponible' : permet d'indiquer l'image utiliser quand l'image

associe n'a pas t choisie pour un produit et que dans la page Liste des produits vous avez choisi la prsentation "Image et texte" ou "texte et Image" pour les fiches. 177

Comment dfinir les contenus de l'email de confirmation de commande

Au terme d'une commande, il est important que l'utilisateur reoive un email de confirmation lui assurant que l'opration a t mene bien et lui indiquant comment effectuer le paiement. WebSite X5 cre automatiquement l'email de confirmation de la commande, en reprenant seulement les informations utiles, en fonction des choix effectus par l'utilisateur pendant la saisie de la commande. Dans le dtail, l'email de confirmation de la commande est compos comme suit : Texte d'en-tte Description : C'est le texte initial : il devrait exprimer un remerciement pour l'achat effectu et prsenter les contenus qui suivront. Cher/chre client(e), Nous vous remercions de votre achat. Nous vous transmettons un rcapitulatif de votre commande. Vous trouverez ci-dessous la liste des produits commands, les informations de facturation et les instructions concernant la livraison et le paiement choisi. Section rappeler : Dans la section Dtails client travers l'option Texte d'entte.

Exemple :

Donnes de l'utilisateur Description : C'est la partie contenant les donnes de facturation et d'envoi saisies par l'utilisateur dans le bon de commande. Le bon de commande peut tre cr dans la Section Dtails client ; pour indiquer des donnes d'envoi diffrentes de celles de la facturation, slectionnez l'option Afficher le formulaire des donnes d'expdition.

Section rappeler :

178

Rcapitulatif de la commande Description : C'est un tableau rsumant tous les produits commands: il indique la quantit et le total partiel par produit ainsi que le total complet de la commande. Vous ne devez rien dfinir de particulier : le tableau du rcapitulatif est cr automatiquement en fonction de la commande.

Section rappeler :

Type de paiement Description : Il doit fournir, selon la mthode choisie par l'utilisateur, les instructions et les informations utiles lui permettant d'excuter le paiement. Pour la mthode de paiement "Virement bancaire" : Les donnes requises pour le paiement par virement bancaire sont les suivantes : XXX YYY ZZZ Remarque : au terme du paiement, il est ncessaire d'envoyer une copie du reu avec le Numro de la commande. Section rappeler : Type de livraison Description : Il doit rappeler l'utilisateur la mthode d'envoi qu'il a choisi en lui fournissant, si possible, des informations sur les temps et le modalits de la livraison, ainsi que toute information utile. Pour le type d'expdition "Livraison par exprs " : Expdition travers Livraison par exprs. Les produits seront livrs dans 1-2 jours ouvrables. Section rappeler : Texte de pied de page Description : C'est la formule finale exprimant la disponibilit et les salutations, suivies de la signature. 179 Dans la section Message e-mail de la fentre Type de livraison. Dans la section Message e-mail de la fentre Type de paiement.

Exemple :

Exemple :

Exemple :

Veuillez nous contacter pour obtenir de plus amples informations. Nos meilleures salutations, Service commercial. Dans la section Dtails client travers l'option Texte de pied de page.

Section rappeler :

Comme pour tous les email composs et envoys automatiquement, le programme applique l'email de confirmation de la commande le style graphique dfini dans Styles et modles | Section E-mail. L'email de confirmation de la commande est aussi envoy en format texte.

Panneau de contrle
Pour chaque site ralis, WebSite X5 prdispose automatiquement un panneau de contrle enligne permettant l'administrateur d'excuter des oprations comme : grer les commentaires laisss par les utilisateurs aux posts du Blog ou les messages insrs sur le Guestbook, avoir certaines informations de diagnostic sur le site, afficher des informations sur l'optimisation pour les moteurs de recherche. Tous les utilisateurs insrs dans le groupe Administrateur dans la section Gestion de l'accs disponible l'tape 4 - Paramtres avancs peuvent accder au panneau de contrle. Pour accder au panneau de contrle, il suffit de :

Se connecter l'URL www.miosito.it/admin o www.miosito.it est l'URL du site. Saisir les donnes d'accs (Nom utilisateur et Mot de passe).
ce stade, le panneau de contrle prsente quelques sections :

Blog : permet de grer les commentaires laisss par les utilisateurs en rponse

aux Posts des Blogs associs au site web. (voir comment grer les commentaires aux Posts du Blog travers le panneau de contrle enligne). Guestbook insr dans le site Web travers le Widget disponible dans l'Objet HTML et Widgets. au site web et au serveur o il est publi.

Guestbook : permet de grer les messages laisss par les utilisateurs sur le WebSite Test : permet d'afficher certaines informations de diagnostic relatives
Dans le dtail les contrles effectus concernent :

- Version de PHP installe - il est ncessaire que le serveur supporte le langage PHP pour que fonctionnent correctement l'envoi de l'email prvu pour l'Ob180

jet Formulaire d'envoi d'email et pour le Panier e-commerce, ainsi que l'accs aux Pages protges travers le nom utilisateur et le mot de passe. Le programme vrifie donc si le serveur offre ce support et, si oui, il indique la version PHP supporte. - Support des sessions - en plus du support pour le PHP, pour que l'accs aux Pages protges soit admis seulement aprs la saisie correcte des donnes d'accs, le serveur doit aussi supporter les sessions. - Dossier avec accs par criture - pour pouvoir stocker et grer les commentaires aux Posts de Blog et, plus en gnral, pour le fonctionnement du Widget (voir l'objet HTML et Widgets) demandant la collecte de donnes, il faut indiquer un dossier sur le serveur autorisant l'criture travers l'option approprie disponible dans Blog | Section Commentaires. Le programme vrifie d'abord que le dossier avec accs par criture indiqu existe et, si oui, que ce dossier autorise l'criture des donnes. - Assistance MySQL et paramtrages de la base de donnes - quand vous dfinissez un Objet Formulaire email, vous pouvez indiquer comme mthode d'envoi des donnes "Envoyer les donnes une base de donnes" (voir l'Objet Formulaire email| Section Envoi) : dans ce cas, vous devez fournir les paramtres de connexion la base de donnes sur le serveur utiliser. Le programme vrifie ensuite que le serveur supporte MySQL et, si oui, que les paramtres indiqus permettent rellement d'accder et de travailler sur la base de donnes.

SEO : permet d'afficher certains rsultats relatifs l'indexation du site de la part

des moteurs de recherche. Dans le dtail, elle indique l'tat du Sitemap, les cls de recherche indexes et les messages envoys par GoogleBot (le spider Web de Google qui contrle le Web pour mettre jour les index).

Comme grer les commentaires des Blog partir du panneau de contrle

Le Blog est une sorte d'agenda o l'on publie des articles de diffrente nature qui donne la possibilit aux lecteurs de laisser des commentaires. Si la communaut des lecteurs est active et suffisamment stimule par la qualit des articles, des discussions intressantes peuvent se dvelopper sur le thme en cours. Pour donner la possibilit aux lecteurs de laisser des commentaires aux posts publis, vous devez configurer le Blog l'aide des options prsentes dans la Section Commentaires de la fentre Blog. Vous devez notamment :

Slectionner l'option Permettre l'entre de commentaires pour les articles

du blog.

Indiquer le chemin du dossier du serveur avec l'accs par criture, savoir

181

le dossier ayant l'accs l'criture du fichier de la part du code PHP.

Dcider d'activer le contrle anti-spam "Captcha" pour l'entre des commentaires.

Indiquer l'E-mail pour l'envoi accus de rception des commentaires, savoir l'adresse e-mail laquelle vous voulez recevoir un courriel chaque fois qu'un lecteur laissera un commentaire. tre d'abord approuvs.

Indiquer si les commentaires peuvent tre publis immdiatement enligne ou

Ceci tant fait, vous pouvez insrer les articles et publier le Blog. Au bas des articles du Blog, apparatra automatiquement un formulaire o les lecteurs pourront insrer leurs commentaires. travers ce formulaire sont requis : Nom, e-mail, site Internet et message. Tous les champs sont obligatoires sauf celui relatif au site Internet. ce stade, ds qu'un lecteur laissera un commentaire, un e-mail de notification sera automatiquement envoy l'adresse e-mail indique. Si vous avez slectionn l'option Afficher commentaires aprs l'approbation dans le panneau de contrle, pour que le commentaire soit affich enligne au bas du Post relatif, il faut que ce dernier soit approuv l'aide de la commande du panneau de contrle qui est automatiquement cr par WebSite X5. Le panneau de contrle est disponible l'URL www.miosito.it/admin, o www.miosito.it est l'URL du site auquel le Blog est reli, il est disposition de tous les utilisateurs insrs dans le groupe Administrateur la section Gestion de l'accs disponible l'tape 4 - Paramtres avancs. La section Blog du panneau de contrle propose deux botes liste droulante contenant la liste des catgories et des articles qui y sont relis. travers ces menus, vous pouvez identifier le Post dont vous voulez afficher les commentaires reus. Voici la liste des commentaires : chaque commentaire est accompagn du nom de l'auteur, de son adresse e-mail, du texte relatif, de la date et l'heure laquelle il a t envoy. Si le nom de l'auteur est disponible, le programme tablit automatiquement un lien vers son site Internet. Contrairement au Blog o les commentaires sont affichs dans l'ordre d'entre (le dernier insr reste au fond de la liste), dans le panneau de contrle, les commentaires sont affichs dans l'ordre chronologique en partant du plus rcent. Pour grer les commentaires, il faut donc :

Accder au panneau de contrle enligne et se connecter, puis ouvrir la section

Blog.

Identifier, dans les listes droulantes contenant la liste des catgories insres
182

et des posts relatifs, le post dont vous voulez afficher les commentaires.

Parcourir la liste des commentaires reus pour l'article slectionn et grer l'affichage des commentaires sur le Blog l'aide des commandes : trle et ne pas le publier sur le Blog.

- Supprimer : pour supprimer le commentaire de la liste du panneau de con- Approuver/dsapprouver : pour approuver un commentaire, et donc permettre qu'il soit affich sur le Blog, ou le dsapprouver, et donc le supprimer de la liste des articles affichs sur le Blog. Un commentaire dsapprouv n'est pas supprim des listes prsentes dans le panneau de contrle.

Il est fondamental de grer l'affichage des commentaires sur le Blog pour se protger des actions de spam et modrer les discussions en liminant les messages vexants, ne rpondant pas au thme ou au style que vous voulez garder.

183

184

tape 5. Exporter

185

Exporter
Au terme d'une session de travail ou de la cration du site entier, l'tape 5 WebSite X5 permet de choisir le mode d'exportation pour le projet courant. Tout d'abord, grce au moteur FTP prvu, vous pouvez publier directement les fichiers sur le serveur : le systme gre aussi la connexion sre et vous pouvez conomiser du temps en travaillant en multi-connexion et en publiant, en cas de mises jour, seulement les fichiers modifis. Vous pouvez galement exporter le site sur un disque de votre ordinateur pour disposer sur place des fichiers qui seront publis sur le serveur. Enfin, tous les fichiers du projet peuvent tre regroups dans un seul dossier pour tre facilement transfrs vers un autre ordinateur et continuer travailler. Voici dans le dtail les options d'exportation disponibles : Exporter le site sur Internet Exporter le site sur un disque Exporter le projet

Exportation du site sur Internet

Cette fentre permet de publier le site cr sur Internet. WebSite X5 met votre disposition un moteur FTP interne pour excuter directement la publication enligne des sites raliss. En effet, tous les fichiers permettant d'afficher correctement un Site sur Internet sont enregistrs sur l'ordinateur o vous avez travaill. Pour que les utilisateurs qui se connectent Internet puissent voir vos pages, vous devez copier ces fichier sur un serveur, savoir un ordinateur continuellement reli au rseau.

186

Pour exporter tous les fichiers relatifs au site, vous devez tout d'abord indiquer les Paramtres de connexion suivants (communiqus par le fournisseur de votre espace Web) :

Type de serveur : il permet d'indiquer le type de connexion utiliser pour publier le fichier du site sur le serveur. Selon les caractristiques support par votre serveur, vous pouvez choisir parmi : - FTP - File Transfer Protocol : prvu par dfaut, c'est l'un des premiers protocoles de transmission des donnes qui a t introduit et largement rpandu. La spcification d'origine de FTP ne prvoit aucun chiffrage pour les donnes changes entre le Client et le Serveur. - SFTP - SSH File Transfer Protocol : c'est un protocole de rseau qui prvoit le transfert sr des donnes, grce l'tablissement de sessions distantes chiffres, ainsi que la fonction de manipulation sur les fichiers distants. - FTPS - FTP over explicit TLS/SSL : pour rsoudre les problmes de scurit, il ajoute au protocole FTP original un chiffrage SSL/TLS ainsi qu'une srie de commandes et de codes de rponse.

Adresse FTP : saisissez votre adresse FTP. Voici un exemple d'adresse FTP :
"ftp.websitex5.com", o "websitex5.com" est le nom du domaine. de passe.

Nom Utilisateur / Mot de passe : saisissez votre Nom Utilisateur et votre Mot Enregistrer le mot de passe : si vous slectionnez cette option, le mot de passe
indiqu sera enregistr et vous ne devrez plus le saisir l'avenir. Par ailleurs, vous pouvez indiquer certaines Options, non indispensables pour tablir la connexion au serveur, comme :

Dossier de destination : dans ce champ, vous pouvez indiquer le dossier de

destination attribu par le fournisseur d'accs Web. Si vous ne tapez aucun chemin, vous pourrez le choisir dans la page-cran suivante de WebSite X5.

Port : permet d'indiquer le port du serveur sur lequel est tablie la connexion

(communiqu par le fournisseur de l'espace Web). Dans la plupart des cas, il n'est pas ncessaire de modifier la valeur dfinie par dfaut. veur que le Moteur FTP du programme doit ouvrir simultanment pour publier le fichier du site. Le nombre de connexions quivaut au nombre maximum de fichiers pouvant tre exports simultanment.

Transferts simultans : permet d'indiquer le nombre de connexions au ser-

187

La connexion simultane est une fonction qui doit tre supporte par le serveur utilis. Si tel est le cas, si vous augmentez le nombre de connexions simultanes, au-del d'une certaine limite, vous n'obtiendrez pas un avantage rel en termes de temps. Il est conseill de commencer par 3 puis d'essayer de modifier ce paramtre, en l'augmentant progressivement, pour identifier le meilleur nombre de connexions en fonction de la taille de la bande gre par le serveur utilis. Indicativement, il est dconseill de ne pas dpasser les 10 connexions simultanes.

Utiliser FTP passif : active par dfaut, elle prvoit l'utilisation du FTP passif
comme mode de publication. Ce mode est conseill car il assure une plus grande compatibilit de connexion avec le serveur.

Activer la compression gzip : active par dfaut, elle prvoit que les fichier

relatifs au site soient comprims pendant l'exportation, pour terminer la publication le plus rapidement possible. Les serveurs ne supportent pas tous la compression en gzip : si l'option est active et le serveur utilis ne la supporte pas, les fichiers non seront pas comprims et la publication sera tout de mme excute. La compression gzip fonctionne trs bien avec les fichier de grosse taille (contenant par exemple beaucoup d'images ou de vidos) mais elle est dconseille avec les fichiers de petite taille.

Aprs avoir dfini les paramtres ncessaires pour effectuer la connexion au serveur, vous pouvez indiquer le type de chargement, savoir ce que vous voulez effectivement publier :

Exporter tous les fichiers du site Internet : dans ce cas, tout le site sera publi. Ce mode est indiqu lors de la premire publication d'un projet ou aprs avoir effectu de nombreuses et grosses modifications au site.

Exporter uniquement les fichiers modifi depuis l'exportation du... : dans

ce cas, vous publiez seulement les fichiers qui ont t modifis aprs l'exportation effectue la date indique. Ce mode est appropri pour les sites qui sont constamment mis jour et requiert un temps infrieur par rapport la publication complte du site. La date de publication est enregistre dans le projet : pour cette raison, aprs avoir publi les fichiers, il est important d'enregistrer toujours les modifications. Mme si vous demandez seulement l'exportation des fichiers modifis, les pages HTML et les fichiers de ressources (figurant dans le sous-dossier Res) seront republis : il est en effet trs probable qu'elles aient t mises jour.

188

 Exporter seulement le Blog et les Flux RSS : dans ce cas, vous publiez seulement les fichiers .PHP et .XML du Blog et les fichiers .XML du Flux RSS grs travers les sections appropries de l'tape 4 - Paramtres avancs. Ce mode, qui est activ seulement si le Blog et/ou le Flux RSS a t dj publi, est indiqu si vous avez ajout seulement de nouveaux posts dans le Blog ou des nouvelles dans le Flux RSS mais vous n'avez effectu aucune mise jour du Site.

Pratiquement
Aprs avoir dfini les paramtres requis, il suffit de cliquer sur le bouton Suivant pour effectuer la connexion au serveur. La connexion au serveur tant tablie, les dossiers prsents s'affichent dans une fentre approprie. ce stade, l'aide des commandes disponibles, positionnez-vous sur le dossier o vous voulez publier les fichiers relatifs au site.

Le dossier o vous voulez publier le site devrait contenir un fichier index.html. Si vous n'tes pas sr du dossier slectionner, contactez votre Fournisseur d'accs : tous les dossiers prsents sur le Serveur ne sont pas faits pour la publication. Voici les commandes disponibles pour agir sur les dossiers et les fichiers prsents sur le serveur : Dossier suprieur : Permet d'accder au dossier suprieur. Actualiser : Permet de recharger le contenu du dossier courant. Nouveau dossier : Permet de crer un nouveau dossier. Supprimer : permet d'liminer le fichier ou le dossier slectionn. Renommer : permet de modifier le nom du fichier ou du dossier slectionn. Tlcharger un fichier sur le serveur / Tlcharger un fichier partir du serveur : permettent, respectivement, de publier sur le serveur un ou plusieurs fichiers qui ne font pas partie du projet et de tlcharger sur l'ordinateur local des fichiers dj publis sur le serveur. 189

Afficher la liste / Afficher les dtails : Elles permettent de dfinir comment doit tre affiche la liste des fichiers. Enfin, vous disposez d'une section permettant de choisir si afficher :

Journal : elle affiche tous les messages ( savoir les logs) et les ventuelles erreurs engendres pendant la communication avec le serveur.

Fichiers partitionns : elle affiche les fichiers (le nombre maximum de ces fi-

chiers dpend des connexions simultanes dfinies) devant tre publis. Pour chaque fichier, une barre de progression affiche l'tat d'avancement de la publication. Au terme de la publication, le fichier est supprim de la queue de transfert. Pendant l'exportation, WebSite X5 copie sur le serveur tous les fichiers contenus dans le dossier d'enregistrement. Si ce dossier contient des fichiers portant le mme nom que les fichiers publis, ils seront crass.

Exportation termine
Aprs avoir men bien la publication enligne (voir Exportation du site sur Internet), cette fentre permet d'excuter certaines actions excuter pour publiciser le site ralis travers des canaux comme la Gallery de WebSite X5, Google, Facebook et Twitter. Dans le dtail, les options disponibles sont : Le site Web est en ligne ! Permet de lancer le navigateur Internet prdfini pour naviguer immdiatement sur le site enligne et contrler que tout fonctionne correctement. WebSite X5 Gallery Permet de se connecter la section consacre la Galerie de My.WebSiteX5.com pour signaler le site que vous venez de publier. Nous vous rappelons que la Galerie est une collecte de sites raliss avec WebSite X5 et signals directement par leurs auteurs. Mettre jour le plan du site sur Google Permet d'envoyer Google la signalisation du Plan du site publi pour demander son indexation de la part du spider du moteur. Diffuser la publication sur Facebook Permet d'afficher une page de Facebook o, aprs la connexion, vous pouvez crire un commentaire pour signaler tous vos contacts que vous avez publi le site. Le commentaire sera affich sur le tableau de votre profil. 190

Diffuser la publication sur Twitter Permet d'afficher une page de Twitter o, aprs la connexion, vous pouvez crire un tweet pour signaler tous vos contacts que vous avez publi le site. Le tweet sera affich sur le timeline de vote profil.

Exportation sur disque

Cette fentre permet de publier le site cr sur un autre disque de l'ordinateur. L'exportation sur disque permet d'avoir une copie sur l'ordinateur des fichiers qui seront publis sur le Serveur, pour pouvoir la mettre sur CD/DVD/USB ou modifier les pages HTML cres avant la publication. Pour exporter tous les fichiers du projet, il suffit de spcifier :

Dossier de destination : permet d'indiquer le dossier o vous voulez exporter

le site cr. Si le dossier spcifi n'existe pas, il sera automatiquement cr. Pour crer une copie de sauvegarde du projet, utilisez la fonction Exporter le projet : vous disposez ainsi d'une copie des fichiers originaux du projet et non pas des fichiers crs par le programme pour la publication.

Exportation du projet
Cette fentre permet d'exporter dans un seul fichier comprim tous les fichiers associs au projet pour les transfrer sur un autre ordinateur ou crer une copie de sauvegarde. Pour exporter les fichiers de projet, il suffit d'indiquer :

Dossier de destination dans ce champ, tapez le dossier o le fichier de projet

doit tre export. Si le dossier indiqu n'existe pas, il est automatiquement cr. Aprs l'exportation, le programme cre dans le dossier de destination indiqu un seul fichier comprim portant le nom du projet, suivi de l'extension .IWZIP : ainsi, pour le projet "MonProjet" le programme crera le fichier MonProjet.iwzip. Dans ce fichier comprim, le programme enregistre le fichier de projet (fichier .IWP) et tous les fichiers qui y sont relis (par exemple, relatifs aux images, vidos ou animations importes). Le fichier comprim .IWZIP pourra tre transfr sur un ordinateur diffrent de celui sur lequel il a t cr et ouvert dans le programme travers la fonction Importer, disponible dans la fentre Choix du projet.

191