网页美工设计教案计算机网页设计_计算机-网页设计.pdf

《网页美工设计教案计算机网页设计_计算机-网页设计.pdf》由会员分享，可在线阅读，更多相关《网页美工设计教案计算机网页设计_计算机-网页设计.pdf（48页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、1/48 网页美工设计课程教案 授课教师：授课班级：地点：课时：章节 内容 网页设计基础知识 Dreamweaver 软件介绍及其基础操作 教学 目标 1)使学生了解网页设计的相关基础知识；2)使学生熟悉 Dreamweaver 软件界面的基本操作方法。重点 难点 1)了解网页设计相关概念和网页的类型；2)熟练掌握 Dreamweaver 软件创建和管理站点的方法。教学 方法 课堂讲授、案例讲解及指导 教学 环境 计算机机房 教学过程及内容提要 时间 分配 备注 教学过程设计 一、引入 1、相互认识，提出及本学科相关的知识，介绍本门课程情况、教学内容及总学时数进度安排，宣讲本课程教学纪律，鼓励

2、学生营造一种学习氛围，尊重同学，互帮互学，真正达到学以致用；2、提出问题：上过网吧？有谁自学过网页设计？听说过网页设计三剑客吗？二、告知学生课堂任务 本次课所学习的主要内容是网页设计相关基础 约 10分钟 约 5 分钟 学生理解 2/48 知识和 Dreamweaver 软件基础操作；三、逐步演示讲解分析教学内容 1、网站和网页的区别：（1）网页是 Internet基本元素；（2）网站由网页组成；2、静态网页和动态网页：静态网页：纯粹 HTML 语言格式的网页通常被称为静 态 网 页，静 态 网 页 的 后 缀 名 通 常为.htm、.html、.shtml、.xml。动态网页：许多人认为网页

3、会动就是动态网页，这是个错误的观点，在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢了。真正的动态网页是指实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。也就是说，它是返回到了客户端上的网页。例如网页文件是以 ASP、PHP、JSP、ASPX为结尾就是动态的网页了。静态网页的特点：（1）内容相对稳定，容易被搜索引擎检索到；（2）没有数据库支持，在网站制作和维护方面工作量大；（3）交互性差，在功能方面有很大的限制。动态网页的特点：约 25分钟 约 10分钟 约 6 分钟 约 6 分钟 约 4 分钟 学生实践 设计的相关基础知识使学生熟悉软件界面的基

4、本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正3/48（1）以数据库技术为基础，

5、可大大降低网站维护的工作量；（2）可实现更多的功能，如用户注册、新闻发布、在线留言等；（3）不利于使用搜索引擎进行网站推广。3、常见网页类型：形象页、主页、栏目页、内页、新闻详细页等；4、网页设计原则：（1）了解客户需求（2）遵循 Web标准（3）运用形式美法则 5、网页设计流程：（1）手绘效果图：确定网页主题内容和风格（2）设计效果图：搜集、整合设计所需素材（3）版面编辑：网页的制作及实现（4）网页美化：动画设计，网页测试和发布 6、网页设计的主要软件：（1）Photoshop（2）Dweamveawer（3）Flash（4）Firworks 7、Dreamweaver 软件界面介绍：（1）

6、软件面板组成及基本操作方法 约 8 分钟 约 12分钟 约 20分钟 约 50分钟 约 40分钟 约 4 分钟 学生实践 总结 设计的相关基础知识使学生熟悉软件界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯粹语言格式的网页通常被称为静态网页静态

7、网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正4/48（2）软件参数设置 8、Dreamweaver 站点创建：站点-新建站点-设置站点名称-设置站点默认图像文件夹。9、学生实训操作：Dreamweaver 站点创建及设置 10、Dreamweaver 创建第一个网页：（1)名称：index.html（2)设置标题、输入文本、输入特殊字符（3）页面属性设置（4）预览网页 四、学生实训及辅导；创建第一个网页。五、课堂小结 本次课主要内容：1、网页设计基础知识；2、Dreamweaver 基本使用方法；3、Dr

8、eamweaver 创建第一个网页；后记 设计的相关基础知识使学生熟悉软件界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中

9、也可以含有动态的图片这仅仅是视觉上的动态罢了真正5/48 网页美工设计课程教案 授课教师：授课班级：地点：课时：章节 内容 Dreamweaver 表格操作；CSS样式表应用。教学 目标 1)掌握 Dreamweaver 中表格的设计方法；2)CSS样式表的使用方法和技巧。重点 难点 1)熟练掌握 Dreamweaver 中表格的基本操作方法；2)了解网页设计中 CSS样式表的作用和设置方法。教学 方法 课堂讲授、案例讲解及指导 教学 环境 计算机机房 教学过程及内容提要 时间 分配 备注 教学过程设计 一、引入 1、回顾上次课所学习的内容：网页设计基础理论知识，Dreamweaver 软件使

