Un site web élémentaire avec NVU

Ta page d'accueil inclut ta présentation personnelle (sur fond bleu, dans l'exemple).

Nous allons commencer par cet élément fondamental de ton site web.

L'en-tête

L'entête de la page d'accueil sera formée de ton nom. Dans l'exemple, l'élève s'appelle " Dominique Dupont ". Ecris ton nom complet sur la première ligne dans la zone d'édition. Différents niveaux de titres et sous-titres peuvent être définis dans un site web. Dans le cas présent, ton nom est le titre principal. Nous allons donc lui attribuer le niveau Titre1. S'il n'y est plus, amène le curseur de texte dans la ligne où figure ton nom. Il n'est même pas nécessaire de sélectionner ce texte. Déroule la liste des styles (où est actuellement indiqué Corps de texte) et sélectionne le niveau Titre 1. Curieux autant que bizarre ! Je n'ai sélectionné aucun texte et voilà que l'ensemble des caractères prend un nouvel aspect... Cela n'a vraiment rien de curieux, à vrai dire. C'est normal, même. Le style Titre 1 est bien un style de paragraphe. Il serait même impossible d'appliquer le style à quelques caractères sélectionnés du paragraphe. mon nom est : ŋƳŋɓŊNJ  comment dois je faire ? La réponse est compliquée et pas complète, pour utiliser ces caractères là, tu dois utiliser des polices spéciales, et pour utiliser ces tu dois paramétrer Nvu  (menu Outils-> Préférences...) comme ceci :   L'encodage doit être UTF-8 ! Pour la langue, un meilleur choix que français doit être possible ! Si on n'écrit qu'une seule page choisi l'Encodage pour cette page dans Format->Titre et propriété de la page. Après tu pourras ajouter tes caractères en faisant des copier/coller ou avec Insertion caractère et symboles Enregistre ton travail.

Ta photo

• Enregistre une photo numérique de ton visage dans le sous-répertoire images du répertoire Mon site web. Cette image ne devrait pas être plus grande que 200  pixels de large et 250 pixels de haut.

Vous êtes comique, vous ! Comment pourrais-je savoir les dimensions de la supeeeeerbe photo dont je dispose ?

Pas très compliqué : NVU va tout nous dire.

Nous allons réaliser la manoeuvre d'insertion d'image.

• Place le curseur de texte derrière ton nom et insère un nouveau paragraphe en frappant la touche Enter.
• Dans le menu Insertion, sélectionne la commande Image...

• Pour convenir à la publication sur le web, ta photo doit obligatoirement être enregistrée dans un format compatible.
  Les trois principaux formats d'images qui conviennent pour le web sont :

  • JPG
  • GIF
  • PNG

  Les autres formats ne peuvent être utilisés.

  Dans la boîte de dialogue qui apparaît, clique sur le bouton Parcourir, afin de rechercher ta photo enregistrée dans le répertoire de ton site web.
  Vérifie avec le professeur que cette image est bien au format JPG, GIF ou PNG.

Hou la la, je me demande si je ne suis pas à un cours réservé à quelques agents secrets. C'est en rapport avec le FBI ou avec la CIA ? En tous cas, ça y ressemble.

Pas d'inquiétude, même si tout cela paraît un peu mystérieux au départ. Je propose une petite mise au point dans quelques instants. Terminons d'abord la page d'accueil.

Le fichier qui contient ta photo doit obligatoirement posséder l'extension .jpg, .gif ou .png.
Si tu travailles sur un système Windows 2000/XP et que les extensions n'apparaissent pas, tu peux consulter la page http://info.sio2.be/infobase/18/17.php pour savoir comment les faire apparaître.

Lorsque l'image est sélectionnée, la boîte de dialogue NVU revient au premier plan.

Dans le bas de la boîte de dialogue, les dimensions de l'image sont indiquées en pixels.

Dans le cas présenté en exemple, l'image mesure 200 pixels de large et 228 pixels de haut.

Ce qui est bien dans les normes demandées.

• Dans la zone Texte alternatif, indique ton nom. Ce texte apparaîtra dans le navigateur si l'image ne peut être reçue (serveur surchargé, connexion de mauvaise qualité,...)
• Si ta photo présente les dimensions qui conviennent, clique sur le bouton OK.

Voilà qui est bien ennuyeux ! Je dispose d'une supeeeeerbe photo de moi, en pieds, mais elle dépasse aussi largement les dimensions que vous dites.
Il n'y aurait vraiment pas un moyen ?

Bien sûr, qu'il y a un moyen. Il suffit de disposer d'un petit logiciel de retouche photo, du type Irfanview ou XnView. Tous deux sont gratuits et très efficaces.

Il est aussi possible de redimentionner la vue de l'image avec le logiciel, en utilisant les poignées de redimensionnement ou en utilisant l'onglet dimension de la fenêtre Image. C'est déconseillé car le visiteur devra charger l'image globale pour la réduire ensuite. Lourd pour ceux qui n'ont pas l'ADSL !!!

• Si nécessaire, redimensionne l'image afin qu'elle soit dans les dimensions demandées (200x250 au maximum). Demande alors conseil au professeur sur la façon d'utiliser l'un des logiciels cités, par exemple.
• Enregistre ton travail.

Le sous-titre

• Sous la photo, insère la mention de ta classe.
• Impose le style Titre 2 à ce sous-titre, en utilisant la même méthode que pour le titre de niveau 1, ci-dessus.
• En utilisant les outils de mise en forme adéquats, modifie ta page pour qu'elle se présente comme l'exemple.

Les outils adéquats ? C'est vague, ça.

C'est vague, en effet. Cherche donc un peu.

• Enregistre ton travail.