|
課程目錄 :
(內容與授課時間) 授課總時數:
09:05:51
課程大綱：
第1章 課程前期準備
在學習正式課程之前瞭解下「WEB項目開發流程」以及在「流程中的角色」。
課時01 1-1 課程介紹 →時長:00:05:28
課時02 1-2 課程安排 →時長:00:01:32
課時03 1-3 WEB項目開發流程介紹 →時長:00:04:12
課時04 1-4 開發角色縮寫簡介 →時長:00:02:09
課時05 1-5 產品設計 →時長:00:03:48
課時06 1-6 開發規劃 →時長:00:04:45
第2章 前端開發簡介及標注與切圖
本章節對本項目前端開發具體做什麼做了簡單介紹，並帶領用戶進行 psd 圖標注與切圖。
課時07 2-1 前端開發內容介紹 →時長:00:01:54
課時08 2-2 標注簡介 →時長:00:02:19
課時09 2-3 標注 →時長:00:15:41
課時10 2-4 切圖（一） →時長:00:09:18
課時11 2-5 切圖（二） →時長:00:07:05
第3章 項目 JS 類開發
本章節講師會帶你規劃和開發 JS 項目所用的「通用圖文組件「- H5ComponentBase 和「內容組織功能類「 - H5。
課時12 3-01 靜態頁思路驗證-fullPage.js搭建一個簡單切換頁面 →時長:00:12:28
課時13 3-02 靜態頁思路驗證-組件切換 →時長:00:14:02
課時14 3-03 JS類規劃 →時長:00:05:53
課時15 3-04 通用圖文組件類-H5ComponentBase（開發準備） →時長:00:05:44
課時16 3-05 通用圖文組件類-H5ComponentBase（參數設置） →時長:00:16:26
課時17 3-06 CSS樣式規劃 →時長:00:03:32
課時18 3-07 通用圖文組件類-H5ComponentBase（接受 onLoad、onLeave事件） →時長:00:09:00
課時19 3-08 內容組織類-H5（addPage方法） →時長:00:17:23
課時20 3-09 內容組織類-H5（addComponent方法） →時長:00:10:56
課時21 3-10 內容組織類-H5（整合fullPage.js） →時長:00:06:22
第4章 圖表組件-散點圖組件開發
講師先對圖片組件做整體介紹，然後手把手帶你詳細開發散點圖組件，直到你能夠獨自完成。
課時22 4-1 圖表組件開發介紹 →時長:00:03:20
課時23 4-2 散點圖原理分析 →時長:00:03:00
課時24 4-3 散點圖開發(散點圖的比例值、顏色設置) →時長:00:15:48
課時25 4-4 散點圖開發(位置設置) →時長:00:10:29
第5章 圖表組件-柱狀圖組件開發
先跟著講師學開發水平柱圖，逐步掌握水平柱圖原理，然後自己獨立開發垂直柱圖。
課時25 4-4 散點圖開發(位置設置) →時長:00:10:29
課時26 5-1 柱圖開發簡介 →時長:00:02:39
課時27 5-2 水平柱圖開發（HTML的DOM搭建） →時長:00:18:39
課時28 5-3 水平柱圖開發（CSS樣式編寫） →時長:00:08:25
課時29 5-4 水平柱圖開發（生長動畫製作） →時長:00:11:14
第6章 圖表組件-折線圖開發
講師先帶你使用 Canvas 開發折線圖，從中掌握折線圖的生長動畫原理，然後真正參與到項目實戰中，獨立完成改變生長動畫的任務。
課時30 6-1 折線圖搭建折線圖組件環境 →時長:00:05:11
課時31 6-2 折線圖畫布 →時長:00:05:37
課時32 6-3 折線圖繪製網格線 →時長:00:11:44
課時33 6-4 折線圖畫點 →時長:00:10:46
課時34 6-5 折線圖連線繪製數據 →時長:00:07:10
課時35 6-6 折線圖繪製陰影 →時長:00:05:36
課時36 6-7 繪製項目名稱 →時長:00:08:35
課時37 6-8 折線動畫 →時長:00:11:29
課時38 6-9 項目名稱動畫 →時長:00:04:06
第7章 圖表組件-雷達圖開發
已經掌握折線圖開發的你，跟著講師的教學練習節奏，完成使用 Canvas 來完成雷達圖的開發也是 So easy。
課時39 7-1 雷達圖開發（設計說明） →時長:00:03:06
課時40 7-2 雷達圖開發（背景層開發） →時長:00:17:49
課時41 7-3 雷達圖開發（數據層開發） →時長:00:08:16
課時42 7-4 雷達圖開發（項目文本修正、生長動畫） →時長:00:10:05
第8章 圖表組件-餅狀圖開發
本章節向你揭示餅狀圖的開發原理，在章節的結束你就可以獨立開發完成環狀圖開發了。
課時43 8-1 餅圖開發（繪製餅畫準備） →時長:00:06:12
課時44 8-2 餅圖開發（繪製餅圖） →時長:00:10:15
課時45 8-3 餅圖開發（繪製餅圖動畫） →時長:00:03:40
課時46 8-4 餅圖開發（項目文本注入） →時長:00:09:31
第9章 項目前端頁面整合開發
前面章節的學習積累很重要！這一節講師就會帶你把前面各個開發出來的頁面整合在一起，你會感覺到前面類開發的好處，可以減少很多代碼的量。
課時47 9-1 前端整合開發介紹 →時長:00:03:39
課時48 9-2 前端整合開發準備 →時長:00:09:14
課時49 9-3 圖文組件頁開發（首頁整合開發） →時長:00:13:43
課時50 9-4 圖文組件頁開發（整合內容填充） →時長:00:11:11
課時51 9-5 圖文組件頁開發（尾頁整合開發） →時長:00:14:31
課時52 9-6 圖表組件頁整合開發（一） →時長:00:09:05
課時53 9-7 圖表組件頁整合開發（二） →時長:00:11:13
課時54 9-8 圖表組件頁整合開發（三） →時長:00:09:36
課時55 9-9 圖表組件頁整合開發（四） →時長:00:05:24
第10章 課程擴展
有問題需要解決？隨時在問答區提出來！講師會把大家典型的問題做指點和解惑，比如餅狀圖項目文本發生重疊的解決方法等；最後還帶著你把項目最後首頁的 Loading
功能完成。
課時56 10-1 Loading 效果（簡介） →時長:00:04:37
課時57 10-2 Loading 效果（HTML 結構搭建及 CSS 樣式設置） →時長:00:09:45
課時58 10-3 Loading 效果（JS 腳本編寫） →時長:00:16:10
課時59 10-4 餅圖文本重排（簡介） →時長:00:08:18
課時60 10-5 餅圖文本重排（相交判定） →時長:00:12:52
課時61 10-6 餅圖文本重排（重排） →時長:00:14:07
課時62 10-7 Ajax 獲取 JSON 數據(上) →時長:00:05:51
課時63 10-8 Ajax獲取 JSON 數據(下) →時長:00:13:32
| 
本課程(全集)播放列表:
TS_6001