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

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

2、，同時也方便了消費者，節(jié)省了他們的時間和精力，該論文要對系統(tǒng)開發(fā)中面臨的問題及其方案進行詳細設計和合理安排，根據(jù)所學知識進行實現(xiàn)。設計要求： 1.使用Dreamweaver開發(fā)軟件的開發(fā)技術，2.版主登錄，3.對新上市的鮮花進行及時的更新。設計時間：從 2011 年 11月 2 日至 2011 年 11 月 20 日 共 3 周 設計人員： 馬 慧 芳 學 號： 0911090214 指導教師： 楊 寅 老 師 2011年11月20日目 錄摘要5關鍵詞5前言6第一部分 網(wǎng)站開發(fā)項目需求分析6第二部分 花店開發(fā)的前期準備7一、制作網(wǎng)頁的步驟71、確定網(wǎng)站主題72、搜集材料73、規(guī)劃網(wǎng)站74、選擇

3、合適的制作工具75、制作網(wǎng)頁7二、制作網(wǎng)頁的要素71、網(wǎng)頁的整體布局設計72、網(wǎng)頁設計中色彩的運用83、網(wǎng)頁形式與內容相統(tǒng)一84.網(wǎng)站開發(fā)工具8第三部分 網(wǎng)上花店的總體設計14第四部分 網(wǎng)上花店的版面設計15一、設計首頁的第一步15二、草案15三、布局過程中應遵循的原則15四、添加網(wǎng)頁文字16五、添加超鏈接19六、插入Flash動畫20總結23致謝24參考文獻25摘要隨著因特網(wǎng)技術的迅速發(fā)展，各種各樣的網(wǎng)站已經深入到日常生活的各個角落，越來越多的公司都建立了自己的網(wǎng)站，電子商務大行其道，個人網(wǎng)站也如雨后春筍般的發(fā)展起來。因特網(wǎng)的發(fā)展狀況可以用日新月異來形容，通過電子商務來完善對商品的采購就給人

4、們的生活帶來了很多方便。它節(jié)省了物流消耗和一般商務對時間和地點的依賴。在這種形式之下，購買鮮花的人越來越多，也越來越廣，全國各地都有購買者。這么大的一個市場，只是利用實物店鋪是遠遠不夠的，雖只能滿足本地消費者的需求，但卻不能面向遠處的消費者需求。為了迎合市場的需求，為了開拓市場提高自身在同行中的競爭能力，開發(fā)一個網(wǎng)上鮮花銷售系統(tǒng)也是很有必要的。本網(wǎng)上花店系統(tǒng)，主要實現(xiàn)的功能是：實現(xiàn)用戶在線注冊功能、登錄功能、查詢功能、留言功能、定單等。在后臺能實現(xiàn)管理員的登錄、管理員對商品的分類發(fā)布、商品的管理、用戶信息的管理、訂單管理、管理員管理等。真正實現(xiàn)從商品的發(fā)布到商品的購買一系列的網(wǎng)上銷售鮮花的功能

5、。本系統(tǒng)基于Internet的互聯(lián)網(wǎng)網(wǎng)絡，使用Dreamweaver作開發(fā)平臺，利用網(wǎng)絡來實現(xiàn)網(wǎng)上銷售鮮花的功能性網(wǎng)站。具有最大的優(yōu)點是，界面優(yōu)美，可視性強，設計成本投入性小，利潤見效快，系統(tǒng)安全性好，系統(tǒng)維護與管理方便快捷，目標明確，可操作性強等特點。關鍵詞：網(wǎng)上鮮花銷售、鏈接、網(wǎng)頁、頁面設置前言隨著二十一世紀新興科技的飛速發(fā)展，如今的電子信息產業(yè)正在經受著一個巨大的挑戰(zhàn)，同時也面臨著一個重大的機遇。就目前的科技發(fā)展水平而言，電子信息產業(yè)的發(fā)展已經不能夠滿足社會化大生產的要求，因此，各個國家集中人力、財力加大對信息技術產業(yè)的投入，以適應目前需要?？上驳氖窃谶@幾十年的發(fā)展中我們有了互聯(lián)網(wǎng)?；ヂ?lián)

