基于html5和css3.0的手機網(wǎng)站的設計與實現(xiàn)

I術(shù)設計和實現(xiàn)手機版網(wǎng)站，該網(wǎng)站具有界面友好、采用的網(wǎng)頁設計和關鍵技術(shù)也可以為其他手機網(wǎng)站的設計和開發(fā)提供參考和借ⅡWiththepopularofthesmastudyisbasedonwebsitewhichhasalreadybeenfoundedhavingmanyproblems,sufriendlyinterface,clearfunction,supportcross-platformandcross-mediabrocollegewebsite.ThewebpagedesignandthekeytechnologywhichtheresearchadoptedcanalsoprovideareferenceforothKeywords:HTML5;CSS3.0;JavaScript1目錄 1 21.1功能需求分析 21.2環(huán)境需求分析 31.3用戶界面需求分析 4 52.1網(wǎng)站首頁的設計 62.2網(wǎng)站欄目頁的設計 62.3網(wǎng)站內(nèi)容頁的設計 7 83.1網(wǎng)站主要布局和文件頭代碼的實現(xiàn) 83.2CSS3.0實現(xiàn)頁面的主要布局和匹配屏幕的大小 3.3JavaScript實現(xiàn)頁面的交互和檢測不同的設備 4.1網(wǎng)站的測試 4.2網(wǎng)站的維護 引言動學習帶來了方便，但是傳統(tǒng)的網(wǎng)站無法適應手機屏2第1章需求分析ZZ聊城大學傳媒技術(shù)學院內(nèi)傳媒鼓術(shù)學院***一4πm*#果m￥v=k*課#,,EQ\*jc3\*hps11\o\al(\s\up4(?),y)出**m* — 西830全保加光教術(shù)研雙口的*￥的*工作程性不位發(fā)1作=mI性 一 1131.2環(huán)境需求分析根據(jù)筆者的專業(yè)開設和調(diào)試的需要，本設計基于windows平臺，采用了Adobe服務器，考慮到安卓手機的用戶量，決定采用Android4.1版本的手機并且用搜狗瀏覽器進行測試。由于考慮到網(wǎng)站需要聯(lián)網(wǎng)測試，在沒有足夠多的域名和IP的情況下，決定采用局域網(wǎng)連接的方式，將主機和手機放置在同一局域網(wǎng)下，用手機連接主機，這樣既減少了成本，并且加快了連接的速度。大=Ⅲjspic本地文件7584網(wǎng)站首頁。Z聊城大學傳媒技術(shù)學院5Y本科教學教學工作招生工作網(wǎng)絡資源我院領導到北京電視臺調(diào)研考察老…我院集體和個人獲學校工會表彰新奧特(北京)視頻技術(shù)公司來傳媒技術(shù)5ZZ老…瀏覽70次瀏覽70次2014-04-20新奧特(北京)視頻技術(shù)公司來傳媒技術(shù)瀏覽70次2014-04-20數(shù)字媒體藝術(shù)系進行實訓答辯瀏覽70次2014-04-20我院學生作品《伶魂》獲省大學生電影節(jié)紀錄…瀏覽70次2014-04-20圖5網(wǎng)站首頁截圖2第2章網(wǎng)站設計根據(jù)前面對網(wǎng)站需求的分析，和用戶瀏覽的需要，6圖8所示)。傳媒技術(shù)學院傳媒技術(shù)學院學院概況科學研究本科教學學風建設師資隊伍研究生培養(yǎng)學生工作聯(lián)系我們黨建工作科學研究招生就業(yè)服務社會學院概況圖9欄目導航設計7網(wǎng)站的欄目頁主要用來顯示某一欄目的主要內(nèi)容，設計主要包括欄目導航設計、內(nèi)容列表設計、返回頂部設計三個部分。(如圖9、圖10、圖11所示)我院集體和個人獲學校工會表彰瀏覽70次2014-04-20新奧特(北京)視頻技術(shù)公司來傳媒技術(shù)學院…瀏覽70次2014-04-20數(shù)字媒體藝術(shù)系進行實訓答辯瀏覽70次2014-04-20我院學生作品《伶魂》獲省大學生電影節(jié)瀏覽70次2014-04-20點擊查看更多點擊查看更多2.3網(wǎng)站內(nèi)容頁的設計網(wǎng)頁的內(nèi)容頁主要是用來顯示學院的簡介和重要的通知，設計主要包括欄目導航設計、返回頂部設計、內(nèi)容顯示設計三個部分(如圖9,圖11,圖12)。8我院領導到北京電視臺調(diào)研考察2月5日，我院院長張景生教授和黨總支書記李煥芹教授與我校黨委宣傳部部長喬丙武一行到北京電視臺考察，并看望了我院在北京臺掛職的教師高國元。北京電視臺副臺長、副總編輯艾冬云、新聞節(jié)目中心主任張慶、專欄部主任黃暗等接見了聊城大學一行，并進行了深入的座談。喬丙武感謝北京電視臺在促進高校與新聞單位從業(yè)人員互聘工作中所做出的努力，并對北京衛(wèi)視在弘揚社會主義核心價值觀、探索電視節(jié)目制播模式等方面(1)首頁的主要布局HTML5標簽如下：9<li><a></a><span><em></em><<li><a></a><span><em></em><li><a></a><span><em></em> <li><a></a><span><em></em><li><a></a><span><em></em><li><a></a><span><em></em><li><a></a><span><em></em><li><a></a><span><em></em><li><a></a><span><em></em>(2)由于代碼的重用性，欄目頁和內(nèi)容頁中新增使用的HTML5標簽為：為了實現(xiàn)在移動設備的顯示，需要在文件頭里加上以下標簽，使頁面匹配設備的寬度，更好的讓頁面顯示：content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.2CSS3.0實現(xiàn)頁面的主要布局和匹配屏幕的大小 對于手機網(wǎng)站的布局，CSS大多采用百分比的布局，并且內(nèi)容大多居中顯示，由于篇幅的原因，展示一些主要標簽的布局：body{font-family:MicrosoftYaHei,Arial,Helvetica,sans-seriwidth:expression((document.documentElement.clientWidthlldocumentntWidth)>960?"960px"}}header,nav,footer,section,a)}}}text-decoration:und} expression(document.documentElement.clientWidthlldocument由于不用的設備屏幕大小不同，所以需要不同的布局，用以下代碼來識別屏幕的寬度，對于不同寬度的設備，采用不同的CSS布局：@mediascreenand(min-width:480p}}@mediascreenand(min-width:640p}}3.3JavaScript實現(xiàn)頁面的交互和檢測不同的設備3.3.1JavaScript實現(xiàn)頁面的交互由于jQuery庫的功能強大并且好多自帶的函數(shù)使用起來十分方便，所以決定采用調(diào)用jQuery的方式實現(xiàn)網(wǎng)頁交互部分的制作，調(diào)用jQuery的JavaScript部分代碼如下：$('body,html').animat{}3.3.2JavaScript實現(xiàn)檢測不同的設備由于許多同學還會使用電腦瀏覽學院的網(wǎng)站，本設計采取了兼容的方式，保留了原學院網(wǎng)站，通過使用JavaScript和正則表達式來進行設備匹配，從而決定用戶是否跳轉(zhuǎn)到手機版網(wǎng)站。設備匹配的JavaScript代碼如下：if((navigator.userAgent.match(/(iPhoneliPodlAndroidliosliOSlWebOSISymbianlWindowsPhonelPhone)location.replace("phone/in第4章網(wǎng)站的測試與維護4.1網(wǎng)站的測試本設計采用IS服務器和局域網(wǎng)進行測試，需將站點文件夾復制到根目錄下，然后設置IP地址為全部未分配，為了保證手機的連接到網(wǎng)站，需要把防火墻關閉。(設置如圖12、圖13所示)(設置如圖12、圖13所示)作為“mashengqiang”連接綁定?立即啟動網(wǎng)站(M)…