HTML網頁設計自動適應屏幕寬度_如何讓網頁自適應所有屏幕寬度

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

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

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);
});

2、網頁設計：怎麼讓frame的高度自適應？？

可以用jQuery控制

// 獲取窗口的高度回
var win_h = $(window).height();
$(".xx").height(win_h);

// 窗口變化事改變高度
$(window).resize(function(event) {
答// 獲取窗口的高度
var win_h = $(window).height();

$(".xx").height(win_h);
}

3、自適應網頁設計怎麼製作?

隨著越來越多的人使用手機上網，使自適應網頁設計技術變得越來越流行。自適應網頁設計指能使網頁自適應顯示在不同大小終端設備上新網頁設計方式及技術。當然，對一個新手來說可能聽起來有點復雜，其實它比你想像的簡單多了（前提你有css基礎）。
1、在HTML頭部增加viewport標簽。
在網站HTML文件的開頭，增加viewport meta標簽告訴瀏覽器視口寬度等於設備屏幕寬度，且不進行初始縮放。代碼如下：
<meta name="viewport" content="width=device-width, initial-scale=1" />
這段代碼支持Chrome、Firefox、IE9以上的瀏覽器，但不支持IE8以及低於IE8的瀏覽器。
IE8及其更低版本不支持media query，可以使用 media-queries.js或 respond.js腳本實現支持。

2、在CSS文件尾部增加針對不同屏幕解析度的規則。
例如使用如下的代碼，可以讓屏幕寬度低於480像素的設備（如iPhone等），網頁側欄隱藏中部內容欄寬度自動調節。以下代碼針對Z-Blog，WordPress相關標簽名稱只需修改一下即可。
@media screen and (max-device-width: 480px) {
#divMain{
float:none;
width:auto;
}
#divSidebar {
display:none;
}
}
3、布局寬度使用相對寬度。
網頁總體框架可以使用絕對寬度，但往下的內容框架、側欄等最好使用相對寬度，這樣針對不同解析度進行修改就方便。當然也可以不用相對寬度，那就需要在 @media screen and (max-device-width: 480px) 裡面增加各個div的針對小屏幕的寬度，實際上更麻煩。
4、頁面使用相對字體（非必要）
在HTML頁面上不要使用絕對字體（px），而要使用相對字體（em），對於大多數瀏覽器來說，通常用 em = px/16 換算，例如16px就等於1em。
5、圖片自適應（非必要）
img標簽的話，只需要設置 max-width:100%;或width:100%;語句為：img { max-width:98%;}
css載入的background-image如何自適應大小呢，其實CSS3中是可以實現的，添加如下語句：background-size:100% 100%;

4、如何製作自適應網頁

隨著越來越多的人使用手機上網，使自適應網頁設計技術變得越來越流行。自適應網頁設計指能使網頁自適應顯示在不同大小終端設備上新網頁設計方式及技術。當然，對一個新手來說可能聽起來有點復雜，其實它比你想像的簡單多了（前提你有css基礎）。
1、在HTML頭部增加viewport標簽。
在網站HTML文件的開頭，增加viewport meta標簽告訴瀏覽器視口寬度等於設備屏幕寬度，且不進行初始縮放。代碼如下：
<meta name="viewport" content="width=device-width, initial-scale=1" />
這段代碼支持Chrome、Firefox、IE9以上的瀏覽器，但不支持IE8以及低於IE8的瀏覽器。
IE8及其更低版本不支持media query，可以使用 media-queries.js或 respond.js腳本實現支持。

2、在CSS文件尾部增加針對不同屏幕解析度的規則。
例如使用如下的代碼，可以讓屏幕寬度低於480像素的設備（如iPhone等），網頁側欄隱藏中部內容欄寬度自動調節。以下代碼針對Z-Blog，WordPress相關標簽名稱只需修改一下即可。
@media screen and (max-device-width: 480px) {
#divMain{
float:none;
width:auto;
}
#divSidebar {
display:none;
}
}
3、布局寬度使用相對寬度。
網
頁總體框架可以使用絕對寬度，但往下的內容框架、側欄等最好使用相對寬度，這樣針對不同解析度進行修改就方便。當然也可以不用相對寬度，那就需要在
@media screen and (max-device-width: 480px) 裡面增加各個div的針對小屏幕的寬度，實際上更麻煩。
4、頁面使用相對字體（非必要）
在HTML頁面上不要使用絕對字體（px），而要使用相對字體（em），對於大多數瀏覽器來說，通常用 em = px/16 換算，例如16px就等於1em。
5、圖片自適應（非必要）
img標簽的話，只需要設置 max-width:100%;或width:100%;語句為：img { max-width:98%;}
css載入的background-image如何自適應大小呢，其實CSS3中是可以實現的，添加如下語句：background-size:100% 100%;

