Vous êtes sur la page 1sur 80

Votre Site Web 4

Copyright

R 2006

Micro Application 20-22, rue des Petits-Htels 75010 Paris

dition septembre 2006

Auteurs

Serif (Europe) Ltd / Micro Application


Toute reprsentation ou reproduction, intgrale ou partielle, faite sans le consentement de MICRO APPLICATION est illicite (article L122-4 du code de la proprit intellectuelle).Cette reprsentation ou reproduction illicite, par quelque procd que ce soit, constituerait une contrefaon sanctionne par les articles L335-2 et suivants du code de la proprit intellectuelle.Le code de la proprit intellectuelle nautorise, aux termes de larticle L122-5, que les reproductions strictement destines lusage priv. Pour le logiciel, seule est autorise une copie de sauvegarde si cela est indispensable pour prserver son utilisation.

Avertissement aux utilisateurs Les informations contenues dans ce produit sont donnes titre indicatif et nont aucun caractre exhaustif. Elles ne sauraient engager la responsabilit de lditeur. La socit MICRO APPLICATION ne pourra tre tenue pour responsable de toute omission, erreur ou lacune qui aurait pu se glisser dans cet ouvrage ainsi que des consquences, quelles quelles soient, qui rsulteraient de lutilisation des informations et indications fournies. ISBN : 2-7429-6944-6 Microsoft, Windows et DirectX sont des marques commerciales dposes de Microsoft Corporation. Les autres noms de socit, de marque ou de produit cits sont reconnus comme marques commerciales ou marques commerciales dposes de leur propritaire respectif. MICRO APPLICATION 20,22 rue des Petits-Htels 75010 PARIS Tl : 01 53 34 20 20 - Fax : 01 53 34 20 00 http://www.microapp.com Support technique : Tl : 01 53 34 20 46 - Fax : 01 53 34 20 00 galement disponible sur www.microapp.com

Retrouvez des informations sur ce logiciel !


Rendez-vous sur le site Internet de Micro Application www.microapp.com. Dans le module de recherche, sur la page daccueil du site entrez la rfrence 4 chiffres indique sur le prsent manuel. Vous accdez directement la fiche produit de ce logiciel.

7944

Licence dutilisation de ce progiciel Micro Application


Article 1 : Acceptation des conditions Par le seul fait dinstaller le progiciel contenu sur le support, le client sengage respecter les conditions dutilisation gurant ci-aprs. Article 2 : Licence dutilisation En acqurant le support inclus, le client bncie dune licence dutilisation du progiciel contenu sur ce support. Cette licence donne uniquement le droit deffectuer une seule installation du progiciel, et de le faire fonctionner conformment sa destination, sur le matriel prvu. Ce progiciel livr dans sa version code-objet est directement lisible par lordinateur. Cette licence est valable pour la dure lgale de la protection du progiciel. Article 3 : Limites du droit dutilisation Le client ne dtient sur le progiciel que le droit dutilisation de la version objet. Il sengage donc ne pas le reproduire, en totalit ou en partie. Le logiciel tant fourni sur un support numrique garantissant sa prservation, le support original tient lieu de copie de sauvegarde au sens de larticle L 122-6-1 du code de la proprit intellectuelle. Le client sengage galement ne pas chercher le modier, le complter, ladapter un autre systme dexploitation, le dcompiler (ingnierie inverse) ou le traduire. Le progiciel est conu pour lusage strictement priv du client, qui sinterdit donc formellement de consentir des sous-licences, de le louer, de le prter, de le commercialiser en tout ou partie ... De manire gnrale, il est strictement interdit den faire lobjet ou linstrument dune utilisation qui bncie un tiers, que ce soit titre gratuit ou onreux. Ces restrictions concernent le progiciel pris dans son ensemble mais galement dans toutes ses composantes : ainsi, les photographies, images, cliparts, sons, textes et tous autres lments contenus dans le progiciel, restent la proprit de leurs crateurs. Tout usage du progiciel, toute opration technique sur le progiciel, non prvus par la prsente licence est une contrefaon, dlit pnal sanctionn de peines damende et demprisonnement. Article 4 : Logiciels en shareware ou logiciels contributifs Les logiciels commercialiss sous lappellation de shareware sont exclusivement prvus pour vous permettre de les valuer ou de les tester. Ils sont dailleurs le plus souvent constitus de versions incompltes. MICRO APPLICATION nest pas lauteur de ces logiciels et vous cde exclusivement le support comportant les versions dvaluation. Si vous dcidez effectivement de les utiliser, vous devez vous enregistrer directement auprs de lauteur mentionn pour chaque shareware, dans les dlais et les conditions (notamment nancires) quil exige. A dfaut de remplir ces conditions, vous serez considr comme contrefacteur. Article 5 : Garantie Dans le cas o le client constaterait une dfectuosit du support, il dispose dun mois compter de son achat pour en faire retour Micro Application. Pour bncier de cette garantie, le client doit obligatoirement adresser ses frais, Micro Application, le support accompagn du bon de garantie que vous trouverez la n du manuel (papier ou lectronique) ou de la carte denregistrement (si celle-ci na pas dj t envoye). Micro Application retourne alors ses frais, au client, ladresse indique sur le bon de garantie ou la carte denregistrement, un nouveau support. Quand un protocole informatique de scurit est implant dans le logiciel, ce protocole prsente certaines limitations. Aussi, il est de la responsabilit du client de dterminer si le logiciel correspond a ses besoins rels. Le progiciel tant livr en ltat, il nest fourni par Micro Application aucune autre garantie et, notamment pour les relations du client avec son hbergeur internet. AVERTISSEMENT. Les informations contenues dans ce produit sont donnes titre indicatif et nont aucun caractre exhaustif voire certain. A titre dexemple non limitatif, ce produit peut vous proposer une ou plusieurs adresses de sites Web qui ne seront plus dactualit ou dont le contenu aura chang au moment o vous en prendrez connaissance. Aussi, ces informations ne sauraient engager la responsabilit de lEditeur. La socit MICRO APPLICATION ne pourra tre tenue responsable de toute omission, erreur ou lacune qui aurait pu se glisser dans ce produit ainsi que des consquences, quelles quelles soient, qui rsulteraient des informations et indications fournies ainsi que de leur utilisation.

Avertissement sur lpilepsie


A lire avant toute utilisation dun jeu vido par vous-mme ou votre enfant Certaines personnes sont susceptibles davoir des crises dpilepsie ou davoir des pertes de conscience la vue de certains types de lumires clignotantes ou dlments frquents dans notre environnement quotidien. Ces personnes sexposent des crises dpilepsie lorsquelles regardent certaines images tlvises ou lorsquelles jouent certains jeux vido. Ces phnomnes peuvent apparatre alors mme que le sujet na pas dantcdent mdical ou na jamais t confront une crise dpilepsie. Si vous-mme ou un membre de votre famille avez dj prsent des symptmes lis lpilepsie (crise ou perte de conscience) en prsence de stimulations lumineuses, veuillez consulter votre mdecin avant toute utilisation. Nous conseillons aux parents dtre attentifs leurs enfants lorsquils jouent avec des jeux vido. Si vous-mme ou votre enfant prsentez un des symptmes suivants : vertige, trouble de la vision, contraction des yeux ou des muscles, mouvements involontaires ou convulsions, veuillez immdiatement cesser de jouer et consulter un mdecin. Prcautions prendre dans tous les cas pour lutilisation dun jeu vido : Ne vous tenez pas trop prs de lcran. Jouez bonne distance de lcran de lordinateur et aussi loin que le permet le cordon de raccordement. Utilisez de prfrence les jeux vido sur un cran de petite taille. vitez de jouer si vous tes fatigu ou si vous manquez de sommeil. Assurez-vous que vous jouez dans une pice bien claire. En cours dutilisation, faites des pauses de dix quinze minutes toutes les heures. Veuillez conserver le CD dinstallation original proximit de votre PC, le systme pouvant vous le rclamer lors dun lancement du programme.

Sommaire
1. 2. Crdits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Bienvenue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 2.1. propos du manuel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 2.2. Liens vers lAide en ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Installation et dmarrage du programme . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 3.1. Installation du logiciel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 3.2. Assistant Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 3.3. Dsinstallation du logiciel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.1. Quest-ce quun site Web ? . . . . . . . . . . . . . . 4.2. Comment fonctionne Votre Site Web 4 ? . . . . 4.3. Que dois-je faire pour publier mon site Web ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 12 12 12 13 13 14 16 20 21 21 22 23 24 26 27 28 28 30 31

3.

4.

5.

Premiers pas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.1. Utiliser lAssistant Dmarrage . . . . . . . . . . . . . . . . . . . . . . 5.2. Utiliser un modle de page Web . . . . . . . . . . . . . . . . . . . . . 5.3. Dcouvrir lenvironnement de Votre Site Web 4 . . . . . . . . . . 5.4. Pour obtenir davantage daide sur les notions fondamentales Utiliser du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.1. Les zones de texte . . . . . . . . . . . . . . . . . . . . . . . . . . 6.2. Objets au niveau de la maquette . . . . . . . . . . . . . . . . 6.3. Utiliser des zones de texte . . . . . . . . . . . . . . . . . . . . 6.4. diter du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.5. Importer du texte . . . . . . . . . . . . . . . . . . . . . . . . . . 6.6. Utiliser le texte artistique . . . . . . . . . . . . . . . . . . . . . 6.7. Utiliser du texte de tableau . . . . . . . . . . . . . . . . . . . . 6.8. Modier les couleurs Web . . . . . . . . . . . . . . . . . . . . 6.9. Astuces de conception . . . . . . . . . . . . . . . . . . . . . . 6.10. Pour obtenir davantage daide sur lutilisation de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6.

7.

Utiliser des images, des animations et du multimdia . . . . . . . . . . . . . . . . . . 32 7.1. Les images dans Votre Site Web 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 7.2. Importer une image ou une animation . . . . . . . . . . . . . . . . . . . . . . . . 33 7.3. Crer des contours et des formes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 7.4. Autres outils et techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 7.5. Ajouter des liens hypertextes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 7.6. Ajouter du son et une vido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 7.7. Astuces de conception . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 7.8. Pour obtenir davantage daide sur lutilisation dimages, danimation et de multimdia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Utiliser des liens hypertextes et linteractivit . . . . . . . . . . . . . . . . . . . . . . . . 50 8.1. Le texte dun lien hypertexte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 8.2. Les images comportant un lien hypertexte . . . . . . . . . . . . . . . . . . . . . 51

8.

8.3. 8.4. 8.5. 8.6. 9.

Utiliser des zones dynamiques et des images survoles . . . . . . . . . . . propos du code HTML et des applets Java . . . . . . . . . . . . . . . . . . . Astuces de conception . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Pour obtenir davantage daide sur les liens hypertextes et linteractivit . . . . . . . . . . . . . . . .

. . . . . . . . . . . .

52 53 54 59 60 60 61 62 63 64 65 66

Visualiser, publier et maintenir le site . . . . . . . . . . . . . . . . . . . . . . . . . . . 9.1. Optimiser la publication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9.2. Visualiser le site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9.3. Enregistrer dans un dossier local . . . . . . . . . . . . . . . . . . . . . . . . . 9.4. Publier sur le Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9.5. Maintenir votre site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9.6. Astuces de conception . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9.7. Pour obtenir davantage daide sur les tches lies la publication...

10.

Crer une conception Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 10.1. Structure du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 10.2. Mettre en page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

Votre Site Web 4

1.

Crdits

chantillons de Cliparts fournis par Serif ArtPacks r Serif (Europe), Ltd. et Paul Harris Parties dimages r1997-2001 Nova Development Corporation ; r 1996-99 Cliptoart; r 1996-99 Focus Designs; r 1996-99 Hemera Technologies Inc.; r 1997-98 Seattle Support Group; r 1995 Expressions Computer Software Contenu des parties dimages numriques (c) 1997-2001 Hemera Technologies Inc. Tous droits rservs. chantillons de polices TrueType fournis par Serif FontPacks r Serif (Europe) Ltd. Technologie dexportation/dimportation de parties dimages r AccuSoft Corp. & Eastman Kodak Company & LEAD Technologies, Inc. THE PROXIMITY HYPHENATION SYSTEM r 1989 Proximity Technology Inc. Tous droits rservs. THE PROXIMITY/COLLINS DATABASE SYMBOL 210 \f "Symbol" \s 10 r 1990 William Collins Sons & Co. Ltd. ; r 1990 Proximity Technology Inc. Tous droits rservs. THE PROXIMITY/MERRIAM-WEBSTER DATABASE SYMBOL 210 \f "Symbol" \s 10 r 1990 Merriam-Webster Inc. ; r 1990 Proximity Technology Inc. Tous droits rservs. Correcteur orthographique Sentry r 2000 Wintertree Software Inc. Tous les noms de produits Micro Application sont des marques de Micro Application. Microsoft, Windows et le logo Windows sont des marques dposes de Microsoft Corporation. Toutes les autres marques sont reconnues. Votre Site Web 4 r 2002 Micro Application/Serif (Europe) Ltd.

Votre Site Web 4

2.

Bienvenue

2.1. propos du manuel


Le manuel de Votre Site Web 4 vous fournit toutes les bases de la publication Web ainsi que des trucs et astuces destins aux utilisateurs avancs. Voici un bref sommaire des chapitres : Bienvenue. Dcrit les principales fonctionnalits du programme, la configuration requise et la procdure dinstallation. Introduction. Dveloppe simplement la notion de site Web et prsente la dmarche utilise par Votre Site Web 4 pour crer et publier le vtre. Premier pas. Dcrit les modles de pages Web intgrs et lenvironnement de Votre Site Web 4. Utiliser du texte. Explique comment diter les champs des modles, personnaliser la mise en page et importer du texte. Utiliser des images, des animations et du multimdia. Prsente linsertion ou la cration de fichiers image, animation, son et vido. Utiliser des liens hypertextes et linteractivit. Vous indique comment ajouter un lien hypertexte du texte ou une image vers des pages Web, une adresse lectronique ou des fichiers et amliorer les pages avec des effets Java ou HTML. Visualiser, publier et maintenir le site. Dcrit les touches finales et les tapes simples vous permettant de publier sur le Web et de maintenir votre site. Crer une conception Web. Offre des astuces sur la planification, sur la structure du site et sur la mise en page, accompagnes dune liste des ressources disponibles vous permettant damliorer votre site.

Votre Site Web 4

2.2. Liens vers lAide en ligne


Pour complter votre lecture de ce manuel, vous pourrez vous reporter lAide en ligne de Votre Site Web 4. Vous y trouverez une prsentation visuelle complte de linterface de Votre Site Web 4 et des rubriques trs dtailles, vous expliquant le rle de toutes les fonctionnalits ainsi que les procdures suivre. Appuyez sur la touche [F1] ou excutez la commande Aide/Aide de Votre Site Web 4.

3.

Installation et dmarrage du programme

3.1. Installation du logiciel


Sortez le CD de Votre Site Web 4 de sa bote et insrez-le dans le lecteur CD-ROM de votre ordinateur. La procdure dinstallation se lance automatiquement. Si linstallation ne se lance pas automatiquement : 1. Ouvrez le Poste de Travail. 2. Reprez le lecteur de CD-ROM dans lequel est insr le disque du produit. 3. Effectuez un clic droit dessus, puis slectionnez Explorer pour visualiser son contenu. 4. Enfin, double-cliquez sur licne du fichier NAVIGMA.exe. Cliquez sur le bouton Installer le logiciel pour dmarrer lAssistant dinstallation de Votre Site Web 4.

3.2. Assistant Installation


Une fois lAssistant dinstallation dmarr, un cran daccueil saffiche. Pour accder aux botes de dialogue suivantes du programme dinstallation, cliquez sur le bouton Suivant.

Votre Site Web 4 Une fentre vous informe sur les conditions de licence du logiciel. Nous vous recommandons de les lire attentivement. Si vous acceptez les termes du contrat, cliquez sur le bouton Oui. Slectionnez votre type dinstallation : Par dfaut : le programme principal sera install sur votre ordinateur. Les lments non installs sur votre ordinateur seront disponibles la racine du CD-ROM de Votre Site Web 4. Personnalis : vous pouvez slectionner les lments installer en plus du programme principal (modles de sites, polices, etc). Attention, vous devez disposer de lespace disque ncessaire.

Type dinstallation de Votre Site Web 4

Cliquez sur le bouton Suivant. Slectionnez le dossier dans lequel vous souhaitez installer Votre Site Web 4. Par dfaut vous est propos le dossier C:\Program Files\Micro Application\Votre Site Web 4. Vous pouvez, en cliquant sur le bouton Parcourir, slectionner un autre dossier cible que celui qui vous est propos. La bote de dialogue qui souvre alors vous permet de slectionner un autre lecteur et un autre dossier.

10

