網(wǎng)頁設(shè)計靜態(tài)網(wǎng)站畢業(yè)論文

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

2、縮緊了人與人之間的距離，這就更容易的使我們走上信息化的道路。</p><p>　　伴隨通信技術(shù)和計算機網(wǎng)絡(luò)應(yīng)用技術(shù)的發(fā)展,人類已經(jīng)進(jìn)入了名副其實的網(wǎng)絡(luò)時代。體育信息是網(wǎng)絡(luò)信息的重要內(nèi)容,體育信息網(wǎng)絡(luò)化也有助于體育文化的傳播。信息網(wǎng)絡(luò)化促使體育信息傳播方式發(fā)生變革,其資源共享功能促進(jìn)了體育社會化;快速傳輸功能突破了時空限制,使得人們可以更快、更多地了解體育信息。</p><p>　　該網(wǎng)站通

3、過展示國際足球、國內(nèi)足球、NBA、CBA、羽毛球、網(wǎng)球、圖庫等頁面向用戶傳遞了體育信息和體育文化。網(wǎng)站制作工具主要為Dreamweaver8.0、Firewroks8.0和Phptoshop等，基于奧運會、中超、英超、NBA等國際性體育新聞為題材向用戶傳遞豐富多彩的體育新聞，并且為廣大體育愛好者提供了體育信息的交流、共享和學(xué)習(xí)的平臺。</p><p>　　論文首先介紹網(wǎng)站建設(shè)的相關(guān)知識，根據(jù)以上知識制作網(wǎng)站。其中

4、主要包括需求分析、詳細(xì)設(shè)計并圖文并茂的解釋說明。論文還包含網(wǎng)站制作過程中的源碼及圖片的截圖</p><p>　　關(guān)鍵字：Dreamweaver 體育網(wǎng)站 網(wǎng)站制作</p><p><b>　　第一章 緒論</b></p><p><b>　　1.1引言</b></p><p>　　在信息技術(shù)飛速發(fā)展

5、的今天，人們獲取信息的方式更多是來源于互聯(lián)網(wǎng)。而吸引瀏覽用戶的則是視覺效果出色、信息量豐富、使用起來便捷的網(wǎng)頁，所以網(wǎng)頁設(shè)計尤為重要。 互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟、生活等各個方面發(fā)揮著重要的作用。</p><p>　　網(wǎng)頁設(shè)計伴隨著網(wǎng)絡(luò)的快速發(fā)展而快速興起，作為上網(wǎng)的主要依托，由于人們使用網(wǎng)絡(luò)的頻繁而變得非常的重要。網(wǎng)頁講究的是排版布局，其功能主要就是提供一種形式給每個上

6、網(wǎng)者，讓他們能夠了解網(wǎng)站提供的信息。 面對日益加快的生活節(jié)奏和信息社會日新月異的變化，企業(yè)極需要一種快捷，便利的平臺來對外宣傳企業(yè)形象,介紹最新產(chǎn)品和及時售后服務(wù)。如何運用現(xiàn)代化信息技術(shù)完成這一目標(biāo)，建立“一座企業(yè)與顧客之間暢通無阻的大橋”已成為企業(yè)中應(yīng)該解決的重要課題之一，本網(wǎng)站正是為這一目標(biāo)設(shè)計制作的。 </p><p>　　1.2體育新聞網(wǎng)站現(xiàn)狀</p><p>　　一些發(fā)達(dá)國家在體

7、育領(lǐng)域的信息應(yīng)用系統(tǒng)建設(shè)和體育信息資源的開發(fā)利用方面取得了領(lǐng)先地位，已形成比較健全的信息采集、處理、保存和使用體系擁有一批綜合性數(shù)據(jù)庫，為其國民提供體育信息和相關(guān)服務(wù)。</p><p>　　例如美國實施《健康公民2000年》健身計劃，在全美51個州建立了目標(biāo)管理數(shù)據(jù)庫和高度現(xiàn)代化的信息網(wǎng)絡(luò)，政府可以全面了解全國任務(wù)地區(qū)的目標(biāo)實施計劃，國民可以隨時得到所需的健身信息和服務(wù)，歐共體17個國家通過對國民體育活動狀況進(jìn)行

8、多年跟蹤，建立了龐大的體育人口數(shù)據(jù)庫。而我國目前的體育信息網(wǎng)絡(luò)化傳播無論從規(guī)模，還是傳播速度上都與國外體育信息的網(wǎng)絡(luò)化發(fā)展存在一定的差距。因此，在國內(nèi)體育信息化角度上來說，開發(fā)體育網(wǎng)站對國內(nèi)體育信息網(wǎng)絡(luò)化傳播有很大影響。</p><p>　　第二章 開發(fā)工具及開發(fā)語言介紹</p><p>　　2.1 Dreamweaver簡介</p><p>　　Dreamweav

9、er 是美國MACROMEDIA 公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉的制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。</p><p>　　Dreamweaver是在網(wǎng)頁設(shè)計與制作領(lǐng)域中用戶最多、應(yīng)用最廣、功能最強大的軟件，隨著Dreamweaver 8的發(fā)布，更堅定Dreamweaver在該領(lǐng)域的地位。突出

10、的特點主要有靈活的編寫方式；可視化編輯界面；功能更多的CSS支持——CSS可視化設(shè)計、CSS檢查工具；動態(tài)跨瀏覽器驗證；強大的WEB站點管理功能；內(nèi)建的圖形編輯引擎；豐富的媒體支持能力等。</p><p>　　它將可視布局工具、應(yīng)用程序開發(fā)功能和代碼編輯支持組合在一起，其功能強大，使得各個層次的開發(fā)人員和設(shè)計人員都能夠快速創(chuàng)建界面吸引人的基于標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用程序。開發(fā)人員可以使用 Dreamweaver 及所選擇

11、的服務(wù)器技術(shù)來創(chuàng)建功能強大的 Internet 應(yīng)用程序，從而使用戶能連接到數(shù)據(jù)庫、Web 服務(wù)和舊式系統(tǒng)。開發(fā)環(huán)境支持HTML、ASP、ASP.NET、JSP等，提供眾多功能強大的可視化設(shè)計工具、應(yīng)用開發(fā)環(huán)境以及代碼編輯支持。主要用于素材整理、排版以及后臺程序的交互。</p><p>　　2.2 Fireworks 矢量圖處理</p><p>　　Fireworks是Macromedia

12、公司發(fā)布的一款專為網(wǎng)絡(luò)圖形設(shè)計的圖形編輯軟件，它大大簡化了網(wǎng)絡(luò)圖形設(shè)計的工作難度，無論是專業(yè)設(shè)計家還是業(yè)余愛好者，使用Fireworks都不僅可以輕松地制作出十分動感的GIF動畫，還可以輕易地完成大圖切割、動態(tài)按鈕、動態(tài)翻轉(zhuǎn)圖等，因此，對于輔助網(wǎng)頁編輯來說，F(xiàn)ireworks將是最大的功臣。</p><p>　　借助于 Macromedia Fireworks 8，您可以在直觀、可定制的環(huán)境中創(chuàng)建和優(yōu)化用于網(wǎng)頁的

13、圖像并進(jìn)行精確控制。Fireworks業(yè)界領(lǐng)先的優(yōu)化工具可幫助您在最佳圖像品質(zhì)和最小壓縮大小之間達(dá)到平衡。它與 Macromedia Dreamweaver 和 Macromedia Flash 共同構(gòu)成的集成工作流程可以讓您創(chuàng)建并優(yōu)化圖像，同時又能避免由于進(jìn)行 Roundtrip 編輯而丟失信息或浪費時間。利用可視化工具，無需學(xué)習(xí)代碼即可創(chuàng)建具有專業(yè)品質(zhì)的網(wǎng)頁圖形和動畫，如變換圖像和彈出菜單等。

