html5製作手機網頁設計

1、這種手機網頁是怎樣製作的？

網站移動端製作原理：

1、域名解析一個m.xxx.com，綁定到伺服器上；

2、m.xxx.com放PC端的網站程序，資料庫直接連接PC資料庫；

3、移動模板對應PC模板，程序文件和pc一樣。只是資料庫是共用一個；

4、在PC頁面上面設置移動跳轉判斷，網上有PHP跳轉代碼；

5、你可以參考開源程序製作移動端，比如dedecms，帝國cms製作移動端，如果感覺比較麻煩了，那就直接把PC頁面重寫，頁面直接修改成響應式！

現在做網站手機站必須要做，手機上搜索越來越多。電腦站手機打開瀏覽網頁，體驗非常不好。目前手機網站製作有3種方法：

1、獨立域名手機站

這種手機站對優化排名比較好，也可以自己設計手機模板，專門買個空間放手機站程序，域名解析二級域名。　

2、自適應網站

這種網站體驗比較少，會根據屏幕大小，自動顯示不同的頁面布局。手機和電腦站用的一個模板。一個域名，對優化體驗非常好。

3、二級目錄手機站

這種比較常用的一種，電腦站域名後面加/wap，或者/m 。通過跳轉代碼，手機打開電腦站網址，自動進入手機站。內容和PC是同步的，管理也比較方法。

2、怎樣快速製作html5手機頁面？

去MAKA平台，直接選擇模版組合，然後添加圖文信息就可以製作，比你自己編程快多了~百度搜MAKA邀請函就能找到網站~

3、手機網頁怎麼製作？

隨著智能手機越來越普遍，單純依靠PC端遠遠滿足不了用戶需求。特別是企業如何在移動端牢牢把握住用戶就可以在公司盈利和業務方面獲得飛速增長。然而，移動網站建設就變得越來越重要。搭建移動網站滿足公司業務需求，從而獲得移動端流量，就變得迫在眉睫。

手機網站製作分為2種語法：

第一種是採用WML編寫適合於按鍵的傳統手機的WAP網站，

第二種是採用時下比較流行的HTML5編寫前台。

而如今隨著中國的移動互聯網發展和智能觸屏手機的普及，WAP網站已經逐漸退出歷史舞台。並在程序或者主機上寫好判斷規則，如果是PC版的瀏覽器就訪問PC版的網址，是手機瀏覽器就訪問手機站。針對不同的群體訪問不同的頁面，有利於提高網站轉化率。

WAP是無線應用協議的縮寫，一種實現行動電話與互聯網結合的應用協議標准。wap網站也就是我們通常說的手機站。 

（2）html5是W3C制定的超文本標記語言（html)的第五次修改，通過html5製作的網站可以靈活運行於PC，平板，手機等各種媒體。 

（3）wap網站只能運行於手機端，多以文字圖片為主，無特效和邏輯功能；html5的新特性可以讓網站運行各種媒介（PC、平板、手機），並可以根據媒介的不同響應調節網站結構，與js/css3，可以構造出炫酷的特效效果。

4、我想做一個動態的手機網頁，能用什麼做？是用HTML5做

1、首先，我們創建一個移動APP項目，然後，添加一個index.html頁面。代碼里，添加一個圖標，以及添加引入一個JS文件，該文件的作用在於：請求後台JS文件。

2、接下來，我們看看service.js文件是如何請求後台JS文件的。編寫該service.js文件的重點是：A、如何非同步請求後台JS文件；B、請求回來的後台文件，如何動態添加到頁面的Head里。

3、緊接著，我們對APP項目進行打包操作：選擇需要的打包類型，然後，填寫相應的證書信息。如果選擇IOS打包，請在打包證書里，添加需要安裝的蘋果手機UDID（未提供UDID，則不能安裝APP)。

4、打包完成後，便可以下載安裝APP。先用蘋果手機連接電腦，然後通過工具安裝APP。當然，這種連接數據線安裝的方式，只能適合個人測試使用。如果想給別人批量安裝測試，請參考《HTML5 APP開發之APP測試》經驗。

1HTML5 APP開發之APP測試

5、APP安裝完成後，我們看看打開APP現有的效果是怎樣的。我們看到APP頁面的左上角，顯示了一個聯系人的圖標。

