L10-《網(wǎng)絡(luò)信息制作與發(fā)布》網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)1

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

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

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

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

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

寬度可以使用320px為標(biāo)準(zhǔn)，圖片寬度可以以640px為標(biāo)準(zhǔn)。

這樣一方面兼容了低分辨率的低端機(jī)，一方面兼容了高分辨率的高端機(jī)，缺點(diǎn)