Web Design | Christian Patti

Learn to make a Template (XHTML, CSS, Photoshop)

Web Design — Chris P. @ 6:52 pm

The aim of this tutorial is to help you learn how to create websites using photoshop, XHTML, and CSS code. We will be using Adobe dreamweaver to work with the code but the difference between my tutorial and many others that use Dreamweaver is that in mine we will be doing all the code. We will be using Dreamweaver just as tool, not a application that does the work for us which gives it a bad reputation among professional web designers.

To get started I’m going to show you how to make a simple website template it photoshop. (Basic photoshop skill and understanding required)

Part #1 | Photoshop

1) So start by creating a new document with the width of 880 pixels and height of 1000 pixels. Do this by going to File – New
You should have something that looks similar to this, make sure to use the zoom tool to zoom to %100.

2) Now create a new layer and make a selection at the top of the document with the width of 880px and the height of 125px. Fill this selection with any color of your choice. Now right click on your layer and go to blending options. A new window should pop up. I applied a gradient overlay in this window with the light color of #666666 and a dark color of #484848.
You should now have something that looks like this.

3) I’m going to add some text to the left side of the gradient we just made which will serve as a logo. You may do something like I’m going to or do something of your own design.
Here is my outcome.

4) Now we are going to make the navigation. Create a new layer and make a selection with the width of 880px and height of 30px. Be sure to make this selection DIRECTLY UNDER but NOT OVERLAPPING the gradient we just made. Now fill this selection with any color. Right click on this layer and go to blending options. We are now going to do another gradient overlay just as we did with the header gradient we previously made. The gradient I made had the dark color of #0f84c7 and light color of #169be8. I also added a small dropshadow.
Here are my settings for this layer.

You should now have something that looks like this.

5) Great so now our navigation is done lets make some of the main structure of the page content. We will make a small bar on the left and a big box on the right. These two areas will store most of our content. Create a new layer and make a selection on the left side of the document with the width of 200px and the height of 600px. This selection MUST be DIRECTLY underneath the navigation we created. It CANNOT overlap. Fill the selection with the color #f4f7f9. I also added a dropshadow to the right side of this box for added effects.

Now you should have something that looks like this.

6) Were going to leave the right side blank because we will add content and text on that side with code. So extra photoshop work on that side isn’t needed. Lets progress to the footer. I made my footer rather fancy. You may make yours like mine or do something of your own design but be sure that you make something that flows with the rest of our web 2.0 template.

I’ll show you how I made my footer. First I made a new layer then a selection of width 880px and height 210px. I filled the selection with this color #373737 and then I added a 2px line with the color #111111 going across the top of the selection we just made. Then I made a new layer and made a selection with the width of 880px and the height of 185px over the bottom of the footer. Leaving a 25 pixel gap at the top. Fill this selection with any random color then apply a gradient overlay with the light color of #333333 and dark color of #212121.
Here are the gradient settings.

For the final step to finish the footer I made a new layer and a selection of width 880px and height 60px. Then I filled this layer using the gradient tool NOT gradient overlay. Here is a picture to explain.

Now change the opacity and fill for that layer to %21 and you should have something like this.

Congrats! You just made a cool web 2.0 template in photoshop. Easier than it looks isn’t it?

Part #2 | Slicing and Cutting

1) We are going to cut up parts of the template we made so we can code them into the template. NOTE we are not slicing the WHOLE template and having photoshop code it like many other tutorials and people do. That is not recommended at all. The point of this tutorial is to promote coding your templates and not using a program like dreamweaver to do the work for you.

Start by slicing your logo using the slice tool like this. Once you make the slice right click and edit the slice options. Change the name to logo.

2) Now make a small slice to the right of the logo in the header. Name it header_repeat.

3) Now make a small slice of the navigation bar like this. Name it nav_repeat.

4) Make a thin slice across the entire body like this. Name it body_repeat.

5) Make a thin slice in the footer like this. Name it footer_repeat.

6) Your done slicing! =) Now make a folder on your desktop and name it what you want. I’m going to name mine tutorial_template. Save the PSD of your work in this folder. Next go to File – Save for web. Now make your settings on the right look like this.

Now click save in the top right of the window. Another window will pop up choose the folder you made on your desktop, and make sure the settings look like this.

That saved all the slices you made into separate images in a directory called images in your folder on your desktop you made.

You just sliced the template you made!

Part #3 | The code (XHTML/CSS)

