Créer un 1er site Web
LARA CROFT

Pour apprendre, tu vas créer 2 pages pour raconter la vie de Lara Croft, l'héroïne de Tomb Raider.

-1- Créer les dossiers nécessaires et copier les images

Pour créer un site Internet, il faut avoir ranger correctement et méthodiquement tous les fichiers utilisés. En particulier, les images seront regroupé dans un dossier, et les pages dans un autre.

Pour ceux qui ne savent pas créer un dossier cliquez sur ce lien.

Créer les dossiers

Dans U:\Devoirs\gilletm , il faut créer un dossier appelé "tomb_raider"
Dans U:\Devoirs\gilletm\tomb_raider, il faut créer un dossier "images"

Copier les images

Copie les images contenues (de lara1.jpg à lara7.jpg) dans
Y:\gillet\4\lara dans le dossier
U:\Devoirs\gilletm\tomb_raider\images
Tu dois avoir cette "arborescence" de fichier

Si tu ne sait pas le faire, clique sur ce lien.

-2- Ouvrir le logiciel de création de page Web

Clique sur "démarrer --> Tous les Programmes --> KompoZer"

Une fenêtre principale s'ouvre :

Tu vas créer ta page dans l'espace vierge à droite, les fichiers utiles apparaitront à gauche.

Gérer le futur site

• Dans le gestionnaire de site clique sur "Editer la liste des site"
• Dans la fenètre "Rechercher un dossier" sélectionne le dossier suivant U:\devoirs\gilletm\tomb_raider
• Clique sur OK
• puis de nouveau sur OK

-3- Ecrire du texte

• Ecris : sur la première ligne
  Nom : "ton nom ton prénom"
• Dans la zone, "Format de paragraphe" choisit "Paragraphe" à la place de "Corps de texte",
• Passe à la ligne en appuyant sur la touche "Entrée " et écris :
  Classe : "ta classe"
• Passe à la ligne
• Pour séparer ce petit début du reste de la page tu vas mettre une ligne horizontal.
• Menu "Insertion --> Ligne Horizontale"
  

- 4 - Enregistrer la page

• Dans la fenêtre principale, vas dans le menu "Fichier --> Enregistrer sous "
• Dans la fenêtre "Titre de la page" indique
  Lara Croft : Bibliographie
• Clique sur OK
• Dans la fenêtre "Enregistrer sous"
  Vas en U:\Devoirs\gilletm\tomb_raider
  Efface le nom de fichier existant et écris : index.html
  Valide en cliquant sur "Enregistrer"

-6- Copier le texte de la biographie

• En utilisant le "Poste de travail" ouvre le fichier texte :
  Y:\gillet\4\lara\biographie lara.txt
• Sélectionne tout le texte (menu Edition --> Tout sélectionner)
• Copie le texte dans la mémoire de l'ordinateur (menu Edition --> Copier)
• Retourne dans KompoZer et colle le texte. Mais le menu Edition --> Coller ne fonctionne pas. Tu vas utiliser le raccourci clavier Ctrl + V
• Enregistre (Menu Fichier--> Enregistrer) ou utilise la combinaison de touche Ctrl + S

-7- Insérer un tableau

Pour mettre en page précisément une page web, il très pratique d'utiliser des tableaux. Ceux ci sont très utilisés avec des bordures invisibles.

Nous allons utiliser cette technique pour présenter une petite galerie de portraits de Lara Croft. Le tableau contiendra des images miniatures. Un clic sur l'une d'elles ouvrira une nouvelle page contenant la grande image.

• Place le curseur clignotant entre la ligne horizontale et le texte. Si tu n'as pas la place, appuie sur la touche "Entrée" pour ajouter une ligne.
• Clique sur l'icône "Tableau ou dans le menu "Insertion --> Tableau"
• Dans la fenêtre qui s'ouvre clique sur précisément, sélectionne 2 lignes et 4 colonnes et largeur 100 % de la fenêtre :
  Valide en cliquant sur OK
• Pour écrire le titre de la page tu vas réunir les 4 cellules de la 1ère ligne en une seule cellule
  • Sélectionne les 4 cellules de la première ligne
  • Menu Tableau --> Fusionner les cellules sélectionné " Tu dois avoir plus qu'une seule cellule dans la 1ère ligne
    
  • Ecrit le titre dans la cellule fusionnée : Lara Croft
  • Dans la zone, "Format de paragraphe" choisit "Titre 1 " à la place de "Corps de texte",
    et centre-le
