本书依据高职院校计算机及相关专业在网页设计能力培养方面的具体要求，逐步培养高职学生的操作能力、应用能力、创新能力，采用项目式教学。本书共七个项目，分别是网页制作基础，初识HTML5，CSS3网页美
化，网页界面布局设计，列表、表格及表单，JavaScript网页特效，HTML5+CSS3高级应用。本书提供了丰富的案例，讲解由浅入深，方便读者自学。
本书适合作为高职院校网页制作课程的教材，也可作为网页制作爱好者的参考书。

？

党的二十大报告指出，“教育、科技、人才是全面建设社会主义现代化国家的基础性、战略性支撑”，在“实施科教兴国战略，强化现代化建设人才支撑”部分强调“为党育人、为国育才”。中国特色社会主义教育事业，就是要全面贯彻党的教育方针，落实立德树人根本任务，培养德智体美劳全面发展的社会主义建设者和接班人。

随着网络技术及互联网的发展与进步，网页制作技术也在不断更新。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。HTML5是构建Web内容的一种新语言描述方式，是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，是互联网的核心技术之一。HTML5+CSS3是目前网页制作的普遍选择。本书依据高职院校计算机及相关专业在网页设计能力培养方面的具体要求，逐步培养高职学生的操作能力、应用能力、创新能力，采用项目式教学。

本书共七个项目，包括网页制作基础，初识HTML5，CSS3网页美化，网页界面布局设计，列表、表格及表单，JavaScript网页特效，HTML5+CSS3
高级应用。
本书每个知识点都配有多个案例讲解，以加深读者对知识点的理解与掌
握；重点知识还配备了重点案例及具体操作步骤。本书速配有二维码，读者可扫描获取相关内容。
本书由吕红飞、申圣兵、周兴旺任主编，刘家乐和茹兴旺任副主编，何海燕、张亚娟、曾嵘娟、匡成宝、黄晓乾、陈杨柳及黄蓉参与编写。其中，项目一由吕红飞、何海燕编写；项目二由吕红飞、张亚娟编写；项目三
由茹兴旺、曾嵘娟编写；项目四由周兴旺、黄蓉编写；项目五由申圣兵、匡成宝编写；项目六由刘家乐、陈杨柳编写；项目七由申圣兵、黄晓乾编写。
由于编者水平有限，书中难免存在不足之处，敬请各位同行和广大读者批评指正，以帮助我们不断完善和改进。
编？者
2023年8月
？

项目一？网页制作基础 1

任务 1 Web 基本概念 2

知识储备 2

1. 认识网页  2

2. 相关名词概念  3

任务 2？网页制作入门 4

知识储备 4

1. HTML 的发展 4

2. CSS 简介  5

3. JavaScript 7

4. 浏览器 8

任务 3？网页制作工具 9

知识储备9

项目总结  14

项目二？初识 HTML5 15

任务 1 HTML5 概述 . 16

知识储备16

1. HTML 文档基本格式 16

2. HTML5 语法 17

任务 2 HTML5 文本控制标记 18

知识储备18

1. 标题和段落标记  18

2. 文本格式化标记  19

3. 特殊字符标记  20

任务 3 HTML5 图像标记 20

知识储备20

1. 常用图像格式  20

2. 图像标识  21

项目总结  24

项目三？CSS3 网页美化 25

任务 1 CSS 基础  26

知识储备26

1. CSS 样式规则  26

2. 引入 CSS  27

3. CSS 基础选择器 28

任务 2 CSS 控制文本样式 32

知识储备32

1. CSS 字体样式属性 32

2. CSS 文本外观属性 34

任务 3 CSS 高级特性 35

知识储备36

1. CSS 复合选择器 36

2. CSS 层叠性与继承性 36

3. CSS 优先级  36

项目总结  37

项目四？网页界面布局设计. 38

任务 1 PS 网页界面设计概念. 39

知识储备39

1. 网页界面布局  39

2. PS 网页设计 42

