1

Copyright 2009 Incomedia. All rights reserved.

OfficialWebsite:

www.websitex5.com

info@incomedia.eu -www.incomedia.eu

2

Copyright 2009 Incomedia. All rights reserved.

Information in this manual is subject to change without notice. No part of this manual may bereproduced or transmitted in any form or by any means, electronic or mechanical, for anypurpose, without the express written permission of Incomedia.

Please remember that existing movies, sounds or images that you may want to use in your pro-ject may be protected under copyright law. The unauthorized incorporation of such materialinto your new work could be a violation of the rights of the author. Please be sure to obtainany permission required from such authors.

Incomedia, WebSite X5, WebSite X5 Evolution are trademarks of Incomedia s.r.l. Other brandor product names mentioned herein are trademarks or registered trademarks of their respec-tive owners.

Written and designed at Incomedia s.r.l.

3

Sommaire

Information sur la guide.......................................................... 5Travailler avec WebSite X5 ...................................................... 6Environnement de Travail........................................................ 7

Etape 1 – Paramètres généraux

Bienvenue dans Incomedia WebSite X5 .......................................10Choix du projet ...................................................................11Paramètres généraux ............................................................11Choix du menu ....................................................................15Choix du modèle..................................................................16Modèle personnalisé .............................................................19Modification du modèle .........................................................22

Etape 2 – Création du plan du site

Création du plan du site.........................................................33Plan du site et SiteMap ..........................................................39Exemple de plan..................................................................40

Etape 3 – Création de la page

Définition de la mise en page ..................................................42Insertion des objets ..............................................................44Objet Texte .......................................................................46Paramètres RollOver .............................................................49Objet Image .......................................................................50Objet Tableau.....................................................................53Objet Animation Flash...........................................................57Objet Vidéo/Son..................................................................58Objet Galerie d'images ..........................................................59Objet Diaporama .................................................................64Objet Formulaire d'envoi d'email ..............................................68Objet Code HTML.................................................................76Compteur des visites FrontPage ...............................................78Insertion d'Objets Internet......................................................78Objet Liste des produits.........................................................79Editeur graphique ................................................................82Format de la cellule .............................................................85Insertion des liens ................................................................87Fenêtre Couleur ..................................................................92

4

Etape 4 – Paramètres avancés

Paramètres avancés ............................................................. 94Style du menu de premier niveau ............................................. 95Style de liste déroulante ....................................................... 99Style de sous-menu.............................................................101Style de texte ...................................................................103Page d'introduction.............................................................106Coin publicitaire ................................................................108Blog ...............................................................................110Blog – Panneau de contrôle ...................................................116Flux RSS ..........................................................................118Zone réservée ...................................................................120Panier virtuel e-commerce....................................................122

Etape 5 – Exporter

Exportation du site .............................................................132Exportation du site sur Internet ..............................................132Exportation sur disque .........................................................135Regroupement des fichiers du projet........................................135

Remarques

Remarques sur la transparence des images ................................137

5

Information sur la guide

Ce guide de WebSite X5 est une référence de la version EVOLUTION v. 8dont il explique toutes les fonctionnalités.

Pour toute autre version du programme, reportez-vous au présent guidesans oublier les limitations de chaque version.

La section "Travailler avec WebSite X5" contient des remarques accompagnéesdes icônes suivantes :

Plus d'informationsElle donne plus d'informations sur le sujet.

PratiquementElle fournit des suggestions sur comment agir.

ApprofondissementsElle présente une remarque d'approfondissement théorique ou tech-nique.

Attention !Elle présente une remarque à laquelle il faut prêter attention.

SuggestionsElle donne des idées pratiques sur comment utiliser les fonctionsprésentées.

6

Travailler avec WebSite X5

WebSite X5 opère comme un assistant qui vous guide à travers le processus ens'assurant que vous complétiez toutes les étapes nécessaires pour que votresite ait un aspect professionnel et soit esthétiquement satisfaisant.

Les étapes nécessaires pour la création de votre site sont 5 en tout :

1. Paramètres générauxAprès avoir choisi le projet sur lequel vous voulez travailler et avoir inséréquelques informations indispensables, entre autres la Description et lesmots-clés nécessaires à l'indexation sur les moteurs de recherche, WebSiteX5 vous permet de définir l'aspect graphique du site : vous disposez d'unegalerie de plus de 1400 modèles où vous pourrez choisir le plus approprié àvotre site, ainsi que les couleurs que vous préférez. À partir d'un éditeurintégré au logiciel, vous pourrez personnaliser les sections relatives à l'en-tête et au pied de page ; vous pourrez également créer et utiliser un mo-dèle personnel animé sous Flash.

2. Création du plan du siteÀ partir de la page d'accueil, WebSite X5 permet de définir la structuresous forme arborescente. Vous disposez de quatre niveaux d'approfondis-sement permettant d'organiser un nombre illimité de pages. Le menu denavigation sera créé dynamiquement en fonction du plan. Vous pourrez, àtout moment, modifier le plan du site pour le mettre à jour.

3. Création des pagesPour créer une page et la mettre en page, faites glisser simplement les ob-jets voulus : textes même avec RollOver, images, Animations Flash, Vidéoset Audio, Tableaux formatés, Diaporamas, galeries d'images, objets HTML,formulaires pour la collecte de données et l'envoi d'e-mail. Les objets im-portants peuvent être personnalisés et complétés par des liens vers desressources internes et externes. Grâce à un éditeur graphique intégré,vous pourrez faire pivoter l'image, corriger ou appliquer des filtres, desmasques et des cadres sur les images importées sans avoir recours à un lo-giciel extérieur.

4. Définition des paramètres avancésPour compléter la personnalisation du site, vous pouvez définir le style desmenus, des textes et de la barre de défilement. L'éditeur permet égale-ment de créer des boutons tridimensionnels pour lesquels vous pouvez pré-voir l'effet qui apparaît lors du passage du pointeur de la souris (effetmouse over). Par ailleurs, le site peut être complété avec des outils telsque : une page d'accueil, éventuellement animée sous Flash, une bande

7

sonore et le choix de la langue de consultation ; zones réservées à traversun mot de passe, des Flux RSS, des Blogs, un panier virtuel e-commerce.

5. ExporterWebSite X5 permet aussi de publier sur Internet le site créé : le pro-gramme active une session FTP à travers laquelle tous les fichiers nécessai-res sont transférés sur le serveur pour afficher le site directement sur leWeb. En cas de mise à jour, vous ne pouvez publier que les fichiers modi-fiés.En plus de la publication sur Internet, vous pouvez exporter un projet surun autre disque ou grouper tous les fichiers pour les déplacer aisémentvers un autre ordinateur.

Environnement de Travail

Comme il s'agit d'un guide, WebSite X5 propose une série de pages-écranspermettant d'insérer les informations nécessaires pour créer et publier un siteInternet complet, fonctionnel et graphiquement attractif.

Toutes les pages-écrans du programme ont la même interface graphique avecune barre d'outils, en haut, en bas et sur le coté, et une fenêtre centrale quichange en fonction de la phase de travail et par conséquent des informationsrequises.

Barre d'outils supérieure

Aide : permet d'afficher l'aide enligne. La flèche à gauche du bouton Aidepermet aussi d'accéder aux commandes :

Guide [Résumé] : permet d'afficher l'aide enligne.

Allez à www.websitex5.com : permet d'accéder au site Internet de ré-férence du logiciel.

Tutorial : permet d'accéder à une série de Tutoriaux vidéos expliquantcomment travailler avec le logiciel.

WebSite X5 Gallery : permet d'accéder à une riche galerie de sitescréés et signalés directement par les utilisateurs.

WebSite X5 Templates : permet d'afficher et de télécharger de nou-veaux modèles graphiques, en les choisissant parmi ceux proposés parIncomedia ou d'autres utilisateurs, aussi bien gratuits que payants.

Forum officiel : permet d'accéder directement au forum officiel deWebSite X5. Le forum, actif en italien, anglais et allemand, rassemble

8

une communauté animée d'utilisateurs : c'est un lieu de rencontre oùl'on peut échanger des informations, des conseils et des expériences.

Rechercher des mises à jour : permet de vérifier s'il existe une mise àjour de la version logicielle installée.

Informations sur WebSite X5 : permet d'ouvrir une fenêtre contenantdes informations relatives au logiciel.

Enregistrer : permet d'enregistrer le projet sous le même nom. La flèche àgauche du bouton Enregistrer permet d'accéder aux commandes:

Enregistrer sous : permet d'enregistrer le projet sous un nom différentde celui d'origine afin de créer une copie du projet.

Enregistrer à chaque test : activée par défaut, elle permet d'enregis-trer automatiquement le projet chaque fois qu'à travers la commandeTester vous affichez l'aperçu dans le navigateur.

Créer une copie de sauvegarde à chaque sauvegarde : activée par dé-faut, une copie de sauvegarde est automatiquement créée chaque foisque vous enregistrez le projet.

Créer une copie de sauvegarde à chaque exportation : une copie desauvegarde du projet est automatiquement créée chaque fois que vousexportez le site.

Lors de chaque enregistrement, ou selon l'option programmée lors dechaque exportation, le programme garde une copie de la version précé-dente et la stocke avec l'extension .BWS. Vous pourrez renommer ce fi-chier avec l'extension .IWP pour l'utiliser comme copie de sauvegarde.

Tester : permet d'afficher à travers un navigateur interne un aperçu dusite. à l'aide de la flèche à gauche du bouton Tester vous pouvez accéderaux options Tester tout le site et Tester cette page qui permettent de tes-ter toutes les pages ou une seule page. Dans ce dernier cas, l'aperçu est af-fiché plus rapidement.Vous pouvez aussi afficher l'aperçu du site en appuyant sur la touche F5.

Chaque fois que vous testez le fonctionnement du site en cliquant sur lacommande Tester, le programme effectue la première création, enregis-tre éventuellement le site, puis affiche l'aperçu dans le navigateur. Se-lon la complexité du site, le nombre et l'optimisation des ressources in-sérées, ce processus pourrait requérir un certain temps. Pour réduire lestemps d'attente, le programme maintient automatiquement dans un dos-sier temporaire une copie des 10 derniers projets : ainsi, quand vous

9

commencez à travailler, vous ne devez pas attendre que le site soit re-créé mais seulement remis à jour.

Il est donc important d'enregistrer le projet après l'avoir affiché: vousmaintenez ainsi la synchronisation entre le projet réel et la copie enre-gistrée automatiquement dans le dossier temporaire. Pour ce faire, utili-sez l'option Enregistrer à chaque test qui est activée par défaut.

Barre d'outils latérale

WebSite X5 permet de réaliser un site internet en 5 étapes. Ces boutons indi-quent la phase du projet en cours et permettent de passer d'une phase à l'au-tre même si elles ne sont pas consécutives.

1. Paramètres généraux

2. Création du plan du site

3. Création des pages

4. Paramètres avancés

5. Exporter

Barre d'outils inférieure

Précédent : permet de revenir à la fenêtre précédente sans enregistrer lesmodifications.

Suivant : permet de passer à la fenêtre suivante pour continuer la créationdu site.

10

Etape 1 – Paramètres généraux

Bienvenue dans Incomedia WebSite X5

Cette fenêtre d'ouverture de WebSite X5 propose des liens vers des ressourceset des matériaux enligne servant à mieux travailler avec le logiciel :

TutorialCe lien lance l'affichage de Tutoriaux vidéos servant à comprendre le fonc-tionnement et l'utilisation du logiciel.

GalleriePermet de visiter la Galerie des sites créés par d'autres utilisateurs et de signa-ler vos sites.

ModèlesPermet d'ajouter de nouveaux modèles pris dans la section Templates X5du site officiel de WebSite X5.

Assistance enligneLance le lien vers le Centre d'assistance, disponible en italien, anglais etallemand, où vous trouverez une réponse aux questions les plus fréquen-tes.

ForumLance le lien vers le forum officiel de WebSite X5, disponible en italien,anglais, allemand et français, pour échanger des expériences et des idéesavec la communauté de WebSite X5.

Mises à jourLance le lien vers la page Internet permettant de vérifier l'existenced'éventuelles mises à jour logicielles pour la version courante de WebSiteX5 pour la version installée de WebSite X5.

Comme WebSite X5 est un assistant, c'est-à-dire qu'il guide la réalisation dessites Internet, pour travailler avec ce programme, il suffit d'insérer les infor-mations dans les différentes fenêtres et d'utiliser les boutons Suivant et Pré-cédent pour se déplacer d'une fenêtre à l'autre.

11

Choix du projet

Cette boîte de dialogue permet d'indiquer le projet sur lequel vous vouleztravailler.

Vous pouvez créer un nouveau projet ou modifier un projet existant.

Créer un nouveau projet : si vous sélectionnez cette option, vous procé-dez à la réalisation d'un nouveau site. Pour enregistrer le projet créé, cli-quez sur le bouton Enregistrer situé dans la barre d'outils supérieure.

Modifier un projet existant : si vous sélectionnez cette option, vous ou-vrez un projet créé précédemment pour effectuer la modification. Pourchoisir le projet, ouvrez la liste déroulante contenant les derniers projets

utilisés ou cliquez sur le bouton pour parcourir les ressources de l'ordi-nateur. Le nom du projet ouvert est affiché dans le champ approprié.

Paramètres généraux

Cette fenêtre permet de collecter, dans les champs appropriés, les informa-tions nécessaires pour configurer les paramètres de base du projet en cours.

Elle est composée des sections suivantes :

Section Base

Section Avancées

Dans la section Base de la fenêtre Paramètres généraux, entrez les donnéessuivantes :

Titre du site : dans ce champ, tapez le titre du site qui sera affiché dansla barre de titre du Navigateur.

Auteur du site : tapez votre nom pour être identifié comme auteur dusite. Le nom de l'auteur est indiqué dans le code XHTML des pages réali-sées comme valeur du Méta Tag <author> : vous mettez ainsi votre signa-ture sur votre travail.

Adresse Url du site : entrez l'adresse Url à laquelle le site sera disponibleaprès sa publication. Cette information est nécessaire pour le bon fonc-tionnement d'éventuels Flux RSS, du panier e-commerce et pour le SiteMapqui est automatiquement créé et relié.

Description du site : tapez une brève description de votre site. La descrip-tion du site doit être succincte, efficace et significative : elle sera en effet

12

utilisée dans le code XHTML comme contenu du Méta Tag <description> etsera analysée par les spiders des moteurs de recherche.

Mots-clés pour la recherche : dans ce champ, vous pouvez entrer une listede mots-clés (séparés par une virgule) qui sont importants pour le site. Lesmots-clés seront insérées dans le code XHTML comme valeur du Méta Tag<keywords> et seront analysés par les spiders des moteurs de recherche.

La description de la liste des mots-clés insérés dans ce champ est auto-matiquement utilisée pour toutes les pages. Si vous souhaitez associer àune page spécifique une description et une liste de mots-clés différen-tes, accédez à Création du plan du site, cliquez sur Propriétés de lapage et utilisez les fonctions disponibles dans la fenêtre qui apparaît.

Langue du contenu : dans ce champ, vous définissez la langue du site. Se-lon la langue choisie, le programme utilise différentes versions pour lestextes qu'il insère automatiquement : des liens vers des ancres internes,des boutons de l'objet Diaporama, des étiquettes de l'objet formulaired'envoi e-mail, des étiquettes et des textes des paniers virtuels e-commerce, des textes du plan du site. Ces textes sont pris automatique-ment dans les fichiers au format INI figurant dans le sous-dossier LANGS dudossier d'installation du logiciel.

Les fichiers au format INI sont de simples fichiers de texte que vous pou-vez ouvrir avec un éditeur quelconque (par exemple, Bloc-notes de Win-dows) et modifier librement : en respectant la structure proposée, vouspouvez créer des fichiers INI relatifs à de nouvelles langues, qui ne sontpas prévues à l'origine.

Icône du site : ce champ permet de choisir une icône (fichier .ico ou.bmp) à associer à la page du site web. Cette icône sera affichée à gauchede l'URL dans la barre d'adresses du navigateur Internet.

