第三篇：網(wǎng)頁(yè)設(shè)計(jì)實(shí)驗(yàn)報(bào)告

網(wǎng)頁(yè)設(shè)計(jì)實(shí)驗(yàn)報(bào)告

本課程的設(shè)計(jì)目的是通過(guò)實(shí)踐使同學(xué)們經(jīng)歷Dreamweaver cs3開(kāi)發(fā)的全過(guò)程和受到一次綜合訓(xùn)練，以便能較全面地理解、掌握和綜合運(yùn)用所學(xué)的知識(shí)。結(jié)合具體的開(kāi)發(fā)案例，理解并初步掌握運(yùn)用Dreamweaver cs3可視化開(kāi)發(fā)工具進(jìn)行網(wǎng)頁(yè)開(kāi)發(fā)的方法；了解網(wǎng)頁(yè)設(shè)計(jì)制作過(guò)程通過(guò)設(shè)計(jì)達(dá)到掌握網(wǎng)頁(yè)設(shè)計(jì)、制作的技巧。了解和熟悉網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)和實(shí)現(xiàn)技巧。根據(jù)題目的要求，給出網(wǎng)頁(yè)設(shè)計(jì)方案，可以按要求，利用合適圖文素材設(shè)計(jì)制作符合要求的網(wǎng)頁(yè)設(shè)計(jì)作品。熟練掌握Photoshop cs3、Dreamweaver cs3等軟件的的操作和應(yīng)用。增強(qiáng)動(dòng)手實(shí)踐能力，進(jìn)一步加強(qiáng)自身綜合素質(zhì)。

1.課程設(shè)計(jì)題目

跑車(chē)世界，為了拉近人們與高端汽車(chē)的距離，讓人們更加的了解它們，我收集了一些關(guān)于汽車(chē)的知識(shí)，并通過(guò)網(wǎng)頁(yè)的形式展現(xiàn)在人們面前.2.總結(jié)

在這次的網(wǎng)頁(yè)設(shè)計(jì)中用到大量的布局，所以怎么樣建立布局是關(guān)鍵。Dreamweaver cs3是大多數(shù)人設(shè)計(jì)網(wǎng)頁(yè)的稱(chēng)手兵器，也是眾多入門(mén)者的捷徑。特別是其在布局方面的出色表現(xiàn)，更受青睞。大家都知道，沒(méi)有表格的幫助，很難組織出一個(gè)協(xié)調(diào)合理的頁(yè)面。通過(guò)這次網(wǎng)頁(yè)課程設(shè)計(jì)激發(fā)學(xué)習(xí)興趣，調(diào)動(dòng)學(xué)習(xí)的自覺(jué)性，自己動(dòng)腦、動(dòng)手，動(dòng)口，運(yùn)用網(wǎng)絡(luò)資源，結(jié)合教材及老師的指導(dǎo)，通過(guò)自身的實(shí)踐，創(chuàng)作出積聚個(gè)人風(fēng)格、個(gè)性的個(gè)人網(wǎng)頁(yè)。總體來(lái)說(shuō)，整個(gè)學(xué)期的學(xué)習(xí)過(guò)程，我學(xué)會(huì)了很多知識(shí)，在設(shè)計(jì)網(wǎng)頁(yè)的這幾天里，我充分利用了這次設(shè)計(jì)的機(jī)會(huì)，全心全意投入到網(wǎng)頁(yè)世界，去不斷的學(xué)習(xí)，去不斷的探索；同時(shí)去不斷的充實(shí)，去不斷的完善自我，在網(wǎng)絡(luò)的天空下逐漸的美化自己的人生！做好頁(yè)面，并不是一件容易的事，它包括個(gè)人主頁(yè)的選題、內(nèi)容采集整理、圖片的處理、頁(yè)面的排版設(shè)置、背景及其整套網(wǎng)頁(yè)的色調(diào)等很多東西。本次課程設(shè)計(jì)不是很好，頁(yè)面過(guò)于簡(jiǎn)單，創(chuàng)新意識(shí)反面薄弱，這是我需要提高的地方。需要學(xué)的地方還有很多，需要有耐心、堅(jiān)持，不斷的學(xué)習(xí)，綜合運(yùn)用多種知識(shí)，才能設(shè)計(jì)出好的web頁(yè)面。總體來(lái)說(shuō)，通過(guò)這次的對(duì)網(wǎng)頁(yè)課程設(shè)計(jì)，有收獲也有遺憾、不足的地方，但我想，我已經(jīng)邁入了網(wǎng)頁(yè)設(shè)計(jì)的大門(mén)，只要我再認(rèn)真努力的去學(xué)習(xí)，去提高，憑借我對(duì)網(wǎng)頁(yè)設(shè)計(jì)的熱情和執(zhí)著，我將來(lái)設(shè)計(jì)出的網(wǎng)頁(yè)會(huì)更加專(zhuān)業(yè)，更完善。感謝老師、同學(xué)在這次課程設(shè)計(jì)中給我的幫助、指導(dǎo)

