网页设计-职业技术学院单元教学设计.doc

网页设计-职业技术学院单元教学设计
******职业技术学院单元教学设计

一、教案头
本次课标题：第3讲 网页超链接
课程名称
网页设计
授课教师

所属系部
信息工程系
授课班级

上课时间
2学时
授课地点

教
学
目
标
能力目标
知识目标
①用超链接实现网页页面的联系
②用各种链接技术实现页面的跳转

①掌握内部链接的形式与创建
②掌握外部链接、邮件链接、锚点链接 下载链接

能力训练的任务与案例

任务一：制作学校网站招生信息栏 栏目
任务二：制作美食网站 链接页面

参
考
资
料

赵峰.网页设计与制作（html5+CSS+Javascript）.北京:清华大学出版社,2010
刘瑞新等.网页设计与制作.北京:机械工业出版社,2013
互联网上的各种相关网站和网页

二、教学设计
步 骤
教学内容
教学方法
教学手段
学生活动
时间分配
引入
1、 超链接在网页制作中的重要性 ？
2、 展示各种超链接
3、 交待本节课任务和能力目标
讲授
设问
演示
发问
概述
思考
讨论
回答
5分钟
告知
本节课的主要内容是掌握各种超链接的制作方法与运用，并能独立设计制作链接页面
讲授
课件

5分钟
操练
第一步：新建网站栏目
第二步：新建栏目主页
第三步：设置页面属性　　第四步：制作栏目的信息栏
第五步：制作栏目主体信息
第六步：制作栏目最新新闻
第七步：制作更多信息页面
第八步：制作新闻详细信息内容页面
第九步：制作招生信息栏目页面之间的超链接

示范演示启发诱导个别讲解重点辅导
课件
思考
自学
操作
提问
讨论
20分钟

深化
学生完成招生信息页面的制作
操练
个别辅导
讨论
操作
30分钟
归纳
1、内部链接 ：同一目录、下一级目录、 上一级目录、同级目录
2、文字链接
3、图片链接
4、外部链接
5、邮件链接
6、锚点链接
7、下载链接
归纳总结
课件或软件操作界面
思考
回答
5分钟
训练
训练项目：能学校网站招生信息页面制作

启发诱导个别辅导
任务驱动
操作
10分钟
总结
本次课主要讲解超链接在网页中的应用
讲授
课件或案例

5分钟
作业
完成美食网站的超链接

5分钟
小结

******职业技术学院单元教学设计

一、教案头
本次课标题：第4讲 表格网页布局
课程名称
网页设计
授课教师

所属系部
信息工程系
授课班级

上课时间
2学时
授课地点

教
学
目
标
能力目标
知识目标
①用表格布局制作一个网页
②用内部连接技术实现页面的跳转

①掌握表格的属性
②掌握单元格的行列属性
③掌握表格的基本属性

能力训练的任务与案例

任务一：制作学校网站就业信息展示页面
任务二：制作美食图库页面

参
考
资
料

赵峰.网页设计与制作（html5+CSS+Javascript）.北京:清华大学出版社,2010
刘瑞新等.网页设计与制作.北京:机械工业出版社,2013
互联网上的各种相关网站和网页

二、教学设计
步 骤
教学内容
教学方法
教学手段
学生活动
时间分配
引入
1、 表格在网页制作中的运用？
2、 展示表格布局的网页
3、 交待本节课任务和能力目标
讲授
设问
演示
发问
概述
思考
讨论
回答
5分钟
告知
本节课的主要内容是掌握表单的制作方法与属性，并能独立设计制作表单页面
讲授
课件

5分钟
操练
第一步：新建网站栏目
第二步：新建栏目主页
第三步：设置页面属性　　第四步：利用表格制作栏目的信息栏
第五步：制作栏目最新新闻
第六步：制作更多信息页面
第七步：制作新闻详细内容页面
第八步：制作就业信息栏目之间的超连接
第八步：保存并预览网页

示范演示启发诱导重点讲解个别辅导
课件
思考
自学
操作
提问
讨论
20分钟

深化
学生完成就业信息页面的制作
操练
个别辅导
讨论
操作
30分钟
归纳
1、表格属性：
行、列、填充、间距、对齐、边框、类等等
2、单元格属性：对齐、背景颜色、合并单元格拆分单元格
3、表格基本操作
归纳总结
课件或软件操作界面
思考
回答
5分钟
训练
训练项目：能学校网站就业信息页面

