Free: Remaking DMXzone in CSS and XHTML
Read for free the trials and tribulations of our intrepid tech team as they wade through 6000 articles-worth of tag spag hell, nested table horror, and emerge victorious with a fully validating CSS and XHTML site that loads twice as fast, renders better and is more maintainable!
The ASP and JavaScript we used to convert the all our articles into xhtml and the full DMXzone.com CSS file is included for download too!
| User Level: | Any |
|---|---|
| Product: | Dreamweaver MX |
| Technologies: | CSS, XHTML |
| Number Of Pages: | 13 |
Remaking DMXzone in CSS and XHTML
DMXzone is built in ASP working together with a MS SQL Server 2000 database. The original code was a few years old and had started off "clean" but had more and more features bolted on. By the time we decided to retrofit it, the main pages were layers of nested tables, presentational HTML mixed in with structural HTML all inside ASP files together with other html and ASP code; there were 6000 pages stored in the database and the result was a homepage of 100K that was a huge tangle of spaghetti that would make Pavarotti turn green and ask for a burger instead.
Before we started on the CSS …
Our first stage of the redesign was to separate the ASP that handles the business logic and the presentational ASP by dividing different page elements in separate modules module for sidebars, header, content, footer etc which is "assembled" when the user requests a page. We introduced HTML template files for each site element that were included into the ASP when needed. This split the HTML out into HTML templates that had special ##key## holders where the real content and titles could be automatically placed.
This way we were able to do lots of different page designs! Maybe you don't know, but we use the same content management system from DMXzone for lots of different company sites and other communities that have completely different layouts and designs. This was all possible by separating the code from the design and using our own dynamic HTML template inclusion in ASP so that eventually everything gets glued nicely.
This prepared the way for our CSS conversion, as we only had to change the HTML template files and very little change to the ASP code was necessary. Here's the story of how we reduced our homepage from 100 to 40K by duplicating our nested-table design in almost-pure CSS.
How is DMXzone organized?
When you look at the pages of DMXzone, you will see that every page is divided generaly in 4 elements: Header, left and right sidebar strips and middle content.
The header conversion to XHTML was straigtht-forward but the famous 3 column-layout was a bit more chalenging. Also retaining the 3D look at each box in the sidebars was quite difficult as well. But not impossible…
The sidebar boxes
Let's start by explaining how we converted a single box from the sidebars from table based layout to full CSS layout.
Take one box …
The old Situation:
DMXzone was build out of a lot of tables which were all nested. The HTML was never valid and contained several many errors. For many of you who maintain large, commercial sites that couldn't risk experimentation with CSS three years ago, I expect that this situation sounds very familiar.
The sidebar box template
The table outlines of a sidebar box.
Here's a sample of the HTML of the sidebar boxes, which as you can see is solely concerned with the visual display:
<table border=0 bgcolor=#FFFFFF class=clsSideBar
width=181 cellspacing=0 cellpadding=0>
<tr align=left valign=top>
<td height=10 width=10>
<img src="images/t_tl.jpg" width=10
height=10>
</td>
<td colspan=2 background="images/t_tm.jpg"
align=right>
<img src="images/t_tr.jpg" width=141
height=10>
</td>
</tr>
<tr align=left valign=top>
<td background="images/t_ml.jpg">
<img src="images/t_ml.jpg" width=10
height=1>
</td>
<td background="images/t_bg.jpg" align=left
valign=top width=100%>
<table width=100% border=0 cellspacing=0 cellpadding=0>
<tr class="clsSideBarBlockTitleBack">
<td class="clsSideBarBlockTitle">##title##</td>
</tr>
<tr>
<td class=clsSideBarBlockRondText>##content##</td>
</tr>
</table>
</td>
<td background="images/t_mr.jpg" height=1>
<img src="images/t_mr.jpg" width=10
height=1>
</td>
</tr>
<tr align=left valign=top>
<td height=10 width=10>
<img src="images/t_bl.jpg" width=10
height=10>
</td>
<td background="images/t_bm.jpg" align=right
valign=bottom colspan=2>
<img src="images/t_br.jpg" width=10
height=10>
</td>
</tr>
</table>
George Petrov
George Petrov is the Founder of the highly successful Zones: DMXzone.com, FWzone.net, FLzone.com, CFzone.net, DNzone.com and FlashFiles.nl
He has developed the comprehensive Dynamic Zones Content Management System that is the brains driving them and constantly supports their online communities with his extensive and valuable knowledge.
He is a renowned web development 'Guru' who has written many articles and extension for Adobe's Dreamweaver.
George Petrov is also the CEO and Founder of Dynamic Zones and also very proud of his children Sofie, Victor and Alexander!
User Reviews
Total of 1 reviewStandards compliant perhaps, but not usability...
Written by Jason Greene on July 7, 2004Ever since the redesign, the size of much of the text throughout the site (especially in sidebars and bulleted lists) has become entirely unreadable due to its small size. For example, within this this little form field used to write this comment, ...
