第一篇：網(wǎng)頁設(shè)計畢業(yè)論文

目錄

一、課題來源.....................................................3

（一）設(shè)計思想.................................................3

（二）網(wǎng)站主題.................................................3

二、網(wǎng)站需求分析.................................................3

（一）搜集材料.................................................3

（二）需求分析與規(guī)劃...........................................3 三 軟件介紹.....................................................4

（一）Adobe Photoshop..........................................4

（二）Dreamweaver CS6..........................................4(三)軟件運行環(huán)境..............................................4

四、網(wǎng)站整體設(shè)計.................................................5

（一）網(wǎng)頁的規(guī)劃...............................................5

（二）系統(tǒng)框架.................................................6

五、主頁介紹與網(wǎng)頁截圖...........................................6

（一）主頁面介紹...............................................6

（二）子頁面介紹...............................................7

六、總結(jié)與感想...................................................9

（一）本網(wǎng)站實現(xiàn)了形式與內(nèi)容的統(tǒng)一.............................9

（二）本網(wǎng)站具有良好的互動性..................................10

（三）缺點與不足..............................................10 參考文獻(xiàn)........................................................11

/ 11

摘要

在網(wǎng)絡(luò)高速發(fā)展的今天，互聯(lián)網(wǎng)不僅深深的改變了人們的生活方式，更改變了人們的思維方式，雷軍用互聯(lián)網(wǎng)思維帶領(lǐng)小米科技走到了今天，馬云借助互聯(lián)網(wǎng)成就了他的商業(yè)帝國，而首屆世界互聯(lián)網(wǎng)大會在浙江烏鎮(zhèn)召開更加突出了互聯(lián)網(wǎng)的重要性。而網(wǎng)站作為互聯(lián)網(wǎng)的載體，只有優(yōu)秀的網(wǎng)站才能使互聯(lián)網(wǎng)更好的為我們服務(wù)。基于這一理念，我設(shè)計了自己的網(wǎng)站——田園采摘網(wǎng)。我利用所學(xué)習(xí)的內(nèi)容自己動手設(shè)計本網(wǎng)站，制作過程中所使用的軟件是Macromedia 公司的Adobe Dreamweaver CS6 和photoshop。在整個網(wǎng)站的制作過程中，我盡力優(yōu)化網(wǎng)頁的布局和排版，合理選擇內(nèi)容，盡可能做到完美。

關(guān)鍵詞： Dreamweaver Photoshop 網(wǎng)站設(shè)計 田園采摘

/ 11

一、課題來源

（一）設(shè)計思想

用互聯(lián)網(wǎng)的思維思考問題、做事情，創(chuàng)建優(yōu)秀網(wǎng)站，精品網(wǎng)站。

（二）網(wǎng)站主題

結(jié)合自己的實際情況，選定田園采摘園作為本網(wǎng)站的設(shè)計主題，用互聯(lián)網(wǎng)的思維經(jīng)營采摘園。

二、網(wǎng)站需求分析

（一）搜集材料

明確了網(wǎng)頁的主題以后，就可以圍繞主題開始搜集材料了。材料既可以從圖書、報紙、光盤、多媒體上得來，也可以從互聯(lián)網(wǎng)上搜集，然后把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁的素材。

（二）需求分析與規(guī)劃

一個完整的網(wǎng)頁是建立在各種各樣的需求上面的，這種需求往往來自于客戶的實際需求或者是出于公司自身發(fā)展的需要，其中客戶的實際需求也就是說這種交易性質(zhì)的需求占了絕大部分。

面對網(wǎng)頁設(shè)計擁有不同知識層面的客戶，設(shè)計的負(fù)責(zé)人對用戶需求的理解程度，在很大程度上決定了此類網(wǎng)頁規(guī)劃的成敗。因此如何更好地的了解、分析、明確用戶需求，并且能夠準(zhǔn)確、清晰以文檔的形式表達(dá)給參與項目開發(fā)的每個成員，保證開發(fā)過程按照滿足用戶需求為目的正確項目開發(fā)方向進(jìn)行，是每個網(wǎng)頁規(guī)劃和網(wǎng)頁制作管理者需要面對的問題。據(jù)我們調(diào)查，當(dāng)今 3 / 11

互聯(lián)網(wǎng)已經(jīng)有成千上萬的采摘網(wǎng)。所以，這就要求我們的網(wǎng)站中要有突出和新穎的地方去吸引顧客，這樣我們才能在眾多的采摘園中占有一席之地并獲益。網(wǎng)頁設(shè)計中，運用photoshop等圖形圖像處理軟件，進(jìn)行大量的圖片處理制作，給人以強(qiáng)烈的美感。并添加flash代碼等，給瀏覽者一種現(xiàn)代感。整個網(wǎng)頁由dreamweaver完成。

三 軟件介紹

（一）Adobe Photoshop Photoshop簡稱“PS”，是由Adobe Systems開發(fā)和發(fā)行的圖像處理軟件。Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以有效地進(jìn)行圖片編輯工作。ps有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。

（二）Dreamweaver CS6 dreamwraver軟件由美國著名的網(wǎng)站應(yīng)用開發(fā)工具生產(chǎn)廠商Adobe Macromedia于2005年6月推出并正式投入市場以來，已經(jīng)發(fā)展得相當(dāng)成熟。關(guān)于dreamwraver的技術(shù)介紹的相關(guān)書籍與網(wǎng)絡(luò)信息相當(dāng)豐富。通過大學(xué)中軟件開發(fā)環(huán)境課程的學(xué)習(xí)，對dreamwraver有了比較深刻的認(rèn)識，并比較輕松的掌握了dreamwraver的操作。因此，軟件技術(shù)可以完成任務(wù)的要求。

(三)軟件運行環(huán)境

Dreamweaver是一款簡體中文軟件，可以在Win2003/WinXP/Win7/Win8中安全運行，換句話說，它可以在任何家用微機(jī)中運行。

/ 11

圖1.Dreamweaver CS6

四、網(wǎng)站整體設(shè)計

（一）網(wǎng)頁的規(guī)劃

一個網(wǎng)頁設(shè)計得成功與否，很大程度上決定于設(shè)計者的規(guī)劃水平，規(guī)劃網(wǎng)頁就像設(shè)計師設(shè)計大樓一樣，圖紙設(shè)計好了，才能建成一座漂亮的樓房。網(wǎng)頁規(guī)劃包含的內(nèi)容很多，如網(wǎng)頁的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)頁的風(fēng)格、5 / 11

顏色搭配、版面布局、文字圖片的運用等，你只有在制作網(wǎng)頁之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有成竹。也只有如此制作出來的網(wǎng)頁才能有個性、有特色，具有吸引力。

（二）系統(tǒng)框架

采摘園首頁 采摘概況 最新動態(tài) 時令水果 活動影集 聯(lián)系我們 圖2.系統(tǒng)模塊框架圖

五、主頁介紹與網(wǎng)頁截圖

（一）主頁面介紹

首先是利用Dreamwear技術(shù)制作的網(wǎng)頁。上方框架是網(wǎng)站的圖片、網(wǎng)站名稱，點擊相關(guān)文字可以進(jìn)入到相關(guān)的頁面上，下方包括五大個分類鏈接。

圖3.主頁

/ 11

（二）子頁面介紹

本網(wǎng)站總共包括五個子網(wǎng)頁，分別為：采摘概況、最新動態(tài)、時令水果、活動影集、在線聯(lián)系。

圖4.采摘概況

圖5.最新動態(tài)

/ 11

圖6.活動影集

圖7.時令水果

/ 11

圖8.聯(lián)系我們

六、總結(jié)與感想

（一）本網(wǎng)站實現(xiàn)了形式與內(nèi)容的統(tǒng)一

要將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu)，形式語言必須符合頁面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。運用對比與調(diào)和、對稱與平衡、節(jié)奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。如對稱原則在頁面設(shè)計中，它的均衡有時會使頁面顯得呆板，但如果加入一些富有動感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容往往會達(dá)到比較好的效果。點、線、面作為視覺語言中的基本元素，要使用點、線、面的互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最佳的頁面效果。網(wǎng)頁設(shè)計中點、線、面的運用并不是孤立的，很多時候都需要將它們結(jié)合起來，表達(dá)完美的設(shè)計意境。

/ 11

（二）本網(wǎng)站具有良好的互動性

對于銷售業(yè)務(wù)頁面要求運行的工作環(huán)境穩(wěn)定，易于操作，界面美觀大方，對于前臺展示界面要求系統(tǒng)便于維護(hù)，安全可靠，對于廣大客戶所要執(zhí)行的操作簡單易懂，遠(yuǎn)程訪問速度較快，界面友好美觀，有基本的錯誤提醒功能，遠(yuǎn)程操作數(shù)據(jù)庫正確，要求和客戶有一定的互動性，在主頁上直觀的就可以查看瀏覽者所想要了解的東西。

（三）缺點與不足

就我個人而言，對網(wǎng)頁制作還缺少很多的理論與實際操作知識，曾經(jīng)只是做一些簡單的個人主頁，僅此而已。對通過此次畢業(yè)設(shè)計，可以深入的學(xué)習(xí)，以提高自身的制作水平。下一步我將進(jìn)一步完善和優(yōu)化本網(wǎng)站，同時將推出適合移動端應(yīng)用的網(wǎng)站，這樣可以進(jìn)一步優(yōu)化采摘網(wǎng)的布局。

/ 11

參考文獻(xiàn)

[1]鄧文淵.網(wǎng)頁制作高手[M].北京：人民郵電大學(xué)出版，2007，6 [2]李憲廣.網(wǎng)頁制作邊學(xué)邊用[M].北京：清華大學(xué)出版社，2009，3 [3]網(wǎng)頁設(shè)計入門[EB/OL].http://004km.cn/sale/view.asp?Article ID=288 [4]許凌云，柳勇良.網(wǎng)頁設(shè)計全方位學(xué)習(xí)[M].北京：清華大學(xué)出版社，2008，11 [5]陳琳.photoshop cs3 入門實戰(zhàn)與提高[M].北京：電子工業(yè)出版社，2008，11 [6]焦慧.網(wǎng)頁制作基礎(chǔ)與典型范例[M].北京：電子工業(yè)出版社，2008，7 [7]戎馬工作室.Dreamweaver 8與asp動態(tài)網(wǎng)站開發(fā)[M].北京：機(jī)械工業(yè)出版社，2006，5 [8]戴一波.Dreamweaver CS3網(wǎng)站制作炫例精講[M].北京：電子工業(yè)出版社，2008，1 [9]何秀芳.網(wǎng)頁制作與網(wǎng)站建設(shè)課堂實錄[M].北京：人民郵電出版社.2009，3 [10]孫連三.新編網(wǎng)頁制作與網(wǎng)站建設(shè)入門與提高[M].北京：人民郵電出版社.2008，9 [11]鄧文淵.網(wǎng)頁制作高手FLASH 8[M].北京：人民郵電出版社，2007，6 [12]胡崧.超夢幻勁爆網(wǎng)頁[M].中國青年出版社.2008，7 [13]Scot Johson etal.using Active Server Page[J].Que 2007 11 / 11

第二篇：網(wǎng)頁設(shè)計畢業(yè)論文

《網(wǎng)頁設(shè)計畢業(yè)論文》簡介：

前言隨著時代的發(fā)展，網(wǎng)站建設(shè)越來越接近于一門藝術(shù)而不僅僅是一項技術(shù)。網(wǎng)頁的藝術(shù)設(shè)計，日益被網(wǎng)站建設(shè)者 《網(wǎng)頁設(shè)計畢業(yè)論文》正文開始>> 前言

