《人機(jī)交互》課件第8章-Web界面設(shè)計(jì)

第8章Web界面設(shè)計(jì)1本章內(nèi)容簡(jiǎn)介

互聯(lián)網(wǎng)上Web站點(diǎn)和頁(yè)面的設(shè)計(jì)基礎(chǔ)

Web站點(diǎn)的信息交互模型和結(jié)構(gòu)

Web界面設(shè)計(jì)的基本思想和原則

Web界面設(shè)計(jì)的工具和技術(shù)

Web界面設(shè)計(jì)的可用性評(píng)估

一些典型的Web站點(diǎn)實(shí)例

28.1Web基礎(chǔ)

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

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

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

4WWW-環(huán)球信息網(wǎng)絡(luò)空間簡(jiǎn)單來(lái)說(shuō)，WWW是建立在客戶(hù)/服務(wù)器模型之上，構(gòu)成的一個(gè)環(huán)球信息網(wǎng)絡(luò)空間，主要使用：超文本標(biāo)記語(yǔ)言（HypertextMarkupLanguage，HTML）超文本傳輸協(xié)議（HypertextTransportProtocols，

HTTP）通過(guò)Internet把遍布世界各地的服務(wù)器連接起來(lái)，它能夠提供各種Internet服務(wù)，具有一致用戶(hù)界面的信息瀏覽功能。

5Web頁(yè)面的發(fā)展趨勢(shì)Web的一個(gè)發(fā)展趨勢(shì)，是圖形Web頁(yè)面的爆炸性發(fā)展。網(wǎng)上瀏覽中包括了大量使用的動(dòng)態(tài)圖形，使圖形Web遍布網(wǎng)絡(luò)的各個(gè)角落。

新一代Web信息描述標(biāo)準(zhǔn)XML，能更詳盡地描述文檔的結(jié)構(gòu)信息，具有比HTML有更強(qiáng)大的功能，為Web的發(fā)展提供了強(qiáng)有力的支持。

68.1.2超文本與超媒體

超文本（Hypertext）是一種使用于文本、圖形或計(jì)算機(jī)的信息的組織形式，是一種非線(xiàn)性的信息組織形式。它使得單一的信息元素之間相互交叉引用，這種引用并不是通過(guò)復(fù)制來(lái)實(shí)現(xiàn)的，而是通過(guò)指向?qū)Ψ降牡刂纷址畞?lái)指引用戶(hù)獲取相應(yīng)的信息。

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

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

98.2Web信息交互模型

用來(lái)解釋W(xué)eb的人機(jī)界面性質(zhì)的一個(gè)模型，它提出網(wǎng)頁(yè)是用戶(hù)和知識(shí)之間的界面。對(duì)于信息提供者來(lái)說(shuō)包括信息的表達(dá)。對(duì)于使用者來(lái)說(shuō)則是信息的獲取。信息的表達(dá)與獲取分別受到兩者認(rèn)知結(jié)構(gòu)的制約。10Web信息交互模型圖8-1Web信息交互模型知識(shí)信息提供者信息一致性動(dòng)態(tài)性認(rèn)知結(jié)構(gòu)知識(shí)數(shù)據(jù)復(fù)雜信息過(guò)程信息網(wǎng)絡(luò)空間用戶(hù)認(rèn)知結(jié)構(gòu)11Web信息交互模型模型涉及到信息的三種類(lèi)型數(shù)據(jù)：當(dāng)一條信息被反復(fù)、簡(jiǎn)單的提供時(shí)稱(chēng)為數(shù)據(jù)，比如機(jī)票價(jià)格。復(fù)雜信息：而用來(lái)敘述事件時(shí)稱(chēng)為復(fù)雜信息，如多媒體信息。過(guò)程性信息：在信息有明確目標(biāo)，并相互作用時(shí)稱(chēng)為過(guò)程性信息，如在線(xiàn)練習(xí)、在線(xiàn)測(cè)試等。

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

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

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

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

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

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

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

站點(diǎn)結(jié)構(gòu)

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

物理結(jié)構(gòu)描述文檔的實(shí)際位置及顯示方式。超文本結(jié)構(gòu)中最常用層次結(jié)構(gòu)層次型結(jié)構(gòu)按信息的必要性來(lái)改變信息的顯示方式。根網(wǎng)頁(yè)是站點(diǎn)的主頁(yè)，層次以根網(wǎng)頁(yè)開(kāi)始。用戶(hù)深入站點(diǎn)時(shí)，選擇趨向于越來(lái)越具體，直到找到目標(biāo)或葉子網(wǎng)頁(yè)。層次結(jié)構(gòu)通過(guò)深度和廣度來(lái)描述。