5、DIV+CSS設計網頁布局時，如何將菜單導航部分背景自適應屏幕寬度，而讓導航內容居中？

這是由兩個div來實現的，首先建立一個外層div並設置寬高，要使寬度隨屏幕寬度變化(即瀏覽器寬度變化)，那麼寬度就得設置100%，高度設置為你需要的高度即可，具體屬性為 width:100%;height:你自己的高度;background:你需要的顏色; 這樣就讓該div隨屏幕(瀏覽器)寬度變化而變化了。然後在這個div裡面再嵌套一個div給定一個寬高屬性，就是你導航的寬高，要使之居中，各人使用的方法也有所不同，但是常用的還是margin屬性，具體屬性如下 width:你導航的寬度;height:你導航的高度;margin:0 auto; 這樣就實現了，如果背景是圖片的話就更改background屬性即可，還有不明白的隨時Hi我。

6、怎麼製作html5網站頁面讓它適應電腦和手機的尺寸

媒體查詢語法：
@media screen and (max-width:960px){...}
@media screen and (max-width:768px){...}
@media screen and (max-width:320px){...}
<link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:800px),projection" href="800wide-portrait-screen.css" />
注意：1，媒體查詢之間使用逗號隔開；2，在projection之後，沒有and，也沒有任何特性/值的組合。沒有後續表達式，意味著只要是projection就滿足條件。
@media screen and (max-device-width:400px){......}
@import url("~~.css") screen and (max-width:360px);
（@import方法會增加http請求，影響載入速度。）
媒體查詢能檢測的特性（最長用過的是設備的視口寬度(width)和屏幕寬度(device-width)）：
widht：視口寬度
height：視口高度
device-width：渲染表面的寬度（設備屏幕的寬度）
device-height：渲染表面的高度（設備屏幕的高度）
orientation：檢查設備處於橫向還是縱向。
aspect-ratio：基於視口寬度和高度的寬高比。(16:9的顯示屏可以定義為aspect-ratio:16/9)
device-aspect-ratio:和aspect-ratio類似，基於設備渲染平面寬度和高度的寬高比。
color：每種顏色的位數。例：min-color：16會檢測設備是否擁有16位顏色。
color-index：色板的顏色索引表中的顏色數。值必須是非負數。
monochrom：檢測單色幀緩沖區中每像素所使用的位數。值必須是非負整數。
resolution：用來檢測屏幕或列印機的解析度，如min-resolution：300dpi。還可以接受每厘米像素點數的度量值，如min-resolution：118dpcm。
scan：電視機的掃描方式，值可設為progressive（逐行掃描）或interlace（隔行掃描）。如720p p表示逐行掃描。
grid：用來檢測輸出設備是網格設備還是點陣圖設備。
在上述所有特性中，除scan和grid之外，都可以使用min和max前綴來創建一個查詢范圍。例如：
@import url("~~.css") screen and (min-width:200px) and (max-width:360px);這樣~~.css只會引入視口寬度介於200px至360px的顯示屏設備。
在樣式表的開頭位置設置樣式，以便適應所有涉及，然後使用媒體查詢來進一步重寫響應的部分。例如，先針對大視口設計(用戶大多數情況下使用滑鼠)，將導航鏈接設計成簡單的文字鏈接；然後再針對較小的視口，使用媒體查詢重寫這部分樣式，為拇指一族提供更大點擊區域。
使用多個獨立的文件會增加http請求數量，建議在已有的樣式表中追加媒體查詢樣式。（https://github.com/scottjehl/Respond）是為IE8及更低版本增加媒體查詢支持的最快的js工具。
阻止移動瀏覽器自動調整頁面大小：
在html的<head>中插入一個<meta>標簽。<meta>標簽中可以設置具體的寬度(如px)或者縮放比例(如2.0 設備實際尺寸的兩倍)。例如：<meta name="viewport" content="initial-scale=2.0,width=device-width">
<meta>標簽還可以控制頁面可縮放的范圍，下面的代碼允許用戶將頁面最多放大至設備寬度的3倍，最小壓縮至設備寬度的一半。<meta name="viewport" content="width=device-width,maximum-scale=3,minimum-scale=0.5">
還可以禁止用戶縮放，不過縮放是一個重要的輔助功能，所以很少禁用。<meta name="viewport" content="initial-scale=1.0,user-scalable=no"> user-scalable=no即禁止縮放。
w3c正嘗試使用@viewport聲明，不用在<head>中添加<meta>，不過要使用私有前綴，如@-o-viewport{width:320px}
針對不同視口寬度修正設計：
首先在css中為平板設備增加媒體查詢，數值ipad的視口寬度為768px（橫向1024px）
@media screen and (max-width:768px){
#wrapper{
widht:768px;
}
#header,#footer,#nav {
width:748px;
}
}
=============================這只是一部分筆記===========
推薦一本書響應式Web設計：HTML5和CSS3實戰.pdf

