Web界面設(shè)計課件

Web介面設(shè)計28.1Web基礎(chǔ)

互聯(lián)網(wǎng)是近年來對社會影響最大的技術(shù)進步,影響到人類生活的很多方面?；ヂ?lián)網(wǎng)已經(jīng)成為全面支持多媒體，能在多種平臺上運行的龐大資訊服務(wù)系統(tǒng)?；ヂ?lián)網(wǎng)的應(yīng)用範圍也日趨擴大，被廣泛用於商業(yè)辦公、業(yè)務(wù)管理、購物娛樂等人類生活的各個方面，業(yè)已成為一種全球化社會現(xiàn)象。

38.1.1Web的出現(xiàn)與發(fā)展

90年代初，瑞士日內(nèi)瓦的歐洲核能研究中心分佈在世界各地的科學(xué)家需要高效率的通訊方式來進行彼此交流與分享資訊。該中心高能核理學(xué)家TimBerners-Lee研究發(fā)展了萬維網(wǎng)（WorldWideWeb，WWW）的雛形，目的是為了建立一個能夠整合各種資源、檔及多媒體的系統(tǒng)，讓使用者方便地取得不同媒體的資料。

4WWW-環(huán)球資訊網(wǎng)絡(luò)空間簡單來說，WWW是建立在客戶/伺服器模型之上，構(gòu)成的一個環(huán)球資訊網(wǎng)絡(luò)空間，主要使用：超文本標記語言（HypertextMarkupLanguage，HTML）超文本傳輸協(xié)議（HypertextTransportProtocols，

HTTP）通過Internet把遍佈世界各地的伺服器連接起來，它能夠提供各種Internet服務(wù)，具有一致用戶介面的資訊流覽功能。

5Web頁面的發(fā)展趨勢Web的一個發(fā)展趨勢，是圖形Web頁面的爆炸性發(fā)展。網(wǎng)上流覽中包括了大量使用的動態(tài)圖形，使圖形Web遍佈網(wǎng)路的各個角落。

新一代Web資訊描述標準XML，能更詳盡地描述文檔的結(jié)構(gòu)資訊，具有比HTML有更強大的功能，為Web的發(fā)展提供了強有力的支持。

68.1.2超文本與超媒體

超文本（Hypertext）是一種使用於文本、圖形或電腦的資訊的組織形式，是一種非線性的資訊組織形式。它使得單一的資訊元素之間相互交叉引用，這種引用並不是通過複製來實現(xiàn)的，而是通過指向?qū)Ψ降牡刂纷执畞碇敢脩臬@取相應(yīng)的資訊。

78.1.2超文本與超媒體超媒體（Hypermedia）利用超文本形式組織起來的檔不僅僅是文本，也可以是圖、文、聲、像以及視頻等多媒體形式的檔。這些多媒體資訊就構(gòu)成了所謂的超媒體。88.1.3 Web介面設(shè)計問題的提出

Web介面設(shè)計是人機交互介面設(shè)計的一個延伸，是人與電腦交互的演變。Web介面設(shè)計與站點外觀直接相關(guān)站點的介面外觀是否友好直接關(guān)係到是否能吸引人的關(guān)注。人性化的設(shè)計是Web介面設(shè)計的核心如何根據(jù)人的心理、生理特徵，運用技術(shù)手段，創(chuàng)造簡單、友好的介面，是Web介面設(shè)計的重點。

98.2Web資訊交互模型

用來解釋W(xué)eb的人機介面性質(zhì)的一個模型，它提出網(wǎng)頁是用戶和知識之間的介面。對於資訊提供者來說包括資訊的表達。對於使用者來說則是資訊的獲取。資訊的表達與獲取分別受到兩者認知結(jié)構(gòu)的制約。10Web資訊交互模型圖8-1Web資訊交互模型知識資訊提供者資訊一致性動態(tài)性認知結(jié)構(gòu)知識數(shù)據(jù)複雜資訊過程資訊網(wǎng)路空間用戶認知結(jié)構(gòu)11Web資訊交互模型模型涉及到資訊的三種類型數(shù)據(jù)：當一條資訊被反復(fù)、簡單的提供時稱為數(shù)據(jù)，比如機票價格。複雜資訊：而用來敘述事件時稱為複雜資訊，如多媒體資訊。過程性資訊：在資訊有明確目標，並相互作用時稱為過程性資訊，如線上練習(xí)、線上測試等。

12Web資訊交互模型模型涉及到資訊的兩種特性動態(tài)性：資訊在不斷的變化，具有動態(tài)性比如股票價格、機票價格等是不斷變化的。一致性：資訊元素的組織方式具有一致性

資訊元素總是通過一定的方式結(jié)合在一起，如通過討論、說明，或根據(jù)電話號碼、名字、數(shù)字等方式組織陳列。138.3Web資訊設(shè)計模型

Web資訊設(shè)計模型是解釋W(xué)eb人機介面性質(zhì)的另一個模型。是一種研究網(wǎng)頁的資訊設(shè)計模型。設(shè)計模型中要考慮到資訊的兩個方面第一是應(yīng)該呈現(xiàn)或略去什麼資訊。

第二個方面指的是資訊該如何被表現(xiàn)。14Web資訊設(shè)計模型用戶工具設(shè)計資訊設(shè)計過程信息內(nèi)容選取通路結(jié)構(gòu)興趣結(jié)構(gòu)執(zhí)行結(jié)構(gòu)圖8-2Web資訊設(shè)計模型提供者工具設(shè)計15WEB的三種設(shè)計空間結(jié)構(gòu)模式

