Accessibility

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

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

Getting started with the sample project

If you haven't already, be sure to download the sample files provided on the first page of this article. The following sections include step-by-step instructions to create the interactive prototype. We'll start this project by opening the main prototype template PNG file that contains the existing wireframe for the project, so that we can focus on adding the interactivity and functionality to the prototype.

It is important to have a thorough understanding of the folder structure of the prototype. In this section we'll analyze the contents of the ZIP file to become familiar with the organization of the folders and files, and provide some insight into the strategy of maintaining modular code.

After you unzip the downloaded source file to a location on your hard drive, open the main prototype folder. In the main prototype folder, you'll see six folders and a list of HTML files:

  • bubble_S_A
  • bubble_S_B
  • bubble_S_C
  • flash
  • images
  • scripts

These folders and files will be used to create the sample prototype (see Figure 2).

Contents of the prototype folder

Figure 2. Contents of the prototype folder

The three bubble folders contain the image files for each individual bubble (or pop-up window) overlay that will be created later in this tutorial. This structure will make more sense when we cover that information. For now, just notice that each bubble HTML file has a corresponding images folder. (For example, the bubble_S_A folder contains the images for the Bubble_S_A.htm file.)

The source file for each bubble overlay can be found in the bubblePrototypeTemplate.png located in the Template Files folder. Editing the bubblePrototypeTemplate.png source file is outside the scope of this article, but the PNG file is provided so that you can review the Fireworks document if you'd like to see how it is set up.

The images folder contains all of the images for the main prototype and the flash folder contains the Flash SWF file that we will use to embed in the Fireworks document.

Finally, the scripts folder contains a series of JavaScript and CSS files that will be used to add functionality to the prototype. As we begin this project, the files in the scripts folder are blank except for the jQuery.js file. We'll add custom code to these files in the final sections of this article.

Page 2 of 12
Previous Page
Next Page