Step 5a: Using Macromedia Fireworks to create a page header

We'll start by using a graphics editor to make a basic header to go on the top of the pages of your website.

Open Fireworks and you'll see the following:

This is our work area. Next from the menu select File New, a window will come up to prompt you for the canvas size and color. Choose 700 width by 100 pixels. For the color choose White, like below:

Next Choose OK. Next click on the Text Tool on the Tools Menu. It has a A on it:

Your cursor should change to two brackets. At the bottom of your window you will see the Properties toolbar. From here, you can change the font, font size and color. To keep things simple, lets use the font Tahoma size 16.

Now go back to the white area of your workspace, which is called the canvas and click one time and type in your business name on the left of the canvas. Next click on the Pointer Tool because we are finished with typing text.

Your canvas should look similar to this:

Notice how part of my business name is cut off and needs to be moved to the right? Simply click on the words one time with the mouse and click and hold to move it to where you want it. I moved my title here:

Next I want to add a logo or graphic on my header. If you need a business logo, visit our business logo template page. From the Menu select File, Import and navigate to where your logo resides on your computer. Once you have located your jpg. or .gif image, click Open. Next you will see a symbol that looks like this:
. Click anywhere on the canvas to add the graphic. Position the logo to where you want it by clicking it and moving it like you did the text. You might have to adjust your text as well.

My canvas now looks like this:

I think my title is too small. To enlarge it, simply click on the text and go to the Properties Toolbar and enlarge the size. Our size is a 16 so lets move it up to a 28. I'd also like to change the color from red to black.

My canvas now looks like this:

I'd like to put a border around my header. From the menu select Commands, Creative, Add Picture Frame. A window pops up and prompts you to choose a Pattern and a Frame Size. Select Blue Green and for the Frame Size, choose 3 and OK.

That looks pretty good to me. Go to the menu and select File, Save As and navigate to c:\website\source. Save it as header.png. It's a good idea to store your websites source files in a sources directory. Next you need to export your graphic header into your websites images folder. Go to the menu and select File, Export and navigate to C:\website\images. For the file name, type in header.gif.