任务 2？湖南高铁职院首页 PS 界面设计44

知识储备45

1. 色彩搭配  45

2. 布局设计  45

3. 内容清晰  45

4. banner 广告 45

项目总结  72

项目五？列表、表格及表单 73

任务 1？列表标记及应用 74

知识储备74

1. 无序列表  74

2. 有序列表  74

3. 自定义列表  75

任务 2？表格标记及应用 76

知识储备77

1. HTML 表格 77

2. HTML 表格边框属性 77

3. HTML 表格表头 78

4. HTML 表格标签 79

任务 3？表单标记及应用 84

知识储备84

1. HTML 表单概述 84

2. 表单实例  85

3. HTML 表单输入元素 85

4. 综合表单实例  87

项目总结  92

项目六？JavaScript 网页特效 93

任务 1？动态改变页面背景颜色  94

知识储备94

1. JavaScript 概述 94

2. 在网页中调用 JavaScript  95

任务 2？登录页面验证功能 98

知识储备99

1. JavaScript 语法 99

2. JavaScript 变量、数据类型、数组、表达式和运算符 99

3. JavaScript 的函数 101

4. JavaScript 对象 102

5. JavaScript 语句 106

6. JavaScript 的触发事件  108

项目总结  111

项目七？HTML5 + CSS3 高级应用112

任务？在线购物网站的制作113

知识储备 113

1. 在线购物网站网页组成的特点 113

2. 在线购物网站的设计 113

项目总结 140

？

      吕红飞，2005年毕业于兰州交通大学信息与计算科专业（本科），2010年于兰州交通大学完成计算机技术硕士学位的攻读。就职于湖南高速铁路职业技术学院在教学改革工作中，将高等职业教育教学要求、岗位实际要求、国家职业标准三者相结合，初步形成了具有高职特色的“三位一体”的岗位能力培养教学模式。在加强教学改革及常规教学的过程中，还不断进行论文的撰写。近两年发表独著论文5篇。2013年，主持了湖南省教育厅科学研究项目《高等学校校园电子导航系统的研究与实现》，并顺利结题； 2018年，成功申报衡阳市社科基金项目《产教融合新时代，智慧学习工场新模式的探索与研究》。担任主编的教材3本，担任副主编的教材10本，参编教材2本。

      申圣兵，湖南高速铁路职业技术学院物联网教研室主任，副教授，软件设计师，近五年来，主持省级课题3项，市级课题1项，院级课题2项，发表研究论文20余篇，主编和参编各类教材6本；2018、2019年指导学生参加移动互联网应用开发技能竞赛获得省赛三等奖3项，2020、2021指导学生参加物联网应用技术技能竞赛获得省赛二等奖3项、三等奖1项。

      周兴旺，湖南祁东人，湖南高速铁路职业技术学院讲师，网络工程师，湖南省综合评标专家。主持参与省级课题3项，主持参与市级课题4项，发表论文10多篇；参编《全国计算机等级考试一级MSOffice》、《办公软件高级应用案例教程》、《多媒体应用技术》、《计算机等级考试指导教材》、《计算应用高级办公自动化》等10本教材；在湖南省职业院校信息化教学大赛中荣获高职信息化课堂教学公共基础课程组项目一等奖，衡阳市职业院校首届教师专业技能竞赛中荣获计算机及应用专业壹等奖；湖南省中等学校信息技术专业类教师竞赛二等奖；指导学生参加湖南省职业技能大赛荣获一等奖；指导学生参加全国信息应用技术水平大赛平面设计省级二等奖2项；指导学生参加湖南省职业院校冬季技能竞赛高职计算机应用技术专业网络应用设计项目荣获三等奖，指导学生参加中国大学生计算机设计大赛荣获一等奖1项、二等奖3项、三等奖3项。

？

本书依据高职院校计算机及相关专业在网页设计能力培养方面的具体要求，逐步培养高职学生的操作能力、应用能力、创新能力，采用项目式教学。
？