7、html頁面怎樣能夠自適應電腦屏幕寬度？

在1024*768或者800*600的解析度下可以自動調整成適用於該客戶端解析度的大小。
第一種方法：做一個網頁解決問題（長了點）
如果只是因為瀏覽者改變了瀏覽器的設置，或者因為瀏覽器不兼容，使自己精心製作的網頁變得"面目全非"，那多令人沮喪！下面我們以網頁愛好者的常用工具Dreamweaver（以下簡稱DW）為例，列出幾個網頁製作初學者較常見的網頁布局問題以及解決方法，希望對初學者們有所幫助。
一、消除任意縮放瀏覽器窗口對網頁的影響
一番辛苦做出來的網頁，在全屏狀態下瀏覽一切正常。但在改變瀏覽窗口大小之後，網頁就變得"不堪入目"了，這是個很值得注意的問題。
問題的根源還得從網頁的布局說起，在DW中，網頁內容的定位一般是通過表格來實現的，解決表格的問題也就成功了大半。
大家應該注意到，在DW中表格屬性面板的高寬設定選擇上提供了兩種不同類型：百分比和像素值。百分比的使用將會產生前面說到的那個毛病。這里所說的百分比是指表格的高或寬設置為上層標記所佔區域高或寬的百分比，如在一個表格單元的寬度是600，在它裡面嵌入了另外一個表格，表格寬度占表格單元的50%，則這個表格的寬度為300，依此類推，如果在一個表格不是嵌於另一個表格單元中，則其百分比是相對於當時窗口的寬度的。IE瀏覽器中，隨便改動主頁窗口的大小時，表格的內容也隨之錯位、變形，就是因為表格的百分比也要隨著窗口的大小而改變成相應的百分比寬度。
自然，解決這個問題的辦法就是將表格寬度設置成固定寬度（也就是像素值）。另外如果外層表格已做好固定寬度設置，內層表格也可以適當使用百分比設置。清楚這個原則以後，如果出現類似的問題大家也知道怎麼解決。
二、讓網頁居中
說到了窗口大小就會順著路子想到解析度的問題，在800×600解析度下製作的網頁在1024×768解析度的機器上打開，整個網頁就會跑到左邊；1024×768解析度的網頁在800×600解析度的機器上有時也會變得"不堪入目"。兩種解析度各做一個吧？做起來費時，看起來也費勁。怎麼辦呢？
現在大多數網民都還在用800*600的解析度，所以我們一般可以以此解析度為主，要想讓網頁在1024*768時居中，只要在網頁原代碼的<body>後緊加一句<center>，</body>前加一句</center>就OK了。不過有幾個問題這是要注意一下，第一個就是上面說到的百分比的問題，表格、單元格的寬度單位最好要使用像素單位，而不要用百分比。例如width=770。如果你的表格寬度設的是百分比，那麼使用大於800×600的像素時，網頁就會拉寬，這樣網頁可能會變形。在<body>中加入leftmargin=0，即<body leftmargin=0>這種情況下，800×600支持的表格寬度為780像素時不會出現滾動條。還有一點要注意的是不能用DW中的層來定位。

