■

近幾年來(lái)，移動(dòng)通信技術(shù)和計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)的發(fā)展，逐漸改變了人們的工作方式，一天中使用移動(dòng)終端上網(wǎng)的時(shí)間已經(jīng)超過(guò)了使用電腦的時(shí)間。不過(guò)與之不相匹配的是，我們學(xué)校的網(wǎng)站還只能在電腦上訪問(wèn)，使用移動(dòng)終端訪問(wèn)時(shí)，網(wǎng)頁(yè)顯示很不協(xié)調(diào)。通過(guò)咨詢(xún)電腦公司，我了解了所謂的觸屏版網(wǎng)站其實(shí)也是WebApp的一種展示形式，主要是依賴(lài)HTML+CSS+Javascript這三個(gè)關(guān)鍵因素來(lái)實(shí)現(xiàn)。從根本上來(lái)說(shuō)，WebApp的本質(zhì)就是一個(gè)網(wǎng)站而已，制作這樣一個(gè)WebApp網(wǎng)站報(bào)價(jià)要一萬(wàn)元左右。

既然已經(jīng)有了電腦版網(wǎng)站，為什么還要再重新建設(shè)一個(gè)WebApp手機(jī)版網(wǎng)站呢？能不能直接將電腦版網(wǎng)站的內(nèi)容，在手機(jī)等移動(dòng)終端上呈現(xiàn)呢？通過(guò)不斷研究學(xué)習(xí)，我終于找到了解決方法，這就是“云建站”。

圖1 電腦版、WAP標(biāo)準(zhǔn)版、手機(jī)觸屏版、App客戶(hù)端網(wǎng)站區(qū)別

云建站是由CNZZ數(shù)據(jù)專(zhuān)家（相信很多站長(zhǎng)用過(guò)CNZZ流量統(tǒng)計(jì)）出品的“網(wǎng)站跨屏適配”移動(dòng)化技術(shù)解決方案，我們只需要在PC站中嵌入一段JS代碼，不需要單獨(dú)開(kāi)發(fā)手機(jī)版網(wǎng)站，即可實(shí)現(xiàn)PC向移動(dòng)端的轉(zhuǎn)化。

電腦版、標(biāo)準(zhǔn)版、觸屏版及App客戶(hù)端的區(qū)別

平時(shí)我們經(jīng)常會(huì)聽(tīng)到“電腦版網(wǎng)站”、“WAP版網(wǎng)站”、“觸屏版網(wǎng)站”、“手機(jī)App”這幾種說(shuō)法，那么它們的區(qū)別到底在哪兒呢？

1.電腦版網(wǎng)站

電腦版網(wǎng)站是指用戶(hù)通過(guò)臺(tái)式或者筆記本電腦瀏覽器打開(kāi)的網(wǎng)站，也就是我們平時(shí)上網(wǎng)所訪問(wèn)的網(wǎng)站。

2.標(biāo)準(zhǔn)版網(wǎng)站

標(biāo)準(zhǔn)版網(wǎng)站，也稱(chēng)手機(jī)標(biāo)準(zhǔn)版網(wǎng)站、WAP網(wǎng)站，其特點(diǎn)是界面比較簡(jiǎn)潔和簡(jiǎn)單（圖片少、文字多），適合使用手機(jī)鍵盤(pán)操作。

隨著大屏幕智能手機(jī)的普及，手機(jī)WAP網(wǎng)站正在逐漸退出歷史舞臺(tái)，某些大型網(wǎng)站考慮到黑莓等傳統(tǒng)智能手機(jī)用戶(hù)需求，同時(shí)也建立了WAP版手機(jī)網(wǎng)站供用戶(hù)在“標(biāo)準(zhǔn)版”和“觸屏版”之間自由切換。

3.觸屏版網(wǎng)站

手機(jī)觸屏版網(wǎng)站主要針對(duì)高端智能手機(jī)（大屏幕觸屏手機(jī)），通常采用HTML5+CSS3開(kāi)發(fā)，支持各種蘋(píng)果、安卓等所有操作系統(tǒng)、支持所有主流手機(jī)瀏覽器的訪問(wèn)，可以給用戶(hù)呈現(xiàn)華麗的網(wǎng)頁(yè)視覺(jué)效果。

4.App客戶(hù)端

App客戶(hù)端（手機(jī)App應(yīng)用）是專(zhuān)門(mén)針對(duì)IOS（蘋(píng)果）、Android（安卓）等系統(tǒng)的智能手機(jī)開(kāi)發(fā)的應(yīng)用軟件，用戶(hù)需要先下載安裝該應(yīng)用軟件后才能使用，通常不需要瀏覽器支持和輸入網(wǎng)址。