6、網(wǎng)加大了我們了解世界的眼界，縮緊了人與人之間的距離，這就更容易的使我們走上信息化的道路。隨著因特網(wǎng)技術的迅速發(fā)展，各種各樣的網(wǎng)站已經深入到日常生活的各個角落，越來越多的公司都建立了自己的網(wǎng)站，電子商務大行其道，個人網(wǎng)站也如雨后春筍般的發(fā)展起來。因特網(wǎng)的發(fā)展狀況可以用日新月異來形容，通過電子商務 來完善對商品的采購就給人們的生活帶來了很多方便。它節(jié)省了物流消耗和一般商務對時間和地點的依賴。隨著人們生活水平的提高，人們越來越感性了，在不同的節(jié)日會選擇不同的花送給不同的人來表達不一樣的感情，以往人們都是自己到花店顯得很麻煩，而且還浪費時間。正是因為人們的這些需求，越來越多的花店網(wǎng)站出現(xiàn)在網(wǎng)絡上，使人

7、們可以隨時了解自己想知道的鮮花方面的新聞，真正的做到足不出戶，便知天下事。把鮮花銷售與網(wǎng)絡連接起來，是今后鮮花銷售發(fā)展的必然方向之一。第一部分 網(wǎng)站開發(fā)項目需求分析在網(wǎng)上花店系統(tǒng)中主要涉及到花庫、會員、管理員、訂單等幾個模塊，其中，花庫模塊的任務主要是列出所有庫存的各種屬性，按照鮮花的作用以及適合的對象分類還與用戶選定鮮花后給出詳細屬性。當然我們不能憑空想象一個系統(tǒng)，而是通過考察現(xiàn)有的系統(tǒng)，再提出方案來?，F(xiàn)有的系統(tǒng)是信息的重要來源。顯然如果目前有一個系統(tǒng)正在被人使用，那么這個系統(tǒng)必定能完成某些有用的工作，因此新的目標系統(tǒng)也必能完成它的基本功能；另一方面，如果現(xiàn)有系統(tǒng)是完美無缺的，用戶自然不會提

8、出開發(fā)新系統(tǒng)的要求。但現(xiàn)在鮮花銷售主要是通過人手工來完成的，這樣不僅降低了工作效率，存在大量的重復勞動，而且容易出現(xiàn)人為的錯誤，這樣的管理明顯不能與高效率、快節(jié)奏的生產模式相適應，所以開發(fā)此系統(tǒng)是非?？尚械南敕ā＞W(wǎng)上花店的一個很大有點就是實現(xiàn)鮮花經營者和鮮花消費者的互利。一方面，他可以使鮮花經營者盡可能的展現(xiàn)自己的鮮花種類，并且節(jié)約以往的占地空間成本，另外可以使鮮花消費者隨心所欲選購自己喜歡的鮮花，并且貨比三家，調血到自己認為物美價廉的鮮花。網(wǎng)上花店系統(tǒng)主要是進行鮮花銷售的計算機軟件，從目前的鮮花銷售流程中，我們可以發(fā)現(xiàn)一些比較明顯的流程作業(yè)和管理需求。同時也為我們的系統(tǒng)分析提供了較好的依據(jù)。

9、鮮花的查找和快捷的付費是網(wǎng)上花店系統(tǒng)的主要部分，這兩個管理部分的完成是整個系統(tǒng)業(yè)務完成的基礎，其他的各項服務都是在此基礎上完成的。第二部分 花店開發(fā)的前期準備一、制作網(wǎng)頁的步驟再做網(wǎng)頁之前，我上網(wǎng)瀏覽了做網(wǎng)頁的五個步驟。1、確定網(wǎng)站主題 ：網(wǎng)站主題就是在建立網(wǎng)站時所要包含的主要內容，一個網(wǎng)站必須要有一個明確的主題。2、搜集材料 ：明確了網(wǎng)站的主題以后，就要圍繞主題開始搜集材料了。材料既可以從圖書、報紙、光盤、多媒體上得來，也可以從互聯(lián)網(wǎng)上搜集，然后把搜集的材料去粗取精，去偽存真，作為制作網(wǎng)頁的素材。3、規(guī)劃網(wǎng)站 ：一個網(wǎng)站設計得成功與否，很大程度上決定于設計者的規(guī)劃水平，規(guī)劃網(wǎng)站就像設計師設計

