Welcome to Part 5 of the Building a website with Web Premium CS4 tutorial series. In this part, I'll show you how to take a static image document and convert it into the HTML/CSS code that will comprise the final web page. More specifically, you'll complete the following tasks:

• Bring the Photoshop comp that you evaluated in Part 4 into Fireworks CS4 and save it as a separate PNG file.
• Define regions (slices) that will be exported as separate image files.
• Prepare the Fireworks document for export as a CSS layout with relative positioning.
• Export the prepared document as an HTML file complete with CSS positioning code.

Note: If you've just arrived at this section, you may want to go to Part 1 and start following along from the beginning. Or if you prefer, you can download the sample files provided below and start following the instructions that are outlined here. However, the steps in this tutorial assume that you've installed the web server and application server as described in Part 2, and defined a Dreamweaver site pointing to the directory on your hard disk where the local site files will be stored.

Requirements

In order to make the most of this article, you'll need the following software and files:

Fireworks CS4

• Try
• Buy

Sample files:

• adventuretours_pt_5_starter.zip (ZIP, 2.4 MB)
• adventuretours_pt_5_solution.zip (ZIP, 1.5 MB)

Prerequisite knowledge

Basic familiarity working with Fireworks is recommended. Some experience working with graphic editing programs in general is also helpful.

Building a website with Adobe Creative Suite 4 Web Premium

For your reference, here are all the parts in this series:

Introduction
Part 1: Planning the website
Part 2: Creating a local site
Part 3: Creating a remote site
Part 4: Creating a visual design
Part 5: Slicing and exporting site assets with Fireworks
Part 6: Adding styles to finalize the page design
Part 7: Finalizing and reviewing the home page
Part 8: Creating a database
Part 9: Presenting dynamic data
Part 10: Adding Ajax functionality with Spry
Part 11: Creating an interactive web form
Part 12: Creating and presenting a Flash animation
Part 13: Adding video to the website
Part 14: Creating a blog with InContext Editing

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

Page 1 of 4

Next Page

About the author