第一篇：國際網(wǎng)頁Web設(shè)計流程

國際網(wǎng)頁Web設(shè)計流程

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

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

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

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

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

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

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

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

附：WEB設(shè)計經(jīng)驗-來自microsoft.com設(shè)計主管

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

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

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

設(shè)計站點

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

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

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

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

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

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

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

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

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

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

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

明確的流程

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

如果答案是“可以”，那么此項目會獲得批準(zhǔn)，我們開始寫項目說明書（第 2 階段）。我們在第 1 階段的草圖和概念基礎(chǔ)上創(chuàng)建并提出一個更為完整的計劃。這時，我們一般還會開始

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

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

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

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

最后階段

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

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

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

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

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

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

使您的站點對訪問者來說有所幫助。

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

使用清楚的消息。

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

保持一致性。

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

使站點可用。

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

保持簡潔。

說起來容易做起來難。嘗試征求反饋意見。有時新人可以很容易找到解決方案。

嘗試新的東西。

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

第二篇：Web網(wǎng)頁實驗報告

網(wǎng)頁設(shè)計實驗報告

學(xué)院：計算機

專業(yè)：網(wǎng)絡(luò)工程

班級：0430801

學(xué)號：08490121

姓名：姚樹秘

2011年5月10日Web

實驗一

實驗題目：編程環(huán)境的熟悉 實驗?zāi)康模?/p>

1、學(xué)會使用Macromedia Dreamweaver 軟件，了解并掌握該軟件的各種功能，為以后的網(wǎng)頁設(shè)計打下基礎(chǔ)。

2、重點學(xué)習(xí)使用“頁面創(chuàng)建”和“設(shè)置服務(wù)器信息”功能

實驗環(huán)境：

操作系統(tǒng)為Windows2000或者Windows XP，應(yīng)用軟件為Macromedia Dreamweaver。

實驗步驟：

1、啟動

單擊“開始”，依次指向“程序”、“Macromedia ”，然后單擊“Macromedia Dreamweaver MX”。

2、熟悉和了解Macromedia Dreamweaver MX界面

實驗過程截圖：

心得體會：

通過這次試驗，基本熟悉和掌握了Dreamweaver軟件的功能和用法，能夠用該軟件設(shè)計簡單的網(wǎng)頁。

實驗二

實驗題目：熟悉ASP技術(shù)及它的內(nèi)置對象 試驗?zāi)康模?/p>

1． 了解并掌握ASP初步知識 2． 熟悉ASP內(nèi)置對象

試驗步驟：

1、打開軟件設(shè)計頁面

2、輸入下列代碼

3、建立一個自動監(jiān)測瀏覽時間并根據(jù)不同時段動態(tài)顯示不同頁面內(nèi)容的 ASP 程序，請將以下代碼輸入到Macromedia Dreamweaver的代碼編輯區(qū) , 命名為test1.asp

4、運行結(jié)果

實驗過程截圖：

5、建立一個學(xué)生情況調(diào)查表，并將學(xué)生填寫的內(nèi)容寫入數(shù)據(jù)文件student.txt中。

6、設(shè)計編譯結(jié)果

心得體會：

通過本次試驗我學(xué)會了很多，軟件的掌握和使用也更加熟練，能夠成功的打開ASP文件，更加熟悉了ASP的運用和使用技巧，以及學(xué)會怎么打開IIS服務(wù)器，設(shè)置站點信息。

實驗三

試驗題目：

實現(xiàn)與后臺數(shù)據(jù)庫的連接

試驗?zāi)康模?/p>

學(xué)會在ASP頁面訪問數(shù)據(jù)庫的方法，包括對后臺數(shù)據(jù)庫進行各項操作； 試驗環(huán)境：

Windows2000/Windows XP（已安裝有IIS系統(tǒng)）,Microsoft Access數(shù)據(jù)庫 實驗步驟：

1、利用 ASP 的 Database Access 組件通過 ADO 連接并操作 WEB 數(shù)據(jù)庫

2、單擊“開始”，選設(shè)置控制面板。

3、雙擊圖標(biāo)“32 位 ODBC” , 將彈出一個對話框，選標(biāo)簽“System DSN”

4、單擊“Add”添加一個 DSN 入口 , 選擇如“Microsoft Access Drive”并確認。

5、在“Data Source Name”欄里輸入你希望指定的 DSN, 然后單擊“Select”選擇數(shù)據(jù)庫存放位置，你可以按“Browse”來選取。

6、以上步驟完成后在 ASP 程序中指定 DSN

7、現(xiàn)有兩個數(shù)據(jù)庫表：students表記錄學(xué)生的一般數(shù)據(jù)，其中字段studID為學(xué)號，studName記錄學(xué)生姓名，score表記錄學(xué)生成績，其中computer字段和english字段分別記錄studID所表示的學(xué)生的計算機和英語課程成績。實驗相關(guān)代碼：

<% @ language=javascript %>