FreeHand

This tutorial illustrates how you can use Macromedia FreeHand MX to create preliminary sketches of your site's navigation scheme. The site navigation scheme is a map that shows how your web pages relate to one another. Specifically, it shows how users will travel through your site as they click links and interact with application interfaces. A site's navigation scheme is normally reflected in the navigation bars that are used on web pages.

This tutorial is the first in a series of tutorials that shows you how to build a dynamic website from start to finish with Macromedia Studio MX 2004. The complete set of tutorials is available in the Exploring Studio MX manual (www.macromedia.com/support/documentation/en/studio). It includes the following tutorials:

• Sketching a Site Navigation Scheme in FreeHand
• Creating a Table-based Page Layout in Dreamweaver
• Creating a Banner Graphic in Fireworks
• Building a Navigation Bar with Fireworks
• Building Rich Media with Fireworks and Flash
• Assembling and Editing Studio Assets
• Building a Database Search Feature

Planning the Site Navigation
After you determine your site's goals, target audience, and data requirements, you are ready to begin conceptualizing the site's navigation scheme. In this tutorial, you'll sketch the site navigation scheme for Trio Motors, a fictional company that sells energy-efficient automobiles.

Trio Motors has requested an easy-to-use navigation scheme that would allow their users to visit the company's showroom, see previews of upcoming releases, view a page for Trio automobile owners, and find information about news, events, and financial services. Trio Motors would also like the site to focus on a featured technology, and to provide a search application that lets users search for a Trio Motors dealer in their area of the country.

As the web developer for the Trio Motors website, you decide on a simple navigation scheme that will consist of five links, all centralized on a home page. At the top of the home page, you'll create a Macromedia Fireworks MX 2004 navigation bar that links to separate pages called Showroom, News and Events, Owners, Financial Services, and Previews. Elsewhere on the page, you'll create a link to a special page that provides current information about a featured technology. You'll also create a link to a results page that displays the results of the search application.

Customizing FreeHand for Multimedia/Web Output
FreeHand MX is a print-friendly and web-friendly, vector-based drawing application. Before you begin sketching your site navigation, you'll customize FreeHand for multimedia/web output. You'll also use RGB or Web Safe Colors throughout the tutorial by selecting colors from the Fill and Stroke Color pop-up menus. Web-safe color selection pop-up menus in FreeHand MX are identical to those in the other Macromedia Studio MX 2004 tools.

• In FreeHand, create a new file by selecting File > New.
• At the bottom of the Document window, select Pixels from the Units pop-up menu.

  Note: The default unit of measurement for a new document is Points.

• In the Property inspector (Window > Document), click the Document tab.
• Select Web from the Page Size pop-up menu.
• This creates a page with a predefined size of 550 pixels by 400 pixels. You can also select Custom from the Page Size pop-up menu, and enter pixel dimensions of your own.
• Select Edit > Preferences.
• The Preferences dialog box appears.
• Click the Colors tab and select None from the Color Management pop-up menu.
• Turning off Color Management allows you to view colors in a generic RGB environment.
• Click OK.
• (Optional) Select Fit Page from the Magnification pop-up menu in the lower left corner of the Document window.
• This option sets the magnification level so that the active page fits inside the Document window. You can also set magnification levels manually. The magnification with which you choose to work depends on your monitor size and your own preferences.
• Save the new document (File > Save) as trio_navigation.FH11.

If you are completing this tutorial as part of the Exploring Studio MX manual series, you can save the new file in the main directory of the Dreamweaver site you created in Chapter 6, "Setup for Sample ColdFusion Site." It is good practice to keep all site-related files in the same location. For more information, see the Exploring Studio MX manual.

Creating Rectangles for the Navigation Scheme
After you customize your document for the web, you are ready to sketch the site navigation scheme in FreeHand.

• Make sure that the file you just created, trio_navigation.FH11, is open in the Document window.
• In the Tools panel, click the Rectangle tool (see Figure 1) and drag a rectangle on the page.
• When you release the mouse button, the new rectangle is selected. Leave the rectangle selected so that you can alter its properties.
• Note: This tutorial uses the example of a rectangle that is 135 pixels wide by 52 pixels high. You can view and set the exact dimensions of a rectangle on the Object tab of the Property inspector (Window > Object).
• In the Tools panel, click the Fill color box and use the pop-up color palette (see Figure 2) to select a color for the inside of the rectangle. The example in this tutorial uses light blue (CCCCFF) for the rectangle's fill.
• With the rectangle still selected, click the Stroke color box, and use the pop-up color palette to select a color for the outline of the rectangle. The Stroke color box is above the Fill color box in the Tools panel. The example uses a darker blue (000033) for the rectangle's stroke.
• Save your document (File > Save). Remember to save your work often as you make changes.
• In the Tools panel, click the Text tool (see Figure 3) and click once inside the rectangle.
• A text block appears inside the rectangle with a text ruler on top of it.
• On the Object tab of the Property inspector (Window > Object), do the following:
  Select Arial from the Font pop-up menu.
  Select Plain from the Style pop-up menu.
  Select 18 from the Font Size pop-up menu.
  Click the Align Center button
• In the Tools panel, click the Fill color box and select a fill color for the text. The example uses 000033, the same color as the outline of the rectangle.
• Type the word Home inside the rectangle.
• Click outside the text block to deselect it.
• Select both the rectangle and the text block by selecting Edit > Select > Select All.
• On the Align tab of the Align and Transform panel (Window > Align), select Align center from the Horizontal and Vertical pop-up menus, and click Apply.
• The text aligns vertically and horizontally in the center of the rectangle.
• With the rectangle and text block still selected, select Modify > Group.
• The rectangle and text block become a grouped object.
• Select Edit > Clone.
• A duplicate copy of the grouped object appears on top of the original rectangle.

  Note: The Clone feature is also available in Fireworks MX 2004.

• Drag the duplicate copy of the object below the original rectangle, as shown.
• Continue to clone and drag the original grouped object until you have eight objects on the page. Use the Pointer tool to arrange your rectangles as follows:

You can also use the arrow keys on your computer keyboard to position the rectangles more precisely. The arrow keys move objects up, down, left, or right, one pixel at a time.

Changing Rectangle Text
Next, you'll change the text of your rectangles to describe the various pages of the website.

• In the Tools panel, click the Subselect tool.
• Click the word Home in the second rectangle (below the first rectangle on the page) to select the text block.
• In the Tools panel, click the Text tool (see Figure 4).
• Select the text in the selected text block by holding down the mouse button as you drag over the word Home.
• Type the word Showroom.
• Click on a blank area of the document to deselect the text block.
• Repeat steps 1 through 6 for the remaining rectangles, using the following text: News and Events, Owners, Financial Services, Previews, Featured Technology, and Search.
• For longer text content, such as "Financial Services," press Enter (Windows) or Return (Macintosh) after the first word and type the next word on the second line. Shift-click the text block and the rectangle using the Subselect tool. Then realign the text in the center of the rectangle by selecting Align center from the Horizontal and Vertical pop-up menus in the Align and Transform panel (Window > Align) (see Figure 6).