网页设计与Web前端开发教与学(含教学大纲和教案)

2024-8-22 15:59| 发布者: 独家记忆| 查看: 86380| 评论: 0

摘要: 《网页设计与Web前端开发》课程教学大纲一、课程基本信息1．课程编号：AA063002．课程名称：网页编程基础3. 适用专业：信息管理与信息系统，软件工程4．课程简介：本课程是为信息管理及软件工程专业学生开设的一门实 ...

网页设计与Web前端开发教与学(含教学大纲和教案)222 作者: 来源: 发布时间:2024-8-22 15:59

《网页设计与Web前端开发》课程教学大纲
一、课程基本信息1．课程编号：AA063002．课程名称：网页编程基础3. 适用专业：信息管理与信息系统，软件工程4．课程简介：本课程是为信息管理及软件工程专业学生开设的一门实践性很强的计算机应用课程。通过本课程的学习，让学生能够掌握静态网页的制作以及HTML5标记语言的运用，并掌握CSS3与JavaScript脚本语言编程的基本方法与技巧，具备网页前端编程开发的基础能力。二、课程说明1．教学目的和要求：本课程目标是使学生掌握网页编程的基础知识，包括HTML5语言、CSS3、及网页制作脚本语言JavaScript，具备网页前端编程与开发的基本技能，并在此基础上对网页编程技术的全貌有定性的了解，为系统开发模块方向的进一步学习打下坚实的基础。2．前继课程：《高级语言程序设计》等3. 后续课程：《J2EE构架》》、《软件测试》等4．周课时、总学时：周学时4；总学时56，理论36，实验20。5．开课学期：信息管理专业第3学期，软件工程专业第1学期。6．考试方法：平时成绩20%，实验成绩20%，期中检查10%，期末考试50%。7、教学方式: 在课堂教学中采用多媒体辅助教学与电子教案，40学时用于课堂讲授，24学时用于上机实践。按照课程的每个阶段，要求学生做相应的上机实验，以达到本课程教学目的。三、课程内容与学时分布

教学周	教学内容	学时
第1周	第1章网页设计与Web前端基础本章主要介绍Web、网站和网页相关的概念，包括Web的基本概念、体系结构等相关概念，网页编程的3类标准，望网站开发的工作流程及常用的网页制作软件。通过本章的学习，了解Web的相关概念和网页编程的标准，理解网站开发的工作流程，能够进行简单的网站规划及申请网页空间。	2
第1-2周	第2章 HTML常用标签本章主要讲解网页中的常用标签及属性的用法，包括文本、图片及超链接标签。通过本章的学习，深入了解并掌握HTML常用标签在网站实际页面内容建设中的应用。	6
第3-5周	第3章使用CSS3样式表本章主要讲解CSS3基本语法，包括CSS样式的定义和应用，CSS的高级语法及常用的CSS3属性。通过本章的学习，理解CSS的基本概念和用法，能够使用CSS3的常用属性实现网页样式定义及站点外观统一。	12
第6-8周	第4章使用HTML+CSS布局网页本章主要讲解HTML+CSS布局的概念和方法，包括浮动布局、定位布局，以及针对图片、表单、表格和内联框架的布局。通过本章的学习，理解常见的三种定位机制及布局方法，初步掌握DIV+CSS页面布局的技能。由于本课程的课时限制，CSS进阶应用及PC端网页布局综合案例实战作为学生的课后自学和选学内容。	12
第9-10周	第5章 HTML5+CSS3移动网站布局本章主要讲解HTML5的新增标签和CSS3的新增选择器，过渡、动画及变换等常用的CSS3属性，以及CSS3的新增属性，最后是CSS3弹性盒模型和移动端网站自适应布局的主要原理和方法。通过本章的学习，熟悉HTML5和CSS的新增特点，掌握其中常见的标签、选择器和属性的应用。由于本课程的课时限制，CSS弹性盒模型和移动端网站自适应布局作为学生的课后自学和选学内容。	8
第11-14周	第6章使用JavaScript脚本本章主要讲解JavaScript的基本概念、语法及使用JavaScript操作HTML标签属性及CSS样式的常用方法，最后是常用的网页对象及操作方法。通过本章的学习，在理解JavaScript基本概念和语法的基础上，能够熟练使用JavaScript操作网页元素、对象和属性。由于课时限制，localStorage对象和Web交互开发案例实战作为学生的课后自学和选学内容。	16
	第7章图形绘制本章主要讲解Canvas的概念、相关知识和使用方法。通过本章的学习，了解并掌握Canvas绘图技术及其在动画设计中的应用。由于课时限制，本章作为学生的课后自学和选学内容。	0

