課程(名稱.編號)簡索

領導藝術.綜合管理        人力資源.企業培訓        職務能力培訓系統班        銷售實戰.市場行銷        職場技能.個人成長        Office白領辦公達人        財經金融.投資理財        語言學習.出國留學        中國大陸證照培訓        資格考試.考証培訓        文化.生活.興趣.保健        生產管理.採購物流        移動開發        前端開發        後端開發        數據庫.服務器        網頁平面設計        雲計算.大數據        網絡營銷推廣        自然學科        工程技術學科

經濟管理學科

醫.藥.農.林學科

法律 學科

計算機工程學科

哲學.歷史學科

文學.藝術學科

教育社會學科

外語 學科

醫藥農林        哲學歷史        文學藝術        工程技術        基礎科學        經管法學

課程目錄 :        (內容與授課時間)        授課總時數:   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