畢業(yè)論文之鮮花系統(tǒng)網(wǎng)站

1、山西職業(yè)技術(shù)學(xué)院計算機(jī)工程系畢業(yè)設(shè)計論文論文題目：鮮花系統(tǒng)網(wǎng)站專 業(yè)：計算機(jī)應(yīng)用技術(shù)班 級： 計應(yīng)A902姓 名： 馬慧芳指導(dǎo)教師： 楊寅老師2011年11月20日山西職業(yè)技術(shù)學(xué)院 計算機(jī)工程系畢業(yè)設(shè)計任務(wù)書設(shè)計題目： 鮮花系統(tǒng)網(wǎng)站 設(shè)計任務(wù)： 創(chuàng)建一個鮮花系統(tǒng)網(wǎng)站，在本系統(tǒng)中能夠展示各種各樣的鮮花，能夠讓顧客一目了然，在網(wǎng)站中對花進(jìn)行了各種分類，讓顧客在最短的時刻里找到所需要的花，節(jié)約顧客的時刻。 設(shè)計目的：鮮花系統(tǒng)作為一個鮮花經(jīng)營者和鮮花消費者的一個交易平臺，應(yīng)該擁有漂亮的介紹花店鮮花種類以及意義的頁面，有進(jìn)行交易的完整的用戶登錄和版主登錄的治理系統(tǒng)，以此達(dá)到成本投入性小，利潤見效快的效果

2、，同時也方便了消費者，節(jié)約了他們的時刻和精力，該論文要對系統(tǒng)開發(fā)中面臨的問題及其方案進(jìn)行詳細(xì)設(shè)計和合理安排，依照所學(xué)知識進(jìn)行實現(xiàn)。設(shè)計要求： 1.使用Dreamweaver開發(fā)軟件的開發(fā)技術(shù)，2.版主登錄，3.對新上市的鮮花進(jìn)行及時的更新。設(shè)計時刻：從 2011 年 11月 2 日至 2011 年 11 月 20 日 共 3 周 設(shè)計人員： 馬 慧 芳 學(xué) 號： 0911090214 指導(dǎo)教師： 楊 寅 老 師 2011年11月20日目 錄 TOC o 1-3 h z u HYPERLINK l _Toc308793799 摘要5 HYPERLINK l _Toc308793800 關(guān)鍵詞5

3、HYPERLINK l _Toc308793801 前言6 HYPERLINK l _Toc308793802 第一部分 網(wǎng)站開發(fā)項目需求分析6 HYPERLINK l _Toc308793803 第二部分 花店開發(fā)的前期預(yù)備7 HYPERLINK l _Toc308793804 一、制作網(wǎng)頁的步驟7 HYPERLINK l _Toc308793805 1、確定網(wǎng)站主題7 HYPERLINK l _Toc308793806 2、搜集材料7 HYPERLINK l _Toc308793807 3、規(guī)劃網(wǎng)站7 HYPERLINK l _Toc308793808 4、選擇合適的制作工具7 HYPER

4、LINK l _Toc308793809 5、制作網(wǎng)頁7 HYPERLINK l _Toc308793810 二、制作網(wǎng)頁的要素7 HYPERLINK l _Toc308793811 1、網(wǎng)頁的整體布局設(shè)計7 HYPERLINK l _Toc308793813 2、網(wǎng)頁設(shè)計中色彩的運用8 HYPERLINK l _Toc308793814 3、網(wǎng)頁形式與內(nèi)容相統(tǒng)一8 HYPERLINK l _Toc308793815 4.網(wǎng)站開發(fā)工具8 HYPERLINK l _Toc308793824 第三部分 網(wǎng)上花店的總體設(shè)計14 HYPERLINK l _Toc308793825 第四部分 網(wǎng)上花店的

5、版面設(shè)計15 HYPERLINK l _Toc308793826 一、設(shè)計首頁的第一步15 HYPERLINK l _Toc308793827 二、草案 PAGEREF _Toc308793827 h 15 HYPERLINK l _Toc308793828 三、布局過程中應(yīng)遵循的原則15 HYPERLINK l _Toc308793829 四、添加網(wǎng)頁文字16 HYPERLINK l _Toc308793831 五、添加超鏈接19 HYPERLINK l _Toc308793833 六、插入Flash動畫20 HYPERLINK l _Toc308793835 總結(jié)23 HYPERLINK

