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

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

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

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

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

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

第四章課程設(shè)計的部分代碼及截圖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人必留隊欽點紅黑軍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="#">國米簽阿森納鋒霸定了！本人點頭溫格開口放行</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>球隊</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="#">英名哨:小法那是絕對點球切爾西為假摔還債</a></li><li><ahref="#">切爾西一尊真龍變強無極限梅西能做的他也要做</a></li><li><ahref="#">切爾西又見半年前鬼影穆帥最強大招去哪了</a></li><li><ahref="#">切爾西造新版梅西+伊涅斯塔一狂神鎖定英超第1</a></li><li><ahref="#">00000！切爾西一把靈刀自殺穆帥最愛神牌變廢牌</a></li><li><ahref="#">穆帥暴怒:丑聞！英超在反切爾西裁判該羞愧</a></li><li><ahref="#">英超切爾西技術(shù)統(tǒng)計:空有傳控優(yōu)勢射正僅有1次</a></li></ul></div><divclass="blank"style="background:lightgreen"><h1>德甲賽事</h1></div><divclass="c1"><ul><li><ahref="#">隊報評百大球星：諾伊爾力壓C羅梅西居榜首</a></li><li><ahref="#">國家隊隊友讓香川變過去式德甲總進球超前輩傳奇</a></li><li><ahref="#">穆勒：瓜迪奧拉是最職業(yè)的教練他讓拜仁變更強</a></li><li><ahref="#">動人圣誕！德國小球隊震撼一幕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負墊底隊</a></li><li><ahref="#">還記得他嗎？前拜仁后衛(wèi)將出獄縱火燒自己房子</a></li></ul></div></div>底部和細節(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è)計心得在學(xué)習(xí)網(wǎng)頁制作的過程中，我深深體會到一點“有付出，就終有回報”，你的付出與你的回報終究是成正比的。經(jīng)過了多少漫漫長路，經(jīng)過了多少忘我的投入，經(jīng)過了多少波折，我的網(wǎng)頁與眾人見面了。當(dāng)我第一眼在網(wǎng)絡(luò)下一覽我的個人主頁，我是多么的激動，多么的興奮，就像多年未見的老同學(xué)，一種講不出道不明的感覺。做好主頁，并不是一件容易的事，它包括個人主頁的選題、內(nèi)容采集整理、圖片的處理、頁面的排版設(shè)置、背景及其整套網(wǎng)頁的色調(diào)等很多東西。

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