通路結(jié)構(gòu)模式說明要展示的關(guān)鍵問題，使用戶更容易獲取有用的資訊。如出版物中的索引、標題、摘要、概述等。Web網(wǎng)站地圖和各欄目標題等資訊都屬於通路結(jié)構(gòu)。興趣結(jié)構(gòu)興趣結(jié)構(gòu)的目的在於捕捉用戶的注意力，並維持用戶流覽網(wǎng)頁的注意力。執(zhí)行結(jié)構(gòu)指學(xué)習(xí)和教育材料之間的一系列交互，尤其是基於電腦的交互。在WEB中指描述學(xué)習(xí)和網(wǎng)頁資訊之間的交互。168.4Web站點的概念設(shè)計

概念設(shè)計涉及的工作：分析、確定站點的目標和用途。準確定義所建立Web網(wǎng)站及站點的規(guī)範。事先建立好站點的架構(gòu)和導(dǎo)航設(shè)計。兼顧不同的流覽器。

178.4.1站點架構(gòu)和導(dǎo)航設(shè)計

站點結(jié)構(gòu)

站點的結(jié)構(gòu)可分為邏輯結(jié)構(gòu)和物理結(jié)構(gòu):邏輯結(jié)構(gòu)描述文檔間的關(guān)係，定義文檔間的鏈接。

物理結(jié)構(gòu)描述文檔的實際位置及顯示方式。超文本結(jié)構(gòu)中最常用層次結(jié)構(gòu)層次型結(jié)構(gòu)按資訊的必要性來改變資訊的顯示方式。根網(wǎng)頁是站點的主頁，層次以根網(wǎng)頁開始。用戶深入站點時，選擇趨向於越來越具體，直到找到目標或葉子網(wǎng)頁。層次結(jié)構(gòu)通過深度和廣度來描述。

188.4.1站點架構(gòu)和導(dǎo)航設(shè)計站點的導(dǎo)航設(shè)計導(dǎo)航系統(tǒng)對訪問者來說是路徑指示系統(tǒng)。站點訪問者通過導(dǎo)航系統(tǒng)尋找需要的資訊。用戶感覺到能以滿意的方式找到所需資訊時，導(dǎo)航系統(tǒng)才是合適的。由於用戶的差異，不可能實現(xiàn)完美的導(dǎo)航系統(tǒng)。19兼顧不同流覽器的設(shè)計

原因站點流覽者可能使用不同類型和版本的流覽器。以某一個流覽器的某一個版本為依據(jù)編寫的網(wǎng)頁程式，可能在其他的流覽器或其他版本上不能正常顯示或運行。方法通過使用JavaScript等編程工具或功能，探測用戶流覽器的類型和版本等參數(shù)及對於某特定功能的支持情況，然後根據(jù)探測結(jié)果顯示適用於特定流覽器的網(wǎng)頁內(nèi)容。根據(jù)用戶流覽器分佈情況決定設(shè)計所面向的流覽器類別和版本。208.5Web介面設(shè)計所涉及的問題

Web介面設(shè)計中要考慮的基本問題包括：

Web介面設(shè)計基本原則

Web介面規(guī)劃

218.5.1Web介面設(shè)計基本原則

瞭解流覽者的心理狀態(tài)

內(nèi)容與形式的統(tǒng)一

減少流覽層次

特點明確

統(tǒng)一整體的形象

Web介面設(shè)計的3C原則

228.5.1Web介面設(shè)計基本原則1．瞭解流覽者的心理狀態(tài)從心理學(xué)的角度分析流覽者的心理狀態(tài)，有助於網(wǎng)頁頁面的設(shè)計。在單擊“退回”按鈕之前有三秒鐘而且只有三秒的等待。必須迅速地把有趣和有吸引力的東西顯示出來。

238.5.1Web介面設(shè)計基本原則2．內(nèi)容與形式的統(tǒng)一內(nèi)容指的是Web網(wǎng)站的資訊、數(shù)據(jù)及文字內(nèi)容等.形式指的是網(wǎng)頁設(shè)計的版式、構(gòu)圖、佈局、色彩以及它們所呈現(xiàn)出的風(fēng)格特點等。網(wǎng)頁的形式是為內(nèi)容服務(wù)的，但本身又有自己的獨立性和藝術(shù)規(guī)律。網(wǎng)頁設(shè)計的目的就是為了使網(wǎng)頁更加形象、直觀，更易被觀眾所接受。不同內(nèi)容的網(wǎng)頁要求用不同的設(shè)計形式。

248.5.1Web介面設(shè)計基本原則3．減少流覽層次應(yīng)儘量把網(wǎng)頁的層次簡要化，力求以最少的點擊次數(shù)鏈接到具體的內(nèi)容。

在主頁的訪問率為100人次的情況下，下一頁的訪問率降到30到50人次。網(wǎng)頁的層次越複雜，實際內(nèi)容的訪問率也將越低，資訊也就越難傳達到讀者的手裏。258.5.1Web介面設(shè)計基本原則4．特點明確利用相應(yīng)邏輯結(jié)構(gòu)來有序組織、開發(fā)出一個頁面設(shè)計原型，進行測試，逐步精煉此原型，形成明確的特點特色鮮明的Web網(wǎng)站是精心策劃的結(jié)果，只有獨特的創(chuàng)意和賞心悅目的網(wǎng)頁設(shè)計才能在一瞬間打動它的流覽者應(yīng)清楚地瞭解Web網(wǎng)站用戶的基本情況，從而能有的放矢，挑選關(guān)鍵資訊268.5.1Web介面設(shè)計基本原則5．統(tǒng)一整體的形象

