《网页美工设计》教案

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

2、：上过网吧？有谁自学过网页设计？听说过网页设计三剑学客吗？过程二、 告知学生课堂任务设本 次 课 所 学 习 的 主 要 内 容 是 网 页 设 计 相 关 基 础 知 识 和计Dreamweaver软件基础操作；三、 逐步演示讲解分析教学内容1、 网站和网页的区别：.课时：时间备注分配约 10 分钟学生理解约 5 分钟约 25 分钟.（ 1 ）网页是 Internet 基本元素；（ 2 ）网站由网页组成；2、 静态网页和动态网页：静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静态网页的后缀名通常为.htm 、.html 、 .shtml 、 .xml 。动态网页：许多人认为网页会动

3、就是动态网页，这是个错误的观点，在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢了。真正的动态网页是指实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。也就是说，它是返回到了客户端上的网页。例如网页文件是以ASP 、PHP 、JSP、ASPX 为结尾就是动态的网页了。静态网页的特点：（ 1 ）内容相对稳定，容易被搜索引擎检索到；（ 2 ）没有数据库支持，在网站制作和维护方面工作量大；（ 3 ）交互性差，在功能方面有很大的限制。动态网页的特点：（ 1 ）以数据库技术为基础，可大大降低网站维护的工作量；（ 2 ）可实现更多的功能，如用户注册、新闻发布、

4、在线留言等；（ 3 ）不利于使用搜索引擎进行网站推广。3、 常见网页类型：形象页、主页、栏目页、内页、新闻详细页等；4、 网页设计原则：（ 1 ）了解客户需求（ 2 ）遵循 Web 标准约 10 分钟约 6 分钟约 6 分钟约 4 分钟约 8 分钟约 12 分钟约 20 分钟 学生实践约 50 分钟约 40 分钟学生实践约 4 分钟总结.（ 3 ）运用形式美法则5、 网页设计流程：（ 1 ）手绘效果图：确定网页主题内容和风格（ 2 ）设计效果图：搜集、整合设计所需素材（ 3 ）版面编辑：网页的制作与实现（ 4 ）网页美化：动画设计，网页测试和发布6、 网页设计的主要软件：（ 1 ） Photo

5、shop（ 2 ） Dweamveawer（ 3 ） Flash（ 4 ） Firworks7、 Dreamweaver软件界面介绍：（ 1 ）软件面板组成及基本操作方法（ 2 ）软件参数设置8、 Dreamweaver站点创建：站点-新建站点-设置站点名称-设置站点默认图像文件夹。9、 学生实训操作：Dreamweaver站点创建与设置10 、Dreamweaver创建第一个网页：（ 1) 名称： index.html（ 2) 设置标题、输入文本、输入特殊字符（ 3 ）页面属性设置.（ 4 ）预览网页四、 学生实训及辅导；创建第一个网页。五、 课堂小结本次课主要内容：1、网页设计基础知识；2

6、、 Dreamweaver基本使用方法；3、 Dreamweaver创建第一个网页；后记.网页美工设计课程教案授课教师：授课班级 ：地点：章节Dreamweaver 表格操作；内容CSS 样式表应用。教学1)掌握 Dreamweaver 中表格的设计方法；目标2)CSS 样式表的使用方法和技巧。重点1)熟练掌握 Dreamweaver 中表格的基本操作方法；难点2)了解网页设计中 CSS 样式表的作用和设置方法。教学课堂讲授、案例讲解与指导方法教学计算机机房环境教学过程及内容提要一、引入1 、回 顾 上 次 课 所 学 习 的 内 容 ： 网 页 设 计 基 础 理 论 知 识 ，Dreamw

7、eaver 软件使用初步；2 、提出问题： 对 Word 中表格操作还熟练吗？ CSS 是什么？如何教设置网页中各种元素的显示效果？.课时：时间备注分配约 4 分钟学约 6 分钟学生理解过二、告知学生课堂任务程本次课所学习的主要内容是Dreamweaver中表格的使用和设计Dreamweaver创建 CSS 样式表；三、逐步演示讲解分析教学内容1、网页中表格的作用：（ 1 ）内容组织和定位；约 30 分钟.（ 2 ）网页排版；2、表格布局和Div 布局区别：各有优势。表格：简单，好用，学起来很容易上手。各种浏览器都支持！基本上不会变形。但是代码冗余较多，维护起来也不怎么方便。DIV+CSS优点