14、</p><p>　　2.3 HTML簡史</p><p>　　HTML超文本標(biāo)記語言（Hypertext Markup Language） 網(wǎng)絡(luò)的資訊越來越多，網(wǎng)站須有引人注意的外觀，才能增加瀏覽人次，達(dá)到宣傳的目的。人們開始注意網(wǎng)頁的外觀，HTML亦因此變得更復(fù)雜、更具彈性。表格，原本是更整齊展現(xiàn)資料的工具，變成了排版工具。CSS的出現(xiàn)令以表格為基礎(chǔ)的外觀設(shè)計被視為過時。服務(wù)器方面的技

15、術(shù)亦改變了網(wǎng)絡(luò)的構(gòu)造，使用者可以選擇其瀏覽方式、外觀。Flash的出現(xiàn)為設(shè)計師和媒體創(chuàng)作人開創(chuàng)了新路。除了引人的外觀之外，亦有一個重要的考慮點：網(wǎng)絡(luò)無障礙，即使用者能否容易讀取資訊。 </p><p><b>　　基本結(jié)構(gòu)：</b></p><p>　　2.4 CSS樣式表概述</p><p>　　CSS是Cascading Style She

16、et 的縮寫，譯作“層疊樣式表單”。它是一種在網(wǎng)頁制作過程中經(jīng)常用到的技術(shù)。CSS樣式表其實是一組樣式，它增加了更多的樣式定義方法來輔助HTML。樣式就是用一個指定的名字來標(biāo)識和保存的一組有關(guān)字符和段落格式的選項集合。其實，我們很早就已經(jīng)與“樣式”打過交道了。在Word的“格式”菜單中的“樣式項”里，提供了多種樣式，如“標(biāo)題1”、“標(biāo)題2”、“正文”等。只要選定文字，然后選擇不同的樣式，所選定的文字就會自動改變字體、字號、對齊方式、字間

17、距等。同樣，我們可以通過CSS來規(guī)定網(wǎng)頁元素的各種樣式，如顏色、位置、大小等。</p><p>　　2.5 CSS樣式表在HTML中的實現(xiàn)</p><p>　　在HTML網(wǎng)頁中加入CSS并不是只有一種方法，在不同的情況下，可以采用不同的方法，比較常用的有下面幾中。</p><p>　　2.5.1 嵌入式樣式表</p><p>　　嵌入式樣式表

18、的實現(xiàn)很簡單，只需在每個要應(yīng)用樣式的HTML標(biāo)簽后寫上CSS屬性即可。例如要設(shè)置指定表格中的文字的樣式為紅色，字號為10pt，可在當(dāng)前表格的<table>標(biāo)記內(nèi)添加下面的代碼：</p><p>　　<table style=”color:red;font-size:10px”>。這種方式主要用于對具體的標(biāo)簽作具體的調(diào)整，其作用的范圍只限于本標(biāo)簽。嵌入式樣式表不能充分體現(xiàn)出CSS樣式表的優(yōu)越

19、性，所以應(yīng)用場合并不多。</p><p>　　2.5.2 內(nèi)聯(lián)式樣式表</p><p>　　若想只對當(dāng)前頁面應(yīng)用樣式，就要使用內(nèi)聯(lián)式樣式表。所謂內(nèi)聯(lián)式樣式表就是把樣式表定義語句放在標(biāo)簽<style type=”text/css”>和</style>中，設(shè)置時通常放在HTML代碼的<head>部分。</p><p>　　2.5.3

20、外聯(lián)式樣式表</p><p>　　外聯(lián)式樣式表是將指定的樣式代碼放到一個擴展名為.css的樣式文件中以方便其他網(wǎng)頁的調(diào)用。這種方式的優(yōu)點是可以通過一個.css文件管理網(wǎng)站中的多個網(wǎng)頁。如果要對網(wǎng)站中其他頁面進(jìn)行樣式引用，可以先把樣式用記事本定義成一個“.css”的文件。例如：打開記事本，將定義的名為h3的樣式代碼寫到記事本中，保存的文件名為example.css，代碼如下：</p><p>

21、;　　引用時在網(wǎng)頁HTML代碼的<head>標(biāo)記后用<link rel=“stylesheet” href=“example.css”>引用這個樣式文件，在<body>部分的相應(yīng)內(nèi)容的前后加上<h3>和</h3>。</p><p>　　2.6 JQuery概述</p><p>　　jQuery是一個兼容多瀏覽器的javascrip

