《網(wǎng)絡(luò)信息制作與發(fā)布》

第四章網(wǎng)頁的藝術(shù)設(shè)計浙江廣播電視大學徐斌立導言本章主要介紹網(wǎng)頁設(shè)計的設(shè)計特點。網(wǎng)頁設(shè)計與傳統(tǒng)的平面設(shè)計在視覺傳達上有很多的相似點，但在技術(shù)實現(xiàn)方面又有很大的區(qū)別。網(wǎng)頁設(shè)計是傳統(tǒng)的平面設(shè)計的視覺傳達效果運用和網(wǎng)絡(luò)技術(shù)實現(xiàn)的有機結(jié)合。和傳統(tǒng)的媒體一樣，網(wǎng)頁也要求有一定的藝術(shù)感染力。學習本章不僅可以學到網(wǎng)頁設(shè)計相關(guān)的色彩、版式和文字設(shè)計原理，以及文字在設(shè)計中的運用，還能夠通過色彩的運用、素材的調(diào)整和整體頁面的版式布局來學習網(wǎng)頁的設(shè)計要素。學習目標認知目標了解網(wǎng)頁設(shè)計中瀏覽器與顯示器對網(wǎng)頁設(shè)計的影響2.理解網(wǎng)頁中色彩的基本概念3.分析網(wǎng)頁色彩搭配的一般原則4.理解網(wǎng)頁中構(gòu)成設(shè)計的有關(guān)概念5.理解網(wǎng)頁中的版式布局學習目標技能目標完成網(wǎng)頁布局方案提出有關(guān)網(wǎng)頁的配色方案傳統(tǒng)的平面設(shè)計講究頁面構(gòu)圖、版式布局、色彩搭配、空間表現(xiàn)，這些要素對于網(wǎng)頁設(shè)計來說也是適用的。4.1網(wǎng)頁設(shè)計的兼容性在網(wǎng)頁設(shè)計的過程中，要注意兼容性問題。設(shè)計好的網(wǎng)頁在實際工作環(huán)境下無法運行，輕者造成信息無法準確地傳達，嚴重時系統(tǒng)會無法正常運行，需要重新設(shè)計。對于網(wǎng)頁，實際上而言，最大的挑戰(zhàn)就是在不同的瀏覽器、操作系統(tǒng)和硬件平臺中設(shè)計出顯示效果相同網(wǎng)頁效果。

從理論上講，所有的網(wǎng)絡(luò)瀏覽器都應該完全支持同樣的標準，而開發(fā)者也制作符合標準的網(wǎng)站就能適當?shù)爻霈F(xiàn)在每位瀏覽者面前。但是，瀏覽網(wǎng)站的用戶使用各種各樣的瀏覽器平臺，這些瀏覽器功能各有不同，有些瀏覽器不能完全支持網(wǎng)絡(luò)標準。4.1網(wǎng)頁設(shè)計的兼容性IE（內(nèi)核）瀏覽器

