Insérer des sidebars. Ce Tutoriel vous permet d’insérer des sidebars personnalisés afin de décorer vos menus.

 

 

♦ Avant de commencer, vous devez séparer votre sidebar en 3 parties : Le haut, le milieu et le bas avec un logiciel de photo et assurez-vous que les images ont les même largeurs.

♦ Ouvrez tout d’abord votre page “home” avec NVU.
♦ Passer en mode “Source” en bas de la fenêtre.
♦ Dans votre page vous devriez avoir si vous n’avez point touché la page. Cependant, vous devez avoir un truc du genre.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta content=”text/html; charset=ISO-8859-1″
http-equiv=”content-type”>
<title>home</title>
</head>
<body>
<br>
</body>
</html>

♦ Afin de pas oublier par la suite, nous allons placer le code qui permet de lier à une feuille de style CSS. Rajouter ceci après le code du titre

<link rel=”stylesheet” type=”text/css” href=”style.css”>

♦ Après ceci, nous allons modifier le background en fond transparent, il faut remplacer < /body> par celui-ci :

<body style=”background-color: transparent;”>

♦ Attaquons maintenant à la mise en place de votre sidebar.
♦ Mettez les images de vos sidebars dans votre dossier “images”.
♦ Dans votre page (ouvert avec NVU sous source), à la suite des séries de code, mettez ceci

<!– HOME –>
<table align=”center” border=”0″ cellpadding=”0″
cellspacing=”0″ width=”250″>
<tbody>
<tr>
<td valign=”top” width=”208″>

♦ Pour chaque module de sidebar, incorporez ce code en modifiant les “MAJUSCULES”

<!– DEBUT CONTENU 1 –>
<table border=”0″ cellpadding=”0″ cellspacing=”0″
width=”100%”>
<tbody>
<tr>
<td height=”97″ valign=”top”><img
src=”images/NOM DU FICHIER SIDEBAR -HAUT- QUE VOUS AVEZ MIS DANS LE DOSSIER IMAGE+LE FORMAT”></td>
</tr>
<tr>
<td class=”sidebar” valign=”top”>
<div style=”text-align: center;”>
A METTRE CONTENU*<br>
</div>
</td>
</tr>
<tr>
<td height=”100″ valign=”top”><img
src=”images/NOM DU FICHIER SIDEBAR* -BAS- QUE VOUS AVEZ MIS DANS LE DOSSIER IMAGE+LE FORMAT”></td>
</tr>
</tbody>
</table>
<!– FIN CONTENU 1–>

♦ A METTRE CONTENU* = Rien de compliquer vous metez ce que vous voulez, c’est l’emplacement du contenu, cependant si vous ne le voulez pas centré, retirez juste ce code qui l’encadre :

<div style=”text-align: center;”>…</div>

♦ NOM DU FICHIER SIDEBAR*…ect = Mettez le nom de votre image avec son format qui se trouve dans votre dossier “images” comme par exemple : images/sidebarbas.png

♦ Il se peut que votre image ne s’affiche pas correctement, pour règler ce soucis, passez en mode normal
♦ Cliquer deux fois sur le petit logo comme sur la photo ci-dessous

♦ Dans l’onglet “Emplacement” chercher votre image dans votre dossier ‘images’ à l’aide de parcourir.
♦ Puis cochez “Ne pas utiliser de texte alternatif”
♦ Dans l’onglet “Dimensions”, cochez taille réelle, puis OK. Votre image devrait s’afficher.

♦ Cependant, vous remarquerez peut-être qu’il a un grand espace comme ci-dessous.

♦ Pour arranger ça, revenez en mode “Source”.
♦ Recherchez votre 1er image de votre sidebar, vous allez remarquer quelques détails qui n’y été pas auparavant.

<td height=”97″ valign=”top”><img style=”width: 290px; height: 50px;” alt=”” src=”images/sidebar_navigation.jpg”></td>

♦ Vous aurez qu’à modifier la valeur de td height=”97″ par la hauteur de votre image ce qui donnerai ceci

<td height=”50″ valign=”top”><img style=”width: 290px; height: 50px;” alt=”” src=”images/sidebar_navigation.jpg”></td>

♦ Puis faîtes pariel, un peu plus bas, avec votre image de votre sidebar bas.

♦ Si vous souhaitez faire un autre module de sidebar, reprenez le code ” ci-dessus et mettez à la suite du 1er.

♦ Une fois terminé avec le contenu et toutes ses modifications, on va conclure la table, et donc mettez ceci à la fin.

<!– FIN –> </td>
</tr>
</tbody>
</table>
</body>
</html>

♦ Cependant, il faut créer la feuille de style CSS, donc ouvrez un nouveau document avec votre bloc note
♦ Copiez ceci dans votre document en modifiant les caractères la couleur et le lien de votre image.

/*SIDEBAR*/

td.sidebar {
padding-left: 30px;
padding-right: 16px;
color: #COULEUR; /*Texte Normal*/
background: url(“images/NOM DU FICHIER SIDEBAR -BAS- QUE VOUS AVEZ MIS DANS LE DOSSIER IMAGE+LE FORMAT”);
}

span, p, div, table {
font-family: trebuchet ms;
font-size:11px;
color:#COULEUR; /*Titre centré*/
}

♦ Enregistrez votre document sous le nom de style. Il va s’enregistrer en format .txt
♦ Dés que c’est terminé il vous reste à tout uploader, votre dossier “images” et les fichiers qui ont été modifié
♦ Derniere étape, pour que votre feuille de style fonctionne. Pensez à le renommer en style.css à l’aide de votre FileZilla
♦ Et c’est terminé

© By Shaynee

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *