導航:首頁 > 萬維百科 > 網頁設計頁面比例

網頁設計頁面比例

發布時間:2020-11-20 02:07:19

1、網頁設計頁中面大小和字體大小的比例問題

不太懂「你的面」是啥顏色,我的理解是酒,也就是PS中的畫布大小,也是網頁中顯示的大小?
1. 頁面的大小一般是根據顯示器的像素來設置的,一般是1366*768,但是如果你從事網頁設計的話,你最好還是要考慮到各個瀏覽器的兼容性,這裡面就有些復雜了;
2.而字體的話,樓上的那哥們也說了,一般是14px,但是看情況而定。

希望能幫助到你

2、做響應式網頁,如何讓一個div的高和寬保持比例放大或是縮小?

響應式來做,可以根據媒體查詢,設定在不同屏幕寬度下div的高度和寬度,具體的設置看你響應式想怎麼顯示:

@media only screen and (min-width: 100px) and (maxwidth:640px{div{width:100px;height: 100px;}}@media only screen and (min-width: 641px) and (max-width: 789px) {div{width: 200px;height: 200px;}}

3、一般做網頁設計背景尺寸定多大?

網頁的背景多大要看對網頁的要求的,
網頁設計標准尺寸:
1、800*600下,網頁寬度保持在778以內,就不會出現水平滾動條,高度則視版面和內容決定。
2、1024*768下,網頁寬度保持在1002以內,如果滿框顯示的話,高度是612-615之間.就不會出現水平滾動條和垂直滾動條。
3、在ps裡面做網頁可以在800*600狀態下顯示全屏,頁面的下方又不會出現滑動條,尺寸為740*560左右
4、在PS里做的圖到了網上就不一樣了,顏色等等方面,因為WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很寬顏色范圍很廣,所以自然會有失色的現象.
頁面標准按800*600解析度製作,實際尺寸為778*434px
頁面長度原則上不超過3屏,寬度不超過1屏
每個標准頁面為A4幅面大小,即8.5X11英寸
全尺寸banner為468*60px,半尺寸banner為234*60px,小banner為88*31px
另外120*90,120*60也是小圖標的標准尺寸
每個非首頁靜態頁面含圖片位元組不超過60K,全尺寸banner不超過14K

4、網頁設計比例

網站設計分類寬屏和窄屏,寬屏是1024PX,但設計只能設計為1000PX,不然超寬了,窄屏設計是760PX。banner的尺寸760X70;1000X70PX

5、如何讓網頁自適應所有屏幕寬度

「自適應網頁設計」到底是怎麼做到的?其實並不難。

1.首先,在網頁代碼的頭部,加入一行viewport元標簽。
viewport是網頁默認的寬度和高度,上面這行代碼的意思是,網頁寬度默認等於屏幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0
,即網頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個設置,包括IE9。對於那些老式瀏覽器(主要是IE6、7、8),需要使用css3-mediaqueries.js。

2、不使用絕對寬度由於網頁會根據屏幕寬度調整布局,所以不能使用絕對寬度的布局,也不能使用具有絕對寬度的元素。這一條非常重要。具體說,CSS代碼
不能指定像素寬度:width:xxx px;
只能指定百分比寬度:
width: xx%;
或者
width:auto;
3、相對大小的字體
字體也不能使用絕對大小(px),而只能使用相對大小(em)。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代碼指定,字體大小是頁面默認大小的100%,即16像素。
h1 {
font-size: 1.5em;
}
然後,h1的大小是默認大小的1.5倍,即24像素(24/16=1.5)。
small {
font-size: 0.875em;
}
small元素的大小是默認大小的0.875倍,即14像素(14/16=0.875)。
三、流動布局(fluid grid)
「流動布局」的含義是,各個區塊的位置都是浮動的,不是固定不變的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好處是,如果寬度太小,放不下兩個元素,後面的元素會自動滾動到前面元素的下方,不會在水平方向overflow(溢出),避免了水平滾動條的出現。
另外,絕對定位(position: absolute)的使用,也要非常小心。
四、選擇載入CSS
「自適應網頁設計」的核心,就是CSS3引入的Media Query模塊。
它的意思就是,自動探測屏幕寬度,然後載入相應的CSS文件。

上面的代碼意思是,如果屏幕寬度小於400像素(max-device-width: 400px),就載入tinyScreen.css文件。

如果屏幕寬度在400像素到600像素之間,則載入smallScreen.css文件。
除了用html標簽載入CSS文件,還可以在現有CSS文件中載入。
五、CSS的@media規則
同一個CSS文件中,也可以根據不同的屏幕解析度,選擇應用不同的CSS規則。
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
上面的代碼意思是,如果屏幕寬度小於400像素,則column塊取消浮動(float:none)、寬度自動調節(width:auto),sidebar塊不顯示(display:none)。
六、圖片的自適應(fluid image)
除了布局和文本,」自適應網頁設計」還必須實現圖片的自動縮放。
這只要一行CSS代碼:
img { max-width: 100%;}
這行代碼對於大多數嵌入網頁的視頻也有效,所以可以寫成:
img, object { max-width: 100%;}
老版本的IE不支持max-width,所以只好寫成:
img { width: 100%; }
此外,windows平台縮放圖片時,可能出現圖像失真現象。這時,可以嘗試使用IE的專有命令:
img { -ms-interpolation-mode: bicubic; }
或者,Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementById(「content」).getElementsByTagName(「img」);
imgSizer.collate(imgs);
});

