《網(wǎng)站設(shè)計(jì)與網(wǎng)頁(yè)制作》課程設(shè)計(jì)

1、<p><b>　　課程設(shè)計(jì)報(bào)告</b></p><p>　　所 在 系： 電氣工程系 </p><p>　　專(zhuān)業(yè)班級(jí)： 計(jì)算機(jī)科學(xué)與技術(shù)2班 </p><p>　　學(xué) 號(hào)： </p><p>　　姓 名：

2、 </p><p>　　指導(dǎo)老師： </p><p><b>　　2017年4月</b></p><p><b>　　目錄</b></p><p>　　1.網(wǎng)站的概述---------------------

3、------------4</p><p>　　2.網(wǎng)站的初期規(guī)劃------------------------------4</p><p>　　2.1.網(wǎng)站風(fēng)格-------------------------------4</p><p>　　2.2.網(wǎng)站框架和布局---------------------------4</p><p&g

4、t;　　2.3.網(wǎng)站總體內(nèi)容模塊--------------------------4</p><p>　　2.4.網(wǎng)站logo設(shè)計(jì)----------------------------5</p><p>　　3.工具和技術(shù)----------------------------------5</p><p>　　3.1.工具-------------------

5、--------------5</p><p>　　3.2.技術(shù)---------------------------------5</p><p>　　4.網(wǎng)站實(shí)現(xiàn)-----------------------------------5</p><p>　　4.1.導(dǎo)航模塊------------------------------6 </p>&l

6、t;p>　　4.1.1.模塊設(shè)計(jì)思路----------------------6</p><p>　　4.1.2.模塊界面截圖----------------------6</p><p>　　4.1.3.模塊實(shí)現(xiàn)主要代碼--------------------6</p><p>　　4.2.輪播器模塊----------------------------

7、-7</p><p>　　4.2.1.模塊設(shè)計(jì)思路----------------------7</p><p>　　4.2.2.模塊界面截圖----------------------7</p><p>　　4.2.3.模塊實(shí)現(xiàn)主要代碼--------------------9</p><p>　　4.3.內(nèi)容模塊-------------

8、----------------13</p><p>　　4.3.1.模塊設(shè)計(jì)思路---------------------13</p><p>　　4.3.2.模塊界面截圖---------------------13</p><p>　　4.3.3.模塊實(shí)現(xiàn)主要代碼-------------------16</p><p>　　5.網(wǎng)站測(cè)

9、試與發(fā)布------------------------------25</p><p>　　5.1.網(wǎng)站的測(cè)試--------------------------25</p><p>　　5.2.網(wǎng)站的發(fā)布--------------------------26</p><p>　　6.網(wǎng)站的不足及后續(xù)改進(jìn)-------------------------26&l

10、t;/p><p>　　7.心得體會(huì)----------------------------------26</p><p>　　8.參考文獻(xiàn)----------------------------------28</p><p><b>　　網(wǎng)站的概述</b></p><p>　　本網(wǎng)站為游戲網(wǎng)站，主要以介紹游戲?yàn)橹?。本網(wǎng)站

11、多介紹的游戲?yàn)槿毡拘驮鹿景l(fā)行的人氣手游Fate/Grand Order，中文名為“命運(yùn)冠位指定”，目前所擁有服務(wù)器日服，國(guó)服，臺(tái)服及美服，國(guó)服由嗶哩嗶哩代理，本網(wǎng)站主要以國(guó)服為主。雖是日本開(kāi)發(fā)的游戲，但國(guó)服玩家意外的所占比重最多。</p><p>　　而本網(wǎng)站主要是以介紹這個(gè)游戲?yàn)橹鳎峁┯螒虻耐娣?、攻略以及游戲下載。網(wǎng)站的形式類(lèi)似一些游戲的官網(wǎng)，全網(wǎng)頁(yè)均使用css+div構(gòu)成，一些特效也是利用css+div完

12、成，并未使用javasprict，由于知識(shí)有限，網(wǎng)頁(yè)制作偏于簡(jiǎn)便。</p><p>　　網(wǎng)站主要由六個(gè)html文件組成，這六個(gè)版面分別為首頁(yè)、玩法介紹、fgo世界、英靈信息、迦勒底映像以及關(guān)注我們。</p><p><b>　　網(wǎng)站的初期規(guī)劃</b></p><p><b>　　2.1網(wǎng)站風(fēng)格</b></p>

