Web界面设计课件.pptVIP

*使用字體的原則考慮字體如何適應網頁，以及字體與整個設計的關係。選擇的字體和整個頁面及網站應融為一體。設計元素例如頁邊框，行間距，背景顏色和前景顏色等都可以影響最終的結果。通過字體不同的安排，可以讓網站產生豐富變化的外觀和感覺。*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?客戶端腳本語言JavaScriptJavaApplet伺服器端腳本語言*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=nameALIGN=?BORDER=?WIDTH=?HEIGHT=?添加一個圖像。SRC給定圖片檔的定位，ALIGN屬性定義圖與文本行的對齊方式；BORDER屬性設置圍繞一個圖像的邊框的大小；WIDTH和HEIGHT分別重新定義圖像的寬度和高度。HRSIZE=?WIDTH=?NOSHADE加入一條水平線，SIZE設置水平線的大小，WIDTH設置水平線的寬度，NOSHADE表示創建無陰影的水平線*（3）表格標記元素（部分）標記元素功能含義TABLEB