- 相關(guān)推薦
網(wǎng)頁(yè)設(shè)計(jì)中的頁(yè)面尺寸標(biāo)準(zhǔn)參考
網(wǎng)頁(yè)設(shè)計(jì)中的頁(yè)面尺寸會(huì)根據(jù)不同的功能有不同的標(biāo)準(zhǔn)，下面是小編整理的網(wǎng)頁(yè)頁(yè)面的尺寸標(biāo)準(zhǔn)介紹吧，歡迎閱讀！
對(duì)于固定寬度的網(wǎng)站布局，設(shè)計(jì)師常用的分辨率有：760px、780px、920px、950px等，如今大尺寸、寬屏幕的顯示器越來(lái)越多，越來(lái)越普及，有些設(shè)計(jì)師也開(kāi)始采用1000px、1003px這樣的分辨率。
頁(yè)面最大化、滿(mǎn)屏化的網(wǎng)站看著的確是舒服，但過(guò)高的分辨率在設(shè)計(jì)師顯示器上合適，并不代表在瀏覽者的顯示器上也合適。現(xiàn)在用的最多的分辨率還是1024x768，在這種分辨率下，含滾動(dòng)條的頁(yè)面最大寬度應(yīng)不超過(guò)994px，所以一般頁(yè)面寬度定位在990px以?xún)?nèi)比較適宜。
這一講主要來(lái)說(shuō)說(shuō)網(wǎng)頁(yè)設(shè)計(jì)的標(biāo)準(zhǔn)尺寸
一、在800x600分辨率下，頁(yè)面寬度應(yīng)在778px以?xún)?nèi)，這樣不會(huì)出現(xiàn)橫向滾動(dòng)條，高度可以依據(jù)版面和內(nèi)容而定。
二、在1024x768分辨率下，頁(yè)面寬度應(yīng)在1003px以?xún)?nèi)，如果僅一屏顯示的頁(yè)面，高度在612px～615px之間，這樣橫向和縱向滾動(dòng)條都不會(huì)出現(xiàn)。
三、在photoshop中做800x600分辨率下僅一屏的網(wǎng)頁(yè)時(shí)，尺寸可以設(shè)為740x560左右。
頁(yè)面標(biāo)準(zhǔn)按800x600分辨率制作，尺寸為778pxx434px
頁(yè)面長(zhǎng)度一般不要超過(guò)三屏，寬度不宜出現(xiàn)橫向滾動(dòng)條為宜
每個(gè)標(biāo)準(zhǔn)頁(yè)面為A4幅面大小，即8.5x11英寸
全尺寸banner為468pxx60px，半尺寸banner為234pxx60px，小banner為88pxx31px
小圖標(biāo)的標(biāo)準(zhǔn)尺寸還有120pxx90px、120pxx60px等
每個(gè)非首頁(yè)靜態(tài)頁(yè)面含圖片字節(jié)不超過(guò)60K，全尺寸banner不宜超過(guò)14k
標(biāo)準(zhǔn)網(wǎng)頁(yè)廣告尺寸規(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ī)格適用于框架或左右形式主頁(yè)的廣告鏈接。
6、392x72，主要用于有較多圖片展示的廣告條，用于頁(yè)眉或頁(yè)腳。
7、468x60，應(yīng)用最為廣泛的廣告條尺寸，用于頁(yè)眉或頁(yè)腳。
8、88x31，主要用于網(wǎng)頁(yè)鏈接，或網(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ī)則形狀但尺寸不能超過(guò)300x200) 30K 播放時(shí)間小于5秒60幀(1秒/12幀)
網(wǎng)頁(yè)中的廣告尺寸
1.首頁(yè)右上，尺寸120x60
2.首頁(yè)頂部通欄，尺寸468x60
3.首頁(yè)頂部通欄，尺寸760x60
4.首頁(yè)中部通欄，尺寸580x60
5.內(nèi)頁(yè)頂部通欄，尺寸468x60
6.內(nèi)頁(yè)頂部通欄，尺寸760x60
7.內(nèi)頁(yè)左上，尺寸150x60或300x300
8.下載地址頁(yè)面，尺寸560x60或468x60
9.內(nèi)頁(yè)底部通欄，尺寸760x60
10.左漂浮，尺寸80x80或100x100
11.右漂浮，尺寸80x80或100x100
以上幾種說(shuō)法可能有點(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)頁(yè)設(shè)計(jì)防止頁(yè)面被撐開(kāi)的方法
一、直接在網(wǎng)頁(yè)里設(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)是，如果圖片太大，在圖片下載過(guò)程中，也就是圖片顯示過(guò)程中，會(huì)先以圖片原大小顯示，這時(shí)就會(huì)撐破表格，頁(yè)面很難看，二當(dāng)圖片完全顯示后，圖片又會(huì)自動(dòng)縮小。
三、我們可以針對(duì)表格的屬性來(lái)限制大小防止被撐開(kāi)，比如在table width="600" border="0" cellpadding="0" cellspacing="0"里添加代碼“”，其中“table-layout:fixed; ”是為了將表格布局固定住，就可以有效地防止表格被撐開(kāi)，“word-wrap:break-word; ”是控制換行的，也就是強(qiáng)制執(zhí)行換行，這個(gè)在文本內(nèi)容較多的情況下需要使用到，特別是重復(fù)的內(nèi)容出現(xiàn)，不執(zhí)行換行的話(huà)，表格就被撐開(kāi)了；而“word-break: break-all; ”可以解決IE的框架被英文（非亞洲語(yǔ)言文本行）撐開(kāi)的問(wèn)題，但是不會(huì)強(qiáng)制換行，只顯示表格寬度里的內(nèi)容。一般情況下只要用到“”就可以。當(dāng)然，上面調(diào)用的語(yǔ)句可以定義在css里。
【網(wǎng)頁(yè)設(shè)計(jì)中的頁(yè)面尺寸標(biāo)準(zhǔn)參考】相關(guān)文章：
網(wǎng)頁(yè)設(shè)計(jì)中頁(yè)面尺寸標(biāo)準(zhǔn)06-17
網(wǎng)頁(yè)設(shè)計(jì)中的頁(yè)面尺寸標(biāo)準(zhǔn)08-06
網(wǎng)頁(yè)設(shè)計(jì)的頁(yè)面尺寸標(biāo)準(zhǔn)09-15
網(wǎng)頁(yè)設(shè)計(jì)頁(yè)面尺寸的標(biāo)準(zhǔn)大小07-08
網(wǎng)頁(yè)設(shè)計(jì)的標(biāo)準(zhǔn)尺寸09-18
網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)的尺寸08-23
網(wǎng)頁(yè)設(shè)計(jì)頁(yè)面尺寸一般多大10-22