自動播放
自動完成
上一堂課程
完成並繼續課程
670051
一變應萬變的響應式網頁設計
六角學院線上資源
六角學院線上社團
Apple M1 觀看公告
基本環境介紹
什麼是響應式網頁設計？(上) (4:35)
什麼是響應式網頁設計？(下) (4:07)
基本環境建立 (上) (3:50)
基本環境建立 (下) (5:51)
基本環境建立 (下) -課程補充
CSS 3 Media Query 觀念 (上) (7:02)
CSS 3 Media Query 觀念 (下) (4:48)
min-width 語法教學 (2:51)
你知道瀏覽器內建就有模擬 Mobile 介面工具了嗎？ (6:20)
你知道瀏覽器內建就有模擬 Mobile 介面工具了嗎？-課程補充
第一章測驗
課程最終任務說明
六角學院線上問答會
常見版型佈局設定
Flex RWD 排版方式
禁止顯示 x 軸法則 (2:16)
max-width：一個小設定輕易將網頁設定成流體式佈局 (5:52)
max-width：一個小設定輕易將網頁設定成流體式佈局-課程補充
版型單位 % 數觀念 (7:16)
三欄流體式設計 (7:50)
左側 Float 固定、右側流體式設計 (6:27)
Float：none 清除浮動並排效果 (5:59)
網站版型框架設定 (8:07)
第二章作業 (4:37)
以 UI 設計角度切入響應式設計該注意的細節
動線設計：並非所有內容都要全部塞到網頁內容 (4:19)
斷點時機：設計多欄式佈局的必要觀念 (4:11)
斷點時機：設計多欄式佈局的必要觀念-課程補充
點擊範圍：設計讓人好點選的元素 (3:39)
少即是多：避免資訊量爆炸 (2:56)
載具特性：使用者行為 touch、hover 傻傻分不清楚 (3:20)
斷點元素：只有手機才會顯示的功能與Layout切換 (5:06)
斷點元素：只有手機才會顯示的功能與Layout切換-課程補充
斷點規劃
先要有個認知，響應式無法讓所有螢幕解析度都最佳化 (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 服務網站介紹-課程補充
六角講師斷點設計分享
響應式表格與表單設計
響應式表格設計 (上) (7:27)
響應式表格設計 (下) (4:08)
pure.css：加強你對網頁元素的了解 (4:30)
pure.css：按鈕設計原理 (8:12)
pure.css：自行新增子模組 (8:34)
pure.css：重新認識表單狀態 (11:24)
pure.css：如何將表單整合至網頁 (12:55)
表單設計：文字欄位並非只有「text」 (4:10)
表單設計：文字欄位並非只有「text」-課程補充
響應式圖形設計
基礎篇：響應式圖片設計 (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 格式-課程補充
技巧篇：Banner 設計 - 縮放圖片原理 (7:41)
技巧篇：Banner 設計 - 背景擷取 (4:05)
工具篇： tinypng 壓縮圖片服務 (3:51)
常見響應式設計選單
響應式選單常見樣式 (7:46)
多欄多列式設計細節 (9:03)
漢堡選單設計 (9:40)
固定式選單 (Fixed) (4:11)
Off Canvas 選單設計 (7:41)
選單設計總結 (4:24)
開始實作前的注意事項
確認你的 media query 設定 (5:21)
media 到底要全部寫在一起還是隔離 (6:24)
請不要習慣寫死高度 (2:39)
最後，讓你的響應式網頁設計更專業
最終作業寄送變更
最後一版作業練習 (8:16)
最後一版作業細節 (多頁設計) (4:28)
最後一版作業評分標準 (8:25)
PM、Sales、Art、F2E、Backend 之間如何真心合作
業務篇：如何說服客戶導入響應式設計 (7:34)
業務篇：各部門投入人力時程比較 (7:15)
企劃篇：為客戶量身打造客製化斷點設計 (9:12)
企劃篇：開發過程中，你需要與客戶溝通的建置與維護細節 (10:10)
前端篇：設計一套讓客戶能夠自行上稿的 template (4:24)
前端篇：注意網頁載入速度與效能問題 (7:13)
全部門：以電子商務網頁版型為例進行探討 (7:44)
彩蛋課程：Sass、RWD 無痛整合，提升網頁開發效率
Sass+Sublime Text 3 插件安裝
環境篇 - 簡單編譯環境，輕鬆好上手 (6:25)
寫法篇 - 減少重工負擔 (12:55)
變數篇 - 整合相同設定好幫手 (8:50)
拆檔篇 - @import: 每隻 Sass 檔專心做一件事情 (7:53)
工具篇 - @mixin: 將常用語法化簡為自己的知識庫 (7:09)
結構篇 - 如何循序漸進優化網頁架構 (4:21)
載具篇 - @mixin+@content 設計響應式設計超方便 (8:28)
作業篇 - 試著將作業改成 SASS 架構 (4:47)
彩蛋課程：視差滾動網頁設計
視差滾動簡介 (3:17)
視差滾動練習範例
視差滾動基本環境介紹 (6:28)
CSS 固定背景的手法 (4:06)
一頁式宣傳頁常用的選單滑動效果 (17:32)
動態顯示的進度條 (12:49)
滾動套用 CSS 效果 (9:24)
滾動中持續改變物件位置 (CSS transform) (5:55)
響應式工具與服務介紹
PageSpeed：使用 Google 線上服務觀察 Mobile 速度與使用體驗 (5:37)
技巧篇：Banner 設計 - 背景擷取
/courses/670051/lectures/11953590/hotmart_lecture_video_download_link/24219773
670051
範例 codepen
完成並繼續課程