However, this is not as complicated as it seems. My personal approach to design a webpage for clients is to follow a set of simple guidelines, that can help in planning and achieving the desired results.
1)
Draw/Sketch your index.html page (main page). You should know where you are going to place the main sections of your page. No coding at this stage is involved.
e.g. Conceptualise your webpage by sections and categories. You might want a head section (logo, website title), the links section (underneath the head or at the left-hand side of the page), a content section and a footer for your copyrighting and disclaimer texts or a sitemap of your website.
2) Create your HTML and CSS page.
<!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>Tutorial - Getting Started!</title>
<link rel="stylesheet" type="text/css" href="sample.css" />
</head>
<body>
</body>
</html>
Note that for this tutorial, the doctype is Transitional. If you feel confident in your web coding skills, go for Strict. Do not forget to validate your HTML and CSS pages if you want to abide by the futureproof standards of the W3C!
3)
Next stop: transfer those sections into HTML code. Piece of cake if you want my opinion. To maintain a consistent page and to separate content and presentation (and for a neat code!), use divs. NO TABLES PLEASE!
Why so you might ask? Well, if you need to re-organise your sections (e.g. you want your links section to be on the left-hand side of the webpage instead of the top section, you just have to change the CSS (discussed below), without changing the HTML page. This will help you achieve a tidy and efficient code, and it takes a few seconds to do it).
<!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>Tutorial - Getting Started!</title>
<link rel="stylesheet" type="text/css" href="sample.css" />
</head>
<body>
<div id="wrapper">
<div id="top">
<h1>Getting Started!</h1></div>
<div id="links"></div>
<div id="main"></div>
<div id="bottom"></div>
</div><!-- end wrapper -->
</body>
</html>
Note:
I like my page to be centered. Have you noticed that a website looks kinda amateurish and poorly designed when the page is glued to the left? I am sure you don't want that.
4) Now, the interesting part: CSS!
I usually use a body width of 850px that will contain the whole page. Why? Because you have to think about users with low screen resolution. I would recommend 800-850px for the page width (screen excluding borders), but you can change the width depending on your requirements. To achieve this and to contain all the contents in a 850px-wide div, I use the 'wrapper' section.
#wrapper
{
width:850px;
margin:0 auto;
}
#top
{
width:850px;
position:relative;
float:left;
}
#links
{
width:200px;
position:relative;
float:left;
}
#main
{
width:650px;
position:relative;
float:left;
}
#bottom
{
width:850px;
position:relative;
float:left;
}
5) You might also want to specify the font types to be used and the sizes. It is recommended to place your text styles into your 'body' section in the CSS so that everything that you enclose within your body or content section reflects the type changes.
body
{
background-color:black;
font-family:helvetica;
color:#ffffff;
font-size:14px;
}
/***** Text Formatting *****/
h1
{
font-size:20px;
}
h2
{
font-size:18px;
}
Here, it takes less than 20 minutes to do this. This will provide for the structure of your website and everything can be modified from there (width, font, section/div arrangements). Now all you need is to use your creativity and design skills to make your website attractive! The use of pictures for the background, sections and so on is highly recommended!
