人機(jī)交互第7章Web界面設(shè)計_第1頁
人機(jī)交互第7章Web界面設(shè)計_第2頁
人機(jī)交互第7章Web界面設(shè)計_第3頁
人機(jī)交互第7章Web界面設(shè)計_第4頁
人機(jī)交互第7章Web界面設(shè)計_第5頁
已閱讀5頁，還剩138頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

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

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

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

定義

Web網(wǎng)頁

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

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

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

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

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

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

1.商業(yè)站點

2.信息站點

3.娛樂站點

4.門戶站點

1．商業(yè)站點

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

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

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

公共關(guān)系

招聘信息

電子商務(wù)

2．信息站點

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

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

4．門戶站點

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

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

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

分類●

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

屬性●

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

Web服務(wù)器的配置

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

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

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

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

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

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

Web服務(wù)器配置

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

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

人們在短期內(nèi)可以記住7+2項信息。如果超過這個數(shù)量，人們很可能要出錯。

人會犯錯誤（Peoplemakemistakes）

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

人是不同的（Peoplearedifferent）

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

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

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

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

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

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

1.Web界面規(guī)劃

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

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

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

: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è)計的原則

網(wǎng)站的首頁要給用戶帶來好的第一印象，能夠吸引用戶再次光臨這個網(wǎng)站。網(wǎng)站內(nèi)容應(yīng)是動態(tài)進(jìn)行修改和更新；。網(wǎng)頁中應(yīng)該提供聯(lián)機(jī)幫助功能。網(wǎng)頁的文本內(nèi)容應(yīng)簡明，通俗易懂。所有的內(nèi)容都要針對設(shè)計目標(biāo)而寫，不要畫蛇添足。文字要正確，不能有語法錯誤和錯別字。確定網(wǎng)站的標(biāo)準(zhǔn)色彩不同的色彩搭配產(chǎn)生不同的效果，并可能影響到訪問者的情緒。以紅、綠、藍(lán)三色稱為三基色其它的色彩都可以用這三種色彩調(diào)和而成。底色應(yīng)柔和、素雅柔和的底色配上深色文字，讀起來自然，流暢。網(wǎng)頁色彩搭配的原則：色彩的鮮明性網(wǎng)頁的色彩要鮮艷，容易引人注目。

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

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

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

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

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

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

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

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

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

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

CNNUSAToday實例UI花園

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

2．客戶端腳本語言JavaScript3．服務(wù)器端腳本語言1091.超文本標(biāo)記語言HTMLHTML已經(jīng)成為表示W(wǎng)eb文檔信息的標(biāo)準(zhǔn)方法，是構(gòu)成Web頁面的主要工具。HTML是用來表示網(wǎng)上信息的符號標(biāo)記語言，是一個跨平臺語言。從結(jié)構(gòu)上講，HTML文件由各種標(biāo)記元素組成，用于組織文件的內(nèi)容和指導(dǎo)文件的輸出格式。110（1）基本標(biāo)記元素（部分）111標(biāo)記元素功能含義<HTML></HTML>創(chuàng)建一個HTML文檔，通知瀏覽器該文件含有HTML標(biāo)記碼<HEAD></HEAD>設(shè)置文檔標(biāo)題以及其它不在Web網(wǎng)頁上顯示的信息<TITLE></TITLE>網(wǎng)頁標(biāo)題，將顯示在瀏覽器的標(biāo)題欄中<BODY></BODY>設(shè)置文檔的可見部分，它包含了文件的內(nèi)容<BODYBGCOLOR=？>設(shè)置背景顏色，使用顏色名或十六進(jìn)制值<BODYBACKGROUND=？>設(shè)置背景圖片<BODYTEXT=？>設(shè)置文本文字顏色，使用顏色名或十六進(jìn)制值<BODYLINK=？>設(shè)置超級鏈接文字的顏色，使用顏色名或十六進(jìn)制值<BODYVLINK=？>設(shè)置已訪問過的超級鏈接文字的顏色，使用顏色名或十六進(jìn)制值<BODYALINK=？>設(shè)置鼠標(biāo)懸停于超級鏈接文字的顏色，使用顏色名或十六進(jìn)制值<H1></H1>創(chuàng)建最大的標(biāo)題，在HTML中有六種標(biāo)題

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

