A while back, I showed you how to design a nice black and orange web site template that could be used as a blog or whatever you want. If you never did that tutorial, you should download the PSD so that you can work from it. Now I’ll be showing you how to code that same design using 100% valid XHTML and CSS. Also, on all the browsers I tested it on (Firefox 2, Internet Explorer 7, Safari 3 Beta, and Opera 9 all on Vista), the page looks great.

 

Here’s the final result: http://tutfire.com/wp-content/uploads/2008/03/BlackAndOrangeCode/index.htm

This tutorial is split up into Slicing and then Coding. You should know how to do both, but if you want to skip to the coding part, Click Here

Step 1

The first step every time that you start coding a site is deciding how you are going to slice it. It’s possible to code this with essentially three columns, each with a fixed width. In this case, the two outer columns would be for the shadow/outer glow border. The problem with this technique is that it is very hard to make a three column, fixed-width template, where each of the columns are the same height. This problem is compounded because just because a page looks good in one browser does not mean that it will look the same in all. This is due to some browsers not rendering pages like they should (I’m looking at you, Internet Explorer).

Instead what we’ll be doing is doing one column (centered, and fixed-width) and including the borders as part of the columns background image. Don’t start slicing yet, but take a look at how we’ll set it up.

Click To Enlarge

Step 2

Let’s start with topScanlines.png. First hide the layer with the logo on it. The pattern we used to make those scanlines up top had a width of 25. So in order for the background to tile correctly, the splice that we make also has to be 25px wide. The height of the scanlines happens to be 131px.

Grab your Rectangular Marquee Tool (M), at the top toolbar, change the style to Fixed Size, and change the height to 25px and the width to 131px. Zoom in a bit, and click on the top left corner of the scanlines. It’s important that you get the right selection.

Once you have this selection, Copy Merged (Shift+Ctrl+C), open up a new document (Ctrl+N), and Paste (Ctrl+V). Next, if you have CS3 go to File>Save for Web & Devices. In CS2 and below this can be found at File>Save for Web. In the dialog box that comes up, set the top setting on the right to PNG-8. Leave all of the other settings alone, and hit save, making sure that you name it topScanlines when you save it.

Step 3

Next, cut out your logo. Some older browsers like IE 6 don’t handle transparency for PNG’s without some hacks, so we’re not going to bother attempting that. Instead just leave all of the layers visible and using your, Rectangular Marquee Tool (M), make a close selection around your entire logo. Then Copy Merged (do not deselect), and Paste it onto a new document like we did before. Again go to Save for Web or Save for Web & Devices and save it as a PNG-8 named logo.

Go back to the document with our template on it, and zoom in to your selection. Make a selection whose bottom-right corner touches the logo selection’s top-left corner, and whose top-left corner is the same as topScanlines.png’s top-left corner. If you don’t still have the logo selection active, step backward (Alt+Ctrl+Z) until you get it back. In your document you won’t have the logo selection selected anymore, but this shows you how they are supposed to touch.

This new selection will tell us how far the logo is from the top-left corner. This will be very useful to know when we are coding. Open up the Info window (F8 or Window>Info), and on the right side you should see values next to W and H. These tell you the width and height of your selection. Be sure to write these numbers down so that we can use them later. In my case, the width was 17px and the height was 18px.

Step 4

Next, let’s cut out contentTop.png. To start zoom in to that area. Notice that there is a dark gray stroke around the outside of this content box, and then a shadow on all sides around it. Our selection needs to go 5 pixels past that gray stroke on the top, left, and right sides; on the bottom, the selection should just barely go past the scanlines. I decreased the image’s width, but other than that your selection should look the same.

Once you have that, Copy Merged (Shift+Ctrl+C), open a new document (Ctrl+N), and Paste it in (Ctrl+V). Save it like we have been doing as contentTop.

Make sure you still have the Rectangular Marquee Tool selected. Click inside the selection and drag it towards the bottom of the content box. Once it gets close to the bottom, hold shift. Holding shift will ensure that it moves straight down. Then zoom in and use the up and down arrow keys to make sure the selection goes 5px past the stroke on the bottom like before. Throughout this whole process, the selection shouldn’t have moved left or right, only straight down. Once you got the right selection, Copy Merged, Paste it on a new document and Save like before. This one should be saved as contentBottom.