相信大家對這個瀏覽器非常熟悉，當我們在Windows系統(tǒng)中上網(wǎng)查看網(wǎng)頁內(nèi)容的時候，打開IE瀏覽器。IE即InternetExplorer的縮寫，是由微軟公司出品，由于采用與Windows捆綁的方式提供給用戶，IE占據(jù)了絕大多數(shù)的個人計算機瀏覽器份額。除了IE瀏覽器外，還有多種使用IE內(nèi)核的第三方瀏覽器，如“360安全瀏覽器”“遨游”等，這些瀏覽器因為使用了IE內(nèi)核，同時因為用了完全不同的外殼，在功能上有所增強。國內(nèi)絕大多數(shù)網(wǎng)絡(luò)用戶使用的都是基于微軟的IE內(nèi)核的瀏覽器。（其實在開發(fā)中，測試不同IE版本之間的兼容性是更痛苦的一件事）4.1.1瀏覽器4.1網(wǎng)頁設(shè)計的兼容性非IE（內(nèi)核）瀏覽器其他的非IE(內(nèi)核）瀏覽器，有歐朋的OPERA瀏覽器、Google的Chrome瀏覽器、Mozilla的Firefox瀏覽器等。我們除了IE之外還有多種瀏覽器可以選擇，相比來說，這些瀏覽器在Web標準化支持來說比IE更好。我們在網(wǎng)頁設(shè)計中，會考慮到不同瀏覽器的兼容問題，所以必須在不同的瀏覽器中測試制作好的網(wǎng)頁的效果。有這么多瀏覽器，同學們認的過來嗎？開發(fā)的時候在那些瀏覽器中測試比較好呢？4.1網(wǎng)頁設(shè)計的兼容性現(xiàn)在的互聯(lián)網(wǎng)使用者討論得最多的話題除了速度還有兼容性，隨著各種智能終端設(shè)備的逐漸普及，人們對網(wǎng)站的訪問早巳不再局限于計算機這一媒體介質(zhì)，因此如何才能讓各種各樣的智能終端設(shè)備順利地訪問網(wǎng)站成為一個新問題。1.計算機顯示器在瀏覽網(wǎng)頁時，所以網(wǎng)頁隨著屏幕尺寸的不同呈現(xiàn)結(jié)果也不相同。瀏覽器的可用空間受到屏幕分辨率的影響?，F(xiàn)階段大多數(shù)人的顯示器分辨率設(shè)置到1024x768或更高（17寸屏幕），但是考慮到以低分辨率來適應高分辨率的原則，所以很多網(wǎng)站還是在1024X768的分辨率下來進行制作。4.1.2顯示設(shè)備4.1網(wǎng)頁設(shè)計的兼容性當顯示器的分辨率為1024x768時，瀏覽器的屏幕最大寬度為1024像素（px），由于默認的垂直滾動條占去20像素，所以網(wǎng)頁的安全寬度應該小于等于1000像素。所謂安全是指在全屏顯示的時候，瀏覽器是不會出現(xiàn)水平滾動條。4.1.2顯示設(shè)備騰訊網(wǎng)寬度1000px浙江廣播電視大學網(wǎng)站寬度1000px在后面課程講授布局的時候，我們會研究和學歷主流網(wǎng)站布局方式4.1網(wǎng)頁設(shè)計的兼容性目前智能終端設(shè)備（智能手機或平板電腦）屏幕分辨率呈現(xiàn)高分辨率、多樣化趨勢，市場上的三大主流智能設(shè)備如下：Google的Android系統(tǒng)、蘋果的I0S系統(tǒng)、微軟的WindowsPhone系統(tǒng)為了更好地迎合多種智能終端訪問設(shè)備，在進行網(wǎng)站設(shè)計的過程中，一定要注意保證網(wǎng)站基礎(chǔ)構(gòu)建的靈活、這樣才能做到根據(jù)不同的分辨率對網(wǎng)頁進行相應的調(diào)整，從而保證整個頁面的整齊與統(tǒng)一。4.1.2智能終端設(shè)備4.1網(wǎng)頁設(shè)計的兼容性目前智能終端設(shè)備（智能手機或平板電腦）屏幕分辨率呈現(xiàn)高分辨率、多樣化趨勢，市場上的三大主流智能設(shè)備如下：Google的Android系統(tǒng)、蘋果的I0S系統(tǒng)、微軟的WindowsPhone系統(tǒng)為了更好地迎合多種智能終端訪問設(shè)備，在進行網(wǎng)站設(shè)計的過程中，一定要注意保證網(wǎng)站基礎(chǔ)構(gòu)建的靈活、這樣才能做到根據(jù)不同的分辨率對網(wǎng)頁進行相應的調(diào)整，從而保證整個頁面的整齊與統(tǒng)一。4.1.2智能終端設(shè)備4.1網(wǎng)頁設(shè)計的兼容性智能終端設(shè)備中的頁面設(shè)計與WebAPP制作不在本課的知識點范圍，我在這里簡要介紹一下相關(guān)核心技術(shù)。

關(guān)于移動網(wǎng)站分辨率寬度設(shè)置：

寬度可以使用320px為標準，圖片寬度可以以640px為標準。

這樣一方面兼容了低分辨率的低端機，一方面兼容了高分辨率的高端機，缺點