En général, comme icône associée au site (ou favicon de l'anglais Favo-rite Icon), il faut utiliser une image au format .ICO de 16x16 pixels,32x32 pixels ou 48x48 pixels. WebSite X5 permet d'importer aussi desfichiers .BMP : dans ce cas, le programme crée automatiquement unecopie dans un fichier .ICO de 48x48 pixels à 16 couleurs avec palette op-timisée et utilise cette copie comme favicon.

13

Dans la section Avancées de la fenêtre Paramètres généraux, entrez les don-nées suivantes :

Code personnalisé pour la section HEAD : ce champ affiche une portiondu code HTML relative à la section <head>. Vous pouvez modifier les va-leurs des Méta Tags présents pour personnaliser le code de toutes les pagesdu site.

Méta Tag de vérification pour Google WebMaster Tools : entrez le MétaTag de vérification nécessaire pour jouir des services de Google WebMasterTools.

Google WebMaster Tools est un kit d'outils mis à disposition gratuite-ment par Google pour permettre aux WebMaster de rendre les sitesconformes à ses indications. Ces outils expliquent comment Google voitun site et vous aident à diagnostiquer les éventuels problèmes : si vousles utilisez correctement, ils vous aideront à améliorer la visibilité devotre site sur le Moteur.

Pour utiliser Google WebMaster Tools, vous devez disposer d'un compteGoogle puis démontrer que vous êtes le véritable propriétaire du site àanalyser. Une des méthodes pour démontrer cela est de copier un MétaTag fourni par Google et de le coller sur la page d'accueil du site dans lapremière section <head> de la page, avant la section <body>.

Résumons les étapes à suivre :

Vous devez disposer d'un compte sur Google.

Accédez à la page de présentation de Google WebMaster Tools etconnectez-vous.

Ajoutez le site à analyser dans le Tableau puis ouvrez la section pouraccéder aux rapports disponibles.

Dans la page Introduction, cliquez sur "Vérifier le site".

Choisissez comme méthode de vérification "Ajouter un Méta Tag".

Copiez le Méta Tag fourni par Google et collez-le dans le champ MétaTag de vérification pour Google WebMaster Tools; WebSite X5 insè-rera le Méta Tag dans le code des pages.Le Méta tag de contrôle fourni par Google se présente comme suit:

<meta name="verify-v1" content="VOPR4uw/YqV+MWVmJt0niEQ=" />

14

Code d'activation des statistiques : tapez le code nécessaire pour activerles services de statistiques du site et obtenir des informations utiles sur laquantité et la qualité des visites qu'il reçoit.

Le réseau offre de nombreux services de statistiques dont le plus connuest celui fourni par Google : Google Analytics. Cet outil, complètementgratuit, permet de prédisposer de nombreux rapports pour contrôler etanalyser, même d'une manière approfondie, les accès au site. GoogleAnalytics peut être utilisé à différents niveaux : vous pouvez demandersimplement le nombre de visites effectuées ou contrôler la progressiondes campagnes publicitaires répandues par le programme Google Ad-sense.

Pour pouvoir exploiter Google Analytics, il faut indiquer au moteur lesite à analyser et notamment les pages à contrôler régulièrement : pource faire, il faut insérer un code de contrôle dans le code des pages dusite.

Résumons les étapes à suivre :

Vous devez disposer d'un compte sur Google.

Accédez à la page de présentation de Google Analytics et connectez-vous.

Dans la page Paramètres Analytics, tapez le site à analyser à l'aide dela commande "Ajouter le profil site web".

Créez le profil dans la page Vue d'ensemble puis cliquez sur le bouton"Modifier" présent dans la colonne "Actions" pour le site web voulu.

Dans la page Paramètres profil qui apparaît, vous verrez l'inscription"contrôle inconnu": cliquez sur "vérifier l'état" pour afficher le code àutiliser pour contrôler les pages.

Copiez le code pour le contrôle fourni par Google et collez-le dans lechamp Code d'activation des statistiques; WebSite X5 l'insèrera dansle code engendré pour les pages du site.Le code du contrôle fourni par Google se présente comme suit:

<script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." :"http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script>

15

Créer automatiquement le SiteMap : quand cette option est sélectionnée,le SiteMap du site est automatiquement créé et relié.

Le SiteMap est un fichier XML qui contient la liste des pages d'un site. Lacréation et l'envoi d'un SiteMap permet de s'assurer qu'un moteur de re-cherche, dans ce cas Google, connaisse toutes les pages présentes dansun site, y compris les URL qui ne peuvent être déterminés à travers laprocédure normale de scanning. Le SiteMap assure donc un meilleur etplus rapide scanning d'un site de la part des moteurs de recherche.

Vous pouvez utiliser le SiteMap pour communiquer aux moteurs de re-cherche même des informations supplémentaires comme la fréquence demise à jour et l'importance relative des pages d'un site. Pour que cesdonnées figurent aussi dans le SiteMap créé par WebSite X5, rappelez lafenêtre Propriétés de la page en cliquant sur création du plan et utilisezles options disponibles.

Pour bien construire le SiteMap et pour qu'il fonctionne correctement, ilfaut taper une adresse URL valide dans le champ Adresse Url du site.

Activer la protection d’accès code HTML : si vous sélectionnez cette op-tion, les pages du site publié sont protégées en désactivant le clic du bou-ton droit de la souris pour demander l'affichage du code source ou la copiedes images présentes.

Choix du menu

Cette fenêtre permet de choisir entre la structure à menu vertical ou horizon-tal, si les rubriques du sous-menu doivent toujours être affichées à gauche dela page principale et si les rubriques du menu de premier niveau doivent êtrerépétées au bas de la page sous forme de liens hypertextuels.

Menu verticalDans toutes les pages du site, une barre latérale contenant le menu du siteest affichée à gauche de la page principale.

Menu horizontalDans toutes les pages du site, une barre supérieure contenant le menu dusite est affichée en haut de la page principale ou au-dessus de la barred'en-tête.

16

Voici les options disponibles:

Affiche au bas de la page les rubriques du menu de premier niveau : lesrubriques du menu de premier niveau sont répétées comme liens hypertex-tuels au bas de la page. Au bas de la page se trouve aussi le lien qui per-met d'afficher le plan du site.

Affiche un sous-menu contenant la liste des pages du niveau courant :les éventuels sous-menus, relatifs à la rubrique de premier niveau sélec-tionnée, sont affichés en bas à gauche de l'écran.

Quel que soit le type de structure sélectionné, le menu peut être articulé enplusieurs niveaux et sous niveaux (jusqu'à 4 niveaux d'approfondissement), lemenu vertical peut contenir au maximum 24 rubriques tandis que la limitepour le menu horizontal dépend du modèle graphique choisi.

Pour plus d'informations sur la construction du menu, reportez-vous à :Création du plan du site.

Choix du modèle

Quel que soit le type de structure que vous avez choisi pour votre site (avecmenu vertical ou horizontal), WebSite X5 met à votre disposition un riche ca-talogue de modèles de style organisés par catégories.

Les modèles définissent l'interface graphique, c'est-à-dire l'aspect, de votresite. Même s'ils ont la même structure de base, chaque modèle de style sedifférencie par les images d'arrière-plan, les éléments graphiques et les cou-leurs utilisés. La catégorie Animés regroupe les modèles qui présentent unebarre de titre animée sous Flash™.

Les barres de titre de tous les modèles, sauf celles animées sous Flash, peu-vent être personnalisées en insérant des textes, des images, des animationsFlash, des Diaporamas, des objets HTML, des champs de recherche et desliens : les options nécessaires sont présentées dans la fenêtre Modification dumodèle que vous rappelez en cliquant sur le bouton Suivant.

En plus des modèles de style prédéfinis, vous pouvez créer et utiliser un Mo-dèle personnalisé.

Tout d'abord, pour définir le style graphique du site, sélectionnez une des op-tions suivantes:

Modèle personnalisé : pour définir votre propre style.

17

Modèle prédéfini : pour appliquer un modèle prédéfini choisi parmi lesmodèles proposés.

Si vous décidez de choisir un modèle prédéfini, parcourez la liste de modèlesdisponibles : pour ouvrir et fermer les différentes catégories, double-cliquezsur celle-ci ou cliquez sur les signes (+) et (-) situés à gauche de chaque dos-sier.

Vous pouvez par ailleurs utiliser les touches: CTRL + E : pour ouvrir toutes les catégories. CTRL + R : pour refermer toutes les catégories. ESPACE : pour ouvrir ou fermer la catégorie sélectionnée.

Pour simplifier votre choix parmi les modèles de style disponibles, la fenêtreAperçu montre le modèle sélectionné.

Pour chaque modèle, vous disposez de quatre Couleurs: pour afficher l'aperçuou sélectionner la couleur, cliquez sur le bouton coloré correspondant dans lecadre Aperçu.

En plus des quatre variantes de couleur prédéfinies, vous pouvez agir sur lecurseur Tonalités pour obtenir une variante de couleur originale. Grâce àcette option, les variantes graphiques deviennent presque infinies.

Les modèles sont optimisés pour un écran à résolution 1024 par 768pixels. Si vous voulez créer un site avec une résolution différente, choi-sissez le Modèle personnalisé.

18

Les fichiers graphiques utilisés pour les modèles prédéfinis sont enregis-trés dans le sous-dossier /Models du dossier d'installation du logiciel.Par exemple, les fichier relatifs au modèle "Vortex", présent dans la ca-tégorie "Abstraits", sont enregistrés dans les chemins suivants:

/Models/Vortex/Hor - pour le modèle avec une navigation horizontale;

/Models/Vortex/Ver - pour le modèle avec une navigation verticale.

Les sous-dossiers /Hor et /Ver contiennent d'autres sous-dossiers ayantcomme nom une valeur hexadécimale : pour continuer avec l'exemple,#73BBBE, #73BE93, #9883AD et #A4A2A9. Ces quatre sous-dossiers cor-respondent chacun à une variante de couleur du modèle. Si vous posi-tionnez le curseur de la souris sur les boutons permettant de choisir lavariante de couleur à appliquer, l'indication de la valeur hexadécimale(correspondant au nom du sous-dossier) est en effet affichée dans unetooltip.

Vous avez trouvé un modèle graphique qui convient à vos exigencesmais vous voudriez que l'image qui apparaît dans la barre de titre soitdifférente ?

Si la modification que vous voulez effectuer ne peut pas être obtenue àl'aide des options disponibles dans la fenêtre Modification du modèle,procédez comme suit :

Repérez le sous-dossier contenant les fichiers relatifs au modèle quivous intéresse (reportez-vous à la remarque précédente ): par exem-ple le sous-dossier Vortex.

Créez une copie du sous-dossier pour conserver ainsi les fichiers d'ori-gine : par exemple Vortex 2.

Ouvrez le fichier relatif à l'image à modifier avec le programme d'édi-tion graphique que vous préférez : par exemple le fichier Vortex2/Hor/#73BBBE/top.jpg. Effectuez les modifications voulues et enre-gistrez-les.

A l'aide d'un éditeur de texte quelconque (Bloc-notes de Windows),ouvrez le fichier Models.ini présent dans le dossier d'installation dulogiciel et ajoutez l'indication du nouveau modèle : par exemple écri-vez Vortex 2 après Vortex. Ainsi quand vous lancerez de nouveauWebSite X5, vous trouverez dans la liste des modèles disponibles celuique vous venez de créer (Vortex 2) et vous pourrez l'utiliser pour ré-aliser votre site.

19

Vous voulez ajouter de nouveaux modèles à la galerie de modèlesgraphiques ?

Vous avez créé de nouveaux modèles et vous voulez les mettre à ladisposition de la communauté des utilisateurs de WebSite X5 ?

Pour ce faire, rappelez l'adresse www.websitex5.com/templates et accédezà la section WebSite X5 Templates consacrée aux modèles graphiques.

Sur WebSite X5 Templates vous trouverez de nombreux modèles graphiques,réalisés par Incomedia ou d'autres utilisateurs, aussi bien gratuits quepayants, que vous pourrez télécharger et utiliser pour votre projet. Vouspourrez par ailleurs enrichir ces archives des modèles que vous avez créés.

N'oubliez donc pas de rendre visite périodiquement à WebSite X5 Templatespour voir les nouveautés : vous pouvez également souscrire le Flux RSS pourqu'il soit constamment mis à jour.

Modèle personnalisé

Pour rappeler cette fenêtre, sélectionnez l'option Modèle personnalisé pré-sent dans la fenêtre Choix du modèle et cliquez sur le bouton Suivant.

Cette fenêtre permet de créer et d'utiliser un modèle de style entièrementpersonnalisé.

La fenêtre présente deux éléments accolés pour travailler :

une représentation schématique de la page servant à afficher la structureen fonction du type de menu choisi (dans la fenêtre Choix du menu). Poursélectionner la zone de la page sur laquelle vous voulez travailler, cliquezsimplement dessus.

la liste des paramètres permettant de modifier l'aspect de la zone de pagesélectionnée.

20

La page est partagée comme suit :

1. Barre de titre : c'est une section graphique pouvant contenir des élémentstel que le titre et le sous-titre du site, le logo de l'entreprise, les champsde recherche, les menus de service avec les liens, par exemple pour affi-cher le plan du site ou choisir la langue de consultation.

2. Menu horizontal : c'est la zone destinée à accueillir la navigation fixe, àsavoir les rubriques de premier niveau du menu qui ne changent pas danschaque page du site. Cette zone n'est affichée que si vous avez choisi lastructure à menu horizontal dans la fenêtre Choix du menu.

3. Contenu de la page : c'est la zone destinée à accueillir le contenu des pa-ges et, éventuellement, les sous-menus de navigation. Cette zone com-prend aussi le menu vertical si vous avez choisi ce type de structure dansla fenêtre Choix du menu.

4. Pied de page : c'est le pied de page, une autre section principalement gra-phique qui a pour but de terminer visuellement la page. En général, cettezone contient des éléments comme des remarques, des avis de non-responsabilité, le copyright, le code de Siret, des adresses e-mail.

5. Arrière-plan : c'est la zone externe du site qui est affichée quand la fenê-tre du navigateur est ouverte avec une taille dépassant la résolution dusite.

Pour toutes les zones mentionnées ci-dessus, vous pouvez utiliser les optionssuivantes:

Couleur : permet de définir la couleur d'arrière-plan pour la zone de lapage sélectionnée en rappelant la fenêtre Couleur.

Image : permet de définir une image (.jpg, .gif ou .png) à appliquercomme arrière-plan de la page sélectionnée. Pour la "barre de titre", vouspouvez choisir une animation Flash (.swf).

Disposition : permet de définir s'il faut répéter ou non l'image utiliséecomme arrière-plan de la cellule. L'image peut être répétée horizontale-ment , verticalement , ou dans les deux sens pour remplir tout l'espacedisponible.

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

21

L'option suivante est disponible seulement pour la zone "Arrière-plan" :

Image d'arrière-plan fixe : si vous sélectionnez cette option, l'image insé-rée comme arrière-plan du site reste fixe même quand vous faites défilerle contenu de la page à l'aide de la barre de défilement.

L'option suivante est disponible seulement pour la zone "Menu horizontal " :

Position du menu : permet de définir l'emplacement du menu horizontalen choisissant entre Au-dessus de la barre de titre ou En dessous de labarre de titre.

L'option suivante est disponible pour toutes les zones de la page, sauf pourl'"Arrière-plan" :

Largeur : indique la valeur exprimée en pixels de la largeur de la zone dela page sélectionnée. Cette valeur est définie par défaut sur 988 pixels,tandis que vous pouvez modifier librement la valeur de la zone "barre detitre". La valeur définie pour la "barre de titre" est automatiquement ap-pliquée au "menu horizontal", au "contenu de la page" et au "Pied de page".

La valeur de la largeur définie par défaut a été calculée pour optimiserl'affichage du site à 1024 x 768 pixels.

Pour la structure à menu vertical (définie dans la fenêtre Choix du menu) etle "Contenu de la page", vous disposez aussi de l'option Largeur du menu per-mettant de définir la valeur en pixels de la colonne devant accueillir le menude navigation. Cette valeur doit être définie en tenant compte de l'aspectgraphique du site et de la largeur prévue pour les boutons dans la fenêtreStyle du menu de premier niveau.

La largeur du menu devrait être à peine supérieure à celle des boutonsdu menu de premier niveau. Pour obtenir un bon fonctionnement, la lar-geur du menu ne doit pas dépasser le double de la largeur des boutonsdu menu de premier niveau.

Pour les zones de la page "Barre de titre""," Menu horizontal" et " Barre infé-rieure", vous disposez de l'option:

Hauteur : permet de définir la hauteur en pixels de la zone sélectionnée.

Enfin les options suivantes sont disponibles pour les zones "Menu Horizontal","Contenu de la page" et "Barre inférieure" :

22

Marge gauche : permet de définir la valeur en pixels de la marge gauche.

Marge droite : permet de définir la valeur en pixels de la marge droite.

Marge supérieure : permet de définir la valeur en pixels de la marge supé-rieure.

La largeur effective des pages du site est donnée par la largeur de lazone "Contenu de la page" (qui dépend de la largeur de la zone "barre detitre") moins la marge gauche et la marge droite.

Est-ce que je peux décider librement l'emplacement du menu hori-zontal ?

Oui, selon l'aspect de la barre de titre et le nombre de rubriques depremier niveau du menu horizontal, vous pouvez utiliser les optionspermettant d'établir la position du menu. Vous pouvez tout d'abord déci-der de le placer au-dessus ou en dessous de la barre de titre à l'aide del'option Position du menu, ensuite vous pouvez établir l'alignement àdroite, au centre ou à gauche en modifiant les valeurs Marge gauche etMarge droite.

Vous pouvez compléter la barre de titre de votre modèle en insérant destextes, des images, des animations Flash, des Diaporamas , des champsde recherche et des liens : les options nécessaires se trouvent dans lafenêtre : Modifier la bannière supérieure que vous pouvez rappeler encliquant sur le bouton Suivant.

Modification du modèle

Pour rappeler cette fenêtre, permettant de personnaliser la barre de titre (oubannière supérieure) et/ou le Pied de page (ou Footer), cliquez sur le boutonSuivant après avoir sélectionné le modèle voulu dans la fenêtre Choix du mo-dèle ou avoir créé un modèle personnalisé à l'aide des options de la fenêtreModèle personnalisé.

La fenêtre Modification du modèle n'apparaît pas si vous décidez d'utili-ser un modèle Animé, à savoir un modèle qui prévoit une animationFlash pour la barre de titre.

23

Les commandes nécessaires pour modifier le modèle sont présentées dansdeux sections:

Section Supérieure, relative à la barre de titre.

Section Inférieure, relative au Pied de page.

La section Supérieure de cette fenêtre permet de personnaliser la barre detitre du modèle graphique en ajoutant des textes, des images, des anima-tions, des Diaporamas, des objets HTML, des champs de recherche et les liensnécessaires.

La fenêtre présente un éditeur graphique où s'affiche automatiquementl'image qui apparaît dans la barre de titre : l'image est affichée à l'échelle 1:1et vous pouvez la faire défiler à l'aide de la barre de défilement horizontale.

La barre d'outils de l'éditeur graphique présente les commandes suivantes :

Couper [CTRL+ X]Permet de couper l'objet sélectionné pour le coller par la suite.

Copier [CTRL+ C]Permet de copier l'objet sélectionné pour le coller par la suite.

Coller [CTRL+ V]Permet de coller l'objet précédemment coupé ou copié à l'aide des com-mandes Couper et Copier.

24

Annuler [CTRL+ Z]Permet d'annuler la dernière opération.

Mettre au premier planPermet de mettre l'objet sélectionné au premier plan, à savoir devant lesautres objets éventuellement superposés.

Mettre au second planPermet de mettre l'objet sélectionné en arrière-plan, à savoir derrière lesautres objets éventuellement superposés.

Associer un lienPermet de définir un lien vers le texte, l'image ou le diaporama sélection-né. Vous pouvez définir les paramètres du lien dans la fenêtre Insérer lien.

Insérer textePermet d'insérer un texte.

Insérer imagePermet d'insérer une image.

Insérer animation FlashPermet d'insérer une animation Flash.

L'animation insérée ne s'affiche que si vous ouvrez le site dans le Naviga-teur.

Insérer DiaporamaPermet d'insérer un Diaporama, à savoir une séquence d'images qui défi-lent automatiquement une après l'autre.

Insérer champ de recherchePermet d'insérer un champ de recherche pour effectuer des recherches àl'intérieur du site.

Insérer Code HTMLPermet d'insérer un propre objet en tapant directement le code HTML rela-tif.

Selon l'espace à disposition, il n'y a pas de limites au nombre d'objetspouvant être insérés dans la barre de titre et le pied de page du site.

25

Si vous sélectionnez directement l'image d'arrière-plan de la barre de titre, vouspouvez utiliser les options du cadre Propriétés Propriétés d'arrière-plan:

Fichier image : permet d'afficher le chemin relatif au fichier graphiqueinséré comme arrière-plan de la barre de titre. Vous pouvez toutefois rem-placer l'image présente par une autre image : vous pouvez utiliser les fi-chiers au format JPG, GIF, PNG, BMP, PSD, TIF, DIB, PCX, RLE, TGA, WMF.

Il est utile de connaître le chemin du fichier utilisé comme arrière-plan dela barre de titre pour l'identifier plus facilement, l'ouvrir, le modifier avecun éditeur externe et enregistrer une copie qui remplacera l'original.

Si vous sélectionnez un texte, vous pouvez intervenir sur les options du cadrePropriétés du texte:

Contenu : permet de saisir le contenu du texte.

Police : permet de définir le type de caractère, le style et la taille enpoints du texte.

Couleur de texte : permet de définir la couleur du texte dans la fenêtreCouleur.

Couleur d'arrière-plan : permet de définir la couleur d'arrière-plan dutexte dans la fenêtre Couleur.

Si vous sélectionnez une image, vous pouvez intervenir sur les options du ca-dre Propriétés de l'image:

Fichier image : permet de sélectionner le fichier graphique relatif àl'image à insérer. Vous pouvez utiliser les fichiers au format JPG, GIF, PNG,BMP, PSD, TIF, DIB, PCX, RLE, TGA, WMF.

Fichier image au passage de la souris : permet de sélectionner un secondfichier graphique qui sera affiché lors du passage de la souris sur l'image.Vous pouvez utiliser les fichiers au format JPG, GIF, PNG, BMP, PSD, TIF,DIB, PCX, RLE, TGA, WMF.

Activer la transparence : si vous sélectionnez cette option, la transpa-rence est appliquée à l'image pour rendre invisible une couleur donnée.

Couleur : permet de définir, dans la fenêtre Couleur, la couleur de l'imagequi doit devenir invisible quand l'option Activer transparence est sélec-tionnée. Dans ce cas, l'outil "compte-gouttes" est particulièrement utile,car il permet de capturer la couleur directement à partir de l'image.

26

Tolérance : permet de définir le facteur de tolérance pour appliquer latransparence. Plus la valeur de tolérance est grande, plus la zone del'image devenue transparente est grande.

Comment faut-il faire pour insérer dans la barre de titre un boutonactif avec l'effet mouseover ?

Un bouton actif dans la barre de titre pourrait servir à établir un lienvers un message publicitaire, le choix de la langue de consultation, laconnexion à un site externe relié, etc.

Voici comment créer ce bouton d'une manière très simple:

Choisissez ou préparez deux images relatives à l'état "relâché" et àl'état "au passage" pour le bouton.

Utilisez la commande Insérer image pour importer le fichier relatif aubouton dans l'état "relâché".

Si le bouton n'est ni carré ni rectangulaire vous pouvez le détourerfacilement : choisissez une couleur d'arrière-plan uniforme et sélec-tionnez l'option Activer transparence pour la rendre invisible.

Utilisez l'option Fichier image au passage de la souris pour charger ladeuxième image relative au bouton. Les images graphiques étantchargées, le logiciel définira automatiquement l'effet mouseover.

Sélectionnez l'image du bouton et, à l'aide de la commande Insérerlien, créez le lien nécessaire.

Si vous sélectionnez une animation Flash, vous pouvez agir sur les options sui-vantes présentes dans le cadre Propriétés de l'animation Flash:

Fichier animation : permet de sélectionner le fichier SWF relatif à l'ani-mation Flash à insérer.

Arrière-plan transparent : si vous sélectionnez cette option, l'arrière-plande l'animation devient invisible.

Si vous sélectionnez un Diaporama, vous pouvez agir sur les options présentesdans le cadre Propriétés Diaporama :

Liste des images : affiche la liste des images qui composent le Diaporama.Si vous sélectionnez un fichier de la liste, celui-ci est affiché dans l'aperçu.

27

Ajouter : permet de sélectionner le fichier de l'image à insérer dans leDiaporama. La fenêtre Sélection fichier permet de sélectionner plusieursfichiers simultanément.

Supprimer... : permet de supprimer le fichier sélectionné dans la Liste desimages à insérer dans le Diaporama.

En haut : permet de déplacer le fichier sélectionné avant le fichier précé-dent dans la Liste des images à afficher dans le Diaporama.

En bas : permet de déplacer le fichier sélectionné après le fichier suivantdans la Liste des images à afficher dans le Diaporama.

Effet : permet de rappeler la fenêtre Effet d'entrée de la page permettantde définir l'effet d'entrée pour les images du Diaporama sélectionnées parmicelles présentes dans la Liste des images. Pour chaque effet, vous pouvezétablir la Durée (en secondes) et afficher un aperçu de l'effet choisi.

Ces effets ne sont valides que si le Navigateur utilisé pour la navigationest Microsoft Internet Explorer version 5.5 et suivantes. Avec les naviga-teurs qui utilisent comme moteur de rendering Gecko ou WebKit (Fire-fox, Safari, Chrome, etc.), les effets d'entrée sont automatiquementremplacés par un effet de fondu croisé.

Afficher dans un ordre fortuit : si vous sélectionnez cette option, les ima-ges insérées dans le Diaporama sont reproduites dans un ordre fortuit etnon pas dans l'ordre où elles apparaissent dans la Liste des images.

Comment présenter simplement dans la barre de titre une série debannières publicitaires à rotation ?

La bannière est une des formes publicitaires les plus répandues sur In-ternet : il s'agit d'une annonce conçue pour attirer l'attention de l'utilisa-teur et le pousser à cliquer sur le lien pour se connecter au site commer-cial qui présente l'offre. En général les bannières ont des formats stan-dard et peuvent être des images (GIF, JPG), des programmes JavaScriptou des applications multimédias développées sous Java ou Flash.

Selon le type de bannière, vous pourrez l'insérer dans la barre de titrecomme un objet Image ou un objet Flash : vous pouvez également insérerplusieurs bannières ou des bannières composées de plusieurs images qui défi-lent, en utilisant l'objet Diaporama. Pour ce faire, procédez comme suit :

Repérez ou préparez les images relatives à la (ou les) bannière(s) pu-blicitaire(s) que vous voulez proposer.

28

Insérez toutes les images à travers un seul objet Diaporama et assu-rez-vous que l'ordre correct est indiqué dans la Liste des images.

Cliquez sur le bouton Effet pour rappeler la fenêtre Effet d'entrée dela page et définissez la durée d'affichage de chaque image : vous pou-vez prévoir une durée relativement brève pour l'affichage des imagescomposant la même bannière publicitaire et un durée plus longuepour le passage à la première image d'une autre bannière.

Si vous sélectionnez le champ de recherche, vous pouvez agir sur les optionsdu cadre Propriétés de champ de recherche:

Etiquette du bouton "Rechercher": permet de définir le texte à affichersur le bouton qui lance la recherche.

Police : permet de définir le type de caractère, le style et la taille enpoints du texte.

Couleur de texte : permet de définir la couleur du texte dans la fenêtre Cou-leur.

Couleur d'arrière-plan : permet de définir la couleur d'arrière-plan dutexte dans la fenêtre Couleur.

Couleur du texte bouton : permet de définir la couleur du texte du bou-ton dans la fenêtre Couleur.

Couleur d'arrière-plan bouton : permet de définir la couleur de fond dubouton dans la fenêtre Couleur.

Les résultats des recherches effectuées dans le site apparaissent dansdes pages créées automatiquement par le programme : l'aspect graphi-que de ces pages est établi sur la base des paramètres de style des tex-tes (voir Style de texte dans Paramètres avancés).

Comment faut-il faire pour définir une image graphique complète-ment différente pour le champ de recherche et/ou le bouton relatif ?

Vous pouvez définir l'arrière-plan transparent aussi bien pour le champde recherche que le bouton "Rechercher" afin de les rendre complète-ment invisibles. A ce stade, il suffit de superposer le champ de recher-che à l'image graphique insérée comme tel ou comme faisant partie de labannière.

29

Si vous sélectionnez le code HTML, vous pouvez utiliser les options suivantesdu cadre Propriétés du Code HTML:

Code HTML : permet de saisir le code HTML relatif à l'objet à créer.

Afficher les barres de défilement : si cette option est sélectionnée, tou-tes les barres de défilement apparaissent sur la page.

Si vous tapez [DATE], la date courante est automatiquement affichée etsera constamment mise à jour. Par exemple, vous pouvez taper : "au-jourd'hui c'est le [DATE]".

Si vous tapez [NOW], vous affichez le jour courant. Par exemple, vouspouvez taper : "mis à jour le [NOW]".

Si vous tapez [HOUR], vous affichez l'heure courante qui sera automati-quement mise à jour. Par exemple, vous pouvez taper : Il est [HOUR]".

Pour les textes, les images et/ou les Diaporamas insérés, vous pouvez utiliserles options suivantes du cadre Effets graphiques de l'objet:

Type d'effet : permet de sélectionner l'effet à appliquer sur l'objet sélec-tionné.

Activer l’effet : permet d'appliquer l'effet sélectionné à l'objet courant.

Sur chaque objet texte, image et diaporama, vous pouvez appliquer plusieurseffets simultanément ; pour chaque effet, vous pouvez modifier différentsparamètres:

Effet Paramètres

Ombre Diffusion : permet de définir jusqu'à quel point l'ombredoit être diffuse.

Couleur : permet de définir la couleur de l'ombre à ap-pliquer à l'aide de la fenêtre Couleur.

Distance X : permet de définir jusqu'à quel point l'om-bre doit être déplacée horizontalement par rapport àl'objet auquel elle est appliquée. Si vous tapez une va-leur positive, vous obtenez un déplacement de l'ombrevers la droite ; en revanche, si vous tapez une valeurnégative, vous obtenez un déplacement de l'ombre versla gauche.

30

Distance Y : permet de définir jusqu'à quel point l'om-bre doit être déplacée verticalement par rapport à l'ob-jet auquel elle est appliquée. Si vous tapez une valeurpositive, vous obtenez un déplacement de l'ombre versle bas ; en revanche, si vous tapez une valeur négative,vous obtenez un déplacement de l'ombre vers le haut.

Reflet Diffusion : permet de définir jusqu'à quel point le refletdoit être diffus, à savoir quelle sera sa grandeur.

Distance : permet de définir jusqu'à quel point le refletdoit être distant de l'objet auquel il est appliqué.

Colorié Epaisseur : permet de définir la valeur en pixels del'épaisseur de la bordure.

Couleur : permet de définir la couleur de la bordure àappliquer à l'aide de la fenêtre Couleur.

Lueur externe Diffusion : permet de définir jusqu'à quel point la lueurdoit être diffuse.

Couleur : permet de définir la couleur de la lueur à ap-pliquer, à l'aide de la fenêtre Couleur.

Bombé Profondeur : permet de définir jusqu'à quel point l'effetbombé doit être accentué.

Diffusion : permet de définir jusqu'à quel point l'effetbombé doit être diffus.

Angle : permet de définir l'angle de l'effet bombé à ap-pliquer.

Rotation Angle : permet de sélectionner la valeur de l'angle derotation (effectué dans le sens des aiguilles d'une mon-tre) à appliquer.

Opacité Opacité : permet de saisir une valeur de 0 à 255 pourdéfinir le degré d'opacité de l'image. Plus les valeurs serapprochent du 0, plus l'opacité de l'image devienttransparente.

Antialias Antialias : permet de saisir une valeur pour définir jus-qu'à quel point l'effet d'antialiasing doit être diffus.L'antialiasing sert à rendre les bords de l'objet moinsdentelés.

31

Pour tous les objets insérés, vous pouvez enfin afficher et utiliser les optionssuivantes du cadre Position et taille :

Coordonnée X : permet d'afficher la coordonnée sur l'axe X qui identifie laposition de l'objet sélectionné. Vous pouvez modifier cette coordonnée etdéplacer l'objet horizontalement en tapant ou définissant avec le curseurla valeur voulue.

Coordonnée Y : permet d'afficher la coordonnée sur l'axe Y qui identifie laposition de l'objet sélectionné. Vous pouvez modifier cette coordonnée etdéplacer l'objet verticalement, en tapant ou définissant avec le curseur lavaleur voulue.

Largeur : permet d'afficher la largeur de l'objet sélectionné. Vous pouvezmodifier ce paramètre, et élargir ou rétrécir l'objet, en tapant ou en défi-nissant avec le curseur la valeur voulue.

Hauteur : permet d'afficher la hauteur de l'objet sélectionné. Vous pouvezmodifier ce paramètre, et allonger ou raccourcir l'objet, en tapant ou dé-finissant avec le curseur la valeur voulue. Cette option est désactivée pourle champ de recherche : dans ce cas, en effet, la hauteur est automati-quement déterminée en fonction de la taille définie pour le texte.

Quand vous sélectionnez un objet inséré, les poignets de sélection appa-raissent : ces poignets permettent de modifier la taille et la position del'objet. Après avoir sélectionné un objet, vous pouvez le déplacer d'unpixel à la fois à l'aide des touches fléchées, ou de 10 pixels à la fois enmaintenant enfoncées la touche CTRL et les touches fléchées.

Pour afficher l'aperçu du modèle de style dans le navigateur interne, cli-quez sur le bouton Tester.

32

La section Inférieure de cette fenêtre permet de personnaliser le pied depage (ou footer) du modèle graphique sélectionné.

Pour personnaliser le pied de page, utilisez les commandes illustrées pour labarre de titre.

33

Etape 2 - Création du plan du site

Création du plan du site

Cette fenêtre permet, par les boutons qu'elle met à votre disposition, decréer le plan complet du site.

Le plan est la structure arborescente selon laquelle le site est articulé : ladéfinition de cette structure, sans contenus, est indispensable pour pouvoircréer chaque page.

La création du plan prévoit qu'il y ait, en plus de la page d'accès, une série depages liées entre elles à travers le menu : il faut donc insérer toutes les pagesen veillant à organiser les différents niveaux du menu. Voici les commandespermettant de définir le plan :

Nouveau niveau [CTRL+ L] : permet d'insérer un nouveau niveau de menu.Lorsque vous créez les menus, n'oubliez pas que :

Menu vertical : peut contenir jusqu'à 4 niveaux d'approfondissement et24 rubriques au maximum pour le premier niveau.

Menu horizontal : peut contenir jusqu'à 4 niveaux d'approfondissementet le nombre maximum de rubriques de premier niveau dépend du mo-dèle graphique choisi.

Nouvelle page [CTRL+ N]: permet de créer une nouvelle page qui sera au-tomatiquement placée au niveau où vous êtes en train de travailler.

Supprimer... [CANC]: permet de supprimer la page ou le niveau sélec-tionné.

Renommer [F2]: permet de modifier le nom de la Page d'Accueil, de lapage ou du niveau sélectionné. Il est conseillé de bien choisir les noms despages et des niveaux puisque ces noms seront repris dans le menu de navi-gation comme titres des pages et noms des fichiers HTML associés aux pa-ges, à moins qu'il ne soit spécifié différemment dans la fenêtre Propriétésde la page (voir ci-dessous).

En haut [CTRL+ S]: permet de modifier l'ordre des pages et des niveaux.Déplace la page ou le niveau sélectionné au-dessus de la page/niveau pré-cédent.

En bas [CTRL+ G]: permet de modifier l'ordre des pages et des niveaux.Déplace la page ou le niveau sélectionné au-dessous de la page/niveauprécédent.

34

Etendre : pour ouvrir toutes les pages d'un niveau.

Réduire : pour refermer toutes les pages d'un niveau.

Pour modifier l'ordre des niveaux et des pages, vous pouvez agir direc-tement sur le plan affiché dans la fenêtre appropriée : sélectionnez larubrique voulue et faites-la glisser sur la nouvelle position (Drag&Drop).

Après l'articulation du plan, WebSite X5 propose de composer chaque page enles présentant l'une après l'autre. Vous pouvez utiliser le plan pour passer di-rectement à la fenêtre du programme permettant de travailler sur une pagedéterminée : pour cela, double-cliquez sur la rubrique correspondante.

Si vous ajoutez un Blog à l'aide de la section Paramétrages avancés, leprogramme ajoute automatiquement la rubrique Blog dans le plan dusite. Comme toutes les pages, même celle relative au Blog peut devenirinvisible sur le menu à l'aide de l'option appropriée.

La fenêtre qui montre la structure arborescente du plan du site contient lesboutons de commande suivants:

CouperPermet de couper la page sélectionnée pour la coller par la suite.

CopierPermet de copier la page sélectionnée pour la coller par la suite.

CollerPermet de coller la page précédemment copiée ou coupée à l'aide descommandes correspondantes.

Pour créer le plan, vous pouvez aussi utiliser les commandes Couper, Co-pier, Coller, Effacer du menu contextuel qui apparaît quand vous cliquezdirectement sur les rubriques du plan.

35

Vous devez réaliser dans le site B une page identique à celle que vousavez créée dans le site A ?

Dans ce cas, vous ne devez pas refaire la page en partant de zéro. Lan-cez deux fenêtres WebSite X5 et ouvrez simultanément le projet A et B.Affichez le plan du projet A, sélectionnez la page voulue et copiez-la. Ace stade, déplacez le curseur dans la seconde fenêtre, affichez le Plandu projet B et collez la page. Vérifiez que les liens présents dans la pagecopiée fonctionnent correctement. Pour ne pas vous confondre entre lesprojets, sachez que le nom du projet ouvert apparaît dans la barre detitre de la fenêtre du programme.

Page invisible dans le menuSi cette option est activée, la page ou le niveau sélectionné ne sont pas in-sérés dans le menu de navigation. Lorsqu'un niveau est invisible, toutes lespages qu'il contient deviennent automatiquement invisibles. Les pages invi-sibles sur le menu peuvent être utilisées comme pages d'approfondisse-ment et être rappelées par des liens internes. Il est nécessaire de créer aumoins un lien vers les pages invisibles.

La Page d'accueil peut aussi disparaître du menu : il est conseillé d'utili-ser cette possibilité seulement si vous avez l'intention de mettre un lienvers cette page à d'autres endroits du site, par exemple dans la barre detitre animée d'un modèle personnalisé.

Page protégéePermet d'ouvrir la fenêtre Page protégée permettant de définir une pageprotégée et d'indiquer la zone réservée à laquelle elle appartient.Pour chaque site, vous pouvez créer plusieurs zones réservées contenantdifférentes pages protégées par la saisie d'un Nom utilisateur et d'un motde passe.La fenêtre Page protégée affiche la liste des zones réservées déjà créées :si l'option Définir la page comme page protégée est activée, il suffit d'in-diquer la zone protégée à laquelle la page appartient en cliquant simple-ment sur la zone voulue.Pour créer de nouvelles zones réservées, rappelez la fenêtre Zone réser-vée dans la section Paramètres généraux.

36

Pour plus d'informations sur comment créer et gérer une zone réservée àaccès par mot de passe, reportez-vous à Zone réservée.

Effet d'entrée de la pagePermet de rappeler la fenêtre Effet d'entrée de la page pour choisir l'effetd'entrée qui apparaît quand la page s'affiche. Pour chaque effet, vous pou-vez établir la Durée (en secondes) et afficher un aperçu de l'effet choisi.

