第一篇：網(wǎng)頁設(shè)計與應(yīng)用畢業(yè)論文
目 錄
第一章 前言??????????????????????????????2 1.1 課題來源 ???????????????????????????? 2 1.2 網(wǎng)站開發(fā)項(xiàng)目需求分析??????????????????????? 2 1.3 軟件??????????????????????????????? 3 1.4 軟件運(yùn)行環(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è)計中色彩的運(yùn)用???????????????????????4 2.2.3 網(wǎng)頁形式與內(nèi)容相統(tǒng)一 ?????????????????????? 4 2.3 系統(tǒng)各模塊功能實(shí)現(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)的實(shí)用價值。這樣的網(wǎng)站被廣大消費(fèi)者普遍使用，隨著現(xiàn)在網(wǎng)絡(luò)的普及和高效性的不斷提高，它的展示作用和實(shí)用性已經(jīng)使它的應(yīng)用地位越來越高，越來越廣泛。本文對網(wǎng)站設(shè)計作了介紹，進(jìn)行了需求分析、模塊劃分、框架和 CSS 的介紹。由于制作經(jīng)驗(yàn)不足，作品和論文中存在問題之處，請老師指導(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)擁有或者想擁有自己的私家車。正是因?yàn)槿藗兊倪@些需求，越來越多的汽車網(wǎng)站出現(xiàn)在網(wǎng)絡(luò)上，使人們可以隨時了解自己想知道的汽車方面的新聞，真正的做到足不出戶，便知天下事。把汽車銷售與網(wǎng)絡(luò)連接起來，是今后汽車銷售發(fā)展的必然方向之一。
1．2 網(wǎng)站開發(fā)項(xiàng)目需求分析
一個網(wǎng)站項(xiàng)目的確立是建立在各種各樣的需求上面的，這種需求往往來自于客戶的實(shí)際需求或者是出于公司自身發(fā)展的需要，其中客戶的實(shí)際需求也就是說這種交易性質(zhì)的需求占了絕大部分。面對對網(wǎng)站開發(fā)擁有不同知識層面的客戶，項(xiàng)目的負(fù)責(zé)人對用戶需求的理解程度，在很大程度上決定了此類網(wǎng)站開發(fā)項(xiàng)目的成敗。因此如何更好地的了解、分析、明確用戶需求，并且能夠準(zhǔn)確、清晰以文檔的形式表達(dá)給參與項(xiàng)目開發(fā)的每個成員，保證開發(fā)過程按照滿足用戶需求為目的正確項(xiàng)目開發(fā)方向進(jìn)行，是每個網(wǎng)站開發(fā)項(xiàng)目管理者需要面對的問題。據(jù)專家預(yù)計，2009 年我國汽車需求量將超過 850 萬輛。所以，做好汽車 —2—
網(wǎng)站就是為了使廣大的消費(fèi)者提供及時和有效的信息，為其選擇適合自己的產(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 軟件運(yùn)行環(huán)境
Dreamweaver 是一款簡體中文軟件，可以在 Win2003/WinXP 中安全運(yùn)行⑵
第二章 網(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)格、顏色搭配、版面布局、文字圖片的運(yùn)用等，你只有在制作網(wǎng)頁之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有成竹。也只有如此制作出來的網(wǎng)頁才能有個性、有特色，具有吸引力。
四、選擇合適的制作工具 ：盡管選擇什么樣的工具并不會影響你設(shè)計網(wǎng)頁的好壞，但是一款功能強(qiáng)大、使用簡單的軟件往往可以起到事半功倍的效果。
五、制作網(wǎng)頁 ：材料有了，工具也選好了，下面就需要按照規(guī)劃一步步地把自己的想法變成現(xiàn)實(shí)了，這是一個復(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)頁時要多靈活運(yùn)用模板，這樣可以大大提高制作效率。此外，整體設(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)頁生輝。多頁面站點(diǎn)頁面的編排設(shè)計要求把頁面之間的有機(jī)聯(lián)系反映出來，特別要處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系。尤其是我們在利用網(wǎng)頁效果體現(xiàn)在線營銷的意圖時，更要注意為了達(dá)到最佳的視覺表現(xiàn)效果，而講究整體布局的合理性，比如一家生產(chǎn)型的企業(yè)，它所提供產(chǎn)品的名稱、類別、型號、價格、功能介紹應(yīng)怎樣編排才能使瀏覽者有一個流暢的視覺體驗(yàn)，從而方便他對產(chǎn)品的了解，促成最后的購買。
2.2.2 網(wǎng)頁設(shè)計中色彩的運(yùn)用
色彩是藝術(shù)表現(xiàn)的要素之一，在網(wǎng)頁設(shè)計中，根據(jù)和諧、均衡和重點(diǎn)突出的原則，將不同的色彩進(jìn)行組合、搭配來構(gòu)成美麗的頁面。⑵根據(jù)色彩對人們心理的影響，合理地加以運(yùn)用，按照色彩的記憶性原則，一般暖色較冷色的記憶性更強(qiáng)一些。色彩還具有聯(lián)想與象征的特質(zhì)，如紅色象征血、太陽；藍(lán)色象征大海、天空和水面等。所以如果我們在對一家出售冷食的商店進(jìn)行虛擬店面的頁面設(shè)計時，應(yīng)使用淡雅而沉靜的顏色，使人心理上感覺涼爽一些，增強(qiáng)人們的購買心理，使得在線營銷得到很好的實(shí)踐效果。另要注意的是網(wǎng)頁的顏色應(yīng)用雖沒有限制，但不能毫無節(jié)制地運(yùn)用多種顏色，一般情況下，先根據(jù)總體風(fēng)格的要求定出一至二種主色調(diào)，在已經(jīng)有了完備的 CIS（企業(yè)形象識別系統(tǒng)）的企業(yè)進(jìn)行網(wǎng)頁設(shè)計時，更應(yīng)該按照其中的 VI 進(jìn)行色彩運(yùn)用。在色彩的運(yù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)容的豐富含義。⑷運(yùn)用對比與調(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è)計與實(shí)訓(xùn)教程[M]》.北京：冶金工業(yè)出版社，第13頁，2006.③周德華，許銘霖.《新編網(wǎng)頁設(shè)計教程[M]》.北京：冶金工業(yè)出版社，第159頁，2006.—4—
頁面設(shè)計中，它的均衡有時會使頁面顯得呆板，但如果加入一些富有動感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容往往會達(dá)到比較好的效果。點(diǎn)、線、面作為視覺語言中的基本元素，要使用點(diǎn)、線、面的互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最佳的頁面效果。網(wǎng)頁設(shè)計中點(diǎn)、線、面的運(yùn)用并不是孤立的，很多時候都需要將它們結(jié)合起來，表達(dá)完美的設(shè)計意境。
2．3 系統(tǒng)各模塊功能實(shí)現(xiàn)
2.3.1 系統(tǒng)登錄模塊
1、該功能模塊可以記錄客戶的郵箱地址，交易時還可以向客戶發(fā)送交易信息，到帳確認(rèn)等等。
2、登陸后系統(tǒng)會調(diào)出客戶的記錄，按照交易量的不同客戶享受的折扣也不同，系統(tǒng)主界面
2.3.2 車輛展示模塊⑴
1、該功能模塊主要實(shí)現(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)要求運(yùn)行的工作環(huán)境穩(wěn)定，易于操作，界面美觀大方，對 于前臺展示界面要求系統(tǒng)便于維護(hù)，安全可靠，對于廣大客戶所要執(zhí)行的操作 簡單易懂，遠(yuǎn)程訪問速度較快，界面友好美觀，有基本的錯誤提醒功能，遠(yuǎn)程 操作數(shù)據(jù)庫正確，要求和客戶有一定的互動性，在主頁上直觀的就可以查看瀏 覽者所想要了解的東西。
3.2 子頁的要求
后面的工作就是子頁的選擇與鏈接，子頁應(yīng)該豐富多彩，內(nèi)容充實(shí)，瀏覽 性強(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 樣式的運(yùn)用兩方面來介紹網(wǎng)頁設(shè)計的技巧。⑴
3.3.1 框架的使用
FRAME（框架）是 Web 上經(jīng)常會看到的頁面結(jié)構(gòu)?？蚣艿淖畛Ｒ娪猛揪褪菍?dǎo)航⑵。一組框架通常包括一個含有導(dǎo)航條的框架和另一個要顯示主要內(nèi)容頁面的框 架。使用框架具有以下優(yōu)點(diǎn)：訪問者的瀏覽器不需要為每個頁面重新加載與導(dǎo)航相 關(guān)的圖形；每個框架都具有自己的滾動條如果內(nèi)容太大，在窗口中顯示不下，因此訪問者可以獨(dú)立滾動這些框架。例如，當(dāng)框架中的內(nèi)容頁面較長時，如果 導(dǎo)航條位于不同的框架中，那么向下滾動到頁面底部的訪問者就不需要再滾動 回頂部來使用導(dǎo)航條。使用框架具有以下缺點(diǎn)：可能難以實(shí)現(xiàn)不同框架中各元素的精確圖形對齊；對 導(dǎo)航進(jìn)行測試可能很耗時間。許多專業(yè) Web 設(shè)計人員不喜歡使用框架，并且許多瀏覽 Web 的人也不喜歡框 架。在大多數(shù)情況下，這種反感是因?yàn)橛龅搅四切┦褂每蚣苄Ч患鸦虿槐匾?地使用框架的站點(diǎn)例如，每當(dāng)訪問者單擊導(dǎo)航按鈕時就重新加載導(dǎo)航框架內(nèi) 容的框架集。如果框架使用得法例如，在允許其他框架的內(nèi)容發(fā)生更改的同 時，使一個框架中的導(dǎo)航控件保持靜態(tài)，則這些框架對于某些站點(diǎn)可能非常 有用。
3.3.2 CSS 樣式的使用
CSS 層疊 樣 式 表 是 一 種 制 作 網(wǎng) 頁 的 新 技 術(shù) 它 的 全 稱 是 級 聯(lián) 樣 式 表 即Cascading StyleSheets 的縮寫，又稱之為風(fēng)格樣式表單。⑶CSS 是在網(wǎng)頁制作過程中普遍用到的技術(shù)。采用了 CSS 技術(shù)控制的網(wǎng)頁，設(shè)計者會更輕松、有效地對頁面的整體布局、顏色、字體、鏈接、背景以及同一頁面的不同部分、不同頁面的外觀和格式等效果實(shí)現(xiàn)更加精確地控制。
第四章 網(wǎng)頁的應(yīng)用
4.1 網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。
4.1.1 優(yōu)點(diǎn)：
靜態(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)站可以實(shí)現(xiàn)更多的功能，如用戶注冊、用戶登錄、在線調(diào)查、用戶管理、頂訂單管理等等
①]陳季.《 Flash 基礎(chǔ)與實(shí)例教程[M]》.北京：北京希望電子出版社，第88頁，2005.②丁海祥.《計算機(jī)平面設(shè)計實(shí)訓(xùn)[M].》 北京：高等教育出版社，第54頁，2005.③曹雁青，楊聰.《 Photoshop 經(jīng)典作品賞析[M].》北京：北京海洋智慧圖書有限公司，第35頁，2002.—6—
4.1.2 缺點(diǎn)： 靜態(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)需求分析過程中花費(fèi)了很多時間，但是我認(rèn)為這是必要的也是必須的。這次畢業(yè)設(shè)計中我了解到了很多的知識，這對我今后的學(xué)習(xí)和生活都將會有很大的幫助。我明白了對于一個完整性的軟件設(shè)計流程的主要性，在整個網(wǎng)站設(shè)計過程中前期需求分析，可行性分析是非常重要的環(huán)節(jié)，可以說是軟件設(shè)計的核心，在過去我一直認(rèn)為詳細(xì)設(shè)計編碼才是最重要的，因?yàn)樵俸玫男枨螅幋a不成功，軟件就無法正常運(yùn)行。鍛煉了自己發(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ā)典型模塊與實(shí)例精講，電子工業(yè)出版社，2006.8.—7—
第二篇：網(wǎng)頁設(shè)計與應(yīng)用
網(wǎng)頁設(shè)計與應(yīng)用
專
業(yè)： 班
級： 學(xué)
號： 姓
名： 指導(dǎo)教師：
計算機(jī)網(wǎng)絡(luò)技術(shù)
20***031 蔡依婷 楊艷慈
邯鄲職業(yè)技術(shù)學(xué)院 2017年11月21日
摘要
網(wǎng)頁設(shè)計與應(yīng)用
摘 要
本論文將對個人網(wǎng)頁設(shè)計與制作的方法、工具等展開研究和探討。在介紹網(wǎng)頁設(shè)計與制作語言的基礎(chǔ)上，著重使用JavaScript作為工具語言進(jìn)行網(wǎng)頁設(shè)計與制作的實(shí)際操作，分別對基于對象的JavaScript語言、內(nèi)部對象系統(tǒng)的使用及WEB頁面信息交互——窗口和框架進(jìn)行詳細(xì)描述，并利用具體的實(shí)例進(jìn)行驗(yàn)證。
本論文主要章節(jié)如下，第一章：緒論，本章主要介紹網(wǎng)頁設(shè)計的相關(guān)知識。第二章：網(wǎng)頁設(shè)計語言概述，本章主要介紹網(wǎng)頁設(shè)計的語言——HTML，以及用于編輯HTML語言的軟件，為后續(xù)工作奠定基礎(chǔ)。第三章：基于對象的JavaScript語言，本章介紹了基于對象的JavaScript中常用內(nèi)部對象屬性、方法的使用。第四章：內(nèi)部對象系統(tǒng)的使用，本章主要介紹使用瀏覽器的內(nèi)部對象系統(tǒng)，可實(shí)現(xiàn)與HTML文檔進(jìn)行交互。第五章：WEB頁面信息的交互——窗體與框架，本章主要介紹實(shí)現(xiàn)網(wǎng)頁的動態(tài)交互，必須掌握有關(guān)窗體對象（Form）和框架對象（Frames）更為復(fù)雜的知識。
關(guān)鍵詞： 網(wǎng)頁制作；網(wǎng)頁設(shè)計；HTML；ASP
目 錄
1.1 網(wǎng)頁設(shè)計概述............................................................................................................................................4 1.2 網(wǎng)頁設(shè)計的要素........................................................................................................................................4 1.3 大作業(yè)目的和意義.....................................................................................................................................4
第二章 HTML網(wǎng)頁設(shè)計技術(shù)的應(yīng)用...........................................6 2.1 HTML語言介紹........................................................................................................................................6 2.1.1 HTML語言的特點(diǎn)...............................................................................................................................6 2.1.2 HTML語言的編輯軟件.......................................................................................................................6
第三章 色彩在網(wǎng)頁中的應(yīng)用..............................................7 3.1色彩在網(wǎng)頁中的應(yīng)用...............................................................................................................................7 3.2主頁色彩的處理........................................................................................................................................7 3.3常用的配色方案........................................................................................................................................7
第四章 WEB頁面信息的交互——窗體與框架..................................8 4.1窗體基礎(chǔ)知識..............................................................................................................................................8 4.1.1窗體對象.................................................................................................................................................8 4.1.2 窗體對象的方法....................................................................................................................................9 4.2 窗體中的基本元素.....................................................................................................................................9 4.3窗體對象實(shí)例...........................................................................................................................................11 4.4 框架..........................................................................................................................................................13 4.5 框架的訪問...............................................................................................................................................14 4.6本章小結(jié)...................................................................................................................................................17 第五章 結(jié) 論...........................................................18 致 謝................................................................19 參考文獻(xiàn)................................................................20
緒論
第一章 緒論
隨著21世紀(jì)的到來，人們更深切地感受到計算機(jī)在生活和工作中的作用越來越重要，越來越來的職業(yè)需要具有計算機(jī)的應(yīng)用技能。掌握計算機(jī)是職業(yè)的需要，更是事業(yè)發(fā)展的需要。網(wǎng)頁設(shè)計與制作是計算機(jī)能力的具體表現(xiàn)，本章主要介紹網(wǎng)頁設(shè)計的相關(guān)知識。
1.1 網(wǎng)頁設(shè)計概述
網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息(包括產(chǎn)品和服務(wù))的一種方式,是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺，離開網(wǎng)站（或者只是利用第三方網(wǎng)站）去談電子商務(wù)是不可能的。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡(luò)商標(biāo)”，也是企業(yè)無形資產(chǎn)的組成部分，而網(wǎng)站是INTERNET上宣傳和反映企業(yè)形象和文化的重要窗口。
1.2 網(wǎng)頁設(shè)計的要素
網(wǎng)頁設(shè)計的兩大要素是：整體風(fēng)格和色彩搭配。
一、確定網(wǎng)站的整體風(fēng)格
在這里，我提供給大家一些參考經(jīng)驗(yàn)：
1．將你的標(biāo)志logo，盡可能的放在每個頁面上最突出的位置。2．突出你的標(biāo)準(zhǔn)色彩。
3．總結(jié)一句能反映貴站精髓的宣傳標(biāo)語！
4．相同類型的圖像采用相同效果，比如說標(biāo)題字都采用陰影效果，那么在網(wǎng)站中出現(xiàn)的所有標(biāo)題字的陰影效果的設(shè)置應(yīng)該是完全一致的！
二、網(wǎng)頁色彩的搭配
1．用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁面看起來色彩統(tǒng)一，有層次感。
2．用兩種色彩。先選定一種色彩，然后選擇它的對比色。
3．用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。
1.3 大作業(yè)目的和意義
本大作業(yè)主要是對網(wǎng)頁設(shè)計與制作的語言基礎(chǔ)上進(jìn)行探討，主要內(nèi)容如下：通過已經(jīng)做好的網(wǎng)頁，分析html網(wǎng)頁設(shè)計技術(shù)、XML技術(shù)、Java Applet技術(shù)和Javascript技術(shù)在網(wǎng)頁設(shè)計中的應(yīng)用。
緒論 5
第二章
第二章 HTML網(wǎng)頁設(shè)計技術(shù)的應(yīng)用
2.1 HTML語言介紹
HTML（HyperText Mark-up Language）即超文本標(biāo)記語言或超文本鏈接標(biāo)示語言，是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主要語言。
HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結(jié)構(gòu)包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內(nèi)容。
2.1.1 HTML語言的特點(diǎn)
HTML文檔制作不是很復(fù)雜，且功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)?，這也是WWW盛行的原因之一，HTML語言的特點(diǎn)如下：
1、簡易性，HTML版本升級采用超集方式，從而更加靈活方便。
2、可擴(kuò)展性，HTML語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識符等要求，HTML采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。
3、平臺無關(guān)性。雖然PC機(jī)大行其道，但使用MAC等其他機(jī)器的大有人在，HTML可以使用在廣泛的平臺上，這也是WWW盛行的另一個原因。
2.1.2 HTML語言的編輯軟件
HTML的本質(zhì)是文本，需要瀏覽器的解釋，HTML的編輯器大體可以分為三種：
1、基本編輯軟件，使用WINDOWS自帶的記事本或?qū)懽职娑伎梢跃帉?，?dāng)然，如果你用WPS來編寫，也可以。不過存盤時請使用.htm或.html作為擴(kuò)展名，這樣瀏覽器就可以解釋執(zhí)行了。
2、半所見即所得軟件，這種軟件能大大提高開發(fā)效率，它可以使你在很短的時間內(nèi)做出Homepage，且可以學(xué)習(xí)HTML，這種類型的軟件主要有HOTDOG，還有國產(chǎn)的軟件網(wǎng)頁作坊。
3、所見即所得軟件，使用最廣泛的編輯器，完全可以一點(diǎn)不懂HTML的知識就可以做出網(wǎng)頁，這類軟件主要有Frontpage，DREAMWEAVER、Delphi、Eclipse、UltraEdit。
第三章 7 第三章 色彩在網(wǎng)頁中的應(yīng)用
3.1色彩在網(wǎng)頁中的應(yīng)用
色彩是藝術(shù)表現(xiàn)的要素之一。在網(wǎng)頁設(shè)計中，我們的設(shè)計師根據(jù)和諧、均衡和重點(diǎn)突出的原則，將不同的色彩進(jìn)行組合．搭配來構(gòu)成美麗的頁面。根據(jù)色彩對人們心理的影響，合理地加以運(yùn)用。
先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁面看起來色彩統(tǒng)一，有層次感。簡單的說就是用一個感覺的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。
在網(wǎng)頁配色中不要將所有顏色都用到，盡量控制在三至五種色彩以內(nèi)。背景和前文的對比盡量要大以便突出主要文字內(nèi)容。
3.2主頁色彩的處理
色彩是人的視覺最敏感的東西。主頁的色彩處理得好，可以錦上添花，達(dá)到事半功倍的效果。色彩總的應(yīng)用原則應(yīng)該是“總體協(xié)調(diào)，局部對比”，也就是：主頁的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對比。在色彩的運(yùn)用上，可以根據(jù)主頁內(nèi)容的需要，分別采用不同的主色調(diào)。因?yàn)樯示哂邢笳餍?，例如：嫩綠色、翠綠色、金黃色、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業(yè)的標(biāo)志色，例如：軍警的橄欖綠，醫(yī)療衛(wèi)生的白色等。色彩還具有明顯的心理感覺，例如冷、暖的感覺，進(jìn)、退的效果等。另外，色彩還有民族性，各個民族由于環(huán)境、文化、傳統(tǒng)等因素的影響，對于色彩的喜好也存在著較大的差異。充分運(yùn)用色彩的這些特性，可以使我們的主頁具有深刻的藝術(shù)內(nèi)涵，從而提升主頁的文化品位。
3.3常用的配色方案
1.暖色調(diào)。即紅色、橙色、黃色、赭色等色彩的搭配。這種色調(diào)的運(yùn)用，可使主頁呈現(xiàn)溫馨、和煦、熱情的氛圍。
2.冷色調(diào)。即青色、綠色、紫色等色彩的搭配。這種色調(diào)的運(yùn)用，可使主頁呈現(xiàn)寧靜、清涼、高雅的氛圍。
3.對比色調(diào)。即把色性完全相反的色彩搭配在同一個空間里。例如：紅與綠、黃與紫、橙與藍(lán)等。這種色彩的搭配，可以產(chǎn)生強(qiáng)烈的視覺效果，給人亮麗、鮮艷、喜慶的感覺。
第四章
最后，還要考慮主頁底色（背景色）的深、淺，這里借用攝影中的一個術(shù)語，就是“高調(diào)”和“低調(diào)”。底色淺的稱為高調(diào)；底色深的稱為低調(diào)。底色深，文字的顏色就要淺，以深色的背景襯托淺色的內(nèi)容（文字或圖片）；反之，底色淡的，文字的顏色就要深些，以淺色的背景襯托深色的內(nèi)容（文字或圖片）。這種深淺的變化在色彩學(xué)中稱為“明度變化”。當(dāng)然，色彩的明度也不能變化太大，否則屏幕上的亮度反差太強(qiáng)，同樣也會使讀者的眼睛受不了。
第四章 WEB頁面信息的交互——窗體與框架
要實(shí)現(xiàn)網(wǎng)頁的動態(tài)交互，必須掌握有關(guān)窗體對象（Form）和框架對象（Frames）更為復(fù)雜的知識。
4.1窗體基礎(chǔ)知識
窗體對象可以使設(shè)計人員能用窗體中不同的元素與客戶機(jī)用戶相交互，而用不著在之前首先進(jìn)行數(shù)據(jù)輸入，就可以實(shí)現(xiàn)動態(tài)改變Web文檔的行為。
4.1.1窗體對象
窗體（Form）：它構(gòu)成了Web頁面的基本元素。通常一個Web頁面有一個窗體或幾個窗體，使用Forms[]數(shù)組來實(shí)現(xiàn)不同窗體的訪問。
在Forms[0]中共有三個基本元素，而Forms[1]中只有兩個元素。窗體對象最主要的功能就是能夠直接訪問HTML文檔中的窗體，它封裝了相關(guān)的HTML代碼：
4.1.2 窗體對象的方法窗體對象的方法只有一個--submit()方法，該方法主要功用就是實(shí)現(xiàn)窗體信息的提交。如提交Mytest窗體，則使用下列格式：
document.mytest.submit()4.2 窗體中的基本元素
窗體中的基本元素由按鈕、單選按鈕、復(fù)選按鈕、提交按鈕、重置按鈕、文本框等組成。
在JavaScript中要訪問這些基本元素，必須通過對應(yīng)特定的窗體元素的數(shù)組下標(biāo)或窗體元素名來實(shí)現(xiàn)。每一個元素主要是通過該元素的屬性或方法來引用。其引用的基本格式見下：
formName.elements[].methadName(窗體名.元素名或數(shù)組.方法)formName.elemaent[].propertyName(窗體名.元素名或數(shù)組.屬性)下面分別介紹：
（1）Text單行單列輸入元素
功能：對Text標(biāo)識中的元素實(shí)施有效的控制?；緦傩裕?/p>
Name：設(shè)定提交信息時的信息名稱。對應(yīng)于HTML文檔中的Name。Value：用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。defaultvalue：包括Text元素的默認(rèn)值 基本方法：
blur()：將當(dāng)前焦點(diǎn)移到后臺。select()：加亮文字。主要事件：
onFocus：當(dāng)Text獲得焦點(diǎn)時，產(chǎn)生該事件。OnBlur：從元素失去焦點(diǎn)時，產(chǎn)生該事件。Onselect：當(dāng)文字被加亮顯示后，產(chǎn)生該文件。onchange：當(dāng)Text元素值改變時，產(chǎn)生該文件。例：
...第四章
（2）textarea多行多列輸入元素
功能：實(shí)施對Textarea中的元素進(jìn)行控制。基本屬性
name：設(shè)定提交信息時的信息名稱，對應(yīng)HTML文檔Textarea的Name。Value：用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。Default value：元素的默認(rèn)值。方法：
blur()：將輸入焦點(diǎn)失去 select()：將文字加亮后 事件：
onBlur:當(dāng)失去輸入焦點(diǎn)后產(chǎn)生該事件 onFocus:當(dāng)輸入獲得焦點(diǎn)后，產(chǎn)生該文件 Onchange:當(dāng)文字值改變時，產(chǎn)生該事件 Onselect:當(dāng)文字加亮后，產(chǎn)生該文件（3）Select選擇元素
功能：實(shí)施對滾動選擇元素的控制。屬性：
name:設(shè)定提交信息時的信息名稱，對應(yīng)文檔select中的name。Length:對應(yīng)文檔select中的length options:組成多個選項(xiàng)的數(shù)組 selectIndex;該下標(biāo)指明一個選項(xiàng)
select在中每一選項(xiàng)都含有以下屬性： Text:選項(xiàng)對應(yīng)的文字
selected:指明當(dāng)前選項(xiàng)是否被選中 Index:指明當(dāng)前選項(xiàng)的位置 defaultselected:默認(rèn)選項(xiàng) 事件：
OnBlur：當(dāng)select選項(xiàng)失去焦點(diǎn)時，產(chǎn)生該文件。onFocas:當(dāng)select獲得焦點(diǎn)時，產(chǎn)生該文件。Onchange:選項(xiàng)狀態(tài)改變后，產(chǎn)生該事件。（4）Button按鈕
功能：實(shí)施對Button按鈕的控制。屬性：
Name:設(shè)定提交信息時的信息名稱，對應(yīng)文檔中button的Name。Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。方法：
click()該方法類似于一個按下的按鈕。事件：
onclick當(dāng)單擊button按鈕時，產(chǎn)生該事件。例 ：
10第四章 11........4.3窗體對象實(shí)例
下面我們演示通過點(diǎn)擊一個按鈕（red）來改變窗口顏色，點(diǎn)擊“調(diào)用動態(tài)按鈕文檔”調(diào)用一個動態(tài)按鈕文檔。
test8_1.htm
調(diào)用動態(tài)按鈕文檔第三篇：網(wǎng)頁設(shè)計畢業(yè)論文
目錄
一、課題來源.....................................................3
（一）設(shè)計思想.................................................3
（二）網(wǎng)站主題.................................................3
二、網(wǎng)站需求分析.................................................3
（一）搜集材料.................................................3
（二）需求分析與規(guī)劃...........................................3 三 軟件介紹.....................................................4
（一）Adobe Photoshop..........................................4
（二）Dreamweaver CS6..........................................4(三)軟件運(yùn)行環(huán)境..............................................4
四、網(wǎng)站整體設(shè)計.................................................5
（一）網(wǎng)頁的規(guī)劃...............................................5
（二）系統(tǒng)框架.................................................6
五、主頁介紹與網(wǎng)頁截圖...........................................6
（一）主頁面介紹...............................................6
（二）子頁面介紹...............................................7
六、總結(jié)與感想...................................................9
（一）本網(wǎng)站實(shí)現(xiàn)了形式與內(nèi)容的統(tǒng)一.............................9
（二）本網(wǎng)站具有良好的互動性..................................10
（三）缺點(diǎn)與不足..............................................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é)合自己的實(shí)際情況，選定田園采摘園作為本網(wǎng)站的設(shè)計主題，用互聯(lián)網(wǎng)的思維經(jīng)營采摘園。
二、網(wǎng)站需求分析
（一）搜集材料
明確了網(wǎng)頁的主題以后，就可以圍繞主題開始搜集材料了。材料既可以從圖書、報紙、光盤、多媒體上得來，也可以從互聯(lián)網(wǎng)上搜集，然后把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁的素材。
（二）需求分析與規(guī)劃
一個完整的網(wǎng)頁是建立在各種各樣的需求上面的，這種需求往往來自于客戶的實(shí)際需求或者是出于公司自身發(fā)展的需要，其中客戶的實(shí)際需求也就是說這種交易性質(zhì)的需求占了絕大部分。
面對網(wǎng)頁設(shè)計擁有不同知識層面的客戶，設(shè)計的負(fù)責(zé)人對用戶需求的理解程度，在很大程度上決定了此類網(wǎng)頁規(guī)劃的成敗。因此如何更好地的了解、分析、明確用戶需求，并且能夠準(zhǔn)確、清晰以文檔的形式表達(dá)給參與項(xiàng)目開發(fā)的每個成員，保證開發(fā)過程按照滿足用戶需求為目的正確項(xiàng)目開發(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è)計中，運(yùn)用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ù)的要求。
(三)軟件運(yùn)行環(huán)境
Dreamweaver是一款簡體中文軟件，可以在Win2003/WinXP/Win7/Win8中安全運(yùn)行，換句話說，它可以在任何家用微機(jī)中運(yùn)行。
/ 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
顏色搭配、版面布局、文字圖片的運(yùn)用等，你只有在制作網(wǎng)頁之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有成竹。也只有如此制作出來的網(wǎng)頁才能有個性、有特色，具有吸引力。
（二）系統(tǒng)框架
采摘園首頁 采摘概況 最新動態(tài) 時令水果 活動影集 聯(lián)系我們 圖2.系統(tǒng)模塊框架圖
五、主頁介紹與網(wǎng)頁截圖
（一）主頁面介紹
首先是利用Dreamwear技術(shù)制作的網(wǎng)頁。上方框架是網(wǎng)站的圖片、網(wǎng)站名稱，點(diǎn)擊相關(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)站實(shí)現(xiàn)了形式與內(nèi)容的統(tǒng)一
要將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu)，形式語言必須符合頁面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。運(yùn)用對比與調(diào)和、對稱與平衡、節(jié)奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。如對稱原則在頁面設(shè)計中，它的均衡有時會使頁面顯得呆板，但如果加入一些富有動感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容往往會達(dá)到比較好的效果。點(diǎn)、線、面作為視覺語言中的基本元素，要使用點(diǎn)、線、面的互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最佳的頁面效果。網(wǎng)頁設(shè)計中點(diǎn)、線、面的運(yùn)用并不是孤立的，很多時候都需要將它們結(jié)合起來，表達(dá)完美的設(shè)計意境。
/ 11
（二）本網(wǎng)站具有良好的互動性
對于銷售業(yè)務(wù)頁面要求運(yùn)行的工作環(huán)境穩(wěn)定，易于操作，界面美觀大方，對于前臺展示界面要求系統(tǒng)便于維護(hù)，安全可靠，對于廣大客戶所要執(zhí)行的操作簡單易懂，遠(yuǎn)程訪問速度較快，界面友好美觀，有基本的錯誤提醒功能，遠(yuǎn)程操作數(shù)據(jù)庫正確，要求和客戶有一定的互動性，在主頁上直觀的就可以查看瀏覽者所想要了解的東西。
（三）缺點(diǎn)與不足
就我個人而言，對網(wǎng)頁制作還缺少很多的理論與實(shí)際操作知識，曾經(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 入門實(shí)戰(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è)課堂實(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ù)而不僅僅是一項(xiàng)技術(shù)。網(wǎng)頁的藝術(shù)設(shè)計，日益被網(wǎng)站建設(shè)者 《網(wǎng)頁設(shè)計畢業(yè)論文》正文開始>> 前言
隨著時代的發(fā)展，網(wǎng)站建設(shè)越來越接近于一門藝術(shù)而不僅僅是一項(xiàng)技術(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)容、原則和特點(diǎn)等
三個方面，對這個新的藝術(shù)設(shè)計領(lǐng)域進(jìn)行初步的歸納總結(jié)和理論探討。作者認(rèn)為網(wǎng)頁藝術(shù)設(shè)計是藝術(shù)與技術(shù)的高度統(tǒng)一，指出網(wǎng)
頁藝術(shù)設(shè)計包含視聽元素與版式設(shè)計兩項(xiàng)內(nèi)容；以主題鮮明、形式與內(nèi)容相統(tǒng)一、強(qiáng)調(diào)整體為設(shè)計原則；具有交互性與持續(xù)性、多維性、綜合性、版式的不可控性、藝術(shù)與技術(shù)結(jié)合的緊密性等五個特點(diǎn)。在明確了網(wǎng)頁藝術(shù)設(shè)計與網(wǎng)站主題的關(guān)系的基礎(chǔ)上，提出了“美”和“功能”都是為了更好地表達(dá)網(wǎng)站主題這一觀點(diǎn)。
網(wǎng)頁藝術(shù)設(shè)計是伴隨著計算機(jī)互聯(lián)網(wǎng)絡(luò)的產(chǎn)生而形成的視聽設(shè)計新課題，是網(wǎng)頁設(shè)計者以所處時代所能獲取的技術(shù)和藝術(shù)經(jīng)驗(yàn)為
基礎(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ù)與 技術(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è)計的特點(diǎn)~~~~~~~~~~~~~~~~~~~~~
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ù) 的運(yùn)用大大豐富了網(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ā)展前景?？傊?，技術(shù)的不斷發(fā)展使多媒體元素在網(wǎng)頁藝術(shù)設(shè)計中的綜合運(yùn)用越來越廣泛，使瀏覽者可以享受到更加完美的視聽效果。這些新技 術(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)形式、運(yù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í)用和需求，這就要求視覺設(shè)計不但要單純、簡練、清晰
和精確，而且在強(qiáng)調(diào)藝術(shù)性的同時，更應(yīng)該注重通過獨(dú)特的風(fēng)格和強(qiáng)烈的視覺沖擊力，來鮮明地突出設(shè)計主題。
根據(jù)認(rèn)知心理學(xué)的理論，大多數(shù)人在短期記憶中只能同時把握４到７條分立的信息，而對多于７條的分立信息或者不分立的信息
容易產(chǎn)生記憶上的模糊或遺忘，概括起來就是：較小而分立的信息要比較長而不分立的信息更為有效和容易瀏覽。這個規(guī)律蘊(yùn)含
在人們尋找信息和使用信息的實(shí)踐活動中，它要求視覺設(shè)計者的設(shè)計活動必須自覺地掌握和遵從。
作為視覺設(shè)計范疇一種的網(wǎng)頁藝術(shù)設(shè)計，其最終目的是達(dá)到最佳的主題訴求效果。這種效果的取得，一方面通過對網(wǎng)頁主題思想
運(yùn)用邏輯規(guī)律進(jìn)行條理性處理，使之符合瀏覽者獲取信息的心理需求和邏輯方式，讓瀏覽者快速地理解和吸收；另一方面通過對
網(wǎng)頁構(gòu)成元素運(yùn)用藝術(shù)的形式美法則進(jìn)行條理性處理，更好地營造符合設(shè)計目的的視覺環(huán)境，突出主題，增強(qiáng)瀏覽者對網(wǎng)頁的注
意力，增進(jìn)對網(wǎng)頁內(nèi)容的理解。只有兩個方面有機(jī)地統(tǒng)一，才能實(shí)現(xiàn)最佳的主題訴求效果。
優(yōu)秀的網(wǎng)頁設(shè)計必然服務(wù)于網(wǎng)站的主題，就是說，什么樣的網(wǎng)站，應(yīng)該有什么樣的設(shè)計。例如，設(shè)計類的個人站點(diǎn)與商業(yè)站點(diǎn)性
質(zhì)不同，目的也不同，所以評論的標(biāo)準(zhǔn)也不同。網(wǎng)頁藝術(shù)設(shè)計與網(wǎng)站主題的關(guān)系應(yīng)該是這樣：首先，設(shè)計是為主題服務(wù)的；其次，設(shè)計是藝術(shù)和技術(shù)結(jié)合的產(chǎn)物，就是說，即要“美”，又要實(shí)現(xiàn)“功能”；最后，“美”和“功能”都是為了更好地表達(dá)主題
。當(dāng)然，有些情況下，“功能”即是“主題”，還有些情況下，“美”即是主題。例如，雅虎作為一個搜索引擎，首先要實(shí)現(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)系、視覺秩序及彼此間的 邏輯性的把握運(yù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)。正如
黑格爾所說：“工藝的美就不在于要求實(shí)用品的外部造型、色彩、紋樣去摹擬事物，再現(xiàn)現(xiàn)實(shí)，而在于使其外部形式傳達(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)“獨(dú)特的
設(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è)計獨(dú)具的分量和特有的價值。另
一方面，要確保網(wǎng)頁上的每一個元素都有存在的必要性，不要為了炫耀而使用冗余的技術(shù)。那樣得到的效果可能會適得其反。
只有通過認(rèn)真設(shè)計和充分的考慮來實(shí)現(xiàn)全面的功能并體現(xiàn)美感才能實(shí)現(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)頁，因?yàn)樗环暇W(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)境里為人們所理解和接受，它以滿足
人們的實(shí)用和需求為目標(biāo)。設(shè)計時強(qiáng)調(diào)其整體性，可以使瀏覽者更快捷、更準(zhǔn)確、更全面地認(rèn)識它、掌握它，并給人一種內(nèi)部
有機(jī)聯(lián)系、外部和諧完整的美感。整體性也是體現(xiàn)一個站點(diǎn)獨(dú)特風(fēng)格的重要手段之一。
網(wǎng)頁的結(jié)構(gòu)形式是由各種視聽要素組成的。在設(shè)計網(wǎng)頁時，強(qiáng)調(diào)頁面各組成部分的共性因素或者使諸部分共同含有某種形式特
征，是求得整體的常用方法。這主要從版式、色彩、風(fēng)格等方面入手。例如：在
版式上，將頁面中各視覺要素作通盤考慮，以
周密的組織和精確的定位來獲得頁面的秩序感，即使運(yùn)用“散”的結(jié)構(gòu)，也是經(jīng)過深思熟慮之后的決定；一個站點(diǎn)通常只使用
兩到三種標(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è)計的特點(diǎn)
1.交互性與持續(xù)性
網(wǎng)頁不同于傳統(tǒng)媒體之處，就在于信息的動態(tài)更新和即時交互性。即時的交互性是Web成為熱點(diǎn)的主要原因，也是網(wǎng)頁設(shè)計時
必須考慮的問題。傳統(tǒng)媒體（如廣播、電視節(jié)目、報刊雜志等）都以線性方式提供信息，即按照信息提供者的感覺、體驗(yàn)和事
先確定的格式來傳播。而在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)，讓瀏覽者對你提供的巨量信息感到條理？怎樣建立包括站點(diǎn)索引、幫助
頁面、查詢功能在內(nèi)的導(dǎo)航系統(tǒng)？這一切從哪兒開始，到哪兒結(jié)束？
3.多種媒體的綜合性
目前網(wǎng)頁中使用的多媒體視聽元素主要有文字、圖像、聲音、視頻等，隨著網(wǎng)絡(luò)帶寬的增加、芯片處理速度的提高以及跨平
臺的多媒體文件格式的推廣，必將促使設(shè)計者綜合運(yùn)用多種媒體元素來設(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)實(shí)時的音頻和視頻服務(wù)，典型的有在線音樂、在線廣播、網(wǎng)上電影、網(wǎng)上直播等。因此，多種媒體的綜合
運(yùn)用是網(wǎng)頁藝術(shù)設(shè)計的特點(diǎn)之一，是未來的發(fā)展方向。
4.版式的不可控性
網(wǎng)頁版式設(shè)計與傳統(tǒng)印刷版式設(shè)計有著極大的差異：
(1)印刷品設(shè)計者可以指定使用的紙張和油墨，而網(wǎng)頁設(shè)計者卻不能要求瀏覽者使用什么樣的電腦或?yàn)g覽器；
(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é)為一點(diǎn)，即網(wǎng)頁設(shè)計者無法控制頁面在用戶端的最終顯示效果，但這也正是網(wǎng)頁設(shè)計的吸引人之處。
5.技術(shù)與藝術(shù)結(jié)合的緊密性
設(shè)計是主觀和客觀共同作用的結(jié)果，是在自由和不自由之間進(jìn)行的，設(shè)計者不能超越自身已有經(jīng)驗(yàn)和所處環(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ù)之長，實(shí)現(xiàn)藝術(shù)想象，滿足瀏覽者對網(wǎng)頁信息的高質(zhì)量需求。
例如，瀏覽者欣賞一段音樂或電影，以前必須先將這段音樂或電影下載回本地機(jī)器，然后使用相應(yīng)的程序來播放，由于音頻或視頻文件都比較大，需要較長的下載時間。流（Stream）技術(shù)出現(xiàn)以后，網(wǎng)頁設(shè)計者充分、巧妙地應(yīng)
用此技術(shù)，讓瀏覽者在下載過程中就可以欣賞這段音樂或電影，實(shí)現(xiàn)了實(shí)時的網(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)實(shí)中的虛擬世界。
四 結(jié) 束 語
網(wǎng)頁作為一種新的視覺表現(xiàn)形式，它的發(fā)展雖然沒有多長時間，它兼容了傳統(tǒng)平
面設(shè)計的特征，又具備其
所沒有的優(yōu)勢，成為今后信息交流的一個非常有影響的途徑。網(wǎng)頁設(shè)計是一種綜合性的設(shè)計，它所涉及的范圍非常的廣泛，包括消費(fèi)者心理學(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.
第五篇：靜態(tài)網(wǎng)頁設(shè)計與制作畢業(yè)論文
目 錄
摘 要……………………………………………………………………………………….0 第1章 緒論……………………………………………………………………………….1 1.1 INTERNET的歷史和發(fā)展…………………………………………………………….1 1.2 網(wǎng)頁概述................1
第2章 開發(fā)軟件簡介 6
2.1 Dreamweaver簡介 6
2.2 HTML語言的簡介 7
2.3 Flash 簡介 …………………………………………………………………… 8
2.4 Photoshop 簡介 ……………………………………………………………… 9 2.3 本章小結(jié) 14
第3章 網(wǎng)站需求分析 15
3.1相關(guān)術(shù)語及解釋 15
3.2個人網(wǎng)站的由來與發(fā)展 15
3.3我的個人網(wǎng)頁的設(shè)計與規(guī)劃 18
3.3.1 我的個人網(wǎng)頁的概貌……………………………………………………… 19
3.3.2 個人網(wǎng)頁的設(shè)計理念……………………………………………………… 20
3.4 本章小結(jié) 19
第4章 結(jié)論 20
致 謝 21
參考文獻(xiàn) 22
靜態(tài)網(wǎng)頁的設(shè)計與制作
摘 要
本文就網(wǎng)站的設(shè)計與制作，以軟件工程的方法對全過程進(jìn)行了分析與研究，本文的主要工作集中在：
1.對web頁進(jìn)行概述，主要是對internet的歷史和發(fā)展作了回顧，并對WEB頁的定義和特性進(jìn)行闡述，并對網(wǎng)站設(shè)計過程中使用的工具和技術(shù)簡單的介紹.2.對網(wǎng)站建設(shè)中提及的術(shù)語進(jìn)行簡單解釋，并對網(wǎng)站的由來和發(fā)展進(jìn)行討論。
3.對自己設(shè)計的網(wǎng)站從設(shè)計理念到制作的過程進(jìn)行詳細(xì)分析.4.使用Dreamweaver+Flash+photoshop 等軟件的設(shè)計方式進(jìn)行解析
.5.就網(wǎng)站的設(shè)計與制作提出自己的觀點(diǎn)以及建議。
關(guān)鍵詞：網(wǎng)站 設(shè)計工具 設(shè)計方案 創(chuàng)意 風(fēng)格
Static web design and production
Abstract
This website design and production, with the method of software engineering to process the analysis and research, this paper main work concentrates in:
1.The paper to web page is mainly to the Internet's history and development, and a review of the definition and characteristics of web pages is expounded, and the website design process using the tools and techniques of simple introduction.2.The website construction mentioned in terms of website, and simple explanation of the origin and development are discussed.3.For the design of your own website from design concept to making process were analyzed.4.Use Flash +Dreamweaver + photoshop software design methods are analyzed
5.Just website design and facture put forward its own views and Suggestions
第1章 緒論
隨著21世紀(jì)的到來，人們更深切地感受到計算機(jī)在生活和工作中的作用越來越重要，越來越多的職業(yè)需要具有計算機(jī)應(yīng)用技能型人才。掌握計算機(jī)是職業(yè)的需要，更是事業(yè)發(fā)展的需要。網(wǎng)頁設(shè)計與制作是計算機(jī)能力的具體表現(xiàn)，本章主要介紹網(wǎng)頁設(shè)計的相關(guān)知識。
1.1Internet的歷史與發(fā)展
Internet最早來源于美國國防部高級研究計劃局DARPA(Defense advanced Research Projects Agency)的前身ARPA建立的ARPAnet，該網(wǎng)于1969年投入使用。從60年代開始，ARPA就開始向美國國內(nèi)大學(xué)的計算機(jī)系和一些私人有限公司提供經(jīng)費(fèi)，以促進(jìn)基于分組交換技術(shù)的計算機(jī)網(wǎng)絡(luò)的研究。1968年，ARPA為ARPAnet網(wǎng)絡(luò)項(xiàng)目立項(xiàng)，這個項(xiàng)目基于這樣一種主導(dǎo)思想：網(wǎng)絡(luò)必須能夠經(jīng)受住故障 的考驗(yàn)而維持正常工作，一旦發(fā)生戰(zhàn)爭，當(dāng)網(wǎng)絡(luò)的某一部分因遭受攻擊而失去工作能力時，網(wǎng)絡(luò)的其它部分應(yīng)當(dāng)能夠維持正常通信。最初，ARPAnet主要用于 軍事研究目的，它有五大特點(diǎn)：
⑴支持資源共享；
⑵采用分布式控制技術(shù)；
⑶采用分組交換技術(shù)；
⑷使用通信控制處理機(jī)；
⑸采用分層的網(wǎng)絡(luò)通信協(xié)議。
點(diǎn)擊咨詢 