6、由於菜果手機不同系列的屏幕大小不一樣，而且屏幕的解析度也不一樣【安桌手機的也一樣】。導致同一個頁面布局，在不同的手機上，顯示的位置有時偏差比較大，有時也好。當然，這也加大了開發和測試的難度。不可能因一些位置問題，就重新發布APP。下面是蘋果手機不同系列的屏幕大小解析度說明：

7、所以，才有了動態調試頁面布局的想法。回到第二步，我們是有請求後台JS文件的（showJSPage.js）。下面看看showJSPage.js，是如何編寫的：A、首先判斷手機操作系統類型；B、判斷屏幕大小。

8、添加了showJSPage.js代碼後，啟動後台服務。然後，關閉原來打開的APP軟體，再重新打開APP軟體，便可查看修改後的效果。

9、整個方案的理解重點在於：熟悉JS執行的先後順序，以及對手機屏幕大小與屏幕解析度的關系。才能靈活運用，達到自己想要的目的。

5、如何用HTML5製作網頁

html5標簽掌握了，從上到下從左到右，標簽合理使用，先把框架搭好，再結合css3做效果，先花時間把html5 css3看兩遍，再看網頁設計html5製作教程就ok了

當然這只是最簡單的

6、手機html網頁和電腦上的html網頁在製作上有什麼區別

1.導航設計

手機端頁面導航應當包括用戶必要的內容，刪除屏幕上不必要的鏈接，假如鏈接的詳細頁面內容不是用戶想要的，用戶不會點擊，也就沒必要設置。其中建立導航功能鍵的時候，其中以回到首頁、回到上一頁這兩個最為重要。

2.網站名稱或logo的設計

手機網頁的頂部沒有標題欄或地址欄，相應地，也就沒有網站標題和圖標。所以設計頁面的時候應該讓用戶知道，他們現在所瀏覽的網站名稱或logo，這對塑造品牌也很重要。 

3.頁面排版

從用戶角度來說，他們希望閱讀所有的內容，所以我們進行內容呈現，只是用隔斷、重組、引語、線條或其他視覺方案來讓這些內容更容易訪問，使這些板塊顯得更都雅。

4.利用手機的天生優勢

手機有著許多傳統電腦所沒有的優勢，其中最大的優勢就是移動力，因此手機版網頁應該要特別發揮這些特性，讓手機網頁具有一般網頁更多的優勢。如：

移動定位：大部分的智能設備都有導航、定位的機制，可以讓客戶主動找到企業的位置。

移動聯系：如果用使用的是行動電話，可以立即發話;或者直接跳轉到通訊工具在線聊天;

鄰近地點：如果企業有很多據點，請告訴用戶，在他附近有哪一些地點是便於他能夠抵達的。

7、怎麼製作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

8、怎麼製作手機網頁 如何製作一個手機html頁面

這個還用說，其實道理和PC端網站是一樣的道理。因為現在用戶慢慢轉向移動端，所以擁有一個移動網站也是很必要的。

其實自助建站自己做網站都是不成問題了，不管你懂不懂代碼，都可以做的。

首先，注冊一個凡科帳號，這是開始建站的第一步

第二，登錄帳號後，會有建站、互動、微傳單三塊，一個帳號都可以用，你選擇「網站建設」這一塊；

第三，進入後台之後，選擇自己喜歡的手機網站模板。

第四,就可以開始設計自己的網站，排版、欄目、文字、圖片等設計。第五，無論是否完全做好，先保存，再退出。第六，網站做好後，可以為網站添加需要的功能，拖拽就可以實現添加。

9、html5做手機app和做手機網頁一樣嗎

不一樣，需增加自適應標簽來保持一樣。

代碼如下：

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

解釋：Viewport指用戶網頁的可視區域，content中的「width」指的是虛擬窗口寬度，上面代碼意為虛擬窗口/頁面寬度初始比例為1，最小比例為1，最大比例為1，用戶不可擴展，頁面不可縮放。

(9)html5製作手機網頁設計擴展資料：

HTML5的事件屬性和異常處理

事件屬性

HTML 5 元素可擁有事件屬性，這些屬性在瀏覽器中觸發行為，比如當用戶單擊一個HTML 5元素時啟動一段 JavaScript。下面列出的事件屬性，可以把它們插入 HTML 標簽來定義事件行為。

HTML 5 中的新事件屬性：

onabort， onbeforeunload， oncontextmenu， ondrag， ondragend， ondragenter， ondragleave， ondragover， ondragstart， ondrop， onerror， onmessage， onmousewheel， onresize， onscroll， onunload。