Ces effets ne sont valides que si le Navigateur utilisé pour la navigationest Microsoft Internet Explorer version 5.5 et suivantes.

Propriétés de la pageElle est activée quand vous sélectionnez une page insérée dans le plan etpermet de rappeler la fenêtre Propriétés de la page permettant de définirune série de propriétés.

Voici les options disponibles dans la section Base:

Titre complet : permet de définirun titre différent de celui du plandu site.Le nom que vous donnez à la pagelors de la construction du plan estrepris comme rubrique dans lemenu de navigation ; l'éventueltitre complet indiqué dans lesPropriétés de la page est enrevanche affiché comme titreeffectif de la page. Cette optionn'est pas disponible pour la Paged'accueil.

Description : Permet d'insérerune description spécifique pour lapage, remplaçant la descriptiongénérale définie pour le site dansle champ de la fenêtre Paramètres généraux. La description doit êtrecourte et précise : elle est insérée comme valeur du Méta Tag <descrip-tion> dans le code XHTML de la page et est utilisée par les Moteurs derecherche pour l'indexation.

37

Mots-clés pour la recherche : Permet d'insérer une série de mots-clésspécifiques pour la page, remplaçant les mots-clés définis pour le sitedans champ de la fenêtre Paramètres généraux. Les mots-clés sont insé-rés comme valeur du Méta Tag <keywords> dans le code XHTML de lapage et sont utilisés par les Moteurs de recherche pour l'indexation.

Nom du fichier créé : permet de définir le nom du fichier HTMLcorrespondant à la page.A moins qu'il ne soit spécifié différemment, comme nom du fichierHTML le programme prend automatiquement le nom donné à la pagelors de sa construction. Donnez des noms brefs et significatifs auxfichiers pour obtenir des adresses simples et faciles à mémoriser, celasera également positif pour l'indexation effectuée par les Moteurs derecherche. Cette option n'est pasdisponible pour la Page d'accueil.

Voici les options disponibles dans lasection Avancées :

Fréquence de mise à jour : per-met de définir avec quelle fré-quence la page est mise à jour.Ce paramètre est indiqué dans leSiteMap créé.

Priorité des contenus : permetd'affecter des points à la page,pour indiquer son importance parrapport aux autres pages du site.Ce paramètre est indiqué dans leSiteMap créé.

Le SiteMap est un fichier XML qui contient la liste des pages d'un site. Lacréation et l'envoi d'un SiteMap permet de s'assurer qu'un Moteur de re-cherche, dans notre cas Google, connaisse toutes les pages présentesdans un site, y compris les URL qui ne peuvent pas être déterminés àtravers la procédure normale de scanning. Le SiteMap peut contenir aussides informations supplémentaires comme la fréquence de mise à jour etl'importance des pages d'un site ; il assure un meilleur et plus rapidescanning d'un site de la part des moteurs de recherche.

Pour que WebSite X5 crée le SiteMap du site, il faut activer l'optionCréer automatiquement le SiteMap présente dans la section Expert dela fenêtre Paramètres généraux.

38

Extension du fichier créé : permet de définir l'extension qui accompa-gnera le fichier relatif à la page. Le programme propose par défaut l'ex-tension .html, mais vous pouvez aussi choisir entre .php, .asp, .cfm et.jsp.

Vous pouvez également modifier l'extension du fichier index.html relatifà la Page d'accueil : l'extension utilisée pour la Page d'accueil est éven-tuellement utilisée pour la page Intro.

Il est utile de pouvoir modifier l'extension du fichier index comme PHPou ASP ou si votre fournisseur d'accès n'accepte comme première pagevisible de site que des fichiers index.htm.

Si la page est protégée, elle sera automatiquement enregistrée sous leformat .php.

Code à insérer dans l'en-tête de la page : permet de définir le nombrede lignes du code à insérer dans la section <head> du code HTML relatifà la page.

Code à insérer dans le tag BODY : Permet de définir le nombre de li-gnes du code à insérer dans la section <body> du code HTML relatif à lapage.

Les options Code à insérer dans l'en-tête de la page et Code à insérerdans le tag BODY sont utiles quand, par exemple, vous voulez relier desfeuilles des styles (CSS) ou quand vous devez lancer des évènements surl'onload de la page. Notamment, pour le bon fonctionnement de certainsJavaScript, qui peuvent être insérés à travers l'objet HTML approprié, ilfaut entrer des lignes de code spécifiques dans la section <head> et dansla section <body> du fichier HTML de la page.

Propriétés du niveauElle est activée quand vous sélectionnez un niveau inséré dans le plan etpermet de rappeler la fenêtre Propriétés du niveau permettant de définirune série de propriétés.

Voici les options disponibles dans la section Base :

Ne pas afficher le menu Popup de ce niveau : si cette option est acti-vée, le menu Popup relatif à la rubrique de niveau n'apparaît pas aupassage de la souris.

39

Lien au clic sur la rubrique de niveau : Permet de définir un lien versla rubrique de niveau à l'aide de la fenêtre Lien.

Vous avez une longue liste de produits et vous voulez que le menuPopup ne soit pas trop grand ?

Procédez comme suit :

Créez le niveau "Produits" en insérant à l'intérieur une page pour cha-que produit : "Produit 1", "Produit 2", etc... et une page initiale "Listedes produits" qui servira de menu graphique.

Sélectionnez le niveau "Produits" et rappelez la fenêtre Propriétés duniveau: activez l'option Ne pas afficher le menu Popup de ce niveauet définissez comme Lien au clic sur la rubrique de niveau le lienvers la page "Liste des produits".

Sélectionnez la page "Liste des produits" et, à l'aide de la commandeappropriée, rendez-la invisible dans le menu.

N'oubliez pas de sélectionner l'option Affiche un sous-menu conte-nant la liste des pages du niveau courant présente dans la fenêtreChoix du menu.

Suivez ces étapes pour obtenir les résultats suivants : dans le menu denavigation, vous verrez la rubrique "Produits" mais au passage de la sou-ris le menu Popup correspondant n'apparaîtra pas. Quand vous cliquerezsur "Produits", vous afficherez la page "Liste des produits" et le sous-menu vertical contenant la liste de tous les produits.

Plan du site et SiteMap

En fonction du plan défini, le programme crée automatiquement la page Plandu site. Les rubriques du plan du site sont des liens actifs vers une page : leplan représente donc un outil utile d'orientation et de navigation mis à la dis-position de l'utilisateur. L'affichage des rubriques du plan peut être géré àl'aide des commandes "Tout ouvrir" et "Tout fermer".Le Plan du site peut être disponible en insérant des liens appropriés sur lestextes et les images des pages (voir fenêtre Style des liens) ou dans le menusitué au bas de la page où le programme insère automatiquement le lien versle plan (pour l'activer, sélectionnez l'option Afficher au bas de la page lesrubriques du menu de premier niveau dans Choix du menu).

Même si vous décidez de ne pas rendre disponible le Plan du site, le pro-gramme peut le créer sous la forme d'un SiteMap XML relié dans le code HTMLdes pages à travers le Méta Tag <sitemap>. Dans ce cas, le SiteMap est un fi-

40

chier XML contenant la liste des pages d'un site permettant de s'assurer queles Moteurs de recherche analysent toutes les pages. Vous pouvez utiliser leSiteMap pour communiquer aux moteurs de recherche certaines informationsutiles sur les pages:

avec quelle fréquence chaque page est mise à jour ;

la date de la dernière modification des pages ;

l'importance de chaque page dans l'économie du site (cette priorité n'a au-cun effet sur le positionnement des pages dans les résultats de recherche).

Pour que le programme crée le SiteMap du site, il faut sélectionner l'optionCréer automatiquement le SiteMap présente dans la section Avancées desParamètres généraux. Pour que les informations concernant la fréquence demise à jour et l'importance des pages d'un site soient comprises dans le Site-Map, il faut sélectionner les options disponibles dans la fenêtre Propriétés dela page que vous pouvez rappeler pendant la Création du plan.

Exemple de plan

Le plan proposé dans l'image reproduit la structure meilleur et plus rapidescanningweb. Si l'on analyse la structure, on remarque que :

"La société", "Les produits", "Les services","Achats" et "Contacts" sont les rubriques depremier niveau : dans le navigateur, elles sontaffichées comme des rubriques du menuprincipal (horizontal ou vertical) représentantla navigation fixe qui est identique danschaque page.Pour personnaliser l'aspect graphique desrubriques de premier niveau, vous pouvezutiliser l'option avancée Style du menu depremier niveau.

Si vous cliquez sur la section "La société", dansle navigateur les pages "Qui sommes-nous","Siège" et "Distributeurs" seront affichéescomme rubrique du menu Popup.Les pages "Formulaires Distributeurs" et "Listes des prix Distributeurs" nefigurent pas dans le menu Popup car elles ont été définies commeinvisibles à l'aide de l'option correspondante. Par ailleurs, la page "Listesdes prix Distributeurs" sera protégée par un mot de passe.Pour personnaliser l'aspect graphique des rubriques du menu Popup, vous

41

pouvez utiliser l'option avancée Style de liste déroulante.En revanche, pour créer la zone protégée par un mot de passe, accédez àl'option avancée Zone réservée.

"Logiciel" et "Matériel" sont des rubriques de second niveau pour la section"Les produits": dans le navigateur, elles sont affichées comme des rubri-ques d'un menu Popup mais comme elles correspondent à des niveaux, el-les entraînent l'affichage d'un autre menu Popup.

Dans la fenêtre Choix du menu si l'option Affiche un sous-menu conte-nant la liste des pages du niveau courant est activée, quand vous affichezdans le navigateur la page "WebSite X5", le programme affiche un sous-menu vertical contenant les rubriques de même niveau : "WebSite X5 Evo-lution" et " WebSite X5 Compact".Pour personnaliser l'aspect graphique du sous-menu, vous pouvez utiliserl'option avancée Style de sous menu.

42

Etape 3 – Création de la page

Cette fenêtre permet de créer la page courante en définissant sa mise enpage et l'insertion des contenus.

Le titre de la page sur laquelle vous travaillez est indiqué comme Page cou-rante.

La fenêtre propose les sections suivantes :

une représentation schématique de la page permettant de définir la miseen page à appliquer ;

la liste des objets disponibles pour créer des pages ;

l'aperçu pour afficher l'objet contenu dans la cellule sélectionnée de lagrille de mise en page.

Définition de la mise en page

Pour rendre plus intuitive la mise en page des contenus, WebSite X5 proposeune grille, qui par défaut est composée de deux lignes et deux colonnes, oùchaque cellule peut contenir un objet différent. Vous pouvez modifier à votregré le nombre de lignes et de colonnes selon le nombre de cellules nécessai-res.

Cette grille de mise en page ne sera pas visible lors de la navigation avec leNavigateur.

43

Chaque cellule de la grille peut contenir un seul objet, mais vous pouvez met-tre le même objet dans plusieurs cellules contiguës horizontalement ou verti-calement pour occuper un plus grand espace sur la page.

L'aspect des cellules de la grille de mise en page change selon les différentsétats de la cellule :

si elle contient un objet qui n'a pas encore été construit, elle montrel'icône correspondant au type d'objet sur un arrière-plan composé de lignesobliques grises ;

si elle contient un objet qui a déjà été construit, elle montre l'icône cor-respondant au type d'objet sur un arrière-plan bleu ciel uniforme ;

si elle contient l'objet sélectionné, elle est mise en évidence par une bor-dure bleue.

Les commandes de la barre d'outils permettent de définir la structure et lesparamètres graphiques de la grille de mise en page. Voici les commandes dis-ponibles pour modifier la grille de mise en page :

Contenu objet : elle est activée quand vous sélectionnez un objet déjàinséré dans une cellule et permet d'accéder à la fenêtre de création del'objet. La fenêtre rappelée varie selon le type d'objet.

Format de la cellule : elle est activée quand vous sélectionnez un objetdéjà inséré dans une cellule et permet de rappeler la fenêtre Format de lacellule pour définir l'aspect graphique de la cellule courante.

Alignement de l'objet : elle est activée quand vous sélectionnez un objetdéjà inséré dans une cellule et permet d'aligner l'objet enHaut/Centre/Bas et à Gauche/Centre/Droite par rapport à la cellule.

Elargir l'objet d'une colonne : elle est activée quand vous sélectionnez unobjet déjà inséré dans une cellule et permet de faire en sorte que l'objetoccupe une colonne supplémentaire.

Elargir l'objet d'une ligne : elle est activée quand vous sélectionnez unobjet déjà inséré dans une cellule et permet de faire en sorte que l'objetoccupe une ligne supplémentaire.

Réduire l'objet d'une colonne : elle est activée quand vous sélectionnezun objet qui occupe plusieurs colonnes et permet de faire en sorte qu'il oc-cupe une colonne de moins.

Réduire l'objet d'une ligne : elle est activée quand vous sélectionnez unobjet qui occupe plusieurs lignes et permet de faire en sorte qu'il occupeune ligne de moins.

44

Ajouter une ligne : permet d'ajouter une ligne au-dessous de celle indi-quée dans la boîte de dialogue. Vous pouvez créer des tableaux composésde 28 lignes au maximum.

Ajouter une colonne : permet d'ajouter une colonne. Vous pouvez créerdes tableaux composés de 6 colonnes au maximum.

Supprimer une ligne : permet de supprimer la ligne sélectionnée dans laboîte de dialogue.

Supprimer la dernière colonne : permet d'éliminer la dernière colonne àdroite.

Insertion des objets

Pour insérer un objet dans une page, il suffit de sélectionner l'icône qui lereprésente dans la liste des Objets disponibles, de la déplacer et relâcher surla grille de mise en page, dans la cellule voulue.

Chaque cellule de la grille de mise en page peut contenir un seul objet, maisun objet peut occuper plusieurs cellules adjacentes aussi bien horizontale-ment que verticalement.Vous pouvez en effet faire glisser l'icône de l'objet sélectionné sur la borduredes cellules: ainsi l'objet occupera les deux cellules. Vous pouvez aussi sélec-tionner l'objet inséré et utiliser les commandes Elargir l'objet d'une colonne,Elargir l'objet d'une ligne, Réduire l'objet d'une colonne et Réduire l'objetd'une ligne pour définir les cellules qui doivent contenir un seul objet.

Si vous cliquez à l'aide du bouton droit de la souris sur l'icône de l'objet insérédans une cellule ou dans une cellule vide de la grille de mise en page, vousaffichez un menu contextuel comprenant les commandes Couper, Copier, Col-ler, Effacer et Format de la cellule.Ces commandes permettent de créer une copie d'un objet en le collant dansune autre cellule ou une autre page, ou bien de supprimer un objet. Poursupprimer un objet de la page, faites-le glisser à l'extérieur de la page ou ap-

45

puyez sur la touche SUPPR. De toute façon, quand vous insérez un second ob-jet dans une cellule, le premier est automatiquement supprimé.

Les commandes Copier style et Coller style du sous-menu de la commandeFormat de la cellule permettent d'appliquer automatiquement à une celluleles prédispositions définies dans la fenêtre Format de la cellule pour une au-tre cellule.

Pour changer l'ordre des objets, faites glisser un objet déjà inséré sur une cel-lule occupée par un autre objet.

Après avoir inséré un objet, pour rappeler la fenêtre permettant de définirson contenu, double-cliquez sur sa cellule ou sélectionnez l'objet et double-cliquez sur le bouton Contenu objet. Après avoir créé un objet, quand vousrevenez à la présente fenêtre, la cellule de la grille précédemment sélection-née est encore sélectionnée. Vous pouvez déplacer la sélection d'une cellule àl'autre à l'aide des touches de direction du clavier.

Il n'est pas obligatoire de remplir toutes les cellules de votre grille demise en page: sachez néanmoins qu'une cellule vide correspond à un es-pace vide sur votre page.

Pour mieux comprendre comment exploiter au mieux les possibilités demise en page, sachez que le fonctionnement du logiciel observe les rè-gles suivantes :

La largeur de la page est déterminée par le modèle.

La largeur des colonnes de la grille de mise en page est obtenue enpartageant la largeur de la page par le nombre de colonnes insérées.Par conséquent, toutes les cellules ont la même largeur et ce para-mètre ne peut pas être modifié manuellement.

Toutes les cellules placées sur la même rangée de la grille de mise enpage ont la même hauteur: par défaut, cette valeur est déterminéepar l'objet le plus haut parmi ceux contenus dans ces cellules.

Les objets insérés sont automatiquement redimensionnés en fonctionde la taille des cellules de la grille de mise en page.

46

Objet Texte

Cette fenêtre propose un éditeur de texte qui vous permet de taper et forma-ter des textes pour les objets Texte.

L'éditeur de texte se présente comme suit:

Les commandes suivantes sont disponibles :

Couper [CTRL+ X]Permet de couper le texte sélectionné pour le coller par la suite.

Copier [CTRL+ C]Permet de copier le texte sélectionné pour le coller par la suite.

Coller [CTRL+ V]Permet de coller le texte précédemment coupé ou copié à l'aide des com-mandes Couper et Copier. Avant de coller le texte, le programme lui en-lève toutes les informations éventuellement associées à l'origine et lui at-tribue celle définies dans l'éditeur.

Coller spécialPermet de coller le texte précédemment coupé ou copié à l'aide des com-mandes Couper et Copier. Le texte collé garde toutes les informationsd'origine.

Grâce aux commandes Couper, Copier et Coller vous pouvez reprendredes textes créés précédemment, même avec des éditeurs différents.

Annuler [CTRL+ Z]Permet d'annuler la dernière opération.

Restaurer [ALT+MAIUSC+BACKSPACE]Permet de revenir à la dernière opération annulée.

47

Insérer lien [CTRL+ l]Permet de définir un lien hypertextuel sur le (ou les) mot(s) sélectionné(s).Vous pouvez définir les configurations du lien en appelant la fenêtre Lien.

Insérer imagePermet d'insérer une image (au format JPG, GIF, PNG, BMP, DIB, RLE,WMF) à l'intérieur du texte. Les images insérées dans l'objet Texte sont au-tomatiquement redimensionnées si leur taille dépasse celle de la cellulede la grille de mise en page. Par ailleurs, vous pouvez redimensionner li-brement les images insérées à l'aide des poignets de sélection : pour lesmises en page particulières, il est toutefois conseillé d'utiliser l'objetImage.

Insérer objet OLEPermet d'insérer dans le texte un objet créé par un autre logiciel compati-ble avec la technologie OLE 2.0 (Object Linking and Embedding): tableauxréalisés avec Excel, textes composés sous Word, graphiques conçus avecMicrosoft Graph, etc. Après avoir inséré l'objet OLE, vous pouvez le modi-fier ; pour ce faire double-cliquez sur l'objet pour rappeler le programmeque vous avez utilisé pour le créer.

Insérer équationPermet de rappeler l'application Equation Editor qui permet de composern'importe quelle formule mathématique : la formule est aussitôt importéecomme objet OLE à l'intérieur du texte.

Après l'exportation du site, l'objet OLE est géré comme une image .PNGpour maintenir les éventuelles transparences : il est conseillé de ne pasinsérer des objets trop grands.

Pour utiliser la commande Insérez équation, vous devez installer sur vo-tre ordinateur Equation Editor, à savoir un utilitaire de Word.

Activer code HTMLElle permet d'insérer directement le code HTML à l'intérieur de la page detexte. Pratiquement les caractères < et > ne sont pas interprétés commemajeur et mineur, et le texte entre les deux est considéré un TAG HTML

Paramètres de RollOverPermet de définir le RollOver sur le texte : ainsi le texte n'est plus statiquemais il défile. Pour définir les options du RollOver, rappelez la fenêtre Pa-ramètres de RollOver.

48

Adapter à la largeur de la cellulePermet de simuler l'aspect que prendra le texte en fonction de la taille dela cellule de mise en page qui l'accueillera.

Choix des policesPermet de choisir le type de police à utiliser.

La liste déroulante propose toutes les polices présentes sur l'ordinateur.Si la police utilisée n'est pas installée sur l'ordinateur de celui qui navi-gue sur votre site, elle sera automatiquement remplacée par une policesemblable.

Taille de la policePermet de définir la taille de la police.

Gras [CTRL+ G]Transforme le texte sélectionné en gras.

Italique [CTRL+ I]Transforme le texte sélectionné en italique.

Souligné [CTRL+ U]Souligne le texte sélectionné.

Couleur du textePermet de sélectionner, dans la fenêtre Couleur, la couleur à appliquer autexte sélectionné.

Couleur d'arrière-plan du textePermet de définir, dans la fenêtre Couleur, la couleur de l'arrière-plan dutexte sélectionné.

Liste à pucesPermet de créer une liste à puces contenant des rubriques.

Alignement à gauchePermet d'aligner à gauche le texte sélectionné.

Alignement au centrePermet d'aligner au centre le texte sélectionné.

Alignement à droitePermet d'aligner à droite le texte sélectionné.

Alignement justifiéPermet de justifier le texte sélectionné.

49

Disposer le texte à droiteElle est activée quand vous sélectionnez une image insérée dans le texteet permet de faire défiler le texte sur le côté droit de l'image.

Disposition normaleActivée par défaut, elle fait en sorte que l'image reste insérée dans le fluxdu texte comme un mot quelconque.

Disposer le texte à gaucheElle est activée quand vous sélectionnez une image insérée dans le texteet permet de faire défiler le texte sur le côté gauche de l'image.

Si vous cliquez sur le bouton droit de la souris, vous affichez un menu contex-tuel qui propose de nouveau les commandes : Annuler, Couper, Copier, Col-ler, Coller spécial, Effacer et Sélectionner tout.

Paramètres de RollOver

Cette fenêtre permet de définir les paramètres RollOver du texte. Vous pou-vez agir sur :

Activer : permet d'activer le RollOver sur le texte et de définir la Hauteurdu cadre où le texte apparaîtra.

Modalité : permet de définir comment le texte défilera. Vous pouvez choi-sir parmi les options suivantes: Fixe, Défilement continu, Défilement uni-que et Alterné.

Direction : permet de définir la direction de défilement du texte. Le défi-lement peut se produire vers le Haut, le Bas, la Gauche, Droite.

Options : permet de définir la vitesse de défilement du texte et d'inter-rompre le défilement au passage de la souris (en sélectionnant l'option Ar-rêter le mouvement au passage de la souris).

L'option Hauteur n'est disponible que si le RollOver défini est vertical(direction : vers le haut ou le bas). En revanche, si le RollOver défini esthorizontal (direction: vers la gauche ou la droite), l'effet est meilleur sil'objet Texte occupe toute la ligne.

Comment créer une case de texte à l'aide de la barre de défilement ?

Pour cela, il suffit d'entrer le texte à l'aide de l'objet Texte, puis d'acti-ver le RollOver en veillant à :

50

établir la Hauteur de la cellule en définissant une valeur en pixelsinférieure à celle nécessaire pour l'affichage complet du texte ;

définir l'option Fixe comme Modalité de défilement.

Objet Image

Cette fenêtre permet de choisir le fichier graphique à utiliser pour composerun objet Image, d'effectuer des opérations de retouches photo à l'aide del'éditeur approprié et de définir des options d'affichage particulières commele zoom ou le déplacement sur des vues d'ensemble.

Les commandes disponibles sont articulées en deux sections :

section Générales section Affichage

Les commandes de la section Générales permettent de définir et d'éditerl'objet Image.

Pour sélectionner un fichier graphique, cliquez sur le bouton pour parcou-rir les ressources disponibles : vous pouvez utiliser les fichiers au format JPG,GIF, PNG, PSD, BMP, TIF, DIB, PCX, RLE, TGA, WMF.

L'aperçu de l'image importée est affichée dans le cadre Aperçu. Si vous cli-quez sur le bouton Modifier, vous rappelez l'Editeur Graphique interne per-mettant de modifier l'image importée.

Pour l'image insérée vous pouvez définir :

Texte alternatif : permet d'insérer le texte qui apparaîtra quand l'imagene pourra pas être affichée.

51

Lien : permet de définir un lien vers l'image. Vous pouvez définir les confi-gurations du lien en appelant la fenêtre Lien.

Les paramètres suivants sont disponibles dans la section Options de sauve-garde :

Qualité JPG : permet de définir le niveau de qualité à maintenir lors de laconversion de l'image en JPG. Toutes les images importées sont automati-quement transformées dans le format JPG : plus le taux de compressionsera haut, moins la qualité sera maintenue.

Méthode de réduction : permet de choisir la méthode de réduction à ap-pliquer lors de l'enregistrement du fichier au format JPG. Vous pouvezchoisir une des méthodes suivantes :

Bilinéaire : c'est la méthode de réduction la plus rapide mais elle per-met de maintenir une qualité de l'image inférieure par rapport aux au-tres méthodes proposées.

Decimate (moyen) : cette méthode permet d'obtenir, en termes de vi-tesse et qualité, des performances intermédiaires par rapport aux au-tres méthodes proposées.

Bicubic (plus lent, plus précis) : c'est la méthode de réduction la pluslente, mais celle qui garantit la meilleure qualité d'image.

Il est conseillé d'insérer des fichiers graphiques au format .GIF ou .JPG.Toutes les images insérées (dans un format différent de JPG, GIF et PNG)sont automatiquement converties dans le format JPG, selon le niveau decompression défini. La conversion au format JPG est effectuée même sil'image a une taille supérieure à celle de la cellule de la grille de mise enpage et si elle est modifiée à l'aide de l'Editeur graphique. Dans tous lesautres cas, l'image est copiée tel quel. Cela est nécessaire pour mainte-nir l'effet de transparence appliqué aux images GIF.

Pour les images insérées, la barre d'outils d'Internet Explorer est automa-tiquement désactivée : cette barre d'outils présente généralement lesoptions : Sauvergarder Image, Imprimer Image, Envoyer Image par e-mail, Ouvrir le dossier d'images.

Les commandes de la section Affichage permettent de définir certaines op-tions d'affichage pour obtenir une vue d'ensemble de l'image avec des effetszoom et de déplacement.

52

Redimensionnement automatique de l'image : activée par défaut, cetteoption redimensionne automatiquement l'image pour l'adapter aux dimen-sions de la cellule de la grille de mise en page.

Déplacement manuel de l'image agrandie : si vous sélectionnez cette op-tion, vous pouvez déplacer l'image à l'aide d'un clic pour mettre en premierplan le détail voulu.Le fonctionnement et l'effet final changent en fonction des Paramètres dé-finis ; vous pouvez configurer les cas suivants:

1. Si vous définissez comme Modalités dedéplacement le Déplacement libre, les dimensionsde l'image sont réduites en fonction de celles de lacellule de la grille de mise en page puis recalculéesselon le Facteur d'agrandissement défini (parexemple, doublées pour un facteurd'agrandissement défini sur 200 %). L'image ainsi agrandie sera donc plusgrande que la zone d'affichage : en bas à droite, l'icône en forme demain indique qu'il faut cliquer sur l'image et la faire glisser pour ladéplacer horizontalement ou verticalement.

2. Si vous définissez comme Modalités dedéplacement Photo panoramique horizontale,vous ne pourrez faire glisser l'image quehorizontalement. Pour bien exploiter cet effet, labase de l'image doit être beaucoup plus grande quesa hauteur. Vous devez par ailleurs indiquer dans lechamp Hauteur la valeur en pixels de la hauteur del'image.

3. Comme dans le cas précédent, si vous définissezcomme Modalités de déplacement Photopanoramique verticale, vous ne pouvez faireglisser l'image que verticalement. Vous devezutiliser des images dont la hauteur est beaucoupplus grande que la base et définir dans le champHauteur la valeur en pixels à maintenir dans lacellule de la grille de mise en page concernée.

Déplacement automatique de l'image agrandie : si vous sélectionnezcette option, vous pourrez déplacer l'image en passant simplement la sou-ris. Les considérations données pour le déplacement manuel sont égale-ment valables pour cet effet : dans ce cas, en bas à droite de l'image vous

verrez le curseur ; vous pourrez par ailleurs sélectionner l'option Mou-

53

vement automatique continu qui fait en sorte que l'image se déplacecontinuellement pendant son affichage.

Zoom Image : si vous sélectionnez cette option, vous pourrez agrandir ouréduire l'image par un clic. Dans ce cas, le programme crée automatique-ment deux copies de l'image insérée : la première copie à une taille iden-tique à celle de la cellule de la grille de mise en page ; en revanche, ladeuxième copie a la taille de la première copie multipliée par le Facteurd'agrandissement défini. Quand vous ouvrez la page, vous verrez l'imageplus petite et une icône en bas à droite indiquant la possibilité de l'agran-dir : quand vous cliquez sur cette icône, l'image est agrandie et le curseurse transforme pour indiquer qu'un second clic entraînera la réduction del'image.

Objet Tableau

Cette fenêtre permet de créer un tableau.

Par défaut, le programme propose un tableau composé de deux lignes et troiscolonnes qui occupe toute la largeur de la cellule. Bien évidemment, vouspouvez ajouter ou supprimer des lignes et des colonnes, définir les dimen-sions, unir et séparer les cellules pour créer des tableaux plus ou moins com-plexes.

Les commandes suivantes sont disponibles :

Couper [CTRL+ X]Permet de couper le texte sélectionné pour le coller par la suite.

Copier [CTRL+ C]Permet de copier le texte sélectionné pour le coller par la suite.

Coller [CTRL+ V]Permet de coller le texte précédemment coupé ou copié à l'aide des com-mandes correspondantes. Avant de coller le texte, le programme lui enlève

54

toutes les informations éventuellement associées à l'origine et lui attribuecelle définies dans l'éditeur.

Coller spécialPermet de coller le texte précédemment coupé ou copié à l'aide des com-mandes Couper et Copier. Le texte collé garde toutes les informationsd'origine.

Annuler [CTRL+ Z]Permet d'annuler la dernière opération.

Restaurer [ALT+MAIUSC+BACKSPACE]Permet de revenir à la dernière opération annulée.

Insérer lien[CTRL+ l]Permet de définir un link hypertextuel sur les mots et/ou les images sélec-tionnés. Vous pouvez définir les configurations du lien en appelant la fenê-tre Lien.

Insérer imagePermet d'insérer une image (au format JPG, GIF, PNG, BMP, DIB, RLE,WMF) dans la cellule du tableau. Vous pouvez redimensionner librement lesimages insérées à l'aide des poignets de sélection.

Insérer objet OLEPermet d'insérer dans la cellule du tableau un objet créé à l'aide d'un pro-gramme d'application externe qui supporte la technologie OLE 2.0 (ObjectLinking and Embedding): tableaux réalisés avec Excel, textes composéssous Word, graphiques conçus avec Microsoft Graph, etc. Après avoir insérél'objet OLE, vous pouvez le modifier ; pour ce faire double-cliquez sur l'ob-jet pour rappeler le programme que vous avez utilisé pour le créer.

Insérer équationPermet de rappeler l'application Equation Editor qui permet de composern'importe quelle formule mathématique : cette formule est ensuite impor-tée comme objet OLE dans la cellule du tableau.

Après l'exportation du site, l'objet OLE est géré comme une image .PNGpour maintenir les éventuelles transparences : il est conseillé de ne pasinsérer des objets trop grands.

Pour utiliser la commande Insérez équation, vous devez installer sur vo-tre ordinateur Equation Editor, à savoir un utilitaire de Word.

55

Activer code HTMLElle permet d'insérer directement le code HTML à l'intérieur de la page detexte. Pratiquement les caractères < et > ne sont pas interprétés commemajeur et mineur, et le texte entre les deux est considéré un TAG HTML.

Paramètres de RollOverPermet de définir le RollOver sur le texte : ainsi le texte n'est plus statiquemais il défile. Pour définir les options du RollOver, rappelez la fenêtre Pa-ramètres de RollOver.

Ajouter une lignePermet d'ajouter une ligne après celle où se trouve le curseur.

Ajouter une colonnePermet d'ajouter une colonne après celle où se trouve le curseur.

Supprimer la ligne courantePermet de supprimer la ligne sur laquelle se trouve le curseur.

Supprimer la colonne courantePermet de supprimer la colonne sur laquelle se trouve le curseur.

Fusionner les cellulesPermet d'unir plusieurs cellules adjacentes pour en former une seule.

Séparer les cellulesPermet de séparer la cellule sélectionnée en deux cellules adjacentes ho-rizontalement.

Choix des policesPermet de choisir le type de police à utiliser.

Taille de la policePermet de définir la taille de la police.

Gras [CTRL+ G]Transforme le texte sélectionné en gras.

Italique [CTRL+ I]Transforme le texte sélectionné en italique.

Souligné [CTRL+ U]Souligne le texte sélectionné.

Couleur du textePermet de définir, dans la fenêtre Couleur, la couleur à appliquer au textesélectionné.

56

Couleur d'arrière-plan du textePermet de définir, dans la fenêtre Couleur, la couleur de l'arrière-plan dela cellule où se trouve le curseur.

Style de la bordure de la cellulePermet de définir, dans la fenêtre appropriée, le style de la bordure de la cel-lule du tableau. Vous pouvez définir aussi bien la couleur de chaque côté descellules, que l'épaisseur en pixels des raies qui délimitent les lignes et les co-lonnes : les modifications effectuées sont affichées dans la fenêtre Aperçu.

Alignement à gauchePermet d'aligner à gauche le texte sélectionné.

Alignement au centrePermet d'aligner au centre le texte sélectionné.

Alignement à droitePermet d'aligner à droite le texte sélectionné.

Alignement en hautPermet d'aligner en haut le texte sélectionné.

Alignement au milieuPermet d'aligner au centre verticalement le texte sélectionné.

Alignement en basPermet d'aligner au bas le texte sélectionné.

En cliquant sur le bouton droit de la souris, vous rappelez un menu contextuelqui propose de nouveau les options Annuler, Couper, Copier, Coller, Collerspécial, Effacer ainsi que les options :

Hauteur des lignesPermet de définir, dans la fenêtre appropriée, la valeur en pixels corres-pondant à la hauteur des lignes sélectionnées. Si vous définissez la valeur0, les lignes prennent automatiquement la hauteur minimum nécessairepour afficher le contenu inséré.

Largeur des colonnesPermet de définir, dans la fenêtre appropriée, la valeur en pixels relativeà la largeur des colonnes sélectionnées.

Vous pouvez aussi modifier la taille des lignes, des colonnes ou de chaquecellule en positionnant le curseur sur les bordures et en les faisant glisserjusqu'à la taille voulue en maintenant enfoncé le bouton gauche de la souris.

57

Si vous sélectionnez une cellule et que vous déplacez la bordure gaucheet/ou droite, vous modifiez uniquement la taille de la cellule courante.

Disposition imagePermet de définir comment placer le texte par rapport à une image insé-rée. Voici les modes disponibles :

Disposition normale : activée par défaut, elle fait en sorte que l'imagereste insérée dans le flux du texte comme un mot quelconque.

Disposer le texte à droite : permet de faire défiler le texte sur le côtédroit de l'image.

Disposer le texte à gauche : permet de faire défiler le texte sur le côtégauche de l'image.

Si un tableau ne contient aucun texte, il est considéré comme étant videet ne sera pas affiché.

Objet Animation Flash

Cette fenêtre permet de choisir le fichier à utiliser pour composer l'objetAnimation Flash.

L'animation Flash peut être insérée en important soit un fichier présent surl'ordinateur soit un fichier déjà publié sur Internet. Dans le premier cas, sé-

lectionnez l'option Fichier sur PC local, cliquez sur le bouton pour par-courir les ressources disponibles et déterminez un fichier au format SWF. Dansle second cas, sélectionnez l'option Fichier sur Internet et tapez dans lechamp approprié l'adresse à laquelle la ressource est déjà disponible enligne.

Sélectionnez l'option Aperçu pour afficher l'animation importée dans la fenê-tre appropriée.

Pour afficher l'aperçu de l'animation, vous devez installer le Player deMacromedia Flash.

Voici les options disponibles pour l'animation insérée :

Texte alternatif : permet d'insérer le texte qui remplace l'animation Flashquand celle-ci ne peut pas être affichée.

58

Version Player Flash : permet de définir la version du Player Flash qui af-fichera l'animation (seulement pour Internet Explorer).

Arrière-plan transparent : si cette option est activée, elle permet de ren-dre transparent l'arrière-plan de l'animation.

Pour l'animation insérée, vous pouvez définir :

Taille : permet de spécifier la Largeur et la Hauteur de l'animation. Enfonction de l'espace disponible pour l'objet dans la grille de mise en page,le programme indique la largeur maximum que l'animation peut prendre.

Pour les animations Flash, le programme insère automatiquement uncode JavaScript pour éviter que l'activation du contrôle soit demandéependant la navigation avec Internet Explorer.

Objet Vidéo/Son

Cette fenêtre permet de choisir le fichier à utiliser pour composer l'objet Vi-déo/Son.

Selon la ressource à importer, vous pouvez insérer l'objet Vidéo/Audio de dif-férentes façons:

Fichier sur PC local : quand cette option est activée, il suffit de cliquer

sur le bouton pour parcourir les ressources disponibles et déterminer lefichier au format AVI, WMV, MPG, MOV, QT, RM, WAV, MP3, WMA, MID,AIF, AU, RA à importer.

Fichier sur Internet : quand cette option est activée, il faut taper dans lechamp approprié l'adresse à laquelle la ressource est déjà disponible enligne.

Code HTML vidéo YouTube : quand cette option est activée, il faut taperdans le champ approprié le code HTML correspondant au vidéo déjà publiésur YouTube.

Quand vous insérez de cette façon un vidéo publié sur YouTube, les di-mensions d'origine sont modifiées en fonction des paramètres de WebSiteX5. Pour mieux contrôler les dimensions, il est conseillé d'importer levidéo YouTube à travers l'objet Code HTML et non pas à travers l'objetVidéo.

Pour afficher l'aperçu de l'objet vidéo/son importé, sélectionnez l'optionAperçu dans la fenêtre appropriée.

59

Pour afficher le fichier au format RM et RA, le programme utilise le lec-teur RealVideo ; en revanche, pour afficher le fichier au format Quick-Time (MOV et QT), il utilise le lecteur QuickTime Player : si ces lecteursne figurent pas sur l'ordinateur, le logiciel propose de les installer.

Pour tous les autres formats vidéo, le programme utilise Microsoft Win-dows Media Player.

Pour l'objet Vidéo/Son inséré, vous pouvez utiliser les commandes :

Texte alternatif : permet d'insérer le texte qui remplace le vidéo ou le sonne pouvant pas être affiché.

Afficher la barre d'outils : permet d'afficher une barre d'outils contenanttoutes les commandes nécessaires pour gérer des vidéos et des sons.

Taille : permet de définir la Largeur et la Hauteur du vidéo en pixels ouseulement la Largeur de la barre de contrôle du son.

Pour définir une bande sonore dans une page du site, insérez un objetVidéo/Son dans une ligne de la grille de mise en page qui ne doit conte-nir aucun autre objet, choisissez le fichier sonore à utiliser et désactivezl'option Afficher la barre d'outils.

Objet Galerie d'images

Cette fenêtre permet de créer effectivement l'objet Galerie d'images. La Ga-lerie d'images présente une série de miniatures sur lesquelles vous pouvez cli-quer pour afficher l'image agrandie.

Les commandes nécessaires pour créer la Galerie d'images sont présentéesdans trois sections:

section Liste

section Paramètres

section Miniature

Les commandes de la section Liste de cette fenêtre permettent de composerune liste d'images à utiliser dans la Galerie d'images.

Tous les fichiers graphiques importés figurent dans la Liste des images: si voussélectionnez un fichier dans la liste, vous pouvez voir son aperçu dans la fenê-tre appropriée.

60

Les commandes disponibles pour composer la Galerie d'images son:

Ajouter : permet d'ajouter le fichier de l'image à insérer dans la Galeried'images. La fenêtre Sélection fichier permet de sélectionner simultané-ment plusieurs fichiers.

Supprimer...: permet de supprimer le fichier sélectionné dans la Liste desimages qui apparaît dans la Galerie d'images.

En haut : permet de déplacer le fichier sélectionné avant le fichier précé-dent dans la Liste des images qui apparaît dans la Galerie d'images.

En bas : permet de déplacer le fichier sélectionné après le fichier suivantdans la Liste des images qui apparaît dans la Galerie d'images.

Modifier : permet d'ouvrir l'Editeur graphique interne pour modifier l'imagesélectionnée dans la Liste des images.

Pour chaque image importée, vous pouvez définir plusieurs paramètres, figu-rant dans la section Options dimage :

Texte alternatif : permet d'insérer le texte qui apparaîtra quand l'imagene pourra pas être affichée.

Lien : Si vous cliquez sur le bouton , vous rappelez la fenêtre Lien quipermet de définir le lien à associer à l'image sélectionnée dans la Liste desimages. Ce nouveau lien remplace celui de l'image agrandie même si l'op-tion Crée lien pour agrandir image est sélectionnée.

61

Description de l'image agrandie : permet d'insérer le texte de descriptionpour l'image sélectionnée dans la Liste des images. Le texte de descriptionest indiqué au bas de la fenêtre qui affiche l'image agrandie.

Les commandes de la section Paramètres de cette fenêtre permettent dedéfinir les paramètres relatifs au type de Galerie d'images que vous voulezréaliser.

Options : vous pouvez définir le Type de Galerie d'images et le nombres deMiniatures visibles.

La largeur minimum des miniatures est de 48 pixels. Si vous entrez unevaleur pour l'option Miniatures visibles qui entraîne une réduction exces-sive des miniatures, ce paramètre est automatiquement mis à jour.

Pour ce qui concerne les types de navigateur disponibles, vous pouvez choisirparmi :

Classique - Seules les images en miniatures seront affichées : quand vouscliquez sur une miniature, son image agrandie s'affiche. L'image agrandiepeut être affichée soit dans la fenêtre du navigateur, mise en premier planalors que la page d'origine devient plus opaque et foncée, soit dans une fe-nêtre Popup appropriée.

Représentation horizontale inférieure - Les miniatures sont affichéescomme s'il s'agissait de photogrammes d'une pellicule qui défile à l'aide desboutons appropriés. Ces photogrammes sont placés horizontalement, sousl'image agrandie de la miniature.

62

Représentation horizontale supérieure - Comme pour le navigateur pré-cédent, les miniatures sont placées horizontalement mais au-dessus del'image agrandie de la miniature.

Présentation verticale gauche - Dans ce cas également, les miniaturescomposent une sorte de "pellicule" qui, contrairement aux deux types denavigateurs précédents, est placée verticalement à gauche de l'imageagrandie de la miniature.

Présentation verticale droite - Comme pour le navigateur précédent, lesminiatures sont placées verticalement mais à droite de l'image agrandie dela miniature.

Liste horizontale - Semblable à la Présentation horizontale inférieure ousupérieure, elle montre toutefois seulement les miniatures et non pasl'image agrandie.

Liste verticale - Semblable à la Présentation verticale droite ou gauche,elle montre toutefois seulement les miniatures et non pas l'image agran-die.

Selon le type de navigateur sélectionné, vous pouvez agir sur différents Pa-ramètres.

Pour le type de Navigateur Classique, Liste horizontale et Liste verticale,voici les paramètres disponibles :

Créer un lien pour agrandir l'image: si vous sélectionnez cette option, lelien et les images agrandies sont automatiquement définis sur les différen-tes miniatures du Navigateur. Ces images agrandies sont affichées dans lafenêtre du Navigateur, mises en premier plan alors que la page d'originedevient plus opaque et foncée.

Largeur maximum : permet de définir la largeur maximale en pixels del'image agrandie.

Hauteur maximum : permet de définir la Hauteur maximale en pixels del'image agrandie.

Créer un Popup externe : si vous sélectionnez cette option, l'image agran-die est affichée dans une fenêtre Popup. Dans ce cas, le Popup prévoitl'ouverture d'une deuxième fenêtre du Navigateur.

Couleur d'arrière-plan : permet de définir la couleur de l'arrière-plan de lafenêtre Popup (dans la fenêtre Couleur).

63

Couleur de texte : permet de définir (dans la fenêtre Couleur) la couleurdu texte éventuellement affiché dans la fenêtre Popup. La fenêtre Popupreprend automatiquement le texte entré comme Description de l'imageagrandie dans les options Image de la section Liste.

Police : permet de définir le type de police du texte qui s'affiche dans lafenêtre Popup.

Pour le type de navigateur Présentation horizontale inférieure, Présenta-tion horizontale supérieure, Présentation verticale gauche et Présentationverticale droite, voici les paramètres disponibles :

Proportion : permet de définir quelle proportion doit être automatique-ment gardée entre la base et le sommet de l'image redimensionnée auto-matiquement dans le navigateur. Vous pouvez choisir parmi 3 types : Rec-tangulaire horizontal (4:3) ; Rectangulaire vertical (3:4) ; Carré (1:1).

Le choix du rapport de proportion à maintenir devra avoir lieu en fonc-tion des images insérées dans le navigateur : par exemple, s'il y a davan-tage d'images rectangulaires dont la base est supérieure à la hauteur, ilconvient de définir le rapport 4:3.

Effet : quand vous cliquez sur le bouton , vous rappelez la fenêtre Effetde Transition qui permet de choisir l'effet d'entrée des images agrandiesdu Navigateur. Pour chaque effet, vous pouvez établir la Durée (en se-condes) et afficher un aperçu de l'effet choisi.

Ces effets ne sont valides que si le Navigateur utilisé pour la navigationest Microsoft Internet Explorer version 5.5 et suivantes. Avec les naviga-teurs qui utilisent comme moteur de rendering Gecko ou WebKit (Fire-fox, Safari, Chrome, etc.), les effets d'entrée sont automatiquementremplacés par un effet de fondu croisé.

Vitesse : permet de définir la vitesse de défilement des images miniatures.

Couleur de texte: permet de définir (dans la fenêtre Couleur) la couleurdu texte éventuellement affiché dans la fenêtre Popup.

Police: permet de définir le type de police du texte qui s'affiche dans lafenêtre Popup.

WebSiteX5 crée automatiquement les miniatures ; il enregistre les ima-ges sous un taille réduite et les comprime dans le format PNG.

64

Les commandes de la section Miniature permettent de définir les paramètresrelatifs à l'aspect graphique des miniatures de la Galerie d'images.

Les options du cadre Style Miniatures Disponibles permettent d'appliquer uncadre à l'image réduite créée automatiquement par le programme pour obte-nir la liste des miniatures :

Image prédéfinie : permet de choisir le cadre à appliquer aux miniaturesen le sélectionnant parmi ceux proposés.

Image personnalisée : permet de rappeler le fichier graphique (au formatJPG, GIF, PNG, BMP, PSD, TIF, DIB, PCX, RLE, TGA, WPG) correspondant aucadre voulu.

Pour créer un nouveau cadre, il suffit de préparer l'image et de l'enregis-trer dans un fichier spécifique : il est préférable que l'image du cadresoit carrée et s'il faut maintenir une transparence externe, enregistrez-lasous le format PNG.

Pour les miniatures, vous disposez également des Options suivantes :

Marge extérieure (%) : permet de définir la marge qu'il faut maintenir en-tre l'image de la miniature et le cadre qui l'entoure.

Activer variante de couleur : Si vous sélectionnez cette option, vous pou-vez définir dans la fenêtre Couleur, la couleur vers laquelle tendra le ca-dre des miniatures. Vous appliquez donc un effet "Colorisé" au cadre desorte qu'il tende vers la couleur voulue.

L'effet variante de couleur ne peut pas être utilisé sur des cadres noirsou blancs : si tel est le cas, l'option "Colorisé" n'entraîne aucune variationde couleur.

Objet Diaporama

Cette fenêtre permet de créer effectivement l'objet Diaporama. Il s'agit d'uneséquence d'images munie d'une barre de boutons pour la navigation.

Les commandes nécessaires pour créer un Diaporama sont présentées dansdeux sections:

section Liste section Paramètres

65

Le Diaporama peut aussi être lancé à travers un lien inséré sur les pages: pour plus d'informations, reportez-vous à Insertion des liens.

Les commandes de la section Liste permettent de créer la liste des images àutiliser dans le Diaporama.

Tous les fichiers graphiques importés figurent dans la Liste des images: quandvous sélectionnez un fichier dans cette liste, son aperçu apparaît dans la fe-nêtre appropriée.

Voici les commandes disponibles pour créer le Diaporama :

Ajouter : permet de sélectionner le fichier de l'image à insérer dans leDiaporama. La fenêtre Sélection fichier permet de sélectionner plusieursfichiers simultanément.

Supprimer...: permet de supprimer le fichier sélectionné dans la Liste desimages à insérer dans le Diaporama.

En haut : permet de déplacer le fichier sélectionné avant le fichier précé-dent dans la Liste des images à afficher dans le Diaporama.

En bas : permet de déplacer le fichier sélectionné après le fichier suivantdans la Liste des images à afficher dans le Diaporama.

Modifier : permet d'ouvrir l'Editeur graphique interne pour modifierl'image sélectionnée dans la Liste des images.

66

Pour chaque image importée, vous pouvez définir plusieurs paramètres, figu-rant dans la section Options d’image :

Effet : Si vous cliquez sur le bouton , vous rappelez la fenêtre Effet d'en-trée de la page permettant de définir l'effet d'entrée pour l'image du Diapo-rama sélectionnée dans la Liste des images. Pour chaque effet, vous pouvezétablir la Durée (en secondes) et afficher un aperçu de l'effet choisi.

Si vous maintenez enfoncée la touche SHIFT, vous pouvez sélectionnersimultanément plusieurs images pour leur associer le même effet d'en-trée.

Ces effets ne sont valides que si le Navigateur utilisé pour la navigationest Microsoft Internet Explorer version 5.5 et suivantes. Avec les naviga-teurs qui utilisent comme moteur de rendering Gecko ou WebKit (Fire-fox, Safari, Chrome, etc.), les effets d'entrée sont automatiquementremplacés par un effet de fondu croisé.

Lien : Si vous cliquez sur le bouton , vous rappelez la fenêtre Lien per-mettant de définir le lien à associer à l'image du Diaporama sélectionnéedans la Liste des images.

Description : le texte tapé dans ce champ est affiché dans une zone tran-slucide qui apparaît au bas de l'image du Diaporama sélectionnée dans laListe des images. Cette description disparaît au passage de la souris surl'image.

Les commandes de la section Paramètres de cette fenêtre permettent de dé-finir les paramètres relatifs à l'aspect graphique du Diaporama et à l'affichagedes images qui le composent.

67

Cadre : permet de définir l'aspect du cadre où sont insérées les images, endéfinissant l'Epaisseur bordure, la Couleur bordure, la Couleur d’arrière-plan, le Type de police et l'Alignement, ainsi que les dimensions en pixelsde la Largeur maximum et de la Hauteur maximum des images. Selon lastructure de la page, si le cadre ne peut pas prendre la largeur définie, lesdimensions sont automatiquement recalculées pour maintenir le facteur deproportion entre la base et la hauteur.

Si vous définissez la valeur de l'épaisseur de la bordure sur 0 et la cou-leur de bordure identique à celle de l'arrière-plan de la page, vous éli-minerez complètement le cadre des images.

Visualiser : permet de définir certains paramètres relatifs à l'affichage duDiaporama. Vous pouvez définir le Type de boutons à utiliser pour contrô-ler la reproduction du Diaporama. Vous pouvez aussi faire en sorte que leDiaporama soit affiché à plein écran en sélectionnant l'option Activer l'af-fichage plein écran et qu'il soit lancé automatiquement et reproduit sanscliquer sur aucun bouton en sélectionnant l'option Cacher les boutons etdémarrer automatiquement.

Les images du Diaporama sont automatiquement redimensionnées pourpouvoir être visualisées correctement.

En affichage plein écran, les liens éventuellement définis sur les imagesdu Diaporama n'apparaissent pas.

Alors que la liste des images peut être librement composée, la barre descommandes est créée automatiquement et comprend:

Transforme en plein écran : disponible si vous avez activé l'option PleinEcran. Permet d'afficher le Diaporama en plein écran, avec les images cen-trées sur un arrière-plan noir.

Ferme : disponible si vous avez activé l'option Plein Ecran. Permet d'annu-ler l'affichage en plein écran du Diaporama.

Précédent : permet d'afficher l'image précédente.

Suivant : permet d'afficher l'image suivante.

Play : permet de passer à la navigation automatique. Le passage d'uneimage à l'autre se produit selon les modalités établies par l'option Tempsd'attente des images.

68

Objet Formulaire d'envoi d'email

Cette fenêtre propose les outils et les options nécessaires pour créer des for-mulaires ayant pour but de collecter les coordonnées des utilisateurs.

Les différentes options sont regroupées dans des sections appropriées :

section Liste

section Envoi

section Graphiques

Quand vous testez le fonctionnement du site sur votre ordinateur, unmessage vous avertit que l'e-mail contenant les données collectées àtravers le formulaire ne sera pas envoyé. Le formulaire e-mail fonc-tionne entièrement après la publication du site sur le serveur.

Pour que le formulaire d'envoi e-mail fonctionne correctement, le ser-veur sur lequel le site sera publié doit supporter le langage de program-mation PHP et la commande MAIL doit être activée. Pour plus d'informa-tions, contactez votre fournisseur d'accès web.

Les commandes de la section Liste de cette fenêtre permettent d'établir leschamps qui figureront dans le formulaire.

Tous les champs créés sont affichés dans un tableau récapitulatif qui indique,pour chacun d'entre eux, la Description, le Type et si la réponse est Obliga-toire ou non.

Les commandes disponibles pour compléter le formulaire sont :

Ajouter : permet de rappeler la fenêtre Propriétés champ pour insérer unnouveau champ dans le formulaire.

Dupliquer : permet de créer une copie du champ sélectionné parmi ceuxfigurant dans le module.

Supprimer... : permet de supprimer le champ sélectionné parmi ceux figu-rant dans le module.

En haut : permet de déplacer le champ sélectionné avant le champ précé-dent.

En bas : permet de déplacer le champ sélectionné après le champ suivant.

69

Modifier : permet de rappeler la fenêtre Propriétés de champ pour modi-fier les paramètres du champ sélectionné.

La fenêtre Propriétés de champ rappelée à l'aide de la commande Ajouter ouModifier se présente comme illustrée ci-dessous.

La fenêtre Propriétés de champ permet tout d'abord de définir le type dechamp à ajouter dans le formulaire en choisissant parmi :

Texte : champ de texte disposé sur une seule ligne qui est affiché commeune case vide où l'utilisateur peut entrer librement la réponse la plus ap-propriée.

Courriel : champ de texte spécifique pour demander à l'utilisateur defournir une adresse courriel. Dans ces cas, le programme défini automati-quement un filtre pour contrôler l'exactitude de la donnée saisie : il doit yavoir le caractère @ et, dans le texte suivant, un point.

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. En réalité,trois champs sont insérés (mois, jour et année) formatés selon les défini-tions de la langue.

Liste déroulante : les possibilités sont groupées dans une liste ou l'utilisa-teur pourra choisir une seule réponse.

Liste : il s'agit d'une liste de réponses parmi lesquelles l'usager peut enchoisir une seule.

Choix multiple : les réponses sont présentées dans une liste à puces per-mettant à l'utilisateur de sélectionner plusieurs rubriques.

Choix unique : l'utilisateur peut sélectionner un seul choix dans la liste.

70

Fichier annexé : champ de texte où l'utilisateur, en cliquant sur le bouton

permettant de parcourir les ressources disponibles, peut spécifier le fi-chier à envoyer comme annexe.

Pour le bon fonctionnement des fichier annexés, contactez votre fournis-seur d'accès pour vérifier que le service est actif.

Question de contrôle : champ de texte où l'utilisateur doit entrer la ré-ponse à une question posée dans le but de distinguer les utilisateurs réelsdes programmes qui exploitent les formulaires de contact publiés enlignepour envoyer des courriers non désirés.

Comment puis-je donner la possibilité aux utilisateurs de me contac-ter et me protéger en même temps du spam ?

L'un des objectifs courants d'un site web est de pousser les utilisateurs ànous contacter via e-mail ou à remplir un formulaire pour demander desinformations, adhérer à un service , etc. Malheureusement, des pro-grammes en mesure d'identifier les adresses e-mail publiées et de rem-plir automatiquement les formulaires de contact se sont répandus dansle réseau : cela dans le but d'envoyer du courrier non désiré.

Pour vous protéger contre ces actions de spam, vous pouvez :

éviter de publier clairement vos adresses e-mail. Pour cela, WebSiteX5 n'affiche plus l'adresse e-mail dans le pied de page, comme aupa-ravant.

Utiliser la question de contrôle dans les formulaires d'envoi e-mail.Choisissez une question très simple, dont la réponse est évidente pourtout le monde : l'objectif est de distinguer les personnes des pro-grammes, et non pas d'évaluer les connaissances des utilisateurs. Pouréviter que les programmes arrivent à interpréter la question decontrôle, utilisez le plus grand nombre de mots possibles et évitez leschiffres et les signes mathématiques. Par exemple, une question dutype "Combien fait 2 + 2 ?" pourrait être interprétée facilement parles robots.

Utiliser le contrôle anti-spam "captcha" (option figurant dans la sectionEnvoi de la présente fenêtre). Vous pouvez utiliser cette option au lieude la question de contrôle car comme elle se base sur une image et nonpas un texte, elle offre un niveau de sécurité plus élevé.

71

Selon le champ sélectionné, le programme propose différentes options.

Description : permet d'insérer la description du champ. Ce texte qui seraaffiché au-dessus ou en regard du champ permet de spécifier l'informationrequise ou d'entrer le texte de la question à poser.

Largeur : permet de définir la largeur du champ qui pourra être 25%, 50%,75% ou 100% de l'espace disponible. Cette option n'est pas disponible pourles champs "Date", "Choix multiple" et "Choix unique".

Nombre de lignes : permet de définir la hauteur du champ en spécifiant lenombre de lignes utilisables (30 au maximum). Cette option est disponibleseulement pour les champs "zone de texte" et "Liste".

Etablir comme champ obligatoire : en activant cette option la réponse del'utilisateur est obligatoire. L'option n'est pas disponible dans le champChoix multiple et est activée par défaut dans le champ "Question decontrôle".

Mbre max de caractères : permet d'indiquer le nombre maximum de ca-ractères à entrer dans le champ. Vous pouvez par exemple établir à 11 lenombre maximum de caractères pour le champ d'entrée du code fiscal del'utilisateur. L'option est disponible seulement pour les types de champ"Texte" et "Courrier électronique".

Filtre sur la saise du texte : permet d'établir un contrôle de l'exactitudedes données entrées dans les champs "Texte" et "zone de texte". Vous pou-vez choisir parmi les filtres suivants :

Aucun : dans ce cas, les caractères et les chiffres sont acceptés.

Numérique : seuls les chiffres pourront être saisis.

Numéro de telephone/fax : accepte la saisie des chiffres, du caractère"-" et de l'espace.

Date : accepte la saisie des chiffres, et du caractère "/".

Pour les champs "Liste déroulante", "Liste", "Choix multiple" et "Choix unique",vous pouvez créer la liste des réponses possibles à l'aide des commandes sui-vantes :

Ajouter : permet d'entrer dans la boîte de dialogue, le texte d'une des ré-ponses possibles.

Renommer : permet de modifier le texte de la réponse sélectionnée.

72

Supprimer... : permet de supprimer la réponse sélectionnée.

En haut : permet de modifier l'ordre d'affichage des réponses possibles endéplaçant la réponse sélectionnée vers le haut.

En bas : permet de modifier l'ordre d'affichage des réponses possibles endéplaçant la réponse sélectionnée vers le bas.

Enfin l'option suivante est disponible seulement pour le champ "question decontrôle" :

Réponse correcte : permet de définir la réponse correcte qui seraconfrontée à celle donnée par l'utilisateur.

Les boutons Envoi pour envoyer le formulaire rempli et Reset pour effa-cer éventuellement les réponses données sont créés automatiquementpar le programme et positionnés à la fin du formulaire.

Les commandes de la section Envoi de cette fenêtre permettent de définirles modalités relatives à l'envoi via e-mail des données tapées dans le formu-laire.

Le cadre Méthode d'envoi des données propose les options suivantes :

Envoyer les données via e-mail : les données saisies dans le formulairesont envoyées via e-mail en exploitant un script PHP.

Envoyer les données au fichier : les données saisies dans le formulairesont envoyées via e-mail en exploitant le script indiqué (PHP, ASP, etc.).Cette option permet d'envoyer les données à travers un script différent si

73

PHP n'est pas disponible sur votre serveur, ou pour introduire les donnéescollectées directement dans une base de données.

Le cadre Envoi des données propose les options suivantes :

Adresse à laquelle envoyer les données : permet de définir l'adresse àlaquelle il faut envoyer les données.

Objet du message : permet de définir l'objet de l'E-mail contenant lesdonnées collectées.

Texte du message : permet de taper le texte qui introduit dans le mes-sage les données collectées.

Ajouter les données collectées au format CSV : permet d'enregistrer lesdonnées collectées également dans un fichier au format CSV joint à l'e-mail. Dans un fichier CSV, les données sont indiquées sous forme textuelle,comme une longue liste de rubriques séparées par un point-virgule : vouspouvez importer facilement ces fichiers dans les programmes de gestiondes feuilles de calcul (pour ex., Microsoft Excel).

Le cadre Options propose les options suivantes :

Confirmation après envoi des données : permet d'accéder au plan du sitepour définir la page à visualiser automatiquement quand le formulaire serarempli et les données auront été envoyées via e-mail.

Activer le contrôle anti-spam "Captcha": permet d'ajouter, au terme duformulaire, le contrôle anti-spam du Captcha. Le programme insère l'imagede quelques lettres déformées sur un arrière-plan flou : l'utilisateur doitrecopier correctement les lettres dans un champ approprié pour pouvoirenvoyer le message.

L'acronyme anglais CAPTCHA se réfère à un test permettant de détermi-ner si l'utilisateur est une personne ou un programme. L'acronyme vientde l'anglais "completely automated public Turing test to tell computersand humans apart" (test de Turing public complètement automatisé pourdistinguer l'homme de la machine). Un des tests captcha utilisés cou-ramment est de demander à l'utilisateur de réécrire des lettres ou deschiffres présents dans une séquence où ils sont déformés ou voilés.

74

Si l'option Envoie un e-mail de confirmation à l'utilisateur est sélectionné,l'utilisateur recevra automatiquement un e-mail de confirmation.

Champ E-mail de l'utilisateur : permet d'indiquer dans quel champ du mo-dule le programme doit prendre l'adresse courriel de l'utilisateur qui doitrecevoir l'e-mail de confirmation.

Objet du message : permet de définir l'objet de l'e-mail de confirmation.

Texte du message : permet d'indiquer le message de l'e-mail de confirmation.

Ajouter les données collectées : permet de joindre l'e-mail de confirma-tion des données récoltées dans le formulaire.

Les commandes de la section Graphiques de cette fenêtre permettent dedéfinir certains paramètres graphiques relatifs à l'aspect du formulaire et del'e-mail engendrés.

Le cadre Paramètres graphiques du formulaire propose les options suivantes :

Etiquette de texte en haut : permet de positionner l'étiquette de textecontenant la description de la question au-dessus du champ correspondant.

Etiquette de texte a gauche : permet de positionner l'étiquette de textecontenant la description de la question au-dessous du champ correspondant.

Police : permet de définir le Type de police, le Style et le Nombre depoints du texte.

Texte : permet de définir la couleur du texte.

75

Arrière-plan champs : permet de définir la couleur d'arrière-plan deschamps.

Arrière-plan des champs sur sélection : permet de définir la couleur d'ar-rière-plan des champs quand ils reçoivent le focus (gros plan).

Arrière-plan des lignes impaires : permet de définir une couleur d'arrière-plan différente pour les lignes impaires du formulaire.

Affecter une couleur différente d'arrière-plan aux lignes paires et impai-res d'un formulaire facilite la lecture notamment s'il est composé denombreux champs : cela améliore la consultation du formulaire et dusite web en général.

Texte des boutons : permet de définir la couleur du texte contenu dansles boutons.

Arrière-plan boutons : permet de définir la couleur d'arrière-plan des bou-tons.

L'option Ajouter les conditions d'acceptation (ex : Privacy), vous pouvezajouter au bas du formulaire un champ où figurent les conditions à accepterpour envoyer les données. Dans ce champ, vous pouvez par exemple entrer lanorme de référence sur la confidentialité du traitement des données collec-tées.

Sélectionnez Ajouter les conditions d'acceptation puis remplissez les champssuivants :

Titre de la condition : permet d'entrer le texte à afficher comme titre duchamp où figurent les conditions.

Texte de la condition : permet d'entrer le texte des conditions à accepteravant d'envoyer les données.

Les boutons J'accepte ou Je n'accepte pas sont créés automatiquementpar le programme et ajoutés sous le champ contant le texte des condi-tions prévues.

Le cadre Paramètres graphiques du message propose les options suivantes :

Police : permet de définir le Type de police, le Style et le Nombre depoints du texte.

76

Texte : permet de définir la couleur du texte.

Arrière-plan du texte : permet d'indiquer la couleur d'arrière-plan destextes des e-mail.

Arrière-plan du message : permet d'indiquer la couleur d'arrière-plan des e-mail.

Vous pouvez contrôler l'aspect des e-mail en rappelant la fenêtre Aperçu.

Objet Code HTML

Cette fenêtre propose un éditeur de texte qui permet de taper les codesHTML et/ou CSS.

Elle est composée des sections suivantes :

section HTML section CSS

L'éditeur de la section HTML se présente comme illustré ci-dessous :

Couper [CTRL+ X]Permet de couper le texte sélectionné pour le coller par la suite à l'aide dela commande appropriée.

Copier [CTRL+ C]Permet de copier le texte sélectionné pour le coller par la suite à l'aide dela commande appropriée.

Coller [CTRL+ V]Permet de coller le texte précédemment coupé ou copié à l'aide des com-mandes Couper et Copier.

Annuler [CTRL+ Z]Permet d'annuler la dernière opération.

Insérer code compteurPermet d'insérer le code du "Compteur des visites". Le programme affichela fenêtre compteur des visites permettant de choisir le type de compteur

77

à utiliser : le choix étant effectué, le code nécessaire est inséré automati-quement.

Objets InternetPermet d'accéder à une série de sites internet permettant de copier et uti-liser gratuitement (certains requièrent l'enregistrement) les codes néces-saires pour afficher dans votre site des informations de différents typesdans des boîtes appropriées (tickers).

Propriétés de la pagePermet de rappeler la fenêtre Propriétés de la Page permettant de définirune série de paramètres relatifs à la page sélectionnée.Cette commande est également disponible dans la fenêtre Création duplan du site. Il est en ainsi car, pour le bon fonctionnement du code HTMLinséré, il peut être nécessaire de prévoir une partie de code dans les sec-tions <head> et/ou <body> du fichier ou de modifier l'extension du fichier.

Fichiers liés au code HTMLÀ travers une fenêtre appropriée, elle permet de créer une liste des fi-chiers liés au code HTML. Tous les fichiers seront automatiquement copiésdans le sous dossier /files et publiés en ligne.

Dans le code HTML , le lien vers le fichier doit respecter le chemin indi-qué. Si par exemple, vous voulez créer un lien pour l'image "test.jpg", letag doit être sous la forme : <img rsc="files/test.jpg" />.

En plus de l'éditeur pour l'implémentation du code, vous pouvez établir la va-leur en pixels de la Hauteur objet HTML ; en revanche la Largeur objet HTMLest définie automatiquement selon la place disponible dans la grille de miseen page.

Si l'objet HTML inséré a une hauteur supérieure à celle définie par l'optionHauteur objet HTML, la barre de défilement apparaît automatiquement.

Le programme exécute automatiquement un contrôle sur le code entrépour vérifier que le nombre de caractères < coïncide avec celui des ca-ractères >. En effet, les caractères <> renferment les TAG.

L'éditeur disponible dans la section CSS permet de créer une feuille de style(CSS) pour l'objet HTML créé. Les CSS permettent de définir l'aspect d'unepage HTML ou XHTML.

L'éditeur est identique à celui disponible dans la section HTML.

78

Compteur des visites FrontPage

Cette fenêtre permet de définir les paramètres relatifs au Compteur de visi-tes. Le code inséré pour le compteur fonctionne seulement si le serveur où lespages seront publiées supporte les extensions Front Page™.

Dans la section Style, vous pouvez choisir un des 5 styles graphiques disponi-bles.

Dans la section Paramètres, vous pouvez définir le Nombre de chiffres à affi-cher (entre 1 et 10) dans le compteur et le Chemin local du fichierf-pCount.exe. Ce fichier se trouve normalement dans le dossier _vti_bin/ définipar défaut mais il pourrait se trouver ailleurs.

Il est conseillé de contacter votre Fournisseur d'accès (qui accueille lapage du site) pour vérifier si le serveur supporte les extensions de FrontPage™ et si le parcours du fichier fpCount.exe est correct.

Sachez que le compteur ne fonctionnera pas et ne sera pas affiché lorsde la visualisation du site sur la machine.

Insertion d'Objets Internet

Sur Internet on peut trouver parmi les ressources proposées pour les Créa-teurs de sites Web, les codes pour l'insertion des tickers dans les pagescréées.

Les tickers sont des cases, que l'on peut configurer dans leur graphisme etdimensions, où l'on signale des renseignements de tous genres, news, sport,gossip, prévisions météo, cours des bourses, horoscope etc.

L'utilisation des tickers offre des avantages :

elle permet d'augmenter le contenu du site et de le rendre par conséquentplus intéressant pour le lecteur ;

elle permet de présenter des renseignements constamment mis à jourgrâce au travail de rédaction du portail qui offre ses services.

Les tickers sont relativement faciles à utiliser: il suffit de copier le code HTMLprésenté par le portail qui les propose et de le coller à l'intérieur du code despages crées. WebSiteX5 rend l'opération encore plus facile: il suggère desadresses de sites où l'on peut trouver les codes et permet de les insérer direc-tement à l'intérieur de l'Objet Code HTML.

79

Objet Liste des produits

Cette fenêtre permet de créer une liste des produits insérés dans la catégoriespécifiée pour présenter l'image, la description et le prix et commander lesproduits à l'aide des fiches appropriées.

Les commandes disponibles sont articulées en deux sections :

section Liste section Paramètres

Pour que l'objet Liste des produits fonctionne correctement, vous devezpréalablement insérer des produits dans le panier e-commerce à l'aide descommandes de la section Panier virtuel e-commerce des Paramètresavancés.

Les options de la section Liste de cette fenêtre permettent d'indiquer lesproduits figurant dans la Liste des produits.

La fenêtre présente deux listes :

Catégorie: montre la liste de toutes les catégories de produits prévues lorsde la création du panier e-commerce et permet de sélectionner les catégo-ries dont vous voulez afficher les produits.

Liste des produits: selon l'option activée, Afficher tous les produits decette catégorie ou Afficher seulement les produits sélectionnés, elle mon-tre la liste de tous les produits insérés dans la catégorie sélectionnée oupermet de sélectionner seulement les produits qui doivent être affichésdans l'objet Liste des produits.

Si vous sélectionnez l'option Afficher tous les produits de cette catégorieet que vous ajoutez dans votre panier e-commerce de nouveaux produitspour cette catégorie, les objets Liste des produits relatifs sont automa-tiquement mis à jour et ajoutés. Cette mise à jour n'est pas effectuée sivous sélectionnez l'option Afficher seulement les produits sélectionnés.

En plus des listes mentionnées, les commandes suivantes sont disponibles:

Sélectionner tout: permet de sélectionner tous les produits affichés dansla Liste des produits.

Sélectionner aucun: permet de désélectionner tous les produits sélection-nés précédemment dans la Liste des produits.

80

Les options de la section Paramètres de cette fenêtre permettent de définircertains paramètres graphiques relatifs à l'affichage de la liste des produits.

Les fonctions du cadre Options permettent de définir :

Type: indique la liste de tous les types de présentation disponibles pourorganiser les informations dans les fiches des produits.

Hauteur des fiches: permet d'indiquer la valeur en pixels correspondant àla hauteur de chaque fiche des produits. En fonction de ce paramètre, lesimages associées aux produits sont redimensionnées automatiquement. Siles textes de description des produits sont trop longs pour être affichés en-tièrement, la barre de défilement apparaît automatiquement.

Fiches par ligne: permet d'indiquer combien de fiches doivent être placéescôte à côte sur une seule ligne.

Largeur Image (%): permet d'indiquer, si vous avez choisi la présentation"Image et texte" ou la présentation "texte et Image", combien d'espace dela fiche doit être occupé par l'image et combien par le texte. Si l'image oc-cupe 30% de la largeur de la fiche, le texte en occupera 70%.

Les types de présentation possibles sont illustrés dans la fenêtre Aperçu, à savoir:

Seulement texte - Les informations suivantes figurent une après l'autredans la fiche: Nom du produit, description, liste déroulante avec les va-riantes (si elles sont disponibles), coût et champ d'entrée de la quantitéavec le bouton "Acheter".

Image et texte - Dans la fiche, l'image du produit apparaît à gauche tandisque les informations relatives sont affichées à droite: Nom du produit,description, liste déroulante avec les variantes (si elles sont disponibles),coût et champ d'entrée de la quantité avec le bouton "Acheter".

81

Texte et image - Dans la fiche, les informations relatives au produit appa-raissent à gauche tandis que l'image du produit est affichée à droite.

Seulement image - Dans ce cas, sous l'image apparaissent le nom du pro-duit, la liste déroulante avec les variantes (si elles sont disponibles), lecoût et le champ d'entrée de la quantité avec le bouton "Acheter", mais ladescription n'est pas complète.

Les fonctions du cadre Graphiques permettent de définir :

Police: permet de définir le type de caractère, le style et la taille enpoints du texte.

Couleur de texte: permet de définir la couleur du texte de la fiche.

Couleur de fond: permet de définir la couleur de fond de la fiche.

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

Couleur bordure: permet de définir la couleur de la bordure de la fiche.

Par ailleurs, les options Afficher le champ quantité et Afficher le prix permettentd'indiquer si ces paramètres doivent figurer ou non dans les fiches du produit.

Pour finir, les options du cadre Options d'image permettent d'agir sur les ima-ges figurant dans les fiches du produit :

Modifier l'affichage des images des miniatures des produits: permet demodifier les images des produits à l'aide de l'éditeur graphique interne.Pour rappeler l'éditeur graphique, cliquez sur le bouton Modifier : vous ou-vrez ainsi l'image relative au premier produit disponible; toutes les modifi-cations effectuées sont appliquées aux images associées aux produits insé-rés dans le panier e-commerce.

Créer un lien pour agrandir l'image : si vous sélectionnez cette option, lelien vers les images agrandies est automatiquement défini sur les différen-tes images des fiches du produit. Ces images agrandies sont affichées dansla fenêtre du Navigateur, mises en premier plan alors que la page d'originedevient plus opaque et foncée.

Largeur maximum : permet de définir la largeur maximale en pixels del'image agrandie.

Hauteur maximum : permet de définir la hauteur maximale en pixels del'image agrandie.

82

Editeur graphique

WebSite X5, offre une procédure automatique pour optimiser les images im-portées ainsi qu'un éditeur graphique intégré polyvalent permettant d'exécu-ter des opérations de retouches photos. Pour rappeler l'éditeur graphique,cliquez sur le bouton Modifier disponible dans les fenêtres Objet Image, Ob-jet Diaporama et Objet Galerie d'images.

L'éditeur graphique est organisé en 5 sections :

section Rogner

section Masque

section Effets

section Filtres

section Cadre

L'éditeur graphique propose les boutons suivants :

Appliquer : Permet de quitter l'éditeur et revenir à la fenêtre principaletout en enregistrant les modifications effectuées sur l'image.

Annuler : Permet de quitter l'éditeur et revenir à la fenêtre principalesans enregistrer les modifications effectuées sur l'image.

Enregistrer sous : Permet d'enregistrer une copie de l'image originale auformat PNG, JPG ou PSD. Un message vous demande si la copie enregistréedoit être importée pour remplacer l'original.

83

Les commandes de la section Rogner de l'éditeur graphique permettent decouper la zone de l'image voulue et d'éliminer le reste.

Vous pouvez dessiner la zone de coupe directement sur l'aperçu de l'image et uti-liser les ancres pour la modifier. Vous pouvez déplacer la sélection de la coupepour 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 nécessaire de confirmer la coupe : la partie externe à la section decoupe (plus foncée que l'original) ne sera pas affichée.

En regard de l'image, vous disposerez des boîtes suivantes :

Rogner : Indique les valeurs en pixels de la Coordonnée X et de la CoordonnéeY qui identifient la position de l'angle supérieur gauche de la zone sélectionnéepar la coupe, en plus de sa largeur et hauteur. Les valeurs des paramètrespeuvent être prises directement selon la zone de coupe dessinée, tapées dansles champs appropriés ou définies à l'aide des curseurs.

Reflets : Permet de réfléchir l'image dans le sens Horizontal (selon l'axevertical) ou Vertical (selon l'axe horizontal).

Rotation : Permet de tourner l'image de 90°, 270° ou selon un angle libre.Pour la rotation libre, les valeurs positives équivalent à une rotation dansle sens des aiguilles d'une montre tandis que les valeurs négatives entraî-nent une rotation dans le sens inverse aux aiguilles d'une montre.

Les commandes de la section Masque de l'éditeur graphique permettent d'ap-pliquer un masque à l'image importée.

Masque : Contient la liste des masques pouvant être appliqués à l'image.En plus des masque proposés, vous pouvez appliquer un masque person-nel : pour cela, il suffit de sélectionner la deuxième rubrique de la liste(Personnel...) et d'importer le fichier graphique préparé.

Rotation : Permet de tourner un masque de 90°, 270° ou 360° et del'appliquer à l'image.

Le masque est une image à 256 couleurs en niveaux de gris : le masqueest appliqué à l'image originale de sorte que les parties couvertes par lenoir soient invisibles et celles couvertes par le blanc restent visibles.

+ =

84

Les commandes de la section Effets de l'éditeur graphique permettent decorriger les principaux réglages de couleur et de définir certains effets gra-phiques sur l'image importée.

Effets : Montre la liste des effets pouvant être appliqués à l'image. La listecomprend : Ombre, Reflet, Lueur externe, Bordure colorée, Bordure 1, Bor-dure 2, Bordure nuancée, Haut-relief, Bas-relief, Noir et blanc, Flou, Mosaï-que, Fantaisie et Bombé. Pour appliquer un effet, il suffit de le cocher.

Paramètres : Rétablit les paramètres permettant de définir l'effet sélectionné.

Les commandes de la section Filtres de l'éditeur graphique permettent decorriger les principaux réglages de couleur et de définir certains filtres gra-phiques sur l'image importée.

Filtres : Indique la liste des filtres pouvant être appliqués à l'image. Laliste comprend : Luminosité/Contraste, Équilibrage (RGB), Intensité (HSL),Détail/Flou, Noir et blanc, Sépia, Mosaïque, Portrait, Perspective, Distor-sion et Opacité. Pour appliquer un filtre, il suffit de le cocher.

Paramètres : Indique les paramètres permettant de définir le filtre sélectionné.

Les commandes de la section Cadre de l'éditeur graphique permettent d'ap-pliquer un cadre à l'image importée.

Cadre : Contient la liste des cadres pouvant être appliqués à l'image im-portée. En plus des cadres proposés, vous pouvez appliquer un cadre per-sonnel : pour cela, il suffit de sélectionner le deuxième aperçu de la liste(Personnel...) et d'importer le fichier graphique préparé.

Rotation : Permet de tourner de 90°, 270° ou 360° le cadre appliqué à l'image.

Il faut préparer le cadre comme un fichier graphique au format .GIF,.PNG ou .PSD et définir sa transparence : le cadre est superposé àl'image originale pour montrer seulement les parties correspondant auxzones transparentes.

Comme le format .GIF ne gère qu'un niveau de transparence, tandis queles formats .PNG et .PSD en gèrent 256, il est conseillé d'enregistrer lescadres dans l'un de ces formats.

+ =

85

Format de la cellule

Cette fenêtre, rappelée en cliquant sur le bouton dans la fenêtre Créationde la page, propose les options permettant de définir l'aspect graphique de lacellule courante de la grille de mise en page.

Les différentes options sont regroupées dans des sections appropriées :

section Graphiques section Textes

Les commandes de la section Graphiques de cette fenêtre permettent dedéfinir les paramètres graphiques de la cellule.

Les options du cadre Style d'arrière-plan permettent de définir l'arrière-plande la cellule :

Arrière-plan coloré: si elle est activée, elle permet de définir une couleurteinte unie pour l'arrière-plan de la cellule.Dans ce cas, vous disposez des options suivantes :

Couleur : Permet de définir la couleur voulue.

Arrière-plan dégradé: si elle est activée, elle permet d'appliquer un ar-rière-plan dégradé dans la cellule.Dans ce cas, vous disposez des options suivantes :

Couleur initiale : permet de définir la première couleur de la nuance.

Couleur finale : permet de définir la dernière couleur de la nuance.

Distribution (%) : permet d'établir si la première ou la dernière couleurdoit être prédominante dans le dégradé. Une distribution de 90%, indi-que que la première couleur remplira 90% du masque, tandis que ladernière couleur n'occupera que 10%.

Sens : permet de choisir le type de nuance à appliquer. Vous disposezdes options suivantes : Horizontal, Vertical, Horizontal double et Verti-cal double.

Image d'arrière-plan : si elle est activée, elle permet de choisir une imagecomme arrière-plan de la cellule.Dans ce cas, vous disposez des options suivantes :

Image : permet de sélectionner le fichier graphique relatif à l'image àinsérer. Vous pouvez utiliser les fichiers au format JPG, GIF, PNG.

Adapter aux dimensions de la cellule : avec cette option, l'image utili-sée comme arrière-plan est automatiquement adaptée à la taille de lacellule.

86

Disposition : permet de définir s'il faut répéter ou non l'image utiliséecomme arrière-plan de la cellule. L'image peut être répétée horizonta-lement , verticalement , ou dans les deux sens pour remplir tout l'es-pace disponible.

Alignement : permet de définir l'alignement de l'image utilisée par rap-port à la zone occupée par la cellule.

Les options du cadre Option permettent de définir :

Epaisseur bordure : permet de définir la largeur de bordure de la cellule.

Couleur bordure : permet de définir la couleur de la bordure de la cellule.

Marge intérieure : permet de définir la valeur de la marge. La margeétant l'espace entre la bordure de la cellule et son contenu.

La couleur de bordure est utilisée aussi comme couleur pour la transpa-rence de l'image. Si lors de l'affichage avec le navigateur l'aspect de lacellule est égrené, il est conseillé de modifier la couleur de l'arrière-plan. Pour plus d'informations, reportez-vous aux : Remarques sur latransparence des images.

Les commandes de la section Textes de cette fenêtre permettent d'insérer etde définir l'aspect graphique d'un titre et d'un texte de légende de la cellule.

Les options du cadre Titre permettent de définir :

Contenu : permet de définir le texte du titre d'une cellule.

Couleur d'arrière-plan : permet de définir la couleur de l'arrière-plan dutitre de la cellule à l'aide de la fenêtre Couleur rappelée.

Couleur de texte : permet de définir la couleur du titre de la cellule àl'aide de la fenêtre Couleur rappelée.

Police : permet de définir le type de police, le style et la taille en pointsdu texte.

Alignement : permet de définir si le titre doit être aligné à gauche, aucentre ou à droite par rapport à la cellule.

Les options du cadre Description permettent de définir:

Contenu : permet d'insérer le texte qui sera affiché comme légende dansla cellule.

87

Couleur de texte : permet de définir la couleur du texte de la légendedans la cellule à l'aide de la fenêtre Couleur rappelée.

Police : permet de définir, dans la fenêtre rappelée, le type de police, lestyle et la taille en points du texte de légende dans la cellule.

Alignement : permet de définir le type l'alignement du texte de légende.

Lien : permet de définir un lien vers le texte introduit comme légende dela cellule à l'aide de la fenêtre Lien rappelée.

Si vous sélectionnez l'option Créer titre comme image, vous pouvez trans-former le titre de la cellule en une image aux paramètres 3D.

Forme : permet de définir la forme (Rectangle, Rectangle arrondi en haut,Rectangle arrondi en haut à gauche, Rectangle arrondi en haut à droite,Rectangle coupé en haut, Rectangle coupé en haut à gauche, Rectanglecoupé en haut à droite) de l'image affichée comme titre de la cellule.

Aspect : permet de définir l'aspect (Bombé, Plat, Bombé plat, Creux, Plasti-que, Brillant, Gel, Eau, Néon) de l'image affichée comme titre de la cellule.

Bordure : permet de définir le style de la bordure (Aucun, Bombé, Creux,Creux simple) de l'image affichée comme titre de la cellule.

Lumière : permet de définir la direction d'un effet de lumière sur l'imageaffichée comme titre de la cellule.

Insertion des liens

Cette fenêtre, rappelée en cliquant sur bouton , permet de définir le typede lien hypertextuel à appliquer aux mots ou aux images sélectionnés.

Les différentes options sont regroupées dans des sections appropriées :

section Action section Description

Les commandes de la section Action de cette fenêtre permettent d'indiquerle type d'action relatif au lien :

Page du site

Permet d'établir un lien vers une autre page du site. Le bouton permetde parcourir le plan du site et de sélectionner la page à lier. Vous pouvezétablir si la page liée doit être affichée dans la même fenêtre ou une nou-velle fenêtre du Navigateur.

88

Fichier local ou ressource webPermet d'établir un lien vers une ressource quelconque, un fichier ou unepage HTML, présente sur l'ordinateur ou déjà publiée sur le Web. Pourchoisir le fichier à lier, sélectionnez l'option Fichier sur l'ordinateur à pu-

blier et cliquez sur le bouton pour parcourir les ressources enregistréessur le système, ou sélectionnez l'option Fichier déjà présent sur Internetet saisissez l'adresse (URL) qui identifie sa position dans le réseau.Vous pouvez indiquer si la ressource reliée doit être affichée dans la mêmefenêtre, dans une nouvelle fenêtre du Navigateur ou dans une fenêtre Po-pUp. Dans ce dernier cas, le programme ouvre comme PopUp une nouvellefenêtre du navigateur dont vous pouvez définir la taille (Largeur et Hau-teur) et établir d'afficher ou non la barre de défilement vertical (Afficherla barre de défilement).

PopUp internePermet de définir un lien vers un fichier quelconque, présent sur votre or-dinateur ou déjà publié sur le Web, dans une fenêtre PopUp interne appro-priée. Contrairement au PopUp externe, le fichier rappelé est affiché enpremier plan de la page d'origine dont l'arrière-plan devient automatique-ment opaque et foncé.Pour choisir le fichier à lier, sélectionnez l'option Fichier sur l'ordinateur à

publier et cliquez sur le bouton pour parcourir les ressources enregis-trées sur le système, ou sélectionnez l'option Fichier déjà présent sur In-ternet et saisissez l'adresse (URL) qui identifie sa position dans le réseau.Les options disponibles permettent de définir la taille (Largeur et Hauteur)de la fenêtre de PopUp et une Description qui apparaîtra comme légende.Pour finir l'option Afficher l’effet de mouvement, permet d'ajouter un ef-

89

fet d'entrée lors de l'affichage de la fenêtre PopUp.Le lien vers une fenêtre PopUp interne est particulièrement approprié pourafficher des images.

SonPermet de définir un lien qui lance la reproduction d'un son. Pour choisir lefichier à lier, sélectionnez l'option Fichier sur l'ordinateur à publier et cli-

quez sur le bouton pour parcourir les ressources enregistrées sur le sys-tème, ou sélectionnez l'option Fichier déjà présent sur Internet et saisissezl'adresse (URL) qui identifie sa position dans le réseau. Vous pouvez relierdes fichiers au format WAV, MP3, WMA et MID.Quand vous cliquez sur le lien, le son est reproduit ; cliquez de nouveaupour interrompre la reproduction. La reproduction du son s'interrompt éga-lement en cliquant sur un autre lien vers un son ou si vous changez depage.

Courrier électroniquePermet d'établir un lien vers le programme courriel prédisposé pour en-voyer un E-mail. Pour définir ce type de lien, il suffit de taper l'adresse E-mail à laquelle le message doit être envoyé.

Appel via InternetPermet de définir un lien qui active un logiciel d'appel téléphonique via In-ternet (par exemple Skype) pour appeler un autre Utilisateur. L'utilisateurà appeler doit être spécifié dans un champ approprié.

Imprimer la pagePermet d'établir un lien qui lance l'impression de la page affichée.

Message d'alertePermet d'établir un lien qui affiche un message dans une boîte de dialoguestyle Windows. Pour définir ce type de lien, il suffit d'introduire le texte dumessage dans le champ correspondant.

DiaporamaPermet d'établir un lien qui lance l'affichage du Diaporama présent dans lapage. Pour que ce lien fonctionne correctement, vous devez créer préala-blement une page contenant le Diaporama et sélectionner l'option Activerle plein écran dans les Paramètres de cet objet.

Ajouter aux favorisPermet d'établir un lien qui ouvre la fenêtre Internet Explorer pour ajouterle site Internet indiqué à la liste des favoris. Pour définir ce type de lien, ilsuffit d'indiquer l'adresse (URL) et le titre du site voulu.

90

Page par défautPermet de définir un lien pour définir le site spécifié comme page par dé-faut lors de l'ouverture du Navigateur Internet.

Flux RSSPermet d'afficher le flux RSS du site : ce lien n'est actif que s'il a été asso-cié à un Flux RSS dans la fenêtre Paramétrages avancés.

Quand vous testez sur votre ordinateur le fonctionnement du site, unmessage vous avertit que les Flux RSS ne seront affichés que lorsque lesite sera publié enligne.

BlogPermet de définir un lien qui ouvre le Blog interne relié au site courant.Pour que ce lien fonctionne correctement, vous devez créé préalablementun Blog dans la section appropriée des Paramètres avancés.Les options disponibles, permettent d'indiquer si la ressource reliée doitêtre affichée dans la même fenêtre ou dans une nouvelle fenêtre du Navi-gateur.

Plan du sitePermet de définir un lien qui affiche le plan complet du site dans une pageappropriée. Les rubriques du plan du site, créé automatiquement, sont desliens actifs vers une page : le plan représente donc un outil utile d'orienta-tion et de navigation mis à la disposition de l'utilisateur. L'affichage desrubriques du plan peut être géré à l'aide des commandes "Tout ouvrir" et"Tout fermer".

Même si le lien Plan du site n'est pas utilisé, le plan du site est créé etrelié dans le code HTML des pages à travers le Méta Tag <sitemap>, pourpermettre une meilleur indexation des contenus de la part des Moteursde recherche.

Le lien vers le Plan du site est inséré automatiquement comme dernièrerubrique du menu affiché au bas de la page (pour l'activer, sélectionnezAfficher au bas de la page les rubriques du menu de premier niveaudans Choix du menu).

Afficher le panierPermet de définir un lien qui mène à la page du panier contenant la listede tous les produits déjà commandés.

91

Commander le produitPermet de définir un lien qui mène au panier e-commerce pour effectuerla commande ou ajouter le produit spécifié aux produits à acheter.Dans le premier cas, vous devez sélectionner dans la liste appropriée la ca-tégorie de produits pouvant être commandés et sélectionner l'option Affi-cher la liste des produits de la catégorie choisie. Dans le second cas, sé-lectionnez l'option Ajouter directement le produit dans le panier, sélec-tionnez le produit dans la liste et définissez la quantité prédéfinie.

Pour que les liens Afficher le panier et Commander le produit fonc-tionnent correctement, vous devez créer précédemment le panier e-commerce à l'aide des commandes de la section Panier virtuel e-commerce des Paramètres avancés.

Les commandes de la Section Description de cette fenêtre permettent dedéfinir certaines options comme la description du lien.

La description du lien est utilisée comme valeur de l'attribut <title> de l'élé-ment <a> du code XHTML et est affichée dans un cadre (tooltip) qui apparaîtlorsque qu'on pointe le lien correspondant.

Les commandes disponibles sont :

Texte : permet de définir un texte de description du lien.

Image : permet de définir une image qui sera affichée dans le tooltip etqui remplace ou accompagne la description du lien.

92

Largeur cadre : activée quand une image est insérée dans le tooltip, ellepermet de spécifier la largeur du cadre. Si vous indiquez seulement unedescription textuelle du lien, la largeur du cadre sera définie automati-quement en fonction du texte.

Couleur texte : permet de définir la couleur du texte du tooltip.

Couleur d'arrière-plan : permet de définir la couleur de l'arrière-plan dutooltip.

Police : permet de définir le type de caractère, le style et la taille enpoints du texte du tooltip.

Style : permet de choisir parmi les différents styles disponibles celui à ap-pliquer au tooltip.

Style flèche : permet de définir si le tooltip doit avoir ou non une flèchepointée vers le haut ou le bas pour ressembler aux bulles des bandes dessi-nées.

Effet d'entrée : si vous activez cette option, vous appliquez un effet fonduà l'affichage du tooltip.

Fenêtre Couleur

Chaque fois que vous pouvez définir la couleur d'un élément, le programmepropose l'option Couleur accompagnée d'un bouton portant la couleur par dé-faut ou celle définie précédemment par l'utilisateur.

Si vous cliquez sur le bouton situé prés de l'option Couleur, vous affichez unmenu contenant une palette de 48 couleurs : pour sélectionner la couleurvoulue, cliquez sur celle-ci.

93

En plus de la palette principale, la fenêtre présente les éléments suivants :

Invisible : cette commande, proposée seulement si l'opération est possi-ble, permet de rendre invisible l'élément courant.

Dernières couleurs : la ligne située sous la palette principale propose les 8dernières couleurs utilisées.

Autres couleurs...: cette commande permet d'ouvrir une autre fenêtrepour définir des couleurs personnalisées.

Compte-goutte (Pipette): cet instrument permet de reprendre la couleurde n'importe quel élément affiché, même à l'extérieur de la fenêtre Web-Site X5. Quand vous sélectionnez l'instrument compte-gouttes (Pipette), leprogramme modifie le pointeur de la souris : si vous cliquez sur un objetquelconque sur l'écran, sa couleur est "capturée" pour vous permettre del'appliquer à l'élément courant.

94

Etape 4 - Paramètres avancés

Paramètres avancés

Cette fenêtre propose les commandes permettant de définir certains paramè-tres avancés relatifs au style graphique des menus, des textes et des barresde défilement, ainsi que la mise en page d'une page d'introduction prédispo-sée éventuellement pour le choix de la langue de consultation du site, lacréation d'une ou plusieurs zones réservées à accès par mot de passe, la créa-tion d'un panier e-commerce, de Blogs et de Flux RSS.

Menu premier niveauCette section permet de définir l'aspect graphique des rubriques du menude premier niveau, qui est toujours visible en haut (structure à menu hori-zontal) ou sur le côté (structure à menu vertical) du site.

Liste déroulanteCette section permet de définir l'aspect graphique des rubriques de laboîte à liste déroulante qui apparaît au passage de la souris sur une rubri-que de premier niveau.

Sous menuCette section permet de définir l'aspect graphique du sous-menu verticalqui apparaît si l'option Afficher à gauche de la page un sous-menu des ob-jets des niveaux est sélectionnée dans la fenêtre Choix du menu.

Style de texteCette section permet de définir les styles à appliquer aux textes des pages,y compris les liens hypertextuels, et l'aspect de la barre de défilement.

Page d'introductionCette section permet de définir une page d'introduction pour le site, enprévoyant une bande sonore et les liens nécessaires pour choisir la languede consultation.

Coin publicitaireCette section permet de définir et personnaliser un message publicitaire àafficher en haut à droite de la page d'accueil ou de toutes les pages dusite.

BlogCette section permet de créer et gérer un Blog, une sorte d&rsquo;agendasur le Web pour publier des nouvelles que les utilisateurs pourront com-menter.

95

Flux RSSCette section permet de créer un Flux RSS, servant de canal d'informationsconstamment mis à jour.

Zone réservéeDans cette section, vous pouvez définir une ou plusieurs zones réservées oùl'accès aux pages définies comme protégées n'est admis qu'en saisissant unmot de passe.

Panier virtuel e-commerceCette section permet de créer un panier e-commerce, en définissant laliste des produits, les méthodes d'envoi et de paiement (y compris parcarte de crédit), le formulaire à remplir pour l'envoi de la commande.

Pour plus de renseignements sur la création du plan et la distinction en-tre rubrique de premier et second niveau, liste déroulante et sous-menu,reportez-vous à la Création du Plan.

Style du menu de premier niveau

Cette fenêtre propose les commandes permettant de définir certains paramè-tres avancés relatifs au style graphique des boutons servant à afficher les ru-briques de premier niveau du menu.

Les commandes nécessaires pour personnaliser les boutons sont présentéesdans quatre sections :

section Général

section Texte

section Graphiques

section Style 3D

Les options proposées dans la section Général de cette fenêtre permettentde définir certains paramètres généraux.

96

Les commandes disponibles sont :

Créer le bouton comme image : permet de créer des boutons en tantqu'images pouvant avoir des caractéristiques 3D. Comme le bouton est en-registré comme une image, vous pouvez utiliser une police quelconquepour le texte qu'il contient.

Epaisseur bordure : permet de définir l'épaisseur de la bordure des bou-tons. Cette option est disponible uniquement si l'option Créer le boutoncomme image est désactivée.

Couleur bordure : permet de définir la couleur de la bordure des boutonsdans la fenêtre Couleur. Cette option est disponible uniquement si l'optionCréer le bouton comme image est désactivée.

Largeur : permet de définir la valeur en pixels de la largeur du boutoncontenant la rubrique de menu.

Marge intérieure : permet de définir la marge intérieure, à savoir l'espacesitué entre le texte et la bordure du bouton.

Marge extérieure : permet de définir la marge extérieure, à savoir l'es-pace situé entre deux boutons.

Défilement automatique du menu : si vous sélectionnez cette option, lemenu de navigation défile automatiquement avec le contenu de la page etest toujours visible sur l'écran.

Pour définir la largeur en pixels des boutons, tenez compte de l'espacedisponible pour le menu: si vous n'utilisez pas un modèle graphique pré-défini, vous pouvez modifier ce paramètre à votre gré (voir Modèle per-sonnalisé).

Les options proposées dans la section Texte de cette fenêtre permettent dedéfinir les paramètres graphiques relatifs au texte des boutons.

Les commandes disponibles sont :

Police : permet de définir le type de caractère, le style et la taille enpoints du texte.

Alignement : permet de définir l'alignement du texte à gauche, au centreou à droite, par rapport au bouton.

Marge latérale: permet de définir la marge latérale du texte quand il estaligné à gauche ou à droite.

97

Style de police : permet de définir un style (Aucun, Haut-relief, Bas-reliefet Ombre) sur le texte. Le style est appliqué uniquement si l'option Créerle bouton comme image est activée.

Utiliser l'antialias pour afficher le texte : si vous sélectionnez cette op-tion, vous appliquez un effet antialias au texte qui rend les contours moinsdentelés. L'effet antialiasing est appliqué uniquement si l'option Créer lebouton comme image est sélectionnée.

Les options proposées dans la section Graphiques de cette fenêtre permet-tent de définir les couleurs et les images pour les différents éléments et lesétats du bouton.

Les commandes disponibles sont:

Couleur d'arrière-plan : permet de définir la couleur de fond du bouton.

Couleur de fond au passage de la souris : permet de définir la couleur defond du bouton au passage de la souris (effet mouseover).

Couleur de texte : permet de définir la couleur du texte du bouton.

Couleur de texte au passage de la souris : permet de définir la couleur dutexte du bouton au passage de la souris.

Couleur externe pour transparence : permet de définir la couleur qui doitêtre considérée transparente. Cette option est activée uniquement si l'optionCréer le bouton comme image est sélectionnée. Pour plus d'informations,reportez-vous aux : Remarques sur la transparence des images.

Image d'arrière-plan : permet de définir l'image qui doit être affichéecomme arrière-plan du bouton. Pour sélectionner l'image à utiliser, cliquez

sur le bouton pour parcourir les ressources disponibles : vous pouvezutiliser des fichiers au format JPG, GIF, PNG.

Image d'arrière-plan au passage de la souris : permet de définir une image dif-férente qui apparaîtra comme arrière-plan du bouton au passage de la souris.

Comment puis-je créer un bouton à l'effet mouseover et l'aspect gra-phique personnel ?

Pour donner aux boutons du menu de premier niveau un aspect graphi-que différent de celui proposé par l'éditeur interne, vous pouvez impor-ter des images personnelles à utiliser pour les états "relâché" et " au pas-sage de la souris".

98

Voici comment créer ce bouton d'une manière très simple :

Choisissez ou préparez deux images relatives aux états "relâché" et"au passage de la souris" pour le bouton.

Utilisez la commande Image d'arrière-plan pour importer le fichierrelatif au bouton à l'état "relâché".

Utilisez l'option Image de fond sur passage pour charger la deuxièmeimage relative au bouton. Les images graphiques étant chargées, lelogiciel définira automatiquement l'effet mouseover.

Les commandes proposées dans la section Style 3D de cette fenêtre (activéeseulement si l'option Créer le bouton comme image est sélectionnée) permet-tent de définir la forme et l'aspect des boutons.

Les commandes disponibles sont :

Forme : permet de définir la forme du bouton, en la choisissant parmi cellesqui sont proposées.

Fusionner la forme des boutons : si vous sélectionnez cette option, lesboutons sont unis et la forme choisie est appliquée à l'ensemble des bou-tons.

Aspect : permet de définir l'aspect (Bombé, Plat, Bombé plat, Creux, Plas-tique, Brillant, Gel, Eau, Néon) du bouton.

Bordure : permet de définir le style (Aucun, Bombé, Creux, Creux simple)de la bordure du bouton.

Couleur de fond sur passage souris : si vous sélectionnez cette option(disponible uniquement si vous avez appliqué un style à la bordure), labordure se colore au passage de la souris (effet mouseover).

Epaisseur bordure : permet de définir l'épaisseur de la bordure du bouton.

Lumière : permet de définir l'effet lumière défini pour le bouton.

Arrondissement : permet de définir le facteur d'arrondissement sur les formesde bouton qui prévoient des angles arrondis ou différents d'un rectangle.

Facteur dégradé : permet de définir le degré de nuance de couleur appli-qué au bouton.

Trasparence image : permet de définir le facteur de transparence pour lesimages des boutons.

99

Style de liste déroulante

Cette fenêtre propose les commandes permettant de définir certains paramè-tres avancés relatifs au style graphique des menus Popup.

Les commandes nécessaires pour personnaliser les boutons sont présentéesdans quatre sections:

section Général

section Texte

section Graphiques

section Style 3D

Les options proposées dans la section Général de cette fenêtre permettentde définir certains paramètres généraux.

Les commandes disponibles sont :

Créer le bouton comme image : permet de créer des boutons en tantqu'images pouvant avoir des caractéristiques 3D. Comme le bouton est en-registré comme une image, vous pouvez utiliser une police quelconquepour le texte qu'il contient.

Epaisseur bordure : permet de définir l'épaisseur de la bordure des bou-tons qui composent le menu en question.

Couleur bordure : permet de définir la couleur de la bordure des boutonsqui composent le menu en question.

Largeur : permet de définir la largeur en pixels des boutons qui composentle menu Popup.

Opacité : permet d'établir le facteur de transparence pour l'affichage desmenus Popup.

Marge intérieure : permet de définir la marge intérieure, à savoir l'espacesitué entre le texte et la bordure du bouton.

Les options proposées dans la section Texte de cette fenêtre permettent dedéfinir les paramètres graphiques relatifs au texte des boutons.

Les commandes disponibles sont :

Police : permet de définir le type de caractère, le style et la taille enpoints du texte.

Alignement : permet de définir l'alignement du texte à gauche, au centreou à droite, par rapport au bouton.

100

Marge latérale: permet de définir la marge latérale du texte quand il estaligné à gauche ou à droite.

Les options proposées dans la section Graphiques de cette fenêtre permet-tent de définir les couleurs et les images pour les différents éléments et lesétats du bouton.

Les commandes disponibles sont :

Couleur d'arrière-plan : permet de définir la couleur de fond du bouton.

Couleur de fond au passage de la souris : permet de définir la couleur defond du bouton au passage de la souris (effet mouseover).

Couleur de texte : permet de définir la couleur du texte du bouton.

Couleur de texte au passage de la souris : permet de définir la couleur dutexte du bouton au passage de la souris.

Couleur externe pour transparence : permet de définir la couleur qui doitêtre considérée transparente. Cette option est activée uniquement si l'optionCréer le bouton comme image est sélectionnée. Pour plus d'informations,reportez-vous aux : Remarques sur la transparence des images.

Image d'arrière-plan : permet de définir l'image qui doit être affichéecomme arrière-plan du bouton. Pour sélectionner l'image à utiliser, cliquez

sur le bouton pour parcourir les ressources disponibles : vous pouvezutiliser des fichiers au format JPG, GIF, PNG.

Image d'arrière-plan au passage de la souris : permet de définir uneimage différente qui apparaîtra comme arrière-plan du bouton au passagede la souris.

Les commandes proposées dans la section Style 3D de cette fenêtre (activéeseulement si l'option Créer le bouton comme image est sélectionnée) per-mettent de définir la forme et l'aspect des boutons.

Les commandes disponibles sont :

Forme : permet de définir la forme du bouton, en la choisissant parmi cel-les qui sont proposées.

Aspect : permet de définir l'aspect (Bombé, Plat, Bombé plat, Creux, Plas-tique, Brillant, Gel, Eau) du bouton.

101

Bordure : permet de définir le style (Aucun, Bombé, Creux, Creux simple)de la bordure du bouton.

Couleur de fond au passage de la souris : si vous sélectionnez cette op-tion (disponible uniquement si vous avez appliqué un style à la bordure), labordure se colore au passage de la souris (effet mouseover).

Epaisseur bordure : permet de définir l'épaisseur de la bordure du bouton.

Lumière : permet de définir l'effet lumière défini pour le bouton.

Arrondissement : permet de définir le facteur d'arrondissement sur lesformes de bouton qui prévoient des angles arrondis ou différents d'un rec-tangle.

Facteur dégradé : permet de définir le degré de nuance de couleur appli-qué au bouton.

Trasparence image : permet de définir le facteur de transparence pour lesimages des boutons.

Style de sous-menu

Cette fenêtre propose les commandes permettant de définir certains paramè-tres avancés relatifs au style des sous-menus.

Voici les commandes disponibles dans la section Paramètres :

Position du menu : si vous sélectionnez l'option Afficher un sous menuavec la liste des pages du niveau courant de la fenêtre Choix du menu,

102

vous pourrez indiquer si le sous-menu doit être affiché à droite ou à gau-che de la page.

Largeur : permet de définir la largeur en pixels des boutons qui composentle menu Popup.

Activer le menu déroulant pour les rubriques du niveau suivant : sicette option est activée et qu'un sous-menu contient une rubrique de ni-veau, quand vous cliquez sur celle-ci un autre sous-menu apparaît. Si teln'est pas le cas, quand vous cliquez sur la rubrique de niveau, vous ouvrezautomatiquement la première page du même niveau.

Voici les commandes disponibles dans la section Style :

Couleur d'arrière-plan : permet de définir la couleur de fond des bou-tons qui composent les sous-menus.

Couleur de fond au passage de la souris : permet de définir le change-ment de la couleur de fond des boutons au passage de la souris.

Couleur de texte : permet de définir la couleur du texte des boutons quicomposent les sous-menus.

Couleur de texte au passage de la souris : permet de définir le change-ment de la couleur du texte des boutons des sous-menus au passage de lasouris.

Largeur ligne : permet de définir l'épaisseur de la ligne qui sépare lesdifférentes rubriques des sous-menus.

Couleur ligne : permet de définir la couleur de la ligne qui sépare lesdifférentes rubriques des sous-menus.

Marge gauche : permet de définir la valeur en pixels de la marge de gau-che des rubriques des sous-menus.

Police : permet de définir le type de police, le style et la taille en pointsdu texte.

Puce : permet de définir une image (fichier GIF, JPG, PNG) qui sera vi-sualisée comme liste à puces en regard des rubriques des sous-menus.

Le sous dossier "Bullets" du dossier d'installation de WebSiteX5, contientune série d'images pour créer des listes à puces en regard des rubriquesdes sous-menus.

103

Style de texte

Cette fenêtre affiche les commandes permettant de définir les styles qui se-ront appliqués au formatage des textes et des liens présents dans le site ainsique l'aspect graphique de la barre de défilement.

Les différentes options sont regroupées dans des sections appropriées :

section Général

section Style des liens

section Barre de défilement

Les commandes de la section Général de cette fenêtre permettent de définirles styles pouvant être utilisés pour les textes présents dans le site.

Les textes auxquels vous pouvez appliquer un style sont énumérés dans lemenu Type de texte et sont les suivants :

Titre des pages : il s'agit du titre des pages du site. Il est pris dans le nomdonné aux pages lors de la phase de construction du plan dans la fenêtreCréation du plan ou, s'il est spécifié différemment, dans le Titre completde la fenêtre Propriétés de la page.

Chemin de la page : il s'agit du texte situé sous le titre de la page quipermet de reconstruire le chemin logique (navigation par miettes de pain)conduisant à cette page. Le chemin logique est automatiquement recréépar le programme.

Texte par défaut de la page : c'est le texte des paragraphes insérés à tra-vers l'objet Texte. Le style de cet élément est appliqué par défaut quandvous ouvrez l'éditeur relatif à l'objet Texte : grâce aux commandes four-nies par l'éditeur, vous pouvez effectuer d'autres modifications et d'autrespersonnalisations. Le style défini pour ce type de texte s'applique égale-

104

ment à tous les textes qui ont été automatiquement créés et insérés par leprogramme : il s'applique par exemple à la page Plan du site.

Menu de pied de page : il s'agit du menu qui se trouve au bas de chaquepage et qui contient les rubriques de premier niveau du menu de navigation.Le menu de pied de page est automatiquement créé par le programme sivous sélectionnez l'option Afficher au bas de la page les rubriques du menude premier niveau présente dans la fenêtre Choix du menu.

Vous pouvez sélectionner un type de texte pour modifier son style, en utili-sant la liste déroulante ou en cliquant directement dans le cadre Aperçu cor-respondant.

Après avoir sélectionné le Type de texte, vous pouvez modifier son style àl'aide des options comprises dans le cadre Style :

Afficher : l'activation de cette fonction permet de rendre les textes visi-bles ou invisibles. Cette option n'est pas disponible pour le style de Textepar défaut de la page. Rendre un élément invisible ne veut pas dire élimi-ner l'information correspondante du code des pages. Par exemple, vouspouvez rendre le chemin de la page invisible pour faire en sorte que cetteinformation supplémentaire ne soit pas disponible.

Couleur d’arrière-plan : permet de définir la couleur de fond du texte.

Couleur de texte : permet de définir la couleur du texte.

Police : permet de définir le type de police, le style et la taille en pointsdu texte.

Alignement : permet de définir l'alignement du texte. Cette option n'estpas activée pour le style du Texte par défaut de la page et les Notes depied de page/E-mail. Dans le premier cas, l'alignement peut être définiquel que soit le style, lors de la phase de création de l'objet texte ; en re-vanche dans les Notes de pied de page/e-mail, vous ne pouvez pas modi-fier les alignements des notes et l'adresse e-mail de l'auteur.

Ligne inférieure : permet de définir l'épaisseur en pixels et la couleurd'une bordure inférieure qui peut être ajoutée dans tous les styles, à l'ex-ception du style du Texte par défaut de la page.

Les commandes de la section Style des liens de cette fenêtre permet de dé-finir certains paramètres avancés relatifs au style graphique des liens hyper-textuels.

105

Les commandes disponibles sont :

Lien actif : permet de définir la couleur du texte pour les liens hypertex-tuels.

Lien cliqué : permet de définir la couleur du texte des liens hypertextuelsdéjà visités par l'utilisateur.

Lien au passage de la souris : permet de définir la couleur du texte desliens hypertextuels pointés par la souris (effet mouseover).

Arrière-plan au passage de la souris: permet de définir la couleur de fondqui doit être affichée derrière le texte des liens hypertextuels quand poin-tés par la souris (effet mouseover).

Texte du lien souligné : si vous sélectionnez cette option, tous les textesrelatifs aux liens hypertextuels sont soulignés.

Texte du lien souligné au passage de la souris : si vous sélectionnez cetteoption, tous les textes relatifs aux liens hypertextuels sont soulignés quandpointés par la souris (effet mouseover).

Pointeur : permet de définir l'aspect du curseur de la souris. Si vous cli-

quez sur , vous pouvez sélectionner un fichier .CUR, .ICO et .ANI (icôneanimée) pour définir l'aspect du curseur.

Le sous-dossier "Cursors" du dossier d'installation de WebSite X5 contientune série d'images pour personnaliser l'aspect du pointeur.

Les commandes de la section Barre de défilement de cette fenêtre permet-tent de définir certains paramètres avancés relatifs au style graphique de labarre de défilement.

Les commandes disponibles sont:

Appliquer paramètres personnalisés : si vous activez cette option, lesbarres de défilement apparaissent avec l'aspect défini à travers les para-mètres disponibles. Si vous ne sélectionnez pas cette option, les barres dedéfilement apparaissent comme prévu par les paramètres par défaut.

Surface des curseurs : permet de définir la couleur de la surface des cur-seurs supérieur, central et inférieur de la barre.

Arrière-plan du curseur central : permet de définir la couleur de fond dela barre sur laquelle se déplace le curseur central.

106

Flèche supérieure et inférieure : permet de définir la couleur des flèchesprésentes dans les curseurs supérieur et inférieur de la barre.

Bordure intérieure supérieure : permet de définir la couleur de la bor-dure intérieure supérieure de la barre.

Bordure intérieure inférieure : permet de définir la couleur de la bordureintérieure inférieure de la barre.

Bordure extérieure supérieure : permet de définir la couleur de la bor-dure extérieure supérieure de la barre.

Bordure extérieure inférieure : permet de définir la couleur de la bor-dure extérieure inférieure de la barre.

Page d'introduction

Cette fenêtre contient les commandes permettant de configurer une paged'introduction du site et de la prédisposer pour la consultation en plusieurslangues.

Voici les commandes disponibles pour la configuration d'une page Intro :

Afficher la page d'introduction : si vous sélectionnez cette option, unepage d'introduction au site est insérée. Si elle est présente, la page d'in-troduction (fichier index.html) est la première à être affichée ; ensuite, auterme d'un délai fixé ou quand vous cliquez sur un lien expressément pré-disposé, la Page d'accueil du site s'affiche (fichier home.html).

Couleur d'arrière-plan de le page : permet de définir la couleur de fondde la page d'introduction dans la fenêtre Couleur.

107

Ouvrir la page d'accueil après : si vous sélectionnez cette option, vouspouvez indiquer pendant combien de secondes la page d'introduction res-tera affichée. Au terme de ce délai, la Page d'accueil est automatiquementaffichée.

Fichier image/animation : permet de définir quel fichier il faut utiliserpour la page d'introduction au site. Vous pouvez créer une image statiqueou une animation Flash. Si vous insérez une image dans la page d'introduc-tion, vous devez sélectionner l'option Ouvrir la Page d'accueil après pourpermettre à l'utilisateur de naviguer dans le site. En revanche, si vous insé-rez dans la page d'introduction une animation Flash où le passage à la Paged'accueil est déja programmé, il n'est pas nécessaire de sélectionner l'op-tion Ouvrir la Page d'accueil après.

Largeur : permet de définir la largeur en pixels de l'image/animation insérée.

Hauteur : permet de définir la hauteur en pixels de l'animation insérée.

Si vous insérez une image dans la page d'introduction, il n'est pas néces-saire de définir la hauteur : ce paramètre est automatiquement calculéen fonction de la largeur de l'image.

Son pour la page : permet de définir le fichier audio (.WAV, .MP3, .WMA,.MID) à utiliser comme fond musical lors de l'affichage de la page d'intro-duction.

Répéter le son en boude : fait en sorte que le son inséré soit répété lorsde l'affichage de la page d'introduction.

Les commandes disponibles pour la configuration du choix de la langue deconsultation du site sont regroupées dans le cadre Sélection des langues :

Langue 1 (courante) : si vous sélectionnez cette option, vous prédisposezle lien pour le choix de la première langue de consultation du site.

Image pour la sélection de la langue 1 : permet de définir l'image (parexemple du drapeau correspondant à la langue) à associer au lien pour lechoix de la première langue de consultation.

Langue 2 : si vous sélectionnez cette option, vous prédisposez le lien pourle choix de la deuxième langue de consultation du site.

Image pour la sélection de la langue 2 : permet de définir l'image (parexemple du drapeau correspondant à la langue) à associer au lien pour lechoix de la deuxième langue de consultation.

108

Langue 3 : si vous sélectionnez cette option, vous prédisposez le lien pourle choix de la troisième langue de consultation du site.

Image pour la sélection de la langue 3 : permet de définir l'image (parexemple du drapeau correspondant à la langue) à associer au lien pour lechoix de la deuxième langue de consultation.

Langue 4 : si vous sélectionnez cette option, vous prédisposez le lien pourle choix de la quatrième langue de consultation du site.

Image pour la sélection de la langue 4 : permet de définir l'image (parexemple du drapeau correspondant à la langue) à associer au lien pour lechoix de la quatrième langue de consultation.

Dans le sous-dossier "Flags" du dossier d'installation de WebSite X5, unesérie d'images adaptées est disponible pour créer des boutons pour lechoix de la langue de consultation du site.

Coin publicitaire

Un nouvel outil publicitaire dont le nom vient de l'anglais "peel", à savoir "pe-ler", a un succès considérable et se répand rapidement dans le réseau : ils'agit du "PagePeel", l'élément qui simule une page tournée et se trouve géné-ralement en haut à droite. L'effet PagePeel pousse l'utilisateur à positionnerla souris au coin de la page pour lire le message publicitaire qui est "masqué":quand l'utilisateur déplace la souris en-dehors de la zone concernée par l'ef-fet, le message publicitaire est de nouveau "masqué".

109

WebSite X5 permet d'exploiter ce nouvel outil de communication publicitaire,en permettant de définir sur les pages des sites réalisés l'effet PagePeel oud'autres effets reproduisant ce fonctionnement avec d'autres aspects graphi-ques.

Voici les commandes disponibles pour prédisposer le message publicitaire :

Type : permet de choisir, parmi les animations proposées, celle qui seraaffichée en haut à droite de la Page d'accueil. En plus de l'effet classiquedu coin de la page pliée (PagePeel), d'autres animations à thème sont dis-ponibles. De toute façon, le fonctionnement de l'effet ne change pas :quand la souris glisse sur l'animation, l'utilisateur ouvre le message publici-taire relatif. L'animation sélectionnée est affichée dans le cadre Aperçu.

Fichier image/animation : permet de définir l'animation (fichier SWF) oul'image (fichier JPG, GIF, PNG) contenant le message publicitaire qui appa-raîtra au passage de la souris.

Son pour la page : permet de définir le son (fichier MP3) qui retentiraquand le message publicitaire sera affiché.

Page à rappeler par un clic : permet de définir la page (Landing Page) quisera liée au message publicitaire, en la sélectionnant directement dans le

plan du site rappelé à l'aide du bouton .

Qu'est-ce qu'une Landing page ?

La landing page est la page qui accueille le visiteur, elle est liée, parexemple, à un lien ou une bannière publicitaire. Tel que l'indique sonnom, c'est la page où l'utilisateur "atterre" elle doit être construite desorte qu'il trouve immédiatement les informations voulues, lui évitantainsi de naviguer dans le site pour les rechercher.

Le mécanisme peut être expliqué par un exemple : supposons que vousvouliez publier une bannière pour faire la réclame d'un produit. Les in-formations véhiculées par la bannière sont peu nombreuses et essentiel-les, mais vous pouvez définir un lien pour guider l'utilisateur vers votresite. Dans ce cas, il ne convient pas de créer un lien vers la Page d'ac-cueil de votre site : celle-ci est trop générale et obligerez l'utilisateur àentreprendre une navigation interne avant de trouver les informationsnécessaires sur le produit et la procédure à suivre pour l'acheter. Vousrisquez ainsi de perdre un client potentiel. La meilleure solution est deconstruire une page spécifique à l'aspect simple et fonctionnel où figu-rent toutes les informations sur le produit indiqué dans la bannière ycompris la procédure d'achat.

110

Très souvent, il faut construire expressément une page de ce type maissi elle est bien conçue, elle guide vers l'objectif voulu (par exemple,l'achat du produit) l'utilisateur qui a été attiré par le message publici-taire.

Largeur et hauteur : permet d'indiquer la valeur en pixels relative à lalargeur et la hauteur de la zone devant accueillir le message publicitaire.

Mode d'affichage : permet de définir à quel endroit doit être affiché lemessage publicitaire, en choisissant parmi les options Montrer uniquementdans la Page d'accueil et Montrer dans toutes les pages du site.

Blog

Cette fenêtre propose des outils et des options nécessaires pour créer unBlog.

Les commandes nécessaires pour configurer un Blog et créer les articles sontprésentées dans trois sections :

section Général

section Graphiques

section Commentaires

Après sa publication, le Blog représente une section individuelle reliée au siteprincipal par une option de menu que le programme ajoute automatique-ment. Cette option apparaît aussi dans le plan du site (voir la fenêtre Créa-tion du plan du site), vous pouvez la supprimer du menu de navigation ensélectionnant l'option Page invisible dans le menu.

Par ailleurs, vous pouvez revenir au site de référence à partir du Blog à tra-vers les liens qui sont automatiquement insérés sur le titre et le sous-titre ousur d'autres éléments spécifiques de la barre d'en-tête, selon le modèle gra-phique choisi.

Le Blog créé est publié à l'URL www.monsite.fr/blog où www.monsite.frest l'URL du site auquel il est relié.

La liste de tous les articles publiés (affichés dans l'ordre chronologique enpartant du plus récent) apparaît dans la page principale du Blog.Pour tous les articles, vous verrez le titre, le nom de l'auteur, la catégorie, ladate et l'heure de publication, la description brève et le lien "Lire tout". Dansle premier article seulement, tout le contenu est affiché au lieu de la des-cription brève.

111

Le lien "Lire tout" mène à une page consacrée entièrement à un post : dans cecas, le programme affiche tout l'article suivi de la liste des commentaires dé-jà publiés et du formulaire que les lecteurs peuvent utiliser pour envoyer unnouveau commentaire.

Les outils suivants apparaissent dans une colonne située à droite dans toutesles pages du Blog :

Rechercher dans le Blog : moteur de recherche interne au Blog.

Articles récents : liste des 10 derniers articles publiés. Si vous cliquez surle titre, vous accédez à la page affichant l'article.

Liste des catégories : liste disposée en colonnes de toutes les catégoriesprésentes dans le Blog. Si vous cliquez sur une catégorie, vous affichez laliste des articles qu'elle contient.

Archives par mois : indique la liste des mois en partant de celui où le Bloga été ouvert. Si vous cliquez sur un mois, vous affichez la liste de tous lesarticles publiés durant cette période.

Nuages : liste disposée sur une ligne de toutes les catégories présentesdans le Blog. Dans ce cas, les noms des catégories sont affichés avec unetaille différente selon le nombre d'articles reliés : les noms des catégoriescontenant plusieurs articles ont une taille plus grande. Si vous cliquez surune catégorie, vous affichez la liste des articles qu'elle contient.

Nous avons déjà dit qu'une des caractéristiques du Blog est de permettre aulecteur d'entrer un commentaire : ainsi en partant de l'article publié, une dis-cussion peut s'ouvrir entre celui qui écrit et ceux qui lisent. Il est nécessairede gérer les commentaires pour éviter les réponses vexantes ou non relativesau thème : pour ce faire, WebSite X5 met à votre disposition un Panneau decontrôle enligne approprié.

Les commandes de la section Général de cette fenêtre permettent de créerla liste des articles à publier dans le Blog.

Tous les articles déjà insérés sont affichés dans le tableau récapitulatif oùsont indiqués le Titre des news, sa Catégorie et la Date de lancement.

Voici les commandes disponibles pour créer la liste des articles :

Ajouter : permet de rappeler la fenêtre Paramètres article pour entrer unnouvel article.

112

Supprimer...: permet de supprimer l'article sélectionné parmi ceux pré-sents dans la Liste des articles.

Modifier : permet de rappeler la fenêtre Paramètres article pour modifierl'article sélectionné parmi ceux présents dans la Liste des articles.

La fenêtre Paramètres article rappelée en cliquant sur Ajouter ou Modifier seprésente comme illustré ci-dessous.

Voici les commandes présentes dans la section Base:

Titre article : permet d'indiquer le titre de l'article.

Auteur : permet d'indiquer l'auteur de l'article.

Date article : affiche la date et l'heure à laquelle l'article a été créé.

Catégorie : permet d'indiquer la catégorie de l'article. Dans ce champ,vous pouvez taper directement le nom d'une nouvelle catégorie à créer ououvrir la liste déroulante et sélectionner une des catégories insérées pré-cédemment.

Description : permet, à travers l'éditeur disponible, de créer le texte del'article.

Brève Description : permet d'indiquer une brève description à associer àl'article.

113

L'Editeur de texte permettant de composer les articles présente les com-mandes suivantes :

Couper [CTRL + X]Permet de couper le texte sélectionné pour le coller par la suite.

Copier [CTRL+ C]Permet de copier le texte sélectionné pour le coller par la suite.

Coller [CTRL+ V]Permet de coller le texte précédemment coupé ou copié à l'aide des com-mandes Couper et Copier.

Annuler [CTRL+ Z]Permet d'annuler la dernière opération.

GrasTransforme le texte sélectionné en gras. Dans la fenêtre de l'éditeur, letexte sélectionné est compris entre les marqueurs [b] et [/b]: l'effet grasapparaîtra seulement dans la fenêtre du Navigateur.

ItaliqueTransforme le texte sélectionné en italique. Dans la fenêtre de l'éditeur, letexte sélectionné est compris entre les marqueurs [i] et [/i]: l'effet itali-que apparaîtra seulement dans la fenêtre du Navigateur.

Couleur du textePermet de définir la couleur du texte sélectionné dans la fenêtre Couleur.Dans la fenêtre de l'éditeur, le texte sélectionné est compris entre lesmarqueurs [color] et [/color]: le marqueur [color] est accompagné de lavaleur hexadécimale de la couleur à appliquer ; par exemple, [co-lor=#FF0000] où #FF0000 correspond au rouge standard. L'effet de la cou-leur apparaîtra seulement dans la fenêtre du Navigateur.

CitationPermet d'afficher le texte sélectionné comme une citation. Dans la fenêtrede l'éditeur, le texte sélectionné est compris entre les marqueurs [cotes]et [/quote]: en revanche, dans la fenêtre du Navigateur la citation appa-raît dans un cadre coloré, placé d'une façon appropriée dans le corps del'article.

CodePermet d'insérer des portions de code HTML en évitant qu'elles ne soientinterprétées. Dans la fenêtre de l'éditeur, le texte sélectionné est comprisentre les marqueurs [code] et [/code]: en revanche, dans la fenêtre du

114

Navigateur le code est inséré dans un cadre coloré, placé d'une façon ap-propriée à l'intérieur du corps de l'article.

Insérer lienPermet de définir un lien sur le texte sélectionné. Dans la fenêtre de l'édi-teur, le texte sélectionné est compris entre les marqueurs [url] et [/url]:le marqueur [url] doit être accompagné de l'indication du site vers lequelmène le lien ; par exemple, [url=http://www.websitex5.com]. Si le textesur lequel vous voulez insérer le lien est un URL, il est reconnu comme telet il est automatiquement placé entre les marqueurs [url] et [/url] accom-pagnés du chemin correct. Dans la fenêtre du Navigateur, le texte sélec-tionné sera affiché comme un lien hypertextuel.

Insérer imagePermet d'insérer une image dans l'article. Après avoir choisi le fichierimage dans la fenêtre appropriée, le marqueur [img src=" ..."] apparaîtdans l'éditeur avec le chemin absolu entre guillemets. L'image choisi serabien évidemment affichée dans la fenêtre du Navigateur.

Les marqueurs insérés dans l'éditeur de texte sont semblable aux tags dulangage HTML. Pour obtenir des formatages différents de ceux prévus,vous pouvez utiliser directement le code HTML à l'intérieur de l'éditeur.

Voici les commandes présentes dans la section Avancées :

Audio/Vidéo lié : permet d'indiquer un fichier audio (au format WAV, MP3,WMA, MID, AIF, AU, RA) ou un fichier vidéo (au format AVI, WMV, MPG, MOV,QT, RM) à associer à la nouvelle. Cette option permet de créer automati-quement un lien vers un fichier audio/vidéo affiché au bas de l'article.

Est-ce que je peux insérer à l'intérieur d'un article un vidéo que l'onpeut voir immédiatement ?

Vous pouvez faire en sorte que le vidéo soit directement affiché dansl'article en insérant manuellement le code HTML nécessaire dans l'édi-teur de texte lors de la composition de l'article. Par exemple, vous pou-vez copier le code d'un vidéo YouTube tel qu'il est fourni par le portail etle coller à l'intérieur de l'article.

Code HTML pour guestbook : permet d'insérer le code HTML nécessairepour implémenter un guestbook servant à collecter les commentaires deslecteurs.

115

Cette option permet d'activer un guestbook différent de celui proposéautomatiquement par WebSite X5 que vous pouvez gérer dans la sectionCommentaires. Pour un service de guestbook différent, visitez le sitewww.google.com/friendconnect

Ne pas habiliter les commentaires pour cet article : si vous sélectionnezcette option, les lecteurs ne peuvent pas laisser de commentaires sur l'ar-ticle.

Les commandes de la section Graphiques de cette fenêtre permettent dedéfinir certains aspects graphiques du Blog:

Modèle de style : permet de choisir le modèle graphique à appliquer pourdéfinir l'aspect du blog.

Titre du Blog : permet d'indiquer le titre du Blog. Ce titre sera affichédans la barre d'en-tête du Blog et un lien sera automatiquement créé versla Page d'accueil du site auquel le Blog est relié.

Sous-titre du Blog : permet d'indiquer le sous-titre du Blog. Le sous-titre se-ra affiché dans la barre d'en-tête du Blog, sous le titre, et un lien sera auto-matiquement créé vers la Page d'accueil du site auquel le Blog est relié.

Notes de pied de page : permet d'indiquer un texte qui sera affichécomme note de Pied de page du Blog.

Afficher le bouton "AddThis" pour partager les contenus sur Internet : sivous sélectionnez cette option, le bouton "AddThis" apparaît automati-quement sous chaque article du Blog. Quand le lecteur clique sur ce bou-ton, il affiche un sous-menu présentant une liste de plusieurs notes social-network : s'il dispose d'un profil sur un de ces circuits, il pourra le sélec-tionner et partager le lien vers l'article avec ses contacts.Si vous disposez d'un Compte AddThis, vous pouvez l'indiquer dans lechamp approprié : vous pourrez ainsi afficher des statistiques sur l'utilisa-tion du service AddThis de la part des lecteurs.

Pour plus d'informations sur le service AddThis, pour obtenir un compte ouafficher les statistiques, visitez le site de référence : www.addthis.com.

Les commandes de la section Commentaires de cette fenêtre permettent degérer l'entrée des commentaires laissés par les visiteurs comme réaction auxarticles publiés dans le Blog.

116

Voici les options disponibles de la section Gestion des commentaires :

Permettre l'entrée des commentaires pour les articles du blog : si vousactivez cette option, vous permettez aux utilisateurs de laisser des com-mentaires relatifs aux articles publiés dans le Blog.

Chemin du dossier public : dans ce champ, vous devez indiquer le chemindu dossier ayant l'accès à l'écriture sur le serveur.

Normalement les Fournisseurs permettent l'accès à l'écriture pour cha-que dossier du serveur : dans ce cas, il n'est pas nécessaire d'indiquer lechemin du dossier public. En revanche, pour connaître le chemin com-plet du dossier public, contactez votre Fournisseur d'accès au Web.

Mot de passe Administrateur : permet d'indiquer le mot de passe permet-tant d'accéder au Panneau de contrôle enligne pour gérer l'affichage descommentaires laissés par les visiteurs.

E-mail pour l'envoi accusé de réception des commentaires : permet d'in-diquer l'adresse e-mail à laquelle vous voulez recevoir l'avis de réceptiondes commentaires sur les articles publiés dans le Blog.

Afficher immédiatement les commentaires insérés : si vous sélectionnezcette option, les commentaires laissés par les visiteurs sont immédiate-ment affichés enligne.

Afficher commentaires après l'approbation dans le panneau de contrôle :si vous sélectionnez cette option, les commentaires laissés par les visiteursdoivent être d'abord approuvés dans le Panneau de contrôle avant d'être af-fichés enligne.

Blog - Panneau de contrôle

Le Blog est une sorte d'agenda où l'on publie des articles de différente nature etdonne la possibilité aux lecteurs de laisser des commentaires. Si la communautédes lecteurs est active et suffisamment stimulée par la qualité des articles, desdiscussions intéressantes peuvent se développer sur le thème en cours.

Pour donner la possibilité aux lecteurs de laisser des commentaires, il fautconfigurer le Blog à l'aide des options présentes dans la section Commentai-res de la fenêtre Blog. Vous devez notamment :

Sélectionner l'option Permettre l'entrée des commentaires pour les arti-cles du blog.

117

Indiquer le Chemin du dossier public, à savoir le chemin qui identifie ledossier avec accès à l'écriture présent sur le serveur.

Indiquer le Mot de passe du panneau de contrôle, à savoir un mot depasse alphanumérique permettant d'accéder au panneau de contrôle enli-gne pour gérer les commentaires.

Indiquer l'E-mail pour l'envoi accusé de réception des commentaires, àsavoir l'adresse e-mail à laquelle vous recevrez un courriel chaque foisqu'un lecteur laissera un commentaire.

Indiquez si les commentaires doivent être publiés immédiatement enligneou être d'abord approuvés.

Ceci étant fait, vous pouvez insérer les articles et publier le Blog. Au bas desarticles du Blog, apparaîtra automatiquement un formulaire où les lecteurspourront insérer leurs commentaires. Ce formulaire demande d'entrer les in-formations suivantes : Nom, e-mail, site Internet et message. Tous les champssont obligatoires sauf celui relatif au site Internet.

A ce stade, dès qu'un lecteur laisse un commentaire, un e-mail de notificationest automatiquement envoyé à l'adresse e-mail indiquée. Si l'option Affichercommentaires après l'approbation dans le panneau de contrôle est sélec-tionnée, pour que le commentaire soit affiché enligne au bas de l'article au-quel il se réfère, il doit être approuvé à l'aide de la commande (automati-quement créée par WebSite X5) appropriée du panneau de contrôle.

Le panneau de contrôle pour gérer le Blog est disponible à l'URLwww.monsite.fr/blog/admin où www.monsite.fr est l'URL du site auquelle Blog est relié.

Le panneau de contrôle présente une première section où, à travers deux lis-tes déroulantes relatives à la liste des catégories et aux listes des articles quiy sont reliées, vous pouvez identifier l'article dont vous voulez lire les com-mentaires. Voici la liste des commentaires : chaque commentaire est accom-pagné du nom de l'auteur, de son adresse e-mail, du texte relatif, de la dateet l'heure à laquelle il été envoyé. Si le nom de l'auteur est disponible, le pro-gramme établit automatiquement un lien vers son site Internet.

Contrairement au Blog où les commentaires sont affichés dans l'ordre d'entrée(le dernier inséré reste au fond de la liste), dans le panneau de contrôle, lescommentaires sont affichés dans l'ordre chronologique en partant du plus ré-cent.

118

Pour gérer les commentaires, il faut donc :

Accéder au panneau de contrôle enligne et se connecter à travers le motde passe indiqué dans le champ de la Section Commentaires de la fenêtreBlog.

Identifier, dans les listes déroulantes contenant la liste des catégories in-sérées et des articles relatifs, l'article dont vous voulez afficher les com-mentaires.

Parcourir la liste des commentaires reçus pour l'article sélectionné et gérerl'affichage des commentaires sur le Blog à l'aide des commandes :

Supprimer : pour supprimer le commentaire de la liste du panneau decontrôle et ne pas le publier sur le Blog.

Approuver/désapprouver : pour approuver un commentaire, et doncpermettre qu'il soit affiché sur le Blog, ou le désapprouver, et donc lesupprimer de la liste des articles affichés sur le Blog. Un commentairedésapprouvé n'est pas supprimé des listes présentées dans le panneaude contrôle.

Il est fondamental de gérer l'affichage des commentaires sur le Blog pour seprotéger des actions de spam et modérer les discussions en éliminant les mes-sages vexants, ne répondant pas au thème ou au style que vous voulez garder.

Flux RSS

Cette fenêtre offre les outils et les options nécessaires pour créer un FluxRSS.

Toutes les informations insérées peuvent être affichées dans un tableau réca-pitulatif où figure le Titre des news et la Date de lancement.

Voici les commandes disponibles pour créer la liste des informations :

Ajouter : permet d'ouvrir la fenêtre Paramètres article pour insérer unenouvelle information.

Supprimer... : permet de supprimer l'information sélectionnée dans laListe des news.

Modifier : permet de rappeler la fenêtre Paramètres article pour modifierl'information sélectionnée dans la Liste des news.

119

La fenêtre Paramètres article que vous pouvez rappeler en cliquant sur Ajou-ter ou Modifier se présente comme illustrée ci-dessous:

Titre article : permet de définir le titre de l'information.

Date article : montre la date de création de l'information.

Description : permet d'indiquer une description relative à l'information.

Page liée : permet d'accéder au plan du site pour choisir la page à relier àl'information.

Après avoir créé la liste des informations, vous devez spécifier les paramètressuivants :

Titre flux RSS : permet de définir le titre du Flux RSS lié au site web.

Description : permet d'indiquer une description relative au Flux RSS lié ausite web.

Image RSS : permet de définir une image à associer au Flux RSS.

Quand vous testez sur votre ordinateur le fonctionnement du site , unmessage vous avertit que les Flux RSS ne seront affichés que lorsque lesite sera publié enligne.

Zone réservée

Cette fenêtre contient les commandes permettant de créer une ou plusieurszones réservées y compris les pages qui durant la phase de Création di plandu site étaient définies comme Protégées.

120

Toutes les zones réservées déjà créées seront utilisées dans la liste des zonesréservées.

Les commandes disponibles pour créer et gérer les zones réservées sont :

Ajouter : elle permet de rappeler la fenêtre Zone Réservée pour créer unenouvelle zone réservée.

Supprimer... : elle permet de supprimer la zone réservée, sélectionnéeparmi celles qui existent déjà.

Modifier : elle permet de rappeler la fenêtre Zone réservée pour modifierles paramètres de la zone sélectionnée.

La fenêtre Zone réservée rappelée à l'aide de la commande Ajouter ou Modi-fier apparaît comme illustré ci-dessous :

Nom de la zone : permet de définir un nom à associer à la zone réservée.

Nom utilisateur : permet de définir le Nom Utilisateur à communiquer auxutilisateurs pour qu'ils puissent accéder aux pages de la zone réservée.

Mot de passe : permet de définir le Mot de passe à communiquer aux utili-sateurs pour qu'ils puissent accéder aux pages de la zone réservée.

Texte d'en-tête pour page d'accès : permet d'entrer un texte d'introduc-tion qui apparaîtra sur la page contenant les champs d'entrée du Nom utili-sateur et du Mot de passe. Si ce texte contient une adresse e-mail, celle-cisera automatiquement reconnue et activée par le programme.

Page de demande d'accès : permet d'accéder au plan du site pour indiquerla page à afficher demandant à l'utilisateur d'effectuer l'enregistrementnécessaire pour obtenir un Nom utilisateur et un Mot de passe. Si vous in-diquez une page relative à la demande d'accès, le bouton S'enregistrer ap-paraît automatiquement.

121

Vous pouvez modifier la forme de la page d'accès des zones réservées à l'aidedes commandes illustrées dans la section Paramètres graphiques:

Police : permet de définir, dans la fenêtre rappelée, le type de police, lestyle et la taille en points du texte.

Texte : permet de définir la couleur du texte qui apparaît dans les champsd'entrée du Nom utilisateur et du Mot de passe.

Texte des boutons : permet de définir la couleur de l'inscription des bou-tons.

Arrière-plan champs : permet de définir la couleur de l'arrière-plan duchamp d'entrée du Nom utilisateur et du Mot de passe.

Arrière-plan boutons : permet de définir la couleur de l'arrière-plan desboutons.

La section Accès administrateur pour toutes les zones contient les champspermettant de définir les paramètres d'accès réservés à l'administrateur :

Connexion Admin : dans ce champ, l' Administrateur, à savoir celui qui acréé le site, peut saisir son Nom Utilisateur lui permettant d'accéder auxpages protégées. Le Nom utilisateur défini par défaut est "Admin".

Mot de passe Admin : dans ce champ, l'Administrateur pourra saisir le Motde passe lui permettant d'accéder aux pages protégées. Le mot de passedéfini par défaut est "123".

Dans la page de demande d'accès, sous les champs d'entrée du Nom Utili-sateur et du Mot de Passe, le programme insère et active automatique-ment le boutons Login et, éventuellement, S'enregistrer.

Quand vous testez le fonctionnement du site créé sur la machine, unmessage vous avertit que les pages protégées seront affichées sans lademande d'accès. La zone réservée est activée uniquement lors de lapublication du site sur le serveur.

Pour que la zone réservée fonctionne correctement, il est nécessaire quele serveur accueillant le site supporte le langage de programmation PHP.

122

Panier virtuel e-commerce

Cette fenêtre offre des outils et des options nécessaires pour créer et gérerun panier virtuel e-commerce pour les ventes enligne du produit offert par lesite web.

Les différentes options sont regroupées dans des sections appropriées :

section Produits

section Expédition

section Formulaire

section Général

Après avoir créé le panier virtuel e-commerce, vous devez entrer dans le siteles informations et les liens nécessaires pour que les utilisateurs puissent affi-cher les informations sur les produits et les acheter éventuellement.

Pour ce faire, vous pouvez procéder de différentes façons :

1. Vous pouvez créer des pages spécifiques présentant les produits de la fa-çon la plus appropriée (avec des images, des textes, des tableaux, etc.) ety insérer le bouton "Acheter".Dans ce cas, le bouton "Acheter" peut être créé à travers le lien Comman-der le produit (pour plus d'informations, voir Insertions des liens).

2. Vous pouvez créer des pages présentant les produits à travers des fiches oùfigurent le bouton "Acheter". Dans ce cas, vous devez utiliser l'objet Listedes produits.

Quand vous testez le fonctionnement du site créé sur la machine, unmessage vous avertit que la commande ne sera pas envoyée et le pro-gramme effectue un redirect automatique à la page de confirmation dela commande. Le panier e-commerce ne fonctionne entièrementqu'après la publication du site sur le serveur.

Pour que le panier e-commerce fonctionne correctement, le serveur surlequel le site sera publié doit supporter le langage de programmationPHP et la commande MAIL doit être activée. Pour plus d'informations,contactez votre fournisseur d'accès web.

123

Les options de la section Produits de cette fenêtre permettent d'entrer lesproduits dans le panier, organisés par catégories.

Tous les produits déjà insérés sont affichés dans le tableau récapitulatif quiindique la Catégorie, le Nombre de produits insérés pour la catégorie sélec-tionnée et la Liste des produits.

Les contrôles disponible pour créer une liste de produits et pour gérer un pa-nier virtuel enligne sont :

Ajouter : permet de rappeler la fenêtre Insertion des produits pour entrerune nouvelle catégorie de produits et les produits y appartenant.

Supprimer...: permet de supprimer la catégorie de produit sélectionnée ettous les produits qui y sont associés.

Importer : permet d'importer la liste de produits à insérer dans le panierdirectement à partir d'un fichier externe (format .TXT ou .CSV pour Micro-soft Excel).

Le fichier de texte avec la liste des produits doit être composé commesuit :

chaque ligne doit contenir un produit ;

les informations suivantes doivent être disponibles pour chaque pro-duit : le nom de la catégorie, le nom du produit, la description duproduit, le prix du produit et les variantes disponibles ;

toutes les informations doivent être séparées par le caractère ";"

toutes les variantes de produit doivent être séparées par le caractère"|"

Par exemple, un extrait d'un fichier pourrait se présenter comme suit :

...Pantalon;Jean;Jean bleu foncé avec strass;69.95;Taille XL|Taille L|TailleM|Taille SPantalon;PantaJazz;PantaJazz rouge à rayures;39.95;Taille XL|Taille L|TailleM|Taille S...

Modifier : permet de rappeler la fenêtre Insertion des produits pour modi-fier la catégorie des produits sélectionnée et/ou les produits qu'ellecontient.

124

La fenêtre Insertion des produits rappelée en cliquant sur Ajouter ou Modi-fier apparaît comme illustré ci-dessous :

Nom de catégorie : permet d'entrer le nom d'une nouvelle catégorie deproduits que vous voulez créer ou bien d'afficher le nom d'une catégorie deproduits dont vous voulez modifier la composition.

Liste des produits : permet d'afficher la liste des produits figurant dans lacatégorie courante.

Ajouter : permet d'ajouter un nouveau produit dans la catégorie courantedes produits.

La section Générales permet d'indiquer pour chaque produit ajouté leNom/Code, la Description, le Fichier image et le Prix. Les informationssont affichées dans le champ Liste de catégorie de produits.

La section Options permet d'insérer les Variantes pour le produit : parexemple, si le produit est un vêtement, vous pouvez introduire les diffé-rentes tailles disponibles comme des variantes du produit.

Supprimer...: permet de supprimer un produit d'une liste de produits.

Dupliquer : permet de dupliquer le produit sélectionné dans la liste deproduits.

Modifier : permet de modifier, dans la boîte de dialogue appropriée, lesinformations relatives au produit sélectionné dans la Liste des produits.

En haut : permet de déplacer le produit sélectionné en le plaçant avant leproduit qui le précède dans la liste des produits.

En bas : permet de déplacer le produit sélectionné en le plaçant après leproduit qui le suit dans la liste des produits.

125

Les options de la section Expédition de cette fenêtre permettent de définirles méthodes d'envoi et de paiement disponibles pour le panier e-commerce.

Toutes les méthodes d'expédition et de paiement déjà entrées sont affichéesdans un tableau récapitulatif où sont indiqués le Nom, la Description et lePrix.

Voici les commandes disponibles pour créer la liste des méthodes d'envoi etde paiement actives pour le panier e-commerce :

Ajouter : permet de rappeler la fenêtre Entrer le mode d'expédition et depaiement pour définir une nouvelle méthode d'envoi et de paiement.

Dupliquer : permet de créer une copie de la méthode d'expédition et depaiement sélectionnée afin de spécifier et de définir plus rapidement tou-tes les méthodes offertes pour le panier e-commerce.

Supprimer...: permet de supprimer la méthode d'expédition et de paie-ment sélectionnée.

En haut : permet de déplacer la méthode d'envoi et de paiement sélec-tionnée avant celle qui la précède dans la Liste.

En bas : permet de déplacer la méthode d'envoi et de paiement sélection-née après celle qui la suit dans la Liste.

Modifier : permet de rappeler la fenêtre Entrer le mode d'expédition et depaiement pour modifier la méthode d'envoi et de paiement sélectionnée.

La fenêtre Entrer le mode d'expédition et de paiement rappelée en cliquantsur Ajouter ou Modifier apparaît comme illustré ci-dessous :

126

Nom : permet d'identifier la méthode d'expédition et de paiement à l'aided'une inscription brève.

Description : permet de fournir une description complète de la méthoded'expédition et de paiement.

Prix : permet de définir les dépenses additionnelles relatives à la méthoded'expédition et de paiement.

E-mail de réponse au client : permet de définir le message e-mail qui seraautomatiquement envoyé au client qui a effectué une commande d'achat.

Vous pouvez spécifier un différent message pour chaque méthode d'ex-pédition et de paiement : ainsi, vous pouvez donner des indications spé-cifiques pour chaque méthode. Le message sera automatiquement com-plété par le compte-rendu de la commande et le numéro de commandequi est automatiquement affecté.

Accepter paiement par carte bancaire : si vous sélectionnez cette option,le paiement par carte de crédit sera activé.

Les options de la fenêtre Paiement par carte bancaire permettent d'activer lepaiement par carte de crédit :

Activer paiement par carte bancaire : si vous sélectionnez cette option,vous activez le paiement par carte de crédit.

Paiement payPal : activez cette option si vous voulez utiliser PayPal pourgérer les paiements par carte de crédit.Dans ce cas, vous devez spécifier :

Compte Paypal : entrer le compte obtenu comme un utilisateur PayPalenregistré.

Page de confirmation du paiement : permet d'afficher le plan du siteet de sélectionner la page qui apparaît pour confirmer que le paiementa été effectué.

Page d'erreur de paiement : permet d'afficher le plan du site et de sé-lectionner la page qui apparaît en cas d'erreur pendant la procédure depaiement.

Autre système de paiement : activez cette option si vous voulez utiliserun système différent de PayPal pour gérer les paiement par carte ban-caire.

127

Dans ce cas, vous devez spécifier :

Code HTML pour le bouton 'Payer maintenant' : tapez le code HTMLfourni, après l'inscription, par votre Fournisseur de Service de Paie-ment. Ce code permet d'activer le service sur le panier e-commerce, enaffichant le bouton "Payer maintenant" correspondant aux paramètresqui identifient l'utilisateur.

Le code HTML fourni par votre Fournisseur de Service de Paiement estutilisé pour créer le bouton 'Pay Now' ou 'Payer Maintenant'. Ce code doitêtre complété par le numéro de commande et le montant total de lacommande du client. Pour que le panier fonctionne, vous devez tapermanuellement dans le code les tags suivants:

[ORDER_NO] - identifie le numéro de commande

[PRICE] - identifie le montant total à payer

Les options de la section Formulaire de cette fenêtre permettent de définirla composition du formulaire que l'utilisateur doit remplir pour effectuer lacommande à travers le panier e-commerce.

Le cadre Adresse E-mail où recevoir les commandes propose un champ oùvous devez taper l'adresse e-mail à laquelle l'administrateur du site veut re-cevoir les commandes effectuées par les utilisateurs à travers le panier vir-tuel e-commerce. L'option Joindre les données dans le format CSV permet

128

d'enregistrer les données collectées également dans un fichier au format CSVjoint à l'e-mail. Dans un fichier CSV, les données sont indiquées sous formetextuelle, comme une longue liste de rubriques séparées par un point-virgule:vous pouvez importer facilement ces fichiers dans les programmes de gestiondes feuilles de calcul (par ex. Microsoft Excel).

Le cadre Paramètres graphiques du message propose les options suivantes :

Police : permet de définir le Type de police, le Style et le Nombre depoints du texte.

Texte : permet de définir la couleur du texte.

Arrière-plan du texte : permet d'indiquer la couleur d'arrière-plan destextes des e-mail.

Arrière-plan du message : permet d'indiquer la couleur d'arrière-plan dese-mail.

Logo de l'entreprise : permet d'importer un fichier graphique (JPG, PNG,GIF) pour personnaliser l'e-mail. Vous pouvez importer un logo d'entreprisecomme image graphique: l'image est placée dans l'en-tête du message.

Si la hauteur de l'image insérée comme Logo de l'entreprise dépasse 100pixels, elle est automatiquement redimensionnée.

Le cadre Demande des données client offre une liste de champs à utiliser dansle modèle (formulaire) de commande. Pour insérer un champ, cliquez sur lechamp voulu pour le cocher.

Vous pouvez utiliser les options suivantes :

Description : propose le nom du champ, à savoir le texte affiché en regarddu champ pour indiquer à l'utilisateur l'information requise. Vous pourrezmodifier librement ce texte.

Largeur : permet de définir la largeur du champ qui peut correspondre à100%, 75%, 50% ou 25% de l'espace disponible.

Etablir comme champ obligatoire : si vous sélectionnez cette option, vouspouvez rendre le champ obligatoire.

La liste déjà proposée contient tous les champs généralement utilisés dans unformulaire d'enregistrement: vous pouvez personnaliser les champs indiquéset vous disposez de 4 champs vides à utiliser pour demander des informationsparticulières.

129

Le dernier champ proposé dans la liste est le champ d'e-mail: vous ne pouvezpas rendre invisible ce champ ou non obligatoire car il est nécessaire deconnaître l'e-mail de l'utilisateur qui envoie la commande.

Le cadre Conditions d'acceptation propose les commandes nécessaires pourcompléter le formulaire avec le texte des conditions que l'utilisateur doit ac-cepter avant d'envoyer la commande d'achat

Ajouter les conditions d'acceptation (ex: Privacy) : si vous sélectionnezcette option, vous pourrez ajouter au bas du formulaire un champ conte-nant les conditions que l'utilisateur doit accepter avant d'envoyer la com-mande. Vous pouvez utiliser ce champ, par exemple, pour présenter lesnormes relatives à la confidentialité pour le traitement des données col-lectées.

Titre de la condition : permet d'entrer le texte à afficher comme titre duchamp où figurent les conditions.

Texte de la condition : permet d'insérer le texte des conditions que l'utili-sateur devra accepter afin d'effectuer la commande.

Les options de la section Général de cette fenêtre permettent de définir cer-tains paramètres graphiques, en plus de ceux relatifs à la devise et à la TVA,pour le panier e-commerce.

La fenêtre des Paramètres graphiques propose les commandes nécessairespour formater les textes du formulaire, sauf ceux présents dans la table deprésentation du produit :

130

Police : permet de définir le type de caractère, le style et la taille enpoints du texte.

Couleur de texte : permet de définir la couleur du texte dans la fenêtreCouleur.

Image 'Ajouter au panier' : permet de définir l'image à utiliser pour créerle bouton 'Ajouter au panier', à savoir le bouton permettant d'insérer leproduit dans le panier.

Image 'Enlever du panier' : permet de définir l'image à utiliser pour créerle bouton 'Enlever du panier', à savoir le bouton permettant de supprimerun produit du panier.

Image 'Aperçu non disponible' : permet d'indiquer l'image à utiliser quandl'image associée n'a pas été choisie pour un produit et que dans la pageListe des produits vous avez choisi la présentation "Image et texte" ou"Texte et image" pour les fiches.

Le sous-dossier "Cart" du dossier d'installation de WebSite X5 propose unesérie d'images appropriées pour créer les boutons permettant d'ajouteret supprimer les produits du panier.

La fenêtre des Paramètres graphiques de la liste des produits propose lescommandes nécessaires pour définir l'aspect des tableaux présentant les pro-duits disponibles et/ou les produits insérés dans le panier :

Texte des cellules : permet de définir la couleur du texte de la cellule.

Texte de l'en-tête : permet de définir la couleur du texte d'en-tête.

Arrière-plan des cellules : permet de définir la couleur d'arrière-plan dela cellule.

Arrière-plan de l'en-tête : permet de définir la couleur de fond de l'en-tête de la cellule.

Couleur bordure : permet de définir la couleur de bordure du tableau.

Le cadre Définitions de la devise présente les commandes nécessaires pourdéfinir les paramètres relatifs à la devise et à la TVA à appliquer au panier :

Symbole de la devise : permet de définir la devise à utiliser dans le panier.

Afficher la devise à droite : si vous sélectionnez cette option, le symbolede la devise sera affiché à droite des prix.

131

Afficher deux chiffres après la virgule : si vous sélectionnez cette option,les prix seront affichés avec deux chiffres après la virgule.

Ajouter TVA (%) : permet de définir le pourcentage de TVA à appliquer.

Vous pouvez entrer les prix hors taxe des produits et utiliser ce champpour indiquer la TVA à appliquer: Dans ce cas, la TVA sera appliquée seu-lement au total du montant de la commande.

Vous pouvez également entrer le prix des produits toute taxe compriseet mettre 0 dans le champ Ajouter TVA.

Le cadre Options présente les commandes suivantes :

Page 'Continuer les courses' : permet de parcourir le plan du site pouridentifier la page à afficher quand vous cliquez sur le bouton 'Continuer lescourses' qui est créé automatiquement par le programme dans la page dupanier.

132

Etape 5 – Exporter

Exportation du site

Dans cette phase, vous devez indiquer le mode d'exportation pour le projetcréé. Vous pouvez publier les fichiers sur un serveur à travers une sessionFTP, ou sur le disque de votre ordinateur. Vous pouvez également regroupertous les fichiers du projet dans un seul dossier et les transférer vers un autreordinateur pour continuer votre travail.

Les boîtes de dialogue suivantes apparaissent :

Exporter le site sur Internet

Exporter le site sur un disque

Regrouper et optimiser les fichiers du projet

Exportation du site sur Internet

Cette fenêtre permet de publier le site créé sur Internet.

Les fichiers nécessaires pour l'affichage correcte du site sur Internet sont en-registrés sur l'ordinateur où le site a été créé. Pour faire en sorte que les uti-lisateurs qui se connectent à Internet puissent voir les pages du site, il fautcopier ces fichiers sur le serveur, c'est à dire sur un ordinateur toujoursconnecté, à travers une session FTP.

Pour exporter tous les fichiers du projet, il faut indiquer les Paramètres deconnexion :

Adresse FTP : dans ce champ, il faut taper l'adresse FTP (données fourniespar le fournisseur d'accès Internet). Voici un exemple d'adresse FTP :"ftp.incomedia.it", où "incomedia.it" est le nom du domaine.

133

Nom utilisateur : dans ce champ, il faut taper le nom utilisateur (fournipar le fournisseur d'accès Internet).

Mot de passe : dans ce champ, il faut saisir le mot de passe (fourni par lefournisseur d'accès Internet).

Vous pouvez aussi spécifier quelques paramètres optionnels qui ne sont pasnécessairement requis, comme par exemple :

Dossier de destination : dans ce champ, il faut insérer le dossier de destina-tion attribué par le fournisseur d'accès. Si vous ne tapez aucun chemin, vouspourrez le choisir dans la page-écran suivante affichée par WebSite X5.

Utiliser FTP passif : pour obtenir une meilleure compatibilité deconnexion avec le serveur, il est conseillé d'utiliser les modes de publica-tion FTP passifs.

Enregistrer mot de passe : quand cette option est sélectionnée, le mot depasse est automatiquement enregistré.

Enfin vous pouvez spécifier le Type de Téléchargement, à savoir ce que vousvoulez effectivement publier :

Exporter tous les fichier du site Internet : dans ce cas, tout le site serapublié. Ce mode est indiqué lors de la première publication du projet ouaprès 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é modifiés aprèsl'exportation effectuée à la date indiquée. Ce mode est approprié pour lessites qui sont constamment mis à jour et requiert un temps inférieur parrapport à la publication complète du site.

La date de publication est enregistrée dans le projet. Pour cette raison,après avoir publié les fichiers, il est important d'enregistrer toujours lesmodifications. Même si vous demandez seulement l'exportation des fi-chiers modifiés, les pages HTML et les fichiers de ressources (figurantdans le sous-dossier Res) seront republiés : il est en effet très probablequ'elles aient été mises à jour.

Exporter seulement le Blog et les Flux RSS : dans ce cas, vous publiezseulement les fichiers XML du Flux RSS géré à travers la section appropriéedes Paramètres avancés. Ce mode, qui est activé seulement si le Flux RSS aété déjà publié, est utile si vous avez ajouté des informations dans le FluxRSS sans effectuer une mise à jour.

134

Après avoir effectué la connexion au serveur, les dossiers disponibles appa-raissent dans une fenêtre appropriée. À l'aide des commandes appropriées,choisissez le dossier sous lequel vous voulez publier le site.

Si vous n'êtes pas sûr du dossier à sélectionner, contactez votre Fournis-seur d'accès : tous les dossiers présents sur le Serveur ne sont pas faitspour la publication.

Les commandes disponibles sont :

Dossier supérieurElle permet de se déplacer dans le dossier supérieur.

Créer un nouveau dossierElle permet de créer un nouveau dossier.

EffacerElle permet d'éliminer le fichier ou le dossier sélectionné. Pour être élimi-nés, les dossiers doivent être vides.

RenommerElle permet de modifier le nom du fichier ou du dossier sélectionné.

ActualiserElle permet de recharger le contenu du dossier courant.

Pendant l'exportation, WebSite X5 copie sur le serveur tous les fichierscontenus dans le dossier d'enregistrement. Si ce dossier contient des fi-chiers portant le même nom que les fichiers publiés, ils seront écrasés.

Une liste de Fournisseur d'accès qui proposent un espace Web est dispo-nible sur le site de WebSite X5 à la page www.websitex5.com/webspace.

135

Exportation sur disque

Cette fenêtre permet de publier le site créé sur un autre disque de l'ordinateur.

L'exportation sur disque permet d'avoir une copie sur PC des fichiers qui seront publiéssur le Serveur, pour pouvoir modifier les pages HTML créées avant la publication.

Pour exporter tous les fichiers du projet, il suffit de spécifier :

Dossier de destination : dans ce champ, indiquez le dossier vers lequelvous voulez exporter le site créé. Si le dossier spécifié n'existe pas, il seraautomatiquement créé.

Pour créer une copie de sauvegarde du projet, utilisez la fonction Re-grouper : vous disposez ainsi d'une copie des fichiers originaux du projetet non pas des fichiers créés par le programme pour la publication.

Regroupement des fichiers du projet

Cette fenêtre permet de regrouper dans un dossier, tous les fichiers liés auprojet (en les optimisant) afin de les transférer vers un autre ordinateur.

Pour regrouper les fichiers du projet, il suffit de spécifier :

Dossier de destination : entrez le dossier vers lequel vous voulez exporterle fichier du projet. Si le dossier spécifié n'existe pas, il sera automati-quement créé.

Lors du regroupement des fichiers du projet, vous pouvez demander d'optimiserles images utilisées en sélectionnant simplement une des options suivantes :

Aucune optimisation : les images insérées dans le site sont copiées dans undossier tel quel sans tenir compte de leur taille et/ou des filtres éventuels.

Choisissez cette option quand le site n'est pas encore définitif : vous dis-posez ainsi des images originales que vous pourrez modifier à votre gré.

Optimisation de base : le programme crée une copie avec une résolutioninférieure des images les plus grandes dans les pages du site et utilise cescopies pour le regroupement.

Choisissez cette option quand le site est presque définitif : vous obtien-drez ainsi un chargement plus rapide de l'aperçu.

136

Optimisation complète : le programme crée une copie des images dans lespages du site en fonction de leur résolution et des filtres appliqués et ilutilise ces copies pour le regroupement.

Choisissez cette option quand le site est définitif et que vous ne devezplus modifier les images.

Comme WebSite X5 enregistre le chemin absolu des fichiers liés, pour que leprojet soit correctement transféré sur un autre poste de travail, le dossier dedestination doit avoir un chemin que l'on peut reproduire sur le second ordi-nateur. Par exemple, si le travail est regroupé dans le dossier C:/MonTravaildu premier ordinateur, il faut créer un dossier C:/MonTravail sur le deuxièmeordinateur pour y copier tous les fichiers. Pour pouvoir créer le même par-cours sur le deuxième ordinateur, il est important que le dossier où le projetsera regroupé ne soit pas sur le bureau Windows : le chemin du dossier Bureaupeut en effet être différent d'un ordinateur à l'autre.

Dans le dossier de destination, le programme crée une copie des fichiers duprojet et y copie tous les fichiers qui y sont reliés. La copie du fichier du pro-jet est automatiquement mise à jour avec le nouveau chemin afin de l'affi-cher correctement. L'original du fichier du projet reste donc le même.

Les fichiers reliés au projet sont en revanche organisés dans les sous-dossiersen fonction du critère suivant:

Sous-dossier General : contient les fichiers définis dans les Paramètres gé-néraux tels que l'icône du site, les images/animations utilisées dans le mo-dèle personnalisé ou pour personnaliser la barre de titre.

Sous-dossiers ObjImage, ObjVideo, ObjFlash, etc. : ils contiennent les fi-chiers utilisés pour créer les objets insérés dans les pages du site.

Sous-dossier Advanced : contient les fichiers définis dans les Paramètresavancés tel que le curseur pour les liens, les images des listes à puces dessous-menus, les icônes du panier e-commerce, les drapeaux pour choisir lalangue de consultation, etc.

Sous-dossier Links : contient les fichiers reliés aux liens présents dans le site.

Sous-dossier Aspect : contient les fichiers utilisés pour définir l'aspect descellules de la grille de mise en page.

Cette fonction est utile pour créer une copie de sauvegarde du projet.

137

Remarques sur la transparence des images

Lorsque vous définissez l'aspect de la cellule et des boutons du menu de pre-mier niveau, vous pouvez faire en sorte que le programme crée automati-quement des images.

Comme les boutons n'ont pas toujours une forme rectangulaire, les imagessont enregistrées comme fichier .GIF avec un arrière-plan transparent. Parailleurs, si les bords du bouton sont arrondis, il faut appliquer l'effet antialia-sing pour éviter que le périmètre soit égrené. Grâce à cet effet, la couleurconfigurée comme transparente est fusionnée avec le fond sur lequel l'imageest insérée.

Vous devez configurer correctement la couleur qui sera considérée commetransparente. Pour l'aspect de la cellule, vous pouvez agir sur l'option Couleurbordure ; pour les boutons, utilisez l'option Couleur externe pour transpa-rence de la section Graphiques dans la fenêtre Aspect du premier niveau.

Pour éviter que les images soient "trouées", il faut choisir comme couleurtransparente une couleur qui n'apparaît pas dans l'image (par exemple : lacouleur du texte ou la couleur d'arrière-plan).

Pour éviter que les images aient une bordure de couleur différente, la couleurtransparente doit être semblable à la couleur de fond sur laquelle l'image estsuperposée.

Dans la plupart des cas, il est conseillé de choisir la couleur transparenteparmi les niveaux de gris tel que proposé par défaut.

Pour identifier aisément la couleur de fond sur laquelle l'image est su-perposée, vous pouvez utiliser l'outil Compte-goutte (Pipette) présentdans la fenêtre Couleur.

Nome file: Manuale X5 Evo 8 FR.docDirectory: F:\Programmi\WebSite X5 2008\ManualeModello: C:\Users\Simona\AppData\Roaming\Microsoft\Modelli\Normal.dotTitolo: DISCLAIMEROggetto:Autore: Stefano RanfagniParole chiave:Commenti:Data creazione: 02/01/2009 15.56.00Numero revisione: 363Data ultimo salvataggio: 11/03/2009 15.59.00Autore ultimo salvataggio: SimonaTempo totale modifica 3.290 minutiData ultima stampa: 11/03/2009 15.59.00Come da ultima stampa completa

Numero pagine: 137Numero parole: 34.191 (circa)Numero caratteri: 194.892 (circa)