Réalisation d’un site Web
L’objectif de cet article est de proposer une initiation à la création de sites web (langage html, feuilles de style CSS). Il est utilisé par les élèves de l’option MPI de seconde mais il est destiné à tous ceux qui souhaitent créer rapidement un site Web.
L’outil logiciel :
Après de nombreux essais, notre choix s’est porté sur KompoZer qui présente des caractéristiques intéressantes :
logiciel libre donc utilisable par tous à la maison ou au lycée
facilité d’installation
clarté, simplicité et accessibilité
multiplateforme (Windows, Mac, Linux)
outil complet
respect des standards du web
un éditeur CSS pratique pour visualliser directement les effets
la possibilité de travailler sur le code source et la feuille de style
Installation de KompoZer
Pour les utilisateurs de Windows
(Pour les utilisateurs de Linux, choisir le paquet adapté à la distribution)
Décompresser le fichier télécharger (fichier zippé)
Ouvrir le dossier KompoZer 0.7.10 et cliquer sur le fichier KompoZer.exe (vous pouvez créer un raccourci)
Le logiciel s’ouvre ... en anglais !
Pour obtenir la langue de Molière, téléchargé le pack de langue
Ouvrir KompoZer
Choisir Outils>Extensions puis Installer. Il suffit de choisir le fichier téléchargé et de redémarrer le logiciel.
Le contenu du tutoriel
1. Rudiments sur le langage HTML
La structure d’une page html, les principales balises
2. Préparation du site web
Vous pouvez télécharger un dossier (voir ci-dessous) qui comprend un fichier modele.html et une feuille de style. Elle propose une mise en page minimum avec des blocs bandeau, menu, contenu et pied de page
3. Utilisation d’une feuille de style
Utiliser l’éditeur de style de KompoZer pour modifier la feuille de style associée au fichier modele.html
4. Modification de la page modele.html
Créer les parties (menu, bandeau, pied de page) qui seront communes à toutes les pages
5. Créer les pages du site
A partir de la page modele.html
Le tutoriel au format .odt :
Le tutoriel au format .pdf :
Le dossier mon-site (zippé) contenant la page modele.html et la feuille style.css :
Ce site est optimisé pour les navigateurs Firefox, Opera et K-meleon, ou autre, respectant les normes en vigueur.
Le moteur de ce site est SPIP.
Contact webmestre.