8、：代码冗余小，所以网站打开速度快一些。维护起来非常方便。 但是要兼容IE6 IE7火狐等浏览器的话，开始学就会很头疼这个问题的。往往在 IE6 里面看着整个网页是好的，但是到了 IE7 或者火狐里面就全乱了。推荐：用div 做框架， table用来储存数据。3、Dreamweaver中表格的基本操作：（ 1 ）表格和单元格的选择及属性设置；（ 2 ）行和列的添加和删除；（ 3 ）单元格的合并和拆分；（ 4 ）表格的嵌套；4、实例演示讲解：使用表格制作一像素细线；操作步骤：（ 1) 插入 1 行 1 列表格；（ 2) 设置单元格背景颜色；（ 3) 设置单元格高度为 1；（ 4) 转到代码视图；（

9、 5) 把单元格中的   删除。5、辅导学生实训操作；.约 10 分钟学生思考约 15 分钟 学生实践约 35 分钟 学生理解约 15 分钟 学生实践约 40 分钟 学生理解约 40 分钟学生实践约 5 分钟总结.6、Dreamweaver 中 CSS 样式表的使用：（ 1） CSS 样式表文件的创建；（ 2）创建 CSS 样式：网页链接样式2；（ 3 ）创建 CSS 样式：网页凹下链接样式；（ 4 ）创建 CSS 样式：类链接样式；（ 5 ）创建 CSS 样式：滤镜样式。7、辅导学生进行CSS 样式实训操作；8、案例演示讲解：个人主页首页布局设计（ 1 ）创建网页；（ 2 ）设置网

10、页属性；（ 3 ）使用表格布局网页（上中下型） ；（ 4) 使用 Photoshop 制作页面头部 Banner 图片；（ 5 ）制作导航栏渐变背景图片；（ 6 ）制作页面主体（左侧公告跑马灯效果和友情链接，右侧资讯速递及图片列表） ；（ 7 ）页面底部设计。四、布置并辅导学生完成课堂作业；五、课堂小结本次课主要内容：1、 Dreamweaver网页表格基本使用方法；2、 Dreamweaver创建 CSS 样式；.后记.网页美工设计课程教案授课教师：授课班级 ：地点：章节Dreamweaver 中图像的使用；网页字体设计；内容表单设计制作。教学3)掌握 Dreamweaver 中图形图像的使

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

12、分钟 学生理解学生理解约 10 分钟学生理解八、逐步演示讲解分析教学内容9、网页中支持的图像格式：jpg 、 gif 、 gif 动画、 bmp 、 png.约 10 分钟 学生实践约 10 分钟约 10 分钟 学生实践10 、网页中图像使用原则：（ 1 ）尽量小，对较大的图片文件进行适当的压缩和切割；（ 2 ）应该挑选与网站主题有关联性的图片；（ 3 ）对于网站的标志图片 ,主体应该清晰可见 ,图形的含义最好简单明了 ,图片内所含的文字应该清楚且容易辨认；（ 4 ）背景图片只是用来衬托图片主题的,切忌过于花哨；（ 5 ）图片颜色应该与页面整体配色协调。11 、Dreamweaver中图像的使

13、用：.约 10 分钟学生理解约 10 分钟约 20 分钟 学生实践约 5 分钟学生理解约 15 分钟（ 1）插入图像；约 10分钟（ 2）设置图像属性；约 15分钟学生实践约 5分钟（ 3）添加图像热点链接。12 、辅导学生实训操作；13 、实例演示： Dreamweaver中变换图像的创建方法- 创建导航条。约 10分钟14 、辅导学生完成实例实训操作；约 10分钟约 10分钟15 、网页字体设计：（ 1 ）文字样式；（ 2 ）大小；（ 3 ）颜色（ 4 ）其它属性。16 、实例讲解：内容详细页的创建。17 、辅导学生完成实例实训操作；18 、Dreamweaver中网页表单设计制作：约 2

