网站前台技术导学案解析.docx

1、网站前台技术导学案解析网站前台技术导学案章节（6课时）：1设计基本网页特效 主备：郭树强 备课组长： 班：14软件技术 组： 号：理论依据框架流程指导理念河北外国语学院职业教育教学新模式与“二十法一课堂”作为试点课程数据结构教学改革探索准职业人培养实效课堂新模式的理论依据。课前学习目标1知识目标：1）Internet和Web的基本知识2）JavaScript实现动态网页内容3）JQuery在网页中的应用2技能目标：1） 培养学生利用JS和JQuery设计动态网页。2）培养学生通过教材展开自主学习的能力3情感目标：1） 提升学生团队合作意识，培育集体主义和爱国主义情感。2）培养独立设计网页的个人

2、能力及团队网站设计能力在“准职业人”人才培养理念指导下，掌握大纲要求的专业理论知识基础上，注重提升学生的实践动手能力，切合市场对应用型、职业性的人才需求。重点难点1重点：动态网页的设计与实现2难点：JQuery动态效果的设计与实现引导式自主学习1内容：1）JavaScript的设计与实现2）JQuery的设计与实现2资源：人民邮电出版社教学服务与资源网3要求：1) 阅读；浏览网上动态网页设计资源2) 问题：动态网页在网站中的作用注意笃学思想的指导，以指导学生从个体的具体知识建构和智力实际出发，自主掌握知识的同时，学会学习、习惯学习、养成学习。课上温故知新 1内容：1）JavaScript实现动

3、态网页内容2）JQuery的设计与实现2要求：1）掌握网页设计的不同分类合作探究、质疑点评1内容：1）JavaScript实现动态网页内容2）JQuery实现网页收藏3）JavaScript实现网页的关闭打开4）JQuery是实现动态显示网页内容2要求：1）熟悉JS和JQuery的设计与使用2）掌握网页开发的基本流程3）掌握网页中动态效果的设计与实现注重研学思想的指导，运用兴趣教学法，通过做游戏，诱导学生掌握相关知识点，达到寓教于乐的效果。培养学生对未知进行探究和提出问题甚至解决问题的能力。在学生个体能力得到提高的同时，感受团队合作的重要，对学生进行集体主义和爱国主义情感教育。展学互动1.精品

4、网站赏析2.网站设计理念大讨论注重展学思想的指导，锻炼学生展现自我、表达自我的能力延学1专业外语演练在本教材附录中选出所有本次课涉及的专业术语2布置作业并下发下一次课的导学案在延学环节，注重所学知识的横向延伸和纵向深入或提升。实现学生将线性输入的知识在头脑中空间化、立体化。本课程的实效课堂新模式探索的成果也必将丰富和发展“二十法一课堂”教学理论和河北外国语学院职业教育教学新模式。工学实践个人独立完成网页个体的设计，分组讨论网站设计并定期展示成果在工学实践环节，理论与实践结合，将学生头脑中空间化、立体化的知识建构动态化、活化，学以致用。最终达到“准职业人”人才培养理念的要求。章节（8课时）：2设

5、计日期时间类网页特效 主备：郭树强 备课组长： 班：14软件技术 组： 号：理论依据框架流程指导理念河北外国语学院职业教育教学新模式与“二十法一课堂”作为试点课程数据结构教学改革探索准职业人培养实效课堂新模式的理论依据。课前学习目标1知识目标：1）常规格式的时间设计2）JS运算符与表达式3）JS基本语句与规则4）JS对象与JQuery的使用2技能目标：1）培养学生利用JS和JQuery设计动态网页。2）培养学生通过教材展开自主学习的能力3情感目标：1） 提升学生团队合作意识，培育集体主义和爱国主义情感。2）培养独立设计网页的个人能力及团队网站设计能力在“准职业人”人才培养理念指导下，掌握大纲要

6、求的专业理论知识基础上，注重提升学生的实践动手能力，切合市场对应用型、职业性的人才需求。重点难点1重点：JavaScript的基本语法和使用2难点：JavaScript和JQuery的使用比较引导式自主学习1内容：1）JavaScript的基本解析和语法介绍2）JavaScript和JQuery的使用比较2资源：1）人民邮电出版社教学服务与资源网2）w3school 在线教程3要求：1）阅读；浏览网上资源2）问题：JavaScript和JQuery的使用比较注意笃学思想的指导，以指导学生从个体的具体知识建构和智力实际出发，自主掌握知识的同时，学会学习、习惯学习、养成学习。课上温故知新 1内容：

