Accessibility

Fireworks Article

Creating a Layout with Fireworks MX 2004 and Dreamweaver MX 2004

Page 9 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

Importing and Editing Fireworks HTML in Dreamweaver

In the previous section, I had sliced the interface.png for you, and then you exported the file as Fireworks HTML. You will now edit the Fireworks HTML using Dreamweaver.

Create a New Site Definition

  1. Open Dreamweaver MX 2004.
  2. On the startup screen under the Create New column, select Dreamweaver Site….
  3. Select the Basic tab on the Site Definition dialog box.
  4. Name the site Interface and click Next.
  5. Select the radio button No, I do not want to use server technology and click Next.
  6. Select the radio button Edit local copies on my machine, then upload to server when ready. Browse to the folder where you created the folder called site and click Next.
  7. Set the How do you want to connect to your remote server? to Local/Network. Then, browse to the same site folder as you did in step 6 and click Next.
  8. Select the radio button No, do not enable check in and check out and click Next.
  9. You can review your site definition. If all looks well, click Done.

Your directory structure in Dreamweaver should look like Figure 41 below.

The Files panel showing the directory structure for the Dreamweaver site

Figure 41. The Files panel showing the directory structure for the Dreamweaver site

Warning!—Fireworks MX 2004 Only There is an issue in Fireworks MX 2004 that may export incomplete HTML tags when exporting with the option of “Nested Tables – No Spacers” as we have done in this article. If this happens to you, it will be necessary to perform the following steps to fix the error. The symptoms are borders around tables when previewing the HTML file, as well as, Table cell padding and borders show as “undefined” rather then “0” when viewing the code. See Figures 41a and 41b below.

When previewing in a browser the Fireworks MX 2004 HTML shows borders around tables due to the incomplete HTML.

Figure 41a. When previewing in a browser the Fireworks MX 2004 HTML shows borders around tables due to the incomplete HTML.

Code view of the incomplete HTML

Figure 41b. Code view of the incomplete HTML

To fix the invalid HTML, you will need to remove the “undefined” value from all related tags and replace with “0” (zero).

  1. In Dreamweaver go to the main menu and select Edit>Find and Replace
  2. In the Find and Replace dialogue box set the following properties as shown in figure 41c.

    3. Use these settings to remove the “undefined” text and replace with “0”.

    Figure 41c. Use these settings to remove the “undefined” text and replace with “0”

  3. Once you have entered the settings go ahead click the Replace All button.

The above 3 steps will fix the code that was exported from Fireworks MX 2004.

 

Page 9 of 13Previous PageNext Page