兩種流行網(wǎng)站設(shè)計(jì)技術(shù)的研究與實(shí)現(xiàn)

摘要:網(wǎng)站開(kāi)發(fā)技術(shù)發(fā)展日新月異，新技術(shù)層出不窮，滿足了網(wǎng)站更強(qiáng)大的功能和頁(yè)面更美觀的需求，當(dāng)前，新聞幻燈播放和多視頻點(diǎn)播兩種技術(shù)是在各大網(wǎng)站上經(jīng)常使用的流行技術(shù)，但由于現(xiàn)在網(wǎng)站開(kāi)發(fā)基本都采用動(dòng)態(tài)語(yǔ)言編寫代碼，這類語(yǔ)言一般都在服務(wù)器端運(yùn)行，隱藏性很好，客戶端不能查看其源碼，所以也很難獲知技術(shù)的具體實(shí)現(xiàn)過(guò)程，該文結(jié)合腳本語(yǔ)言的使用，對(duì)這兩種技術(shù)進(jìn)行了研究與實(shí)現(xiàn)。

關(guān)鍵詞:網(wǎng)站開(kāi)發(fā);新聞幻燈播放;視頻點(diǎn)播

中圖分類號(hào):TP393文獻(xiàn)標(biāo)識(shí)碼:A文章編號(hào):1009-3044(2009)26-7387-03

The Reaserch and Realization of two Popular Website Design Technologies

HONG Ying

(Beijing Institute of Fashion Techinology， Beijing 100029，China)

Abstract: The development of website development technology is so rapid. New technologies are emerging one after another.It meets the needs of more powerful website and more beautiful page.Presently，two technologies，news slideshows and video on demand are popular and ofen used in many websites. But the development of website always use dynamic language which run in the server side and is well hidden can not be viewed in the client side. Therefore， it is very difficult to achieve informed of the specific process technology.This paper researchs and realizes this two technologies combined with the use of scripting languages.

Key words: website development; news slideshows; vod

當(dāng)今社會(huì)已經(jīng)進(jìn)入了高速網(wǎng)絡(luò)時(shí)代，人們對(duì)網(wǎng)絡(luò)的依賴程度越來(lái)越大，網(wǎng)絡(luò)成為人們獲取知識(shí)、查詢信息和休閑娛樂(lè)的重要工具，這就要求網(wǎng)絡(luò)往更大信息量、更多功能化和更人性化方面發(fā)展，網(wǎng)絡(luò)不僅要帶來(lái)豐富的信息，但又不能是簡(jiǎn)單的信息堆砌，要給訪問(wèn)者以好的視覺(jué)享受和方便的信息導(dǎo)向，這也導(dǎo)致了新的網(wǎng)站開(kāi)發(fā)技術(shù)不斷涌現(xiàn)。一種新的網(wǎng)站技術(shù)的出現(xiàn)，通常會(huì)快速覆蓋整個(gè)網(wǎng)絡(luò)，推動(dòng)整個(gè)網(wǎng)站技術(shù)的發(fā)展，當(dāng)前新聞幻燈播放和視頻點(diǎn)播兩種技術(shù)在各大網(wǎng)站中屢見(jiàn)不鮮，作者在實(shí)際網(wǎng)站設(shè)計(jì)中也深有體會(huì)，而且發(fā)現(xiàn)網(wǎng)絡(luò)中對(duì)于這些技術(shù)的實(shí)現(xiàn)幾乎沒(méi)有完整的資料，鑒于此，作者對(duì)于這兩種技術(shù)做了研究與實(shí)現(xiàn)。

1 兩種常用技術(shù)的實(shí)現(xiàn)

目前絕大多數(shù)網(wǎng)站都是用動(dòng)態(tài)語(yǔ)言結(jié)合腳本語(yǔ)言開(kāi)發(fā)的，動(dòng)態(tài)語(yǔ)言比如JSP、PHP等，這些語(yǔ)言一般都在網(wǎng)站服務(wù)器端運(yùn)行，把運(yùn)行結(jié)果返回客戶端，所以代碼的隱蔽性很好，客戶端一般很難看到實(shí)際的源代碼，那么也就很難獲知某種網(wǎng)站技術(shù)的具體實(shí)現(xiàn)過(guò)程。但是技術(shù)的實(shí)現(xiàn)是多樣性的，下面就結(jié)合Javascript腳本語(yǔ)言和Flash技術(shù)來(lái)實(shí)現(xiàn)常用的這兩種網(wǎng)站技術(shù)。

