Méthode de découpage de charte graphique

Bonjour


j'aimerais savoir si il existe des règles à suivre en matière de
découpage de charte graphique. Je précise ma question : j'ai le choix
en ce qui concerne l'arrière plan, entre faire une seule image que je
plaque en fond, ou plusieurs petites images correspondant aux fond de
blocs "logiques" (titre, bandeau, navigation par exemple). Faut il
privilégier l'une ou l'autre des solutions, si oui ou non, pourquoi ?

Je précise qu'on suppose que dans les deux cas le rendu est identique, et que l'extensibilité de la page est assurée dans les deux cas. Mais j'aimerais savoir si il y a des règles en la matières, ou des bonnes habitudes à prendre, des contres indication ?

Je n'ai pas d'exemple visible, il s'agit d'une réflexion globale, dans la boite où je bosse nous sommes 2 intégrateurs à nous poser la question de savoir quelle méthode est la plus adaptée/conseillée.


Laurent

Salut,

J'ai envie de dire, tout dépend...

L'image de fond unique n'est pas forcément un truc super dans une grande majorité de cas.
En scindant en plusieurs images, il est déja souvent possible d'en faire répéter certaines en CSS.
Dans un design qui intègre un pied de page graphique, il faut surtout éviter l'image unique car en cas de contenu long ou d'agrandissement de celui ci, il se produit des débordements et chevauchements inesthétiques.

La découpe peut être faite selon la structure, mais parfois même au dela. Par exemple un site fluide en largeur pourra voir sa bannière scindée en deux images qui se chevauchent et en produisent optiquement une seule dans le navigateur, différente selon la largeur disponible...

Enfin beaucoup de choses entre en comptes.

Peut être pourrais tu nous montrer une maquette de site sur laquelle il serait possible de répondre de façon plus concrête.

Salut Mickachu


je ne peux que faire un lien vers la page de réalisations de la boite pour laquelle je bosse, je ne sais pas si c'est possible sur le forum ?

Je met le lien, dites moi s'il faut que je l'enlève :

http://www.vernalis-interactive.fr/references.html


J'apporte un point de précision : l'image de fond ne reprend pas la totalité de la charte en cas d'extensibilité, mais peux intégrer des éléments de blocs comme le menu, le sous menu. La question est de savoir si le fond de ces éléments n'auraient pas plus de raison de se trouver sur le bacground de ces éléments (ul, div ou autre), plutôt que sur le background de la page ?

Bonjour Pifou,

Je suis pas certain d'avoir très bien compris ta question, mais généralement à ma connaissance il faut mettre l'image de fond en une seule pièce sauf s'il s'agit d'un motif qui se répète, dans ce dernier cas on prépare juste la petite image représentant ce dernier(le motif) et on le répète horizontalement et/ou verticalement.

Si on décide de découper un fond qui n'est pas un motif en plusieurs morceaux, on doit l'imbriquer soit dans plusieurs DIV soit dans un tableau(déconseillé), ce qui ne va que alourdir le code HTML et n'apporte aucun avantage à ma connaissance sauf que ce fond s'affichera progressivement dans le cas de l'internaute(visiteur) qui a une basse vitesse de connexion.

Voici un tutoriel vidéo que je trouve très bien fait pour le découpage:

http://www.grafikart.fr/tutoriels/creer-un-site-web-decoupage-22

Et un autre pour l'intégration:

http://www.grafikart.fr/tutoriels/coder-site-web-23

J'espère que ça aide

Bonne journée a+

Sur le lien que tu donnes, je verrais une découpe ainsi :

Une image en fond du conteneur contenant les deux bandes violettes au milieu.
Une image comportant le haut de ces deux bandes violettes, comprenant tout le haut sauf le logo, le menu et le lien espace client, et s'arrêtant sous les deux petits carrés verts.
Une image comportant le bas de ces deux bandes violettes s'arrêtant au niveau du bloc blanc de contenu.

Ensuite, je ferai une image comportant le logo vernalis appelée en html avec l'attribut alt renseigné (pour rester accessible).

Ensuite, une liste d'images en html pour tes 4 liens de menus, avec une image de survol appelée en javascript.

Le lien espace clients peut juste avoir une image de fond en CSS disposée en dessous du lien.

Enfin, tu as une image de fond à tes titres représentant les deux petits carrés verts
Modifié par Hermann (09 Jun 2010 - 14:41)