Votre Site Web 4 Vous accdez la bote de dialogue de slection du groupe de programmes auquel doit tre rattach Votre Site Web 4. Vous pouvez conserver le groupe propos par dfaut. Dans le cas contraire, slectionnez avec la souris lun des noms de la liste propose, ou saisissez un nouveau nom de dossier dans la zone de texte suprieure. Cliquez sur le bouton Suivant Le programme affiche alors un rsum de lensemble des paramtres que vous avez dfinis. Vrifiez quils sont bien conformes ce que vous souhaitez. Si tel nest pas le cas, vous pouvez toujours les modifier de nouveau en cliquant sur le bouton Prcdent. Le programme procde maintenant linstallation proprement parler du logiciel. Les programmes actuels faisant un usage intensif de ressources graphiques et sonores ont souvent recours aux bibliothques de pilotes DirectX de Microsoft. Si besoin est, le programme dinstallation vous proposera de procder galement leur mise en place sur votre ordinateur. La procdure est automatique et seuls les fichiers anciens sont alors mis jour. Il vous est donc gnralement demand de redmarrer votre ordinateur par la suite afin que les nouveaux fichiers puissent tre pris en compte. Au terme de cette opration, si vous avez conserv les paramtres proposs par dfaut, le programme se trouve, dans le menu Dmarrer de Windows, sous Programmes/Micro Application/Votre Site Web 4.

3.3. Dsinstallation du logiciel


Pour dsinstaller Votre Site Web 4, utilisez le programme de dsinstallation. Il vous permet de supprimer compltement le programme, en effaant galement de votre disque dur tous les fichiers qui lui sont lis. Seules vos crations personnelles sont pargnes par cette dsinstallation. Pour lancer la suppression du programme, procdez comme suit : 1. Cliquez sur le bouton Dmarrer/(Tous les) Programmes de la barre des tches. 2. Rendez-vous dans le groupe de programmes Micro Application/ Votre Site Web 4.
11

Votre Site Web 4 3. Cliquez sur Dsinstaller Votre Site Web 4. 4. Suivez les instructions affiches lcran.

4.

Introduction

4.1. Quest-ce quun site Web ?


Un site Web est constitu de plusieurs fichiers stocks sur un ordinateur que les utilisateurs peuvent afficher sous forme de pages grce des programmes spciaux, appels navigateurs Web. Ces derniers peuvent lire le format de fichier HTML, le plus frquent, qui dcrit la disposition du texte, des images, des liens hypertextes, etc. situs sur chacune des pages Web. Chaque site Web dispose dune page daccueil, qui saffiche en premier sur lcran du visiteur, et qui comporte gnralement des liens hypertextes vers dautres pages du site, qui comportent leur tour des liens vers dautres pages. Pour lInternaute, le contenu du site semble parfaitement li : il suffit de cliquer sur un lien pour accder aux informations correspondantes.

4.2. Comment fonctionne Votre Site Web 4 ?


Vous allez dabord crer vos pages sous forme dune publication dans Votre Site Web 4, puis vous les publierez sur votre site Web. Votre Site Web 4 vous offre la possibilit de visualiser votre site dans votre propre navigateur Web avant sa publication sur le Web. Une fois cette opration effectue, Votre Site Web 4 slectionne les pages de la publication et les convertit en HTML et en images. Vous navez pas vous proccuper du code HTML proprement parler.

4.3. Que dois-je faire pour publier mon site Web ?


La publication dun site laide de Votre Site Web 4 consiste en une seule opration visant convertir votre publication en fichiers destins au Web, et copier les fichiers Web lemplacement spcifi, soit sur un disque dur local, soit sur un site hte.

12

Votre Site Web 4 Pour enregistrer les pages dans un dossier local, vous navez pas besoin dune connexion Internet, mais vous aurez bien videmment besoin dun navigateur Web pour visualiser votre site. Pour publier votre site sur le Web, vous aurez besoin dun hte pour votre site Web, cest--dire dun espace disque sur un serveur connect Internet, afin que dautres personnes puissent accder votre site. Vous pouvez galement publier votre site sur un serveur distant grce Votre Site Web 4 ou un utilitaire FTP distinct. Pour de plus amples informations, reportez-vous lAide en ligne, la rubrique Publier sur Internet.

5.

Premiers pas

5.1. Utiliser lAssistant Dmarrage


Vous visualisez alors la fentre daccueil habituelle et lAssistant Dmarrage vous offre trois possibilits; Ouvrir un modle, pour crer immdiatement un document ; Crer une publication, pour travailler sur une page vierge ; ou Ouvrir une publication, pour modifier lun de vos documents cr dans Votre Site Web 4. Si vous utilisez Votre Site Web 4 pour la premire fois, nous vous recommandons de suivre les tapes suivantes. Slectionnez loption Ouvrir un modle ou Crer une publication. Pour de plus amples informations sur lutilisation des modles, consultez la section suivante. Lorsque vous tes dans Votre Site Web 4, vous pouvez tout moment appuyer sur la touche [F1] de votre clavier ou excuter la commande Aide/Aide de Votre Site Web 4. Celle-ci est divise en deux : la fentre Sommaire apparat gauche et le menu Prsentation visuelle droite. Cliquez sur les icnes en forme de livre du Sommaire pour dvelopper les chapitres, puis cliquez sur licne correspondant la rubrique que vous souhaitez afficher. Cliquez directement sur les images de la Prsentation visuelle pour parcourir les fonctions de linterface telles que les menus et les barres doutils. Cliquez sur longlet Index pour

13

Votre Site Web 4 consulter la liste des principaux lments ou sur longlet Rechercher pour trouver des termes dans lintgralit de lAide en ligne. Les novices peuvent cliquer sur la rubrique Utiliser laide : prsentation rapide du Sommaire pour obtenir des conseils sur la manire dutiliser cette Aide en ligne.

5.2. Utiliser un modle de page Web


Les modles sont des exemples de conception intgrs vous permettant dacclrer la cration de sites Web professionnels. Dans lexemple ci-dessous, nous travaillerons avec un modle de la catgorie Professionnel. Imaginez, ne serait-ce quun instant, que vous tes le Webmaster dune petite entreprise et laissez libre cours votre imagination ! Dmarrez Votre Site Web 4 et slectionnez la commande Nouveau dans le menu Fichier. LAssistant Dmarrage saffiche ; slectionnez la commande Ouvrir un modle. Notez que la catgorie Professionnel est slectionne par dfaut et que les vignettes des modles disponibles sont affiches dans la fentre de droite. Slectionnez la vignette Arc puis cliquez sur Terminer. Votre Site Web 4 recherche le modle et laffiche. Cliquez sur longlet Modles du Studio : vous pouvez alors y ajouter vos informations personnelles. Dans la fentre en haut droite du modle de page, vous trouverez la liste des catgories contenant les informations que vous pouvez personnaliser. La catgorie Informations relatives lentreprise est slectionne. Dans la fentre en dessous apparaissent des champs dans lesquels vous pouvez consulter et/ou modifier le texte. Saisissez dans ces champs le nom de votre entreprise, son adresse, etc. ou des informations fictives. Lorsque vous saisissez des informations, votre publication est mise jour pour prendre en compte les nouvelles donnes. Vous pouvez
14

Votre Site Web 4 effectuer toutes les modifications mineures ou majeures que vous souhaitez, il sera toujours possible dapporter des corrections par la suite. Lorsque vous avez termin, cliquez dans la catgorie Informations sur le site Web, qui vous permet de modifier les titres des pages Web du modle, si vous le souhaitez. Cliquez ensuite dans la catgorie Combinaisons de couleurs. Une palette de combinaisons portant toutes un nom apparat. Dans Votre Site Web 4, une combinaison de couleurs est affecte chaque publication et vous permet de gagner du temps et de garantir un rsultat cohrent et coordonn. Les combinaisons de couleurs fonctionnent comme un systme de peinture cinq numros. Au lieu dassigner une couleur spcifique un lment, vous lui attribuez un numro. Vous pouvez essayer !

Fonctionnement dune combinaison de couleurs

Exemple de combinaison de couleurs

Slectionnez la combinaison de couleur Carotte : vous observez que la majorit du texte de la page Web devient orange. Cliquez maintenant sur la combinaison Cuba, le texte passe en vert. Observez attentivement la partie suprieure de chacune des combinaisons de couleurs : vous constatez quelles comportent cinq chantillons de couleurs droite du nom de la combinaison. chaque fois que vous modifiez la combinaison, cest la couleur du premier chantillon de couleurs qui est applique au texte.

15

Votre Site Web 4 Dans les modles, le texte se voit traditionnellement appliquer lchantillon de couleurs 1, ce qui signifie quil saffiche dans la couleur dfinie comme celle de lchantillon de couleurs 1 dans la combinaison active, quelle quelle soit. Essayez encore quelques combinaisons de couleurs et observez les lments qui changent de couleur. quel(s) lment(s) est (sont) affect(s) les chantillons de couleurs 2 et 3 ? La partie infrieure de chaque combinaison de couleurs dfinit les couleurs des liens hypertextes et les autres couleurs Web qui sont indpendantes des cinq couleurs de la combinaison et qui seront dcrites dans le chapitre suivant. Excutez la commande Ficher/Enregistrer sous pour sauvegarder la publication dans le dossier souhait, sous le nom de votre choix.

5.3. Dcouvrir lenvironnement de Votre Site Web 4


Prenons un moment pour examiner la publication cre laide du modle. Au fur et mesure, les fonctionnalits de base de Votre Site Web 4 vous deviendront familires. Dplacez le pointeur dans la fentre et vous verrez apparatre des info-bulles identifiant de nombreux lments. Observez la barre dtat en bas pour obtenir une description de chaque fonctionnalit. Pour accder lAide en ligne et aux ressources, excutez la commande Aide/Aide de Votre Site Web 4. Un menu contextuel apparat si vous cliquez avec le bouton droit de la souris sur une barre doutils, sur un objet ou sur la page. Les boutons gauche de la barre dtat vous permettent de naviguer dans la publication au niveau des pages et des maquettes. Dplacez le pointeur sur les boutons de la barre doutils Affichage pour dcouvrir les diffrentes options de zoom, de vue panoramique et daffichage.

16

Votre Site Web 4 Utilisez ces boutons pour ajuster laffichage, de faon ce que vous puissiez lire le texte. Lespace de travail correspond peu prs limage ci-dessus. Notez que Votre Site Web 4 ne peut afficher quune page la fois, parmi les six que compte la publication. Sur le ct droit de la fentre Votre Site Web 4 apparat le Studio, un groupe de six onglets donnant accs des fonctions particulires. Observons-les lun aprs lautre. Cliquez sur leur nom pour les afficher. Longlet Attributs (voir lillustration ci-dessous) comporte cinq fentres qui vous permettent de personnaliser les proprits des lments qui saffichent lcran. Ces fentres sont : la fentre Couleur, pour appliquer une couleur solide et/ou une ombre ; la fentre Remplissage, pour appliquer un remplissage dgrad ou bitmap ; la fentre Transparence, pour appliquer un effet de transparence ; la fentre Police, pour modifier la police des textes existants ; la fentre Style du contour, pour dfinir lpaisseur et le style des contours et des formes.

Fentres de longlet Attributs du Studio

17

Votre Site Web 4 Longlet Combinaisons affiche une liste des combinaisons de couleurs vous permettant de modifier immdiatement les couleurs dune publication cre partir dun modle. Vous pouvez personnaliser les combinaisons de couleurs ou en crer des nouvelles. Cliquez avec le bouton droit de la souris sur lune des combinaisons pour accder au Gestionnaire de combinaisons. Longlet Pages vous aide vous dplacer dans votre publication et travailler sur les pages et les maquettes. Longlet Bibliothque comporte un grand nombre dlments prdfinis, tels que des images, que vous pouvez glisser-dplacer, puis personnaliser ou utiliser comme point de dpart pour vos conceptions. Le Porte-documents vous permet de conserver les conceptions (images, textes et mme zones de texte non associes ou fragments de code HTML) que vous souhaitez rutiliser dans dautres publications. Longlet Modles vous permet de revoir les choix que vous avez faits lors de la cration dune publication laide dun modle. Vous navez qu ressaisir vos informations ou slectionner une nouvelle combinaison de couleurs. La disposition par dfaut des barres doutils et des onglets du Studio est optimise autour de la zone de travail. Toutefois, vous pouvez la modifier ou la personnaliser comme bon vous semble, afficher ou masquer les barres doutils et les onglets ou les repositionner lcran, votre convenance. Chacun des onglets du Studio peut flotter individuellement et/ou tre regroup avec dautres onglets pour flotter ou tre fix comme une barre doutils droite ou gauche de lespace de travail. Votre Site Web 4 vous permet de visualiser facilement votre travail et propose un affichage large de plusieurs pages ou un affichage plus prcis dune petite zone. Ainsi, vous pouvez utiliser les barres de dfilement situes en bas droite de la fentre principale pour dplacer la page et la zone de travail dans la fentre principale. Laffichage est alors automatiquement recentr mesure que vous faites glisser les objets vers un bord de lcran. La barre doutils Affichage situe en haut de lcran propose diffrentes options vous permettant dutiliser une vue panoramique ou de procder un zoom avant ou arrire afin de
18

Votre Site Web 4 pouvoir contrler et/ou modifier la page divers degrs de dtails. En outre, vous avez le choix entre deux modes daffichage : Normal, qui affiche une page la fois et Multipage, qui affiche plusieurs pages simultanment dans lespace de travail. Cliquez plusieurs fois sur le bouton Page suivante gauche de la barre dtat pour afficher les pages suivantes. Notez que le modle a pris en compte les informations que vous y avez insr et que le reste du texte sert combler les zones en attendant des modifications.
Astuce : Boutons premire page et dernire page Vous pouvez cliquer sur le bouton Premire page pour afficher la premire page (page daccueil) ou sur le bouton Dernire page pour afficher la dernire.

Vous pouvez cliquer sur le bouton Insrer une page ou Supprimer une page dans longlet Pages du Studio pour modifier le nombre de pages. Vous pouvez galement cliquer sur le bouton Gestionnaire de pages de longlet (ou gauche de la barre dtat) pour obtenir des options supplmentaires telles que la copie de pages. Lorsque vous en serez la cration de vos vritables pages Web, vous pourrez utiliser le gestionnaire si vous souhaitez plus (ou moins) de pages que celles fournies par le modle. Pour linstant, gardons six pages. Toutefois, si vous voulez essayer longlet Pages, ou si vous effectuez accidentellement des modifications que vous ne souhaitez pas conserver, voici les solutions durgence. Pour revenir la dernire copie enregistre de votre publication, excutez la commande Fichier/Version prcdente. Noubliez pas denregistrer rgulirement votre travail ! Vous pouvez galement recharger toute publication Votre Site Web 4 dj enregistre en excutant la commande Fichier/Nouveau et en slectionnant Ouvrir une publication. Vous pouvez ouvrir plusieurs publications et passer dune fentre lautre si vous le souhaitez.

19

Votre Site Web 4 Pour annuler les dernires modifications, appuyez sur les touches [Ctrl+Z]. Il est impossible dannuler lajout ou la suppression dune page. Cliquez sur le bouton Multipage de la barre doutils Affichage et slectionnez le troisime lment de la deuxime ligne pour obtenir un affichage 2x3 pages. Vous pouvez ainsi afficher six pages dans une mme fentre ! En affichage Multipage, il est particulirement facile de dplacer et de copier des objets entre les pages laide du glisser-dplacer et du copier-coller. Pour revenir un affichage normal, cliquez sur Affichage normal dans la zone de slection de lAffichage multipage ou excutez la commande Affichage/Normal. Maintenant que vous connaissez davantage linterface de Votre Site Web 4 et que vous tes parvenu crer et personnaliser une publication cre laide dun modle, vous tes prt raliser les projets que vous avez lesprit.

5.4. Pour obtenir davantage daide sur les notions fondamentales


Vous avez pu constater la simplicit de cration dune structure basique de site Web laide dun modle de Votre Site Web 4, et dsormais, vous ne vous perdez plus dans lespace de travail. Lorsque vous serez prt crer votre vritable site Web, vous souhaiterez certainement en savoir plus sur dautres options. Pour de plus amples informations, reportez-vous lAide en ligne.
Pour de plus amples informations sur... crer enregistrer fermer des publications Une vue densemble des concepts dun site Web Dans lAide de Votre Site Web 4, affichez Sommaire Puis : Consultez les rubriques de la section Utilliser les publications de Votre Site Web 4 Slectionnez "Sites Web, dmarrer"

Index

20

Votre Site Web 4

les menus et barres doutils de Votre Site Web 4 dnir les pages, dnir les options daffichage, utiliser les outils de mise en page

Prsentation visuelle Sommaire

Cliquez sur le nom dun menu ou dune barre doutil Consultez les rubriques de la section Utiliser les pages

6.

Utiliser du texte

Maintenant que vous avez revu les pages proposes par le modle, il est temps de voir comment vous pouvez ajouter du texte standard et modifier la mise en page du texte. Dans Votre Site Web 4, le texte vient gnralement se placer dans des zones de texte. Vous pouvez galement utiliser du texte artistique pour le texte autonome comportant des effets spciaux ou du texte de tableau pour un affichage sous forme de lignes et de colonnes.

6.1. Les zones de texte


Dans Votre Site Web 4, la majorit du texte ordinaire apparat dans des zones de texte fonctionnant comme des zones dans lesquelles se trouvent des mots simples, des paragraphes autonomes, des articles multipages ou le texte dun chapitre. Vous pouvez associer plusieurs zones de texte afin que le texte qui ne tient pas dans la premire zone de texte puisse se poursuivre dans la seconde, etc., comme pour un article dun journal stalant sur plusieurs colonnes. Quil sagisse dune ou plusieurs zone(s) de texte, le texte qui sy trouve est appel "message". Voyons comment le modle a utilis la zone de texte dans lexemple Arc cr au cours du chapitre prcdent. Affichez votre page daccueil, en cliquant sur le bouton Premire page si ncessaire, puis adaptez laffichage de faon pouvoir lire le texte.

