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

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

中圖分類號(hào)：G642 文獻(xiàn)標(biāo)識(shí)碼：B

1引言

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

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

2版面設(shè)計(jì)

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

2.1百分百布局問題

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

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

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

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

效果如圖2：

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

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

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

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

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

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

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

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

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

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

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

2.2banner制作

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

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

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

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

＜div id=\"Div1\"＞

＜o(jì)bject 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＞

這個(gè)flash如果始終浮動(dòng)在頂端中部會(huì)比較美觀，在這里使用了用javascript控制CSS的方法。

#Div1

{

position:absolute;

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

top:0px;

width:1000px;

height:120px;

z-index:1;

}

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

3媒體插入

3.1flash播放問題

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

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

＜o(jì)bject 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的路徑。

但是在起初的運(yùn)行中，flash無法播放，影片處就是一塊空白。我們也懷疑是flash的路徑問題，但當(dāng)我們把flash放入項(xiàng)目的根目錄下時(shí)，問題依然存在。

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

隨后我們發(fā)現(xiàn)，生成的模板頁(yè)的html代碼中一直存在著一些錯(cuò)誤。如圖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: 華文新魏\"＞艱苦樸素、勤奮好學(xué)、追求真理、自強(qiáng)不息＜/span＞＜/＞＜/marquee＞

圖12錯(cuò)誤代碼

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

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

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

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

＜o(jì)bject

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的代碼。我們重新運(yùn)行，flash播放無誤。

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

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

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

使用方法如下：

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

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

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

4結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

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