《淺析響應式網(wǎng)頁的設計與開發(fā)以計算機信息工程系網(wǎng)站為例-開題報告》由會員分享，可在線閱讀，更多相關《淺析響應式網(wǎng)頁的設計與開發(fā)以計算機信息工程系網(wǎng)站為例-開題報告（8頁珍藏版）》請在裝配圖網(wǎng)上搜索。

畢業(yè)論文(設計)開題報告(由學生填寫)學生姓名 專業(yè) 計算機科學與 技術 班級 擬選題目 淺析響應式網(wǎng)頁的設計與開發(fā)——以計算機信息工程系網(wǎng)站為例選題依據(jù)及研究意義一、選題依據(jù)信息時代正在飛速的發(fā)展，互聯(lián)網(wǎng)已經(jīng)融入到人們的生活，更是逐漸成為了人們生活中必不可少的一部分。如今，市場上出現(xiàn)了越來越多形狀、尺寸各異的移動設備，互聯(lián)網(wǎng)能像出現(xiàn)在你的臥室、書房、餐廳一樣，方便的出現(xiàn)在你的口袋、錢包里。隨著這些設備的興起，網(wǎng)站建設也隨之發(fā)生著轉變。響應式 Web 設計由此綻放異彩。響應式 Web 設計可構造出在各種設備上都能正常工作的網(wǎng)站，并根據(jù)設備對布局進行功能和特征的調整。以前，為滿足移動用戶的需求，設計人員需要額外建立一個專門為移動設備設計的網(wǎng)站，更有的還為平板電腦建立了第三個網(wǎng)站。幸好，響應式 Web設計能構建一個既可運行在現(xiàn)在的設備，也可運行在未來的設備上的網(wǎng)站。更給力的是，可以讓它在較小、較大的屏幕以及介于兩者之間的屏幕上顯示不同的效果。采用響應式 Web 設計方法，網(wǎng)站的布局可以根據(jù)不同的查看環(huán)境進行改變，對于更大的瀏覽器窗口，則有另外一些 CSS 規(guī)則控制相應的布局。響應式 Web 設計能鞏固自己的地位，并得以掀起一股網(wǎng)頁設計新標準的浪潮，從而變得日益重要是為什么呢？原因有以下幾點：1． 能兼容各種設備，而非使用傳統(tǒng)方式將用戶跳轉至設備專用網(wǎng)站。2． 無需在網(wǎng)站上設置跳轉，提高了轉換率和銷量。3． 具有提升搜索引擎排名的效果。4． 實現(xiàn)一站多用的效果，從而達到節(jié)省開發(fā)投入。5． 它配有優(yōu)化的分析程序，可處理響應式報告并對應多臺設備，將其分析及整合。6． 需要管理的內容少，節(jié)省管理投入。7． 提升離線用戶體驗，管理員可抽出更多時間精力為不同設備的各種用戶提供更優(yōu)質的服務。二、研究意義對于院系來說，建立自己的網(wǎng)站也有很多好處：1.有利于打造計算機信息工程系形象2.有利于推送豐富的院資訊信息3.有利于加強院系與用戶之間交互溝通，使用戶更加信任院系4.有利于豐富學校的院系文化而且，計算機信息工程系建立網(wǎng)站，有效地開發(fā)各種院系內的信息與應用資源，使院系的各種信息與應用服務資源都將得到統(tǒng)一的跟蹤和整理，并經(jīng)過相應的過濾和調整，使院系的建設更有效的開展。同時，計算機信息工程系建立網(wǎng)站使用戶通過網(wǎng)站首頁，學院簡介，院系內部的工作指派，讓用戶清楚的了解到院系的各種工作情況，更可以吸引用戶，牽引用戶，便于院系的工作開展和社會推廣。再者，針對移動設備數(shù)量的不斷壯大，打造響應式網(wǎng)站更新網(wǎng)頁布局，能夠盡可能的多增加和貼近用戶，響應式 Web 布局在未來的網(wǎng)頁設計里將占有舉足輕重的位置。（1） 響應式網(wǎng)頁可以避免重復的內容發(fā)布，只需維護一個網(wǎng)站的后臺就行。（2） 現(xiàn)如今，移動設備用戶的數(shù)量已在 2014 年遠超電腦端用戶數(shù)量。（3） 響應式 Web 設計能保持網(wǎng)頁原有的鏈接形式。（4） 這種設計沒有網(wǎng)頁版本的區(qū)分，實施 SEO 操作可以保持一致性。（5） 打開設備的大量出現(xiàn)，但用戶體驗不會降低，反而提升。（6） 一些大型瀏覽器（如谷歌）也鼓勵使用這種設計，網(wǎng)頁版本具有相同的HTML 和內容，對于搜索引擎來說很好處理。（7） 一個企業(yè)不能正常顯示自己的網(wǎng)頁，只會給企業(yè)帶來眾多負面影響，也讓用戶對其留下不好的印象。響應式網(wǎng)頁能夠滿足各種類型的移動設備的需求，能盡可能給所以終端客戶帶去最優(yōu)的訪問體驗。雖說如今也有專為平板電腦和手機打造的網(wǎng)頁，它們也能滿足客戶的訪問需求，但根據(jù)調查數(shù)據(jù)顯示，常用的移動終端有 230 多種不同的屏幕尺寸，我們不可能為每一種屏幕尺寸都設計一款相對應的網(wǎng)頁，所以，響應式網(wǎng)頁設計此時便體現(xiàn)出了其最有力的價值。選題研究現(xiàn)狀網(wǎng)站發(fā)展的現(xiàn)狀：至今為止，響應式網(wǎng)頁設計還在被廣大設計師所推崇。這個掀起了網(wǎng)頁設計新標準浪潮的事物，在近幾年里，一次又一次的鞏固著自己的地位。隨著互聯(lián)網(wǎng)的迅速發(fā)展，網(wǎng)絡逐漸成為人們獲得信息和生活交流的一種重要方式。越來越多的人從用電腦查看新聞、瀏覽網(wǎng)頁、購買商品等行為轉變?yōu)槭褂秒S身攜帶的手機或平板電腦。這種情況出現(xiàn)后便需要網(wǎng)站自動切換適應性的分辨率、圖像大小和腳本，響應式網(wǎng)頁設計便能順利的解決這個問題。響應式網(wǎng)頁發(fā)展現(xiàn)狀，下面從以下幾點闡述：（1） 響應式網(wǎng)頁設計做了什么？它可以自動識別屏幕尺寸，從而調整出適合的網(wǎng)頁。網(wǎng)頁設計中強調模塊化，模塊化的設計要求模塊能夠“可拓展，無浸染” ，從而使得網(wǎng)頁在任何地方都能正常的顯示。響應式網(wǎng)頁設計就是網(wǎng)頁在任何設備中都能正常適應，而無需每一個設備都單獨拎出來做一個子網(wǎng)站。（2） 響應式網(wǎng)頁設計解決了什么？它避免了重復內容的發(fā)布，使得人們只需專心維護一個網(wǎng)站后臺即可，省時省力。同時，響應式網(wǎng)頁設計沒有網(wǎng)頁版本之分，讓工作人員實施 SEO操作可以保持一致性。隨著用戶使用的移動設備數(shù)量不斷增多，響應式網(wǎng)頁設計的要求也不斷趨于人性化，簡約化，也讓越來越多用戶使用其擁有的設備越來越方便。（3） 響應式網(wǎng)頁設計還面臨著哪些難題？雖然響應式網(wǎng)頁設計帶給人們諸多方便，它也具有一定的使用優(yōu)勢，但所謂事無絕對，響應式網(wǎng)頁設計還是有它解決不了的難題。首先，它的一個致命傷在對 IE 的老版本支持不是很好，特別是老版 IE6?，F(xiàn)在很多用戶還在使用 IE6，若堅持使用響應式網(wǎng)頁設計，那就不適合特定的網(wǎng)頁推廣了。再者，一些游戲、視頻網(wǎng)頁只能在 PC 端上打開。國內有一些用戶提出，迪士尼公司網(wǎng)站上有很多網(wǎng)頁游戲，它能在 PC 端上玩，但卻不能在移動設備上使用，因此，也不能一味地選擇使用響應式網(wǎng)頁設計方案，或許有時使用了也沒有太大意義，只會費時費力。研究內容（包括基本思路、框架、主要研究方式、方法等）1、基本思路：通過查找資料，了解建立響應式網(wǎng)頁的作用及特點。根據(jù)用戶的具體體驗和用戶所使用的移動設備，使得做出的頁面有能力去自動響應用戶的設備環(huán)境。響應式頁面開發(fā)的關鍵技術有幾方面，包括媒體查詢、流式布局、彈性圖片等。面對不斷發(fā)展的瀏覽器和上網(wǎng)設備，尋找一種可行的解決方案。它不需要服務器端，結合HTML、CSS、jQuery 等網(wǎng)頁開發(fā)技術就能達到良好的用戶體驗。采用 HTML5+CSS3 的響應式頁面設計，可以兼容多種設備和屏幕。2、框架：1、響應式網(wǎng)頁前端設計的基本概述2、響應式網(wǎng)頁的優(yōu)勢分析3、響應式網(wǎng)頁前端設計在需求、功能、風格四個方面的分析4、可能遇到的問題和解決思路5、網(wǎng)頁的效果展示6、網(wǎng)站測試三、主要研究方式和方法：1.查詢相關資料，了解本次課題的研究意義?？梢陨暇W(wǎng)搜索或者是去圖書館查閱相關資料。 2.通過查詢資料了解該系統(tǒng)的需求，以及需要哪些東西。 3.設計出大體上的功能結構。 4.通過進一步的了解，對每個網(wǎng)頁模塊進行細化，將每一步都想清楚。制定出每一步的做法和注意的地方。 5.對設計好的網(wǎng)頁進行調試，通過調試發(fā)現(xiàn)存在的問題并解決，從而達到完善系統(tǒng)的目的。 6.最后，整理各階段的設計記錄文檔，寫成論文稿。論文提綱(含論文選題、論文主體框架)論文題目：淺析響應式網(wǎng)頁的設計與開發(fā)——以計算機信息工程系網(wǎng)站為例第 1 章 引言1.1 響應式網(wǎng)頁前端發(fā)展現(xiàn)狀1.2 計算機信息工程學院的介紹1.3 計算機信息工程學院網(wǎng)站前端設計的需求分析1.4 響應式網(wǎng)頁在計算機信息工程學院網(wǎng)站中的應用第 2 章 網(wǎng)站前端開發(fā)系統(tǒng)設計2.1 網(wǎng)站目標2.2 網(wǎng)站功能結構2.3 開發(fā)環(huán)境2.4 網(wǎng)站質量需求第 3 章 制作網(wǎng)站的語言介紹3.1 Dreamweaver 網(wǎng)站編織 3.2 DIV+CSS 樣式表3.3 Jquery3.4 圖像、圖形設計 Photoshop 及 Illustartor第 4 章 院系網(wǎng)站的規(guī)劃與設計4.1 院系網(wǎng)站的功能設計4.2 院系網(wǎng)站的風格設計4.3 院系網(wǎng)站的首頁設計4.4 院系網(wǎng)站的其他頁設計第 5 章 計算機信息工程學院網(wǎng)站的效果展示5.1 首頁展示效果5.2 其他頁面的效果展示第 6 章 網(wǎng)站的測試第 7 章 總結參考文獻致 謝主要參閱文獻[1]劉智惠，薛晶晶，盧倩蕓.面向不同設備的響應式網(wǎng)頁設計——Web 移動圖書館[J].現(xiàn)代圖書情報技術,2014(11).[2]譚富盛.校園網(wǎng)站的設計與開發(fā)[J].新課程學習(下),2012(07).[3]張利平.色彩情感特征與網(wǎng)站色彩定位[J].美術教育研究,2014(10).[4]國蘭.高校網(wǎng)站界面設計中的色彩應用研究[D].東北林業(yè)大學,2012.[5]孫小英.網(wǎng)頁設計中 CSS 樣式的應用分析[J].軟件工程師,2013(12).[6]陳鳳芹.Dreamweaver 網(wǎng)頁設計與制作教學探討[J].中國教育技術裝備,2012.[7]楊彬.淺談響應式網(wǎng)頁設計[J].遼寧行政學院學報,2014(05).[8]王愉，潘明明.響應式網(wǎng)頁設計初探[J].北京印刷學院學報,2014(03).[9]唐駿開.HTML5 移動 Web 開發(fā)指南[M].北京電子工業(yè)出版社,2012.[10]韓紹鑫.基于 Dreamweaver 的網(wǎng)站設計與規(guī)劃[J].數(shù)字技術與應用,2013(04).[11]龍奇.新一代網(wǎng)絡技術標準 HTML5 的研究[J].科技信息,2011(10).研究進程安排(包括提綱、一稿、二稿、定稿起訖時間)1、2016 年 7 月 12 日前，確定論文題目，并找指導老師進行溝通、協(xié)商、調整；2、2016 年 7 月 12 日前，下達任務書；3、2016 年 9 月 30 日前，搜索大量資料，進行閱讀整理，歸納總結，完成論文綜述和開題報告；4、2016 年 11 月 30 日前，整理相關資料，進行論文第一稿的撰寫，并及時與指導老師聯(lián)系，修改并完成第一稿；5、2017 年 1 月 15 日前，交論文二稿；6、2017 年 3 月 11 日前，交論文三稿；7、2017 年 4 月 8 日前，論文定稿、論文檢測報；其它說明指導教師是否同意開題簽名:年 月 日院（系）教學負責人簽署簽名:年 月 日