《响应式网页开发实战》课程标准.docx

《《响应式网页开发实战》课程标准.docx》由会员分享，可在线阅读，更多相关《《响应式网页开发实战》课程标准.docx（7页珍藏版）》请在第一文库网上搜索。

1、响应式网页开发实战课程标准课程代码:建议课时数：80学分：5适用专业：软件技术专业先导课程：网页设计基础html+css+div、javascript、框架技术后续课程：综合实训开课单位：计算机系一、前言（一）课程的性质响应式网页开发实战是软件技术专业的一门重要的专业技术课程。课程主要任务是通过理论教学与实践教学环节，使学生在掌握HTML5、jQuery Mobile、Bootstrap的基础上，能够掌握前台动态网页的设计与制作，掌握前台动态脚本语言的编写方法，并能够通过该语言设计与制作出富有创意的动态网页。本课程既有较强的理论性,又有较强的实践性。通过本课程的学习，使学生了解和掌握Web前端

2、开发的基本原理和方法，并具有设计和开发Web应用的基本能力。课程类型为：（理论+实践）课（B类）（-）设计思路课程设计理念是以职业需求分析为起点，以工作任务为驱动，以动态网页制作流程来设计教学程序，精心筛选典型任务组织教学。在课程内容的选取上，紧密围绕完成工作任务所需的知识与技能，充分考虑高职院校学生的认知规律，突出教学内容的实用性、趣味性。在课程内容的进程安排上，以动态网页制作与设计的基本流程来设计，按照HTML5 jQuery Mobile Bootstrap框架三大基本环节组织教学内容。在课程教学实施上，将在日常生活中常见的网页动态效果设计为项目案例，在课堂教学中注重教学情景的创设，通过

3、案例来引导来组织教学活动，使教学要求贴近动态网页设计的工作实际，体现高等职业教育的特征，突出教学过程的目的性。该门课程的总学时为80课时，其中理论26课时，讨论和练习18学时，实训36课时。二、课程目标通过本课程教学，要求学生掌握HTML5基本语法、jQue二Mobile使用、Bootstrap框架的使用等知识。并通过所学知识，具备相应操作能力，即具有设计和开发Web应用的基本能力。(-)知识目标1 .掌握HTML5新页面元素和属性。2 .掌握HTML5离线存储。3 .掌握HTML5地理定位。4 .掌握 jQuery Mobile 布局。5 .掌握 jQuery Mobile 样式。6 .掌握

4、jQuery Mob i 1 e部件及事件。7 .掌握Bootstrap布局8 .掌握Bootstrap样式9 .掌握Bootstrap组件(-)技能目标1 .能够熟练地使用TML5 jQuery MobileBootstrap设计和制作动态网页。2,能够掌握网站建设的总体设计思想、步骤与方法。3 .能够应用所学的相关知识开发各种形式的网站。4 .能够独立开发web应用，具有一定的职业岗位竞争能力。三、教学设计序号工作任务知识点训练或工作项目教学重点教学情境与教学设计1HTML5新页面元素和属性让学生了解HTML5新页面元素和属性的基本语法。1.设计一个html页面，实现显示“我的第一个jQu

5、ery页面”的效果。(1) HTML5新页面(2) TML5新属性1 .任务描述2 .任务展示与实现(1)利用编辑工具编写html代码并验证其效果(2)学生动手操作3 .教师讲解本任务涉及的知识点4 .任务小结2JHTML5离线存储(1)学会分析情况使川本地存储(2) 了解实现离线存储的方式(3)掌握 Web Storage 提供的存储和获取数据的方法(4)掌握 localStorage 与sessionStorage 的区别任务一：使用WebStorage制作通讯录任务二：使用IndexedDB制作网址收藏夹1 . Web Storage 提供的存储和获取数据的方法2 .创建并连接Index

6、edDB数据库的方法。新增、获取、修改和删除数据的方法1 .任务描述2 .任务展示与实现(1)按照任务要求完成页面设计(2)学生动手操作3 .教师讲解本任务涉及的知识点3HTML5地理定位(1)理解位置信息数据的来源方式。(2)理解 GeolocationAPE(3)掌握使用getCurrentPosition 获取当前位置的方法。(4)掌握_getCurrentPosition 的三个参数。掌握百度地图JavaScript API(6)掌握调用百度地图的方法。任务一：Geolocation 获取用户当前位置任务一：调用百度地图显示用户位置.(1)获取当前位置的方法(2)getCurrentP

7、osition的三个参数1 .任务描述2 .任务展示与实现(1)使用 Geolocation API 获取浏览器用户的当前地理位置信息(2)学生动手操作3 .教师讲解本任务涉及的知识点4 .任务小结4JQueryMobi1。布局(1) 深入掌握Query Mobile库的引用方法(2) 理解 jQueryMobile页面的基本架构女多容器jQuery Mobile页面的结构(3) 掌握 jQueryMobile页面标题、内存、尾部的基本设置方去(4) 掌握各种Query Mobile页面的链妾方法(5) 掌握 jQueryvkbile页面中可折叠区夬的创建和使川方法任务一：制作介绍jQuery

