网页设计及制作教案

温柔似野鬼°
745次浏览
2020年12月02日 02:18
最佳经验
本文由作者推荐

家长学校活动记录-什么食物提高记忆力

2020年12月2日发(作者:范超)


.


教 案

2012 ~ 2013 学年第 二 学期

学部
工程技术学部
教研室(实验室)
动漫
课 程 名 称
网页设计与制作
授 课 班 级
11动漫
主 讲 教 师

职 称
讲师
网页设计与制作案例教程
使 用 教 材
主编:九州书源
清华大学




.


.
教 案(首页)
至 12-13 学年第 二 学期
课程
名称
网页设计与制作
课程编码
学 分

4
总计:72 学时
类别 必修课( √ ) 选修课( ) 理论课( √ ) 实践课( √ )
讲课:36 学时
任课
教师
授课
对象
基本
教材
教材:网页设计与制作案例教程
和主
主编:九州书源
要参
清华大学
考资
参考资料:网页设计与制作案例教程 主编:承欢


教学

目的

要求
教学目的:本课程是动漫专业的一门职业技术必修课,目的是使学生掌握有
关建设的基 本概念、创建的方法和步骤、重点掌握利用Dreamweaver软件来设计
布局静态网页以及一些简 单的JavaScript脚本语言、熟练掌握网页编写语言
html,能够利用Dreamweave r来创建和设计一个,为以后学习Web动态网页的开
发奠定基础。
教学要求:通过 本课程的学习,要求学生掌握的相关概念,创建的方法和步
骤,掌握网页编写语言html,DW软件的 使用。
实训:36 学时
奋 职称 讲师
专业班级:11动漫A、B 共 2 个班
.


.
教学重点:网页编写语言html,如何利用DW来布局网页,层,行为,模板,
库。
教学

重点

难点
教学难点:如何利用表格的布局模式以及框架进行布局,CSS样式,行为,模
板。
.


.
《网页设计与制作》课程教案
编制日期:2013 年 3 月 3 日
授课时间 第 一、二 周
授课方式
(请打√)
理论课√□ 讨论课□ 实践课□ 习题课□ 其他□
课次
课时
安排
2
8
教学单元(教学章、节或主题):
Photoshop基本操作、网页与的概念。
目的、要求(分了解、熟悉、掌握三个层次):
了解网页的基本概念、静态网页、动态网页、使用数据库的动态网页。
了解的概念、主题、名称、风格、结构、发布。
掌握网页语言html。
知识要点:
网页和的基本概念,网页的分类,网页语言html
技能要点:
要能够从网络上找出每一种类型的网页,能够利用html来编写简单网页
教学步骤:
举例->讲解->课堂练习->讲评


教具及教学手段:(如:举 例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音
像讲解等)
多媒体讲解、举例讲解、Internet网络。

作业和思考题:
初步构想一个个人,包括名称、的栏目板块、的目录结构、结构,并预设的色彩
搭配、的标准字体等。
.


.
课后分析与小结:
通过学习,介绍了和相 关的几个概念,从的整体规划出发,综合的主题、结构、
风格、布局等多个方面阐述的制作构思,以及如 何使用DW发布网页,使学生基本上了
解了构建的流程及有关的基础知识,为以下各章打基础。
第 页
教 学 容(含时间分配)
 PS概述
 PS面板的基本操作
 PS选区、图层的操作
 建立之前的一些准备工作
 与有关的一些概念
 网页的概念与分类
 的概念、主题、风格、名称、结构
 建立的过程
 的整体规划
 定位的主题和风格
 构建出一个的目录框架和框架
 发布网页
 网页语言html







板书或旁注
.


.