启发诱导个别辅导
任务驱动
操作
10分钟
总结
本次课主要讲解表格在网页中的应用，包括利用表格布局网页
讲授
课件或案例

5分钟
作业
完成课后练习并预习下一节

5分钟
小结

******职业技术学院单元教学设计

一、教案头
本次课标题：第5 讲 表格布局网页综合
课程名称
网页设计
授课教师

所属系部
信息工程系
授课班级

上课时间
4学时
授课地点

教
学
目
标
能力目标
知识目标
①用表格布局制作网站首页
②用表格嵌套技术的运用注意事项

①掌握表格的宽度的固定
②掌握单元格的对齐方式
③掌握表格布局的具体流程

能力训练的任务与案例

任务一：制作学校网站首页页面
任务二：制作美食图库首页页面

参
考
资
料

赵峰.网页设计与制作（html5+CSS+Javascript）.北京:清华大学出版社,2010
刘瑞新等.网页设计与制作.北京:机械工业出版社,2013
互联网上的各种相关网站和网页

二、教学设计
步 骤
教学内容
教学方法
教学手段
学生活动
时间分配
引入
1、 表格在网页布局中的运用？
2、 展示网站表格布局方案
3、 交待本节课任务和能力目标
讲授
设问
演示
发问
概述
思考
讨论
回答
5分钟
告知
本节课的主要内容是掌握表格制作页面框架的方法，并能独立完成网站首页页面制作
讲授
课件

5分钟
操练
在画好表格布局的前提下对各栏目进行规划性讲解和个示范
第一步：新建网页
第二步：设置页面属性
第三步：制作首页广告条　　第四步：利用首页的导航栏
第五步：制作欢迎信息栏
第六步：制作主体内容左侧栏目的布局表格
第七步：制作用户登陆栏目
第八步：制作栏目之间的分隔空隙
第九步：制作有情连接
等等
示范演示启发诱导个别讲解重点辅导
课件
思考
自学
操作
提问
讨论
20分钟

深化
学生完成首页页面的制作
操练
个别辅导
讨论
操作
给予充分时间 完成
归纳
1、网页宽度确定要准确：
2、最外层表格的宽度很重要
3、单元格垂直对齐方式很重要
4、不同栏目之间的表格布局应预留一定空隙
5、页面中正文字体大小设置统一
归纳总结
案例展示
思考
回答
5分钟
训练
训练项目：能完成美食网站首页布局

启发诱导个别辅导
任务驱动
操作
10分钟
总结
本次课主要讲解利用表格进行布局网页
讲授
课件或项目

5分钟
作业
完成课后练习并预习下一节

5分钟
小结

******职业技术学院单元教学设计

一、教案头
本次课标题：第6讲 表单页面
课程名称
网页设计
授课教师

所属系部
信息工程系
授课班级

上课时间
2学时
授课地点

教
学
目
标
能力目标
知识目标
①用表格布局制作一个网页
②用表格嵌套与叠加制作复杂网页

①掌握表格的插入
②掌握单元格的相关操作

能力训练的任务与案例

任务一：搭建web网站
任务二：网上商城注册页面
任务三：自己选择一个注册页面的设计与制作
参
考
资
料

赵峰.网页设计与制作（html5+CSS+Javascript）.北京:清华大学出版社,2010
刘瑞新等.网页设计与制作.北京:机械工业出版社,2013
互联网上的各种相关网站和网页

二、教学设计
步 骤
教学内容
教学方法
教学手段
学生活动
时间分配
引入
1、 表单页面的意义？
2、 表单的用途
3、 交待本节课案例任务和能力目标
讲授
设问
演示
发问
概述
思考
讨论
回答
5分钟
告知
本节课的主要内容是掌握表单的制作方法与属性，并能独立设计制作表单页面
讲授
课件

5分钟
操练
第一步：演示并讲解注册网页。
第二步：分步演示并讲解、制作表单元素。）
第三步：分析并制作网页。　　第四步：操作小结。

示范演示启发诱导重点讲解个别辅导
课件
思考
自学
操作
提问
讨论
40分钟

深化
学生完成表单页面制作作业
操练
个别辅导
讨论
操作
5分钟
归纳
表单属性：
1、 文字域 text
2、密码域 password
3、 文件域 file
4、复选框 checkbox
5、单选按钮 radio
6、普通按钮 button
7、提交按钮 submit
8、重置按钮 reset
9、菜单与下拉列表 select 、 option
归纳总结
课件
思考
回答
5分钟
训练
训练项目：能制作大学网站用户注册页面

启发诱导个别辅导
课件
操作
10分钟
总结
本次课主要讲解表单在网页中的应用，包括 表单元素的各项属性
讲授
课件

5分钟
作业
完成课后练习并预习CSS

课件

5分钟
后记

******职业技术学院单元教学设计

一、教案头
本次课标题：第 讲 CSS网页内部样式
课程名称
网页设计
授课教师

所属系部
信息工程系
授课班级

上课时间
2学时
授课地点

教
学
目
标
能力目标
知识目标
①用css进行改善现有网站
②用css样式表进行导航菜单制作

①掌握CSS的基本概念
②掌握CSS样式定义
③掌握CSS常用属性与值

能力训练的任务与案例

任务一：制作学校网站导航条菜单
任务二：给美食的网站运用所学的CSS样式进行导航菜单改善
参
考
资
料

赵峰.网页设计与制作（html5+CSS+Javascript）.北京:清华大学出版社,2010
刘瑞新等.网页设计与制作.北京:机械工业出版社,2013
互联网上的各种相关网站和网页

二、教学设计
步 骤
教学内容
教学方法
教学手段
学生活动
时间分配
引入
1、 网页布局css+div？
2、 Css内部样式的学习
3、 交待本节课案例任务和能力目标
讲授
设问
演示
发问
概述
思考
讨论
回答
5分钟
告知
本节课的主要内容是掌握CSS样式的优势与使用，并能独立设计运用它改善已有网站
讲授
课件

5分钟
操练
第一步：演示并讲解用CSS样式制作的网页　　　　　　　　　　　　
第二步：分步演示并讲解CSS样式的基本概念　　　　　　　　　　　
第三步：讲解并分析CSS常用属性与值　　　　　　　　　　　　　　
第四步：结合CSS内部样式的使用制作网页　　　　　　　　　　　　　　　　　　　

示范演示启发诱导重点讲解个别辅导
课件
思考
自学
操作
提问
讨论
20分钟

深化
学生完成CSS内部样式制作网页
操练
个别辅导
讨论
操作
30分钟
归纳
一、CSS规则
二、CSS 样式定义
1 、 CSS 的类型 　　
2 、定义内部样式表
3 、链接样式表
4 、 CSS 的基本写法
三、CSS 常用属性与值
　1 、字体属性　2 、颜色与背景属性　３、文本属性　　４、边框和布局属性　　
归纳总结
课件
思考
回答
5分钟
训练
训练项目：对学校网站进行CSS内部样式运用

启发诱导个别辅导
课件
操作
15分钟
总结
本次课主要讲解CSS内部样式在网页中的应用，包括CSS的样式与属性
讲授
课件

5分钟
作业
运用CSS内部样式美食网站导航菜单的制作

课件

后记

******职业技术学院单元教学设计
一、教案头
本次课标题：第 讲 CSS网页外部样式
课程名称
网页设计
授课教师

所属系部
信息工程系
授课班级

上课时间
2学时
授课地点

教
学
目
标
能力目标
知识目标
①用CSS外部样式改善网站样式
②能熟练进行CSS外部与内部样式的转换

①掌握CSS的外部样式创建
②掌握CSS外部样式的链接
③掌握html标签样式

能力训练的任务与案例

任务一：创建学校网站样式
任务二：创建美食网站样式

参
考
资
料

赵峰.网页设计与制作（html5+CSS+Javascript）.北京:清华大学出版社,2010
刘瑞新等.网页设计与制作.北京:机械工业出版社,2013
互联网上的各种相关网站和网页

二、教学设计
步 骤
教学内容
教学方法
教学手段
学生活动
时间分配
引入
1、 什么是外部样式，他的优势？
2、 交待本节课案例任务和能力目标
讲授
设问
演示
发问
概述
思考
讨论
回答
5分钟
告知
本节课的主要内容是掌握CSS外部样式的创建与使用，并能独立设计运用它改善已有网站
讲授
课件

5分钟
操练
第一步：演示并讲解用CSS外部样式的创建　　　　　　　　　　　　
第二步：分步演示并讲解链接外部样式　　　　　　　　　　　
第三步：演示学校网站CSS样式的使用步骤　　　　　　　　
第四步：结合CSS内外部样式的特点进行转换　　　　　　　　　　　　　　　　　　

示范演示启发诱导重点讲解个别辅导
课件
思考
自学
操作
提问
讨论
30分钟

深化
学生完成css内部外部样式的转换
操练
个别辅导
讨论
操作
20分钟
归纳
1、 仅应用于一个HTML元素样式的创建
2、 html标签样式的创建与重定义
3、 创建链接样式
4、 样式的应用
5、 创建自定义样式

归纳总结
课件
思考
回答
5分钟
训练
训练项目：能制作美食网站的CSS美化

启发诱导个别辅导
课件
操作
15分钟
总结
本次课主要讲解CSS样式在网页中的应用，包括CSS的样式与属性
讲授
课件

5分钟
作业
完成课后练习P166(参考机械出版社)

课件

后记

******职业技术学院单元教学设计
一、教案头
本次课标题：第 讲 DIV元素定位和布局
课程名称
网页设计
授课教师

所属系部
信息工程系
授课班级

上课时间
2学时
授课地点

教
学
目
标
能力目标
知识目标
① 用浮动定位进行网页布局
② 能用position属性进行网页布局

① 掌握浮动定位与清除
② 掌握postion属性中的absolute与relative
③ 边框 边距 填充

能力训练的任务与案例

任务一：运用浮动定位进行相册页面的设计
任务二：运用position定位实现顶部页面效果

参
考
资
料

赵峰.网页设计与制作（html5+CSS+Javascript）.北京:清华大学出版社,2010
刘瑞新等.网页设计与制作.北京:机械工业出版社,2013
互联网上的各种相关网站和网页

二、教学设计
步 骤
教学内容
教学方法
教学手段
学生活动
时间分配
引入
1、 Float、position在网页布局中的重要性
2、 交待本节课案例任务和能力目标
讲授
设问
演示
发问
概述
思考
讨论
回答
5分钟
告知
本节课的主要内容是掌握float定位与position布局方法，并能运用独立设计网站页面布局
讲授
课件

5分钟
操练
第一步：演示并讲解用div元素定位的方法　　　　　　　　　　　　
第二步：分步演示并讲解博客网站运用float定位和positon属性定位的方法　　　　　　　　　　　
第三步：演示案例网站布局的效果　　　　　　　
第四步：网站发布测试　　　　　　　　　　　　　　　　　　

示范演示启发诱导重点讲解个别辅导
课件
思考
自学
操作
提问
讨论
30分钟

深化
学生完成学校网站DIV
布局
操练
个别辅导
讨论
操作
给予充分时间完成
归纳
1、Float属性值left、right、none、inherit
2、position属性absolute、relative
3、border style属性值
4、margin 边距
5、padding填充

归纳总结
课件
思考
回答
5分钟
训练
训练项目：学校网站的div元素定位

启发诱导个别辅导
课件
操作
15分钟
总结
本次课主要讲解DIV定位元素在网页布局中的应用
讲授
课件

5分钟
作业
完成课后练习P181(参考机械出版社)

课件

后记

******职业技术学院单元教学设计
一、教案头
本次课标题：第 讲 DIV+CSS布局页面
课程名称
网页设计
授课教师

所属系部
信息工程系
授课班级

上课时间
4学时
授课地点

教
学
目
标
能力目标
知识目标
①用DIV+CSS进行网页布局
②能熟练进行CSS进行网页美化

① 掌握div单行单列、两列式、三列式布局
② 掌握css网页美化如：背景样式控制、段落与字体样式设计、图片样式控制、多种CSS滤镜
③掌握导航菜单与超链接

能力训练的任务与案例

任务一：运用css+div进行个人博客页面布局的设计
任务二：美食网站导航区创建与css美化

参
考
资
料

赵峰.网页设计与制作（html5+CSS+Javascript）.北京:清华大学出版社,2010
刘瑞新等.网页设计与制作.北京:机械工业出版社,2013
互联网上的各种相关网站和网页

二、教学设计
步 骤
教学内容
教学方法
教学手段
学生活动
时间分配
引入
1、 Div在网页布局中的重要性
2、 交待本节课案例任务和能力目标
讲授
设问
演示
发问
概述
思考
讨论
回答
5分钟
告知
本节课的主要内容是掌握div布局方法，并能运用div标签独立设计网站页面布局并进行美化
讲授
课件

5分钟
操练
第一步：演示并讲解用div创建页面布局的种类　　　　　　　　　　　　
第二步：分步演示并讲解博客网站运用div标签和css定位属性布局的思路　　　　　　　　　　　
第三步：演示博客网站布局的步骤　　　　　　　
第四步：网站发布测试　　　　　　　　　　　　　　　　　　

示范演示启发诱导重点讲解个别辅导
课件
思考
自学
操作
提问
讨论
30分钟

深化
学生完成博客网站布局
操练
个别辅导
讨论
操作
给予充分时间完成
归纳
1、Body{}页面整体
2、#container{}页面层容器
3、#header{}页面头部
4、#pagebody{}页面主体
5、#sidbar {}侧边栏
6、#mainbody{}主体内容
7、footer{} 页面底部

归纳总结
课件
思考
回答
5分钟
训练
训练项目：美食网站的div布局

启发诱导个别辅导
课件
操作
15分钟
总结
本次课主要讲解DIV在网页布局中的应用，包括CSS的样式
讲授
课件

5分钟
作业
完成课后练习P255(参考清华大学出版社)

课件

后记

******职业技术学院单元教学设计
一、教案头
本次课标题：第 讲 APdiv spry标签网页布局
课程名称
网页设计
授课教师

所属系部
信息工程系
授课班级

上课时间
4学时
授课地点

教
学
目
标
能力目标
知识目标
① 运用AP div布局
② 运用spry布局
③ 网页中多媒体的运用　　　

① 掌握P div标签的含义与使用
② 掌握spry的布局方法
③ 掌握多媒体的输入
④ 掌握PS切片布局设计

能力训练的任务与案例

任务一：运用SPRY进行爱丽丝页面的设计
任务二：个人网站页ps切片局设计

参
考
资
料

赵峰.网页设计与制作（html5+CSS+Javascript）.北京:清华大学出版社,2010
刘瑞新等.网页设计与制作.北京:机械工业出版社,2013
互联网上的各种相关网站和网页

二、教学设计
步 骤
教学内容
教学方法
教学手段
学生活动
时间分配
引入
1、 AP Div以与spry在网页布局中的重要性
2、 交待本节课案例任务和能力目标
讲授
设问
演示
发问
概述
思考
讨论
回答
5分钟
告知
本节课的主要内容是掌握d高级布局方法，并能运用独立设计网站布局
讲授
课件

5分钟
操练
第一步：演示并讲解用AP div以与spry创建页面布局的方法　　　　　　　　　　　　
第二步：分步演示并讲解爱丽丝网站运用AP div以与spry布局的思路　　　　　　　　　　　
第三步：演示个人网站布局的步骤　　　　　　　
第四步：网站发布测试　　　　　　　　　　　　　　　　　　

示范演示启发诱导重点讲解个别辅导
课件
思考
自学
操作
提问
讨论
30分钟

深化
学生完成爱丽丝与个人网站布局
操练
个别辅导
讨论
操作
给予充分时间完成
归纳
1、AP div属性面板
2、#spry菜单栏效果
3、spry选项卡式面板
4、spry折叠式
5、网页中swf
6、网页中flv视频
7、Photoshop切片

归纳总结
课件
思考
回答
5分钟
训练
训练项目：美食网站的div布局

启发诱导个别辅导
课件
操作
15分钟
总结
本次课主要讲解DIV在网页布局中的应用，包括CSS的样式
讲授
课件

5分钟
作业
完成课后练习P269(参考机械出版社)

课件

后记

******职业技术学院单元教学设计
一、教案头
本次课标题：第 讲 css3提高
课程名称
网页设计
授课教师

所属系部
信息工程系
授课班级

上课时间
学时
授课地点

教
学
目
标
能力目标
知识目标
① 运用css3盒布局进行网页布局
② 灵活运用resize进行UI设计
③ Css3中多列布局的运用
④ CSS3页面美化　　　

① 掌握P div标签的含义与使用
② 掌握spry的布局方法
③ 掌握多媒体的输入
④ 掌握PS切片布局设计

能力训练的任务与案例

任务一：运用盒布局进行典型网页布局的设计
任务二：个人网站css3美化

参
考
资
料

赵峰.网页设计与制作（html5+CSS+Javascript）.北京:清华大学出版社,2010
刘瑞新等.网页设计与制作.北京:机械工业出版社,2013
互联网上的各种相关网站和网页

二、教学设计
步 骤
教学内容
教学方法
教学手段
学生活动
时间分配
引入
1、 CSS3在网页的新特性
2、 交待本节课案例任务和能力目标
讲授
设问
演示
发问
概述
思考
讨论
回答
5分钟
告知
本节课的主要内容是掌握CSS3新增功能与css3布局样式，并能运用独立设计网站布局
讲授
课件

5分钟
操练
第一步：演示并讲解用CSS3新增功能与选择器　　　　　　　　　　　　
第二步：分步演示并讲解运用盒布局进行网页布局的思路　　　　　　　　　　　
第三步：演示盒子布局溢出、影阴、尺寸等解决方法　　　　　　　
第四步：UI设计问题解决
第五步：css3页面美化新增属性演示　　　　　　　　　　　　　　　　　　

示范演示启发诱导重点讲解个别辅导
课件
思考
自学
操作
提问
讨论
30分钟

深化
学生完成个人网站CSS3美化与布局
操练
个别辅导
讨论
操作
给予充分时间完成
归纳
1、CSS3新增功能
2、结构类伪类选择器
3、UI元素状态伪类选择器
4、盒布局
5、UI元素设计自由缩放、定义外廓线
6、多列布局
7、CSS3文本影阴、溢出、换行、外部字体引入、边框

归纳总结
课件
思考
回答
5分钟
训练
训练项目：现有网站的CSS3布局与美化

启发诱导个别辅导
课件
操作
15分钟
总结
本次课主要讲解CSS3的新特性与运用
讲授
课件

5分钟
作业
完成课后练习P303(参考清华大学出版社)

课件

后记

******职业技术学院单元教学设计
一、教案头
本次课标题：第 讲 Javascript
课程名称
网页设计
授课教师

所属系部
信息工程系
授课班级

上课时间
4学时
授课地点

教
学
目
标
能力目标
知识目标
① 网页弹出窗口的制作
② 利用Javascript实现幻灯片播放图片的效果
③ 表单验证功能的使用

① 网页中插入javaSCRIPT的方法
② 利用行为对象制作弹出窗口
③ 常用javascript特效图片循环滚动、幻灯片切换的实现
④ 表单验证

能力训练的任务与案例

任务一：图片轮播器
任务二：滚动图片 文字
任务三：表单验证

参
考
资
料
赵峰.网页设计与制作（html5+CSS+Javascript）.北京:清华大学出版社,2010
刘瑞新等.网页设计与制作.北京:机械工业出版社,2013
互联网上的各种相关网站和网页
二、教学设计
步 骤
教学内容
教学方法
教学手段
学生活动
时间分配
引入
Javascript在网页设计中的重要意义
展示
演示
赏析
5分钟
告知
本节课的主要内容是javascript的使用并能做出常见的网页效果
讲授
展示

5分钟
操练
第一步：讲解javascript特点与网页中插入javascript的方法
第二步：讲解行为的概念与行为面板的使用　　　　　　　　　　　　
第二步：分步演示并讲解学校网站首页弹出窗口页面　　　　　　　　　　　
第三步：讲解对象事件的分类与常用的事件
第四步：演示循环滚动图片广告的制作方法
第五步：学生完成项目任务　　　　　　　　　　　　　　　　
示范演示启发诱导重点讲解个别辅导
项目案例
思考
自学
操作
提问
讨论
30分钟

深化
幻灯片轮播器制作
表单验证
操练
个别辅导
讨论
操作
给予充分时间完成
归纳
1、html文档嵌入脚本、链接脚本文件
2、利用行为面板设置弹出窗口页面
3、利用行为面板制作广告页面欢迎信息
4、对象事件分类
5、字幕属性
6、幻灯片播放参数
7、表单验证requie、pattern、checkvality、max、min
归纳总结
课件
思考
回答
5分钟
训练
训练项目：学校网站的幻灯片播放器制作
启发诱导个别辅导
课件
操作
15分钟
总结
本次课主要讲解javascript的特性与运用
讲授
课件