22、t庫，核心理念是write less,do more。[1]jQuery在2006年1月由美國人John Resig在紐約的barcamp發(fā)布，吸引了來自世界各地的眾多javascript高手加入，現(xiàn)在由Dave Methvin率領(lǐng)團(tuán)隊進(jìn)行開發(fā)。如今，jQuery已經(jīng)成為最流行的javascript庫，在世界前10000個訪問最多的網(wǎng)站中，有超過55%在使用jQuery。[2]</p><p>　　jQuery是

23、免費、開源的，使用MIT許可協(xié)議。jQuery的語法設(shè)計可以使開發(fā)者更加便捷，例如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開發(fā)者編寫插件。其模塊化的使用方式使開發(fā)者可以很輕松的開發(fā)出功能強大的靜態(tài)或動態(tài)網(wǎng)頁。</p><p><b>　　第三章 需求分析</b></p><p>　　當(dāng)今世界,加

24、快推進(jìn)信息網(wǎng)絡(luò)化建設(shè)已成為世界各國的共識和努力方向。在信息網(wǎng)絡(luò)化日益發(fā)展的趨勢下,體育領(lǐng)域必然置身其中，更何況如今各種體育信息已成為網(wǎng)絡(luò)資源必不可少的一部分，世界各國倡導(dǎo)的信息網(wǎng)絡(luò)化應(yīng)用領(lǐng)域體育都占有一席之地并呈快速發(fā)展之勢。</p><p>　　西方發(fā)達(dá)國家很早就認(rèn)識到體育新聞網(wǎng)站對整個國家各項體育事業(yè)的發(fā)展的良好作用。所以國外的體育事業(yè)發(fā)展的比中國較好。國外的體育網(wǎng)站起步比中國較早，現(xiàn)在發(fā)展的也比較成熟。&l

25、t;/p><p>　　天下體育網(wǎng)為滿足廣大群眾瀏覽和了解體育信息類的新聞一直致力于把該網(wǎng)站做大做全做好，各個板塊都及時無誤的報道最新體育新聞，為用戶更快更全的了解體育信息搭起一座橋。</p><p>　　3.1 網(wǎng)站開發(fā)目的</p><p>　　對于體育網(wǎng)站而言，一個好的網(wǎng)頁會給人留下深刻的印象，那樣才會提高網(wǎng)站的知名度才會增加點擊率。如果通過網(wǎng)站管理系統(tǒng)工作，就可以拓

26、開以前傳統(tǒng)的宣傳思路，用戶可以通過上網(wǎng)就能達(dá)到找到所需要信息的目的。 </p><p>　　本設(shè)計簡單易用，可以提高時天下體育網(wǎng)站的知名度和形象；直接面對瀏覽所提供的信息化服務(wù)，改善服務(wù)水準(zhǔn)。</p><p><b>　　3.2 功能性需求</b></p><p>　　一個網(wǎng)站的設(shè)計是否成功，一方面是看主題的確定，另一個主要的方面就是設(shè)計者對于

27、各個板塊的設(shè)計規(guī)劃。網(wǎng)站規(guī)劃的內(nèi)容包括的很多，如網(wǎng)站的結(jié)構(gòu)，網(wǎng)站的布局，網(wǎng)站的風(fēng)格、網(wǎng)站的顏色搭配以及文字圖片的運用等。</p><p>　　本網(wǎng)站主要分為九個功能模塊,其主要為：首頁、國際足球、國內(nèi)足球、NBA、CBA、羽毛球、網(wǎng)球、圖庫和綜合新聞。</p><p>　　首頁：用戶瀏覽本站看到的第一個頁面，首頁主要包括其他幾個頁面的部分內(nèi)容。</p><p>　　

