Tutoriaux - Créer son site internet - Le visuel

La charte graphique avec image

Un environnement visuel graphique impressionne toujours si ce dernier est bien réalisé.

Grace aux outils d'aujourd'hui tel que Photoshop ou alors Fireworks, il est possible de réaliser un charte graphique puis de la découper, ce qui aura pour finalité de créer un fichier HTML contenant soit le code HTML d'un tableau de mise en forme, soit le code HTML de plusieurs calques positionnés ainsi que toutes les images découpées dans les différents formats graphiques souhaités (JPG, PNG, GIF).
Cette opportunité a donné naissance à de très belles réalisation et surtout, elle donne au graphiste et dessinateur en herbe, l'occasion de se défouler artistiquement.

Le tableau, représente une exacte réplique de votre image, chaque zone de découpe devient une cellule contenant une image, que vous avez la possibilité de définir au format de compression souhaité (JPG, GIF, PNG).
Les calques reprennent le même principe (une image = 1calque), ormis que ces derniers utilisent le positionnement absolue avec coordonnées haut et gauche.

L'avantage de cette méthode, si vous modifiez l'image de référence, une fois regénérée, vous aurez à disposition toutes les images corrigé que vous pourrez remplacer sur votre site.

L'inconvénient, s'il en est, c'est que ce fichier généré ne sera pas exploitable immédiatement sans une intervention de votre part.

Plus de détails dans la section charte graphique

Voici quelque petites règles à respecter pour ce type de charte graphique lorsque vous corriger le code source généré d'un tableau :

  • Les images de base (c'est-à-dire celle n'ayant aucune interaction avec le contenu) sont laissé dans leurs cellules (elle permette de fixer la taille de la cellule).
  • Les cellules contenant de la saisie ou les menus voient leur image passer en background.
    Pour les images en background, préférer la saisie du code style="background: url(URL du fichier);" avec les options nécessaires (no-repeat, repeat-y ou repeat-x) plutôt que background="URL du fichier" (plus conforme aux normes W3C).
  • Pour les zones dites "élastiques" (qui servent lors de l'agrandissement de la charte (aussi bien verticalement qu'horizontalement) l'image qui se répète se place en background mais, une image transparente avec des dimensions définies (hauteur minimal et ou largeur minimal de l'image) est placée dans la cellule dans le cas où ce n'est pas une zone de saisie ou de menu.
  • vérifier l'alignement verticale ou horizontale des cellules en fonction de leurs contenus afin d'empécher une image de se décaller si sa cellule peut s'étirer.

Il est important de tester le résultat de sa charte en y insérant un contenu fictif afin de contrôler le résultat final dans un navigateur et ainsi pouvoir y effectuer les corrections nécessaires.

[Charte erronnée] [Charte corrigée]

A la base, cette technique permet également de générer différents morceaux d'images qui pourront ensuite être utilisée lors de la création d'une charte graphique à l'aide des feuilles de style.

Pour en savoir plus

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