隨著時代的發(fā)展，網(wǎng)站建設(shè)越來越接近于一門藝術(shù)而不僅僅是一項技術(shù)。網(wǎng)頁的藝術(shù)設(shè)計，日益被網(wǎng)站建設(shè)者所注重。在目前國

內(nèi)對此領(lǐng)域研究甚少的情況下，作者將網(wǎng)頁藝術(shù)設(shè)計與其他藝術(shù)設(shè)計形式進(jìn)行比較，嘗試從網(wǎng)頁藝術(shù)設(shè)計的內(nèi)容、原則和特點等

三個方面，對這個新的藝術(shù)設(shè)計領(lǐng)域進(jìn)行初步的歸納總結(jié)和理論探討。作者認(rèn)為網(wǎng)頁藝術(shù)設(shè)計是藝術(shù)與技術(shù)的高度統(tǒng)一，指出網(wǎng)

頁藝術(shù)設(shè)計包含視聽元素與版式設(shè)計兩項內(nèi)容；以主題鮮明、形式與內(nèi)容相統(tǒng)一、強(qiáng)調(diào)整體為設(shè)計原則；具有交互性與持續(xù)性、多維性、綜合性、版式的不可控性、藝術(shù)與技術(shù)結(jié)合的緊密性等五個特點。在明確了網(wǎng)頁藝術(shù)設(shè)計與網(wǎng)站主題的關(guān)系的基礎(chǔ)上，提出了“美”和“功能”都是為了更好地表達(dá)網(wǎng)站主題這一觀點。

網(wǎng)頁藝術(shù)設(shè)計是伴隨著計算機(jī)互聯(lián)網(wǎng)絡(luò)的產(chǎn)生而形成的視聽設(shè)計新課題，是網(wǎng)頁設(shè)計者以所處時代所能獲取的技術(shù)和藝術(shù)經(jīng)驗為

基礎(chǔ)，依照設(shè)計目的和要求自覺地對網(wǎng)頁的構(gòu)成元素進(jìn)行藝術(shù)規(guī)劃的創(chuàng)造性思維活動，必然要成為設(shè)計藝術(shù)的重要組成部分，并

隨著網(wǎng)絡(luò)技術(shù)的發(fā)展而發(fā)展。表面上看，它不過是關(guān)于網(wǎng)頁版式編排的技巧與方法，而實際上，它不僅是一種技能，更是藝術(shù)與 技術(shù)的高度統(tǒng)一。

目錄：

一、網(wǎng)頁藝術(shù)設(shè)計的內(nèi)容~~~~~~~~~~~~~~~~~~~~頁 1.視聽元素~~~~~~~~~~~~~~~~~~~~頁 2.版式設(shè)計~~~~~~~~~~~~~~~~~~~~頁

二、網(wǎng)頁藝術(shù)設(shè)計的原則 ~~~~~~~~~~~~~~~~~~頁 1.主題鮮明 ~~~~~~~~~~~~~~~~~~~~~~~~~~頁 2.形式與內(nèi)容統(tǒng)一~~~~~~~~~~~~~~~~~~~~~頁 3.強(qiáng)調(diào)整體

三、網(wǎng)頁藝術(shù)設(shè)計的特點~~~~~~~~~~~~~~~~~~~~~

1.交互性與持續(xù)性~~~~~~~~~~~~~~~~~~~~~~~ 2.多維性 ~~~~~~~~~~~~~~~~~~~~~~~~~~~ 3.多種媒體的綜合性 ~~~~~~~~~~~~~~~~~~~~ 4.版式的不可控性~~~~~~~~~~~~~~~~~~~~~~ 5.技術(shù)與藝術(shù)結(jié)合的緊密性~~~~~~~~~~~~~~~~~

四、結(jié) 束 語~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

一、網(wǎng)頁藝術(shù)設(shè)計的內(nèi)容

設(shè)計活動中包含著主觀和客觀兩方面的因素，在確立了網(wǎng)頁主題之后，首先要明確和熟悉設(shè)計的對象和構(gòu)成的要素。網(wǎng)頁藝術(shù)設(shè)

計涉及的具體內(nèi)容很多，可以概括為視聽元素和版式設(shè)計兩個方面。

1.視聽元素

這里所說的視聽元素，主要包括：文本、背景、按鈕、圖標(biāo)、圖像、表格、顏色、導(dǎo)航工具、背景音樂、動態(tài)影像等。無論是文

字、圖形、動畫，還是音頻、視頻，網(wǎng)頁設(shè)計者所要考慮的是如何以感人的形式把它們放進(jìn)頁面這個“大畫布”里。多媒體技術(shù) 的運用大大豐富了網(wǎng)頁藝術(shù)設(shè)計的表現(xiàn)力。

以上各視聽元素大多數(shù)瀏覽器本身都可以顯示或收聽，無需任何外部程序或模塊支持。比如，大部分瀏覽器都可以顯示GIF、JPE G圖形和GIF89a動畫。還有些多媒體文件（如MP3音樂）需要先下載到本地硬盤上，然后啟動相應(yīng)的外部程序來播放。另外，在瀏

覽器使用插件（Plug-in）可以播放更多格式的多媒體文件。微軟推出IE瀏覽器后，提供了基于OLE的ActiveX技術(shù)，用來在網(wǎng)頁

中播放多媒體。目前ActiveX已經(jīng)成為熱門技術(shù)。另一種播放多媒體的技術(shù)是JavaApplet。它是用Java語言編寫的應(yīng)用于網(wǎng)頁之

中的小應(yīng)用程序，相比于插件和ActiveX，JavaApplet具有更大的靈活性和良好的跨平臺能力，因此具有很好的發(fā)展前景?？傊夹g(shù)的不斷發(fā)展使多媒體元素在網(wǎng)頁藝術(shù)設(shè)計中的綜合運用越來越廣泛，使瀏覽者可以享受到更加完美的視聽效果。這些新技 術(shù)的出現(xiàn)，也對網(wǎng)頁的藝術(shù)設(shè)計提出了更高的要求。

2.版式設(shè)計

網(wǎng)頁的版式設(shè)計同報刊雜志等平面媒體的版式設(shè)計有很多共同之處，它在網(wǎng)頁的藝術(shù)設(shè)計中占據(jù)著重要的地位。所謂網(wǎng)頁的版式

設(shè)計，是在有限的屏幕空間上將視聽多媒體元素進(jìn)行有機(jī)的排列組合，將理性思

維個性化的表現(xiàn)出來，是一種具有個人風(fēng)格和藝

術(shù)特色的視聽傳達(dá)方式。它在傳達(dá)信息的同時，也產(chǎn)生感官上的美感和精神上的享受。

但網(wǎng)頁的排版與書籍雜志的排版又有很多差異。印刷品都有固定的規(guī)格尺寸，網(wǎng)頁則不然，它的尺寸是由讀者來控制的。這使網(wǎng)

頁設(shè)計者不能精確控制頁面上每個元素的尺寸和位置。而且，網(wǎng)頁的組織結(jié)構(gòu)不像印刷品那樣為線性組合，這給網(wǎng)頁的版式設(shè)計 帶來了一定的難度。

二、網(wǎng)頁藝術(shù)設(shè)計的原則

網(wǎng)頁作為傳播信息的一種載體，同其他出版物如報紙、雜志等在設(shè)計上有許多共同之處，也要遵循一些設(shè)計的基本原則。但是，由于表現(xiàn)形式、運行方式和社會功能的不同，網(wǎng)頁設(shè)計又有其自身的特殊規(guī)律。網(wǎng)頁的藝術(shù)設(shè)計，是技術(shù)與藝術(shù)的結(jié)合，內(nèi)容與

形式的統(tǒng)一。它要求設(shè)計者必須掌握以下三個主要原則：

1.主題鮮明

視覺設(shè)計表達(dá)的是一定的意圖和要求，有明確的主題，并按照視覺心理規(guī)律和形式將主題主動地傳達(dá)給觀賞者。訴求的目的，是使主題在適當(dāng)?shù)沫h(huán)境里被人們即時地理解和接受，以滿足人們的實用和需求，這就要求視覺設(shè)計不但要單純、簡練、清晰

和精確，而且在強(qiáng)調(diào)藝術(shù)性的同時，更應(yīng)該注重通過獨特的風(fēng)格和強(qiáng)烈的視覺沖擊力，來鮮明地突出設(shè)計主題。

根據(jù)認(rèn)知心理學(xué)的理論，大多數(shù)人在短期記憶中只能同時把握４到７條分立的信息，而對多于７條的分立信息或者不分立的信息

容易產(chǎn)生記憶上的模糊或遺忘，概括起來就是：較小而分立的信息要比較長而不分立的信息更為有效和容易瀏覽。這個規(guī)律蘊含

在人們尋找信息和使用信息的實踐活動中，它要求視覺設(shè)計者的設(shè)計活動必須自覺地掌握和遵從。

作為視覺設(shè)計范疇一種的網(wǎng)頁藝術(shù)設(shè)計，其最終目的是達(dá)到最佳的主題訴求效果。這種效果的取得，一方面通過對網(wǎng)頁主題思想

運用邏輯規(guī)律進(jìn)行條理性處理，使之符合瀏覽者獲取信息的心理需求和邏輯方式，讓瀏覽者快速地理解和吸收；另一方面通過對

網(wǎng)頁構(gòu)成元素運用藝術(shù)的形式美法則進(jìn)行條理性處理，更好地營造符合設(shè)計目的的視覺環(huán)境，突出主題，增強(qiáng)瀏覽者對網(wǎng)頁的注

意力，增進(jìn)對網(wǎng)頁內(nèi)容的理解。只有兩個方面有機(jī)地統(tǒng)一，才能實現(xiàn)最佳的主題訴求效果。

優(yōu)秀的網(wǎng)頁設(shè)計必然服務(wù)于網(wǎng)站的主題，就是說，什么樣的網(wǎng)站，應(yīng)該有什么樣的設(shè)計。例如，設(shè)計類的個人站點與商業(yè)站點性

質(zhì)不同，目的也不同，所以評論的標(biāo)準(zhǔn)也不同。網(wǎng)頁藝術(shù)設(shè)計與網(wǎng)站主題的關(guān)系應(yīng)該是這樣：首先，設(shè)計是為主題服務(wù)的；其次，設(shè)計是藝術(shù)和技術(shù)結(jié)合的產(chǎn)物，就是說，即要“美”，又要實現(xiàn)“功能”；最后，“美”和“功能”都是為了更好地表達(dá)主題

。當(dāng)然，有些情況下，“功能”即是“主題”，還有些情況下，“美”即是主題。例如，雅虎作為一個搜索引擎，首先要實現(xiàn)

“搜索”的“功能”。它的主題即是它的“功能”。而一個個人網(wǎng)站，可以只體現(xiàn)作者的設(shè)計思想，或者僅僅以設(shè)計出“美”的 網(wǎng)頁為目的。它的主題只有一個，就是——美。

只注重主題思想的條理性而忽視網(wǎng)頁構(gòu)成元素空間關(guān)系的形式美組合，或者只重視網(wǎng)頁形式上的條理而淡化主題思想的邏輯，都

將削弱網(wǎng)頁主題的最佳訴求效果，難以吸引瀏覽者的注意力，出現(xiàn)平庸的網(wǎng)頁設(shè)計或使網(wǎng)頁設(shè)計以失敗而告終。

要使網(wǎng)頁從形式上獲得良好的誘導(dǎo)力，鮮明地突出訴求主題，具體可以通過對網(wǎng)頁的空間層次、主從關(guān)系、視覺秩序及彼此間的 邏輯性的把握運用來達(dá)到。

