Base d’un site NVI ou Kompozer et le design en plus. Ce Tutoriel vous permet d’avoir la base de votre site, c’est à dire le design + votre page d’index.

 

 

♦ Faîtes votre design comme vous fessiez pour vos créations.
♦ Ouvrez votre création avec votre Photoshop.
♦ Cliquez sur votre barre de gauche l’outil « Tranche ».

♦ Faites votre 1ere sélection de votre 1er bouton en gardant le clique Gauche de la souris, puis lâchez quand vous aviez votre sélection.

♦ Faîtes ceci avec les autres boutons que vous souhaitez avoir.

♦ Quand vous aviez fini, allez dans votre menu, Fichier > Enregistrer pour le Web.
♦ Vous pouvez voir un aperçu, vérifiez si vous n’aviez rien oubliez.
♦ Faîtes Enregistrez, puis Mettez « index » comme nom de Fichier
♦ Important, dans « Paramètre Prédéfini », choisissez votre format d’image, moi j’ai choisi PNG-24 car c’est celle qui pixelise moins chez moi.
♦ Et enfin choisissez le format en « HTML et Images »
Conseil : Sauvegarder dans un dossier vide car il va avoir votre index + votre dossier « images ».

♦ Bien, vous avez ensuite votre base mais ce n’est pas terminée. On va changer le nom sur l’Onglet de votre fenêtre.
♦ Ouvrez votre « index » avec votre bloc note
♦ Recherchez au tout début ce code

<title>index</title>

♦ Modifier le texte « index » ou il se peut ce se soit le nom de l’image d’origine, par le nom de votre site et enregistrez
♦ Tout ceci donnera comme sur l’image ci-dessous.

♦ Maintenant, on va mettre les liens sur vos boutons.
♦ Ouvrez votre « index » avec le programme NVU.
Vous verrez bien les sélection que vous avez tracé avec photoshop, et que c’est tout décalé. Pas de panique, c’est normal.
♦ Cliquez sur votre 1er Sélection, ici ça sera « Accueil

♦ Allez dans votre menu : Insertion > Lien

♦ Une petite fenêtre s’ouvre et donc, Allez dans l’onglet Lien.
♦ Tapez le URL de la redirection de ce 1er bouton, puis Ok
♦ Faîtes de même pour les autres.
♦ Si vous vouliez mettre une adresse mail comme lien, c’est pareil, allez dans votre menu : Insertion > Lien
♦ Allez dans l’onglet Lien et tapez une adresse mail.
♦ Puis cochez sur « La valeur ci-dessus est une adresse électronique », et « Ok »
♦ Puis enregistrez

♦ Vos liens sont mis, mais vous vouliez que votre page soit dans une nouvelle fenêtre venant d’une image.
♦ Ouvrez votre « index » avec votre bloc-note
♦ Cherchez la ligne auquel vous souhaitez modifier, par exemple :

<tr>
<td>
<a href= »http://forum.ffmystery.com/forum.htm »><img style= »border: 0px solid ; width: 151px; height: 39px; » src= »images/Monde-Fantasy_1-00_%281%29_08.gif » alt= » »></a></td>
</tr>

♦ Vous n’avez qu’à insérer target= »bank » dans le code de l’URL, ce qui donne

<tr>
<td>
<a href= »http://forum.ffmystery.com/forum.htm » target= »bank »><img style= »border: 0px solid ; width: 151px; height: 39px; » src= »images/Monde-Fantasy_1-00_%281%29_08.gif » alt= » »></a></td>
</tr>

♦ Puis Enregistrez.
♦ Par contre, si vous vouliez ouvrir votre lien dans le contenu venant d’une image, mettez target= »contenu » à la place.

♦ Pour centrer votre design, ouvrez votre « index » avec NVU
♦ Allez dans votre menu : Édition > Tout sélectionner
♦ Puis, sur le tableau d’icônes, cliquez sur « centrer »

♦ Dernière étape, change la couleur du fond
♦ Ouvrez votre « index » avec votre bloc-note
♦ Cherchez ce code, un peu plus loin après le titre.

<body leftmargin= »0″ topmargin= »0″ bgcolor= »#ffffff » marginheight= »0″ marginwidth= »0″>

♦ bgcolor= »#ffffff » est votre couleur pour l’arrière plan.
♦ Pour la modifier, il suffit de remplacer #ffffff par un autre code couleur pour le Web[/i]
♦ Je veux mettre l’arrière plan en noir donc je remplacer par la couleur qui lui correspond = #000000
♦ Puis, j’enregistre, j’upload 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 *