網(wǎng)頁設(shè)計報告.doc

.課程設(shè)計報告2017-2018學(xué)年度第 二 學(xué)期題目： 影視網(wǎng)站 姓名： 班級： 系部： 計算機學(xué)院 指導(dǎo)教師： 日期：2018 年 2 月 26 日目錄一、 綜述：3二、系統(tǒng)設(shè)計：31.系統(tǒng)目標32.系統(tǒng)功能結(jié)構(gòu)33.開發(fā)環(huán)境4三、開發(fā)實現(xiàn)41.導(dǎo)航欄42.jQuery滑動門效果63. JavaSceipt實現(xiàn)電影圖片不間斷滾動74. 總體效果8四、 總結(jié)：8五、 參考文獻9.摘要 JavaScript是Web頁面中的一種腳本編程語言，也是一種通用的、跨平臺的、基于對象和事件驅(qū)動并具有安全性的腳本語言。它不需要進行編譯，而是直接嵌入在HTML頁面中，把靜態(tài)頁面轉(zhuǎn)變成支持用戶交互并響應(yīng)事件的動態(tài)頁面。本次網(wǎng)頁設(shè)計采用JS和CSS來實現(xiàn)，使得網(wǎng)頁樣式多樣、美觀，用戶有良好的體驗。關(guān)鍵詞 JavaScript、樣式多樣、動態(tài)頁面1、 綜述：對于網(wǎng)站而言，一個好的網(wǎng)頁會給人留下深刻的印象，那樣才會提高網(wǎng)站的知名度才會增加點擊率。并且，網(wǎng)站的內(nèi)容越接近人群，接近生活，就越能惹人注意。如果通過網(wǎng)站管理系統(tǒng)工作，就可以拓開以前傳統(tǒng)的宣傳思路，用戶可以通過上網(wǎng)就能達到找到所需要材料的目的，并且可以給管理員留言以反饋意見。于此同時，作為網(wǎng)站的開發(fā)者，與用戶進行溝通也是相當(dāng)重要的。需求分析活動其實本來就是一個和客戶交流，正確引導(dǎo)客戶能夠?qū)⒆约旱膶嶋H需求用較為適當(dāng)?shù)募夹g(shù)語言進行表達（或者由相關(guān)技術(shù)人員幫助表達）以明確項目目的的過程。這個過程中也同時包含了對要建立的網(wǎng)站基本功能和模塊的確立和策劃活動。在整個需求分析的過程中，將按照一定規(guī)范的編寫需求分析的相關(guān)文檔不但可以幫助成員將需求分析結(jié)果更加明確化，也為以后開發(fā)過程中做到了現(xiàn)實文本形式的備忘，并且有助于主管人員的日后的開發(fā)項目提供有益的借鑒和模范，成為項目開發(fā)中積累的符合自身特點的經(jīng)驗財富。通過市場調(diào)研活動，清晰的分析相似網(wǎng)站的性能和運行情況?？梢詭椭椖控撠?zé)人更加清楚的構(gòu)想出自己開發(fā)的網(wǎng)站的大體架構(gòu)和模樣，在總結(jié)同類網(wǎng)站優(yōu)勢和缺點的同時項目開發(fā)人員可以博采眾長開發(fā)出更加優(yōu)秀的網(wǎng)站。二、系統(tǒng)設(shè)計：1.系統(tǒng)目標結(jié)合實際情況及時對用戶需求分析，365影視網(wǎng)應(yīng)該具有以下特點：l 操作簡單方便、界面簡潔美觀。l 能夠全面展示影片分類及影片詳細信息。l 瀏覽速度快，避免長時間打不開頁面的情況發(fā)生。l 影片圖片清楚、文字醒目。l 系統(tǒng)運行穩(wěn)定、安全可靠。l 易維護，并提供二次開發(fā)支持。2.系統(tǒng)功能結(jié)構(gòu)365影視網(wǎng)的系統(tǒng)結(jié)構(gòu)3.開發(fā)環(huán)境在開發(fā)365影視網(wǎng)時，該項目使用的軟件開發(fā)環(huán)境：l 操作系統(tǒng)：Windows7。l PHP運行環(huán)境：phpStudy20161103。l jQuery版本：jquery-1.6.1.min.js。l 開發(fā)工具：Dreamweaver CS6。l 瀏覽器：IE 8.0。三、開發(fā)實現(xiàn)1.導(dǎo)航欄視圖具體代碼首頁愛情片動作片科幻片恐怖片歡迎來到365影視網(wǎng)愛情喜劇古典愛情現(xiàn)代愛情槍戰(zhàn)片武俠片魔幻片外星人自然災(zāi)害生物變異驚悚片恐怖片懸疑片導(dǎo)航欄效果實現(xiàn)function showadv(par,par2,par3)document.getElementById(a0).style.display=none;document.getElementById(a0color).style.color=;document.getElementById(a0bg).style.backgroundImage=;document.getElementById(a1).style.display=none;document.getElementById(a1color).style.color=;document.getElementById(a1bg).style.backgroundImage=;document.getElementById(a2).style.display=none;document.getElementById(a2color).style.color=;document.getElementById(a2bg).style.backgroundImage=;document.getElementById(a3).style.display=none;document.getElementById(a3color).style.color=;document.getElementById(a3bg).style.backgroundImage=;document.getElementById(a4).style.display=none;document.getElementById(a4color).style.color=;document.getElementById(a4bg).style.backgroundImage=;document.getElementById(par).style.display=;document.getElementById(par2).style.color=#ffffff;document.getElementById(par3).style.backgroundImage=url(images/2.gif);2.jQuery滑動門效果var num= 1; var nameArr=new Array(終結(jié)者5,颶風(fēng)營救,我是傳奇,一線生機,羅馬假日,史密斯夫婦,午夜邂逅);var dnumArr=new Array(施瓦辛格,尼森,威爾,斯坦森,格里高利,布拉德,埃文斯);for(var i=0;inameArr.length;i+)document.write();document.write(+(num+)+/);document.write(+nameArri+);document.write(+dnumArri+);var num=1;var nameArr=new Array(機械師,變形金剛,暮光之城,怦然心動,電話情緣,蜘蛛俠,雷神);var dnumArr=new Array(斯坦森,拉伯夫,克里斯汀,卡羅爾,麥特卡爾菲,加菲爾德,海姆斯沃斯);for(var i=0;inameArr.length;i+)document.write();document.write(+(num+)+/);document.write(+nameArri+);document.write(+dnumArri+); 3. JavaSceipt實現(xiàn)電影圖片不間斷滾動具體代碼速度與激情8速度中的激情對撞戰(zhàn)狼忠貞愛國的情懷 鬼吹燈之尋龍訣驚險刺激的盜墓冒險美國隊長2共同迎戰(zhàn)強大的黑暗勁敵夏洛特?zé)栏阈Ω袆拥拇┰焦适?table4. 總體效果4、 總結(jié)：首先，對自己的課設(shè)，我還覺得有很多值得改進的地方。其次在專業(yè)知識上有了全面的認識，進一步增強了我的創(chuàng)造能力，通過這一次的課設(shè)，對平日的知識有了更深的理解。不僅鍛煉了我的實際動手能力，還培養(yǎng)了我做事的耐心。同時也意識到以前在課堂上了解的知識太狹窄，不能把目光停留在僅學(xué)的幾門專業(yè)課上，堅持做好動手操作，以便能更好的掌握所學(xué)的全部知識。5、 參考文獻1吝春妮。精品課程網(wǎng)站的優(yōu)化設(shè)計策略研究J.中國信息技術(shù)教育，2016,（23）：110-112.2伍雙林。微型網(wǎng)站與微信公眾平臺相融合的移動化學(xué)習(xí)設(shè)計J.發(fā)明與創(chuàng)新（教育信息化），2016,（11）：42-45.3高長軍。網(wǎng)站設(shè)計與制作教學(xué)環(huán)境搭建技巧J.中小學(xué)實驗與裝備，2016,26（06）：42-44.4高長軍。構(gòu)建“網(wǎng)站設(shè)計與制作”教學(xué)環(huán)境的策略J.實驗教學(xué)與儀器，2016,33（11）：41-42.5陳浩容?；谖⒄n比賽網(wǎng)站的