林海燕

?

談主題網(wǎng)站的設計要點

林海燕

網(wǎng)頁設計與網(wǎng)站建設是中職計算機專業(yè)的一門必修課程，如何讓學生更好地掌握網(wǎng)頁與網(wǎng)站的設計方法，是教師在教授本課程時要思考的問題。本文從教學實踐出發(fā)，探討講授主題網(wǎng)站制作的幾點做法。

中職；主題網(wǎng)站；設計要點

目前社會上的各行各業(yè)已經(jīng)離不開互聯(lián)網(wǎng)了，各種主題、風格各異的網(wǎng)站比比皆是，每天上各大網(wǎng)站了解世界新聞已經(jīng)成為人們?nèi)粘Ｉ钪胁豢扇鄙俚牟糠帧５寣W生設計一個主題網(wǎng)站，卻會讓許多學生犯難。本文根據(jù)筆者多年的教學實踐，總結(jié)出學生設計主題網(wǎng)站應該要做的準備功夫。

一、確定網(wǎng)站主題

布置學生制作主題網(wǎng)站，學生往往很茫然，很多學生會不停地問“我應該如何去制作主題網(wǎng)站？”“怎么找素材？”“怎樣布局”……總之，學生會有很多的問題需要解答。再加上目前的中職生基礎比較薄弱，很多網(wǎng)站的設計都不知如何下手。因此，教師在向?qū)W生布置制作主題網(wǎng)站時，首先要學生清楚建立網(wǎng)站的目的是什么？要讓學生明白制作的網(wǎng)站是個人的還是企業(yè)的，是商業(yè)的還是公益的？定義網(wǎng)站主題，要引導學生遵循以下原則：

1.定義主題要小而精。定位要小，內(nèi)容要精。例如，要設計一個詩歌網(wǎng)站，如果把中國從古到今所有的詩歌分類都做進網(wǎng)站，對于初學者來說，就顯得有點力不從心，但如果只是選擇其中一部分，比如唐詩來做成網(wǎng)站，這樣定位就小很多，內(nèi)容也精致很多，對于學生來說這樣反而更能做出一個優(yōu)秀的網(wǎng)站來。

2.選擇自己擅長的內(nèi)容。做網(wǎng)站好比寫文章，有人擅長寫小說，有人擅長寫散文，關(guān)鍵是要選擇自己擅長的內(nèi)容，引導學生根據(jù)自己的興趣以及平時關(guān)注的事情去創(chuàng)作，這樣才容易做出優(yōu)秀的網(wǎng)站作品。

3.根據(jù)網(wǎng)站主題，定好一個好名稱。網(wǎng)站名稱就好比人的名字一樣，有特色，容易記??；或者起一個具備某一方面涵義的名稱，對于網(wǎng)站的形象和宣傳推廣來說，都是很有幫助的。

二、制定網(wǎng)站模塊

確定網(wǎng)站主題后，就要思考該網(wǎng)站由哪些模塊組成，繪制網(wǎng)站的模塊結(jié)構(gòu)圖。例如，現(xiàn)在要設計一個宣傳惠州西湖的網(wǎng)站，可以設計由以下6個模塊組成：西湖新聞、西湖美景、西湖美食、西湖地圖、西湖歷史、聯(lián)系方式。這樣“惠州西湖”網(wǎng)站由1個主頁和6個二級頁面組成，二級頁面下再分若干三級子頁，在繪制模塊結(jié)構(gòu)圖時，至少要畫到二級頁面。

有了模塊結(jié)構(gòu)圖，就可以根據(jù)各個模塊內(nèi)容去收集相應的素材和資源，但素材是多種多樣的，為方便管理以及在使用時進行調(diào)用，教師要引導學生根據(jù)模塊結(jié)構(gòu)圖畫出站點的文件結(jié)構(gòu)圖，將各種素材文件分別存到指定的文件夾里，根據(jù)“惠州西湖”網(wǎng)站里劃分的模塊分別創(chuàng)建“西湖新聞”“西湖美景”“西湖美食”“西湖地圖”“西湖歷史”“聯(lián)系我們”等6個文件夾用來存放各自模塊的素材以及網(wǎng)頁文件。

三、處理網(wǎng)站素材

確定網(wǎng)站主題后，要想讓自己的網(wǎng)站有血有肉，能夠吸引用戶瀏覽，就要圍繞網(wǎng)站主題搜集所需要的資料，常言道：“巧婦難為無米之炊”。要讓自己的網(wǎng)站避免無“米”可炊的境地，就要盡可能多地搜集材料，材料搜集得越多，以后制作網(wǎng)站內(nèi)容就越詳實、越容易。材料既可以從圖書、報紙、光盤、多媒體上得來，也可以從互聯(lián)網(wǎng)上搜集，但收集來的素材，并不是都符合網(wǎng)頁制作的要求，因此，對搜集到的材料要去粗取精，去偽存真。在對素材進行處理時，可以參考以下步驟：

