平面设计课程教学网站的建设

开篇：润墨网以专业的文秘视角，为您筛选了一篇平面设计课程教学网站的建设范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！

摘要:校园网在各级高校的普及为网络教学提供了有利条件,建立课程网站成为教学改革的一项重要内容。阐述了平面设计课程网站建设的必要性、网站的定位与结构。介绍了运用图像处理软件与网页设计软件相结合的网站设计方法,分析了网站设计中的关键性技术,并强调了网站更新维护的重要性。

关键词:平面设计;课程网站;网页设计;布局;模板;流媒体

中图分类号:TP393文献标识码:A文章编号:1009-3044(2009)24-6944-03

The Construct of Course Website of Graphic Design

MA Qiu-fang,ZHANG Bo-lun

(Qingdao Huanghai Vocational College, Info-Engineering Faculty,Qingdao 266427, China)

Abstract: Network-based teaching is possible with the popularity of campus network. One of the most important elements is establishment of website in teaching reform. It is focus on the necessity, location construction of the website. The principle in the website design with image processing software and web page design software is introduced in detail. The keys such as update of the website are also given in the paper.

Key words: graphic design;course website;web design;layout;template;streaming media

1 网站建设的背景及意义

计算机网络技术以及多媒体技术的快速发展推动了教学模式和教学手段的变革。我校的校园网已经建立,由于教学信息资源的匮乏,难以发挥其在教学科研中应有的作用,建立相应课程的教学网站势在必行。

教学网站是通过网络表现教学内容和实施教学活动的综合性教学系统,借助于多媒体和流媒体技术,为学生提供一个自主学习的环境。

平面设计课程是我校高职艺术类专业的一门主干课程。根据实际需要构建平面设计课程的教学网站,有助于激发学生的学习兴趣,提高课程的教学效果和影响力。

2 网站的前期准备

2.1 需求分析

平面设计课程教学网站的浏览者是教师和学生,需要提供课程的教学大纲、电子教案及案例素材等教学资源供学习者使用,提供课后习题以检查学习效果。此外,网站还应该实现师生之间的互动,形成一个有信息反馈和实时或非实时交流的系统。

2.2 风格定位

课程网站的风格应当美观大方、简洁明了,界面的设计体现友好和谐、方便用户操作。风格取决于布局和色彩。

网页布局结构大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、封面型等[1]。无论采取何种结构的网页,都应遵循突出主要内容、主次分明这一原则。本站点的网页采用拐角型结构,正文部分纵向分隔为两栏,这是一种规范理性的分隔方式,类似于报刊的版式。

网站的页面主色调为海蓝色,海蓝色令人想到独立和创造,代表着美好的未来。通过调整透明度和饱和度对色彩进行变淡或加深渐变等的处理,产生新的海蓝色的近似色彩,整个网页看起来色彩统一,又不乏层次和变化。页面中还使用了淡灰色的背景图像,给人以遐想的空间,对于协调页面的均衡也起着很大的作用。

2.3 方案设计

2.3.1 网站栏目及栏目简介

根据需求分析,平面设计课程网站需要建立以下几个栏目:

(1)课程简介。简要介绍了平面设计课程的性质和说明,使用的教材及参考教材。

(2)课程建设。本栏目具体介绍了课程负责人和主讲教师的基本信息,课程的教学目的、教学设计思想和教学手段,课程的教学特色,考核方式和课程评价。

(3)教案与视频。该栏目提供了平面设计课程的CAI课件下载,重点章节的教师授课现场视频以及说课形式的课程整体介绍视频,帮助学生更有效的学习或复习。

(4)学习指南。网络教学不同于课堂教学,不能只提供教案课件,还需要提供学习指南指导学生的自主性学习[2]。本栏目包括本课程的知识结构、教学大纲、各章节学时分配,各章节的主要内容和重点难点以及课程进度表。

(5)实验实训。该栏目提供了平面设计课程的实践性环节,包括平面设计的精彩案例制作步骤以及所需素材的下载,用于拓展知识面。

(6)习题与试卷。包括各章节的相关习题、历年考题以及平面设计师认证考试的模拟试题,方便了学习者的自我检测。

(7)学生作品。选取优秀的学生作品和大赛获奖作品进行展示。此栏目不仅能够激发学生的积极性,又展示了课程的教学效果,对学校的教学起到宣传作用。

(8)讨论区。在讨论区学生可以进行学习交流、资源共享、信息以及作品展示等,该栏目加强了师生之间的联系。

2.3.2 网站拓扑图

图1为网站拓扑图。

2.3.3 确定设计工具

开发一个好的课程网站要选择好开发工具和开发技术,网站的静态部分使用Dreamweaver来制作,利用Photoshop设计网页界面和处理图像,网站的动态交互部分采用ASP和SQL实现,IIS为系统运行服务器。

3 网站建设

3.1 设计首页界面

3.1.1 绘制首页草图

确定了首页各项栏目及位置之后,开始设计首页的版面,将首页做一个简单的规划(如图2所示),包括导航栏、网站Banner、正文、版权信息。

