Turn what you know into an opportunity and reach millions around the world.

Your cart is empty.

一變應萬變的響應式網頁設計

還不會目前業界最為流行的響應式網頁設計嗎？讓六角學院線上手把手教會你/妳！

Highest Rated

Created by廖洧杰 liao, 卡斯伯六角學院, 六角學院, Evangelin Lin

Last updated 5/2025

Chinese (Traditional)

Chinese (Traditional)

What you'll learn

掌握響應式網頁設計細節
了解如何跨部門協作響應式網頁設計
懂得如何以 UI / UX 角度設計好的響應式網頁設計

Course content

15 sections • 109 lectures • 9h 41m total length

六角學院線上社團0:09

什麼是響應式網頁設計？(上)4:35
什麼是響應式網頁設計？(下)4:07
基本環境建立 (上)3:50
基本環境建立 (下)5:51
基本環境建立 (下) -課程補充0:24
CSS 3 Media Query 觀念 (上)7:02
CSS 3 Media Query 觀念 (下)4:48
min-width 語法教學2:51
你知道瀏覽器內建就有模擬 Mobile 介面工具了嗎？6:20
你知道瀏覽器內建就有模擬 Mobile 介面工具了嗎？-課程補充0:06
教你如何用手機瀏覽網頁開發介面5:03
第一章測驗
六角學院線上問答會0:31

Flex RWD 排版方式0:19
禁止顯示 x 軸法則2:16
max-width：一個小設定輕易將網頁設定成流體式佈局5:52
max-width：一個小設定輕易將網頁設定成流體式佈局-課程補充0:13
版型單位 % 數觀念7:16
三欄流體式設計7:50
左側 Float固定、右側流體式設計6:27
Float：none 清除浮動並排效果5:59
網站版型框架設定8:07
禁止顯示 × 軸法則2:45
max-width：一個小設定輕易將網頁設定成手機版佈局5:19
版型單位 % 數觀念5:39
三欄流體式設計7:02
左側固定、右側流體式設計3:00
網站版型框架設定5:01
第二章作業4:37
此作業我們會關注的檢核點：
語意標籤(div、h2) 與整體結構是否有優化空間
是否在 992、768、375、320px 有 x 軸
Flex 或 Float 在各斷點變化上是否合理
選單連結的點擊範圍是否適合
善用 max-width 與 % 來設計佈局

動線設計：並非所有內容都要全部塞到網頁內容4:19
斷點時機：設計多欄式佈局的必要觀念4:11
斷點時機：設計多欄式佈局的必要觀念-課程補充0:13
點擊範圍：設計讓人好點選的元素3:39
少即是多：避免資訊量爆炸2:56
載具特性：使用者行為 touch、hover 傻傻分不清楚3:20
斷點元素：只有手機才會顯示的功能與Layout切換5:06
斷點元素：只有手機才會顯示的功能與Layout切換-課程補充0:17
軟體輔助：偵測響應式網站斷點工具5:53
第三章作業10:44

先要有個認知，響應式無法讓所有螢幕解析度都最佳化3:34
遵循 80/20 法則，先兼容熱門瀏覽器吧！6:48
什麼是 Mobile First 與 Desktop First 優先？5:29
為何要考量 Mobile First 與 Desktop 優先的網頁版型？5:34
常見 PC 解析度斷點設計10:56
Viewport Sizes 服務網站介紹2:41
Viewport Sizes 服務網站介紹-課程補充0:14
六角講師斷點設計分享1:10

基礎篇：響應式圖片設計5:28
基礎篇：響應式圖片 reset 教學3:27
心法篇：圖片 SIZE 規劃，刻意設計較大張一點的技巧8:40
心法篇：判斷圖片使用時機3:38
SVG 篇：向量圖片介紹5:20
SVG 篇：繪圖軟體匯出 svg 與 png 圖片流程3:55
SVG 篇：將 LOGO 取代為 SVG 格式3:27
SVG 篇：將 LOGO 取代為 SVG 格式-課程補充0:25
技巧篇：Banner 設計 - 縮放圖片原理7:41
技巧篇：Banner 設計 - 背景擷取4:05
工具篇：Font Awseome 設計 ICON6:05
工具篇： tinypng 壓縮圖片服務3:51

Requirements

不適合沒學過 HTML、CSS 的初學者
需要安裝 Chrome 網頁瀏覽器
需要安裝 Sublime Text 3網頁編輯器

Description

本課程將會講解如何從無到有設計響應式網頁設計，除了基礎教學外，我們也提供許多實務上與其他部門合作時的心法通通傳授給你，
不論你是網頁設計師、前端工程師都相當適合從中了解真正實務上設計響應式網頁時所需要注意的細節！
六角學院除了提供線上影音課程外也提供：

無限期、無限次數地觀看線上教學影片
隨時可提問的 udemy 發問社群
每週三晚上七點半的線上問答
提供三次程式碼檢視，以確保各位學生觀念正確

Who this course is for:

已經會 HTML、CSS 的網頁初學者
想要了解更多網頁排版細節的潛在網頁工程師、網頁師