<html>
<head></head>
<body topmargin=0 leftmargin=0>
<center>
<table cellspacing cellpadding width=760><tr><td></td></tr></table>
</center>
</body>
</html>

　三、定義固定大小的文字
大家都知道,在IE瀏覽器的功能設置中，有一個可以自由設置窗口內容字體大小的功能，這樣由於不同訪問者的設置習慣不同，呈現在他們面前的網頁有時也會不不相同。比如你可能本來設計時用的是2號字體，結果由於用戶對瀏覽器的額外設定，變的更大了，這時你的網頁也可能變得"不堪入目"。雖然不是你的錯，但客戶是上帝。
如果使用了網頁中的CSS樣式表技術，就不會出現上述情況了。使用快捷鍵"Shift+F11"打開樣式表"CSS style"編輯器，在窗口中單擊滑鼠右鍵執行"New CSS style..."命令新建一個樣式表，然後在給出的列表中選擇"類型"選項，定義文字屬性參數（一般文字的大小選擇12px較為適宜）。完成後選擇網頁編輯窗中的文本，單擊新的樣式表名稱，可以看到選中的文本發生了變化。預覽時試試定義的文本字體尺寸還會不會隨瀏覽器的選擇字體大小而改變。
四、讓網頁適應不同的瀏覽器
瀏覽器的格局現在是兩分天下，一分是IE，另一分是NetScape，在國內Ie有絕對的佔有率，在這種情況下我們設計的網頁只要兼容它就行了，但NetScape在國外還是有很多人使用，畢竟它是瀏覽器的元老。
雖然沒有辦法做出讓所有瀏覽器都兼容的網站，但只要注意以下幾點，做出來的網頁在各個瀏覽器都中能達到比較好的顯示效果：
不要混合使用層和表格排版，如果是父子關系，如層中表格，不在此原則范圍內。
內聯式的 CSS 在 Netscape Navigator 中經常會出現問題，使用鏈式或內嵌式。
有時需要在空層插入表格或者透明圖片，以保證在 Netscape Navigator 里的效果。
對於只有幾個像素寬度或高度的層，改用圖片來實現。
避免使用 W3C 組織不推薦的排版屬性，用 CSS 代替。
第二種方法：做兩個適合不同解析度的頁面，一個是800×600，一個是1024×768，在800×600的頁面中加入一下代碼就可以實現跳轉了：
　
解決解析度問題在Dreamweaver中沒有此項功能，我們只能手動加入一段Javascript代碼。首先在change－ie.html或change－nc.html頁面代碼中的< head>和< /head>中加入以下代碼：
< script language=JavaScript>
< !－－
function redirectPage(){
var url800x600=〃index－ie.html〃; //定義兩個頁面，此處假設index－ex.html和1024－ie.html同change－ie.html在同一個目錄下
var url1024x768=〃1024－ie.html〃;
if ((screen.width==800) ＆＆ (screen.height==600))　//在此處添加screen.width、screen.height的值可以檢測更多的解析度
window.location.href= url800x600;
else if ((screen.width==1024) ＆＆ (screen.height==768))
window.location.href=url1024x768;
else window.location.href=url800x600;
}
// －－>
< /script>
然後再在< body…>內加入onLoad=〃redirectPage()〃
最後，同樣地，在< body>和< /body>之間加入以下代碼來顯示網頁的工作信息：
< script language=JavaScript>
< !－－
var w=screen.width
var h=screen.height
document.write(〃系統已檢測到您的解析度為:〃);
document.write(〃< font size=3 color=red>〃);
document.write(w＋〃×〃＋h);
document.write(〃< /font>〃);
document.write(〃正在進入頁面轉換,請稍候…〃);
// －－>
< /script>

判斷讀者瀏覽器類型和屏幕解析度，自動調用不同CSS

我們在設計網頁的時候一個比較頭痛的問題是究竟我們的瀏覽者的解析度是多少？如果使我們的瀏覽者能夠更好的去瀏覽到我的網頁，這個是我們設計前必須思考的問題。所以Leying在設計網頁的時候第一個想的是兼容現在大多數瀏覽者的屏幕解析度，這里頭有幾種最常用的方法：

