網站設計教學方法初探

摘要：該文結合教學實踐，針對網頁設計中網絡框架設計的教學方法提出，根據不同性質的網站提出，并結合個人教學經驗舉例說明。

關鍵詞：框架設計；網絡教學；教學方法

中圖分類號：G424文獻標識碼：A文章編號：1009-3044(2008)32-1152-02

Teaching Methods of Site Design

HU Lan

(Suzhou Tourism and Finance Institute， Suzhou 215104， China)

Abstract: The combination of teaching practice， for network design in the framework of the design of teaching methods， according to the website of different nature， combined with personal experience in teaching an example.

Key words: network design; framework for teaching; teaching methods

1 引言

網頁是網絡信息的基本載體，它除了為傳播信息提供平臺外，還體現出制作者的個人審美情趣和藝術修養。因此在網頁制作的教學過程中，除了讓學生掌握網頁的一般制作技巧外，還應注重學生在制作網頁時框架的設計，包括網頁的版面布局、版面修飾、輔助內容等，而在每個成功的設計背后都需要成功的版面結構，學生是初學者，他們的一些審美觀、創意技巧、觀察力并不能靠短時間內可以培養起來，需要多年的訓練和經驗積累，作為教師，需要教他們一些竅門來彌補某些方面的不足。

2 版面結構

版面結構是指一種能夠讓瀏覽者清楚、容易地理解作品傳達的信息的東西，一種將不同介質上的不同元素巧妙的排列方式。什么樣的布局是最好的，這是學生可能會問的問題。其實這要具體情況具體分析的：對于不同種類的網站，版面的結構有很大的差別。以下我們以不同類型的網站為例，來說明版面結構和網站類型的緊密關系，并通過示例來激發學生的學習熱情，并在設計中培養學生審美情趣、創意技巧等，并掌握相應的網頁設計技術。

2.1 搜索網站

界面： google網站的主界面，這是搜索網站的典型界面，非常簡潔，但是滿足了功能。界面分為三部分：google的logo圖片，搜索框，下面是各類搜索的連接。

技術：此類網站的技術也很簡單。我們看看它的源代碼片段：

＜img src=/logos/olympics08_opening.gif width=286 height=128 border=0 alt=\"2008 北京奧運\" title=\"2008 北京奧運\"＞

這顯示了google的logo，一個普通的＜img＞標記就實現了；

＜form action=\"/search\" name=f＞

＜input autocomplete=\"off\" maxlength=2048 name=q size=55 title=\"Google 搜索\" value=\"\"＞

＜input name=btnG type=submit value=\"Google 搜索\"＞

＜/form＞

上面顯示了一個＜form＞標記，一個＜input＞標記輸入要搜索的內容，一個＜input bype=submit＞標記，提交表單，將搜索的內容提交的/search程序來處理。

2.2 門戶網站

對于門戶網站來說，首要的任務就是要在有限的版面內顯示盡量多的內容，并且版面之間容易編排，能夠靈活的補充內容。國內典型的三大門戶網站：新浪、搜狐和163，基本的版面都是差不多的，我們以新浪為例來進行說明。

界面：從界面來看，網頁的內容很多，并且還很長，門戶網站的布局一般分為：頻道列表，文字/圖片廣告，欄目信息摘要，其他廣告信息。

技術：著重介紹一下門戶網站模塊的編排，看一下源代碼：

＜div id=\"ent\" class=\"md\"＞

＜div class=\"hd\"＞

＜ul id=\"entmenu\"＞

＜li id=\"entmenu_1\" class=\"on\"＞

＜span class=\"capname\" id=\"capname_ent\"＞

＜a href=\"http://ent.sina.com.cn/\" target=\"_blank\"＞

娛樂＜/a＞

＜/span＞

＜/li＞

＜/ul＞

＜/div＞

＜/div＞

這是娛樂板塊的代碼框架。從中我們可以看出采用了＜div＞技術，使用層來控制網站內容的排版，而不是像搜索網站那么的簡單。我們在教學過程中，先讓學生對布局有一個大致的了解，可以先用＜table＞標記進行定位，使用table來實現和門戶網站這樣的結果，然后再用＜div＞來實現。

2.3 交友站點

界面：交友網站的版面也比較簡潔，重點能突出交友的信息，能夠顯示網友的信息和交友情況。在左上角顯眼位置顯示登錄的輸入框，便于用戶登錄，因為交友網站的大部分功能都是在登錄后才能操作，所以便捷的登錄也是很重要的。在網頁顯著位置顯示了交友活動，這對于交友網站的宣傳是很重要的。

技術：看一下源代碼：

＜div class=\"wzti\"＞精美主頁推薦＜/div＞

＜div class=\"ggnr\"＞

＜ul id=\"id_pop_space\"＞

＜li style=\"line-height:22px;\"＞

＜a href=\"…\" target=\"_blank\"＞yueliang501的主頁＜/a＞

＜/li＞

＜/ul＞

＜/div＞

＜/div＞

從代碼中我們可以看出，也使用了＜div＞層技術，用層來實現定位，其中clss來表明樣式，使用＜ul＞＜li＞標記來實現條目的樣式排列。在實際教學中，我們可以使用＜table＞來定位，使用＜tr＞＜td＞來實現條目的排列，先讓學生做成和示例網站同樣的效果，然后通過技術分析，過渡到＜div＞控制的效果。