Web網(wǎng)站標識以及網(wǎng)頁設(shè)計標準確定後，應(yīng)儘量地應(yīng)用到每一頁頁面上，使流覽者可以確定當前所流覽的網(wǎng)站，並且給流覽者留下深刻而統(tǒng)一的印象。27SONY公司的首頁特點SONY公司的首頁設(shè)計充分體現(xiàn)了引領(lǐng)消費電子產(chǎn)品的潮流這一特點，設(shè)計者很好地傳遞了該Web網(wǎng)站的特點：頁面上富有動感的線條和畫面鮮亮的用色Flash畫面和字樣滑鼠落在上面就會以彩色顯示的多個畫面等28SONY公司的首頁298.5.1Web介面設(shè)計基本原則6．Web網(wǎng)站設(shè)計的3C原則

concise（簡潔

）

使用醒目的標題，這個標題常常採用圖形來表示，但圖形同樣要求簡潔。限制所用的字體和顏色的數(shù)目。頁面上所有的元素都應(yīng)當有明確的含義和用途，不要用無關(guān)的圖片把頁面裝點起來。

308.5.1Web介面設(shè)計基本原則

Consistent（一致性）

各頁面使用相同的頁邊距；文本、圖形間保持相同的間距。各頁面上都放上公司或網(wǎng)站的統(tǒng)一標誌。各頁面應(yīng)當使用相同的導(dǎo)航圖示。頁面中的每個元素與整個頁面以及站點的色彩和風(fēng)格上保持一致性。文字的顏色要同圖像的顏色保持一致並注意色彩搭配的和諧。318.5.1Web介面設(shè)計基本原則contrast(對比度)對比是強調(diào)某些內(nèi)容的最有效的辦法之一，好的對比度使內(nèi)容更易於辨認和接受。常用的對比方法是使用顏色進行對比。另一種實現(xiàn)對比的方法是使用字體變化?？梢栽谖淖峙虐嬷惺褂眯斌w和黑體寫出關(guān)鍵內(nèi)容，但不要濫用，以免不能達到強調(diào)效果。328.5.2Web介面規(guī)劃

確定Web介面設(shè)計的目標企業(yè)Web網(wǎng)站：企業(yè)建立這個Web網(wǎng)站的目的這個網(wǎng)站的作用該提供哪些吸引訪問者的東西用戶訪問這個Web網(wǎng)站後，能給他們帶來什麼？

個人Web網(wǎng)站：主要是展現(xiàn)自我、演練技術(shù)。建立的Web網(wǎng)站要有個性和特色。338.5.2Web介面規(guī)劃介面佈局的規(guī)劃制定好目標後，網(wǎng)頁佈局、元素的設(shè)計都要以這個目標為中心，儘量從各方面綜合表現(xiàn)Web站點的目標。在制定建立站點目標的同時，應(yīng)該將站點作為一種文化、一種藝術(shù)來看。348.5.2Web介面規(guī)劃Web介面設(shè)計中用戶的地位確定Web站點的用戶群體，從用戶的角度去思考。

以用戶為中心的設(shè)計，為用戶的共性設(shè)計，同時考慮差異。對目標用戶群的構(gòu)成進行分析：Web網(wǎng)站是以提供的資訊內(nèi)容來分類的。對目標用戶的行為方式來分析：按照人機工程學(xué)的觀點，行為方式受年齡、性別、地區(qū)、種族、職業(yè)、生活習(xí)俗、受教育程度等因素影響。358.6Web介面概要設(shè)計

Web介面概要設(shè)計包括Web介面框架設(shè)計

Web介面的內(nèi)容與風(fēng)格的設(shè)計Web介面設(shè)計的語言與文化

368.6.1Web介面框架設(shè)計Web網(wǎng)站規(guī)劃對市場進行分析，確定站點的目的和功能，並根據(jù)需要對站點建設(shè)中的技術(shù)、內(nèi)容、費用、測試、維護等做出規(guī)劃。建立原型系統(tǒng)嘗試採用不同的方法修改目標、更新形象。解決Web網(wǎng)站建設(shè)中的一些基本問題：Web網(wǎng)站的結(jié)構(gòu)資訊的組織與管理新增檔與原有系統(tǒng)保持一致的措施。存儲資訊的物理方法（採用資料庫還是檔系統(tǒng)）文檔版本控制結(jié)構(gòu)的完整性以及維護方法等378.6.1Web介面框架設(shè)計詳細設(shè)計包括Web頁面的佈局系統(tǒng)的內(nèi)部結(jié)構(gòu)實現(xiàn)方法和維護方法等確定Web網(wǎng)站的運行模式製造企業(yè)網(wǎng)站商業(yè)企業(yè)網(wǎng)站門戶網(wǎng)站新聞網(wǎng)站個人網(wǎng)站通過廣告、銷售等方式進行運作的網(wǎng)站正式實施388.6.2Web介面的內(nèi)容與風(fēng)格

網(wǎng)站內(nèi)容設(shè)計的原則

