網(wǎng)頁設計大作業(yè)

網(wǎng)頁設計與制作報告書

課程名稱:網(wǎng)頁設計與制作

報告題目：幾米的空間

專業(yè)班級：旅管1002班

學號：100104110221

姓名：楊玉穎

指導教師：胡一波

目錄

一、開發(fā)背景

二、網(wǎng)頁設計技巧

三、網(wǎng)站結構

四、應用工具方案

五、頻道欄目劃分

六、測試

七、周期與成本估算

八、結論

摘要:

在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和

傳遞信息的重要渠道，它在人們政治、經濟、生活等各個方面發(fā)揮著

重要的作用。因此網(wǎng)站建設在Internet應用上的地位顯而易見，它已

成為政府、企事業(yè)單位信息化建設中的重要組成部分，從而倍受人們

的重視。

關鍵字：網(wǎng)頁制作；制作方法；設計要素；網(wǎng)頁測試

一、網(wǎng)頁制作開發(fā)背景

Dreamweaver以其功能強大、容易上手、界面親切而著稱。它采

用所見即所得的方式編輯網(wǎng)頁，利用它可以輕松的組織、編輯網(wǎng)頁并

將其發(fā)布到指定的站點上，而且在發(fā)布之后還能對更新情況進行監(jiān)控

以更新站點的內容?，F(xiàn)在流行的網(wǎng)頁制作軟件有很多，如Macromedia

公司的Dreamweaver%微軟公司的Dreamweaver%還有Adobe

Pagemill3.0--制作多框架，表單和Imagemap圖像的網(wǎng)頁工具、

Netscape等等。其中Dreamweaver更以其功能強大、容易上手、界

面親切而著稱。它采用所見即所得的方式編輯網(wǎng)頁，利用它可以輕松

的組織、編輯網(wǎng)頁并將其發(fā)布到指定的站點上，而且在發(fā)布之后還能

對更新情況進行監(jiān)控以更新站點的內容。工具準備好了，可根據(jù)你的

個人喜好來選擇一些素材，如圖片、喜歡的文章等。

二、網(wǎng)頁制作設計技巧

首先，我們來看一下創(chuàng)建一個只包含一個網(wǎng)頁的站點。選擇“文

件”菜單的“新建”選項，單擊“站點”命令，這時新建站點對話框就彈出

來了，在“指定新站點位置”文本框中輸入新站點的位置，單擊“只有一

個網(wǎng)頁的站點”圖標，單擊“確定”按鈕。這就建立好站點了，我們現(xiàn)在

來看一下新的站點里有什么，單擊“視圖”工具條的“文件夾”按鈕。在

文件夾列表里有一個網(wǎng)頁文件，名字叫做“index.html我們知道，每

一個站點都要有一個主頁，這個主頁也是一個網(wǎng)頁文件。瀏覽者訪問

站點時首先進入的就是站點的主頁。主頁的名字在一般情況下就叫做

11

index.htm"o就是說我們新建只包含一個網(wǎng)頁的站點時，

DREAMWEAVER就自動為我們創(chuàng)建了站點的主頁了。這個新建的站

點主頁時空的，我們可以向里面添加內容。

在文件列表里除了主頁之外，還有文件夾。新建站點時，

DREAMWEAVER都會在站點所在位置下新建兩個文件夾，一個是

"images”另一個是".private'：我們在編輯站點時可以在“image”文件夾

里放置站點用到的圖片。“private”文件夾比較特殊，其中的文件對瀏

覽者來說是隱含的，我們可以把一些不想讓瀏覽者看到的網(wǎng)頁文件放

在這個文件夾里，比如：我們可以在這個文件夾里存放注冊用戶的個

人信息。

盡管每一個站點都要有一個主頁，不過創(chuàng)建站點時我們仍然可以

從一個空站點開始：選擇“文件”菜單的“新建”命令，單擊“站點”選項，

在“新建站點”對話框里，我們可以選擇“空站點”圖標來創(chuàng)建一個空站

點?！靶陆ㄕ军c”對話框中還有許多其他圖標，這是DREAMWEAVER