2.形式與內(nèi)容統(tǒng)一

任何設(shè)計都有一定的內(nèi)容和形式。內(nèi)容是構(gòu)成設(shè)計的一切內(nèi)在要素的總和，是設(shè)計存在的基礎(chǔ)，被稱為“設(shè)計的靈魂”；形式

是構(gòu)成內(nèi)容諸要素的內(nèi)部結(jié)構(gòu)或內(nèi)容的外部表現(xiàn)方式。設(shè)計的內(nèi)容就是指它的主題、形象、題材等要素的總和，形式就是它的

結(jié)構(gòu)、風(fēng)格或設(shè)計語言等表現(xiàn)方式。內(nèi)容決定形式，形式反作用于內(nèi)容。一個優(yōu)秀的設(shè)計必定是形式對內(nèi)容的完美表現(xiàn)。正如

黑格爾所說：“工藝的美就不在于要求實用品的外部造型、色彩、紋樣去摹擬事物，再現(xiàn)現(xiàn)實，而在于使其外部形式傳達(dá)和表

現(xiàn)出一定的情緒、氣氛、格調(diào)、風(fēng)尚、趣味，使物質(zhì)經(jīng)由象征變成相似于精神生活的有關(guān)環(huán)境?！保ê诟駹枴睹缹W(xué)》第三卷）

一方面，網(wǎng)頁設(shè)計所追求的形式美，必須適合主題的需要，這是網(wǎng)頁設(shè)計的前提。只講花哨的表現(xiàn)形式以及過于強(qiáng)調(diào)“獨特的

設(shè)計風(fēng)格”而脫離內(nèi)容，或者只求內(nèi)容而缺乏藝術(shù)的表現(xiàn)，網(wǎng)頁設(shè)計都會變的空洞而無力。設(shè)計者只有將二者有機(jī)地統(tǒng)一起來，深入領(lǐng)會主題的精髓，再融合自己的思想感情，找到一個完美的表現(xiàn)形式，才能體現(xiàn)出網(wǎng)頁設(shè)計獨具的分量和特有的價值。另

一方面，要確保網(wǎng)頁上的每一個元素都有存在的必要性，不要為了炫耀而使用冗余的技術(shù)。那樣得到的效果可能會適得其反。

只有通過認(rèn)真設(shè)計和充分的考慮來實現(xiàn)全面的功能并體現(xiàn)美感才能實現(xiàn)形式與內(nèi)容的統(tǒng)一。

據(jù)有關(guān)資料所做的保守估計，目前在WWW上網(wǎng)頁數(shù)據(jù)傳輸平均以每秒1.5k的速度到達(dá)客戶端。假設(shè)某個網(wǎng)頁為了豐富其藝術(shù)性而

追趕時髦地大量使用圖像或其它多媒體元素等，雖然達(dá)到了其靜態(tài)形式美的效果，卻造成多達(dá)幾十K甚至更大的網(wǎng)頁數(shù)據(jù)，使瀏

覽者必須等待很長時間才能看到“廬山真面目”，這樣的網(wǎng)頁就不是一個優(yōu)秀的網(wǎng)頁，因為它不符合網(wǎng)頁傳播信息的突出特性之

一——快捷性，使網(wǎng)頁內(nèi)容不能很快地到達(dá)訪問者，影響了訪問效果和質(zhì)量，損害了訪問者的情趣和積極性，這種技術(shù)要素影響 了傳達(dá)信息的效果，因而不是形式與內(nèi)容的完美統(tǒng)一。

網(wǎng)頁具有多屏、分頁、嵌套等特性，設(shè)計者可以對其進(jìn)行形式上的適當(dāng)變化以達(dá)到多變性處理效果，豐富整個網(wǎng)頁的形式美。這

就要求設(shè)計者在注意單個頁面形式與內(nèi)容統(tǒng)一的同時，更不能忽視同一主題下多個分頁面組成的整體網(wǎng)頁的形式與整體內(nèi)容的統(tǒng)一。

因此，在網(wǎng)頁設(shè)計中必須注意形式與內(nèi)容的高度統(tǒng)一。

3.強(qiáng)調(diào)整體

網(wǎng)頁的整體性包括內(nèi)容和形式上的整體性，這里主要討論設(shè)計形式上的整體性。

網(wǎng)頁是傳播信息的載體，它要表達(dá)的是一定的內(nèi)容、主題和意念，在適當(dāng)?shù)臅r間和空間環(huán)境里為人們所理解和接受，它以滿足

人們的實用和需求為目標(biāo)。設(shè)計時強(qiáng)調(diào)其整體性，可以使瀏覽者更快捷、更準(zhǔn)確、更全面地認(rèn)識它、掌握它，并給人一種內(nèi)部

有機(jī)聯(lián)系、外部和諧完整的美感。整體性也是體現(xiàn)一個站點獨特風(fēng)格的重要手段之一。

網(wǎng)頁的結(jié)構(gòu)形式是由各種視聽要素組成的。在設(shè)計網(wǎng)頁時，強(qiáng)調(diào)頁面各組成部分的共性因素或者使諸部分共同含有某種形式特

征，是求得整體的常用方法。這主要從版式、色彩、風(fēng)格等方面入手。例如：在

版式上，將頁面中各視覺要素作通盤考慮，以

周密的組織和精確的定位來獲得頁面的秩序感，即使運用“散”的結(jié)構(gòu)，也是經(jīng)過深思熟慮之后的決定；一個站點通常只使用

兩到三種標(biāo)準(zhǔn)色，并注意色彩搭配的和諧；對于分屏的長頁面，不可設(shè)計完第一屏再考慮下一屏。同樣，整個網(wǎng)頁內(nèi)部的頁面，都應(yīng)統(tǒng)一規(guī)劃，統(tǒng)一風(fēng)格，讓瀏覽者體會到設(shè)計者完整的設(shè)計思想。

從某種意義上講，強(qiáng)調(diào)網(wǎng)頁結(jié)構(gòu)形式的視覺整體性必然會犧牲靈活的多變性，“物極必反”就是這個道理。因此，在強(qiáng)調(diào)網(wǎng)頁

整體性設(shè)計的同時必須注意：過于強(qiáng)調(diào)整體性可能會使網(wǎng)頁呆板、沉悶，以致影響訪問者的情趣和繼續(xù)瀏覽的欲望?！罢w” 是“多變”基礎(chǔ)上的整體。

三、網(wǎng)頁藝術(shù)設(shè)計的特點

1.交互性與持續(xù)性

網(wǎng)頁不同于傳統(tǒng)媒體之處，就在于信息的動態(tài)更新和即時交互性。即時的交互性是Web成為熱點的主要原因，也是網(wǎng)頁設(shè)計時

必須考慮的問題。傳統(tǒng)媒體（如廣播、電視節(jié)目、報刊雜志等）都以線性方式提供信息，即按照信息提供者的感覺、體驗和事

先確定的格式來傳播。而在Web環(huán)境下，人們不再是一個傳統(tǒng)媒體方式的被動接受者，而是以一個主動參與者的身份加入到信息 的加工處理和發(fā)布之中。這種持續(xù)的交互，使網(wǎng)頁藝術(shù)設(shè)計不像印刷品設(shè)計那樣，發(fā)表之后就意味著設(shè)計的結(jié)束。網(wǎng)頁設(shè)計人

員必須根據(jù)網(wǎng)站各個階段的經(jīng)營目標(biāo)，配合網(wǎng)站不同時期的經(jīng)營策略，以及用戶的反饋信息，經(jīng)常地對網(wǎng)頁進(jìn)行調(diào)整和修改。

例如，為了保持瀏覽者對網(wǎng)站的新鮮感，很多大型網(wǎng)站總是定期或不定期的進(jìn)行改版，這就需要設(shè)計者在保持網(wǎng)站視覺形象一 貫性的基礎(chǔ)上，不斷創(chuàng)作出新的網(wǎng)頁設(shè)計作品。

2.多維性

多維性源于超級鏈接，主要體現(xiàn)在網(wǎng)頁設(shè)計中對導(dǎo)航的設(shè)計上。由于超級鏈接的出現(xiàn)，網(wǎng)頁的組織結(jié)構(gòu)更加豐富，瀏覽者可以

在各種主題之間自由跳轉(zhuǎn)，從而打破了以前人們接收信息的線性方式。例如，可將頁面的組織結(jié)構(gòu)分為序列結(jié)構(gòu)、層次結(jié)構(gòu)、網(wǎng)狀結(jié)構(gòu)、復(fù)合結(jié)構(gòu)等。但頁面之間的關(guān)系過于復(fù)雜，不僅使瀏覽者檢索和查找信息增加了難度，也給設(shè)計者帶來了更大的困

難。為了讓瀏覽者在網(wǎng)頁上迅速找到所需的信息，設(shè)計者必須考慮快捷而完善的導(dǎo)航設(shè)計。

印刷品中導(dǎo)航問題不是那么突出，如果一個句子在頁尾突然終止，讀者會很自然地翻到下一頁查找剩余部分，為了幫助讀者找

到他們要找的信息，出版者提供了目錄、索引或腳注。如果文章從期刊中的一頁跳到后面的非順序頁時，讀者會看到類似于

“續(xù)68頁”這樣的指引語句。然而，作為一名網(wǎng)頁設(shè)計者，你以前所學(xué)的導(dǎo)航技術(shù)沒有一種完全適合于網(wǎng)頁導(dǎo)航。在替瀏覽者

考慮得很周到的網(wǎng)頁中，導(dǎo)航提供了足夠的、不同角度的鏈接，幫助讀者在網(wǎng)頁的各個部分之間跳轉(zhuǎn)，并告知瀏覽者現(xiàn)在所在 的位置、當(dāng)前頁面和其他頁面之間的關(guān)系等。而且，每頁都有一個返回主頁的按鈕或鏈接，如果頁面是按層次結(jié)構(gòu)組織的，通

常還有一個返回上級頁面的鏈接。對于網(wǎng)頁設(shè)計者來說，面對的不是按順序排列的印刷頁面，而是自由分散的網(wǎng)頁，因此必須

考慮更多的問題。如：怎樣構(gòu)建合理的頁面組織結(jié)構(gòu)，讓瀏覽者對你提供的巨量信息感到條理？怎樣建立包括站點索引、幫助

頁面、查詢功能在內(nèi)的導(dǎo)航系統(tǒng)？這一切從哪兒開始，到哪兒結(jié)束？

3.多種媒體的綜合性

目前網(wǎng)頁中使用的多媒體視聽元素主要有文字、圖像、聲音、視頻等，隨著網(wǎng)絡(luò)帶寬的增加、芯片處理速度的提高以及跨平

臺的多媒體文件格式的推廣，必將促使設(shè)計者綜合運用多種媒體元素來設(shè)計網(wǎng)頁，以滿足和豐富瀏覽者對網(wǎng)絡(luò)信息傳輸質(zhì)量

提出的更高要求。目前國內(nèi)網(wǎng)頁已經(jīng)出現(xiàn)了模擬三維的操作界面，在數(shù)據(jù)壓縮技術(shù)的改進(jìn)和流（Stream）技術(shù)的推動下，Internet網(wǎng)上出現(xiàn)實時的音頻和視頻服務(wù)，典型的有在線音樂、在線廣播、網(wǎng)上電影、網(wǎng)上直播等。因此，多種媒體的綜合

運用是網(wǎng)頁藝術(shù)設(shè)計的特點之一，是未來的發(fā)展方向。

4.版式的不可控性