7、1）JavaScript和JQuery的基本效果2）JavaScript和JQuery的使用2要求：1）熟悉网页设计的基本理念2）熟悉JavaScript和JQuery合作探究、质疑点评1内容：1）JavaScript的运算符与表达式2）JavaScript的语句与规则3）JavaScript的对象设计与实现4）JavaScript和JQuery的使用比较2要求：1）熟悉JavaScript的基本语法2）掌握JavaScript的语句和对象设计3）掌握JavaScript和JQuery的应用注重研学思想的指导，运用兴趣教学法，通过做游戏，诱导学生掌握相关知识点，达到寓教于乐的效果。培养学生对未

8、知进行探究和提出问题甚至解决问题的能力。在学生个体能力得到提高的同时，感受团队合作的重要，对学生进行集体主义和爱国主义情感教育。展学互动1. JavaScript的基本操作演示2.JQuery的基本操作演示注重展学思想的指导，锻炼学生展现自我、表达自我的能力延学1专业外语演练在本教材附录中选出所有本次课涉及的专业术语2布置作业并下发下一次课的导学案在延学环节，注重所学知识的横向延伸和纵向深入或提升。实现学生将线性输入的知识在头脑中空间化、立体化。本课程的实效课堂新模式探索的成果也必将丰富和发展“二十法一课堂”教学理论和河北外国语学院职业教育教学新模式。工学实践个人独立完成网页个体的设计，分组讨

9、论网站设计并定期展示成果在工学实践环节，理论与实践结合，将学生头脑中空间化、立体化的知识建构动态化、活化，学以致用。最终达到“准职业人”人才培养理念的要求。章节（8课时）：3设计文字类网页特效 主备：郭树强 备课组长： 班：14软件技术 组： 号：理论依据框架流程指导理念河北外国语学院职业教育教学新模式与“二十法一课堂”作为试点课程数据结构教学改革探索准职业人培养实效课堂新模式的理论依据。课前学习目标1知识目标：1）实现网页标题栏中文字的滚动2）实现向上滚动网站促销公告3）实现鼠标滑动状态下的特效4）利用JQuery实现网站动态信息滚动2技能目标：1）培养学生利用JS和JQuery设计动态网页

10、。2）培养学生通过教材展开自主学习的能力3情感目标：1） 提升学生团队合作意识，培育集体主义和爱国主义情感。2）培养独立设计网页的个人能力及团队网站设计能力在“准职业人”人才培养理念指导下，掌握大纲要求的专业理论知识基础上，注重提升学生的实践动手能力，切合市场对应用型、职业性的人才需求。重点难点1重点：各种网页特效的设计与实现2难点：JQuery的网页特效设计与实现引导式自主学习1内容：1）JavaScript的基本解析2）JQuery的基本解析2资源：1）人民邮电出版社教学服务与资源网2）w3school 在线教程3要求：1）阅读；浏览网上资源2）问题：设计文字类网页特效的作用注意笃学思想的

11、指导，以指导学生从个体的具体知识建构和智力实际出发，自主掌握知识的同时，学会学习、习惯学习、养成学习。课上温故知新 1内容：1）利用JS实现网页特效的设计2）利用JQuery实现网页特效的设计2要求：1）掌握JS和JQuery网页特效的设计2）熟练应用JS和JQuery 合作探究、质疑点评1内容：1）JS和JQuery的基本介绍2）JS和JQuery的特效设计3）JS和JQuery在网页中的应用4）网页的JS和JQuery效果设计与编译2要求：1）熟悉JS和JQuery的基本应用2）掌握JS和JQuery的设计与编译3）完成教材中网页的设计注重研学思想的指导，运用兴趣教学法，通过做游戏，诱导学

12、生掌握相关知识点，达到寓教于乐的效果。培养学生对未知进行探究和提出问题甚至解决问题的能力。在学生个体能力得到提高的同时，感受团队合作的重要，对学生进行集体主义和爱国主义情感教育。展学互动1. JS和JQuery的解析2.网页设计过程的演示注重展学思想的指导，锻炼学生展现自我、表达自我的能力延学1专业外语演练在本教材附录中选出所有本次课涉及的专业术语2布置作业并下发下一次课的导学案在延学环节，注重所学知识的横向延伸和纵向深入或提升。实现学生将线性输入的知识在头脑中空间化、立体化。本课程的实效课堂新模式探索的成果也必将丰富和发展“二十法一课堂”教学理论和河北外国语学院职业教育教学新模式。工学实践个

