1、精選優質文檔-傾情為你奉上課程設計報告2017-2018 學年度第 二 學期題目： 影視網站姓名：班級：系部： 計算機學院指導教師：日期： 2018 年 2 月 26 日目錄一、 綜述： . 3二、系統設計： . 3專心-專注-專業1.系統目標 . 32.系統功能結構 . 33.開發環境 . 4三、開發實現 . 41.導航欄 . 42.jQuery 滑動門效果 . 63. JavaSceipt 實現電影圖片不間斷滾動 . 74. 總體效果 . 8四、 總結： . 8五、 參考文獻 . 9摘要JavaScript 是 Web 頁面中的一種腳本編程語言，也是一種通用的、跨平臺的、基于對象和事件驅動

2、并具有安全性的腳本語言。 它不需要進行編譯， 而是直接嵌入在 HTML 頁面中，把靜態頁面轉變成支持用戶交互并響應事件的動態頁面。 本次網頁設計采用 JS 和 CSS 來實現，使得網頁樣式多樣、美觀，用戶有良好的體驗。關鍵詞 JavaScript、樣式多樣、動態頁面一、綜述：對于網站而言， 一個好的網頁會給人留下深刻的印象， 那樣才會提高網站的知名度才會增加點擊率。并且，網站的內容越接近人群，接近生活，就越能惹人注意。如果通過網站管理系統工作， 就可以拓開以前傳統的宣傳思路， 用戶可以通過上網就能達到找到所需要材料的目的，并且可以給管理員留言以反饋意見。 于此同時， 作為網站的開發者，與用戶進

3、行溝通也是相當重要的。需求分析活動其實本來就是一個和客戶交流， 正確引導客戶能夠將自己的實際需求用較為適當的技術語言進行表達 （或者由相關技術人員幫助表達） 以明確項目目的的過程。 這個過程中也同時包含了對要建立的網站基本功能和模塊的確立和策劃活動。在整個需求分析的過程中，將按照一定規范的編寫需求分析的相關文檔不但可以幫助成員將需求分析結果更加明確化， 也為以后開發過程中做到了現實文本形式的備忘， 并且有助于主管人員的日后的開發項目提供有益的借鑒和模范， 成為項目開發中積累的符合自身特點的經驗財富。 通過市場調研活動， 清晰的分析相似網站的性能和運行情況。 可以幫助項目負責人更加清楚的構想出自

4、己開發的網站的大體架構和模樣， 在總結同類網站優勢和缺點的同時項目開發人員可以博采眾長開發出更加優秀的網站。二、系統設計：1.系統目標結合實際情況及時對用戶需求分析， 365 影視網應該具有以下特點：操作簡單方便、界面簡潔美觀。能夠全面展示影片分類及影片詳細信息。瀏覽速度快，避免長時間打不開頁面的情況發生。影片圖片清楚、文字醒目。系統運行穩定、安全可靠。易維護，并提供二次開發支持。2.系統功能結構365 影視網的系統結構3.開發環境在開發 365 影視網時，該項目使用的軟件開發環境：操作系統： Windows7 。PHP 運行環境： phpStudy。jQuery 版本： jquery-1.6

5、.1.min.js 。開發工具： Dreamweaver CS6。瀏覽器： IE 8.0 。三、開發實現1.導航欄視圖具體代碼<div id="link"><table cellapacing="0" cellpadding="0" width="100%" border="0"><tr><td><div class="i01w"><table cellspacing="0" cellpad

6、ding="0" width="100%" border="0"><tr><td width="166" height="42" align="center" id="a0bg"><span id="a0color"onMouseOver="showadv('a0,'a0color','a0bg')" ><a href="

7、;1.html"><font color="#FA4A05"> 首頁</font></a></span></td><td width="1"><img src="images/1.gif" width="1" height="25"/></td><td id="a1bg" align="center" width="166&quo

8、t;><span id="a1color"onMouseOver="showadv('a1','a1color','a1bg')"><a href="2.html"> 愛情片 </a></span></td><td width="1"><img src="images/1.gif" width="1" height="25"/

9、></td><td id="a2bg" align="center" width="166"><span id="a2color"onMouseOver="showadv('a2','a2color','a2bg')"><a href="3.html"> 動作片 </a></span></td><td width="1&qu

10、ot;><img src="images/1.gif" width="1" height="25"/></td><td id="a3bg" align="center" width="166"><span id="a3color"onMouseOver="showadv('a3','a3color','a3bg')"><a hre

11、f="3333.html"> 科幻片 </a></span></td><td width="1"><img src="images/1.gif" width="1" height="25"/></td><td id="a4bg" align="center" width="166"><span id="a4color"on

12、MouseOver="showadv('a4','a4color','a4bg')"><a href="4444.html"> 恐怖片 </a></span></td><td width="1"><img src="images/1.gif" width="1" height="25"/></td></tr></table

13、></div></td></tr><tr><td><table width="100%" height="41" cellpadding="0" cellspacing="0" id="a0" border="0"><tr><td align="left" style="padding-left: 12px"> 歡迎來到 365 影視網

14、 </td></tr></table><table id="a1" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%"border="0"><tr><td style="padding-left: 137px" align="left">&l

15、t;ul class="i02w"><li><a href="2.html"> 愛情喜劇 </a></li><li><a href="3.html"> 古典愛情 </a></li><li> 現代愛情 </li></ul></td></tr></table><table id="a2" style="display: none&q

