Mise en place de la structure du site
Avant même de commencer à écrire quoi que ce soit, tu vas mettre en place l'ossature du site dans ton répertoire personnel.
Etape 1
-
A l'aide des outils du système d'exploitation
(Windows, Linux, Mac OS,...) crée un répertoire nommé "Mon site web"
dans ton répertoire personnel.
Ton répertoire personnel se présentera donc probablement comme celui de " Dominique Dupont " qui est illustré ci-contre.
Etape 2
Tu vas maintenant créer les quatre pages de ton site.
- Démarre le logiciel KompoZer.
La fenêtre de KompoZer ressemble très fort à une fenêtre de logiciel de traitement de texte, mais avec quelques outils supplémentaires.
On y voit :
- La barre de titre
- La barre des menus
- La barre d'outils principale
- La barre d'outils de structures
- La barre d'outils de mise en forme
- Les onglets de pages
- La zone d'édition
- Les onglets de modes d'édition
- La barre d'état
- Le gestionnaire de sites (si le gestionnaire de sites n'était pas visible, frappe la touche F9)
Certains éléments sont déjà bien connus (barre de menu, barres d'outils,...). Nous apprendrons à utiliser les autres progressivement.
Etape 3: création du site web
- S'il n'est pas visible, active le gestionnaire de sites à l'aide de la touche F9.
- Clique sur le bouton .
Une nouvelle boîte de dialogue apparaît.
-
Dans
la zone , indique la mention "Mon
site web" - Clique sur le bouton afin de retrouver l'endroît où tu as créé ton répertoire "Mon site web"
- Clique sur le bouton .
Le gestionnaire de sites doit maintenant se présenter comme sur l'illustration ci-contre.
Etape 4
Dans le logiciel KompoZer, tu vas enregistrer la page vierge qui est présentée.Enregistrer une page vierge ? Grands dieux ! Mon maître est devenu ouf !
Pas du tout. Bien lucide, au contraire. Lors de la
construction d'un site web, un point essentiel est de penser à sa
structure. C'est ce que nous avons fait en présentant d'abord le plan
d'ensemble.
Les pages vierges sont, en quelque sorte, l'ossature du site web que
nous allons construire.
Lors du premier enregistrement d'une page avec KompoZer, il faut fournir deux informations :
1. Le titre de la page : c'est la mention qui apparaîtra dans la barre de titre de la fenêtre du navigateur. Le titre de la page que tu lis actuellement est présenté sur l'illustration ci-dessous.
2. Le nom du fichier dans lequel la page va être enregistrée.
- Dans le menu sélectionne la commande
- Indique le titre de la page " Mon premier site web ", dans la boîte de dialogue qui apparaît.
- Clique sur le bouton .
La boîte de dialogue d'enregistrement de fichier apparaît.
- Recherche ton répertoire " Mon site web ". Actuellement, ce répertoire est vide.
- Comme dans la copie d'écran ci-dessus, indique le nom index.html pour la page d'accueil à la place du nom par défaut " Mon premier site web ".
Dans le gestionnaire de
sites, la page index.html doit apparaître. Si elle n'était pas
visible, clique sur le bouton .
index.html ! Personnellement, je ne trouve pas cela très poétique. Pourquoi pas "ma jolie page web.html" ?
Parce que la page d'accueil d'un site web doit obligatoirement être nommée " index " ou " default ". C'est, en tous les cas, la page qui est envoyée lorsque l'on ne précise pas d'adresse dans le navigateur.
Etape 5: les autres pages du site web
Tu vas maintenant créer et enregistrer trois autres pages vides.
- Clique sur le bouton
de la
barre d'outils.
Une page vierge s'ouvre dans un nouvel onglet. Cette page est actuellement sans titre...
- Enregistre cette page près de la précédente.
- Son titre est: " Mon chanteur préféré ",
- le nom de fichier est " chanteur.html "
- Ensuite, et en utilisant la même méthode, enregistre au même
endroit deux autres pages vierges :
- loisirs.html (titre : " Mes loisirs préférés ") et
- chinois.html (titre: " Mon portrait chinois ").
La structure générale
de ton site web est maintenant créée. Elle contient les quatre
fichiers HTML vides.
Si la structure complète n'apparaît pas, clique sur le bouton .
Tu complèteras ces quatre pages dans la suite de la leçon.
Etape 6: créer un répertoire pour les images
Toutes les images qui apparaîtront dans ce site web simple seront enregistrées dans un répertoire particulier que nous allons créer maintenant.-
Dans le gestionnaire de sites, clique sur le
bouton . - Dans la boîte de dialogue, indique le nom du nouveau répertoire, comme sur l'illustration:
-
Si le répertoire images
n'apparaît pas dans le gestionnaire de sites, clique sur le bouton .
Quand tu as fini, montre ton travail au professeur.
Quand les quatre fichiers sont enregistrés et que le répertoire "images" est créé, passe à la page suivante
