Some people may be a bit intimidated by designing a webpage for the first time. "How complex should my webpage be?" often is asked. The answer depends on the purpose of your webpage. Generally, it is my opinion that you should seek the simplest layout that presents your content in a easily readable and navigable method. Simpler than it sounds I know, but consider this: complexity in a webpage leads to:
Sometimes simplicity goes a long way to keeping your sanity!
This part is easy. Take a piece of paper and a pencil, and draw out how you want your webpage to look. Think about what elements you consider important on your page, and key to layout. For instance, at a bare minimum you will probably want to have the following elements:
Your header is often at the head, or top, of your page. Your menu is usually on the left or right, depending on the purpose of your site. If your site is a personal weblog (aka: blog), often your menu will be on the right to emphasize the content, while on a more professional site it may be on the left, to emphasize naviagtion to help your reader find what they want. Often content will be directly opposite your menu. If your menu is to the left, the content is to the right, if the menu is on top (not generally recommended), the content will be below. A footer is, well, at the foot of the document. Once you get the basic elements, and their positioning, it's just a matter of giving a design to your site, including images, colors, and font stylings.
There are many different ways of doing the coding for the template that are beyond the scope of the tutorial. So, I have provided for you a template file that you can reference during the rest of this tutorial, in addition to the CSS files which will be discussed later. I am also using Mozilla, as it implements more CSS more correctly than Internet Explorer. Also of note is that Internet Explorer is dead (with the exception of Service Packs and security updates) until the release of Longhorn, scheduled currently for 2006. Think about that.
2-column example and zip file.
Take a look at the template page code and familiarize yourself with how it is laid out, specifically how the divs are laid out in the code. At its most basic level, the template is something like this:
<html>
<head>
<title></title>
<link />
<link />
</head>
<body>
<div id="noStandards">
<p></p>
</div>
<div id="overall">
<a href='#contentum' id='skipLink'></a>
<div id="masthead">
<div id="mastimage"></div>
<div id="masttitle"><h1></h1></div>
</div>
<div id="searchbar">
<div id="search"><form></form></div>
<div id="quicklinks"></div>
</div>
<div id="minutus">
<ul>
<li class="menuhead"></li>
<li><a href='index.html'></a></li>
<li><a href='index.html'></a></li>
<li class="menuhead"></li>
<li><a href='notes.html'></a></li>
<li><a href='index.html'></a></li>
<li><a href='index.html'></a></li>
<li><a href='index.html'></a></li>
</ul>
</div>
<div id="contentum">
<div id='contentumBuffer'>
<p></p>
<p></p>
<p></p>
</div>
</div>
<div id='copyright'></div>
</div>
</body>
</html>
The first question I'm sure you're asking yourself is what is with these names for our elements? Minutus, contentum, mastimage, masttitle? The reason we did this to avoid problems in the future. IDs for elements must be unique, and if we name our elements something too common, we may run into problems later if we create something like a form. So, for now just equate:
The real reason we used the names we did is to avoid what is called "namespace collisions". It is true that an ID must be unique, but consider what would happen if we created a simple form. For instance what would happen if 'masttitle' was simply named 'title' and we created the following form?
<form>
<label for='first_name'>First Name</label><br />
<input name="first_name" id="first_name" type="text" /><br />
<label for='last_name'>Last Name</label><br />
<input name="last_name" id="last_name" type="text" /><br />
<label for='title'>Job Title</label><br />
<input name='title' id='title' type='text' /><br />
</form>
Uh oh! We now have duplicate IDs, and that's not legal in HTML. Now you begin to see why we named the sections like we did.
Our template page accomplishes what we wanted: there is a header with a space for a logo to the upper left, a menu to the left, secondary navigation (perhaps for major sections) on the top, content to the right, and a footer on the bottom. So how did we accomplish this with no tables? Simple, we make use of a few important attributes, and divs. We will discuss the details of CSS files later in-depth.
What is very important is the order of which you place elements on your HTML page. For instance, we put our header first followed by our menu, then content (wrapped in another div, discussed in the FAQ under Problems with <i>, <em>, or 'font-style: italic;' in IE), and our footer last. This follows a normal logical flow of information. First, we want to know what it is that we are reading (header), a table of contents (menu), the actual text (content), and then an informational footnote or copyright notice (footer). If you wish for a more indepth discussion about readability and useability, you might want to read the book Don't Make Me Think by Steve Krug.
Some people might call foul on our secondary navigation, because it is not in a list, but rather are
independent links spaced with non-breaking spaces ( ) and seperated by pipes. There is a reason for this: in the interest of backwards navigation, it is
easiest to not put these in a horizontal list because often older versions of browsers do not implement horizontal lists correctly at all. Observe the difference in
code below:
Current method:
<div id="quicklinks">
<a href='#'>Quicklink 1</a> |
<a href='#'>Quicklink 2</a> |
<a href='#'>Quicklink 3</a> |
<a href='#'>Quicklink 4</a>
</div>
List method:
<div id="quicklinks">
<ul><li><a href='#'>Quicklink 1</a></li>
<li><a href='#'>Quicklink 2</a></li>
<li><a href='#'>Quicklink 3</a></li>
<li><a href='#'>Quicklink 4</a></ul>
</div>
CSS rules
#quicklinks ul {padding: 0px; margin: 0px; display: inline;}
#quicklinks li {
display: inline;
list-style-type: none;
padding-right: 30px;}
Also, if you have IE 4.01 installed, you may notice that our template example looks really strange in it because of errors in how IE 4 implements margins. The solution to this is the example below, which is designed floating both the menu and content, rather than just the menu.
2-column floating example and zip file.
There are a few subtle differences in this template as compared to the previous. The first difference is that occasionally the above example will not stretch the parent fully, but a page refresh will fix the glitch. The other difference is that with this version, you must know the width of your content, as a floated element is only as big as it's content unless a specific width is declared. In the first version, we set a left margin to account for the menu, and then the div stretches the width of it's parent by default because it is a block-level element, which allows for a lot of flexibility simply by changing the overall div's width. Other than that, you can use both interchangably.
Anyone who has been developing webpages for a length of time probably has resorted to a tabled layout at some time or another. Previously, CSS just wasn't exact enough for the design requirements for some pages, and tables reacted fairly predictably, and so were easier to use. Since that time, CSS has improved, and while not perfect, is much better. The advent of CSS2 helps address many of the problems created in CSS1, and CSS3 is in the works. With each suceeding version of CSS, more flexability and features are added, and as browsers become increasingly compliant with CSS, it is becoming more feasible to go with a pure CSS model. For this tutorial, I chose a pure CSS model, because the scope of the test page is small, and to prove that it can be done. Another reason is that a CSS design makes our page much more accessible to blind browsers, alternate web devices, and older versions of browsers.
When discussing CSS layouts, there are three basic styles you should be aware of: Jello, Ice, and Liquid. To view examples of each, click on each respective link below.
Note: If you are viewing the Jello example with IE 4 to IE 5.5, you will see an Ice example because of IE not understanding the CSS method of centering a div. Please read the FAQ discussing centering a div in CSS. If you are viewing with Netscape 4.x or below, IE 3 and below, or any other very old browser, the page will degrade gracefully (discussed here) and you will see the unstyled version.
Now let's move onto designing your base CSS file.