網頁設計｜課程講義

Web design

網頁設計概念篇

Author

JinJin Wang

February 25, 2026

基本概念

基本概念

  • 基本的網頁是由HTML、CSS與JavaScript所組成。
  • HTML負責建構網頁的內容及基本架構。
  • CSS專門負責美化網頁的任務。
  • JavaScript 負責控制網頁動態內容及使用者的操作行為。
  • 本學期以講述靜態網頁HTML與CSS的基本概念為主。

基本常識

基本常識 說明
網站/網頁/首頁
  1. 網站：是許多網頁所形成具有相連性結構的集合。
    2. 當網站架構規劃好後，首先會製作首頁，再分別製作子網頁，並讓網頁間透過超連結彼此相連結，使瀏覽網站的人都能連結到各個不同的網頁來觀看網頁之內容 , 這樣的網頁架構就稱為「網站」。
  2. 網頁：透過瀏覽器看到的畫面，就是一般所謂的「網頁」( Web Page )。
  3. 首頁：進入網站所看到的第一個網頁 , 通常稱之為該網站的「首頁」，也就是常說的「 Home Page 」，檔名一律命名為index.html(會被瀏覽器直接判讀為首頁)。
    4. 首頁的角色十分重要，可視為網站的門面，給瀏覽者一個很重要的印象。它除了呈現網站主要的視覺風格外，其最重要的功能之一是提供整個網站的內容導覽，以及最新消息的公佈，並快速地找到感興趣的主題，瀏覽更詳細的內容 。
中國科技大學首頁
中國科技大學視傳達設計系首頁
網站設計製作流程
  1. 網站規劃與視覺設計階段：
    1. 擬定網站的主題與內容
    2. 資料的蒐集與彙整(UX)
    3. 對象分析與風格(UX)
    4. 設定網站架構的規畫(UX | Figma)
      5. 網站架構圖(sitemap)代表整個網站設計的工作範疇，會清楚的知道整個網站的規模及大約內容。
    5. 網頁平面草圖(WireFrame)、精稿設計（Mockup）、互動稿（Prototype）(UI | Figma)
      6. 圖片來源：Flava - Music Event Web Concept
    6. 製作相關視覺檔案:
      7. 使用UI軟體（Figma、XD...）或影像處理工具(例如: Photoshop, Firework 等)或是繪圖工具(例如: Illustrator, Painter 等)來繪製網頁相關的檔案，如：相關架構圖、精稿、圖檔、背景圖、網站風格的設定(例如:網站標誌、配色等)。檔案輸出皆以網頁解析度72dpi。
  2. 前端製作階段：
    1. 網頁切版
      2. 切版就是：前端設計師要把視覺設計師針對使用者需求所完成的設計稿，透過程式讓它在網頁中實際呈現出來。
      資料來源：什麼是切版？切版練習的方式與工具
    2. 利用網頁軟體(Dreamweaver or notepad++等)完成網頁：
      3. 確認網頁設計內容後，接著就可以開始來進行html、css及動態設計等的前端設計製作。
  3. 後台程式與相關測試：
    4. 前端設計完成後，需交由後台工程師進行程式功能開發。工程師需要依照先前確認好的設計稿、客戶的特殊需求及指定網站功能，開始製作後台功能製作等事項。並進行瀏覽器測試、主機測試等。較龐大複雜的網站完成後，還需進行教育訓練。
  4. 網站上傳與維護：
    5. 製作好的網站，經測試後，即可利用FTP軟體，上傳到網路伺服器中。本課程使用FileZilla上傳。
    完成上傳只是一個開始，網站要能夠長久的經營必須要配合充分的內容以及適時的更新，提供大家最新的資訊才能夠吸引讀者的目光以及瀏覽的興趣。其他如：網站功能新增、定期資料備份，及資安檢測。商業型網站並需持續網站後續網路行銷規劃。唯有還有不斷地改良文案及圖片、注意瀏覽者的動向偏好並進行網站調整、內容修訂，才能優化SEO，提高網站的排名。
網頁命名原則
（含檔案、圖片、資料夾）
  1. 只能取半形的英文、數字、-(中線) 、_(底線)。
  2. 絕對不能出現中文和全行字 。
  3. index為首頁的內定命名(會自動判別為首頁)，依序為index.html、index.php等。
  4. 所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以: hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )。

網站設計製作類型

網頁設計相關網站

