Web界面设计课件

Web介面設計*8.1Web基礎

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

*8.1.1Web的出現與發展

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

*WWW-環球資訊網絡空間簡單來說，WWW是建立在客戶/伺服器模型之上，構成的一個環球資訊網絡空間，主要使用：超文本標記語言（HypertextMarkupLanguage，HTML）超文本傳輸協議（HypertextTransportProtocols，

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

*Web頁面的發展趨勢Web的一個發展趨勢，是圖形Web頁面的爆炸性發展。網上流覽中包括了大量使用的動態圖形，使圖形Web遍佈網路的各個角落。

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

*8.1.2超文本與超媒體

超文本（Hypertext）是一種使用於文本、圖形或電腦的資訊的組織形式，是一種非線性的資訊組織形式。它使得單一的資訊元素之間相互交叉引用，這種引用並不是通過複製來實現的，而是通過指向對方的地址字串來指引用戶獲取相應的資訊。

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

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

*8.2Web資訊交互模型

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

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

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

Web資訊設計模型是解釋Web人機介面性質的另一個模型。是一種研究網頁的資訊設計模型。設計模型中要考慮到資訊的兩個方面第一是應該呈現或略去什麼資訊。

第二個方面指的是資訊該如何被表現。*Web資訊設計模型用戶工具設計資訊設計過程信息內容選取通路結構興趣結構執行結構圖8-2Web資訊設計模型提供者工具設計*WEB的三種設計空間結構模式

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

概念設計涉及的工作：分析、確定站點的目標和用途。準確定義所建立Web網站及站點的規範。事先建立好站點的架構和導航設計。兼顧不同的流覽器。

*8.4.1站點架構和導航設計

站點結構

站點的結構可分為邏輯結構和物理結構:邏輯結構描述文檔間的關係，定義文檔間的鏈接。

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

*8.4.1站點架構和導航設計站點的導航設計導航系統對訪問者來說是路徑指示系統。站點訪問者通過導航系統尋找需要的資訊。用戶感覺到能以滿意的方式找到所需資訊時，導航系統才是合適的。由於用戶的差異，不可能實現完美的導航系統。*兼顧不同流覽器的設計

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

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

Web介面設計基本原則

Web介面規劃

*8.5.1Web介面設計基本原則

瞭解流覽者的心理狀態

內容與形式的統一

減少流覽層次

特點明確

統一整體的形象

Web介面設計的3C原則

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

*8.5.1Web介面設計基本原則2．內容與形式的統一內容指的是Web網站的資訊、數據及文字內容等.形式指的是網頁設計的版式、構圖、佈局、色彩以及它們所呈現出的風格特點等。網頁的形式是為內容服務的，但本身又有自己的獨立性和藝術規律。網頁設計的目的就是為了使網頁更加形象、直觀，更易被觀眾所接受。不同內容的網頁要求用不同的設計形式。

*8.5.1Web介面設計基本原則3．減少流覽層次應儘量把網頁的層次簡要化，力求以最少的點擊次數鏈接到具體的內容。

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

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

concise（簡潔

）

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

*8.5.1Web介面設計基本原則

Consistent（一致性）

各頁面使用相同的頁邊距；文本、圖形間保持相同的間距。各頁面上都放上公司或網站的統一標誌。各頁面應當使用相同的導航圖示。頁面中的每個元素與整個頁面以及站點的色彩和風格上保持一致性。文字的顏色要同圖像的顏色保持一致並注意色彩搭配的和諧。*8.5.1Web介面設計基本原則contrast(對比度)對比是強調某些內容的最有效的辦法之一，好的對比度使內容更易於辨認和接受。常用的對比方法是使用顏色進行對比。另一種實現對比的方法是使用字體變化。可以在文字排版中使用斜體和黑體寫出關鍵內容，但不要濫用，以免不能達到強調效果。*8.5.2Web介面規劃

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

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

以用戶為中心的設計，為用戶的共性設計，同時考慮差異。對目標用戶群的構成進行分析：Web網站是以提供的資訊內容來分類的。對目標用戶的行為方式來分析：按照人機工程學的觀點，行為方式受年齡、性別、地區、種族、職業、生活習俗、受教育程度等因素影響。*8.6Web介面概要設計

Web介面概要設計包括Web介面框架設計

Web介面的內容與風格的設計Web介面設計的語言與文化

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

網站內容設計的原則

:HTML文檔的效果由其自身的品質和流覽器解釋的方法決定。應讓所有的流覽器都能夠正常流覽。網站資訊的組織的總體結構要層次分明，儘量避免形成複雜的網狀結構。要權衡圖像和多媒體資訊的數量，在不影響網站效果的前提下，儘量減少圖像的數量和所占面積。*8.6.2Web介面的內容與風格網站內容設計的原則

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

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

*8.6.3Web介面設計的語言與文化

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

*8.7Web介面設計要素

Web介面設計要素包括：Web介面佈局Web介面的色彩Web介面的字體Web介面的動畫與多媒體Web介面的導航

*8.7.1Web介面佈局

佈局設計應做到整體佈局合理、有序、整體化。

常用Web頁面佈局的形式：

“同”字形結構佈局

“國”字形結構佈局

左右對稱佈局自由式佈局

*8.7.1Web介面佈局“同”字形結構佈局頁面頂部為主菜單，下方左側為二級欄目條，右側為鏈接欄目條，螢幕中間顯示具體的內容。

優點是頁面結構清晰、左右對稱、主次分明，因而得到廣泛的應用。缺點是太過於規矩呆板，需要善於運用細節色彩的變化來調劑。

*8.7.1Web介面佈局2．“國”字形結構佈局

“國”字形結構佈局在“同”字形結構佈局的基礎上，在頁面下方增加一橫條菜單或廣告其優點是充分利用版面、資訊量大、切換方便。有的網站將頁面設計成鏡框的樣式，顯示出網站設計師的品味。*8.7.1Web介面佈局3．左右對稱佈局

採取左右分割螢幕的方法形成對稱佈局。優點是自由活潑，可顯示較多文字和圖像。缺點是兩者有機結合較為困難。

*8.7.1Web介面佈局4．自由式佈局

自由式佈局打破上述兩種佈局的框架結構，常用於文字資訊量少的時尚類和設計類網站。其優點是佈局隨意，外觀漂亮，吸引人。缺點是顯示速度慢。

*8.7.2Web介面的色彩

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

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

色彩的合適性色彩和網頁要表達的內容氣氛相適合。色彩的聯想性不同色彩會產生不同的聯想，選擇色彩要和網頁的內涵相關聯。*8.7.3Web介面的字體

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

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

（2）Sans-Serif字體

（3）TrueType字體

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

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

*常用的英文字體TrueType字體許多字體都是TrueType，即可以產生任意尺寸而不降低字母品質。TrueType是蘋果公司開發的一項數字技術，現在被Apple和Microsoft操作系統使用。TimesNewRoman和Arial都是TrueType字體。

*運用不同英文字體的網頁

*常用的中文字體

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

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

*常見正文中文字體用法

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

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

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

動畫、音頻和視頻這樣的多媒體可以補充平淡的文本或者二維圖形，也補充網站的視覺設計、音調和消息等。

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

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

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

*8.8Web介面設計技術與工具

要設計好的Web介面，需要有良好的設計工具，隨著Internet網路的發展，國際組織和許多互聯網軟體開發商制訂了若干標準，開發了不同的Web介面設計工具。本節對一些常見的技術和工具進行簡單介紹。

*8.8.1Web介面設計技術基礎

超文本標記語言HTML

客戶端腳本語言JavaScript

JavaApplet

伺服器端腳本語言

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

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

*（2）圖形標記元素

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

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

