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 *