• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Part: 1 Fireworks PROJECT 1 > Designing a Page Interface

Lesson 2. Designing a Page Interface

Web pages are often composed of multiple elements, such as logos, navigation systems, text, images, multimedia, and forms. Thanks to its vector tools, layers, guides, and rulers, Macromedia Fireworks is a great tool for entire page layouts. Often designers attempt to design page layouts in Dreamweaver. While nothing is wrong with using Dreamweaver for page layout, often the intrinsic limitation of standard HTML code hinders design decisions and experimentation.

Fireworks is a natural alternative for designing layouts. Fireworks' vector content is always editable, so you are never trapped with a decision or experiment gone wrong. Also, since every graphic element sits on the canvas independent of all other objects, it is easy to arrange and rearrange content quickly and precisely. Creating quick variations on a theme for a picky client couldn't be easier. Throw in Fireworks' robust optimization interface and diverse HTML export features, and it is clear that it is an ideal environment in which to create page layouts.

In the course of this lesson, you will develop a whole-page interface design for the Jade Valley Web site (left) as well as one of the buttons for the navigation system (right).

Designing the whole page layout in Fireworks implies a certain workflow. You start by designing the entire Web page by assembling different elements in a Fireworks document. Next you slice the page into individual pieces: banner, navigation, main content area, and so on. Then you optimize each piece to achieve the twin goals of high-quality appearance and low file size. Finally, you export the page and all its parts, to reassemble in Dreamweaver.

In this lesson, you'll begin this process, though you won't complete the process until Lesson 4, Preparing a New Site. You'll develop a whole-page design in Fireworks complete with a logo, a navigation system, a banner, a main content area, an additional navigation aid, and footer area. You'll also design a slicing scheme, in preparation for the optimization and export processes, which are covered in the lessons that follow.


In this lesson, you will:

  • Design a whole page layout in Fireworks

  • Use the Button Symbol editor to develop and program button states

  • Work with the Library

  • Understand hotspots and slices

  • Develop a slicing scheme

  • Make the page accessible to visitors using screen readers


This lesson takes approximately 90 minutes to complete.


Starting Files:





Completed Files:








Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint