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

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

《网页设计职业技术学院单元教学设计.docx》由会员分享，可在线阅读，更多相关《网页设计职业技术学院单元教学设计.docx（43页珍藏版）》请在冰豆网上搜索。

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

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

一、教案头

本次课标题：

第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内部样式的使用制作网页　　　　　　　　　　　　　　　　　　　

示