2.4 政府網站

界面：政府網站的界面要符合當地的特色，并且在顯著位置能顯示盡量多的便民服務和當天的新聞事件。顯示圖片新聞，政務新聞和最新的政府機關的公告信息。

技術：看下源代碼：

＜iframe

marginwidth=\"0\" marginheight=\"0\"

src=\"link/wzlj.htm\"

frameborder=\"0\" width=\"760\" scrolling=\"No\" height=\"150\"＞

＜/iframe＞

這是顯示網站鏈接的代碼，我們從中看出使用了＜iframe＞子框架技術，而顯示的內容是link/wzlj.htm網頁的內容。在對于經常改動的界面，我們可以利用iframe技術來實現動態內容，通過改變iframe中src指定頁面的內容去改變主頁的內容。這項技術在很多網頁版面設計中采用。在教學中，可以讓學生在頁面中做一個簡潔的導航界面，利用iframe技術來顯示點擊的網頁內容，激發學生的興趣。

3 版面修飾

很多時候，一個好的版面被錯誤選擇的配色方案所破壞。其實，配色方案是升華一個版面結構的有力武器。如果你仔細地使用顏色，很可能得到意想不到的結果。

網頁的配色和內容相關，也和特定的環境相關。譬如在奧運期間，門戶網站的內容都配成了金黃色，并配有祥云的背景。

3.1 搜索網站

從前面的版式分析我們知道，搜索網站的頁面很簡單，它講究的效率和速度，但是搜索網站也會是很多人訪問的，也要根據不同的時間和環境進行版面的修飾。我們看看google和百度在奧運期間的配色：

從界面看，搜索網站雖然沒有對網頁底色進行修飾，但是通過logo的更換，我們很清晰的了解到奧運來臨了。

所以版面賣弄修飾對于網站來說也是非常重要的

從技術上來說，搜索網站的版式修飾采用了圖片格式，在實際的教學當中，我們要讓學生學會至少一種的圖片處理軟件，并且利用這種有趣味的方式使得他們能夠有興趣學習。

3.2 門戶網站

門戶網站是以內容為主的，所以要非常實時的根據時間和重大事件對版式和界面進行修飾和美化。在奧運期間，我們可以看到各大門戶網站都在顯著位置顯示了奧運的標志，并在最前面的兩個欄目更換為了奧運新聞和賽事實況。

從技術上來說：主要采用顏色，圖片，字體顏色來進行修飾，以圖片位置，通過對

3.3 交友網站

交友網站的顏色搭配要活潑，因為年輕人居多，所以要采用活潑，奔放一些的色彩，如金黃色，藍色等，并且也要根據不同的環境進行改變。

從技術上來說：通過一些flash動畫，對頁面加以修飾，通過夸張的手法來突出網站的主題。在實際的教學中，要培養學生的一些自主創造性，先根據他們的想法對某項主題的網站進行配色和修飾，然后通過大家評議的方式來進行改進，從而促進同學之間的友誼和增強學生的主觀能動性。

3.4 政府網站

政府網站的修飾有顯著的地方特色，因為訪問者都是和這一地方相關的人群。譬如蘇州政府的網站以淡藍色為主，并且在logo旁以動畫的方式顯示了太湖、游船、園林等獨具特色的元素。

所以政府網站的配色要以地方特色為準，而不是根據自己的喜好而定。

從技術上來說：要運用較多的flash動畫，將多種地方特色顯示在一個有限的界面中，通過不同的變換手法，使得訪問者清晰的了解一個地方的文化、生活等相關元素。在教學中，要讓學生不但學會技術，更重要的是學會根據不同的要求和主題進行不斷的創新和技術完善。

4 輔助內容

網站是一面鏡子，它除了要反應出內容以外，有時也顯示網站設計者的個性，通過輔助內容的設計和顯示，讓訪問者更容易、更方便的獲得信息。

此類內容的技術要求一般較高，對以網站初學者來說未必能完全掌握，但是通過給他們演示這些高級的技巧和機能，對于激發他們的求知欲望顯得尤為重要。

在實際的教學中，我們不可能完全教會學生所有知識和技能，但是我們完全可以教會他們學習這些知識和技能的方法。

網頁版式是對網頁內容顯示的布局，根據不同的網站類型所要求的布局也有所不同，采用的技術也千差萬別，但有了基本的技能和學習的方法，對于理解和創新各類布局有很重要的作用。

世上沒有靜止的事物，網站也是一樣，也要根據時間、環境和重大時間來變化，所以網站版式的修飾也顯得尤為重要。

輔助功能是網站展示個性的手段，通過有效的輔助功能，可以為網站進行恰到好處的點綴作用。

5 結語

本文從網站的版式設計、版式修飾和輔助功能三個方面介紹了在教學過程中應關注的一些技巧和知識，通過對知識的提煉，必定會使學生對網頁設計技巧的掌握起到事半功倍的效果。

參考文獻：

[1] 卡斯特羅.HTML XHTML CSS 基礎教程[M].6版.陳劍甌，譯.北京:人民郵電出版社，2007.

[2] 張金霞.HTML網頁設計參考手冊[M].北京:清華大學出版社，2006.

[3] 史曉燕，蘇萍.網頁設計基礎:HTML，CSS和JavaScript[M].北京:北方交通大學出版社，2006.