• Passe le sous titre (Introduction) en "Titre 2" ainsi que les 2 autres sous titres (Description et Biographie)
• Insérer des images "miniatures" dans le tableau :
  • Positionne le curseur dans la 1ère cellule de la 2ème ligne.
  • Clique sur l'icône "Image"
  • Au bout de la zone "Adresse de l'image" clique sur le bouton "Parcourir et vas en U:\Devoirs\gilletm\tomb_raider\images et choisis lara1.jpg
  • Clique sur "Ne pas utiliser de texte alternatif"
  • Valide
  • Passe dans la 2ème cellule et choisis "lara2.htm"
  • Et ainsi de suite pour les 2 autres cellules.
  • Enregistre

-8- Créer des liens

Pour ouvrir une autre page à partir de la page d'un site, il faut insérer un lien (sur des mots, ou ume image).
Tu vas faire en sorte que le clic sur une des images miniatures ouvre l'image correspondante en plus grande taille.

• Sélectionne la première image du tableau en cliquant dessus (des poignées apparaissent autour de l'image)
• Clique sur l'icône "Lien " .
• Clique sur le bouton "Parcourir" (le dossier ouvert) une nouvelle fenêtre s'ouvre.
• Par défaut, le logiciel recherche les fichiers de page web (Fichiers HTML). Nous on recherche une image.
• Dans la zone "Fichier de type", sélectionne "Images"
• Vas dans le dossier "U:\Devoirs\gilletm\tomb_raider\images" et choisis "lara1g.jpg"
• Valide en cliquant sur OK
• Recommence ces oprérations pour les 3 autres images (n'oublie pas de sélectionner les images qui se termine par "g"

Enregistre ta page

-9- Voir la page dans un navigateur

Pour voir la page que tu es en train de créer et vérifier si les liens fonctionnent, clique sur l'icone "Navigateur" . Firefox ou Internet Explorer s'ouvre, et tu peux voir la page telle qu'elle sera vu par les lecteurs.

Clique sur les images, une nouvelle page doit s'ouvrir avec l'image en grand.

-10- Paramétrages divers

• Menu "Format -->Couleur et fond de page ... "
  
• Clique sur "Fond" et choisis une couleur. Valide avec OK
• Dans la fenêtre "Couleurs et fond de page" vérifie que les différents types de texte sont toujours visibles.
• Modifie les couleurs du texte si celui-ci ne se voit plus.
• Change la couleur d'arrière plan et choisit une couleur (plutôt clair par exemple #FFCCOO)

Enregistre

-11- Créer une nouvelle page

• Clique sur l'icône "Nouveau"
• Tape sur la première ligne le titre :
  Galerie de photos de Lara Croft
• Passe le titre en "Titre 1" centré (si tu ne te rappelle plus comment faire regarde ce paragraphe)

Enregistrer sous

• Dans "Titre de la page" tape "Lara Croft : Galerie"
• Dossier : U:\Devoirs\gilletm\tomb_raider
• Pour être en accord avec la règle de nommage des fichiers des sites internet, il faut effacer le nom existant et le remplacer par : "lara_galerie"

Paramétrages divers

Reprends les paramètrages de cette page comme pour la précédente :

• Couleurs identiques (fond et textes)

Créer les liens pour naviguer entre les pages

• Retourne dans la première page
  • Insère une ligne horizontale en bas du texte
  • Ecris "Galerie de photo de Lara Croft"
  • Sélectionne la ligne que tu viens d'écrire
  • Clique sur l'icône "Lien"
  • Clique sur le bouton "Parcourir" et vas en : U:\Devoirs\gilletm\tomb_raider et sélectionne : "lara_galerie.html"
  • Valide.
• Reviens sur la page de la galerie et
  • Au-dessus du titre, ecris "Retour à la biographie de Lara Croft "
  • Crée un lien vers la page "index.html".
  • Insère une ligne horizontale entre ce lien et le titre.

Créer un tableau

Dans lara_galerie.html :
Crée un tableau de 4 lignes et 4 colonnes (comme précédemment).

Enregistre ta page et passe au travail sur les images. Tu passeras à la suite quand tu sauras redimensionner les images.

Rechercher et Enregistrer des images

Avec un navigateur internet (Mozilla Firefox) et un moteur de recherche, trouve des images se rapportant à Lara Croft. Ces images devront être plus grande que 800 x 600 pixels.

Enregistre ses images dans le dossier
U:\Devoirs\gilletm\tomb_raider\images

Redimmensionne les images pour les réduire à 800x600

Créer une vignette de 120 pixels

Insérer les images

Insère les vignettes des images dans les cellules du tableau et crée un lien pour les ouvrir en grand.

Enregistre tes pages

Page sous contrat Creative Commons. Marc Gillet