在深入编写代码和添加jQuery UI组件等复杂功能之前，首先需要确保网站的基本外观和感觉符合预期。接下来，将为主页的“提供的服务”和“使用的产品”部分的列表项添加链接。通过查看现有网站的源代码，可以找到这些链接所需的信息。
首先，添加“Colorquartz”的链接，因为它是“使用的产品”部分列出的第一项。在页面源代码中找到相应的锚点标签后，将该链接添加到项目中的适当位置，使得原本描述为：
<li>Colorquartz</li>
... 现在变为：
<li><a href="http://nptgonline.com/pool-finishes/colorscapes" target="_blank">Colorquartz</a></li>
接下来，对那一节中的其他项目执行相同的操作，确保它们都链接到它们应该链接的外部页面。
了解到Hartt希望使用他们的“信用卡接受”动画gif，找到页面源代码中的该文件并下载。然后，通过右键点击项目，选择“添加”>“新建文件夹”，命名为“Images”，然后右键点击新的Images文件夹，选择“添加”>“现有项”，导航到保存该图像的文件夹并选择文件将其添加到项目中。
再次打开Site.master文件，进入页面底部的
定位并复制了（“Across Time & Space”）logo图像，并将其添加到Images文件夹中。还在同一位置添加了一张图像，将使用它作为载体来存放“humans.txt”文件（有关此信息，请参见“humans.txt”），然后从上面的HTML中移除不需要的部分，最后得到：
<footer>
<p class="float-left">Web site ©<%: DateTime.Now.Year %></p>
<img class="breathingRoom" src="Images/axXAndSpaceLogo.jpg" alt="Across Time and Space logo" width="128" height="80"/>
<a class="breathingRoom" href="http://www.awardwinnersonly.com/humans.txt" target="_blank">
<img src="Images/humanstxt-isolated-orange.gif" alt="Humans dot text logo" width="105" height="46"/>
</a>
<img class="east-magnet" src="Images/Logo-BannerSmall_1_.gif"/>
</footer>
敏锐的眼睛可能已经注意到，不得不替换复制过来的HTML中的“@”，因为那适用于Web页面项目，这些项目使用Razor模板语法，而这是一个Web Forms应用程序，因此需要使用“<%: %>”语法。
作为这次更新的最后一件事，将页面中间部分替换为现有的令人印象深刻的动画gif，它展示了一个游泳池项目从开始看起来像“战区”到最后变成花园般的外观的进展。这一系列图像包含在名为Start-to-Finish2.gif的动画gif文件中。在现有网站的源代码中找到它，将其保存在本地，并将其添加到项目中，位于Images文件夹下。
然后，更改Default.aspx中的HTML，在中间部分的div中，将其更改为：
Pool Project Time Lapse <img src="Images/Start-to-Finish2.gif"/>
... 以显示动画gif/幻灯片。然而，当运行它时，发现图像没有保持在边界内，并且“泄漏”到了右侧和下方。因此，必须通过创建一个CSS类来限制它。不想提供绝对宽度和高度，而是使用百分比。将尝试使用25%作为屏幕宽度和高度。这是为这个目的创建的CSS类，并将其放入Site.css中：
.modestImage {
height: 25%;
width: 25%;
}
... 并将img标签更改为：
<img class="modestImage" src="Images/Start-to-Finish2.gif"/>
运行它，看到图像变得太小了，所以将百分比更改为50%并再次测试。