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

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

關(guān)鍵詞：中職；主題網(wǎng)站；設(shè)計要點

中圖分類號：G712文獻(xiàn)標(biāo)識碼：A文章編號：1005-1422（2016）02-0077-02

收稿日期：2015-12-25

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

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

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

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

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

2.選擇自己擅長的內(nèi)容。做網(wǎng)站好比寫文章，有人擅長寫小說，有人擅長寫散文，關(guān)鍵是要選擇自己擅長的內(nèi)容，引導(dǎo)學(xué)生根據(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)在要設(shè)計一個宣傳惠州西湖的網(wǎng)站，可以設(shè)計由以下6個模塊組成：西湖新聞、西湖美景、西湖美食、西湖地圖、西湖歷史、聯(lián)系方式。這樣“惠州西湖”網(wǎng)站由1個主頁和6個二級頁面組成，二級頁面下再分若干三級子頁，在繪制模塊結(jié)構(gòu)圖時，至少要畫到二級頁面。

有了模塊結(jié)構(gòu)圖，就可以根據(jù)各個模塊內(nèi)容去收集相應(yīng)的素材和資源，但素材是多種多樣的，為方便管理以及在使用時進(jìn)行調(diào)用，教師要引導(dǎo)學(xué)生根據(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)頁制作的要求，因此，對搜集到的材料要去粗取精，去偽存真。在對素材進(jìn)行處理時，可以參考以下步驟：

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)：

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

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

責(zé)任編輯 何麗華