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

在对现有网站进行极限改造的第二个部分中，我首先要确保网站的标题位于 H1 标签中（出于 SEO 目的），并添加一个 H2 标签，因为我认为这些标签的内容对于网站的“可发现性”或其 SEO 价值非常重要。 因此，我通过右键单击页面并选择“查看源代码”来查看源代码。 我看到不仅没有 H2 标签，甚至源代码中任何地方都没有 H1 标签。 众所周知，网络爬虫/蜘蛛在索引网站时使用这两个标签来了解网站的内容，因此缺少它们不是一件好事。 我们将确保在新网站中使用它们。

查看页面源代码时，您可以看到他们使用的网站构建向导创建了 HTML 表格，这些表格现在被认为是过时的——过去的新闻——尤其是在网格系统（例如 Bootstrap 提供的网格系统）现在“风靡一时”的情况下。 我非常害怕被称为老古董，所以我暗下决心在新版本的网站中废弃表格。

现在，我将注意力转向项目中的 Default.aspx 文件，因为它包含一个 H1 标签，我将通过将其内容替换为适合该网站的内容来使用它。 我还删除了页面上的按钮，因为我认为我不需要这些按钮 – 访问者从这里浏览到的唯一其他页面可能是关于我们、联系方式和客户评价页面。

我将尝试保留模板在页面中间使用的三个主要部分，分别用于“入门”、“获取更多库”和“网站托管”。 看看现有的网站，我计划在左侧放置“我们提供的服务”，在中间放置一个图片库，这些图片将显示在一个“轮播”中 - 可能是 jQueryUI 小部件 - 并在右侧放置“产品”。 目前，我将用占位符文本填充这些内容； 甚至其中一些字符串中包含的链接/锚标签也将等到以后。 这是 HTML 的那部分

    <div class="row">

        <div class="col-md-4">

            <h2>Services We Provide</h2>

            <ul>

                <li>Plastering & Replastering</li>

                <li>Extensive Remodeling</li>

                <li>VGB Compliance</li>

                <li>Deck Refinishing</li>

                <li>Tile Cleaning & Repair</li>

                <li>Tile Install</li>

                <li>Equipment Install</li>

                <li>Sheer Descent Waterfalls</li>

            </ul>

        </div>

        <div class="col-md-4">

            <h2>Gallery of Images</h2>

            <p>

                This text will be replaced by a carousel of images, showing off the work done by HPP over the years.

            </p>

        </div>

        <div class="col-md-4">

            <h2>Products We Use</h2>

            <ul>

                <li>Colorquartz</li>

                <li>Pebble</li>

                <li>Beadcrete (Glass Beads)</li>

                <li>Hydrazzo</li>

                <li>Swimming Pool Tile</li>

            </ul>

        </div>

    </div>

...这是我完成后的样子

它不是“比一袋屁股丑 9 倍”（正如我的老朋友 Ed Nelson 偶尔会说的那样），但它明显缺乏活力。 它需要一些颜色和“风格”。

所以我让我为之创建这个网站的朋友（我们称他为 Randy – 因为这是他的名字）从 www.bootswatch.com 提供的替换 Bootstrap 主题中选择一个，他选择了 Cerulean，所以我们将去获取它。

这很简单，找到 Cerulean 主题，单击“下载”按钮（这会在单独的页面中打开文件），复制并粘贴（而不是像很多人——甚至那些应该更了解的人——倾向于说的那样剪切和粘贴）内容到一个文件中，将其命名为“bootstrap.min.css”，从“内容”下方从项目中排除现有的同名文件，然后右键单击项目中的“内容”文件夹并选择“添加” >“现有项”，导航到新（Ceruleanized）bootstrap.min.css 文件保存的位置，然后选择该文件。 同意替换排除但仍然存在的同名文件。 最后，再次运行该站点会显示出明显且独特的改进

这好多了； Randy 选择的蓝色阴影是一个不错的选择，因为它们符合他业务的“清凉蓝水”主题。

对于“网站极限改造”的第二部分来说，这是一个不错的停止点。 下次我们将进行更多外观上的更改，以及更多编码——无论如何，HTML。