HTML5+CSS3前端技术——UI设计师与开发人员合作秘籍

注重实用技能培养——打造“互联网+”UI 设计师 突出创意设计训练——授人以渔而不只是作品临摹

真实商业项目驱动——行业知识与专业设计相呼应 学习体验时尚前卫——传统教材与二维码革命性携手

随着移动互联技术的飞速发展，“互联网+”时代已经悄然到来，这自然催生了各行业、企业对UI设计人才的大量需求。与传统美工、设计人员相比，新“互联网+”时代对UI设计师提出了更高的要求，传统美工、设计人员已无法胜任。在这样的大环境下，这套“互联网UI设计师”系列教材应运而生，它旨在帮助读者朋友快速成长为符合“互联网+”时代企业需求的优秀UI设计师。

这套教材是由课工场（kgc.cn）的UI/UE教研团队研发的。课工场是北大青鸟集团下属企业北京课工场教育科技有限公司推出的互联网教育平台，专注于互联网企业各岗位人才的培养。平台汇聚了数百位来自知名培训机构、高校的顶级名师和互联网企业的行业专家，面向大学生以及需要“充电”的在职人员，针对与互联网相关的产品、设计、开发、运维、推广和运营等岗位，提供在线的直播和录播课程，并通过遍及全国的几十家线下服务中心提供现场面授以及多种形式的教学服务，且同步研发出版最新的课程教材。

课工场为培养互联网UI设计人才设立了UI/UE设计学院及线下服务中心，提供各种学习资源和支持，包括：

　现场面授课程

　在线直播课程

　录播视频课程

　案例素材下载

　学习交流社区

　作业提交批改系统

　QQ讨论组（技术、就业、生活）

以上所有资源请访问课工场UI/UE学院：kgc.cn/uiue。

■ 本套教材特点

（1）课程高端、实用——拒绝培养传统美工。

　培养符合“互联网+”时代需求的高端UI设计人才，包括移动UI设计师、网页UI设计师、平面UI设计师。

　除UI设计师所必须具备的技能外，本课程还涵盖网络营销推广内容，包括：网络营销基本常识、符合SEO标准的网站设计、Landing Page设计优化、营销型企业网站设计等。

　注重培养产品意识和用户体验意识，包括电商网站设计、店铺设计、用户体验、交互设计等。

　学习W3C相关标准和设计规范，包括HTML5/CSS3、移动端Android/iOS相关设计规范等内容。

（2）真实商业项目驱动——行业知识、专业设计一个也不能少。

　与知名4A公司合作，设计开发项目课程。

　几十个实训项目，涵盖电商、金融、教育、旅游、游戏等行业。

　不仅注重商业项目实训的流程和规范，还传递行业知识和业务需求。

（3）更时尚的二维码学习体验——传统纸质教材学习方式的革命。

　每章提供二维码扫描，可以直接观看相关视频讲解和案例效果。

　课工场UI/UE学院（kgc.cn）开辟教材配套版块，提供素材下载、学习社区等丰富的在线学习资源。

■ 读者对象

（1）初学者：本套教材将帮助你快速进入互联网UI设计行业，从零开始，逐步成长为专业UI设计师。

（2）设计师：本套教材将带你进行全面、系统的互联网UI设计学习，传递最全面、科学的设计理论，提供实用的设计技巧和项目经验，帮助你向互联网方向迅速转型，拓宽设计业务范围。

课工场出品（kgc.cn）

前言
课程设计说明
关于引用作品的版权声明
   初识HTML5
本章简介 2
理论讲解 2
1.1 网站开发流程及网页基本结构 2
1.1.1　“互联网+”时代的网站开发流程 2
1.1.2　网页的基本结构 3
1.2 HTML5概述 5
1.2.1 什么是HTML 5
1.2.2 HTML5的优势 6
1.2.3 HTML5文档的基本结构 6
1.2.4 HTML5代码编辑工具 7
1.2.5 网页基本信息 9
1.3 基本HTML5标签及网站SEO应用 11
1.3.1 标题标签 11
1.3.2 段落标签和换行标签 13
1.3.3 图像标签 14
1.3.4 链接标签 16
实战案例 23
本章总结 26
本章作业 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
实战案例 56
本章总结 64
本章作业 65
    CSS3样式及UI设计FAQ
本章简介 70
理论讲解 70
3.1　百度简介 70
3.1.1　CSS3简介 71
3.1.2　在Dreamweaver中创建CSS3 71
3.1.3　CSS3样式 73
3.1.4　字体样式 76
3.1.5　水平对齐方式 82
3.1.6　制作百度简介页面 83
3.2　当当网首页　　 90
3.2.1　背景颜色 90
3.2.2　背景图像 91
3.2.3　制作当当网首页 95
实战案例 102
本章总结 105
本章作业 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　腾讯网站导航　　 127
4.2.1　标准文档流 128
4.2.2　display属性 130
4.2.3　制作腾讯网站导航页面 133
实战案例 139
本章总结 148
本章作业 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
实战案例 169
本章总结 172
本章作业 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 制作北大青鸟网站下拉列表导航菜单页面 182
实战案例 185
本章总结 191
本章作业 192
    网站SEO优化及jQuery交互设计
本章简介 196
理论讲解 196
7.1 学习任务   196
7.2 自学内容 197
本章总结 198
本章作业 199

1. C程序设计实践教程 [刘卫国]
2. C程序设计（慕课版） [刘卫国]
3. 程序设计基础实践教程（C/C++语言版） [张桂芬 葛丽娜]
4. C++案例项目精讲 [主编 杨国兴]
5. SwiftUI完全开发 [李智威 著]
6. MySQL数据库项目式教程 [陈亚峰]
7. C语言程序设计习题与实验指导（第二版） [主编 甄增荣 张宾]
8. C语言程序设计（第二版） [主编 甄增荣 田云霞]
9. Unity3D虚拟现实应用开发实践 [主 编 刘龙]
10. Python程序设计 [主编 姜春磊 陈虹洁]
11. C语言程序设计实践教程（活页式） [主编 郑茵 陈巍 滕泓虬]
12. 面向对象程序设计 [主编 张勇 张平华 赵小龙]
13. Python程序设计基础及实战 [主编　刘健]
14. C语言程序设计 [姜雪]
15. Python程序设计实践教程 [王鹤琴 蔡正保]
16. C++程序设计实践教程（第三版） [主编 刘卫国 曹岳辉]
17. C++程序设计（第三版） [主编 曹岳辉 刘卫国]
18. C语言程序设计项目化教程（活页式） [主编 张利华 潘晓利]
19. 机器人流程自动化（RPA）实战——基于UiPath [主编　金鑫]
20. Python 语言程序设计实践指导 [主编　张双狮]
21. Python程序设计案例教程 [主编 毛锦庚 钟肖英 周贤来 ]
22. 基于.NET Core框架的分布式系统架构设计 [汤佳 著]
23. Python语言程序设计教程 [郭其标 房宜汕]
24. Python程序设计 [李国燕 王新强 刘佳 等编著]
25. Python程序设计项目化教程（活页式） [主编　卢凤伟]
26. Java编程基础案例式教程 [主编 陈艳华 唐春兰]
27. Python语言同步案例习题精解 [主编 肖朝晖]
28. Web用户界面设计与制作 [主编 赵娟]
29. Unity应用开发与实战（微课版） [主 编 程永恒]
30. PHP程序设计项目化教程 [主 编 杜海颖]