<HRSIZE=?WIDTH=?NOSHADE>加入一條水平線，SIZE設(shè)置水平線的大小，WIDTH設(shè)置水平線的寬度，NOSHADE表示創(chuàng)建無陰影的水平線（3）表格標(biāo)記元素（部分）標(biāo)記元素功能含義<TABLEBORDER=#CELLSPACING=#CELLPADDING=#WIDTH=#or%>定義表格，BORDER屬性表示表格邊框粗細(xì)程度，CELLSPACING屬性用于設(shè)置表格格子之間空間的大小，CELLPADDING用來設(shè)置表格格子邊框與其內(nèi)部內(nèi)容之間空間的大小,WIDTH屬性是用來定義表格寬度<CAPTION></CAPTION>定義表格標(biāo)題<TRALIGN=?VALIGN=?>表示一個新的表格行的開始，屬性ALIGN表示橫向?qū)R方式VALIGN屬性規(guī)定單元格中內(nèi)容的垂直排列方式。<THALIGN=?VALIGN=?COLSPAN=?ROWSPAN=?>在表格的當(dāng)前行里產(chǎn)生一個新的表項單元，表示一個表項標(biāo)題(TableHeader)單元，<TH>元素內(nèi)部的文本通常會呈現(xiàn)為居中的粗體文本，，

COLSPAN及ROWSPAN表示進(jìn)行橫向及縱向地擴(kuò)展表項單元<TDALIGN=?VALIGN=?COLSPAN=?ROWSPAN=?>在表格的當(dāng)前行里產(chǎn)生一個新的表項單元，<TD>表示一個表項數(shù)據(jù)(TableData)單元，其它屬性的含義同上（4）表單標(biāo)記元素(部分)114標(biāo)記元素功能含義<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)建一個單選按鈕，文字在標(biāo)簽后面<INPUTTYPE="CHECKBOX"NAME="name">創(chuàng)建一個復(fù)選框，文字在標(biāo)簽后面【例8-1】Demo.html115<HTML><HEAD><TITLE>網(wǎng)頁標(biāo)題顯示于瀏覽器窗口的標(biāo)題欄</TITLE></HEAD><BODYBGCOLOR="#E7F9F3"><H1>H1設(shè)定一級標(biāo)題</H1><BR><B>黑體字</B><BR><I>斜體字</I><PALIGN="right"><FONTSIZE=5COLOR="red">紅色5號字</FONT><BR><BR><BR><BR><BR><PALIGN="center"><AHREF="">點擊這里將超鏈到山東大學(xué)主頁</A><P><BR><BR><AHREF="#next">點擊這里將超鏈到下面的錨點</A><PALIGN="center"><AHREF="mailto:xueqingli@">有意見請告訴我</A><P><ANAME="next">這里是一個文檔內(nèi)部錨點的起始處</A></BODY></HTML>【例8-2】用HTML實現(xiàn)表單實例116<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>你的計算機(jī)是哪一種類型：

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

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

<html>

<head>

<ScriptLanguage="JavaScript">

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

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

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

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

</Script>

//JavaScript在此結(jié)束

</Head>

</Html>

//JavaScript代碼由<ScriptLanguage=“JavaScript”>...</Script>說明//alert()是JavaScript的窗口對象方法，其功能是彈出一個具有OK對話框并顯示括號中的字符串4．服務(wù)器端腳本語言目前流行的三大服務(wù)器端腳本語言是ASP、PHP、JSP。ASP（Active

Server

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

利用它可以產(chǎn)生和運行動態(tài)的、交互的、高性能的Web服務(wù)應(yīng)用程序。PHP（HyperTextPreprocess）是一種跨平臺的服務(wù)器端的嵌入式腳本語言。它大量地借用C、Java和Perl語言的語法，并耦合PHP自己的特性，使Web開發(fā)者能夠快速地寫出動態(tài)生成頁面。JSP（Java

Server

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論