网页设计与制作微课教程（第4版）

　　该书由从事“网页设计与制作”课程教学的优秀教师和经验丰富的企业网页设计师合作共同编写而成。全书共14个单元：单元1、2介绍了网页类型、网站建设流程、HTML5基础语法、网页版式与色彩搭配等基础知识：单元3～13系统地介绍了Dreamweaver CC软件的功能和使用、CSS3样式的定义和应用、设计制作网页的方法技巧、运用JavaScript实现网页交互效果等内容；单元14是两个网站设计制作的案例，通过学习可以提高读者设计制作综合类网站的能力，本单元也可作为实训周的实训参考内容。该书配有丰富的教学资源，书中重要知识点和操作技能难点可以通过配套的微课视频进行学习。通过由简到繁、由易到难、承前启后的阶梯式系列单元任务，读者能够轻松地掌握综合运用HTML、CSS和JavaScript设计制作网页的方法和技能，并起到举一反三的效果。该书内容组织形式新颖、学习任务明确、操作步骤讲解详尽、重点突出，非常符合高职高专学生的认知规律。《网页设计与制作微课教程（第4版）》可作为高职高专计算机网络技术、软件技术、电子商务、计算机应用技术、数字媒体技术、动漫设计、会展策划与管理，以及相关专业的教材或教学辅导书，也可作为Web前端开发X证书（职业技能等级证书）配套教材和社会各类培训机构的培训教材，以及广大网页设计爱好者的自学参考书。

　　李敏，副教授，学科带头人，山东大学计算机软件与理论专业在职硕士研究生，上海华东师范大学访问学者，多年从事教育教学研究工作，并先后承担《网页设计与制作》、《网站建设与维护》、《图形图像处理技术》等课程的教学任务，连续多年被评为优秀教师。主编***规划教材9部，发表论文18篇，负责省级专业建设项目2项，主持省级以上科研项目2项，主持省级以上研究课题5项，负责省级精品课程1门，获得省级以上教学成果奖3项。具有多媒体制作员二级（技师）职业资格，中、高职电子商务专业***职业技能大赛裁判员，校外专业建设专家，合作企业技术顾问。

