《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】违停查询：“违停查询界面”默认效果鼠标经过第一个“违停坐标”效果[知识点]➢元素的浮动属性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特效。
三、学时分配四、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。
学生的考试成绩由平时成绩（30%）和期末考试（70%）组成，其中，平时成绩包括出勤（5%）、作业（5%）、实验和上机成绩（20%）。
五、选用教材和主要参考书本大纲是根据教材《HTML+CSS+JavaScript网页制作案例教程》所设计的。
六、大纲说明本课程的授课模式为：课堂授课+上机，其中，课堂主要采用多媒体的方式进行授课，并且会通过测试题阶段测试学生的掌握程度；上机主要是制作网页模块，要求学生根据效果图编写网页前台代码。
撰写人：审定人：批准人：执行时间：。