jQuery网页特效是专注于网页行为的一门Web前端课程，主要通过案例讲解jQuery框架的应用，涉及jQuery的基本使用、选择器、DOM操作、事件机制、动画方法、Ajax交互、第三方工具使用等。通过本课程的学习，学生能够理解jQuery的实质，掌握jQuery的使用方式，能使用jQuery快速实现网页特效。
2.创新创业与课程融合情况分析
(1)课堂上创新教学方法。把分组讨论、情景教学、头脑风暴等有创意的教学方法引入课堂，让学生大胆认识自己，克服心理障碍，肯定自己，规划自己，鼓励同学培养编程兴趣，通过创新教学方法带给学生创新的思维。课后，同学们能按组参与图书管理系统和在线商城项目的开发和维护，对项目开发有深入的了解，对项目的功能能够根据行业现有软件的现状，提出改进意见，探寻创新创业思路。
(2)利用第二课堂进行创新创业开发。依靠项目开发实验室，通过实践教学管理系统项目、齐鲁软件大赛项目，培养激发学生的创新意识和创业精神，使学生更清楚得认识自身的潜能，初步了解职场的基本特性，从多个维度对职业特征、职业环境、职业素养进行探索，从而为学生未来的工作做准备。
3.课程思政情况分析
本课程是信息与艺术学院信息技术类专业群平台课程，是软件开发模块的核心课程。前导课程是静态网页设计，JavaScript前端网页开发，后续课程是J2EE 项目实战实训课程。
主要任务是培养学生的网页特效实现能力，培养学生团队合作、提升判断力和决定能力以及前端工程师需要掌握的其他能力，为后续学习和工作奠定基础。
课程思政方面主要结合当前时事政治，对学生进行思想教育，并结合课程知识点，潜移默化地与思政知识进行融合。
（三）参考学分学时
本课程5学分，学时80
二、教学条件
1．教学做一体化的教室；
2．机器内存配置建议>=4G；
3. window7及以上操作系统环境
4. 极域电子教室传屏软件。
5. 支持外网连接，能够登录职教云平台
三、课程教学团队
担任本课程的主讲教师需要具有丰富的web前端开发经验，能够独立完成教学项目并且能够解决网站开发过程中出现的常见问题。
四、教学方法
1.任务驱动法
课程采用任务驱动教学方法、教学做一体化的教学方式。教学过程以完成网站中的各种特效为教学目标，培养学生的前端开发能力。
2.问题闯关法
每个重要的知识点，都通过设计问题的方式引导学生思考，可以是为什么，可以是怎样解决，可以是你还有其它解决方案吗等等问题的方式，时刻调动学生的思维，让学生成为课堂的主体。
3.线上测试手段
对每个知识目标在职教云平台中设计测试题，每次课学习之后下一次课开始时利用5到10分钟进行线上测试并讲解，检查学生的学习效果并督促学生巩固理论知识。
4.课上课下相结合
将难度较大的重点知识，录制为视频，提供给学生课下学习，同步提供相应知识点的作业，帮助学生理解掌握相关知识。
五、教学资源建设及信息化应用情况
（一）课程资源
要求：描述满足课程教学需要的教学资源。不完全依据某教材组织教学，鼓励按照人才培养目标对教学内容重新进行设计。
（二）教材选用
本课程教材选用情况。
本课程使用自编电子讲义。
（三）信息化应用
使用智慧职教平台进行信息化教学改革。
六、课程内容设计
七、成绩考核
课程考核一般采用形成性考核方式，总评成绩由形成性考核的各项成绩组成，全面考核学生的动手能力、基础理论、平时学习状况和职业素质。
本书全面、系统地介绍Photoshop CC 2019的基本操作方法和图形图像处理技巧，并对Photoshop在设计领域的应用进行细致的讲解，具体内容包括图像制作基础、软件基础操作、插画设计、Banner设计、App设计、H5设计、海报设计、网页设计、包装设计、综合设计实训等。
本书项目1 ～项目9先在“相关知识”中讲解基础知识，使学生了解图形图像处理的相关概念、要素和设计原则等；再通过“任务引入”引导学生了解每个任务学习的要点；
通过“设计理念”展示设计的构思过程和主导思想；通过“任务知识”带领学生深入学习软件功能；通过“任务实施”指导学生快速熟悉图像的设计制作过程；通过“扩展实践”和“项目演练”提高学生的实际应用能力。项目10是综合设计实训，旨在帮助学生掌握商业案例的设计理念和设计方法，提升学生的实战水平。
本书可作为中等职业学校数字艺术专业平面设计课程的教材，也可供相关人员学习参考。
培训目标：
➢了解图像制作基础
➢熟悉软件基础操作
➢掌握插画的设计方法
➢掌握Banner的设计方法
➢掌握App的设计方法
➢掌握H5的设计方法
➢掌握海报的设计方法
➢掌握网页的设计方法
➢掌握包装的设计方法
➢掌握综合设计实训的设计方法
学习时间：
58学时
培训内容：
项目1、发现图像中的美——图像制作基础
1.了解图像中的美学与设计
2.了解图像制作的相关应用。
3.明确图像制作的工作流程。
4.了解图像作品图片的收集。
5.掌握收集设计素材的方法。
6.培养对图像制作的基本兴趣。
项目2、熟悉设计工具——软件基础操作
1、了解图形图像的基础知识。
2、了解常用的设计工具软件。
3、熟练掌握软件的界面操作和文件设置。
4、掌握图像的基本操作方法。
5、培养对设计软件的熟悉度。
项目3、绘制生动图画——插画设计
随着信息时代的到来，插画设计作为视觉信息传达的重要手段，已经广泛应用到现代艺术设计领域。计算机软件技术的发展，让插画设计趋于多样化，并随着现代艺术思潮的
发展而不断创新。通过本项目的学习，读者可以掌握插画的多种绘制方法和绘制技巧。
相关知识：了解插画设计的基础知识
1、了解插画的概念与应用领域。
2、掌握插画的分类。
任务3.1 制作汽车展示插画
1. 通过对任务引入和设计理念的讲解，使读者掌握汽车展示插画的学习要点和构思过程。
2. 通过对任务知识的解析，熟练掌握软件中相关工具和命令的使用方法。
3. 通过任务的操作实施，掌握汽车展示插画的制作技巧。
4. 通过扩展案例拓展学生的实际应用能力，增强学生的软件使用技巧。
任务3.2 绘制风景插画
1. 通过对任务引入和设计理念的讲解，使读者掌握风景插画的学习要点和构思过程。
2. 通过对任务知识的解析，熟练掌握软件中相关工具和命令的使用方法。
3. 通过任务的操作实施，掌握风景插画的制作技巧。
4. 通过扩展案例拓展学生的实际应用能力，增强学生的软件使用技巧。
任务3.3 项目演练——绘制趣味音乐插画
通过项目演练可以拓展学生的对插画设计的应用和认知，增强学生对本章软件技能的使用。
项目4、制作电商广告——Banner设计
Banner是电商企业用来提高产品转化率的重要手段，它将直接影响用户是否购买产品或参加活动，因此Banner的设计对产品及UI，乃至运营来说至关重要。通过本项目的学习，读者可以掌握Banner的设计方法和制作技巧。
相关知识：了解Banner设计的基础知识
1、了解Banner的概念。
2、了解Banner的设计风格和版式构图。
任务4.1 制作时尚彩妆类电商Banner
1. 通过对任务引入和设计理念的讲解，使读者掌握时尚彩妆类电商Banner的学习要点和构思过程。
2. 通过对任务知识的解析，熟练掌握软件中相关工具和命令的使用方法。
3. 通过任务的操作实施，掌握时尚彩妆类电商Banner的制作技巧。
4. 通过扩展案例拓展学生的实际应用能力，增强学生的软件使用技巧。
任务4.2 制作箱包App首页Banner
1. 通过对任务引入和设计理念的讲解，使读者掌握箱包App首页Banner的学习要点和构思过程。
2. 通过对任务知识的解析，熟练掌握软件中相关工具和命令的使用方法。
3. 通过任务的操作实施，掌握箱包App首页Banner
的制作技巧。
4. 通过扩展案例拓展学生的实际应用能力，增强学生的软件使用技巧。
任务4.3 项目演练——制作家电类网店Banner
通过项目演练可以拓展学生的对Banner设计的应用和认知，增强学生对本章软件技能的使用。
项目5、制作手机界面——App设计
界面是App设计中最重要的部分之一，将最终呈现给用户。App界面设计是涉及版面布局、颜色搭配等的综合性工作。通过本项目的学习，读者可以对App界面设计有基本的认识，并掌握制作App常用界面的规范和方法。
相关知识：了解App设计的基础知识
1、了解App的概念。
2、掌握App的设计流程和分类。
任务5.1 制作时尚娱乐App的引导界面
1. 通过对任务引入和设计理念的讲解，使读者掌握时尚娱乐App的引导界面的学习要点和构思过程。
2. 通过对任务知识的解析，熟练掌握软件中相关工具和命令的使用方法。
3. 通过任务的操作实施，掌握时尚娱乐App的引导界面的制作技巧。
4. 通过扩展案例拓展学生的实际应用能力，增强学生的软件使用技巧。
任务5.2 制作旅游App的登录界面
1. 通过对任务引入和设计理念的讲解，使读者掌握
旅游App的登录界面的学习要点和构思过程。
2. 通过对任务知识的解析，熟练掌握软件中相关工具和命令的使用方法。
3. 通过任务的操作实施，掌握旅游App的登录界面的制作技巧。
4. 通过扩展案例拓展学生的实际应用能力，增强学生的软件使用技巧。
任务5.3 项目演练——制作运动鞋App的销售界面
通过项目演练可以拓展学生的对App设计的应用和认知，增强学生对本章软件技能的使用。
项目6、制作互动广告——H5设计
随着移动互联网的兴起，H5逐渐成为互联网传播领域中的一种重要传播形式。H5的应用形式丰富，交互体验良好，深受设计爱好者及专业设计师的喜爱。本项目将对H5的概念、应用及类型进行系统讲解。通过本项目的学习，读者将对H5有基本的认识，有助于后续高效地进行H5的设计与制作。
相关知识：了解H5设计的基础知识
1、了解H5的概念。
2、了解H5的应用和类型。
任务6.1 制作汽车工业类活动邀请H5
1. 通过对任务引入和设计理念的讲解，使读者掌握
汽车工业类活动邀请H5的学习要点和构思过程。
2. 通过对任务知识的解析，熟练掌握软件中相关工具和命令的使用方法。
3. 通过任务的操作实施，掌握汽车工业类活动邀请H5的制作技巧。
4. 通过扩展案例拓展学生的实际应用能力，增强学生的软件使用技巧。
任务6.2 制作中信达娱乐H5首页
1. 通过对任务引入和设计理念的讲解，使读者掌握中信达娱乐H5首页的学习要点和构思过程。
2. 通过对任务知识的解析，熟练掌握软件中相关工具和命令的使用方法。
3. 通过任务的操作实施，掌握中信达娱乐H5首页的制作技巧。
4. 通过扩展案例拓展学生的实际应用能力，增强学生的软件使用技巧。
任务6.3 项目演练——制作食品餐饮行业产品营销H5
通过项目演练可以拓展学生的对H5设计的应用和认知，增强学生对本章软件技能的使用。
项目7、制作宣传广告——海报设计
海报是视觉设计中的主要表现形式，涵盖了图形、文字、版面、色彩等设计元素，其主题内容广泛，表现形式丰富，视觉效果突出。通过本项目的学习，读者可以掌握海报的设计方法和制作技巧。
相关知识：了解海报设计的基础知识
1、了解海报的概念和分类
2、掌握海报的设计原则
任务7.1 制作摄影公众号的运营海报
1. 通过对任务引入和设计理念的讲解，使读者掌握摄影公众号的运营海报的学习要点和构思过程。
2. 通过对任务知识的解析，熟练掌握软件中相关工具和命令的使用方法。
3. 通过任务的操作实施，掌握摄影公众号的运营海报的制作技巧。
4. 通过扩展案例拓展学生的实际应用能力，增强学生的软件使用技巧。
任务7.2 制作招牌牛肉面海报
1. 通过对任务引入和设计理念的讲解，使读者掌握招牌牛肉面海报的学习要点和构思过程。
2. 通过对任务知识的解析，熟练掌握软件中相关工具和命令的使用方法。
3. 通过任务的操作实施，掌握招牌牛肉面海报的制作技巧。
4. 通过扩展案例拓展学生的实际应用能力，增强学生的软件使用技巧。
任务7.3 项目演练——制作“春之韵”巡演海报
通过项目演练可以拓展学生的对海报设计的应用和认知，增强学生对本章软件技能的使用。
项目8、制作网站页面——网页设计
网页是构成网站的基本元素，网页设计是对网站页面的全方位设计。通过严谨的策划分析、合理的内容规划、成熟的创意设计，可以设计出精美的网页作品。通过本项目的学习，读者可以掌握网页的设计方法和技巧。
相关知识：了解网页设计的基础知识
1、了解网页设计的概念。
2、掌握网页设计的流程和原则。
任务8.1 制作充气浮床网页
1. 通过对任务引入和设计理念的讲解，使读者掌握充气浮床网页的学习要点和构思过程。
2. 通过对任务知识的解析，熟练掌握软件中相关工具和命令的使用方法。
3. 通过任务的操作实施，掌握充气浮床网页的制作技巧。
4. 通过扩展案例拓展学生的实际应用能力，增强学生的软件使用技巧。
任务8.2 制作美味小吃网页
1. 通过对任务引入和设计理念的讲解，使读者掌握美味小吃网页的学习要点和构思过程。
2. 通过对任务知识的解析，熟练掌握软件中相关工具和命令的使用方法。
3. 通过任务的操作实施，掌握美味小吃网页的制作技巧。
4. 通过扩展案例拓展学生的实际应用能力，增强学
生的软件使用技巧。
任务8.3 项目演练——制作家具网站首页
通过项目演练可以拓展学生的对网站设计的应用和认知，增强学生对本章软件技能的使用。
项目9、制作商品包装——包装设计
包装代表了一个商品的品牌形象。一个好的包装可以让商品从同类商品中脱颖而出，吸引消费者的注意并激发其购买欲望。好的包装也可以极大地提高商品的价值。通过本项目的学习，读者可以掌握包装的设计方法和技巧。
相关知识：了解包装设计的基础知识
1、了解包装的概念。
2、掌握包装的分类和设计原则。
任务9.1 制作摄影图书封面
1. 通过对任务引入和设计理念的讲解，使读者掌握摄影图书封面的学习要点和构思过程。
2. 通过对任务知识的解析，熟练掌握软件中相关工具和命令的使用方法。
3. 通过任务的操作实施，掌握摄影图书封面的制作技巧。
4. 通过扩展案例拓展学生的实际应用能力，增强学生的软件使用技巧。
任务9.2 制作休闲杂志封面
1. 通过对任务引入和设计理念的讲解，使读者掌握休闲杂志封面的学习要点和构思过程。
2. 通过对任务知识的解析，熟练掌握软件中相关工具和命令的使用方法。
3. 通过任务的操作实施，掌握休闲杂志封面的制作技巧。
4. 通过扩展案例拓展学生的实际应用能力，增强学生的软件使用技巧。
任务9.3 制作啤酒包装
1. 通过对任务引入和设计理念的讲解，使读者掌握啤酒包装的学习要点和构思过程。
2. 通过对任务知识的解析，熟练掌握软件中相关工具和命令的使用方法。
3. 通过任务的操作实施，掌握啤酒包装的制作技巧。
4. 通过扩展案例拓展学生的实际应用能力，增强学生的软件使用技巧。
任务9.4 项目演练——制作咖啡包装
通过项目演练可以拓展学生的对包装设计的应用和认知，增强学生对本章软件技能的使用。
项目10、掌握商业设计——综合设计实训
本项目为综合设计实训，将通过商业设计项目的真实情境来引导读者如何利用所学知识完成商业设计项目。通过本项目的学习，读者可以牢固掌握Photoshop的强大功能和使用技巧，并应用所学技能制作出专业的商业设计作品。
任务10.1 制作女包类App首页的Banner
1. 通过对任务引入和设计理念的讲解，使读者掌握女包类App首页Banner的学习要点和构思过程。
2. 通过任务的操作实施，掌握女包类App首页
Banner的制作技巧。
任务10.2 制作音乐类App的引导界面
1. 通过对任务引入和设计理念的讲解，使读者掌握音乐类App引导界面的学习要点和构思过程。
2. 通过任务的操作实施，掌握音乐类App引导界面的制作技巧。
任务10.3 制作金融理财行业推广H5
1. 通过对任务引入和设计理念的讲解，使读者掌握金融理财行业推广H5的学习要点和构思过程。
2. 通过任务的操作实施，掌握金融理财行业推广H5的制作技巧。
任务10.4 制作七夕节海报
1. 通过对任务引入和设计理念的讲解，使读者掌握七夕节海报的学习要点和构思过程。
2. 通过任务的操作实施，掌握七夕节海报的制作技巧。
任务10.5 项目演练——制作冰淇淋包装
通过项目演练可以拓展学生的对商业案例设计的应用和认知，增强学生对软件技能的使用。
网页设计课程标准 一、课程管理信息 课程名称：网页设计课程代码：XX2BC03 教学单位：制定时间： 编写负责人：审定负责人： 二、课程基本信息 课程学分：8 课程学时：136 授课对象：计算机应用 三、课程简介 （一）课程的性质 《网页设计》是计算机网络专业的核心课程，也是计算机应用专业最基本、最综合的能力训练课程。它主要教授制作网页的基础知识，是一门实践性很强的课程。该课程的核心内容，就是在准备了相关素材的条件下，能够完整的制作出精美的、符合要求的网页，从而增强学生制作网页的能力，提高学生在激烈竞争的市场环境以技能求生存、求发展的能力。 本课程主要培养企业需要的具有专业网页制作理论基础和网页制作实践能力的高素质劳动者。在教学中要向学生介绍网页制作的知识体系与制作方法。让学生具备制作网页的劳动技能，从而使学生在职业过程中能顺利、符合要求地制作出相关要求的精美网页。 中等职业教育以育人为根本，以就业为导向，以产学研结合为途径，以服务地方经济为宗旨，培养高素质劳动者。根据调查，目前企业吸纳计算机专业学生的岗位主要包括：工商企业、酒店、房地产、旅游等部门从事信息管理、管理信息系统的操作、信息系统的维护、信息安全保障、计算机文秘等。而《网页设计》是所有这些计算机类岗位群任职的理论指导和操作指南。 课程学习具有综合性，其课程内容涉及多个岗位不同的工作任务.《网页设计》课程内容以网页制作为主线，从收集素材、制作主页、美化主页到网站的建设，涉及网站维护、网站建设等岗位的不同工作任务。 课程学习具有发展性（长远性），其能力培养不仅着眼于首岗要求，同时还着眼于岗位晋升的要求.课程教学不仅满足网页制作、网站建设、网站维护这些工作任务所需要的知识和技能，同时还进一步考虑晋升所需要的网页制作和网站建设知识的学习和能力的培养。 （二）课程的作用 计算机应用专业是培养计算机操作和开发人才，从对岗位的工作任务和职业能力分析中可以看出，本门课程使学生能够理解和应用网页的美术设计理念与制作技法。要求学生能够掌握Dreamweaver、Photoshop等常用的静态网页制作相关软件。培养学生在商业网站项目方面的策划、设计、制作、调试、维护等能力。赏析各类经典网站、掌握网页制作方法，强化网页制作技能、积累网页制作经验，激发自身学习兴趣、形成持久学习动力，提升自主学习能力、满足职业岗位需求。因此，《网页设计》的课程教学对计算机专业学生的职业能力培养和职业素养起主要支撑作用。 四、课程设计 遵循建构主义学习观。让学生在完成基于工作任务的教学中，在真实的学习情境中学习，通过生生互动、师生互动和市场真实的氛围和环境，主动构建自己的知识与经验。 遵循多元智能理论学生观和教学观。根据生源情况、学生基础及学生形象思维型智力
基本语法： $("HTML元素").action() 实例: $(this).hide(); 隐藏当前元素 $("p").hide(); 隐藏所有段落 $("p.test").hide(); 隐藏所有class="test"的段落 $("#test").hide(); 隐藏所有id="test"的元素 文档就绪函数 $(document).ready(function(){ -------- }); 这是为了防止文档在完全加载（就绪）之前运行jQuery 代码。 下面是两种假如文档完全加载之前运行函数的话，操作失败的情况： ?试图隐藏一个不存在的元素。 ?获得未完全加载的图像的大小。 .divcss{ background-color:#e5eecc; padding:7px; border:solid 1px #c3c3c3; } jQuery 元素选择器 jQuery 使用CSS 选择器来选取HTML 元素。 $("p") 选取 元素。
$("p.intro") 选取所有class="intro" 的 元素。 $("p#demo") 选取id="demo" 的第一个 元素。 jQuery 属性选择器 jQuery 使用XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有href 属性的元素。 $("[href='#']") 选取所有带有href 值等于"#" 的元素。 $("[href!='#']") 选取所有带有href 值不等于"#" 的元素。 $("[href$='.jpg']") 选取所有href 值以".jpg" 结尾的元素。 jQuery CSS 选择器 jQuery CSS 选择器可用于改变HTML 元素的CSS 属性。 下面的例子把所有p 元素的背景颜色更改为红色： $("p").css("background-color","red"); 更多实例 $(this) 当前HTML 元素 $("p") 所有 元素 $("p.intro") 所有class="intro" 的 元素 $(".intro") 所有class="intro" 的元素 $("#intro") id="intro" 的第一个元素 $("ul li:first") 每个
中等专业学校2022-2023-2教案
教学内容jQuery Mobile中的列表是标准的HTML列表，可以设定有序列表和无序列表。执行“插入-jQuery Mobile-列表视图”命令，弹出“列表视图”对话框，如图所示。 列表类型：可以选择有序列表和无序列表。 项目：表示序列中添加几个列表项。 ①凹入：表示项目四周自动增加外边距，样式为圆角等。 ②文本说明：添加一些对列表内容的说明性文字，使其更加丰富，显示在左侧。 ③文本气泡：气泡数字是用来显示列表项相关的数字，有计数功能如邮箱的邮件的个数。 ④侧边：主要内容的附属信息部分，显示在右上角。 ⑤拆分按钮：在jQuery Mobile的列表中,当选项内容需要做出两种不同操作时,会用到该选项,其作用是对链接按钮进行分割。实现分割的方法是在<1i>元素中再增加一个元素。分割后jQuery Mobile会自动设置第二个链接为蓝色箭头图标,图标的链接文字将在用户将鼠标悬停在图标上时显示。 拆分按钮图标:当“拆分按钮”被选择后,“拆分按钮图标”才可选用,其作用是加按钮的可视性。 2.任务安排：我的家乡——建立jQuery Mobile页面
教学内容①任务描述：通过使用jQuery Mobile技术建立一个jQuery Mobile页面，学会jQuery Mobile元素的插入方法及属性设置。 ②操作提示： Ⅰ.新建文件jq.html，在状态栏中页面大小处选择移动端页面大小“iphone 7 plus” Ⅱ.创建jQuery Mobile页面。选择“插入-jQuery Mobile-页面”命令插入jQuery Mobile页面 Ⅲ.在弹出的“jQuery Mobile”对话框，选择连接类型和CSS类型，本任务以Dreamweaver自带库源为例，单击确定后，系统弹出“页面”对话框 Ⅳ.“jQuery Mobile”的安装。可以从“jQuery Mobile 文件”对话框中更新jQuery Mobile库，也可以从CDN 中载入jQuery Mobile。
网页设计与制作电子教案 网页设计与制作电子教案 一、课程简介 网页设计与制作是一门介绍网页开发、设计、制作与维护的课程。通过本课程的学习，学生将掌握HTML、CSS、JavaScript等基本技能，并能够使用这些技能独立设计和制作出美观、易用的网页。同时，课程还将介绍一些前端开发框架和工具，如Bootstrap、Vue.js、Git 等，以帮助学生提高网页开发的效率和质量。 二、课程目标 1、掌握HTML、CSS、JavaScript等基本技能，熟悉网页开发的基础知识和流程； 2、能够使用HTML标签和CSS样式进行网页布局和样式设计； 3、能够使用JavaScript实现网页交互效果和动态功能； 4、熟悉前端开发框架和工具，如Bootstrap、Vue.js、Git等； 5、能够根据用户需求，独立设计和制作出美观、易用的网页。 三、课程内容 1、网页开发基础知识
1、网页的基本结构和工作原理； 2、HTML、CSS、JavaScript等基本概念和语法。 2、HTML标签和文档结构 1、标题、段落、链接、图片等基本元素的使用； 2、列表、表格、表单等复杂元素的使用； 3、HTML文档结构与头部信息的解析。 3、CSS样式与布局 1、CSS的基本语法和选择器； 2、字体、颜色、背景等基本样式的设计； 3、盒模型与布局技术，如定位、浮动、Flexbox等； 4、CSS3的动画与渐变效果。 4、JavaScript交互功能 1、JavaScript的基本语法和数据类型； 2、DOM操作与事件处理； 3、AJAX技术与异步通信；
4、JavaScript的常用库和框架，如jQuery、Vue.js等。 5、前端开发框架和工具 1、Bootstrap快速布局和样式设计； 2、Vue.js基于组件的前端开发； 3、Git版本控制与团队协作。 6、网页设计与制作实践 1、根据用户需求，设计和制作出美观、易用的网页； 2、网页的响应式设计和移动端适配； 3、网站的发布与部署。 四、教学方法 1、理论教学：通过课堂讲解、案例分析、课堂讨论等方式，使学生掌握基本的网页开发理论和技能。 2、实践教学：通过课堂演示、实验指导、项目实训等方式，使学生掌握网页开发的基本技能和实践能力。 3、在线教学：通过在线视频、在线文档、在线交流等方式，提供丰富的课程资源和学习支持。
阶段实验报告 课程名称：使用JQuery快速高效制作网页交互特效章节名称：JavaScript 操作BOM对象 授课教师：总第 1 次实验，本次第 1 阶段 以下部分由授课教师填写： 分配时间90 (分钟) √ 必须完成提高完成 技能要点 及 思路提示任务一：创建person对象 需求说明： 1、基于Object对象的方式创建person对象 2、使用“.”为对象person添加属性name、age、job和address，即一个人的姓名、 年龄、工作和住址。 3、添加方法intro()在页面上显示对象属性name、age、job和address值。 效果截图： 将完成的代码截图放置任务一 任务二：创建person构造函数 需求说明： 1、创建构造函数创建Person函数。 2、使用原型对象的方法添加属性和方法。 3、在页面中显示原型对象的属性值。 效果截图： 将完成的代码截图放置任务二
效果截图： 将完成的代码截图放置任务二 任务三：创建Person对象并画原型链图 需求说明： 1、创建构造函数创建Person函数，添加属性民族nation和肤色skinColor，添加 两个方法，分别返回民族和肤色。 2、创建构造函数Woman，添加属性性别sex，Woman继承Person。 3、为构造函数Woman添加方法，返回性别。 4、创建Woman的实例对象woman1。 5、在页面中输出对象woman1三个方法的值。 6、画出本练习原型链图。 效果截图： 将完成的代码截图放置任务三 任务四：创建Person的Student子类 需求说明： 1、创建构造函数Person，添加属性姓名name、语文成绩chinese、数学成绩math； 添加三个方法，分别返回姓名、语文和成绩。 2、创建构造函数Student，继承Person的属性和方法，并添加属于自己的属性年龄 age，添加属于自己的方法，返回年龄。 3、创建Student的对象，并在页面上输出实例的姓名、语文、数学和年龄。 效果截图：
课程名称：网页脚本技术(JavaScript+jQuery) 学分：4 计划学时：64 适用专业：计算机应用技术 1．前言 1.1课程性质 该课程是计算机应用技术专业用户界面设计方向的一门专业拓展课，是在网站前端设计、移动Web开发(Html5+CSS3)等专业课的基础上开设的，与网站项目管理、网站后台开发(https://www.doczj.com/doc/d719154953.html,)等后续课程也有着紧密联系。 本课程遵循“以就业为导向，以学生为主体，以培养职业技能为中心”的原则进行课程设计与教学。从实际应用的角度来理解JavaScript语言的语法和jQuery 库的应用，引导学生在完成各个网页特效设计任务的过程中，熟练掌握形式多样的网页特效的设计方法，培养学生网页特效分析和设计能力。 1.2设计思路 本课程对就业方向所涵盖的岗位进行任务与职业能力分析，以实际工作任务为引领，以创新能力培养为主线，将课程知识体系整合为十个技能教学模块，在教学过程中注意体现学生设计能力培养的循序渐进性。在教学内容和方法上贯彻“技能培养为主，知识够用为度”的教学思想，旨在培养学生的创新意识，提高岗位实践能力和适应能力。 在每个教学单元中设置了3条主线：教学流程主线、理论知识主线和操作任务主线。充分考虑教学的要求，每个教学单元面向教学全过程设置了完整的教学环节，按照“教学导航->特效赏析->知识必备->引导训练->同步训练->考核评价”6个环节组织教学。 2．课程目标 2.1总体目标 通过本课程的学习使学生掌握JavaScript的基本语法概念和使用JavaScript 进行页面效果开发的基本思想；能熟练地用JavaScript语言进行浏览器端的脚本开发；能熟练使用jQuery进行Web页面处理。培养学生规范编码和良好的程序设计风格；培养学生面向对象编程的思维和提高逻辑思维能力；培养学生发现问题、分析问题、解决问题的能力；培养良好的职业素质；培养团队协作和和谐的沟通能力；并为学生以后从事更专业化的软件开发工作或者学习后续课程打下良好的基础。2.2具体目标
《Java Script程序设计与jQuery框架》核心课程标准 一、课程性质与定位 本课程是软件技术专业的重要核心课程之一，在专业人才培养目标和技能规格要求中，占有重要地位。通过本课程的课堂教学和实践教学，要求学生理解和掌握Java Script脚本语言，具备Java Script程序编写的基本方法和基本技能，培养学生利用Hbuiler、浏览器等开发环境进行动态网页的分析、设计、编码和测试的能力，培养学生科学的思维方法，灵活运用知识的能力，实验操作能力，为后续VUE框架前端项目开发综合实训打下坚实的基础。 二、课程设计与理念 本课程强调对学生规范编程能力、动态网页设计思路、自主学习能力的养成，按照理实一体、课内外互补、课堂教学与培优工程相结合的课程设计指导思想，以任务或项目为载体组织教学内容，采取讲练结合、微课教学、视频辅导、单元测试、赛练融合等多种教学形式和手段，突出学生的主体地位，在校内实训室完成所有教学环节，实现“教、学、做”的有机融合；通过班级讲授、团队学习、个体辅导、展示交流、技能大赛等手段，实现从模仿到应用到创新的高职学生递进式培养。 三、课程目标 （一）总体目标 通过本课程的学习使学生掌握JS动态网页的设计思路、基本技术；掌握一定的jQuery 框架开发知识，学会制作各种企业、门户、电商类网站。同时通过教学过程中的实际开发过程的规范要求强化学生的职业道德意识和职业素质养成意识，为通过Web前端开发初级证书考核及后续课程学习夯实基础， （二）具体目标
1.能力目标 了解Web前端程序员等相关职业岗位的工作职责；具有一定的网页设计与制作能力；具备良好的编程习惯和准确的语言表达能力；具有一定的科学思维方式和分析判断解决问题的能力；具有社会适应能力、沟通能力与自我学习能力；具有良好的职业道德与敬业精神，具有团队合作意识。 2.知识目标 熟练掌握Java Script编程基础；掌握Java Script内置对象和函数，熟练掌握数组的使用；掌握Java Script常用事件；掌握BOM对象和DOM对象操作，并结合事件实现与浏览器窗口的交互操作；掌握jQuery框架在元素、节点、事件等操作方面的实现方法；通过综合案例巩固HTML5、CSS3、Java Script、jQuery框架等的应用。 四、课程教学内容及学时分配
jQuery网页特效是专注于网页行为的一门Web前端课程，主要通过案例讲解jQuery框架的应用，涉及jQuery的基本使用、选择器、DOM操作、事件机制、动画方法、Ajax交互、第三方工具使用等。通过本课程的学习，学生能够理解jQuery的实质，掌握jQuery的使用方式，能使用jQuery快速实现网页特效。 2.创新创业与课程融合情况分析 (1)课堂上创新教学方法。把分组讨论、情景教学、头脑风暴等有创意的教学方法引入课堂，让学生大胆认识自己，克服心理障碍，肯定自己，规划自己，鼓励同学培养编程兴趣，通过创新教学方法带给学生创新的思维。课后，同学们能按组参与图书管理系统和在线商城项目的开发和维护，对项目开发有深入的了解，对项目的功能能够根据行业现有软件的现状，提出改进意见，探寻创新创业思路。 (2)利用第二课堂进行创新创业开发。依靠项目开发实验室，通过实践教学管理系统项目、齐鲁软件大赛项目，培养激发学生的创新意识和创业精神，使学生更清楚得认识自身的潜能，初步了解职场的基本特性，从多个维度对职业特征、职业环境、职业素养进行探索，从而为学生未来的工作做准备。 3.课程思政情况分析 本课程是信息与艺术学院信息技术类专业群平台课程，是软件开发模块的核心课程。前导课程是静态网页设计，JavaScript前端网页开发，后续课程是J2EE 项目实战实训课程。 主要任务是培养学生的网页特效实现能力，培养学生团队合作、提升判断力和决定能力以及前端工程师需要掌握的其他能力，为后续学习和工作奠定基础。 课程思政方面主要结合当前时事政治，对学生进行思想教育，并结合课程知识点，潜移默化地与思政知识进行融合。 1
《网页界面设计》课程标准 一、课程概述 1.课程性质 《网页界面设计》是高职数字媒体应用技术专业针对网页设计、网页美工等关键岗位, 经过对企业岗位典型工作任务的调研和分析后，选择真实工作项目为教学载体，根据数字媒体公司应用性人才的实际要求，重构课程内容，归纳总结出来的为适应网页设计与制作、网页美工等岗位要求的网页图形制作和图像处理、网页版面设计能力要求而设置的一门专业核心课程。 2.课程任务 《网页界面设计》课程通过对“优秀网页作品赏析”、“网页文字设计”、“网页文字编排”、“网页导航条的设计制作”、“网页按钮的设计制作”、“网站Logo设计制作”、“网页色彩的设计”、“网页版式设计制作”8个教学项目的学习，在学生具备一定的计算机操作能力和图形制作能力的基础上，主耍培养学生对网页界面设计各元素的设计方法和技巧，对网页版式设计的专业能力，以及团队协作、综合分析、创新创意等综合素质和能力，为后期课程《网页特效》、《网页制作综合训练》和《毕业设计与答辩》奠定网页图形创意与设计、网页版式设计的基础。 3.课程要求 《网页界面设计》课程主要采用“项目导向，任务驱动，案例教学，理论实践一体化课堂”的教学模式开展教学，课程的理论实践一体化教学全部安排在设施先进的理实一体教室进行，教学中采用多种学习素材及教学手段，教师全程负责答疑解惑、指导项目制作，充分调动师生双方的积极性，达成教学目标。 二、教学目标 1.知识目标 （1）了解网页设计的构成要素、表现形式和特点； （2）掌握网页创意思维原则，理解网页设计创意方法； （3）了解网页文字的表现形式、字体特征，编排形式及特点； （4）掌握文字创意设计的常用方法； （5）了解网页导航的功能作用，掌握网页导航的形式、位置及导航方向的应用特点； （6）了解网站标志的功能作用及分类，掌握网站标志造型设计的艺术要点及设计原则； （7）掌握网页按钮的设计原则、设计方法，掌握网页按钮制作工具的操作使用； （8）了解有关色彩的基本常识和心理效应； （9）掌握网站色调、主色、辅色、背景色在网站风格定位中的实际应用； （10）掌握网站色彩搭配的方法和技巧；
《网页设计与制作》课程教案 一、课程定位 本课程是计算机应用技术专业的一门专业基础课程，该课程的学习能够提升他们对网页制作的兴趣，让他们学习网页制作的基本技能，为后继课程打下基础，同时扩展其就业面，为就业做好准备。 本课程的目的和任务是让学生学会Dreameaver CS6、Flash和Fireworks 的使用方法，并能够使用这3款软件制作出美观实用的网页。 二、课程总目标 掌握网页制作的基本方法和技能，掌握网站建设的流程，能够运用所学知识建设常用的网页和网站，同时能够美化网页，设计人性化、艺术化的网站静态页面部分。 （一）知识目标： 1.熟悉网页制作的基本元素； 2.掌握Dreamweaver CS6软件的基本操作方法； 3.掌握在网页中插入文字、图片、声音、flash等的方法； 4.掌握常见的网页布局方法，学会使用CSS美化网页； 5.掌握在网页中使用表单和制作网页特效的方法； 6.掌握简单图形图像的处理，能够制作符合网页主题的图片和简单动画 并巧妙地和网页中内容搭配起来。 7.掌握建设一个功能相对完善的网站的方法并能制作常用的网站的静 态页面部分。 （二）职业能力培养目标 1. 能够根据网站开发需求，去寻找网页设计和网站开发所需要的文字、 图片、动画、声音、视频等素材并作美化处理； 2．能够制作出符合主题色彩的网页，网页要求美化、被绝大多数浏览 者接受和喜爱；
3.能够设计企业网站、政府门户网站、学校网站等常见网站的基本静态 页面。 （三）素质目标 1.具有勤奋学习的态度，严谨求实、创新的学习精神； 2.具有良好的心理素质和职业道德素质； 3.具有高度责任心和良好的团队合作精神； 4.具有运用理论知识发现问题、分析问题并解决问题的能力，同时能够 不断学习，不断创新，让自己的设计越来越完善，有止于至善的精神。（四）职业技能证书考核要求： 可以根据自身情况考取“全国计算机信息高新技术资格证”，“网页设计制作员”，“网页设计师”等职业技能证书。 三、重点、难点章节及内容 1.重点章节： 1.2 网页、网站相关术语简介 1.6 网站建设的基本流程 2.3 Dreamweaver CS6的工作环境 3.2 创建本地站点 3.4 使用站点 3.5 网页设计中的规范 4.1 网页文件的基本操作 4.3 插入文本 4.4 插入水平线 4.5 插入其他基本元素 4.6 创建列表 5.1 超级链接概述 5.2 创建超级链接 5.3 使用dw制作各种超级链接
《jQuery程序设计》课程标准 课程代码：400034 课程类别：理论+实践 适用专业：计算机应用技术学时：96 编写人：孙婷婷审定负责人：李凌 一、课程的性质 jQuery是继prototype之后的又一个优秀的Javascript框架。它是一个简洁快速灵活的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。此外，数百种为扩展jQuery功能而开发的插件，更使得它几乎成为使用各类客户端脚本编程的必备工具。 《jQuery程序设计》是软件技术专业的核心课程之一，是网页制作技术方向系列课程中的主干课程。该课程对于实现专业的培养目标、增强学生的就业竞争力具有非常重要的作用，是检验专业教学成果的重要课程，也是评价本专业学生是否掌握学科基础知识、能否综合运用所学知识解决实际问题、是否具备软件开发各种技能的重要课程； 本课程的先导课为《HTML网页制作技术》、《CSS网页制作技术》、《JavaScript程序设计》；后续课程为《https://www.doczj.com/doc/d719154953.html,程序设计》、《顶岗实习》。 二、设计思路 高职教育的集中实践教学环节也要明确必要的理论知识深化和拓展的要求，不能局限于单纯的技能训练作用。单纯的技能训练不是高职教育的理想课程。 本课程设计理念是以职业能力培养为重点，以就业为导向，培养学生具备职业市场所需的职业能力，生涯发展所需的能力和终身学习的能力。 基于工作过程开发课程，以行动导向进行教学设计，以学生为主体，以实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为目标、以施工任务（项目）为载体、理论学习与实践操作结合。 三、课程职业描述与培养目标 1 课程职业描述 本课程对高端技能型专门人才的培养具有重要意义，通过课程的教学使学生掌握jQuery专业理论知识和实际操作技能，为从事软件技术专业软件开发工程师岗位奠定良好的专业基础。具备jQuery 技能的人才主要从事基于WEB技术的电子商务及网站开发、维护工作 ,参与开发环境的设计和搭建,承担系统设计、程序设计和开发工作,完成项目相关文档和质量记录 ,解决软件出现的问题和缺陷。 2培养目标 1
网页动画设计课程标准 一、课程性质与任务 本课程是中等职业学校电子商务专业的一门专业方向课程，其任务是培养学生用二维动画软件设计制作动画的能力，使学生掌握二维动画各种动画效果的制作方法以及应用技巧，掌握与其他多媒体软件结合开发大型动画作品的技术，达到高素质劳动者和中初级应用型专门人才所必需具备的二维动画制作的基本技能，并为学生就业和继续学习打下良好的基础。 二、课程教学目标 知识目标： 1、了解二维动画制作的工作流程及基本方法； 2、掌握二维动画软件的基本工具的使用方法与技巧； 3、理解基础动画原理； 4、熟悉并初步掌握ActionScript语言的运用及编写技巧； 5、了解二维动画软件与其他多媒体软件结合进行创作的技巧。 能力目标：
1、会使用二维动画软件的输助设计网页； 2、能够灵活使用元件的库资源； 3、能够灵活运用各种基础动画及图层动画，完成完整的动画项目。 三、参考学时 196学时 四、课程内容与培养目标
五、教学建议 （一）教学方法 本课程注重将个体的自主学习、群体的协作式学习和师生互动的学习结合；注重以职业为向导，通过职业情境的创设，用多媒体纪录片等多种方法提高学生分析问题和解决问题的职业能力；注重培养学生的动手制作能力和创新设计能力。重视实践，强化实践性教学环节更新观念，加强校企合作，将企业项目与学校与教学有机会结合，走产学研相结合的道路，为学生提供认知、认知和顶岗实习的机会与平台，为学生提供了更大的学习和发张空间。
（二）评价方法 本课程将主要围绕学生的作品进行评价。评价将综合两个方法的标准：学生操作技能的熟练程度和规范程度；学生作品的美学水平。评价将结合过程性评价和综合性评价，主要采用学生自评、展评、教师评价的方式进行，部分项目要有企业参与评价。 （三）教学条件 开展本课程教学需要在多媒体网络机房进行，各种功能展示以及项目教学都需要在网络.环境下进行。学生的小组学习和教师的个别化辅导也可以在网络环境下进行。 （四）教学编写 1.依据本课程教学标准组织教材的编写。教材编写者需要充分领会和掌握本课程标准标准的基本概念、目标、内容和要求，体现“以就业为向导，以学生为本位”的原则，将知识与生产生活中的实际应用相结合，并整体反映在教材之中。 2.教材的内容要注意可行性、实用性、灵活性和前瞻性。 3.教材的编写可以项目来组织内容，每个项目要有明确的项目描述、知识要点、考核要求等. (五)教学化教学资源开发 1.根据课程教学标准，结合应用能力的培养要求，开发符合教学特点的多媒体教学课件。课件要求汇集相关的教学素材，提供课程各知识点，形成教学资源库。各任课教师在此基础上组织课件，形成具有个人风格和专业特色的课件。
《jQuery项目实战》课程标准 一、课程定位（概述） 该课程是计算机应用技术专业（网站开发）的一门职业技术课程，是在多年教学改革的基础上，通过对网站开发相关职业工作岗位进行充分调研和分析的基础上，借鉴先进的课程开发理念和基于工作过程的课程开发理论，进行重点建设与实施的学习领域课程。它以《程序设计基础》、《网页制作基础》、《CSS+DIV》和《JavaScript程序设计》课程的学习为基础，目标是让学生掌握jQuery的基本使用、选择器、DOM操作、事件机制、动画方法、Ajax 交互、第三方插件工具使用等方面的知识，重点培养学生运用jQuery来独立快速构建网页中的动态交互效果，掌握jQuery的专业知识和专业技能。 二、设计思路 （一）课程设置的依据 该课程是依据“计算机类专业人才培养方案”中的“Web前端开发技术”教学主线设置的。其总体设计思路是，打破以知识传授为主要特征的传统学科课程模式，转变为基于工作过程的教学模式，以完整的网站的前端开发工作任务为对象，组织学生通过完成这些工作任务来学习相关的知识、培养相应的职业能力。课程内容突出对学生职业能力的训练，相关理论知识均与所要完成的工作任务有密切联系，融合相关岗位（群）对知识、技能和态度的要求，要求该课程要通过校企合作，组织校内实训项目小组等多种途径进行教学，采取工学结合等形式，充分开发学习资源，给学生提供丰富的实践机会。教学效果评价采取过程评价与结果评价相结合的方式，通过理论与实践相结合，重点评价学生的职业能力。 （二）课程内容确定依据 该门课程的总学时为72。以基于工作过程的课程开发理念为指导，以职业能力培养和职业素养养成为重点，根据技术领域和职业岗位（群）的任职要求，遵循学生认知规律，将本课程的教学活动对jQuery涉及知识分解设计成若干实验项目或工作情景，以具体的项目
《网页设计与制作》课程标准 前言： 《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。本课程定位于WEB技术开发工作岗位。它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用， 一、课程的说明： 通过本课程的学习，使学生了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，通过运用Photoshop图像处理软件和Flash动画制作软件，三个软件互相配合，完成网页设计与制作任务的方法。为今后从事网页设计与制作、网站开发和管理奠定基础。在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主学习能力和探索创新能力。 二、课程内容与基本要求： 该课程涉及的知识是网页设计人员必备的基本技能，职业活动与课程内容的对应关系如下： 三、教学目标 1、职业关键能力目标
(1) 掌握使用Photoshop进行图像处理的基本方法及操作技能 (2) 掌握DreamweaverCS5的基本知识及操作技能 (3) 掌握建立与管理站点的方法 (4) 掌握制作主要内容为文本的网页的方法 (5) 掌握在网页中插入与编辑图像的方法 (6) 掌握在网页中插入多媒体元素的方法 (7) 掌握表格处理与网页布局的方法 (8) 掌握创建超级链接的方法 (9) 掌握使用框架制作旅游网站的方法 (10) 掌握创建和使用模板的方法 (11) 掌握创建和使用库的方法 (12) 掌握在网页中添加AP Div的方法 (13) 掌握在网页中使用行为的方法 (14) 掌握HTML基础知识及通过代码修饰网页的方法 (15) 掌握使用CSS样式表修饰网页的方法 (16) 掌握动态网页的概念及简单动态网页的制作方法 2、职业专门能力目标 (1) 通过完成相关的项目，掌握网页设计的基本工作流程。 (2) 通过完成相关的项目，掌握网页设计常用工具的使用方法。 (3) 通过完成相关的项目，掌握网页布局及美化的基本方法。 (4) 通过完成相关的项目，掌握简单网页交互的制作方法。 3、方法能力目标 形成一定的学习能力、沟通与团队的协作能力，形成良好的思考问题、分析问题和解决问题的能力，养成良好的职业素养。遵守国家关于软件与信息技术的相关法律法规，形成关键性的软件开发与应用的能力。 四、教学内容 第一章网页制作基础知识（4学时） 教学目标： 网页与网站基本概念、网页基本组成元素、常用网页制作软件 主要教学内容： 1.1 网页制作基础知识 1.2 网页的基本构成元素