Découverte de WebExpert 5

Pour ne pas rendre cette initiation trop pesante au téléchargement, très souvent ce sont des miniatures qui vous seront présentées : pour visionner la copie écran, cliquez sur celle-ci...

Suivant la version que vous avez achetée (électronique ou CDROM), l'installation diffère quelque peu. En effet, pour les versions électroniques, il suffit de télécharger sur Page-Web (section téléchargement) ou le site de Visicom Media, le fichier de la dernière version en date et de l'enregistrer sur votre disque local. Ensuite, un simple double-clic suffit pour lancer l'installation de WebExpert 5. Pour la version CDROM, l'installation est très facile également...

Remarquez qu'il n'y a aucun problème de cohabitation entre une version antérieure et la version 5, car le dossier de l'application est différent (par défaut, "lecteur:\Program Files\Visicom Media\WebExpert5"). Donc, si vous êtes licencié pour une version 4 par exemple, vous pouvez sans crainte installer la version 5 pour évaluation...

Avant de commencer, il est utile d'enregistrer WebExpert 5. Pour cela, allez dans le menu "Aide" et choisissez "Comment enregistrer WebExpert 5" et vous obtenez l'écran suivant :

Vous remplissez correctement les champs nécessaires, à savoir, le nom d'enregistrement (numéro d'identification pour les boîtes CDROM uniquement et version ancienne) et le code d'enregistrement qui vous a été attribué.

Vérifiez la syntaxe (majuscules/minuscules) et recommencez... Une fenêtre vous informera également lorsque la procédure a été correctement effectuée :

Pour commencer, après avoir téléchargé WebExpert sur le site et l'avoir installé sur votre disque dur, nous allons créer un nouveau document !

L'interface du logiciel a changé. Celui-ci comprend plusieurs fenêtres, séparées, ce qui permet un usage plus facile, surtout lorsqu'en travail de création, on emploie plusieurs programmes à la fois (graphique - texte - WebExpert5...). Vous pouvez décider du formatage du "bureau" de WebExpert5 qui vous convient et l'enregistrer pour vos sessions de travail futures. De même, le système de déroulement des menus, façon "Office XP" est présent et est bien pratique.

Si vous désirez créer un nouveau document, WebExpert 5 vous propose plusieurs choix de documents de base : HTML - Javascript - CSS - XML - Perl

ou par des onglets, des modèles personnalisés (Général / Entreprise - cadres / Entreprise / Personnalisé).

Dans cette initiation, nous allons créer un document HTML, suivant le modèle "General9a", de l'onglet "Général".

Pour ce faire, cliquez donc dans l'onglet "Général" et ensuite, sur le choix "General9a".

Après avoir sélectionné le modèle désiré (General9a), vous devez spécifier quel dossier doit être employé pour l'insertion des fichiers. Comme je vous le disais, vous pouvez encoder un nom de dossier inexistant, WebExpert5 vous proposera alors de le créer.

Analysons ce fichier en détail et encodons les différents paramètres qui nous sont particuliers :

Balises d'en-tête

Titre de la page

Encodez le titre (nom) de votre page, par exemple : "Page d'accueil" entre les balises <TITLE> et </TITLE>,
comme ceci : <TITLE>Page d'accueil</TITLE>.

Cette commande permet de visionner le titre (nom) de la page, en haut dans le navigateur du visiteur de votre site et est aussi très importante pour les moteurs de recherche.

Moteurs de recherche

Auteur et logiciel

Si vous êtes licencié, c'est votre nom qui apparaîtra lors de la création de vos documents. Mais comme cette page est créée par l'assistant, un nom différent est présent.

Tableau

Pour faciliter votre compréhension du code HTML de votre page, les concepteurs de WebExpert 5 ont inséré des commentaires, correspondant aux différents changements à effectuer pour personnaliser votre page. Dans le modèle de cette page, une photo est prévue, mais vous pouvez y placer un logo etc.

Vous remplacez le code "<IMG SRC="images/photo.jpg" BORDER=0 WIDTH=125 HEIGHT=150 ALT="Votre Nom">" par celui de votre fichier graphique.

Un assistant est lancé pour vous aider à incorporer le fichier dans votre document. Quand le fichier graphique que vous désirez est choisi, cliquez sur le bouton "OK".

Si vous avez omis d'indiquer un commentaire (alt=""), vous pouvez l'ajouter dans le code. Pour changer celui-ci, modifiez par exemple ALT="Votre Nom" dans le code.

Introduction de votre page

Encodez ici l'introduction que vous désirez proposer pour la lecture de cette page d'accueil de votre futur site. Remplacez "CETTE PAGE EST EN CONSTRUCTION." par le contenu désiré...

Pour des raisons de compatibilité avec les navigateurs de version inférieures à 4.x, les balises <center> sont encore proposées. Si vous désirez rendre vos pages totalement compatibles avec le CSS (voir la section "Feuilles de style" du Tutoriel DHTML), vous pouvez changez ces balises par un code plus conforme. Ceci dit, les navigateurs de versions antérieures ne visionneront pas correctement la page...


