Webpage Templates in Common Layouts (valid XHTML & CSS)
Subscribe to the Course RSS Feed! 
Well-formed HTML document structure and contemporary webpage layouts are difficult for even veteran web developers to write from scratch. Dreamweaver has a wealth of layout templates to help the novice get started, but they are somewhat difficult to interpret. Moreover, the names for the layout elements invite the novice web author to develop bad practices.
I have taken the liberty of writing some templates for you to use. Feel free to grab these files and play with them. Following the ethos of the coding community, I ask only that you acknowledge me as the author of the originals. This kind of credit is typically handled with a "comment" in the HTML and/or CSS file. It is invisible to the webpage viewer, while it resides behind the scenes in the code.
You won't hurt my feelings if you don't like my templates. The internet is full of wonderful alternative templates freely available for download. I thought of simply pointing students to these resources, but most (if not all) of them were more complicated than mine and require a significant working knowledge of both HTML and CSS. A lot of them use presentational language to name the key structural elements, a bad coding practice. Talk to me if you want some help finding the good stuff out there.
The Templates
- Preview Two column, Left Nav (Fixed-Width, Centered Layout) - Get the HTML & CSS
- Preview Two column, Left Nav (Liquid Layout) - Get the HTML & CSS
- Preview Two column, Right Nav (Fixed-Width, Centered Layout) - Get the HTML & CSS
- Preview Two column, Right Nav (Liquid Layout) - Get the HTML & CSS
- Preview One column, Horiz Nav (Fixed-Width, Centered Layout) - Get the HTML & CSS
- Preview One column, Horiz Nav (Liquid Layout) - Get the HTML & CSS
- Three column layout (If you want it, you have to learn it - I'll help!)
Can you really make these templates look decent? Yes! Here's a sample.
Instructions
- Pick a layout and save the .html and .css files to your computer
- Open them up in Dreamweaver CS3 (or in textwrangler/notepad)
- Start writin' and stylin' (keep your "content" in the HTML file and your "presentation" in the CSS)
Major Structural Elements
Don't let these files scare you because they're just not that complicated. There are basically 4 "page elements" to look for. Those elements are all packaged in a fifth element called CONTAINER.
- #container - This DIV element works to "contain" or wrap the content of the document. A container or wrapper element is a virtual necessity with a fixed-width layout, particularly when one seeks to center the content in the browser window.
- #branding - This DIV is titled "branding" because it is where you put the brand for your site. It's the title area or header for the webpage.We could call it "header." Semantic markup recommends that we avoid naming elements by their position on the page.
- #content - This DIV is clearly named. If we had a couple different content areas, we might distinguish with "maincontent" and "subcontent" or "auxcontent." But we have one main content area in this page. This is where you put your text and other media for the page.
- #mainnav - Yup. This is the main navigation area. The main or top-level navigation for your site goes in here. (Notice I didn't name it "sidebar." Why?)
- #siteinfo - Lots of my own webpages call this section "footer" because it usually goes in the footer of the page. But we should avoid names that describe a location on the page and instead write names that describe the content of the section. Hence "siteinfo." What do you think goes in here?
Additional Styled Elements
- html - added height to help stick footer to the bottom of page.
- body - added numerous styles here to control layout and overall presentation.
- p - added a minimum of style to the paragraphs.
- a, a:active, a:hover, a:visited - these styles control the look of links.
- h1, h2, h3 - several levels of heading.
- #mainnav ul, li, a - styling the unordered list of links in the navigation.
- * html and other hacks - don't sweat these; mostly they help old versions of IE work.
This set of barebones elements is meant as a mere starting point. I hope you'll be creative. Let your imagination for your website, not the starting point in these basic templates, drive what you learn to do with HTML and CSS.
Lost? Here's something I did with a "design" based on the Two column, Left Nav (Liquid Layout) template.
Don't like the look? Restyle!
Wikiwiki | Escher
| Cloisonne | The
Blues | Negative | Skinless