28、國際足球：主要介紹國際上的足球賽事新聞，其中又包括：英超、意甲、西甲、德甲和歐冠五個部分。</p><p>　　國內(nèi)足球：主要介紹中國的足球賽事新聞和各隊新聞，足球賽事包括：中超、中甲、足協(xié)杯、亞冠、國足和女足。各隊新聞包括山東魯能、廣州恒大、北京國安、天津泰達(dá)、上海申花5個模塊</p><p>　　NBA：主要有分為兩大板塊，全明星板塊和歐盟賽區(qū)，全明星板塊介紹了火箭、湖人、熱火、快船、

29、公牛、尼克斯球隊。歐盟板塊主要介紹西南區(qū)、東南區(qū)、太平洋區(qū)、西北賽區(qū)和中部賽區(qū)5個部分</p><p>　　CBA：主要介紹中國CBA以及中國籃球的相關(guān)新聞資訊。</p><p>　　羽毛球：主要介紹羽毛球世界錦標(biāo)賽和羽毛球世界聯(lián)賽兩大板塊。其中錦標(biāo)賽包括男單、女單、男雙、女雙、國羽和混合新聞5個模塊。世界聯(lián)賽介紹各個強國的羽毛球新聞。</p><p>　　網(wǎng)球：主

30、要分為兩大板塊分別為中國金花和網(wǎng)球大視野。中國金花介紹國內(nèi)羽毛球賽程和新聞，網(wǎng)球大視野主要介紹網(wǎng)球界的賽事，視頻及新聞。</p><p>　　綜合體育：主要介紹一些綜合的體育賽事新聞，如：棋牌、F1、臺球、排球等。在綜合體育下又包括： 網(wǎng)球、排球、乒羽、棋牌和F1五個部分。</p><p>　　圖庫：主要放置一些與體育有關(guān)的美圖，在其下包括有：滾動圖集、籃球圖集、足球圖集和網(wǎng)球圖集四個部分

31、。</p><p><b>　　如圖3-4所示：</b></p><p>　　3.3 非功能性需求</p><p><b>　?。?）界面需求</b></p><p>　　網(wǎng)站的界面要求設(shè)計的美觀大方，使瀏覽者有眼前一亮的感覺。網(wǎng)頁色調(diào)以藍(lán)色、橙色色為主色調(diào)，頁面寬度為950px，高度根據(jù)各個頁面內(nèi)

32、容而言，但不得少于兩屏。</p><p><b>　?。?）硬件環(huán)境需求</b></p><p>　　本網(wǎng)站在軟件環(huán)境方面的要求為：操作系統(tǒng)為Windows XP或Windows 7；瀏覽器為IE6.0及以上版本；開發(fā)工具是Dreamweaver 8和Fireworks。</p><p>　　本網(wǎng)站在硬件環(huán)境方面的要求為：處理器為酷睿I3以上；

33、內(nèi)存要大于等于1G；硬盤要大于250G。</p><p><b>　?。?）網(wǎng)站質(zhì)量要求</b></p><p>　　本網(wǎng)站的質(zhì)量要求為：保證網(wǎng)站運行的真確性，無鏈接錯誤、圖片顯示錯誤及其他運行錯誤；網(wǎng)站要求可靠性高、安全性高；網(wǎng)站設(shè)計合理、代碼無冗余、運行速度快；同時要求網(wǎng)站的導(dǎo)航欄目要清晰合理。</p><p><b>　　第四章

34、 詳細(xì)設(shè)計</b></p><p>　　4.1 網(wǎng)站的制作步驟</p><p>　　網(wǎng)站是網(wǎng)頁的集合，一個站點用的所有網(wǎng)頁構(gòu)成一個網(wǎng)站，網(wǎng)頁是網(wǎng)站的表現(xiàn)形式，網(wǎng)頁設(shè)計是指對網(wǎng)站整體頁面的設(shè)計，包括頁面風(fēng)格、配色、布局、內(nèi)容等。網(wǎng)頁設(shè)計包含的內(nèi)容非常多，大體分為兩個方面：一方面是純網(wǎng)站本身的設(shè)計，如文字、排版、圖片制作、平面設(shè)計、靜態(tài)圖文和動態(tài)聲音、影像等；另一方面是網(wǎng)站的延伸設(shè)