188.4.1站點(diǎn)架構(gòu)和導(dǎo)航設(shè)計(jì)站點(diǎn)的導(dǎo)航設(shè)計(jì)導(dǎo)航系統(tǒng)對(duì)訪(fǎng)問(wèn)者來(lái)說(shuō)是路徑指示系統(tǒng)。站點(diǎn)訪(fǎng)問(wèn)者通過(guò)導(dǎo)航系統(tǒng)尋找需要的信息。用戶(hù)感覺(jué)到能以滿(mǎn)意的方式找到所需信息時(shí)，導(dǎo)航系統(tǒng)才是合適的。由于用戶(hù)的差異，不可能實(shí)現(xiàn)完美的導(dǎo)航系統(tǒng)。19兼顧不同瀏覽器的設(shè)計(jì)

原因站點(diǎn)瀏覽者可能使用不同類(lèi)型和版本的瀏覽器。以某一個(gè)瀏覽器的某一個(gè)版本為依據(jù)編寫(xiě)的網(wǎng)頁(yè)程序，可能在其它的瀏覽器或其它版本上不能正常顯示或運(yùn)行。方法通過(guò)使用JavaScript等編程工具或功能，探測(cè)用戶(hù)瀏覽器的類(lèi)型和版本等參數(shù)及對(duì)于某特定功能的支持情況，然后根據(jù)探測(cè)結(jié)果顯示適用于特定瀏覽器的網(wǎng)頁(yè)內(nèi)容。根據(jù)用戶(hù)瀏覽器分布情況決定設(shè)計(jì)所面向的瀏覽器類(lèi)別和版本。208.5Web界面設(shè)計(jì)所涉及的問(wèn)題

Web界面設(shè)計(jì)中要考慮的基本問(wèn)題包括：

Web界面設(shè)計(jì)基本原則

Web界面規(guī)劃

218.5.1Web界面設(shè)計(jì)基本原則

了解瀏覽者的心理狀態(tài)

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

減少瀏覽層次

特點(diǎn)明確

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

Web界面設(shè)計(jì)的3C原則

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

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

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

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

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

concise（簡(jiǎn)潔

）

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

308.5.1Web界面設(shè)計(jì)基本原則

Consistent（一致性）

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

確定Web界面設(shè)計(jì)的目標(biāo)企業(yè)Web網(wǎng)站：企業(yè)建立這個(gè)Web網(wǎng)站的目的這個(gè)網(wǎng)站的作用該提供哪些吸引訪(fǎng)問(wèn)者的東西用戶(hù)訪(fǎng)問(wèn)這個(gè)Web網(wǎng)站后，能給他們帶來(lái)什么？

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

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

Web界面概要設(shè)計(jì)包括Web界面框架設(shè)計(jì)

Web界面的內(nèi)容與風(fēng)格的設(shè)計(jì)Web界面設(shè)計(jì)的語(yǔ)言與文化

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

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

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

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

Web界面的風(fēng)格包括站點(diǎn)的標(biāo)志、色彩、字體、布局、交互方式、內(nèi)容價(jià)值、存在意義等。一個(gè)杰出的網(wǎng)站需要整體的形象包裝和設(shè)計(jì)。為兒童設(shè)計(jì)的網(wǎng)站應(yīng)當(dāng)使用比較豐富的色彩和圖形，并且較多使用動(dòng)畫(huà)和聲音等多媒體表現(xiàn)工具。為老年人設(shè)計(jì)的網(wǎng)站需要考慮采用較大的字體、直截了當(dāng)?shù)男畔@示和簡(jiǎn)單的瀏覽方式，以適用老年人可能逐漸減弱的視力和記憶力41體現(xiàn)兒童特點(diǎn)的迪斯尼網(wǎng)站

428.6.3Web界面設(shè)計(jì)的語(yǔ)言與文化

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

438.7Web界面設(shè)計(jì)要素

Web界面設(shè)計(jì)要素包括：Web界面布局Web界面的色彩Web界面的字體Web界面的動(dòng)畫(huà)與多媒體Web界面的導(dǎo)航

448.7.1Web界面布局

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

常用Web頁(yè)面布局的形式：

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

“國(guó)”字形結(jié)構(gòu)布局

左右對(duì)稱(chēng)布局自由式布局

458.7.1Web界面布局“同”字形結(jié)構(gòu)布局頁(yè)面頂部為主菜單，下方左側(cè)為二級(jí)欄目條，右側(cè)為鏈接欄目條，屏幕中間顯示具體的內(nèi)容。

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

468.7.1Web界面布局2．“國(guó)”字形結(jié)構(gòu)布局

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

采取左右分割屏幕的方法形成對(duì)稱(chēng)布局。優(yōu)點(diǎn)是自由活潑，可顯示較多文字和圖像。缺點(diǎn)是兩者有機(jī)結(jié)合較為困難。

488.7.1Web界面布局4．自由式布局

