recursal/MDN huggingface dataset:
常見問題
====

學習專區的這個區塊被設計來為可能遇到的常見問題提供解答，這並非核心學習路線的必要途徑（譬如 HTML 或 CSS 的教學文章）。這些文章為獨立成群。

Web 的運作方式
---------

這個區塊包含網路運作機制——有關網路環境及其如何運作的一般知識。

網際網路如何運作？ (en-US)

**網際網路**是網路的骨幹，讓網路成為現實的技術基礎架構。簡單來說，網際網路是讓所有電腦互相溝通的超大型網絡。這篇文章用最淺顯的文字探討它是如何運作的。

網頁、網站、網路伺服器及搜尋引擎有什麼區別？ (en-US)

這篇文章講述網路相關的各種概念：網頁、網站、網路伺服器及搜尋引擎。這些術語常常被新手混淆或誤用。讓我們來認識它們各自的意思吧！

URL 是什麼？ (en-US)

結合 Hypertext (en-US) 與 HTTP，URL 是最重要的網路概念之一。它是被 browsers 用來獲取發佈到網路的任何資源的機制。

網域名稱是什麼？ (en-US)

網域名稱是網際網路基礎架構中關鍵的一部份，它提供指向網際網路上可被找到的網路伺服器一個可被人讀懂的地址。

網路伺服器是什麼？

「網路伺服器」指能橫跨網路將網站提供給用戶端的硬體或軟體——或是軟硬體結合。這篇文章探討網路伺服器怎麼運作，以及為何它很重要。

超連結是什麼？ (en-US)

這篇文章中，我們會學到超連結是什麼，以及為何它很重要。

工具與設定
-----

有關能用來建立網站的工具/軟體的問題。

在網路上做事要花多少錢？ (en-US)

當你啟動一個網站時，可能不用花錢，可能成本高得嚇人。這篇文章中我們會探討每個細節的成本，以及你花一筆錢（或者不花錢）能獲得什麼。

架一個網站需要什麼軟體？ (en-US)

這篇文章解釋當你編輯、上傳或檢視網站時需要用到的軟體。

哪個文字編輯器比較適合？ (en-US)

這篇文章中，我們列出為網路開發選擇與安裝文字編輯器時一些值得思考的重點。

瀏覽器開發者工具是什麼？ (en-US)

每個瀏覽器皆有一系列對 HTML、CSS 及其它網路程式碼除錯的開發工具。這篇文章將解釋如何使用你的瀏覽器開發工具的基本功能。

如何確保我的網站會正常運作？ (en-US)

你將你的網站發佈到網路上了——非常好！但是你確定它能正確運行嗎？這篇文章提供一些基本的問題解決步驟。

如何架設本地端測試伺服器 (en-US)

這篇文章將解釋如何在你的電腦上設置一個簡單的本地端測試伺服器，以及基本使用方式。

如何上傳檔案到網路伺服器？ (en-US)

這篇文章示範如何透過 FTP 工具將你的網站發佈到網路上——這是將網站放到線上，讓別人可從他們的電腦存取的常見方式之一。

如何使用 GitHub 頁面？ (en-US)

這篇文章提供如何透過 Github 頁面發佈內容的基礎指南。

如何在 Google App Engine 上架設網站？ (en-US)

想找個地方架設你的網站嗎？這是一篇手把手教你在 Google App Engine 上架設網站的指南。

為網站除錯及改良效能需要什麼工具？

本系列文章教你如何用 Firefox 開發者工具來除錯與改良網站效能，將會運用工具來檢視記憶體使用量、JavaScript Call Tree、被渲染的 DOM 節點數及其它東西。

設計與網頁親和力
--------

這個區塊列舉有關美感、網頁架構、網頁親和力技巧等等的問題。

如何開始設計我的網站？ (en-US)

這篇文章會探討每個專案最重要的第一步：定義你想透過這個網站達成什麼目標？

常見網頁布局包含什麼？ (en-US)

當你為你的網站設計網頁時，最好對一些常見的布局有所了解。這篇文章帶你遍覽幾個典型的網頁布局，仔細檢視組成它的每個部份。

網頁親和力是什麼？ (en-US)

這篇文章將介紹網頁親和力背後的基本概念。

如何設計能兼容所有使用者的網站？ (en-US)

這篇文章提供幫助你設計能兼容所有使用者的網站的基本技巧。

哪些 HTML 功能可以增進網頁親和力？ (en-US)

這篇文章講述讓網頁對不同的身心障礙更顯親和的特定 HTML 功能。

HTML、CSS 與 JavaScript 問題
------------------------

有關 HTML、CSS 與 JavaScript 的常見問題解決方式，可以參考以下文章：

* 使用 HTML 解決常見問題
* 使用 CSS 解決常見問題
* 使用 JavaScript 解決常見問題
工具與測試
=====

當你開始對網路核心技術（如 HTML、CSS、JavaScript）感到熟悉、累積經驗、閱讀更多資源、學到更多技巧和竅門時，你會碰上一大堆的工具，從 CSS 與 JavaScript 開始，到測試並自動化程式、還有一堆眉眉角角。等到你網路專案變得龐大而複雜時，你可能會想要用上某些工具、並針對你的程式碼，撰寫些可信賴的測試計劃。學習專區的這一區，旨在給你做出明智抉擇的所需。

網路產業的職場令人興奮，但也並非全無弊病。當今用於建置網站的核心技術已相當成熟，然新功能日益漸增、而方便使用，並由那些技術為基礎的新工具也不斷問世。最重要的是，我們還要把跨瀏覽器支援銘記於心，並確保我們的程式碼遵循專案的最佳做法，以確保它們能在不同用戶使用的瀏覽器和設備上運行，身心障礙人士亦可使用。

決定該用什麼工具可能是個困難的過程，因此我們寫了這幾篇文章，來告訴你可以使用什麼樣的工具、它們能為你做什麼，以及如何針對產業的偏好利用之。

**備註：** 因為隨時都會有新工具問世、舊工具退出，我們刻意把內容寫得盡可能中立：我們希望先關注這些工具所能完成，最重要的一般類型的任務，並最小化特定工具。很明顯，我們要示範工具使用，以展示具體技術，但請注意我們不一定推薦這些工具為最佳或唯一辦法：大多數情況下其實有其他方法，但我們希望為你提供一個清晰的工作方法論。

學習途徑
----

在使用文章所述的工具前，你應該確實理解 HTML、CSS、JavaScript 核心語言的基本。比方說，在你開始處理複雜的程式碼錯誤前，要知道這些語言的基本原理、如何活用 JavaScript 函式庫、或是使用 test runner 給你的程式碼寫測試……等等。

最少，你需要扎實的基礎。