16、uot; height="41" cellspacing="0" cellpadding="0" width="100%"border="0"><tr><td style="padding-left: 357px" align="left"><ul class="i02w" ><li><a> 槍戰片 </a></li><li><a

17、> 武俠片 </a></li><li><a> 魔幻片 </a></li></ul></td></tr></table><table id="a3" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0"width="100%" border="0"&g

18、t;<tr><td style="padding-left: 540px"><ul class="i02w"><li><a> 外星人 </a></li><li><a> 自然災害 </a></li><li><a> 生物變異 </a></li></ul></td></tr></table><table id="a4&q

19、uot; style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%"border="0"><tr><td style="padding-left: 750px" align="center"><ul class="i02w"><li><a> 驚悚片 <

20、;/a></li><li><a> 恐怖片 </a></li><li><a> 懸疑片 </a></li></ul></td></tr></table> </td></tr></table></div>導航欄效果實現<script type="text/javascript">function showadv(par,par2,par3)document.ge

21、tElementById("a0").style.display="none"document.getElementById("a0color").style.color=""document.getElementById("a0bg").style.backgroundImage=""document.getElementById("a1").style.display="none"document.getElementById(&q

22、uot;a1color").style.color=""document.getElementById("a1bg").style.backgroundImage=""document.getElementById("a2").style.display="none"document.getElementById("a2color").style.color=""document.getElementById("a2bg").

23、style.backgroundImage=""document.getElementById("a3").style.display="none"document.getElementById("a3color").style.color=""document.getElementById("a3bg").style.backgroundImage=""document.getElementById("a4").style.displ

24、ay="none"document.getElementById("a4color").style.color=""document.getElementById("a4bg").style.backgroundImage=""document.getElementById(par).style.display=""document.getElementById(par2).style.color="#ffffff"document.getElementB

25、yId(par3).style.backgroundImage="url(images/2.gif)"</script>2.jQuery 滑動門效果<div id="tab1" class="tab_content"><table align="center" width="300" border="0" cellpadding="0" cellspacing="0"><script>va

26、r num= 1; var nameArr=new Array(" 終結者 5"," 颶風營救 "," 我是傳奇 "," 一線生機 ","羅馬假日"," 史密斯夫婦 "," 午夜邂逅 ");var dnumArr=new Array(" 施瓦辛格 "," 尼森"," 威爾","斯坦森 ","格里高利 ","布拉德 "," 埃文斯

27、 ");for(var i=0;i<nameArr.length;i+)document.write('<tr height="43">');document.write('<td width="26" align="center" class="f_td">'+(num+)+'</<td>');document.write('<td width="75" align=&quo

28、t;left" class="f_td"><a href="#">'+nameArri+'</td>');document.write('<td width="90" align="right" class="f_td">'+dnumArri+'</td></tr>');</script></table></div><div

29、 id="tab2" class="tab_content"><table align="center" width="300" border="0" cellpadding="0" cellspacing="0"><script>var num=1;var nameArr=new Array(" 機械師 "," 變形金剛 "," 暮光之城 "," 怦然心動

30、 "," 電話情緣 ","蜘蛛俠 ","雷神");var dnumArr=new Array(" 斯坦森 ","拉伯夫 ","克里斯汀 "," 卡羅爾 ","麥特卡爾菲 "," 加菲爾德 ","海姆斯沃斯 ");for(var i=0;i<nameArr.length;i+)document.write('<tr height="43">&#

31、39;);document.write('<td width="26" align="center" class="f_td">'+(num+)+'</<td>');document.write('<td width="75" align="left" class="f_td"><a href="#">'+nameArri+'</td>

32、');document.write('<td width="90" align="right" class="f_td">'+dnumArri+'</td></tr>');</script> </table></div>3. JavaSceipt 實現電影圖片不間斷滾動具體代碼<div id="demo" class="top_box" style="overflow:

33、 hidden; width: 1000px; height: 264px"><table width="100%" cellpadding="0" cellspacing="0"><tr><td id="demo1"><table cellpadding="0" cellspacing="0"><tr><td width="191" height="200&quo

34、t; style="padding-right:10px"><a target="_blank"><imgsrc="images/01.jpg" width="191" height="200" border="0" /></a><div class="title"><a href="see/see6.html" target="_blank"> 速度

35、與激情 8</a></div><div class="content"> 速度中的激情對撞 </div></td><td width="191" height="200" style="padding-right:10px"><a target="_blank"><imgsrc="images/02.jpg" width="191" height="200&

36、quot; border="0" /></a><div class="title"><a href="see/see7.html" target="_blank"> 戰狼</a></div><div class="content"> 忠貞愛國的情懷 </div></td><td width="191" height="200" style="

37、;padding-right:10px"><a target="_blank"><imgsrc="images/03.jpg" width="191" height="200" border="0" /></a><div class="title"><a href="see/see8.html" target="_blank"> 鬼吹燈之尋龍訣 </a&g

38、t;</div><div class="content"> 驚險刺激的盜墓冒險 </div></td><td width="191" height="200" style="padding-right:10px"><a target="_blank"><imgsrc="images/04.jpg" width="191" height="200" border="0" /></a><div class="title"><a href="see/see9.html" target="_blank"&