響應式企業網站設計與實現畢業論文(已修改)

　

【正文】 響應式企業網站設計與實現畢業論文目 錄第一章 緒 論 ......................................................6 本課題研究的背景和目的 ..........................................6 國內外 HTML5 響應式企業網站建設的狀況 ............................7 本章小結 ........................................................7第二章 前端開發 及相關技術 ..........................................7 HTML5 前端開發環境 ..............................................8 HTML5 前端開發工具 ..............................................8 HTML5 前端開發相關技術 ..........................................8 javascript 簡介 .............................................8 javascript 基本特點 .........................................9 css 簡介 ....................................................9 jQuery.....................................................10 本章小結 .......................................................10第三章 前端布局分析與設計 ..........................................10 前端總體開發流程與設計 .........................................10 分層開發 ...................................................10 代碼編寫 ...................................................11 內部測試與后續優化 .........................................11 前端 UI 設計 ....................................................11 模塊分布 ...................................................11 顏色配置 ...................................................12 css 元素 ...................................................12 交互設計與 UI ..................................................14 網站結構布局與設計 .............................................14 網站首頁結構 ..............................................14 主題鮮明，富有特色 ........................................14 網站前臺頁面設計 ...............................................14 首頁 .......................................................15 其余子頁面 .................................................15 本章小結 .......................................................15第四章 主要功能的實現 ..............................................15 界面設 計 .......................................................15 具體設計文檔 ...................................................15 前臺新聞文摘顯示 ...............................................16 網站裝飾風格 ...............................................16 網站的鏈接結構 .............................................16 可視化設計 .....................................................16 具體實現技術 ...................................................16 css 在“寫意集團響應式企業官網”中的應用實例 ...............16 本章小結 .......................................................18第五章 總結 .......................................................18致謝 ...............................................................18參考文獻 ...........................................................19響應式企業網站設計與實現1第一章 緒 論 本課題研究的背景和目的如今的互聯網已經滲透到了我們生活的每一個層面，網站的內容越來越豐富全面，各大瀏覽器商也在競相的開發各種各樣的新的功能，供開發者進行開發構建出更好的用戶體驗，以此來滿足各種不同需求的瀏覽者。隨機計算機的這些技術的飛速生長，手機的上網率高于傳統 PC，而在手機端上，傳統網站又難以做到兼容所有的設備尺寸，越來越多的商家的傳統門戶官網已經不能滿足用戶的體驗，各大商家大企業都開始重構新的 HTML5 響應式網站，以求將自己的產品信息和企業動態，更直接的展示給用戶，并且通過豐富的交互去優化與用戶溝通的過程。目前很多的企業已經建立起了自己的響應式官網。這些網站的建立使得企業可以突破傳統的 PC 媒介，在移動網絡上開辟屬于自己的新天地。用戶能在手機上，隨時隨地就能看到企業的最新動態，可以更好的利用用戶的碎片時間去關注企業，網絡之所以為網，也正是因為他具有超時空性。人們無論在哪都應該可以進行訪問，體驗空間層面上帶來的開放性。整個官網設置多個板塊與分頁面，分別放置相關內容，不同板塊的信息相互獨立。交互上更多是體驗在 CSS3 的新屬性帶給用戶的新體驗，用戶在與官網進行交互的方式更加豐富與精彩了。與傳統官網相比，響應式網站不外乎也是企業介紹，新聞發布，產品介紹一類等。為何還要花時間精力和人力去建立和維護網站呢？是正如上面所說：內容更加多姿多彩，板塊，內容更加豐富，而且能夠相應不同屏幕大小，在這個用手機多過 PC 的時代，能更好更快地將第一手信息送到用戶手上。這些都促成了各個企業組織新的信息化建設，構建專業，易于維護和管理的網站。我們要構建專門的企業響應式官網，網站前端開發最基本的還是 3 個技能：html。css。Javascript,也用到其他部分工具，如 PS 圖片處理工具，新的HTML5，css3；javascript 的工具集 jQuery。這些都是開發中最基本的技能。前端開發的過程中，頁面的布局將會用 HTML 元素進行定義和布局，css 對布局元素進行元素的定位和畫面效果的渲染，然后再通過 javascript 實現相對應的網站效果和優化用戶交互體驗。 國內外 HTML5 響應式企業網站建設的狀況截至 2022，有 80%的 App 將全部或部分基于 HTML5。這意味著大部分App 的內容都將是以網頁的形式呈現，典型的例子包括微信、Facebook、Twitter 等。(數據來源：國際科技媒體 ReadWriteWeb，2022)瀏覽量最高的 1000 個 H5 作品中，42%是心靈雞湯，最高 17,358,480 uv。27%是測試題，最高 49,940,339 uv。15%是社交互動游戲，最高 2,892,047 uv。 5%是大型品牌宣傳，最高 551,195 uv。 (數據來源：在線 h5 工具平臺，)谷歌瀏覽器于 9 月 1 日起不再自動播放 Flash。 亞馬遜宣布旗下網絡響應式企業網站設計與實現2(包括 門戶在內)的所有廣告將不再使用 Flash。在可預見的未來，Flash 廣告將被 HTML5 廣告所替代。朋友圈廣告上線，據傳起投 20 萬， CPM 40 元。詳情外鏈的 H5 頁面可以用微信提供的模板，也可以自行定制。以上的信息反映了 H5 在內容營銷的應用潛力。出于好奇，筆者又調研了國內外的幾個社交平臺。目前支持 H5 分享的平臺：國內的微信、微博，國外有Facebook、Twitter、LinkedIn，當然每個平臺分享的形式略有差異。各大主流社交平臺對 H5 分享的支持都是比較友好的，只不過每個平臺的分享接口都需要單獨的定制。當然這也在暗示 HTML5 的推廣渠道其實可以更加多元化，并且其在內容營銷中有著極大的應用潛力?！∈聦嵣想S著技術的成熟和各種 H5 工具的涌現，H5 制作已經漸漸走向標準化，成本問題也隨著一些工具的出現有了極大的改善?；蛟S H5 技術的發展已經超出你的想象，很多問題已經有了不錯的解決方案。所以各大企業官網轉型做響應式也是勢在必得的過程。 本章小結本章闡述了開發企業響應式官網的研究背景和意義。介紹了國內外 HTML5響應式網站的發展狀態對比目前國內的現狀，說明建設 HTML5 響應式網站的重要性。響應式企業網站設計與實現3第 2 章 前端開發及相關技術 HTML5 前端開發環境 HTML5 網頁前端開發，實際也是 HTML 網頁開發，HTML5 只是萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改的第五次，其中增添很多新的 API 功能。網頁前端主要是由用戶交互設計，視覺體驗設計等配合，根據設計圖合理的規劃和布局頁面，合理編寫頁面代碼，編寫易于管理具有一定的層次代碼，挖掘用戶深層次的體驗效果，進一步去優化體驗。一般都是由有網頁三劍客之稱的：HTML，css,js 來作為基本構建項目語言。在該項目中用到的開發工具是 WebStorm。 HTML5 前端開發工具(1)WebStorm WebStorm 是 jetbrains 公司旗下一款 JavaScript 開發工具。被廣大中國JS 開發者譽為“Web 前端開發神器”、“最強大的 HTML5 編輯器”、“最智能的 JavaScript IDE”等。與 IntelliJ IDEA 同源，繼承了 IntelliJ IDEA 強大的 JS 部分的功能。然后根據設計圖制作靜態頁面，兼容各主流瀏覽器，并做到IE8 下排版不亂，IE9 以上響應式布局。另外，對網站做一些維護已經性能的優化。整個網站的詳細開發過程在后面將逐步具體介紹。（2）PhotoshopAdobe Photoshop,簡稱“PS”,他是由 Adobe Systems 開發和發行的圖像處理軟件。Photoshop 主要處理以像素所構成的數字圖像。使用其眾多的編修與繪圖工具，可以有效地進行圖片編輯工作。ps 有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。（3）IE testerIETester 是一個免費的 WebBrowser 控件，讓我們可以在 Windows 系列的桌面 Vista 和 XP 系統中看到 、IEIEIEIEIEIE11 的 渲染和 JavaScript 引擎。可以幫我們模擬網頁在 、IEIEIEIE9 以及IE10 等瀏覽器中的兼容性，讓我們可以檢測到我們做的網站能否兼容各版本的IE 瀏覽器，用于觀察兼容性。響應式企業網站設計與實現4 HTML5 前端開發相關技術 javascript 簡介Javascript 是一種直譯式腳本語言。是一種動態類型、弱類型、基于原型的語言，內置支持類型，具有自己獨特的垃圾回收等機制，他的解釋器被稱為Ja