Avant tout, quelques conseils pratiques !
En premier lieu, je vous conseille très fortement, dans la mesure du possible, de n'employer que des minuscules pour vos fichiers. En effet, trop d'internautes m'appellent à l'aide parce que leur page ne sont pas chargées, certaines images ne s'affichent pas lorsqu'il vérifie leur site sur le serveur etc.
Pourquoi ? Parce que la plupart des serveurs sont en UNIX or, UNIX fait strictement la différence entre un fichier image.gif et Image.gif ou encore, image.gif et image.Gif etc. Par contre, Windows ne le fait pas, lui !
Résultat : sur votre PC, en local, tout fonctionne parfaitement et dès que les fichiers sont téléchargés sur le serveur, lors du premier test, on reçoit le message inquiétant que l'accès est interdit (forbidden) ou que l'adresse est inexacte etc.
Comme sur son PC, tout est correct, on n'y comprend rien ! On vérifie si les fichiers ont bien été téléchargés, oui ! On se trouve ainsi devant une impasse et on ne comprend plus...
Pour éviter tous ces problèmes, somme toute très anodins, je vous conseille donc de n'employer que des fichiers avec des minuscules, de cette manière, vous n'aurez aucune surprise, à condition bien sûr que vous renommiez tous les fichiers images ou autres en minuscules, si tel n'est pas leur cas ! (Commande Windows, "renommer" ou raccourci clavier "F2").
Ensuite, retenez que les fichiers que vous importez dans vos pages HTML ne sont pas incorporés dans vos pages, autrement dit, ceux-ci sont extérieurs à vos pages HTML et doivent donc être placés dans le dossier de votre PC et du serveur pour que ceux-ci puissent être visualisés. Nous verrons que WebExpert 5 intègre une fonctionnalité très intéressante, à savoir, d'importer automatiquement dans votre dossier de travail, les fichiers images que vous incorporez dans vos pages : évidemment, si vous transformez ces images ensuite (à partir de leur dossier initial), vous devrez les réimportez dans votre page pour que ce nouveau fichier remplace le précédent dans votre dossier de travail...
Donc, votre dossier de travail étant "Web" (nous l'avons créé dans la précédente chronique "Installations"), tous vos fichiers (HTML, gif, jpg et autres) devront se trouver dans celui-ci et il faudra toujours partir de celui-là pour créer et parfaire votre site.
Pensez à créer également un
dossier dédié à tous vos graphiques (fonds d'écran, animations, boutons, puces etc.), car de cette manière, au fur et à mesure de vos nouvelles acquisitions graphiques, vous pourrez toujours y puiser ce qu'il vous conviendra lors de la création de vos pages. Vous pouvez l'appeler Graphiques ou Web etc. mais faites précéder son nom, lors de la création du dossier, du caractère "ALT+0160"
ou de la lettre "a" !
Pourquoi ce "ALT+0160" devant le nom du graphique, c'est un truc que j'emploie pour les
dossiers souvent employés, cela permet ainsi, dès que l'on ouvre la fenêtre de chargement des images ou autres, de le voir dans les premiers
dossie (puisque ce caractère est un caractère invisible et Windowsx le place avant
tous les autres caractères), sans devoir constamment faire défiler l'arborescence du
HDD. Une autre manière, est de l'appeler par un nom commençant par une des premières lettres de
l'aphabet...
Avant de commencer, nous devons bien sûr configurer le mieux possible WebExpert 5, ne fusse que pour profiter de toutes ses possibilités, qui sont très nombreuses.
Si vous n'avez pas encore la licence de WebExpert
5 (ce que je vous recommande chaudement), vous pourrez employer totalement le
logiciel mais, à la fin de votre travail (avant que le logiciel ne quitte le
bureau), une fenêtre vous indiquera combien de temps il vous reste pour votre
période d'essai gratuite.
Après ce temps d'essai (100% correspondant à plus de dix séances de travail,
sans limite de fonctions), WebExpert 5 ne pourra plus être employé (même après désinstallation et
réinstallation). Si vous désirez vous enregistrer, vous pouvez désormais
commander directement WebExpert 5 sur Page-Web : section commande
/ téléchargement
Vous avez reçu votre licence, et vous désirez enregistrer WebExpert 5 ? Cliquez sur le menu "Aide" et choisissez "Enregistrement".
Il suffit que vous remplissiez le premier champ par le nom que vous a communiqué Visicom Media (en rapport avec votre propre nom) mais en veuillant à respecter strictement l'orthographe précise qui vous a été communiquée. Ensuite, de même dans le second champ, vous respectez absolument les caractères qui vous ont été communiqués par Visicom Media, y compris la casse (majuscule/minuscule) et les numéros (lettre "O" et chiffre "0". Faites Entrée (Retour) et c'est terminé. Si vous avez acheté une version CDROM, un numéro d'identification devra être encodé également...
Voilà, nous avons WebExpert 5, on peut commencer ;-)Vous devez penser à la future structure de votre site, même si vous en êtes au début : je vous propose la structure suivante, que vous pourrez développer plus tard bien sûr.
Création de votre première page (Accueil)
Pour
créer un nouveau document, soit vous employez celui qui vous est créé
automatiquement à l'ouverture de WebExpert 5, soit vous cliquez sur le
premier bouton 
situé
en dessous de "Fichier", soit enfin vous employez la combinaison de
touche (Ctrl+N) ( Voir l'initiation
rapide).
Vous obtenez alors, les codes HTML suivants :
<HTML>
<!-- DATE DE CREATION: 8/05/00 -->
<HEAD>
<TITLE></TITLE>
<META NAME="Description" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Author" CONTENT="André Rouyer">
<META NAME="Generator" CONTENT="WebExpert 5">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1">
</HEAD>
<BODY>
</BODY>
</HTML>
Où vous reconnaissez les différentes parties HTML que nous avons décrites dans la chronique "Langage HTML", à savoir la balise <HTML>, le début de l'en-tête <HEAD>, le titre de la page <TITLE>, les descriptions de l'auteur (ce sera soit vous soit "non enregistré") et enfin, les codes de fin de balises.
Vous allez maintenant sauvegardez votre document HTML, pour cela cliquez sur "fichier/sauvegarder sous" et remplacez "SansNom" par "index" : l'extension va se mettre automatiquement.
index.html est le nom qui est souvent considéré par les serveurs comme le fichier qui est appelé par défaut dans le dossier de votre site. Si vous devez donner un autre nom (defaut.htm etc.), encodez-le ici.
L'onglet a changé et n'est plus "SansNom" mais "index" :
Pour télécharger "Entreprise21", si vous n'avez pas encore en votre possession les modèles proposés, connectez-vous au site de Visicom Media (http://www.visic.com) et suivez les différentes étapes décrites ci-dessous :
1. Choisissez "Téléchargez le partagiciel dès maintenant"
2. Le produit qui nousd intéresse ici, c'est WebExpert et plus précisément, les interfaces et thèmes graphiques
3. Vous arrivez ainsi dans une nouvelle fenêtre : cliquez sur "Site Web"
4. Vous voilà dans la section qui nous intéresse plus particulièrement : cliquez sur le thême "Entreprise"
5. Celui comprend divers choix : choisissez "Entreprise21"
6. À ce stade, une nouvelle fenêtre vous est proposée, dans laquelle vous pouvez visualiser l'aspect du thème et évebtuellement, le télécharger : cliquez sur "Téléchargez ZIP". Pour que le téléchargement ne soit pas trop "lourd", Visicom Media a compressé tous les fichiers correspondant à "Entreprise21" : attention, si vous n'êtes pas licencié, vous ne pourrez pas décompresser le fichier ZIP ! Une fenêtre vous le signale...
Le fichier obtenu est "entreprise21.zip".
Après décompression, vous pouvez effectuer un "Survol des images" en cliquant sur le bouton ou par la combinaison de touches "Ctrl+F2" :
En voici le résultat :
Un fichier HTML vous est fourni d'ailleurs également qui comprend les différents graphiques du thème...
Choisissons le fond d'écran ainsi que la couleur par défaut du texte, liens etc. pour notre première page
Nous allons créer de toute pièce notre première page, et donc, nous ne nous occupons pas des fichiers HTML fournis avec le thème...
Cliquez sur l'onglet "Spécialisés".
Choisissez l'onglet représenté par un buste d'homme, sous-titré "Corps du document (BODY)",
Dans la fenêtre qui apparaît, choisissez un papier peint (fond d'écran), un arrière plan, la couleur de votre texte, lien, lien actif et lien visité :
Pour chaque thème, vous est proposé un choix de paramètres :
le fond d'écran (arrière-plan)
la couleur du texte
la couleur des liens
Le fichier HTML proposé comprend ce tableau et a déjà comme arrière-plan la couleur choisie d'une part, et d'autre part le fichier graphique, ici le fichier "bg.jpg", situé dans le dossier "image" du thème.
Comme vous le constatez, vous avez la possibilité de connaître les couleurs soit par leur valeur Hexadécimales, soit par leur valeur RGB (red-green-blue). Ainsi, il vous est très facile de créer vos documents.
Choisissez l'image d'arrière plan (en parcourant le dossier où vous avez décompressé les fichiers d'Enteprise21, et choisissez "bg.jpg".
Il est toujours préférable de choisir une couleur de fond d'écran qui soit en rapport avec l'image d'arrière-plan. En effet, pendant le téléchargement de l'image, c'est cette couleur qui est affichée pour votre document, et pour éviter un effet visuel désastreux, le fait d'avoir choisi une couleur appropriée fera que la transition vers l'aspect définitif de la page sera correct. Il est très peu professionnel de visionner, pendant quelques secondes, une page dans des couleurs très peu perceptibles, simplement parce qu'on a "oublié" que sur le Web, il faut du temps, y compris pour le téléchargement de l'image d'arrière-plan du document que l'on visionne pourtant déjà... Ne parlons pas de ceux qui emploient un fond d'écran très lourd... Les visiteurs prennent de moins en moins de temps pour visionner un site (il y en a tellement) : autrement dit, leur décision est très rapide, et ils peuvent quitter votre site, bien avant que celui-ci soit chargé complètement...
Pour le choix des couleurs, cliquez sur le choix proposé (par exemple, "arrière-plan") et une fenêtre vous est proposée :
Si la couleur que vous désirez ne se trouve pas dans le choix de la palette proposée, cliquez alors sur le bouton "Autres" et une autre fenêtre apparaît :
Dans celle-ci, vous pouvez encore cliquez sur une couleur existante ou encoder les valeurs RGB de la couleur désirée (bouton plus)
Encodez les valeurs que vous trouvez dans le tableau du thème : 224 - 211 - 194 (arrière-plan).
La valeur hexadécimale est indiquée (#E0D3C2) et c'est d'ailleurs celle-ci qui sera placée dans le code de la balise <body> :
<body background="images/bg.jpg" text="#701612" link="#866714" bgcolor="#E0D3C2">
Procédez de la même manière pour les autres couleurs (texte-liens-liens actif-liens visités).
Cet assistant est
lancé aussi directement après un double-clic sur la valeur hexadécimale d'une
couleur, inséré dans un document.
Quand le choix est complet, cliquez sur "OK" pour appliquer vos paramètres (Si vous avez omis de donner un nom à votre page, vous ne pourrez pas enregistrer vos choix : quittez la fenêtre et recommencer la procédure en nommant votre fichier "index").
Le code HTML de la page a changé, puisque la balise <body> comprend maintenant des attributs supplémentaires...
<body background="images/bg.jpg" text="#701612" link="#866714" bgcolor="#E0D3C2">
Personnalisation de notre page
Ces balises sont très importantes pour les moteurs de recherche..
Encodez "Accueil" entre les balises <title> et </title> : quand un visiteur visionnera votre page, il verra apparaître ce titre en haut, dans la barre d'état du navigateur.
Ces différentes balises renseignent les moteurs de recherche sur la description du document, les mots clés s'y rapportant, l'auteur du document, l'éditeur HTML employé...
A titre d'exemple, encodez :
Description : Bienvenue sur notre site...
Keywords (mots clés) : Internet, WebExpert5, Web, Chronique
Les autres balises sont automatiquement remplies par le logiciel : si vous n'êtes pas enregistré, votre nom n'apparaîtra pas comme auteur bien sûr.
Le code de la page devient :
<HTML>
<!-- DATE DE CREATION: 8/05/00
-->
<HEAD>
<TITLE>Accueil</TITLE>
<META NAME="Description" CONTENT="Bienvenue
sur notre site...">
<META NAME="Keywords" CONTENT="Internet,
WebExpert5, Web, Chronique">
<META NAME="Author" CONTENT="André Rouyer">
<META NAME="Generator" CONTENT="WebExpert 5">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1">
</HEAD>
<BODY BACKGROUND="images/bg.jpg" BGCOLOR="#E0D3C2"
TEXT="#7C1612" LINK="#866714" VLINK="#800080"
ALINK="#FF0000">
</BODY>
</HTML>
Nous allons maintenant placer du texte dans le corps de la page. Pour ce faire, vous allez en dessous de la ligne du "BODY" que nous venons de créer et insérer une ligne vierge (Retour ou Entrée) pour vous retrouver au début de la page. Retenez que les lignes vierges (Retour ou Entrée) que vous insérez n'ont aucune incidence sur la page car pour obtenir une ligne vierge réelle, il faut insérer un code spécial <BR> ou <P>.
Tapez le texte suivant : "Bienvenue", ensuite sélectionnez-le avec la souris : nous allons lui appliquer successivement plusieurs attributs.
Nous allons d'abord donner un attribut spécial à ce texte (titre), celui d'un en-tête de valeur 1. Cliquez sur l'onglet "Communs" et choisissez le deuxième bouton, sous-titré "Style de titre", ensuite prenez la première valeur proposée "Style de titre 1" vous remarquez que les raccourcis correspondant vous sont proposés aussi.
Ensuite, cliquez sur le 6ème bouton sous-titré "Centré" de l'onglet "Communs" : les codes HTML sont changés :
<H1><DIV ALIGN="center">Bienvenue</DIV></H1>
Insérez quelques lignes vierges avec quelques frappes sur la touche "Retour ou Entrée" et insérez le texte qui vous plaît, comme dans un traitement de texte normal : le retour à la ligne se faisant automatiquement.
Une
nouveauté de WebExpert 5 est que le texte encodé dans la fenêtre
d'édition est automatiquement traduit en caractères spéciaux : de cette
manière, les caractères accentués seront visionnés de manière correcte,
quelque soit la version du navigateur. Vous pouvez désactiver cette option
et traduire ensuite tous les caractères spéciaux par "Éditer/convertir
les caractères spéciaux" du menu "Édition". L'inverse est
possible aussi facilement...
Encodez le texte exemple suivant :
Ce site est créé avecWebExpert 5, la dernière version en date de l'éditeur HTML créé par Visicom Media. Le site est encore en construction et nous vous demandons un peu de patience pour le contenu définitif de nos documents. Le thème employé pour nos pages est "Entreprise21", qui est fourni gratuitement par Visicom Media pour les licenciés de WebExpert 5.
Si vous avez choisi la conversion des caractères spéciaux, voici le résultat :
Ce site est créé avecWebExpert 5, la dernière version en date de l'éditeur HTML créé par Visicom Media. Le site est encore en construction et nous vous demandons un peu de patience pour le contenu définitif de nos documents. Le thème employé pour nos pages est "Entreprise21", qui est fourni gratuitement par Visicom Media pour les licenciés de WebExpert 5.
Si vous voulez insérer un retour à la ligne, faites-le avec "Retour ou Entrée" mais ajoutez soit à la fin de la ligne précédente ou au-dessus de la nouvelle ligne un code <BR> ou <P> suivant que vous désirez un retour simple ou un retour de paragraphe : la différence étant un espacement plus important pour le paragraphe que pour le retour à la ligne simple.
Je vous recommande cependant de ne pas employer la balise <P> seule, mais bien comme délimitant un paragraphe: pour ce faire, tout le contenu du paragraphe doit être inséré entre les balises <P> et </P>.
WebExpert vous permet facilement d'insérer cette balise, avec des attributs particuliers, comme la justification par exemple. Sélectionnez tout le paragraphe et ensuite, cliquez sur le bouton "Paragraphe", en choisissant l'option "justifié" (petit curseur à droite), le code devient :
<P
STYLE="text-align:justify;">Ce
site est créé avecWebExpert 5, la dernière
version en date de l'éditeur HTML créé
par Visicom Media. Le site est encore en construction et nous vous demandons un
peu de patience pour le contenu définitif de nos documents. Le
thème employé pour nos pages est
"Entreprise21", qui est fourni gratuitement par Visicom Media pour les
licenciés de WebExpert 5.
</P>
Préférences générales
Pour visualiser le résultat actuel dans un navigateur, vous pouvez le faire directement à partir de WebExpert 5.
Si vous n'avez pas encore configuré le logiciel, allez dans "Outils/Préférences générales" et indiquez les emplacements des navigateurs que vous employez. Je vous recommande le choix suivant : Internet Explorer 5 - Netscape 4.x - Netscape 3. De cette manière, vous pourrez facilement vérifier la compatibilité de vos documents avec la majeure partie des navigateurs existants.
De plus, vous pouvez choisir un navigateur interne, directement intégré dans WebExpert 5. Si vous ne possédez pas Internet Explorer, choisissez le "Visionneur interne", sinon, le "Visionneur Internet Explorer". Normalement, WebExpert 5 a décelé sir IE est installé sur votre système et une fenêtre d'avertissement vous a été présentée pour choisir le visionneur inter IE. Dans le cas inverse, faites-le maintenant.
Vous pouvez dès à présent visualiser votre document dans un navigateur, ou employer le visionneur interne de WebExpert. Les deux boutons qui lancent respectivement le navigateur interne ou un navigateur externe sont :
Ici, une option me semble très intéressante : en fait, WebExpert vous propose de copier automatiquement les fichiers référés (par exemple les images) dans votre dossier de travail : l'avantage est grand ! En effet, il n'est plus question alors d'avoir dans le code de la page la réelle provenance du fichier, puisque celui-ci va se trouver dans le dossier courant et lorsque vous allez télécharger vos fichiers sur le serveur, les codes HTML seront corrects !
Dans le cas où vous ne cochez pas cette option, le fichier sera inséré dans le code avec son adresse réelle (ex. C:\ Images\image.gif) et dans ce cas, le code HTML est valable pour tester votre page sur votre PC mais lorsque vous placerez l'image sur le serveur, dans le dossier courant, le navigateur ne trouvera pas l'image car il ne trouvera pas le dossier C:\ Images\image.gif ?.
L'option "Forcer les noms de fichiers en minuscules" vous évitera aussi les problèmes de fichiers "introuvables" sur le serveur.
D'autres options existent aussi, à choisir selon vos désirs...
Quand
vous visionnez votre document, vous constatez d'emblée qu'un problème se pose
: en effet, le fond d'écran choisi comporte une bande latérale de couleur
différente et votre texte actuel n'en tient pas compte ?
Diverses solutions pour ce type d'arrière-plan peuvent être employées :
intégrer votre texte dans un tableau;
déterminer la marge de gauche en conséquence;
employer la balise <BLOCKQUOTE></BLOCKQUOTE>
Choisissons ici d'élargir la marge de gauche (150 pixels). Pour ne pas compliquer ici la chronique, employez le bouton "Body" de l'onglet "Spécialisés" (comme vu plus haut) et encodez la valeur "150" pour la marge de gauche. Attention, WebExpert attribue automatiquement la même valeur à la marge du haut : vous devrez la changer après transformation du code de la balise <body> :
<BODY BACKGROUND="images/bg.jpg" BGCOLOR="#E0D3C2" TEXT="#7C1612" LINK="#866714" VLINK="#800080" ALINK="#FF0000" LEFTMARGIN=150 MARGINWIDTH=20>
Si vous visionnez votre page, l'alignement est correct maintenant...
Si vous désirez téléchargez la page réalisée : ch1.zip. Pour votre facilité, le fichier d'arrière-plan n'est pas placé dans un dossier "images".