Weeb tutorials feedback Powered by

Create a website, from mock-up in Photoshop to HTML/CSS.

This part of the tutorial will show you how to create a website using HTML & CSS. We created a mockup of the website earlier, if you missed this you may want to take a look.

Alternatively you can just download the required images below. You can see a preview of the website on the introduction page of this tutorial.

 

navBG.png sideNavHead.png
Navigation menu image Navigation menu image
css.jpg html.jpg
Navigation menu image Navigation menu image
sideNavBG.png featureimg1.jpg
Navigation menu image Navigation menu image
header.jpg
Site header image
lineDivider.jpg
Divider image

Simply click any of the above images to download them. Or if you prefer, you can create your own.

Step 1 - Creating the website header

In this step you will learn how to create the website header and navigation menu.

First off all you will need to create a wrapper DIV which will hold the entire site together. This wrapper DIV will be centered using the margin property.

The header section requires only one DIV, we will give this an ID of 'header'. This DIV will have a background image applied to it, and will contain a list.

Because our design is not image heavy we can get away with using one single, large image for the header.

The HTML:

 

<div id="wrapper">

 

<div id="header">

<ul>
<li><a href="#"> Home <span> Welcome to our abode</span></a> </li>
<li><a href="#"> About <span> Who we are &amp; what we do</span></a></li>
<li><a href="#"> Contact<span> Get in touch with us</span></a></li>
<li><a href="#"> Services<span> What we can offer</span></a></li>
<li><a href="#"> Templates<span> Both free &amp; premium</span></a></li>
</ul>
</div>

 

</div>

 

As you can see the above code is pretty straight forward, a couple of DIVS with a nested list.

The span element is included for the specific purpose of giving more control when adding the CSS. In this case, it will allow us to add the extra border seen in the design.

The CSS:


body, #wrapper, #header, #header ul,#header ul li, #header ul li p {
margin:0;
padding:0;
}

body {
font-size:100%;
}
#wrapper {
width:964px;
margin:0 auto;
margin-top:5px;
}

By giving the wrapper DIV a width & setting the margin to '0 auto' the DIV is placed in the centre of the page.


#header {
background:url(images/siteLayoutClean1/layout/header.jpg) no-repeat top left;
padding-top:120px;
}

Set 'header.jpg' as the background for the header DIV. Place it at the top left of the container & remove any repeat. Add some padding to the top so that the unordered list moves below the image. The list should now be in place & just needs to be styled.


#header ul {
background:url(images/siteLayoutClean1/layout/navBG.png) repeat-x;
height:60px;
border:thin solid #a5a9a9;
margin-top:3px;

}

Specify a height for the list, in this case 60px, the same height as our background image. Apply the background image & repeat it along the x axis. Add a bit of margin to the top to separate the header and navigation slightly.


#header ul li {
list-style:none;
float:left;
height:100%;
border-right:solid thin white;
}

Remove the list bullet points & float each item to the left. The list is now horizontal, rather than vertical. Set the height to 100% & add our first border to the right.


#header ul li span{
color:#777777;
font-size:60%;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
display:block;

}

The caption for each list item needs to be placed underneath the main text, to do this change display to 'block'. Change the font size, color and family.


#header ul li a{
display:block;
padding-top:9px;
height:51px;
padding-left:11px;
padding-right:11px;
border-right:thin solid #a5a3a3;
color:#94a8bc;
text-decoration:none;
font-size:130%;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

To make the full button click-able change display to 'block'. This makes the element fill all available horizontal space. Add the second border to the element.

 

In this example we need to tell the element to fill all vertical space in order for the border to work. However, if we set the height to the full 60px our text will not be centered vertically. Instead, add 9px of padding to the top & specify a height of 51px.


#header ul li a:hover{
color:#687c8f;
}

When the user hovers their mouse over the element, the text color will change.

Take a look at the website so far.

Step 2 - Creating the feature section.

The feature section is quite simple. All we need is a couple of DIVS,each one floated to the left.

We have decided to stray from the design slightly, instead of having 3 columns we are going to have 2. This gives us a little extra room for content & allows us to use larger images.

You can go ahead and add an extra column if you prefer.

The HTML:

 

<div id="mainContent">
<img src="images/siteLayoutClean1/layout/lineDivider.jpg"/ class="lineDivider">
<div class="box1">
<span class="boxTitle">Take a look at our amazing range of premium goodies, get 10% off all products.</span>
<p> <img src="images/siteLayoutClean1/layout/featureimg1.jpg" alt="preview" align="left" class="boxImg"/>Text here </p>
<p>Text here</p>
</div>
<div class="box2">
<span class="boxTitle">Beautiful websites tailored to your needs at competitive prices.</span>
<p><img src="images/siteLayoutClean1/layout/featureimg1.jpg" alt="preview" align="left" class="boxImg" />Text here</p>
<p>Text here</p>
</div>
<img src="images/siteLayoutClean1/layout/lineDivider.jpg"/ class="lineDivider">
</div>

 

 

As you can see we have added two DIVS named 'box1' and 'box2' inside the 'mainContent' wrapper.

These two DIVS are going to be almost identical, the border and a little bit of padding the only thing separating them.

All of the code we add to our page from this point onwards should be placed within the 'mainContent' Div.

next next

This is the old version of our site. To visit the new version click the following link: New site