授课时间 第 三、四 周
课次 2
8
授课方式 理论课√□ 讨论课□ 实践课√□ 习题课√□ 其他课时
(请打√) □
教学单元(教学章、节或主题):
PS路径、通道、蒙版、DW基础。
目的、要求(分了解、熟悉、掌握三个层次):
安排
掌握建立本地站点的过程,D W的集成环境,熟练使用对象面板与属性面板,掌握
简单界面元素的编辑。
通过实验,能够利用DW创建本地站点,制作几含有简单界面元素的网页,并进行
相关的。
知识要点:
熟悉DW的集成环境,简单界面元素的编辑,网页的。
技能要点:
能够利用DW创建本地站点,制作几含有简单界面元素的网页,并进行相关的。
教学步骤:
举例展示->讲解->小结->实验->讲评
教具及教学手段:(如:举例讲解、多媒体讲解、模型讲 解、实物讲解、挂图讲解、音
像讲解等)
多媒体讲解、举例讲解。
作业和思考题:
教材P30~P34

课后分析与小结:
通过学习,学生掌握了建立本地站点的过程,DW的工作界面的组成,熟练使用对
象面 板与属性面板,简单的界面元素:文字、图像、Flash动画的编辑方法,区分了文
件路径的三种表示 方法,会懂得使用各种超级。
第 页
教 学 容(含时间分配)
.
板书或旁注


.
 PS路径、通道和蒙版的使用
 建立本地站点并管理站点
 制作简单的静态网页
 使用对象面板在网页中插入文字、水平线、图像、Flash文件
等简单的元素
 熟练使用属性面板设置对象的属性
 多种超的设置方法
 利用页面属性设置页面的属性值
实验1:
 创建本地站点、整体控制页面
 文本操作与图像操作










.


.

授课时间 第 五、六 周
授课方式
(请打√)
理论课√□ 讨论课□ 实践课□ 习题课√□ 其他□
课次
课时
安排
2
8
教学单元(教学章、节或主题):
表格、框架和表单。
目的、要求(分了解、熟悉、掌握三个层次):
能够熟练利用表格、框架进行网页的布局,掌握表单的制作和验证。
知识要点:
熟练掌握利用表格的布局模式进行网页的布局,表单的操作。
技能要点:
表格布局模式的使用,表单的制作。


教学步骤:
举例展示->讲解->小结->实验->讲评


教具及教学手段:(如:举例讲解 、多媒体讲解、模型讲解、实物讲解、挂图讲解、音
像讲解等)
多媒体讲解、举例讲解。

作业和思考题:
教材P131~P135

.


.
课后分析与小结:
表格对于容的定位是 非常重要的。既可以利用表格来进行各种数据的设定,也可
以进行文字区域及图像的定位,并利用布局视 图来改变表格的布局。应用框架来进行
页面的优化,方便用户的浏览。通过制作表单来进行调查、订单、 搜索界面等,完成
数据的采集,同时要了解表单的处理。
第 页
教 学 容(含时间分配)
1.表格
a) 创建表格
b) 选择表格
c) 设置表格、单元格属性
d) 创建相册
2.布局表格
a) 绘制布局表格
b) 设置布局表格、单元格属性
c) 布局表格实例分析讲解
3.框架
a) 创建框架
b) 保存框架
c) 框架的选择、属性、的设置
d) 框架实例分析讲解
4.表单
a) 创建表单
b) 向表单添加对象
c) 表单属性的设置与后台程序的
d) 表单实例分析讲解
实验2:
 利用表格布局模式进行包含表单等网页元素的布局设计
 利用框架进行网页的布局设计






.
板书或旁注












.












.


.

授课时间 第 七、八 周
授课方式
(请打√)
理论课□ 讨论课□ 实践课√□ 习题课√□ 其他□
课次
课时
安排
2
8
教学单元(教学章、节或主题):
层、div布局
目的、要求(分了解、熟悉、掌握三个层次):
通过学习,学生要熟练掌握层的概念 ,层的常用具体的操作,包括层的创建、属
性的设置、层的移动、排列、拖动、显示、隐藏,div布局 。
知识要点:
层的概念,层的创建、属性的设置、层的移动、排列、拖动、显示、隐藏,div布
局。

技能要点:
层的创建、属性的设置、层的移动、排列、拖动、显示、隐藏,层的精确定位,div
布局。
教学步骤:
举例展示->讲解->小结->实验->讲评


教 具及教学手段:(如:举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音
像讲解等)
多媒体讲解、个别辅导。

作业和思考题:
教材P166~P168

.


