精品課程網(wǎng)站建設(shè)中的問題和解決方法

摘要：本文闡述了網(wǎng)站前臺制作中遇到的一些常見問題，給出了具體的解決方法，具有一定的借鑒性。

關(guān)鍵詞：百分百布局；flash；PPT；banner

中圖分類號：G642 文獻標識碼：B

1引言

隨著計算機網(wǎng)絡(luò)技術(shù)和通信技術(shù)的發(fā)展以及寬帶網(wǎng)的迅速普及，計算機遠程教育成為互聯(lián)網(wǎng)最有前景的應(yīng)用之一。利用Internet來提供一個共享的學習環(huán)境，為所有上網(wǎng)者提供學習機會，是教育信息化的重要目的之一，因此研制和開發(fā)基于Web的精品課程將變得越來越重要。

現(xiàn)將我們在開發(fā)國家級精品課程《天氣學》過程中，遇到的問題和解決方法總結(jié)于此，為后來開發(fā)者提供借鑒。

2版面設(shè)計

設(shè)計網(wǎng)頁的第一步是設(shè)計版面布局。就像傳統(tǒng)的報刊雜志編輯一樣，我們將網(wǎng)頁看作一張報紙，一本雜志來進行排版布局。擁有一個好的布局才能給用戶一種好的視覺感。網(wǎng)站給人的第一印象來自視覺沖擊，要吸引用戶的關(guān)注，我們就要在整體布局和網(wǎng)站的標準色彩上下功夫。

2.1百分百布局問題

在現(xiàn)在的網(wǎng)站設(shè)計中，百分百的設(shè)計理念已經(jīng)成為各網(wǎng)頁設(shè)計者的新寵。在我們的網(wǎng)站中，我們采用了一種對初學者比較容易上手的方案，可以很好的達到我們想要的百分百效果。

首先，看一下沒有做過任何處理的網(wǎng)頁，如圖1：

我們可以看到，網(wǎng)頁的四周都有空白區(qū)域?；谶@個問題，我們可以在body的代碼中加入以下代碼：

＜body style=\"margin:0px; \"＞

效果如圖2：

接下來是考慮分辨率的問題。由于現(xiàn)在的網(wǎng)頁元素太多，我們通常采取絕對定位。但現(xiàn)在電腦的分辨率有很多種，比如1024*768，1280*1024。那么我們的網(wǎng)頁要做成怎樣的分辨率？我們面臨著這樣的問題：當你在1280的分辨率下做網(wǎng)頁時，在1024分辨率的電腦上網(wǎng)頁下方就會出現(xiàn)水平滑動條，如圖3。

當你按照1024的分辨率制作網(wǎng)頁時，在1280的電腦上就會留有一大段空白，如圖4：

顯然，這很難看。于是我們采用了一種簡單的布局。

首先，一個網(wǎng)頁大概可以分為三部分，最上面的頁首，下面的內(nèi)容區(qū)，最下面通常是一些關(guān)于網(wǎng)站的介紹(即頁腳)。我們可以制作三張表格，分別放入這三個內(nèi)容。將放入標題和介紹的表格的寬度設(shè)為100%，即隨著分辨率的不同，寬度自然的拉伸。中間放入內(nèi)容區(qū)的表格我們可以限定它的寬度，比如為1000px，然后我們將這個表格居中。

這只是一種布局，真的要讓效果很好，就需要我們?yōu)榫W(wǎng)頁添加很好的背景，使整個網(wǎng)頁渾然一體。也就是我們上面說到的網(wǎng)頁標準色彩問題。

我們來看下采用這種布局的網(wǎng)頁在1280分辨率的電腦上的效果，如圖5：

很顯然，這已經(jīng)初步達到了我們想要的效果。

如果希望網(wǎng)頁在1280分辨率的電腦上的效果和在1024的電腦上一樣呢？

其實，比較主流的網(wǎng)頁布局方案有兩種：一種是給內(nèi)容區(qū)域設(shè)置固定的像素寬度，把頁面限制在這個寬度之內(nèi)；另一種是讓內(nèi)容區(qū)域不受限制地填滿整個瀏覽器的顯示區(qū)域。而后者就是大家想要的布局。在這里，我們也給出一個比較簡單的解決方法。

在我們制作的網(wǎng)頁中，我們將圖7的區(qū)域叫做用戶界面。<

