1
2
3
4
5
6
7
8
  • 表单
9
  • CSS组件
10
  • JavaScript插件
11
  • 第三方扩展
12
  • 综合案例

第1课时 课程介绍

发布时间:2020-03-14 18:24   发布人:朱丽文   浏览次数:431

一、课程概述

(一)课程定位

本课程是软件技术专业的专业基础课程,是培养学生使用Web前端框架Bootstrap进行页面设计能力的支撑课程。

通过本课程的学习,使学生逐步建立和掌握Web客户端静态页面设计的思想方法,具有分析问题和解决问题的能力,能够使用Bootstrap框架结合HTML、CSS和Javascript编写Web客户端静态页面,具备解决实际问题,吃苦耐劳、团结协作的良好品质,并为Web开发后续课程打下基础。

(二)先修后续课程

本课程的前导课程网页设计与制作》,后续课程WEB应用程序开发》。

.课程设计思路

课程开发本着以专业能力培养为主线、兼顾社会能力、方法能力培养的设计理念,着重发展学生的实践技能。整个课程教学设计紧紧围绕高技能人才培养的目标展开教学,选取典型工作任务作为学习载体,以任务的开发过程为主线,将知识的讲解贯穿于任务的开发过程中,随着任务的进展来推动知识的扩展。根据开发过程中需要的知识与技能规划教学进度,组织课堂教学,确定学生实训任务。在循序渐进完成任务开发的同时实现教学目标,做到学习与工作的深度融合。

“项目导向、任务驱动”的教学模式为主,通过引入实用的任务,以任务的开发过程为主线,贯穿于每个知识点的讲解,随着任务的不断拓展来推动整个课程的进展。对于每个知识点的讲解采用以实际工作中软件开发的过程和步骤为出发点,采用“五步”教学法 ,整个教学过程分为任务描述、计划、实施、检测、评价五大步骤,分别对应软件开发的需求分析、设计、编码、测试、验收五个工作环节。使得学生在学习的过程中自然而然的了解程序开发的步骤和流程,为将来参加实际工作进行项目开发打下良好的基础。同时通过采用“教”、“学”、“做”三位一体法教学法,教师边示范、边讲解、边提问,学生边做、边学、边思考,从而实现在做中教,在做中学,提高学生的实践能力和专业水平。

三、课程目标

课程工作任务目标:通过本课程的学习,使学生逐步建立和掌握Web客户端静态页面设计的思想方法,具有分析问题和解决问题的能力,能够使用Bootstrap框架结合HTML、CSS和Javascript编写Web客户端静态页面,具备解决实际问题,吃苦耐劳、团结协作的良好品质。

能力目标:能独立进行资料收集与整理、具备用户需求的理解能力;.能根据项目需求,具备项目页面的设计与实现能力;能独立实现页面美化与布局;具有综合应用HTML语言、CSS样式、JavaScript脚本、Bootstrap进行页面的设计、编码、调试、维护能力。

素质目标:养成善于思考、深入研究的良好自主学习的习惯;通过项目与案例教学,培养学习者的分析问题、解决问题的能力;具有吃苦耐劳、团队协作精神,沟通交流和书面表达能力;通过课外拓展训练,培养学习者的创新意识;具有爱岗敬业、遵守职业道德规范、诚实、守信的高尚品质。

四、课程内容

学习情境规划和学习情境设计

学习情境

情境描述

职业能力(知识、技能、态度)

课时

单元一:Bootstrap入门

搭建Bootstrap开发环境,

使用Bootstrap开发第一个网页

掌握Bootstrap开发环境搭建方法,掌握编写简单的Bootstrap网页的方法;增加学生学习课程的兴趣,端正学习态度。

4

单元二:Bootstrap整体架构

设计简单网页:应用Bootstrap网格系统、CSS组件、Bootstrap辅助类

理解Bootstrap整体架构;掌握Bootstrap网格系统;了解CSS组件架构;了解Bootstrap辅助类;培养学生认真细致工作的习惯。

8

单元三:BootstrapCSS样式

设计个人主页:应用Bootstrap排版样式、表格样式、表单样式、按钮样式、图片和图标样式

掌握Bootstrap排版样式使用;掌握表格样式使用;掌握表单样式使用;掌握按钮样式使用;掌握图片和图标样式使用;培养学生的页面设计能力。

10

单元四:Bootstrap组件

设计带有登录、注册功能的响应式网站主页:应用字体图标、按钮组、下拉菜单、输入控件、导航、导航条、路径导航、分页、标签与徽章、巨幕、缩略图、警告框、进度条、多媒体对象、列表、面板与well 等技术

