Copyright 2009 Incomedia. All rights reserved. Official Website: -

Transcription

1 Copyright 2009 Incomedia. All rights reserved. Official Website:

2 Copyright 2009 Incomedia. All rights reserved. Information in this manual is subject to change without notice. No part of this manual may be reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without the express written permission of Incomedia. Please remember that existing movies, sounds or images that you may want to use in your project may be protected under copyright law. The unauthorized incorporation of such material into your new work could be a violation of the rights of the author. Please be sure to obtain any permission required from such authors. Incomedia, WebSite X5, WebSite X5 Evolution are trademarks of Incomedia s.r.l. Other brand or product names mentioned herein are trademarks or registered trademarks of their respective owners. Written and designed at Incomedia s.r.l. 2

3 Sommaire Information sur la guide... 5 Travailler avec WebSite X Environnement de Travail... 7 Etape 1 Paramètres généraux Bienvenue dans Incomedia WebSite X Choix du projet...11 Paramètres généraux...11 Choix du menu...15 Choix du modèle...16 Modèle personnalisé...19 Modification du modèle...22 Etape 2 Création du plan du site Création du plan du site...33 Plan du site et SiteMap...39 Exemple de plan...40 Etape 3 Création de la page Définition de la mise en page...42 Insertion des objets...44 Objet Texte...46 Paramètres RollOver...49 Objet Image...50 Objet Tableau...53 Objet Animation Flash...57 Objet Vidéo/Son...58 Objet Galerie d'images...59 Objet Diaporama...64 Objet Formulaire d'envoi d' Objet Code HTML...76 Compteur des visites FrontPage...78 Insertion d'objets Internet...78 Objet Liste des produits...79 Editeur graphique...82 Format de la cellule...85 Insertion des liens...87 Fenêtre Couleur

4 Etape 4 Paramètres avancés Paramètres avancés Style du menu de premier niveau Style de liste déroulante Style de sous-menu Style de texte Page d'introduction Coin publicitaire Blog Blog Panneau de contrôle Flux RSS Zone réservée Panier virtuel e-commerce Etape 5 Exporter Exportation du site Exportation du site sur Internet Exportation sur disque Regroupement des fichiers du projet Remarques Remarques sur la transparence des images

5 Information sur la guide Ce guide de WebSite X5 est une référence de la version EVOLUTION v. 8 dont il explique toutes les fonctionnalités. Pour toute autre version du programme, reportez-vous au présent guide sans oublier les limitations de chaque version. La section "Travailler avec WebSite X5" contient des remarques accompagnées des icônes suivantes : Plus d'informations Elle donne plus d'informations sur le sujet. Pratiquement Elle fournit des suggestions sur comment agir. Approfondissements Elle présente une remarque d'approfondissement théorique ou technique. Attention! Elle présente une remarque à laquelle il faut prêter attention. Suggestions Elle donne des idées pratiques sur comment utiliser les fonctions présentées. 5

6 Travailler avec WebSite X5 WebSite X5 opère comme un assistant qui vous guide à travers le processus en s'assurant que vous complétiez toutes les étapes nécessaires pour que votre site 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éraux Après avoir choisi le projet sur lequel vous voulez travailler et avoir inséré quelques informations indispensables, entre autres la Description et les mots-clés nécessaires à l'indexation sur les moteurs de recherche, WebSite X5 vous permet de définir l'aspect graphique du site : vous disposez d'une galerie 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 éditeur intégré au logiciel, vous pourrez personnaliser les sections relatives à l'entête et au pied de page ; vous pourrez également créer et utiliser un modè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 structure sous forme arborescente. Vous disposez de quatre niveaux d'approfondissement permettant d'organiser un nombre illimité de pages. Le menu de navigation sera créé dynamiquement en fonction du plan. Vous pourrez, à tout moment, modifier le plan du site pour le mettre à jour. 3. Création des pages Pour créer une page et la mettre en page, faites glisser simplement les objets voulus : textes même avec RollOver, images, Animations Flash, Vidéos et Audio, Tableaux formatés, Diaporamas, galeries d'images, objets HTML, formulaires pour la collecte de données et l'envoi d' . Les objets importants peuvent être personnalisés et complétés par des liens vers des ressources internes et externes. Grâce à un éditeur graphique intégré, vous pourrez faire pivoter l'image, corriger ou appliquer des filtres, des masques et des cadres sur les images importées sans avoir recours à un logiciel extérieur. 4. Définition des paramètres avancés Pour compléter la personnalisation du site, vous pouvez définir le style des menus, des textes et de la barre de défilement. L'éditeur permet également 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 (effet mouse over). Par ailleurs, le site peut être complété avec des outils tels que : une page d'accueil, éventuellement animée sous Flash, une bande 6

7 sonore et le choix de la langue de consultation ; zones réservées à travers un mot de passe, des Flux RSS, des Blogs, un panier virtuel e-commerce. 5. Exporter WebSite X5 permet aussi de publier sur Internet le site créé : le programme active une session FTP à travers laquelle tous les fichiers nécessaires sont transférés sur le serveur pour afficher le site directement sur le Web. En cas de mise à jour, vous ne pouvez publier que les fichiers modifiés. En plus de la publication sur Internet, vous pouvez exporter un projet sur un autre disque ou grouper tous les fichiers pour les déplacer aisément vers un autre ordinateur. Environnement de Travail Comme il s'agit d'un guide, WebSite X5 propose une série de pages-écrans permettant d'insérer les informations nécessaires pour créer et publier un site Internet complet, fonctionnel et graphiquement attractif. Toutes les pages-écrans du programme ont la même interface graphique avec une barre d'outils, en haut, en bas et sur le coté, et une fenêtre centrale qui change en fonction de la phase de travail et par conséquent des informations requises. Barre d'outils supérieure Aide : permet d'afficher l'aide enligne. La flèche à gauche du bouton Aide permet aussi d'accéder aux commandes : Guide [Résumé] : permet d'afficher l'aide enligne. Allez à : 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 expliquant comment travailler avec le logiciel. WebSite X5 Gallery : permet d'accéder à une riche galerie de sites créés et signalés directement par les utilisateurs. WebSite X5 Templates : permet d'afficher et de télécharger de nouveaux modèles graphiques, en les choisissant parmi ceux proposés par Incomedia ou d'autres utilisateurs, aussi bien gratuits que payants. Forum officiel : permet d'accéder directement au forum officiel de WebSite X5. Le forum, actif en italien, anglais et allemand, rassemble 7

8 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 contenant des 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érent de celui d'origine afin de créer une copie du projet. Enregistrer à chaque test : activée par défaut, elle permet d'enregistrer automatiquement le projet chaque fois qu'à travers la commande Tester 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 fois que vous enregistrez le projet. Créer une copie de sauvegarde à chaque exportation : une copie de sauvegarde du projet est automatiquement créée chaque fois que vous exportez le site. Lors de chaque enregistrement, ou selon l'option programmée lors de chaque exportation, le programme garde une copie de la version précédente et la stocke avec l'extension.bws. Vous pourrez renommer ce fichier avec l'extension.iwp pour l'utiliser comme copie de sauvegarde. Tester : permet d'afficher à travers un navigateur interne un aperçu du site. à l'aide de la flèche à gauche du bouton Tester vous pouvez accéder aux options Tester tout le site et Tester cette page qui permettent de tester toutes les pages ou une seule page. Dans ce dernier cas, l'aperçu est affiché 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 la commande Tester, le programme effectue la première création, enregistre éventuellement le site, puis affiche l'aperçu dans le navigateur. Selon la complexité du site, le nombre et l'optimisation des ressources insérées, ce processus pourrait requérir un certain temps. Pour réduire les temps d'attente, le programme maintient automatiquement dans un dossier temporaire une copie des 10 derniers projets : ainsi, quand vous

9 commencez à travailler, vous ne devez pas attendre que le site soit recréé mais seulement remis à jour. Il est donc important d'enregistrer le projet après l'avoir affiché: vous maintenez ainsi la synchronisation entre le projet réel et la copie enregistrée automatiquement dans le dossier temporaire. Pour ce faire, utilisez 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 indiquent la phase du projet en cours et permettent de passer d'une phase à l'autre 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 les modifications. Suivant : permet de passer à la fenêtre suivante pour continuer la création du site. 9

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 ressources et des matériaux enligne servant à mieux travailler avec le logiciel : Tutorial Ce lien lance l'affichage de Tutoriaux vidéos servant à comprendre le fonctionnement et l'utilisation du logiciel. Gallerie Permet de visiter la Galerie des sites créés par d'autres utilisateurs et de signaler vos sites. Modèles Permet d'ajouter de nouveaux modèles pris dans la section Templates X5 du site officiel de WebSite X5. Assistance enligne Lance le lien vers le Centre d'assistance, disponible en italien, anglais et allemand, où vous trouverez une réponse aux questions les plus fréquentes. Forum Lance 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ées avec la communauté de WebSite X5. Mises à jour Lance le lien vers la page Internet permettant de vérifier l'existence d'éventuelles mises à jour logicielles pour la version courante de WebSite X5 pour la version installée de WebSite X5. Comme WebSite X5 est un assistant, c'est-à-dire qu'il guide la réalisation des sites Internet, pour travailler avec ce programme, il suffit d'insérer les informations 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. 10

11 Choix du projet Cette boîte de dialogue permet d'indiquer le projet sur lequel vous voulez travailler. 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éé, cliquez sur le bouton Enregistrer situé dans la barre d'outils supérieure. Modifier un projet existant : si vous sélectionnez cette option, vous ouvrez un projet créé précédemment pour effectuer la modification. Pour choisir le projet, ouvrez la liste déroulante contenant les derniers projets utilisés ou cliquez sur le bouton pour parcourir les ressources de l'ordinateur. 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 informations 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ées suivantes : Titre du site : dans ce champ, tapez le titre du site qui sera affiché dans la barre de titre du Navigateur. Auteur du site : tapez votre nom pour être identifié comme auteur du site. Le nom de l'auteur est indiqué dans le code XHTML des pages réalisées comme valeur du Méta Tag <author> : vous mettez ainsi votre signature sur votre travail. Adresse Url du site : entrez l'adresse Url à laquelle le site sera disponible après sa publication. Cette information est nécessaire pour le bon fonctionnement d'éventuels Flux RSS, du panier e-commerce et pour le SiteMap qui est automatiquement créé et relié. Description du site : tapez une brève description de votre site. La description du site doit être succincte, efficace et significative : elle sera en effet 11

12 utilisée dans le code XHTML comme contenu du Méta Tag <description> et sera analysée par les spiders des moteurs de recherche. Mots-clés pour la recherche : dans ce champ, vous pouvez entrer une liste de mots-clés (séparés par une virgule) qui sont importants pour le site. Les mots-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 automatiquement utilisée pour toutes les pages. Si vous souhaitez associer à une page spécifique une description et une liste de mots-clés différentes, accédez à Création du plan du site, cliquez sur Propriétés de la page 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. Selon la langue choisie, le programme utilise différentes versions pour les textes qu'il insère automatiquement : des liens vers des ancres internes, des boutons de l'objet Diaporama, des étiquettes de l'objet formulaire d'envoi , des étiquettes et des textes des paniers virtuels e- commerce, des textes du plan du site. Ces textes sont pris automatiquement dans les fichiers au format INI figurant dans le sous-dossier LANGS du dossier d'installation du logiciel. Les fichiers au format INI sont de simples fichiers de texte que vous pouvez ouvrir avec un éditeur quelconque (par exemple, Bloc-notes de Windows) et modifier librement : en respectant la structure proposée, vous pouvez créer des fichiers INI relatifs à de nouvelles langues, qui ne sont pas 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 à gauche de 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 Favorite Icon), il faut utiliser une image au format.ico de 16x16 pixels, 32x32 pixels ou 48x48 pixels. WebSite X5 permet d'importer aussi des fichiers.bmp : dans ce cas, le programme crée automatiquement une copie dans un fichier.ico de 48x48 pixels à 16 couleurs avec palette optimisée et utilise cette copie comme favicon. 12

13 Dans la section Avancées de la fenêtre Paramètres généraux, entrez les données suivantes : Code personnalisé pour la section HEAD : ce champ affiche une portion du code HTML relative à la section <head>. Vous pouvez modifier les valeurs des Méta Tags présents pour personnaliser le code de toutes les pages du site. Méta Tag de vérification pour Google WebMaster Tools : entrez le Méta Tag de vérification nécessaire pour jouir des services de Google WebMaster Tools. Google WebMaster Tools est un kit d'outils mis à disposition gratuitement par Google pour permettre aux WebMaster de rendre les sites conformes à ses indications. Ces outils expliquent comment Google voit un site et vous aident à diagnostiquer les éventuels problèmes : si vous les utilisez correctement, ils vous aideront à améliorer la visibilité de votre site sur le Moteur. Pour utiliser Google WebMaster Tools, vous devez disposer d'un compte Google 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éta Tag fourni par Google et de le coller sur la page d'accueil du site dans la premiè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 et connectez-vous. Ajoutez le site à analyser dans le Tableau puis ouvrez la section pour accé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éta Tag 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=" /> 13

14 Code d'activation des statistiques : tapez le code nécessaire pour activer les services de statistiques du site et obtenir des informations utiles sur la quantité et la qualité des visites qu'il reçoit. Le réseau offre de nombreux services de statistiques dont le plus connu est celui fourni par Google : Google Analytics. Cet outil, complètement gratuit, permet de prédisposer de nombreux rapports pour contrôler et analyser, même d'une manière approfondie, les accès au site. Google Analytics peut être utilisé à différents niveaux : vous pouvez demander simplement le nombre de visites effectuées ou contrôler la progression des campagnes publicitaires répandues par le programme Google Adsense. Pour pouvoir exploiter Google Analytics, il faut indiquer au moteur le site à analyser et notamment les pages à contrôler régulièrement : pour ce faire, il faut insérer un code de contrôle dans le code des pages du site. Résumons les étapes à suivre : Vous devez disposer d'un compte sur Google. Accédez à la page de présentation de Google Analytics et connectezvous. Dans la page Paramètres Analytics, tapez le site à analyser à l'aide de la 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 le champ Code d'activation des statistiques; WebSite X5 l'insèrera dans le 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 = ((" == document.location.protocol)? " : " document.write(unescape("%3cscript src='" + gajshost + "googleanalytics.com/ga.js' type='text/javascript'%3e%3c/script%3e")); </script> 14

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. La création et l'envoi d'un SiteMap permet de s'assurer qu'un moteur de recherche, dans ce cas Google, connaisse toutes les pages présentes dans un site, y compris les URL qui ne peuvent être déterminés à travers la procédure normale de scanning. Le SiteMap assure donc un meilleur et plus rapide scanning d'un site de la part des moteurs de recherche. Vous pouvez utiliser le SiteMap pour communiquer aux moteurs de recherche même des informations supplémentaires comme la fréquence de mise à jour et l'importance relative des pages d'un site. Pour que ces données figurent aussi dans le SiteMap créé par WebSite X5, rappelez la fenêtre Propriétés de la page en cliquant sur création du plan et utilisez les options disponibles. Pour bien construire le SiteMap et pour qu'il fonctionne correctement, il faut 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 option, les pages du site publié sont protégées en désactivant le clic du bouton droit de la souris pour demander l'affichage du code source ou la copie des images présentes. Choix du menu Cette fenêtre permet de choisir entre la structure à menu vertical ou horizontal, si les rubriques du sous-menu doivent toujours être affichées à gauche de la page principale et si les rubriques du menu de premier niveau doivent être répétées au bas de la page sous forme de liens hypertextuels. Menu vertical Dans toutes les pages du site, une barre latérale contenant le menu du site est affichée à gauche de la page principale. Menu horizontal Dans toutes les pages du site, une barre supérieure contenant le menu du site est affichée en haut de la page principale ou au-dessus de la barre d'en-tête. 15

16 Voici les options disponibles: Affiche au bas de la page les rubriques du menu de premier niveau : les rubriques du menu de premier niveau sont répétées comme liens hypertextuels au bas de la page. Au bas de la page se trouve aussi le lien qui permet 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électionnée, sont affichés en bas à gauche de l'écran. Quel que soit le type de structure sélectionné, le menu peut être articulé en plusieurs niveaux et sous niveaux (jusqu'à 4 niveaux d'approfondissement), le menu vertical peut contenir au maximum 24 rubriques tandis que la limite pour 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 (avec menu vertical ou horizontal), WebSite X5 met à votre disposition un riche catalogue de modèles de style organisés par catégories. Les modèles définissent l'interface graphique, c'est-à-dire l'aspect, de votre site. Même s'ils ont la même structure de base, chaque modèle de style se différencie par les images d'arrière-plan, les éléments graphiques et les couleurs utilisés. La catégorie Animés regroupe les modèles qui présentent une barre de titre animée sous Flash. Les barres de titre de tous les modèles, sauf celles animées sous Flash, peuvent être personnalisées en insérant des textes, des images, des animations Flash, des Diaporamas, des objets HTML, des champs de recherche et des liens : les options nécessaires sont présentées dans la fenêtre Modification du modè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 Modèle personnalisé. Tout d'abord, pour définir le style graphique du site, sélectionnez une des options suivantes: Modèle personnalisé : pour définir votre propre style. 16

17 Modèle prédéfini : pour appliquer un modèle prédéfini choisi parmi les modèles proposés. Si vous décidez de choisir un modèle prédéfini, parcourez la liste de modèles disponibles : pour ouvrir et fermer les différentes catégories, double-cliquez sur celle-ci ou cliquez sur les signes (+) et (-) situés à gauche de chaque dossier. 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être Aperçu montre le modèle sélectionné. Pour chaque modèle, vous disposez de quatre Couleurs: pour afficher l'aperçu ou sélectionner la couleur, cliquez sur le bouton coloré correspondant dans le cadre Aperçu. En plus des quatre variantes de couleur prédéfinies, vous pouvez agir sur le curseur 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 768 pixels. Si vous voulez créer un site avec une résolution différente, choisissez le Modèle personnalisé. 17

18 Les fichiers graphiques utilisés pour les modèles prédéfinis sont enregistré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 caté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 ayant comme nom une valeur hexadécimale : pour continuer avec l'exemple, #73BBBE, #73BE93, #9883AD et #A4A2A9. Ces quatre sous-dossiers correspondent chacun à une variante de couleur du modèle. Si vous positionnez le curseur de la souris sur les boutons permettant de choisir la variante de couleur à appliquer, l'indication de la valeur hexadécimale (correspondant au nom du sous-dossier) est en effet affichée dans une tooltip. Vous avez trouvé un modèle graphique qui convient à vos exigences mais vous voudriez que l'image qui apparaît dans la barre de titre soit diffé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 qui vous intéresse (reportez-vous à la remarque précédente ): par exemple le sous-dossier Vortex. Créez une copie du sous-dossier pour conserver ainsi les fichiers d'origine : par exemple Vortex 2. Ouvrez le fichier relatif à l'image à modifier avec le programme d'édition graphique que vous préférez : par exemple le fichier Vortex 2/Hor/#73BBBE/top.jpg. Effectuez les modifications voulues et enregistrez-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 du logiciel et ajoutez l'indication du nouveau modèle : par exemple écrivez Vortex 2 après Vortex. Ainsi quand vous lancerez de nouveau WebSite X5, vous trouverez dans la liste des modèles disponibles celui que vous venez de créer (Vortex 2) et vous pourrez l'utiliser pour réaliser votre site. 18

