《HTML+CSS+JavaScript网页制作案例教程(第2版)》-教学大纲

《HTML+CSS+JavaScript网页制作案例教程》（第2版）教学大纲课程编号：学分：5学分学时：74学时（其中：讲课学时：50学时上机学时：24学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计、JavaScript适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML+CSS+JavaScript网页制作案例教程》（第2版）是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标签、CSS样式、网页布局、变形、动画、JavaScript等内容。通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局和动态效果，学会制作各种企业、门户、电商类网站。二、课程设计理念与思路课程设计理念：课程的集中实践教学环节需明确必要理论知识的升华与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。教学整体设计“以技能培养为目标，以案例（项目）任务实现为载体、理论学习与实践操作相结合”。三、教学条件要求开发工具：DreamweaverCS6或其他代码编辑工具四、课程的主要内容及基本要求第一章网页那点事（2学时）学习单元网页那点事学时2学时学习目标了解Web标准，明确HTML、CSS及JavaScript的作用。熟悉Dreamweaver工具的基本操作，能够使用Dreamweaver创建简单的网页。学习内容知识点了解掌握重点难点网页的组成√网页名词解释√Web标准√HTML√CSS√JavaScript√网页的展示平台—浏览器√认识Dreamweaver界面√Dreamweaver初始化设置√Dreamweaver基本操作√创建第一个网页√第二章从零开始构建HTML页面（6学时）学习单元从零开始构建HTML页面学时6学时学习目标掌握HTML文档基本格式，能够书写规范的HTML结构。掌握页面格式化标签的用法，能够合理地使用它们定义网页元素。掌握图像标签，学会制作图文混排页面。学习内容知识点了解掌握重点难点HTML文档基本结构√标签的分类√标签的关系√标题标签√段落标签√水平线标签√换行标签√【案例1】简单的网页√标签的属性√HTML文档头部相关标签√文本样式标签√文本格式化标签√【案例2】新闻页面√常见图像格式√图像标签<img/>√相对路径和绝对路径√特殊字符标签√【案例3】图文混排√第三章使用CSS技术美化网页（6学时）学习单元使用CSS技术美化网页学时6学时学习目标掌握CSS样式规则，能够书写规范的CSS样式代码。掌握CSS字体样式及文本外观属性，能够控制页面中的文本样式。掌握CSS复合选择器的使用，可以快捷选择页面中的元素。理解CSS层叠性、继承性与优先级，学会高效控制网页元素。学习内容知识点了解掌握重点难点认识CSS√CSS样式规则√引入CSS样式表√√CSS基础选择器√【案例4】文字Logo√CSS字体样式属性√CSS文本外观属性√【案例5】美食专题栏目√CSS复合选择器√CSS层叠性和继承性√CSS优先级√【案例6】搜索页面√第四章运用盒子模型划分网页模块（8学时）学习单元运用盒子模型划分网页模块学时8学时学习目标掌握盒子的相关属性，能够制作常见的盒子模型效果。掌握背景属性的设置方法，能够设置背景颜色和图像。理解渐变属性的原理，能够设置渐变背景。掌握元素类型的分类，能够进行元素类型的转换。学习内容知识点了解掌握重点难点认识盒子模型√<div>标签√边框属性√【案例7】音乐盒√内边距属性√外边距属性√盒子的宽与高√【案例8】用户中心√设置背景颜色√设置背景图像√设置背景图像平铺√设置背景图像的位置√设置背景图像固定√综合设置元素的背景√【案例9】咖啡店banner√元素的类型√<span>标签√元素类型的转换√【案例10】图标导航栏√颜色透明度√图片边框√阴影√渐变√【案例11】创意画框√圆角√多背景图像√【案例12】拼图效果√第五章为网页添加列表和超链接（6学时）学习单元为网页添加列表和超链接学时6学时学习目标掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块。掌握超链接标签的使用，能够使用超链接定义网页元素。掌握CSS伪类，会使用CSS伪类实现超链接特效。学习内容知识点了解掌握重点难点无序列表√有序列表√【案例13】精美电商悬浮框√定义列表√定义列表实现图文混排√列表嵌套的应用√【案例14】二维码名片√list-style-type属性√list-style-image属性√list-style-position属性√list-style属性√背景图像定义列表项目符号√【案例15】电商团购悬浮框√创建超链接√锚点链接√链接伪类控制超链接√【案例16】唱吧导航栏√第六章为网页添加表格和表单（8学时）学习单元为网页添加表格和表单学时8学时学习目标掌握表格标签的应用，能够创建表格并添加表格样式。理解表单的构成，可以快速创建表单。掌握表单相关标签，能够创建具有相应功能的表单控件。掌握表单样式，能够使用表单样式美化表单界面。学习内容知识点了解掌握重点难点创建表格√<table>标签的属性√<tr>标签的属性√<td>标签的属性√<th>标签的属性√表格的结构√CSS控制表格边框√CSS控制单元格边距√CSS控制单元格宽高√【案例17】简历表√认识表单√创建表单√【案例18】用户登录界面√input控件√√【案例19】趣味选择题√textarea控件√select控件√【案例20】空间日志√CSS控制表单样式√√【案例21】员工档案√第七章运用浮动与定位布局（6学时）学习单元运用浮动与定位布局学时6学时学习目标理解元素的浮动，能够使用浮动对网页进行布局。熟悉清除浮动的方法，能够清除浮动的影响。掌握常见的几种定位模式，能够对元素进行精确定位。学习内容知识点了解掌握重点难点认识浮动√【案例22】世界杯梦幻阵容√清除浮动√√【案例23】商品专栏√overflow属性√【案例24】移动端电商界面√认识定位属性√定位类型√z-index层叠等级属性√【案例25】违停查询√认识布局√单列布局√两列布局√三列布局√网页模块命名规范√【案例26】网页布局√第八章全新的网页视听技术（10学时）学习单元全新的网页视听技术学时10学时学习目标掌握HTML5中音频、视频的嵌入方法，能够应用到网页制作中理解过渡属性，能够控制过渡时间、动画快慢等常见过渡效果。掌握变形属性，能够制作2D变形、3D变形效果。掌握动画设置方法，能够熟练制作网页中常见的动画效果。学习内容知识点了解掌握重点难点音视频嵌入技术概述√嵌入视频√嵌入音频√浏览器对音视频文件的兼容性√控制视频宽高√【案例27】电影播放界面√transition-property属性√transition-duration属性√transition-timing-function属性√transition-delay属性√transition属性√【案例28】导航栏悬浮特效√2D变形√3D变形√√【案例29】塔罗牌动画√keyframes√animation-name属性√animation-duration属性√animation-timing-function属性√animation-delay属性√animation-iteration-count属性√animation-direction属性√animation属性√【案例30】魔法阵√第九章简单的JavaScript（8学时）学习单元简单的JavaScript学时10学时学习目标了解什么是JavaScript，掌握JavaScript的特点和引入方式掌握JavaScript基本语法，能够编写简单的JavaScript程序掌握JavaScript中变量的用法，能够声明变量并为变量赋值掌握函数的知识，能够声明和调用函数学习内容知识点了解掌握重点难点认识JavaScript√JavaScript的语法规则√关键字√JavaScript的引入方式√alert()方法√prompt()方法√【案例31】身份验证√DOM简介√√对象√访问节点√设置节点样式√变量√函数√√事件和事件调用√常用的JavaScript事件√【案例32】商城下拉菜单√数据类型√运算符√运算符优先级√条件语句√BOM简介√Date对象√数据类型转换√【案例32】限时秒杀√循环控制语句√跳转语句√数组√【案例34】Tab栏切换效果√第十章实战开发—好趣艺术设计部落首页面（12学时）学习单元实战开发—好趣艺术设计部落首页面学时12学时学习目标学习内容知识点了解掌握重点难点建立站点√站点初始化设置√切片√效果图分析√页面布局√定义公共样式√制作头部和导航√√banner和通告√√主体内容区域√√底部版权区域√五、学时分配章目讲课上机合计第一章网页那点事202第二章从零开始构建HTML页面426第三章使用CSS技术美化网页426第四章运用盒子模型划分网页模块628第五章为网页添加列表和超链接426第六章为网页添加表格和表单628第七章运用浮动和定位布局426第八章全新的网页视听技术8210第九章简单的JavaScript8210第十章实战开发—好趣艺术设计部落首页4812合计50=SUM(ABOVE)24=SUM(ABOVE)74六、考核模式与成绩评定办法本课程为考试课程，期末考试采用