本书以搭建一个非物质文化遗产的网站项目为主线，介绍了HTML5、CSS3、JavaScript及相关的Web前端开发技术。全书共8个单元、36个任务，以项目导向、任务驱动的方式进行内容介绍，解析网页制作的知识和技能。本书的8个单元分别是网页开发入门与创建非遗项目站点、创建网页元素与制作非遗机构介绍页面和非遗国内机构详情页面、表格应用与制作非遗名录页面、HTML5表单与非遗网站登录页面和非遗网站注册页面的制作、CSS基础与制作非遗活动详情页面、CSS高级应用与制作非遗项目申报指南页面、网页布局与制作精彩非遗资讯页面、JavaScript基础与非遗网站首页的制作。
本书可以作为应用型本科、职业本科、高职高专院校计算机类相关专业“Web前端开发技术”课程的教材，也可以作为网页设计与制作爱好者和初学者的自学参考书。
1. 项目导向，任务驱动，强化技能。本书以非遗网站项目贯穿，划分为八大模块来精心组织HTML5、CSS3、JavaScript相关内容。
2. 以岗定标，岗课直通，学以致用。对接课程内容，增设项目情景，让读者在学习过程中了解真实的工作场景和任务。
3. 产教融合，强调实践，鼓励创新。通过设计启发性的“边学边思”“技术辨析”“智海引航”等，为解决实际问题提供新颖思路和解决方案，培养计算机思维和创新思维。
高莺，硕士研究生，讲师/工程师，长期从事前端技术开发课程的理论和实践教学，指导学生获得江苏省大学生职业技能比赛一等奖1项，国赛一等奖1项，江苏省领航杯大数据分析赛项三等奖，获江苏省职业院校技能大赛优秀指导教师的称号。出版教材3部、软件著作权3项，累计发表各类高水平专业论文10余篇。
单元1 网页开发入门与创建非遗项目站点 1
学习目标 1
情景导入 1
【任务1.1】认识网页 1
【任务1.2】建立非遗项目站点 9
【任务1.3】尝试制作非遗调研网页 20
智海引航 28
【问题1.1】静态网页和动态网页技术的应用领域 28
【问题1.2】CSS3的新特性 29
匠心独运——翠微清响 流水高山 30
单元习题 30
单元2 创建网页元素与制作非遗机构介绍页面和非遗国内机构详情页面 32
学习目标 32
情景导入 32
【任务2.1】设计非遗机构介绍页面和非遗国内机构详情页面 33
【任务2.2】创建文本元素并制作非遗国内机构详情页面 34
【任务2.3】创建超链接并插入相关阅读内容 40
【任务2.4】插入图片并制作非遗机构介绍页面 42
智海引航 46
【问题】相对路径和绝对路径的区别 46
匠心独运——泥塑乾坤 紫砂传奇 47
单元习题 47
单元3 表格应用与制作非遗名录页面 49
学习目标 49
情景导入 49
【任务3.1】设计非遗名录页面 49
【任务3.2】创建表格并制作非遗名录 50
【任务3.3】表格结构化标记与非遗名录优化 61
【任务3.4】布局表格并制作非遗名录页面 64
智海引航 69
【问题3.1】网页不使用表格进行复杂页面布局的原因 69
【问题3.2】常用的与表格相关的CSS属性 69
匠心独运——吴腔软语 歌韵千年 69
单元习题 70
单元4 HTML5表单与非遗网站登录页面和非遗网站注册页面的制作 71
学习目标 71
情景引入 71
【任务4.1】设计非遗网站登录页面和注册页面 72
【任务4.2】创建表单并制作非遗网站登录页面 73
【任务4.3】添加表单控件并制作非遗网站注册页面 79
【任务4.4】设置HTML5表单控件属性并验证表单数据 89
【任务4.5】使用正则表达式进行复杂数据验证 95
智海引航 97
【问题4.1】用户提交表单后表单数据的处理过程 97
【问题4.2】用户绕过了部分验证后，确保数据安全的方式 97
匠心独运——太极生辉 武蕴道心 98
单元习题 98
单元5 CSS基础与制作非遗活动详情页面 100
学习目标 100
情景导入 100
【任务5.1】设计非遗活动详情页面 101
【任务5.2】设计字体样式并美化非遗活动详情页面头部区域 102
【任务5.3】精细排版文本并美化非遗活动详情页面正文区域 117
【任务5.4】制作并美化非遗活动详情页面 122
智海引航 131
【问题5.1】举例说明CSS代码调试方法 131
【问题5.2】举例说明CSS的继承性和层叠性 132
匠心独运——竹龙翻腾 薪火相传 135
单元习题 135
单元6 CSS高级应用与制作非遗项目申报指南页面 137
学习目标 137
情景导入 137
【任务6.1】设计非遗项目申报指南页面 138
【任务6.2】创建列表并制作非遗项目申报指南区域 139
【任务6.3】设置边框样式并制作文件下载区域 150
【任务6.4】制作并美化水平导航栏 156
【任务6.5】设置背景样式并美化非遗项目申报指南页面 161
智海引航 174
【问题6.1】列表在网页上的默认样式 174
【问题6.2】CSS3中新增的与背景设置相关的属性 175
匠心独运——吴音婉转 弹词留香 175
单元习题 176
单元7 网页布局与制作精彩非遗资讯页面 178
学习目标 178
情景导入 178
【任务7.1】设计精彩非遗资讯页面 179
【任务7.2】认识盒子模型并搭建精彩非遗资讯页面整体布局 180
【任务7.3】了解元素浮动并制作资讯推介区域 191
【任务7.4】学习元素定位并制作专题报道区域 202
【任务7.5】整合并美化精彩非遗资讯页面 212
智海引航 214
【问题7.1】实现多个块级元素在同一行显示的CSS属性 214
【问题7.2】举例说明常见的网页布局设计和网页布局技术 215
匠心独运——昆韵流长 古调新声 217
单元习题 217
单元8 JavaScript基础与非遗网站首页的制作 220
学习目标 220
情景导入 220
【任务8.1】设计非遗网站首页 221
【任务8.2】熟悉JavaScript基础语法并制作非遗网站首页轮播图 222
【任务8.3】了解常用函数并实现定时切换图片 237
【任务8.4】认识JavaScript事件并实现手动切换图片 239
【任务8.5】制作轮播图/ 244
【任务8.6】制作非遗网站首页 247
智海引航 256
【问题8.1】JavaScript中与异常捕获有关的机制 256
【问题8.2】避免JavaScript 作为弱类型编程语言带来问题的方法 256
匠心独运——古韵新彩 桃花依旧 257
单元习题 257
新书资讯
