在这篇文章中，将分享为朋友的网站进行重构的整个过程。这个网站将基于他现有的业务网站，但会从头开始构建一个全新的版本。这个过程可能会涉及到一系列的尝试和错误，会实时记录下想法、经验、预期，以及可能需要回退的弯路。
目标是使朋友的站点在视觉上更具吸引力，看起来更专业，以便给潜在客户留下深刻印象。简而言之，目标是通过吸引更多人访问网站，并将他们转化为客户，从而提高公司的收益。为了实现这一目标，将采取以下三种策略：
现有的网站可以在查看。喜欢他们使用的蓝色背景图片，它让想起了一个在炎热夏日中凉爽的游泳池。将尝试在新版本的网站中保留这种感觉。
现有的页面在笔记本电脑上只占据了屏幕的左侧，而且排版缺乏一些特色。所以，让开始改造吧。
将使用选择的IDE，Visual Studio，以及它的最新版本，Visual Studio 2013。如前所述，为了实现响应式网页设计（使网站适合在任何设备上查看），将使用TwitterBootstrap框架（现在已经内置在Visual Studio项目模板中）。
还将使用jQuery和jQueryUI来使网站互动，并给它一种使其脱颖而出的光泽。在2013年（实际上是2014年），肯定会使用HTML5和CSS3，以及jQuery，以构建一个最先进的网站。
在Visual Studio 2013中，选择文件 > 新建项目 > 模板 > Visual C# > Web，然后选择唯一的选项（ASP.NET Web应用程序）。然后，将通用自动选择的名称（WebSite1）替换为"HarttPools"并点击确定按钮。
现在，在新的ASP.NET项目对话框中有更多的选择，明智地选择了Web Forms选项。说“明智”，因为这个网站不需要Web API（因为不会公开任何RESTful方法），MVC将是过度的（因为没有数据要建模），选择一个最初为空的网站会让做很多工作，宁愿让Visual Studio为做。
一旦项目打开，首先丢弃在这个简单网站上不会使用的废物，即Accounts文件夹（没有必要通过让他们首先登录来阻止一些人进入，所以右键单击项目并选择“从项目中排除”）。只是为了确保这样做没有破坏任何东西，按下Ctrl+Shift+B来构建项目——它构建了；很好！现在对App_Data文件夹做同样的操作。可能也不需要“fonts”或“Models”文件夹，但至少现在保留它们，以防万一。如果查看Contents和Scripts文件夹，会看到为添加的Bootstrap文件（例如Contents文件夹中的bootstrap.min.css和Scripts文件夹中的Bootstrap.min.js）。
现在，通过F5运行应用程序，看看将从什么开始。这个通用/默认页面迎接：
还不错；首先，将保留这个基本的外观，通过替换一些措辞，并删除对这个网站没有意义的东西。首先，将“应用程序名称”更改为“Hartt的游泳池抹灰”。
所以，按下Shift+F5停止应用程序/网站运行，并选择编辑 > 查找和替换 > 查找文件并搜索“应用程序名称”。在Site.Master中找到了它（请记住，这种Web Forms的工作方式对来说是新的）；将其更改为“Hartt的游泳池抹灰”。
接下来，在页面顶部看看还想要在这个文件中更改什么；因此，“ASP.NET应用程序”也变成了“Hartt的游泳池抹灰”。
接下来，添加了一个注释，提醒自己稍后更换通用的favicon.ico：
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<%--TODO: Replace favicon with a custom one--%>
注意到正在引用的bootstrap CSS：
<div class="navbar navbar-inverse navbar-fixed-top">
...
</div>
这无疑会节省很多时间、痛苦和头发，因为这将确保页面能够响应屏幕尺寸和不同设备的变化——希望如此。
向无序列表中添加了另一个项目（推荐信），使其现在如下：
<ul class="nav navbar-nav">
<li><a runat="server" href="~/">首页</a></li>
<li><a runat="server" href="~/About">关于</a></li>
<li><a runat="server" href="~/Contact">联系</a></li>
<li><a runat="server" href="~/Testimonials">推荐信</a></li>
</ul>
需要添加引用的页面，所以这样做了：右键单击项目，选择新建 > 现有项 > 主页的Web表单，并将其命名为“Testimonials”。
由于不需要身份验证，从Site.Master文件中移除了整个LoginView部分。
替换了页脚部分的另一个“My ASP.NET Application”，使其现在如下：
<p>© <%: DateTime.Now.Year %> - Hartt's Pool Plastering</p>
这将在浏览时“翻译”（今年）为：
©2013 - Hartt's Pool Plastering