第四篇：2009-2010-1網(wǎng)頁(yè)與Web程序設(shè)計(jì)實(shí)驗(yàn)報(bào)告

武漢大學(xué)計(jì)算中心2007年5月

《網(wǎng)頁(yè)與Web程序設(shè)計(jì)》實(shí)驗(yàn)報(bào)告

年級(jí)：2008級(jí)（必修）

學(xué)號(hào)：20080307703117姓名：郝嫚專(zhuān)業(yè)：金融管理與實(shí)務(wù)3班

一、實(shí)驗(yàn)題目

分析或參考給定的“網(wǎng)站設(shè)計(jì)實(shí)例”，設(shè)計(jì)一個(gè)自選題材的網(wǎng)站。

說(shuō)明：

1．自行設(shè)計(jì)的網(wǎng)站可以只包含靜態(tài)網(wǎng)頁(yè)（.htm），也可以包含動(dòng)態(tài)網(wǎng)頁(yè)(.asp)。

2．站點(diǎn)至少要有三層結(jié)構(gòu)，頁(yè)面數(shù)5頁(yè)左右；網(wǎng)頁(yè)要有落款、版權(quán)說(shuō)明。網(wǎng)站大小不要超過(guò)10MB。

3．在網(wǎng)站制作過(guò)程中或完成后，填寫(xiě)下面“

五、實(shí)驗(yàn)步驟”里的省略號(hào)部分。

二、實(shí)驗(yàn)?zāi)康暮鸵?/p>

通過(guò)以前各章的學(xué)習(xí)和實(shí)驗(yàn)，同學(xué)們已經(jīng)了解和初步掌握一系列的網(wǎng)頁(yè)與Web程序設(shè)計(jì)技術(shù)。本實(shí)驗(yàn)?zāi)苁勾蠹覍?duì)網(wǎng)站設(shè)計(jì)的全過(guò)程，有一個(gè)更加完整的概念，熟練掌握網(wǎng)站設(shè)計(jì)工具“網(wǎng)頁(yè)設(shè)計(jì)三劍客”。具體要求如下：

1．自選題材，主題內(nèi)容要合法、健康、實(shí)用。網(wǎng)站主題突出、內(nèi)容豐富。

2．自己動(dòng)手獨(dú)立完成網(wǎng)站設(shè)計(jì)?？梢越梃b和模仿某個(gè)網(wǎng)站進(jìn)行設(shè)計(jì)與制作，但不可以從網(wǎng)上下載網(wǎng)頁(yè)直接上交。

3．站點(diǎn)應(yīng)當(dāng)設(shè)計(jì)合理，結(jié)構(gòu)分明，管理有序，無(wú)多余文件和文件夾，大小合適。文件和文件夾存放位置要正確，首頁(yè)文件名應(yīng)該使用index.htm、index.asp、default.htm或default.asp。其他文件或文件名命名也要規(guī)范，不宜使用漢字或帶有空格的名稱(chēng)。

4．網(wǎng)站風(fēng)格統(tǒng)一，設(shè)計(jì)適合于主題的LOGO（徽標(biāo)），或者標(biāo)題圖片及動(dòng)畫(huà)。各頁(yè)面設(shè)計(jì)合理、美觀，有創(chuàng)意。不要太花哨或太孩子氣，不要只是各種元素的隨意拼湊。圖片和動(dòng)畫(huà)選用要適合主題，不要在網(wǎng)頁(yè)中插入不相干的圖片，圖片保存格式和圖片大小要合適。要適用于各種顯示器的分辨率，不要太寬，否則在顯示器分辨率較小時(shí)會(huì)出現(xiàn)水平滾動(dòng)條。

5．各個(gè)頁(yè)面之間的鏈接要合理有效，路徑要正確（使用相對(duì)路徑）。要合理使用css樣式，不要在各個(gè)頁(yè)面中重復(fù)定義相同的css樣式；應(yīng)該將css樣式存放到css文件中，然后附加即鏈接到各頁(yè)中。代碼結(jié)構(gòu)清晰，無(wú)垃圾代碼。

三、實(shí)驗(yàn)方法

網(wǎng)站設(shè)計(jì)的一般過(guò)程或方法如下：

1．確定主題和收集資料

自行選定所要設(shè)計(jì)的網(wǎng)站主題和欄目，收集有關(guān)圖文、數(shù)據(jù)等資料，經(jīng)過(guò)分析，初步確定網(wǎng)站的基本功能、結(jié)構(gòu)或三級(jí)目錄。

2．規(guī)劃網(wǎng)站和新建站點(diǎn)

在需求分析的基礎(chǔ)上，畫(huà)出網(wǎng)站的樹(shù)型目錄結(jié)構(gòu)圖，從網(wǎng)站根文件夾，子文件夾到文件名。首頁(yè)文件名如index.htm，應(yīng)該放在網(wǎng)站根文件夾里。根據(jù)Windows的“管理工具”中是否已安裝IIS，用Dreamweaver 8，在C:Inetpubwwroot或者D:里，新建站點(diǎn)，即根文件夾，子文件夾或文件名。隨時(shí)在U盤(pán)上做好備份。

3．制作素材和單個(gè)網(wǎng)頁(yè)

用“網(wǎng)頁(yè)設(shè)計(jì)三劍客”自行制作或者收集網(wǎng)站要使用的小圖片、動(dòng)畫(huà)、音頻或視頻，制作單個(gè)網(wǎng)頁(yè)文件及其鏈接，以及按需要建立數(shù)據(jù)庫(kù)。按照規(guī)劃，一一放在網(wǎng)站的相應(yīng)子文件夾里。

4．制作首頁(yè)和建立鏈接

制作首頁(yè)，并且建立與下一級(jí)網(wǎng)頁(yè)的鏈接（若受網(wǎng)站大小限制且超過(guò)5頁(yè)，則可建立必要的空連接）。

5．調(diào)試運(yùn)行

可以邊設(shè)計(jì)邊調(diào)試，也可以邊調(diào)試邊修改前面的設(shè)計(jì)。然后，正式運(yùn)行和提交網(wǎng)站。

四、實(shí)驗(yàn)環(huán)境

微機(jī) + Windows操作系統(tǒng)(含IIS)+ Fireworks 8 + Flash 8 + Dreamweaver 8 + Access。

五、實(shí)驗(yàn)步驟

請(qǐng)?zhí)顚?xiě)網(wǎng)站分析與設(shè)計(jì)的實(shí)驗(yàn)步驟。

（一）分析給定的“網(wǎng)站設(shè)計(jì)實(shí)例”

1．該網(wǎng)站的樹(shù)型目錄或站點(diǎn)結(jié)構(gòu)圖（如圖1）：

……

圖1 實(shí)例網(wǎng)站的樹(shù)型目錄或站點(diǎn)結(jié)構(gòu)

2．在該網(wǎng)站首頁(yè)上“插入”大標(biāo)題圖片和動(dòng)畫(huà)文件的操作步驟：

……

3．在該網(wǎng)站設(shè)計(jì)中，運(yùn)用了哪些樣式設(shè)計(jì)技術(shù)如CSS等？舉例說(shuō)明：

……

4．在該網(wǎng)站設(shè)計(jì)中，下一級(jí)網(wǎng)頁(yè)顯示的目標(biāo)（位置）一般設(shè)置為：……；數(shù)據(jù)庫(kù)（.mdb）文件為：……。

5．在該網(wǎng)站設(shè)計(jì)中，較好地運(yùn)用了如下網(wǎng)頁(yè)與Web程序設(shè)計(jì)技術(shù)：

……

（二）設(shè)計(jì)自選題材網(wǎng)站的具體步驟

1．確定主題和收集資料

本網(wǎng)站的主題：我的美麗家鄉(xiāng)——廣水

? 欄目或三級(jí)目錄：首頁(yè)，魅力廣水，廣水高中，廣水風(fēng)光，今日廣水和廣水人

家。

2．規(guī)劃網(wǎng)站和新建站點(diǎn)

網(wǎng)站的樹(shù)型目錄或站點(diǎn)結(jié)構(gòu)圖如圖2：

? 首頁(yè)

?

?

?

? 魅力廣水 廣水風(fēng)光 廣水高中 今日廣水和廣水人家

創(chuàng)建本地站點(diǎn)：

·啟動(dòng)Dreamweaver 8，選擇“站點(diǎn)”菜單中的“管理站點(diǎn)”命令，打開(kāi)“管理站點(diǎn)”對(duì)話框。

選擇“新建”按鈕，然后選擇“站點(diǎn)”命令，打開(kāi)“站點(diǎn)定義”對(duì)話框，將站點(diǎn)名稱(chēng)設(shè)為“Mysite”，單擊下一步。

·根據(jù)提示填完有關(guān)步驟，最后單擊“完成”按鈕。