6、l _Toc308793836 致謝24 HYPERLINK l _Toc308793837 參考文獻(xiàn)25摘要隨著因特網(wǎng)技術(shù)的迅速進(jìn)展，各種各樣的網(wǎng)站差不多深入到日常生活的各個角落，越來越多的公司都建立了自己的網(wǎng)站，電子商務(wù)大行其道，個人網(wǎng)站也如雨后春筍般的進(jìn)展起來。因特網(wǎng)的進(jìn)展?fàn)顩r能夠用日新月異來形容，通過電子商務(wù)來完善對商品的采購就給人們的生活帶來了專門多方便。它節(jié)約了物流消耗和一般商務(wù)對時刻和地點的依靠。在這種形式之下，購買鮮花的人越來越多，也越來越廣，全國各地都有購買者。這么大的一個市場，只是利用實物店鋪是遠(yuǎn)遠(yuǎn)不夠的，雖只能滿足本地消費者的需求，但卻不能面向遠(yuǎn)處的消費者需求。為了迎合市

7、場的需求，為了開拓市場提高自身在同行中的競爭能力，開發(fā)一個網(wǎng)上鮮花銷售系統(tǒng)也是專門有必要的。本網(wǎng)上花店系統(tǒng)，要緊實現(xiàn)的功能是：實現(xiàn)用戶在線注冊功能、登錄功能、查詢功能、留言功能、定單等。在后臺能實現(xiàn)治理員的登錄、治理員對商品的分類公布、商品的治理、用戶信息的治理、訂單治理、治理員治理等。真正實現(xiàn)從商品的公布到商品的購買一系列的網(wǎng)上銷售鮮花的功能。本系統(tǒng)基于Internet的互聯(lián)網(wǎng)網(wǎng)絡(luò)，使用Dreamweaver作開發(fā)平臺，利用網(wǎng)絡(luò)來實現(xiàn)網(wǎng)上銷售鮮花的功能性網(wǎng)站。具有最大的優(yōu)點是，界面優(yōu)美，可視性強(qiáng)，設(shè)計成本投入性小，利潤見效快，系統(tǒng)安全性好，系統(tǒng)維護(hù)與治理方便快捷，目標(biāo)明確，可操作性強(qiáng)等特點。

8、關(guān)鍵詞：網(wǎng)上鮮花銷售、鏈接、網(wǎng)頁、頁面設(shè)置前言隨著二十一世紀(jì)新興科技的飛速進(jìn)展，現(xiàn)在的電子信息產(chǎn)業(yè)正在經(jīng)受著一個巨大的挑戰(zhàn)，同時也面臨著一個重大的機(jī)遇。就目前的科技進(jìn)展水平而言，電子信息產(chǎn)業(yè)的進(jìn)展差不多不能夠滿足社會化大生產(chǎn)的要求，因此，各個國家集中人力、財力加大對信息技術(shù)產(chǎn)業(yè)的投入，以適應(yīng)目前需要?？上驳氖窃谶@幾十年的進(jìn)展中我們有了互聯(lián)網(wǎng)。互聯(lián)網(wǎng)加大了我們了解世界的眼界，縮緊了人與人之間的距離，這就更容易的使我們走上信息化的道路。隨著因特網(wǎng)技術(shù)的迅速進(jìn)展，各種各樣的網(wǎng)站差不多深入到日常生活的各個角落，越來越多的公司都建立了自己的網(wǎng)站，電子商務(wù)大行其道，個人網(wǎng)站也如雨后春筍般的進(jìn)展起來。因特網(wǎng)

