- 相關(guān)推薦
網(wǎng)頁設(shè)計(jì)中的頁面尺寸標(biāo)準(zhǔn)參考
網(wǎng)頁設(shè)計(jì)中的頁面尺寸會(huì)根據(jù)不同的功能有不同的標(biāo)準(zhǔn)，下面是小編整理的網(wǎng)頁頁面的尺寸標(biāo)準(zhǔn)介紹吧，歡迎閱讀！
對(duì)于固定寬度的網(wǎng)站布局，設(shè)計(jì)師常用的分辨率有：760px、780px、920px、950px等，如今大尺寸、寬屏幕的顯示器越來越多，越來越普及，有些設(shè)計(jì)師也開始采用1000px、1003px這樣的分辨率。
頁面最大化、滿屏化的網(wǎng)站看著的確是舒服，但過高的分辨率在設(shè)計(jì)師顯示器上合適，并不代表在瀏覽者的顯示器上也合適�，F(xiàn)在用的最多的分辨率還是1024x768，在這種分辨率下，含滾動(dòng)條的頁面最大寬度應(yīng)不超過994px，所以一般頁面寬度定位在990px以內(nèi)比較適宜。
這一講主要來說說網(wǎng)頁設(shè)計(jì)的標(biāo)準(zhǔn)尺寸
一、在800x600分辨率下，頁面寬度應(yīng)在778px以內(nèi)，這樣不會(huì)出現(xiàn)橫向滾動(dòng)條，高度可以依據(jù)版面和內(nèi)容而定。
二、在1024x768分辨率下，頁面寬度應(yīng)在1003px以內(nèi)，如果僅一屏顯示的頁面，高度在612px～615px之間，這樣橫向和縱向滾動(dòng)條都不會(huì)出現(xiàn)。
三、在photoshop中做800x600分辨率下僅一屏的網(wǎng)頁時(shí)，尺寸可以設(shè)為740x560左右。
頁面標(biāo)準(zhǔn)按800x600分辨率制作，尺寸為778pxx434px
頁面長(zhǎng)度一般不要超過三屏，寬度不宜出現(xiàn)橫向滾動(dòng)條為宜
每個(gè)標(biāo)準(zhǔn)頁面為A4幅面大小，即8.5x11英寸
全尺寸banner為468pxx60px，半尺寸banner為234pxx60px，小banner為88pxx31px
小圖標(biāo)的標(biāo)準(zhǔn)尺寸還有120pxx90px、120pxx60px等
每個(gè)非首頁靜態(tài)頁面含圖片字節(jié)不超過60K，全尺寸banner不宜超過14k
標(biāo)準(zhǔn)網(wǎng)頁廣告尺寸規(guī)格
1、120x120，這種廣告規(guī)格適用于產(chǎn)品或新聞?wù)掌故尽?/p>
2、120x60，這種廣告規(guī)格主要用于做LOGO使用。
3、120x90，主要應(yīng)用于產(chǎn)品演示或大型LOGO。
4、125x125，這種規(guī)格適于表現(xiàn)照片效果的圖像廣告。
5、234x60，這種規(guī)格適用于框架或左右形式主頁的廣告鏈接。
6、392x72，主要用于有較多圖片展示的廣告條，用于頁眉或頁腳。
7、468x60，應(yīng)用最為廣泛的廣告條尺寸，用于頁眉或頁腳。
8、88x31，主要用于網(wǎng)頁鏈接，或網(wǎng)站小型LOGO。
廣告形式 像素大小 最大尺寸 備注
BUTTON 120x60(必須用gif) 7K
215x50(必須用gif) 7K
通欄 760x100 25K 靜態(tài)圖片或減少運(yùn)動(dòng)效果
430x50 15K
超級(jí)通欄 760x100 to 760x200 共40K 靜態(tài)圖片或減少運(yùn)動(dòng)效果
巨幅廣告 336x280 35K
585x120
豎邊廣告 130x300 25K
全屏廣告 800x600 40K 必須為靜態(tài)圖片，F(xiàn)LASH格式
圖文混排 各頻道不同 15K
彈出窗口 400x300(盡量用gif) 40K
BANNER 468x60(盡量用gif) 18K
懸停按鈕 80x80(必須用gif) 7K
流媒體 300x200
(可做不規(guī)則形狀但尺寸不能超過300x200) 30K 播放時(shí)間小于5秒60幀(1秒/12幀)
網(wǎng)頁中的廣告尺寸
1.首頁右上，尺寸120x60
2.首頁頂部通欄，尺寸468x60
3.首頁頂部通欄，尺寸760x60
4.首頁中部通欄，尺寸580x60
5.內(nèi)頁頂部通欄，尺寸468x60
6.內(nèi)頁頂部通欄，尺寸760x60
7.內(nèi)頁左上，尺寸150x60或300x300
8.下載地址頁面，尺寸560x60或468x60
9.內(nèi)頁底部通欄，尺寸760x60
10.左漂浮，尺寸80x80或100x100
11.右漂浮，尺寸80x80或100x100
以上幾種說法可能有點(diǎn)小的出入，大家可以探討一下。
IAB和EIAA發(fā)布新的網(wǎng)絡(luò)廣告尺寸標(biāo)準(zhǔn)
在這6種格式中，除了去年iab發(fā)布的4種“通用廣告包”中的格式：160×600, 300×250, 180×150及728×90，還包括新公布的468×60 和120×600(擎天柱)2種。
拓展閱讀：網(wǎng)頁設(shè)計(jì)防止頁面被撐開的方法
一、直接在網(wǎng)頁里設(shè)置圖片大小，比如代碼：img src="/uploads/allimg/200907/20090701160532188.jpg" width="600" height="500" border="0"，這樣雖然可以限制了圖片大小，但是需要在上傳圖片之前手動(dòng)修改圖片大小，否則上傳的圖片就會(huì)變形。
二、使用如下代碼：img src="/uploads/allimg/200907/20090701160532188.jpg" onload="javascript:if(this.width600}{this.resized=true;this.style.width=600;}"
這種方法會(huì)在調(diào)用圖片的時(shí)候，自動(dòng)按比例縮小到指定的寬度，不會(huì)引起圖片的變形，并且也不會(huì)撐破表格，但是缺點(diǎn)是，如果圖片太大，在圖片下載過程中，也就是圖片顯示過程中，會(huì)先以圖片原大小顯示，這時(shí)就會(huì)撐破表格，頁面很難看，二當(dāng)圖片完全顯示后，圖片又會(huì)自動(dòng)縮小。
三、我們可以針對(duì)表格的屬性來限制大小防止被撐開，比如在table width="600" border="0" cellpadding="0" cellspacing="0"里添加代碼“”，其中“table-layout:fixed; ”是為了將表格布局固定住，就可以有效地防止表格被撐開，“word-wrap:break-word; ”是控制換行的，也就是強(qiáng)制執(zhí)行換行，這個(gè)在文本內(nèi)容較多的情況下需要使用到，特別是重復(fù)的內(nèi)容出現(xiàn)，不執(zhí)行換行的話，表格就被撐開了；而“word-break: break-all; ”可以解決IE的框架被英文（非亞洲語言文本行）撐開的問題，但是不會(huì)強(qiáng)制換行，只顯示表格寬度里的內(nèi)容。一般情況下只要用到“”就可以。當(dāng)然，上面調(diào)用的語句可以定義在css里。
【網(wǎng)頁設(shè)計(jì)中的頁面尺寸標(biāo)準(zhǔn)參考】相關(guān)文章：
網(wǎng)頁設(shè)計(jì)中頁面尺寸標(biāo)準(zhǔn)06-17
網(wǎng)頁設(shè)計(jì)中的頁面尺寸標(biāo)準(zhǔn)08-06
網(wǎng)頁設(shè)計(jì)的頁面尺寸標(biāo)準(zhǔn)09-15
網(wǎng)頁設(shè)計(jì)頁面尺寸的標(biāo)準(zhǔn)大小07-08
網(wǎng)頁設(shè)計(jì)的標(biāo)準(zhǔn)尺寸09-18
網(wǎng)頁設(shè)計(jì)標(biāo)準(zhǔn)的尺寸08-23
網(wǎng)頁設(shè)計(jì)頁面尺寸一般多大10-22