Top
Export CSS and HTML Using Adobe Fireworks CS4 - Colorburned
fade
26347
single,single-post,postid-26347,single-format-standard,eltd-core-1.0,flow-ver-1.0.1,eltd-smooth-scroll,eltd-smooth-page-transitions,ajax,eltd-blog-installed,page-template-blog-standard,eltd-header-vertical,eltd-fixed-on-scroll,eltd-default-mobile-header,eltd-sticky-up-mobile-header,eltd-menu-item-first-level-bg-color,eltd-dropdown-default,wpb-js-composer js-comp-ver-4.9.2,vc_responsive
export-css-using-fireworks-1

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

Screenshot

export-css-using-fireworks-2

Resources

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.

  • http://thesis-blogs.com/ 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 =-.

  • http://www.welcome2solutions.com Paromita

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

  • http://www.blog.adrice.co.uk 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 =-.

  • yiannis

    Thank you for this tutorial..
    Very helpfull

  • http://www.studiorepublic.com/ 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.

  • http://www.webdesignleedsyorkshire.co.uk 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.

  • http://iamdesigning.com 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.

    http://www.freecssshowcase.com/

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

  • http://www.inkvector.com Inkvector

    Hi. I used this. Thank you.