網(wǎng)頁版式設(shè)計與傳統(tǒng)印刷版式設(shè)計有著極大的差異：

(1)印刷品設(shè)計者可以指定使用的紙張和油墨，而網(wǎng)頁設(shè)計者卻不能要求瀏覽者使用什么樣的電腦或瀏覽器；

(2)網(wǎng)絡(luò)正處于不斷發(fā)展之中，不象印刷那樣基本具備了成熟的印刷標(biāo)準(zhǔn)；

(3)網(wǎng)頁設(shè)計過程中有關(guān)Web的每一件事都可能隨時發(fā)生變化。

這一切說明，網(wǎng)絡(luò)應(yīng)用尚處在發(fā)展之中，關(guān)于網(wǎng)絡(luò)應(yīng)用也很難在各個方面都制訂出統(tǒng)一的標(biāo)準(zhǔn)，這必然導(dǎo)致網(wǎng)頁版式設(shè) 計的不可控制性。其具體表現(xiàn)為：

(1)網(wǎng)頁頁面會根據(jù)當(dāng)前瀏覽器窗口大小自動格式化輸出；

(2)網(wǎng)頁的瀏覽者可以控制網(wǎng)頁頁面在瀏覽器中的顯示方式；

(3)不同種類、版本的瀏覽器觀察同一個網(wǎng)頁頁面，效果會有所不同；

(4)用戶的瀏覽器工作環(huán)境不同，顯示效果也會有所不同。

把所有這些問題歸結(jié)為一點，即網(wǎng)頁設(shè)計者無法控制頁面在用戶端的最終顯示效果，但這也正是網(wǎng)頁設(shè)計的吸引人之處。

5.技術(shù)與藝術(shù)結(jié)合的緊密性

設(shè)計是主觀和客觀共同作用的結(jié)果，是在自由和不自由之間進(jìn)行的，設(shè)計者不能超越自身已有經(jīng)驗和所處環(huán)境提供 的客觀條件限制，優(yōu)秀設(shè)計者正是在掌握客觀規(guī)律基礎(chǔ)上得到了完全的自由，一種想象和創(chuàng)造的自由。網(wǎng)絡(luò)技術(shù)主

要表現(xiàn)為客觀因素，藝術(shù)創(chuàng)意主要表現(xiàn)為主觀因素，網(wǎng)頁設(shè)計者應(yīng)該積極主動地掌握現(xiàn)有的各種網(wǎng)絡(luò)技術(shù)規(guī)律，注

重技術(shù)和藝術(shù)緊密結(jié)合，這樣才能窮盡技術(shù)之長，實現(xiàn)藝術(shù)想象，滿足瀏覽者對網(wǎng)頁信息的高質(zhì)量需求。

例如，瀏覽者欣賞一段音樂或電影，以前必須先將這段音樂或電影下載回本地機(jī)器，然后使用相應(yīng)的程序來播放，由于音頻或視頻文件都比較大，需要較長的下載時間。流（Stream）技術(shù)出現(xiàn)以后，網(wǎng)頁設(shè)計者充分、巧妙地應(yīng)

用此技術(shù)，讓瀏覽者在下載過程中就可以欣賞這段音樂或電影，實現(xiàn)了實時的網(wǎng)上視頻直播服務(wù)和在線欣賞音樂

服務(wù)，無疑增強(qiáng)了頁面?zhèn)鞑バ畔⒌谋憩F(xiàn)力和感染力。

網(wǎng)絡(luò)技術(shù)與藝術(shù)創(chuàng)意的緊密結(jié)合，使網(wǎng)頁的藝術(shù)設(shè)計由平面設(shè)計擴(kuò)展到立體設(shè)計，由純粹的視覺藝術(shù)擴(kuò)展到空間

聽覺藝術(shù)，網(wǎng)頁效果不再近似于書籍或報刊雜志等印刷媒體，而更接近于電影或電視的觀賞效果。技術(shù)發(fā)展促進(jìn)了

技術(shù)與藝術(shù)的緊密結(jié)合，把瀏覽者帶入一個真正現(xiàn)實中的虛擬世界。

四 結(jié) 束 語

網(wǎng)頁作為一種新的視覺表現(xiàn)形式，它的發(fā)展雖然沒有多長時間，它兼容了傳統(tǒng)平

面設(shè)計的特征，又具備其

所沒有的優(yōu)勢，成為今后信息交流的一個非常有影響的途徑。網(wǎng)頁設(shè)計是一種綜合性的設(shè)計，它所涉及的范圍非常的廣泛，包括消費者心理學(xué)、視覺設(shè)計美學(xué)、人機(jī)工程、哲學(xué)等諸多方面，當(dāng)然也離不開一定的科學(xué)技術(shù)發(fā)展。在本文中只從視

覺傳達(dá)的角度進(jìn)行了一些闡述與分析。好的網(wǎng)頁設(shè)計除首先應(yīng)考慮其內(nèi)容上的精益求精外，其次就是對內(nèi)容合理有效的視

覺編排。美是任何網(wǎng)頁所必需具備的基本因素，網(wǎng)頁信息不僅是為了滿足使用者的需求，更重要的是創(chuàng)造一種愉悅的視覺

環(huán)境，技術(shù)與藝術(shù)的緊密結(jié)合在網(wǎng)頁藝術(shù)設(shè)計中體現(xiàn)得尤為突出。參 考 文 獻(xiàn)

(1)謝依君.電子報的新聞介面分析(D).臺北：臺灣國立政治大學(xué)新聞學(xué)系，1999.(2)唐良瑞，蔡安妮，孫景鰲.從認(rèn)知心理及人機(jī)界面談網(wǎng)頁設(shè)計(J).工程圖學(xué)學(xué)報，2000，(2)：31-36.(3)徐珂，苗彤，趙暉.網(wǎng)頁視覺與設(shè)計(M).北京：人民郵電出版社，2001.(4)李硯祖，蘆影.視覺傳達(dá)的歷史與美學(xué)(M).北京：中國人民大學(xué)出版社，2000.(5)何蘇六.網(wǎng)絡(luò)媒體的策劃與編輯(M).北京：北京廣播學(xué)院出版社，2001.

第三篇：網(wǎng)頁設(shè)計畢業(yè)論文1

網(wǎng)站的設(shè)計與制作

目 錄

第一章

前言 第二章

1．1課題來源

1．2 網(wǎng)站開發(fā)項目需求分析 1．3 軟件 1．4 軟件運行環(huán)境 第二章 網(wǎng)站制作 2．1做網(wǎng)頁的步驟 2.2做網(wǎng)頁的要素 2．3 系統(tǒng)各模塊功能實現(xiàn) 第三章 網(wǎng)站的設(shè)計 3．1 主頁的要求 3．2 子頁的要求 第四章 結(jié)束語 參考文獻(xiàn)

11頁 第1頁

摘 要

汽車網(wǎng)站是一個結(jié)合了汽車銷售等多功能瀏覽的汽車網(wǎng)站，我所使用的軟件是Macromedia 公司推出的一款用于網(wǎng)頁設(shè)計的軟件——dreamweaver8。在網(wǎng)頁的制作與鏈接中，我學(xué)到了很多。

關(guān)鍵詞： 超鏈接 外觀 性能

第一章

前言

1．1課題來源

隨著二十一世紀(jì)新興科技的飛速發(fā)展，如今的電子信息產(chǎn)業(yè)正在經(jīng)受著一個巨大的挑戰(zhàn)，同時也面臨著一個重大的機(jī)遇。就目前的科技發(fā)展水平而言，電子信息產(chǎn)業(yè)的發(fā)展已經(jīng)不能夠滿足社會化大生產(chǎn)的要求，因此，各個國家集中人力、財力加大對信息技術(shù)產(chǎn)業(yè)的投入，以適應(yīng)目前需要?？上驳氖窃谶@幾十年的發(fā)展中我們有了互聯(lián)網(wǎng)?；ヂ?lián)網(wǎng)加大了我們了解世界的眼界，縮緊了人與人之間的距離，這就更容易的使我們走上信息化的道路。

以往，人們出行都以自行車居多，后來公交事業(yè)發(fā)展壯大，人們便乘坐公交汽車，現(xiàn)如今，隨著人們生活水平的提高，越來越多的家庭已經(jīng)擁有或者想擁有自己的私家車。

正是因為人們的這些需求，越來越多的汽車網(wǎng)站出現(xiàn)在網(wǎng)絡(luò)上，使人們可以隨時了解自己想知道的汽車方面的新聞，真正的做到足不出戶，便知天下事。把汽車銷售與網(wǎng)絡(luò)連接起來，是今

11頁 第2頁

后汽車銷售發(fā)展的必然方向之一。1．2 網(wǎng)站開發(fā)項目需求分析

一個網(wǎng)站項目的確立是建立在各種各樣的需求上面的，這種需求往往來自于客戶的實際需求或者是出于公司自身發(fā)展的需要，其中客戶的實際需求也就是說這種交易性質(zhì)的需求占了絕大部分。面對對網(wǎng)站開發(fā)擁有不同知識層面的客戶，項目的負(fù)責(zé)人對用戶需求的理解程度，在很大程度上決定了此類網(wǎng)站開發(fā)項目的成敗。因此如何更好地的了解、分析、明確用戶需求，并且能夠準(zhǔn)確、清晰以文檔的形式表達(dá)給參與項目開發(fā)的每個成員，保證開發(fā)過程按照滿足用戶需求為目的正確項目開發(fā)方向進(jìn)行，是每個網(wǎng)站開發(fā)項目管理者需要面對的問題。據(jù)專家預(yù)計，2009年我國汽車需求量將超過850萬輛。所以，做好汽車網(wǎng)站就是為了使廣大的消費者提供及時和有效的信息，為其選擇適合自己的產(chǎn)品提供良好的參考。

1．3 使用軟件

dreamwraver軟件由美國著名的網(wǎng)站應(yīng)用開發(fā)工具生產(chǎn)廠商Adobe Macromedia于2005年6月推出并正式投入市場以來，已經(jīng)發(fā)展得相當(dāng)成熟。關(guān)于dreamwraver的技術(shù)介紹的相關(guān)書籍與網(wǎng)絡(luò)信息相當(dāng)豐富。通過大學(xué)中軟件開發(fā)環(huán)境課程的學(xué)習(xí)，對dreamwraver有了比較深刻的認(rèn)識，并比較輕松的掌握了

11頁 第3頁

dreamwraver的操作。因此，軟件技術(shù)可以完成任務(wù)的要求。

1．4 軟件運行環(huán)境

Dreamweaver是一款簡體中文軟件，可以在Win2003/WinXP中安全運行

第三章 網(wǎng)站制作

2．1制作網(wǎng)頁的步驟

再做網(wǎng)頁之前，我確定了做網(wǎng)頁的五個步驟。

一、確定網(wǎng)站主題 ：網(wǎng)站主題就是要建立的網(wǎng)站所要包含的主要內(nèi)容，一個網(wǎng)站必須要有一個明確的主題。

二、搜集材料 ：明確了網(wǎng)站的主題以后，你就要圍繞主題開始搜集材料了。材料既可以從圖書、報紙、光盤、多媒體上得來，也可以從互聯(lián)網(wǎng)上搜集，然后把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁的素材。

三、規(guī)劃網(wǎng)站 ：一個網(wǎng)站設(shè)計得成功與否，很大程度上決定于設(shè)計者的規(guī)劃水平，規(guī)劃網(wǎng)站就像設(shè)計師設(shè)計大樓一樣，圖紙設(shè)計好了，才能建成一座漂亮的樓房。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)站的風(fēng)格、顏色搭配、版面布局、文字圖片的運用等，你只有在制作網(wǎng)頁之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有成竹。也只有如此制作出來的11頁 第4頁

