Tutoriaux - Créer son site internet - Le visuel

La charte graphique simple

On parle de charte graphique simple lorsque seule la mise en page compte, c'est-à-dire que l'on ne cherche pas de style visuel nécessitant l'utilisation d'un logiciel de traitement d'image, tout se fait au moment de la création de la page, uniquement avec les outils disponibles dans un éditeur de page web ou alors, pour ceux ayant des connaissances suffisantes, lors de la saisie du code source de la page.

De nombreux sites actuels utilisent se procédé (parfois en se combinant avec des éléments graphiques (le bandeau du titre, le logo, les éléments de bloc...), cela rend une page sobre et claire.
Autrefois (avant l'utilisation des CSS) ce genre de charte se faisait à l'aide de tableaux complexes, puis avec des calques (qui se souvient du bon temps et des pages de code interminables et lourdes à télécharger).
Désormais, l'utilisation des CSS permet d'alléger énormement le code et le poid des pages offrant ainsi un affichage plus rapide aux visiteurs.

Petite question en passant, avec l'arrivée de l'ADSL, ce gain de temps à l'affichage (nécessaire au temps du 56K) est devenu presque inutile sauf s'il l'on veut battre le record de rendu d'une page dans son navigateur en moins d'une seconde (ce qui est virtuellement impossible), alors sans entrer dans la folie du surpoid de code, il est claire que l'on peut mettre plus de contenu dans une page sans pour autant perdre cette rapidité de chargement.
Mais quand même, ce qui était nécessaire avant, le devient-il maintenant, peut-on ce permettre certain excès (sans toutefois entrer dans le déraisonnable) ?
A méditer...

Trouver le visuel de sa charte graphique c'est d'abord définir comment vont se présenter les informations à l'écran, à savoir où placer le ou les menus de navigation où mettre le contenu et comment doit-il s'aficher (sur une, deux, trois colonnes)...

Ensuite vient le choix des couleurs et des polices de caractères pour les titres, les sous-titres, les textes, les liens...

Et finalement, quel sera l'aspect visuel des images (effet ombré, un cardre d'habillage...), des zones de texte, des blocs (cadre arrondi, effet de dégradé, fond coloré... )...
En claire, il faut se poser beaucoup de questions pour réaliser son site.

Quelques exemple de charte graphique:

Visuel 1 Visuel 2 Visuel 3
Menu à gauche, contenu sur une colonne Menu à droite, contenu sur une colonne Menu à gauche et à droite, contenu sur une colonne
Visuel 4 Visuel 5 Visuel 6
Menu en entête, contenu sur une colonne Menu en entête et à gauche, contenu sur une colonne Menu en entête et à droite, contenu sur une colonne
Visuel 7 Visuel 8 Visuel 9
Menu à gauche, contenu sur deux colonnes Menu à droite, contenu sur deux colonnes Menu en entête, contenu sur deux colonnes

Bien sur, des variations, des combinaisons sont possibles, permettant ainsi d'obtenir le résultat escompté.

Mais comment obtenir ce résultat à l'écran ?
Il existe deux méthodes (Il est recommandé d'utiliser un éditeur de page WYSIWYG si vous n'avez pas l'abitude de l'encodage HTML avec un éditeur de texte).

Méthode 1 : les tableaux

Le tableau sert de masque de mise en forme pour le positionnement des différents éléments dans ces cellules.
Cette méthode est lourde pour le code de la page (ce principe est également utilisé lors de la création de charte graphique en image à l'aide de logiciel tel que Photoshop ou Fireworks).

Petit exemple concret :

Charte graphique simple à l'aide d'un tableau

Nous souhaitons réaliser le modèle simple ci-contre, visualisez l'exemple n°1.

Comme vous pouvez le constater en éditant le code HTML, il n'y a rien de bien complexe si l'on reste simple.

Si l'on souhaite faire une mise en page un peut plus élaborée, l'astuce c'est de créer une succession de tableau pour obtenir ce que l'on souhaite. Consulter l'exemple n°2.
Mais ce n'est jamais la solution idéale, car plus on ajoute de tableau, plus le code source de la page s'allourdi.
Autre possibilité, solution plus complexe, il faut créer un seul est unique tableau de mise en forme (c'est ce principe utilisé par les logiciels de traitement d'image). Voici l'explication de cette procédure.

1 - Faire un schéma de l'aspect du tableau.

   
   
       

2 - Calculer le nombre de total de colonnes (dans l'exemple ci-dessus, nous avons 6 colonnes).

3 - Calculer le nombre total de ligne (exemple : 3).

4 - Afin d'éviter toute déformation éventuelle, rajoute au début de tableau 1 ligne avec le nombre totale de colonnes.

5 - Faire de même en rajoutant une colonne avec le nombre exacte de ligne (3).

             
     
     
         

Cette ligne et cette colonne supplémentaire vont servir de guide de mise en forme générale afin d'éviter une partie de la déformation du tableau lors de l'insertion d'un contenu.

6 - Dans votre éditeur de page, insérez un tableau avec le nombre de ligne et de colonne définies (n'oubliez pas de compter en plus la ligne et la colonne de mise en forme).

             
             
             
             

7 - Fusionnez les diversers cellules selon votre schéma de découpe.

             
     
     
         

Attention, il se peut que votre tableau perde sa structure (la raison en est qu'aucune valeur de largeur n'a en encore été définie).

8 - Modifier la taille des différentes cellules, puis vérifier que pour la première ligne, la largeur de chaque cellule soit présente, sinon insérez-la. Faite de même avec la hauteur de chaque ligne de la dernière colonne.
Il faudra faire une petite gymnanstique arythmétique car toutes les cellules de la premières ligne doivent avoir une largeur. Il en est de même pour la dernière colonne pour la hauteur.

9 - Maintenant pour finaliser le mise en forme du tableau, insérez dans chacune de ces cellules une image transparente. Pour la première ligne, sa hauteur sera de 1 pixel, sa largeur, celle définie par la cellule. Pour la dernière colonne, sa largeur sera de 1 pixel et sa hauter, celle de la cellule. L'objectif et de rendre quasiment invisible cette ligne et cette colonne de mise en forme.

   
   
       

10 - Corriger les valeurs du tableau concernant la bordure, l'espacement entre les celulles et le remplissage interne des cellules, mettez tout à "0".

   
   
       

Voila, vous avez un tableau de mise en forme, pour finaliser vous pouvez également indiquez la largeur final exacte du tableau.

Il est possible de faire des adapatations si par exemple vous souhaitez que le tableau s'étale sur toute la largeur, pour cela, il faudra définir qu'elle cellule va servir "d'élastique" et lui indiquer une largeur de 100%, faire de même pour la largeur du tableaux.

   
   
       

 

Méthode 2 : les calques

La seconde méthode consiste à utiliser les calques pour positionner les différents éléments.
Le principe, une succession de calques (appelé aussi layers) en position absolue, c'est-à-dire avec un positionnement au pixel près sur la page ainsi que des dimensions définies et un indexage permettant la superposition des calques les uns par rapport aux autres.
Cette méthode était intéressante au départ, mais très vite elle s'est avéré aussi contraignante que les tableaux surtout au niveaux de la mise en page en mode édition qui diffèrait parfois du résultat d'un navigateur à l'autre. Un exemple.

Les CSS

Avec l'arrivée des CSS, il a été possible de modifier profondement la façon de concevoir un site.
L'apect visuel étant maintenant géré dans la feuille de style, cela signifie que tout le code qui servait autrefois à positionner un calque se trouve désormais dans le fichier CSS, quel interêt me demanderiez-vous ?
Et bien l'intérêt réside dans la possibilité de modifier uniquement le code de sa feuille de style pour changer totalement la présentaion d'un site sans avoir à intervenir et corriger le code HTML de toutes les pages (pour par exemple, corriger une position, un alignement, une couleur... ). Un gain de temps considérable si l'on considère que télécharger un seul fichier au lieu du site en entier permet de mettre à jour un site internet en une fraction de seconde.

Le principe est simple, on ne se base plus sur un tableau mais sur les balise HTML de type bloc (à savoir les balises P ou DIV) les informations concernant la largeur, la hauteur, le positionnement..., sont définies par différentes classes ou ID dans un fichier CSS, classes ou ID qui seront alors appliquer. au différentes balises de la page.

Vous trouverez des exemples de chartes graphiques préformaté grâce aux CSS à cette page.

Le contenu du site

Haut de page

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