HTML5+CSS3前端技術——UI設計師與開發(fā)人員合作秘籍

注重實用技能培養(yǎng)——打造“互聯(lián)網(wǎng)+”UI 設計師 突出創(chuàng)意設計訓練——授人以漁而不只是作品臨摹

真實商業(yè)項目驅動——行業(yè)知識與專業(yè)設計相呼應 學習體驗時尚前衛(wèi)——傳統(tǒng)教材與二維碼革命性攜手

隨著移動互聯(lián)技術的飛速發(fā)展，“互聯(lián)網(wǎng)+”時代已經(jīng)悄然到來，這自然催生了各行業(yè)、企業(yè)對UI設計人才的大量需求。與傳統(tǒng)美工、設計人員相比，新“互聯(lián)網(wǎng)+”時代對UI設計師提出了更高的要求，傳統(tǒng)美工、設計人員已無法勝任。在這樣的大環(huán)境下，這套“互聯(lián)網(wǎng)UI設計師”系列教材應運而生，它旨在幫助讀者朋友快速成長為符合“互聯(lián)網(wǎng)+”時代企業(yè)需求的優(yōu)秀UI設計師。

這套教材是由課工場（kgc.cn）的UI/UE教研團隊研發(fā)的。課工場是北大青鳥集團下屬企業(yè)北京課工場教育科技有限公司推出的互聯(lián)網(wǎng)教育平臺，專注于互聯(lián)網(wǎng)企業(yè)各崗位人才的培養(yǎng)。平臺匯聚了數(shù)百位來自知名培訓機構、高校的頂級名師和互聯(lián)網(wǎng)企業(yè)的行業(yè)專家，面向大學生以及需要“充電”的在職人員，針對與互聯(lián)網(wǎng)相關的產(chǎn)品、設計、開發(fā)、運維、推廣和運營等崗位，提供在線的直播和錄播課程，并通過遍及全國的幾十家線下服務中心提供現(xiàn)場面授以及多種形式的教學服務，且同步研發(fā)出版最新的課程教材。

課工場為培養(yǎng)互聯(lián)網(wǎng)UI設計人才設立了UI/UE設計學院及線下服務中心，提供各種學習資源和支持，包括：

　現(xiàn)場面授課程

　在線直播課程

　錄播視頻課程

　案例素材下載

　學習交流社區(qū)

　作業(yè)提交批改系統(tǒng)

　QQ討論組（技術、就業(yè)、生活）

以上所有資源請訪問課工場UI/UE學院：kgc.cn/uiue。

■ 本套教材特點

（1）課程高端、實用——拒絕培養(yǎng)傳統(tǒng)美工。

　培養(yǎng)符合“互聯(lián)網(wǎng)+”時代需求的高端UI設計人才，包括移動UI設計師、網(wǎng)頁UI設計師、平面UI設計師。

　除UI設計師所必須具備的技能外，本課程還涵蓋網(wǎng)絡營銷推廣內容，包括：網(wǎng)絡營銷基本常識、符合SEO標準的網(wǎng)站設計、Landing Page設計優(yōu)化、營銷型企業(yè)網(wǎng)站設計等。

　注重培養(yǎng)產(chǎn)品意識和用戶體驗意識，包括電商網(wǎng)站設計、店鋪設計、用戶體驗、交互設計等。

　學習W3C相關標準和設計規(guī)范，包括HTML5/CSS3、移動端Android/iOS相關設計規(guī)范等內容。

（2）真實商業(yè)項目驅動——行業(yè)知識、專業(yè)設計一個也不能少。

　與知名4A公司合作，設計開發(fā)項目課程。

　幾十個實訓項目，涵蓋電商、金融、教育、旅游、游戲等行業(yè)。

　不僅注重商業(yè)項目實訓的流程和規(guī)范，還傳遞行業(yè)知識和業(yè)務需求。

（3）更時尚的二維碼學習體驗——傳統(tǒng)紙質教材學習方式的革命。

　每章提供二維碼掃描，可以直接觀看相關視頻講解和案例效果。

　課工場UI/UE學院（kgc.cn）開辟教材配套版塊，提供素材下載、學習社區(qū)等豐富的在線學習資源。

■ 讀者對象

（1）初學者：本套教材將幫助你快速進入互聯(lián)網(wǎng)UI設計行業(yè)，從零開始，逐步成長為專業(yè)UI設計師。

（2）設計師：本套教材將帶你進行全面、系統(tǒng)的互聯(lián)網(wǎng)UI設計學習，傳遞最全面、科學的設計理論，提供實用的設計技巧和項目經(jīng)驗，幫助你向互聯(lián)網(wǎng)方向迅速轉型，拓寬設計業(yè)務范圍。

課工場出品（kgc.cn）

前言
課程設計說明
關于引用作品的版權聲明
   初識HTML5
本章簡介 2
理論講解 2
1.1 網(wǎng)站開發(fā)流程及網(wǎng)頁基本結構 2
1.1.1　“互聯(lián)網(wǎng)+”時代的網(wǎng)站開發(fā)流程 2
1.1.2　網(wǎng)頁的基本結構 3
1.2 HTML5概述 5
1.2.1 什么是HTML 5
1.2.2 HTML5的優(yōu)勢 6
1.2.3 HTML5文檔的基本結構 6
1.2.4 HTML5代碼編輯工具 7
1.2.5 網(wǎng)頁基本信息 9
1.3 基本HTML5標簽及網(wǎng)站SEO應用 11
1.3.1 標題標簽 11
1.3.2 段落標簽和換行標簽 13
1.3.3 圖像標簽 14
1.3.4 鏈接標簽 16
實戰(zhàn)案例 23
本章總結 26
本章作業(yè) 27
    HTML5的高級標簽