·單擊“管理站點(diǎn)”對(duì)話框中的“完成”按鈕，在打開(kāi)“文件”面板上顯示本地站點(diǎn)的目錄結(jié)構(gòu)。

·在站點(diǎn)根文件夾上單擊右鍵，從彈出的快捷菜單中選擇“新建文件夾”命令，將新建文件夾名稱(chēng)設(shè)置為“image”。

·采用同樣的方法再建一個(gè)“vidao”文件夾。

3．制作素材和單個(gè)網(wǎng)頁(yè)（舉例說(shuō)明典型的操作步驟）

（1）素材制作

1.圖片：在網(wǎng)上收集一些網(wǎng)頁(yè)背景圖片，與主題有關(guān)的一些圖片；將一些不是很合心意的圖片在“fireworks”中進(jìn)行修改，制作。

2.flash動(dòng)畫(huà)：在有關(guān)網(wǎng)頁(yè)制作的網(wǎng)站中下載了一些有關(guān)的flash動(dòng)畫(huà)。由于網(wǎng)頁(yè)設(shè)計(jì)容量的限制此處沒(méi)有插入動(dòng)畫(huà)，實(shí)際步驟已知。

3.下載歌曲輕音樂(lè)紅河谷作為其中風(fēng)景網(wǎng)頁(yè)的背景音樂(lè)。

4.下載有關(guān)的資料，圖片??

…

（2）網(wǎng)頁(yè)制作

以魅力廣水為例

打開(kāi)Fireworks 8，在Fireworks 8中制做好背景圖片并保存為JPG格式，關(guān)閉Fireworks 8。

打開(kāi)Dreamweaver 8，單擊“插入”—“圖片”命令，選擇此圖片插入

（3）建立數(shù)據(jù)庫(kù)

4．制作首頁(yè)和建立鏈接（舉例說(shuō)明典型的操作步驟）

制作首頁(yè)：

……1）新建頁(yè)面，選擇菜單命令“修改”—“頁(yè)面屬性”，在彈出的對(duì)話框中將網(wǎng)頁(yè)的標(biāo)題設(shè)置為“魅力廣水”……

2)如果沒(méi)有顯示標(biāo)尺，則選擇菜單命令“查看”/“標(biāo)尺”/“顯示”，顯示標(biāo)尺。

3）選擇菜單命令“查看”/“網(wǎng)格”/“顯示網(wǎng)格”來(lái)顯示網(wǎng)格，以便于

定位。

4）在插入工具欄中選擇“布局”子工具欄，單擊布局按鈕，此時(shí)會(huì)打開(kāi)

一個(gè)“從布局模式開(kāi)始”，單擊“確定”按鈕進(jìn)入布局模式。

5）單擊“布局”插入工具欄上的“布局表格”按鈕，然后將光標(biāo)放在要繪制表格的區(qū)域，按住鼠標(biāo)左鍵繪制一個(gè)布局表格。

6）在“布局”插入工具欄上的“布局表格”按鈕，然后移動(dòng)光標(biāo)到第一

行網(wǎng)格的位置，繪制一個(gè)頂部單元格并選中該單元格，在打開(kāi)的“屬性”面板中設(shè)置“背景顏色”為白色，并以此方法繪制剩余的單元格。

7）選擇“插入”/“圖像”命令，插入圖片，調(diào)整圖片大小使得圖片大

小恰好充滿(mǎn)單元格。

8）在左側(cè)單元格內(nèi)輸入文字，然后加上項(xiàng)目符號(hào)，并插入圖片，然后

在屬性面板中設(shè)置字體為黑體，背景設(shè)為綠色。

9)選定整個(gè)布局表格，將布局表格背景設(shè)為黑色。完成首頁(yè)制作。

建立連接:

? 將所有的網(wǎng)頁(yè)都做完了之后再建立鏈接。（下面以“魅力廣水”為例）①選中“魅力廣水”圖片，打開(kāi)“屬性”面板，選擇“鏈接”文本框右邊的文件夾，選擇文件夾中的“主頁(yè)”網(wǎng)頁(yè)，單擊“確定”。

②在“目標(biāo)”的下拉框中選擇“鳴人的身世”

5．調(diào)試運(yùn)行

調(diào)試和運(yùn)行情況：

在運(yùn)行的過(guò)程中，有某些圖片，音樂(lè)無(wú)法正常顯示和播放，有些是因?yàn)殡娔X的原因，而有些則是因?yàn)椴僮鬟^(guò)程中出現(xiàn)的問(wèn)題，經(jīng)過(guò)不斷修正，網(wǎng)頁(yè)運(yùn)行正常。

……

第五篇：國(guó)際網(wǎng)頁(yè)Web設(shè)計(jì)流程

