本书以制作中华优秀传统文化网站为实践主线，包含认识中华优秀传统文化网站，制作中华优秀传统文化网站主题页面——揭秘自然规律、汲取思想精华、领略传统习俗、聆听唐诗宋词、根植地域文化、讲好工匠故事，为中华优秀传统文化网站添加动态行为和完善中华优秀传统文化网站9个项目。每个项目涵盖项目描述、知识储备、项目实施、项目小结、项目评价和项目测试6个模块。全书将思政育人有机融入教学中，采用项目驱动模式，知识点自然贯穿于各项目，内容由浅入深，模拟网站开发的全过程，实现技术能力与人文素养的双重提升。 本书适合作为高等职业院校计算机类专业的教学用书，也可用于Web前端开发职业技能等级证书的教学和培训，还可以作为从事Web前端开发人员学习和应用的参考书。 本书配有教学课件、微课视频、程序源代码和图片等丰富的教学资源。凡选用本书作为教材的教师均可登录机械工业出版社教育服务网（www.cmpedu.com）免费下载。咨询电话：010-88379375。

职业院校教师

目 录
前 言
微课二维码索引
项目1 认识中华优秀传统文化网站
1.1 项目描述 001
1.2 知识储备 002
1.2.1 认识网页 002
1.2.2 网页设计原则和规范 005
1.2.3 HBuilder简介 006
1.2.4 人工智能在现代网页开发中的应用 011
1.3 项目实施 012
任务1 分析中华优秀传统文化网站的目录结构 012
任务2 创建中华优秀传统文化网站的本地站点 012
1.4 项目小结 013
1.5 项目评价 013
1.6 项目测试 015
项目2 制作中华优秀传统文化网站主题页面——揭秘自然规律
2.1 项目描述 016
2.2 知识储备 017
2.2.1 段落标签 017
2.2.2 图片标签 018
2.2.3 区域标签 020
2.2.4 CSS选择器之类选择器 021
2.2.5 CSS属性之transition属性 022
2.3 项目实施 024
任务1 完成图文网页制作——春天的节气 024
任务2 为图片添加文本升降效果 029
2.4 项目小结 031
2.5 项目评价 031
2.6 项目测试 032
项目3 制作中华优秀传统文化网站主题页面——汲取思想精华
3.1 项目描述 033
3.2 知识储备 034
3.2.1 标题标签 034
3.2.2 强调标签 035
3.2.3 换行标签 036
3.2.4 水平线标签 037
3.2.5 CSS选择器之ID选择器 039
3.2.6 CSS属性之transform属性 040
3.3 项目实施 042
任务1 完成图文网页制作——儒家学派 042
任务2 为图片添加聚焦旋转效果 049
3.4 项目小结 050
3.5 项目评价 050
3.6 项目测试 051
项目4 制作中华优秀传统文化网站主题页面——领略传统习俗
4.1 项目描述 053
4.2 知识储备 054
4.2.1 无序列表标签 054
4.2.2 有序列表标签 055
4.2.3 定义列表标签 056
4.2.4 超链接标签 057
4.2.5 CSS属性之字体属性 059
4.2.6 CSS属性之文本属性 060
4.3 项目实施 062
任务1 完成图文网页制作——领略传统习俗 062
任务2 完成图文网页制作——春节 066
4.4 项目小结 070
4.5 项目评价 071
4.6 项目测试 072
项目5 制作中华优秀传统文化网站主题页面——聆听唐诗宋词
5.1 项目描述 073
5.2 知识储备 074
5.2.1 行内标签 074
5.2.2 表格标签 075
5.3 项目实施 078
任务1 完成图文网页制作——唐诗宋词介绍 078
任务2 完成图文网页制作——“诗词”赏析 081
5.4 项目小结 084
5.5 项目评价 084
5.6 项目测试 085
项目6 制作中华优秀传统文化网站主题页面——根植地域文化
6.1 项目描述 087
6.2 知识储备 088
6.2.1 表单标签 088
6.2.2 表单元素 089
6.2.3 CSS属性之background属性 093
6.3 项目实施 095
任务1 完成图文网页制作——齐文化介绍 095
任务2 完成账号登录页面的制作 100
6.4 项目小结 102
6.5 项目评价 103
6.6 项目测试 104
项目7 制作中华优秀传统文化网站主题页面——讲好工匠故事
7.1 项目描述 105
7.2 知识储备 106
7.2.1 块级元素和行内元素 106
7.2.2 盒子模型 108
7.2.3 浮动和定位 119
7.3 项目实施 125
任务 完成图文网页制作——讲好工匠故事 125
7.4 项目小结 130
7.5 项目评价 130
7.6 项目测试 131
项目8 为中华优秀传统文化网站添加动态行为
8.1 项目描述 133
8.2 知识储备 134
8.2.1 JavaScript概述 134
8.2.2 JavaScript语言基础 135
8.2.3 JavaScript函数 144
8.2.4 JavaScript对象 150
8.2.5 正则表达式 153
8.3 项目实施 155
任务1 使用正则表达式模式完成注册表单的验证 155
任务2 完成带按钮轮播横幅广告页面的制作 160
8.4 项目小结 162
8.5 项目评价 163
8.6 项目测试 164
项目9 完善中华优秀传统文化网站
9.1 项目描述 165
9.2 知识储备 166
9.2.1 事件概述 166
9.2.2 窗口事件 166
9.2.3 鼠标事件 170
9.2.4 键盘事件 174
9.3 项目实施 177
任务1 为中华优秀传统文化网站登录页面添加窗口事件 177
任务2 制作中华优秀传统文化网站首页 178
任务3 搭建中华优秀传统文化网站框架并完善网站首页 186
9.4 项目小结 189
9.5 项目评价 189
9.6 项目测试 190
参 考 文 献 192