標記元素功能含義<FORM></FORM>創建所有表單<INPUTTYPE="TEXT"NAME="name"SIZE=#>創建一個單行文本輸入域，SIZE設置以字元計數的寬度文本<INPUTTYPE="PASSWORD"NAME="name"VALUE="*"SIZE=#>創建一個口令輸入域，輸入的字元全部顯示為“*”<TEXTAREANAME="name"COLS=#ROWS=#></TEXTAREA>創建一個文本框區域，列的數目設置寬度，行的數目設置高度<INPUTTYPE="RADIO"NAME="name"VALUE="x">創建一個單選按鈕，文字在標籤後面<INPUTTYPE="CHECKBOX"NAME="name">創建一個複選框，文字在標籤後面*【例8-1】Demo.html【例8-1】用任一編輯器建立文本檔Demo.html。<HTML><HEAD><TITLE>網頁標題顯示於流覽器窗口的標題欄</TITLE></HEAD><BODYBGCOLOR="#E7F9F3"><H1>H1設定一級標題</H1><BR><B>黑體字</B><BR><I>斜體字</I><PALIGN="right"><FONTSIZE=5COLOR="red">紅色5號字</FONT><BR><BR><BR><BR><BR><PALIGN="center"><AHREF="">點擊這裏將超鏈到山東大學主頁</A><P><BR><BR><AHREF="#next">點擊這裏將超鏈到下麵的錨點</A><PALIGN="center"><AHREF="mailto:xueqingli@">有意見請告訴我</A><P><ANAME="next">這裏是一個文檔內部錨點的起始處</A></BODY></HTML>*Demo.html的運行效果*【例8-2】用HTML實現表單實例

<HTML><HEAD><TITLE>HTML表單實例</TITLE></HEAD><BODYBGCOLOR="#E7F9F3"><FORM>用戶名：<INPUTTYPE="TEXT"NAME="username"SIZE=10>口令：<INPUTTYPE="PASSWORD"NAME="password"SIZE=8><HR>選學內容：<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>請在此填寫補充內容</TEXTAREA><PALIGN="center"><INPUTTYPE="SUBMIT"VALUE="確定"><INPUTTYPE="RESET"VALUE="重填"></FORM></BODY></HTML>*用HTML實現表單實例效果*2．客戶端腳本語言JavaScript

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

（2）基於對象的語言

（3）簡單性

（4）安全性

（5）動態性

（6）跨平臺性

*JavaScript與HTML結合實例

<html>

<head>

<ScriptLanguage="JavaScript">

//JavaScript在此出現

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

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

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

</Script>//JavaScript在此結束

</Head>

</Html>

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

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

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

*JavaApplet在網頁中實現放大鏡的例子

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

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

Server

Pages），是一個Web伺服器端的開發環境，

利用它可以產生和運行動態的、交互的、高性能的Web服務應用程式。

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

JSP（Java

Server

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

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

*8.8.2常用Web介面設計工具

頁面編輯器

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

AceHTMLPro6.0—全功能的

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

Web發佈工具，允許不了解HTML而在所見即所得環境中編輯Web網頁。

*8.8.3Web介面設計新技術

Web3D圖形技術語音Web技術

*1.Web3D圖形技術（1）Web3D虛擬現實建模語言VRMLVRML是3D圖形和多媒體技術通用交換的檔格式，它描述互動式的3D對象和場景。它不僅應用在互聯網上，也可以應用在工程和科學可視化、多媒體、娛樂遊戲、互聯網3D圖形、教育、虛擬社區等領域。由於網上傳輸的是模型檔，故其傳輸量大大小於視頻圖像。

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

即時渲染引擎是實施互聯網3D圖形的關鍵技術，它的檔大小、圖形渲染品質、渲染速度、以及它能提供的交互性都直接反映其解決方案的優劣。

*1.Web3D圖形技術（3）Web3D圖形新標準

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

VRML的繼承和改進，提供了以下的新特性：更先進的應用程式介面，新添的數據編碼格式，嚴格的一致性，組件化結構。

*1.Web3D圖形技術（4）Web3D圖形建模與製作工具

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

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

*1.Web3D圖形技術（6）Web3D圖形技術應用

互聯網上的互動式3D圖形技術Wed3D正在取得新的進展，最具魅力的Wed3D圖形將在互聯網上有廣泛應用，如電子商務、聯機娛樂休閒與遊戲、科技與工程的可視化、教育、醫學