人機(jī)交互第7章Web界面設(shè)計(jì)

第7章Web界面設(shè)計(jì)本章內(nèi)容簡(jiǎn)介Web相關(guān)概念Web界面設(shè)計(jì)原則Web界面要素設(shè)計(jì)Web界面基本設(shè)計(jì)技術(shù)Web3D界面設(shè)計(jì)技術(shù)7.1Web界面及相關(guān)概念關(guān)于Webweb的本意是蜘蛛網(wǎng)和網(wǎng)的意思，在計(jì)算機(jī)領(lǐng)域中我們稱為網(wǎng)頁(yè)的意思?，F(xiàn)廣泛譯作網(wǎng)絡(luò)、互聯(lián)網(wǎng)等?；ヂ?lián)網(wǎng)是近年來(lái)對(duì)社會(huì)影響最大的技術(shù)進(jìn)步,影響到人類生活的很多方面?；ヂ?lián)網(wǎng)已經(jīng)成為全面支持多媒體，能在多種平臺(tái)上運(yùn)行的龐大信息服務(wù)系統(tǒng)。20世紀(jì)40年代以來(lái)，人們就夢(mèng)想能擁有一個(gè)世界性的信息庫(kù)。在這個(gè)信息庫(kù)中，信息不僅能被全球的人們存取，而且能輕松地鏈接到其他地方的信息，使用戶可以方便快捷地獲得重要的信息。20世紀(jì)50年代末，正處于冷戰(zhàn)時(shí)期。當(dāng)時(shí)美國(guó)軍方為使自己的計(jì)算機(jī)網(wǎng)絡(luò)在受到襲擊時(shí)，即使部分網(wǎng)絡(luò)被摧毀，其余部分仍能保持通信聯(lián)系，便由美國(guó)國(guó)防部的高級(jí)研究計(jì)劃局（ARPA）建設(shè)了一個(gè)軍用網(wǎng)，叫做“阿帕網(wǎng)”（ARPAnet）。70年代研究者提出互聯(lián)網(wǎng)的概念?；ヂ?lián)網(wǎng)的誕生萬(wàn)維網(wǎng)的誕生90年代初，瑞士日內(nèi)瓦的歐洲核能研究中心分布在世界各地的科學(xué)家需要高效率的通訊方式來(lái)進(jìn)行彼此交流與分享信息。該中心高能核物理學(xué)家TimBerners-Lee研究發(fā)展了萬(wàn)維網(wǎng)（WorldWideWeb，WWW）的雛形，常簡(jiǎn)稱為Web。目的是為了建立一個(gè)能夠整合各種資源、文件及多媒體的系統(tǒng)，讓使用者方便地取得不同媒體的資料。萬(wàn)維網(wǎng)并不等同互聯(lián)網(wǎng)，萬(wàn)維網(wǎng)只是互聯(lián)網(wǎng)所能提供的服務(wù)其中之一，是依靠著互聯(lián)網(wǎng)運(yùn)行的一項(xiàng)服務(wù)。7.1Web界面及相關(guān)概念簡(jiǎn)單來(lái)說(shuō)，WWW是建立在客戶/服務(wù)器模型之上，構(gòu)成的一個(gè)環(huán)球信息網(wǎng)絡(luò)空間，主要使用：超文本標(biāo)記語(yǔ)言（HypertextMarkupLanguage，HTML）超文本傳輸協(xié)議（HypertextTransportProtocols，

HTTP）7.1Web界面及相關(guān)概念Web是一個(gè)由許多互相鏈接的超文本（HyperText）文檔組成的系統(tǒng)。分布在世界各地的用戶能夠通過(guò)Internet對(duì)其訪問(wèn)，進(jìn)行彼此交流與共享信息。在這個(gè)系統(tǒng)中，每個(gè)有用的事物，被稱為一種“資源”，其由一個(gè)全局“統(tǒng)一資源標(biāo)識(shí)符”（URI）標(biāo)識(shí)；這些資源通過(guò)超文本傳輸協(xié)議（HyperTextTransferProtocol）傳送給用戶；而用戶通過(guò)點(diǎn)擊鏈接來(lái)獲得這些資源。

Web網(wǎng)頁(yè)網(wǎng)頁(yè)一般由文字和圖片組成，復(fù)雜一些的還有聲音、動(dòng)畫等多媒體內(nèi)容，幾乎所有的網(wǎng)頁(yè)都包含鏈接，可以方便地跳轉(zhuǎn)到其它相關(guān)網(wǎng)頁(yè)或相關(guān)網(wǎng)站。網(wǎng)頁(yè)文件由HTML語(yǔ)言描述，通過(guò)瀏覽器將HTML文件（網(wǎng)頁(yè)）解析成我們看到的圖文并茂的頁(yè)面。●

定義

Web網(wǎng)頁(yè)

Web網(wǎng)頁(yè)靜態(tài)網(wǎng)頁(yè)網(wǎng)頁(yè)的內(nèi)容一般不會(huì)變化，除非管理員手工修改網(wǎng)頁(yè)內(nèi)容

不能實(shí)現(xiàn)與瀏覽器用戶的交互，用戶只是被動(dòng)的瀏覽網(wǎng)頁(yè)的信息

網(wǎng)頁(yè)文件擴(kuò)展名一般為html或htm靜態(tài)網(wǎng)頁(yè)動(dòng)態(tài)網(wǎng)頁(yè)網(wǎng)頁(yè)中包含了Web應(yīng)用程序代碼，網(wǎng)頁(yè)的內(nèi)容通常是動(dòng)態(tài)可變的。網(wǎng)頁(yè)中動(dòng)態(tài)顯示的數(shù)據(jù)通常放在后臺(tái)的數(shù)據(jù)庫(kù)里。