Step 5

Drag the selection up a bit until you reach a gap in the text, remembering to hold shift before you let go of your mouse button. Copy merged and go to File>New, but change the height to 5px before you press OK. Paste what you copied in and use the up or down arrow keys if you need to in order to get any text out of the image. Use the same method we’ve been using to save this, but instead of using PNG-8, use GIF with normal settings. Name it contentbg. PNG and GIF both use different compression methods, and GIF happens to work better on small or simple images.

Let’s also take care of bg.png in this step. Underneath the content box you should have a blank gap all the way across the page. Make a selection here that touches the left and right side borders. Next go to Select>Modify>Expand, and use a setting of 46px. Copy Merged and Paste it in a document of height 5px. The width should automatically be set at 949px. Once it’s pasted in, press the up arrow key until there are no white spots and there’s no text or anything like that. Save this as bg using PNG-8.

Step 6

Last step is the easiest. Get your Rectangular Marquee Tool (M), change the Style to Fixed Size again using a width of 25 px and a height of 40px. Click on the top left of the footer and drag it around to get it in place if you have to. Copy this into a new document and save it like we’ve been doing, using GIF because it’s small, and naming it bottomScanlines.

Also make a selection right around the RSS logo, Copy and Paste it onto a new document, saving it with PNG-8 and naming it rss.

Step 7

If you skipped the slicing steps, or you just want to start fresh, here are the images that I have. I’m not going to go in depth on CSS or XHTML because there is way to much to learn for one tutorial. Rather, I’ll show you how powerful CSS is in case you’re considering learning it, or if you already have a bit of experience with CSS, you’ll be able to see what each line is doing.

images.zip

Create a new folder called site, and inside of that create a folder called images.
Inside of the images folder drag all of the images you made or you download. So that bg.png for example would be found at site > images > bg.png.

Now open up notepad (Start>Run>’notepad’), or if whatever fancy pants editor you have (Dreamweaver, Notepad++, etc). With a new document open save it as style.css into the folder site. It has to be in this root folder or else the images will not display correctly later on. Now go ahead and paste this code in, I’ll explain what it does in the next step. Keep in mind that you won’t see the site made just by doing the CSS, because the CSS only styles the page. After we are done with the CSS, we will code the actual XHTML which is the meat of the page.

@charset “utf-8″;
/* CSS Document */
body {
text-align: center;
margin: 0px;
padding: 0px;
background: #1D1D1D;
}
#wrapper {
width: 857px;
height: 100%;
margin: 0px auto 0px auto;
padding: 0px 46px 0px 46px;
text-align: left;
background: url(’images/bg.png’) repeat-y;
}

Step 8

If you are unfamiliar with this code it is called CSS (Cascading Style Sheets). It allows you to quickly style similar elements all in the same place. If you want to learn more, check out W3 Schools. The first two lines aren’t needed, but they are good practice, so just include them in there. The third line just tells the browser that everything until the closing curly bracket ( } ) will be modifying the body. So first everything is centered, then margin and padding and zeroed because some browsers like to add a default margin/padding. Finally the background color sets the background color the the hex value #1D1D1D. I got this value by using the Color Picker Tool in Photoshop.

The wrapper is what we’re going to call the centered container that holds everything in it. It has a ‘#’ in front of it’s name because it will only be used once, so later on you’ll see that this will be an id name instead of a class name. It has a padding of 0px on the top and bottom, but 46px on the left and right, because that’s how long the outside shadow is. The width is 857px, because the width plus the padding on the left and right has to equal the width of bg.png which is 949px. Then height is 100% to stretch across the whole page. The margin is 0px on the top and bottom, but auto on left and right. This, along with the “text-align: center;” in the body tag, ensures that this box will be centered. All of this box’s contents are then aligned to the left, and bg.png is used as a background image and is repeated vertically.

Step 9

