🚨週年慶最後三日🚨全站課程 83 折、最後加碼 $899💰 再送激高 $1600 券❗️
天
時
分
全站 83 折🔥
登入/註冊
職人必修的 RWD 網頁入門班
0 seconds of 1 minute, 20 secondsVolume 0%
Press shift question mark to access a list of keyboard shortcuts
鍵盤快捷鍵
播放/暫停空白鍵
音量增加↑
音量減少↓
快進 5 秒→
倒退 5 秒←
開啟/關閉字幕c
全螢幕/離開全螢幕f
靜音/取消靜音m
Decrease Caption Size-
Increase Caption Size+ or =
跳轉至%0-9
00:00
00:00
01:20
 
Mike

職人必修的 RWD 網頁入門班

網頁製作必學的 RWD 響應式網頁設計,課堂中將從架構規劃設計開始,帶你理解網頁語法與瀏覽器相容性,接著會教你網頁選單的設計製作,深入潛出地教你 RWD 網頁的開發技巧。
Hahow AI 學習升級
517 人已購買
5.0
(40)

關於課程

課程包含

包含 1 章 66 單元、1 項作業

課程時長

11 時 42 分鐘

課程總人數

517 位同學

觀看限制

不限觀看次數,還會附贈完課證書

學習升級

Hahow AI 學習助教
無需額外付費
即時問答、重點整理、測驗理解,讓知識派上用場

最新消息

課程內容

你的網站跟得上時代潮流嗎?想要學網頁,RWD 是不可或缺的能力!

在這個每個人手一機的時代裡面,網頁成為了傳播資訊資訊媒體的重要媒介,早期的網頁透過 flash 或是一般 html 的方式讓人在電腦上面觀看,但是順應時代的潮流跟技術的進步,網頁這項技術跳脫以往,擺脫在手機上沉重且觀看體驗不佳的 flash,投入 html5 的懷抱之中,發展出自適應網頁 Responsive Web Design,自適應網頁又稱響應式網頁,不管是在設計面或是程式面的觀念都有重大突破,讓人們更能在手機上面觀看網頁有更好的體驗。

用業界實戰經驗教你從零打造 RWD 網頁!
向網頁破版說 bye bye

這堂課是將我做案子的經驗與實作的技巧整合所編成的精華,主要會教你如何從零開始的一步一步建構 Responsive Web Design 網站,從零開始打好基礎建立觀念,帶入實作,用業界常常遇到的問題當舉例,教你如何解決很多因為行動裝置而產生破版,還有如何利用百分比的切版技巧來減少修改的時間。

課程大綱說明

「RWD 入門的基礎觀念」以白色文字呈現在青綠色橫幅上,右側有桌上型螢幕與平板裝置的扁平插圖,呈現網頁設計主題。


剛踏入 RWD 的世界之中你需要注意的東西很多,例如以前沒碰過的 Viewport 設定、media query 斷點,圖片的切版技巧,在課程的前面將會先教你所具備的知識,讓你可以更快的銜接後面的課程。

標題「你不能不知道的 HTML5語意化標籤」,搭配桌上型電腦與手機的網站介面插圖,呈現 HTML5 語意化標籤主題。


HTML5 問世之後推行的許多的新的標籤,每個標籤開始有了自己的定位,不要再全部使用 div 或是 table 了,選用對的 html5 標籤除了在閱讀 html 原始碼更加順暢外,也有助於 google 搜尋引擎排名順序,SEO 效果的提升。

「語法與瀏覽器的相容性」標題,搭配桌上型電腦螢幕與手機的瀏覽器介面圖示,呈現網頁語法在不同裝置上的相容性主題。


你或許會發現在切 RWD 版面的時候很常在不同的瀏覽器看到跑版,常常不知道為什麼,這是因為每個語法對於瀏覽器的支援度有所不同,我將在這邊教你怎麼解決這些問題,教你怎麼避免,讓跑版跟你說再見。

「RWD 選單設計效果」標題,搭配桌上型電腦與手機介面的響應式網頁設計插圖,呈現不同裝置上的選單配置與版面適應。


讓使用者可以知道選單的微互動也是可以大大提升使用者對網站的感覺,擺脫只有淡入淡出效果,從架構規劃著手,能讓你做出豐富且多變的選單。

