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!
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 a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. The most popular for its over high-quality Dreamweaver extensions and templates.
George is also the founder of Wappler.io - the most Advanced Web & App Builder