#center{
width: 857px;
margin: 0;
padding: 0;
background: url(’images/topScanlines.png’) repeat-x;
}
#left{
float: left;
width: 631px;
margin: 0px 10px 0px 10px;
background-image: url(’images/contentbg.gif’) repeat-y;
}
#inner{
padding: 15px;
margin: 0;
}
#right{
float: left;
width: 175px;
padding: 0px 15px 0px 15px;
}

#center will be describing the container right inside ‘wrapper.’ It has a width of 857px as expected, and its margin and padding are zeroed out just in case. Again we have a background image, but this time it is tiled horizontally.

#left refers to the content box, I gave it a padding on all sides of 15px so that the text wouldn’t be touching the sides, and the margin is 0px. #right will hold the widgets on the right side. It is told to float left so that it appears next to #inner. If we didn’t do this it would appear underneath #inner. It is given a padding of 15px on the left and right, and 0px on the top and bottom. Also it has a width of 175px.

Step 10

#logo{
margin: 0;
position: relative;
left: 17px;
top: 18px;
}
#footer{
clear: both;
height: 27px;
padding: 35px 0px 15px 0px;
margin-top: 20px;
color: #686868;
font: normal 15px Arial, Helvetica, sans-serif;
text-align: center;
background-image: url(’images/bottomScanlines.gif’) repeat-x;
background-position: 0px 35px;
}

#logo is given a margin of 0px. Then it’s position is set to relative, so that we can move it relative to its current position. Once we create the logo, we’ll have it at the top left corner of #inner. Since we want it to look like it does in Photoshop we have to move it a bit. Remember the height and width values you wrote down before? Use those values here for top and left respectively. If you didn’t do the splicing or you’re using my images, just use 17px for left and 18 for top like I have.

The #footer is told to clear ‘both’ which just means that no containers should be next to it on the right or left. This is to stop it from moving up to the right side of #right if the page gets stretched. It has a height of 27px, a 35px padding on the top, 15px padding on the bottom, and margin on the top only of 20px. Then I specified the text size and font family (You have to name a font-family because every different operating system has a different set of fonts that it comes with). The text is centered, there is a horizontally-tiled background image which is moved down 35px to offset the padding.

Step 11

h1{
text-align: center;
padding-top: 20px;
color: #444;
font-family: normal 32px Arial, Helvetica, sans-serif;
}
h1 a{
color: #444;
text-decoration: none;
}
h1 a:hover{
color: #555;
}
h2{
color: #EE5D07;
font: normal 26px Arial, Helvetica, sans-serif;
}
p{
color: #FFF;
font: normal 15px/150% Arial, Helvetica, sans-serif;
}
p.right{
color: #A5A5A5;
font: normal 12px/150% Arial, Helvetica, sans-serif;
}
span.title{
color: #9A3900;
font-weight: bold 14px;
position: relative;
left: -10px;
}

I won’t go into to much detail here, but basically, each of these modifies a different type of text. For example h1 modifies all text in <h1></h1> tags, which in our case is the navigation text. h1 a modifies all text inside of <a></a> tags inside of <h1></h1> tags. In other words this refers to our navigation links. h1 a:hover then just refers to the navigation links when you put your mouse over them. I made them turn slightly brighter when you hover over them so that people know that they are links. p.right referes to all text inside <p></p> tags with a class of ‘right.’ Classes are different than Ids in that they are meant to be used more than once. Save this file.

Step 12

Now open up a new document and save it as index.htm inside of your main site folder. The main page for your webpages should always be called index with whatever file extension you used attached on. Copy and paste this code in.

<!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=utf-8″ />
<title>Your Blog</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>

The first part just tells the browser that this is a XHTML Transitional web page. The part inside of the <head></head> tags contains all of the stuff you want the browser to know before the rest of the page loads basically. This includes the page title, any meta tags which are beyond the scope of this tutorial, and included scripts and stylesheets. We need to include the stylesheet that we just created, which is done in the second to last line.

Step 13

