Un site web élémentaire avec KompoZer

Rédaction de la page d'accueil : ta présentation

page d'accueil Ta page d'accueil inclut ta présentation personnelle: ton nom, ta photo, ta classe.

Nous allons mettre en place ces éléments fondamentaux 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 ".

  • Ouvre, si nécessaire, la page d'accueil nommée index.html.
  • Ecris ton nom complet sur la ligne qui suit la barre de menus.

Nom de l'auteur

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.

  • Titre de niveau 1Clique 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.

  • Choix de la couleur de fondChoisis une couleur de fond pour cette zone de titre à l'aide de l'outil de sélection de couleurs, dans la barre d'outils.
  • Centre ce titre en utilisant le bouton Centrer de la barre d'outils de mises en forme.
  • Enregistre ton travail.

Ta photo

Sur ta page d'accueil figurera ta photo. Vérifie que tu disposes d'une photo numérique de ton visage au format JPG et d'une taille qui ne devrait pas exécéder 200  pixels de large et 250 pixels de haut.

Oh là ! Je vois que vous parlez martien très couramment... Ca veut dire quoi, tout ça ?

Juste en quelques mots, alors. Pour une information plus complète, il faudra voir une autre leçon.

Images avec pixelsChaque image numérisée est formée, comme une photo dans un journal, d'un certain nombre de points appelés "pixels" (abréviation de "picture element", en anglais). On peut parfaitement les voir sur l'image très agrandie ci-contre.

Le format JPG désigne un type d'images très courant sur le web. Les logiciels de traitement d'images permettent le plus souvent d'enregistrer les images au format JPG.

Si la photo est trop grande, il faut la redimensionner.
Si elle est vraiment trop petite, il vaut mieux en choisir une autre.

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 ?

.
Plus d'informations sur le logiciel Gimp ICI.

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 sous Windows. Tous deux sont gratuits et très efficaces. Tu peux également utiliser le logiciel Gimp qui est disponible sous Windows et sous Linux, mais il est un peu plus complexe d'emploi.

  • Insérer une imageEnregistre ta photo dans le sous-répertoire images du répertoire www.
  • 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...
  • 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 images de ton site web.

Insertion d'image Lorsque l'image est sélectionnée, la boîte de dialogue de KompoZer revient au premier plan. 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.
  • Si nécessaire, redimensionne l'image afin qu'elle soit dans les dimensions demandées (200x250 au maximum).

Fastouche! Tout est prévu dans l'onglet "Dimensions" de la boîte de dialogue "Propriétés de l'image".

N'y pensez-pas, malheureux! Ce serait une *très* mauvaise idée!!

Pour modifier les dimensions d'une image, il faut obligatoirement utiliser un logiciel de traitement d'images. Si l'on modifie les dimensions d'une image telle qu'on la voit dans KompoZer, cela ne change absolument rien au poids du fichier sur le site.

Ainsi, on trouve sur certains sites des images toutes petites qui mettent énormément de temps à apparaître car la taille réelle de ces images n'a, en réalité, pas été modifiée.

Il faut obligatoirement utiliser un logiciel de traitement d'images comme Irfanview, XnView, The Gimp, gThumb, ...

Le sous-titre

  • ClasseSous 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 dans la barre d'outils.

  • Enregistre ton travail.

Hâââ!! L'horreur. Un cadre rouge est venu entourer ma photo quand je l'ai centrée. Je n'ai pas demandé ça, moi!!

Effectivement, pour le confort de l'utilisateur, certaines zones se trouvent encadrées d'un cadre rouge par KompoZer. Nous en reparlerons dans une autre leçon. Mais ces cadres n'apparaissent pas dans le navigateur lors de la visite du site web.

Quand ta page d'accueil se présente comme l'exemple, passe à la page suivante. Vers la page suivante Page suivante


Dernière modification 31/08/2016 Test dans /info ...