1.

Ouverture et configuration de l'interface

Animation 1

Pour ouvrir KompoZer (généralement), cliquez sur démarrer Tous les programmes KompoZer
KompoZer .
Lors de la première ouverture, l'interface est comme à l'image 1a. À chaque démarrage, il y a une
fenêtre d'astuces qui vous donne des trucs (1b). Fermez cette fenêtre.

image 1a : l'interface
 image 1b : la fenêtre Astuces

2. Premier enregistrement dans un répertoire spécifique et titre de page

Animation 2

Cliquez sur Fichier Enregistrer sous... Dans la fenêtre Titre de la page , inscrivez Site du cours
d'Histoire.

image 2a : titre de la page

Ensuite, créez un dossier nommé page_web (si ce n'est pas déjà fait) sur le bureau, et nommez
votre page index.html

image 2b : enregistrer la page sous

3. Enregistrement des images

Animation 3

Sur la première page de ce tutoriel (ou ici), suivez la procédure pour enregistrer ces images dans
votre dossier page_web. Ensuite, revenez au point 4 de cet exercice.

4. Insertion d'une image d'arrière-plan

Animation 4

Cliquez sur Format Couleurs et fond de page... , et dans l'espace Image de fond: , cliquez sur l'icône
Parcourir... et choisissez le fichier ragged_edge_cobblestone_md_wht.gif toujours dans votre
dossier page_web sur le bureau. Cliquez sur Ok.

image 4a : insertion d'un arrière-plan

5. Insertion de texte

Animation 5

Centrez votre curseur : Format Aligner Centrer.

Changer votre police pour Arial Format Police Arial.
Ensuite, entrez le texte suivant : Site du cours d'Histoire
Changer la taille du texte : Format Taille Très grande
Changer la couleur du texte : Format Couleur du texte et prenez un gris foncé [#333333]
 image 5a: insertion de texte

6. Insertion d'une ligne horizontale

Animation 6

Placez-vous en dessous du titre, et cliquez sur Insertion Ligne horizontale. Double-cliquez la ligne,
et dans la fenêtre des propriétés, changez la largeur de la barre pour 75%.

image 6a: fenêtre des propriétés de la ligne horizontale

7. Insertion d'une image

Animation 7

Placez-vous en dessous de la ligne, et entrez le texte de l'image 7a ci-dessous.

Cliquez sur Insertion Image , et sélectionnez l'image atlas_decorative_lg_clr.gif.
 image 7a: texte et image

8. Insertion d'un tableau

Animation 8

Cliquez sur Insertion Tableau..., et dessinez un tableau d'une ligne et de trois colonnes comme à
l'image 8a.

image 8a: insertion d'un tableau

Ensuite, double-cliquez sur le tableau (sur une bordure).

Dans la fenêtre, cliquez sur l'onglet Tableau.
Inscrivez une largeur de 40% (et non 40 pixels), et une bordure de 0 pixel (donc invisible).
Choisissez Centre pour l'Alignement du tableau
 image 8b: propriétés du tableau

Ensuite, insérez les trois images suivantes de manière centrée dans chacune des cellules :
blkcrevel_mail_md_wht.gif, blkcrevel_home_md_wht.gif et blkcrevel_right_md_wht.gif.

image 8c: tableau

9. Création d'une deuxième page

Animation 9

Cliquez sur Fichier Nouveau (ou sur l'icône Nouveau) afin de créer une nouvelle page.
Enregistrez. Donnez le titre La découverte de l'Amérique à votre page,et amerique.html comme
nom de fichier.
Sélectionnez l'image ragged_edgefutura_panel_md_wht.gif comme arrière-plan.
 image 9a: propriétés de la deuxième page

10. Insertion de l'entête en copier-coller

Animation 10

Allez à la page index.html (onglet Site du cours d'Histoire).

Sélectionnez la barre horizontale et le titre. Cliquez sur Édition Copier.
Retournez à la page amerique.html (onglet La découverte de l'Amérique), et cliquez sur Édition
Coller.
Changer le titre pour : La découverte de l'Amérique

11. Insertion d'un deuxième tableau

Animation 11

Insérez un tableau avec les coordonnées suivantes: 2 lignes - 3 colonnes - 50% de largeur - 0
de bordure.
De manière centrée, insérez, dans chacune des cellules du haut, les images des bateaux Nina, Pinta
et Santa-Maria.
Inscrivez le nom en dessous de chacun des bateaux.
 image 11a: tableau

12. Configuration de cellules

Animation 12

Sélectionnez les 3 cellules de la 2e colonne.

Choisissez le noir comme couleur de fond, et le blanc comme couleur de texte. Cliquez sur B pour
rendre le texte gras.

image 12a: fenêtre principale

13. Redimensionnement d'une image

Animation 13

En dessous du tableau, écrivez Les bateaux de Christophe Colomb.

Insérez l'image colomb.jpg, et dans l'onglet Dimensions, placez les coordonnées suivantes: largeur
: 173, hauteur : 228.
 image 13a: fenêtre des propriétés de l'image, onglet dimensions

En dessous de l'image, écrivez Christophe Colomb.

Insérez l'image cartedec.gif, et placez les coordonnées suivantes via l'onglet Apparence : bordure :
2.

image 13b: fenêtre des propriétés de l'image, onglet apparence

En dessous de l'image, écrivez Carte des Grandes Découvertes.

14. Insertion de trois types de lien

Animation 14
 Allez à la page index.html.
Sélectionnez le bouton maison, en cliquez sur Insertion Lien..., dans l'espace lien, écrivez l'adresse
: http://www.fse.ulaval.ca Il s'agit d'un lien vers un autre site Web.
Sélectionnez le bouton courriel, en entrez, dans l'espace lien le texte :
mailto:monadresse@gmail.com Il s'agit d'un lien vers une adresse de courriel.
Sélectionnez la flèche, et à côté de l'espace de lien, cliquez sur le petit dossier jaune . Sélectionnez
le fichier amerique.html. Il s'agit d'un lien vers une autre page de votre site.

image 14a: fenêtre des propriétés de l'image, onglet lien

15. Configuration d'une barre de navigation

Animation 15

Copiez le tableau en entier.

Allez à la page amerique.html.
Collez le tableau dans le bas de la page.
Faites les changements en changeant la flèche et lui donnant un lien vers index.html

image 15a: tableau

16. Insertion d'un lien avec ancrage

Animation 16

Placez votre curseur dans le haut de la page.

Cliquez sur Insertion Ancre... et nommez l'ancre haut.
 image 16a: insertion d'ancrage

Dans le bas de la page, écrivez Haut de la page.

Sélectionnez votre texte, et dans l'espace lien de la fenêtre des propriétés, inscrivez #haut.
Ce type de lien vous permet d'aller directement à un autre emplacement à l'intérieur de la même
page.

17. Aperçu dans le navigateur

Animation 17

Enregistrez les deux pages (amerique.html et index.html).

Sur la page index.html, cliquez sur Fichier Aperçu dans le navigateur.
Une fois dans le navigateur, essayez vos différents liens.