Accessibility

Fireworks Article

Creating a Layout with Fireworks MX 2004 and Dreamweaver MX 2004

Page 2 of 13Previous PageNext Page

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

Creating the Ultraweaver Design

When designing web pages in Fireworks, you need to keep a few things in mind.

  1. You do not want to rely on Fireworks solely for HTML web page creation. Fireworks is a tool that can export HTML, but is not meant as a web page creation tool on its own.
  2. You want to be flexible enough in your design that you are not creating huge graphic files or a design that limits you on how much content you can place within it. A technique developers and designers often use is to create tiled images to expand/contract your designs. I discuss this process further in the Slicing section later in this article.

Before starting any project, you should have a pretty good idea of what you want to create. You may want to sketch out your idea on paper or in Fireworks. In the case of Ultraweaver, I wanted a layout that was similar to a handheld device. I started by shaping the outline in Fireworks. Once I had a shape, I started adding effects and gradients to give the shape outline some depth. You can view the completed interface by opening the interface.png file in the source files downloadable from the beginning of this article. This will let you poke around and use the file as a reference if you run into any trouble.

Let's start by creating the shape outline as shown in the Figure 1 below.

The body shape outline

Figure 1. The body shape outline

Create a new document in Fireworks MX 2004.

  1. Go to the main menu and select File > New. The New Document dialog box appears. Insert the following values:
    • Width: 630 Pixels
    • Height: 330 Pixels
    • Resolution: 72
    • Set the Canvas color to Custom and enter a value of #ECE9D8
    • Click OK
  2. Go to the menu again and select File > Save and name the document myinterface.png.
Page 2 of 13Previous PageNext Page