Je personnalise le kit graphique Blog High Tech

Vous venez d’acheter le kit graphique BlogHighTech ? Pour faciliter sa prise en main je vous propose ce tutorial.

ETAPE 1

J’ouvre mon archive et je copie les fichiers dans un dossier (je peux l’appeler par exemple Interface graphique 1 - Bloghightech). Dans votre fenêtre Windows vous devriez avoir ces fichiers :

Dans le dossier images : vous pourrez trouver toutes les images utilisées dans l’interface graphique. Dans le dossier captures : nous avons les captures d’écrans utilisées pour présenter l’interface graphique sur nos sites : Wonkastudio ou kitgrafik.

En plus de ces deux dossiers nous avons un fichier feuille.css qui correspond à la feuille de style de notre interface, tous les styles utilisés dans cette interface y sont stockés, bref pour changer la taille ou la couleur du texte ou d’un lien c’est sur ce fichier qu’il faut éditer.

Et enfin nous avons le fichier index.html, il s’agit d’une page HTML classique, elle présente une utilisation standard de notre interface graphique.

Le fichier lisez moi reprend la description du kit graphique, donc il n’as pas forcément d’intérêt.

ETAPE 2 - Modification du logo

Je vais maintenant modifier le header de l’interface, pour cela j’ouvre sous Photoshop le fichier 2.psd, puis avec l’outil texte je « clic » sur « BlogHighTech.com » ensuite je supprime le texte et je le modifie par le mien. J’enregistre ensuite ce fichier (fichier > enregistrez sous) avec l’extension .jpg (je vérifie que j’enregistre bien dans le dossier images !).

ETAPE 3

Modification du menu horizontal : Dans le fichier html vous trouverez le code suivant :

<table cellpadding="0" cellspacing="0" align="center">

<tr>

<td width="116" height="33" background="images/4a.jpg"></td>

<td width="100" height="33" background="images/4b.jpg"><div align="center"><a href="" class="menu_horizontale">Rubriques</a></div></td>

<td width="100" height="33" background="images/4c.jpg"><div align="center"><a href="" class="menu_horizontale">Articles</a></div></td>

<td width="100" height="33" background="images/4d.jpg"><div align="center"><a href="" class="menu_horizontale">Archives</a></div></td>

<td width="100" height="33" background="images/4e.jpg"><div align="center"><a href="" class="menu_horizontale">Partenaires</a></div></td>

<td width="100" height="33" background="images/4f.jpg"><div align="center"><a href="" class="menu_horizontale">Contact</a></div></td>

<td width="118" height="33" background="images/4g.jpg"></td>

</tr>

</table>

Petite explication sur ce code ! Nous avons un tableau constitué de plusieurs colonnes, dans chacune d’elle j’ai placé une partie du menu.

Pour changer les liens il suffit de modifier les <a>, un exemple :

<td width="100" height="33" background="images/4b.jpg"><div align="center"><a href="" class="menu_horizontale">Rubriques</a></div></td>

Deviendra :

<td width="100" height="33" background="images/4b.jpg"><div align="center"><a href="http://www.ladressedemonlien.com" class="menu_horizontale">Le texte de mon lien</a></div></td>

ETAPE 4

Je vais maintenant m’occuper des menus de gauche, ceux ci sont constitutés d’un tableau divisé en trois parties : le haut, le milieu avec les liens et le bas.

Voici le code correspondant à un menu :

<table cellpadding="0" cellspacing="0" align="center">

<tr><td width="203" height="26" background="images/8a.jpg"><div class="petittitre">Rubriques >>></div></td></tr>

        

<tr><td width="203" height="10" bgcolor="#383838"><img src="images/fleche.jpg" border="0" align="left"><a href="" class="lien_menu_gris">Programmation</a></td></tr>



<tr><td width="203" height="26" background="images/8b.jpg"></td></tr>

</table>

Pour modifier simplement les liens :

<a href="" class="lien_menu_gris">Programmation</a>

Deviendra :

<a href="http://www.monadresse.com" class="lien_menu_gris">Le texte de mon lien</a>

Pour ajouter un lien il faut ajouter une ligne au tableau, par exemple voici un code avec trois liens :

<table cellpadding="0" cellspacing="0" align="center">

<tr><td width="203" height="26" background="images/8a.jpg"><div class="petittitre">Rubriques >>></div></td></tr>

        

<tr><td width="203" height="10" bgcolor="#383838"><img src="images/fleche.jpg" border="0" align="left"><a href="" class="lien_menu_gris">Programmation</a></td></tr>

<tr><td width="203" height="10" bgcolor="#383838"><img src="images/fleche.jpg" border="0" align="left"><a href="" class="lien_menu_gris">Programmation</a></td></tr>

<tr><td width="203" height="10" bgcolor="#383838"><img src="images/fleche.jpg" border="0" align="left"><a href="" class="lien_menu_gris">Programmation</a></td></tr>



<tr><td width="203" height="26" background="images/8b.jpg"></td></tr>

</table>

ETAPE 5

Le header : je pense qu’il y a pas trop à dire, voir en bas de page et modifier à votre convenance.

ETAPE 6 - La feuille de style

Pour comprendre cela, il faut savoir que pour inclure un style à un texte il faut utiliser class=« nom de mon style ».

Par exemple pour un lien <a href="" class="style"></a> Ou sur un div : <div class="style">

Vous trouverez tous les styles dans le fichier feuille.css.

Si vous avez d’autres questions, merci de poster directement dans les commentaires.

Acheter cette interface graphique pour 2 euros seulement sur Kitgrafik.Com
Voir en détail cette interface graphique : http://www.wks.fr/Interface-graphique-Blog-High-Tech.html

Article publié par Wonka

Vous aimez cet article? Partagez le !

Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !

La galerie des membres

Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !

Questions et commentaires, Il y a 3 messages de forum.

Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.

8 septembre 2007 10:31, par Valck

Mais comment fais-tu pour faire des trucs aussi beaux !!! C’est tout simplement magnifique et je m’extase devant chacun des tutos que tu peux faire !!! Nous avons un grand designeur ici, on a de la chance Bonne continuation à toi Wonka, c’est du bon boulot !
Répondre
- 8 septembre 2007 20:54, par Wonka
  
  C’est très d’honneur Merci en tout cas pour ton message, ca fait vraiment plaisir a lire :p
  Répondre
2 février 2008 23:05, par DqvY

Je confirme ton talent, Wonka. J’espère pouvoir travailler avec toi un jour un beau site web.
Répondre