網(wǎng)頁才能有個性、有特色，具有吸引力。

四、選擇合適的制作工具 ：盡管選擇什么樣的工具并不會影響你設(shè)計網(wǎng)頁的好壞，但是一款功能強(qiáng)大、使用簡單的軟件往往可以起到事半功倍的效果。

五、制作網(wǎng)頁 ：材料有了，工具也選好了，下面就需要按照規(guī)劃一步步地把自己的想法變成現(xiàn)實了，這是一個復(fù)雜而細(xì)致的過程，一定要按照先大后小、先簡單后復(fù)雜來進(jìn)行制作。所謂先大后小，就是說在制作網(wǎng)頁時，先把大的結(jié)構(gòu)設(shè)計好，然后再逐步完善小的結(jié)構(gòu)設(shè)計。所謂先簡單后復(fù)雜，就是先設(shè)計出簡單的內(nèi)容，然后再設(shè)計復(fù)雜的內(nèi)容，以便出現(xiàn)問題時好修改。在制作網(wǎng)頁時要多靈活運用模板，這樣可以大大提高制作效率。

2.2制作網(wǎng)頁的要素

1、網(wǎng)頁的整體布局設(shè)計

網(wǎng)頁設(shè)計作為一種視覺語言，要講究編排和布局，雖然主頁的設(shè)計不等同于平面設(shè)計，但它們有許多相近之處，應(yīng)充分加以利用和借鑒。版式設(shè)計通過文字圖形的空間組合，表達(dá)出和諧與美。一個優(yōu)秀的網(wǎng)頁設(shè)計者也應(yīng)該知道哪一段文字圖形該落于何處，才能使整個網(wǎng)頁生輝。多頁面站點頁面的編排設(shè)計要求把頁面之間的有機(jī)聯(lián)系反映出來，特別要處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系。尤其是我們在利用網(wǎng)頁效果體現(xiàn)在線營銷的意圖時，更要注意為了達(dá)到最佳的視覺表現(xiàn)效果，而講究整體布

11頁 第5頁

局的合理性，比如一家生產(chǎn)型的企業(yè)，它所提供產(chǎn)品的名稱、類別、型號、價格、功能介紹應(yīng)怎樣編排才能使瀏覽者有一個流暢的視覺體驗，從而方便他對產(chǎn)品的了解，促成最后的購買。

2、網(wǎng)頁設(shè)計中色彩的運用

色彩是藝術(shù)表現(xiàn)的要素之一，在網(wǎng)頁設(shè)計中，根據(jù)和諧、均衡和重點突出的原則，將不同的色彩進(jìn)行組合、搭配來構(gòu)成美麗的頁面。根據(jù)色彩對人們心理的影響，合理地加以運用，按照色彩的記憶性原則，一般暖色較冷色的記憶性更強(qiáng)一些。色彩還具有聯(lián)想與象征的特質(zhì)，如紅色象征血、太陽；藍(lán)色象征大海、天空和水面等。所以如果我們在對一家出售冷食的商店進(jìn)行虛擬店面的頁面設(shè)計時，應(yīng)使用淡雅而沉靜的顏色，使人心理上感覺涼爽一些，增強(qiáng)人們的購買心理，使得在線營銷得到很好的實踐效果。另要注意的是網(wǎng)頁的顏色應(yīng)用雖沒有限制，但不能毫無節(jié)制地運用多種顏色，一般情況下，先根據(jù)總體風(fēng)格的要求定出一至二種主色調(diào)，在已經(jīng)有了完備的CIS（企業(yè)形象識別系統(tǒng)）的企業(yè)進(jìn)行網(wǎng)頁設(shè)計時，更應(yīng)該按照其中的VI進(jìn)行色彩運用。在色彩的運用過程中，還應(yīng)注意的一個問題是：由于國家和種族、宗教和信仰的不同，以及生活的地理位置、文化修養(yǎng)的差異等，不同的人群對色彩的喜惡程度有著很大的差異。如：兒童喜歡對比強(qiáng)烈、個性鮮明的純顏色；生活在草原上的人喜歡紅色；生活在鬧市中的人喜歡淡雅的顏色；生活在“沙漠”中的人喜歡綠色。在設(shè)計中要考慮眾多因素。

11頁 第6頁

3、網(wǎng)頁形式與內(nèi)容相統(tǒng)一

要將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu)，形式語言必須符合頁面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。運用對比與調(diào)和、對稱與平衡、節(jié)奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。如對稱原則在頁面設(shè)計中，它的均衡有時會使頁面顯得呆板，但如果加入一些富有動感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容往往會達(dá)到比較好的效果。點、線、面作為視覺語言中的基本元素，要使用點、線、面的互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最佳的頁面效果。網(wǎng)頁設(shè)計中點、線、面的運用并不是孤立的，很多時候都需要將它們結(jié)合起來，表達(dá)完美的設(shè)計意境。

2．3 系統(tǒng)各模塊功能實現(xiàn)

1.系統(tǒng)登錄模塊

1）該功能模塊可以記錄客戶的郵箱地址，交易時還可以向客戶發(fā)送交易信息，到帳確認(rèn)等等。

2）登陸后系統(tǒng)會調(diào)出客戶的記錄，按照交易量的不同客戶享受的折扣也不同，系統(tǒng)主界面

2.車輛展示模塊

1）該功能模塊主要實現(xiàn)對車輛的展示。

2）該功能模塊圖片、文字介紹，360度flash對各種車輛的展示。

11頁 第7頁

3.賬號管理模塊

1）掛失業(yè)務(wù)在正常工作中肯定會遇到掛失的業(yè)務(wù)，確定掛失后，數(shù)據(jù)庫會將該賬號掛起，等待客戶做進(jìn)一步操作。

2）凍結(jié)業(yè)務(wù)，客戶對賬號有凍結(jié)的權(quán)利，在客戶沒有輸入解凍密碼之前，任何人都無法動用帳上的資金。

3）流水查詢客戶可以查詢曾經(jīng)交易過的記錄。

4）客戶可以自行對其賬號密碼進(jìn)行修改，網(wǎng)站管理人員也可以添加或刪除賬號。

第三章 網(wǎng)站的設(shè)計

3．1 主頁的要求

對于銷售業(yè)務(wù)系統(tǒng)要求運行的工作環(huán)境穩(wěn)定，易于操作，界面美觀大方，對于前臺展示界面要求系統(tǒng)便于維護(hù)，安全可靠，對于廣大客戶所要執(zhí)行的操作簡單易懂，遠(yuǎn)程訪問速度較快，界面友好美觀，有基本的錯誤提醒功能，遠(yuǎn)程操作數(shù)據(jù)庫正確，要求和客戶有一定的互動性，在主頁上直觀的就可以查看瀏覽者所想要了解的東西。3．2子頁的要求

后面的工作就是子頁的選擇與鏈接，子頁應(yīng)該豐富多彩，內(nèi)容充實，瀏覽性強(qiáng)，比如說，想要銷售一輛汽車，應(yīng)該有它的全部資料，包括外觀、內(nèi)飾、性能指標(biāo)、出產(chǎn)地、價格等諸多方面，鑒于以上方面，我開始了子頁的選擇與鏈接。

第四章 結(jié)束語

11頁 第8頁

在系統(tǒng)的需求分析過程中，由于不熟悉，產(chǎn)生了很大的困難，通過與指導(dǎo)老師的探討與溝通，我漸漸地對系統(tǒng)有了一個大體的認(rèn)識。雖然說在系統(tǒng)需求分析過程中花費了很多時間，但是我認(rèn)為這是必要的也是必須的。

致 謝

在整個畢業(yè)設(shè)計過程中，指導(dǎo)教師給了我極大的幫助，并給予我悉心的關(guān)懷與指導(dǎo)，在此表示衷心地感謝。老師認(rèn)真負(fù)責(zé)的工作態(tài)度、嚴(yán)謹(jǐn)?shù)闹螌W(xué)風(fēng)格，使我深受啟發(fā)。開發(fā)的同時，和同組同學(xué)們之間的相互探討也使我獲益匪淺，在開發(fā)工具的選擇上，她給了我不少的指導(dǎo)，在此也表示衷心地感謝。在此同時也給了我不少的指導(dǎo)工作，在此也表示衷心地感謝。

參考文獻(xiàn)

〈1〉《信息技術(shù)》江蘇科學(xué)技術(shù)出版社 〈2〉《網(wǎng)頁制作》人民郵電出版社

<3>《dreamweaver8參考手冊》2008年版。

11頁 第9頁

第四篇：網(wǎng)頁設(shè)計與應(yīng)用畢業(yè)論文

目 錄

第一章 前言??????????????????????????????2 1.1 課題來源 ???????????????????????????? 2 1.2 網(wǎng)站開發(fā)項目需求分析??????????????????????? 2 1.3 軟件??????????????????????????????? 3 1.4 軟件運行環(huán)境第二章 網(wǎng)站制作????????????????????3 第二章網(wǎng)絡(luò)制作????????????????????????????3 2.1做網(wǎng)頁的步驟 ??????????????????????????? 3 2.2 做網(wǎng)頁的要素????????????????????????????4 2.2.1網(wǎng)頁的整體布局設(shè)計????????????????????????4 2.2.2 網(wǎng)頁設(shè)計中色彩的運用???????????????????????4 2.2.3 網(wǎng)頁形式與內(nèi)容相統(tǒng)一 ?????????????????????? 4 2.3 系統(tǒng)各模塊功能實現(xiàn)?????????????????????????4 2.3.1 系統(tǒng)登錄模塊 ??????????????????????????4 2.3.2 車輛展示模塊 ?????????????????????????? 5 2.3.3 賬號管理模塊???????????????????????????5 第三章 網(wǎng)站的設(shè)計??????????????????????????? 5 3.1 主頁的要求?????????????????????????????5 3.2 子頁的要求?????????????????????????????5 3.3 網(wǎng)頁設(shè)計技巧????????????????????????????5 3.3.1 框架的使用????????????????????????????5 3.3.2 CSS 樣式的使用??????????????????????????6 第四章 網(wǎng)站的應(yīng)用??????????????????????????? 6 4.1 網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁?????????????????????6 4.2 我的認(rèn)識??????????????????????????????6 結(jié)束語 ???????????????????????????????? 7 參考文獻(xiàn)????????????????????????????????7

—1—

網(wǎng)頁設(shè)計與應(yīng)用

摘 要 ：汽車網(wǎng)站是一個結(jié)合了汽車銷售等多功能瀏覽的汽車網(wǎng)站，我所使用的軟件是

Macromedia 公 司 推 出 的 一 款 用 于 網(wǎng) 頁 設(shè) 計 的 軟 件 — —

dreamweaver8。在網(wǎng)頁的制作與鏈接中，我學(xué)到了很多，然后補(bǔ)充一些比較熱門的技巧。網(wǎng)站具有快捷。無距離更新的特性，同時提供進(jìn)入日常業(yè)務(wù)處理平臺的“入口”，具有較強(qiáng)的實用價值。這樣的網(wǎng)站被廣大消費者普遍使用，隨著現(xiàn)在網(wǎng)絡(luò)的普及和高效性的不斷提高，它的展示作用和實用性已經(jīng)使它的應(yīng)用地位越來越高，越來越廣泛。本文對網(wǎng)站設(shè)計作了介紹，進(jìn)行了需求分析、模塊劃分、框架和 CSS 的介紹。由于制作經(jīng)驗不足，作品和論文中存在問題之處，請老師指導(dǎo)完善。

