网站前端技术案例教程（HTML+CSS+JavaScript）

精选内容——以HTML+CSS+JavaScript三大核心技术的知识点为主线，以建设一个旅游资讯网站为任务驱动，将复杂的网站设计操作转化为多个通俗易懂的任务。

案例驱动——采用“案例驱动式”编写方式，将知识点融入到案例中，使得读者在实现案例效果的同时，就能掌握基础知识。

循序渐进——内容条理清楚、实例丰富、通俗易懂、实用性强，案例有连贯性，在最后一章把前面的案例串联起来形成一个综合案例，让学生有成就感。

适应面广——可用作计算机相关专业的前端技术基础课程教材、非计算机专业的网页制作选修课教材，社会人员学习网页前端的基础教材，也可供其他计算机专业人员参考使用。

随着互联网的快速发展和激烈竞争，用户体验成为了一个重要的关注点，使得专业的前端工程师成为热门职业，各大公司对前端工程师的需求量都很大，要求也越来越高，优秀的前端工程师更是稀缺。在各大人才招聘网站上都能看到不断更新的招聘前端工程师的岗位需求，学好前端技术对就业和发展都非常有用。

前端工程师的职责是制作标准优化的代码，增加交互动态功能，并进行丰富互联网的Web开发，致力于通过技术改善用户体验。要求掌握的主要技术包含：HTML、JavaScript、CSS，以及最新出现的各种框架如node.js、AngularJS、vue.js等等。虽然以后会有各种各样的新技术新框架帮助前端工程师完成各种复杂的任务，但是所有这些新技术新框架都离不开三大核心技术HTML、JavaScript、CSS。作为一本前端工程师基础课程的教程，本书以HTML、JavaScript、CSS为知识点，适合所有将要进入前端技术领域的初学者。

本教材的特点如下：

根据对前端工程师的技术要求分析，以HTML+CSS+JavaScript三大核心技术的知识点为主线，以建设一个旅游资讯网站为任务驱动，将复杂的网站设计操作转化为多个通俗易懂的任务，最后汇总成一个大的综合实例—“黄姚古镇旅游网”。全书共分为11个模块，每个模块又细分为多个案例，全书共有32个案例。每个案例以实例为引导，操作步骤清晰，有利于初学者比较系统地学习前端网页设计的基础知识，掌握网站开发的方法与过程。教材采用“案例驱动式”编写方式，将知识点巧妙地设计到相应案例中，将每次要简述的基础知识融入到案例中，使读者在实现案例效果的同时，就能掌握基础知识。每个案例的教与学难度基本控制在1个学时到2个学时之间，方便老师开展课堂教学。案例具有连贯性，在最后一章把所有前面的案例串联起来形成一个综合案例，让学生有成就感。

本书由黄华升任主编，任子亭、袁淑丹、巫湘林任副主编。黄华升主持了全书的编写及审稿工作，并编写了第9～11章内容；袁淑丹编写了第1～4章内容；任子亭编写了第5～8章内容；巫湘林编写了第12章内容。

本书精心配置了源代码、教学课件、配套视频等教学资源，并将演示视频发布到网络上生成了二维码，在书中的案例部分附加了操作视频二维码，读者可以使用手机扫一扫二维码，即可一边阅读书本的讲解一边看着手机观看视频分解，实现“书+码”的学习互动。本书配有微信公众号，提供在线答疑服务及更多资源。

视频资源 微信公众号

本书可用作计算机相关专业的前端技术基础课程教材、非计算机专业的网页制作选修课教材，社会人员学习网页前端的基础教材，也可供其他计算机专业人员参考使用。

由于作者水平有限，书中疏漏和错误之处在所难免，欢迎广大读者提出宝贵意见。

编 者

2017年6月