比較項目 全客製化 版型 / 模組 開源 CMS 租⽤服務
知名 --- Themeforest
templatemonster…		 Wordpress、Joomla、 Drupal… Wix、Weebly
預算 $$$$$$ $$$ $$$ $（訂閱制）
人力｜時程 6X 3X 3X 1X
版型設計 按需求 以版型為基礎
可改樣式
可改功能		 以版型為基礎
可改樣式
可改功能		 按版型
部分可改樣式
不太可改功能
前端｜動態 按需求
需具基礎能⼒		 須具中級能⼒ 須具中級能⼒
可設定		 按平台開放設定
不需具備設計能力
著作權 建置⽅與客⼾ 賣⽅許可授權 賣⽅許可授權 租⽤授權
後台CMS 後端⼯程師 後端⼯程師 後端⼯程師撰寫/修改 ⼤多不允許修改
主機 簡單可⽤免費空間
CMS 租賃主機 host		 簡單可⽤免費空間
CMS 租賃主機 host		 簡單可⽤免費空間
CMS 租賃主機 host		 ⼀站服務
網址限制
網站主機 ⾃架 Server
Amazon / Google
中華電信 / 戰國策...		 ⾃架 Server
Amazon / Google
中華電信 / 戰國策...		 Bluehost
DreamHost
iteGround…		 ⼀站服務
7大免費架設網站—平台分析比較！

網際網路認識

、 、
專有名詞 說明
網際網路(Internet)
  • 起源於美國國防部一個研究計劃，於 1969 年連結了 4 所大學，建立了一個通訊網路，當時完全基於軍事用途，重點在於通訊協定 (protocal)，也就是今日的 IP (Internet Protocol)，它最大的特色就是讓不同廠牌、型式、作業系統的電腦之間能進行資料交換；到了 1975 年才用於學術及區域網路，後來美國國家科學基金會建立了 NSFNet，採用了標準化的 TCP/IP (Transmission Control Protocol/Internet Protocol)，大大的引起各界的大量投入，因此使的 Internet 日益狀大。
  • Internet 上的每一個節點(主機)都有一個唯一的網路位址(站號)，也就是 IP 位址；它是由 4 個位元組 (32 位元)所組成的，每一個 Byte 可以代表 0 ～ 255 中的任一數目，因此 IP 位址的表示範圍就從 0.0.0.0 到 255.255.255.255，如：139.175.1.10。
  • 臺灣在 1991 年年底成為 Internet 正式一員，相繼由 TANet (臺灣學術網路)、SEEDNet (經濟部科技專案)、HiNet (交通部電訊總局)等成立對外連線單位。
  • 網站是 Internet 的一部份，而 Internet 是將數以千計的電腦集合起來，並且透過數據機（modem）與電話線來傳輸資料；將多媒體資訊，透過電腦傳播(資訊提供者)或查詢(資料接收者)，結合及運用全世界的資源，就可稱為網際網路。
