How to Export from Adobe Fireworks to Dreamweaver HTML



20 thoughts on “How to Export from Adobe Fireworks to Dreamweaver HTML

  1. hotgypsylips

    so what’s the point in design in firreworks, if u delete all after, just export direct to dreamweaver and write there

  2. mlwebco

    @Classifeedz01 If you use a background images, the best way to do it is to have a div as your master container, then have the background image be placed in that div. Then if you change the background of your entire site lets say in the body tag of your css, it won’t override the image that you placed in the div. A lot of people create what’s called a “master container” which is a div, and this div is what has the main background image.

  3. Classifeedz01

    hello, great tutorial, I was just wondering. When it comes to placing the background image, how do you place it so that the image doesn’t override all the other Images used to separate the content, for example, I set my banner as a background image and when I was done i didn’t want the background black, when I tried to place an image for the page’s background, the banner disappeared

  4. mlwebco

    @Doritji Yes, when you export your mock-up from FW to DW, you do have to do some modifications to it to make sure the code is correct and clean. Once that’s done, you can upload the html files to your server through any ftp client.

  5. Doritji

    Wait I don’t get it. Do you have to rebuild your website again? How do you make your fireworks website into a html that is transferrable through filezilla or any sort of ftp programme?

  6. rzuhler

    hey Mike when i deleted the image and inserted one from my folder it does not appear in Dream. is diva table also used for inserting text if you want to edit in Dream instead fo fireworks and can you add videos or flash this way?

  7. rzuhler

    i don’t not understand why you have to delete picture add div table and type when you can export text and picture in the first place simultaneously. Why do you have to separate the content and background image??

  8. mlwebco

    @uklad06 Ah, good question. It’s quite different in CS4. What you do is when you delete the image like I did in my example, go ahead and right click on that table cell. Click on the option “Edit Tag” , then a Tag Editor box will open. Then choose “Browser Specific” on the left side. Then you’ll see the “Browse” option for selecting a background image. Go ahead and select your background there. Kinda weird that they moved it out of the properties area. Hope this helps.

  9. uklad06

    Hi, @ 3.53 in the vid where you add a background picture. Im using cs4 and this option is not available. I can choose the background colour but not the image. Am i doing somthing wrong ? or is there another way of doing it ?
    Many Thanks

  10. WebDesignerLife

    I like tutorial thank for do but find this little crazy way fireworks does paaired to photoshop special when using div not table.

    What most web designer use today is div instead table.

  11. AndyDOHD1

    I do agree, and with all ie shenanigans, I often think of using tables, would make things a lot simpler. But again yet another great tutorial and informative.

  12. mlwebco

    I do use tables but in this example this was just a demonstration of how Fireworks exports to HTML (which is not the best way). But it’s a good way for web design beginners to learn basic HTML. It’s how I learned. Once you start crawling, then you can grow to table-less designs. But I’ve always used tables in conjunction with divs. As long as you write clean code that can be easily maintained, you’re good.

  13. pakt40

    Same as sphotoshop when slicing. I think it is easier in photoshop. Could be me though as I am just learning Fireworks but cool vid anyway.

  14. Fobok

    Fireworks exports to a table? I can see why so few people use that now. Table formatting was the way things were done back when I was in college, and it was a real pain to deal with. Now that I’m starting to learn CSS formatting, I’d much rather use it, even if it means taking things over manually.

    Nice tutorial though! It’s nice to know how to do this anyway.

Leave a Reply