靜態(tài)設(shè)計(jì)頁面的制作-課程設(shè)計(jì)

PAGE存檔資料成績：華東交通大學(xué)理工學(xué)院課程設(shè)計(jì)報(bào)告書所屬課程名稱網(wǎng)頁設(shè)計(jì)與網(wǎng)頁制作題目靜態(tài)設(shè)計(jì)頁面的制作分院電信分院專業(yè)班級信管2班學(xué)號20120210450221學(xué)生姓名 熊武指導(dǎo)教師魏建紅2014年12月29日華東交通大學(xué)理工學(xué)院課程設(shè)計(jì)報(bào)告PAGE29第頁共29頁序號項(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ì)（論文）評閱意見評閱人職稱2014年12月

目錄TOC\o"1-1"\h\z\u第一章課程設(shè)計(jì)內(nèi)容及要求 4第二章課程設(shè)計(jì)目的及流程 5第三章課程設(shè)計(jì)方法及步驟 6第四章課程設(shè)計(jì)的部分代碼及截圖 10第五章課程設(shè)計(jì)心得 27第六章參考文獻(xiàn) 28

第一章課程設(shè)計(jì)內(nèi)容及要求一.課程設(shè)計(jì)題目用已經(jīng)學(xué)過的網(wǎng)站開發(fā)技術(shù)及開發(fā)工具DW，根據(jù)網(wǎng)站首頁效果圖，利用DIV+CSS設(shè)計(jì)出一個《網(wǎng)站首頁》。二.課程設(shè)計(jì)內(nèi)容及要求內(nèi)容有：1．建立站點(diǎn)；2．結(jié)構(gòu)分析；3．搭建框架；4．切割效果圖；5．布局頁面——頭部和導(dǎo)航；6．布局頁面——側(cè)邊欄；7．布局頁面——主體部分；8．底部和細(xì)節(jié)調(diào)整要求有：運(yùn)用DIV+CSS設(shè)計(jì)出一個靜態(tài)頁面，做到簡潔，清晰，明了。

第二章課程設(shè)計(jì)目的及流程一.課程設(shè)計(jì)目的：1.通過課設(shè)的制作，來加深同學(xué)對網(wǎng)頁設(shè)計(jì)的認(rèn)識和制做。同時(shí)也加強(qiáng)了對同學(xué)的實(shí)際操作能力。2.要尊重瀏覽者體驗(yàn)，網(wǎng)站不是做給自己看的。一.課程設(shè)計(jì)流程：確定主題搭建版式風(fēng)格畫好框架DW把div框架搭建具體內(nèi)容的添加

第三章課程設(shè)計(jì)方法及步驟確定主題搭建版式風(fēng)格畫好框架DW把div框架搭建具體內(nèi)容的添加一.課程設(shè)計(jì)方法：1.建立站點(diǎn) 打開DW，建立名為website站點(diǎn)2.結(jié)構(gòu)分析頭部LOGO導(dǎo)航欄內(nèi)容框左邊部分內(nèi)容上面部分下面部分右邊部分內(nèi)容中間部分下面部分尾部3.搭建框架4.切割效果圖5.布局頁面——頭部和導(dǎo)航6.布局頁面——側(cè)邊欄7.布局頁面——主體部分8.底部和細(xì)節(jié)調(diào)整