10、用初步；2、提出问题：对 Word中表格操作还熟练吗？CSS是什么？如何设置网页中各种元素的显示效果？二、告知学生课堂任务 本次课所学习的主要内容是Dreamweaver 中表格的使用和 Dreamweaver 创建 CSS样式表；约 4 分钟 约 6 分钟 学生理解 设计的相关基础知识使学生熟悉软件界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学

11、过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正6/48 三、逐步演示讲解分析教学内容 1、网页中表格的作用：（1）内容组织和定位；（2）网页排版；2、表格布局和 Div 布局区别：各有优势。表格：简单，好用，学起来很容易上手。各种浏览器都支持！基本上不会变形。但是代码冗余较多，维护起来也不怎么方便。DIV+CSS优点：代码冗余小，所以网站打开速度快一些。维护起来非常方

12、便。但是要兼容 IE6 IE7 火狐等浏览器的话，开始学就会很头疼这个问题的。往往在 IE6 里面看着整个网页是好的，但是到了IE7 或者火狐里面就全乱了。推荐：用 div 做框架，table用来储存数据。3、Dreamweaver 中表格的基本操作：（1）表格和单元格的选择及属性设置；（2）行和列的添加和删除；（3）单元格的合并和拆分；（4）表格的嵌套；4、实例演示讲解：使用表格制作一像素细线；操作步骤：（1)插入 1 行 1 列表格；约 30分钟 约 10分钟 约 15分钟 约 35分钟 约 15分钟 约 40 学生思考 学生实践 学生理解 学生实践 学生理解 设计的相关基础知识使学生熟悉

13、软件界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正7/48（2)设置单元

14、格背景颜色；（3)设置单元格高度为 1；（4)转到代码视图；（5)把单元格中的 删除。5、辅导学生实训操作；6、Dreamweaver 中 CSS样式表的使用：（1）CSS样式表文件的创建；（2）创建 CSS样式：网页链接样式 2；（3）创建 CSS样式：网页凹下链接样式；（4）创建 CSS样式：类链接样式；（5）创建 CSS样式：滤镜样式。7、辅导学生进行 CSS样式实训操作；8、案例演示讲解：个人主页首页布局设计（1）创建网页；（2）设置网页属性；（3）使用表格布局网页（上中下型）；（4)使用 Photoshop 制作页面头部 Banner 图片；（5）制作导航栏渐变背景图片；（

15、6）制作页面主体（左侧公告跑马灯效果和友情链接，右侧资讯速递及图片列表）；（7）页面底部设计。四、布置并辅导学生完成课堂作业；分钟 约 40分钟 约 5 分钟 学生实践 总结 设计的相关基础知识使学生熟悉软件界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟

16、静态网页纯粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正8/48 五、课堂小结 本次课主要内容：1、Dreamweaver 网页表格基本使用方法；2、Dreamweaver 创建 CSS样式；后记 设计的相关基础知识使学生熟悉软件界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有谁自

17、学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正9/48 网页美工设计课程教案 授课教师：授课班级：地点：课时：章节 内容 Dreamweaver 中图像的使用；网页字体设计；表单设计制作。教学 目标 3)掌握 Dreamweaver 中图形图像的使用和属性设置方法；4)掌握网页表单的设计技巧。重点 难点 3)熟练掌

18、握 Dreamweaver 中图像热点链接的创建方法；4)掌握用户注册表单的设计方法和技巧。教学 方法 课堂讲授、案例讲解及指导 教学 环境 计算机机房 教学过程及内容提要 时间 分配 备注 教学过程设计 六、引入 3、回顾上次课所学习的内容：Dreamweaver 表格的使用和属性设置，Dreamweaver 中创建 CSS的方法；4、点评上周作业；5、提出问题：什么是热点链接？网站的注册页面是如何制作的？约 4 分钟 约 10分钟 学生理解 设计的相关基础知识使学生熟悉软件界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容教学目标重点难点教学方法教学环境

19、课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正10/48 七、告知学生课堂任务 本次课所学习的主要内容是Dreamweaver 中图像的使用和网页表单的设计；八、逐步演示讲解分析教学内容 9