以hao123網(wǎng)站為例，我們來(lái)看看它們的區(qū)別（如圖1）。

云建站的前期準(zhǔn)備

訪問(wèn)網(wǎng)址http://zhan.#/，我們就可以進(jìn)入云建站。

1.云建站的網(wǎng)站要求

那是不是所有PC網(wǎng)站都能進(jìn)行云建站呢？也不盡然，只有采用規(guī)范的DIV+CSS結(jié)構(gòu)編寫(xiě)代碼的站點(diǎn)，云建站才可以完美適配。如果你原來(lái)的PC站是Flash搭建的，目前云建站是無(wú)能為力的。

2.云建站的瀏覽器要求

因?yàn)樵平ㄕ臼褂昧俗钚碌腍TML5技術(shù)，我們?cè)谠平ㄕ竞笈_(tái)操作時(shí)需要使用Chrome或Safari瀏覽器。如使用IE瀏覽器，有些功能將無(wú)法使用。

3.云建站的賬號(hào)

如果已經(jīng)有CNZZ賬號(hào)，那我們可以直接登錄云建站：http://zhan.#/，如果還沒(méi)有賬號(hào)，需要進(jìn)入網(wǎng)站先注冊(cè)賬號(hào)。

操作步驟

1.添加站點(diǎn)

登錄進(jìn)入云建站管理平臺(tái)后，點(diǎn)擊右上角“+添加站點(diǎn)”按鈕，輸入需要適配的PC網(wǎng)站域名或網(wǎng)站首頁(yè)地址（注意區(qū)分是否帶www，如www.gljy.com.cn）后點(diǎn)擊“開(kāi)始適配”。如果訪問(wèn)網(wǎng)址會(huì)自動(dòng)跳轉(zhuǎn)到二級(jí)目錄（比如www.gljy.com.cn/web），那么云建站會(huì)自動(dòng)添加此頁(yè)面匹配首頁(yè)規(guī)則，無(wú)需人工設(shè)置。

2.適配設(shè)置

云建站后臺(tái)主要分成6個(gè)部分，從上到下、從左到右依次為：

（1）頁(yè)面管理區(qū)：添加、刪除需要適配的頁(yè)面，如首頁(yè)、列表頁(yè)、正文頁(yè)、專(zhuān)題頁(yè)等。

（2）組件工具區(qū)：組件是構(gòu)建移動(dòng)頁(yè)面的功能元素，如標(biāo)題、幻燈圖片、圖文列表、圖集等。

（3）全局設(shè)置：即頁(yè)面的風(fēng)格設(shè)置，包括LOGO、主色調(diào)、導(dǎo)航及頁(yè)面頭部、底部等。

（4）內(nèi)容編輯區(qū)：用于編輯在手機(jī)端網(wǎng)站顯示的內(nèi)容，可從左右兩側(cè)通過(guò)拖拽的方式，生成移動(dòng)頁(yè)面。

（5）組件樣式自定義：針對(duì)不同的組件功能，可以自定義不同的樣式，如更改標(biāo)題字體大小、顏色、展示方式（如：圖集2排展示、3排展示或瀑布流展示）。

（6）PC數(shù)據(jù)提取區(qū)：讀取PC頁(yè)面內(nèi)容，為移動(dòng)適配的數(shù)據(jù)源。

添加站點(diǎn)后默認(rèn)配置的頁(yè)面是首頁(yè)，在手機(jī)端顯示的內(nèi)容肯定不能像在電腦端顯示的那么多，我們可以將最需要在手機(jī)上顯示的內(nèi)容對(duì)應(yīng)的組件（如標(biāo)題、幻燈圖片、圖文列表、圖集等）拖動(dòng)到內(nèi)容編輯區(qū)，接著在PC數(shù)據(jù)提取區(qū)選擇需要顯示的內(nèi)容拖放到內(nèi)容編輯區(qū)的對(duì)應(yīng)組件上即可，所見(jiàn)即所得，非常方便。

注意：所選的PC數(shù)據(jù)提取區(qū)內(nèi)容與組件類(lèi)型要相匹配，否則會(huì)出現(xiàn)錯(cuò)誤提示。這時(shí)我們可以點(diǎn)擊“查看匹配規(guī)則”，了解匹配規(guī)則后再進(jìn)行匹配。

首頁(yè)適配完成后，我們還需要將首頁(yè)上鏈接的一些網(wǎng)頁(yè)（比如列表頁(yè)、內(nèi)容頁(yè)等）也進(jìn)行適配，不然用戶(hù)在手機(jī)端訪問(wèn)首頁(yè)正常，點(diǎn)擊其中的鏈接后就會(huì)回到電腦版網(wǎng)站了。

