Fireworks CS4 offers new features for exporting from a PNG file to produce standards compliant HTML and CSS files. This course walks you through 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 to create your HTML and CSS files.
Introduction to the Fireworks CS4 Web Workflow Course
This is a brief introduction to the course and what it covers.
Fireworks CS4 offers a new PNG export feature that produces standards compliant HTML and CSS from a PNG file. This group of videos explains the new export functionality using the CSS And Images option.
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.
In this section, we'll build a complete homepage for our website, featuring images, HTML form elements, header and footer areas, and a navigation bar. We'll also add CSS controlled hyperlinks, text and paragraph text on export.
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.
It is important to understand how Fireworks interprets your PNG file on export. This set of videos discusses the do's and don'ts of setting up your PNG file for proper export, providing guidelines to follow to prevent export issues.
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.
Become familiar with the Fireworks export process, and the rules you must follow to prepare your png file for export to final HTML and CSS. Use these rules to prevent issues when exporting from Fireworks CS4.
The 3 slice technique can be used to create images for your website that expand to fit the content within a specific area of the web page. This technique is ideal when you want your images to have rounded corners. This group of videos demonstrates how to use the 3 slice technique to produce a rounded corner navigation bar.
The 3 Slice Technique
Preview the 3 slice technique and learn when you should apply this technique to a PNG file.
It is important that you optimize web page images to reduce page load time. Learn about how to optimize various image formats, including a brief overview of the differences between GIF and JPEG formats, and how to use the Optimize panel to get your images web-ready.
Learn about the Optimize panel and its importance in the final HTML page. Also view the various format options within the panel.
The new export features in Fireworks CS4 allow designers to produce HTML and CSS files to simplify the process of moving from design to HTML output. Learn about how to correctly set up your PNG file so you can control the final output. Also learn about common errors, what they mean, and how to fix them.
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.
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.