网页设计与Web前端开发教与学(含教学大纲和教案)5568 作者: 来源: 发布时间:2024-8-22 15:59

提供PPT课件，源码，答案，教案，视频，大纲

作者：莫小梅、毛卫英

定价：79.80元

ISBN：9787302534532

配套视频赏析

video: https://mp.weixin.qq.com/mp/readtemplate?t=pages/video_player_tmpl&action=mpvideo&auto=0&vid=wxv_1037204776607449088

《网页设计与Web前端开发》课程教案

第 1 次课 2 学时

授课内容	网页设计与Web前端基础、HTML5网页结构、网页文本、图片标签及属性。
教学目的与要求	通过本次课的学习，了解Web的相关概念及网站开发的工作流程，掌握HTML5网页结构、网页文本、图片标签及属性的用法。
重点难点	重点：网页标准、网站规划、网页结构。难点：网站规划。
教学进程安排	1．Web概述（5分钟） 2．网页标准简介（10分钟） 3．网站开发工作流程（20分钟） 4．Web开发工具（5分钟） 5． HTML5网页结构（10分钟） 6．网页文本（10分钟） 7．图片标签及属性（20分钟）
课后学习任务布置	1．第1章课后理论题（填空、选择、判断、简答） 2．第2章相关课后理论题
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结并逐步深入体会Web相关概念、网页标准、网站规划及申请网页空间的用法，及时复习熟悉HTML5网页结构及文本、图片标签和属性。

第2 次课 2 学时

授课内容	上机实践：HTML5网页结构设计及网页空间申请、上传。
教学目的与要求	通过本次课的实践，练习使用记事本编辑HTML5网页结构的方法、熟悉网页文本、图片标签及属性的用法。学会申请网页空间，及本地网站的上传方法。
重点难点	重点：使用记事本编辑网页、图片和文本标签及属性的用法。难点：网站规划及申请网页空间。
教学进程安排	1．实验要求讲解及资料发放（30分钟） 2．上机实践及答疑（50分钟）
课后学习任务布置	第1章实践题
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结上机实践心得，完成实验结果的上传。

第 3 次课 2 学时

授课内容	网页超链接与多媒体的使用。
教学目的与要求	通过本次课的学习，了解熟悉网页几种常见的超链接用法，理解网页中多媒体播放的特点，掌握使用HTML5标签播放音视频的基本用法。
重点难点	重点：超链接的格式和用法、HTML5播放音视频的方法。难点：相对链接、书签链接、HTML5播放音视频的兼容格式。
教学进程安排	1．超链接的基本格式及URL链接（5分钟） 2．本地链接（10分钟） 3．书签链接（20分钟） 4．下载文件链接和邮件链接（5分钟） 5．在外部窗口中播放多媒体（5分钟） 6．在当前文档中播放音频（15分钟） 7．在当前文档中播放视频（20分钟）
课后学习任务布置	第2章课后理论题
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结及复习熟悉各种超链接和HTML5音视频的使用格式和方法。

第 4 次课 2 学时

授课内容	上机实践：HTML5超链接及多媒体的使用。
教学目的与要求	通过本次课的实践，练习使用Dreamweaver定义本地站点及编辑网页的方法，掌握常用的网页超链接定义方法，熟悉HTML5音视频标签的使用及相关的兼容用法。
重点难点	重点：Dreamweaver定义本地站点、网页链接、HTML5音视频标签的使用。难点：书签链接、HTML5音视频的兼容用法。
教学进程安排	1．实验要求讲解及资料发放（30分钟） 2．上机实践及答疑（50分钟）
课后学习任务布置	第2章实践题
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结上机实践心得，完成实验结果的上传。

第 5 次课 2 学时

