| Apprendre
! Si vous êtes ici c'est que vous avez envie d'apprendre comment fonctionne Adobe Photoshop. Instrument extremement puissant, il permet de réaliser d'incroyables effets graphiques tout en maitrisant la création via un système de calques très efficace. A vos tablettes graphiques ;) |
 |
|
Les
pages sur Gimp n'auraient sans doute pas vu le jour sans lours
qui a consciencieusement travaillé pour produire des tutoriels
de qualité et facilement abordables. Vous n'avez plus d'excuses ! Lancer-vous sur l'éditeur graphique gratuit mais néanmoins puissant qu'est The Gimp L'ékipe Kloobik.com |
|
 |
 |
DEUXIEME PARTIE | ||
Nous
avons précedemment vu comment réaliser la découpe
via FW. |
|||
 |
|||
L'export
Fireworks a donc généré un fichier index.html,
visible dans le root du dossier site truk.com |
|||
 |
|||
Nota
: les images portent ici le nom par défaut attribué
par Fireworks lors de la découpe (index_r1_c1) |
|||
 |
|||
| Ouvrez
votre éditeur html (ici DW) et ouvrez le fichier index.html
de votre dossier site truk. Voici ce que vous devriez voir .... |
|||
 |
|||
| Notez
que tout est calé à gauche et qu'en cliquant sur une
image on voit sa découpe ... Commençons par centrer le design ... Dans la balise <body> du code de la page se trouvent les spécifications du tableau généré par FW Il suffit de lui ajouter une valeur align="center" |
|||
 |
|||
| Mais
il y a plus simple. Sélectionner le tableau global de votre design puis allez dans > Modifier > Propriétés de la page (CTRL+Maj+J). Regardez en bas de votre écran, un panel est apparu (si il n'était pas déjà présent ..) |
|||
 |
|||
| Choisissez
"centre" dans le menu déroulant "aligner". Voilà, votre design est centré et le sera quelque soit le navigateur utilisé (contrairement à certaines balises utilsées en css2 qui sont mal interprétées par certains navigateurs ..) |
|||
 |
|||
Interessons
nous maintenant à la mise en page plus précise du
projet. |
|||
 |
|||
| Titre
: c'est le titre de votre page qui apparaitra dans la barre bleue,
en haut du navigateur. Img d'arrière plan : si vous souhaitez utiliser une img d'arrière plan, mettez la en place via ce champ Couleur d'arrière plan : n'apparait pas si vous utilisez une img d'arrière plan Couleur du texte : choisissez une couleurs Couleur du lien : choisissez une couleurs Couleur du lien visité: choisissez une couleurs Couleur du lien actif : choisissez une couleurs Marge gauche : mettez 0 si vous ne souhaitez pas de marge à gauche Marge haut : mettez 0 si vous ne souhaitez que votre design soit calé tout en haut de la fenêtre Largeur de marge : mettez 0 si vous ne souhaitez pas de largeur de marge Hauteur de marge : mettez 0 si vous ne souhaitez pas de hauteur de marge Le reste des options est inutile (ne touchez pas à l'encodage, sauf si vous souhaitez publier un site en chinois ..) > Validez Le design prend sa place définitive dans la page. > F12 pour vérifier sous votre navigateur par défaut (ici Mozilla) Damned, il y a encore un écart entre le haut de mon design et le bas de la barre de Mozilla. Comment se fait-il donk ? (voir loupe ci-dessous) |
|||
 |
|||
| En
fait, FW génère aussi des fichiers images appelés
spacer.gif. Ces images servent à "consolider" le design, sorte de "poutre" pour maintenir le tout (inconvénient qui n'existe pas en css2). Pour supprimer ce petit espace, il faut aller dans le code et mettre tous les spacer du design (généralement regroupés) à la fin du code de la page, juste avant la balise </table> |
|||
 |
|||
| Mettons
maintenant les images en background et supprimons les images superflues. Pour cela, prennons par exemple l'image qui constitue le fond de la rubrique news. J'ai pris soin, lors de la découpe de prévoir cet espace afin d'y intégrer une partie texte. Il me suffit désormais de supprimer cette image et de mettre comme couleurs de fond de cette cellule, la couleurs de l'image et le tour est joué ;). Ainsi, c'est non seulement invisible mais surtout cela allège déjà le poids de la page ... Nota : pour un fond qui se répète, il est tout à fait possible de créer une image de 1 px de hauteur et de mettre cette image en fond de cellule. Elle se répliquera alors autant de fois que nécessaire .... |
|||
 |
|||
| Par exemple, pour la partie central du design, j'ai une image grise. Je la supprime car j'ai du texte et des images à mettre ici. Par défaut, la cellule prend la couleur du fond de la page (ici un blanc #FFFFFF - voir étape 2 sur cette page) | |||
 |
|||
| Allez dans > Modifier > Propriétés de la page (CTRL+Maj+J). Regardez en bas de votre écran, un panel est apparu (si il n'était pas déjà présent ..). Sélectionnez la case Ar-pl, sur la dernière ligne en bas (voir figure à la fin de l'étape 1 sur cette page) et choisissez la couleur de fond qui convient grace au panel de choix de couleurs. | |||
 |
|||
 |
|||
 |
|||
| Voilà. A vous maintenant d'intégrer vos tableaux, textes & images pour rendre ce design vivant et complet. Bon courage ! |
|||
 |
|||
© kloobik.com
- 2003/2004 |