9、的進(jìn)展?fàn)顩r能夠用日新月異來形容，通過電子商務(wù) 來完善對商品的采購就給人們的生活帶來了專門多方便。它節(jié)約了物流消耗和一般商務(wù)對時刻和地點的依靠。隨著人們生活水平的提高，人們越來越感性了，在不同的節(jié)日會選擇不同的花送給不同的人來表達(dá)不一樣的感情，以往人們差不多上自己到花店顯得專門苦惱，而且還白費時刻。正是因為人們的這些需求，越來越多的花店網(wǎng)站出現(xiàn)在網(wǎng)絡(luò)上，使人們能夠隨時了解自己想明白的鮮花方面的新聞，真正的做到足不出戶，便知天下事。把鮮花銷售與網(wǎng)絡(luò)連接起來，是今后鮮花銷售進(jìn)展的必定方向之一。第一部分 網(wǎng)站開發(fā)項目需求分析在網(wǎng)上花店系統(tǒng)中要緊涉及到花庫、會員、治理員、訂單等幾個模塊，其中，花庫模塊的

10、任務(wù)要緊是列出所有庫存的各種屬性，按照鮮花的作用以及適合的對象分類還與用戶選定鮮花后給出詳細(xì)屬性。因此我們不能憑空想象一個系統(tǒng)，而是通過考察現(xiàn)有的系統(tǒng)，再提出方案來?，F(xiàn)有的系統(tǒng)是信息的重要來源。顯然假如目前有一個系統(tǒng)正在被人使用，那么那個系統(tǒng)必定能完成某些有用的工作，因此新的目標(biāo)系統(tǒng)也必能完成它的差不多功能；另一方面，假如現(xiàn)有系統(tǒng)是完美無缺的，用戶自然可不能提出開發(fā)新系統(tǒng)的要求。但現(xiàn)在鮮花銷售要緊是通過人手工來完成的，如此不僅降低了工作效率，存在大量的重復(fù)勞動，而且容易出現(xiàn)人為的錯誤，如此的治理明顯不能與高效率、快節(jié)奏的生產(chǎn)模式相適應(yīng)，因此開發(fā)此系統(tǒng)是特不可行的方法。網(wǎng)上花店的一個專門大有點確

11、實是實現(xiàn)鮮花經(jīng)營者和鮮花消費者的互利。一方面，他能夠使鮮花經(jīng)營者盡可能的展現(xiàn)自己的鮮花種類，同時節(jié)約以往的占地空間成本，另外能夠使鮮花消費者為所欲為選購自己喜愛的鮮花，同時貨比三家，調(diào)血到自己認(rèn)為物美價廉的鮮花。網(wǎng)上花店系統(tǒng)要緊是進(jìn)行鮮花銷售的計算機(jī)軟件，從目前的鮮花銷售流程中，我們能夠發(fā)覺一些比較明顯的流程作業(yè)和治理需求。同時也為我們的系統(tǒng)分析提供了較好的依據(jù)。鮮花的查找和快捷的付費是網(wǎng)上花店系統(tǒng)的要緊部分，這兩個治理部分的完成是整個系統(tǒng)業(yè)務(wù)完成的基礎(chǔ)，其他的各項服務(wù)差不多上在此基礎(chǔ)上完成的。第二部分 花店開發(fā)的前期預(yù)備一、制作網(wǎng)頁的步驟再做網(wǎng)頁之前，我上網(wǎng)掃瞄了做網(wǎng)頁的五個步驟。1、確定網(wǎng)

12、站主題 ：網(wǎng)站主題確實是在建立網(wǎng)站時所要包含的要緊內(nèi)容，一個網(wǎng)站必須要有一個明確的主題。2、搜集材料 ：明確了網(wǎng)站的主題以后，就要圍繞主題開始搜集材料了。材料既能夠從圖書、報紙、光盤、多媒體上得來，也能夠從互聯(lián)網(wǎng)上搜集，然后把搜集的材料去粗取精，去偽存真，作為制作網(wǎng)頁的素材。3、規(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)頁之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有成竹。也只

13、有如此制作出來的網(wǎng)頁才能有個性、有特色，具有吸引力。4、選擇合適的制作工具 ：盡管選擇什么樣的工具并可不能阻礙設(shè)計網(wǎng)頁的好壞，然而一款功能強(qiáng)大、使用簡單的軟件往往能夠起到事半功倍的效果。5、制作網(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)頁時要多靈活運用模板，如此能夠大大提高制作效率。二、制作網(wǎng)頁的要素1、網(wǎng)頁

