图书简介:
目录
第一单元 Web基础知识
任务1 搭建开发环境 1
1.1 知识准备 1
1.1.1 Web与Internet 1
1.1.2 Web的工作原理 2
1.1.3 Web页的类型 3
1.1.4 HTML5概述 3
1.2 实战演练——搭建开发环境 3
1.2.1 网页编辑软件的安装 3
1.2.2 浏览器的安装 5
1.3 强化训练——创建第一个HTML5页面 5
1.3.1 创建和管理站点 5
1.3.2 创建和保存HTML5文档 7
1.4 课后实训 8
第二单元 HTML5语言基础
任务2 文字与段落排版 10
2.1 知识准备 10
2.1.1 HTML5文档格式 10
2.1.2 标签的属性 11
2.1.3 文本标签 12
2.1.4 分隔标签 14
2.1.5 序列标签 16
2.2 实战演练——制作“科技馆参观须知”网页 18
2.2.1 网页效果图 18
2.2.2 制作过程 19
2.2.3 代码分析 19
2.3 强化训练——制作“我家菜馆”点菜单网页 20
2.3.1 网页效果图 20
2.3.2 制作过程 20
2.3.3 代码分析 21
2.4 课后实训 21
任务3 图像和超链接 22
3.1 知识准备 22
3.1.1 图像标签 22
3.1.2 绝对路径和相对路径 23
3.1.3 超链接标签 24
3.1.4 锚点链接 25
3.2 实战演练——制作“网页技术介绍”网页 27
3.2.1 网页效果图 27
3.2.2 制作过程 27
3.2.3 代码分析 29
3.3 强化训练——制作“文章故事网”网页 29
3.3.1 网页效果图 29
3.3.2 制作过程 30
3.3.3 代码分析 31
3.4 课后实训 31
第三单元 HTML5新增标签及属性
任务4 结构标签和分组标签 32
4.1 知识准备 32
4.1.1 结构标签 32
4.1.2 分组标签 39
4.2 实战演练——制作“唐诗欣赏”网页 41
4.2.1 网页效果图 41
4.2.2 制作过程 41
4.2.3 代码分析 44
4.3 强化训练——制作“温州地标性建筑”网页 45
4.3.1 网页效果图 45
4.3.2 制作过程 45
4.3.3 代码分析 47
4.4 课后实训 48
任务5 页面交互标签、层次语义标签和全局属性 48
5.1 知识准备 48
5.1.1 页面交互标签 48
5.1.2 层次语义标签 51
5.1.3 全局属性 53
5.2 实战演练——制作“书评网”网页 56
5.2.1 网页效果图 56
5.2.2 制作过程 57
5.2.3 代码分析 60
5.3 强化训练——制作“面试应答技巧”网页 60
5.3.1 网页效果图 60
5.3.2 制作过程 61
5.3.3 代码分析 63
5.4 课后实训 63
第四单元 CSS3基础
任务6 标记选择器和类选择器 65
6.1 知识准备 65
6.1.1 CSS简介 65
6.1.2 CSS样式规则 65
6.1.3 CSS样式的引入 66
6.1.4 CSS样式的优先级 68
6.1.5 标记选择器 68
6.1.6 类选择器 69
6.2 实战演练——制作“美化文章”网页 70
6.2.1 网页效果图 70
6.2.2 制作过程 70
6.2.3 代码分析 72
6.3 强化训练——制作“图文混排”网页 72
6.3.1 网页效果图 72
6.3.2 制作过程 73
6.3.3 代码分析 74
6.4 课后实训 75
任务7 链接伪类和CSS样式面板 75
7.1 知识准备 75
7.1.1 链接伪类 75
7.1.2 CSS样式面板 77
7.2 实战演练——制作“散文欣赏”网页 77
7.2.1 网页效果图 77
7.2.2 制作过程 78
7.2.3 代码分析 85
7.3 强化训练——制作“热点新闻”列表 85
7.3.1 网页效果图 85
7.3.2 制作过程 86
7.3.3 代码分析 91
7.4 课后实训 91
任务8 id选择器、伪选择器和表格样式 92
8.1 知识准备 92
8.1.1 id选择器 92
8.1.2 伪选择器 93
8.1.3 表格 94
8.2 实战演练——制作“鞋子尺码对照单”网页 96
8.2.1 网页效果图 96
8.2.2 制作过程 96
8.2.3 代码分析 98
8.3 强化训练——制作“婴儿身高体重标准表”网页 99
8.3.1 网页效果图 99
8.3.2 制作过程 100
8.3.3 代码分析 102
8.4 课后实训 103
任务9 复合选择器和通配符选择器 103
9.1 知识准备 103
9.1.1 复合选择器 103
9.1.2 通配符选择器 106
9.1.3 同时应用多个样式 106
9.2 实战演练——制作“寓言故事”网页 107
9.2.1 网页效果图 107
9.2.2 制作过程 108
9.2.3 代码分析 110
9.3 强化训练——制作“诗词欣赏”网页 110
9.3.1 网页效果图 110
9.3.2 制作过程 111
9.3.3 代码分析 116
9.4 课后实训 116
第五单元 盒 子 模 型
任务10 盒子模型及应用 119
10.1 知识准备 119
10.1.1 盒子模型的概念 119
10.1.2 边框的设置 120
10.1.3 内边距的设置 125
10.1.4 外边距的设置 126
10.2 实战演练——制作“古诗文欣赏”网页 128
10.2.1 网页效果图 128
10.2.2 制作过程 128
10.2.3 代码分析 129
10.3 强化训练——制作“散文赏析”网页 130
10.3.1 网页效果图 130
10.3.2 制作过程 130
10.3.3 代码分析 132
10.4 课后实训 133
任务11 元素的浮动 133
11.1 知识准备 133
11.1.1 元素的类型及转换 133
11.1.2 overflow属性 135
11.1.3 元素的浮动 136
11.1.4 清除浮动 139
11.2 实战演练——制作“网站导航条”网页 144
11.2.1 网页效果图 144
11.2.2 制作过程 145
11.2.3 代码分析 146
11.3 强化训练——制作“浪漫花语百科网”网页 146
11.3.1 网页效果图 146
11.3.2 制作过程 146
11.3.3 代码分析 150
11.4 课后实训 151
任务12 元素的定位 152
12.1 知识准备 152
12.1.1 元素的定位模式与边偏移 152
12.1.2 静态定位 152
12.1.3 相对定位 152
12.1.4 绝对定位 154
12.1.5 固定定位 156
12.1.6 z-index层叠等级属性 156
12.2 实战演练——制作“旅游景点推荐网”banner 157
12.2.1 网页效果图 157
12.2.2 制作过程 157
12.2.3 代码分析 159
12.3 强化训练——制作“个人博客首页”网页 160
12.3.1 网页效果图 160
12.3.2 制作过程 160
12.3.3 代码分析 163
12.4 课后实训 164
任务13 阴影与渐变属性 164
13.1 知识准备 164
13.1.1 box-shadow属性 164
13.1.2 box-sizing属性 165
13.1.3 线性渐变 167
13.1.4 径向渐变 168
13.1.5 重复渐变 168
13.1.6 Web字体图标 170
13.2 实战演练——制作“网站广告栏”网页 171
13.2.1 网页效果图 171
13.2.2 制作过程 171
13.2.3 代码分析 173
13.3 强化训练——制作“旅游攻略网”网页 174
13.3.1 网页效果图 174
13.3.2 制作过程 175
13.3.3 代码分析 179
13.4 课后实训 181
任务14 过渡与变形属性 181
14.1 知识准备 181
14.1.1 过渡属性 181
14.1.2 变形属性 183
14.2 实战演练——制作“产品展示”网页 184
14.2.1 网页效果图 184
14.2.2 制作过程 185
14.2.3 代码分析 186
14.3 强化训练——制作“商品评论”网页 187
14.3.1 网页效果图 187
14.3.2 制作过程 187
14.3.3 代码分析 191
14.4 课后实训 191
第六单元 HTML5表单的应用
任务15 表单与input元素 194
15.1 知识准备 194
15.1.1 认识表单 194
15.1.2 创建表单 194
15.1.3 input元素及属性 195
15.2 实战演练——制作“登录界面”网页 196
15.2.1 网页效果图 196
15.2.2 制作过程 196
15.2.3 代码分析 198
15.3 强化训练——制作“简历”表单 199
15.3.1 网页效果图 199
15.3.2 制作过程 200
15.3.3 代码分析 203
15.4 课后实训 204
任务16 其他表单元素与表单验证 204
16.1 知识准备 204
16.1.1 其他表单元素 204
16.1.2 表单验证方法 207
16.1.3 正则表达式 208
16.2 实战演练——制作“商品订购”表单 210
16.2.1 网页效果图 210
16.2.2 制作过程 210
16.2.3 代码分析 213
16.3 强化训练——制作“会员注册”表单 213
16.3.1 网页效果图 213
16.3.2 制作过程 214
16.3.3 代码分析 216
16.4 课后实训 217
第七单元 网页多媒体
任务17 视频与音频 218
17.1 知识准备 218
17.1.1 嵌入视频 218
17.1.2 嵌入音频 219
17.1.3 <source>标签 219
17.1.4 视频与音频的DOM操作 220
17.2 实战演练——制作“音乐播放器”网页 221
17.2.1 网页效果图 221
17.2.2 制作过程 221
17.2.3 代码分析 223
17.3 强化训练——制作“视频播放”网页 223
17.3.1 网页效果图 223
17.3.2 制作过程 224
17.3.3 代码分析 225
17.4 课后实训 225
第八单元 JavaScript基础
任务18 JavaScript的应用 226
18.1 知识准备 226
18.1.1 JavaScript简介 226
18.1.2 JavaScript语言基础 228
18.1.3 JavaScript函数 230
18.1.4 事件及事件驱动 231
18.1.5 JavaScript对象 233
18.1.6 BOM对象 238
18.1.7 DOM对象 240
18.2 实战演练——制作“商品精选模块”网页 243
18.2.1 网页效果图 243
18.2.2 制作过程 243
18.2.3 代码分析 245
18.3 强化训练——制作“焦点图广告”网页 246
18.3.1 网页效果图 246
18.3.2 制作过程 246
18.3.3 代码分析 250
18.4 课后实训 251
展开
近年来,Web前端开发迅速崛起,网页标准化的设计方式正逐渐取代传统的布局方式,Web前端开发的最大特点就是采用HTML5+CSS3+JavaScript技术,将网页内容、外观样式及动态效果彻底分离,从而减少页面代码、提高网速,便于分工设计和代码重用。本书以初学者的角度,精心设计大量的实用案例,贯彻“HTML5负责内容结构,CSS3负责外观样式,JavaScript负责动态效果”的网页设计思想,深入浅出地介绍了Web前端核心技术。
本书采用“任务驱动、案例教学、过程指导、探究实践”的编写模式,通过8个单元、18个任务、18个实战演练、18个强化训练和18个课后实训,精心设计相关实例,模拟知识点的实际应用,每个项目任务又以“知识准备→实战演练→强化训练→课后实训”为主线,讲授知识与技能,使学生置身于工作情境中,进一步培养学生的工作能力。
本书的主要内容如下。
第一单元:Web基础知识。通过1个任务,即“搭建开发环境”,介绍Web基础知识和HTML5的相关内容。
第二单元:HTML5语言基础。通过2个任务,即“文字与段落排版”和“图像和超链接”,介绍如何使用HTML5的标签及属性定义网页内容结构。
第三单元:HTML5新增标签及属性。通过2个任务,即“结构标签和分组标签”和“页面交互标签、层次语义标签和全局属性”,介绍HTML5的新增标签及属性。
第四单元:CSS3基础。通过4个任务,即“标记选择器和类选择器”“链接伪类和CSS样式面板”“id选择器、伪选择器和表格样式”“复合选择器和通配符选择器”,详细介绍如何使用CSS3定义网页样式。
第五单元:盒子模型。通过5个任务,即“盒子模型及应用”“元素的浮动”“元素的定位”“阴影与渐变属性”“过渡与变形属性”,详细介绍如何使用DIV+CSS制作网页的布局结构,并设计更丰富的网页布局。
第六单元:HTML5表单的应用。通过2个任务,即“表单与input元素”和“其他表单元素与表单验证”,介绍表单的应用方法。
第七单元:网页多媒体。通过1个任务,即“视频与音频”,介绍如何在网页中插入多媒体元素。
第八单元:JavaScript基础。通过1个任务,即“JavaScript的应用”,介绍JavaScript的应用基础。
本书注重合理安排内容结构,具有系统全面、条理清晰、图文并茂、通俗易懂,实用性强的特点。本书既可以作为高等院校、高等职业院校“网页设计与制作”课程的教材,也可以作为前端与移动开发的培训教材,还可以供从事网页制作、网站开发、网页编程和美工设计等方面工作的人员参考。
本书是浙江安防职业技术学院教材建设项目成果,由浙江安防职业技术学院汪婵婵、温州职业技术学院徐兴雷担任主编,浙江安防职业技术学院邵佳靓、陈汉伟、朱莉莉、张莉担任副主编。其中,汪婵婵负责编写本书的第一单元~第五单元,徐兴雷负责编写本书的第六单元~第八单元。
本书配有微课视频、源代码、电子课件、教案等教学资源,读者可以登录华信教育资源网(www.hxedu.com.cn)免费注册后进行下载,也可以加入教材服务群(QQ579854494)获取资源,还可以使用手机等移动设备通过“云课堂智慧职教”App扫描本书封面的二维码,或者通过访问“智慧职教MOOC学院”网页,搜索“Web前端开发”或“汪婵婵”,加入在线课程。同时,所有教学资源在“浙江省高等学校精品在线开放课程共享平台”上实现共享,欢迎教师用户使用该平台进行线上线下混合式教学。如需帮助,请联系QQ401593624。
虽然我们精心组织,努力编写,但书中的疏漏和不妥之处在所难免,恳请各界专家和读者朋友不吝赐教、批评指正,意见和建议请反馈至编者的电子邮箱wang_chanchan@qq.com,我们将不胜感激。
汪婵婵
展开