網頁設計前置準備篇

網頁設計不只是寫程式，而是結構、樣式與使用者體驗的整合。這一堂課邊玩邊學：測測自己的起點、裝好工具，並直接在頁面裡改程式、馬上看到結果。

2 hours 第一週 VS Code · FileZilla 含 AI 學習方法 作業進度 0 / 6

01歡迎來到網頁設計的世界

網頁設計是現代設計人必備的基本技能。它比一般平面設計多了「結構」與「互動」，需要多花一點時間練習，但只要跟著步驟走，你一定能做出自己的網站。

看懂網頁怎麼運作

理解網頁如何從伺服器送到瀏覽器，以及目前主流的技術與語言。

掌握學習路線

知道這學期從 HTML、CSS 到 RWD、jQuery 的先後順序與目標。

備齊開發工具

安裝程式碼編輯器、瀏覽器開發者工具與檔案上傳軟體。

做出第一個網頁

自己建立資料夾、寫出 index.html，並在瀏覽器中看見成果。

這學期的學習路線

STEP 1 · 結構

HTML5

用標籤把「內容」整理成有意義的結構：標題、段落、圖片、連結。

STEP 2 · 樣式

CSS3

決定顏色、字體、間距與版面，讓網頁有設計感。

STEP 3 · 適應

RWD 響應式設計

同一份網頁在手機、平板、桌機都能舒服閱讀。

STEP 4 · 互動

jQuery／JavaScript 互動

加入選單展開、輪播、動態效果，最後完成 OnePage 專題並發布。

02網頁設計師需要哪些能力？先測測你的起點

一個完整的網站，是下面六種能力一起合作的結果。拖拉滑桿替自己現在的程度打分數（0～5），右邊的雷達圖會即時變化，並提醒你這學期最值得優先加強的地方。

我現在學期目標
新做法｜AI 已經是工作流程的一部分現在的設計師會用 AI 產生草稿、解釋錯誤、整理文案，也會用 Figma 等工具直接把設計稿轉成可用的程式碼。但看得懂、改得動才是你的價值——所以這門課仍從 HTML 與 CSS 的基本功練起，AI 只當作助教。

03開始前：準備你的工具

需要的工具不多：一個編輯器、一個瀏覽器、一個上傳軟體。先選你的電腦系統，下方的快速鍵會自動換成對應版本。

程式碼編輯器：Visual Studio Code 本課程使用

VS Code 是微軟開發的免費、跨平台程式碼編輯器，支援 Windows、macOS 與 Linux，目前是前端開發最普遍的選擇。它本身輕巧，透過擴充套件就能變成強大的開發環境。

關鍵特色

語法上色、智慧提示（IntelliSense）、內建終端機與 Git 版本控制、豐富的擴充套件與主題。

適合用途

學習 HTML／CSS／JS、前端與全端專案，也能用來寫 Python 等其他語言。

建議安裝的擴充套件（點選可標記「已安裝」）

在 VS Code 左側「擴充功能」圖示搜尋以下名稱，按「安裝」即可：

Emmet 快速鍵（內建）在空白的 .html 檔輸入 ! 再按 Tab，就會自動產生網頁的基本骨架。

瀏覽器與開發者工具

建議安裝 Chrome（或 Edge）作為主要測試瀏覽器，並再準備 Firefox 或 Safari 做交叉檢查。打開任何網頁後叫出開發者工具：可以檢視 HTML、即時修改 CSS，還能模擬手機畫面，是學網頁最好的老師。

必學快速鍵（依你選的系統顯示）

動作快速鍵
開啟開發者工具F12⌥⌘I
切換手機／平板模擬CtrlShiftM⌘⇧M
VS Code：開啟資料夾CtrlK 再 CtrlO⌘O
VS Code：存檔CtrlS⌘S
VS Code：整理程式碼格式ShiftAltF⇧⌥F
Live Server 開啟網頁AltL 再 AltO⌘L 再 ⌘O
強制重新整理（略過快取）CtrlShiftR⌘⇧R

檔案上傳：FileZilla

FileZilla 是開源免費的 FTP 軟體，支援 Windows、macOS、Linux，並支援 SFTP 與 FTP over TLS 等較安全的傳輸方式。本課程的作業需要用它上傳到學校的雲端伺服器，每位同學都須下載並學會使用。

下載請認明官方網站請只從 filezilla-project.org 下載，避免從第三方下載站取得夾帶其他軟體的安裝檔。
中國科大個人伺服器空間設定
網址http://my.cute.edu.tw/
主機名稱（Host）my.cute.edu.tw
使用者名稱學號
密碼單一入口密碼

