網(wǎng)絡信息制作與發(fā)布電子教案

網(wǎng)絡信息制作與發(fā)布第四章Web藝術設計2/5/2025第四章Web藝術設計主要內容：

本章主要介紹Web設計所需的美學原理和設計法則，具體涉及到影響網(wǎng)頁觀感的色彩、文字、圖像、導航元件以及版面設計等方面的知識。2/5/20254.1Web設計環(huán)境

在進行網(wǎng)頁設計和制作的過程中，了解網(wǎng)絡的相關技術以及訪問者的外在條件（如訪問者的訪問速度、計算機平臺、使用何種瀏覽器等）是十分重要的。這些因素將影響你設計的Web文件大小和設計復雜程度。2/5/20254.1Web設計環(huán)境4.1.1Web的技術環(huán)境1.關于瀏覽器的技術2.關于屏幕分辨率的技術3.關于帶寬的技術2/5/2025關于瀏覽器的技術（1）采用可兼容的技術盡量使設計的網(wǎng)頁可以在各種瀏覽器中使用。不使用最新版本的HTML規(guī)范編碼，便于與各種版本的瀏覽器兼容。（2）采用最新的技術設計這就要求用戶采用最新的瀏覽器，還要有能夠顯示特殊媒體類型的增強插件，這樣才能跟上設計者的步伐。（3）采用對用戶指定特定瀏覽器的方式2/5/2025關于瀏覽器的技術總之，在對瀏覽器的選擇上，可以采用一種能促進漸進開發(fā)的策略。例如：在創(chuàng)建站點時使用前一個舊版本的HTML來編碼，然后慢慢向其中加入一些增強特性，不斷向最新版本靠近，使用戶使用新舊版本的瀏覽器都可訪問。若要加入一些需要插件支持的動畫或特殊效果，則要使用大多數(shù)瀏覽器都支持的開發(fā)工具。2/5/2025關于屏幕分辨率的技術顯示器的屏幕分辨率：是指顯示器屏幕所能顯示的象素總數(shù)，這一指標是由顯示器和顯示卡的性能決定的。通常用水平和垂直方向的象素數(shù)目的乘積表示。如：800

600。隨著計算機顯示器和顯示卡性能的提高，在網(wǎng)頁設計中，很多人已經(jīng)將800

600作為基本的分辨率。2/5/2025關于寬帶的技術因此網(wǎng)站設計者應在不同的連接速度下進行瀏覽測試，以獲得在不同的連接速度下瀏覽網(wǎng)頁的真實情況。在設計時應盡量簡化頁面,少使用圖形或將圖形大小限制在10－15KB范圍之內。2/5/20254.1Web設計環(huán)境4.1.2Web的媒體環(huán)境規(guī)劃Web站點時應考慮以下幾點：1.計算機屏幕的形狀2.要有足夠的對比度以利于用戶閱讀3.屏幕分辨率比印刷品低得多2/5/20254.1Web設計環(huán)境4.1.3Web的設計流程1.Web設計的兩個階段2.Web設計的一般步驟3.Web站點的主要類型2/5/2025Web設計的兩個階段

Web的設計流程通常包含兩個階段：

第一階段：了解客戶需求，然后根據(jù)不同的網(wǎng)站類型進行創(chuàng)意，同時與技術人員溝通，了解設計所需的技術難度，確定方案。

第二階段：制作出頁面樣例，與客戶交流征求意見，然后修改，直到確認，由制作人員協(xié)助完成設計。2/5/2025Web設計的一般步驟1.首先要明確網(wǎng)站的性質和目的。2.要分析網(wǎng)站的用戶。3.確定頁面的結構和框架。4.應在不同機器、瀏覽器和不同速度下測試網(wǎng)頁，及早查處所出現(xiàn)的問題。