21

Votre Site Web 4 Cliquez sur le bouton en haut de la barre doutils verticale. Vous venez de slectionner lOutil Pointeur, loutil de base pour la slection, le dplacement et le redimensionnement des objets et des zones de texte. laide de lOutil Pointeur, cliquez sur le texte de la page daccueil se situant compltement droite de la page. Cliquez maintenant sur le paragraphe commenant par "Voici la page daccueil" en bas de la page. Dans chaque cas, lorsque vous cliquez sur le texte, vous slectionnez la zone de texte qui saffiche avec un contour rectangulaire gris et de petites poignes noires. Observez le bouton Associer au-dessous de la zone de texte slectionne. Son icne vous donne des informations sur la zone de texte et le message quelle contient. Un carr indique que tout le texte de la zone de texte est affich. Il sagit soit dune zone de texte indpendante, soit de la dernire zone de texte dune squence associe. Un signe plus indique que la zone de texte ne peut pas afficher lintgralit du message. Le reste du texte est enregistr dans une zone de dpassement invisible. Vous pouvez agrandir la zone de texte ou raccourcir le message. Une flche vers le bas indique que le texte de la zone de texte se poursuit dans la zone de texte associe suivante.

6.2. Objets au niveau de la maquette


Revoyons lun des concepts cls de Votre Site Web 4. Cliquez sur le nom de lentreprise en haut de la page. Pourquoi ne se passe-t-il rien ?

22

Votre Site Web 4 Cliquez une fois sur le bouton de la page active en bas gauche de la page. Laffichage est modifi et le bouton indique que vous travaillez maintenant au niveau de la maquette. Vous pouvez considrer la maquette comme un arrire-plan partag par plusieurs pages de votre site. Chaque publication possde un niveau de maquette et chaque page dispose dune maquette spcifique qui lui est assigne. Dans la publication prise en exemple, toutes les pages partagent la mme maquette. Lorsque vous passez au niveau de la maquette, les objets situs au niveau de la page disparaissent, ne laissant que les objets darrire-plan. Dans lexemple, vous observez sur la maquette les zones de texte du haut et du bas de la page, celles des diverses images, celles des liens vers les autres sections et celle comportant les informations de contact. Il sagit des lments que le concepteur de ce modle a choisi de faire apparatre sur chaque page de son site. Vous pouvez utiliser longlet Pages du Studio pour rorganiser les pages de votre publication et utiliser le glisser-dplacer pour assigner les maquettes aux pages, et ajouter ou supprimer des pages ou des maquettes sans avoir passer au pralable lun des deux niveaux. Cliquez nouveau sur le bouton de la page active (une seule fois) pour revenir au niveau de la page.

6.3. Utiliser des zones de texte


Il est facile de dplacer ou de redimensionner une zone de texte. Laspect du curseur situ au-dessus de la zone de texte slectionne vous indique ce qui se passera si vous cliquez dessus lemplacement o vous tes. Utilisez lOutil Pointeur pour slectionner la zone de texte "Voici la page daccueil". Notez quil existe un point dinsertion dans le texte de la zone de texte. Dans ce mode, vous pouvez saisir directement dans la zone de texte et modifier le texte avec lOutil Pointeur. Positionnez maintenant le pointeur au-dessus de la zone de dlimitation de la zone de texte : le curseur de dplacement
23

Votre Site Web 4 apparat. Cliquez et dplacez un peu le bord de la zone de texte, puis appuyez sur [Ctrl+Z] pour annuler le dplacement. Cliquez sur lune des poignes dangle ou de ct de la zone de texte et dplacez-la pour redimensionner la zone de texte. Si vous dplacez le bord infrieur de la zone de texte vers le haut, vous cacherez une partie du texte. Puis, si vous le dplacez vers le bas, le texte rapparatra. Annulez nouveau les modifications. Voici comment vous pouvez crer une nouvelle zone de texte en toute simplicit. Cliquez sur le bouton de la barre doutils verticale vous permettant de slectionner lOutil Zone de texte standard. Localisez maintenant un espace vierge sur la zone de travail, en dehors de la page, puis cliquez et dessinez une zone rectangulaire lemplacement o vous voulez placer la nouvelle zone de texte. Lorsque vous relchez le bouton de la souris, une zone de texte vide apparat. Aprs avoir cr votre nouvelle zone de texte, lOutil Pointeur est automatiquement slectionn. Saisissez quelques mots dans la zone de texte.

6.4. diter du texte


Votre Site Web 4 vous permet dditer directement du texte sur la page ou dutiliser WritePlus, son diteur de texte intgr. LOutil Pointeur vous permet de saisir du texte dans un paragraphe, de slectionner des caractres et dutiliser des commandes de mise en forme dans la barre doutils Texte. Comme dans un programme de traitement de texte, vous slectionnez un mot si vous cliquez deux fois dessus et un paragraphe si vous cliquez trois fois. Slectionnez une partie du texte que vous avez saisi dans la nouvelle zone de texte, puis essayez de modifier sa police et sa taille de police grce aux commandes de la barre doutil Texte. Pour travailler avec davantage de texte, allez dans la zone de texte "Voici la page daccueil". Cliquez dessus avec le bouton droit de la

24

Votre Site Web 4 souris et slectionnez la commande Modifier le message dans le menu contextuel, afin de lancer WritePlus. WritePlus souvre dans une fentre spare et partage la majorit des menus et barres doutils standard de Votre Site Web 4. Vous pouvez dplacer le pointeur pour afficher les infobulles et le texte de la barre dtat correspondant aux divers boutons. WritePlus constitue loutil idal pour laffichage et ldition de lintgralit du texte dun message pouvant se poursuivre dans plusieurs zones de texte ou pages. Vous pouvez afficher le texte en mode brouillon (sans mise en forme), exporter le texte du message et utiliser la fonction Comptage des mots. Le texte original de ce message sert simplement remplir la zone de texte en attendant que vous ajoutiez le texte que vous voudrez voir apparatre dans votre page daccueil. Vous pouvez saisir votre texte sur le texte dexemple ou slectionner ce dernier, le supprimer et commencer la saisie dans une zone de texte vide. Pour mettre jour les modifications dans Votre Site Web 4, cliquez sur le bouton Terminer, sinon cliquez sur le bouton Annuler. Vous vous demandez certainement quelle est la diffrence entre ldition de texte standard et celle des champs dun modle. La notion fondamentale retenir est que si vous souhaitez conserver les champs, utilisez longlet Modles pour modifier leur texte, tel quexpliqu dans le chapitre prcdent. Cliquez sur le bouton de la page active en bas gauche pour passer au niveau de la maquette. Essayez maintenant de slectionner juste une partie du nom de lentreprise. Vous ne pouvez pas : seul tout le texte de la zone de texte peut tre slectionn. Le texte est enregistr dans des champs et, lorsque vous slectionnez lun des textes (le nom de lentreprise dans ce cas), le champ entier est surlign, ce qui prouve quil ne sagit pas de texte standard. Il est impossible de ne slectionner quune partie du texte dun champ. Toutefois, vous pouvez utiliser les fonctions traditionnelles ddition de texte pour modifier les proprits des caractres ou des paragraphes des champs, ou couper/copier/coller le texte des champs dans le document, si ncessaire.
25

Votre Site Web 4 Mais rappelez-vous que si vous crasez du texte de champ, vous supprimez le champ et le texte que vous saisissez ensuite cet emplacement sera du texte ordinaire qui ne pourra plus tre mis jour via longlet Modles.

6.5. Importer du texte


Votre traitement de texte actuel, tel que Microsoft Word, vous permet non seulement de saisir du texte dans une zone de texte ou de crer un message laide de WritePlus, mais aussi de crer des fichiers sources pour votre publication. Vous pouvez ensuite utiliser le Presse-papiers de Windows pour copier-coller du texte ou limporter directement. Il est facile dimporter le texte dun fichier dans une zone de texte existante. Essayons ! Utilisez lOutil Pointeur pour cliquer avec le bouton droit de la souris sur la zone de texte "Voici la page daccueil". Excutez la commande Edition/Slectionner tout (raccourci [Ctrl+A]) et appuyez sur la touche [Suppr] pour effacer tout le texte de la zone de texte. Dans le menu contextuel de la zone de texte, slectionnez la commande Fichier texte. Dans la bote de dialogue Ouvrir, ouvrez le fichier Sample .doc du dossier Micro Application/WP80/Samples/, soit partir du dossier Program Files, soit partir du CD-Rom de Votre Site Web 4. Votre Site Web 4 importe le fichier et le place dans la zone de texte.
Remarque : Option Cration automatique Lorsque vous tes invit utiliser loption Cration automatique, cliquez sur Non pour ne pas crer de pages et de zones de textes supplmentaires pour le texte qui dpasse. Nous naurons pas besoin de cette fonctionnalit dans ce cas.

Appuyez sur [Ctrl+E] pour lancer WritePlus et examiner brivement le nouvel chantillon de texte. Les mots souligns en rouge sont ceux qui ne sont pas reconnus par la fonction Correction orthographique. Vous pouvez essayer de modifier la police, la taille ou le style.

26

Votre Site Web 4

6.6. Utiliser le texte artistique


Est qualifi de texte artistique tout texte saisi directement dans votre page. Comme pour le texte des zones de texte, vous pouvez modifier la mise en forme de ses caractres et de ses paragraphes, y appliquer des styles de texte, y adjoindre des liens hypertextes et utiliser WritePlus pour le modifier. Vous pouvez galement appliquer un remplissage dgrad et/ou un contour du texte artistique, pour crer des boutons attrayants par exemple. Notez toutefois quun texte artistique comportant ces proprits est publi sous une image distincte et non sous du texte HTML. Le texte artistique comporte certaines limites. Ainsi, vous pouvez copier du texte artistique partir du Presse-papiers mais ne pouvez pas importer de texte. De mme, le texte artistique ne se dplaant pas ou ntant pas associ de la mme faon que le texte situ dans une zone de texte, les fonctions dajustement du texte de la barre doutils Zone de texte ne sappliquent pas. Pour crer du texte artistique, slectionnez lOutil Texte artistique de la barre doutils verticale. Cliquez ensuite nimporte quel endroit de la page pour dfinir le point dinsertion une taille par dfaut ou faites glisser la souris pour obtenir une taille donne. Avant la saisie, dfinissez les proprits dorigine du texte ncessaires (police, style, etc.) via la barre doutils Texte, le menu Format ou le menu contextuel (slectionnez la commande Format du texte) et/ou longlet Attributs du Studio. Puis, saisissez normalement votre texte. Une fois le texte artistique cr, vous pouvez le slectionner, le dplacer, le redimensionner, le supprimer et le copier comme vous le feriez avec une zone de texte. Notez toutefois que le texte artistique que vous avez dplac pour le redimensionner est publi sous forme dimage. Pour conserver son format de texte, modifiez sa taille de police via la barre doutils Texte. Essayez de crer du texte artistique sur un espace vierge de la page ou dans la zone de travail.

27

Votre Site Web 4

6.7. Utiliser du texte de tableau


Les tableaux sont trs pratiques pour prsenter du texte ou des donnes sous forme de lignes et de colonnes aisment modifiables. Chaque cellule fonctionne comme une mini-zone de texte. Comme pour le texte des zones de texte, vous pouvez modifier la mise en forme de ses caractres et de ses paragraphes, y appliquer des styles de texte et y adjoindre des liens hypertextes. Toutefois, vous ne pouvez pas utiliser WritePlus pour modifier le texte de tableau. Vous pouvez coller un petit texte dans un tableau mais vous ne pouvez pas importer de texte partir dun fichier. Les tableaux comportent galement des fonctionnalits spcifiques (dtailles dans lAide en ligne) telles que les fonctions Format automatique, Suppression rapide et Saisie rapide pour diter et rviser rapidement. Pour crer un tableau, slectionnez lOutil Tableau dans la barre doutils verticale et cliquez sur la page ou sur la zone de travail, ou cliquez et dplacez le tableau pour dfinir ses dimensions. La bote de dialogue Crer un tableau apparat et propose une slection de modles prdfinis. Vous pouvez slectionner soit un modle prdfini, soit le format Par dfaut pour crer un tableau simple sans bordure, puis cliquez sur OK. Lorsque vous avez cr votre tableau, vous pouvez le slectionner, le dplacer, le redimensionner, le supprimer et le copier, comme dans le cas dune zone de texte. Dautres oprations supposent la slection de texte dans le tableau ou dans des parties du tableau. Dans chaque cellule, vous pouvez cliquer pour dfinir un point dinsertion ou cliquer et faire glisser le pointeur pour slectionner une partie du texte. Vous pouvez galement cliquer et dplacer la souris pour slectionner plusieurs cellules, lignes ou colonnes, ce qui permet en fait de slectionner tout le texte sy trouvant. Une fois la slection effectue, vous pouvez diter le texte du tableau et modifier la structure et laspect du tableau et/ou de ses composants.

6.8. Modier les couleurs Web


Lorsque vous avez utilis le modle pour crer lexemple de site sur lequel nous travaillons, vous avez slectionn lune des diverses combinaisons de couleur. Dans le chapitre prcdent, nous avons
28

Votre Site Web 4 utilis lanalogie avec la peinture laide de numros pour expliquer comment les cinq numros que vous utilisez permettent de colorer les lments dans Votre Site Web 4, et comment chaque combinaison de couleurs comporte cinq couleurs, qui sappliquent aux lments en fonction du numro correspondant. Par convention, le texte des modles de publications correspond la couleur de combinaison 1. Cela signifie que quelle que soit la couleur dfinie comme couleur de combinaison 1 dans la combinaison active (la premire des cinq couleurs que vous apercevez en haut de lchantillon), elle est applique au texte. Par ailleurs, chaque combinaison de couleur de la publication comporte galement des paramtres spcifiques de couleur Web. La couleur du lien hypertexte sapplique au texte du lien hypertexte avant quil nait t cliqu, alors que ce mme texte, une fois cliqu pour accder au lien, prend la couleur du lien hypertexte suivi. Ces couleurs saffichent dans lexemple Votre Site Web 4 mais vous devrez visualiser le site publi dans un navigateur pour observer leffet rel. Larrire-plan dun site Web, tel quil est appliqu chaque page, peut tre une couleur solide ou une image fractionne (rpte), qui correspond gnralement un motif bitmap. Loption dimage fractionne fonctionne comme un papier peint de bureau ; la petite bitmap peut donc tre rpte de nombreuses fois. Lchantillon de la combinaison de couleur indique si la combinaison utilise une bitmap fractionne. Vous pouvez modifier les couleurs de base (et les couleurs Web) dune combinaison ou dfinir une autre bitmap darrire-plan laide du Gestionnaire de combinaisons, comme vous modifieriez les cinq couleurs de base de la combinaison. Pour lafficher, cliquez avec le bouton droit de la souris sur le nom de la combinaison (ou cliquez sur le menu Outils) et slectionnez la commande Gestionnaire de combinaisons. Avant de passer au chapitre suivant, vous souhaitez certainement enregistrer votre travail.

29

Votre Site Web 4

6.9. Astuces de conception


Vous trouverez des conseils gnraux sur lutilisation de texte dans le chapitre Crer une conception Web. Nous nallons pas reprendre son contenu mais juste voquer quelques points prcis. Peu de personnes, sil y en a, prfrent la lecture sur ordinateur celle sur papier. Essayez au moins de rendre votre texte attrayant. En rgle gnrale, les utilisateurs doivent pouvoir afficher chacun des textes dans la fentre de son navigateur, sans avoir les faire dfiler. Utilisez de courts paragraphes, comme ceux dun journal et non de longs paragraphes, comme dans un livre. Le style dcriture en forme de pyramide inverse, dcouvert dans le journalisme, sapplique aussi parfaitement aux pages Web : utilisez une introduction percutante et placez linformation essentielle en haut. Il existe du texte simple mais galement du texte hypertexte (du texte li). En tant quauteur Web, vous ne devez pas seulement bien crire mais galement vous acquitter dune tche essentielle consistant ajouter des liens hypertextes permettant damliorer laccs des ides fondamentales. Les titres et sous-titres sont des outils pratiques permettant de faciliter lexploration et le dfilement du texte et de casser la monotonie des longs messages. Prfrez lalignement gauche celui justifi. vitez les tailles de police suprieures 24 pt dans les titres, qui peuvent donner une impression damateurisme ainsi que les titres en majuscules, qui peuvent tre difficiles lire. Vous pouvez utiliser des couleurs diffrentes du corps du texte pour les titres et sous-titres, mais nen abusez pas ! Ce nest gnralement pas une bonne ide dutiliser plusieurs colonnes pour un mme message. Sur une page Web, les utilisateurs naiment pas faire dfiler le texte vers le bas dune colonne, puis revenir en haut de la suivante. Vous verrez peut-tre des pages Web sophistiques comportant des tableaux et des cadres pour dmarquer les diffrents types de contenu. Vous pourrez peut-tre imiter ces effets, mais ils fonctionnent mieux avec de courts blocs de texte et les pages de menu quavec les longues prsentations.

30

Votre Site Web 4 Pour viter des problmes denregistrement, veillez ce que le texte soit toujours sur le calque du dessus, et non derrire des images.

