photoshop---- Nvu

Question

Salut à tous!
Je suis nouveau ici et nouveau webmaster aussi... donc je suis pas encore très doué!
Je me suis lancé dans la création de mon propre kit graphique avec photoshop cs3.
Ce que je ne comprends pas c'est comment l'utiliser avec Nvu, en quelque sorte comme quand on prend un kit graphique tout fait!
Je l'ai decoupé avec le slice tool et enregistré en tant qu'optimisé.

Par exemple quand j'essaye d'incerer un tableau dans un blo la couleur dégradée de celui ci disparait...

Avez vous des solutions? SVP

arthezius · Answer

Je vais t'expliquer quelques petites choses.
Quand tu fait un site sous Photoshop, a priorie tu utilises je suppose l'outils trancher pour délimite les différentes liens.
Quand tu l'enregistres et en fait un fichier html, il découpe l'image et la décompose en faisant en fait un tableau.

Tout ça c'est très bien.
Toutefois, si on veux allé plus loin, c'est en fait pas terrible.
On a un code html assez lourd pour pas forcement grand chose.
Personnellement, étant sous linux, j'utilise The Gimp qui est un équivalent de Photoshop mais qui aura le même role.
Je fait effectivement mon site entièrement graphiquement de la même manière que sous Photoshop.
La seule différence c'est que je n'insèrre aucun texte et je ne fait aucun découpage ni fichier html.
Je me contente juste de découper mon image en fonction des parties de ma page.
Exemple:
Je veux pour ma page:
- un entete
- une zone pour le contenu
- un menu
- un pied
Je par d'un cas simple où on aurai un menu à gauche du contenu comme on trouve assez souvent.
Je découpe l'image de mon site en trois fichier.
Je recadre l'entete et j'en fait un premier fichier ainsi que le pied.
Idem pour le menu et la zone du contenu. Pour cette partie, il est conseillé d'utiliser un aplat simple pour rendre le contenu du contenu variable en hauteur. Ainsi, le fond ne sera que de 1 voir 2px en hauteur et répété en CSS.
J'ai donc trois fichiers, tous de largeur identique.

Pour le fichier html, il sera fait sur NVU (ou KompoZer).
Tu peux faire un code simple :

<div id="container">
<div id="entete"></entete>
<div id="menu"></div>
<div id="contenu"></div>
<div id="pied"></div>
</div>

Il ne restera plus qu'a tout placer en CSS.
Dans un tel cas, l'image de fond du contenu serai à mettre sur le <div id="container"> avec un

div#container { background-image: url(url de l'image);}

Tu pourras alors placer l'entete et le pied en plaçant un

<img src="" alt="" />

dans les div entete et pied.

J'espère que ces explications pourront te servir.

Il ne restera plus qu'a tout placer en CSS. Dans un tel cas, l'image de fond du contenu serai à mettre sur le

avec un div#container { background-image: url(url de l'image);} Tu pourras alors placer l'entete et le pied en plaçant un dans les div entete et pied. J'espère que ces explications pourront te servir.

truevince · Answer

Bonjour Arthesius,

Pas mal le tutoriel ! Chapeau bas...

:)

A+

Photoshop----> Nvu

2 réponses

Votre réponse

Discussions similaires

Newsletters