13、<p>　　網(wǎng)站以介紹游戲的官網(wǎng)類(lèi)型為主，通過(guò)圖片，文字，視頻以及一些特效體現(xiàn)網(wǎng)站內(nèi)容。網(wǎng)站主要由三大部分構(gòu)成，網(wǎng)頁(yè)頭部，網(wǎng)頁(yè)主體以及網(wǎng)頁(yè)尾部。網(wǎng)頁(yè)頭部主要是導(dǎo)航鏈接，網(wǎng)頁(yè)尾部是一些網(wǎng)頁(yè)制作信息和logo，網(wǎng)頁(yè)主體則是網(wǎng)頁(yè)的主要內(nèi)容部分。</p><p>　　2.2.網(wǎng)站框架和布局</p><p>　　本網(wǎng)頁(yè)的框架主要是網(wǎng)頁(yè)首部，網(wǎng)頁(yè)主體，網(wǎng)頁(yè)尾部的三大塊框架，分別存放導(dǎo)航欄，

14、網(wǎng)頁(yè)內(nèi)容和制作信息。</p><p>　　網(wǎng)頁(yè)的布局采用圖片和文字并用的方式，基本只采用從上而下的一個(gè)個(gè)大板塊，左右的這種布局本網(wǎng)頁(yè)只在網(wǎng)頁(yè)尾部使用了，其他部分基本未涉及。</p><p>　　2.3.網(wǎng)站總體內(nèi)容模塊</p><p>　　網(wǎng)站主要由六個(gè)內(nèi)容模塊組成，分別為Fate/Grand order、玩法介紹、fgo世界、英靈信息、迦勒底映像、關(guān)注我們。對(duì)應(yīng)的

15、主要內(nèi)容分別為首頁(yè)、游戲的玩法介紹、游戲的世界觀、游戲人設(shè)、游戲影音以及我們制作組的信息。</p><p>　　2.4.網(wǎng)站logo設(shè)計(jì)</p><p>　　網(wǎng)站logo主要在網(wǎng)頁(yè)底部體現(xiàn)，主要利用ps軟件設(shè)計(jì)而成，然后插入到網(wǎng)頁(yè)代碼中。</p><p>　　圖片中間的文字代表我們所在的河海大學(xué)文天學(xué)院，環(huán)形邊框內(nèi)的文字為“604制作單位”代表我們小組成員。<

16、/p><p><b>　　3.工具和技術(shù)</b></p><p><b>　　3.1.工具</b></p><p>　　主要工具為Deamweaver，photoshop，愛(ài)剪輯，美圖秀秀，貍窩視頻轉(zhuǎn)換器，web服務(wù)器，游覽器。</p><p>　　主要作用分別是代碼編譯，圖片設(shè)計(jì)，視頻處理，視頻格式轉(zhuǎn)

17、換，網(wǎng)頁(yè)發(fā)布及網(wǎng)頁(yè)測(cè)試。</p><p><b>　　3.2.技術(shù)</b></p><p>　　主要技術(shù)為css+div布局方式，html網(wǎng)頁(yè)代碼編寫(xiě)，圖片處理技術(shù)，視頻處理技術(shù)。</p><p><b>　　4.網(wǎng)站實(shí)現(xiàn)</b></p><p>　　我在我們小組中有明確的分工，主要是網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)和

18、網(wǎng)頁(yè)布局，除此之外，基于效率和質(zhì)量的提升，我還被分配要求制作導(dǎo)航欄和輪播器以及部分網(wǎng)頁(yè)內(nèi)容，下面主要介紹一下設(shè)計(jì)思路、過(guò)程及結(jié)果。</p><p><b>　　4.1.導(dǎo)航模塊</b></p><p>　　4.1.1.模塊設(shè)計(jì)思路</p><p>　　任何一個(gè)網(wǎng)站都有一個(gè)叫導(dǎo)航欄的功能模塊，我們?cè)O(shè)計(jì)的導(dǎo)航欄也不例外。導(dǎo)航欄的主要作用是讓瀏覽網(wǎng)站

19、者能夠方便掌握網(wǎng)站的主要內(nèi)容，以及快速找到自己需要的內(nèi)容。我所設(shè)計(jì)的導(dǎo)航欄點(diǎn)開(kāi)后就可以轉(zhuǎn)到另一個(gè)html文件，并且頂替掉之前的html文件，因?yàn)檗D(zhuǎn)換速度快，這就給人一種導(dǎo)航欄并未變化的錯(cuò)覺(jué)，讓人感覺(jué)只有網(wǎng)頁(yè)主體部分的內(nèi)容變化了，這也是所有導(dǎo)航欄的特點(diǎn)。此導(dǎo)航欄并不是用文字構(gòu)成的，而是使用了六個(gè)小圖片構(gòu)成，這樣會(huì)使得整個(gè)導(dǎo)航欄更加美觀。</p><p>　　4.1.2.模塊界面截圖</p><p