國(guó)際網(wǎng)頁(yè)Web設(shè)計(jì)流程

1.初始會(huì)商,主要是收集該站點(diǎn)的關(guān)鍵信息,包括站點(diǎn)的目標(biāo)讀者.要發(fā)布的內(nèi)容.開(kāi)發(fā)Web服務(wù)器平臺(tái);

2.概念開(kāi)發(fā),設(shè)計(jì)師根據(jù)收集的信息,開(kāi)始構(gòu)思,通常,設(shè)計(jì)師要把這些構(gòu)思用草圖的形式呈現(xiàn)給顧客,這個(gè)草圖要有整個(gè)網(wǎng)站的結(jié)構(gòu),不同的布局.設(shè)計(jì)及導(dǎo)航;

3.內(nèi)容綜合,當(dāng)決定了設(shè)計(jì)師的設(shè)計(jì),設(shè)計(jì)師開(kāi)始制作一些初始圖樣,這些圖樣用PHOTOSHOP那樣的程序來(lái)創(chuàng)建,然后,設(shè)計(jì)師將圖樣打印出來(lái)配合文字;

4.HTML布局和導(dǎo)航,一旦客戶(hù)同意了這些內(nèi)容綜合,設(shè)計(jì)師開(kāi)始編制Web頁(yè)面,導(dǎo)航器也被編制到頁(yè)面中,使客戶(hù)第一次真正體驗(yàn)一下;

5.圖形制作,如果客戶(hù)同意了站點(diǎn)的外觀和感受,設(shè)計(jì)師將大量制作所需的圖形,并進(jìn)行優(yōu)化;

6.內(nèi)容流程,客戶(hù)的書(shū)面材料利用各種網(wǎng)頁(yè)技術(shù)（CSS、JAVA、FLASH）,有機(jī)的和相關(guān)的圖形整合在一起;

7.測(cè)試,在站點(diǎn)被提交給客戶(hù)之前,設(shè)計(jì)師要徹底測(cè)試每個(gè)Web頁(yè)面和聯(lián)結(jié),利用清單,進(jìn)行修補(bǔ);

8.交付,一旦簽收,客戶(hù)要經(jīng)常進(jìn)行他們的測(cè)試,找出排版和內(nèi)容方面的錯(cuò)誤,做完了這些次要的修正后,正式啟用站點(diǎn).這套完整的計(jì)劃可以用1-12個(gè)月來(lái)完成,平均完成時(shí)間為4個(gè)月.當(dāng)站點(diǎn)啟用后,要進(jìn)行跟蹤調(diào)查,以確定人們?nèi)绾问褂谜军c(diǎn)。經(jīng)過(guò)6-12個(gè)月的運(yùn)行之后，重新收集數(shù)據(jù),開(kāi)始重新設(shè)計(jì),然后這個(gè)Web設(shè)計(jì)過(guò)程再開(kāi)始一遍。

附：WEB設(shè)計(jì)經(jīng)驗(yàn)-來(lái)自microsoft.com設(shè)計(jì)主管

作為設(shè)計(jì)主管，Peter Stern 已經(jīng)領(lǐng)導(dǎo) microsoft.com 重新設(shè)計(jì)了主頁(yè)并且開(kāi)發(fā)了五個(gè)不同的交互工具，這些工具被用于下載中心、產(chǎn)品目錄、配置文件中心、搜索 和注冊(cè)等聯(lián)機(jī)功能。他為幾個(gè)內(nèi)部工具設(shè)計(jì)了用戶(hù)界面，并且正致力于創(chuàng)建將于今年晚些時(shí)候發(fā)布的下一代主頁(yè)。

從頭銜上，您可能認(rèn)為我主要關(guān)心的是 microsoft.com Web 站點(diǎn)幾千個(gè)網(wǎng)頁(yè)的版面設(shè)計(jì)。的確，這些確實(shí)是我所關(guān)注的。視覺(jué)上的吸引力是重要的，但是這僅僅是工作的一小部分。而最終的目的是確保整個(gè)站點(diǎn)運(yùn)轉(zhuǎn)正常。

我的意思是，人們通常在訪問(wèn) microsoft.com 時(shí)，并未將它當(dāng)作藝術(shù)作品來(lái)贊賞。而是為了獲得有關(guān)產(chǎn)品的信息，或者有一些技術(shù)問(wèn)題需要咨詢(xún)，或是閱讀有關(guān)開(kāi)發(fā)商的期刊。所以網(wǎng)站的設(shè)計(jì)應(yīng)該盡量清楚和有條理，以便他們能夠容易地找到所需信息。

設(shè)計(jì)站點(diǎn)

