de PHOTOSHOP à DREAMWEAVER Fermé

Question

Bonjour, 
Je suis en train de réaliser un site internet ex nihilo, sur Photoshop CS4, pour l'envoyer ensuite sur Dreamweaver CS4. Je connais le fonctionnement de Photoshop, mais je suis complètement débutant sur Dreamweaver. J'ai donc réalisé toutes mes pages Web, 1 par 1 sur photoshop. 
J'ai créé toutes les tranches correspondantes aux futurs boutons sur lesquels l'intrenaute sera cencé cliquer pour naviguer sur mon site. Par exemple, j'ai écrit le mot "accueil" et j'ai créé une tranche autour de ce mot.etc...Toutes mes tranches ont été mises en Html.
1ère question=J'ai créé des écrans blancs sur mes futures pages web, (Ces écrans blancs représentent l'emplacement des photos que j'aimerai mettre sur mon site). j'ai créé des tranches autour de ces écrans blancs. 
Est-ce que Dreamweaver sera capable de détecter ces écrans blancs pour pouvoir mettre des photos qui sont dans d'autres fichiers sur mon ordi? Si oui comment fait-on? Je crois que Dreamweaver créer des liens entre les fichiers. Mais, je ne sais pas comment on fait?
2 ème question=Si non, faut-il que je remplace tous ces écrans blancs par des photos et mettre des tranches sur ces photos? 
Merci beaucoup d'avance!

avion-f16 · Answer

Un site ne se crées pas en image !
Tu dois créer ton design sur Photoshop puis le découpé toi-même en XHTML/CSS car Photoshop le fait mal.
Ensuite, quand tu as ton design en XHTML, il te suffit d'ouvrir le fichier avec Dreamweaver et tu pourras y inclure ton texte, les boutons, les images, ...

oursinus maritimus · Answer

Merci Avion-f16! Si je comprends bien, je fais le fond de mon site sur Photoshop. Le texte je le fais sur Dreamweaver ainsi que les liens avec les images que je veux joindre dedans.
Dans quel logiciel je découpe mon design en XHTML/CSS? Sur Photoshop ou sur Dreamweaver?
Comment fais-tu ça? Quelle est la différence entre du HTML et du XHTML?
Merci d'avance

avion-f16 · Answer

Si je comprends bien, je fais le fond de mon site sur Photoshop. Le texte je le fais sur Dreamweaver ainsi que les liens avec les images que je veux joindre dedans.
Ton design (menu, contenu, entête, ...) ne doivent pas être en une seule image. Tu dois découper ton image principale en morceau d'image que tu assembleras avec des div en XHTML.

“Dans quel logiciel je découpe mon design en XHTML/CSS? Sur Photoshop ou sur Dreamweaver ?”
Tu crées les morceaux d'image dans Photoshop et tu les assembles en XHTML dans une simple éditeur de texte (bloc-notes)

“Comment fais-tu ça ?”
En XHTML et CSS

“Quelle est la différence entre du HTML et du XHTML ?”
Le XHTML utilise les règles du XML et est basé sur les balises du HTML (c'est presque le même).

oursinus maritimus · Answer

Salut avion-f16. Merci pour ta réponse. Mais j'ai abandonné Dreamweaver. Je n'arrive pas à comprendre comment il fonctionne. Finalement , je fais mon site sur Kompozer. J'ai presque terminé, c'est carrément plus simple comme logiciel. Enfin, j'essaierai peut être un jour de comprendre Dreamweaver. A bientôt!

kiyomasa · Answer

Si vraiment tu veux travailler avec Dreamweaver (ce que je fais) il faut bien comprendre que tout découper sur photoshop avec les tranches ne se fait pas à la légère. Il ne faut pas les découpé comme des blocs collé les uns aux autres.

Dans dreamweaver, tu vas mettre chaque image dans des balises div. Les div sont des calques. Il faut donc découpé les images en comprenant bien que les images vont se mettres les unes sur les autres. c'est comme les calques de photoshop !

Ex : Une div pour la couleur de fond, par dessus une div avec une image sur la droite, une div avec le texte à côté, ect ...

Sinon, un ami à moi dis avoir trouver un moyen absolument automatique pour tt découper sa page en tranches et y a tt un bordel à régler dans les préférences et d'autres trucs à coté. Mais bref, apparament, ca construit tout seul la page en html et Css, tout est nikel dans des div et ca marche nikel sur IE, FF, Safari, ...
Je lui redemanderais de m'expliquer ca mais ca à l'air terrible.

oursinus maritimus · Answer

Bonjour Kiyomasa!
Je connais une procédure sur Photoshop qui permet de découper une image en tranche. C'est peut-être celle que tu connais?
Une fois que les tranches sont faites. On fait l'exportation html. On fait Fichier, enragistrer pour le web et les périphériques. On dézoome, pour avoir l'image en entier. On sélectionne l'image avec le sélecteur de tranche en dessinant un rectangle. On choisit jpeg supérieur et on enregistre. Il faut enregistrer une copie optimisée après. Mettre html et images pour le type.

kiyomasa · Answer

non c'est pas celle là. Il va te générer un fichier html et si tu l'ouvre dans un navigateur, tu constate vite qu'il est tout déstructuré, normal, y a pas CSS !! en plus le code généré fais assez peur.

Ce que mon pote a trouvé, c'est le moyen de générer une page XHTML et CSS, tout est construit en div et tout fonctionne nikel sur IE et FF. même le texte est généré ! je le vois bientôt je lui redemanderais comment il fais. Mais bon, en général, tout ce qui est généré automatiquement, perso je m'en méfie comme la peste :D

kiyomasa · Answer

ben si tu veux avec le fichier qui est généré, c'est pas que tu ne peux rien en faire !
mais en gros il te faut créer un fichier CSS dans lequel tu vas dire à chaque tranche sa position et sa taille.
Et elle devaient se caller parfaitement les unes aux autres.

Mais c'est long, chiant et pour mettre du texte, ...
mais je te dis sinon la vrai méthode c'est de découper son fond, ses différentes images et de les mettent dans des div, tu fini ton site en moins d'une journée s'il est relativement simple.
sinon oui, si j'arrive à comprendre ce qu'il fait je te dirais

oursinus maritimus · Answer

Ok! Merci. 
J'ai fini l'élaboration de mon site sur Kompozer. J'ai plus qu'à me choisir un serveur et lancer le site.
La navigation marche bien. Il reste juste un petit problème d'ordre esthétique. Lorsque l'on clique sur les images, pour ouvrir des liens, celles-ci se retrouvent entourées de rectangle en pointillé rouge. est ce normal?
Peut-on faire disparaitre ces rectangles de pointillés rouges? Est-il possible de coloriser les images lorsqu'on clique dessus pour ouvrir des liens, pour qu'on puisse se repérer dans la navigation?
Merci d'avance

notobe · Answer

Il ne faut pas essayer d'enlever ces pointillés (c'est possible, mais il ne faut pas)

