You now need to make the top and side lines of the curved box invisible. Now you have converted the rectangle to a neat curve.

Step 3: To adjust the curve, just click the point just created and adjust the curve by clicking and dragging either of the curve handles.

The curve handles of the point will appear.

Step 2: Using the Pen Tool place a point on the bottom line of the rectangle (approximate center) and without releasing the point drag your mouse (click+drag).

While selecting the point Fireworks CS4+ might tell you that the object is going to be ungrouped, click ok.

Step 1: Select the rectangle and sub-select one of its points using the Subselection Tool.

Look at the example below, you will see how you can step-by-step create a uniform curve.

Now you are going to convert the rectangle to a neat curve using the Subselection Tool and the Pen Tool.

Set the Stroke Category to Pixel Soft (Pencil > 1-Pixel Soft) and the Tip size to 4 pixels. The Stroke colors and Fill colors are displayed under Colors on the left hand side of the tool bar (or in the properties panel).

Now select the rectangle set Stroke color as #CC3366 and Fill color as #56003D.

Create a curve for the header: Using the Rectangle Tool which is displayed under Vector on the left hand side of the tool bar (Window > Tools) - draw a rectangle with the dimensions of 900x139 (width: 900 and height: 139).

We are going to design the header part of the design (purple curve with the site name “ ”). New Document window Settings: Fireworks CS4 Screenshot (Similar interface for Fireworks CS4+) Designing the Header Part Click the ok button and your document window will appear. To do this open Adobe Fireworks CS4+, select File > New (Ctrl+N), the 'New Document' properties window will pop-up (see image below), where you need to enter the Canvas Size as Width: 900 pixels, Height: 550 pixels, Resolution: 72 pixels/inch and the Canvas Color to be white. To start with you need to create a new document in Adobe Fireworks CS4+ with the dimensions of 900 x 550 pixels. You Are Here ::: Home > Free Tutorials > Website design with Dreamweaver CS4+ & Fireworks CS4+ > Site Layout Design Step 2A: Design your website header and footer with Fireworks CS4+

In this chapter we will cover Step A of the layout design process - designing your website header and footer.

Place photos and content into your website design.

Design your website background and navigation.

As part of our free CSS website design guide this tutorial teaches you how to design the smart website layout on your right. To create your own website with Dreamweaver CS4+ and Fireworks CS4+ you need to first create your web page design using Fireworks CS4+. Adobe Fireworks CS4+ Website Design Design your website layout with Adobe Fireworks CS4+

Adobe dreamweaver cs5 logo