35、計，包括網(wǎng)站主題、瀏覽群的定位、智能交互、制作策劃、形象包裝和宣傳營銷等。</p><p><b>　　4.2 創(chuàng)建站點</b></p><p>　　1) 啟動Dreamweaver。</p><p>　　2) 打開“站點”菜單，選擇“新建站點”命令。如圖4-1：</p><p>　　3) 在文本框中，輸入一個名稱，該名

36、稱可以是任何所需的名稱。</p><p>　　4) 然后在下面的“本地跟目錄文件夾”和“默認(rèn)圖像文件夾”文本框中輸入本地網(wǎng)站預(yù)保存的路徑，單擊“確認(rèn)”按鈕。</p><p>　　5) 隨即在組合面板中點彈出“站點”面板，現(xiàn)在可以在其中添加頁面了。</p><p>　　6) 右鍵單擊“站點”面板中的根目錄，在彈出菜單中選擇“新建文件”命令，把新建文件的名稱改為“ind

37、ex.html”</p><p>　　7) 雙擊index.html，進(jìn)入頁面編輯狀態(tài)。</p><p>　　4.3 圖片素材的處理</p><p>　　4.3.1 網(wǎng)站logo的制作</p><p>　　(1)打開Fireworks→單擊“文件”，選擇“新建”→新建一個高為60px，寬為130px的畫布</p><p&g

38、t;　　(2)選擇“文本”工具→在畫布上輸入“天下體育”、“www.txtt.com”→給“天下體育”和“www.txtt.com”分別設(shè)置不同的字體和顏色→再將網(wǎng)站的圖片放在文字的左邊，形成了圖4-2的效果：</p><p>　　圖 4-2 網(wǎng)站logo效果圖</p><p>　　4.3.2 網(wǎng)站banner的制作</p><p>　　網(wǎng)站首頁banner的制作與

39、logo的制作基本相似，首先新建一個950*80的畫布，然后往畫布里導(dǎo)入一張找好的banner素材圖片，再往圖片上添加文字，并設(shè)置文字的字體、大小及顏色（效果如圖4-3）</p><p>　　圖 4-3 網(wǎng)站banner效果圖</p><p>　　4.3.3 站內(nèi)圖片大小處理</p><p>　　圖片素材的縮放主要是使用Fireworks軟件來處理的，具體操作步驟如

40、下：</p><p>　　(1)單擊“文件”選項→單擊“批處理”→選擇要修改的圖片→單擊“繼續(xù)”按鈕（如圖 4-4）</p><p>　　圖4-4選擇要縮放的圖片</p><p>　　(2)選擇你要處理的方法，如縮放→單擊“添加”按鈕→選擇縮放發(fā)方法→單擊“繼續(xù)”按鈕（如圖4-5）</p><p>　　圖4-5選擇縮放的類型</p>

41、;<p>　　(3)選擇文件存儲位置→單擊“批次”按鈕→單擊“完成”按鈕完成對圖片的處理（如圖4-6）</p><p>　　圖4-6選擇圖片縮放后的存儲位置</p><p><b>　　4.4 首頁制作</b></p><p>　　天下體育網(wǎng)站主要內(nèi)容是有關(guān)體育新聞方面的，我從網(wǎng)上下載了一些內(nèi)容，加上自己對界面的設(shè)計，使得整個頁面

42、都使用同一種色彩，當(dāng)然對于色彩這一塊，也是參照了各種參考資料進(jìn)行設(shè)計，既要做的不華麗又要顯得自然、大方得體。在這次網(wǎng)頁設(shè)計中，用到了一些圖片處理的工具，F(xiàn)ireworks處理了一些背景圖片，使得圖片與我的頁面的背景符合，現(xiàn)在重點談?wù)勎业氖醉摰闹谱鬟^程。</p><p>　　網(wǎng)站主頁主要采用靜、動相結(jié)合的方式，即靜態(tài)的主畫面和動態(tài)的Flash圖片想結(jié)合，體現(xiàn)體育網(wǎng)站新聞分類明顯，首頁被我劃分為頂部，Banner（L

