基于图像模型开发课程网站的探究

姚 琪

摘要:当前精品课程建设处于高速发展阶段,精品课程的建设推动了高等教育教学改革的发展。精品课程的建设开发周期短,高校需要寻找一种高效的课程开发模式。文章主要研究利用图像模型开发课程网站,该方式便于教师自主开发课程网站,便于学校大规模开展课程建设。

关键词:图像模型;精品课程;课程网站;网站制作

精品课程的建设主要包括两个方面:一是课程资源建设,二是课程网站建设。课程资源建设是精品课程的核心;课程网站建设是资源的展示平台,是推进器、催化剂。没有充实的、富有特色的课程资源,精品课程建设将无从谈起,但没有网站的精美加工,再好的资源也将缺失表现力,无法被浏览者所理解。精品课程从立项到建设完成,时间紧、任务重,采用快速高效的课程开发模式建设课程网站是所有高校追求的目标。

一、精品课程网站建设现状

精品课程要求具有五个一流,即一流教师队伍、一流教学内容、一流教学方法、一流教材、一流教学管理,这不仅是针对课程资源建设,更是对网站制作者的考验。经历几年的发展,主要有以下几种开发形式:

1.采用系统平台制作课程网站

目前市场有很多精品课程开发平台,快速、高效、简单易用的特点被众多高校所追捧。但随着高校课程建设的深入,缺乏特色、创新成为采用平台建设网站的弊病,所有采用同系统制作的网站千篇一律,不同学科的重点内容无法得到有效展示。

2.聘请网络公司制作课程网站

课程建设团队的教师大部分时间需要处理课程资源内容,并且对于网站制作也不专业,聘请网络公司制作网站逐步取代采用平台开发课程。这样的网站优点是制作精美、有特色、技术含量高。但是缺点也很快暴露,由于公司技术员不懂得教学结构的安排,栏目的设计、后期的维护修改等成为最大的问题。

3.教育技术人员制作课程网站

教育技术人员精通网站技术,又熟悉教学设计和教学方法,关键是对精品课程建设的要求和指标有较为深入的研究,在某些方面可以指导教师如何更为合理地建设精品课程,因此请教育技术人员制作课程网站是最佳选择。但是由于各高校建设的课程门数多,人员缺乏、精力不够、影响其本职工作等都成为最大的障碍。

从以上课程建设的形式可以看出各有利弊,高校需要寻找一种更为便捷、有效、适合教师自主开发课程网站的方式,也便于高校今后开展大规模的课程建设。经过多年的实践探索,发现利用图像模型建设课程网站是一种行之有效的方式。

二、基于图像模型建设课程网站优点

1.网站整体设计统一

采用该技术开发网站是基于图形的,图片样式即是网站的雏形。课程网站主次页面的外观效果可直观显现,便于将页面风格统一,尤其是色彩色调和布局的统一。从历年国家精品课程建设过程看,发现很多网站的页面样式不统一,缺乏整体感,极大影响了精品课程的展示效果。

2.网站精美,不变形

由于精品课程网站有大量的教学资源需展示,网站首页作为第一张画面更应以最好的形象展示给观众。对比2003年到2009年的精品课程网站,可以明显看出网站页面美化度有了很大的提高。利用传统的网页技术,很难实现精美效果。但是利用图片模型来制作网站,将网站的设计思路转换为平面设计。图片设计比网站设计要简单、效果更好、不易变形、更直观,理念上的转变、方法上的变革彻底改变了网站内容的呈现效果。

3.网站制作更加简便、快速

图片模型一旦设计完成,那么网站制作将变得非常简单。只需将图片切割,就可以生成精美的静态网页,而且效果与图片一致。这时只需填充课程资源即可。

三、基于图像模型制作网站的流程

1.图片风格设计

根据课程特色和学科类别设计图片风格,这是网站制作的原则和基础。网站风格是给观众的第一印象,主要关注一下几个方面:

(1)结构一致性。网站结构是网站风格统一的重要手段,包括网站布局、文字排版、导航的统一等。首页模型设计结构是否一致,直接影响其他模型的风格。

(2)色彩的一致性。保持模型主体色彩的一致,只改变局部色块。这样做的优点是一个独特色彩的网站会给人留下深刻的印象,因为人的视觉对色彩要比布局更敏感,更容易在大脑中形成记忆符号。比如可选取一两种主要色彩,几种辅助色彩。

(3)导航统一。导航是网站的一项重要组成部分,导航设计合理对网站布局的影响很大,而且影响浏览整个网站的便捷性。

(4)特别元素的一致性。在网站平面设计中,个别具有特色的元素(如标志、象征图形等)重复出现,会给访问者留下深刻印象。比如网站结构在某一点上的变化,由直线变为圆弧、暗色点缀的亮色、色彩中的补色等等。

2.图片色彩设计