20、、网页中支持的图像格式：jpg、gif、gif 动画、bmp、png 10、网页中图像使用原则：（1）尽量小，对较大的图片文件进行适当的压缩和切割；（2）应该挑选及网站主题有关联性的图片；（3）对于网站的标志图片,主体应该清晰可见,图形的含义最好简单明了,图片内所含的文字应该清楚且容易辨认；（4）背景图片只是用来衬托图片主题的,切忌过于花哨；（5）图片颜色应该及页面整体配色协调。11、Dreamweaver 中图像的使用：（1）插入图像；（2）设置图像属性；（3）添加图像热点链接。12、辅导学生实训操作；13、实例演示：Dreamweaver 中变换图像的创建方法-创建导航条。约 5 分钟 约

21、 10分钟 约 10分钟 约 10分钟 约 10分钟 约 10分钟 约 10分钟 约 20分钟 学生理解 学生理解 学生实践 学生实践 学生理解 学生实践 学生理解 设计的相关基础知识使学生熟悉软件界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯

22、粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正11/48 14、辅导学生完成实例实训操作；15、网页字体设计：（1）文字样式；（2）大小；（3）颜色（4）其它属性。16、实例讲解：内容详细页的创建。17、辅导学生完成实例实训操作；18、Dreamweaver 中网页表单设计制作：（1）网页表单的作用；（2）常见表单页类型；19、实例演示：创建用户注册表单页；（1）制定插入表单的页面位置；（2）插入表单；（3）在表单中插入表格为表单控件布局；（4）插入文字标签；（5）插入

23、表单各种控件并设置表单控件的属性；（6）使用 CSS美化表单控件；20、Dreamweaver 中的层的使用方法及其实例讲解；21、辅导学生实训练习；22、Dreamweaver 中行为的添加方法和使用技巧：（1）交换图像；（2）弹出信息；约 5 分钟 约 15分钟 约 10分钟 约 15分钟 约 5 分钟 约 10分钟 约 10分钟 约 10 学生实践 总结 设计的相关基础知识使学生熟悉软件界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互

24、学真正达到学以致用提出问题上过网吧有谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正12/48（3）打开浏览器窗口；（4）播放声音；（5）改变属性；（6）显示-隐藏层；（7）转到 URL.23、辅导学生实训练习；24、综合实例演示讲解：运用 Dreamweaver 中的层和行为来制作网页下拉菜单式导航条：25、辅

25、导学生实训练习；九、布置课堂作业并辅导学生完成作业实训：个人主页用户表单设计。十、课堂小结 本次课主要内容：1、Dreamweaver 中图像的使用方法和技巧；2、Dreamweaver 中字体的设计；3、Dreamweaver 中表单页面的设计制作。分钟 约 20分钟 约 1 分钟 后记 网页美工设计课程教案 授课教师：授课班级：地点：课时：章节 内容 Photoshop 基本使用方法和技巧 设计的相关基础知识使学生熟悉软件界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一

26、学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正13/48 教学 目标 5)熟悉 Photoshop 软件界面；6)掌握 Photoshop 软件的基本操作方法。重点 难点 5)掌握 Photoshop 软件界面基本操作方法和技巧；6)掌握 P

27、hotoshop 中的图片合成和修复的应用方法。教学 方法 课堂讲授、案例讲解及指导 教学 环境 计算机机房 教学过程及内容提要 时间 分配 备注 教学过程设计 十一、引入 6、回顾上次课所学习的内容：网页字体设计，表单页设计制作；7、点评上周作业；8、提出问题：网页中的图像是怎么处理的？是否用过什么图像编辑软件？十二、告知学生课堂任务 本次课所学习的主要内容是Photoshop 基本使用方法和技巧；十三、逐步演示讲解分析教学内容 26、Photoshop 软件介绍；27、Photoshop 软件界面介绍；约 4 分钟 约 10分钟 约 2 分钟 约 5 分钟 约 10 学生理解 学生实践 设

28、计的相关基础知识使学生熟悉软件界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了

29、真正14/48 28、Photoshop 基本操作方法：（1）首选参数设置；（2）工具栏的使用；（3）图像显示比例设置；（4）单位标尺设置；（5）历史记录面板的使用；（6）其它工具面板基本操作。29、辅导学生实训操作；30、实例演示讲解：图层的基本操作方法；31、辅导学生实训操作；32、变换图像方法：缩放、旋转、斜切、扭曲、透视、变形、裁剪；操作步骤：（1）打开素材；（2）选择相应区域；（3）选择变换相应命令；（4）在图片相应区域进行操作；（5）保存并退出；33、辅导学生实训操作；34、Photoshop 应用实例讲解：图片合成；操作步骤：（1）导入所需图片素材；（2）新建 Photoshop

