Accessibility
 
Home > Products > Dreamweaver > Support > Working with Studio MX
Dreamweaver Icon Macromedia Dreamweaver Support Center - Working with Studio MX
Create page mock-ups to determine your site's look and feel

Now you'll begin creating the site mock-ups in FreeHand 10.

1 In FreeHand, create a new file by selecting File > New.
2 Save your document (File > Save As) as mockup.FH10. Remember to save your work often as you make changes to your document.
3 In the Tools panel, click the Rectangle tool and drag a long rectangle across the top of the page.

If you are unfamiliar with the FreeHand 10 Tools panel, and would like to practice using FreeHand tools before proceeding with this tutorial, consult the previous tutorial in this series, Wildlife Project 3: Sketching your site's navigation scheme.
4 Continue drawing rectangles on your page until you've created the layout depicted in the diagram below.

This layout mock-up is the "floorplan" you will later follow when you lay out your pages in Dreamweaver.
5 In the Tools panel, click the Pointer tool and select the large center rectangle. Then click the Fill color box and select black (000000) as the Fill color for the rectangle.

6 Next, click the Text tool in the Tools panel and click inside the black rectangle.

A text block with a text ruler on top of it appears.
Note: On the Macintosh, there will be no visible text block. Mac users will need to change the fill color for the rectangle to a lighter color temporarily so that they can see the text as they type.
7 Type the words The Wildlife Project inside the text block. If you are a PC user, you will see the text block expand as you type.

8 Hit return and type (Flash movie fade-in). Do not click outside of the text block after you finish typing as you did in the previous tutorial. If you do, you will lose site of the text, which is currently set to the default color black.
9 With the Text tool still selected, highlight the two lines of text you just typed. Then click the Fill color box on the Tools panel and select white (FFFFFF) for the fill color of the text.
10 Click once inside the text block to de-select the text. The text inside the text block should now appear gray.
Note: Mac users will see white text atop the temporary fill color they chose for the rectangle.
11 Next, open the Text inspector (Window > Inspectors > Text).
12 Highlight the second line of text, "(Flash movie fade-in)," and select 18 from the Font size pop-up menu.

13 Click once inside the text block to de-select the second line of text, then highlight both lines of text again.
14 Click the Center Text button to center the text.

15 Finally, click outside the text block to de-select it. Your text appears in white inside the black rectangle.
16 Click the Subselect tool in the Tools panel, select the text block, and drag the text block into position as shown.

Note: You can also use the Pointer tool to select the text block, but you must choose Edit > Select > None before doing so.
You can position the text block more precisely by using the arrow keys on your computer keyboard. The arrow keys will move the text block up, down, left, and right, one point at a time. For more information, see FreeHand Help (Help > Using FreeHand > Working with Objects > Moving Objects).
You now have all the skills you need to popluate your mock-up with different colors and text. Continue filling rectangles with text and color until you have a mock-up similar to the one pictured below. The tan color used for this tutorial has a hexadecimal value of 996633.

Note: When you alter the size of text using the Text inspector, you are not limited to the choices provided in the Font size pop-up menu. For example, in the Navigation Bar rectangle above, we selected News, Conferences, Education, Publications, Links, and Contact, and typed 12 as the font size in the window of the pop-up menu.

To Table of Contents Back to Previous document Forward to next document