1) This is the part of the process where we see tantrums and tears along with anger and confusion. I’m going to try to help change that by helping you understand the basics step by step.

In this tutorial we are going to keep our XHTML and CSS in the same document to keep things simple. So to start out open up dreamweaver and create a new basic html document. Click the code tab near the top and you will see this.

Now go to File – Save and navigate to the folder you made on your desktop. Now save the document as index.html

2) This is the code Dreamweaver gives us when we create a basic html document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> </body> </html>

This is the basic barebones structure of the xhtml page that we will be building off of. First lets add our <style> tags. This is where all our CSS will go.

</style> </head>

<body> </body> </html>

Now lets add a CSS definition that will apply the background of the page and style the background and main body of the page. Remember all CSS goes between <style> and </style> so make sure to put this and all other CSS in there or it wont work.

body { background: #FFFFFF; /* This adds a 40 pixel space between the top of the page and the header */ margin-top: 40px; /* This adds a 40 pixel space between the top of the page and the header */ padding: 0; }

We just learned some important things about CSS. First off the part that says body is our selector. Since it has no “.” or “#” in front of it, it is applied globally. So .body is NOT the same as body. We also learned the basic structure of a CSS element. The first part is the selector. The selector in the CSS we just did was called “body”. After the selector the CSS element is opened with “{” and closed with “}”. All our CSS attributes and properties go between those. A CSS property is what you wish to change, such as “background” and the attributes are what comes after the “background” they basically define how we are styling the “background”. Attributes are opened with “:” right after the property and they are closed with “;”. Here are some examples to help you get the idea.

selector { property: attribute; }

Which is the same thing as

selector { property: attribute; }

A css property can have multiple properties and attributes. Heres a quick example.

selector { property: attribute attribute; property: attribute; }

or a more practical example

body { background: #FFFFFF url(images/bodybackground.gif); margin: 0; }

With that one CSS element we made the background of the page white and also applied an image to the background. We then made the background of the page have no margin. CSS is cool eh? Now lets get back to coding the template now that you semi understand css.

So far thats what you have for CSS. Our next step is to create a wrapper. The wrapper is going to hold all the code of the page and align it correctly.

So in our html we will add a wrapper div like this between the body tags since thats where all html code for the page MUST go.

<body> <div class="wrapper"> </div> </body>

Did you notice the class=”wrapper” that we added to the div? All this does is makes wrapper the CSS selector for this div. Sounds complicated but it really isn’t, it just means that this.

.wrapper { background: #FFFFFF; width: 880px; border: 1px solid #a1a1a1; margin: 0 auto; /* This centers the wrapper, don't ask why */ }

Gets applied to this

<div class="wrapper"> </div>

So after we added our wrapper div to the html we add this to our CSS.

.wrapper { background: #FFFFFF; width: 880px; border: 1px solid #a1a1a1; margin: 0 auto; /* This centers the wrapper, don't ask why */ }

So now the code for our whole page should look like this.

<body> <div class="wrapper">

</div> </body> </html>

Starting to understand a little? Thats pathetic if you aren’t. Just kidding!

4) Now that you have a basic understanding I’m going to keep showing you the steps to code the template, with less explanation now though since you kinda understand now. Lets do our header and logo.

<div class="wrapper"> <div class="header"> </div> </div>

Thats the html and now lets do the CSS.

.header { background: url(images/header_repeat.jpg) repeat-x; /* This makes the small little slice we made repeat from the left all the way to the right */ height: 125; width: 880px; }

Now lets add in the html for our logo image,

<div class="wrapper"> <div class="header"> <img src="images/logo.jpg" alt="Yoursite.com" border="0" /> </div> </div>

So heres the full code so far.

<body> <div class="wrapper"> <div class="header"> <img src="images/logo.jpg" alt="Yoursite.com" border="0" /> </div> </div> </body> </html>

And heres a screenshot of what it should look like so far.

Sweet our logo and logo background is done.

5) Now we are going to procede to the navigation. In the navigation we are going to learn about something new called lists. First lets add this to our html.

<div class="wrapper"> <div class="header"> <img src="images/logo.jpg" alt="Yoursite.com" border="0" /> </div> <div class="navigation"> </div> </div>

Now lets add this to our CSS

.navigation { background: url(images/nav_repeat.jpg) repeat-x; width: 880px; height: 31px; }

Take a look now, its really starting to come together.

Now lets add our links on to our navigation bar we have there. First add this to our html.

<div class="navigation"> <ul> <li><a href="#:">Link #1</a></li> <li><a href="#:">Link #2</a></li> <li><a href="#:">Link #3</a></li> <li><a href="#:">Link #4</a></li> <li><a href="#:">Link #5</a></li> </ul> </div>

The
<ul> opens the list and the </ul> closes the list. Each <li> opens a list item and each </li> closes the list item. Now lets style the list. Here is the the commented CSS.

ul { list-style-type: none; /* This makes the list have no bullets */ margin: 0; padding-top: 5px; /* This makes the links in the middle of the navigation bar */ } li { float: left; /* This makes the list span left to right instead of left to right */ margin-right: 10px; /* This puts a 10 pixel space between the links */ } ul a { /* This styles the links */ color: #FFFFFF; /* This makes the links white */ font-family: 'century gothic'; /* This changes the font */ text-decoration: none; /* This makes the links not underlined */ } ul a:hover { /* This styles the links when you hover over them with your mouse */ text-decoration: overline underline; /* This puts a line on the top and bottom of the links when you hover over them */ }

Your template should now look like this in a browser, and the links when hovered over should have a overline and underline.

6) Now lets do the left side of our main content. Firstly lets add some additional CSS properties to our already existing classes.

body { background: #FFFFFF; margin-top: 40px; /* This adds a 40 pixel space between the top of the page and the header */ padding: 0; font-family: Helvetica; /* Changes font globally */ color: #5e6468; /*changes font color globally */ }

And we have to add the background image to our wrapper so we get our columns going down the page. We also have to applied an overflow property to keep the columns working correctly.

.wrapper { background: url(images/body_repeat.jpg) repeat-y; /* Creates the columns going down the page */ overflow: hidden; /* Makes the columns expand and work correctly */ width: 880px; border: 1px solid #a1a1a1; margin: auto; /* This centers the wrapper, don't ask why */ }

Now lets add our html

<div class="wrapper"> <div class="header"> <img src="images/logo.jpg" alt="Yoursite.com" border="0" /> </div> <div class="navigation"> <ul> <li><a href="#">Link #1</a></li> <li><a href="#">Link #2</a></li> <li><a href="#">Link #3</a></li> <li><a href="#">Link #4</a></li> <li><a href="#">Link #5</a></li> </ul> </div> <div class="leftbox"> </div> <div class="rightbox"> </div> </div>

Now lets add the css for our two new classes

.leftbox { float: left; width: 225px; } .rightbox { width: 655px; margin-left: 225px; }

7) Now lets add some content and text into our columns. First off lets make the <p> tag (paragraph tag) have pading so the text will have a space all along the outside of it to keep it neat. So add this to the css.

p { padding: 5px; }

Lets add our content now. Copy and paste the text and code between the two box divs and put them on your page between your two box divs. Here is the content and code I added.

<div class="leftbox"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce luctus felis ut sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla pellentesque nibh egestas ligula. <a href="#">Aliquam</a> erat volutpat. Pellentesque pellentesque massa in diam. Phasellus est arcu, ullamcorper ut, adipiscing ut, tristique lacinia, nulla. Phasellus eu enim sit amet arcu laoreet sagittis. Mauris et dui. Ut ut nisi nec sem pulvinar imperdiet. Duis suscipit, nunc vel suscipit <a href="#">bibendum</a>, arcu tortor ornare tortor, quis elementum odio lacus eu neque. Donec non elit. Nulla massa. Sed et velit sed magna fermentum facilisis. Fusce eu metus. Integer laoreet, metus at volutpat tristique, magna dolor volutpat orci, in ultrices sem nisl eget ipsum. Mauris placerat urna euismod nulla. Integer metus turpis, <a href="#">consectetuer</a> nec, posuere sit amet, vulputate vel, libero. Nulla sit amet mi.</p> </div> <div class="rightbox"> <p>Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Fusce luctus felis ut sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos <a href="#">hymenaeos</a>. Nulla pellentesque nibh egestas ligula. Aliquam erat volutpat. Pellentesque pellentesque massa in diam. Phasellus est arcu, ullamcorper ut, adipiscing ut, tristique lacinia, nulla. Phasellus eu enim sit amet arcu laoreet sagittis. Mauris et dui. Ut ut nisi nec sem pulvinar imperdiet. Duis suscipit, nunc vel suscipit bibendum, arcu tortor ornare tortor, quis elementum odio lacus eu neque. Donec non elit. Nulla massa. Sed et velit sed magna fermentum facilisis. Fusce eu metus. Integer laoreet, metus at volutpat tristique, magna dolor volutpat orci, in ultrices sem nisl eget ipsum. Mauris placerat urna euismod nulla. Integer metus turpis, consectetuer nec, posuere sit amet, vulputate vel, libero. Nulla sit amet mi.</p><br /> <p>Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Fusce luctus felis ut sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos <a href="#">hymenaeos</a>. Nulla pellentesque nibh egestas ligula. Aliquam erat volutpat. Pellentesque pellentesque massa in diam. Phasellus est arcu, ullamcorper ut, adipiscing ut, tristique lacinia, nulla. Phasellus eu enim sit amet arcu laoreet sagittis. Mauris et dui. Ut ut nisi nec sem pulvinar imperdiet. Duis suscipit, nunc vel suscipit bibendum, arcu tortor ornare tortor, quis elementum odio lacus eu neque. Donec non elit. Nulla massa. Sed et velit sed magna fermentum facilisis. Fusce eu metus. Integer laoreet, metus at volutpat tristique, magna dolor volutpat orci, in ultrices sem nisl eget ipsum. Mauris placerat urna euismod nulla. Integer metus turpis, consectetuer nec, posuere sit amet, vulputate vel, libero. Nulla sit amet mi.</p> </div>

8 ) Notice that I added some links in the paragraphs? Well lets style all the links globally in CSS. Add this to your CSS.

a { color: #118bcb; /* globally changes the color of links unless otherwise specified */ font-family: 'century gothic'; /* globally changes the font of links unless otherwise specified */ text-decoration: none; /* globally makes links not underlined unless otherwise specified */ border-bottom: 1px dotted #585858; /*makes links have a small dotted underline via a border */ font-weight: 600; /* makes links slightly bold unless otherwise specified */ }

Now if you look your links look nice and web 2.0ish (I don’t think thats a word lol). We have one problem though, what we just did also changed our navigation links a bit by making them have a dotted underline and making them slightly bold. To correct this add this to your navigation links css.

ul a { /* This styles the links */ color: #FFFFFF; /* This makes the links white */ font-family: 'century gothic'; /* This changes the font */ text-decoration: none; /* This makes the links not underlined */ font-weight: 500; /*makes the links not bold */ border-bottom: 0; /* makes the links have no dotted underline */ }

Great so here is our code so far.

And here is what it should look like in the browser.

9) Great so all thats left is our footer. Lets doo it up foo. K I’ll stop now. First add the html for the footer. Like this. (Added code is at the bottom. durrr =)

<div class="rightbox"> <p>Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Fusce luctus felis ut sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos <a href="#">hymenaeos</a>. Nulla pellentesque nibh egestas ligula. Aliquam erat volutpat. Pellentesque pellentesque massa in diam. Phasellus est arcu, ullamcorper ut, adipiscing ut, tristique lacinia, nulla. Phasellus eu enim sit amet arcu laoreet sagittis. Mauris et dui. Ut ut nisi nec sem pulvinar imperdiet. Duis suscipit, nunc vel suscipit bibendum, arcu tortor ornare tortor, quis elementum odio lacus eu neque. Donec non elit. Nulla massa. Sed et velit sed magna fermentum facilisis. Fusce eu metus. Integer laoreet, metus at volutpat tristique, magna dolor volutpat orci, in ultrices sem nisl eget ipsum. Mauris placerat urna euismod nulla. Integer metus turpis, consectetuer nec, posuere sit amet, vulputate vel, libero. Nulla sit amet mi.</p><br /> <p>Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Fusce luctus felis ut sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos <a href="#">hymenaeos</a>. Nulla pellentesque nibh egestas ligula. Aliquam erat volutpat. Pellentesque pellentesque massa in diam. Phasellus est arcu, ullamcorper ut, adipiscing ut, tristique lacinia, nulla. Phasellus eu enim sit amet arcu laoreet sagittis. Mauris et dui. Ut ut nisi nec sem pulvinar imperdiet. Duis suscipit, nunc vel suscipit bibendum, arcu tortor ornare tortor, quis elementum odio lacus eu neque. Donec non elit. Nulla massa. Sed et velit sed magna fermentum facilisis. Fusce eu metus. Integer laoreet, metus at volutpat tristique, magna dolor volutpat orci, in ultrices sem nisl eget ipsum. Mauris placerat urna euismod nulla. Integer metus turpis, consectetuer nec, posuere sit amet, vulputate vel, libero. Nulla sit amet mi.</p> </div> <div class="footer"> </div> </div> </body> </html>

Now lets add some CSS. for the footer.

.footer { background: #212121 url(images/footer_repeat.jpg) repeat-x top left; /* We made the background color #212121 and made the footer slice repeat left to right starting from the top left of the footer */ width: 880px; height: 210px; clear: both; /* this makes the footer go underneath the two column divs */ }

Now lets add a bottom-margin of 0 to the body tag so we have no space between the footer and the bottom of the browser.

body { background: #FFFFFF; margin-top: 40px; /* This adds a 40 pixel space between the top of the page and the header */ margin-bottom: 0; padding: 0; font-family: Helvetica; color: #5e6468; }

Look our footer is done!!! Now I’m going to add some content to it, only this time I’m not giving you steps. I want you to use what you have learned in this tutorial and add some content to the footer by yourself. You can look at my finished code after if you want to do exactly what I did.

Now get to work!

Heres my finished code for the site. I’m all done. Take a look at it if you need ideas for your footer. Or if you want to just copy mine like a newb. Just kidding!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Yoursite.com</title> <style type="text/css"> body { background: #FFFFFF; margin-top: 40px; /* This adds a 40 pixel space between the top of the page and the header */ margin-bottom: 0; padding: 0; font-family: Helvetica; color: #5e6468; } .wrapper { background: url(images/body_repeat.jpg) repeat-y; overflow: hidden; width: 880px; border: 1px solid #a1a1a1; margin: auto; /* This centers the wrapper, don't ask why */ } .header { background: url(images/header_repeat.jpg) repeat-x; /* This makes the small little slice we made repeat from the left all the way to the right */ height: 125px; width: 880px; } .navigation { background: url(images/nav_repeat.jpg) repeat-x; width: 880px; height: 31px; } ul { list-style-type: none; /* This makes the list have no bullets */ margin: 0; padding-top: 5px; /* This makes the links in the middle of the navigation bar */ } li { float: left; /* This makes the list span left to right instead of left to right */ margin-right: 10px; /* This puts a 10 pixel space between the links */ } ul a { /* This styles the links */ color: #FFFFFF; /* This makes the links white */ font-family: 'century gothic'; /* This changes the font */ text-decoration: none; /* This makes the links not underlined */ font-weight: 500; border-bottom: 0; } ul a:hover { /* This styles the links when you hover over them with your mouse */ text-decoration: overline underline; /* This puts a line on the top and bottom of the links when you hover over them */ } .leftbox { float: left; width: 225px; } .rightbox { width: 655px; margin-left: 225px; } p { padding: 5px; } a { color: #118bcb; font-family: 'century gothic'; text-decoration: none; border-bottom: 1px dotted #585858; font-weight: 600; } .footer { background: #212121 url(images/footer_repeat.jpg) repeat-x top left; /* We made the background color #212121 and made the footer slice repeat left to right starting from the top left of the footer */ width: 880px; height: 210px; clear: both; /* this makes the footer go underneath the two column divs */ } .footerleft { float: left; /* puts this list on the left side of the footer */ margin: 5px; /* puts a 5 pixel space around the list to keep it neat */ } .footerright { float: right; /* puts this list on the right side of the footer */ margin: 5px; /* puts a 5 pixel space around the list to keep it neat */ } .footerlist { list-style-type: square; /* This makes the list have square markers */ margin: 0; padding-top: 5px; /* This makes the links in the middle of the navigation bar */ } .footerlist li { float: none; /* makes the list go up and down instead of left to right */ margin: 0; /* makes no unwanted spaces */ } .footerlist a { /* this styles the links in our list */ color: #118bcb; font-family: 'century gothic'; font-size: 10pt; text-decoration: none; border-bottom: 1px dotted #585858; font-weight: 600; } </style> </head> <body> <div class="wrapper"> <div class="header"> <img src="images/logo.jpg" alt="Yoursite.com" border="0" /> </div> <div class="navigation"> <ul> <li><a href="#">Link #1</a></li> <li><a href="#">Link #2</a></li> <li><a href="#">Link #3</a></li> <li><a href="#">Link #4</a></li> <li><a href="#">Link #5</a></li> </ul> </div> <div class="leftbox"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce luctus felis ut sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla pellentesque nibh egestas ligula. <a href="#">Aliquam</a> erat volutpat. Pellentesque pellentesque massa in diam. Phasellus est arcu, ullamcorper ut, adipiscing ut, tristique lacinia, nulla. Phasellus eu enim sit amet arcu laoreet sagittis. Mauris et dui. Ut ut nisi nec sem pulvinar imperdiet. Duis suscipit, nunc vel suscipit <a href="#">bibendum</a>, arcu tortor ornare tortor, quis elementum odio lacus eu neque. Donec non elit. Nulla massa. Sed et velit sed magna fermentum facilisis. Fusce eu metus. Integer laoreet, metus at volutpat tristique, magna dolor volutpat orci, in ultrices sem nisl eget ipsum. Mauris placerat urna euismod nulla. Integer metus turpis, <a href="#">consectetuer</a> nec, posuere sit amet, vulputate vel, libero. Nulla sit amet mi.</p> </div> <div class="rightbox"> <p>Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Fusce luctus felis ut sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos <a href="#">hymenaeos</a>. Nulla pellentesque nibh egestas ligula. Aliquam erat volutpat. Pellentesque pellentesque massa in diam. Phasellus est arcu, ullamcorper ut, adipiscing ut, tristique lacinia, nulla. Phasellus eu enim sit amet arcu laoreet sagittis. Mauris et dui. Ut ut nisi nec sem pulvinar imperdiet. Duis suscipit, nunc vel suscipit bibendum, arcu tortor ornare tortor, quis elementum odio lacus eu neque. Donec non elit. Nulla massa. Sed et velit sed magna fermentum facilisis. Fusce eu metus. Integer laoreet, metus at volutpat tristique, magna dolor volutpat orci, in ultrices sem nisl eget ipsum. Mauris placerat urna euismod nulla. Integer metus turpis, consectetuer nec, posuere sit amet, vulputate vel, libero. Nulla sit amet mi.</p><br /> <p>Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Fusce luctus felis ut sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos <a href="#">hymenaeos</a>. Nulla pellentesque nibh egestas ligula. Aliquam erat volutpat. Pellentesque pellentesque massa in diam. Phasellus est arcu, ullamcorper ut, adipiscing ut, tristique lacinia, nulla. Phasellus eu enim sit amet arcu laoreet sagittis. Mauris et dui. Ut ut nisi nec sem pulvinar imperdiet. Duis suscipit, nunc vel suscipit bibendum, arcu tortor ornare tortor, quis elementum odio lacus eu neque. Donec non elit. Nulla massa. Sed et velit sed magna fermentum facilisis. Fusce eu metus. Integer laoreet, metus at volutpat tristique, magna dolor volutpat orci, in ultrices sem nisl eget ipsum. Mauris placerat urna euismod nulla. Integer metus turpis, consectetuer nec, posuere sit amet, vulputate vel, libero. Nulla sit amet mi.</p> </div> <div class="footer"> <div class="footerleft"> <ul class="footerlist"> <li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a href="#">Pellentesque pharetra placerat lectus.</a></li> <li><a href="#">Donec sollicitudin venenatis ipsum.</a></li> <li><a href="#">Suspendisse auctor lectus vel lacus.</a></li> <li><a href="#">Pellentesque non diam et massa facilisis mattis.</a></li> <li><a href="#">Aenean ultricies sem non sapien.</a></li> <li><a href="#">Donec sed dui at lorem sagittis volutpat.</a></li> </ul> </div> <div class="footerright"> <ul class="footerlist"> <li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a href="#">Pellentesque pharetra placerat lectus.</a></li> <li><a href="#">Donec sollicitudin venenatis ipsum.</a></li></li> <li><a href="#">Suspendisse auctor lectus vel lacus.</a></li> <li><a href="#">Pellentesque non diam et massa facilisis mattis.</a></li> <li><a href="#">Aenean ultricies sem non sapien.</a></li> <li><a href="#">Donec sed dui at lorem sagittis volutpat.</a></li> </ul> </div> </div> </div> </body> </html>

Your Done! So if you started this tutorial with basic Photoshop, XHTML and little CSS knowledge your now a full fledged web designer. Well not really but you should have a much much better understanding and are well on the path to greatness!

Comments (2)

Tutorials

Pages

Pages

Learn to make a Template (XHTML, CSS, Photoshop)

Part #1 | Photoshop

Part #2 | Slicing and Cutting

Part #3 | The code (XHTML/CSS)

Affiliates