《HTML CSS JAVASCRIPT网页制作案例教程》_教学大纲
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《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】趣味选择题：