TutorIaux - Créer son site internet

La mise en page

La mise en page, c'est l'étape finale de la création d'une page. C'est ici que se retrouve la fusion de la charte graphique et du contenu.

La mise en page c'est aussi l'agencement des différents éléments dans la page, la façon dont vous allez présenter chaque paragraphe, définir chacune des polices de caractères utilisées, les couleurs des cadres des tableaux, des blocs, l'aspect de séparateurs...
C'est une étape très importante car d'elle, dépendra la clarté de lecture des informations de votre site.

Les différents formats de texte

Chaque éléments de texte se doit d'être différent, qu'il s'agisse du texte de base (celui utiliser pour la rédaction de tous les paragraphes), du texte pour signaler des informations particulières, des titres, des sous-titres, des liens hypertextes en fonction de leur utilités (mail, pages, site...)...

Les éléments textes doivent s'harmoniser au niveau de leur couleur avec l'esprit de la charte graphique, pensez à éviter certaines associations de couleurs, de tailles, en fonction de la couleur de fond que vous allez utiliser comme par exemple :

Exemple de ce qu'il faudrait éviter

Exemple de ce qu'il faudrait éviter

Si vous arrivezà lire le contenu sans vous faire mal aux yeux alors chapeau.

Pour définir ces différents aspects stylistiques, utilisez de préférence les feuilles de style.
Vous pouvez ainsi créer des "classes" et des "ID" avec différentes variantes de couleurs, de tailles,... , redéfinir le formatage de certains éléments (le paragraphe, les en-têtes..) et ainsi les appliquer à tel ou tel élément de vos pages.

NB : pour plus de précision sur les feuilles de styles, cliquez ici.

Les symboles graphiques

On parle de symbole graphique lorsque l'on décide d'insérer sur une page de petits éléments de types images qui permettent de signifier aux visiteurs que ceci est par exemple, un lien vers un site internet, un e-mail, une définition, un complément d'information...
Les symboles graphiques sont également utilisés pour redéfinir les puces des listes ou alors pour créer des boutons, des icônes... Leurs usages peut-être très variés.

Les blocs

Les blocs sont des éléments qui se dissocient du reste du contenu soit par un encadrement, soit par une disposition en colonne, soit par un positionnement différent du reste du texte (alinéa plus important par exemple).
En règle générale, un paragraphe est un bloc.

Pour les créer, on peut utiliser un tableau ou alors définir une classe CSS (recommandé).

Les images

N'oubliez pas qu'un contenu sans illustration fait pauvre visuellement (sauf dans le cas de sites d'informations ou le texte est privilégié à l'image).
Il existe deux catégories d'images pour un site (hormis celles de la charte graphique) :

  • les images liées au contenu : images qui illustrent les propos d'un texte,
  • les images d'illustration : pour évoquer une thématique, pour servir de séparateur entre 2 paragraphes, pour agrémenter le visuel du site (icône, logo...). (On peut associer cette catégorie aux symboles graphiques.)

Pensez également à "habiller" vos images si cela s'intègre bien dans l'esprit de votre charte graphique (créer un cadre d'habillage autour de l'image, créer un effet d'ombrage, de découpe...).

Les différentes mise en page

La façon dont on présente le contenu d'une page à l'écran est pour beaucoup dans la lisibilité des informations.

La présentation classique, c'est l'affichage sur une seule colonne.
Vient ensuite l'affichage sur plusieurs colonnes exemple :

Colonne 1 avec le contenu
que vous souhaitez faire figurer dans votre page.

La colonne 2
avec également le contenu souhaité.

 

L'avantage du mode colonne, c'est que l'on peut jouer avec les feuilles de styles pour dissocier le contenu : exemple :

Colonne 1
avec le contenu que vous souhaitez faire figurer dans votre page.
La colonne 2
avec également le contenu souhaité et une mise en forme particulière.

 

Grâce au CSS il est donc possible de créer, après quelques manipulations, de très belles mises en pages.

Quelques conseils utiles :

  • En cas de textes longs, créez des ruptures à l'aide de sous-titres ou d'icônes.
    Pensez également à diviser le contenu sur plusieurs pages si cela s'avère nécessaire (n'oubliez pas d'insérer un menu de navigation pour passer aux pages suivantes et également permettre de revenir aux pages précédantes).
  • Éviter de mettre plusieurs sujets sans rapport entre eux sur une même page.
    Ne pas confondre avec les pages servant de "Une", regroupant des extraits de sujets traités ailleurs.
  • Si vous optez pour une mise en page sur plusieurs colonnes, vérifiez le sens de lecture.
  • Eviter de mettre des images plus large que la zone d'affichage de vos pages.
    Si l'image est trops grande, préférez l'affichage d'une miniature avec un lien vers l'image taille réelle.
  • Contrôler le poids des images (il existe des utilitaires pour l'optimisation des images).

Le contrôle et la validation

Haut de page

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