《网页美工设计》教案.docx
- 文档编号:26302766
- 上传时间:2023-06-17
- 格式:DOCX
- 页数:51
- 大小:30.77KB
《网页美工设计》教案.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。
三十九、
四十、课堂小结
本
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页美工设计 网页 美工 设计 教案