:HTML文檔的效果由其自身的品質(zhì)和流覽器解釋的方法決定。應(yīng)讓所有的流覽器都能夠正常流覽。網(wǎng)站資訊的組織的總體結(jié)構(gòu)要層次分明，儘量避免形成複雜的網(wǎng)狀結(jié)構(gòu)。要權(quán)衡圖像和多媒體資訊的數(shù)量，在不影響網(wǎng)站效果的前提下，儘量減少圖像的數(shù)量和所占面積。398.6.2Web介面的內(nèi)容與風(fēng)格網(wǎng)站內(nèi)容設(shè)計的原則

網(wǎng)站的首頁要給用戶帶來好的第一印象，能夠吸引用戶再次光臨這個網(wǎng)站。網(wǎng)站內(nèi)容應(yīng)是動態(tài)進行修改和更新；。網(wǎng)頁中應(yīng)該提供聯(lián)機幫助功能。網(wǎng)頁的文本內(nèi)容應(yīng)簡明，通俗易懂。所有的內(nèi)容都要針對設(shè)計目標而寫，不要節(jié)外生枝。文字要正確，不能有語法錯誤和錯別字。408.6.2Web介面的內(nèi)容與風(fēng)格Web介面的風(fēng)格

Web介面的風(fēng)格包括站點的標誌、色彩、字體、佈局、交互方式、內(nèi)容價值、存在意義等。一個傑出的網(wǎng)站需要整體的形象包裝和設(shè)計。為兒童設(shè)計的網(wǎng)站應(yīng)當使用比較豐富的色彩和圖形，並且較多使用動畫和聲音等多媒體表現(xiàn)工具。為老年人設(shè)計的網(wǎng)站需要考慮採用較大的字體、直截了當?shù)馁Y訊顯示和簡單的流覽方式，以適用老年人可能逐漸減弱的視力和記憶力41體現(xiàn)兒童特點的迪士尼網(wǎng)站

428.6.3Web介面設(shè)計的語言與文化

網(wǎng)站應(yīng)設(shè)置多語言選擇網(wǎng)站面向的用戶使用不同的語言，則在設(shè)計時要考慮包括不同語言的版本，將選擇語言版本的功能放在網(wǎng)站的主頁，並用不同版本的語言進行標注。在網(wǎng)站設(shè)計和建設(shè)中進行跨文化研究應(yīng)當注意到不同地區(qū)的文化特點。不同的語言表達可以產(chǎn)生不同的效果。有些內(nèi)容在一個地區(qū)是允許的或適用的，但是在另外一個地區(qū)使用卻是不合適的。應(yīng)當避免顯示對用戶不適合的內(nèi)容。

438.7Web介面設(shè)計要素

Web介面設(shè)計要素包括：Web介面佈局Web介面的色彩Web介面的字體Web介面的動畫與多媒體Web介面的導(dǎo)航

448.7.1Web介面佈局

佈局設(shè)計應(yīng)做到整體佈局合理、有序、整體化。

常用Web頁面佈局的形式：

“同”字形結(jié)構(gòu)佈局

“國”字形結(jié)構(gòu)佈局

左右對稱佈局自由式佈局

458.7.1Web介面佈局“同”字形結(jié)構(gòu)佈局頁面頂部為主菜單，下方左側(cè)為二級欄目條，右側(cè)為鏈接欄目條，螢?zāi)恢虚g顯示具體的內(nèi)容。

優(yōu)點是頁面結(jié)構(gòu)清晰、左右對稱、主次分明，因而得到廣泛的應(yīng)用。缺點是太過於規(guī)矩呆板，需要善於運用細節(jié)色彩的變化來調(diào)劑。

468.7.1Web介面佈局2．“國”字形結(jié)構(gòu)佈局

“國”字形結(jié)構(gòu)佈局在“同”字形結(jié)構(gòu)佈局的基礎(chǔ)上，在頁面下方增加一橫條菜單或廣告其優(yōu)點是充分利用版面、資訊量大、切換方便。有的網(wǎng)站將頁面設(shè)計成鏡框的樣式，顯示出網(wǎng)站設(shè)計師的品味。478.7.1Web介面佈局3．左右對稱佈局

採取左右分割螢?zāi)坏姆椒ㄐ纬蓪ΨQ佈局。優(yōu)點是自由活潑，可顯示較多文字和圖像。缺點是兩者有機結(jié)合較為困難。

488.7.1Web介面佈局4．自由式佈局

自由式佈局打破上述兩種佈局的框架結(jié)構(gòu)，常用於文字資訊量少的時尚類和設(shè)計類網(wǎng)站。其優(yōu)點是佈局隨意，外觀漂亮，吸引人。缺點是顯示速度慢。

498.7.2Web介面的色彩

確定網(wǎng)站的標準色彩不同的色彩搭配產(chǎn)生不同的效果，並可能影響到訪問者的情緒。以紅、綠、藍三色稱為三基色其他的色彩都可以用這三種色彩調(diào)和而成。底色應(yīng)應(yīng)柔和、素雅柔和的底色配上深色文字，讀起來自然，流暢。508.7.2Web介面的色彩網(wǎng)頁色彩搭配的原則：色彩的鮮明性網(wǎng)頁的色彩要鮮豔，容易引人注目。

色彩的獨特性要有與眾不同的色彩，使得大家對網(wǎng)頁的印象強烈。

色彩的合適性色彩和網(wǎng)頁要表達的內(nèi)容氣氛相適合。色彩的聯(lián)想性不同色彩會產(chǎn)生不同的聯(lián)想，選擇色彩要和網(wǎng)頁的內(nèi)涵相關(guān)聯(lián)。518.7.3Web介面的字體

