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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

21、;　　引用時在網頁HTML代碼的<head>標記后用<link rel=“stylesheet” href=“example.css”>引用這個樣式文件，在<body>部分的相應內容的前后加上<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率領團隊進行開發(fā)。如今，jQuery已經成為最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。[2]</p><p>　　jQuery是

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

39、logo的制作基本相似，首先新建一個950*80的畫布，然后往畫布里導入一張找好的banner素材圖片，再往圖片上添加文字，并設置文字的字體、大小及顏色（效果如圖4-3）</p><p>　　圖 4-3 網站banner效果圖</p><p>　　4.3.3 站內圖片大小處理</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>　　天下體育網站主要內容是有關體育新聞方面的，我從網上下載了一些內容，加上自己對界面的設計，使得整個頁面

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

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

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中設置這個di

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

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>此結構的作用是用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、兩大模塊，兩個模塊布局相似都分為左、中、右三個部分。每個部分新聞標題用<P></P>和<a>< /a>標簽布局P標簽作為標題前的圖標，a標簽為模塊的標題。新聞列表我用<ul></ul>、<li></li>布局，下面是利用<P></P>標簽<a>< /a>和<ul></ul>

50、;、<li></li>做的“網球”這一部分的源碼：</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>放置整個選項卡內容設置寬度為360px高度為430px，<ul class="tab"></ul> 里面放置4個<li></li>用來制作四個選項部分，<

52、div class="tab_mo"> <div id="tab_mo_1"> </div></div>用來放置選項卡下面的內容。具體代碼如下：</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、　中部完成后，剩下一個網頁的頁腳foot部分。foot部分很簡單，先設置一個<div id=”foot”></div>，分別利用<P></P>標簽和<span></span>標簽完成頁腳文字的樣式，用<br />標簽換行，html代碼如下：</p><p>　　與上面html文檔匹配的部分外部CSS代碼：</p>&

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

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

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

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

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

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