Welcome to this massive weblayout coding tutorial which will teach you how to code a template into a tableless xhtml/css valid weblayout that you can use for your website.
For this tutorial, I'm going to use this template:
First of all, we will have to slice our layout into seperate images with Adobe Photoshop. Open your layout (.PSD) and slice it as I did:
Remove plain text before slicing
Remember NOT to include the rectangular plain borders in your slices because we will add them with CSS so the layout loads faster. Make shure that you slice the same images only once and also see that, for the bottom bar, I only slice a tiny 1px width tile. I did that because we will repeat that image with CSS so, again, the page loads faster.
Tip: Name your slices, else it will be very hard to find the right image while coding.
Once you think you sliced everything as you want, go to File -> Save for web and set the settings to PNG-24 (for ALL slices). Then hit save and use following settings:
We're done slicing, now we can move on to the coding, open your favourite text editor and create a basic HTML page.
Code:
<!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><title>MASSIVE layout coding tutorial</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" type="text/css" href="style.css" /></head><body></body></html>
Now we will have to make our basic CSS page, save it as STYLE.CSS
Code:
html, body{ background: #FFFFFF; /* background color */ text-align: center; /* center our layout */ font-family: Arial, Verdana, Helvetica, sans-serif; /* font */ font-size: small; color: #666666;}a /* links */{ color: #333333; text-decoration: none;}a:hover /* links hover */{ color: #666666; text-decoration: underline;}a img{ margin: 0px; /* no whitespace padding: 0px; /* idem */ border: 0px; /* no border around image links */}h1 /* heading 1 */{ font-size: large; color: #2b4676;}h2 /* heading 2 */{ font-size: medium; color: #2b4676;}
Now we have our basic HTML page and basic CSS stylesheet. We are now going to use a technique to center our entire layout. Add this to your CSS:
Code:
#container{ margin: auto; width: 780px; /* size of our layout */}
And this to your HTML (between body tags):
Code:
<div id="container"><!-- layout comes here --></div>
Finally, we can start coding our real layout, I'm going to start with the top, banner and navigation bar.
Code:
#top{ height: 30px; /* top bar height */}#banner{ height: 60px; /* banner height */}#nav{ height: 34px; /* nav bar height */ float: left; font-weight: bold; /* bold */}#nav_1 /* button */{ width: 288px; background: url(images/nav_1.png); height: 34px; float: left;}#nav_2 /* button */{ width: 70px; background: url(images/nav_2.png); height: 34px; float: left;}#nav_3 /* button */{ width: 99px; background: url(images/nav_3.png); height: 34px; float: left;}#nav_4 /* button */{ width: 103px; background: url(images/nav_4.png); height: 34px; float: left;}#nav_5 /* button */{ width: 119px; background: url(images/nav_5.png); height: 34px; float: left;}#nav_6 /* button */{ width: 87px; background: url(images/nav_6.png); height: 34px; float: left;}#nav_7 /* button */ { width: 14px; background: url(images/nav_7.png); height: 34px; float: left;}
HTML (replace # with your links):
[code]<div id="top"> <!-- our top bar --><img src="images/top_1.png" /><!-- the left image --><a href="#"><img src="images/top_2.png" /></a><!-- clickable image --><a href="#"><img src="images/top_3.png" /></a><!-- clickable image --><a href="#"><img src="images/top_4.png" /></a><!-- clickable image --><a href="#"><img src="images/top_5.png" /></a><!-- clickable image --></div><div id="banner"><a href="#"><img src="images/banner.png" /></a></div><div id="nav"><img src="images/nav_1.png" /><span id="nav_1"><p><a href="#">LINK</a></p></span><span id="nav_1"><p><a href="#">LINK</a></p></span><span id="nav_1"><p><a href="#">LINK</a></p></span><span id="nav_1"><p><a href="#">LINK</a></p></span><span id="nav_1"><p><a href="#">LINK</a></p></span>[/i]
This is what you should have now:
And now the header is finished, we can code the content area. We will make 3 columns. CSS:
Code:
#left /* column */{ float: left; width: 220px;}#middle /* column */{ float: left; width: 350px; text-align: left;}#right /* column */{ float: left; width: 209px;}#header_left{ background: url(images/left_header.png); /* left header */ width: 220px; height: 53px;}#header_right{ background: url(images/right_gradient.png) no-repeat; /* right header */ width: 209px; height: 53px;}#box{ background: url(images/right_box.png); /* blue box */ width: 209px; height: 156px; color: #FFFFFF; text-align: left;}#header{ background: url(images/right_header.png) no-repeat; /* list header */ width: 164px; height: 24px; padding-top: 1px; /* whitespace */}.list ul li /* list with arrows */{ list-style-image: url(images/arrow.png); /* arrow */}
HTML:
Code:
<div id="left"><div id="header_left"><br />HEADING</div><p>Content Here</p><p><a href="#"><img src="images/left_readmore.png" /></a></p><p>Content Here</p><p><a href="#"><img src="images/left_readmore.png" /></a></p><p>Content Here</p><p><a href="#"><img src="images/left_readmore.png" /></a></p></div><div id="middle"><div><img src="images/middle_banner.png" /><!-- banner --></div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div><div id="right"><div id="header_right"><br />HEADING</div><div id="box"><!-- box -->Content Here</div><div id="header">CATEGORIES</div><div class="list"><ul><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li></div></div><div>Copyright YourCompany 2006</div>
And your done, using the techniques you learned, you can add more things and code other templates.
Register @ Retire at 21 If you like this tutorial
12-10-2006, 01:42 PM
Tableless xhtml/css valid
Linear Mode