字體是每一個網(wǎng)站的必要組件，選擇字體和顏色，和其他頁面元素一起產(chǎn)生一個視覺效果。

52常用的英文字體（1）Serif字體

（2）Sans-Serif字體

（3）TrueType字體

53常用的英文字體Serif字體Serif是在字母主要筆劃的結(jié)束處加上的小裝飾筆劃。TimesNewRoman是一個Serif字體的例子。Serif引導(dǎo)眼睛隨著打字線移動，提高了可讀性。Serif字體最適合於正文文本。

54常用的英文字體Sans-Serif字體Sans-Serif字體沒有小裝飾筆劃，Arial是一個Sans-Serif的例子。字元的外觀被減少到只含有必要的筆劃。Sans-Serif文本必須逐個字母的閱讀。建議在小尺寸文本和非常大的文本中使用。通常，Serif字體和一個Sans-Serif字體就可以在網(wǎng)頁上提供一個較好的文本組合。

55常用的英文字體TrueType字體許多字體都是TrueType，即可以產(chǎn)生任意尺寸而不降低字母品質(zhì)。TrueType是蘋果公司開發(fā)的一項數(shù)字技術(shù)，現(xiàn)在被Apple和Microsoft操作系統(tǒng)使用。TimesNewRoman和Arial都是TrueType字體。

56運用不同英文字體的網(wǎng)頁

57常用的中文字體

Web介面中常用的中文字體有宋體、仿宋體、楷體和黑體。除這四種基本字體外，還有多種可選用的字體如書宋體、報宋體、隸書體、美黑體、廣告體、行草體等。漢字大小定為九個等級，按初、一、二、三、四、五、六、七、八排列，在字型大小等級之間又增加一些字型大小，並取名為小幾號字，如小四號、小五號等。

58常用的中文字體正文中的中文字體可以採用傳統(tǒng)媒體中的各種字體作為Web介面正文中的字體。根據(jù)Web網(wǎng)頁中的不同要求，選擇相應(yīng)的字體和字型大小。常見正文中文字體用法如表8-1所示。59常用的中文字體標題中的中文字體網(wǎng)頁應(yīng)該重視標題的處理，把標題排版作為版面修飾的主要手段。標題的字體變化更為講究，用於網(wǎng)頁排版系統(tǒng)一般要配十幾到幾十種字體，才能滿足標題用字的需要。網(wǎng)頁標題一般無分級要求，字形普遍要比圖書標題大，字體的選擇多樣，字形的變化修飾更為豐富。

60常見正文中文字體用法

名稱正文字體正文字型大小圖書書宋(宋體)五號、小五號工具書書宋(宋體)小五號、六號報紙報宋小五號、六號公文仿宋三號、四號期刊雜誌書宋、細等體五號、小五號、六號61使用字體的原則

整個網(wǎng)站上的字體應(yīng)該保持使用的一致網(wǎng)站中可能會使用多種字體，但是同一種字體應(yīng)該表示相同類型的數(shù)據(jù)或者資訊。文字的顏色應(yīng)該一致，讓用戶可以容易的確定不同文本和顏色所代表的內(nèi)容。為了讓字體匹配網(wǎng)站的總體概念，必須要意識到每一個字體變化和可以使用的範圍。

62使用字體的原則考慮字體如何適應(yīng)網(wǎng)頁，以及字體與整個設(shè)計的關(guān)係。選擇的字體和整個頁面及網(wǎng)站應(yīng)融為一體。設(shè)計元素例如頁邊框，行間距，背景顏色和前景顏色等都可以影響最終的結(jié)果。通過字體不同的安排，可以讓網(wǎng)站產(chǎn)生豐富變化的外觀和感覺。638.7.4Web介面的動畫與多媒體

動畫、音頻和視頻這樣的多媒體可以補充平淡的文本或者二維圖形，也補充網(wǎng)站的視覺設(shè)計、音調(diào)和消息等。

Web設(shè)計者可以使用很多當前Web設(shè)計中的多媒體處理工具和技術(shù)；但是帶寬以及流覽器的支持能力限制了多媒體技術(shù)的迅速採用。為了充分享受新技術(shù)，通常需要大帶寬、流覽器插件或第三方應(yīng)用程式的支持。

64WEB中的動畫動畫是區(qū)別Web和其他媒體的一個重要展示形式，動畫賦予了用戶運動和投入的感受。動畫可以分為不同的級別，從簡單的動畫GIF圖像到三維以及虛擬環(huán)境。最常用的基本動畫類型是GIF、Rollover和MacromediaFlash檔。動畫GIF是靜止圖像的彙集，可以按照指定的序列號和速度重複運動。許多標誌廣告就是動畫GIF。65WEB中的動畫JavaApplet是經(jīng)常被用來製作互聯(lián)網(wǎng)上動畫效果的程式設(shè)計語言。MacromediaFlash檔在網(wǎng)站設(shè)計中被廣泛地接受。Flash引入了一種新的動畫形式。它在帶寬有限的情況下提供了媒體豐富的內(nèi)容。Flash允許設(shè)計者創(chuàng)建吸引人的動畫網(wǎng)站，為通常的靜態(tài)站點提供了一種新的選擇。668.7.5Web介面上的導(dǎo)航

