Creating a background, header and footer using Adobe Fireworks

Check out my website The MaStudios

When creating a background, header and footer, you need to decide how your website will flow and your color schemes. This should be the first step in your journey in creating a functional website. There are endless possibilities, here is a page showing some on the current trends and inspiration.

First decide on a page size, I like to use 1260x590 because it fits the whole screen and gives me the most room. Some people like to use smaller pages and then center them in Dreamweaver. Choice is yours.

Select File and then New, put in the dimensions and select ok.

Using the Rectangle tool, start from the top left corner, create a box covering the whole white space area and use the paint bucket tool to change the color to you liking. This will be the background. These three steps will all involve the rectangle tool and it is ok if the rectangles hang over the page a little bit.

Once you have that, you will need a basic header that cite your title, your icon, what makes your site yours. Using the rectangle tool again, start from the top left corner and create a box going accross the top on the page and change the color for contrast purposes.

A seperate footer is becoming more and more rare today. Todays trends either put there footer on the bottom of the page that is intergrated into the background or done away with all together. For this tutorial I will make a seperate one for understanding. Start up the rectangle tool once again and do the same thing you did making the header except, start from the bottom right corner and go up towards the left. Depending on the content you wish to put in the footer you may want it bigger or smaller. Change the color once this is done.

Now you can add the title of your page and the content of you footer. Using the text tool will enable you to do this. Adobe makes this tool very easy and self-explanatory, just play around with the fonts, sizes and colors it takes time.

Move on to the next step, or head back to the main portal.