Rédaction de la page d'accueil : ta présentation
Ta
page d'accueil inclut ta présentation personnelle (sur fond bleu, dans l'exemple).
Nous allons mettre en place 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 ".
- 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 ?
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. Tu peux également utiliser le logiciel Gimp, mais il est nettement 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 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 .
- 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,...
- Demande conseil au professeur sur la façon d'utiliser l'un des logiciels cités, ou vois la leçon consacrée à Irfanview.
- 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.
Dernière modification 21/09/2006