43、ogo以及圖片）、導(dǎo)航、主體、底部等幾大模塊。網(wǎng)站首頁結(jié)構(gòu)如圖4-7所示：</p><p>　　4.4.1導(dǎo)航條及Logo效果制作</p><p>　　對于整個網(wǎng)站，主要采用Div布局，在布局中，把它當(dāng)做容器，在里面放入文本、圖片等，Div標(biāo)記中可以嵌套Div標(biāo)記，而且沒有層數(shù)的限制。運用網(wǎng)頁設(shè)計好的模板，然后在頂部和底部之間插入Div層作為編輯區(qū)域。下面就具體來看看導(dǎo)航的相關(guān)代碼：<

44、;/p><p>　　Html文檔部分代碼：</p><p>　　與上面html文檔匹配的部分外部CSS代碼：</p><p>　　效果如下圖 4-8所示</p><p>　　4.4.2 Banner效果制作</p><p>　　Banner制作很簡單，在html中寫一個div用來放Banner圖片，再在css中設(shè)置這個di

45、v的大小及屬性。</p><p>　　Banner部分html代碼：</p><p>　　與html文檔匹配的外部css代碼：</p><p>　　4.4.3 首頁圖片輪播特效</p><p>　　圖片輪播技術(shù)采用JQuery+div+css完成，此模塊結(jié)構(gòu)為左邊顯示圖片，右邊顯示4張縮略圖，鼠標(biāo)每移動一直縮略圖，左邊則會顯示大圖，圖片下面并

46、有文字描述，縮略圖每隔3秒自動切換到下一張。<div class="main">為整個div，<div class="mimg" id="mpc">為大圖顯示區(qū)域，<dl style="display:block"><dt></dt><dd><dd></dd>&l

47、t;/dl>此結(jié)構(gòu)的作用是用dt、dd顯示圖片下面的文字介紹。右邊縮略圖在<div id="tri"></div>里面用到了<ul><li></li></ul>方法，寬度為330px，高度230px，用float：left屬性處理了4幅圖上下排列的效果。</p><p>　　具體html代碼如下</p>

48、<p>　　與上面html文檔匹配的部分外部CSS代碼：</p><p>　　與上面html文檔JQuery代碼：</p><p>　　圖片輪播效果圖4-9：</p><p>　　圖 4-9 圖片輪播效果</p><p>　　4.4.4 中部新聞模塊制作</p><p>　　首頁中部又分為綜合體育、中國足球

49、兩大模塊，兩個模塊布局相似都分為左、中、右三個部分。每個部分新聞標(biāo)題用<P></P>和<a>< /a>標(biāo)簽布局P標(biāo)簽作為標(biāo)題前的圖標(biāo)，a標(biāo)簽為模塊的標(biāo)題。新聞列表我用<ul></ul>、<li></li>布局，下面是利用<P></P>標(biāo)簽<a>< /a>和<ul></ul>

50、;、<li></li>做的“網(wǎng)球”這一部分的源碼：</p><p>　　Html文檔部分代碼：</p><p>　　與上面html文檔匹配的部分外部CSS代碼：</p><p>　　以上html文檔代碼與css完成的效果如下圖4-9所示：</p><p>　　4.4.5 中部選項卡效果制作</p><

51、;p>　　首頁的“中國足球”中部的選項卡是用JavaScript+div+css制作。過程如下，在html頁面中用<div class="page"></div>放置整個選項卡內(nèi)容設(shè)置寬度為360px高度為430px，<ul class="tab"></ul> 里面放置4個<li></li>用來制作四個選項部分，<

52、div class="tab_mo"> <div id="tab_mo_1"> </div></div>用來放置選項卡下面的內(nèi)容。具體代碼如下：</p><p><b>　　Html部分代碼：</b></p><p>　　與上面html文檔匹配的部分外部CSS代碼：</p>

53、;<p>　　與上面html文檔JQuery代碼：</p><p>　　選項卡制作效果如圖4-10：</p><p>　　圖 4-10 選項卡效果圖</p><p>　　以同樣的布局方式完成了綜合體育、中國足球與之相同的模塊。效果圖4-10：</p><p>　　4.4.5首頁頁腳制作</p><p>　

