網頁設計｜課程講義

Web design

網頁設計前置準備篇

Author

JinJin Wang

February 25, 2026
Figma

WELCOME

歡迎來到網頁設計的世界，網頁設計是現代設計人須具備的基本技能，他比一般的平面設計更為複雜一點，需要大家投入更多的時間練習，請大家跟著我們的步伐，你也可以成為很棒的網頁設計師，讓自己更擁有更具優勢的能力，來面對未來的職場。為了讓大家更快的進入這門課程，更好的學習網頁設計，請大家在一開始先完成以下任務！

課程摘要

  • 讓學生建立 網頁設計的整體框架與學習方向，理解網頁設計不只是寫程式，而是包含 結構、樣式與使用者體驗 的整合性設計。學生將學會網頁是如何運作的、目前網頁設計的主流技術與語言，以及實際網頁開發前的準備工作。透過此單元，學生能明確掌握後續課程學習的基礎邏輯與技能路線，並為進入 HTML 和 CSS 的實作打下穩固的概念基礎。最終期望學生能自主分析網頁設計需求、理解基本標記語言與樣式語法的作用，以及開始建立第一個簡單可顯示的網頁頁面。

逛逛網頁設計教學網站與記錄優秀網站

網頁設計相關網站

除了上課的學習外，請多多利用圖書館或網路資源，來獲取更多網頁設計新知，從事網頁設計工作，各種技術日新月異，需要隨時充電，獲取不同的技術及最新趨勢。多充實新知，讓自己更加的強大！

瀏覽網站時可隨時觀察或記錄不同瀏覽器閱讀時的差異，多看多觀摩美觀且優良網站的設計，並隨時記錄優良網站的網址，以供後續設計的參考。

網路上的網頁設計教學網站
  1. W3CSchool
    2. W3CSchool是目前內容最豐富，資料最完整的網頁教學平台，裡面所提供的網頁技術也相當的完整，從基礎的HTML、CSS到jQuery、PHP應有盡有，而該平台也有提供中文版語系，是所有學習網頁必備的網站之一。
  2. MDN 的「學習專區（Learning Area）｜ 學習該如何開發 Web｜MDN web docs(HTML、CSS)
    3. MDN裡面都以網頁前端技術為主，同時是由知名瀏覽器Mozilla Firefox公司所成立的，雖然資料相當完整，但中文翻譯的部分，還尚未很完整。
  3. CodePen
    4. 構建、測試和發現前端代碼的最佳場所。
    CodePen 是一個面向前端設計人員和開發人員的社交開發環境。構建和部署網站，展示您的工作，構建測試用例以學習和調試，並尋找靈感。
  4. jQuery
    5. jQuery是目前相當主流的Javascript Framework，在官網的文件中，就會針對每個可用的屬性，有盡細的解說，甚至也有提供教學範例可參考，透過jQeury可讓網頁變得更炫、更活潑。
  5. Bootstrap(RWD CSS)
    6. Bootstrap是目前相當受歡迎的RWD元件之一，透過Bootstrap可以快速的設計出RWD網頁，同時內建了許多網頁互動特效可使用，像是滾動頁籤、廣告輪播、漢堡選單….，在網站中，也有各元件的範例以及網格系統的應用。
  6. 網頁程式設計入門，一文讀懂 HTML、CSS
  7. 網站架設 ：17 個教學設計（網頁製作＋建置費用）
  8. 網站開發流程
  9. 如何架設網站呢?做網站必學8大主題教學
網頁設計賞析
  1. awwwards
    2. 網頁設計得獎作品的線上展示平台，這個平台裡每個得獎作品網站都有四個評分項目，分為整體設計、易用性、創意度、內容，是由眾多設計師進行評選。
  2. WebDesignClip
    3. WebDesignClip是日系風格網站的精選網站，日本網站數量較多，如果網站的風格主體想找些偏日系清亮的風格的或者沈穩低調來參考，這裡會是一個好選擇。
  3. WebDesignClip
    4. WebDesignClip是日系風格網站的精選網站，日本網站數量較多，如果網站的風格主體想找些偏日系清亮的風格的或者沈穩低調來參考，這裡會是一個好選擇。
  4. WebDesigneer
    5. WDR網頁設計庫 - 這裡收集超過上百個網頁設計範例作品、網站版型、參考案例
  5. 網頁設計資源彙整

