Complete Layout - Creation, Slicing & Coding - XHTML Valid
Views Today: 4, Total Views: 30051, Submitted by: Python on 10-07-2006
In this tutorial I will be showing you how to create a complete design starting with the graphics, all the way to slicing and coding it. The end result will be 100% XHTML Strict valid and ready for use. Firstly heres a brief explanation of the design and how it will be made.
The design consist of 4 main sections. These are the header, navigation, content and footer. Each of these will be created seperately using Adobe Photoshop and then coded into the final design. Excluding the images this design will consist of 2 files - index.html and style.css. The index.html file is where the layout itself is built and structured. The style.css file is the stylesheet used which adds style to the design to make it look as we want it. This entire design only uses 6 images but at the same time looks very, very nice!
Here is a screenshot of what you will be creating:
So then, lets begin!
The Beginning
Ok so the first thing we need to do is to get our index.html and style.css files ready. Open up your favourite text editor and create two new files called index.html and style.css.
Place this into index.html
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Tutorial Dash Complete Layout Tutorial</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div id="container">
</div>
</body>
</html>
Place this into style.css
Code
body
{
background: #FFFFFF;
margin: 0;
font-family: "Verdana";
font-size: 11px;
}
#container
{
text-align: left;
width: 760px;
height: 1000%;
margin: auto;
overflow: hidden;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
}
Now let me explain...
In index.html we have put in the basic structure to a webpage. This type of structure is used on pretty much every web page and layout therefore its fairly compulsary. As you would expect there are the <html>, <head> and <body> tags. But in the above code I have also added a div within the body section. This is used to align our design into the center. Right at the top of the file is this line:
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This is the doctype which we will be using. Basically what this does is tell the browser what type of code is in the page - in our case it is XHTML 1.0 Strict.
A little further down in our code there is this line:
Code
<link href="style.css" rel="stylesheet" type="text/css"/>
This is simply a reference to our stylesheet style.css
And just below that:
Code
<link href="style.css" rel="stylesheet" type="text/css"/>
This tells the browser what character set the page is using.
Ok were done with index.html for now. Now Ill explain style.css. Basically what we have done is set some properties to do with the body of our page. We have set the background color to white, the page margin to 0, the pages font to Verdana and the font size to 11 pixels. Also we have set some properties for the "container" div. The code is pretty self explanatory so Im not going to over it in any more detail.
The Header
Now its time to start creating the sections of our design. The first section is the header as I mentioned earlier. We will firstly create the graphics in Adobe Photoshop and then code them into our design.
So then... Open up Adobe Photoshop and create a new document 200px wide by 80px high. Click on the gradient tool in the tools window. If its not there then click and hold down on the paint bucket tool and you should then see a small popup.
Set your gradient to the following:
Press Ctrl + A to select the entire document. Now hold down your Shift key and then from top to bottom, click and drag inside the selected area. You should end up with the following:
Go to Layer >> New Layer and call it "Cover". Use the Rectangular Marquee tool and select the top half of your document. Then use the fill tool and fill in the selected area with white. Now on the Layers panel set the opacity for this layer to 3%. You should now have the following:
For our logo we will be using a very simple technique. Firstly you should go to DaFont.com and download the Pointers font. Once its downloaded copy and paste the font file into your Windows Font directory. Then in Photoshop use your text tool and type in the letter "l". Set the font to Pointers and the font size to 48pt using the character panel. You should set its color to white. You should have something like the following:
Now were going to add some text next to our logo. Im using the Planet Estyle font, again available at DaFont.com - . Simply use the text tool and type in the name of your website. You should move it so it rests just on top of the white line like shown here:
Im now going to add a small slogan beneath the main title text. You should do this with a smaller font. Once you have typed in your slogan and aligned it up so it lies beneath the main title set its opacity to 25%. It should look like the following:
Now thats our logo complete. We now need to export it. To do this go to File >> Save For Web. Using the drop down on the right hand side select PNG-24 and then click Save. With the window that is then displayed browse to where you saved your index.html and style.css files. Create a new folder within called images. Then go into this folder and type "logo" into the File Name box. Click Save.
But dont close that document yet as we still need it for one last thing. Now that we have our logo we need to create the headers background. To do this use the Crop tool. Select a small area of your logos background - the width doesnt matter but make sure the height is the full documents height. You should end up with something like this:
You also need to export this for web. So like before go to File >> Save for web. Make sure it is set for PNG-24 and click save. This time call it "header_bg".
So thats the graphics for our header complete. The next step is to code it so it fits into our design.
Open up your index.html and style.css files which you created earlier. In index.html add this code just after the opening "container" div.
Code
<div id="header">
<img src="images/logo.png" class="logo" alt="Your Logo"/>
</div>
Then add the following onto the bottom of your style.css file:
Code
#header
{
width: 100%;
height: 80px;
background: url('images/header_bg.png');
}
img.logo
{
margin-left: 15px;
}
Basically what we've done here is put a new div into the index.html along with the logo image. Then we have used our stylesheet to style the div.
If you now open up the index.html file in your web browser you should see that right at the top your header is complete.
The Navigation
Now that the header is complete we can start working on our navigation. But before we do that we will add a single, small div just below the header. This will make it look better as well as split up the navigation from the header.
To do this go into Photoshop and create a new document. It should be 10px wide by 3px high. Use the fill tool and fill it with #6EB8F9. Then export it for web and save it as "headerbar". Then add the following code after your header div:
Code
<div id="headerbar">
</div>
Add the following code to the bottom of your style.css file:
Code
#headerbar
{
width: 100%;
height: 3px;
background: url('images/headerbar.png');
}
That will have added a small horizontal bar just beneath the header.
Now lets work on our navigation bar. In Photoshop create a new document 10px wide and 20px high. Use the gradient tool and fill it with a gradient going from top (#FDFDFD) to bottom (#E9E9E9). Export it for web and save it as "nav_bg".
In your index.html file add the following just after the headerbar div:
Code
<div id="navigation">
<a href="" class="navlink">home</a><a href="" class="navlink">tutorials</a><a href="" class="navlink">news</a><a href="" class="navlink">downloads</a><a href="" class="navlink">contact</a>
</div>
Then add the following to the bottom of your style.css file:
Code
#navigation
{
width: 100%;
height: 20px;
background: url('images/nav_bg.png');
border-bottom: 1px solid #CCCCCC;
}
a.navlink
{
float: left;
display: block;
height: 20px;
width: 80px;
text-decoration: none;
color: #999999;
font-weight: bold;
line-height: 20px;
text-align: center;
border-right: 1px solid #CCCCCC;
}
a.navlink:hover
{
background: #EFEFEF;
border-top: 2px solid #999999;
height: 19px;
}
We have now added another div for our navigation bar. Inside this div are some links. Then wever used CSS to style the navigation div and the links.
And thats the navigation complete. The next step is to create the content area.
Content Section
The content section is very simple and doesnt need any images or graphics at all.
Place the following code just beneath your navigation div in the index.html file:
Code
<div id="content">
<h1 class="areatitle">Page Title</h1>
<p class="areatext">
Main page content
</p>
</div>
As you can see we have a div called "content". This is here to basically hold all of the content together to stop any of it overflowing on our design. Within this div is a H1 title and a paragraph. We now need to style these elements with CSS. Place the following code at the bottom of your style.css file:
Code
#content
{
width: 100%;
}
h1.areatitle
{
font-size: 18px;
font-weight: normal;
color: #330033;
font-weight: bold;
border-bottom: 1px dashed #CCCCCC;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
padding: 0;
}
p.areatext
{
margin: 0;
padding: 0;
margin-left: 10px;
margin-right: 10px;
text-align: justify;
}
Here we have set the properties for each of the elements we just added for the content section. You should change the text within the content div in index.html to suit your needs.
The only part remaining now is the footer.
The Footer
The footer is a small section right at the bottom of the layout. This should would usually consist of a copyright notice and perhaps some links to important areas of the website. For this tutorial however I have missed out the footers content - Im sure you can figure it out.
In Photoshop create a new document 10px wide by 30px high. Use the gradient tool and fill it from top(#F7F7F7) to bottom (#ECECEC). Now export this for web and save it as "footer_bg".
Then add the following code after your content div in index.htm:
Code
<div id="footer">
</div>
And then add the following code to the bottom of your style.css file:
Code
#footer
{
width: 100%;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #999999;
height: 30px;
margin-top: 30px;
background: url('../images/footer_bg.png');
}
And that's it. You have now completed the tutorial and if everything was done right you should now have a nice new layout for you to use.
Just to make things easier for you here are the source codes for both index.html and style.css:
index.html
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Tutorial Dash Complete Layout Tutorial</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div id="container">
<div id="header">
<img src="images/logo.png" class="logo" alt=""/>
</div>
<div id="headerbar">
</div>
<div id="navigation">
<a href="" class="navlink">home</a><a href="" class="navlink">tutorials</a><a href="" class="navlink">news</a><a href="" class="navlink">downloads</a><a href="" class="navlink">contact</a>
</div>
<div id="content">
<h1 class="areatitle">Page title</h1>
<p class="areatext">
Content
</p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
style.css
Code
body
{
background: #FFFFFF;
margin: 0;
font-family: "Verdana","Arial";
font-size: 11px;
}
#container
{
text-align: left;
width: 760px;
height: 1000%;
margin: auto;
overflow: hidden;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
}
#header
{
width: 100%;
height: 80px;
background: url('images/header_bg.png');
}
img.logo
{
margin-left: 15px;
}
#headerbar
{
width: 100%;
height: 3px;
background: url('images/headerbar.png');
}
#navigation
{
width: 100%;
height: 20px;
background: url('images/nav_bg.png');
border-bottom: 1px solid #CCCCCC;
}
a.navlink
{
float: left;
display: block;
height: 20px;
width: 80px;
text-decoration: none;
color: #999999;
font-weight: bold;
line-height: 20px;
text-align: center;
border-right: 1px solid #CCCCCC;
}
a.navlink:hover
{
background: #EFEFEF;
border-top: 2px solid #999999;
height: 19px;
}
#content
{
width: 100%;
}
h1.areatitle
{
font-size: 18px;
font-weight: normal;
color: #330033;
font-weight: bold;
border-bottom: 1px dashed #CCCCCC;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
padding: 0;
}
p.areatext
{
margin: 0;
padding: 0;
margin-left: 10px;
margin-right: 10px;
text-align: justify;
}
#footer
{
width: 100%;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #999999;
height: 30px;
margin-top: 30px;
background: url('images/footer_bg.png');
}
You can see this template live in action here!
Post A Comment
If you want to comment on this tutorial you must first register or login.
Syndicate