网页设计与制作

考点导向： 紧扣等级标准考点

循序渐进： 内容全面由浅入深

知行合一：理论实践紧密结合

直观易学：图文并茂效果清晰

前 言

新一轮科技革命与信息技术革命的到来，推动了产业结构的调整与经济转型升级发展新业态的出现。战略型新兴产业的爆发式发展对新时代产业人才的培养提出了新的要求与挑战。目前，企业对 Web 前端开发工程师的需求量极大，全国总缺口每年近百万人。随着移动互联网技术的高速发展，网站在静态页面的基础上添加了各类桌面软件，因此网页不再仅仅承载单一的文字和图片，而且要求具备炫酷的页面交互和跨终端的适配兼容功能，使用富媒体使网页内容更加生动，从而让用户有更好的使用体验，这些都是基于Web前端技术来实现的。

“网页设计与制作”是Web前端技术的基础，也是计算机专业课程体系中的专业基础课，其涉及的内容和技术是应用面比较广且比较容易学习和掌握的。“网页设计与制作”是大专院校计算机专业学生的必修课，同时也可以作为非计算机专业学生的选修课或限选课。

本书以《Web 前端开发职业技能等级标准》中要求的职业素养和岗位技术技能为重点、以专业技能为模块、以工作任务为驱动进行编写，使读者对Web前端开发的技术体系能有更系统、更清晰的认识。

通过本书的学习，初学者可以学会并掌握网页设计和网站开发的实用技能。全书共分8章，内容涉及网页设计基础知识、网页制作工具Dreamweaver、文本与文档、图像和多媒体、超链接、表格和层、表单及CSS等。本书知识全面、概念清晰，以实用为目的，通过浅显易懂的知识讲解，再配以典型案例进行知识技能的强化，使读者容易掌握相关知识，使学习不再枯燥。

本书主要有以下几方面特色。

1．引入《Web前端开发职业技能等级标准》的考点

以《Web前端开发职业技能等级标准》的考点为知识点，以项目案例为载体，系统地讲解考取Web前端开发职业技能等级证书所需的知识考点和技能考点。

2．内容全面，由浅入深

本书详细介绍了Web前端开发中涉及的HTML和CSS的内容和技巧，并重点讲解了学习过程中难以理解和掌握的知识点，降低了学习难度。

3．理论和实践相结合

本书每章都配有一定数量的实用案例，在全面、系统介绍各章知识内容的基础上，还提供了可以整合综合知识的案例，通过各种案例将理论知识和实践结合起来。

4．图文并茂

本书的案例代码大部分配有相应的运行结果图，直观的效果使读者可以获得感性认识，从而提高学习效率。

本书由黑龙江农业职业技术学院的李佼辉、于新奇任主编，栾奕娜、聂树成、车延雪、任雪冬任副主编，王树军任主审。本书的第1、2、8章由李佼辉编写，第3章及附录由栾奕娜编写，第4章由任雪冬编写，第5、6章由于新奇编写，第7章由聂树成、车延雪编写，参与编写的还有东软教育科技集团元宇宙研究院副院长张明宝教授，对全书实训项目的代码进行验证、校对和补充。审校工作由王树军完成，李佼辉、于新奇对全书进行了内容统筹、章节结构设计和统稿。

由于编者水平有限，书中难免存在不足之处，还恳请广大读者不吝赐教。

本书线上课程总码

编 者

2025年1月

前言