19 Vous voulez ajouter de nouveaux modèles à la galerie de modèles graphiques? Vous avez créé de nouveaux modèles et vous voulez les mettre à la disposition de la communauté des utilisateurs de WebSite X5? Pour ce faire, rappelez l'adresse 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 que payants, que vous pourrez télécharger et utiliser pour votre projet. Vous pourrez par ailleurs enrichir ces archives des modèles que vous avez créés. N'oubliez donc pas de rendre visite périodiquement à WebSite X5 Templates pour voir les nouveautés : vous pouvez également souscrire le Flux RSS pour qu'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èrement personnalisé. La fenêtre présente deux éléments accolés pour travailler : une représentation schématique de la page servant à afficher la structure en fonction du type de menu choisi (dans la fenêtre Choix du menu). Pour sélectionner la zone de la page sur laquelle vous voulez travailler, cliquez simplement dessus. la liste des paramètres permettant de modifier l'aspect de la zone de page sélectionnée. 19

20 La page est partagée comme suit : 1. Barre de titre : c'est une section graphique pouvant contenir des éléments tel que le titre et le sous-titre du site, le logo de l'entreprise, les champs de recherche, les menus de service avec les liens, par exemple pour afficher 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 dans chaque page du site. Cette zone n'est affichée que si vous avez choisi la structure à menu horizontal dans la fenêtre Choix du menu. 3. Contenu de la page : c'est la zone destinée à accueillir le contenu des pages et, éventuellement, les sous-menus de navigation. Cette zone comprend aussi le menu vertical si vous avez choisi ce type de structure dans la fenêtre Choix du menu. 4. Pied de page : c'est le pied de page, une autre section principalement graphique qui a pour but de terminer visuellement la page. En général, cette zone contient des éléments comme des remarques, des avis de nonresponsabilité, le copyright, le code de Siret, des adresses 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 du site. Pour toutes les zones mentionnées ci-dessus, vous pouvez utiliser les options suivantes: Couleur : permet de définir la couleur d'arrière-plan pour la zone de la page sélectionnée en rappelant la fenêtre Couleur. Image : permet de définir une image (.jpg,.gif ou.png) à appliquer comme arrière-plan de la page sélectionnée. Pour la "barre de titre", vous pouvez choisir une animation Flash (.swf). Disposition : permet de définir s'il faut répéter ou non l'image utilisée comme arrière-plan de la cellule. L'image peut être répétée horizontalement, verticalement, ou dans les deux sens pour remplir tout l'espace disponible. Alignement : permet de choisir l'alignement de l'image sur la page. 20

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éfiler le 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 horizontal en choisissant entre Au-dessus de la barre de titre ou En dessous de la barre de titre. L'option suivante est disponible pour toutes les zones de la page, sauf pour l'"arrière-plan" : Largeur : indique la valeur exprimée en pixels de la largeur de la zone de la 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 de titre". La valeur définie pour la "barre de titre" est automatiquement appliqué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 optimiser l'affichage du site à 1024 x 768 pixels. Pour la structure à menu vertical (définie dans la fenêtre Choix du menu) et le "Contenu de la page", vous disposez aussi de l'option Largeur du menu permettant de définir la valeur en pixels de la colonne devant accueillir le menu de navigation. Cette valeur doit être définie en tenant compte de l'aspect graphique du site et de la largeur prévue pour les boutons dans la fenêtre Style du menu de premier niveau. La largeur du menu devrait être à peine supérieure à celle des boutons du menu de premier niveau. Pour obtenir un bon fonctionnement, la largeur du menu ne doit pas dépasser le double de la largeur des boutons du 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" : 21

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 la zone "Contenu de la page" (qui dépend de la largeur de la zone "barre de titre") moins la marge gauche et la marge droite. Est-ce que je peux décider librement l'emplacement du menu horizontal? Oui, selon l'aspect de la barre de titre et le nombre de rubriques de premier niveau du menu horizontal, vous pouvez utiliser les options permettant d'établir la position du menu. Vous pouvez tout d'abord décider de le placer au-dessus ou en dessous de la barre de titre à l'aide de l'option Position du menu, ensuite vous pouvez établir l'alignement à droite, au centre ou à gauche en modifiant les valeurs Marge gauche et Marge droite. Vous pouvez compléter la barre de titre de votre modèle en insérant des textes, des images, des animations Flash, des Diaporamas, des champs de recherche et des liens : les options nécessaires se trouvent dans la fenêtre : Modifier la bannière supérieure que vous pouvez rappeler en cliquant sur le bouton Suivant. Modification du modèle Pour rappeler cette fenêtre, permettant de personnaliser la barre de titre (ou bannière supérieure) et/ou le Pied de page (ou Footer), cliquez sur le bouton Suivant après avoir sélectionné le modèle voulu dans la fenêtre Choix du modèle ou avoir créé un modèle personnalisé à l'aide des options de la fenêtre Modèle personnalisé. La fenêtre Modification du modèle n'apparaît pas si vous décidez d'utiliser un modèle Animé, à savoir un modèle qui prévoit une animation Flash pour la barre de titre. 22

23 Les commandes nécessaires pour modifier le modèle sont présentées dans deux 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 de titre du modèle graphique en ajoutant des textes, des images, des animations, des Diaporamas, des objets HTML, des champs de recherche et les liens nécessaires. La fenêtre présente un éditeur graphique où s'affiche automatiquement l'image qui apparaît dans la barre de titre : l'image est affichée à l'échelle 1:1 et 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 commandes Couper et Copier. 23

24 Annuler [CTRL+ Z] Permet d'annuler la dernière opération. Mettre au premier plan Permet de mettre l'objet sélectionné au premier plan, à savoir devant les autres objets éventuellement superposés. Mettre au second plan Permet de mettre l'objet sélectionné en arrière-plan, à savoir derrière les autres objets éventuellement superposés. Associer un lien Permet de définir un lien vers le texte, l'image ou le diaporama sélectionné. Vous pouvez définir les paramètres du lien dans la fenêtre Insérer lien. Insérer texte Permet d'insérer un texte. Insérer image Permet d'insérer une image. Insérer animation Flash Permet d'insérer une animation Flash. L'animation insérée ne s'affiche que si vous ouvrez le site dans le Navigateur. Insérer Diaporama Permet d'insérer un Diaporama, à savoir une séquence d'images qui défilent automatiquement une après l'autre. Insérer champ de recherche Permet d'insérer un champ de recherche pour effectuer des recherches à l'intérieur du site. Insérer Code HTML Permet d'insérer un propre objet en tapant directement le code HTML relatif. Selon l'espace à disposition, il n'y a pas de limites au nombre d'objets pouvant être insérés dans la barre de titre et le pied de page du site. 24

25 Si vous sélectionnez directement l'image d'arrière-plan de la barre de titre, vous pouvez 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 graphique inséré comme arrière-plan de la barre de titre. Vous pouvez toutefois remplacer l'image présente par une autre image : vous pouvez utiliser les fichiers 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 de la barre de titre pour l'identifier plus facilement, l'ouvrir, le modifier avec un éditeur externe et enregistrer une copie qui remplacera l'original. Si vous sélectionnez un texte, vous pouvez intervenir sur les options du cadre Proprié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 en points du texte. Couleur de texte : permet de définir la couleur du texte dans la fenêtre Couleur. Couleur d'arrière-plan : permet de définir la couleur d'arrière-plan du texte dans la fenêtre Couleur. Si vous sélectionnez une image, vous pouvez intervenir sur les options du cadre 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 second fichier 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 transparence 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'image qui doit devenir invisible quand l'option Activer transparence est sélectionnée. Dans ce cas, l'outil "compte-gouttes" est particulièrement utile, car il permet de capturer la couleur directement à partir de l'image. 25

26 Tolérance : permet de définir le facteur de tolérance pour appliquer la transparence. Plus la valeur de tolérance est grande, plus la zone de l'image devenue transparente est grande. Comment faut-il faire pour insérer dans la barre de titre un bouton actif avec l'effet mouseover? Un bouton actif dans la barre de titre pourrait servir à établir un lien vers un message publicitaire, le choix de la langue de consultation, la connexion à 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 au bouton dans l'état "relâché". Si le bouton n'est ni carré ni rectangulaire vous pouvez le détourer facilement : choisissez une couleur d'arrière-plan uniforme et sélectionnez l'option Activer transparence pour la rendre invisible. Utilisez l'option Fichier image au passage de la souris pour charger la deuxième image relative au bouton. Les images graphiques étant chargées, le logiciel définira automatiquement l'effet mouseover. Sélectionnez l'image du bouton et, à l'aide de la commande Insérer lien, créez le lien nécessaire. Si vous sélectionnez une animation Flash, vous pouvez agir sur les options suivantes présentes dans le cadre Propriétés de l'animation Flash: Fichier animation : permet de sélectionner le fichier SWF relatif à l'animation Flash à insérer. Arrière-plan transparent : si vous sélectionnez cette option, l'arrière-plan de l'animation devient invisible. Si vous sélectionnez un Diaporama, vous pouvez agir sur les options présentes dans 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. 26

27 Ajouter : permet de sélectionner le fichier de l'image à insérer dans le Diaporama. La fenêtre Sélection fichier permet de sélectionner plusieurs fichiers simultanément. Supprimer... : permet de supprimer le fichier sélectionné dans la Liste des images à 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 suivant dans la Liste des images à afficher dans le Diaporama. Effet : permet de rappeler la fenêtre Effet d'entrée de la page permettant de définir l'effet d'entrée pour les images du Diaporama sélectionnées parmi celles 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 navigation est Microsoft Internet Explorer version 5.5 et suivantes. Avec les navigateurs qui utilisent comme moteur de rendering Gecko ou WebKit (Firefox, Safari, Chrome, etc.), les effets d'entrée sont automatiquement remplacés par un effet de fondu croisé. Afficher dans un ordre fortuit : si vous sélectionnez cette option, les images insérées dans le Diaporama sont reproduites dans un ordre fortuit et non pas dans l'ordre où elles apparaissent dans la Liste des images. Comment présenter simplement dans la barre de titre une série de bannières publicitaires à rotation? La bannière est une des formes publicitaires les plus répandues sur Internet : il s'agit d'une annonce conçue pour attirer l'attention de l'utilisateur et le pousser à cliquer sur le lien pour se connecter au site commercial qui présente l'offre. En général les bannières ont des formats standard et peuvent être des images (GIF, JPG), des programmes JavaScript ou 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 titre comme un objet Image ou un objet Flash : vous pouvez également insérer plusieurs bannières ou des bannières composées de plusieurs images qui défilent, 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) publicitaire(s) que vous voulez proposer. 27

28 Insérez toutes les images à travers un seul objet Diaporama et assurez-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 de la page et définissez la durée d'affichage de chaque image : vous pouvez prévoir une durée relativement brève pour l'affichage des images composant la même bannière publicitaire et un durée plus longue pour le passage à la première image d'une autre bannière. Si vous sélectionnez le champ de recherche, vous pouvez agir sur les options du cadre Propriétés de champ de recherche: Etiquette du bouton "Rechercher": permet de définir le texte à afficher sur le bouton qui lance la recherche. Police : permet de définir le type de caractère, le style et la taille en points du texte. Couleur de texte : permet de définir la couleur du texte dans la fenêtre Couleur. Couleur d'arrière-plan : permet de définir la couleur d'arrière-plan du texte dans la fenêtre Couleur. Couleur du texte bouton : permet de définir la couleur du texte du bouton dans la fenêtre Couleur. Couleur d'arrière-plan bouton : permet de définir la couleur de fond du bouton dans la fenêtre Couleur. Les résultats des recherches effectuées dans le site apparaissent dans des pages créées automatiquement par le programme : l'aspect graphique de ces pages est établi sur la base des paramètres de style des textes (voir Style de texte dans Paramètres avancés). Comment faut-il faire pour définir une image graphique complètement 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 champ de recherche que le bouton "Rechercher" afin de les rendre complètement invisibles. A ce stade, il suffit de superposer le champ de recherche à l'image graphique insérée comme tel ou comme faisant partie de la bannière. 28

29 Si vous sélectionnez le code HTML, vous pouvez utiliser les options suivantes du 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, toutes les barres de défilement apparaissent sur la page. Si vous tapez [DATE], la date courante est automatiquement affichée et sera constamment mise à jour. Par exemple, vous pouvez taper : "aujourd'hui c'est le [DATE]". Si vous tapez [NOW], vous affichez le jour courant. Par exemple, vous pouvez taper : "mis à jour le [NOW]". Si vous tapez [HOUR], vous affichez l'heure courante qui sera automatiquement mise à jour. Par exemple, vous pouvez taper : Il est [HOUR]". Pour les textes, les images et/ou les Diaporamas insérés, vous pouvez utiliser les options suivantes du cadre Effets graphiques de l'objet: Type d'effet : permet de sélectionner l'effet à appliquer sur l'objet sélectionné. Activer l effet : permet d'appliquer l'effet sélectionné à l'objet courant. Sur chaque objet texte, image et diaporama, vous pouvez appliquer plusieurs effets simultanément ; pour chaque effet, vous pouvez modifier différents paramètres: Effet Paramètres Ombre Diffusion : permet de définir jusqu'à quel point l'ombre doit être diffuse. Couleur : permet de définir la couleur de l'ombre à appliquer à l'aide de la fenêtre Couleur. Distance X : permet de définir jusqu'à quel point l'ombre doit être déplacée horizontalement par rapport à l'objet auquel elle est appliquée. Si vous tapez une valeur positive, vous obtenez un déplacement de l'ombre vers la droite ; en revanche, si vous tapez une valeur négative, vous obtenez un déplacement de l'ombre vers la gauche. 29

30 Distance Y : permet de définir jusqu'à quel point l'ombre doit être déplacée verticalement par rapport à l'objet auquel elle est appliquée. Si vous tapez une valeur positive, vous obtenez un déplacement de l'ombre vers le 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 reflet doit être diffus, à savoir quelle sera sa grandeur. Distance : permet de définir jusqu'à quel point le reflet doit être distant de l'objet auquel il est appliqué. Colorié Epaisseur : permet de définir la valeur en pixels de l'é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 lueur doit être diffuse. Couleur : permet de définir la couleur de la lueur à appliquer, à l'aide de la fenêtre Couleur. Bombé Profondeur : permet de définir jusqu'à quel point l'effet bombé doit être accentué. Diffusion : permet de définir jusqu'à quel point l'effet bombé doit être diffus. Angle : permet de définir l'angle de l'effet bombé à appliquer. Rotation Angle : permet de sélectionner la valeur de l'angle de rotation (effectué dans le sens des aiguilles d'une montre) à appliquer. Opacité Opacité : permet de saisir une valeur de 0 à 255 pour définir le degré d'opacité de l'image. Plus les valeurs se rapprochent du 0, plus l'opacité de l'image devient transparente. Antialias Antialias : permet de saisir une valeur pour définir jusqu'à quel point l'effet d'antialiasing doit être diffus. L'antialiasing sert à rendre les bords de l'objet moins dentelés. 30

31 Pour tous les objets insérés, vous pouvez enfin afficher et utiliser les options suivantes du cadre Position et taille : Coordonnée X : permet d'afficher la coordonnée sur l'axe X qui identifie la position de l'objet sélectionné. Vous pouvez modifier cette coordonnée et déplacer l'objet horizontalement en tapant ou définissant avec le curseur la valeur voulue. Coordonnée Y : permet d'afficher la coordonnée sur l'axe Y qui identifie la position de l'objet sélectionné. Vous pouvez modifier cette coordonnée et déplacer l'objet verticalement, en tapant ou définissant avec le curseur la valeur voulue. Largeur : permet d'afficher la largeur de l'objet sélectionné. Vous pouvez modifier ce paramètre, et élargir ou rétrécir l'objet, en tapant ou en définissant avec le curseur la valeur voulue. Hauteur : permet d'afficher la hauteur de l'objet sélectionné. Vous pouvez modifier 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 pour le champ de recherche : dans ce cas, en effet, la hauteur est automatiquement 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 apparaissent : ces poignets permettent de modifier la taille et la position de l'objet. Après avoir sélectionné un objet, vous pouvez le déplacer d'un pixel à la fois à l'aide des touches fléchées, ou de 10 pixels à la fois en maintenant 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, cliquez sur le bouton Tester. 31

32 La section Inférieure de cette fenêtre permet de personnaliser le pied de page (ou footer) du modèle graphique sélectionné. Pour personnaliser le pied de page, utilisez les commandes illustrées pour la barre de titre. 32

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, de créer le plan complet du site. Le plan est la structure arborescente selon laquelle le site est articulé : la définition de cette structure, sans contenus, est indispensable pour pouvoir cré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 de pages liées entre elles à travers le menu : il faut donc insérer toutes les pages en veillant à organiser les différents niveaux du menu. Voici les commandes permettant 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 et 24 rubriques au maximum pour le premier niveau. Menu horizontal : peut contenir jusqu'à 4 niveaux d'approfondissement et le nombre maximum de rubriques de premier niveau dépend du modèle graphique choisi. Nouvelle page [CTRL+ N]: permet de créer une nouvelle page qui sera automatiquement placée au niveau où vous êtes en train de travailler. Supprimer... [CANC]: permet de supprimer la page ou le niveau sélectionné. Renommer [F2]: permet de modifier le nom de la Page d'accueil, de la page ou du niveau sélectionné. Il est conseillé de bien choisir les noms des pages et des niveaux puisque ces noms seront repris dans le menu de navigation comme titres des pages et noms des fichiers HTML associés aux pages, à moins qu'il ne soit spécifié différemment dans la fenêtre Propriétés de 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/niveau précédent. 33

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 directement sur le plan affiché dans la fenêtre appropriée : sélectionnez la rubrique voulue et faites-la glisser sur la nouvelle position (Drag&Drop). Après l'articulation du plan, WebSite X5 propose de composer chaque page en les présentant l'une après l'autre. Vous pouvez utiliser le plan pour passer directement à la fenêtre du programme permettant de travailler sur une page déterminée : pour cela, double-cliquez sur la rubrique correspondante. Si vous ajoutez un Blog à l'aide de la section Paramétrages avancés, le programme ajoute automatiquement la rubrique Blog dans le plan du site. Comme toutes les pages, même celle relative au Blog peut devenir invisible sur le menu à l'aide de l'option appropriée. La fenêtre qui montre la structure arborescente du plan du site contient les boutons de commande suivants: Couper Permet de couper la page sélectionnée pour la coller par la suite. Copier Permet de copier la page sélectionnée pour la coller par la suite. Coller Permet de coller la page précédemment copiée ou coupée à l'aide des commandes correspondantes. Pour créer le plan, vous pouvez aussi utiliser les commandes Couper, Copier, Coller, Effacer du menu contextuel qui apparaît quand vous cliquez directement sur les rubriques du plan. 34