1.1 新聞幻燈播放技術(shù)

新聞幻燈播放技術(shù)常見(jiàn)于各網(wǎng)站的首頁(yè)，它是在網(wǎng)頁(yè)上將圖片新聞以幻燈片的方式自動(dòng)切換，訪問(wèn)者點(diǎn)擊感興趣的圖片就會(huì)鏈接到相應(yīng)的新聞內(nèi)容，這種技術(shù)使網(wǎng)頁(yè)更動(dòng)感、更美觀也更能吸引訪問(wèn)者的眼球，現(xiàn)在很多網(wǎng)站尤其很多大的門戶網(wǎng)站都使用了這種技術(shù)，也使得這種網(wǎng)頁(yè)設(shè)計(jì)技術(shù)成為了現(xiàn)在流行的技術(shù)。一般情況下，只使用Javascript腳本語(yǔ)言就可以實(shí)現(xiàn)新聞幻燈播放效果，但會(huì)產(chǎn)生一些問(wèn)題，第一:圖片動(dòng)態(tài)展示效果不豐富，不能隨心所欲地產(chǎn)生很美觀的展示效果;第二:在不同網(wǎng)頁(yè)瀏覽器下會(huì)產(chǎn)生不同的顯示效果，比如在IE瀏覽器下效果不錯(cuò)，但在oprea瀏覽器下可能就很難看。現(xiàn)在網(wǎng)站上的幻燈新聞播放效果通常是采用Javascript和FLASH技術(shù)結(jié)合使用來(lái)完成的， FLASH不會(huì)出現(xiàn)不同瀏覽器顯示效果不同的情況，而且FLASH文件通常非常小，不會(huì)影響網(wǎng)頁(yè)下載速度，另外，采用FLASH技術(shù)可以設(shè)計(jì)出豐富多彩的動(dòng)態(tài)展示效果，這也是FLASH技術(shù)能成為當(dāng)今網(wǎng)頁(yè)設(shè)計(jì)中的流行技術(shù)的原因。

要實(shí)現(xiàn)幻燈新聞播放效果，首先要制作一個(gè)Flash文件，F(xiàn)lash文件只是設(shè)計(jì)一個(gè)動(dòng)態(tài)展示的效果，F(xiàn)lash文件的尺寸大小和需要呈現(xiàn)的圖片、文字等內(nèi)容需要通過(guò)FlashVars參數(shù)傳入，這樣不僅便于維護(hù)，可以不用修改Flash文件就很方便地改變新聞和圖片內(nèi)容，還可以使幻燈新聞效果套用在不同的網(wǎng)頁(yè)上面。制作完Flash文件以后，我們需要在網(wǎng)頁(yè)中寫點(diǎn)Javascript代碼來(lái)規(guī)定新聞顯示的尺寸大小和讀取圖片地址，并且把相關(guān)參數(shù)傳給Flash文件。通常，大型網(wǎng)站中幻燈新聞效果讀取的圖片等內(nèi)容都是存放在數(shù)據(jù)庫(kù)中的，要首先連接數(shù)據(jù)庫(kù)，然后通過(guò)語(yǔ)句來(lái)讀取，為了簡(jiǎn)便起見(jiàn)，我們這里把圖片放在img文件夾中，并且和網(wǎng)頁(yè)文件在同一目錄，直接通過(guò)相對(duì)地址來(lái)進(jìn)行讀取。下面簡(jiǎn)要分析一下代碼:

/*首先設(shè)置新聞?wù)故局懈黜?xiàng)尺寸*/

var img_width=240 /*幻燈片新聞圖片寬度*/

var img_height=180/*幻燈片新聞圖片高度*/

