Complete Guide to Creating a Blog Website Layout

html {font: 11px Arial, Helvetica, sans-serif;text-align:left;background: #b2b2b1 url(graf/bg2.jpg) top center repeat-y;}

Hide all unneded layers again and select a big rectangle from the shape (and borders) that have been left. Save the copy as a new document and name it content.png.

Then add html and css as follow:

</p> <div id=”wrap_content”> <div id=”content”></div> </div> <p>

#wrap_content{ width:100%; margin:0 auto; } #wrap_content #content{ width:980px; margin:0 auto;position:relative;background: url(‘graf/content.png’) top center repeat-y; }

Seems to look great. From now on you should know how to cut out needed images from psd so you could later use them in html. Try to move on by yourself in cutting before you will check my sources. They could be a bit messy, but I hope you’ll fully understand everything with a change and try method. Remember, html won’t eat you. If you will mess something up you always have CTRL+Z and back-ups in your altirery.

---

Final Results

---

Download the PSD and HTML template

Strona Website Template.zip | 23.34 MB

Download from Website

---

Authors Comment

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19