Alex Seymour

The layout of web pages is likely to change almost every time you make one so there's plenty of ways on how to lay pages out it's pretty much up to you to use a way you're comfortable with really.
 
As for your navigation bar it's common practice to put the links into a list and style it from there. A really simple bare-bones way might be

<ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> </ul>
 

a {display: block; float: left; width: 150px;} ul {list-style: none;}
 
You could also do something like this if you wanted

<div id="nav"> <a href="">Link 1</a> <a href="">Link 2</a> </div>
The CSS for this method is pretty much the same just change a to "#nav" and get rid of the ul rule.
 
If you're using HTML5 you would probably use

<nav> <a href="">Link 1</a> <a href="">Link 2</a> </nav>
 
Then the CSS would look something like this

nav a {display: block; float: left; width: 150px;}
 
There's loads of ways to do it, the more stuff you do the more ways you'll find really.

Change:

a:link, a:visited, a:active { color: #000000; text-decoration: none; }
 
To:

a:link, a:visited, a:active { color: #0000FF; text-decoration: none; }

Anything and everything...well that's a lot to cover but I'll try and give you a few ideas.
 
The background seems a fairly logical place to start it believe, you could opt for the option of using an image of wood for the page background - a little cliché yes, a little tacky yes but it depends on the site your aiming for really, if you'd rather keep it stylish and smooth I'd suggest a mild gradient perhaps or a fairly light solid grey, or a reddish brown even in keeping with the whole wood thing. Keep the background of the content area white though (or any other colour you find appropriate).
 
Content wise it may be an idea to keep it a fixed width layout in the region of say 800px-1000px or whatever you like really, a liquid layout would work but first thoughts on a site such as this would be fixed width.
 
Don't be too brash when it comes to the colour scheme, if there's a logo then obviously try and keep the colour scheme of the site along the same lines as the colours in the logo, when it comes to the links I'd say keep it subtle if possible try and colour them the same as the logo colour scheme so that the link stands out yet blends in at the same time and upon mouse hover you could either add/remove any text decoration such us underline, you could add a background colour to the link, but again try and keep it in fitting with the logo colours, if there's no logo then try and colours close to that of the main copy (i.e copy=black link=dark/light grey).
 
You could also add a box shadow around the content area (fixed width) to give the site a more sleek appearance as well as using a border-radius on corners of the content area and/or the navigation items as well as anywhere else you feel they would help (could be applied to every single thing with a visible corner if you want but that may take a while).
 
As far as pages are concerned I can't see you needing that many, like you say 4/5 pages should be enough, obviously you need a homepage, and a contact page, a gallery/previous work page to show the the previous work (clearly), a services page is definitely a good one (if applicable) so people can see that they do furniture, kitchens or whatever it is that your friend is offering, an about page isn't really necessary but it helps potential customers get to know the person/company better and can often make that last point that makes customers think "Yeah this is the one".
 
One way of helping out visitors is to add a sort of quick navigation type-thing at the bottom/side of the pages containing 3 links/steps for example - step 1. previous work. step 2. services. step 3. contact. - this sort of thing can help a customer easily get from point A (landing on the site) to point B (purchasing services) without jumping to point C & D in between but it also allows them the freedom to roam the rest of the site at their will rather than being forced to follow a specific page order (I've seen it happen before only one page of the site was displayed at a time and you had to click a "Next" or "Previous" button to get from one page to another - nightmare).

1. Have you named the images/changed the file names accordingly?
 
2. Add some padding to the button
.button {padding: /*insert number of px*/;}
 
3. The styling should look like
<style type="text/css"> #header { height: 150px; width: 800px; } .button:link, .button:visited {background: url(button-background.gif);} .button:hover {background: url(button-background-hover.gif);} .button:active {background: url(button-background-down.gif);} </style>

<style type="text/css">
Should only be used if your adding the css rules to the html document (my mistake I thought you were doing that).
 
As for the padding simply add it to the pre-existing rule

.button:link, .button:visited {background: url(home.gif); padding: 50px 110px 50px 110px;}
 
You will also need to add no-repeat to each of the .button rules so it should end up like this
.button:link, .button:visited {background: url(home.gif) no-repeat; padding: 50px 110px 50px 110px;} .button:hover {background: url(home_over.gif) no-repeat;} .button:active {background: url(home_down.gif) no-repeat;} }
The padding values I used are just an example.
 
I do apologise for the some what "blotchy" advise I've been sleep deprived for about 43 hours now.

Have you tried using CSS?
 
Instead of having "Home" as part of the image you could make that background gradient nothing more than 1px wide than set it as the background for any other buttons you may use and then simply enter the name of the page as standard text in the html document.
 
So you'd end up with something like:
.html content:

<a class="button" href="index.html">Home</a>
 
.css content:

.button:link, .button:visited {background: url(button-background.gif);} .button:hover {background: url(button-background-hover.gif);} .button:active {background: url(button-background-down.gif);}

Have you tried using CSS?
 
Instead of having "Home" as part of the image you could make that background gradient nothing more than 1px wide than set it as the background for any other buttons you may use and then simply enter the name of the page as standard text in the html document.
 
So you'd end up with something like:
.html content:

<a class="button" href="index.html">Home</a>
 
.css content:

.button:link, .button:visited {background: url(button-background.gif);} .button:hover {background: url(button-background-hover.gif);} .button:active {background: url(button-background-down.gif);}

I'd suggest
The Essential Guide To CSS and HTML Web Design by Craig Grannell
The Principles of Beautiful Web Design by Jason Beaird

If you want the links to show the same background as when they are "rolled-over" then add and ID to the body tag for each page (i.e homePage, servicesPage etc) and then add an ID to each of the navigation links (i.e homePageLink, servicesPageLink etc) then use CSS to apply the background colour.
 
For example:
Add this to your homepage body tag.

<body id="homePage">
Change the tag for each page though so on the services page you'd make it

<body id="servicesPage">
 
Then add to the tags in the navigation

<li id="homePageLink"><a href="index.html">About Us</a></li> <li id="servicesPageLink><a" href="Our_Services.html">Our Services</a></li> <li id="clientPageLink"><a href="Our_Clients.html">Our Clients</a></li> <li id="linksPageLink"><a href="Useful_Links.html">Useful LInks</a></li> <li id="offeredPageLink"><a href="Offered_Sites.html">Offered Sites</a></li> <li id="contactPageLink"><a href="Contact_Us.html">Contact Us</a></li>
 
Then add the following to the CSS

#homePage #homePageLink a:link, #homePage #homePageLink a:visited, #servicesPage #servicesPageLink a:link, #servicesPage #servicesPageLink a:visited { background: #C50070;}
 
Just make sure that you add all the IDs for each navigation link to the above rule.

Ok at the moment you've got this

<body> <body id="homePage"> <body id="servicesPage> <body id="clientPage"> <body id="linksPage"> <body id="offeredPage"> <body id="contactPage">
 
You should only have one <body> tag per page, so on the useful links page you should only have

<body id="linksPage>
on the home page

<body id="homePage">
 
Instead of adding more body tags just add the ID to the one that's already on the page.
 
The problem you were having is because you forgot a " after the servicesPage ID.

On the "Our Clients" page you've put

#clientPageLink #clientPageLink a:link, #clientPageLink #clientPageLink a:visited
instead of

#clientPage #clientPageLink a:link, #clientPage #clientPageLink a:visited
 
On the "Offered Sites" page you haven't added the css rule at all.

Make sure that you apply the clear:both rule (as stated above) in col.css (not <style></style> you've got in the html file), you can actually delete col2.css entirely as well seeing as it's only copying .footer in col.css.

If you want the links to show the same background as when they are "rolled-over" then add and ID to the body tag for each page (i.e homePage, servicesPage etc) and then add an ID to each of the navigation links (i.e homePageLink, servicesPageLink etc) then use CSS to apply the background colour.
 
For example:
Add this to your homepage body tag.

<body id="homePage">
Change the tag for each page though so on the services page you'd make it

<body id="servicesPage">
 
Then add to the tags in the navigation

<li id="homePageLink"><a href="index.html">About Us</a></li> <li id="servicesPageLink><a" href="Our_Services.html">Our Services</a></li> <li id="clientPageLink"><a href="Our_Clients.html">Our Clients</a></li> <li id="linksPageLink"><a href="Useful_Links.html">Useful LInks</a></li> <li id="offeredPageLink"><a href="Offered_Sites.html">Offered Sites</a></li> <li id="contactPageLink"><a href="Contact_Us.html">Contact Us</a></li>
 
Then add the following to the CSS

#homePage #homePageLink a:link, #homePage #homePageLink a:visited, #servicesPage #servicesPageLink a:link, #servicesPage #servicesPageLink a:visited { background: #C50070;}
 
Just make sure that you add all the IDs for each navigation link to the above rule.

Anything and everything...well that's a lot to cover but I'll try and give you a few ideas.
 
The background seems a fairly logical place to start it believe, you could opt for the option of using an image of wood for the page background - a little cliché yes, a little tacky yes but it depends on the site your aiming for really, if you'd rather keep it stylish and smooth I'd suggest a mild gradient perhaps or a fairly light solid grey, or a reddish brown even in keeping with the whole wood thing. Keep the background of the content area white though (or any other colour you find appropriate).
 
Content wise it may be an idea to keep it a fixed width layout in the region of say 800px-1000px or whatever you like really, a liquid layout would work but first thoughts on a site such as this would be fixed width.
 
Don't be too brash when it comes to the colour scheme, if there's a logo then obviously try and keep the colour scheme of the site along the same lines as the colours in the logo, when it comes to the links I'd say keep it subtle if possible try and colour them the same as the logo colour scheme so that the link stands out yet blends in at the same time and upon mouse hover you could either add/remove any text decoration such us underline, you could add a background colour to the link, but again try and keep it in fitting with the logo colours, if there's no logo then try and colours close to that of the main copy (i.e copy=black link=dark/light grey).
 
You could also add a box shadow around the content area (fixed width) to give the site a more sleek appearance as well as using a border-radius on corners of the content area and/or the navigation items as well as anywhere else you feel they would help (could be applied to every single thing with a visible corner if you want but that may take a while).
 
As far as pages are concerned I can't see you needing that many, like you say 4/5 pages should be enough, obviously you need a homepage, and a contact page, a gallery/previous work page to show the the previous work (clearly), a services page is definitely a good one (if applicable) so people can see that they do furniture, kitchens or whatever it is that your friend is offering, an about page isn't really necessary but it helps potential customers get to know the person/company better and can often make that last point that makes customers think "Yeah this is the one".
 
One way of helping out visitors is to add a sort of quick navigation type-thing at the bottom/side of the pages containing 3 links/steps for example - step 1. previous work. step 2. services. step 3. contact. - this sort of thing can help a customer easily get from point A (landing on the site) to point B (purchasing services) without jumping to point C & D in between but it also allows them the freedom to roam the rest of the site at their will rather than being forced to follow a specific page order (I've seen it happen before only one page of the site was displayed at a time and you had to click a "Next" or "Previous" button to get from one page to another - nightmare).