HTML5与CSS3项目实战

教材名称：	HTML5与CSS3项目实战
ISBN号：	978-7-89436-478-4	作者：	刘冰月
字数：	418千字	规格：	16开
印制时间：	2017-01-01	出版日期：	2017-01-01
定价：	35.00 元	样章下载：	样章.pdf
购买地址：

1.适用对象

本教材适用于计算机专业的“人机交互设计”“人机交互设计高级应用”课程教学。

2.具备的知识和能力基础

本教材适用于HTML、CSS和JavaScript的零基础初学者以及具备基本的网页开发能力、了解HTML和CSS基本语法、需要进一步深入学习HTML5和CSS3新特性的前端页面开发人员。使用本教材的读者,需要具备最基本的计算机基础知识和计算机操作能力,同时也需具备一定的网页基础知识理解能力。希望从事前端页面开发工作的所有学生均可使用本教材进行学习。

3.预期学习效果

学习本门课程之后,将为后续的课程奠定基本的Web页面开发基础能力。通过学习,应了解人机交互设计涉及的认知、社会和情感问题,探讨如何应用各种分析、设计、评估和原型制作技术,开发成功的交互式产品;熟练使用CSS、JavaScript、HTML5等技术完成界面设计和制作,熟悉基于DIV+CSS架构的页面,能够优化用户视觉体验及完善页面设计流程,对网站的易用性、可用性及用户体验有深刻理解;掌握人机交互工程设计原则,掌握软件用户界面设计技术。

本教材遵循CDIO 教学理念和工程教育思想,坚持以案例为引导,以项目为载体,用项目驱动教学的模式,在每一章每一节均使用实际的单元项目案例来讲解知识点,基于构思、设计、实施、运行的背景,通过实现具体的案例来对其中涉及的知识点进行学习和强化,并在知识运用部分进行知识点的扩展使用和技能提升训练。读者在案例分析、项目实践的过程中,能够提高对知识和技术掌握运用的熟练程度以及提升创新实践能力。本教材共分如下：

第1章是HTML基础,主要介绍HTML的基本语法、常用标签和重点元素的使用。

第2章是CSS基础,主要介绍CSS的基本语法、选择符的作用和使用、常用属性的使用和样式的定义。

第3章是CSS盒子模型,主要介绍CSS盒子模型的常用属性、浮动定位和position定位、display属性的使用。

第4章是CSS3动画,主要介绍CSS3中新引入的动画效果的实现,包括Animation动画实现和Transition过渡效果实现。

第5章是JavaScript基础,主要介绍JavaScript的基本语法、JavaScript函数定义、事件和事件处理、内置对象、BOM 对象以及DOM 对象的常用属性和方法的使用。

第6章是HTML5新增元素和属性,主要介绍了HTML5中新增的元素和属性的含义和使用,包括新增的包含语义信息的文档结构元素和新增的表单元素。

第7章是Canvas画布,主要介绍HTML5 中新增的Canvas元素的使用,包括利用Canvas绘制基本图形、绘制图像以及Canvas和基本事件处理。

第8章是本地存储,主要介绍HTML5中新增的本地存储技术,包括WebStorage和本地数据库的使用。

第9章是网站综合设计,主要介绍一个综合完整的咖啡销售网站的页面设计和开发,使用之前所学的HTML、CSS和JavaScript以及HTML5和CSS3的新特性等技术,进行一个较为综合的Web网站页面设计开发。

第10章是人机交互设计,主要介绍人机交互设计的具体工作,讲解设计的准则与规范,介绍软件产品交互设计的标准设计流程和开发界面原型的设计工具。

本教材重点介绍了HTML、CSS和JavaScript三种技术,它们之间的关系是:HTML主要负责定义Web页面结构,CSS主要负责修饰和格式化页面效果,JavaScript是一种解释型脚本语言,主要负责为Web页面添加动态功能和交互行为,提供更美观流畅和丰富的浏览效果。前端页面开发主要涉及的技术就是以上三种,本教材将着重介绍这三种技术的基本语法、常用标签使用和各种新特性的应用。

咖啡商城项目导引…………………………………………………………………………… 1