20、>　　4.1.3.模塊實(shí)現(xiàn)主要代碼</p><p>　　<style type="text/css"></p><p>　　html,body{height:100%}</p><p>　　.div1{background-color:#800080;width:100%;height:10%}</p><p

21、><b>　　.div1</b></p><p>　　li{float:left;color:#FFF;margin-left:50px;margin-right:50px;padding-top:2px}</p><p>　　.div1 ul{list-style-type:none;margin:0px;padding:0px;margin-top:1px}

22、</p><p>　　<body bgcolor="#000040"></p><p>　　<div class="div1"></p><p><b>　　<ul></b></p><p>　　<li><a href=&quo

23、t;fgo.html"><img src="shouye.png"></a></li></p><p>　　<li><a href="fgo1.html"><img src="wanfa.png"></a></li></p>&l

24、t;p>　　<li><a href="fgo2.html"><img src="img-nav-word.png"></a></li></p><p>　　<li><a href="fgo3.html"><img src="img-nav-serva

25、nt.png"></a></li></p><p>　　<li><a href="fgo4.html"><img src="img-nav-gallery.png"></a></li></p><p>　　<li><a href=&q

26、uot;fgo5.html" ><img src="qq.jpg" usemap="#Map" border="0"></p><p>　　<map name="Map" id="Map"></p><p>　　<area shape="

27、;rect" coords="110,1,143,38" href="http://weibo.com/fateGO?from=myfollow_all" /></p><p>　　</map></a></li></p><p><b>　　</ul></b><

28、;/p><p><b>　　</div></b></p><p><b>　　</body></b></p><p><b>　　4.2.輪播器模塊</b></p><p>　　4.2.1.模塊設(shè)計(jì)思路</p><p>　　輪播器的主

29、要功能是讓多張圖片能夠按照一定的時(shí)間間隔進(jìn)行輪播展示，此功能可以使網(wǎng)頁(yè)空間得以節(jié)省，并且使網(wǎng)頁(yè)看起來(lái)更加美觀。輪播器主要運(yùn)用css代碼來(lái)實(shí)現(xiàn)的，大致思路是讓想要輪播的幾張圖片排成一列，創(chuàng)建一個(gè)圖框，只有這個(gè)圖框中可以顯示圖片，其他區(qū)域圖片將會(huì)隱藏，之后只要將圖片設(shè)計(jì)成自動(dòng)左右移動(dòng)便能達(dá)到想要的效果。</p><p>　　4.2.2.模塊界面截圖</p><p>　　此為開(kāi)始的樣子，它每隔一

30、段時(shí)間便會(huì)切換到下一張，右上的九個(gè)數(shù)字對(duì)應(yīng)九個(gè)圖片，點(diǎn)擊可以直接跳到對(duì)應(yīng)圖片。將鼠標(biāo)放于數(shù)字上不動(dòng)，數(shù)字會(huì)呈現(xiàn)紅色，此時(shí)圖片不再輪播，將會(huì)靜止在此頁(yè)，這是為了方便瀏覽者閱讀觀看。</p><p><b>　　切換后的圖片：</b></p><p>　　4.2.3.模塊實(shí)現(xiàn)主要代碼</p><p>　　<style type="t

31、ext/css"></p><p>　　html,body{height:100%}</p><p><b>　　#frame {</b></p><p>　　position: absolute;</p><p>　　margin-top:80px;</p><p>　　marg

32、in-left:380px;</p><p>　　width: 500px;</p><p>　　height: 500px;</p><p>　　overflow: hidden;</p><p>　　border-radius:5px;</p><p><b>　　}</b></p>

33、;<p>　　#photos img {</p><p>　　float: left;</p><p>　　width:500px;</p><p>　　height:500px;</p><p><b>　　}</b></p><p><b>　　#photos {<

34、;/b></p><p>　　position: absolute;z-index:9px;</p><p>　　width: calc(500px * 9);</p><p><b>　　}</b></p><p><b>　　.play{</b></p><p>　

35、　animation: ma 25s ease-out infinite alternate;</p><p><b>　　}</b></p><p>　　@keyframes ma {</p><p>　　0%,15% {margin-left: 0px;}</p><p>　　25%,20% {margi

36、n-left: -500px;}</p><p>　　35%,40% {margin-left: -1000px;}</p><p>　　45%,50% {margin-left: -1500px;}</p><p>　　55%,60% {margin-left: -2000px;}</p><p>　　65%,70%{

37、margin-left: -2500px;}</p><p>　　75%,80%{ margin-left: -3000px; }</p><p>　　85%,90%{ margin-left: -3500px; }</p><p>　　95%,100%{ margin-left: -4000px; }</p>

38、;<p><b>　　}</b></p><p><b>　　.num{</b></p><p>　　position:absolute;z-index:20;</p><p>　　display:inline-block;</p><p>　　right:0px;top:0px;&l

39、t;/p><p>　　border-radius:100%;</p><p>　　background:#00F;</p><p>　　width:25px;height:25px;</p><p>　　line-height:25px;</p><p>　　cursor:pointer;</p><p

40、>　　color:#FFF;</p><p>　　text-align:center;</p><p>　　opacity:0.8;</p><p><b>　　}</b></p><p>　　.num:hover{background:#F00;}</p><p>　　.num:hover

41、,#photos:hover{animation-play-state:paused;}</p><p>　　.num:nth-child(2){margin-right:30px}</p><p>　　.num:nth-child(3){margin-right:60px}</p><p>　　.num:nth-child(4){margin-right:90px

42、}</p><p>　　.num:nth-child(5){margin-right:120px}</p><p>　　.num:nth-child(6){margin-right:150px}</p><p>　　.num:nth-child(7){margin-right:180px}</p><p>　　.num:nth-child(8

43、){margin-right:210px}</p><p>　　.num:nth-child(9){margin-right:240px}</p><p>　　#a1:hover ~ #photos{animation: ma1 .5s ease-out forwards;}</p><p>　　#a2:hover ~ #photos{animation: ma2

