《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复合属性背景图像定义列表项目符号超链接标记<a>清除超链接图像的边框链接伪类锚点链接[重点]无序列表定义列表背景图像定义列表项目符号超链接标记<a>链接伪类[难点]背景图像定义列表项目符号链接伪类[基本要求]掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块。
掌握超链接标记的使用，能够使用超链接定义网页元素。
掌握CSS伪类，会使用CSS伪类实现超链接特效。
第六章 HTML表单（6学时）[相关案例]【案例15】用户登录界面：【案例16】趣味选择题：【案例17】空间日志：【案例18】学员档案：[知识点]认识表单创建表单input控件textarea控件select控件CSS控制表单样式[重点]input控件textarea控件select控件CSS控制表单样式[难点]input控件CSS控制表单样式[基本要求]理解表单的构成，可以快速创建表单。
掌握表单相关标记，能够创建具有相应功能的表单控件。
掌握表单样式的控制，能够美化表单界面。
第七章浮动与定位（6学时）[相关案例]【案例19】世界杯梦幻阵容：【案例20】商品专栏：【案例21】移动端电商界面：【案例22】违停查询：“违停查询界面”默认效果鼠标经过第一个“违停坐标”效果[知识点]元素的浮动属性floatclear属性清除浮动overflow属性清除浮动after伪对象清除浮动overflow属性元素的定位属性静态定位相对定位绝对定位固定定位z-index层叠等级属性[重点]元素的浮动属性floatclear属性清除浮动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特效。
三、学时分配四、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。
学生的考试成绩由平时成绩（30%）和期末考试（70%）组成，其中，平时成绩包括出勤（5%）、作业（5%）、实验和上机成绩（20%）。
五、选用教材和主要参考书本大纲是根据教材《HTML+CSS+JavaScript网页制作案例教程》所设计的。
六、大纲说明本课程的授课模式为：课堂授课+上机，其中，课堂主要采用多媒体的方式进行授课，并且会通过测试题阶段测试学生的掌握程度；上机主要是制作网页模块，要求学生根据效果图编写网页前台代码。
撰写人：审定人：批准人：执行时间：。
![《网页设计与制作案例教程》教学大纲[4页]](https://img.taocdn.com/s1/m/3fee5ca603d276a20029bd64783e0912a3167c55.png)