在進(jìn)行 Web 設(shè)計(jì)時(shí)--在設(shè)計(jì)過(guò)程中--形式應(yīng)該服從功能。這種方法應(yīng)用于我們站點(diǎn)的整個(gè)設(shè)計(jì)過(guò)程中。當(dāng)然，我們有最新的 Web 工具，并且能夠?qū)⒏鞣N可視的小配件上載到網(wǎng)頁(yè)上。

但是我們認(rèn)為這樣做將不利于為訪問(wèn)者提供有效的服務(wù)。

事實(shí)上，我經(jīng)常發(fā)現(xiàn)一些站點(diǎn)未將重點(diǎn)放在功能上。常見(jiàn)的錯(cuò)誤包括：

用戶(hù)界面元素不一致。例如，同一個(gè)控件在不同的頁(yè)面上功能不同，或者同一個(gè)功能對(duì)應(yīng)幾個(gè)用戶(hù)界面控件。

導(dǎo)航欄位置不一致。決定站點(diǎn)的哪些頁(yè)和功能需要在站點(diǎn)的任何頁(yè)上都可被訪問(wèn)到。這就是應(yīng)該保持一致性的“全局導(dǎo)航欄”。

不太注意或根本不注意基本的圖形設(shè)計(jì)原則，例如排版式樣、色彩和版面的設(shè)計(jì)。

相關(guān)元素和功能的隨意分組。注意將元素放置在網(wǎng)頁(yè)上的位置和目的。這可幫助訪問(wèn)者從其它相鄰的選擇和位置來(lái)推斷某個(gè)鏈接的功能。

使網(wǎng)頁(yè)過(guò)于龐大以至使訪問(wèn)者需要通過(guò)典型的調(diào)制解調(diào)器速度的 Internet 連接進(jìn)行長(zhǎng)時(shí)間的下載。這并不是說(shuō)不應(yīng)該使用圖形，但是您需要對(duì)它們進(jìn)行精挑細(xì)選，然后用適當(dāng)?shù)膲嚎s和顏色索引優(yōu)化它們。

現(xiàn)在的 Web 站點(diǎn)仍然存在很多問(wèn)題，這并不奇怪。畢竟，Web 設(shè)計(jì)“藝術(shù)”相對(duì)來(lái)說(shuō)還是個(gè)新生事物。在四、五年以前，Web 頁(yè)甚至是普通的。那時(shí)，人們好像認(rèn)為他們的 Web 站點(diǎn)將會(huì)吸引訪問(wèn)者只是因?yàn)樗鼈兇嬖?-并且，可能在某些情況下這種方法確實(shí)有效。但是這些站點(diǎn)一般很難看，并且更重要的是，它們真的難以使用。接下來(lái)便進(jìn)入“看看我們能做些什么”階段，在網(wǎng)頁(yè)中加入了大量的動(dòng)畫(huà)、聲音文件以及其它附加件，導(dǎo)致訪問(wèn)者需要長(zhǎng)時(shí)間地進(jìn)行下載，但是并未獲得多少實(shí)實(shí)在在的內(nèi)容。

如今的 Web 設(shè)計(jì)師們已經(jīng)吸取了前人的經(jīng)驗(yàn)和教訓(xùn)。好的站點(diǎn)傾向于簡(jiǎn)化和快速，同時(shí)在功能上有所提高。這是 Microsoft 的目標(biāo)，而且我們最先承認(rèn)自己所犯的錯(cuò)誤（參閱“Microsoft 的 Web 簡(jiǎn)史”看一看以前的主頁(yè)設(shè)計(jì)）。

設(shè)計(jì)錯(cuò)誤并不總是顯而易見(jiàn)的。有時(shí)在設(shè)計(jì)上對(duì)一個(gè)小元素的移動(dòng)或更改將有很少或根本沒(méi)有影響。但是，在其它情況下，它可能確實(shí)會(huì)對(duì)頁(yè)面功能有所影響。而且如果說(shuō)我們從過(guò)去幾年學(xué)到了一些東西，那就是小的改動(dòng)會(huì)使 Web 頁(yè)的運(yùn)行方式有很大的不同。

明確的流程

若要避免類(lèi)似問(wèn)題，我們?yōu)樾路?wù)（例如“搜索”）的創(chuàng)建或關(guān)鍵的 Web 頁(yè)（如主頁(yè)）設(shè)計(jì)了一個(gè)明確的流程。每個(gè)項(xiàng)目都是在一定的基礎(chǔ)上開(kāi)始的，即我們有一個(gè)受益于我們站點(diǎn)上的頁(yè)面、部分或用戶(hù)界面元素的產(chǎn)品或服務(wù)。在早期的產(chǎn)品計(jì)劃階段（第 1 階段），我被要求設(shè)計(jì)一些初級(jí)模型：大致描述頁(yè)面、部分或功能的草圖。然后產(chǎn)品項(xiàng)目組檢查產(chǎn)品計(jì)劃建議，看看此項(xiàng)服務(wù)是否可以為 microsoft.com 的訪問(wèn)者真正帶來(lái)一些實(shí)惠。