14、0 分钟约 1 分钟总结.（ 1 ）网页表单的作用；（ 2 ）常见表单页类型；19 、实例演示：创建用户注册表单页；（ 1 ）制定插入表单的页面位置；（ 2 ）插入表单；（ 3 ）在表单中插入表格为表单控件布局；（ 4 ）插入文字标签；（ 5 ）插入表单各种控件并设置表单控件的属性；（ 6 ）使用 CSS 美化表单控件；20 、Dreamweaver中的层的使用方法及其实例讲解；21 、辅导学生实训练习；22 、Dreamweaver中行为的添加方法和使用技巧：（ 1 ）交换图像；（ 2 ）弹出信息；（ 3 ）打开浏览器窗口；（ 4 ）播放声音；（ 5 ）改变属性；（ 6 ）显示 - 隐藏层；

15、（ 7 ）转到 URL.23 、辅导学生实训练习；24 、综合实例演示讲解：运用 Dreamweaver中的层和行为来制作网页下拉菜单式导航条：25 、辅导学生实训练习；.九、布置课堂作业并辅导学生完成作业实训：个人主页用户表单设计。十、课堂小结本次课主要内容：1、 Dreamweaver中图像的使用方法和技巧；2、 Dreamweaver中字体的设计；3、 Dreamweaver中表单页面的设计制作。后记网页美工设计课程教案授课教师：授课班级 ：地点：课时：章节Photoshop 基本使用方法和技巧内容教学5)熟悉 Photoshop 软件界面；目标6)掌握 Photoshop 软件的基本操

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

17、基本操作方法：计（ 1 ）首选参数设置；（ 2 ）工具栏的使用；（ 3 ）图像显示比例设置；（ 4 ）单位标尺设置；（ 5 ）历史记录面板的使用；（ 6 ）其它工具面板基本操作。29 、辅导学生实训操作；30 、实例演示讲解：图层的基本操作方法；31 、辅导学生实训操作；.约 4 分钟约 10 分钟约 2 分钟学生理解约 5 分钟约 10 分钟约 15 分钟 学生实践约 10 分钟约 10 分钟 学生实践约 15 分钟 学生理解约 20 分钟 学生实践约 20 分钟 学生理解约 20 分钟 学生实践约 30 分钟 学生理解.32 、变换图像方法：缩放、旋转、斜切、扭曲、透视、变形、裁剪；操作步

18、骤：约 35 分钟学生实践（ 1 ）打开素材；约 2 分钟总结（ 2 ）选择相应区域；（ 3 ）选择变换相应命令；（ 4 ）在图片相应区域进行操作；（ 5 ）保存并退出；33 、辅导学生实训操作；34 、Photoshop应用实例讲解：图片合成；操作步骤：（ 1 ）导入所需图片素材；（ 2 ）新建 Photoshop 文件；（ 3 ）选取矩形选框工具选取导入素材的部分区域；（ 4 ）复制并粘贴到新建文件中并设置边沿羽化效果；（ 5 ）同法处理其它素材；（ 6 ）调整图像整体颜色效果；（ 7 ）导出最终图像；35 、指导学生完成课堂实训设计实例；36 、几种修饰修复图像工具的使用及其实例操作演示

19、讲解：仿制图章工具、污点修复画笔工具、修复画笔工具、修补工具、红眼工具、模糊工具、减淡/ 加深工具、海绵工具；操作步骤：（ 1 ）打开素材；.（ 2 ）选择对应工具；（ 3 ）设置相关属性；（ 4 ）在图片相应区域进行操作；（ 5 ）保存并退出；37 、指导学生完成课堂实训设计实例；十四、课堂小结本次课主要内容：1、 Photoshop软件的基本操作方法；2、 Photoshop图片合成方法；3、几种修饰修复图像工具的使用。后记.网页美工设计课程教案授课教师：授课班级 ：地点：章节Photoshop 进阶使用内容教学7)图像的选取和抠图实例操作演示讲解；目标8)掌握 Photoshop 中滤镜

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

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