對於Web站點來說，需要包含導(dǎo)航條，用戶利用導(dǎo)航的提示在資訊的空間裏移動。真實世界的導(dǎo)航觀點在Web中常被採用。應(yīng)該注意，Web不是真實的世界，Web導(dǎo)航應(yīng)該幫助用戶理解他們在哪里、可以去哪里、怎樣獲得想要的東西。67Web介面上的導(dǎo)航為使用戶得到真實的感覺，必須充分考慮可見性、標記和導(dǎo)航元素的佈局。Web頁上僅有五個基本區(qū)域可放置導(dǎo)航元素：頂部底部左側(cè)右側(cè)中央

688.8Web介面設(shè)計技術(shù)與工具

要設(shè)計好的Web介面，需要有良好的設(shè)計工具，隨著Internet網(wǎng)路的發(fā)展，國際組織和許多互聯(lián)網(wǎng)軟體開發(fā)商制訂了若干標準，開發(fā)了不同的Web介面設(shè)計工具。本節(jié)對一些常見的技術(shù)和工具進行簡單介紹。

698.8.1Web介面設(shè)計技術(shù)基礎(chǔ)

超文本標記語言HTML

客戶端腳本語言JavaScript

JavaApplet

伺服器端腳本語言

701.超文本標記語言HTMLHTML已經(jīng)成為表示W(wǎng)eb文檔資訊的標準方法，是構(gòu)成Web頁面的主要工具。HTML是用來表示網(wǎng)上資訊的符號標記語言，是一個跨平臺語言。HTML標準定義了構(gòu)成語言的每一個獨立元素，這些元素是說明如何在流覽器中顯示HTML文檔的指令或標記符。從結(jié)構(gòu)上講，HTML檔由各種標記元素組成，用於組織檔的內(nèi)容和指導(dǎo)檔的輸出格式。71（1）基本標記元素（部分）

標記元素功能含義<HTML></HTML>創(chuàng)建一個HTML文檔，通知流覽器該檔含有HTML標記碼<HEAD></HEAD>設(shè)置文檔標題以及其他不在Web網(wǎng)頁上顯示的資訊<TITLE></TITLE>網(wǎng)頁標題，將顯示在流覽器的標題欄中<BODY></BODY>設(shè)置文檔的可見部分，它包含了檔的內(nèi)容<BODYBGCOLOR=？>設(shè)置背景顏色，使用顏色名或十六進制值<BODYBACKGROUND=？>設(shè)置背景圖片<BODYTEXT=？>設(shè)置文本文字顏色，使用顏色名或十六進制值<BODYLINK=？>設(shè)置超級鏈接文字的顏色，使用顏色名或十六進制值<BODYVLINK=？>設(shè)置已訪問過的超級鏈接文字的顏色，使用顏色名或十六進制值<BODYALINK=？>設(shè)置滑鼠懸停於超級鏈接文字的顏色，使用顏色名或十六進制值<H1></H1>創(chuàng)建最大的標題，在HTML中有六種標題

72（2）圖形標記元素

目前能被Web流覽器直接解釋的常見圖像格式有：GIF格式(.GIF檔，支持256色)；X位圖格式(.XBM檔，黑白圖像)；JPEG格式(.JPG、.JPEG檔，支持RGB色)。標記元素功能含義<IMGSRC="name"ALIGN=?BORDER=?WIDTH=?HEIGHT=?>添加一個圖像。SRC給定圖片檔的定位，ALIGN屬性定義圖與文本行的對齊方式；BORDER屬性設(shè)置圍繞一個圖像的邊框的大小；WIDTH和HEIGHT分別重新定義圖像的寬度和高度。<HRSIZE=?WIDTH=?NOSHADE>加入一條水平線，SIZE設(shè)置水平線的大小，WIDTH設(shè)置水平線的寬度，NOSHADE表示創(chuàng)建無陰影的水平線73（3）表格標記元素（部分）標記元素功能含義<TABLEBORDER=#CELLSPACING=#CELLPADDING=#WIDTH=#or%>定義表格，BORDER屬性表示表格邊框粗細程度，CELLSPACING屬性用於設(shè)置表格格子之間空間的大小，CELLPADDING用來設(shè)置表格格子邊框與其內(nèi)部內(nèi)容之間空間的大小,WIDTH屬性是用來定義表格寬度<CAPTION></CAPTION>定義表格標題<TRALIGN=?VALIGN=?>表示一個新的表格行的開始，屬性ALIGN表示橫向?qū)R方式<THALIGN=?VALIGN=?COLSPAN=?ROWSPAN=?>在表格的當前行裏產(chǎn)生一個新的表項單元，<TH>表示一個表項標題(TableHeader)單元，

COLSPAN及ROWSPAN表示進行橫向及縱向地擴展表項單元<TDALIGN=?VALIGN=?COLSPAN=?ROWSPAN=?>在表格的當前行裏產(chǎn)生一個新的表項單元，<TD>表示一個表項數(shù)據(jù)(TableData)單元，其他屬性的含義同上74（4）表單標記元素(部分)

