零費(fèi)用搭建網(wǎng)站觸屏版

■

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

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

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

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

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

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

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

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

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

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

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

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

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

4.App客戶端

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

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

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

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

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

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

2.云建站的瀏覽器要求

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

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

如果已經(jīng)有CNZZ賬號(hào)，那我們可以直接登錄云建站：http://zhan.#/，如果還沒有賬號(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)站首頁地址（注意區(qū)分是否帶www，如www.gljy.com.cn）后點(diǎn)擊“開始適配”。如果訪問網(wǎng)址會(huì)自動(dòng)跳轉(zhuǎn)到二級(jí)目錄（比如www.gljy.com.cn/web），那么云建站會(huì)自動(dòng)添加此頁面匹配首頁規(guī)則，無需人工設(shè)置。

2.適配設(shè)置

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

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

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

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

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

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

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

添加站點(diǎn)后默認(rèn)配置的頁面是首頁，在手機(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)組件上即可，所見即所得，非常方便。

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

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

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

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

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

3.部署發(fā)布

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

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

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

圖4 掃碼看界面效果

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

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

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

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

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

2.掃碼看功能

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

云建站的使用心得

云建站，讓我們無需更改網(wǎng)址域名，只需簡(jiǎn)單拖拽，無需編程，只需在PC站源碼中部署一行JS代碼，真正零門檻，輕松開啟移動(dòng)站點(diǎn)。還有豐富的組件，支持樣式自定義，可以滿足不同類型網(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)化。