第四章課程設(shè)計(jì)的部分代碼及截圖1、html代碼頭部和導(dǎo)航欄<divid="head"><divid="head_contend"><divid="first">足球天下</div><divid="index">首頁</div><divid="admin">登陸</div></div></div><divid="body"> <divid="logo"><h1>綠茵場</h1></div><divid="rad"><ulclass="rad"><li><ahref="#">首頁</a></li><li><ahref="#">聯(lián)賽</a></li><li><ahref="#">直播</a></li><li><ahref="#">歐洲</a></li><li><ahref="#">南美</a></li><li><ahref="#">亞洲</a></li></ul></div>側(cè)邊欄<divid="content"><divclass="blank"style="background:aquamarine"><h1>最新消息</h1></div><divid="content_top"><ul><li><ahref="#">巴神自曝回國米？！打包回家悍將迎接：歡迎</a></li><li><ahref="#">因扎吉親口宣布AC米蘭1人必留隊(duì)欽點(diǎn)紅黑軍2珍寶</a></li><li><ahref="#">卡佩羅：AC米蘭國米路還很長3年不犯錯能緩過來</a></li><li><ahref="#">梅西制霸之路添新版圖這次他想當(dāng)歐洲聯(lián)賽射手王</a></li><li><ahref="#">皇馬公布戰(zhàn)AC米蘭22人名單這場球皇馬賺足400萬</a></li><li><ahref="#">國米簽阿森納鋒霸定了！本人點(diǎn)頭溫格開口放行</a></li><li><ahref="#">皇馬更衣室回應(yīng)穆里尼奧：希望歐冠能遇到你！</a></li></ul></div><divclass="blank"style="background:lightgreen"><h1>積分榜</h1></div><divid="content_bottom"><table><tr><th>英超積分榜</th></tr><tr><td>排名</td><td>球隊(duì)</td><td>場次</td><td>積分</td></tr><tr><td>1</td><td>切爾西</td><td>19</td><td>46</td></tr><tr><td>2</td><td>曼城</td><td>19</td><td>46</td></tr><tr><td>3</td><td>曼聯(lián)</td><td>19</td><td>46</td></tr><tr><td>4</td><td>開普敦</td><td>19</td><td>33</td></tr><tr><td>5</td><td>切爾西</td><td>19</td><td>33</td></tr><tr><td>6</td><td>阿森納</td><td>19</td><td>33</td></tr><tr><td>7</td><td>熱刺</td><td>18</td><td>46</td></tr><tr><td>8</td><td>西漢姆聯(lián)</td><td>18</td><td>46</td></tr></table></div></div>主題部分<divid="content1"><divid="slid"><divid="img"><divclass="b1"style="background-image:url('1.jpg.png')"></div><divclass="b2"style="background-image:url('2.fw.png')"></div><divclass="b3"style="background-image:url('3.fw.png')"></div><divclass="b4"style="background-image:url('4.fw.png')"></div></div><divid="mcimg"><divid="p1"></div><divid="p2"></div><divid="p3"></div><divid="p4"></div></div></div></div><divid="boot"><divclass="blank"style="background:lightgreen"><h1>英超賽事</h1></div><divclass="c1"><ul><li><ahref="#">拿命死磕這就是英超！皇馬巴薩來英超會如何</a></li><li><ahref="#">英名哨:小法那是絕對點(diǎn)球切爾西為假摔還債</a></li><li><ahref="#">切爾西一尊真龍變強(qiáng)無極限梅西能做的他也要做</a></li><li><ahref="#">切爾西又見半年前鬼影穆帥最強(qiáng)大招去哪了</a></li><li><ahref="#">切爾西造新版梅西+伊涅斯塔一狂神鎖定英超第1</a></li><li><ahref="#">00000！切爾西一把靈刀自殺穆帥最愛神牌變廢牌</a></li><li><ahref="#">穆帥暴怒:丑聞！英超在反切爾西裁判該羞愧</a></li><li><ahref="#">英超切爾西技術(shù)統(tǒng)計(jì):空有傳控優(yōu)勢射正僅有1次</a></li></ul></div><divclass="blank"style="background:lightgreen"><h1>德甲賽事</h1></div><divclass="c1"><ul><li><ahref="#">隊(duì)報(bào)評百大球星：諾伊爾力壓C羅梅西居榜首</a></li><li><ahref="#">國家隊(duì)隊(duì)友讓香川變過去式德甲總進(jìn)球超前輩傳奇</a></li><li><ahref="#">穆勒：瓜迪奧拉是最職業(yè)的教練他讓拜仁變更強(qiáng)</a></li><li><ahref="#">動人圣誕！德國小球隊(duì)震撼一幕3萬個溫暖靈魂</a></li><li><ahref="#">海因克斯：我推薦羅伊斯加盟皇馬拜仁那位置人多</a></li><li><ahref="#">傷病錯過世界杯丑聞--2014成羅伊斯最慘的一年</a></li><li><ahref="#">多特官方宣布簽冬季首援東歐飛翼接班羅伊斯？</a></li><li><ahref="#">德國名模示愛羅伊斯:你去拜仁我就是你的(圖)</a></li><li><ahref="#">德甲-狼堡2-1逆轉(zhuǎn)穩(wěn)居次席多特1-2負(fù)墊底隊(duì)</a></li><li><ahref="#">還記得他嗎？前拜仁后衛(wèi)將出獄縱火燒自己房子</a></li></ul></div></div>底部和細(xì)節(jié)調(diào)整<divid="root"><center><p>Copyright?2014熊武,AllRightsReserved</p></center></div>2、CSS代碼*{margin:0px;padding:0px;font-family:"微軟雅黑";}#head{background-color:deepskyblue;height:50px;width:100%;box-shadow:cornflowerblue5px5px5px;position:fixed;float:top;z-index:100;}#head#head_contend{margin-left:15%;background-color:chartreuse;height:50px;width:75%;}#head_contend#first{text-align:left;background:powderblue;width:200px;height:50px;float:left;}#head_contend#admin{text-align:center;background:lightblue;height:50px;width:50px;float:right;}#head_contend#index{text-align:center;background:darkseagreen;height:50px;width:50px;float:right;}#body{margin-left:15%;padding-top:10px;width:75%;float:top;z-index:0;}#logo{ height:50px;margin-top:50px;padding:0;}#rad{margin:5px;height:50px;width:100%;border-radius:10px;box-shadow:darkcyan5px5px10px;}#content{border-radius:10px;width:30%;box-shadow:darkcyan5px5px10px;float:left;padding:15px;}#content#content_top{border:5pxdimgreysolid;border-radius:10px;width:100%;box-shadow:darkcyan5px5px10px;position:relative;float:left;margin-right:5px;background:greenyellow;;}#content#content_center{border:5pxdimgreysolid;border-radius:10px;width:100%;box-shadow:darkcyan5px5px10px;position:relative;float:left;margin-right:5px;background:turquoise;}#content#content_bottom{border:5pxdimgreysolid;border-radius:10px;width:100%;box-shadow:darkcyan5px5px10px;position:relative;float:left;margin-right:5px;background:palegreen;}#content1{border:5pxdimgreysolid;border-radius:10px;width:65%;height:250px;box-shadow:darkcyan5px5px10px;float:left;background:powderblue;}#content1#slid{height:100%;width:100%;margin:4px;padding:2px;}#slid#img{border:solid2pxrosybrown;height:190px;width:98%;box-shadow:lightblue2px2px2px;padding-top:2px;}#slid#mcimg{border:2pxdarkcyansolid;height:40px;margin-top:2px;width:58%;padding-left:40%;padding-top:2px;overflow:hidden;}#boot{border:5pxdimgreysolid;border-radius:10px;width:65%;height:500px;box-shadow:darkcyan5px5px10px;float:left;}#boot.c1{border:solid2pxgreenyellow;border-radius:5px;width:98%;height:200px;box-shadow:darkcyan5px5px10px;float:top;}#root{border:5pxdimgreysolid;border-radius:10px;width:100%;height:50px;box-shadow:darkcyan5px5px10px;float:left;background-color:deepskyblue;}#p1{background:cornflowerblue;width:35px;height:35px;float:left;box-shadow:darkcyan5px5px10px;}#p2{background:orange;width:35px;height:35px;float:left;box-shadow:darkcyan5px5px10px;}#p3{background:chartreuse;width:35px;height:35px;float:left;box-shadow:darkcyan5px5px10px;}#p4{background:orchid;width:35px;height:35px;float:left;box-shadow:darkcyan5px5px10px;}.b1{width:47%;height:28%;float:left;box-shadow:darkcyan5px5px10px;position:absolute;}.b2{background:chartreuse;width:47%;height:28%;float:left;font-size:40px;box-shadow:darkcyan5px5px10px;position:absolute;display:none;}.b3{background:orange;width:47%;height:28%;float:left;box-shadow:darkcyan5px5px10px;position:absolute;display:none;}.b4{background:cornflowerblue;width:47%;height:28%;float:left;box-shadow:darkcyan5px5px10px;position:absolute;display:none;}h1{color:chocolate;font-family:sans-serif;}ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}.radli{float:left;}.rada:link,a:visited{display:block;width:150px;height:32px;font-weight:bold;color:#FFFFFF;background-color:lightblue;text-align:center;padding:4px;text-decoration:none;text-transform:uppercase;padding-top:10px;}.rada:hover,a:active{background-color:aqua;}.blank{border:5pxdimgreysolid;border-radius:10px;width:98%;box-shadow:darkcyan5px5px10px;float:top;margin-bottom:5px;}.c1a{color:dodgerblue;}#logoh1{color:lime;}#logoh2{color:dodgerblue;}#content_topa{color:dodgerblue;}3、JS代碼/***Createdbyxxon2014/12/28.*/$(document).ready(function(){$("#p1").mouseenter(function(){varp1=$("#p1");p1.css({background:'#00ced1',boxshadow:'red5px5px5px',fontsize:'25px'});p1.css({border:'solid2pxlavender'})$(".b1").css({display:'inherit'})$(".b2").css({display:'none'})$(".b3").css({display:'none'})$(".b4").css({display:'none'})})$("#p1").mouseleave(function(){varp1=$("#p1");varp1=$("#p1");p1.css({background:'cornflowerblue'});})$("#p2").mouseenter(function(){varp2=$("#p2");p2.css({background:'#00ced1'});$(".b2").css({display:'inherit'})$(".b1").css({display:'none'})$(".b3").css({display:'none'})$(".b4").css({display:'none'})})$("#p2").mouseleave(function(){varp2=$("#p2");p2.css({background:'orange'});})$("#p3").mouseenter(function(){varp3=$("#p3");p3.css({background:'#00ced1'});$(".b3").css({display:'inherit'})$(".b1").css({display:'none'})$(".b2").css({display:'none'})$(".b4").css({display:'none'})})$("#p3").mouseleave(function(){varp3=$("#p3");p3.css({background:'chartreuse'});})$("#p4").mouseenter(function(){varp4=$("#p4");p4.css({background:'#00ced1'})$(".b4").css({display:'inherit'})$(".b1").css({display:'none'})$(".b3").css({display:'none'})$(".b2").css({display:'none'})})$("#p4").mouseleave(function(){varp4=$("#p4");sp4.css({background:'orchid'})})})第五章課程設(shè)計(jì)心得在學(xué)習(xí)網(wǎng)頁制作的過程中，我深深體會到一點(diǎn)“有付出，就終有回報(bào)”，你的付出與你的回報(bào)終究是成正比的。經(jīng)過了多少漫漫長路，經(jīng)過了多少忘我的投入，經(jīng)過了多少波折，我的網(wǎng)頁與眾人見面了。當(dāng)我第一眼在網(wǎng)絡(luò)下一覽我的個人主頁，我是多么的激動，多么的興奮，就像多年未見的老同學(xué)，一種講不出道不明的感覺。做好主頁，并不是一件容易的事，它包括個人主頁的選題、內(nèi)容采集整理、圖片的處理、頁面的排版設(shè)置、背景及其整套網(wǎng)頁的色調(diào)等很多東西。

