編者按：隨著網(wǎng)絡(luò)技術(shù)的快速發(fā)展和智能手機(jī)的普及，互聯(lián)網(wǎng)和通訊網(wǎng)絡(luò)之間的聯(lián)系密不可分。智能手機(jī)既是一個(gè)通信工具，更是一個(gè)網(wǎng)絡(luò)工具，利用智能手機(jī)可以快速的上網(wǎng)瀏覽查詢相關(guān)內(nèi)容。因此，開發(fā)適合手機(jī)瀏覽的網(wǎng)站建設(shè)十分必要。本文以學(xué)校網(wǎng)站為例，簡述手機(jī)移動(dòng)版網(wǎng)站的開發(fā)方式和開發(fā)技術(shù)。

筆者在日常工作中發(fā)現(xiàn)，在PC版網(wǎng)站基礎(chǔ)上，通過HTML5+CSS+Jav aScript技術(shù)開發(fā)移動(dòng)手機(jī)版網(wǎng)站，既方便又實(shí)用，而且還能共享PC網(wǎng)站的數(shù)據(jù)與信息。

手機(jī)版網(wǎng)站的特點(diǎn)

手機(jī)網(wǎng)站就是手機(jī)能訪問的網(wǎng)站，它是面向手機(jī)用戶為方便手機(jī)訪問而建立的網(wǎng)站，也被稱為WAP網(wǎng)站。手機(jī)網(wǎng)站的開發(fā)不同于PC網(wǎng)站，需要考慮以下幾個(gè)因素：一是屏幕大小問題，由于目前手機(jī)型號(hào)和屏幕尺寸不同，以及有豎屏、橫屏閱讀兩種方式，這就對(duì)網(wǎng)頁排版、美工要求較高,既要適應(yīng)窄屏閱讀又要適應(yīng)寬屏閱讀，且顯示界面小，輸入輸出不那么方便。因此，要求開發(fā)的網(wǎng)站要操作簡化、內(nèi)容簡潔和應(yīng)用簡單。另外，手機(jī)網(wǎng)站的用戶群相對(duì)比較特定，都是手機(jī)用戶，而要做到移動(dòng)訪問手機(jī)網(wǎng)站，需要有通信信號(hào)WLAN或4G信號(hào)，在4G或3G模式下，還要考慮到流量和上網(wǎng)速度的影響。

手機(jī)版網(wǎng)站開發(fā)方式

手機(jī)版網(wǎng)站的開發(fā)與PC版類似，需要考慮操作系統(tǒng)、數(shù)據(jù)庫、編程語言等問題，還需要考慮網(wǎng)站是獨(dú)立開發(fā)還是與PC版網(wǎng)站兼容設(shè)計(jì)。因此，手機(jī)版網(wǎng)站開發(fā)一般有以下幾種模式。

1.網(wǎng)頁模式獨(dú)立開發(fā)手機(jī)網(wǎng)站

這種方式就是完全獨(dú)立開發(fā)設(shè)計(jì)手機(jī)版網(wǎng)站，將手機(jī)網(wǎng)站和電腦網(wǎng)站是區(qū)分開的，需要獨(dú)立的后臺(tái)服務(wù)器和數(shù)據(jù)庫，仍然用HTML技術(shù)開發(fā)。這種模式可以將手機(jī)網(wǎng)站和電腦版設(shè)計(jì)不同的功能欄目和信息，但缺點(diǎn)是手機(jī)網(wǎng)站里面的資料信息也需要單獨(dú)通過手機(jī)網(wǎng)站后臺(tái)添加管理，對(duì)同一內(nèi)容需添加兩次，人力管理與維護(hù)成本比較高，開發(fā)成本也高。

2.APP模式開發(fā)手機(jī)網(wǎng)站