44、.5s ease-out forwards;}</p><p>　　#a3:hover ~ #photos{animation: ma3 .5s ease-out forwards;}</p><p>　　#a4:hover ~ #photos{animation: ma4 .5s ease-out forwards;}</p><p>　　#a5:hover ~

45、#photos {animation: ma5 .5s ease-out forwards;}</p><p>　　#a6:hover ~ #photos {animation: ma6 .5s ease-out forwards;}</p><p>　　#a7:hover ~ #photos {animation: ma7 .5s ease-out forwards;}</p>

46、;<p>　　#a8:hover ~ #photos {animation: ma8 .5s ease-out forwards;}</p><p>　　#a9:hover ~ #photos {animation: ma9 .5s ease-out forwards;}</p><p>　　@keyframes ma1 {0%{margin-left:-2000px;}10

47、0%{margin-left:-0px;}}</p><p>　　@keyframes ma2 {0%{margin-left:-2000px;}100%{margin-left:-500px;}}</p><p>　　@keyframes ma3 {100%{margin-left:-1000px;}}</p><p>　　@keyframes ma4 {1

48、00%{margin-left:-1500px;}}</p><p>　　@keyframes ma5 {100%{margin-left:-2000px;}}</p><p>　　@keyframes ma6 {100%{margin-left:-2500px;}}</p><p>　　@keyframes ma7 {100%{margin-left:-30

49、00px;}}</p><p>　　@keyframes ma8 {100%{margin-left:-3500px;}}</p><p>　　@keyframes ma9 {100%{margin-left:-4000px;}}</p><p><b>　　</style></b></p><p>　

50、　<body bgcolor="#000040"></p><p>　　<div id="frame"></p><p>　　<a id="a1" class="num">1</a></p><p>　　<a id="a2&

51、quot; class="num">2</a></p><p>　　<a id="a3" class="num">3</a></p><p>　　<a id="a4" class="num">4</a></p>

52、<p>　　<a id="a5" class="num">5</a></p><p>　　<a id="a6" class="num">6</a></p><p>　　<a id="a7" class="num&quo

53、t;>7</a></p><p>　　<a id="a8" class="num">8</a></p><p>　　<a id="a9" class="num">9</a></p><p>　　<div id=&qu

54、ot;photos" class="play"></p><p>　　<img src="yase.jpg" ></p><p>　　<img src="shanshan.jpg" ></p><p>　　<img src="sikaha.jpg&qu

55、ot; ></p><p>　　<img src="chuanzhang.jpg" ></p><p>　　<img src="jieke.jpg" ></p><p>　　<img src="kongming.jpg" ></p><p>

56、　　<img src="landing.jpg" ></p><p>　　<img src="zhende.jpg" ></p><p>　　<img src="bojue.jpg" ></p><p><b>　　</div></b>&

