网页设计与制作

引入《Web 前端开发职业技能等级标准》的考点，案例丰富、突出实践

详细介绍Web 前端开发中涉及的HTML 和CSS 的内容及技巧

大部分案例代码配有运行结果图，效果直观、易于理解

通过各种案例将理论知识与实践操作结合起来

突出技能训练，符合1+X 精神

新一轮科技革命与信息技术革命的到来，推动了产业结构调整与经济转型升级发展新业态的出现。战略型新兴产业的快速爆发式发展对新时代产业人才的培养提出了新的要求与挑战。目前，企业对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章由车延雪编写。审校工作由王树军完成，李佼辉、聂树成对全书进行了内容统筹、章节结构设计和统稿。在本书编写过程中，赵金利也提供了一定的帮助。

由于编者水平有限，书中难免存在不足之处，恳请广大读者不吝赐教并提出宝贵意见。

前言

第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 DW的基本使用方法 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
实战 制作iPhone11商品展示 73
5.2 锚链接的应用 73
案例1 制作锚链接 74
案例2 制作电子邮件链接（在案例1基础上
完成） 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. 庭院风骨—树、灌、篱 [创意房主 著]
2. Python语言程序设计教程 [郭其标 房宜汕]
3. 微积分（经管类）教程篇（下册） [曹海军 王海棠 周玲丽]
4. 微积分（经管类）教程篇（上册） [曹海军 王海棠 周玲丽]
5. 微积分（经管类）导学篇（上册） [王海棠 曹海军 周玲丽]
6. 网站前端技术案例教程（HTML+CSS+JavaScript）（第二版） [黄华升]
7. 线性代数 [主编 史昱 陈凤欣]
8. 电力电子技术课程学习及实验指导 [主编 陈荣]
9. 成长对话：青春的榜样 [主编　施端银　黄武刚　应巨林]
10. 人工智能应用基础 [主编 杨缨 李佳]
11. 中华水文化（慕课版）（第二版） [毕雪燕 杨华轲 罗玲谊 等编著]
12. 电路与电子技术Ⅱ——电路分析基础 [主编 陈晓 金哲]
13. 飞机维修专业英语——飞机系统（第二版） [赵迎春]
14. 英语大爆炸：跟趣味情景剧学口语（微课版） [秦然　编著]
15. 机械工程制图任务跟踪训练 [主编 王瑞清 赵金考 周彦云 ]
16. 机械工程制图 [主编 覃国萍 刘百顺 禹晨]
17. 平面设计与制作项目化教程 [主编　李晨]
18. 后期影像剪辑技术 [主编　郭建伟]
19. 人工智能概论（第二版） [主编　任云晖　丁红　徐迎春 ]
20. 信息时代美育之道 [主编　刘宏宇　黎娅]
21. 数字媒体交互设计项目式教程（微课版） [主编　苏陆]
22. 动画运动规律项目实例解析（微课版） [孙珊珊　袁维坤]
23. 自然语言处理 [主编　冯建周]
24. 新媒体内容创作实务（微课版） [主编　覃思源]
25. 人工智能基础 [主编 余平 张春阳]
26. 人工智能导论 [主编 王飞 潘立武]
27. Amazing！儿童英语自然拼读分级教材（全8册） [王玲　编著]
28. Spark大数据处理技术 [主编　刘仁山　周洪翠　庄新妍]
29. 毫无PS痕迹—你的第一本Photoshop书（第二版） [赵鹏 著]
30. 电视新闻制作（活页式） [主编 王晓翠 刘传琳]