计算机应用技术专业《H5+CSS3》课程标准
- 格式:doc
- 大小:115.50 KB
- 文档页数:11
《HTML5+CSS3+JavaScript》教学大纲一、课程的性质、目的与任务《HTML5+CSS3+JavaScript》是专业中一门综合性很强的基础课程,主要内容包括三个模块,第一部分讲解HTML5中新添加的元素、重要的API 的使用方法和应用技巧。
第二部分讲述CSS3相关内容,包括选择器、盒样式、背景和动画的实现过程和方法。
第三部分介绍JavaScript语言的内容,包括基础语法、函数、重要对象、DOM和事件的应用方式。
笔者针对每个模块重要、实用的部分进行讲解,通过功能描述,实现代码,页面效果,源码分析等形式多方面展示各知识点的特性及功能,并将其与实际应用紧密联系,希望学生能够通过学习进一步深化对知识点的理解;同时,每个章节均提供了丰富的示例代码。
本课程的目的与任务是使学生通过本课程的学习,从HTML5新增元素使用的方法的入手,由浅入深学习页面开发的各种相关知识,学会页面开发的相关关键技术,能够掌握常见的页面内容的研发技能,同时通过实践学习页面开发三种语言的基本功能与应用,以梳理知识脉络和要点的方式,让学生掌握前端页面开发的相关思想。
本课程除要求学生掌握页面开发的基础知识和理论,重点要求学生学会分析问题的思想和方法,为更深入地学习和今后的实践打下良好的基础。
二、教学目标与教学基本要求1. 拥抱HTML5了解构建HTML 5页面的环境搭建步骤,理解并掌握HTML 5页面的基本特征,能够使用样式美化HTML5页面。
2. HTML5中新增交互元素了解HTML 5中新交互元素的使用方法,理解details元素的使用,熟练menu元素的用法。
3. HTML5中的重要元素熟练并掌握文档元素的使用方法,了解脚本和文本层次元素的使用方法,理解元素公共属性的使用方法。
4. HTML5中的表单掌握表单中新增input元素类型的使用,了解表单新元素的使用方法,熟悉表单中新增属性的使用过程。
5. HTML5中的文件掌握选择上传文件的使用方法,了解并理解文件读取与拖放的过程,熟悉文件读取时的错误与异常的处理。
《HTML5+CSS3网站设计基础教程》课程教学大纲(课程英文名称)课程编号:201601210011学分:5学分学时:76学时(其中:讲课学时:47一、课程的性质与目标《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容,通过本课程的学习,学生能够了解网页web发展历史及其未来方向,熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果,学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路课程设计理念:高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展,不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点,以就业为导向,培养学生具备职业岗位所需的职业能力,职业生涯发展所需的能力和终身学习的能力,实现一站式教学理念。
课程设计思路:基于工作过程开发课程内容,以行动为导向进行教学内容设计,以学生为主体,以案例(项目)实训为手段,设计除理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以职业技能培养为目标,以案例(项目)任务实现为载体、理论学习与时间操作相结合”。
开发工具:DreamweaverCS6第一章初识HTML5第二章HTML5页面元素及属性第四章CSS3选择器背景与图片不透明度的设√置设置背景图像平铺√设置背景图像的位置√设置背景图像固定√设置背景图像的大小√设置背景的显示区域√设置背景图像的裁剪区域√设置多重背景图像√背景复合属性√线性渐变√径向渐变√重复渐变√Array第七章表单的应用textarea元素√select元素√datalist元素√keygen元素√output元素√CSS控制表单样式√√第八章多媒体技术?animation-duration属性√animation-timing-function√属性animation-delay属性√animation-iteration-count√属性animation-direction属性√animation属性√第十章实战开发—制作电商网站首页面76学时合计47学时29学时六、考核模式与成绩评定办法本课程为考试课程,期末考试采用百分制的闭卷考试模式。
《后台管理系统开发》课程标准一、课程的性质《后台管理系统开发》课程是计算机应用技术专业的核心课程,其目标是培养学生实施网站开发与设计、网页美工的能力,能够独立开发一个相对完整的网站项目。
本课程的先修课程为《H5+CSS3》、《数据库SQL》、《LAMP高级应用开发》等。
与本学期的《前台应用开发》结合,通过实践学习,开发出一个相对完整的网站。
二、课程设计理念1、该课程是依据“计算机应用技术专业教学标准”中的“网站开发与设计”、“网站编辑”、“网页美工”工作岗位来设置的。
其总体设计思路是,打破以知识传授为主要特征的传统学科课程模式,转变为基于工作过程的教学模式,以完整的网站开发与设计工作任务为对象,组织学生通过完成这些工作任务来学习相关的知识、培养相应的职业能力。
课程内容突出对学生职业能力的训练,相关理论知识均与所要完成的工作任务有密切联系,并充分考虑了高等职业教育对理论知识学习的需要,融合相关职业资格证书对知识、技能和态度的要求。
课程的教学过程要通过校企合作,校内实训基地建设等多种途径,采取工学结合等形式,充分开发学习资源,给学生提供丰富的实践机会。
教学效果评价采取过程评价与结果评价相结合的方式,通过理论与实践相结合,重点评价学生的职业能力。
2、该门课程的总学时为90。
以基于工作过程的课程开发理念为指导,以职业能力培养和职业素养养成为重点,根据技术领域和职业岗位(群)的任职要求,遵循学生认知规律,将本课程的实践任务分解设计成若干实验项目,以网站建设中的具体项目任务为载体,引出相关专业知识,并通过教学模式设计、教学方法设计、教学手段的灵活运用、教学目标的开放性设计、教学考核方法改革等,使学生在实训过程中加深对专业知识、技能的理解和应用,保证学生专业能力、方法能力和社会能力的全面培养。
3、课程开发思路根据高职教育的特点,按照学院“小而精”的办学思路和“校企融合、同兴共赢”的办学模式,积极探索“校企合作、工学结合”的人才培养模式,积极探索以实践能力考核为主的课程评价方法,切实提高学生的职业能力和就业竞争力,具体措施体现在以下几个方面: 基于典型工作过程分析,构建课程体系;●职业能力培养为核心,设计教学内容;●以提高学生职业能力和职业素养为目标,重视实践教学;●融合职业资格标准,推行双证书制;●校企合作,共建新型实践教学基地;●校企合作,形成实践技能课主要由企业兼职教师讲授的机制。
.《H TML5+CSS3 网站设计基础教程?课程授课大纲〔课程英文名称〕课程编号: 202101210011学分:5学分学时: 76 学时〔其中:讲课学时:47 学时上机学时: 26 学时〕先修课程:计算机基础、计算机网络、计算机应用后续课程: UI 设计、JavaScript 网页特效适用专业:信息技术及其计算机相关专业开课部门:计算机系一、课程的性质与目标《HTML5+CSS3 网站设计基础教程?是面向计算机相关专业的一门专业基础课,涉及网页基础、 HTML 标记、 CSS样式、网页布局、变形与动画等内容,经过本课程的学习,学生能够认识网页 web 睁开历史及其未来方向,熟悉网页设计流程、掌握网络中常有的网页布局收效及变形和动画收效,学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路课程设计理念:高职教育的集中实践授课环节需明确必要的理论知识的生化与知识层面的拓展,不能够限制于单纯的技术训练。
单纯的技术训练不是提高升等职业教育的理想课程。
以能力的培养为重点,以就业为导向,培养学生具备职业岗位所需的职业能力,职业生涯发展所需的能力和平生学习的能力,实现一站式授课理念。
课程设计思路:基于工作过程开发课程内容,以行动为导向进行授课内容设计,以学生为主体,以案例〔工程〕实训为手段,设计除理论学习与技术掌握订交融的课程内容系统。
授课整体设计“以职业技术培养为目标,以案例〔工程〕任务实现为载体、理论学习与时间操作相结合〞。
.三、授课条件要求开发工具: Dreamweaver CS6四、课程的主要内容及根本要求第一章初识 HTML5学习单元初识HTML5学时10 学时1.认识 HTML5 睁开历程2.理解 HTML5 阅读器支持情况学习目标3.熟悉 HTML5 根本语法 ,掌握 HTML5 语法新特点。
4.掌握 HTML5 相关标记及属性,能够制作简单的网页页面。
知识点认识掌握重点难点HTML5 睁开历史√HTML5 的优势√HTML5 阅读器支持情况√创立第一个 HTML5 页面√HTML5 文档根本格式√HTML5 语法√HTML 标记√标记的属性√学习内容HTML5 文档头部相关标√记标题和段落标记√文本格式化标记√特别字符标记√常用图像格式√图像标记 <img/>√绝对路径和相对路径√创立超链接√锚点链接√√第二章HTML5 页面元素及属性学习单元HTML5 页面元素及属性学时 6 学时1.掌握结构元素的使用,能够使页面分区更明确。
《HTML5+CSS3网页设计与制作》课程教学大纲(课程英文名称)课程编号:学分:5学分学时:74学时(其中:讲课学时:50学时上机学时:24学时)先修课程:计算机基础、计算机网络、计算机应用后续课程:UI设计、JavaScript网页特效适用专业:信息技术及其计算机相关专业开课部门:计算机系一、课程的性质与目标《HTML5+CSS3网页设计与制作》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标签、CSS样式、网页布局、变形与动画等内容,通过本课程的学习,学生能够了解网页web发展历史及其未来方向,熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果,学会制作各种企业、门户、电商类网站。
该课程属于“1+X证书制度”Web前端的初级课程,通过本课程,能够为学习后面的前端知识夯实基础。
二、课程设计理念与思路课程设计理念:课程的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展,不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点,以就业为导向,培养学生具备职业岗位所需的职业能力,职业生涯发展所需的能力和终身学习的能力,实现一站式教学理念课程设计思路:基于工作过程开发课程内容,以行动为导向进行教学内容设计,以学生为主体,以案例(项目)实训为手段,设计出理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以技能培养为目标,以案例(项目)任务实现为载体、理论学习与实践操作相结合”。
三、教学条件要求开发工具:Dreamweaver CS6或其他代码编辑工具四、课程的主要内容及基本要求第一章HTML5+CSS3网页设计概述学习单元HTML5+CSS3网页设计概述学时2学时学习目标◆了解网页概念和组成。
◆理解HTML、CSS和JavaScript的功能和作用。
◆熟悉Dreamweaver工具的基本操作。
学习内容知识点了解掌握重点难点认识网页√网页名词解释√Web标准√HTML简介√CSS简介√JavaScript简介√网页的展示平台—浏览器√认识Dreamweaver界面√Dreamweaver初始化设置√Dreamweaver基本操作√【阶段案例—创建第一个网页】√第二章初识HTML5学习单元初识HTML5 学时6学时学习目标◆了解HTML和HTML5的基本结构,能够区分两者的结构差异。
课时教学计划教师姓名时数 2日期班级上课地点课程(学习领域)名称《网页设计与制作》/《Web前端》/《HTML5》章节第1章Web前端职业前景与重要理念单元主要教学内容认识网页与网站能力(技能)目标知识目标素质目标教学目标1.认识网页与网站基础2.了解网络设计行业前景与发展方向3、熟悉工作界面对软件有基本认识,对本学期学习内容有初步了解网页设计是一门基础软件应用、艺术欣赏的课程。
学好本门课程需要学生有综合能力。
能力训练任务教材“课堂动手实践”教学重点教学难点1.网站建设的基本流程。
2.“结构与表现相分离”的重要思想。
教学方法、手段多媒体教学教学组织形式讲解、示范、边讲边练作业备注第1章Web前端职业前景与重要理念1.1 了解Web前端工程师1.1.1 HTML5前端开发的前景与必要认知1.1.2 认识网页的构成元素1.1.3 了解专业术语1.2 重要理念——表现和结构相分离1.2.1 体验“表现和结构相分离”1.2.2 认识Web标准1.3 Web前端开发基本流程1.3.1 开发流程1.3.2 常用开发软件介绍1.4 使用记事本创建HTML5页面1.5 课堂动手实践课时教学计划教师姓名时数 4日期班级上课地点课程(学习领域)名称《网页设计与制作》/《Web前端》/《HTML5》章节第2章HTML5 页面的构建与简单控制单元主要教学内容文档结构、列表、表格、多媒体、新增结构元素能力(技能)目标知识目标素质目标教学目标能够使用记事本完成简单的页面效果。
掌握HTML和XHTML的基本概念、掌握HTML的语法、各种标签含义培养学生对网页、网站概念的认识,培养学生的相互沟通能力和团队协作精神。
能力训练任务教材“课堂动手实践”教学重点教学难点1. HTML 5的文档结构和编写规范。
2.认知HTML 5主体结构类元素的含义。
教学方法、手段多媒体教学教学组织形式讲解、示范、边讲边练作业备注第2章HTML 5页面的构建与简单控制2.1 Dreamweaver的工作环境概述2.1.1 界面介绍2.1.2 常用工具栏和面板2.2 创建和管理站点2.2.1 创建站点2.2.2 “文件”面板的使用方法2.2.3 管理站点2.3 HTML5入门2.3.1 使用Dreamweaver构建“H5标准页面”2.3.2 DOCTYPE文档类型与基本结构元素2.3.3 HTML5常见元素2.3.4 HTML5新增结构元素2.4 课堂动手实践课时教学计划教师姓名时数 6日期班级上课地点课程(学习领域)名称《网页设计与制作》/《Web前端》/《HTML5》章节第3章CSS3基础入门单元主要教学内容站点、DIV元素、CSS入门、选择器能力(技能)目标知识目标素质目标教学目标能够Dreamweaver和CSS制作简单页面。
《网页设计(HTML5+CSS3)》核心课程标准本课程是软件技术专业的核心课程,也是后续JavaScript程序设计与jQuery框架的基础课程,在Web前端开发中占有重要地位。
通过本课程的课堂教学和实践教学,使学生能够掌握网页设计的两大基础,HTML和CSS,具备常见门户网站、电商网站的设计与制作能力,培养学生科学的思维方法,灵活运用知识的能力和自主学习的能力,为后续网站开发课程的学习、网页制作员工作的胜任打下坚实的基础。
二、课程设计理念本课程强调对学生职业素养和Web前端编程能力的培养,按照理实一体、课内外互补、课堂教学与培优工程相结合的课程设计指导思想,以任务或项目为载体组织教学内容,采取讲练结合、微课教学、视频辅导、单元测试、赛练融合等多种教学形式和手段,突出学生的主体地位,在校内实训室完成所有教学环节,实现“教、学、做”的有机融合;通过班级讲授、团队学习、个体辅导、展示交流、技能大赛等手段,实现从模仿到应用到创新的高职学生递进式培养。
三、课程目标(一)总体目标本课程涉及网页基础、HTML5标记、CSS3样式、网页布局等内容。
通过本课程的学习,学生能够了解HTML5基本标签和CSS3常用样式,熟悉网页设计流程,掌握常见的网页布局效果,掌握一定的Web前端开发知识,学会制作各种企业、门户、电商类网站。
同时通过教学过程中的实际开发过程的规范要求强化学生的职业道德意识和职业素质养成意识,为学生后续课程学习夯实基础。
(二)具体目标1.能力目标了解Web前端程序员等相关职业岗位的工作职责;具有一定的网页设计与制作能力;具备良好的编程习惯和准确的语言表达能力;具有一定的科学思维方式和分析判断解决问题的能力;具有社会适应能力、沟通能力与自我学习能力;具有良好的职业道德与敬业精神,具有团队合作意识。
2.知识目标认识网页和网站,了解相关概念;熟悉ViSU阿StUdioCode和HbUilder的使用;熟练掌握HTML5基本标签;掌握常用H5表单控件并能熟练运用;理解CSS3样式规则及选择器,能合理使用CSS美化页面;理解CSS盒子模型、浮动和定位布局,并能应用到网页设计中;掌握HTML和CSS多媒体应用;掌握CSS3的变形、动画和转换;能达到“1+X”Web前端开发初级标准。
≪HTM15+CSS3Web前端开发技术》课程教学大纲学分:4学分学时:学时64(其中:理论学时32实践学时:32)先修课程:图形图像处理、程序设计基础、Intemet应用基础后续课程:Web前端技术(JaVaSCriPt)适用专业:计算机类相关专业开课部门:计算机系一、课程的性质与目标《HTM15+CSS3Web前端开发技术》是面向计算机相关专业的一门专业核心课,该课程的内容适应Web前端开发工作岗位群的实际要求。
课程融入“1+X”Web前端开发技术技能等级证书的相关内容,对接互联网+大学生创新创业大赛,秉承“以赛促赛,赛证融合、以岗促赛,岗证融合、以创促课,专创融合”的思想,整合专业教育教学资源和内容,构建基于专业知识的模块化课程内容。
通过本课程的学习,学生可以掌握网页设计领域核心知识和技能,了解静态网页工作原理、静态网页设计、静态网站构建和发布等内容。
本课程是一门基于真实项目的课程,具有较强的职业性、实践性和技术性,学生在学习过程中既可以掌握与行业发展紧密结合的实用技能与知识,在操作实践中提升实战能力,同时又培养学生创新创造、团队协作、与人沟通的职业素质及岗位适应能力,对学生职业能力培养和职业素质养成起到支撑和促进作用,为职业能力的培养打下坚实的基础。
二、教学条件要求操作系统:Windows7开发工具:Hbui1derX三、课程的主要内容及基本要求学习单元一学习单元二学习单元三学习单元四学习单元五学习单元六学习单元七学习单元八学习单元九学习单元十学习单元十一学习单元十二四、学时分配五、教学效果评价及方式本课程为考试课程,根据课程特点采用多阶段、节点化、多方式的评价方式。
构建了素质、知识和能力考核相结合,过程性考核和终结性考核相结合,理论考核和实践考核相结合,校内评价和校外评价相结合的四个结合;知识、能力、素质、思政的四个维度、教师、学生、工程师的三个主体,课前、课中、课后的三个阶段的考评体系。
《HTML5+CSS3网页设计基础教程》课程标准第一部分、课程定位一、课程性质本课程是计算机应用专业一门专业必修课程二、课程性质与目标《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容。
通过本课程的学习,学生能够了解网页web发展历史及其未来方向,熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果,学会制作各种企业、门户、电商类网站。
三、前导、后续课程(1)前导课程计算机应用基础(2)后续课程JavaScript编程、Vue.js、微信小程序开发第二部分、课程设计一、基本理念高职教育的集中实践教学环节需明确必要的理论知识的深化与知识层面的拓展,不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点,以就业为导向,培养学生具备职业岗位所需的职业能力,职业生涯发展所需的能力和终身学习的能力,实现一站式教学理念。
二、课程设计思路(1)以职业岗位和后续课程需求确定课程目标首先组建专业必修课、专业教师、企业专家三方人员组成的课程开发团队,进行课程服务专业的人才培养目标分析,确定计算机应用专业的岗位面向;进而确定本课程所织成的具体核心课程有哪些?同时结合行业对岗位任职的具体标准,确定课程的具体目标。
(2)依据职业标准,通过对所服务的后续课程和必修课程本身分析,以专业基础课与学习领域课程聚合点构建教学内容通过对职业标准进行剖析和本门课程所服务的后续课程本身进行分析,得出后续专业课程负载点与专业基础课程支撑点存在聚合,将这些聚合点作为教学内容选择、实训任务确定的依据。
(3)根据教学内容需求和学生学情的分析设计教学方法和手段根据教学内容需求,以及根据学生形象思维强、逻辑思维相对弱的现状,设计案例教学法、引导文教法等,应用项目应用设计等教学手段服务抽象的理论教学。
(4)以优质的教学资源和优秀的教学团队,为课程实施和后续课程服务提供保障。
XXX职业技术学院202X级《WEB开发基础》课程标准课程代码XXXXXX课程性质专业平台课课程学分4总学时64适用专业软件技术专业制(修)订日期202X-X-XX执笔审核一、课程定位本课程是软件技术专业群的平台课,是培养学生B/S架构项目开发的基础必修课程。
本课程主要培养学生的网站设计和开发能力,通过“教、学、做”一体化教学,使学生能熟练掌握PC端网页、WebApp自适应网站、响应式网站的开发规范和制作技巧,培养学生的创新能力、审美能力、自学能力、沟通能力、解决问题能力、自我管理能力、团队协作能力,为后续课程及其他程序设计课程的学习和应用打下基础。
先修课程:《计算机应用基础》《程序设计基础》。
后续课程:《Java Web应用开发》《Vue前端应用开发》《微信平台应用开发》等。
二、课程目标(-)总体目标通过本课程的学习,学生能了解WWW、HTTP、HTML5、CSS3的定义、概念和作用;了解服务器、客户端、浏览器的概念和作用,熟悉web项目规划和需求分析的基本方法,具备web网页设计、制作及站点管理的基本知识和基本技能,学生能够独立制作中小型的网站。
熟练掌握HTML5语言中的各种文本格式、字符格式、段落设置、列表、标记的使用方法;熟练CSS3样式表制作方法和技巧;熟悉PC端网站、WebApp自适应网站、响应式网站的排版技巧,根据前端设计师的任职要求,参照计算机程序员职业标准和网站开发和网页制作的职业资格标准,改革课程体系和教学内容。
课程内容突出职业能力培养,体现基于职业岗位分析和能力为导向的课程设计理念,以真实工作任务或社会产品为载体组织教学内容,在真实工作情境中采用新的教学方法和手段进行实施。
(二)具体目标课程教学目标具体体现为专业知识、专业技能和专业素质三方面的目标。
(1)专业知识目标①掌握HTML5与CSS3基础知识及最新技术。
②熟悉企业网站制作具体流程。
③掌握不同类型静态网站的开发技巧。
《H5网页设计》课程标准一、课程定位《HTML5开发及商务网站建设》是大数据技术与应用专业的专业学习领域课。
该课程实现Web程序开发知识、方法及工具,着重介绍在Web开发过程用到的HTML5基础知识,用于美化Web页面的样式表知识。
是一门用途广泛、前景良好的计算机行业课程,是适应计算机大数据技术与应用专业课程的需要。
该课程的学习可为后续《PHP动态网站设计》等课程奠定一定的职业能力基础。
二、课程目标通过《HTML5开发及商务网站建设》课程的学习,使学生具备Web应用开发的基本知识,为学习和掌握专业知识和职业技能打下基础。
1.知识目标(1)理解网站的基本概念和HTML5网页编程语言基础;(2)掌握搭建开发环境、网站的搭建(3)掌握HTML5中文字和段落的设置和常用标签;(4)掌握列表标签的使用;(5)掌握超级链接标签的使用;(6)掌握表格标签的设计和使用;(7)掌握框架页面布局;(8)掌握表单的设计;(9)掌握网页中多媒体的应用;(10)掌握层叠样式表CSS3的基本知识;(11)掌握一到多款网页设计软件的运用。
2.能力目标(1)能运用HTML5标签设计网页;(2)能使用CSS3设计网页;(3)会网页设计工具设计网页。
3.素质目标(1)具有自我学习的能力;(2)具备规范化、标准化的代码编写习惯,一定速度的代码编写能力;(3)养成忠于职守、认真负责、精益求精的敬业精神;(4)具备良好的沟通能力;(5)具备良好的团队合作精神以及自我展示能力。
三、课程设计1、设计思想(1)教学内容框架课程按照以能力为本位,紧密围绕在使用HTML5标签,利用CSS3 +DIV布局制作网页过程中遇到的实际需要和应该掌握的技术,全面介绍HTML5标签设计网页的内容和技巧。
(2)总体设计思路以完整的网页制作工作过程为导向,重构教学内容。
根据行业企业发展需要和完成职业岗位实际工作任务所需要的知识、能力素质要求,按照网页设计与制作的过程和学生的学习认知规律,打破原有的功能化知识体系,对教学内容从简单到复杂,从入门到深化进行科学安排,循序渐进的实现教学目标,课程内容与项目开发内容一致,理论与实践一体化,实现学习和工作的深度融合。
≪HTM15+CSS3网页谓+与制昨》课耨防案一、本课程建设现状≪HTM15÷CSS3网页设计与制作》是软件技术专业的一门专业必修课,课程总学时为85课时,6个学分,第二学期授课,主要授课模式为理论+实践的形式,课程采用项目化教学模式,使学生具备从事网页设计与制作的基本职业能力、具备网页设计、网站规划与网站维护的专业能力。
本课程教学团队专业年龄职称结构合理,团队8人,全部是硕士以上学位,其中副教授3人、高级工程师2人、讲师2人、助教1人。
团队成员业务水平精湛,科研素质高。
二、课程建设目标按照学校课程建设规划和专业建设方案,结合本课程建设基础,通过包括教学内容、教学方法、实践教学、考核方法、教学资源建设、教学团队建设等方面的改革与建设,把《HTM15+CSS3网页设计与制作》课程建设成为充分体现创新精神、现代理念、高职特色的、适合我校相关专业教学、体现我校育人特色、符合市场需求的示范性合格课程。
三、课程建设内容(-)课程标准制定紧扣高职教育和高职学生的特点,对接高职大学生就业岗位所需的专业素质,不断优化课程标准,使课程教学目标与专业人才培养目标紧密衔接。
(二)教材与教学资源建设本课程开设以来一直选用适合于高职大学生的教材。
教材内容设置既要对后续专业课程的学习做好基础储备,又要保证与社会发展、就业需求相匹配;做到理论实践知识与职业技能的完美融合。
教材图文并茂,学生学习兴趣浓厚。
为了让学生更好理解和掌握教学内容,透彻而深刻地理解本课程的重难点。
本课程的教学团队着力丰富课程的教学视频、PPT、教案、项目案例、试题等教学资源,同时结合未来教育发展趋势,注重线上线下混合式教学模式的发展。
(三)教学团队组建与培养首先,积极开展教研活动,通过集体备课、交流教学经验、组织业务学习等方式提升团队的凝聚力和队员的业务水平。
其次,充分利用省培、国培、1+X等师资培训以及暑期下企业顶岗学习等多种形式进行培训I,积极参加各级各类的学术研讨。
课程名称:移动WEB开发(HTML5+CSS3)学分:5.5计划学时:96适用专业:计算机应用技术1.前言1.1课程性质本课程是计算机应用技术专业的一门专业核心课。
其功能在于向学生介绍移动WEB开发中的热门技术HTML5和CSS3,培养学生利用HTML5和CSS3进行跨平台移动WEB应用开发的能力。
通过本课程的学习,使学生熟悉HTML5网页的基本结构,HTML5标签、CSS3样式的定义与样式表的应用等技术,从而能够熟练掌握形式多样的移动WEB应用设计方法,为将来从事WEB前端开发、WebApp开发及跨平台应用开发等相关工作奠定基础。
本课程的先修课程为网站前端设计,后续课程为网站后台开发()、网页脚本技术(JavaScript+jQuery)。
1.2设计思路本课程是以高职计算机类网站开发方向学生的就业为导向,在行业专家的指导下,对移动WEB开发开发过程中所涉及的岗位进行职业能力分析,以实际工作中移动WEB开发的设计任务为引领,通过项目组织教学,倡导学生在项目中学会利用HTML5和CSS3进行跨平台移动WEB应用开发的基本技能,培养学生初步具备移动WEB开发开发过程中需要的基本职业能力。
在教学内容的选择上,从跨平台移动WEB开发实际应用的角度出发,理论知识以“必需够用”为度,以学生为主体,注重学生实际操作能力与应用能力的培养。
根据HTML5+CSS3的八大典型WEB应用,按项目构筑课程教学内容,通过项目引领和任务驱动,并配以案例分析进行教学,着重培养学生的实践应用技能,通过实践使学生能够将所学应用到实际的项目之中。
建议本课程课时为96学时,计算机类三年制安排在第3学期,计算机类五年一贯制安排在第7学期。
2.课程目标2.1总体目标通过本课程的学习,要求学生掌握HTML5和CSS3基础知识及最新技术,具备扎实的HTML5和CSS3开发基础,能够独立使用HTML5和CSS3开发兼容各在平台的移动WEB应用,学会网页中复杂样式与网页特效的设计,也为日后学习跨平台移动WEB应用开发奠定基础。
第1章 Web开发新时代1.1 HTML5概述1.1.1 HTML5新特性1.1.2 HTML5组织1.1.3 HTML5构成1.2 HTML5设计原理1.2.1 HTML开发历程1.2.2 HTML5开发动力1.2.3 HTML5设计理念1.3 编写第一个HTML5页面1.3.1 搭建上机练习环境1.3.2 检测浏览器是否支持1.3.3 使用HTML5编写简单的Web页面1.4 HTML5页面的特征1.4.1 使用HTML5结构化元素1.4.2 使用CSS美化HTML5文档第2章从HTML、XHTML到HTML5视频讲解:2小时2.1 HTML基础2.1.1 HTML简介2.1.2 HTML特性2.1.3 HTML结构2.1.4 HTML语法2.1.5 HTML标签2.1.6 HTML属性2.2 XHTML基础2.2.1 XHTML结构2.2.2 XHTML语法2.2.3 XHTML类型2.2.4 DTD解析2.2.5 命名空间2.3 HTML5基础2.3.1 HTML5语法2.3.2 HTML5元素2.3.3 HTML5增加及废除的属性2.3.4 HTML5全局属性2.3.5 HTML5其他功能第3章创建HTML5文档视频讲解:1小时13分钟3.1 认识HTML5文档结构3.2 HTML5元素分类3.3 构建主体内容3.3.1 标识文章3.3.2 给内容分段3.3.3 设计导航信息3.3.4 设计辅助信息3.3.5 设计微格式3.3.6 添加发布日期3.4 添加语义模块3.4.1 添加标题块3.4.2 给标题分组3.4.3 添加脚注块3.4.4 添加联系信息3.5 综合实战:使用HTML5设计博客主页3.5.1 设计大纲3.5.2 设计样式第4章实战HTML5表单视频讲解:1小时08分钟4.1 新增的input输入类型4.1.1 email类型的应用4.1.2 url类型的应用4.1.3 number类型的应用4.1.4 range类型的应用4.1.5 日期检出器类型的应用4.1.6 search类型的应用4.1.7 tel类型的应用4.1.8 color类型的应用4.2 新增的input属性4.2.1 新增的autocomplete属性4.2.2 新增的autofocus属性4.2.3 新增的form属性4.2.4 新增的表单重写属性4.2.5 新增的height与width属性4.2.6 新增的list属性4.2.7 新增的min、max和step属性4.2.8 新增的multiple属性4.2.9 新增的pattern属性4.2.10 新增的placeholder属性4.2.11 新增的required属性4.3 新增的form元素4.3.1 新增的datalist元素4.3.2 新增的keygen元素4.3.3 新增的output元素4.4 新增的form属性4.4.1 新增的autocomplete属性4.4.2 新增的novalidate属性第5章实战HTML5画布视频讲解:2小时5.1 认识HTML5 canvas元素5.1.1 在页面中添加canvas元素5.1.2 Canvas如何绘制图形5.1.3 认识Canvas坐标5.1.4 何时不用Canvas5.1.5 如果浏览器不支持Canvas5.1.6 检测浏览器支持5.2 绘制简单图形5.2.1 绘制直线5.2.2 绘制矩形5.2.3 绘制圆形5.2.4 绘制三角形5.2.5 清空画布5.3 绘制贝塞尔曲线5.3.1 绘制二次方贝塞尔曲线5.3.2 绘制三次方贝塞尔曲线5.4 图形的变换5.4.1 保存与恢复Canvas状态5.4.2 移动坐标空间5.4.3 旋转坐标空间5.4.4 缩放图形5.4.5 矩阵变换5.5 图形的组合与裁切5.5.1 图形的组合5.5.2 裁切路径5.6 更多的颜色和样式选项5.6.1 应用不同的线型5.6.2 绘制线性渐变5.6.3 绘制径向渐变5.6.4 绘制图案5.6.5 设置图形的透明度5.6.6 创建阴影5.7 绘制文字5.7.1 绘制填充文字5.7.2 文字相关属性5.7.3 绘制轮廓文字5.7.4 测量文字宽度5.8 操作与使用图像5.8.1 向Canvas中引入图像5.8.2 改变图像大小5.8.3 创建图像切片第6章 HTML5音频与视频视频讲解:50分钟6.1 HTML5多媒体技术概述6.1.1 关于编解码器6.1.2 音频编解码器6.1.3 视频编解码器6.2 浏览器支持概述6.2.1 用JavaScript检测音频格式支持情况6.2.2 用JavaScript检测视频格式支持情况6.3 在HTML5中播放音频6.3.1 认识audio元素6.3.2 播放音频6.4 在HTML5中播放视频6.4.1 认识video元素6.4.2 播放视频6.5 音频与视频相关属性、方法与事件6.5.1 音频与视频相关属性6.5.2 音频与视频相关方法6.5.3 音频与视频相关事件6.6 综合实战6.6.1 用脚本控制音乐播放6.6.2 查看视频帧画面第7章 Web存储视频讲解:1小时20分钟7.1 认识Web Storage7.1.1 Cookie存储机制的优缺点7.1.2 为什么要用Web Storage7.1.3 Web Storage的优缺点7.1.4 浏览器支持概述7.2 使用Web Storage7.2.1 检查浏览器的支持性7.2.2 设置和获取数据7.2.3 防止数据泄露7.2.4 Web Storage的其他用法7.2.5 Web Storage事件监测7.2.6 实例1:设计网页皮肤7.2.7 实例2:跟踪localStorage数据7.2.8 实例3:设计计数器7.2.9 综合应用:Web应用项目实时跟踪7.3 Web SQL数据库7.3.1 Web SQL数据库概述7.3.2 使用Web SQL数据库7.3.3 实例1:创建简单的本地数据库7.3.4 实例2:批量存储本地数据7.3.5 综合应用:Web Storage和Web SQL混合开发第8章离线应用视频讲解:23分钟8.1 HTML5离线应用概述8.1.1 为什么要学习HTML5离线应用8.1.2 浏览器支持概述8.2 HTML5离线应用详解8.2.1 解析manifest文件8.2.2 搭建离线应用程序8.2.3 检查浏览器是否支持8.2.4 离线缓存更新实现8.2.5 JavaScript接口实现8.2.6 离线存储事件监听8.3 实战1:缓存首页8.4 实战2:离线编辑内容8.5 实战3:离线跟踪第9章 Workers多线程处理视频讲解:1小时01分钟9.1 认识Web Workers9.1.1 Web Workers概述9.1.2 浏览器支持概述9.1.3 熟悉Web Workers成员9.2 使用Web Workers9.2.1 检查浏览器支持性9.2.2 创建Web Workers9.2.3 与Web Workers通信9.2.4 使用Web Workers上机练习9.3 案例实战9.3.1 使用多线程实现后台运算9.3.2 在后台过滤值9.3.3 多任务并发处理9.3.4 在多线程之间通信9.3.5 使用线程技术计算Fibonacci数列9.3.6 使用多线程绘图9.4 综合应用:模拟退火算法9.4.1 认识模拟退火算法9.4.2 编写应用主页面9.4.3 编写worker.js9.4.4 与Web Workers通信第10章 Geolocation地理位置10.1 位置信息概述10.1.1 为什么要学习Geolocation 10.1.2 位置信息表示方式10.1.3 位置信息来源10.1.4 IP定位10.1.5 GPS定位10.1.6 Wi-Fi定位10.1.7 手机定位10.1.8 自定义定位10.2 使用Geolocation API10.2.1 检查浏览器支持性10.2.2 获取当前地理位置10.2.3 监视位置信息10.2.4 停止获取位置信息10.2.5 隐私保护10.2.6 处理位置信息10.2.7 使用position对象10.3 案例实战10.3.1 使用Google地图10.3.2 跟踪行走速度第11章 CSS3概述视频讲解:1小时01分钟11.1 回顾CSS11.1.1 CSS发展简史11.1.2 CSS 1.0和CSS 2.0概述11.1.3 CSS与DIV标记之缘11.1.4 CSS编码规范11.2 了解CSS3新增特性11.2.1 属性选择器11.2.2 RBGA 透明度11.2.3 多栏布局11.2.4 多背景图片11.2.5 字符串溢出11.2.6 块阴影与圆角阴影11.2.7 圆角11.2.8 边框图片11.2.9 形变11.3 CSS3前景展望11.3.1 CSS3的应用范围11.3.2 当前支持CSS3的浏览器11.4 案例实战:设计漂亮的表单第12章 CSS选择器视频讲解:34分钟12.1 属性选择器12.1.1 认识属性选择器12.1.2 案例实战12.2 结构伪类选择器12.2.1 认识结构伪类选择器12.2.2 案例实战12.3 UI伪类选择器12.3.1 认识常用UI伪类选择器12.3.2 案例实战12.4 其他选择器第13章文本、字体与颜色视频讲解:49分钟13.1 设计文本阴影13.1.1 定义text-shadow属性13.1.2 应用阴影效果13.1.3 综合实战:设计黑客网站首页13.2 定义文本样式13.2.1 文本样式简介13.2.2 溢出文本13.2.3 文本换行13.3 设计颜色样式13.3.1 使用RGBA颜色值13.3.2 使用HSL颜色值13.3.3 使用HSLA颜色值13.3.4 定义opacity属性13.3.5 定义transparent颜色值第14章背景和边框视频讲解:1小时09分钟14.1 设计多色边框14.1.1 用法详解14.1.2 案例实战14.2 设计边框背景14.2.1 用法详解14.2.2 案例实战14.3 设计圆角14.3.1 用法详解14.3.2 案例实战:设计椭圆图形14.4 设计阴影14.4.1 用法详解14.4.2 案例实战:设计Windows7界面效果14.5 设计背景14.5.1 定义背景坐标14.5.2 定义背景裁剪区域14.5.3 定义背景图像大小14.5.4 定义背景图像循环方式14.5.5 定义多背景图像第15章 2D变形视频讲解:31分钟15.1 认识transform15.2 2D变形15.2.1 旋转动画15.2.2 缩放动画15.2.3 移动动画15.2.4 倾斜动画15.2.5 变形动画15.2.6 案例实战:设计涂鸦墙15.3 自定义变形15.4 定义复杂变形第16章设计动画视频讲解:1小时20分钟16.1 平滑过渡16.1.1 定义过渡属性16.1.2 定义过渡时间16.1.3 定义过渡延迟时间16.1.4 定义过渡效果16.1.5 案例实战:设计Mac OS导航器16.2 3D动画16.2.1 定义动画名称16.2.2 定义动画时间16.2.3 定义动画播放方式16.2.4 定义动画延迟时间16.2.5 定义动画播放次数16.2.6 定义动画播放方向16.2.7 案例实战:设计图片翻转特效16.3 渐变效果16.3.1 设计Webkit渐变16.3.2 Webkit案例实战16.3.3 设计Gecko渐变16.3.4 Gecko案例实战16.3.5 设计IE渐变16.3.6 设计W3C渐变16.4 案例综合实战16.4.1 设计礼品盒16.4.2 设计折叠面板16.4.3 设计易拉罐16.4.4 设计光盘滑动动画16.4.5 设计下拉菜单16.4.6 设计精致按钮第17章网页布局视频讲解:40分钟17.1 设计多列布局17.2 设置多列显示样式17.2.1 定义列宽17.2.2 定义列数17.2.3 定义列间距17.2.4 定义列边框样式17.2.5 定义跨列显示17.2.6 定义列高度17.2.7 定义打印列17.3 设计盒布局17.4 设置盒布局格式17.4.1 定义自适应宽度17.4.2 定义列显示顺序17.4.3 定义列排列方向17.4.4 定义模块大小自适应17.4.5 消除空白17.4.6 定义对齐方式17.5 综合实战:设计多列网页第18章用户界面视频讲解:35分钟18.1 改变盒模型组成方式18.2 调节元素尺寸18.3 设计轮廓18.3.1 定义轮廓线18.3.2 定义轮廓线宽度18.3.3 定义轮廓线样式18.3.4 定义轮廓线颜色18.3.5 定义轮廓线位移18.4 设计导航18.4.1 定义导航顺序18.4.2 定义方向键控制顺序18.5 添加显示内容18.6 恢复默认样式18.6.1 取消元素样式18.6.2 慎用initial的情况第19章 CSS3其他新特性视频讲解:40分钟19.1 溢出处理19.2 自定义字体类型19.2.1 使用@font-face规则19.2.2 开放字体19.3 定义设备类型19.3.1 认识Media Queries模块19.3.2 认识@media规则19.3.3 使用@media规则19.3.4 在网站中应用@media规则19.4 添加语音功能19.5 设计倒影第1章 Web开发新时代1.1 HTML5概述1.1.1 HTML5新特性1.1.2 HTML5组织1.1.3 HTML5构成1.2 HTML5设计原理1.2.1 HTML开发历程1.2.2 HTML5开发动力1.2.3 HTML5设计理念1.3 编写第一个HTML5页面1.3.1 搭建上机练习环境1.3.2 检测浏览器是否支持1.3.3 使用HTML5编写简单的Web页面1.4 HTML5页面的特征1.4.1 使用HTML5结构化元素1.4.2 使用CSS美化HTML5文档第2章从HTML、XHTML到HTML5视频讲解:2小时2.1 HTML基础2.1.1 HTML简介2.1.2 HTML特性2.1.3 HTML结构2.1.4 HTML语法2.1.5 HTML标签2.1.6 HTML属性2.2 XHTML基础2.2.1 XHTML结构2.2.2 XHTML语法2.2.3 XHTML类型2.2.4 DTD解析2.2.5 命名空间2.3 HTML5基础2.3.1 HTML5语法2.3.2 HTML5元素2.3.3 HTML5增加及废除的属性2.3.4 HTML5全局属性2.3.5 HTML5其他功能第3章创建HTML5文档视频讲解:1小时13分钟3.1 认识HTML5文档结构3.2 HTML5元素分类3.3 构建主体内容3.3.1 标识文章3.3.2 给内容分段3.3.3 设计导航信息3.3.4 设计辅助信息3.3.5 设计微格式3.3.6 添加发布日期3.4 添加语义模块3.4.1 添加标题块3.4.2 给标题分组3.4.3 添加脚注块3.4.4 添加联系信息3.5 综合实战:使用HTML5设计博客主页3.5.1 设计大纲3.5.2 设计样式第4章实战HTML5表单视频讲解:1小时08分钟4.1 新增的input输入类型4.1.1 email类型的应用4.1.2 url类型的应用4.1.3 number类型的应用4.1.4 range类型的应用4.1.5 日期检出器类型的应用4.1.6 search类型的应用4.1.7 tel类型的应用4.1.8 color类型的应用4.2 新增的input属性4.2.1 新增的autocomplete属性4.2.2 新增的autofocus属性4.2.3 新增的form属性4.2.4 新增的表单重写属性4.2.5 新增的height与width属性4.2.6 新增的list属性4.2.7 新增的min、max和step属性4.2.8 新增的multiple属性4.2.9 新增的pattern属性4.2.10 新增的placeholder属性4.2.11 新增的required属性4.3 新增的form元素4.3.1 新增的datalist元素4.3.2 新增的keygen元素4.3.3 新增的output元素4.4 新增的form属性4.4.1 新增的autocomplete属性4.4.2 新增的novalidate属性第5章实战HTML5画布视频讲解:2小时5.1 认识HTML5 canvas元素5.1.1 在页面中添加canvas元素5.1.2 Canvas如何绘制图形5.1.3 认识Canvas坐标5.1.4 何时不用Canvas5.1.5 如果浏览器不支持Canvas5.1.6 检测浏览器支持5.2 绘制简单图形5.2.1 绘制直线5.2.2 绘制矩形5.2.3 绘制圆形5.2.4 绘制三角形5.2.5 清空画布5.3 绘制贝塞尔曲线5.3.1 绘制二次方贝塞尔曲线5.3.2 绘制三次方贝塞尔曲线5.4 图形的变换5.4.1 保存与恢复Canvas状态5.4.2 移动坐标空间5.4.3 旋转坐标空间5.4.4 缩放图形5.4.5 矩阵变换5.5 图形的组合与裁切5.5.1 图形的组合5.5.2 裁切路径5.6 更多的颜色和样式选项5.6.1 应用不同的线型5.6.2 绘制线性渐变5.6.3 绘制径向渐变5.6.4 绘制图案5.6.5 设置图形的透明度5.6.6 创建阴影5.7 绘制文字5.7.1 绘制填充文字5.7.2 文字相关属性5.7.3 绘制轮廓文字5.7.4 测量文字宽度5.8 操作与使用图像5.8.1 向Canvas中引入图像5.8.2 改变图像大小5.8.3 创建图像切片第6章 HTML5音频与视频视频讲解:50分钟6.1 HTML5多媒体技术概述6.1.1 关于编解码器6.1.2 音频编解码器6.1.3 视频编解码器6.2 浏览器支持概述6.2.1 用JavaScript检测音频格式支持情况6.2.2 用JavaScript检测视频格式支持情况6.3 在HTML5中播放音频6.3.1 认识audio元素6.3.2 播放音频6.4 在HTML5中播放视频6.4.1 认识video元素6.4.2 播放视频6.5 音频与视频相关属性、方法与事件6.5.1 音频与视频相关属性6.5.2 音频与视频相关方法6.5.3 音频与视频相关事件6.6 综合实战6.6.1 用脚本控制音乐播放6.6.2 查看视频帧画面第7章 Web存储视频讲解:1小时20分钟7.1 认识Web Storage7.1.1 Cookie存储机制的优缺点7.1.2 为什么要用Web Storage7.1.3 Web Storage的优缺点7.1.4 浏览器支持概述7.2 使用Web Storage7.2.1 检查浏览器的支持性7.2.2 设置和获取数据7.2.3 防止数据泄露7.2.4 Web Storage的其他用法7.2.5 Web Storage事件监测7.2.6 实例1:设计网页皮肤7.2.7 实例2:跟踪localStorage数据7.2.8 实例3:设计计数器7.2.9 综合应用:Web应用项目实时跟踪7.3 Web SQL数据库7.3.1 Web SQL数据库概述7.3.2 使用Web SQL数据库7.3.3 实例1:创建简单的本地数据库7.3.4 实例2:批量存储本地数据7.3.5 综合应用:Web Storage和Web SQL混合开发第8章离线应用视频讲解:23分钟8.1 HTML5离线应用概述8.1.1 为什么要学习HTML5离线应用8.1.2 浏览器支持概述8.2 HTML5离线应用详解8.2.1 解析manifest文件8.2.2 搭建离线应用程序8.2.3 检查浏览器是否支持8.2.4 离线缓存更新实现8.2.5 JavaScript接口实现8.2.6 离线存储事件监听8.3 实战1:缓存首页8.4 实战2:离线编辑内容8.5 实战3:离线跟踪第9章 Workers多线程处理视频讲解:1小时01分钟9.1 认识Web Workers9.1.1 Web Workers概述9.1.2 浏览器支持概述9.1.3 熟悉Web Workers成员9.2 使用Web Workers9.2.1 检查浏览器支持性9.2.2 创建Web Workers9.2.3 与Web Workers通信9.2.4 使用Web Workers上机练习9.3 案例实战9.3.1 使用多线程实现后台运算9.3.2 在后台过滤值9.3.3 多任务并发处理9.3.4 在多线程之间通信9.3.5 使用线程技术计算Fibonacci数列9.3.6 使用多线程绘图9.4 综合应用:模拟退火算法9.4.1 认识模拟退火算法9.4.2 编写应用主页面9.4.3 编写worker.js9.4.4 与Web Workers通信第10章 Geolocation地理位置10.1 位置信息概述10.1.1 为什么要学习Geolocation 10.1.2 位置信息表示方式10.1.3 位置信息来源10.1.4 IP定位10.1.5 GPS定位10.1.6 Wi-Fi定位10.1.7 手机定位10.1.8 自定义定位10.2 使用Geolocation API10.2.1 检查浏览器支持性10.2.2 获取当前地理位置10.2.3 监视位置信息10.2.4 停止获取位置信息10.2.5 隐私保护10.2.6 处理位置信息10.2.7 使用position对象10.3 案例实战10.3.1 使用Google地图10.3.2 跟踪行走速度第11章 CSS3概述视频讲解:1小时01分钟11.1 回顾CSS11.1.1 CSS发展简史11.1.2 CSS 1.0和CSS 2.0概述11.1.3 CSS与DIV标记之缘11.1.4 CSS编码规范11.2 了解CSS3新增特性11.2.1 属性选择器11.2.2 RBGA 透明度11.2.3 多栏布局11.2.4 多背景图片11.2.5 字符串溢出11.2.6 块阴影与圆角阴影11.2.7 圆角11.2.8 边框图片11.2.9 形变11.3 CSS3前景展望11.3.1 CSS3的应用范围11.3.2 当前支持CSS3的浏览器11.4 案例实战:设计漂亮的表单第12章 CSS选择器视频讲解:34分钟12.1 属性选择器12.1.1 认识属性选择器12.1.2 案例实战12.2 结构伪类选择器12.2.1 认识结构伪类选择器12.2.2 案例实战12.3 UI伪类选择器12.3.1 认识常用UI伪类选择器12.3.2 案例实战12.4 其他选择器第13章文本、字体与颜色视频讲解:49分钟13.1 设计文本阴影13.1.1 定义text-shadow属性13.1.2 应用阴影效果13.1.3 综合实战:设计黑客网站首页13.2 定义文本样式13.2.1 文本样式简介13.2.2 溢出文本13.2.3 文本换行13.3 设计颜色样式13.3.1 使用RGBA颜色值13.3.2 使用HSL颜色值13.3.3 使用HSLA颜色值13.3.4 定义opacity属性13.3.5 定义transparent颜色值第14章背景和边框视频讲解:1小时09分钟14.1 设计多色边框14.1.1 用法详解14.1.2 案例实战14.2 设计边框背景14.2.1 用法详解14.2.2 案例实战14.3 设计圆角14.3.1 用法详解14.3.2 案例实战:设计椭圆图形14.4 设计阴影14.4.1 用法详解14.4.2 案例实战:设计Windows7界面效果14.5 设计背景14.5.1 定义背景坐标14.5.2 定义背景裁剪区域14.5.3 定义背景图像大小14.5.4 定义背景图像循环方式14.5.5 定义多背景图像第15章 2D变形视频讲解:31分钟15.1 认识transform15.2 2D变形15.2.1 旋转动画15.2.2 缩放动画15.2.3 移动动画15.2.4 倾斜动画15.2.5 变形动画15.2.6 案例实战:设计涂鸦墙15.3 自定义变形15.4 定义复杂变形第16章设计动画视频讲解:1小时20分钟16.1 平滑过渡16.1.1 定义过渡属性16.1.2 定义过渡时间16.1.3 定义过渡延迟时间16.1.4 定义过渡效果16.1.5 案例实战:设计Mac OS导航器16.2 3D动画16.2.1 定义动画名称16.2.2 定义动画时间16.2.3 定义动画播放方式16.2.4 定义动画延迟时间16.2.5 定义动画播放次数16.2.6 定义动画播放方向16.2.7 案例实战:设计图片翻转特效16.3 渐变效果16.3.1 设计Webkit渐变16.3.2 Webkit案例实战16.3.3 设计Gecko渐变16.3.4 Gecko案例实战16.3.5 设计IE渐变16.3.6 设计W3C渐变16.4 案例综合实战16.4.1 设计礼品盒16.4.2 设计折叠面板16.4.3 设计易拉罐16.4.4 设计光盘滑动动画16.4.5 设计下拉菜单16.4.6 设计精致按钮第17章网页布局视频讲解:40分钟17.1 设计多列布局17.2 设置多列显示样式17.2.1 定义列宽17.2.2 定义列数17.2.3 定义列间距17.2.4 定义列边框样式17.2.5 定义跨列显示17.2.6 定义列高度17.2.7 定义打印列17.3 设计盒布局17.4 设置盒布局格式17.4.1 定义自适应宽度17.4.2 定义列显示顺序17.4.3 定义列排列方向17.4.4 定义模块大小自适应17.4.5 消除空白17.4.6 定义对齐方式17.5 综合实战:设计多列网页第18章用户界面视频讲解:35分钟18.1 改变盒模型组成方式18.2 调节元素尺寸18.3 设计轮廓18.3.1 定义轮廓线18.3.2 定义轮廓线宽度18.3.3 定义轮廓线样式18.3.4 定义轮廓线颜色18.3.5 定义轮廓线位移18.4 设计导航18.4.1 定义导航顺序18.4.2 定义方向键控制顺序18.5 添加显示内容18.6 恢复默认样式18.6.1 取消元素样式18.6.2 慎用initial的情况第19章 CSS3其他新特性视频讲解:40分钟19.1 溢出处理19.2 自定义字体类型19.2.1 使用@font-face规则19.2.2 开放字体19.3 定义设备类型19.3.1 认识Media Queries模块19.3.2 认识@media规则19.3.3 使用@media规则19.3.4 在网站中应用@media规则19.4 添加语音功能19.5 设计倒影。
《HTML5+CSS3》课程标准一、课程的性质该课程是软件与信息服务专业的一门专业核心课程。
该课程是一门具有很强的实践性和应用性的课程,主要培养学生面向基于HTML5+CSS开发跨平台Web应用HTML5工程师岗位的核心能力和职业素质;培养学生使用HTML5技术开发移动web应用,主要认识和掌握HTML5特性:语义特性、本地存储特性、设备兼容特性、性能与集成特性、连接特性、网页多媒体特性、三维、图形及特效特性、CSS3特性等。
其前导课程为《程序设计基础》、《网页制作基础》、《数据库SQL》和《JavaScript程序设计》二、课程设计理念(一)课程设置的依据该课程总体设计思路是以岗位面向为依据、以就业为导向、以能力培养为目标、以案例引领式教学为手段,依据当前HTML5的发展状况和web前端开发岗位所提出的新要求,既可以巩固前期所学web前端开发的理论知识和设计软件应用知识,还重在于给学生开拓新的专业知识面,认知一个新的设计领域--跨平台应用开发,从而拓展职业能力和就业选择面。
(二)课程内容确定依据该门课程的总学时为108。
以基于工作过程的课程开发理念为指导,以职业能力培养和职业素养养成为重点,根据技术领域和职业岗位(群)的任职要求,以学生就业为导向,在行业专家的指导下,对HTML5,web开发等专门化方向所涵盖的岗位进行任务与职业能力分析,以实际工作任务为引领,以创新能力培养为主线,将课程知识体系整合,在教学过程中注意体现学生设计和开发能力培养的循序渐进性。
在教学内容和方法上贯彻“技能培养为主,知识够用为度”的教学思想,旨在培养学生的创新意识,提高岗位实践能力和适应能力,保证学生专业能力、方法能力和社会能力的全面培养。
(三)课程开发思路根据高职教育的特点,按照学院“厚德强技”的校训,积极探索以实践能力考核为主的课程评价方法,从而提高学生的职业能力和就业竞争力,具体措施体现在以下几个方面:●基于典型工作过程分析,构建课程体系;●职业能力培养为核心,设计教学内容;●以提高学生职业能力和职业素养为目标,重视实践教学;●融合职业资格标准,推行双证书制;●校企合作,共建新型实践教学基地;●校企合作,形成实践技能课主要由企业兼职教师讲授的机制。
三、课程目标本课程的培养目标是通过这门课程的学习,主要培养HTML5跨平台移动应用开发的人才,重点培养学生移动web开发HTML5+CSS3+JavaScript的分析与设计能力。
学生通过本课程的学习,具备应用HTML5开发技术解决移动移动web应用开发领域中的问题,具备编写多设备跨平台轻应用WebAPP代码的能力。
(一)知识目标●理解移动WebAPP的开发流程和设计思路;●掌握HTML5新元素;●掌握HTML5表单的使用;●掌握CSS3选择器的使用;●掌握CSS3创建布局的方式;●掌握CSS3边框和背景的应用;●掌握CSS3文本样式的应用;●掌握CSS3过渡、动画和变换的应用;●掌握Ajax的应用;●掌握HTML5高级功能——使用多媒体;●掌握HTML5高级功能——使用canvas元素;●掌握HTML5高级功能——使用地理定位;●掌握HTML5高级功能——使用web储存;●掌握HTML5高级功能——使用拖放●掌握HTML5高级功能——创建离线web应用程序(二)技能目标●培养编程思想,熟悉基本程序设计方法;●能更好的利用HTML5高级开发技术解决移动应用开发领域中的问题;●将HTML5+CSS3开发方法用于综合实训项目中,为就业实习奠定基础;●能具备编写移动应用WebAPP代码的能力;(三)素质目标●培养良好的分析、设计和逻辑思维能力;●培养良好的思想品德、心理素质;●培养良好的职业道德,包括爱岗敬业、诚实守信、遵守相关的法律法规等;●培养良好的团队协作、协调人际关系的能力;●培养对新知识、新技能的学习能力与创新能力。
四、课程内容和要求根据专业课程目标和涵盖的工作任务要求,确定课程内容和要求,说明学生应获得的知识、技能与态度。
五、课程实施和建议(一)课程的重点、难点及解决办法本课程是软件与信息服务的专业核心课程,重点是培养学生掌握移动webAPP的分析与设计能力,具备编写APP应用软件代码的能力。
本课程的教学难点是让学生掌握相关代码编写能力并应用到实际开发中。
解决办法是通过多种渠道加强与软件开发企业的沟通与合作,与企业合作建立校外实训基地,为学生实训提供条件;多种教学方法灵活运用,再配以课外作业等形式激发学生的学习动力,增强学生的学习兴趣,提高教学效果;不断完善现有的校内实训基地,尽可能地在教学过程中引用企业的一些实际项目进行项目式教学,增强学生的动手操作能力以及对企业更深层次的认识能力;建设和完善课程的网络资源,为学生的学习提供多种渠道的便利条件;加强任课教师实践能力的培养,增强其教学能力等。
(二)教学方法和教学手段1、教学方法本课程主要采用任务驱动法、案例教学法等多种教学方法。
任务驱动法:任务驱动法是指在学习的过程中,学生在教师的帮助下,紧紧围绕一个共同的任务活动中心,在强烈的问题动机的驱动下,通过对学习资源的积极主动应用,进行自主探索和互动协作的学习,并在完成既定任务的同时,引导学生产生一种学习实践活动。
任务驱动的教与学的方式,能为学生提供体验实践的情境和感悟问题的情境,围绕任务展开学习,以任务的完成结果检验和总结学习过程等,改变学生的学习状态,使学生主动建构探究、实践、思考、运用、解决、高智慧的学习体系。
案例教学法:案例教学法就是在老师的指导下一种以案例为基础的教学法,案例教学方法有一个基本的假设前提,即学生能够通过对这些过程的研究与发现来进行学习,在必要的时候回忆出并应用这些知识与技能。
通过案例的教学,可以鼓励学生独立思考,引导学生变注重知识为注重能力,重视双向交流。
以案例的教学方式,让学生学会思考,学会解决问题的方法。
通过案例教学,让学生通过经验的交流,可以取长补短,促进学生人际交流能力的提高。
多种教学方法的灵活应用,能够大大的激发学生的学习热情,从而增强该门课程的教学效果。
2、教学手段多媒体教学:课堂教学以多媒体电子课件(PPT电子教案)为主,配合使用板书。
充分利用多媒体的优势,用电子课件制作大量内容丰富的教案,在配以案例、习题等内容,以取得较好的教学效果。
网络教学:利用多媒体一体化教室、校园网等资源优势,构建本课程的教学网站,通过网络提供丰富的教学资源。
包括教学大纲、教学实施计划、电子教案、PPT课件、习题及答案、试卷、实习计划、案例、论文等。
学生可以利用课下时间自主学习,开阔视野。
(三)教学评价本课程的评价主要是阶段评价与最终评价相结合、理论评价与实践评价相结合的模式,突出过程与模块评价,结合课堂提问、操作技能、课后作业等手段,实践性考核比重大些,但要注重平时的评分汇集。
平时的评分内容包括职业道德、学习能力、团队协作精神、沟通交际能力、写作能力、语言表达能力、知识的运用和掌握能力等方面的考核。
建议在教学中分任务模块评分,在课程结束时进行综合模块考核或者利用答辩的形式考察学生对所学知识的理解与掌握程度。
这样多元化的评价体系得出的结果能够体现出本门课程的特殊性以及对学生的公平与公正。
各任务模块可参照下表进行评价:说明:每个模块的考核主要考察学生的出勤情况、实际动手能力、理论知识的运用与掌握情况、完成作业的准确度、完整度、规范度等、分析问题、解决问题的能力、合作沟通能力、学习态度、总结报告(报告的内容、态度、写作水平等)等评定项目进行考核。
(四)教案编写建议教案是教师依据课程标准的要求,结合个人教学实践和学生的认知水平设计、编写教学实施方案,教案的编写应充分体现“以学生为主体的”理念,以利于教学的组织和围绕学生知识的学习以及职业能力的培养开展教学。
一般包括以下几项:1.教学内容及教学组织2.教学方法的选择3.学习情景设计4.课后作业与课外学习(五)教材编写如果编写教材,那么必须依据本课程标准编写教材。
教材的编写要充分体现案例课程设计思想,以案例为载体实施教学,案例的选取要科学、符合该门课程的工作逻辑、能形成系列,让学生在完成案例的过程中逐步提高职业能力,同时要考虑可操作性。
教材内容要反映新形势下的移动webAPP开发的思路,要与企业合作开发,让企业具有丰富实践经验的人员参与进来,同时还要结合高职高专软件与信息服务专业教学的基本情况,以理论知识够用、注重实践能力的培养。
如果是选用教材,那么选用的教材一定要符合高职高专教学的要求,且为案例型教材,能够科学、合理的安排教材内容,帮助学生不断提高综合素质与职业能力。
(六)课程资源的开发与利用1、教辅材料:要力求接近实践,最好是来源于实践的案例与情境,并开发课程的习题、参考文献等内容,向学生开放,以利于学生自主学习。
2、实训指导书:格式正确、内容全面,且能具体写明对学生的各项要求。
3、软件环境:校内实训最好安排专用实训室,引进一些实际项目用于教学。
4、硬件环境:希望能够加大对硬件实训内容的建设,加大对校外实训基地的建设,为学生的校外实践提供环境条件。
5、信息技术:充分的利用各种信息技术,例如网络、多媒体课件等,为学生提供学习的便利条件。
例如加大课程的网络资源建设,把与课程有关的文献资料、教学大纲、电子教案、教学课件、习题、教学视频、与职业资格考试相关的资料、学生与教师的互动等都放到网上,充分的为学生的自主学习提供环境条件。
(七)师资和实训条件要求任课教师必须具有丰富的项目开发能力和丰富的开发经验、基于学生能力培养的教学能力等,以利于教学和课程的改革。
另外,本门课程的实训条件要求有教学做一体化的综合实训室,融教学与实训为一体,以及与课程相应的软件作支持。
六、其它说明(1)本课程由XX学院开发。
(2)本课程标准的主要适用于高等职业技术院校。
第11页共10页。