以數(shù)據(jù)庫(kù)技術(shù)為基礎(chǔ)，可以實(shí)現(xiàn)與瀏覽器用戶的交互，用戶可以通過(guò)網(wǎng)頁(yè)輸入和查詢內(nèi)容。不是靜態(tài)的html文件，而是程序文件，一般擴(kuò)展名為asp,,jsp,php,cgi動(dòng)態(tài)網(wǎng)頁(yè)網(wǎng)站是網(wǎng)頁(yè)等文件的集合，擁有獨(dú)立的域名，為用戶提供各種信息和服務(wù)?！?/p>

定義網(wǎng)站優(yōu)秀網(wǎng)站的特點(diǎn)1、結(jié)構(gòu)和導(dǎo)航清晰，便于使用2、特色鮮明3、色彩搭配和諧4、較快的瀏覽速度5、不斷更新的內(nèi)容Web界面實(shí)例分析

簡(jiǎn)要介紹幾種典型的網(wǎng)站的實(shí)例，以便了解門不同類型的網(wǎng)站的設(shè)計(jì)風(fēng)格與特點(diǎn)。

1.商業(yè)站點(diǎn)

2.信息站點(diǎn)

3.娛樂(lè)站點(diǎn)

4.門戶站點(diǎn)

1．商業(yè)站點(diǎn)

一般的，商業(yè)站點(diǎn)的主要受眾是潛在的客戶組織。第二種受眾包括潛在的投資者，潛在的雇員。第三種受眾，是新聞媒體或競(jìng)爭(zhēng)者。

任何商業(yè)站點(diǎn)的最主要的目的是，以公司直接或間接受益的方式服務(wù)于用戶。1．商業(yè)站點(diǎn)商業(yè)站點(diǎn)的共同特點(diǎn)包括：

基本信息的發(fā)布支持與幫助投資機(jī)會(huì)

公共關(guān)系

招聘信息

電子商務(wù)

2．信息站點(diǎn)

政府、教育、新聞、無(wú)利潤(rùn)的組織、宗教組織，或變化多樣的社會(huì)站點(diǎn)經(jīng)常被認(rèn)為是信息站點(diǎn)。信息站點(diǎn)的訪問(wèn)者，是他們對(duì)站點(diǎn)提供的信息有興趣或需要。信息站點(diǎn)的建立滿足某些設(shè)計(jì)條件，但不需要考慮財(cái)政方面的因素。信息站點(diǎn)的目的差別很大。在大學(xué)的站點(diǎn)可能盡力以某個(gè)題目如某個(gè)國(guó)家的歷史等幫助受教育的訪問(wèn)者。3．娛樂(lè)站點(diǎn)

娛樂(lè)站點(diǎn)一般是商業(yè)性質(zhì)的。娛樂(lè)站點(diǎn)的意圖僅僅是使參觀者歡樂(lè)。在某種程度上，他們是出售娛樂(lè)節(jié)目或娛樂(lè)內(nèi)容。建立娛樂(lè)站點(diǎn)時(shí)要求打破常規(guī)而取得成功。就娛樂(lè)站點(diǎn)來(lái)說(shuō)，目的是出售體驗(yàn)本身。

4．門戶站點(diǎn)

門戶站點(diǎn)是用戶在網(wǎng)上沖浪的起始站點(diǎn)，該站點(diǎn)幫助人們查找信息。門戶站點(diǎn)經(jīng)常試圖提供盡可能多的信息，為用戶盡可能多地提供服務(wù)，鼓勵(lì)他們留在該站點(diǎn)或繼續(xù)瀏覽該站點(diǎn)。門戶站點(diǎn)也包括搜索引擎或站點(diǎn)目錄，這些是門戶站點(diǎn)的關(guān)鍵。網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)的一般步驟需求分析收集素材網(wǎng)頁(yè)設(shè)計(jì)（程序、美工）網(wǎng)頁(yè)制作（程序、美工）發(fā)布網(wǎng)站網(wǎng)站的維護(hù)靜態(tài)文字●圖片●動(dòng)畫●聲音●超鏈接●動(dòng)態(tài)信息●Dreamweaver、Frontpage、記事本Fireworks、PhotoshopFlash、ActiveGIFCreator聲音編輯工具Dreamweaver、Frontpage、記事本Javascript、ASP、PHP、JSP網(wǎng)頁(yè)設(shè)計(jì)的元素和工具HTML語(yǔ)言●HyperTextMarkupLanguage

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

制作Web頁(yè)面的基本編程語(yǔ)言一系列標(biāo)記的集合●

分類●

雙邊標(biāo)記：頭標(biāo)與尾標(biāo)。如：<title>…</title>●單邊標(biāo)記：只有頭標(biāo)。如：<hr><br>●

屬性●

對(duì)標(biāo)記的行為進(jìn)行控制<hrwidth=“600”size=“1”color=“black”>例:<html><head><title>這里是標(biāo)題欄</title></head><body><p>這里是網(wǎng)頁(yè)文本的頁(yè)面體部分</p><hr></body></html><html></html>1<head></head>2<title></title>3<body></body>4<p>5<hr>6●幾個(gè)基本標(biāo)記基本標(biāo)記

Web服務(wù)器的配置

Web服務(wù)簡(jiǎn)介web服務(wù)器Web服務(wù)簡(jiǎn)介一、Web服務(wù)概述