35 Vous devez réaliser dans le site B une page identique à celle que vous avez créée dans le site A? Dans ce cas, vous ne devez pas refaire la page en partant de zéro. Lancez 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. A ce stade, déplacez le curseur dans la seconde fenêtre, affichez le Plan du projet B et collez la page. Vérifiez que les liens présents dans la page copiée fonctionnent correctement. Pour ne pas vous confondre entre les projets, sachez que le nom du projet ouvert apparaît dans la barre de titre de la fenêtre du programme. Page invisible dans le menu Si cette option est activée, la page ou le niveau sélectionné ne sont pas insérés dans le menu de navigation. Lorsqu'un niveau est invisible, toutes les pages qu'il contient deviennent automatiquement invisibles. Les pages invisibles sur le menu peuvent être utilisées comme pages d'approfondissement et être rappelées par des liens internes. Il est nécessaire de créer au moins un lien vers les pages invisibles. La Page d'accueil peut aussi disparaître du menu : il est conseillé d'utiliser cette possibilité seulement si vous avez l'intention de mettre un lien vers cette page à d'autres endroits du site, par exemple dans la barre de titre animée d'un modèle personnalisé. Page protégée Permet d'ouvrir la fenêtre Page protégée permettant de définir une page proté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 contenant différentes pages protégées par la saisie d'un Nom utilisateur et d'un mot de 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'indiquer la zone protégée à laquelle la page appartient en cliquant simplement sur la zone voulue. Pour créer de nouvelles zones réservées, rappelez la fenêtre Zone réservée dans la section Paramètres généraux. 35

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 page Permet de rappeler la fenêtre Effet d'entrée de la page pour choisir l'effet d'entrée qui apparaît quand la page s'affiche. 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 navigation est Microsoft Internet Explorer version 5.5 et suivantes. Propriétés de la page Elle est activée quand vous sélectionnez une page insérée dans le plan et permet de rappeler la fenêtre Propriétés de la page permettant de définir une série de propriétés. Voici les options disponibles dans la section Base: Titre complet : permet de définir un titre différent de celui du plan du site. Le nom que vous donnez à la page lors de la construction du plan est repris comme rubrique dans le menu de navigation ; l'éventuel titre complet indiqué dans les Propriétés de la page est en revanche affiché comme titre effectif de la page. Cette option n'est pas disponible pour la Page d'accueil. Description : Permet d'insérer une description spécifique pour la page, remplaçant la description générale définie pour le site dans le champ de la fenêtre Paramètres généraux. La description doit être courte et précise : elle est insérée comme valeur du Méta Tag <description> dans le code XHTML de la page et est utilisée par les Moteurs de recherche pour l'indexation. 36

37 Mots-clés pour la recherche : Permet d'insérer une série de mots-clés spécifiques pour la page, remplaçant les mots-clés définis pour le site dans 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 la page et sont utilisés par les Moteurs de recherche pour l'indexation. Nom du fichier créé : permet de définir le nom du fichier HTML correspondant à la page. A moins qu'il ne soit spécifié différemment, comme nom du fichier HTML le programme prend automatiquement le nom donné à la page lors de sa construction. Donnez des noms brefs et significatifs aux fichiers pour obtenir des adresses simples et faciles à mémoriser, cela sera également positif pour l'indexation effectuée par les Moteurs de recherche. Cette option n'est pas disponible pour la Page d'accueil. Voici les options disponibles dans la section Avancées : Fréquence de mise à jour : permet de définir avec quelle fréquence la page est mise à jour. Ce paramètre est indiqué dans le SiteMap créé. Priorité des contenus : permet d'affecter des points à la page, pour indiquer son importance par rapport aux autres pages du site. Ce paramètre est indiqué dans le SiteMap créé. Le SiteMap est un fichier XML qui contient la liste des pages d'un site. La création et l'envoi d'un SiteMap permet de s'assurer qu'un Moteur de recherche, dans notre cas Google, connaisse toutes les pages présentes dans 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 aussi des informations supplémentaires comme la fréquence de mise à jour et l'importance des pages d'un site ; il assure un meilleur et plus rapide scanning d'un site de la part des moteurs de recherche. Pour que WebSite X5 crée le SiteMap du site, il faut activer l'option Créer automatiquement le SiteMap présente dans la section Expert de la fenêtre Paramètres généraux. 37

38 Extension du fichier créé : permet de définir l'extension qui accompagnera le fichier relatif à la page. Le programme propose par défaut l'extension.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 éventuellement utilisée pour la page Intro. Il est utile de pouvoir modifier l'extension du fichier index comme PHP ou ASP ou si votre fournisseur d'accès n'accepte comme première page visible de site que des fichiers index.htm. 38 Si la page est protégée, elle sera automatiquement enregistrée sous le format.php. Code à insérer dans l'en-tête de la page : permet de définir le nombre de 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 lignes du code à insérer dans la section <body> du code HTML relatif à la page. Les options Code à insérer dans l'en-tête de la page et Code à insérer dans le tag BODY sont utiles quand, par exemple, vous voulez relier des feuilles des styles (CSS) ou quand vous devez lancer des évènements sur l'onload de la page. Notamment, pour le bon fonctionnement de certains JavaScript, qui peuvent être insérés à travers l'objet HTML approprié, il faut entrer des lignes de code spécifiques dans la section <head> et dans la section <body> du fichier HTML de la page. Propriétés du niveau Elle est activée quand vous sélectionnez un niveau inséré dans le plan et permet de rappeler la fenêtre Propriétés du niveau permettant de définir une 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 activée, le menu Popup relatif à la rubrique de niveau n'apparaît pas au passage de la souris.

