《HTML5+CSS3+JavaScript网页设计基础与实战》-课程大纲（必修 5学分 66学时）

1、HTML5+CSS3+JavaScript网页设计基础与实战 课程教学大纲学分：5学分学 时：66学时（其中：讲课学时：46学时 上机学时：20学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计、JavaScript网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标HTML5+CSS3+JavaScript网页设计基础与实战是面向计算机相关专业的一门专 业基础课，涉及网页基础、HTML标签、CSS样式、网页布局、动画、JavaScript基础、 HTML5应用、JavaScript特效和响应式布局等内容，通过本课程的学习，学生能够了解 网页we

2、b开展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果 及变形和动画效果，学会制作各种企业、门户、电商类网站。该课程属于力+X证书制 度”Web前端的初级课程，通过本课程，能够为学习后面的前端知识夯实基础。二、课程设计理念与思路课程设计理念：课程的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展， 不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的 培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯开展所需的 能力和终身学习的能力，实现一站式教学理念课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，

3、以学生 为主体，以案例（工程）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。 教学整体设计“以技能培养为目标，以案例（工程）任务实现为载体、理论学习与实践操作【案例-放大镜效果】V第十章移动端布局与响应式开发学习单元移动端布局与响应式开发学时10学时学习目标 了解流式布局和媒体查询了 解 Boot st rap 框架掌握Flex布局和rem布局学习内容知识点了解掌握重占难点视口概述使用视口V移动端基础交互流式布局Flex布局V容器属性V工程属性【案例-图书活动Flex布局】JRem单位媒体查询VLess概述Less安装Less变量VLess嵌套VLess运算【案例-模拟图书官网移

4、动端首页】VBootstrap 概述VBootstrap的使用布局容器栅格系统概述栅格参数V列偏移/ V嵌套列列排序响应式工具VBootstrap 组件【案例-响应式网页设计】第十一章综合案例-快递网站首页学习单元综合案例-快递网站首页学时学时学习目标学习内容知识点了解掌握重点难点案例概述V能力训练图V文件夹结构组织V顶部导航模块V杳快递模块/ V寄件服务模块V企业风采模块V公司简介模块V联系我们模块V页脚模块V五、学时分配章目讲课上机合计第一章初识web前端404第二章HTML构建基本网页426第三章使用列表与表格布局426第四章设计网页页面426第五章表单与表单效果设计426第八早实现CS

5、S3动画426第七章JavaScript基础应用628第八章实现HTML5应用628第九章JavaScript 特效426第十章移动端布局与响应式开发6410合计462066六、考核模式与成绩评定方法本课程为考试课程，期末考试采用百分制的闭卷考试模式。学生的考试成绩由平 时成绩(30%)和期末考试(70%)组成，其中，平时成绩包括出勒(5%) 作业(5%)、 上机成绩(20%) .七、选用教材和主要参考书本大纲是根据教材HTML5+CSS3+JavaScript网页设计基础与实战所设计的。参考书籍：千锋教育HTML5从入门到精通清华大学出版社明日科技.标签Vget和post提交方式Vinput

6、标签VType属性值（表单各控件）标签V【案例-用户登录表单】Vselect标签V 标签V fieldset标签V【案例-登录页满意度调杳 表】V新增表单控件Vborder-radius 属性Vborder-radius 属性Vbackground-size 属性V【案例-退款申请表单】第六章实现CSS3动画学习单元实现CSS3动画学时6学时学习目标了解CSS3动画掌握CSS3中2D和3D的transform转换掌握CSS3中的trans it ion过渡掌握CSS3中的animation动画知识点了解掌握重占难点tninsform-origin 属性translate。位移学习内容rotat

7、e。旋转Vscale。缩放Vskew。倾斜V【案例-清凉夏日主题宣传】key frames 规那么/ Vanimation-name 属性Vanimation-duration WftVaniniation-tiniing-function 属性Vanimation-delay 属性Vanimation-iteration-count 属 性Vanimation-direction 属性Vanimation-fill-mode 属性animation-play-state 属性V浏览器前缀【案例-无缝轮播图动画】transition-property M (4Vtransition-durat

8、ion JS fttransition-timing-functionJS 性Jlansition-delay 属性J过渡与动画的效果区别perspective 属性Jtransform-style 属性perspective-origin 属 t生backface-visibility 属性3D roiale。旋转J3D translate。/立移J3D scale。缩放V【案例-旋转夏日主题背 景】J第七章JavaScript基础应用学习单元 JavaScript基础应用学时8学时学习目标学熟悉JavaScript基础语法了解定时器的使用掌握DOM基本操作掌握JavaScript的基础应用

9、学习内容知识点了解掌握重点难点创立对象VJavaScript 函数If语句For循环continue语句与break语句DOM获取元素节点J【案例-选取图书列表】VDOM操作文本内容JDOM节点类型节点关系创立节点V添加节点删除节点替换节点克隆节点JDOM操作属性DOM操作样式【案例-点击按钮切换图 片】setlnlerval定时器Vclearlnterval()消除定时器VJsetTimeout()定时器cleaiTimeoui。清除定时器V创立Date对象获取总亳秒值JDate对象方法【案例-跨年倒计时】J数组的概述创立数组V添加、删除数组方法转换数组方法V遍历数组方法V操作数组的其他方法

10、Math对象属性JMalh对象方法V【案例随机点名器】J第八章实现HTML5应用学习单元实现HTML5应用学时8学时学习目标了解HTML5多媒体掌握videoX!频和audio音频的应用掌握HTML5地理定位的应用掌握canvas画布的应用学习内容知识点了解掌握重占难点video标签视频格式V 标签V音频格式VDOM操作媒体文件7【案例-JS操作视频】VBOM概述Window对象Window对象方法晒定位蹦Vnavigator.geolocalionJS 性getCurrentPosition()方法Vcoords属性watchPosition。方法JclcarWatch。方法J【案例-使用百度地图 API实现地理定位】Jcanvas的基本使用Vcanvas绘制图形Vcanvas绘制文本Vcanvas图像canvas变形VVsvg标签SVG绘制不同图形SVG绘制多点线和多点形 状SVG与canvas的区别/ V【案例-canvas实现验证 码】V第九章JavaScript特效学习单元JavaScript 特效学时6辆学习目标了解JavaScript的3大家族了解event事件对象的使