最新《网页美工设计》教案Word文件下载.docx
《最新《网页美工设计》教案Word文件下载.docx》由会员分享，可在线阅读，更多相关《最新《网页美工设计》教案Word文件下载.docx（40页珍藏版）》请在冰豆网上搜索。
备注
教学过程设计
一、引入
1、相互认识，提出与本学科相关的知识，介绍本门课程情况、教学内容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种学习氛围，尊重同学，互帮互学，真正达到学以致用；
2、提出问题：
上过网吧？
有谁自学过网页设计？
听说过网页设计三剑客吗？
二、告知学生课堂任务
本次课所学习的主要内容是网页设计相关基础知识和Dreamweaver软件基础操作；
三、逐步演示讲解分析教学内容
1、网站和网页的区别：
（1）网页是Internet基本元素；
（2）网站由网页组成；
2、静态网页和动态网页：
静态网页：
纯粹HTML语言格式的网页通常被称为静态网页，静态网页的后缀名通常为.htm、.html、.shtml、.xml。
动态网页：
许多人认为网页会动就是动态网页，这是个错误的观点，在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢了。
真正的动态网页是指实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。
也就是说，它是返回到了客户端上的网页。
例如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了。
静态网页的特点：
（1）内容相对稳定，容易被搜索引擎检索到；
（2）没有数据库支持，在网站制作和维护方面工作量大；
（3）交互性差，在功能方面有很大的限制。
动态网页的特点：
（1）以数据库技术为基础，可大大降低网站维护的工作量；
（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）软件面板组成及基本操作方法
（2）软件参数设置
8、Dreamweaver站点创建：
站点->
新建站点->
设置站点名称->
设置站点默认图像文件夹。
9、学生实训操作：
Dreamweaver站点创建与设置
10、Dreamweaver创建第一个网页：
（1）名称：
index.html
（2）设置标题、输入文本、输入特殊字符
（3）页面属性设置
（4）预览网页
四、学生实训及辅导；
创建第一个网页。
五、课堂小结
本次课主要内容：
1、网页设计基础知识；
2、Dreamweaver基本使用方法；
3、Dreamweaver创建第一个网页；
约10分钟
约5分钟
约25分钟
约6分钟
约4分钟
约8分钟
约12分钟
约20分钟
约50分钟
约40分钟
学生理解
学生实践
总结
后记
Dreamweaver表格操作；
CSS样式表应用。
3）掌握Dreamweaver中表格的设计方法；
4）CSS样式表的使用方法和技巧。
3）熟练掌握Dreamweaver中表格的基本操作方法；
4）了解网页设计中CSS样式表的作用和设置方法。
六、引入
3、回顾上次课所学习的内容：
网页设计基础理论知识，Dreamweaver软件使用初步；
4、提出问题：
对Word中表格操作还熟练吗？
CSS是什么？
如何设置网页中各种元素的显示效果？
七、告知学生课堂任务
本次课所学习的主要内容是Dreamweaver中表格的使用和Dreamweaver创建CSS样式表；
八、逐步演示讲解分析教学内容
11、网页中表格的作用：
（1）内容组织和定位；
（2）网页排版；
12、表格布局和Div布局区别：
各有优势。
表格：
简单，好用，学起来很容易上手。
各种浏览器都支持！
基本上不会变形。
但是代码冗余较多，维护起来也不怎么方便。
DIV+CSS优点：
代码冗余小，所以网站打开速度快一些。
维护起来非常方便。
但是要兼容IE6IE7火狐等浏览器的话，开始学就会很头疼这个问题的。
往往在IE6里面看着整个网页是好的，但是到了IE7或者火狐里面就全乱了。
推荐：
用div做框架，table用来储存数据。
13、Dreamweaver中表格的基本操作：
（1）表格和单元格的选择及属性设置；
（2）行和列的添加和删除；
（3）单元格的合并和拆分；
（4）表格的嵌套；
14、实例演示讲解：
使用表格制作一像素细线；
操作步骤：
（1）插入1行1列表格；
（2）设置单元格背景颜色；
（3）设置单元格高度为1；
（4）转到代码视图；
（5）把单元格中的&
nbsp;
删除。
15、辅导学生实训操作；
16、Dreamweaver中CSS样式表的使用：
（1）CSS样式表文件的创建；
（2）创建CSS样式：
网页链接样式2；
（3）创建CSS样式：
网页凹下链接样式；
（4）创建CSS样式：
类链接样式；
（5）创建CSS样式：
滤镜样式。
17、辅导学生进行CSS样式实训操作；
18、案例演示讲解：
个人主页首页布局设计
（1）创建网页；
（2）设置网页属性；
（3）使用表格布局网页（上中下型）；
（4）使用Photoshop制作页面头部Banner图片；
（5）制作导航栏渐变背景图片；
（6）制作页面主体（左侧公告跑马灯效果和友情链接，右侧资讯速递及图片列表）；
（7）页面底部设计。
九、布置并辅导学生完成课堂作业；
一十、课堂小结
1、Dreamweaver网页表格基本使用方法；
2、Dreamweaver创建CSS样式；
约30分钟
约15分钟
约35分钟
学生思考
Dreamweaver中图像的使用；
网页字体设计；
表单设计制作。
5）掌握Dreamweaver中图形图像的使用和属性设置方法；
6）掌握网页表单的设计技巧。
5）熟练掌握Dreamweaver中图像热点链接的创建方法；
6）掌握用户注册表单的设计方法和技巧。
一十一、引入
5、回顾上次课所学习的内容：
Dreamweaver表格的使用和属性设置，Dreamweaver中创建CSS的方法；
6、点评上周作业；
7、提出问题：
什么是热点链接？
网站的注册页面是如何制作的？
一十二、告知学生课堂任务
本次课所学习的主要内容是Dreamweaver中图像的使用和网页表单的设计；
一十三、逐步演示讲解分析教学内容
19、网页中支持的图像格式：
jpg、gif、gif动画、bmp、png
20、网页中图像使用原则：
（1）尽量小，对较大的图片文件进行适当的压缩和切割；
（2）应该挑选与网站主题有关联性的图片；
（3）对于网站的标志图片,主体应该清晰可见,图形的含义最好简单明了,图片内所含的文字应该清楚且容易辨认；
（4）背景图片只是用来衬托图片主题的,切忌过于花哨；
（5）图片颜色应该与页面整体配色协调。
21、Dreamweaver中图像的使用：
（1）插入图像；
（2）设置图像属性；
（3）添加图像热点链接。
22、辅导学生实训操作；
23、实例演示：
Dreamweaver中变换图像的创建方法---创建导航条。
24、辅导学生完成实例实训操作；
25、网页字体设计：
（1）文字样式；
（2）大小；
（3）颜色
（4）其它属性。
26、实例讲解：
内容详细页的创建。
27、辅导学生完成实例实训操作；
28、Dreamweaver中网页表单设计制作：
（1）网页表单的作用；
（2）常见表单页类型；
29、实例演示：
创建用户注册表单页；
（1）制定插入表单的页面位置；
（2）插入表单；
（3）在表单中插入表格为表单控件布局；
（4）插入文字标签；
（5）插入表单各种控件并设置表单控件的属性；
（6）使用CSS美化表单控件；
30、Dreamweaver中的层的使用方法及其实例讲解；
31、辅导学生实训练习；
32、Dreamweaver中行为的添加方法和使用技巧：
（1）交换图像；
（2）弹出信息；
（3）打开浏览器窗口；
（4）播放声音；
（5）改变属性；
（6）显示-隐藏层；
（7）转到URL.
33、辅导学生实训练习；
34、综合实例演示讲解：
运用Dreamweaver中的层和行为来制作网页下拉菜单式导航条：
35、辅导学生实训练习；
一十四、布置课堂作业并辅导学生完成作业实训：
个人主页用户表单设计。
一十五、课堂小结
1、Dreamweaver中图像的使用方法和技巧；
2、Dreamweaver中字体的设计；
3、Dreamweaver中表单页面的设计制作。
约1分钟
Photoshop基本使用方法和技巧
7）熟悉Photosh
升级会员 