安裝與連線步驟請看：FileZilla 安裝說明。若連線設定（通訊協定、連接埠）有調整，以課堂公告為準。

其他編輯器與舊工具（了解即可）

工具說明
Notepad++輕巧的 Windows 文字編輯器，適合快速改檔，但只有 Windows 版。傳統工具
Sublime Text跨平台、速度很快的編輯器，需付費授權、擴充生態不如 VS Code 熱門。傳統工具
DreamweaverAdobe 的所見即所得網頁軟體，現在已不是業界主流；入門階段請先理解網頁背後的結構與語法，不要太依賴自動產生的功能。傳統工具
Cursor、Windsurf 等 AI 編輯器以 VS Code 為基礎、整合 AI 對話與自動補全的編輯器，後半學期的 AI 單元會接觸。新趨勢

04即時編輯：在這裡改出你的第一個網頁

不需要安裝任何東西，直接在左邊修改程式碼，右邊馬上更新畫面。完成右上角的 3 個小任務，再回到 VS Code 重做一次。

把標題改成你的名字
換一個標題顏色
加入一個連結或按鈕
一鍵試試
預覽裝置
index.html · 可直接編輯
localhost:5500/index.html

換到 VS Code 實作一次

  1. 建立網站資料夾在桌面或文件資料夾中，新增一個資料夾，名稱用英文、數字（作業資料夾請用學號命名，細節在下一個單元）。
  2. 用 VS Code 開啟資料夾檔案 → 開啟資料夾，選擇剛剛建立的資料夾。
  3. 新增 index.html點「新增檔案」，檔名輸入 index.html，輸入 ! 再按 Tab 產生骨架，或把上方編輯器的程式碼複製過去。
  4. 用 Live Server 開啟在檔案上按右鍵 → Open with Live Server，之後每次存檔畫面都會自動更新。
看懂這份程式碼<h1> 是大標題、<p> 是段落；<style> 裡的是 CSS，決定顏色與排版。<meta name="viewport"> 讓網頁在手機上正確縮放，是響應式網頁（RWD）的起點——試著按右上的「手機」圖示看看。每一行更詳細的意思，會在後面的 HTML／CSS 單元逐步說明。

05學習資源與靈感網站

網頁技術日新月異，請養成「查文件、逛作品、做記錄」的習慣。用下方篩選與搜尋找資源，點星星 ☆ 收藏喜歡的網站——這也是本週作業「收藏 5 個網站」的記錄區。

06和 AI 一起學：把它當助教，不是代筆

ChatGPT、Claude、Gemini、GitHub Copilot 等 AI 工具，已經能解釋程式碼、找出錯誤、提供範例。用得好，學習速度會快很多；用不好，只會得到一份自己看不懂的作業。

適合這樣用

請它解釋一段程式碼、說明錯誤訊息、給你練習題、比較兩種寫法的差異，或幫你檢查哪裡漏了結尾標籤。

避免這樣用

整份作業直接請 AI 產生後貼上交出。看不懂就改不動，期中、期末也無法說明自己的設計。

提問產生器：選情境、貼程式碼，自動組出好問題

你的提問（可直接貼給 AI）

              

            

            
AI 也會出錯AI 可能給出過時或不存在的語法。永遠以瀏覽器實際顯示的結果與 MDN 文件為準，並且不要把個人資料、密碼、學校空間帳密貼給 AI。

          

          
          

            
07課後作業 HomeWork

            
這週的任務：把環境準備好、填問卷，並開始收集你喜歡的網站。


            
作業 0｜網頁設計課前問答

            
在進入網頁設計之前，請先想想：網頁設計與你的關係是什麼？你對這門課有什麼期許？學習網頁設計對你有什麼幫助？現階段你對網頁設計的認識有多少？每位同學都需要作答。

            
 114-2《網頁設計》課程期初問卷


            
環境準備檢核清單

            
0 / 6 完成

            
    
              
    • 
              
    • 
              
    • 
              
    • 
              
    • 
              
    • 
            

            
            
勾選狀態只會記在你目前使用的瀏覽器中，不會上傳。


            
我的收藏清單

            
還沒有收藏。到上方「學習資源」點星星，這裡就會列出來。

            
優秀網站記錄範本

            
每看到喜歡的網站，用下面的格式記錄下來，期中提案時會是很好的參考資料：

            
網站名稱：
網址：
類型：（品牌／活動／作品集／電商…）
我喜歡的地方：（配色？版面？動態效果？）
可以學起來的一個點：