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