《網(wǎng)頁配色訓(xùn)練系統(tǒng)》課件的設(shè)計與實踐

摘 要：《網(wǎng)頁配色訓(xùn)練系統(tǒng)》課件是針對網(wǎng)頁配色課程所構(gòu)建的一個概念框架多媒體學(xué)習(xí)軟件，是輔助學(xué)習(xí)者進行網(wǎng)頁配色課程學(xué)習(xí)過程的一個概念框架訓(xùn)練而運用的，通過該軟件的訓(xùn)練，讓學(xué)習(xí)者從訓(xùn)練的過程中，構(gòu)建配色視覺感知和配色方法，從而形成課程學(xué)習(xí)的知識意義上的建構(gòu)。本文從課件設(shè)計的角度上，運用Authorware軟件，闡述了《網(wǎng)頁配色訓(xùn)練系統(tǒng)》課件的設(shè)計與實踐。

關(guān)鍵詞：網(wǎng)頁配色；概念框架；視覺感知；配色方法；知識建構(gòu)

中圖分類號：TP3-4

中職學(xué)校學(xué)生的學(xué)習(xí)不同于同齡的普通高中學(xué)生的學(xué)習(xí)，一方面與職業(yè)教育要求學(xué)生入學(xué)時所具備的學(xué)習(xí)要求和特點有關(guān)，另一方面，也與學(xué)生心理因素和心理結(jié)構(gòu)有關(guān)，為了能夠讓學(xué)生進入學(xué)習(xí)過程并有效的完成專業(yè)課程的學(xué)習(xí)任務(wù)，我們要從學(xué)生學(xué)習(xí)認(rèn)知結(jié)構(gòu)上來迎合學(xué)生的學(xué)習(xí)方式。也就是要從學(xué)生學(xué)習(xí)的知識、能力和態(tài)度上，建構(gòu)一種適應(yīng)學(xué)生個體知識學(xué)習(xí)的環(huán)境，基于這種中職學(xué)生學(xué)習(xí)準(zhǔn)備嚴(yán)重不足的特點，除在教學(xué)計劃有所突破外，還要在具體專業(yè)課程教學(xué)環(huán)境上要有所創(chuàng)新。為此，我們研發(fā)的《網(wǎng)頁配色訓(xùn)練系統(tǒng)》課件就是為了給學(xué)習(xí)網(wǎng)頁配色課程的學(xué)生構(gòu)架一個知識概念框架訓(xùn)練的學(xué)習(xí)支架，讓學(xué)生們通過這種支架式教學(xué)學(xué)習(xí)，最終對學(xué)習(xí)專業(yè)課程知識的意義建構(gòu)。本文闡述了《網(wǎng)頁配色訓(xùn)練系統(tǒng)》（簡稱：配色系統(tǒng)）課件的設(shè)計與實踐，為設(shè)計者提供一個參考和借鑒之用。

1 配色系統(tǒng)的設(shè)計思想

1.1 配色系統(tǒng)理論的構(gòu)成

針對中職學(xué)生學(xué)習(xí)能力的特點，整個網(wǎng)頁配色訓(xùn)練系統(tǒng)是基于一種網(wǎng)頁配色概念框架的知識學(xué)習(xí)系統(tǒng)而構(gòu)建，是為了適應(yīng)網(wǎng)頁配色課程教學(xué)任務(wù)中一個階段性教學(xué)的輔助學(xué)習(xí)訓(xùn)練之用，就如同計算機基礎(chǔ)課程中的打字訓(xùn)練一樣，其系統(tǒng)設(shè)計刪減了變形模板訓(xùn)練和自由式配色訓(xùn)練部分，系統(tǒng)制作具備有如下功能：（1）選擇固定的網(wǎng)頁模板格局；（2）隨機生成一組色彩搭配卡，選用目前網(wǎng)頁流行的配色（從2006年-2012年的流行的網(wǎng)頁配色數(shù)據(jù)源）作為配色訓(xùn)練生成的色彩卡數(shù)據(jù)源；（3）通過對色彩的選擇拖拽移動到模版的相應(yīng)區(qū)域，實現(xiàn)目標(biāo)交互式控制對不同區(qū)域進行顏色和文字進行填充，以及再重復(fù)填色；如圖2所示；（4）操作幫助直接置于主界面中進行說明； 教學(xué)知識點置于主界面下面的空白之處，便于學(xué)生操作時，每選擇更換一組顏色組都會顯示不同的知識點的說明；（5）對每種選擇的色塊提供RGB的色值，便于設(shè)計參考使用；（6）通過屏幕硬復(fù)制把所要的配好的界面保留起來。