青綠色橫幅以白色文字標示「實際專案會遇到的突發狀況」,右側搭配兩個電腦螢幕的線條插畫,作為專案情境段落的視覺標題。


在電腦瀏覽器看到的不一定在行動裝置看到就會正常,會因為行動裝置的系統不同,瀏覽器不同,而造成許多排版的問題,不再是紙上談兵,實際的上機測試,讓你可以製作任何版面都無往不利。


標題「< RWD 案例實戰 >」置於青綠色橫幅左側,右側以桌機與平板螢幕圖示呈現響應式網頁設計概念。


在課堂上我將會準備業界常常看到 RWD 設計,實際的從頭到尾製作一次,呼應前面的課程內容,讓同學可以融會貫通。

為什麼要來上這堂課 ?

  1. 想讓自己的專業技能更上一層樓
  2. 業界實際遇到的問題一次幫你解惑
  3. 豐富且多樣化的內容
  4. 清楚且不拖泥帶水的教學方式,讓你由淺入深,融會貫通

我自己本身是從設計師轉職過來的,設計師會遇到哪些問題,我有實際的經驗和解決方案,我將竭盡我所能的幫大家把基礎打好,讓你 / 妳們跟上述問題說再見!

Bootstrap 是否就是 RWD ?

從我開始寫網頁以來就不斷有人把 Bootstrap 跟 RWD 劃上等號,我想網路上也不斷的有人在探討這個問題,這個問題的答案我個人是覺得不一定,Bootstrap 是一個可以快速幫你建構 RWD 架構的 CSS 工具,他可以快速幫你建構 RWD 網站,但是並不能 RWD 完全劃上等號,所以這堂課設計的概念就是打好基礎,所以「不會提到 Bootstrap 的使用」,我們將從零開始客製出 RWD 網站。

關於我

Hi~我是成智遠(Mike),對互動技術與網頁前端抱持者極大興趣的開發者,我熱愛分享自己所學所看到的東西,喜歡幫助那些認真而且有需要的人。沒有人是天生下來就是天才的,都是要靠後天的努力跟不斷的練習來強化自己,快來跟我一起推倒技術的高牆!

‧ 任職於 飛肯設計學院 講師
‧ 曾任職於 痞客邦PIXNET 資深前端工程師
‧ 曾任職於 致理科技大學數位媒體設計系  RWD網頁設計業師
‧ 曾任職於 AmazingTalker  線上教育平台 資深前端工程師
‧ 曾任職於 米蘭營銷策劃股份有限公司 前端工程師
‧ 曾經製作過的專案加起來超過 60 款互動、網頁、遊戲
‧ 曾擔任跨國知名企業公司專業技能內訓講師
‧ 受邀至各大專院校演講

講師在投影簡報中比較「USER EXPERIENCE」與「USER INTERFACE」,以 Heinz Tomato Ketchup 玻璃瓶與擠壓瓶為例,區分產品設計與使用體驗。

未來願景

上完這堂課我相信你現在對 RWD 不陌生,都可以製作出任何你想要的版型,不過學習的道路是永無止境的,接下來我會在繼續規劃新的跟前端相關的主題課程,從 RWD 到 JS 入門到框架應用,帶領各位同學向前邁進。

課後規劃

學生上完課後可以加入這次的教學社團,在內分享問題或是尋求老師解答,老師也會時常分享業界資訊給各位同學知道,讓同學們可以加速學習,不定期老師也會為同學們解答各種問題,例如求職方向或是如何進一步自學等!

社團傳送門在此 
(請同學加入後要填寫問題喔~你的 hahow 帳號名稱是什麼?)

