网页设计与制作(HTML5+CSS3+JavaScript第4版微课版工业和信息化十三五人才培养规划教材普通高等教育十一

第 1章 HTML5 基础．．．．．．．．．．．．．．．．．．． 1
1．1　什么是HTML ．．．．．．．．．．．．．．．．．．．．．．．1
1．1．1　网页的基本概念．．．．．．．．．．．．．．．．．．．．．．．．　1
1．1．2　HTML 的工作原理．．．．．．．．．．．．．．．．．．．．　3
1．1．3　创建和测试网页．．．．．．．．．．．．．．．．．．．．．．．．　5
1．1．4　网页编辑工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．　6
1．2　创建网页．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．7
1．2．1　标记符基础．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　7
1．2．2　网页的基本结构．．．．．．．．．．．．．．．．．．．．．．．．　8
1．2．3　在网页中添加内容．．．．．．．．．．．．．．．．．．．　12
1．3　综合实例：人物介绍网页．．．．．．．．13
练习题　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．15

第　2章 文本格式与超链接．．．．．．．．．．．．　16
2．1　设置文本格式．．．．．．．．．．．．．．．．．．．．．．16
2．1．1　段落格式．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　16
2．1．2　字体格式．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　19
2．1．3　列表格式．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　20
2．2　创建超链接．．．．．．．．．．．．．．．．．．．．．．．．．22
2．2．1　URL 概述．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　22
2．2．2　页面链接．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　23
2．2．3　锚点链接．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　25
2．3　综合实例：唐诗宋词网站．．．．．．．．27
2．3．1　网站规划．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　28
2．3．2　网页设计．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　29
2．3．3　网页制作．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　30
练习题　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．33

第3章　CSS3 基础．．．．．．．．．．．．．．．．．．．．　34
3．1　CSS 入门．．．．．．．．．．．．．．．．．．．．．．．．．．34
3．1．1　什么是CSS ．．．．．．．．．．．．．．．．．．．．．．．．．．．．34
3．1．2　CSS 样式定义．．．．．．．．．．．．．．．．．．．．．．．．．35
3．1．3　CSS 的属性单位．．．．．．．．．．．．．．．．．．．．．36
3．2　在网页中使用CSS ．．．．．．．．．．．．．．37
3．2．1　使用站点样式．．．．．．．．．．．．．．．．．．．．．．．．．．37
3．2．2　使用网页样式．．．．．．．．．．．．．．．．．．．．．．．．．．39
3．2．3　使用行内样式．．．．．．．．．．．．．．．．．．．．．．．．．．39
3．3　CSS3 基本选择器．．．．．．．．．．．．．．．40
3．3．1　标记符选择器．．．．．．．．．．．．．．．．．．．．．．．．．．40
3．3．2　类选择器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．41
3．3．3　ID 选择器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．41
3．3．4　伪类选择器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．42
3．3．5　群组选择器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．43
3．4　CSS3 基础属性．．．．．．．．．．．．．．．．．．43
3．4．1　颜色与背景属性．．．．．．．．．．．．．．．．．．．．．．．43
3．4．2　字体属性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．45
3．4．3　文本属性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．47
3．5　综合实例：电影欣赏网站．．．．．．．．48
3．5．1　网站规划与设计．．．．．．．．．．．．．．．．．．．．．．．49
3．5．2　网页制作．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．50
练习题　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．53

第4章　图像与多媒体．．．．．．．．．．．．．．．．．．　54
4．1　网页图像基础．．．．．．．．．．．．．．．．．．．．．．54
4．1．1　位图与矢量图．．．．．．．．．．．．．．．．．．．．．．．．．．54
4．1．2　网页图像格式．．．．．．．．．．．．．．．．．．．．．．．．．．55
4．1．3　使用网页图像的要点．．．．．．．．．．．．．．．．56
4．2　图像处理基本操作．．．．．．．．．．．．．．．．57
4．2．1　Photoshop 的界面．．．．．．．．．．．．．．．．．．57
4．2．2　修改图像的大小．．．．．．．．．．．．．．．．．．．．．．．58
4．2．3　调整图像的颜色．．．．．．．．．．．．．．．．．．．．．．．58
4．2．4　修补图像与抠像．．．．．．．．．．．．．．．．．．．．．．　59
4．2．5　用适当的格式保存图像．．．．．．．．．．．．．　61
4．3　图像标记符img ．．．．．．．．．．．．．．．．．．．62
4．3．1　插入图像．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　62
4．3．2　设置图像属性．．．．．．．．．．．．．．．．．．．．．．．．．．　63
4．4　使用多媒体对象．．．．．．．．．．．．．．．．．．．67
4．4．1　多媒体对象概述．．．．．．．．．．．．．．．．．．．．．．　67
4．4．2　插入多媒体对象．．．．．．．．．．．．．．．．．．．．．．　67
练习题　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．70

第5章　表格与表单．．．．．．．．．．．．．．．．．．．．．　72
5．1　创建表格．．．．．．．．．．．．．．．．．．．．．．．．．．．．72
5．1．1　表格的基本构成．．．．．．．．．．．．．．．．．．．．．．　72
5．1．2　合并单元格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　74
5．1．3　构造表格的步骤．．．．．．．．．．．．．．．．．．．．．．　74
5．2　表格的属性设置．．．．．．．．．．．．．．．．．．．75
5．2．1　边框与分隔线．．．．．．．．．．．．．．．．．．．．．．．．．．　75
5．2．2　控制单元格空白．．．．．．．．．．．．．．．．．．．．．．　76
5．2．3　表格的对齐．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　78
5．3　创建表单．．．．．．．．．．．．．．．．．．．．．．．．．．．．80
5．3．1　什么是表单．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　80
5．3．2　表单控件的类型．．．．．．．．．．．．．．．．．．．．．．　82
5．3．3　form 标记符．．．．．．．．．．．．．．．．．．．．．．．．．．．．　82
5．4　创建表单控件．．．．．．．．．．．．．．．．．．．．．．83
5．4．1　文本框与密码框．．．．．．．．．．．．．．．．．．．．．．　83
5．4．2　复选框与单选框．．．．．．．．．．．．．．．．．．．．．．　84
5．4．3　按钮．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　86
5．4．4　多行文本框．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　87
5．4．5　选项菜单．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　88
5．5　综合实例：表格与表单．．．．．．．．．．．89
5．5．1　复杂表格页面．．．．．．．．．．．．．．．．．．．．．．．．．．　89
5．5．2　登录注册页面．．．．．．．．．．．．．．．．．．．．．．．．．．　90
练习题　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．93

第6章　CSS3 进阶．．．．．．．．．．．．．．．．．．．．　95
6．1　CSS3 高级选择器．．．．．．．．．．．．．．．．95
6．1．1　后代选择器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．95
6．1．2　子元素选择器．．．．．．．．．．．．．．．．．．．．．．．．．．97
6．1．3　相邻兄弟选择器．．．．．．．．．．．．．．．．．．．．．．．97
6．1．4　属性选择器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．98
6．2　CSS3 布局．．．．．．．．．．．．．．．．．．．．．．．．99
6．2．1　CSS 盒模型．．．．．．．．．．．．．．．．．．．．．．．．．．．．99
6．2．2　CSS 定位概述．．．．．．．．．．．．．．．．．．．．．．．103
6．2．3　浮动定位．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．105
6．2．4　相对定位．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．107
6．2．5　绝对定位与固定定位．．．．．．．．．．．．．．．108
6．3　CSS3 高级属性．．．．．．．．．．．．．．．．　111
6．3．1　分类属性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．111
6．3．2　列表属性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．113
6．3．3　特效属性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．115
6．4　CSS3 样式的优先级．．．．．．．．．．．　118
6．4．1　一般性规则．．．．．．．．．．．．．．．．．．．．．．．．．．．．118
6．4．2　样式优先级的计算．．．．．．．．．．．．．．．．．．119
6．5　综合实例：中华美食网站．．．．．．　122
6．5．1　网站规划与设计．．．．．．．．．．．．．．．．．．．．．123
6．5．2　网页制作．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．124
练习题　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　130

第7章　JavaScript 与前端开发技术．．．．．．．．．．131
7．1　使用客户端脚本．．．．．．．．．．．．．．．．．　131
7．1．1　使用script 标记符．．．．．．．．．．．．．．．．．131
7．1．2　直接添加脚本．．．．．．．．．．．．．．．．．．．．．．．．132
7．1．3　链接脚本文件．．．．．．．．．．．．．．．．．．．．．．．．132
7．2　JavaScript 编程．．．．．．．．．．．．．．．　133
7．2．1　JavaScript 语言基础．．．．．．．．．．．．．133
7．2．2　使用JavaScript 对象．．．．．．．．．．．．．139
7．2．3　使用浏览器对象．．．．．．．．．．．．．．．．．．．．．144
7．2．4　使用HTML DOM 对象．．．．．．．．．．147
7．3　前端开发技术．．．．．．．．．．．．．．．．．．．．　159
7．3．1　使用jQuery ．．．．．．．．．．．．．．．．．．．．．．．．．．159
7．3．2　使用Bootstrap．．．．．．．．．．．．．．．．．．．．．　164
7．3．3　使用Vue．js ．．．．．．．．．．．．．．．．．．．．．．．．．．　172
7．3．4　使用AngularJS ．．．．．．．．．．．．．．．．．．．　176
7．3．5　使用React．．．．．．．．．．．．．．．．．．．．．．．．．．．　179
练习题　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　180

第8章　网页设计基础．．．．．．．．．．．．．．．．　182
8．1　设计与认知．．．．．．．．．．．．．．．．．．．．．．．　182
8．1．1　格式塔理论概述．．．．．．．．．．．．．．．．．．．．　182
8．1．2　认知时的组织原则．．．．．．．．．．．．．．．．．　182
8．2　设计原则．．．．．．．．．．．．．．．．．．．．．．．．．．　185
8．2．1　紧凑原则．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　185
8．2．2　对齐原则．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　187
8．2．3　重复原则．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　189
8．2．4　对比原则．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　190
8．3　设计适于扫描的网页．．．．．．．．．．．．　191
8．3．1　建立清楚的视觉层次．．．．．．．．．．．．．．　192
8．3．2　使用习惯用法．．．．．．．．．．．．．．．．．．．．．．．．　193
8．3．3　划分明确的页面区域．．．．．．．．．．．．．．　194
8．3．4　减轻视觉污染．．．．．．．．．．．．．．．．．．．．．．．．　194
8．4　设计导航．．．．．．．．．．．．．．．．．．．．．．．．．．　195
8．4．1　网页导航惯例．．．．．．．．．．．．．．．．．．．．．．．．　195
8．4．2　全局导航．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　196
8．4．3　站点ID．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　197
8．4．4　导航条．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　198
8．4．5　实用工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　198
8．4．6　返回主页．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　198
8．4．7　搜索功能．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　199
8．4．8　页面名称．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　199
8．4．9　当前位置与面包屑．．．．．．．．．．．．．．．．．　200
8．4．10　网站导航测试．．．．．．．．．．．．．．．．．．．．．．　202
8．5　设计版式．．．．．．．．．．．．．．．．．．．．．．．．．．202
8．5．1　页面比例．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　202
8．5．2　网页的分栏．．．．．．．．．．．．．．．．．．．．．．．．．．．　203
8．5．3　版面率．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　205
8．5．4　图版面积．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　206
8．5．5　跳跃率．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　207
练习题　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　208

第9章　用Dreamweaver制作网页．．．．．．．．．．．．　210
9．1　Dreamweaver 的界面．．．．．．．　210
9．2　使用本地站点．．．．．．．．．．．．．．．．．．．．　211
9．2．1　创建本地站点．．．．．．．．．．．．．．．．．．．．．．．．211
9．2．2　站点文件操作．．．．．．．．．．．．．．．．．．．．．．．．213
9．3　编辑网页．．．．．．．．．．．．．．．．．．．．．．．．．．　215
9．3．1　制作网页的一般过程．．．．．．．．．．．．．．215
9．3．2　使用文本．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．217
9．3．3　使用超链接．．．．．．．．．．．．．．．．．．．．．．．．．．．．218
9．3．4　使用图像．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．220
9．3．5　使用音频与视频．．．．．．．．．．．．．．．．．．．．．221
9．3．6　使用表格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．222
9．3．7　使用表单．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．225
9．4　使用CSS 样式．．．．．．．．．．．．．．．．．　227
9．4．1　创建CSS 样式表．．．．．．．．．．．．．．．．．．227
9．4．2　定义样式规则．．．．．．．．．．．．．．．．．．．．．．．．229
9．4．3　应用样式规则．．．．．．．．．．．．．．．．．．．．．．．．230
9．4．4　使用CSS 设计页面布局．．．．．．．．．230
9．5　高级功能．．．．．．．．．．．．．．．．．．．．．．．．．．　232
9．5．1　快速代码编写．．．．．．．．．．．．．．．．．．．．．．．．232
9．5．2　响应式网页设计．．．．．．．．．．．．．．．．．．．．．237
9．5．3　使用Bootstrap ．．．．．．．．．．．．．．．．．．．．．243
9．5．4　使用jQuery ．．．．．．．．．．．．．．．．．．．．．．．．．．248
练习题　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．249

第　10章 综合项目实践．．．．．．．．．．．．．．．．　251
10．1　网站开发的项目管理．．．．．．．．．．　251
10．1．1　网站开发流程．．．．．．．．．．．．．．．．．．．．．．251
10．1．2　网站开发团队．．．．．．．．．．．．．．．．．．．．．．253
10．1．3　网站策划书．．．．．．．．．．．．．．．．．．．．．．．．．．254
10．2　“游戏天地”网站规划．．．．．．．．256
10．2．1　网站目标．．．．．．．．．．．．．．．．．．．．．．．．．．．．　256
10．2．2　站点风格与技术因素．．．．．．．．．．．．　256
10．2．3　信息架构．．．．．．．．．．．．．．．．．．．．．．．．．．．．　257
10．3　“游戏天地”网站设计．．．．．．．257
10．3．1　导航设计．．．．．．．．．．．．．．．．．．．．．．．．．．．．　258
10．3．2　页面设计．．．．．．．．．．．．．．．．．．．．．．．．．．．．　259
10．4　“游戏天地”网站实现．．．．．．．　261
10．4．1　实现流程．．．．．．．．．．．．．．．．．．．．．．．．．．．．　261
10．4．2　网页基本结构的实现．．．．．．．．．．．．　262
10．4．3　典型页面的实现．．．．．．．．．．．．．．．．．．　265
练习题　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．276
附录1　HTML 和CSS 颜色表．．．　278
附录2　HTML5 快速参考．．．．．．．．．．　280
附录3　CSS3 快速参考．．．．．．．．．．．．　283