HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)授课计划

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