镇江高等职业技术学校

1、镇江高等职业技术学校江苏联合职业技术学院镇江分院Web前端开发中级课程标准课程代码： 建议课时数： 160 学分：10适用专业：软件技术先修课程：高级语言程序设计、网页制作、Web前端开发初级后续课程：.NET移动程序设计制 定 人：查晓颖一、前言1.课程的性质该课程是江苏省五年制高职软件技术专业的一门专业方向课课程，是软件技术专业的一门职业技能性课程，具有重要的地位。随着移动互联网技术的高速发展，网站在静态页面的基础上添加了各类桌面软件，网页不再只是承载单一的文字和图片，而是被要求具备炫酷的页面交互、跨终端的适配兼容功能，使用富媒体让网页的内容更加生动，从而让用户有更好的使用体验，这些都基于

2、前端技术来实现。本课程是以实现软件技术专业学生的就业岗位群能力为目标，通过Web前后端数据交互技术、响应式开发技术的学习，使学生具备网站响应式开发能力、数据交互能力。本课程在高级语言程序设计、网页制作、Web前端开发初级等课程之后开设，后续课程为.NET移动程序设计等。2.设计思路围绕互联网+、新兴技术行业带来的Web前端开发、移动端开发技术技能人才需求，以企业用人为导向，以岗位技术和综合素质为核心，培养具有良好职业道德的人文素养，掌握Web前后端数据交互、响应式开发等知识，具备动态网页设计、开发、调试、维护等能力。课程内容突出对学生职业能力的训练，理论知识的选取紧紧围绕工作任务完成的需要来进

3、行，同时又充分考虑了高等职业教育对理论知识学习的需要，并融合了相关职业资格证书对知识、技能和态度的要求。项目设计以网站建设过程为线索来进行。教学过程中，以项目为主线，通过问题、项目导入（实践）学生思考、分析、回答、教师评议、总结（理论）扩展应用（实践）的方式进行，使授课内容与工作实际紧密结合。教学效果评价采取过程评价与结果评价相结合的方式，通过理论与实践相结合，重点评价学生的职业能力。建议开设160课时，理论课时为80，实训课时为80，理论与实践并行。二、课程目标根据本专业的培养目标和人才规格，按照知识、能力、素质三个维度的分析方法，概括出本课程的目标。1.知识目标：（1）理解响应式及响应式的

4、原理；（2）掌握Bootstrap的栅格系统；（3）掌握Bootstrap布局、组件、基本样式、插件的使用方法；（4）掌握基本的API设计方法；（5）掌握Ajax技术，实现异步刷新，异步获取数据的使用方法；（6）掌握Laravel框架构建动态网站的使用方法；（7）熟悉网站管理的相关知识；（8）掌握运用CMS系统进行网站建设的相关知识和技能。2.能力目标：（1）能使用Bootstrap栅格系统、基本样式、组件、LESS和SASS、插件、Bootstrap定制及优化、Bootstrap内核解码开发响应式页面；（2）能根据HTTP协议方法定义操作；（3）能使用API进行数据筛选、支持大型二进制资源的

5、部分响应与后端进行交互；（4）能熟练使用Ajax中的XML、JSON数据格式与网站后端进行数据交互；（5）能熟练使用Laravel的路由、控制器、Blade模板、前端组件构建动态网站；（6）能独立安装、部署、开发、维护和管理网站。（7）设计过程中充分考虑浏览器兼容等问题，并做适当处理。3.素质目标：（1）培养学生“爱岗、敬业、细致、求精”的职业道德与情感；（2）培养学生良好的动手实践习惯；（3）注重培养学生与社会接轨；（4）培养学生严谨的行事风格；（5）培养学生具有踏实工作作风，良好的观察和思考能力以及团队合作能力。三、课程内容和要求根据专业课程目标和涵盖的工作任务要求，确定课程内容和要求，说

6、明学生应获得的素质、知识与能力。序号学习任务主要内容及要求能力目标参考学时工作任务主要知识点及技能要求1Web前后端数据交互技术模块Web数据交互技术概述Web的概念Web数据交互技术掌握Web数据交互的概念及其主要技术30HTTP概述HTTP简介HTTP的通信过程HTTP状态码汇总掌握HTTP的通信过程掌握HTTP常见状态码的意义AJAX与iframeAJAX异步通信Iframe异步通信应用实例掌握用AJAX和iframe分别实现异步通信页面性能优化技术Cookie的创建、使用和销毁页面性能优化掌握Cookie的创建、使用和销毁Socket通信Socket通信简介使用Socket实现聊天室功

7、能掌握Socket通信机制和通信过程2响应式开发技术模块Bootstrap概述Bootstrap简介Bootstrap的特性Bootstrap的应用浏览Bootstrap的开发工具Bootstrap的安装和配置掌握Bootstrap的下载安装和环境搭建80Bootstrap的基本架构响应式开发技术Bootstrap的栅格布局掌握Bootstrap栅格布局，会利用栅格进行网页的布局Bootstrap的样式Bootstrap的作用媒体对象文本、列表、表格、图片、表单、辅助样式掌握Bootstrap的样式Bootstrap的组件按钮、下拉菜单、按钮组、输入框组、导航、标签、徽章、缩略图、警告框、进度

