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

[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.