Export CSS and HTML Using Adobe Fireworks CS4

For the last couple of weeks we have been working with Adobe Fireworks to create a layout for a fashion website. We started out by laying out the page, then I demonstrated how to add multiple pages and utilize symbols to create global navigation items. Today, I will show you how to convert our layout into a fully functioning html page that includes CSS. I will then show you how to make some minor tweaks using Dreamweaver.

Video Tutorial




Download HTML Enhanced Common Library

Grant Friedman

Grant Friedman is a graphic design, blogger, and author. In addition to being the founder of this website, Grant is also the editor of Psdtuts, one of the world's most popular tutorial websites.

  • Thesis WordPress Theme

    I Watched the video tutorial. I still can’t wrap my mind around allowing the program to write the code for me. I guess I just grew up on designing in Photoshop, and then writing the code myself from scratch in a text editor. I feel I have more control that way… In the time it takes to mark the different elements in Fireworks, and then fix the inconsistencies in Dreamweaver, I could have just coded it myself just how I wanted. I also don’t use Dreamweaver… Not sure how other designers and front-end developers feel about this. Thanks.
    .-= Thesis WordPress Theme´s last blog ..What If There’s No Thesis Hook For That =-.

    September 22, 2010 at 3:50 AM
  • Paromita

    Thank you for sharing.Very helpful tutorial.I am going to folow your advice.

    September 26, 2010 at 11:13 AM
  • Adie

    Nicely explained tutorial. I have to agree with the first comment that I also find it quicker to design in photoshop, then write the code from scratch rather than having it done for me then editing it after. I must be old school

    Good work though.
    .-= Adie´s last blog ..Tips On Creating A Mobile Website =-.

    October 5, 2010 at 5:44 PM
  • yiannis

    Thank you for this tutorial..
    Very helpfull

    October 23, 2010 at 8:52 AM
  • Studio Republic Web Design

    I will have to try this sometime. Maybe a slower way of doing it initially, I do wonder if the process would become faster. Definitely could be the way to do it for a certain type of website.

    October 28, 2010 at 8:07 AM
  • Richard, Leeds

    Does the code it turns out validate? I can see what looks like lots of repeating id’s, which should really be classes.

    November 4, 2010 at 6:20 AM
  • Prakash

    Excellent tutorial buddy. Think it will be very useful for the professional desingers. It was so helpful to us. Have to follow these sometime in coming days. Thanks for sharing this tips through your post.

    Here is a website where we uses CSS, HTML. Use this link for more design inspiration & for free CSS templates.

    December 4, 2010 at 9:53 PM
  • Inkvector

    Hi. I used this. Thank you.

    December 14, 2010 at 11:47 AM
  • Ashraf

    Very helpful & useful ADOBE FIREWORKS CS4 Tutorial. Thanks for sharing

    June 16, 2016 at 5:11 AM
  • Color Center Int

    Yea.This is very useful information. Am love it.

    November 29, 2016 at 8:23 PM
  • Color Center Int

    Yea.This is very useful information. Am love it.

    December 8, 2016 at 6:07 AM