14、的整體布局設(shè)計 網(wǎng)頁設(shè)計作為一種視覺語言，要講究編排和布局。版式設(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、網(wǎng)頁設(shè)計中色彩的運用 色彩是藝術(shù)表現(xiàn)的要素之

15、一，在網(wǎng)頁設(shè)計中，依照和諧、均衡和重點突出的原則，將不同的色彩進(jìn)行組合、搭配來構(gòu)成漂亮的頁面。依照色彩對人們心理的阻礙，合理地加以運用，按照色彩的經(jīng)歷性原則，一般暖色比冷色的經(jīng)歷性更強(qiáng)一些。色彩還具有聯(lián)想與象征的特質(zhì)，如紅色象征血、太陽；藍(lán)色象征大海、天空和水面等。因此假如我們在對一家出售冷食的商店進(jìn)行虛擬店面的頁面設(shè)計時，應(yīng)使用淡雅而沉靜的顏色，使人心理上感受涼快一些，增強(qiáng)人們的購買心理，使得在線營銷得到專門好的實踐效果。另要注意的是網(wǎng)頁的顏色應(yīng)用雖沒有限制，但不能毫無克制地運用多種顏色，一般情況下，先依照總體風(fēng)格的要求定出一至二種主色調(diào)，在進(jìn)行網(wǎng)頁設(shè)計時，更應(yīng)該按照其中的VI進(jìn)行色彩運用。

16、在色彩的運用過程中，還應(yīng)注意的一個問題是：由于國家和種族、宗教和信仰的不同，以及生活的地理位置、文化修養(yǎng)的差異等，不同的人群對色彩的喜惡程度有著專門大的差異。在設(shè)計中要考慮眾多因素。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á)到比較好的效果。點、線、面作為視覺語言中的差不多元

17、素，要使用點、線、面的互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最佳的頁面效果。網(wǎng)頁設(shè)計中點、線、面的運用并不是孤立的，專門多時候都需要將它們結(jié)合起來，表達(dá)完美的設(shè)計意境。4.網(wǎng)站開發(fā)工具我所使用的軟件是Macromedia 公司推出的一款用于網(wǎng)頁設(shè)計的軟件dreamweaverCS3。Dreamweaver是建立 Web 站點和應(yīng)用程序的專業(yè)工具。它將可視布局工具、應(yīng)用程序開發(fā)功能和代碼編輯支持組合為一個功能強(qiáng)大的工具，使每個級不的開發(fā)人員和設(shè)計人員都可利用它快速創(chuàng)建界面吸引人同時基于標(biāo)準(zhǔn)的站點和應(yīng)用程序。從對基于 CSS 的設(shè)計提供領(lǐng)先的支持到手動編碼功能，Dreamweaver 在一個集成和高效的

18、環(huán)境中為專業(yè)人員提供了所需的工具。開發(fā)人員能夠?qū)⑵溥x擇的服務(wù)器技術(shù)與 Dreamweaver 配合使用，建立將用戶連接到數(shù)據(jù)庫、Web 服務(wù)和舊式系統(tǒng)的強(qiáng)大 Internet 應(yīng)用程序。Dreamweaver同意開發(fā)人員設(shè)計Web站點和為Internet應(yīng)用程序編寫代碼。Dreamweaver MX組合了聞名的可視排版工具Dreamweaver、快速Web應(yīng)用程序開發(fā)工具Dreamweaver的功能和Home Site的擴(kuò)展代碼編輯支持，形成了一個簡單易用且功能強(qiáng)大的開發(fā)環(huán)境。Dreamweaver MX為當(dāng)前的Web技術(shù)和標(biāo)準(zhǔn)提供完備而開放的解決方案，包括輔助功能和Web服務(wù)。其要緊特點是：