1.2 配色系統(tǒng)的運行界面

為了更好的方便學(xué)生掌握教學(xué)知識點，系統(tǒng)提供了配色相關(guān)知識融入于網(wǎng)頁配色概念框架中，當(dāng)每更換一組顏色值就會更換配色相關(guān)的教學(xué)知識點，讓學(xué)生們一邊配色，一邊理解和學(xué)習(xí)概念構(gòu)架所提供的與網(wǎng)頁配色相關(guān)的教學(xué)知識的概念。從而為學(xué)生搭建一個網(wǎng)頁配色概念框架的可交互操作的訓(xùn)練平臺.

1.3 配色系統(tǒng)的操作說明

（1）配色系統(tǒng)操作非常簡單，學(xué)生可根據(jù)自己喜歡的顏色，選擇每組不同搭配的顏色進行配色；（2）只需用鼠標(biāo)單擊每個所需色塊，單擊鼠標(biāo)左邊的按鈕不要松手，拖拽到網(wǎng)頁框架中的區(qū)域中，松開鼠標(biāo)按鈕，即可配置出區(qū)域的顏色來；（3）提供了模板使用的說明，簡單明了容易操作；（4）每更換一組顏色組都會更換不同的配色相關(guān)知識點，讓學(xué)生在配色之中，逐步掌握配色知識學(xué)習(xí)的概念構(gòu)建，無需教師專門的單一講解，構(gòu)建一種“做中學(xué)，學(xué)中做”教學(xué)概念性框架平臺。

2 《配色系統(tǒng)》設(shè)計步驟與方法

2.1 《配色系統(tǒng)》課件的設(shè)計流程

配色系統(tǒng)整個設(shè)計流程如圖1所示，特別說明只給出基本模版配色設(shè)計，其余兩個模版是為系統(tǒng)擴充之用，篇幅有限不再贅述。

圖1

2.2 《配色系統(tǒng)》主要步驟設(shè)計

（1）窗口設(shè)置計算圖標(biāo)中的腳本代碼如下：

ResizeWindow（980，625）

AddLinear（_BranchList，IconID@RootIcon ^\"， 0\"）

repeat while ListCount（_BranchList）>0

_ParentIcon：=GetNumber（1， _BranchList[1]）

repeat with _ChildNum ：=1 to IconNumChildren（_ParentIcon， GetNumber（2， _BranchList[1]））

_ChildIcon：=ChildNumToID（_ParentIcon，_ChildNum， GetNumber（2， _BranchList[1]））

if IconType（_ChildIcon） = 12 then

AddLinear（_BranchList，_ChildIcon^\"， 0\"）

AddLinear（_BranchList，_ChildIcon^\"， 1\"）

AddLinear（_BranchList，_ChildIcon^\"， 2\"）

else if IconNumChildren（_ChildIcon） > 0 then

AddLinear（_BranchList，_ChildIcon^\"， 0\"）

end if

Movable@_ChildIcon：=FALSE

end repeat

DeleteAtIndex（_BranchList， 1）

end repeat

這段程序是將當(dāng)前流程圖下的所有圖標(biāo)的可移動屬性設(shè)置為FALSE，也就是在編輯狀態(tài)下不能被移動，從而來保證程序在之行狀態(tài)下，界面元素不能被輕易的移動，以保證程序之行操作的效果。增加這段程序的控制是為了保證用戶不能在運行狀態(tài)中改變圖標(biāo)對象的位置，但整個代碼并不影響程序中局部改變某些圖標(biāo)的可移動屬性。

（2）初始配色值、色卡數(shù)據(jù)源和配色知識點三個計算圖標(biāo)中，主要是利用數(shù)組結(jié)構(gòu)存放色彩卡數(shù)據(jù)源，配色教學(xué)知識點及程序運行的初始設(shè)置，其數(shù)據(jù)結(jié)構(gòu)設(shè)計設(shè)置如下：

分別用r[*]，g[*]，b[*]數(shù)組存放構(gòu)建色彩值數(shù)據(jù)源，用tm[*]；nr[*]數(shù)組分別存放教學(xué)知識點標(biāo)題和教學(xué)內(nèi)容；諸如：