13、人独立完成网页个体的设计，分组讨论网站设计并定期展示成果在工学实践环节，理论与实践结合，将学生头脑中空间化、立体化的知识建构动态化、活化，学以致用。最终达到“准职业人”人才培养理念的要求。章节（8课时）：4设计图片类网页特效 主备：郭树强 备课组长： 班：14软件技术 组： 号：理论依据框架流程指导理念河北外国语学院职业教育教学新模式与“二十法一课堂”作为试点课程数据结构教学改革探索准职业人培养实效课堂新模式的理论依据。课前学习目标1知识目标：1）网页中图片效果的作用2）网页中图片特效的设计3）网页中图片特效的实现4）JS和JQuery的图片特效解析2技能目标：1）培养学生利用JS和JQuer

14、y设计动态网页。2）培养学生通过教材展开自主学习的能力3情感目标：1） 提升学生团队合作意识，培育集体主义和爱国主义情感。2）培养独立设计网页的个人能力及团队网站设计能力在“准职业人”人才培养理念指导下，掌握大纲要求的专业理论知识基础上，注重提升学生的实践动手能力，切合市场对应用型、职业性的人才需求。重点难点1重点：网页中文本的基本操作2难点：插入特殊文本对象的操作引导式自主学习1内容：1）网页中图片特效的解析2）网页中图片特效的设计与实现2资源：1）人民邮电出版社教学服务与资源网2）w3school 在线教程3要求：1）阅读；浏览网上资源2）问题：网页中图片特效的作用和意义注意笃学思想的指导

15、，以指导学生从个体的具体知识建构和智力实际出发，自主掌握知识的同时，学会学习、习惯学习、养成学习。课上温故知新 1内容：1）网页图片特效的作用2）网页图片特效的设计与实现2要求：1）掌握网页中图片特效的设计2）熟悉图片类网页特效的设计合作探究、质疑点评1内容：1）图片特效的解析2）JS的对象解析3）JQuery的文档操作4）利用JS和JQuery实现网页中图片特效2要求：1）了解网页中图片类特效的作用2）掌握网页中图片类特效的设计与实现3）熟悉JS和JQuery的图片特效设计注重研学思想的指导，运用兴趣教学法，通过做游戏，诱导学生掌握相关知识点，达到寓教于乐的效果。培养学生对未知进行探究和提出

16、问题甚至解决问题的能力。在学生个体能力得到提高的同时，感受团队合作的重要，对学生进行集体主义和爱国主义情感教育。展学互动1.网页中图片的作用讨论2.网页中不同图片特效格式的设计注重展学思想的指导，锻炼学生展现自我、表达自我的能力延学1专业外语演练在本教材附录中选出所有本次课涉及的专业术语2布置作业并下发下一次课的导学案在延学环节，注重所学知识的横向延伸和纵向深入或提升。实现学生将线性输入的知识在头脑中空间化、立体化。本课程的实效课堂新模式探索的成果也必将丰富和发展“二十法一课堂”教学理论和河北外国语学院职业教育教学新模式。工学实践个人独立完成网页个体的设计，分组讨论网站设计并定期展示成果在工学

17、实践环节，理论与实践结合，将学生头脑中空间化、立体化的知识建构动态化、活化，学以致用。最终达到“准职业人”人才培养理念的要求。章节（8课时）：5 设计表单控件类网页特效 主备：郭树强 备课组长： 班：14软件技术 组： 号：理论依据框架流程指导理念河北外国语学院职业教育教学新模式与“二十法一课堂”作为试点课程数据结构教学改革探索准职业人培养实效课堂新模式的理论依据。课前学习目标1知识目标：1）实现注册表单中网页特效2）实现意见表单中的网页特效3）实现获取表单控件的设置值4）实现页面页码验证特效的设计2技能目标：1）培养学生利用JS和JQuery设计动态网页。2）培养学生通过教材展开自主学习的能

18、力3情感目标：2） 提升学生团队合作意识，培育集体主义和爱国主义情感。2）培养独立设计网页的个人能力及团队网站设计能力在“准职业人”人才培养理念指导下，掌握大纲要求的专业理论知识基础上，注重提升学生的实践动手能力，切合市场对应用型、职业性的人才需求。重点难点1重点：JavaScript的事件方法2难点：JQuery的事件方法引导式自主学习1内容：1）JavaScript的事件方法2）JQuery的事件方法2资源：1）人民邮电出版社教学服务与资源网2）w3school 在线教程3要求：1）阅读；浏览网上资源2）问题：表单控件类网页特效的作用注意笃学思想的指导，以指导学生从个体的具体知识建构和智力

