《HTML+CSS+JavaScript网页制作案例教程(第2版)》教学大纲.pdf

《《HTML+CSS+JavaScript网页制作案例教程(第2版)》教学大纲.pdf》由会员分享，可在线阅读，更多相关《《HTML+CSS+JavaScript网页制作案例教程(第2版)》教学大纲.pdf（9页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、HTML+CSS+JavaScript 网页制作案例教程（第 2 版）教学大纲 课程编号：学 分：5 学分 学 时：74 学时 （其中：讲课学时：50 学时 上机学时：24 学时）先修课程：计算机基础、计算机网络、计算机应用 后续课程：UI 设计、JavaScript 适用专业：信息技术及其计算机相关专业 开课部门：计算机系 一、课程的性质与目标 HTML+CSS+JavaScript 网页制作案例教程（第 2 版）是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML 标签、CSS 样式、网页布局、变形、动画、JavaScript等内容。通过本课程的学习，学生能够了解网页 web 发展

2、历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局和动态效果，学会制作各种企业、门户、电商类网站。二、课程设计理念与思路 课程设计理念：课程的集中实践教学环节需明确必要理论知识的升华与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。教学整体设计“以技能培养为目标，以案

3、例（项目）任务实现为载体、理论学习与实践操作相结合”。三、教学条件要求 开发工具：Dreamweaver CS6 或其他代码编辑工具 四、课程的主要内容及基本要求 第一章 网页那点事（2 学时）学习单元 网页那点事 学时 2 学时 学习目标 了解 Web 标准，明确 HTML、CSS 及 JavaScript 的作用。熟悉 Dreamweaver 工具的基本操作，能够使用 Dreamweaver 创建简单的网页。学习内容 知识点 了解 掌握 重点 难点 网页的组成 网页名词解释 Web 标准 HTML CSS JavaScript 网页的展示平台浏览器 认识 Dreamweaver 界面 Dr

4、eamweaver 初始化设置 Dreamweaver 基本操作 创建第一个网页 第二章 从零开始构建 HTML 页面（6 学时）学习单元 从零开始构建 HTML 页面 学时 6 学时 学习目标 掌握 HTML 文档基本格式，能够书写规范的 HTML 结构。掌握页面格式化标签的用法，能够合理地使用它们定义网页元素。掌握图像标签，学会制作图文混排页面。学习内容 知识点 了解 掌握 重点 难点 HTML 文档基本结构 标签的分类 标签的关系 标题标签 段落标签 水平线标签 换行标签 【案例 1】简单的网页 标签的属性 HTML 文档头部相关标签 文本样式标签 文本格式化标签 【案例 2】新闻页面

5、常见图像格式 图像标签 相对路径和绝对路径 特殊字符标签 【案例 3】图文混排 第三章 使用 CSS 技术美化网页（6 学时）学习单元 使用 CSS 技术美化网页 学时 6 学时 学习目标 1.掌握 CSS 样式规则，能够书写规范的 CSS 样式代码。2.掌握 CSS 字体样式及文本外观属性，能够控制页面中的文本样式。3.掌握 CSS 复合选择器的使用，可以快捷选择页面中的元素。4.理解 CSS 层叠性、继承性与优先级，学会高效控制网页元素。学习内容 知识点 了解 掌握 重点 难点 认识 CSS CSS 样式规则 引入 CSS 样式表 CSS 基础选择器 【案例 4】文字 Logo CSS 字

6、体样式属性 CSS 文本外观属性 【案例 5】美食专题栏目 CSS 复合选择器 CSS 层叠性和继承性 CSS 优先级 【案例 6】搜索页面 第四章 运用盒子模型划分网页模块（8 学时）学习单元 运用盒子模型划分网页模块 学时 8 学时 学习目标 掌握盒子的相关属性，能够制作常见的盒子模型效果。掌握背景属性的设置方法，能够设置背景颜色和图像。理解渐变属性的原理，能够设置渐变背景。掌握元素类型的分类，能够进行元素类型的转换。学习内容 知识点 了解 掌握 重点 难点 认识盒子模型 标签 边框属性 【案例 7】音乐盒 内边距属性 外边距属性 盒子的宽与高 【案例 8】用户中心 设置背景颜色 设置背景

7、图像 设置背景图像平铺 设置背景图像的位置 设置背景图像固定 综合设置元素的背景 【案例 9】咖啡店 banner 元素的类型 标签 元素类型的转换 【案例 10】图标导航栏 颜色透明度 图片边框 阴影 渐变 【案例 11】创意画框 圆角 多背景图像 【案例 12】拼图效果 第五章 为网页添加列表和超链接（6 学时）学习单元 为网页添加列表和超链接 学时 6 学时 学习目标 掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块。掌握超链接标签的使用，能够使用超链接定义网页元素。掌握 CSS 伪类，会使用 CSS 伪类实现超链接特效。学习内容 知识点 了解 掌握 重点 难点 无序列表 有序

8、列表 【案例 13】精美电商悬浮框 定义列表 定义列表实现图文混排 列表嵌套的应用 【案例 14】二维码名片 list-style-type 属性 list-style-image 属性 list-style-position 属性 list-style 属性 背景图像定义列表项目符号 【案例 15】电商团购悬浮框 创建超链接 锚点链接 链接伪类控制超链接 【案例 16】唱吧导航栏 第六章 为网页添加表格和表单（8 学时）学习单元 为网页添加表格和表单 学时 8 学时 学习目标 掌握表格标签的应用，能够创建表格并添加表格样式。理解表单的构成，可以快速创建表单。掌握表单相关标签，能够创建具有相应