单元1 网页设计与制作基础\t1
任务1．1　认识网页与网站\t1
任务陈述\t1
相关知识与技能\t2
1．1．1　什么是网页\t2
1．1．2　网页类型\t2
1．1．3　网页基本元素\t3
1．1．4　网页的构成\t5
1．1．5　网页设计常用基本语言\t6
1．1．6　什么是网站\t7
1．1．7　网址与域名\t7
任务实施\t8
1．1．8　网站建设的一般流程\t8
任务拓展\t9
1．1．9　实践演练――京东官网页面体验\t9
任务1．2　使用HTML制作简单的网页\t9
任务陈述\t9
相关知识与技能\t9
1．2．1　HTML5简介\t9
1．2．2　HTML5基本语法与结构\t11
1．2．3　常用HTML5标签\t12
任务实施\t22
1．2．4　使用记事本编辑简单网页\t22
任务拓展\t23
1．2．5　制作滚动图片链接\t23
单元实训1．3　制作个人简介网页\t24
思政点滴\t24
单元练习题\t25
单元2 网页版式设计与色彩搭配\t26
任务2．1　网页版式设计\t26
任务陈述\t26
相关知识与技能\t27
2．1．1　版式设计概述\t27
2．1．2　网页版式的尺寸和构成要素\t27
2．1．3　网页版式设计的风格\t28
2．1．4　网页版式设计原则\t30
2．1．5　网页版式设计的视觉流程\t30
2．1．6　网页版式设计的步骤\t31
任务实施\t31
2．1．7　欣赏与解析不同风格网页作品\t31
任务拓展\t32
2．1．8　总结不同主题网站页面版式设计风格\t32
任务2．2　网页色彩搭配\t33
任务陈述\t33
相关知识与技能\t33
2．2．1　色彩基础知识\t33
2．2．2　色彩的视觉效果\t34
2．2．3　网页中色彩的作用\t36
2．2．4　网页配色原理\t36
2．2．5　网页配色技巧\t37
2．2．6　网页中色彩的表示\t37
任务实施\t38
2．2．7　总结不同主题网站的配色风格\t38
任务拓展\t38
2．2．8　网页配色练习\t38
单元实训2．3　校友网首页效果图设计\t39
思政点滴\t39
单元练习题\t40
单元3 Dreamweaver CC工具的使用\t41
任务3．1　认识中文版Dreamweaver CC\t41
任务陈述\t41
相关知识与技能\t41
3．1．1　Dreamweaver CC界面介绍\t41
3．1．2　Dreamweaver CC初始化设置\t45
任务实施\t46
3．1．3　在Dreamweaver CC中创建、保存网页文件\t46
任务拓展\t47
3．1．4　在Dreamweaver CC中创建简单文本页面\t47
3．1．5　预览网页文档\t47
任务3．2　规划与创建站点\t48
任务陈述\t48
相关知识与技能\t48
3．2．1　站点概述\t48
3．2．2　规划站点\t49
任务实施\t49
3．2．3　创建本地站点\t49
3．2．4　管理站点\t51
任务拓展\t53
3．2．5　创建“欢迎光临”网页\t53
3．2．6　设置页面属性\t53
单元实训3．3　制作“我的网上家园”欢迎页面\t58
思政点滴\t59
单元练习题\t59
单元4 CSS3样式\t60
任务4．1　定义CSS3基础样式\t60
任务陈述\t60
相关知识与技能\t60
4．1．1　CSS3简介\t60
4．1．2　CSS3样式设置规则\t62
4．1．3　CSS3基本选择器\t63
4．1．4　CSS3样式的调用\t65
任务实施\t66
4．1．5　布局及定义CSS3基础样式\t66
4．1．6　链接或导入外部CSS3样式\t73
4．1．7　查看CSS3样式\t74
4．1．8　编辑与删除CSS3属性\t74
4．1．9　常用CSS3属性含义及属性值\t74
任务拓展\t76
4．1．10　使用CSS美化网页\t76
任务4．2　CSS3高级特性及应用\t78
任务陈述\t78
相关知识与技能\t78
4．2．1　CSS3的新增选择器\t78
4．2．2　CSS3的特性\t80
任务实施\t81
4．2．3　使用CSS3设置文字特效\t81
任务拓展\t83
4．2．4　CSS3浏览器兼容性设置\t83
单元实训4．3　使用CSS3样式设计新浪新闻网页\t84
思政点滴\t86
单元练习题\t86
单元5 网页文本和图像\t87
任务5．1　制作文本类网页\t87
任务陈述\t87
相关知识与技能\t87
5．1．1　在网页中添加文本元素\t87
5．1．2　在网页中创建与设置列表\t88
任务实施\t90
5．1．3　制作唐诗赏析网页\t90
5．1．4　设置文本属性\t91
5．1．5　使用CSS设置段落样式\t93
任务拓展\t94
5．1．6　插入特殊字符、水平线和日期\t94
任务5．2　在网页中插入图像\t96
任务陈述\t96
相关知识与技能\t96
5．2．1　网页中常用的图像格式\t96
任务实施\t96
5．2．2　在网页中添加图像元素\t96
5．2．3　设置网页图像属性\t97
5．2．4　用CSS设置网页图像样式\t98
5．2．5　用CSS设置网页的背景图像\t100
任务拓展\t101
5．2．6　插入鼠标经过图像\t101
5．2．7　图文混排――设计制作电影介绍网站页面\t102
单元实训5．3　设计制作图书推荐网页\t104
思政点滴\t105
单元练习题\t106
单元6 网页超链接与导航\t107
任务6．1　为网页增加超链接元素\t107
任务陈述\t107
相关知识与技能\t107
6．1．1　超链接概述\t107
6．1．2　创建各类超链接\t109
任务实施\t112
6．1．3 为腊八节网页添加超链接\t112
任务拓展\t114
6．1．4　用CSS设置超链接\t114
6．1．5　创建图像地图\t115
任务6．2　设计网页导航\t115
任务陈述\t115
相关知识与技能\t116
6．2．1　网页导航概述\t116
6．2．2　网页导航分类\t116
6．2．3　网页导航方向\t119
任务实施\t119
6．2．4　为“中国地理”网页增加垂直方向导航\t119
任务拓展\t122
6．2．5　为“中国地理”网页增加水平方向导航\t122
单元实训6．3　设计制作“点点星空”网站页面\t124
思政点滴\t126
单元练习题\t126
单元7 表格化网页布局\t127
任务7．1　表格的插入与编辑\t127
任务陈述\t127
相关知识与技能\t127
7．1．1　认识表格\t127
7．1．2　表格标签\t128
7．1．3　表格属性面板\t128
任务实施\t129
7．1．4　插入表格\t129
7．1．5　编辑表格\t130
任务拓展\t132
7．1．6　美化表格\t132
任务7．2　使用表格布局“图书资源网”首页\t132
任务陈述\t132
相关知识与技能\t133
7．2．1 “图书资源网”首页效果分析\t133
任务实施\t133
7．2．2　插入与编辑表格\t133
7．2．3　在表格中插入网页元素\t134
7．2．4　导入表格式数据\t135
任务拓展\t136
7．2．5　进一步美化“图书资源网”首页\t136
单元实训7．3　使用表格布局两个不同主题的网页\t137
7．3．1　实训一　设计制作“旅游信息网”\t137
7．3．2　实训二　设计制作“时尚礼品网”\t138
思政点滴\t140
单元练习题\t141
单元8 使用Div+CSS布局网页\t142
任务8．1　设计制作“古诗欣赏”网页\t142
任务陈述\t142
相关知识与技能\t142
8．1．1　盒子模型\t142
8．1．2　元素的定位\t144
任务实施\t144
8．1．3 使用盒子模型设计“古诗欣赏”网页\t144
任务拓展\t146
8．1．4　模拟实现Windows10桌面效果\t146
8．1．5　Div标签与span标签\t148
任务8．2　设计个人博客页面\t149
任务陈述\t149
相关知识与技能\t150
8．2．1　常用Div+CSS布局版式\t150
任务实施\t154
8．2．2　使用Div+CSS布局个人博客页面\t154
任务拓展\t158
8．2．3　定位在网页布局中的应用\t158
单元实训8．3　Div+CSS网页布局案例\t160
8．3．1　使用Div+CSS实现婚纱网站最新作品列表设置\t160
8．3．2　使用Div+CSS布局学院教学成果申报网站首页\t161
思政点滴\t162
单元练习题\t162
单元9 多媒体网页和网页特效\t164
任务9．1　制作多媒体网页\t164
任务陈述\t164
相关知识与技能\t164
9．1．1 认识多媒体元素\t164
任务实施\t167
9．1．2　制作“电子相册”网页\t167
任务拓展\t169
9．1．3　制作休闲娱乐多媒体网页\t169
任务9．2　创建网页特效\t171
任务陈述\t171
相关知识与技能\t171
9．2．1　行为概述\t171
9．2．2　动作与事件\t172
9．2．3　添加行为\t174
任务实施\t174
9．2．4　制作网页加载时弹出公告页\t174
9．2．5　使用行为设置交换图像特效\t175
9．2．6　使用行为设置文本特效\t177
任务拓展\t179
9．2．7　使用行为设置跳转菜单效果\t179
单元实训9．3　制作多媒体网页和创建网页特效案例\t181
9．3．1　实训一　制作动态的“美食展示”网页\t181
9．3．2　实训二　设置变换图像的导航栏\t181
思政点滴\t182
单元练习题\t183
单元10 使用表单对象\t184
任务10．1　设计会员注册网页\t184
任务陈述\t184
相关知识与技能\t185
10．1．1　表单\t185
10．1．2　表单对象\t186
任务实施\t188
10．1．3　布局会员注册网页\t188
10．1．4　插入文本域\t189
10．1．5　插入单选按钮\t190
10．1．6　插入复选框\t191
10．1．7　插入选择\t192
10．1．8　插入按钮\t193
单元实训10．2　表单的应用\t193
10．2．1　实训一　设计网上报名页面\t194
10．2．2　实训二　设计客户调查页面\t194
思政点滴\t195
单元练习题\t195
单元11 使用JavaScript实现网页的交互\t197
任务11．1　使用JavaScript实现下拉菜单\t197
任务陈述\t197
相关知识与技能\t198
11．1．1　JavaScript简介\t198
11．1．2　JavaScript的使用方法\t198
11．1．3　JavaScript语言基础\t200
11．1．4　流程控制语句\t205
11．1．5　函数的定义与调用\t211
任务实施\t214
11．1．6 下拉菜单的设计与实现\t214
任务拓展\t217
11．1．7 使用JavaScript脚本实现“省份”下拉菜单\t217
单元实训11．2　使用JavaScript制作网页特效\t218
11．2．1 使用JavaScript制作两款网页特效\t218
11．2．2 使用JavaScript完成下拉列表项左右移动\t220
思政点滴\t221
单元练习题\t221
单元12 使用模板设计网页\t223
任务12．1　创建基于模板的时尚礼品网\t223
任务陈述\t223
相关知识与技能\t224
12．1．1　模板概述\t224
12．1．2　创建模板\t224
12．1．3　定义模板的可编辑区域\t226
任务实施\t227
12．1．4　创建基于模板的网页\t227
任务拓展\t229
12．1．5　管理模板\t229
任务12．2　应用库项目\t230
任务陈述\t230
相关知识与技能\t231
12．2．1　库概述\t231
任务实施\t232
12．2．2　创建库项目\t232
12．2．3　在网页中应用库项目\t232
任务拓展\t234
12．2．4　更新库项目\t234
单元实训12．3　使用模板创建网页及在网页中应用库项目\t234
12．3．1　实训一　使用模板创建网页\t234
12．3．2　实训二　在网页中应用库项目\t236
思政点滴\t237
单元练习题\t237
单元13 网站的发布与推广\t239
任务13．1　免费空间的申请及使用\t239
任务陈述\t239
相关知识与技能\t239
13．1．1　FTP上传工具\t239
任务实施\t240
13．2．2　申请免费空间\t240
13．2．3　发布站点\t242
任务13．2　域名注册及收费空间的申请\t243
任务陈述\t243
相关知识与技能\t244
13．2．1　域名\t244
13．2．2　网站空间\t245
任务实施\t245
13．2．3　注册域名\t245
13．2．4　租用服务器空间\t246
任务13．3　网站的宣传与推广\t249
任务陈述\t249
相关知识与技能\t249
13．3．1　网站推广的作用\t249
13．3．2　网站推广的方法\t250
任务实施\t252
13．3．3　将网站提交给百度搜索引擎\t252
13．3．4　使用论坛推广网站\t253
任务拓展\t254
13．3．5　搜索引擎优化\t254
单元实训13．4　通过论坛推广网站\t255
思政点滴\t255
单元练习题\t255
单元14 综合实战项目\t256
任务14．1　设计制作工作室网站\t256
任务陈述\t256
相关知识与技能\t256
14．1．1　网站建设流程\t256
任务实施\t258
14．1．2　网站需求分析\t258
14．1．3　网站原型设计\t258
14．1．4　创建站点\t260
14．1．5　网站首页设计\t261
14．1．6　栏目页设计\t269
任务拓展\t269
14．1．7　type．css参考代码\t269
任务14．2　设计制作企业类网站\t274
任务陈述\t274
相关知识与技能\t274
14．2．1　企业类网站首页的布局规划\t274
任务实施\t275
14．2．2　布局网站首页\t275
14．2．3　搭建首页页头的Div\t277
14．2．4　搭建“公司简介”部分的Div\t278
14．2．5　首页主体部分的Div\t278
14．2．6　栏目页设计\t280
14．2．7　Flash动画展示部分的Div\t282
14．2．8　搭建“产品系列”部分的Div\t283