標記元素功能含義<FORM></FORM>創(chuàng)建所有表單<INPUTTYPE="TEXT"NAME="name"SIZE=#>創(chuàng)建一個單行文本輸入域，SIZE設(shè)置以字元計數(shù)的寬度文本<INPUTTYPE="PASSWORD"NAME="name"VALUE="*"SIZE=#>創(chuàng)建一個口令輸入域，輸入的字元全部顯示為“*”<TEXTAREANAME="name"COLS=#ROWS=#></TEXTAREA>創(chuàng)建一個文本框區(qū)域，列的數(shù)目設(shè)置寬度，行的數(shù)目設(shè)置高度<INPUTTYPE="RADIO"NAME="name"VALUE="x">創(chuàng)建一個單選按鈕，文字在標籤後面<INPUTTYPE="CHECKBOX"NAME="name">創(chuàng)建一個複選框，文字在標籤後面75【例8-1】Demo.html【例8-1】用任一編輯器建立文本檔Demo.html。<HTML><HEAD><TITLE>網(wǎng)頁標題顯示於流覽器窗口的標題欄</TITLE></HEAD><BODYBGCOLOR="#E7F9F3"><H1>H1設(shè)定一級標題</H1><BR><B>黑體字</B><BR><I>斜體字</I><PALIGN="right"><FONTSIZE=5COLOR="red">紅色5號字</FONT><BR><BR><BR><BR><BR><PALIGN="center"><A>這裏是一個文檔內(nèi)部錨點的起始處</A></BODY></HTML>76Demo.html的運行效果77【例8-2】用HTML實現(xiàn)表單實例

<HTML><HEAD><TITLE>HTML表單實例</TITLE></HEAD><BODYBGCOLOR="#E7F9F3"><FORM>用戶名：<INPUTTYPE="TEXT"NAME="username"SIZE=10>口令：<INPUTTYPE="PASSWORD"NAME="password"SIZE=8><HR>選學(xué)內(nèi)容：<INPUTTYPE="CHECKBOX"NAME="ck1"VALUE="W">Word<INPUTTYPE="CHECKBOX"NAME="ck2"VALUE="E">Excel<INPUTTYPE="CHECKBOX"NAME="ck3"VALUE="I">Internet<P>課程類別：<INPUTTYPE="RADIO"NAME="class"VALUE="must">必修<INPUTTYPE="RADIO"NAME="class"VALUE="option">選修

<HR>你的電腦是哪一種類型：

<SELECTNAME="computer"><OPTION>PC<OPTION>UNIX<OPTION>MAC<OPTION>OTHER</SELECT><P>備註：<BR><TEXTAREANAME="comment"ROWS=5COLS=25>請在此填寫補充內(nèi)容</TEXTAREA><PALIGN="center"><INPUTTYPE="SUBMIT"VALUE="確定"><INPUTTYPE="RESET"VALUE="重填"></FORM></BODY></HTML>78用HTML實現(xiàn)表單實例效果792．客戶端腳本語言JavaScript

HTML無法獨自完成交互和客戶端動態(tài)網(wǎng)頁的任務(wù),JavaScript，它彌補了HTML語言的缺陷。利用JavaScript，可以使得資訊和用戶之間不僅只是一種顯示和流覽的關(guān)係，而是實現(xiàn)了一種即時的、動態(tài)的、可互動式的表達能力。JavaScript是一種內(nèi)嵌於HTML中的腳本語言，它是一種基於對象和事件驅(qū)動並具有安全性能的腳本語言。使用它的目的是與HTML、JavaApplet一起實現(xiàn)在一個Web頁面中鏈接多個對象，與Web客戶交互作用，可用於開發(fā)客戶端的應(yīng)用程式等。80JavaScript的特點（1）一種腳本編寫語言

（2）基於對象的語言

（3）簡單性

（4）安全性

（5）動態(tài)性

（6）跨平臺性

81JavaScript與HTML結(jié)合實例

<html>

<head>

<ScriptLanguage="JavaScript">

//JavaScript在此出現(xiàn)

alert("這是第一個JavaScript例子!");

alert("歡迎你進入JavaScript世界!");

alert("今後我們將共同學(xué)習(xí)JavaScript知識！");

</Script>//JavaScript在此結(jié)束

</Head>

</Html>

//JavaScript代碼由<ScriptLanguage=“JavaScript”>...</Script>說明//alert()是JavaScript的窗口對象方法，其功能是彈出一個具有OK對話框並顯示括弧中的字串82JavaScript與HTML結(jié)合實例運行結(jié)果833．JavaApplet

JavaAapplet是訪問Internet伺服器，在Internet上傳播的，自動安裝的，可作為部分Web文檔運行的小應(yīng)用程式。當JavaAapplet到達客戶端，它被限制訪問資源，以使它能夠在不受病毒威脅和破壞數(shù)據(jù)完整性的情況下生成一個二進位的多媒體用戶介面以及完成複雜的計算。它還提供了裝載和顯示圖像的方法，以及裝載和播放語音片斷的方法。

84JavaAapplet是一種基於窗口的程式JavaAapplet是由事件驅(qū)動的。一個JavaAapplet類似於系列提供中斷服務(wù)的副程式的集合。在事件發(fā)生之前，JavaAapplet一直處於等待狀態(tài)中。一旦事件發(fā)生，JavaAapplet就會採取相應(yīng)措施並迅速將控制權(quán)交給AWT。針對特定的事件作出相應(yīng)的動作並把控制交給AWT的運行環(huán)境。用戶可以與JavaAapplet進行交互，而不是通過其他方式。這些交互被送至JavaAapplet，JavaAapplet必須作出回應(yīng)的事件。

85JavaApplet在網(wǎng)頁中實現(xiàn)放大鏡的例子

<appletarchive="AnLens.jar"code="AnLens.class"width="320"height="256"><paramname="credits"value="AppletbyFabioCiucci"><paramname="distdval"value="10">…</applet>AnLens.jar是JavaApplet的原始檔案。其效果如下圖。86874．伺服器端腳本語言

