Un site web élémentaire avec KompoZer
Rédaction de la page d'accueil : ta présentation
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.
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.
-
Choisis
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
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.
Chaque
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.
-
- Enregistre ta photo dans le sous-répertoire images du répertoire Mon site web.
- Place le curseur de texte derrière ton nom et insère un nouveau paragraphe en frappant la touche Enter.
- Dans le menu , sélectionne la commande
- Dans la boîte de dialogue qui apparaît, clique sur le bouton
, afin de rechercher ta photo
enregistrée dans le répertoire de ton site web.
Lorsque
l'image est sélectionnée, la boîte de dialogue KompoZer 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 .
- 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 à la dimension du fichier sur le disque.
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, ...
- Demande conseil au professeur sur la façon d'utiliser l'un des logiciels cités, ou vois la leçon consacrée à Irfanview ou la leçon consacrée à Gimp.
- 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 dans la barre d'outils.
- Enregistre ton travail.
Quand ta page d'accueil se présente comme l'exemple, passe à la page
suivante.
Dernière modification 12/03/2008