如果答案是“可以”，那么此項(xiàng)目會(huì)獲得批準(zhǔn)，我們開(kāi)始寫(xiě)項(xiàng)目說(shuō)明書(shū)（第 2 階段）。我們?cè)诘?1 階段的草圖和概念基礎(chǔ)上創(chuàng)建并提出一個(gè)更為完整的計(jì)劃。這時(shí)，我們一般還會(huì)開(kāi)始

可用性測(cè)試（一般會(huì)有書(shū)面的模型）以了解潛在用戶(hù)將對(duì)計(jì)劃中的設(shè)計(jì)做出何種反應(yīng)。在最后開(kāi)發(fā)階段（第 3 階段），我們創(chuàng)建運(yùn)行計(jì)劃服務(wù)的 Web 原型，并且進(jìn)行全面的可用性測(cè)試以及內(nèi)部復(fù)查。然后完成站點(diǎn)的代碼，修改程序錯(cuò)誤，最后站點(diǎn)通過(guò)實(shí)際運(yùn)轉(zhuǎn)的 Web 站點(diǎn)向客戶(hù)發(fā)布。

正如您所見(jiàn)到的，可用性在整個(gè)流程中扮演著重要的角色（參閱“創(chuàng)建有效的 Web 界面需要認(rèn)真計(jì)劃”）。我們可以為用戶(hù)運(yùn)行某項(xiàng)任務(wù)計(jì)時(shí)，這樣我們就可以在產(chǎn)品以后的版本中對(duì)比相同的測(cè)試。我們可以使用這種方法進(jìn)行度量，以確定一個(gè)功能的重新設(shè)計(jì)是否為客戶(hù)帶來(lái)任何真正的價(jià)值。

還有，我們將仔細(xì)地觀察以了解可用性對(duì)象是否可以計(jì)算出如何正確使用新功能--我們稱(chēng)為“可發(fā)現(xiàn)性”的方法。有時(shí)這為我們提供了一些挑戰(zhàn)。例如：在我們的站點(diǎn)上，在 搜索引擎 中鍵入一個(gè)詞組或字會(huì)產(chǎn)生一列結(jié)果。然后我們請(qǐng)用戶(hù)選擇在這些結(jié)果中進(jìn)行搜索，以便進(jìn)行更細(xì)的搜索并且導(dǎo)向某一頁(yè)或資源。但是即使“在結(jié)果范圍內(nèi)搜索”被明顯地標(biāo)記在深色標(biāo)簽上，很少有人熟悉它。一些用戶(hù)認(rèn)為他們正開(kāi)始新的搜索，并且可能毫無(wú)結(jié)果。我們正在解決這個(gè)問(wèn)題以確?？蛻?hù)可以利用 microsoft.com 上所有豐富的功能來(lái)提高他們對(duì)此站點(diǎn)的認(rèn)識(shí)。

選項(xiàng)“在結(jié)果范圍內(nèi)搜索”看上去很直觀，但不是非常易發(fā)現(xiàn)的。此問(wèn)題一直是困擾我們的設(shè)計(jì)的問(wèn)題之一。

最后階段

大體來(lái)講，站點(diǎn)設(shè)計(jì)是在發(fā)生沖突的需要之間求得平衡的藝術(shù)。一方面，我要將站點(diǎn)設(shè)計(jì)得盡量簡(jiǎn)單易用。另一方面，我要確保站點(diǎn)中所有強(qiáng)大的工具可為經(jīng)驗(yàn)豐富的用戶(hù)所用。與此同時(shí)，我還要為內(nèi)部客戶(hù)服務(wù)--Microsoft 產(chǎn)品項(xiàng)目組--他們對(duì)服務(wù)有特殊的需要。所以每天我都要解決一些非常困難的問(wèn)題，經(jīng)常處于很緊迫的情形中。我發(fā)現(xiàn)這種工作是鼓舞人心和有趣的。