1.要對素材進行歸類。對于剛搜集到素材，肯定是五花八門、各種各樣的都有，要依據(jù)網(wǎng)站模塊的不同，把相對應的素材存放到不同的模塊文件夾中，并且要對素材進行分類，這樣使用起來才會更方便。

2.要對素材進行恰當?shù)奶幚?。對于搜集到的素材，可能只是某一方面的?nèi)容，而我們卻需要它同時表達其他信息。例如，一張圖片，它只是單一的顯示圖畫，沒有文字，而網(wǎng)頁的使用要求是要圖文并茂，這時就需要用到其他的軟件對圖片進行處理，例如Photoshop，在Photoshop中就能對圖片處理成圖文并茂的效果；同樣其他動畫制作軟件，影片處理軟件等都可以對相應的素材進行處理。

四、設計網(wǎng)站網(wǎng)頁布局

總的來說，整個網(wǎng)站的各個網(wǎng)頁應該在布局、色彩、字體上保持一定的格調(diào)，太凌亂會影響整個網(wǎng)站的美觀性。開始設計網(wǎng)頁時，網(wǎng)頁就像是你面前的白紙，你可以在紙上畫上你想畫的，寫上你想寫的，但由于人的視覺是有層次的，而且大部分人的閱讀習慣是從左到右，由上而下，所以你要考慮怎樣畫，怎樣寫才能吸引人來欣賞你的作品。不打草稿，直接設計網(wǎng)頁，邊設計邊添加內(nèi)容的方法，對“高手”來說都是難以設計出優(yōu)秀的網(wǎng)頁的，所以在真正上機設計網(wǎng)頁之前，筆者都要求學生先畫好布局草圖，可以在紙上畫出，也可以利用軟件繪制。利用Photoshop這樣的圖形圖像處理軟件可以方便地使用顏色，使用圖形，并且可以利用層的功能設計出用紙張無法實現(xiàn)的布局圖，但這需要一定的圖形圖像應用基礎，對學生來說有難度。因此，筆者覺得讓學生在紙上畫出頁面的布局草圖更加切合學生的實際，在進行布局設計時，應引導學生做到以下幾點：

1.合理應用布局技術(shù)，網(wǎng)頁布局技術(shù)主要有三種：層疊樣式表(CSS)、表格布局、框架布局，雖然CSS是一個好的布局方法，但對于初學者來說CSS顯得有點復雜，所以筆者沒有要求學生使用。表格布局已成為制作網(wǎng)頁的標準，隨便瀏覽一個網(wǎng)站，它們大都是用表格布局的。表格布局的優(yōu)勢在于它既能對不同元素進行單獨處理，又不用擔心元素之間互相干擾。單一的框架布局也是比較少的，它一般和表格一起布局，但框架也有其優(yōu)點，可以對框架內(nèi)各個子框架進行單獨操作。

2.對網(wǎng)站主頁的布局要認真細心設計，對網(wǎng)站的標志、導航條等能標識網(wǎng)站的元素放在突出的位置，然后再對其它元素進行細化和調(diào)整。

3.對具有相同的二級頁面、三級頁面也要畫好相應的草圖。為保持協(xié)調(diào)性相同類型的元素應采用相同效果，比如說標題字都采用陰影效果，那么在網(wǎng)站中出現(xiàn)的所有標題字的陰影效果的設置應該是完全一致的。

4.對設計好的頁面進行裝飾，特別是字體設置和顏色設置的細化工作。因為頁面的字體與色彩設置得好，可以讓網(wǎng)頁錦上添花，令人賞心悅目。

以上是筆者在教授網(wǎng)站建設課程中指導學生制作主題網(wǎng)站的要點，實踐證明依據(jù)以上方法學生在制作主題網(wǎng)站時積極性比較高，并且比較有條理地去準備網(wǎng)站制作所需資料，制作出的網(wǎng)站內(nèi)容也比較豐富多彩，培養(yǎng)了學生學習網(wǎng)頁網(wǎng)站制作的興趣，提高了教學效率。

[1]李遠.網(wǎng)頁制作——Dreamweaver實用教程[M].北京：機制工業(yè)出版社，2005.

[2]前沿文化 編著.網(wǎng)頁設計與網(wǎng)站建設[M].北京：科學出版社，2012.

責任編輯 何麗華

2015-12-25

林海燕(1981-)，女，惠州工程技術(shù)學校計算機專業(yè)講師。主要研究方向：計算機教育教學與研究。(廣東 惠州/516001)

G712

A

1005-1422(2016)02-0077-02