22、像效果；（ 5 ）渐变色彩效果；（ 6 ）调整图像亮度和对比度；41 、学生实训课堂实例；42 、Photoshop滤镜的使用方法及其实例操作演示讲解：（ 1 ）风格化；.约 30 分钟 学生实践约 30 分钟约 20 分钟 学生实践约 15 分钟约 10 分钟约 30 分钟 学生实践约 2 分钟总结.（ 2 ）描边；（ 3 ）模糊；（ 4 ）素描；（ 5 ）纹理；（ 6 ）像素化；（ 7 ）渲染。像素画滤镜应用实例演示：1 ）选择图片对象或区域（通道）；2 ）执行【滤镜】|【像素化】 |【马赛克】命令；3 ）调整属性值；4 ）确定并保存；43 、学生实训课堂实例；44 、Photoshop图

23、层蒙板的使用及其实例操作演示讲解；（ 1 ）蒙板的概念；（ 2 ）蒙板作用；（ 3 ）蒙板使用方法；（ 4 ）蒙板应用实例；45 、Photoshop动作及批处理图像方法：（ 1 ） Photoshop 动作的使用方法；（ 2 ） Photoshop 批处理命令的使用及实例演示；十八、布置课堂作业并辅导学生完成作业实训；.十九、课堂小结本次课主要内容：1、 Photoshop抠图方法；2、 Photoshop滤镜的应用；3、 Photoshop蒙板的使用。后记.网页美工设计课程教案授课教师：授课班级 ：地点：章节网页背景图案的制作LOGO 设计制作内容Banner 设计制作教学9)掌握网页各种

24、图标的设计制作方法；目标10)掌握 LOGO 和 Banner 常用的方法和技巧。重点9)掌握网页背景图案常用的设计方法和技巧；难点10)能够运用所学知识设计出具有深刻内涵的的网站LOGO 。教学课堂讲授、案例讲解与指导方法教学计算机机房环境教学过程及内容提要.课时：时间备注分配约 3 分钟二十、引入12 、回顾上次课所学习的内容：Photoshop 抠图方法， Photoshop滤镜的应用， Photoshop 蒙板的使用；教、点评上周作业；13学、提出问题：网站 LOGO有什么用？ LOGO图标的设计制作有14过哪些方法和技巧？程设二十一、告知学生课堂任务计本次课所学习的主要内容是网站LO

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

26、8 、网站 LOGO 的作用：（ 1 ）LOGO 是与其它网站链接以及让其它网站链接的标志和门户；（ 2 ） LOGO 是网站形象的重要体现；（ 3 ） LOGO 能使受众便于选择。49 、一个好的LOGO 应具备的条件：（ 1 ）符合国际标准；（ 2 ）精美、独特；（ 3 ）与网站的整体风格相融；（ 4 ）能够体现网站的类型、内容和风格。50 、网站 LOGO 设计制作常见方法及其实例操作演示讲解：.约 3 分钟学生理解约 20 分钟约 30分钟学生实践约 4分钟学生理解约 20 分钟 学生实践约 20 分钟 学生实践约 30 分钟 学生实践约 2 分钟总结.（ 1 ）线条的使用；（ 2 ）

27、图形的使用；（ 3 ）文字的使用；（ 4 ）渐变色的使用；51 、课堂实例练习及辅导；52 、网页 Banner设计应该遵循的原则：（ 1 ）主题明确；（ 2 ）与整个页面相协调；（ 3 ）顺应用户的浏览习惯；（ 4 ）能吸引点击。53 、网页 Banner的设计制作方法及其实例操作演示讲解：（ 1 ）静态 Banner ；（ 2 ）动态 Banner ；54 、课堂实例练习及辅导；二十三、布置课堂作业并辅导学生完成作业实训；设计个人主页网站首页Logo和 Banner 。二十四、课堂小结本次课主要内容：1、常见网页背景图案设计制作；2、网站 LOGO 的设计方法；3、网页 Banner的设计

