Accessibility

Fireworks Article

Creating a Layout with Fireworks MX 2004 and Dreamweaver MX 2004

Page 1 of 13Previous PageNext Page

Joey Durham

Joey Durham

www.ultraweaver.com
www.geekforum.com
www.teamworksmedia.com

 

Table of Contents

  1. Introduction

Creating the Ultraweaver Design

  1. Creating the Ultraweaver Design
  2. Creating the Shape Outline
  3. Adding Content Areas
  4. Fills and Effects - Adding Shadow and Color Fill
  5. Fills and Effects - Adding the Glass Effects

Slicing and Exporting Fireworks HTML

  1. Slicing
  2. Exporting Fireworks HTML

Importing and Editing Fireworks HTML in Dreamweaver

  1. Create a new Site definition
  2. Creating a new HTML page and importing the Fireworks HTML
  3. Removing sliced images
  4. Removing Nested Tables
  5. Tiling Images

This article does not focus on new features of Macromedia Fireworks MX 2004 or Macromedia Dreamweaver MX 2004. It is an example of how both products together offer a powerful solution when designing and programming websites quickly.

The article will take you through the process of designing a web layout from beginning to end using Fireworks MX 2004 and Dreamweaver MX 2004. Even though the article is based on the new versions of both products, you should have no problem using this article with Fireworks MX and Dreamweaver MX.

The example layout in this article is Ultraweaver.com. I wanted to use this as an example to show how you can create a site, but I also wanted to show how complex you can get with designing in Fireworks. In my opinion, Fireworks is more than a button, navbar, and photo editor. You can create full layouts in Fireworks that you can export as HTML or even CSS.

Because I wanted to use Ultraweaver.com as the example and I am not doing a "traditional style" web layout, I have also included sample projects in the source files that reflect a more traditional style layouts.You can also download the sample files from the beginning of this article. You can apply the same process discussed in this article to the traditional style examples.

Before you begin, it is important that you are already familiar with the Fireworks and Dreamweaver tool sets. You should also have a basic knowledge of HTML. With that said, let's get started.

Requirements

To complete this tutorial you will need to install the following software and files:

Fireworks MX 2004

Dreamweaver MX 2004


Tutorials and sample files:

Page 1 of 13Previous PageNext Page

About the author

Joey Durham is a Senior Designer at Chicago-based TeamWorks Media .  Durham , a Team Macromedia member, is also a Fireworks and Dreamweaver enthusiast and has written several tutorials on these products.  Additionally, he hosts an exchange for Fireworks PNG source files at www.ultraweaver.com . His most recent personal project, www.geekforum.com , is a resource for both designers and developers who are looking for inspiration and/or technical knowledge. In the rare moments when Durham is not working, he spends his free time with his wife Erika and daughter Olivia. Joey resides in Indianapolis,Indiana.