模組
--

現實世界的網路開發工具（TBD）

在此模組，我們會探索許多可用的網路開發工具。這包括檢查想解決的最常見任務類型，它們如何合併到工作流程中，以及目前可用於執行這些任務的最佳工具。

跨瀏覽器測試

此模組專注於測試網路專案的跨瀏覽器領域。在此，我們會辨認你的目標閱聽者（例如你最該對什麼樣的用戶、瀏覽器、還有設備操心？）如何做測試、不同類型的程式碼會碰上的主要問題、如何解決/減輕這些問題、哪些工具最能幫你測試和修復問題、還有如何用自動化加速測試。
JavaScript — 動態的客戶端指令
=====================

JavaScript 程式語言可讓你在網頁上建構複雜的事物。當網頁不僅僅呆板呈現給你靜態的內容（像是即時的內容更新，互動式地圖、2D/3D 動畫、滑鼠操控影片播放…等等），你可以大膽猜測 JavaScript 已經參與其中。

學習途徑
----

JavaScript 相較於 HTML 和 CSS 這些技術可以說比較困難。開始嘗試學習 JavaScript 之前，強烈建議你起碼先熟悉上述兩項技術，或者了解其它的更好。可以透過以下單元開始：

* 入門認識 Web
* HTML 簡介
* CSS 簡介

若你之前有其他程式語言的撰寫經驗，也許會有幫助。

當熟悉 JavaScript 的基本知識之後，你應該進入一些更進階的主題，像是：

* 深入 JavaScript，像是 JavaScript 指南
* Web API
單元
--

本主題涵蓋許多單元，建議你依下列順序閱讀。

JavaScript 初探

在我們的第一個 JavaScript 單元，在帶你初次實際撰寫 JavaScript 程式之前，我們先回答幾個基本的問題，像是「什麼是 JavaScript？」、「它看起來是什麼樣子？」、「它能做些什麼？」。接著，我們深入地討論幾個 JavaScript 關鍵的組成元素，例如：變數、字串、數字、陣列。

JavaScript 構成元素

在這個單元，我們繼續含蓋 JavaScript 關鍵的基本元素，把焦點放在常見程式碼區塊的類型，像是條件陳述式、迴圈、函數以及事件。你已經在這個課程中看過這些東西，但只是匆匆一瞥，在這裡我們會明確地討論。

JavaScript 物件介紹

在 JavaScript 程式語言，絕大部分的東西都是物件，從核心的 JavaScript 元素像是字串（string）和陣列（array）到基於 JavaScript 建構的瀏覽器 API 都是。你甚至可以建立自己的物件，將相關的變數與函數封裝成能有效率操作的集合體。如果你想更深入了解這門程式語言的知識，並撰寫出更有效率的程式碼，了解 JavaScript 物件導向的本質是重要的，因此我們準備這個單元來幫助你。這裡我們教詳細的物件理論與語法，看看要如何建自你自己的物件，以及說明什麼是 JSON 資料和怎麼使用它。

非同步的 JavaScript

這個單元我們來討論非同步的 JavaScript，它為什麼重要，以及它能如何有效處理像是由伺服器抓取資料這種阻塞性操作（它會造成網頁停頓）。

用戶端的 web API

當你走在用 JavaScript 撰寫用戶端程式，來建構網站或應用程式的路上，不利用 API 很難走很遠，介接在操控瀏覽器、作業系統的不同功能，或是接收來自其它網站、服務的資料。在這個單元中，我們將討索什麼是 API ，以及如何使用幾個在你開發過程中，十分頻繁被使用到的 API 。

解決常見的 JavaScript 問題
-------------------

在你寫網頁時，可參閱〈透過 JavaScript 解決常見的問題〉內所提供的連結，解決許多常見問題。

參考資源
----

JavaScript on MDN

MDN 上連結到各篇 JavaScript 核心文件的主要，在這裡你可以找到關於 JavaScript 程式語言各方面廣泛的參考文件，還有一些進階的指引幫助你成為熟練的 JavaScript 使用者。

Learn JavaScript

對於想成為網站開發者一個很好的資源，以互動的方式學習 JavaScript ，包含短課程、互動測驗，自動評估狀況給予指引。前 40 堂課是免費，完整的課程可以在一次付費買下。

JavaScript Fundamentals on EXLskills

在免費的 EXLskills 開源課程中，介紹給你所有開始建構 JavaScript 應用程式所需要的東西。

Coding math

一系列優質的教學影片，教你需要了解哪些數學知識，來讓你成為有效率的程式設計師。（作者：Keith Peters）
學習 HTML ：指南與教學
==============

為了建立網頁，你應該要先知道 HTML——用來建造網站架構的科技。 HTML 是用來辨認網頁中的內容該如何被解讀，例如說被解讀為：一個段落（paragraph）、清單（list）、文件標題（heading）、連結（link）、圖片（images）、多媒體播放器（multimedia player）、表單（form）或是任何一個可使用的「元素（elements）」，甚至是你自己定義的新元素。

學習途徑
----

理想上，你應該從學習 HTML 開始你的學習旅程。可以先從閱讀 HTML 介紹 開始。接下來你可以開始閱讀以下的進階主題：

* CSS 及如何使用它來美化 HTML （例如改變文字大小和字形、加上邊框與陰影、用多欄位[columns]來排版你的頁面、增加動畫和視覺效果……）
* JavaScript 及如何使用它來為網頁增加互動性的功能（例如將你的位置顯示在地圖上、點擊按鈕讓 UI 上的元素出現或消失、將用戶的一些資料存放在他們的電腦上……等等）

當你開始閱讀這主題時，你至少必須對使用電腦有基礎了解，以及會基本的上網（諸如網頁瀏覽、了解網頁內容）。而你需要建立一個已安裝基本軟體（詳細軟體請參閱安裝基本軟體）的基礎工作環境，並且了解如何建立與管理檔案（詳細請參閱檔案處理）——這些都包含在新手 Web 入門的章節裡。

建議你在開始學習 HTML 這個項目之前，可以先從網際網路開始瞭解是如何運作的。儘管知道網路的運作不是必要的；大部分的項目都在 HTML 基礎 的文章中 HTML 介紹這個章節更詳盡地介紹模組（module）、albeit。

模組
--

這主題包含了以下幾個單元, 你可以根據以下順序來閱讀他們。強烈推薦從第一個單元開始讀起。

HTML 介紹

這個單元為你提供一個平台，讓你熟悉重要的概念和語法、思考如何將 HTML 應用於文本、如何創建超連結以及使用 HTML 來構建網頁。

嵌入多媒體

本單元探索如何在你的網頁中使用 HTML 嵌入多媒體，包括置入圖片的各種方法，以及如何嵌入影片，音檔甚至其它網頁。

