CSS-Positioned layouts are the rage. Clean, efficient, and quick-loading pages can be had if you take a little time to learn the fundamentals. Your objective is a CSS layout you can unwrap and put on today.
Before you begin
We've prepared a work page for you that already contains the necessary structural markup. We've also included the MacFly logo, the MacFly style sheet, and a finished page.
- Download the MacFly folder
- Unzip the archive
- Move the unzipped files to a folder within a Dreamweaver defined local site (if you are using Dreamweaver)
- Print out this page and follow along using the downloaded work files
Separating Structure from Presentation
Most people agree that CSS is a wonderful technology. With it we can make efficient and accessible web pages that can be displayed (or read aloud) by all manner of visual browsers, assistive readers, PDAs, cellular telephones, my new refrigerator, and whatever else may be lurking just over the horizon. However, in order to capitalize on the full breadth of this technology you must learn to separate the structure of your pages (the HTML markup) from its presentation (the style). Say what?
HTML is designed so that tags such as <h1>, <h2>, and <p> describe a page's hierarchical organization - it's logical structure. A heading <h1> tag is not meant to make your text large and bold... it's meant to introduce and describe the paragraph(s) that comes below it. A <blockquote> describes a quotation - although lots of folks use this tag as an easy way to indent any text. These tags are part of a group of tags that comprise the structural markup of a document. Using structural markup correctly allows visitors to view information using any manner of device (as described above). We use structural markup to organize our words... not to style them. We use CSS to give our words style, pizzazz, panache, and more... while preserving the underlying logical structure.
Planning the Page
The MacFly layout contains a header, a main body of text, a sidebar, and a footer. The header and footer are designed to stand out in a contrasting color and the sidebar is positioned to the right of the main body.
MacFly uses <DIVs> to organize the page.
Dreamweaver users may be scratching their heads right now because the common wisdom found in most Dreamweaver books is that to design a page you use either Tables or Layers - and we're using DIVs. Well, a Layer (in Dreamweaver-speak) is nothing more than an absolutely positioned DIV, which Dreamweaver allows you to easily insert or draw. It even lets you drag them about your page. Positioned absolutely, a DIV is placed outside (or above) the page flow, much like a text box in a word processor or page publishing program. When we omit a DIVs position, top, left, right, and bottom properties, that DIV is said to be static - which is the default state of a DIV in the absence of an explicitly set position value. Static DIVs are boxes that exist in the logical flow of a page. That is, they cannot be grabbed and dragged (in Dreamweaver) about the window. Static DIVs are nothing more than logical page DIVisions - boxes, if you will. Inside these boxes you can place headings, paragraphs, lists, images, and even tables. If, for instance, you wanted to wrap several paragraphs of text with a border, you could place those paragraphs inside a DIV and use CSS to apply a border to the DIV.
Building a Logical Structure
Let's examine MacFly's 4-box MacFly layout and make a list of the DIVs you'll need - and each one's purpose. The obvious DIVs are:
But MacFly is a centered, fixed width layout. To center the Sidebar and Main Content DIVs, you'll need to wrap them inside another DIV. Here is the final list of DIVs you'll need:
- header: spans the top of your page and contains your logo
- mainwrapper: a centering container in which sidebar and maincontent are nested
- sidebar: contains a navigation list
- maincontent: contains your main text content
- footer: spanning the bottom of your page content and sidebar
The structural markup
The structural markup can be found in your MacFly folder in a page aptly named: structural1.htm.
- Open structural1.htm
- View the source code
Note: Each structural DIV carries an ID, which will be used to identify and to style each one.
If you have not yet downloaded the files, view structural1.htm online
Although the unstyled structural markup looks plain and simple in your browser, it represents the most solid of foundations on which to build your page. In the course of a real-world project, this is the time that you would add your actual content. For this exercise, we've supplied a page that contains placeholder content.
- Open structural2.htm
- View the source code
Shaping and Styling with CSS
The finished MacFly page uses the exact same markup (and placeholder content) that is used in the structural2.htm page. The difference is the attachment of a CSS file that serves to shape the markup into a pleasing layout while keeping the page structure completely separate from its visual presentation. When you separate structure from presentation you make it vastly easier to change as evidenced by the following examples which use the same markup but different style sheets:
The main MacFly style sheet is imported to hide it from version 4 browsers and is fully commented to help you understand it. IEPC fixes are contained in a special linked style sheet that is attached to the page using a Microsoft Conditional Comment which is read only by Internet Explorer versions 5.0 through 6:
<!--[if gte IE 5]> <link href="iepcfixes.css" rel="stylesheet" type="text/css"> <![endif]-->
The iepcfixes.css file contains comments describing the fixes.
Advanced CSS authors may decide under some circumstances that separate fixes are needed for IE5x and IE6. In that event, two conditional comment would be used, each including a link to a specific iepcfix CSS file. Here is an example of the code required:
<!--[if IE 5]> <link href="ie5pcfixes.css" rel="stylesheet" type="text/css"> <![endif]--> <!--[if IE 6]> <link href="ie6pcfixes.css" rel="stylesheet" type="text/css"> <![endif]-->
The first conditional comment is read by IEPC versions 5.0-5.99 and the second is read by IEPC versions 6.0-6.99.
While intermediate-to-advanced CSS authors will likely have no problems understanding the techniques we've used, we do ask that you let us know of any errors or problems. If you are new to CSS or if you are a Dreamweaver user and have absolutely no idea where to begin, the PVII newsgroups are open 24/7 for discussion relating to this tutorial. Outlook Express users will likely be able to load up our server by clicking the link below, while others may need to configure our server in their news reading software.
PVII Newsgroups | server name: forums.projectseven.com