网页设计与制作教学研究.docxVIP

网页设计与制作教学研究 　　1网页设计与制作课程教学内容设计　　一个完整的网站开发与设计涉及不同的设计理念与技术支撑，例如，HTML语言、JavaScript脚本语言、ASP编程技术、CSS技术、图像处理、多媒体技术、数据库技术，甚至布局及色彩搭配等美学知识，这难以在一门课程中面面俱到，于是就要求教师应结合项目化教学方法，积极促进网页制作多种软件间的相互渗透与联系，并根据不同专业学生的特点、现有知识结构和认知水平推敲每个知识点，并设计构造出一系列具有可操作性的典型“教学任务”，以提高学生的动手能力、想象力、艺术审美和创新力等综合素质。　　图像和动画的教学设计　　一个精彩的网页是缺少不了图片的，如图片按钮、翻转图片、滤镜、透明图、导航图等，图片往往在网页中起到画龙点睛的作用，所以在网页制作过程中一定会涉及图片的处理。同时要制作出精美的网页图像，网页相册，以及整体感强烈的版面布局等，往往要借助Fireworks软件。因此，网页设计课程也要结合网页图像处理的教学，但由于时间所限，只能通过一些案例重点讲解用Fire-works制作导航菜单、特效文字、切片和LOGO标志等。Flash动画制作则通过几个简单的文字动画案例，让学生了解动画制作的原理、Flash动画制作的基本步骤、不同类型基本动画的制作技术(如引导线动画、遮罩层动画、逐帧动画、补间动画等)、在动画中添加声音、影片的导出等。图像处理与动画这部分内容，教师可根据各个学校的学时和学生水平灵活进行增减。　　动态网页的教学设计　　静态网页的制作可以用软件直接生成，这是教材的主要内容，但同时在教材中也要引入动态网页制作的概念，扩展学生的知识面。实现动态网页需要综合运用网络、数据库、编程和软件工具，可以扩展学生的思维，培养解决问题、综合运用各种知识的能力。动态网页涉及站点的配置与管理，Web服务器的安装与配置，服务器端编程语言ASP、PHP、JSP等内容，这些内容在网页设计初学阶段不必深入展开，因此笔者在教学中设计了一个功能简单的留言本，仅由3个文件构成:首页index．htm显示留言，insert．htm填写并提交留言，lyb．mdb数据库文件以二维表格的方式存储留言信息。通过该案例向学生直观地演示如何创建访问Access数据库的动态网页，通过填写并提交表单实现记录的插入，通过留言本首页实现记录的查询和显示。通过该交互式网页的实现从而激发学生以后深入学习动态网页编程的兴趣，明白网页设计与制作不仅是艺术设计的体现，也是编程技术、多媒体技术、网络技术等的综合应用。　　层叠样式表CSS的教学设计　　样式就是一组命名的格式，样式定义可以用代码编写，也可以借助样式生成器可视化生成，样式可以定义在当前网页，也可以导入外部样式表。笔者设计了大量具体的案例来启发学生用CSS完成各种网页特效，例如首行缩进、图片和文字滤镜、首字下沉、图像作列表的项目符号、字间距和行间距、边框效果、超链接未访问过、访问过、鼠标移入、按下激活4种特效、超链接去掉下划线、彩色滚动条、文字浮动效果、背景图像固定、用层+CSS实现对象的定位布局，以及在同一网站的不同网页之间通过CSS样式统一网页的风格，如相同的文字、背景图像、超链接、边框等格式设置，优点在于一是简化了不同网页重复的格式设置工作，二是将来只要更新了CSS样式，所有引用该样式的对象都会更新，便于网站的更新和维护。通过演示各种CSS实例，让学生在学习过程中领会CSS的作用，并能在网页制作中灵活、充分使用CSS，以达到利用CSS美化网页，统一网站内各个网页风格的教学目的。　　设计综合案例体现“任务驱动”教学方法　　要教好网页设计这门课，必须要围绕一个完整的网站实例来讲解，才能达到良好的教学效果。首页的效果是网站的重点，因此以网站首页的设计为例，将图像、声音、动画等多个知识点和Fire-works、Flash不同软件的讲解融入首页中。教师先演示网页的多媒体效果，激发学生兴趣;然后演示首页的制作过程，并对所学到的知识点(新建站点和网页、图像查看器、Fireworks制作切片、Flash制作文字动画，HMTL语言、Flash文本、Flash按钮等)进行归纳和总结;最后给出图像和音乐素材，让学生举一反三自己设计一个网站首页，展示学生作品并评分，课后让学生通过课程网站学习和借鉴优秀网站的版面布局和制作方法，培养自主学习的能力。　　2教学方法　　采用案例教学法和任务驱动法，并有效利用多媒体双向教学环境。　　案例教学　　讲课方式采用案例教学。结合课程内容，原创设计多个网站案例及每一章相应知识点的上机任务，每个案例网站都综合了若干个知识点，将抽象的Web开发技术以形象生动的形式展现在学生面前。课堂上先演示案例网站，引出问题，然后在讲解知识点的同时实现案例网站的界