2/5/20254.2Web設計元素4.2.1色彩1.色彩基礎2.色彩感覺3.色調和色彩搭配4.計算機色彩5.網(wǎng)頁色彩搭配的原則6.搭配技巧2/5/2025色彩基礎1.顏色的產生2.色彩的屬性色相、飽和度、明度（亮度）3.色彩的三原色和色環(huán)三原色：紅、黃、藍色環(huán)：暖色、中性色、冷色同類色、鄰近色、對比色、互補色2/5/2025色彩感覺1.心理感覺：冷暖、輕重、軟硬、華麗樸素、積極消極2.顏色的聯(lián)想2/5/2025色調和色彩的搭配1.色調2.配色色相搭配明度搭配飽和度搭配整體色調2/5/2025計算機色彩1.色彩模式：RGB、CMYK、Lab2.色深：顏色數(shù)＝2色深位數(shù)3.混色4.網(wǎng)絡安全色：256＝282/5/2025網(wǎng)頁色彩搭配的原則1.色彩的合理性2.色彩的獨特性3.色彩的藝術性2/5/2025搭配技巧1.非彩色的搭配2.彩色的搭配3.網(wǎng)頁色彩掌握的過程單色五彩繽紛標準色單色2/5/20254.2Web設計元素4.2.2文本網(wǎng)頁中的文本有兩種狀態(tài)：HTML文本和圖形文件格式的文字圖像。1.字體2.字號和字距2/5/2025字體網(wǎng)頁字體也是網(wǎng)頁的主要組成部分，是信息的重要載體。字體的分類：1.英文字體2.中文字體3.襯線和字族2/5/2025字號和字距字號的大小有以下三種標定方法：號數(shù)制：從初號、一號到八號，有16種之多。號數(shù)越大，字體越小。級數(shù)制：從8級到96級，級數(shù)越大，字體越大。點數(shù)制：從5磅到72磅，有21種之多。磅數(shù)越大，字體越大。點數(shù)制是世界流行的計算字體的標準單位。2/5/2025字號和字距網(wǎng)頁文字的字號變化宜少不宜多。選擇少量的字體和字號會使頁面看起來顯得更干凈。如果在網(wǎng)頁設計中使用了一種用戶沒有安裝的字體，則瀏覽器將用缺省字體顯示。（PC中的英文缺省字體是：TimeNewRoman）。2/5/2025字號和字距字距和行距字距:字與字之間的距離。行距：行與行之間的距離。字距與行距之間的比例關系：行距至少要大于字距。加寬字距和行距有輕松、疏朗之感。行與行之間要考慮適當增加空白，以便閱讀。2/5/2025字號和字距文字塊的形狀由編排形式?jīng)Q定，在版面設計中，主要有如下編排方式：兩邊對齊左（或右）對齊中間對齊圖文繞排2/5/2025字號和字距網(wǎng)頁中每一頁的文字應盡量完整每一頁應有清晰的標題盡量少用閃爍字在文字使用上要特別注意易讀性和趣味性一般網(wǎng)頁文字字體是穩(wěn)定的，閱讀要求識別輕松，濃淡適宜。2/5/2025小結光的三原色是什么？P108顏色分為哪兩種？P179色彩的屬性是什么？P179WINDOWS的操作系統(tǒng)中缺省的中文字體有哪些？P1912/5/20254.2Web設計元素4.2.3圖像與VI設計1.網(wǎng)頁圖像和文件格式2.選擇圖形工具3.網(wǎng)頁中的圖像4.網(wǎng)頁版面中圖像的編排5.視覺標識設計2/5/2025網(wǎng)頁圖像和文件格式數(shù)字圖像類型1.位圖：又稱為柵格圖像。是用小方形柵格（即象素）組成的圖像，與分辨率有關。2.矢量圖：由矢量定義的直線或曲線組成的圖像。矢量圖形與分辨率無關。2/5/2025網(wǎng)頁圖像和文件格式圖像文件格式基礎知識1.GIF2.JPG3.PNG3.BMP2/5/2025網(wǎng)頁圖像和文件格式GIF是為網(wǎng)絡圖形傳送而設計的，采用了無損壓縮技術，色深為8位。GIF還有兩個重要特點：透明和交錯顯示。JPG是適合于照片和連續(xù)灰度圖像的最佳格式，色深24位（真彩色）。適合具有豐富細節(jié)的圖片。PNG（便攜式網(wǎng)絡圖形格式）是專為Web設計，但由于缺乏瀏覽器支持，一直未能普及。2/5/2025網(wǎng)頁圖像和文件格式BMP格式是Windows中的標準圖像文件格式，有壓縮和不壓縮兩種形式。TIF最早是為了存儲掃描儀圖像而設計。也是PC中使用最廣泛的圖像文件格式。