關(guān)鍵詞： 超鏈接，外觀，性能，框架，CSS 目 錄

第一章 前言 1、1 課題來源

隨著二十一世紀(jì)新興科技的飛速發(fā)展，如今的電子信息產(chǎn)業(yè)正在經(jīng)受著一個巨大的挑戰(zhàn)，同時也面臨著一個重大的機(jī)遇。就目前的科技發(fā)展水平而言，電子信息產(chǎn)業(yè)的發(fā)展已經(jīng)不能夠滿足社會化大生產(chǎn)的要求，因此，各個國家集中人力、財力加大對信息技術(shù)產(chǎn)業(yè)的投入，以適應(yīng)目前需要。可喜的是在這幾十年的發(fā)展中我們有了互聯(lián)網(wǎng)?；ヂ?lián)網(wǎng)加大了我們了解世界的眼界，縮緊了人與人之間的距離，這就更容易的使我們走上信息化的道路。以往，人們出行都以自行車居多，后來公交事業(yè)發(fā)展壯大，人們便乘坐公交汽車，現(xiàn)如今，隨著人們生活水平的提高，越來越多的家庭已經(jīng)擁有或者想擁有自己的私家車。正是因為人們的這些需求，越來越多的汽車網(wǎng)站出現(xiàn)在網(wǎng)絡(luò)上，使人們可以隨時了解自己想知道的汽車方面的新聞，真正的做到足不出戶，便知天下事。把汽車銷售與網(wǎng)絡(luò)連接起來，是今后汽車銷售發(fā)展的必然方向之一。

1．2 網(wǎng)站開發(fā)項目需求分析

一個網(wǎng)站項目的確立是建立在各種各樣的需求上面的，這種需求往往來自于客戶的實際需求或者是出于公司自身發(fā)展的需要，其中客戶的實際需求也就是說這種交易性質(zhì)的需求占了絕大部分。面對對網(wǎng)站開發(fā)擁有不同知識層面的客戶，項目的負(fù)責(zé)人對用戶需求的理解程度，在很大程度上決定了此類網(wǎng)站開發(fā)項目的成敗。因此如何更好地的了解、分析、明確用戶需求，并且能夠準(zhǔn)確、清晰以文檔的形式表達(dá)給參與項目開發(fā)的每個成員，保證開發(fā)過程按照滿足用戶需求為目的正確項目開發(fā)方向進(jìn)行，是每個網(wǎng)站開發(fā)項目管理者需要面對的問題。據(jù)專家預(yù)計，2009 年我國汽車需求量將超過 850 萬輛。所以，做好汽車 —2—

網(wǎng)站就是為了使廣大的消費者提供及時和有效的信息，為其選擇適合自己的產(chǎn)品提供良好的參考。

1．3 使用軟件

dreamwraver 軟 件 由 美 國 著 名 的 網(wǎng) 站 應(yīng) 用 開 發(fā) 工 具 生 產(chǎn) 廠 商 AdobeMacromedia 于 2005 年 6 月推出并正式投入市場以來，已經(jīng)發(fā)展得相當(dāng)成熟⑴。關(guān)于dreamwraver 的技術(shù)介紹的相關(guān)書籍與網(wǎng)絡(luò)信息相當(dāng)豐富。通過大學(xué)中軟件開發(fā)環(huán)境課程的學(xué)習(xí)，對 dreamwraver 有了比較深刻的認(rèn)識，并比較輕松的掌握了dreamwraver 的操作。因此，軟件技術(shù)可以完成任務(wù)的要求。

1．4 軟件運行環(huán)境

Dreamweaver 是一款簡體中文軟件，可以在 Win2003/WinXP 中安全運行⑵

第二章 網(wǎng)站制作

2．1 制做網(wǎng)頁的步驟

在做網(wǎng)頁之前，我確定了做網(wǎng)頁的五個步驟。

一、確定網(wǎng)站主題 ：網(wǎng)站主題就是要建立的網(wǎng)站所要包含的主要內(nèi)容，一個網(wǎng)站必須要有一個明確的主題。

二、搜集材料 ：明確了網(wǎng)站的主題以后，你就要圍繞主題開始搜集材料了。材料既可以從圖書、報紙、光盤、多媒體上得來，也可以從互聯(lián)網(wǎng)上搜集，然后把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁的素材。

三、規(guī)劃網(wǎng)站 ：一個網(wǎng)站設(shè)計得成功與否，很大程度上決定于設(shè)計者的規(guī)劃水平，規(guī)劃網(wǎng)站就像設(shè)計師設(shè)計大樓一樣，圖紙設(shè)計好了，才能建成一座漂亮的樓房。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)站的風(fēng)格、顏色搭配、版面布局、文字圖片的運用等，你只有在制作網(wǎng)頁之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有成竹。也只有如此制作出來的網(wǎng)頁才能有個性、有特色，具有吸引力。

四、選擇合適的制作工具 ：盡管選擇什么樣的工具并不會影響你設(shè)計網(wǎng)頁的好壞，但是一款功能強(qiáng)大、使用簡單的軟件往往可以起到事半功倍的效果。

五、制作網(wǎng)頁 ：材料有了，工具也選好了，下面就需要按照規(guī)劃一步步地把自己的想法變成現(xiàn)實了，這是一個復(fù)雜而細(xì)致的過程，一定要按照先大后小、先簡單后復(fù)雜來進(jìn)行制作。所謂先大后小，就是說在制作網(wǎng)頁時，先把大的結(jié)構(gòu)設(shè)計好，然后再逐步完善小的結(jié)構(gòu)設(shè)計。所謂先簡單后復(fù)雜，就是先設(shè)計出簡單的內(nèi)容，然后再設(shè)計復(fù)雜的內(nèi)容，以便出

①知新文化.HTML 完全手冊與速查辭典[M].北京：科學(xué)出版社，第49頁，2007.② 楊選輝，網(wǎng)頁設(shè)計與制作教程[M].北京：清華大學(xué)出版社，第321頁，2009.—3—

現(xiàn)問題時好修改。在制作網(wǎng)頁時要多靈活運用模板，這樣可以大大提高制作效率。此外，整體設(shè)計完成后我們還要將網(wǎng)頁上傳測試，使其和其他版本瀏覽器能夠兼容，再者對網(wǎng)站推廣宣傳，及時的維護(hù)更新。

2.2 制作網(wǎng)頁的要素

2.2.1 網(wǎng)頁的整體布局設(shè)計

網(wǎng)頁設(shè)計作為一種視覺語言，要講究編排和布局，雖然主頁的設(shè)計不等同于平面設(shè)計，但它們有許多相近之處，應(yīng)充分加以利用和借鑒。⑴版式設(shè)計通過文字圖形的空間組合，表達(dá)出和諧與美。一個優(yōu)秀的網(wǎng)頁設(shè)計者也應(yīng)該知道哪一段文字圖形該落于何處，才能使整個網(wǎng)頁生輝。多頁面站點頁面的編排設(shè)計要求把頁面之間的有機(jī)聯(lián)系反映出來，特別要處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系。尤其是我們在利用網(wǎng)頁效果體現(xiàn)在線營銷的意圖時，更要注意為了達(dá)到最佳的視覺表現(xiàn)效果，而講究整體布局的合理性，比如一家生產(chǎn)型的企業(yè)，它所提供產(chǎn)品的名稱、類別、型號、價格、功能介紹應(yīng)怎樣編排才能使瀏覽者有一個流暢的視覺體驗，從而方便他對產(chǎn)品的了解，促成最后的購買。

2.2.2 網(wǎng)頁設(shè)計中色彩的運用

色彩是藝術(shù)表現(xiàn)的要素之一，在網(wǎng)頁設(shè)計中，根據(jù)和諧、均衡和重點突出的原則，將不同的色彩進(jìn)行組合、搭配來構(gòu)成美麗的頁面。⑵根據(jù)色彩對人們心理的影響，合理地加以運用，按照色彩的記憶性原則，一般暖色較冷色的記憶性更強(qiáng)一些。色彩還具有聯(lián)想與象征的特質(zhì)，如紅色象征血、太陽；藍(lán)色象征大海、天空和水面等。所以如果我們在對一家出售冷食的商店進(jìn)行虛擬店面的頁面設(shè)計時，應(yīng)使用淡雅而沉靜的顏色，使人心理上感覺涼爽一些，增強(qiáng)人們的購買心理，使得在線營銷得到很好的實踐效果。另要注意的是網(wǎng)頁的顏色應(yīng)用雖沒有限制，但不能毫無節(jié)制地運用多種顏色，一般情況下，先根據(jù)總體風(fēng)格的要求定出一至二種主色調(diào)，在已經(jīng)有了完備的 CIS（企業(yè)形象識別系統(tǒng)）的企業(yè)進(jìn)行網(wǎng)頁設(shè)計時，更應(yīng)該按照其中的 VI 進(jìn)行色彩運用。在色彩的運用過程中，還應(yīng)注意的一個問題是：由于國家和種族、宗教和信仰的不同，以及生活的地理位置、文化修養(yǎng)的差異等，不同的人群對色彩的喜惡程度有著很大的差異。如：兒童喜歡對比強(qiáng)烈、個性鮮明的純顏色；生活在草原上的人喜歡紅色；生活在鬧市中的人喜歡淡雅的顏色；生活在“沙漠”中的人喜歡綠色。⑶在設(shè)計中要考慮眾多因素。

2.2.3 網(wǎng)頁形式與內(nèi)容相統(tǒng)一

要將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu)，形式語言必須符合頁面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。⑷運用對比與調(diào)和、對稱與平衡、節(jié)奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。如對稱原則在

①王誠君，劉振華，郭竑暉，《高中山.Dreamweaver 8 網(wǎng)頁設(shè)計應(yīng)用教程[M]》.北京：清華大學(xué)出版社，第332頁，2007.②李光明，曹蕾，余輝.《中文Dreamweaver 8 網(wǎng)頁設(shè)計與實訓(xùn)教程[M]》.北京：冶金工業(yè)出版社，第13頁，2006.③周德華，許銘霖.《新編網(wǎng)頁設(shè)計教程[M]》.北京：冶金工業(yè)出版社，第159頁，2006.—4—

頁面設(shè)計中，它的均衡有時會使頁面顯得呆板，但如果加入一些富有動感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容往往會達(dá)到比較好的效果。點、線、面作為視覺語言中的基本元素，要使用點、線、面的互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最佳的頁面效果。網(wǎng)頁設(shè)計中點、線、面的運用并不是孤立的，很多時候都需要將它們結(jié)合起來，表達(dá)完美的設(shè)計意境。

2．3 系統(tǒng)各模塊功能實現(xiàn)

2.3.1 系統(tǒng)登錄模塊

1、該功能模塊可以記錄客戶的郵箱地址，交易時還可以向客戶發(fā)送交易信息，到帳確認(rèn)等等。

2、登陸后系統(tǒng)會調(diào)出客戶的記錄，按照交易量的不同客戶享受的折扣也不同，系統(tǒng)主界面

2.3.2 車輛展示模塊⑴

1、該功能模塊主要實現(xiàn)對車輛的展示。

2、該功能模塊圖片、文字介紹，360 度 flash 對各種車輛的展示。

2.3.3 賬號管理模塊⑵

1、掛失業(yè)務(wù)在正常工作中肯定會遇到掛失的業(yè)務(wù)，確定掛失后，數(shù)據(jù)庫會將該賬號掛起，等待客戶做進(jìn)一步操作。

2、凍結(jié)業(yè)務(wù)，客戶對賬號有凍結(jié)的權(quán)利，在客戶沒有輸入解凍密碼之前，任何人都無法動用帳上的資金。

