李建杭 (Amos Lee)

講師

李建杭 (Amos Lee)

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

本課程適合

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

你將會學到

  • 基本設定
  • 格線系統製作
  • Flex 排版方式
  • Grid 排版方式
  • 動畫設計
  • 單位與應用
  • 設計實務
  • 版型設計

什麼是 RWD ?

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

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

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

扎實課程內容搶先看

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

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

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

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

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

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

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

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

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

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

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

詳細課綱

  • 一、何謂 RWD

    • 前言
    • 何謂 RWD
    • RWD 與 AWD
  • 二、基本設定

    • 基本設定
    • viewport
    • IE8 相容方式
    • HTML 5 相容方式
    • 關於 CSS 媒體查詢
    • 媒體查詢運作方式
  • 三、格線系統製作

    • 格線系統製作
    • 欄位數量的制訂
    • 盒模型的設定方式
    • 欄位間距設定方式
    • 格線系統 RWD 實作
  • 四、Flex 排版方式(一)

    • Flex 排版方式
    • Flex 啟用方式
    • 物件流觀念
    • 排列方向
  • 五、Flex 排版方式(二)

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

    • Grid 排版方式
    • Grid 啟用方式
    • 格線樣板製作
    • 格線區段的寫法
    • RWD 製作方式
    • 格狀 RWD 相簿版面製作
  • 七、​動畫設計

    • 動畫設計
    • Transition
    • Animation
    • 圓角製作與應用
    • 陰影應用
  • 八、​單位與應用

    • 單位與應用
    • 分數單位尺寸
    • 視窗寬高尺寸
    • 動態計算尺寸
超值加購方案

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

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

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

馬上報名搶位

報名及付款方式:

  1. 點擊「馬上報名搶位」連結並填寫表單。
  2. 課程達開課人數後,我們會主動寄發繳費連結。
  3. 線上繳費(刷卡或匯款),或是現場現金或刷卡繳款。
  4. 匯款帳號資訊:
    • 銀行:華南商業銀行 營業部
    • 帳號:100-10-034068-2
    • 戶名:五倍紅寶石股份有限公司附設臺北市私立五倍紅寶石技藝文理短期補習班

注意事項:

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