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.
Slicing is an important technique when exporting PNG files to HTML And CSS. Learn when slices are needed, and how to slice files in Fireworks in order to produce images.
The Importance of Slicing
Learn about slicing and how and when to add slices to a PNG file.
Fireworks offers two methods for exporting a PNG file to HTML. This set of videos gives an overview of one of those methods, the HTML And Images export feature.
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.
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.
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.
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.
Fireworks CS4 features can be enhanced using extensions. This set of videos explains how to find, install and use the Fireworks Lorem Ipsum extension and why it's worth using.
Fireworks Extensions
Extensions add additional features to Fireworks. This video explains what an extension is.
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.
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.
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.
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.
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.
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.
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.
The navigation bar for our web page has rounded corners. Learn how to set up this technique so Fireworks can maintain rounded corners in the final 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.
Optimizing Images
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.
Android
Apple iPad