提供的用來創(chuàng)建站點模板或向導。我們創(chuàng)建只有一個網(wǎng)頁的站點或者

創(chuàng)建空站點，都是從頭開始來創(chuàng)建一個站點，這就好像蓋房子一樣，

首先畫圖紙。然而，有許多的房子都具有相似的結構和用途，所以我

們可以用一張圖紙蓋很多相似的房子，這樣就節(jié)省了許多工作。

基于表格的設計：表格布局使網(wǎng)頁設計師制作網(wǎng)站時有了更多選

擇。在HTML中表格標簽的本意是為了顯示表格化的數(shù)據(jù)，但是設

計師很快意識到可以利用表格來構造他們設計的網(wǎng)頁，這樣就可以制

作較以往作品更加復雜的，多欄目的網(wǎng)頁。表格布局就這樣流行了起

來，融合了背景圖片切片技術，常給人以看起來較實際布局簡潔得多

的結構。

結構設計：這個時期的網(wǎng)頁設計還不太關注語義化和可用性方面

的問題，主要還在追求良好的結構美學。同一時期也是大量應用GIF

占位圖片控制留白的時期。一些主流的公司甚至訓練設計師如何使用

GIF占位;如微軟的“關于HTML表格中的GIF占位;第一批主要應

用表格布局的“所見即所得"網(wǎng)頁設計軟件的發(fā)展助長了表格的應用。

另外，某些軟件自動生成的表格如此復雜以至于許多設計師不可能從

頭手寫代碼（例如每行只有1px高卻包含了幾百列的表格）。即使是稍

微復雜一點兒的網(wǎng)頁（比如多欄目頁面），設計師們都要依賴于表格來

創(chuàng)建。

三、網(wǎng)站結構

網(wǎng)站結構是指網(wǎng)站中頁面間的層次關系;按性質可分為邏輯結構

及物理結構。網(wǎng)站結構對網(wǎng)站的搜索引擎友好性及用戶體驗有著非常

重要的影響。

（一）網(wǎng)站結構在決定頁面重要性（即頁面權重）方面起著非常關鍵

的作用。

（二）網(wǎng)站結構是衡量網(wǎng)站用戶體驗好壞的重要指標之一。清晰的

網(wǎng)站結構可以幫助用戶快速獲取所需信息;相反，如果一個網(wǎng)站的結構

極其糟糕的話，用戶在訪問時就猶如走進了一座迷宮，最后只會選擇

放棄瀏覽。

（三）網(wǎng)站結構還直接影響搜索引擎對頁面的收錄，一個合理的

網(wǎng)站結構可以引導搜索引擎從中抓取更多有價值的頁面。

網(wǎng)站結構對網(wǎng)站及網(wǎng)站中頁面的影響。搜索引擎對重要頁面的抓

取

由于互聯(lián)網(wǎng)中信息量極其龐大，為了向用戶展示更多有價值的信

息，搜索引擎會優(yōu)先抓取每個網(wǎng)站中相對重要的頁面（即權重較高的頁

面），然而，搜索引擎是怎樣發(fā)現(xiàn)這些重要頁面的呢？根據(jù)重要頁面的鏈

接指向的頁面可能是重要頁面的思路;搜索引擎首先會從權重相對較

高的頁面（即源頁面）出發(fā)跟蹤其中的鏈接，從而抓取其他相對重要的

頁面（即目標頁面）。

網(wǎng)頁設計的要素

四、應用工具方案

DreamWeaver自制動態(tài)HTML動畫的網(wǎng)頁。

DreamWeaver是一個很酷的網(wǎng)頁設計軟件，它包括可視化編輯、

HTML代碼編輯的軟件包，并支持ActiveX,JavaScript^Java、Flash、

ShockWave等特性而且它還能通過拖拽從頭到尾制作動態(tài)的HTML

動畫，支持動態(tài)HTML(DynamicHTML)的設計，使得頁面沒有plug-in

也能夠在Netscape和IE4.0瀏覽器中正確地顯示頁面的動畫。同時

它還提供了自動更新頁面信息的功能。

