《网页美工设计》教案

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