發(fā)布時間：2023-01-03 03:56:36
序言：寫作是分享個人見解和探索未知領域的橋梁，我們?yōu)槟x了8篇的網(wǎng)站設計制作論文樣本，期待這些樣本能夠為您提供豐富的參考和啟發(fā)，請盡情閱讀。
中華民族的傳統(tǒng)文化博大精深、源遠流長，也以其獨特的魅力影響著中國乃至全世界。近年來，科學技術不斷進步和發(fā)展，網(wǎng)絡的社會地位逐漸凸顯，校園文化網(wǎng)站建設也逐步趨于成熟和完善，它不僅傳遞著豐富多彩的視覺信息，也充分體現(xiàn)著獨特的校園文化。本文通過闡述中國傳統(tǒng)元素的內涵、特點和類型，以及中國傳統(tǒng)元素在現(xiàn)代生活中的應用意義，將中國的傳統(tǒng)元素巧妙地運用到大同大學校園文化網(wǎng)站的設計中，旨在彰顯大同大學校園文化內涵，貫徹落實大同大學“厚德”、“博學”、“慎思”、“篤行”的校訓，表現(xiàn)同大學子對校園精神文明的繼承和發(fā)展。
關鍵詞：
網(wǎng)站建設；中國傳統(tǒng)元素；校園文化；界面設計
引言
隨著社會的進步和發(fā)展，傳承文明與創(chuàng)新知識已成為當代文明的主題主線，在此環(huán)境下，高校校園文化網(wǎng)站應運而生、蓬勃發(fā)展，而且近年來其社會地位也不斷凸顯。與此同時，全球文化的交流和碰撞日益激烈，導致高校校園文化日益開放和繁雜。因此，應從多角度、多側面、全方位的視角梳理和評價高校校園文化，并逐漸建設完善高校校園文化網(wǎng)站，傳承校園文化，構建社會主義和諧校園。作為凝結華夏文明精神和彰顯中華人民特質的傳統(tǒng)文化元素，如果將其適當?shù)厝∩?、借用、打亂、組織、重建并運用到校園文化網(wǎng)站的建設中，將會取得全新的視角效果與經(jīng)驗，提供一種全新的觸及世人心靈的感性認知，培養(yǎng)中國風格的審美情趣，激發(fā)民族自豪感。其中網(wǎng)頁版式設計對整個網(wǎng)站的設計構造是至關重要的，也是瀏覽者與網(wǎng)頁信息間的傳遞載體，例如在版面設計中采用留白的方式營造空靈韻味，在現(xiàn)代的版式設計中有指導意義。在構建中國風的網(wǎng)站時，加入中國傳統(tǒng)文化元素設計，不僅會發(fā)揮現(xiàn)代科技美與創(chuàng)新美，而且還會體現(xiàn)傳統(tǒng)的韻味美，保持著新與舊、古與今、傳承與發(fā)展的高度契合，能夠使網(wǎng)頁展現(xiàn)深厚的文化底蘊和歷史厚重之感。大同大學文化校園網(wǎng)站的設計制作將中國傳統(tǒng)元素融入到網(wǎng)站的界面設計中，以期能彰顯大同大學校園文化底蘊，并且能在網(wǎng)頁中體現(xiàn)大同大學的校園文化精神，體現(xiàn)全體師生對校園文化的傳承與發(fā)展。
一、校園文化網(wǎng)站概述
校園文化是在學校這一特定的文化氛圍中，師生在從事各項課內外活動中所創(chuàng)造的精神財富，以及承載這些精神財富的規(guī)章制度、組織活動和意識形態(tài)。校園文化的核心是精神文化，它包括學校領導、師生的價值觀念、價值判斷和取向，學校獨特的文化特色、辦學理念、辦學目標，以及校風、教風、學風等精神風貌，以此彰顯、傳播和弘揚學校文化特色。伴隨科學技術的不斷發(fā)展，網(wǎng)絡已成為傳遞校園文化的主要載體。其中校園網(wǎng)站就是一個集學習、娛樂與社會活動于一體的虛擬空間，可以充分體現(xiàn)校園的文化、精神和特色。而高校的校園文化網(wǎng)站不僅體現(xiàn)著各個高校的文化，也集中反映了當代教師與學生的精神風貌，對于文化的豐富、交流和發(fā)展具有重要意義。
二、中國傳統(tǒng)元素概述
中國傳統(tǒng)文化元素種類繁多，尤其是吉祥圖形符號，如龍鳳、麒麟、朱雀、太極、八卦、中國結、書法等傳統(tǒng)文化元素符號，代表并彰顯著中國文化神韻。中國元素，是指在中華民族的融合、演化與發(fā)展過程中形成的，由中國人創(chuàng)造與傳承的，反映中國人文精神和民俗心理具有中國特質的文化成果。中國傳統(tǒng)文化元素是東方文化中的獨特景觀和寶貴財富，它具有多樣性、廣泛性、豐富性的特點。包括豐富多樣的有形物質文化元素和無形精神文化元素，如徽派建筑、梅蘭竹菊、朱雀、書法、中國結等有形文化元素，思想意識、價值體系、道德觀念、民俗等無形精神元素。在網(wǎng)站構建中，時刻運用著“中國特征”，處處體現(xiàn)著中國式的意境和精神，是構建中國特色校園文化網(wǎng)站的基礎。
三、中國傳統(tǒng)元素在文化網(wǎng)站中應用的意義
1.豐富網(wǎng)頁的表現(xiàn)手法
中國傳統(tǒng)元素的形式多種多樣，對傳統(tǒng)元素的挖掘和運用，能夠極大地豐富網(wǎng)頁創(chuàng)造的表現(xiàn)手法。在網(wǎng)頁制作中，不僅要恰當?shù)剡\用傳統(tǒng)元素的表象特征，更要深層次地挖掘這些元素所具有的內涵，與傳統(tǒng)哲學思想相呼應，共同激蕩出更加出色的創(chuàng)意網(wǎng)站。
2.產(chǎn)生文化親和力
中國傳統(tǒng)元素取材于最貼近人民生活與民族情感的傳統(tǒng)文化習俗，包涵了深厚的中華民族情感。對傳統(tǒng)文化習俗的準確把握與運用，更能夠體現(xiàn)國人的心理價值，使網(wǎng)站更具親和力，增加受眾的理解度、接受度，勾起受眾對中國文化的精神聯(lián)想，喚起對中國情結的共鳴，促進網(wǎng)站進一步傳播與發(fā)展。
四、基于中國傳統(tǒng)元素的大同大學校園文化網(wǎng)站的界面設計分析
在研究中，本論文主要是通過設計大同大學校園文化網(wǎng)站界面，結合中國傳統(tǒng)元素體現(xiàn)出大同大學的校園文化底蘊。網(wǎng)站的設計主要分為八個部分，分別是“首頁”、“書香校園”、“校園風光”、“學子風采”、“校園活動”、“舌尖校園”、“關于我們”和“論壇”，從各個方面介紹大同大學校園文化的組成部分，使參觀者能夠更加深入地了解大同大學校園文化的精神實質，貫徹落實大同大學“厚德”、“博學”、“慎思”、“篤行”的校訓。其中從logo到小圖標無不體現(xiàn)著“中國味”，網(wǎng)頁以中國風色調為基準，將中國風格和校園文化巧妙融合。
1.翰墨書法演繹校園文化
漢字作為一種抽象的藝術符號，本身就具有很強的審美趣味。在網(wǎng)頁設計中，漢字不僅是語言信息的載體，呈現(xiàn)著其“形”的特征，還能體現(xiàn)其審美藝術價值。把中國書法藝術中的形、神、意進行適當?shù)娜诤?，并運用到網(wǎng)頁設計中去，有助于體現(xiàn)網(wǎng)站的文化民族特色。在大同大學校園文化網(wǎng)站中就運用到了不少漢字書法設計，首先表現(xiàn)在logo的設計中。logo圖整體以書法為主要元素，在設計過程中采用左圖右文的手法將傳統(tǒng)印章、龍圖騰作為設計元素與楷書漢字藝術相結合。紅色印章中是運用毛筆一氣呵成中國風的龍圖騰，線條優(yōu)美，若隱若現(xiàn)。配以毛筆書寫的楷書文字，說明網(wǎng)站的主要性質———傳播校園文化。印章與圖騰的藝術形式巧妙組合，能讓觀者感受到濃烈的民族氣息。運用毛筆書寫“校園文化”四個字，大面積的濃墨書寫文字貫穿著整個logo圖，不僅突出主題，而且顯得雄偉有神，運用毛筆書法“軟”的特點能使簡約的線條生成豐富的氣韻之美，增強logo的視覺沖擊力和表現(xiàn)力。不僅logo中運用漢字書法，網(wǎng)站中的滾圖也大量使用漢字書法元素，并巧妙地與大同大學的校訓相結合，運用書法形式加以表現(xiàn)，展現(xiàn)大同大學校園文化底蘊。在每一幅滾圖中的黃金分割比例位置處書寫“厚德、博學、慎思、篤行”這個同大學子熟記于心的校訓，采用行書字樣書寫，突出我校校訓的歷史感和厚重感，從而體現(xiàn)出我校校園文化源遠流長。在“厚德”這幅畫中，整體以墨色荷花為背景，給人以空遠悠揚的意境，以行書書寫的“厚德”二字，對整個空間進行分割，對空白的切割體現(xiàn)書法藝術的形式美，隨后以楷體小字對“厚德”校訓加以解釋，行楷兩種字體交相輝映，共同呈現(xiàn)大同大學校園文化的歷史感與厚重感。在“博學”這幅畫中，整體背景采用從灰色到白色的漸變手法，灰階層次的漸變達到空靈之效。行書書寫的“博學”二字，從上及下，從左及右，涉及了文字的方向性,文字排列的方向性也會影響視覺效果，在大同大學校園文化網(wǎng)站中文字方向主要有平行、垂直兩類，而平行、垂直的文字能給人以穩(wěn)定厚重之感。同樣以楷體小字對“博學”校訓加以解釋，采用古代文字的書寫格式，文字方向從右及左的展現(xiàn)，體現(xiàn)了對傳統(tǒng)文化風格的繼承。在“慎思”這幅畫中，字體圓潤靈動，校訓的行書字樣與解釋的楷體字樣之間采用濃淡墨交替變化，空間中大量留白，以“慎思”二字對留白處進行分割，形成虛實對立之感，體現(xiàn)書法的韻味美。在“篤行”這幅畫中匠心獨運地使字跡融合了毛筆的意蘊，好似展示了毛筆書寫的過程，別有風味。字體設計風格雅致，簡潔中不乏品味。本畫面中解釋文字較其他幾個畫面較大，這里把解釋文字作為填充空白的元素加以運用，不僅能夠展示書法的獨特魅力，而且也有補充空白之效。網(wǎng)站運用漢字書法讓人感受到，當介紹具有歷史文化特征的內容時，適當結合漢字書法，可以增加原有內容的意義與內涵。深入挖掘漢字的造型意趣和文化底蘊，并賦予它新的生命力，可以提升網(wǎng)頁的文化韻味。
2.水墨經(jīng)典闡釋校園內涵
水墨畫屬于中國畫的一種,主要以水墨的形式描繪中國的山水人情。以毛筆、紙、絹等繪畫媒介,將筆的提按轉折、疾徐輕重與墨的虛實強弱、干濕、濃淡相互搭配形成無窮變化，以繪畫語言的形式表現(xiàn)中國文化特色之美。在大同大學校園網(wǎng)站中構圖背景主要以水墨畫為主。例如首頁中的滾圖設計以水墨山水畫為背景，配以濃重筆墨書寫出的圓，中間以漢字書法畫龍點睛，整體營造出一種空靈之感，有濃濃的文化厚重感，與校園文化的風格交相輝映。其中，背景選擇大量留白的水墨畫，不僅可以方便其他元素的添加，也可以營造出空靈意境。在網(wǎng)頁設計中更是如此，將中國式的藝術審美運用到設計中，讓空白在字與圖之間自由游走。中間以濃重筆墨書寫出的圓，不僅可以體現(xiàn)中國特色，而且極具吸引力，把觀者的目光第一時間聚焦在圓中間的內容上，突出主題。去除了外在復雜雕飾的墨白，傳達了一種朦朧美感，也表達了一種特殊的張力，在網(wǎng)頁中靈活運用墨白，會突出所表達的信息。在設計構思上，水墨元素的作用是平衡網(wǎng)頁，水墨畫元素作為藝術表現(xiàn)形式和視覺符號，它所營造的氛圍，能呈現(xiàn)出東方人獨特的感覺和心境。這幅圖片畫面中由水墨元素、墨竹、奇石共同組成。其中水墨元素能在水與墨、黑與白之間形成濃淡變化的色彩層次，在用水墨暈染出圓之后，在圓的缺角部分繼續(xù)暈染出幾條錦鯉，通篇水墨畫將墨之黑作為主要色調，通過創(chuàng)造黑與白的氣氛，將元素以一種非常單純的方式最直接展示給觀者，畫面給人以廣闊的想象空間，讓人回味無窮。利用墨之黑色作為設計元素，既簡潔有趣又能體現(xiàn)傳統(tǒng)美感。不僅如此，水墨還可以與其他元素配合使用，例如以水墨圖形勾勒與渲染出水墨魚缸,錦鯉在勾勒出的墨色魚缸中游動，營造出含蓄單純、優(yōu)美恬靜的水墨意境。所以將水墨元素與其他元素配合使用是源于自然又高于自然的藝術表達方式。在設計表達上,采用水墨暈染的藝術效果，墨滴在水中舒緩地暈染開來，墨跡展現(xiàn)出千變萬化的形態(tài)，可以想象它變換成連綿的山巒、廣闊的大海、飛翔的仙鶴等，最終回歸于墨跡本身的形態(tài)。從無形到有形，從有界到無疆，水墨的魅力在于它寫實與寫意兼具，在黑白的空靈世界中，讓人仿佛置身于畫中。將水墨畫元素應用于網(wǎng)頁設計中,是對中國傳統(tǒng)文化的傳承與創(chuàng)新，水墨畫元素作為傳播信息的重要表現(xiàn)手法能融合不同風格設計形式,繪畫形式多樣,題材廣泛。網(wǎng)頁設計的水墨元素運用能延續(xù)現(xiàn)代人從古代傳統(tǒng)文化中繼承的文化內涵和審美意識。水墨畫元素的靈活運用不僅能豐富設計作品的文化內涵,傳遞中國民族文化特色,還能有效地傳遞表達主題信息,具有極高藝術審美價值和文化價值。
3.傳統(tǒng)色彩點亮校園經(jīng)典
傳統(tǒng)色彩是傳統(tǒng)文化的重要組成部分，也是傳統(tǒng)文化獨特的表現(xiàn)形式，是中國特色不可或缺的部分。在悠久歷史和傳統(tǒng)的影響下,傳統(tǒng)色彩不僅講究視覺美感,而且重視色彩的象征寓意，例如在中國紅色被看做是喜慶色,顏色本身鮮艷明亮，也寓示紅紅火火、生氣勃勃；又如黃色，因其明亮，被看做是陽光和大地的顏色，寓示期望、智慧、文明。不僅如此，黃色還是中國歷代帝王的專用色，象征著古代中央。在大同大學校園文化網(wǎng)站設計過程中，主要以中國紅為基調配以中國黃加以修飾。紅、黃色是中國傳統(tǒng)吉祥的象征，紅色具有強烈的感知性，是血液與生命的顏色，是國際上以中國命名的顏色，即“中國紅”。“紅配黃”所呈現(xiàn)的是一種積極、熱烈的視覺效果,是喜慶、吉祥的象征。在網(wǎng)站中首先可以看到logo是紅色印章圖案，突出中國味，與之配套的導航條、小圖標均采用中國紅與黃色相搭配。通過對大同大學校園文化網(wǎng)站的設計總結出以下幾點經(jīng)驗：首先制作網(wǎng)站時，要保持網(wǎng)站色調的一致性，整體性是網(wǎng)站和諧的前提，每個網(wǎng)頁、每個區(qū)域對色彩的運用，必須把握色調的整體性和連貫性。就像大同大學文化網(wǎng)站制作中整體采用“中國紅”為主色調，不論是logo、導航、圖標基本采用紅色，強調整體協(xié)調性。其次，根據(jù)傳統(tǒng)色彩的特點，靈活運用，把經(jīng)典的色彩感覺引入到網(wǎng)站中，例如在網(wǎng)站中引入“中國紅”、“中國黃”，主要目的在于營造具有中國傳統(tǒng)韻味的色彩情調。再次，對中國傳統(tǒng)色彩進行適當?shù)募庸ぬ幚?，例如打破常?guī)的色彩組合方式，這樣可以搭配新的視覺效果。把徽派建筑、暈染的墨滴與紅旗相組合，對以墨色為主的冷色調創(chuàng)新搭配鮮亮的“中國紅”，兩種顏色形成對比，刺激觀者視覺，給人印象深刻。最后，在網(wǎng)站制作中注重現(xiàn)代風格色彩與中國傳統(tǒng)色彩的融合，使二者既相互結合又相互區(qū)別，體現(xiàn)現(xiàn)代與傳統(tǒng)相結合的時代感。在大同大學校園文化網(wǎng)站中以傳統(tǒng)色彩（中國紅、中國黃）為主色調，輔助色選用現(xiàn)代色彩，如有青草綠、寶石藍、淺杏黃等，使網(wǎng)站既具有歷史感又具有時代感。
4.古典圖形彰顯校園意蘊
中國傳統(tǒng)圖形具有中國獨特民族藝術風格，經(jīng)過歷代傳承經(jīng)久不衰，是傳統(tǒng)文化的重要組成部分。其形式豐富多樣,既包含了具有審美價值的文字、繪畫，還包含了具有實用價值的印章等。中國傳統(tǒng)圖形不僅是欣賞審美的體現(xiàn)，更是哲理與深刻寓意的化身，這些圖形的作用甚至超越了文字符號，形成了具有深層民族精神的象征意義。在大同大學校園文化網(wǎng)站中運用到的傳統(tǒng)元素有荷花、梅花、墨竹、奇石、徽派建筑、紅旗、錦鯉、筆墨、書籍等。其中，荷花代表圣潔，是佛教凈潔的象征，荷花出塵離染，清潔無瑕，古代名人墨客都以荷花象征自己潔身自好的高尚品質，荷花在此網(wǎng)站中，彰顯校園文化高潔之意，突出積極參與校園文化建設者的高尚品質。梅常常常被看做傳春報喜的吉祥象征，梅花也是歲寒三友之一，梅以其凌寒獨開的傲雪精神和不與百花爭春的高潔之美，被人們所喜愛，象征高潔、堅強，而筆墨、書籍也是中國傳統(tǒng)元素的象征，并且體現(xiàn)著網(wǎng)站的主題———推廣校園文化。竹，是君子的化身，彰顯氣節(jié)，乃“四君子”之一，代表著堅持、正直、清高，在此運用說明同大學子擁有竹一般的氣節(jié)。奇石，也作為傳統(tǒng)文化的象征之一，尤以玉石為代表，古代文人騷客以玉指代自己高尚的品格，而且玉不離身。徽派建筑以粉墻黛瓦為表現(xiàn)特征，以磚雕、木雕為裝飾特色，成為體現(xiàn)中國文化的重要組成部分。五星紅旗是中國的國旗，國旗上的五星象征中國全體人民對黨的擁護愛戴，是中國在世界的標志和象征，彰顯我校一直堅持和擁護我黨的正確領導，此處體現(xiàn)著我校不斷發(fā)揚愛國主義精神。大同大學校園文化網(wǎng)站所運用到的傳統(tǒng)元素均與傳統(tǒng)文化密切聯(lián)系，荷花、梅花、墨竹、奇石、徽派建筑、紅旗、錦鯉、筆墨、書籍，它們不僅說明網(wǎng)站的性質———傳承傳統(tǒng)文化，具有深厚的歷史厚重感，而且說明同大學子擁有像荷花、梅花般高尚的品格———探求真理，不畏嚴寒。所以在網(wǎng)站中運用傳統(tǒng)圖形、圖案時，要選擇與網(wǎng)站主題相貼近的傳統(tǒng)元素，不僅如此，更要深度挖掘傳統(tǒng)圖形深層意蘊，做到形與意、神與態(tài)的高度融合，才能更好地展現(xiàn)出對傳統(tǒng)文化的傳承與發(fā)展。中國傳統(tǒng)圖形為現(xiàn)代網(wǎng)站設計制作提供了血液和靈魂，將其放置于現(xiàn)代網(wǎng)站設計中發(fā)揮出無限的正能量。
5.哲學思想弘揚校園精神
適應性和包容性是中國哲學思想的顯著特點。中國傳統(tǒng)元素之所以能夠成為中國藝術與文化精髓的代表，是因為中國傳統(tǒng)元素與中國文化、中國哲學思想相存相依，與華夏民族傳統(tǒng)人格一脈相承。中國文化的精神核心是天人合一，這種強調整體和諧的哲學，與網(wǎng)站設計的理念也是一致的，網(wǎng)站設計也是要達到整體的和諧，中國哲學主張世界是多樣化的統(tǒng)一，認為以寬廣的胸懷、有容乃大的氣概，兼收并蓄，使世界達到“和”的理想境界，傳統(tǒng)漢字書法藝術與傳統(tǒng)圖形的最終理想境界都是和諧，但這種協(xié)調與均衡并不是簡單的線條處理分割，更不是一板一眼的類似數(shù)字化的均衡排序，而是通過對各種藝術設計表現(xiàn)手段的運用，達到一種整體上的制衡，即“中”與“和”的平衡。中國傳統(tǒng)文化是以儒家思想為核心,儒道釋并存，而中國元素是對中國傳統(tǒng)文化的認知。儒家主張積極入世,講求中庸之道，表現(xiàn)在網(wǎng)站設計上則是整齊、渾厚、中和的風格；道家主張法貴天真,崇尚自然,滲透到網(wǎng)站設計制作中，體現(xiàn)了黑白、虛實、濃淡、剛柔等藝術特點。佛教文化主張講求禪機、心悟，在網(wǎng)站設計中的留白，在空白處留下無限遐想空間，從有界到無疆。儒、道、釋三家哲學文化對中國傳統(tǒng)文化有著深遠的影響,而中國傳統(tǒng)元素是它們有機的結合，也正是這種巨大的影響使它們成為中國傳統(tǒng)文化的結晶與精髓。
五、結論
通過制作研究中國風校園文化網(wǎng)站，不僅可以發(fā)展中國特色，而且可以傳承校園文化。讓濃厚獨特的校園文化以中國特色的形式表現(xiàn)出來，更具中國味，更貼近學生心理。中國文化有著獨特的民族特色和文化底蘊，有自己的價值觀和習慣，因此在網(wǎng)站設計過程中不僅要體現(xiàn)現(xiàn)代化的特點，更要注重對民族性的發(fā)掘，設計出具有國際性、實用性、民族性、文化性的網(wǎng)站。但是，本網(wǎng)站的設計還是存在著一些不足之處，比如，應拓展傳統(tǒng)元素的素材范圍、應設計傳統(tǒng)元素的動態(tài)效果之美等等。因此還需在后期的制作中不斷完善和改進。魯迅先生在《且介亭雜文集》中曾說過,“只有民族的，才是世界的”。在制作現(xiàn)代文化網(wǎng)站時，對傳統(tǒng)元素加以適當?shù)母脑焯釤挘苁咕W(wǎng)站更顯歷史厚重感，然后再結合現(xiàn)代的技術手段和審美情趣去發(fā)掘傳統(tǒng)的精華，找到與時代的契合點，古今互補才能形成中國特有的設計風格。
作者：杜佳慧 單位：湖南師范大學
參考文獻：
[1]周偉.高校校園網(wǎng)絡文化建設網(wǎng)絡平臺的研究與實現(xiàn)[D].曲阜:曲阜師范大學,2010.
[2]陶亮.論中國傳統(tǒng)文化元素的特點及運用[J].文藝研究,2012(8):9-25．
[3]高桂清.淺談中國傳統(tǒng)元素在網(wǎng)頁設計中的運用[M].大眾文藝,2010（24）:18-33．
[4]梁景紅.網(wǎng)站設計與網(wǎng)頁配色實例精講[M].北京:人民郵電出版社,2009:123-145．
[5]鄭忘平.網(wǎng)頁設計中的色彩運用及研究[D].西安:西北師范大學,2012．
[6]荊婧.試論中國元素在世界電影中的呈現(xiàn)[D].重慶:重慶大學,2011．
[7]劉德宇.高校校園文化發(fā)展論[M].青島:中國海洋大學出版社,2009:134-156．
【論文摘要在互聯(lián)網(wǎng)飛速發(fā)展的今天，網(wǎng)絡已成為人們生活中不可缺少的一部分,無論是在商業(yè)、工業(yè)還是政府部門中都早已普及開來，如今就連教育事業(yè)也都承載著網(wǎng)絡這四通八達的命脈迅速的發(fā)展起來。網(wǎng)站建設越來越接近于一門藝術而不僅僅是一項技術。網(wǎng)頁界面藝術設計，日益被網(wǎng)站建設者所注重。結合自身的經(jīng)驗，闡述了如何制作一個完整的豐富多彩的頁面，主要從色彩、框架，布局、優(yōu)化這幾個大方面對頁面設計進行描述,對網(wǎng)頁界面藝術設計的文字、圖形、色彩、多媒體四個要素做了具有特色的分析和歸納，最后對其藝術設計風格進行了深入的分類和闡述，這一部分的重點是對網(wǎng)頁界面藝術設計風格的探究。網(wǎng)頁作為新興媒體,有著比報刊、雜志、廣播、電視等傳統(tǒng)媒體更多的構成要素,如文字、圖形、聲音、圖像和動畫等。最后得出頁面設計需要時間和耐心去鉆研，才能做出好的網(wǎng)頁界面藝術設計這一觀點。
網(wǎng)頁界面藝術設計是伴隨著計算機互聯(lián)網(wǎng)絡的產(chǎn)生而形成的藝術設計新課題，是網(wǎng)頁設計者以所處時代所能獲取的技術和藝術經(jīng)驗為基礎，依照設計目的和要求自覺地對網(wǎng)頁的構成元素進行藝術規(guī)劃的創(chuàng)造性思維活動，必然要成為設計藝術的重要組成部分，并隨著網(wǎng)絡技術的發(fā)展而發(fā)展。表面上看，它表面上看，它不過是有關網(wǎng)頁版式編排的技巧和方法，而實際上，它不僅是一種技能，更是藝術和技術的高度統(tǒng)一。?網(wǎng)頁設計包括風格定位、版面編排、色彩處理、瀏覽方式、鏈接功能等諸多方面,其中色彩處理有著舉足輕重的功能。色彩既是網(wǎng)頁作品的表述語言,又是視覺傳達的手。所以首先要了解一個新問題那就是摘要：
1制作網(wǎng)頁包括具體都包括哪幾部分呢?
1.1圖形、圖像處理制作網(wǎng)頁界面藝術設計，提到界面還有藝術，那在網(wǎng)頁上插入一些精美、適當?shù)膱D片是必要的，否則，不會有人去瀏覽你的頁面，因此，在設計網(wǎng)頁之前，就應搜集或制作一些好看、適用的圖片。提到圖形、圖像處理，大家都會想到的軟件是Photoshop這個軟件，對，這個軟件是進行圖形、圖像處理的軟件，但是，它不是專門的處理網(wǎng)絡圖像的軟件，Photoshop這個軟件會用到去進行一些平面的圖形圖像，我們網(wǎng)絡的圖形、圖像處理用的是Fireworks軟件，它可以制作出傳輸較快的gif格式的圖片，占的空間也比較小，一般大小也就是KB，而Photoshop制作出來的是jpg格式的位圖，并且是有損壓縮，象素大了圖像就清楚，但這樣的話上傳到網(wǎng)上會影響瀏覽速度，象素小了就會出現(xiàn)模糊或者馬賽克小方格，所以我們采用的是Fireworks軟件進行處理圖形、圖像。
1.2動畫制作網(wǎng)頁界面藝術設計，肯定也少不了動畫的加入，并且還要有藝術氣息在里面，這就要求我們的設計者要有藝術修養(yǎng)和對顏色的綜合把握了，在沒有FLASH軟件之前，用的是Golive這個軟件，再后來就用傳統(tǒng)的做法，在html中嵌入Java程序編寫的動畫，但這要求設計者要對Java語言熟悉。隨著軟件的發(fā)展，如今有了許多制作動畫的軟件，二維的、三維的等等，如現(xiàn)在我們用的FLASH軟件，用它制作的動畫，小巧迷人，只需作為一個.swf格式文件導出，再導入到網(wǎng)頁編輯器里就可以了。
1.3文本的編寫一般是采用在網(wǎng)頁中用html語言中的標簽編寫,也可以用網(wǎng)頁編輯工具的“所見即所得”功能直接寫入文字，如摘要：Dreamweaver軟件或者Frontpage軟件等都可以進行文本的編寫。還有一點要注重的就是，顯示文本的時候，設計者的機器上裝了很多漂亮的字體，設計的時候采用了，但是等上傳到網(wǎng)上以后，別人在瀏覽的時候，假如別人機器上沒有安裝字體，那就顯示不出來我們采用的漂亮樣式字體，因此，在考慮網(wǎng)頁界面藝術設計的基礎上，我們是把文字提前在Photoshop或Fireworks可以將字體先選擇自己喜歡的樣式，然后轉換柵格化圖片再用切片切成小塊，分別進行優(yōu)化。輸出的格式可以為gif或jpeg，再導入到Dreamweaver進行具體編輯，做鏈接可以用圖片特有的屬性進行熱區(qū)鏈接，這樣就完成我們想要的字體樣式效果了，就不會出現(xiàn)字體樣式顯示不出來的情況啦。
1.4框架的應用框架是網(wǎng)頁的常用形式，它可以使網(wǎng)頁更為清楚，可以把不同的頁面超鏈接到同一框架中，使的頁面更加緊湊。一般框架用在小說瀏覽頁面，或者介紹圖書章節(jié)的部分，或者教學網(wǎng)頁用到的的框架比較多。
1.5表格的應用表格是網(wǎng)頁中用處最廣泛的，可以布局，定位等等，它是網(wǎng)頁中最活躍的元素。它的應用可以使用網(wǎng)頁更加靈活。表格(br)是頁面中的重要元素,是頁面排版的主要手段。我們可以設定表格的寬度、高度、邊框、背景色、對齊方式等參數(shù)。很多時候，我們將表格的邊框設為0，以此來定位頁面中的元素，或者籍此確定頁面中各元素的相對位置。我們知道摘要：瀏覽器在讀取網(wǎng)頁html源代碼時，是讀完整個br才將它顯示出來的。假如一個大表格中含有多個子表格，必須等大表格讀完，才能將子表格一起顯示出來。我們在訪問一些站點時，等待多時無結果，按“停止”按鈕卻一下顯示出頁面就是這個原因。因此，我們在設計頁面表格的時候，應該盡量避免將所有元素嵌套在一個表格里，而且表格嵌套層次盡量要少。在使用Dreamweaver制作網(wǎng)頁時，會自動在每一個td內添加一個空字符。假如單元格內沒有填充其它元素，這個空字符會保留，在指定td的寬度或高度后，可以在源代碼內將其刪去。
2色彩的運用
網(wǎng)頁界面藝術設計離不開色彩的應用，當打開一個網(wǎng)站的時候，給用戶留下第一印象的既不是網(wǎng)站豐富的內容，也不是網(wǎng)站合理的布局，而是網(wǎng)站的色彩，尤其是在體現(xiàn)界面的時候，色彩對人的視覺效果非常明顯，一個網(wǎng)站設計的成功和否，在某種程度上取決于設計者對網(wǎng)頁界面設計顏色的運用和搭配。
網(wǎng)頁界面設計是一種審美活動，成功的設計作品一般都很藝術化。但藝術只是設計的手段，而并非設計的任務。設計的任務是要實現(xiàn)設計者的意圖，而并非創(chuàng)造美。網(wǎng)頁界面頁面設計的任務，是指設計者要表現(xiàn)的主題和要實現(xiàn)的功能。站點的性質不同，設計的任務也不同。從形式上，可以將站點分為以下三類摘要：第一類是資訊類站點，像新浪、網(wǎng)易、搜狐等門戶網(wǎng)站。這類站點將為訪問者提供大量的信息，而且訪問量較大。因此需注重網(wǎng)頁界面設計頁面的分割、結構的合理、頁面的優(yōu)化、界面的親和等新問題。第二類是資訊和形象相結合的網(wǎng)站，像一些較大的公司、國內的高校等。這類網(wǎng)站在設計上要求較高，既要保證資訊類網(wǎng)站的上述要求，同時又要突出企業(yè)、單位的形象。第三類則是形象類網(wǎng)站，比如一些中小型的公司或單位。這類網(wǎng)站一般較小，有的則有幾頁，需要實現(xiàn)的功能也較為簡單，頁面設計的主要任務是突出企業(yè)形象。這類網(wǎng)站對設計者的美工水平要求較高。
3網(wǎng)頁界面的優(yōu)化
在頁面設計中，網(wǎng)頁界面的優(yōu)化是較為重要的一個環(huán)節(jié)。它的成功和否會影響頁面的瀏覽速度和頁面的適應性，影響觀者對網(wǎng)站的印象。
在資訊類網(wǎng)站中，文字是頁面中最大的構成元素，因此字體的優(yōu)化顯得尤為重要。使用css樣式表指定文字的樣式是必要的，通常我們將字體指定為宋體，大小指定為12px，顏色要視背景色而定，原則上以能看清且和整個頁面搭配和諧為準。在白色的背景上，我們一般使用黑色，這樣不易產(chǎn)生視覺疲憊，能保證瀏覽者較長時間地瀏覽網(wǎng)頁。一般我們網(wǎng)頁默認的字體是宋體。為了體現(xiàn)站點的“和眾不同”和特有風格，我門可以根據(jù)需要選擇一些非凡字體。例如，為了體現(xiàn)專業(yè)可以使用粗仿宋體，體現(xiàn)設計精美可以用廣告體，體現(xiàn)親切隨意可以用手寫體等等。當然這些都是個人看法，你可以根據(jù)實際情況，選擇更貼切的字體。目前常見的中文字體有二三十種，常見的英文字體有近百種，網(wǎng)絡上還有許多專用藝術字體下載，要尋找一款滿足的字體并不算困難。需要說明的是摘要：使用非默認字體只能用圖片的形式，因為很可能瀏覽者的PC里沒有安裝你的非凡字體，那么你的辛勞設計制作便將付之東流。
網(wǎng)頁的適應性是很重要的，在不同的系統(tǒng)上，不同的分辨率下，不同的瀏覽器上，我們將會看到不同的結果，因此設計時要統(tǒng)籌考慮。一般我們在800×600下制作網(wǎng)頁，最佳瀏覽效果也是在800×600分辨率下，在其它情況下只要保證基本一致，不出現(xiàn)較大新問題即可?，F(xiàn)在我們設計網(wǎng)頁，一般要考慮800×600和1024×768兩種分辨率，因此我們的表格一般為居中的770左右的表格，表格的寬度最寬不要超過778。事實上，"做網(wǎng)頁"不是單純意義上的"制作網(wǎng)頁"，假如想讓自己制作的網(wǎng)頁美觀大方，就必須要考慮"設計網(wǎng)頁"的過程，一個好的作品，不通過仔細的"設計"就成形是絕對不可能的。
我國的網(wǎng)頁界面頁面設計水平總體上不及韓國，創(chuàng)新的頁面極少，基本都是一種風格，這也是因以前我國的寬帶水平跟不上有原因，一個漂亮的頁面，必然體積會比較龐大，網(wǎng)絡比較慢的話打開的速度也就可想而之，打開速度慢正是網(wǎng)頁的一個最大殺手，所以我國以前的頁面基本都是以框架式居多。隨著我國寬帶的普及，我們也迅速括起了一陣韓風，很多大膽創(chuàng)新的頁面出現(xiàn)，這是一個好現(xiàn)象，但是一味的模擬韓國也不行，我們也要有自己的特色，不能一味的拿來主義。
政府部門門戶網(wǎng)站建設是根據(jù)國家對政府信息公開的相關政策要求，實現(xiàn)部門政務信息公開的優(yōu)先手段和必然選擇。論文詳細描述了一個基于ASP技術和ACCESS數(shù)據(jù)庫系統(tǒng)網(wǎng)頁的實現(xiàn)過程。網(wǎng)頁設計及制作主要圍繞政務公開、在線辦事和網(wǎng)上交流三大功能進行，前臺信息共設置領導講話、政務公開、工作動態(tài)、政策法規(guī)等十大功能模塊。后臺管理采用Client/Server和Browser/Server相結合的技術方式，將超文本標記語言（HTML）和簡單的JScript語言相融合開發(fā)，使用Session對象進行Web頁之間的數(shù)據(jù)傳遞，并跟蹤用戶登陸，實現(xiàn)了不同權限用戶對新聞信息的計算機網(wǎng)絡管理和Web查詢功能。網(wǎng)頁新聞訪問采用主頁+標題面+子頁面三級模式，主頁面提供了本網(wǎng)頁的一個宏觀樣式，并讓各模塊與之配合聯(lián)系，構成一個完整的網(wǎng)頁系統(tǒng)。
【關鍵詞】
政府網(wǎng)站
網(wǎng)頁制作
ASP 技術
ACCESS 數(shù)據(jù)庫
【英文對照】
ABSTRACT
The portal website of government departments is the best candidate and inevitable choice for government affairs opening. Its construction is based on the related policies and regulations on government affairs opening which are enforced by the state. This paper presents the construction of one portal webpage based on ASP and ACCESS database. The design and implementation of webpage mainly consists of three parts: government affair opening， online government office， and online communication. The front-end consists of ten major modules， including leader's speech， government affair opening， government dynamics， policies and regulations etc. The backend is a hybrid of C/S and B/S technologies， HTML and JScript are combined together and session object is used for inter-page data communication and traced the status of user logon， web based lookup and remote administration of webpage are implemented and access control to user of different privileges is achieved. The access to webpage news adapts a three-tier scheme which includes main page， title page and sub-page， the main page provides the overall look-and-feel and orchestrate all the modules so to form a complete webpage.
【KeyWord】
Government website
Webpage Making
ASP
ACCESS database
【目
錄】
前言 2
正文 3
第 一 章 概 述 3
1.1 網(wǎng)頁制作背景 3
1.2 網(wǎng)頁制作的意義 3
1.3 開發(fā)工具簡介 4
第 二 章 可行性分析 5
2.1 B/S結構介紹 5
2.2 ACCESS 數(shù)據(jù)庫 5
2.3 ASP 技術 5
第 三 章 網(wǎng)頁需求分析 7
3.1 總體功能需求分析 7
3.1.1. 基本功能需求 7
3.1.2. 功能結構圖 7
3.2 網(wǎng)頁具體功能模塊需求分析 8
3.2.1. 政務公開功能 8
3.2.2. 網(wǎng)站辦事功能 8
3.2.3. 網(wǎng)上交流功能 8
3.3 網(wǎng)頁結構圖 9
3.4 網(wǎng)頁版面規(guī)劃 10
3.5 網(wǎng)站CI形象設計 10
3.6 網(wǎng)頁布局技術 11
第 四 章 數(shù)據(jù)庫設計 12
4.1 數(shù)據(jù)庫概念結構設計 12
4.2 數(shù)據(jù)庫邏輯結構設計 14
第 五 章 人機界面設計 17
5.1 后臺登錄界面設計 17
5.2 用戶管理頁面設計 18
5.3 信息檢索頁面設計 18
5.4 后臺管理頁面設計 19
第 六 章 系統(tǒng)程序設計 20
6.1 程序設計語言 20
6.2 部份源程序實現(xiàn)及文件 20
第 七 章 網(wǎng)頁測試 30
7.1 測試網(wǎng)站的建立 30
7.1.1. 測試網(wǎng)站環(huán)境 30
7.1.2. Web服務器IIS5.1簡介 30
7.1.3. 網(wǎng)頁測試 30
7.2 網(wǎng)頁及網(wǎng)站維護 31
第 八 章 結論 32
參考文獻 33
致 謝 34
【前言】
在我國，繼黨的十六大提出推行電子政務、提高行政效率之后，十六屆三中全會進一步強調要發(fā)展電子政務，提高政府的服務和管理水平。政府網(wǎng)站作為電子政務建設的龍頭是完善政府公共服務接入渠道的主要手段，它實現(xiàn)了按照用戶對象進行信息資源的整合，提供覆蓋用戶全生命周期的各種信息和服務。同時，網(wǎng)頁信息傳播的即時性和全面性確保了政府大量重要信息的廣泛共享，優(yōu)化了社會資源配置，讓政務信息更便捷、更低成本地進行傳遞。通過訪問政府網(wǎng)頁，企業(yè)和社會公眾可以24小時不間斷地，不受任何空間界限影響地與政府進行信息交互，在促進政務公開，改進公共服務，提高行政效能，確保公眾知情權、參與權和監(jiān)督權等方面有著顯著成效。
政府網(wǎng)站建設的含義就是利用Internet/Intranet等計算機通信技術，在Internet上建立正式站點，通過網(wǎng)絡實現(xiàn)政府在政治、經(jīng)濟、社會、生活等諸多領域中的管理和服務職能，推動政府辦公自動化與網(wǎng)上便民服務，是政府和社會互動的重要窗口。論文就巴中市網(wǎng)頁的設計和制作作了詳細描述，網(wǎng)頁主要功能模塊設置緊緊圍繞部門職能職責，密切結合公眾需求，實現(xiàn)了預期設計目標，網(wǎng)頁經(jīng)本地局域網(wǎng)測試運行正常。
【正文】
網(wǎng)頁制作
第 一 章 概 述
1.1 網(wǎng)頁制作背景
在當前這個網(wǎng)絡時代，電子政務是各國政府倡導和推動網(wǎng)絡化的5個重要應用領域中的首要。美國早在克林頓政府時期就開始積極倡導和推動電子政務和電子政府的建設。英國于2005年將所有的政府服務實現(xiàn)上網(wǎng)。新加坡更是從1981年就開始發(fā)展電子政務，目前其電子政務的發(fā)達程度已備受世人矚目。在我國，政府信息門戶網(wǎng)站作為展示政府整體形象的窗口和聯(lián)系群眾、服務群眾的橋梁正日益得到各級政府的重視。如今，全國各地的電子政務建設已進入實質階段，全國257個地市級城市中已經(jīng)有90%的城市建立了自己的政府網(wǎng)站。在應用上，電子政務建設已經(jīng)從網(wǎng)絡基礎建設向功能應用層面和社會服務層面轉變。隨著我國信息化進程的深入推進，將極大地調動整個社會活力，推動中國社會的飛速發(fā)展，并對中國未來的發(fā)展產(chǎn)生巨大的影響。
1.2 網(wǎng)頁制作的意義
首先，政府網(wǎng)站關系到政府的服務形象，關系到百姓的切身利益。政府部門通過制作網(wǎng)頁建立網(wǎng)站，是電子政務的最佳切入點和重要內容，政府網(wǎng)頁的發(fā)展水平是衡量一個地區(qū)電子政務進程的標志。在政府網(wǎng)頁上，政務信息公開程度，有關為民服務欄目健全情況，信息反饋情況，在線辦公與網(wǎng)上受理情況等關系到政府的服務形象，關系到百姓的切身利益。其次，政府網(wǎng)頁制作有利于政府各類信息的充分共享，有利于政府決策水平的不斷提高。通過網(wǎng)頁的各類平臺迅速直接地獲取公眾的反饋信息，準確掌握外部環(huán)境，大幅提高了正確決策與快速反應的能力。隨著政府各類信息的公開化，政民互動不斷加強，政府將在公眾面前展現(xiàn)出高效、透明的良好形象，這有利于提高社會凝聚力，對于維護社會穩(wěn)定、促進社會發(fā)展具有重要意義。
1.3 開發(fā)工具簡介
在眾多的網(wǎng)頁設計與制作工具軟件中，我根據(jù)實際需求及對軟件的熟悉程度，主要選取了Photoshop CS3、Fireworks 8.0、Flash MX 2004、Macromedia Dreamweaver8進行網(wǎng)頁的開發(fā)和制作，這些軟件的主要特點分述如下。
? 網(wǎng)頁圖像設計工具——Photoshop CS3、Fireworks 8.0
在網(wǎng)頁制作過程中，首先要使用Photoshop或Fireworks 設計網(wǎng)頁和整體效果圖、處理網(wǎng)頁中的圖像、背景圖及網(wǎng)頁的圖標、按鈕等。Photoshop是平面圖像處理業(yè)界霸主Adobe公司推出的跨越PC和MAC兩界首屈一指的大型圖像處理軟件.它功能強大，操作界面友好，得到了廣大第三方開發(fā)廠家的支持，從而也贏得了眾多的用戶的青睞。Fireworks是Adobe公司推出的著名平面圖像設計和圖像處理軟件，它具有強大的圖像處理功能和操作易用性，受到廣大平面圖形設計人員及專業(yè)廣告設計師的青睞。它涉及圖像合成、色彩校正、圖層調板、通道使用、動作調板、路徑工具、濾鏡等圖像處理功能?？芍谱魅绨粹o制作、文字特效、材質紋理、三維物體、影像特效及廣告創(chuàng)意設計等多種用途。
? 動畫制作工具——Flash MX 2004
Flash MX 2004是Macromedia公司的一個的網(wǎng)頁交互動畫制作工具。用flash制作出來的動化是矢量的，不管怎樣放大、縮小，它還是清晰可見。 用flash制作的文件很小，這樣便于在互聯(lián)網(wǎng)上傳輸，它還采用了數(shù)據(jù)流技術，只要下載一部分，就能欣賞動畫，而且能一邊播放一邊傳輸數(shù)據(jù)。 交互性更是flash動畫的迷人之處，可以通過點擊按鈕、選擇菜單來控制動畫的播放，這些優(yōu)點使flash日益成為網(wǎng)絡多媒體的主流。
? 網(wǎng)頁排版工具—— Macromedia Dreamweaver 8
Macromedia Dreamweaver 8是由Macromedia公司推出的，用于網(wǎng)頁開發(fā)和網(wǎng)站管理的專業(yè)化設計工具。它采用了多種新技術，具有設計和開發(fā)網(wǎng)站過程中需要的網(wǎng)站管理、網(wǎng)站設計、頁面制作、多媒體制作和動畫制作等豐富實用的功能；它具有友好的操作界面，在文檔窗口中可以打開各種浮動面板，同時還可以使用系統(tǒng)內置的多種對象進行操作。它將可視布局工具、應用程序開發(fā)功能和代碼編輯支持組合在一起，其功能強大，使得各個層次的開發(fā)人員和設計人員都能夠快速創(chuàng)建界面吸引人的基于標準的網(wǎng)站和應用程序。開發(fā)人員可以使用 Dreamweaver 及所選擇的服務器技術來創(chuàng)建功能強大的 Internet 應用程序，從而使用戶能連接到數(shù)據(jù)庫、Web 服務。
第 二 章 可行性分析
2.1 B/S結構介紹
B/S（Browser/Server，簡稱B/S）結構，即瀏覽器/服務器模式，它是WEB興起后的一種網(wǎng)絡結構模式，從傳統(tǒng)的二層C/S結構發(fā)展而來，通常采用三層結構：瀏覽器-Web服務器-數(shù)據(jù)庫服務器，WEB瀏覽器是客戶端最主要的應用軟件，瀏覽器通過Web Server 同數(shù)據(jù)庫進行數(shù)據(jù)交互。
在B／S體系結構系統(tǒng)中，用戶通過瀏覽器向分布在網(wǎng)絡上的許多服務器發(fā)出請求，服務器對瀏覽器的請求進行處理，將用戶所需信息返回到瀏覽器。而其余如數(shù)據(jù)請求、加工、結果返回以及動態(tài)網(wǎng)頁生成、對數(shù)據(jù)庫的訪問和應用程序的執(zhí)行等工作全部由Web Server完成，這樣大大簡化了客戶端，減輕了系統(tǒng)維護與升級的成本和工作量，降低了用戶的總體擁有成本（TCO）。
該結構的缺點是存在數(shù)據(jù)安全性問題、對服務器要求過高、數(shù)據(jù)傳輸速度慢、軟件的個性化特點明顯降低，難以實現(xiàn)傳統(tǒng)模式下的特殊功能要求。
2.2 ACCESS 數(shù)據(jù)庫
Access是微軟公司推出的基于Windows的桌面關系數(shù)據(jù)庫管理系統(tǒng)（RDBMS），是Office系列應用軟件之一。它提供了表、查詢、窗體、報表、頁、宏、模塊7種用來建立數(shù)據(jù)庫系統(tǒng)的對象；提供了多種向導、生成器、模板，把數(shù)據(jù)存儲、數(shù)據(jù)查詢、界面設計、報表生成等操作規(guī)范化；為建立功能完善的數(shù)據(jù)庫管理系統(tǒng)提供了方便，也使得普通用戶不必編寫代碼，就可以完成大部分數(shù)據(jù)管理的任務。由于Access數(shù)據(jù)庫的ODBC驅動程序支持的SQL指令全，執(zhí)行效率高，所以Access后臺數(shù)據(jù)庫+ASP服務器端程序+客戶端IE瀏覽器，是一個精練、實用、高效的組合模式。
2.3 ASP 技術
ASP是Active Server Page的縮寫，意為“動態(tài)服務器頁面”。ASP是微軟公司開發(fā)的代替CGI腳本程序的一種應用，它可以與數(shù)據(jù)庫和其它程序進行交互，是一種簡單、方便的編程工具。ASP的網(wǎng)頁文件的格式是.asp，現(xiàn)在常用于各種動態(tài)網(wǎng)站中。ASP是一種服務器端腳本編寫環(huán)境，可以用來創(chuàng)建和運行動態(tài)網(wǎng)頁或Web應用程序。ASP網(wǎng)頁可以包含HTML標記、普通文本、腳本命令以及COM組件等。利用ASP可以向網(wǎng)頁中添加交互式內容（如在線表單），也可以創(chuàng)建使用HTML網(wǎng)頁作為用戶界面的web應用程序。與HTML相比，ASP網(wǎng)頁具有實現(xiàn)動態(tài)網(wǎng)頁技術；包含在HTML代碼所組成的文件中，易于修改和測試；可以使用服務器端ActiveX組件來執(zhí)行各種各樣的任務；方便連接ACCESS與SQL數(shù)據(jù)庫等多種優(yōu)點，其主要缺點是開發(fā)人員要有豐富的經(jīng)驗，否則會留出漏洞，讓黑客利用進行注入攻擊。安裝ASP時，系統(tǒng)提供了兩種腳本語言：VBScript和JScript，而VBScript則被作為系統(tǒng)默認的腳本語言。
第 三 章 網(wǎng)頁需求分析
3.1 總體功能需求分析
網(wǎng)頁功能分析就是以系統(tǒng)的觀點，對已選定的對象與開發(fā)范圍進行有目的、有步驟的實際調查和科學分析。分析的目的就是要弄清楚網(wǎng)頁要做什么，最終為后面的設計工作打下基礎。
該網(wǎng)頁作為電子政務的一種服務平臺，政務公開、在線辦事、網(wǎng)上交流是其基本的三大功能。
3.1.1. 基本功能需求
? 政務公開功能
根據(jù)2008年5月1日起施行的政府信息公開條例規(guī)定，行政機關應當將主動公開的政府信息，通過政府公報、政府網(wǎng)站、新聞會以及報刊、廣播、電視等便于公眾知曉的方式公開，確保公眾享有充分的知情權、監(jiān)督權。
? 網(wǎng)站辦事功能
網(wǎng)上辦公辦事是網(wǎng)頁功能服務中非常重要的組成部分，是電子政務建設努力的方向。通過提供一些行政審批等項目的在線辦理極大地方便了群眾，減少了不必要的人為環(huán)節(jié)，節(jié)省了社會資源。
? 網(wǎng)上交流功能
通過搭建政民交流平臺，讓公眾不但能夠將自己的建議與意見直接反映給部門領導，實現(xiàn)普通群眾參政、議政的夙愿，而且使領導能夠通過這一平臺，傾聽民聲、關注民情、體察民意，進而為群眾辦理更多的實事、好事、貼心事。
3.1.2. 功能結構圖
3.2 網(wǎng)頁具體功能模塊需求分析
根據(jù)總體功能需求分析，該部門網(wǎng)頁確定政務公開、工作動態(tài)、領導講話等功能模塊，具體組成分別如下。
3.2.1. 政務公開功能
? 領導講話模塊
功能：即時領導關于三農(nóng)工作的各種會議、現(xiàn)場講話。
作用：傳達精神，貫徹意圖。
? 政務公開模塊
政務公開模塊包含七個子模塊：機構職能、領導介紹、內設科室、農(nóng)口系統(tǒng)、人事信息、規(guī)劃計劃、財政信息。模塊根據(jù)國家信息公開條例等法規(guī)政策要求，針對該政府部門必須公開的七個方面進行設置。
? 工作動態(tài)模塊
工作動態(tài)模塊，包含六個子模塊：綜合信息、新村建設、農(nóng)業(yè)產(chǎn)業(yè)化、勞務開發(fā)、農(nóng)田建設、移民工作。功能根據(jù)該政府部門各科室（辦）所承擔的職能職責進行設計，實現(xiàn)了各責任條塊當前工作信息的即時公開。
? 政策法規(guī)模塊
模塊設置農(nóng)業(yè)法規(guī)、政策文件兩個子模塊，提供近年來國家關于三農(nóng)工作各種重要法規(guī)、政策的瀏覽和下載，同時對本區(qū)、部門關于三農(nóng)工作制定的各種政策文件進行了公開，使法規(guī)政策透明化，接受公眾監(jiān)督。
? 專題專欄模塊
模塊包含科學發(fā)展觀、調研文章、企業(yè)推介、農(nóng)業(yè)前沿四個子模塊?？茖W發(fā)展觀子模塊緊扣時代所需，調研文章子模塊是在互聯(lián)網(wǎng)上開辟的一個嶄新的調研舞臺，企業(yè)推介子模塊為本地龍頭企業(yè)的宣傳、推廣提供了一個新平臺。農(nóng)業(yè)前沿子模塊放眼全球，宣傳、推介農(nóng)業(yè)領域的最新技術、最新品種。
3.2.2. 網(wǎng)站辦事功能
? 網(wǎng)上辦事模塊
模塊設置便民服務、服務流程、資料下載、統(tǒng)計報表四個子模塊，將該部門能夠進行網(wǎng)上辦理的相關行政審批事項予以了公開，方便了群眾，提高了辦事效率，提升了部門形象。
3.2.3. 網(wǎng)上交流功能
? 在線交流模塊
模塊設置三農(nóng)論壇、領導信箱、咨詢留言、網(wǎng)上投訴、網(wǎng)上調查五個子模塊。三農(nóng)論壇子模塊為公眾之間相互交流提供了平臺。領導信箱、在線咨詢等四個子模塊，為政府部門決策即時提供了群眾的意見及建議。
? 聯(lián)系我們模塊
該模塊主要功能：收集網(wǎng)站的反饋信息。
3.3 網(wǎng)頁結構圖
3.4 網(wǎng)頁版面規(guī)劃
全部網(wǎng)頁采用1024×768分辨率制成，網(wǎng)頁訪問采用首頁、導航頁和新聞頁三級頁面形式。
? 首頁
首頁使用的是國字型結構布局。 國字型結構布局是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標題+主菜單，下半部分分為3個區(qū)域，左右分列一些兩小條內容，中間是主題內容，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息，聯(lián)系方式，版權聲明等。這種布局的優(yōu)點是能夠充分利用版面，信息量大;缺點是頁面擁擠，不夠靈活。
? 導航頁
采用拐角型布局，優(yōu)點是頁面結構清晰，主次分明，缺點是規(guī)矩呆板，容易讓人“看之無味。
? 新聞頁
使用標題正文型：這種類型即最上面是標題或類似的一些東西，下面是正文；本站子頁大部分是這個結構。
? 頁頭
本站頁頭以900×150的農(nóng)村風景圖為底，左置“巴中市”六字及名稱英文“”O(jiān)ffice of rural affairs，Bazhou District，Bazhong City，右邊放置宣傳語（FLASH動畫）一起構成。
? 頁腳
本站頁腳如下：
3.5 網(wǎng)站CI形象設計
? 主色調與色彩
網(wǎng)站采用代表了春天、希望、田野的“綠色”為主色調，與部門的農(nóng)業(yè)、農(nóng)村、農(nóng)民三農(nóng)工作性質相吻合。
? 字體
導航欄字體為“黑體”，14px；網(wǎng)站主欄目字體為“宋體”，14 px；正文字體為“宋體”，9 px；
? 交互方式
網(wǎng)站設置了專門的在線交流模塊，提供了論壇、網(wǎng)上投訴、咨詢留言、網(wǎng)上調查等多種交互方式。
3.6 網(wǎng)頁布局技術
網(wǎng)頁使用表格方式布局，同時用CSS進行樣式控制。表格布局的優(yōu)勢在于它能對不同對象加以處理，而又不用擔心不同對象之間的影響。表格布局的缺點是，當我們用了過多表格時，頁面下載速度受到影響。CSS層疊樣式表是W3C組織新近批準的一個輔助HTML設計的新特性，它使整個HTML保持統(tǒng)一的外觀。過去在設置文本時，為了保持整個段落都使用相同的外觀，不得不為每一段設置屬性，很麻煩。采用CSS可以在設置文本之前，就指定整個文本的屬性，比如顏色、字體大小等等，獲得統(tǒng)一的文本外觀。
第 四 章 數(shù)據(jù)庫設計
數(shù)據(jù)庫在一個網(wǎng)頁系統(tǒng)中占有非常重要的地位，數(shù)據(jù)庫的結構好壞將直接影響到應用系統(tǒng)的實現(xiàn)效果和數(shù)據(jù)操作效率以及能否保證數(shù)據(jù)的一致性、完整性和安全性。
4.1 數(shù)據(jù)庫概念結構設計
數(shù)據(jù)庫概念設計的任務是根據(jù)用戶需求設計數(shù)據(jù)的概念數(shù)據(jù)模型，簡稱概念模型。概念模型是按用戶的觀點對數(shù)據(jù)和信息進行建模，是從用戶的角度看到的數(shù)據(jù)庫，它可以用E-R模型來表示。構成E-R圖的基本要素是實體型、屬性和關系，其表示方法為：實體型：用矩形表示，矩形框內寫明實體名；屬性：用橢圓形表示，并用無向邊將其與相應的實體連接起來；關系：用菱形表示，菱形框內寫明關系名，并用無向邊分別將有關實體連接起來，同時在無向邊旁標上聯(lián)系的類型。
根據(jù)前面的需求分析，可以得到本網(wǎng)頁數(shù)據(jù)庫系統(tǒng)的E-R圖，如圖4-1所示。
上述E-R圖的關系說明如下：管理員可以對所有網(wǎng)上調查、新聞信息、投訴留言、論壇發(fā)貼等實體進行增刪編輯，它們都是1：n的關系。一個管理員可以對論壇所有注冊用戶進行監(jiān)管，一個超級管理員可以對多個后臺管理普通用戶進行監(jiān)管，它們的關系也都是1：n。
各實體屬性的E-R圖如下：
4.2 數(shù)據(jù)庫邏輯結構設計
通過分析系統(tǒng)涉及的相關實體以及要收集、存儲和操縱的數(shù)據(jù)信息，本網(wǎng)頁數(shù)據(jù)庫共設置了新聞信息表（News）等6個表，分述如下。
? 新聞信息表:用于存儲新聞及政務信息。
表4-1 新聞信息表(News)
?
三農(nóng)論壇表:用于存儲論壇發(fā)帖。
表4-2 三農(nóng)論壇表(BBS)
?
投訴留言表:用于存儲群眾來信、投訴、咨詢及回復。
表4-3 投訴留言表(Message)
? 論壇注冊用戶表:用于存儲三農(nóng)論壇注冊用戶信息。
表4-4 論壇注冊用戶表(User)
? 后臺管理員表:用于存儲管理員姓名、密碼、權限。
表4-5 后臺管理員表(ManageUser)
?
網(wǎng)上調查表:用于存儲網(wǎng)站調查項及投票。
表4-6 網(wǎng)上調查表(OnlineSurvey)
第 五 章 人機界面設計
5.1 后臺登錄界面設計
設計思想：登錄頁面主要實現(xiàn)用戶的登錄。通過用戶名、密碼、隨機密碼、IP、SessionID的組合驗證實現(xiàn)未登陸用戶的正常登陸和已登陸用戶中同一用戶名允許在同一IP上重復登陸，拒絕同一用戶名在不同IP上重復登陸。
圖5-1 登錄流程圖
圖5-2 管理員登錄界面
5.2 用戶管理頁面設計
設計思想：登錄頁面主要實現(xiàn)用戶的登錄，用戶有超級管理員、普通管理員。超級管理員可以對其進行任何的操作，包括對普通管理員的增刪、密碼修改。一般用戶只可以做權限之內的操作和只能對自身的信息作修改。
圖5-3 用戶管理流程圖
圖5-4 用戶管理界面
5.3 信息檢索頁面設計
設計思想：根據(jù)輸入的關鍵字實現(xiàn)單字段或多字段組合查詢。
圖5-5 信息檢索流程圖
5.4 后臺管理頁面設計
網(wǎng)站后臺管理系統(tǒng)提供了添加新聞內容、管理全部新聞、領導信箱管理、在線咨詢管理、公眾留言管理、網(wǎng)上投訴管理、網(wǎng)上調查管理、信息中心管理、超級管理選項、文件上傳十個功能選擇項，可以完成新聞信息的在線編輯、咨詢留言的在線回復、網(wǎng)上調查項的增減等管理任務。
圖5-7 后臺功能結構圖
第 六 章 系統(tǒng)程序設計
前面著重討論了系統(tǒng)功能模塊的設計，詳細分析了每一個模塊的功能，本章將就系統(tǒng)中模塊功能的具體實現(xiàn)，選取部分源程序進行討論。
6.1 程序設計語言
網(wǎng)站主要采用ASP作為程序設計代碼的開發(fā)工具。使用ASP作為開發(fā)工具可以方便地建立動態(tài)的、高性能的、安全的、跨平臺的先進動態(tài)網(wǎng)站，其突出特點有以下幾個：
? ASP可以將內容的生成和顯示進行分離
Web頁面開發(fā)者可以用HTML或XML 標識進行對最終頁面的設計，同時使用ASP Tag 或Java Script 來生成頁面上的動態(tài)內容，因為所有的腳本都在服務器端運行， 所以， 如果核心邏輯部分被封裝在標識中， 那么Web管理人員或頁面設計者將只能編輯ASP頁面的顯示方式， 而不會影響其內容的實質。
? 對不同瀏覽器的兼容
由于ASP技術采用了將ASP Tag 和Java Script 在服務器端解釋并執(zhí)行而只將結果以HTML或XML的形式送回到客戶端的方法， 從而保證了對其它基于HTML的Web瀏覽器的完全兼容。
6.2 部份源程序實現(xiàn)及文件
? 數(shù)據(jù)庫訪問技術
網(wǎng)頁在采用微軟IIS/PWS的網(wǎng)絡平臺，通過服務器端運行的ASP程序來訪問后臺Access數(shù)據(jù)庫。數(shù)據(jù)庫訪問采用匿名身份驗證方式，使用戶無需輸入用戶名或密碼便可以對數(shù)據(jù)庫進行訪問。匿名身份驗證是指由 IIS創(chuàng)建IUSR、計算機名稱、帳戶（計算機名稱是正在運行IIS 的服務器名稱），當匿名用戶請求數(shù)據(jù)庫內容時IIS 會將該連接分配給 IUSER_ComputerName 帳戶，其中ComputerName。默認情況下，IUSER_ComputerName 帳戶為 Guests 組的成員。此組具有 NTFS 文件系統(tǒng)權限所規(guī)定的安全限制，這些限制指定訪問級別以及可提供給公共用戶的內容的類型。建立Access數(shù)據(jù)庫連接的步驟及參數(shù)意義如下：
第一行程序：建立一個ADO對象集中的Connection對象，也即連接對象。這是建立數(shù)據(jù)庫連接的初始步驟。執(zhí)行這行程序后，Conn成為一個連接對象。
第二行程序：建立一個ADO對象集中的Recordset對象，以便利用Recordset對象操作數(shù)據(jù)庫（當然，這只是對數(shù)據(jù)庫操作的多種方式之一）。執(zhí)行這行后，rs就成為一個Recordset對象。
第三行程序：利用連接對象Conn的Open方法打開一個指定的數(shù)據(jù)庫。首先利用Server對象的MapPath函數(shù)，取得要打開數(shù)據(jù)庫的完整的文件路徑，并存儲在變量DBQ中。其次，因為我們要打開的是Access數(shù)據(jù)庫，所以要指定ODBC驅動程序參數(shù)，表示要透過Access的ODBC驅動程序來訪問數(shù)據(jù)庫。到這里，就已經(jīng)打開了數(shù)據(jù)庫名指定的數(shù)據(jù)庫。
第四行程序： Sql指令串。
第五行程序：利用rs對象的Open方法打開數(shù)據(jù)庫中的數(shù)據(jù)表。這其中有四個參數(shù)，其意義如下：
數(shù)據(jù)表名或SQL指令串：在這個參數(shù)里指定要打開的數(shù)據(jù)庫內的數(shù)據(jù)表名稱，或者是用SQL的Select指令串確定的數(shù)據(jù)表的指定范圍數(shù)據(jù)
Connection對象：指定已經(jīng)打開的數(shù)據(jù)庫的Connection對象。
Recordset類型：表示打開數(shù)據(jù)表的方式，有四種選擇。數(shù)字0表示只讀方式，且當前記錄只能下移；數(shù)字1表示可讀寫方式，當前記錄可自由上下移動，但不能及時看到別的用戶建立的新記錄，除非重新啟動；數(shù)字2表示可讀寫方式，當前記錄可自由移動，而且可以及時看到別的用戶增加的新記錄；數(shù)字3表示只讀方式，但當前記錄可以自由移動。
鎖定類型：這個參數(shù)指定數(shù)據(jù)庫的鎖定功能。因為網(wǎng)絡上的數(shù)據(jù)庫都是多用戶的，很可能同時有多個用戶在操作數(shù)據(jù)庫。為了避免錯誤，讓同一時間只可能有一個用戶修改數(shù)據(jù)，就要用鎖定功能。有四種選擇：數(shù)字1表示只讀方式鎖定，用戶不能更改數(shù)據(jù)；數(shù)字2表示悲觀鎖定，當一個用戶用rs對象開始修改數(shù)據(jù)時就鎖定數(shù)據(jù)庫，直到用戶用rs.Update更新記錄后，才解除鎖定；數(shù)字3表示樂觀鎖定，只有在數(shù)據(jù)寫入數(shù)據(jù)庫中的時候才鎖定。數(shù)字4表示批次樂觀鎖定，只有在使用rs.UpdateBatch成批更新數(shù)據(jù)時候才鎖定數(shù)據(jù)記錄。
? 身份驗證
本網(wǎng)站身份驗證采用服務器端驗證代碼方式，密碼算法采用流行的MD5算法，同時附加客戶端隨機密碼驗證。MD5全稱Message-Digest Algorithm 5（信息-摘要算法），是由MIT Laboratory for Computer Science和RSA Data Security Inc的Ronald L. Rivest在90年代初向IEFT提交的一種不可逆運算加密算法，經(jīng)MD2、MD3和MD4發(fā)展而來，面向32位的電腦。登陸驗證按一個IP可以有多個用戶登陸，一個用戶只能登陸一個IP的原則進行設計，具體代碼及解釋如下：
? 網(wǎng)上調查功能實現(xiàn)
圖6-1 網(wǎng)上調查投票界面
圖6-2 網(wǎng)上調查結果界面
網(wǎng)上調查實現(xiàn)代碼
第 七 章 網(wǎng)頁測試
7.1 測試網(wǎng)站的建立
7.1.1. 測試網(wǎng)站環(huán)境
網(wǎng)頁測試使用本單位局域網(wǎng)進行，配置如下：
服務器端：操作系統(tǒng)—Windows xp
Web服務器—IIS5.1
瀏覽器—IE6.0
客戶端：Internet Explorer6.0
7.1.2. Web服務器IIS5.1簡介
IIS是Internet Information Services的縮寫，是目前使用最廣泛的Web服務器，可以在UNIX和Windows平臺上運行。它與Windows NT Server完全集成，允許使用Windows NT Server內置的安全性以及NTFS文件系統(tǒng)建立強大靈活的Internet／Intranet站點。IIS組件主要包括Web服務器、FTP服務器、NNTP服務器和SMTP服務器，分別用于網(wǎng)頁瀏覽、文件傳輸、新聞服務和郵件發(fā)送等方面。
7.1.3. 網(wǎng)頁測試
? IIS配置
當IIS被成功安裝后，將在計算機C:\Inetpub\wwwroot下新建一個默認網(wǎng)站，通過修改默認網(wǎng)站配置可以建立自己的站點。如自己的網(wǎng)頁放在D:\Wy目錄下，首頁文件名為Index.asp，其具體步驟如下：
第一步：在“默認Web站點”上單擊右鍵，選“屬性”，以進入名為“默認Web站點屬性”設置界面。
第二步：轉到“主目錄”窗口，再在“本地路徑”輸入（或用“瀏覽”按鈕選擇）好自己網(wǎng)頁所在的“D:\Wy”目錄。
第三步：轉到“文檔”窗口，再按“添加”按鈕，根據(jù)提示在“默認文檔名”后輸入自己網(wǎng)頁的首頁文件名“Index.asp”。
第四步：在“默認Web站點”上單擊右鍵，選“新建虛擬目錄”，依次在“別名”處輸入“test”，在“目錄”處輸入“D:\Wy”后再按提示操作。
? 數(shù)據(jù)源（ODBC）配置
第一步：選擇控制面板中的管理工具打開數(shù)據(jù)源（ODBC）。
第二步：在選項卡系統(tǒng)DNS中添加Microsoft Access Driver(*.mdb)驅動并指定數(shù)據(jù)源為網(wǎng)站的數(shù)據(jù)庫文件。
? 測試
打開瀏覽器，直接在地址欄中輸入：localhost/test/index.asp或者127.0.0.1/test/index.asp即可。
7.2 網(wǎng)頁及網(wǎng)站維護
在測試完成后，網(wǎng)頁就可以到互聯(lián)網(wǎng)上了，接下來要做的就是網(wǎng)站的日常維護了。網(wǎng)站維護就是對服務器及相關軟硬件的維護，對可能出現(xiàn)的問題進行評估，制定響應時間，制定相關維護規(guī)定，將網(wǎng)站維護制度化、規(guī)范化，主要包括以下內容：
? 即時更新新聞內容
? 留言、投訴、咨詢、信箱定期回復
? 數(shù)據(jù)庫內容定期備份、刪減、分類
? 更正數(shù)據(jù)庫使用過程中發(fā)現(xiàn)的問題
? 定期進行綜合分析，不斷優(yōu)化數(shù)據(jù)庫中數(shù)據(jù)結構，提高使用效率
? 在系統(tǒng)運行過程中應定期對管理員用戶名和密碼進行更新，并對IIS和NT權限作相應設置
第 八 章 結論
本次利用畢業(yè)設計的機會，為自己工作的單位設計了網(wǎng)頁。網(wǎng)頁使用ASP技術開發(fā)，具有良好的交互性能，具備強大的后臺管理功能。新聞、信息檢索、互動交流等主要模塊設計做到了與單位職能職責的緊密結合，達到了預期設計目標。網(wǎng)頁經(jīng)單位局域網(wǎng)多次測試，在WindowsXP操作系統(tǒng)，IIS5.1的服務器環(huán)境上正常運行。
此次網(wǎng)頁制作，通過大量閱讀書籍和求助互聯(lián)網(wǎng)，使我初步掌握了網(wǎng)頁設計制作的一般過程、ASP簡單設計應用、CSS和表單布局常識、ACCESS數(shù)據(jù)庫設計技能。特別是在ASP編程階段，通過無數(shù)次解決測試過程中排查出的問題，我不僅回顧和應用了以前學習過的理念知識，還掌握了許多新的知識和技巧，獲益良多。但由于時間倉促，受一些技術和設備所限，網(wǎng)頁在美工、需求分析、網(wǎng)頁安全等方面存在諸多不足之處，有待后期運行中進一步改進和完善。
參考文獻
1. 《Dreamweaver CS3 入門 提高 精通》，薛凱，康亞雄編著，機械工業(yè)出版社 2008
2. 《Photoshop CS3 平面設計標準教程》，李建宏，雷波編著，機械工業(yè)出版社 2008
3. 《ASP網(wǎng)頁數(shù)據(jù)庫短訓教程》，劉瑞新，汪遠征編著，機械工業(yè)出版社 2005
4. 《Flash CS3動畫制作》，華信卓越編著，電子工業(yè)出版社 2008
5. 《網(wǎng)頁設計三合一》，甘登岱編著，清華大學出版社 2009
6. 《網(wǎng)頁設計與網(wǎng)站建》，邱云飛，溫國峰編著，清華大學出版社 2009
7. 《Access2007數(shù)據(jù)庫應用與開發(fā)》，楊繼萍，孫巖，梁文新編著，清華大學出版社 2008
8. 《網(wǎng)頁制作從入門到精通》，譚貞軍，劉斌編著，清華大學出版社 2008
9. nbagri.gov.cn/index.jsp（寧波農(nóng)村經(jīng)濟綜合信息網(wǎng)）
10. 68design.net/（網(wǎng)頁設計師聯(lián)盟）
11. wznb.gov.cn/（溫州市委農(nóng)辦）
12. bjnw.gov.cn/（北京市農(nóng)委）
