To develop your first template , you must have a basic knowledge of CSS and HTML. Please go through them first before starting this application, so that you can understand everything in a better way. You can go through these topics at home page.

To start with, you will need a text editor and photoshop. However, if you dont have photoshop , any tool which supports color picking and cropping, will do. In this tutorial, we will be helping you to convert a PSD into a website template using the concepts discussed in our earlier tutorials of CSS and HTML. Later, in the advanced level, we will be using some javascript to further decorate the template.

Before starting our tutorial, we would like to show where we will reach at the end starting from scratch. Check it out

Please download the following files here, which will be required during the project. This is obtained at the end of this tutorial. So, lets start developing our first ever webpage.

Step 1

To start with we will make a folder name project which will further contain two folders for images and css. We will make a file called index.html(blank for now) and a file called main.css (blank) in css folder.

We will then put the doctype and meta tags as explained earlier here in our index file defined. So, this is how our index file will appear for now. Putting meta tags in files help in SEO to some extent and is considered a good practice.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/1999/xhtml">	
<head>
Converting PSD to HTML



</head>
<body>

We will put some designing stuffs here :)

</body> </html>

Step 2

Before putting some designing stuffs there, lets decide how to implemet the template. Looking at the picture shown below which is a simple template, you can say that it consists of three different containers (differentiating on the basis of their background color). The first one contains login and logo of the company, second contains the main matter of the website, while the last one contains the footer. Thats all, we don't need to think anymore.
As we have discussed earlier in CSS that containers in webpages are divs. These divs are customizable in all ways are very friendly. You will come to know about that till the end of the tutorial. So, we will start with making three basics for header(one containing login), contents and footer. This is how the body tag of index file looks after defining these divs.


So, just paste the code above in body tag and see the difference. You will not find anything on webpage, it is because you have not placed any content inside those containers. So, lets fix them at their positions first using some CSS in next step.

Step 3

Seeing the picture of our template, one can guess that the contents of the template do not occupy the complete screen. Instead, they occupy a part of it. So, we will make it of a fixed width say 960 px. However, the background should extend to complete width of screen. So, we will put the content container(div) inside another div which will occupy the full screen, named wrapper. Hence, our modified code looks like this.


Lets fix the design of above defined containers first. Since, we wish to color every pixel of the screen, we need to use the entire screen as body. This can be done by setting the width to 100% and margin to 0. Similarly, as we said earlier that our wrapper will cover the entire screen while contents will take 960 px space in the middle. Putting contents in middle is ensured by putting margin to auto. With this, we can add these to our main.css file

body {
width: 100%;
margin: 0;
}

#contents {
width: 950px;
margin: 0 auto;
}

#wrapper {
width: 100%;
margin: 0;
background-color: #39302b;
}

#header {
width: 100%;
background-color: #2c2520;
min-height: 200px;
}

To remind you, an ID is accessed in CSS by a '#' (hash) , while class is accessed by '.' (dot). We used a color-picker to pick the background color of the template and it was found to be #2c2520. Please note that min-height is set to a container(div), if we wish to see a container of a minimum height irrespective of the amount of contents in the div, because height of a container is decided by the amount of contents and their height by default. However, we can put some constrain by using max-height, min-height.

Step 4

Lets insert the logo of the company now. We will put it in a div called logo and set the logo as its background-image. We need to fix its min-height because there will be no contents in the the div. Please note that we need to put this div inside the header div at the left most corner. The div can be positioned to the leftmost point by setting the float attribute to left. So, make these changes in index file.


We also need to set the CSS of logo div in main.css file You need to crop or extract the logo from PSD and save it in the images folder. Write the code below in your css file to place the logo of the company at the right position.
 #logo {
background-image: url(../images/logo.png);
min-height: 191px;
min-width: 230px;
float: left;
}
 

Step 5

Lets move to the other part of the header, i.e., the login panel. This has to placed in a separate div which would be placed in the rightmost corner of the header. We will set its float attribute to right. We use a h3 tag for putting the heading of the panel. This tag has to be customized so that it looks similar to the one shown in template. To know the font of the design, you can open it in photoshop and get the font name. It was georgia in our case. These styles were given to h3 using following rules :-

  #header h3 {
color: #cbc3ae;
font-family: georgia;
font-size: 15px;
}

  
The HTML portion of the login table will be like this. It comprises of two input fields and header tag and is placed inside header div.
  

CLIENT LOGIN

Username
Password:

Clearly, the input fields seem very odd and different from the one given in template. Lets see how we can improve the presentation using CSS

   #log {
min-height: 200px;
float: right;
color: white;
font-family: Tahoma;
font-size: 70%;
}