19、（1）方便的網(wǎng)站治理；Dreamweaver MX結(jié)合了其知名的可視化布局工具、Dreamweaver的快速web應(yīng)用程序開發(fā)功能以及Macromedia HomeSite的廣泛代碼編輯支持，因此它既是創(chuàng)建專業(yè)網(wǎng)站的最佳途徑，也是構(gòu)建強(qiáng)大Internet應(yīng)用程序的最簡便的方法。（2）無可比擬的操縱能力；實現(xiàn)對代碼和設(shè)計的全面操縱。利用Dreamweaver的可視化布局工具以及代碼編輯工具，您能夠以自己希望的方式建立所需的站點。在期間還用到了Flash、Photoshop等的軟件，使網(wǎng)站看起來更加生動美觀，更具有吸引力。 如圖1所示：圖1在主頁中所添加的Flash動畫代碼如下： 在主頁中所添加的

20、PhotoShop代碼如下： 情侶用花 生日用花 友情用花 會議用花 祝福用花 綜合用花 自助選花 靈活運用Div標(biāo)簽?zāi)軌蜃岉撁婵雌饋砀拥膫€性。第三部分 網(wǎng)上花店的總體設(shè)計在拿到客戶的需求講明后，并不是直接開始制作，而是先要對項目進(jìn)行總體設(shè)計，詳細(xì)設(shè)計出一份網(wǎng)站建設(shè)方案給客戶。總體設(shè)計是特不關(guān)鍵的一步。它要緊確定：網(wǎng)站需要實現(xiàn)哪些功能；網(wǎng)站開發(fā)使用什么軟件，在什么樣的硬件環(huán)境；需要多少人，多少時刻；需要遵循的規(guī)則和標(biāo)準(zhǔn)有哪些。同時需要寫一份總體規(guī)劃講明書，包括：網(wǎng)站的欄目和板塊；我網(wǎng)站的功能和相應(yīng)的程序；網(wǎng)站的鏈接結(jié)構(gòu)；假如有數(shù)據(jù)庫，進(jìn)行數(shù)據(jù)庫的概念設(shè)計；網(wǎng)站的交互性和用戶友好設(shè)計，在總體設(shè)

21、計出來后，一般需要給用戶一個網(wǎng)站建設(shè)方案。專門多網(wǎng)頁制作公司在接洽業(yè)務(wù)時就被客戶要求提供方案。那時的方案一般比較籠統(tǒng)，而且在用戶要求不是十分明確的情況下提交方案，往往和實際制作后的結(jié)果有專門大的差異。因此應(yīng)該盡量取得用戶的理解，在明確需求并總體設(shè)計后提交方案，如此對雙方都有益處。網(wǎng)站建設(shè)方案包括：客戶信息分析；網(wǎng)站需要實現(xiàn)的目的和目標(biāo)；網(wǎng)站形象講明；網(wǎng)站的欄目板塊和結(jié)構(gòu)；網(wǎng)站內(nèi)容的安排；相互之間鏈接關(guān)系；有用軟件、硬件和技術(shù)分析講明；開發(fā)時刻進(jìn)度表；宣傳推廣方案、維護(hù)方案、制作費用；本公司簡介；成功作品，技術(shù)，人才講明等。當(dāng)您的方案通過客戶的認(rèn)可，那么能夠開始動手制作網(wǎng)站了。但還不是真正意義上

22、的制作，你需要進(jìn)行詳細(xì)的分析設(shè)計。通過需求分析時期的工作，系統(tǒng)必須“做什么”差不多清晰了，現(xiàn)在是決定“如何樣做”的時候了?？傮w設(shè)計的差不多目的確實是回答“概括地講，系統(tǒng)應(yīng)該如何實現(xiàn)？”那個問題，用比較抽象的概括的方式確定系統(tǒng)如何完成預(yù)定的任務(wù)，也確實是講，應(yīng)該確定系統(tǒng)的物理配置方案，并確定系統(tǒng)的每個程序的結(jié)構(gòu)。首先需要進(jìn)行系統(tǒng)設(shè)計，從數(shù)據(jù)流圖動身設(shè)想完成系統(tǒng)功能的若干種合理的方案，分析員應(yīng)該認(rèn)真分析比較這些方案，同時和用戶共同選定一個最佳方案。然后進(jìn)行軟件結(jié)構(gòu)設(shè)計，確定軟件有哪些模塊組成以及這些模塊之間的調(diào)用關(guān)系。在系統(tǒng)的設(shè)計中，要注意分清計算機(jī)處理和手工處理的界限。信息系統(tǒng)是人機(jī)系統(tǒng)，系統(tǒng)目