<center>CETTE PAGE EST EN CONSTRUCTION.</center>


Codes HTML

Sans trop entrer dans le détail ici, vous constatez d'emblée plusieurs parties de codes: l'identification du créateur et de l'éditeur, la spécification HTML, l'en-tête (HEAD) qui comprend le titre du document et la section (BODY) ou corps du document. Chaque section commence par un code spécifique et se termine également par un autre code spécifique !

Body

Un fond d'écran a été donné à ce document ! Si vous désirez le changer, vous avez deux solutions possibles, soit une couleur comme fond d'écran, soit une image (gif, jpg...) que vous possédez.

Cliquez sur l'onglet "Spécialisés", ensuite l'icône représentant le torse d'un homme (Body...).

A ce stade, une fenêtre de dialogue va vous proposer plusieurs choses, notamment celle de sélectionner votre image de fond d'écran, la couleur des différents sections de texte (texte, lien, lien actif...) et aussi l'arrière plan figé (permet de dérouler le texte sur le fond d'écran qui reste fixe). Dans l'exemple proposé, j'ai choisi l'image "fp-w.jpg" comme fond d'écran.

Si vous modifiez le "BODY" actuel, un message vous demande une confirmation et vous répondez "oui". N'oubliez pas que vous pouvez "annuler" toute modification par la commande de menu "Editer/Annuler" ou Ctrl-Z.

Italique, gras, souligné

Pour écrire du texte en gras, italique, souligné, ajouter un retour de chariot ( ) ou un nouveau paragraphe, () voici les codes (compatibles CSS):

gras
italique
souligné

WebExpert 5 vous permet d'employer un assistant très complet pour les feuilles de style : veuillez consulter TutorDHTML pour en découvrir les nouveautés.

Par cet assistant, vous pouvez créer, de manière excessivement complète, tous les styles que vous désirez (italique, gras, souligné, pas de police, feuilles de style externes,lien vers des feuilles de style ect.)

Si vous désirez employer l'ancienne méthode (non conforme à CSS), les boutons vous sont présentés dans la barre d'outils de l'onglet "Communs" :

Insertion d' images supplémentaires

Pour introduite des images supplémentaires, employez l'assistant comme décrit précédemment...

Liens (ancres)

Pour les liens, c'est aussi très facile ! Il existe deux sortes de liens, les internes (au sein d'une même page) et les externes (vers une autre page, sur le site ou ailleurs sur le Web).

Pour ce type de lien (interne), vous pouvez employer l'assistant, commandé par le bouton "Lien externe", qui se trouve situé dans l'onglet "Spécialisés" : vous sélectionnez l'image ou le texte qui va constituer le lien, ensuite lancez l'assistant par le bouton décrit précédemment, encodez le nom du lien (ici "retour") et choisissez enfin la ligne de la page où celui-ci doit se rendre.

Code inséré à l'endroit d'arrivée du lien

Code du lien proprement dit

Pour les liens externes, c'est très simple aussi, puisqu'un assistant peut être lancé avec le bouton de lien externe, dans le même onglet "Spécialisés" :

Pour ce faire, sélectionnez le texte qui renvoie au lien et cliquez sur le lien externe : la boîte de dialogue devra être remplie de manière appropriée...
Pour un cadre (ici ce n'est pas le cas), vous devrez aussi choisir l'option "cible pour cadre" qui est nécessaire pour que la page soit visualisée dans le cadre.

Pour incorporer un lien externe particulier, qui donnera la possibilité de vous envoyer directement un e-mail, c'est la même chose mais vous choisissez l'option "mailto:" et vous indiquez votre adresse e-mail, avec éventuellement un sujet pour le message et une "astuce" (TITLE).

<A HREF="mailto:arouyer@page-web.com?subject=Pour m'écrire..." TITLE="Si vous voulez m'écrire...">Adresse e-mail</A>

WebExpert 5 vous permet très facilement d'ajouter un "sujet" pour votre mail (qui est incorporé automatiquement dans l'objet du mail). La balise "title" que vous voyez en plus dans le code est celle qui propose une petite info-bulle pour le lien (IE seul actuellement).

Tableaux

Dans la fenêtre de dialogue qui survient, vous choisissez le nombre de colonnes et de rangées :

Vous indiquez ainsi les différents paramètres de votre tableau et des cellules qui le composent, et tout est introduit automatiquement par WebExpert. Si vous désirez créer un simple cadre, rapidement, employez alors le deuxième bouton pour les tableaux :

Cadres

Pour créer des cadres, je vous renvoie à une explication pratique et détaillée, qui sera bientôt adaptée totalement à WebExpert 5, mais qui peut déjà vous aider grandement à comprendre leur création.

Par votre parcours de WebExpert 5, vous découvrirez les multiples options que donnent les autres onglets et la procédure est toujours la même : WebExpert 5 insère les codes nécessaires après que vous ayez rempli les boîtes de dialogue appropriées.

INITIATION RAPIDE À WEBEXPERT 5