HTML+CSS+JavaScript网页制作案例教程》课程教学大纲.pdf

博学谷——让 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 工具的使用 博学谷——让 IT 教学更简单，让 IT 学习更有效 ? 使用 Dreamweaver 创建第一个页面 [重 点] ? Web 标准 ? Dreamweaver 工具的使用 [难 点] ? Web 标准 ? Dreamweaver 工具创建第一个页面 [基本要求] ? 了解 Web标准，明确 HTML、CSS及 JavaScript在其中的作用。 ? 熟悉 Dreamweaver工具的基本操作，能使用 Dreamweaver创建简单的网页。 第二章 从零开始构建 HTML页面（4学时） [相关案例] 【案例 1】简单的网页： 【案例 2】新闻页面： 【案例 3】图文混排： [知 识 点] ? HTML 文档基本格式 博学谷——让 IT 教学更简单，让 IT 学习更有效 ? 单标记与双标记 ? 标题与段落标记 ? HTML 文档头部相关标记 ? font 标记 ? 标记的属性 ? 文本格式化标记 ? 图像标记 ? 相对路径与绝对路径 ? 常用图像格式 ? 特殊字符标记 [重 点] ? HTML 文档基本格式 ? 标记的属性 ? 图像标记 ? 相对路径与绝对路径 [难 点] ? 相对路径与绝对路径 [学习目标] ? 掌握 HTML文档基本格式，能够书写规范的 HTML网页。 ? 掌握标题、段落及文字标记，可以合理地使用它们定义网页元素。 ? 掌握图像标记，学会制作图文混排页面。 第三章 使用 CSS技术美化网页（8学时） [相关案例] 【案例 4】文字 Logo： 【案例 5】专题栏目： 博学谷——让 IT 教学更简单，让 IT 学习更有效 【案例 6】搜索页面： [知 识 点] ? CSS 样式规则 ? 引入 CSS 样式表 ? CSS 基础选择器 ? CSS 字体样式属性 ? CSS 文本外观属性 ? CSS 复合选择器 ? CSS 层叠性与继承性 ? CSS 优先级 [重 点] ? CSS 样式规则 ? 引入 CSS 样式表 ? CSS 复合选择器 ? CSS 层叠性与继承性 ? CSS 优先级 [难 点] ? CSS 复合选择器 ? CSS 优先级 [基本要求] ? 掌握 CSS样式规则，能够书写规范的 CSS样式代码。 ? 掌握 CSS字体样式及文本外观属性，能够控制页面中的文本样式。 博学谷——让 IT 教学更简单，让 IT 学习更有效 ? 掌握 CSS复合选择器，可以快捷选择页面中的元素。 ? 理解 CSS层叠性、继承性与优先级，学会高效控制网页元素。 第四章 CSS盒子模型（8 学时） [相关案例] 【案例 7】音乐盒： 【案例 8】用户中心： 【案例 9】咖啡店 banner： 博学谷——让 IT 教学更简单，让 IT 学习更有效 【案例 10】图标导航栏： [知 识 点] ? 认识盒子模型 ? div 标记 ? 边框属性 ? 内边距属性 ? 外边距属性 ? 背景属性 ? 元素的类型 ? span 标记 ? 元素的转换 [重 点] ? div 标记