网页设计与制作（活页式）

　　“网页设计与制作”是一门专业必修课，以培养学生的网页设计与制作能力为出发点，本书参考《Web前端开发》职业技能证书标准，对接1+X Web前端开发等级考试和Web前端开发岗位需求，重构课程内容，以学习导航为点、学习环节为线、思政案例为面，介绍使用HTML、CSS及JavaScript进行网页设计与制作的一般技巧。全书共十一个情境，从逻辑上可分为三大部分，前五个情境为第一篇基础篇，主要介绍网页中的主要组成元素—文本、图片、表格和超链接等知识；情境六至情境九为第二篇进阶篇，主要介绍模板、表单、CSS、JavaScript等知识；最后两个情境为第三篇应用篇，主要从实际应用的角度出发，综合前面所学的知识进行综合网站的实现、测试及发布。本书以实用为基本出发点，不仅包括各种网页设计与制作的基础理论，还强调了它们的具体应用，使读者既能打下坚实的理论基础，又能掌握实际的操作技能。本书内容经过了长期的教学检验，证明是符合当下职业教育发展要求的。本书可作为高职院校、成人高校和培训班的“网页设计与制作”“Web前端开发”等课程的教材或参考书，也适合广大网页制作爱好者或相关从业人员使用。本书配套教学PPT、案例代码、教学视频等资源，可登录华信教育资源网（http：//www.hxedu.com.cn）注册后免费下载，如有问题可与电子工业出版社联系（E-mail：hxedu@phei.com.cn）。

　　刘磊，男，副教授，江西南昌人，现就职于江西工业职业技术学院，曾以主编、副主编身份分别出版教材《C语言程序设计》《计算机应用基础》。

目　录
第一篇　基础篇
情境一　网页设计与制作概述 3
【学习导航】 3
1　制作第一个网页 3
2　职业技能与知识点要求 3
3　素质目标 3
【学习环节】 3
1　学习路线 3
2　知识小天地 4
2.1　认识网页 4
2.2　网页概念 4
2.3　静态网页和动态网页 5
2.4　Web服务器和客户端 5
2.5　统一资源定位器（URL） 6
2.6　网页制作的基本技术 6
2.7　常见网页制作工具 7
【考核评价】 12
【同步技能考点测试】 12
【课后拓展】 12
情境二　制作纯文本网页 13
【学习导航】 13
1　制作革命根据地网页 13
2　职业技能与知识点要求 13
3　素质目标 13
【学习环节】 13
1　学习路线 13
2　知识小天地 14
2.1　HTML发展历程 14
2.2　HTML特点 14
2.3　＜!DOCTYPE＞标记 15
2.4　＜html＞＜/html＞标记 15
2.5　＜head＞＜/head＞标记 15
2.6　＜meta /＞标记—设置编码格式 15
2.7　＜meta /＞标记—设置网页描述 15
2.8　＜meta /＞标记—设置作者信息 16
2.9　＜meta /＞标记—设置页面自动刷新和跳转 16
2.10　＜title＞＜/title＞标记 16
2.11　＜link /＞标记 16
2.12　＜script＞＜/script＞标记 17
2.13　＜body＞＜/body＞标记 17
2.14　＜hn＞＜/hn＞标题标记 17
2.15　＜p＞＜/p＞段落标记 18
2.16　＜hr /＞水平线标记 19
2.17　＜br /＞换行标记 19
2.18　＜font＞＜/font＞字体标记 20
2.19　字体样式标记 21
【考核评价】 24
【同步技能考点测试】 25
【课后拓展】 25
情境三　制作图文混排网页 26
【学习导航】 26
1　制作中国古代科技文化成就介绍网页 26
2　职业技能与知识点要求 26
3　素质目标 26
【学习环节】 26
1　学习路线 26
2　知识小天地 27
2.1　无序列表 27
2.2　有序列表 28
2.3　自定义列表 29
2.4　常用图片格式 30
2.5　＜img＞图片标记 31
2.6　图片路径的表示方法 33
【考核评价】 39
【同步技能考点测试】 40
【课后拓展】 40