39 Lien au clic sur la rubrique de niveau : Permet de définir un lien vers la rubrique de niveau à l'aide de la fenêtre Lien. Vous avez une longue liste de produits et vous voulez que le menu Popup ne soit pas trop grand? Procédez comme suit : Créez le niveau "Produits" en insérant à l'intérieur une page pour chaque produit : "Produit 1", "Produit 2", etc... et une page initiale "Liste des produits" qui servira de menu graphique. Sélectionnez le niveau "Produits" et rappelez la fenêtre Propriétés du niveau: activez l'option Ne pas afficher le menu Popup de ce niveau et définissez comme Lien au clic sur la rubrique de niveau le lien vers la page "Liste des produits". Sélectionnez la page "Liste des produits" et, à l'aide de la commande appropriée, rendez-la invisible dans le menu. N'oubliez pas de sélectionner l'option Affiche un sous-menu contenant la liste des pages du niveau courant présente dans la fenêtre Choix du menu. Suivez ces étapes pour obtenir les résultats suivants : dans le menu de navigation, vous verrez la rubrique "Produits" mais au passage de la souris le menu Popup correspondant n'apparaîtra pas. Quand vous cliquerez sur "Produits", vous afficherez la page "Liste des produits" et le sousmenu 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 Plan du site. Les rubriques du plan du site sont des liens actifs vers une page : le plan représente donc un outil utile d'orientation et de navigation mis à la disposition 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 les textes et les images des pages (voir fenêtre Style des liens) ou dans le menu situé au bas de la page où le programme insère automatiquement le lien vers le plan (pour l'activer, sélectionnez l'option Afficher au bas de la page les rubriques 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 programme peut le créer sous la forme d'un SiteMap XML relié dans le code HTML des pages à travers le Méta Tag <sitemap>. Dans ce cas, le SiteMap est un fi- 39

40 chier XML contenant la liste des pages d'un site permettant de s'assurer que les Moteurs de recherche analysent toutes les pages. Vous pouvez utiliser le SiteMap pour communiquer aux moteurs de recherche certaines informations utiles 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 aucun 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'option Créer automatiquement le SiteMap présente dans la section Avancées des Paramètres généraux. Pour que les informations concernant la fréquence de mise à 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 de la 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 rapide scanningweb. Si l'on analyse la structure, on remarque que : "La société", "Les produits", "Les services", "Achats" et "Contacts" sont les rubriques de premier niveau : dans le navigateur, elles sont affichées comme des rubriques du menu principal (horizontal ou vertical) représentant la navigation fixe qui est identique dans chaque page. Pour personnaliser l'aspect graphique des rubriques de premier niveau, vous pouvez utiliser l'option avancée Style du menu de premier niveau. Si vous cliquez sur la section "La société", dans le navigateur les pages "Qui sommes-nous", "Siège" et "Distributeurs" seront affichées comme rubrique du menu Popup. Les pages "Formulaires Distributeurs" et "Listes des prix Distributeurs" ne figurent pas dans le menu Popup car elles ont été définies comme invisibles à l'aide de l'option correspondante. Par ailleurs, la page "Listes des prix Distributeurs" sera protégée par un mot de passe. Pour personnaliser l'aspect graphique des rubriques du menu Popup, vous 40

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 rubriques d'un menu Popup mais comme elles correspondent à des niveaux, elles entraînent l'affichage d'un autre menu Popup. Dans la fenêtre Choix du menu si l'option Affiche un sous-menu contenant la liste des pages du niveau courant est activée, quand vous affichez dans le navigateur la page "WebSite X5", le programme affiche un sousmenu vertical contenant les rubriques de même niveau : "WebSite X5 Evolution" et " WebSite X5 Compact". Pour personnaliser l'aspect graphique du sous-menu, vous pouvez utiliser l'option avancée Style de sous menu. 41

42 Etape 3 Création de la page Cette fenêtre permet de créer la page courante en définissant sa mise en page et l'insertion des contenus. Le titre de la page sur laquelle vous travaillez est indiqué comme Page courante. La fenêtre propose les sections suivantes : une représentation schématique de la page permettant de définir la mise en 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 la grille de mise en page. Définition de la mise en page Pour rendre plus intuitive la mise en page des contenus, WebSite X5 propose une 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 à votre gré le nombre de lignes et de colonnes selon le nombre de cellules nécessaires. Cette grille de mise en page ne sera pas visible lors de la navigation avec le Navigateur. 42

43 Chaque cellule de la grille peut contenir un seul objet, mais vous pouvez mettre le même objet dans plusieurs cellules contiguës horizontalement ou verticalement 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 montre l'icône correspondant au type d'objet sur un arrière-plan composé de lignes obliques grises ; si elle contient un objet qui a déjà été construit, elle montre l'icône correspondant 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 bordure bleue. Les commandes de la barre d'outils permettent de définir la structure et les paramètres graphiques de la grille de mise en page. Voici les commandes disponibles 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 de l'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 objet déjà inséré dans une cellule et permet de rappeler la fenêtre Format de la cellule pour définir l'aspect graphique de la cellule courante. Alignement de l'objet : elle est activée quand vous sélectionnez un objet déjà inséré dans une cellule et permet d'aligner l'objet en Haut/Centre/Bas et à Gauche/Centre/Droite par rapport à la cellule. Elargir l'objet d'une colonne : elle est activée quand vous sélectionnez un objet déjà inséré dans une cellule et permet de faire en sorte que l'objet occupe une colonne supplémentaire. Elargir l'objet d'une ligne : elle est activée quand vous sélectionnez un objet déjà inséré dans une cellule et permet de faire en sorte que l'objet occupe une ligne supplémentaire. Réduire l'objet d'une colonne : elle est activée quand vous sélectionnez un objet qui occupe plusieurs colonnes et permet de faire en sorte qu'il occupe une colonne de moins. Réduire l'objet d'une ligne : elle est activée quand vous sélectionnez un objet qui occupe plusieurs lignes et permet de faire en sorte qu'il occupe une ligne de moins. 43

44 Ajouter une ligne : permet d'ajouter une ligne au-dessous de celle indiquée dans la boîte de dialogue. Vous pouvez créer des tableaux composés de 28 lignes au maximum. Ajouter une colonne : permet d'ajouter une colonne. Vous pouvez créer des tableaux composés de 6 colonnes au maximum. Supprimer une ligne : permet de supprimer la ligne sélectionnée dans la boî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 le représente dans la liste des Objets disponibles, de la déplacer et relâcher sur la grille de mise en page, dans la cellule voulue. Chaque cellule de la grille de mise en page peut contenir un seul objet, mais un objet peut occuper plusieurs cellules adjacentes aussi bien horizontalement que verticalement. Vous pouvez en effet faire glisser l'icône de l'objet sélectionné sur la bordure des cellules: ainsi l'objet occupera les deux cellules. Vous pouvez aussi sélectionner 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'objet d'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, vous affichez un menu contextuel comprenant les commandes Couper, Copier, Coller, Effacer et Format de la cellule. Ces commandes permettent de créer une copie d'un objet en le collant dans une autre cellule ou une autre page, ou bien de supprimer un objet. Pour supprimer un objet de la page, faites-le glisser à l'extérieur de la page ou ap- 44

45 puyez sur la touche SUPPR. De toute façon, quand vous insérez un second objet dans une cellule, le premier est automatiquement supprimé. Les commandes Copier style et Coller style du sous-menu de la commande Format de la cellule permettent d'appliquer automatiquement à une cellule les prédispositions définies dans la fenêtre Format de la cellule pour une autre cellule. Pour changer l'ordre des objets, faites glisser un objet déjà inséré sur une cellule occupée par un autre objet. Après avoir inséré un objet, pour rappeler la fenêtre permettant de définir son contenu, double-cliquez sur sa cellule ou sélectionnez l'objet et doublecliquez sur le bouton Contenu objet. Après avoir créé un objet, quand vous revenez à la présente fenêtre, la cellule de la grille précédemment sélectionné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 de mise en page: sachez néanmoins qu'une cellule vide correspond à un espace vide sur votre page. Pour mieux comprendre comment exploiter au mieux les possibilités de mise 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 en partageant 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 paramètre ne peut pas être modifié manuellement. Toutes les cellules placées sur la même rangée de la grille de mise en page ont la même hauteur: par défaut, cette valeur est déterminée par l'objet le plus haut parmi ceux contenus dans ces cellules. Les objets insérés sont automatiquement redimensionnés en fonction de la taille des cellules de la grille de mise en page. 45

46 Objet Texte Cette fenêtre propose un éditeur de texte qui vous permet de taper et formater 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 commandes Couper et Copier. Avant de coller le texte, le programme lui enlève toutes les informations éventuellement associées à l'origine et lui attribue celle définies dans l'éditeur. Coller spécial Permet de coller le texte précédemment coupé ou copié à l'aide des commandes Couper et Copier. Le texte collé garde toutes les informations d'origine. Grâce aux commandes Couper, Copier et Coller vous pouvez reprendre des 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. 46

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 image Permet 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 automatiquement redimensionnées si leur taille dépasse celle de la cellule de la grille de mise en page. Par ailleurs, vous pouvez redimensionner librement les images insérées à l'aide des poignets de sélection : pour les mises en page particulières, il est toutefois conseillé d'utiliser l'objet Image. Insérer objet OLE Permet d'insérer dans le texte un objet créé par un autre logiciel compatible avec la technologie OLE 2.0 (Object Linking and Embedding): tableaux réalisés avec Excel, textes composés sous 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'objet pour rappeler le programme que vous avez utilisé pour le créer. Insérer équation Permet de rappeler l'application Equation Editor qui permet de composer n'importe quelle formule mathématique : la formule est aussitôt importée comme objet OLE à l'intérieur du texte. Après l'exportation du site, l'objet OLE est géré comme une image.png pour maintenir les éventuelles transparences : il est conseillé de ne pas insérer des objets trop grands. Pour utiliser la commande Insérez équation, vous devez installer sur votre ordinateur Equation Editor, à savoir un utilitaire de Word. Activer code HTML Elle permet d'insérer directement le code HTML à l'intérieur de la page de texte. Pratiquement les caractères < et > ne sont pas interprétés comme majeur et mineur, et le texte entre les deux est considéré un TAG HTML Paramètres de RollOver Permet de définir le RollOver sur le texte : ainsi le texte n'est plus statique mais il défile. Pour définir les options du RollOver, rappelez la fenêtre Paramètres de RollOver. 47

48 Adapter à la largeur de la cellule Permet de simuler l'aspect que prendra le texte en fonction de la taille de la cellule de mise en page qui l'accueillera. Choix des polices Permet 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 navigue sur votre site, elle sera automatiquement remplacée par une police semblable. Taille de la police Permet 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 texte Permet de sélectionner, dans la fenêtre Couleur, la couleur à appliquer au texte sélectionné. Couleur d'arrière-plan du texte Permet de définir, dans la fenêtre Couleur, la couleur de l'arrière-plan du texte sélectionné. Liste à puces Permet de créer une liste à puces contenant des rubriques. Alignement à gauche Permet d'aligner à gauche le texte sélectionné. Alignement au centre Permet d'aligner au centre le texte sélectionné. Alignement à droite Permet d'aligner à droite le texte sélectionné. Alignement justifié Permet de justifier le texte sélectionné. 48

49 Disposer le texte à droite Elle est activée quand vous sélectionnez une image insérée dans le texte et permet de faire défiler le texte sur le côté droit de l'image. Disposition normale Activée par défaut, elle fait en sorte que l'image reste insérée dans le flux du texte comme un mot quelconque. Disposer le texte à gauche Elle est activée quand vous sélectionnez une image insérée dans le texte et 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 contextuel qui propose de nouveau les commandes : Annuler, Couper, Copier, Coller, 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 pouvez agir sur : Activer : permet d'activer le RollOver sur le texte et de définir la Hauteur du cadre où le texte apparaîtra. Modalité : permet de définir comment le texte défilera. Vous pouvez choisir parmi les options suivantes: Fixe, Défilement continu, Défilement unique et Alterné. Direction : permet de définir la direction de défilement du texte. Le défilement 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'interrompre le défilement au passage de la souris (en sélectionnant l'option Arrê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 est horizontal (direction: vers la gauche ou la droite), l'effet est meilleur si l'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'activer le RollOver en veillant à : 49

50 établir la Hauteur de la cellule en définissant une valeur en pixels infé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 composer un objet Image, d'effectuer des opérations de retouches photo à l'aide de l'éditeur approprié et de définir des options d'affichage particulières comme le 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'éditer l'objet Image. Pour sélectionner un fichier graphique, cliquez sur le bouton pour parcourir 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 cliquez sur le bouton Modifier, vous rappelez l'editeur Graphique interne permettant 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'image ne pourra pas être affichée. 50

51 Lien : permet de définir un lien vers l'image. Vous pouvez définir les configurations du lien en appelant la fenêtre Lien. Les paramètres suivants sont disponibles dans la section Options de sauvegarde : Qualité JPG : permet de définir le niveau de qualité à maintenir lors de la conversion de l'image en JPG. Toutes les images importées sont automatiquement transformées dans le format JPG : plus le taux de compression sera haut, moins la qualité sera maintenue. Méthode de réduction : permet de choisir la méthode de réduction à appliquer lors de l'enregistrement du fichier au format JPG. Vous pouvez choisir une des méthodes suivantes : Bilinéaire : c'est la méthode de réduction la plus rapide mais elle permet de maintenir une qualité de l'image inférieure par rapport aux autres méthodes proposées. Decimate (moyen) : cette méthode permet d'obtenir, en termes de vitesse et qualité, des performances intermédiaires par rapport aux autres méthodes proposées. Bicubic (plus lent, plus précis) : c'est la méthode de réduction la plus lente, 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 de compression défini. La conversion au format JPG est effectuée même si l'image a une taille supérieure à celle de la cellule de la grille de mise en page et si elle est modifiée à l'aide de l'editeur graphique. Dans tous les autres cas, l'image est copiée tel quel. Cela est nécessaire pour maintenir l'effet de transparence appliqué aux images GIF. Pour les images insérées, la barre d'outils d'internet Explorer est automatiquement désactivée : cette barre d'outils présente généralement les options : Sauvergarder Image, Imprimer Image, Envoyer Image par , Ouvrir le dossier d'images. Les commandes de la section Affichage permettent de définir certaines options d'affichage pour obtenir une vue d'ensemble de l'image avec des effets zoom et de déplacement. 51

52 Redimensionnement automatique de l'image : activée par défaut, cette option redimensionne automatiquement l'image pour l'adapter aux dimensions de la cellule de la grille de mise en page. Déplacement manuel de l'image agrandie : si vous sélectionnez cette option, vous pouvez déplacer l'image à l'aide d'un clic pour mettre en premier plan 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 de déplacement le Déplacement libre, les dimensions de l'image sont réduites en fonction de celles de la cellule de la grille de mise en page puis recalculées selon le Facteur d'agrandissement défini (par exemple, doublées pour un facteur d'agrandissement défini sur 200 %). L'image ainsi agrandie sera donc plus grande que la zone d'affichage : en bas à droite, l'icône en forme de main indique qu'il faut cliquer sur l'image et la faire glisser pour la déplacer horizontalement ou verticalement. 2. Si vous définissez comme Modalités de déplacement Photo panoramique horizontale, vous ne pourrez faire glisser l'image que horizontalement. Pour bien exploiter cet effet, la base de l'image doit être beaucoup plus grande que sa hauteur. Vous devez par ailleurs indiquer dans le champ Hauteur la valeur en pixels de la hauteur de l'image. 3. Comme dans le cas précédent, si vous définissez comme Modalités de déplacement Photo panoramique verticale, vous ne pouvez faire glisser l'image que verticalement. Vous devez utiliser des images dont la hauteur est beaucoup plus grande que la base et définir dans le champ Hauteur la valeur en pixels à maintenir dans la cellule de la grille de mise en page concernée. Déplacement automatique de l'image agrandie : si vous sélectionnez cette option, vous pourrez déplacer l'image en passant simplement la souris. Les considérations données pour le déplacement manuel sont également valables pour cet effet : dans ce cas, en bas à droite de l'image vous verrez le curseur 52 ; vous pourrez par ailleurs sélectionner l'option Mou-

53 vement automatique continu qui fait en sorte que l'image se déplace continuellement pendant son affichage. Zoom Image : si vous sélectionnez cette option, vous pourrez agrandir ou réduire l'image par un clic. Dans ce cas, le programme crée automatiquement deux copies de l'image insérée : la première copie à une taille identique à celle de la cellule de la grille de mise en page ; en revanche, la deuxième copie a la taille de la première copie multipliée par le Facteur d'agrandissement défini. Quand vous ouvrez la page, vous verrez l'image plus petite et une icône en bas à droite indiquant la possibilité de l'agrandir : quand vous cliquez sur cette icône, l'image est agrandie et le curseur se transforme pour indiquer qu'un second clic entraînera la réduction de l'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 trois colonnes qui occupe toute la largeur de la cellule. Bien évidemment, vous pouvez ajouter ou supprimer des lignes et des colonnes, définir les dimensions, unir et séparer les cellules pour créer des tableaux plus ou moins complexes. 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 commandes correspondantes. Avant de coller le texte, le programme lui enlève 53

54 toutes les informations éventuellement associées à l'origine et lui attribue celle définies dans l'éditeur. Coller spécial Permet de coller le texte précédemment coupé ou copié à l'aide des commandes Couper et Copier. Le texte collé garde toutes les informations d'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électionnés. Vous pouvez définir les configurations du lien en appelant la fenêtre Lien. Insérer image Permet d'insérer une image (au format JPG, GIF, PNG, BMP, DIB, RLE, WMF) dans la cellule du tableau. Vous pouvez redimensionner librement les images insérées à l'aide des poignets de sélection. Insérer objet OLE Permet d'insérer dans la cellule du tableau un objet créé à l'aide d'un programme d'application externe qui supporte la technologie OLE 2.0 (Object Linking and Embedding): tableaux réalisés avec Excel, textes composés sous 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'objet pour rappeler le programme que vous avez utilisé pour le créer. Insérer équation Permet de rappeler l'application Equation Editor qui permet de composer n'importe quelle formule mathématique : cette formule est ensuite importée comme objet OLE dans la cellule du tableau. Après l'exportation du site, l'objet OLE est géré comme une image.png pour maintenir les éventuelles transparences : il est conseillé de ne pas insérer des objets trop grands. Pour utiliser la commande Insérez équation, vous devez installer sur votre ordinateur Equation Editor, à savoir un utilitaire de Word. 54

55 Activer code HTML Elle permet d'insérer directement le code HTML à l'intérieur de la page de texte. Pratiquement les caractères < et > ne sont pas interprétés comme majeur et mineur, et le texte entre les deux est considéré un TAG HTML. Paramètres de RollOver Permet de définir le RollOver sur le texte : ainsi le texte n'est plus statique mais il défile. Pour définir les options du RollOver, rappelez la fenêtre Paramètres de RollOver. Ajouter une ligne Permet d'ajouter une ligne après celle où se trouve le curseur. Ajouter une colonne Permet d'ajouter une colonne après celle où se trouve le curseur. Supprimer la ligne courante Permet de supprimer la ligne sur laquelle se trouve le curseur. Supprimer la colonne courante Permet de supprimer la colonne sur laquelle se trouve le curseur. Fusionner les cellules Permet d'unir plusieurs cellules adjacentes pour en former une seule. Séparer les cellules Permet de séparer la cellule sélectionnée en deux cellules adjacentes horizontalement. Choix des polices Permet de choisir le type de police à utiliser. Taille de la police Permet 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 texte Permet de définir, dans la fenêtre Couleur, la couleur à appliquer au texte sélectionné. 55

56 Couleur d'arrière-plan du texte Permet de définir, dans la fenêtre Couleur, la couleur de l'arrière-plan de la cellule où se trouve le curseur. Style de la bordure de la cellule Permet de définir, dans la fenêtre appropriée, le style de la bordure de la cellule du tableau. Vous pouvez définir aussi bien la couleur de chaque côté des cellules, que l'épaisseur en pixels des raies qui délimitent les lignes et les colonnes : les modifications effectuées sont affichées dans la fenêtre Aperçu. Alignement à gauche Permet d'aligner à gauche le texte sélectionné. Alignement au centre Permet d'aligner au centre le texte sélectionné. Alignement à droite Permet d'aligner à droite le texte sélectionné. Alignement en haut Permet d'aligner en haut le texte sélectionné. Alignement au milieu Permet d'aligner au centre verticalement le texte sélectionné. Alignement en bas Permet d'aligner au bas le texte sélectionné. En cliquant sur le bouton droit de la souris, vous rappelez un menu contextuel qui propose de nouveau les options Annuler, Couper, Copier, Coller, Coller spécial, Effacer ainsi que les options : Hauteur des lignes Permet de définir, dans la fenêtre appropriée, la valeur en pixels correspondant à la hauteur des lignes sélectionnées. Si vous définissez la valeur 0, les lignes prennent automatiquement la hauteur minimum nécessaire pour afficher le contenu inséré. Largeur des colonnes Permet 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 chaque cellule en positionnant le curseur sur les bordures et en les faisant glisser jusqu'à la taille voulue en maintenant enfoncé le bouton gauche de la souris. 56

57 Si vous sélectionnez une cellule et que vous déplacez la bordure gauche et/ou droite, vous modifiez uniquement la taille de la cellule courante. Disposition image Permet 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'image reste 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 vide et ne sera pas affiché. Objet Animation Flash Cette fenêtre permet de choisir le fichier à utiliser pour composer l'objet Animation Flash. L'animation Flash peut être insérée en important soit un fichier présent sur l'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 parcourir les ressources disponibles et déterminez un fichier au format SWF. Dans le second cas, sélectionnez l'option Fichier sur Internet et tapez dans le champ 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 de Macromedia Flash. Voici les options disponibles pour l'animation insérée : Texte alternatif : permet d'insérer le texte qui remplace l'animation Flash quand celle-ci ne peut pas être affichée. 57

58 Version Player Flash : permet de définir la version du Player Flash qui affichera l'animation (seulement pour Internet Explorer). Arrière-plan transparent : si cette option est activée, elle permet de rendre 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. En fonction 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 un code JavaScript pour éviter que l'activation du contrôle soit demandée pendant la navigation avec Internet Explorer. Objet Vidéo/Son Cette fenêtre permet de choisir le fichier à utiliser pour composer l'objet Vidéo/Son. Selon la ressource à importer, vous pouvez insérer l'objet Vidéo/Audio de diffé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 le fichier 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 le champ approprié l'adresse à laquelle la ressource est déjà disponible enligne. Code HTML vidéo YouTube : quand cette option est activée, il faut taper dans 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 dimensions d'origine sont modifiées en fonction des paramètres de WebSite X5. Pour mieux contrôler les dimensions, il est conseillé d'importer le vidéo YouTube à travers l'objet Code HTML et non pas à travers l'objet Vidéo. Pour afficher l'aperçu de l'objet vidéo/son importé, sélectionnez l'option Aperçu dans la fenêtre appropriée. 58

59 Pour afficher le fichier au format RM et RA, le programme utilise le lecteur RealVideo ; en revanche, pour afficher le fichier au format QuickTime (MOV et QT), il utilise le lecteur QuickTime Player : si ces lecteurs ne figurent pas sur l'ordinateur, le logiciel propose de les installer. Pour tous les autres formats vidéo, le programme utilise Microsoft Windows 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 son ne pouvant pas être affiché. Afficher la barre d'outils : permet d'afficher une barre d'outils contenant toutes 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 ou seulement la Largeur de la barre de contrôle du son. Pour définir une bande sonore dans une page du site, insérez un objet Vidéo/Son dans une ligne de la grille de mise en page qui ne doit contenir aucun autre objet, choisissez le fichier sonore à utiliser et désactivez l'option Afficher la barre d'outils. Objet Galerie d'images Cette fenêtre permet de créer effectivement l'objet Galerie d'images. La Galerie d'images présente une série de miniatures sur lesquelles vous pouvez cliquer pour afficher l'image agrandie. Les commandes nécessaires pour créer la Galerie d'images sont présentées dans trois sections: section Liste section Miniature section Paramètres Les commandes de la section Liste de cette fenêtre permettent de composer une liste d'images à utiliser dans la Galerie d'images. Tous les fichiers graphiques importés figurent dans la Liste des images: si vous sélectionnez un fichier dans la liste, vous pouvez voir son aperçu dans la fenêtre appropriée. 59

60 Les commandes disponibles pour composer la Galerie d'images son: Ajouter : permet d'ajouter le fichier de l'image à insérer dans la Galerie d'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 des images 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 suivant dans la Liste des images qui apparaît dans la Galerie d'images. Modifier : permet d'ouvrir l'editeur graphique interne pour modifier l'image sélectionnée dans la Liste des images. Pour chaque image importée, vous pouvez définir plusieurs paramètres, figurant dans la section Options dimage : Texte alternatif : permet d'insérer le texte qui apparaîtra quand l'image ne pourra pas être affichée. Lien : Si vous cliquez sur le bouton, vous rappelez la fenêtre Lien qui permet de définir le lien à associer à l'image sélectionnée dans la Liste des images. Ce nouveau lien remplace celui de l'image agrandie même si l'option Crée lien pour agrandir image est sélectionnée. 60

61 Description de l'image agrandie : permet d'insérer le texte de description pour l'image sélectionnée dans la Liste des images. Le texte de description est indiqué au bas de la fenêtre qui affiche l'image agrandie. Les commandes de la section Paramètres de cette fenêtre permettent de définir les paramètres relatifs au type de Galerie d'images que vous voulez réaliser. Options : vous pouvez définir le Type de Galerie d'images et le nombres de Miniatures visibles. La largeur minimum des miniatures est de 48 pixels. Si vous entrez une valeur pour l'option Miniatures visibles qui entraîne une réduction excessive des miniatures, ce paramètre est automatiquement mis à jour. Pour ce qui concerne les types de navigateur disponibles, vous pouvez choisir parmi : Classique - Seules les images en miniatures seront affichées : quand vous cliquez sur une miniature, son image agrandie s'affiche. L'image agrandie peut être affichée soit dans la fenêtre du navigateur, mise en premier plan alors que la page d'origine devient plus opaque et foncée, soit dans une fenêtre Popup appropriée. Représentation horizontale inférieure - Les miniatures sont affichées comme s'il s'agissait de photogrammes d'une pellicule qui défile à l'aide des boutons appropriés. Ces photogrammes sont placés horizontalement, sous l'image agrandie de la miniature. 61

62 Représentation horizontale supérieure - Comme pour le navigateur précédent, les miniatures sont placées horizontalement mais au-dessus de l'image agrandie de la miniature. Présentation verticale gauche - Dans ce cas également, les miniatures composent une sorte de "pellicule" qui, contrairement aux deux types de navigateurs précédents, est placée verticalement à gauche de l'image agrandie de la miniature. Présentation verticale droite - Comme pour le navigateur précédent, les miniatures sont placées verticalement mais à droite de l'image agrandie de la miniature. Liste horizontale - Semblable à la Présentation horizontale inférieure ou supérieure, elle montre toutefois seulement les miniatures et non pas l'image agrandie. Liste verticale - Semblable à la Présentation verticale droite ou gauche, elle montre toutefois seulement les miniatures et non pas l'image agrandie. Selon le type de navigateur sélectionné, vous pouvez agir sur différents Paramè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, le lien et les images agrandies sont automatiquement définis sur les différentes miniatures du Navigateur. Ces images agrandies sont affichées dans la fenêtre du Navigateur, mises en premier plan alors que la page d'origine devient plus opaque et foncée. Largeur maximum : permet de définir la largeur maximale en pixels de l'image agrandie. Hauteur maximum : permet de définir la Hauteur maximale en pixels de l'image agrandie. Créer un Popup externe : si vous sélectionnez cette option, l'image agrandie est affichée dans une fenêtre Popup. Dans ce cas, le Popup prévoit l'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 la fenêtre Popup (dans la fenêtre Couleur). 62

63 Couleur de texte : permet de définir (dans la fenêtre Couleur) la couleur du texte éventuellement affiché dans la fenêtre Popup. La fenêtre Popup reprend automatiquement le texte entré comme Description de l'image agrandie dans les options Image de la section Liste. Police : permet de définir le type de police du texte qui s'affiche dans la fenêtre Popup. Pour le type de navigateur Présentation horizontale inférieure, Présentation horizontale supérieure, Présentation verticale gauche et Présentation verticale droite, voici les paramètres disponibles : Proportion : permet de définir quelle proportion doit être automatiquement gardée entre la base et le sommet de l'image redimensionnée automatiquement dans le navigateur. Vous pouvez choisir parmi 3 types : Rectangulaire horizontal (4:3) ; Rectangulaire vertical (3:4) ; Carré (1:1). Le choix du rapport de proportion à maintenir devra avoir lieu en fonction des images insérées dans le navigateur : par exemple, s'il y a davantage d'images rectangulaires dont la base est supérieure à la hauteur, il convient de définir le rapport 4:3. Effet : quand vous cliquez sur le bouton, vous rappelez la fenêtre Effet de Transition qui permet de choisir l'effet d'entrée des images agrandies du Navigateur. 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 navigation est Microsoft Internet Explorer version 5.5 et suivantes. Avec les navigateurs qui utilisent comme moteur de rendering Gecko ou WebKit (Firefox, Safari, Chrome, etc.), les effets d'entrée sont automatiquement remplacé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 couleur du texte éventuellement affiché dans la fenêtre Popup. Police: permet de définir le type de police du texte qui s'affiche dans la fenêtre Popup. WebSiteX5 crée automatiquement les miniatures ; il enregistre les images sous un taille réduite et les comprime dans le format PNG. 63

64 Les commandes de la section Miniature permettent de définir les paramètres relatifs à l'aspect graphique des miniatures de la Galerie d'images. Les options du cadre Style Miniatures Disponibles permettent d'appliquer un cadre à l'image réduite créée automatiquement par le programme pour obtenir la liste des miniatures : Image prédéfinie : permet de choisir le cadre à appliquer aux miniatures en le sélectionnant parmi ceux proposés. Image personnalisée : permet de rappeler le fichier graphique (au format JPG, GIF, PNG, BMP, PSD, TIF, DIB, PCX, RLE, TGA, WPG) correspondant au cadre voulu. Pour créer un nouveau cadre, il suffit de préparer l'image et de l'enregistrer dans un fichier spécifique : il est préférable que l'image du cadre soit carrée et s'il faut maintenir une transparence externe, enregistrez-la sous 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 entre l'image de la miniature et le cadre qui l'entoure. Activer variante de couleur : Si vous sélectionnez cette option, vous pouvez définir dans la fenêtre Couleur, la couleur vers laquelle tendra le cadre des miniatures. Vous appliquez donc un effet "Colorisé" au cadre de sorte qu'il tende vers la couleur voulue. L'effet variante de couleur ne peut pas être utilisé sur des cadres noirs ou blancs : si tel est le cas, l'option "Colorisé" n'entraîne aucune variation de couleur. Objet Diaporama Cette fenêtre permet de créer effectivement l'objet Diaporama. Il s'agit d'une sé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 dans deux sections: section Liste 64 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: quand vous sélectionnez un fichier dans cette liste, son aperçu apparaît dans la fenê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 le Diaporama. La fenêtre Sélection fichier permet de sélectionner plusieurs fichiers simultanément. Supprimer...: permet de supprimer le fichier sélectionné dans la Liste des images à 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 suivant dans la Liste des images à afficher dans le Diaporama. Modifier : permet d'ouvrir l'editeur graphique interne pour modifier l'image sélectionnée dans la Liste des images. 65

66 Pour chaque image importée, vous pouvez définir plusieurs paramètres, figurant dans la section Options d image : Effet : Si vous cliquez sur le bouton, vous rappelez la fenêtre Effet d'entrée de la page permettant de définir l'effet d'entrée pour l'image du Diaporama 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électionner simultanément plusieurs images pour leur associer le même effet d'entrée. Ces effets ne sont valides que si le Navigateur utilisé pour la navigation est Microsoft Internet Explorer version 5.5 et suivantes. Avec les navigateurs qui utilisent comme moteur de rendering Gecko ou WebKit (Firefox, Safari, Chrome, etc.), les effets d'entrée sont automatiquement remplacés par un effet de fondu croisé. Lien : Si vous cliquez sur le bouton, vous rappelez la fenêtre Lien permettant de définir le lien à associer à l'image du Diaporama sélectionnée dans la Liste des images. Description : le texte tapé dans ce champ est affiché dans une zone translucide qui apparaît au bas de l'image du Diaporama sélectionnée dans la Liste des images. Cette description disparaît au passage de la souris sur l'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'affichage des images qui le composent. 66

67 Cadre : permet de définir l'aspect du cadre où sont insérées les images, en définissant l'epaisseur bordure, la Couleur bordure, la Couleur d arrièreplan, le Type de police et l'alignement, ainsi que les dimensions en pixels de la Largeur maximum et de la Hauteur maximum des images. Selon la structure de la page, si le cadre ne peut pas prendre la largeur définie, les dimensions sont automatiquement recalculées pour maintenir le facteur de proportion entre la base et la hauteur. Si vous définissez la valeur de l'épaisseur de la bordure sur 0 et la couleur de bordure identique à celle de l'arrière-plan de la page, vous éliminerez complètement le cadre des images. Visualiser : permet de définir certains paramètres relatifs à l'affichage du Diaporama. Vous pouvez définir le Type de boutons à utiliser pour contrôler la reproduction du Diaporama. Vous pouvez aussi faire en sorte que le Diaporama soit affiché à plein écran en sélectionnant l'option Activer l'affichage plein écran et qu'il soit lancé automatiquement et reproduit sans cliquer sur aucun bouton en sélectionnant l'option Cacher les boutons et démarrer automatiquement. Les images du Diaporama sont automatiquement redimensionnées pour pouvoir être visualisées correctement. En affichage plein écran, les liens éventuellement définis sur les images du Diaporama n'apparaissent pas. Alors que la liste des images peut être librement composée, la barre des commandes est créée automatiquement et comprend: Transforme en plein écran : disponible si vous avez activé l'option Plein Ecran. Permet d'afficher le Diaporama en plein écran, avec les images centrées sur un arrière-plan noir. Ferme : disponible si vous avez activé l'option Plein Ecran. Permet d'annuler 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'une image à l'autre se produit selon les modalités établies par l'option Temps d'attente des images. 67

68 Objet Formulaire d'envoi d' Cette fenêtre propose les outils et les options nécessaires pour créer des formulaires 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 Graphiques section Envoi Quand vous testez le fonctionnement du site sur votre ordinateur, un message vous avertit que l' contenant les données collectées à travers le formulaire ne sera pas envoyé. Le formulaire fonctionne entièrement après la publication du site sur le serveur. Pour que le formulaire d'envoi fonctionne correctement, le serveur sur lequel le site sera publié doit supporter le langage de programmation PHP et la commande MAIL doit être activée. Pour plus d'informations, contactez votre fournisseur d'accès web. Les commandes de la section Liste de cette fenêtre permettent d'établir les champs 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 Obligatoire 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 un nouveau champ dans le formulaire. Dupliquer : permet de créer une copie du champ sélectionné parmi ceux figurant dans le module. Supprimer... : permet de supprimer le champ sélectionné parmi ceux figurant 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. 68

69 Modifier : permet de rappeler la fenêtre Propriétés de champ pour modifier les paramètres du champ sélectionné. La fenêtre Propriétés de champ rappelée à l'aide de la commande Ajouter ou Modifier 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 de champ à ajouter dans le formulaire en choisissant parmi : Texte : champ de texte disposé sur une seule ligne qui est affiché comme une case vide où l'utilisateur peut entrer librement la réponse la plus appropriée. Courriel : champ de texte spécifique pour demander à l'utilisateur de fournir une adresse courriel. Dans ces cas, le programme défini automatiquement un filtre pour contrôler l'exactitude de la donnée saisie : il doit y avoir le 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éfinitions de la langue. Liste déroulante : les possibilités sont groupées dans une liste ou l'utilisateur pourra choisir une seule réponse. Liste : il s'agit d'une liste de réponses parmi lesquelles l'usager peut en choisir une seule. Choix multiple : les réponses sont présentées dans une liste à puces permettant à l'utilisateur de sélectionner plusieurs rubriques. Choix unique : l'utilisateur peut sélectionner un seul choix dans la liste. 69

70 Fichier annexé : champ de texte où l'utilisateur, en cliquant sur le bouton permettant de parcourir les ressources disponibles, peut spécifier le fichier à envoyer comme annexe. Pour le bon fonctionnement des fichier annexés, contactez votre fournisseur 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éels des programmes qui exploitent les formulaires de contact publiés enligne pour envoyer des courriers non désirés. Comment puis-je donner la possibilité aux utilisateurs de me contacter 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 ou à remplir un formulaire pour demander des informations, adhérer à un service, etc. Malheureusement, des programmes en mesure d'identifier les adresses publiées et de remplir automatiquement les formulaires de contact se sont répandus dans le 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 . Pour cela, WebSite X5 n'affiche plus l'adresse dans le pied de page, comme auparavant. Utiliser la question de contrôle dans les formulaires d'envoi . Choisissez une question très simple, dont la réponse est évidente pour tout le monde : l'objectif est de distinguer les personnes des programmes, et non pas d'évaluer les connaissances des utilisateurs. Pour éviter que les programmes arrivent à interpréter la question de contrôle, utilisez le plus grand nombre de mots possibles et évitez les chiffres et les signes mathématiques. Par exemple, une question du type "Combien fait 2 + 2?" pourrait être interprétée facilement par les robots. Utiliser le contrôle anti-spam "captcha" (option figurant dans la section Envoi de la présente fenêtre). Vous pouvez utiliser cette option au lieu de la question de contrôle car comme elle se base sur une image et non pas un texte, elle offre un niveau de sécurité plus élevé. 70

71 Selon le champ sélectionné, le programme propose différentes options. Description : permet d'insérer la description du champ. Ce texte qui sera affiché au-dessus ou en regard du champ permet de spécifier l'information requise 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 pour les champs "Date", "Choix multiple" et "Choix unique". Nombre de lignes : permet de définir la hauteur du champ en spécifiant le nombre de lignes utilisables (30 au maximum). Cette option est disponible seulement pour les champs "zone de texte" et "Liste". Etablir comme champ obligatoire : en activant cette option la réponse de l'utilisateur est obligatoire. L'option n'est pas disponible dans le champ Choix multiple et est activée par défaut dans le champ "Question de contrôle". Mbre max de caractères : permet d'indiquer le nombre maximum de caractères à entrer dans le champ. Vous pouvez par exemple établir à 11 le nombre maximum de caractères pour le champ d'entrée du code fiscal de l'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'exactitude des données entrées dans les champs "Texte" et "zone de texte". Vous pouvez 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 suivantes : 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. 71

72 Supprimer... : permet de supprimer la réponse sélectionnée. En haut : permet de modifier l'ordre d'affichage des réponses possibles en déplaçant la réponse sélectionnée vers le haut. En bas : permet de modifier l'ordre d'affichage des réponses possibles en déplaçant la réponse sélectionnée vers le bas. Enfin l'option suivante est disponible seulement pour le champ "question de contrôle" : Réponse correcte : permet de définir la réponse correcte qui sera confrontée à celle donnée par l'utilisateur. Les boutons Envoi pour envoyer le formulaire rempli et Reset pour effacer éventuellement les réponses données sont créés automatiquement par le programme et positionnés à la fin du formulaire. Les commandes de la section Envoi de cette fenêtre permettent de définir les modalités relatives à l'envoi via des données tapées dans le formulaire. Le cadre Méthode d'envoi des données propose les options suivantes : Envoyer les données via les données saisies dans le formulaire sont envoyées via en exploitant un script PHP. Envoyer les données au fichier : les données saisies dans le formulaire sont envoyées via en exploitant le script indiqué (PHP, ASP, etc.). Cette option permet d'envoyer les données à travers un script différent si 72

73 PHP n'est pas disponible sur votre serveur, ou pour introduire les données collecté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' contenant les données collectées. Texte du message : permet de taper le texte qui introduit dans le message les données collectées. Ajouter les données collectées au format CSV : permet d'enregistrer les données collectées également dans un fichier au format CSV joint à l' . 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 : vous pouvez importer facilement ces fichiers dans les programmes de gestion des 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 site pour définir la page à visualiser automatiquement quand le formulaire sera rempli et les données auront été envoyées via . Activer le contrôle anti-spam "Captcha": permet d'ajouter, au terme du formulaire, le contrôle anti-spam du Captcha. Le programme insère l'image de quelques lettres déformées sur un arrière-plan flou : l'utilisateur doit recopier correctement les lettres dans un champ approprié pour pouvoir envoyer le message. L'acronyme anglais CAPTCHA se réfère à un test permettant de déterminer si l'utilisateur est une personne ou un programme. L'acronyme vient de l'anglais "completely automated public Turing test to tell computers and humans apart" (test de Turing public complètement automatisé pour distinguer l'homme de la machine). Un des tests captcha utilisés couramment est de demander à l'utilisateur de réécrire des lettres ou des chiffres présents dans une séquence où ils sont déformés ou voilés. 73