10、大樓一樣，圖紙設計好了，才能建成一座漂亮的樓房。網(wǎng)站規(guī)劃包含的內容很多，如網(wǎng)站的結構、欄目的設置、網(wǎng)站的風格、顏色搭配、版面布局、文字圖片的運用等，只有在制作網(wǎng)頁之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有成竹。也只有如此制作出來的網(wǎng)頁才能有個性、有特色，具有吸引力。4、選擇合適的制作工具 ：盡管選擇什么樣的工具并不會影響設計網(wǎng)頁的好壞，但是一款功能強大、使用簡單的軟件往往可以起到事半功倍的效果。5、制作網(wǎng)頁 ：材料有了，工具也選好了，下面就需要按照規(guī)劃一步步地把自己的想法變成現(xiàn)實了，這是一個復雜而細致的過程，一定要按照先大后小、先簡單后復雜來進行制作。所謂先大后小，就是說在制作網(wǎng)頁時

11、，先把大的結構設計好，然后再逐步完善小的結構設計。所謂先簡單后復雜，就是先設計出簡單的內容，然后再設計復雜的內容，以便出現(xiàn)問題時好修改。在制作網(wǎng)頁時要多靈活運用模板，這樣可以大大提高制作效率。二、制作網(wǎng)頁的要素1、網(wǎng)頁的整體布局設計 網(wǎng)頁設計作為一種視覺語言，要講究編排和布局。版式設計通過文字圖形的空間組合，表達出和諧與美。一個優(yōu)秀的網(wǎng)頁設計者也應該知道哪一段文字圖形該落于何處，才能使整個網(wǎng)頁生輝。多頁面站點頁面的編排設計要求把頁面之間的有機聯(lián)系反映出來，特別要處理好頁面之間和頁面內的秩序與內容的關系。尤其是我們在利用網(wǎng)頁效果體現(xiàn)在線營銷的意圖時，更要注意為了達到最佳的視覺表現(xiàn)效果，而講究整體

12、布局的合理性，比如一家生產型的企業(yè)，它所提供產品的名稱、類別、型號、價格、功能介紹應怎樣編排才能使瀏覽者有一個流暢的視覺體驗，從而方便他對產品的了解，促成最后的購買。 2、網(wǎng)頁設計中色彩的運用 色彩是藝術表現(xiàn)的要素之一，在網(wǎng)頁設計中，根據(jù)和諧、均衡和重點突出的原則，將不同的色彩進行組合、搭配來構成美麗的頁面。根據(jù)色彩對人們心理的影響，合理地加以運用，按照色彩的記憶性原則，一般暖色比冷色的記憶性更強一些。色彩還具有聯(lián)想與象征的特質，如紅色象征血、太陽；藍色象征大海、天空和水面等。所以如果我們在對一家出售冷食的商店進行虛擬店面的頁面設計時，應使用淡雅而沉靜的顏色，使人心理上感覺涼爽一些，增強人們的

13、購買心理，使得在線營銷得到很好的實踐效果。另要注意的是網(wǎng)頁的顏色應用雖沒有限制，但不能毫無節(jié)制地運用多種顏色，一般情況下，先根據(jù)總體風格的要求定出一至二種主色調，在進行網(wǎng)頁設計時，更應該按照其中的VI進行色彩運用。在色彩的運用過程中，還應注意的一個問題是：由于國家和種族、宗教和信仰的不同，以及生活的地理位置、文化修養(yǎng)的差異等，不同的人群對色彩的喜惡程度有著很大的差異。在設計中要考慮眾多因素。3、網(wǎng)頁形式與內容相統(tǒng)一要將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結構，形式語言必須符合頁面的內容，體現(xiàn)內容的豐富含義。運用對比與調和、對稱與平衡、節(jié)奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關

