单元1 网页开发入门与创建非遗项目站点 1
学习目标 1
情景导入 1
【任务1.1】认识网页 1
【任务1.2】建立非遗项目站点 8
【任务1.3】尝试制作非遗调研网页 21
智海引航 30
【问题1.1】静态网页和动态网页技术的应用领域 30
【问题1.2】CSS3的新特性 30
匠心独运——翠微清响 流水高山 31
单元习题 32
单元2 创建网页元素与制作非遗机构介绍页面 33
学习目标 33
情景导入 33
【任务2.1】设计非遗机构介绍页面及详情页面 33
【任务2.2】创建文本元素并制作非遗国内机构详情页面 35
【任务2.3】创建超链接并插入相关阅读内容 41
【任务2.4】插入图片并制作非遗机构介绍页面 43
智海引航 48
【问题2.1】相对路径和绝对路径的区别 48
匠心独运——泥塑乾坤 紫砂传奇 48
单元习题 48
单元3 表格应用与制作非遗名录页面 50
学习目标 50
情景导入 50
【任务3.1】设计非遗名录页面 50
【任务3.2】创建表格并制作非遗名录清单 51
【任务3.3】表格结构化标记与非遗名录清单优化 62
【任务3.4】布局表格页面并制作非遗名录页面 64
智海引航 70
【问题3.1】网页不使用表格进行复杂页面布局的原因 70
【问题3.2】常用的表格相关的CSS属性 70
匠心独运——吴腔软语 歌韵千年 70
单元习题 71
单元4 HTML5表单与非遗登录注册页面的制作 72
学习目标 72
情景引入 72
【任务4.1】设计非遗登录和注册页面 72
【任务4.2】创建表单并制作非遗登录页面 74
【任务4.3】添加表单控件并制作非遗注册页面 81
【任务4.4】设置HTML5表单控件属性并验证表单数据 92
【任务4.5】使用正则表达式进行复杂数据验证 97
智海引航 99
【问题4.1】用户提交表单后表单数据的处理过程 99
【问题4.2】用户绕过了所有的验证后，确保数据安全的方式 99
匠心独运——太极生辉 武蕴道心 100
单元习题 100
单元5 CSS基础与制作非遗活动详情页面 102
学习目标 102
情景导入 102
【任务5.1】设计非遗活动详情页面 102
【任务5.2】设计字体样式并美化非遗活动详情页面头部区域 104
【任务5.3】精细排版文本并美化非遗活动详情页面正文区域 120
【任务5.4】制作并美化非遗活动详情页面 125
智海引航 135
匠心独运——竹龙翻腾•薪火相传 139
单元习题 139
单元6 CSS高级应用与制作非遗项目申报指南页面 141
学习目标 141
情景导入 141
【任务6.1】设计非遗项目申报指南页面 141
【任务6.2】创建列表并制作非遗项目申报指南区域 142
【任务6.3】设置边框样式并制作文件下载区域 154
【任务6.4】制作并美化水平导航栏 160
【任务6.5】设置背景样式并美化非遗项目申报指南页面 165
智海引航 179
【问题6.1】列表在网页上的默认样式 179
【问题6.2】CSS3中新增的与背景设置的属性 180
匠心独运——吴音婉转 弹词留香 180
单元习题 181
单元7 网页布局与制作精彩非遗资讯页面 183
学习目标 183
情景导入 183
【任务7.1】设计精彩非遗资讯页面 183
【任务7.2】认识盒子模型并搭建资讯页面整体布局 185
【任务7.3】了解元素浮动并制作资讯推介区域 197
【任务7.4】学习元素定位并制作资讯页面专题报道区域 209
【任务7.5】整合并美化精彩非遗资讯页面 219
智海引航 223
【问题7.1】实现多个块级元素在同一行显示的CSS属性 223
【问题7.2】举例说明常见的网页布局设计和网页布局技术 223
匠心独运——昆韵流长 古调新声 226
单元习题 226
单元8 JavaScript基础与非遗首页的制作 228
学习目标 228
情景引入 228
【任务8.1】设计非遗首页 228
【任务8.2】熟悉JavaScript基础语法并制作非遗首页轮播图 230
【任务8.3】了解常用函数并实现定时切换图片 244
【任务8.4】认识JavaScript事件并实现手动切换图片 247
【任务8.5】制作图片轮播图 252
【任务8.6】制作非遗网站首页 255
智海引航 265
【问题8.1】Javascript中与异常捕捉有关的机制 265
【问题8.2】避免JavaScript 作为弱类型语言带来的问题的方法 265
匠心独运——古韵新彩 桃花依旧 265
单元习题 266