Welcome to the first PSD to XHTML/CSS tutorial here at psdvibe. We will be converting our most popular layout, Corporate WordPress Style layout into valid xhtml/css which will be cross browser compatible.
Create a html file through Dreamweaver and choose XHTML 1.0 Strict.dtd from the doc type option - save it as index.html.

Create a CSS file through Dreamweaver and name it style.css - you can either place it in the same folder as your html file, or you can make a separate folder - I prefer a separate folder so I am saving my file in “scripts” folder.

Link the Stylesheet with your html document. We will only need a single stylesheet for this tutorial, but in most cases IE6 & 7 tend to mess around a bit so I always create separate stylesheet for them so we can sort out problems related to those browsers- the screen shot below will show you how to add those so that only the browsers they are intended for uses them.

Note: we have to reset our margin and padding if we want to completely control our layout without the interference of automatic margin and paddings which some elements posses so either attach another css file mostly known as reset.css (you can google it) or you can copy the code below in your CSS files

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{
	margin:0;
	padding:0;
}
ul{
	list-style:none;
}
fieldset{
	border:0;
}

Create a folder named as “images” - all your images will go in this folder.

Ok all the base files are now complete - lets open up our PSD and before starting to cut it up we can study the design and plan a bit how we are going to do this. This design looks straight forward to me there aren’t a lot gradients in it most parts are solid colors so we won’t have to make a lot of slice. Ok then let’s start our conversion.

Our design consist of a fixed width content area- which will be fluid in nature (which means will extend in height according to the content in it. The only parts which are extending in width vise are header and footer - they will be extended across the screen no matter what resolution you are in.

So let’s slice the top part which will be across the screen. Please see the attached screen shot below of how I made the slice. There are 2 types of slice tools one is with the arrow other one is without the arrow. For slicing the first one in the list (without the arrow) will be used, after the slice is made when you will hover over the slice the slice tool will become selection slice tool - you can double click the slice to see its properties - give the slice its name you can see that the width of the slice is only 1px that’s because we will be repeating it through CSS. Go into File > Save for web & devices - from there click the selected slice - choose the image type you want it to be saved in and click save. Save it in the images folder.

Note: you can continue and make all slices in one go - and then carry on to create xhtml/css - its upto you how you prefer it. I will be doing it a bit differently I will be creating slices as I go along because I use the slice tool as measuring through different elements (could sound unorthodox - but it works for me)

Open your index.html file and styles.css file in dreamweaver choose the code view for both the files. (you can write the title of the page and meta description to your requirement - I am skipping that part)

Now what we have to do is make that top part of the page to expand from left to right - we already created the slice for it now the CSS comes into play, assign the background to the body selector in CSS after selecting the image type repeat-x so it repeats horizontally across the screen. We will also give the background color of the whole layout in this selector use your color picker to get the color of the background of the layout and give its value before the background link.

body {
position:relative;
background:#383d43 url(../images/body_bg.jpg) repeat-x;
color:#000;
font:62.5% Myriad Pro,Arial,sans-serif;
}

Note: there are other styles as well in the body selectors apart from ‘background’ these syles are common styles which will be common across the body of the page.

Now check in the browser you can see the top bar is there and the background of the whole screen has the same background color as are layout.

Now lets move onto the content - the layout is 943px wide. And it will be centered align in the browser. So we will create a div called ‘wrapper’ you can name it what ever you like - but as it behaves as a wrapper around the whole content so we can use that name. We will set the margin: 0 auto; so it aligns in center. It will automatically calculate the margin from left and right.

#wrapper{
width: 943px;
padding: 0px 0px 0px 1px;
margin:0 auto;
}

Note: though the content is 943px wide but we need the width to be 944px so it has the same difference from left and right. To make the width 944px we won’t increase the width itself, we will increase the padding 1px either from left or right because horizontal padding is added into the width of the div in our case by giving 1px padding from left our wrapper div will have 944px width.