安裝軟體

網頁設計編輯與上傳軟體

除了上課的學習外，也要多逛逛不同的教學網站，多充實新知，讓自己更加的強大！
  1. FileZilla
    2. 免費好用的FTP軟體 下載網址： https://filezilla-project.org/

    FileZilla是一套開放原始碼的免費FTP檔案傳輸軟體，內建44種語言的多國語系介面，且還提供Windows、Linux、Mac OS X等多種作業系統平台的版本。除了支援一般FTP檔案傳輸之外，還可支援SFTP與「FTP over SSL/TLS」…等傳輸模式，是個相當穩定而好用的免費軟體。

    本課程的作業，將藉由FileZilla上傳至雲端伺服器，請每位同學都須下載並學會使用！

    詳見FileZilla安裝說明
    學校FTP空間
    • 中國科大個人伺服器空間: http://my.cute.edu.tw/
    • 主機名稱: my.cute.edu.tw
    • 使用者: 學號
    • 密碼: 單一入口密碼
  2. Visual Studio Code（簡稱 VS Code）
    3. 下載網址： http://notepad-plus-plus.org/

    Visual Studio Code 是由 Microsoft 微軟 開發的一款 免費、跨平台的輕量級程式碼編輯器，支援 Windows、macOS 和 Linux 等作業系統，可用於編寫各種程式語言的原始碼。它本身不是完整的 IDE（整合開發環境），但透過 豐富的擴充套件（Extensions） 能提供強大的功能，如語法高亮、智慧補全（IntelliSense）、除錯、Git 版本控制與終端機整合等，適合前端、後端與多類型開發者使用。透過客製化設定與擴充，VS Code 可變成功能豐富且高效的工作平台。

    關鍵特色
    • 支援多種語言（HTML、CSS、JavaScript、Python、C++ 等）。
    • 智慧型語法提示與自動完成（IntelliSense） 提升編碼效率。
    • 內建 Git 版本控制與終端機（Terminal） 功能。
    • 可安裝各式插件提升功能，如語言支援、主題、工具與工具整合。
    適合用途
    • 初學者學習 HTML/CSS/JS 編碼。
    • 網頁前端與全端開發專案。
    • 自訂化開發環境與多語言專案管理。
  3. Notepad++
    4. 下載網址： http://notepad-plus-plus.org/

    實用的免費文字編輯軟體 - Notepad++，是旅法台灣人作品，體積輕巧不佔系統記憶體，支援多分頁功能，是一套用來取代Windows記事本的工具，他的操作方式與記事本完全相同。

    具有好用的中文搜尋取代、開啟檔案群組、在目錄中的指定副檔名搜尋特定字串、程式語言高亮度顯示等功能，支援ANSI、UTF-8（支援檔首無BOM）、UCS-2...等格式的編譯及轉換，是必備的原始碼編輯軟體。可以替許多的程式語言的語法上色，而且還有半透明視窗的效果，是撰寫程式的好幫手。

    缺點：只有PC版。

  4. Sublime Text
    5. 下載網址： https://www.sublimetext.com/3

    Sublime Text是一套跨平台的文字編輯器，支援基於Python的外掛程式。Sublime Text是專有軟體，可透過套件擴充功能。大多數的套件使用自由軟體授權釋出，並由社群建置維護。

    優點：有PC和MAC版。 缺點：只有英文版。

  5. Dreamweaver
    6. Dreamweaver官網與試用下載

    視覺設計師常用的網頁設計軟體，不過不宜太依賴內建的功能，先了解網頁背後的結構與語法才是王道。

    Adobe Dreamweaver是Adobe公司的網站開發軟體。它使用所見即所得的介面，亦有HTML編輯的功能。它現在有Mac和Windows系統的版本。原本由Macromedia公司所開發。

HomeWork｜課後作業

【作業0 】網頁設計課前問答

網頁設計課前問答

在進入網頁設計之前，請大家先仔細想想網頁設計與自己的關係，你對這門課的期許，你覺得學習網頁設計對你有什麼幫助？現階段你對於網頁設計的認識有多少？

是否準備好要進入網頁設計的學習行列了？每位同學皆須作答喔！
114-2《網頁設計》課程期初問卷