精品課程網站建設中的問題和解決方法

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

關鍵詞：百分百布局；flash；PPT；banner

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

1引言

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

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

2版面設計

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

2.1百分百布局問題

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

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

我們可以看到，網頁的四周都有空白區域。基于這個問題，我們可以在body的代碼中加入以下代碼：

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

效果如圖2：

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

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

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

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

這只是一種布局，真的要讓效果很好，就需要我們為網頁添加很好的背景，使整個網頁渾然一體。也就是我們上面說到的網頁標準色彩問題。

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

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

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

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

在我們制作的網頁中，我們將圖7的區域叫做用戶界面。<

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

2.2banner制作

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

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

插入一個一行二列的表格，表格寬度為100%。左邊單元格中插入圖片left.jpg，對齊方式為居左，背景圖片為middle.jpg。右邊的單元格插入圖片right.jpg，設置寬度為圖片的寬度。這樣一來，當瀏覽器寬度變化時，左邊單元格寬度也隨之變化。由于middle.jpg作為背景，隨著單元格的寬度變化，自動在x方向重復。形成了網頁頂端圖片左右部分固定，中間部分拉伸的效果。如圖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始終浮動在網頁頂端居中的方法：

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

＜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，這樣達到了預期的效果。

3媒體插入

3.1flash播放問題

據統計，從2003年以來，網頁的平均體積已經增長了三倍。當頁面打開的時候，用戶看到最多的是圖形，而不是文字，圖形是網頁中最主要的對象。而生動有趣的動畫圖形更是現代網頁必不可少的元素。其中就以flash最具代表作用。試想，如果一個網站沒有一點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無法播放一定另有原因。

隨后我們發現，生成的模板頁的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的運行，所以我們經常忽略了這些錯誤的存在。

同樣的，在上面的flash代碼中，也存在著這樣的錯誤。因為上面的flash代碼是在網上下載下來的，而且查看的各類資料中都是這樣的代碼，所以我們一直以為插入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網頁發布問題：

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

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

使用方法如下：

1) 打開要轉換的PowerPoint文檔

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

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

4結束語

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

參考文獻：

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

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

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