第1章 HTML基础……………………………………………………………………… 5

1.1 认识HTML ………………………………………………………………………… 5

1.1.1 HTML基本语法…………………………………………………………… 6

1.1.2 HTML文档基本结构……………………………………………………… 6

1.1.3 项目:第一个HTML页面………………………………………………… 7

1.2 HTML常用标签…………………………………………………………………… 9

1.2.1 文本与标签………………………………………………………………… 9

1.2.2 项目:介绍我的学校1 …………………………………………………… 13

1.3 表格元素…………………………………………………………………………… 15

1.3.1 表格标签…………………………………………………………………… 15

1.3.2 项目:图书统计表………………………………………………………… 16

1.4 表单元素…………………………………………………………………………… 18

1.4.1 常用表单元素……………………………………………………………… 18

1.4.2 项目:个人信息统计表…………………………………………………… 21

1.5 咖啡商城———商品分类模块……………………………………………………… 24

1.5.1 项目说明…………………………………………………………………… 24

1.5.2 项目设计…………………………………………………………………… 25

1.5.3 项目实施…………………………………………………………………… 25

习题……………………………………………………………………………… 27

第2章 CSS基础………………………………………………………………………… 33

2.1 CSS基本语法……………………………………………………………………… 33

2.1.1 CSS语句格式……………………………………………………………… 34

2.1.2 CSS选择符………………………………………………………………… 35

2.1.3 项目:世界杯胜负榜……………………………………………………… 40

2.2 文本和字体相关属性……………………………………………………………… 43

2.2.1 字体属性…………………………………………………………………… 43

2.2.2 文本属性…………………………………………………………………… 45

2.2.3 项目:介绍我的学校2 …………………………………………………… 47

2.3 背景和边框相关属性……………………………………………………………… 49

2.3.1 边框………………………………………………………………………… 49

2.3.2 边框阴影…………………………………………………………………… 51

2.3.3 圆角边框…………………………………………………………………… 52

2.3.4 图形边框…………………………………………………………………… 52

2.3.5 背景………………………………………………………………………… 54

2.3.6 项目:设计Logo…………………………………………………………… 56

2.4 咖啡商城———网站页脚模块实现………………………………………………… 58

2.4.1 项目说明…………………………………………………………………… 58

2.4.2 项目设计…………………………………………………………………… 58

2.4.3 项目实施…………………………………………………………………… 59

习题……………………………………………………………………………… 60

第3章 CSS盒子模型…………………………………………………………………… 64

3.1 盒子相关属性……………………………………………………………………… 64

3.1.1 内边距和外边距…………………………………………………………… 65

3.1.2 项目:盒子模型…………………………………………………………… 69

3.2 浮动定位…………………………………………………………………………… 70

3.2.1 float属性…………………………………………………………………… 70

3.2.2 clear属性………………………………………………………………… 72

3.2.3 项目:三个相框…………………………………………………………… 73

3.3 位置定位…………………………………………………………………………… 74

3.3.1 position属性……………………………………………………………… 74

3.3.2 项目:照片墙……………………………………………………………… 76

3.4 隐藏与显示………………………………………………………………………… 78

3.4.1 visibility属性……………………………………………………………… 78

3.4.2 z-index属性……………………………………………………………… 79

3.4.3 display属性……………………………………………………………… 80

3.4.4 项目:悬浮菜单…………………………………………………………… 81

3.5 咖啡商城———商品分类模块美化效果实现……………………………………… 82

3.5.1 项目说明…………………………………………………………………… 83

3.5.2 项目设计…………………………………………………………………… 83

3.5.3 项目实施…………………………………………………………………… 83

习题……………………………………………………………………………… 86

第4章 CSS3动画………………………………………………………………………… 91

4.1 Animation动画…………………………………………………………………… 91

4.1.1 定义关键帧………………………………………………………………… 92

4.1.2 绑定动画…………………………………………………………………… 93

4.1.3 项目:跑动的汽车………………………………………………………… 94

4.2 Transition动画…………………………………………………………………… 96

4.2.1 Transition过渡…………………………………………………………… 96

