Wed, 2004-12-29 10:49
You have been give a design usually in the form of an image and you need to take the next step, creating the page.
Structure
Firstly take a look at the design, you should be able to spot sections or grouped data such as a header, footer and columns.
Get out a notepad and pen and sketch out each main section it will help you to visualize the sections.
These sections will usually be contained by divisions "div" and within each may be more sections that can also be contained by divs.
Remember not to go overboard with the divs, think about the correct structure of each section and you may be able to use other elements such as lists as containers.
If the design calls for two or more columns it may be helpful to wrap all the columns in a div.
Template
Once you have the basic structure thought out you can start putting the page together.
Start by giving the page a doctype, html, head and body tags then add your divs in the body.
Then using CSS you can position each of the divs where you want them.
It might help to give each of the top level divs an id or class.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#head{background-color:yellow; height:120px;}
#colcontain{border:solid red 1px;}
#cola{background-color:green; width:30%; float:left;}
#colb{background-color:#CCC;}
#footer{background-color:#069; clear:both;}
</style>
</head>
<body>
<div id="head"> Head </div>
<div id="colcontain">
<div id="cola"> column </div>
<div id="colb"> another column </div>
</div>
<div id="footer"> footer </div>
</body>
</html>
The styles in the template above are just an example and are not meant to be correct or finished. You can use this template as a start and add the styles you require to get the site you desire.
Positioning
I like to float columns and position everything else relative or static, but your design may call for absolute positioning.
Which ever method of placement you choose will have benefits and disadvantages.
Experiment and test in different browsers, give each of the divs a background color or border until you find the
right positioning combination for your site.
Once you have everything positioned where it should be you can add padding, margin etc and pretty the site up so that it looks like the original design.
Philosophy
Remember web sites are different to printed media.
With printed media once it is printed it can't be changed, no matter who looks at the printed page it will be the same dimensions, text, and positions as it was when it came out of the printer.
With the web, users have the freedom to choose which operating system, browser/device they use as well as different screen resolutions.
Not everyone will have the same fonts installed and some will have test resized for ease of reading.
The main aim of the site should be to deliver content, so try to make the site accessible to all browsers/devices.
separate the structure (HTML) from the presentation layer (CSS) and where possible allow users the freedom to choose how they view the page.
Make the site look as good as possible in as many browsers as possible, without the need to look exactly the same or pixel perfect in all browsers.
Conclusion
There is lots to consider and learn when developing web pages, far too much to be condensed into one small article.
Hopefully this will at least take you a step in the right direction.