.
课后分析与小结: < br>层和div布局技术是DW的优势所在,一方面应该熟练地使用层技术来完成页面元
素的精确定位 ,另一方面通过设置与层有关的行为来制作具有动态效果的网页,不但
能增加制作网页的兴趣,还会增加 做好网页的自信心。
第 页
教 学 容(含时间分配)
1.层的创建
a) 创建新层
b) 创建嵌套层
c) 熟悉层面板与属性面板
2.层的基本操作
a) 层的移动
b) 调整层的大小
c) 层的对齐、排列
3.层的应用
a) 拖动层
b) 显示、隐藏层
c) 层具体实例的分析讲解
4.Div标签的使用
实验3:
 利用层制作拼图游戏
 利用层制作动态显示的菜单
 利用div技术来布局网页

















板书或旁注
.


.

授课时间 第 九、十 周
授课方式
(请打√)
理论课√□ 讨论课□ 实践课□ 习题课√□ 其他□
课次
课时
安排
2
8
教学单元(教学章、节或主题):
行为与时间轴
目的、要求(分了解、熟悉、掌握三个层次):
熟练掌握行为面板的 使用方法,基本的行为操作,能利用时间轴创建沿路径运动
的动画,利用行为与时间轴和层的结合来制作 动态交互网页。
知识要点:
行为与时间轴的概念。
技能要点:
基本行为的操作,行为与时间轴和层的结合来制作动态交互网页。

教学步骤:
举例展示->讲解->小结->实验->讲评


教具及教学手段:(如: 举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音
像讲解等)
多媒体讲解、举例讲解、个别辅导。

作业和思考题:
教材P211~P212

.


.
课后分析与小结: < br>本章主要讲述了使用DW自带的行为来建立动态交互网页的方法,时间轴动画的制
作,以及把时间 轴和行为、层结合起来制作更为复杂的动画,这部分知识对制作富有
动感的网页很有帮助。
第 页
教 学 容(含时间分配)
1.行为
a) 熟悉行为面板
b) 添加行为
c) 修改行为
d) 行为常用的事件
e) 应用行为
i.
ii.
iii.
iv.
v.
vi.
vii.
viii.
2.时间轴
a) 熟悉时间轴面板
b) 利用时间轴进行层的移动
i.
ii.
iii.
直线移动的动画
拖动路径制作曲线移动动画
记录路径制作曲线移动动画






.
板书或旁注












打开浏览器窗口
播放声音
弹出信息
设置文本
转到URL
检查插件
控制多媒体动画
显示弹出式菜单
c) 利用时间轴改变图像
d) 添加时间轴行为
实验4:
 利用行为与时间轴制作富有动态的网页


.

















.


.

授课时间 第 十一周
课次 1
4
授课方式 理论课√□ 讨论课□ 实践课√□ 习题课√□ 其他课时
(请打√) □
教学单元(教学章、节或主题):
多媒体对象
目的、要求(分了解、熟悉、掌握三个层次):
安排
熟悉插入Flash 和修改其属性的方法,了解插入和设置Flash视频、FlashPaper
文档、文字和按钮方法。
知识要点:
熟悉插入Flash等多媒体对象和修改其属性的方法。

技能要点:
熟悉插入Flash等多媒体对象和修改其属性的方法


教学步骤:
举例展示->讲解->小结->实验->讲评


教具及教学手段:(如:举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音
像讲解等 )
多媒体讲解、举例讲解、个别辅导。

作业和思考题:
教材P261-264

.


.
课后分析与小结: 本章介绍如何在网页中插入多媒体对象,因为这类文件可以把声音、图像结合在
一起,其界面动感十 足,所以在网上非常流行。在网页上不仅是插入这些对象,而且
要保证相应的文件能够正常播放,学会安 装各种各样的插件能丰富网页的容。
第 页
教 学 容(含时间分配)
1.Flash的使用
a) 插入Flash对象的方法
b) 设置属性、参数
2.播放视频
3.播放声音


板书或旁注
.


.

