L`exercice KompoZer Pour réussir cet exercice, vous devez

Document original :
Patrick Plante
Conversion de format : Arnaud Reungoat
Licence :
Copyleft
L'exercice KompoZer
Pour réussir cet exercice, vous devez reproduire une page Web en suivant les consignes.
Lien pour télécharger les images : http://claroline.patrickplante.org/kompozer/images.html
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
•
•
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
•
Cliquez sur Fichier
d'Histoire.
Enregistrer sous... Dans la fenêtre Titre de la page, inscrivez Site du cours
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
•
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
•
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
•
•
•
•
•
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
•
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
•
•
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
•
Cliquez sur Insertion
l'image 8a.
Tableau..., et dessinez un tableau d'une ligne et de trois colonnes comme à
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
•
•
•
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
•
•
•
•
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
•
•
•
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
•
•
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
•
•
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
•
•
•
•
•
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:[email protected]
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
•
•
•
•
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
•
•
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
•
•
•
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