Chapter 1

劉祺發表於2017-04-04
APT

頭圖

那麼現在就讓我們開始學習 Foundation 吧。目前不少 Foundation 教程實際上是 Foundation5 的教程。而現在 Foundation 已經推出 Foundation6 了。那麼我們當然是講解最新版本的 Foundation 啦。因為 Foundation6 中推出了不少實用的新功能。如果我們再用老版本的講解，實在顯得有些笨拙了。（笑）

連載於：劉祺的公眾號

Foundation 概述與配置

頭圖

那麼現在就讓我們開始學習 Foundation 吧。目前不少 Foundation 教程實際上是 Foundation5 的教程。而現在 Foundation 已經推出 Foundation6 了。那麼我們當然是講解最新版本的 Foundation 啦。因為 Foundation6 中推出了不少實用的新功能。如果我們再用老版本的講解，實在顯得有些笨拙了。（笑）

那麼我們今天就從如何配置 Foundation6 開始講起。您可以從 Foundation 的官方網站（http://foundation.zurb.com/）下載到最新的 Foundation6 。除了要下載 Foundation6 之外，您可能還需要下載 jQuery 。jQuery 是一個 JavaScript 庫。Foundation 中的某些元件是依賴 jQuery 庫的，所以您也需要下載它。所謂依賴 jQuery 庫的原因是因為 Foundation 中的一部分元件是基於jQuery 庫開發的。

tip您知道嗎？
Foundation6 有時也簡寫做 F6 ，就像 HTML5 可以簡寫成 H5 。相應的 Foundation 的早期版本 Foundation5 也可以簡寫成 F5 。

當然您也可以使用 CDN ：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>

使用 CDN 通常可以加快您的頁面載入速度，但是 GitHub Pages 目前並不支援 CDN 。所以，當您想在 GitHub Pages 開發您的靜態頁面時，還請下載 Foundation6 和 jQuery 。

作為一個有經驗的前端工程師我們都知道應該如何配置我們的網頁。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="keywords" content="HTML, CSS, XML, JavaScript, Front-end">
        <meta name="author" content="劉祺">
                <title>綻放的前端</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css">
    </head>
    <body>
    
        <!-- 預留的網頁內容 -->
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
        <script>
                    $(document).foundation();
        </script>
    </body>
</html>

這裡可能需要解釋部分內容：

<meta name="viewport" content="width=device-width, initial-scale=1">

這一行的作用是為了確保頁面可以自由的縮放，因為 Foundation6 是為了建立響應式頁面的框架。

tip您知道嗎？
所謂響應式頁面，我們有時也稱其為響應式網頁設計。它實際上是一種根據不同解析度的裝置自行調整頁面的技術。而這本身並不是什麼新的技術，而是基於已有的技術（CSS、JavaScript等）提出的對於不同裝置不需要多次設計網頁的技術方案。如果您想進一步瞭解響應式頁面，您可以參考 The Responsive Web 。

一部分 Foundation 元件是基於 jQuery 開發的，所以我們需要對這部分元件進行初始化，下面則是對它們進行初始化的程式碼。

<script>
    $(document).foundation();
</script>

連載於：劉祺的公眾號

開始著手一個完整的專案

頭圖

我們現在已經配置好了 Foundation 。筆者向來是一個主張尚用主義的人，因此疲於把開發文件複述一遍。我們更想要著手的是一個實際有用的專案，您可以很容易把這個專案改寫成您自己的作品。順便我們可以學習到那些真正有用的知識。當然在專案中我們不僅僅涉及的是 Foundation，還有 CSS3 和 HTML5 的一些知識。

那麼為了能讓所有讀者都做一個有用的專案，那麼我們就來做一個自我宣傳的網站。您可以很容易把它改成一個電子簡歷或者是個人網站。但是我們要做的是一個自我宣傳的網站——不會像簡歷那樣正式，也不會像個人的社交站點那樣私人化。更像是等著客戶上門的那種宣傳網站，或者說是那種兼職或遠端服務的簡歷。不過只要您願意，您可以把它改寫的更私人一些（更像一個個人站點）或者更正式一些（更像一個電子簡歷）。

那麼我們現在就正式開始製作這個網站，您可以用任何一個您喜歡的編輯器。如果您的電腦上還沒有安裝任何一個編輯器，那麼我建議您試試看 Dreamweaver。

