C# 使用HTML模板构建动态页面：重构现有网站_C#_Asp.net_Html_Refactoring

C# 使用HTML模板构建动态页面：重构现有网站

c# asp.net html

C# 使用HTML模板构建动态页面：重构现有网站,c#,asp.net,html,refactoring,C#,Asp.net,Html,Refactoring,我的任务是使用.NET和C#重构当前的网站（foo.com），该网站面向多家公司（abc.com、def.com、ghi.com等）。目前的网站为每家公司使用html模板，以便foo.com模拟该公司的网站以下是其中一个模板的示例： <head> <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" /> <title>Current Dynamic Title&l

我的任务是使用.NET和C#重构当前的网站（foo.com），该网站面向多家公司（abc.com、def.com、ghi.com等）。目前的网站为每家公司使用html模板，以便foo.com模拟该公司的网站

以下是其中一个模板的示例：

<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>


当前动态标题
泰德夫人{
边框样式：实心-实心-非实心；
边框宽度：1px；
边框颜色：#000000；
宽度：980px；
}
.t车身{
边框样式：非实心；
边框宽度：1px；
边框颜色：#000000；
文本对齐：左对齐；
背景色：#FFFFFF；
宽度：980px；
最小高度：250px；
}
特富特先生{
宽度：980px；
}
.style1{
边框宽度：0；
}
插页

如您所见，模板包括一个自定义头部分、一些自定义css和三个内容div（theader、tbody和tfooter）。当前网站将使用此模板，并根据查询字符串参数和正在调用的页面将“inserthtmlhere”替换为动态内容

目前的网站已经使用了数百个这样的模板

我的问题是。。。。你将如何重构这个设计

您可以做几件事来改进模板

首先，您可以解决布局问题。确保标记只包含语义HTML，并使用CSS控制布局。应替换

等标记，以便模板尽可能灵活。确保你的标记

第二，将代码的公共元素分解成一般可用的文件。因为您有数百个模板，所以您不希望为了较小的设计更改而编辑每一个模板

第三，将所有CSS移出模板并放入一个单独的文件中。您可能会发现，您可以对每个站点使用相同的标记，只需逐个站点替换CSS即可。请参阅以获取灵感

第四，考虑用更容易访问的内容替换图像映射。你的视力和运动障碍用户会感谢你，你可能会在这个过程中改进搜索引擎优化。（自动搜索引擎蜘蛛无法从你的图像中提取有用的信息。）

你说：“你将如何重构这个设计？”答案完全取决于重构的目标和目的。您是否正在尝试减少模板的数量？为将来的功能做准备？提高性能？@George，模板的数量并不重要，因为它与客户的数量直接相关，这些“设置”必须以某种方式存储。主要关注的是未来的功能、灵活性和性能。