Web服務(wù)通過(guò)超文本傳輸協(xié)議（HTTP）向用戶提供多媒體信息。所提供信息的基本單位是網(wǎng)頁(yè)，每一個(gè)網(wǎng)頁(yè)可以包含文字、圖片、聲音等多種信息。此外頁(yè)面上還可加入超鏈接，使用戶能夠通過(guò)這些超鏈接直接訪問(wèn)另一個(gè)頁(yè)面。Web服務(wù)基本工作原理Web服務(wù)器/index.html40/index.htm客戶機(jī)瀏覽器軟件安裝IIS或Apache軟件Web服務(wù)工作原理①Web瀏覽器使用HTTP命令向一個(gè)特定的服務(wù)器發(fā)出Web頁(yè)面請(qǐng)求。②若該服務(wù)器在特定端口（通常是TCP80端口）處接收到Web頁(yè)面請(qǐng)求后，就發(fā)送一個(gè)應(yīng)答并在客戶和服務(wù)器之間建立連接。③web服務(wù)器查找客戶端所需文檔，若Web服務(wù)器查找到所請(qǐng)求的文檔，就會(huì)將所請(qǐng)求的文檔傳送給Web瀏覽器。若該文檔不存在，則服務(wù)器會(huì)發(fā)送一個(gè)相應(yīng)的錯(cuò)誤提示文檔給客戶端。④Web瀏覽器接收到文檔后，就將它顯示出來(lái)。⑤當(dāng)客戶端瀏覽完成后，就斷開(kāi)與服務(wù)器的連接。Web服務(wù)器配置一、什么是Web服務(wù)器？Web服務(wù)器也稱為HTTP服務(wù)器，它響應(yīng)來(lái)自客戶機(jī)瀏覽器的請(qǐng)求，并且發(fā)送所請(qǐng)求的網(wǎng)頁(yè)給客戶機(jī)。當(dāng)訪問(wèn)者在瀏覽器的地址文本框中輸入一個(gè)URL，或者單擊在瀏覽器中打開(kāi)的網(wǎng)頁(yè)上的某個(gè)鏈接時(shí)，便生成一個(gè)網(wǎng)頁(yè)請(qǐng)求。常用的Web服務(wù)器軟件有：MicrosoftInternetInformationServer（IIS）ApacheHTTPServerApacheTomcatServer。Web服務(wù)器配置二、五種常見(jiàn)的Web應(yīng)用程序服務(wù)器Dreamweaver可以使用以下五種服務(wù)器技術(shù)的任何一種設(shè)計(jì)Web應(yīng)用程序：

ASP（ActiveServerPage：動(dòng)態(tài)服務(wù)器網(wǎng)頁(yè)技術(shù)）

ASP.NET（.NET平臺(tái)的動(dòng)態(tài)服務(wù)器網(wǎng)頁(yè)技術(shù)）

JSP（JavaServerPage：Java服務(wù)器網(wǎng)頁(yè)技術(shù)）

PHP（PersonalHomePage：個(gè)人主頁(yè)技術(shù)）ColdFusion（可用于Windows和Solaris操作系統(tǒng)平臺(tái)的動(dòng)態(tài)服務(wù)器網(wǎng)頁(yè)技術(shù)）

Web服務(wù)器配置

選擇哪一種Web應(yīng)用程序技術(shù)取決于多個(gè)因素，其中包括對(duì)各種腳本語(yǔ)言的熟悉程度以及要使用的應(yīng)用程序服務(wù)器。如果采用IIS服務(wù)器，則可以選擇ASP或ASP.NET。如果采用PHP服務(wù)器，則可以選擇PHP；如果采用JSP服務(wù)器，則可以選擇JSP。如果采用ColdFusion

