Accessibility
 
Home / Developer Center / Dreamweaver Developer Center /

Dreamweaver Article

Icon or Spacer Icon or Spacer Icon or Spacer
Stephanie Sullivan

Stephanie Sullivan
VioletSky Design

 
Ginger Ciuperca
Ginger Ciuperca
Sapphire Designs
 
Simple styling with CSS


Tableless design has become a hot topic lately.

With each new technology that emerges, people's attention span shortens. Studies show that people expect speed from their web experience as well. If your web pages don't load quickly, the visiting surfer will take the next wave out and move on. Many designers do understand this fact. However, what confuses people is the belief that designing "quick-loading pages" necessarily leaves them no choice but to design ugly, plain-vanilla sites. Not true. The magic of Cascading Style Sheets (CSS) lets you have your cake and eat it too. Pages that download quickly, yet look appealing, are no problem using HTML, CSS, and (sometimes) a dash of JavaScript.

Our purpose is not to convince you of the virtues of CSS over tables for positioning, or even to explain all the advantages of CSS. Tableless design is not a prerequisite to styling with CSS, although it is the goal. Our point is to show you how to cut your page-load time and file size tremendously by using a few CSS shortcuts. These shortcuts can (and will in this tutorial) remove many or even all of the images from your web pages. These techniques can be used to whatever degree you wish in your own web pages. To show what's possible, we're going to avoid images entirely, except for a very small background image.


Table of contents
·
Clean that code
·
Ditch those images
·
Create image-free rollovers
·
Add floating characters
·
Netscape: That browser's got issues
·
Reach out and touch some sites
 

Sample files
Before you begin, download the source files for this tutorial:
Windows   Macintosh
Download the sample file simple_styling.zip (7K)   Download the sample file simple_styling.sit (7K)
  Next

About the authors
Stephanie Sullivan owns VioletSky Design in coastal North Carolina, where she creates sublime, fast-loading websites for businesses and creatives. She has recently taken on writing and technical editing. You will find her glued to her Dual G4 about 12 hours a day, madly keeping up with her clients, taking care of her husband and two boys, participating in several web design forums, and talking to the little people that live inside her computer. In her spare time she creates websites and studies web development. She was last spotted at TODCON, the awesome summer camp for geeks.

Ginger Ciuperca began working for the Centers for Disease Control in Atlanta after receiving a BS in Biology and having high hopes of going to medical school. Plans kind of changed after her daughter was born; she decided to stay at home and follow her desire for creative study. She has been pursuing web and graphic design ever since. She dedicates almost all of her time to building websites, learning current standards, and writing. After accompanying Stephanie Sullivan to summer camp at TODCON, a whole new world of content management and writing gigs appeared. During her waking hours, she generally plays with her daughter, helps her husband with his business, or is immersed in a book, which is almost always computer-related. She can be reached at her website, Sapphire Designs.