# 網頁設計與製作入門教學：從零開始學做網站

你曾經想過自己動手做一個網站嗎？也許是為了創業、展示作品，或是單純想學一項新技能。無論動機是什麼，網頁設計並沒有想像中那麼難——只要你願意從基礎開始，一步步學習。

十年前，我也是一個完全不懂程式碼的新手，看著別人設計的漂亮網站，總覺得那需要某種「魔法」才能做到。但事實是，網頁設計就像學騎腳踏車一樣，一開始可能會搖搖晃晃，但只要掌握核心技巧，很快就能輕鬆上路。

這篇文章不會用一堆專業術語轟炸你，而是用最簡單的方式，帶你從零開始理解網頁設計的基礎知識、工具選擇，以及實際操作的步驟。

## 為什麼要學網頁設計？

在開始之前，先聊聊「為什麼」這件事。學網頁設計的好處比你想像的還多：

1. **實用性高**：無論你是自由工作者、小型企業主，或是想轉職進入科技業，會做網站都是一項強力技能。
2. **成本低**：比起其他專業技能，網頁設計的入門門檻相對低，甚至可以用免費工具開始。
3. **創意表達**：網站是你的數位畫布，能自由展現個人風格或品牌形象。
4. **未來趨勢**：數位化只會越來越普及，早點學會絕對不吃虧。

## 網頁設計的三大核心技術

所有網站都是由三種基礎技術構成的：

### 1. HTML：網站的骨架
HTML（HyperText Markup Language）是網頁的結構基礎。想像你在蓋房子，HTML就是鋼筋骨架，負責定義哪裡是標題、段落、按鈕或圖片。

“`html

歡迎來到我的網站！

這是一個段落。

“`

### 2. CSS：網站的造型師
如果HTML是骨架，CSS（Cascading Style Sheets）就是衣服和妝容。它控制字體、顏色、排版和動畫效果，讓網站從「能用」變成「好看」。

“`css
body {
font-family: Arial;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
“`

### 3. JavaScript：網頁的大腦
JavaScript 讓網站「動起來」。像是彈出視窗、表單驗證、動態載入內容，都是它的功勞。初學者可以先掌握基礎，再慢慢深入。

“`javascript
document.querySelector(‘h1’).addEventListener(‘click’, function() {
alert(‘你點擊了標題！’);
});
“`

## 工具選擇：如何開始寫程式？

你只需要兩樣東西：

1. **文字編輯器**：
– 推薦免費工具：VS Code（功能強大且支援擴充套件）、Sublime Text（輕量快速）。
– 完全新手？可以先從線上編輯器如 CodePen 或 JSFiddle 開始，不用安裝任何軟體。

2. **瀏覽器**：
– Chrome 或 Firefox 的「開發者工具」（按 F12 開啟）是除錯神器，可以即時預覽程式碼效果。

## 實戰步驟：從零打造第一個網頁

### 步驟1：建立HTML檔案
1. 打開文字編輯器，新增一個檔案並命名為 `index.html`。
2. 貼上以下基礎結構：

“`html

你好，世界！

我正在學習網頁設計。

“`

### 步驟2：加入CSS樣式
1. 新增一個 `style.css` 檔案，並寫入：

“`css
body {
font-family: ‘Arial’, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f9f9f9;
}
h1 {
color: #2c3e50;
}
“`

### 步驟3：加入簡單的JavaScript
1. 新增 `script.js` 檔案，試試互動效果：

“`javascript
const heading = document.querySelector(‘h1’);
heading.addEventListener(‘mouseover’, function() {
this.style.color = ‘red’;
});
heading.addEventListener(‘mouseout’, function() {
this.style.color = ‘#2c3e50’;
});
“`

### 步驟4：預覽你的網站
直接雙擊 `index.html` 檔案，瀏覽器就會打開你的網頁！試試把滑鼠移到標題上，顏色應該會變化。

## 常見問題與解決方法

### Q1：一定要學程式嗎？能用拖曳工具嗎？
當然可以！像 WordPress、Wix 或 Webflow 這類工具能讓你用拖曳方式設計網站，但如果你想完全掌控設計細節或往專業發展，學會程式碼仍是必要的。

### Q2：如何讓網站在手機上看起來好看？
這就要學「響應式設計」（Responsive Design），在CSS中加入以下程式碼：

“`css
@media (max-width: 600px) {
body {
padding: 10px;
}
h1 {
font-size: 24px;
}
}
“`

### Q3：哪裡可以免費學更多？
– **MDN Web Docs**：最權威的免費資源，由 Mozilla 維護。
– **freeCodeCamp**：互動式學習平台，從基礎到進階都有。
– **YouTube頻道**：Traversy Media、The Net Ninja 的教學淺顯易懂。

## 進階建議：學完基礎後該做什麼？

1. **複製你喜歡的網站**：試著重現一個簡單的登入頁面或產品介紹頁，這是進步最快的方式。
2. **學框架**：如 Bootstrap（快速排版）、React 或 Vue.js（動態網站）。
3. **部署你的網站**：用 GitHub Pages 或 Netlify 免費上線你的作品。

## 結語

網頁設計最迷人的地方在於——你寫的每一行程式碼，都能立刻看到成果。即使一開始的網站陽春到只有文字和按鈕，那也是屬於你的數位空間。

我至今還記得自己第一個網頁上線時的興奮感，那是一個用螢光綠背景配上閃爍文字的「災難作品」，但正是從那裡開始，我慢慢學會如何做出專業的網站。

現在輪到你了！打開編輯器，寫下你的第一行 `

Hello World!

`，這會是你成為網頁設計師的第一步。