你的網站跟得上時代潮流嗎?想要學網頁,RWD 是不可或缺的能力!
在這個每個人手一機的時代裡面,網頁成為了傳播資訊資訊媒體的重要媒介,早期的網頁透過 flash 或是一般 html 的方式讓人在電腦上面觀看,但是順應時代的潮流跟技術的進步,網頁這項技術跳脫以往,擺脫在手機上沉重且觀看體驗不佳的 flash,投入 html5 的懷抱之中,發展出自適應網頁 Responsive Web Design,自適應網頁又稱響應式網頁,不管是在設計面或是程式面的觀念都有重大突破,讓人們更能在手機上面觀看網頁有更好的體驗。
用業界實戰經驗教你從零打造 RWD 網頁!
向網頁破版說 bye bye
這堂課是將我做案子的經驗與實作的技巧整合所編成的精華,主要會教你如何從零開始的一步一步建構 Responsive Web Design 網站,從零開始打好基礎建立觀念,帶入實作,用業界常常遇到的問題當舉例,教你如何解決很多因為行動裝置而產生破版,還有如何利用百分比的切版技巧來減少修改的時間。
課程大綱說明
剛踏入 RWD 的世界之中你需要注意的東西很多,例如以前沒碰過的 Viewport 設定、media query 斷點,圖片的切版技巧,在課程的前面將會先教你所具備的知識,讓你可以更快的銜接後面的課程。
HTML5 問世之後推行的許多的新的標籤,每個標籤開始有了自己的定位,不要再全部使用 div 或是 table 了,選用對的 html5 標籤除了在閱讀 html 原始碼更加順暢外,也有助於 google 搜尋引擎排名順序,SEO 效果的提升。
你或許會發現在切 RWD 版面的時候很常在不同的瀏覽器看到跑版,常常不知道為什麼,這是因為每個語法對於瀏覽器的支援度有所不同,我將在這邊教你怎麼解決這些問題,教你怎麼避免,讓跑版跟你說再見。
讓使用者可以知道選單的微互動也是可以大大提升使用者對網站的感覺,擺脫只有淡入淡出效果,從架構規劃著手,能讓你做出豐富且多變的選單。

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

在課堂上我將會準備業界常常看到 RWD 設計,實際的從頭到尾製作一次,呼應前面的課程內容,讓同學可以融會貫通。
為什麼要來上這堂課 ?
- 想讓自己的專業技能更上一層樓
- 業界實際遇到的問題一次幫你解惑
- 豐富且多樣化的內容
- 清楚且不拖泥帶水的教學方式,讓你由淺入深,融會貫通
我自己本身是從設計師轉職過來的,設計師會遇到哪些問題,我有實際的經驗和解決方案,我將竭盡我所能的幫大家把基礎打好,讓你 / 妳們跟上述問題說再見!

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

關於我
Hi~我是成智遠(Mike),對互動技術與網頁前端抱持者極大興趣的開發者,我熱愛分享自己所學所看到的東西,喜歡幫助那些認真而且有需要的人。沒有人是天生下來就是天才的,都是要靠後天的努力跟不斷的練習來強化自己,快來跟我一起推倒技術的高牆!
‧ 任職於 飛肯設計學院 講師
‧ 曾任職於 痞客邦PIXNET 資深前端工程師
‧ 曾任職於 致理科技大學數位媒體設計系 RWD網頁設計業師
‧ 曾任職於 AmazingTalker 線上教育平台 資深前端工程師
‧ 曾任職於 米蘭營銷策劃股份有限公司 前端工程師
‧ 曾經製作過的專案加起來超過 60 款互動、網頁、遊戲
‧ 曾擔任跨國知名企業公司專業技能內訓講師
‧ 受邀至各大專院校演講
未來願景
上完這堂課我相信你現在對 RWD 不陌生,都可以製作出任何你想要的版型,不過學習的道路是永無止境的,接下來我會在繼續規劃新的跟前端相關的主題課程,從 RWD 到 JS 入門到框架應用,帶領各位同學向前邁進。
課後規劃
學生上完課後可以加入這次的教學社團,在內分享問題或是尋求老師解答,老師也會時常分享業界資訊給各位同學知道,讓同學們可以加速學習,不定期老師也會為同學們解答各種問題,例如求職方向或是如何進一步自學等!
社團傳送門在此
(請同學加入後要填寫問題喔~你的 hahow 帳號名稱是什麼?)

