《网页设计与制作》课程教学设计与实践

来源 :中国教育信息化·高教职教 | 被引量 : 0次 | 上传用户:shijianwu2003
下载到本地 , 更方便阅读
声明 : 本文档内容版权归属内容提供方 , 如果您对本文有版权争议 , 可与客服联系进行内容授权或下架
论文部分内容阅读
  摘 要:《网页设计与制作》是当前热门课程,该课程集知识和技能于一体,实践性很强。我们以一个学习任务为主线贯穿整个学习活动,精心设计教学内容和与之配套的实验教学,采取在机房上课、边讲边练的方式和案例教学法,锻炼了学生解决实际问题的能力、自主学习能力和协作学习能力。
  关键词:网页制作 课程设计 实验教学
  中图分类号:G434 文献标识码:A 文章编号:1673-8454(2007)09-0053-03
  
  网页制作类课程是近几年国内高校普遍开设的课程,也是计算机领域发展最快、应用最广泛的课程之一,该课程内容丰富、实用性强,深受学生欢迎。如何在有限的课时中使学生掌握网页设计的精髓,是教师在课程设计中最应关注的问题。笔者结合在清华大学讲授《网页设计与制作》课程的经验,探讨这一问题。
  
  一、课程特点
  
  《网页设计与制作》课程在清华大学计算机教学体系中属于应用专题系列课,是全校选修课。该课程集知识和技能于一体,实践性很强,要求学生既要学好理论知识,又要掌握操作技能,还要具有解决实际问题的能力,能将基本技能和操作综合运用到具体的项目中。该课程的教学目标是在学生已掌握的计算机知识基础上,培养学生网页制作的能力、网上信息获取和加工能力、自主学习能力和团队协作能力,课程结束时学生能自行开发一个静态网站。
  该课程突出的矛盾是学习内容多、课时少。网页制作的知识体系非常庞杂,包括网络基础知识、网页制作技术、平面设计和动画制作等基本要素,而学校给安排的课时只有24学时,要在8周内讲完,所以在给定的学时中面面俱到是不可能的。为此,我们把课程设计为以一个学习任务(制作一个网站)为主线贯穿整个学习活动,精心设计教学内容和与之配套的实验教学,采取在机房上课、边讲边练的方式和案例教学法,取得了满意的效果。
  
  二、教学内容设计
  
  本课程定位在客户端网页制作技术,而目前客户端网页制作的技术和工具软件五花八门、层出不穷。选择合适的技术和工具软件,是课程成功的基础。我们根据对该领域的研究和多年的教学经验,结合国外大学开设同类课程的实践,设计出课程内容模块,该课程由7个模块组成:Web基础知识和案例介绍、HTML语言、CSS、使用Dreamweaver制作网页和网站管理、素材加工、网页图像处理(PhotoShop)和网页动画制作(Flash)。教学内容设计的原则是:
  (1)重视HTML的教学
  
  无论什么类型的网页,其基本结构都是HTML标记,所以认识、了解HTML标记的含义是非常重要的。认识HTML代码,在一些必须要修改HTML代码的情况下(如添加网页特效的Javascript代码、添加背景音乐时)就不会感到无从下手,也为动态网页的学习奠定基础。
  (2)选择最流行的软件
  在工具软件的选择上,我们的原则是选择最流行的,因为流行的软件一般用户多,功能强,有生命力。网页制作一般需要网页制作软件、图像处理软件和网页动画制作软件的配合使用。
  用于网页制作的最为常用的专业级的软件是FrontPage和Dreamweaver。 [1] 这两个工具软件都提供了图形化的设计界面,FrontPage重视网页的开发效率、易学易用的引导过程,适合于网页设计的初学者;而Dreamweaver主攻的是网页高级设计市场,适合专业的制作人员使用。鉴于Dreamweaver 在网站管理和网页编辑方面的卓越表现,我们采用它作为课程用软件。
  图像加工软件有很多,如Photoshop、PhotoImpact、CorelDRAW、Illustrator、Fireworks,PhotoDraw等。其中Photoshop是最著名、最专业的图像处理软件,适合网页图像的加工处理,所以我们采用Photoshop作为课程图像加工的软件。而PhotoImpact自带丰富的图库,提供众多“即拖即有”的现成效果和创意工具,可以方便地创建网页上常用的导航按钮、横幅等个性化的图片,还可以对图片进行优化以使其适合网页发布的需要,所以我们选用其作为素材加工的软件。
  网页动画工具有Flash、Gif Animator、LiveMotion、ImageReady等。Flash 是矢量图形编辑和动画制作的专业软件,使用Flash制作的动画作品空间小,交互功能强,可以跨平台播放,在网页中有着广泛的应用,特别适合于制作声光效果俱佳的开场动画,所以我们选用其作为课程动画制作的软件。鉴于Gif Animator在制作动态gif 格式图片的简单易用性,我们选择其作为制作动态gif图像的软件。
  (3) 强调 CSS 的作用
  制作网页,除了上面提到的HTML语言和工具软件之外,还需要掌握CSS设置页面元素的格式,美化页面。CSS(层叠样式表)可以精确进行网页布局、设置特定的格式,实现HTML标记本身无法实现的格式,而且使用CSS可提高网页制作的效率,使网页代码简练,网页风格统一,在网页设计中是必不可少的。
  
  三、教学方法
  
  我们采取在机房上课、边讲边练的方式和案例教学法。
  1.在机房上课,边讲边练
  鉴于课程本身操作性的内容很多,我们充分利用多媒体双向教学环境,把课堂搬到机房,采用边讲边练的方式。这种方式的优越性是:
  (1)在双向教学环境中学生人手一台机器,远比教室的大屏幕投影清晰得多;
  (2)这种教学环境实现了“教”与“学”的同步,教师可及时了解学生的问题,快速给予指导;学生可及时将学到的知识付诸实践,在实践中检验知识和技能掌握情况,出现问题可及时请教教师,也可通过周围同学的帮助得到快速解决;
  (3)学生在练习过程中,可通过网络方便、快捷地下载大课讲稿、练习素材等学习资源,提高学习效率。
  2.案例教学
  讲课方式采用案例教学。我们结合课程内容,制作了近百个精美的案例,每个案例都综合了若干个知识点。课堂上先让学生观看相关案例,引出问题,然后在讲解知识点的同时实现案例的功能。在讲解过程中注重基础知识的传授和基本技能的培养,同时介绍网页制作中的相关规范和标准,并且注意总结一些实用的技巧。这种教学方式目的明确、形式生动,学生带着问题听课,学习兴趣和效果明显提高。
  图1为框架布局案例,通过该案例的演示使学生了解框架布局的特点和实现功能,结合该案例的制作介绍了框架网页的创建、保存、编辑过程、设置框架间超链接、设置目标窗口、设置贯穿网站的背景音乐等诸多知识点。
  
  四、实验教学
  
  实验教学是为学生消化吸收课程内容而设计的,通过实验教学的实施,使学生掌握网站设计与网页制作的知识与技能,培养学生计算机的综合应用能力和解决实际问题的能力。实验教学设计得好能起到事半功倍的效果,使学生在很短时间内抓住学习的重点,掌握网页制作的方法和技能。除了基础知识以外的6个模块,每个模块我们都精心设计了1~3个典型实验,学生通过完成实验掌握课程内容和发现问题。实验设计的原则是:
  (1)强调基础:把学习内容的主要知识点设计到实验中,学生通过实验能抓住学习重点,以此展开学习;
  (2)具有拓展性:实验内容的一部分是课上没有讲到的,需要学生自行解决,目的是培养学生自主学习能力和探索精神;
  (3)体现制作规范和设计理念:实验本身要符合网页设计规范,版面美观,这样能激发学生的积极性,使学生养成遵守规范的习惯,还在潜移默化中熏陶了学生的审美观;
  (4)综合性:部分实验具有一定难度,学生要综合应用多种知识和技能才能完成。
  为此我们共设计了16个实验,知识点覆盖教学内容的80%,使学生通过这些上机实验熟悉和掌握主要教学内容。
  图2为实验“网页基本编辑”的最终效果,该实验使用Dreamweaver进行网页编辑,主要知识点有设置页面属性、设置文本格式、插入图像和设置图像格式、使用超链接。这个实验中有两个知识点在此次课上没有讲到的,一是水平线的颜色设置,二是背景图像固定。学生通过查找资料、运用之前学过的HTML知识等方法使问题得到了解决,这样既巩固了学过的知识,掌握了新技能,还锻炼了动手能力,也为CSS的引入作了铺垫。
  
  五、学习任务设计
  
  在学生进行课程学习之初,我们通过布置一个学习任务(网站作品)使学生迫切感受到课程要求与自己现有认知结构的关系和差异,进而明确学习活动的方向和要达到的目标,然后向学生提供整体性的解决问题的思路示范,学生以个人或团队方式对任务进行分析和探索,最终使问题得到解决。该任务作为一条主线自始至终贯穿课程,整个学习活动的展开都围绕着这条主线进行。
  我们布置的学习任务是以团队形式制作一个网站,同时规定了基本要求:包括主题和内容要求、团队规模的限制、基本工作量要求、网站中必有的网页元素等;技术要求:包括主页文件命名规范、作品文件空间上限、栏目规划、导航和链接要求、网站文件管理、网页浏览兼容性等;版面与艺术效果:包括整体风格、排版布局、色彩搭配、网站logo、音乐、网页特效等。同时我们也给出了该学习任务的量化评价指标,并在批改后反馈给学生。
  我们设计的学习任务涵盖了教学目标所定义的知识,而且对学生已掌握的知识和技能有所超越,能使学生产生兴趣,激发学生的求知欲,从而使学生主动学习。由于该任务有一定复杂度,我们鼓励学生用团队协作的方法完成任务,锻炼学生的团队协作能力,为日后实际工作奠定基础。
  通过完成学习任务,学生不仅掌握了网站制作技术,还激发了学习兴趣,提高了学习能力和计算机应用能力。
  
  六、学习效果
  
  本课程自开课以来,一直深受学生欢迎,选课人数远超课容量5倍以上。开课以后教学效果良好,第二个学期的教学评估就达到优秀,总分91.21。同时,学生对课程教学评价也很高。
  参考文献:
  [1]李秀,安颖莲,姚瑞霞等.计算机文化基础(第5版)[M].清华大学出版社
