Accessibility
Mariano Ferrario

Mariano Ferrario

Fluid, Inc.

David Hogue

David Hogue, Ph.D.

Fluid, Inc.

Table of Contents

  1. Introduction
  2. Getting started with
    the sample project
  3. Adding HTML to a Fireworks document to display Google maps
  4. Embedding a SWF slide show
  5. Incorporating HTML, CSS, and JavaScript in a master page
  6. Creating a search box in
    the prototype
  7. Setting up the search results page to display the search query
  8. Customizing a JavaScript
    toggle function
  9. Using DIV tags to structure the search results pop-up windows
  10. Loading external HTML files
  11. Positioning page elements with CSS
  12. Adding custom JavaScript to hotspots to create interactivity
Created:
6 April 2009
User Level:
All
Products:
Fireworks
Dreamweaver

Rapid interactive prototyping with HTML, CSS, and JavaScript using Fireworks and Dreamweaver CS4

This article describes how to add HTML, CSS, and JavaScript to Fireworks documents to create enhanced functionality in the HTML pages that you export. These HTML pages are then used to facilitate rapid prototyping and usability testing.

This sample project is presented in several sections. We'll begin by describing how to add simple HTML code directly within a Fireworks document to embed a Google Map interface using an iframe. We'll also discuss how to embed a custom Flash SWF slide show into Fireworks pages. These two sections are especially helpful if you do not have prior programming experience but wish to add simple functionality to wireframes and design comps to simulate the intended functionality and interactivity in a product prototype.

The section, "Incorporating HTML, CSS, and JavaScript in a master page," builds upon these techniques and the following sections extend the project by moving the HTML and JavaScript code outside of the Fireworks document. We'll link the HTML to external CSS style sheets and JavaScript files. We'll also leverage the code included in the jQuery JavaScript Library. The instructions cover how to create an HTML overlay (a "quick view" pop-up window that is displayed when the user rolls their mouse over a product image) on a search results page. The main goal of the remaining sections in this article is to build a richly interactive prototype that is easy to manage and update by using a modular approach to design, manage, and organize files. The emphasis on modularity is essential; if you take the time to set up your prototype files correctly, your workflow will be much more efficient and productive.

This project is based on a fictitious website called Dave's Dog Wash (see Figure 1).

Prototype of the Dave's Dog Wash website

Figure 1. Prototype of the Dave's Dog Wash website

Requirements

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

Fireworks CS4

Dreamweaver CS4

Sample files:

Prerequisite knowledge

Basic familiarity working with Fireworks is required. Some prior experience working with Dreamweaver is also recommended.

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

Page 1 of 12
Next Page

About the authors

Mariano Ferrario is a senior interaction designer responsible for managing, concept development, and designing innovative interactive experiences for digital media projects at Fluid, Inc. in San Francisco. He applies a blend of entrepreneur zeal, understanding of business goals and objectives, web development experience, and passion for a human-centric design approach to design sites that are functional, desirable, and economically and technically feasible.

David Hogue is the director of information design and usability at Fluid, Inc., a digital design and development firm in San Francisco specializing in e-commerce websites and RIAs. He uses his training in applied psychology and cognitive science to study how people learn and work in the digital world, and develops workflow models and user interfaces that meet their needs and expectations effectively and efficiently. David has worked on projects for a diverse range of clients including Charles Schwab, Warner Bros., The North Face, Reebok, and Timberland.