#header input {
background-color: #392f2b;
padding: 2px;
}

#login , #Register {
background-color: #483f3c;
min-width: 80px;
max-height: 25px;
color: white;
background-color: #392f2b;
}
   

In the code above, we fix the height and default font of the entire log box. We further changed the background color of the input field. We further adjusted the height of the login and register buttons.

Step 6

Last and most important part of the header is set of links. It is advisable to place the set of links in list tag. It help web crawlers to know more and more about our site in less effort. So, we will place all the links in a separate container , navigation. Here is the HTML part you need to put inside the header div. As explained earlier, we have placed the links as unordered list.

	  
	  

Check the template we made so far in your browser. You will see that the links are not shown in the way we expected. They are placed one after another like notes :(. So, we need to do the rest by CSS.

We will first wish to place the entire div at correct position on the screen. We need to change the CSS of navigation div for fixing that. We fix the position of this div keeping the height of header in mind, since, it should reside at the bottom of the div. The next and most important part is that I need to decorate these links. Please note that we need to change the CSS of li tag for this purpose. We will first set it to inline display. The next step is to remove the default style of representation of a link. We will set the text-decoration to none for this. So, we will have to add these in our CSS file.

#navigation{
padding-top: 158px;
float: right;
margin-right: -200px;
z-index: 100;
}

#navigation li {
display : inline;

}

#navigation a {
text-decoration : none;
font-family: Tahoma, calibri;
font-size: 15px;
color: #f8f8f8;
}

On seeing the webpage, you will notice that links are yet not as shown in the template. Moreover , you would have noticed that one of the link is different from the rest. It is because it has been selected for now. So, we need to design to styles for li tag. However, we will be using class instead of id now. Do you know why ? It is because, we wish to impart same design to a group of tags. However, ID is unique to a particular element. We define two classes active and inactive differing in their background color only. We have grouped the two classes as explained in CSS , so that we have to type least.

.active , .inactive {
min-width: 100px;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 2px;
}

.active {
background-color: #afaba5;
color: black;
}

.inactive {
color: white;
background-color: #392f2b;
}

At the end, we need to distribute the classes among the various li tags. So, update your navigation section in the way shown.In any working website, we add class or remove class using javascript when user clicks a link. Hence, the CSS of the page changes as per the user actions. We will discuss about that in our second part of tutorial which will be uploaded soon.

  
  

Step 7

Once , we are done with the header block, lets move to the contents div. To remind you again, we have placed the content div in another div called wrapper, which streches to the entire screen length. In the contents, we will first implement the welcome part. We will put it in a div called intro1 which will fix the position of the contents. We will put the contents of this div in a sub div called welcome . So, insert the code below in your contents div.

Welcome to Somara

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

There are many variations of passages of Lorem Ipsum available.

We need to define h3 and p style for the welcome div. This is done by nesting as shown.

#intro1 {
min-width: 30%;
max-width: 35%;
min-height: 250px;
float: left;
padding: 10px;
padding-right: 50px;
padding-left: 50px;
color: #cdcdcd;
}
#welcome h3, p {
font-family: Myriad Pro;
color: white;
text-align: center;
font-weight: normal;
}

#welcome p {
color: #cdcdcd;
font-size: 20px;
}

Step 8

Now, we will consider the right part of the contents div. It contains a slideshow. However, we will replace it by a static image for now. We will cover that in our next tutorial series. For now, we will make a div called portfolio and then fix it height using CSS and set its background-image to the image shown.

Css to fix the container configuration is as shown.
#portfolio {
min-width: 45%;
min-height: 250px;
background-image: url(../images/portFolio.jpg);
background-repeat: no-repeat;
float: left;
margin-left: 55px;
}
Please note that we wish the image to appear only once, so we set the background-repeat to none. You might be worrying that even if we need the div to be placed in the right corner, we have set its float attribute to left. We should have set it to right, right ?? The answer is that , here we wish the containers to come one after another. In all other cases we have shown so far, you should notice that we set float to right, only when we required to place the div with respect to the screen. However, we wish the right div to just follow left div. So, both has been set to float to left. For having an idea about margin and padding , you must go through this to continue.

Step 9

Going through the template, you will realize that we need to design three boxes now, each having some text. So, we will start with defining three divs. We will make modifications in this div to reach to the final one step by step. For the time being, we will add these three divs in the contents div as shown :-

Clearly, these divs need same design, so we will group them together and define all the rules. Check out the CSS for giving some basic design to the three containers developed so far.

#box1, #box2, #box3 {
background-color: #2c2520;
margin: 10px;
min-height: 300px;
min-width: 260px;
max-width: 25%;
float: right;
border: 1px solid #28201a;
}