6、網頁設計中banner設計尺寸是多少

不同的環境下設置的尺寸都不一樣

1、800*600下,網頁寬度保持在778以內,就不會出現水平滾動條,高度則視版面和內容決定。

2、1024*768下,網頁寬度保持在1002以內,就不會出現水平滾動條,高度則視版面和內決定。

3、在ps裡面做網頁可以在800*600狀態下顯示全屏,頁面的下方又不會出現滑動條,尺寸為740*560左右。

4、1024*768 下網頁的尺寸:width=955,height=600                                             

800*600 下網頁的尺寸:width=760,height=420。

5、一般解析度在800*600的情況下,頁面的顯示尺寸為:780*428px,

解析度在640*480的情況下,頁面的顯示尺寸為:620*311px,

解析度在1024*768的情況下,頁面的顯示尺寸為:1007*600px。


(6)網頁設計頁面比例擴展資料:

banner設計標准尺寸大全

Internet Advertising Bureau
(IAB,國際廣告局)的"標准和管理委員會"聯合Coalition for Advertising Supported Informatiln
and
Entertainment(CASIE,廣告支持信息和娛樂聯合會)聯合推出了一系列網路廣告宣傳物的標准尺寸。

這些尺寸作為建議,提供給廣告生產省和消費者,使大家都能接受。現在網站上的廣告幾乎都遵循IAC/CASIE標准。

1997年第一次標准公布

Num Size(pix) Name

1、468×60 全尺寸banner

2、392×72 全尺寸帶導航條banner

3、234×60 半尺寸banner

4、125×125 方形按鈕

5、120×90 按鈕#1或小圖標

6、120×60 按鈕#2或小圖標

7、88×31 小按鈕或banner

8、120×240 垂直banner

2001年第二次標准公布

Num Size(pix) Name

1、120×600 "摩天大樓"形

2、160×600 寬"摩天大樓"形

3、180×150 長方形

4、300×250 中級長方形

6、240×400 豎長方形

7、250×250 "正方形彈出式"廣告

IAB 將不再支持1997年第一次公布標准中的392×72形。

從banner自身的設計大小看

1、全尺寸banner橫幅設計為468*60px,半尺寸banner為234*60px,小banner為88*31px,另外120*90,120*60也是小圖標的標准尺寸。

2、頁面長度原則上不超過3屏,寬度不超過1屏。

3、每個非首頁靜態頁面含圖片位元組不超過60K,全尺寸banner不超過14K。

4、每個標准頁面為A4幅面大小,即8.5*11英寸。


參考資料來源:網路-網頁設計標准

7、網頁設計中 主色 輔助色 強調色各佔多少比例?

網頁設計中主色輔助色強調色哥占的比例應該是1:2:三。

8、網頁設計合適的頁面尺寸是多少

網頁設計選用的解析度是72像素,使用的畫布尺寸1920px*1080px。但是並不意味著在整個畫布上進行設計,一般採用全屏展示和兩側留白的方式。
全屏展示,是整個網站看起來大氣一些,但是布局要合理安排,不然看起來有些傻大的感覺。
兩側留白是為了適配不同電腦屏幕的尺寸,能夠確保網站只是電腦站的時候一些筆記本電腦也能顯示全面網站的內容區域,內容限時區域在好控制在1000px-1200px。

9、DW製作網頁如何讓網頁按屏幕比例縮放

使用table標簽來做,使用百分比設置寬度為100%,或者使用js獲取屏幕尺寸的方法都是可行的,不過現在一般很少這樣做了,按屏幕縮放做出來不是很好看,現在各終端尺寸都不一樣

與網頁設計頁面比例相關的知識