www.websitex5.com

 Copyright 2009 Incomedia. All rights reserved.
Official Website:
www.websitex5.com
[email protected] - www.incomedia.eu
1
 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
Sommaire
Information sur la guide.......................................................... 5
Travailler avec WebSite X5 ...................................................... 6
Environnement de Travail........................................................ 7
Etape 1 – Paramètres généraux
Bienvenue dans Incomedia WebSite X5 .......................................10
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'email ..............................................68
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 ..................................................................92
3
Etape 4 – Paramètres avancés
Paramètres avancés ............................................................. 94
Style du menu de premier niveau ............................................. 95
Style de liste déroulante ....................................................... 99
Style de sous-menu ............................................................. 101
Style de texte ...................................................................103
Page d'introduction............................................................. 106
Coin publicitaire ................................................................ 108
Blog ............................................................................... 110
Blog – Panneau de contrôle ................................................... 116
Flux RSS .......................................................................... 118
Zone réservée ...................................................................120
Panier virtuel e-commerce.................................................... 122
Etape 5 – Exporter
Exportation du site ............................................................. 132
Exportation du site sur Internet .............................................. 132
Exportation sur disque ......................................................... 135
Regroupement des fichiers du projet........................................ 135
Remarques
Remarques sur la transparence des images ................................ 137
4
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
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'e-mail. 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
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 à www.websitex5.com : permet d'accéder au site Internet de référence du logiciel.
 Tutorial : permet d'accéder à une série de Tutoriaux vidéos 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
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
8
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
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
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
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 e-mail, des étiquettes et des textes des paniers virtuels ecommerce, 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
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
 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 = (("https:" == document.location.protocol) ? "https://ssl." :
"http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "googleanalytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
14
 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
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
 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
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
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 www.websitex5.com/templates et accédez
à la section WebSite X5 Templates consacrée aux modèles graphiques.
Sur WebSite X5 Templates vous trouverez de nombreux modèles graphiques,
réalisés par Incomedia ou d'autres utilisateurs, aussi bien gratuits 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
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 e-mail.
5. Arrière-plan : c'est la zone externe du site qui est affichée quand la fenêtre du navigateur est ouverte avec une taille dépassant la résolution 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
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
 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
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
 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
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
 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
 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
 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
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
 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
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
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
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
 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
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
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
 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
 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.
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.
38
 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 fi39
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 SiteMap, 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
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
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
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
 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 ap44
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
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
 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
 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
 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
 é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
 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 email, 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
 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-
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
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
 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
 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
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
 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
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
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
 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
 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
 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
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
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
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
 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
Objet Formulaire d'envoi d'email
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'e-mail contenant les données collectées à
travers le formulaire ne sera pas envoyé. Le formulaire e-mail fonctionne entièrement après la publication du site sur le serveur.
Pour que le formulaire d'envoi e-mail 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
 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 caractère @ et, dans le texte suivant, un point.
 Zone de texte : champ de texte disposé sur plusieurs lignes permettant à
l'utilisateur d'entrer un commentaire ou une question.
 Date : champ de texte où l'utilisateur doit entrer une date. En réalité,
trois champs sont insérés (mois, jour et année) formatés selon les dé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
 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 e-mail ou à remplir un formulaire pour demander des
informations, adhérer à un service , etc. Malheureusement, des programmes en mesure d'identifier les adresses e-mail 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 e-mail. Pour cela, WebSite
X5 n'affiche plus l'adresse e-mail dans le pied de page, comme auparavant.
 Utiliser la question de contrôle dans les formulaires d'envoi e-mail.
Choisissez une question très simple, dont la réponse est évidente 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
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
 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 e-mail 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 e-mail : les données saisies dans le formulaire
sont envoyées via e-mail en exploitant un script PHP.
 Envoyer les données au fichier : les données saisies dans le formulaire
sont envoyées via e-mail en exploitant le script indiqué (PHP, ASP, etc.).
Cette option permet d'envoyer les données à travers un script différent si
72
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'E-mail 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'email. 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 e-mail.
 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
Si l'option Envoie un e-mail de confirmation à l'utilisateur est sélectionné,
l'utilisateur recevra automatiquement un e-mail de confirmation.
 Champ E-mail de l'utilisateur : permet d'indiquer dans quel champ du module le programme doit prendre l'adresse courriel de l'utilisateur qui doit
recevoir l'e-mail de confirmation.
 Objet du message : permet de définir l'objet de l'e-mail de confirmation.
 Texte du message : permet d'indiquer le message de l'e-mail de confirmation.
 Ajouter les données collectées : permet de joindre l'e-mail de 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'e-mail engendrés.
Le cadre Paramètres graphiques du formulaire propose les options suivantes :
 Etiquette de texte en haut : permet de positionner l'étiquette de 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
 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
 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 e-mail.
 Arrière-plan du message : permet d'indiquer la couleur d'arrière-plan des e-mail.
Vous pouvez contrôler l'aspect des e-mail en rappelant la fenêtre Aperçu.
Objet Code HTML
Cette fenêtre propose un éditeur de texte qui permet de taper les 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
à 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
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
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
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
 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
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
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
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.
+
84
=
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
 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
 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
 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
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 E-mail. Pour définir ce type de lien, il suffit de taper l'adresse Email à 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
 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
 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
 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
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
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&rsquo;agenda
sur le Web pour publier des nouvelles que les utilisateurs pourront commenter.
94
 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
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
 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
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
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
 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
 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
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
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
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/E-mail. 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/e-mail, vous ne pouvez pas modifier les alignements des notes et l'adresse e-mail de l'auteur.
 Ligne inférieure : permet de définir l'épaisseur en pixels et la 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
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
 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
 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
 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
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
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 www.monsite.fr/blog où www.monsite.fr
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
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
 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
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
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=http://www.websitex5.com]. 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
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
www.google.com/friendconnect
 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 : www.addthis.com.
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
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.
 E-mail pour l'envoi accusé de réception des commentaires : permet d'indiquer l'adresse e-mail à 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
 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'E-mail pour l'envoi accusé de réception des commentaires, à
savoir l'adresse e-mail à 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, e-mail, 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 e-mail de notification
est automatiquement envoyé à l'adresse e-mail 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
www.monsite.fr/blog/admin où www.monsite.fr 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 e-mail, 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
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
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
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 e-mail, 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
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
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
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
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
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
 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.
 E-mail de réponse au client : permet de définir le message e-mail 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
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 E-mail où recevoir les commandes propose un champ où
vous devez taper l'adresse e-mail à 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
d'enregistrer les données collectées également dans un fichier au format CSV
joint à l'e-mail. Dans un fichier CSV, les données sont indiquées sous forme
textuelle, comme une longue liste de rubriques séparées par un point-virgule:
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 e-mail.
 Arrière-plan du message : permet d'indiquer la couleur d'arrière-plan des
e-mail.
 Logo de l'entreprise : permet d'importer un fichier graphique (JPG, PNG,
GIF) pour personnaliser l'e-mail. Vous pouvez importer un logo d'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
Le dernier champ proposé dans la liste est le champ d'e-mail: vous ne pouvez
pas rendre invisible ce champ ou non obligatoire car il est nécessaire de
connaître l'e-mail 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
 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
 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
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
 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
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 www.websitex5.com/webspace.
134
Exportation sur disque
Cette fenêtre permet de publier le site créé sur un autre disque de l'ordinateur.
L'exportation sur disque permet d'avoir une copie sur PC des fichiers qui seront publiés
sur le Serveur, pour pouvoir modifier les pages HTML créées avant la publication.
Pour exporter tous les fichiers du projet, il suffit de spécifier :
 Dossier de destination : dans ce champ, indiquez le dossier vers lequel
vous voulez exporter le site créé. Si le dossier spécifié n'existe pas, il sera
automatiquement créé.
Pour créer une copie de sauvegarde du projet, utilisez la fonction Regrouper : vous disposez ainsi d'une copie des fichiers originaux du projet
et non pas des fichiers créés par le programme pour la publication.
Regroupement des fichiers du projet
Cette fenêtre permet de regrouper dans un dossier, tous les fichiers liés au
projet (en les optimisant) afin de les transférer vers un autre ordinateur.
Pour regrouper les fichiers du projet, il suffit de spécifier :
 Dossier de destination : entrez le dossier vers lequel vous voulez exporter
le fichier du projet. Si le dossier spécifié n'existe pas, il sera automatiquement créé.
Lors du regroupement des fichiers du projet, vous pouvez demander d'optimiser
les images utilisées en sélectionnant simplement une des options suivantes :
 Aucune optimisation : les images insérées dans le site sont copiées dans un
dossier tel quel sans tenir compte de leur taille et/ou des filtres éventuels.
Choisissez cette option quand le site n'est pas encore définitif : vous disposez ainsi des images originales que vous pourrez modifier à votre gré.
 Optimisation de base : le programme crée une copie avec une résolution
inférieure des images les plus grandes dans les pages du site et utilise ces
copies pour le regroupement.
Choisissez cette option quand le site est presque définitif : vous obtiendrez ainsi un chargement plus rapide de l'aperçu.
135
 Optimisation complète : le programme crée une copie des images dans les
pages du site en fonction de leur résolution et des filtres appliqués et il
utilise ces copies pour le regroupement.
Choisissez cette option quand le site est définitif et que vous ne devez
plus modifier les images.
Comme WebSite X5 enregistre le chemin absolu des fichiers liés, pour que le
projet soit correctement transféré sur un autre poste de travail, le dossier de
destination doit avoir un chemin que l'on peut reproduire sur le second ordinateur. Par exemple, si le travail est regroupé dans le dossier C:/MonTravail
du premier ordinateur, il faut créer un dossier C:/MonTravail sur le deuxième
ordinateur pour y copier tous les fichiers. Pour pouvoir créer le même parcours sur le deuxième ordinateur, il est important que le dossier où le projet
sera regroupé ne soit pas sur le bureau Windows : le chemin du dossier Bureau
peut en effet être différent d'un ordinateur à l'autre.
Dans le dossier de destination, le programme crée une copie des fichiers du
projet et y copie tous les fichiers qui y sont reliés. La copie du fichier du projet est automatiquement mise à jour avec le nouveau chemin afin de l'afficher correctement. L'original du fichier du projet reste donc le même.
Les fichiers reliés au projet sont en revanche organisés dans les sous-dossiers
en fonction du critère suivant:
 Sous-dossier General : contient les fichiers définis dans les Paramètres généraux tels que l'icône du site, les images/animations utilisées dans le modèle personnalisé ou pour personnaliser la barre de titre.
 Sous-dossiers ObjImage, ObjVideo, ObjFlash, etc. : ils contiennent les fichiers utilisés pour créer les objets insérés dans les pages du site.
 Sous-dossier Advanced : contient les fichiers définis dans les Paramètres
avancés tel que le curseur pour les liens, les images des listes à puces des
sous-menus, les icônes du panier e-commerce, les drapeaux pour choisir la
langue de consultation, etc.
 Sous-dossier Links : contient les fichiers reliés aux liens présents dans le site.
 Sous-dossier Aspect : contient les fichiers utilisés pour définir l'aspect des
cellules de la grille de mise en page.
Cette fonction est utile pour créer une copie de sauvegarde du projet.
136
Remarques sur la transparence des images
Lorsque vous définissez l'aspect de la cellule et des boutons du menu de premier niveau, vous pouvez faire en sorte que le programme crée automatiquement des images.
Comme les boutons n'ont pas toujours une forme rectangulaire, les images
sont enregistrées comme fichier .GIF avec un arrière-plan transparent. Par
ailleurs, si les bords du bouton sont arrondis, il faut appliquer l'effet antialiasing pour éviter que le périmètre soit égrené. Grâce à cet effet, la couleur
configurée comme transparente est fusionnée avec le fond sur lequel l'image
est insérée.
Vous devez configurer correctement la couleur qui sera considérée comme
transparente. Pour l'aspect de la cellule, vous pouvez agir sur l'option Couleur
bordure ; pour les boutons, utilisez l'option Couleur externe pour transparence de la section Graphiques dans la fenêtre Aspect du premier niveau.
Pour éviter que les images soient "trouées", il faut choisir comme couleur
transparente une couleur qui n'apparaît pas dans l'image (par exemple : la
couleur du texte ou la couleur d'arrière-plan).
Pour éviter que les images aient une bordure de couleur différente, la couleur
transparente doit être semblable à la couleur de fond sur laquelle l'image est
superposée.
Dans la plupart des cas, il est conseillé de choisir la couleur transparente
parmi les niveaux de gris tel que proposé par défaut.
Pour identifier aisément la couleur de fond sur laquelle l'image est superposée, vous pouvez utiliser l'outil Compte-goutte (Pipette) présent
dans la fenêtre Couleur.
137
Nome file:
Manuale X5 Evo 8 FR.doc
Directory:
F:\Programmi\WebSite X5 2008\Manuale
Modello:
C:\Users\Simona\AppData\Roaming\Microsoft\Modelli\Normal.dot
Titolo:
DISCLAIMER
Oggetto:
Autore:
Stefano Ranfagni
Parole chiave:
Commenti:
Data creazione:
02/01/2009 15.56.00
Numero revisione:
363
Data ultimo salvataggio:
11/03/2009 15.59.00
Autore ultimo salvataggio: Simona
Tempo totale modifica
3.290 minuti
Data ultima stampa: 11/03/2009 15.59.00
Come da ultima stampa completa
Numero pagine: 137
Numero parole: 34.191 (circa)
Numero caratteri: 194.892 (circa)