Create a navigation sidebar area

Next, you decide to create a rectangle to define the navigation sidebar for the web page.

Select the Rectangle tool in the Vector section of the Tools panel.

Position the cross-hair pointer in the rounded rectangle you drew earlier and drag downward and to the right to create a vertical rectangle for the sidebar.

You can draw the rectangle anywhere on the canvas. You'll resize and position it later.

When you release the mouse button, a rectangle appears, selected, in the area you defined.

Next, you need to give the rectangle an orange fill.

With the rectangle still selected, in the Property inspector, click the Fill Color box next to the bucket icon.

The Fill Color pop-up window appears.

Type A3210A in the text box at the top of the window, and then press Enter.

Click the Stroke Color box next to the pencil icon, and then click the Transparent button at the top of the Stroke Color pop-up window.

The rectangle now has an orange fill and no stroke.

Next, you need to resize and position the rounded rectangle. You decide to do this precisely with the Property inspector.

With the rectangle still selected, in the Property inspector, type 140 in the width box (W), type 295 in the height box (H), type 0 for the X position, type 278 for the Y position, and then press Enter to apply the last value.

NOTE

The Y position is only an approximation. You can use the arrow keys to nudge the rounded rectangle up or down until it is centered vertically with the rounded rectangle you drew earlier. The difference in height between the two objects is 45 pixels, so the top of the orange rectangle should be 22 or 23 pixels below the top of the dark red rounded rectangle.

Save your work.

Comments

lofo said on Sep 27, 2005 at 8:07 PM :

In the first tutorial on creating a mock-homepage, under the section titled "create a navigation sidebar area" step 1(at top), we are told to create a rectangle and later in the same section, last steps, the rectangle is referred to as a rounded-rectangle. You need to mention that it is a rounded-rectangle in step one (if indeed it is).

mjriding said on Feb 13, 2006 at 8:46 PM :

you also should mention that to get the "Stroke Color box next to the pencil icon" you need to click the pencil icon on the left side of the page.

Current page: http://livedocs.adobe.com/fireworks/8/fwhelp/gs_03_10.htm