57、lt;/p><p><b>　　</div></b></p><p><b>　　</body></b></p><p><b>　　4.3.內(nèi)容模塊</b></p><p>　　4.3.1.模塊設(shè)計(jì)思路</p><p>　　內(nèi)容模塊

58、我負(fù)責(zé)其中兩個(gè)的代碼編寫(xiě)，主要是首頁(yè)和英靈信息兩欄。首頁(yè)為了簡(jiǎn)潔做了很多修改，大體保留一張全屏高清大圖，即游戲宣傳海報(bào)。下面是一個(gè)視頻，即游戲宣傳pv，在下面則是頁(yè)面尾部；英靈信息一欄則是一張圖片其中有人物信息的鏈接，之下是對(duì)英靈的解析，再之下是輪播器，最后是網(wǎng)頁(yè)尾部。</p><p>　　4.3.2.模塊界面截圖</p><p><b>　　首頁(yè)：</b></

59、p><p>　　圖中的二維碼為游戲下載地址：</p><p><b>　　游戲宣傳視頻：</b></p><p><b>　　英靈信息板塊：</b></p><p>　　上圖文字部分為人物信息鏈接：</p><p><b>　　點(diǎn)開(kāi)后：</b></p&

60、gt;<p>　　英靈這一名詞在游戲中的含義：</p><p><b>　　輪播器：</b></p><p>　　另外網(wǎng)頁(yè)尾部附有一個(gè)嗶哩嗶哩的鏈接</p><p><b>　　點(diǎn)開(kāi)后：</b></p><p>　　4.3.3.模塊實(shí)現(xiàn)主要代碼</p><p>

61、　　首頁(yè)一欄的所有代碼：</p><p>　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p>　　<html xmlns=

62、"http://www.w3.org/1999/xhtml"></p><p><b>　　<head></b></p><p>　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><