MX服務(wù)器，則可以選擇ColdFusion。Web應(yīng)用的成功與否，除了受其所采用的技術(shù)和所能夠提供的功能的限制，還受Web網(wǎng)頁(yè)的外觀的影響。Web網(wǎng)頁(yè)的外觀經(jīng)常是最先被用戶注意到的。用戶對(duì)網(wǎng)站的第一印象與界面外觀是否友好、吸引人密切相關(guān)。所以對(duì)于設(shè)計(jì)人員來(lái)說(shuō)，Web界面設(shè)計(jì)至關(guān)重要。Web界面設(shè)計(jì)的人性化、易用性是Web界面設(shè)計(jì)的核心。7.1Web界面及相關(guān)概念Web的發(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)有力的支持。40可擴(kuò)展標(biāo)記語(yǔ)言是一種很像超文本標(biāo)記語(yǔ)言的標(biāo)記語(yǔ)言。它的標(biāo)簽沒(méi)有被預(yù)定義。使用者需要自行定義標(biāo)簽。它是對(duì)超文本標(biāo)記語(yǔ)言的補(bǔ)充。它和超文本標(biāo)記語(yǔ)言為不同的目的而設(shè)計(jì)。它被設(shè)計(jì)用來(lái)傳輸和存儲(chǔ)數(shù)據(jù)，其焦點(diǎn)是數(shù)據(jù)的內(nèi)容。超文本標(biāo)記語(yǔ)言被設(shè)計(jì)用來(lái)顯示數(shù)據(jù)，其焦點(diǎn)是數(shù)據(jù)的外觀。XML與HTML網(wǎng)格計(jì)算網(wǎng)格是利用互聯(lián)網(wǎng)把地理上廣泛分布的各種資源（包括計(jì)算資源、存儲(chǔ)資源、帶寬資源、軟件資源、數(shù)據(jù)資源、信息資源、知識(shí)資源等）連成一個(gè)邏輯整體，就像一臺(tái)超級(jí)計(jì)算機(jī)一樣，為用戶提供一體化信息和應(yīng)用服務(wù)（計(jì)算、存儲(chǔ)、訪問(wèn)等），徹底消除資源“孤島”，最充分的實(shí)現(xiàn)信息共享。云服務(wù)通過(guò)使計(jì)算分布在大量的分布式計(jì)算機(jī)上，而非本地計(jì)算機(jī)或遠(yuǎn)程服務(wù)器中，好比是從古老的單臺(tái)發(fā)電機(jī)模式轉(zhuǎn)向了電廠集中供電的模式。它意味著計(jì)算能力也可以作為一種商品進(jìn)行流通，就像煤氣、水電一樣，取用方便，費(fèi)用低廉。最大的不同在于，它是通過(guò)互聯(lián)網(wǎng)進(jìn)行傳輸?shù)摹３谋九c超媒體超文本（Hypertext）是一種使用于文本、圖形或其他信息的組織形式，是一種非線性的信息組織形式。它使得單一的信息元素之間可以相互交叉引用，這種引用并不是通過(guò)復(fù)制來(lái)實(shí)現(xiàn)的，而是通過(guò)指向?qū)Ψ降牡刂纷址畞?lái)指引用戶獲取相應(yīng)的信息。超媒體（Hypermedia）利用超文本形式組織起來(lái)的文件不僅僅是文本，也可以是圖、文、聲、像以及視頻等多媒體形式的文件。這些多媒體信息就構(gòu)成了所謂的超媒體。43Web界面設(shè)計(jì)問(wèn)題的提出Web界面設(shè)計(jì)與站點(diǎn)外觀直接相關(guān)站點(diǎn)的界面外觀是否友好直接關(guān)系到是否能吸引人的關(guān)注。人性化的設(shè)計(jì)是Web界面設(shè)計(jì)的核心如何根據(jù)人的心理、生理特征，運(yùn)用技術(shù)手段，創(chuàng)造簡(jiǎn)單、友好的界面，是Web界面設(shè)計(jì)的重點(diǎn)。44Web界面設(shè)計(jì)基本原則1．以用戶為中心2．一致性3．簡(jiǎn)潔與明確4．體現(xiàn)特色5．兼顧不同的瀏覽器6．明確的導(dǎo)航設(shè)計(jì)45Web界面設(shè)計(jì)基本原則1．以用戶為中心一方面，不同類別的Web網(wǎng)站，面向的訪問(wèn)群體不同；同一類型的Web網(wǎng)站，用戶群體也有年齡、行業(yè)等差別。因此，Web界面的設(shè)計(jì)只有了解不同用戶的需求，才能在設(shè)計(jì)中體現(xiàn)用戶的核心地位，設(shè)計(jì)出更合理、能滿足用戶需求的界面，以吸引用戶。46界面設(shè)計(jì)中的人因素：

有限的短期記憶力（Limitedshort-termmemory）

人們?cè)诙唐趦?nèi)可以記住7+2項(xiàng)信息。如果超過(guò)這個(gè)數(shù)量，人們很可能要出錯(cuò)。

人會(huì)犯錯(cuò)誤（Peoplemakemistakes）

當(dāng)人犯錯(cuò)之后系統(tǒng)就會(huì)不正常，不適當(dāng)?shù)木暫途緯?huì)造成緊張，進(jìn)而可能產(chǎn)生更多的錯(cuò)誤。

人是不同的（Peoplearedifferent）

人的物理能力懸殊很大。設(shè)計(jì)者不應(yīng)該只以自身的能力為設(shè)計(jì)依據(jù)。

人們有各自的交互偏好（Peoplehavedifferentinteractionpreferences）

一些人喜歡圖畫，一些則喜歡文本。Web界面設(shè)計(jì)基本原則2.一致性內(nèi)容一致：Web網(wǎng)站顯示的信息、數(shù)據(jù)等形式一致：Web界面設(shè)計(jì)的版式、構(gòu)圖、布局、色彩以及它們所呈現(xiàn)出的風(fēng)格特點(diǎn)Web界面設(shè)計(jì)基本原則Web界面自身的風(fēng)格要一致性各頁(yè)面使用相同的頁(yè)邊距；文本、圖形間保持相同的間距；各頁(yè)面上都放上公司或網(wǎng)站的統(tǒng)一標(biāo)志；頁(yè)面中的每個(gè)元素與整個(gè)頁(yè)面以及站點(diǎn)的色彩和風(fēng)格上保持一致性；文字的顏色要同圖像的顏色保持一致并注意色彩搭配的和諧。55Web界面設(shè)計(jì)基本原則3.簡(jiǎn)潔與明確使用一個(gè)醒目的標(biāo)題，這個(gè)標(biāo)題常常采用圖形來(lái)表示，但圖形同樣要求簡(jiǎn)潔。限制所用的字體和顏色的數(shù)目。界面上所有的元素都應(yīng)當(dāng)有明確的含義和用途，不要試圖用無(wú)關(guān)的圖片把界面裝點(diǎn)起來(lái)。盡量減少瀏覽層次56圖7-5Google首頁(yè)（，2009年9月）3．簡(jiǎn)潔與明確

Web界面設(shè)計(jì)是設(shè)計(jì)的一種，要求簡(jiǎn)練、明確。應(yīng)盡量把網(wǎng)頁(yè)的層次簡(jiǎn)要化，力求以最少的點(diǎn)擊次數(shù)鏈接到具體的內(nèi)容。