3、流水查詢客戶可以查詢曾經(jīng)交易過的記錄。

4、客戶可以自行對其賬號密碼進(jìn)行修改，網(wǎng)站管理人員也可以添加或刪除賬號。

第三章 網(wǎng)站的設(shè)計

3.1 主頁的要求

對于銷售業(yè)務(wù)系統(tǒng)要求運行的工作環(huán)境穩(wěn)定，易于操作，界面美觀大方，對 于前臺展示界面要求系統(tǒng)便于維護(hù)，安全可靠，對于廣大客戶所要執(zhí)行的操作 簡單易懂，遠(yuǎn)程訪問速度較快，界面友好美觀，有基本的錯誤提醒功能，遠(yuǎn)程 操作數(shù)據(jù)庫正確，要求和客戶有一定的互動性，在主頁上直觀的就可以查看瀏 覽者所想要了解的東西。

3.2 子頁的要求

后面的工作就是子頁的選擇與鏈接，子頁應(yīng)該豐富多彩，內(nèi)容充實，瀏覽 性強(qiáng)，比如說，想要銷售一輛汽車，應(yīng)該有它的全部資料，包括外觀、內(nèi)飾、性能指標(biāo)、出產(chǎn)地、價

① 趙銘建，趙慧，喬孟麗，康梅娟.《網(wǎng)頁設(shè)計與制作[M].》東營：中國石油大學(xué)出版社，第66頁，2007.②趙祖蔭，王云翔，胡耀芳.《網(wǎng)頁設(shè)計與制作教程[M]》.北京：清華大學(xué)出版社，第187頁，2008.—5—

格等諸多方面，鑒于以上方面，我開始了子頁的選擇 與鏈接。3.3 網(wǎng)頁設(shè)計技巧

一張完美的主頁設(shè)計需要積累豐富的知識以及掌握大量的技巧。在這里從框架 和 CSS 樣式的運用兩方面來介紹網(wǎng)頁設(shè)計的技巧。⑴

3.3.1 框架的使用

FRAME（框架）是 Web 上經(jīng)常會看到的頁面結(jié)構(gòu)。框架的最常見用途就是導(dǎo)航⑵。一組框架通常包括一個含有導(dǎo)航條的框架和另一個要顯示主要內(nèi)容頁面的框 架。使用框架具有以下優(yōu)點：訪問者的瀏覽器不需要為每個頁面重新加載與導(dǎo)航相 關(guān)的圖形；每個框架都具有自己的滾動條如果內(nèi)容太大，在窗口中顯示不下，因此訪問者可以獨立滾動這些框架。例如，當(dāng)框架中的內(nèi)容頁面較長時，如果 導(dǎo)航條位于不同的框架中，那么向下滾動到頁面底部的訪問者就不需要再滾動 回頂部來使用導(dǎo)航條。使用框架具有以下缺點：可能難以實現(xiàn)不同框架中各元素的精確圖形對齊；對 導(dǎo)航進(jìn)行測試可能很耗時間。許多專業(yè) Web 設(shè)計人員不喜歡使用框架，并且許多瀏覽 Web 的人也不喜歡框 架。在大多數(shù)情況下，這種反感是因為遇到了那些使用框架效果不佳或不必要 地使用框架的站點例如，每當(dāng)訪問者單擊導(dǎo)航按鈕時就重新加載導(dǎo)航框架內(nèi) 容的框架集。如果框架使用得法例如，在允許其他框架的內(nèi)容發(fā)生更改的同 時，使一個框架中的導(dǎo)航控件保持靜態(tài)，則這些框架對于某些站點可能非常 有用。

3.3.2 CSS 樣式的使用

CSS 層疊 樣 式 表 是 一 種 制 作 網(wǎng) 頁 的 新 技 術(shù) 它 的 全 稱 是 級 聯(lián) 樣 式 表 即Cascading StyleSheets 的縮寫，又稱之為風(fēng)格樣式表單。⑶CSS 是在網(wǎng)頁制作過程中普遍用到的技術(shù)。采用了 CSS 技術(shù)控制的網(wǎng)頁，設(shè)計者會更輕松、有效地對頁面的整體布局、顏色、字體、鏈接、背景以及同一頁面的不同部分、不同頁面的外觀和格式等效果實現(xiàn)更加精確地控制。

第四章 網(wǎng)頁的應(yīng)用

4.1 網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。

4.1.1 優(yōu)點：

靜態(tài)網(wǎng)頁：1.靜態(tài)網(wǎng)頁的內(nèi)容相對穩(wěn)定，因此容易被搜索引擎檢索； 動態(tài)網(wǎng)頁：

1.動態(tài)網(wǎng)頁以數(shù)據(jù)庫技術(shù)為基礎(chǔ)，可以大大減少降低網(wǎng)站維護(hù)的工作量；

2.采用動態(tài)網(wǎng)頁技術(shù)的網(wǎng)站可以實現(xiàn)更多的功能，如用戶注冊、用戶登錄、在線調(diào)查、用戶管理、頂訂單管理等等

①]陳季.《 Flash 基礎(chǔ)與實例教程[M]》.北京：北京希望電子出版社，第88頁，2005.②丁海祥.《計算機(jī)平面設(shè)計實訓(xùn)[M].》 北京：高等教育出版社，第54頁，2005.③曹雁青，楊聰.《 Photoshop 經(jīng)典作品賞析[M].》北京：北京海洋智慧圖書有限公司，第35頁，2002.—6—

4.1.2 缺點： 靜態(tài)網(wǎng)頁：

1.靜態(tài)網(wǎng)頁沒有數(shù)據(jù)庫的支持，在網(wǎng)站能制作和維護(hù)方面工作量較大，因此 當(dāng)網(wǎng)站信息量很大時完全依靠靜態(tài)網(wǎng)頁制作方式比較困難； 2.靜態(tài)網(wǎng)頁的交互性交叉，在功能方面有較大的限制。動態(tài)網(wǎng)頁：1.動態(tài)網(wǎng)頁中的“？”對搜索引擎檢索存在一定的問題，搜索引擎一般不可 能從一個網(wǎng)站的數(shù)據(jù)庫中訪問全部網(wǎng)頁，或者處于技術(shù)方面的考慮，搜索 蜘蛛不去抓取網(wǎng)址中“？”后面的內(nèi)容，因此采用動態(tài)網(wǎng)頁的網(wǎng)站在進(jìn)行 搜索引擎推廣時需要做一定的技術(shù)處理才能適應(yīng)搜索引擎的要求。

4.2 我的認(rèn)識

網(wǎng)頁應(yīng)用很廣泛，當(dāng)我們打開 IE 瀏覽器的時候，出現(xiàn)在屏幕上的就是一個網(wǎng)頁，隨著社會的進(jìn)步，生活節(jié)奏地加快，各行各業(yè)都開始使用互聯(lián)網(wǎng)來宣傳自己的產(chǎn)品，或者進(jìn)行其他的活動。網(wǎng)站設(shè)計離不開網(wǎng)頁，網(wǎng)頁像書中的章頁，由這些頁面構(gòu)成了整個網(wǎng)站。不管是大企業(yè)還是小公司，都有自己的網(wǎng)站，當(dāng)然網(wǎng)站是離不開網(wǎng)頁的。網(wǎng)頁中的信息可以給我們帶來很多幫助，可以用來學(xué)習(xí)或者做一些活動的參考。通過對這門課程的學(xué)習(xí)會收獲很多。

結(jié)束語

在系統(tǒng)的需求分析過程中，由于不熟悉，產(chǎn)生了很大的困難，通過與指導(dǎo)老師的探討與溝通，我漸漸地對系統(tǒng)有了一個大體的認(rèn)識。雖然說在系統(tǒng)需求分析過程中花費了很多時間，但是我認(rèn)為這是必要的也是必須的。這次畢業(yè)設(shè)計中我了解到了很多的知識，這對我今后的學(xué)習(xí)和生活都將會有很大的幫助。我明白了對于一個完整性的軟件設(shè)計流程的主要性，在整個網(wǎng)站設(shè)計過程中前期需求分析，可行性分析是非常重要的環(huán)節(jié)，可以說是軟件設(shè)計的核心，在過去我一直認(rèn)為詳細(xì)設(shè)計編碼才是最重要的，因為再好的需求，編碼不成功，軟件就無法正常運行。鍛煉了自己發(fā)現(xiàn)問題，解決問題的能力。開發(fā)過程中遇到一些需求的變化，通過修改設(shè)計思路，避免在后期產(chǎn)生更大的錯誤。再詳細(xì)設(shè)計的每一步都有可能出錯，所以會進(jìn)行非常多的調(diào)試工作，只要發(fā)現(xiàn)問題就調(diào)試解決，這樣不僅增強(qiáng)了信心，也很好的鍛煉了自己遇到問題不急不躁，耐心解決的能力。

參 考 文 獻(xiàn)

〈1〉《信息技術(shù)》江蘇科學(xué)技術(shù)出版社.〈2〉《網(wǎng)頁制作》人民郵電出版社.〈3〉 《dreamweaver8 參考手冊》2008 年版.，〈4〉柯林森、劉志忠，CSS 基礎(chǔ)教程，人民郵電出版社，2007.9.〈5〉蘇昱，樣式表中文手冊，幫助文檔?！?〉韓國鋒、ASP 柯華坤，網(wǎng)站開發(fā)典型模塊與實例精講，電子工業(yè)出版社，2006.8.—7—

第五篇：計算機(jī)網(wǎng)頁設(shè)計畢業(yè)論文（范文）

計算機(jī)網(wǎng)頁設(shè)計畢業(yè)論文

計算機(jī)網(wǎng)頁設(shè)計畢業(yè)論文

asp技術(shù)在交互式網(wǎng)頁設(shè)計中的運用

一、asp技術(shù)簡介

asp技術(shù) asp（active server pages動態(tài)網(wǎng)頁）是微軟公司推出的一種用以取代cgi（common gateway interface通用網(wǎng)關(guān)接口）的技術(shù)。目前，internet上的許多基于windows平臺的web站點已開始應(yīng)用asp來替換cgi。簡單地講，asp是一個位于服務(wù)器端的腳本運行環(huán)境，通過這種環(huán)境，用戶可以創(chuàng)建和運行動態(tài)的交互式web服務(wù)器應(yīng)用程序，如交互式動態(tài)網(wǎng)頁，包括使用html表單收集和處理信息，上傳與下載等等。通常情況下，用戶通過瀏覽器看到的網(wǎng)頁大多是靜態(tài)的，目前internet 上的許多站點，仍然提供'靜態(tài)'（static）的主頁內(nèi)容。所謂'靜態(tài)'，指的就是站點的主頁內(nèi)容是'固定不變'的。當(dāng)瀏覽器通過internet 的http(hypertext transport protocol)協(xié)議，向站點服務(wù)器(web server)要求提供主頁的內(nèi)容時，站點服務(wù)器收到要求后，就傳送原已設(shè)計好的靜態(tài)的html 的文件數(shù)據(jù)給瀏覽器。一個'靜態(tài)'的站點，若要更新主頁的內(nèi)容，必須手動的來更新其html的文件數(shù)據(jù)。而隨著web應(yīng)用的發(fā)展，用戶希望能夠看到根據(jù)要求而動態(tài)生成的主頁，例如響應(yīng)用戶查詢數(shù)據(jù)庫的要求、生成報表等。當(dāng)在瀏覽器上填好表單(form)的輸入數(shù)據(jù)，以提供http要求時，可以在站點服務(wù)器中執(zhí)行的應(yīng)用程序，而不只是一個html 文件。

