Responsive Web Design 響應式網頁設計
RWD 響應式網頁設計-手機版網頁教學課程
桌機、手機、平板三合一網頁切版一次搞定,鍛練您的RWD CSS切版功力,RWD響應式網頁教學,練熟後就可應用到您的工作上喔!
RWD 手機版網頁設計教學,HTML5 CSS3 手機網頁專用語法,各種 RWD 響應式網頁教學範例,iOS、Android 跨平台一次完成!
RWD響應式網頁設計-手機版網頁教學課程 【二四晚班】
- 課程教學日期:2021 年 6 月 1 日 ~ 6 月 24 日
- 課程教學日期:6/1、6/3、6/8、6/10、6/15、6/17、6/22、6/24
- 課程教學時間:星期二、四 / 晚上 7:00 ~ 10:00
RWD響應式網頁設計-手機版網頁教學課程 【週日班】【姜智豪老師】
- 課程教學日期:2021 年 6 月 20 日 ~ 7 月 11 日
- 課程教學日期:6/20、6/27、7/4、7/11
- 課程教學時間:星期日 / 早上 10:00 ~ 1:00 、 下午 2:00 ~ 5:00
RWD教學課程-響應式網頁-課程資訊
- 【 新生特價 7800 / 舊生特價 7200 】限時特價:付現金再折 200 元
- 付款方式:開課當天現場繳費【 現金 / 刷卡 / 匯款 / 支票 】
- 教學時數:每堂課 3 小時 / 共 8 堂課 / 時數共 24 小時 / 共 4 週
- 教學教材:RWD教學講義 / RWD網頁範例原始檔
- 上課地點:飛肯設計學苑 - 台北教室 【教室照片】【Google地圖】
- 聯絡電話:(02) 2370-1122
- 課後服務:上完本課程之後, 三年內都可以多次免費申請重修本課程喔!
RWD教學課程-響應式網頁-課程適合對象
- 1. 對於 iPhone 和 Android RWD 響應式網頁設計切版有工作需求者
- 2. 對於 iPad 和 Android 平板 RWD 響應式網頁設計切版有工作需求者
- 3. 網頁設計師
- 4. 前端設計師
RWD教學課程-響應式網頁-課程報名資格
- 1. 必須對 CSS 語法網頁排版有製作經驗者(課程推薦:「CSS div 網頁設計切版入門班」)
- 2. 沒有學過 HTML5 語法的人也可以參加這個課程。
- 3. 沒有學過 CSS3 語法的人也可以參加這個課程。
- 4. 學員需自備智慧型手機或 Pad 平板以便上課時測試,使用 iPhone 和 Android 系統皆可。
RWD教學課程-響應式網頁-課程介紹
老師上課時會帶著同學實做各種 RWD 響應式網頁設計切版排版範例,手機網頁設計+PAD網頁+桌機網頁三合一排版切版教學,課堂有大量的 RWD 響應式網頁設計教學範例切版教學,老師隨側指導同學,一步一步解說後再馬上給同學練習,學習效果佳,教學口碑看得到!練熟之後就可以馬上應用在你的工作上喔!
這個 RWD 網頁設計排版教學課程有許多的 RWD 教學範例讓同學練習,( RWD 中文翻譯:響應式網頁設計、自適應網頁設計、回應式網頁設計)都是針對 iPhone 和 Android 智慧型手機還有 iPad 和 Android 平板電腦所量身定做的網頁版型設計案例,RWD網頁設計切版排版教學主要會使用到 HTML5 語法做為網頁的主結構,搭配 CSS3 新語法來排版,對於不同尺寸大小的手機網頁設計或是 PAD 平版電腦網頁設計彈性伸縮的響應式網頁版型,可以讓同一套網頁在電腦上正常瀏覽,遇到 PAD 平版電腦時會自動轉換成適合 PAD 平版電腦大小的版型,遇到手機時也會再自動轉換成適合手機大小的網頁版型,做到真正的跨平台網頁設計,最後還會提到 CSS3 新的動態網頁效果...等。
完全開放式的標準化的 RWD響應式網頁設計 HTML5 和 CSS3 切版排版語法教學,可以設計符合 iOS 和 Android 智慧型手機系統的網頁,達到最佳的相容性,跨平台,跨版本一次完成。除了 iPhone 和 Android 智慧型手機網頁,也可以運用在 iPad 和 Android ....等。
維基百科對於 RWD 網頁設計的解說如下:Responsive web design 響應式網頁設計(通常縮寫為RWD),是一種網頁設計的技術做法,該設計可使網站在不同的裝置(從桌面電腦顯示器到行動電話或其他行動產品裝置)上瀏覽時對應不同解析度皆有適合的呈現,對於網站設計師和前端工程師來說,有別於過去需要針對各種裝置進行不同的設計,使用此種設計方式將更易於維護網頁。
Responsive web design 此概念是於2010年5月由國外著名網頁設計師 Ethan Marcotte 所提出。
RWD教學課程-響應式網頁-課程大綱
老師會因應職場的需求變化,做課程內容和範例的即時調整與修改,確保本課程的實用性和即時性。
【教學主題一】HTML5 CSS3 手機網頁 RWD 響應式網頁設計基本設定
- HTML5 和 CSS3 RWD 響應式網頁設計起手式
- 手機版 RWD 響應式網頁設計專用的 Meta 語法
- HTML5 CSS3 響應式網頁設計的基本設定
- 如何設計與規劃 手機版的 使用者介面 UI
- Viewport 基本設定
- 手機網頁文字大小的調整
- HTML5 CSS3 IE 向下相容性
- iPhone 手機網頁旋轉畫面調校
【教學主題二】CSS3 手機網頁設計 RWD 響應式網頁設計切版排版應用
- -webkit- CSS3 語法使用解說
- 關於 box-sizing:border-box; 語法應用
- text-overflow 裁剪文字
- :first-child :last-child 語法應用
- CSS Sprite 手機網頁優化應用
- box-radius 圓角語法設定
- box-shadow 影陰設計
- :nth-child() 語法應用
【教學主題三】RWD 響應式網頁設計切版排版教學
- Responsive Web Design 網頁版型設計原理
- max-width , min-width
- RWD網頁 breakpoints 雙版本分界點設定實作
- RWD網頁 breakpoints 三版本分界點設定實作
- http requests 讀取效能考量
- RWD手機版網頁與桌面版網頁的轉換實作
- CSS3 Media queries
- 智慧型手機螢幕解析度分析
- RWD網頁設計 在 IE 的解決方案
- RWD網頁設計 Mobile First
- RWD網頁設計 Desktop First
- 手機版網頁彈性伸縮式版型設計
【教學主題三】Responsive Images 縮放式圖片
- Responsive images 縮放式圖片設定
- width:100%; max-width:100%;
- CSS3 background-size 進階應用技巧
- 手機版網頁如何使用視網膜解析度的圖片
- 圖片格式的選擇 JPG、GIF、PNG、SVG
【教學主題四】行動裝置 RWD 響應式網頁設計功能性應用
- iPhone icon Android icon設計
- RWD網頁行動裝置專用的 <meta>
- RWD手機網頁專用多功能性超連結設定
- 固定頁首頁尾手機版RWD網頁設計
- 2 倍解析度 icon 應用
- CSS 與 PSD 手機版RWD網頁版型設計
- 全滿版燈箱式手機版選單設計
【教學主題五】RWD手機網頁版型設計
- Springboard RWD網頁版型設計
- Header Footer Fixed RWD網頁版型設計
- Toolbar RWD網頁選單設計
- Gallery 網頁版型設計
- Full Screen 滿版式RWD網頁設計
- Data List 條列式RWD網頁設計
【教學主題六】 CSS3 動態效果與RWD選單設計整合教學
- CSS3 transition 動畫設計
- CSS3 transform 變形設計
- CSS3 rotate 旋轉效果設計
- CSS3 rotateY 翻轉效果設計
- CSS3 3D 翻轉效果選單設計
- CSS3 scale 縮放效果設計
- jQuery 程式整合入門
- jQuery RWD 手機網頁下拉選單設計
- CSS3 RWD 手機網頁下拉式選單設計
- CSS3 RWD 手機網頁縮放式選單設計
【教學主題七】 手機版網頁與桌機版RWD網頁設計整合範例實作
- RWD 網頁切版教學實作範例「一」
- RWD 網頁切版教學實作範例「二」
- jQuery 在 RWD 網頁會遇到的 BUG 破解
- RWD 網頁切版教學實作範例「三」
- RWD 網頁切版教學實作範例「四」
- 使用 CSS3 在 RWD 會遇到的 BUG 破解