19、实际出发，自主掌握知识的同时，学会学习、习惯学习、养成学习。课上温故知新 1内容：1）JavaScript的事件2）JQuery的事件方法2要求：1）掌握JavaScript的事件方法2）掌握JQuery的事件方法合作探究、质疑点评1内容：1）JavaScript的事件2）JavaScript的事件方法3）Jquery的事件方法4）表单控件类网页特效设计与实现2要求：1）了解表单控件类网页特效的设计2）熟悉JavaScript的事件方法3）掌握JS和JQuery的事件方法注重研学思想的指导，运用兴趣教学法，通过做游戏，诱导学生掌握相关知识点，达到寓教于乐的效果。培养学生对未知进行探究和提出问题

20、甚至解决问题的能力。在学生个体能力得到提高的同时，感受团队合作的重要，对学生进行集体主义和爱国主义情感教育。展学互动1.网页中表单控件的设计2.JS和JQuery的事件方法注重展学思想的指导，锻炼学生展现自我、表达自我的能力延学1专业外语演练在本教材附录中选出所有本次课涉及的专业术语2布置作业并下发下一次课的导学案在延学环节，注重所学知识的横向延伸和纵向深入或提升。实现学生将线性输入的知识在头脑中空间化、立体化。本课程的实效课堂新模式探索的成果也必将丰富和发展“二十法一课堂”教学理论和河北外国语学院职业教育教学新模式。工学实践个人独立完成网页个体的设计，分组讨论网站设计并定期展示成果在工学实践

21、环节，理论与实践结合，将学生头脑中空间化、立体化的知识建构动态化、活化，学以致用。最终达到“准职业人”人才培养理念的要求。章节（8课时）：6设计导航菜单类网页特效 主备：郭树强 备课组长： 班：14软件技术 组： 号：理论依据框架流程指导理念河北外国语学院职业教育教学新模式与“二十法一课堂”作为试点课程数据结构教学改革探索准职业人培养实效课堂新模式的理论依据。课前学习目标1知识目标：1）网页中图像的应用2）网页中多媒体的应用3）创建超链接的解析4）创建图像热点链接2技能目标：1）培养学生利用JS和JQuery设计动态网页。2）培养学生通过教材展开自主学习的能力3情感目标：1） 提升学生团队合作

22、意识，培育集体主义和爱国主义情感。2）培养独立设计网页的个人能力及团队网站设计能力在“准职业人”人才培养理念指导下，掌握大纲要求的专业理论知识基础上，注重提升学生的实践动手能力，切合市场对应用型、职业性的人才需求。重点难点1重点：导航菜单在网页中的应用2难点：JQuery的属性操作方法引导式自主学习1内容：1）网页中导航菜单的设计2）JQuery的属性操作2资源：1）人民邮电出版社教学服务与资源网2）w3school 在线教程3要求：1）阅读；浏览网上资源2）问题：导航菜单的设计与实现注意笃学思想的指导，以指导学生从个体的具体知识建构和智力实际出发，自主掌握知识的同时，学会学习、习惯学习、养成

23、学习。课上温故知新 1内容：1）导航菜单在网页中的作用2）网页中导航菜单的设计2要求：1）掌握导航菜单的设计方法2）能够独立设计网页中的导航菜单合作探究、质疑点评1内容：1）JavaScript的this指针2）JQuery的属性操作方法3）JQuery的CSS操作方法4）下拉菜单的设计与实现2要求：1）熟悉JQuery的bind和attr等方法2）掌握导航菜单的设计与应用3）掌握JQuery的导航菜单设计方法注重研学思想的指导，运用兴趣教学法，通过做游戏，诱导学生掌握相关知识点，达到寓教于乐的效果。培养学生对未知进行探究和提出问题甚至解决问题的能力。在学生个体能力得到提高的同时，感受团队合作

24、的重要，对学生进行集体主义和爱国主义情感教育。展学互动1.不同导航菜单格式的应用范围2.导航菜单的设计与应用注重展学思想的指导，锻炼学生展现自我、表达自我的能力延学1专业外语演练在本教材附录中选出所有本次课涉及的专业术语2布置作业并下发下一次课的导学案在延学环节，注重所学知识的横向延伸和纵向深入或提升。实现学生将线性输入的知识在头脑中空间化、立体化。本课程的实效课堂新模式探索的成果也必将丰富和发展“二十法一课堂”教学理论和河北外国语学院职业教育教学新模式。工学实践个人独立完成网页个体的设计，分组讨论网站设计并定期展示成果在工学实践环节，理论与实践结合，将学生头脑中空间化、立体化的知识建构动态化