6.10. Pour obtenir davantage daide sur lutilisation de texte


Dans ce chapitre, nous avons tudi le texte fourni par le modle et appris crer, diter et importer du texte standard. Vous en savez maintenant suffisamment pour remplacer ce texte par votre propre contenu. Par ailleurs, vous devez dsormais comprendre comment les couleurs Web des combinaisons de couleurs sappliquent au texte. Lorsque vous travaillerez sur votre propre site Web, il vous sera utile de savoir associer des zones de texte, dfinir les paramtres par dfaut du nouveau texte, utiliser des raccourcis, insrer des retours chariot et des caractres spciaux et recourir aux outils de correction. Pour de plus amples informations sur les options, et notamment celles relatives au texte, reportez-vous lAide en ligne.
Pour de plus amples informations sur... une vue densemble du texte dans Votre Site Web 4 importer du texte utiliser des zones de texte, du texte artistique et du texte de tableau dnir les proprits du texte utiliser les exemples et les styles les maquettes les paramtres par dfaut Dans lAide de Votre Site Web 4, affichez Index Puis : Slectionnez "texte, vue densemble" Consultez les rubriques de la section Utiliser du texte Consultez les rubriques de la section Mettre en forme les caractres et les paragraphes Slectionnez "Maquettes Slectionnez "Proprits par dfaut"

Sommaire

Sommaire

Index Index

31

Votre Site Web 4

utiliser les outils de correction les combinaisons de couleurs

Index Index

Slectionnez " Outils de correction" Slectionnez "Couleur : utiliser des combinaisons de couleurs"

7.

Utiliser des images, des animations et du multimdia

Dans ce chapitre, nous continuerons tudier les pages fournies par le modle, en nous intressant davantage aux images. Nous verrons comment remplacer les images du modle par les vtres et comment en crer de nouvelles.

7.1. Les images dans Votre Site Web 4


Les modles peuvent intgrer divers types dimages dans votre publication. Vous pouvez utiliser lOutil Pointeur pour les slectionner, les dplacer et les redimensionner, comme pour le texte. Sur la page daccueil, cliquez avec lOutil Pointeur sur la photo. Essayez de la redimensionner en cliquant et en dplaant un de ses angles. Appuyez sur les touches [Ctrl+Z] pour annuler. Cliquez maintenant au centre de la photo et dplacez-la vers lun des bords de la page. Appuyez nouveau sur [Ctrl+Z].
Astuce : Proprits de lobjet Observez la barre dtat pendant que vous dplacez la photo : elle vous indiquera les proprits de lobjet.

Dplacez la photo vers la droite pour quelle chevauche en partie la zone de texte "Page daccueil". Cliquez maintenant sur la photo, l o elle chevauche la zone de texte : un curseur apparat. Cliquez nouveau au mme endroit, le curseur reste. Appuyez maintenant sur la touche [Alt] tout en cliquant : vous avez nouveau slectionn la photo.

32

Votre Site Web 4 En rgle gnrale, lorsque plusieurs objets se chevauchent, vous devez dabord cliquer l o ils se chevauchent pour slectionner lobjet du dessus, gnralement celui cr le plus rcemment. Un second clic vous permet de slectionner lobjet situ sous celui du dessus, etc. Si lun de ces objets est une zone de texte, appuyez sur la touche [Alt] tout en cliquant pour faire disparatre le curseur.
Astuce : Dplacer du texte vous pouvez tout moment appuyer sur la touche [Alt] tout en cliquant simplement sur le texte dune zone de texte, et non sur sa zone de dlimitation, pour la dplacer.

7.2. Importer une image ou une animation


Vous naurez aucune difficult importer des lments tels que des cliparts mtafichiers, des photos bitmap ou des GIF anims. Votre Site Web 4 prend en charge tous les formats standard. Aprs limportation, chaque image est conserve dans une publication de Votre Site Web 4 jusqu la publication du site : ce moment l, elle est exporte sous forme dun bitmap standard (GIF ou JPG) reconnu par le navigateur Web. Essayons dimporter une image. Cliquez sur le bouton Importer image de la barre doutils verticale. Dans la bote de dialogue Ouvrir qui saffiche, ouvrez le fichier photo1 .bmp dans le dossier Micro Application/WP80/Samples. Vous avez maintenant deux possibilits : vous pouvez dessiner une zone sur la page pour dfinir la taille de limage ou simplement cliquer pour insrer une image la taille par dfaut. Choisissez lune dentre elles. Limage (le lion) apparatra et vous pourrez toujours la redimensionner plus tard en cliquant tout en dplaant ses poignes. Pour remplacer une image existante, par exemple une image qui tait dans un modle, il vous suffit de double-cliquer pour faire apparatre la bote de dialogue de slection de fichier. Vous pouvez galement cliquer et dplacer licne dun fichier image dans Votre Site Web 4 et bien sr, coller les objets provenant dautres applications via le Presse-papiers de Windows.
33

Votre Site Web 4 La commande Convertir en image vous permet de combiner plusieurs lments distincts dans une seule image, comme dans une slection multiple, afin de faciliter leur manipulation. Elle vous permet galement de changer le format dune image intgre, ce qui vous vite davoir le faire dans un autre diteur. Notez que la dure de chargement de vos pages Web dans le navigateur de votre visiteur dpend directement de la taille du fichier HTML et des fichiers images associs de votre page. Les images impliquent des tailles de fichier plus leves et allongent donc la dure de chargement. Mme sous une forme compresse, les fichiers bitmap tels que la photo que nous venons dimporter sont gnralement bien plus gros que ceux ne comportant que le contour ou la forme dune image (voir ci-dessous). Utilisez-les avec parcimonie ! Rduisez au maximum les dimensions de votre image, de faon ce quelle reste tout de mme visible. Il est conseill de planifier la mise en page en vitant dutiliser de trop grandes zones dimages.

7.3. Crer des contours et des formes


Votre Site Web 4 vous propose plusieurs outils de dessin facilement utilisables. Ces trois outils de dessin de lignes sont situs dans le menu contextuel de la barre doutils verticale.

Outil Ligne droite

Outil Main leve

Outil Ligne courbe

Ils vous permettent dajouter des lments fonctionnels et dcoratifs la mise en page, tels que des boutons cliquables. Pour dessiner une ligne droite ou main leve, slectionnez loutil correspondant, puis cliquez et dplacez la souris. Pour rallonger une ligne existante, commencez dessiner lun des nuds dextrmit de la ligne. Pour fermer la ligne,

34

Votre Site Web 4 ce qui vous permet de crer une forme dont la zone intrieure peut tre remplie, vous navez qu lier les nuds dextrmit de dbut et de fin. Les lignes courbes vous permettent dajuster prcisment la courbure de chaque segment. Pour utiliser lOutil Ligne courbe, cliquez lemplacement o vous souhaitez dbuter la ligne, puis cliquez nouveau (comme pour dessiner une ligne droite) ou cliquez puis dplacez la souris pour crer une poigne de contrle lemplacement initial. Ces poignes fonctionnent comme des aimants, transformant la courbe en une forme. Cliquez nouveau lemplacement o vous souhaitez terminer le segment. Comme avec les autres outils Ligne, vous pouvez rallonger la ligne progressivement. Pour terminer une ligne courbe sans fermer la forme, appuyez sur la touche [Echap] ou double-cliquez (ou slectionnez tout simplement un autre outil).

Vous pouvez utiliser lOutil Pointeur pour ajuster les lignes une fois que vous les avez dessines. Les techniques sont identiques, que vous ditiez une ligne isole ou le contour dune forme ferme. Vous navez qu slectionner la ligne et dcaler sa zone de dlimitation pour la dplacer ou la redimensionner. Dplacez un segment pour modifier sa forme, ou slectionnez un nud et glissez la souris pour le dplacer, ou ajustez les poignes de contrle du nud pour modifier le profil du(des) segment(s) adjacent(s). La barre doutils Courbe apparat lorsque vous slectionnez une ligne ou une forme ferme. Elle propose diverses commandes permettant dajouter ou de supprimer des nuds, de fermer ou douvrir des courbes/formes fermes et de modifier le type de nud. Pour de plus amples informations, consultez lAide en ligne. Le menu contextuel Formes pleines vous permet de slectionner des formes prdfinies que vous pouvez ajouter
35

Votre Site Web 4 instantanment votre page, puis ajuster et modifier laide des poignes de contrle. Il comporte de nombreuses formes frquemment utilises, telles que des rectangles, des ovales, des flches, des polygones ou encore des toiles.

Pour essayer, cliquez sur le bouton flch du menu contextuel contenant les Formes pleines, puis slectionnez un rectangle. Cliquez tout en dplaant la souris pour dessiner un petit rectangle sur la page. Le nouveau rectangle comporte une glissire dajustement au niveau du nud ( gauche dans le cas du rectangle) permettant de contrler la forme de langle. La majorit des Formes pleines comportent plusieurs glissires dajustement. Dplacez la glissire vers le haut pour obtenir des angles concaves et vers le bas pour quils soient convexes. Notez que loutil a repris la forme dun pointeur. Vous pouvez galement lutiliser pour dplacer ou redimensionner le rectangle. Au dpart, le contour du rectangle est noir et il ne comporte aucun remplissage. La solution la plus simple pour modifier les proprits de contour et de remplissage de lobjet est dutiliser le Studio. Affichez le volet Contour de longlet Attributs du Studio. Essayez daugmenter la valeur de lpaisseur pour largir la bordure du rectangle et slectionnez lun des styles de contour. Affichez maintenant le volet Couleur de longlet Attributs. Vous pouvez facilement modifier le contour du rectangle, sa couleur de remplissage et/ou son ombre en cliquant dabord avec le bouton droit de la souris sur un chantillon de couleur solide, puis en slectionnant la commande Appliquer au contour ou Appliquer au remplissage. Si
36

Votre Site Web 4 vous cliquez avec le bouton gauche de la souris sur un chantillon de couleur, le remplissage de lobjet slectionn sera une couleur solide ou une ombre. Ce volet comporte aussi des boutons Remplissage, Texte et Contour qui vous permettent de prslectionner lattribut qui sera affect par votre slection de couleur. Pour chacune des couleurs de base que vous slectionnez, vous pouvez modifier son ombre avec la glissire situe sous la palette.
Remarque : Format dimage PNG Vous pouvez obtenir de trs bons rsultats en utilisant uniquement des couleurs solides, mais vous pouvez obtenir des effets encore plus impressionnants en les associant avec le format dimage PNG : affichez le volet Transparence de longlet Attributs. Utilisez lOutil Transparence dans les exemples et vous pourrez crer des mises en surbrillance, des ombres et simuler un ralisme rendu.

Pour de plus amples informations, consultez lAide en ligne, aux rubriques indiques la fin de ce chapitre. Affichez maintenant le volet Remplissage. Vous trouverez divers remplissages de couleurs regroups dans plusieurs catgories : Linaire, Ellipse, Conique et Bitmap. Essayez den appliquer quelques-uns pour vous rendre compte de ltendue des possibilits. Si vous souhaitez revenir un remplissage transparent, cliquez sur lchantillon Aucun (icne en haut gauche). Profitez-en pour cliquer avec le bouton droit de la souris sur le rectangle et slectionnez les commandes Contour et cadre, Remplissage ou Transparence. Les botes de dialogue vous permettent dajuster toutes les proprits correspondantes. Vous pouvez essayer de crer un bouton de page daccueil en superposant une zone de texte sur une forme sans remplissage. Slectionnez les deux objets, puis cliquez sur le bouton Associer sous la slection, pour les regrouper. Dans le chapitre suivant, nous verrons comment ajouter un lien hypertexte.

37

Votre Site Web 4

7.4. Autres outils et techniques


Vous savez dj slectionner, dplacer et redimensionner des objets. Voici quelques astuces supplmentaires que vous pouvez appliquer aux objets slectionns. Essayez-les sur la photo et le rectangle de votre site exemple. Utilisez lOutil Rotation afin de faire pivoter un objet autour de sa poigne suprieure gauche. Slectionnez lobjet, puis faites glisser lune de ses poignes. Pour accder rapidement lOutil Rotation, placez le curseur sur lune des poignes de lobjet et appuyez sur la touche [Alt]. Utilisez lOutil Recadrage pour recadrer ou rogner les objets. Slectionnez lobjet, puis dplacez lune de ses poignes. Pour dessiner une forme en limitant ses dimensions, par exemple pour conserver une forme carre ou un cercle, appuyez sur la touche [Maj] pendant que vous dessinez la forme ou la redimensionnez. Pour ajouter plusieurs objets la slection, appuyez sur la touche [Maj] pendant que vous slectionnez les objets. Cette manipulation est pratique pour dplacer plusieurs objets en les gardant aligns. Vous pouvez cliquer sur le bouton Associer qui apparat ct dune slection multiple pour verrouiller temporairement les objets ensemble. Cela vous vitera davoir tous les slectionner la prochaine fois que vous devrez travailler sur tout le groupe. Pour sparer (dissocier) les objets, cliquez nouveau sur le bouton. Pour dupliquer un objet, slectionnez-le, puis appuyez sur la touche [Ctrl] et maintenez-la enfonce pendant la copie. Pour limiter le dplacement dun objet sur un axe horizontal ou vertical, utilisez les flches du clavier pour dplacer la slection vers le haut, vers le bas, gauche ou droite. Vous pouvez galement appuyer sur la touche [Maj] aprs avoir commenc dplacer lobjet. Utilisez les outils de mise en page de Votre Site Web 4, et notamment les rgles, les guides, le quadrillage et le bouton Magntisme pour positionner et aligner prcisment les lments et donner un aspect professionnel votre mise en page.
38

Votre Site Web 4

7.5. Ajouter des liens hypertextes


Votre Site Web 4 vous permet dajouter deux sortes deffets danimation une page Web : des bannires animes (du texte dfilant lcran) et des animations GIF. Les modles vous permettent de visualiser lanimation et/ou de personnaliser leffet. Une fois dans votre publication Web, lanimation semble statique ; en fait, elle sanime lorsque le site a t export et quun visiteur affiche votre page dans un navigateur Web. Vous allez voir avec quelle simplicit vous pouvez ajouter un GIF anim. Cliquez sur le bouton Insrer GIF anim de la barre doutils verticale. La bote de dialogue Importer un GIF anim apparat. Slectionnez lune des catgories danimation et parcourez la liste des animations. Si vous cliquez sur le titre de lune dentre elles, elle apparat dans laperu. Cliquez ensuite sur Ouvrir. Comme lorsque vous importez des images, vous pouvez soit dessiner la taille dune zone sur la page ou simplement cliquer une fois pour insrer le GIF. Pour que limage saffiche plus rapidement, avant limportation, rduisez les dimensions de limage originale la taille souhaite. Lanimation sera statique sur la page de Votre Site Web 4, qui naffiche que les premiers cadres multiples du GIF. Laissez-la toutefois sur la page afin quelle soit disponible lorsque vous devrez visualiser votre site Web dans un navigateur. Si vous souhaitez essayer dinsrer une bannire anime, cliquez sur le bouton Insrer bannire anime dans la barre doutil verticale. Avant de passer au chapitre suivant, noubliez pas denregistrer votre travail.

7.6. Ajouter du son et une vido


Votre Site Web 4 vous permet dajouter vos pages Web des fichiers son et vido de divers formats, y compris des mdias continus et non-continus. Vous pouvez ajouter des sons et vidos associs, qui se dclenchent par un clic de souris, sur une icne ou un lien hypertexte
39

Votre Site Web 4 par exemple. Par ailleurs, vous pouvez dfinir des sons darrire-plan qui se chargent et se mettent en marche automatiquement lorsquune page spcifique saffiche pour la premire fois dans le navigateur Web du visiteur. Vous pouvez inclure du multimdia en ajoutant un lien hypertexte ou une zone dynamique (voir le chapitre suivant) qui ouvre un fichier mdia donn. En procdant ainsi, le fichier mdia reste distinct de la publication. Votre Site Web 4 propose aussi dautres solutions pour intgrer du multimdia un fichier source. Lorsque vous cliquez sur le bouton Insrer du son ou Insrer une vido dans la barre doutils verticale, vous pouvez choisir de lassocier partir dune icne standard (fournie par Votre Site Web 4), partir dun fichier image externe de votre choix ou via un lecteur mdia ancr (fourni galement par Votre Site Web 4). Dans le cas de la troisime option, un repre apparat sur la page, lemplacement o le lecteur sera affich lorsque la page sera publie. En suivant lune des ces mthodes, vous pouvez choisir dintgrer ou non le son/la vido la publication. Lorsque vous publiez votre site, Votre Site Web 4 veille exporter et copier la fois les fichiers intgrs et ceux non-intgrs. Notez que vous ne pourrez pas rejouer/repasser ou modifier un fichier son ou vido dans Votre Site Web 4 ; vous aurez besoin dans ce cas dun diteur de mdia externe.

7.7. Astuces de conception


Images
Il existe plusieurs manires dobtenir un contenu pictural. Vous pouvez scanner, rcuprer des images lcran, utiliser des cliparts ou crer des images. Peu importe o vous rcuprez votre image, il vous faudra la modifier en la recadrant ou en lamliorant, en y ajoutant du texte, en appliquant un effet spcial, en la combinant avec une autre image. Pour toutes ces fonctions, vous navez pas tre un grand artiste mais vous devez connatre un programme de dessin tel que Studio Photo Pro. Veillez disposer dun programme permettant denregistrer au format GIF. Quel que soit le programme utilis, les informations et les conseils