14、系建立整體的均衡狀態(tài)，產生和諧的美感。如對稱原則在頁面設計中，它的均衡有時會使頁面顯得呆板，但如果加入一些富有動感的文字、圖案，或采用夸張的手法來表現(xiàn)內容往往會達到比較好的效果。點、線、面作為視覺語言中的基本元素，要使用點、線、面的互相穿插、互相襯托、互相補充構成最佳的頁面效果。網(wǎng)頁設計中點、線、面的運用并不是孤立的，很多時候都需要將它們結合起來，表達完美的設計意境。4.網(wǎng)站開發(fā)工具我所使用的軟件是Macromedia 公司推出的一款用于網(wǎng)頁設計的軟件dreamweaverCS3。Dreamweaver是建立 Web 站點和應用程序的專業(yè)工具。它將可視布局工具、應用程序開發(fā)功能和代碼編輯支持組

15、合為一個功能強大的工具，使每個級別的開發(fā)人員和設計人員都可利用它快速創(chuàng)建界面吸引人并且基于標準的站點和應用程序。從對基于 CSS 的設計提供領先的支持到手動編碼功能，Dreamweaver 在一個集成和高效的環(huán)境中為專業(yè)人員提供了所需的工具。開發(fā)人員可以將其選擇的服務器技術與 Dreamweaver 配合使用，建立將用戶連接到數(shù)據(jù)庫、Web 服務和舊式系統(tǒng)的強大 Internet 應用程序。Dreamweaver允許開發(fā)人員設計Web站點和為Internet應用程序編寫代碼。Dreamweaver MX組合了著名的可視排版工具Dreamweaver、快速Web應用程序開發(fā)工具Dreamweav

16、er的功能和Home Site的擴展代碼編輯支持，形成了一個簡單易用且功能強大的開發(fā)環(huán)境。Dreamweaver MX為當前的Web技術和標準提供完備而開放的解決方案，包括輔助功能和Web服務。其主要特點是：（1）方便的網(wǎng)站管理； Dreamweaver MX結合了其知名的可視化布局工具、Dreamweaver的快速web應用程序開發(fā)功能以及Macromedia HomeSite的廣泛代碼編輯支持，因此它既是創(chuàng)建專業(yè)網(wǎng)站的最佳途徑，也是構建強大Internet應用程序的最簡便的方法。（2）無可比擬的控制能力； 實現(xiàn)對代碼和設計的全面控制。利用Dreamweaver的可視化布

17、局工具以及代碼編輯工具，您可以以自己希望的方式建立所需的站點。在期間還用到了Flash、Photoshop等的軟件，使網(wǎng)站看起來更加生動美觀，更具有吸引力。 如圖1所示：圖1在主頁中所添加的Flash動畫代碼如下：</script> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" width="1326" height="519"> <param name="movie" valu

18、e="背景/MotionD05.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <embed src="背景/MotionD05.swf" width="1326" height="519" quality="high" pluginspage=&quo

19、t; type="application/x-shockwave-flash" wmode="transparent"></embed> </object>在主頁中所添加的PhotoShop代碼如下： <tr> <td height="36" align="center" background="背景/1.jpg">&nbsp;</td> <td colspan="3" rowspan="

20、;4" valign="top"><a href="3.html"><img src="情侶用花/1.gif" width="68" height="70" border="0" /></a></td> <td height="12"></td> <td rowspan="7" valign="top" background

21、="背景/T1ESNlXk.CJ0OrtXjX1.gif"><!-DWLayoutEmptyCell->&nbsp;</td> </tr> <tr> <td height="3"></td> <td colspan="2" rowspan="2" valign="middle" nowrap="nowrap" class="STYLE3"><a href

