手機網(wǎng)站建設網(wǎng)站構建方法
日期 : 2019-02-28 15:54:13
伴隨移動(dòng)互聯(lián)網(wǎng)技術(shù)的快速發(fā)展, 各類(lèi)移動(dòng)設備得到廣泛普及, 智能手機用戶(hù)的數量更是迅猛增長(cháng)。在手機網(wǎng)民迅猛增加的情勢之下, 幾乎所有用戶(hù)都希望能通過(guò)手機方便、快捷地訪(fǎng)問(wèn)網(wǎng)站。而傳統網(wǎng)站的界面和風(fēng)格都是針對PC端設計的, 用戶(hù)直接在移動(dòng)設備上面使用, 會(huì )出現諸多問(wèn)題。傳統網(wǎng)站在用戶(hù)體驗上, 不能滿(mǎn)足手機用戶(hù)的需求。
移動(dòng)設備與PC在分辨率和屏幕顯示方向上都有很大的區別, 并且受網(wǎng)絡(luò )和自身處理能力的限制, 當用戶(hù)使用手機瀏覽傳統網(wǎng)站時(shí), 都會(huì )出現頁(yè)面布局混亂、無(wú)用信息過(guò)多等現象, 頁(yè)面效果不盡如人意。主要的問(wèn)題如下:第一, 由于智能手機的屏幕尺寸比PC屏幕小, 用戶(hù)使用智能手機直接訪(fǎng)問(wèn)傳統網(wǎng)站, 往往會(huì )因為屏幕尺寸不足而頁(yè)面變形。即使頁(yè)面不變形, 智能手機上顯示的效果也是PC頁(yè)面的縮小版,過(guò)小的文字、圖片等頁(yè)面元素, 不利于用戶(hù)瀏覽。


