1、怎麼製作 HTML靜態網頁？
教程：http://www.w3school.com.cn/index.html
2、靜態網頁設計製作中的布局模式
一、靜態布局（Static Layout）
即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。
1、布局特點：不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態（定寬度）布局的，也就是設置了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見與pc端。
2、設計方法：
PC：居中布局，所有樣式使用絕對寬度/高度(px)，設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；
移動設備：另外建立移動網站，單獨設計一個布局，使用不同的域名如wap.或m.。
在移動端開發中採用靜態布局的兩種方式：
（1）在viewport meta標簽上設置width=320，頁面的各個元素也採用px作為單位。通過用JS動態修改標簽的initial-scale使得頁面等比縮放，從而剛好占滿整個屏幕。（見前端開發-web app 變革之rem）
（2）設在viewport meta標簽上設置content"width=640,user-scalable=no，頁面的各個元素也採用px作為單位。由於640px超出了手機寬度，瀏覽器會自動縮小頁面至剛好全屏。
優點：這種布局方式對設計師和CSS編寫者來說都是最簡單的，亦沒有兼容性問題。
缺點：顯而易見，即不能根據用戶的屏幕尺寸做出不同的表現。
二、流式布局（Liquid Layout）
流式布局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕解析度進行適配調整，但整體布局不變。代表作柵欄系統（網格系統）。
網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設置網頁主體的寬度為80%，min-width為960px。圖片也作類似處理（width:100%, max-width一般設定為圖片本身的尺寸，防止被拉伸而失真）。
1、布局特點：屏幕解析度變化時，頁面里元素的大小會變化而但布局不變。【這就導致如果屏幕太大或者太小都會導致元素無法正常顯示】
2、設計方法：使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，盡可能的適應各種解析度。往往配合 max-width/min-width 等屬性控制尺寸流動范圍以免過大或者過小影響閱讀。
這種布局方式在Web前端開發的早期歷史上，用來應對不同尺寸的PC屏幕（那時屏幕尺寸的差異不會太大），在當今的移動端開發也是常用布局方式，但缺點明顯：主要的問題是如果屏幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的屏幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得「流式」），顯示非常不協調。
三、自適應布局（Adaptive Layout）
自適應布局的特點是分別為不同的屏幕解析度定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕解析度范圍。改變屏幕解析度可以切換不同的靜態局部（頁面元素位置發生改變），但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。可以把自適應布局看作是靜態布局的一個系列。
1、布局特點：屏幕解析度變化時，頁面裡面元素的位置會變化而大小不會變化。
2、設計方法：使用 @media 媒體查詢給不同尺寸和介質的設備切換不同的樣式。在優秀的響應范圍設計下可以給適配范圍內的設備最好的體驗，在同一個設備下實際還是固定的布局。
四、響應式布局（Responsive Layout）
隨著CSS3出現了媒體查詢技術，又出現了響應式設計的概念。響應式設計的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、手錶、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果，對CSS編寫者而言，在實現上不拘泥於具體手法，但通常是糅合了流式布局+彈性布局，再搭配媒體查詢技術使用。——分別為不同的屏幕解析度定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調整而自動適配。即：創建多個流體式布局，分別對應一個屏幕解析度范圍。可以把響應式布局看作是流式布局和自適應布局設計理念的融合。
響應式幾乎已經成為優秀頁面布局的標准。
1、布局特點：每個屏幕解析度下面會有一個布局樣式，即元素位置和大小都會變。
2、設計方法：媒體查詢+流式布局。通常使用 @media 媒體查詢 和網格系統 (Grid System) 配合相對布局單位進行布局，實際上就是綜合響應式、流動等上述技術通過 CSS 給單一網頁不同設備返回不同樣式的技術統稱。
3、靜態網頁製作
方法/步驟
1、新建一個txt文本文檔，先不要急著修改文件後綴名，有基礎的朋友手動輸入HTML代碼，不會也沒有關系，百度搜索「網頁HTML代碼」。
代碼：
<!Doctype html>
<html>
<head>
<title>靜態網頁製作教程</title>
<meta charset="gbk" />
<link href="css.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
</body>
</html>
2、基礎的靜態網頁代碼寫出來了，下面在<body></body>中間添加網頁需要的數據內容（文字、圖片、表格、視頻等），然後將txt文本文檔的後綴名.txt修改為.html。現在點擊打開看看效果！小編在body中間加入的文字：靜態網頁製作教程。
3、這樣的文字太單調了，需要用CSS樣式定義，小編在桌面上新建一個文件夾「web」，把index.html文件放進去，然後在web文件件裡面新建一個txt文本文檔，修改為「css.css」。
4、使用滑鼠右鍵「打開方式」，選擇txt文本文檔編輯css.css文件。用CSS定義網頁字體大小12像素，網頁背景色為紅色，字體顏色為白色。
代碼：
body{font-size:12px;background:red;color:white}
保存，然後打開web文件夾中的index.html文件，查看效果。
5、下面在web文件下面新建一個images文件夾，然後打開軟體Fireworks，設計自己需要的圖片（沒有就去百度搜索自己需要的圖片，使用QQ截圖功能，截取自己需要的圖片），把設計好的圖片存入web文件夾下面的images文件夾裡面。現在我們在body中放入圖片，讓圖片在網頁裡面居中。
代碼：
<div align="center">
<img src="images/pic.png" alt="logo" title="靜態網頁製作教程" />
</div>
把上面的代碼放入index.html的body中，保存後打開看看效果！
小編在這里省略了表格和視頻的製作，小夥伴不知道的話，可以百度搜索一下。
整個簡單的靜態網頁製作完畢。
4、html靜態網頁怎麼製作啊
<html><head><title>我的網頁</title></head><body>我的網頁</body></html>
最最基本的HTML，把他復制下來粘貼到記事本，然後把記事本的後綴改成html.
5、圖片中靜態網頁設計代碼怎麼寫，要詳細代碼
<div>
<ul>
<li><a href="#">欄目一</a></li>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目三</a></li>
<li><a href="#">欄目四</a></li>
<li><a href="#">欄目五</a></li>
</ul>
</div>
6、html網頁設計：一個簡單的登錄界面代碼！
是這樣的效果嗎？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>3</title>
<script>
function r()
{
var username=document.getElementById("username");
var pass=document.getElementById("password");
if(username.value=="")
{
alert("請輸入用戶名");
username.focus();
return;
}
if(pass.value=="")
{
alert("請輸入密碼");
return;
}
return true;
}
</script>
</head>
<body>
<form>
<table width="350" bgcolor="#ccffcc" style="border-color" border="1">
<tr align=center>
<td>用戶名</td><td><input type="text" name="username" id="username"></td>
</tr>
<tr align=center><td>密 碼</td><td><input type="password" name="password" id="password"></td></tr>
<tr align=center><td>驗證碼</td><td><input type="text" name="yanzheng"></td></tr>
<tr align=center><td colspan="2"><input type="button" value="登 錄" onclick="r();"/> <input type="reset" value="重 置"/></td></tr>
</table>
</form>
</body>
</html>
7、靜態網頁製作作業。要HTML的，簡單點，不要太復雜，初學那種的。
<html>初學的，那上面這段代碼應該可以了