《HTMLCSSJavaScript网页制作案例教程》教学大纲.doc

博学谷让IT教学更简单，让IT学习更有效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%）和期末考试（