1、硬行把網頁先用表格框起來，框的解析度應該是在760－780象素，其餘的空間可以給一個背景圖或者空白.
2、用自動縮放的方法也可以實現，這種方法比較古老，而且很簡單，這個不多說了；

3、用自動判斷的方法。

今天，就第三種方法來說說，如何來判斷出瀏覽者的屏幕解析度，根據不同的解析度給予讀者不同的瀏覽內容：

網路上也有一些能自動判斷出你的瀏覽器是什麼類型或者什麼版本的代碼，集成過來。

一、既判斷解析度，也判斷瀏覽器，使之成為判斷瀏覽器類型屏幕解析度自動調用不同CSS的代碼。

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

為了大家明白，這里簡單解析一下：

引用內容

var IE1024="";

var IE800="";

var IE1152="";

var IEother="";

引號裡面分別填寫，用戶使用IE的時候並且解析度為1024*768,800*600,1152*864要使用的css文件名。

var Firefox1024="";

var Firefox800="";

var Firefox1152="";

var Firefoxother="";

引號裡面分別填寫，用戶使用FireFox（一個也很流行的瀏覽器）的時候並且解析度為1024*768,800*600,1152*864要使用的css文件名。

var Other1024="";

var Other800="";

var Other1152="";

var Otherother="";

引號裡面分別填寫，用戶使用其他瀏覽器的時候並且解析度為1024*768,800*600,1152*864要使用的css文件名。

二、不判斷解析度，只判斷瀏覽器實現根據瀏覽器類型自動調用不同CSS。

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

解釋：（和前面的差不多）

如果瀏覽器為IE，則調用default.css

如果瀏覽器為Firefox，則調用default2.css

如果瀏覽器為其他，則調用newsky.css

使用方法：

很簡單，放在「</head>」前面即可。

頁面在不同屏幕解析度下存在的問題及解決辦法
（未考慮800*600或更低解析度的情況）
一問題
在不同解析度下，頁面布局存在不同程度的差異，特別是頁面上的表單控制項，其寬度默認是固定值「width:150px」，當解析度較高時，表格中的空白顯得過多，頁面布局顯得很不協調，在寬屏顯示器上尤為明顯。
二解決辦法
方法1. 為不同解析度單獨做樣式文件，在頁面頭部用js判斷解析度後動態載入定義好的樣式文件。樣式文件命名格式如：forms[_屏幕寬度].css，樣式文件中只需重新定義文本框和下拉框的寬度即可。
在包含的頭文件headr.inc中加入js代碼：
if(screen.width > 1024){
document.write('<link rel="stylesheet" type="text/css" href="${path}/nrmus/etc/css/forms_'+ screen.width +'.css">');
}
forms_1280.css文件內容：
/* 解析度寬度為1280的時候，文本框和下拉框的寬度屬性(width)單獨定義
* 參考計算方法為：（解析度寬度-174）/4 * 0.7
* 左側菜單欄寬度為174px；右側頁面表格是4列；控制項寬度為單元格的70%
* (1280-174)/4*0.7 = 193
*/
input.text
{
background:#FFFFFF;
border:1px solid #B5B8C8;
padding:3px 3px;
height:22px;
line-height:18px;
vertical-align:middle;
padding-bottom:0pt;
padding-top:2px;
width: 193px;
color: #333;
}
select.select{
width: 193px;
}
優點：實現很簡單，代碼量少；並且可針對不同解析度做更細粒度的頁面控制。
缺點：無明顯缺點。
方法2 將整個頁面的寬度設置為固定值，並使其居中顯示。
優點：可以很大程度的消除不同解析度下的顯示差異。
缺點：解析度寬度大於這個固定值的時候，頁面兩邊會出現空白。
方法3 用js判斷解析度，修改body的zoom屬性（IE特性），即可實現對整個頁面進行縮放，類似IE8或其它瀏覽器提供的縮放功能。
優點：實現簡單，頁面能進行縮放。
缺點：縮放是寬度和高度的等比縮放，高解析度下字體、圖片看起來會變小，問題解決的不徹底。

三總結
推薦方法1。頁面布局的變化和解析度的寬度有密切關系，和高度關系不大；常用的解析度寬度也就幾種，做幾個簡單的css文件即可。

8、設計自適應網站頁面時應注意哪些事項

