一、手機網(wǎng)站制作是什么意思

手機網(wǎng)站制作是以前端代碼為主，運用HTML5、CSS3、以及JavaScript、jQuery以及交互動畫等前端代碼，將設計師所設計出來的設計稿，按照W3C規(guī)范制作成網(wǎng)頁格式。手機網(wǎng)站制作在網(wǎng)站建設的流程上是在手機網(wǎng)站設計之后，通常是由WEB前端工程師來完成。前端工程師除了要配合網(wǎng)頁設計師外，還要配合做后端工程師，做好網(wǎng)頁端的數(shù)據(jù)收集處理等工作。

二、手機網(wǎng)站制作流程

1、需求溝通

與產品經理、網(wǎng)站設計師進行需求溝通，深入了解網(wǎng)站策劃情況、交互過程、設備適配要求等具體實現(xiàn)要求。

2、源文件切圖

分析網(wǎng)頁設計源文件，對源文件中需要使用圖片的位置進行文件切割或者圖片制作，形成Html代碼編寫時可調用的圖片。（注：也可能是網(wǎng)頁設計師切圖）

3、Html代碼編寫

根據(jù)網(wǎng)站設計效果圖及網(wǎng)頁設計師的頁面標注，按照W3C規(guī)范，采用DIV+CSS技術對網(wǎng)站設計圖進行"復原"，制作成Html文件。

4、交互功能優(yōu)化

手機端網(wǎng)站在瀏覽頁面需要使用手動的形式。這不同于PC網(wǎng)站的外接設備。交互式功能優(yōu)化就需要變得很簡單，保證用戶在各個頁面之間來回切換。

5、適配性調試

對網(wǎng)頁進行硬件及軟件兼容性調試，使制作好的網(wǎng)頁滿足不同的手機(品牌、系統(tǒng))及瀏覽器(UC瀏覽器、360瀏覽器、Firefox、Safari)下正常訪問。

6、反饋與修改

根據(jù)產品經理、網(wǎng)站設計師以及客戶的反饋，對制作好的網(wǎng)頁(Html)進行調整，以達到最優(yōu)的瀏覽以及交互效果。

三、手機網(wǎng)站制作規(guī)范

1、元素類型標準：

(1)、網(wǎng)站頁面的元素以及文件限定如下：

● 普通頁面：.html；

● 腳本文件：.js；

● 樣式表文件：.css；

● 動畫互動元素：.swf/.gif；

● 圖片元素：.jpg/.gif/.png；

● 視頻元素：.asf/.mpg/.rm/.mpeg/.rmvb/.flv；

● 音頻元素：.mp3/.wma；

(2)、網(wǎng)站頁面元素文件大小標準：

● 首頁頁面大小不超過300K，其他子頁面大小不超過500K；

● 圖片元素，切圖后保證單張圖片體積大小應在100K 以內，圖片格式包括：.jpg /.gif/.png；

● 單個flash 元素不超過1M，flash 格式包括：.swf；

● 單個視頻元素不超過4M，視頻格式包括：.asf/.mpg/.rm/.mpeg/.rmvb/.flv；

● 單個音頻元素不超過2M，音頻格式包括：.Mp3/.Wma；

● 動畫互動元素菜單類大小必須限制在100K 以下。游戲類大小必須限制在1M 以下，超過500K后必須制作loading 效果。

(3)、元素切割方式標準：

● 設計稿切圖工具選擇：制作前應根據(jù)設計師源文件，選擇適合切圖的工具，如PSD 文件選擇Photoshop CS；

● 設計稿頁面導出文件設置：頁面切圖應導出.gif 或.jpg 兩種文件格式，不推薦png、bmp等；

● 格式圖片：像素圖、矢量色塊化圖、黑白圖選擇gif 格式；顏色漸變的、圖片內容結構豐富的、色彩飽和度高的選擇jpg 格式。

● 一致性原則：按鈕圖片切圖后，應保證按鈕圖片背景的透明性以及和整體頁面的融合性。確保與設計稿沒有偏差。

● 可循環(huán)重復使用的背景圖片不應切割成大圖。

2、文件命名標準：

所有的文件命名要求只能包含：小寫字母、數(shù)字、下劃線。

(1)、目錄文件命名標準：

