学期授课计划（课程教学设计方案）
编号：JX1-01-JL02
学年学期 任课教师 课程代码 学习内容： 本课程针对应用软件前端设计、开发和维护等岗位能力，为培养学生能按照任务要求完成工作任务，具有良好编程规范习惯，程序的阅读、修改、调试等核心职业能力而设置。 教师根据每个教学任务的知识点的要求，讲授基本概念、专业技术，采用教学案例演示等教学法，使学生充分理解基本概念和技术在应用软件前端设计、开发任务中的应用。 经过典型工作任务分析，选择“任务管理系统”项目，其中包括5个子项目来组织教学过程，分别为： 1．任务管理系统欢迎页面 2．用户注册页面 3．用户注册验证（JavaScript） 4．用户注册验证（jQuery） 5．综合页面 能力目标： 本课程的教学目标是使学生具备运用HTML5、CSS 3和JavaScript完成页面设计、布局、实现应用软件功能的能力。 具体如下： 1. 能够熟练运用HTML完成网页的基本内容设计。 2. 能够运用HTML5和CSS 3完成网页的设计、布局。 3. 能够使用JavaScript语言处理业务逻辑。 4. 能够利用JQuery等框架处理业务逻辑。 5. 能够运用常用框架处理业务逻辑。 6. 能够熟练完成用户界面的特效。 学习成果要求： 本课程注重学生学习过程，主要的学习成果为每一个项目中子任务的作品、每一个项目的综合作品、项目总结和项目代码。 2021-2022-1 张老师 #N/A 学期学时 课程名称 适用班级 纯理论学时 前端设计与开发 --班级编号-- 0 一体化学时 考核方案（含公式）： 本课程注重学生学习过程的考评，对“任务管理系统”项目中的5个小项目分别考评训练项目结束后设置考核，考核学生的理论和动手操作能力。课程结束时，综合各个项目的考核结果对学生的成绩和各项素质进行全面评价。
1
总成绩 = 项目考评成绩×50% + 期中考试×20%+期末考试×30% 教学组织要求： 理论授课:实践教学=1：3 子任务学习的时候以个人为单位，总项目的学习学生以项目小组的形式组织教学，每个小组4-5人，每个老师辅导3-4组为宜。 每周4学时，安排15个教学周。 前后课程关系说明： 前续课程：《网络与WEB技术导论》 后续课程：《响应式Web设计》 教材： 《HTML+CSS+JavaScript网页制作（第3版）》机械工业出版社，2021年9月，刘瑞新 教学参考资料： 1.林跃进主编《Web前端开发技术与JavaScript框架编程》，东软电子出版社，2013年6月出版 2.储久良编著《Web前端开发技术》——HTML、CSS、JavaScript（第2版），清华大学出版社，2016年8月第2版 3. 范伊红主编《基于HTML5的网页设计及应用》，电子工业出版社，2017年1月 部门领导意见：（是否符合课程标准，是否允许执行） 院(系、部）领导签字（公章） 年 月 日 2
附件1：学习任务与学习活动一览表
学习任务 子任务（项目） 学习活动 周学次 时 目的及要求 授课形式及地点 平时 作业 1．明确项目任务，制定进度计划，学习项目制作的基础知识（ 4学时） 1.1 页面设计理论 1 了解网页的来源和本质、网页的组成元素、网页的布讲练结合 局、网页的色彩、网站建设需求分析、网页设计流程。2 132号楼机了解HTML特点、HTML语法、HTML文档结构，熟悉工具软件（VS code、atom、Dreamweaver等） 房 2 熟悉基本块级标签、列表标签 讲练结合 132号楼机房 讲练结合 132号楼机房 讲练结合 132号楼机房 无 任务1任务管理系统欢迎页面 1.2 HTML语言概述及语法 1 2-1、2 2-3、5，3-1 （8学时） 2．利用html编写页面 （ 4 学时） 2.1 HTML的常用标记 2 2 熟悉表格、分区标记 2.2 HTML的交互标记 2 2 熟悉链接、图像标记 3-1/欢迎页面 3.1 了解项目内容，制定项目学习任务 3．明确项目任务，制定进任务2用户度计划，学习项目制作的注册页面 html5+CSS3基础知识 （22学时） （ 18 学时） 3 讲练结合 掌握动态网页的动态效果原理、表单设计基础知识、2 132号楼机表单标记 房 讲练结合 132号楼机房 讲练结合 132号楼机房 无 3.2 表单标记 3 2 掌握表单标记，演练综合实例 演练3-11（会员注册） 3.3 CSS的概念 4 2 了解CSS概念、CSS的基本语法，熟悉选择器 无 3
学习任务 子任务（项目） 学习活动 3.4 CSS选择器的应用 周学次 时 4 目的及要求 授课形式及地点 讲练结合 132号楼机房 讲练结合 132号楼机房 讲练结合 132号楼机房 讲练结合 132号楼机房 讲练结合 132号楼机房 讲练结合 132号楼机房 讲练结合 132号楼机房 讲练结合 132号楼机房 平时 作业 4-3 演练5-3、4 演练5-17 了解CSS的继承特性、CSS的层叠特性、CSS常用2 单位、CSS书写和命名规范 2 理解、掌握CSS盒子模型、盒子之间的关系 3.5 CSS盒子模型 5 3.6 CSS盒模型的应用 5 2 掌握CSS定位与浮动 3.7 CSS页面布局 6 4 掌握CSS页面布局 5-1/2 3.8 CSS内容排版 7 2 掌握CSS内容排版 6-1 4.1 用户注册页面的布局 4．利用html5+CSS3编写页面 （4学时） 7 2 掌握页面的整体布局 无 3-2（用户注册表单） 第一个JavaScript简单程序（2-1） 例2-7简易计算器 4.2 用户注册页面的样式化 8 2 能够利用CSS对页面进行样式化 任务3用户5．明确项目任务，制定进注册验证度计划，学习项目制作的（JavaScript） JavaScript语法基础知识 5.1了解项目内容，制定项目学习任务，学习JavaScript语法基础知识 8 了解JavaScript、JavaScript的应用、JavaScript嵌入网2 页的方式、JavaScript的特点、JavaScript程序代码的编写习惯 （20学时） （4学时） 5.2 JavaScript语法基础 9 讲练结合 了解掌握数据类型、常量、变量以及数据类型的转换、2 132号楼机掌握表达式和运算符 房 4
学习任务 子任务（项目） 学习活动 周学次 时 目的及要求 6.1 JavaScript程序流程控制 6.Javascript程序逻辑 9 2 掌握JavaScript程序流程控制 （4学时） 6.2 JavaScript函数 10 2 掌握JavaScript函数 授课形式及地点 讲练结合 132号楼机房 讲练结合 132号楼机房 讲练结合 132号楼机房 讲练结合 132号楼机房 讲练结合 132号楼机房 讲练结合 132号楼机房 讲练结合 132号楼机房 平时 作业 四则运算 3-2电子时钟 7.1 JavaScript对象的基本概念 10 了解掌握对象和类、对象的使用、对象废除、对象类2 型 3-4构造函数 7.2 JavaScript对象类型 7.JavaScript对象（8学时） 11 2 掌握对象的类型和部分核心对象 无 7.3 JavaScript核心对象 11 2 了解掌握核心对象、环境对象 无 7.4 JavaScript DOM编程 12 2 了解掌握DOM对象和编程技巧 例4-3 dom对象 8.利用html5+CSS3+JavaScript完成用户注册信息验证 8.1 用户注册信息验证页面布局 12 2 巩固并利用CSS进行页面布局 无 5
学习任务 子任务（项目） （4学时） 学习活动 周学次 时 目的及要求 授课形式及地点 平时 作业 8.2 完成用户注册信息验证页面 13 2 掌握JavaScript对象的使用 讲练结合 132号楼机房 例4-14注册表单验证 任务4用户注册验证（jQuery）（69.明确项目任务，制定进度计划，学习项目制作的JQuery基础知识（4学时） 9.1了解项目内容，制定项目学习任务，学习jQuery基础常用操作 9.2 jQuery常用操作 10.1 注册页面进行交互的事件设置 11.1明确项目任务，制定进度计划，学习项目制作的常用框架基础知识 13 2 了解jQuery基础语法和特点 讲练结合 132号楼机房 讲练结合 132号楼机房 讲练结合 132号楼机房 讲练结合 132号楼机房 无 14 2 了解jQuery常用操作 9-8、9 9-11（用户注册验证表单） 网站综合页面的布局 具有交互作用并且内容丰富的页面 无 学时） 10.根据项目要求完成程序编写（2学时） 14 2 HTML、CSS、jQuery的应用 11．明确项目任务，制定进度计划，学习项目制作的常用框架基础知识 15 2 熟悉前端设计及开发的流程 任务5综合页面（4学时） （2学时） 12．根据项目要求完成程序编写（2学时） 12.1根据项目要求完成程序编写 15 讲练结合 2 复习HTML+CSS+Javascript（jQuery）等内容的使用 132号楼机房 无 无 合 计 60 （注：1.学习任务、子任务和学习活动的数量因课程而异； 2.学习活动详细到每个教学时间单元； 3.中期、期末考核指定考核内容及方式）
6
附件2：学习任务设计方案
课程名称 适用班级 任务编号 学习内容： 1．明确项目任务内容，选择Html语言的标签 2．设计页面结构，利用Html语言编写完成指定页面 3．按照具体要求对页面进行修饰 能力目标： 1.能够进行项目分析 2.能够利用HTML进行页面设计 专业知识： 1.HTML常用标记 2.网页的色彩及设计流程 1 前端设计与开发 --班级编号-- 任务总学时 8 课程编号 #N/A 学期学时 任务名称 任务管理系统欢迎页面 理论学时 0 一体化学时 8 学习环境： 1．理论和实践教学场地：教室 2．使用设备： 硬件：Pentium3以上的计算机。 软件：VS code、atom、Dreamweaver等其中任一款 专业工作方法： 1.对利用HTML标记语言进行网页的简单设计 2．利用HTML标记语言进行管理页面的设计 学习成果要求： 1.页面美观并且包含所学的所有标记 2. 项目总结全面 评价标准： 1．能够利用HTML语言编写页面 2．合理安排页面 3．能够运行并测试自己编写的页面 教学组织： 本项目共8学时。其中：理论教学3学时；项目编程、调试、评价5学时；项目操作、设置过程由学生自主完成，教师指导。可以随时完成，随时验收。验收过程中进行学生自我评价，在进行教师评价。评价中，教师和学生本人都要针对学生的操作和设置过程提出改进意见。项目总结利用课余时间完成。 （每个学习任务填写一张表格，中间间隔一个空行）
7
课程名称 适用班级 任务编号 学习内容： 2 前端设计与开发 --班级编号-- 任务总学时 22 课程编号 任务名称 理论学时 #N/A 学期学时 用户注册页面 0 一体化学时 22 1.读懂并理解项目任务书 2.制定进度计划 3.学习HTML5的基本元素和特点，熟练记忆 4.学习CSS3的基本元素和特点 5.学习利用CSS3掌控页面布局 6.学习利用CSS3解决页面样式变化的问题 7.设计页面布局结构，利用html5+CSS3编写完成指定页面 8.按照具体要求对页面进行修饰 能力目标： 1.能够进行项目分析 2.能够运用HTML5和CSS 3完成网页的设计、布局、样式 专业知识： 1.CSS选择器的类型 2.CSS盒子模型 3.CSS内容布局和排版 学习环境： 1．理论和实践教学场地：教室 2．使用设备： 硬件：Pentium3以上的计算机。 软件：VS code、atom、Dreamweaver等其中任一款 专业工作方法： 1.利用CSS进行页面布局和排版 2.利用html和CSS进行修饰和样式化 学习成果要求： 1.利用css进行页面布局和排版 2. 项目总结全面 评价标准： 1．能够利用HTML5+CSS3语言编写页面 2．合理安排页面 3．能够运行并测试自己编写的页面 8
教学组织： 本项目共22学时。项目操作、设置过程由学生自主完成，教师指导。可以随时完成，随时验收。验收过程中进行学生自我评价，在进行教师评价。评价中，教师和学生本人都要针对学生的操作和设置过程提出改进意见。项目总结利用课余时间完成。 课程名称 适用班级 任务编号 学习内容： 1.学习Javascript数据类型用 2.学习Javascript变量和常量的声明和使用 3.学习Javascript运算符和表达式 4.学习Javascript程序逻辑 5学习JavaScript对象 6.利用html5+CSS3+JavaScript完成用户注册信息验证 7.明确项目任务内容 8.设计页面布局结构，利用html5+CSS3+JavaScript编写完成指定页面 能力目标： 1.能够根据任务要求正确编写完成业务逻辑的代码 2.能够熟练使用JavaScript完成各种互交效果及用户行为控制。 专业知识： 1. JavaScript的语法基础 2. JavaScript的事件处理 学习环境： 1．理论和实践教学场地：教室 2．使用设备： 硬件：Pentium3以上的计算机。 软件：VS code、atom、Dreamweaver等其中任一款 专业工作方法： 1. 进行项目分析并制定计划 2. 利用html5+CSS3+JavaScript完成用户注册信息验证 学习成果要求： 1. 完成用户注册信息验证页面 2. 项目总结全面 评价标准： 1．能够完成Javascript代码的编写 2．能够利用Javascript事件机制、对象完成业务逻辑 3 前端设计与开发 --班级编号-- 任务总学时 20 课程编号 任务名称 理论学时 0 #N/A 学期学时 用户注册验证（JavaScript） 一体化学时 20 9
教学组织： 本项目共20学时。项目操作、设置过程由学生自主完成，教师指导。可以随时完成，随时验收。验收过程中进行学生自我评价，在进行教师评价。评价中，教师和学生本人都要针对学生的操作和设置过程提出改进意见。项目总结利用课余时间完成。 课程名称 适用班级 任务编号 学习内容： 1. 根据项目任务书，实现页面结构和布局 2. 根据项目任务书，实现业务逻辑 能力目标： 1.能够进行项目分析 2. 能够运用jQuery进行用户注册验证换 专业知识： 1. jQuery的基本语法 2. jQuery的常用操作 学习环境： 1．理论和实践教学场地：教室 2．使用设备： 硬件：Pentium3以上的计算机。 软件：VS code、atom、Dreamweaver等其中任一款 专业工作方法： 1.利用CSS进行页面布局和排版 2.利用jQuery基本操作实现注册页面的验证 学习成果要求： 1. 完成用户注册页面的验证 2. 项目总结全面 评价标准： 1．掌握jQuery的基本语法 2．利用jQuery实现业务逻辑 前端设计与开发 --班级编号-- 4 任务总学时 10 课程编号 任务名称 理论学时 #N/A 学期学时 用户注册验证（jQuery） 0 一体化学时 10 教学组织： 本项目共6学时。项目操作、设置过程由学生自主完成，教师指导。可以随时完成，随时验收。验收过程中进行学生自我评价，在进行教师评价。评价中，教师和学生本人都要针对学生的操作和设置过程提出改进意见。项目总结利用课余时间完成。 10
课程名称 适用班级 任务编号 学习内容： 5 前端设计与开发 --班级编号-- 任务总学时 4 课程编号 任务名称 理论学时 #N/A 学期学时 综合页面 0 一体化学时 4 1.读懂并理解项目任务书 2.制定进度计划 3.利用HTML+CSS+JavaScript+框架技术实现页面结构、样式和布局 4.利用JavaScript+框架技术实现业务逻辑 能力目标： 1.能够进行项目分析 2.能够利用HTML5+CSS3+JavaScript+框架实现页面布局和页面交互功能 专业知识： 1. HTML标记语言 2 .CSS页面布局及格式化 3. JavaScript+jQuery的网页交互功能 学习环境： 1．理论和实践教学场地：教室 2．使用设备： 硬件：Pentium3以上的计算机。 软件：VS code、atom、Dreamweaver等其中任一款 专业工作方法： 1.利用CSS进行页面布局和排版 2.利用html和CSS进行修饰和样式化 、利用Javascript、jQuery实现交互 学习成果要求： 1. HTML5+CSS3+JavaScript+框架技术布局后的页面 2. 项目总结全面 评价标准： 1．能够了解常用框架 2．能够利用HTML5 + CSS3 + JavaScript + 框架技术实现页面布局和业务逻辑 教学组织： 本项目共4学时。项目操作、设置过程由学生自主完成，教师指导。可以随时完成，随时验收。验收过程中进行学生自我评价，在进行教师评价。评价中，教师和学生本人都要针对学生的操作和设置过程提出改进意见。项目总结利用课余时间完成。
11
