Saturday, February 14, 2009

CSS Layouts vs Tables

The Anatomy of a Large-Scale Hypertextual Web Search Engine
http://infolab.stanford.edu/~backrub/google.html
Click this link for an early paper on the design philosophies behind the Google search engine. It's a good example of how most pages looked in the early days of the Web when traditional HTML reigned supreme.


Web Page Layouts Shouldn't Use Tables

http://webdesign.about.com/od/layout/a/aa111102a.htm
This page sums up all the reasons why professional Web developers have stopped using tables for page layout.

Why Tables for Layout Is Stupid
http://www.hotdesign.com/seybold/
Here's a somewhat comic book-like approach explaining why using tables for page layout isn't such a good idea.

Lengths
http://www.w3.org/TR/CSS21/syndata.html#length-units
Here you'll find the W3C's explanation of the various units of measure. As is typical of W3C documentation, it's woefully terse and technical. But these are the facts, nonetheless.

Elastic Lawn
http://www.csszengarden.com/?cssfile=/063/063.css&page=0
This link is an example of an elastic layout. Change the text size with View > Text Size in Internet Explorer, or CTRL + + and CTRL + - in Firefox or Safari, and watch how everything scales to the current text size.

Tableless Layouts With Dreamweaver 8
http://www.adobe.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
Here's a tutorial on creating tableless page layouts using Dreamweaver 8.

CSS Page Layout Basics
http://www.adobe.com/devnet/dreamweaver/articles/css_page_layout_basics.html
From Adobe and Dreamweaver, this page provides a tutorial on creating page layouts with div tags and floats.

Sample CSS Page Layouts
http://www.maxdesign.com.au/presentation/page_layouts/
Here you'll find some sample page layouts from Max Design. These all use div tags and floats.

CSS Layouts

http://www.dynamicdrive.com/style/layouts/category/C9/
This link takes you to still more sample page layouts from the folks at Dynamic Drive.

CSS Layout Techniques: For Fun and Profit

http://www.glish.com/css/
Here you'll find a quick overview of layout techniques with links to many additional resources.

No comments:

Post a Comment