Help
Part One - From PSD to XHTML.
Let's get started. Here is the PSD file that we will be turning into a site today, it is for the fictional company DAVES REMOVALS COMPANY.
removals-complete.jpg (184.54K)
Number of downloads: 43
Download PSD
Now you will need to download the PSD from above. I know it isn't the best design in the world, but it is a simple, 2 column layout that is easy to build and will show you a very good, repeatable coding style that will make most layouts very easy and quite quick to code.
Let's get started. First of all, make a folder (either on your desktop or in your localhost folder if you are using a local server) and call that folder something like DAVES-REMOVALS.
Now it is important to plan the coding stage of your site. We need a file structure first. So go ahead and create two folders in your DAVES-REMOVALS folder called: CSS & IMAGES
We are going to do this in two stages. Firstly I will show you how to look at your design and create your XHTML. It is important to get UNSTYLED xhtml which is semantic BEFORE we start adding styling.
So lets get started. Open up your text editor of choice (I am using dreamweaver CS3 because I love the code editor, but you can use what you like)
Create a new file and call it index.html
Inside the index file, we will need to add in the standard xhtml doctype and some other header stuff, so let's do that now.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Daves Removals</title> </head>
Notice that we also gave Dave's site a TITLE. Now for any newbies here (and that's ok.. we were all newbies once
) let me just run this by you all. The doctype will tell the browser which version of xhtml you are using.Then we have the HEAD section, which we just tell the browser things like character set (you can usually ignore this stuff for basic sites anyhow..) and then we have the title. And we make sure we close the HEAD off properly.
Next up we insert the BODY tag and close off the BODY and HTML tags. So you should now have an xhtml file that looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Daves Removals</title> </head> <body> </body> </html>
Now comes the much more fun bit - lets get this site on the page with NO style at all. This is the semantic code bit and it is pure logic. It is very simple when you use your head
First off we analyse the site for one thing: is it centrally aligned? Yes it is. So we need to wrap the whole site in a CONTAINER div.
Inside the body tags (by the way, we are now ALWAYS working inside the body tags) you need to add in a div with the ID container.
<div id="container"> </div><!-- END CONTAINER -->
And notice how I have commented the end of the DIV. This will make it really easy to update our code later on. This is a good habit to be in, and you should ALWAYS comment the end of a structure.
Ok, so now we have a container. This is going to allow us to build the whole site within the confines of one box, and then move that box around (like to the centre of the page) without the layout breaking.
Next up, let's do the header. If we look at out design (the header specifically) then we can see that there are only two main elements. The logo and the call now blurb.
The easiest way to code this would be (remember to keep everything INSIDE your container now):
<div id="container"> <div id="header"> <h1 id="logo">Daves Removals Company</h1><!-- END LOGO --> <h5 id="callNow">Call 020 8555 7898 now <small>for a free, no obligation quote</small></h5><!-- END CALL NOW --> </div><!-- END HEADER --> </div><!-- END CONTAINER -->
Notice the SMALL tags around the second part of the call now box, that will come in handy later on for styling.
Ok, so now we have our header sorted out. Let's move on to the navigation. This is a VERY easy thing to code as it is flat nave with web safe text. So let's get going:
<div id="container"> <div id="header"> <h1 id="logo">Daves Removals Company</h1><!-- END LOGO --> <h5 id="callNow">Call 020 8555 7898 now <small>for a free, no obligation quote</small></h5><!-- END CALL NOW --> </div><!-- END HEADER --> <ul id="navigation"> <li>Homepage</li> <li>About Us</li> <li>Services</li> <li>Testimonials</li> <li>Contact Us</li> </ul><!-- END NAVIGATION --> </div><!-- END CONTAINER -->
See.. How simple was that? Very!
Next up we have the more daunting task of the main content area.
So for the main area, we have two boxes, and both need to be contained within one central div called CONTENT. Look here:
<div id="container"> <div id="header"> <h1 id="logo">Daves Removals Company</h1><!-- END LOGO --> <h5 id="callNow">Call 020 8555 7898 now <small>for a free, no obligation quote</small></h5><!-- END CALL NOW --> </div><!-- END HEADER --> <ul id="navigation"> <li>Homepage</li> <li>About Us</li> <li>Services</li> <li>Testimonials</li> <li>Contact Us</li> </ul><!-- END NAVIGATION --> <div id="content"> <div id="mainText"> <h2>About Daves Removals Company</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer venenatis sodales lorem, at feugiat justo elementum vel. Duis nec nulla enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <p>Fusce quis mi metus. Donec tristique porttitor nibh ac facilisis. Duis nunc ante, aliquam sed porta et, blandit sed diam. Morbi mi lacus, malesuada ut tempus quis, elementum ac sem. Phasellus imperdiet tincidunt risus, a scelerisque lectus imperdiet et. Maecenas quam turpis, placerat eu molestie quis, congue vitae metus.</p> <p>Maecenas ligula dolor, faucibus at sodales vitae, fringilla vel purus. Sed ultrices dignissim nisi nec ullamcorper. </p> <p>Morbi gravida erat vitae metus pulvinar pulvinar. Aliquam libero felis, tristique in convallis non, lacinia eu sapine.</p> </div><!-- END MAIN TEXT --> <div id="quickForm"> <h2>Get a <span class="blue">free</span> quote</h2> <form id="contactForm" method="post" action="#"> <fieldset> <label for="frmName">Name: </label><input name="frmName" id="frmName" type="text" /> <label for="frmEmail">Email: </label><input name="frmEmail" id="frmEmail" type="text" /> <label for="frmTelephone">Telephone: </label><input name="frmTelephone" id="frmTelephone" type="text" /> <label for="frmPostcode">Postcode: </label><input name="frmPostcode" id="frmPostcode" type="text" /> <label for="frmComments">Comments: </label><textarea name="frmComments" id="frmComments" cols="30" rows="10"></textarea> <input type="submit" name="frmSubmit" id="frmSubmit" value="Submit" /> </fieldset> </form> </div><!-- END CONTACT FORM --> </div><!-- END CONTENT --> </div><!-- END CONTAINER -->
And now we have out main content - wasn't that just very very easy?
All that is left to do now is add our footer, and then we need to style everything up. Let's do the footer now, and away we go…
For the footer, we will be coming OUTSIDE of the container - only because, in our design, the footer stretches the whole width of the page, and our container won't do that.
So the code is:
<div id="container"> <div id="header"> <h1 id="logo">Daves Removals Company</h1><!-- END LOGO --> <h5 id="callNow">Call 020 8555 7898 now <small>for a free, no obligation quote</small></h5><!-- END CALL NOW --> </div><!-- END HEADER --> <ul id="navigation"> <li>Homepage</li> <li>About Us</li> <li>Services</li> <li>Testimonials</li> <li>Contact Us</li> </ul><!-- END NAVIGATION --> <div id="content"> <div id="mainText"> <h2>About Daves Removals Company</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer venenatis sodales lorem, at feugiat justo elementum vel. Duis nec nulla enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <p>Fusce quis mi metus. Donec tristique porttitor nibh ac facilisis. Duis nunc ante, aliquam sed porta et, blandit sed diam. Morbi mi lacus, malesuada ut tempus quis, elementum ac sem. Phasellus imperdiet tincidunt risus, a scelerisque lectus imperdiet et. Maecenas quam turpis, placerat eu molestie quis, congue vitae metus.</p> <p>Maecenas ligula dolor, faucibus at sodales vitae, fringilla vel purus. Sed ultrices dignissim nisi nec ullamcorper. </p> <p>Morbi gravida erat vitae metus pulvinar pulvinar. Aliquam libero felis, tristique in convallis non, lacinia eu sapine.</p> </div><!-- END MAIN TEXT --> <div id="quickForm"> <h2>Get a <span class="blue">free</span> quote</h2> <form id="contactForm" method="post" action="#"> <fieldset> <label for="frmName">Name: </label><input name="frmName" id="frmName" type="text" /> <label for="frmEmail">Email: </label><input name="frmEmail" id="frmEmail" type="text" /> <label for="frmTelephone">Telephone: </label><input name="frmTelephone" id="frmTelephone" type="text" /> <label for="frmPostcode">Postcode: </label><input name="frmPostcode" id="frmPostcode" type="text" /> <label for="frmComments">Comments: </label><textarea name="frmComments" id="frmComments" cols="30" rows="10"></textarea> <input type="submit" name="frmSubmit" id="frmSubmit" value="Submit" /> </fieldset> </form> </div><!-- END CONTACT FORM --> </div><!-- END CONTENT --> </div><!-- END CONTAINER --> <div id="footer"> <h6>copyright 2010. all rights reserved. daves removals company.</h6> <ul id="footerNav"> <li>homepage</li> <li>about us</li> <li>services</li> <li>testimonials</li> <li>contact us</li> </ul><!-- END FOOTER NAV --> <h6>website by london web design company, something media</h6> </div><!-- END FOOTER -->
And there we have it. Semantic code for a simple, 2 column website layout. In the next tutorial, I will be showing you how to add in the CSS to make it look exactly like the design in most browsers.
See you next week guys and gals… any questions... just shout at me!
ASSETS:
Download the PSD
Download the full & completed xhtml file
This post has been edited by terydinho: 23 September 2010 - 09:21 AM