表格

以易於理解、無障礙的方式在網頁顯示表格數據可能是一個挑戰。此單元涵蓋基本的表格標記以及更複雜的功能，例如實行標題和摘要。

解決常見的 HTML 問題
-------------

利用 HTML 解決常見問題提供部分連結，這些內容解釋了在創建網頁時如何使用 HTML 解決常見的問題：標題、添加圖片或影片、強調內容、創建基本表單等等。

或許你還想看
------

網站表單

這篇指南提供一系列的文章，幫助你掌握 HTML 表單的基本知識。對於與使用者互動，網站表單是十分有力的工具，最常使用於用戶資料蒐集，或控制使用者介面。但由於一些歷史與技術上的因素，並沒有顯著的方法發揮表單的潛力。在下面的指引中，我們將介紹網站表單所有基本面向，包括標記他們的 HTML 結構、設定控制器樣式、資料驗證及將資料傳送至伺服器。

HTML

MDN 的 HTML 參考文件的主要入口，包括詳細的元素和屬性參考-例如，如果你想知道元素具有哪些屬性或屬性具有什麼值，那麼這是一個很好的起點。
CSS（樣式表）
========

階層式樣式表（CSS）是學習完 HTML 之後，你應該學習的第一項技術。HTML 用於定義內容的架構與語意，CSS 則是用來設定樣式與佈局方式。舉例來說，你可以使用 CSS 來改變內容的字體、顏色、字型大小、間距、拆分成多欄，或是加入動畫和其他裝飾性質的特性。

### 想要成為 Web 前端開發人員？

我們整理了一門課程，包含了你實現目標需要的所有基礎知識。

開始 (en-US)

先備知識
----

在嘗試 CSS 之前，你應該先了解基本的 HTML 知識。我們建議先閱讀 HTML 介紹單元。在這個單元你會學習到關於：

* CSS，由 CSS 介紹單元開始
* 更進階 HTML 模組
* JavaScript 以及它如何在網頁加上動態的功能

在你了解最基礎的 HTML 運作思維後，我們推薦你同時學習 HTML 與 CSS，使兩者之間互相搭配。因為 HTML 搭配上 CSS 會變得無比有趣，兩者是密不可分的，你無法在不理解 HTML 的情況下獨立學習 CSS。

在開始這個主題之前，你應該要有電腦的基礎使用概念以及使用網頁的經驗（單純地瀏覽、查看內容）。你應該要有一個已經設定的好的基本工作環境，如同安裝基本軟體所敘述的，知道怎麼建立與管理檔案，如同處理檔案提到的內容。這兩者都是 Web 入門裡初學者單元中一部分。

建議你在開始課程前先閱讀 Web 入門，不過並非絕對必要，儘量那裡有許多詳細的介紹，大部分 CSS 概念在我們的 CSS 入門單元中也會含蓋到。

單元
--

這個主題按建議的學習順序包含以下的單元。強烈建議你從第一項開始。

CSS 入門

CSS（階層式樣式表）用來設定網頁的樣式及佈局，例如：改變文字的字體、顏色、大小及間距以及拆分為多欄，或是增加動畫或裝飾性的效果。這個單元提供一個溫和的路徑，讓你逐漸熟悉 CSS 的基礎概念，包含它的運作方式，語法是什麼樣子，以及如何開始在 HTML 裡添加樣式。

CSS 的組成 (en-US)

這個單元接續在 CSS 入門之後，現在已經熟悉了這門語言的語法，並有了一些基本的使用經驗，是時候再深入一些。這個單元關注於疊加（cascade）和繼承（inheritance）規則、所有可用的選擇器類型、單位、尺寸、背景與邊框的樣式、除錯，以及其它更多的。這裡的目的是在進入更進階的主題，像是文字樣式及 CSS 佈局之前，給你一個足以寫出合格 CSS 的工具包並幫助你了解所有的基礎理論。

裝飾文字

在含蓋了 CSS 語言基本的部分之後，下一個帶給你的 CSS 主題會專注於文字樣式的裝飾上，你將最常用 CSS 作的事情之一。在這裡，我們文字樣式的基礎，包括設定字體、粗細、斜體、行距與字距、陰影與其它的文字效果。整個單元圍繞於在你的頁面上套用選擇的字體，以及對清單和連結進行樣式調整。

CSS 的布局

到了這邊，我們已經看過了 CSS 的基礎知識，如何裝飾文字，如何裝飾並控制你內容所在的區。現在是時候來看看如合將你的這些區塊擺放到正確的位置，並能依不同的可視空間進行調整。我們已經含蓋了必須的先備知識，所以我們現在可以深入到 CSS 的布局，看看不同的顯示設定，像是新的佈局工具 flexbox 、 CSS grid 和定位（position）以及一些你可能仍想要了解的早期技術。

解決常見的 CSS 問題
------------

使用 CSS 解決常見的問題裡提供了許多單元的連結，其內容說明如何使用 CSS 解決在建立網頁時常見的問題。

在一開始，你主要將顏色套用到 HTML 元素或是背景；改變元素的大小、形狀和位置，然後添加、定義元素的邊框。當你對 CSS 的基礎知識有深刻的理解，就沒有太多作不到的事情。學習 CSS 其中一項最棒的事情，是當你了解了基本原理，通常你就能很好的抓到「什麼能作」、「什麼作不到」的感覺，既使是在你還不確切的知道要怎麼實現它的狀況下。

怪異的 CSS
-------

CSS 與你將遇到程式語言或設計工具在運作上有點不太一樣。為什麼要用這種方式運作？在下面影片中， Miriam Suzanne 解釋為什麼 CSS 是這樣運作，以及為什麼會這樣子發展。（可以利用字幕翻譯功能，將 CC 字幕轉為中文）

相關資源
----

MDN 中的 CSS 資源

在 MDN 網站裡，CSS 文件的主要入口，你將可以在這裡找到所有 CSS 語言的所有特性，以及它們詳細的參考資訊。想要知道一個屬性可以套用的所有設定嗎？這是一個不錯的地方。
Web 入門
======

*Web 入門*是一系列簡潔的文章，介紹網頁開發的實用範例。你將運用相關工具建構簡易網頁並發布自己的程式碼。

替你的第一個網站說故事
-----------

建立個人網站需要很多功夫。如果你才剛開始接觸網頁設計，我們建議大家可以先從小地方著手。不是要你立刻就寫出跟「Facebook」一樣規模的網站，但自己架一個上線的網站一點都不難，現在就開始吧！

只要依序看過以下的系列文章，你將初學者蛻變成會架設自己的第一個上線網頁，Let's go！

安裝基本軟體

