- 網(wǎng)頁設(shè)計中的頁面尺寸標(biāo)準(zhǔn)參考 推薦度:
- 相關(guān)推薦
網(wǎng)頁設(shè)計中頁面尺寸標(biāo)準(zhǔn)
在剛開始進行美工設(shè)計的人,對網(wǎng)頁設(shè)計頁面尺寸一般多大,可能會有疑問。下面是小編為大家整理的網(wǎng)頁設(shè)計中頁面尺寸標(biāo)準(zhǔn),歡迎參考~
對于固定寬度的網(wǎng)站布局,設(shè)計師常用的分辨率有:760px、780px、920px、950px等,如今大尺寸、寬屏幕的顯示器越來越多,越來越普及,有些設(shè)計師也開始采用1000px、1003px這樣的分辨率。
頁面最大化、滿屏化的網(wǎng)站看著的確是舒服,但過高的分辨率在設(shè)計師顯示器上合適,并不代表在瀏覽者的顯示器上也合適,F(xiàn)在用的最多的分辨率還是1024×768,在這種分辨率下,含滾動條的頁面最大寬度應(yīng)不超過994px,所以一般頁面寬度定位在990px以內(nèi)比較適宜。
這一講主要來說說網(wǎng)頁設(shè)計的標(biāo)準(zhǔn)尺寸
一、在800×600分辨率下,頁面寬度應(yīng)在778px以內(nèi),這樣不會出現(xiàn)橫向滾動條,高度可以依據(jù)版面和內(nèi)容而定。
二、在1024×768分辨率下,頁面寬度應(yīng)在1003px以內(nèi),如果僅一屏顯示的頁面,高度在612px~615px之間,這樣橫向和縱向滾動條都不會出現(xiàn)。
三、在photoshop中做800×600分辨率下僅一屏的網(wǎng)頁時,尺寸可以設(shè)為740×560左右。
頁面標(biāo)準(zhǔn)按800×600分辨率制作,尺寸為778px×434px
頁面長度一般不要超過三屏,寬度不宜出現(xiàn)橫向滾動條為宜
每個標(biāo)準(zhǔn)頁面為A4幅面大小,即8.5×11英寸
全尺寸banner為468px×60px,半尺寸banner為234px×60px,小banner為88px×31px
小圖標(biāo)的標(biāo)準(zhǔn)尺寸還有120px×90px、120px×60px等
每個非首頁靜態(tài)頁面含圖片字節(jié)不超過60K,全尺寸banner不宜超過14k
標(biāo)準(zhǔn)網(wǎng)頁廣告尺寸規(guī)格
1、120×120,這種廣告規(guī)格適用于產(chǎn)品或新聞?wù)掌故尽?/p>
2、120×60,這種廣告規(guī)格主要用于做LOGO使用。
3、120×90,主要應(yīng)用于產(chǎn)品演示或大型LOGO。
4、125×125,這種規(guī)格適于表現(xiàn)照片效果的圖像廣告。
5、234×60,這種規(guī)格適用于框架或左右形式主頁的廣告鏈接。
6、392×72,主要用于有較多圖片展示的廣告條,用于頁眉或頁腳。
7、468×60,應(yīng)用最為廣泛的廣告條尺寸,用于頁眉或頁腳。
8、88×31,主要用于網(wǎng)頁鏈接,或網(wǎng)站小型LOGO。
廣告形式 像素大小 最大尺寸 備注
BUTTON 120×60(必須用gif) 7K
215×50(必須用gif) 7K
通欄 760×100 25K 靜態(tài)圖片或減少運動效果
430×50 15K
超級通欄 760×100 to 760×200 共40K 靜態(tài)圖片或減少運動效果
巨幅廣告 336×280 35K
585×120
豎邊廣告 130×300 25K
全屏廣告 800×600 40K 必須為靜態(tài)圖片,F(xiàn)LASH格式
圖文混排 各頻道不同 15K
彈出窗口 400×300(盡量用gif) 40K
BANNER 468×60(盡量用gif) 18K
懸停按鈕 80×80(必須用gif) 7K
流媒體 300×200
。ǹ勺霾灰(guī)則形狀但尺寸不能超過300×200) 30K 播放時間小于5秒60幀(1秒/12幀)
網(wǎng)頁中的廣告尺寸
1.首頁右上,尺寸120×60
2.首頁頂部通欄,尺寸468×60
3.首頁頂部通欄,尺寸760×60
4.首頁中部通欄,尺寸580×60
5.內(nèi)頁頂部通欄,尺寸468×60
6.內(nèi)頁頂部通欄,尺寸760×60
7.內(nèi)頁左上,尺寸150×60或300×300
8.下載地址頁面,尺寸560×60或468×60
9.內(nèi)頁底部通欄,尺寸760×60
10.左漂浮,尺寸80×80或100×100
11.右漂浮,尺寸80×80或100×100
以上幾種說法可能有點小的出入,大家可以探討一下。
拓展閱讀:網(wǎng)頁設(shè)計防止頁面被撐開的方法
一、直接在網(wǎng)頁里設(shè)置圖片大小,比如代碼: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;}"
這種方法會在調(diào)用圖片的時候,自動按比例縮小到指定的寬度,不會引起圖片的變形,并且也不會撐破表格,但是缺點是,如果圖片太大,在圖片下載過程中,也就是圖片顯示過程中,會先以圖片原大小顯示,這時就會撐破表格,頁面很難看,二當(dāng)圖片完全顯示后,圖片又會自動縮小。
三、我們可以針對表格的屬性來限制大小防止被撐開,比如在table width="600" border="0" cellpadding="0" cellspacing="0"里添加代碼“”,其中“table-layout:fixed; ”是為了將表格布局固定住,就可以有效地防止表格被撐開,“word-wrap:break-word; ”是控制換行的,也就是強制執(zhí)行換行,這個在文本內(nèi)容較多的情況下需要使用到,特別是重復(fù)的內(nèi)容出現(xiàn),不執(zhí)行換行的話,表格就被撐開了;而“word-break: break-all; ”可以解決IE的框架被英文(非亞洲語言文本行)撐開的問題,但是不會強制換行,只顯示表格寬度里的內(nèi)容。一般情況下只要用到“”就可以。當(dāng)然,上面調(diào)用的語句可以定義在css里,比如
table {
table-layout: fixed;
word-wrap:break-word;
}
四、用css控制圖片自適應(yīng)大小,代碼如:
img {
max-width: 600px;
width:expression(this.width 600 ? "600px" : this.width);
overflow:hidden;
}
其中 max-width:600px; 在IE7、FireFox等其他非IE瀏覽器下最大寬度為600px,但在IE6中無效;width:600px; 在所有瀏覽器中圖片的大小為600px,當(dāng)圖片大小大于600px,自動縮小為600px,在IE6中有效;而 overflow:hidden; 指將超出設(shè)置大小的部分隱藏,避免控制圖片大小失敗而引起的表格撐開變形。
五、最后總結(jié)一下最實用的代碼:
如果是表格,請用:
table {
table-layout: fixed;
word-break: break-all;
}
如果是div層,請用:
div {
table-layout: fixed;
word-wrap: break-word;
width: 加上寬度;
overflow: hidden; (讓多出來的不顯示。)
}
【網(wǎng)頁設(shè)計中頁面尺寸標(biāo)準(zhǔn)】相關(guān)文章:
網(wǎng)頁設(shè)計中的頁面尺寸標(biāo)準(zhǔn)參考10-19
網(wǎng)頁設(shè)計標(biāo)準(zhǔn)的尺寸08-23
網(wǎng)頁設(shè)計的標(biāo)準(zhǔn)尺寸是多少06-24
網(wǎng)頁設(shè)計中的字體設(shè)計07-26
網(wǎng)頁設(shè)計的標(biāo)準(zhǔn)和規(guī)范06-27
網(wǎng)頁設(shè)計前端頁面規(guī)范要求和注意事項06-16