30、 文件；分钟 约 15分钟 约 10分钟 约 10分钟 约 15分钟 约 20分钟 约 20分钟 学生实践 学生理解 学生实践 学生理解 学生实践 学生理解 设计的相关基础知识使学生熟悉软件界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯粹语言格

31、式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正15/48（3）选取矩形选框工具选取导入素材的部分区域；（4）复制并粘贴到新建文件中并设置边沿羽化效果；（5）同法处理其它素材；（6）调整图像整体颜色效果；（7）导出最终图像；35、指导学生完成课堂实训设计实例；36、几种修饰修复图像工具的使用及其实例操作演示讲解：仿制图章工具、污点修复画笔工具、修复画笔工具、修补工具、红眼工具、模糊工具、减淡/加深工具、海绵工具；操作步骤：（1）打开素材；（2）选择对应工具；（3）设置相关属性；（

32、4）在图片相应区域进行操作；（5）保存并退出；37、指导学生完成课堂实训设计实例；十四、课堂小结 本次课主要内容：1、Photoshop 软件的基本操作方法；约 20分钟 约 30分钟 约 35分钟 约 2 分钟 学生实践 总结 设计的相关基础知识使学生熟悉软件界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计

33、相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正16/48 2、Photoshop 图片合成方法；3、几种修饰修复图像工具的使用。后记 设计的相关基础知识使学生熟悉软件界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有谁自

34、学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正17/48 网页美工设计课程教案 授课教师：授课班级：地点：课时：章节 内容 Photoshop 进阶使用 教学 目标 7)图像的选取和抠图实例操作演示讲解；8)掌握 Photoshop 中滤镜和蒙板的使用方法和技巧。重点 难点 7)熟悉 Photoshop 中几种常用

35、滤镜的使用方法；8)理解图层蒙板的作用，掌握图层蒙板的使用方法和技巧。教学 方法 课堂讲授、案例讲解及指导 教学 环境 计算机机房 教学过程及内容提要 时间 分配 备注 教学过程设计 十五、引入 9、回顾上次课所学习的内容：Photoshop软件的基本操作方法、Photoshop 图片合成方法、几种修饰修复图像工具的使用；10、点评上周作业；11、提出问题：什么滤镜？什么是蒙板?滤镜和蒙版有什么用？滤镜和蒙板怎么用？十六、告知学生课堂任务 约 2 分钟 约 10分钟 约 1 分钟 学生理解 设计的相关基础知识使学生熟悉软件界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理

36、站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正18/48 本次课所学习的主要内容是 Photoshop高级应用，包括滤镜和蒙板的使用、抠图方法、

37、色彩调整；十七、逐步演示讲解分析教学内容 38、图像的选取和抠图实例操作演示讲解：（1）快速选择工具；（2）魔棒工具；（3）魔术橡皮擦工具；（4）钢笔工具；（5）抽出滤镜。39、学生实训课堂实例；40、几种调整图像色彩的方法及其实例操作演示讲解：（1）灰度图像效果；（2）色相饱和度调整；操作步骤：1）选择图像或者图像区域；2）执行【图像】|【调整】|【色相/饱和度】命令；3)调整数值；4）确定并保存图像；(其它色彩调整步骤类似)（3）反相效果；（4）黑白图像效果；约 20分钟 约 20分钟 约 10分钟 约 30分钟 约 30分钟 学生实践 学生实践 学生实践 设计的相关基础知识使学生熟悉软件

38、界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正19/48（5）渐变色彩效

39、果；（6）调整图像亮度和对比度；41、学生实训课堂实例；42、Photoshop滤镜的使用方法及其实例操作演示讲解：（1）风格化；（2）描边；（3）模糊；（4）素描；（5）纹理；（6）像素化；（7）渲染。像素画滤镜应用实例演示：1）选择图片对象或区域（通道）；2）执行【滤镜】|【像素化】|【马赛克】命令；3）调整属性值；4）确定并保存；43、学生实训课堂实例；44、Photoshop图层蒙板的使用及其实例操作演示讲解；（1）蒙板的概念；（2）蒙板作用；（3）蒙板使用方法；约 20分钟 约 15分钟 约 10分钟 约 30分钟 约 2 分钟 学生实践 总结 设计的相关基础知识使学生熟悉软件界面的

40、基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正20/48（4）蒙板应用实例；4

41、5、Photoshop 动作及批处理图像方法：（1）Photoshop 动作的使用方法；（2）Photoshop 批处理命令的使用及实例演示；十八、布置课堂作业并辅导学生完成作业实训；十九、课堂小结 本次课主要内容：1、Photoshop 抠图方法；2、Photoshop 滤镜的应用；3、Photoshop 蒙板的使用。后记 设计的相关基础知识使学生熟悉软件界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有