情境四　制作表格布局的网页 41
【学习导航】 41
1　制作历史人物故事网页 41
2　职业技能与知识点要求 41
3　素质目标 41
【学习环节】 41
1　学习路线 41
2　知识小天地 42
2.1　表格标记 42
2.2　合并单元格 45
【考核评价】 51
【同步技能考点测试】 52
【课后拓展】 52
情境五　制作包含超链接的网页 53
【学习导航】 53
1　绿水青山网站的设计与制作 53
2　职业技能与知识点要求 53
3　素质目标 53
【学习环节】 54
1　学习路线 54
2　学习小天地 54
2.1　超链接的定义 54
2.2　超链接的分类 54
2.3　文本超链接 54
2.4　图像超链接 55
2.5　锚点超链接 57
【考核评价】 65
【同步技能考点测试】 65
【课后拓展】 65
第二篇　进阶篇
情境六　使用模板制作网页 69
【学习导航】 69
1　书籍网页的设计与制作 69
2　职业技能与知识点要求 69
3　素质目标 69
【学习环节】 69
1　学习路线 69
2　知识小天地 70
2.1　新建模板 70
2.2　管理模板 72
【考核评价】 78
【同步技能考点测试】 78
【课后拓展】 78
情境七　制作注册网页 79
【学习导航】 79
1　个人信息注册网页制作 79
2　职业技能与知识点要求 79
3　素质目标 79
【学习环节】 79
1　学习路线 79
2　知识小天地 80
2.1　表单的作用 80
2.2　表单标记 80
【考核评价】 88
【同步技能考点测试】 89
【课后拓展】 89
情境八　使用CSS美化网页 90
【学习导航】 90
1　中国航天成就网页的设计与制作 90
2　职业技能与知识点要求 90
3　素质目标 90
【学习环节】 91
1　学习路线 91
2　知识小天地 91
2.1　什么是CSS 91
2.2　CSS的引入方式 91
2.3　CSS的两个特性 92
2.4　CSS的基本语法 93
2.5　CSS选择器的分类 93
2.6　CSS的属性 98
【考核评价】 121
【同步技能考点测试】 121
【课后拓展】 121
情境九　使用JavaScript制作交互式注册页面 122
【学习导航】 122
1　交互式注册页面的设计与制作 122
2　职业技能与知识点要求 122
3　素质目标 122
【学习环节】 122
1　学习路线 122
2　知识小天地 123
2.1　JavaScript的组成 123
2.2　JavaScript的引用 124
2.3　JavaScript的语法 124
2.4　JavaScript的关键字 125
2.5　JavaScript的变量、数据类型和声明 125
2.6　JavaScript的标识符 125
2.7　JavaScript的全局属性 126
2.8　JavaScript的运算符 126
2.9　JavaScript的分支循环 128
2.10　JavaScript的数组 130
2.11　JavaScript的字符串 132
2.12　JavaScript的正则表达式 133
2.13　JavaScript的函数 136
2.14　BOM对象 137
2.15　DOM对象 140
2.16　JavaScript的事件 142
【考核评价】 149
【同步技能考点测试】 150
【课后拓展】 150
第三篇　应用篇
情境十　综合网站规划与设计 153
【学习导航】 153
1　学习网站的规划与设计 153
2　职业技能与知识点要求 153
3　素质目标 153
【学习环节】 153
1　学习路线 153
2　知识小天地 154
2.1　网站设计与制作流程 154
2.2　定位网站主题 154
2.3　收集网站素材 155
2.4　设计网站导航菜单 155
2.5　设计网站LOGO 155
2.6　设计网站布局和风格 156
【考核评价】 161
【同步技能考点测试】 162
【课后拓展】 162
情境十一　综合网站的实现、测试与发布 163
【学习导航】 163
1　学习网站的实现、测试与发布 163
2　职业技能与知识点要求 163
3　素质目标 163
【学习环节】 163
1　学习路线 163
2　知识小天地 164
2.1　文件命名规范 164
2.2　HTML规范 165
2.3　CSS代码规范 165
2.4　JavaScript代码规范 165
2.5　在网页中插入视频 165
2.6　网站的测试 166
2.7　网站的发布 167
【考核评价】 174
【同步技能考点测试】 174
【课后拓展】 175