Fireworks Web Workflow

Learn how to use the power of Fireworks CS4 and get your website designs converted into HTML and CSS quickly and easily.
3.3 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
65 students enrolled
Instructed by Candyce Mairs Design / Design Tools
25% off
Take This Course
  • Lectures 54
  • Length 3.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2013 English

Course Description

Fireworks CS4 provides features that allow you to easily convert your graphic designs into HTML and CSS web pages. Let Adobe Fireworks do the work for you converting your PNG file into standards compliant HTML and CSS. This course walks you through the process step by step, building a website using Fireworks, showcasing the various export options and how to set up a PNG file to get the results you want. Streamline your web workflow by letting Fireworks do most of the work for you and get that website up and running quickly!

What are the requirements?

  • Adobe Fireworks CS4 or higher in order to do the exercises within the lectures
  • Adobe Fireworks is not required if you do not wish to do the exercises within the lectures

What am I going to get from this course?

  • Understand how to work in Fireworks
  • Be Familiar with the CSS Export Feature within Fireworks
  • Completely convert a Fireworks web page design into an HTML and CSS web page
  • Extend the capabilities of Fireworks beyond the basic program using extensions.
  • Know the importance of properly slicing your design to create the web page
  • Be familiar with the basics of HTML and CSS on a web page

Who is the target audience?

  • Anyone interested in designing web pages and converting those designs into HTML and CSS for a website
  • You do not need prior knowledge of Fireworks, HTML or CSS to take this course
  • Anyone interested in expanding their graphic design skills and capabilities

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Course Introduction and Downloadable Course Files

Download the course files to follow along as you work through each of the course lectures. These are the files for the entire course.

Introduction to the Course
Section 2: The Importance of Slicing
Learn about slicing and how and when to add slices to a PNG file.

The Slice tool allows you to draw slices within the PNG file to produce images and add JavaScript functionality. Learn more about this powerful tool.


This lesson tells you how to slice PNG files for final HTML and CSS output. Which technique is best very much depends on your output needs.

Section 3: HTML Export

In this session, you will create the sample file you need to learn more about the two methods of exporting a PNG file to HTML.


This video shows the most basic method for exporting a PNG file to HTML.


A PNG file is manually sliced and exported using the HTML and Images method to produce an HTML file.


Learn about the importance of naming manually created slices. The final HTML output is reviewed for our PNG File.


This video provides a brief overview of the HTML And Images export feature and the HTML output created by this method.

Section 4: CSS Export

Learn about the second method for exporting a PNG file, CSS And Images. Use this new method to produce web standards compliant HTML and CSS.


Learn about the importance of naming manually created slices. Here we will discuss how Fireworks handles slicing.


View the new export feature in Fireworks CS4, and how to export using this method. Also learn about the interdependence between the final output and the way the PNG file is set up.


Watch this video to learn about the importance of rectangles in a PNG file and naming conventions.


When it comes to exporting as CSS And Images, rectangles play a key role. Learn more about this concept.


Take a first glimpse at the new CSS And Images export feature in Fireworks CS4 in this video.

Section 5: Fireworks Extensions

Extensions add additional features to Fireworks. This video explains what an extension is.


This video introduces you to some interesting Fireworks extensions and where you can find them.


This lesson tells you how to use the Fireworks Extension Manager to install extensions.


The Lorem Ipsum extension for Fireworks is a very handy add-on. This video shows you where to find it and how to install it.

Section 6: Working with the Lorem Ipsum Extension

This video focuses on the various ways to add text to a PNG file. It also tells you why the Lorem Ipsum extension is so important for final output.


Create bulleted lists of text using the Lorem Ipsum extension and then export them using two different methods. Watch how!


This video provides an overview of the final output created by the Lorem Ipsum extension using the HTML And Images export method.


Tune in to this video to export the PNG file using the CSS And Images method of export to view the final output created by the Lorem Ipsum extension.

Section 7: Working With the The Common Library

This video presents the various items in the Common Library and how they are grouped within the panel.


Learn how to modify elements of the Common Library. This video explains the Symbol Properties panel in Fireworks.

Section 8: Building a Web Page in PNG Format

Take a sneak peek at the final PNG file that we'll build in this section for final export to HTML and CSS.


Learn how to add images to a PNG file by inserting a header image for our website complete with all layers needed for full editing capabilities in Fireworks.


This video discusses when to create images for text and how to make the decision to do so.


Our final web page features a search form to search the entire website. Learn how to have Fireworks create the HTML needed for a search form.


Learn how to create a navigation bar in Fireworks that is easy to maintain and editable without the need for images.


Fireworks has the ability to produce fully functional hyperlinks on export. Learn how to create such links in your PNG file.


In this lesson, we'll add the footer area to the web page.


Learn how to set up your web page and designate the content areas as needed within the PNG file.


Default text is added to the web page for design purposes. Learn how to add this text so it remains text and contains the correct HTML coding in the final PNG file.

Section 9: The Fireworks CS4 Export Features

Watch this video to export the PNG file to get an idea of the final output. Along the way, you'll be able to see any issues that might occur if the PNG file is not set up correctly prior to export.


Learn the details about the process final HTML and CSS production from PNG files is based on. Use these rules to prevent issues when exporting from Fireworks CS4.


It is always best to review your Fireworks file as you get closer to export. Learn how to look over your PNG file based on the Fireworks CS4 export rules.


Learn how to set up a PNG file to produce images for your HTML file on export.


It is important to preview the export process prior to the final export to prevent any issues. Learn how to review your PNG file to prevent errors during export.

Section 10: The 3 Slice Technique

Preview the 3 slice technique and learn when you should apply this technique to a PNG file.


Learn more about the 3 slice technique to create rounded corner images for your website that expand perfectly to fit the content within an image.


The navigation bar for our web page has rounded corners. Learn how to set up this technique so Fireworks can maintain those rounded corners in the final file.

Section 11: Optimizing Images

Learn about the Optimize panel and its importance for the final HTML page. Also view the various format options within the panel.


Learn more about optimizing JPEG images.


Learn more about optimizing GIF images.


Learn how to optimize your images within a PNG file to control the final image output.

Section 12: Preparing a PNG File for Export

Errors can occur when you export a PNG file to HTML and CSS. Learn what the most common error means and how to fix it.


Learn how to correctly set up your PNG file prior to exporting it to HTML and CSS.


View the final HTML and CSS output produced by Fireworks CS4 using the CSS And Images export feature.

Section 13: The Pages Panel

Learn the nuts and bolts of the Pages panel in this lesson.


Learn how to create a master page and use it to produce various other pages within a website.


Learn about the options you have when exporting a PNG file with multiple pages.


Fireworks CS4 boasts a substantial upgrade to the export feature, including the ability to produce web standards compliant HTML and CSS. This video briefly describes the benefits of the enhanced export feature and how a PNG file can be used to allow Fireworks to produce the final HTML and CSS for your website.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Candyce Mairs, Adobe Certified Instructor and Web Developer

Candyce Mairs is an Adobe Certified Instructor for Dreamweaver, Fireworks, ColdFusion and Acrobat. She is the Author of the Learn By Video series for multiple versions of Dreamweaver, and is the Tech Editor for the Adobe Dreamweaver CC Classroom in a Book.

Candyce has years of teaching experience through classroom, online and video courses. She uses a basic teaching approach, with each concept building upon the last. Incorporated into her teaching is learning common mistakes and how to correct them to speed the learning process.

Ready to start learning?
Take This Course