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

存檔資料成績：華東交通大學(xué)理工學(xué)院課程設(shè)計(jì)報(bào)告書所屬課程名稱網(wǎng)頁設(shè)計(jì)題目DIV+CSS制作靜態(tài)網(wǎng)頁分院電信分院專業(yè)班級信息管理與信息系統(tǒng)學(xué)號學(xué)生姓名指導(dǎo)教師2014年12月29日華東交通大學(xué)理工學(xué)院課程設(shè)計(jì)報(bào)告第3頁共24頁序號項(xiàng)目等級優(yōu)秀良好中等及格不及格1課程設(shè)計(jì)態(tài)度評價(jià)2出勤情況評價(jià)3任務(wù)難度評價(jià)4工作量飽滿評價(jià)5任務(wù)難度評價(jià)6設(shè)計(jì)中創(chuàng)新性評價(jià)7論文書寫規(guī)范化評價(jià)8綜合應(yīng)用能力評價(jià)綜合評定等級課程設(shè)計(jì)（論文）評閱意見評閱人職稱20年月日

目錄第一章課程設(shè)計(jì)的內(nèi)容與要求 4第二章網(wǎng)頁設(shè)計(jì)的思路 5第三章程序代碼與視圖 14第四章課程設(shè)計(jì)心得體會 23參考文獻(xiàn) 24

第一章課程設(shè)計(jì)的內(nèi)容與要求利用學(xué)過的網(wǎng)頁設(shè)計(jì)知識來制作一個(gè)網(wǎng)頁首頁，要求內(nèi)容有：建立站點(diǎn)；結(jié)構(gòu)分析；搭建框架；切割效果圖；布局頁面——頭部和導(dǎo)航；布局頁面——側(cè)邊欄；布局頁面——主體部分；底部細(xì)節(jié)和調(diào)整。

第二章網(wǎng)頁設(shè)計(jì)的思路2.1.建立站點(diǎn)用Editplus建立index.html2.2.結(jié)構(gòu)分析該網(wǎng)站頭部由6個(gè)導(dǎo)航欄和一個(gè)主體部分以及側(cè)邊欄和主要內(nèi)容，接下去的是最底部的內(nèi)容2.3.搭建框架標(biāo)題+導(dǎo)航欄標(biāo)題+導(dǎo)航欄主體部分1側(cè)邊欄主體部分2底部欄2.4.切割效果圖2.5.布局頁面——頭部和導(dǎo)航頭部由一個(gè)主體和六個(gè)選項(xiàng)頁構(gòu)成，清晰明朗，分布明了。主要代碼如下：<divclass="linehead"> <divclass="header"> <divclass="unitlogo_box"><ahref="index.html"><imgsrc="images/ht_logo.png"></a></div><divclass="unitnav"> <divclass="linelanguage_box"> <divclass="unitsele_lang"> <divclass="linesele_zw"><ahref="#">登錄</a></div><divclass="linesele_yw"><ahref="#">注冊</a></div></div> </div> <divclass="linenav_box"> <divclass="unit_head"> <ahref="index.html"><imgsrc="images/nav_01.jpg"></a></div></div>2.6.布局頁面——側(cè)邊欄側(cè)邊欄主要介紹美食特點(diǎn)，由一個(gè)總體說明和一些分類說明組成主要代碼如下：<divclass="unitactivities"> <divclass="lineacttop">南昌美食<br>activities</div><divclass="lineactbox"> <ul> <liclass="line"> <divclass="unitactimg"><ahref="#"><imgsrc="images/images001.jpg"></a></div><divclass="unitactwz"><ahref="#">美食</a>特色美食介紹</div></li></ul></div></div>2.7.布局頁面——主體部分主體部分主要由一張圖片帶入，再具體介紹一些活動，運(yùn)用了javascript語言和swf：<divclass="unitrightnews"> <divclass="linenewsbox"> <divclass="linenewsbox_top"> <divclass="unitnewstit">最新活動</div><divclass="unitnewsmore"><ahref="#"><imgsrc="images/more.jpg">more</a></div></div><divclass="line"> <ul> <liclass="newbox"> <divclass="unitnewbox_img"><ahref="#"><imgsrc="images/images002.jpg"></a></div><divclass="unitnewbox_wz"> <divclass="linenewbox_time">2012/08/27  PM:10:00</div><divclass="linenewbox_nr"><ahref="#">豫章酥鴨是一道江西漢族名菜，色澤紅亮，酥香味濃。制作方法：將凈鴨肚中塞入姜塊...</a></div></div></li><divclass="line"> <divclass="unitjianjie"> <divclass="line"> <divclass="unitjjtit">認(rèn)識南昌美食之米粉</div><divclass="unitjjimg"><ahref="#"><imgsrc="images/more.jpg">more</a></div></div><divclass="linejjwz">南昌米粉是江西省南昌地區(qū)著名的漢族小吃。江西是魚米之鄉(xiāng)，盛產(chǎn)大米，因此也有很多大米做的食品，其中米粉是老百姓日常主食，炒粉為江西民間的一種食物，是將粉（南方人叫米粉，江右人通常就叫粉。形狀為圓條狀，白色，用米漿做）煮熟，再撈起（撈起后可持續(xù)晾干放置數(shù)小時(shí)，晾干放置時(shí)間的長短會影響到炒粉的硬度和口感），然后將粉放入油鍋翻炒加一些青菜等蔬菜，炒數(shù)分鐘即可。</div></div><divclass="unitphotoji"> <divclass="line"> <divclass="unitphotostit">精彩圖片集合</div><divclass="unitphotosimg"><ahref="#"><imgsrc="images/more.jpg">more</a></div></div><divclass="linephotos"><scripttype="text/javascript"src="js/xixi.js"></script> <divid="imager_div"><objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="/pub/shockwave/cabs/flash/swflash.cab#version=8"type="application/x-shockwave-flash"height="244"width="268">