74 Si l'option Envoie un de confirmation à l'utilisateur est sélectionné, l'utilisateur recevra automatiquement un de confirmation. Champ de l'utilisateur : permet d'indiquer dans quel champ du module le programme doit prendre l'adresse courriel de l'utilisateur qui doit recevoir l' de confirmation. Objet du message : permet de définir l'objet de l' de confirmation. Texte du message : permet d'indiquer le message de l' de confirmation. Ajouter les données collectées : permet de joindre l' de confirmation des données récoltées dans le formulaire. Les commandes de la section Graphiques de cette fenêtre permettent de définir certains paramètres graphiques relatifs à l'aspect du formulaire et de l' engendrés. Le cadre Paramètres graphiques du formulaire propose les options suivantes : Etiquette de texte en haut : permet de positionner l'étiquette de texte contenant la description de la question au-dessus du champ correspondant. Etiquette de texte a gauche : permet de positionner l'étiquette de texte contenant la description de la question au-dessous du champ correspondant. Police : permet de définir le Type de police, le Style et le Nombre de points du texte. Texte : permet de définir la couleur du texte. 74

75 Arrière-plan champs : permet de définir la couleur d'arrière-plan des champs. Arrière-plan des champs sur sélection : permet de définir la couleur d'arriè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èreplan différente pour les lignes impaires du formulaire. Affecter une couleur différente d'arrière-plan aux lignes paires et impaires d'un formulaire facilite la lecture notamment s'il est composé de nombreux champs : cela améliore la consultation du formulaire et du site web en général. Texte des boutons : permet de définir la couleur du texte contenu dans les boutons. Arrière-plan boutons : permet de définir la couleur d'arrière-plan des boutons. L'option Ajouter les conditions d'acceptation (ex : Privacy), vous pouvez ajouter au bas du formulaire un champ où figurent les conditions à accepter pour envoyer les données. Dans ce champ, vous pouvez par exemple entrer la norme de référence sur la confidentialité du traitement des données collectées. Sélectionnez Ajouter les conditions d'acceptation puis remplissez les champs suivants : Titre de la condition : permet d'entrer le texte à afficher comme titre du champ où figurent les conditions. Texte de la condition : permet d'entrer le texte des conditions à accepter avant d'envoyer les données. Les boutons J'accepte ou Je n'accepte pas sont créés automatiquement par le programme et ajoutés sous le champ contant le texte des conditions 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 de points du texte. 75

76 Texte : permet de définir la couleur du texte. Arrière-plan du texte : permet d'indiquer la couleur d'arrière-plan des textes des . Arrière-plan du message : permet d'indiquer la couleur d'arrière-plan des . Vous pouvez contrôler l'aspect des en rappelant la fenêtre Aperçu. Objet Code HTML Cette fenêtre propose un éditeur de texte qui permet de taper les codes HTML 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 de la commande appropriée. Copier [CTRL+ C] Permet de copier le texte sélectionné pour le coller par la suite à l'aide de la commande appropriée. Coller [CTRL+ V] Permet de coller le texte précédemment coupé ou copié à l'aide des commandes Couper et Copier. Annuler [CTRL+ Z] Permet d'annuler la dernière opération. Insérer code compteur Permet d'insérer le code du "Compteur des visites". Le programme affiche la fenêtre compteur des visites permettant de choisir le type de compteur 76

77 à utiliser : le choix étant effectué, le code nécessaire est inséré automatiquement. Objets Internet Permet d'accéder à une série de sites internet permettant de copier et utiliser gratuitement (certains requièrent l'enregistrement) les codes nécessaires pour afficher dans votre site des informations de différents types dans des boîtes appropriées (tickers). Propriétés de la page Permet de rappeler la fenêtre Propriétés de la Page permettant de définir une série de paramètres relatifs à la page sélectionnée. Cette commande est également disponible dans la fenêtre Création du plan du site. Il est en ainsi car, pour le bon fonctionnement du code HTML inséré, il peut être nécessaire de prévoir une partie de code dans les sections <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 fichiers liés au code HTML. Tous les fichiers seront automatiquement copiés dans le sous dossier /files et publiés en ligne. Dans le code HTML, le lien vers le fichier doit respecter le chemin indiqué. Si par exemple, vous voulez créer un lien pour l'image "test.jpg", le tag 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 valeur en pixels de la Hauteur objet HTML ; en revanche la Largeur objet HTML est définie automatiquement selon la place disponible dans la grille de mise en page. Si l'objet HTML inséré a une hauteur supérieure à celle définie par l'option Hauteur 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 caractè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'une page HTML ou XHTML. L'éditeur est identique à celui disponible dans la section HTML. 77

78 Compteur des visites FrontPage Cette fenêtre permet de définir les paramètres relatifs au Compteur de visites. Le code inséré pour le compteur fonctionne seulement si le serveur où les pages seront publiées supporte les extensions Front Page. Dans la section Style, vous pouvez choisir un des 5 styles graphiques disponibles. Dans la section Paramètres, vous pouvez définir le Nombre de chiffres à afficher (entre 1 et 10) dans le compteur et le Chemin local du fichierfpcount.exe. Ce fichier se trouve normalement dans le dossier _vti_bin/ défini par défaut mais il pourrait se trouver ailleurs. Il est conseillé de contacter votre Fournisseur d'accès (qui accueille la page du site) pour vérifier si le serveur supporte les extensions de Front Page et si le parcours du fichier fpcount.exe est correct. Sachez que le compteur ne fonctionnera pas et ne sera pas affiché lors de la visualisation du site sur la machine. Insertion d'objets Internet Sur Internet on peut trouver parmi les ressources proposées pour les Créateurs de sites Web, les codes pour l'insertion des tickers dans les pages créées. Les tickers sont des cases, que l'on peut configurer dans leur graphisme et dimensions, 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équent plus intéressant pour le lecteur ; elle permet de présenter des renseignements constamment mis à jour grâce au travail de rédaction du portail qui offre ses services. Les tickers sont relativement faciles à utiliser: il suffit de copier le code HTML présenté par le portail qui les propose et de le coller à l'intérieur du code des pages crées. WebSiteX5 rend l'opération encore plus facile: il suggère des adresses de sites où l'on peut trouver les codes et permet de les insérer directement à l'intérieur de l'objet Code HTML. 78

79 Objet Liste des produits Cette fenêtre permet de créer une liste des produits insérés dans la catégorie spécifiée pour présenter l'image, la description et le prix et commander les produits à 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 devez préalablement insérer des produits dans le panier e-commerce à l'aide des commandes de la section Panier virtuel e-commerce des Paramètres avancés. Les options de la section Liste de cette fenêtre permettent d'indiquer les produits 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 lors de la création du panier e-commerce et permet de sélectionner les catégories dont vous voulez afficher les produits. Liste des produits: selon l'option activée, Afficher tous les produits de cette catégorie ou Afficher seulement les produits sélectionnés, elle montre la liste de tous les produits insérés dans la catégorie sélectionnée ou permet de sélectionner seulement les produits qui doivent être affichés dans l'objet Liste des produits. Si vous sélectionnez l'option Afficher tous les produits de cette catégorie et que vous ajoutez dans votre panier e-commerce de nouveaux produits pour cette catégorie, les objets Liste des produits relatifs sont automatiquement mis à jour et ajoutés. Cette mise à jour n'est pas effectuée si vous 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 dans la Liste des produits. Sélectionner aucun: permet de désélectionner tous les produits sélectionnés précédemment dans la Liste des produits. 79

80 Les options de la section Paramètres de cette fenêtre permettent de définir certains 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 pour organiser 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, les images associées aux produits sont redimensionnées automatiquement. Si les textes de description des produits sont trop longs pour être affichés entièrement, la barre de défilement apparaît automatiquement. Fiches par ligne: permet d'indiquer combien de fiches doivent être placées cô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 de la fiche doit être occupé par l'image et combien par le texte. Si l'image occupe 30% de la largeur de la fiche, le texte en occupera 70%. 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'autre dans la fiche: 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". Image et texte - Dans la fiche, l'image du produit apparaît à gauche tandis que 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". 80

81 Texte et image - Dans la fiche, les informations relatives au produit apparaissent à gauche tandis que l'image du produit est affichée à droite. Seulement image - Dans ce cas, sous l'image apparaissent le nom du produit, la liste déroulante avec les variantes (si elles sont disponibles), le coût et le champ d'entrée de la quantité avec le bouton "Acheter", mais la description 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 en points 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 permettent d'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 images figurant dans les fiches du produit : Modifier l'affichage des images des miniatures des produits: permet de modifier les images des produits à l'aide de l'éditeur graphique interne. Pour rappeler l'éditeur graphique, cliquez sur le bouton Modifier : vous ouvrez ainsi l'image relative au premier produit disponible; toutes les modifications 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, le lien vers les images agrandies est automatiquement défini sur les différentes images des fiches du produit. Ces images agrandies sont affichées dans la fenêtre du Navigateur, mises en premier plan alors que la page d'origine devient plus opaque et foncée. Largeur maximum : permet de définir la largeur maximale en pixels de l'image agrandie. Hauteur maximum : permet de définir la hauteur maximale en pixels de l'image agrandie. 81

82 Editeur graphique WebSite X5, offre une procédure automatique pour optimiser les images importées ainsi qu'un éditeur graphique intégré polyvalent permettant d'exécuter des opérations de retouches photos. Pour rappeler l'éditeur graphique, cliquez sur le bouton Modifier disponible dans les fenêtres Objet Image, Objet Diaporama et Objet Galerie d'images. L'éditeur graphique est organisé en 5 sections : section Rogner section Filtres section Masque section Cadre section Effets L'éditeur graphique propose les boutons suivants : Appliquer : Permet de quitter l'éditeur et revenir à la fenêtre principale tout en enregistrant les modifications effectuées sur l'image. Annuler : Permet de quitter l'éditeur et revenir à la fenêtre principale sans enregistrer les modifications effectuées sur l'image. Enregistrer sous : Permet d'enregistrer une copie de l'image originale au format PNG, JPG ou PSD. Un message vous demande si la copie enregistrée doit être importée pour remplacer l'original. 82