#box1 {
margin-right: 9%;
}

Please note that rightmost div is box 1 in the template, since we have set the float of all to right. We could have done it other way round also by setting the float attribute of all of the boxes to left. We need to set some margin-left to the first box from left in that case. Hope i am making some sense.Lets add some contents to these boxes now.

Step 10

We will start with putting three different images in the three boxes. We will define three different divs for that, each having different classes. Please note that since the picture in all the three boxes are different, we can use ID also instead of class, because we need to define 3 classes for our job.

We will now decide the design of these classes. Since they are similar, we will assign design simulatneously. You can either use the image given in tthe download folder initially or crop the images for your own . Please keep it in the images folder that we made earlier.

.pic1, .pic2, .pic3 {

background-repeat: no-repeat;
float: right;
min-width: 50px;
min-height: 50px;
margin-top: 5px;
margin-right: 25px;
}

.pic1 {
background-image: url(../images/man.jpg);
}
.pic2 {
background-image: url(../images/graph.jpg);
}
.pic3 {
background-image: url(../images/ppl.jpg);
}

Step 11

We need to put the heading and tagline for all of the boxes now. Since they are similar for all the three boxes, we will definately use same class for each of them. We will place the heading in h4 tag and tagline in a different div with a specific class. Lets see the structure of tables, after we add these stuffs to the boxes.

WHY CHOOSE US ?

Opening doors to future and more.

WHY CHOOSE US ?

Opening doors to future and more.

WHY CHOOSE US ?

Opening doors to future and more.

Lets set the style of these classes and h4 , so that it appears exactly similar to the template.

#box1 h4, #box2 h4, #box3 h4{
color: #7b7467;
font-family: Georgia;
text-align: left;
padding-left: 20px;
font-size: 12px;
}

.tagline {
font-family: Tahoma;
font-size: 11px;
color: #d8660d;
padding-left: 20px;
padding-bottom: 4px;
}

As you can see, we have set color, font and its size of the h4 tag. Next step was to impart style to the tagline class. We obtained the color and font-family for each of these different type of texts using photoshop. We required different amount of padding for these classes, so that text appears with proper indentation.

Step 12

Our next target is to draw a line and put the main contents in all of these boxes. We define a div which has a border at its end. We fix its min-height to the thickness of the line. So, it comes out to be a good solid separator. We will then define a div with class text whixh will help us put contents in these boxes with proper indentation. This is how a particular box appears after adding line and text to one of the boxes. Put th eseparator and text class to all the three boxes in the same way.

WHY CHOOSE US ?

Opening doors to future and more.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. There are many variations of passages of Lorem Ipsum available, but the majority have suffered look even slightly believable. erator on the Internet.

We will now define the style properties for the separator and the text class now. While the separator class contains just a border line. Text will contain entire information to be shown in the boxes. Text-align has been set to justify so that text appears in the middle of the boxes.

.separator {
width: 80%;
margin-left: 23px;
text-align: center;
min-height: 2px;
border-bottom: 2px solid #847f79;
}

.text {
font-family: Tahoma;
font-size: 12px;
color: #cdcdcd;
padding-left: 26px;
padding-right: 43px;
padding-top: 12px;
line-height: 1.4em;
text-align: justify;
}

Step 13

Only thing left in this box is the read now button.It has to be in the right end of the boxes, so we will float it to right with proper offsets. Put it in the end of each of the boxes.

Read More !
Style for this button is as defined :-
.read_more {
min-width: 80px;
min-height: 20px;
background-color: #392f2b;
text-align: center;
padding: 5px;
float: right;
margin-right: 15px;
margin-top: 10px;
font-family: Tahoma;
font-size: 12px;
color: #cdcdcd;
cursor: pointer;
}

We fix the min-height, width, background-color, position(float), font, font-size, text-color(color) of this button.

Step 14

Only thing left in the template is the footer now.It contains simple horizontal navigation and a copyright line. We start with introducing navigations. As said earlier, we will be using unordered list to place various links . We need to set the display to be inline for this. To place the things in center , we will be using center tag. To place the line in between the links, we will be using the same trick, a div with a bottom-border, it is called separator2 here.


Step 15

Now , we will be combining them all, so the body of our index.html will look like this :-

Welcome to Somara

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

There are many variations of passages of Lorem Ipsum available.



WHY CHOOSE US ?

Opening doors to future and more.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. There are many variations of passages of Lorem Ipsum available, but the majority have suffered look even slightly believable. erator on the Internet.
Read More !

WHY CHOOSE US ?

Opening doors to future and more.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. There are many variations of passages of Lorem Ipsum available, but the majority have suffered look even slightly believable. erator on the Internet.
Read More !

