《网页设计与制作》教案.docx

《网页设计与制作》教案.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等多媒体对象和修改其属性的方法

教学步骤：

举例展示->讲解->小结->实验->讲评

教具及教学手段：

（如：

举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等）

多媒体讲解、举例讲解、个别辅导。

作业和思考题：

教材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布局模式的使用，模板和库的使用，行为的使用等。

教学步骤：

举例展示->讲解->辅导

教具及教学手段：

（如：

举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等）

多媒体讲解、个别辅导。

作业和思考题：

课后分析与小结：

主要是训练如何利用CSS的使用，div布局模式的使用，模板和库的使用，行为的使用等来制作一个完整的网站，并进行发布。

第页

教学内容（含时间分配）

板书或旁注