63、/p><p>　　<title>歡迎來(lái)到FGO的世界！</title></p><p>　　<style type="text/css"></p><p>　　html,body{height:100%}</p><p>　　.div1{background-color:#800080;wi

64、dth:100%;height:10%}</p><p>　　.div2{background-color:#FFF;width:100%;height:105%}</p><p>　　.div1 li{float:left;color:#FFF;margin-left:50px;margin-right:50px;padding-top:2px}</p><p>

65、　　.div1 ul{list-style-type:none;margin:0px;padding:0px;margin-top:1px}</p><p>　　.div2 img{width:100%;height:105%}</p><p>　　.div3{background-color:#000040;width:100%;height:78%;margin:25px}</p

66、><p>　　.div4{background-color:#000040;width:100%;height:15%;margin-top:0px}</p><p>　　.div5{background-color:#000040;width:10%;height:25%}</p><p>　　.div6{background-color:#000040;float:

67、left;width:90%;height:25%}</p><p>　　.div7{background-color:#000040;float:left;width:50%;height:25%}</p><p>　　.div8{background-color:#000040;float:left;width:50%;height:25%}</p><p>　

68、　.div8 p{font-family:"楷體";font-size:20px;}</p><p>　　.photo{margin-top:-45px;margin-left:100px}</p><p>　　#b1{font-size:40px;font-family:"華文琥珀";color:#01139b}</p><p&

69、gt;　　#b2{font-size:15px;color:#FFF;margin-top:-25px}</p><p>　　a:visited{text-decoration:none;color:#c1b477}</p><p>　　a:link{text-decoration:none;color:#c1b477}</p><p>　　a:active{tex

70、t-decoration:none;color:#000040}</p><p>　　a:hover{text-decoration:none;color:#800080}</p><p><b>　　</style></b></p><p><b>　　</head></b></p>

71、;<p>　　<body bgcolor="#000040"></p><p>　　<div class="div1"></p><p><b>　　<ul></b></p><p>　　<li><a href="fgo.htm

72、l"><img src="shouye.png"></a></li> </p><p>　　<li><a href="fgo1.html"><img src="wanfa.png"></a></li></p><p>　

73、　<li><a href="fgo2.html"><img src="img-nav-word.png"></a></li></p><p>　　<li><a href="fgo3.html"><img src="img-nav-servant.png&q

74、uot;></a></li></p><p>　　<li><a href="fgo4.html"><img src="img-nav-gallery.png"></a></li></p><p>　　<li><a href="fgo5

75、.html" ><img src="qq.jpg" usemap="#Map" border="0"></p><p>　　<map name="Map" id="Map"></p><p>　　<area shape="rect&qu

76、ot; coords="110,1,143,38" href="http://weibo.com/fateGO?from=myfollow_all" /></p><p><b>　　</map></b></p><p><b>　　</a></li></b><

77、;/p><p><b>　　</ul></b></p><p><b>　　</div></b></p><p>　　<div class="div2"><img src="fate-go.jpg"></div></p&g

78、t;<p>　　<div class="div3" style="margin-left:-2px;width=600px;height:520px;background:URL(sptp1.jpg)"><center><embed src="2.mp4" width="580" height="453&

79、quot; autostart="false" ></embed></center></div></p><p>　　<div class="div4"></p><p>　　<div class="div5"></p><p>　　<

80、p id="b1">604 ▏</p></div></p><p>　　<div class="div6"></p><p>　　<div class="div7"></p><p>　　<img src="604logo.jpg&qu

81、ot; class="photo"></p></div></p><p>　　<div class="div8"></p><p>　　<p id="b2">本游戲由嗶哩嗶哩代理 | <a target="_blank" href="http

82、://www.bilibili.com/">bilibli官網(wǎng)</a></br>本網(wǎng)絡(luò)游戲適合年滿(mǎn)18歲（含）以上的玩家使用</br>抵制不良游戲 拒絕盜版游戲 注意自我保護(hù) 謹(jǐn)防受騙上當(dāng) 適度游戲益腦 沉迷游戲傷身 合理安排時(shí)間 享受健康生活</br>網(wǎng)頁(yè)制作|10#604</p></p><p><b>　　</div

83、></b></p><p><b>　　</div></b></p><p><b>　　</div></b></p><p><b>　　</body></b></p><p><b>　　</html&g

84、t;</b></p><p>　　英靈信息一欄的所有代碼：</p><p>　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><

85、;/p><p>　　<html xmlns="http://www.w3.org/1999/xhtml"></p><p><b>　　<head></b></p><p>　　<meta http-equiv="Content-Type" content="text/

86、html; charset=utf-8" /></p><p>　　<title>從者介紹</title></p><p>　　<style type="text/css"></p><p>　　html,body{height:100%}</p><p>　　.div1

87、{background-color:#800080;width:100%;height:10%}</p><p>　　.div2{background-color:#000040;width:100%;height:120%}</p><p>　　.div3{background-image:url(ylzuo.jpg);width:100%;height:65%;margin-top:1

88、0px}</p><p>　　.div4{background-image:url(yl1.jpg);width:100%;height:120%;margin-top:-30px}</p><p>　　.div1 li{float:left;color:#FFF;margin-left:50px;margin-right:50px;padding-top:2px}</p>

89、<p>　　.div1 ul{list-style-type:none;margin:0px;padding:0px;margin-top:1px}</p><p>　　.div4 h1{font-family:"楷體";font-size:50px;font-color:back;line-height:35px}</p><p>　　.div4 h4{ma

90、rgin-top:-25px}</p><p>　　.div5{background-color:#000040;width:100%;height:15%;margin-top:0px}</p><p>　　.div6{background-color:#000040;width:10%;height:25%}</p><p>　　.div7{background

91、-color:#000040;float:left;width:90%;height:25%}</p><p>　　.div8{background-color:#000040;float:left;width:50%;height:25%}</p><p>　　.div9{background-color:#000040;float:left;width:50%;height:25%}&

92、lt;/p><p>　　.div9 p{font-family:"楷體";font-size:20px;}</p><p>　　.photo{margin-top:-45px;margin-left:100px}</p><p>　　#b1{font-size:40px;font-family:"華文琥珀";color:#0113

93、9b}</p><p>　　#b2{font-size:15px;color:#FFF;margin-top:-25px}</p><p>　　a:visited{text-decoration:none;color:#c1b477}</p><p>　　a:link{text-decoration:none;color:#c1b477}</p>&l

94、t;p>　　a:active{text-decoration:none;color:#000040}</p><p>　　a:hover{text-decoration:none;color:#800080}</p><p><b>　　#frame {</b></p><p>　　position: absolute;</p&g

95、t;<p>　　margin-top:80px;</p><p>　　margin-left:380px;</p><p>　　width: 500px;</p><p>　　height: 500px;</p><p>　　overflow: hidden;</p><p>　　border-radiu

96、s:5px;</p><p><b>　　}</b></p><p>　　#photos img {</p><p>　　float: left;</p><p>　　width:500px;</p><p>　　height:500px;</p><p><b>

97、;　　}</b></p><p><b>　　#photos {</b></p><p>　　position: absolute;z-index:9px;</p><p>　　width: calc(500px * 9);</p><p><b>　　}</b></p>

98、<p><b>　　.play{</b></p><p>　　animation: ma 25s ease-out infinite alternate;</p><p><b>　　}</b></p><p>　　@keyframes ma {</p><p>　　0%,15% {m

99、argin-left: 0px;}</p><p>　　25%,20% {margin-left: -500px;}</p><p>　　35%,40% {margin-left: -1000px;}</p><p>　　45%,50% {margin-left: -1500px;}</p><p>　　55%,60%

100、{margin-left: -2000px;}</p><p>　　65%,70%{margin-left: -2500px;}</p><p>　　75%,80%{ margin-left: -3000px; }</p><p>　　85%,90%{ margin-left: -3500px; }</p>&l

101、t;p>　　95%,100%{ margin-left: -4000px; }</p><p><b>　　}</b></p><p><b>　　.num{</b></p><p>　　position:absolute;z-index:20;</p><p>　　displa

102、y:inline-block;</p><p>　　right:0px;top:0px;</p><p>　　border-radius:100%;</p><p>　　background:#00F;</p><p>　　width:25px;height:25px;</p><p>　　line-height:25

103、px;</p><p>　　cursor:pointer;</p><p>　　color:#FFF;</p><p>　　text-align:center;</p><p>　　opacity:0.8;</p><p><b>　　}</b></p><p>　　.nu

104、m:hover{background:#F00;}</p><p>　　.num:hover,#photos:hover{animation-play-state:paused;}</p><p>　　.num:nth-child(2){margin-right:30px}</p><p>　　.num:nth-child(3){margin-right:60px}

105、</p><p>　　.num:nth-child(4){margin-right:90px}</p><p>　　.num:nth-child(5){margin-right:120px}</p><p>　　.num:nth-child(6){margin-right:150px}</p><p>　　.num:nth-child(7){

106、margin-right:180px}</p><p>　　.num:nth-child(8){margin-right:210px}</p><p>　　.num:nth-child(9){margin-right:240px}</p><p>　　#a1:hover ~ #photos{animation: ma1 .5s ease-out forwards;}

107、</p><p>　　#a2:hover ~ #photos{animation: ma2 .5s ease-out forwards;}</p><p>　　#a3:hover ~ #photos{animation: ma3 .5s ease-out forwards;}</p><p>　　#a4:hover ~ #photos{animation: ma4

108、.5s ease-out forwards;}</p><p>　　#a5:hover ~ #photos {animation: ma5 .5s ease-out forwards;}</p><p>　　#a6:hover ~ #photos {animation: ma6 .5s ease-out forwards;}</p><p>　　#a7:hover

109、~ #photos {animation: ma7 .5s ease-out forwards;}</p><p>　　#a8:hover ~ #photos {animation: ma8 .5s ease-out forwards;}</p><p>　　#a9:hover ~ #photos {animation: ma9 .5s ease-out forwards;}</p&

110、gt;<p>　　@keyframes ma1 {0%{margin-left:-2000px;}100%{margin-left:-0px;}}</p><p>　　@keyframes ma2 {0%{margin-left:-2000px;}100%{margin-left:-500px;}}</p><p>　　@keyframes ma3 {100%{margi

111、n-left:-1000px;}}</p><p>　　@keyframes ma4 {100%{margin-left:-1500px;}}</p><p>　　@keyframes ma5 {100%{margin-left:-2000px;}}</p><p>　　@keyframes ma6 {100%{margin-left:-2500px;}}&

112、lt;/p><p>　　@keyframes ma7 {100%{margin-left:-3000px;}}</p><p>　　@keyframes ma8 {100%{margin-left:-3500px;}}</p><p>　　@keyframes ma9 {100%{margin-left:-4000px;}}</p><p>

113、;<b>　　</style></b></p><p><b>　　</head></b></p><p>　　<body bgcolor="#000040"></p><p>　　<div class="div1"></p>

114、;<p><b>　　<ul></b></p><p>　　<li><a href="fgo.html"><img src="shouye.png"></a></li></p><p>　　<li><a href="

115、fgo1.html"><img src="wanfa.png"></a></li></p><p>　　<li><a href="fgo2.html"><img src="img-nav-word.png"></a></li></p>

116、;<p>　　<li><a href="fgo3.html"><img src="img-nav-servant.png"></a></li></p><p>　　<li><a href="fgo4.html"><img src="img-n

117、av-gallery.png"></a></li></p><p>　　<li><a href="fgo5.html" ><img src="qq.jpg" usemap="#Map" border="0"></p><p>　　<

118、;map name="Map" id="Map"></p><p>　　<area shape="rect" coords="110,1,143,38" href="http://weibo.com/fateGO?from=myfollow_all" /></map></a>

119、;</li></p><p><b>　　</ul></b></p><p><b>　　</div></b></p><p>　　<div class="div2"></p><p>　　<img src="ylx

120、x.jpg" usemap="#Map2" border="0"></p><p>　　<map name="Map2" id="Map2"></p><p>　　<area shape="rect" coords="416,581,912,728

121、" target="_blank" href="http://www.itmo.com/fate/wiki/"></p><p><b>　　</map></b></p><p><b>　　</div></b></p><p>　　<d

122、iv class="div3"></p><p><b>　　</div></b></p><p>　　<div class="div4"></p><p>　　<h1><strong><span style="display:bloc

123、k;padding-left:150px;padding-top:60px">英靈的狂歡盛典</strong></h1></p><p>　　<h4><span style="display:block;padding-left:150px;padding-top:-20px">跨越時(shí)空的屏障，超越神話(huà)的對(duì)決！英靈們的盛宴將世界點(diǎn)

124、燃！</span></h4></p><p>　　<div id="frame"></p><p>　　<a id="a1" class="num">1</a></p><p>　　<a id="a2" class=&qu

125、ot;num">2</a></p><p>　　<a id="a3" class="num">3</a></p><p>　　<a id="a4" class="num">4</a></p><p>　　<

126、a id="a5" class="num">5</a></p><p>　　<a id="a6" class="num">6</a></p><p>　　<a id="a7" class="num">7</a&g

127、t;</p><p>　　<a id="a8" class="num">8</a></p><p>　　<a id="a9" class="num">9</a></p><p>　　<div id="photos"

128、 class="play"></p><p>　　<img src="yase.jpg" ></p><p>　　<img src="shanshan.jpg" ></p><p>　　<img src="sikaha.jpg" ></p&

129、gt;<p>　　<img src="chuanzhang.jpg" ></p><p>　　<img src="jieke.jpg" ></p><p>　　<img src="kongming.jpg" ></p><p>　　<img src=&

130、quot;landing.jpg" ></p><p>　　<img src="zhende.jpg" ></p><p>　　<img src="bojue.jpg" ></p><p><b>　　</div></b></p><

131、p><b>　　</div></b></p><p><b>　　</div></b></p><p>　　<div class="div5"></p><p>　　<div class="div6"></p>&l

132、t;p>　　<p id="b1">604 ▏</p></div></p><p>　　<div class="div7"></p><p>　　<div class="div8"></p><p>　　<img src="6

133、04logo.jpg" class="photo"></p></div></p><p>　　<div class="div9"></p><p>　　<p id="b2">本游戲由嗶哩嗶哩代理 | <a target="_blank" hr

134、ef="http://www.bilibili.com/">bilibli官網(wǎng)</a></br>本網(wǎng)絡(luò)游戲適合年滿(mǎn)18歲（含）以上的玩家使用</br>抵制不良游戲 拒絕盜版游戲 注意自我保護(hù) 謹(jǐn)防受騙上當(dāng) 適度游戲益腦 沉迷游戲傷身 合理安排時(shí)間 享受健康生活</br>網(wǎng)頁(yè)制作|10#604</p></p><p><b&

135、gt;　　</div></b></p><p><b>　　</div></b></p><p><b>　　</div></b></p><p><b>　　</body></b></p><p><b>

136、　　</html></b></p><p><b>　　5.網(wǎng)站測(cè)試與發(fā)布</b></p><p><b>　　5.1.網(wǎng)站的測(cè)試</b></p><p>　　對(duì)六個(gè)板塊分別進(jìn)行了測(cè)試，結(jié)果全部符合預(yù)期效果，輪播器可以正常運(yùn)行，圖片可以正常顯示，視頻可以正常播放，各個(gè)鏈接也可以正常打開(kāi)，整個(gè)網(wǎng)站都可

137、以正常運(yùn)作。</p><p><b>　　5.2.網(wǎng)站的發(fā)布</b></p><p>　　打開(kāi)服務(wù)器管理器添加角色服務(wù)，之后打開(kāi)internet信息服務(wù)可以看到網(wǎng)站字樣，然后右鍵添加網(wǎng)站。在彈出來(lái)的對(duì)話(huà)框中隨意起一個(gè)網(wǎng)站名稱(chēng)，物理路徑是網(wǎng)站源代碼所在路徑，端口自行設(shè)定，改端口用于路由的端口映射功能，一般默認(rèn)端口是80，主機(jī)名可以填寫(xiě)外網(wǎng)IP映射的域名網(wǎng)站，然后用服務(wù)器