站點服務(wù)器收到要求執(zhí)行的應(yīng)用程序，分析表單(form)的輸入數(shù)據(jù)，將執(zhí)行的結(jié)果以html的格式傳送給瀏覽器。根據(jù)用戶請求生成動態(tài)主頁的傳統(tǒng)方法有cgi、isapi等。cgi是根據(jù)瀏覽器端的http請求激活響應(yīng)進(jìn)程，每一個請求對應(yīng)一個進(jìn)程。當(dāng)同時有很多請求時，程序擠占系統(tǒng)資源，造成效率低下；isapi針對這一缺點進(jìn)行改進(jìn)，利用dll（動態(tài)鏈接庫）技術(shù)，以線程代替進(jìn)程，提高了性能和速度，但要考慮線程的同步問題，而且開發(fā)步驟煩瑣。這兩種技術(shù)和另一普遍使用的開發(fā)動態(tài)網(wǎng)頁的技術(shù)java都還存在著另外一個問題，那就是開發(fā)困難，程序的開發(fā)和html寫作是兩個完全不同的過程，需要專門的程序員開發(fā)。而較簡單的開發(fā)技術(shù)如javascript和idc(internet database connector)等功能有限，不敷使用。

asp使用的activex技術(shù)基于開放設(shè)計環(huán)境，用戶可以自己定義和制作組件加入其中，使自己的動態(tài)網(wǎng)頁幾乎具有無限的擴(kuò)充能力，這是傳統(tǒng)的cgi等程序所遠(yuǎn)遠(yuǎn)不及的地方。asp與常見的在client端實現(xiàn)動態(tài)主頁的技術(shù)如java applet、activex control、vbscript、javascript等不同，asp中的命令和script語句都是由服務(wù)器來解釋執(zhí)行的，執(zhí)行結(jié)果產(chǎn)生動態(tài)生成的web頁面并送到瀏覽器；而client端技術(shù)的script命令則是由瀏覽器來解釋執(zhí)行。由于asp是在服務(wù)器端解釋執(zhí)行，開發(fā)者可以不必考慮瀏覽器是否支持asp；同時由于它在服務(wù)器端執(zhí)行，開發(fā)者也不必?fù)?dān)心別人下載程序從而竊取編程邏輯。

asp通過后綴名為.asp的asp文件來實現(xiàn)，一個.asp文件相當(dāng)于一個可執(zhí)行文件，因此必須放在web服務(wù)器上有可執(zhí)行權(quán)限的目錄下。當(dāng)用戶從瀏覽器輸入了.asp文件的地址后，瀏覽器就將這個url請求發(fā)給web server，如果web server上裝了asp，就調(diào)用asp。asp讀出相應(yīng).asp文件，解釋并執(zhí)行命令，動態(tài)生成一個html頁面回傳web server，然后web server再把結(jié)果發(fā)送給瀏覽器。asp文件的制作和html類似，且和html開發(fā)集成，可以在同一個過程完成，利用asp將可以執(zhí)行的腳本嵌入到html文件中(將html文件的后綴名改為.asp)，這使得html文件的編寫與腳本的開發(fā)融合在一起。通過asp內(nèi)置的對象、服務(wù)器組件（server component）可以完成非常復(fù)雜的任務(wù)，而且用戶還可以自己開發(fā)或利用別人開發(fā)的服務(wù)器組件完成專門的任務(wù)。asp比較網(wǎng)關(guān)及服務(wù)器擴(kuò)展模式有著以下優(yōu)點：

(1)完全與html文件融合在一起；

(2)容易創(chuàng)建，不需要其它編譯、鏈接程序；

(3)面向?qū)ο蟮牟⑼ㄟ^activex server對象可擴(kuò)展。

二、電子商務(wù)數(shù)據(jù)訪問方式

電子商務(wù)是指通過電子方式，并在網(wǎng)絡(luò)基礎(chǔ)上實現(xiàn)物資、人員過程的協(xié)調(diào)，以便商業(yè)交換的活動。在電子商務(wù)系統(tǒng)中，web提供了與客戶進(jìn)行通信聯(lián)絡(luò)的有效手段，利用web技術(shù)，實現(xiàn)web服務(wù)器與數(shù)據(jù)庫系統(tǒng)的連接，完成對數(shù)據(jù)的處理與查詢，用戶可以通過操作簡單易學(xué)的瀏

覽器來查詢處理所需要的各種數(shù)據(jù)。實現(xiàn)web服務(wù)器與數(shù)據(jù)庫的連接一般有兩種方法：一種是利用中間件技術(shù)在兩者之間建立連接和通信，如cgi(通用網(wǎng)關(guān)接口)和api(應(yīng)用程序編程接口)。

web服務(wù)器通過調(diào)用cgi程序?qū)崿F(xiàn)與web瀏覽器的交互，即cgi程序接受瀏覽器發(fā)給web服務(wù)器的信息，進(jìn)行處理后，將相應(yīng)結(jié)果再送回給web服務(wù)器，通過web服務(wù)器將信息傳送給瀏覽器。但cgi程序在響應(yīng)速度和資源利用等方面有較大局限性，客戶端每請求一個cgi程序，服務(wù)器端便打開一個進(jìn)程，當(dāng)請求的數(shù)量較大時容易引起瓶頸現(xiàn)象，開發(fā)人員常利用api編程來擴(kuò)展服務(wù)器功能，api程序占系統(tǒng)資源少，運行效率較高，但它的編程較cgi程序更為復(fù)雜；另一種是由瀏覽器中的java小應(yīng)用程序(java applet)通過瀏覽器訪問web服務(wù)器上的數(shù)據(jù)庫，利用了jdbc(java database connectivity)技術(shù)，它通過jdbc提供的api實現(xiàn)對web server的訪問。由于java applet本身的局限性，目前大多數(shù)的應(yīng)用是基于中間件技術(shù)的。asp也是屬于中間件的一種模式，但在windows平臺上它比較網(wǎng)關(guān)及服務(wù)器擴(kuò)展模式有著較大的優(yōu)點。網(wǎng)關(guān)的最大特點是它的平臺無關(guān)性，但網(wǎng)關(guān)程序通常較難編寫和改變。網(wǎng)關(guān)程序通常是一個獨立的程序，并不和html文件融合在一起，它需要用如c、c++、vb、perl等語言來編寫?yīng)毩⒌膽?yīng)用程序，而asp應(yīng)用改變了這一點。使用asp不僅可以讀取access和 sql server的數(shù)據(jù)庫，而且還可以讀取其他odbc（open database connect 開放式數(shù)據(jù)庫互聯(lián)）兼容的數(shù)據(jù)庫。

在asp中訪問數(shù)據(jù)庫是通過ado(activex database object活動數(shù)據(jù)對象)及事務(wù)處理語句來實現(xiàn)的。ado是一種操作microsoft所支持的數(shù)據(jù)庫的方法，是一項容易使用并且可擴(kuò)展的將數(shù)據(jù)庫訪問添加到 web 頁的技術(shù)。ado對象的使用與dao（數(shù)據(jù)訪問對象）、rdo（遠(yuǎn)程數(shù)據(jù)對象）的方式相似。在asp中，ado可以看作是一個服務(wù)器組件，更簡單點說，是一系列的對象，應(yīng)用這些功能強(qiáng)大的對象，即可輕松完成對數(shù)據(jù)庫復(fù)雜的操作。

三、asp在電子商務(wù)中的應(yīng)用

在電子商務(wù)中，對用戶而言，進(jìn)行網(wǎng)上信息查詢的目的是尋找自己需要的產(chǎn)品或服務(wù)，而對于商品或服務(wù)提供者來說，其目的則是向用戶推銷自己的產(chǎn)品或服務(wù)。因此，讓用戶通過瀏覽器查詢服務(wù)器的后端數(shù)據(jù)庫是許多web服務(wù)提供者必需有的服務(wù)，asp通過內(nèi)置的adodb組件來實現(xiàn)這一功能?？梢允褂胊do去編寫緊湊簡明的腳本以便連接到odbc 兼容的數(shù)據(jù)庫和 ole db 兼容的數(shù)據(jù)源。具體的操作步驟可以歸納為以下幾步：

① 創(chuàng)建數(shù)據(jù)庫源名（dsn）adodb通過odbc工作，因此要在odbc中設(shè)置dsn（數(shù)據(jù)源名）。打開windows的'控制面板'，雙擊'odbc'的圖標(biāo)，然后選擇'文件 dsn '的屬性頁，單擊<添加，選擇數(shù)據(jù)庫驅(qū)動程序，然后單擊'下一步'，按照屏幕的指示鍵入數(shù)據(jù)源文件的名稱，然后單擊'下一步'，再單擊'完成'創(chuàng)建數(shù)據(jù)源。

②創(chuàng)建數(shù)據(jù)庫鏈接 鏈接用以保持一些關(guān)于正在訪問的數(shù)據(jù)的動態(tài)信息，以及鏈接者信息。利用adodb的成員函數(shù)open和先前設(shè)定的dsn與數(shù)據(jù)庫連接，其語法如下：

setconnect=server.createobject('adodb.connection')’創(chuàng)建了鏈接對象connect。connect.open('dsn=dsnname；uid=userid；pwd=password')’打開鏈接。dsnname為數(shù)據(jù)源名；userid為用戶名；password為用戶口令。③創(chuàng)建數(shù)據(jù)對象 ado中的數(shù)據(jù)對象通常保存的是查詢結(jié)果。recordset 是ado中最復(fù)雜的對象，有許多屬性和方法，靈活運用，可以達(dá)到許多好的效果。其創(chuàng)建方法如下： set recordset =connect.execute(sqtstr)’創(chuàng)建并打開了對象recordset，sqtstr是一個串，代表一條標(biāo)準(zhǔn)的sql語句。例如： sqlstr='select*from b1' set recordset =connect.execute(sqlstr)這條語句執(zhí)行后，對象recordset中就保存了b1中的所有記錄。

④操作數(shù)據(jù)庫 可利用execute方便地執(zhí)行數(shù)據(jù)的插入、修改、刪除等操作。如執(zhí)行插入操作： sqlstr='insert into b1values(1,2)' connect.execute(sqlstr)⑤關(guān)閉數(shù)據(jù)對象和鏈接 在使用了ado對象之后，一定要關(guān)閉數(shù)據(jù)對象和鏈接。在asp中通過調(diào)用方法close實現(xiàn)關(guān)閉。關(guān)閉創(chuàng)建的數(shù)據(jù)對象：record set.close set record set=nothing 關(guān)閉創(chuàng)建的鏈接對象：connect.close set connect=nothing 完整的程序片段：

//產(chǎn)生組件實例

<％

setconnect=server.createobject('adodb.connection')//連接數(shù)據(jù)庫

connect.open('dsn=dsnname;uid=userid;pwd=password')//執(zhí)行查詢

sql=select＊fromtablename setrs=connect.execute(sql)％

//顯示結(jié)果

<％dowhile not rs.eof％

<％=rs(fieldname)％ <％

rs.movenext

loop ％

上述是用asp訪問數(shù)據(jù)庫的全過程，由于應(yīng)用面向?qū)ο笏枷?，所有操作都比較簡單，用戶需要注意的僅是對數(shù)據(jù)結(jié)構(gòu)的了解、當(dāng)前所操作的對象及對象的屬性等等，只要對這些有了清晰的認(rèn)識，再加上asp強(qiáng)大功能，在網(wǎng)絡(luò)上使用數(shù)據(jù)庫，實現(xiàn)用戶與頁面間交換信息，就再也不是什么難事了。