Tutoriel Kompozer

Tutoriel Kompozer

1. Ouverture et configuration de l'interface
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.
2. Premier enregistrement dans un répertoire spécifique et titre de page
Cliquez sur Fichier Enregistrer sous...(File save as) Dans la fenêtre Titre de la page,
inscrivez Site du cours d'Histoire (exemple).
Ensuite, créez un dossier nommé page_web_votrenom (si ce n'est pas déjà fait) dans votre
dossier personnel (Hortense) et nommez votre page index.html

3. Enregistrement des images
Enregistrez toute image dans votre dossier page_web.
4. Insertion d'une image d'arrière-plan
Cliquez sur Format Couleurs et fond de page... (Format Page Colors and
Background), et dans l'espace Image de fond: (background image), cliquez sur l'icône
Parcourir... et choisissez le fichier toujours dans votre dossier page_web dans votre
dossier. Cliquez sur Ok.

image 4a : insertion d'un arrière-plan
5. Insertion de texte
Centrez votre curseur : Format Aligner Centrer. (Format align center)
Changer votre police pour Arial Format Police Arial.
Ensuite, entrez le texte suivant : Ma Page Web
Changer la taille du texte : Format Taille Très grande (Format size x-large)

Changer la couleur du texte : Format Couleur du texte (text color)
6. Insertion d'une ligne horizontale
Placez-vous en dessous du titre, et cliquez sur Insertion Ligne horizontale (insert
horizontal line). Double-cliquez la ligne, et dans la fenêtre des propriétés, changez la largeur
de la barre pour 75%.

7. Insertion d'une image
Placez-vous en dessous de la ligne.
Cliquez sur Insertion Image, et sélectionnez une image de votre dossier.
8. Insertion d'un tableau
Cliquez sur Insertion Tableau..., et dessinez un tableau d'une ligne et de trois colonnes
comme à l'image 8a.

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.g
if.
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. Redimensionnement d'une image
Insérez une image 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 un nom que vous donnerez à l'image.
Insérez l'image cartedec.gif, et placez les coordonnées suivantes via l'onglet Apparence :
bordure : 2.

12. 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: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 fichieramerique.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