22、="3.html">情侶用花</a></td> </tr> <tr> <td height="13"></td> <td colspan="3" rowspan="3" valign="top"><a href="5.html"><img src="生日用花/1.gif" width="68" height="70&qu

23、ot; border="0" /></a></td> </tr> <tr> <td height="29"></td> <td colspan="4" valign="middle" nowrap="nowrap"><span class="STYLE3"><a href="5.html">生日用花</a></span>

24、</td> </tr> <tr> <td height="2"></td> </tr> <tr> <td height="7"></td> <td colspan="3" rowspan="5" valign="top"><a href="1.html"><img src="友情用花/1.gif" width="

25、;68" height="70" border="0" /></a></td> </tr> <tr> <td height="26"></td> </tr> <tr> <td height="15"></td> <td colspan="3" rowspan="2" valign="top"><!-DWL

26、ayoutEmptyCell->&nbsp;</td> </tr> <tr> <td height="20"></td> <td colspan="4" rowspan="3" valign="middle" nowrap="nowrap"><span class="STYLE3"><a href="1.html">友情用花</a>&l

27、t;/span></td> </tr> <tr> <td colspan="6" rowspan="5" align="right" valign="middle" ><img src="背景/2.gif" width="400" height="74" /></td> <td height="2"></td> </tr>

28、<tr> <td height="1"></td> </tr> <tr> <td height="9"></td> </tr> <tr> <td height="46"></td> <td colspan="2" rowspan="3" valign="top"><a href="4.html"><

29、;img src="會議用花/1.gif" width="68" height="70" border="0" /></a></td> </tr> <tr> <td height="16"></td> <td colspan="3" rowspan="2" valign="middle" nowrap="nowrap"><

30、span class="STYLE3"><a href="4.html">會議用花</a></span></td> </tr> <tr> <td height="2"></td> </tr> <tr> <td colspan="4" rowspan="2" valign="top" background="背景/4.jpg"&

31、gt;<!-DWLayoutEmptyCell->&nbsp;</td> <td height="19"></td> <td rowspan="3" valign="top">&nbsp;<br /> <br /></td> </tr> <tr> <td height="10"></td> <td colspan="3" rowsp

32、an="4" valign="top"><a href="7.html"><img src="祝福用花/1.gif" width="68" height="70" border="0" /></a></td> </tr> <tr> <td height="17">&nbsp;</td> </tr> <tr>

33、; <td height="20">&nbsp;</td> </tr> <tr> <td height="23">&nbsp;</td> <td colspan="2" valign="middle" nowrap="nowrap"><span class="STYLE3"><a href="8.html">祝福用花</a>

34、;</span></td> <td>&nbsp;</td> </tr> <tr> <td height="17"></td> </tr> <tr> <td height="43"></td> <td colspan="2" rowspan="3" valign="top" background="拖動到一個文件以選取它"

35、><a href="7.html"><img src="慰問用花/1.gif" width="68" height="65" border="0" /></a></td> </tr> <tr> <td height="22"></td> <td colspan="4" valign="middle" nowrap="no

36、wrap"><span class="STYLE3"><a href="7.html">綜合用花</a></span></td> </tr><tr> <td height="5"></td> <td colspan="3" rowspan="4" valign="top"><a href="6.html">&l

37、t;img src="自助選花/1.gif" width="68" height="70" border="0" /></a></td> </tr> <tr> <td height="40"></td> </tr> <tr> <td height="20"></td> <td colspan="2" valign="

38、middle" nowrap="nowrap"><span class="STYLE3"><a href="6.html">自助選花</a></span></td> </tr> <tr> <td height="5"></td> </tr> <tr> <td height="62"></td> </tr>靈活運用D