全球資訊網路 (WWW) 全名為 World Wide Web，是 Internet 上的重要應用之一(Gopher、Telent、FTP...)。
網域名稱(Domain Name) 由於數字不好記，所以就用文字或符號來代替數目型 IP 位址，我們稱為網域名稱系統 DNS (Domain Mame System)，它是靠伺服器 (Server) 來轉換的，如：139.175.1.10tpts1.seed.net.tw，第一個為資訊種類 (www、bbs、mail、FTP)，第二個為主機名稱 (seed、nctu、cvtc)，後面為領域名稱團體 (edu、org、com) 及地區 (tw、cn、jp)。 URL (Uniform Resoures Locator) 一致性資源指向器，代表網站位址。 HTTP (HyperText Transfer protocol) 超文字傳輸協定，瀏覽器與遠端網路伺服器溝通時所使用的協定。
如何申請網址 在國內，您可以自行向台灣網路資訊中心 (TWNIC) 申請台灣網域名稱，或是委託專業代辦申請。 在國外，您必須委託專業代理透過美國網路資訊中心 http://www.internic.net/ 申請網域名稱。 今年 5 月國內 (TWNIC) 將推出個人網址 (http://www.any.idv.tw)，相同者以受理單位受理申請之時間在先者，申請資格係具有中華民國國民身份之個人、一人可申請多個網域名稱。註冊費：
  • 國內公司：Domain Name http://www.your_name.com.tw
  • 註冊費新台幣 500 元整；年費新台幣 2,000 元整，每兩年繳付一次。
  • 國內個人：Domain Name http://www.any.idv.tw
  • 冊費新台幣 300 元整；年費新台幣 500 元整，每年繳付一次。
  • 國外公司：Domain Name http://www.your_name.com
  • 註冊費及年費美金70元整，每兩年繳付一次。
  • 資料來源：網頁研究室

    • 網域空間(伺服器)的認識

    網域空間介紹 說明
    遠端網路伺服器 (Server-side) 扮演資訊提供者的電腦，而這些網路伺服器必須連上 Internet 上；資訊提供者必須有多媒體資訊頁，也就是 Homepage，而這就是使用 HTML 超文件標示語言來編寫的。 您可以自己架設網站伺服器 (Web server) 或是選個網路服務提供者 I.S.P (Internet service provider) 來管理網站或網頁存放提供業者 (Presence Provider)。 頻寬(流量)及提供資源 (CGI、Counter etc) 是選擇網路服務提供者，最重要考量之一。
    近端資料接收者 (Client-side) 指一般上網路伺服器來觀看或查詢資料的電腦用戶。且這些電腦用戶必須先連上 Internet 後才可順利找到網路伺服器。
    何謂虛擬主機 虛擬主機 (Virtual Host)也是共享主機 (Shared Hosting)，一般於市面上又稱做網站空間、網頁空間、主機空間、虛擬空間或是網站代管與網頁代管，每台虛擬主機都具有完整的Internet伺服器功能，中主要應用於HTTP、FTP、EMAIL等多項服務，並可由用戶自行管理，所以純就網站使用上來說，使用虛擬主機幾乎和使用獨立的主機一樣。
    免費網域空間推薦
    1. 學校空間：http://my.cute.edu.tw/（畢業前皆可使用）
    2. 000Webhost – 免費虛擬主機推薦，免費空間讓你練習架設 WordPress 網站沒煩惱！
    3. 讓Dropbox、google雲空間變成免費的網站空間
    付費網域空間推薦
    1. 中華電信hicloud
    2. 智邦生活館
    自己架設伺服器 如何從無到有，DIY 架出自己的 .com ?

    常見瀏覽器

    網頁須由瀏覽器呈現，每個瀏覽器所呈現的網頁可能會有不同的樣貌，身為網頁設計師需用有不同的瀏覽器，才能掌握網頁可能發生的不同狀況。NetMarketShare 2020年10月公佈了最新的瀏覽器市佔率數據，排名前三的分別是：Chrome、Internet Explorer 和Firefox 。

    、
    瀏覽器 說明
    Google Chrome

    是一個由Google公司開發的網頁瀏覽器。是目前最多人使用的瀏覽器。該瀏覽器是基於其他開源軟體所撰寫，包括WebKit，目標是提升穩定性、速度和安全性，並創造出簡單且有效率的使用者介面。

    • 優點： 速度快、穩定性高、開發者工具強大、擴充套件豐富
    • 適用族群： 開發者、一般用戶
    • 缺點： 資源消耗高、隱私收集受到批評
    下載Google Chrome
    Apple Safari
    1. 優點： 與 Apple 生態整合、電池壽命與效能優化良好
    2. 特色： 在 Apple 設備上體驗流暢、隱私保護強
    3. 限制： 僅限 Apple 平台、擴充功能較少
    Microsoft Edge
    1. 優點： 基於 Chromium、支援大部分 Chrome 擴充、內建 Office 與 PDF 功能
    2. 特色： 在 Windows 上與系統整合度高
    3. 限制： 使用率低於 Chrome、擴充生態較小
    Firefox
    1. 優點：完全開源任何人都可以對其進行修改。部分功能優化極好，其網頁原始碼分析功能對於專業人士提取網頁素材非常有用。在安全性上具有絕對優勢，火狐自身有阻止彈出性窗口的功能，在插件的配合下擴展性能極為強大。可以實現基本上所有瀏覽器的功能。
    2. 缺點：內存消耗大，啟動慢，IE網頁兼容性較差，更適合配置較高的電腦使用。下載完瀏覽器後還要重新裝Abode flash插件，並且一般方法還裝不了，因為不兼容。
    3. 下載 Firefox
    • 開發者角度：由於 Chrome 市佔率最高，很多開發者優先以 Chrome 做測試，但仍需考量其他瀏覽器差異（如 Safari 的 CSS/JS 特性差異）以確保網站兼容性
    • 使用者選擇考量：
      • 若重視 速度與擴充性 → 多數人選 Chrome
      • 若重視 隱私保護 → Firefox 或 Safari（在 Apple 設備上）
      • 若使用 Windows 系統 → Edge 是系統整合最深的選擇

    RWD介紹

    響應式網頁設計(Responsive Web Design)簡稱RWD，這是一項開始於2011年由Ethan Marcotte 發明的術語 Responsive Web Design (RWD)。2012年後被公認為是日後網頁設計開發技術的趨勢，網站使用CSS3，以百分比的方式以及彈性的畫面設計，在不同解析度下改變網頁頁面的佈局排版，讓不同的設備都可以正常瀏覽同一網站

    畢業專題應用｜RWD｜多頁

    1. 流新語｜入圍金點新秀設計獎｜數位多媒體類｜
    2. 流新語｜第一版
    3. 這不是禮品店｜紅點設計獎｜華麗禮物背後隱藏的現實與真相，性暴力議題
    4. 盲思特｜認識怪獸家長
    5. 品次方｜品格教育

    專案應用｜RWD｜多頁

    1. 中國科大視傳系網頁
    2. 金門瓊林再造歷史現場 產業創新與管理培力計畫
    3. 中國科大規劃與設計學院4E計畫成果

    專案｜RWD｜OnePage

    1. 發現邊境小鎮-文化創意產業扶植計畫
    2. 生猛師父｜大師工作營活動網站

    畢業專題應用｜RWD｜OnePage

    1. 開運良鹽
    2. 薑心彼心