r[1]：=255；g[1]：=255；b[1]：=255

r[2]：=9；g[2]：=9；b[2]：=9；

……

tm[1]：=\"配色\"

nr[1]：=\"所謂配色，簡單來說就是將顏色擺在適當(dāng)?shù)奈恢?，做一個最好的安排?！璡"

（3）程序整體結(jié)構(gòu)采用框架導(dǎo)航設(shè)計，其中控制程序交互導(dǎo)航是完成更新顏色卡的變更，另一個是控制程序退出。而配色模板群組圖標(biāo)是完成整個配色目標(biāo)拖拽的設(shè)計，其附屬計算圖標(biāo)主要是完成更新顏色數(shù)據(jù)的取值，其腳本代碼如下：

Movable：=FALSE

--畫出第一塊顏色的RGB值

aa1：=r[3*k-2]

gg1：=g[3*k-2]

bb1：=b[3*k-2]

SetFrame（1，RGB（aa1，gg1，bb1））

Line（25，x+h，y，x+h，y）

--畫出第二塊顏色的RGB值

x1：=x+76

aa2：=r[3*k-1]

gg2：=g[3*k-1]

bb2：=b[3*k-1]

SetFrame（1，RGB（aa2，gg2，bb2））

Line（25，x1+h，y，x1+h，y）

--畫出第三塊顏色的RGB值

x2：=x1+76

aa3：=r[3*k]

gg3：=g[3*k]

bb3：=b[3*k]

SetFrame（1，RGB（aa3，gg3，bb3））

Line（25，x2+h，y，x2+h，y）

……

其余三塊與上面雷同不在重復(fù)。

本設(shè)計是一個讓用戶將備選的顏色塊拖到模板目標(biāo)區(qū)域的設(shè)計方法，在設(shè)計中，將用戶把要求的對象拖到區(qū)域位置的行為視為用戶正確的操作，考慮到實際配色訓(xùn)練的情況，正確的拖動允許將對象放到目標(biāo)位置的中心位置，錯誤的拖動需要將對象再次移回原處，以便用戶的再次選擇；目標(biāo)區(qū)域交互項提供了常見的這幾種處理方式，使用時應(yīng)該充分利用這一點。多媒體教學(xué)軟件的靈魂就在于靈活的交互性；設(shè)置問題，允許用戶將問題的待選項對象拖動到目標(biāo)位置，即目標(biāo)區(qū)域交互類型，這是一種全新的交互形式，給用戶全方位的思考和動手的機會。

3 結(jié)束語

配色系統(tǒng)程序的目的在于幫助設(shè)計者了解AW編程設(shè)計的理念，而不是為用戶提供特定的功能模塊，希望能夠從配色系統(tǒng)中獲得設(shè)計上的啟示，開發(fā)Authorware或其它高級編程語言的培訓(xùn)軟件，筆者認(rèn)為這是一個可以借鑒編程課件案例，而從教學(xué)角度上，為學(xué)生學(xué)習(xí)網(wǎng)頁配色課程構(gòu)架一個概念性學(xué)習(xí)框架的支架，便于學(xué)生的學(xué)習(xí)和避免枯燥的理論講解。

參考文獻：

[1]王爽，徐仕猛，張晶.網(wǎng)頁設(shè)計與網(wǎng)頁配色[M].北京：科學(xué)出版社，2011.

[2]黎芳.網(wǎng)頁設(shè)計與配色實例分析[M]. 北京：兵器工業(yè)出版社，2006.

[3]金揚，潘潔.網(wǎng)頁設(shè)計模塊[M].南昌：江西美術(shù)出版社，2006.

[4]畢廣吉.Authorware多媒體程序設(shè)計與典型實例[M].北京：人民郵電出版社，2004.

[5]袁海東.深入Authorware7.0編程[M].北京：電子工業(yè)出版社，2004.

[6]權(quán)智殷[韓].設(shè)計師談網(wǎng)頁色彩與風(fēng)格[M].北京：電子工業(yè)出版社，2005.

作者簡介：余湛（1981.01-），男，邵武人，團委書記，講師，蘭州理工大學(xué)信息管理與信息系統(tǒng)管理學(xué)學(xué)士，研究方向：計算機教學(xué)。

作者單位：福建省僑興輕工學(xué)校 信息科，福建福清 350301