Header ideas

Headers, or banners is the thing many people have trouble with. There is no substitute for graphic design ability, good software, and plenty of experience. However, you can do a pretty reasonable job with free software, and an eye for what looks good.

This is NOT a tutorial on how to use a graphics program. It deals with the technical aspects of getting a header that will work with an extensible layout. If you get stuck, or feel your graphic abilities are not up to doing something like this, then either myself or a another designer can create a header for you. So do check out our design page if you think you may need help.

The default template header setup

Take a look at the image below. That is the default header setup, and you can see how images will "move" as the template increases/decreases in size.

The background color is set to green, so you can see what's happening. #1 and #2 are the images or text for the header. You would want to keep the combined width of these to around 750px. That will allow the template to contract enough for those viewing with an 800x600px monitor. there really isn't any need to consider smaller resolutions than that. Your aim is to get a good viewing experience for the vast majority of viewers.

By making the header the same color as the background of the header cells (in the image, that's green) then the parts of the header can appear as a single image. You could take this a step further, and put in a and extra table data tag on the right side, and have a three part header. See below. Remember to keep the combined width of all images to around 750px or less.

The code on your page needs to be changed a little. With the default setup, it will look something like this.

To get the third cell on the right, it's just a matter of adding in a new table data tag, and removing the colspan attribute.

So that's the default header setup, now to look at something totally different.

Case Study. Getting a header to span full width

How the header as a background image works

I designed a full width header slightly longer than the maximum width of the page. So the header is 1051px long. Height doesn't matter. the main thing to keep in mind is I want it to look right at 800px, 1024px, and larger. Below is a reduced version of the header I came up with.

If the page contracts to 800px wide, then only the first 800px of the header will be visible. So the actual header DOESN'T contract at all. The page contracts around it, instead. The overflow remains hidden. So when designing a header, keep in mind that you need to keep all important information within the first 750px or so. Everything past that is non essential....it looks good and adds balance to the header, but if it's not visible then the header will still look fine.

Look at the images below to see the effect, then I will show you what (minor) additions you need to make to your page and stylesheet to do this yourself.

Here is the header seen with my resolution set to 1280px. Someone with 1024px would see almost the same thing, but with a few pixels missing from the right side of the header.

Here is the page shown at 800x600px resolution. Notice that you don't see all of the header now? But it still looks balanced. I have made sure that the text is not going to get cut off, and it really doesn't matter about losing the right side image.

Changes to the stylesheet.

The first thing to do, is create a new folder named images. This should be in your template folder, along with the image-files and support-files folders. This folder is used to store your header (you can also use it for any other images called from the sylesheet). Now that you have your new header in that folder, go to your html page, and delete the table data tags for the left side cell, and anything contained inside that. Then change your colspan="2" to colspan="3" in the main header area.

This now gives you a single cell, stretching the full width of the template, but with nothing in it yet. Open your main stylesheet and find the class for the header.

td.headerbg {
background-color:#fff;
background-image: url(../images/header.jpg);
background-repeat: no repeat;
}

Now preview you page, and you will see.......nothing! That's because there is nothing to keep the cell at the height we need to display the background image, it has collpased. So if your header is say 150px high, then add height="150" to the table data tag. The header will now appear.

One last thing. See that I have put the image URL as ../images/header.jpg. If you follow that format with the two ellipses and backslash, you will be able to preview images called from the stylesheet before you upload your page to SBI. The stylesheet will continue working like this once you re-upload it, so no need to change that to your full URL. Make sure you upload your header to the GRAPHICS library. That is because we will now be using the images folder, and NOT the image-files folder to store our new header on the SBI servers.

Check out the next part of the header tutorial, where I will go into the actual mechanics of creating a header, using Paint.net (a free graphics editor).