1、頁面內容要新穎

網頁內容的選擇要不落俗套，要重點突出一個「新」字，這個原則要求我們在設計網站內容時不能照抄別人的內容，要結合自身的實際情況創作出一個獨一無二的網站。放眼望去，網上的許多個人主頁簡直就是"雜貨店"，內容包羅萬象,題材千篇一律，人人都是"軟體下載",個個都有"網路導航"，從頭到尾找不出一絲「鮮」意。所以，我們在設計網頁時，要把功夫下在選材上。選材要盡量做到「少」而「精」,又必須突出「新」，如能堅持天天更新的話,我相信這樣的網頁一定會受到大家的歡迎。

2、網頁命名要簡潔

由於一個網站不可能就是由一個網頁組成，它有許多子頁面，為了能使這些頁面有效地被連接起來，用戶最後能給這些頁面起一些有代表性的而且簡潔易記的網頁名稱。這樣既會有助於你以後方便管理網頁，在向搜索引擎提交你的網頁時更容易被別人索引到。在給網頁命名時，最好使用自己常用的或符合頁面內容的小寫英文字母，這直接關繫到頁面上的連接。

3、要及時更新網頁

網頁製作好後，不能說萬事大吉了，其實事後的工作量更大。因為網頁製作是一時的，而維護更新的工作是每天都要做的。要及時把網頁上已經作廢的連接應該立即刪除掉，比如用戶無意中點擊了頁面中的一個連接，在苦苦的等待之後，換來的是無法訪問的結果，那麼他們會對你的網頁大失所望，可能以後再也不會光顧你的網頁了。若不能及時更新，也最好在主頁上發布信息，告訴前來訪問的朋友，因有特殊情況需要離開一段時間，未能及時更新主頁，希望各位見諒，這樣就能給人一種對別人負責的感覺，同時能得到網友的信任。

4、注意視覺效果

設計Web頁面時，一定要用640×480和800×600的解析度來分別觀察。許多瀏覽器使用640×480的解析度，盡管在800×600高解析度下一些Web頁面看上去很具吸引力，但在640×480的模式下可能會黯然失色。作一點小小的努力，設計一個在不同解析度下都能正常顯示的網頁

5、隨時注意網站升級

時刻注意網站的運行狀況。性能很好的主機隨著訪問人數的增加，可能會運行緩慢。但是，如果你不想失去訪問者的話，一定要仔細計劃好你的升級計劃。

6、網頁內容要易讀

網站設計最重要的訣竅，恐怕就是你的網頁要易讀。這就意味著,你必須花點心思來規劃文字與背景顏色的搭配方案。注意不要使背景的顏色沖淡了文字的視覺效果，別用花里胡哨的色彩組合，讓人看起來你的網頁來很費勁。一般來說，淺色背景下的深色文字為佳。這個要點要求你最好別把文字的規格設得太小、也不能太大。文字太小，人家讀起來難受；文字太大，或者文字視覺效果變化頻繁，像是沖著人大喊大叫，看起來不舒服。另外，最好讓文本左對齊，而不是居中。按當代中文的閱讀習慣，文本大都居左的。當然，標題一般應該居中，因為這符合讀者的閱讀習慣。

7、善用表格來布局

不要把一個網站的內容象作報告似的一二三四地羅列出來，要注意多用表格把網站內容的層次性和空間性突出顯示出來，使人一眼就能看出你的網站重點突出，結構分明。

8、少用特殊字體

雖然你可以在你的HTML中使用特殊的字體，但是，你不可能預測你的訪問者在他們的計算機上將看到什麼。在你的計算機里看起來相當好的頁面，在另一個不同的平台上看起來可能非常糟糕。一些網站設計員喜歡使用來定義特性，這雖然允許你使用特殊的字體，但是仍需要一些變通的方法，以免你所選擇的字體在訪問者的計算機上不能顯示。級聯風格表CSS有助於解決這些問題，但是只有最新版的瀏覽器才支持CSS。

9、多學習和使用HTML