Il arrive parfois qu'on ne veuille pas, ou qu'on ne puisse pas  utiliser la souris, ou que ça fasse mal (car je me suis foulé le poignet par exemple...).
Alors on navigue au clavier.

Et comment on fait pour s'y retrouver si on ne voit pas où on est grâce à ces fameux pointillés ?...

oursinus maritimus · Answer

Merci pour la réponse.
Dommage, ça gêne un peu, ces pointillés. Vont-ils disparaître lorsque mon site sera lancé sur le web? 
Par contre est-il possible avec Kompozer, de coloriser les images lorsqu'on clique dessus pour ouvrir des liens, pour qu'on puisse se repérer dans la navigation? Par exemple que l'image devienne plus pâle...pour qu'on voit qu'on l'a sélectionné. Car je trouve mon site un peu trop statique. Peut-on faire cela avec Kompozer, sans avoir à faire des animations comme dans Flash?

notobe · Answer

Non, les pointillés ne vont pas disparaître... je t'ai dit qu'il ne fallait pas qu'ils disparaissent ;)
(fais l'expérience : navigue de liens en liens en utilisant la touche tab du clavier... tu vas comprendre !)

Pour modifier l'apparence des liens au survol, il faut utiliser les feuilles de style (effet rollover).
Des tutos à la pelle sur notre ami google :
https://www.google.com/search?ie=UTF-8&oe=utf-8&q=effet+rollover+css&gws_rd=ssl

kiyomasa · Answer

Comme dis Notobe, il ne faut pas enlever les cadre autour des liens, ils sont là pour aider les personnes handicapés.

Par contre, ca te fou ton design en l'air et en temps que graphiste, moi je n'accepte pas ça alors je te comprend.
Si tu veux l'enlever, tu vas dans le CSS et dans la class tu rajoute border="0". Tu peux aussi le mettre dans le code HTML (et pas dans le CSS) ca marche aussi.

Pour le rollover tu crée une classe a:hover avec a=la classe de ton lien.

oursinus maritimus · Answer

Merci pour la réponse, mais ça ne marche pas. Les rectangles en pointillé bleu autour de mes images qui apparaisssent lorsque l'on clique sur les images ne partent pas. il y a pourtant déjà: style="border: 0px solid, de marqué à chacune de mes images. J'ai remplacé style="border: 0px solid par border="0". Mais aucun résultat. Voici les propriétés de l'image concernée: style="width: 105px; height: 57px; position: absolute; left: 50%; margin-left: -355px; top: 280px; z-index: 4;">

Peut-être que je me trompe de manip? Autrement, tant pis, c'est pas grave. Je vais me résoudre à ne pas faire disparaitre ces rectangle de pointillé bleu et suivre les conseils de notobe. Merci d'avance

kiyomasa · Answer

Déjà, je vois plein de "%". Ca veut dire que tu met des espaces dans tes noms de fichier. Ne fais pas ça, ça peut créer des conflits. Je me doute que tu vas pas t'amuser à renommer tous tes fichier mes à l'avenir remplace les espaces par des underscore : _ Bref, sinon pour ta question, c'est étrange je procède comme ca et ca fonctionne. en tout cas "border: 0px solid" je connais pas :P Tu dis avoir essayé ce que je t'ai dis mais attention à la syntaxe c'est bien border="0" sinon essaie border:none; dans le CSS si ça ne marche tjs pas, je n'ais plus de cadre qui apparaissent depuis que j'utilise les div. Pour ton lien, écris ceci.

adresse.html étant l'adresse vers laquelle on arrive nom étant le nom de ta class. en fait, tu crée un calque (div) qui portera toutes les propriétés de la class "nom". Et là, personnellement je n'ai plus ce prob. Mais tu peut quand même rajouter border 0. j'espère que ca ira là :S

notobe · Answer

Non,  ce n'est pas avec border qu'on peut enlever les pointillés..
Mais ne comptez pas sur moi pour vous donner la solution : faut pas les enlever ! (désolé pour les graphistes, mais l'ergonomie et le confort de l'usager, c'est plus important... :p )

avion-f16 · Answer

D'accord avec toi.

De PHOTOSHOP à DREAMWEAVER

17 réponses

Discussions similaires