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

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

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

收稿日期：2015-12-25

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上是筆者在教授網(wǎng)站建設(shè)課程中指導(dǎo)學(xué)生制作主題網(wǎng)站的要點(diǎn)，實(shí)踐證明依據(jù)以上方法學(xué)生在制作主題網(wǎng)站時(shí)積極性比較高，并且比較有條理地去準(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實(shí)用教程[M].北京：機(jī)制工業(yè)出版社，2005.

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

責(zé)任編輯 何麗華