TGA是Truevision公司為其顯卡開發(fā)的一種圖像文件格式，現(xiàn)已成為數(shù)字化圖像，2/5/2025網(wǎng)頁圖像和文件格式Web圖像的應用：統(tǒng)一的格式速度的限制2/5/2025選擇圖形圖像設計工具Adobe公司的PhotoshopAdobe的ImageReady是一個微型的Photoshop版本，后來被集成到了Photoshop中。Adobe的Illustrator是一個高端的繪圖工具。Macromedia公司的Firework是一款集圖形處理和文本處理于一體的功能強大的應用軟件。2/5/2025網(wǎng)頁中的圖像照片類繪畫類2/5/2025網(wǎng)頁版面中圖像的編排（1）圖像的選擇與剪裁（2）圖像形狀的變化（3）虛實的變化2/5/2025視覺標識設計（VI設計）視覺標識（VI：VisualIdentity）是指通過視覺語言的運用來樹立形象和傳播信息。其應用一直是CIS（CorporateIdentitySystem：企業(yè)識別系統(tǒng)）的基礎和最直接的表現(xiàn)形式。CIS的策劃和運作往往以VI來表現(xiàn)，是CIS的一部分。2/5/2025視覺標識設計（VI設計）1.設計網(wǎng)站的標志2.選擇網(wǎng)站的標準色彩3.選擇網(wǎng)站的標準字體4.構思網(wǎng)站的廣告詞2/5/20254.2Web設計元素4.2.4動畫網(wǎng)頁中的插圖可以像電視動畫一樣真實生動，有人用情景化設計來描繪將來的網(wǎng)頁設計。無論人或動物的視覺，總是先注意到運動著的東西。因此，很多廣告公司都將自己的網(wǎng)絡廣告做成動畫的形式，以便獲得最大的宣傳效果。2/5/2025Web動畫的發(fā)展狀況（1）動畫的初級階段（2）無處不在的GIF89a（3）動畫的新貴－－Shockware（4）用Java來實現(xiàn)動畫（5）Flash動畫和Streaming技術2/5/2025動畫制作的工具GIFAnimationAdobeImageReadyFlash2/5/2025動畫原理傳統(tǒng)的動畫是由很多靜態(tài)畫面序列連續(xù)地播放形成的。計算機的動畫和傳統(tǒng)的動畫原理基本上是一樣的，只是有些名詞叫法不同。幀（Frame）：每個動畫單元幀速率（fps：Framepersecond，指一秒鐘動畫所包含的幀數(shù)）是動畫概念的一項重要指標2/5/2025網(wǎng)頁中的動畫廣告廣告的任務是在最短的時間內傳達一個簡潔明了的信息或意念，因此網(wǎng)絡動畫廣告的創(chuàng)作比一般意義上的故事情節(jié)動畫更為自由。2/5/20254.2Web設計元素4.2.5視頻和音頻Web多媒體在信息的傳遞中扮演著重要和獨特的角色，因此一個網(wǎng)頁設計師要時刻跟蹤這些技術的發(fā)展狀態(tài)，對多媒體的應用應有比較理智的認識。

