I’m going to show you my particular workflow for creating a web layout with Adobe Fireworks, and I’m also going to cover the selection tools. When I get started on a new project, I like to have as much open canvas space as possible. Yet it’s also important to keep what’s going to become your finished product at the correct size for the eventual export.

To get started, click File > New to open the New Document Window. Here is where you set the document size and background color. I’m going to leave the discussion on ideal width for a website for a different post, but for our purposes here we’ll be using a relatively wide fixed-width design. So set the width to 940 px, the height to 3000 px or so (think big canvas) and choose a white background color. Make sure your DPI is set to 72, and click ok.

With your new canvas, zoom into 100% using ctrl + and scroll up to the top of the page. Select the rectangle tool from the panel, and draw a rectangle of any height and color that covers the entire canvas (940px, no more and no less). If you need to adjust your rectangle’s size, you have lots of options. For now, just select the rectangle, then select the Scale tool from the tool panel and resize the rectangle as needed.

Now we need to make some more room to work with. Go to Modify > Canvas > Change Size. Change the width to 2000 PX, leave everything else untouched and click “ok”. Make sure your view is still centered on our rectangle.

Now click View > Rulers. Click and hold the mouse button down on the ruler to the left of our rectangle to drag out a guide. Place the guide on the left hand side of the rectangle. Make sure the guide is rubbing right up on the side of our box by zooming in on it with the zoom tool located in the tool panel (zoom back with ctrl+1).

Now just repeat this step for the guide on the right, and delete our handy rectangle. You can change the color of the guides by clicking View > Guides > Edit Guides. I find the green a little distracting sometimes, so go with something a little less noticeable. What you now have are guides centered on a giant canvas awaiting creative input. I’d suggest saving your work at this point, or download the Fireworks PNG file here (Right-click, save as).