39、iv標簽可以讓頁面看起來更加的個性。第三部分 網(wǎng)上花店的總體設計在拿到客戶的需求說明后，并不是直接開始制作，而是先要對項目進行總體設計，詳細設計出一份網(wǎng)站建設方案給客戶?？傮w設計是非常關鍵的一步。它主要確定：網(wǎng)站需要實現(xiàn)哪些功能；網(wǎng)站開發(fā)使用什么軟件，在什么樣的硬件環(huán)境；需要多少人，多少時間；需要遵循的規(guī)則和標準有哪些。同時需要寫一份總體規(guī)劃說明書，包括：網(wǎng)站的欄目和板塊；我網(wǎng)站的功能和相應的程序；網(wǎng)站的鏈接結構；如果有數(shù)據(jù)庫，進行數(shù)據(jù)庫的概念設計；網(wǎng)站的交互性和用戶友好設計，在總體設計出來后，一般需要給用戶一個網(wǎng)站建設方案。很多網(wǎng)頁制作公司在接洽業(yè)務時就被客戶要求提供方案。那時的方案一般比較

40、籠統(tǒng)，而且在用戶要求不是十分明確的情況下提交方案，往往和實際制作后的結果有很大的差異。所以應該盡量取得用戶的理解，在明確需求并總體設計后提交方案，這樣對雙方都有益處。網(wǎng)站建設方案包括：客戶信息分析；網(wǎng)站需要實現(xiàn)的目的和目標；網(wǎng)站形象說明；網(wǎng)站的欄目板塊和結構；網(wǎng)站內容的安排；相互之間鏈接關系；實用軟件、硬件和技術分析說明；開發(fā)時間進度表；宣傳推廣方案、維護方案、制作費用；本公司簡介；成功作品，技術，人才說明等。當您的方案通過客戶的認可，那么可以開始動手制作網(wǎng)站了。但還不是真正意義上的制作，你需要進行詳細的分析設計。經過需求分析階段的工作，系統(tǒng)必須“做什么”已經清楚了，現(xiàn)在是決定“怎樣做”的時候

41、了?？傮w設計的基本目的就是回答“概括地說，系統(tǒng)應該如何實現(xiàn)？”這個問題，用比較抽象的概括的方式確定系統(tǒng)如何完成預定的任務，也就是說，應該確定系統(tǒng)的物理配置方案，并確定系統(tǒng)的每個程序的結構。首先需要進行系統(tǒng)設計，從數(shù)據(jù)流圖出發(fā)設想完成系統(tǒng)功能的若干種合理的方案，分析員應該仔細分析比較這些方案，并且和用戶共同選定一個最佳方案。然后進行軟件結構設計，確定軟件有哪些模塊組成以及這些模塊之間的調用關系。在系統(tǒng)的設計中，要注意分清計算機處理和手工處理的界限。信息系統(tǒng)是人機系統(tǒng)，系統(tǒng)目標的實現(xiàn)取決于這兩者的得結合，系統(tǒng)設計中要避免一味地追求計算機處理，見許多只能由人工完成的工作交由計算機做，從而造成設計的復

42、雜和不夠科學；也要避免本該由計算機完成的工作交由人去處理，從而使新系統(tǒng)的功能、性能以及用戶的目標得不到實現(xiàn)。一般采用模塊化原理來進行軟件結構的設計，這樣可以使整個系統(tǒng)設計簡易，結構清晰，可讀性、可維護行增強，提高系統(tǒng)的可靠性，同時，也有利于信息系統(tǒng)開發(fā)工作的組織管理。所謂的模塊是指這樣的一組程序語句（或描述），它包括輸入與輸出、邏輯功能描述、內部環(huán)境及其運行環(huán)境。通常程序中的一個模塊完成一個適當?shù)淖庸δ?。應該把模塊組織成良好的層次系統(tǒng)，頂層模塊調用它的下層模塊以實現(xiàn)程序的完整功能，每個下層模塊再調用更下層的模塊，從而完成程序的每個子功能，最下層的模塊完成最具體的功能。在進行軟件結構設計時應該遵