83 Les commandes de la section Rogner de l'éditeur graphique permettent de couper 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 utiliser les ancres pour la modifier. Vous pouvez déplacer la sélection de la coupe pour mettre en premier plan la zone voulue : pour ce faire, cliquez sur celle-ci à l'aide du bouton gauche de la souris et positionnez-la à l'endroit voulu. Il n'est pas nécessaire de confirmer la coupe : la partie externe à la section de coupe (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ée Y qui identifient la position de l'angle supérieur gauche de la zone sélectionnée par la coupe, en plus de sa largeur et hauteur. Les valeurs des paramètres peuvent être prises directement selon la zone de coupe dessinée, tapées dans les champs appropriés ou définies à l'aide des curseurs. Reflets : Permet de réfléchir l'image dans le sens Horizontal (selon l'axe vertical) 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 dans le 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'appliquer 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 personnel : 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 de l'appliquer à l'image. Le masque est une image à 256 couleurs en niveaux de gris : le masque est appliqué à l'image originale de sorte que les parties couvertes par le noir soient invisibles et celles couvertes par le blanc restent visibles. + = 83

84 Les commandes de la section Effets de l'éditeur graphique permettent de corriger les principaux réglages de couleur et de définir certains effets graphiques sur l'image importée. Effets : Montre la liste des effets pouvant être appliqués à l'image. La liste comprend : Ombre, Reflet, Lueur externe, Bordure colorée, Bordure 1, Bordure 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 de corriger les principaux réglages de couleur et de définir certains filtres graphiques sur l'image importée. Filtres : Indique la liste des filtres pouvant être appliqués à l'image. La liste comprend : Luminosité/Contraste, Équilibrage (RGB), Intensité (HSL), Détail/Flou, Noir et blanc, Sépia, Mosaïque, Portrait, Perspective, Distorsion 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'appliquer un cadre à l'image importée. Cadre : Contient la liste des cadres pouvant être appliqués à l'image importée. En plus des cadres proposés, vous pouvez appliquer un cadre personnel : 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 aux zones transparentes. Comme le format.gif ne gère qu'un niveau de transparence, tandis que les formats.png et.psd en gèrent 256, il est conseillé d'enregistrer les cadres 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éation de la page, propose les options permettant de définir l'aspect graphique de la cellule 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 de définir les paramètres graphiques de la cellule. Les options du cadre Style d'arrière-plan permettent de définir l'arrière-plan de la cellule : Arrière-plan coloré: si elle est activée, elle permet de définir une couleur teinte 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 arriè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 couleur doit être prédominante dans le dégradé. Une distribution de 90%, indique que la première couleur remplira 90% du masque, tandis que la dernière couleur n'occupera que 10%. Sens : permet de choisir le type de nuance à appliquer. Vous disposez des options suivantes : Horizontal, Vertical, Horizontal double et Vertical double. Image d'arrière-plan : si elle est activée, elle permet de choisir une image comme 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 utilisée comme arrière-plan est automatiquement adaptée à la taille de la cellule. 85

86 Disposition : permet de définir s'il faut répéter ou non l'image utilisée comme arrière-plan de la cellule. L'image peut être répétée horizontalement, verticalement, ou dans les deux sens pour remplir tout l'espace disponible. Alignement : permet de définir l'alignement de l'image utilisée par rapport à 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 transparence de l'image. Si lors de l'affichage avec le navigateur l'aspect de la cellule est égrené, il est conseillé de modifier la couleur de l'arrièreplan. Pour plus d'informations, reportez-vous aux : Remarques sur la transparence des images. Les commandes de la section Textes de cette fenêtre permettent d'insérer et de 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 du titre 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 points du texte. Alignement : permet de définir si le titre doit être aligné à gauche, au centre 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 dans la cellule. 86

87 Couleur de texte : permet de définir la couleur du texte de la légende dans 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, le style 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 de la cellule à l'aide de la fenêtre Lien rappelée. Si vous sélectionnez l'option Créer titre comme image, vous pouvez transformer 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, Rectangle coupé 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, Plastique, 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'image affichée comme titre de la cellule. Insertion des liens Cette fenêtre, rappelée en cliquant sur bouton, permet de définir le type de 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'indiquer le type d'action relatif au lien : Page du site Permet d'établir un lien vers une autre page du site. Le bouton permet de parcourir le plan du site et de 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 nouvelle fenêtre du Navigateur. 87

88 Fichier local ou ressource web Permet d'établir un lien vers une ressource quelconque, un fichier ou une page HTML, présente sur l'ordinateur ou déjà publiée sur le Web. Pour choisir le fichier à lier, sélectionnez l'option Fichier sur l'ordinateur à publier et cliquez sur le bouton pour parcourir les ressources enregistrées sur le système, ou sélectionnez l'option Fichier déjà présent sur Internet et 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ême fenêtre, dans une nouvelle fenêtre du Navigateur ou dans une fenêtre PopUp. Dans ce dernier cas, le programme ouvre comme PopUp une nouvelle fenêtre du navigateur dont vous pouvez définir la taille (Largeur et Hauteur) et établir d'afficher ou non la barre de défilement vertical (Afficher la barre de défilement). PopUp interne Permet de définir un lien vers un fichier quelconque, présent sur votre ordinateur ou déjà publié sur le Web, dans une fenêtre PopUp interne appropriée. Contrairement au PopUp externe, le fichier rappelé est affiché en premier plan de la page d'origine dont l'arrière-plan devient automatiquement 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 enregistrées sur le système, ou sélectionnez l'option Fichier déjà présent sur Internet 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 ef88

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é pour afficher des images. Son Permet de définir un lien qui lance la reproduction d'un son. Pour choisir le fichier à lier, sélectionnez l'option Fichier sur l'ordinateur à publier et cliquez sur le bouton pour parcourir les ressources enregistrées sur le système, ou sélectionnez l'option Fichier déjà présent sur Internet et saisissez l'adresse (URL) qui identifie sa position dans le réseau. Vous pouvez relier des fichiers au format WAV, MP3, WMA et MID. Quand vous cliquez sur le lien, le son est reproduit ; cliquez de nouveau pour interrompre la reproduction. La reproduction du son s'interrompt également en cliquant sur un autre lien vers un son ou si vous changez de page. Courrier électronique Permet d'établir un lien vers le programme courriel prédisposé pour envoyer un . Pour définir ce type de lien, il suffit de taper l'adresse à laquelle le message doit être envoyé. Appel via Internet Permet de définir un lien qui active un logiciel d'appel téléphonique via Internet (par exemple Skype) pour appeler un autre Utilisateur. L'utilisateur à appeler doit être spécifié dans un champ approprié. Imprimer la page Permet d'établir un lien qui lance l'impression de la page affichée. Message d'alerte Permet d'établir un lien qui affiche un message dans une boîte de dialogue style Windows. Pour définir ce type de lien, il suffit d'introduire le texte du message dans le champ correspondant. Diaporama Permet d'établir un lien qui lance l'affichage du Diaporama présent dans la page. Pour que ce lien fonctionne correctement, vous devez créer préalablement une page contenant le Diaporama et sélectionner l'option Activer le plein écran dans les Paramètres de cet objet. Ajouter aux favoris Permet d'établir un lien qui ouvre la fenêtre Internet Explorer pour ajouter le site Internet indiqué à la liste des favoris. Pour définir ce type de lien, il suffit d'indiquer l'adresse (URL) et le titre du site voulu. 89

90 Page par défaut Permet 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 RSS Permet d'afficher le flux RSS du site : ce lien n'est actif que s'il a été associé à un Flux RSS dans la fenêtre Paramétrages avancés. Quand vous testez sur votre ordinateur le fonctionnement du site, un message vous avertit que les Flux RSS ne seront affichés que lorsque le site sera publié enligne. Blog Permet de définir un lien qui ouvre le Blog interne relié au site courant. Pour que ce lien fonctionne correctement, vous devez créé préalablement un 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 Navigateur. Plan du site Permet de définir un lien qui affiche le plan complet du site dans une page appropriée. Les rubriques du plan du site, créé automatiquement, sont des liens actifs vers une page : le plan représente donc un outil utile d'orientation et de navigation mis à la disposition de l'utilisateur. L'affichage des rubriques 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éé et relié dans le code HTML des pages à travers le Méta Tag <sitemap>, pour permettre une meilleur indexation des contenus de la part des Moteurs de recherche. Le lien vers le Plan du site est inséré automatiquement comme dernière rubrique du menu affiché au bas de la page (pour l'activer, sélectionnez Afficher au bas de la page les rubriques du menu de premier niveau dans Choix du menu). Afficher le panier Permet de définir un lien qui mène à la page du panier contenant la liste de tous les produits déjà commandés. 90

91 Commander le produit Permet de définir un lien qui mène au panier e-commerce pour effectuer la commande ou ajouter le produit spécifié aux produits à acheter. Dans le premier cas, vous devez sélectionner dans la liste appropriée la catégorie de produits pouvant être commandés et sélectionner l'option Afficher 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électionnez le produit dans la liste et définissez la quantité prédéfinie. Pour que les liens Afficher le panier et Commander le produit fonctionnent correctement, vous devez créer précédemment le panier ecommerce à l'aide des commandes de la section Panier virtuel ecommerce des Paramètres avancés. Les commandes de la Section Description de cette fenêtre permettent de dé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ît lorsque 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 et qui remplace ou accompagne la description du lien. 91

92 Largeur cadre : activée quand une image est insérée dans le tooltip, elle permet de spécifier la largeur du cadre. Si vous indiquez seulement une description textuelle du lien, la largeur du cadre sera définie automatiquement 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 du tooltip. Police : permet de définir le type de caractère, le style et la taille en points du texte du tooltip. Style : permet de choisir parmi les différents styles disponibles celui à appliquer au tooltip. Style flèche : permet de définir si le tooltip doit avoir ou non une flèche pointée vers le haut ou le bas pour ressembler aux bulles des bandes dessiné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 programme propose 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 un menu contenant une palette de 48 couleurs : pour sélectionner la couleur voulue, cliquez sur celle-ci. 92

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 possible, permet de rendre invisible l'élément courant. Dernières couleurs : la ligne située sous la palette principale propose les 8 dernières couleurs utilisées. Autres couleurs...: cette commande permet d'ouvrir une autre fenêtre pour définir des couleurs personnalisées. Compte-goutte (Pipette): cet instrument permet de reprendre la couleur de n'importe quel élément affiché, même à l'extérieur de la fenêtre WebSite X5. Quand vous sélectionnez l'instrument compte-gouttes (Pipette), le programme modifie le pointeur de la souris : si vous cliquez sur un objet quelconque sur l'écran, sa couleur est "capturée" pour vous permettre de l'appliquer à l'élément courant. 93

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 barres de défilement, ainsi que la mise en page d'une page d'introduction prédisposée éventuellement pour le choix de la langue de consultation du site, la création d'une ou plusieurs zones réservées à accès par mot de passe, la création d'un panier e-commerce, de Blogs et de Flux RSS. Menu premier niveau Cette section permet de définir l'aspect graphique des rubriques du menu de premier niveau, qui est toujours visible en haut (structure à menu horizontal) ou sur le côté (structure à menu vertical) du site. Liste déroulante Cette section permet de définir l'aspect graphique des rubriques de la boîte à liste déroulante qui apparaît au passage de la souris sur une rubrique de premier niveau. Sous menu Cette section permet de définir l'aspect graphique du sous-menu vertical qui apparaît si l'option Afficher à gauche de la page un sous-menu des objets des niveaux est sélectionnée dans la fenêtre Choix du menu. Style de texte Cette 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'introduction Cette section permet de définir une page d'introduction pour le site, en prévoyant une bande sonore et les liens nécessaires pour choisir la langue de consultation. Coin publicitaire Cette section permet de définir et personnaliser un message publicitaire à afficher en haut à droite de la page d'accueil ou de toutes les pages du site. Blog Cette section permet de créer et gérer un Blog, une sorte d agenda sur le Web pour publier des nouvelles que les utilisateurs pourront commenter. 94

95 Flux RSS Cette section permet de créer un Flux RSS, servant de canal d'informations constamment mis à jour. Zone réservée Dans 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 un mot de passe. Panier virtuel e-commerce Cette section permet de créer un panier e-commerce, en définissant la liste des produits, les méthodes d'envoi et de paiement (y compris par carte 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 entre 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 rubriques de premier niveau du menu. Les commandes nécessaires pour personnaliser les boutons sont présentées dans quatre sections : section Général section Graphiques section Texte section Style 3D Les options proposées dans la section Général de cette fenêtre permettent de définir certains paramètres généraux. 95

96 Les commandes disponibles sont : Créer le bouton comme image : permet de créer des boutons en tant qu'images pouvant avoir des caractéristiques 3D. Comme le bouton est enregistré comme une image, vous pouvez utiliser une police quelconque pour le texte qu'il contient. Epaisseur bordure : permet de définir l'épaisseur de la bordure des boutons. Cette option est disponible uniquement si l'option Créer le bouton comme image est désactivée. Couleur bordure : permet de définir la couleur de la bordure des boutons dans la fenêtre Couleur. Cette option est disponible uniquement si l'option Créer le bouton comme image est désactivée. Largeur : permet de définir la valeur en pixels de la largeur du bouton contenant la rubrique de menu. Marge intérieure : permet de définir la marge intérieure, à savoir l'espace situé entre le texte et la bordure du bouton. Marge extérieure : permet de définir la marge extérieure, à savoir l'espace situé entre deux boutons. Défilement automatique du menu : si vous sélectionnez cette option, le menu de navigation défile automatiquement avec le contenu de la page et est toujours visible sur l'écran. Pour définir la largeur en pixels des boutons, tenez compte de l'espace disponible 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 personnalisé). Les options proposées dans la section Texte de cette fenêtre permettent de dé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 en points du texte. Alignement : permet de définir l'alignement du texte à gauche, au centre ou à droite, par rapport au bouton. Marge latérale: permet de définir la marge latérale du texte quand il est aligné à gauche ou à droite. 96

97 Style de police : permet de définir un style (Aucun, Haut-relief, Bas-relief et Ombre) sur le texte. Le style est appliqué uniquement si l'option Créer le bouton comme image est activée. Utiliser l'antialias pour afficher le texte : si vous sélectionnez cette option, vous appliquez un effet antialias au texte qui rend les contours moins dentelés. L'effet antialiasing est appliqué uniquement si l'option Créer le bouton comme image est sélectionnée. Les options proposées dans la section Graphiques de cette fenêtre permettent 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 de fond 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 du texte 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'option Cré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ée comme arrière-plan du bouton. Pour sélectionner l'image à utiliser, cliquez sur le bouton pour parcourir les ressources disponibles : vous pouvez utiliser des fichiers au format JPG, GIF, PNG. Image d'arrière-plan au passage de la souris : permet de définir une image diffé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 graphique personnel? Pour donner aux boutons du menu de premier niveau un aspect graphique différent de celui proposé par l'éditeur interne, vous pouvez importer des images personnelles à utiliser pour les états "relâché" et " au passage de la souris". 97

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 fichier relatif au bouton à l'état "relâché". Utilisez l'option Image de fond sur passage pour charger la deuxième image relative au bouton. Les images graphiques étant chargées, le logiciel définira automatiquement l'effet mouseover. Les commandes proposées dans la section Style 3D de cette fenêtre (activée seulement si l'option Créer le bouton comme image est sélectionnée) permettent 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 celles qui sont proposées. Fusionner la forme des boutons : si vous sélectionnez cette option, les boutons sont unis et la forme choisie est appliquée à l'ensemble des boutons. Aspect : permet de définir l'aspect (Bombé, Plat, Bombé plat, Creux, Plastique, 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), la bordure 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 formes de 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 appliqué au bouton. Trasparence image : permet de définir le facteur de transparence pour les images des boutons. 98

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ées dans quatre sections: section Général section Graphiques section Texte section Style 3D Les options proposées dans la section Général de cette fenêtre permettent de 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 tant qu'images pouvant avoir des caractéristiques 3D. Comme le bouton est enregistré comme une image, vous pouvez utiliser une police quelconque pour le texte qu'il contient. Epaisseur bordure : permet de définir l'épaisseur de la bordure des boutons qui composent le menu en question. Couleur bordure : permet de définir la couleur de la bordure des boutons qui composent le menu en question. Largeur : permet de définir la largeur en pixels des boutons qui composent le menu Popup. Opacité : permet d'établir le facteur de transparence pour l'affichage des menus Popup. Marge intérieure : permet de définir la marge intérieure, à savoir l'espace situé entre le texte et la bordure du bouton. Les options proposées dans la section Texte de cette fenêtre permettent de dé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 en points du texte. Alignement : permet de définir l'alignement du texte à gauche, au centre ou à droite, par rapport au bouton. 99

100 Marge latérale: permet de définir la marge latérale du texte quand il est aligné à gauche ou à droite. Les options proposées dans la section Graphiques de cette fenêtre permettent 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 de fond 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 du texte 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'option Cré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ée comme arrière-plan du bouton. Pour sélectionner l'image à utiliser, cliquez sur le bouton pour parcourir les ressources disponibles : vous pouvez utiliser des fichiers au format JPG, GIF, PNG. Image d'arrière-plan au passage de la souris : permet de définir une image différente qui apparaîtra comme arrière-plan du bouton au passage de la souris. Les commandes proposées dans la section Style 3D de cette fenêtre (activée seulement si l'option Créer le bouton comme image est sélectionnée) permettent 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 celles qui sont proposées. Aspect : permet de définir l'aspect (Bombé, Plat, Bombé plat, Creux, Plastique, Brillant, Gel, Eau) du bouton. 100

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 option (disponible uniquement si vous avez appliqué un style à la bordure), la bordure 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 formes de 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 appliqué au bouton. Trasparence image : permet de définir le facteur de transparence pour les images 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 menu avec la liste des pages du niveau courant de la fenêtre Choix du menu, 101

