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

課程設(shè)計(jì)匯報(bào)-第二學(xué)期題目：影視網(wǎng)站姓名：班級(jí)：系部：計(jì)算機(jī)學(xué)院指導(dǎo)老師：日期：年2月26日目錄1390_WPSOffice_Level1一、綜述： 37597_WPSOffice_Level1二、系統(tǒng)設(shè)計(jì)： 317758_WPSOffice_Level21.系統(tǒng)目標(biāo) 316939_WPSOffice_Level22.系統(tǒng)功效結(jié)構(gòu) 324720_WPSOffice_Level23.開發(fā)環(huán)境 413742_WPSOffice_Level1三、開發(fā)實(shí)現(xiàn) 46496_WPSOffice_Level21.導(dǎo)航欄 410585_WPSOffice_Level22.jQuery滑動(dòng)門效果 623476_WPSOffice_Level23.JavaSceipt實(shí)現(xiàn)電影圖片不間斷滾動(dòng) 79088_WPSOffice_Level24.總體效果 824176_WPSOffice_Level1四、總結(jié)： 810710_WPSOffice_Level1五、參考文件 9[摘要]JavaScript是Web頁(yè)面中一個(gè)腳本編程語(yǔ)言，也是一個(gè)通用、跨平臺(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è)面綜述：對(duì)于網(wǎng)站而言，一個(gè)好網(wǎng)頁(yè)會(huì)給人留下深刻印象，那樣才會(huì)提升網(wǎng)站著名度才會(huì)增加點(diǎn)擊率。而且，網(wǎng)站內(nèi)容越靠近人群，靠近生活，就越能惹人注意。假如經(jīng)過(guò)網(wǎng)站管理系統(tǒng)工作，就能夠拓開以前傳統(tǒng)宣傳思緒，用戶能夠經(jīng)過(guò)上網(wǎng)就能達(dá)成找到所需要材料目標(biāo)，而且能夠給管理員留言以反饋意見。于此同時(shí)，作為網(wǎng)站開發(fā)者，和用戶進(jìn)行溝通也是相當(dāng)關(guān)鍵。需求分析活動(dòng)其實(shí)原來(lái)就是一個(gè)和用戶交流，正確引導(dǎo)用戶能夠?qū)⒆约簩?shí)際需求用較為合適技術(shù)語(yǔ)言進(jìn)行表示（或由相關(guān)技術(shù)人員幫助表示）以明確項(xiàng)目目標(biāo)過(guò)程。這個(gè)過(guò)程中也同時(shí)包含了對(duì)要建立網(wǎng)站基礎(chǔ)功效和模塊確實(shí)立和策劃活動(dòng)。在整個(gè)需求分析過(guò)程中，將根據(jù)一定規(guī)范編寫需求分析相關(guān)文檔不僅能夠幫助?組員將需求分析結(jié)果愈加明確化，也為以后開發(fā)過(guò)程中做到了現(xiàn)實(shí)文本形式備忘，而且有利于主管人員以后開發(fā)項(xiàng)目提供有益借鑒和模范，成為項(xiàng)目開發(fā)中積累符合本身特點(diǎn)經(jīng)驗(yàn)財(cái)富。經(jīng)過(guò)市場(chǎng)調(diào)研活動(dòng)，清楚分析相同網(wǎng)站性能和運(yùn)行情況。能夠幫助項(xiàng)目責(zé)任人愈加清楚構(gòu)想出自己開發(fā)網(wǎng)站大致架構(gòu)和模樣，在總結(jié)同類網(wǎng)站優(yōu)勢(shì)和缺點(diǎn)同時(shí)項(xiàng)目開發(fā)人員能夠博采眾長(zhǎng)開發(fā)出愈加優(yōu)異網(wǎng)站。二、系統(tǒng)設(shè)計(jì)：1.系統(tǒng)目標(biāo)結(jié)合實(shí)際情況立即對(duì)用戶需求分析，365影視網(wǎng)應(yīng)該含有以下特點(diǎn)：操作簡(jiǎn)單方便、界面簡(jiǎn)練美觀。能夠全方面展示影片分類及影片具體信息。瀏覽速度快，避免長(zhǎng)時(shí)間打不開頁(yè)面情況發(fā)生。影片圖片清楚、文字醒目。系統(tǒng)運(yùn)行穩(wěn)定、安全可靠。易維護(hù)，并提供二次開發(fā)支持。2.系統(tǒng)功效結(jié)構(gòu)365影視網(wǎng)系統(tǒng)結(jié)構(gòu)

