Make your first CSS based website layout.
Posted: Sat May 30, 2009 5:21 am
Ok so you want to create your own website. Well this cant just be done in HTML you need some thing called a cascading stlye sheet. Now basicly the job of a cascading style sheet (CSS) is to give a HTML page a style to work in.
Ok its time to get started. Make a new HTML page.
Code:
Ok save that as index.html.
Now you need to open paint.
Set the size of the image to 339 x 234 pixels and draw a rounded square like this

Ok now we need three sections, top middle and bottom so sclice it like so:

Save each section as it's own file. Before we do anything else lets look at the middle background , It seems the whole block is the same thing repeated over again , so instead of having it as a block like that lets make it into a 1pixel heigh strip by going to Image > Attributes (Ctrl+E) > Change height to 1px and voila , you will have an strip with an height of 1pixel. At this point you should have 3 sections looking like this:
Header:

Middle

Footer

Now upload the images into the same folder as the HTML file.
And make a file called style.css and jam this in
Ok now add the text details into the css document
Now the margins
Now after the </head> closing tag insert:
Where it sais put your content here thats where you put your HTML and PHP. Dont forget if you want use PHP rename index.html to index.php.
Now you can customise the rest of it.
There you go! Feedback please
~flex
Ok its time to get started. Make a new HTML page.
Code:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
Now you need to open paint.
Set the size of the image to 339 x 234 pixels and draw a rounded square like this

Ok now we need three sections, top middle and bottom so sclice it like so:

Save each section as it's own file. Before we do anything else lets look at the middle background , It seems the whole block is the same thing repeated over again , so instead of having it as a block like that lets make it into a 1pixel heigh strip by going to Image > Attributes (Ctrl+E) > Change height to 1px and voila , you will have an strip with an height of 1pixel. At this point you should have 3 sections looking like this:
Header:

Middle

Footer

Now upload the images into the same folder as the HTML file.
And make a file called style.css and jam this in
Code: Select all
body {
text-align: center;
background-color: #ffffff;
}
#container {
width: 390px;
}
#top {
background: url(top.gif);
height: 11px;
}
#mid {
background: url(mid.gif);
}
#bot {
background: url(bot.gif);
height: 10px;
}
Code: Select all
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #000000;Code: Select all
margin-top: 5px;
margin: auto;
Code: Select all
<div id="container">
<div id="top"></div>
<div id="mid">Put your content here</div>
<div id="bot"></div>
</div>
Now you can customise the rest of it.
There you go! Feedback please
~flex