In this tutorial you will learn how to create a simple header for your website, this header will fit 100% to the screen width of your computer screen, although the steps and outcome are fairly basic/simple in this tutorial it is important to get it right because sometimes it can go wrong, not only if the graphics are correct but also the coding.
So in this tutorial i will go through creating the images for your header, and also the code to make your header fit 100% to the screen width.
Step1: The first step is very simple, create a new document in Adobe Photoshop/7.0/CS both are the same. Set the width to 400Pixels, and the height to 90Pixels.
Step2: The styles we are going to be using in this header tutorial will be gradient overlays. Select the marque tool in the toolbox to the left of your screen, and make a selection accross all of the new document currently open. When you have done this, simple go to Layer > New > Layer. And call this header1. Set the background to white. And you should have the same in the graphic shown below:
Step3: We are now going to add the gradient overlay to our new layer. Simple go to Layer > Layer style > Gradient overlay, And you should have a box as shown below with the settings of the overlay its self.
Click on the arrow facing down on the gradient section (Where it shows a back>white gradient colour) Then a dialog will pop up with the avaliable colour schemes you can choose from.
You can choose any colour you wish, although i have gone for a light shaded blue for this tutorial as shown below:
Now Simply add your text to the header, aligning it to the top left hand corner, with your slogan aligned to the left also, but underneath your main text, although the slogan is not nessecary. Below is a screenshot of my text.
Step5: Now save this file as header1.gif or .JPEG formart it does not really matter, although .GIF format tend to be better better quality images although they are larger in size.
The next step is even easier, simply select a small amount of the image with the marquee tool, as shown below , and then go to edit > copy merged.
When you have copy merged the selection create a new document and paste the selection, then save the image as header2.GIF/JPEG
There you go, you now have the to images to your header. The next few steps are important.
Step4: Open dreamweaver or your default web page editor. and create a new table, Make this table 100% width, 0 for cellspacing, 0 for cell padding, and 0 for table border, rows: 1 and columns:2 . If you want the code it is avaliable for you below:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
When you have created the table, insert the header1.GIF image into the first column, and then select the second column, and set the bg to the file header2.GIF.
Your almost finished! your next step is to add this simple code below into the body section of your webpage, this will then allow your header/navigation. to fit 100% to the users screen. By eliminating the margins to the left bottom and right. Below is the code:
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0"></body>
Congratulations, you have successfully finished this tutorial, below is the link to a sample outcome of this tutorial. I have added another feature which is google addsence into the second column.
Please click here to view the outcome