3.開發(fā)環(huán)境在開發(fā)365影視網(wǎng)時(shí)，該項(xiàng)目使用軟件開發(fā)環(huán)境：操作系統(tǒng)：Windows7。PHP運(yùn)行環(huán)境：phpStudy1103。jQuery版本：jquery-1.6.1.min.js。開發(fā)工具：DreamweaverCS6。瀏覽器：IE8.0。三、開發(fā)實(shí)現(xiàn)1.導(dǎo)航欄視圖具體代碼<divid="link"><tablecellapacing="0"cellpadding="0"width="100%"border="0"><tr><td><divclass="i01w"><tablecellspacing="0"cellpadding="0"width="100%"border="0"><tr><tdwidth="166"height="42"align="center"id="a0bg"><spanid="a0color"onMouseOver="showadv('a0,'a0color','a0bg')"><ahref="1.html"><fontcolor="#FA4A05">首頁(yè)</font></a></span></td><tdwidth="1"><imgsrc="images/1.gif"width="1"height="25"/></td><tdid="a1bg"align="center"width="166"><spanid="a1color"

onMouseOver="showadv('a1','a1color','a1bg')"><ahref="2.html">愛情片</a></span></td><tdwidth="1"><imgsrc="images/1.gif"width="1"height="25"/></td><tdid="a2bg"align="center"width="166"><spanid="a2color"onMouseOver="showadv('a2','a2color','a2bg')"><ahref="3.html">動(dòng)作片</a></span></td><tdwidth="1"><imgsrc="images/1.gif"width="1"height="25"/></td><tdid="a3bg"align="center"width="166"><spanid="a3color"onMouseOver="showadv('a3','a3color','a3bg')"><ahref="3333.html">科幻片</a></span></td><tdwidth="1"><imgsrc="images/1.gif"width="1"height="25"/></td><tdid="a4bg"align="center"width="166"><spanid="a4color"onMouseOver="showadv('a4','a4color','a4bg')"><ahref="4444.html">恐怖片</a></span></td><tdwidth="1"><imgsrc="images/1.gif"width="1"height="25"/></td></tr></table></div></td></tr><tr><td><tablewidth="100%"height="41"cellpadding="0"cellspacing="0"id="a0"border="0"><tr><tdalign="left"style="padding-left:12px">歡迎來(lái)到365影視網(wǎng)</td></tr></table><tableid="a1"style="display:none"height="41"cellspacing="0"cellpadding="0"width="100%"border="0"><tr><tdstyle="padding-left:137px"align="left"><ulclass="i02w"><li><ahref="2.html">愛情喜劇</a></li><li><ahref="3.html">古典愛情</a></li><li>現(xiàn)代愛情</li></ul></td></tr></table><tableid="a2"style="display:none"height="41"cellspacing="0"cellpadding="0"width="100%"border="0"><tr><tdstyle="padding-left:357px"align="left"><ulclass="i02w"><li><a>槍戰(zhàn)片</a></li><li><a>武俠片</a></li><li><a>魔幻片</a></li></ul></td></tr></table><tableid="a3"style="DISPLAY:none"height="41"cellspacing="0"cellpadding="0"width="100%"border="0"><tr><tdstyle="padding-left:540px"><ulclass="i02w"><li><a>外星人</a></li><li><a>自然災(zāi)難</a></li><li><a>生物變異</a></li></ul></td></tr></table><tableid="a4"style="display:none"height="41"cellspacing="0"cellpadding="0"width="100%"border="0"><tr><tdstyle="padding-left:750px"align="center"><ulclass="i02w">