第二, 對于用戶(hù)操作比較多的功能性網(wǎng)站, 傳統的PC操作便利, 不會(huì )給用戶(hù)帶來(lái)困擾。如果直接在手機上使用此類(lèi)網(wǎng)站, 縮小的功能按鈕和虛擬鍵盤(pán)給用戶(hù)操作帶來(lái)極大的不便, 用戶(hù)體驗大大降低。第三, PC是通過(guò)有線(xiàn)網(wǎng)絡(luò )來(lái)訪(fǎng)問(wèn)網(wǎng)上資源的, 其技術(shù)已經(jīng)十分成熟, 不會(huì )受流量與速度的限制。為了追求更高的用戶(hù)體驗, 傳統PC頁(yè)面上會(huì )使用大量的網(wǎng)頁(yè)特效, 再加上廣告等信息, 頁(yè)面數據量一般都比較大。而智能手機則通過(guò)無(wú)線(xiàn)網(wǎng)絡(luò )來(lái)訪(fǎng)問(wèn)網(wǎng)上資源, 并且智能手機終端的處理能力遠不如PC, 受到無(wú)線(xiàn)網(wǎng)絡(luò )和智能手機自身處理能力的限制, 使用智能手機直接訪(fǎng)問(wèn)傳統PC網(wǎng)站, 會(huì )出現下載速度慢和產(chǎn)生大量流量資費等問(wèn)題。在網(wǎng)站得到廣泛應用的今天, 考慮到移動(dòng)互聯(lián)網(wǎng)的個(gè)性與特點(diǎn), 如何將傳統PC網(wǎng)站構建為順應移動(dòng)互聯(lián)網(wǎng)發(fā)展趨勢, 適用于各種智能移動(dòng)終端的網(wǎng)站, 成為了大家極為關(guān)注的焦點(diǎn)。
針對以上問(wèn)題, 將傳統PC網(wǎng)站構建為兼容各種智能終端的移動(dòng)版網(wǎng)站已是大勢所趨。目前, 具體的實(shí)現方法主要有以下三種:
針對以上問(wèn)題, 將傳統PC網(wǎng)站構建為兼容各種智能終端的移動(dòng)版網(wǎng)站已是大勢所趨。目前, 具體的實(shí)現方法主要有以下三種:
(一) 頁(yè)面重建
該方法是在原有PC站點(diǎn)的基礎之上, 通過(guò)組織團隊或尋找軟件開(kāi)發(fā)公司, 針對智能移動(dòng)終端的特點(diǎn), 開(kāi)發(fā)移動(dòng)版網(wǎng)站, 形成PC站點(diǎn)+移動(dòng)站點(diǎn)的結構。用戶(hù)瀏覽網(wǎng)站時(shí), 根據自身使用的客戶(hù)端設備類(lèi)型, 來(lái)選擇對應的網(wǎng)站版本。此方法可以根據不同的客戶(hù)端而量身定制滿(mǎn)足客戶(hù)需求的站點(diǎn), 可以最大程度的提高用戶(hù)體驗, 但這種方式存在開(kāi)發(fā)成本和維護成本高等缺點(diǎn)。
(二) 利用百度Site App工具
此方法借助第三方工具百度Site App, 通過(guò)該工具快速將傳統PC網(wǎng)站構建為移動(dòng)版網(wǎng)站。具體實(shí)現過(guò)程如下:
(1) 通過(guò)輸入官方地址http://siteapp.baidu.com, 打開(kāi)在線(xiàn)工具Site App, 并在其中輸入想要構建為手機網(wǎng)站的PC網(wǎng)站地址;
(2) 選擇目標網(wǎng)站的樣式;
(3) 通過(guò)添加或者自動(dòng)抓取等方式, 設置目標網(wǎng)站的導航;
(4) 根據需要, 添加電話(huà)、郵箱、版權等相關(guān)組件;
(5) 下載驗證文件, 上傳至網(wǎng)站根目錄進(jìn)行網(wǎng)站驗證;
(6) 綁定域名, 配置dns即可。
Site App工具對于復雜腳本的處理能力有限, 并且對網(wǎng)站交互功能的轉換效果比較差, 因此它比較適合于構建以文字閱讀為主的網(wǎng)站。
(4) 根據需要, 添加電話(huà)、郵箱、版權等相關(guān)組件;
(5) 下載驗證文件, 上傳至網(wǎng)站根目錄進(jìn)行網(wǎng)站驗證;
(6) 綁定域名, 配置dns即可。
Site App工具對于復雜腳本的處理能力有限, 并且對網(wǎng)站交互功能的轉換效果比較差, 因此它比較適合于構建以文字閱讀為主的網(wǎng)站。
(三) 響應式網(wǎng)站
響應式網(wǎng)站也稱(chēng)之為自適應網(wǎng)站, 它能夠兼容各種客戶(hù)終端。也就是說(shuō), 采用這種方法, 只需開(kāi)發(fā)一個(gè)網(wǎng)站, 便可提供給所有的設備設備使用, 無(wú)需考慮屏幕尺寸不一的問(wèn)題。將PC網(wǎng)站構建為響應式網(wǎng)站, 既要保留其原有的PC端瀏覽效果, 又要使其兼容不同類(lèi)型的智能終端設備, 所以只能在保持原有網(wǎng)站結構的前提下, 通過(guò)新建樣式表來(lái)滿(mǎn)足智能終端的瀏覽需求。具體實(shí)現過(guò)程如下:
(1) 分析網(wǎng)站, 刪減冗余內容。根據移動(dòng)終端設備受網(wǎng)絡(luò )和屏幕尺寸限制的特點(diǎn), 其瀏覽的網(wǎng)頁(yè)應是最精簡(jiǎn)的。這就要求我們對原有PC網(wǎng)站進(jìn)行分析, 舍棄頁(yè)面中起修飾修飾作用, 以及次要的內容, 保留頁(yè)面的核心內容。
(2) 編寫(xiě)適合于移動(dòng)終端顯示的樣式表。精簡(jiǎn)網(wǎng)站的內容之后, 即可編寫(xiě)適合移動(dòng)終端瀏覽的CSS樣式表。編寫(xiě)時(shí)需注意兩個(gè)要點(diǎn):其一, 對于舍棄的內容, 可通過(guò)display:none屬性值對進(jìn)行設置, 將其隱藏掉;其二, 用于布局的div模塊, 寬度都使用百分比進(jìn)行設置, 實(shí)現自適應寬度的流體布局。
(3) 根據客戶(hù)端屏幕尺寸大小, 自動(dòng)應用樣式表。在網(wǎng)頁(yè)頁(yè)頭中的link標簽, 使用CSS3的media query設置功能, 讓頁(yè)面能根據不同設備屏幕尺寸, 自動(dòng)加載對應的樣式表。
響應式網(wǎng)站通過(guò)使用流體布局、媒體查詢(xún)等技術(shù)制作網(wǎng)頁(yè), 使得網(wǎng)頁(yè)能夠自適應不同的終端設備。它是目前構建兼容PC和智能移動(dòng)設備網(wǎng)站的最佳方案, 也是Web設計的趨勢。
(3) 根據客戶(hù)端屏幕尺寸大小, 自動(dòng)應用樣式表。在網(wǎng)頁(yè)頁(yè)頭中的link標簽, 使用CSS3的media query設置功能, 讓頁(yè)面能根據不同設備屏幕尺寸, 自動(dòng)加載對應的樣式表。
響應式網(wǎng)站通過(guò)使用流體布局、媒體查詢(xún)等技術(shù)制作網(wǎng)頁(yè), 使得網(wǎng)頁(yè)能夠自適應不同的終端設備。它是目前構建兼容PC和智能移動(dòng)設備網(wǎng)站的最佳方案, 也是Web設計的趨勢。