學校手機版網站的開發實踐

編者按：隨著網絡技術的快速發展和智能手機的普及，互聯網和通訊網絡之間的聯系密不可分。智能手機既是一個通信工具，更是一個網絡工具，利用智能手機可以快速的上網瀏覽查詢相關內容。因此，開發適合手機瀏覽的網站建設十分必要。本文以學校網站為例，簡述手機移動版網站的開發方式和開發技術。

筆者在日常工作中發現，在PC版網站基礎上，通過HTML5+CSS+Jav aScript技術開發移動手機版網站，既方便又實用，而且還能共享PC網站的數據與信息。

手機版網站的特點

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

手機版網站開發方式

手機版網站的開發與PC版類似，需要考慮操作系統、數據庫、編程語言等問題，還需要考慮網站是獨立開發還是與PC版網站兼容設計。因此，手機版網站開發一般有以下幾種模式。

1.網頁模式獨立開發手機網站

這種方式就是完全獨立開發設計手機版網站，將手機網站和電腦網站是區分開的，需要獨立的后臺服務器和數據庫，仍然用HTML技術開發。這種模式可以將手機網站和電腦版設計不同的功能欄目和信息，但缺點是手機網站里面的資料信息也需要單獨通過手機網站后臺添加管理，對同一內容需添加兩次，人力管理與維護成本比較高，開發成本也高。

2.APP模式開發手機網站

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

3.網頁模式兼容PC網站欄目數據搭建手機網站

這種方法是在原有PC網站的基礎上，只要開發一個針對手機終端顯示信息的頁面程序，顯示的內容是調用電腦PC網站數據信息，共用一個管理后臺。

好處就是在電腦網站上添加了信息，在手機端就會即時的完整呈現，不需要添加兩次。這樣的網站可以自動適應電腦和手機移動端訪問，也就是常說的HTML5網站開發。

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

具體做法是同一個前臺頁面，做兩套不同的css樣式文件，并且自動判斷，當手機訪問時，則自動調用手機版的css樣式文件。這樣的網站不存在同一條信息兩個網址上顯示的問題，也不存在信息數據需要添加兩次的情況。這是現在比較流行的一種搭建手機網站和電腦網站的方式，能提高管理效益與數據的一致性。

筆者單位就是用這種模式開發的，采用了HTML5+CSS3的界面布局方式，采用相同的數據庫連接文件conn.asp。同時，適當的添加了JS腳本來調用手機的本地用戶數據，來提高網頁的加載速度。

手機版網站開發技巧

由于手機本身結構和配置的特點，在開發手機網站是必須考慮以下幾個問題。

1.手機網站不同于電腦版網站，由于手機屏幕的局限性，展現的內容不多，所以欄目一定要精簡，突出重要內容，特別是在導航的布局上，不可像電腦端網站那樣分類很細，則會增加網站負擔，也會增加用戶瀏覽負擔，看起來無序而雜亂。

為了瀏覽方便，可以通過設置子欄目，點擊一級欄目方式進入子欄目。筆者單位根據網站內容選取了7個頻道內容顯示在手機首頁的主欄目上，主要有學校簡介、校務管理、家校互動、通知公告、新聞中心、辦學成果、有情鏈接等，同時在首頁設置時限性與工作性強，能更好宣傳學校工作的三個欄目通知公告、新聞動態、辦學成果，以頁轉換方式顯示在手機版網站首頁。

同時，考慮到信息檢索的便捷性，首頁還設置了搜索對話框，為了使手機網站活潑靈動，與PC網站一樣，在首頁加入Flash的動畫橫幅。如圖1所示。

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

圖2 首頁APP安裝界面

3.制作發布一個二維碼。提高手機網站的訪問發布效率。

智能手機有一個較大的優點，即能實現圖像識別，因此，為了方便手機快捷瀏覽，可以制作一個能打開手機瀏覽首頁界面的二維碼，一方面可放單獨將二維碼在朋友圈等渠道進行發布推廣，也可以放在PC網站首頁，進行掃碼打開。

4.制作一個簡單的APP，整合手機網站的發布與共享。

雖然APP開發的技術要求比較高，但僅開發一個頁面的快捷鏈接APP還是比較可行的和方便的。因為通過一個簡單的APP，可更方便于發布與共享，同時通過安裝APP，在手機上可以快速進入手機站的各個頻道模塊。圖2是筆者單位開發的一個APP程序syzx.apk安裝后界面，這樣通過點擊頁面上的圖標，可以快速進入并打開相應的頁面。

5.手機版網站如果對于信息展示發布比較方便，也可以根據工作需要開發相應的交互頁面。如果考慮互動交互與輸入，則需要考慮登錄安全的問題。