我們將用戶界面右邊的部分叫做內(nèi)容區(qū)。我們設(shè)置左右兩欄，左邊一欄放置用戶界面，右邊放置內(nèi)容區(qū)。通常，用戶界面的大小是固定的。所以，我們利用絕對定位將用戶界面固定在網(wǎng)頁的左端。內(nèi)容區(qū)中一般是一些文字內(nèi)容，那樣我們可以把右邊一欄的寬度用百分比定義(或者不定義其寬度)。這樣，作品將始終填滿瀏覽器窗口，在改變?yōu)g覽器窗口大小，或是在不同分辨率下瀏覽該網(wǎng)頁，右邊一欄的寬度將相應(yīng)地變大變小。

2.2banner制作

這個網(wǎng)站的banner想做成左右兩端是山，固定在瀏覽器的兩側(cè)，中間是藍天的背景，隨瀏覽器的寬度自動伸縮，飄動著白云。為了實現(xiàn)這種效果，分成圖片和flash兩個部分來完成：

(1) 圖片左右居中中間拉伸的效果

插入一個一行二列的表格，表格寬度為100%。左邊單元格中插入圖片left.jpg，對齊方式為居左，背景圖片為middle.jpg。右邊的單元格插入圖片right.jpg，設(shè)置寬度為圖片的寬度。這樣一來，當瀏覽器寬度變化時，左邊單元格寬度也隨之變化。由于middle.jpg作為背景，隨著單元格的寬度變化，自動在x方向重復(fù)。形成了網(wǎng)頁頂端圖片左右部分固定，中間部分拉伸的效果。如圖8—圖10。

代碼如下：

＜table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"width: 100%; height: 120px\"＞

＜tr＞

＜td style=\"background-image:url(image/middle.jpg);background-repeat:repeat-x;\" align

=\"left\"＞＜asp:Image ID=\"left\" runat=\"server\" ImageUrl=\"~/image/left.jpg\" /＞

＜/td＞

＜td style=\"width:336px\"; align=\"right\"＞

＜asp:Image ID=\"right\" runat=\"server\" ImageUrl=\"~/image/right.jpg\" /＞

＜/td＞

＜/tr＞

＜/table＞

(2) Flash始終浮動在網(wǎng)頁頂端居中的方法：

插入一個div，在div中插入飄動的云和文字的flash，背景設(shè)為透明。

＜div id=\"Div1\"＞

＜object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http:／／download.macromedia.com／pub／shockwave／cabs/flash／swflash.cab#version=7，0，19，0\" width=\"1000\" height=\"120\"＞

＜param name=\"movie\" value=\"image/flashyun.swf\"/＞

＜param name=\"quality\" value=\"high\"/＞

＜param name=\"wmode\" value=\"transparent\"/＞

＜/object＞

＜/div＞

這個flash如果始終浮動在頂端中部會比較美觀，在這里使用了用javascript控制CSS的方法。

#Div1

{

position:absolute;

left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);

top:0px;

width:1000px;

height:120px;

z-index:1;

}

如圖11，這樣達到了預(yù)期的效果。

3媒體插入

3.1flash播放問題

據(jù)統(tǒng)計，從2003年以來，網(wǎng)頁的平均體積已經(jīng)增長了三倍。當頁面打開的時候，用戶看到最多的是圖形，而不是文字，圖形是網(wǎng)頁中最主要的對象。而生動有趣的動畫圖形更是現(xiàn)代網(wǎng)頁必不可少的元素。其中就以flash最具代表作用。試想，如果一個網(wǎng)站沒有一點flash元素，整個頁面就顯得很乏味。

起初，在ASP中插入flash我們選用的代碼是：

＜object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http:／／download.macromedia.com／pub／shockwave/cabs/flash/swflash.cab#version=6，0，29，0\" width=\"150\" height=\"280\"＞

＜param name=\"movie\" value=\"image/flash.swf\"/＞

＜param name=\"quality\" value=\"high\"/＞

＜param name=\"SCALE\" value=\"exactfit\"/＞

＜embed src=\"image/flash.swf\" width=\"150\" height=\"280\" quality=\"high\" pluginspage=\"http:／／www．macromedia.com／go/getflashplayer\"type=\"application/x-shockwave-flash\" scale=\"exactfit\"＞

＜/embed＞

＜/object＞

value=\"image/flash.swf\"即是flash的路徑。

但是在起初的運行中，flash無法播放，影片處就是一塊空白。我們也懷疑是flash的路徑問題，但當我們把flash放入項目的根目錄下時，問題依然存在。