DreamWeaver還采用了RoundtripHTML技術。這項技術使得網(wǎng)

頁在DreamWeaver和HTML代碼編輯器之間進行自由轉換，HTML

句法及結構不變。這樣，專業(yè)設計者可以在不改變原有編輯習慣的同

時，充分享受到可視化編輯帶來的益處。DreamWeaver最具挑戰(zhàn)性

和生命力的是它的開放式設計，這項設計使任何人都可以輕易擴展它

的功能。

版面布局：在你開始設計之前，你必須仔細地為站點挑選色彩組

合。千萬不要出現(xiàn)紫色的背景加上黑藍色的文字的組合。要使整個站

點保持同一種色彩組合，因為不同顏色組合的背景或字體可能會是非

常令人討厭的。你也可以選用一個背景圖，而不是僅用一種顏色。背

景圖案可以自己繪制，也可以從因特網(wǎng)上下載。通過模糊背景圖案，

就可以使文字更容易被閱讀。要記住的是，圖片不會被瀏覽器重畫的，

而背景色彩則是要被重新畫的，因此，在上傳你的圖片之前，必須檢

查不同的瀏覽器是如何顯示這些網(wǎng)頁的。當增加文字時，盡量設置容

易被閱讀的字體和大小。如果你使用背景圖片，那么，當網(wǎng)頁被瀏覽

時，背景色和字體將會先于背景圖片被下載，因此，如果背景色和文

本的顏色沒有鮮明的對照的話，那么瀏覽者會有幾秒鐘的時間看到一

個充滿了不可閱讀的文本的網(wǎng)頁。解決這個問題的簡單的方法就是，

使背景色與背景圖的顏色相類似。

瀏覽導航：站點的瀏覽導航必須被設計成非常容易。如果需要，

把站點分割為幾個部分。最容易的方法，就是在整個網(wǎng)站的所有的網(wǎng)

頁的左邊放置一個菜單條。當然，除此以外，還有許多可選的方法。

對于具有大量信息的站點，使用一個可擴展的菜單條會是一個不錯的

選擇。無論你使用何種導航模式，在每一頁都放置一個主頁鏈接，那

會是一種不錯的設計思想；瀏覽者必須知道，無論何時，當他們迷失

在你的站點瀏覽中時，都可以通過簡單的一次點擊就能準確地知道目

前所處的位置。

Frame（幀,框架）的問題：Frame你也許會喜歡它，也許不喜

歡。如果你在你的網(wǎng)站上使用幀，你很可能使一個幀用于導航目的，

另一個幀用于放置內容。你可以看見在同一頁上有兩個被分割的瀏覽

窗口，你點擊左邊的幀，只會改變右邊的內容。用幀來組織網(wǎng)站的內

容，顯然是非常容易的。

檢驗你的HTML代碼：不要在你的網(wǎng)站上放置瀏覽計數(shù)器。計

數(shù)器會讓你的網(wǎng)站看起來不夠專業(yè)化，如果瀏覽量不夠的話，還會起

到相反的宣傳作用。最后，內容是金，如果能給的瀏覽者一些有價值

的東西，如，信息，建議，或軟件，那么就能吸引瀏覽者經常光顧你

的網(wǎng)站。為你的站點增加消息板和聊天室，從而提高網(wǎng)站的交互性，

使你和你的訪問者交流，讓訪問者彼此交流。

五、頻道欄目劃分

幾米空

六、測試

(-)功能測試

1、鏈接測試

鏈接是Web應用系統(tǒng)的一個主要特征，它是在頁面之間切換和

指導用戶去一些不知道地址的頁面的主要手段。鏈接測試可分為三個

方面。首先，測試所有鏈接是否按指示的那樣確實鏈接到了該鏈接的

頁面；其次，測試所鏈接的頁面是否存在；最后，保證Web應用系

統(tǒng)上沒有孤立的頁面，所謂孤立頁面是指沒有鏈接指向該頁面，只有

知道正確的URL地址才能訪問。

鏈接測試可以自動進行，現(xiàn)在已經有許多工具可以采用。鏈接測

試必須在集成測試階段完成，也就是說，在整個Web應用系統(tǒng)的所