102 vous pourrez indiquer si le sous-menu doit être affiché à droite ou à gauche de la page. Largeur : permet de définir la largeur en pixels des boutons qui composent le menu Popup. Activer le menu déroulant pour les rubriques du niveau suivant : si cette option est activée et qu'un sous-menu contient une rubrique de niveau, quand vous cliquez sur celle-ci un autre sous-menu apparaît. Si tel n'est pas le cas, quand vous cliquez sur la rubrique de niveau, vous ouvrez automatiquement 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 boutons qui composent les sous-menus. Couleur de fond au passage de la souris : permet de définir le changement 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 qui composent les sous-menus. Couleur de texte au passage de la souris : permet de définir le changement de la couleur du texte des boutons des sous-menus au passage de la souris. Largeur ligne : permet de définir l'épaisseur de la ligne qui sépare les différentes rubriques des sous-menus. Couleur ligne : permet de définir la couleur de la ligne qui sépare les différentes rubriques des sous-menus. Marge gauche : permet de définir la valeur en pixels de la marge de gauche des rubriques des sous-menus. Police : permet de définir le type de police, le style et la taille en points du texte. Puce : permet de définir une image (fichier GIF, JPG, PNG) qui sera visualisée comme liste à puces en regard des rubriques des sous-menus. Le sous dossier "Bullets" du dossier d'installation de WebSiteX5, contient une série d'images pour créer des listes à puces en regard des rubriques des sous-menus. 102

103 Style de texte Cette fenêtre affiche les commandes permettant de définir les styles qui seront appliqués au formatage des textes et des liens présents dans le site ainsi que 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éfinir les 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 le menu Type de texte et sont les suivants : Titre des pages : il s'agit du titre des pages du site. Il est pris dans le nom donné aux pages lors de la phase de construction du plan dans la fenêtre Création du plan ou, s'il est spécifié différemment, dans le Titre complet de 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 qui permet de reconstruire le chemin logique (navigation par miettes de pain) conduisant à cette page. Le chemin logique est automatiquement recréé par le programme. Texte par défaut de la page : c'est le texte des paragraphes insérés à travers l'objet Texte. Le style de cet élément est appliqué par défaut quand vous ouvrez l'éditeur relatif à l'objet Texte : grâce aux commandes fournies par l'éditeur, vous pouvez effectuer d'autres modifications et d'autres personnalisations. Le style défini pour ce type de texte s'applique égale103

104 ment à tous les textes qui ont été automatiquement créés et insérés par le programme : 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 chaque page et qui contient les rubriques de premier niveau du menu de navigation. Le menu de pied de page est automatiquement créé par le programme si vous sélectionnez l'option Afficher au bas de la page les rubriques du menu de premier niveau présente dans la fenêtre Choix du menu. Vous pouvez sélectionner un type de texte pour modifier son style, en utilisant la liste déroulante ou en cliquant directement dans le cadre Aperçu correspondant. 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 visibles ou invisibles. Cette option n'est pas disponible pour le style de Texte par défaut de la page. Rendre un élément invisible ne veut pas dire éliminer l'information correspondante du code des pages. Par exemple, vous pouvez rendre le chemin de la page invisible pour faire en sorte que cette information 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 points du texte. Alignement : permet de définir l'alignement du texte. Cette option n'est pas activée pour le style du Texte par défaut de la page et les Notes de pied de page/ . Dans le premier cas, l'alignement peut être défini quel que soit le style, lors de la phase de création de l'objet texte ; en revanche dans les Notes de pied de page/ , vous ne pouvez pas modifier les alignements des notes et l'adresse de l'auteur. Ligne inférieure : permet de définir l'épaisseur en pixels et la couleur d'une bordure inférieure qui peut être ajoutée dans tous les styles, à l'exception 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 hypertextuels. 104

105 Les commandes disponibles sont : Lien actif : permet de définir la couleur du texte pour les liens hypertextuels. Lien cliqué : permet de définir la couleur du texte des liens hypertextuels déjà visités par l'utilisateur. Lien au passage de la souris : permet de définir la couleur du texte des liens hypertextuels pointés par la souris (effet mouseover). Arrière-plan au passage de la souris: permet de définir la couleur de fond qui doit être affichée derrière le texte des liens hypertextuels quand pointés par la souris (effet mouseover). Texte du lien souligné : si vous sélectionnez cette option, tous les textes relatifs aux liens hypertextuels sont soulignés. Texte du lien souligné au passage de la souris : si vous sélectionnez cette option, tous les textes relatifs aux liens hypertextuels sont soulignés quand pointés par la souris (effet mouseover). Pointeur : permet de définir l'aspect du curseur de la souris. Si vous cliquez sur, vous pouvez sélectionner un fichier.cur,.ico et.ani (icône animée) pour définir l'aspect du curseur. Le sous-dossier "Cursors" du dossier d'installation de WebSite X5 contient une série d'images pour personnaliser l'aspect du pointeur. Les commandes de la section Barre de défilement de cette fenêtre permettent de définir certains paramètres avancés relatifs au style graphique de la barre de défilement. Les commandes disponibles sont: Appliquer paramètres personnalisés : si vous activez cette option, les barres de défilement apparaissent avec l'aspect défini à travers les paramètres disponibles. Si vous ne sélectionnez pas cette option, les barres de dé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 curseurs supérieur, central et inférieur de la barre. Arrière-plan du curseur central : permet de définir la couleur de fond de la barre sur laquelle se déplace le curseur central. 105

106 Flèche supérieure et inférieure : permet de définir la couleur des flèches pré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 bordure intérieure supérieure de la barre. Bordure intérieure inférieure : permet de définir la couleur de la bordure intérieure inférieure de la barre. Bordure extérieure supérieure : permet de définir la couleur de la bordure extérieure supérieure de la barre. Bordure extérieure inférieure : permet de définir la couleur de la bordure extérieure inférieure de la barre. Page d'introduction Cette fenêtre contient les commandes permettant de configurer une page d'introduction du site et de la prédisposer pour la consultation en plusieurs langues. Voici les commandes disponibles pour la configuration d'une page Intro : Afficher la page d'introduction : si vous sélectionnez cette option, une page d'introduction au site est insérée. Si elle est présente, la page d'introduction (fichier index.html) est la première à être affichée ; ensuite, au terme 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 fond de la page d'introduction dans la fenêtre Couleur. 106

107 Ouvrir la page d'accueil après : si vous sélectionnez cette option, vous pouvez indiquer pendant combien de secondes la page d'introduction restera affichée. Au terme de ce délai, la Page d'accueil est automatiquement affichée. Fichier image/animation : permet de définir quel fichier il faut utiliser pour la page d'introduction au site. Vous pouvez créer une image statique ou une animation Flash. Si vous insérez une image dans la page d'introduction, vous devez sélectionner l'option Ouvrir la Page d'accueil après pour permettre à 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 Page d'accueil est déja programmé, il n'est pas nécessaire de sélectionner l'option 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écessaire 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'introduction. Répéter le son en boude : fait en sorte que le son inséré soit répété lors de l'affichage de la page d'introduction. Les commandes disponibles pour la configuration du choix de la langue de consultation du site sont regroupées dans le cadre Sélection des langues : Langue 1 (courante) : si vous sélectionnez cette option, vous prédisposez le 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 (par exemple du drapeau correspondant à la langue) à associer au lien pour le choix de la première langue de consultation. Langue 2 : si vous sélectionnez cette option, vous prédisposez le lien pour le 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 (par exemple du drapeau correspondant à la langue) à associer au lien pour le choix de la deuxième langue de consultation. 107

108 Langue 3 : si vous sélectionnez cette option, vous prédisposez le lien pour le 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 (par exemple du drapeau correspondant à la langue) à associer au lien pour le choix de la deuxième langue de consultation. Langue 4 : si vous sélectionnez cette option, vous prédisposez le lien pour le 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 (par exemple du drapeau correspondant à la langue) à associer au lien pour le choix de la quatrième langue de consultation. Dans le sous-dossier "Flags" du dossier d'installation de WebSite X5, une série d'images adaptées est disponible pour créer des boutons pour le choix de la langue de consultation du site. Coin publicitaire Un nouvel outil publicitaire dont le nom vient de l'anglais "peel", à savoir "peler", a un succès considérable et se répand rapidement dans le réseau : il s'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 à positionner la 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'effet, le message publicitaire est de nouveau "masqué". 108

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 ou d'autres effets reproduisant ce fonctionnement avec d'autres aspects graphiques. Voici les commandes disponibles pour prédisposer le message publicitaire : Type : permet de choisir, parmi les animations proposées, celle qui sera affichée en haut à droite de la Page d'accueil. En plus de l'effet classique du coin de la page pliée (PagePeel), d'autres animations à thème sont disponibles. De toute façon, le fonctionnement de l'effet ne change pas : quand la souris glisse sur l'animation, l'utilisateur ouvre le message publicitaire 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) ou l'image (fichier JPG, GIF, PNG) contenant le message publicitaire qui apparaîtra au passage de la souris. Son pour la page : permet de définir le son (fichier MP3) qui retentira quand le message publicitaire sera affiché. Page à rappeler par un clic : permet de définir la page (Landing Page) qui sera 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, par exemple, à un lien ou une bannière publicitaire. Tel que l'indique son nom, c'est la page où l'utilisateur "atterre" elle doit être construite de sorte qu'il trouve immédiatement les informations voulues, lui évitant ainsi de naviguer dans le site pour les rechercher. Le mécanisme peut être expliqué par un exemple : supposons que vous vouliez publier une bannière pour faire la réclame d'un produit. Les informations véhiculées par la bannière sont peu nombreuses et essentielles, mais vous pouvez définir un lien pour guider l'utilisateur vers votre site. Dans ce cas, il ne convient pas de créer un lien vers la Page d'accueil de votre site : celle-ci est trop générale et obligerez l'utilisateur à entreprendre une navigation interne avant de trouver les informations nécessaires sur le produit et la procédure à suivre pour l'acheter. Vous risquez ainsi de perdre un client potentiel. La meilleure solution est de construire une page spécifique à l'aspect simple et fonctionnel où figurent toutes les informations sur le produit indiqué dans la bannière y compris la procédure d'achat. 109

110 Très souvent, il faut construire expressément une page de ce type mais si 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 publicitaire. Largeur et hauteur : permet d'indiquer la valeur en pixels relative à la largeur et la hauteur de la zone devant accueillir le message publicitaire. Mode d'affichage : permet de définir à quel endroit doit être affiché le message publicitaire, en choisissant parmi les options Montrer uniquement dans 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 un Blog. Les commandes nécessaires pour configurer un Blog et créer les articles sont présentées dans trois sections : section Général section Commentaires section Graphiques Après sa publication, le Blog représente une section individuelle reliée au site principal par une option de menu que le programme ajoute automatiquement. Cette option apparaît aussi dans le plan du site (voir la fenêtre Création du plan du site), vous pouvez la supprimer du menu de navigation en sélectionnant l'option Page invisible dans le menu. Par ailleurs, vous pouvez revenir au site de référence à partir du Blog à travers les liens qui sont automatiquement insérés sur le titre et le sous-titre ou sur d'autres éléments spécifiques de la barre d'en-tête, selon le modèle graphique choisi. Le Blog créé est publié à l'url où est l'url du site auquel il est relié. La liste de tous les articles publiés (affichés dans l'ordre chronologique en partant 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, la date et l'heure de publication, la description brève et le lien "Lire tout". Dans le premier article seulement, tout le contenu est affiché au lieu de la description brève. 110

111 Le lien "Lire tout" mène à une page consacrée entièrement à un post : dans ce cas, 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 un nouveau commentaire. Les outils suivants apparaissent dans une colonne située à droite dans toutes les 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 sur le titre, vous accédez à la page affichant l'article. Liste des catégories : liste disposée en colonnes de toutes les catégories présentes dans le Blog. Si vous cliquez sur une catégorie, vous affichez la liste des articles qu'elle contient. Archives par mois : indique la liste des mois en partant de celui où le Blog a été ouvert. Si vous cliquez sur un mois, vous affichez la liste de tous les articles publiés durant cette période. Nuages : liste disposée sur une ligne de toutes les catégories présentes dans le Blog. Dans ce cas, les noms des catégories sont affichés avec une taille différente selon le nombre d'articles reliés : les noms des catégories contenant plusieurs articles ont une taille plus grande. Si vous cliquez sur une 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 au lecteur d'entrer un commentaire : ainsi en partant de l'article publié, une discussion peut s'ouvrir entre celui qui écrit et ceux qui lisent. Il est nécessaire de gérer les commentaires pour éviter les réponses vexantes ou non relatives au thème : pour ce faire, WebSite X5 met à votre disposition un Panneau de contrôle enligne approprié. Les commandes de la section Général de cette fenêtre permettent de créer la 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 un nouvel article. 111

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 modifier l'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 se pré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 ou ouvrir 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 de l'article. Brève Description : permet d'indiquer une brève description à associer à l'article. 112