40

Votre Site Web 4 fournis dans cette section vous aideront lutiliser efficacement avec Votre Site Web 4. Avant de passer des aspects plus techniques de lamlioration des images Web, passons en revue quelques-uns des principes visuels de conception concernant tout particulirement les pages Web en gnral. Comme dans les autres sections de ce chapitre, nous nous intressons la manire dont les utilisateurs visitent rellement les pages Web. Si vous utilisez des images comme lments de pages et non uniquement comme arrire-plan, utilisez alors de petits lments visibles sur toute la page, et non uniquement en haut et en bas. Au fur et mesure que le visiteur fait dfiler le texte, la page doit conserver un certain quilibre de textes, dimages et despace blanc en arrire-plan. Paralllement, vitez les ornements inutiles tels que les rgles, les puces et les icnes, moins quelles ne fassent partie dun schma densemble. Nutilisez pas trop de couleurs sur la page ou larrire-plan. Votre site paratra plus professionnel si vous nen utilisez quune demi-douzaine par page pour larrire-plan, le corps du texte, les liens et les images. Privilgiez les arrire-plans blancs ou clairs. Nappliquez pas plus de deux couleurs dominantes par page ; plus les autres couleurs sont diffrentes de ces couleurs dominantes, moins elles doivent occuper de place. Appliquez la mme couleur aux lments de forme ou de fonction similaire, par exemple pour tous les titres de sections ou toutes les rgles horizontales. Essayez de varier les formes artistiques que vous utilisez. Ajoutez une ou deux photographies, mme si elles nont pas spcialement rapport avec votre site : elles amlioreront son attrait visuel au niveau dcoratif, condition quelles ne sintgrent pas dans une composition. Pensez utiliser un clipart comme arrire-plan pour un logo, le haut de votre texte ou un plan de navigation. Utilisez plusieurs types dimages. vitez les formes rectangulaires et entasses qui ont tendance donner la page un aspect ferm, statique et amateur. Les images plus rondes et aux contours plus doux rendent la page plus ouverte.

41

Votre Site Web 4 Ajoutez des effets graphiques combinant des bords durs et doux ; les ombres portes en sont un bon exemple. Leffet bord doux, appel anti-crnelage, constitue lastuce de base de lartiste crant des images sur ordinateur. Vous pouvez ainsi supprimer le crnelage situ le long des bords en appliquant subtilement des couleurs intermdiaires. Pour lil humain, le texte anti-crnel apparat dune meilleure qualit lcran que le texte sans effet, notamment lorsque la taille des polices est leve. En rgle gnrale, utilisez toujours lanti-crnelage pour vos images et titres, moins que limage ne comporte des lignes droites, des bords ou des contours. Comme le montre lillustration ci-dessous, votre conception peut comporter des lments de page se mlangeant avec des lments de la maquette. Il peut sagir de parties de logos, dun titre, dune barre de navigation, etc. LHTML 4.0 vous permet de superposer un objet sur un autre sans avoir vous proccuper du chevauchement. Il vous sera toutefois ncessaire de faire un zoom avant et dajuster les objets sur lun des calques, ou les deux, afin dobtenir un enregistrement prcis. Il est essentiel de bien choisir le format et les paramtres des images Web. Votre Site Web 4 se base sur des paramtres globaux pour dterminer comment devra tre export chaque type dimage, lors de la publication de votre site. Par dfaut, toute image enregistre sous les formats .gif et .jpeg est exporte sous le fichier dorigine, en utilisant le nom de fichier original. Toutes les autres images sont converties en .jpeg. Si vous le souhaitez, vous pouvez modifier ces paramtres globaux dans longlet Images de la commande Fichier/Proprits du site Web. Il est toujours possible de recourir lAssistant Proprits des images Web, accessible par la commande Outils/Gestionnaire dimages Web, afin de modifier les paramtres dexportation de chacune des images. LAssistant vous permet de vrifier limage slectionne uniquement, une srie de pages ou toute la publication. Pour chaque image, vous pouvez spcifier le format darrive : .gif, .jpg, .png ou paramtres globaux. Voici quelques conseils gnraux relatifs aux formats dimages Web utiliser lors de limportation. Vous trouverez bien dautres informations plus dtailles sur les options de formats et de conversion dans lAide en ligne : il sagit dun des chapitres incontournables !
42

Votre Site Web 4 Pour importer des images dans Votre Site Web 4, prfrez lutilisation du bouton Importer image ou la commande Insrer/Image au collage dans le Presse-papiers. Moins limage subit de transformations de filtres, meilleur est le rsultat. Utilisez le format .gif pour les images peu colores, autres que des photos et ayant des contours prcis, tels que des graphiques ou du texte captur lcran. Le format est limit 256 couleurs et convient donc galement aux photos en niveaux de gris. Pour les photos, les images colores ou nayant pas des contours prcis, prfrez le format .jpg au format .gif. Avec le format .jpeg, la qualit de limage, et donc la taille du fichier, diminue au fur et mesure que le paramtre de compression augmente. Avec une compression leve, certaines images peuvent conserver leur qualit mais les photographies, notamment, se dgraderont de manire visible. Visualisez votre site et soyez seul juge. Vous pouvez ajuster les paramtres globaux et locaux en fonction des paramtres requis par la compression en .jpg. Gardez lesprit que tous les ordinateurs de vos visiteurs ngaleront pas la rapidit ou laffichage image du vtre. Comme pour le format .gif, certains moniteurs sont limits 256 couleurs. Il est gnralement conseill de passer en affichage 256 couleurs et de tester votre page dans un navigateur avant de la publier. De cette manire, vous serez sr dutiliser des couleurs ne posant pas de problmes lors de laffichage sur des systmes classiques. Plus vous en saurez sur les palettes de couleurs et les formats dimages, moins vous risquerez davoir de problmes daffichage.
Remarque : Affichage 256 couleurs Si vous tes sr que tous vos visiteurs potentiels pourront afficher plus de 256 couleurs, il nest pas utile que vous lisiez la section suivante. Cependant, ces connaissances peuvent se rvler utiles lorsque vous travaillez lcran avec des images, tandis que la thorie des couleurs de base peut vous aider dans le royaume des publications papier.

43

Votre Site Web 4 Lune des contraintes majeures impose par les systmes 256 couleurs tient au fait que tous les systmes nutilisent pas les mmes 256 couleurs. Le systme dexploitation rserve des emplacements pour les couleurs de son propre systme et les palettes diffrent entre les ordinateurs Windows et Macintosh par exemple. Les applications, y compris les navigateurs Web, disposent de leur propre palette et utilisent la diffusion pour essayer dobtenir des couleurs nappartenant pas la palette. Ainsi, lalternance de pixels rouges et de pixels bleus de la palette va donner une impression de pixels violets dont la couleur nappartient pas la palette. Si vous ntes pas attentif, la diffusion peut rduire nant tous vos efforts. Prenons par exemple le cas o vous avez cr une image avec des zones de couleurs solides mais o le navigateur de lutilisateur ne peut afficher aucune de ces couleurs. Le navigateur va alors diffuser la couleur, dgradant et mouchetant limage. Si la couleur solide contenait du texte, celui-ci deviendrait moins lisible. Pour empcher un affichage de ce type, les concepteurs de sites Web utilisent souvent une palette Web de 216 couleurs ne se diffusant pas dans les navigateurs Web fonctionnant dans des environnements 256 couleurs. Cette palette Web est en fait un cube de couleur RVB 6x6x6 utilisant des valeurs rouges, vertes et bleues quitablement espaces le long de ses axes, allant de 0 255. 51 constitue lintervalle de cette srie de valeur (0, 51, 102, 153, 204, 255). Par consquent, la dfinition RVB "0, 102, 51" serait une couleur Web, contrairement "0, 102, 52". Pour crer des couleurs Web dans un programme de dessin, dfinissez de nouvelles couleurs en utilisant les valeurs RVB gales 0 ou divisibles par 51. Pour vous aider, Votre Site Web 4 comporte deux palettes dchantillons de couleurs contenant les couleurs Web. Rechercher les fichiers websafe1.gif et websafe2.gif dans le dossier Micro Application/WP80/ samples. Vous pouvez coller lun dentre eux dans la zone de travail de votre programme de dessin ou slectionner des couleurs en utilisant lOutil Injecteur de votre programme. Vous pouvez galement tlcharger la palette websafe.pal afin quelle soit utilise dans le tableau de slection de couleurs. Cette tape est particulirement importante si vous recourez lanti-crnelage des images, de faon garantir que le programme applique aux contours des couleurs de la palette Web.
44

Votre Site Web 4 En rgle gnrale, si vous avez un affichage 256 couleurs, enregistrez au format .gif les images bitmap peu colores cres dans votre programme de dessin avec la palette Web. vitez dutiliser une palette par image : si vous avez plusieurs GIF par page Web, les diffrentes palettes risquent dtre incompatibles et dendommager toutes les images.

Performance
Ce terme de performance peut paratre incongru dans le domaine du graphisme, mais il sagit pourtant dun des facteurs majeurs dans lapprciation de votre site Web par les utilisateurs. Techniquement, il correspond ici au temps de chargement, savoir la dure daffichage de toute une page Web dans le navigateur, cest--dire de son texte et de ses images. En fait, il sagit dun paramtre difficile mesurer, dautant plus quil dpend dautres facteurs subjectifs tels que la largeur de bande de la connexion, de la rapidit du serveur et du dbit du modem. Comme nous lavons indiqu prcdemment, il est toujours prfrable de concevoir la fentre dajustement de chaque page afin que les visiteurs puissent lire et/ou rflchir quelque chose, ce qui permet dattnuer limpression de retard lors du chargement du reste de la page. Le temps de chargement dpend de la taille de lensemble des objets de la page tlcharger, les images ncessitant gnralement le plus de temps. Cest la raison pour laquelle on peut dire que la performance dune page dpend de la taille de lensemble de ses fichiers images. Nous vous conseillons de limiter la taille de chaque page 60 Ko maximum. Sachant que le modem dun utilisateur priv peut tlcharger entre 3 et 5 Ko par seconde, le temps de chargement est alors de 12 20 secondes. Sil dure plus longtemps, vous vous exposez des problmes. Vous pouvez dterminer la taille relle de vos fichiers en publiant les pages les unes aprs les autres dans un dossier local avec la commande Fichier/Enregistrer le site/dans un dossier, puis en utilisant lExplorateur Windows pour examiner le contenu du dossier. Affichez les fichiers par date, appuyez sur la touche Maj tout en slectionnant le fichier le plus rcent, puis cliquez avec le bouton droit de la souris et slectionnez la

45

Votre Site Web 4 commande Proprits pour visualiser le nombre total doctets. Moins il est lev, plus rapide sera le changement des pages ! Existe-t-il une solution de rduction de la taille de vos fichiers image autre que celle visant diminuer leur nombre ? La rponse la plus vidente est den rduire les dimensions autant que possible. Ainsi, rduire de moiti la hauteur et la largeur dune image revient diminuer de 75 % la taille du fichier correspondant. Si vous enregistrez des images au format .gif (voir ci-dessus), vous pouvez profiter du fait que, contrairement aux autres formats 256 couleurs, ce format nutilise pas forcment des pixels de 8 bits. Si le nombre de couleurs de limage est de 128, les fichiers .gif peuvent effectuer un encodage de 7 bits. Avec 64 couleurs, 6 bits, etc. Nous avons fait lexprience en commenant avec une petite image, ou plutt un texte anti-crnel, nutilisant que 14 couleurs. Nous lavons enregistr sous le format .gif, dans un programme de dessin comportant 256 couleurs : la taille du fichier tait alors de 1204 octets. Aprs rduction 16 du nombre de couleurs affiches dans le programme de dessin, ce qui tait encore suffisant pour toutes les afficher dans limage, nous avons nouveau enregistr et la taille du fichier est passe 420 octets. Si vous avez des douzaines ou plus de petits GIF par pages, ces petites rductions peuvent sajouter pour faire de grosses rductions ! Les programmes de dessin proposent diverses solutions de rduction des couleurs. Certains vous permettent de dfinir une image de 16 ou 256 couleurs, mais pas de 64 ou 128 ; cela est toujours utile si vos images ncessitent 16 couleurs au maximum. Dans lidal, vous pouvez enregistrer un nombre de couleurs arbitraire et le programme essaiera doptimiser limage en utilisant cette valeur. Vous pouvez donc slectionner une profondeur de couleurs intermdiaire et dterminer celle qui fonctionne le mieux pour une image donne. Pour rsumer : pour rduire la taille dun fichier, diminuez le nombre de couleurs de chaque image et enregistrez-le au format .gif en utilisant la plus petite profondeur de couleurs accepte par votre programme de dessin. Si ces informations sur les formats dimage et la profondeur de couleurs vous dpassent un peu, nous vous conseillons de prendre un bon programme de dessin et dessayer les techniques voques prcdemment.
46

Votre Site Web 4 Voici quelques astuces supplmentaires pour que vos pages saffichent plus facilement : vitez les grandes zones de transparence ; associez les petits objets et dfinissez les options de faon obtenir une seule image ; utilisez la bonne rsolution dune image avant de limporter, plutt que de la rduire ensuite sur la page.

Multimdia
Compte tenu de tous les conseils de prudence donns prcdemment et permettant de rduire la taille des fichiers, pour aboutir un temps de chargement acceptable dans les navigateurs Web personnels, une incursion dans le multimdia demande vraiment du courage ! Mme si Votre Site Web 4 vous permet dinsrer la fois des fichiers audio et vido et, pour faciliter vos efforts, il intgre mme les fichiers dans la publication originale, du point de vue de la conception, cette fonctionnalit doit tre considre comme plutt exprimentale. Votre Site Web 4 vous permet dinsrer un large ventail de fichiers audio et vido de type QuickTime, MPEG, RealAudio ou RealVideo. Toutefois, moins de savoir que vos visiteurs potentiels peuvent lire ces formats, nous vous conseillons de conserver les types de mdia gnraux de Windows. Il sagit des formats .wav pour laudio et .avi pour la vido. Comme pour les images, la principale contrainte est la taille des fichiers. Ainsi, un fichier .wav contenant un discours ncessite environ 10 Ko par seconde tandis que le fichier .avi compress dune vido de la taille dun timbre-poste, de dix images par seconde et sans bande sonore ncessite environ 35 Ko par seconde. Si vous voulez ajouter une bande sonore votre film, additionnez ces deux nombres. Ces taux paraissent drisoires lorsque votre source est un disque dur local mais avec un modem standard, la vitesse estime prcdemment de 3 5 Ko par secondes, nous vous laissons faire le calcul. Les visiteurs de votre site Web devront attendre trs longtemps avant que ce clip vido de 5 secondes leur en mette plein la vue. Et, moins dutiliser un mdia continu, qui pose des questions techniques allant bien au-del de celles traites dans ce chapitre, il ny a pas dautre possibilit. Une autre contrainte associe lutilisation daudio et de vido tient lobtention ou la production de contenu. Votre Site Web 4 ne peut pas utiliser ces formats : il ne peut ni les modifier, ni les rcouter. Par consquent, moins demprunter un fichier son ou vido, vous devrez

47

Votre Site Web 4 matriser une application ddition mdia ou connatre quelquun de spcialis dans ce cas. La bonne nouvelle est que, mme si les possibilits multimdia de Votre Site Web 4 sont exprimentales, vous pouvez quand mme vous amuser tester diverses fonctionnalits. Si vous et/ou vos visiteurs Web tes sur un rseau local ou disposez dune connexion haut dbit, le fait que laudio et la vido consistent en des chargements de fichiers ne doit pas tre une barrire. La prise en charge limite par Votre Site Web 4 correspond exactement ce que vous devez inclure, savoir des squences de films privs numrises ou des thmes musicaux darrire-plan qui dfilent pendant que vos visiteurs lisent attentivement votre page daccueil. Lintroduction de vidos sur le Web nest peut-tre pas encore assez au point mais ne sous-estimez pas les possibilits de cration audio. Vous pouvez ajouter un aspect ludique et susciter lintrt avec de courts clips audio bien slectionns, tels que des mots ou des phrases, des thmes, des effets de son, etc. Pour des clips plus longs, nous vous suggrons dutiliser loption dancrage, qui propose un petit lecteur lcran. Les visiteurs ne souhaitant pas avoir de son apprcieront de pouvoir arrter la musique. En rsum, nous ne vous conseillons pas de faire de laudio non-continu la cl de vote de votre site Web, mais il sagit sans aucun doute dune autre manire dajouter un type daccueil diffrent sur vos pages. Les barrires sont relles ce stade mais laissez votre crativit tenter le dfi.

48

Votre Site Web 4

7.8. Pour obtenir davantage daide sur lutilisation dimages, danimation et de multimdia
Pour de plus amples informations sur... aligner associer exporter recadrer utiliser les calques les autres oprations sur les objets les lignes et les formes la Bibliothque et le Porte-documents Dans lAide de Votre Site Web 4, affichez Sommaire Puis : Consultez les rubriques de la section Modier les objets sur la page

Sommaire