第1章 网页设计基础知识 1
1.1 互联网基础知识 1
1.1.1 Internet与Web 1
1.1.2 URI、URL、URN 2
1.1.3 服务器与浏览器 2
1.2 网页的基础知识 3
1.2.1 网页的基本元素 3
1.2.2 静态网页 5
1.2.3 动态网页 5
1.3 常见的网站类型 6
1.4 网页制作软件及标准技术 9
1.4.1 常用的网页制作软件 9
1.4.2 网页制作标准技术 10
本章小结 11
第2章 网页制作工具Dreamweaver 12
2.1 Dreamweaver简介 12
2.2 Dreamweaver的基本操作 17
本章小结 19
第3章 文本与文档 20
3.1 网页文本编辑 20
案例1 制作一个含文本的网页 20
案例2 给网页文本编辑样式 24
实战1 制作一个百度诗词页面 31
实战2 制作一个腾讯新闻网菜单 31
3.2 网页文档编辑 31
案例1 制作“古诗词译文”网页 31
案例2 使用项目编号制作“排行榜”
网页 36
实战1 制作“公司简介”网页 38
实战2 制作“美容护肤”网页 39
本章小结 40
第4章 图像和多媒体 41
案例1 在网页中插入图像 41
案例2 在网页中插入多媒体 47
实战1 制作一个宠物狗网店网页 59
实战2 制作准妈妈课堂网页 60
本章小结 60
第5章 超链接 61
5.1 超链接的基本用法 61
案例1 制作一个文本的超链接 61
案例2 制作图片超链接 64
案例3 制作商品信息展示 65
实战 制作手机商品展示 73
5.2 锚链接的应用 73
案例1 制作锚链接 74
案例2 制作电子邮件链接 78
5.3 超链接的综合应用 79
案例 制作网页小说 79
实战 制作网上教程 84
本章小结 85
第6章 表格和层 86
6.1 表格在网页中的应用 86
案例1 创建表格 86
案例2 跨行、跨列的表格 89
案例3 制作表格图文混排—商品
展示栏页面 93
实战1 制作学生成绩表 95
实战2 进行简单的图文混排 96
6.2 层布局 96
案例1 简单的层布局 96
案例2 使用混合布局实现家装网站 104
实战 混合布局 108
本章小结 109
第7章 表单 110
案例1 用户注册网页 110
案例2 会员注册网页 122
实战1 用户注册页面 138
实战2 健康测试网页 139
实战3 国际航空网页 140
本章小结 140
第8章 CSS 141
8.1 CSS选择器 141
案例1 标签选择器 141
案例2 类选择器 145
案例3 ID选择器 148
案例4 背景及偏移量 151
实战1 文本属性样式 156
实战2 背景属性 156
8.2 CSS的应用及优先级 156
案例1 外部样式表 156
案例2 行内样式表 161
案例3 样式表优先级 163
案例4 CSS优先级 165
本章小结 170
Web前端开发（1+X）考试的考点知识 171
Web前端开发初级（1+X）理论考试样题 176
Web前端开发初级（1+X）实操考试样题 182
Web前端开发初级（1+X）理论考试样题答案 194
Web前端开发初级（1+X）实操考试样题答案 195
参考文献 197

1. Linux系统管理（openEuler版） [主编 许兴鹍 黄君羡]
2. Web前端开发从学到用完美实践 [阮晓龙 冯顺磊 编著]
3. 用英语讲中国故事（全视频 彩色版）上、下册 [主编　谢亮亮　汪洋]
4. 新时代大学生美育教育 [穆林 刘苍劲 彭圣芳]
5. 电子商务英语 [丁文毅 严慧]
6. 智能可穿戴项目化教程 [曾文波 陈赵云]
7. 视觉设计解析与实战教程 [姜春磊　杨晓]
8. 电子产品制图与制版案例教程 [邹莉莉　苏文斌　贺小艳]
9. 设计新维度：CMF元素与创新产品设计 [彭小鹏]
10. 园林树木识别与应用 [主编 张玉泉]
11. 文本信息处理与应用 [主编　何黎松　姚香秀]
12. 工业机器人编程及应用（第二版） [主编 向艳芳 胡月霞]
13. C语言程序设计（第二版） [主编 刘祖珉 赵仕波]
14. 数据分析与应用 [主编　孙伟　王兰芹]
15. Linux操作系统配置与管理项目化教程（第二版） [主编 白玉羚 刘金明 闫 淼]
16. Ansys SpaceClaim直接建模与仿真指南 [蔡宜时 编著]
17. 基于大数据的智慧农业管理平台关键技术研究与实践 [周永福 著]
18. 健美运动 [戴显岩]
19. Python程序开发基础（AI+微课版） [赵艳莉　曾鑫]
20. 大学生心理困境突围之路 [张珏 著]
21. 机器学习基础与实践 [主编　李晓峰　胥文婷　李云波]
22. 大模型应用实战 DeepSeek＋即梦AI＋剪映重塑创作 [丁红　杨彦彦　丁丁　编著]
23. HarmonyOS从入门到精通 [陈赵云　周永福　杨　浪]
24. 用英语发现世界：欧美文化篇 [李小丽　张薇　编著]
25. 大学体育教程 [戴显岩]
26. 新一代信息技术 [李佼辉 任雪冬]
27. 轨道交通类专门用途英语教程 [李德华主编 商晔副主编]
28. 建设工程项目团队知识异质性对团队绩效的影响研究 [胡可]
29. 新时代元阳梯田 云南现代化高原立体灌区 前世 今生 未来 [云南省水利水电勘测设计研究院 ]
30. 网络工程师章节习题与考点特训（适配第6版考纲） [夏杰 编著]