網(wǎng)頁(yè)的基本認(rèn)識(shí)

1、第一章網(wǎng)頁(yè)的基本認(rèn)識(shí)課程目錄1、網(wǎng)頁(yè)的基本構(gòu)成2、網(wǎng)頁(yè)設(shè)計(jì)與平面設(shè)計(jì)的區(qū)別3、作業(yè)網(wǎng)頁(yè)的基本認(rèn)識(shí)1常規(guī)網(wǎng)頁(yè)的基本構(gòu)成一、頭部 1）Logo（標(biāo)志區(qū)） 2）Banner（廣告區(qū)） 3）Navigation（導(dǎo)航）二、主體內(nèi)容區(qū) 可分結(jié)構(gòu)： 1）左右（2欄） 2）左中右（3欄）三、底部 1）FriendLink（友情鏈接區(qū)） 2）Bottom Nav（底部次導(dǎo)航） 3）CopyRight（版權(quán)區(qū)）LogoBanner其他功能區(qū)NavLeftCenterRightSec Nav（次導(dǎo)航）FriendLink（友情鏈接）CopyRigth（版權(quán)區(qū)）LogoBanner其他功能區(qū)NavLeftRight

2、Sec Nav（次導(dǎo)航）FriendLink（友情鏈接）CopyRigth（版權(quán)區(qū)）LogoBanner其他功能區(qū)NavLeftRightSec Nav（次導(dǎo)航）FriendLink（友情鏈接）CopyRigth（版權(quán)區(qū)）其他更加豐富的版面排版介紹或其他特殊頁(yè)面的欣賞網(wǎng)頁(yè)設(shè)計(jì)與平面設(shè)計(jì)的區(qū)別2先來(lái)看看網(wǎng)頁(yè)設(shè)計(jì)跟平面設(shè)計(jì)的共同點(diǎn)： 1. 都需要良好的視覺(jué)表現(xiàn) 2. 做網(wǎng)頁(yè)設(shè)計(jì)和平面設(shè)計(jì)的人都需要有良好的審美能力 3. 它們都是在平面上做設(shè)計(jì)，而不是空間中做設(shè)計(jì)可能正是因?yàn)榈谌c(diǎn)，大家都把他們混淆了。 網(wǎng)頁(yè)設(shè)計(jì)與平面設(shè)計(jì)的區(qū)別2那么它們之間到底有什么不同呢？網(wǎng)頁(yè)設(shè)計(jì)與平面設(shè)計(jì)的區(qū)別21. 設(shè)計(jì)理念

3、的不一樣 平面設(shè)計(jì)的核心是品牌。它要以品牌為出發(fā)點(diǎn)去設(shè)計(jì)，要在視覺(jué)上100體現(xiàn)品牌的魅力。 而網(wǎng)頁(yè)設(shè)計(jì)的核心是用戶(hù)。網(wǎng)站的目的是與用戶(hù)100溝通，是要實(shí)現(xiàn)某些特定的功能，這有點(diǎn)像電腦中的軟件。那么網(wǎng)頁(yè)設(shè)計(jì)其實(shí)是一種UI設(shè)計(jì)，也就是所謂的界面設(shè)計(jì)，要以用戶(hù)的操作習(xí)慣為出發(fā)點(diǎn)去設(shè)計(jì)，換句話(huà)說(shuō)也就是要設(shè)計(jì)得人性化。讓用戶(hù)使用得更方面，長(zhǎng)時(shí)間盯著網(wǎng)頁(yè)看也不覺(jué)得累。這也就是為什么眾多門(mén)戶(hù)要用白色做為頁(yè)面主色調(diào)的原因，因?yàn)榘咨淳昧瞬粫?huì)造成眼睛疲勞，而鮮艷的顏色看久了會(huì)眼困！網(wǎng)頁(yè)設(shè)計(jì)與平面設(shè)計(jì)的區(qū)別22. 視覺(jué)元素在色彩方面平面設(shè)計(jì)與網(wǎng)頁(yè)設(shè)計(jì)使用的色彩模式完全不同，平面設(shè)計(jì)因?yàn)楹笃诘膶?shí)現(xiàn)依賴(lài)于印刷，所以采

4、用CMYK的色彩模式，而網(wǎng)頁(yè)根據(jù)其顯像方式使用RGB的色彩模式。平面設(shè)計(jì)時(shí)的色彩運(yùn)用注重視覺(jué)的沖擊力及視覺(jué)流的引導(dǎo)(在這點(diǎn)上與網(wǎng)頁(yè)設(shè)計(jì)中的BANNER設(shè)計(jì)相類(lèi)似)，而網(wǎng)頁(yè)設(shè)計(jì)(產(chǎn)品類(lèi))更注重的是信息結(jié)構(gòu)關(guān)系的梳理，如果將色彩運(yùn)用的過(guò)多過(guò)強(qiáng)，很容易引起視覺(jué)的疲勞感。字體的選用 平面設(shè)計(jì)的字體選用更為自由一些，不用擔(dān)心后期實(shí)現(xiàn)的問(wèn)題，而網(wǎng)頁(yè)設(shè)計(jì)就需要考慮的更為全面，并且在字體的選用范圍上也很小所有字體都是根據(jù)用戶(hù)操作系統(tǒng)內(nèi)默認(rèn)字體而定的（宋體，微軟雅黑，黑體） 字號(hào)選擇范圍：1224號(hào)之間（特殊要求除外)網(wǎng)頁(yè)設(shè)計(jì)與平面設(shè)計(jì)的區(qū)別2圖形使用上，平面設(shè)計(jì)比網(wǎng)頁(yè)設(shè)計(jì)豐富，表現(xiàn)方式也多樣化，特別是對(duì)于產(chǎn)品