Consultez les rubriques de la section Utiliser des images, des animations et du multimdia Slectionnez "Importer" Slectionnez "Sites Web, dnir les options daffichage des images" Slectionnez "Effets danimation" Slectionnez "Son" ou "Vido" Consultez les rubriques de la section Utiliser des couleurs, des remplissages et de la transparence

importer des images dnir les options de publication des images lanimation le son et la vido utiliser les couleurs, les remplissages et la transparence

Index Index

Index Index Sommaire

49

Votre Site Web 4

8.

Utiliser des liens hypertextes et linteractivit

Dans ce chapitre, nous tudierons plusieurs manires damliorer la qualit et la varit de vos pages Votre Site Web 4 aux yeux du visiteur. Si votre site compte plus dune page, il est essentiel dajouter des liens hypertextes car ce sont eux qui permettent aux visiteurs de naviguer dans votre site : la procdure est toute simple ! Ajouter du code Java ou HTML est plus compliqu mais si vous tes tenez le faire, Votre Site Web 4 est prt soutenir vos efforts. En ajoutant un objet tel quune forme, un mot ou une image, le visiteur de votre site peut cliquer sur un objet pour dclencher une action qui peut tre daccder une page Web (que ce soit sur votre site ou ailleurs sur le Web) ; lapparition dune fentre de composition de mail ; ou laffichage dun fichier image ou texte. Vous pouvez galement placer des zones dynamiques cliquables sur votre page. Commenons par observer les liens hypertextes de votre publication cre partir dun modle.

8.1. Le texte dun lien hypertexte


Dans des pages Web, les mots dun lien hypertexte sont souligns. Ouvrez nouveau le fichier dexemple Arc et effectuez un zoom avant sur la partie suprieure de la page. Cliquez sur le bouton de la page active en bas gauche de lcran pour passer sur le calque de la maquette. Cliquez sur le terme "Prsentation". tant donn quil sagit du texte dun champ, un curseur apparatra au dbut ou la fin du mot. Cliquez sur le bouton Insrer Zone dynamique de la barre doutils verticale. La bote de dialogue Liens hypertextes apparat et licne de destination du lien Une page Internet est slectionne.

50

Votre Site Web 4 Observez les autres destinations possibles des liens. Vous pouvez utiliser le bouton Supprimer pour enlever le lien hypertexte du texte slectionn, si vous le souhaitez, puis cliquez sur Annuler. Pour crer un nouveau lien hypertexte dans du texte existant, vous devez dabord slectionner le texte auquel vous voulez ajouter un lien hypertexte, puis cliquer sur le bouton Insrer Zone dynamique. La mme bote de dialogue apparat : il ne vous reste plus qu choisir la destination du lien et cliquer sur OK. Du point de vue de la conception, il est recommand dinclure une barre de navigation, cest--dire une srie de liens vers diverses pages cls de votre site. Placez-la sur la maquette afin que des liens identiques apparaissent sur chaque page. Au lieu dutiliser des zones de texte distinctes, comme dans la publication cre partir du modle, utilisez une unique zone de texte en haut de votre page, en centrant les liens comme dans lillustration ci-dessous par exemple. Quel que soit le type de conception que vous choisissez, noubliez pas que votre barre de navigation constitue un lment essentiel. Les utilisateurs vont sattendre la trouver pour se reprer dans votre site. Il est donc recommand de planifier lavance la mise en page de base.

8.2. Les images comportant un lien hypertexte


Il ny a que quelques mots ajouter ici car la procdure permettant dajouter un lien hypertexte une image est identique celle visant lajouter du texte. Vous navez qu slectionner lobjet et cliquer sur le bouton Insrer Zone dynamique. Cliquez sur le bouton de la page active en bas gauche de lcran pour passer sur le calque de la maquette. Avec lOutil Pointeur, cliquez sur une photo pour la slectionner, puis cliquez sur le bouton Insrer Zone dynamique. Vous verrez nouveau apparatre la bote de dialogue Liens hypertextes. Il sagit de la technique utiliser si vous souhaitez ajouter un lien hypertexte tout un objet. Dans le cas contraire, lisez la mthode permettant dajouter une zone dynamique, dcrite ci-dessous.

51

Votre Site Web 4

8.3. Utiliser des zones dynamiques et des images survoles


Une zone dynamique est une zone de lien hypertexte transparente dans une page Web. Gnralement place au-dessus dimages, les zones dynamiques agissent comme des boutons actifs lorsquils sont slectionns dans un navigateur Web. Elles sont tout particulirement utiles si vous souhaitez que le visiteur puisse cliquer sur diffrentes zones dune image (telles quun menu graphique ou une carte de votre site). Pour vous donner une ide de la manire dont elles fonctionnent, nous allons en crer une. Cliquez sur le bouton Insrer Zone dynamique de la barre doutils verticale. Le curseur se transforme en une petite croix. Placez la zone dynamique au-dessus du papillon de la photo. Cliquez lgrement en haut gauche du papillon, puis dplacez la souris vers le bas et la droite pour dessiner un rectangle, que vous pourrez ajuster plus tard. Lorsque vous relchez le bouton de la souris, la bote de dialogue Liens hypertextes apparat. Vous devez maintenant choisir la destination du lien. Slectionnez loption Une page dans votre publication et la page 2 dans la liste droulante, puis cliquez sur OK. Si ncessaire, vous pouvez utiliser lOutil Pointeur pour dplacer ou redimensionner une zone dynamique, comme toute autre image. Vous pouvez ajouter autant de zones dynamiques que vous le souhaitez. Vous pouvez galement ajouter des nuds supplmentaires une zone dynamique, afin quelle sintgre dans une zone irrgulire. Pour de plus amples informations, reportez-vous lAide en ligne. Les images survoles combinent plusieurs images comportant du code HTML, de manire ce que limage diffre (ou ce quune image soit dclenche) lorsque lutilisateur dplace la souris sur

52

Votre Site Web 4 lobjet. Ainsi, un bouton survol peut apparatre cliqu ou non-cliqu sil est survol ou non par la souris. Votre Site Web 4 vous permet dajouter des images survoles vos publications Web ; le code quelles contiennent est gnr automatiquement pour vous. Lajout dimages survoles repose en fait sur le choix de l(des) tat(s) de limage survole que vous souhaitez dfinir pour un objet particulier (normale, survole, cliquable et/ou clique) et sur la spcification dune image pour chaque tat. Pour de plus amples informations, reportez-vous lAide en ligne.

8.4. propos du code HTML et des applets Java


Le code HTML constitue le langage de base des pages Web indiquant au navigateur ce quil doit afficher et quel emplacement. Votre Site Web 4 ne supporte pas ldition intgrale du code HTML. Vous pouvez toutefois ajouter du code HTML supplmentaire une page. Vous pouvez ainsi ajouter des fragments de code HTML gnrs par une autre application, copis partir dune autre page Web ou ceux que vous avez peut-tre dj vous-mme crits. Pour insrer du code HTML, excutez la commande Insrer/Objet Web puis slectionnez HTML dans le sous-menu. Dans la bote de dialogue qui saffiche, saisissez le code HTML. Votre Site Web 4 insre un repre dans votre publication sur le site, lemplacement o le code doit fonctionner. tant donn que vous ne pourrez pas voir les effets du HTML avant de visualiser votre site export, veillez placer correctement les repres. Ensuite, vous ne pourrez faire autrement que vrifier votre page Web dans un navigateur !
Astuce : Enregistrer du code HTML Vous pouvez enregistrer des fragments de code HTML dans le Porte-Documents.

Java est un langage orient objet multiplateforme servant crer des mini-applications, appeles applets, pouvant tre intgres aux pages Web et dmarrant lorsque la page saffiche dans un navigateur Web. Votre Site Web 4 vous permet dintgrer des applets Java vos
53

Votre Site Web 4 publications sur le Web, sans avoir les crer vous-mme. De nombreuses applets sont disponibles en ligne telles que des animations, des composants pour linterface, des mises jour automatiques des informations, des interactions bidirectionnelles, des rendus dimages, des mises jour automatiques, des donnes audio et vido, des jeux et bien dautres encore. Pour insrer une applet Java, excutez la commande Insrer/Objet Web puis slectionnez Applet Java dans le sous-menu. Dans la bote de dialogue qui apparat, fates la liste de tous les fichiers composant lapplet et celle de tous les paramtres ncessaires (tels que dcrits dans la documentation sur lapplet) dfinissant le fonctionnement exact de lapplet. Il nest pas ncessaire que vous compreniez le code sous-jacent mais vous devez comprendre la documentation Lisez-moi fournie avec lapplet. Comme avec le code HTML, Votre Site Web 4 insre un repre dans votre publication sur le site, lemplacement o le code doit fonctionner. Les dimensions du repre ne correspondront sans doute pas exactement celles de lapplet dans laquelle il fonctionnera : prvoyez donc la mise en page en consquence et plus vous effectuerez de tests de visualisation laide de versions diffrentes de plusieurs navigateurs, mieux ce sera.

8.5. Astuces de conception


Dans cette section, nous examinerons plus attentivement comment le fait de lier des lments peut contribuer rendre votre site la fois esthtique et fonctionnel. Les dtails font toute la diffrence.

Liens hypertextes
Internet a fini par mettre la mode le concept de lien hypertexte, que lon rencontre maintenant depuis au moins dix ans. Il se limitait auparavant aux clics permettant de parcourir un CD-Rom ; nous sommes maintenant habitus cliquer pour faire le tour du monde en lespace de quelques secondes. Toutefois, la cration de documents comportant des liens hypertextes efficaces nen est encore qu ses dbuts. Voici quelques conseils relatifs aux divers types de liens.

54

Votre Site Web 4 Utilisez les liens avec parcimonie dans le texte : privilgiez la qualit la quantit. Si vous souhaitez que vos visiteurs finissent de lire votre paragraphe, ne les invitez pas trop souvent consulter dautres pages. Ne laissez pas les liens situs dans du texte perturber le flux de votre criture. vitez les phrases du type "Cliquez ici pour en savoir davantage sur linsertion de liens dans un texte". Il serait prfrable dcrire "Les liens Internet sont performants mais peuvent entraner certains problmes sils sont trop utiliss". Si vous disposez de plusieurs liens vers des documents apparents, inscrivez-les plutt dans une liste spare, que vous pourrez embellir par des images. Si vous site possde plusieurs sujets troitement associs, il est vraisemblablement plus efficace de les rassembler dans une section ou sous-section ayant sa propre page de menu que de crer de nombreux liens transversaux entre les sujets. Si vous avez des documents se succdant, vous pouvez crer une squence parcourir (voir ci-dessous).

Boutons de navigation
Comme nous lavons mentionn prcdemment, une barre de navigation constitue un lment de mise en page fondamental et trs pratique. Outre les liens hypertextes, vous pouvez utiliser des boutons cliquables, cest--dire des images auxquelles sont appliques des liens hypertextes ou des zones dynamiques. Si votre site adopte le modle section/niveau de base, tel quil est dcrit dans le chapitre Crer une conception, vous souhaiterez probablement ajouter des liens la page daccueil ainsi quaux diffrentes pages de menu des sections. Si vous nen tes quau dbut du dveloppement de votre site, veillez ce que la structure densemble soit claire avant de concevoir votre barre de navigation. Dcidez des sections que comportera votre site, puis slectionnez une image pour le bouton de chaque section. Faites des projets de conception sur papier. Sil y a des chances que vous ajoutiez dautres sections lavenir, laissez de la place dans la barre de navigation pour pouvoir y placer un ou deux boutons supplmentaires.

55

Votre Site Web 4 Rsistez la tentation de concevoir des icnes personnelles pour les divers boutons. Vous pourrez reproduire des cliparts mais crer des icnes originales et explicites est un art en soi et risque de vous faire perdre beaucoup de temps. Quant aux boutons eux-mmes, ils ne doivent pas ncessairement tre rectangulaires et biseauts, comme des losanges. Le texte artistique convient trs bien. Rappelez-vous que lorsque le pointeur de la souris de votre navigateur dfile sur un lien hypertexte, il se transformera en une petite main. Si lassemblage final ressemble peu prs une barre de navigation, les utilisateurs le remarqueront et sauront comment sen servir. Vous pouvez accentuer le contour des boutons en les sparant les uns des autres, en utilisant par exemple des contours ou bordures, en ajoutant des puces ou des triangles ou en utilisant un effet de filtre sur le texte tel quune ombre porte ou un biseau. Bien sr, si vous le souhaitez, vous pouvez crer des boutons de forme plus traditionnels ou ovales grce aux Formes pleines. Les boutons peuvent galement tre des images survoles, cest--dire des objets dont limage change lorsque vous dplacez la souris. Lajout dimages survoles dans Votre Site Web 4 consiste simplement dcider quel(s) tat(s) dimage survole vous souhaitez dfinir pour un objet particulier, en spcifiant ensuite une image pour chaque tat et une cible hypertexte pour le bouton. Le code ncessaire au dclenchement de laction est gnr automatiquement votre place. Les utilisateurs doivent considrer la barre de navigation comme un lment fixe de larrire-plan de la page, prsent dans tout le site. La solution la plus simple consiste placer la barre sur la maquette afin quelle apparaisse sur chaque page. Pour faciliter la navigation, vous pouvez modifier laspect de la barre, dune section une autre, en mettant en valeur ou en surbrillance, dune certaine manire, le bouton de la section active. La solution sans doute la plus conomique combine une srie de boutons de base sur la maquette avec une puce ou un pointeur au niveau de la page indiquant la section active. Cette solution fonctionne particulirement bien avec une liste verticale comportant les noms de section.

56

Votre Site Web 4 Le placement dune image de type pointeur sur chaque page ncessite de nombreux collages, mais cela en vaut la peine. Veillez ce que lalignement des pointeurs soit homogne dune page lautre. Pour obtenir une mise en valeur, vous pouvez utiliser un programme de dessin tel que Studio Photo Pro qui vous permet de personnaliser les images de la barre de navigation des diverses sections du site. Commencez avec une image qui ne sapplique qu des boutons neutres, non mis en valeur. Faites autant de copies de limage quil y a de boutons. Modifiez lun des boutons de chaque section, en lui appliquant une mise en valeur telle quune couleur ou un style de police diffrent. Ne modifiez pas le reste de limage. Chaque section dispose maintenant de sa propre image sur les boutons. Collez chaque image sur toutes les pages de la section correspondante, au mme emplacement. Slectionnez un pourcentage de zoom lev et utilisez lOnglet Modif. pour obtenir la position en pixels de lobjet slectionn. Il est prfrable, ce stade, dafficher quelques guides de rgles et dactiver le magntisme. Vous obtiendrez ainsi une barre de navigation unique dont la mise en valeur change dune section lautre. Lavantage tir de lutilisation du niveau de la page et non de celui de la maquette, pour votre barre de boutons, est que vous pouvez insrer une copie de cette barre en bas de chaque page, un agrment supplmentaire pour vos utilisateurs. La longueur de vos pages tant susceptible de varier, cest--dire la distance par rapport lobjet du bas, vous pouvez modifier lemplacement de la barre du bas si ncessaire alors que si elle se trouvait sur la maquette, son emplacement resterait statique. La barre de navigation est extrmement utile mais la structure de votre site ncessitera peut-tre dautres types de liens de navigation. Ainsi, supposez que plusieurs pages se succdent. Un long message ou rapport peut par exemple avoir t scind en plusieurs sections ou des listes dadresse tries par ordre alphabtique. Dans de telles situations, la cration dune squence parcourir utilisant une mini-barre de navigation permet lutilisateur davancer ou de revenir en arrire dans
57

Votre Site Web 4 cette suite de pages. Vous pouvez ainsi crer des boutons Prcdente et Suivante reprsents par les flches habituelles. Le problme, avec les boutons Prcdente/Suivante, est que vous devrez personnaliser le lien de chaque bouton vers une page cible, en utilisant des liens diffrents pour chaque page de la suite de pages. Une barre plus conomique et plus fonctionnelle pour la squence parcourir comporte cinq points reprsentant la suite de cinq pages. Le carr du centre reprsente la page active. Pour atteindre lune des cinq pages, il suffit que lutilisateur clique sur le point correspondant. Si vous utilisez une suite de cinq zones dynamiques relies aux bonnes pages, vous pouvez dupliquer la zone dynamique se trouvant sur chacune des cinq pages et simplement placer une image diffrente sur chaque page. Enfin, mme si nous vous recommandons de ne pas concevoir de trop longues pages qui obligent lutilisateur faire dfiler le texte, il est pratique de savoir quun lien hypertexte sur la page active obligera le navigateur rafficher le haut de la page. Si cela vous semble ncessaire, vous pouvez donc inclure un bouton Haut, reprsent gnralement par une petite flche vers le haut et associ la page active, sur le bas de votre page. Aprs tout, lutilisateur a fait preuve defforts pour atteindre le bas, pourquoi lui faire remonter toute la page ?

Images cliquables
Votre Site Web 4 comporte deux types dimages cliquables : les images auxquelles un lien hypertexte a t ajout par la commande Insrer/Lien hypertexte et celles sur lesquelles une ou plusieurs zones dynamiques ont t superposes laide de lOutil Zone dynamique. Le choix est souvent facile faire. Si vous crez une barre de boutons comportant diffrentes formes de boutons, affectez des liens spcifiques chaque image (ou une zone dynamique, dcrite prcdemment). Si votre barre ne contient quune seule image, utilisez une zone dynamique. Lutilisation des zones dynamiques, qui sont elles-mmes des images, nest pas recommande dans du texte. Elles obligent convertir le texte en image lors de la publication de la page. La page doit alors tre renomme et les caractres sont souvent dforms. En revanche, la
58

