Un site web élémentaire avec KompoZer

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

  • Répertoire "Mon site web" sous LinuxA l'aide des outils du système d'exploitation (Windows, Linux, Mac OS,...) crée un répertoire nommé "www" dans ton répertoire personnel.

Ci-dessous, l'illustration de ce que tu dois obtenir sous Linux.

Ton répertoire personnel se présentera donc probablement comme celui de " Dominique Dupont " qui est illustré ci-dessus.

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.

Interface NVU

On y voit :

  1. La  barre de titre
  2. La barre des menus
  3. La barre d'outils principale
  4. La barre d'outils de structures
  5. La barre d'outils de mise en forme
  6. Les onglets de pages
  7. La zone d'édition
  8. Les onglets de modes d'édition
  9. Le sélecteur de vue du mode "Conception".
  10. La barre d'état
  11. Le gestionnaire de sites (si le gestionnaire de sites n'était pas visible, frappe la touche F9)
  12. La console FTP
  13. L'explorateur DOM

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.
  • Edition de sitesClique sur le bouton Editer la liste de sites de la barre d'outils du gestionnaire de sites.

Une nouvelle boîte de dialogue apparaît qui demande où tu souhaites placer les pages de ton site web.

  • Cherche le répertoire www préparé à l'étape 1.

Sélection du répertoire

Création du site web

  1. Gestionnaire de sitesDans la zone Nom du site, indique la mention "Mon premier site web"
  2. Vérifie que l'adresse du répertoire www est bien indiquée à la rubrique Dossier du site. Si nécessaire, clique sur le bouton Parcourir afin de retrouver l'endroit où tu as créé ton répertoire www.
  3. Clique sur le bouton Nouveau site.

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.

Titre de la page

2. Le nom du fichier dans lequel la page va être enregistrée.

  • Dans le menu Fichier sélectionne la commande Enregistrer sous...
  • Indique le titre de la page " Mon premier site web ", dans la boîte de dialogue qui apparaît.

Titre de la page

  • Clique sur le bouton OK.

La boîte de dialogue d'enregistrement de fichier apparaît.

  • Recherche ton répertoire " www ". Actuellement, ce répertoire est vide.

Enregistrer la page sous...

  • ActualiserComme dans la copie d'écran ci-dessus, indique le nom index.html pour la page d'accueil à la place du nom par défaut " Ma page d'accueil ".

Dans le gestionnaire de sites, la page index.html doit apparaître. Si elle n'était pas visible, clique sur le bouton Actualiser.

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 Nouveau de la barre d'outils.

Une page vierge s'ouvre dans un nouvel onglet. Cette page est actuellement sans titre...

Nouvel onglet

  • 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 chinois ").

Structure du site webLa 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 Actualiser.

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.

C'est toujours une bonne idée de classer rigoureusement les différents éléments d'un site web dans des répertoires et sous-répertoires.

  • Nouveau dossierDans le gestionnaire de sites, clique sur le bouton Nouveau dossier.
  •  Dans la boîte de dialogue, indique le nom du nouveau répertoire, comme sur l'illustration:
  • Répertoire pour les images
  • Structure du site webSi le répertoire images n'apparaît pas dans le gestionnaire de sites, clique sur le bouton Actualiser.

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. Vers la page suivante Page suivante


Dernière modification 31/08/2016 Test dans /info ...