第一章 网页制作基础知识 1
1.1 网站建设基本概念 1
1.1.1 名词解释 1
1.1.2 Web标准概述 3
1.2 网页制作入门 4
1.2.1 HTML简介 4
1.2.2 CSS简介 5
1.2.3 JavaScript简介 5
1.3 案例1：欢迎来到黄姚古镇 5
1.3.1 常用编辑工具对比 5
1.3.2 使用Dreamweaver编辑网页 7
第二章 建设基本HTML页面 11
2.1 案例2：黄姚古镇简介 11
2.1.1 案例描述 11
2.1.2 相关知识 12
2.1.3 实现过程 17
2.2 案例3：黄姚古镇简介引文注释 18
2.2.1 案例描述 18
2.2.2 相关知识 19
2.2.3 实现过程 21
2.3 案例4：醉黄姚—图文黄姚简介 22
2.3.1 案例描述 22
2.3.2 相关知识 22
2.3.3 实现过程 28
2.4 案例综合练习 29
第三章 使用CSS技术美化网页 31
3.1 案例5：黄姚古镇多彩标题 31
3.1.1 案例描述 31
3.1.2 相关知识 31
3.1.3 实现过程 42
3.2 案例6：黄姚旅游信息新闻 43
3.2.1 案例描述 43
3.2.2 相关知识 43
3.2.3 实现过程 49
3.3 案例7：黄姚古镇美食推荐 50
3.3.1 案例描述 50
3.3.2 相关知识 51
3.3.3 实现过程 55
3.4 案例综合练习 56
第四章 CSS盒子模型 58
4.1 案例8：黄姚风景图文欣赏 58
4.1.1 案例描述 58
4.1.2 相关知识 59
4.1.3 实现过程 65
4.2 案例9：黄姚最受欢迎的土特产推介 67
4.2.1 案例描述 67
4.2.2 相关知识 68
4.2.3 实现过程 72
4.3 案例10：黄姚风景明信片 74
4.3.1 案例描述 74
4.3.2 相关知识 74
4.3.3 实现过程 79
4.4 案例综合练习 81
第五章 CSS的定位布局 84
5.1 案例11：友情链接 84
5.1.1 案例描述 84
5.1.2 相关知识 84
5.1.3 实现过程 90
5.2 案例12：黄姚门票网络票面 91
5.2.1 案例描述 91
5.2.2 相关知识 92
5.2.3 实现过程 98
5.3 案例13：首页的广告、宣传区 100
5.3.1 案例描述 100
5.3.2 相关知识 100
5.3.3 实现过程 106
5.4 案例14：首页的布局定位 108
5.4.1 案例描述 108
5.4.2 相关知识 109
5.4.3 实现过程 113
5.5 案例综合练习 116
第六章 列表与超链接 117
6.1 案例15：新闻页面列表 117
6.1.1 案例描述 117
6.1.2 相关知识 117
6.1.3 实现过程 121
6.2 案例16：黄姚微信二维码名片 124
6.2.1 案例描述 124
6.2.2 相关知识 124
6.2.3 实现过程 126
6.3 案例17：旅游产品推荐 128
6.3.1 案例描述 128
6.3.2 相关知识 129
6.3.3 实现过程 135
6.4 案例18：首页旅游攻略导航 137
6.4.1 案例描述 137
6.4.2 相关知识 137
6.4.3 实现过程 142
6.5 案例综合练习 144
第七章 表格与表单 145
7.1 案例19：黄姚土特产销售表 145
7.1.1 案例描述 145
7.1.2 相关知识 145
7.1.3 实现过程 154
7.2 案例20：注册界面 157
7.2.1 案例描述 157
7.2.2 相关知识 158
7.2.3 实现过程 167
7.3 案例综合练习 170
第八章 CSS3基础应用 171
8.1 案例21：黄姚风景照片墙 171
8.1.1 案例描述 171
8.1.2 相关知识 171
8.1.3 实现过程 182
8.2 案例22：动态导航效果 186
8.2.1 案例描述 186
8.2.2 相关知识 186
8.2.3 实现过程 195
第九章 JavaScript基础 201
9.1 案例23：与网页对话 201
9.1.1 案例描述 201
9.1.2 相关知识 201
9.1.3 实现过程 204
9.2 案例24：控制字体大小 206
9.2.1 案例描述 206
9.2.2 相关知识 206
9.2.3 实现过程 214
9.3 案例25：商品详情提示 215
9.3.1 案例描述 215
9.3.2 相关知识 216
9.3.3 实现过程 221
9.4 案例26：照片集 223
9.4.1 案例描述 223
9.4.2 相关知识 223
9.4.3 实现过程 229
9.5 案例27：选项卡 233
9.5.1 案例描述 233
9.5.2 相关知识 233
9.5.3 实现过程 237
9.6 案例综合练习 241
第十章 JavaScript核心对象 242
10.1 案例28：秒杀商品 242
10.1.1 案例描述 242
10.1.2 相关知识 243
10.1.3 实现过程 250
10.2 案例29：抽取幸运观众 253
10.2.1 案例描述 253
10.2.2 相关知识 254
10.2.3 实现过程 257
10.3 案例30：文章的展开与收缩 259
10.3.1 案例描述 259
10.3.2 相关知识 260
10.3.3 实现过程 263
10.4 案例综合练习 265
第十一章 事件处理 267
11.1 案例31：旅游商品展示 267
11.1.1 案例描述 267
11.1.2 相关知识 268
11.1.3 实现过程 272
11.2 案例32：追随鼠标的公告框 274
11.2.1 案例描述 274
11.2.2 相关知识 274
11.2.3 实现过程 278
11.3 案例综合练习 279
第十二章 综合案例 280
12.1 网站开发流程 280
12.2 “黄姚古镇旅游网”网站开发 281
12.2.1 准备工作 282
12.2.2 网站公共部分模板开发 287
12.2.3 网站主要页面开发 290
12.3 网站发布 298
参考文献 301