3.1.2 首页效果图

使用Photoshop制作效果图,将文件规格设置为宽度780像素,高度800像素,分辨率为300像素/英寸。效果图制作完成后借助参考线进行划分,然后使用切片工具沿参考线切片(如图3所示),并将其存储为Web所用格式,系统则自动生成一个文件夹,保存所有的切片。

需要注意的是:切片时要按照Dreamweaver表格能实现的区域进行划分,切忌切片过于复杂[1];为了整个网站风格的统一,网站中的其他网页也采用类似的形式。

3.2 创建站点

在制作网站时创建一个本地站点文件夹,这个文件夹用来存放和管理站点中的所有文件,该文件夹的四个子文件夹,分别是image、video、courseware、works,分别用来存放网页的图片、教学视频、电子课件和学生作品。

启动Dreamweaver新建站点,站点名称为“平面设计课程教学网站”,本地根文件夹则设置为上面所建的本地站点。

3.3 网站建设中的关键点

3.3.1 网页的布局

网页的布局方式一般有:表格布局、框架布局及层布局。本站点中的网页采用表格布局,表格比较容易设置和定位,方便管理调用,比较适用于排版统一的网页[3]。不采用单一层进行布局是因为层的绝对定位方式导致网页的稳定性不高,层的位置会跟随显示分辨率的变化而移动,造成页面混乱。

3.3.2 模板和库的使用

由于网站中所有网页的布局和界面大体一致,在制作和修改网页时借助模板减少重复的工作量。避免了相同部分的输入,而且在更新网站时,只需修改模板,系统就能自动更新基于这个模板的所有网页。

此外还将网页中的内容的许多共性部分(如版权信息等)定义为库元素,将其应用在每个页面需要的地方。与模板类似,当相关信息发生改变时,不必每个页面都进行修改,只需修改库元素就会自动更新全部网页。

3.3.3 锚点链接

实验实训、学习指南、学生作品等网页的特点是内容分类多,但各项包含的内容少。如学生作品分为海报设计、包装设计、书籍封面设计等七个分类,而每一类展示的作品只有八幅,这样就可以在页面的右侧设计一个内部导航条,为其添加锚点链接。

这种设计方式是将全部内容放置在一个页面上,浏览时利用锚点在同一页面的不同位置进行跳转。这样一来,在浏览不同类别的内容时无需打开新的页面或刷新页面,提高了浏览速度,而且维护方便,省去大量重复代码,减少了文件容量。

3.3.4 流媒体

教案与视频页面需要将教师授课视频上传至网站,考虑到传输网络的带宽、观看者等待时间和视频分辨率等因素,将所有视频统一转换为Flv格式。Flv的全称是Flash video,是一种流媒体的格式,边下载边播放,形成的文件较小,加载速度快,分辨率适中。

3.3.5 以学生为中心

在网站的规划和实现方面都坚持以学生为中心。例如:针对不同水平的学生提供不同的教学进度和学习目标,并配合难易度不同的课件、教学视频以及课后习题;在讨论区设置教师答疑版块,集中解决学生学习中遇到的问题;设置反馈意见电子信箱,收集学生的意见和建议;网站栏目和内部导航条的划分符合学生的认知心理等,真正实现了由以教师为中心向以学生为中心的转变。

3.3.6 网站的更新

一个好的课程网站不仅需要建设,更需要不断更新维护。许多高校都建立了课程网站,但是建成后没有后期的更新维护,成了“一建了之”的工程,降低了网站的生命力,没有达到促进教学的最终目的。

平面设计课程发展速度很快,软件不断升级、国际流行设计不断变化。笔者刚接触Photoshop时的CS版本升级到现在CS4版本只用了四年的时间,增加了几十项功能。为了让课程跟上时代的步伐,不断吸纳最新的教学成果和研究成果,完善的教案、习题、视频等教学资源[4],并将讨论区里优秀的学生原创作品提炼出来充实到网站中,实现网站的滚动建设,延长生命力。

4 总结

课程网站的建设是教学模式和教学手段改革的一项重要内容,课程网站可以实现优秀教学资源和教学成果的共享,提高教学质量。通过一年的运行证明效果良好,学生自主学习的积极性增加,教师的业务水平也有所提高。课程网站的建设是一项长期的工作,需要在教学实践中不断总结和完善。

参考文献:

[1] 智丰电脑工作室.Dreamweaver8网站设计制作入门与提高[M].北京:中国林业出版社,2006.290-292,298.

[2] 王向红.“微机原理及接口技术”课程网站设计和实现[J].中国现代教育装备,2007(9):51-52.

[3] 王凤兰,赵应旺.花卉精品课程建设中网站的构建初探[J].农业与技术,2007(7):164.

[4] 李士梅,龚盛昭.基于Web技术的精品课程网站设计与维护[J].广东轻工职业学院学报,2008,7(1):10-11.

[5] 邱胜桦,陈城钊. 《大学物理学》精品课程网站的设计与制作[J]. 韩山师范学院学报,2008,29(3):98-99.