XHTML > Travaux pratiques : créer votre site Internet
On ne s'occupe pas du design dans le cadre de cette mise en pratique, mais seulement
de la structuration de l'information. La beauté viendra avec les feuilles de style CSS.
Liste des pages/sections à créer
- Page d'accueil - Logo du site. Quel est l'objet de votre site ?
De quoi allez-vous parler ? Un menu permettant d'accéder à toutes les autres
sections du site. etc.
- Curriculum Vitae avec un sommaire permettant d'accéder rapidement
à une section.
- Liens préférés - Liste de liens vers mes sites préférés.
- Blog / Mes actualités - Page listant mes derniers billets de blog
(avec pour chaque billet un titre, une photo miniature, un résumé et un lien
pour lire la suite).
Exemple :
http://www.boureliou.com/technoblog
- Albums photos - avec classement par catégorie - exemple :
https://picasaweb.google.com/annick.b42
- Formulaire de contact - exemples :
http://www.boureliou.com/contact-info,
http://www.nantes-developpement.com/formulaires/contactez-nous
- Plan du site - exemple :
http://www.nantes-developpement.com/sitemap
- Mentions légales - exemple :
http://www.nantes-developpement.com/mentions-legales
- Un formulaire de connexion - exemple :
http://www.nantes-developpement.com/login_form
- Un formulaire de recherche - exemple :
http://www.google.fr/advanced_search?hl=fr
Et pourquoi pas une boutique en ligne ? -
exemple : http://www.materiel.net/
Accueil, catégories d'articles, articles, formulaire d'ajout, panier, ...
Quelques conseils :
- Le logo et le menu doivent être présents sur chaque page.
- Chaque page doit proposer un lien permettant de revenir à l'accueil du site.
- Le logo est très souvent cliquable et mène à l'accueil du site.
- Un "fil d'ariane" doit être présent sur chaque page pour indiquer au visiteur
où il se trouve.
Exemple d'arborescence
/css -> dossier pour feuilles de style CSS
/javascript -> dossier por fichiers Javascript
/images -> dossier pour les images du site (conseil: utiliser des sous-dossiers)
/index.html -> page d'accueil
/contact.html
/plan-du-site.html
/mentions-legales.html
/connexion.html
/recherche.html
/cv.html
/liens-preferes.html
/blog
/blob/index.html
/blob/article1.html
/blob/article2.html
....
/photo
/photos/index.html
/photo/album1/
/photo/album1/index.html
/photo/album1/photo1.jpg
/photo/album1/photo2.jpg
....
/boutique
/boutique/index.html
/boutique/categorie1
/boutique/categorie1/index.html
/boutique/categorie1/article1.html
/boutique/categorie1/article2.html
....
/panier.html
....