43、循的主要原理是模塊獨立原理，也就是說，軟件應該由一組完成相對獨立的子功能的模塊組成，這些模塊彼此之間的接口關系應該盡量簡單。模塊間的關系如圖2所示：模塊1模塊2模塊3模塊4模塊5接口接口圖2第四部分 網(wǎng)上花店的版面設計一、設計首頁的第一步設計首頁的第一步是設計版面布局。就像傳統(tǒng)的報刊雜志編輯一樣，我們將網(wǎng)頁看做一張報紙，一本雜志來進行排版布局。雖然動態(tài)網(wǎng)頁技術的發(fā)展使得我們開始趨向于學習場景編輯，但是固定的網(wǎng)頁版面設計基礎已依然是必須學習和掌握的。它們的基本原理是共通的，你可以領會要點，舉一反三。版面指的是瀏覽器看到的完整的一個頁面（可以包含框架和層）。因為每個人的顯示器分辨率不同，所以同一個

44、頁面的大小可能出現(xiàn)640*480像素，800*600像素，1024*768像素等不同尺寸。布局，就是以最適合瀏覽的發(fā)那個是將圖片和文字排放在頁面的不同位置。你可能注意到：“最適合”是一個不確定的形容詞，什么才是最適合的呢？抱歉的是我不能也不可能給您一個完整的正確的答案。就好比有人希望知道成功的秘訣是什么，成功者只能建議您用什么方法，什么途徑才能最容易獲得成功，而不可能有一步陳宮的“秘訣” 告訴您。我們在設計思考系列文章第四篇講過站點整體的創(chuàng)意，版面布局意識一個創(chuàng)意的問題，但要比站點整體的創(chuàng)意容易，有規(guī)律的多。二、草案新建頁面就像一張白紙，沒有任何表格，框架和約定俗成的東西，你可以盡可能的發(fā)揮你

45、的想象力，將你想到得“景象”畫上去（我們建議您用一張白紙和一只鉛筆，當然用作圖軟件PhotoShop等也可以）。這屬于創(chuàng)造階段，不講究細膩公整，不必考慮細節(jié)功能，只以粗陋的線條購花出創(chuàng)意的輪廓即可。盡你的可能多畫幾張，最后選定一個滿意的作為繼續(xù)創(chuàng)作的腳本。三、布局過程中應遵循的原則1、正常平衡-亦稱“勻稱”。多指左右、上下對照形式，主要強調秩序，能達到安定誠實、信賴的效果。2、異常平衡-即非對照形式，但也要平衡和韻律，當然都是不均整的，此種布局能達到強調性、不安全性、高注目性的效果。3、對比-所謂對比，不僅利用色彩、色調等技巧來作表現(xiàn)，在內容上也可涉及古與今、新與舊、貧與富的對比。4、凝視-所

46、謂凝視是利用頁面中人物視線，使瀏覽者仿照跟隨的心理，已達到注視頁面的效果，一般多用明星凝視狀。5、空白-空白有兩種作用，一方面對其他網(wǎng)站表示突出卓越，另一方面也表示網(wǎng)頁品味的優(yōu)越感，這種表現(xiàn)方法對體現(xiàn)網(wǎng)頁的格調十分有效。6、盡量用圖片解說-此法對不能用語言說服、或用語言無法表達的情感，特別有效。圖片解說的內容，可以傳達給瀏覽者的更多的心理因素。四、添加網(wǎng)頁文字我們開始制作網(wǎng)頁的正文?，F(xiàn)在光標處在正文編輯區(qū)，和記事本一樣，我們輸入文字“我的網(wǎng)頁”。按住shift+回車進行換行，輸入一些這也說明文字接下來我們對文字進行簡單地排版。先設置標題文字的格式，將光標定位在第一段，選中本段文字，在屬性面板中

47、對文字進行顏色、字體、字號和是否加粗的設置。如圖3所示：圖3在頁面中加入了滾動的圖片，即可以讓頁面看起來具有動態(tài)的感覺，符合現(xiàn)在人的審美特點，還可以減少對頁面的占用，讓頁面看起來更加的簡潔，一目了然，然用戶看起來更方便快捷，不會產生疲勞感。如圖4所示：圖4滾動圖片所用到的代碼如下：<tr> <td height="250">&nbsp;</td> <td>&nbsp;</td> <marquee width="553" height="180" beha

