Hybrid Layout the peaceful coexistence of tables and CSS Part I

Hybrid layout is a special way to create a page's layout, it stands for tables and CSS in a peaceful coexistence. In this article I'll show you how to convert old web sites with tons of <table>, <font>, <b>, and <i> tags into neat hybrid layout pages without messing up the existing page's basic layout.

We won’t use any hand coding! I'll show you how to create a Hybrid layout with nothing more then the built-in features of Dreamweave! You will learn

  • How to get rid of <tables> and <font> tags,
  • How to convert <b> and <i> tags into <strong> and <em>,
  • How to create new CSS rules,
  • How to change CSS rules, and
  • How to apply CSS rules in Dreamweaver.

I will work on an old version of a web site from the year 2001 with a horrible "old-fashioned" source code. We'll convert those into a neat and easy to edit source code.  I'm sure you will soon get familiar with the techniques I use and you don't want to miss them any more.

$2.89
- OR -

Overview

Why a hybrid layout

Although there are lots of articles on why to use CSS instead of <font>-tags and table layout, I want to emphasize two reasons for converting "old-fashioned" source code using hybrid layout or CSS positioning. From a web site developer's point of view the main reason is really easy to understand: the only way to get an easy to edit source code is by using CSS, especially CSS in an external file. The second reason is the file's size.

I'm sure, some of you wonder why I don't use CSS positioning as that is the only real solution for Internet gurus nowadays. Well, frankly, I'm not willing to put hours by hours into getting lots of CSS hacks to work properly, so that my pages are shown in a proper way in the most common browsers.  As long as browsers do not render pages with CSS positioning in a similar way, I prefer to use hybrid layout.

Example files

There are lots of pages out there full of nested tables. Years ago e.g. the only way to get a small border round a table within another table or table cell was to use two tables. CSS enables you to use only a short code added to the table tag to get the same result. The example pages, which we'll convert to hybrid layout, are also full of <font>-tags. <font>-tags have been deprecated since lots of years. In other words, you should not use them any more. Source code like following example should be a thing of the past:

<font face="Verdana, Arial, Helvetica, sans-serif" size="4"><font face="Verdana, Arial, Helvetica, sans-serif" size="4"><font face="Verdana, Arial, Helvetica, sans-serif" size="4"><b>Welcome to Lorem Ipsum </b></font></font></font>

Jolantha Belik

Jolantha BelikJolantha "jbel" Belik first got in touch with the Internet when "gopher" was the measure of all things. Her SPSS, SAS, and Visual Basic background made her open and curious for new "adventures."
When she got her own webspace, a friend wanted to create her first website. Well, he did so but Jolantha was so upset about the horrible design that she decided to learn HTML herself. She got her first copy of Dreamweaver and redesigned her website the way she wanted. Soon friends asked her to design their sites too (for free of course).

Two years ago Jolantha made the decision to actually earn cash with designing websites. The result was jbel's design, a small firm concentrating on small- and medium-sized businesses—with a focus on working outside her neighborhood. Some of her clients live in Adelaide, Australia, and in Essen, Germany.

Jolantha, a sociologist by training, lives with her daughter Conny (a student of psychology), her white cat Cassy, a black male pygmy rabbit Zwetschgerl, and two guinea pigs in a lovely green district of Vienna, Austria. She loves gardening on her small balcony, reading historical dramas, and watching her favorite TV show, Stargate-SG1.

Jolantha wrote articles for Macromedia DevNet book Macromedia Contribute (in German) ISBN: 3772360793 and Dreamweaver MX 2004 - Das Praxisbuch (in German) ISBN:377236568X

See All Postings From Jolantha Belik >>

Reviews

Be the first to write a review

You must me logged in to write a review.