零費用搭建網站觸屏版

■

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

既然已經有了電腦版網站，為什么還要再重新建設一個WebApp手機版網站呢？能不能直接將電腦版網站的內容，在手機等移動終端上呈現呢？通過不斷研究學習，我終于找到了解決方法，這就是“云建站”。

圖1 電腦版、WAP標準版、手機觸屏版、App客戶端網站區別

云建站是由CNZZ數據專家（相信很多站長用過CNZZ流量統計）出品的“網站跨屏適配”移動化技術解決方案，我們只需要在PC站中嵌入一段JS代碼，不需要單獨開發手機版網站，即可實現PC向移動端的轉化。

電腦版、標準版、觸屏版及App客戶端的區別

平時我們經常會聽到“電腦版網站”、“WAP版網站”、“觸屏版網站”、“手機App”這幾種說法，那么它們的區別到底在哪兒呢？

1.電腦版網站

電腦版網站是指用戶通過臺式或者筆記本電腦瀏覽器打開的網站，也就是我們平時上網所訪問的網站。

2.標準版網站

標準版網站，也稱手機標準版網站、WAP網站，其特點是界面比較簡潔和簡單（圖片少、文字多），適合使用手機鍵盤操作。

隨著大屏幕智能手機的普及，手機WAP網站正在逐漸退出歷史舞臺，某些大型網站考慮到黑莓等傳統智能手機用戶需求，同時也建立了WAP版手機網站供用戶在“標準版”和“觸屏版”之間自由切換。

3.觸屏版網站

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

4.App客戶端

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

以hao123網站為例，我們來看看它們的區別（如圖1）。

云建站的前期準備

訪問網址http://zhan.cnzz.com/，我們就可以進入云建站。

1.云建站的網站要求

那是不是所有PC網站都能進行云建站呢？也不盡然，只有采用規范的DIV+CSS結構編寫代碼的站點，云建站才可以完美適配。如果你原來的PC站是Flash搭建的，目前云建站是無能為力的。

2.云建站的瀏覽器要求

因為云建站使用了最新的HTML5技術，我們在云建站后臺操作時需要使用Chrome或Safari瀏覽器。如使用IE瀏覽器，有些功能將無法使用。

3.云建站的賬號

如果已經有CNZZ賬號，那我們可以直接登錄云建站：http://zhan.cnzz.com/，如果還沒有賬號，需要進入網站先注冊賬號。

操作步驟

1.添加站點

登錄進入云建站管理平臺后，點擊右上角“+添加站點”按鈕，輸入需要適配的PC網站域名或網站首頁地址（注意區分是否帶www，如www.gljy.com.cn）后點擊“開始適配”。如果訪問網址會自動跳轉到二級目錄（比如www.gljy.com.cn/web），那么云建站會自動添加此頁面匹配首頁規則，無需人工設置。

2.適配設置

云建站后臺主要分成6個部分，從上到下、從左到右依次為：

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

（2）組件工具區：組件是構建移動頁面的功能元素，如標題、幻燈圖片、圖文列表、圖集等。

（3）全局設置：即頁面的風格設置，包括LOGO、主色調、導航及頁面頭部、底部等。

（4）內容編輯區：用于編輯在手機端網站顯示的內容，可從左右兩側通過拖拽的方式，生成移動頁面。

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

（6）PC數據提取區：讀取PC頁面內容，為移動適配的數據源。

添加站點后默認配置的頁面是首頁，在手機端顯示的內容肯定不能像在電腦端顯示的那么多，我們可以將最需要在手機上顯示的內容對應的組件（如標題、幻燈圖片、圖文列表、圖集等）拖動到內容編輯區，接著在PC數據提取區選擇需要顯示的內容拖放到內容編輯區的對應組件上即可，所見即所得，非常方便。

注意：所選的PC數據提取區內容與組件類型要相匹配，否則會出現錯誤提示。這時我們可以點擊“查看匹配規則”，了解匹配規則后再進行匹配。

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

在頁面管理區點擊“+”按鈕，添加其他需要適配的頁面，輸入頁面名稱及網址。如果還有其他相同結構的頁面，可以將此頁面作為頁面模板（如圖2）。

分析了電腦版網站的源碼結構，我分別適配了首頁、列表頁、正文頁三個頁面，大家可根據網站的具體情況進行適配。

手機端頁面都適配好后，還要在全局設置區點擊“全局設置”按鈕對觸屏版網站的頭尾部及導航進行適當的修改。

3.部署發布

全局設置完成后，點擊右上角“保存”，然后在云建站后臺首頁點擊所建站點右側的“獲取代碼”鏈接。

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

代碼部署后，在云建站后臺中點擊“立即發布”就完成了網站的手機版開發了。

圖4 掃碼看界面效果

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

云建站的擴展功能

1.手機App客戶端

云建站除了能讓我們輕松擁有觸屏版網站外，還可以免費生成手機App客戶端。

在云建站后臺操作欄中點擊“App”，輸入應用名稱，選擇App的應用圖標及應用啟動圖，確定應用打開時的入口頁面（還可以增加移動統計功能），點擊“生成Android APP”按鈕，就能為所建站點生成專用的手機App應用程序，是不是很簡單？

2.掃碼看功能

我們在電腦上逛淘寶時，經常看到二維碼提示，掃碼就能在手機上瀏覽對應的手機網頁。我們也可以開啟電腦頁面“掃碼看”功能，點擊“掃碼看”就可以自動為PC頁面生成二維碼。開啟后用戶訪問電腦版網站時，就會有如圖4所示的效果，只需掃一掃，移動閱讀和分享更加方便。

云建站的使用心得

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

添加站點、適配設置、部署發布，就這么簡單，三步實現PC向移動的轉化。