48、vior="scroll" scrollamount="6" onmouseover=this.stop(); onmouseout=this.start();> <a href="友情用花/Sweet初戀1.html"><img src="友情用花/Sweet初戀1.jpg" alt="Sweet初戀" width="183" height="180" border=1 /> </a> <a href=&q

49、uot;友情用花/愛情合約.html"><img src="友情用花/愛情合約.jpg" alt="愛情合約" width="183" height="180" border=1 /> </a> <a href="友情用花/不變的誓言1.html"><img src="友情用花/不變的誓言1.jpg" alt="不變的誓言" width="183" height="18

50、0" border=1 /> </a> <a href="友情用花/粉色精靈1.html"><img src="友情用花/粉色精靈1.jpg" alt="粉色精靈" width="183" height="180" border=1 /> </a> <a href="友情用花/開心幸福1.html"><img src="友情用花/開心幸福1.jpg" alt="開心

51、幸福" width="183" height="180" border=1 /> </a> <a href="友情用花/一言一語1.html"><img src="友情用花/一言一語1.jpg" alt="一言一語" width="183" height="180" border=1 /> </a> <a href="友情用花/牽掛你的人是我1.html">&l

52、t;img src="友情用花/牽掛你的人是我1.jpg" alt="牽掛你的人是我" width="183" height="180" border=1 /> </a> <a href="友情用花/幸福女主角1.html"><img src="友情用花/幸福女主角1.jpg" alt="幸福女主角" width="183" height="180" border=1 />

53、</a> <a href="友情用花/心意1.html"><img src="友情用花/心意1.jpg" alt="心意" width="183" height="180" border=1 /> </a> <a href="友情用花/心靈的天使1.html"><img src="友情用花/心靈的天使1.jpg" alt="心靈的天使" width="183&q

54、uot; height="180" border=1 /> </a> <a href="友情用花/心里只有你1.html"><img src="友情用花/心里只有你1.jpg" alt="心里只有你" width="183" height="180" border=1 /> </a> <a href="友情用花/無限的愛1.html"><img src="友情用花/無限的愛1

55、.jpg" alt="無限的愛" width="183" height="180" border=1 /> </a> <a href="友情用花/我心永恒1.html"><img src="友情用花/我心永恒1.jpg" alt="我心永恒" width="183" height="180" border=1 /> </a> <a href="友情用花/甜心

56、公主1.html"><img src="友情用花/甜心公主1.jpg" alt="甜心公主" width="183" height="180" border=1 /> </a> <a href="友情用花/甜蜜的祝福1.html"><img src="友情用花/甜蜜的祝福1.jpg" alt="甜蜜的祝福" width="183" height="180" b

57、order=1 /> </a> <a href="友情用花/甜的問候1.html"><img src="友情用花/甜的問候1.jpg" alt="甜的問候" width="183" height="180" border=1 /> </a> <a href="友情用花/永遠美麗1.html"><img src="友情用花/永遠美麗1.jpg" alt="永遠美麗"

58、width="183" height="180" border=1 /> </a> <a href="友情用花/天天天藍1.html"><img src="友情用花/天天天藍1.jpg" alt="天天天藍" width="183" height="180" border=1 /> </a> </marquee> <td>&nbsp;</td> <td&

59、gt;&nbsp;</td> </tr>五、添加超鏈接給文字建立超鏈接。打開所作頁面的其中一頁，然后選中導航欄里的任意一串文字，在屬性面板中點“鏈接”后面的文件夾圖標“”，或者是用鏈接后面的“”直接連接在“文件”屬性欄中所顯示的頁面，或者是在“鏈接”文本框中輸入鏈接目標文件的路徑和文件名如：4.html；還可以在代碼里直接編寫點代碼，代碼如下: <tr> <td height="54"><a href="4.html"><img src="導航條/2.jpg" width="190" he