授课内容	CSS样式表的定义和创建、盒模型、列表标签及样式。
教学目的与要求	通过本次课的学习，了解CSS样式表的概念和使用方法、理解盒模型的概念和相关属性及用法、熟悉列表标签及其样式定义。
重点难点	重点：类和id选择器的异同、盒模型的概念、3种列表的格式和样式定义。难点：类和id选择器的异同、盒模型的概念及外边距合并。
教学进程安排	1．第一个CSS案例和基本语法（7分钟） 2．CSS的4种创建方法（8分钟） 3．组合选择器和后代选择器（7分钟） 4．类选择器和id选择器（8分钟） 5．盒模型的属性：boder、padding、margin（20分钟） 6．外边距合并（10分钟） 7．列表标签及样式（20分钟）
课后学习任务布置	1. 第3章相关课后理论题 2. 盒模型案例样式实践 3. 列表样式案例实践
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结并逐步深入体会CSS的用法、盒模型的概念及应用，以及列表定义及样式应用。

第 6 次课 2 学时

授课内容	上机实践：样式表的定义、盒模型及列表样式应用。
教学目的与要求	通过本次课的实践，熟悉样式表的常见定义方法、熟练掌握盒模型及相关属性的用法，掌握列表的定义和样式应用方法。
重点难点	重点：内部样式表的定义、类和id选择器的用法、盒模型及属性的应用。难点：类和id选择器的用法、盒模型及属性的应用。
教学进程安排	1．实验要求讲解及资料发放（30分钟）（1）使用Dreamweaver CC创建内部样式表（2）标签选择器、类选择器和id选择器的创建和属性设置（3）外部样式表和内联样式表的创建 2．上机实践及答疑（50分钟）（1）盒模型案例实践（2）列表样式案例实践
课后学习任务布置	完成实验必做题，探究练习课后实践题的部分要求。
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结上机实践心得，完成实验结果的上传。

第 7 次课 2 学时

授课内容	元素分类及转换、CSS的常用属性
教学目的与要求	通过本次课的学习，了解网页三种元素的分类及排列方式的异同，熟悉CSS的背景、字体、文本、鼠标等常用属性。
重点难点	重点：CSS常用属性。难点：元素分类及转换。
教学进程安排	1．3种元素及其默认排列方式（30分钟） 2．元素类型的转换（10分钟） 3．CSS的常用属性：背景、字体、文本、鼠标等（40分钟）
课后学习任务布置	第3章课后相关理论题
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结及复习熟悉元素分类和转换，以及CSS的常用属性的应用方法。

第 8 次课 2 学时

授课内容	上机实践：元素类型转换、CSS的常用属性。
教学目的与要求	通过本次课的实践，综合运用元素类型转换，及CSS的常用属性，实现不同特点网页的布局。
重点难点	重点：元素类型转换、CSS的常用属性。难点：元素类型转换。
教学进程安排	1．实验要求讲解及资料发放（30分钟） 2．上机实践及答疑（50分钟）
课后学习任务布置	第3章相关案例
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结上机实践心得，完成实验结果的上传。

第 9 次课 2 学时

授课内容	选择器高级、CSS继承与优先、常用CSS3属性
教学目的与要求	通过本次课的学习，了解和初步应用常见的CSS3新增选择器，理解CSS的继承与优先特点，熟练运用CSS3的常用属性。
重点难点	重点：选择器高级、常用CSS3属性。难点：CSS继承与优先。
教学进程安排	1．选择器高级（35分钟） 2．CSS继承与优先（10分钟） 3．常用CSS3属性（35分钟）
课后学习任务布置	完成第3章课后理论题
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结及复习熟悉CSS3新增选择器、CSS继承与优先，以及常用的CSS3属性应用方法。

第 10 次课 2 学时

授课内容	上机实践：选择器高级、常用CSS3属性。
教学目的与要求	通过本次课的实践，综合运用CSS3新增选择器、及CSS3的常用属性实现不同特点网页的布局。
重点难点	重点：选择器高级、常用CSS3属性。难点：伪类和伪元素选择器、visibility与display属性的异同。
教学进程安排	1．实验要求讲解及资料发放（30分钟） 2．上机实践及答疑（50分钟）
课后学习任务布置	第3章相关案例第3章课后实践题（选做）
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结上机实践心得，完成实验结果的上传。

第 11 次课 2 学时