5分钟
作业
完成课后练习P335(参考清华大学出版社)

课件

后记

******职业技术学院单元教学设计
一、教案头
本次课标题：第 讲 模板制作与运用
课程名称
网页设计
授课教师

所属系部
信息工程系
授课班级

上课时间
2学时
授课地点

教
学
目
标
能力目标
知识目标
① 运用现有html文档进行模板创建
② 基于模板创建文档
③ 库项目的使用
④ 更新模板与裤　　

① 掌握模板的含义与使用
② 掌握库的使用方法

能力训练的任务与案例

任务一：教育信息模板的创建
任务二：版权信息栏目库的创建

参
考
资
料

赵峰.网页设计与制作（html5+CSS+Javascript）.北京:清华大学出版社,2010
刘瑞新等.网页设计与制作.北京:机械工业出版社,2013
互联网上的各种相关网站和网页

二、教学设计
步 骤
教学内容
教学方法
教学手段
学生活动
时间分配
引入
1、 模板在网页设计中的重要性
2、 交待本节课项目任务和能力目标
讲授
设问
演示
发问
概述
思考
讨论
回答
5分钟
告知
本节课的主要内容是掌握模板的使用并能做出利用模板创建网页
讲授
课件

5分钟
操练
第一步：演示并讲解模板的特点与在网页中创建与定义可编辑区域的方法　　　　　
第二步：分步演示并讲解大学网站“教育创新栏目”模板的操作　　　　　　　　　　　
第三步：讲解库的概念　　　　　　
第四步：分步演示并讲解版权信息库项目的创建与使用
第五步：学生操作　　　　　　　　　　　　　　　　　　
示范演示启发诱导重点讲解个别辅导
课件
思考
自学
操作
提问
讨论
30分钟

深化
学生完成学校网站中教育创新栏目的模板创建、版权信息 库的创建
操练
个别辅导
讨论
操作
给予充分时间完成
归纳
1、基于选定内容创建库项目
2、创建空白库项目
3、基于现有文档创建模板
4、使用文件菜单创建空模板
5、定义可编辑区域
6、删除可编辑区域
7、保存模板
归纳总结
课件
思考
回答
5分钟
训练
训练项目：学校网站教育信息栏目模板化

启发诱导个别辅导
课件
操作
15分钟
总结
本次课主要讲解模板和库的使用
讲授
课件

5分钟
作业
完成课后练习P229(参考机械出版社)

课件

后记

******职业技术学院单元教学设计
一、教案头
本次课标题：第 讲 综合运用
课程名称
网页设计
授课教师

所属系部
信息工程系
授课班级

上课时间
6学时
授课地点

教
学
目
标
能力目标
知识目标
① 运用所学知识进行高中毕业母校网站首页设计与制作
② 运用div布局
③ 运用CSS美化网页

① 熟练运用div布局
② 熟练运用CSS美化网页

能力训练的任务与案例

任务： 高中毕业母校网站首页设计

参
考
资
料

赵峰.网页设计与制作（html5+CSS+Javascript）.北京:清华大学出版社,2010
刘瑞新等.网页设计与制作.北京:机械工业出版社,2013
互联网上的各种相关网站和网页

二、教学设计
步 骤
教学内容
教学方法
教学手段
学生活动
时间分配
告知
本节课的主要内容是运用所学知识进行高中毕业母校网站首页设计与制作

展示

5分钟
操练
第一步：素材收集　　　　　　　　　　　
第二步：布局绘制　　　　　　　　　　
第三步：网站大体设计　　　　　　　
第四步：细节制作
第五步：网站发布　　　　　　　　　　　　　　　　　　

辅导
案例展示
思考
操作
提问
讨论
120分钟

深化
学生完成学校网站首页设计
操练
个别辅导
讨论
操作
给予充分时间完成
归纳
1、个别展示学生作品
2、界面设计合理
3、颜色搭配评论
4、分析评选作品优秀的同学

归纳总结
作品展示
思考
回答
5分钟
训练
训练项目：学校网站进一步修改

启发诱导个别辅导
作品展示
操作
课后
总结
本次课学生的作品成绩
讲授

5分钟
作业
课程大作业布置

后记

35 / 35