奇怪的是，當我們重新拉出一個框架，插入flash后，它又可以播放了。我們又懷疑，在上一個框架中多次改動html代碼致使flash無法播放。在新的框架下，我們很順利的插入了flash，整個模板頁也基本完成。但更奇怪的是，一個星期后，flash再一次無法播放。很顯然，之前的幾個猜想都不成立，致使flash無法播放一定另有原因。

隨后我們發(fā)現(xiàn)，生成的模板頁的html代碼中一直存在著一些錯誤。如圖12。

＜td colspan=\"2\" style=\"height: 25px; background-color: #ebffff; border-bottom: #0066cc 2px solid;\"＞

＜marquee diriction=\"right\" scrollamount=\"3\" behavior=\"alternate\"＞＜em/＞＜span style=\"COLOR: #003333; FONT-FAMILY: 華文新魏\"＞艱苦樸素、勤奮好學、追求真理、自強不息＜/span＞＜/＞＜/marquee＞

圖12錯誤代碼

在以上代碼中有紅色下劃線的是有錯誤的地方，在錯誤信息欄里我們可以看到，如圖13所示：

由于版本的問題，這些錯誤并不影響ASP的運行，所以我們經(jīng)常忽略了這些錯誤的存在。

同樣的，在上面的flash代碼中，也存在著這樣的錯誤。因為上面的flash代碼是在網(wǎng)上下載下來的，而且查看的各類資料中都是這樣的代碼，所以我們一直以為插入flash的代碼是不會有問題的，即便它在ASP中有錯誤提示，如圖14：

而后我們重新查找資料，重新編寫了flash的代碼，如下：

＜object

classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"

codebase=\"http://download.macromedia.

com/pub/shockwave/cabs/flash/swflash.

cab#version=7，0，19，0\"

style=\"width:1003px;height:137px;

border-top-style: none;

border-right-style: none;

border-left-style: none;

border-bottom-style: none;\"＞

＜param name=\"movie\"

value=\"image/flash.swf\" /＞

＜/object

它是一段正確的而且適用于ASP.NET的代碼。我們重新運行，flash播放無誤。

3.2PPT網(wǎng)頁發(fā)布問題：

把PowerPoint轉(zhuǎn)換為flash有如下兩個明顯的好處：壓縮演示文稿的體積，減少空間占用；更好的兼容性，可以讓演示在任何操作系統(tǒng)或者瀏覽器平臺上使用。另外，生成swf影片同時可以生成html網(wǎng)頁，從而便于網(wǎng)頁鏈接等操作。

軟件ispring提供了這樣平臺，通過嵌入到PowerPoint的工具欄可直接進行相關(guān)格式的轉(zhuǎn)換。如圖15。

使用方法如下：

1) 打開要轉(zhuǎn)換的PowerPoint文檔

2) 單擊publish，根據(jù)需要作相應(yīng)設(shè)置(可以選擇當前選定的單張PPT還是所有ppt，要不要生成html網(wǎng)頁或是exe可執(zhí)行文件等)，如圖16所示：

若有需要，可以通過SlideBoom儲存和分享自己的PPT，進行相關(guān)設(shè)置(如title、topic等)，單擊“Upload”按鈕上傳，上傳后SlideBoom會自動將其轉(zhuǎn)換成flash。如圖17所示。

4結(jié)束語

通常，一個項目到手后，我們應(yīng)當先充分醞釀?wù)麄€網(wǎng)頁的布局與標準色彩。確定好布局后，我們可以充分利用網(wǎng)上資源及身邊的各類資料，豐富自己的網(wǎng)頁內(nèi)容和樣式，如網(wǎng)上下載的文字資料、各類圖片、gif小動畫等，以及繪畫作品、手工制作、作文等。我們還可以利用flash制作小動畫。但應(yīng)注意，在網(wǎng)上搜尋來的答案并非完全正確的，有時候也需要做一定的修改。因為隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，網(wǎng)頁制作工具已經(jīng)有了很多版本，許多網(wǎng)上的代碼自身沒有錯誤，但卻不適用于新的版本。還要注意的就是網(wǎng)頁在不同的瀏覽器下可能會有不同的效果。

參考文獻：

[1] Dave Shea， Molly E.Holzschlag. CSS禪意花園[M]. 北京:人民郵電出版社.

[2] 侯利軍. 精通Web標準網(wǎng)頁布局—XHTML+CSS+JavaScript[M]. 北京:人民郵電出版社.

[3] 王太沖，李巍，馬淑燕. Flash8入門與提高[M]. 北京:清華大學出版社.