有頁面開發(fā)完成之后進行鏈接測試。

2、表單測試

當用戶給Web應用系統(tǒng)管理員提交信息時，就需要使用表單操

作，例如用戶注冊、登陸、信息提交等。在這種情況下，我們必須測

試提交操作的完整性，以校驗提交給服務器的信息的正確性。例如：

用戶填寫的出生日期與職業(yè)是否恰當，填寫的所屬省份與所在城市是

否匹配等。如果使用了默認值，還要檢驗默認值的正確性。如果表單

只能接受指定的某些值，則也要進行測試。例如：只能接受某些字符，

測試時可以跳過這些字符，看系統(tǒng)是否會報錯。

3、Cookies測試

Cookies通常用來存儲用戶信息和用戶在某應用系統(tǒng)的操作，當

一個用戶使用Cookies訪問了某一個應用系統(tǒng)時,Web服務器將發(fā)送

關于用戶的信息把該信息以Cookies的形式存儲在客戶端計算機上，

這可用來創(chuàng)建動態(tài)和自定義頁面或者存儲登陸等信息。

如果Web應用系統(tǒng)使用了Cookies,就必須檢查Cookies是否

能正常工作。測試的內容可包括Cookies是否起作用，是否按預定的

時間進行保存，刷新對Cookies有什么影響等。

4、設計語言測試

Web設計語言版本的差異可以引起客戶端或服務器端嚴重的問

題，例如使用哪種版本的HTML等。當在分布式環(huán)境中開發(fā)時，開發(fā)

人員都不在一起，這個問題就顯得尤為重要。除了HTML的版本問題

外，不同的腳本語言，例如Java、JavaScript^ActiveX%VBScript

或Perl等也要進行驗證。

5、數(shù)據(jù)庫測試

在Web應用技術中，數(shù)據(jù)庫起著重要的作用，數(shù)據(jù)庫為Web應

用系統(tǒng)的管理、運行、查詢和實現(xiàn)用戶對數(shù)據(jù)存儲的請求等提供空間。

在Web應用中，最常用的數(shù)據(jù)庫類型是關系型數(shù)據(jù)庫，可以使用SQL

對信息進行處理。

在使用了數(shù)據(jù)庫的Web應用系統(tǒng)中，一般情況下，可能發(fā)生兩

種錯誤，分別是數(shù)據(jù)一致性錯誤和輸出錯誤。數(shù)據(jù)一致性錯誤主要是

由于用戶提交的表單信息不正確而造成的，而輸出錯誤主要是由于網(wǎng)

絡速度或程序設計問題等引起的，針對這兩種情況，可分別進行測試。

(-)可用性測試：

1、導航測試

導航描述了用戶在一個頁面內操作的方式，在不同的用戶接口控

制之間，例如按鈕、對話框、列表和窗口等；或在不同的連接頁面之

間。通過考慮下列問題，可以決定一個Web應用系統(tǒng)是否易于導航：

導航是否直觀？Web系統(tǒng)的主要部分是否可通過主頁存?。縒eb系

統(tǒng)是否需要站點地圖、搜索引擎或其他的導航幫助？

在一個頁面上放太多的信息往往起到與預期相反的效果。Web應

用系統(tǒng)的用戶趨向于目的驅動，很快地掃描一個Web應用系統(tǒng)，看

是否有滿足自己需要的信息，如果沒有，就會很快地離開。很少有用

戶愿意花時間去熟悉Web應用系統(tǒng)的結構，因此，Web應用系統(tǒng)導

航幫助要盡可能地準確。

導航的另一個重要方面是Web應用系統(tǒng)的頁面結構、導航、菜

單、連接的風格是否一致。確保用戶憑直覺就知道Web應用系統(tǒng)里

面是否還有內容，內容在什么地方。Web應用系統(tǒng)的層次一旦決定，

就要著手測試用戶導航功能，讓最終用戶參與這種測試，效果將更加

明顯。

2、圖形測試

在Web應用系統(tǒng)中，適當?shù)膱D片和動畫既能起到廣告宣傳的作

