客製化進階 RWD 手機版網頁設計班 | 五倍紅寶石

客製化進階 RWD 手機版網頁設計班 - 假日班

你還在困擾網頁該怎麼做 RWD 嗎？講師手把手教學，帶你快速上手 RWD，不僅教你技術及方法，還要建立你正確的網頁觀念，融會貫通後你將大幅提高自學能力，降低卡關浪費時間查找的困擾！

開課時段 3 月｜假日班3/08 (日)、3/15 (日)、3/22 (日)、3/29 (日) 10:00 ~ 17:00，共計 24 小時

原價 NTD 17,400 優惠價 NTD 14,400

此課程已結束
歡迎和 我們聯絡 取得最新課程資訊。

Amos Lee 李建杭 | CSS 動畫課程教學 | RWD 課程教學推薦 | 五倍紅寶石

講師

李建杭 (Amos Lee)

資策會(台北、中壢) 講師
ModernWeb 研討會講者
亞馬勁雲科技前端工程師
中科大業界專家課程 講師
致理技術學院業界專家 講師
元培醫事科技大學業界專家 講師
凌網科技視覺設計師

本課程適合

  • 學生族群，想嘗試新領域，懂基本的 HTML, CSS
  • 設計師，對於網頁設計有興趣，想更精進設計感
  • 上班族，利用假日時間增進技能，獲取更高經驗值

你將會學到

  • 基本設定
  • 格線系統製作
  • Flex 排版方式
  • Grid 排版方式
  • 動畫設計
  • 單位與應用
  • 設計實務
  • 版型設計
客製化進階 RWD 手機版網頁設計班 | 五倍紅寶石

什麼是 RWD ？

從事網頁開發或對網頁技術有興趣的你相信經常聽到 RWD 這個詞，但什麼是 RWD 呢？

RWD(Responsive Web Design)可稱為自適應網頁設計、響應式網頁設計、回應式網頁設計...等，近年來行動裝置上網的盛行，過去只針對桌機筆電的網頁設計對手機瀏覽來說已經不夠友善，試想看看精心設計的網頁在手機上縮的小小的，瀏覽的時候還要將網頁放大才能看，實在相當不方便！也因此 RWD 的出現大大提升了同一個網頁在不同尺寸的瀏覽裝置上的可瀏覽性，也成為現在處理行動裝置瀏覽問題的主流方式。

在本堂課，由教學經驗豐富的講師 Amos 針對製作 RWD 網頁時你應該事先了解的概念以及各項必備技能精闢解說，讓你完全具備 RWD 開發能力！

扎實 RWD 課程內容搶先看

RWD 技術基礎 | 網頁設計 RWD 教學課程推薦 | 五倍紅寶石

第一階段：打好 RWD 技術基礎

知道 RWD 了，但你知道 AWD 又是什麼嗎？在打基礎階段，Amos 老師不止告訴你 RWD 相關基礎概念，也一起告訴你與 RWD 相關的小知識！

另外要製作 RWD 網頁最重要的 viewport 與媒體查詢要如何使用，也都會在這個階段清楚講解，另外還加碼告訴你 IE8 與 HTML 5 的相容方式，讓你一次通通處理好～

RWD 格線系統與排版 | 網頁設計 RWD 教學課程推薦 | 五倍紅寶石

第二階段：格線系統與排版

在設計 RWD 網頁時，最重要的觀念就是所謂的「格線系統 ( Grid system )」，瞭解格線系統能幫助你製作邏輯通用的 RWD 網頁，也讓你能在收到不同尺寸的設計圖時更快理解要如何切版喔！

另外現在主流排版方式不可或缺的兩大觀念「Flex 排版」與「Grid 排版」，也都會在這個階段一併習得，搭配課堂上立即實作，讓你更快吸收！

RWD 動畫設計與應用 | 網頁設計 RWD 教學課程推薦 | 五倍紅寶石

第三階段：動畫設計與應用

學會了 RWD 排版方式後，第三階段更加碼講解要增進網頁使用者體驗不可或缺的動畫效果設計，以及製作 RWD 網頁時非常方便的動態計算尺寸方法，另外要怎麼計算視窗寬高與相關應用也都是非常實用的技能，讓你 CSS 排版能力更上一層樓！

RWD 課程內容

一、何謂 RWD

  • 前言
  • 何謂 RWD
  • RWD 與 AWD

二、基本設定

  • 基本設定
  • viewport
  • IE8 相容方式
  • HTML 5 相容方式
  • 關於 CSS 媒體查詢
  • 媒體查詢運作方式

三、格線系統製作

  • 格線系統製作
  • 欄位數量的制訂
  • 盒模型的設定方式
  • 欄位間距設定方式
  • 格線系統 RWD 實作

四、Flex 排版方式（一）

  • Flex 排版方式
  • Flex 啟用方式
  • 物件流觀念
  • 排列方向

五、Flex 排版方式（二）

  • Flex 排版方式
  • 對齊控制
  • 排序方式
  • RWD 版面實作
  • 彈性控制

六、​Grid排版方式

  • Grid 排版方式
  • Grid 啟用方式
  • 格線樣板製作
  • 格線區段的寫法
  • RWD 製作方式
  • 格狀 RWD 相簿版面製作

七、​動畫設計

  • 動畫設計
  • Transition
  • Animation
  • 圓角製作與應用
  • 陰影應用

八、​單位與應用

  • 單位與應用
  • 分數單位尺寸
  • 視窗寬高尺寸
  • 動態計算尺寸

五倍紅寶石課程提供

程式網頁設計課程結業證書證明 | 五倍紅寶石

課程結業證書證明

程式網頁設計線上補課 | 五倍紅寶石

每週二獨家默默會讓你問題問到飽 & 業界高手一同交流

前端後端課程詢問 | 五倍紅寶石

共同討論課程群組，老師同學即時交流

程式課程環境 | 五倍紅寶石

舒適教室環境，備有插座及快速穩定免費 wifi 連線操作

程式網頁設計線上補課 | 五倍紅寶石

線上補課，不怕跟不上進度！

程式課程貓 | 五倍紅寶石

吉祥物貓貓加持

五倍紅寶石上課環境、地點

上課地點：台北市中正區衡陽路 7 號 5 樓
交通資訊：台大醫院站 1 號出口 (走路 4 分鐘）

立即揪團課程享折扣(名額有限)

超值加購方案

2 人同行 or 一次購買 2 堂課，可享 9 折優惠

3 人同行 or 一次購買 3 堂課，可享 85 折優惠

更多團報 or 相關課程諮詢請洽 02 - 2331-5247

報名及付款方式：

  1. 很抱歉，目前課程暫不開放報名。
  2. 有任何問題，或想獲取最新的課程資訊，都歡迎和 我們聯絡。

注意事項：

  1. 課程內容、日期及講師可能因故有所修改，主辦單位保留異動之權利。
  2. 學員需自備筆記型電腦。
  3. 本次課程僅開放 30 人報名。
  4. 報名費不包含餐費。
  5. 若報名學員人數不足 10 人，將視情況取消當次課程，並全額退還報名費用。
  6. 如有企業或團體課程需求，歡迎直接來信洽詢。

聽聽看同學怎麼說