<li><a>驚悚片</a></li><li><a>恐怖片</a></li><li><a>懸疑片</a></li></ul></td></tr></table> </td></tr></table></div>導(dǎo)航欄效果實(shí)現(xiàn)<scripttype="text/javascript"> functionshowadv(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)"; }</script>2.jQuery滑動(dòng)門效果<divid="tab1"class="tab_content"> <tablealign="center"width="300"border="0"cellpadding="0"cellspacing="0"><script>varnum=1;varnameArr=newArray("終止者5","颶風(fēng)營(yíng)救","我是傳奇","一線生機(jī)","羅馬假日","史密斯夫婦","午夜邂逅");vardnumArr=newArray("施瓦辛格","尼森","威爾","斯坦森","格里高利","布拉德","埃文斯");for(vari=0;i<nameArr.length;i++){document.write('<trheight="43">');document.write('<tdwidth="26"align="center"class="f_td">'+(num++)+'</<td>');document.write('<tdwidth="75"align="left"class="f_td"><ahref="#">'+nameArr[i]+'</td>');document.write('<tdwidth="90"align="right"class="f_td">'+dnumArr[i]+'</td></tr>');}</script></table></div><divid="tab2"class="tab_content"><tablealign="center"width="300"border="0"cellpadding="0"cellspacing="0"><script>

varnum=1;varnameArr=newArray("機(jī)械師","變形金剛","暮光之城","怦然心動(dòng)","電話情緣","蜘蛛俠","雷神");vardnumArr=newArray("斯坦森","拉伯夫","克里斯汀","卡羅爾","麥特卡爾菲","加菲爾德","海姆斯沃斯");for(vari=0;i<nameArr.length;i++){document.write('<trheight="43">');document.write('<tdwidth="26"align="center"class="f_td">'+(num++)+'</<td>');document.write('<tdwidth="75"align="left"class="f_td"><ahref="#">'+nameArr[i]+'</td>');document.write('<tdwidth="90"align="right"class="f_td">'+dnumArr[i]+'</td></tr>');}</script></table></div> JavaSceipt實(shí)現(xiàn)電影圖片不間斷滾動(dòng)具體代碼<divid="demo"class="top_box"style="overflow:hidden;width:1000px;height:264px"><tablewidth="100%"cellpadding="0"cellspacing="0"><tr><tdid="demo1"><tablecellpadding="0"cellspacing="0"><tr><tdwidth="191"height="200"style="padding-right:10px"><atarget="_blank"><imgsrc="images/01.jpg"width="191"height="200"border="0"/></a><divclass="title"><ahref="see/see6.html"target="_blank">速度和激情8</a></div><divclass="content">速度中激情對(duì)撞</div></td><tdwidth="191"height="200"style="padding-right:10px"><atarget="_blank"><imgsrc="images/02.jpg"width="191"height="200"border="0"/></a><divclass="title"><ahref="see/see7.html"target="_blank">戰(zhàn)狼</a></div><divclass="content">忠貞愛國(guó)情懷</div></td><tdwidth="191"height="200"style="padding-right:10px"><atarget="_blank"><imgsrc="images/03.jpg"width="191"height="200"border="0"/></a><divclass="title"><ahref="see/see8.html"target="_blank">鬼吹燈之尋龍?jiān)E</a></div><divclass="content">驚險(xiǎn)刺激盜墓冒險(xiǎn)</div></td><tdwidth="191"height="200"style="padding-right:10px"><atarget="_blank"><imgsrc="images/04.jpg"width="191"height="200"border="0"/></a><divclass="title"><ahref="see/see9.html"target="_blank">美國(guó)隊(duì)長(zhǎng)2</a></div><divclass="content">共同迎戰(zhàn)強(qiáng)大黑暗勁敵</div></td><tdwidth="191"height="200