本章簡介 30
理論講解 30
2.1 列表 30
2.1.1 列表簡介 30
2.1.2 列表的分類 31
2.1.3 列表的應用 32
2.2 表格 37
2.2.1 為什么使用表格 37
2.2.2 表格的基本結構 38
2.2.3　表格的基本語法 38
2.2.4　表格的對齊方式 40
2.3 表單 41
2.3.1 表單的內容 41
2.3.2 表單標簽及其屬性 42
2.3.3 表單元素及格式 44
實戰(zhàn)案例 56
本章總結 64
本章作業(yè) 65
    CSS3樣式及UI設計FAQ
本章簡介 70
理論講解 70
3.1　百度簡介 70
3.1.1　CSS3簡介 71
3.1.2　在Dreamweaver中創(chuàng)建CSS3 71
3.1.3　CSS3樣式 73
3.1.4　字體樣式 76
3.1.5　水平對齊方式 82
3.1.6　制作百度簡介頁面 83
3.2　當當網(wǎng)首頁　　 90
3.2.1　背景顏色 90
3.2.2　背景圖像 91
3.2.3　制作當當網(wǎng)首頁 95
實戰(zhàn)案例 102
本章總結 105
本章作業(yè) 106
    盒子模型及UI設計FAQ
本章簡介 110
理論講解 110
4.1　主題相冊　　 110
4.1.1　什么是盒子模型 111
4.1.2　盒子模型屬性 112
4.1.3　盒子模型尺寸 121
4.1.4　制作主題相冊頁面 122
4.2　騰訊網(wǎng)站導航　　 127
4.2.1　標準文檔流 128
4.2.2　display屬性 130
4.2.3　制作騰訊網(wǎng)站導航頁面 133
實戰(zhàn)案例 139
本章總結 148
本章作業(yè) 149
    HTML5/CSS3標準化布局
本章簡介 154
理論講解 154
5.1　CSS3排版觀念 155
5.2 基本的DIV+CSS3布局 157
5.3 自動居中的布局 159
5.4　“1-2-1”固定寬度布局 160
5.5　HTML5布局的新方法 163
5.6　制作QQ積分頁面 165
實戰(zhàn)案例 169
本章總結 172
本章作業(yè) 173
    列表、定位樣式及UI設計FAQ
本章簡介 176
理論講解 176
6.1　商品分類頁面 176
6.1.1 list-style-type 177
6.1.2 list-style-image 177
6.1.3 list-style-position 177
6.1.4 list-style 178
6.2　北大青鳥首頁 179
6.2.1 z-index屬性 180
6.2.2 制作北大青鳥網(wǎng)站下拉列表導航菜單頁面 182
實戰(zhàn)案例 185
本章總結 191
本章作業(yè) 192
    網(wǎng)站SEO優(yōu)化及jQuery交互設計
本章簡介 196
理論講解 196
7.1 學習任務   196
7.2 自學內容 197
本章總結 198
本章作業(yè) 199

1. Python程序設計案例教程（微課版） [主編　石利平　田輝平　余以勝]
2. Java面向對象程序設計 [主編 姜春磊 陳虹潔]
3. C語言程序設計實驗指導與實訓（第二版） [主編 倪燃]
4. Python程序設計及實踐教程 [肖朝暉]
5. C語言程序設計 [魏琴 劉祖珉 趙仕波 肖陽春]
6. C語言程序設計實驗教程 [張小剛 司春景]
7. 電氣控制與PLC程序設計（第二版） [胡冠山]
8. Java Web項目化設計實踐教程 [邱云 曾陳萍]
9. C語言程序設計（第三版） [主編 丁紅 王立新 蔡開立]
10. Python數(shù)據(jù)分析 [主編　馮志輝　趙磊　李放]
11. Python程序設計與應用（第二版） [主編 張廣淵]
12. C程序設計實踐教程 [劉衛(wèi)國]
13. C程序設計（慕課版） [劉衛(wèi)國]
14. 程序設計基礎實踐教程（C/C++語言版） [張桂芬 葛麗娜]
15. C++案例項目精講 [主編 楊國興]
16. SwiftUI完全開發(fā) [李智威 著]
17. MySQL數(shù)據(jù)庫項目式教程 [陳亞峰]
18. C語言程序設計習題與實驗指導（第二版） [主編 甄增榮 張賓]
19. C語言程序設計（第二版） [主編 甄增榮 田云霞]
20. Unity3D虛擬現(xiàn)實應用開發(fā)實踐 [主 編 劉龍]
21. Python程序設計 [主編 姜春磊 陳虹潔]
22. C語言程序設計實踐教程（活頁式） [主編 鄭茵 陳巍 滕泓虬]
23. 面向對象程序設計 [主編 張勇 張平華 趙小龍]
24. Python程序設計基礎及實戰(zhàn) [主編　劉健]
25. C語言程序設計 [姜雪]
26. Python程序設計實踐教程 [王鶴琴 蔡正保]
27. C++程序設計實踐教程（第三版） [主編 劉衛(wèi)國 曹岳輝]
28. C++程序設計（第三版） [主編 曹岳輝 劉衛(wèi)國]
29. C語言程序設計項目化教程（活頁式） [主編 張利華 潘曉利]
30. 機器人流程自動化（RPA）實戰(zhàn)——基于UiPath [主編　金鑫]