113 L'Editeur de texte permettant de composer les articles présente les commandes 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 commandes Couper et Copier. Annuler [CTRL+ Z] Permet d'annuler la dernière opération. Gras Transforme le texte sélectionné en gras. Dans la fenêtre de l'éditeur, le texte sélectionné est compris entre les marqueurs [b] et [/b]: l'effet gras apparaîtra seulement dans la fenêtre du Navigateur. Italique Transforme le texte sélectionné en italique. Dans la fenêtre de l'éditeur, le texte sélectionné est compris entre les marqueurs [i] et [/i]: l'effet italique apparaîtra seulement dans la fenêtre du Navigateur. Couleur du texte Permet 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 les marqueurs [color] et [/color]: le marqueur [color] est accompagné de la valeur hexadécimale de la couleur à appliquer ; par exemple, [color=#ff0000] où #FF0000 correspond au rouge standard. L'effet de la couleur apparaîtra seulement dans la fenêtre du Navigateur. Citation Permet d'afficher le texte sélectionné comme une citation. Dans la fenêtre de l'éditeur, le texte sélectionné est compris entre les marqueurs [cotes] et [/quote]: en revanche, dans la fenêtre du Navigateur la citation apparaît dans un cadre coloré, placé d'une façon appropriée dans le corps de l'article. Code Permet d'insérer des portions de code HTML en évitant qu'elles ne soient interprétées. Dans la fenêtre de l'éditeur, le texte sélectionné est compris entre les marqueurs [code] et [/code]: en revanche, dans la fenêtre du 113

114 Navigateur le code est inséré dans un cadre coloré, placé d'une façon appropriée à l'intérieur du corps de l'article. Insérer lien Permet de définir un lien sur le texte sélectionné. Dans la fenêtre de l'éditeur, le texte sélectionné est compris entre les marqueurs [url] et [/url]: le marqueur [url] doit être accompagné de l'indication du site vers lequel mène le lien ; par exemple, [url= Si le texte sur lequel vous voulez insérer le lien est un URL, il est reconnu comme tel et il est automatiquement placé entre les marqueurs [url] et [/url] accompagnés du chemin correct. Dans la fenêtre du Navigateur, le texte sélectionné sera affiché comme un lien hypertextuel. Insérer image Permet d'insérer une image dans l'article. Après avoir choisi le fichier image dans la fenêtre appropriée, le marqueur [img src="..."] apparaît dans l'éditeur avec le chemin absolu entre guillemets. L'image choisi sera bien évidemment affichée dans la fenêtre du Navigateur. Les marqueurs insérés dans l'éditeur de texte sont semblable aux tags du langage 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 automatiquement 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'on peut voir immédiatement? Vous pouvez faire en sorte que le vidéo soit directement affiché dans l'article en insérant manuellement le code HTML nécessaire dans l'éditeur de texte lors de la composition de l'article. Par exemple, vous pouvez copier le code d'un vidéo YouTube tel qu'il est fourni par le portail et le coller à l'intérieur de l'article. Code HTML pour guestbook : permet d'insérer le code HTML nécessaire pour implémenter un guestbook servant à collecter les commentaires des lecteurs. 114

115 Cette option permet d'activer un guestbook différent de celui proposé automatiquement par WebSite X5 que vous pouvez gérer dans la section Commentaires. Pour un service de guestbook différent, visitez le site Ne pas habiliter les commentaires pour cet article : si vous sélectionnez cette option, les lecteurs ne peuvent pas laisser de commentaires sur l'article. Les commandes de la section Graphiques de cette fenêtre permettent de définir certains aspects graphiques du Blog: Modèle de style : permet de choisir le modèle graphique à appliquer pour dé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éé vers la 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 sera affiché dans la barre d'en-tête du Blog, sous le titre, et un lien sera automatiquement 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 : si vous sélectionnez cette option, le bouton "AddThis" apparaît automatiquement sous chaque article du Blog. Quand le lecteur clique sur ce bouton, il affiche un sous-menu présentant une liste de plusieurs notes socialnetwork : s'il dispose d'un profil sur un de ces circuits, il pourra le sélectionner et partager le lien vers l'article avec ses contacts. Si vous disposez d'un Compte AddThis, vous pouvez l'indiquer dans le champ approprié : vous pourrez ainsi afficher des statistiques sur l'utilisation du service AddThis de la part des lecteurs. Pour plus d'informations sur le service AddThis, pour obtenir un compte ou afficher les statistiques, visitez le site de référence : Les commandes de la section Commentaires de cette fenêtre permettent de gérer l'entrée des commentaires laissés par les visiteurs comme réaction aux articles publiés dans le Blog. 115

116 Voici les options disponibles de la section Gestion des commentaires : Permettre l'entrée des commentaires pour les articles du blog : si vous activez cette option, vous permettez aux utilisateurs de laisser des commentaires relatifs aux articles publiés dans le Blog. Chemin du dossier public : dans ce champ, vous devez indiquer le chemin du dossier ayant l'accès à l'écriture sur le serveur. Normalement les Fournisseurs permettent l'accès à l'écriture pour chaque dossier du serveur : dans ce cas, il n'est pas nécessaire d'indiquer le chemin du dossier public. En revanche, pour connaître le chemin complet du dossier public, contactez votre Fournisseur d'accès au Web. Mot de passe Administrateur : permet d'indiquer le mot de passe permettant d'accéder au Panneau de contrôle enligne pour gérer l'affichage des commentaires laissés par les visiteurs. pour l'envoi accusé de réception des commentaires : permet d'indiquer l'adresse à laquelle vous voulez recevoir l'avis de réception des commentaires sur les articles publiés dans le Blog. Afficher immédiatement les commentaires insérés : si vous sélectionnez cette option, les commentaires laissés par les visiteurs sont immédiatement 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 visiteurs doivent être d'abord approuvés dans le Panneau de contrôle avant d'être affichés enligne. Blog - Panneau de contrôle Le Blog est une sorte d'agenda où l'on publie des articles de différente nature et donne la possibilité aux lecteurs de laisser des commentaires. Si la communauté des lecteurs est active et suffisamment stimulée par la qualité des articles, des discussions intéressantes peuvent se développer sur le thème en cours. Pour donner la possibilité aux lecteurs de laisser des commentaires, il faut configurer le Blog à l'aide des options présentes dans la section Commentaires de la fenêtre Blog. Vous devez notamment : Sélectionner l'option Permettre l'entrée des commentaires pour les articles du blog. 116

117 Indiquer le Chemin du dossier public, à savoir le chemin qui identifie le dossier avec accès à l'écriture présent sur le serveur. Indiquer le Mot de passe du panneau de contrôle, à savoir un mot de passe alphanumérique permettant d'accéder au panneau de contrôle enligne pour gérer les commentaires. Indiquer l' pour l'envoi accusé de réception des commentaires, à savoir l'adresse à laquelle vous recevrez un courriel chaque fois qu'un lecteur laissera un commentaire. Indiquez si les commentaires doivent être publiés immédiatement enligne ou être d'abord approuvés. Ceci étant fait, vous pouvez insérer les articles et publier le Blog. Au bas des articles du Blog, apparaîtra automatiquement un formulaire où les lecteurs pourront insérer leurs commentaires. Ce formulaire demande d'entrer les informations suivantes : Nom, , site Internet et message. Tous les champs sont obligatoires sauf celui relatif au site Internet. A ce stade, dès qu'un lecteur laisse un commentaire, un de notification est automatiquement envoyé à l'adresse indiquée. Si l'option Afficher commentaires après l'approbation dans le panneau de contrôle est sélectionnée, pour que le commentaire soit affiché enligne au bas de l'article auquel il se réfère, il doit être approuvé à l'aide de la commande (automatiquement 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'url où est l'url du site auquel le Blog est relié. Le panneau de contrôle présente une première section où, à travers deux listes déroulantes relatives à la liste des catégories et aux listes des articles qui y sont reliées, vous pouvez identifier l'article dont vous voulez lire les commentaires. Voici la liste des commentaires : chaque commentaire est accompagné du nom de l'auteur, de son adresse , du texte relatif, de la date et l'heure à laquelle il été envoyé. Si le nom de l'auteur est disponible, le programme établit automatiquement un lien vers son site Internet. Contrairement au Blog où les commentaires sont affichés dans l'ordre d'entrée (le dernier inséré reste au fond de la liste), dans le panneau de contrôle, les commentaires sont affichés dans l'ordre chronologique en partant du plus récent. 117

118 Pour gérer les commentaires, il faut donc : Accéder au panneau de contrôle enligne et se connecter à travers le mot de passe indiqué dans le champ de la Section Commentaires de la fenêtre Blog. Identifier, dans les listes déroulantes contenant la liste des catégories insérées et des articles relatifs, l'article dont vous voulez afficher les commentaires. Parcourir la liste des commentaires reçus pour l'article sélectionné et gérer l'affichage des commentaires sur le Blog à l'aide des commandes : Supprimer : pour supprimer le commentaire de la liste du panneau de contrôle et ne pas le publier sur le Blog. Approuver/désapprouver : pour approuver un commentaire, et donc permettre qu'il soit affiché sur le Blog, ou le désapprouver, et donc le supprimer de la liste des articles affichés sur le Blog. Un commentaire désapprouvé n'est pas supprimé des listes présentées dans le panneau de contrôle. Il est fondamental de gérer l'affichage des commentaires sur le Blog pour se protéger des actions de spam et modérer les discussions en éliminant les messages 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 Flux RSS. Toutes les informations insérées peuvent être affichées dans un tableau récapitulatif 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 une nouvelle information. Supprimer... : permet de supprimer l'information sélectionnée dans la Liste des news. Modifier : permet de rappeler la fenêtre Paramètres article pour modifier l'information sélectionnée dans la Liste des news. 118

119 La fenêtre Paramètres article que vous pouvez rappeler en cliquant sur Ajouter 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ètres suivants : 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é au site web. Image RSS : permet de définir une image à associer au Flux RSS. Quand vous testez sur votre ordinateur le fonctionnement du site, un message vous avertit que les Flux RSS ne seront affichés que lorsque le site sera publié enligne. Zone réservée Cette fenêtre contient les commandes permettant de créer une ou plusieurs zones réservées y compris les pages qui durant la phase de Création di plan du site étaient définies comme Protégées. 119

120 Toutes les zones réservées déjà créées seront utilisées dans la liste des zones ré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 une nouvelle zone réservée. Supprimer... : elle permet de supprimer la zone réservée, sélectionnée parmi celles qui existent déjà. Modifier : elle permet de rappeler la fenêtre Zone réservée pour modifier les paramètres de la zone sélectionnée. La fenêtre Zone réservée rappelée à l'aide de la commande Ajouter ou Modifier 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 aux utilisateurs 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 utilisateurs 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'introduction qui apparaîtra sur la page contenant les champs d'entrée du Nom utilisateur et du Mot de passe. Si ce texte contient une adresse , celle-ci sera automatiquement reconnue et activée par le programme. Page de demande d'accès : permet d'accéder au plan du site pour indiquer la page à afficher demandant à l'utilisateur d'effectuer l'enregistrement nécessaire pour obtenir un Nom utilisateur et un Mot de passe. Si vous indiquez une page relative à la demande d'accès, le bouton S'enregistrer apparaît automatiquement. 120

121 Vous pouvez modifier la forme de la page d'accès des zones réservées à l'aide des commandes illustrées dans la section Paramètres graphiques: Police : permet de définir, dans la fenêtre rappelée, le type de police, le style et la taille en points du texte. Texte : permet de définir la couleur du texte qui apparaît dans les champs d'entrée du Nom utilisateur et du Mot de passe. Texte des boutons : permet de définir la couleur de l'inscription des boutons. Arrière-plan champs : permet de définir la couleur de l'arrière-plan du champ 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 des boutons. La section Accès administrateur pour toutes les zones contient les champs permettant de définir les paramètres d'accès réservés à l'administrateur : Connexion Admin : dans ce champ, l' Administrateur, à savoir celui qui a créé le site, peut saisir son Nom Utilisateur lui permettant d'accéder aux pages 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 Mot de passe lui permettant d'accéder aux pages protégées. Le mot de passe défini par défaut est "123". Dans la page de demande d'accès, sous les champs d'entrée du Nom Utilisateur et du Mot de Passe, le programme insère et active automatiquement le boutons Login et, éventuellement, S'enregistrer. Quand vous testez le fonctionnement du site créé sur la machine, un message vous avertit que les pages protégées seront affichées sans la demande d'accès. La zone réservée est activée uniquement lors de la publication du site sur le serveur. Pour que la zone réservée fonctionne correctement, il est nécessaire que le serveur accueillant le site supporte le langage de programmation PHP. 121

122 Panier virtuel e-commerce Cette fenêtre offre des outils et des options nécessaires pour créer et gérer un panier virtuel e-commerce pour les ventes enligne du produit offert par le site web. Les différentes options sont regroupées dans des sections appropriées : section Produits section Formulaire section Expédition section Général Après avoir créé le panier virtuel e-commerce, vous devez entrer dans le site les informations et les liens nécessaires pour que les utilisateurs puissent afficher 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.) et y insérer le bouton "Acheter". Dans ce cas, le bouton "Acheter" peut être créé à travers le lien Commander 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 Liste des produits. Quand vous testez le fonctionnement du site créé sur la machine, un message vous avertit que la commande ne sera pas envoyée et le programme effectue un redirect automatique à la page de confirmation de la commande. Le panier e-commerce ne fonctionne entièrement qu'après la publication du site sur le serveur. Pour que le panier e-commerce fonctionne correctement, le serveur sur lequel le site sera publié doit supporter le langage de programmation PHP et la commande MAIL doit être activée. Pour plus d'informations, contactez votre fournisseur d'accès web. 122

123 Les options de la section Produits de cette fenêtre permettent d'entrer les produits dans le panier, organisés par catégories. Tous les produits déjà insérés sont affichés dans le tableau récapitulatif qui indique la Catégorie, le Nombre de produits insérés pour la catégorie sélectionnée et la Liste des produits. Les contrôles disponible pour créer une liste de produits et pour gérer un panier virtuel enligne sont : Ajouter : permet de rappeler la fenêtre Insertion des produits pour entrer une nouvelle catégorie de produits et les produits y appartenant. Supprimer...: permet de supprimer la catégorie de produit sélectionnée et tous les produits qui y sont associés. Importer : permet d'importer la liste de produits à insérer dans le panier directement à partir d'un fichier externe (format.txt ou.csv pour Microsoft Excel). Le fichier de texte avec la liste des produits doit être composé comme suit : chaque ligne doit contenir un produit ; les informations suivantes doivent être disponibles pour chaque produit : le nom de la catégorie, le nom du produit, la description du produit, 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 Taille M Taille S Pantalon;PantaJazz;PantaJazz rouge à rayures;39.95;taille XL Taille L Taille M Taille S... Modifier : permet de rappeler la fenêtre Insertion des produits pour modifier la catégorie des produits sélectionnée et/ou les produits qu'elle contient. 123

124 La fenêtre Insertion des produits rappelée en cliquant sur Ajouter ou Modifier apparaît comme illustré ci-dessous : Nom de catégorie : permet d'entrer le nom d'une nouvelle catégorie de produits que vous voulez créer ou bien d'afficher le nom d'une catégorie de produits dont vous voulez modifier la composition. Liste des produits : permet d'afficher la liste des produits figurant dans la catégorie courante. Ajouter : permet d'ajouter un nouveau produit dans la catégorie courante des produits. La section Générales permet d'indiquer pour chaque produit ajouté le Nom/Code, la Description, le Fichier image et le Prix. Les informations sont affichées dans le champ Liste de catégorie de produits. La section Options permet d'insérer les Variantes pour le produit : par exemple, 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 de produits. Modifier : permet de modifier, dans la boîte de dialogue appropriée, les informations 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 le produit 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 le produit qui le suit dans la liste des produits. 124

125 Les options de la section Expédition de cette fenêtre permettent de définir les 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ées dans un tableau récapitulatif où sont indiqués le Nom, la Description et le Prix. Voici les commandes disponibles pour créer la liste des méthodes d'envoi et de paiement actives pour le panier e-commerce : Ajouter : permet de rappeler la fenêtre Entrer le mode d'expédition et de paiement 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 de paiement sélectionnée afin de spécifier et de définir plus rapidement toutes les méthodes offertes pour le panier e-commerce. Supprimer...: permet de supprimer la méthode d'expédition et de paiement sélectionnée. En haut : permet de déplacer la méthode d'envoi et de paiement sélectionné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électionnée après celle qui la suit dans la Liste. Modifier : permet de rappeler la fenêtre Entrer le mode d'expédition et de paiement 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 cliquant sur Ajouter ou Modifier apparaît comme illustré ci-dessous : 125

126 Nom : permet d'identifier la méthode d'expédition et de paiement à l'aide d'une inscription brève. Description : permet de fournir une description complète de la méthode d'expédition et de paiement. Prix : permet de définir les dépenses additionnelles relatives à la méthode d'expédition et de paiement. de réponse au client : permet de définir le message qui sera automatiquement envoyé au client qui a effectué une commande d'achat. Vous pouvez spécifier un différent message pour chaque méthode d'expédition et de paiement : ainsi, vous pouvez donner des indications spécifiques pour chaque méthode. Le message sera automatiquement complété par le compte-rendu de la commande et le numéro de commande qui 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 le paiement 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 pour gérer les paiements par carte de crédit. Dans ce cas, vous devez spécifier : Compte Paypal : entrer le compte obtenu comme un utilisateur PayPal enregistré. Page de confirmation du paiement : permet d'afficher le plan du site et de sélectionner la page qui apparaît pour confirmer que le paiement a é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 de paiement. Autre système de paiement : activez cette option si vous voulez utiliser un système différent de PayPal pour gérer les paiement par carte bancaire. 126

127 Dans ce cas, vous devez spécifier : Code HTML pour le bouton 'Payer maintenant' : tapez le code HTML fourni, après l'inscription, par votre Fournisseur de Service de Paiement. Ce code permet d'activer le service sur le panier e-commerce, en affichant le bouton "Payer maintenant" correspondant aux paramètres qui identifient l'utilisateur. Le code HTML fourni par votre Fournisseur de Service de Paiement est utilisé 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 la commande du client. Pour que le panier fonctionne, vous devez taper manuellement 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éfinir la composition du formulaire que l'utilisateur doit remplir pour effectuer la commande à travers le panier e-commerce. Le cadre Adresse où recevoir les commandes propose un champ où vous devez taper l'adresse à laquelle l'administrateur du site veut recevoir les commandes effectuées par les utilisateurs à travers le panier virtuel e-commerce. L'option Joindre les données dans le format CSV permet 127

128 d'enregistrer les données collectées également dans un fichier au format CSV joint à l' . 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: vous pouvez importer facilement ces fichiers dans les programmes de gestion des 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 de points 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 des textes des . Arrière-plan du message : permet d'indiquer la couleur d'arrière-plan des . Logo de l'entreprise : permet d'importer un fichier graphique (JPG, PNG, GIF) pour personnaliser l' . Vous pouvez importer un logo d'entreprise comme 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 100 pixels, elle est automatiquement redimensionnée. Le cadre Demande des données client offre une liste de champs à utiliser dans le modèle (formulaire) de commande. Pour insérer un champ, cliquez sur le champ voulu pour le cocher. Vous pouvez utiliser les options suivantes : Description : propose le nom du champ, à savoir le texte affiché en regard du champ pour indiquer à l'utilisateur l'information requise. Vous pourrez modifier 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, vous pouvez rendre le champ obligatoire. La liste déjà proposée contient tous les champs généralement utilisés dans un formulaire d'enregistrement: vous pouvez personnaliser les champs indiqués et vous disposez de 4 champs vides à utiliser pour demander des informations particulières. 128

129 Le dernier champ proposé dans la liste est le champ d' vous ne pouvez pas rendre invisible ce champ ou non obligatoire car il est nécessaire de connaître l' de l'utilisateur qui envoie la commande. Le cadre Conditions d'acceptation propose les commandes nécessaires pour compléter le formulaire avec le texte des conditions que l'utilisateur doit accepter avant d'envoyer la commande d'achat Ajouter les conditions d'acceptation (ex: Privacy) : si vous sélectionnez cette option, vous pourrez ajouter au bas du formulaire un champ contenant les conditions que l'utilisateur doit accepter avant d'envoyer la commande. Vous pouvez utiliser ce champ, par exemple, pour présenter les normes relatives à la confidentialité pour le traitement des données collectées. Titre de la condition : permet d'entrer le texte à afficher comme titre du champ où figurent les conditions. Texte de la condition : permet d'insérer le texte des conditions que l'utilisateur devra accepter afin d'effectuer la commande. Les options de la section Général de cette fenêtre permettent de définir certains 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écessaires pour formater les textes du formulaire, sauf ceux présents dans la table de présentation du produit : 129

130 Police : permet de définir le type de caractère, le style et la taille en points du texte. Couleur de texte : permet de définir la couleur du texte dans la fenêtre Couleur. Image 'Ajouter au panier' : permet de définir l'image à utiliser pour créer le bouton 'Ajouter au panier', à savoir le bouton permettant d'insérer le produit dans le panier. Image 'Enlever du panier' : permet de définir l'image à utiliser pour créer le bouton 'Enlever du panier', à savoir le bouton permettant de supprimer un produit du panier. Image 'Aperçu non disponible' : permet d'indiquer l'image à utiliser quand l'image associée n'a pas été choisie pour un produit et que dans la page Liste 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 une série d'images appropriées pour créer les boutons permettant d'ajouter et supprimer les produits du panier. La fenêtre des Paramètres graphiques de la liste des produits propose les commandes nécessaires pour définir l'aspect des tableaux présentant les produits 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 de la cellule. Arrière-plan de l'en-tête : permet de définir la couleur de fond de l'entê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 pour dé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 symbole de la devise sera affiché à droite des prix. 130

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 champ pour indiquer la TVA à appliquer: Dans ce cas, la TVA sera appliquée seulement au total du montant de la commande. Vous pouvez également entrer le prix des produits toute taxe comprise et 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 pour identifier la page à afficher quand vous cliquez sur le bouton 'Continuer les courses' qui est créé automatiquement par le programme dans la page du panier. 131

132 Etape 5 Exporter Exportation du site Dans cette phase, vous devez indiquer le mode d'exportation pour le projet créé. Vous pouvez publier les fichiers sur un serveur à travers une session FTP, ou sur le disque de votre ordinateur. Vous pouvez également regrouper tous les fichiers du projet dans un seul dossier et les transférer vers un autre ordinateur 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 enregistrés sur l'ordinateur où le site a été créé. Pour faire en sorte que les utilisateurs qui se connectent à Internet puissent voir les pages du site, il faut copier ces fichiers sur le serveur, c'est à dire sur un ordinateur toujours connecté, à travers une session FTP. Pour exporter tous les fichiers du projet, il faut indiquer les Paramètres de connexion : Adresse FTP : dans ce champ, il faut taper l'adresse FTP (données fournies par le fournisseur d'accès Internet). Voici un exemple d'adresse FTP : "ftp.incomedia.it", où "incomedia.it" est le nom du domaine. 132

133 Nom utilisateur : dans ce champ, il faut taper le nom utilisateur (fourni par le fournisseur d'accès Internet). Mot de passe : dans ce champ, il faut saisir le mot de passe (fourni par le fournisseur d'accès Internet). Vous pouvez aussi spécifier quelques paramètres optionnels qui ne sont pas nécessairement requis, comme par exemple : Dossier de destination : dans ce champ, il faut insérer le dossier de destination attribué par le fournisseur d'accès. Si vous ne tapez aucun chemin, vous pourrez le choisir dans la page-écran suivante affichée par WebSite X5. Utiliser FTP passif : pour obtenir une meilleure compatibilité de connexion avec le serveur, il est conseillé d'utiliser les modes de publication FTP passifs. Enregistrer mot de passe : quand cette option est sélectionnée, le mot de passe est automatiquement enregistré. Enfin vous pouvez spécifier le Type de Téléchargement, à savoir ce que vous voulez effectivement publier : Exporter tous les fichier du site Internet : dans ce cas, tout le site sera publié. Ce mode est indiqué lors de la première publication du projet ou aprè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ès l'exportation effectuée à la date indiquée. Ce mode est approprié pour les sites qui sont constamment mis à jour et requiert un temps inférieur par rapport à 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 les modifications. Même si vous demandez seulement l'exportation des fichiers modifiés, les pages HTML et les fichiers de ressources (figurant dans le sous-dossier Res) seront republiés : il est en effet très probable qu'elles aient été mises à jour. Exporter seulement le Blog et les Flux RSS : dans ce cas, vous publiez seulement les fichiers XML du Flux RSS géré à travers la section appropriée des 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 Flux RSS sans effectuer une mise à jour. 133

134 Après avoir effectué la connexion au serveur, les dossiers disponibles apparaissent 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 Fournisseur d'accès : tous les dossiers présents sur le Serveur ne sont pas faits pour la publication. Les commandes disponibles sont : Dossier supérieur Elle permet de se déplacer dans le dossier supérieur. Créer un nouveau dossier Elle permet de créer un nouveau dossier. Effacer Elle permet d'éliminer le fichier ou le dossier sélectionné. Pour être éliminés, les dossiers doivent être vides. Renommer Elle permet de modifier le nom du fichier ou du dossier sélectionné. Actualiser Elle permet de recharger le contenu du dossier courant. Pendant l'exportation, WebSite X5 copie sur le serveur tous les fichiers contenus dans le dossier d'enregistrement. Si ce dossier contient des fichiers portant le 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 disponible sur le site de WebSite X5 à la page 134