网站极限改造，第 3 部分 (共 7 部分)

B. Clay Shannon

5.00/5 (5投票s)

2013 年 10 月 29 日

CPOL

5分钟阅读

13689

在这个网站大改造之旅的第三部分中，我们将承接上文，在深入编写后台代码、添加 jQuery UI 小部件等细节之前，进一步完善网站的基础外观和感觉。

首先，让我们为“我们提供的服务”和“我们使用的产品”部分列表项添加链接。查看现有网站的源代码，我们可以知道这些链接需要指向哪里。

我首先搜索“Colorquartz”，因为这是“我们使用的产品”中列出的第一个项目，并在页面源代码中找到相应的锚点标签。

<a href="http://nptgonline.com/pool-finishes/colorscapes">

所以，我将它添加到项目中的适当位置，这样原本描述为这样的列表项

<li>Colorquartz</li>

……现在变成了

<li><a href="http://nptgonline.com/pool-finishes/colorscapes" target="_blank">Colorquartz</a></li>

我现在对该部分中的其他项目也做了同样的操作，这样它们都可以链接到应指向的外部页面。

我知道 Hartt 的人会希望我使用他们“接受信用卡”的动画 GIF，所以我会在页面源代码中找到该文件并下载它。然后，我通过右键单击项目，选择“添加”>“新建文件夹”，将其命名为“Images”，然后右键单击新创建的“Images”文件夹，选择“添加”>“现有项”，并导航到我保存该图像的文件夹并选择文件将其添加进来。

我再次打开 Site.master 文件，转到页面底部，进入 <footer> 部分，然后只需将文件从解决方案资源管理器拖到版权段落下方。自动添加了以下 HTML：

<img src="Images/Logo-BannerSmall_1_.gif" />

<p class="float-left">© @DateTime.Now.Year - Across Time & Space</p>
<img class="breathingRoom" src="~/axXAndSpaceLogo.jpg" alt="Across Time and Space logo" width="128" height="80" />
<a class="breathingRoom" href="http://www.bigsurgarrapata.com" target="_blank">
<img src="~/Images/Spring2013_06_07_2578_th.jpg" alt="Garrapata, Big Sur's Best-Kept Secret" height="80" width="120" /></a>
<img class="breathingRoom" src="~/Images/g_bizspark_thumb.jpg" alt="Microsoft BizSpark logo" width="105" height="46" />
<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>

……由于那里引用了两个自定义 CSS 类，我会在我的其他网站中找到它们并将它们复制到 Site.css 中。

.float-left {
    float: left;
}

.breathingRoom {
    margin-left: 4px;
    margin-top: 4px;
}

我还添加了一个 CSS 类，以便信用卡动画 GIF 可以紧靠页脚的右侧。在尝试通过在 CSS 中设置“float: right”但未奏效后，我在 StackOverflow 上（这是继吗哪之后最伟大的发明——至少对于解读各种学科的程序员的思想来说）提出了一个问题，你可以在这里看到：如何将图片移到页脚的右侧？很快（一如既往），我就得到了我需要的答案，并将这个 CSS 类添加到了 Site.css 文件中：

.east-magnet {
  position: absolute;
  right: 0;
}

我找到并复制了我（“横跨时空”）的徽标图像，并将其添加到我的 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 中的“@”，因为那适用于使用 Razor 模板语法的 Web Pages 项目，而这是一个 Web Forms 应用程序，所以需要使用“<%: %>”语法。

作为本期最后一部分，我将用现有令人印象深刻的动画 GIF 替换页面中间部分，该 GIF 显示了一个泳池项目，从开始时的“战场”景象逐渐演变成最终的园林般的外观。这一系列图像包含在名为 Start-to-Finish2.gif 的动画 GIF 文件中。

我在现有网站的源代码中找到它，将其本地保存，然后将其添加到项目中，放在 Images 文件夹下方。

然后，我将 Default.aspx 中间部分的 div 更改为：

泳池项目延时摄影

<img src="Images/Start-to-Finish2.gif" />

……以显示动画 GIF/幻灯片。但是，当我运行时，我发现图像没有停留在边界内，而是“溢出”到右侧和下方。所以，我必须通过创建一个 CSS 类来限制它。我不想设置绝对的宽度和高度，而是使用百分比。我将尝试将屏幕宽度和高度都设置为 25%。这是我为此创建并放入 Site.css 的 CSS 类：

.modestImage {
	height: 25%;
	width: 25%;
}

……并将 img 标签更改为：

<img class="modestImage" src="Images/Start-to-Finish2.gif" />

我运行它，发现图像太小了，所以我将百分比更改为 50% 并再次测试。

仍然太小；这到底是怎么回事？我本以为它在被限制之前的尺寸是 100%，但我会尝试一下看看会发生什么。

嗯，100% 看起来差不多完美，所以我暂时就用这个了。不过，这可能不是正确的方法；我们将在以后，当网站在不同尺寸下进行测试时，等等，才能确定。

不过，现在，这是一个完成本期内容的好地方，向大家展示我们到目前为止所取得的成果。

下次见：祝您浏览愉快，保持稳定，等等。

系列中的其他文章