目前流行的三大伺服器端腳本語言是ASP、PHP、JSP。ASP（Active

Server

Pages），是一個Web伺服器端的開發(fā)環(huán)境，

利用它可以產(chǎn)生和運行動態(tài)的、交互的、高性能的Web服務(wù)應(yīng)用程式。

PHP（HyperTextPreprocess）是一種跨平臺的伺服器端的嵌入式腳本語言。它大量地借用C、Java和Perl語言的語法，並耦合PHP自己的特性，使Web開發(fā)者能夠快速地寫出動態(tài)生成頁面。

JSP（Java

Server

Page）是Sun公司推出的新一代站點開發(fā)語言，它完全解決了目前ASP，PHP的一個通病—腳本級執(zhí)行。JSP可以在Servlet和JavaBeans的支持下，編寫出功能強大的Web站點程式。

88三大伺服器端腳本語言三者都提供在HTML代碼中混合某種程式代碼、由語言引擎解釋執(zhí)行程式代碼的能力。在ASP、PHP、JSP環(huán)境下，HTML代碼主要負責描述資訊的顯示樣式，而程式代碼則用來描述處理邏輯。普通的HTML頁面只依賴於Web伺服器，而ASP、PHP、JSP頁面需要附加的語言引擎分析和執(zhí)行程式代碼。程式代碼的執(zhí)行結(jié)果被重新嵌入到HTML代碼中，然後一起發(fā)送給流覽器。

898.8.2常用Web介面設(shè)計工具

頁面編輯器

MicroSoft公司的FrontpageMacromedia公司的DreamweaverDreamweaver對於動態(tài)網(wǎng)頁的支持特別好，可以輕而易舉地做出很多眩目的互動頁面特效。Dreamweaver與Flash、Firework並稱為Macromedia的網(wǎng)頁製作三劍客。輔助工具

AceHTMLPro6.0—全功能的

HTML&JavaScript編輯器。AntennaWebDesignStudio—強大的可視化網(wǎng)頁設(shè)計軟體。EasyHTML—簡單的所見即所得的HTML編輯器，有固定、類似流覽器的介面。EasyWebEditor—是一個

Web發(fā)佈工具，允許不了解HTML而在所見即所得環(huán)境中編輯Web網(wǎng)頁。

908.8.3Web介面設(shè)計新技術(shù)

Web3D圖形技術(shù)語音Web技術(shù)

911.Web3D圖形技術(shù)（1）Web3D虛擬現(xiàn)實建模語言VRML

VRML是3D圖形和多媒體技術(shù)通用交換的檔格式，它描述互動式的3D對象和場景。它不僅應(yīng)用在互聯(lián)網(wǎng)上，也可以應(yīng)用在工程和科學(xué)可視化、多媒體、娛樂遊戲、互聯(lián)網(wǎng)3D圖形、教育、虛擬社區(qū)等領(lǐng)域。由於網(wǎng)上傳輸?shù)氖悄Ｐ蜋n，故其傳輸量大大小於視頻圖像。

92虛擬法國巴黎凱旋門及周圍的3D場景效果931.Web3D圖形技術(shù)（2）Web3D圖形即時渲染引擎即時渲染引擎的作用是解釋並翻譯實施場景模型檔的語法，即時渲染從伺服器端傳來的場景模型檔，在網(wǎng)頁訪問者的客戶端逐幀、即時地顯示3D圖形。

即時渲染引擎是實施互聯(lián)網(wǎng)3D圖形的關(guān)鍵技術(shù)，它的檔大小、圖形渲染品質(zhì)、渲染速度、以及它能提供的交互性都直接反映其解決方案的優(yōu)劣。

941.Web3D圖形技術(shù)（3）Web3D圖形新標準

可擴展3D((Extensible3D,X3D)是一個軟體標準，定義了如何在多媒體中整合基於網(wǎng)路傳播的交互三維內(nèi)容。X3D是

VRML的繼承和改進，提供了以下的新特性：更先進的應(yīng)用程式介面，新添的數(shù)據(jù)編碼格式，嚴格的一致性，組件化結(jié)構(gòu)。

951.Web3D圖形技術(shù)（4）Web3D圖形建模與製作工具

3DSmax可用於建立場景模型，安裝相應(yīng)的輸出插件，再直接建立場景模型檔?，F(xiàn)在最有名的Web3D圖形軟體公司，如cult3D和Viwepoint都可以在3DSmax中直接輸出它們的專用檔格式的場景模型檔。

961.Web3D圖形技術(shù)（5）Java3DJava3D的本質(zhì)是一個互動式三維圖形應(yīng)用編程介面（API），是Java2SDK的標準擴展，它可以和普通的Java2D、Swing、AWT等很好地結(jié)合，其目標是：1）用戶能夠在流覽器中觀看或操作三維動態(tài)圖形。2）一次編程，到處運行。3）適應(yīng)不同的軟體平臺。4）適應(yīng)各種顯示環(huán)境和輸入設(shè)備。

971.Web3D圖形技術(shù)（6）Web3D圖形技術(shù)應(yīng)用

互聯(lián)網(wǎng)上的互動式3D圖形技術(shù)Wed3D正在取得新的進展，最具魅力的Wed3D圖形將在互聯(lián)網(wǎng)上有廣泛應(yīng)用，如電子商務(wù)、聯(lián)機娛樂休閒與遊戲、科技與工程的可視化、教育、醫(yī)學(xué)、地理資訊、虛擬社區(qū)。