【正文】 應(yīng)用 超文本標(biāo)記語(yǔ)言 的重大修改， 基于 HTML5 開(kāi)發(fā)的網(wǎng)頁(yè) APP 擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度 ，而 即層疊樣式表， 在網(wǎng)頁(yè)制作時(shí)采用層疊樣式表技術(shù)，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制，并且 能夠匹配不同的設(shè)備，實(shí)現(xiàn)跨平臺(tái)的瀏覽。 JQuery。 。 本研究所采用的 網(wǎng)頁(yè)設(shè)計(jì) 和關(guān)鍵技術(shù)也可以為其他 手機(jī)網(wǎng)站 的 設(shè)計(jì)和開(kāi)發(fā) 提供參考和借鑒。 學(xué)位論文作者簽名： 日期 指 導(dǎo) 教 師 簽 名： 日期 聊城大學(xué)本科畢業(yè)論文（設(shè)計(jì)） I 摘 要 隨著智能手機(jī)的普及，越來(lái)越多同學(xué)使用手機(jī)上網(wǎng)。對(duì)本文的研究做出重要貢獻(xiàn)的個(gè)人和集體，均已在文中以明確方式標(biāo)明。 本科生畢業(yè)論文（設(shè)計(jì)） 題 目： 基于 HTML5 和 的 手機(jī)網(wǎng)站的 設(shè)計(jì)與實(shí)現(xiàn) 專業(yè)代碼： 040104 作者姓名： 馬升強(qiáng) 學(xué) 號(hào)： 2020204074 單 位： 傳媒技術(shù)學(xué)院 指導(dǎo)教師： 于連民 2020 年 5 月 1 日 原創(chuàng)性聲明 本人鄭重聲明：所提交的學(xué)位論文是本人在導(dǎo)師指導(dǎo)下，獨(dú)立進(jìn)行研究取得的成果。除文中已經(jīng)注明引用的內(nèi)容外，論文中不含其他人已經(jīng)發(fā)表或撰寫(xiě)過(guò)的研究成果，也不包含為獲得聊城大學(xué)或其他教育機(jī)構(gòu)的學(xué)位證書(shū)而使用過(guò)的材料。本人承擔(dān)本聲明的相應(yīng)責(zé)任。本研究基于已有的學(xué)院網(wǎng)站在手機(jī)上顯示會(huì)出現(xiàn)字跡小，顯示不全的問(wèn)題，利用 HTML5 和 等技術(shù)設(shè)計(jì)和實(shí)現(xiàn)手機(jī)版網(wǎng)站，該網(wǎng)站具有 界面友好、功能清晰、支持跨平臺(tái)、跨媒體瀏覽等特點(diǎn) ，較好的滿足了同學(xué)使用手機(jī)瀏覽學(xué)院網(wǎng)站信息的需求。 關(guān)鍵詞： HTML5； ； JavaScript； JQuery； 網(wǎng)頁(yè)設(shè)計(jì) 聊城大學(xué)本科畢業(yè)論文（設(shè)計(jì)） II Abstract With the popular of the smartphone, more and more students use it online. This study is based on website which has already been founded having many problems,such as fontsize, content show and so on. I will use HTML5 and technologies to design and make website which can be presented perfectly in the smartphone. It has a friendly interface, clear function, support crossplatform and crossmedia browsing, better meet the actual demand of using smartphone to skim the message about our college website. The web page design and the key technology which the research adopted can also provide a reference for other website design and exploitation. Key words: HTML5。JavaScript。 web page design 聊城大學(xué)本科畢業(yè)論文（設(shè)計(jì)） 1 目錄 引言 .......................................... 1 第 1 章 需求分析 .................................. 2 功能需求分析 .................................................2 環(huán)境需求分析 ..................................................3 用戶界面需求分析 ..............................................4 第 2 章 網(wǎng)站設(shè)計(jì) ................................ 5 網(wǎng)站首頁(yè)的設(shè)計(jì) ................................................6 網(wǎng)站欄目頁(yè)的設(shè)計(jì) ..............................................6 網(wǎng)站內(nèi)容頁(yè)的設(shè)計(jì) ..............................................7 第 3 章 網(wǎng)站主要頁(yè)面的設(shè)計(jì)開(kāi)發(fā)及關(guān)鍵技術(shù) .......... 8 網(wǎng)站主要布局和文件頭代碼的實(shí)現(xiàn) ................................8 實(shí)現(xiàn)頁(yè)面的主要布局和匹配屏幕的大小 .....................10 實(shí)現(xiàn)頁(yè)面的交互和檢測(cè)不同的設(shè)備 .....................13 第 4 章 網(wǎng)站的測(cè)試與維護(hù) ........................ 14 網(wǎng)站的測(cè)試 ...................................................14 網(wǎng)站的維護(hù) ...................................................15 結(jié)束語(yǔ) ....................................... 16 參考文獻(xiàn) ..................................... 17 致謝 .......................................... 1 聊城大學(xué)本科畢業(yè)論文（設(shè)計(jì)） 1 基于 HTML5 和 的 手機(jī)網(wǎng)站的 設(shè)計(jì)與實(shí)現(xiàn) 引言 隨著智能手機(jī)的發(fā)展，幾乎所有的學(xué)生都配備了智能手機(jī)，這給學(xué)生開(kāi)展移動(dòng)學(xué)習(xí)帶來(lái)了方便，但是傳統(tǒng)的網(wǎng)站無(wú)法適應(yīng)手機(jī)屏幕大小的要求，學(xué)生在瀏覽網(wǎng)頁(yè)時(shí)會(huì)出現(xiàn)網(wǎng)頁(yè)字跡太小，網(wǎng)站內(nèi)容排版混亂等等問(wèn)題，給學(xué)生的學(xué)習(xí)帶來(lái)了一定的困擾 。 互聯(lián)網(wǎng)的發(fā)展，使 HTML5 和 不僅僅是兩項(xiàng)新的 Web技術(shù)標(biāo)準(zhǔn)，更代表了下一代 HTML 和 CSS 技術(shù)，未來(lái)的發(fā)展前景已經(jīng)可以預(yù)見(jiàn)， HTML5 必將被越來(lái)越多的 Web 開(kāi) 發(fā)人員所使用，成為 web 前端開(kāi)發(fā)的主流，所以本設(shè)計(jì)對(duì)于學(xué)習(xí)和使用 HTML5 和 技術(shù)具有前瞻性和重大的意義。本設(shè)計(jì)主要是運(yùn)用 HTML5 和 進(jìn)行網(wǎng)頁(yè)布局，而數(shù)據(jù)庫(kù)的設(shè)計(jì)部分和動(dòng)態(tài)網(wǎng)頁(yè)的代碼則是調(diào)用已有網(wǎng)站的代碼，實(shí)現(xiàn)了軟件的可重用性。 聊城大學(xué)本科畢業(yè)論文（設(shè)計(jì)） 2 第 1 章 需求分析 為了明確用戶需求和本 網(wǎng)站設(shè)計(jì) 要求，在進(jìn)行開(kāi)發(fā)之前進(jìn)行了系統(tǒng)的需求分析。 功能需求分析 本 設(shè)計(jì) 主要為了 滿足廣大同學(xué)使用不用的設(shè)備瀏覽學(xué)院網(wǎng)站的 需求 ，使同學(xué)們能夠使用不同的設(shè)備瀏覽學(xué)院的網(wǎng)站，而不出現(xiàn)字跡不清和內(nèi)容顯示不全的問(wèn)題。 由于考慮到網(wǎng)站需要聯(lián)網(wǎng)測(cè)試，在沒(méi)有足夠多的域名和 IP 的情況下，決定采用局域網(wǎng)連接的方式，將主機(jī)和手機(jī)放置在同一局域網(wǎng)下，用手機(jī)連接主機(jī)，這樣既減少了成本，并且加快了連接的速度。如圖 圖 5 為網(wǎng)站首頁(yè) 。 聊城大學(xué)本科畢業(yè)論文（設(shè)計(jì)） 6 網(wǎng)站首頁(yè)的設(shè)計(jì) 網(wǎng)站的首頁(yè)主要是網(wǎng)站的導(dǎo)航，和主要內(nèi)容的展示，設(shè)計(jì)主要包括網(wǎng)站的圖標(biāo)設(shè)計(jì)、網(wǎng)站的導(dǎo)航設(shè)計(jì)、網(wǎng)站的欄目設(shè)計(jì)、網(wǎng)站的底部說(shuō)明設(shè)計(jì)（如圖 圖 圖 8 所示 ）。（如圖 圖 圖 11 所示 ） 圖 10 內(nèi)容列表設(shè)計(jì) 圖 11 返回頂部設(shè)計(jì) 網(wǎng)站內(nèi)容頁(yè)的設(shè)計(jì) 網(wǎng)頁(yè)的內(nèi)容頁(yè)主要是用來(lái)顯示學(xué)院的簡(jiǎn)介和重要的通知，設(shè)計(jì)主要包括欄目導(dǎo)航設(shè)計(jì)、返回頂部設(shè)計(jì)、內(nèi)容顯示設(shè)計(jì)三個(gè)部分（如圖 9，圖 11，圖 12） 。 （ 1） 首頁(yè)的主要布局 HTML5 標(biāo)簽如下： 聊城大學(xué)本科畢業(yè)論文（設(shè)計(jì)） 9 !DOCTYPE html html head title/title /head body header nav ul lia/a/li lia/a/li lia/a/li lia/a/li /ul /nav /header section div class=tabs span/span span/span span/span span/span /div div ul lia/aspanem/em/span/li lia/aspanem/em/span/li lia/aspanem/em/span/li /ul ul 聊城大學(xué)本科畢業(yè)論文（設(shè)計(jì)） 10 lia/aspanem/em/span/li lia/aspanem/em/span/li lia/aspanem/em/span/li /ul ul lia/aspanem/em/span/li lia/aspanem/em/span/li lia/aspanem/em/span/li /ul /section div id=top img/ /div footer p/p /footer /body /html （ 2） 由于代碼的重用性，欄目頁(yè)和內(nèi)容頁(yè)中新增使用的 HTML5 標(biāo)簽為： time/time article/article 文件頭代碼的實(shí)現(xiàn) 為了實(shí)現(xiàn)在移動(dòng)設(shè)備的顯示，需要在文件頭里加上以下標(biāo)簽，使頁(yè)面匹配設(shè)備的寬度，更好的讓頁(yè)面顯示： meta name=viewport content=width=devicewidth,initialscale=,minimumscale=,maximumscale=2.0,userscalable=yes / 實(shí)現(xiàn)頁(yè)面的主要布局和匹配屏幕的大小 實(shí)現(xiàn)頁(yè)面的主要布局 聊城大學(xué)本科畢業(yè)論文（設(shè)計(jì)） 11 對(duì)于手機(jī)網(wǎng)站的布局， CSS 大多采用百分比的布局，并且內(nèi)容大多居中顯示，由于篇幅的原因，展示一些主要標(biāo)簽的布局： *, html { padding: 0px。 } body { fontfamily: Microsoft YaHei,Arial,Helvetica,sansserif。 maxwidth: 960px。 background: none。 margin: auto。 color: 000。 } header, nav, footer, section, article { display: block。 fontweight: bold。 } a { color: 000。 outline: none。 textdecoration: underline。 margintop: 10px。