網頁設計中的頁面尺寸標準參考

時間：2025-12-09 21:02:34 啟宏網頁設計

網頁設計中的頁面尺寸標準參考

　　網頁設計中的頁面尺寸會根據不同的功能有不同的標準，下面是小編整理的網頁頁面的尺寸標準介紹吧，歡迎閱讀！

　　對于固定寬度的網站布局，設計師常用的分辨率有：760px、780px、920px、950px等，如今大尺寸、寬屏幕的顯示器越來越多，越來越普及，有些設計師也開始采用1000px、1003px這樣的分辨率。

　　頁面最大化、滿屏化的網站看著的確是舒服，但過高的分辨率在設計師顯示器上合適，并不代表在瀏覽者的顯示器上也合適。現在用的最多的分辨率還是1024x768，在這種分辨率下，含滾動條的頁面最大寬度應不超過994px，所以一般頁面寬度定位在990px以內比較適宜。

　　這一講主要來說說網頁設計的標準尺寸

　　一、在800x600分辨率下，頁面寬度應在778px以內，這樣不會出現橫向滾動條，高度可以依據版面和內容而定。

　　二、在1024x768分辨率下，頁面寬度應在1003px以內，如果僅一屏顯示的頁面，高度在612px～615px之間，這樣橫向和縱向滾動條都不會出現。

　　三、在photoshop中做800x600分辨率下僅一屏的網頁時，尺寸可以設為740x560左右。

　　頁面標準按800x600分辨率制作，尺寸為778pxx434px

　　頁面長度一般不要超過三屏，寬度不宜出現橫向滾動條為宜

　　每個標準頁面為A4幅面大小，即8.5x11英寸

　　全尺寸banner為468pxx60px，半尺寸banner為234pxx60px，小banner為88pxx31px

　　小圖標的標準尺寸還有120pxx90px、120pxx60px等

　　每個非首頁靜態頁面含圖片字節不超過60K，全尺寸banner不宜超過14k

　　標準網頁廣告尺寸規格

　　1、120x120，這種廣告規格適用于產品或新聞照片展示。

　　2、120x60，這種廣告規格主要用于做LOGO使用。

　　3、120x90，主要應用于產品演示或大型LOGO。

　　4、125x125，這種規格適于表現照片效果的圖像廣告。

　　5、234x60，這種規格適用于框架或左右形式主頁的廣告鏈接。

　　6、392x72，主要用于有較多圖片展示的廣告條，用于頁眉或頁腳。

　　7、468x60，應用最為廣泛的廣告條尺寸，用于頁眉或頁腳。

　　8、88x31，主要用于網頁鏈接，或網站小型LOGO。

　　廣告形式像素大小最大尺寸備注

　　BUTTON 120x60(必須用gif) 7K

　　215x50(必須用gif) 7K

　　通欄 760x100 25K 靜態圖片或減少運動效果

　　430x50 15K

　　超級通欄 760x100 to 760x200 共40K 靜態圖片或減少運動效果

　　巨幅廣告 336x280 35K

　　585x120

　　豎邊廣告 130x300 25K

　　全屏廣告 800x600 40K 必須為靜態圖片，FLASH格式

　　圖文混排各頻道不同 15K

　　彈出窗口 400x300(盡量用gif) 40K

　　BANNER 468x60(盡量用gif) 18K

　　懸停按鈕 80x80(必須用gif) 7K

　　流媒體 300x200

　　(可做不規則形狀但尺寸不能超過300x200) 30K 播放時間小于5秒60幀(1秒/12幀)

　　網頁中的廣告尺寸

　　1.首頁右上，尺寸120x60

　　2.首頁頂部通欄，尺寸468x60

　　3.首頁頂部通欄，尺寸760x60

　　4.首頁中部通欄，尺寸580x60

　　5.內頁頂部通欄，尺寸468x60

　　6.內頁頂部通欄，尺寸760x60

　　7.內頁左上，尺寸150x60或300x300

　　8.下載地址頁面，尺寸560x60或468x60

　　9.內頁底部通欄，尺寸760x60

　　10.左漂浮，尺寸80x80或100x100

　　11.右漂浮，尺寸80x80或100x100

　　以上幾種說法可能有點小的出入，大家可以探討一下。

　　IAB和EIAA發布新的網絡廣告尺寸標準

　　在這6種格式中，除了去年iab發布的4種“通用廣告包”中的格式：160×600, 300×250, 180×150及728×90，還包括新公布的468×60 和120×600(擎天柱)2種。

　　拓展閱讀：網頁設計防止頁面被撐開的方法

　　一、直接在網頁里設置圖片大小，比如代碼：img src="/uploads/allimg/200907/20090701160532188.jpg" width="600" height="500" border="0"，這樣雖然可以限制了圖片大小，但是需要在上傳圖片之前手動修改圖片大小，否則上傳的圖片就會變形。

　　二、使用如下代碼：img src="/uploads/allimg/200907/20090701160532188.jpg" onload="javascript:if(this.width600}{this.resized=true;this.style.width=600;}"

　　這種方法會在調用圖片的時候，自動按比例縮小到指定的寬度，不會引起圖片的變形，并且也不會撐破表格，但是缺點是，如果圖片太大，在圖片下載過程中，也就是圖片顯示過程中，會先以圖片原大小顯示，這時就會撐破表格，頁面很難看，二當圖片完全顯示后，圖片又會自動縮小。

　　三、我們可以針對表格的屬性來限制大小防止被撐開，比如在table width="600" border="0" cellpadding="0" cellspacing="0"里添加代碼“”，其中“table-layout:fixed; ”是為了將表格布局固定住，就可以有效地防止表格被撐開，“word-wrap:break-word; ”是控制換行的，也就是強制執行換行，這個在文本內容較多的情況下需要使用到，特別是重復的內容出現，不執行換行的話，表格就被撐開了；而“word-break: break-all; ”可以解決IE的框架被英文（非亞洲語言文本行）撐開的問題，但是不會強制換行，只顯示表格寬度里的內容。一般情況下只要用到“”就可以。當然，上面調用的語句可以定義在css里。

【網頁設計中的頁面尺寸標準參考】相關文章：