var text_height=18 /*幻燈片新聞文字標(biāo)題高度*/

var swf_height = img_height+text_height /*Flash展示的高度*/

/*然后定義三個(gè)變量*/

var pics = '';/*用來(lái)存放圖片地址*/

var links = ''; /*用來(lái)存放圖片鏈接地址*/

var texts = ''; /*用來(lái)存放新聞標(biāo)題*/

/*寫一個(gè)函數(shù)，用于讀取鏈接地址、圖片地址和標(biāo)題到相應(yīng)變量*/

function GetParam(url， img， title)

{

if(pics != ' ')

{

pics = \"|\" + pics; /*由于讀取多個(gè)圖片，給地址用|隔開(kāi)*/

links = \"|\" + links;

texts = \"|\" + texts;

}

pics = escape(img) + pics;/*使用escape函數(shù)進(jìn)行編碼，防止出現(xiàn)亂碼，導(dǎo)致讀取錯(cuò)誤*/

links = escape(url) + links;

texts = title + texts;

}

接下來(lái)執(zhí)行函數(shù)，要顯示多少個(gè)新聞圖片就要執(zhí)行多少次函數(shù)，注意函數(shù)讀取的時(shí)候是在前面加豎線分割符，所以必須反序執(zhí)行函數(shù)，也就是先讀取最后一個(gè)圖片內(nèi)容:

GetParam('{URL}#'， 'img/5.jpg'， '新聞標(biāo)題5');/*讀取其他圖片類似，省略*/

最后，我們?cè)诰W(wǎng)頁(yè)中插入前面制作的Flash文件，然后把讀取的變量值通過(guò)FlashVars參數(shù)傳給Flash文件:

FlashVars=\"pics='+pics+'links='+links+'texts='+texts+'borderwidth='+img_width+'borderheight='+img_height+'textheight='+text_height+'\"

幻燈新聞播放的展示效果如圖1所示。

這樣，更改展示圖片內(nèi)容等即可更新新聞，修改Flash文件就可以改變展示效果，而且很方便地放置在不同頁(yè)面上，達(dá)到網(wǎng)站風(fēng)格的統(tǒng)一。

1.2 多個(gè)視頻點(diǎn)播技術(shù)

隨著網(wǎng)絡(luò)技術(shù)的日益發(fā)展，網(wǎng)絡(luò)帶寬也越來(lái)越大，網(wǎng)速也越來(lái)越快，人們不僅可以在網(wǎng)上瀏覽文字圖片信息，也能享受音視頻信息帶來(lái)的快樂(lè)，尤其是流媒體技術(shù)的出現(xiàn)，讓人們告別了下載的等待，直接邊接收邊觀看視頻信息，就和在本地播放一樣，非常流暢。正因?yàn)檫@個(gè)原因，現(xiàn)如今視頻網(wǎng)站發(fā)展很快，比如優(yōu)酷、土豆等網(wǎng)站，訪問(wèn)量都非常大，我們也可以看到，有一種網(wǎng)頁(yè)設(shè)計(jì)技術(shù)非常流行，那就是同一個(gè)播放器播放不同視頻，用戶只需點(diǎn)擊視頻的名稱，播放器就播放相應(yīng)的視頻內(nèi)容，不需要彈出新頁(yè)面。

很多視頻網(wǎng)站的播放器都是自己開(kāi)發(fā)的，通常是用Flash實(shí)現(xiàn)的，比如優(yōu)酷的播放器，原因是Flash設(shè)計(jì)的界面美觀，而且文件小，很適合嵌入網(wǎng)頁(yè)，當(dāng)然，Dreamweaver也提供了在網(wǎng)頁(yè)中插入多媒體的功能，但通常我們要在網(wǎng)頁(yè)中嵌入視頻播放器時(shí)，會(huì)根據(jù)不同的視頻文件格式，插入不同的播放和控制代碼來(lái)實(shí)現(xiàn)，網(wǎng)頁(yè)中可以播放很多種格式的視頻文件，如avi、mpeg、wmv、wma等，實(shí)現(xiàn)的代碼基本類似，我們現(xiàn)在網(wǎng)頁(yè)中嵌入一個(gè)Windows Media Player系列的播放器，在網(wǎng)頁(yè)中插入代碼:

