PageMill
Exercice de création d'un petit site Web

Objectif de l'exercice

Ce travail doit permettre une initiation à la création d'un petit site Web avec des cadres (au sens Frame).
Il doit se terminer sur un travail finalisé.

Remarques pratiques

Les couleurs dans le corps du texte correspondent, sauf erreur, à ceci :

  • en Noir aux noms de fichiers (sur le disque dur),
  • En Pourpre, aux textes à saisir,
  • En Marron, aux noms des menus et fenêtres des logiciels.

Proposition de travail à faire

Préparation du travail

  • Faire l'exercice précédent pour pouvoir utiliser les pages ainsi créées.
  • Ouvrir le dossier SiteAustralie. Créer un dossier nommé Ressources et glissez tous les fichiers du dossier SiteAustralie dans ce dossier Ressources.
  • Cliquer sur le lien suivant Ressources numériques Exercice 2 et enregistrer ces ressources dans le dossier Ressources du dossier SiteAustralie :
  • L'image Australie.jpg.

Création du jeu de cadres

  • Ouvrir un nouveau document.
  • Faire un cadre horizontal pour le titre (revoir éventuellement la leçon Créer des cadres).
  • Faire un cadre vertical à gauche.

Remarque : Vous vous trouvez donc face à quatre fichiers Html : un jeu de cadre et trois fichiers qui sont les contenus des trois cadres.
  • L'enregistrer le Jeu de cadre dans le dossier SiteAustralie sous le titre index.html. Ce sera le seul fichier de ce dossier.
  • Dans le dossier Ressources, enregistrer les trois cadres. Le plus haut sous le titre titre.html, celui de gauche sous le titre sommaire.html et le plus grand sous le titre accueil.html.

À tout moment, il sera possible de tout enregistrer en allant sur Fichier > Tout enregistrer.

  • Placer l'image titre.jpg dans le cadre du titre.
    Enregistrer le cadre du titre (fichier titre.html).
  • Réduire la taille du cadre en fonction de l'image. Le fait de réduire la taille du cadre modifie le Jeu de cadre.
    Enregistrer le jeu de cadre (fichier index.html).
  • Dans le cadre gauche, écrire Sommaire et aller à la ligne, écrire Les villes et aller à la ligne, écrire Les déserts et aller à la ligne enfin écrire (Retour à la page d'accueil).
    Définir la police la police de caractère en Arial.
    Enregistrer le cadre du sommaire (fichier sommaire.html).
  • Fixer la largeur du cadre du sommaire en pixels (et non en pourcentage) en fonction de la taille de la police et de la largeur des indications.
    Enregistrer le jeu de cadre (fichier index.html).
  • Dans le cadre principal, insérer une seule cellule d'un tableau. La dimensionner pour qu'elle arrive en dessous de l'image de titre.
  • Écrire un petit texte de présentation ou d'accueil. Il est possible de mettre en couleur soit cette cellule, soit le fond de page.
  • Enregistrer le cadre principal (fichier accueil.html).
  • Ouvrir le fichier villes.html. Lier Les villes du cadre Sommaire à la villes.html.
  • Définir immédiatement la fenêtre de destination (cible) du lien par Bouton droit (P.c.) ou Contrôle-Clic (Macintosh).
    Enregistrer le cadre du sommaire (fichier sommaire.html).
  • Faire de même pour lier le nom Les déserts à la page deserts.html.
  • Définir immédiatement la fenêtre de destination.
    Enregistrer le cadre du sommaire (fichier sommaire.html).
  • Ouvrir la page d'accueil accueil.html et la lier avec le texte Retour à la page d'accueil.
  • Définir immédiatement la fenêtre de destination.
    Enregistrer le cadre du sommaire (fichier sommaire.html).

Vérifier dans le fonctionnement des liens dans mode mode

Prévisualisation puis dans un navigateur en allant sur Affichage > Basculer vers > et en choisissant votre navigateur préféré mais il est bon de vérifier le résultat dans les deux navigateurs standard Netscape Navigator et Internet Explorer.

Pour voir le résultat de ce travail, cliquer ici.

Pour aller plus loin...

Ajouter d'autres pages...

  • S'inspirer de l'exemple du site ci-dessus pour enrichir les pages en insérant d'autres vignettes dans un nouveau tableau et en créant éventuellement une nouvelle page (ici appelée Les routes).

Sauvegarder

Pour sauvegarder le fichier :
Enregistrer le document (sur le disque dur) puis sauvegarder le fichier sur une « Clef USB ». Ceci évite les pertes de données importantes.
1. Insérer une « clef USB » dans une prise USB de l'ordinateur.
2. Glisser l'icône du fichier du mémoire sur l'icône de la « porte-clef USB » (sur PC, aller dans le Poste de travail).
3. Éjecter le périphérique USB :
• Sur Mac glisser-le vers la corbeille, elle se transforme en icône d'éjection .
• Sur P.C., cliquer sur la minuscule icône d'éjection située à droite dans la barre du bas : ou et attendre les instructions.

4. Mettre la « Clé Usb » en lieu sûr !

oOo

Document Bernard Dimet
© PorTices
mercredi 15 mars 2006