1、先鋒軟件職業技術學院先鋒軟件職業技術學院 畢業設計（論文）畢業設計（論文）（20082008 屆）屆）題題 目目 個人網站（體育站）設計與實現個人網站（體育站）設計與實現系系 別別 軟件系軟件系 專專 業業 軟件設計與開發軟件設計與開發 班班 級級 0804 姓姓 名名 指導教師指導教師 2008 年 月 日2目目 錄錄第一章網站特點.51.1 網站構思 .51.2 開發工具的選用及介紹.5第章網站頁面規劃.82.1 頁面設計定義：.82.2 頁面設計要求：.82.3 頁面設計流程： .9第 3 章 網站頁面設計.103.1 設計需求 .103.2 網站結構 .103.3 頁面結構： .11第

2、章網站制作問題.224.1 常見問題.22參考文獻.23附錄或相關資料.24結束語.273致謝.284個人網站（體育站）設計與實現【摘要】面對日益加快的生活節奏和信息社會日新月異的變化，internet 的快速普及，上網者已經不再滿足于僅僅瀏覽網頁，而是希望更深入地參與到網絡中。假如想上一個體育的網站了解一下當天的足球戰報，那么我上網的目的性就是非常的明確，直接看足球的結果。那么考慮一下的上網過程就是先敲入網址，到主頁上，然后盡快的找到足球的欄目，再找到比分的鏈接。體育網站現已是網絡經濟的一匹黑馬。體育網站將成為網站中成功的佼佼者，豐富多彩的體育新聞會使你流連忘返。網頁內的體育新聞可以說是網站

3、構成的基本元素。組建體育網站先要規劃一個網站的整體結構，做到條理清晰，使瀏覽者不致迷路，同時還要使網頁美觀獨特，一目了然，優點。【關鍵詞】個人網站：頁面設計；dreamweaver；photoshop。5第第 1 1 章章 網站網站構思及相關技術構思及相關技術 如今 internet 飛速發展，互聯網成為人們快速獲取、發布和傳遞信息的重要渠道，它在人們政治、經濟、生活等各個方面發揮著重要的作用。internet 上發布信息主要是通過網站來實現的，獲取信息也是要在 internet“海洋”中按照一定的檢索方式將所需要的信息從網站上下載下來。因此網站建設在 internet 應用上的地位顯而易見，

4、它已成為政府、企事業單位信息化建設中的重要組成部分，從而倍受人們的重視。為了讓志同道合的人一起欣賞，一起研究，一起來探討，本論文就是介紹如何建設個人網站。1.11.1 網站構思網站構思該網站的特點：1. 建有自己特色的網站及內容。2. 結構層次協調且合理。3. 插入視頻、音頻文件使內容生動。4. 使用多種特效使頁面不顯得枯燥。1.21.2 開發工具的選用及介紹開發工具的選用及介紹dreamweaverdreamweaver mxmx 概述概述dreamweaver mx 是美國 macromedia 公司開發的集網頁制作和管理網站于一身的網頁編輯器, 與 firework mx 、flash

5、mx 一起，被人們喻為“網頁制作三劍客” 。隨著互聯網(internet)的 html 技術不斷發展和完善，我們身邊出現了很多種網頁編輯器，從網頁編輯器基本性質可以分為所見即所得網頁編輯器和非所見即所得網頁編輯器（則原始代碼編輯器） 。所見即所得網頁編輯器的優點就是直觀性，使用方便，容易上手，您在所見即所得網頁編輯器進行網頁制作和在 word 中進行文本編輯幾乎一樣。同frontpage 一樣，dreamweaver mx 就是第一套針對專業網頁設計師特別發展的可視化網頁開發工具，利用它可以輕而易舉地制作出跨越平臺限制的網頁。它能夠很好地支持 active x、javascript、java、

6、flash 和 shockwave 等，而且還能通過鼠標拖動的6方式從頭到尾制作動態的 html 效果。dreamweaver mx 還采用 roundtrip html 技術，使用這項技術，網頁可以在reamwaver mx 和 html 代碼編輯器之間進行自由轉換，而html 語法及結構不變。這樣，專業設計者可以在不改變原有的編輯習慣的同時，充分享受到“所見即所得”帶來的方便。dreamweaver mx 最具有挑戰性和生命力的是它的開放式設計，這項設計使任何人可以輕易擴展它的功能。dreamweaver mx 是一種全新概念的產品。利用它，開發人員、編程人員可以在多種服務器平臺上、在一個

7、軟件中完成支持幾種語言的動態網頁的開發，產生和編輯用asp（active server pages） 、jsp(java server pages)和 cold fusion 開發的 web 內容。由于 dreamweaver mx 是從低版本的 dreamweaver 環境衍生出來的，因此它也具有十分完美的 html、java script 功能。dreamweaver mx 的界面和工作環境比以前的 dreamweaver 版本更簡潔、更具彈性，dreamweaver mx 同樣具備了與 fireworks、flash 和 shockwave 緊密集成的諸多優點，以及使用 dreamwea

8、ver mx 的可擴展結構來擴展和定制 web 的功能。dreamweaver mx 大大加速了網絡時代電子交易應用中的項目交付。它提供了從網頁和表單動態生成到企業級的解決方案，如電子商店，庫存管理系統和企業內部局域網的數據庫應用等功能。基于 dreamweaver mx 的以上優點，所以我們在進行網站的頁面設計和頁面布局時采用這一軟件來完成的。fireworksfireworks概述概述fireworks 是一款用于網絡圖像設計和藝術處理的優秀應用軟件.它最大的優點在于解決了圖像設計和網絡應用的關鍵問題.fireworks 又是一個多才多藝的圖像和網頁設計工具.它強大的工具套餐使您在這一個軟

9、件里,可以獲得其他矢量圖像處理軟件和位圖圖像處理軟件所擁有的一些最好功能.您可以自由的在 fireworks 中編輯對象,對它們進行位圖效果的處理,例如添加斜角,光暈,陰影等,或者應用 photoshop 的濾鏡效果-當您在編輯的時候,這些效果會自動的實時添加,你可以隨時看到添加后的圖像效果.fireworks 的出現使得網頁設計師處理網絡圖像時,能從費力的在一大堆圖像處理7軟件間切換來切換去中解放出來.在圖像的編輯過程中,設計師可以隨時觀察圖像的效果,隨時返回以前的操作,非常的便捷.它的圖像優化功能使得創作的圖像既能獲得滿意的品質又能進行適當的壓縮,從而適合網絡的傳輸和顯示。8第章第章網站頁

10、面網站頁面規劃規劃2.12.1 頁面設頁面設計定義計定義網站結構：應該只為了實現一個目標而努力，引領你的訪問者從主頁訪問到站點中其它不同的頁面。導航結構：導航條的結構主要為了方便訪問者在各頁面之間進行切換。文本內容：相信人們會閱讀你頁面上的所有信息嗎？他們不會的，他們所做的事情就是“瀏覽” 。頁面設計時可摻入以下元素：1文本格式化：頁面本身對文本和字體的格式化能力并不強，在頁面中，可以指定文本尺寸、排列和其他的一些格式化屬性（序號列表和無序號列表） ，但建議不要改變字體，而應當使用缺省字體，你指定的字體在瀏覽者那里并不一定能夠找到，如果確實有必要少量使用某種特殊字體，可以把這些字體象素化變為圖

11、像，然后將圖像插入到頁面中。2按鈕、圖標和其他導航工具：可以幫助瀏覽者在頁面內導航。3背景：給頁面添加背景，包括紋理填充、水印式背景和長條狀背景等等，可以使得頁面更加美觀，給瀏覽者留下深刻的印象。4圖形：可加入圖片、圖表和圖形等。5表格：用來顯示按行和列組織的信息等。6顏色：包括圖片的色彩、文本和背景的色彩等。7多媒體元素：包括聲音、動畫、視頻片斷等。8頁面布局：在頁面上放置文本、圖形等元素，在元素間添加橫線條，空白等，并用表格、框架進行排版。2.22.2 頁面設計要求頁面設計要求2.2.1 簡潔：設計并不再現具體的物象和特征，它要表達的是一定的意圖和要求，在適當的環境里為人們所理解和接受。它

12、與繪畫有內在聯系，但又不同于繪畫，它以滿足人們的9實用和需求為目標，因而它比繪畫更單純，清晰和精確。頁面設計屬于設計的一種，同樣要求簡練，準確。2.2.2 一致性：一致性是表現一個站點的獨特風格的重要手段之一。要保持一致性，可以從頁面的排版下手，各個頁面使用相同的頁邊距。文本，圖形之間保持相同的間距。主要圖形，標題或符號旁邊留下相同的空白。如果在第一頁的頂部放置了公司標志，那么在其他各頁面都放上這一標志。如果使用圖標導航，則各個頁面應當使用相同的圖標。一致性還包括：頁面中的每個元素與整個頁面以及站點的色彩和風格上的一致性。2.2.3 對比度：使用對比是強調突出某些內容的最有效的辦法之一。好的對

