人機交互第7章Web界面設計_第1頁
人機交互第7章Web界面設計_第2頁
人機交互第7章Web界面設計_第3頁
人機交互第7章Web界面設計_第4頁
人機交互第7章Web界面設計_第5頁
已閱讀5頁，還剩138頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

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

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

定義

Web網頁

Web網頁靜態網頁網頁的內容一般不會變化，除非管理員手工修改網頁內容

不能實現與瀏覽器用戶的交互，用戶只是被動的瀏覽網頁的信息

網頁文件擴展名一般為html或htm靜態網頁動態網頁網頁中包含了Web應用程序代碼，網頁的內容通常是動態可變的。網頁中動態顯示的數據通常放在后臺的數據庫里。

以數據庫技術為基礎，可以實現與瀏覽器用戶的交互，用戶可以通過網頁輸入和查詢內容。不是靜態的html文件，而是程序文件，一般擴展名為asp,,jsp,php,cgi動態網頁網站是網頁等文件的集合，擁有獨立的域名，為用戶提供各種信息和服務?！?/p>

定義網站優秀網站的特點1、結構和導航清晰，便于使用2、特色鮮明3、色彩搭配和諧4、較快的瀏覽速度5、不斷更新的內容Web界面實例分析

簡要介紹幾種典型的網站的實例，以便了解門不同類型的網站的設計風格與特點。

1.商業站點

2.信息站點

3.娛樂站點

4.門戶站點

1．商業站點

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

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

基本信息的發布支持與幫助投資機會

公共關系

招聘信息

電子商務

2．信息站點

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

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

4．門戶站點

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

超文本標記語言

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

分類●

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

屬性●

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

Web服務器的配置

Web服務簡介web服務器Web服務簡介一、Web服務概述

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

ASP（ActiveServerPage：動態服務器網頁技術）

ASP.NET（.NET平臺的動態服務器網頁技術）

JSP（JavaServerPage：Java服務器網頁技術）

PHP（PersonalHomePage：個人主頁技術）ColdFusion（可用于Windows和Solaris操作系統平臺的動態服務器網頁技術）

Web服務器配置

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

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

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

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

人會犯錯誤（Peoplemakemistakes）

當人犯錯之后系統就會不正常，不適當的警聲和警示會造成緊張，進而可能產生更多的錯誤。

人是不同的（Peoplearedifferent）

人的物理能力懸殊很大。設計者不應該只以自身的能力為設計依據。

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

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

Web界面設計是設計的一種，要求簡練、明確。應盡量把網頁的層次簡要化，力求以最少的點擊次數鏈接到具體的內容。

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

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

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

實例災難性目錄找"苯甲酸芐酯"目錄設計的目錄設計googledirectory的目錄設計Web界面要素設計1.Web界面規劃2.文化與語言3.內容、風格與布局、色彩設計4.文本設計5.多媒體元素設計

1.Web界面規劃

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

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

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

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

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

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

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

常見的網頁布局結構1．“國字”型布局“國”字型布局因布局結構與漢字“國”相似而得名。其頁面的最上部分一般放置網站的標志和導航欄或Banner廣告，頁面中間主要放置網站的主要內容，最下部分一般放置網站的版權信息和聯系方式等。

常見的網頁布局結構2．T型布局T型布局結構因與英文大寫字母T相似而得名。其頁面的頂部一般放置橫網站的標志或Banner廣告，下方左側是導航欄菜單，下方右側則用于放置網頁正文等主要內容。

常見的網頁布局結構3．標題正文型標題正文型布局的布局結構一般用于顯示文章頁面、新聞頁面和一些注冊頁面等。

常見的網頁布局結構4．左右框架型布局左右框架型布局結構是一些大型論壇和企業經常使用的一種布局結構。其布局結構主要分為左右兩側的頁面。左側一般主要為導航欄鏈接，右側則放置網站的主要內容

常見的網頁布局結構5．上下框架型上下框架型布局與前面的左右框架型布局類似。其區別僅在于是一種上下分為兩頁的框架。

常見的網頁布局結構6.綜合框架型綜合框架型布局是結合左右框架型布局和上下框架型布局的頁面布局技術

常見的網頁布局結構7．POP布局POP布局是一種頗具藝術感和時尚感的網頁布局方式。頁面設計通常以一張精美的海報畫面為布局的主體。

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

CNNUSAToday實例UI花園

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

2．客戶端腳本語言JavaScript3．服務器端腳本語言1091.超文本標記語言HTMLHTML已經成為表示Web文檔信息的標準方法，是構成Web頁面的主要工具。HTML是用來表示網上信息的符號標記語言，是一個跨平臺語言。從結構上講，HTML文件由各種標記元素組成，用于組織文件的內容和指導文件的輸出格式。110（1）基本標記元素（部分）111標記元素功能含義<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色)。112標記元素功能含義<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表示橫向對齊方式VALIGN屬性規定單元格中內容的垂直排列方式。<THALIGN=?VALIGN=?COLSPAN=?ROWSPAN=?>在表格的當前行里產生一個新的表項單元，表示一個表項標題(TableHeader)單元，<TH>元素內部的文本通常會呈現為居中的粗體文本，，

COLSPAN及ROWSPAN表示進行橫向及縱向地擴展表項單元<TDALIGN=?VALIGN=?COLSPAN=?ROWSPAN=?>在表格的當前行里產生一個新的表項單元，<TD>表示一個表項數據(TableData)單元，其它屬性的含義同上（4）表單標記元素(部分)114標記元素功能含義<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.html115<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>【例8-2】用HTML實現表單實例116<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>HTML5117超文本標記語言（HTML）的第五次重大修改,

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

<html>

<head>

<ScriptLanguage="JavaScript">

//JavaScript在此出現

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

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

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

</Script>

//JavaScript在此結束

</Head>

</Html>

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

Server

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

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

Server

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

溫馨提示

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

評論

0/150

提交評論