APP是針對(duì)手機(jī)開發(fā)的軟件。隨著手機(jī)智能化程度的提高，針對(duì)手機(jī)開發(fā)的APP技術(shù)也日趨成熟，因此有些手機(jī)網(wǎng)站是通過APP模式開發(fā)設(shè)計(jì)。但APP開發(fā)的技術(shù)要求和成本高，開發(fā)周期長，而且APP一般側(cè)重于即時(shí)性強(qiáng)的新聞信息推送。如果全站采用APP開發(fā)設(shè)計(jì)還是比較復(fù)雜的，用APP開發(fā)的手機(jī)網(wǎng)站一般與PC網(wǎng)站的數(shù)據(jù)與信息共享也比較困難，仍然相當(dāng)于獨(dú)立的兩個(gè)網(wǎng)站。

3.網(wǎng)頁模式兼容PC網(wǎng)站欄目數(shù)據(jù)搭建手機(jī)網(wǎng)站

這種方法是在原有PC網(wǎng)站的基礎(chǔ)上，只要開發(fā)一個(gè)針對(duì)手機(jī)終端顯示信息的頁面程序，顯示的內(nèi)容是調(diào)用電腦PC網(wǎng)站數(shù)據(jù)信息，共用一個(gè)管理后臺(tái)。

好處就是在電腦網(wǎng)站上添加了信息，在手機(jī)端就會(huì)即時(shí)的完整呈現(xiàn)，不需要添加兩次。這樣的網(wǎng)站可以自動(dòng)適應(yīng)電腦和手機(jī)移動(dòng)端訪問，也就是常說的HTML5網(wǎng)站開發(fā)。

HTML5是萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用超文本標(biāo)記語言（第五次重大修改）。HTML5融入了許多新穎的標(biāo)簽屬性，淘汰了過時(shí)或冗余的屬性。它與CSS3樣式結(jié)合，使得網(wǎng)站的頁面更加美觀、炫麗。此外，它與JavaScript結(jié)合運(yùn)用，還可以使網(wǎng)頁界面更具動(dòng)感效果。而且HTML5還有一大特點(diǎn)就是它可以通過標(biāo)簽來控制網(wǎng)站頁面的大小，使得頁面能根據(jù)各類型智能手機(jī)的屏幕大小自動(dòng)調(diào)節(jié)來顯示信息。HTML5網(wǎng)站支持電腦PC端和手機(jī)端的訪問，大大方便了網(wǎng)站數(shù)據(jù)的維護(hù)。

具體做法是同一個(gè)前臺(tái)頁面，做兩套不同的css樣式文件，并且自動(dòng)判斷，當(dāng)手機(jī)訪問時(shí)，則自動(dòng)調(diào)用手機(jī)版的css樣式文件。這樣的網(wǎng)站不存在同一條信息兩個(gè)網(wǎng)址上顯示的問題，也不存在信息數(shù)據(jù)需要添加兩次的情況。這是現(xiàn)在比較流行的一種搭建手機(jī)網(wǎng)站和電腦網(wǎng)站的方式，能提高管理效益與數(shù)據(jù)的一致性。

筆者單位就是用這種模式開發(fā)的，采用了HTML5+CSS3的界面布局方式，采用相同的數(shù)據(jù)庫連接文件conn.asp。同時(shí)，適當(dāng)?shù)奶砑恿薐S腳本來調(diào)用手機(jī)的本地用戶數(shù)據(jù)，來提高網(wǎng)頁的加載速度。

手機(jī)版網(wǎng)站開發(fā)技巧

由于手機(jī)本身結(jié)構(gòu)和配置的特點(diǎn)，在開發(fā)手機(jī)網(wǎng)站是必須考慮以下幾個(gè)問題。

1.手機(jī)網(wǎng)站不同于電腦版網(wǎng)站，由于手機(jī)屏幕的局限性，展現(xiàn)的內(nèi)容不多，所以欄目一定要精簡，突出重要內(nèi)容，特別是在導(dǎo)航的布局上，不可像電腦端網(wǎng)站那樣分類很細(xì)，則會(huì)增加網(wǎng)站負(fù)擔(dān)，也會(huì)增加用戶瀏覽負(fù)擔(dān)，看起來無序而雜亂。

