簡介

  • 5 分鐘

現在您可以在網路上執行的內容令人印象深刻。 您可以建置在所有裝置上執行的 Web 體驗，包含各種媒體內容，並執行複雜的計算。 您甚至可以建立外觀和感覺都像原生應用程式的應用程式。

如果您想要立即開始進行網頁程式開發，您所面對的選項之多可能令人眼花撩亂。 在本課程模組中，您會了解網站的基本元件，以及您可用於開始進行網頁程式開發的一些工具。 您會同時使用 HTML、CSS 與 JavaScript 建置網站，然後使用瀏覽器中的開發人員工具了解發生的情況。

有了這個基本知識，您在未來建置網站時將有更好的內容做出決策；例如，您是否應該選擇 JavaScript 架構，或建立自己的 JavaScript 函式來建置您的網站。

現在來開始看看我們想要的方向。

案例

假設您是一位網頁程式開發人員，而貴公司要求您讓公司的網站能夠吸引更多客戶。 為了讓客戶在您的網站上自訂其體驗，您決定新增淺色與深色佈景主題的支援。 您建立一個可示範如何使用 CSS 來支援佈景主題的簡易概念證明網站，並撰寫可在這些佈景主題之間切換的 JavaScript 函式。

完成之後，選取深色佈景主題時，您的網站即會如下列範例所示：

螢幕擷取畫面，其中顯示啟用深色佈景主題的已完成網站。

網頁中有什麼內容？

內容、樣式與互動邏輯會分別分離成 HTML、CSS 與 JavaScript 檔案。 新式程式設計的其中一個設計準則是「關注點分離」。 在個別考量的眾多原因之中，其中兩點是簡潔及可重複使用。 例如，藉由使用 CSS 來設定 HTML 元素樣式，您便可以簡化 HTML 程式碼。 無論網頁複雜度為何，您都可以將 CSS 樣式套用至網頁上的所有元素，而不是在每個 HTML 元素中個別對外觀進行編碼。 此外，您可以將多個 HTML 網頁連結至單一 CSS 檔案，以協助簡化整個網站並提供一致的外觀與風格。