授课内容	CSS布局概述、元素的浮动、元素的定位。
教学目的与要求	通过本次课的学习，了解CSS布局的基本概念及三种定位机制，理解元素浮动和定位的原理，掌握利用元素的浮动和定位进行布局的方法。
重点难点	重点：利用浮动实现横向导航条布局、定位元素的居中。难点：浮动的特殊情况、定位元素的居中。
教学进程安排	1．CSS布局概述（5分钟） 2．浮动的概念及应用（20分钟） 3．利用浮动实现横向导航条布局（15钟） 4．定位属性position和z-index（25分钟） 5．z-index属性（5分钟） 6．定位元素的居中（15钟）
课后学习任务布置	1. 第4章相关课后理论题 2. 元素定位案例样式实践
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结并逐步深入体会浮动和定位布局的概念、用法及在网页布局中的应用。

第 12 次课 2 学时

授课内容	上机实践：元素的浮动和定位布局。
教学目的与要求	通过本次课的实践，熟悉利用元素的浮动和定位属性实现导航条布局和页面的居中和绝对定位等布局效果。
重点难点	重点：横向导航条布局、页面居中、绝对定位布局。难点：绝对定位布局。
教学进程安排	1．实验要求讲解及资料发放（30分钟）（1）横向导航条布局（2）页面居中（3）绝对定位布局 2．上机实践及答疑（50分钟）（1）元素浮动案例实践（2）元素定位案例实践
课后学习任务布置	完成实验必做题，探究练习课后实践题的部分要求。
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结上机实践心得，完成实验结果的上传。

第 13 次课 2 学时

授课内容	图片特点及布局、表单及布局
教学目的与要求	通过本次课的学习，了解图片的布局特点，熟悉text-align和vertical-align在图片布局中的作用，熟悉表单的基本结构和常用的表单元素和相关伪类的属性设置，初步掌握图片和表单布局的基础方法。
重点难点	重点：text-align和vertical-align在图片布局中的作用、表单的基本结构和常用表单元素。难点：vertical-align在图片垂直对齐中的应用。
教学进程安排	1．图片布局特点（5分钟） 2．图片的水平和垂直对齐（25分钟） 3．图片布局案例分析（10分钟） 4．表单的基本结构（5分钟） 5．表单的常用元素（20分钟） 6．表单相关伪类（15分钟）
课后学习任务布置	第4章课后相关理论题
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结及复习熟悉图片特点及布局原理，表单结构、元素及伪类等概念和应用方法。

第 14 次课 2 学时

授课内容	上机实践：图片及表单布局。
教学目的与要求	通过本次课的实践，综合运用已学知识实现图片及表单布局。
重点难点	重点：图片的布局水平和垂直对齐、表单及其元素的布局。难点：图片的垂直对齐、同类型表单元素的样式设置。
教学进程安排	1．实验要求讲解及资料发放（30分钟） 2．上机实践及答疑（50分钟）
课后学习任务布置	第4章相关案例
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结上机实践心得，完成实验结果的上传。

第 15 次课 2 学时

授课内容	表格及布局、内联框架。
教学目的与要求	通过本次课的学习，熟悉表格的相关标签和属性及应用，理解两种表格布局方式的异同，了解内联框架的基本用法及相关属性，初步掌握表格及内联框架的布局原理。
重点难点	重点：表格的标签、合并单元格、表格专用的CSS属性，内联框架的格式及应用。难点：合并单元格、表格专用的CSS属性。
教学进程安排	1．表格标签（10分钟） 2．合并单元格（5分钟） 3．表格样式及特征（15分钟） 4．表格布局案例分析（20分钟） 5．内联框架的基本用法（10分钟） 6．内联框架布局案例分析（20分钟）
课后学习任务布置	完成第4章课后理论题
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结及复习熟悉表格及内联框架的相关标签、属性及布局方法。

第 16 次课 2 学时

授课内容	上机实践：表格及内联框架布局。
教学目的与要求	通过本次课的实践，熟悉表格和内联框架的基本用法，能综合运用表格及内联框架的特点实现相关的网页布局。
重点难点	重点：表格布局、内联框架布局。难点：表格默认特征的样式修改、内联框架中的超链接。
教学进程安排	1．实验要求讲解及资料发放（30分钟） 2．上机实践及答疑（50分钟）
课后学习任务布置	第4章相关案例第4章课后实践题（选做）
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结上机实践心得，完成实验结果的上传。