為了瀏覽方便，可以通過設(shè)置子欄目，點(diǎn)擊一級(jí)欄目方式進(jìn)入子欄目。筆者單位根據(jù)網(wǎng)站內(nèi)容選取了7個(gè)頻道內(nèi)容顯示在手機(jī)首頁的主欄目上，主要有學(xué)校簡介、校務(wù)管理、家?；?dòng)、通知公告、新聞中心、辦學(xué)成果、有情鏈接等，同時(shí)在首頁設(shè)置時(shí)限性與工作性強(qiáng)，能更好宣傳學(xué)校工作的三個(gè)欄目通知公告、新聞動(dòng)態(tài)、辦學(xué)成果，以頁轉(zhuǎn)換方式顯示在手機(jī)版網(wǎng)站首頁。

同時(shí)，考慮到信息檢索的便捷性，首頁還設(shè)置了搜索對(duì)話框，為了使手機(jī)網(wǎng)站活潑靈動(dòng)，與PC網(wǎng)站一樣，在首頁加入Flash的動(dòng)畫橫幅。如圖1所示。

2.手機(jī)網(wǎng)站的實(shí)現(xiàn)，比較簡捷的做法是建立一個(gè)文件夾，如mobile，開發(fā)適合于手機(jī)顯示和互動(dòng)的ASP程序代碼，包括樣式文件CSS等，并將開發(fā)的ASP程序代碼文件統(tǒng)一放在此文件夾，然后通過于不同的訪問路徑來訪問手機(jī)網(wǎng)站。在瀏覽器訪問首頁，加入一條檢測(cè)和判語句，訪問時(shí)對(duì)終端設(shè)備是手機(jī)終端與電腦終端進(jìn)行識(shí)別判斷，如果是移動(dòng)端則直接跳轉(zhuǎn)到手機(jī)網(wǎng)站地址，不需要用戶再主動(dòng)輸入手機(jī)網(wǎng)站地址去訪問，如果是電腦終端，則跳轉(zhuǎn)到PC網(wǎng)站地址。如下代碼：

圖2 首頁APP安裝界面

3.制作發(fā)布一個(gè)二維碼。提高手機(jī)網(wǎng)站的訪問發(fā)布效率。

智能手機(jī)有一個(gè)較大的優(yōu)點(diǎn)，即能實(shí)現(xiàn)圖像識(shí)別，因此，為了方便手機(jī)快捷瀏覽，可以制作一個(gè)能打開手機(jī)瀏覽首頁界面的二維碼，一方面可放單獨(dú)將二維碼在朋友圈等渠道進(jìn)行發(fā)布推廣，也可以放在PC網(wǎng)站首頁，進(jìn)行掃碼打開。

4.制作一個(gè)簡單的APP，整合手機(jī)網(wǎng)站的發(fā)布與共享。

雖然APP開發(fā)的技術(shù)要求比較高，但僅開發(fā)一個(gè)頁面的快捷鏈接APP還是比較可行的和方便的。因?yàn)橥ㄟ^一個(gè)簡單的APP，可更方便于發(fā)布與共享，同時(shí)通過安裝APP，在手機(jī)上可以快速進(jìn)入手機(jī)站的各個(gè)頻道模塊。圖2是筆者單位開發(fā)的一個(gè)APP程序syzx.apk安裝后界面，這樣通過點(diǎn)擊頁面上的圖標(biāo)，可以快速進(jìn)入并打開相應(yīng)的頁面。

5.手機(jī)版網(wǎng)站如果對(duì)于信息展示發(fā)布比較方便，也可以根據(jù)工作需要開發(fā)相應(yīng)的交互頁面。如果考慮互動(dòng)交互與輸入，則需要考慮登錄安全的問題。