How To Take a Website From Mock-Up to HTML with Adobe Fireworks

[basilhorace]

niceeeeeeeeeeeeeeee

[nogardenonedragon]

Hello guys, I am still trying to learn front end web design on my own - this video looks pretty awesome however you haven't discussed the buttons - do you save them as html when you slice them or as images? Sorry if I did not find it clear.

[JeffParker45]

This was very helpful! Thank You!

[TheStillpond]

This was good.Well explained. He's a coder but thats good because he shows you how to do it that way.

[danny470]

Awesome tutorial man

[shakaama]

I would really appreciate you doing a mockup in fireworks, step by step. you did one, but you skipped soooo many steps. I know you're a partner now, you can make really long videos. Come on Michael. :)

[pkhinzman]

Hey Mike... I have dabbled with sites for other business ventures and I have thought of getting into design and development on a regular basis. I have watched several of you videos, which are well done, but I had a question about your process. Along with this video I have watched "How to Export from Fireworks to Dreamweaver.' I know these are basically two ways to do the same thing but I was wondering which do you actually do and which would you suggest in the short term and long term etc.

[mangoprojects]

thank you. thank you.

[enfinite5]

wow you use tables instead of seperate div tags for each container? I know thats an older method and Ive been told not to buiild websites like that but your sites look and function awesome

[mlwebco]

@enfinite5 Yeah I actually don't use tables as you see in the video. This was just a demonstration on how to export a website from Fireworks to Dreamweaver. In doing so, Dreamweaver will create the tables for you automatically. But even with that said, I am somewhat of an old school designer and I do tend to use tables a lot. But my latest redesign of my site at mlwebco.com I didn't really use tables that much. ;) If you design clean sites, you can get away with using tables here and there.

[enfinite5]

@mlwebco thanks for the response! if you can make some more tutorial type video's your easy to follow along with and your straight to the point.

[napi91]

sharing is caring...... THANK YOU!!!!!!!!!

[raisismith]

When you get a chance, can you create a tutorial on the value of slicing and why it's necessary when creating websites?

[rockthecan]

I would not call HTML code it's all tags - Great video BTW

[transformation724]

You are too awesome! I have learned so much from your tutorials and advice. Your work is so amazing.

[mlwebco]

@transformation724 Thanks for the kind words, much appreciated. Glad you find my videos helpful.

[Born222kill]

Whats the point of using a table when you can move it around with the div ?

[ThatKidMontana]

what width and height did you use when creating this mockup?

[mlwebco]

@ThatKidMontana I believe I used 900px. But when designing sites, I normally use any size from 800px, 850px, 900, and 960px. I never go wider than 960px. This is to accommodate the 1024x768 resolution.

[DMTV]

man this is really good stuff

[girlfridayproject]

I really liked this video that provides the connection between Fireworks, a program that I find very functional and am in the process of learning, and html. To this point I've seen Fireworks being used for mockup only and then exported to Photoshop to finalize the design, but this seems an unnecessary step. Thank you for bridging the gap and demonstrating how you really don't need anything other than Fireworks and TextPad to get your design on the web.

[thetechall]

if you made the background blend off to black ( just erase around it with a soft brush ) it would look alot better. just make sure it doesnt repeat

[guykw84]

Really appreciate all your tutorials. I've watched about 4 or 5 of your videos now. Wanting to get into this industry but don't have the academic training behind me. Thanks for the help and the use of clear and simple language. Appreciate it once again!

[mlwebco]

@guykw84 glad my videos help. I'll be periodically posting more videos that should continue to be helpful for anyone looking to get started in this industry.

[dubrox]

Why are you using tables to style content?

Apart from being non-standard, it is possible to do it with pure block tags (div) in a cross-browser and accessible way.

Do you have a particular reason for using tables in this case?

[mlwebco]

Who says tables are non-standard? I use both tables and divs. Quick story, working at Cars(dot)com, I had a team of designers that spent days trying to fix browser issues using divs. When I found out of the issue, I told them to just use a table, they did and fixed the issue in 5 minutes. My point is just because a group of Web Standard enthusiasts says stop using tables doesn't mean they're bad. I use both. Tables are actually more stable and cuts down on browser comp issues with deadlines. ;)

[mlwebco]

In addition, I've worked on many successful sites using tables. Sites that brought in millions of dollars still to this day. The end user doesn't care if the site is built with tables, chairs or windows... all the end user wants is a simple, clean interface so they can get to where they need to go, purchase what they want, download what they need and be gone. Designers spend too much time worrying about things that doesn't matter at all to the end user.

[sklikizos]

@mlwebco end-users certainly need to be considered - but whether or not an end-user needs to know has little to do with why you shouldn't use tables for layout.

Your main concern, devel time is an issue - But there are many standards- frameworks that can be used for laying out a site: 960 grid, blueprint, YUI Library - to name a few, Reusable base layouts that work cross-browser means you don't have to keep reinventing the wheel, or using practices that died 10 years ago.

[sklikizos]

@mlwebco I use these practices daily. They are not only FASTER, but more flexible than any tabular layout.

Again, end users don't care - but don't you? The W3C isn't a group of enthusiasts. They are web professionals who set standards to help us best serve our clients. It might take some time to learn, but the end result is always a more robust deliverable.

Furthermore, it's your job to give the best site to your client. Just because it works and looks good doesn't mean good SEO ;)

[2Champions]

I agree with camelwide888, at the end you make divs and arrange them. I'm not saying that it's too much hassle. But Frameworks's got a option exporting to either HTML or CSS straight away. So, for example, you exported your billboard as a png, right? And there is a grey button on the picture. So how would you make it clickable? Make two separete divs? Can I just use slice tool to make objects clickable and that will be it?

Thanks a lot for the tutorial!

[mlwebco]

"Can I just use slice tool to make objects clickable and that will be it?"

Yes, but doing so will automatically give you HTML code that's cluttered and not optimized. Coding the site manually gives you control and allows you to write standard code.

[camelwide888]

so why do you use fireworks if you're gonna end up coding the whole thing? aint there an option to export css right from firefox? could you use photoshop or illustrator instead of firefox just to give urself an idea of the site?? is fireworks used as a storyboard sorta thing? sorry for so many questions but im kinda lost with all this stuff!

[mlwebco]

What are you trying to accomplish? Are you wanting to learn Fireworks inside and out? I would recommend checking out Lynda (dot) com - long walk-throughs on using Fireworks, etc. I think since you're just starting out, this might be a good starting point. It's how I learned many tips and tricks. ;)

[ghanes14]

Since you've been explaining things where I easily understand them I have a couple simple questions.

1. the code margin: 0 auto 0 auto; would be the positioning, correct? is that going to be the pixel position of X, Y in fireworks?

2. I have read on the different position types (relative, absolute, fixed, static, and inherit), but have trouble remembering the difference and when to use the different types.

[gregnoir200]

SO INCREDIBLY HELPFUL!!!

[mlwebco]

@gregnoir200,

Thanks for the feedback, glad you found the tutorial helpful. ;)