現有許多工具可建構網站。如果你剛起步，你可能不知從何選擇程式碼編輯器、框架、測試工具等等。我們將透過〈安裝基本軟體〉逐步引領你安裝基本的網頁開發軟體。

你的網站看起來會是什麼樣子？

在開始為自己的網站寫程式碼之前，你應該先規劃要呈現哪些資訊？要採用哪種字體與顏色？你可依照〈你的網站看起來會是什麼樣子？〉所提供的簡易方法，照著來規劃網站的內容與設計。

與各式各樣檔案打交道

一個網站包含許多檔案：文字內容、程式碼、樣式表、多媒體內容等等。當建立網站時，你需要將這些檔案組合成清晰的架構，並確保它們能彼此互動溝通。〈與各式各樣檔案打交道〉將引領你安排合理的檔案架構，以及你應該注意的問題。

HTML 基本概念

超文字標籤語言（Hypertext Markup Language，HTML）可用以建構網頁內容，並賦予其含意和用途。例如某段內容要分為多個段落，或是用項目符號列成幾個重點？要在網頁插入圖片？這裡需要以資料表格整理嗎？如果這些沒有嚇到你，〈HTML 基本概念〉將提供足夠的資訊。

CSS 基本概念

階層樣式表（Cascading Stylesheets，CSS）可用以塑造網站的特殊風格。例如這段文字要用一般的黑色，或是改用紅色標明重點？某段重要內容應該置於畫面的何處？想用什麼背景圖片及顏色裝飾你的網站？〈CSS 基本概念〉帶你入門。

JavaScript 基本概念

程式設計語言 JavaScript 可為你的網站增加互動功能，例如動畫、遊戲、按下按鈕的後續動作、將資料輸入表單、動態套用樣式的效果等等。〈JavaScript 基本概念〉將帶你瞭解此一有趣的程式語言及其能耐，並讓你快速入門。

將你的網站發佈上線

在寫完程式碼並整理好檔案之後，接著就是將網站發佈上線，讓其他人可以瀏覽、欣賞內容。〈將你的網站發佈上線〉將帶領你以最輕鬆的方法發佈你的範例程式碼。

網站的運作方式

在瀏覽喜愛的網站時，你可能未意識到瀏覽器正於背景中運作著許多複雜事情。〈網站的運作方式〉將簡略說明網頁瀏覽時所發生的大小事。
Multimedia and Embedding
========================

到目前為止，我們已經看到了很多文字，但是只使用文字讓人感到無聊。讓我們開始研究如何透過更有趣的內容讓網絡變得活躍起來！本單元探討如何使用 HTML 在你的網頁中包增加媒體，包括可以嵌入圖像的不同方式，以及如何嵌入影片，音訊甚至整個網頁。

預備知識
----

在此單元開始之前，我們假設你對 HTML 基礎知識 (如HTML 介紹) 已經有一定的了解，如果還沒有，建議你先預習該部分再回來。

**備註：** 如果你所操作的電腦、平板或裝置環境不允許你建立自己的檔案，你可以在諸如 JSBin 或 Glitch 這樣的網站上嘗試(多數的)範例程式碼。

導覽
--

本單元包含以下章節，它們將帶你了解在網頁上嵌入多媒體的所有基礎知識。

HTML 中的圖片

可以考慮到的多媒體種類很多，但是從用以將簡單圖像嵌入網頁中不起眼的 img元素開始是很合乎邏輯的。在本文中，我們將研究如何更深入地使用它，包括基礎知識，使用`<figure>` (en-US)加上標題的註釋以及它與 CSS 背景圖像的關係。

視訊與音訊內容 (en-US)

接著，我們將研究如何使用 HTML5 `<video>` (en-US)和`<audio>` (en-US) 元素在頁面上嵌入視訊和音訊，包括基本知識，以提供對不同頁面的訪問文件格式添加到不同的瀏覽器，添加標題和字幕，以及如何為舊版瀏覽器添加後備廣告。

從物件到 iframe — 其他嵌入技巧 (en-US)

在這裡，我們想橫跨一步，著眼於幾個元素，這些元素可以使你將各種內容類型嵌入到網頁中：`<iframe>` (en-US)，`<embed>` (en-US)和 `<object>` (en-US)元素。 <iframe>用於嵌入其他網頁，另外兩個允許你嵌入 PDF，SVG 甚至 Flash（一種即將消逝的技術，但你可能仍會定期看到它）。

為 Web 新增向量圖 (en-US)

向量圖形在某些情況下可能非常有用。 與 PNG / JPG 等常見格式不同，它們在放大時不會失真/像素化-在縮放時可以保持平滑。 本文向你介紹什麼是向量圖，以及如何在網頁中加入流行的SVG格式。

適應性圖片 (en-US)

在本文中，我們將學習適應性圖片 (又稱響應式圖片)的概念。適應性圖片在不同螢幕尺寸，解析度和其他類似功能差異很大的設備上都能很好地運作。我們還會研究 HTML 提供了哪些工具來幫助實現它們。 這有助於提高不同設備之間的性能。 響應式圖片只是響應式設計的一部分，在將來你學習 CSS 的單元中還會有響應式圖片的單元。

評量
--

以下評量中將測試你對以上指南中介紹的 HTML 基礎的理解：

Mozilla 啟動頁面 (en-US)

在此測驗中，我們將測試你對本區塊文章中討論的一些技術的了解，使你能夠向時髦的啟動頁面添加有關 Mozilla 的一些圖片和視訊！

另見
--

增加點擊映射到圖片上層 (en-US)

圖像映射提供了一種機制，可以使圖像的不同部分鏈接到不同的位置。（請試想在地圖上點擊每個不同國家/地區以取得更多資訊）此技術有時很有用。

網頁知識基礎 2

一個出色的 Mozilla 基礎課程，探索和測試此多媒體和嵌入單元中討論的一些技能。 深入研究網頁組成，可訪問性設計，共享資源，使用線上媒體和開放性工作的基礎知識（這意味著你的內容可以免費獲得併可以由他人共享）。
使用HTML解決日常問題
============

以下連結會給出 HTML 常見待解問題的方法

### 基本結構

HTML 文件的最基本結構應用。如果你是 HTML 新手，就先從這裡開始看。

* 如何建立基本 HTML 文件
* 如何有邏輯地分割網頁 (en-US)
* 如何建立良好的標題段落結構
### 基本文字語法

HTML 專攻於為文件提供語義資訊，因此 HTML 可以提供使用者更精準的文件資訊傳達方式。

* 如何建立清單
* 如何強調文件的內容
* 如何表示出一段文字的重要性
* 如何顯示程式碼 (en-US)
* 如何為圖片加入註記
* 如何標示並註記縮寫 (en-US)
* 如何在網頁中加入引用 (en-US)
* 如何加入詞語的定義 (en-US)
### 超連結

