Tutoriaux - Créer son site internet

La structure

Qu'est-ce que la structure, sinon la manière dont vous allez agencer le contenu et les informations de votre site, afin de les retrouver le plus rapidement possible.

La structure comporte tois éléments :

  • le découpage du site,
  • le contenu du site,
  • l'architecture du site.

 

Le découpage du site

Schéma d'un siteQuand on réalise un site, en général on se pose la question : que va-t-on mettre dedans ?
Le découpage, c'est comme un sommaire, il permet de définir le nombre de parties que doit comporter le site et ce que chacune des parties doit présenter.

On peut considérer qu'une partie aussi appelée section, peut représenter l'une des thématiques du site.
Chaque section peut-être re-découpée en une sous section où  sera présenter des thématiques différentes n' ayant pas de point commun (exemple : pour ce site, la partie tutoriaux comprend les feuilles de styles, les chartes graphiques...).

N'hésitez pas à faire des schémas pour s'avoir comment vous organiser, cela vous aidera notamment à définir la navigation entre vos différentes sections.

L'architecture du site

L'architecture, c'est la façon dont va se définir l'arborescence de votre site. C'est-à-dire où vous allez placer les pages des différentes sections, où vous allez placer le contenu média (images, vidéos, animations...)...

L'arboresence reprend le principe des dossiers de votre explorateur de fichiers :

  • le dossier racine qui est en faite votre site internet,
  • les sous-dossiers pour classer vos différentes sections et les divers fichiers connexes que vous allez utiliser pour votre site.

Le premier dossier à créer, c'est le dossier "images", c'est ici que vous allez placer toutes les images du site. Il est préférable de structurer son contenu en fonction de ce que vous allez y mettre. Séparer le contenu des différentes sections des éléments propres à l'aspect visuel du site ainsi qu' également des différentes images qui serviront d'illustrations complémentaires à vos pages (séparateurs, puces...).

Créer ensuite un dossier par "partie" et éventuellement les sous-dossiers si nécessaires, en fonction du découpage que vous avez précédement défini.

Figure 2 : Exemple d'architecture de site
ATTENTION, éviter les noms long pour les dossiers afin de ne pas allonger l'adresse URL. De plus, éviter les espaces, préférez le tiret "-" ou l'underscore "_".

A la racine de chaque dossier, ajouter un fichier que vous appelerez "index".
L'extension dépendra du type de site que vous réaliserez ainsi que du language utilisé (.html, .htm, .xml, .php, .asp....).
Ce fichier à deux fonctions : il sera la page de garde de chacune des sections et il servira de page de protection afin de masquer le contenu des dossiers contenant les images du site.
Il permettra éventuelement de cacher les fichiers mis en téléchargement pour les internautes.

NB : il existe une méthode pour s'en passer à l'aide d'un fichier ".HTACCESS" placé à la racine de votre site. Pour en savoir+.

Maintenant que le squelette de votre site est prêt, nous allons pouvoir créer son aspect visuel et déterminer également sa mise en page.

Attention !!! Faites bien la différence entre visuel et mise en page, le premier concerne la "charte graphique", le second concerne l'agencement du contenu (textes, images...) dans une page (vous pouvez avoir plusieurs mises en pages différentes sur votre site).

 

Le visuel La mise en page

 

 

 

Haut de page

Vérifier la validité de cette page xhtml1-transitional Vérifier la validité de la feuille de styles CCS 2