在主頁(yè)的訪問(wèn)率為100人次的情況下，下一頁(yè)的訪問(wèn)率降到30到50人次。網(wǎng)頁(yè)的層次越復(fù)雜，實(shí)際內(nèi)容的訪問(wèn)率也將越低，信息也就越難傳達(dá)到讀者的手里。Web界面設(shè)計(jì)基本原則4．體現(xiàn)特色清楚地了解Web網(wǎng)站背景、體現(xiàn)主題和服務(wù)對(duì)象的基本情況，選擇合適的表現(xiàn)手法，展示關(guān)鍵信息和特色內(nèi)容，并形成獨(dú)特、鮮明的風(fēng)格。利用相應(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)站用戶的基本情況，從而能有的放矢，挑選關(guān)鍵信息Web界面設(shè)計(jì)基本原則5．兼顧不同的瀏覽器不同瀏覽器類別和版本在功能支持上有所區(qū)別原因站點(diǎn)瀏覽者可能使用不同類型和版本的瀏覽器。以某一個(gè)瀏覽器的某一個(gè)版本為依據(jù)編寫的網(wǎng)頁(yè)程序，可能在其它的瀏覽器或其它版本上不能正常顯示或運(yùn)行。方法通過(guò)使用JavaScript等編程工具或功能，探測(cè)用戶瀏覽器的類型和版本等參數(shù)及對(duì)于某特定功能的支持情況，然后根據(jù)探測(cè)結(jié)果顯示適用于特定瀏覽器的網(wǎng)頁(yè)內(nèi)容。根據(jù)用戶瀏覽器分布情況決定設(shè)計(jì)所面向的瀏覽器類別和版本。Web界面設(shè)計(jì)基本原則6．明確的導(dǎo)航設(shè)計(jì)網(wǎng)站首頁(yè)導(dǎo)航應(yīng)盡量展現(xiàn)整個(gè)網(wǎng)站的架構(gòu)和內(nèi)容；另外導(dǎo)航要能讓瀏覽者確切地知道自己在整個(gè)網(wǎng)站中的位置，可以確定下一步的瀏覽去向。站點(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)始。用戶深入站點(diǎn)時(shí)，選擇趨向于越來(lái)越具體，直到找到目標(biāo)或葉子網(wǎng)頁(yè)。層次結(jié)構(gòu)通過(guò)深度和廣度來(lái)描述。

實(shí)例災(zāi)難性目錄找"苯甲酸芐酯"目錄設(shè)計(jì)的目錄設(shè)計(jì)googledirectory的目錄設(shè)計(jì)Web界面要素設(shè)計(jì)1.Web界面規(guī)劃2.文化與語(yǔ)言3.內(nèi)容、風(fēng)格與布局、色彩設(shè)計(jì)4.文本設(shè)計(jì)5.多媒體元素設(shè)計(jì)

1.Web界面規(guī)劃

Web界面的布局、元素的設(shè)計(jì)都要以”網(wǎng)站的目標(biāo)和用途”這個(gè)目標(biāo)為中心。將網(wǎng)站作為一種文化、一種藝術(shù)作品看待，確定Web界面的設(shè)計(jì)風(fēng)格，力求在設(shè)計(jì)Web界面時(shí)追求藝術(shù)效果與美感。確定Web界面設(shè)計(jì)的目標(biāo)企業(yè)Web網(wǎng)站：企業(yè)建立這個(gè)Web網(wǎng)站的目的這個(gè)網(wǎng)站的作用該提供哪些吸引訪問(wèn)者的東西用戶訪問(wèn)這個(gè)Web網(wǎng)站后，能給他們帶來(lái)什么？

個(gè)人Web網(wǎng)站：主要是展現(xiàn)自我、演練技術(shù)。建立的Web網(wǎng)站要有個(gè)性和特色。站點(diǎn)的導(dǎo)航設(shè)計(jì)導(dǎo)航系統(tǒng)對(duì)訪問(wèn)者來(lái)說(shuō)是路徑指示系統(tǒng)。站點(diǎn)訪問(wèn)者通過(guò)導(dǎo)航系統(tǒng)尋找需要的信息。用戶感覺(jué)到能以滿意的方式找到所需信息時(shí)，導(dǎo)航系統(tǒng)才是合適的。由于用戶的差異，不可能實(shí)現(xiàn)完美的導(dǎo)航系統(tǒng)。2.文化與語(yǔ)言

全球服務(wù)型的網(wǎng)站還要考慮如何適應(yīng)不同國(guó)家的不同類型的文化與語(yǔ)言環(huán)境。在設(shè)計(jì)Web界面時(shí)，要將選擇語(yǔ)言版本的功能放在網(wǎng)站的主頁(yè)，并以不同版本的語(yǔ)言進(jìn)行標(biāo)注。圖7-9google網(wǎng)站（，2009年農(nóng)歷七月初七）圖7-10Nvidia網(wǎng)站（/，2009年9月）Google首頁(yè)圖標(biāo)（中國(guó)七夕）3.內(nèi)容、風(fēng)格與布局、色彩設(shè)計(jì)Web界面的內(nèi)容不僅要遵循簡(jiǎn)潔明確的原則，也要符合確定的設(shè)計(jì)目標(biāo)，面向不同的對(duì)象要使用不同的口吻和用詞。設(shè)計(jì)者要對(duì)網(wǎng)站的標(biāo)志、色彩、字體、布局、交互方式、內(nèi)容價(jià)值、存在意義等有明確的認(rèn)識(shí)。75網(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ù)量和所占面積。網(wǎng)站內(nèi)容設(shè)計(jì)的原則

