--- # System prepended metadata title: 網頁設計入門課 --- # 網頁設計入門指南 ## 今日目標 這堂課將手把手帶你認識 **網頁設計基本 3 要素**： - HTML - CSS - JavaScript (JS) 親手做出一個**互動式個人介紹頁面**，包含： - 你的名字、照片與技能標籤 - 漂亮的 CSS 樣式 - 可以切換深色模式的按鈕 - 點擊技能標籤會有動態效果 最後將網頁發佈到網路上，就可以將你的網頁分享給其他人啦～ --- ## 第一部分：暖身 - ### 網站的構成三要素 想像你在蓋一棟房子： ``` 🏗️ HTML → 骨架（牆壁、門、窗戶在哪裡） 🎨 CSS → 裝潢（顏色、大小、字型、間距） ⚙️ JS → 電器（讓東西會動、會互動） ``` 三者分工合作，少了任何一個，網頁就不完整。 - ### 開發人員工具（DevTools） 內建於瀏覽器中的網頁開發測試與除錯工具，以下是開啟方式： **Windows/Linux：** - `F12` 或 `Ctrl` + `Shift` + `I` - 點右鍵 -> 「檢查 (Inspect)」 **macOS：** - `Cmd` + `Option` + `I` - 點右鍵 -> 「檢閱元件」 >注意：若使用 Safari 須先進行額外設定 >1. 選單列點選 Safari → 設定 >1. 切換到 「進階」 頁籤 >1. 勾選底部的 「顯示網頁開發者功能」 --- ## 第二部分：HTML — 蓋骨架 - ### HTML 的邏輯：元素（element） ```html <標籤名稱>內容 ``` - 用「標籤」來描述內容的用途，形成一個**元素** - 標籤通常有**開頭**和**結尾**，把內容夾在中間 - 內容可以包含**多個元素**。 --- - ### 實作一：建立完整 HTML 結構 打開 VS Code 創建 `index.html` 檔案，並將以下程式碼貼上： ```html= My Personal Website

My Personal Website

我的照片

你的名字

熱愛設計的工程師

Skill Tags

聯絡我
``` 在檔案總管點開 `index.html` 檔案，進入瀏覽器後就能看到文字和圖片出現了！ :::info *若想要在修改程式碼的過程中，即時更新網頁狀態，可以在 VS Code 的延伸模組中安裝 `Live Server`。* ::: --- - ### DOM (Document Object Model) 瀏覽器把 HTML 解析後，轉換成一棵「可操作的樹狀結構」，CSS 和 Javascript 便能透過它尋找指定的元素並修改。 - #### HTML 結構： - #### DOM 示意圖： - ### 標籤速查表 - #### 結構標籤： | 標籤 | 用途 | |------|------| | `html` | 整個網頁的**根元素** | | `head` | 網頁設定與資訊 | | `body` | 使用者看到的內容 | - #### 設定常用標籤： | 標籤 | 用途 | 範例 | |------|------|------| | `title` | 網頁標題名稱 | `標題` | | `link` | 連接外部資源 (如 CSS) | `` | | `script` | 載入並執行 JavaScript | `` | | `meta` | 其他設定 | `` | - #### 內文常用標籤 | 標籤 | 用途 | 範例 | |------|------|------| | `

` ~ `

` | 標題（數字越大越小） | `

大標題

` | | `

` | 段落文字 | `

這是一段文字

` | | `` | 圖片 | `描述` | | `` | 連結 | `點我` | | `` | | `