<paramname="movie"value="swf/shis.swf"> <paramname="quality"value="high"> <paramname="bgcolor"value="#fff"> <paramname="allowscriptaccess"value="always"> <paramname="wmode"value="opaque"> <paramname="flashvars"value="p_array=images/01.jpg|images/02.jpg|images/03.jpg&txt_array=米粉|竹筒粉蒸腸|豫章酥鴨&link_array=/|/|/"> <embedsrc="swf/shis.swf"quality="high"pluginspage="/go/getflashplayer"type="application/x-shockwave-flash"bgcolor="#"allowscriptaccess="always"wmode="opaque"flashvars="p_array=images/01.jpg|images/02.jpg|images/03.jpg&txt_array=米粉|竹筒粉蒸腸|豫章酥鴨&link_array=/|/|/"height="244"width="268"></object></div><scriptlanguage="javascript"type="text/javascript">varswf=newsinaFlash("swf/shis.swf","","268","244","8","#fff",true,"high");swf.addParam("allowScriptAccess","always");swf.addParam("wmode","opaque");swf.addVariable("p_array","images/01.jpg|images/02.jpg|images/03.jpg");swf.addVariable("txt_array","米粉|竹筒粉蒸腸|豫章酥鴨");swf.addVariable("link_array","/|/|/");swf.write("imager_div");</script></div></div></div></div>2.8.底部和細(xì)節(jié)調(diào)整<divclass="foot"> <divclass="footer"> <divclass="linefootbox01"><ahref="#">關(guān)于南昌美食</a>|<ahref="#">加入我們</a>|<ahref="#">聯(lián)系我們</a>|<ahref="#">了解我們</a></div></div></div>