網(wǎng)站的首頁(yè)要給用戶帶來(lái)好的第一印象，能夠吸引用戶再次光臨這個(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)而寫，不要畫蛇添足。文字要正確，不能有語(yǔ)法錯(cuò)誤和錯(cuò)別字。確定網(wǎng)站的標(biāo)準(zhǔn)色彩不同的色彩搭配產(chǎn)生不同的效果，并可能影響到訪問(wèn)者的情緒。以紅、綠、藍(lán)三色稱為三基色其它的色彩都可以用這三種色彩調(diào)和而成。底色應(yīng)柔和、素雅柔和的底色配上深色文字，讀起來(lái)自然，流暢。網(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)。

常見(jiàn)的網(wǎng)頁(yè)布局結(jié)構(gòu)1．“國(guó)字”型布局“國(guó)”字型布局因布局結(jié)構(gòu)與漢字“國(guó)”相似而得名。其頁(yè)面的最上部分一般放置網(wǎng)站的標(biāo)志和導(dǎo)航欄或Banner廣告，頁(yè)面中間主要放置網(wǎng)站的主要內(nèi)容，最下部分一般放置網(wǎng)站的版權(quán)信息和聯(lián)系方式等。

常見(jiàn)的網(wǎng)頁(yè)布局結(jié)構(gòu)2．T型布局T型布局結(jié)構(gòu)因與英文大寫字母T相似而得名。其頁(yè)面的頂部一般放置橫網(wǎng)站的標(biāo)志或Banner廣告，下方左側(cè)是導(dǎo)航欄菜單，下方右側(cè)則用于放置網(wǎng)頁(yè)正文等主要內(nèi)容。

常見(jiàn)的網(wǎng)頁(yè)布局結(jié)構(gòu)3．標(biāo)題正文型標(biāo)題正文型布局的布局結(jié)構(gòu)一般用于顯示文章頁(yè)面、新聞頁(yè)面和一些注冊(cè)頁(yè)面等。

常見(jiàn)的網(wǎng)頁(yè)布局結(jié)構(gòu)4．左右框架型布局左右框架型布局結(jié)構(gòu)是一些大型論壇和企業(yè)經(jīng)常使用的一種布局結(jié)構(gòu)。其布局結(jié)構(gòu)主要分為左右兩側(cè)的頁(yè)面。左側(cè)一般主要為導(dǎo)航欄鏈接，右側(cè)則放置網(wǎng)站的主要內(nèi)容

常見(jiàn)的網(wǎng)頁(yè)布局結(jié)構(gòu)5．上下框架型上下框架型布局與前面的左右框架型布局類似。其區(qū)別僅在于是一種上下分為兩頁(yè)的框架。

常見(jiàn)的網(wǎng)頁(yè)布局結(jié)構(gòu)6.綜合框架型綜合框架型布局是結(jié)合左右框架型布局和上下框架型布局的頁(yè)面布局技術(shù)

常見(jiàn)的網(wǎng)頁(yè)布局結(jié)構(gòu)7．POP布局POP布局是一種頗具藝術(shù)感和時(shí)尚感的網(wǎng)頁(yè)布局方式。頁(yè)面設(shè)計(jì)通常以一張精美的海報(bào)畫面為布局的主體。

常見(jiàn)的網(wǎng)頁(yè)布局結(jié)構(gòu)8．FLASH布局FLASH布局是指網(wǎng)頁(yè)頁(yè)面以一個(gè)或多個(gè)Flash作為頁(yè)面主體的布局方式。在這種布局中，大部分甚至整個(gè)頁(yè)面都是Flash。

CNNUSAToday實(shí)例UI花園

