The next step will be to set up our header with a tab menu a search box and a header image. With these three parts you will be able to be make a somewhat dynamic header, so it can be seen more and not blended within the website and be lost or hard to find within the website. You have to remember the website is for other people and not for you, so you have to make it as user friendly as possible.

Now with the Text with in the image you could say that this could use be used for important updates, or a slogan or two, with this your actual images will be a bit smaller in size (KB) and it will load faster as well. Which of course is a good thing since you want people who use dial up to be able to see it with in a few seconds after entering your site in their browser.

Step 2.

Before we start with the tab menu and the search box we will put our image in first just to give a general idea where everything else will be once we adjusted everything. So go ahead and design a dummy image so you will know what it will look like after you adjust it so it fits properly. Then when your done coding the header you can design your final image to be put inside the website.

First we will insert our image in the following code With this set up:



As you see our header will be in the background so when we put in our floating text our design won't break out and be jumbled up.

NOTE: With the header you can design it however you want just make sure to pay attention to what you edit so not to break the design.

So in your css file put the image code under your header code like so:



Now go to your html file and put in the following within your header div:



So your header code in the html file should look like this:



Step 3.

Now we are going to add in a tab nav into are header, the program that I use which is free is called
CSS Tab Designer..

NOTE: You do not need to use this software their are plenty of css sites that tell you how to design a nav system.

The tab menu code I will be using is Tab Menu 1 since the blue coloring matches with the rest of the site. So once you generated the code in the CSS Tab Designer, save it because the tab menu uses images. So once you saved it and move the image files over and then copy and paste the tab css code right under the image code you just placed there.

So now your CSS File should look like this



Next copy and paste the html code for the website (it will look like this)



Then place your tab code on top of the image div you just place in earlier. don't worry we will adjust everything that needs to be adjusted once we finish up.

Step #4.
Next we will set up our container for the search box so when we put in the actually html for the search box we can adjust the css to fit in nice and proper like.

Ok first for the CSS container.



We will place the code on top of the tab menu which of course will be under the image css code.

Next for the html


you will place this right under the tab menu since it is right along the lines of being on top of the image itself. As you notice the container breaks the header just a bit so it's adjustment time now. So after adjusting your css file your css file should look like this.



Since we are the in the css kind of mood how about we add some style to the search box.



You will add that code under the search bar container so as to keep the css code a bit organized. Also you might have notice that your image might have adjusted so adjust as need be.in your forum just change the input class id's that follow the css and your set.

Step 5.

For the most Part I got this idea from another template designer that I somewhat know, emailed him from time to time about suggestions. Anyways we are now going to add text container within the image header.

for the CSS you will copy and paste this


With this you can put in some text in which it won't mess up the image and also keep you from changing the image every time you want to mention a big Update or something like that.

Now for the HTML that will be needed to set up the container.



You will place the html within the image div like so.




Ok so after making many adjustments here and there in the header is complete. Of course you could add anything else to it if you want. If you want you could add in a divider bar to put in a small gap between your header and your content like so.



You will place this right under the image css so you can adjust both of them quickly if you need to. Then to show the border just place this right under the </div> for the image div. Like so:



Then that’s it for the header. Of course with all this done it will be time to adjust accordingly and go through our first css validation and optimizing for this tutorial. So go to the following site to get your css optimized. So whats up with these tool? Simple, if you optimize your coding (removing of extra tags, white space) and validate (making sure your using the right tag structure), not only will your site look good but it will load nice and fast. We are talking fast for dial up users, basically meaning that it would load like someone using a cable modem on a 56k account. However you still want your site to load fast reguardless of what kind of connection you the web designer has. In which case I bring you to this website [url=http://www.websiteoptimization.com/services/analyze/index.html]Website Optimization With online tool you will be able to tell how fast your site loads up and some other instresting info. Of course you need to have the website loaded, although I would provide one, it is best that you set up your own website account so as to learn about the tools better.

Ok so first we are going to optimize are CSS so click on the following link.

http://www.cleancss.com/

Then we will go to W3c CSS validator and see what errors come up

CSS Validator

Now if you have any errors (their was a few when I did it) you would want to correct them and then validate again. If you notice you would see a list of warnings although they won't hurt your overall design fixing them would help the css be more efficient. Of course We will do all major Optimization near the end of the Tutorial. So at this point in the tutorial we are done with the header. But before you close down your editing software make sure your design doesn't break from the optimization and validation. It happens sometimes so double check to make sure. So at this point the css is validated to some extent that you have no major errors, so the next thing to do is optimize your html and validate it as well.


Lucky us we don't have much to optimize and validate so you should have very few errors. Ok so now this is what our CSS File and html should look like if you followed this tutorial in a somewhat loose fashion for the basic Idea.

CSS



HTML


In hte next part of the Tutorial we will work on the footer and spice it up a bit with some css and some other good stuff, which will also css.

 

 

 

Reply

Absoultly brillant. Amzing, couldn't of done better myself.

Reply

Great tutorial you made here mate, altrough I've been learning to script CSS a lot lately it's just hard to get everything under control.. Tutorials like this help a lot to learn

Reply

Hey if anyone puts this to the test I would love to see it in action. Awsome scripts there Saint Michael.

Reply