第 17 次课 2 学时

授课内容	HTML5新增标签、CSS3新增伪类和伪元素。
教学目的与要求	通过本次课的学习，了解HTML5的概念及新增标签，熟悉CSS3的新增伪类和伪元素。
重点难点	重点：HTML5结构性标签、CSS3新增伪类。难点：nth前缀伪类。
教学进程安排	1．HTML5结构性标签（10分钟） 2．HTML5语义化标签（15分钟） 3．HTML5网页案例分析（10钟） 4．fisrt、last、only前缀伪类（10分钟） 5．nth前缀伪类（10分钟） 6．其他伪类和伪元素（10分钟） 7．CSS3新增伪类案例分析（15分钟）
课后学习任务布置	1. 第5章相关课后理论题 2. 相关案例样式实践
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结并逐步深入体会HTML5的网页结构和语义标签的含义及应用，灵活应用CSS3新增伪类和伪元素提高样式定义的效率。

第 18 次课 2 学时

授课内容	上机实践：HTML5网页结构布局、CSS3新增伪类案例实践。
教学目的与要求	通过本次课的实践，熟悉及运用HTML5结构标签定义网页结构，并完成样式定义及布局，利用CSS3的新增伪类实现Tab选项卡的页面效果。
重点难点	重点：HTML5网页结构的定义，Tab选项卡页面制作。难点：Tab选项卡页面元素选择及样式定义。
教学进程安排	1．实验要求讲解及资料发放（30分钟） 2．上机实践及答疑（50分钟）
课后学习任务布置	完成实验必做题。
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结上机实践心得，完成实验结果的上传。

第 19 次课 2 学时

授课内容	CSS3变形、过渡及动画，CSS3新增属性
教学目的与要求	通过本次课的学习，熟练使用CSS3的几种常用属性和新增属性。
重点难点	重点：CSS3变形、过渡及动画、CSS3新增背景及颜色属性。难点：CSS3遮罩。
教学进程安排	1．变形（transform）（10分钟） 2．过渡（transition）（10分钟） 3．动画（animation）（10分钟） 4．变形、过渡及动画案例分析（10分钟） 5．CSS3颜色和背景属性（20分钟） 6．倒影和遮罩（10分钟） 7．CSS3新增属性案例分析（10分钟）
课后学习任务布置	第5章课后相关理论题
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结及复习熟悉几种CSS3常用属性和新增属性，灵活运用相关的样式制作网页动画等特效。

第 20 次课 2 学时

授课内容	上机实践：系列图片无缝滚动、遮罩图片动画。
教学目的与要求	通过本次课的实践，综合运用CSS3的常用属性和新增属性实现系列图片无缝滚动及遮罩图片动画效果。
重点难点	重点：无缝滚动的基本原理、遮罩动画思路。难点：无缝滚动的原理及运用。
教学进程安排	1．实验要求讲解及资料发放（30分钟） 2．上机实践及答疑（50分钟）
课后学习任务布置	第5章相关案例
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结上机实践心得，完成实验结果的上传。

第 21次课 2 学时

授课内容	JavaScript初步应用、JavaScript的基本元素、操作浏览器对象及CSS样式。
教学目的与要求	通过本次课的学习，了解JavaScript的来源、特点及功能，掌握在网页中使用JavaScript的方法，熟悉JavaScript的基本元素和基本语句，掌握使用JavaScript操作HTML标签属性及CSS样式的常用方法。
重点难点	重点：JS获取元素及操作内容、数据类型转换、操作浏览器对象及CSS样式。难点：数据类型转换、操作浏览器对象及CSS样式。
教学进程安排	1．JavaScript简介及用法（10分钟） 2．JavaScript基本应用（30分钟） 3．JavaScript基本元素（10钟） 4．数据类型转换（10分钟） 5．操作对象属性（10分钟） 6．操作CSS样式（10分钟）
课后学习任务布置	1. 第6章相关课后理论题。 2. 相关案例样式实践。
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结并逐步深入体会JavaScript的基本概念和用法，初步熟悉使用JavaSript操作网页元素及样式的方法。

第 22 次课 2 学时

