Alright so I have just recently done this! Basically have a psd file for your homepage, and then all of your other pages on your website. Make sure these are seperate psd files.
1. Start with the header: Crop the top bar with photoshop then save this as a picture.
2. Now for the middle content: Crop the mid section of your psd file and save it as a picture (You can make your text visible or not in the picture. If it is visible, then people will not be able to copy and paste off your website, it will act as a picture.)
3. Then crop the footer: This is the bottom bar of your website, it contain the copyright info etc. Crop this and save it as a picture.
4. Finally the background: Go to photoshop and make everything hidden except the background and save it as a picture.
Follow these steps for each psd file you have!
Now code in html and css
Make the basic format of your website in html then add css to tweak certain things like the alignment of text etc.
(I like to do my coding in notepad, but you may use something else, but make sure each page on your website has its own html and css file)
HTML: Here is a basic html template you may use
Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Website Home</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul id="nav">
<li><a href="Page1.html">Page 1</a></li>
<li><a href="Page2.html">Page 2</a></li>
<li><a href="Page3.html">Page 3</a></li>
<li><a href="HomePage.html">Home</a></li>
</ul>
<div id="middle-content">
</div>
</body>
<div id="footer">
</div>
</html>
CSS: Here is the css template for this HTML
Code:
* {
margin: 0;
padding: 0;
}
body {
font-size: ?%;
font-family: Helvetica, sans-serif;
background: url(images/your image.jpg);
}
ul#nav {
height: ?px;
width: ?px;
background: url(images/your image.jpg) no-repeat;
list-style: none;
margin: 0 auto;
}
li {
font-size: ?em;
}
ul#nav li a {
display: block;
height: ?px;
width: ?px;
float: right;
text-align: center;
margin-top: ?px;
margin-right: ?px;
padding: ?px;
color: ?;
}
div#middle-content {
width: ?px; height: ?px;
background: url(images/your image.jpg) no-repeat;
margin: 0 auto;
}
div#footer {
height: ?px; width: ?px;
background: url(images/your image.jpg) bottom center no-repeat;
margin-top: ?px;
}
*I forgot to say make a folder for each page on your website and save the slices from the pages in their folder!