Découper
un design (partie 2)
Nous avons précedemment vu comment
réaliser la découpe via FW. Les fichiers ont été
exportés.
Voici comment
ils se présentent sur votre disque dur:
L'export Fireworks a donc généré un fichier
index.html, visible dans le root
du dossier site truk.com. Toutes les images de la découpe
ont été mises dans le dossier "images",
comme nous l'avions décidé.
|
|
Nota:
les images portent ici le nom par défaut attribué
par Fireworks lors de la découpe (index_r1_c1). Comme
conseillé dans la première partie, renommer
les calques permet d'avoir des noms d'images clairs et non
pas des abstractions comme ici ... |
Première étape
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é
Deuxième
étape
Interessons nous maintenant à la mise en page plus précise
du projet. Le design est centré, cool. Mais les marges
? Modifier > Propriétés
de la page (CRL+J)
Le tableau suivant apparait :
- 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>
Troisième
étape
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.
Quatrième étape
Voilà.
A vous maintenant d'intégrer vos tableaux, textes &
images pour rendre ce design vivant et complet. Bon courage
!
|
