談主題網站的設計要點

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

關鍵詞：中職；主題網站；設計要點

中圖分類號：G712文獻標識碼：A文章編號：1005-1422（2016）02-0077-02

收稿日期：2015-12-25

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

目前社會上的各行各業已經離不開互聯網了，各種主題、風格各異的網站比比皆是，每天上各大網站了解世界新聞已經成為人們日常生活中不可缺少的部分。但讓學生設計一個主題網站，卻會讓許多學生犯難。本文根據筆者多年的教學實踐，總結出學生設計主題網站應該要做的準備功夫。

一、確定網站主題

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

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

2.選擇自己擅長的內容。做網站好比寫文章，有人擅長寫小說，有人擅長寫散文，關鍵是要選擇自己擅長的內容，引導學生根據自己的興趣以及平時關注的事情去創作，這樣才容易做出優秀的網站作品。

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

二、制定網站模塊

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

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

三、處理網站素材

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

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

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

四、設計網站網頁布局

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

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

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

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

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

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

參考文獻：

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

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

責任編輯 何麗華