Slice and code a layout Tutorial
As a registered user you can publish your own tutorials on this site, these tutorials will be published as so called Guest tutorials. When the tutorial is published a link to your own site will be added on the specific tutorial's page to boost your unique visitors and search engine ranking, so the more tutorials you add the more back-links you get from this well ranked site. Register an account and start publishing your tutorials!
Step 10:
Then open up a new html file in your favorite xHTML editing tool, I use dreamweaver.
When you have dreamweaver also you can use a basic template, which fills in the basic stuff already for you, that you already know. Like the doctype, body, head tags etc. Shortcut for basic template is File > New > Basic template, then the first HTML page, and set the document type on XHTML 1.0 Transitional.
When your not using dreamweaver use this basic code from the dreamweaver basic template.
<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>
Step 11:
We're going to setup our divs now, this is the easiest part of coding a template, so let's do it. Use the code below, below the code itself is explanation. Place the code inside the body tags.
<div id="header"></div>
<div id="left_container">
<div class="left_top_bar">LEFT TOP BAR</div>
left menu
</div>
<div id="content_container">
<div class="content_top_bar">CONTENT TOP BAR</div>
content
</div>
<div id="right_container">
<div class="right_top_bar">RIGHT TOP BAR</div>
right menu
</div>
<div id="footer"></div>
</div>
First we'll wrap the whole design in a wrapper, this wrapper will contain our main_bg.jpg in our CSS file, this way the design will allways stretch out to the footer.
Then comes the div for the header which contains our header image. the left_container, content_Container and the right_container will be setup so it will function as our menus and content, we do this with floats. Inside these containers we placed our top_bars which will function for our menu/content top_bars we made with the slicing. And lastly we have our footer, which will contains our shadow image and functions as a clear div too to clear the floats we used for the containers. But you'll see it when we make our CSS for this layout.
Step 12:
First make the link for the stylesheet in your HTML document, use the code below
Make a new text file in the same folder as your HTML file, rename this text file to stylesheet.css. And open it with dreamweaver or another editor. Add the code below, it has comments for explanation.
background:#3b4256;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#111111;
/* These are the values around the HTML code, so setting it on 0px will leaves us with no padding around the design, rendering the page at the absolute top. */
margin:0px;
padding:0px;
}
/* Our wrapper, which contains our 1px stretching background image (main_bg.jpg). */
#wrapper{
background:url("images/main_bg.jpg");
width:960px;
/* The following values will place this div in the middle, and since we put every div inside the wrapper it will render the whole page in the middle of the page.*/
margin:0px auto;
padding:0px;
}
/* The header image, with a left float, kinda easy and not much to explain =). */
#header{
background:url("images/header.jpg");
width:960px;
height:203px;
float:left;
}
/* The left container which will contain our whole left menu, it functions sort of like our wrapper layer. we position the container on the left side, give it a width of the total width we need. I'd measured the width of the lm_top.jpg, this image will be our total width. and we give it a float:left to align the div on the left. */
#left_container{
width:203px;
float:left;
}
/* Same as the left container but then a different width which I took from the c_top.jpg image. Float:left to align it to the left, and since the left container didn't fill the whole 960px of the wrapper layer it will join sides with the left container. */
#content_container{
width:555px;
float:left;
}
/* Right container */
#right_container{
width:202px;
float:left;
}
/* Our footer has the clear:both value, we could use clear:left since we only use left floats. But I allways use clear:both for this is the most effective way of clearing floats. */
#footer{
clear:both;
/* Our footer shadow image, */
background:url("images/footer.jpg");
width:960px;
/* the height of the footer image. */
height:81px;
}
And that's basically our setup of the layout, the next step is to make the CSS for the top bars.
I hope you all like the new version's redesign, the new features and what not. There are still some minor bugs those need fixing but I'll get on that in the very near future.