Votre Site Web 4 superposition dune zone dynamique sur une image ne ncessite pas de conversion. Si vous souhaitez obtenir des lettres bien nettes sur votre image cliquable, crez-la avec un programme de dessin. Utilisez de prfrence le format .gif pour toutes les images non-photographiques que vous crez pour vos publications Web dans Votre Site Web 4 et travaillez en mode 256 couleurs. Consultez les astuces de la section Images. Les cinq points de la barre de la squence parcourir illustrs ci-dessus constituent un bon exemple dimage cliquable simple et utile. Les zones dynamiques comportent elles-mmes un groupe dimages pouvant tre copi et coll sur diffrentes pages tandis que limage correspondante change. Les images cliquables sont une alternative aux liens hypertextes, quil est prfrable dutiliser dans du texte. De cette manire, si vous disposez de plusieurs pages classes par ordre alphabtique, vous souhaiterez srement crer un alphabet sur lequel les utilisateurs pourront cliquer pour atteindre une page donne. Vous pourriez pour cela crer 26 liens hypertextes mais il est sans doute plus esthtique de crer une image crative contenant lalphabet, dont chacune des lettres comporte une zone dynamique. Vous pouvez utiliser des images cliquables pour crer des menus picturaux fantaisie, des index visuels, des plans, des schmas et autres aperus cliquables du contenu de votre site. En bref, vous pouvez vous amuser, alors nhsitez pas !

8.6. Pour obtenir davantage daide sur les liens hypertextes et linteractivit
En fait, vous savez maintenant presque tout ce quil y a savoir sur les liens hypertextes et les zones dynamiques ! Toutefois, lorsque vous dvelopperez votre site Web, vous souhaiterez certainement utiliser la commande Outils/Gestionnaire de liens hypertextes pour avoir une vue densemble de tous les liens de votre publication. Dun seul coup dil, vous pouvez visualiser leur destination, vrifier les URL et afficher tout lien hypertexte pour mieux le vrifier. Pour de plus amples informations, reportez-vous lAide en ligne.

59

Votre Site Web 4

Pour de plus amples informations sur... crer des liens hypertextes dnir la couleur des liens hypertextes crer et diter des zones dynamiques ajouter des images survoles gestionnaire de liens hypertextes

Dans lAide de Votre Site Web 4, affichez Index

Puis : Slectionnez "Liens hypertextes, ajouter une page Web" Slectionnez "Liens hypertextes, dnir la couleur des" Slectionnez "Zones dynamiques" Slectionnez "Boutons dimages survoles" Slectionnez "Liens hypertextes, utiliser le gestionnaire de liens hypertextes" Slectionnez "Applets Java" Slectionnez "HTML, ajouter du code aux pages Web"

Index

Index Index

Index

ajouter des applets Java ajouter du code HTML

Index Index

9.

Visualiser, publier et maintenir le site

Il est temps maintenant de rpter la phase finale de prparation de votre site Web ! Dans cette phase de visualisation et de publication, Votre Site Web 4 prend les pages de la publication et les convertit en HTML et en images, afin que le navigateur puisse les afficher. Vous pouvez ensuite enregistrer ces pages dans un dossier local ou les publier sur un hte Web. La visualisation est identique la publication locale, except le fait que les fichiers exports sont temporaires et destins une visualisation immdiate dans votre navigateur Web.

9.1. Optimiser la publication


Avant la visualisation et la publication, il est conseill de profiter des outils intgrs Votre Site Web 4 permettant de vrifier le contenu et la structure de votre publication. Vous pouvez utiliser le Correcteur
60

Votre Site Web 4 orthographique pour vrifier et corriger votre texte. Le Gestionnaire de texte affiche une liste de tous les messages et de tout le texte artistique utilis dans votre publication, tandis que lAssistant Contrle de la maquette des pages Web localise, et souvent corrige, les problmes tels que le dbordement des objets sur la page, lexistence de zones de texte vides ou la superposition dobjets. Pour de plus amples informations sur ces outils, reportez-vous lAide en ligne (voir la remarque la fin de ce chapitre).

9.2. Visualiser le site


Il est essentiel de visualiser votre site au moins une fois avant quil ne soit rellement publi. Ce nest quen visualisant vos pages Web dans un navigateur que vous pourrez tre sr que les titres et le corps du texte apparaissent comme vous le souhaitiez, que les lments sintgrent bien dans la page, que les animations fonctionnent la bonne vitesse et que les liens entre les pages sont cohrents. Bien que votre publication cre partir dun modle comporte encore beaucoup de texte et dimages du modle original, essayez de la visualiser. Nous prsumons bien sr que votre navigateur Web est install. Cliquez sur le bouton Aperu Site Web de la barre doutils standard. Dans la bote de dialogue qui saffiche, slectionnez loption Toutes, puis cliquez sur OK. La publication Votre Site Web 4 est exporte dans un fichier temporaire et votre navigateur souvre, affichant la page daccueil de votre site. Si votre ordinateur essaie de se connecter Internet lorsque le navigateur souvre, annulez la bote de dialogue de connexion qui saffiche. Il nest pas ncessaire de se connecter pour visualiser votre site. Si vous aviez enregistr le GIF anim sur la page daccueil, il sanime ! Lorsque vous dplacez le pointeur sur des liens hypertextes ou des zones dynamiques, il changera daspect et prendra celui dune petite main. Cliquez sur la zone dynamique place sur le papillon de la photo (notez que son contour est maintenant invisible) et vous accderez la page 2.
61

Votre Site Web 4 La visualisation de votre site vous offre la possibilit de voir le site tel quil saffichera dans le navigateur de vos visiteurs. Observez quelle vitesse saffichent les pages et rappelez-vous que la publication Web sera plus lente. Vrifiez chacune des pages et notez tous les problmes, puis revenez dans Votre Site Web 4 et effectuez les corrections ncessaires. Dans la bote de dialogue Publication dun site Web, cochez loption correspondante pour publier une seule page, une srie de pages ou toutes les pages. chaque visualisation, tous les fichiers temporaires prcdents sont supprims. Ainsi, si vous avez dj visualis lensemble de votre site et que vous dcidez de visualiser une seule page, pour vrifier les corrections par exemple, toutes les pages exportes prcdemment ne seront plus disponibles. Si cela vous pose problme, enregistrez dans un dossier local suivant la mthode dcrite ci-dessous.

9.3. Enregistrer dans un dossier local


Cette option, tout comme la visualisation, exporte les pages de votre publication sous forme de fichiers HTML et dimages. Voici les diffrences cls. Vous dsignez dans quels fichiers les pages doivent tre enregistres, au lieu de les publier dans des fichiers temporaires, que vous ne pouvez pas rellement contrler. Comme il a dj t not prcdemment, chaque fois que vous visualisez votre site Web, mme si vous ne visualisez quune seule page, vos fichiers temporaires prcdents disparaissent. Dans longlet Images de la commande Fichiers/Proprits du site Web, vous pouvez spcifier si vous souhaitez que les images prennent le nom des fichiers originaux ou crasent les anciens fichiers lorsquelles sont publies dans le mme dossier. Les noms des fichiers HTML sont automatiquement crass. Lintgralit de votre site reste intacte. Votre navigateur Web ne se lance pas automatiquement : vous avez la possibilit de le lancer ou non. Sil est dj ouvert, vous navez qu rpondre Non. Ensuite, retournez dans la fentre de votre navigateur et utilisez la commande Recharger ou Actualiser pour afficher la page mise jour.

62

Votre Site Web 4 Lenregistrement dans un dossier local constitue une autre manire de visualiser votre site Web et de partager votre site avec dautres personnes, sur un rseau local. Inutile dessayer maintenant mais voici les tapes ncessaires lenregistrement dans un dossier local. Dans la bote de dialogue Enregistrer dans un dossier, slectionnez le dossier dans lequel vous souhaitez enregistrer les fichiers ou cliquez sur Nouveau dossier pour crer un dossier. Comme pour la visualisation, vous pouvez choisir denregistrer une page ou une srie de pages. Acceptez ou refusez de lancer votre navigateur Web en cochant le bouton appropri.

9.4. Publier sur le Web


Votre Site Web 4 rend la publication sur le Web presque aussi simple que lenregistrement dans un dossier local. Avant la premire publication, vous devrez rassembler certaines informations fondamentales concernant votre fournisseur daccs, dtailles dans lAide en ligne (voir la remarque la fin de ce chapitre). Lorsque vous tes prt publier votre site Web, voici les tapes suivre. Cliquez sur le bouton Publier sur le Web dans la barre doutils standard pour afficher la bote de dialogue Publication dun site Web. Spcifiez le nombre de pages publier et cliquez sur OK. Votre Site Web 4 exporte la(les) page(s) dans des fichiers temporaires, puis la bote de dialogue Informations sur le compte FTP apparat. Slectionnez un compte FTP que vous avez dfini auparavant ou, pour dfinir un nouveau compte, saisissez ladresse FTP du serveur Web ainsi que votre identifiant et votre mot de passe, pour lequel vous devez respecter la casse. Dans le cas de la majorit des sites Web, vous pouvez laisser le champ Dossier vide ; sinon, saisissez le nom du dossier publi, puis cliquez sur OK. Votre Site Web 4 recherche une connexion Internet ou en tablit une nouvelle pour se connecter au serveur distant. Certains fournisseurs
63

Votre Site Web 4 daccs exigent des utilisateurs quils utilisent leur logiciel de connexion pour tablir laccs Internet. Un message vous avertit lorsque tous les fichiers ont t copis correctement. Pour visualiser vos pages "en direct" sur le Web, saisissez dans votre navigateur lURL correspondant au chemin daccs au serveur hte plus le dossier dans lequel vous avez effectu la publication. Vous navez plus qu vous fliciter !

9.5. Maintenir votre site


Aprs avoir publi votre site sur le Web (voir la rubrique prcdente), vous devrez effectuer la maintenance des pages de votre site en mettant rgulirement jour leur contenu par lajout ou la modification du texte, des images et des liens, puis en publiant nouveau une ou plusieurs page(s). La modification du contenu est relativement facile, vous disposez dj de tous les originaux. Lorsque vous publiez nouveau des pages dans un mme dossier, les fichiers HTML sont toujours crass. Longlet Images de la commande Fichier/Proprits du site Web vous permet, si vous le souhaitez, dcraser les images existantes, en utilisant les mmes noms de fichiers. Toutefois, au fil du temps, vous vous apercevrez que les fichiers inutiliss sont trs nombreux et vous devrez faire le mnage. Dans les fichiers locaux, vous pouvez organiser par date le contenu de votre Explorateur ou de votre Poste de travail, puis utiliser la commande Actualiser pour dfinir les fichiers conserver, cest--dire les derniers crs. Pour un meilleur nettoyage, enregistrez rgulirement votre site dans un nouveau dossier et supprimez lancien. Pour effectuer des oprations de mnage telles que supprimer ou renommer des fichiers/dossiers publis sur votre site Web, vous pouvez utiliser la commande Maintenance du site Web du sous-menu accessible en excutant Fichier/Enregistrer le site. La bote de dialogue Informations sur le compte FTP apparat. Slectionnez un compte FTP ou saisissez les informations, comme lorsque vous publiez le site, puis cliquez sur OK. Une fois la connexion tablie, la bote de dialogue Maintenir le site Web apparat.

64

Votre Site Web 4 Vous pouvez alors utiliser les paramtres standard de maintenance de Windows Explorer. Cliquez sur la barre de titre des colonnes pour modifier lordre de tri ou leur largeur. La ligne suprieure comporte des boutons permettant daccder au dossier parent, de crer un nouveau dossier, de supprimer un lment slectionn ou de choisir le paramtre daffichage. Pour renommer un fichier ou un dossier, cliquez deux fois sur son nom, puis saisissez le nouveau nom, ou cliquez dessus avec le bouton droit de la souris, puis slectionnez la commande Renommer. Pour slectionner plusieurs fichiers, appuyez sur la touche Ctrl tout en cliquant sur les fichiers. Pour slectionner une suite de fichiers, appuyez sur la touche Maj tout en cliquant sur les fichiers. Pour supprimer un fichier, cliquez sur le bouton Supprimer en haut de la fentre ou cliquez avec le bouton droit de la souris et slectionnez la commande Supprimer. Pour dplacer un ou plusieurs fichier(s) slectionn(s), dplacez-les dans le dossier de destination. Cliquez ensuite sur le bouton Fermer de la fentre pour mettre fin votre connexion FTP et retourner dans Votre Site Web 4.

9.6. Astuces de conception


La question de la frquence de la mise jour se situe au cur de la maintenance de votre site. Si vous avez pass des jours et des semaines concevoir, puis publier un site attrayant, la navigation intuitive et au contenu correct, vous nen tes qu vos dbuts. La boucle ne sera boucle que lorsque des visiteurs commenceront visiter votre site et exprimer leurs ractions critiques. Demandez explicitement leur avis et noubliez pas dinclure un lien de retour vers une adresse lectronique. Mettez vos utilisateurs au dfi de rpondre ! Demandez-leur de faire des choix prcis en posant des questions telles que "Prfrez-vous voir A, B ou C sur cette page ?". Faites-leur prendre conscience de leur contribution. Pour vous, la diffrence est norme entre travailler "sans retour" et recueillir ne serait-ce quun ou deux avis. Envisagez plus votre site comme une lettre dinformation expose des dlais de publication. Nous vous conseillons de ne pas attendre plus de deux semaines avant deffectuer des modifications visibles. Ils ne doivent pas ncessairement tre spectaculaires mais servir avant tout renforcer limpression que votre site est dynamique, et non statique. La page daccueil est celle devant tre modifie le plus souvent : ajoutez de nouveaux liens ou remplacez danciennes images par de nouvelles.
65

Votre Site Web 4 Ajoutez une ou deux pages pour allonger les sections dorigine. Veillez attirer lattention sur les nouvelles fonctionnalits de la page daccueil, en ajoutant NOUVEAU ! devant elles par exemple. Modifiez la conception de toute page ne fonctionnant pas comme vous le souhaitez. En rgle gnrale, ne modifiez pas la structure de larrire-plan et de la section afin de ne pas bouleverser les visiteurs. Les sections ayant au dpart une seule page ncessiteront un menu des sections ds lors que de nouvelles pages y seront ajoutes. Si vous avez une barre de navigation avec un bouton amenant dj la page dorigine, transformez cette page en une page de menu pour conserver intact ce lien. Il est gnralement plus facile de dplacer le contenu vers une nouvelle page que de modifier des liens existants. Vous pouvez facilement voir le contenu, ce qui nest pas le cas des liens. Pour finir, nhsitez pas enfreindre les rgles indiques ci-dessus et remanier votre site sil est vident que vos visiteurs se perdent ou sont frustrs, ou si vous dcouvrez un meilleur systme dorganisation de votre contenu. Dans ce mdia encore jeune, il nest pas inhabituel que les sites subissent de profondes mtamorphoses. Sur Internet, le changement est constant, et maintenant, vous y prenez part.

9.7. Pour obtenir davantage daide sur les tches lies la publication...
Avant de publier votre site Web actuel, vous souhaiterez probablement essayer les options de correction de Votre Site Web 4 mentionnes ci-dessus, et apprendre ajouter des descripteurs destins aux moteurs de recherche. Vous souhaiterez peut-tre avoir des informations sur la publication dans un autre serveur Web.
Pour de plus amples informations sur... imprimer visualiser publier maintenir utiliser les outils de correction Dans lAide de Votre Site Web 4, affichez Sommaire Puis : Consultez les rubriques de la section Imprimer, visualiser et publier sur le Web Slectionnez "outils de correction"

Index

66

Votre Site Web 4

ajouter des descripteurs pour les moteurs de recherche rassembler des informations sur le serveur Web

Index

Slectionnez "Moteurs de recherche" Slectionnez "Publier des sites Web, sur Internet" et consultez la remarque de "Rassembler des informations sur le serveur Web"

Index

10. Crer une conception Web


Nous supposons quau cours des chapitres prcdents, vous avez suffisamment travaill sur des exemples partir des modles et que vous avez acquis les connaissances de base concernant les outils et techniques de Votre Site Web 4, mme sil vous manque un peu de pratique. Vous avez vu quil existe de nombreuses possibilits pour personnaliser les publications cres partir dun modle et que cette approche vous permet de rpondre parfaitement vos besoins. Noubliez toutefois pas quoutre la diversit des modles, Votre Site Web 4 vous offre galement la possibilit de concevoir vous-mme un site Web et de raliser chacune des pages comme vous le souhaitez. Vous pouvez suivre une approche mixte en tudiant la mise en page des modles, en vous en inspirant et en appliquant ce que vous avez appris lors de la conception de votre site. Si vous souhaitez concevoir votre site, voici les tapes suivre. Lorsque vous avez ouvert Votre Site Web 4, excutez la commande Fichier/Nouveau ou cliquez sur le bouton Nouveau dans la barre doutils standard pour accder lAssistant dmarrage. Cliquez ensuite sur loption Crer une publication. La nouvelle publication souvre alors avec une page vierge. Dans le menu Fichier, slectionnez la commande Mise en page pour modifier la taille de la page. Vous pouvez choisir loption Standard,
67