● images：目錄存放靜態(tài)圖片；

● js：目錄存放JavaScript 腳本文件；

● swf：目錄存放Flash 文件；

● css：目錄存放css 樣式文件；

● Xml：目錄存放XML 文件，如Flash 的配置文件 json；

注意：文件夾名、文件名及文件擴展名均為英文小寫字母，一個項目最多2 個css 文件，基礎css 和擴展css，css 文件不要寫在頁面中要統(tǒng)一放在.css文件中。

(2)、頁面文件命名標準：

● 圖片命名原則：類型描述*.gif(jpg) 如：top_btn_help.gif；

● 表格圖片命名：同上，與標記命名相同；

● 網(wǎng)站欄目文件命名標準：欄目名稱-網(wǎng)站名稱，例如：作品展示-優(yōu)化猩。

3、Html文件head區(qū)代碼規(guī)范：

(1)、版權注釋

<!--- The site is designed by ---> 

(2)、網(wǎng)頁顯示字符集

簡體中文：<meta http-equiv="content-type" content="text/html  charset=gb2312"> ；

英文：<meta http-equiv="content-type" content="text/html  charset=iso-8859-1">；

(3)、制作者信息

<meta name="author" content="mail@mail.com"> 

(4)、網(wǎng)頁標題

<title>內容標題 - 欄目名稱 - 網(wǎng)站名稱</title>

(5)、網(wǎng)頁描述

<meta name="description" content="當前網(wǎng)頁描述"> 

(6)、網(wǎng)頁關鍵詞

<meta name="keywords" content="關鍵字,關鍵字1,關鍵字2,關鍵字3">

(7)、網(wǎng)頁css調用

<link href="xxx/xxx.css" rel="stylesheet" type="text/css"> 

(8)、網(wǎng)頁javascript調用

<script language="javascript" src="xxx/xxxxx.js"></script>

4、網(wǎng)站制作標準檢驗站點

(1)、Html檢驗

http://validator.w3.org/

 (2)、CSS 檢驗

http://jigsaw.w3.org/css-validator/

四、手機網(wǎng)站制作注意事項

1、可點擊部件不成小于88PX，（如果不敷提交設計稿的時候特別說明）；

2、所有部件的尺寸大小必須是雙數(shù)；

3、每一個按鈕需要有四個狀態(tài)：默許、按下、選中、不能選。至少需要思索：默許和不能選兩個狀態(tài)；

4、除廣告圖片外，其他圖形部件盡能夠用圖形工具繪制；

5、可點擊部件盡能夠和屏幕四邊堅持20-30PX的間隔；

6、設計的時候盡能夠以一個使用者的角度去設計，斷定哪一個頁面需要狀態(tài)欄，哪一個頁面只需要一個返回按鈕；

7、同比例屏幕大小的縮放，手機的屏幕大小和尺寸是不統(tǒng)一的，所以在進行手機網(wǎng)頁制作時，不同屏幕大小的手機用戶都要兼顧到；

8、網(wǎng)頁不要過大，盡量減小網(wǎng)頁體積，并且要符合W3C標準。

五、手機網(wǎng)站制作工具

1、Vscode

這是前端開發(fā)人員必備的開發(fā)工具，安裝簡單，需要什么插件直接在里面安裝。

Visual Studio Code是針對于編寫現(xiàn)代Web和云應用的跨平臺源代碼編輯器，可在桌面上運行，并且可用于Windows，macOS和Linux。它具有對JavaScript，TypeScript和Node.js的內置支持，并具有豐富的其他語言擴展的生態(tài)系統(tǒng)。

2、WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 開發(fā)工具。目前已經被廣大中國JS開發(fā)者譽為"Web前端開發(fā)神器"、"最強大的HTML5編輯器"、"最智能的JavaScript IDE"等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。

3、Hbuilder

Hbuilder這個工具可以和微信web開發(fā)者工具一起使用，開發(fā)微信小程序，還可以開發(fā)app，開發(fā)的程序可以同時在安卓手機和蘋果手機上運行，不需要分別寫兩套代碼。HBuilder是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開發(fā)IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。

4、微信web開發(fā)者工具

