Fireworks CS4 - html et Css, Problème lors de l'affichage avec Dreamweaver

[angoelina]

Bonjour,

Tout d'abord Meilleurs voeux pour cette Année Nouvelle

J'ai parcouru le forum dans l'espoir de trouver une réponse mais sans succès, j'espère que quelqu'un pourra m'aider.

J'ai créée un .png avec Fireworks et j'ai exporter mon document en html et css pour l'ouvrir dans dreamweaver.
Dans mon .pnd j'ai créé des Div et des tranches pour mes calques Web.
Mon document html ne ressemble pas du tout au document réalisé dans Fireworks: les div créés sous fireworks sont vides dans dreamweaver mais d'autres div ont été créés en plus ... et le texte n'est pas à sa place.

Pourquoi mon code est il tout chambouller?
Y a t'il quelqu'un qui connaisse bien Fireworks et qui pourrait me donner un petit coup de pouce?

D'avance merci

[angoelina]

Snirf, il n'y a personne qui utilise le programme?

J'imagine pouvoir faire plein de choses avec le programme...

Merci

[Nok]

Si j'ai bien compris tu as utilisé Fireworks pour le design puis après avoir utilisé l'outil tranche, tu as décomposé le design de ton site en créant un dossier images + une page html qui lui est lié.
Lorsque tu regardes tes balises tout se met à foirer, et tu es paniquée à l'idée que rien ne marche

Tout comme sur Photoshop, je sais que travailler la découpe et l'export d'un site crée des tables : ce n'est pas une solution sûre. Le mieux et de faire son site en CSS sur Dreamweaver, il s'agit de créer toutes les balises personnelles et de les insérer pas à pas dans ton site, exemple très simple :

Ton site est découpé en ligne et colonne, comme un tableau. Mais afin que rien ne bouge, on va déterminer la taille des balises (des boîtes), dans lesquelles on va insérer d'autres balises, à la manière des poupées russes .

Avant toute chose on va créer une nouvelle page en .css (et non en .html) que nous attacherons ensuite aux pages html.

A partir de cette nouvelle page .css, on va créer la première grosse poupée russe :

Il faut aller dans Texte > Style CSS > Nouveau style (On te propose soit de créer un style css à partir d'une balise existante (comme la balise body par exemple) soit de la créer soi même (ce sont les "class")
- On créer une balise class qu'on va nommer "main" (principal). Cette balise va contenir les autres, tu peux lui indiquer un positionnement, un fond, etc... dans la fenêtre. Etant la première, on va juste lui indiquer qu'elle doit se caler en haut et à gauche (marge gauche = 0, et marge haut = 0).
- On créer la deuxième poupée russe, qui va elle se centrer quelque soit la taille des écrans (c'est un exemple), pour se faire, on crée une nouvelle balise "class" qu'on nomme "feuille" (par exemple) et dans laquelle on va lui dire que les marges droite et gauche (la distance entre la droite et la gauche) seront automatiques (donc automatiquement centrées). On détermine la largeur et la hauteur de la boîte (selon la taille de ton site).
- Ensuite on ca créer une boite pour le "header" (partie du haut) et une boite "content" pour le contenu. En somme deux poupées russes cote à cote, l'une pour un bandeau en haut, et l'autre pour le découpage du site.
- Dans la balise "content" on va découper à nouveau en d'autres balises selon ton choix découpage (menus, newz, etc...)

(Pour mieux cerner le css et savoir quel code mettre, télécharge Firebug et dans l'onglet css tu pourra survoler le code et voir les correspondance avec les parties du site).

Une fois le code css enregistrer sur ta feuille css, tu vas créer ta page html en associant la feuille de style css Texte > Style CSS > Attacher feuille de style.

/!\ Je ne sais pas sous quelle version tu bosses, mais sous CS3 c'est le menu Texte, sous CS4 c'est le menu Format.

Désormais ta feuille est attaché à ta page html. Tu peux tester rapidement en retournant sur ta feuille css, et dans Texte > Style CSS > Nouveau style sélectionne, non pas class, mais balise et choisit "body"
- La balise body c'est la table sur laquelle sont posées les poupées russes ; le corps du site, cette table tu peux lui changer la couleur, l'arrière plan, et définir le style de texte par défaut. Change la couleur de l'arrière plan, puis regarde sur ta page html associée à ta feuille de style. La couleur a changé.

Tu peux maintenant travailler proprement, en glissant déposant tes images ou changeant l'arrière plan des balises.

Lorsque tu enregistre ta découpe de Firework, récupère le fichier image avec tes images découpées, et place-le dans le fichier où tu gères ton site.
Vire le fichier html créé lors de ta découpe sur Firework.

L'étape suivant consistera à créer un modèle (.dwt) pour créer toutes tes pages html à partir d'un modèle. Mais bon c'est une autre histoire

Ce message a été modifié par Nok - 7 Jan 2010, 16:09.

[Nicosa]

Mon document html ne ressemble pas du tout au document réalisé dans Fireworks: les div créés sous fireworks sont vides dans dreamweaver mais d'autres div ont été créés en plus ... et le texte n'est pas à sa place.

N'aurais-tu pas déplacé ton document html (copier-coller, ou drag'n'drop) avant de l'ouvrir sous DreamWeaver ?

Le fait que les div soient vides donne l'impression que le répertoire image créé avec le document html ne l'as pas suivi lors du déplacement et donc les chemins vers les images dans le document html sont faux et les images ne se chargent pas.

Si tel est le cas tu peux au choix :

• remettre le html à sa place d'origine puis l'ouvrir avec DreamWeaver
• deplacer le repertoire image (ce n'est peut être pas son nom exact...) pour le mettre à coté du document html

[angoelina]

Waouw, tout d'abord merci pour vos réponses, elles sont bien détaillées.

Nok, le système de la poupée Russe est vraiment bien expliqué.

En fait ce que j'ai fait dans Fireworks, c'est mon design, et par la suite j'ai créé des calques que j'ai nommé Div (comme dans une vidéo sur Adobe Tv). j'ai également découpé quelques tranches et quelques zones sensibles. J'ai choisi dans le menu exporter et j'ai choisi images et css. Là il me créé un fichier.html et une fichier.css + un dossier image dans lequel toutes mes images sont déposées. J'ai également nommé mes images en instances.

Quand j'ouvre Dreamweaver, et que je prend mon fichier html, si je le test dans Safari sans rien touché, il m'affiche tout décalé. Si je regarde le code html, il m'a créé des nouvelles balises div en laissant mes balises div à moi vides, et ce malgré que tous mes fichiers hmlt et css et images sont mis ensemble dans un dossier nommé www. Et donc forcément le code est pas propre et c'est tout chamboulé.

J'avais compris dans la démo Adobe, que avec Fireworks, il suffisait de faire sa maquette, de tout découper et d'exporter et voila. Je ne pensais pas qu'il fallait encore nettoyer le code etc ... Si vous avez envie aller faire un petit visionnage par ICI et icic'est de cette vidéo que je parle.



Si je réalise mon design, et que je découpe tout mon design en tranches, je ne suis pas obligé de faire des tableaux quand même?

Je peux créer ma poupée Russe, et inclure toutes mes images dans mes div ou dans mes class selon les endroits ou elles doivent se trouver?

Ce message a été modifié par angoelina - 8 Jan 2010, 23:10.