Fireworks Web Workflow
2.6 (4 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.
68 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Fireworks Web Workflow to your Wishlist.

Add to Wishlist

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.
2.6 (4 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.
68 students enrolled
Created by Candyce Mairs
Last updated 9/2013
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 3.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
View Curriculum
  • 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

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!

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
Compare to Other Adobe Fireworks Courses
Curriculum For This Course
54 Lectures
Course Introduction and Downloadable Course Files
2 Lectures 05:02

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

Course Files for Download

The Importance of Slicing
3 Lectures 10:33
Learn about slicing and how and when to add slices to a PNG file.
What is Slicing?

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.

The Slice 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.

Preview 02:35
HTML Export
5 Lectures 25:08

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.

Creating a Sample File

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

HTML Export of the Sample File

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

Manually Slicing the Sample File

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

Preview 04:04

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

Overview of the HTML And Images Export Feature
CSS Export
6 Lectures 25:21

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.

CSS Slicing Using Fireworks CS4

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

Naming CSS Slices

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.

Exporting Using the CSS And Images Export Feature

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

Naming Rectangles

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

Preview 06:27

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

Overview of the CSS And Images Export Feature
Fireworks Extensions
4 Lectures 12:21

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

What is a Fireworks Extension?

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

Where Can I Find Fireworks Extensions?

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

Preview 04:45

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.

Installing the Lorem Ipsum Extension
Working with the Lorem Ipsum Extension
4 Lectures 14:42

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.

Adding Text Using the Lorem Ipsum Extension

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

Creating Bulleted Lists Using Lorem Ipsum

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

Creating HTML Code Using Lorem Ipsum

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.

Creating CSS Using Lorem Ipsum
Working With the The Common Library
2 Lectures 07:33

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

The Common Library

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

Preview 03:04
Building a Web Page in PNG Format
9 Lectures 32:37

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

Previewing the Final PNG File

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.

Inserting the Header Image

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

Adding the Company Name

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.

Adding the Search Feature

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

Adding the Navigation Rectangle

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

Preview 05:15

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

Adding the Footer

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

Adding the Content Area

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.

Adding Text to the Content Area
The Fireworks CS4 Export Features
5 Lectures 25:29

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.

Exporting the Homepage Using CSS 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.

The Fireworks CS4 Export Rules

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.

Reviewing the PNG File Before Exporting

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

Preview 05:19

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.

Exporting the PNG File for Review
The 3 Slice Technique
3 Lectures 08:40

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

What is the 3 Slice Technique?

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.

Preview 04:22

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.

Performing the 3 Slice Technique on the Navigation Bar
3 More Sections
About the Instructor
Candyce Mairs
2.6 Average rating
4 Reviews
72 Students
2 Courses
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.