54、　中部完成后，剩下一個網(wǎng)頁的頁腳foot部分。foot部分很簡單，先設(shè)置一個<div id=”foot”></div>，分別利用<P></P>標(biāo)簽和<span></span>標(biāo)簽完成頁腳文字的樣式，用<br />標(biāo)簽換行，html代碼如下：</p><p>　　與上面html文檔匹配的部分外部CSS代碼：</p>&

55、lt;p>　　效果圖如圖4-10所示：</p><p>　　圖4-10 首頁頁腳效果圖</p><p>　　4.4.6 首頁整體結(jié)構(gòu)制作</p><p>　　在上面分別介紹了首頁的頂部、logo和banner、導(dǎo)航條、主體部分、底部頁腳以及圖片輪播的制作過程，只要把它們分別寫入首頁的整體結(jié)構(gòu)中首頁基本就完成了。首頁的整體結(jié)構(gòu)的html代碼如下：</p&g

56、t;<p>　　在html代碼中籃球、國際足球、國內(nèi)足球和綜合體育的排版基本一致，因此代碼也基本一致。只要給它們添加相對應(yīng)的css代碼，首頁就基本實現(xiàn)了，添加css代碼后首頁的效果如圖4-11： </p><p>　　4.5 二級子頁面制作</p><p>　　二級頁面的布局是在首頁的框架下加以修改，定好css的內(nèi)容，增加和刪除一些各個頁面本身所需求的內(nèi)容圖片。</p&

57、gt;<p>　　國際足球頁面 圖 4-11：</p><p>　　4.6 綜合新聞頁面制作</p><p>　　綜合新聞頁面主要運用<ul><li>嵌套的方式完成新聞內(nèi)容的排版效果如圖 4-12：</p><p>　　4.7 三級頁面制作</p><p>　　三級頁面內(nèi)容簡單，只有圖片跟文字，所以在做的

58、時候先給圖片定好合適大小的div，再用<span>標(biāo)簽給文字進(jìn)行排版完成效果如下圖 4-13所示：</p><p>　　圖 4-13 三級頁面效果圖</p><p><b>　　第五章 網(wǎng)站測試</b></p><p>　　網(wǎng)頁做完之后往往不能馬上發(fā)布，還需要檢驗一下網(wǎng)頁之間的鏈接是否正確，文件是否冗余等，有時還需要掌握整個站點的結(jié)

59、構(gòu)以備日后的修改。編碼完成后就要對源程序進(jìn)行測試。</p><p>　　軟件測試的目的在于爭取在第一時間發(fā)現(xiàn)程序中的錯誤，以便于及時糾錯，增加軟件可靠性。它在整個系統(tǒng)設(shè)計實施過程中占有相當(dāng)?shù)姆至俊y試是軟件開發(fā)時期的最后一個階段，也是軟件質(zhì)量保證中至關(guān)重要的一個環(huán)節(jié)。 測試的目的是為了盡可能的發(fā)現(xiàn)程序中存在的錯誤，其任務(wù)就是消除網(wǎng)站故障，保證程序的可靠運行，最終把一個高質(zhì)量的網(wǎng)站系統(tǒng)交給用戶使用。一般來說在每個模

60、塊完成之后就要對它作必要的測試，這種測試被稱為單元測試，模塊的測試者也就是編寫者。編碼和單元測試屬于網(wǎng)站生命周期的同一階段。這個階段結(jié)束之后，對網(wǎng)站系統(tǒng)還應(yīng)該進(jìn)行各種綜合測試，這是網(wǎng)站生命周期的另一個獨立的階段，由專門的測試人員承擔(dān)。 </p><p>　　在網(wǎng)頁中的測試階段主要是對網(wǎng)站進(jìn)行瀏覽器兼容性測試。在網(wǎng)頁測試的階段我分別安裝了IE8、火狐等瀏覽器、360瀏覽器，并且進(jìn)行了逐個測試。在多次實踐中或多或少都