How to make a layout in an hour
The first thing I do when it comes to creating a layout is to sketch a picture of it in Photoshop or MS Paint. This helps me to know roughly what I need to code. Then, I make any necessary graphics (like a header banner and a background).
Next, we get onto the actual coding. For this example, we’re going to be using xHTML 1.0 Strict.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Calm Banana</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
That’s the basic structure I use for my first draft of any page I code. There’s the essential doctype (so the browser knows which version of xHTML I’m using). There’s the <head> part, the <body> part, and finally the closing </html> tag.
If you think of a document as a person (I believe Jem’s also suggested this), you have the head and the body. All CSS styling belongs in the head. Compare this with yourself. Which part of you gives you your style? Which part of you decides how you dress? Is it your body? No, it’s your head. Put all your CSS in your <head>!
If you’re wondering why I’ve got an internal stylesheet and not an external one; it’s because whilst making the template I spend a lot of time editing both the XHTML and the CSS of the page. Once I’m satisfied the CSS won’t change, I move it to an external stylesheet (default.css) and add <link href="default.css" rel="stylesheet" type="text/css"> where the <style> tags are.
Next we go about adding the rest of the ’structure’ to our page. I usually group things together in <div>, adding an “id” to each div. ID’s should only be used once per page, and I’m only ever going to have one “header” and one “footer” on each page, which is why I use ID’s rather than classes.
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
This completes the structure of the page. Next we go about adding the content. I usually do the header, then the navigation, then the footer, then some sample content. Obviously the content changes from page to page, but as I use PHP includes to insert my header and footer into each page, I’m merely making a ‘template’.
I usually put my site’s navigation in an unordered list, styling the links in the stylesheet. Navigation should still make sense when stylesheets are turned off. Which makes more sense to you?
- home
- about
- gallery
- contact
or… home about gallery contact? To me, I find the list easier to understand. It makes more sense.
My header usually contains either a background image (added using CSS), or an <h1> tag. My footer is usually one paragraph with the copyright notice.
As for sample content, I try to add at least one of the following:
- Heading
- Paragraph
- Unordered List
- Link
- Form element such as
<input> or <textarea> - Image link
You may wish to add sample content of other types of content you use on your site, such as tables and ordered lists. Content varies from site to site, and you may not need every type of tag. Personally, I rarely use ordered lists or tables, which is why I don’t include these in my sample content.
Once I’ve added all my sample content, I set about the finer details in the CSS, such as how I want my links to change when the mouse rolls over them, and whether I want 1px or 2px letter spacing.
After that, I play around and try and see the site from my visitor’s point of view. Does it look okay in IE and FF? Does it fit on the screen when I use 800*600 resolution? Does it look too narrow if I use a wider resolution?
The final job is to move all the CSS to an external stylesheet, then split up the xHTML into the header, content, and footer. The header all goes in my head.php file, and the footer all goes in my foot.php file. The content is different for every page, so stays in its own file.
Then, I upload everything to my host and go around bragging that I have a lovely new layout. Not that anyone cares.
