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