4.2.2 项目:页面切换效果……………………………………………………… 97

4.3 咖啡商城———商品介绍模块实现……………………………………………… 102

4.3.1 项目说明………………………………………………………………… 102

4.3.2 项目设计………………………………………………………………… 103

4.3.3 项目实施………………………………………………………………… 103

习题……………………………………………………………………………… 105

第5章 JavaScript基础………………………………………………………………… 106

5.1 JavaScript语法介绍……………………………………………………………… 106

5.1.1 JavaScript简介…………………………………………………………… 107

5.1.2 JavaScript基本语法……………………………………………………… 108

5.1.3 项目:第一个JavaScript程序…………………………………………… 111

5.2 JavaScript函数…………………………………………………………………… 112

5.2.1 JavaScript函数定义……………………………………………………… 112

5.2.2 项目:点击我……………………………………………………………… 113

5.3 事件和事件处理………………………………………………………………… 115

5.3.1 JavaScript常用事件……………………………………………………… 115

5.3.2 项目:敏感的兔子………………………………………………………… 117

5.4 内置对象………………………………………………………………………… 119

5.4.1 认识JavaScript内置对象……………………………………………… 119

5.4.2 Math对象………………………………………………………………… 120

5.4.3 Date对象………………………………………………………………… 121

5.4.4 String对象……………………………………………………………… 123

5.4.5 Array对象……………………………………………………………… 125

5.4.6 项目:数字电子时钟……………………………………………………… 126

5.5 BOM 对象………………………………………………………………………… 127

5.5.1 认识BOM 对象………………………………………………………… 127

5.5.2 window对象……………………………………………………………… 129

5.5.3 history对象……………………………………………………………… 130

5.5.4 location对象……………………………………………………………… 131

5.5.5 screen对象……………………………………………………………… 131

5.5.6 document对象…………………………………………………………… 131

5.5.7 项目:打开新窗口………………………………………………………… 131

5.6 DOM 对象………………………………………………………………………… 133

5.6.1 认识DOM 对象………………………………………………………… 133

5.6.2 HTMLDOMDocument对象………………………………………… 133

5.6.3 HTMLDOMEvent对象……………………………………………… 137

5.6.4 HTMLDOMElement对象…………………………………………… 138

5.6.5 HTMLDOM Attribute对象…………………………………………… 139

5.6.6 项目:诗词鉴赏…………………………………………………………… 139

5.7 咖啡商城———购物车模块实现………………………………………………… 142

5.7.1 项目说明………………………………………………………………… 142

5.7.2 项目设计………………………………………………………………… 143

5.7.3 项目实施………………………………………………………………… 144

习题……………………………………………………………………………… 145

第6章 HTML5新增元素和属性…………………………………………………… 152

6.1 新增文档结构元素……………………………………………………………… 152

6.1.1 认识HTML5 …………………………………………………………… 153

6.1.2 HTML5页面结构……………………………………………………… 153

6.1.3 HTML5主体结构元素………………………………………………… 154

6.1.4 HTML5非主体结构元素……………………………………………… 156

6.1.5 项目:新闻评论网………………………………………………………… 157

6.2 新增表单元素…………………………………………………………………… 160

6.2.1 HTML5表单新功能…………………………………………………… 160

6.2.2 HTML5表单新的输入类型…………………………………………… 160

6.2.3 HTML5表单新的属性………………………………………………… 162

6.2.4 项目:订货人个人信息页………………………………………………… 163

6.3 咖啡商城———用户注册模块实现……………………………………………… 165

6.3.1 项目说明………………………………………………………………… 165

6.3.2 项目设计………………………………………………………………… 166

6.3.3 项目实施………………………………………………………………… 166

习题……………………………………………………………………………… 168

第7章 Canvas画布…………………………………………………………………… 171

7.1 绘制基本图形…………………………………………………………………… 171

7.1.1 认识Canvas……………………………………………………………… 172

7.1.2 Canvas的常用属性和方法……………………………………………… 172

7.1.3 使用Canvas绘图对象绘制基本图形…………………………………… 173

7.1.4 项目:来自星星的它……………………………………………………… 175