2/5/2025音頻網(wǎng)上使用的音頻格式文件大部分經(jīng)過壓縮，主要有：MIDI格式RA（RealAudio）格式MP3（MPEG1Player3）格式 MP4格式：VQF格式： WMA格式： WAV（WaveFromAudioFile）格式：AIF格式：AU格式：2/5/2025視頻計算機上使用的是數(shù)字視頻（電視電影視頻是模擬信號），它是將傳統(tǒng)的模擬視頻片斷捕捉并進行轉換而成（如：VCD），下面介紹有關視頻格式和視頻嵌入技術方面的知識。2/5/2025視頻MOV格式AVI格式RM（RealMedia）格式ASF格式2/5/2025視頻將視頻/音頻文件嵌入到HTML的方法鏈接：這種方式就像放置任何其它鏈接一樣。嵌入：采用這種方法可以對網(wǎng)絡上的視頻文件邊下載邊播放，或者可以讓視頻信息與其它內容出現(xiàn)在同一頁面。但是這要求用戶端有相應的插件（Plugin）才能播放。2/5/2025虛擬現(xiàn)實（VR）虛擬現(xiàn)實（VirtualReality）是一項與多媒體技術密切相關的邊緣技術。HTML是面向二維的，而VRML（VirtualRealityModelingLanguage，虛擬現(xiàn)實建模語言)是一個開放的、面向三維的、可擴充的三維場景描述語言。2/5/20254.2Web設計元素4.2.6導航和交互設計交互式設計就是在無序且繁瑣的信息之間創(chuàng)造一個具有吸引力的、高效的瀏覽路線，給人以極大的自由度去創(chuàng)造和選擇他們想要的信息，并輕易地了解整個系統(tǒng)與組織的內容。2/5/2025人機交互的常用方式1.問答式對話2.菜單交互3.功能鍵4.圖符5.查詢語言界面6.自然語言界面2/5/2025人機交互的特點1.簡易性2.友好性3.靈活性4.明確性5.一致性6.容錯性7.反饋性6.圖形化2/5/2025超鏈接設計1.超文本2.友好交互設計3.組織網(wǎng)頁上的信息4.增加合理的導航鏈接2/5/2025超鏈接設計1.超文本超文本是一個編寫和組織信息的豐富環(huán)境。有了超文本鏈接，用戶可以按自己的順序和方式去瀏覽信息，隨心所欲地從一個感興趣的地方跳到另一處，并立即找到所需的信息。2/5/2025超鏈接設計2.友好交互設計友好的交互設計還應能讓用戶知道他在網(wǎng)站中所處的位置，應提供足夠的位置信息，使用戶清楚地知道：我在哪？我能去哪？我怎樣去哪？我如何回到起點？2/5/2025超鏈接設計3.組織網(wǎng)頁上的信息信息設計是決定一個網(wǎng)站成功與否的重要因素。如何使鏈接、按鈕與網(wǎng)頁有機地結合起來，既醒目又和諧統(tǒng)一，是網(wǎng)頁設計師的重要任務。A、安排鏈接結構的原則B、組織網(wǎng)頁信息的常用方法2/5/2025超鏈接設計4.增加合理的導航鏈接導航欄：導航欄就像網(wǎng)站的目錄一樣，通過它可知道網(wǎng)站有那些欄目。每個欄目的內容如何。導航欄的每部分都與站點的其它頁面相鏈接。其它鏈接設計：導航欄可以使用戶訪問站點的各個頁面，目錄頁面可以使用戶準確地找到所需的內容。對于較長的頁面可以在該頁面建立若干個書簽，便于閱讀。總之，應根據(jù)需要采用盡可能多的鏈接形式。2/5/2025網(wǎng)站目錄結構和鏈接結構對頁面設計的影響設計原則與目的：設計網(wǎng)站目錄結構的原則是方便網(wǎng)站的管理與維護；設計鏈接結構的原則是方便瀏覽者的閱讀。對頁面的影響：采用何種鏈接結構將直接影響到版面的布局?？傊?，設計鏈接結構的目的在于用最少的鏈接得到最高的瀏覽效率。2/5/20254.3Web頁面設計Web網(wǎng)頁設計不同于傳統(tǒng)的平面或版式設計，但從其表現(xiàn)形式來看，還是以圖像、文字為主的靜態(tài)設計。因此與傳統(tǒng)的平面和版式設計有一定的類似。2/5/20254.3Web頁面設計4.3.1版式設計基礎版面：指頁面編排所具有的外在形式，是各種內容編排布局的整體表現(xiàn)形式。版面設計的任務：版面設計的基本原則：2/5/2025平面構成基礎1.潛在的結構2.點的結構3.線的結構4.面的結構2/5/2025平面構成基礎1.潛在的結構

版面中一些潛在的線與點，可衍生出各種各樣的結構，使版面的布局更清晰和合理。這些版面結構往往與視覺流程的設計和形式法則的運用有密切的聯(lián)系。2/5/2025平面構成基礎2.點的結構

點是版面設計中一個最靈活的要素，其大小、形態(tài)