哪些人適合這堂課?
1. 對於開發 RWD 自適應網頁或是前端設計師有工作需求者 2. 平面設計師想要跨足前端設計師領域者 3. 想知道如何從一般網頁跨足 RWD 網頁 4. 不想使用 Bootstrap 製作 RWD 網頁 5. 對 RWD 有高度熱誠的同學
你可以學到
1. 完整的 RWD 網頁 2. 動態選單設計 3. 多項製作細節與行動裝置 bug 解決方案
上課前的準備
需要準備的工具 / 軟體(若購買課程前不清楚版本是否支援,請先留言與老師確認。)
1. 不管是 Window 或是 Mac 電腦皆可 2. 需使用自己的 IOS 或 Android 手機測試
需要具備的背景知識
1. 希望你對 html & css 有基本的了解(如 div 的寬高設定跟背景圖片設置,文字設定等等即可) 2. 希望你對 Adobe Photoshop 或是其他影像編輯軟體有基本的了解(如尺規工具的使用及檔案存取的知識即可),不會也沒有關係,課堂中會有足夠的練習讓同學們學會~
單元一覽
1 章 66 單元|總時長 702 分鐘
全部收合
1
本課程不分章節
影片單元
單元 1 - 業界都激推的開發工具 Sublime Text 3 - 安裝軟體&套件
12:59
影片單元
單元 2 - 業界都激推的開發工具 Sublime Text 3 - 套件介紹
10:28
影片單元
單元 3 - ip連線設定
影片單元
單元 4 - 先來複習一下基本的 HTML & CSS
32:39
影片單元
單元 5 - 超棒的 box-sizing
08:38
影片單元
單元 6 - 你不能不知道的Viewport
09:27
影片單元
單元 7 - Viewport 在 iOS 旋轉手機畫面時鎖定文字不縮放
02:44
影片單元
單元 8 - 除了Table跟Div以外HTML5新標籤的選擇
25:07
影片單元
單元 9 - 超強的box-sizing屬性讓你排版不用頭很痛
04:33
影片單元
單元 10 - Mobile版型製作
36:41
影片單元
單元 11 - HTML5新標籤詳解
影片單元
單元 12 - Media Queries介紹與使用(1)
25:46
影片單元
單元 13 - Media Queries介紹與使用 (2)
07:47
影片單元
單元 14 - RWD案例實戰(1)
31:57
影片單元
單元 15 - RWD案例實戰(2)
11:15
影片單元
單元 16 - RWD案例實戰(3)
20:06
影片單元
單元 17 - RWD案例實戰(4)
32:43
影片單元
單元 18 - RWD案例實戰(5)
16:43
影片單元
單元 19 - RWD案例實戰(6)
19:20
影片單元
單元 20 - 手機直橫判斷
03:49
影片單元
單元 21 - Can i use & CSS3 Prefix
05:35
影片單元
單元 22 - ie語法相容性與支援度
02:46
影片單元
單元 23 - 文字禁止選取
02:08
影片單元
單元 24 - 固定UI的製作方式
04:42
影片單元
單元 25 - RWD製作滿版頁面的bug(問題篇)
15:52
影片單元
單元 26 - RWD製作滿版頁面的bug(解決篇)
06:47
影片單元
單元 27 - Flexbox 詳解內容
影片單元
單元 28 - Flexbox 實務製作 (1)
06:27
影片單元
單元 29 - Flexbox 實務製作 (2)
04:21
影片單元
單元 30 - Flexbox 實務製作 (3)
07:05
影片單元
單元 31 - 文字太長超出範圍?試試text-overflow吧
04:50
影片單元
單元 32 - 多國語系 i18n 的製作方式 (1)
04:16
影片單元
單元 33 - 多國語系 i18n 的製作方式 (2)
01:44
影片單元
單元 34 - 多國語系 i18n 的製作方式 (3)
02:11
影片單元
單元 35 - 背景圖片的技巧 (1)
03:28
影片單元
單元 36 - 背景圖片的技巧 (2)
01:40
影片單元
單元 37 - 背景圖片的技巧 (3)
04:43
影片單元
單元 38 - 背景圖片的技巧 (4)
08:10
影片單元
單元 39 - css3 Transitions 微動畫 (1)
影片單元
單元 40 - css3 Transitions 微動畫 (2)
影片單元
單元 41 - css3 Transitions 微動畫 (3)
03:12
影片單元
單元 42 - css3 Keyframes 微動畫
05:03
影片單元
單元 43 - JavaScript 基礎入門
20:45
影片單元
單元 44 - 判斷裝置怎麼做?用userAgent吧!
09:41
影片單元
單元 45 - 超好用的device.js
04:31
影片單元
單元 46 - 轉址一定要加的 location search
04:36
影片單元
單元 47 - 動態選單的設計製作 (1)
12:13
影片單元
單元 48 - 動態選單的設計製作 (2)
03:11
影片單元
單元 49 - 動態選單的設計製作 (3)
09:35
影片單元
單元 50 - 動態選單的設計製作 (4)
12:35
影片單元
單元 51 - 動態選單的設計製作 (5)
06:40
影片單元
單元 52 - 行動裝置直橫偵測 Orientation (1)
06:08
影片單元
單元 53 - 行動裝置直橫偵測 Orientation (2)
06:44
影片單元
單元 54 - RWD案例實戰(1)
24:51
影片單元
單元 55 - RWD案例實戰(2)
14:21
影片單元
單元 56 - RWD案例實戰(3)
12:30
影片單元
單元 57 - RWD案例實戰(4)
35:21
影片單元
單元 58 - RWD案例實戰(5)
22:41
影片單元
單元 59 - 先別管px了,有聽過vw嗎? (1)
07:02
影片單元
單元 60 - 先別管px了,有聽過vw嗎? (2)
03:07
影片單元
單元 61 - 使用 github上傳與gh-page免費網路空間 (1)
11:06
影片單元
單元 62 - 使用 github上傳與gh-page免費網路空間 (2)
07:34
影片單元
單元 63 - Facebook分享與 meta 設定 (1)
06:24
影片單元
單元 64 - Facebook分享與 meta 設定 (2)
09:29
影片單元
單元 65 - LINE分享
影片單元
單元 66 - 淺談漸進增強與優雅降級
03:06
作業單元
作業 1 - 最後的挑戰 - 自己的RWD版型製作
查看作業
試看單元
播放試看影片
章節 1 - 本課程不分章節
單元 3 - ip連線設定
試看影片
05:56
播放試看影片
章節 1 - 本課程不分章節
單元 11 - HTML5新標籤詳解
試看影片
07:13
播放試看影片
章節 1 - 本課程不分章節
單元 27 - Flexbox 詳解內容
試看影片
14:26
播放試看影片
章節 1 - 本課程不分章節
單元 39 - css3 Transitions 微動畫 (1)
試看影片
04:50
播放試看影片
章節 1 - 本課程不分章節
單元 40 - css3 Transitions 微動畫 (2)
試看影片
01:34
播放試看影片
章節 1 - 本課程不分章節
單元 65 - LINE分享
試看影片
07:07
課程評價
5.0
/ 5.0
40 則評價
Will Hsu2019-05-30
刻意練習,學以致用
大學唸數位多媒體,隨後想進修提升到中壢職訓班學習網頁前端開發也畢業了,第一份工作就到網頁設計公司工作,從事切版動態特效力製作出酷炫砲網頁,由於很多奇耙特殊的版型,也是因不夠熟練而卡卡不順手,上了Mike老師的rwd後重新更認識切版基礎扎實觀念,還有分享fb line等open window share 也非常之實用,再來要回報老師的就是最後一個作業將會自己設計一個簡單的網頁rwd版型! 老師還有許多課程也值得上,因為都手把手教起,從初學到進階延展!!
查看更多
1 人覺得有幫助
高楚鈞2025-06-25
易懂與實用的教學
以往對於 RWD總是有莫名的恐懼,也不知道要怎麼著手,但是經由課程內的幾個專案的練習,可以大致了解老師的 RWD設定邏輯,也有很多實用的小技巧可以使用,接下來就是修行在個人了,後續自己找找其他設計稿來練習 RWD切版與設定。 不過覺得稍微麻煩的是老師教學是用 Photoshop,實際上自已的電腦不一定會有 PS,只能大略自己抓尺寸是多大。之後自己可能會嘗試能否丟到網頁版的 Figma來抓取尺寸資訊。
查看更多
1 人覺得有幫助
游珳淇2020-01-09
很實用的教課
老師講解很用心很清楚,可以看講義複習,也能時時刻刻練習。 排版很重要,要常常練習,覺得原來CSS3有很多我不知道的方法可以做,網頁必須給使用者看起來舒服和操作不會卡或慢。 尤其是Media Queries很好用,也可以換vw來操作讓文字縮大縮小,版面不會跑出去的問題。 謝謝老師!!
查看更多
1 人覺得有幫助
Tina Chen2019-06-18
內容紮實
上此課很快讓我複習以往的HTML跟css與div,進程到RWD的觀念就滿通順了~ (雖說Bootstrap聽說很快上手很快輔助生成RWD,還是習慣先了解基礎觀念與邏輯,之後想補這塊再說) 比枋間要去上課還超貴的相比…真心學的滿超值的 ~ ~ (上到Javascript這段開始有點挫哈哈哈,但這裡JS邏輯教的很簡單其實還好) 很多備好的範例讓上課進度順利不少 高職有學html,大學畢後第一份工作是網頁設計就處在煩人的table架構時代…(應該說是台灣當時流行),三年後公司開始要求進入css+div但完全沒提供進修補貼叫你自己想辦法接下來的專案就是要用css+div弄出來,跟同事私下惡補硬弄…,後來離開沒做網頁設計了(本就喜歡平面設計加上不適應當時的網頁設計架構與切版方式很雜) 漸漸從身邊同行朋友做網頁設計的知道越來越便利進步後就尋找學RWD的教程,去年買書自修css+div但覺書裡的觀念還是頗奇怪(買書的也沒得問),這教程會邊學邊同時得到過往問題的解答,也額外補充很多東西。 CP值很高的一堂課!
(已編輯)
查看更多
董宇庭2020-02-14
值得推薦
寫網頁不寫RWD就像半夜走路不開燈,遲早撞牆。 在網路上關於RWD的資源八成以上都是bootstrap相關, 雖說好用,但要到融會貫通的程度說實在蠻困難的。 很幸運在hahow上找到老師開的課程,認識media query這個簡單好用的工具, 課程淺顯易懂,教材也準備得非常細心, 也學會了一些還沒聽過的小技巧或是好用的軟體, 這堂課程能幫助你在短時間內掌握RWD的基本操作~ 很推薦,謝謝老師。
查看更多