23、標(biāo)的實現(xiàn)取決于這兩者的得結(jié)合，系統(tǒng)設(shè)計中要幸免一味地追求計算機(jī)處理，見許多只能由人工完成的工作交由計算機(jī)做，從而造成設(shè)計的復(fù)雜和不夠科學(xué)；也要幸免本該由計算機(jī)完成的工作交由人去處理，從而使新系統(tǒng)的功能、性能以及用戶的目標(biāo)得不到實現(xiàn)。一般采納模塊化原理來進(jìn)行軟件結(jié)構(gòu)的設(shè)計，如此能夠使整個系統(tǒng)設(shè)計簡易，結(jié)構(gòu)清晰，可讀性、可維護(hù)行增強(qiáng)，提高系統(tǒng)的可靠性，同時，也有利于信息系統(tǒng)開發(fā)工作的組織治理。所謂的模塊是指如此的一組程序語句（或描述），它包括輸入與輸出、邏輯功能描述、內(nèi)部環(huán)境及其運行環(huán)境。通常程序中的一個模塊完成一個適當(dāng)?shù)淖庸δ?。?yīng)該把模塊組織成良好的層次系統(tǒng)，頂層模塊調(diào)用它的下層模塊以實現(xiàn)程序的

24、完整功能，每個下層模塊再調(diào)用更下層的模塊，從而完成程序的每個子功能，最下層的模塊完成最具體的功能。在進(jìn)行軟件結(jié)構(gòu)設(shè)計時應(yīng)該遵循的要緊原理是模塊獨立原理，也確實是講，軟件應(yīng)該由一組完成相對獨立的子功能的模塊組成，這些模塊彼此之間的接口關(guān)系應(yīng)該盡量簡單。模塊間的關(guān)系如圖2所示：模塊1模塊1模塊2模塊3模塊4模塊5接口接口圖2第四部分 網(wǎng)上花店的版面設(shè)計一、設(shè)計首頁的第一步設(shè)計首頁的第一步是設(shè)計版面布局。就像傳統(tǒng)的報刊雜志編輯一樣，我們將網(wǎng)頁看做一張報紙，一本雜志來進(jìn)行排版布局。盡管動態(tài)網(wǎng)頁技術(shù)的進(jìn)展使得我們開始趨向于學(xué)習(xí)場景編輯，然而固定的網(wǎng)頁版面設(shè)計基礎(chǔ)已依舊是必須學(xué)習(xí)和掌握的。它們的差不多原理

25、是共通的，你能夠領(lǐng)會要點，舉一反三。版面指的是掃瞄器看到的完整的一個頁面（能夠包含框架和層）。因為每個人的顯示器分辨率不同，因此同一個頁面的大小可能出現(xiàn)640*480像素，800*600像素，1024*768像素等不同尺寸。布局，確實是以最適合掃瞄的發(fā)那個是將圖片和文字排放在頁面的不同位置。你可能注意到：“最適合”是一個不確定的形容詞，什么才是最適合的呢？抱歉的是我不能也不可能給您一個完整的正確的答案。就好比有人希望明白成功的秘訣是什么，成功者只能建議您用什么方法，什么途徑才能最容易獲得成功，而不可能有一步陳宮的“秘訣” 告訴您。我們在設(shè)計考慮系列文章第四篇講過站點整體的創(chuàng)意，版面布局意識一個

