Building a Website From Photoshop Template
2 Replies
May 13th, 2008
Datis Design Weblog
Designing for Communicating
One of the important objects that web designers need to know is to make a valid (X)HTML and CSS website with a designed template from Photoshop or other designing softwares. In this tutorial I am going to show how can you build a valid website with a template that I have designed in Photoshop. Please note that this tutorial is in two sections, first one is for making the HTML one and second one is for making the styles with CSS.
Dividing The Template
If you look at the websites, you can see that most of them are following a fixed structure, maybe in some cases you see that a website has more elements or less. When you are designing a website template you should note that arranging these elements is very important, if you look at this picture you will understand :
This simple template was made in Photoshop, if you look you will see that this has a division for Header, a division for Navigation, a division for Content, a division for Sidebar and a division for Site Info (or Footer). In some cases maybe you see that a website has more sidebars or other elements. Now look at this picture :
In this picture I have divided the template to the sections that I have mentioned above, now we can easily make a HTML file with this picture. (You can see larger images by clicking on them)
Building HTML File
We begin with the top of the picture, the first section is Header, so we can easily make a DIV tag for Header and give it an ID, We use to build other DIVs for other sections :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website</title>
</head>
<body>
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="siteinfo"></div>
</body>
</html>In building a website which you want to be a Valid (X)HTML/CSS site and have a good SEO, you should bring all those elements that you have designed in the template, for example if you look at the template you will see that I have put a large text for website title (Welcome to my Site), so we can easily use H1 tag to create this text, and then we will create the style for it later. With this method at the end you will see that your website has a great readability which is very good for screen readers, also it is very understandable even without any styles and graphics.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website</title>
</head>
<body>
<div id="container">
<div id="header">
<h1 id="header_title"> Welcome to my Site </h1>
<h2 id="slogan"> A Webdesigner Portfolio </h2>
</div>
<div id="navigation"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="siteinfo"></div>
</body>
</html>Giving an ID is very useful, later you can easily give any style to your HTML tags, you should keep this note in mind that you only can use each ID for one time. Now for Navigation we can use ul and li tags :
<div id="navigation">
<ul id="main_nav">
<li id="home"><a href="#" title="home">home</a></li>
<li id="about"><a href="#" title="about">about</a></li>
<li id="portfolio"><a href="#" title="portfolio">portfolio</a></li>
<li id="services"><a href="#" title="services">services</a></li>
<li id="contact"><a href="#" title="contact">contact</a></li>
</ul>
</div>Put the code in Navigation DIV, Now Content DIV, we need H1 tag for this section, also because we have some paragraphs we need p tag too :
<div id="content">
<h1 id="content_header"> What Can I Do For You ? </h1>
<p id="main_content"> Lorem ipsum vis eu hinc animal iuvaret, agam munere apeirian cum in. Erroribus suscipiantur ad vim. Eu qui euismod appetere scriptorem, duo in unum porro. Erant alterum cu qui, mea ut partiendo pertinacia, an sea viris alienum.
Ea duo viris intellegat, nam ut quando elaboraret. Populo omnium appetere et eos. Dicant docendi nominavi mel an, eam an probo consul. Eu has quem blandit maiestatis, soleat fierent ex ius.
Et cum facete propriae, mei eu aliquid urbanitas interesset. Nam ex docendi omittantur. Duo cetero laboramus ei, cu dolores accumsan persecuti ius. Liber vivendo vix id, mel ad omnis voluptatibus. Pri an accumsan appareat singulis, ne mel veri epicurei philosophia, te nam enim sonet dolorum.
Vis an sadipscing dissentiunt. Atqui omnium eos id, ei senserit erroribus sed. Est aeterno virtute id, harum aperiri graecis vel eu. Posse quidam nostrud mel no, habeo adipisci at mel. Has munere audire aperiam cu.
Ex vix cetero euripidis, ius tantas perfecto similique ne. Ea duo mundi detracto appareat, pri vocent menandri prodesset ex. Vide labores te vix. Illud aliquam eum ad. Mel in illud vidisse, nec tota iudicabit ad, pericula honestatis eum cu. Qui sonet utroque gloriatur id.</p>
</div>Now for the Sidebar section, we need to put 2 images for our portfolio, so we need img tag :
<div id="sidebar">
<h3 id="recent_work_title"> My Recent Works </h3>
<div class="portfolio_image"> <a href="#"><img src="" alt="Image 1" width="150" height="150"></a> </div>
<div class="portfolio_image"> <a href="#"><img src="" alt="Image 2" width="150" height="150"></a> </div>
</div>I have used another DIV in this section because we have 2 images which has same style, and I gave it a CLASS not ID.
And finally the Site Info is same as navigation section :
<div id="siteinfo">
<h4 id="siteinfo_title">
www.mysite.com
</h4>
<ul id="siteinfo_nav">
<li><a href="#" title="home">home</a></li>
<li><a href="#" title="about">about</a></li>
<li><a href="#" title="portfolio">portfolio</a></li>
<li><a href="#" title="services">services</a></li>
<li><a href="#" title="contact">contact</a></li>
</ul>
</div>
</div>Building a HTML file for our website is complete, now you can save this file and view it in your browser, as I told you before this file has a great readability without styles too, you can easily understand the website structure with this file.
In the next tutorial I will show you how to make CSS for this HTML file… Good Luck…
Final Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<h1 id="header_title"> Welcome to my Site </h1>
<h2 id="slogan"> A Webdesigner Portfolio </h2>
<div id="navigation">
<ul id="main_nav">
<li id="home"><a href="#" title="home">home</a></li>
<li id="about"><a href="#" title="about">about</a></li>
<li id="portfolio"><a href="#" title="portfolio">portfolio</a></li>
<li id="services"><a href="#" title="services">services</a></li>
<li id="contact"><a href="#" title="contact">contact</a></li>
</ul>
</div>
</div>
<div id="content">
<h1 id="content_header"> What Can I Do For You ? </h1>
<p id="main_content"> Lorem ipsum vis eu hinc animal iuvaret, agam munere apeirian cum in. Erroribus suscipiantur ad vim. Eu qui euismod appetere scriptorem, duo in unum porro. Erant alterum cu qui, mea ut partiendo pertinacia, an sea viris alienum.
Ea duo viris intellegat, nam ut quando elaboraret. Populo omnium appetere et eos. Dicant docendi nominavi mel an, eam an probo consul. Eu has quem blandit maiestatis, soleat fierent ex ius.
Et cum facete propriae, mei eu aliquid urbanitas interesset. Nam ex docendi omittantur. Duo cetero laboramus ei, cu dolores accumsan persecuti ius. Liber vivendo vix id, mel ad omnis voluptatibus. Pri an accumsan appareat singulis, ne mel veri epicurei philosophia, te nam enim sonet dolorum.
Vis an sadipscing dissentiunt. Atqui omnium eos id, ei senserit erroribus sed. Est aeterno virtute id, harum aperiri graecis vel eu. Posse quidam nostrud mel no, habeo adipisci at mel. Has munere audire aperiam cu.
Ex vix cetero euripidis, ius tantas perfecto similique ne. Ea duo mundi detracto appareat, pri vocent menandri prodesset ex. Vide labores te vix. Illud aliquam eum ad. Mel in illud vidisse, nec tota iudicabit ad, pericula honestatis eum cu. Qui sonet utroque gloriatur id.</p>
</div>
<div id="sidebar">
<h3 id="recent_work_title"> My Recent Works </h3>
<div class="portfolio_image"> <a href="#"><img src="images/portfolio_1.jpg" alt="Image 1" width="104" height="104"></a> </div>
<div class="portfolio_image"> <a href="#"><img src="images/portfolio_2.jpg" alt="Image 2" width="104" height="104"></a> </div>
</div>
<div id="siteinfo">
<h4 id="siteinfo_title"> www.mysite.com </h4>
<ul id="siteinfo_nav">
<li><a href="#" title="home">home</a></li>
<li><a href="#" title="about">about</a></li>
<li><a href="#" title="portfolio">portfolio</a></li>
<li><a href="#" title="services">services</a></li>
<li><a href="#" title="contact">contact</a></li>
</ul>
</div>
</div>
</body>
</html>
I read similar article also named , and it was completely different. Personally, I agree with you more, because this article makes a little bit more sense for me
[...] previous tutorials I have told you how to design a website template in Photoshop and convert it to valid HTML/CSS [...]