敗筆4.文本設(shè)計(jì)文本不要太多，以免轉(zhuǎn)移瀏覽者注意力。要選擇合適的顏色，以便使文本和其它界面元素一起產(chǎn)生一個(gè)和諧的視覺(jué)效果；文本的顏色應(yīng)該一致，讓用戶可以容易地確定不同文本和顏色所代表的內(nèi)容。選擇的字體應(yīng)和整個(gè)界面應(yīng)融為一體。4.文本設(shè)計(jì)網(wǎng)站中可能會(huì)使用多種字體，但是同一種字體應(yīng)該表示相同類型的數(shù)據(jù)或者信息。合理設(shè)置頁(yè)邊框、行間距等。應(yīng)該重視標(biāo)題的處理，把標(biāo)題排版作為界面修飾的主要手段之一。標(biāo)題一般無(wú)分級(jí)要求，其字形一般較大。實(shí)例文字的可用性辨識(shí)度與可讀性實(shí)例文字大小/blog/?p=324實(shí)例下劃線主要區(qū)分是否有鏈接實(shí)例視覺(jué)顯著性5.多媒體元素設(shè)計(jì)動(dòng)畫、音頻和視頻這樣的多媒體可以補(bǔ)充平淡的文本或者二維圖形。Web設(shè)計(jì)者可以使用很多當(dāng)前Web設(shè)計(jì)中的多媒體處理工具和技術(shù)；但是帶寬以及瀏覽器的支持能力限制了多媒體技術(shù)的迅速采用。為了充分享受新技術(shù)，通常需要大帶寬、瀏覽器插件或第三方應(yīng)用程序的支持。103WEB中的動(dòng)畫動(dòng)畫是區(qū)別Web和其它媒體的一個(gè)重要展示形式，動(dòng)畫賦予了用戶運(yùn)動(dòng)和投入的感受。動(dòng)畫可以分為不同的級(jí)別，從簡(jiǎn)單的動(dòng)畫GIF圖像到三維以及虛擬環(huán)境。最常用的基本動(dòng)畫類型是GIF和Flash文件。動(dòng)畫GIF是靜止圖像的匯集，可以按照指定的序列號(hào)和速度重復(fù)運(yùn)動(dòng)。許多標(biāo)志廣告就是動(dòng)畫GIF。104WEB中的動(dòng)畫Flash（.swf）文件在網(wǎng)站設(shè)計(jì)中被廣泛地接受。Flash引入了一種新的動(dòng)畫形式。它在帶寬有限的情況下提供了媒體豐富的內(nèi)容。Flash特別適用于創(chuàng)建通過(guò)Internet提供的內(nèi)容，因?yàn)樗奈募浅Ｐ?。Flash是通過(guò)廣泛使用矢量圖形做到這一點(diǎn)的。與位圖圖形相比，矢量圖形需要的內(nèi)存和存儲(chǔ)空間小很多，因?yàn)樗鼈兪且詳?shù)學(xué)公式而不是大型數(shù)據(jù)集來(lái)表示的。位圖圖形之所以更大，是因?yàn)閳D像中的每個(gè)像素都需要一組單獨(dú)的數(shù)據(jù)來(lái)表示。105WEB中的動(dòng)畫全景圖作為虛擬實(shí)景的一種重要表現(xiàn)形式，會(huì)讓使用者有進(jìn)入照片中的場(chǎng)景的感覺(jué)：全方位；真實(shí)的場(chǎng)景；三維立體的效果。Web界面設(shè)計(jì)技術(shù)基礎(chǔ)1.超文本標(biāo)記語(yǔ)言HTML

2．客戶端腳本語(yǔ)言JavaScript3．服務(wù)器端腳本語(yǔ)言1091.超文本標(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ǔ)言。從結(jié)構(gòu)上講，HTML文件由各種標(biāo)記元素組成，用于組織文件的內(nèi)容和指導(dǎo)文件的輸出格式。110（1）基本標(biāo)記元素（部分）111標(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è)置已訪問(wèn)過(guò)的超級(jí)鏈接文字的顏色，使用顏色名或十六進(jìn)制值<BODYALINK=？>設(shè)置鼠標(biāo)懸停于超級(jí)鏈接文字的顏色，使用顏色名或十六進(jìn)制值<H1></H1>創(chuàng)建最大的標(biāo)題，在HTML中有六種標(biāo)題

（2）圖形標(biāo)記元素目前能被Web瀏覽器直接解釋的常見(jiàn)圖像格式有：GIF格式(.GIF文件，支持256色)；X位圖格式(.XBM文件，黑白圖像)；JPEG格式(.JPG、.JPEG文件，支持RGB色)。112標(biāo)記元素功能含義<IMGSRC="name"ALIGN=?BORDER=?WIDTH=?HEIGHT=?>添加一個(gè)圖像。SRC給定圖片文件的定位，ALIGN屬性定義圖與文本行的對(duì)齊方式；BORDER屬性設(shè)置圍繞一個(gè)圖像的邊框的大??；WIDTH和HEIGHT分別重新定義圖像的寬度和高度

<HRSIZE=?WIDTH=?NOSHADE>加入一條水平線，SIZE設(shè)置水平線的大小，WIDTH設(shè)置水平線的寬度，NOSHADE表示創(chuàng)建無(wú)陰影的水平線（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方式VALIGN屬性規(guī)定單元格中內(nèi)容的垂直排列方式。<THALIGN=?VALIGN=?COLSPAN=?ROWSPAN=?>在表格的當(dāng)前行里產(chǎn)生一個(gè)新的表項(xiàng)單元，表示一個(gè)表項(xiàng)標(biāo)題(TableHeader)單元，<TH>元素內(nèi)部的文本通常會(huì)呈現(xiàn)為居中的粗體文本，，

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)單元，其它屬性的含義同上（4）表單標(biāo)記元素(部分)114標(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)簽后面【例8-1】Demo.html115<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="">點(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>【例8-2】用HTML實(shí)現(xiàn)表單實(shí)例116<HTML><HEAD><TITLE>HTML表單實(shí)例</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>你的計(jì)算機(jī)是哪一種類型：

<SELECTNAME="computer"><OPTION>PC<OPTION>UNIX<OPTION>MAC<OPTION>OTHER</SELECT><P>備注：<BR><TEXTAREANAME="comment"ROWS=5COLS=25>請(qǐng)?jiān)诖颂顚懷a(bǔ)充內(nèi)容</TEXTAREA><PALIGN="center"><INPUTTYPE="SUBMIT"VALUE="確定"><INPUTTYPE="RESET"VALUE="重填"></FORM></BODY></HTML>HTML5117超文本標(biāo)記語(yǔ)言（HTML）的第五次重大修改,

