《网页美工设计》教案.docx
《《网页美工设计》教案.docx》由会员分享，可在线阅读，更多相关《《网页美工设计》教案.docx（51页珍藏版）》请在冰点文库上搜索。
《网页美工设计》教案
《网页美工设计》课程教案
授课教师：
授课班级：
地点：
课时：
章节
内容
网页设计基础知识
Dreamweaver软件介绍及其基础操作
教学
目标
1）】
2）使学生了解网页设计的相关基础知识；
3）使学生熟悉Dreamweaver软件界面的基本操作方法。
重点
难点
1）了解网页设计相关概念和网页的类型；
2）熟练掌握Dreamweaver软件创建和管理站点的方法。
教学
方法
：
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
~
教学过程设计
一、引入
1、相互认识，提出与本学科相关的知识，介绍本门课程情况、教学内容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种学习氛围，尊重同学，互帮互学，真正达到学以致用；
2、提出问题：
上过网吧有谁自学过网页设计听说过网页设计三剑客吗？
3、
二、告知学生课堂任务
本次课所学习的主要内容是网页设计相关基础知识和Dreamweaver软件基础操作；
三、逐步演示讲解分析教学内容
1、，
2、网站和网页的区别：
3、
（1）网页是Internet基本元素；
4、
（2）网站由网页组成；
5、静态网页和动态网页：
6、静态网页：
纯粹HTML语言格式的网页通常被称为静态网页，静态网页的后缀名通常为.htm、.html、.shtml、.xml。
7、动态网页：
许多人认为网页会动就是动态网页，这是个错误的观点，在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢了。
真正的动态网页是指实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。
也就是说，它是返回到了客户端上的网页。
例如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了。
8、静态网页的特点：
9、
（1）内容相对稳定，容易被搜索引擎检索到；
10、
（2）没有数据库支持，在网站制作和维护方面工作量大；
11、（3）交互性差，在功能方面有很大的限制。
12、动态网页的特点：
13、
（1）以数据库技术为基础，可大大降低网站维护的工作量；
14、
（2）可实现更多的功能，如用户注册、新闻发布、在线留言等；
15、（3）不利于使用搜索引擎进行网站推广。
16、常见网页类型：
形象页、主页、栏目页、内页、新闻详细页等；
17、网页设计原则：
18、
（1）了解客户需求
19、
（2）遵循Web标准
20、（3）运用形式美法则
21、网页设计流程：
22、
（1）手绘效果图：
确定网页主题内容和风格
23、
（2）设计效果图：
搜集、整合设计所需素材
24、（3）版面编辑：
网页的制作与实现
25、（4）网页美化：
动画设计，网页测试和发布
26、网页设计的主要软件：
27、
（1）Photoshop
28、
（2）Dweamveawer
29、（3）Flash
30、（4）Firworks
31、Dreamweaver软件界面介绍：
32、
（1）软件面板组成及基本操作方法
33、
（2）软件参数设置
34、Dreamweaver站点创建：
35、站点->新建站点->设置站点名称->设置站点默认图像文件夹。
36、$
37、学生实训操作：
38、Dreamweaver站点创建与设置
39、Dreamweaver创建第一个网页：
40、
（1）名称：
41、
（2）设置标题、输入文本、输入特殊字符
42、（3）页面属性设置
43、（4）预览网页
44、
四、学生实训及辅导；
五、创建第一个网页。
六、
七、课堂小结
本次课主要内容：
1、网页设计基础知识；
2、Dreamweaver基本使用方法；
3、Dreamweaver创建第一个网页；
。
约10分钟
{
约5分钟
:
约25分钟
?
<
约10分钟
约6分钟
约6分钟
￥
约4分钟
—
约8分钟
约12分钟
约20分钟
^
约50分钟
约40分钟
>
约4分钟
`
&
学生理解
（
…
-
（
`
学生实践
{
学生实践
总结
，
后记
《网页美工设计》课程教案
授课教师：
授课班级：
地点：
课时：
！
章节
内容
Dreamweaver表格操作；
CSS样式表应用。
教学
目标
4）掌握Dreamweaver中表格的设计方法；
5）CSS样式表的使用方法和技巧。
|
重点
难点
3）熟练掌握Dreamweaver中表格的基本操作方法；
4）了解网页设计中CSS样式表的作用和设置方法。
教学
方法
课堂讲授、案例讲解与指导
教学
…
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
八、引入
4、"
5、回顾上次课所学习的内容：
网页设计基础理论知识，Dreamweaver软件使用初步；
6、提出问题：
对Word中表格操作还熟练吗CSS是什么如何设置网页中各种元素的显示效果？
7、
九、告知学生课堂任务
本次课所学习的主要内容是Dreamweaver中表格的使用和Dreamweaver创建CSS样式表；
一十、逐步演示讲解分析教学内容
45、网页中表格的作用：
46、
（1）内容组织和定位；
47、
（2）网页排版；
48、表格布局和Div布局区别：
49、各有优势。
50、表格：
简单，好用，学起来很容易上手。
各种浏览器都支持！
基本上不会变形。
但是代码冗余较多，维护起来也不怎么方便。
51、DIV+CSS优点：
代码冗余小，所以网站打开速度快一些。
维护起来非常方便。
但是要兼容IE6IE7火狐等浏览器的话，开始学就会很头疼这个问题的。
往往在IE6里面看着整个网页是好的，但是到了IE7或者火狐里面就全乱了。
52、推荐：
用div做框架，table用来储存数据。
53、？
54、Dreamweaver中表格的基本操作：
55、
（1）表格和单元格的选择及属性设置；
56、
（2）行和列的添加和删除；
57、（3）单元格的合并和拆分；
58、（4）表格的嵌套；
59、实例演示讲解：
使用表格制作一像素细线；
60、操作步骤：
61、
（1）插入1行1列表格；
62、
（2）设置单元格背景颜色；
63、（3）设置单元格高度为1；
64、（4）转到代码视图；
65、（5）把单元格中的 删除。
66、辅导学生实训操作；
67、Dreamweaver中CSS样式表的使用：
68、
（1）CSS样式表文件的创建；
69、
（2）创建CSS样式：
网页链接样式2；
70、（3）创建CSS样式：
网页凹下链接样式；
71、（4）创建CSS样式：
类链接样式；
72、（5）创建CSS样式：
滤镜样式。
73、辅导学生进行CSS样式实训操作；
74、案例演示讲解：
个人主页首页布局设计
75、
（1）创建网页；
76、
（2）设置网页属性；
77、（3）使用表格布局网页（上中下型）；
78、（4）使用Photoshop制作页面头部Banner图片；
79、（5）制作导航栏渐变背景图片；
80、（6）制作页面主体（左侧公告跑马灯效果和友情链接，右侧资讯速递及图片列表）；
81、（7）页面底部设计。
一十一、布置并辅导学生完成课堂作业；
一十二、
一十三、:
一十四、课堂小结
本次课主要内容：
1、Dreamweaver网页表格基本使用方法；
2、Dreamweaver创建CSS样式；
约4分钟
、
约6分钟
#
'
约30分钟
%
约10分钟
《
约15分钟
约35分钟
约15分钟
】
约40分钟
。
约40分钟
约5分钟
：
、
学生理解
&
>
学生思考
学生实践
学生理解
—
学生实践
学生理解
"
学生实践
）
总结
，
后记
…
《网页美工设计》课程教案
授课教师：
授课班级：
地点：
课时：
章节
内容
Dreamweaver中图像的使用；
网页字体设计；
'
表单设计制作。
教学
目标
6）掌握Dreamweaver中图形图像的使用和属性设置方法；
7）掌握网页表单的设计技巧。
重点
难点
5）熟练掌握Dreamweaver中图像热点链接的创建方法；
6）,
7）掌握用户注册表单的设计方法和技巧。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
，
时间
分配
备注
教学过程设计
一十五、引入
8、回顾上次课所学习的内容：
Dreamweaver表格的使用和属性设置，Dreamweaver中创建CSS的方法；
9、点评上周作业；
10、—
11、提出问题：
什么是热点链接网站的注册页面是如何制作的？
12、
一十六、告知学生课堂任务
本次课所学习的主要内容是Dreamweaver中图像的使用和网页表单的设计；
一十七、逐步演示讲解分析教学内容
82、网页中支持的图像格式：
jpg、gif、gif动画、bmp、png
83、网页中图像使用原则：
84、
（1）尽量小，对较大的图片文件进行适当的压缩和切割；
85、
（2）应该挑选与网站主题有关联性的图片；
86、（3）对于网站的标志图片,主体应该清晰可见,图形的含义最好简单明了,图片内所含的文字应该清楚且容易辨认；
87、（4）背景图片只是用来衬托图片主题的,切忌过于花哨；
88、（5）图片颜色应该与页面整体配色协调。
89、Dreamweaver中图像的使用：
90、
（1）插入图像；
91、
（2）设置图像属性；
92、（3）添加图像热点链接。
93、。
94、辅导学生实训操作；
95、实例演示：
Dreamweaver中变换图像的创建方法---创建导航条。
96、辅导学生完成实例实训操作；
97、网页字体设计：
98、
（1）文字样式；
99、
（2）大小；
100、（3）颜色
101、（4）其它属性。
102、实例讲解：
内容详细页的创建。
103、辅导学生完成实例实训操作；
104、Dreamweaver中网页表单设计制作：
105、
（1）网页表单的作用；
106、
（2）常见表单页类型；
107、实例演示：
创建用户注册表单页；
108、
（1）制定插入表单的页面位置；
109、
（2）插入表单；
110、（3）在表单中插入表格为表单控件布局；
111、（4）插入文字标签；
112、（5）插入表单各种控件并设置表单控件的属性；
113、（6）使用CSS美化表单控件；
114、/
115、Dreamweaver中的层的使用方法及其实例讲解；
116、辅导学生实训练习；
117、Dreamweaver中行为的添加方法和使用技巧：
118、
（1）交换图像；
119、
（2）弹出信息；
120、（3）打开浏览器窗口；
121、（4）播放声音；
122、（5）改变属性；
123、（6）显示-隐藏层；
124、（7）转到URL.
125、辅导学生实训练习；
126、综合实例演示讲解：
运用Dreamweaver中的层和行为来制作网页下拉菜单式导航条：
127、辅导学生实训练习；
一十八、布置课堂作业并辅导学生完成作业实训：
一十九、个人主页用户表单设计。
二十、
二十一、》
二十二、课堂小结
本次课主要内容：
1、Dreamweaver中图像的使用方法和技巧；
2、Dreamweaver中字体的设计；
3、Dreamweaver中表单页面的设计制作。
、
约4分钟
约10分钟
:
约5分钟
*
约10分钟
约10分钟
约10分钟
<
约10分钟
约10分钟
约10分钟
约20分钟
"
约5分钟
约15分钟
<
约10分钟
约15分钟
约5分钟
？
约10分钟
约10分钟
约10分钟
*
约20分钟
约1分钟
`
:
学生理解
学生理解
*
学生理解
学生实践
`
学生实践
学生理解
?
学生实践
学生理解
$
学生实践
…
，
总结
<
后记
？
《网页美工设计》课程教案
授课教师：
授课班级：
地点：
课时：
章节
内容
Photoshop基本使用方法和技巧
教学
目标
8）&
9）熟悉Photoshop软件界面；
10）掌握Photoshop软件的基本操作方法。
重点
难点
8）掌握Photoshop软件界面基本操作方法和技巧；
9）掌握Photoshop中的图片合成和修复的应用方法。
教学
方法
。
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
（
教学过程设计
二十三、引入
13、回顾上次课所学习的内容：
网页字体设计，表单页设计制作；
14、点评上周作业；
15、提出问题：
网页中的图像是怎么处理的是否用过什么图像编辑软件？
16、
二十四、告知学生课堂任务
本次课所学习的主要内容是Photoshop基本使用方法和技巧；
~
二十五、逐步演示讲解分析教学内容
128、Photoshop软件介绍；
129、Photoshop软件界面介绍；
130、Photoshop基本操作方法：
131、
（1）首选参数设置；
132、
（2）工具栏的使用；
133、（3）图像显示比例设置；
134、（4）单位标尺设置；
135、（5）历史记录面板的使用；
136、（6）其它工具面板基本操作。
137、辅导学生实训操作；
138、实例演示讲解：
图层的基本操作方法；
139、辅导学生实训操作；
140、~
141、变换图像方法：
缩放、旋转、斜切、扭曲、透视、变形、裁剪；
142、操作步骤：
143、
（1）打开素材；
144、
（2）选择相应区域；
145、（3）选择变换相应命令；
146、（4）在图片相应区域进行操作；
147、（5）保存并退出；
148、辅导学生实训操作；
149、Photoshop应用实例讲解：
图片合成；
操作步骤：
（1）导入所需图片素材；
（2）新建Photoshop文件；
（3）选取矩形选框工具选取导入素材的部分区域；
（4）复制并粘贴到新建文件中并设置边沿羽化效果；
（5）同法处理其它素材；
（6）调整图像整体颜色效果；
（7）导出最终图像；
150、指导学生完成课堂实训设计实例；
151、几种修饰修复图像工具的使用及其实例操作演示讲解：
152、仿制图章工具、污点修复画笔工具、修复画笔工具、修补工具、红眼工具、模糊工具、减淡/加深工具、海绵工具；
153、操作步骤：
154、
（1）打开素材；
155、
（2）选择对应工具；
156、（3）设置相关属性；
157、（4）在图片相应区域进行操作；
158、（5）保存并退出；
159、指导学生完成课堂实训设计实例；
160、
二十六、课堂小结
~
本次课主要内容：
1、Photoshop软件的基本操作方法；
2、Photoshop图片合成方法；
3、几种修饰修复图像工具的使用。
约4分钟
。
约10分钟
！
约2分钟
约5分钟
约10分钟
！
约15分钟
约10分钟
约10分钟
约15分钟
[
约20分钟
约20分钟
、
约20分钟
约30分钟
.
约35分钟
！
约2分钟
·
】
、
学生理解
$
学生实践
|
学生实践
学生理解
-
学生实践
学生理解
$
学生实践
学生理解
\
学生实践
总结
]
;
后记
~
《网页美工设计》课程教案
授课教师：
授课班级：
地点：
课时：
章节
内容
Photoshop进阶使用
教学
!
目标
11）图像的选取和抠图实例操作演示讲解；
12）掌握Photoshop中滤镜和蒙板的使用方法和技巧。
重点
难点
10）熟悉Photoshop中几种常用滤镜的使用方法；
11）理解图层蒙板的作用，掌握图层蒙板的使用方法和技巧。
教学
，
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
>
备注
教学过程设计
二十七、引入
17、回顾上次课所学习的内容：
Photoshop软件的基本操作方法、Photoshop图片合成方法、几种修饰修复图像工具的使用；
18、点评上周作业；
19、提出问题：
什么滤镜什么是蒙板滤镜和蒙版有什么用滤镜和蒙板怎么用？
20、
二十八、告知学生课堂任务
！
本次课所学习的主要内容是Photoshop高级应用，包括滤镜和蒙板的使用、抠图方法、色彩调整；
二十九、逐步演示讲解分析教学内容
161、图像的选取和抠图实例操作演示讲解：
162、
（1）快速选择工具；
163、
（2）魔棒工具；
164、（3）魔术橡皮擦工具；
165、（4）钢笔工具；
166、（5）抽出滤镜。
167、学生实训课堂实例；
168、几种调整图像色彩的方法及其实例操作演示讲解：
169、
（1）灰度图像效果；
170、
（2）色相饱和度调整；
171、操作步骤：
172、1）选择图像或者图像区域；
173、2）执行【图像】|【调整】|【色相/饱和度】命令；
174、3）调整数值；
175、4）确定并保存图像；
176、（其它色彩调整步骤类似）
177、（3）反相效果；
178、（4）黑白图像效果；
179、（5）渐变色彩效果；
180、（6）调整图像亮度和对比度；
181、学生实训课堂实例；
182、Photoshop滤镜的使用方法及其实例操作演示讲解：
183、
（1）风格化；
184、
（2）描边；
185、（3）模糊；
186、（4）素描；
187、（5）纹理；
188、（6）像素化；
189、（7）渲染。
190、像素画滤镜应用实例演示：
191、1）选择图片对象或区域（通道）；
192、2）执行【滤镜】|【像素化】|【马赛克】命令；
193、3）调整属性值；
194、4）确定并保存；
195、`
196、学生实训课堂实例；
197、Photoshop图层蒙板的使用及其实例操作演示讲解；
198、
（1）蒙板的概念；
199、
（2）蒙板作用；
200、（3）蒙板使用方法；
201、（4）蒙板应用实例；
202、Photoshop动作及批处理图像方法：
203、
（1）Photoshop动作的使用方法；
204、
（2）Photoshop批处理命令的使用及实例演示；
三十、布置课堂作业并辅导学生完成作业实训；
三十一、
三十二、课堂小结
本次课主要内容：
1、Photoshop抠图方法；
#
2、Photoshop滤镜的应用；
3、Photoshop蒙板的使用。
约2分钟
约10分钟
（
约1分钟
；
约20分钟
约20分钟
约10分钟
、
[
约30分钟
约30分钟
`
（
约20分钟
约15分钟
%
约10分钟
约30分钟
约2分钟
;
（
学生理解
—
学生实践
$
、
学生实践
￥
@
学生实践
；
学生实践
总结
、
？
后记
《网页美工设计》课程教案
授课教师：
授课班级：
地点：
课时：
章节
;
内容
网页背景图案的制作
LOGO设计制作
Banner设计制作
教学
目标
13）掌握网页各种图标的设计制作方法；
14）掌握LOGO和Banner常用的方法和技巧。
《
重点
难点
12）掌握网页背景图案常用的设计方法和技巧；
13）能够运用所学知识设计出具有深刻内涵的的网站LOGO。
教学
方法
课堂讲授、案例讲解与指导
教学
：
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
三十三、[
三十四、引入
21、回顾上次课所学习的内容：
Photoshop抠图方法，Photoshop滤镜的应用，Photoshop蒙板的使用；
22、点评上周作业；
23、提出问题：
网站LOGO有什么用LOGO图标的设计制作有哪些方法和技巧
24、
三十五、告知学生课堂任务
本次课所学习的主要内容是网站LOGO设计制作，网页Banner和导航菜单的设计制作方法；
三十六、逐步演示讲解分析教学内容
205、@
206、常见网页背景图案设计制作：
207、
（1）斜线图案：
208、操作步骤：
209、1）新建4×4大小、透明背景图像；
210、2）放大图像至3200%以方便设置线条；
211、3）调整颜色，使用画笔工具填充线条路径；
212、4）将绘制好的图形定义为图案保存下来；
213、5）使用填充命令将图案平铺到指定区域。
214、（其它色彩调整步骤类似）
215、
（2）立体图案：
（制作方法略）；
216、（3）文字图案：
（制作方法略）；
217、（4）渐变背景：
（制作方法略）。
218、课堂实例练习及辅导；
219、网站LOGO的作用：
220、
（1）LOGO是与其它网站链接以及让其它网站链接的标志和门户；
221、
（2）LOGO是网站形象的重要体现；
222、（3）LOGO能使受众便于选择。
223、一个好的LOGO应具备的条件：
224、
（1）符合国际标准；
225、
（2）精美、独特；
226、（3）与网站的整体风格相融；
227、（4）能够体现网站的类型、内容和风格。
228、网站LOGO设计制作常见方法及其实例操作演示讲解：
229、
（1）线条的使用；
230、
（2）图形的使用；
231、（3）文字的使用；
232、（4）渐变色的使用；
233、课堂实例练习及辅导；
234、网页Banner设计应该遵循的原则：
235、
（1）主题明确；
236、
（2）与整个页面相协调；
237、（3）顺应用户的浏览习惯；
238、（4）能吸引点击。
239、网页Banner的设计制作方法及其实例操作演示讲解：
240、
（1）静态Banner；
241、
（2）动态Banner；
242、》
243、课堂实例练习及辅导；
三十七、布置课堂作业并辅导学生完成作业实训；
三十八、设计个人主页网站首页Logo和Banner。
三十九、
四十、课堂小结
本
升级会员 