Votre Site Web 4 Largeur ou Personnaliser, auquel cas vous devez saisir les valeurs correspondant la largeur et/ou la hauteur. Bien sr, il nexiste pas quune seule mthode pour raliser un site Web oprationnel. Il peut toutefois tre utile davoir un plan dattaque : les sections suivantes vous fournissent un bref aperu du processus, assorti de quelques suggestions pour guider vos efforts.

10.1. Structure du site


Il va probablement sans dire, mais mieux vaut le rappeler, quavant de commencer concevoir un site, vous devez avoir dfini prcisment, sur papier, le nombre de pages dont vous aurez besoin, quel sera laspect de la composition de base et la manire dont les pages seront lies ensemble. Contrairement un magazine ou une lettre dinformations, un site Web ne dpend pas dune squence de pages linaire. Il est plus logique de donner une dimension spatiale votre site, que vous pourriez comparer une maison que des personnes visiteraient. En rgle gnrale, vous pouvez supposer que les visiteurs y entreront par la porte principale (la page daccueil), mais ensuite, tout dpendra des liens que vous leur aurez fournis, qui correspondent aux couloirs reliant les diffrentes pices (sections) du site. Chaque pice peut comporter plusieurs portes latrales : veillez toutefois ce que les visiteurs ne se perdent pas ! Les aides visuelles, telles quune barre de navigation, des indications claires et/ou un code de couleur par section du site, peuvent tre trs utiles condition que vous les incluiez dans votre schma de conception. Lors de lbauche de votre futur site, il est utile de faire correspondre le contenu que vous souhaitez publier sur votre site aux pages physiques qui le contiendront et lafficheront. Il sagit du modle section/niveau. Une section est une catgorie, telle que "Quoi de neuf ?", "Nos produits", "Organigramme" ou "Autres sites". Les diverses sections sont gnralement rpertories sur la page daccueil du site. Chaque page du site appartient une section donne et, moins quil ny ait quune seule page dans une section donne, chaque section dispose de sa propre page de menu.

68

Votre Site Web 4 Le niveau est le nombre dtapes ncessaires pour atteindre une page donne, partir de la page daccueil. Si lon admet que la page daccueil correspond au niveau 1, alors les pages de menu des sections correspondent au niveau 2. Les pages situes une tape au-dessous des pages de menu des sections correspondent au niveau 3. Il sagit en fait dun schma hirarchique, dune arborescence dont la page daccueil sert de point de dpart ou de tronc, alors que les autres pages sont les branches. Bien sr, rien ne vous empche de crer galement des liens latraux, en plus des liens hirarchiques entre les niveaux. Ce modle section/niveau est non seulement bien adapt la majorit des contenus susceptibles dtre publis sur le Web, mais il se prte aussi particulirement bien lajout dlments graphiques. Consultez la section Navigation. Il sagit dune excellente occasion pour vous, le concepteur du site, de pouvoir organiser votre contenu et de fournir une aide visuelle approprie aux visiteurs, leur vitant ainsi de se perdre. Rappelez-vous que chaque page saffichant lcran doit comporter des aides visuelles, telles que le nom de la section dans laquelle se trouve lutilisateur. Les pages de menu et de sous-menu, cest--dire la page daccueil et les pages de menu des sections, constituent les principaux nuds de cette structure. Lexprience montre quil est prfrable de ne conserver quentre quatre et huit lments de menu par page. En cas de doute, augmentez le nombre de possibilits de menus avant de crer une page de sous-menus, cest--dire un nouveau niveau. Des tudes ont montr que les utilisateurs prfrent des menus peu nombreux mais denses des menus trs nombreux mais succincts. Peu importe la simplicit initiale de votre site : il doit avant tout tre clair vos yeux afin que vous puissiez le rendre clair aux yeux des visiteurs. Faites un schma de la manire dont vous envisagez les sections et niveaux. Si vous utilisez lun des modles, vous commencerez par une page daccueil relie environ six pages, ou sections, de niveau 2. Veillez ce que leur nom corresponde leur contenu. Au fur et mesure, vous ajouterez du contenu. Les pages de sections se transformeront probablement en pages de menus, leur contenu
69

Votre Site Web 4 sintgrant aux pages de niveau 3 nouvellement cres. Vous ne pourrez voluer ainsi que si le schma de la structure de votre site tait clair pour vous, ds le dpart.

Navigation
La cration de site Web engendre des dfis uniques, que le monde de limpression na pas relever. Quand avez-vous pens pour la dernire fois que vous "naviguiez" dans un livre ? Le modle section/niveau que nous avons utilis constitue un cadre parfaitement adapt, sil fonctionne avec votre contenu, bien sr, car une arborescence est un schma aussi intuitif quun systme de chemins peut ltre. Toutefois, pour les visiteurs arrivant par des portes latrales ou utilisant des liens hypertextes transversaux permettant de passer dun site un autre, vous devez vous assurer que larborescence ne se transforme pas en un labyrinthe. moins que votre site ne soit dune extrme simplicit, ne vous attendez pas ce quune numrotation des pages rponde aux besoins dun visiteur. En effet, vous tes la seule personne pour qui les numros de pages sont utiles car Votre Site Web 4 vous demande dindiquer un numro de page chaque fois que vous dfinissez un lien hypertexte pour passer dune page lautre. Cela signifie que vous devez conserver une liste des numros de page de votre site correspondant aux pages de la publication originale. Lajout daides visuelles sur chaque page est plus utile que la numrotation des pages. Ces aides doivent rpondre aux questions : Dans quelle section suis-je maintenant ? et O suis-je par rapport au menu des sections ? Le texte peut alors tre utile. Il est judicieux de se servir des titres et manchettes des pages identifiant ce qui se trouve sur la page. En utilisant des manchettes plus grosses pour les pages de titre du niveau 2, cest--dire le menu des sections, de plus petits caractres pour celles du niveau 3, etc., vous pouvez mieux indiquer lutilisateur quelle distance il se trouve de la page daccueil. Pour distinguer les sections, vous pouvez utiliser diverses techniques, quil est prfrable de combiner. Les sections peuvent utiliser un code de couleurs que vous appliquerez aux manchettes et/ou lments
70

Votre Site Web 4 graphiques. Vous pouvez insrer le nom de la section dans la composition en le plaant comme du texte artistique sur la page, align sur les lments darrire-plan. Lapproche la plus efficace, et celle qui mrite autant dattention que la conception de votre page daccueil, consiste concevoir une barre de navigation qui servira dlment composant la page du site ; daide visuelle indiquant lutilisateur o il se trouve ; doutil fonctionnel permettant dtablir des liens entre les sections du site. O quelle soit place, en haut, en bas, droite ou gauche, la barre de navigation doit tre considre comme un lment fixe de la mise en page. Elle ne doit jamais disparatre ou changer de ct. Une barre de navigation traditionnelle comporte des boutons associs la page daccueil et aux pages des diverses pages de menu des sections. Laspect de la barre de navigation peut varier considrablement. Ainsi, sur les pages dune section donne, le bouton de cette section peut tre mis en valeur par une police ou un style de police diffrent, etc. chaque fois que lutilisateur entre dans une nouvelle section, la barre de navigation, normalement fixe, semblera changer dtat et signaler une transition. Il nest pas difficile de crer des barres de navigation nutilisant que du texte. Les pages cres avec les modles de Votre Site Web 4 y recourent et leffet est des plus esthtiques. Une barre de navigation aux images bien conues rcompensera vos efforts : votre site se situera alors un cran au-dessus des autres. Pour de plus amples informations, consultez la section Liens ci-dessous. Si vous nutilisez pas de barre de navigation, veillez au moins ce que chacune des pages ait un minimum dun ou deux liens hypertextes, vous permettant daller la page daccueil et/ou aux pages apparentes. En labsence de liens hypertextes sur la page, lutilisateur doit utiliser le bouton Prcdente de son navigateur pour revenir sur ses pas : il risque alors de quitter votre site trs rapidement. Lavantage de lutilisation dune barre de navigation est que les liens vers les nuds principaux de la structure de votre site sont intgrs : vous navez donc pas craindre que les visiteurs se perdent. Vous pouvez consacrer la majorit de votre temps ajouter des liens
71

Votre Site Web 4 hypertextes (voir la section suivante) qui amliorent non seulement votre contenu mais aussi la navigation de lutilisateur.

10.2. Mettre en page


Tant que les visiteurs continueront lire les pages Web, et non les regarder ou les couter, tout ce que vous avez appris sur le style ditorial et lorganisation du texte reste pertinent. Ne jetez pas votre manuel de rdaction ! Les lecteurs sont rceptifs aux textes clairs et concis. Ils seront respectueux dun message correctement prsent et dune ide bien transmise : la relation entre les titres et le corps du texte, lutilisation des sous-titres, etc. sont toujours importantes. En outre, par rapport une publication imprime, lcran de votre ordinateur ressemble un trou rectangulaire dans lequel lutilisateur doit chercher des informations. Croyez-vous que les utilisateurs voudront faire dfiler la page vers le bas pour savoir ce quil manque au bas de celle-ci ? La lecture des titres et le parcours des messages, habituels lors de la lecture dun journal, perdent tout leur sens lorsque le contenu est scind sur plusieurs crans. Mme le visiteur le plus chevronn en matire de lecture sur cran ne connatra ni le nombre de pages, ni la manire dont elles sont organises lorsquil visitera votre page daccueil pour la premire fois. Au dpart, le visiteur ne voit que ce qui saffiche dans le volet de navigation, do la notion de fentre dajustement faisant rfrence la zone standard dajustement des titres la tlvision ; une certaine portion de la page reste toujours masque. Avec une rsolution 800x600, la fentre dajustement correspond environ 400 pixels, en dimension verticale, de la hauteur relle de la page. Le contenu de cette zone peut tre la seule chose que voit le visiteur lors des quelques secondes ncessaires au chargement des diverses images sur la page. Des tudes montrent que de nombreux utilisateurs du Web ne font pas dfiler les pages avant de continuer : affichez donc quelque chose pour capter leur attention ! Contenu. La fentre dajustement doit contenir les informations essentielles relatives au site et convaincre le visiteur de faire dfiler davantage de pages.

72

Votre Site Web 4 Composition. Considrez la fentre dajustement comme une mini-page et vrifiez que les lments sy trouvant fonctionnent comme un groupe. En gnral, le haut et le bas des pages Web doivent contenir davantage dinformations que ceux des publications traditionnelles. Le titre du site Web, qui apparat immdiatement dans la barre de titre du navigateur lors du chargement de la premire page, doit contenir prcisment lidentit de votre site, ventuellement avec une pointe dhumour. Llment du haut doit inclure un logo ou un autre motif didentification ainsi que le titre de la page, afin que les utilisateurs sachent quils sont arrivs la bonne page. Des aides visuelles relatives aux sections et aux niveaux peuvent galement tre intgres. Le bas de la page constitue lemplacement idal pour ajouter des lments et confrer la page toute son autonomie. Ainsi, il est conseill dajouter la date afin que les utilisateurs sachent si le contenu est actuel. Excutez la commande Insrer/Informations/Date ou heure, puis dcochez loption Mettre jour automatiquement. Si vous navez pas de page de rponse ou de commentaires distincte, placez un lien hypertexte de retour avec votre propre adresse lectronique en bas de chaque page. Il est conseill dindiquer galement ladresse URL de la page. De cette manire, si le visiteur enregistre la page sous un fichier texte, ou limprime, il aura une trace de lorigine de la page. Vous pouvez galement ajouter une mention de copyright. Les conseils prcdents relatifs aux hauts et bas de pages sappliquent autant la page daccueil quaux pages de menu des sections ou toute autre page. Ils vous aideront homogniser les pages afin quelles soient conformes la reprsentation des sites Web que se font les visiteurs. De manire gnrale, lhomognit est une bonne chose : si vous dcidez dun thme dimages, tenez-vous y dans tout votre site. Toutefois, si vous en abusez, votre site risque de devenir monotone. Vous devez donc galement veiller diffrencier les divers niveaux des uns des autres. En dautres termes, la page daccueil doit tre unique, tandis que les pages de menu des sections doivent se ressembler, tout en tant diffrentes des pages des autres niveaux. Outre lintrt quelles suscitent, ces variations servent aussi daide visuelle.

73

Votre Site Web 4 Si vous utilisez Votre Site Web 4 pour concevoir la publication, profitez de la distinction maquette/page. Pensez que larrire-plan est une feuille de papier en-tte. Ainsi, vous pouvez concevoir un en-tte color sur la maquette, en intgrant un logo principal par exemple, qui apparatra ensuite sur toutes les pages Web. Sur chacune dentre elles, vous pouvez ajouter des informations locales telles que le nom de la section ou le titre de la page qui, visuellement, se fondront avec larrire-plan lors de la publication de la page. Consultez les astuces de la section Images relatives aux lments de premier et darrire-plan. Votre Site Web 4 propose deux tailles de pages Web par dfaut : Standard pour les moniteurs VGA et Largeur pour les moniteurs SVGA. Cette dernire option (800x600) convient la majorit des utilisateurs. Le bas des pages de Votre Site Web 4 est fixe, mais un navigateur Web naffichera rien sous les objets du bas de chaque page. Si vous envisagez dinclure des pages comportant beaucoup de texte et obligeant les utilisateurs faire dfiler le texte vers le bas, vous pouvez augmenter la valeur de la hauteur de la page pour augmenter lespace disponible. Vous ne devez pas ncessairement remplir cet espace et il est bien plus facile de modifier la valeur au dpart quaprs avoir dvelopp le site. Lune des choses les plus simples que vous pouvez faire pour amliorer laspect de votre site consiste dfinir des marges de gauche et de droite relativement larges. Lespace supplmentaire disponible droite et gauche vous aide loigner votre contenu des bords du volet de navigation : laspect obtenu est alors aussi sobre que sil sagissait dune page imprime et la consultation de la page en est facilite. Des tudes montrent qu une distance de lecture normale, lamplitude du mouvement des yeux nest que de 8 cm ; les lignes plus longues ncessitent un effort supplmentaire. Nhsitez pas passer un peu de temps positionner diffremment les principales zones de texte de votre premire page et les visualiser dans votre navigateur jusqu ce que vous trouviez vos emplacements favoris. Dupliquez ensuite la premire page pour crer les autres pages, afin que la mise en page soit homogne sur les autres pages du site.

Votre page daccueil


Sur la page daccueil, vous pouvez enfreindre certaines rgles. Ainsi, mme si vous essayez de rduire la dure de chargement de chaque
74

Votre Site Web 4 page, vous pouvez quand mme insrer davantage dimages plus lourdes sur la page daccueil. Lattention de la majorit des visiteurs sera un peu plus grande, tout comme leur tolrance, sils se demandent ce quoffre le site. Par ailleurs, ils nauront attendre qu la premire visite de votre site : les images sinscriront ensuite dans le cache Internet et seront immdiatement disponibles lors de la visite suivante. Dautre part, toutes les indications mentionnes ci-dessus sont avantageuses pour vous. La page daccueil, et notamment sa fentre dajustement, constituent votre seule chance de faire impression ds le dbut, moins quun visiteur nentre dans votre site par lune des portes latrales auxquelles nous faisions allusion prcdemment. Choisissez le type dimpression que vous souhaitez donner votre site : sympa, attrayant, intriguant, professionnel ou tout la fois, puis vous pouvez commencer. Rendez la fentre dajustement suffisamment intressante pour quelle attire lattention du visiteur lors du chargement du reste de la page qui se poursuit par le texte dabord, puis par les images. Une composition comportant divers paragraphes de texte se chargera rapidement et, si vous effectuez le bon choix de couleurs de texte et darrire-plan, lefficacit peut tre surprenante. Une citation concise ou un symbole inhabituel vous servira capter limagination du visiteur et le stoppera dans son lan lincitant cliquer et passer la page suivante. La page daccueil peut tre un mlange de carte de vux, de couverture de magazine, de publicit et de menu principal du reste de votre site. Il ne fait aucun doute que de belles images ajoutent de lintrt, mais ne vous sentez pas oblig dillustrer chaque lien vers une section avec son propre GIF. Souvenez-vous que certains utilisateurs empchent le tlchargement des images lorsquils parcourent des sites Web de faon acclrer le chargement des informations textuelles et passer la publicit. Ces visiteurs ne verront jamais vos images alors veillez ce que votre texte capte leur attention. Pour ces visiteurs, et pour les autres, pensez ajouter des lgendes pour chacune des images, grce la commande Gestionnaire dimages Web du menu Outils. Vous pouvez galement slectionner des images indpendantes, puis lancer lAssistant pour dfinir les lgendes correspondantes. Les lgendes attireront lattention lors du chargement des images et donneront le thme de limage pour les
75

Votre Site Web 4 utilisateurs naffichant que le texte. Les aveugles disposant dun quipement spcial peuvent entendre le contenu des lgendes grce une voix de synthse et ne manqueront pas compltement le contenu graphique. Vous pouvez galement insrer de grandes images, notamment si leur taille double lorsquelles deviennent des images cliquables. Il est conseill de ne pas mettre plusieurs images de 50 Ko par page et toute image ncessitant une ou deux minutes de tlchargement doit le valoir !

76

Votre Site Web 4 7944

Compos en France par Jouve 11, bd de Sbastopol - 75001 Paris

Rf : 7944