Draw Your Layout
Simple wireframe 3-column layout
Image courtesy J Kyrnin
You can draw your layout on paper or in a graphics program. If you've already got a wire-frame or even more extensive design in mind, you should simplify it down to the basic boxes that make up the site. This design has 3 columns in the main content area, as well as a header and footer. If you look closely, you can see that the three columns are not equal in width.
Once you have your layout drawn out, you can start thinking of dimensions. This design is going to have the following basic dimensions:
- No more than 900px wide
- 20px gutter on the left
- 10px between columns and rows
- My columns are 250px, 300px, and 300px wide
- The top row is 150px tall
- The bottom row will be 100px tall
Write Basic HTML/CSS and Create a Container Element
Since this page will be a valid HTML document, I need to start out with an empty HTML container:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Then, I add in the basic CSS styles to zero out the page margins, borders, and paddings. While there are other standard CSS styles I normally add to new documents, these styles are the minimum you need to get a clean layout. Add them to the head of your document:
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
</style>
To start building my layout, I always put in a container element. It sometimes happens that you can get rid of the container, but for most fixed-width layouts, having the container element makes it easier to manage across different Web browsers. So in the body I put:
<div id="container"></div>
And in the CSS style sheet I put:
#container { }
Không có nhận xét nào:
Đăng nhận xét