Part 3/4: Design and Code a site with Gimp, HTML and CSS
June 15, 2008
Welcome to part 3 of my series on designing and coding a website with the Gimp, HTML and CSS. In this part I am going to show you how to start coding the site.
-
Step 1
You need to create two files, one called index.html and one called style.css. To create the files you don’t need anything fancy, just Notepad or a text editor of some kind (not MS Word). First of all save both of these files into the folder you created earlier. The folder structure should now look like this:
-
Step 2
In the index.html we need to set up the html structure so add this code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
These are called html tags. In between the head tags go all the information like scripts and styling and in the body tags goes all of the content.
-
Step 3
Now we are going to fill in the head section of the template, in here we are going to add the title that is shown in the titlebar when you view the page and a link to the CSS stylesheet (style.css). You can also add meta tags here if you wish.
Add this code in between the <head> and </head> tags.
<title>WEBSITE TITLE HERE</title>
<link rel=stylesheet href="style.css" type="text/css" media=screen>
-
Step 4
We are now going to add the div components to the index.html file. A div is a tag that is styled in CSS and can be used in HTML as a container that holds content. Below is an image of how the divs are going to be laid out in our template:
-
Step 5
Add the following code to the index.html file between the <body> and </body> tags:
<div id="page">
<div id="header">
</div>
<div id="menulinks">
</div>
<div id="mainarea">
<div id="contentarea">
</div>
<div id="sidebar">
</div>
</div>
<div id="footer">
</div>
</div>
All of the elements are contained within the page div and the contentarea and sidebar are contained in a sub div called mainarea.
-
Step 6
Now if you were to open the index.html file now, you would not see anything this is because we haven’t styled these elements yet and this is what we are going to start doing now.
(source) The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}
So, for example if we wanted the header to have a width of 960px the code would be
#header {width:960px;}
When you refer to a div you need to add a hash sign in front of the name (#page, #header etc.), however when you are referring to a class you need to add a . infront (.description, .left etc.), we will go into more detail on this later on. And for each statement inside the { and } you need to add a semicolon (;) at the end of each line.
So there is a quick introduction to CSS, for more of an introduction I suggest you read this introduction.
-
Step 7
Go to your style.css file and add the following CSS code. I will try and explain at each step what it does:
body {
background-color:#333333;
margin:0;
padding:0;
text-align:center;
font-family:Arial;
font-size:12px;
color:#555555;
}
#page {
width:960px;
margin:auto;
padding:auto;
background-image:url(images/page.png);
text-align:left;
}
#header {
width:960px;
height:108px;
background-image:url(images/header.png);
clear:both;
}
#menulinks {
width:960px;
height:44px;
background-image:url(images/menulinks.png);
clear:both;
}
#mainarea {
width:960px;
clear:both;
padding-top:10px;
}
#contentarea {
float:left;
width:560px;
padding-left:45px;
margin-bottom:10px;
}
#sidebar {
float:right;
width:290px;
padding-right:45px;
}
#footer {
width:960px;
height:100px;
background-image:url(images/footer.png);
clear:both;
}
#footer p {
padding-top:30px;
color:#FFFFFF;
padding-left:50px;
line-height:20px;
}
body styling
The body is basically the page, I have set the margin and padding to 0 because this means that there are no gaps at the top or bottom of the page. The background colour has been set to dark gray, I used a html colour code for this (333333), you can view colour codes for all colours here. And finally I have set the page to text align to center, what this will do is make the page center in the middle. I have also set up the font family, default font size and font colour.
#page styling
The page has a width of 960px and the margin and padding have been set to auto, this makes the page centered on the website. I have also added a background-image, this was the page image we created in part two of this series, and finally I have set the text align back to left, else all the elements would have centered text. The clear property means that it adds it below and above the previous and next components.
#header, #menulinks and #footer styling
I have set a width and a height and added the appropriate background image.
#mainarea styling
This is just a simple container for the contentarea and sidebar so I have simply set up a width of 960px. There is also a padding-top property so that the content of the page isn’t too close to the header area.
#contentarea styling
The contentarea has been floated left, this means that it is in the left hand column of two columns. I have also added a padding-left property because otherwise when we add the content, it will not be shown on the white area of the image.
#sidebar styling
The sidebar has been floated right so that it is in the right hand column and similarly I have added a padding-right property so that the content appears in the sidebar area.
#footer p styling
The padding-top and padding-left properties position the footer contents, the color changes to white (FFFFFF) and the line space stands for the spacing of each line.
-
Step 8
Finally for this part, we need to add some content to the contentarea, sidebar and footer, so add the following code, <br/> is the html line separater, without it all this text would be bunched into one paragraph:
Contentarea:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<br/><br/>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<br/><br/>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<br/><br/>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<br/><br/>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Sidebar:
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/><br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Footer:
<p>Copyright (c) 2008 SITE NAME. <br/>
All Rights Reserved.</p>
-
Result
You should now have a page that looks something like this:
That’s it for part 3. In the final part I am going to be adding the logo, styling links, h1, h2 tags and creating the menu rollover links. You can download all of the work we have done so far here.
-
Thomas
June 16th, 2008 at 2:28 pm
when will the next one come out?
Saravanan Sahadevan
June 18th, 2008 at 8:50 am
This tutorial seriously helped me so much ! Thx Alot !
Ty
June 19th, 2008 at 4:11 pm
Thank you for such a GREAT tutorial!!! How does the css code know how to parse out the text when there are only break indicators in the paragraphs? Are we supposed to include the title of each paragraph, “Contentarea”, “Sidebar”, and “Footer”?
Breanne
June 23rd, 2008 at 1:21 am
This is a great tutorial.. but I seem to be having a problem. If you email me I will send you my stylesheet and if you could see what the problem is I would really appreciate it!
Swiss
July 5th, 2008 at 6:19 am
Sweet tutorial bro, I’m going to use this, cause I sometimes get lazy when making my templates, lol and this is so simple, my server is down at the moment, but when it’s back up I’ll post a link to this tutorial, see ya.
LOLLERVATOR
July 20th, 2008 at 12:02 pm
Nice tut dude, but where do i add the text for the content area?
Visitor
July 26th, 2008 at 7:30 pm
I agree with LOLLERVATOR, where do I put all that writing for content area, etc.? I’m kind of lost :O.
Simon North
July 27th, 2008 at 9:55 am
@LoLLERVATOR and Visitor
In answer to your comment you need to add the text between the
< div id= " contentarea " > and < / div > tags
Hope this helps
Simon
Mathew Edison
September 17th, 2008 at 10:15 am
Thanks for the tut. It’s quite a good help especially because I got no idea on how to use GIMP and I’m forced to use it at school. The CSS and HTML part’s easy though!
James
October 12th, 2008 at 12:09 am
Okay, I made a site layout in gimp. Not like yours, but roughly the same size if not exactly.
I saved my images to my folder you said to make, (btw i use a mac).
I used something called textedit, then saved 2 new projects, (Style.css and Index.html). But when I saved one as index.html, when I clicked on it to write the code, it jut opened my browser, and when I opened my style.css, it opened in something called dashcode. And how do the html and css folders ‘interact’?
If you put the graphics and whatnot in the css, and other stuff in the html, how does it put them together?
Sorry if you don’t understand… not that good at explaining.
Simon North
October 13th, 2008 at 1:05 pm
@James:
This seems like a Mac problem and I don’t use Mac, what I’d suggest is opening textedit and then use the open option in the program to open the files.
The CSS file (style.css) and HTML file (index.html) should be in the same folder, the images should then be in a subfolder called images. In the HTML you will reference the style.css file and thats how they interact.
Daniel Rune Jensen
October 18th, 2008 at 9:57 am
Hey, this tutorial have helped me much, but what does the tag media=”screen” in the link to the stylesheet do?
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” (
I do not like doing things i do not know what does
but thanks for the great tutorial!