主要用戶開發(fā)微信小程序。微信web開發(fā)者工具是一款便捷實用的微信調試工具。微信web開發(fā)者工具采用的是集成Chrome DevTools和基本的移動調試模塊，小伙伴們可以借助微信web開發(fā)者工具更方便、安全的開發(fā)或是針對調試基于微信開發(fā)的網(wǎng)頁代碼。

5、GitHub

GitHub是目前世界上最大、最先進的源代碼平臺。在此，您能發(fā)現(xiàn)6500萬名用戶和數(shù)億個存儲庫，其中有2800萬個是公開的。

由于任何人都可以注冊GitHub，并免費托管自己的所有代碼，因此全球各地的開發(fā)者都會持續(xù)使用GitHub來構建、發(fā)布和維護他們的軟件。當然，它也允許用戶在已完成構建的基礎上，進行迭代式構建，從而減少了用戶的重復工作量，并提高代碼的整體質量。

同時，它帶有內置的代碼審查、超凡的協(xié)作功能(如處理錯誤跟蹤和功能請求)。用戶可以通過增強的DevOps模式，以及為整個工作流編寫的腳本，來自動化GitHub的各項操作。

6、Atom

由GitHub開發(fā)的Atom，是一款適用于macOS、Linux和Microsoft Windows的免費開源式文本和源代碼編輯器。它不但支持用JavaScript編寫的插件，而且嵌入了Git控件。

Atom備受開發(fā)人員歡迎之處在于，您可以按需對其進行自定義，而無需編輯配置文件。除了支持跨平臺的編輯之外，Atom的自動完成功能還可以幫助用戶更快地編寫出程序代碼。

7、Notepad++

Notepad++是一個非常獨特的編輯器，是開源軟件，可以免費使用。是開發(fā)人員的必需軟件。支持的語言有：C、C++、 Java、C#、XML、HTML、 PHP、Javascript。

六、手機網(wǎng)站制作常見問題

1、手機網(wǎng)站使用相同的URL好，還是需要單獨的做一個m站好？

在理想情況下采用同一套的URL是比較合適的，對于移動網(wǎng)站的建設和優(yōu)化，建議采用單獨的二級域名來做，不建議使用子域名來做移動站。

2、一個站點有m站和pc站，采用完全的TDK，是否有問題？

由于PC端和移動端搜索結果展現(xiàn)的標題和摘要字數(shù)是不一樣的，PC端需要30多個字才截斷，而移動端不到20個就截斷了，所以建議采用單獨的TDK，獲取良好的用戶體驗。

3、如果有兩個站點的TDK是完全相同的，會不會導致站點被懲罰？

如果說兩個站同時指向一個站點的移動和PC，那是不會受到懲罰的。

4、在企業(yè)網(wǎng)站設計中，外鏈對手機站是否有效果?

效果還是有的，但是不要去做那些垃圾外鏈，比如論壇的標簽里面或者說買賣鏈接或者是批發(fā)鏈接都有可能被懲罰，如果是正常的交換鏈接還是有用的。

5、手機站使用xhtml與html5開發(fā)，對搜索引擎是否有區(qū)別?

一般來說，極速版會優(yōu)先給XHTML的結果，觸屏版的優(yōu)先給HTML5。

6、做了移動端適配的是不是可以把沒做的擠下去?

做了移動站適配的站點，在其他情況都相同的情況下，搜索引擎會優(yōu)先展示適配移動的站點，系統(tǒng)中也比較傾向于移動站優(yōu)先展現(xiàn)。

總結

優(yōu)化猩SEO：主流手機網(wǎng)站制作基本都采用Html5+Css3制作，手機網(wǎng)站制作需要充分考慮用戶在瀏覽頁面時使用手動的形式，在交互式功能方面需要更簡單，保證用戶在各個頁面之間操作的便捷性。

參考鏈接：

網(wǎng)站制作手機網(wǎng)站的步驟流程 - 新網(wǎng)數(shù)碼

https://www.xinnet.com/knowledge/2142329585.html

H5手機網(wǎng)站頁面設計制作9條規(guī)范

https://www.cq5c.com/info/detail-2185.html

移動網(wǎng)站建設的常見問題-時間財富網(wǎng)

http://www.680.com/it/1912/shouji-115315.html

修改于2023-09-22