Conseils pour réaliser le site web

Conseils pour réaliser le site web
En supposant que vous partiez de zéro (ce qui n'est pas souhaitable alors que le semestre approche
de sa fin !), voici comment vous pouvez procéder pour travailler de manière rationnelle.
Mais vous devez être capable d'utiliser l'explorateur pour naviguer dans le disque dur, de créer des
dossiers et sous-dossiers, de voir clair dans une arborescence ; de placer des fichiers (documents,
images) dans des dossiers – faut-il encore rappeler la différence entre fichier et dossier ? ; d'ouvrir
un document ou une image avec un programme approprié.
Les programmes nécessaires ont été proposés sur le réseau A30. On supposera donc que vous avez
installé OpenOffice, Namo, NVU ou Kompozer, Xnview. Au minimum, si vous n'avez pas eu ces
programmes, vous pouvez télécharger NVU (ou plutôt Kompozer, qui est le même programme,
amélioré) et Xnview, faciles à trouver avec Google. Namo et NVU-Kompozer ont à peu près le
même type de fonctionnement. On peut aussi utiliser FrontPage si on en dispose, faute de mieux,
mais il faudra ensuite probablement corriger des noms de fichiers et supprimer des choses inutiles.
➢
Arborescence
Préparez un dossier à cet effet (nommé par exemple ProjetDurand). Dans celui-ci, créez 2 sousdossiers, img et data ; dans ce dernier, créez un sous-sous-dossier images, au moins. Vous avez
ainsi l'arborescence (architecture) nécessaire, les boîtes vides dans lesquelles vous mettrez du
contenu.
Si vous mettez des sons, des musiques, prévoyez un sous-dossier sons dans data.
➢
Texte
Le site web doit contenir du texte et des images. Supposons que vous ayez votre texte écrit sur
papier. Il faut le taper. Vous pouvez utiliser OpenOffice (Nouveau / Document HTML). Ou bien,
évidemment, taper directement dans Namo ou NVU. Vous pouvez taper la totalité, mais en
prévoyant de le découper en 5 chapitres (ce n'est pas limitatif), et vous sauvegardez ce document
provisoire avec un nom quelconque. Ceci dans l'hypothèse où ne savez pas comment procéder, et
prévoyez de faire le reste en TP.
Mais si votre plan est fait, faites donc ceci 5 fois, dans 5 documents HTML donc, que vous
enregistrez avec des noms reconnaissables (respectez las contraintes : pas d'espaces, d'accents, de
majuscules, et 8 caractères maximum + extension). Enregistrez ces pages (encore vides) dans le
sous-dossier data que vous avez créé précédemment. Pour l'instant, la page d'accueil n'est pas faite,
on la fait après.
* Note : NVU fait des suffixes .html au lieu de .htm, ne chipotons pas, c'est la même chose, inutile
de chercher à le contredire.
Avec OpenOffice, Namo ou NVU, faites la mise en forme : gras, italiques (évitez de souligner) ;
couleurs ; taille des caractères ; centré, justifié (pour justifier avec Namo, cherchez Format /
Paragraphe). Évitez les polices de caractères jolies mais peu courantes, qui risquent de ne pas
apparaître sur Internet ou sur un autre ordinateur. Toute la mise en forme se fait très facilement avec
OpenOffice, mais quand il s'agira d'intégrer des images, on utilisera plutôt Namo ou NVU. Si on
fait attention, on peut pourtant tout faire avec OpenOffice.
Si vous voulez utiliser une jolie police de caractères pour un titre, il vaut mieux taper ce titre dans
une page blanche, faire une capture d'écran (touche Imp-écr), l'importer dans Xnview (Edition /
Importer le contenu du presse-papier), sélectionner une zone rectangulaire à la souris, copier et
coller de la même façon comme nouvelle image, et l'enregistrer en format gif, avec transparence
(Options / transparence sur la palette 0), enregistrer en 256 couleurs. C'est cette image que l'on
place alors comme titre.
1
➢
Images
Vous devez avoir trouvé votre stock d'images.
Si vous en trouvez sur Internet, récupérez-les ainsi : clic droit sur l'image, puis Enregistrer sous...
Vous choisissez alors le bon dossier, et vous pouvez changer le nom (pas l'extension : les jpg
doivent rester jpg, et ainsi de suite, et n'effacez pas le point qui précède). Respectez les contraintes
sur les noms de fichiers.
Il faut vérifier la conformité des images. Seuls les formats gif et jpg sont autorisés – à la rigueur
png. Elles doivent être légères (par exemple, une photo jpg tient entre 50 et 100 Ko). Les noms
doivent être conformes aux contraintes Si ce n'est pas le cas, il faut les ouvrir avec un programme
comme Xnview et les corriger. Admettons, vous avez une image scannérisée, une bmp qui s'appelle
IMAGE_SCAN_000001.BMP (j'invente !), qui pèse 3 mégas. Commencez par faire Enregistrer
sous..., vous choisissez le format jpeg (extension .jpg), vous simplifiez le nom, en minuscules cette
fois, vous enregistrez dans le dossier images préparé précédemment. Vérifiez le poids : il a chuté
considérablement. Si ce n'est pas suffisant, toujours avec Xnview (attention, il faut probablement la
rouvrir, car c'est sans doute la bmp qui est toujours sous vos yeux), faites Image / Redimensionner.
Choisissez un pourcentage. Pensez que 50% divise le poids par 4. Quand l'image est ouverte avec
un zoom de 100% (c'est indiqué en bas), elle doit être conforme à l'aspect que vous attendez sur
écran. Si c'est bon, Fichier / Enregistrer.
Toutes vos images doivent ainsi être préparées dans le dossier images, et celles qui serviront à la
page d'accueil dans le dossier img.
Les gif ont l'avantage de pouvoir avoir un fond transparent. Ce format convient bien aux dessins. Si
on enregistre en gif avec Xnview, attention à mettre le maximum de couleurs, 256.
Vous trouverez un stock de petites images (puces colorées, fonds, barres, boutons de navigation)
dans Program Files / OpenOffice 2,0 / share / gallery. Si des images de cette sorte sont communes
à toutes les pages, vous pouvez les mettre une fois pour toutes dans img. Vous insérez une imagepuce une fois, puis vous la replacez par copier-coller (idem, surtout, avec les images de Namo).
Continuons.
➢
Intégration des images
Dans une page, vous prévoyez de placer une image à tel ou tel endroit. La place à gauche, au centre
ou à droite se fait comme pour le texte, avec les mêmes boutons.
Vous avez un bouton Image (on peut faire aussi Insérer / Image) ; vous cliquez, et vous faites
Parcourir ; vous allez chercher l'image où vous l'avez mise, dans le dossier images qui se trouve
lui-même dans data. Confirmez. La première fois, le programme ne cherche sans doute pas au bon
endroit, mais, avons-nous dit, vous savez naviguer sur le disque dur. Par la suite, il garde en
mémoire le dernier chemin utilisé.
Si vous voulez équilibrer sur l'écran un élément à gauche, un au centre, un à droite (ou plus), ne
bidouillez pas en écartant avec des espaces, le résultat peut être catastrophique. Il faut faire un
tableau (bouton Tableau, ou bien Insérer / Tableau) ; choisissez le nombre de cellules
correspondant au nombre d'éléments que vous placerez à l'intérieur. On peut paramétrer le tableau
(Propriétés du tableau), par exemple 95% en largeur (pas en pixels), centré ; rendre la bordure
invisible : bordure, épaisseur=0.
La page sera plus jolie si vous mettez une couleur d'arrière-plan, ou, mieux, une image d'arrière
plan, un fond de page, en faisant bien attention au problème du contraste des couleurs. Cela se fait,
dans Namo, avec le menu Fichier / Propriétés de la page (ou du document) ; avec NVU, c'est dans
le menu Format. Profitez pour inscrire quelques indications dans les propriétés de la page, comme
le nom de l'auteur (vous), et un titre pour la page, qui sera un vrai titre, comme « Histoire des
casseroles à travers les âges », si vous travaillez sur les casseroles, bien sûr.
L'image d'arrière-plan est une petite image qui se répète à l'infini. Il faut choisir ce que j'appellerai
une tapisserie sans raccords. Namo et OpenOffice ont des stocks d'images marbrées ou granitées
2
intéressantes. Évitez les grandes photos, ou alors il faut les retoucher (luminosité-contraste, voire la
taille, qui doit s'adapter à une grande résolution d'écran), et le résultat est souvent décevant.
➢
La page d'accueil
Elle doit s'appeler impérativement index.htm, et se trouver à la base du dossier qui contient votre
projet, donc au même niveau que les sous-dossiers img et data, vous devez avoir les trois sous les
yeux dans l'explorateur quand vous êtes dans votre dossier de travail.
Vous créez donc un nouveau document avec Namo ou NVU, que vous enregistrez sous ce nom et à
cet endroit.
Vous procédez comme auparavant pour y mettre un grand titre, une ou plusieurs images.
Vous y indiquez les titres de vos 5 chapitres, que vous pouvez d'ailleurs disposer dans un tableau
pour faire plus joli ou pour équilibrer.
Sur ceux-ci, il faut établir des liens (hyperliens, en anglais link) vers vos 5 pages précédentes. Le
titre de chapitre étant tapé, vous le sélectionnez à la souris ; puis, un clic droit, et Créer un lien (ou
bien Insérer / Lien). Le programme vous propose comme d'habitude Parcourir... Vous allez
chercher les pages correspondantes qui se trouvent dans le dossier data. Confirmez.
Dans chaque page, en haut ou en bas, on peut faire un lien vers la page suivante, ainsi qu'un lien de
retour à la page d'accueil. Un lien peut se faire sur une image, par exemple une flèche de navigation,
voir dans la réserve d'images d'OpenOffice. Namo possède aussi des images, mais il faut ensuite les
placer dans le dossier approprié avec un nom correct, ce qui peut se faire à l'enregistrement de la
page (Dossier... et Renommer).
Il est possible de faire des choses plus élaborées, comme des pages à cadres (encadrement), ce qui a
été montré en TP, mais il faut en être capable et / ou en avoir le temps. Mieux vaut aller au plus
simple, ça évite les mauvaises surprises. Par exemple aussi, avec Namo, on peut placer des couches,
c'est-à-dire des zones de texte ou d'image que l'on place où on veut à la souris ; avec NVU, il y a un
bouton en forme de punaise qui permet la même chose pour une image. Or, Internet Explorer
massacre allègrement les pages constituées ainsi, qui fonctionnent pourtant bien sous Firefox et
Opera...
Namo permet aussi de mettre un son wav ou midi à l'ouverture de la page. Mais il ne doit pas
dépasser quelques secondes, et ça devient vite fastidieux pour le visiteur.
On peut établir des liens sur une image : par exemple, c'est une miniature qui sera placée dans une
page qui offre une galerie de photos. Un clic sur la miniature permet d'ouvrir l'image complète en
grand. Mais il doit s'agir d'une vraie miniature, faite avec Image / Redimensionner dans Xnview (ou
autre), et pas de la même grande image redimensionnée à vue de nez et à la souris dans Namo.
Pour ceux qui sont suffisamment compétents, comme signalé plus haut, Namo permet de faire des
pages avec cadres : un bandeau en haut, un menu de navigation à gauche, et le contenu qui s'affiche
dans la partie droite quand on clique sur les éléments du menu. Mais attention, c'est assez complexe
au départ.
Et n'oubliez jamais que tout ça doit être attractif, la visite de votre site doit être agréable.
3