第三章程序代碼與視圖頁面視圖：源代碼：<body><divclass="index"> <divclass="linehead"> <divclass="header"> <divclass="unitlogo_box"><ahref="index.html"><imgsrc="images/ht_logo.png"/></a></div><divclass="unitnav"> <divclass="linelanguage_box"> <divclass="unitsele_lang"> <divclass="linesele_zw"><ahref="#">登錄</a></div><divclass="linesele_yw"><ahref="#">注冊</a></div></div> </div> <divclass="linenav_box"> <divclass="unit_head"> <ahref="index.html"><imgsrc="images/nav_01.jpg"/></a></div> <divclass="unit_head"> <ahref="#"><imgsrc="images/nav_02.jpg"/></a></div><divclass="unit_head"> <ahref="#"><imgsrc="images/nav_03.jpg"/></a> </div><divclass="unit_head"> <ahref="#"><imgsrc="images/nav_06.jpg"/></a></div><divclass="unit_head"> <ahref="#"><imgsrc="images/nav_04.jpg"/></a> </div><divclass="unit_head"><ahref="#"><imgsrc="images/nav_05.jpg"/></a> </div></div></div></div></div><divclass="linebody"> <divclass="linebanner"> <!--containerfortheslides--> <divclass="linebanner_images"><!--"previousslide"button--><aclass="backward">prev</a> <divstyle="display:none;"> <imgsrc="images/banner_big001.jpg"/> </div> <divstyle="display:none;"> <imgsrc="images/banner_big002.jpg"/> </div> <divstyle="display:none;"> <imgsrc="images/banner_big003.jpg"/> </div> <divstyle="display:none;"> <imgsrc="images/banner_big002.jpg"/> </div> <divstyle="display:none;"> <imgsrc="images/banner_big001.jpg"/> </div><!--"nextslide"button--><aclass="forward">next</a> </div> <!--thetabs--> <divclass="slidetabs"> <aclass=""href="#"id="banner_icon001"></a> <aclass="current"href="#"id="banner_icon002"></a> <ahref="#"id="banner_icon003"></a> <ahref="#"id="banner_icon004"></a> <ahref="#"id="banner_icon005"></a> </div> <SCRIPT> $(function(){$(".nav_boxdiv.sub>a").tooltip({ position:"bottomcenter", offset:[-2,0], delay:3, effect:'fade', onBeforeShow:function(){ this.getTrigger().parent().addClass('cu-hover'); }, onBeforeHide:function(){ this.getTrigger().parent().removeClass("cu-hover"); }});$(".slidetabs").tabs(".banner_images>div",{effect:'fade',fadeOutSpeed:"slow",rotate:true, clickable:false}).slideshow({ interval:3000, autoplay:false, onBeforePlay:function(event){ console.log('obplay'); }, onPlay:function(event){ console.log('oplay'); }, onPause:function(event){ console.log('paused'); } }); $('.banner_imagesimg').ready(function(){ console.log('playing'); $(".slidetabs").data("slideshow").play(); console.log('playing2'); $(".slidetabs").data("slideshow").pause(); console.log('playing3'); setTimeout("$('.slidetabs').data('slideshow').play();",2000); console.log('playing4');});}); </SCRIPT></div><divclass="lineneirong"> <divclass="unitactivities"> <divclass="lineacttop">南昌美食<br/>activities</div><divclass="lineactbox"> <ul> <liclass="line"> <divclass="unitactimg"><ahref="#"><imgsrc="images/images001.jpg"/></a></div><divclass="unitactwz"><ahref="#">美食</a>特色美食介紹</div></li><liclass="line"> <divclass="unitactimg"><ahref="#"><imgsrc="images/images001.jpg"/></a></div><divclass="unitactwz"><ahref="#">美食</a>特色美食介紹</div></li><liclass="line"> <divclass="unitactimg"><ahref="#"><imgsrc="images/images001.jpg"/></a></div><divclass="unitactwz"><ahref="#">美食</a>特色美食介紹</div></li><liclass="line"> <divclass="unitactimg"><ahref="#"><imgsrc="images/images001.jpg"/></a></div><divclass="unitactwz"><ahref="#">美食</a>特色美食介紹</div></li><liclass="line"> <divclass="unitactimg"><ahref="#"><imgsrc="images/images001.jpg"/></a></div><divclass="unitactwz"><ahref="#">美食</a>特色美食介紹</div></li><liclass="line"> <divclass="unitactimg"><ahref="#"><imgsrc="images/images001.jpg"/></a></div><divclass="unitactwz"><ahref="#">美食</a>特色美食介紹</div></li><liclass="line"> <divclass="unitactimg"><ahref="#"><imgsrc="images/images001.jpg"/></a></div><divclass="unitactwz"><ahref="#">美食</a>特色美食介紹</div></li></ul></div></div><divclass="unitrightnews"> <divclass="linenewsbox"> <divclass="linenewsbox_top"> <divclass="unitnewstit">最新活動</div><divclass="unitnewsmore"><ahref="#l"><imgsrc="images/more.jpg"/>more</a></div></div><divclass="line"> <ul> <liclass="newbox"> <divclass="unitnewbox_img"><ahref="#"><imgsrc="images/images002.jpg"/></a></div><divclass="unitnewbox_wz"> <divclass="linenewbox_time">2012/08/27  PM:10:00</div><divclass="linenewbox_nr"><ahref="#">豫章酥鴨是一道江西漢族名菜，色澤紅亮，酥香味濃。制作方法：將凈鴨肚中塞入姜塊...</a></div></div></li><liclass="newbox"> <divclass="unitnewbox_img"><ahref="#"><imgsrc="images/images002.jpg"/></a></div><divclass="unitnewbox_wz"> <divclass="linenewbox_time">2012/08/27  PM:10:00</div><divclass="linenewbox_nr"><ahref="#">豫章酥鴨是一道江西漢族名菜，色澤紅亮，酥香味濃。制作方法：將凈鴨肚中塞入姜塊...</a></div></div></li><liclass="newbox"> <divclass="unitnewbox_img"><ahref="#"><imgsrc="images/images002.jpg"/></a></div><divclass="unitnewbox_wz"> <divclass="linenewbox_time">2012/08/27  PM:10:00</div><divclass="linenewbox_nr"><ahref="#">豫章酥鴨是一道江西漢族名菜，色澤紅亮，酥香味濃。制作方法：將凈鴨肚中塞入姜塊...</a></div></div></li><liclass="newbox"> <divclass="unitnewbox_img"><ahref="#"><imgsrc="images/images002.jpg"/></a></div><divclass="unitnewbox_wz"> <divclass="linenewbox_time">2012/08/27  PM:10:00</div><divclass="linenewbox_nr"><ahref="#">豫章酥鴨是一道江西漢族名菜，色澤紅亮，酥香味濃。制作方法：將凈鴨肚中塞入姜塊...</a></div></div></li></ul></div></div><divclass="line"> <divclass="unitjianjie"> <divclass="line"> <divclass="unitjjtit">認(rèn)識南昌美食之米粉</div><divclass="unitjjimg"><ahref="#"><imgsrc="images/more.jpg"/>more</a></div></div><divclass="linejjwz">南昌米粉是江西省南昌地區(qū)著名的漢族小吃。江西是魚米之鄉(xiāng)，盛產(chǎn)大米，因此也有很多大米做的食品，其中米粉是老百姓日常主食，炒粉為江西民間的一種食物，是將粉（南方人叫米粉，江右人通常就叫粉。形狀為圓條狀，白色，用米漿做）煮熟，再撈起（撈起后可持續(xù)晾干放置數(shù)小時(shí)，晾干放置時(shí)間的長短會影響到炒粉的硬度和口感），然后將粉放入油鍋翻炒加一些青菜等蔬菜，炒數(shù)分鐘即可。</div></div><divclass="unitphotoji"> <divclass="line"> <divclass="unitphotostit">精彩圖片集合</div><divclass="unitphotosimg"><ahref="#"><imgsrc="images/more.jpg"/>more</a></div></div>