《网页设计与制作》教案解读.docx
《《网页设计与制作》教案解读.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作》教案解读.docx（17页珍藏版）》请在冰豆网上搜索。
《网页设计与制作》教案解读
教案
2012～2013学年第二学期
学部
工程技术学部
教研室（实验室）
动漫
课程名称
网页设计与制作
授课班级
11动漫
主讲教师
职称
讲师
使用教材
网页设计与制作案例教程
主编：
九州书源
清华大学出版社
教案（首页）
至12-13学年第二学期
课程
名称
网页设计与制作
课程编码
总计：
72学时
讲课：
36学时
实训：
36学时
学分
4
类别
必修课（√）选修课（）理论课（√）实践课（√）
任课
教师
陈奋
职称
讲师
授课
对象
专业班级：
11动漫Ａ、Ｂ共２个班
基本
教材
和主
要参
考资
料
教材：
网页设计与制作案例教程
主编：
九州书源
清华大学出版社
参考资料：
网页设计与制作案例教程主编:
陈承欢
教学
目的
要求
教学目的：
本课程是动漫专业的一门职业技术必修课，目的是使学生掌握有关网站建设的基本概念、创建网站的方法和步骤、重点掌握利用Dreamweaver软件来设计布局静态网页以及一些简单的JavaScript脚本语言、熟练掌握网页编写语言html，能够利用Dreamweaver来创建和设计一个网站，为以后学习Web动态网页的开发奠定基础。
教学要求：
通过本课程的学习，要求学生掌握网站的相关概念，创建网站的方法和步骤，掌握网页编写语言html，DW软件的使用。
教学
重点
难点
教学重点：
网页编写语言html，如何利用DW来布局网页，层，行为，模板，库。
教学难点：
如何利用表格的布局模式以及框架进行布局，CSS样式，行为，模板。
《网页设计与制作》课程教案
编制日期：
2013年3月3日
授课时间
第一、二周
课次
2
授课方式
（请打√）
理论课√□讨论课□实践课□习题课□其他□
课时
安排
8
教学单元（教学章、节或主题）：
Photoshop基本操作、网页与网站的概念。
目的、要求（分了解、熟悉、掌握三个层次）：
了解网页的基本概念、静态网页、动态网页、使用数据库的动态网页。
了解网站的概念、主题、名称、风格、结构、发布。
掌握网页语言html。
知识要点：
网页和网站的基本概念，网页的分类，网页语言html
技能要点：
要能够从网络上找出每一种类型的网页，能够利用html来编写简单网页
教学步骤：
举例->讲解->课堂练习->讲评
教具及教学手段：
（如：
举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等）
多媒体讲解、举例讲解、Internet网络。
作业和思考题：
初步构想一个个人网站，包括网站名称、网站的栏目板块、网站的目录结构、链接结构，并预设网站的色彩搭配、网站的标准字体等。
课后分析与小结：
通过学习，介绍了和网站相关的几个概念，从网站的整体规划出发，综合网站的主题、结构、风格、布局等多个方面阐述网站的制作构思，以及如何使用DW发布网页，使学生基本上了解了构建网站的流程及网站有关的基础知识，为以下各章打基础。
第页
教学内容（含时间分配）
板书或旁注
●PS概述
●PS面板的基本操作
●PS选区、图层的操作
●建立网站之前的一些准备工作
●与网站有关的一些概念
⏹网页的概念与分类
⏹网站的概念、主题、风格、名称、结构
●建立网站的过程
●网站的整体规划
●定位网站的主题和风格
●构建出一个网站的目录框架和链接框架
●发布网页
●网页语言html
授课时间
第三、四周
课次
2
授课方式
（请打√）
理论课√□讨论课□实践课√□习题课√□其他□
课时
安排
8
教学单元（教学章、节或主题）：
PS路径、通道、蒙版、DW基础。
目的、要求（分了解、熟悉、掌握三个层次）：
掌握建立本地站点的过程，DW的集成环境，熟练使用对象面板与属性面板，掌握简单界面元素的编辑。
通过实验，能够利用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
课后分析与小结：
层和div布局技术是DW的优势所在，一方面应该熟练地使用层技术来完成页面元素的精确定位，另一方面通过设置与层有关的行为来制作具有动态效果的网页，不但能增加制作网页的兴趣，还会增加做好网页的自信心。
第页
教学内容（含时间分配）
板书或旁注
1．层的创建
a）创建新层
b）创建嵌套层
c）熟悉层面板与属性面板
2．层的基本操作
a）层的移动
b）调整层的大小
c）层的对齐、排列
3．层的应用
a）拖动层
b）显示、隐藏层
c）层具体实例的分析讲解
4．Div标签的使用
实验3：
●利用层制作拼图游戏
●利用层制作动态显示的菜单
●利用div技术来布局网页
授课时间
第九、十周
课次
2
授课方式
（请打√）
理论课√□讨论课□实践课□习题课√□其他□
课时
安排
8
教学单元（教学章、节或主题）：
行为与时间轴
目的、要求（分了解、熟悉、掌握三个层次）：
熟练掌握行为面板的使用方法，基本的行为操作，能利用时间轴创建沿路径运动的动画，利用行为与时间轴和层的结合来制作动态交互网页。
知识要点：
行为与时间轴的概念。
技能要点：
基本行为的操作，行为与时间轴和层的结合来制作动态交互网页。
教学步骤：
举例展示->讲解->小结->实验->讲评
教具及教学手段：
（如：
举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等）
多媒体讲解、举例讲解、个别辅导。
作业和思考题：
教材P211~P212
课后分析与小结：
本章主要讲述了使用DW自带的行为来建立动态交互网页的方法，时间轴动画的制作，以及把时间轴和行为、层结合起来制作更为复杂的动画，这部分知识对制作富有动感的网页很有帮助。
第页
教学内容（含时间分配）
板书或旁注
1．行为
a）熟悉行为面板
b）添加行为
c）修改行为
d）行为常用的事件
e）应用行为
i.打开浏览器窗口
ii.播放声音
iii.弹出信息
iv.设置文本
v.转到URL
vi.检查插件
vii.控制多媒体动画
viii.显示弹出式菜单
2．时间轴
a）熟悉时间轴面板
b）利用时间轴进行层的移动
i.直线移动的动画
ii.拖动路径制作曲线移动动画
iii.记录路径制作曲线移动动画
c）利用时间轴改变图像
d）添加时间轴行为
实验4：
●利用行为与时间轴制作富有动态的网页
授课时间
第十一周
课次
1
授课方式
（请打√）
理论课√□讨论课□实践课√□习题课√□其他□
课时
安排
4
教学单元（教学章、节或主题）：
多媒体对象
目的、要求（分了解、熟悉、掌握三个层次）：
熟悉插入Flash和修改其属性的方法，了解插入和设置Flash视频、FlashPaper文档、文字和按钮方法。
知识要点：
熟悉插入Flash等多媒体对象和修改其属性的方法。
技能要点：
熟悉插入Flash等多媒体对象和修改其属性的方法
教学步骤：
举例展示->讲解->小结->实验->讲评
升级会员 