How to Export from Adobe Fireworks to Dreamweaver HTML

[mondeost2202008]

Converting those tables into divs would be quite a pain in the arse ;P

[Lykourgos22]

hi, I noticed that when you migrate from Fw to Dw, the image with the sky and all the other stuff you exported are inserted in a table and not in div tags. Is there any way to insert them in div tags, e.g. generate automatically a layout etc, or I have to do it manually, with writing code after the insert??

[arnolf10]

If you're watching this vid, you're most probably new to this stuff, so my advice, don't do it, this is wrong, tables, inline style, image optimizing, background repeat-x. The concept of a any graphic program dictating your mark-up is wrong. It is a great technique but not for this century. Don't learn the newby way hoping to get better, start with the proper way. It will consume the same energy without wasting any of it.

[arnolf10]

Advice, don't do it, this is wrong, tables, inline style, image optimizing, background repeat-x. It is a great technique but not for this century.

[gerson182018]

I've been watching 4 web HTML tutorials of you. My brain is gonna blow up. I think I should stick to joomla.

[Duce2411]

Could I use this technique with your WordPress as CMS to make a site with my own design that's editable using WP?

[Exupery1976]

Is this a table based layout? I"ve heard people say that they are to be avoided, in favor of using HTML and CSS only. What say you about that?

[mlwebco]

@Exupery1976 Check out my other video on Tables vs Divs where I touch on this subject. ;)

/watch?v=gAXxJ_BUBww

[Exupery1976]

@mlwebco Thanks a lot. I saw this yesterday, but am still wondering if you can import all the hotspot-type things that you can make in Fireworks into Dreamweaver. I mean, is the hotspot stuff in Fireworks just for making mock-ups that show a client how a site will work once it's made?

[grillany]

@Exupery1976  Olá

[BadManDub]

hey on dreamweaver when i delete the cell to add a backround it does not have add a backround?? how can i get this to view it in my dreamweaver like yours thanks

[CaptainLeo006]

tank a bunch Micheal...

[jswebco]

Hey every time I make my design in fireworks and export to dw cs4 it screws it up. I am doing it with css and htm. After adding my html slices and jpg better qual slices. The page sometimes gets a bit moved around. Is there a better way to do this. Can you make a tutorial and cover layers and slicing then the export to dw. Thanks

[mlwebco]

@jswebco I made this video a while back just to show this feature in Fireworks, but to be honest, I never use this feature, it creates crappy code. I would only consider exporting to Dreamweaver using a very simple site, just to get an understanding of HTML. Once you learn the basics of HTML, you should work on hand-coding your site in HTML. This is the best way to control the code and grow as a designer. ;)

[lunislevin]

Just wanted to say thank you so much, I was having this problem, but now thanks to you I don't.

[presidentsherman]

Mike: I tried doing this exact same process, but the "shim row" is throwing my overall page width off by a few pixels. Any suggestions?

[phgh1520]

thank you so much! i love you!!!!!

[ryder1650]

How does this work in CS5? You can't set a table cell background image using HTML in CS5. Can you show the CSS way of doing that?

[howtocreatewebsite]

You make it seem very simple! So this is what the computer uses.

[phaaatz]

I have a problem in exporting. I successfully exported my pages in fireworks to dreamweaver. My pages size is 1024x768 and the other one is 1024x1380(because I need to large it since I need to scroll it down). And after I exported them all, the 1024x1380 page is compress that it resulted in stretching in. The orig canvas size of it is not maintained. I hope someone can help me here. Thanks.

[emperorny]

I would like to know if I can use the same technique that you did with the picture backgroud, If I add SWF to the picture background , can I still use the same technique to put the text on top of it? Don't know if you understand me.

[mp4ever31]

in dreamweaver, you can put a background image or an image to your background. Can you put a background image in fireworks

[quotesfromus]

Hey i have a problem.. when i delete the picture, there is no options to select bg image (the folder icon). why is that so o.O

[reshimme]

I have some problems with the alignment. I cant get it centerd. Did exactly as you did but its still to the left. can the problem be that im using dreamwever 8 and fireworks cs5?

[TheHomerForEver]

@reshimme I have the same problem. Its shown centerd in Dreamwaever, but in browser prewiew not.

[mangoprojects]

Thank you. Thank you.

[hiphopisdead167]

hey man, im kindof losing it a little bit... can you post a video on how to do this with dreamweaver cs5???? im a newbie somewhat and i dont know wether to use divs or tables, and i have to get this job done... i have a couple weeks to finish and i can do the layouts and slicing no problem but its the dreamweaver thing thats killing me.. none of the options you have in your tutorial are in mine.. text over images is really a big problem for me. please help me out!

[reallyhuhwow]

@hiphopisdead167 I was hoping to find the same sort of explanation here as well. I have CS5 and its really wrecking havoc on my confidence level for finding help on this. Let me know if you found any resources.

[mlwebco]

@hiphopisdead167 I have CS5 now, what types of things are you trying to accomplish? How to export into dreamweaver? I'm pretty sure the stuff I did in the video can be done in CS5. What exactly are you having troubles with? Also, check out my other video on how to slice images /watch?v=2q4-CPNfaI8 ...this will help you as well.

[hiphopisdead167]

@mlwebco

well the option to apply background images to tables in cs5 seems to be nonexistant. i managed to do it by simply downloading dreamweaver cs3 and following your instructions. but i would still like to know how to do this in cs5 becasue i want to stay current with all my software.

also i was wondering if you had a video on how to use a DIV to do the sam thing instead? youre a life saver man! thanks!

[mythicalness]

@mlwebco hey dude, I can't insert the background image into my tables that I exported

[Mcderpish]

Thank you very much for the help.

[stekkingerj]

Nice tutorial. Great job at explaining things!.... I'm using a few images on my index page including a large background image I need to have scale to the users browser window. I think your layout method might just be what I'm looking for. I'll let you know how it came out. 

[zulo2000]

Hey nice tut, I followed your tut but my page is get centered only in design view.. in live and browser stays on left side:(. what should i do to make in centered in live. please advise.

Thx.

[neodelphi]

Amazing tutorial Michael, i got the idea and i have managed to create awesome pages using your technique :)

[dodgewagen]

Thanks for sharing. Nice video!

[dodgewagen]

Thanks for sharing. Nice video!

[matsie131]

Hey, may i ask why you use tables and no div's?, i see all your site's are with table's!

[mlwebco]

@matsie131 I prefer tables over divs in most cases. I can predict better that a table will be more stable than a Div in certain browsers. If I had to build a site using all divs, I could, but it's never a need in my case. I use both divs along with tables. I'm old school. :)

[BDeiste]

@mlwebco Thanks for posting this video very generous of you by the way. It seems so much easier to do layouts with apdivs or layers. Cn you do a video on how we coud do this and show us how to center the page Thanks!

[hotgypsylips]

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

[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

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

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

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

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

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

[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

[uklad06]

No worries , just managed to sort it.

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

[uklad06]

I sorted it out in the end. Thanks for the info , i will do it the way you suggested in future. Many Thanks

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

[Brandlax]

Thank you so much!!!!!

[AndyDOHD1]

Yet another good tutorial, but I was surprised to see that you were building in tables.

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

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

[djmixmind]

THANKS SO MUCH!

This is what I was wondering!

Ej-

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

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