8、条、算式、字体图标掌握Bootstrap各种组件的使用方法Sass概述Sass的概念Sass的安装Sass的配置Sass的基础语法掌握Sass的安装和配置，学会使用Gulp编译SassBootstrap响应式开发案例Bootstrap项目的搭建页面初始化后台模板布局项目首页用户中心和提醒事项数据查询和数据面板动画效果实现Bootstrap各种前端显示效果3网站项目实战模块CMS开发CMS概述CMS的内容搭建Laravel框架搭建网站开发框架Laravel50CMS基础页面CMS基础页面概述后台登录页后台首页访问权限控制实现后台登录模型管理实战模型管理概述模型创建模型列表模型修改模型删除掌握实现

9、模型创建、模型列表、模型修改和模型删除功能的步骤栏目管理实战栏目管理概述栏目添加栏目列表查看栏目修改栏目删除掌握实现栏目添加、栏目列表查看、栏目修改和栏目删除功能的步骤内容管理实战内容管理概述内容添加内容保存内容呈现内容修改内容删除掌握实现内容添加、内容保存、内容呈现、内容修改和内容删除功能的步骤广告管理实战广告管理概述广告位管理广告内容管理掌握广告位管理与广告内容管理CMS前台页面呈现实战CMS前台页面概述注册服务和门面前台首页和导航文章页面产品页面其他页面掌握CMS前台页面功能实现的步骤数据库备份与恢复实战数据库备份与恢复概述数据库备份数据库恢复掌握CMS后台数据的备份与恢复静态资源管理实

10、战静态资源管理概述静态资源列表展示静态资源上传静态资源删除实现静态资源列表展示、静态资源上传和静态资源删除功能的步骤四、实施建议1.教学建议（1）该课程采用“项目驱动，案例教学，一体化课堂”的教学模式开展教学。整个课程由若干个真实的软件项目驱动，每个教学单元完成项目中典型的工作任务。160个课时内完成教师与学生互动的讲练结合教学过程，完成基于B/S模式的动态网站的开发。（2）课程的理论实践一体化教学全过程全部安排在设施先进的多媒体机房进行，教学中以学生为中心，教师全程负责讲授知识、答疑解惑、指导项目设计，充分调动师生双方的积极性，达成教学目标。（3）在教学过程中，充分运用现代教育技术，多采用电

11、子多媒体课件和其他电子资源进行授课。代替传统的课堂形式的讲解，突破时空限制，帮助学生更好的理解本课程的内容。（4）将实训场所设计成既能满足实践教学要求，又可在现场进行理论教学的布局。在组织教学的过程中，通过导向任务、讲解操作要领、操作示范演练、训练与逐个指导等环节，把培养学生知识与技能单元能力的过程设计为边讲边练的过程，做到理论教学与实践教学一体化，教学内容与实践内容一体化，实训活动与工学结合一体化。（5）在教学过程中，注重建立“知识、能力、素质、创新”的课程教学思想，把握学生的知识背景与接收能力，内容覆盖符合职业层次要求，深度适宜，注意理论知识阐述分析“必须、适度、够用”，实际运用“举一反三

12、”的原则，将知识与技能培养并重。2.教学评价（1）采用阶段评价，目标评价，项目评价，理论与实践一体化评价模式。（2）关注评价的多元性，结合课堂提问、学生作业、自选项目完成情况及考试情况，综合评价学生成绩。（3）应注重学生动手能力和实践中分析问题、解决问题能力的考核，对在学习和应用上有创新的学生应予特别鼓励，全面综合评价学生能力。（4）评价比例：平时表现30%（考勤、作业、学习态度等）+ 阶段考核30%（期中考试、自选项目）+ 期终考核40%（理论考试）。3.教学基本条件工位数硬件基本要求硬件推荐要求软件要求36CPU：i3 4代及以上内存：2G及以上硬盘：512G及以上CPU：i5 3代及以上

13、内存：4G及以上硬盘：1TB及以上Windows 7以上操作系统；DreamWave CS6或以后版本；MySQL数据库平台及开发环境；PHP 7.0以上版本4.教材选用与编写（1）必须依据本课程标准编写教材，教材应充分体现任务引领、实践导向课程的设计思想。（2）教材应通过工作过程、典型案例和项目任务，来阐述Web前端开发的理论及技术运用，在基础知识构建和基本技能培养两方面结合紧密，双重并举。（3）教材应图文并茂，提高学生的学习兴趣，通过课堂演示加深学生对本课程的认识，教材表达必须精炼、准确、科学。（4）教材内容应体现先进性、通用性、实用性，要将本专业新技法、新工艺、新思路及时地纳入教材，使教材更贴近本专业的发展和实际需要。（5）教材中的活动设计的内容要具体，并具有可操作性。（6）推荐教材：Web前端开发中级，工业和信息化部教育与考试中心主编，1+X证书制度试点培训用书