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