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

介绍 

我们已经进入了“网站极限改造”的第四部分，而且我们现在开始热身了——网站，至少是主页，可能看起来很像最终的结果。但我们将继续为主页添加一些“姜饼”，试图使其更具视觉冲击力，或者至少更具吸引力。

继续

首先，我将公司名称下方的文本替换为“自1971年以来，服务于加利福尼亚州圣华金谷地莫德斯托和默塞德之间的99号公路走廊”

接下来，我想将页脚与页面的其余部分区分开来——现在它们都混在一起了。 所以我将为其设置不同的背景颜色。

为此，我将背景颜色规则添加到我的页脚CSS标签中，以便它现在是

footer {
  position: relative;
  background-color: lightskyblue;
}

由于这是一个 HTML5 标签名称（而不是自命名的 CSS 类），因此我不需要在页脚中添加 "class="footer"" - 站点中的任何页脚都将自动继承这些规则。 并且，由于 Site.Master 中确实存在 HTML5 页脚，因此任何引用 Site.Master 的页面都将继承相同的页脚。 换句话说，此指令

MasterPageFile="~/Site.Master" 

...在 Default.aspx 顶部的这一行中

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" 
AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="HarttPools._Default" %>

...确保 Default.aspx 使用 Site.Master 作为其“母版页”，以便 Default.aspx 查找 Site.Master 以提供“起点”，有点像商务信笺抬头或文档模板的格式。 相同的继承也适用于站点中的其他页面（至少现在是这样），例如“关于”、“联系方式”等。

这就是它现在的样子，在公司名称下方更改了措辞，并为页脚添加了背景颜色

我想我将把信用卡动画gif移到顶部的主要部分；现在的位置，它看起来好像是我的企业接受这些特定的信用卡，而不是 Hartt's Pool Plastering（页脚部分有点是“我的”部分，我在那里用我的徽标做广告我的业务，最左边带有网站版权声明，并且 Humans.txt 链接也打开了一个简单的文本页面，其中包含我的联系方式，供任何想要为其构建新的或经过改造的网站的人使用）。

所以，我将动画 gif 从 Site.Master 的页脚移动到 Default.aspx 的第一个 div，到企业名称部分。

我现在添加一个“图像”菜单项，因为除了在主页中间显示的 8 张图像动画 gif 之外，还有很多图像要显示。 为此，我在 Site.Master 中菜单项出现的部分中添加了另一个列表项，具体来说是

<li><a runat="server" href="~/Images">Images</a></li>

...并通过右键单击项目，选择添加 > Web Form，并将其命名为“图像”，来添加一个名为“图像”的页面

但是，当我立即运行该站点时，我看到信用卡 gif 离右边太远了。 我删除了“class="east-magnet"”以查看 gif 将最终停留在哪里……好的，更好——它在文本下方，而不是在“右场”中（从击球手/旁观者的角度来看）。 我还将为该部分设置背景颜色，以便将其与中间部分区分开来，类似于页脚。 由于我无法将该规则应用于 div（我不想更改所有 div 的背景颜色），我创建了一个新的 CSS 类，只包含背景颜色

.backgroundcolorLightSkyBlue {
  background-color: lightskyblue;
}

...并将该类分配给 div，将其添加到已存在的“jumbotron”类（由项目使用 Bootstrap 框架放置在那里）

<div class="jumbotron backgroundcolorLightSkyBlue" >

这运行良好，所以我随后将“class=“backgroundcolorLightSkyBlue””添加到页脚，并从页脚 CSS 声明中删除背景颜色指令，以便它现在仅为

footer {
  position: relative;
  background-color: lightskyblue;
}

最后（也许？），我再做一次更改。 我添加了一个 CSS 类，它会将字体的颜色设置为天蓝色（基本上看起来像是“白色”的别名）

.fontcolorAzure {
    color: azure;
}

...并将该类添加到公司名称下方的措辞中

<p class="lead fontcolorAzure">Serving the Highway 99 corridor 
   between Modesto and Merced in California's San Joaquin Valley since 1971</p>

（“lead” 已经存在，由 Microsoft/Bootstrap 添加）

这对于主页来说已经足够了，至少现在是这样；这是该部分改进后的样子（此屏幕截图捕捉了信用卡动画 gif 在中间变形的状态）

现在退出

这次就到此为止，各位！ 旅途愉快，直到我们再次在“网络编织”系列（或称为其他名称）的下一部分中再次相遇。