13、比度使內容更易于辨認和接受。實現對比的方法很多，最常用的是使用顏色的對比。比如，內容提要和正文使用不同顏色的字體，內容提要使用藍色，而正文采用黑色；也可以使用大的標題，也即是面積上的對比；還可以使用圖像對比，題頭的圖像明確的向瀏覽者傳達本頁的主題，這里同樣需要注意的是鏈接的色彩，在設計頁面時我們常常會只注意到未被訪問的鏈接的色彩，而容易忽視訪問過的鏈接色彩將使得鏈接的文字難地辨認。2.32.3 頁面設計流程頁面設計流程1. web 上的內容包羅萬象，版式豐富多彩，但無論怎樣的變化，好的 web 站點總是有許多共同之處，例如：2. 精心組織的內容；3. 格式美觀的正文； 4. 和諧的色彩搭配；5

14、. 較好的對比度，使得文字具有較強的可讀性；6. 生動背景圖案； 7. 頁面元素大小適中，布局勻稱； 8. 不同元素之間留有足夠空白，給人視覺上休息的機會；9. 各元素之間保持平衡； 10. 文字準確無誤，無錯別字、無拼寫錯誤；102.42.4 頁面內容組織頁面內容組織有了好的內容，還必須知道如何更好地去表達它。現在網頁已從過去的“如何做網頁設計”的技術階段進入到“如何做好網頁設計”的提高階段。一個優秀的網站，除了含有豐富的內容之外，最重要的就是要有清晰的頁面布局。換句話說，要創造一個能吸引人們注意而且能保持吸引力的網站，必須是簡單明了的布局，可讀性強，并且能在瀏覽者心中建立信任感。有時在瀏覽

15、網頁時，特別是瀏覽一些內容豐富的大型網站的主頁時，常感覺到網頁的內容雖然既多且雜，但并不凌亂，反而顯得井然有序。這是因為在網頁上應用了表格進行排版。2.52.5 頁面設計要點頁面設計要點1. 構思出所建網站初步輪廓。2. 收集設計中所需求的資料及軟件。3. 準備好各類文件及文件夾位置、名字方便以后查找。4. 熟悉頁面設計中所用到的相關軟件及如何操作。11第第 3 3 章章 網站頁面設計網站頁面設計3.13.1 設計需求設計需求硬件需求：cpu：celeron（r）1.00ghz；內存：256mb。軟件需求：操作系統：windows xp 以上；需求軟件：dreamweaver、macromed

16、ia fireworks 8、photoshop；瀏覽器：ie8.0；分辨率：最佳效果 1024768。3.23.2 網站結構網站結構網站頁面采用靜態的方式，靜態主頁方式包括：1. 引頁：由一張圖片為主進入網站首頁。2. 首頁：由引頁進入后，可以一眼看出此網站主題風格及內容。首頁內容可以由導航條作出分類，其中可以包含：引頁、mylove（首頁）、我的相冊、各種收藏、心情日記、個人簡歷等。 3. 各級分頁：頁面色彩、背景須與首頁一致，以達到色彩統一，有層次感。此次做的是 個人球迷網站。這個網站主要的目的就是 針對個人愛好 進行了設計，并且加入了自我介紹，以方便訪問者了解我。總的來說，對于這個網站

17、我是很滿意的。從布局，選色，做圖還有文字都是我花了很多的時間。雖然不算專業性的網站，但是最后還是做成了，簡單有意義。結構圖12：首頁my love我的相冊各種收藏心情日記個人簡歷雁過留聲圖 3.1 主結構圖3.33.3 頁面結構頁面結構：頁面內容由：標題欄導航條公告欄日歷鏈接區正文信息等組成。以下的是我在做此網站期間認為比較不錯的頁面以及它的實現過程,在此貼出來給大家13欣賞下。3.3.1 引頁圖片如下：圖 3.2 引頁絲絲小雨，帶給我們多少溫柔與浪漫，這篇教程里，我們將會用 fireworks 里的運動模糊濾鏡來制作出絲小雨的動畫特效希望大家在網頁設計中能有幫助 第一步.先選擇一張做為背景的