在頁(yè)面管理區(qū)點(diǎn)擊“+”按鈕，添加其他需要適配的頁(yè)面，輸入頁(yè)面名稱(chēng)及網(wǎng)址。如果還有其他相同結(jié)構(gòu)的頁(yè)面，可以將此頁(yè)面作為頁(yè)面模板（如圖2）。

分析了電腦版網(wǎng)站的源碼結(jié)構(gòu)，我分別適配了首頁(yè)、列表頁(yè)、正文頁(yè)三個(gè)頁(yè)面，大家可根據(jù)網(wǎng)站的具體情況進(jìn)行適配。

手機(jī)端頁(yè)面都適配好后，還要在全局設(shè)置區(qū)點(diǎn)擊“全局設(shè)置”按鈕對(duì)觸屏版網(wǎng)站的頭尾部及導(dǎo)航進(jìn)行適當(dāng)?shù)男薷摹?/p>

3.部署發(fā)布

全局設(shè)置完成后，點(diǎn)擊右上角“保存”，然后在云建站后臺(tái)首頁(yè)點(diǎn)擊所建站點(diǎn)右側(cè)的“獲取代碼”鏈接。

將獲取到的形如“”的適配代碼部署在PC版網(wǎng)站源碼頁(yè)面中。

代碼部署后，在云建站后臺(tái)中點(diǎn)擊“立即發(fā)布”就完成了網(wǎng)站的手機(jī)版開(kāi)發(fā)了。

圖4 掃碼看界面效果

打開(kāi)手機(jī)瀏覽器，輸入網(wǎng)址 ：www.gljy.com.cn，網(wǎng) 站會(huì)自動(dòng)判斷你的訪問(wèn)設(shè)備，如果是手機(jī)或平板訪問(wèn)，就會(huì)自動(dòng)轉(zhuǎn)到手機(jī)版網(wǎng)站。圖3是我對(duì)廣陵教育在線的首頁(yè)、列表頁(yè)、正文頁(yè)的適配效果，是不是有一種“高大上”的感覺(jué)？

云建站的擴(kuò)展功能

1.手機(jī)App客戶(hù)端

云建站除了能讓我們輕松擁有觸屏版網(wǎng)站外，還可以免費(fèi)生成手機(jī)App客戶(hù)端。

在云建站后臺(tái)操作欄中點(diǎn)擊“App”，輸入應(yīng)用名稱(chēng)，選擇App的應(yīng)用圖標(biāo)及應(yīng)用啟動(dòng)圖，確定應(yīng)用打開(kāi)時(shí)的入口頁(yè)面（還可以增加移動(dòng)統(tǒng)計(jì)功能），點(diǎn)擊“生成Android APP”按鈕，就能為所建站點(diǎn)生成專(zhuān)用的手機(jī)App應(yīng)用程序，是不是很簡(jiǎn)單？

2.掃碼看功能

我們?cè)陔娔X上逛淘寶時(shí)，經(jīng)?？吹蕉S碼提示，掃碼就能在手機(jī)上瀏覽對(duì)應(yīng)的手機(jī)網(wǎng)頁(yè)。我們也可以開(kāi)啟電腦頁(yè)面“掃碼看”功能，點(diǎn)擊“掃碼看”就可以自動(dòng)為PC頁(yè)面生成二維碼。開(kāi)啟后用戶(hù)訪問(wèn)電腦版網(wǎng)站時(shí)，就會(huì)有如圖4所示的效果，只需掃一掃，移動(dòng)閱讀和分享更加方便。

云建站的使用心得

云建站，讓我們無(wú)需更改網(wǎng)址域名，只需簡(jiǎn)單拖拽，無(wú)需編程，只需在PC站源碼中部署一行JS代碼，真正零門(mén)檻，輕松開(kāi)啟移動(dòng)站點(diǎn)。還有豐富的組件，支持樣式自定義，可以滿足不同類(lèi)型網(wǎng)站的建站需求。最關(guān)鍵的是，不需要為移動(dòng)版單獨(dú)搭建前臺(tái)，單獨(dú)進(jìn)行后臺(tái)管理，而是與PC直接同步更新，節(jié)省了網(wǎng)站管理人員大量的時(shí)間和精力。

添加站點(diǎn)、適配設(shè)置、部署發(fā)布，就這么簡(jiǎn)單，三步實(shí)現(xiàn)PC向移動(dòng)的轉(zhuǎn)化。