其他文献
本文分析了模拟仿真试验的技术特点,在此基础上介绍了利用Flash设计与开发模拟仿真实验的若干关键技术.以期对今后的相关设计开发给予帮助。
2018 年4 月19—20 日,编辑出版学名词审定委员会在北京召开专家审稿会议。来自编辑出版界的傅祚华编审、王平编审、邹华清编审、乔永编审、李弘编审、宋岚编审等10 余位专家出席。会议由全国科技名词审定委员会事务中心代晓明编审主持。  会上,编辑出版学名词审定委员会常务副主任田胜立编审首先向专家们报告了编辑出版学的学科定位问题,介绍了编辑出版学概念架构、收词框架,以及条目确立、释义拟制的过程。专
从增强忧患意识和居安思危的角度出发,论述了煤运事业当前的形势,并提出了应当实施的6项工程。
以灰色系统理论为基础,建立加权灰关联分析模型,对机械设备进行综合效益评价,为设备选优提供决策依据.
于2007年秋天渐次曝光的重庆地产系列"窝案",牵出厅级政府官员和知名开发商已超过30名。自2008年9月以来,这一震动全国地产界、规划界的重案,正在重庆当地陆续开庭,掀起第二
期刊
我觉得金山的成功有其成功的基因。古龙在《七种武器》中写到“七种武器”,大家都还记忆犹新,我也想用“七种武器”这个概念来诠释我理解的金山成功基因。  第一种武器梦想:人因梦想而伟大  创办之初,我们就梦想有一天我们的软件能运行在世界上的每一台电脑上。陷入绝境之时,我们依然希望把金山办成世界一流的软件公司。时至今日,我们矢志不渝!  第二种武器技术:科学技术是第一生产力  金山技术的根源在哪?首先,求
2019年5月23日,胸外科学名词编审讨论会议在京召开。全国科学技术名词审定委員会事务中心主任助理张晖、全国科学技术名词审定委员会委员兼医学名词审定委员会张玉森秘书长、中华医学会医学名词办公室杨威主任、医学名词审定专项办公室商涛、林佳盈、北京胸科医院周世杰教授参加会议,会议由张晖主持。  张晖介绍了全国科技名词委员会的科技名词审定工作,两岸科技名词对照工作,科技名词的推广和培训工作。商涛介绍了医学
夏草,这个号称“财务侦探”的上海国家会计学院一名普通讲师,近年来在中国的股票市场里掀起了一股打假揭黑的“财务旋风”,他于2007年年末撰写公开的《2007年度十大报表粉饰
本文介绍了积件思想及其基本特点和作用.探讨了积件系统的组成和特点,并提出了一种网络环境下积件系统的开发及设计流程。
液体对容器底产生的压力、压强变化除了与液体的深度、密度有关,还与存放液体的容器形状有关,为了搞清其中的变化规律,笔者通过两道典型实例加以分析.