用，又能起到美化頁面的功能。一個Web應用系統(tǒng)的圖形可以包括

圖片、動畫、邊框、顏色、字體、背景、按鈕等。圖形測試的內容有：

(1)要確保圖形有明確的用途，圖片或動畫不要胡亂地堆在一起，

以免浪費傳輸時間。Web應用系統(tǒng)的圖片尺寸要盡量地小，并且要能

清楚地說明某件事情，一般都鏈接到某個具體的頁面。

(2)驗證所有頁面字體的風格是否一致。

(3)背景顏色應該與字體顏色和前景顏色相搭配。

(4)圖片的大小和質量也是一個很重要的因素，一般采用JPG或

GIF壓縮。

3、內容測試

內容測試用來檢驗Web應用系統(tǒng)提供信息的正確性、準確性和

相關性。

信息的正確性是指信息是可靠的還是誤傳的。例如，在商品價格

列表中，錯誤的價格可能引起財政問題甚至導致法律糾紛；信息的準

確性是指是否有語法或拼寫錯誤。這種測試通常使用一些文字處理軟

件來進行，例如使用MicrosoftWord的“拼音與語法檢查”功能；信息

的相關性是指是否在當前頁面可以找到與當前瀏覽信息相關的信息列

表或入口，也就是一般Web站點中的所謂“相關文章列表

4、整體界面測試

整體界面是指整個Web應用系統(tǒng)的頁面結構設計，是給用戶的

一個整體感。例如：當用戶瀏覽Web應用系統(tǒng)時是否感到舒適，是

否憑直覺就知道要找的信息在什么地方？整個Web應用系統(tǒng)的設計

風格是否一致？

對整體界面的測試過程，其實是一個對最終用戶進行調查的過程。

一般Web應用系統(tǒng)采取在主頁上做一個調查問卷的形式，來得到最

終用戶的反饋信息。對所有的可用性測試來說，都需要有外部人員(與

Web應用系統(tǒng)開發(fā)沒有聯(lián)系或聯(lián)系很少的人員)的參與，最好是最終

用戶的參與。

七、周期與成本估算

(-)一般來說，周期要經歷如下各個階段：

1?頁請求：頁請求發(fā)生在頁面生命周期開始之前，用戶請求頁時，

ASP.NET將確定是否需要分析和編譯頁

2.開始：在開始階段，將設置頁屬性，如Request和Response。

在此階段，頁還將確定請求是回發(fā)請求還是新請求，并設置

IsPostBack屬性

3.頁初始化：在頁初始化期間，可以使用頁中的控件，并設置每

個控件的UniquelD屬性。

4.加載：在加載期間，如果當前請求是回發(fā)請求，則將使用從視

圖狀態(tài)和控件狀態(tài)恢復的信息加載控件屬性。

5.驗證：在驗證期間，將調用所有驗證程序控件的Validate方法，

此方法將設置各個驗證程序控件和頁的IsValidate屬性。

6.回發(fā)事件處理：如果請求是回發(fā)請求，則將調用所有事件處理

程序

7.呈現(xiàn)：在呈現(xiàn)之前，會針對該頁和所有控件保存視圖狀態(tài)。在

呈現(xiàn)階段中，頁會針對每個控件調用Render方法，它會提供一個文

本編寫器，用于將控件的輸出寫入頁的Response屬性和

Outputstream中

8.卸載：完全呈現(xiàn)頁并將頁發(fā)送至客戶端、準備丟棄該頁后，將

調用卸載。此時，將卸載頁屬性并執(zhí)行清理。

（二）成本估算：大致的個人開發(fā)流程：

1.需求分析：制作為了什么。

2.概要分析：決定制作網(wǎng)頁后，確定網(wǎng)頁內容，欄目設置，大致

層次關系，頁面布局，彩色標準，文字格式等內容。

3.數(shù)據(jù)庫內容。

4.網(wǎng)頁體系設計：開始技術上實施，定義和命名相關目錄以及命

名慣例等。

5.Web界面設計以及web應用開發(fā)：開始設計網(wǎng)頁的首頁以及其

他二級界面，開發(fā)調試w