L'exercice KompoZer
Pour réussir cet exercice, vous devez reproduire une page Web en suivant les consignes. Chaque consigne est expliquée textuellement et avec une animation Flash.

1. Ouverture et configuration de l'interface
2. Premier enregistrement dans un répertoire spécifique et titre de page
3. Enregistrement des images
4. Insertion d'une image d'arrière-plan
5. Insertion de texte
6. Insertion d'une ligne horizontale
7. Insertion d'une image
8. Insertion d'un tableau
9. Création d'une deuxième page
10. Insertion de l'entête en copier-coller
11. Insertion d'un deuxième tableau
12. Configuration de cellules
13. Redimensionnement d'une image
14. Insertion de trois types de lien
15. Configuration d'une barre de navigation
16. Insertion d'un lien avec ancrage
17. Aperçu dans le navigateur

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.



< Retour à l'accueil