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.

 Fin de l'exercice

• Montrez votre travail à votre professeur ou à un assistant.