CHARTE GRAPHIQUE – LE CSS

Votre charte graphique est l’essence de votre image de marque.
Vous avez pu remarquer l’importance du design d’un site. Inconsciemment ou non, la charte graphique d’un site nous donne envie de continuer à naviguer sur celui-ci ou de passer immédiatement à un autre site.
Celle-ci doit attirer principalement par son contenu, mais aussi par son visuel, c’est un gage de sérieux.

La maquette de votre site

Commencez par créer l’arborescence de votre site et représentez ensuite celle-ci schématiquement sur un support papier ou autre. Définissez le placement de vos éléments (menus, textes, images).

Soyez rigoureux, avec le souci du détail.

La charte graphique de votre site doit correspondre à votre thématique. Votre design est là pour mettre en valeur votre contenu. Il doit être bien pensé et non trop chargé.

L’aspect visuel mettra en valeur votre contenu mais aussi votre professionnalisme.

La typographie : la police de votre site contribue à votre identité. Ne multipliez pas leur nombre et restez lisible.

Comment bien choisir une typographie : suivant la thématique de votre site, certaines polices peuvent correspondre parfaitement à votre identité. Votre typographie détermine également l’ambiance de votre site.

Chaque police de caractère s’adapte à un usage particulier, ainsi vous n’utiliserez pas la même police pour un site pour enfants que pour un site d’actualité .

Vous pouvez trouver de nombreuses polices gratuites sur dafont.

Le choix des couleurs
Elles ont un impact très fort et vont instaurer l’atmosphère de votre site. Leur choix doit donc être judicieux.

Le logo
Votre logo est bien sûr d’une importance capitale puisqu’il représente votre identité, votre marque et qu’il sera sur tous les supports. Il doit capter l’attention et doit représenter votre thématique.

Ce qui devra donc ressortir de votre charte graphique

Votre identité visuelle
Ergonomie et accessibilité
Cohérence

LE CSS
Pourquoi utiliser le CSS ?

Le CSS ou Cascading Style Sheet (feuille de style en cascade) permet de simplifier la structure de vos pages web. Il est officiellement reconnu par le W3C.
Au lieu de modifier votre contenu sur chacune de vos pages, vous allez pouvoir en modifiant une seule page modifier toutes les pages de votre site.
Vous pourrez ainsi modifier la taille ou couleur d’un texte, proposer une taille de police spécifique suivant vos titres et sous-titres, modifier la mise en page de votre page.

Afin d’inclure du CSS, deux solutions existent.
– Vous intégrez la syntaxe entre <head> et </head>. Ce qui signifie que devrez répéter cette opération sur toutes vos pages. Vous pouvez également intégrer les attributs style sur chaque ligne de votre page. Mais ce n’est donc pas l’idéal et obsolète aujourd’hui.
– Vous utilisez une page qui contiendra tous vos styles CSS de toutes vos pages. Cette page devra porter l’extension .css

Nous utiliserons donc la seconde solution qui est la plus appropriée lors de la mise en pratique.

Introduire une feuille de style CSS

Pour introduire une feuille de style, dans l’entête de votre page html ou php, vous devrez placer ce code (entre <head> et </head>):
<link href=”style.css” rel=”stylesheet” type=”text/css” >

Vous pouvez bien sûr lui donner le nom que vous voulez. Il suffira alors de modifier href (votre page devra toujours porter l’extension .css).

⇒ Continuons avec les sites dynamiques – Php – Javascript

Retour haut de page