Using HTML templates for building Dynamic pages: Refactoring existing web site
I have been tasked with refactoring a current website (foo.com) using .NET and C# that caters to multiple companies (abc.com, def.com, ghi.com, etc). The current website uses html templates for each of the companies so that foo.com emulates the company's website.
Here is a sample of one of the templates:
<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>Current Dynamic Title</title>
<style type="text/css">
.theader {
border-style: solid solid none solid;
border-width: 1px;
border-color: #000000;
width: 980px;
}
.tbody {
border-style: none solid solid solid;
border-width: 1px;
border-color: #000000;
text-align: left;
background-color: #FFFFFF;
width: 980px;
min-height: 250px;
}
.tfooter {
width: 980px;
}
.style1 {
border-width: 0;
}
</style>
</head>
<body style="margin-left: 0; margin-right: 0; margin-bottom: 0; background-color: #0099FF">
<center>
<div class="theader">
<map id="FPMap0" name="FPMap0">
<area coords="225, 163, 283, 183" href="http://www.abc.com/index.php" shape="rect" />
<area coords="294, 164, 377, 181" href="http://www.abc.com/aboutus.php" shape="rect" />
<area coords="388, 162, 472, 183" href="http://www.foo.com/current.ap" shape="rect" />
<area coords="484, 164, 589, 183" href="http://www.abc.com/contactus.php" shape="rect" />
<area coords="603, 161, 731, 183" href="http://www.foo.com/emaillist.ap" shape="rect" />
</map>
<img src="../images/Header_opt_1.jpg" height="191" width="980" class="style1" usemap="#FPMap0" />
</div>
<div class="tbody">
inserthtmlhere
</div>
开发者_如何学编程 <div class="tfooter">
<map id="FPMap1" name="FPMap1">
<area coords="89, 8, 132, 24" href="http://www.abc.com/index.php" shape="rect" />
<area coords="144, 8, 215, 25" href="http://www.abc.com/aboutus.php" shape="rect" />
<area coords="224, 10, 299, 23" href="http://www.foo.com/current.ap" shape="rect" />
<area coords="311, 7, 402, 24" href="http://www.abc.com/contactus.php" shape="rect" />
<area coords="414, 8, 557, 24" href="http://www.foo.com/emaillist.ap" shape="rect" />
</map>
<img src="../images/Footer.JPG" class="style1" usemap="#FPMap1" />
</div>
</center>
</body>
As you can see, the templates include a custom head section, some custom css, and three divs for the content (theader, tbody, and tfooter). The current website picks up this template and replaces the "inserthtmlhere" with dynamic content based on querystring parameters and the page being called.
There are hundreds of these templates already in use with the current website.
My question is.... How would you go about refactoring this design?
There are several things you can do to improve your templates.
First, you can address the layout. Make sure that the markup contains only semantic HTML, and use CSS to control the layout. Tags such as <center> should be replaced so your templates are as flexible as possible. Make sure your markup validates.
Second, factor the common elements of the code into generally-available files. Since you have hundreds of templates, you don't want to edit every one for minor design changes.
Third, move all CSS out of the template and into a separate file. You may find that you can use the same markup for every site, and just replace the CSS on a site-by-site bases. Please see CSS Zen Garden for inspiration.
Fourth, consider replacing the image maps with more accessible content. Your vision- and motor-impaired users will thank you, and you may improve SEO in the process. (Automated search engine spiders can't really extract useful information from your image.)
加载中,请稍侯......
精彩评论