18、圖片：圖 3.3 選則背景圖14第二步.轉換到層面板添加一個新圖層。圖 3.4 新建圖層第三步.選中第二層，回到圖片編輯窗口，用圖形工具在圖片上方拉出一個大出畫布，然后填充為黑色的長方形。圖 3.5 編輯畫布第四步.保持長方形選中的狀態，為其添加效果：效果雜點新增雜點，設置數量為：40015圖 3.6 新增雜點第五步.再為其添加濾鏡效果：濾鏡模糊運動模糊。圖 3.7 增加運動模糊第六步.接著調整它的透明度，這樣才能把背景顯示出來。圖 3.8 調整透明度第七步.這時候圖片有點像下雨的感覺吧。圖 3.9 顯示調整透明度后圖片第八步.要做成動態下雨的效果，下面就是關鍵步驟！轉到幀面板為長方形添加一幀

19、。16圖 3.10 插入幀第九步.調整該幀長方形的位置，虛線為本來的位置，藍線是調整后的位置。圖 3.11 調整幀位置第十步.重復 8-9 的步驟再添加一幀。 第十一步.最后，回到層面板，選擇背景所在的層，雙擊該層名稱在彈出的對話框中把“共享交疊層”項勾上，作品到此也就完成了。17圖 3.12 共享交疊層3.3.2 切換圖片：每隔 2 秒都會出現形式多變的圖片,既增添了網站的內容，又增添了不少色彩。3.13 圖片切換效果代碼如下： !- / bannerad var bannerad=new array(); var banneradlink=new array(); var adnum=0;

20、 bannerad0=picture/inter/a11.jpg; banneradlink0=#; bannerad1=picture/inter/a12.jpg; banneradlink1=#; bannerad2=picture/inter/a17.jpg; banneradlink2=#; bannerad3=picture/inter/a14.jpg; 18banneradlink3=#; bannerad4=picture/inter/a15.jpg; banneradlink4=#; bannerad5=picture/inter/a16.jpg; banneradlink5=

21、#; var preloadedimages=new array(); for (i=1;ibannerad.length;i+) preloadedimagesi=new image(); preloadedimagesi.src=banneradi; function settransition() if (document.all) banneradrotator.filters.revealtrans.transition=math.floor(math.random()*23); banneradrotator.filters.revealtrans.apply(); functio

22、n playtransition() if (document.all) banneradrotator.filters.revealtrans.play() function nextad() if(adnum nextad()3.3.3 導航條效果： 每次刷新頁面，所顯示的效果就不同，給人一種新穎的感覺。20圖 3.14 導航條效果代碼如下：首頁 西湖雨景 mylove 國際米蘭3.3.4 圖片鼠標效果：當鼠標放到圖片上后都會有凹凸不平的層次感。圖 3.15 圖片凹凸效果代碼如下： 22 圖片鼠標效果后續代碼：詳見附錄 23第章第章網站制作問題網站制作問題4.14.1常見問題常見問題 在這

23、此制作過程中，遇到的問題多種多樣，在老師、同學的幫助下終于得到解決。以下是經常遇見的問題：1. 在網頁制作中的，有時我們發現圖的高度和寬度值都被自動加粗顯示了，從而導致整個表格變形，出現這種情況的原因是我們操作不小心，改變了部分文字、圖片的大小、高度。圖 4-1 表格的改變2. 在 dreamweaver 中，插入空格需要在全角狀態下可以插入，半角狀態只能加一次微小的距離，但當用全角插入空格后卻與其余文字間位置不能對齊，須用全角半角之間轉換加空格來對齊。 把半角切換到全角圖 4.1 全角半角切換3. 設置表格虛線24設置表格虛線的方法有如下三種：方法一：作一個 1*2 的圖。半黑半白，再利用表

24、格作成線。這種方法雖然麻煩，但在任何瀏覽器中都可以瀏覽，兼容性最好。方法二：在 css 里面設定。在 css 面板里新建一個 style，選擇“redefine html tag” ，再在下拉菜單里選“table” ，在彈出的面板里，category 里選擇 border，在border 里，將 top,left,right,bottom 都設成 1px，邊框顏色可以設成你所需要的顏色。然后在 style 下拉框里選擇 dashed。確定以后所有的表格都會用虛線做邊框了。但是，這個效果只有在瀏覽器里才能看到。方法二只能在 ie5.5 里用，到了 netscape 里一點用處都沒有，除非你用做好的底圖填充。25參考文獻參考文獻1陳青dreamweaver mx 2004 標準案