<body>
<div id=”wrapper”>
<div id=”center”>
<img src=”images/logo.png” alt=”Your Site” width=”286″ height=”46″ id=”logo”/>
<h1><a href=”home.htm”>Home</a> | <a href=”blog.htm”>Blog</a> | <a href=”freebies.htm”>Freebies</a> | <a href=”tutorials.htm”>Tutorials</a> | <a href=”about.htm”>About</a></h1>
<div id=”left”>
<img src=”images/contentTop.png” alt=”" height=”20″ width=”631″ />

This fragment starts the body, which is the main part of the web page. Then it starts a div, which is just a container, with the id ‘wrapper.’ This will now refer back to #wrapper inside of our stylesheet. Then the page adds the logo we created and defines its id along with its height width, and what text should be displayed if the image does not load. If you created your images yourself, you should go back and find out what the height and width or your logo.png are so that you can use your values instead of mine. Next I added the navigation text, with each word linking to nonexistent pages, but it gives you an idea of how you could create those pages so that you could actually link to them. Finally the left content area is created and and image is added. Again your height may be different, so go back and check what yours is for contentTop.png.

Step 14

<div id=”inner”>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur justo leo, tempus convallis, convallis sed, egestas a, erat. Pellentesque ante. Nam egestas dapibus sapien. Nullam tincidunt felis et eros. Proin lectus nisl, nonummy nec, ultricies tincidunt, bibendum nec, sem. Morbi tristique volutpat mauris. In sit amet enim vel ligula dictum consectetuer. Aenean ligula quam, iaculis et, pharetra id, vulputate et, lorem. Nulla facilisi. Nullam magna. Praesent justo ante, ultricies ut, consectetuer eget, eleifend vitae, quam. Duis sodales.</p>
<p>Morbi vulputate dapibus metus. Fusce in erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque pharetra. Donec lacinia molestie tortor. Mauris lobortis mollis ipsum. Sed a urna ut metus rutrum semper. Suspendisse hendrerit libero ac elit. Suspendisse tristique cursus purus. Nam nec pede non leo pharetra pharetra. Ut nec mi ac purus luctus blandit. Cras nonummy aliquam lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum suscipit bibendum mauris. Sed ut est a nunc luctus tristique. Ut vestibulum elementum massa. Vivamus eu magna. Ut tellus. Ut sit amet tellus. Mauris pede sem, laoreet ac, consectetuer elementum, tempor eu, orci. Nullam eu ante. Pellentesque rutrum sapien ut magna.</p>
</div>
<img src=”images/contentBottom.png” alt=”" height=”14″ width=”631″ style=”position:relative;top:10px;”/>
</div>
<div id=”right”>
<p class=”right”>
<span class=”title”>Recent Posts</span><br />»New Blog Post<br />
»Hello world!</p>
<p class=”right”>
<span class=”title”>Archives</span><br />
»July 2007</p>
<p class=”right”>
<span class=”title”>Meta</span><br />
»Site Admin<br />
»Logout<br />
»Entries RSS<br />
»Comments RSS<br />
»WordPress.org</p>
<img src=”images/rss.png” alt=”RSS Feed” height=”122″ width=”122″ />
</div>
<div id=”footer”><br />All content Copyright 2008 Your Site.</div>
</div>
</div>
</body>
</html>

Alright I know this looks like a lot, but there really isn’t much to it. First I created the inner div which will store all of the content text. I added a header and the dummy text. Then the inner div is closed and contentBottom.png is added. Once again, your height is probably not 14px, so go back and check, replacing 14px with your height. I added a inline style to that image because Internet explorer was rendering it a little weird. That code just moves the image up to cover up the weird error. Then the div left is closed.

right is opened and all of those widgets are added with some styling along with rss.png. The widgets don’t really do anything of course, so you’d have to get some code somewhere else to paste in their place.

Finally, right is closed, the footer is added, the body is closed, and </html> signifies the end of the document. There you have it. I know this tutorial was really long winded, but once you get the hang of it, this can be a very quick process, assuming Internet Explorer doesn’t throw weird bugs at you of course. Please give me some feedback or ask for some help in the comments, I’d love to hear from you.

Here is the final result again http://tutfire.com/wp-content/uploads/2008/03/BlackAndOrangeCode/index.htm, and here are all the files that I used. site.zip