自由式布局打破上述兩種布局的框架結(jié)構(gòu)，常用于文字信息量少的時(shí)尚類(lèi)和設(shè)計(jì)類(lèi)網(wǎng)站。其優(yōu)點(diǎn)是布局隨意，外觀(guān)漂亮，吸引人。缺點(diǎn)是顯示速度慢。

498.7.2Web界面的色彩

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

色彩的獨(dú)特性要有與眾不同的色彩，使得大家對(duì)網(wǎng)頁(yè)的印象強(qiáng)烈。

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

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

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

（2）Sans-Serif字體

（3）TrueType字體

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

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

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

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

57常用的中文字體

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

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

60常見(jiàn)正文中文字體用法

名稱(chēng)正文字體正文字號(hào)圖書(shū)書(shū)宋(宋體)五號(hào)、小五號(hào)工具書(shū)書(shū)宋(宋體)小五號(hào)、六號(hào)報(bào)紙報(bào)宋小五號(hào)、六號(hào)公文仿宋三號(hào)、四號(hào)期刊雜志書(shū)宋、細(xì)等體五號(hào)、小五號(hào)、六號(hào)61使用字體的原則

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

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

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

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

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

對(duì)于Web站點(diǎn)來(lái)說(shuō)，需要包含導(dǎo)航條，用戶(hù)利用導(dǎo)航的提示在信息的空間里移動(dòng)。真實(shí)世界的導(dǎo)航觀(guān)點(diǎn)在Web中常被采用。應(yīng)該注意，Web不是真實(shí)的世界，Web導(dǎo)航應(yīng)該幫助用戶(hù)理解他們?cè)谀睦铩⒖梢匀ツ睦?、怎樣獲得想要的東西。67Web界面上的導(dǎo)航為使用戶(hù)得到真實(shí)的感覺(jué)，必須充分考慮可見(jiàn)性、標(biāo)記和導(dǎo)航元素的布局。Web頁(yè)上僅有五個(gè)基本區(qū)域可放置導(dǎo)航元素：頂部底部左側(cè)右側(cè)中央

688.8Web界面設(shè)計(jì)技術(shù)與工具

要設(shè)計(jì)好的Web界面，需要有良好的設(shè)計(jì)工具，隨著Internet網(wǎng)絡(luò)的發(fā)展，國(guó)際組織和許多互聯(lián)網(wǎng)軟件開(kāi)發(fā)商制訂了若干標(biāo)準(zhǔn)，開(kāi)發(fā)了不同的Web界面設(shè)計(jì)工具。本節(jié)對(duì)一些常見(jiàn)的技術(shù)和工具進(jìn)行簡(jiǎn)單介紹。

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

超文本標(biāo)記語(yǔ)言HTML

客戶(hù)端腳本語(yǔ)言JavaScript

JavaApplet

服務(wù)器端腳本語(yǔ)言

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

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

72（2）圖形標(biāo)記元素

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

COLSPAN及ROWSPAN表示進(jìn)行橫向及縱向地?cái)U(kuò)展表項(xiàng)單元<TDALIGN=?VALIGN=?COLSPAN=?ROWSPAN=?>在表格的當(dāng)前行里產(chǎn)生一個(gè)新的表項(xiàng)單元，<TD>表示一個(gè)表項(xiàng)數(shù)據(jù)(TableData)單元，其它屬性的含義同上74（4）表單標(biāo)記元素(部分)

標(biāo)記元素功能含義<FORM></FORM>創(chuàng)建所有表單<INPUTTYPE="TEXT"NAME="name"SIZE=#>創(chuàng)建一個(gè)單行文本輸入域，SIZE設(shè)置以字符計(jì)數(shù)的寬度文本<INPUTTYPE="PASSWORD"NAME="name"VALUE="*"SIZE=#>創(chuàng)建一個(gè)口令輸入域，輸入的字符全部顯示為“*”<TEXTAREANAME="name"COLS=#ROWS=#></TEXTAREA>創(chuàng)建一個(gè)文本框區(qū)域，列的數(shù)目設(shè)置寬度，行的數(shù)目設(shè)置高度<INPUTTYPE="RADIO"NAME="name"VALUE="x">創(chuàng)建一個(gè)單選按鈕，文字在標(biāo)簽后面<INPUTTYPE="CHECKBOX"NAME="name">創(chuàng)建一個(gè)復(fù)選框，文字在標(biāo)簽后面75【例8-1】Demo.html【例8-1】用任一編輯器建立文本文件Demo.html。<HTML><HEAD><TITLE>網(wǎng)頁(yè)標(biāo)題顯示于瀏覽器窗口的標(biāo)題欄</TITLE></HEAD><BODYBGCOLOR="#E7F9F3"><H1>H1設(shè)定一級(jí)標(biāo)題</H1><BR><B>黑體字</B><BR><I>斜體字</I><PALIGN="right"><FONTSIZE=5COLOR="red">紅色5號(hào)字</FONT><BR><BR><BR><BR><BR><PALIGN="center"><AHREF="http://">點(diǎn)擊這里將超鏈到山東大學(xué)主頁(yè)</A><P><BR><BR><AHREF="#next">點(diǎn)擊這里將超鏈到下面的錨點(diǎn)</A><PALIGN="center"><AHREF="mailto:xueqingli@">有意見(jiàn)請(qǐng)告訴我</A><P><ANAME="next">這里是一個(gè)文檔內(nèi)部錨點(diǎn)的起始處</A></BODY></HTML>76Demo.html的運(yùn)行效果77【例8-2】用HTML實(shí)現(xiàn)表單實(shí)例