授课时间 第 十二、十三 周
课次 2
8
授课方式 理论课√□ 讨论课□ 实践课√□ 习题课√□ 其他课时
(请打√) □
教学单元(教学章、节或主题):
模板和库
目的、要求(分了解、熟悉、掌握三个层次):
安排
掌握创建模板的方法 ,在模板中如何定义可编辑区域,如何应用模板建立具有统
一风格的网页并更新当前站点,学会编辑库项 目并应用库项目提高工作效率。
知识要点:
模板和库。

技能要点:
模板和库的使用


教学步骤:
举例展示->讲解->小结->实验->讲评


教具及教学手段:(如: 举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音
像讲解等)
多媒体讲解、举例讲解、个别辅导。

作业和思考题:
教材P278-279

.


.
课后分析与小结:
建设时,可以在网页 中综合应用模板和库的相关知识,即把库放到模板中,让模
板和库项目联合来更新。使用这种方法可以更 好地维护网页,有利于减轻设计中的重
复工作量。
第 页
教 学 容(含时间分配)
1.模板
a) 熟悉资源面板
b) 创建模板
c) 编辑模板
d) 创建可编辑区域
e) 重复区域
f) 模板的应用
g) 模板应用实例分析与讲解
2.库
a) 创建库
b) 在文档中插入库项目
c) 编辑库项目
d) 库项目应用实例分析与讲解
实验5:
 利用模板和库制作


板书或旁注
.


.

授课时间 第 十四、十五 周
授课方式
(请打√)
理论课√□ 讨论课□ 实践课√□ 习题课□ 其他□
课次
课时
安排
2
8
教学单元(教学章、节或主题):
CSS样式、div+css布局
目的、要求(分了解、熟悉、掌握三个层次):
掌握创建CSS样式表,熟练掌握CSS样式的属性项目设置方法,在文档中如何应
用样式表,会管理样 式表,div+css布局模式。
知识要点:
熟练掌握CSS样式的属性项目设置方法,在文档中如何应用样式表,div+css布局
模式。
技能要点:
熟练掌握CSS样式的属性项目设置方法,在文档中如何应用样式表,div+css布局
模式。
教学步骤:
举例展示->讲解->小结->实验->讲评


教 具及教学手段:(如:举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音
像讲解等)
多媒体讲解、举例讲解、个别辅导。

作业和思考题:
教材P187-190

.


.
课后分析与小结: 样式表最大的一个优点就在于可以在多个页面甚至整个站点上应用它。尤其是修
改了外部样式表时, 它将自动更新所有使用它的网页,从而完成大量的页面修改工作。
第 页
教 学 容(含时间分配)
1.创建CSS样式
a) 熟悉CSS样式面板
b) 新建CSS样式
c) CSS样式规则对话框
d) 熟练操作规则定义对话框
e) 编辑样式
f) 导入导出样式
实验6:
 利用DIV+CSS样式来统一整个


板书或旁注
.


.

授课时间 第 十六-十八 周
授课方式
(请打√)
理论课√□ 讨论课□ 实践课√□ 习题课□ 其他□
课次
课时
安排
3
12
教学单元(教学章、节或主题):
综合练习
目的、要求(分了解、熟悉、掌握三个层次):
利用所学过的知识制作一个自选的。
知识要点:
CSS的使用,div布局模式的使用,模板和库的使用,行为的使用等。
技能要点:
CSS的使用,div布局模式的使用,模板和库的使用,行为的使用等。
教学步骤:
举例展示->讲解->辅导

教具及教学手段:(如:举例讲解、多媒体讲解、模型讲解、实 物讲解、挂图讲解、音
像讲解等)
多媒体讲解、个别辅导。
作业和思考题:

课后分析与小结:
主要是训练如何利用C SS的使用,div布局模式的使用,模板和库的使用,行为的
使用等来制作一个完整的,并进行发布。

第 页
教 学 容(含时间分配)

.
板书或旁注


.

.

天安门画-mp4文件


晨风吹阳光照-嬉戏谷图片


怎么在网上买火车票-峰糖


宝石骑士攻略-我多么怀念


孕妇能喝龙井茶吗-永不言弃英文


高中生物说课稿-uncommitted


单身男女主题曲-护肤误区


常常的近义词-刘欢歌曲