- The layout
- Cleaner table-based layouts with CSS
- Font tags
- Custom Classes for Text
- Cleaning up the body
- Links
- One page - many link styles
- Navigation
- The Table
- The Buttons
- Taking it further
Tables to CSS
This article is for those people who are comfortable using Dreamweaver to lay out sites using tables, but would like to discover more about how to use CSS for more than just basic text styling. We will take a tables-based layout that includes several of the design tricks common when creating sites using tables for layout, and look at how we can use CSS to make a tables based layout cleaner, leaner and more accessible but without making that huge leap into total CSS layout. This is a perfect solution for those legacy sites that you don't have time to fully redesign but that need to be improved in terms of their accessibility, or as an easy introduction to CSS in Dreamweaver.
Rachel Andrew
Rachel Andrew is a trained dancer and singer, whose CV lists jobs as diverse as company choreographer for a physical theatre company to chargehand carpenter for “The Mousetrap” at St. Martin’s Theatre in London’s West End. After leaving the theatre when pregnant with her daughter, Rachel started to design sites mainly out of curiosity into how it worked. It didn’t take too long for her to figure out that her skills lay in development as opposed to design and these days she tends to leave the design to designers so she can concentrate on writing code, dismantling computers and installing Linux on anything that stays still long enough.
Rachel has worked in the industry as a webmaster, technical project manager and senior web developer but in September 2001 set up her own company ‘edgeofmyseat.com’, which provides complete web solutions and outsourced development services for design agencies and Internet start-ups who do not have in-house web developers.
As well as managing and doing much of the development on projects for edgofmyseat.com Rachel is a published author and worked as a co-author on the following titles for Glasshaus:
Dynamic Dreamweaver MX ISBN:1904151108
Fundmental Web Design and development Skills: ISBN:1904151175
Dreamweaver MX Design Projects: ISBN:1904151272
Rachel is also a member of the Web Standards Project serving on The Dreamweaver Task Force.
In her spare time Rachel studies for ‘fun’ with the Open University, does family and local history research and spends time with her 5 year old daughter and her other half, Drew McLellan.
Reviews
A nice article
May 22, 2003 by Rolf Ernst
I was already familiar with CSS and I knew just about anything in the article itself. However, the idea to create navigation buttons without JavaScript using CSS was pretty neat.
A worthwhile read and worth the couple of bucks.
I will continue checking the article section of this site.
Very good article
June 6, 2003 by Dave Bower
I am a beginner at CSS having only done it for a few years and learning most of what I know by reverse engineering other people's work. And only using the books long enough to accomplish a particular task.
This article brought together a lot of what I did know and taught me a couple very neat tricks I didn't know. Assuming I follow her advice my tables will be consistent, a lot easier to program and maintain, and I won't have to worry about deprecated commands. And I intend to follow her advice on a number of sites that I maintain. Not only because it is good advice but it will make the sites a lot easier to maintain.
The article was easy to read and understand. I think it helps if you have set up a few tables and know how to set CSS attributes in Dreamweaver. It's the kind of article you want to be sitting at your computer in Dreamweaver when you read it but the first two times I read it I wasn't at a computer and there were enough illustrations so make it clear. Well worth the few buck it cost.
dave
Tables to CSS
June 6, 2003 by Pat Meeks
This series is excellent. The only thing I need is to see the completed style sheet after each section. I use TopStyle because I find making styles with DW to too invisible to what the effects are. In a tutorial, following the creation of a style using DW can be confusing, so I'd prefer to see the style sheet and styles at the end of each section. As it is now, if I make a mistake, I have to walk through the entire section step-by-step to see where I messed up. I could get through the tutorials much faster and learn more if I could see the style sheet.
Could you post them?
Thanks, Pat
RE: Tables to CSS
February 4, 2004 by Robyn Gwinn
Where can I download the files needed to work through the "Tables to CSS" article?
You must me logged in to write a review.