Part 4/4: Design and Code a site with Gimp, HTML and CSS

Welcome to the fourth and final part of my series on designing and coding a website in the Gimp, HTML and CSS. At this point I would like to thank everyone who has been following this series and I hope that you continue to use Help Developer. In this part I am going to show you how to finish off the template we have been creating, we are going to style the textual elements such as the h1, h2 and hyperlink tags and we are going to also create the long awaited rollover menu.

Continues below...




-

Step 1

First of all we are going to add the logo to the header area. Open the style.css file and add the following:

a.logo {

width:353px;

height:102px;

float:left;

background-image:url(images/logo.png);

}

This will style the hyperlink that has a class attribute of “logo”. Change the width value to the width of the logo image you cut out earlier.

-

Step 2

Open the index.html file and add the following line between the <div id=”header”> and </div>:

<a href="./index.html" class="logo"></a>

It should now look like this:

-

Step 3

Now we are going to style the h2 tags which we will use to create the titles on the pages and sidebar. Go to the style.css file and add the following code:

h2 {

font-size:20px;

color:#333333;

font-weight:bold;

}

and this to the index.html file directly underneath the <div id=”contentarea”> tag:

<h2>Welcome</h2>

This will create something like this:

Using h2 tags is good for SEO because Google’s bot looks at the h2 tags to determine what your site is about. Also notice that there is no dot (.) or hash (#) before the h2 in the CSS, this is because it is a formatting option and it is not a div (#) or a class (.)

Continues below...




-

Step 4

Next is to style the hyperlinks in the text, first add a hyperlink to the index.html file. (<a href=”link_here”>text_to_display_here</a>), notice it will use the default browser settings:

To style this add the following to the style.css file:

a {

font-weight:bold;

color:#333333;

text-decoration:none;

}

Now it looks like this:

You can style it further by adding a hover style, for example, I added the following code:

a:hover {

color:#389ccb;

text-decoration:underline;

}

and this was the outcome when I hover over the link:

Also just a quick note, if you want to change the style of an element like a hyperlink in a certain area only, for example to the footer area then in the style.css file change the a { to #footer a {

-

Step 5

And now, what you have all being waiting for, the rollover menu links. This is done in a similar way to what you see above in step 4 using the a and a:hover options in CSS.

When doing this on your own sites/templates you will need to use trial and error to get the measurements right in order for it to look right, but in this example the elements are all the same as the tutorial (if you have been following the other parts correctly of course).

Add the following in the index.html file under the <div id=”menulinks”>:

<a href="#">Home</a>

<a href="#">About</a>

<a href="#">Services</a>

<a href="#">Contact</a

Here is the CSS for the menulinks rollover item:

#menulinks a {

padding-top:15px;

padding-left:15px;

padding-right:15px;

height:27px;

float:left;

text-decoration:none;

color:#FFFFFF;

font-weight:bold;

font-size:14px;

margin-top:1px;

}

OK, a bit of an explanation for the code below. It uses padding to make the text inside the link centred and the height property just makes it fill the area. When you are using this on other templates the padding-top and the height property are going to be the properties that you need to keep changing until it looks right. I have used float:left; so that the elements are displayed next to each other. I have changed the colour to white (FFFFFF), the font to bold and size 14px. I have also added a margin-top of 1px because for some reason it looked out of place without it, the margin-top property just pushed the element down or up if you use a negative value.

To add the hover effect all you have to do is this:

#menulinks a:hover {

background-image:url(images/menuhover.png);

}

Simple!

You should now have something like this:

Unhovered

Hovered

-

Step 6

Finally, all that is left to do is move the links to the right a bit, as you can see from the images above the links come off the edge. To move the links to the right go to the style.css file and find the #menulinks property and change it to:

#menulinks {

width:930px;

padding-left:30px;

height:44px;

background-image:url(images/menulinks.png);

clear:both;

}

I have added a padding-left attribute with a value of 30px and in order to not mess up your layout, ensure that you remove the same amount from the width attribute because padding is added onto the width.

-

Result

That’s it, you should now have something that looks like this:

You can download all of the files by clicking here.

Finally, I would like to thank all of you for following this tutorial and I hope it has helped you considerably in learning how to design a website in the Gimp and then code it. You will now be able to move onto harder websites using the same techniques used in this tutorial and keep an eye out on Help Developer for tutorials on more advanced techniques such as nicer hover effects. You can subscribe to my RSS feed here.