Ok I gonna show you an easy way to make a good webtemplate.
First, we'll open Photoshop (or any other graphics editing software).
I gonna make a smaller template that fits on a 1024x768 screen (for you who uses 800x600 still, please change your resolution, 800x600 is old).
Make a new image the size of 1024x768, yeh I know, the webpage wouldn't be that large because of toolbars etc, but it's just easier to make it this way.
Now fill it with a background color, I choose black in this example, but you could use what color you feel like.
Now make a new layer, because it's easier to edit. On the new layer, choose the rounded rectangle tool and make some nice form in the middle of the image, leave a bit space at the top and the bottom. Now you could mess around with blending options etc.
This is how mine turned out:
Yeh I know, I made it in 2 minutes.
Now to slice it. First, save the image as a project to keep all layers for future editing. Then, merge all layers we are gonna slice it in 3 pieces, don't save after.
We need these pieces:
The header image. Note how I cutted it under the line that divide the header part from the rest.
The wrap, used to be repeated as background
The footer.
Mark your template with the marque tool, press ctrl+c and paste it in a new image with the same size of what you just copied.
Create a new folder on eg. your desktop. In this folder, make a new folder called images. In this folder, save the header as header.jpg, the wrap as wrap.jpg and the footer as footer.jpg.
Now we finally is at the step coding it. Open dreamweaver (or any other good html/css editor (please don't use windows notepad or windows worpad to do this
)
Now create a html file. Save it in the tutorial folder as index.html.
Now make a style.css file. Save it where you saved index.html.
Now in index.html, add
Code:
<link href="style.css" rel="stylesheet" type="text/css" />
before the </head> tag.
now make 3 div's, one called wrap, one called header, and one called footer, in that order. Put some content in wrap. Your index.html file should look like this now:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="headertext">
lal
</div> <!-- Headertext closed -->
</div> <!-- Header closed -->
<div id="wrap">
<div id="sidebar">
link<br />
link<br />
link<br />
link<br />
link<br />
link<br />
link<br />
link<br />
</div><!-- Sidebar Closed -->
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum turpis urna, lacinia mattis, malesuada non, vehicula ac, magna. Ut in diam at elit vestibulum tincidunt. Curabitur commodo sem sit amet nunc. In tellus orci, suscipit et, posuere sit amet, ultrices eget, tellus. Pellentesque auctor, eros at dapibus scelerisque, nisl turpis dictum lacus, quis hendrerit dui lacus in sem. Sed vulputate luctus orci.
</div> <!-- Content closed -->
</div> <!-- Wrap closed -->
<div id="footer">
<div id="footertext">
lal
</div> <!-- Footertext closed -->
</div> <!-- Footer closed -->
</body>
</html>
Now go over to your style.css file. I gonna put in some values so my template works, you may need to edit them a bit so it works for your template.
Code:
@charset "utf-8";
/* CSS Document */
body {
background-color:#000;
color:#FFF;
} /* This makes the background color black, and font color white. change it to the color you choosed as background in photoshop etc. */
#wrap { /* # shows that it's an "id". If it was a dot (.), you would have to use class="" */
background-image:url(images/wrap.jpg); /* the image */
background-repeat:repeat-y; /* repeat it downwards */
width: 1024px;
padding-right:241px;/* this is the harder part, making it totally centered. Sometimes it's needed, sometimes not. Change this */
background-position:center; /* centers the template */
/*margin:auto;*/
}
#headertext {
padding-left:600px; /* change to match */
padding-top:70px;/* change to match */
}
#sidebar {
padding-left:260px;/* change to match */
float: left; /* change to match */
margin:auto;
}
#content {
width: 400px;/* change to match */
margin:auto;
padding-left: 350px;/* change to match */
}
#header {
background-image:url(images/header.jpg);
background-repeat:no-repeat; /* no-repeat on this one, we don't want multiple headers, eh? */
width: 1024px;/* change to match */
height: 203px;/* change to match */
padding-right:241px;/* this is the harder part, making it totally centered. Sometimes it's needed, sometimes not. Change this */
background-position:center;
}
#footer {
background-image:url(images/footer.jpg);
background-repeat:no-repeat;
width: 1024px;/* change to match */
height: 80px;/* change to match */
padding-right:241px;/* this is the harder part, making it totally centered. Sometimes it's needed, sometimes not. Change this */
background-position:center;
}
#footertext {
padding-left:600px;
}
Note: This .css is just a template, you'll need to change some values/ask help from someone to fix it.
Also, the sidebar can't be longer than the content for some reason, tried to fix it, but it didn't work...
The result is something like this:
templates/tutorial/