1. 零基础玩转国产大模型DeepSeek [徐永冰 张帅 编著]
2. 网络工程师5天修炼（适配第6版考纲） [主编　朱小平 施游]
3. 信息系统项目管理师考试32小时通关（适用第4版考纲） [薛大龙]
4. 信息系统管理工程师考试32小时通关（适配第2版考纲） [薛大龙　刘伟]
5. 土木工程材料检测实训 [洪晓江 达则晓丽 钱波]
6. 科技信息检索与论文写作实用教程 [李振华]
7. 传统山水画论解读与实践 [陈钠 著]
8. Python数据库编程 [主编 殷树友 邢 翀]
9. 计算机基础实训指导 [主编 袁春萍 朱妮]
10. 嵌入式人工智能技术应用（数字教材） [主编 胡娜 杨国勇 晏廷荣]
11. Vienna整流器技术 [桂存兵 著]
12. 变频器与伺服应用 [陈刚 叶云飞]
13. 物联网工程设计与实践 [汤琳 李敏]
14. 炉边夜话——深入浅出话AI [汪建　著]
15. 电商运营与管理 [钟肖英 陈潇]
16. Java面向对象程序设计 [主编 姜春磊 陈虹洁]
17. 信息技术基础（Windows 10+WPS Office）（微课版） [主编　石利平　田辉平　谢盛嘉]
18. 人工智能应用 [主编　陈　萍　刘培培　陈孟军]
19. 大学生职业发展与就业指导 [主编　刘志坚]
20. 高级办公应用项目教程 [主编 屈晶 赵成丽]
21. 微信小程序开发项目实战（微课版） [主编 黄龙泉 郭峰 朱倩]
22. 企业档案工作实战宝典百问百答 [华俊 卢秀英 邵甜甜 著]
23. 计算机网络原理及应用 [主编 唐继勇 叶坤 孙梦娜]
24. 大学生创业基础 [主编 王丽莉 王 杨]
25. 船舶辅机 [主编 王连海 于洋 姜淑翠]
26. 大学生就业指导 [主编 王丽莉 董宴廷]
27. 系统架构设计师章节习题与考点特训 [主编 薛大龙 邹月平]
28. 高校学生工作探索与实践 [郭亮 著]
29. 大学生情商管理 [方雄 著]
30. 2023年长沙市会展业发展报告 [主编 周栋良]