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

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

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

1、需求溝通

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

2、源文件切圖

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

3、Html代碼編寫

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

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

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

5、適配性調(diào)試

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

6、反饋與修改

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

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

1、元素類型標(biāo)準(zhǔn)：

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

● 普通頁(yè)面：.html；

● 腳本文件：.js；

● 樣式表文件：.css；

● 動(dòng)畫互動(dòng)元素：.swf/.gif；

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

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

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

(2)、網(wǎng)站頁(yè)面元素文件大小標(biāo)準(zhǔn)：

● 首頁(yè)頁(yè)面大小不超過(guò)300K，其他子頁(yè)面大小不超過(guò)500K；

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

● 單個(gè)flash 元素不超過(guò)1M，flash 格式包括：.swf；

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

● 單個(gè)音頻元素不超過(guò)2M，音頻格式包括：.Mp3/.Wma；

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

(3)、元素切割方式標(biāo)準(zhǔn)：

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

● 設(shè)計(jì)稿頁(yè)面導(dǎo)出文件設(shè)置：頁(yè)面切圖應(yīng)導(dǎo)出.gif 或.jpg 兩種文件格式，不推薦png、bmp等；

● 格式圖片：像素圖、矢量色塊化圖、黑白圖選擇gif 格式；顏色漸變的、圖片內(nèi)容結(jié)構(gòu)豐富的、色彩飽和度高的選擇jpg 格式。

● 一致性原則：按鈕圖片切圖后，應(yīng)保證按鈕圖片背景的透明性以及和整體頁(yè)面的融合性。確保與設(shè)計(jì)稿沒(méi)有偏差。

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

2、文件命名標(biāo)準(zhǔn)：

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

(1)、目錄文件命名標(biāo)準(zhǔn)：

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

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

● swf：目錄存放Flash 文件；

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

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

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

(2)、頁(yè)面文件命名標(biāo)準(zhǔn)：

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

● 表格圖片命名：同上，與標(biāo)記命名相同；

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

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

(1)、版權(quán)注釋

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

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

簡(jiǎn)體中文：<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)頁(yè)標(biāo)題

<title>內(nèi)容標(biāo)題 - 欄目名稱 - 網(wǎng)站名稱</title>

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

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

(6)、網(wǎng)頁(yè)關(guān)鍵詞

<meta name="keywords" content="關(guān)鍵字,關(guān)鍵字1,關(guān)鍵字2,關(guān)鍵字3">

(7)、網(wǎng)頁(yè)css調(diào)用

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

(8)、網(wǎng)頁(yè)javascript調(diào)用

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

4、網(wǎng)站制作標(biāo)準(zhǔn)檢驗(yàn)站點(diǎn)

(1)、Html檢驗(yàn)

http://validator.w3.org/

 (2)、CSS 檢驗(yàn)

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

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

1、可點(diǎn)擊部件不成小于88PX，（如果不敷提交設(shè)計(jì)稿的時(shí)候特別說(shuō)明）；

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

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

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

5、可點(diǎn)擊部件盡能夠和屏幕四邊堅(jiān)持20-30PX的間隔；

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

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

8、網(wǎng)頁(yè)不要過(guò)大，盡量減小網(wǎng)頁(yè)體積，并且要符合W3C標(biāo)準(zhǔn)。

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

1、Vscode

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

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

2、WebStorm

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

3、Hbuilder

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

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

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

5、GitHub

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

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

同時(shí)，它帶有內(nèi)置的代碼審查、超凡的協(xié)作功能(如處理錯(cuò)誤跟蹤和功能請(qǐng)求)。用戶可以通過(guò)增強(qiáng)的DevOps模式，以及為整個(gè)工作流編寫的腳本，來(lái)自動(dòng)化GitHub的各項(xiàng)操作。

6、Atom

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

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

7、Notepad++

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

六、手機(jī)網(wǎng)站制作常見(jiàn)問(wèn)題

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

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

2、一個(gè)站點(diǎn)有m站和pc站，采用完全的TDK，是否有問(wèn)題？

由于PC端和移動(dòng)端搜索結(jié)果展現(xiàn)的標(biāo)題和摘要字?jǐn)?shù)是不一樣的，PC端需要30多個(gè)字才截?cái)啵苿?dòng)端不到20個(gè)就截?cái)嗔?，所以建議采用單獨(dú)的TDK，獲取良好的用戶體驗(yàn)。

3、如果有兩個(gè)站點(diǎn)的TDK是完全相同的，會(huì)不會(huì)導(dǎo)致站點(diǎn)被懲罰？

如果說(shuō)兩個(gè)站同時(shí)指向一個(gè)站點(diǎn)的移動(dòng)和PC，那是不會(huì)受到懲罰的。

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

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

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

一般來(lái)說(shuō)，極速版會(huì)優(yōu)先給XHTML的結(jié)果，觸屏版的優(yōu)先給HTML5。

6、做了移動(dòng)端適配的是不是可以把沒(méi)做的擠下去?

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

總結(jié)

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

參考鏈接：

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

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

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

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

移動(dòng)網(wǎng)站建設(shè)的常見(jiàn)問(wèn)題-時(shí)間財(cái)富網(wǎng)

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

修改于2023-09-22