Création graphique du bandeau

Publié le jeudi  25 mars 2010
Mis a jour le samedi  2 juillet 2011
par  Steph
popularité : 40%

PNG - 7.5 ko
PNG - 487 octets

Je ne sais pas pour vous, mais pour moi, le bandeau est le premier élément que j’ai en tête quand j’imagine mon futur site.

Je vous propose donc de commencer la personnalisation de votre habillage visuel par la création de ce bandeau.

Préalables  

- Pour que tout fonctionne bien, prenez soin de lire les chapitres précédent, en particulier ceux qui indiquent quelles extensions pour Firefox et extensions pour SPIP vous devriez déjà avoir installées. Je ne vous répèterai pas qu’il faut que vous vidiez les caches tout le temps, si ce n’est pas fait, installez et configurez à présent Webdeloper et Couteau Kiss ;-)

Création du bandeau   

Pour ce faire, prenez votre logiciel graphique préféré et créez un nouveau document avec une résolution de 72 pp, de largeur 1024 px (celle que l’on a choisi précédemment dans la configuration du layout) et pour la hauteur, celle que vous déciderez selon que vous voulez un bandeau fin ou large.

N’oubliez pas que le bandeau est composé de trois parties mais que, par la configuration de Sarka-SPIP Bandeau, vous ne serez pas obligé de les utiliser toutes les trois.

Exemple 1 : utilisation des trois parties du bandeau :  

- Nouveau document vierge : 1024 x 223 px
- Création d’une image sur ce document
- Division par copier coller de ce document pour obtenir les 3 images dont j’ai besoin :

    • bg_bandeau_haut.gif : 1024 x 154 px
    • bg_bandeau_bas.gif : 1024 x 40 px
    • bg_chemin.gif : 1024 x 37 px

(pour qu’elle soit plus lisible j’ai ajouté à l’image ci-dessous un fond blanc qui n’est pas présent sur les originaux)

JPEG - 52 ko

Exemple 2 : utilisation de deux parties seulement du bandeau :  

- Nouveau document vierge : 1024 x 143 px
- Création d’une image sur ce document
- Division par copier coller de ce document pour obtenir les 2 images dont j’ai besoin :

    • bg_bandeau_haut.jpg
    • bg_chemin.jpg

JPEG - 38.4 ko

Installation par FTP des images sur votre site   

- Ouvrez votre logiciel FTP
- Connectez-vous à votre site (pour savoir comment faire voir ici)
- Dans public_html/ vous avez déjà créé un répertoire nommé squelettes/
- Dans ce répertoire créez un nouveau répertoire nommé images/
- Glissez les 3 documents que vous venez de créer de votre ordinateur (site local) jusqu’au répertoire public_html/squelettes/images/

C’est fait !

Configuration du bandeau dans Sarka-SPIP   

Pour que ces images apparaissent dans le bandeau de votre site, vous devez configurer deux parties de Sarka-SPIP :

Voici les explications pour l’exemple 1 :

Configuration du bandeau  

- Dans la partie privée, cliquez sur Configuration/Configurer Sarka-SPIP.
- Cliquez ensuite sur Bandeau.
- Renseignez les champs en indiquant que vous souhaitez afficher les 3 parties du bandeau
- Renseignez les champs sur la hauteur minimale de :

    • la partie haute du bandeau (145 comme indiqué ci-dessus),
    • la partie basse du bandeau (40),
    • cette question n’est pas posée pour le chemin.

Cela donnera :

PNG - 25.1 ko

Notez que selon les choix que vous avez fait dans la config de Sarka pour les Menus, vous verrez les options suivantes apparaître dans la partie concernant la partie basse :

- Menu des rubriques PNG - 7 ko

- Menu des secteurs PNG - 7.1 ko

- Menu des pages spéciales PNG - 7.1 ko

- Menu des liens personnalisés PNG - 7.3 ko

Configuration des styles du bandeau  

- Toujours dans la partie privée Configuration/Configurer Sarka-SPIP :
- Cliquez sur Style et descendez jusqu’à trouver la partie consacrée au bandeau.
- Pour chacune de vos images, veillez à faire correspondre l’extension (gif, jpg ou png).

Info : les images prennent toujours le pas sur les couleurs.

- Explorez un peu les styles concernant le bandeau et vous trouverez des possibilités pour personnaliser les liens vers le chemin par exemple.
- Quand tout sera à votre goût, descendez tout en bas de la page et Validez.

GIF - 21.9 ko GIF - 19.7 ko GIF - 20.5 ko

Voir aussi cet article sur la configuration des styles du bandeau avec des couleurs.


Grâce à la configuration de Sarka, vous pouvez aussi arrondir les coins de votre bandeau. Pour ce faire consultez l’article sur les coins arrondis.


Si vous avez tout bien suivi, normalement, votre magnifique bandeau est à présent en ligne !

En page suivante, nous allons utiliser ce bandeau pour établir la charte graphique


Agenda

<<

2014

>>

<<

Août

>>

Aujourd'hui

LuMaMeJeVeSaDi
28293031123
45678910
11121314151617
18192021222324
25262728293031
Aucun évènement à venir les 12 prochains mois

Annonces

Annonce nouvelle mise à jour de SPIP

Après la 2.1.8, puis la 2.1.9, une nouvelle mise à jour de sécurité est préconisée par SPIP.

La nouvelle version est la 2.1.10. A installer d’urgence !

Nous indiquons sur notre site comment "Effectuer une mise à jour de spip" : vous pouvez suivre le tuto, il marche !