26、創(chuàng)意的問題，但要比站點整體的創(chuàng)意容易，有規(guī)律的多。二、草案新建頁面就像一張白紙，沒有任何表格，框架和約定俗成的東西，你能夠盡可能的發(fā)揮你的想象力，將你想到得“景象”畫上去（我們建議您用一張白紙和一只鉛筆，因此用作圖軟件PhotoShop等也能夠）。這屬于制造時期，不講究細(xì)膩公整，不必考慮細(xì)節(jié)功能，只以粗陋的線條購花出創(chuàng)意的輪廓即可。盡你的可能多畫幾張，最后選定一個中意的作為接著創(chuàng)作的腳本。三、布局過程中應(yīng)遵循的原則1、正常平衡亦稱“勻稱”。多指左右、上下對比形式，要緊強(qiáng)調(diào)秩序，能達(dá)到安定老實、信賴的效果。2、異常平衡即非對比形式，但也要平衡和韻律，因此差不多上不均整的，此種布局能達(dá)到強(qiáng)調(diào)性、不

27、安全性、高注目性的效果。3、對比所謂對比，不僅利用色彩、色調(diào)等技巧來作表現(xiàn)，在內(nèi)容上也可涉及古與今、新與舊、貧與富的對比。4、凝視所謂凝視是利用頁面中人物視線，使掃瞄者仿照跟隨的心理，已達(dá)到凝視頁面的效果，一般多用明星凝視狀。5、空白空白有兩種作用，一方面對其他網(wǎng)站表示突出卓越，另一方面也表示網(wǎng)頁品味的優(yōu)越感，這種表現(xiàn)方法對體現(xiàn)網(wǎng)頁的格調(diào)十分有效。6、盡量用圖片解講此法對不能用語言講服、或用語言無法表達(dá)的情感，特不有效。圖片解講的內(nèi)容，能夠傳達(dá)給掃瞄者的更多的心理因素。四、添加網(wǎng)頁文字我們開始制作網(wǎng)頁的正文?，F(xiàn)在光標(biāo)處在正文編輯區(qū)，和記事本一樣，我們輸入文字“我的網(wǎng)頁”。按住shift+回車進(jìn)

28、行換行，輸入一些這也講明文字接下來我們對文字進(jìn)行簡單地排版。先設(shè)置標(biāo)題文字的格式，將光標(biāo)定位在第一段，選中本段文字，在屬性面板中對文字進(jìn)行顏色、字體、字號和是否加粗的設(shè)置。如圖3所示：圖3在頁面中加入了滾動的圖片，即能夠讓頁面看起來具有動態(tài)的感受，符合現(xiàn)在人的審美特點，還能夠減少對頁面的占用，讓頁面看起來更加的簡潔，一目了然，然用戶看起來更方便快捷，可不能產(chǎn)生疲勞感。如圖4所示：圖4滾動圖片所用到的代碼如下： 五、添加超鏈接給文字建立超鏈接。打開所作頁面的其中一頁，然后選中導(dǎo)航欄里的任意一串文字，在屬性面板中點“鏈接”后面的文件夾圖標(biāo)“”，或者是用鏈接后面的“”直接連接在“文件”屬性欄中所顯示

29、的頁面，或者是在“鏈接”文本框中輸入鏈接目標(biāo)文件的路徑和文件名如：4.html；還能夠在代碼里直接編寫點代碼，代碼如下: 在設(shè)計視圖中按照以下的方法如圖5所示:圖5點確定，然后就能夠達(dá)到目的。六、插入Flash動畫在Dreamweaver中，能夠?qū)ｉT方便地插入Flash動畫、Gif動態(tài)圖片等，增加網(wǎng)頁的動感，做出來的網(wǎng)頁更吸引人。下面我們在網(wǎng)頁中插入一個Flash動畫。將光標(biāo)至于頁面底部，在菜單欄中單擊“插入記錄”在它的下拉列表中單擊“媒體”在選擇Flash然后打開如圖6所示的對話框，然后選擇一個swf文件，插入的Flash動畫顯示為一個灰色的方框，里面有Flash標(biāo)志。圖6假如想讓在掃瞄器中能夠顯示所作的頁面而不被Flash動畫的背景所遮蔽那么要選中所加的Flash動畫然后再其屬性面板中進(jìn)行設(shè)置，單擊“參數(shù)”按鈕會