<HTML><HEAD><TITLE>HTML表單實(shí)例</TITLE></HEAD><BODYBGCOLOR="#E7F9F3"><FORM>用戶(hù)名：<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>課程類(lèi)別：<INPUTTYPE="RADIO"NAME="class"VALUE="must">必修<INPUTTYPE="RADIO"NAME="class"VALUE="option">選修

<HR>你的計(jì)算機(jī)是哪一種類(lèi)型：

<SELECTNAME="computer"><OPTION>PC<OPTION>UNIX<OPTION>MAC<OPTION>OTHER</SELECT><P>備注：<BR><TEXTAREANAME="comment"ROWS=5COLS=25>請(qǐng)?jiān)诖颂顚?xiě)補(bǔ)充內(nèi)容</TEXTAREA><PALIGN="center"><INPUTTYPE="SUBMIT"VALUE="確定"><INPUTTYPE="RESET"VALUE="重填"></FORM></BODY></HTML>78用HTML實(shí)現(xiàn)表單實(shí)例效果792．客戶(hù)端腳本語(yǔ)言JavaScript

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

（2）基于對(duì)象的語(yǔ)言

（3）簡(jiǎn)單性

（4）安全性

（5）動(dòng)態(tài)性

（6）跨平臺(tái)性

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

<html>

<head>

<ScriptLanguage="JavaScript">

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

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

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

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

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

</Head>

</Html>

//JavaScript代碼由<ScriptLanguage=“JavaScript”>...</Script>說(shuō)明//alert()是JavaScript的窗口對(duì)象方法，其功能是彈出一個(gè)具有OK對(duì)話(huà)框并顯示括號(hào)中的字符串82JavaScript與HTML結(jié)合實(shí)例運(yùn)行結(jié)果833．JavaApplet

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

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

85JavaApplet在網(wǎng)頁(yè)中實(shí)現(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．服務(wù)器端腳本語(yǔ)言

目前流行的三大服務(wù)器端腳本語(yǔ)言是ASP、PHP、JSP。ASP（Active

Server

Pages），是一個(gè)Web服務(wù)器端的開(kāi)發(fā)環(huán)境，

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

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

JSP（Java

Server

Page）是Sun公司推出的新一代站點(diǎn)開(kāi)發(fā)語(yǔ)言，它完全解決了目前ASP，PHP的一個(gè)通病—腳本級(jí)執(zhí)行。JSP可以在Servlet和JavaBeans的支持下，編寫(xiě)出功能強(qiáng)大的Web站點(diǎn)程序。

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

898.8.2常用Web界面設(shè)計(jì)工具

頁(yè)面編輯器

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

AceHTMLPro6.0—全功能的

HTML&JavaScript編輯器。AntennaWebDesignStudio—強(qiáng)大的可視化網(wǎng)頁(yè)設(shè)計(jì)軟件。EasyHTML—簡(jiǎn)單的所見(jiàn)即所得的HTML編輯器，有固定、類(lèi)似瀏覽器的界面。EasyWebEditor—是一個(gè)

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

908.8.3Web界面設(shè)計(jì)新技術(shù)

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

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

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

92虛擬法國(guó)巴黎凱旋門(mén)及周?chē)?D場(chǎng)景效果931.Web3D圖形技術(shù)（2）Web3D圖形實(shí)時(shí)渲染引擎實(shí)時(shí)渲染引擎的作用是解釋并翻譯實(shí)施場(chǎng)景模型文件的語(yǔ)法，實(shí)時(shí)渲染從服務(wù)器端傳來(lái)的場(chǎng)景模型文件，在網(wǎng)頁(yè)訪(fǎng)問(wèn)者的客戶(hù)端逐幀、實(shí)時(shí)地顯示3D圖形。

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

941.Web3D圖形技術(shù)（3）Web3D圖形新標(biāo)準(zhǔn)

可擴(kuò)展3D((Extensible3D,X3D)是一個(gè)軟件標(biāo)準(zhǔn)，定義了如何在多媒體中整合基于網(wǎng)絡(luò)傳播的交互三維內(nèi)容。X3D是

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

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

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

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

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

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