Now the wrapper which will wrap our content is done lets make header - logo and search elements on our page. For header lets calculate the area (as already mentioned I use slice tool to calculate - you can use other ways) which is 65px high and 943px wide. Make a div for it - there are two elements in the header the telephone-number and the top navigation. Both have margins from top - left and right. So I would prefer that we give padding to the header div instead of those elements. Please see screen shot of how i measured that. Do keep in mind that after giving the padding you will have to adjust the width and height accordingly. Now write styles for the text and top navigation like this.

your styles will look like this

#header{
width: 886px;
height: 49px;
font-size: 14px;
padding: 16px 35px 0px 22px;
}
#header p{
float: left;
color: #525961;
}
#header span{
color: #bababa;
}
#header ul{
float:right;
}
#header ul li{
float: left;
margin: 0px 12px 0px 0px;
padding: 0px 0px 0px 12px;
background: url(../images/header_navi_bg.gif) left bottom no-repeat;
}
#header ul li.no_bg{
background: none;
}
#header ul li a{
color:#fff;
}

Your html will look like this.

Now slice the logo and the search button - take measure of the input section and write styles for them.

#logo{
display: inline-block;
width: 255px;
height: 34px;
float: left;
clear: both;
margin: 0px 0px 0px 21px;
background: url(../images/logo.jpg) no-repeat;
text-indent: -9999px;
}
form{
float: right;
}
input{
width: 171px;
height: 17px;
float: left;
padding: 5px 10px;
color: #a0a4a8;
border: none;
}
input#submit{
display: inline;
width: 66px;
height: 27px;
float: left;
margin: 0px 5px 0px 4px;
background: url(../images/search_button.gif) no-repeat;
}

Note: mostly people place logo as image in html or wrapped in a H1 tag which I don’t think is good for SEO - your xhtml should only have one H1 for SEO reasons and an image in an H1 tag won’t help that cause. So you can see in my styles how I have placed logo as a background image so search engine find it as a text not as an image.

Now lets slice the banner and put it in the banner div - you can put that image without the banner div if you want.

By now your html will look like this.

Now the fun part of making the main navigation of the website. Make a slice as shown in the image. Please note that the navigation container has gradient and left-right-bottom border as well (the top one is with the image) so make a slice of the navigation container background with the bottom border included. And give the left and right border using CSS. You could give the bottom border using CSS as well. But for some reason I chose not to. Give padding according to the requirement.

your style sheet will look like this.

#navigation{
width: 926px;
height: 52px;
float: left;
padding: 12px 0px 0px 15px;
background: url(../images/navigation_bg.jpg) repeat-x;
border-left: 1px solid #43474b;
border-right: 1px solid #43474b;
}

Now lets create that navigation. The navigation blocks have blue background which has a gradient make a 1px wide and full height slice of it. And implement it in CSS as seen below. A little overview of that how its done. The list item <“li”> are floating left and in the <“li”> items there is <“a”> tag which is doing the job of shaping that background. The <“a”> tag is behaving as an block element in which the background image is repeated horizontally and given necessary padding so it looks just like the PSD.

your CSS will look like this.

#navigation ul li{
display: block;
float: left;
height: 41px;
}
#navigation ul li a{
display: inline-block;
color: #cbd9e7;
height: 29px;
font-size: 14px;
padding: 12px 24px 0px 24px;
text-transform: uppercase;
}
#navigation ul li a:hover{
text-decoration: none;
background: url(../images/navigation_btn_bg.gif) repeat-x;
}
#navigation ul li.active a{
background: url(../images/navigation_btn_bg.gif) repeat-x;
}

Your html will look like this.

Lets move onto the main text area. You can see it’s a two column design and the background of both the columns are seamlessly together. Either the left column has more content or the right column has more content both the background should be parallel to each other. So firstly make a div called content. Make a slice from left to right of the content area. Which will be 1px in height and 943px wide (this could have been done in a different way as well of just making the slice of the right column background and positioning it to right and giving the background-color of the left column in the content div) though I just made it a one whole slice at the moment which is repeated vertically.

Now lets make a left column div and a right column div both will be floated left and wont have any backgrounds as we already gave backgrounds in the content div. you can see there styles below.

#content{
width: 943px;
float: left;
background: url(../images/content_bg.jpg) repeat-y;
}
#left_column{
width: 620px;
float: left;
}
#right_column{
width: 288px;
float: left;
padding: 18px 18px 0px 17px;
}

