畢業(yè)設(shè)計-基于html5和css30的手機網(wǎng)站的設(shè)計與實現(xiàn)-文庫吧
2024-11-11 19:13 本頁面
【正文】 ......................................6 網(wǎng)站內(nèi)容頁的設(shè)計 ..............................................7 第 3 章 網(wǎng)站主要頁面的設(shè)計開發(fā)及關(guān)鍵技術(shù) .......... 8 網(wǎng)站主要布局和文件頭代碼的實現(xiàn) ................................8 實現(xiàn)頁面的主要布局和匹配屏幕的大小 .....................10 實現(xiàn)頁面的交互和檢測不同的設(shè)備 .....................13 第 4 章 網(wǎng)站的測試與維護 ........................ 14 網(wǎng)站的測試 ...................................................14 網(wǎng)站的維護 ...................................................15 結(jié)束語 ....................................... 16 參考文獻 ..................................... 17 致謝 .......................................... 1 聊城大學(xué)本科畢業(yè)論文（設(shè)計） 1 基于 HTML5 和 的手機網(wǎng)站的設(shè)計與實現(xiàn) 引言 隨著智能手機的發(fā)展，幾乎所有的學(xué)生都配備了智能手機，這給學(xué)生開展移動學(xué)習(xí)帶來了方便，但是傳統(tǒng)的網(wǎng)站無法適應(yīng)手機屏幕大小的要求，學(xué)生在瀏覽網(wǎng)頁時會出現(xiàn)網(wǎng)頁字跡太小，網(wǎng)站內(nèi)容排版混亂等等問題，給學(xué)生的學(xué)習(xí)帶來了一定的困擾。 HTML5 是 萬維網(wǎng) 的核心語言、 標準通用標記語言 下的一個應(yīng)用 超 文本標記語言 的重大修改， 基于 HTML5 開發(fā)的網(wǎng)頁 APP 擁有更短的啟動時間，更快的聯(lián)網(wǎng)速度 ，而 即層疊樣式表， 在網(wǎng)頁制作時采用層疊樣式表技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制，并且 能夠匹配不同的設(shè)備，實現(xiàn)跨平臺的瀏覽。 互聯(lián)網(wǎng)的發(fā)展，使 HTML5 和 不僅僅是兩項新的 Web 技術(shù)標準，更代表了下一代 HTML 和 CSS技術(shù)，未來的發(fā)展前景已經(jīng)可以預(yù)見， HTML5 必將被越來越多的 Web 開發(fā)人員所使用，成為 web 前端開發(fā)的主流，所以本設(shè)計對于學(xué)習(xí)和使用 HTML5 和 技術(shù)具有前瞻性和重大的意義。 本設(shè)計從學(xué)院網(wǎng)站出發(fā)，從已有的學(xué)院網(wǎng)站的基礎(chǔ)上進行網(wǎng)站的設(shè)計開發(fā)。本設(shè)計主要是運用 HTML5 和 進行網(wǎng)頁布局，而數(shù)據(jù)庫的設(shè)計部分和動態(tài)網(wǎng)頁的代碼則是調(diào)用已有網(wǎng)站的代碼，實現(xiàn)了軟件的可重用性。通過設(shè)計，旨在學(xué)院網(wǎng)站可以在手機、平板、電腦等不同的設(shè)備上進行瀏覽，大大的方便了學(xué)生獲取院網(wǎng)站信息。 聊城大學(xué)本科畢業(yè)論文（設(shè)計） 2 第 1 章 需求分析 為了明確用戶需求和本 網(wǎng)站設(shè)計 要求，在進行開發(fā)之前進行了系統(tǒng)的需求分析。下面將從功能需求、環(huán)境需求、用戶界面需求 三 個方面詳細地進行系統(tǒng)需求分析。 功能需求分析 本 設(shè)計 主要為了 滿足廣大同學(xué)使用不用的設(shè)備瀏覽學(xué)院網(wǎng)站的 需求 ，使同學(xué)們能夠使用不同的設(shè)備瀏覽學(xué)院的網(wǎng)站，而不出現(xiàn)字跡不清和內(nèi)容顯示不全的問題。 圖 1 學(xué)院原始網(wǎng)站手機顯示圖 聊城大學(xué)本科畢業(yè)論文（設(shè)計） 3 環(huán)境需求分析 根據(jù)筆者 的專業(yè)開設(shè)和調(diào)試的需要，本設(shè)計基于 windows 平臺，采用了 Adobe Dreamweaver CS6 開發(fā)工具和 IIS 服務(wù)器，考慮到安卓手機的用戶量，決定采用Android 版本的手機并且用搜狗瀏覽器進行測試。 由于考慮到網(wǎng)站需要聯(lián)網(wǎng)測試，在沒有足夠多的域名和 IP 的情況 下，決定采用局域網(wǎng)連接的方式，將主機和手機放置在同一局域網(wǎng)下，用手機連接主機，這樣既減少了成本，并且加快了連接的速度。 圖 2 網(wǎng)站結(jié)構(gòu) 簡圖 圖 3 網(wǎng)站 IIS 配置 簡圖 聊城大學(xué)本科畢業(yè)論文（設(shè)計） 4 用戶界面需求分析 網(wǎng)站 采用良好的圖形界面、 習(xí)慣化的操作按鈕 和扁平化設(shè)計的思想，使 網(wǎng)站界面簡潔、易于操作，讓 廣大的同學(xué)很容易在手機設(shè)備上操作 。如圖 圖 5 為網(wǎng)站首頁 。 圖 4 網(wǎng)站首頁截圖 1 聊城大學(xué)本科畢業(yè)論文（設(shè)計） 5 圖 5 網(wǎng)站首頁截圖 2 第 2章 網(wǎng)站 設(shè)計 根據(jù)前面對 網(wǎng)站 需求的分析， 和用戶瀏覽的需要，可
公司管理相關(guān)推薦
鄂ICP備17016276號-1