• Ouvrez un Nouveau Document avec un fond blanc.
• Sur un nouveau calque, Sélectionnez un carré de la largeur qui vous plaît.
• Remplissez la sélection de la couleur de votre choix.

• Contractez la sélection de 5 pixels.
• Et supprimez.

• Appliquez un contour noir d'1 pixel en "extérieur"

• Ensuite, sur un nouveau calque et avec l'outil Trait, tracez des traits blancs sur toute la largeur comme sur l'image à gauche.

• Sélectionnez l'intérieur du carré, et sur un nouveau calque, remplissez la sélection d'un Gris plus clair que celui utilisé précédemment.
• Placez ce calque en dessous de tout les autres, juste au-dessus du calque de fond (si vous en avez un !)

• Faites apparaître les Règles (Ctrl + R) et placez-les comme ceci. Attention ! Elles doivent être placées au pixel près ! Zoomez jusqu'à 1600% ;-)
• Ensuite, il faut découper les images... Aplatissez tout les calques, Sélectionnez un rectangle indiqué par une flèche bleu (cf. image) et Appuyez successivement sur Ctrl+C, Ctrl+N et Ctrl+V. Un nouveau document s'est ouvert et vous y avez collé votre rectangle...
• Enregistrez cette nouvelle image au format GIF...
• Recommencez l'opération pour le 2ème rectangle.

• Maintenant, prenez l'outil de Sélection 1 rangée :
• Cliquez vers le milieu de l'image et supprimez, à l'aide du rectangle de sélection, le blanc à gauche et à droite de l'image.
• Puis, appuyez successivement sur Ctrl+C, Ctrl+N et Ctrl+V et Enregistrez cette nouvelle image au format GIF.

• Passez maintenant à votre éditeur HTML
• Créez un tableau d'1 colonne et 3 rangées et insérez vos images précedemment créee comme sur l'image de gauche. Attention ! l'image du centre doit être insérée en image de fond !
• N'oubliez pas d'appliquer 0 en taille de bordure, marge interne et espacement entre les cellules !

Insérez une IFRAME dans la cellule du centre :

<iframe name="main" src="iframe.htm" width="185" height="245" scrolling="auto" frameborder="0" marginwidth="0" marginheight="0"></iframe>

Insérez du CSS pour la barre de navigation :

<style type="text/css">
body {
	scrollbar-face-color: #b9b9b9;
	scrollbar-highlight-color: #ffffff;
	scrollbar-shadow-color: #000000;
	scrollbar-3dlight-color: #000000;
	scrollbar-arrow-color: #000000;
	scrollbar-track-color: #d9d9d9;
	scrollbar-darkshadow-color: #d9d9d9;
	overflow: auto;
}
</style>

Exemple :

<table width="190" cellspacing="0" cellpadding="0">
<tr>
<td><img src="imghaut.gif" alt="" style="border:0; display:block;" /></td>
</tr>
<tr>
<td background="imgcentre.gif" style="text-align:center;">
<iframe name="main" src="iframe.htm" width="185" height="245" scrolling="auto" frameborder="0" marginwidth="0" marginheight="0"></iframe>
</td>
</tr>
<tr>
<td><img src="/site/images/photoshop/29/imgbas.gif" alt="" style="border:0; display:block;" /></td>
</tr>
</table>