Your html will look like this.

Now lets concentrate on the left column at the moment. Make a div called “text” this will be a “class” rather than an “id” because in strict document only a class element can be duplicated. If you duplicate the “id” element the document wont remain valid any more. So its better to use class elements for the items you think you will be using again. Take measurement and write its style again you can either give padding to the div or margins to the elements in it. Write styles for the elements as well. <“h2”> - <“p”> - <“img”>.

.text{
font-family: Helvetica, Arial;
width: 552px;
float: left;
padding: 32px 38px 22px 30px;
}
.text h2{
font-size: 24px;
float: left;
margin: 0px 0px 12px 0px;
color: #fff;
}
.text p{
color: #bcc4c7;
width: 552px;
float: left;
clear: left;
font-size: 12px;
}
.text p img{
float: right;
margin: 0px 0px 0px 20px;
}
.text a.continue{
position: relative;
color: #65b8f9;
float: left;
clear: left;
font-size: 15px;
margin: 30px 0px 0px 0px;
}

your html will look like this

Now the second block of text has different background and top and bottom border as well. So lets make another class named “alternative” and give background and border syles in that.

.alternative{
background: #2a2d32;
border-top: 1px solid #26292e;
border-bottom: 1px solid #26292e;
}

html will look like this.

Now all the 3 blocks of text implemented in the left column div your html will look like this.

Lets move onto the right column. Measure it up give necessary paddings from left and right. Now the heading background will be the only thing used again in the right column so make a div through class and write it styles - padding etc.

.heading{
width: 260px;
height: 29px;
float: left;
padding: 12px 14px 0px 14px;
margin: 0px 0px 18px 0px;
background: url(../images/navigation_btn_bg.gif) repeat-x;
}
.heading h2{
font-size: 17px;
color: #ffffff;
float: left;
font-weight: normal;
}
.heading img{
float: right;
margin: 3px 0px 0px 0px;
}

The advertisement blocks are in <“ul”><“li”> list so make a class for ul give width and height of the blocks and float the list to left - give necessary margin. Please see the screen shot below for more understanding.

ul{
float: left;
margin: 0px 0px 39px 0px;
}
ul.sponsors li{
display: block;
width: 125px;
height: 125px;
float: left;
margin: 0px 0px 0px 10px;
background: url(../images/advertise.jpg) no-repeat;
}

Again the heading is repeated so copy that div and paste it beneath and change the text for the heading. Make styles for the list

ul li{
font-size: 14px;
color: #ffffff;
margin: 0px 0px 17px 11px;
}
ul li span{
color: #65b8f9;
}

Note: the third heading has a background as well. That’s an image floated to right.

Your html will look like this.

Now lets move to the footer. The footer is across the screen so this wont come in out wrapper div which you remember is only 944px wide. And we need the footer to be of 100% width. So we measure the height of the footer and write styles for it give the background. The footer has a top border too which is of different color but not that much of a difference. But I will still write styles for this as I don’t want any details to be lost in the design.
Now lets make a footer container which will be 943px in width and margin set to auto so it aligns in the middle. The navigation is floated to right same as the copyright text. The styles are same as the header navigation so you can copy that and rename the div.

#footer{
width: 100%;
float: left;
clear: both;
height: 120px;
border-top: 1px solid #3c4249;
background: #1e2329;
}
#footer_content{
margin: auto;
width: 943px;
padding: 46px 17px 0px 0px;
}
#footer_content ul{
float: right;
margin: 0px 0px 10px 0px;
}
#footer_content ul li{
float: left;
margin: 0px 0px 0px 12px;
padding: 0px 0px 0px 12px;
background: url(../images/header_navi_bg.gif) left bottom no-repeat;
}
#footer_content ul li.no_bg{
background: none;
}
#footer_content ul li a{
color:#fff;
}
#footer_content p{
float: right;
clear: right;
margin: 0px;
font-size: 12px;
color: #383d43;

Your html will look like this.

Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly.

 
Get a commercial/public use licence for theses files (More info)