這個(gè)職業(yè)非常需要更熟練的專(zhuān)業(yè)人員。我是經(jīng)過(guò)一系列非常不一般的過(guò)程--在大學(xué)學(xué)習(xí)圖形藝術(shù)，然后在多媒體公司設(shè)計(jì) CD-ROM，最后加入 Microsoft 并開(kāi)發(fā)應(yīng)用程序--才獲得這個(gè)職位的。非常奇怪的是，當(dāng)我申請(qǐng)（并獲得）這份工作時(shí)，我以前從來(lái)沒(méi)有設(shè)計(jì)過(guò) Web 頁(yè)。但是我廣泛的設(shè)計(jì)經(jīng)歷已經(jīng)證明是非常有用的，并且我自認(rèn)為已經(jīng)驗(yàn)證了格言“成功的設(shè)計(jì)就是成功的設(shè)計(jì)”（不論是什么媒體）。許多設(shè)計(jì)問(wèn)題對(duì) Web 來(lái)說(shuō)是獨(dú)一無(wú)二的，解決這些問(wèn)題的方法對(duì)于任何媒體都是一樣的。

對(duì)于那些準(zhǔn) Web 設(shè)計(jì)師我的建議是，他們也應(yīng)該盡可能地?cái)U(kuò)大設(shè)計(jì)背景。今天應(yīng)該確保將一些 Web 工作作為互動(dòng)設(shè)計(jì)培訓(xùn)的一部分--大多數(shù)好的設(shè)計(jì)學(xué)校已將其加入課程中。但是在排版、色彩理論、版面設(shè)計(jì)以及生產(chǎn)等方面的扎實(shí)的技術(shù)將仍然特別有價(jià)值。

在未來(lái)，Web 設(shè)計(jì)師們?nèi)詫?huì)繼續(xù)被要求給頁(yè)面增加更豐富的多媒體內(nèi)容，從而為 Web 站點(diǎn)的可視性和可操作性增加了新一級(jí)的復(fù)雜性和技術(shù)要求。作為 CD-ROM/多媒體設(shè)計(jì)師，要求我必須具有圖形設(shè)計(jì)、視頻、音頻制作、動(dòng)畫(huà)等方面的知識(shí)和創(chuàng)作能力。我的預(yù)言是，Web 設(shè)計(jì)師也將向這些領(lǐng)域發(fā)展。

對(duì)于屬于 microsoft.com 的我們--以及在 Internet 上的其它地方--那應(yīng)該是一個(gè)非常有趣的未來(lái)。

了解您的觀眾。調(diào)查一下究竟哪些人在訪問(wèn)您的站點(diǎn)，以及他們?yōu)槭裁匆L問(wèn)。新手或不定期上網(wǎng)的 Web 用戶(hù)與軟件開(kāi)發(fā)商相比有非常不同的興趣和站點(diǎn)需要。

使您的站點(diǎn)對(duì)訪問(wèn)者來(lái)說(shuō)有所幫助。

為您的觀眾提供所需的信息。使導(dǎo)航元素保持一致，并且確保對(duì)訪問(wèn)率最高的區(qū)域進(jìn)行明顯的標(biāo)記，是它們易于被找到。

使用清楚的消息。

確保用戶(hù)了解此頁(yè)面的上下文，并且知道需要他們做些什么。如果在注冊(cè)過(guò)程中您要用戶(hù)輸入姓名，那么就直截了當(dāng)?shù)卣f(shuō)。不要讓訪問(wèn)者自己計(jì)算什么，他們會(huì)感到沮喪，于是轉(zhuǎn)到其它更簡(jiǎn)單的站點(diǎn)（例如您的競(jìng)爭(zhēng)對(duì)手的站點(diǎn)?。?。

保持一致性。

雖然更改不同 Web 頁(yè)的外觀并不難，但這并不意味著您應(yīng)該這么做。將主要功能--例如返回“主頁(yè)”的鏈接或者執(zhí)行一個(gè)搜索--放在每頁(yè)的相同位置。在 microsoft.com 上，黑色全局導(dǎo)航工具欄的位置在四十多萬(wàn)頁(yè)上都是一樣的。

使站點(diǎn)可用。

牢記設(shè)計(jì)和測(cè)試站點(diǎn)的可用性。確保用戶(hù)可容易地執(zhí)行任務(wù)以獲得所需信息。估算任務(wù)時(shí)間和任務(wù)完成率，然后努力進(jìn)行改善。如果新的設(shè)計(jì)沒(méi)有在這些方面獲得改善，那么就不要實(shí)施它。重新從草圖（或最初的計(jì)劃）開(kāi)始并嘗試其它方法。

保持簡(jiǎn)潔。

說(shuō)起來(lái)容易做起來(lái)難。嘗試征求反饋意見(jiàn)。有時(shí)新人可以很容易找到解決方案。

嘗試新的東西。

不要害怕打破常規(guī)，嘗試一些完全不同的東西。如果您不試試，永遠(yuǎn)不會(huì)找到真正的答案。