掌握字体图标使用;掌握按钮组使用;掌握下拉菜单使用;掌握输入控件使用;掌握导航条使用;掌握路径导航使用;掌握分页使用;掌握标签与徽章使用;掌握巨幕使用;掌握缩略图使用;掌握警告框使用;掌握进度条使用;掌握多媒体对象使用;掌握列表使用;掌握面板与well使用;培养学生的网站设计能力,对页面进行美化与布局。

32

单元五:Javascript插件

设计网站页面效果:应用模态框、下拉菜单、滚动监听、标签页、提示、弹出框

掌握模态框使用;掌握下拉菜单使用;掌握滚动监听使用;掌握标签页使用;掌握提示使用;掌握弹出框使用;提高学生的分析处理问题的能力。

18

 

五、课程实施

(一)教学设计

理实一体、任务驱动”的教学模式。课程教学全部在网络机房进行,“教、学、做”完全融合。

   每个情境中,首先由教师承前启后,提出相应的任务;然后带领学生就任务要点、完成任务所需要掌握的知识和技能一一进行分析,明确完成任务的思路;在任务实施过程中,教师做相应的示范,学生边学边做,完成任务。教师通过巡回指导,了解学生学习情况和任务完成进度和质量,帮助学生解决问题,也鼓励学生之间相互协作;完成任务后,教师对完成任务情况进行评价和总结。

(二)实施方法

根据软件技术专业课程的特点和高职学生的特点,对于实践课程,可采用具有专业特色的教学模式PTLF。即项目导向(Project-oriented),任务驱动(Task-driven),层层递进(Layers of progressive),四真环境(Four kinds of simulation environment)。

①课程的完备性:通过项目贯穿和任务分解,学生了解到软件开发的真实过程,实践了软件开发各个阶段软件产品的建模及项目文档的编写,获得了完成某类项目的系统知识。

②任务的导向性:每一阶段都有明确的目标和产品,各项任务逐层递进,引导学生一步一步完成整个项目。

③教学情景的完整性:每个教学情景都是一个完整过程,从信息的收集、整理、分析、建模、到软件文档书写;设计有明确的输入、加工和输出项。通过学习,学生除了掌握相关技能,还可以领悟到解决问题的一些基本方法和思路。

④技能的适应性:教学情景的设计具有典型性,通过这些教学情景的训练,学生的专业技术能力具有一定的适应性,可以在其它的项目中得以应用。

六、课程考核

课程考核采用课程设计的形式。平时成绩(其中考勤占平时课程成绩10%、实践性环节占本课程的成绩30%)占本课程成绩40%;课程设计成绩占本课程成绩60%。

七、实施条件要求

(一)师资队伍要求

1.具有独立完成中小型商业网站的水平和能力。

2.具备一定的项目设计能力和项目组织经验。

3.具备设计基于行动导向的教学法的设计应用能力。

4.能采用先进的教学方法,具有比较强的驾驭课堂的能力。

5.具有良好的职业道德和责任心。

(二)教学场所要求

校内实训基地条件,课程要求有专业的实训室,所有实训室设备按企业实际运行拓扑结构组建,设置数据服务器。主要配套的教学仪器设备与媒体要求如下:

1、硬件要求:

为保证学生顺利实施与完成项目任务,本课程必须在实践理论一体化教室或专用实训室完成教学过程。

2、软件要求

操作系统:Windows XP及后续版本

开发工具:IIS 6及后续版本、IE 10以上版本、Chrome浏览器、HBuilder最新版本。

八、课程资源

(一)推荐教材:

1.《Bootstrap基础教程》,人民邮电出版社,赵丙秀、张松慧主编

2.《Bootstrap实战》,机械工业出版社,成林主编

3.《深入理解Bootstrap,机械工业出版社,徐涛主编

(二)参考教材

1.《HTML CSS网页设计指南》,清华大学出版社,赵辉主编

2.《CSS3实战》,机械工业出版社,成林编著

九、课程制定依据

本课程在岗位群中的岗位定位——网站建设岗位群,从专业培养计划来看,网站建设是计算机网络技术专业的人才培养方向之一,人才培养目标定位于分析用户需求,设计与制作网页。网页设计与制作是学生从事IT职业的基本技能之一,随着信息技术的发展和人们艺术欣赏水平的提高,对网页设计与制作的要求也越来越高,目前已逐渐发展成为一个融合计算机技术与平面动画艺术的复合型职业本课程参照《网页设计制作员职业标准》,结合《网页设计与制作》课程相关的职业岗位对知识的要求制定

十、其他

授课教师可根据学生的特点、学期教学周数等实际情况对教学内容、教学课时做适当的调整、增减。