28、制作方法。.后记.网页美工设计课程教案授课教师：授课班级 ：地点：课时：章节网页按钮设计制作内容网页栏目框设计制作教学11)掌握网页各种图标的设计制作方法；目标12)掌握使用栏目框美化网页方法。重点1)掌握网页常见按钮和小图标的设计制作方法；难点2)网页栏目框的设计技巧及其表现力的实现。教学课堂讲授、案例讲解与指导方法教学计算机机房环境时间分教学过程及内容提要备注配二十五、引入约 2 分钟15 、回顾上次课所学习的内容：网站 LOGO 设计制作，网页 Banner约 10 分钟和导航菜单的设计制作方法；16 、点评上周作业；教17 、提出问题：网页中常见按钮有哪些类型？漂亮的水晶按钮是怎学么制

29、作的？过程二十六、告知学生课堂任务设本次课所学习的主要内容是网页按钮设计制作和使用栏目框美化计网页的方法。二十七、逐步演示讲解分析教学内容1. 网页中按钮设计理论：约 12 分钟学生理解约 40 分钟.（ 1 ）按钮的类型：有提交功能的“真按钮”和“伪按钮”；（ 2 ）按钮的功能：实现提交和标明当前操作；（ 3 ）按钮的表现形式：系统标准按钮和使用图片自制的按钮；（ 4 ）按钮的位置：容易找到、画面的中心位置；（ 5 ）按钮上面的文字表述：言简意赅，直接明了；（ 6 ）按钮的尺寸：适中；（ 7 ）与其他元素关系：让其充分通透；（ 8 ）注意鼠标滑过的效果：增强按钮的点击感。2. 网页常见几种按

30、钮的设计制作方法及其实例操作演示分步讲解：（ 1 ）方形按钮；简要步骤：1) 绘制矩形边框；2 ）填充颜色：纯色或渐变色；3 ）添加文字。（ 2 ）圆形按钮：（步骤略）；（ 3 ）斜角型按钮： （步骤略）；（ 4 ）椭圆型按钮： （步骤略）；（ 5 ）水晶按钮按钮：简要步骤：1) 绘制矩形边框；2 ）填充渐变色；3 ）添加文字；4 ）添加高光层；.约 40 分钟 学生实践约 35 分钟 学生理解约 40 分钟 学生实践约 20 分钟 学生实践约 1 分钟总结.5 ）设置朦胧边框。3. 课堂实例练习及辅导；4. 常见几种网页栏目框及其设计制作实例；（ 1 ）矩形；（ 2 ）圆角矩形；（ 3 ）滑

31、动门型；（ 4 ）图标修饰型（回形针） 。5. 课堂实例练习及辅导；二十八、布置课堂作业并辅导学生完成作业实训。美化个人主页按钮和栏目框。二十九、课堂小结本次课主要内容：1、网页按钮设计制作；2、使用栏目框美化网页方法；后记.网页美工设计课程教案授课教师：授课班级 ：地点：章节Flash 软件介绍内容Flash 绘图基础景物和场景绘制教学熟悉 Flash 软件界面并掌握使用Flash 进行绘制各种图形的方法。目标重点13)了解 Flash 软件的特点；难点14)熟练使用 Flash 工具栏绘制各种图形。教学课堂讲授、案例讲解与指导方法教学计算机机房环境教学过程及内容提要三十、引入18 、回顾上

32、次课所学习的内容：网页按钮设计制作和使用栏目框美化网页的方法；.课时：时间备注分配约 1 分钟教19 、提出问题：网络上常听到的闪客指的是什么？Flash软件有什学么特点？ Flash 能做什么？过约 3 分钟学生理解程三十一、告知学生课堂任务设Flash 及 Flash 工具栏的基础操本次课所学习的主要内容是了解计作；三十二、逐步演示讲解分析教学内容55 、Fireworks软件介绍；约 15 分钟 学生实践约 5 分钟.56 、Fireworks的独特功能：（ 1 ）可以输出 SWF 和 Illustrator7 文件；（ 2 ）与 Dreamweaver 紧密的配合；（ 3 ）允许加入 Photoshop 滤镜；（ 4 ）可以直接编辑点阵图；（ 5 ）更方便的 Roll over ；（ 6 ）即时预览；（ 7 ）可以读入 Photoshop 文件；（ 8 ）提供 GIF