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

網(wǎng)絡(luò)信息制作與發(fā)布第四章Web藝術(shù)設(shè)計(jì)2/5/2025第四章Web藝術(shù)設(shè)計(jì)主要內(nèi)容：

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

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

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

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

Web的設(shè)計(jì)流程通常包含兩個(gè)階段：

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

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

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

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

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

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

點(diǎn)是版面設(shè)計(jì)中一個(gè)最靈活的要素，其大小、形態(tài)