tip您知道嗎？
Dreamweaver 是一個付費軟體，而且它並不完全是一個編輯器。它有豐富的視覺化的編輯功能和語法高亮。當然，您也可以選擇較為經濟的開發軟體。Notepad++ 是一個不錯的選擇，但它並不包含像 Dreamweaver 那樣豐富的功能。

在您的網頁頭部插入下面的程式碼：

<style>
    .header {
        text-align: center;
        background: #990000;
        background-size: cover;
        position: relative;
        overflow: visible;
        padding-top: 2.5rem;
        padding-bottom: 4.9rem;
    }
    .header .headline {
        color: #ffe;
    }
    .header-subnav {
        float: none;
        position: absolute;
        text-align: center;
        margin: 0 auto;
        bottom: 0;
        width: 100%;
    }
    .header-subnav li {
        float: none;
        display: inline-block;
    }
    .header-subnav li a {
        padding: 0.9rem 1rem;
        font-size: 0.75rem;
        color: #ffe;
        text-transform: uppercase;
        display: block;
        font-weight: bold;
        letter-spacing: 1px;
        transition: all 0.35s ease-in-out;
    }
    .header-subnav li a.is-active {
        background: rgba(250, 250, 250, 0.15);
    }
    .header-subnav li a:hover {
        background: rgba(250, 250, 250, 0.15);
        transition: all 0.35s ease-in-out;
    }
</style>

這段程式碼包含在樣式（style）標籤中，它們的作用是新增一些樣式來渲染您的 HTML 文件的。當然作為一個成熟的前端工程師會把它們寫到層疊樣式表（CSS）中。我們暫時就先這樣擺著，以後再說重構的事情。

對於絕大多數成熟的工程師來說他們都是在編寫程式碼時完成一些可以預知的重構，在整個專案大致完成之後才進行整體重構的。譬如說您應該知道把樣式放到一個層疊樣式表裡這種事情。然後對於層疊樣式表裡面的事情暫時只是按照自己已有的程式設計習慣書寫就可以了。重構的事情等有時間再說。而不是一味的追求重構而耽誤了整個專案的進度。

簡而言之，我們的專案本身應該在建立在保持很好的程式設計習慣的基礎上，重構的事情有時間再說。然而筆者為了那簡單明瞭的例子講解如何重構以及什麼才是好的程式設計習慣和架構。所以一開始的例子並沒有維持一個好的程式設計習慣。或者說，筆者故意要讓您先見識一下混亂的程式設計風格是什麼樣子的，而且刻骨銘心的記住它有什麼危害。

tip您知道嗎？
關於應該何時重構對於每一個工程師可能都有不同的答案。對於一些聰明絕頂的工程師來說，他們本身就規劃了很好的架構。或者說成在編寫程式碼的同時完成重構。但是這種方法很好但並不推薦所有人使用。因為一個好的架構的本身就能促進程式碼的重複使用（當然這是廢話），更重要的則是一個好的架構應該具有可維護性和可擴充套件性。

好了，現在在您的文件的主體部分插入一下程式碼。您將會看到如圖所示的效果。

<header class="header">
    <h1 class="headline">Liu's Homepage</h1>
    <ul class="header-subnav">
        <li><a href="#" class="is-active">Index</a></li>
        <li><a href="#">Works</a></li>
        <li><a href="#">Notes</a></li>
        <li><a href="#">Resume</a></li>
    </ul>
</header>

插圖

為了方便您把它改成您自己的專案那麼您可以修改這裡：

<header class="header">
    <h1 class="headline">您網站的標題</h1>
    <ul class="header-subnav">
        <li><a href="#" class="is-active">主頁</a></li>
        <li><a href="#">子頁面之一</a></li>
        <li><a href="#">子頁面之二</a></li>
        <li><a href="#">子頁面之三</a></li>
    </ul>
</header>

如果您不喜歡喜歡頭部的背景顏色，也可以修改樣式標籤中的內容。

.header {
     text-align: center;
     background: #990000; /*這裡修改頭部背景顏色*/
     background-size: cover;
     position: relative;
     overflow: visible;
     padding-top: 2.5rem;
     padding-bottom: 4.9rem;
}

接下來，如果您使用的是 Dreamweaver ，請在選單中找到“插入”→“InContext Editing”→“建立可編輯區域”，點選它。不過並不是所有人都負擔得起 Dreamweaver 的費用。所以我們儘可能的用廉價的方法來得到同一效果。我們要使用 Jekyll 。這是個免費的新鮮玩意兒，不需要花功夫去學。如果您已經決意要將自己的網站配置到 GitHub Pages 上門去的時候，您甚至都不需要安裝它。

相關文章