Besoin d'aide pour Fireworks

Bonjour,
Tout d'abord Meilleurs Voeux pour l'Année Nouvelle

Je créée des sites internet en html et css mais j'ai des problèmes pour l'affichage sur IE... En général je créé le code html et Css manuellement. J'ai acquis la suite Web Standard afin de me faciliter la tache de coder (surtout pour IE). J'ai réalisé une maquette test avec Fireworks mais je pense ne pas m'y prendre correctement car lors de mon exportation en images et css, le code généré dans dreamweaver est assez mélangé. Par exemple tous les divs que j'ai créée sont vides mais d'autres div se sont créées

Si quelqu'un pourrait m'aiguiller pour Fireworks, ce serait très gentil

D'avance Merci

Angoelina

Le meilleur moyen de progresser en (X)HTML et en CSS est de coder soi-même, et non de laisser Fireworks ou Dreamweaver générer eux-mêmes le code, qui ne sera pas toujours aussi propre ni aussi facile à maintenir qu'on le souhaite.

Tu as réalisé une maquette sous Fireworks. Ce qu'il te faut, c'est apprendre à récupérer le(s) calque(s) dont tu as besoin pour créer les images et les arrière-plans et les optimiser pour le Web. Autrement dit, il s'agit d'apprendre ce que fait un intégrateur.

Merci pour cette réponse.

Je suis capable de créer le code moi-même, c'est ce que j'ai fait jusqu'à présent mais j'ai des difficultés pour l'affichage avec IE.
Et en ce qui concerne Dreamweaver, je ne le laisse pas généré le code tout seul, je tape mon code moi-même.

J'ai un peu du mal a comprendre l'utilité de Fireworks, si ce n'est que l'optimisation des images pour le web.
Dans Fireworks, il y a la possibilité d'exporter les éléments en images et css... Mais il y a certainement une manière de procéder, et cette manière je ne l'ai pas

Angoelina a écrit :
Je suis capable de créer le code moi-même, c'est ce que j'ai fait jusqu'à présent mais j'ai des difficultés pour l'affichage avec IE.

Sans plus de précisions, il nous sera difficile de t'aider efficacement.

Bon j'explique:

Jai appris le language html, les css, javascript et php. je sais réalisé un projet dans photoshop, et ensuite à pendre les éléments différents du design et les mettre en place avec le html et les feuilles de styles, avec les "div et les class". Mais je ne fais aucune découpe en tranches ou autre outils du web.

J'ai lu qu'avec Fireworks, on peut découper le design en tranches et en zone sensible etc, j'ai donc testé...

Mon soucis: j'ai réalisé mon design test, avec un mini menu, une image et une zone de texte. J'ai également fais des calques div et j'ai coupé mon design en tranches et zones sensibles. J'ai exporté le tout en images et Css et j'ai également exporté en Html.

La version exporté en images et css, ne me donne pas un aperçu correcte car les div que j'ai créé moi sont vides et tous est décalés...

La version html me créé des tables et c'est pas propre comme code et on dirait que c'est une seule image.

Voilà je ne sais pas si j'ai été claire, c'est difficile d'expliquer.


Merci

Angoelina a dit :
---
J'ai un peu du mal a comprendre l'utilité de Fireworks, si ce n'est que l'optimisation des images pour le web.
Dans Fireworks, il y a la possibilité d'exporter les éléments en images et css... Mais il y a certainement une manière de procéder, et cette manière je ne l'ai pas
---

En effet, je pense que tu n'as pas tout à fait saisi le principe de Fireworks.

Fireworks est un outil graphique à l'instar de Photoshop mais spécialisé pour le web. L'ergonomie ainsi que les options sont orientées uniquement à cette fin, ce qui a donc l'avantage sur Photoshop, spécialisé tout d'abord dans la retouche photo bien que celui-ci soit un peu mouton à 5 pattes.

Fireworks n'est d'ailleurs pas seulement un outil graphique mais carrément un outil entier permettant un workflow quasi complet pour un graphiste / intégrateur HTML. Le combo Illustrator + Fireworks étant d'ailleurs assez détonant.
Par ailleurs, seul FW est capable de créer des png8 bits avec transparence alpha, indispensable pour certains cas.


Les découpes ne fonctionnent pas tout à fait comme Photoshop, et existent tout d'abord pour extraire une ou plusieurs image(s) en même temps, choisir des paramètres d'optimisation, et les sauvegarder pour une prochaine utilisation. Ce que photoshop ne sait pas faire (hormis l'extraction d'une image).
De plus, il est tout à fait possible de copier-coller tes cadres de découpes vers un autre document Fireworks, absolument indispensable quand tu travaille sur des déclinaisons de maquettes avec des images différentes.

1 - Tu crée ton design _web_ plus facilement
2 - Tu crée des zone de découpes pour les images que tu souhaite extraire. (sauvegardées pour une prochaine utilisation)
3 - Sur chaque découpe, tu spécifie le nom de l'image ainsi que son optimisation (gif, png, jpeg, etc), (sauvegardé pour une prochaine utilisation)
4 - Tu extrais tes images

A partir de ce moment là, je te conseillerai vivement de t'occuper à la main de ton HTML / CSS.
Effectivement Fireworks permet (à l'instar de photoshop) d'extraire en HTML / CSS selon les découpes, mais je ne te conseille clairement pas cette option, l'integration HTML n'est pas un métier automatisable.
La seule utilité que j'y verrai personnellement, c'est pour éventuellement extraire une démo rapide, ou bien un e-mailing à l'arrache.

D'ailleurs pour les démos, Fireworks est excellent aussi puisqu'il permet d'intégrer et extraire un site à plusieurs pages relié par des liens, ainsi que les rollovers sur les boutons.
Mais en aucun cas je ne m'en servirai pour une version optimisée / finale.


PS : Bizarre, les balises de quote ne semblent pas fonctionner sur le forum, chez moi...
Modifié par Nigel (05 Jan 2010 - 08:57)

Angoelina a écrit :
J'ai un peu du mal a comprendre l'utilité de Fireworks, si ce n'est que l'optimisation des images pour le web.

Certaines options d'optimisation des images (PNG-8 avec transparence alpha ) sont utiles. Mais Fireworks est avant tout un outil de design de maquettes graphiques pour l'écran. Si tu réalises tes maquettes graphiques dans Photoshop (bouh... mais passons), il est peu probable que tu aies besoin de Fireworks.

Certaines options d'export en HTML avec découpage d'images sont utiles pour montrer à un client une maquette graphique dans le navigateur (avec une image principale centrée horizontalement, et une autre pour un fond, par exemple). Dans certains cas, on voudra peut-être rajouter des zones réactives pour simuler la navigation entre plusieurs mockups. Par contre la découpe avancée de différents éléments, ça sert éventuellement pour l'export d'images de découpe, mais tu peux laisser tomber le code HTML et CSS qui va avec, sans intérêt.

Angoelina a écrit :
Mais je ne fais aucune découpe en tranches ou autre outils du web.

De toute façon les découpes en tranches c'est horriblement limité pour une intégration HTML-CSS de qualité, qui demandera de modifier certaines images pour faire des fonds extensibles, de combiner des images pour créer des sprites, etc.