第六章參考文獻(xiàn)[1]謝希仁.計(jì)算機(jī)網(wǎng)絡(luò)（第五版）[M].北京：電子工業(yè)出版社，2008年2月[2]胡小強(qiáng)計(jì)算機(jī)網(wǎng)絡(luò)[M]北京：北京郵電大學(xué)出版社2005年1月[3]李濟(jì)國計(jì)算機(jī)網(wǎng)絡(luò)上海：上海交通大學(xué)出版社2012年3月[4]張和計(jì)算機(jī)網(wǎng)絡(luò)完全北京：北京電子大學(xué)出版社2006年5月[5]劉賀計(jì)算機(jī)網(wǎng)絡(luò)西安：西安電子工業(yè)大學(xué)出版社2008年8月致謝基于C8051F單片機(jī)直流電動機(jī)反饋控制系統(tǒng)的設(shè)計(jì)與研究基于單片機(jī)的嵌入式Web服務(wù)器的研究MOTOROLA單片機(jī)MC68HC（8）05PV8/A內(nèi)嵌EEPROM的工藝和制程方法及對良率的影響研究基于模糊控制的電阻釬焊單片機(jī)溫度控制系統(tǒng)的研制基于MCS-51系列單片機(jī)的通用控制模塊的研究基于單片機(jī)實(shí)現(xiàn)的供暖系統(tǒng)最佳啟停自校正（STR）調(diào)節(jié)器單片機(jī)控制的二級倒立擺系統(tǒng)的研究基于增強(qiáng)型51系列單片機(jī)的TCP/IP協(xié)議棧的實(shí)現(xiàn)基于單片機(jī)的蓄電池自動監(jiān)測系統(tǒng)基于32位嵌入式單片機(jī)系統(tǒng)的圖像采集與處理技術(shù)的研究基于單片機(jī)的作物營養(yǎng)診斷專家系統(tǒng)的研究基于單片機(jī)的交流伺服電機(jī)運(yùn)動控制系統(tǒng)研究與開發(fā)基于單片機(jī)的泵管內(nèi)壁硬度測試儀的研制基于單片機(jī)的自動找平控制系統(tǒng)研究基于C8051F040單片機(jī)的嵌入式系統(tǒng)開發(fā)基于單片機(jī)的液壓動力系統(tǒng)狀態(tài)監(jiān)測儀開發(fā)模糊Smith智能控制方法的研究及其單片機(jī)實(shí)現(xiàn)一種基于單片機(jī)的軸快流CO〈,2〉激光器的手持控制面板的研制基于雙單片機(jī)沖床數(shù)控系統(tǒng)的研究基于CYGNAL單片機(jī)的在線間歇式濁度儀的研制基于單片機(jī)的噴油泵試驗(yàn)臺控制器的研制基于單片機(jī)的軟起動器的研究和設(shè)計(jì)基于單片機(jī)控制的高速快走絲電火花線切割機(jī)床短循環(huán)走絲方式研究基于單片機(jī)的機(jī)電產(chǎn)品控制系統(tǒng)開發(fā)基于PIC單片機(jī)的智能手機(jī)充電器基于單片機(jī)的實(shí)時(shí)內(nèi)核設(shè)計(jì)及其應(yīng)用研究基于單片機(jī)的遠(yuǎn)程抄表系統(tǒng)的設(shè)計(jì)與研究基于單片機(jī)的煙氣二氧化硫濃度檢測儀的研制基于微型光譜儀的單片機(jī)系統(tǒng)單片機(jī)系統(tǒng)軟件構(gòu)件開發(fā)的技術(shù)研究基于單片機(jī)的液體點(diǎn)滴速度自動檢測儀的研制基于單片機(jī)系統(tǒng)的多功能溫度測量儀的研制基于PIC單片機(jī)的電能采集終端的設(shè)計(jì)和應(yīng)用基于單片機(jī)的光纖光柵解調(diào)儀的研制氣壓式線性摩擦焊機(jī)單片機(jī)控制系統(tǒng)的研制基于單片機(jī)的數(shù)字磁通門傳感器基于單片機(jī)的旋轉(zhuǎn)變壓器-數(shù)字轉(zhuǎn)換器的研究基于單片機(jī)的光纖Bragg光柵解調(diào)系統(tǒng)的研究單片機(jī)控制的便攜式多功能乳腺治療儀的研制基于C8051F020單片機(jī)的多生理信號檢測儀基于單片機(jī)的電機(jī)運(yùn)動控制系統(tǒng)設(shè)計(jì)Pico專用單片機(jī)核的可測性設(shè)計(jì)研究基于MCS-51單片機(jī)的熱量計(jì)基于雙單片機(jī)的智能遙測微型氣象站MCS-51單片機(jī)構(gòu)建機(jī)器人的實(shí)踐研究基于單片機(jī)的輪軌力檢測基于單片機(jī)的GPS定位儀的研究與實(shí)現(xiàn)基于單片機(jī)的電液伺服控制系統(tǒng)用于單片機(jī)系統(tǒng)的MMC卡文件系統(tǒng)研制基于單片機(jī)的時(shí)控和計(jì)數(shù)系統(tǒng)性能優(yōu)化的研究基于單片機(jī)和CPLD的粗光柵位移測量系統(tǒng)研究單片機(jī)控制的后備式方波UPS提升高職學(xué)生單片機(jī)應(yīng)用能力的探究基于單片機(jī)控制的自動低頻減載裝置研究基于單片機(jī)控制的水下焊接電源的研究基于單片機(jī)的多通道數(shù)據(jù)采集系統(tǒng)基于uPSD3234單片機(jī)的氚表面污染測量儀的研制基于單片機(jī)的紅外測油儀的研究96系列單片機(jī)仿真器研究與設(shè)計(jì)基于單片機(jī)的單晶金剛石刀具刃磨設(shè)備的數(shù)控改造基于單片機(jī)的溫度智能控制系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)基于MSP430單片機(jī)的電梯門機(jī)控制器的研制基于單片機(jī)的氣體測漏儀的研究基于三菱M16C/6N系列單片機(jī)的CAN/USB協(xié)議轉(zhuǎn)換器基于單片機(jī)和DSP的變壓器油色譜在線監(jiān)測技術(shù)研究基于單片機(jī)的膛壁溫度報(bào)警系統(tǒng)設(shè)計(jì)基于AVR單片機(jī)的低壓無功補(bǔ)償控制器的設(shè)計(jì)基于單片機(jī)船舶電力推進(jìn)電機(jī)監(jiān)測系統(tǒng)基于單片機(jī)網(wǎng)絡(luò)的振動信號的采集系統(tǒng)基于單片機(jī)的大容量數(shù)據(jù)存儲技術(shù)的應(yīng)用研究基于單片機(jī)的疊圖機(jī)研究與教學(xué)方法實(shí)踐基于單片機(jī)嵌入式Web服務(wù)器技術(shù)的研究及實(shí)現(xiàn)基于AT89S52單片機(jī)的通用數(shù)據(jù)采集系統(tǒng)基于單片機(jī)的多道脈沖幅度分析儀研究機(jī)器人旋轉(zhuǎn)電弧傳感角焊縫跟蹤單片機(jī)控制系統(tǒng)基于單片機(jī)的控制系統(tǒng)在PLC虛擬教學(xué)實(shí)驗(yàn)中的應(yīng)用研究基于單片機(jī)系統(tǒng)的網(wǎng)絡(luò)通信研究與應(yīng)用基于PIC16F877單片機(jī)的莫爾斯碼自動譯碼系統(tǒng)設(shè)計(jì)與研究基于單片機(jī)的模糊控制器在工業(yè)電阻爐上的應(yīng)用研究基于雙單片機(jī)沖床數(shù)控系統(tǒng)的研究與開發(fā)基于Cygnal單片機(jī)的μC/OS-Ⅱ的研究基于單片機(jī)的一體化智能差示掃描量熱儀系統(tǒng)研究基于TCP/IP協(xié)議的單片機(jī)與Internet互聯(lián)的研究與實(shí)現(xiàn)變頻調(diào)速液壓電梯單片機(jī)控制器的研究基于單片機(jī)γ-免疫計(jì)數(shù)器自動換樣功能的研究與實(shí)現(xiàn)基于單片機(jī)的倒立擺控制系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)