《HTML+CSS+JavaScript网页制作案例教程》教学大纲.docx
《《HTML+CSS+JavaScript网页制作案例教程》教学大纲.docx》由会员分享，可在线阅读，更多相关《《HTML+CSS+JavaScript网页制作案例教程》教学大纲.docx（27页珍藏版）》请在冰豆网上搜索。
《HTML+CSS+JavaScript网页制作案例教程》教学大纲
《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲
（课程英文名称）
课程编号：
201509210011
学分：
5学分
学时：
64学时（其中：
讲课学时：
45上机学时：
19）
先修课程：
计算机基础、计算机网络、计算机应用
后续课程：
UI设计、JavaScript网页特效
适用专业：
信息及其计算机相关专业
开课部门：
计算机系
一、课程的性质与目标
《HTML+CSS+JavaScript网页制作案例教程）》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript编程基础与事件处理等内容。
通过本课程的学习，学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。
二、课程的主要内容及基本要求
第一章网页那点事（2学时）
[知识点]
Ø认识网页
Ø常见的互联网专业术语
ØWeb标准
ØHTML简介
ØCSS简介
ØJavaScript简介
Ø常用浏览器介绍
ØDreamweaver工具的使用
Ø使用Dreamweaver创建第一个页面
[重点]
ØWeb标准
ØDreamweaver工具的使用
[难点]
ØWeb标准
ØDreamweaver工具创建第一个页面
[基本要求]
Ø了解Web标准，明确HTML、CSS及JavaScript在其中的作用。
Ø熟悉Dreamweaver工具的基本操作，能使用Dreamweaver创建简单的网页。
第二章从零开始构建HTML页面（4学时）
[相关案例]
【案例1】简单的网页：
【案例2】新闻页面：
【案例3】图文混排：
[知识点]
ØHTML文档基本格式
Ø单标记与双标记
Ø标题与段落标记
ØHTML文档头部相关标记
Øfont标记
Ø标记的属性
Ø文本格式化标记
Ø图像标记
Ø相对路径与绝对路径
Ø常用图像格式
Ø特殊字符标记
[重点]
ØHTML文档基本格式
Ø标记的属性
Ø图像标记
Ø相对路径与绝对路径
[难点]
Ø相对路径与绝对路径
[学习目标]
Ø掌握HTML文档基本格式，能够书写规范的HTML网页。
Ø掌握标题、段落及文字标记，可以合理地使用它们定义网页元素。
Ø掌握图像标记，学会制作图文混排页面。
第三章使用CSS技术美化网页（8学时）
[相关案例]
【案例4】文字Logo：
【案例5】专题栏目：
【案例6】搜索页面：
[知识点]
ØCSS样式规则
Ø引入CSS样式表
ØCSS基础选择器
ØCSS字体样式属性
ØCSS文本外观属性
ØCSS复合选择器
ØCSS层叠性与继承性
ØCSS优先级
[重点]
ØCSS样式规则
Ø引入CSS样式表
ØCSS复合选择器
ØCSS层叠性与继承性
ØCSS优先级
[难点]
ØCSS复合选择器
ØCSS优先级
[基本要求]
Ø掌握CSS样式规则，能够书写规范的CSS样式代码。
Ø掌握CSS字体样式及文本外观属性，能够控制页面中的文本样式。
Ø掌握CSS复合选择器，可以快捷选择页面中的元素。
Ø理解CSS层叠性、继承性与优先级，学会高效控制网页元素。
第四章CSS盒子模型（8学时）
[相关案例]
【案例7】音乐盒：
【案例8】用户中心：
【案例9】咖啡店banner：
【案例10】图标导航栏：
[知识点]
Ø认识盒子模型
Ødiv标记
Ø边框属性
Ø内边距属性
Ø外边距属性
Ø背景属性
Ø元素的类型
Øspan标记
Ø元素的转换
[重点]
Ødiv标记
Ø边框属性
Ø内边距属性
Ø外边距属性
Ø背景属性
Ø元素的转换
[难点]
Ø背景属性
Ø元素的类型
Ø元素的转换
[基本要求]
Ø掌握盒子模型相关属性，能够使用它们熟练地控制网页元素。
Ø理解块元素与行内元素的区别，能够对它们进行转换。
第五章列表与超链接（6学时）
[相关案例]
【案例11】精美电商悬浮框：
【案例12】二维码名片：
【案例13】电商团购悬浮框：
【案例14】唱吧导航栏：
唱吧导航栏默认效果
鼠标移上歌曲分类时
[知识点]
Ø无序列表
Ø有序列表
Ø定义列表
Ø定义列表实现图文混排
Ø列表嵌套
Ølist-style复合属性
Ø背景图像定义列表项目符号
Ø超链接标记
Ø清除超链接图像的边框
Ø链接伪类
Ø锚点链接
[重点]
Ø无序列表
Ø定义列表
Ø背景图像定义列表项目符号
Ø超链接标记
Ø链接伪类
[难点]
Ø背景图像定义列表项目符号
Ø链接伪类
[基本要求]
Ø掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块。
Ø掌握超链接标记的使用，能够使用超链接定义网页元素。
Ø掌握CSS伪类，会使用CSS伪类实现超链接特效。
第六章HTML表单（6学时）
[相关案例]
【案例15】用户登录界面：
【案例16】趣味选择题：
【案例17】空间日志：
【案例18】学员档案：
[知识点]
Ø认识表单
Ø创建表单
Øinput控件
Øtextarea控件
Øselect控件
ØCSS控制表单样式
[重点]
Øinput控件
Øtextarea控件
Øselect控件
ØCSS控制表单样式
[难点]
Øinput控件
ØCSS控制表单样式
[基本要求]
Ø理解表单的构成，可以快速创建表单。
Ø掌握表单相关标记，能够创建具有相应功能的表单控件。
Ø掌握表单样式的控制，能够美化表单界面。
第七章浮动与定位（6学时）
[相关案例]
【案例19】世界杯梦幻阵容：
【案例20】商品专栏：
【案例21】移动端电商界面：
【案例22】违停查询：
“违停查询界面”默认效果
鼠标经过第一个“违停坐标”效果
[知识点]
Ø元素的浮动属性float
Øclear属性清除浮动
Øoverflow属性清除浮动
Øafter伪对象清除浮动
Øoverflow属性
Ø元素的定位属性
Ø静态定位
Ø相对定位
Ø绝对定位
Ø固定定位
Øz-index层叠等级属性
[重点]
Ø元素的浮动属性float
Øclear属性清除浮动
Øoverflow属性清除浮动
Ø相对定位
Ø绝对定位
[难点]
Øoverflow属性清除浮动
Ø相对定位
Ø绝对定位
[基本要求]
Ø理解元素的浮动，能够使用浮动对网页进行布局。
Ø熟悉清除浮动的方法，能够清除浮动的影响。
Ø掌握常见的几种定位模式，能够对元素进行精确定位。
第八章JavaScript编程基础（8学时）
[相关案例]
【案例23】动态获取用户密码：
【案例24】传智商城下拉菜单：
“传智商城”效果展示
“下拉菜单”效果展示
【案例25】计算器：
[知识点]
ØJavaScript的引入
Ø关键字
Ø变量
Øprompt（）函数
Øalert（）函数
Øconsole.log（）函数
Ø函数
ØArray数组对象
ØDOM节点树
Ø节点的访问
Ø元素对象常用操作
Ø元素属性与内容操作
Ø元素样式操作
Ø数据类型
Ø运算符
Ø运算符优先级
Ø表达式
Ø条件语句
Øeval（）函数
[重点]
Ø变量
Ø函数
ØArray数组对象
ØDOM节点树
Ø节点的访问
Ø元素对象常用操作
Ø元素属性与内容操作
Ø元素样式操作
Ø条件语句
[难点]
ØDOM节点树
Ø节点的访问
Ø元素对象常用操作
Ø元素属性与内容操作
Ø元素样式操作
[基本要求]
Ø掌握JavaScript语法规则，能够书写规范的JavaScript代码。
Ø掌握数组的概念，能够熟练使用数组的常用属性和方法。
Ø掌握节点的访问，能够准确访问指定元素和相关元素。
Ø掌握if语句及switch语句，能够灵活运用条件控制语句。
第九章JavaScript事件处理（10学时）
[相关案例]
【案例26】电商网站限时秒杀：
限时秒杀
秒杀结束
【案例27】Tab栏切换效果：
Tab栏切换前
Tab栏鼠标悬浮状态
【案例28】台球移动游戏：
台球初始位置
台球移动后的位置
【案例29】用户登陆验证：
用户登陆验证
未输入密码提示
密码输入不一致提示
[知识点]
ØJavaScript事件
Ø事件处理程序的调用
ØBOM操作
ØDate对象
Ø数据类型转换
Ø循环控制语句
Ø跳转语句
Ø鼠标事件
Ø键盘事件
Ø页面事件
Ø事件对象
Ø表单事件
ØString对象
[重点]
ØBOM操作
ØDate对象
Ø循环控制语句
Ø跳转语句
Ø鼠标事件
Ø键盘事件
Ø页面事件
Ø事件对象
Ø表单事件
[难点]
Ø鼠标事件
Ø键盘事件
Ø页面事件
Ø事件对象
Ø表单事件
[基本要求]
Ø了解什么是JavaScript事件，能够对事件处理程序进行调用。
Ø掌握JavaScript常用事件，如鼠标事件、表单事件、键盘事件以及页面事件等。
Ø掌握BOM操作，能够使用BOM与浏览器窗口进行交互。
Ø掌握Data对象的常用方法，能够应用Data对象获取当前区域的日期时间字符串。
第十章实战开发—传智播客设计学院首页面（6学时）
[案例展示]
[知识点]
Ø建立站点
Ø站点初始化设置
Ø切片
Ø效果图分析
Ø页面布局
Ø定义公共样式
Ø制作头部和导航
Ø制作banner和通告
Ø制作主体内容区域
Ø制作底部版权区域
[重点]
Ø建立站点
Ø切片
Ø效果图分析
Ø定义公共样式
Ø制作头部和导航
Ø制作banner和通告
Ø制作主体内容区域
Ø制作底部版权区域
[难点]
Ø切片
Ø制作头部和导航
Ø制作banner和通告
Ø制作主体内容区域
[基本要求]
Ø掌握站点的建立，能够建立规范的站点。
Ø了解切图工具，能够运用切片裁切效果图。
Ø完成首页面的制作，并能够实现简单的JavaScript特效。
三、学时分配
章目
讲课
实验
上机
合计
第一章网页那点事
2学时
0学时
2学时
第二章从零开始构建HTML页面
3学时
1学时
4学时
第三章使用CSS技术美化网页
6学时
2学时
8学时
第四章CSS盒子模型
6学时
2学时
8学时
第五章列表与超链接
4学时
2学时
6学时
第六章HTML表单
4学时
2学时
6学时
第七章浮动与定位
4学时
2学时
6学时
第八章JavaScript编程基础
6学时
2学时
8学时
第九章JavaScript事件处理
6学时
4学时
10学时
第十章实战开发—传智播客设计学院首页面
4学时
2学时
6学时
合计
45学时
19学时
64学时
四、考核模式与成绩评定办法
本课程为考试课程，期末考试采用百分制的闭卷考试模式。
学生的考试成绩由平时成绩（30%）和期末考试（70%）组成，其中，平时成绩包括出勤（5%）、作业（5%）、实验和上机成绩（20%）。
五、选用教材和主要参考书
本大纲是根据教材《HTML+CSS+JavaScript网页制作案例教程》所设计的。
六、大纲说明
本课程的授课模式为：
课堂授课+上机，其中，课堂主要采用多媒体的方式进行授课，并且会通过测试题阶段测试学生的掌握程度；上机主要是制作网页模块，要求学生根据效果图编写网页前台代码。
撰写人：
审定人：
批准人：
执行时间：
升级会员 