8、 Mobiler 的网页任务二：制作简易个人网页1 .掌握掌握jQueryMobile页面标题、为容、尾部的基本殳置方法2 .掌握各种jQueryMobile页面的链接方法1 .任务描述2 .任务展示与实现(1)按照任务要求完成页面设计(2)学生动手操作3 .教师讲解本任务涉及的知识点4 .任务小结5jQueryMobile样式(1) 掌握 jQueryMobile页面中网格样式的设置(2) 熟悉 jQueryMobile页面中按钮的添加、位置设定(3) 掌握 jQueryMobile页面中设置内联按钮及分组按钮的方法任务一：制作图片浏览网页任务二：制作音乐点评网页1 .jQuery Mobi

9、le页面中网格样式、内联按钮及分组按钮及主题样式的设置2 . JQuery Mobile中的各种表单元素和列表组件的设置和使用方法1 .任务描述2 .任务展示与实现(1)按照任务要求完成页面设计(2)学生动手操作3 .教师讲解本任务涉及的知识点4 .任务小结6jQueryMobile部件及事件(1) 熟悉 jQueryMobile页面中工具栏的殳置方法(2) 掌握 jQuery任务一：制作购物网首页任务一：制作电影海报画廊网页1 .掌握 jQueryMobile页面中定义面板的方法2 .掌握 jQuery1 .任务描述2 .任务展示与实现(1)按照任务要求完成页面设计Mobile页面中定义面板

10、向方法(3) 熟悉面板显示方式的设置(4) 掌握 jQuery4obile页面中虚义弹窗付方法(5) 掌握弹窗过渡改果和关闭按钮的设置熟悉 jQuery Mobile 页面中页面的翻转事件和触摸事件Mobile页面中定义弹窗的方法3 .掌握弹窗过渡效果和关闭按钮的设置4 .熟悉 jQueryMobile页面中页面的翻转事件和触摸事件(2)学生动手操作3 .教师讲解本任务涉及的知识点4 .任务小结7Bootstrap布局(1)理解默认的网格布局的结构(2)掌握Bootstrap布局容器的使用方法(3)掌握Bootstrap响应式布局设计页面的方法(4)掌握Bootstrap通过栅格系统进行网页布

11、局任务一：响应式web页面任务二：制作旅游介绍的网页1. Bootstrap 响应式布局设计页面的方法2. Bootstrap 通过栅格系统进行网页布局1 .任务描述2 .任务展示与实现(1)按照任务要求完成页面设计(2)学生动手操作3 .教师讲解本任务涉及的知识点4 .任务小结8Bootstrap样式掌握Bootstrap框架的通用样式(2)掌握Bootstrap框架中文本排版设置方法(3)掌握Bootstrap框架的表格的使用方法(4)掌握Bootstr叩框架中JavaScript插件标签页的创建和使用方法任务一：制作天气预报的网页任务二：制作机票预订网页1 .Bootstrap 框架的表

12、格的使用方法2 .JavaScript 插件标签页的创建和使用方法1 .任务描述2 .任务展示与实现(1)按照任务要求完成页面设计(2)学生动手操作3 .教师讲解本任务涉及的知识点4 .任务小结9Bootstrap组件(1)掌握 Glyphicons 字体图标使用方法掌握下拉菜单的结构和使用方法掌握下拉按钮组和按钮工具条的结构和使用方法(4)掌握输入框组使用方法任务一：会员注册页面任务二：制作品牌服装的网页1 .掌握 Glyphicons字体图标使用方法2 .掌握下拉菜单的结构和使用方法3 ,掌握下拉按钮组和按钮工具条的结构和使用方法4 .掌握输入框组使用方法1 .任务描述2 .任务展示与实现

13、(1)按照任务要求完成页面设计(2)学生动手操作3 .教师讲解本任务涉及的知识点4 .任务小结(-)教材选用与编写(1)在教材内容选取上，应凸显实践性、应用性和层次性的特征，强调与岗位业务相吻合，并易学、易懂、易接受。同时又要有前瞻性，应将本专业领域的发展趋势以及操作中的新知识、新观念、新技术和新方法及时地纳入其中。该课程由于涉及的信息技术领域较多，任课教师在该课程上的教学内容体系不尽相同，导致了教材之间内容差异较大。按照本课程标准，选用或编写的教材应当围绕以动态网页制作与设计的基本流程来设计，按照HTML5、jQuery Mobile、Bootstrap框架等几大模块展开，教材内容要注重基础、循序渐进，包含前端开发的系统知识体系。在本课程的多个教学模块中，jQue二Mobile的核心语法基础、Bootstrap框架的使用是本课程的特色及核心内容，教材编写应当较为详细。（2）在教材内容组织上，本课程教材的编写应打破传统的学科型内容体系，构建以岗位职业能力以及职业标准为依据的课程内容体系，以本课程标准为依据进行编写。（3）教材应注重教学内容的情景创设和案例链接，加强教学内容与专业培养目标的联系性，挖掘学生既有知识与讲解内容的关联性，激发学生的学习热情和积极性。（4）教材编写应注重可操作性和拓展性。除知识讲解外，教材应当配有可供学生练习的要素：例如课后习题、课堂小实验