授课内容	上机实践：鼠标移入移出事件编程、留言发表、图片单击切换。
教学目的与要求	通过本次课的实践，熟悉及运用JavaScript进行网页事件编程，及操作网页对象和CSS样式的方法。
重点难点	重点：JavaScript网页事件编程、操作对象和CSS样式。难点：操作对象和CSS样式。
教学进程安排	1．实验要求讲解及资料发放（30分钟） 2．上机实践及答疑（50分钟）
课后学习任务布置	完成实验必做题。
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结上机实践心得，完成实验结果的上传。

第 23 次课 2 学时

授课内容	条件语句、循环语句、函数
教学目的与要求	通过本次课的学习，熟悉和初步掌握JS条件语句、循环语句及函数的概念及应用。
重点难点	重点：循环语句、函数。难点：函数。
教学进程安排	1．条件语句（25分钟） 2．循环语句（25分钟） 3．函数（30分钟）
课后学习任务布置	1. 第6章课后相关理论题 2. 相关案例样式实践
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结并逐步深入体会条件语句、循环语句和函数的概念和应用。

第 24次课 2 学时

授课内容	上机实践：条件语句实现图片的单击轮播切换、循环语句实现选项卡切换。
教学目的与要求	通过本次课的实践，综合运用JS的条件语句和循环语句实现不同的网页前端功能。
重点难点	重点：条件语句和循环语句的应用难点：循环语句实现选项卡切换。
教学进程安排	1．实验要求讲解及资料发放（30分钟） 2．上机实践及答疑（50分钟）
课后学习任务布置	第6章相关案例
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结上机实践心得，完成实验结果的上传。

第 25次课 2 学时

授课内容	变量的作用域、对象操作语句、常用内置对象
教学目的与要求	通过本次课的学习，理解变量的作用域概念，熟悉JavaScript的对象操作语句和常用内置对象的基本用法。
重点难点	重点：变量的作用域、常用内置对象。难点：变量的作用域。
教学进程安排	1．变量的作用域（10分钟） 2．函数案例分析（10分钟） 3．对象操作语句（20分钟） 4．常用内置对象（40钟）
课后学习任务布置	1. 第6章相关课后理论题 2. 相关案例样式实践
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	结合变量的作用域概念，总结并逐步深入体会函数的概念和应用，熟悉各种常用内置对象的应用。

第 26 次课 2 学时

授课内容	上机实践：函数实现星级评分，JavaScript内置对象应用。
教学目的与要求	通过本次课的实践，熟悉函数实现星级评分的原理和应用，掌握常见的JavaScript内置对象应用。
重点难点	重点：JavaScript内置对象应用。难点：函数实现星级评分。
教学进程安排	3．实验要求讲解及资料发放（30分钟） 4．上机实践及答疑（50分钟）
课后学习任务布置	完成实验必做题。
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结上机实践心得，完成实验结果的上传。

第 27 次课 2 学时

授课内容	DOM对象及操作、BOM对象及操作
教学目的与要求	通过本次课的学习，了解DOM和BOM对象的概念，熟悉常见的DOM和BOM对象，掌握JS操作DOM和BOM对象的方法和应用。
重点难点	重点：DOM节点的访问和操作、常见的BOM对象及应用。难点：DOM和BOM对象的区别。
教学进程安排	1．DOM简介及节点类型（10分钟） 2．DOM节点的访问（10分钟） 3．DOM节点的操作（10分钟） 4．DOM对象案例分析（10分钟） 5．BOM简介（5分钟） 6．常见的BOM对象及使用方法（35分钟）
课后学习任务布置	第6章课后相关理论题
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结及复习熟悉几种DOM和BOM的常见用法及区别。

第 28次课 2 学时

授课内容	上机实践：DOM和BOM对象案例实践。
教学目的与要求	通过本次课的实践，综合运用DOM的节点操作方法和常见BOM对象的操作
重点难点	重点：DOM节点的添加和删除、常见的BOM对象操作。难点：DOM节点的添加和删除。
教学进程安排	1．实验要求讲解及资料发放（30分钟） 2．上机实践及答疑（50分钟）
课后学习任务布置	第6章相关案例
主要参考资料	1．http://www.runoob.com/ 2．https://www.w3cschool.cn/ 3．《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript微课视频版》，清华大学出版社，莫小梅主编，2019年。
课后总结分析	总结上机实践心得，完成实验结果的上传。