超連結 (en-US)把 HTML 導覽變得相當容易，它可以這麼用：

* 如何建立超連結
* 如何用 HTML 建立表格內容
### 圖片與多媒體

* 如何把圖片加進網頁
* 如何把視訊內容加進網頁 (en-US)
* 如何把音訊內容加進網頁 (en-US)
### 腳本與樣式

HTML 只建立文件的基礎架構，可以透過 CSS 或腳本使內容呈現更具互動性。

* 如何在網頁中使用 CSS
* 如何在網頁中使用 JavaScript (en-US)
### 嵌入內容

* 如何在網頁中嵌入另一個網頁 (en-US)
* 如何在網頁中加入 FLASH 內容 (en-US)
不常見或進階的問題
---------

除了上述的基本功能外，HTML 還提供許多進階功能讓使用者解決較複雜的問題。這些文章可以幫助你處理一些較不常見的情況：

### 表單

表單是一種用來把網頁資料傳送到網路伺服器的複雜 HTML 結構。我們鼓勵你讀一遍我們對此的完整指南。你可以從以下文章開始：

* 如何建立簡單的表單 (en-US)
* 如何組織表單的架構
### 表格訊息

有些被稱為表格訊息的資訊需要被組織成擁有直行與橫列的表格。這是其中一種最複雜的 HTML 架構，要熟練它並不簡單：

* 如何建立資料試算表
* 如何讓 HTML 表格可被獲取
### 資料表示方式

* 如何用 HTML 表示數值——參見上標與下標 (en-US)及顯示電腦程式碼 (en-US)
* 如何使用資料屬性 (en-US)
### 進階文字語法

* 如何控制 HTML 換行
* 如何標記改變（新增與移除的文字）參見 `<ins>` (en-US) 及 `<del>` (en-US) 標籤
### 進階圖片 & 多媒體

* 如何在網頁中加入響應式圖片 (en-US)
* 如何在網頁中加入向量圖片 (en-US)
* 如何在圖片上加入圖像映射 (en-US)
### 國際化

HTML 不只支援單一語言，它還有提供工具來處理常見的國際化問題。

* 如何在單一網頁中加入多國語言
* 如何用 HTML 表示時間與日期 (en-US)
### 效能

* 如何創建快速載入 HTML 網頁 (en-US)
HTML 表格
=======

HTML 的常見任務就是建構表格資料，某些元素與屬性正是為此目的而生。HTML 以及用於樣式化的 CSS 能方便顯示諸如讀書計劃、附近游泳池的開放時間、分析最喜歡的恐龍或足球隊……之類的表格資訊。本模塊將帶你認識建構 HTML 表格資料所需的一切。

先決條件
----

開始本模塊之前，你要理解基本的 HTML：請參見 HTML 介紹。

**備註：** 如果你用的電腦或平板之類的設備，無法允許建立自己的檔案，你可以把大部分的例子放在線上程式網站，例如 JSBin 或 Glitch。

教學
--

本模塊包含以下文章：

HTML 表格基礎

這篇文章將介紹 HTML 表格，包含像是行列、標題、製作單元格、跨多行與列等基礎知識，還有如何把他們組合在一起，以方便樣式化。

HTML 表格進階與無障礙 (en-US)

本模塊的第二篇文章將介紹一些 HTML 表格的進階功能：例如說明、摘要、將行分成標頭、身體、還有註腳三大部分。另外，我們也會探討針對視障人士的表格無障礙。

評估
--

建構行星數據 (en-US)

在我們的表格評估中，我們將提供太陽系中行星的一些數據，並讓你把他們構建到 HTML 表格中。
HTML介紹
======

本質上，HTML 是一種非常簡單的語言，由元素所組成。元素可以賦予文字片段不同的意義 (比方說，將它們描述成段落、項目清單，或是表格的一部分)、將文件組織成不同的邏輯區段 (如標頭(header)、三行的內文，或是導覽目錄)，以及在網頁中嵌入圖片或影片等內容。在這個主題中我們將介紹前面兩項，並介紹基本概念以及語法以讓你了解 HTML。

預備知識
----

在開始閱讀之前，你並不需要具備任何 HTML 知識，你只要能夠操作電腦、瀏覽網頁並消化其中的內容即可。你需要建立一個基礎工作環境，並且了解如何建立與管理檔案── 這些都屬於我們 Web 入門 的一部分。

**備註：** 如果你是在某些無法建立個人檔案的電腦/平板/其他裝置上進行，你可以在一些線上 coding program（如 JSBin 或 Glitch）上測試程式碼範例。

導覽
--

這個主題包含以下子題，將帶你了解所有 HTML 的基礎理論，並且提供充足的機會讓你測試所習得的技能。

HTML 入門

包含 HTML 最基礎的部分 ── 我們將定義元素（elements）、屬性（attributes）以及其他重要術語，並且介紹它們的使用方法。除此之外，我們也將說明典型的 HTML 網頁及其中的元素是如何構成的，並解釋其他重要的基本語言特性。還有，我們也會玩一些 HTML，好引發你的興趣！

在 head 中有什麼? HTML 中的後設資料(Metadata)

HTML 文件的 head 是在網頁加載完畢之後，不會顯示在瀏覽器上的部分。其中包含一些資訊，如頁面的標題(`<title>`)、CSS 的連結 (當你想利用 CSS 來妝點你的頁面 HTML 時，你會用到它們)、網頁圖示(favicon)的連結，以及 metadata (裡頭承載了有關於該 HTML 的資料，如作者、描述該文件的關鍵詞等。)

HTML 文字的基礎知識

一個 HTML 的主要作用是賦予純文字意義(又稱為語義化 (en-US))，好讓瀏覽器知道如何正確地顯示它。這篇文章將探討如何使用 HTML 來將文字區塊拆解為標題(heading)和段落(paragraph)、強調字詞、建立列表等等。

建立超連結

超連結真的非常重要 — 它造就了我們現今所知的網路。這篇文章介紹超連結的使用語法，並且探討建立連結的最佳實踐方法。

進階文字格式 (en-US)

在 HTML 中還有許多可以用來格式化文字的元素，但我們沒有在 HTML 文字的基礎知識中提及這些內容。雖然這些元素比較鮮為人知，不過還是相當值得一談。在這篇文章中，你將會學到如何表示引言、描述列表、程式碼、上下標，及聯繫訊息等等。

文件與網站架構

除了分別定義網頁的各個成分（例如：段落或是圖片），HTML 還能定義網頁上的區塊（例如：標頭、導航列或是主要內容）。這篇文章將介紹如何規劃一個基本的網頁架構，以及如何透過編寫 HTML 來表示網頁架構。