42、谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正21/48 网页美工设计课程教案 授课教师：授课班级：地点：课时：章节 内容 网页背景图案的制作 LOGO 设计制作 Banner 设计制作 教学 目标 9)掌握网页各种图标的设计制作方法；10)掌握 LOGO 和 Banner 常用的方法和技巧。重点 难点 9)掌

43、握网页背景图案常用的设计方法和技巧；10)能够运用所学知识设计出具有深刻内涵的的网站 LOGO。教学 方法 课堂讲授、案例讲解及指导 教学 环境 计算机机房 教学过程及内容提要 时间 分配 备注 教学过程设计 二十、引入 12、回顾上次课所学习的内容：Photoshop抠图方法，Photoshop 滤镜的应用，Photoshop 蒙板的使用；13、点评上周作业；14、提出问题：网站 LOGO有什么用？LOGO图标的设计制作有哪些方法和技巧？约 3 分钟 约 10分钟 学生理解 设计的相关基础知识使学生熟悉软件界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容

44、教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正22/48 二十一、告知学生课堂任务 本次课所学习的主要内容是网站LOGO 设计制作，网页 Banner 和导航

45、菜单的设计制作方法；二十二、逐步演示讲解分析教学内容 46、常见网页背景图案设计制作：（1）斜线图案：操作步骤：1）新建 44 大小、透明背景图像；2）放大图像至 3200%以方便设置线条；3)调整颜色，使用画笔工具填充线条路径；4）将绘制好的图形定义为图案保存下来；5）使用填充命令将图案平铺到指定区域。(其它色彩调整步骤类似)（2）立体图案：（制作方法略）；（3）文字图案：（制作方法略）；（4）渐变背景：（制作方法略）。47、课堂实例练习及辅导；48、网站 LOGO 的作用：（1）LOGO 是及其它网站链接以及让其它网站链接的标志和门户；（2）LOGO 是网站形象的重要体现；（3）LOGO

46、能使受众便于选择。49、一个好的 LOGO 应具备的条件：约 25分钟 约 30分钟 约 3 分钟 约 3 分钟 约 20分钟 约 30 学生实践 学生理解 学生理解 学生实践 学生理解 设计的相关基础知识使学生熟悉软件界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动

47、态网页约分钟静态网页纯粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正23/48（1）符合国际标准；（2）精美、独特；（3）及网站的整体风格相融；（4）能够体现网站的类型、内容和风格。50、网站 LOGO设计制作常见方法及其实例操作演示讲解：（1）线条的使用；（2）图形的使用；（3）文字的使用；（4）渐变色的使用；51、课堂实例练习及辅导；52、网页 Banner 设计应该遵循的原则：（1）主题明确；（2）及整个页面相协调；（3）顺应用户的浏览习惯；（4）能吸引点击。53

48、、网页 Banner 的设计制作方法及其实例操作演示讲解：（1）静态 Banner；（2）动态 Banner；54、课堂实例练习及辅导；二十三、布置课堂作业并辅导学生完成作业实训；设计个人主页网站首页 Logo 和 Banner。分钟 约 4 分钟 约 20分钟 约 20分钟 约 30分钟 约 2 分钟 学生实践 学生实践 学生实践 总结 设计的相关基础知识使学生熟悉软件界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建和管理站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出

49、问题上过网吧有谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正24/48 二十四、课堂小结 本次课主要内容：1、常见网页背景图案设计制作；2、网站 LOGO 的设计方法；3、网页 Banner 的设计制作方法。后记 设计的相关基础知识使学生熟悉软件界面的基本操作方法了解网页设计相关概念和网页的类型熟练掌握软件创建

50、和管理站点的方法内容教学目标重点难点教学方法教学环境课堂讲授案例讲解及指导计算机机房教学过程及内容提要一学生营造一种学习氛围尊重同学互帮互学真正达到学以致用提出问题上过网吧有谁自学过网页设计听说过网页设计三剑客吗二告知学生课堂任教学过程设计本次课所学习的主要内容是网页设计相关基础备注时间分配约分钟学生理解网页和动态网页约分钟静态网页纯粹语言格式的网页通常被称为静态网页静态网页的后缀名通常为动态网页许多人认为网页会动就是动态网页这是个错误的观点在静态的网页中也可以含有动态的图片这仅仅是视觉上的动态罢了真正25/48 网页美工设计课程教案 授课教师：授课班级：地点：课时：章节 内容 网页按钮设计制