網頁設計報告.doc

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