HTML 除錯 (en-US)

如果 HTML 出錯了，卻找不到哪裡有錯誤該怎麼辦？這篇文章將會介紹一些能幫得上忙的實用工具。

評量
--

下面的評量將測試你對於以上的 HTML 基礎是否已經了解。

標記信件內容 (en-US)

我們都學過怎麼寫信，而信件也是用來測試我們格式化文字技巧的好例子。在這份測驗中，你將需要以 HTML 將一封信標記成題目要求的樣子。

組織網頁內容 (en-US)

這份測驗將要測試你利用 HTML 來組織網頁的能力，該網頁將包含頁眉(header)、頁腳(footer)、導覽列(navigation)、內文(main content)和側邊攔(sidebar)。

另見
--

Web literacy basics 1

Mozilla 基金會所提供的一個優質課程。該課程探索並測驗了很多在本主題中所提及的技術。透過裡頭的六大學習主題，學習者能夠熟悉閱讀、撰寫以及參與網路，並經由實作與合作了解網路基礎。
測試你的技能：多媒體和嵌入
=============

這項技能測試的目的是評估你是否了解我們的視訊和音訊內容 (en-US)以及從物件到 iframe 的其他嵌入技術 (en-US)文章。

**備註：** 你可以在下面的交互式編輯器中嘗試解決方案，但是下載代碼並使用在線工具如 CodePen, jsFiddle, or Glitch 去完成測試。

如果你遇到困難，請向我們尋求幫助-請參閱 評估或進一步幫助 此頁面底部的部分。

多媒體和嵌入 1
--------

在此測試中，我們希望你將一個簡單的音檔嵌入到頁面上。你需要：

* 將音頻文件的路徑添加到適當的屬性，以將其嵌入頁面中。音檔名為`audio.mp3`，位於當前文件夾中的文件夾`media`中。
* 添加屬性讓瀏覽器顯示一些預設控制選項。
* 為不支持的音檔撥放的瀏覽器添加一些適當的備註。

嘗試更新下面的程式碼以完成測驗：

**備註：** 下載此測驗的程式碼在你自己的編輯器或線上編輯器中運行。

多媒體和嵌入 2
--------

在此測驗中，我們希望你標記一個稍微複雜一些的影片播放器，此外還具有多個來源、字幕和其他功能。你需要：

* 添加屬性以使瀏覽器顯示一些預設控制選項。
* 為不支持的影片撥放的瀏覽器添加一些適當的備註。
* 添加多個源，其中包含視頻文件的路徑。這些文件稱為 `video.mp4` 和 `video.webm`, 並且位於一個名為`media`的文件夾中。
* 讓瀏覽器提前知道影片來源的影片格式，以便可以提前選擇要下載的影片。
* 給予 `<video>` 寬度和高度等於固定大小（320 x 240 像素）。
* 使影片默認為靜音。
* 顯示包含在 `media` 資料夾, 在一個名為 `subtitles_en.vtt`, 播放視頻時，你必須將類型明確設置為字幕，並且字幕語言為英語。

嘗試更新下面的程式碼以完成測驗：

**備註：** 下載此測驗的程式碼在你自己的編輯器或線上編輯器中運行。

多媒體和嵌入 3
--------

對於此最終測驗，你需要執行兩個測驗：

* 將 PDF 嵌入頁面。PDF 檔名為 `mypdf.pdf`, 並存在 `media` 資料夾.
* 轉到 YouTube 或 Google Maps 這樣的共享網站，然後將影片或其他媒體項目嵌入頁面。

T 嘗試更新下面的程式碼以完成測驗：

**備註：** 下載此測驗的程式碼在你自己的編輯器或線上編輯器中運行。

評估或進一步幫助
--------

你可以在上面的 Interactive Editors 中練習這些示例。

如果你希望對自己的工作進行評估，或者遇到困難希望尋求幫助：

1. 將你的工作放入在線共享編輯器中，例如 CodePen, jsFiddle, 或 Glitch. 你可以自己編寫程式碼，也可以使用以上各節中連接到的初始文件。
2. 撰寫帖子，要求評估和/或幫助 MDN Discourse forum Learning category. 你的貼文應包括：
    * 描述性標題，例如「 HTML 圖像基礎知識 1 技能測試所需的評估」。
    * 你已經嘗試過的內容以及你希望我們做什麼的詳細信息，例如如果你陷入困境並需要幫助，或者需要評估。
    * 聯機共享編輯器中你要評估或需要幫助的示例的鏈接（如上面的步驟 1 中所述）。這是進入的好習慣-如果看不到他們的代碼，很難幫助有編碼問題的人。
    * 指向實際任務或評估頁面的鏈接，因此我們可以找到你需要幫助的問題。
將你的網站發佈上線
=========

* 前頁
* Overview: Getting started with the web
* 次頁

當你完成你的網頁程式碼後，你需要把它放到網路上，這樣人們才可以搜尋得到。這個章節將介紹如何快速的把你的程式碼放到網路上。

有哪些選項？
------

發佈網站並不是一個幾句話就能說得完的課題，主要是因為有太多方法能夠發佈網站。在這個章節中，我們不會介紹所有可能的方法，但是我們會簡單講解三個概念，並從初學者的角度分別說明它們的優缺點，然後一步一步帶你用一個你現階段有辦法完成的方法發佈網站。

### 取得主機（hosting）和網域名稱（domain name）

如果想要完全掌控你發佈的網站，那你可能需要花錢買：

* 主機：跟主機租借商（hosting company）的網路伺服器（web server）租一個放置檔案的空間。你把你建置的網頁檔案放到這個空間中，然後想要連結到網頁的人就能透過網頁伺服器連結到你的網站。
* 網域名稱 (en-US)(domain name)：人們可以透過這個獨特的網址來尋找你的網站，像是 `http://www.mozilla.org` 或 `http://www.bbc.co.uk`。你需要向**網域名稱註冊商**（domain registrar）租借網域名稱。

許多專業的網站是用這個方法發佈的。

除此之外，你還會需要一個 File Transfer Protocol (FTP) 程式（點選 How much does it cost: software (en-US) 來取得更多資訊），這樣才能真正的把你建置的網頁檔案傳達給伺服器。FTP 程式很廣泛，但一般來說，你可以用你公司提供的資訊，像是使用者名稱、密碼以及 host name 來登入你的網頁伺服器，它就會以兩個視窗的形式分別顯示你電腦裡的檔案和你網頁伺服器上的檔案，然後你就可以移動你的檔案。

![](/zh-TW/docs/Learn/Getting_started_with_the_web/Publishing_your_website/ftp.jpg)