(1)色系一致性。采用相同色系设计图片模型是保持一致性的關键。所谓相同色系,是指几种色彩在360°色相环上位置十分相近,大约在45°左右或同一色彩不同明度的几种色彩。

(2)局部色调互补对比。局部运用对比色或互补色来增加变化,避免采用相同色系造成页面的单调。所谓对比色,是指色相环相距较远,大约在100°左右,视觉效果鲜亮、强烈。而互补色则是色相环上相距最远的连种色彩,即相距180°,其对比关系最强烈、最富有刺激性,往往使画面十分突出,特别适合突出重点栏目,但在使用中注意使用的度,否则容易造成色彩的花。

(3)过渡色调和。过渡色包括几种形式:两种色彩的中间色调、单色中混入黑、白、灰进行调和以及单色中混入相同色彩进行调和等等。过渡色能够神奇地将几种不协调的色彩统一起来。

3.图片版面设计

(1)分栏设计。课程网站的内页布局一般比较简单,即内页的一栏式、不等分两栏式、三栏式版面布局,但因为浏览器宽幅有限,一般不宜设计成三栏以上的布局。

(2)导航设计。版面布局中主要是考虑导航、必要信息和正文的布局关系。比较多的情况是采用顶部放置必要的信息,如课程名称、课程特色及导航条,或将导航条放在左侧而右侧,这样的布局结构清晰、易于使用。

4.切割图片,生成网页

图像模型设计完成,即可利用Photoshop切片工具切割页面,进而生成网页。

(1)切图。切图是网页设计中非常重要的一环,它是我们标明哪些是图片区域,哪些是文本区域的重要步骤。另外,合理的切图还有利于加快网页的下载速度。

(2)生成WEB页面。对已经切割完成的图片进行“另存为WEB页”操作即可生成静态课程网站框架,图片自动会生成一个html页面和images文件夹。

5.内容填充

资源内容的填充位置和显示大小在设计模型时已经设计完成,因此内容的填充样式要符合网站框架结构,否则会直接破坏前期设计的网站结构,影响整体风格,对此我们通常采用以下几种方式:

(1)将文档转换为swf文件。在精品课程建设中,大量的文字内容放入网页显示会出现排版异常、字体混乱情况,并且影响页面美观。常用的方法就是将Word、PPT等文档内容转化为swf文档后,插入课程网站。这样做的优点是字体、排版不变形,节约版面设计,保持页面美观,并且可对文档进行滚动、放大、缩小操作。这也是在精品课程建设过程中对大批量网络文档用的最多的方式。

(2)将文档转化为网页。将文档另存为web页,将此单独作为课程网站的一个页面。这对于单个简单排版的文档可以这样处理。如果文档中有图表、图片等复杂内容,则不适合采用此种方式。

(3)复制文字到网页。对于只有少量文字且简单排版文档的可先复制到记事本中,然后再复制到课程网页中。如果直接从文档复制到网页则也会出现排版异常现象。

(4)特殊效果文字显示。对于网站页面中需有特殊效果的文字插入,可通过互联网络查找相关特效代码,然后将整个特效代码拷贝到相应的网页代码位置即可。

6.细节调整

为使课程网站整个风格统一,尤其是文本内容格式统一,这就要用到CSS样式表。利用CSS样式表,可方便对整个网站主体文字的批量修改。因此充分利用CSS样式表,一方面可实现网站主体文字风格的统一,另一方面便于今后快速高效修改文字格式。

四、利用图像模型开发网站的注意点

1.模型像素设计

每个网站的大小(宽*高)都要符合浏览器的大小,页面过大的网页浏览器放不下,不方便浏览者观看内容,有时无法凸显特色栏目。因此页面大小在设计模型时就需要注意,通常页面大小为1024*768像素。

2.切片方式

对模型的切片转换到网页中是一个个拼接的表格,因此如何切片,先后顺序,切片的多少都会直接影响到后面课程资源内容的填充,因为表格极易被破坏。建议事先规划,保留PSD原图,多次尝试。

3.CSS样式表设计

利用样式表便于网站形成统一风格,样式表的设计可通过Dreamwaver进行设计,形成单独的文件,分别套用给每个网页,这样便于今后统一修改。

4.冗余代码清除

设计者在制作页面完成后,最好执行清理冗余代码操作,这样可使网页执行效率更高,占用容量更小。

参考文献:

[1] 教育部.关于启动高等学校教学质量和教学改革工程精品

课程建设工作的通知(教高[2003]1号)[EB/OL].http://

www.jpkcnet.com/new/zhengce/Announces_detail.asp?Announces_ID=13.

[2] 姚恩全.“三位一体”的精品课程建设范式研究[J].四川师

范大学学报(社会科学版),2006,(6):56-60.

[3] 杨世勇.对国家精品课程建设的思考[J].现代教育科学,

2004,(11):19-20.

[4] 王玲华.国家精品课程支持技术问题分析[J].济南职业学

院学报,2006,(3).