WHY CHOOSE US ?

Opening doors to future and more.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. There are many variations of passages of Lorem Ipsum available, but the majority have suffered look even slightly believable. erator on the Internet.
Read More !


and this is how the CSS file will seem like :-
body {
width: 100%;
margin: 0;
}

#contents {
width: 950px;
margin: 0 auto;
}

#wrapper {
width: 100%;
margin: 0;
background-color: #39302b;
}

#header {
width: 100%;
background-color: #2c2520;
min-height: 200px;
}

#header h3 {
color: #cbc3ae;
font-family: georgia;
font-size: 15px;
}

#logo {
background-image: url(../images/logo.png);
min-height: 191px;
min-width: 230px;
float: left;
}

#log {
min-height: 200px;
float: right;
color: white;
font-family: Tahoma;
font-size: 70%;
}

#header input {
background-color: #392f2b;
padding: 2px;
}

#login , #Register {
background-color: #483f3c;
min-width: 80px;
max-height: 25px;
color: white;
background-color: #392f2b;
}

#navigation{
padding-top: 158px;
float: right;
margin-right: -200px;
z-index: 100;
}

#navigation li {
display : inline;

}

#navigation a {
text-decoration : none;
font-family: Tahoma, calibri;
font-size: 15px;
color: #f8f8f8;
}

.active , .inactive {

min-width: 100px;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 2px;
}

.active {
background-color: #afaba5;
color: black;
}

.inactive {
color: white;
background-color: #392f2b;
}

#contents {
min-height: 700px;
background-color: #392f2b;
margin: 0px;
}

#intro1 {
min-width: 30%;
max-width: 35%;
min-height: 250px;
float: left;
padding: 10px;
padding-right: 50px;
padding-left: 50px;
color: #cdcdcd;
}

#portfolio {
min-width: 45%;
min-height: 250px;
background-image: url(../images/portFolio.jpg);
background-repeat: no-repeat;
float: left;
margin-left: 55px;
}

#welcome h3, p {
font-family: Myriad Pro;
color: white;
text-align: center;
font-weight: normal;
}

#welcome p {
color: #cdcdcd;
font-size: 20px;
}

#box1, #box2, #box3 {
background-color: #2c2520;
margin: 10px;
min-height: 300px;
min-width: 260px;
max-width: 25%;
float: right;
border: 1px solid #28201a;
}

#box1 {
margin-right: 9%;
}

#box1 h4, #box2 h4, #box3 h4{
color: #7b7467;
font-family: Georgia;
text-align: left;
padding-left: 20px;
font-size: 12px;
}

.tagline {
font-family: Tahoma;
font-size: 11px;
color: #d8660d;
padding-left: 20px;
padding-bottom: 4px;
}

.separator {
width: 80%;
margin-left: 23px;
text-align: center;
min-height: 2px;
border-bottom: 2px solid #847f79;
}

.text {
font-family: Tahoma;
font-size: 12px;
color: #cdcdcd;
padding-left: 26px;
padding-right: 43px;
padding-top: 12px;
line-height: 1.4em;
text-align: justify;
}

.pic1, .pic2, .pic3 {

background-repeat: no-repeat;
float: right;
min-width: 50px;
min-height: 50px;
margin-top: 5px;
margin-right: 25px;
}

.pic1 {
background-image: url(../images/man.jpg);
}
.pic2 {
background-image: url(../images/graph.jpg);
}
.pic3 {
background-image: url(../images/ppl.jpg);
}

.read_more {
min-width: 80px;
min-height: 20px;
background-color: #392f2b;
text-align: center;
padding: 5px;
float: right;
margin-right: 15px;
margin-top: 10px;
font-family: Tahoma;
font-size: 12px;
color: #cdcdcd;
cursor: pointer;
}

#footer {
width: 100%;
text-align: center;
background-color: #2c2520;
margin: -20px;
min-height: 100px;
}

#footer_nav li {
display: inline;
}

#footer_nav a {
color: white;
text-decoration: none;
padding: 5px;
margin-top: 50px;
}

.separator2 {
width: 29%;
margin-left: 37%;
text-align: center;
min-height: 2px;
border-bottom: 2px solid #847f79;
}

#footer p {
color: white;
text-align: center;
font-family: Tahoma;
font-size: 13px;
}
That's all for now. You can convert any design to working website now. In our next tutorial, we will be talking about making this website dynamic by adding a working login, register, slideshow and navigations.

Do post your comments and doubts if any. We will be happy to answer you as soon as possible.

Member Login

Member Login




Not a Member? Sign Up!




Login to comment

Be the first to comment on this topic







  


Continue >>>