課程介紹

本課程適合哪些人？

本課程專為有抱負的初次網頁開發人員和希望建構高效能網站的現有開發人員設計。在本課程和後續課程中，您將

• 了解 AMP 頁面與傳統「原生」網站的不同之處。

• 逐步使用真實的 AMP 元件和最佳實務範例建構範例專案。

• 學習建構現代網站的策略。

先決條件

為了充分利用這些課程，您應該具備 HTML 和 CSS 的基本知識。 能夠辨識 HTML 和 CSS 程式碼，並能夠按照練習指示進行少量新增和修改即可。 請注意，教學這些概念超出本課程的範圍。如有必要，您可以在這裡找到 HTML 的複習資料，在這裡找到 CSS 的複習資料。

跟著 Code With Glitch 學習程式碼

為了完成這些課程中包含的程式碼範例，我們將使用 Glitch。Glitch 是一個線上程式碼編輯器，讓您無需在電腦上安裝任何軟體即可建立和檢視網站。它還讓您可以在 Glitch 介面中建立伺服器。

Glitch 程式碼編輯器環境如下所示

上方的紅色方框表示您將輸入 HTML 和 CSS 的線上編輯器。綠色方框表示可將您帶到您正在建立的頁面即時版本的按鈕。黃色方框是讓您建立此專案副本並進行編輯的按鈕。藍色方框表示您可用的檔案。在 assets 資料夾中，您可以找到您的圖片。

在這些課程中，您將需要各種圖片來完成練習。您完成這些課程所需的所有圖片都包含在我們的 Glitch 專案中。若要檢視專案中的圖片，請按一下 Glitch 編輯器左側檔案清單中的 assets 項目。若要取得任何單一圖片的連結，請從右側的 assets 清單中選取圖片。按一下顯示快顯視窗中網址旁的「複製」按鈕。然後，您可以在任何需要圖片的地方使用該連結。

在本課程中，我們將從基本的 HTML 頁面開始。我們已在 Glitch 上建立一個空專案，其中包含一些圖片、您稍後會需要的伺服器程式碼，以及一個包含標題和單一圖片的 index.html 檔案。

開啟此專案開始。按一下右上角的「Remix This (重新混合此專案)」按鈕，以建立您可以編輯的新專案。您可以繼續將此編輯器用於本課程和未來的課程。未來的每個課程也會讓您有機會從該點解決方案的參考版本開始。

您不必使用 Glitch 來完成這些訓練。但是，完成練習所需的一些程式碼僅包含在 Glitch 範例中。如果您想使用其他編輯器，您可能仍然需要使用 Glitch 範例來尋找此程式碼。

設定 AMP 驗證工具

為了偵測 AMP 頁面中的錯誤，我們有一個非常有用的工具：AMP 驗證工具。編寫有效的 AMP 頁面是存取架構完整優勢的關鍵。AMP 驗證工具可透過兩種方式存取：透過 Chrome 擴充功能，或將參數新增至我們的網址，以便我們的 AMP 頁面使用內建驗證工具。就本課程而言，我們建議您使用 Chrome 擴充功能，因為它在使用和存取上更為容易，方便您建構網站。

• 若要安裝 Chrome 擴充功能，請造訪這裡的連結。

• 若要改為使用內建 AMP 驗證工具，請在 AMP 頁面網址的結尾新增 #development=1，然後開啟瀏覽器中的開發人員主控台以查看結果。如果您使用的是 Chrome 擴充功能，則無需新增此參數。

我們將建構的內容

在我們的三個課程中，您將為 Chico’s Cheese Bicycles Shop 建構一個網站。Chico’s 開發了一款完全由起司製成的革命性自行車。對新款自行車的需求如此之高，以至於 Chico’s 需要盡快建立一個網站。當我們完成這些課程後，Chico’s 的網站將如下所示

您可以按一下此連結以查看即時預覽。瀏覽一下網站。我們有影片、註冊表單、圖片輪播，以及在社群媒體上分享我們網站的方式。按一下左上角由三行組成的圖示 (也稱為「漢堡選單圖示」) 來開啟導覽選單。選單展開後，按一下「Our Products (我們的產品)」連結以導覽至產品清單。嘗試依價格排序產品清單，並依產品類別篩選產品清單。

我們選擇 Chico’s 的網站作為我們的模型，因為它提供了我們今天在熱門網站上常見的功能集合。它完全是使用 AMP 建構的。在這些課程中，您將從頭開始建構這個網站。