意猶未盡嗎?

關於講師

Mike
1堂課程
0篇文章
517位學生
沒事就喜歡在家寫寫code,學學新的技術。喜歡分享經驗給有需要的人,就讓我們一起來推倒技術的高牆吧!
前往講師頁面
精選學生作業

購課前問答

日期最新
日期最新
日期最舊
愛心數
Norris
2019-12-23
老師你好, 近日才加入課程, Smart QR Code的app, 是不是沒有在維護了呢? 有其他替代的方案嗎? 謝謝
Norris
2019-12-23
我有看到問與答有人問了, 沒問題了...
(已編輯)
回覆
我也想問
lafarfalla
2019-09-12
你好,個人主要工作內容是平面設計範疇,主要使用軟體是Illustrator與Photoshop,近期因業務需要協助公司的資訊部門製作網站,工程師同事希望我可以先美編排版與網頁切版再提供他們接手後續,但個人對Html與CSS不太熟,請問這堂課適合我嗎?
Mike
授課老師
2019-09-13
如果對基本的html & css不熟悉的話我會建議你先看下面的鐵人賽的免費資源,再回來看這堂課比較適合,這堂課是程度是需要有html & css的基本知識的 https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre
回覆
我也想問
wawa5076
2019-06-17
請問課程講義要在哪邊下載
Mike
授課老師
2019-06-17
可以在單元一的影片連結有個綠色的icon可以點擊下載喔
wawa5076
2019-06-18
原來如此~謝謝~
回覆
我也想問
HENRYMONTANA
2019-01-02
請問 1.mac電腦能操作這堂課的內容嗎? 2.對程式設計完全沒概念的人有辦法吸收這堂課的內容嗎?(css,html⋯等等的完全不知道是什麼) 謝謝您
Mike
授課老師
2019-01-02
1. hi~ mac電腦一樣可以操作喔 2. 如果對css,html⋯等等的完全不知道是什麼的同學可能不太適合,這堂課是給已經有點基礎的朋友來上的,如果你想瞭解的話可以參考網路上有許多資料,提供以下免費的教學影片給你看看 https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre
回覆
我也想問
alasha1030
2018-11-03
您好..我還是想問...這個課程做到RWD是用什麼軟體工具完成的呢?!
Mike
授課老師
2018-11-04
HI~同學,這個課程是用sublime text3來協助開發,如果你有自己習慣的開發工具也可以使用
回覆
我也想問
購買單堂課

NT$2,000
有什麼優惠可以用?
小蛙幫你找最佳優惠
登入看看 有什麼優惠用

相關標籤