HTML5+CSS3网页设计与制作案例教程（第二版） / 全国高职高专计算机网络技术专业规划教材
￥53.00定价
作者： 郭建东
出版时间：2020-04
出版社：科学出版社
获奖信息：“十四五”职业教育国家规划教材
试读- 科学出版社
- 9787030633873
- 2版
- 318424
- 48242358-9
- 活页装
- 16开
- 2020-04
- 280
- 216
- 工学
- 计算机科学与技术
- 计算机类相关专业
- 高职
作者简介
内容简介
本书是We
前端网页设计的基础性教材，结合1+X前端考证，介绍不同前端编辑器下HTML5网站和网页的创建，包括简单页面制作、多列布局的复杂页面制作和导航设计等；然后结合CSS3和HTML5的新特性，由浅入深讲解了HTML5表单制作、使用CSS3样式制作特效文字、过渡渐变和动画效果、HTML5媒体应用技术、
ootst
ap响应式布局页面制作等内容，使读者全面理解和掌握基于HTML5+CSS3的前端页面设计与制作技术。本书还介绍了使用Photoshop制作按钮、导航等网页图片素材，并通过实例介绍网页版面效果图制作和切图技术；最后讲解了一个综合网站的制作过程。
本书配套提供国家级精品课程平台“爱课程中国大学MOOC”的线上学习和广东省精品在线开放课程资源，包括案例视频、教学PPT、案例源代码、素材图片、上机实训素材、授课计划、教学大纲、考核方案和混合式教学方案等。本书适合作为高职高专院校、应用型本科院校网页设计课程的教材，也可作为网页设计和制作人员自学的参考用书。
前端网页设计的基础性教材，结合1+X前端考证，介绍不同前端编辑器下HTML5网站和网页的创建，包括简单页面制作、多列布局的复杂页面制作和导航设计等；然后结合CSS3和HTML5的新特性，由浅入深讲解了HTML5表单制作、使用CSS3样式制作特效文字、过渡渐变和动画效果、HTML5媒体应用技术、
ootst
ap响应式布局页面制作等内容，使读者全面理解和掌握基于HTML5+CSS3的前端页面设计与制作技术。本书还介绍了使用Photoshop制作按钮、导航等网页图片素材，并通过实例介绍网页版面效果图制作和切图技术；最后讲解了一个综合网站的制作过程。
本书配套提供国家级精品课程平台“爱课程中国大学MOOC”的线上学习和广东省精品在线开放课程资源，包括案例视频、教学PPT、案例源代码、素材图片、上机实训素材、授课计划、教学大纲、考核方案和混合式教学方案等。本书适合作为高职高专院校、应用型本科院校网页设计课程的教材，也可作为网页设计和制作人员自学的参考用书。
目录
第1章 网页设计基础1
1.1 网页的基本概念1
1.2 网页的基本元素2
1.3 常用前端开发工具3
1.4 基于D
eamweave
平台的网站创建与管理4
1.4.1 D
eamweave
CC开发平台工作区介绍4
1.4.2 基于D
eamweave
CC的网站创建与管理6
1.5 H
uilde
X平台网站项目的创建9
1.5.1 H
uilde
X开发平台工作区介绍9
1.5.2 H
uilde
X项目的创建10
1.6 网页基本结构和文本元素11
1.6.1 网页的基本结构11
1.6.2 HTML中的文本元素14
1.6.3 HTML块元素与内联元素16
1.7 创建基于文本的网页17
1.7.1 在网页中添加文字17
1.7.2 文字和段落的CSS样式18
1.7.3 CSS样式在文本页面的应用案例22
上机实训22
课后练习23
第2章 HTML5+CSS简单页面制作25
2.1 CSS样式基础25
2.1.1 CSS盒子模型25
2.1.2 CSS页面布局基础29
2.1.3 CSS样式分类31
2.1.4 样式规则的优先级32
2.1.5 样式规则的优先级应用案例32
2.1.6 样式命名规范34
2.2 一列布局页面制作36
2.2.1 制作一列固定宽度布局网页36
2.2.2 制作一列自适应宽度布局网页39
2.3 网页中的图片元素40
2.4 制作图文混排的网页41
2.4.1 文字环绕图片网页制作41
2.4.2 一列布局图文混排网页制作42
上机实训43
课后练习44
第3章 多列布局页面制作46
3.1 二列布局页面制作46
3.1.1 网页常见二列布局方案46
3.1.2 二列布局页面制作案例47
3.2 三列布局页面制作49
3.2.1 网页常见三列布局方案49
3.2.2 三列布局页面制作案例50
3.3 多列布局页面制作52
3.3.1 网页常见多列布局方案52
3.3.2 多列布局页面制作案例52
上机实训57
课后练习59
第4章 链接与导航制作61
4.1 文字链接61
4.1.1 文本链接62
4.1.2 邮件链接63
4.1.3 下载链接63
4.1.4 空链接63
4.1.5 链接文字样式设置63
4.2 图片链接64
4.3 导航设计与制作64
4.3.1 横向文字链接导航制作及应用64
4.3.2 图片背景导航制作65
4.3.3 列表导航制作67
上机实训72
课后练习73
第5章 HTML5表单基础75
5.1 认识表单75
5.2 表单对象77
5.2.1 input元素77
5.2.2 texta
ea（多行文本框）元素80
5.2.3 select元素和option元素80
5.2.4 无障碍访问表单元素la
el、fieldset和legend80
5.2.5 datalist预设列表选项元素81
5.2.6 日历控件82
5.2.7 颜色池控件82
5.3 表单应用案例83
上机实训84
课后练习84
第6章 CSS3样式基础86
6.1 CSS3文本效果应用86
6.1.1 文本阴影效果86
6.1.2 文本描边效果87
6.1.3 文本浮雕效果87
6.1.4 CSS3文本效果应用案例87
6.2 CSS3背景与渐变效果89
6.2.1 线性渐变89
6.2.2 径向渐变89
6.2.3 重复渐变90
6.2.4 CSS3背景与渐变效果应用案例90
6.3 CSS3制作边框效果91
6.3.1 圆角边框91
6.3.2 CSS3圆角边框应用案例92
6.3.3 边框阴影94
6.3.4 边框阴影制作案例95
6.4 CSS3制作动画效果96
6.4.1 CSS3 t
ansitions过渡动画制作96
6.4.2 过渡动画制作案例97
6.4.3 CSS3 animation动画98
6.4.4 animation动画制作案例100
6.5 CSS3应用综合案例101
上机实训106
课后练习108
第7章 HTML5新特性与媒体应用109
7.1 HTML5新特性109
7.1.1 解决浏览器兼容问题109
7.1.2 新增多个功能丰富的新元素和API109
7.1.3 用户优先的原则110
7.1.4 元素语法化繁为简110
7.2 HTML5常用新增元素110
7.2.1 figu
e元素和figcaption元素110
7.2.2 details和summa
y元素111
7.2.3 time和ma
k元素112
7.3 HTML5元素全局属性113
7.3.1 contentedita
le113
7.3.2 data-*114
7.3.3 d
agga
le114
7.3.4 hidden114
7.3.5 spellcheck114
7.4 HTML5网页中多媒体应用115
7.4.1 HTML5视频播放案例115
7.4.2 HTML5音频播放案例117
上机实训119
课后练习119
第8章
ootst
ap响应式布局120
8.1 响应式We
设计和视口120
8.2 弹性盒布局121
8.2.1 弹性盒布局结构121
8.2.2 弹性盒容器属性122
8.2.3 弹性盒容器子元素属性124
8.3
ootst
ap响应式布局127
8.3.1
ootst
ap下载与快速部署127
8.3.2 栅格系统129
8.3.3 组件及公用样式132
8.3.4
ootst
ap响应式布局案例136
上机实训138
课后练习139
第9章 Photoshop网页界面设计140
9.1 网页界面设计基础140
9.1.1 网页界面设计配色140
9.1.2 网页文字图片元素141
9.1.3 网页中常用的图片格式142
9.2 Photoshop简介143
9.2.1 Photoshop 操作界面简介143
9.2.2 工具栏144
9.2.3 图层144
9.3 网页图片元素的制作案例147
9.3.1 线条绘制147
9.3.2 按钮制作148
9.3.3 文字阴影152
9.3.4 导航条制作153
9.3.5 网页图像合成与修饰154
9.4 网页版面制作案例156
上机实训158
课后练习159
第10章 网站设计制作实例160
10.1 网站制作流程160
10.2 使用CSS+Div设计制作静态网站161
10.2.1 网站的用途及定位162
10.2.2 网站内容的选取162
10.2.3 使用Photoshop切图162
10.2.4 主页框架制作165
10.2.5 导航制作171
10.2.6 主页内容区内容制作171
10.2.7 制作前端内容页“唐诗”页面172
10.2.8 制作前端内容页“宋词”页面176
10.2.9 制作前端内容页“元曲”页面176
10.2.10 制作前端内容页“汉赋”页面180
10.3 测试网站182
10.4 上传发布网站184
10.4.1 使用D
eamweave
CC 2019自带工具上传站点184
10.4.2 使用FlashFXP上传文件185
上机实训186
参考文献187
附录 拓展教学资源188
1.1 网页的基本概念1
1.2 网页的基本元素2
1.3 常用前端开发工具3
1.4 基于D
eamweave
平台的网站创建与管理4
1.4.1 D
eamweave
CC开发平台工作区介绍4
1.4.2 基于D
eamweave
CC的网站创建与管理6
1.5 H
uilde
X平台网站项目的创建9
1.5.1 H
uilde
X开发平台工作区介绍9
1.5.2 H
uilde
X项目的创建10
1.6 网页基本结构和文本元素11
1.6.1 网页的基本结构11
1.6.2 HTML中的文本元素14
1.6.3 HTML块元素与内联元素16
1.7 创建基于文本的网页17
1.7.1 在网页中添加文字17
1.7.2 文字和段落的CSS样式18
1.7.3 CSS样式在文本页面的应用案例22
上机实训22
课后练习23
第2章 HTML5+CSS简单页面制作25
2.1 CSS样式基础25
2.1.1 CSS盒子模型25
2.1.2 CSS页面布局基础29
2.1.3 CSS样式分类31
2.1.4 样式规则的优先级32
2.1.5 样式规则的优先级应用案例32
2.1.6 样式命名规范34
2.2 一列布局页面制作36
2.2.1 制作一列固定宽度布局网页36
2.2.2 制作一列自适应宽度布局网页39
2.3 网页中的图片元素40
2.4 制作图文混排的网页41
2.4.1 文字环绕图片网页制作41
2.4.2 一列布局图文混排网页制作42
上机实训43
课后练习44
第3章 多列布局页面制作46
3.1 二列布局页面制作46
3.1.1 网页常见二列布局方案46
3.1.2 二列布局页面制作案例47
3.2 三列布局页面制作49
3.2.1 网页常见三列布局方案49
3.2.2 三列布局页面制作案例50
3.3 多列布局页面制作52
3.3.1 网页常见多列布局方案52
3.3.2 多列布局页面制作案例52
上机实训57
课后练习59
第4章 链接与导航制作61
4.1 文字链接61
4.1.1 文本链接62
4.1.2 邮件链接63
4.1.3 下载链接63
4.1.4 空链接63
4.1.5 链接文字样式设置63
4.2 图片链接64
4.3 导航设计与制作64
4.3.1 横向文字链接导航制作及应用64
4.3.2 图片背景导航制作65
4.3.3 列表导航制作67
上机实训72
课后练习73
第5章 HTML5表单基础75
5.1 认识表单75
5.2 表单对象77
5.2.1 input元素77
5.2.2 texta
ea（多行文本框）元素80
5.2.3 select元素和option元素80
5.2.4 无障碍访问表单元素la
el、fieldset和legend80
5.2.5 datalist预设列表选项元素81
5.2.6 日历控件82
5.2.7 颜色池控件82
5.3 表单应用案例83
上机实训84
课后练习84
第6章 CSS3样式基础86
6.1 CSS3文本效果应用86
6.1.1 文本阴影效果86
6.1.2 文本描边效果87
6.1.3 文本浮雕效果87
6.1.4 CSS3文本效果应用案例87
6.2 CSS3背景与渐变效果89
6.2.1 线性渐变89
6.2.2 径向渐变89
6.2.3 重复渐变90
6.2.4 CSS3背景与渐变效果应用案例90
6.3 CSS3制作边框效果91
6.3.1 圆角边框91
6.3.2 CSS3圆角边框应用案例92
6.3.3 边框阴影94
6.3.4 边框阴影制作案例95
6.4 CSS3制作动画效果96
6.4.1 CSS3 t
ansitions过渡动画制作96
6.4.2 过渡动画制作案例97
6.4.3 CSS3 animation动画98
6.4.4 animation动画制作案例100
6.5 CSS3应用综合案例101
上机实训106
课后练习108
第7章 HTML5新特性与媒体应用109
7.1 HTML5新特性109
7.1.1 解决浏览器兼容问题109
7.1.2 新增多个功能丰富的新元素和API109
7.1.3 用户优先的原则110
7.1.4 元素语法化繁为简110
7.2 HTML5常用新增元素110
7.2.1 figu
e元素和figcaption元素110
7.2.2 details和summa
y元素111
7.2.3 time和ma
k元素112
7.3 HTML5元素全局属性113
7.3.1 contentedita
le113
7.3.2 data-*114
7.3.3 d
agga
le114
7.3.4 hidden114
7.3.5 spellcheck114
7.4 HTML5网页中多媒体应用115
7.4.1 HTML5视频播放案例115
7.4.2 HTML5音频播放案例117
上机实训119
课后练习119
第8章
ootst
ap响应式布局120
8.1 响应式We
设计和视口120
8.2 弹性盒布局121
8.2.1 弹性盒布局结构121
8.2.2 弹性盒容器属性122
8.2.3 弹性盒容器子元素属性124
8.3
ootst
ap响应式布局127
8.3.1
ootst
ap下载与快速部署127
8.3.2 栅格系统129
8.3.3 组件及公用样式132
8.3.4
ootst
ap响应式布局案例136
上机实训138
课后练习139
第9章 Photoshop网页界面设计140
9.1 网页界面设计基础140
9.1.1 网页界面设计配色140
9.1.2 网页文字图片元素141
9.1.3 网页中常用的图片格式142
9.2 Photoshop简介143
9.2.1 Photoshop 操作界面简介143
9.2.2 工具栏144
9.2.3 图层144
9.3 网页图片元素的制作案例147
9.3.1 线条绘制147
9.3.2 按钮制作148
9.3.3 文字阴影152
9.3.4 导航条制作153
9.3.5 网页图像合成与修饰154
9.4 网页版面制作案例156
上机实训158
课后练习159
第10章 网站设计制作实例160
10.1 网站制作流程160
10.2 使用CSS+Div设计制作静态网站161
10.2.1 网站的用途及定位162
10.2.2 网站内容的选取162
10.2.3 使用Photoshop切图162
10.2.4 主页框架制作165
10.2.5 导航制作171
10.2.6 主页内容区内容制作171
10.2.7 制作前端内容页“唐诗”页面172
10.2.8 制作前端内容页“宋词”页面176
10.2.9 制作前端内容页“元曲”页面176
10.2.10 制作前端内容页“汉赋”页面180
10.3 测试网站182
10.4 上传发布网站184
10.4.1 使用D
eamweave
CC 2019自带工具上传站点184
10.4.2 使用FlashFXP上传文件185
上机实训186
参考文献187
附录 拓展教学资源188