7.2 绘制图像………………………………………………………………………… 180

7.2.1 使用Canvas绘图对象裁剪图像………………………………………… 180

7.2.2 项目:放大镜……………………………………………………………… 182

7.2.3 项目:跳动的心…………………………………………………………… 184

7.2.4 项目:鼠标画板…………………………………………………………… 186

7.3 咖啡商城———商品详情模块实现……………………………………………… 189

7.3.1 项目说明………………………………………………………………… 189

7.3.2 项目设计………………………………………………………………… 190

7.3.3 项目实施………………………………………………………………… 190

习题……………………………………………………………………………… 192

第8章本地存储………………………………………………………………………… 195

8.1 WebStorage ……………………………………………………………………… 195

8.1.1 WebStorage的常用属性和方法……………………………………… 196

8.1.2 项目:简易购物车………………………………………………………… 196

8.2 本地数据库……………………………………………………………………… 202

8.2.1 本地数据库访问………………………………………………………… 202

8.2.2 项目:简易留言本………………………………………………………… 204

8.3 咖啡商城———购物车本地存储模块实现……………………………………… 210

8.3.1 项目说明………………………………………………………………… 210

8.3.2 项目设计………………………………………………………………… 211

8.3.3 项目实施………………………………………………………………… 212

习题……………………………………………………………………………… 215

第9章网站综合设计………………………………………………………………… 218

9.1 项目构思………………………………………………………………………… 218

9.2 UI设计…………………………………………………………………………… 220

9.3 网页制作………………………………………………………………………… 226

第10章人机交互设计………………………………………………………………… 234

10.1 什么是人机交互………………………………………………………………… 234

10.2 人机交互设计的现状…………………………………………………………… 235

10.3 交互设计师的具体工作………………………………………………………… 236

10.4 交互设计准则与规范…………………………………………………………… 237

10.5 用户需求分析…………………………………………………………………… 240

10.5.1 谁是用户………………………………………………………………… 241

10.5.2 需求的不同类型………………………………………………………… 241

10.6 概念设计………………………………………………………………………… 243

10.6.1 采用何种交互模式……………………………………………………… 243

10.6.2 是否存在合适的界面比拟……………………………………………… 244

10.6.3 选用何种交互范型……………………………………………………… 245

10.7 物理设计………………………………………………………………………… 246

10.7.1 菜单设计………………………………………………………………… 246

10.7.2 图标设计………………………………………………………………… 247

10.7.3 屏幕设计………………………………………………………………… 248

10.8 制作软件界面原型……………………………………………………………… 249

10.9 用户测试和评估………………………………………………………………… 250

10.10 交互设计中的常见问题……………………………………………………… 252

习题……………………………………………………………………………… 253

附录1 学习知识点及能力要点……………………………………………………… 256

附录2 RGB颜色对照表……………………………………………………………… 258

参考文献…………………………………………………………………………………… 263

本教材内容较为系统全面,在技术上引入了HTML和CSS最新版本内容,详细介绍了HTML5和CSS3的各项新功能、新特性。所有知识点都紧跟HTML5与CSS3的最新发展动态,包括HTML5新引入的元素、属性介绍、Canvas介绍、本地存储等,以及CSS3的新属性介绍、CSS特效和动画制作、盒子模型、3D变换等内容。

本教材以项目实战为主,以项目为导引,包含27个单元项目案例,每个单元知识点都配以精心设计的项目案例来讲解,并有扩展运用的部分。在每一章结尾,使用本章知识点完成课程综合项目的一个模块,便于读者循序渐进地完成最后的综合项目。最后的综合项目案例是一个较完整的综合性Web界面开发项目,体现了用HTML5与CSS3开发Web页面的思维和方法。本教材可以满足初学者全面而系统地学习理论知识的需求,还能满足其充分实践的需求。

本教材针对教师授课需求和学生学习需求,提供完整的立体化教学解决方案。教材从需要讲授的主体知识出发,提供配套的项目案例及案例分析、案例源代码、课后习题、案例库、课件、课程辅助教学网站等多种教学资源,以最大程度地满足授课需求,提高教学和学习质量,促进教学改革的实施。