一變應萬變的響應式網頁設計
4.8 (174 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
778 students enrolled
Wishlisted Wishlist

Please confirm that you want to add 一變應萬變的響應式網頁設計 to your Wishlist.

Add to Wishlist

一變應萬變的響應式網頁設計

還不會目前業界最為流行的響應式網頁設計嗎?讓六角學院線上手把手教會你/妳!
4.8 (174 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
778 students enrolled
Last updated 6/2017
Traditional Chinese
Price: $80
30-Day Money-Back Guarantee
Includes:
  • 9 hours on-demand video
  • 4 Articles
  • 27 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 掌握響應式網頁設計細節
  • 了解如何跨部門協作響應式網頁設計
  • 懂得如何以 UI / UX 角度設計好的響應式網頁設計
View Curriculum
Requirements
  • 不適合沒學過 HTML、CSS 的初學者
  • 需要安裝 Chrome 網頁瀏覽器
  • 需要安裝 Sublime Text 3網頁編輯器
Description

本課程將會講解如何從無到有設計響應式網頁設計,除了基礎教學外,我們也提供許多實務上與其他部門合作時的心法通通傳授給你,
不論你是網頁設計師、前端工程師都相當適合從中了解真正實務上設計響應式網頁時所需要注意的細節!
六角學院除了提供線上影音課程外也提供:

  • 無限期、無限次數地觀看線上教學影片
  • 隨時可提問的 udemy 發問社群
  • 每週三晚上七點半的線上問答
  • 提供三次 程式碼檢視,以確保各位學生觀念正確
Who is the target audience?
  • 已經會 HTML、CSS 的網頁初學者
  • 想要了解更多網頁排版細節的潛在網頁工程師、網頁師
Students Who Viewed This Course Also Viewed
Curriculum For This Course
89 Lectures
09:05:12
+
基本環境介紹
10 Lectures 44:31

什麼是響應式網頁設計?(下)
04:07

基本環境建立 (上)
03:50

基本環境建立 (下)
05:51

CSS 3 Media Query 觀念 (上)
07:02


min-width 語法教學
02:51

你知道瀏覽器內建就有模擬 Mobile 介面工具了嗎?
06:20

教你如何用手機瀏覽網頁開發介面
05:03

第一章測驗
6 questions

六角學院線上問答會
00:04
+
常見版型佈局設定
8 Lectures 48:24
禁止顯示 x 軸法則
02:16

max-width:一個小設定輕易將網頁設定成流體式佈局
05:52

版型單位 % 數觀念
07:16

三欄流體式設計
07:50

左側 Float固定、右側流體式設計
06:27

Float:none 清除浮動並排效果
05:59

網站版型框架設定
08:07

第二章作業
04:37
+
以 UI 設計角度切入響應式設計該注意的細節
8 Lectures 40:08

斷點時機:設計多欄式佈局的必要觀念
04:11


少即是多:避免資訊量爆炸
02:56

載具特性:使用者行為 touch、hover 傻傻分不清楚
03:20

斷點元素:只有手機才會顯示的功能與Layout切換
05:06

軟體輔助:偵測響應式網站斷點工具
05:53

第三章作業
10:44
+
斷點規劃
7 Lectures 35:30
先要有個認知,響應式無法讓所有螢幕解析度都最佳化
03:34

遵循 80/20 法則,先兼容熱門瀏覽器吧!
06:48

什麼是 Mobile First 與 Desktop First 優先?
05:29

為何要考量 Mobile First 與 Desktop 優先的網頁版型?
05:34

常見 PC 解析度斷點設計
10:56

Viewport Sizes 服務網站介紹
02:41

六角講師斷點設計分享
00:28
+
響應式表格與表單設計
8 Lectures 01:01:20
響應式表格設計 (上)
07:27

響應式表格設計 (下)
04:08

pure.css:加強你對網頁元素的了解
04:30

pure.css:按鈕設計原理
08:12

pure.css:自行新增子模組
08:34

pure.css:重新認識表單狀態
11:24

pure.css:如何將表單整合至網頁
12:55

+
響應式圖形設計
11 Lectures 55:37
+
常見響應式設計選單
6 Lectures 42:45
響應式選單常見樣式
07:46

多欄多列式設計細節
09:03

漢堡選單設計
09:40

固定式選單 (Fixed)
04:11

Off Canvas 選單設計
07:41

選單設計總結
04:24
+
開始實作前的注意事項
3 Lectures 14:24
media 到底要全部寫在一起還是隔離
05:21

確認你的 media query 設定
06:24

請不要習慣寫死高度
02:39
+
最後,讓你的響應式網頁設計更專業
3 Lectures 21:09

最後一版作業細節 (多頁設計)
04:28

+
PM、Sales、Art、F2E、Backend 之間如何真心合作
7 Lectures 53:32
業務篇:如何說服客戶導入響應式設計
07:34

業務篇:各部門投入人力時程比較
07:15

企劃篇:為客戶量身打造客製化斷點設計
09:12

企劃篇:開發過程中,你需要與客戶溝通的建置與維護細節
10:10

前端篇:設計一套讓客戶能夠自行上稿的 template
04:24

前端篇:注意網頁載入速度與效能問題
07:13

全部門:以電子商務網頁版型為例進行探討
07:44
3 More Sections
About the Instructor
廖洧杰 liao
4.7 Average rating
2,969 Reviews
10,590 Students
10 Courses
前端工程師

你好,我是六角學院的校長,洧杰,

我是熱愛分享與交流的前端工程師,目前專注於兼容 Desktop / Mobile 網頁前端開發,期間已協助數百位平面設計師、網頁設計師導入標準網頁設計。

同時我也是高雄前端社群創辦人,於2013年3月31日創立社群,每月固定舉辦前端主題聚會,至今已舉辦超過30場聚會,不重複參與人數破千位,2015年協助14位平面設計師、網頁工程師轉職為前端工程師。同時也是國立高雄大學資管前端兼任講師、業界講師。

王志誠 Wang
4.7 Average rating
2,969 Reviews
10,590 Students
10 Courses
前端設計師、前端工程師

大家好,我是王志誠 (Casper),是由設計師轉為前端工程師,專長是視覺設計與前端整合、前端技術教育訓練、前端自動化,常用的工具、技術有 Sketch、Sass、Angular.js、Node.js、Gulp 等主流前端技術。

目前是高雄前端社群的核心成員,高雄前端社群除了會有中型的交流會、Workshop以外,我還會舉辦 CSS 讀書會(每月1~2次),如果對 前端、CSS 有興趣,歡迎追蹤 FB / 高雄前端社群,將可以看到我們的活動。

六角 學院
4.7 Average rating
2,969 Reviews
10,590 Students
10 Courses
Udemy 台灣合作夥伴

一次付費,終身複習 
隨著時代更新的線上數位教材
透過國際知名 Udemy 線上教育平台 
我們致力於優化程式教育的流程

我們承諾以下事項:

  • 一次付費,課程內容沒有期限
  • 課程內容更新,無需額外付費
  • 價格調整,已付費者不受影響
  • Udemy、Mail、Facebook 等各頻道發問一定會得到回答
  • 30 天內無條件退款


Evangelin Lin
4.8 Average rating
1,582 Reviews
5,217 Students
6 Courses