#### 租借主機和網域的方法

* 在這裡我們不介紹特定的主機租借商(hosting companies)或網域名稱註冊商(domain name registrars)，你只要搜尋「web hosting」與「domain names」就能找到。所有的註冊商都會提供方法，讓你檢查你想要的網域名稱可否使用、或有沒有被註冊過。
* 你的 網路供應商 (en-US) 可能會提供有限制的主機，這可以讓你發佈一些比較簡易的網站，雖然會有些限制，但嘗試使用它來發佈你的第一個網站也是很不錯的 — 聯絡並詢問他們！
* 有些公司提供免費的服務，像是 Neocities、Blogger和 WordPress，但是我要強調，你付出多少得到多少，不過使用它們來發佈你的第一個網站何嘗不是一個理想的方法? 而且免費的服務大部分不需要 FTP 程序來上傳檔案，你只需要用它們提供的介面來移動檔案。
* 有些公司同時提供主機(hosting)和網域(domains)的服務。
### 使用線上工具，像是 GitHub 或 Google App Engine

使用工具來發佈網站：

* GitHub 可以交流程式的平台，它提供你一個空間來存放程式碼，這個空間是基於 Git 的\*\*版本控制系統，\*\*你能夠透過系統共同編輯平台上的程式專案，而這個系統是開放資源，也就是說全世界的人都可以找到你的 GitHub code，包括使用它、從中學習並將它改得更好。GitHub 提供一個非常實用的工具— GitHub Pages，它能讓你發佈網站。
* Google App Engine 是一個強大的平台，不管是要從頭建置 multi-tiered web 程式還是託管靜態網站，它都能讓你在 Google 的基礎下建置和運行應用程式。點選 How do you host your website on Google App Engine? (en-US) 以獲得更多資訊。

這類工具和託管不同，通常他們都是免費的，不過功能當然也會受限。

### 透過如 Thimble 這樣的網路 IDE

有些 web app 會模擬網站的開發環境，讓你能執行 HTML, CSS, JavaScript，顯示程式碼執行結果、並渲染至網站上－－一切都在瀏覽器的一個頁籤內完成。通常這些工具用起來都簡單、學起來簡單、基本功能還是免費的。他們用獨一無二的網址，替你保管渲染好的頁面。不過，基本功能基本上很受限，而且 app 通常都不提供如圖像這種 asset 的託管。

試試以下網站，看看你能想到什麼點子：

* JSFiddle
* Glitch
* JS Bin
* CodePen

![](/zh-TW/docs/Learn/Getting_started_with_the_web/Publishing_your_website/jsbin-screen.png)

透過 GitHub 發布
------------

來看看把網站用 Github Pages 發佈多簡單。

1. 首先註冊 GitHub 並驗證電子郵件。
2. 接著針對要上傳的檔案建立一個 repository。
3. 在頁面的 *Repository name* 標籤輸入 *username*.github.io，*username* 是指你的用戶名。例如我們的好朋友 bobsmith 就會輸入 *bobsmith.github.io*。
 另外，請勾選 *Initialize this repository with a README* 後點選 *Create repository*。
 ![](/zh-TW/docs/Learn/Getting_started_with_the_web/Publishing_your_website/github-create-repo.png)
4. 之後，把網站內容拖曳到 repository 目錄，並勾選 *Commit changes*。

**備註：** 請確定目錄內有 *index.html* 檔案。
5. 現在讓瀏覽器連到 *username*.github.io 來看看你的網站。例如你的用戶名字是 *chrisdavidmills*，就連到 chrisdavidmills.github.io。

**備註：** 讓網站上線需要一點時間。如果網站沒有馬上運行，稍等一段時間後再試一次。

想多理解的話，請參考 GitHub Pages Help.

參閱
--

* 何謂網路伺服器
* Understanding domain names (en-US)
* How much does it cost to do something on the web? (en-US)
* Deploy a Website: A nice tutorial from Codecademy that goes a bit further and shows some additional techniques.
* Cheap or Free Static Website Hosting by Scott Murray has some useful ideas on available services.
* 前頁
* Overview: Getting started with the web
* 次頁
網路如何運作
======

* 前頁
* Overview: Getting started with the web

*〈網路如何運作〉將簡單介紹*，當你透過電腦或手機瀏覽器瀏覽網頁時，究竟發生什麼事。

短期來看，在撰寫網站程式碼時，這些理論並不是非懂不可，但在之後，了解這些背後原理，對你會很有幫助。

用戶與伺服器
------

連接到網路的電腦稱為**用戶端**（client）與**伺服器端**（server）。彼此的連結原理如圖所示：

![](/zh-TW/docs/Learn/Getting_started_with_the_web/How_the_Web_works/simple-client-server.png)

* 用戶端是網路用戶的典型上網設備（像是連到 Wi-Fi 的電腦、或是連到手機網路的手機），這些設備通常有能夠上網的軟體（通常是 Firefox 或 Chrome 之類的瀏覽器）。
* 伺服器端是放著網頁、網站、或者 app 的電腦。當用戶端設備要訪問網頁時，網頁的副本會從伺服器下載到用戶端，以便顯示在用戶的瀏覽器。
百寶箱的其他魔法
--------

剛剛描述的用戶/伺服器端還不是一切，我們還要講述其他部份，才能說完整個故事。

現在把網路想像成一條大道。大道的一端是用戶端，就像你家一樣；另一端則是伺服器，就像是你要去血拼的商店。

![](/zh-TW/docs/Learn/Getting_started_with_the_web/How_the_Web_works/road.jpg)

除了用戶與伺服器之外，我們還需要和這些朋友們打招呼：

* **網路連線**：讓你可以在網路傳送與接收資料。基本上就像是家裡到商店一樣。
* **TCP/IP**：傳輸控制協定和網際網路協定（Transmission Control Protocol and Internet Protocol）是定義資料如何在網路通行的通訊協定。這就像是方便你去商店買東西的交通工具。在這裡本例中，這就像是車子、腳踏車、或其他你想得到的交通工具。
* **DNS**：網域名稱系統（Domain Name Servers）就像是網站的電話簿。當你在瀏覽器輸入網址時，瀏覽器會在取得網站前，先去看 DNS 以查到網站的真實地址。瀏覽器需要找到哪個伺服器在託管指定的網站、這樣才能把 HTTP 訊息傳送到對的地方（可以參考下文）。這就像你在去商店前會先翻開電話簿，才好去商店一般。
* **HTTP**超文本傳輸協定（Hypertext Transfer Protocol）是定義用戶端語言，和伺服器如何對話的應用協議。可以想成你買東西時會用來溝通的語言。
* **Component files**：網站由許多不同的文件組成，如同商店內許多不同的商品。這些檔案分為以下類型：
    + **程式檔**：網站主要是由 HTML、CSS、JavaScript 建立，雖然你知會看到其他工具或技術。
    + **Asset**：這是構成網站其他內容的集體名稱，裡面可能包含圖像、音樂、影片、Word、PDF……之類的。
