網(wǎng)頁(yè)設(shè)計(jì)報(bào)告.doc

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