《HTML5+CSS3+JavaScript网页设计基础与实战》课程大纲(42学时)

《HTML5+CSS3+JavaScript网页设计基础与实战》课程教学大纲学 分：3学分学 时：42学时（其中：讲课学时：30学时上机学时：12学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计、JavaScript网页特效适用专业：通识选修课、拓展课相关专业开课部门：非计算机系一、课程的性质与目标页基础、HTML标签、CSS样式、网页布局、动画、JavaScript基础、HTML5应用、JavaScript特效和响应式布局等内容，通过本课程的学习，学web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页书制度”Web前端的初级课程，通过本课程，能够为学习后面的前端知识夯实基础。二、课程设计理念与思路需的能力和终身学习的能力，实现一站式教学理念为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。三、教学条件要求开发工具：webstorm或其他代码编辑工具四、课程的主要内容及基本要求第一章 初识web前端学习单元初识web前端学时4学习目标、CSSJavaScript学习内容知识点了解掌握重点难点认识万维网√前端发展简史√W3C的构成√HTML5简介√HTML5特点√HTML5新特性√HTML5文件结构√HTML5标签与元素的概述√CSS3简介√CSS3特点√CSS3新特性√CSS3引入方式√CSS3选择器√CSS3属性√JavaScript简介√JavaScript语言特性√JavaScript构成√JavaScript变量与数据类型√JavaScript运算符√JavaScript常用事件√开发工具的介绍√Webstorm的安装√Webstorm的使用√Webstorm基本操作√创建第一个网页√第二章 HTML构建基本网页学习单元HTML构建基本网页学时6学习目标学习内容知识点了解掌握重点难点标题标签√段落标签√换行标签√【案例-秋天的故事】√图片标签√水平线标签√<div>块元素√√超链接√锚点链接√超链接的伪类√【案例-技术手册导航】√第三章 使用列表与表格布局学习单元使用列表与表格布局学时6学习目标了解列表与表格特点掌握列表与表格的相关标签掌握列表与表格的使用学习内容知识点了解掌握重点难点有序列表√无序列表√自定义列表√【案例-新闻列表】√表格基本标签√语义化标签√rowspan和colspan属性√cellpadding和cellspacing属性√表格其他属性√【案例—个人简历表】√第四章 设计网页页面学习单元设计网页页面学时6学习目标了解盒模型结构与z-index属性掌握CSS定位的区别与应用场景学习内容知识点了解掌握重点难点盒模型内容概述√Padding属性√Border属性√Margin属性√怪异盒模型√Cursor属性√【案例-图书促销活动】√CSS浮动√清除浮动√定位的概述√relative相对定位√absolute绝对定位√fixed固定定位√z-index属性√√display属性√visibility属性√overflow属性√opacity属性√rgba()函数√显示与隐藏属性总结√【案例-喜迎中秋佳节】√第五章 表单与表单设计效果学习单元表单与表单设计学时学习目标了解表单各标签与属性掌握<input>标签的type属性值及含义掌握表单的基本使用学习内容知识点了解掌握重点难点√表单概述√<form>标签√get和post提交方式√<input>标签√Type属性值（表单各控件）√<label>标签√【案例-用户登录表单】√<select>标签√<textarea>标签√<fieldset>标签√【案例-登录页满意度调查表】√新增表单控件√border-radius属性√border-radius属性√background-size属性√【案例-退款申请表单】√第六章 实现CSS3动画学习单元实现CSS3动画学时6学习目标了解CSS3动画掌握CSS3中2D和3D的transform转换CSS3中的transition过渡掌握CSS3中的animation动画学习内容知识点了解掌握重点难点transform-origin属性√translate()位移√rotate()旋转√scale()缩放√skew()倾斜√【案例-清凉夏日主题宣传】√@keyframes规则√animation-name属性√animation-duration属性√animation-timing-function属性√animation-delay属性√animation-iteration-count属性√animation-direction属性√animation-fill-mode属性√animation-play-state属性√浏览器前缀√【案例-无缝轮播图动画】√transition-property属性√transition-duration属性√transition-timing-function属性√tansition-delay属性√过渡与动画的效果区别√perspective属性√transform-style属性√perspective-origin属性√backface-visibility属性√3Drotate()旋转√3Dtranslate()位移√3Dscale()缩放√【案例-旋转夏日主题背景】√第七章 JavaScript基础应用学习单元JavaScript基础应用学时8学习目标熟悉JavaScript基础语法掌握DOM基本操作学习内容知识点了解掌握重点难点创建对象√JavaScript函数√If语句√For循环√continue语句与break语句√DOM获取元素节点√【案例-选取图书列表】√DOM操作文本内容√√节点关系√创建节点√添加节点√删除节点√替换节点√克隆节点√DOM操作属性√DOM操作样式√【案例-点击按钮切换图片】√setInterval定时器√clearInterval()清除定时器√setTimeout()定时器√clearTimeout()清除定时器√创建Date对象√获取总毫秒值√Date对象方法√【案例-跨年倒计时】√数组的概述√创建数组√添加、删除数组方法√转换数组方法√遍历数组方法√操作数组的其他方法√Math对象属性√Math对象方法√【案例-随机点名器】√第八章 实现HTML5应用学习单元实现HTML5应用学时8学习目标了解HTML5多媒体掌握<video>视频和<audio>音频的应用HTML5地理定位的应用掌握<canvas>画布的应用学习内容知识点了解掌握重点难点<video>标签√视频格式√<audio>标签√音频格式√DOM操作媒体文件√【案例-JS操作视频】√BOM概述√Window对象√Window对象方法√√navigator.geolocation属性√getCurrentPosition()方法√coords属性√watchPosition()方法√clearWatch()方法√【案例-使用百度地图API实现地理定位】√canvas的基本使用√canvas绘制图形√canvas绘制文本√canvas图形√canvas变形√<svg>标签√SVG绘制不同图形√SVG绘制多点线和多点形状√SVG与canvas的区别√【案例-canvas实现验证码】√第九章 JavaScript特效（可选）学习单元JavaScript特效学时6学习目标了解JavaScript的3大家族event事件对象的使用offset家族、scroll家族和client家族中的各个属性匀速和缓动动画的运用学习内容知识点了解掌握重点难点offset家族√匀速动画以及封装√缓动动画以及封装√【案例-导航菜单图标缓动】√scroll家族√滚动方法以及封装√纵向滚动的缓动动画封装√【阶段案例—滚动页面导航栏固定√clientl家族√event事件对象√【案例-放大镜效果】√第十章 移动端布局与响应式开发（可选）学习单元移动端布局与响应式开发学时10学习目标了解流式布局和媒体查询了解Bootstrap框架掌握Flex布局和rem布局学习内容知识点了解掌握重点难点视口概述√使用视口√移动端基础交互√流式布局√Flex布局√容器属性√项目属性√【案例-图书活动Flex布局】√Rem单位√媒体查询√Less概述√Less安装√Less变量√Less嵌套√Less运算√【案例-模拟图书官网移动端首页】√Bootstrap概述√Bootstrap的使用√布局容器√栅格系统概述√栅格参数√列偏移√嵌套列√列排序√响应式工具√Bootstrap组件√【案例-响应式网页设计】√第十一章 综合案例-快递网站首页（可选）学习单元综合案例-快递网站首页学时6学习目标学习内容知识点了解掌握重点难点案例概述√能力训练图√文件夹结构组织√√查快递模块√寄件服务模块√企业风采模块√公司简介模块√联系我们模块√页脚模块√五、学时分配章目讲课上机合计第一章 404426426第四章 设计网页页面426第五章 表单与表单效果设计426第六章 实现CSS3动画426第七章 JavaScript基础应用628第八章 实现HTML5应用628第九章 JavaScript