所以我說到底發生了啥？
-----------

當你在瀏覽器輸入網址時（你可以想像說自己要走去商店時）：

1. 瀏覽器會先去 DNS 伺服器尋找託管網站的伺服器，其真實位置所在（如同你去尋找商店的地址）
2. 瀏覽器向伺服器傳送 HTTP 訊息，請求伺服器向用戶端傳送網站的複本（如同去商店下訂單）。在用戶端及伺服器的之間，請求訊息與其他資訊，會使用 TCP/IP 在網路連線之間傳送。
3. 伺服器如果允許用戶端請求，伺服器就會傳送「200 OK」訊息，意味著「好，你可以閱覽這個網站，那我給你網站資料囉～」並開始對瀏覽器以一小串稱作「資料封包」的組合形式，傳送網站的檔案。這就像是商店給你商品，你接著把它們都帶回家一樣
4. 瀏覽器把一小塊一小塊的東西，組合成完整的網站，並把它呈現起來－－商品送到家門口後，閃亮亮的新貨在你眼前，超棒的啦！
講講 DNS
------

真正的網址，並不是在瀏覽器的網址列上，輸入好記好讀的字串，就能找到你最愛的網站。它們其實是一串特殊的數字，看起來就像是這樣：63.245.215.20

這叫做 IP 地址，網路上它擁有獨一無二的位置。不過，記數字果然不簡單吧？這就是要發明域名伺服器的原因。他們會把你在瀏覽器輸入的網址（例如 mozilla.org）和網站的真實位置（IP）相匹配

網站能直接透過其 IP 位置訪問之：在瀏覽器的網址列輸入 `63.245.215.20` 的話，可以走到 Mozilla 的網站。你可以使用 DNS 查找工具查找網站的 IP 地址。

再講講封包
-----

稍早我們用了「封包」來描述從伺服器傳到用戶端的資料格式。這裡的「封包」是什麼意思呢？通常資料在網路傳送時，會傳送上千個小資料，這樣在同一時間和同一網站，才能有很多用戶下載內容。如果網站只傳送一個大傢伙過去，那在同一時間就只能有一個用戶能下載，網路會變得很慢、很無聊...

參見
--

* How the Internet works (en-US)
* HTTP — an Application-Level Protocol
* HTTP: Let's GET It On!
* HTTP: Response Codes
製作群
---

街頭的照片：Street composing、作者是Kevin D。

* 前頁
* Overview: Getting started with the web
你的網站看起來會是什麼樣子？
==============

* 前頁
* Overview: Getting started with the web
* 次頁

\*你的網站看起來會是什麼樣子？\*會說明你該為網站做的規劃與設計，決定自己的「網站該提供哪些資訊？」、「該使用哪些字型與色彩？」，以及「網站又該達到哪些目的？」

首要：規劃
-----

做任何事之前都需要一些想法。你的網站要達到哪種目的？任何 1 個網站均具備基本作用，但首先你應該保持簡單。我們要先寫出包含了標題、圖像，以及數段文字的簡單網頁。

開始之前，請你先回答下列問題：

1. \*\*你網站的主題為何？\*\*你喜歡貓貓狗狗？想寫城市遊記？或你愛打電動呢？
2. \*\*你對某個主題所提供的資訊到哪種程度？\*\*寫個標題加上幾段文字，或是在網頁上加個圖片。
3. 簡單的問：\*\*你網站的外觀為何？\*\*背景顏色？哪種字型比較合適？一般字型？卡通化的字型？又粗又大的字體？還是要纖細淡化的文字呢？

**備註：** 複雜專案就需要更詳細的建構指南，包含所用的顏色、字型、物件之間的留白空間、適合的書寫風格，等等。這些要素有時會統整為設計指南或品牌手冊，你可參閱〈Firefox OS Guidelines〉進一步了解。

從頭設計
----

接著就是拿紙筆，概略畫出你理想的網站外觀。對自己的第一個簡易網頁，不需考量太多要素或畫得太仔細，應該先養成這個勾勒草圖的習慣。不是要你變成梵谷或畢卡索，但對你以後絕對有幫助！

![](/zh-TW/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/website-drawing-scan.png)

**備註：** 即便是實際的複雜網站，設計團隊也都會先在紙上勾勒草圖，再接著透過圖檔編輯器或 Web 技術弄出數位版的草稿。

Web 團隊往往編制了圖像設計師與使用者經驗 (en-US) (User Experience；UX) 設計師各 1 名。圖像設計師當然是負責整合網站的視覺效果；較屬抽象角色的 UX 設計師則要確定使用者與網站的互動方式。

選擇網頁風格
------

現在開始組合你想在網頁上呈現的內容。

### 文字

你應該已經準備好了一些文章並分好段落。

### 主題色彩

可透過選色工具找到你喜歡的顏色。當你點擊其中一種顏色，就會看到如下圖「`#660066`」的 6 位數字，此即代表該顏色的十六進位 (Hexadecimal) 色碼。請另外找個地方記錄此色碼。

![](/zh-TW/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/color-picker.png)

### 圖片

可透過 Google 的圖片搜尋找到適合的圖片。

1. 找到你想要的圖片時，點選該圖片。
2. 按下「查看圖片」按鈕。
3. 接著在圖片上點擊滑鼠右鍵 (Mac 則是 Ctrl + click)，選擇「將圖片另存新檔...」，將圖片儲存到你熟悉的位置。或是可複製瀏覽器網址列中的網址，以待往後使用。

![](/zh-TW/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/updated-google-images.png)

**備註：** 在網路上可找到的大多數圖片，包含 Google 圖片服務在內，都已註冊了著作權。為了避免自己可能違反著作權法，你可以透過 Google 的授權篩選功能。只要點擊「**搜尋工具**」再找到「**使用權限**」即可：

![](/zh-TW/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/updated-google-images-licensing.png)

### 字型

選用自己喜歡的字型：

1. 到 Google Fonts 上捲動清單，直找到你喜歡的字型。你也可以使用左邊的控制功能先行篩選。
2. 點擊你想要的字型旁邊「Add to collection」按鈕。
3. 點擊頁面底端的「使用 (Use)」按鈕。
4. 進入下一頁，捲動到區塊 3 與區塊 4，將 Google 顯示的程式碼複製到你的文字編輯器中，儲存以待稍後利用。
* 前頁
* Overview: Getting started with the web
* 次頁