9、功能的表单控件。掌握表单样式，能够使用表单样式美化表单界面。学习内容 知识点 了解 掌握 重点 难点 创建表格 标签的属性 标签的属性 标签的属性 标签的属性 表格的结构 CSS 控制表格边框 CSS 控制单元格边距 CSS 控制单元格宽高 【案例 17】简历表 认识表单 创建表单 【案例 18】用户登录界面 input 控件 【案例 19】趣味选择题 textarea 控件 select 控件 【案例 20】空间日志 CSS 控制表单样式 【案例 21】员工档案 第七章 运用浮动与定位布局（6 学时）学习单元 运用浮动与定位布局 学时 6 学时 学习目标 理解元素的浮动，能够使用浮动对网页进

10、行布局。熟悉清除浮动的方法，能够清除浮动的影响。掌握常见的几种定位模式，能够对元素进行精确定位。学习内容 知识点 了解 掌握 重点 难点 认识浮动 【案例 22】世界杯梦幻阵容 清除浮动 【案例 23】商品专栏 overflow 属性 【案例 24】移动端电商界面 认识定位属性 定位类型 z-index 层叠等级属性 【案例 25】违停查询 认识布局 单列布局 两列布局 三列布局 网页模块命名规范 【案例 26】网页布局 第八章 全新的网页视听技术（10 学时）学习单元 全新的网页视听技术 学时 10 学时 学习目标 掌握 HTML5 中音频、视频的嵌入方法，能够应用到网页制作中 理解过渡属性

11、，能够控制过渡时间、动画快慢等常见过渡效果。掌握变形属性，能够制作 2D 变形、3D 变形效果。掌握动画设置方法，能够熟练制作网页中常见的动画效果。学习内容 知识点 了解 掌握 重点 难点 音视频嵌入技术概述 嵌入视频 嵌入音频 浏览器对音视频文件的兼容性 控制视频宽高 【案例 27】电影播放界面 transition-property 属性 transition-duration 属性 transition-timing-function属性 transition-delay 属性 transition 属性 【案例 28】导航栏悬浮特 效 2D 变形 3D 变形 【案例 29】塔罗牌动画

12、keyframes animation-name 属性 animation-duration 属性 animation-timing-function属性 animation-delay 属性 animation-iteration-count属性 animation-direction 属性 animation 属性 【案例 30】魔法阵 第九章 简单的 JavaScript（8 学时）学习单元 简单的 JavaScript 学时 10 学时 学习目标 了解什么是 JavaScript，掌握 JavaScript 的特点和引入方式 掌握 JavaScript 基本语法，能够编写简单的 Jav

13、aScript 程序 掌握 JavaScript 中变量的用法，能够声明变量并为变量赋值 掌握函数的知识，能够声明和调用函数 学习内容 知识点 了解 掌握 重点 难点 认识 JavaScript JavaScript 的语法规则 关键字 JavaScript 的引入方式 alert()方法 prompt()方法 【案例 31】身份验证 DOM 简介 对象 访问节点 设置节点样式 变量 函数 事件和事件调用 常用的 JavaScript 事件 【案例 32】商城下拉菜单 数据类型 运算符 运算符优先级 条件语句 BOM 简介 Date 对象 数据类型转换 【案例 32】限时秒杀 循环控制语句 跳

14、转语句 数组 【案例 34】Tab 栏切换效果 第十章 实战开发好趣艺术设计部落首页面（12 学时）学习单元 实战开发好趣艺术设计部落首页面 学时 12 学时 学习目标 学习内容 知识点 了解 掌握 重点 难点 建立站点 站点初始化设置 切片 效果图分析 页面布局 定义公共样式 制作头部和导航 banner 和通告 主体内容区域 底部版权区域 五、学时分配 章目 讲课 上机 合计 第一章 网页那点事 2 0 2 第二章 从零开始构建 HTML 页面 4 2 6 第三章 使用 CSS 技术美化网页 4 2 6 第四章 运用盒子模型划分网页模块 6 2 8 第五章 为网页添加列表和超链接 4 2

15、6 第六章 为网页添加表格和表单 6 2 8 第七章 运用浮动和定位布局 4 2 6 第八章 全新的网页视听技术 8 2 10 第九章 简单的 JavaScript 8 2 10 第十章 实战开发好趣艺术设计部落首页 4 8 12 合计 50 24 74 六、考核模式与成绩评定办法 本课程为考试课程，期末考试采用百分制的闭卷考试模式。学生的考试成绩由平时成绩（30%）和期末考试（70%）组成，其中，平时成绩包括出勤（5%）、作业（5%）、上机成绩（20%）。七、选用教材和主要参考书 本大纲是根据教材HTML5+CSS3 网页设计与制作所设计的。参考书籍：八、大纲说明 本课程的授课模式为：课堂授课+上机，其中，课堂主要采用多媒体的方式进行授课，并且会通过测试题阶段测试学生的掌握程度；上机主要是编写程序，要求学生动手完成指定的程序设计或验证。