Web前端开发技术项目教程:HTML5+CSS3+JavaScrip

本书以搭建一个非物质文化遗产的网站项目为主线，介绍了HTML5、CSS3、JavaScript及相关的Web前端开发技术。全书共8个单元、36个任务，以项目导向、任务驱动的方式进行内容介绍，解析网页制作的知识和技能。本书的8个单元分别是网页开发入门与创建非遗项目站点、创建网页元素与制作非遗机构介绍页面和非遗国内机构详情页面、表格应用与制作非遗名录页面、HTML5表单与非遗网站登录页面和非遗网站注册页面的制作、CSS基础与制作非遗活动详情页面、CSS高级应用与制作非遗项目申报指南页面、网页布局与制作精彩非遗资讯页面、JavaScript基础与非遗网站首页的制作。 本书可以作为应用型本科、职业本科、高职高专院校计算机类相关专业“Web前端开发技术”课程的教材，也可以作为网页设计与制作爱好者和初学者的自学参考书。

高莺，硕士研究生，讲师/工程师，长期从事前端技术开发课程的理论和实践教学，指导学生获得江苏省大学生职业技能比赛一等奖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