5、類(lèi)的網(wǎng)頁(yè)設(shè)計(jì)，模塊化的設(shè)計(jì)思路更為明顯，在視覺(jué)表現(xiàn)上也是如此，平面對(duì)于圖形的表現(xiàn)是不需要考慮到后期的實(shí)現(xiàn)的，在一點(diǎn)上是有目共睹的。在來(lái)說(shuō)一下咱們?cè)O(shè)計(jì)時(shí)使用的尺寸單位問(wèn)題，平面設(shè)計(jì)在使用尺寸標(biāo)注時(shí)都用的是物理尺寸的概念，比如英寸，厘米，毫米等，而網(wǎng)頁(yè)使用的像素。 網(wǎng)頁(yè)設(shè)計(jì)與平面設(shè)計(jì)的區(qū)別23. 特殊的要求網(wǎng)頁(yè)設(shè)計(jì)不僅僅是在做設(shè)計(jì)，更多的是要考慮網(wǎng)頁(yè)的打開(kāi)速度、兼容性等問(wèn)題。所以有時(shí)候不得不為了照顧這些特殊的要求而犧牲美觀(guān)。我們往往看到門(mén)戶(hù)站的網(wǎng)頁(yè)都是大量的文字，這其實(shí)是為了減少頁(yè)面的打開(kāi)時(shí)間。韓國(guó)的網(wǎng)站喜歡用大量的圖片、FLASH，那是因?yàn)轫n國(guó)的網(wǎng)絡(luò)帶寬全球第二，它有那個(gè)條件去大量的實(shí)現(xiàn)視覺(jué)沖擊

6、！而目前的中國(guó)不行！ 網(wǎng)頁(yè)設(shè)計(jì)與平面設(shè)計(jì)的區(qū)別24. 還有一點(diǎn)，就是很多人覺(jué)得做網(wǎng)站就要做得很絢麗，很好玩。其實(shí)這些人是把做網(wǎng)站和做網(wǎng)絡(luò)廣告給弄混淆了！ 我們平時(shí)看到很多品牌的網(wǎng)站，很絢麗、很好玩、甚至很有創(chuàng)意。但是別忘了！那其實(shí)是網(wǎng)絡(luò)廣告而已！雖然那表面上是個(gè)網(wǎng)站。網(wǎng)絡(luò)廣告的目的跟其他廣告一樣，為的就是宣傳品牌形象、介紹產(chǎn)品功能等等。但是網(wǎng)站不一樣！一個(gè)網(wǎng)站是要實(shí)現(xiàn)某些具體的功能，也就是說(shuō)網(wǎng)站是要功能美觀(guān)，而網(wǎng)絡(luò)廣告是要美觀(guān)功能。 網(wǎng)頁(yè)設(shè)計(jì)與平面設(shè)計(jì)的區(qū)別25、呈現(xiàn)方式對(duì)比網(wǎng)頁(yè)設(shè)計(jì)與平面設(shè)計(jì)的區(qū)別25、呈現(xiàn)方式對(duì)比網(wǎng)頁(yè)設(shè)計(jì)與平面設(shè)計(jì)的區(qū)別25、瀏覽方式平面設(shè)計(jì)的屬于漸進(jìn)式的瀏覽方式，無(wú)法對(duì)整個(gè)瀏覽的過(guò)程進(jìn)行多樣化串聯(lián)，網(wǎng)頁(yè)設(shè)計(jì)擁有滾動(dòng)條下拉、按鈕鏈接跳轉(zhuǎn)等多樣化的瀏覽信息方式，在擁有同樣一種信息架構(gòu)的條件下，信息之間的串聯(lián)性更為豐富，用戶(hù)選擇信息的自由度更大，但平面設(shè)計(jì)也自然有其優(yōu)勢(shì)所在，比如平時(shí)我在設(shè)計(jì)照片書(shū)這類(lèi)產(chǎn)品的時(shí)候，就很明顯的發(fā)現(xiàn)，這一類(lèi)的產(chǎn)品在電腦顯示器上進(jìn)行翻閱，不如印刷成為一個(gè)真實(shí)的書(shū)本來(lái)翻閱感受要更好一些，并且更具有收藏及紀(jì)念意義。網(wǎng)頁(yè)設(shè)計(jì)與平面設(shè)計(jì)的區(qū)別26、傳統(tǒng)播方式平面設(shè)計(jì)屬于比較傳統(tǒng)的信息媒介設(shè)計(jì)，一般會(huì)通過(guò)張貼、銷(xiāo)售、郵寄派送等形式進(jìn)行傳播