Tuto Kompozer

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 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 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 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 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:[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 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.