為了成功地設計網站，你必須理解HTML是如何工作的。大多數的網站設計者建議網路新手應從有關HTML的書中去尋找答案，用Notepad製作網頁。因為用HTML設計網站，可以控制設計的整個過程。但是，如果你僅僅是網站設計的新手，你應該尋找一個允許修改HTML的軟體包。HomeSite4是一個很好的Web設計工具。在設計過程中，HomeSite4能幫助你學習HTML。它還允許你切換到所見即所得的模式，以便你在把網站發送到Web之前，預覽你的網站。

10、盡量少用Java程序不要使用大幅面的Java程序,能夠用javascript替代效果的則盡量不要使用java.因為目前來講java的運行速度實在慢的讓人無法忍受，往往使瀏覽者沒有耐心等頁面全部顯示出來，這樣你的精心設計便毫無效果啦。

9、如何去設計一個自適應的網頁設計或html5

如今移動互聯網隨著3G的普及，越來越火爆，更多需求跟隨而來！APP應用市場和APP應用數量成倍成倍的增長！從而給移動互聯網帶來新的挑戰！
移動設備正超過桌面設備，成為訪問互聯網的最常見終端。於是，網頁設計師不得不面對一個難題：如何才能在不同大小的設備上呈現同樣的網頁？
手機的屏幕比較小，寬度通常在600像素以下；PC的屏幕寬度，一般都在1000像素以上（目前主流寬度是1366×768），有的還達到了2000像素。同樣的內容，要在大小迥異的屏幕上，都呈現出滿意的效果，並不是一件容易的事。
很多網站的解決方法，是為不同的設備提供不同的網頁，比如專門提供一個mobile版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比較麻煩，同時要維護好幾個版本，而且如果一個網站有多個portal（入口），會大大增加架構設計的復雜度。
於是，很早就有人設想，能不能」一次設計，普遍適用」，讓同一張網頁自動適應不同大小的屏幕，根據屏幕寬度，自動調整布局（layout）？
一、了解什麼是」自適應網頁設計」
自從2010年，Ethan Marcotte提出了「自適應網頁設計」（Responsive Web Design）這個名詞，指可以自動識別屏幕寬度、並做出相應調整的網頁設計。
他製作了一個範例，裡面是《福爾摩斯歷險記》六個主人公的頭像。如果屏幕寬度大於1300像素，則6張圖片並排在一行。
如果屏幕寬度在600像素到1300像素之間，則6張圖片分成兩行。
如果屏幕寬度在400像素到600像素之間，則導航欄移到網頁頭部。
如果屏幕寬度在400像素以下，則6張圖片分成三行。
mediaqueri.es上面有更多這樣的例子。
這里還有一個測試小工具，可以在一張網頁上，同時顯示不同解析度屏幕的測試效果，我推薦安裝。
二、需要允許網頁寬度自動調整
「自適應網頁設計」到底是怎麼做到的？其實並不難。
首先，在網頁代碼的頭部，加入一行 viewport元標簽。
viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個設置，包括IE9。對於那些老式瀏覽器（主要是IE6、7、8），需要使用 css3-mediaqueries.js。

三、在進行設計的時候不能使用絕對寬度
由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。
具體說，CSS代碼不能指定像素寬度：
width:xxx px;
只能指定百分比寬度：
width: xx%;
或者
width:auto;
四、相對大小的字體
字體也不能使用絕對大小（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文件中載入。
@import url(「tinyScreen.css」) screen and (max-device-width: 400px);
七、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.getElementByIdx_x(「content」).getElementsByTagName_r(「img」);
imgSizer.collate(imgs);
});
不過，有條件的話，最好還是根據不同大小的屏幕，載入不同解析度的圖片。有很多方法可以做到這一條，伺服器端和客戶端都可以實現。
只要遵循這8條設計准則，我相信你們可以很快的設計出自適應的網頁出來

10、HTML網頁設計怎樣設置網頁主體寬高？

問題說得太籠統了。網頁主體指的是？整體布局？這個很難說的，例如，我設置了 html, body 都為100%，然後我設置一個盒子是 80% ，那麼這個 80% 的盒子控制主體，又例如：最外層的div我也是設置100%,然後我每部分分別設置它需要的寬，那就是每部分控制的。
你要設置那就要根據你的項目的實際情況來決定。

導航:首頁 > 萬維百科 > HTML網頁設計自動適應屏幕寬度

HTML網頁設計自動適應屏幕寬度

與HTML網頁設計自動適應屏幕寬度相關的知識