25、、活化，学以致用。最终达到“准职业人”人才培养理念的要求。章节（8课时）：7 设计选项卡类网页特效 主备：郭树强 备课组长： 班：14软件技术 组： 号：理论依据框架流程指导理念河北外国语学院职业教育教学新模式与“二十法一课堂”作为试点课程数据结构教学改革探索准职业人培养实效课堂新模式的理论依据。课前学习目标1知识目标：1）熟悉JQuery的index和find等方法2）掌握JavaScript的数字对象3）应用DOM的相关熟悉设计网页特效4）熟悉JQuery的方法设计2技能目标：1）培养学生利用JS和JQuery设计动态网页。2）培养学生通过教材展开自主学习的能力3情感目标：1） 提升学生团

26、队合作意识，培育集体主义和爱国主义情感。2）培养独立设计网页的个人能力及团队网站设计能力在“准职业人”人才培养理念指导下，掌握大纲要求的专业理论知识基础上，注重提升学生的实践动手能力，切合市场对应用型、职业性的人才需求。重点难点1重点：JSON的使用2难点：JQuery的方法设计与应用引导式自主学习1内容：1）setInterval函数和display属性解析2）DOM的应用解析2资源：1）人民邮电出版社教学服务与资源网2）w3school 在线教程3要求：1）阅读；浏览网上资源2）问题：DOM的应用特效注意笃学思想的指导，以指导学生从个体的具体知识建构和智力实际出发，自主掌握知识的同时，学会

27、学习、习惯学习、养成学习。课上温故知新 1内容：1）选项卡网页的设计及适用范围2）DOM的应用设计与实现2要求：1）掌握选项卡网页特效2）掌握DOM应用的相关属性合作探究、质疑点评1内容：1）setInterval函数和display函数解析2）JavaScript的数组对象3）JSON及其使用4）DOM应用的属性解析2要求：1）掌握avaScript的数组对象2）熟悉JSON及其使用3）掌握DOM应用的属性解析注重研学思想的指导，运用兴趣教学法，通过做游戏，诱导学生掌握相关知识点，达到寓教于乐的效果。培养学生对未知进行探究和提出问题甚至解决问题的能力。在学生个体能力得到提高的同时，感受团队合

28、作的重要，对学生进行集体主义和爱国主义情感教育。展学互动1. DOM应用的属性解析2. JavaScript的数组对象注重展学思想的指导，锻炼学生展现自我、表达自我的能力延学1专业外语演练在本教材附录中选出所有本次课涉及的专业术语2布置作业并下发下一次课的导学案在延学环节，注重所学知识的横向延伸和纵向深入或提升。实现学生将线性输入的知识在头脑中空间化、立体化。本课程的实效课堂新模式探索的成果也必将丰富和发展“二十法一课堂”教学理论和河北外国语学院职业教育教学新模式。工学实践个人独立完成网页个体的设计，分组讨论网站设计并定期展示成果在工学实践环节，理论与实践结合，将学生头脑中空间化、立体化的知识

29、建构动态化、活化，学以致用。最终达到“准职业人”人才培养理念的要求。章节（8课时）：8设计内容展开与折叠网页特效 主备：郭树强 备课组长： 班：14软件技术 组： 号：理论依据框架流程指导理念河北外国语学院职业教育教学新模式与“二十法一课堂”作为试点课程数据结构教学改革探索准职业人培养实效课堂新模式的理论依据。课前学习目标1知识目标：1）设计网页内容折叠与展开特效2）BOM（浏览器对象模型）3）JQuery的尺寸方法4）JQuery的应用设计与实现2技能目标：1）培养学生利用JS和JQuery设计动态网页。2）培养学生通过教材展开自主学习的能力3情感目标：1） 提升学生团队合作意识，培育集体主义和爱国主义情感。2）培养独立设计网页的个人能力及团队网站设计能力在“准职业人”人才培养理念指导下，掌握大纲要求的专业理论知识基础上，注重提升学生的实践动手能力，切合市场对应用型、职业性的人才需求。重点难点1重点：网页内容折叠与展开特效2难点：JQuery的应用设计与实现引导式自主学习