淺析響應(yīng)式網(wǎng)頁(yè)的設(shè)計(jì)與開(kāi)發(fā)以計(jì)算機(jī)信息工程系網(wǎng)站為例-開(kāi)題報(bào)告

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