… …

上述代碼相當(dāng)于在網(wǎng)頁(yè)中插入客戶端組件，用于播放視頻文件，其中classid代表組件在注冊(cè)表中的標(biāo)識(shí)，參數(shù)AutoStart值為-1表示打開(kāi)網(wǎng)頁(yè)自動(dòng)播放視頻，為0時(shí)不自動(dòng)播放，參數(shù)Filename代表要播放的視頻文件地址，可以是相對(duì)地址也可以是絕對(duì)地址，還有很多控制播放的參數(shù)，比如全屏、音量控制等由于篇幅關(guān)系此處省略。

由于我們要實(shí)現(xiàn)點(diǎn)擊不同的視頻文件播放器就播放相應(yīng)的視頻，所以組件中參數(shù)Filename初始為空，需要?jiǎng)討B(tài)給它賦值。可以寫一個(gè)Javascript函數(shù)來(lái)實(shí)現(xiàn)值的傳遞:

上面的代碼實(shí)現(xiàn)的是把要播放的視頻文件地址url傳給播放組件MediaPlayer1的Filename參數(shù)，并調(diào)用MediaPlayer1的play()函數(shù)進(jìn)行播放。

我們?cè)诰W(wǎng)頁(yè)上放置四個(gè)視頻文件的名稱鏈接，鏈接形式如下:

視頻鏈接地址1

視頻鏈接地址2

視頻鏈接地址3

視頻鏈接地址4

單擊四個(gè)鏈接地址分別播放不同的視頻內(nèi)容，文件地址分別采用相對(duì)和絕對(duì)方式，onClick指的是單擊該鏈接時(shí)觸發(fā)GetFilename事件，實(shí)現(xiàn)參數(shù)傳遞。href=”#”表示單擊該鏈接時(shí)網(wǎng)頁(yè)不跳轉(zhuǎn)，停留在本頁(yè)面上。

合理布局美化頁(yè)面，最終的效果如圖2所示。

當(dāng)然，為了簡(jiǎn)便和更清晰地說(shuō)明問(wèn)題，本例的視頻文件都是直接和網(wǎng)頁(yè)文件存放在一起，采用相對(duì)路徑即可引用，在實(shí)際網(wǎng)頁(yè)設(shè)計(jì)中視頻文件的路徑通常采用數(shù)據(jù)庫(kù)進(jìn)行存放，那么要把視頻文件的路徑傳給參數(shù)Filename必須進(jìn)行數(shù)據(jù)庫(kù)的讀寫，也很方便。

2 結(jié)論

上述實(shí)現(xiàn)的兩種網(wǎng)站開(kāi)發(fā)技術(shù)具有非常大的實(shí)用性，網(wǎng)絡(luò)上很多網(wǎng)站在首頁(yè)或頻道首頁(yè)上都采用了新聞幻燈播放的效果，增強(qiáng)美感和動(dòng)感。多視頻點(diǎn)播技術(shù)在視頻網(wǎng)站中使用較多，訪問(wèn)者可以很方便地觀看自己感興趣的視頻，當(dāng)然，本文為了更好地闡述技術(shù)實(shí)現(xiàn)，在實(shí)現(xiàn)時(shí)并沒(méi)有結(jié)合數(shù)據(jù)庫(kù)來(lái)操作，所以在實(shí)際網(wǎng)站開(kāi)發(fā)中可以做更好的拓展。

參考文獻(xiàn):

[1] 鄧芹.網(wǎng)站開(kāi)發(fā)技術(shù)比較[J].南昌教育學(xué)院學(xué)報(bào)，2006，21(4):61-63.

[2] 沈玉寶.使用Javascript控制網(wǎng)頁(yè)嵌入Windows Media Player播放器[J].電腦知識(shí)與技術(shù)，2008(4):1109-1114.

[3] 張?jiān)圃?Javascript在動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用[J].計(jì)算機(jī)與信息技術(shù)，2007(5):23-24.