《HTMLCSSJavaScript网页制作案例教程》教学大纲Word文件下载.docx
《《HTMLCSSJavaScript网页制作案例教程》教学大纲Word文件下载.docx》由会员分享，可在线阅读，更多相关《《HTMLCSSJavaScript网页制作案例教程》教学大纲Word文件下载.docx（25页珍藏版）》请在冰豆网上搜索。
认识网页
常见的互联网专业术语
Web标准
HTML简介
CSS简介
JavaScript简介
常用浏览器介绍
Dreamweaver工具的使用
使用Dreamweaver创建第一个页面
[重点]
Dreamweaver工具的使用
[难点]
Dreamweaver工具创建第一个页面
[基本要求]
了解Web标准，明确HTML、CSS及JavaScript在其中的作用。
熟悉Dreamweaver工具的基本操作，能使用Dreamweaver创建简单的网页。
第二章从零开始构建HTML页面（4学时）
[相关案例]
【案例1】简单的网页：
【案例2】新闻页面：
【案例3】图文混排：
HTML文档基本格式
单标记与双标记
标题与段落标记
HTML文档头部相关标记
font标记
标记的属性
文本格式化标记
图像标记
相对路径与绝对路径
常用图像格式
特殊字符标记
相对路径与绝对路径
[学习目标]
掌握HTML文档基本格式，能够书写规范的HTML网页。
掌握标题、段落及文字标记，可以合理地使用它们定义网页元素。
掌握图像标记，学会制作图文混排页面。
第三章使用CSS技术美化网页（8学时）
【案例4】文字Logo：
【案例5】专题栏目：
【案例6】搜索页面：
CSS样式规则
引入CSS样式表
CSS基础选择器
CSS字体样式属性
CSS文本外观属性
CSS复合选择器
CSS层叠性与继承性
CSS优先级
CSS复合选择器
CSS优先级
掌握CSS样式规则，能够书写规范的CSS样式代码。
掌握CSS字体样式及文本外观属性，能够控制页面中的文本样式。
掌握CSS复合选择器，可以快捷选择页面中的元素。
理解CSS层叠性、继承性与优先级，学会高效控制网页元素。
第四章CSS盒子模型（8学时）
【案例7】音乐盒：
【案例8】用户中心：
【案例9】咖啡店banner：
【案例10】图标导航栏：
认识盒子模型
div标记
边框属性
内边距属性
外边距属性
背景属性
元素的类型
span标记
元素的转换
[基本要求]
掌握盒子模型相关属性，能够使用它们熟练地控制网页元素。
理解块元素与行内元素的区别，能够对它们进行转换。
第五章列表与超链接（6学时）
【案例11】精美电商悬浮框：
【案例12】二维码名片：
【案例13】电商团购悬浮框：
【案例14】唱吧导航栏：
唱吧导航栏默认效果
鼠标移上歌曲分类时
无序列表
有序列表
定义列表
定义列表实现图文混排
列表嵌套
list-style复合属性
背景图像定义列表项目符号
超链接标记<
a>
清除超链接图像的边框
链接伪类
锚点链接
掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块。
掌握超链接标记的使用，能够使用超链接定义网页元素。
掌握CSS伪类，会使用CSS伪类实现超链接特效。
第六章HTML表单（6学时）
【案例15】用户登录界面：
【案例16】趣味选择题：
【案例17】空间日志：
【案例18】学员档案：
认识表单
创建表单
input控件
textarea控件
select控件
CSS控制表单样式
理解表单的构成，可以快速创建表单。
掌握表单相关标记，能够创建具有相应功能的表单控件。
掌握表单样式的控制，能够美化表单界面。
第七章浮动与定位（6学时）
【案例19】世界杯梦幻阵容：
【案例20】商品专栏：
【案例21】移动端电商界面：
【案例22】违停查询：
“违停查询界面”默认效果
鼠标经过第一个“违停坐标”效果
元素的浮动属性float
clear属性清除浮动
overflow属性清除浮动
after伪对象清除浮动
overflow属性
元素的定位属性
静态定位
相对定位
绝对定位
固定定位
z-index层叠等级属性
理解元素的浮动，能够使用浮动对网页进行布局。
熟悉清除浮动的方法，能够清除浮动的影响。
掌握常见的几种定位模式，能够对元素进行精确定位。
第八章JavaScript编程基础（8学时）
【案例23】动态获取用户密码：
【案例24】传智商城下拉菜单：
“传智商城”效果展示
“下拉菜单”效果展示
【案例25】计算器：
JavaScript的引入
关键字
变量
prompt（）函数
alert（）函数
console.log（）函数
函数
Array数组对象
DOM节点树
节点的访问
元素对象常用操作
元素属性与内容操作
元素样式操作
数据类型
运算符
运算符优先级
表达式
条件语句
eval（）函数
掌握JavaScript语法规则，能够书写规范的JavaScript代码。
掌握数组的概念，能够熟练使用数组的常用属性和方法。
掌握节点的访问，能够准确访问指定元素和相关元素。
掌握if语句及switch语句，能够灵活运用条件控制语句。
第九章JavaScript事件处理（10学时）
【案例26】电商网站限时秒杀：
限时秒杀
秒杀结束
【案例27】Tab栏切换效果：
Tab栏切换前
Tab栏鼠标悬浮状态
【案例28】台球移动游戏：
台球初始位置
台球移动后的位置
【案例29】用户登陆验证：
用户登陆验证
未输入密码提示
密码输入不一致提示
JavaScript事件
事件处理程序的调用
BOM操作
Date对象
数据类型转换
循环控制语句
跳转语句
鼠标事件
键盘事件
页面事件
事件对象
表单事件
String对象
了解什么是JavaScript事件，能够对事件处理程序进行调用。
掌握JavaScript常用事件，如鼠标事件、表单事件、键盘事件以及页面事件等。
掌握BOM操作，能够使用BOM与浏览器窗口进行交互。
掌握Data对象的常用方法，能够应用Data对象获取当前区域的日期时间字符串。
第十章实战开发—传智播客设计学院首页面（6学时）
[案例展示]
建立站点
站点初始化设置
切片
效果图分析
页面布局
定义公共样式
制作头部和导航
制作banner和通告
制作主体内容区域
制作底部版权区域
掌握站点的建立，能够建立规范的站点。
了解切图工具，能够运用切片裁切效果图。
完成首页面的制作，并能够实现简单的JavaScript特效。
三、学时分配
章目
讲课
实验
上机
合计
第一章网页那点事
2学时
0学时
第二章从零开始构建HTML页面
3学时
1学时
4学时
第三章使用CSS技术美化网页
6学时
8学时
第四章CSS盒子模型
第五章列表与超链接
第六章HTML表单
第七章浮动与定位
第八章JavaScript编程基础
第九章JavaScript事件处理
10学时
第十章实战开发—传智播客设计学院首页面
45学时
19学时
64学时
四、考核模式与成绩评定办法
本课程为考试课程，期末考试采用百分制的闭卷考试模式。
学生的考试成绩由平时成绩（30%）和期末考试（70%）组成，其中，平时成绩包括出勤（5%）、作业（5%）、实验和上机成绩（20%）。
五、选用教材和主要参考书
本大纲是根据教材《HTML+CSS+JavaScript网页制作案例教程》所设计的。
六、大纲说明
本课程的授课模式为：
课堂授课+上机，其中，课堂主要采用多媒体的方式进行授课，并且会通过测试题阶段测试学生的掌握程度；
上机主要是制作网页模块，要求学生根据效果图编写网页前台代码。
撰写人：
审定人：
批准人：
执行时间：
升级会员 