2014年10月29日，萬(wàn)維網(wǎng)聯(lián)盟宣布，經(jīng)過(guò)接近8年的艱苦努力，該標(biāo)準(zhǔn)規(guī)范終于制定完成。HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體。它的新特性包括：增加新屬性淘汰過(guò)時(shí)的或冗余的屬性一個(gè)HTML5文檔到另一個(gè)文檔間的拖放功能離線編輯信息傳遞的增強(qiáng)2．客戶端腳本語(yǔ)言JavaScriptHTML無(wú)法獨(dú)自完成交互和客戶端動(dòng)態(tài)網(wǎng)頁(yè)的任務(wù),JavaScript，它彌補(bǔ)了HTML語(yǔ)言的缺陷。利用JavaScript，可以使得信息和用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而是實(shí)現(xiàn)了一種實(shí)時(shí)的、動(dòng)態(tài)的、可交互式的表達(dá)能力。JavaScript是一種內(nèi)嵌于HTML中的腳本語(yǔ)言，它是一種基于對(duì)象和事件驅(qū)動(dòng)并具有安全性能的腳本語(yǔ)言。JavaScript的特點(diǎn)（1）一種腳本編寫語(yǔ)言（2）基于對(duì)象的語(yǔ)言（3）簡(jiǎn)單性（4）安全性（5）動(dòng)態(tài)性（6）跨平臺(tái)性119JavaScript與HTML結(jié)合實(shí)例120

<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ì)話框并顯示括號(hào)中的字符串4．服務(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ā)者能夠快速地寫出動(dòng)態(tài)生成頁(yè)面。JSP（Java

Server

Page）是Sun公司推出的開(kāi)發(fā)語(yǔ)言。121三大服務(wù)器端腳本語(yǔ)言三者都提供在HTML代碼中混合某種程序代碼、由語(yǔ)言引擎解釋執(zhí)行程序代碼的能力。在ASP、PHP、JSP環(huán)境下，HTML代碼主要負(fù)責(zé)描述信息的顯示樣式，而程序代碼則用來(lái)描述處理邏輯。122常用Web界面設(shè)計(jì)工具1．頁(yè)面編輯器MicroSoft公司的FrontpageMacromedia公司的DreamweaverDreamweaver與Flash、Firework并稱網(wǎng)頁(yè)設(shè)計(jì)三劍客2．輔助工具AceHTMLPro6.0—全功能的HTML&JavaScript編輯器。AntennaWebDesignStudio—強(qiáng)大的可視化網(wǎng)頁(yè)設(shè)計(jì)軟件EasyHTML—簡(jiǎn)單的所見(jiàn)即所得的HTML編輯器，有固定、類似瀏覽器的界面。EasyWebEditor—是一個(gè)Web發(fā)布工具，允許不了解HTML而在所見(jiàn)即所得環(huán)境中編輯Web網(wǎng)頁(yè)。123Dreamweaver的功能（1）網(wǎng)站管理功能。Dreamweaver不僅能夠編輯網(wǎng)頁(yè)，還能夠?qū)崿F(xiàn)本地站點(diǎn)與服務(wù)器站點(diǎn)之間的文件同步。它可以進(jìn)行大型網(wǎng)站的開(kāi)發(fā)。對(duì)于需要多人維護(hù)的大型網(wǎng)站，擁有文件操作權(quán)限方面的限制，具有一定的安全保護(hù)功能。（2）多種視圖模式。Dreamweaver提供了代碼、設(shè)計(jì)和拆分3種視圖模式。設(shè)計(jì)視圖可以滿足用戶的設(shè)計(jì)需求，即使不懂HTML語(yǔ)言，不會(huì)書(shū)寫網(wǎng)頁(yè)源代碼，也能創(chuàng)建出漂亮的網(wǎng)頁(yè)；（3）對(duì)象插入功能。Dreamweaver的插入面板中提供了常用字符、表格、框架、電子信箱和Flash文字等功能按鈕，可以直接單擊插入面板中的相關(guān)功能按鈕，快速完成目標(biāo)對(duì)象的制作。Dreamweaver的功能（4）屬性設(shè)置方式。Dreamweaver提供了屬性面板，屬性面板中顯示了當(dāng)前對(duì)象的屬性，可以直接在屬性面板中設(shè)置和修改當(dāng)前對(duì)象的屬性。（5）CSS樣式設(shè)置方式。Dreamweaver提供了CSS樣式面板，通過(guò)CSS樣式面板，快速創(chuàng)建、查找和修改目標(biāo)樣式。（6）內(nèi)置大量的行為。Dreamweaver中內(nèi)置了大量的行為，通過(guò)行為面板可以快速添加一些特殊效果，如網(wǎng)頁(yè)的跳轉(zhuǎn)、圖像載入等。（7）提供了資源管理功能。在建立Dreamweaver站點(diǎn)后，Dreamweaver可以統(tǒng)一管理站點(diǎn)中的資源。可以通過(guò)資源面板來(lái)管理和使用這些資源。Dreamweaver對(duì)主流技術(shù)的支持（1）支持服務(wù)器環(huán)境。支持如IIS、Aphache和ColdFusion等一些主流的服務(wù)器環(huán)境，滿足不同的服務(wù)器環(huán)境開(kāi)發(fā)要求。（2）支持ASP、PHP和Java等主流技術(shù)。可以支持ASP、PHP和Java等主流技術(shù)，可以在Dreamweaver中直接使用這些技術(shù)開(kāi)發(fā)相關(guān)動(dòng)態(tài)網(wǎng)頁(yè)。（3）支持?jǐn)?shù)據(jù)庫(kù)。在Dreamweaver中可以直接連接到數(shù)據(jù)庫(kù)。正確設(shè)置服務(wù)器環(huán)境后，通過(guò)Dreamweaver可以直接連接到數(shù)據(jù)庫(kù)中進(jìn)行動(dòng)態(tài)網(wǎng)頁(yè)的制作。（4）支持多數(shù)的網(wǎng)頁(yè)媒體。Dreamweaver可以完美支持常見(jiàn)的網(wǎng)頁(yè)多媒體格式，如圖片、